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

package/src/components/Modal/Modal.tsx

@@ -1,79 +1,124 @@
-import { CSS } from '@stitches/react';
-import React, { useEffect } from 'react';
+import type { PropTypes } from './Modal.types';
+import type { PropsWithChildren } from 'react';
+
+import React, { useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
-import { config, styled } from '../../theme';
-import { CloseIcon } from '../Icon/CloseIcon';
-import { Typography } from '../Typography';
 
-export interface PropTypes {
-  title: string;
-  open: boolean;
-  onClose: () => void;
-  content: React.ReactNode;
-  action?: React.ReactNode;
-  containerStyle?: CSS<typeof config>;
-}
+import { CloseIcon } from '../../icons';
+import { BottomLogo } from '../BottomLogo';
+import { Divider } from '../Divider';
+import { IconButton } from '../IconButton/IconButton';
+import { Typography } from '../Typography';
 
-const BackDrop = styled('div', {
-  position: 'fixed',
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  top: '0',
-  left: '0',
-  width: '100vw',
-  height: '100vh',
-  backgroundColor: 'rgba(0,0,0,.1)',
-  zIndex: 10,
-});
+import {
+  BackDrop,
+  Content,
+  Flex,
+  Footer,
+  ModalContainer,
+  ModalHeader,
+} from './Modal.styles';
 
-const ModalContainer = styled('div', {
-  backgroundColor: '$background',
-  borderRadius: '$10',
-  padding: '$16 $16',
-  display: 'flex',
-  flexDirection: 'column',
-  zIndex: 20,
-});
-const Row = styled('div', {
-  display: 'flex',
-  alignItems: 'center',
-});
-const ModalHeader = styled('div', {
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  position: 'relative',
-  marginBottom: '$16',
-});
+const CLOSED_DELAY = 600;
+const OPEN_DELAY = 10;
 
-export function Modal(props: PropTypes) {
-  const { title, content, open, onClose, containerStyle, action } = props;
+export function Modal(props: PropsWithChildren<PropTypes>) {
+  const {
+    title,
+    open,
+    onClose,
+    containerStyle,
+    anchor = 'bottom',
+    container = document.body,
+    prefix,
+    header,
+    dismissible = true,
+    children,
+    suffix,
+    footer,
+    hasLogo = true,
+  } = props;
+  const [active, setActive] = useState(false);
+  const [isMount, setIsMount] = useState(false);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const handleBackDropClick = (event: React.MouseEvent<HTMLDivElement>) => {
-    if (event.target === event.currentTarget) onClose();
+    if (event.target === event.currentTarget && dismissible) {
+      onClose();
+    }
   };
   useEffect(() => {
-    if (open) document.body.style.overflow = 'hidden';
-    else document.body.style.overflow = 'unset';
-  }, [open]);
+    if (container) {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+      if (open) {
+        setIsMount(true);
+        container.style.overflow = 'hidden';
+        timeoutRef.current = setTimeout(() => {
+          setActive(true);
+        }, OPEN_DELAY);
+      } else {
+        setActive(false);
+        timeoutRef.current = setTimeout(() => {
+          setIsMount(false);
+          container.style.overflow = 'unset';
+        }, CLOSED_DELAY);
+      }
+    }
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, [open, container]);
+
   return (
     <>
-      {open &&
+      {isMount &&
+        container &&
         createPortal(
-          <BackDrop onClick={handleBackDropClick}>
-            <ModalContainer css={containerStyle}>
-              <ModalHeader>
-                <Typography variant="h4">{title}</Typography>
-                <Row>
-                  {action}
-                  <CloseIcon size={24} onClick={onClose} />
-                </Row>
-              </ModalHeader>
-              {content}
+          <BackDrop
+            active={active}
+            onClick={handleBackDropClick}
+            anchor={anchor}>
+            <ModalContainer
+              active={active}
+              css={containerStyle}
+              anchor={anchor}>
+              {header ?? (
+                <ModalHeader noTitle={!title && dismissible && !prefix}>
+                  {prefix}
+                  {title && (
+                    <Typography variant="title" size="small">
+                      {title}
+                    </Typography>
+                  )}
+                  <Flex>
+                    {suffix}
+                    {dismissible && (
+                      <IconButton onClick={onClose} variant="ghost">
+                        <CloseIcon color="gray" size={14} />
+                      </IconButton>
+                    )}
+                  </Flex>
+                </ModalHeader>
+              )}
+              <Content>{children}</Content>
+              {(hasLogo || footer) && (
+                <Footer>
+                  <div className="footer__content">{footer}</div>
+                  {hasLogo && (
+                    <div className="footer__logo">
+                      <Divider size={12} />
+                      <BottomLogo />
+                    </div>
+                  )}
+                </Footer>
+              )}
             </ModalContainer>
           </BackDrop>,
-          document.body,
+          container
         )}
     </>
   );

package/src/components/Modal/Modal.types.ts

@@ -0,0 +1,21 @@
+import type { BackDrop } from './Modal.styles';
+import type { config } from '../../theme';
+import type * as Stitches from '@stitches/react';
+
+type BaseProps = Stitches.VariantProps<typeof BackDrop>;
+type BaseAnchor = Exclude<BaseProps['anchor'], object>;
+
+export interface PropTypes {
+  title?: string;
+  open: boolean;
+  onClose: () => void;
+  anchor?: BaseAnchor;
+  dismissible?: boolean;
+  header?: React.ReactNode;
+  prefix?: React.ReactNode;
+  suffix?: React.ReactNode;
+  container?: HTMLElement;
+  containerStyle?: Stitches.CSS<typeof config>;
+  footer?: React.ReactNode;
+  hasLogo?: boolean;
+}

package/src/components/Modal/index.ts

@@ -1 +1,2 @@
 export { Modal } from './Modal';
+export { ModalHeader } from './Modal.styles';

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

@@ -0,0 +1,17 @@
+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/NotFound/NotFound.styles.ts

@@ -0,0 +1,8 @@
+import { styled } from '../../theme';
+
+export const Container = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  flexDirection: 'column',
+});

package/src/components/NotFound/NotFound.tsx

@@ -0,0 +1,24 @@
+import type { PropTypes } from './NotFound.types';
+
+import React from 'react';
+
+import { SearchIcon } from '../../icons';
+import { Divider } from '../Divider';
+import { Typography } from '../Typography';
+
+import { Container } from './NotFound.styles';
+
+export function NotFound(props: PropTypes) {
+  return (
+    <Container>
+      <SearchIcon color="secondary" size={26} />
+      <Divider size={4} />
+      <Typography variant="title" size="medium">
+        {props.title}
+      </Typography>
+      <Typography variant="body" size="medium" color="neutral900">
+        {props.description}
+      </Typography>
+    </Container>
+  );
+}

package/src/components/NotFound/NotFound.types.ts

@@ -0,0 +1,4 @@
+export type PropTypes = {
+  title: string;
+  description?: string;
+};

package/src/components/NotFound/index.tsx

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

package/src/components/PercentageChange/PercentageChange.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import { Typography } from '..';
 
 interface PropTypes {
@@ -12,7 +13,7 @@ export function PercentageChange(props: PropTypes) {
   return (
     <>
       {showPercentageChange && (
-        <Typography variant="caption" color="$error500">
+        <Typography variant="title" size="small" color="$error500">
           {`(${percentageChange}%)`}
         </Typography>
       )}

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

@@ -0,0 +1,64 @@
+import type { PropTypes } from './Popover.types';
+import type { Meta } from '@storybook/react';
+
+import React from 'react';
+
+import { NotificationsIcon } from '../../icons';
+import { Button } from '../Button';
+import { AddWalletIcon } from '../Icon';
+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>
+        <AddWalletIcon size={24} />
+      </Button>
+    </Popover>
+    <Popover {...props}>
+      <Button>
+        <NotificationsIcon size={24} />
+      </Button>
+    </Popover>
+  </div>
+);

package/src/components/Popover/Popover.styles.ts

@@ -0,0 +1,15 @@
+import * as RadixPopover from '@radix-ui/react-popover';
+
+import { styled } from '../../theme';
+
+export const PopoverContainer = styled(RadixPopover.Content, {
+  borderRadius: '$sm',
+  filter: 'drop-shadow(0px 5px 20px rgba(130, 130, 130, 0.20))',
+  backgroundColor: '$neutral100',
+});
+
+export const PopoverArrow = styled(RadixPopover.Arrow, {
+  fill: '$neutral100',
+  width: '$16',
+  height: '$8',
+});

package/src/components/Popover/Popover.tsx

@@ -0,0 +1,57 @@
+import type { ContentType, PropTypes, Ref } from './Popover.types';
+import type { PropsWithChildren } from 'react';
+
+import * as RadixPopover from '@radix-ui/react-popover';
+import React from 'react';
+
+import { PopoverArrow, PopoverContainer } from './Popover.styles';
+
+const DEFAULT_SIDE_OFFSET = 0;
+const DEFAULT_ALIGN_OFFSET = 0;
+
+export const PopoverContentComponent = (
+  props: PropsWithChildren<ContentType>,
+  forwardedRef: Ref
+) => {
+  const { container, children, ...rest } = props;
+  return (
+    <RadixPopover.Portal container={container}>
+      <PopoverContainer {...rest} ref={forwardedRef}>
+        {children}
+        <PopoverArrow />
+      </PopoverContainer>
+    </RadixPopover.Portal>
+  );
+};
+
+const PopoverContent = React.forwardRef(PopoverContentComponent);
+PopoverContent.displayName = 'PopoverContent';
+
+export function Popover(props: PropsWithChildren<PropTypes>) {
+  const {
+    children,
+    content,
+    side = 'bottom',
+    sideOffset = DEFAULT_SIDE_OFFSET,
+    alignOffset = DEFAULT_ALIGN_OFFSET,
+    align = 'center',
+    collisionBoundary = [],
+    collisionPadding = 0,
+    container = document.body,
+  } = props;
+  return (
+    <RadixPopover.Root>
+      <RadixPopover.Trigger asChild>{children}</RadixPopover.Trigger>
+      <PopoverContent
+        align={align}
+        alignOffset={alignOffset}
+        collisionBoundary={collisionBoundary}
+        collisionPadding={collisionPadding}
+        side={side}
+        sideOffset={sideOffset}
+        container={container}>
+        {content}
+      </PopoverContent>
+    </RadixPopover.Root>
+  );
+}

package/src/components/Popover/Popover.types.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+
+export type Ref =
+  | ((instance: HTMLInputElement | null) => void)
+  | React.RefObject<HTMLInputElement>
+  | null
+  | undefined;
+
+type Side = 'top' | 'right' | 'bottom' | 'left';
+
+export interface ContentType {
+  side?: Side;
+  sideOffset?: number;
+  alignOffset?: number;
+  align?: 'center' | 'start' | 'end';
+  collisionBoundary?: Element | null | Array<Element | null>;
+  collisionPadding?: number | Partial<Record<Side, number>>;
+  container?: HTMLElement;
+}
+
+export type PropTypes = ContentType & {
+  content: ReactNode;
+};

package/src/components/Popover/index.ts

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

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

@@ -0,0 +1,21 @@
+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/PriceImpact/PriceImpact.styles.ts

@@ -0,0 +1,7 @@
+import { styled } from '../../theme';
+
+export const Container = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});

package/src/components/PriceImpact/PriceImpact.tsx

@@ -0,0 +1,48 @@
+import type { PriceImpactProps } from './PriceImpact.types';
+
+import React from 'react';
+
+import { Typography } from '..';
+
+import { Container } from './PriceImpact.styles';
+
+export function PriceImpact(props: PriceImpactProps) {
+  const { size, outputUsdValue, percentageChange, warningLevel, error } = props;
+
+  let percentageChangeColor = '$neutral900';
+  if (!outputUsdValue || warningLevel === 'low') {
+    percentageChangeColor = '$warning500';
+  } else if (warningLevel === 'high') {
+    percentageChangeColor = '$error500';
+  }
+
+  return (
+    <Container>
+      {outputUsdValue && (
+        <Typography
+          size={size === 'small' ? 'small' : 'medium'}
+          variant="body"
+          color={size !== 'small' ? '$neutral800' : '$neutral900'}>
+          {`~$${outputUsdValue}`}
+        </Typography>
+      )}
+      {((outputUsdValue && percentageChange) || !outputUsdValue) && (
+        <Typography
+          size={size === 'small' ? 'small' : 'medium'}
+          variant="body"
+          ml={4}
+          color={percentageChangeColor}>
+          {outputUsdValue &&
+            percentageChange &&
+            `(${
+              percentageChange.includes('-')
+                ? percentageChange
+                : `-${percentageChange}`
+            }${percentageChange ? '%' : '-'})`}
+
+          {!outputUsdValue && error}
+        </Typography>
+      )}
+    </Container>
+  );
+}

package/src/components/PriceImpact/PriceImpact.types.ts

@@ -0,0 +1,9 @@
+export type PriceImpactWarningLevel = 'low' | 'high' | undefined;
+
+export type PriceImpactProps = {
+  size: 'small' | 'large';
+  outputUsdValue?: string;
+  error?: string;
+  percentageChange?: string | null;
+  warningLevel?: PriceImpactWarningLevel;
+};

package/src/components/PriceImpact/index.ts

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

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

@@ -1,28 +1,21 @@
+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 { Meta } from '@storybook/react';
-import { PropTypes, Radio } from './Radio';
+
+import { Radio } from './Radio';
 
 export default {
   title: 'Components/Radio',
   component: Radio,
   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' },
-      ],
-    },
+    value: 'test',
   },
 } as Meta<typeof Radio>;
 
-export const Main = (args: PropTypes) => <Radio {...args} />;
+export const Main = (args: PropTypes) => (
+  <RadioRoot>
+    <Radio {...args} />
+  </RadioRoot>
+);

package/src/components/Radio/Radio.styles.tsx

@@ -0,0 +1,39 @@
+import * as Radio from '@radix-ui/react-radio-group';
+
+import { darkTheme, styled } from '../../theme';
+
+export const StyledItem = styled(Radio.Item, {
+  padding: '0',
+  width: '16px',
+  height: '16px',
+  borderRadius: '100%',
+  cursor: 'pointer',
+  backgroundColor: 'transparent',
+  border: '1px solid $neutral800',
+
+  '&[data-state="checked"]': {
+    $$color: '$colors$secondary500',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$secondary400',
+    },
+    backgroundColor: '$$color',
+    borderColor: '$$color',
+  },
+});
+
+export const StyledIndicator = styled(Radio.Indicator, {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: '100%',
+  height: '100%',
+  position: 'relative',
+  '&::after': {
+    content: '',
+    display: 'block',
+    width: '8px',
+    height: '8px',
+    borderRadius: '50%',
+    backgroundColor: '$background',
+  },
+});