@rango-dev/ui 0.33.1-next.1 → 0.33.1-next.2

package/src/components/IconButton/IconButton.stories.tsx

@@ -1,20 +0,0 @@
-import type { PropTypes } from './IconButton.types';
-import type { Meta } from '@storybook/react';
-
-import React from 'react';
-
-import { WalletIcon } from '../../icons';
-
-import { IconButton } from './IconButton';
-
-const meta: Meta<typeof IconButton> = {
-  component: IconButton,
-};
-
-export default meta;
-
-export const Main = (props: PropTypes) => (
-  <IconButton {...props}>
-    <WalletIcon />
-  </IconButton>
-);

package/src/components/List/List.stories.tsx

@@ -1,181 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import React, { useState } from 'react';
-
-import {
-  ChevronRightIcon,
-  DeleteIcon,
-  RefreshIcon,
-  WalletIcon,
-} from '../../icons';
-import { Button } from '../Button';
-import { Checkbox } from '../Checkbox';
-import { Chip } from '../Chip';
-import { ListItemButton } from '../ListItemButton';
-
-import { List } from './List';
-
-const DEFAULT_TITLE = 'Your title';
-const DEFAULT_DESCRIPTION = 'Here you can write your description.';
-const DEFAULT_ICON = <WalletIcon />;
-
-type Story = StoryObj<typeof List>;
-
-export default {
-  title: 'Components/List',
-  component: List,
-  argTypes: {},
-} satisfies Meta<typeof List>;
-
-export const Item: Story = {
-  args: {},
-  render: () => {
-    return (
-      <List
-        items={[
-          {
-            id: '1',
-            title: DEFAULT_TITLE,
-            description: DEFAULT_DESCRIPTION,
-          },
-          {
-            id: '2',
-            title: DEFAULT_TITLE,
-          },
-          {
-            id: '3',
-            title: DEFAULT_TITLE,
-            description: DEFAULT_DESCRIPTION,
-            start: <DeleteIcon />,
-          },
-          {
-            id: '4',
-            title: DEFAULT_TITLE,
-            start: <RefreshIcon />,
-            end: (
-              <Button
-                type="primary"
-                onClick={() => {
-                  console.log('Clicked on Hello Button.');
-                }}>
-                Hello, Button.
-              </Button>
-            ),
-          },
-          {
-            id: '5',
-            title: DEFAULT_TITLE,
-            description: DEFAULT_DESCRIPTION,
-            start: DEFAULT_ICON,
-            end: <ChevronRightIcon />,
-          },
-          {
-            id: '6',
-            title: DEFAULT_TITLE,
-            description: DEFAULT_DESCRIPTION,
-            start: DEFAULT_ICON,
-            end: <Checkbox checked />,
-          },
-          {
-            id: '7',
-            title: (
-              <>
-                Dai
-                <Chip label="Ethereum" />
-              </>
-            ),
-            description: DEFAULT_DESCRIPTION,
-            start: DEFAULT_ICON,
-            end: <Checkbox checked />,
-          },
-          {
-            id: '8',
-            title: DEFAULT_TITLE,
-            description: DEFAULT_DESCRIPTION,
-            start: DEFAULT_ICON,
-            end: 'end can be anything',
-          },
-        ]}
-      />
-    );
-  },
-};
-
-export const ItemButton: Story = {
-  args: {},
-  render: () => {
-    return <ItemButtonExamples />;
-  },
-};
-
-function ItemButtonExamples() {
-  const [checkedItem, setCheckedItem] = useState('');
-  return (
-    <List
-      type={
-        <ListItemButton
-          id="_"
-          title="List Item Button"
-          onClick={(id) => {
-            console.log('clicked on ', {
-              id,
-              checkedItem,
-              check: checkedItem === id,
-              result: checkedItem === id ? '' : id,
-            });
-            setCheckedItem(checkedItem === id ? '' : id);
-          }}
-        />
-      }
-      items={[
-        {
-          id: '1',
-          title: DEFAULT_TITLE,
-          description: DEFAULT_DESCRIPTION,
-        },
-        {
-          id: '2',
-          title: DEFAULT_TITLE,
-        },
-        {
-          id: '3',
-          title: DEFAULT_TITLE,
-          description: DEFAULT_DESCRIPTION,
-          start: <DeleteIcon />,
-        },
-        {
-          id: '4',
-          title: DEFAULT_TITLE,
-          start: <RefreshIcon />,
-          end: <Button type="primary">Hello, Button.</Button>,
-        },
-        {
-          id: '5',
-          title: DEFAULT_TITLE,
-          description: DEFAULT_DESCRIPTION,
-          start: DEFAULT_ICON,
-          end: <ChevronRightIcon />,
-        },
-        {
-          id: '6',
-          title: DEFAULT_TITLE,
-          description: DEFAULT_DESCRIPTION,
-          start: DEFAULT_ICON,
-          end: <Checkbox checked={checkedItem === '6'} />,
-        },
-        {
-          id: '7',
-          title: (
-            <>
-              Dai
-              <Chip label="Ethereum" />
-            </>
-          ),
-          description: DEFAULT_DESCRIPTION,
-          start: DEFAULT_ICON,
-          end: <Checkbox checked={checkedItem === '7'} />,
-        },
-      ]}
-    />
-  );
-}

