@rango-dev/ui 0.1.14 → 0.1.16-next.0

package/src/components/Button/Button.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ComponentMeta } from '@storybook/react';
+import { Meta } from '@storybook/react';
 
 import { Button, PropTypes } from './Button';
 import { AddWalletIcon } from '../Icon';
@@ -7,6 +7,11 @@ import { AddWalletIcon } from '../Icon';
 export default {
   title: 'Components/Button',
   component: Button,
+  args: {
+    variant: 'contained',
+    size: 'medium',
+    type: 'primary',
+  },
   argTypes: {
     variant: {
       name: 'variant',
@@ -26,7 +31,7 @@ export default {
     },
     size: {
       name: 'size',
-      control: { type: 'radio' },
+      control: { type: 'select' },
       options: ['small', 'medium', 'large', 'compact'],
       defaultValue: 'medium',
     },
@@ -35,7 +40,7 @@ export default {
       control: { type: 'boolean' },
     },
   },
-} as ComponentMeta<typeof Button>;
+} as Meta<typeof Button>;
 
 export const Main = (props: PropTypes) => (
   <Button {...props}>I'm a button</Button>

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -1,10 +1,14 @@
 import React from 'react';
-import { ComponentMeta } from '@storybook/react';
+import { Meta } from '@storybook/react';
 import { Checkbox, PropTypes } from './Checkbox';
 
 export default {
   title: 'Components/Checkbox',
   component: Checkbox,
+  args: {
+    label: 'I am a checkbox',
+    defaultChecked: true,
+  },
   argTypes: {
     label: {
       name: 'label',
@@ -17,6 +21,6 @@ export default {
       defaultValue: true,
     },
   },
-} as ComponentMeta<typeof Checkbox>;
+} as Meta<typeof Checkbox>;
 
 export const Main = (props: PropTypes) => <Checkbox {...props} id="test" />;

package/src/components/Chip/Chip.stories.tsx

@@ -1,22 +1,39 @@
 import React from 'react';
-import { ComponentMeta } from '@storybook/react';
+import { Meta } from '@storybook/react';
 
 import { Chip, PropTypes } from './Chip';
 
 export default {
-  title: 'Chip',
+  title: 'Components/Chip',
   component: Chip,
-} as ComponentMeta<typeof Chip>;
+  args: {
+    label: 'chip',
+    selected: true,
+  },
+  argTypes: {
+    label: {
+      name: 'label',
+      defaultValue: 'chip',
+      control: {
+        type: 'text',
+      },
+    },
+    selected: {
+      name: 'selected',
+      control: { type: 'boolean' },
+      defaultValue: true,
+    },
+  },
+} as Meta<typeof Chip>;
 
