@rango-dev/ui 0.15.1-next.1 → 0.15.1-next.11

package/src/components/Typography/Typography.styles.tsx

@@ -0,0 +1,262 @@
+import { styled } from '../../theme';
+
+export const TypographyContainer = styled('span', {
+  display: 'inline-block',
+  variants: {
+    variant: {
+      display: {},
+      headline: {},
+      title: {},
+      label: {},
+      body: {},
+    },
+    size: {
+      large: {},
+      medium: {},
+      xmedium: {},
+      small: {},
+      xsmall: {},
+    },
+    align: {
+      center: {
+        textAlign: 'center',
+      },
+      left: {
+        textAlign: 'left',
+      },
+      right: {
+        textAlign: 'right',
+      },
+    },
+    noWrap: {
+      true: {
+        whiteSpace: 'nowrap',
+      },
+    },
+    ml: {
+      2: {
+        marginLeft: '$2',
+      },
+      4: {
+        marginLeft: '$4',
+      },
+      8: {
+        marginLeft: '$8',
+      },
+      12: {
+        marginLeft: '$12',
+      },
+    },
+    mt: {
+      2: {
+        marginTop: '$2',
+      },
+      4: {
+        marginTop: '$4',
+      },
+      8: {
+        marginTop: '$8',
+      },
+      12: {
+        marginTop: '$12',
+      },
+    },
+    mr: {
+      2: {
+        marginRight: '$2',
+      },
+      4: {
+        marginRight: '$4',
+      },
+      8: {
+        marginRight: '$8',
+      },
+      12: {
+        marginRight: '$12',
+      },
+    },
+    mb: {
+      2: {
+        marginBottom: '$2',
+      },
+      4: {
+        marginBottom: '$4',
+      },
+      8: {
+        marginBottom: '$8',
+      },
+      12: {
+        marginBottom: '$12',
+      },
+    },
+  },
+
+  compoundVariants: [
+    {
+      size: 'large',
+      variant: 'display',
+      css: {
+        fontSize: '$48',
+        fontWeight: '$semiBold',
+        lineHeight: '$64',
+      },
+    },
+    {
+      size: 'medium',
+      variant: 'display',
+      css: {
+        fontSize: '$40',
+        fontWeight: '$semiBold',
+        lineHeight: '$52',
+      },
+    },
+    {
+      size: 'small',
+      variant: 'display',
+      css: {
+        fontSize: '$36',
+        fontWeight: '$semiBold',
+        lineHeight: '$44',
+      },
+    },
+
+    {
+      size: 'large',
+      variant: 'headline',
+      css: {
+        fontSize: '$32',
+        fontWeight: '$semiBold',
+        lineHeight: '$40',
+      },
+    },
+    {
+      size: 'medium',
+      variant: 'headline',
+      css: {
+        fontSize: '$38',
+        fontWeight: '$semiBold',
+        lineHeight: '$36',
+      },
+    },
+    {
+      size: 'small',
+      variant: 'headline',
+      css: {
+        fontSize: '$22',
+        fontWeight: '$semiBold',
+        lineHeight: '$30',
+      },
+    },
+    {
+      size: 'xsmall',
+      variant: 'headline',
+      css: {
+        fontSize: '$20',
+        fontWeight: '$semiBold',
+        lineHeight: '$28',
+      },
+    },
+
+    {
+      size: 'large',
+      variant: 'title',
+      css: {
+        fontSize: '$22',
+        fontWeight: '$medium',
+        lineHeight: '$28',
+      },
+    },
+    {
+      size: 'medium',
+      variant: 'title',
+      css: {
+        fontSize: '$18',
+        fontWeight: '$medium',
+        lineHeight: '$26',
+      },
+    },
+    {
+      size: 'xmedium',
+      variant: 'title',
+      css: {
+        fontSize: '$16',
+        fontWeight: '$medium',
+        lineHeight: '$24',
+      },
+    },
+    {
+      size: 'small',
+      variant: 'title',
+      css: {
+        fontSize: '$14',
+        fontWeight: '$medium',
+        lineHeight: '$20',
+      },
+    },
+
+    {
+      size: 'large',
+      variant: 'label',
+      css: {
+        fontSize: '$14',
+        fontWeight: '$medium',
+        lineHeight: '$20',
+      },
+    },
+    {
+      size: 'medium',
+      variant: 'label',
+      css: {
+        fontSize: '$12',
+        fontWeight: '$medium',
+        lineHeight: '$16',
+      },
+    },
+    {
+      size: 'small',
+      variant: 'label',
+      css: {
+        fontSize: '$10',
+        fontWeight: '$medium',
+        lineHeight: '$16',
+      },
+    },
+
+    {
+      size: 'large',
+      variant: 'body',
+      css: {
+        fontSize: '$16',
+        fontWeight: '$regular',
+        lineHeight: '$24',
+      },
+    },
+    {
+      size: 'medium',
+      variant: 'body',
+      css: {
+        fontSize: '$14',
+        fontWeight: '$regular',
+        lineHeight: '$20',
+      },
+    },
+    {
+      size: 'small',
+      variant: 'body',
+      css: {
+        fontSize: '$12',
+        fontWeight: '$regular',
+        lineHeight: '$16',
+      },
+    },
+    {
+      size: 'xsmall',
+      variant: 'body',
+      css: {
+        fontSize: '$10',
+        fontWeight: '$regular',
+        lineHeight: '$12',
+      },
+    },
+  ],
+});

