-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #6 from prax-wallet/jessepinho/initial-components
Set up Storybook; create an Icon component as a proof of concept
- Loading branch information
Showing
11 changed files
with
1,869 additions
and
45 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -38,3 +38,5 @@ yarn-error.* | |
| /ios/ | ||
| app-example | ||
| modules/penumbra-sdk-module/ios/Mobile.xcframework/**/*.a | ||
|
|
||
| *storybook.log | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| import path from 'path'; | ||
| import react from '@vitejs/plugin-react'; | ||
| import type { StorybookConfig } from '@storybook/react-vite'; | ||
| import svgr from 'vite-plugin-svgr'; | ||
|
|
||
| const config: StorybookConfig = { | ||
| stories: ['../**/*.stories.@(js|jsx|mjs|ts|tsx)'], | ||
| async viteFinal(config) { | ||
| const { mergeConfig } = await import('vite'); | ||
|
|
||
| return mergeConfig(config, { | ||
| optimizeDeps: { | ||
| // Required for libraries that include JSX in their `.js` files. | ||
| // @see https://github.com/vitejs/vite/discussions/3448#discussioncomment-5904031 | ||
| esbuildOptions: { | ||
| loader: { | ||
| '.js': 'jsx', | ||
| }, | ||
| }, | ||
| }, | ||
| plugins: [ | ||
| // Allows us to use JSX without `import React from 'react'` | ||
| react({ jsxRuntime: 'automatic' }), | ||
| // Allows us to `import foo from './foo.svg'` in Storybook Web just like | ||
| // in React Native. | ||
| svgr({ svgrOptions: { exportType: 'default' } }), | ||
| ], | ||
| resolve: { | ||
| alias: { | ||
| // Match the tsconfig.json alias | ||
| '@': path.resolve(__dirname, '../src'), | ||
|
|
||
| // Tells Storybook to use react-native-web anytime there's an import | ||
| // from react-native | ||
| 'react-native': 'react-native-web', | ||
|
|
||
| // Use web-friendly versions of specific libraries | ||
| 'react-native-svg': 'react-native-svg-web', | ||
| }, | ||
| }, | ||
| }); | ||
| }, | ||
| addons: [ | ||
| '@storybook/addon-onboarding', | ||
| '@storybook/addon-essentials', | ||
| '@chromatic-com/storybook', | ||
| '@storybook/addon-interactions', | ||
| '@storybook/addon-react-native-web', | ||
| ], | ||
| framework: { | ||
| name: '@storybook/react-vite', | ||
| options: {}, | ||
| }, | ||
| core: { | ||
| builder: '@storybook/builder-vite', | ||
| }, | ||
| typescript: { | ||
| reactDocgen: 'react-docgen-typescript', | ||
| }, | ||
| }; | ||
| export default config; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| import { DripsyProvider } from 'dripsy'; | ||
| import dripsyTheme from '../utils/dripsyTheme'; | ||
| import type { Preview } from '@storybook/react'; | ||
| import React from 'react'; | ||
|
|
||
| const preview: Preview = { | ||
| decorators: [ | ||
| Story => ( | ||
| <DripsyProvider theme={dripsyTheme}> | ||
| <Story /> | ||
| </DripsyProvider> | ||
| ), | ||
| ], | ||
| parameters: { | ||
| controls: { | ||
| matchers: { | ||
| color: /(background|color)$/i, | ||
| date: /Date$/i, | ||
| }, | ||
| }, | ||
| }, | ||
| }; | ||
|
|
||
| export default preview; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| import { CheckCircle, Home, Coins } from 'lucide-react-native'; | ||
| import { Meta, StoryObj } from '@storybook/react/*'; | ||
| import Icon from '.'; | ||
| import { DripsyTheme } from '@/utils/dripsyTheme'; | ||
|
|
||
| const COLORS = { | ||
| success: (colors: DripsyTheme['color']) => colors.success.main, | ||
| destructive: (colors: DripsyTheme['color']) => colors.destructive.main, | ||
| unshield: (colors: DripsyTheme['color']) => colors.unshield.main, | ||
| }; | ||
|
|
||
| // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export | ||
| const meta = { | ||
| component: Icon, | ||
| tags: ['autodocs'], | ||
| argTypes: { | ||
| IconComponent: { | ||
| options: ['CheckCircle', 'Home', 'Coins'], | ||
| mapping: { CheckCircle, Home, Coins }, | ||
| }, | ||
| color: { | ||
| options: ['success', 'destructive', 'unshield'], | ||
| mapping: COLORS, | ||
| }, | ||
| }, | ||
| } satisfies Meta<typeof Icon>; | ||
|
|
||
| export default meta; | ||
| type Story = StoryObj<typeof meta>; | ||
|
|
||
| export const Primary: Story = { | ||
| args: { | ||
| IconComponent: CheckCircle, | ||
| size: 'md', | ||
| color: COLORS.success, | ||
| }, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| import { DripsyTheme } from '@/utils/dripsyTheme'; | ||
| import { useDripsyTheme } from 'dripsy'; | ||
| import { LucideIcon } from 'lucide-react-native'; | ||
| import { ComponentProps, FC } from 'react'; | ||
|
|
||
| export type IconSize = 'sm' | 'md' | 'lg'; | ||
|
|
||
| export interface IconProps { | ||
| /** | ||
| * The icon import from `lucide-react` to render. | ||
| * | ||
| * ```tsx | ||
| * import { ChevronRight } from 'lucide-react-native'; | ||
| * <Icon IconComponent={ChevronRight} /> | ||
| * ``` | ||
| */ | ||
| IconComponent: LucideIcon | FC; | ||
| /** | ||
| * - `sm`: 16px square | ||
| * - `md`: 24px square | ||
| * - `lg`: 32px square | ||
| */ | ||
| size: IconSize; | ||
| /** | ||
| * A function that takes the theme's `color` object and returns the hex color | ||
| * to render: `color={color => color.success.main}` | ||
| */ | ||
| color?: (themeColors: DripsyTheme['color']) => string; | ||
| } | ||
|
|
||
| const PROPS_BY_SIZE: Record<IconSize, ComponentProps<LucideIcon>> = { | ||
| sm: { | ||
| size: 16, | ||
| strokeWidth: 1, | ||
| }, | ||
| md: { | ||
| size: 24, | ||
| strokeWidth: 1.5, | ||
| }, | ||
| lg: { | ||
| size: 32, | ||
| strokeWidth: 2, | ||
| }, | ||
| }; | ||
|
|
||
| /** | ||
| * Renders the Lucide icon passed in via the `IconComponent` prop. Use this | ||
| * component rather than rendering Lucide icon components directly, since this | ||
| * component standardizes the stroke width and sizes throughout the Penumbra | ||
| * ecosystem. | ||
| * | ||
| * ```tsx | ||
| * <Icon | ||
| * IconComponent={ArrowRightLeft} | ||
| * size='sm' | ||
| * color={color => color.success.main} | ||
| * /> | ||
| * ``` | ||
| */ | ||
| export default function Icon({ IconComponent, size = 'sm', color }: IconProps) { | ||
| const { theme } = useDripsyTheme(); | ||
|
|
||
| return ( | ||
| <IconComponent | ||
| absoluteStrokeWidth | ||
| color={!color ? 'currentColor' : color(theme.color)} | ||
| {...PROPS_BY_SIZE[size]} | ||
| /> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.