package/src/components/MessageBox/CollapsibleMessageBox.stories.tsx

@@ -1,27 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import React from 'react';
-
-import { Typography } from '../Typography';
-
-import { CollapsibleMessageBox } from './CollapsibleMessageBox';
-
-const meta: Meta<typeof CollapsibleMessageBox> = {
-  component: CollapsibleMessageBox,
-};
-
-export default meta;
-type Story = StoryObj<typeof CollapsibleMessageBox>;
-
-export const Main: Story = {
-  args: {
-    status: 'warning',
-    title: 'Title',
-    description: 'This is a test text',
-    children: (
-      <Typography variant="body" size="medium">
-        test
-      </Typography>
-    ),
-  },
-};

package/src/components/MessageBox/MessageBox.stories.tsx

@@ -1,18 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { MessageBox } from './DefaultMessageBox';
-
-const meta: Meta<typeof MessageBox> = {
-  component: MessageBox,
-};
-
-export default meta;
-type Story = StoryObj<typeof MessageBox>;
-
-export const Main: Story = {
-  args: {
-    type: 'warning',
-    title: 'Title',
-    description: 'This is a test text',
-  },
-};

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

@@ -1,33 +0,0 @@
-import type { PropTypes } from './Modal.types';
-import type { Meta } from '@storybook/react';
-
-import React, { useState } from 'react';
-
-import { MessageBox } from '../MessageBox';
-
-import { Modal } from './Modal';
-
-export default {
-  name: 'Modal',
-  component: Modal,
-  args: {
-    title: 'I`m a modal',
-    container: document.getElementById('storybook-root'),
-  },
-} 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} onClose={() => setOpen(false)}>
-        <MessageBox
-          type="warning"
-          title="Title"
-          description="This is a test text"
-        />
-      </Modal>
-    </div>
-  );
-};

package/src/components/NotFound/NotFound.stories.tsx

@@ -1,17 +0,0 @@
-import type { PropTypes } from './NotFound.types';
-import type { Meta } from '@storybook/react';
-
-import React from 'react';
-
-import { NotFound } from './NotFound';
-
-export default {
-  title: 'Components/NotFound',
-  component: NotFound,
-  args: {
-    title: 'Not Found!',
-    description: 'Try using different keywords',
-  },
-} as Meta<typeof NotFound>;
-
-export const Main = (args: PropTypes) => <NotFound {...args} />;

package/src/components/Popover/Popover.stories.tsx

@@ -1,63 +0,0 @@
-import type { PropTypes } from './Popover.types';
-import type { Meta } from '@storybook/react';
-
-import React from 'react';
-
-import { AddIcon, NotificationsIcon } from '../../icons';
-import { Button } from '../Button';
-import { List } from '../List';
-
-import { Popover } from './Popover';
-
-function PopoverContent() {
-  return (
-    <div style={{ width: '300px' }}>
-      <div>I'm a Popover</div>
-      <List
-        items={[
-          { id: 'one', title: 'one' },
-          { id: 'two', title: 'two' },
-          { id: 'three', title: 'three' },
-          { id: 'four', title: 'four' },
-        ]}
-      />
-    </div>
-  );
-}
-
-export default {
-  title: 'Components/Popover',
-  component: Popover,
-  args: {
-    content: <PopoverContent />,
-    side: 'bottom',
-  },
-  argTypes: {
-    content: {
-      name: 'content',
-      control: { type: 'component' },
-      defaultValue: null,
-    },
-    side: {
-      name: 'side',
-      control: { type: 'select' },
-      options: ['top', 'right', 'bottom', 'left'],
-      defaultValue: 'bottom',
-    },
-  },
-} as Meta<typeof Popover>;
-
-export const Main = (props: PropTypes) => (
-  <div style={{ display: 'flex' }}>
-    <Popover {...props}>
-      <Button>
-        <AddIcon size={24} />
-      </Button>
-    </Popover>
-    <Popover {...props}>
-      <Button>
-        <NotificationsIcon size={24} />
-      </Button>
-    </Popover>
-  </div>
-);

package/src/components/PriceImpact/PriceImpact.stories.tsx

