@rango-dev/ui 0.15.1-next.2 → 0.15.1-next.4

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

@@ -1,8 +1,11 @@
+import type { PropTypes } from './Checkbox.types';
+import type { Meta } from '@storybook/react';
+
 import React from 'react';
-import { Meta } from '@storybook/react';
-import { Checkbox, PropTypes } from './Checkbox';
 
-export default {
+import { Checkbox } from './Checkbox';
+
+const meta: Meta<typeof Checkbox> = {
   title: 'Components/Checkbox',
   component: Checkbox,
   args: {
@@ -21,6 +24,10 @@ export default {
       defaultValue: true,
     },
   },
-} as Meta<typeof Checkbox>;
+};
+
+export default meta;
 
-export const Main = (props: PropTypes) => <Checkbox {...props} id="test" />;
+export const Main = (props: PropTypes) => (
+  <Checkbox id="test" label="My checkbox" {...props} />
+);

package/src/components/Checkbox/Checkbox.styles.ts

@@ -0,0 +1,38 @@
+import * as RadixCheckbox from '@radix-ui/react-checkbox';
+
+import { styled } from '../../theme';
+
+export const CheckboxContainer = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+});
+
+export const CheckboxRoot = styled(RadixCheckbox.Root, {
+  borderRadius: '$xs',
+  position: 'relative',
+  width: '1rem',
+  height: '1rem',
+  padding: 0,
+  border: '1px solid $neutral800',
+  backgroundColor: 'transparent',
+  cursor: 'pointer',
+  '&:hover': {
+    borderColor: '$secondary600',
+  },
+  '&[data-state="checked"]': {
+    backgroundColor: '$secondary600',
+    borderColor: '$secondary600',
+  },
+});
+
+export const CheckboxIndicator = styled(RadixCheckbox.CheckboxIndicator, {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
+export const Label = styled('label', {
+  color: '$foreground',
+  fontSize: '$m',
+  cursor: 'pointer',
+});

package/src/components/Checkbox/Checkbox.tsx

@@ -1,58 +1,36 @@
-import React, { PropsWithChildren } from 'react';
-import { styled } from '../../theme';
-import * as RadixCheckbox from '@radix-ui/react-checkbox';
-import { CheckIcon } from '../Icon';
+import type { PropTypes } from './Checkbox.types';
+import type { PropsWithChildren } from 'react';
 
-const CheckboxContainer = styled('div', {
-  display: 'flex',
-  alignItems: 'center',
-});
+import React from 'react';
 
-const CheckboxRoot = styled(RadixCheckbox.Root, {
-  borderRadius: '5px',
-  width: 20,
-  padding: 0,
-  height: 20,
-  border: '1px solid $foreground',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  marginRight: '$2',
-  backgroundColor: '$neutral-100',
-  cursor: 'pointer',
-});
-const Label = styled('label', {
-  color: '$foreground',
-  fontSize: '$m',
-  marginLeft: '$8',
-  cursor: 'pointer',
-});
+import { DoneIcon } from '../../icons';
+import { Divider } from '../Divider';
 
-export interface PropTypes {
-  id: string;
-  defaultChecked?: boolean;
-  label: string;
-  checked?: boolean;
-  onCheckedChange?: (checked: boolean) => void;
-  disabled?: boolean;
-  name?: string;
-}
+import {
+  CheckboxContainer,
+  CheckboxIndicator,
+  CheckboxRoot,
+  Label,
+} from './Checkbox.styles';
 
-export function Checkbox({
-  label,
-  id,
-  ...props
-}: PropsWithChildren<PropTypes>) {
+export function Checkbox(props: PropsWithChildren<PropTypes>) {
+  const { id, label, ...otherProps } = props;
+  const hasLabel = id && label;
   return (
     <CheckboxContainer>
-      <CheckboxRoot id={id} {...props}>
-        <RadixCheckbox.Indicator>
-          <CheckIcon size={20} />
-        </RadixCheckbox.Indicator>
+      <CheckboxRoot id={id} {...otherProps}>
+        <CheckboxIndicator>
+          <DoneIcon color="white" size={12} />
+        </CheckboxIndicator>
       </CheckboxRoot>
-      <Label className="_text" htmlFor={id}>
-        {label}
-      </Label>
+      {hasLabel ? (
+        <>
+          <Divider direction="horizontal" size={8} />
+          <Label className="_text" htmlFor={id}>
+            {label}
+          </Label>
+        </>
+      ) : null}
     </CheckboxContainer>
   );
 }

package/src/components/Checkbox/Checkbox.types.ts

@@ -0,0 +1,17 @@
+import type { CheckboxProps } from '@radix-ui/react-checkbox';
+
+type RadixCheckboxProps = Pick<
+  CheckboxProps,
+  'defaultChecked' | 'checked' | 'disabled' | 'name' | 'onCheckedChange'
+>;
+
+interface WithLabelProps {
+  id: string;
+  label: string;
+}
+interface ComponentProps {
+  id?: never;
+  label?: never;
+}
+
+export type PropTypes = RadixCheckboxProps & (ComponentProps | WithLabelProps);

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

@@ -1,7 +1,8 @@
+import type { PropTypes } from './Chip.types';
+
 import React from 'react';
-import { Meta } from '@storybook/react';
 
-import { Chip, PropTypes } from './Chip';
+import { Chip } from './Chip';
 
 export default {
   title: 'Components/Chip',
@@ -24,7 +25,7 @@ export default {
       defaultValue: true,
     },
   },
-} as Meta<typeof Chip>;
+};
 
 export const Main = (args: PropTypes) => <Chip {...args} />;
 

package/src/components/Chip/Chip.styles.ts

@@ -0,0 +1,31 @@
+import { darkTheme, styled } from '../../theme';
+
+export const ChipContainer = styled('button', {
+  display: 'inline-flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  borderRadius: '$xs',
+  padding: '$5 $15',
+  cursor: 'pointer',
+  transition: 'all 0.35s',
+  backgroundColor: '$neutral100',
+  border: '1px solid transparent',
+
+  '&:hover': {
+    $$color: '$colors$info100',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$neutral400',
+    },
+    backgroundColor: '$$color',
+  },
+
+  '&:focus': {
+    outline: '1px solid gray',
+  },
+
+  variants: {
+    selected: {
+      true: { border: '1px solid $secondary500' },
+    },
+  },
+});

