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

package/src/components/Button/Button.tsx

@@ -1,421 +1,49 @@
-import { CSSProperties } from '@stitches/react';
-import React, { PropsWithChildren, HTMLAttributes } from 'react';
-import { darkTheme, styled } from '../../theme';
-import { Spinner } from '../Spinner';
-import { Typography } from '../Typography';
-
-const ButtonContainer = styled('button', {
-  borderRadius: '$5',
-  fontSize: '$16',
-  fontWeight: '$400',
-  cursor: 'pointer',
-  padding: '0 $12',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  transition: 'all 0.35s',
-  border: '0',
-
-  '&:active': {
-    transform: 'scale(0.95)',
-  },
-
-  variants: {
-    align: {
-      start: {
-        display: 'flex',
-        width: '100%',
-      },
-      grow: {
-        display: 'flex',
-        width: '100%',
-      },
-    },
-    size: {
-      compact: {},
-      free: {},
-      small: {
-        height: '$32',
-      },
-      medium: {
-        height: '$40',
-      },
-      large: {
-        height: '$48',
-      },
-    },
-    variant: {
-      contained: {
-        backgroundColor: '$neutral100',
-        color: '$foreground',
-        border: 0,
-        '&:hover': {
-          backgroundColor: '$neutral200',
-        },
-        '&:disabled': {
-          background: '$neutral400',
-        },
-        '&:disabled:hover': {
-          background: '$neutral400',
-          transform: 'unset',
-        },
-      },
-      outlined: {
-        backgroundColor: '$surface',
-        border: 1,
-        borderStyle: 'solid',
-        borderColor: '$neutral400',
-        color: '$foreground',
-        '&:hover': {
-          borderColor: '$neutral600',
-        },
-        '&:disabled': {
-          borderColor: '$neutral400',
-          color: '$neutral400',
-        },
-      },
-      ghost: {
-        color: '$foreground',
-        '&:hover': {
-          backgroundColor: '$neutral200',
-        },
-        '&:disabled': {
-          color: '$neutral400',
-        },
-        background: 'transparent',
-        border: 0,
+import type { PropTypes, Ref } from './Button.types';
+import type { PropsWithChildren } from 'react';
 
-        [`& ${Typography}`]: {
-          color: 'inherit',
-        },
-      },
-    },
-    fullWidth: {
-      true: {
-        width: '100%',
-      },
-    },
-    loading: {
-      true: {},
-    },
-    type: {
-      primary: {},
-      error: {},
-      warning: {},
-      success: {},
-    },
-  },
+import React from 'react';
 
-  compoundVariants: [
-    {
-      type: 'primary',
-      variant: 'contained',
-      css: {
-        background: '$primary',
-        color: '$white',
-        '&:hover': {
-          background: '$primary700',
-        },
-        '&:visited': {
-          background: '$primary900',
-        },
-        '&:focus': {
-          background: '$primary600',
-        },
-      },
-    },
-    {
-      type: 'primary',
-      variant: 'outlined',
-      css: {
-        color: '$primary',
-        borderColor: '$primary',
-        '&:hover': {
-          color: '$primary700',
-          borderColor: '$primary700',
-        },
-        '&:visited': {
-          color: '$primary900',
-          borderColor: '$primary900',
-        },
-        '&:focus': {
-          color: '$primary600',
-          borderColor: '$primary600',
-        },
-      },
-    },
-    {
-      type: 'primary',
-      variant: 'ghost',
-      css: {
-        color: '$primary',
-        '&:hover': {
-          color: '$primary700',
-        },
-        '&:visited': { color: '$primary900' },
-        '&:focus': {
-          color: '$primary600',
-        },
-      },
-    },
-    {
-      type: 'error',
-      variant: 'contained',
-      css: {
-        background: '$error',
-        $$color: '$colors$background',
-        [`.${darkTheme} &`]: {
-          $$color: '$colors$foreground',
-        },
-        color: '$$color',
-        '&:hover': {
-          background: '$error300',
-        },
-        '&:visited': {
-          background: '$error700',
-        },
-        '&:focus': {
-          background: '$error700',
-        },
-      },
-    },
-    {
-      type: 'error',
-      variant: 'outlined',
-      css: {
-        color: '$error',
-        borderColor: '$error',
-        '&:hover': {
-          color: '$error300',
-          borderColor: '$error300',
-        },
-        '&:visited': {
-          color: '$error700',
-          borderColor: '$error700',
-        },
-        '&:focus': {
-          color: '$error700',
-          borderColor: '$error700',
-        },
-      },
-    },
-    {
-      type: 'error',
-      variant: 'ghost',
-      css: {
-        color: '$error',
-        '&:hover': {
-          color: '$error300',
-        },
-        '&:visited': {
-          color: '$error700',
-        },
-        '&:focus': {
-          color: '$error700',
-        },
-      },
-    },
-    {
-      type: 'warning',
-      variant: 'contained',
-      css: {
-        background: '$warning',
-        $$color: '$colors$background',
-        [`.${darkTheme} &`]: {
-          $$color: '$colors$foreground',
-        },
-        color: '$$color',
-        '&:hover': {
-          background: '$warning300',
-        },
-        '&:visited': {
-          background: '$warning700',
-        },
-        '&:focus': {
-          background: '$warning700',
-        },
-      },
-    },
-    {
-      type: 'warning',
-      variant: 'outlined',
-      css: {
-        color: '$warning',
-        borderColor: '$warning',
-        '&:hover': {
-          color: '$warning300',
-          borderColor: '$warning300',
-        },
-        '&:visited': {
-          color: '$warning700',
-          borderColor: '$warning700',
-        },
-        '&:focus': {
-          color: '$warning700',
-          borderColor: '$warning700',
-        },
-      },
-    },
-    {
-      type: 'warning',
-      variant: 'ghost',
-      css: {
-        color: '$warning',
-        '&:hover': {
-          color: '$warning300',
-        },
-        '&:visited': {
-          color: '$warning700',
-        },
-        '&:focus': {
-          color: '$warning700',
-        },
-      },
-    },
-    {
-      type: 'success',
-      variant: 'contained',
-      css: {
-        background: '$success',
-        $$color: '$colors$background',
-        [`.${darkTheme} &`]: {
-          $$color: '$colors$foreground',
-        },
-        color: '$$color',
-        '&:hover': {
-          background: '$success300',
-        },
-        '&:visited': {
-          background: '$success700',
-        },
-        '&:focus': {
-          background: '$success700',
-        },
-      },
-    },
-    {
-      type: 'success',
-      variant: 'outlined',
-      css: {
-        color: '$success',
-        borderColor: '$success',
-        '&:hover': {
-          color: '$success300',
-          borderColor: '$success300',
-        },
-        '&:visited': {
-          color: '$success700',
-          borderColor: '$success700',
-        },
-        '&:focus': {
-          color: '$success700',
-          borderColor: '$success700',
-        },
-      },
-    },
-    {
-      type: 'success',
-      variant: 'ghost',
-      css: {
-        color: '$success',
-        '&:hover': {
-          color: '$success300',
-        },
-        '&:visited': {
-          color: '$success700',
-        },
-        '&:focus': {
-          color: '$success700',
-        },
-      },
-    },
-    {
-      size: 'compact',
-      css: {
-        padding: '$2 $4',
-        fontSize: '$12',
-      },
-    },
-  ],
-  defaultVariants: {
-    size: 'medium',
-    variant: 'contained',
-  },
-});
+import { Spinner } from '../Spinner';
 