@@ -1,21 +0,0 @@
-import type { PriceImpactProps } from './PriceImpact.types';
-import type { Meta } from '@storybook/react';
-
-import React from 'react';
-
-import { PriceImpact } from './PriceImpact';
-
-const meta: Meta<typeof PriceImpact> = {
-  title: 'Components/Price Impact',
-  component: PriceImpact,
-  args: {
-    size: 'small',
-    outputUsdValue: '28,490',
-    percentageChange: '2.21',
-    warningLevel: 'low',
-  },
-};
-
-export default meta;
-
-export const Main = (args: PriceImpactProps) => <PriceImpact {...args} />;

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

@@ -1,21 +0,0 @@
-import type { PropTypes } from './Radio.types';
-import type { Meta } from '@storybook/react';
-
-import { Root as RadioRoot } from '@radix-ui/react-radio-group';
-import React from 'react';
-
-import { Radio } from './Radio';
-
-export default {
-  title: 'Components/Radio',
-  component: Radio,
-  args: {
-    value: 'test',
-  },
-} as Meta<typeof Radio>;
-
-export const Main = (args: PropTypes) => (
-  <RadioRoot>
-    <Radio {...args} />
-  </RadioRoot>
-);

package/src/components/RadioGroup/RadioGroup.stories.tsx

@@ -1,31 +0,0 @@
-import type { PropTypes } from './RadioGroup.types';
-import type { Meta } from '@storybook/react';
-
-import React from 'react';
-
-import { RadioGroup } from './RadioGroup';
-
-export default {
-  title: 'Components/RadioGroup',
-  component: RadioGroup,
-  args: {
-    options: [
-      { value: 'one', label: 'One' },
-      { value: 'two', label: 'Two' },
-      { value: 'three', label: 'Three' },
-    ],
-    direction: 'horizontal',
-    defaultValue: 'one',
-  },
-  argTypes: {
-    options: {
-      defaultValue: [
-        { value: 'one', label: 'One' },
-        { value: 'two', label: 'Two' },
-        { value: 'three', label: 'Three' },
-      ],
-    },
-  },
-} as Meta<typeof RadioGroup>;
-
-export const Main = (args: PropTypes) => <RadioGroup {...args} />;

package/src/components/RefreshProgressButton/RefreshProgressButton.stories.tsx

@@ -1,20 +0,0 @@
-import type { SvgIconPropsWithChildren } from '../SvgIcon';
-import type { Meta } from '@storybook/react';
-
-import React from 'react';
-
-import { RefreshProgressButton } from './RefreshProgressButton';
-
-export default {
-  title: 'Components/RefreshProgressButton',
-  component: RefreshProgressButton,
-  args: {
-    size: 22,
-    color: 'black',
-    progress: 20,
-  },
-} as Meta<typeof RefreshProgressButton>;
-
-export const Main = (args: SvgIconPropsWithChildren & { progress: number }) => (
-  <RefreshProgressButton {...args} />
-);

package/src/components/Select/Select.stories.tsx

@@ -1,41 +0,0 @@
-import type { PropTypes } from './Select.types';
-import type { Meta } from '@storybook/react';
-
-import React, { useState } from 'react';
-
-import { Select } from '.';
-
-const options = [
-  {
-    label: 'Default',
-    value: 'default',
-  },
-  {
-    label: 'Expanded',
-    value: 'expanded',
-  },
-  {
-    label: 'Full Expanded',
-    value: 'full-expanded',
-  },
-];
-export default {
-  title: 'Components/Select',
-  component: Select,
-  args: {
-    variant: 'outlined',
-    options,
-    value: 'default',
-  },
-} as Meta<typeof Select>;
-
-export const Main = (args: PropTypes<string>) => {
-  const [value, setValue] = useState<string>(args.value);
-  return (
-    <Select
-      {...args}
-      value={value}
-      handleItemClick={(item) => setValue(item.value)}
-    />
-  );
-};

package/src/components/SelectableCategoryList/SelectableCategoryList.stories.tsx

@@ -1,27 +0,0 @@
-import type { PropTypes } from './SelectableCategoryList.types';
-import type { Meta } from '@storybook/react';
-
-import React, { useState } from 'react';
-
-import { blockchains } from './mock';
-import { SelectableCategoryList } from './SelectableCategoryList';
-
-export default {
-  title: 'Components/SelectableCategoryList',
-  component: SelectableCategoryList,
-  args: {
-    blockchains,
-    isLoading: false,
-  },
-} as Meta<typeof SelectableCategoryList>;
-
-export const Main = (args: PropTypes) => {
-  const [category, setCategory] = useState<string>('');
-  return (
-    <SelectableCategoryList
-      {...args}
-      setCategory={setCategory}
-      category={category}
-    />
-  );
-};