package/src/components/Typography/Typography.tsx

@@ -1,200 +1,9 @@
-import { CSSProperties } from '@stitches/react';
-import React, { PropsWithChildren } from 'react';
-import { styled } from '../../theme';
+import type { PropTypes } from './Typography.types';
+import type { PropsWithChildren } from 'react';
 
-const TypographyContainer = styled('span', {
-  margin: 0,
-  display: 'inline-block',
-  variants: {
-    variant: {
-      h1: {
-        fontSize: '$36',
-        fontWeight: '$700',
-        '@md': {
-          fontSize: '$40',
-        },
-        '@lg': {
-          fontSize: '$48',
-        },
-      },
-      h2: {
-        fontSize: '$32',
-        fontWeight: '$700',
-        '@md': {
-          fontSize: '$36',
-        },
-        '@lg': {
-          fontSize: '$40',
-        },
-      },
-      h3: {
-        fontSize: '$20',
-        fontWeight: '$700',
-        '@md': {
-          fontSize: '$24',
-        },
-        '@lg': {
-          fontSize: '$32',
-        },
-      },
-      h4: {
-        fontSize: '$18',
-        fontWeight: '$600',
-        '@md': {
-          fontSize: '$20',
-        },
-        '@lg': {
-          fontSize: '$24',
-        },
-      },
-      h5: {
-        fontSize: '$16',
-        fontWeight: '$600',
-      },
-      h6: {
-        fontSize: '$14',
-        fontWeight: '$500',
-        '@md': {
-          fontSize: '$16',
-        },
-        '@lg': {
-          fontSize: '$18',
-        },
-      },
-      title: {
-        fontSize: '$14',
-        fontWeight: '$500',
-        '@md': {
-          fontSize: '$15',
-        }
-      },
-      body1: {
-        fontSize: '$14',
-        fontWeight: '$400',
-        '@md': {
-          fontSize: '$16',
-        },
-        '@lg': {
-          fontSize: '$18',
-        },
-      },
-      body2: {
-        fontSize: '$14',
-        fontWeight: '$400',
-        // '@lg': {
-        //   fontSize: '$14',
-        // },
-      },
-      body3: {
-        fontSize: '$12',
-        fontWeight: '$400',
-      },
-      caption: {
-        fontSize: '$10',
-        fontWeight: '$400',
-        '@lg': {
-          fontSize: '$12',
-        },
-      },
-    },
-    align: {
-      center: {
-        textAlign: 'center',
-      },
-      left: {
-        textAlign: 'left',
-      },
-      right: {
-        textAlign: 'right',
-      },
-    },
-    noWrap: {
-      true: {
-        whiteSpace: 'nowrap',
-      },
-    },
-    ml: {
-      2: {
-        marginLeft: '$2',
-      },
-      4: {
-        marginLeft: '$4',
-      },
-      8: {
-        marginLeft: '$8',
-      },
-      12: {
-        marginLeft: '$12',
-      },
-    },
-    mt: {
-      2: {
-        marginTop: '$2',
-      },
-      4: {
-        marginTop: '$4',
-      },
-      8: {
-        marginTop: '$8',
-      },
-      12: {
-        marginTop: '$12',
-      },
-    },
-    mr: {
-      2: {
-        marginRight: '$2',
-      },
-      4: {
-        marginRight: '$4',
-      },
-      8: {
-        marginRight: '$8',
-      },
-      12: {
-        marginRight: '$12',
-      },
-    },
-    mb: {
-      2: {
-        marginBottom: '$2',
-      },
-      4: {
-        marginBottom: '$4',
-      },
-      8: {
-        marginBottom: '$8',
-      },
-      12: {
-        marginBottom: '$12',
-      },
-    },
-  },
-});
+import React from 'react';
 