-const Content = styled('div', {
-  flex: 1,
-  variants: {
-    align: {
-      start: {
-        textAlign: 'left',
-      },
-      grow: {
-        textAlign: 'center',
-      },
-    },
-    ml: {
-      true: {
-        marginLeft: '$8',
-      },
-    },
-    mr: {
-      true: {
-        marginRight: '$8',
-      },
-    },
-    flexContent: {
-      true: {
-        display: 'flex',
-        alignItems: 'center',
-      },
-    },
-  },
-});
+import { ButtonBase, Content } from './Button.styles';
+import Ripple from './Ripple';
 
-export interface PropTypes
-  extends Omit<HTMLAttributes<HTMLButtonElement>, 'prefix'> {
-  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-  size?: 'small' | 'medium' | 'large' | 'compact' | 'free';
-  variant?: 'contained' | 'outlined' | 'ghost';
-  type?: 'primary' | 'error' | 'warning' | 'success';
-  prefix?: React.ReactNode;
-  suffix?: React.ReactNode;
-  align?: 'start' | 'grow';
-  loading?: boolean;
-  fullWidth?: boolean;
-  disabled?: boolean;
-  style?: CSSProperties;
-  flexContent?: boolean;
-}
+function ButtonComponent(props: PropsWithChildren<PropTypes>, ref?: Ref) {
+  const {
+    children,
+    loading,
+    disabled,
+    prefix,
+    suffix,
+    onClick,
+    ...otherProps
+  } = props;
 
-export function Button({
-  children,
-  loading,
-  disabled,
-  prefix,
-  suffix,
-  align,
-  flexContent,
-  ...props
-}: PropsWithChildren<PropTypes>) {
-  const isDisabled = loading || disabled;
   return (
-    <ButtonContainer disabled={isDisabled} {...props} align={align}>
-      {prefix}
-      {children && (
-        <Content
-          align={align}
-          ml={!!prefix}
-          mr={!!suffix && !loading}
-          flexContent={flexContent}
-          className="_text"
-        >
-          {children}
-        </Content>
+    <ButtonBase
+      disabled={!loading && disabled}
+      onClick={loading || disabled ? undefined : onClick}
+      {...otherProps}
+      ref={ref}>
+      {loading ? (
+        <Spinner css={{ width: '$24', height: '$24' }} />
+      ) : (
+        <>
+          {prefix}
+          {children && (
+            <Content pl={!!prefix} pr={!!suffix} className="_text">
+              {children}
+            </Content>
+          )}
+          {suffix}
+        </>
       )}
-      {loading && <Spinner size={16} color={props.type} />}
-      {suffix}
-    </ButtonContainer>
+      {!disabled && !loading && <Ripple />}
+    </ButtonBase>
   );
 }
+
+const Button = React.forwardRef(ButtonComponent);
+Button.displayName = 'Button';
+
+export { Button };

package/src/components/Button/Button.types.tsx

@@ -0,0 +1,27 @@
+import type { ButtonBase } from './Button.styles';
+import type * as Stitches from '@stitches/react';
+import type { HTMLAttributes } from 'react';
+
+type BaseProps = Stitches.VariantProps<typeof ButtonBase>;
+type BaseSizes = Exclude<BaseProps['size'], object>;
+type BaseVariants = Exclude<BaseProps['variant'], object>;
+type BaseTypes = Exclude<BaseProps['type'], object>;
+
+export type Ref =
+  | ((instance: HTMLButtonElement | null) => void)
+  | React.RefObject<HTMLButtonElement>
+  | null
+  | undefined;
+
+type ButtonElement = Omit<HTMLAttributes<HTMLButtonElement>, 'prefix'>;
+
+export type PropTypes = ButtonElement & {
+  size?: BaseSizes;
+  variant?: BaseVariants;
+  type?: BaseTypes;
+  loading?: boolean;
+  disabled?: boolean;
+  prefix?: React.ReactNode;
+  suffix?: React.ReactNode;
+  fullWidth?: boolean;
+};

package/src/components/Button/Ripple.tsx

@@ -0,0 +1,82 @@
+import React, { useEffect, useState } from 'react';
+
+import { RippleContainer } from './Button.styles';
+
+const DURATION = 850;
+
+const useDebouncedRippleCleanUp = (
+  rippleCount: number,
+  duration: number,
+  cleanUpFunction: () => void
+) => {
+  useEffect(() => {
+    let bounce: ReturnType<typeof setTimeout> | null = null;
+    if (rippleCount > 0) {
+      if (bounce) {
+        clearTimeout(bounce);
+      }
+
+      bounce = setTimeout(() => {
+        cleanUpFunction();
+        if (bounce) {
+          clearTimeout(bounce);
+        }
+      }, duration);
+    }
+
+    return () => {
+      if (bounce) {
+        clearTimeout(bounce);
+      }
+    };
+  }, [rippleCount, duration, cleanUpFunction]);
+};
+
+const Ripple = ({ duration = DURATION }: { duration?: number }) => {
+  const [rippleArray, setRippleArray] = useState<
+    { x: number; y: number; size: number }[]
+  >([]);
+
+  useDebouncedRippleCleanUp(rippleArray.length, duration, () => {
+    setRippleArray([]);
+  });
+
+  const addRipple = (event: React.MouseEvent<HTMLDivElement>) => {
+    const rippleContainer = event.currentTarget.getBoundingClientRect();
+    const size =
+      rippleContainer.width > rippleContainer.height
+        ? rippleContainer.width
+        : rippleContainer.height;
+    const x = event.pageX - rippleContainer.x - size / 2;
+    const y = event.pageY - rippleContainer.y - size / 2;
+    const newRipple = {
+      x,
+      y,
+      size,
+    };
+
+    setRippleArray([...rippleArray, newRipple]);
+  };
+
+  return (
+    <RippleContainer onMouseDown={addRipple}>
+      {rippleArray.length > 0 &&
+        rippleArray.map((ripple, index) => {
+          const key = 'span' + index;
+          return (
+            <span
+              key={key}
+              style={{
+                top: ripple.y,
+                left: ripple.x,
+                width: ripple.size,
+                height: ripple.size,
+              }}
+            />
+          );
+        })}
+    </RippleContainer>
+  );
+};
+
+export default Ripple;

package/src/components/ChainToken/ChainToken.constants.ts

@@ -0,0 +1,9 @@
+import type { PropTypes } from './ChainToken.types';
+
+export const tokenChainSizeMap: {
+  [key in PropTypes['size']]: { token: number; chain: number };
+} = {
+  small: { token: 17, chain: 10 },
+  medium: { token: 27, chain: 10 },
+  large: { token: 30, chain: 15 },
+};

package/src/components/ChainToken/ChainToken.stories.tsx

@@ -0,0 +1,20 @@
+import type { PropTypes } from './ChainToken.types';
+import type { Meta } from '@storybook/react';
+
+import React from 'react';
+
+import { ChainToken } from './ChainToken';
+
+const meta: Meta<typeof ChainToken> = {
+  title: 'Components/Chain Token',
+  component: ChainToken,
+  args: {
+    chainImage: 'https://api.rango.exchange/blockchains/bsc.svg',
+    tokenImage: 'https://api.rango.exchange/tokens/ETH/BNB.png',
+    size: 'medium',
+  },
+};
+
+export default meta;
+
+export const Main = (args: PropTypes) => <ChainToken {...args} />;

package/src/components/ChainToken/ChainToken.styles.ts

@@ -0,0 +1,31 @@
+import { styled } from '../../theme';
+import { Image } from '../common';
+
+export const Container = styled('div', {
+  position: 'relative',
+  display: 'flex',
+  [`& ${Image}`]: { borderRadius: '100%' },
+});
+
+export const ChainImageContainer = styled('div', {
+  position: 'absolute',
+  border: '0.5px solid $background',
+  borderRadius: '100%',
+  backgroundColor: '$background',
+  variants: {
+    size: {
+      small: {
+        right: '-3px',
+        bottom: '-3px',
+      },
+      medium: {
+        right: '0',
+        bottom: '0',
+      },
+      large: {
+        right: '-5px',
+        bottom: '-5px',
+      },
+    },
+  },
+});

package/src/components/ChainToken/ChainToken.tsx

@@ -0,0 +1,58 @@
+import type { PropTypes } from './ChainToken.types';
+
+import React from 'react';
+
+import { Image } from '../common';
+import { Skeleton } from '../Skeleton';
+
+import { tokenChainSizeMap } from './ChainToken.constants';
+import { ChainImageContainer, Container } from './ChainToken.styles';
+
+export const ChainToken: React.FC<PropTypes> = (props) => {
+  const { tokenImage, chainImage, size, useAsPlaceholder, loading } = props;
+  return (
+    <Container
+      css={
+        loading
+          ? {}
+          : {
+              width: tokenChainSizeMap[size].token,
+              height: tokenChainSizeMap[size].token,
+            }
+      }>
+      {loading ? (
+        <Skeleton
+          variant="circular"
+          height={tokenChainSizeMap[size].token}
+          width={tokenChainSizeMap[size].token}
+        />
+      ) : (
+        <Image
+          size={tokenChainSizeMap[size].token}
+          src={tokenImage}
+          type="circular"
+          {...(useAsPlaceholder && { useAsPlaceholder })}
+        />
+      )}
+      <ChainImageContainer size={size}>
+        {loading ? (
+          <Skeleton
+            variant="circular"
+            height={tokenChainSizeMap[size].chain}
+            width={tokenChainSizeMap[size].chain}
+          />
+        ) : (
+          <Image
+            size={tokenChainSizeMap[size].chain}
+            src={chainImage}
+            type="circular"
+            {...(useAsPlaceholder && {
+              useAsPlaceholder,
+              backgroundColor: '$secondary300',
+            })}
+          />
+        )}
+      </ChainImageContainer>
+    </Container>
+  );
+};

package/src/components/ChainToken/ChainToken.types.ts

@@ -0,0 +1,13 @@
+import type { ChainImageContainer } from './ChainToken.styles';
+import type * as Stitches from '@stitches/react';
+
+type BaseProps = Stitches.VariantProps<typeof ChainImageContainer>;
+type BaseSizes = Exclude<BaseProps['size'], object>;
+
+export type PropTypes = {
+  tokenImage: string;
+  chainImage: string;
+  size: NonNullable<BaseSizes>;
+  useAsPlaceholder?: boolean;
+  loading?: boolean;
+};

package/src/components/ChainToken/index.ts

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