feat: migrate storybook components to new package

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,
   },
 };
 /**

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,

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"
   }
-}
+}

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<typeof Button> = {
+  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) => (
+  <Button {...props}>I'm a button</Button>
+);
+
+export const WithPrefix = (args: ButtonPropTypes) => {
+  return (
+    <Button {...args} prefix={<WalletIcon />}>
+      I'm a button
+    </Button>
+  );
+};
+
+export const WithSuffix = (args: ButtonPropTypes) => (
+  <Button {...args} suffix={<WalletIcon />}>
+    I'm a button
+  </Button>
+);
+
+export const TypesAndVariants = (args: ButtonPropTypes) => (
+  <div>
+    <Content>
+      <Button {...args} type="primary" variant="contained">
+        I'm a primary button
+      </Button>
+      <Divider direction="horizontal" size={12} />
+      <Button {...args} type="primary" variant="outlined">
+        I'm a primary button
+      </Button>
+      <Divider direction="horizontal" size={12} />
+      <Button {...args} type="primary" variant="ghost">
+        I'm a primary button
+      </Button>
+    </Content>
+
+    <Divider size={12} />
+    <Content>
+      <Button {...args} type="secondary" variant="contained">
+        I'm a secondary button
+      </Button>
+      <Divider direction="horizontal" size={12} />
+      <Button {...args} type="secondary" variant="outlined">
+        I'm a secondary button
+      </Button>
+      <Divider direction="horizontal" size={12} />
+      <Button {...args} type="secondary" variant="ghost">
+        I'm a secondary button
+      </Button>
+    </Content>
+
+    <Divider size={12} />
+    <Content>
+      <Button {...args} type="error" variant="contained">
+        I'm a error button
+      </Button>
+      <Divider direction="horizontal" size={12} />
+      <Button {...args} type="error" variant="outlined">
+        I'm a error button
+      </Button>
+      <Divider direction="horizontal" size={12} />
+      <Button {...args} type="error" variant="ghost">
+        I'm a error button
+      </Button>
+    </Content>
+
+    <Divider size={12} />
+    <Content>
+      <Button {...args} type="warning" variant="contained">
+        I'm a warning button
+      </Button>
+      <Divider direction="horizontal" size={12} />
+      <Button {...args} type="warning" variant="outlined">
+        I'm a warning button
+      </Button>
+      <Divider direction="horizontal" size={12} />
+      <Button {...args} type="warning" variant="ghost">
+        I'm a warning button
+      </Button>
+    </Content>
+
+    <Divider size={12} />
+    <Content>
+      <Button {...args} type="success" variant="contained">
+        I'm a success button
+      </Button>
+      <Divider direction="horizontal" size={12} />
+      <Button {...args} type="success" variant="outlined">
+        I'm a success button
+      </Button>
+      <Divider direction="horizontal" size={12} />
+      <Button {...args} type="success" variant="ghost">
+        I'm a success button
+      </Button>
+    </Content>
+  </div>
+);

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<typeof ChainToken> = {
+  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) => <ChainToken {...args} />;

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<typeof Checkbox> = {
+  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) => (
+  <Checkbox id="test" label="My checkbox" {...props} />
+);

widget/ui/src/components/Chip/Chip.stories.tsx → 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) => <Chip {...args} />;
+export const Main = (args: ChipPropTypes) => <Chip {...args} />;
 
-export const ChipWithPrefix = (args: PropTypes) => (
+export const ChipWithPrefix = (args: ChipPropTypes) => (
   <Chip
     {...args}
     prefix={
@@ -41,7 +44,7 @@ export const ChipWithPrefix = (args: PropTypes) => (
   />
 );
 
-export const ChipWithSuffix = (args: PropTypes) => (
+export const ChipWithSuffix = (args: ChipPropTypes) => (
   <Chip
     {...args}
     suffix={

widget/ui/src/components/Collapsible/Collapsible.stories.tsx → widget/storybook/src/components/Collapsible.stories.tsx

@@ -1,29 +1,32 @@
-import type { CollapsibleProps } from './Collapsible.types';
+import type { CollapsiblePropTypes } from '@rango-dev/ui';
 
+import {
+  Button,
+  ChevronDownIcon,
+  Collapsible,
+  Typography,
+} from '@rango-dev/ui';
 import React, { useState } from 'react';
 
-import { ChevronDownIcon } from '../../icons';
-import { Button } from '../Button';
-import { Typography } from '../Typography';
-
-import { CollapsibleComponent as Collapsible } from './Collapsible';
-
 export default {
   title: 'Components/Collapsible',
   component: Collapsible,
   args: {
     open: false,
+    trigger: <></>,
   },
   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<boolean>(false);
 
   return (