-export interface PropTypes {
-  variant:
-    | 'h1'
-    | 'h2'
-    | 'h3'
-    | 'h4'
-    | 'h5'
-    | 'h6'
-    | 'title'
-    | 'body1'
-    | 'body2'
-    | 'body3'
-    | 'caption';
-  align?: 'center' | 'left' | 'right';
-  noWrap?: boolean;
-  mt?: 2 | 4 | 8 | 12;
-  mb?: 2 | 4 | 8 | 12;
-  ml?: 2 | 4 | 8 | 12;
-  mr?: 2 | 4 | 8 | 12;
-  className?: string;
-  style?: CSSProperties;
-  color?: string;
-}
+import { TypographyContainer } from './Typography.styles';
 
 export function Typography({
   children,
@@ -209,16 +18,12 @@ export function Typography({
     : {
         color: '$foreground',
       };
-
   return (
     <TypographyContainer
       className={`_typography _text ${className || ''}`}
       css={customCss}
-      {...props}
-    >
+      {...props}>
       {children}
     </TypographyContainer>
   );
 }
-
-Typography.toString = () => '._typography';

package/src/components/Typography/Typography.types.tsx

@@ -0,0 +1,28 @@
+import type { TypographyContainer } from './Typography.styles';
+import type * as Stitches from '@stitches/react';
+
+type BaseProps = Stitches.VariantProps<typeof TypographyContainer>;
+type BaseSizes = Exclude<BaseProps['size'], object>;
+type BaseVariants = Exclude<BaseProps['variant'], object>;
+type BaseAlign = Exclude<BaseProps['align'], object>;
+
+// eslint-disable-next-line @typescript-eslint/no-magic-numbers
+type margin = 2 | 4 | 8 | 12;
+
+export interface PropTypes {
+  variant: BaseVariants;
+  size: BaseSizes;
+  align?: BaseAlign;
+  noWrap?: boolean;
+  // @depreacted It will be removed
+  mt?: margin;
+  // @depreacted It will be removed
+  mb?: margin;
+  // @depreacted It will be removed
+  ml?: margin;
+  // @depreacted It will be removed
+  mr?: margin;
+  className?: string;
+  style?: Stitches.CSSProperties;
+  color?: string;
+}

package/src/components/VirtualizedList/VirtualizedList.tsx

@@ -1,27 +1,15 @@
-import React, { PropsWithChildren } from 'react';
-import { ReactElementType, VariableSizeList as List } from 'react-window';
-import InfiniteLoader from 'react-window-infinite-loader';
-import AutoSizer from 'react-virtualized-auto-sizer';
-import { CSSProperties } from '@stitches/react';
-
-export type VirtualizedListItem = ({
-  index,
-  style,
-}: {
-  index: number;
-  style: CSSProperties | undefined;
-}) => JSX.Element | null;
+import type { PropTypes } from './VirtualizedList.types';
+import type { CSSProperties } from '@stitches/react';
+import type { PropsWithChildren } from 'react';
 
-type PropTypes = {
-  itemCount: number;
-  hasNextPage: boolean;
-  loadNextPage: () => void;
-  Item: VirtualizedListItem;
-  innerElementType: ReactElementType | undefined;
-  size: number;
-};
+import React from 'react';
+import AutoSizer from 'react-virtualized-auto-sizer';
+import { VariableSizeList as List } from 'react-window';
+import InfiniteLoader from 'react-window-infinite-loader';
 
 export function VirtualizedList(props: PropsWithChildren<PropTypes>) {
+  // TODO:  react/prop-types problem
+  // eslint-disable-next-line react/prop-types
   const { itemCount, hasNextPage, loadNextPage, Item, innerElementType, size } =
     props;
 

package/src/components/VirtualizedList/VirtualizedList.types.ts

@@ -0,0 +1,19 @@
+import type { CSSProperties } from '@stitches/react';
+import type { ReactElementType } from 'react-window';
+
+export type VirtualizedListItem = ({
+  index,
+  style,
+}: {
+  index: number;
+  style: CSSProperties | undefined;
+}) => JSX.Element | null;
+
+export type PropTypes = {
+  itemCount: number;
+  hasNextPage: boolean;
+  loadNextPage: () => void;
+  Item: VirtualizedListItem;
+  innerElementType: ReactElementType | undefined;
+  size: number;
+};

package/src/components/VirtualizedList/index.ts

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

package/src/components/Wallet/ClickableWallet.stories.tsx

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Wallet } from './Wallet';
+import { WalletState } from './Wallet.types';
+
+const meta: Meta<typeof Wallet> = {
+  component: Wallet,
+};
+
+export default meta;
+type Story = StoryObj<typeof Wallet>;
+
+export const Main: Story = {
+  args: {
+    title: 'Trust Wallet',
+    image: 'https://api.rango.exchange/blockchains/zksync.png',
+    onClick: (type) => {
+      console.log('Clicked on', type);
+    },
+    type: 'wallet-connect-2',
+    state: WalletState.CONNECTED,
+  },
+};

package/src/components/Wallet/ClickableWallet.tsx

@@ -0,0 +1,71 @@
+import type { WalletPropTypes } from './Wallet.types';
+
+import { detectInstallLink } from '@rango-dev/wallets-shared';
+import React from 'react';
+
+import { Image } from '../common';
+import { Divider } from '../Divider';
+import { Skeleton } from '../Skeleton';
+import { Tooltip } from '../Tooltip';
+import { Typography } from '../Typography';
+
+import { makeInfo } from './Wallet.helpers';
+import {
+  LoadingButton,
+  Text,
+  Title,
+  WalletButton,
+  WalletImageContainer,
+} from './Wallet.styles';
+import { WalletState } from './Wallet.types';
+
+function Wallet(props: WalletPropTypes) {
+  const { title, type, image, onClick, isLoading } = props;
+  const info = makeInfo(props.state);
+
+  if (isLoading) {
+    return (
+      <LoadingButton>
+        <Skeleton variant="circular" width={35} height={35} />
+        <Divider size={12} />
+        <Skeleton variant="text" width={85} size="medium" />
+        <Divider size={4} />
+        <Skeleton variant="text" width={64} size="medium" />
+      </LoadingButton>
+    );
+  }
+
+  return (
+    <Tooltip content={info.tooltipText} side="top">
+      <WalletButton
+        disabled={props.state == WalletState.CONNECTING}
+        onClick={() => {
+          if (props.state === WalletState.NOT_INSTALLED) {
+            window.open(detectInstallLink(props.link), '_blank');
+          } else {
+            onClick(type);
+          }
+        }}>
+        <WalletImageContainer>
+          <Image src={image} size={35} />
+        </WalletImageContainer>
+
+        <Text>
+          <Title variant="label" size="medium" noWrap={false}>
+            {title}
+          </Title>
+
+          <Typography
+            variant="body"
+            size="xsmall"
+            noWrap={false}
+            color={info.color}>
+            {info.description}
+          </Typography>
+        </Text>
+      </WalletButton>
+    </Tooltip>
+  );
+}
+
+export default Wallet;

package/src/components/Wallet/Content.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+
+import { ContentProps } from './Wallet.types';
+import { Typography } from '../Typography';
+import { Image } from '../common';
+import { Text, WalletImageContainer } from './Wallet.styles';
+
+function Content(props: ContentProps) {
+  const { image, title, description, descriptionColor = 'neutral600' } = props;
+  return (
+    <>
+      <WalletImageContainer>
+        <Image src={image} size={35} />
+      </WalletImageContainer>
+
+      <Text>
+        <Typography variant="label" size="medium" noWrap={false}>
+          {title}
+        </Typography>
+
+        <Typography
+          variant="body"
+          size="xsmall"
+          noWrap={false}
+          color={descriptionColor}>
+          {description}
+        </Typography>
+      </Text>
+    </>
+  );
+}
+
+export default Content;