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

package/src/components/LiquiditySourceList/LiquiditySource.stories.tsx

@@ -1,10 +1,13 @@
+import type { PropTypes } from './LiquiditySourceList';
+import type { Meta } from '@storybook/react';
+
 import React from 'react';
-import { Meta } from '@storybook/react';
-import { LiquiditySourceList, PropTypes } from './LiquiditySourceList';
+
+import { LiquiditySourceList } from './LiquiditySourceList';
 import { liquiditySources } from './mockData';
 
 export default {
-  title: 'Components/Liquidity Source List',
+  title: 'Components/Liquidity Source List(Deprecated)',
   component: LiquiditySourceList,
   args: {
     loadingStatus: 'success',

package/src/components/LiquiditySourceList/LiquiditySourceList.tsx

@@ -1,16 +1,18 @@
-import { CSSProperties } from '@stitches/react';
-import React, { useEffect, useState } from 'react';
+import type { LiquiditySource, LoadingStatus } from '../../types/meta';
+import type { CSSProperties } from '@stitches/react';
+
 import { i18n } from '@lingui/core';
+import React, { useEffect, useState } from 'react';
+
 import { styled } from '../../theme';
-import { LiquiditySource, LoadingStatus } from '../../types/meta';
+import { LoadingFailedAlert } from '../Alert/LoadingFailedAlert';
+import { NotFoundAlert } from '../Alert/NotFoundAlert';
 import { Button } from '../Button/Button';
+import { Image } from '../common';
 import { Divider } from '../Divider';
+import { Spinner } from '../Spinner';
 import { Switch } from '../Switch';
 import { Typography } from '../Typography';
-import { Spinner } from '../Spinner';
-import { LoadingFailedAlert } from '../Alert/LoadingFailedAlert';
-import { NotFoundAlert } from '../Alert/NotFoundAlert';
-import { Image } from '../common';
 
 const groupLiquiditySources = (
   liquiditySources: LiquiditySource[]
@@ -75,7 +77,9 @@ export function LiquiditySourceList(props: PropTypes) {
   const changeLiquiditySources = (clickedItem: LiquiditySource) => {
     clickedItem.selected = !clickedItem.selected;
     setSelected((prevState) => {
-      if (clickedItem.selected) return [...prevState, clickedItem];
+      if (clickedItem.selected) {
+        return [...prevState, clickedItem];
+      }
       return prevState.filter((item) => item.title != clickedItem.title);
     });
     onChange(clickedItem);
@@ -104,8 +108,10 @@ export function LiquiditySourceList(props: PropTypes) {
       loaded={loadingStatus === 'success'}>
       <div>
         <LiquiditySourceType>
-          <Typography variant="h5">{i18n.t('Bridges')}</Typography>
-          <Typography variant="body1" color="neutral800">
+          <Typography variant="title" size="xmedium">
+            {i18n.t('Bridges')}
+          </Typography>
+          <Typography variant="body" size="medium" color="neutral800">
             {totalSelectedBridges === totalBridges
               ? totalBridges
               : `${totalSelectedBridges} / ${totalBridges}`}
@@ -121,14 +127,18 @@ export function LiquiditySourceList(props: PropTypes) {
         {loadingStatus === 'success' && (
           <>
             {totalBridges ? (
-              bridges.map((liquiditySource, index) => (
-                <LiquiditySourceItem
-                  liquiditySource={liquiditySource}
-                  key={index}
-                  selected={isSelected(liquiditySource)}
-                  onChange={changeLiquiditySources}
-                />
-              ))
+              bridges.map((liquiditySource, index) => {
+                const key = `item-${index}`;
+
+                return (
+                  <LiquiditySourceItem
+                    liquiditySource={liquiditySource}
+                    key={key}
+                    selected={isSelected(liquiditySource)}
+                    onChange={changeLiquiditySources}
+                  />
+                );
+              })
             ) : (
               <NotFoundAlert catergory="Bridge" searchedFor={searchedFor} />
             )}
@@ -137,8 +147,10 @@ export function LiquiditySourceList(props: PropTypes) {
       </div>
       <div>
         <LiquiditySourceType>
-          <Typography variant="h5">{i18n.t('Exchanges')}</Typography>
-          <Typography variant="body1" color="neutral800">
+          <Typography variant="title" size="xmedium">
+            {i18n.t('Exchanges')}
+          </Typography>
+          <Typography variant="body" size="medium" color="neutral800">
             {totalSelectedExchanges === totalExchanges
               ? totalExchanges
               : `${totalSelectedExchanges} / ${totalExchanges}`}
@@ -154,14 +166,17 @@ export function LiquiditySourceList(props: PropTypes) {
         {loadingStatus == 'success' && (
           <>
             {totalExchanges ? (
-              exchanges.map((liquiditySource, index) => (
-                <LiquiditySourceItem
-                  liquiditySource={liquiditySource}
-                  key={index}
-                  selected={isSelected(liquiditySource)}
-                  onChange={changeLiquiditySources}
-                />
-              ))
+              exchanges.map((liquiditySource, index) => {
+                const key = `item-${index}`;
+                return (
+                  <LiquiditySourceItem
+                    liquiditySource={liquiditySource}
+                    key={key}
+                    selected={isSelected(liquiditySource)}
+                    onChange={changeLiquiditySources}
+                  />
+                );
+              })
             ) : (
               <NotFoundAlert catergory="Exchange" searchedFor={searchedFor} />
             )}
@@ -171,7 +186,9 @@ export function LiquiditySourceList(props: PropTypes) {
     </MainContainer>
   );
 }
-
+/**
+ * @deprecated will be removed in v2
+ */
 const LiquiditySourceItem = ({
   liquiditySource,
   selected,
@@ -183,7 +200,6 @@ const LiquiditySourceItem = ({
 }) => (
   <Button
     size="large"
-    align="start"
     variant="outlined"
     prefix={
       <LiquidityImageContainer>
@@ -193,6 +209,8 @@ const LiquiditySourceItem = ({
     suffix={<Switch checked={selected} />}
     style={{ marginBottom: '12px' }}
     onClick={onChange.bind(null, liquiditySource)}>
-    <Typography variant="body1">{liquiditySource.title}</Typography>
+    <Typography variant="body" size="medium">
+      {liquiditySource.title}
+    </Typography>
   </Button>
 );

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

@@ -0,0 +1,181 @@
+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/List/List.styles.tsx

@@ -0,0 +1,7 @@
+import { styled } from '../../theme';
+
+export const BaseList = styled('ul', {
+  padding: 0,
+  margin: 0,
+  listStyle: 'none',
+});

package/src/components/List/List.tsx

@@ -0,0 +1,30 @@
+import type { ListPropTypes } from './List.types';
+
+import React from 'react';
+
+import { ListItem } from '../ListItem';
+
+import { BaseList } from './List.styles';
+
+function List(props: ListPropTypes) {
+  const container = props.type;
+
+  return (
+    <BaseList as={props.as}>
+      {props.items.map((item) => {
+        const { id, ...itemProps } = item;
+
+        if (!!container) {
+          return React.cloneElement(container, {
+            ...itemProps,
+            key: id,
+            id,
+          });
+        }
+        return <ListItem key={id} {...itemProps} />;
+      })}
+    </BaseList>
+  );
+}
+
+export { List };

package/src/components/List/List.types.ts

@@ -0,0 +1,12 @@
+import type { ListItemProps } from '../ListItem';
+import type * as Stitches from '@stitches/react';
+import type React from 'react';
+
+export interface ListPropTypes {
+  type?: React.ReactElement;
+  items: (ListItemProps & {
+    id: string;
+  })[];
+  as?: 'div' | 'ul';
+  css?: Stitches.CSS;
+}

package/src/components/List/index.ts

@@ -0,0 +1 @@
+export { List } from './List';

package/src/components/ListItem/ListItem.styles.ts

@@ -0,0 +1,47 @@
+import { styled } from '../../theme';
+
+export const BaseListItem = styled('li', {
+  width: '100%',
+  borderRadius: '$xs',
+  display: 'flex',
+  alignItems: 'center',
+  padding: '$10 $5',
+  border: 0,
+  backgroundColor: 'transparent',
+
+  '.item-start-container': {
+    paddingRight: '$10',
+    flexShrink: 0,
+
+    '& svg': {
+      display: 'block',
+    },
+  },
+  '.item-text-container': {
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: 'auto',
+    textAlign: 'left',
+
+    '.item-text-title': {
+      fontWeight: 'bold',
+      display: 'flex',
+      alignItems: 'center',
+    },
+  },
+  '.item-end-container': {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingLeft: '$10',
+  },
+  variants: {
+    hasDivider: {
+      true: {
+        borderBottom: '1px solid $neutral300',
+        borderBottomRightRadius: 0,
+        borderBottomLeftRadius: 0,
+      },
+    },
+  },
+});

package/src/components/ListItem/ListItem.tsx

@@ -0,0 +1,29 @@
+import type { ListItemProps } from './ListItem.types';
+
+import React from 'react';
+
+import { Typography } from '../Typography';
+
+import { BaseListItem } from './ListItem.styles';
+
+function ListItem(props: ListItemProps) {
+  const { start, title, description, end, onClick, hasDivider, ...restProps } =
+    props;
+
+  return (
+    <BaseListItem hasDivider={hasDivider} onClick={onClick} {...restProps}>
+      {start && <div className="item-start-container">{start}</div>}
+      <div className="item-text-container">
+        {title && <div className="item-text-title">{title}</div>}
+        {description && (
+          <Typography variant="body" size="small" color="neutral800">
+            {description}
+          </Typography>
+        )}
+      </div>
+      {end && <div className="item-end-container">{end}</div>}
+    </BaseListItem>
+  );
+}
+
+export { ListItem };

package/src/components/ListItem/ListItem.types.ts

@@ -0,0 +1,9 @@
+export type ListItemProps = {
+  title?: string | React.ReactElement;
+  description?: string | React.ReactElement;
+  start?: React.ReactNode;
+  end?: React.ReactNode;
+  as?: 'div' | 'li';
+  onClick?: () => void;
+  hasDivider?: boolean;
+};

package/src/components/ListItem/index.ts

@@ -0,0 +1,2 @@
+export type { ListItemProps } from './ListItem.types';
+export { ListItem } from './ListItem';

package/src/components/ListItemButton/ListItemButton.styles.ts

@@ -0,0 +1,44 @@
+import { darkTheme, styled } from '../../theme';
+
+export const BaseListItemButton = styled('button', {
+  transition: 'all 0.35s',
+  border: 0,
+  width: '100%',
+  backgroundColor: 'transparent',
+  '&:focus-visible': {
+    borderRadius: '$xs',
+
+    outline: 0,
+    $$color: '$colors$info100',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$neutral400',
+    },
+    backgroundColor: '$$color',
+  },
+  '&:hover': {
+    $$color: '$colors$info100',
+    borderRadius: '$xs',
+
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$neutral400',
+    },
+    backgroundColor: '$$color',
+    cursor: 'pointer',
+  },
+  '&:active': {
+    transform: 'scale(0.99)',
+  },
+  variants: {
+    hasDivider: {
+      true: {
+        borderBottom: '1px solid $neutral300',
+        borderBottomRightRadius: 0,
+        borderBottomLeftRadius: 0,
+      },
+    },
+    selected: {
+      true: { outline: '1px solid $secondary500' },
+      false: { outline: 0 },
+    },
+  },
+});

package/src/components/ListItemButton/ListItemButton.tsx

@@ -0,0 +1,27 @@
+import type { ListItemButtonProps } from './ListItemButton.types';
+
+import React from 'react';
+
+import { ListItem } from '../ListItem/ListItem';
+
+import { BaseListItemButton } from './ListItemButton.styles';
+
+function ListItemButton(props: ListItemButtonProps) {
+  const { onClick, id, style, hasDivider, selected, ...restProps } = props;
+  const onClickWithKey = () => {
+    if (onClick) {
+      onClick(id);
+    }
+  };
+  return (
+    <BaseListItemButton
+      hasDivider={hasDivider}
+      selected={selected}
+      onClick={onClickWithKey}
+      style={style}>
+      <ListItem {...restProps} />
+    </BaseListItemButton>
+  );
+}
+
+export { ListItemButton };

package/src/components/ListItemButton/ListItemButton.types.ts

@@ -0,0 +1,10 @@
+import type { ListItemProps } from '../ListItem';
+import type { CSSProperties } from '@stitches/react';
+
+export type ListItemButtonProps = Omit<ListItemProps, 'onClick'> & {
+  id: string;
+  onClick: (id: string) => void;
+  style?: CSSProperties;
+  hasDivider?: boolean;
+  selected?: boolean;
+};

package/src/components/ListItemButton/index.ts

@@ -0,0 +1,2 @@
+export type { ListItemButtonProps } from './ListItemButton.types';
+export { ListItemButton } from './ListItemButton';

package/src/components/Logo/Logo.tsx

@@ -0,0 +1,35 @@
+import type { SvgIconProps } from '../SvgIcon';
+
+import React from 'react';
+
+import { SvgWithColor } from '../SvgIcon/SvgIcon.style';
+
+export function Logo(props: SvgIconProps) {
+  const { size = '1em', color } = props;
+  const commonProps = {
+    width: size,
+    height: size,
+    color: color,
+    className: '_icon',
+  };
+  return (
+    <SvgWithColor
+      {...commonProps}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 18 18"
+      className="c-lekKBq">
+      <g fill="currentColor">
+        <path d="m7.641 6.333.89.492 6.982-2.896a8.471 8.471 0 0 0-.825-.939c-.05.028-.09.044-.09.044L7.315 6.097c.083.084.19.164.33.236H7.64ZM3.134 14.967l7.067-2.947-1.315-.743-5.393 2.291-1.366.578c.251.325.526.63.82.914l.187-.095v.002Z" />
+        <path d="m16.253 5.1-1.287.498c-1.03.377-5.082 1.975-5.082 1.975.662.365 1.378.759 2.008 1.102 1.612.88.592 2.812.379 3.18l-.01.014a5.873 5.873 0 0 0-.027.046s.151-1.443-.866-1.977a648.55 648.55 0 0 1-4.365-2.313c-.466-.248-.804-.7-.868-1.223-.048-.392.051-.843.521-1.238.274-.254.569-.39.569-.39l5.253-2.156s.033-.013.081-.038l1.093-.454A8.421 8.421 0 0 0 1.447 13.12l2.032-.886 4.046-1.697c-.698-.383-1.342-.739-1.648-.903-.152-.081-.344-.21-.496-.292-.82-.433-1.357-1.656-.113-3.107 0 0-.13 1.377.641 1.845.734.446 3.582 1.905 4.428 2.358.216.116.416.264.576.453.329.39.454.87.316 1.38-.006.025-.015.049-.023.073l-.016.048a1.018 1.018 0 0 1-.037.095c-.29.7-1.062.91-1.062.91L10 13.43l-4.917 2.018-1.084.476A8.42 8.42 0 0 0 16.253 5.099v.002Z" />
+      </g>
+      <path
+        fill="currentColor"
+        d="m7.53 10.53 1.36.74-.68.29-1.426-.717.745-.314ZM10.09 13.392s1.13-.8.108-1.378l-.643.268s1.072.287.535 1.11ZM9.889 7.567l-1.361-.74.695-.29 1.437.731-.771.3ZM7.41 4.705s-1.131.801-.108 1.378l.642-.268s-1.072-.287-.535-1.11Z"
+        opacity={0.4}
+        style={{
+          mixBlendMode: 'multiply',
+        }}
+      />
+    </SvgWithColor>
+  );
+}

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

@@ -0,0 +1,27 @@
+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/CollapsibleMessageBox.styles.tsx

@@ -0,0 +1,21 @@
+import * as Collapsible from '@radix-ui/react-collapsible';
+
+import { darkTheme, styled } from '../../theme';
+
+export const Trigger = styled(Collapsible.Trigger, {
+  padding: '$15',
+  paddingBottom: '$5',
+  borderRadius: '$xm',
+  cursor: 'pointer',
+  backgroundColor: '$neutral200',
+  textAlign: 'center',
+  border: 0,
+  width: '100%',
+  '&:hover': {
+    $$color: '$colors$info100',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$neutral400',
+    },
+    backgroundColor: '$$color',
+  },
+});