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

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,39 @@
+import * as RadixCheckbox from '@radix-ui/react-checkbox';
+
+import { darkTheme, 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',
+  '&[data-state="checked"]': {
+    $$color: '$colors$secondary500',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$secondary400',
+    },
+    backgroundColor: '$$color',
+    borderColor: '$$color',
+  },
+});
+
+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: React.ReactNode;
+}
+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,41 @@
+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',
+  border: '1px solid transparent',
+  fontFamily: 'inherit',
+  $$color: '$colors$neutral100',
+  [`.${darkTheme} &`]: {
+    $$color: '$colors$neutral300',
+  },
+  backgroundColor: '$$color',
+
+  '&:hover': {
+    $$color: '$colors$info100',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$neutral100',
+    },
+    backgroundColor: '$$color',
+  },
+
+  '&:focus-visible': {
+    $$color: '$colors$info100',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$info700',
+    },
+    backgroundColor: '$$color',
+    outline: 0,
+  },
+
+  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/Collapsible/Collapsible.stories.tsx

@@ -0,0 +1,46 @@
+import type { CollapsibleProps } from './Collapsible.types';
+
+import React, { useState } from 'react';
+
+import { ChevronUpIcon } from '../../icons';
+import { Typography } from '../Typography';
+
+import { CollapsibleComponent as Collapsible } from './Collapsible';
+
+export default {
+  title: 'Components/Collapsible',
+  component: Collapsible,
+  args: {
+    open: false,
+    trigger: (
+      <>
+        <Typography size="medium" variant="title">
+          Trigger
+        </Typography>
+        <ChevronUpIcon size={10} color="gray" />
+      </>
+    ),
+  },
+  argTypes: {
+    open: {
+      name: 'open',
+      defaultValue: false,
+      control: { type: 'boolean' },
+    },
+  },
+};
+
+export const Main = (args: CollapsibleProps) => {
+  const [open, setOpen] = useState<boolean>(false);
+
+  return (
+    <Collapsible
+      {...args}
+      open={open || args.open}
+      onOpenChange={() => setOpen(!open)}>
+      <Typography size="medium" variant="title">
+        Content
+      </Typography>
+    </Collapsible>
+  );
+};

package/src/components/Collapsible/Collapsible.styles.ts

@@ -0,0 +1,9 @@
+import * as Collapsible from '@radix-ui/react-collapsible';
+
+import { styled } from '../../theme';
+
+export const Trigger = styled(Collapsible.Trigger, {
+  border: 'none',
+  background: 'transparent',
+  width: '100%',
+});

package/src/components/Collapsible/Collapsible.tsx

@@ -0,0 +1,21 @@
+import type { CollapsibleProps } from './Collapsible.types';
+import type { PropsWithChildren } from 'react';
+
+import * as Collapsible from '@radix-ui/react-collapsible';
+import React from 'react';
+
+import { CollapsibleContent } from '../common/styles';
+
+import { Trigger } from './Collapsible.styles';
+
+export function CollapsibleComponent(
+  props: PropsWithChildren<CollapsibleProps>
+) {
+  const { open, onOpenChange, trigger, children, ...otherProps } = props;
+  return (
+    <Collapsible.Root open={open} onOpenChange={onOpenChange} {...otherProps}>
+      <Trigger asChild>{trigger}</Trigger>
+      <CollapsibleContent open={open}>{children}</CollapsibleContent>
+    </Collapsible.Root>
+  );
+}

package/src/components/Collapsible/Collapsible.types.ts

@@ -0,0 +1,7 @@
+import type React from 'react';
+
+export interface CollapsibleProps {
+  trigger: React.ReactNode;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}

package/src/components/Collapsible/index.ts

@@ -0,0 +1 @@
+export { CollapsibleComponent as Collapsible } from './Collapsible';

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%',
+});