From d926ae220360077ef49ee919dbb2e15f6bec0548 Mon Sep 17 00:00:00 2001 From: mikasackermn Date: Tue, 7 May 2024 11:59:28 +0000 Subject: [PATCH] feat: migrate storybook components to new package --- widget/storybook/.storybook/main.js | 6 +- widget/storybook/.storybook/preview.tsx | 2 - widget/storybook/package.json | 4 +- .../src/components/Button.stories.tsx | 154 +++++++++ .../src/components/ChainToken.stories.tsx | 39 +++ .../src/components/Checkbox.stories.tsx | 50 +++ .../src/components}/Chip.stories.tsx | 19 +- .../src/components}/Collapsible.stories.tsx | 21 +- .../src/components/Flags/flags.stories.tsx | 11 +- .../storybook/src/components/Flags/index.ts | 49 +++ .../FullExpandedQuote.stories.tsx | 3 +- .../src/components/FullExpandedQuote/mock.tsx | 5 +- .../src/components/IconButton.stories.tsx | 53 +++ .../src/components/Icons}/Icons.stories.tsx | 10 +- .../storybook/src/components/Icons/index.ts | 151 ++++++++ .../src/components}/List.stories.tsx | 29 +- .../CollapsibleMessageBox.stories.tsx | 13 +- .../MessageBox/MessageBox.stories.tsx | 10 +- .../src/components/Modal.stories.tsx | 70 ++++ .../src/components}/NotFound.stories.tsx | 7 +- .../src/components}/Popover.stories.tsx | 46 ++- .../src/components/PriceImpact.stories.tsx | 47 +++ .../src/components}/Radio.stories.tsx | 7 +- .../src/components}/RadioGroup.stories.tsx | 16 +- .../RefreshProgressButton.stories.tsx | 5 +- .../src/components}/Select.stories.tsx | 18 +- .../SelectableCategoryList.stories.tsx | 15 +- .../components/SelectableCategoryList/mock.ts | 0 .../src/components}/Skeleton.stories.tsx | 21 +- .../src/components}/Spinner.stories.tsx | 7 +- .../StepDetails/StepDetails.stories.tsx | 49 +++ .../src/components/StepDetails/mock.ts | 2 +- .../src/components/Switch.stories.tsx | 22 ++ .../src/components/Tabs/Tabs.stories.tsx | 58 ++++ .../src/components/Tabs/mock.tsx | 9 +- .../src/components/TextField.stories.tsx | 57 ++++ .../src/components}/Toast.stories.tsx | 39 ++- .../src/components}/TokenAmount.stories.tsx | 2 +- .../src/components}/Tooltip.stories.tsx | 9 +- .../src/components}/Typography.stories.tsx | 7 +- .../Wallet/ClickableWallet.stories.tsx | 16 +- .../Wallet/SelectableWallet.stories.tsx | 16 +- .../ConnectWallets.stories.tsx | 11 +- .../containers/ConnectWalletsModal/mock.ts | 136 ++++++++ .../src/containers}/SwapInput.stories.tsx | 9 +- widget/ui/.storybook/main.js | 26 -- widget/ui/.storybook/preview-head.html | 6 - widget/ui/.storybook/preview.tsx | 97 ------ widget/ui/package.json | 13 +- .../ui/src/components/Alert/Alert.stories.tsx | 47 --- .../src/components/Button/Button.stories.tsx | 36 -- widget/ui/src/components/Button/Button.tsx | 4 +- .../ui/src/components/Button/Button.types.tsx | 2 +- widget/ui/src/components/Button/index.ts | 1 + .../ChainToken/ChainToken.constants.ts | 4 +- .../ChainToken/ChainToken.stories.tsx | 20 -- .../src/components/ChainToken/ChainToken.tsx | 4 +- .../components/ChainToken/ChainToken.types.ts | 2 +- widget/ui/src/components/ChainToken/index.ts | 1 + .../components/Checkbox/Checkbox.stories.tsx | 33 -- .../ui/src/components/Checkbox/Checkbox.tsx | 4 +- .../src/components/Checkbox/Checkbox.types.ts | 3 +- widget/ui/src/components/Checkbox/index.ts | 1 + widget/ui/src/components/Chip/Chip.tsx | 4 +- widget/ui/src/components/Chip/Chip.types.ts | 2 +- widget/ui/src/components/Chip/index.ts | 1 + .../components/Collapsible/Collapsible.tsx | 4 +- .../Collapsible/Collapsible.types.ts | 2 +- widget/ui/src/components/Collapsible/index.ts | 1 + .../FullExpandedQuote.types.ts | 14 +- .../IconButton/IconButton.stories.tsx | 20 -- .../src/components/IconButton/IconButton.tsx | 4 +- .../components/IconButton/IconButton.types.ts | 4 +- widget/ui/src/components/IconButton/index.ts | 1 + widget/ui/src/components/List/List.types.ts | 4 +- .../ui/src/components/ListItem/ListItem.tsx | 4 +- .../src/components/ListItem/ListItem.types.ts | 2 +- widget/ui/src/components/ListItem/index.ts | 2 +- .../ListItemButton/ListItemButton.types.ts | 4 +- .../ui/src/components/Modal/Modal.stories.tsx | 33 -- widget/ui/src/components/Modal/Modal.tsx | 4 +- widget/ui/src/components/Modal/Modal.types.ts | 2 +- widget/ui/src/components/Modal/index.ts | 2 +- .../ui/src/components/NotFound/NotFound.tsx | 4 +- .../src/components/NotFound/NotFound.types.ts | 2 +- widget/ui/src/components/NotFound/index.tsx | 1 + widget/ui/src/components/Popover/Popover.tsx | 4 +- .../src/components/Popover/Popover.types.ts | 2 +- widget/ui/src/components/Popover/index.ts | 1 + .../PriceImpact/PriceImpact.stories.tsx | 21 -- .../components/PriceImpact/PriceImpact.tsx | 4 +- .../PriceImpact/PriceImpact.types.ts | 4 +- widget/ui/src/components/PriceImpact/index.ts | 5 +- widget/ui/src/components/Radio/Radio.tsx | 4 +- .../ui/src/components/Radio/Radio.types.tsx | 2 +- widget/ui/src/components/Radio/index.ts | 1 + .../src/components/RadioGroup/RadioGroup.tsx | 4 +- .../RadioGroup/RadioGroup.types.tsx | 8 +- widget/ui/src/components/RadioGroup/index.ts | 1 + widget/ui/src/components/Select/Select.tsx | 4 +- .../ui/src/components/Select/Select.types.ts | 2 +- widget/ui/src/components/Select/index.ts | 1 + .../SelectableCategoryList.tsx | 4 +- .../SelectableCategoryList.types.ts | 2 +- .../SelectableCategoryList/index.ts | 1 + .../ui/src/components/Skeleton/Skeleton.tsx | 4 +- .../src/components/Skeleton/Skeleton.types.ts | 2 +- widget/ui/src/components/Skeleton/index.ts | 1 + widget/ui/src/components/Spinner/Spinner.tsx | 4 +- .../src/components/Spinner/Spinner.types.ts | 2 +- widget/ui/src/components/Spinner/index.ts | 1 + .../StepDetails/StepDetails.stories.tsx | 23 -- .../StepDetails/StepDetails.types.ts | 6 +- .../SwapListItem/SwapListItem.stories.tsx | 32 -- .../components/SwapListItem/SwapListItem.tsx | 4 +- .../SwapListItem/SwapListItem.types.ts | 2 +- .../ui/src/components/SwapListItem/index.ts | 4 + widget/ui/src/components/SwapListItem/mock.ts | 321 ------------------ .../src/components/Switch/Switch.stories.tsx | 12 - widget/ui/src/components/Switch/Switch.tsx | 4 +- .../ui/src/components/Switch/Switch.types.tsx | 2 +- widget/ui/src/components/Switch/index.ts | 1 + .../ui/src/components/Tabs/Tabs.stories.tsx | 40 --- widget/ui/src/components/Tabs/Tabs.tsx | 4 +- widget/ui/src/components/Tabs/Tabs.types.tsx | 2 +- widget/ui/src/components/Tabs/index.ts | 1 + .../TextField/TextField.stories.tsx | 40 --- .../ui/src/components/TextField/TextField.tsx | 7 +- .../components/TextField/TextField.types.tsx | 6 +- widget/ui/src/components/TextField/index.ts | 1 + .../src/components/Toast/Toast.Provider.tsx | 20 +- .../ui/src/components/Toast/Toast.styles.ts | 5 - widget/ui/src/components/Toast/Toast.tsx | 4 +- widget/ui/src/components/Toast/Toast.types.ts | 2 +- widget/ui/src/components/Toast/index.ts | 1 + .../TokenAmount/TokenAmount.types.ts | 10 +- widget/ui/src/components/Tooltip/Tooltip.tsx | 4 +- .../src/components/Tooltip/Tooltip.types.ts | 2 +- widget/ui/src/components/Tooltip/index.ts | 1 + .../src/components/Typography/Typography.tsx | 4 +- .../Typography/Typography.types.tsx | 2 +- widget/ui/src/components/Typography/index.ts | 2 +- widget/ui/src/components/index.ts | 2 +- .../ConnectWalletsModal.styles.ts | 8 + .../ConnectWalletsModal.tsx | 21 +- .../ConnectWalletsModal.types.ts | 10 + .../containers/ConnectWalletsModal/index.ts | 1 + .../ConnectWalletsModal/mockData.ts | 48 ++- .../ui/src/containers/SwapInput/SwapInput.tsx | 4 +- .../containers/SwapInput/SwapInput.types.ts | 2 +- widget/ui/src/containers/SwapInput/index.ts | 1 + yarn.lock | 41 ++- 152 files changed, 1423 insertions(+), 1128 deletions(-) create mode 100644 widget/storybook/src/components/Button.stories.tsx create mode 100644 widget/storybook/src/components/ChainToken.stories.tsx create mode 100644 widget/storybook/src/components/Checkbox.stories.tsx rename widget/{ui/src/components/Chip => storybook/src/components}/Chip.stories.tsx (65%) rename widget/{ui/src/components/Collapsible => storybook/src/components}/Collapsible.stories.tsx (70%) rename widget/{ui => storybook}/src/components/Flags/flags.stories.tsx (85%) create mode 100644 widget/storybook/src/components/Flags/index.ts rename widget/{ui => storybook}/src/components/FullExpandedQuote/FullExpandedQuote.stories.tsx (91%) rename widget/{ui => storybook}/src/components/FullExpandedQuote/mock.tsx (99%) create mode 100644 widget/storybook/src/components/IconButton.stories.tsx rename widget/{ui/src/icons => storybook/src/components/Icons}/Icons.stories.tsx (85%) create mode 100644 widget/storybook/src/components/Icons/index.ts rename widget/{ui/src/components/List => storybook/src/components}/List.stories.tsx (92%) rename widget/{ui => storybook}/src/components/MessageBox/CollapsibleMessageBox.stories.tsx (61%) rename widget/{ui => storybook}/src/components/MessageBox/MessageBox.stories.tsx (54%) create mode 100644 widget/storybook/src/components/Modal.stories.tsx rename widget/{ui/src/components/NotFound => storybook/src/components}/NotFound.stories.tsx (60%) rename widget/{ui/src/components/Popover => storybook/src/components}/Popover.stories.tsx (56%) create mode 100644 widget/storybook/src/components/PriceImpact.stories.tsx rename widget/{ui/src/components/Radio => storybook/src/components}/Radio.stories.tsx (69%) rename widget/{ui/src/components/RadioGroup => storybook/src/components}/RadioGroup.stories.tsx (59%) rename widget/{ui/src/components/RefreshProgressButton => storybook/src/components}/RefreshProgressButton.stories.tsx (76%) rename widget/{ui/src/components/Select => storybook/src/components}/Select.stories.tsx (62%) rename widget/{ui => storybook}/src/components/SelectableCategoryList/SelectableCategoryList.stories.tsx (60%) rename widget/{ui => storybook}/src/components/SelectableCategoryList/mock.ts (100%) rename widget/{ui/src/components/Skeleton => storybook/src/components}/Skeleton.stories.tsx (66%) rename widget/{ui/src/components/Spinner => storybook/src/components}/Spinner.stories.tsx (78%) create mode 100644 widget/storybook/src/components/StepDetails/StepDetails.stories.tsx rename widget/{ui => storybook}/src/components/StepDetails/mock.ts (93%) create mode 100644 widget/storybook/src/components/Switch.stories.tsx create mode 100644 widget/storybook/src/components/Tabs/Tabs.stories.tsx rename widget/{ui => storybook}/src/components/Tabs/mock.tsx (83%) create mode 100644 widget/storybook/src/components/TextField.stories.tsx rename widget/{ui/src/components/Toast => storybook/src/components}/Toast.stories.tsx (59%) rename widget/{ui/src/components/TokenAmount => storybook/src/components}/TokenAmount.stories.tsx (92%) rename widget/{ui/src/components/Tooltip => storybook/src/components}/Tooltip.stories.tsx (81%) rename widget/{ui/src/components/Typography => storybook/src/components}/Typography.stories.tsx (94%) rename widget/{ui => storybook}/src/components/Wallet/ClickableWallet.stories.tsx (50%) rename widget/{ui => storybook}/src/components/Wallet/SelectableWallet.stories.tsx (50%) rename widget/{ui => storybook}/src/containers/ConnectWalletsModal/ConnectWallets.stories.tsx (63%) create mode 100644 widget/storybook/src/containers/ConnectWalletsModal/mock.ts rename widget/{ui/src/containers/SwapInput => storybook/src/containers}/SwapInput.stories.tsx (76%) delete mode 100644 widget/ui/.storybook/main.js delete mode 100644 widget/ui/.storybook/preview-head.html delete mode 100644 widget/ui/.storybook/preview.tsx delete mode 100644 widget/ui/src/components/Alert/Alert.stories.tsx delete mode 100644 widget/ui/src/components/Button/Button.stories.tsx delete mode 100644 widget/ui/src/components/ChainToken/ChainToken.stories.tsx delete mode 100644 widget/ui/src/components/Checkbox/Checkbox.stories.tsx delete mode 100644 widget/ui/src/components/IconButton/IconButton.stories.tsx delete mode 100644 widget/ui/src/components/Modal/Modal.stories.tsx delete mode 100644 widget/ui/src/components/PriceImpact/PriceImpact.stories.tsx delete mode 100644 widget/ui/src/components/StepDetails/StepDetails.stories.tsx delete mode 100644 widget/ui/src/components/SwapListItem/SwapListItem.stories.tsx delete mode 100644 widget/ui/src/components/SwapListItem/mock.ts delete mode 100644 widget/ui/src/components/Switch/Switch.stories.tsx delete mode 100644 widget/ui/src/components/Tabs/Tabs.stories.tsx delete mode 100644 widget/ui/src/components/TextField/TextField.stories.tsx create mode 100644 widget/ui/src/containers/ConnectWalletsModal/ConnectWalletsModal.styles.ts create mode 100644 widget/ui/src/containers/ConnectWalletsModal/ConnectWalletsModal.types.ts diff --git a/widget/storybook/.storybook/main.js b/widget/storybook/.storybook/main.js index 5f18a9fd98..f5eab40b75 100644 --- a/widget/storybook/.storybook/main.js +++ b/widget/storybook/.storybook/main.js @@ -4,17 +4,17 @@ module.exports = { addons: [ getAbsolutePath('@storybook/addon-links'), getAbsolutePath('@storybook/addon-essentials'), - '@chromatic-com/storybook' + '@chromatic-com/storybook', ], // https://storybook.js.org/docs/react/configure/typescript#mainjs-configuration typescript: { check: true, // type-check stories during Storybook build }, - framework: getAbsolutePath("@storybook/react-vite"), + framework: getAbsolutePath('@storybook/react-vite'), docs: { autodocs: true, - reactDocgen: false, + reactDocgen: true, }, }; /** diff --git a/widget/storybook/.storybook/preview.tsx b/widget/storybook/.storybook/preview.tsx index cc55d42e5a..6b69f40976 100644 --- a/widget/storybook/.storybook/preview.tsx +++ b/widget/storybook/.storybook/preview.tsx @@ -5,8 +5,6 @@ import { I18nManager, darkTheme, lightTheme, styled } from '@rango-dev/ui'; // https://storybook.js.org/docs/react/writing-stories/parameters#global-parameters export const parameters = { - // https://storybook.js.org/docs/react/essentials/actions#automatically-matching-args - actions: { argTypesRegex: '^on.*' }, docs: { story: { iframeHeight: 300, diff --git a/widget/storybook/package.json b/widget/storybook/package.json index 61d20e764d..1d2f390e35 100644 --- a/widget/storybook/package.json +++ b/widget/storybook/package.json @@ -22,11 +22,13 @@ "react": ">=16" }, "devDependencies": { + "@chromatic-com/storybook": "^1.3.3", "@types/react": "^18.0.25", "@types/react-dom": "^18.0.8" }, "dependencies": { "@rango-dev/ui": "^0.33.1-next.1", + "@rango-dev/wallets-shared": "^0.32.0", "@storybook/addon-essentials": "^8.0.8", "@storybook/addon-info": "^5.3.21", "@storybook/addon-links": "^8.0.8", @@ -42,4 +44,4 @@ "publishConfig": { "access": "public" } -} \ No newline at end of file +} diff --git a/widget/storybook/src/components/Button.stories.tsx b/widget/storybook/src/components/Button.stories.tsx new file mode 100644 index 0000000000..86920d2f5d --- /dev/null +++ b/widget/storybook/src/components/Button.stories.tsx @@ -0,0 +1,154 @@ +import type { ButtonPropTypes } from '@rango-dev/ui'; +import type { Meta } from '@storybook/react'; + +import { Button, Divider, styled, WalletIcon } from '@rango-dev/ui'; +import React from 'react'; + +const meta: Meta = { + component: Button, + args: { + prefix: <>, + suffix: <>, + }, + argTypes: { + size: { + options: ['medium', 'small', 'xxsmall', 'xsmall', 'large'], + control: { type: 'select' }, + description: 'medium | small | xxsmall | xsmall | large | undefined', + type: 'string', + }, + variant: { + name: 'variant', + options: ['contained', 'outlined', 'ghost', 'default'], + control: { type: 'select' }, + description: 'contained | outlined | ghost | default | undefined', + type: 'string', + }, + type: { + options: ['primary', 'secondary', 'error', 'warning', 'success'], + control: { type: 'select' }, + description: + 'primary | secondary | error | warning | success | undefined', + type: 'string', + }, + loading: { + control: { type: 'boolean' }, + type: 'boolean', + }, + disabled: { + control: { type: 'boolean' }, + type: 'boolean', + }, + fullWidth: { + control: { type: 'boolean' }, + type: 'boolean', + }, + disableRipple: { + control: { type: 'boolean' }, + type: 'boolean', + }, + }, +}; + +export default meta; + +const Content = styled('div', { + display: 'flex', + alignItems: 'center', +}); + +export const Main = (props: ButtonPropTypes) => ( + +); + +export const WithPrefix = (args: ButtonPropTypes) => { + return ( + + ); +}; + +export const WithSuffix = (args: ButtonPropTypes) => ( + +); + +export const TypesAndVariants = (args: ButtonPropTypes) => ( +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+); diff --git a/widget/storybook/src/components/ChainToken.stories.tsx b/widget/storybook/src/components/ChainToken.stories.tsx new file mode 100644 index 0000000000..53507e3ef4 --- /dev/null +++ b/widget/storybook/src/components/ChainToken.stories.tsx @@ -0,0 +1,39 @@ +import type { ChainTokenPropTypes } from '@rango-dev/ui'; +import type { Meta } from '@storybook/react'; + +import { ChainToken } from '@rango-dev/ui'; +import React from 'react'; + +const meta: Meta = { + title: 'Components/Chain Token', + component: ChainToken, + args: { + chainImage: 'https://api.rango.exchange/blockchains/bsc.svg', + tokenImage: 'https://api.rango.exchange/tokens/ETH/BNB.png', + size: 'medium', + }, + argTypes: { + size: { + options: ['medium', 'small', 'large', 'xmedium'], + control: { type: 'select' }, + description: 'medium | small | large | xmedium', + type: 'string', + }, + chianImageId: { + control: { type: 'text' }, + type: 'string', + }, + useAsPlaceholder: { + control: { type: 'boolean' }, + type: 'boolean', + }, + loading: { + control: { type: 'boolean' }, + type: 'boolean', + }, + }, +}; + +export default meta; + +export const Main = (args: ChainTokenPropTypes) => ; diff --git a/widget/storybook/src/components/Checkbox.stories.tsx b/widget/storybook/src/components/Checkbox.stories.tsx new file mode 100644 index 0000000000..7d8bee17c8 --- /dev/null +++ b/widget/storybook/src/components/Checkbox.stories.tsx @@ -0,0 +1,50 @@ +import type { CheckboxPropTypes } from '@rango-dev/ui'; +import type { Meta } from '@storybook/react'; + +import { Checkbox } from '@rango-dev/ui'; +import React from 'react'; + +const meta: Meta = { + title: 'Components/Checkbox', + component: Checkbox, + args: { + label: 'I am a checkbox', + defaultChecked: true, + }, + argTypes: { + id: { + control: { type: 'text' }, + type: 'string', + }, + label: { + control: { type: 'text' }, + defaultValue: 'I am a checkbox', + }, + defaultChecked: { + control: { type: 'boolean' }, + defaultValue: true, + type: 'boolean', + }, + checked: { + control: { type: 'boolean' }, + type: 'boolean', + }, + disabled: { + control: { type: 'boolean' }, + type: 'boolean', + }, + name: { + control: { type: 'text' }, + type: 'string', + }, + onCheckedChange: { + type: 'function', + }, + }, +}; + +export default meta; + +export const Main = (props: CheckboxPropTypes) => ( + +); diff --git a/widget/ui/src/components/Chip/Chip.stories.tsx b/widget/storybook/src/components/Chip.stories.tsx similarity index 65% rename from widget/ui/src/components/Chip/Chip.stories.tsx rename to widget/storybook/src/components/Chip.stories.tsx index 50d7e8d09e..1735ecae2d 100644 --- a/widget/ui/src/components/Chip/Chip.stories.tsx +++ b/widget/storybook/src/components/Chip.stories.tsx @@ -1,35 +1,38 @@ -import type { PropTypes } from './Chip.types'; +import type { ChipPropTypes } from '@rango-dev/ui'; +import { Chip } from '@rango-dev/ui'; import React from 'react'; -import { Chip } from './Chip'; - export default { title: 'Components/Chip', component: Chip, args: { label: 'chip', selected: true, + style: {}, + prefix: <>, + suffix: <>, }, argTypes: { label: { - name: 'label', defaultValue: 'chip', control: { type: 'text', }, }, selected: { - name: 'selected', control: { type: 'boolean' }, defaultValue: true, }, + className: { + type: 'string', + }, }, }; -export const Main = (args: PropTypes) => ; +export const Main = (args: ChipPropTypes) => ; -export const ChipWithPrefix = (args: PropTypes) => ( +export const ChipWithPrefix = (args: ChipPropTypes) => ( ( /> ); -export const ChipWithSuffix = (args: PropTypes) => ( +export const ChipWithSuffix = (args: ChipPropTypes) => ( , }, argTypes: { open: { - name: 'open', defaultValue: false, control: { type: 'boolean' }, }, + onOpenChange: { + type: 'function', + }, }, }; -export const Main = (args: CollapsibleProps) => { +export const Main = (args: CollapsiblePropTypes) => { const [open, setOpen] = useState(false); return ( diff --git a/widget/ui/src/components/Flags/flags.stories.tsx b/widget/storybook/src/components/Flags/flags.stories.tsx similarity index 85% rename from widget/ui/src/components/Flags/flags.stories.tsx rename to widget/storybook/src/components/Flags/flags.stories.tsx index 3cbe005512..470a022392 100644 --- a/widget/ui/src/components/Flags/flags.stories.tsx +++ b/widget/storybook/src/components/Flags/flags.stories.tsx @@ -1,15 +1,14 @@ +import type { FlagPropTypes } from '@rango-dev/ui'; import type { Meta } from '@storybook/react'; +import { English, styled, Typography } from '@rango-dev/ui'; import React from 'react'; -import { styled } from '../../theme'; -import { Typography } from '../Typography'; - -import * as Flags from '.'; +import { Flags } from '.'; export default { title: 'Components/Flags', - component: Flags.English, + component: English, args: { size: 16, color: 'black', @@ -47,7 +46,7 @@ const Container = styled('div', { gap: 15, }); -export const Main = (props: Flags.FlagPropTypes) => ( +export const Main = (props: FlagPropTypes) => ( {Object.keys(Flags).map((icon) => { // eslint-disable-next-line diff --git a/widget/storybook/src/components/Flags/index.ts b/widget/storybook/src/components/Flags/index.ts new file mode 100644 index 0000000000..b03a8d9183 --- /dev/null +++ b/widget/storybook/src/components/Flags/index.ts @@ -0,0 +1,49 @@ +import { + Bengali, + Chinese, + English, + Finland, + French, + German, + Greece, + Hindi, + Indonesian, + Italian, + Japanese, + Malay, + Netherlands, + Poland, + Portuguese, + Russian, + Spanish, + Swedish, + Thai, + Turkish, + Ukrainian, + Vietnamese, +} from '@rango-dev/ui'; + +export const Flags = { + English, + Spanish, + Japanese, + French, + Portuguese, + Hindi, + Chinese, + Bengali, + Russian, + Indonesian, + German, + Malay, + Swedish, + Thai, + Turkish, + Ukrainian, + Vietnamese, + Finland, + Netherlands, + Greece, + Italian, + Poland, +}; diff --git a/widget/ui/src/components/FullExpandedQuote/FullExpandedQuote.stories.tsx b/widget/storybook/src/components/FullExpandedQuote/FullExpandedQuote.stories.tsx similarity index 91% rename from widget/ui/src/components/FullExpandedQuote/FullExpandedQuote.stories.tsx rename to widget/storybook/src/components/FullExpandedQuote/FullExpandedQuote.stories.tsx index 799789ec50..6c9469860c 100644 --- a/widget/ui/src/components/FullExpandedQuote/FullExpandedQuote.stories.tsx +++ b/widget/storybook/src/components/FullExpandedQuote/FullExpandedQuote.stories.tsx @@ -1,6 +1,7 @@ import type { Meta, StoryObj } from '@storybook/react'; -import { FullExpandedQuote } from './FullExpandedQuote'; +import { FullExpandedQuote } from '@rango-dev/ui'; + import { steps, tags } from './mock'; const meta: Meta = { diff --git a/widget/ui/src/components/FullExpandedQuote/mock.tsx b/widget/storybook/src/components/FullExpandedQuote/mock.tsx similarity index 99% rename from widget/ui/src/components/FullExpandedQuote/mock.tsx rename to widget/storybook/src/components/FullExpandedQuote/mock.tsx index bc4dee4073..1a01443422 100644 --- a/widget/ui/src/components/FullExpandedQuote/mock.tsx +++ b/widget/storybook/src/components/FullExpandedQuote/mock.tsx @@ -1,9 +1,8 @@ -import type { Step } from '../StepDetails/StepDetails.types'; +import type { Step } from '@rango-dev/ui'; +import { Alert } from '@rango-dev/ui'; import React from 'react'; -import { Alert } from '../Alert'; - export const steps: Step[] = [ { swapper: { diff --git a/widget/storybook/src/components/IconButton.stories.tsx b/widget/storybook/src/components/IconButton.stories.tsx new file mode 100644 index 0000000000..25f3bc2163 --- /dev/null +++ b/widget/storybook/src/components/IconButton.stories.tsx @@ -0,0 +1,53 @@ +import type { IconButtonPropTypes } from '@rango-dev/ui'; +import type { Meta } from '@storybook/react'; + +import { IconButton, WalletIcon } from '@rango-dev/ui'; +import React from 'react'; + +const meta: Meta = { + component: IconButton, + args: { + style: {}, + }, + argTypes: { + size: { + options: ['medium', 'small', 'xxsmall', 'xsmall', 'large'], + control: { type: 'select' }, + description: 'medium | small | xxsmall | xsmall | large | undefined', + type: 'string', + }, + variant: { + name: 'variant', + options: ['contained', 'outlined', 'ghost', 'default'], + control: { type: 'select' }, + description: 'contained | outlined | ghost | default | undefined', + type: 'string', + }, + type: { + options: ['primary', 'secondary', 'error', 'warning', 'success'], + control: { type: 'select' }, + description: + 'primary | secondary | error | warning | success | undefined', + type: 'string', + }, + onClick: { + type: 'function', + }, + loading: { + control: { type: 'boolean' }, + type: 'boolean', + }, + disabled: { + control: { type: 'boolean' }, + type: 'boolean', + }, + }, +}; + +export default meta; + +export const Main = (props: IconButtonPropTypes) => ( + + + +); diff --git a/widget/ui/src/icons/Icons.stories.tsx b/widget/storybook/src/components/Icons/Icons.stories.tsx similarity index 85% rename from widget/ui/src/icons/Icons.stories.tsx rename to widget/storybook/src/components/Icons/Icons.stories.tsx index c59692065f..3da87edf6f 100644 --- a/widget/ui/src/icons/Icons.stories.tsx +++ b/widget/storybook/src/components/Icons/Icons.stories.tsx @@ -1,16 +1,14 @@ -import type { SvgIconProps } from '../components/SvgIcon'; +import type { SvgIconProps } from '@rango-dev/ui'; import type { Meta } from '@storybook/react'; +import { AutoThemeIcon, styled, Typography } from '@rango-dev/ui'; import React from 'react'; -import { Typography } from '../components/Typography'; -import { styled } from '../theme'; - -import * as Icons from '.'; +import { Icons } from '.'; export default { title: 'Components/Icons', - component: Icons.AutoThemeIcon, + component: AutoThemeIcon, args: { size: 16, color: 'black', diff --git a/widget/storybook/src/components/Icons/index.ts b/widget/storybook/src/components/Icons/index.ts new file mode 100644 index 0000000000..97332f9585 --- /dev/null +++ b/widget/storybook/src/components/Icons/index.ts @@ -0,0 +1,151 @@ +import { + AddIcon, + AutorenewIcon, + AutoThemeIcon, + BorderRadiusIcon, + BridgesIcon, + BullhornIcon, + ChainsIcon, + ChevronDownIcon, + ChevronLeftIcon, + ChevronRightIcon, + ChevronUpIcon, + CloseIcon, + ColorsIcon, + CompleteIcon, + CopyIcon, + CosmosCategoryIcon, + CustomColorsIcon, + DarkModeIcon, + DeleteIcon, + DesktopIcon, + DiscordIcon, + DocumentIcon, + DoneIcon, + ErrorIcon, + EvmCategoryIcon, + ExchangeIcon, + ExitIcon, + ExplorerIcon, + ExternalLinkIcon, + FontIcon, + GasIcon, + HeightIcon, + InfinityIcon, + InfoErrorIcon, + InfoIcon, + InProgressIcon, + KeyIcon, + LanguageIcon, + LightModeIcon, + LinkIcon, + LoadingIcon, + LogoWithTextIcon, + MediumIcon, + MenuIcon, + MoreIcon, + NextIcon, + NoNotificationIcon, + NoRouteIcon, + NotificationNumberIcon, + NotificationsIcon, + NumberIcon, + OtherCategoryIcon, + PinIcon, + RefreshIcon, + ReportIcon, + RequestIcon, + ReverseIcon, + RouteIcon, + SearchIcon, + SettingsIcon, + StyleIcon, + SupportIcon, + SwapIcon, + TelegramIcon, + TimeIcon, + TransactionIcon, + TuneIcon, + UtxoCategoryIcon, + WalletIcon, + WarningIcon, + WidgetIcon, + WidthIcon, + XIcon, +} from '@rango-dev/ui'; + +export const Icons = { + AddIcon, + AutoThemeIcon, + AutorenewIcon, + BorderRadiusIcon, + BridgesIcon, + ChevronDownIcon, + ChevronLeftIcon, + ChevronRightIcon, + ChevronUpIcon, + CloseIcon, + CompleteIcon, + CopyIcon, + CosmosCategoryIcon, + CustomColorsIcon, + DarkModeIcon, + DeleteIcon, + DesktopIcon, + DocumentIcon, + DoneIcon, + EvmCategoryIcon, + ErrorIcon, + ExchangeIcon, + ExitIcon, + ExplorerIcon, + ExternalLinkIcon, + FontIcon, + GasIcon, + HeightIcon, + InProgressIcon, + InfoErrorIcon, + InfoIcon, + LanguageIcon, + LightModeIcon, + LinkIcon, + LoadingIcon, + LogoWithTextIcon, + MenuIcon, + MoreIcon, + NoRouteIcon, + NextIcon, + NoNotificationIcon, + NotificationNumberIcon, + NotificationsIcon, + NumberIcon, + OtherCategoryIcon, + PinIcon, + RefreshIcon, + ReportIcon, + RequestIcon, + ReverseIcon, + RouteIcon, + SearchIcon, + SupportIcon, + SwapIcon, + TimeIcon, + TransactionIcon, + TuneIcon, + UtxoCategoryIcon, + WalletIcon, + WarningIcon, + WidgetIcon, + WidthIcon, + BullhornIcon, + ChainsIcon, + ColorsIcon, + DiscordIcon, + InfinityIcon, + KeyIcon, + MediumIcon, + SettingsIcon, + StyleIcon, + TelegramIcon, + XIcon, +}; diff --git a/widget/ui/src/components/List/List.stories.tsx b/widget/storybook/src/components/List.stories.tsx similarity index 92% rename from widget/ui/src/components/List/List.stories.tsx rename to widget/storybook/src/components/List.stories.tsx index 43cef3480b..e90c69db10 100644 --- a/widget/ui/src/components/List/List.stories.tsx +++ b/widget/storybook/src/components/List.stories.tsx @@ -1,19 +1,17 @@ import type { Meta, StoryObj } from '@storybook/react'; -import React, { useState } from 'react'; - import { + Button, + Checkbox, ChevronRightIcon, + Chip, DeleteIcon, + List, + ListItemButton, RefreshIcon, WalletIcon, -} from '../../icons'; -import { Button } from '../Button'; -import { Checkbox } from '../Checkbox'; -import { Chip } from '../Chip'; -import { ListItemButton } from '../ListItemButton'; - -import { List } from './List'; +} from '@rango-dev/ui'; +import React, { useState } from 'react'; const DEFAULT_TITLE = 'Your title'; const DEFAULT_DESCRIPTION = 'Here you can write your description.'; @@ -24,7 +22,18 @@ type Story = StoryObj; export default { title: 'Components/List', component: List, - argTypes: {}, + argTypes: { + type: { + description: 'type is a react element', + }, + items: { + description: 'An array consisting of id and type', + }, + as: { + description: 'div | ul', + type: 'string', + }, + }, } satisfies Meta; export const Item: Story = { diff --git a/widget/ui/src/components/MessageBox/CollapsibleMessageBox.stories.tsx b/widget/storybook/src/components/MessageBox/CollapsibleMessageBox.stories.tsx similarity index 61% rename from widget/ui/src/components/MessageBox/CollapsibleMessageBox.stories.tsx rename to widget/storybook/src/components/MessageBox/CollapsibleMessageBox.stories.tsx index 067d7bd19a..94d42f5a3c 100644 --- a/widget/ui/src/components/MessageBox/CollapsibleMessageBox.stories.tsx +++ b/widget/storybook/src/components/MessageBox/CollapsibleMessageBox.stories.tsx @@ -1,13 +1,18 @@ import type { Meta, StoryObj } from '@storybook/react'; +import { CollapsibleMessageBox, Typography } from '@rango-dev/ui'; import React from 'react'; -import { Typography } from '../Typography'; - -import { CollapsibleMessageBox } from './CollapsibleMessageBox'; - const meta: Meta = { component: CollapsibleMessageBox, + argTypes: { + status: { + options: ['info', 'error', 'warning', 'success', 'loading'], + control: { type: 'select' }, + description: 'info | error | warning | success | loading | undefined', + type: 'string', + }, + }, }; export default meta; diff --git a/widget/ui/src/components/MessageBox/MessageBox.stories.tsx b/widget/storybook/src/components/MessageBox/MessageBox.stories.tsx similarity index 54% rename from widget/ui/src/components/MessageBox/MessageBox.stories.tsx rename to widget/storybook/src/components/MessageBox/MessageBox.stories.tsx index 8992fdab0a..774bf00b46 100644 --- a/widget/ui/src/components/MessageBox/MessageBox.stories.tsx +++ b/widget/storybook/src/components/MessageBox/MessageBox.stories.tsx @@ -1,6 +1,6 @@ import type { Meta, StoryObj } from '@storybook/react'; -import { MessageBox } from './DefaultMessageBox'; +import { MessageBox } from '@rango-dev/ui'; const meta: Meta = { component: MessageBox, @@ -15,4 +15,12 @@ export const Main: Story = { title: 'Title', description: 'This is a test text', }, + argTypes: { + type: { + options: ['info', 'error', 'warning', 'success', 'loading'], + control: { type: 'select' }, + description: 'info | error | warning | success | loading', + type: 'string', + }, + }, }; diff --git a/widget/storybook/src/components/Modal.stories.tsx b/widget/storybook/src/components/Modal.stories.tsx new file mode 100644 index 0000000000..a3931a275d --- /dev/null +++ b/widget/storybook/src/components/Modal.stories.tsx @@ -0,0 +1,70 @@ +import type { ModalPropTypes } from '@rango-dev/ui'; +import type { Meta } from '@storybook/react'; + +import { MessageBox, Modal } from '@rango-dev/ui'; +import React, { useState } from 'react'; + +export default { + name: 'Modal', + component: Modal, + args: { + title: 'I`m a modal', + styles: { + root: {}, + container: {}, + content: {}, + footer: {}, + }, + }, + argTypes: { + open: { + control: { type: 'boolean' }, + type: 'boolean', + }, + onClose: { + type: 'function', + }, + anchor: { + options: ['bottom', 'right', 'center'], + control: { type: 'select' }, + description: 'bottom | right | center | undefined', + type: 'string', + }, + dismissible: { + control: { type: 'boolean' }, + defaultValue: true, + type: 'boolean', + }, + hasWatermark: { + control: { type: 'boolean' }, + defaultValue: true, + + type: 'boolean', + }, + hasCloseIcon: { + control: { type: 'boolean' }, + type: 'boolean', + defaultValue: true, + }, + }, +} as Meta; + +export const Main = (args: ModalPropTypes) => { + const [open, setOpen] = useState(false); + return ( +
+ + setOpen(false)}> + + +
+ ); +}; diff --git a/widget/ui/src/components/NotFound/NotFound.stories.tsx b/widget/storybook/src/components/NotFound.stories.tsx similarity index 60% rename from widget/ui/src/components/NotFound/NotFound.stories.tsx rename to widget/storybook/src/components/NotFound.stories.tsx index 901977dd7b..0a5f162bb3 100644 --- a/widget/ui/src/components/NotFound/NotFound.stories.tsx +++ b/widget/storybook/src/components/NotFound.stories.tsx @@ -1,10 +1,9 @@ -import type { PropTypes } from './NotFound.types'; +import type { NotFoundPropTypes } from '@rango-dev/ui'; import type { Meta } from '@storybook/react'; +import { NotFound } from '@rango-dev/ui'; import React from 'react'; -import { NotFound } from './NotFound'; - export default { title: 'Components/NotFound', component: NotFound, @@ -14,4 +13,4 @@ export default { }, } as Meta; -export const Main = (args: PropTypes) => ; +export const Main = (args: NotFoundPropTypes) => ; diff --git a/widget/ui/src/components/Popover/Popover.stories.tsx b/widget/storybook/src/components/Popover.stories.tsx similarity index 56% rename from widget/ui/src/components/Popover/Popover.stories.tsx rename to widget/storybook/src/components/Popover.stories.tsx index 7eb1f2db93..8f9a452226 100644 --- a/widget/ui/src/components/Popover/Popover.stories.tsx +++ b/widget/storybook/src/components/Popover.stories.tsx @@ -1,14 +1,15 @@ -import type { PropTypes } from './Popover.types'; +import type { PopoverPropTypes } from '@rango-dev/ui'; import type { Meta } from '@storybook/react'; +import { + AddIcon, + Button, + List, + NotificationsIcon, + Popover, +} from '@rango-dev/ui'; import React from 'react'; -import { AddIcon, NotificationsIcon } from '../../icons'; -import { Button } from '../Button'; -import { List } from '../List'; - -import { Popover } from './Popover'; - function PopoverContent() { return (
@@ -34,20 +35,45 @@ export default { }, argTypes: { content: { - name: 'content', control: { type: 'component' }, defaultValue: null, }, side: { - name: 'side', control: { type: 'select' }, options: ['top', 'right', 'bottom', 'left'], defaultValue: 'bottom', + description: 'top | right | bottom | left | undefined', + type: 'string', + }, + align: { + control: { type: 'select' }, + options: ['center', 'start', 'end'], + description: 'center | start | end | undefined', + type: 'string', + }, + sideOffset: { + control: { type: 'number' }, + type: 'number', + }, + alignOffset: { + control: { type: 'number' }, + type: 'number', + }, + collisionPadding: { + control: { type: 'number' }, + type: 'number', + }, + hasArrow: { + control: { type: 'boolean' }, + type: 'boolean', + }, + onOpenChange: { + type: 'function', }, }, } as Meta; -export const Main = (props: PropTypes) => ( +export const Main = (props: PopoverPropTypes) => (