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

package/src/components/TextField/TextField.tsx

@@ -1,157 +1,60 @@
-import React, { PropsWithChildren, RefObject } from 'react';
+import type { PropTypes, Ref } from './TextField.types';
+import type { PropsWithChildren } from 'react';
 
-import { styled } from '../../theme';
+import React from 'react';
 
-const InputContainer = styled('div', {
-  backgroundColor: '$surface',
-  padding: '1px',
-  boxSizing: 'border-box',
-  border: '1px solid $neutral400',
-  borderRadius: '$5',
-  height: '$48',
-  display: 'flex',
-  flexGrow: 1,
-  position: 'relative',
-  alignItems: 'center',
-  color: '$foreground',
-  overflowX: 'hidden',
-  transition: 'border-color ease .3s',
-  '&:focus-within': {
-    borderColor: '$success',
-    outline: '1px solid $success',
-  },
-  variants: {
-    size: {
-      small: {
-        '& input': {
-          fontSize: '$14',
-        },
-        height: '$32',
-      },
-      medium: {
-        '& input': {
-          fontSize: '$15',
-        },
-        height: '$40',
-      },
-      large: {
-        '& input': {
-          fontSize: '$16',
-        },
-        height: '$48',
-      },
-    },
-    disabled: {
-      true: {
-        backgroundColor: '$neutral100',
-        cursor: 'not-allowed',
-        filter: 'grayscale(100%)',
-      },
-    },
-    prefix: {
-      true: {
-        paddingLeft: '$16',
-      },
-      false: {
-        paddingLeft: '$0',
-      },
-    },
-    suffix: {
-      true: {
-        paddingRight: '$16',
-      },
-      false: {
-        paddingRight: '$0',
-      },
-    },
-  },
-  defaultVariants: {
-    size: 'medium',
-  },
-});
+import { Divider } from '../Divider';
+import { Typography } from '../Typography';
 
-const Input = styled('input', {
-  color: '$foreground',
-  paddingLeft: '$16',
-  paddingRight: '$16',
-  flexGrow: 1,
-  width: '100%',
-  border: 'none',
-  borderRadius: '$5',
-  outline: 'none',
-  backgroundColor: 'transparent',
-  '-webkit-appearance': 'none',
-  margin: 0,
-  '&:disabled': {
-    cursor: 'not-allowed',
-  },
-  '&::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {
-    '-webkit-appearance': 'none',
-    margin: 0,
-  },
-  '&[type="number"]': {
-    '-moz-appearance': 'textfield',
-  }
-});
-const Label = styled('label', {
-  display: 'inline-block',
-  fontSize: '$14',
-  color: '$foreground',
-  marginBottom: '$4',
-});
+import { Input, InputContainer, Label } from './TextField.styles';
 
