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

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/Icon/common.ts

@@ -33,7 +33,7 @@ export const SvgWithStrokeColor = styled('svg', {
     },
     disabled: {
       true: {
-        stroke: '$neutrals400',
+        stroke: '$neutral400',
       },
     },
   },
@@ -72,7 +72,7 @@ export const SvgWithFillColor = styled('svg', {
     },
     disabled: {
       true: {
-        stroke: '$neutrals400',
+        stroke: '$neutral400',
       },
     },
   },

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';
@@ -105,13 +105,13 @@ export function LiquiditySourceList(props: PropTypes) {
       <div>
         <LiquiditySourceType>
           <Typography variant="h5">Bridges</Typography>
-          <Typography variant="body1" color="neutrals800">
+          <Typography variant="body1" color="neutral800">
             {totalSelectedBridges === totalBridges
               ? totalBridges
               : `${totalSelectedBridges} / ${totalBridges}`}
           </Typography>
         </LiquiditySourceType>
-        <Spacer size={12} direction="vertical" />
+        <Divider size={12} />
         {loadingStatus === 'loading' && (
           <LoaderContainer>
             <Spinner size={24} />
@@ -138,13 +138,13 @@ export function LiquiditySourceList(props: PropTypes) {
       <div>
         <LiquiditySourceType>
           <Typography variant="h5">Exchanges</Typography>
-          <Typography variant="body1" color="neutrals800">
+          <Typography variant="body1" color="neutral800">
             {totalSelectedExchanges === totalExchanges
               ? totalExchanges
               : `${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/Modal/Modal.tsx

@@ -24,6 +24,8 @@ const BackDrop = styled('div', {
   width: '100vw',
   height: '100vh',
   backgroundColor: 'rgba(0,0,0,.1)',
+  zIndex: 10,
+
 });
 
 const ModalContainer = styled('div', {
@@ -32,8 +34,7 @@ const ModalContainer = styled('div', {
   padding: '$16 $16',
   display: 'flex',
   flexDirection: 'column',
-  boxShadow: '$s',
-  zIndex: 10,
+  zIndex: 20,
 });
 const Row = styled('div', {
   display: 'flex',

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/Radio/Radio.tsx

@@ -32,10 +32,10 @@ const StyledItem = styled(RadioGroup.Item, {
   borderRadius: '100%',
   cursor: 'pointer',
   backgroundColor: '$background',
-  border: '1px solid $neutrals400',
+  border: '1px solid $neutral400',
 
   '&:hover': {
-    borderColor: '$neutrals600',
+    borderColor: '$neutral600',
   },
 });
 

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/SelectableWalletList.tsx

@@ -14,7 +14,7 @@ const Circle = styled('div', {
   width: 12,
   height: 12,
   borderRadius: 6,
-  border: '1px solid $neutrals400',
+  border: '1px solid $neutral400',
   position: 'absolute',
   top: 12,
   right: 12,
@@ -24,7 +24,7 @@ const Circle = styled('div', {
         borderColor: '$success',
       },
       false: {
-        borderColor: '$neutrals400',
+        borderColor: '$neutral400',
       },
     },
   },
@@ -40,7 +40,7 @@ const SolidCircle = styled('div', {
         backgroundColor: '$success',
       },
       false: {
-        backgroundColor: '$neutrals400',
+        backgroundColor: '$neutral400',
       },
     },
   },
@@ -65,8 +65,8 @@ const Container = styled('div', {
         color: '$success',
       },
       false: {
-        borderColor: '$neutrals400',
-        color: '$neutrals400',
+        borderColor: '$neutral400',
+        color: '$neutral400',
       },
     },
   },

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/Skeleton/Skeleton.tsx

@@ -12,7 +12,7 @@ const waveSquares = keyframes({
 
 const SkeletonContainer = styled('div', {
   borderRadius: '$5',
-  backgroundColor: '$neutrals300',
+  backgroundColor: '$neutral100',
   background: `linear-gradient(to right, rgba(130, 130, 130, 0.2) 8%, rgba(130, 130, 130, 0.3) 18%, rgba(130, 130, 130, 0.2) 33%)`,
   backgroundSize: '800px 100px',
   animation: `${waveSquares} 2s infinite ease-out`,

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/Spinner/Spinner.tsx

@@ -10,7 +10,7 @@ const spin = keyframes({
 const SpinnerContainer = styled('div', {
   borderRadius: '50%',
   position: 'relative',
-  border: `2px solid $neutrals300`,
+  border: `2px solid $neutral100`,
   borderRight: `2px solid`,
   animation: `${spin} 1.5s linear infinite`,
   margin: `0px $8`,

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

package/src/components/StepDetail/StepDetail.tsx

@@ -30,7 +30,7 @@ const ChainLogo = styled('div', {
   padding: '$2',
   borderRadius: '50%',
   backgroundColor: '$background',
-  border: '1px solid $neutrals400',
+  border: '1px solid $neutral400',
 
   img: {
     width: '100%',
@@ -74,7 +74,7 @@ const Detail = styled('div', {
   },
 });
 const SubTitle = styled(Typography, {
-  color: '$neutrals600',
+  color: '$neutral600',
   display: 'block',
   paddingLeft: '$8',
 });
@@ -121,7 +121,7 @@ export function StepDetail(props: PropsWithChildren<PropTypes>) {
           <Typography
             noWrap
             variant={direction === 'vertical' ? 'body2' : 'title'}
-            color={'$neutrals600'}
+            color={'$neutral600'}
           >
             {estimatedAmount}
           </Typography>
@@ -133,7 +133,7 @@ export function StepDetail(props: PropsWithChildren<PropTypes>) {
         >
           {symbol}
         </Typography>
-        <SubTitle noWrap variant="caption" color="$neutrals800">
+        <SubTitle noWrap variant="caption" color="$neutral800">
           on {blockchain}
         </SubTitle>
       </Detail>

package/src/components/SwapContainer/SwapContainer.tsx

@@ -20,14 +20,14 @@ const MainContainer = styled('div', {
     listStyleType: 'none',
     '&::-webkit-scrollbar': { width: '$8', height: '$8' },
     '&::-webkit-scrollbar-thumb': {
-      backgroundColor: '$neutrals400',
+      backgroundColor: '$neutral400',
       borderRadius: '$10',
     },
     '&::-webkit-scrollbar-thumb:hover': {
-      backgroundColor: '$neutrals500',
+      backgroundColor: '$neutral500',
     },
     '&::-webkit-scrollbar-track': {
-      backgroundColor: '$neutrals300',
+      backgroundColor: '$neutral100',
     },
   },
   variants: {

package/src/components/SwapDetail/SwapDetail.stories.tsx

@@ -1,11 +1,14 @@
 import React from 'react';
-import { ComponentMeta } from '@storybook/react';
+import { Meta } from '@storybook/react';
 import { SwapDetail, PropTypes } from './SwapDetail';
 import { swap } from './mock';
 
 export default {
   title: 'Components/Swap Detail',
   component: SwapDetail,
+  args:{
+    status:'running'
+  },
   argTypes: {
     status: {
       name: 'status',
@@ -14,6 +17,6 @@ export default {
       defaultValue: 'running',
     },
   },
-} as ComponentMeta<typeof SwapDetail>;
+} as Meta<typeof SwapDetail>;
 
 export const Main = (props: PropTypes) => <SwapDetail {...props} swap={swap} />;

package/src/components/SwapDetail/SwapDetail.tsx

@@ -3,7 +3,7 @@ import { PendingSwap } from '../../containers/History/types';
 import { styled } from '../../theme';
 import { Button } from '../Button';
 import { ArrowRightIcon } from '../Icon';
-import { Spacer } from '../Spacer';
+import { Divider } from '../Divider';
 import { Spinner } from '../Spinner';
 import { Token } from './Token';
 import { limitDecimalPlaces } from '../../helper';
@@ -14,7 +14,7 @@ const Container = styled('div', {
   justifyContent: 'space-between',
   alignItems: 'center',
   padding: '$16 0',
-  borderBottom: '1px solid $neutrals300',
+  borderBottom: '1px solid $neutral100',
 
   '& > .info': {
     display: 'flex',
@@ -71,9 +71,9 @@ export function SwapDetail({
               amount: limitDecimalPlaces(swap.inputAmount),
             }}
           />
-          <Spacer size={12} />
+          <Divider size={12} direction="horizontal" />
           <ArrowRightIcon size={12} />
-          <Spacer size={12} />
+          <Divider size={12} direction="horizontal" />
           <Token
             data={{
               token: {

package/src/components/SwapDetail/Token.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { styled } from '../../theme';
-import { Spacer } from '../Spacer';
+import { Divider } from '../Divider';
 import { Image } from '../common';
 
 const TokenContainer = styled('div', {
@@ -12,13 +12,13 @@ const TokenContainer = styled('div', {
     fontWeight: 'bold',
   },
   '& .estimated': {
-    color: '$neutrals600',
+    color: '$neutral600',
   },
 });
 
 const TokenImage = styled('div', {
   position: 'relative',
-  'img': {
+  img: {
     borderRadius: '50%',
   },
   '.overlay': {
@@ -33,7 +33,7 @@ const TokenImage = styled('div', {
     justifyContent: 'center',
     alignItems: 'center',
     backgroundColor: '$background',
-    border: '1px solid $neutrals400',
+    border: '1px solid $neutral400',
   },
 });
 
@@ -63,12 +63,12 @@ export function Token(props: PropTypes) {
           <Image src={blockchain.logo} alt={blockchain.name} size={12} />
         </div>
       </TokenImage>
-      <Spacer size={8} />
+      <Divider size={8} direction="horizontal" />
       {!!amount && <span className="amount">{props.data.amount}</span>}
       {!amount && estimatedAmount && (
         <span className="amount estimated">{props.data.estimatedAmount}</span>
       )}
-      <Spacer size={4} />
+      <Divider size={4} direction="horizontal" />
       {token.symbol}
     </TokenContainer>
   );

package/src/components/Switch/Switch.stories.tsx

@@ -1,8 +1,8 @@
-import { ComponentMeta } from '@storybook/react';
+import { Meta } from '@storybook/react';
 import React from 'react';
 import { Switch, PropTypes } from './Switch';
 
-export default { title: 'Switch', component: Switch } as ComponentMeta<
+export default { title: 'Components/Switch', component: Switch } as Meta<
   typeof Switch
 >;
 

package/src/components/Switch/Switch.tsx

@@ -9,8 +9,8 @@ const StyledSwitchRoot = styled(RadixSwitch.Root, {
   borderStyle: 'solid',
   width: '42px',
   height: '22px',
-  backgroundColor: '$neutrals600',
-  borderColor: '$neutrals600',
+  backgroundColor: '$neutral600',
+  borderColor: '$neutral600',
   borderRadius: '99999px',
   position: 'relative',
   padding: '0',

package/src/components/TextField/TextField.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ComponentMeta } from '@storybook/react';
+import { Meta } from '@storybook/react';
 
 import { TextField, PropTypes } from './TextField';
 import { SearchIcon } from '../Icon';
@@ -8,6 +8,7 @@ export default {
   title: 'Components/Text Field',
 
   component: TextField,
+
   argTypes: {
     disabled: {
       name: 'disabled',
@@ -18,7 +19,7 @@ export default {
       type: 'string',
     },
   },
-} as ComponentMeta<typeof TextField>;
+} as Meta<typeof TextField>;
 
 export const Main = (args: PropTypes) => <TextField {...args} />;