package/src/components/Chip/Chip.tsx

@@ -1,48 +1,23 @@
-import { CSSProperties } from '@stitches/react';
-import React from 'react';
-import { styled } from '../../theme';
+import type { PropTypes } from './Chip.types';
 
-const ChipCointainer = styled('div', {
-  display: 'inline-flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  borderRadius: '$5',
-  padding: '$4 $8',
-  height: '32',
-  fontSize: '$14',
-  cursor: 'pointer',
-  transition: 'all 0.35s',
-  color: '$foreground',
+import React from 'react';
 
-  '&:hover': {
-    backgroundColor: '$success700',
-    color: '$background',
-  },
-  variants: {
-    selected: {
-      true: { backgroundColor: '$success', color: '$background' },
-      false: { backgroundColor: '$surface' },
-    },
-  },
-});
+import { Typography } from '../Typography';
 
-export interface PropTypes {
-  label: string;
-  selected?: boolean;
-  onClick?: React.MouseEventHandler<HTMLDivElement>;
-  className?: string;
-  style?: CSSProperties;
-  prefix?: React.ReactNode;
-  suffix?: React.ReactNode;
-}
+import { ChipContainer } from './Chip.styles';
 
 export function Chip(props: PropTypes) {
-  const { label, selected, prefix, suffix, onClick, style } = props;
+  const { label, selected, prefix, suffix, ...otherProps } = props;
   return (
-    <ChipCointainer selected={selected} onClick={onClick} style={style}>
+    <ChipContainer selected={selected} {...otherProps}>
       {prefix || null}
-      {label}
+      <Typography
+        color={!selected ? 'neutral900' : undefined}
+        variant="body"
+        size="medium">
+        {label}
+      </Typography>
       {suffix || null}
-    </ChipCointainer>
+    </ChipContainer>
   );
 }

package/src/components/Chip/Chip.types.ts

@@ -0,0 +1,15 @@
+import type { CSSProperties } from '@stitches/react';
+import type { HTMLAttributes, ReactNode } from 'react';
+
+type ButtonElement = Omit<HTMLAttributes<HTMLButtonElement>, 'prefix'>;
+
+interface ChipProps {
+  label: string;
+  selected?: boolean;
+  className?: string;
+  style?: CSSProperties;
+  prefix?: ReactNode;
+  suffix?: ReactNode;
+}
+
+export type PropTypes = ButtonElement & ChipProps;

package/src/components/ColorPicker/ColorPicker.tsx

@@ -1,19 +1,18 @@
 import React, { useState } from 'react';
+import { ChromePicker } from 'react-color';
+import rgbHex from 'rgb-hex';
+
 import { styled } from '../../theme';
 import { Button } from '../Button';
 import { CloseIcon } from '../Icon';