-export const Main = (args: PropTypes) => <Chip {...args} label="chip" />;
+export const Main = (args: PropTypes) => <Chip {...args} />;
 
 export const ChipWithPrefix = (args: PropTypes) => (
   <Chip
     {...args}
-    label="chip"
     prefix={
       <img
-        src="	https://api.rango.exchange/blockchains/binance.svg"
+        src="https://api.rango.exchange/blockchains/binance.svg"
         style={{ width: '20px' }}
       />
     }
@@ -26,7 +43,6 @@ export const ChipWithPrefix = (args: PropTypes) => (
 export const ChipWithSuffix = (args: PropTypes) => (
   <Chip
     {...args}
-    label="chip"
     suffix={
       <img
         src="	https://api.rango.exchange/blockchains/binance.svg"

package/src/components/ColorPicker/ColorPicker.stories.tsx

@@ -1,10 +1,13 @@
 import React, { useState } from 'react';
-import { ComponentMeta } from '@storybook/react';
+import { Meta } from '@storybook/react';
 import { ColorPicker, PropTypes } from './ColorPicker';
 
 export default {
   title: 'Components/ColorPicker',
   component: ColorPicker,
+  args: {
+    place: 'left',
+  },
   argTypes: {
     place: {
       name: 'place',
@@ -18,14 +21,14 @@ export default {
       defaultValue: 'Choose a color',
     },
   },
-} as ComponentMeta<typeof ColorPicker>;
+} as Meta<typeof ColorPicker>;
 
 export const Main = (args: PropTypes) => {
   const [color, setColor] = useState<string | undefined>('#5FA425');
   return (
     <div
       style={{
-        height: 600,
+        height: 400,
         display: 'flex',
         justifyContent: 'center',
         alignItems: 'center',

package/src/components/Divider/Divider.tsx

@@ -4,38 +4,140 @@ import { styled } from '../../theme';
 const DividerContainer = styled('div', {
   variants: {
     size: {
-      4: {
+      4: {},
+      8: {},
+      12: {},
+      16: {},
+      18: {},
+      20: {},
+      24: {},
+      32: {},
+    },
+    direction: {
+      vertical: {},
+      horizontal: {},
+    },
+  },
+  compoundVariants: [
+    {
+      size: 4,
+      direction: 'horizontal',
+      css: {
+        width: '$4',
+      },
+    },
+    {
+      size: 4,
+      direction: 'vertical',
+      css: {
         height: '$4',
       },
-      8: {
+    },
+    {
+      size: 8,
+      direction: 'horizontal',
+      css: {
+        width: '$8',
+      },
+    },
+    {
+      size: 8,
+      direction: 'vertical',
+      css: {
         height: '$8',
       },
-      12: {
+    },
+    {
+      size: 12,
+      direction: 'horizontal',
+      css: {
+        width: '$12',
+      },
+    },
+    {
+      size: 12,
+      direction: 'vertical',
+      css: {
         height: '$12',
       },
-      16: {
+    },
+    {
+      size: 16,
+      direction: 'horizontal',
+      css: {
+        width: '$16',
+      },
+    },
+    {
+      size: 16,
+      direction: 'vertical',
+      css: {
         height: '$16',
       },
-      18: {
+    },
+    {
+      size: 18,
+      direction: 'horizontal',
+      css: {
+        width: '$18',
+      },
+    },
+    {
+      size: 18,
+      direction: 'vertical',
+      css: {
         height: '$18',
       },
-      20: {
+    },
+    {
+      size: 20,
+      direction: 'horizontal',
+      css: {
+        width: '$20',
+      },
+    },
+    {
+      size: 20,
+      direction: 'vertical',
+      css: {
         height: '$20',
       },
-      24: {
+    },
+    {
+      size: 24,
+      direction: 'horizontal',
+      css: {
+        width: '$24',
+      },
+    },
+    {
+      size: 24,
+      direction: 'vertical',
+      css: {
         height: '$24',
       },
-      32: {
+    },
+    {
+      size: 32,
+      direction: 'horizontal',
+      css: {
+        width: '$32',
+      },
+    },
+    {
+      size: 32,
+      direction: 'vertical',
+      css: {
         height: '$32',
       },
     },
-  },
+  ],
 });
 export interface PropTypes {
   size?: 4 | 8 | 12 | 16 | 18 | 20 | 24 | 32;
   direction?: 'vertical' | 'horizontal';
 }
 
-export function Divider({ size = 12 }: PropTypes) {
-  return <DividerContainer size={size} />;
+export function Divider({ size = 12, direction = 'vertical' }: PropTypes) {
+  return <DividerContainer size={size} direction={direction} />;
 }

package/src/components/Drawer/Drawer.stories.tsx

@@ -1,10 +1,15 @@
 import React, { useState } from 'react';
-import { ComponentMeta } from '@storybook/react';
+import { Meta } from '@storybook/react';
 import { Drawer, PropTypes } from './Drawer';
 
 export default {
   name: 'Components/Drawer',
   component: Drawer,
+  args: {
+    anchor: 'bottom',
+    title: 'I`m Drawer',
+    container: document.body,
+  },
   argTypes: {
     anchor: {
       name: 'anchor',
@@ -13,19 +18,14 @@ export default {
       defaultValue: 'bottom',
     },
   },
-} as ComponentMeta<typeof Drawer>;
+} as Meta<typeof Drawer>;
 
 export const Main = (args: PropTypes) => {
   const [open, setOpen] = useState<boolean>(false);
   return (
     <div>
       <button onClick={() => setOpen(true)}>Open Drawer</button>
-      <Drawer
-        {...args}
-        open={open}
-        title="I'm Drawer"
-        onClose={() => setOpen(false)}
-      />
+      <Drawer {...args} open={open} onClose={() => setOpen(false)} />
     </div>
   );
 };
@@ -47,9 +47,7 @@ export const BottomAnchor = (args: PropTypes) => {
       <Drawer
         {...args}
         open={open}
-        title="I'm Drawer"
         onClose={() => setOpen(false)}
-        anchor="bottom"
         content={
           <div>
             {Array.from({ length: 50 }, (_, index) => (
@@ -70,7 +68,6 @@ export const LeftAnchor = (args: PropTypes) => {
       <Drawer
         {...args}
         open={open}
-        title="I'm Drawer"
         onClose={() => setOpen(false)}
         anchor="left"
         content={

package/src/components/Icon/Icons.stories.tsx

@@ -1,12 +1,16 @@
 import React from 'react';
 import { Icon, IconProps } from './types';
 import * as Icons from '.';
-import { ComponentMeta } from '@storybook/react';
+import { Meta } from '@storybook/react';
 import { styled } from '../../theme';
 
 export default {
   title: 'Components/Icons',
   component: Icons.AngleRightIcon,
+  args: {
+    size: 16,
+    color: 'black',
+  },
   argTypes: {
     color: {
       name: 'color',
@@ -16,12 +20,12 @@ export default {
 
     size: {
       name: 'size',
-      control: { type: 'radio' },
+      control: { type: 'select' },
       options: [16, 18, 20, 24, 28, 32, 36, 40],
       defaultValue: 16,
     },
   },
-} as ComponentMeta<typeof Icons.AngleRightIcon>;
+} as Meta<typeof Icons.AngleRightIcon>;
 
 const Container = styled('div', {
   display: 'grid',
@@ -31,7 +35,7 @@ const Container = styled('div', {
 
 export const Main = (props: IconProps) => (
   <Container>
-    {Object.keys(Icons).map(icon => {
+    {Object.keys(Icons).map((icon) => {
       const Component = Icons[icon as Icon];
       return (
         <div>

package/src/components/LiquiditySourceList/LiquiditySource.stories.tsx

@@ -1,12 +1,15 @@
 import React from 'react';
-import { ComponentMeta } from '@storybook/react';
+import { Meta } from '@storybook/react';
 import { LiquiditySourceList, PropTypes } from './LiquiditySourceList';
 import { liquiditySources } from './mockData';
 
 export default {
-  title: 'Liquidity Source List',
+  title: 'Components/Liquidity Source List',
   component: LiquiditySourceList,
-} as ComponentMeta<typeof LiquiditySourceList>;
+  args: {
+    loadingStatus: 'success',
+  },
+} as Meta<typeof LiquiditySourceList>;
 
 export const Main = (args: PropTypes) => (
   <LiquiditySourceList {...args} list={liquiditySources} />

package/src/components/LiquiditySourceList/LiquiditySourceList.tsx

@@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react';
 import { styled } from '../../theme';
 import { LiquiditySource, LoadingStatus } from '../../types/meta';
 import { Button } from '../Button/Button';
-import { Spacer } from '../Spacer';
+import { Divider } from '../Divider';
 import { Switch } from '../Switch';
 import { Typography } from '../Typography';
 import { Spinner } from '../Spinner';
@@ -111,7 +111,7 @@ export function LiquiditySourceList(props: PropTypes) {
               : `${totalSelectedBridges} / ${totalBridges}`}
           </Typography>
         </LiquiditySourceType>
-        <Spacer size={12} direction="vertical" />
+        <Divider size={12} />
         {loadingStatus === 'loading' && (
           <LoaderContainer>
             <Spinner size={24} />
@@ -144,7 +144,7 @@ export function LiquiditySourceList(props: PropTypes) {
               : `${totalSelectedExchanges} / ${totalExchanges}`}
           </Typography>
         </LiquiditySourceType>
-        <Spacer size={12} direction="vertical" />
+        <Divider size={12} />
         {loadingStatus === 'loading' && (
           <LoaderContainer>
             <Spinner size={24} />

package/src/components/Modal/Modal.stories.tsx

@@ -1,22 +1,21 @@
 import React, { useState } from 'react';
-import { ComponentMeta } from '@storybook/react';
+import { Meta } from '@storybook/react';
 import { Modal, PropTypes } from './Modal';
 
-export default { name: 'Modal', component: Modal } as ComponentMeta<
-  typeof Modal
->;
+export default {
+  name: 'Modal',
+  component: Modal,
+  args: {
+    title: 'I`m a modal',
+  },
+} as Meta<typeof Modal>;
 
 export const Main = (args: PropTypes) => {
   const [open, setOpen] = useState<boolean>(false);
   return (
     <div>
       <button onClick={() => setOpen(true)}>Open Modal</button>
-      <Modal
-        {...args}
-        open={open}
-        title="I'm modal"
-        onClose={() => setOpen(false)}
-      />
+      <Modal {...args} open={open} onClose={() => setOpen(false)} />
     </div>
   );
 };

package/src/components/Radio/Radio.stories.tsx

@@ -1,10 +1,19 @@
 import React from 'react';
-import { ComponentMeta } from '@storybook/react';
+import { Meta } from '@storybook/react';
 import { PropTypes, Radio } from './Radio';
 
 export default {
-  title: 'Radio',
+  title: 'Components/Radio',
   component: Radio,
+  args: {
+    options: [
+      { value: 'one', label: 'One' },
+      { value: 'two', label: 'Two' },
+      { value: 'three', label: 'Three' },
+    ],
+    direction: 'horizontal',
+    defaultValue: 'one',
+  },
   argTypes: {
     options: {
       defaultValue: [
@@ -13,11 +22,7 @@ export default {
         { value: 'three', label: 'Three' },
       ],
     },
-    defaultValue: { defaultValue: 'one' },
-    direction: {
-      defaultValue: 'horizontal',
-    },
   },
-} as ComponentMeta<typeof Radio>;
+} as Meta<typeof Radio>;
 
 export const Main = (args: PropTypes) => <Radio {...args} />;

package/src/components/SecondaryPage/SecondaryPage.stories.tsx

@@ -1,7 +1,16 @@
-import { ComponentMeta } from '@storybook/react';
-import { SecondaryPage } from './SecondaryPage';
+import { Meta } from '@storybook/react';
+import { PropTypes, SecondaryPage } from './SecondaryPage';
+import React from 'react';
 
 export default {
   title: 'Components/Secondary Page',
   component: SecondaryPage,
-} as ComponentMeta<typeof SecondaryPage>;
+  args:{
+    textField:true,
+    textFieldPlaceholder:'Search',
+    title:'Secondary Page'
+  }
+} as Meta<typeof SecondaryPage>;
+
+
+export const Main = (args: PropTypes) => <SecondaryPage {...args} />;

package/src/components/SelectableWalletList/SelectableWalletList.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ComponentMeta } from '@storybook/react';
+import { Meta } from '@storybook/react';
 
 import { SelectableWalletList, PropTypes } from './SelectableWalletList';
 import { data } from './mock';
@@ -7,7 +7,7 @@ import { data } from './mock';
 export default {
   title: 'Components/SelectableWalletList',
   component: SelectableWalletList,
-} as ComponentMeta<typeof SelectableWalletList>;
+} as Meta<typeof SelectableWalletList>;
 
 export const Main = (props: PropTypes) => (
   <SelectableWalletList {...props} list={data} />

package/src/components/SelectableWalletList/mock.ts

@@ -1,11 +1,11 @@
-import { Network, WalletType } from '@rango-dev/wallets-shared';
+import { Network, WalletTypes } from '@rango-dev/wallets-shared';
 import { SelectableWallet } from '../../types';
 
 export const data: SelectableWallet[] = [
   {
     chain: Network.BTC,
     name: Network.BTC,
-    walletType: WalletType.META_MASK,
+    walletType: WalletTypes.META_MASK,
     address: '0x5423e28219d6d568dcf62a8134d623e6f4a1c2df',
     image: 'https://app.rango.exchange/wallets/metamask.svg',
     selected: true,

package/src/components/Skeleton/Skeleton.stories.tsx

@@ -1,10 +1,14 @@
-import { ComponentMeta } from '@storybook/react';
+import { Meta } from '@storybook/react';
 import React from 'react';
 import { Skeleton, PropTypes } from './Skeleton';
 
 export default {
   title: 'Components/Skeleton',
   component: Skeleton,
+  args: {
+    width: 20,
+    height: 20,
+  },
   argTypes: {
     width: {
       name: 'width',
@@ -19,6 +23,6 @@ export default {
       defaultValue: 20,
     },
   },
-} as ComponentMeta<typeof Skeleton>;
+} as Meta<typeof Skeleton>;
 
 export const Main = (props: PropTypes) => <Skeleton {...props} />;

package/src/components/Spinner/Spinner.stories.tsx

@@ -1,10 +1,14 @@
-import { ComponentMeta } from '@storybook/react';
+import { Meta } from '@storybook/react';
 import React from 'react';
 import { Spinner, PropTypes } from './Spinner';
 
 export default {
   title: 'Components/Spinner',
   component: Spinner,
+  args: {
+    color: 'primary',
+    size: 16,
+  },
   argTypes: {
     color: {
       name: 'color',
@@ -20,6 +24,6 @@ export default {
       defaultValue: 16,
     },
   },
-} as ComponentMeta<typeof Spinner>;
+} as Meta<typeof Spinner>;
 
 export const Main = (props: PropTypes) => <Spinner {...props} />;

package/src/components/StatusDrawer/StatusDrawer.stories.tsx

@@ -1,11 +1,16 @@
 import React, { useState } from 'react';
-import { ComponentMeta } from '@storybook/react';
+import { Meta } from '@storybook/react';
 import { StatusDrawer, PropTypes } from './StatusDrawer';
 import { SwapContainer } from '../SwapContainer';
 
 export default {
   name: 'Components/StatusDrawer',
   component: StatusDrawer,
+  args: {
+    status: 'success',
+    title: 'Swap successful',
+    subtitle: 'There are now 0.0493 BNB in 0x542...C2Df wallet on BSC chain.',
+  },
   argTypes: {
     status: {
       name: 'status',
@@ -25,7 +30,7 @@ export default {
         'There are now 0.0493 BNB in 0x542...C2Df wallet on BSC chain.',
     },
   },
-} as ComponentMeta<typeof StatusDrawer>;
+} as Meta<typeof StatusDrawer>;
 
 export const Main = (args: PropTypes) => {
   const [open, setOpen] = useState<boolean>(false);

package/src/components/StatusDrawer/StatusDrawer.tsx

@@ -3,7 +3,7 @@ import { styled } from '../../theme';
 import { Button } from '../Button';
 import { Drawer } from '../Drawer';
 import { CheckCircleIcon, InfoCircleIcon, WarningIcon } from '../Icon';
-import { Spacer } from '../Spacer';
+import { Divider } from '../Divider';
 import { Typography } from '../Typography';
 
 export interface PropTypes {
@@ -60,7 +60,7 @@ export function StatusDrawer({
               {status === 'success' ? 'Cancel' : 'See detailes'}
             </Button>
           )}
-          <Spacer size={16} />
+          <Divider size={16} direction='horizontal' />
           <Button
             fullWidth
             onClick={onSubmit}

package/src/components/StepDetail/StepDetail.stories.tsx

@@ -1,10 +1,17 @@
 import React from 'react';
-import { ComponentMeta } from '@storybook/react';
+import { Meta } from '@storybook/react';
 import { StepDetail, PropTypes } from './StepDetail';
 
 export default {
   title: 'Components/StepDetail',
   component: StepDetail,
+  args: {
+    logo: 'https://api.rango.exchange/tokens/COSMOS/JUNO.png',
+    chainLogo: 'https://api.rango.exchange/swappers/osmosis.png',
+    amount: '1',
+    symbol: 'JUNO',
+    blockchain: 'OSMOSIS',
+  },
   argTypes: {
     logo: {
       name: 'logo',
@@ -32,6 +39,6 @@ export default {
       defaultValue: 'OSMOSIS',
     },
   },
-} as ComponentMeta<typeof StepDetail>;
+} as Meta<typeof StepDetail>;
 
 export const Main = (props: PropTypes) => <StepDetail {...props} />;