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

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

@@ -46,41 +46,41 @@ const ButtonContainer = styled('button', {
     },
     variant: {
       contained: {
-        backgroundColor: '$neutrals300',
+        backgroundColor: '$neutral100',
         color: '$foreground',
         border: 0,
         '&:hover': {
-          backgroundColor: '$neutrals200',
+          backgroundColor: '$neutral200',
         },
         '&:disabled': {
-          background: '$neutrals400',
+          background: '$neutral400',
         },
         '&:disabled:hover': {
-          background: '$neutrals400',
+          background: '$neutral400',
           transform: 'unset',
         },
       },
       outlined: {
-        backgroundColor: '$background',
+        backgroundColor: '$surface',
         border: 1,
         borderStyle: 'solid',
-        borderColor: '$neutrals400',
+        borderColor: '$neutral400',
         color: '$foreground',
         '&:hover': {
-          borderColor: '$neutrals600',
+          borderColor: '$neutral600',
         },
         '&:disabled': {
-          borderColor: '$neutrals300',
-          color: '$neutrals400',
+          borderColor: '$neutral400',
+          color: '$neutral400',
         },
       },
       ghost: {
         color: '$foreground',
         '&:hover': {
-          backgroundColor: '$neutrals200',
+          backgroundColor: '$neutral200',
         },
         '&:disabled': {
-          color: '$neutrals400 !important',
+          color: '$neutral400',
         },
         background: 'transparent',
         border: 0,
@@ -128,19 +128,19 @@ const ButtonContainer = styled('button', {
       type: 'primary',
       variant: 'outlined',
       css: {
-        color: '$primary !important',
+        color: '$primary',
         borderColor: '$primary',
         '&:hover': {
-          color: '$primary700 !important',
-          borderColor: '$primary700 !important',
+          color: '$primary700',
+          borderColor: '$primary700',
         },
         '&:visited': {
-          color: '$primary900 !important',
-          borderColor: '$primary900 !important',
+          color: '$primary900',
+          borderColor: '$primary900',
         },
         '&:focus': {
-          color: '$primary600 !important',
-          borderColor: '$primary600 !important',
+          color: '$primary600',
+          borderColor: '$primary600',
         },
       },
     },
@@ -167,7 +167,7 @@ const ButtonContainer = styled('button', {
         [`.${darkTheme} &`]: {
           $$color: '$colors$foreground',
         },
-        color: '$$color !important',
+        color: '$$color',
         '&:hover': {
           background: '$error300',
         },
@@ -183,19 +183,19 @@ const ButtonContainer = styled('button', {
       type: 'error',
       variant: 'outlined',
       css: {
-        color: '$error !important',
+        color: '$error',
         borderColor: '$error',
         '&:hover': {
-          color: '$error300 !important',
-          borderColor: '$error300 !important',
+          color: '$error300',
+          borderColor: '$error300',
         },
         '&:visited': {
-          color: '$error700 !important',
-          borderColor: '$error700 !important',
+          color: '$error700',
+          borderColor: '$error700',
         },
         '&:focus': {
-          color: '$error700 !important',
-          borderColor: '$error700 !important',
+          color: '$error700',
+          borderColor: '$error700',
         },
       },
     },
@@ -224,7 +224,7 @@ const ButtonContainer = styled('button', {
         [`.${darkTheme} &`]: {
           $$color: '$colors$foreground',
         },
-        color: '$$color !important',
+        color: '$$color',
         '&:hover': {
           background: '$warning300',
         },
@@ -240,19 +240,19 @@ const ButtonContainer = styled('button', {
       type: 'warning',
       variant: 'outlined',
       css: {
-        color: '$warning !important',
+        color: '$warning',
         borderColor: '$warning',
         '&:hover': {
-          color: '$warning300 !important',
-          borderColor: '$warning300 !important',
+          color: '$warning300',
+          borderColor: '$warning300',
         },
         '&:visited': {
-          color: '$warning700 !important',
-          borderColor: '$warning700 !important',
+          color: '$warning700',
+          borderColor: '$warning700',
         },
         '&:focus': {
-          color: '$warning700 !important',
-          borderColor: '$warning700 !important',
+          color: '$warning700',
+          borderColor: '$warning700',
         },
       },
     },
@@ -281,7 +281,7 @@ const ButtonContainer = styled('button', {
         [`.${darkTheme} &`]: {
           $$color: '$colors$foreground',
         },
-        color: '$$color !important',
+        color: '$$color',
         '&:hover': {
           background: '$success300',
         },
@@ -297,19 +297,19 @@ const ButtonContainer = styled('button', {
       type: 'success',
       variant: 'outlined',
       css: {
-        color: '$success !important',
+        color: '$success',
         borderColor: '$success',
         '&:hover': {
-          color: '$success300 !important',
-          borderColor: '$success300 !important',
+          color: '$success300',
+          borderColor: '$success300',
         },
         '&:visited': {
-          color: '$success700 !important',
-          borderColor: '$success700 !important',
+          color: '$success700',
+          borderColor: '$success700',
         },
         '&:focus': {
-          color: '$success700 !important',
-          borderColor: '$success700 !important',
+          color: '$success700',
+          borderColor: '$success700',
         },
       },
     },

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

@@ -19,11 +19,13 @@ const CheckboxRoot = styled(RadixCheckbox.Root, {
   justifyContent: 'center',
   marginRight: '$2',
   backgroundColor: '$neutral-100',
+  cursor: 'pointer',
 });
 const Label = styled('label', {
   color: '$foreground',
   fontSize: '$m',
   marginLeft: '$8',
+  cursor: 'pointer',
 });
 
 export interface PropTypes {

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

@@ -21,7 +21,7 @@ const ChipCointainer = styled('div', {
   variants: {
     selected: {
       true: { backgroundColor: '$success', color: '$background' },
-      false: { backgroundColor: '$background' },
+      false: { backgroundColor: '$surface' },
     },
   },
 });

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',
@@ -12,15 +15,20 @@ export default {
       options: ['top', 'bottom', 'left', 'right'],
       defaultValue: 'top',
     },
+    placeholder: {
+      name: 'placeholder',
+      control: { type: 'text' },
+      defaultValue: 'Choose a color',
+    },
   },
-} as ComponentMeta<typeof ColorPicker>;
+} as Meta<typeof ColorPicker>;
 
 export const Main = (args: PropTypes) => {
-  const [color, setColor] = useState<string>('#5FA425');
+  const [color, setColor] = useState<string | undefined>('#5FA425');
   return (
     <div
       style={{
-        height: 600,
+        height: 400,
         display: 'flex',
         justifyContent: 'center',
         alignItems: 'center',
@@ -29,7 +37,9 @@ export const Main = (args: PropTypes) => {
       <ColorPicker
         {...args}
         color={color}
-        onChangeColor={(color) => setColor(color.hex)}
+        onChangeColor={(color) => {
+          console.log(color);
+          setColor(color)}}
       />
     </div>
   );

package/src/components/ColorPicker/ColorPicker.tsx

@@ -1,14 +1,16 @@
 import React, { useState } from 'react';
-import { ChromePicker, ColorResult } from 'react-color';
+import { ChromePicker } from 'react-color';
 import { styled } from '../../theme';
 import { Button } from '../Button';
+import { CloseIcon } from '../Icon';
+import rgbHex from 'rgb-hex';
 
 const Container = styled('div', {
   position: 'relative',
 });
 
 const Color = styled('div', {
-  border: '1px solid $neutrals300',
+  border: '1px solid $neutral100',
   borderRadius: '$5',
   width: '$32',
   height: '$32',
@@ -41,13 +43,11 @@ const Popover = styled('div', {
   },
 });
 export interface PropTypes {
-  color: string;
+  color?: string;
   place: 'top' | 'bottom' | 'left' | 'right';
-  onChangeColor: (
-    color: ColorResult,
-    event: React.ChangeEvent<HTMLInputElement>
-  ) => void;
+  onChangeColor: (color?: string) => void;
   label?: string;
+  placeholder?: string;
 }
 
 const Label = styled('label', {
@@ -57,7 +57,13 @@ const Label = styled('label', {
   color: '$foreground',
 });
 
-export function ColorPicker({ color, onChangeColor, label, place }: PropTypes) {
+export function ColorPicker({
+  color,
+  onChangeColor,
+  label,
+  place,
+  placeholder,
+}: PropTypes) {
   const [displayColorPicker, setDisplayColorPicker] = useState<boolean>(false);
 
   return (
@@ -69,15 +75,33 @@ export function ColorPicker({ color, onChangeColor, label, place }: PropTypes) {
         fullWidth
         align="start"
         size="large"
+        suffix={
+          color && (
+            <div
+              onClick={(e) => {
+                e.stopPropagation();
+                onChangeColor(undefined);
+              }}
+            >
+              <CloseIcon size={20} />
+            </div>
+          )
+        }
         onClick={() => setDisplayColorPicker((prev) => !prev)}
       >
-        {color}
+        {color || placeholder}
       </Button>
 
       {displayColorPicker && (
         <Popover place={place}>
           <Cover onClick={() => setDisplayColorPicker(false)} />
-          <ChromePicker color={color} onChange={onChangeColor} />
+          <ChromePicker
+            color={color}
+            onChange={(c) => {
+              const color = '#' + rgbHex(c.rgb.r, c.rgb.g, c.rgb.b, c.rgb.a);
+              onChangeColor(color);
+            }}
+          />
         </Popover>
       )}
     </Container>

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={