-export type PropTypes = {
-  label?: string;
-  prefix?: React.ReactNode;
-  suffix?: React.ReactNode;
-  size?: 'small' | 'medium' | 'large';
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'prefix' | 'size'> & {
-    ref?:
-      | ((instance: HTMLInputElement | null) => void)
-      | React.RefObject<HTMLInputElement>
-      | null
-      | undefined;
-  };
-
-export const TextField = React.forwardRef(
-  (
-    props: PropsWithChildren<PropTypes>,
-    ref:
-      | RefObject<HTMLInputElement>
-      | ((instance: HTMLInputElement | null) => void)
-      | null
-      | undefined
-  ) => {
-    const { label, prefix, suffix, children, size, style, ...inputAttributes } =
-      props;
-    return (
-      <>
-        {label && (
+function TextFieldComponent(props: PropsWithChildren<PropTypes>, ref?: Ref) {
+  const {
+    label,
+    prefix,
+    suffix,
+    size = 'small',
+    style,
+    variant,
+    fullWidth,
+    ...inputAttributes
+  } = props;
+  return (
+    <>
+      {label && (
+        <>
           <Label
             className="_text"
-            {...(inputAttributes.id && { htmlFor: inputAttributes.id })}
-          >
-            {label}
+            {...(inputAttributes.id && { htmlFor: inputAttributes.id })}>
+            <Typography variant="label" size="large">
+              {label}
+            </Typography>
           </Label>
-        )}
-        <InputContainer
-          disabled={inputAttributes.disabled}
-          prefix={!!prefix}
-          suffix={!!suffix}
-          size={size}
-          style={style}
+          <Divider direction="vertical" size={4} />
+        </>
+      )}
+      <InputContainer
+        disabled={inputAttributes.disabled}
+        fullWidth={fullWidth}
+        variant={variant}
+        size={size}
+        style={style}
+        className="_text">
+        {prefix || null}
+        <Input
           className="_text"
-        >
-          {prefix || null}
-          <Input
-            className="_text"
-            {...inputAttributes}
-            spellCheck={false}
-            ref={ref}
-          />
-          {suffix || null}
-        </InputContainer>
-      </>
-    );
-  }
-);
+          {...inputAttributes}
+          spellCheck={false}
+          suffix={!!suffix}
+          ref={ref}
+        />
+        {suffix || null}
+      </InputContainer>
+    </>
+  );
+}
+
+const TextField = React.forwardRef(TextFieldComponent);
+TextField.displayName = 'TextField';
+
+export { TextField };

package/src/components/TextField/TextField.types.tsx

@@ -0,0 +1,21 @@
+import type { InputContainer } from './TextField.styles';
+import type * as Stitches from '@stitches/react';
+
+type BaseProps = Stitches.VariantProps<typeof InputContainer>;
+type BaseSizes = Exclude<BaseProps['size'], object>;
+type BaseVariants = Exclude<BaseProps['variant'], object>;
+
+export type Ref =
+  | ((instance: HTMLInputElement | null) => void)
+  | React.RefObject<HTMLInputElement>
+  | null
+  | undefined;
+
+export type PropTypes = {
+  label?: string;
+  prefix?: React.ReactNode;
+  suffix?: React.ReactNode;
+  size?: BaseSizes;
+  variant?: BaseVariants;
+  fullWidth?: boolean;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'prefix' | 'size'>;

package/src/components/TokenAmount/TokenAmount.stories.tsx

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { TokenAmount } from './TokenAmount';
+
+const meta: Meta<typeof TokenAmount> = {
+  component: TokenAmount,
+};
+
+export default meta;
+type Story = StoryObj<typeof TokenAmount>;
+
+export const Main: Story = {
+  args: {
+    type: 'output',
+    price: { value: '1', usdValue: '28,490' },
+    percentageChange: '2.21',
+    warningLevel: 'low',
+    chain: { image: 'https://api.rango.exchange/swappers/osmosis.png' },
+    token: {
+      image: 'https://api.rango.exchange/tokens/COSMOS/JUNO.png',
+      displayName: 'JUNO',
+    },
+  },
+};

package/src/components/TokenAmount/TokenAmount.styles.ts

@@ -0,0 +1,27 @@
+import { styled } from '@stitches/react';
+
+export const Container = styled('div', {
+  display: 'flex',
+  justifyContent: 'space-between',
+  variants: {
+    direction: {
+      vertical: {
+        flexDirection: 'column',
+        alignItems: 'start',
+      },
+      horizontal: { flexDirection: 'row', width: '100%', alignItems: 'end' },
+    },
+    centerAlign: {
+      true: { alignItems: 'center', justifyContent: 'center' },
+    },
+  },
+  '& .token-amount': {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  '& .usd-value': {
+    display: 'flex',
+    paddingTop: '$5',
+  },
+});

package/src/components/TokenAmount/TokenAmount.tsx

@@ -0,0 +1,61 @@
+import type { PropTypes } from './TokenAmount.types';
+
+import React from 'react';
+
+import { ChainToken } from '../ChainToken';
+import { PriceImpact } from '../PriceImpact/PriceImpact';
+import { Typography } from '../Typography';
+
+import { Container } from './TokenAmount.styles';
+
+export function TokenAmount(props: PropTypes) {
+  return (
+    <Container direction={props.direction} centerAlign={props.centerAlign}>
+      <div className="token-amount">
+        <ChainToken
+          chainImage={props.chain.image}
+          tokenImage={props.token.image}
+          size="medium"
+        />
+        <div>
+          {props.label && (
+            <Typography ml={4} size="xsmall" variant="body" color="$neutral900">
+              {props.label}
+            </Typography>
+          )}
+          <div>
+            <Typography
+              ml={4}
+              size="large"
+              variant="title"
+              style={{ fontWeight: 600 }}>
+              {props.price.value}
+            </Typography>
+            <Typography
+              ml={8}
+              size="large"
+              variant="title"
+              style={{ fontWeight: 400 }}>
+              {props.token.displayName}
+            </Typography>
+          </div>
+        </div>
+      </div>
+      <div className="usd-value">
+        {props.type === 'input' && (
+          <Typography mr={4} size="small" variant="body" color="$neutral900">
+            {`~$${props.price.usdValue}`}
+          </Typography>
+        )}
+        {props.type === 'output' && (
+          <PriceImpact
+            size="small"
+            outputUsdValue={props.price.usdValue}
+            percentageChange={props.percentageChange}
+            warningLevel={props.warningLevel}
+          />
+        )}
+      </div>
+    </Container>
+  );
+}

package/src/components/TokenAmount/TokenAmount.types.ts

@@ -0,0 +1,20 @@
+import type { PriceImpactProps } from '../PriceImpact/PriceImpact.types';
+import type { SwapInputProps } from 'src/containers/SwapInput/SwapInput.types';
+
+type BaseProps = Pick<SwapInputProps, 'token' | 'price'> & {
+  chain: Pick<SwapInputProps['chain'], 'image'>;
+  direction?: 'vertical' | 'horizontal';
+  centerAlign?: boolean;
+  label?: string;
+};
+
+type InputAmountProps = { type: 'input' };
+
+type OutputAmountProps = Pick<
+  PriceImpactProps,
+  'percentageChange' | 'warningLevel'
+> & {
+  type: 'output';
+};
+
+export type PropTypes = BaseProps & (InputAmountProps | OutputAmountProps);

package/src/components/TokenAmount/index.ts

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

package/src/components/TokenList/TokenItem.tsx

@@ -1,10 +1,13 @@
-import { Token } from 'rango-sdk';
-import React, { CSSProperties } from 'react';
+import type { TokenWithAmount } from './TokenList';
+import type { Token } from 'rango-sdk';
+import type { CSSProperties } from 'react';
+
+import React from 'react';
+
 import { styled } from '../../theme';
 import { Button } from '../Button';
-import { Typography } from '../Typography';
-import { TokenWithAmount } from './TokenList';
 import { Image } from '../common';
+import { Typography } from '../Typography';
 
 const TokenImageContainer = styled('div', {
   paddingRight: '$16',
@@ -40,12 +43,10 @@ export function TokenItem(props: PropTypes) {
         height: '48px',
         top: `${parseFloat(style?.top as string) + 0}px`,
         padding: '0 4px',
-      }}
-    >
+      }}>
       <Button
         variant="outlined"
         size="large"
-        align="start"
         onClick={onClick.bind(null, token)}
         type={selected ? 'primary' : undefined}
         prefix={
@@ -56,17 +57,20 @@ export function TokenItem(props: PropTypes) {
         suffix={
           token.balance?.amount && (
             <TokenAmountContainer>
-              <Typography variant="body2">{token.balance.amount}</Typography>
-              <Typography variant="caption">
+              <Typography variant="body" size="small">
+                {token.balance.amount}
+              </Typography>
+              <Typography variant="body" size="xsmall">
                 {`${token.balance.usdValue}$`}
               </Typography>
             </TokenAmountContainer>
           )
-        }
-      >
+        }>
         <TokenNameContainer>
-          <Typography variant="body1">{token.symbol}</Typography>
-          <Typography variant="caption" color="neutral600">
+          <Typography variant="body" size="medium">
+            {token.symbol}
+          </Typography>
+          <Typography variant="body" size="xsmall" color="neutral600">
             {token.name}
           </Typography>
         </TokenNameContainer>

package/src/components/TokenList/TokenList.stories.tsx

@@ -1,10 +1,13 @@
+import type { PropTypes } from './TokenList';
+import type { Meta } from '@storybook/react';
+
 import React from 'react';
-import { Meta } from '@storybook/react';
-import { TokenList, PropTypes } from './TokenList';
+
 import { tokensMeta } from './mockData';
+import { TokenList } from './TokenList';
 
 export default {
-  title: 'Components/Token List',
+  title: 'Components/Token List(Deprecated)',
   component: TokenList,
   argTypes: {
     searchedText: {

package/src/components/TokenList/TokenList.tsx

@@ -1,7 +1,11 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import type { Asset, Token } from 'rango-sdk';
+import type { CommonProps } from 'react-window';
+
 import React, { forwardRef, useEffect, useState } from 'react';
-import { CommonProps } from 'react-window';
-import { Asset, Token } from 'rango-sdk';
+
 import { VirtualizedList } from '../VirtualizedList/VirtualizedList';
+
 import { TokenItem } from './TokenItem';
 
 export interface TokenWithAmount extends Token {
@@ -20,7 +24,9 @@ export interface PropTypes {
   multiSelect?: boolean;
   selectedList?: Asset[];
 }
-
+/**
+ * @deprecated will be removed in v2
+ */
 export function TokenList(props: PropTypes) {
   const { list, searchedText, onChange, multiSelect, selectedList } = props;
   const [selected, setSelected] = useState(props.selected);
@@ -58,7 +64,9 @@ export function TokenList(props: PropTypes) {
     setHasNextPage(list.length > tokens.length);
   }, [tokens.length]);
 
+  // eslint-disable-next-line react/display-name
   const innerElementType: React.FC<CommonProps> = forwardRef(
+    // eslint-disable-next-line destructuring/in-params, react/prop-types
     ({ style, ...rest }, ref) => {
       return (
         <div
@@ -66,6 +74,7 @@ export function TokenList(props: PropTypes) {
           ref={ref as any}
           style={{
             ...style,
+            // eslint-disable-next-line react/prop-types
             height: `${parseFloat(style?.height as string) + 8 * 2}px`,
           }}
           {...rest}

package/src/components/TokenList/mockData.ts

@@ -1,7 +1,7 @@
 // TODO: fix ts errors
 // eslint-disable-next-line
 // @ts-nocheck
-import { TokenWithAmount } from './TokenList';
+import type { TokenWithAmount } from './TokenList';
 
 export const tokensMeta: TokenWithAmount[] = [
   {

package/src/components/TokenPreview/TokenPreview.tsx

@@ -1,14 +1,12 @@
-import React, { ReactNode } from 'react';
-import {
-  Button,
-  InfoCircleIcon,
-  styled,
-  Typography,
-  Divider,
-  Image,
-} from '../..';
+import type { LoadingStatus } from '../../types/meta';
+import type { ReactNode } from 'react';
+
 import { i18n } from '@lingui/core';
-import { LoadingStatus } from '../../types/meta';
+import React from 'react';
+
+import { Button, Divider, Image, Typography } from '../..';
+import { styled } from '../../theme';
+import { InfoCircleIcon } from '../Icon';
 
 const Box = styled('div', {
   display: 'flex',
@@ -19,16 +17,16 @@ const Box = styled('div', {
 
 const Container = styled('div', {
   boxSizing: 'border-box',
-  borderRadius: '$5',
+  borderRadius: '$xs',
   padding: '$8 $16 $16 $16',
 
   variants: {
     type: {
       filled: {
-        backgroundColor: '$neutral100',
+        backgroundColor: '$background',
       },
       outlined: {
-        border: '1px solid $neutral100',
+        border: '1px solid $background',
       },
     },
   },
@@ -68,14 +66,14 @@ const Container = styled('div', {
 const ImagePlaceholder = styled('span', {
   width: '24px',
   height: '24px',
-  backgroundColor: '$neutral100',
+  backgroundColor: '$background',
   borderRadius: '99999px',
 });
 
 const OutputContainer = styled('div', {
   windth: '100%',
   height: '$48',
-  borderRadius: '$5',
+  borderRadius: '$xs',
   backgroundColor: '$surface',
   border: '1px solid transparent',
   position: 'relative',
@@ -119,14 +117,15 @@ export function TokenPreview(props: PropTypes) {
     <Box>
       <Container type={'outlined'}>
         <div className="head">
-          <Typography variant="body2" color="neutral800">
+          <Typography variant="body" size="small" color="neutral800">
             {props.label}
           </Typography>
           <div>
             {percentageChange}
             {props.usdValue && (
               <Typography
-                variant="caption"
+                variant="body"
+                size="xsmall"
                 color="neutral600"
                 className="usd-value">{`$${props.usdValue}`}</Typography>
             )}
@@ -145,7 +144,6 @@ export function TokenPreview(props: PropTypes) {
               )
             }
             suffix={ItemSuffix}
-            align="start"
             size="large">
             {loadingStatus === 'success' && chain
               ? chain.displayName
@@ -164,8 +162,7 @@ export function TokenPreview(props: PropTypes) {
               )
             }
             suffix={ItemSuffix}
-            size="large"
-            align="start">
+            size="large">
             {loadingStatus === 'success' && token
               ? token.symbol
               : i18n.t('Token')}
@@ -173,7 +170,9 @@ export function TokenPreview(props: PropTypes) {
           <Divider size={12} direction="horizontal" />
           <div className="amount">
             <OutputContainer>
-              <Typography variant="h4">{props.amount}</Typography>
+              <Typography variant="title" size="medium">
+                {props.amount}
+              </Typography>
             </OutputContainer>
           </div>
         </div>

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -1,16 +1,18 @@
+import type { PropTypes } from './Tooltip.types';
+import type { Meta } from '@storybook/react';
+
 import React from 'react';
-import { Meta } from '@storybook/react';
 
-import { Tooltip, PropTypes } from './Tooltip';
 import { AddWalletIcon } from '../Icon';
 
+import { Tooltip } from './Tooltip';
+
 export default {
   title: 'Components/Tooltip',
   component: Tooltip,
   args: {
     content: 'I am a tooltip',
     side: 'top',
-    color: 'gray',
   },
   argTypes: {
     content: {
@@ -27,29 +29,13 @@ export default {
     color: {
       name: 'color',
       control: { type: 'select' },
-      options: [
-        'primary',
-        'error',
-        'warning',
-        'success',
-        'black',
-        'white',
-        'gray',
-      ],
-      defaultValue: 'gray',
+      options: ['primary', 'error', 'warning', 'success'],
     },
   },
 } as Meta<typeof Tooltip>;
 
 export const Main = (props: PropTypes) => (
-  <div
-    style={{
-      height: 300,
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-    }}
-  >
+  <div>
     <Tooltip {...props}>
       <AddWalletIcon size={24} />
     </Tooltip>

package/src/components/Tooltip/Tooltip.styles.ts

@@ -0,0 +1,9 @@
+import { styled } from '../../theme';
+import { Typography } from '../Typography';
+
+export const TooltipTypography = styled(Typography, {
+  borderRadius: '$md',
+  padding: '$5 $10',
+  boxShadow: '5px 5px 10px 0px rgba(0, 0, 0, 0.10)',
+  backgroundColor: '$neutral100',
+});