-import rgbHex from 'rgb-hex';
-import ReactColor from 'react-color';
-
-const { ChromePicker } = ReactColor;
 
 const Container = styled('div', {
   position: 'relative',
 });
 
 const Color = styled('div', {
-  border: '1px solid $neutral100',
-  borderRadius: '$5',
+  border: '1px solid $background',
+  borderRadius: '$xs',
   width: '$32',
   height: '$32',
 });
@@ -75,7 +74,6 @@ export function ColorPicker({
         variant="outlined"
         prefix={<Color style={{ backgroundColor: color }} />}
         fullWidth
-        align="start"
         size="large"
         suffix={
           color && (

package/src/components/Divider/Divider.tsx

@@ -1,7 +1,10 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
 import React from 'react';
+
 import { styled } from '../../theme';
 
 const DividerContainer = styled('div', {
+  flexShrink: 0,
   variants: {
     size: {
       4: {},

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

@@ -1,6 +1,9 @@
+import type { PropTypes } from './Drawer.types';
+import type { Meta } from '@storybook/react';
+
 import React, { useState } from 'react';
-import { Meta } from '@storybook/react';
-import { Drawer, PropTypes } from './Drawer';
+
+import { Drawer } from './Drawer';
 
 export default {
   name: 'Components/Drawer',
@@ -8,7 +11,6 @@ export default {
   args: {
     anchor: 'bottom',
     title: 'I`m Drawer',
-    container: document.body,
   },
   argTypes: {
     anchor: {
@@ -44,18 +46,13 @@ export const BottomAnchor = (args: PropTypes) => {
   return (
     <div>
       <button onClick={() => setOpen(true)}>Open Drawer</button>
-      <Drawer
-        {...args}
-        open={open}
-        onClose={() => setOpen(false)}
-        content={
-          <div>
-            {Array.from({ length: 50 }, (_, index) => (
-              <div>Test {index}</div>
-            ))}
-          </div>
-        }
-      />
+      <Drawer {...args} open={open} onClose={() => setOpen(false)}>
+        <div>
+          {Array.from({ length: 50 }, (_, index) => (
+            <div key={index}>Test {index}</div>
+          ))}
+        </div>
+      </Drawer>
     </div>
   );
 };
@@ -69,15 +66,13 @@ export const LeftAnchor = (args: PropTypes) => {
         {...args}
         open={open}
         onClose={() => setOpen(false)}
-        anchor="left"
-        content={
-          <div>
-            {Array.from({ length: 50 }, (_, index) => (
-              <span>Test {index} </span>
-            ))}
-          </div>
-        }
-      />
+        anchor="left">
+        <div>
+          {Array.from({ length: 50 }, (_, index) => (
+            <span key={index}>Test {index} </span>
+          ))}
+        </div>
+      </Drawer>
     </div>
   );
 };

package/src/components/Drawer/Drawer.styles.ts

@@ -0,0 +1,67 @@
+import { styled } from '../../theme';
+
+export const BackDrop = styled('div', {
+  position: 'absolute',
+  top: '0',
+  left: '0',
+  width: '100%',
+  height: '100%',
+  zIndex: 9999999,
+  backgroundColor: 'rgba(0,0,0,.1)',
+  borderRadius: '$sm',
+});
+
+export const DrawerContainer = styled('div', {
+  position: 'absolute',
+  background: '$background',
+  padding: '$10 $20',
+  borderRadius: '$sm',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'space-between',
+  zIndex: 9999999,
+  boxSizing: 'border-box',
+  variants: {
+    anchor: {
+      left: {
+        top: 0,
+        left: 0,
+        height: '100%',
+        minWidth: '300px',
+        maxWidth: '90%',
+      },
+      right: {
+        top: 0,
+        right: 0,
+        height: '100%',
+        minWidth: '300px',
+        maxWidth: '90%',
+      },
+      bottom: {
+        bottom: 0,
+        width: '100%',
+        maxHeight: '90%',
+      },
+      top: {
+        top: 0,
+        width: '100%',
+        maxHeight: '90%',
+      },
+    },
+  },
+});
+
+export const DrawerHeader = styled('div', {
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  position: 'relative',
+});
+
+export const Body = styled('div', {
+  overflowY: 'auto',
+  height: '100%',
+});
+export const Footer = styled('footer', {
+  width: '100%',
+});

package/src/components/Drawer/Drawer.tsx

@@ -1,119 +1,61 @@
+import type { PropTypes } from './Drawer.types';
+import type { PropsWithChildren } from 'react';
+
 import React from 'react';
-import { styled } from '../../theme';
-import { CloseIcon } from '../Icon';
-import { Typography } from '../Typography';
 import { createPortal } from 'react-dom';
 
-export interface PropTypes {
-  title?: string;
-  open: boolean;
-  onClose: () => void;
-  content: React.ReactNode;
-  containerStyle?: React.CSSProperties;
-  anchor?: 'bottom' | 'left' | 'right' | 'top';
-  showClose?: boolean;
-  footer?: React.ReactNode;
-  container: Element | null;
-}
-
-const BackDrop = styled('div', {
-  position: 'absolute',
-  top: '0',
-  left: '0',
-  width: '100%',
-  height: '100%',
-  zIndex: 9999999,
-  backgroundColor: 'rgba(0,0,0,.1)',
-  borderRadius: '$10',
-});
-
-const DrawerContainer = styled('div', {
-  position: 'absolute',
-  boxShadow: '$s',
-  background: '$background',
-  padding: '$20',
-  display: 'flex',
-  flexDirection: 'column',
-  justifyContent: 'space-between',
-  zIndex: 9999999,
-  borderRadius: '$10',
-
-  variants: {
-    anchor: {
-      left: {
-        top: 0,
-        left: 0,
-        height: '100%',
-        minWidth: '300px',
-        maxWidth: '90%',
-      },
-      right: {
-        top: 0,
-        right: 0,
-        height: '100%',
-        minWidth: '300px',
-        maxWidth: '90%',
-      },
-      bottom: {
-        bottom: 0,
-        width: '100%',
-        maxHeight: '90%',
-      },
-      top: {
-        top: 0,
-        width: '100%',
-        maxHeight: '90%',
-      },
-    },
-  },
-});
-
-const DrawerHeader = styled('div', {
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  position: 'relative',
-  marginBottom: '$16',
-});
+import { CloseIcon } from '../../icons';
+import { Divider } from '../Divider';
+import { IconButton } from '../IconButton/IconButton';
+import { Typography } from '../Typography';
 
-const Body = styled('div', {
-  overflowY: 'auto',
-  height: '100%',
-});
-const Footer = styled('footer', {
-  width: '100%',
-  marginTop: '$28',
-});
+import {
+  BackDrop,
+  Body,
+  DrawerContainer,
+  DrawerHeader,
+  Footer,
+} from './Drawer.styles';
 
-export function Drawer(props: PropTypes) {
+export function Drawer(props: PropsWithChildren<PropTypes>) {
   const {
     title,
-    content,
     open,
     onClose,
-    containerStyle,
     anchor = 'bottom',
-    showClose = false,
+    dismissible = true,
     footer,
-    container,
+    container = document.body,
+    prefix,
+    children,
   } = props;
 
   const handleBackDropClick = (event: React.MouseEvent<HTMLDivElement>) => {
-    if (event.target === event.currentTarget) onClose();
+    if (event.target === event.currentTarget && dismissible) {
+      onClose();
+    }
   };
 
   return (
     <>
-      {open &&
-        container &&
+      {container &&
+        open &&
         createPortal(
           <BackDrop onClick={handleBackDropClick}>
-            <DrawerContainer anchor={anchor} style={containerStyle}>
+            <DrawerContainer anchor={anchor}>
               <DrawerHeader>
-                <Typography variant="h6">{title}</Typography>
-                {showClose && <CloseIcon size={24} onClick={onClose} />}
+                {prefix}
+                <Typography variant="title" size="small">
+                  {title}
+                </Typography>
+                {dismissible && (
+                  <IconButton onClick={onClose}>
+                    <CloseIcon color="gray" />
+                  </IconButton>
+                )}
               </DrawerHeader>
-              <Body>{content}</Body>
+              <Divider size={16} />
+              <Body>{children}</Body>
               <Footer>{footer}</Footer>
             </DrawerContainer>
           </BackDrop>,

package/src/components/Drawer/Drawer.types.ts

@@ -0,0 +1,17 @@
+import type { DrawerContainer } from './Drawer.styles';
+import type * as Stitches from '@stitches/react';
+
+type BaseProps = Stitches.VariantProps<typeof DrawerContainer>;
+type BaseAnchor = Exclude<BaseProps['anchor'], object>;
+
+export interface PropTypes {
+  title?: string;
+  open: boolean;
+  onClose: () => void;
+  anchor?: BaseAnchor;
+  dismissible?: boolean;
+  footer?: React.ReactNode;
+  container?: Element | null;
+  hasLogo?: boolean;
+  prefix?: React.ReactNode;
+}

package/src/components/Header/Header.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Header } from './Header';
+
+const meta: Meta<typeof Header> = {
+  component: Header,
+};
+
+export default meta;
+type Story = StoryObj<typeof Header>;
+
+export const Main: Story = {
+  args: {
+    title: 'Swap',
+    prefix: 'hello',
+    suffix: 'world',
+  },
+};