@rango-dev/ui 0.28.2-next.0 → 0.28.2-next.10

package/src/components/Modal/Modal.tsx

@@ -27,7 +27,7 @@ export function Modal(props: PropsWithChildren<PropTypes>) {
     title,
     open,
     onClose,
-    containerStyle,
+    styles,
     anchor = 'bottom',
     container = document.body,
     prefix,
@@ -46,6 +46,8 @@ export function Modal(props: PropsWithChildren<PropTypes>) {
   const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const handleBackDropClick = (event: React.MouseEvent<HTMLDivElement>) => {
+    event.stopPropagation();
+
     if (event.target === event.currentTarget && dismissible) {
       onClose();
     }
@@ -58,15 +60,25 @@ export function Modal(props: PropsWithChildren<PropTypes>) {
       if (open) {
         setIsMount(true);
         container.style.overflow = 'hidden';
-        timeoutRef.current = setTimeout(() => {
-          setActive(true);
-        }, transitionDuration?.enter || OPEN_DELAY);
+        timeoutRef.current = setTimeout(
+          () => {
+            setActive(true);
+          },
+          typeof transitionDuration?.enter !== 'undefined'
+            ? transitionDuration?.enter
+            : OPEN_DELAY
+        );
       } else {
         setActive(false);
-        timeoutRef.current = setTimeout(() => {
-          setIsMount(false);
-          container.style.removeProperty('overflow');
-        }, transitionDuration?.exit || CLOSED_DELAY);
+        timeoutRef.current = setTimeout(
+          () => {
+            setIsMount(false);
+            container.style.removeProperty('overflow');
+          },
+          typeof transitionDuration?.exit !== 'undefined'
+            ? transitionDuration?.exit
+            : CLOSED_DELAY
+        );
       }
     }
     return () => {
@@ -84,10 +96,11 @@ export function Modal(props: PropsWithChildren<PropTypes>) {
           <BackDrop
             active={active}
             onClick={handleBackDropClick}
-            anchor={anchor}>
+            anchor={anchor}
+            css={styles?.root}>
             <ModalContainer
               active={active}
-              css={containerStyle}
+              css={styles?.container}
               anchor={anchor}>
               {header ?? (
                 <ModalHeader noTitle={!title && dismissible && !prefix}>
@@ -107,9 +120,9 @@ export function Modal(props: PropsWithChildren<PropTypes>) {
                   </Flex>
                 </ModalHeader>
               )}
-              <Content>{children}</Content>
+              <Content css={styles?.content}>{children}</Content>
 
-              <Footer>
+              <Footer css={styles?.footer}>
                 {footer && <div className="footer__content">{footer}</div>}
 
                 <div

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

@@ -15,7 +15,12 @@ export interface PropTypes {
   prefix?: React.ReactNode;
   suffix?: React.ReactNode;
   container?: HTMLElement;
-  containerStyle?: Stitches.CSS<typeof config>;
+  styles?: {
+    root?: Stitches.CSS<typeof config>;
+    container?: Stitches.CSS<typeof config>;
+    content?: Stitches.CSS<typeof config>;
+    footer?: Stitches.CSS<typeof config>;
+  };
   footer?: React.ReactNode;
   hasWatermark?: boolean;
   hasCloseIcon?: boolean;

package/src/components/QuoteCost/QuoteCost.styles.ts

@@ -5,7 +5,6 @@ export const Container = styled('div', {
   display: 'flex',
   justifyContent: 'start',
   alignItems: 'center',
-  paddingBottom: '$10',
 });
 
 export const Separator = styled('div', {

package/src/components/QuoteCost/QuoteCost.types.ts

@@ -2,7 +2,7 @@ export type PropTypes = {
   fee: string;
   time: string | number;
   steps: number;
-  onClickFee?: () => void;
+  onClickFee?: React.MouseEventHandler<HTMLDivElement>;
   tooltipGas?: string;
   feeWarning?: boolean;
   tooltipContainer?: HTMLElement;

package/src/components/Select/Select.tsx

@@ -0,0 +1,85 @@
+import type { PropTypes } from './Select.types';
+
+import * as Select from '@radix-ui/react-select';
+import React, { useEffect, useRef, useState } from 'react';
+
+import { ChevronDownIcon, ChevronUpIcon } from '../../icons';
+import { Typography } from '../Typography';
+
+import { SelectContent, SelectItem, SelectTrigger } from './select.styles';
+
+export function SelectComponent(props: PropTypes) {
+  const [open, setOpen] = useState(false);
+  const selectRef = useRef<HTMLDivElement>(null);
+  const { options, value, container, handleItemClick } = props;
+  const handleToggle = () => {
+    setOpen((prev) => !prev);
+  };
+
+  const handleClickOutside = (e: MouseEvent) => {
+    if (selectRef.current && !selectRef.current.contains(e.target as Node)) {
+      setOpen(false);
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('click', handleClickOutside);
+    return () => {
+      document.removeEventListener('click', handleClickOutside);
+    };
+  }, []);
+
+  return (
+    <div ref={selectRef}>
+      <Select.Root value={value.value} open={open}>
+        <SelectTrigger
+          onKeyDown={(event) => event.key === 'Enter' && handleToggle()}
+          onClick={handleToggle}
+          open={open}
+          aria-label={value.label}>
+          <Select.Value>
+            <Typography variant="body" size="small">
+              {value.label}
+            </Typography>
+          </Select.Value>
+
+          <Select.Icon className="SelectIcon">
+            <ChevronDownIcon size={12} />
+          </Select.Icon>
+        </SelectTrigger>
+        <Select.Portal container={container}>
+          <SelectContent>
+            <Select.ScrollUpButton className="SelectScrollButton">
+              <ChevronUpIcon />
+            </Select.ScrollUpButton>
+            <Select.Viewport className="SelectViewport">
+              <Select.Group>
+                {options.map(
+                  (option) =>
+                    option.value !== value?.value && (
+                      <SelectItem
+                        onClick={() => {
+                          handleItemClick && handleItemClick(option);
+                          handleToggle();
+                        }}
+                        key={option.value}
+                        value={option.value}>
+                        <Select.ItemText>
+                          <Typography variant="body" size="small">
+                            {option.label}
+                          </Typography>
+                        </Select.ItemText>
+                      </SelectItem>
+                    )
+                )}
+              </Select.Group>
+            </Select.Viewport>
+            <Select.ScrollDownButton className="SelectScrollButton">
+              <ChevronDownIcon />
+            </Select.ScrollDownButton>
+          </SelectContent>
+        </Select.Portal>
+      </Select.Root>
+    </div>
+  );
+}

package/src/components/Select/Select.types.ts

@@ -0,0 +1,10 @@
+type Item = {
+  value: string;
+  label: string;
+};
+export type PropTypes = {
+  options: Item[];
+  handleItemClick?: (item: Item) => void;
+  value: Item;
+  container?: HTMLElement;
+};

package/src/components/Select/index.ts

@@ -0,0 +1 @@
+export { SelectComponent as Select } from './Select';

package/src/components/Select/select.styles.ts

@@ -0,0 +1,100 @@
+import * as Select from '@radix-ui/react-select';
+
+import { darkTheme, styled } from '../../theme';
+
+export const EXPANDABLE_QUOTE_TRANSITION_DURATION = 300;
+
+export const SelectTrigger = styled(Select.Trigger, {
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  cursor: 'pointer',
+  backgroundColor: '$secondary',
+  padding: '$5 $10',
+  border: 0,
+  whiteSpace: 'nowrap',
+
+  '& svg': {
+    transition: `all ${EXPANDABLE_QUOTE_TRANSITION_DURATION}ms ease`,
+  },
+
+  variants: {
+    open: {
+      true: {
+        borderTopLeftRadius: '$sm',
+        borderTopRightRadius: '$sm',
+        '& ._typography, & svg': {
+          color: '$secondary',
+        },
+
+        '& svg': {
+          transform: 'rotate(180deg)',
+        },
+        backgroundColor: '$neutral100',
+        [`.${darkTheme} &`]: {
+          backgroundColor: '$neutral300',
+        },
+      },
+      false: {
+        borderRadius: '$md',
+        '& ._typography, & svg': {
+          color: '$background',
+          [`.${darkTheme} &`]: {
+            color: '$foreground',
+          },
+        },
+        '& svg': {
+          transform: 'rotate(0)',
+        },
+      },
+    },
+  },
+  width: '100%',
+  '& ._typography': {
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    width: '52px',
+    '@xs': {
+      width: 'auto',
+    },
+  },
+});
+
+export const SelectContent = styled(Select.Content, {
+  padding: '$5 $10',
+  width: '100%',
+  position: 'absolute',
+  top: '38px',
+  maxHeight: '146px',
+  overflowY: 'auto',
+  borderBottomLeftRadius: '$sm',
+  borderBottomRightRadius: '$sm',
+  boxShadow: '-5px 5px 10px 0px rgba(86, 86, 86, 0.10)',
+  backgroundColor: '$neutral100',
+  [`.${darkTheme} &`]: {
+    backgroundColor: '$neutral300',
+  },
+});
+
+export const SelectItem = styled(Select.Item, {
+  padding: '$10 0',
+  borderTop: '1px solid',
+  borderColor: '$neutral300',
+  [`.${darkTheme} &`]: {
+    borderColor: '$neutral400',
+  },
+  listStyleType: 'none',
+  cursor: 'pointer',
+  '&:hover': {
+    '& ._typography': {
+      color: '$colors$secondary',
+    },
+  },
+  '&:focus': {
+    outline: 'none',
+    '& ._typography': {
+      color: '$colors$secondary',
+    },
+  },
+});

package/src/components/TextField/TextField.styles.ts

@@ -91,6 +91,7 @@ export const Input = styled('input', {
   border: 'none',
   outline: 'none',
   fontFamily: 'inherit',
+  maxWidth: '100%',
   variants: {
     suffix: {
       true: { marginRight: '$10' },

package/src/components/Toast/Toast.Provider.tsx

@@ -1,6 +1,7 @@
 import type {
   ProviderContext,
   ProviderPropTypes,
+  ToastPosition,
   ToastProps,
   ToastType,
 } from './Toast.types';
@@ -15,61 +16,98 @@ import { ToastContainer } from './Toast.styles';
 
 const ToastContext = createContext<ProviderContext | undefined>(undefined);
 
+const renderToastContainer = (
+  toasts: ToastProps[],
+  position: ToastPosition
+) => (
+  <>
+    {toasts.length > 0 && (
+      <ToastContainer style={toasts[0].containerStyle} position={position}>
+        {toasts.map((toast) => (
+          <Toast {...toast} key={toast.id} />
+        ))}
+      </ToastContainer>
+    )}
+  </>
+);
+
 export const ToastProvider = (props: PropsWithChildren<ProviderPropTypes>) => {
   const generateId = useMemo(() => idGenerator(), []);
 
-  const {
-    children,
-    anchorOrigin = {
-      horizontal: 'right',
-      vertical: 'bottom',
-    },
-    container,
-    containerStyle = {},
-  } = props;
-  const [toasts, setToasts] = useState<ToastProps[]>([]);
+  const { children, container } = props;
+  const [leftTopToasts, setLeftTopToasts] = useState<ToastProps[]>([]);
+  const [leftBottomToasts, setLeftBottomToasts] = useState<ToastProps[]>([]);
+  const [rightTopToasts, setRightTopToasts] = useState<ToastProps[]>([]);
+  const [rightBottomToasts, setRightBottomToasts] = useState<ToastProps[]>([]);
+  const [centerTopToasts, setCenterTopToasts] = useState<ToastProps[]>([]);
+  const [centerBottomToasts, setCenterBottomToasts] = useState<ToastProps[]>(
+    []
+  );
 
-  // eslint-disable-next-line react/jsx-no-constructed-context-values
-  const api: ProviderContext = {
-    addToast(content: ToastType) {
-      setToasts((toasts) => {
-        const isToastExistById = toasts.find(
-          (toast) => toast.id === content.id
+  const getToastSetter = (position: ToastPosition) => {
+    switch (position) {
+      case 'right-top':
+        return setRightTopToasts;
+      case 'right-bottom':
+        return setRightBottomToasts;
+      case 'left-top':
+        return setLeftTopToasts;
+      case 'left-bottom':
+        return setLeftBottomToasts;
+      case 'center-top':
+        return setCenterTopToasts;
+      default:
+        return setCenterBottomToasts;
+    }
+  };
+
+  const handleAddToast = (content: ToastType) => {
+    const addToasts = () => getToastSetter(content.position);
+
+    addToasts()((toasts) => {
+      const isToastExistById = toasts.find((toast) => toast.id === content.id);
+      if (isToastExistById) {
+        console.warn(
+          'Trying to send a toast with an existing ID. Please update the toast ID or use it after the toast is hidden'
         );
-        if (isToastExistById) {
-          console.warn(
-            'Trying to send a toast with an existing ID. Please update the toast ID or use it after the toast is hidden'
-          );
-          return toasts;
-        }
-        return [
-          ...toasts,
-          {
-            ...content,
-            id: content.id || generateId(),
-            horizontal: anchorOrigin.horizontal,
-          },
-        ];
-      });
-    },
-    removeToast(id: number | string) {
-      setToasts((toasts) => toasts.filter((t) => t.id !== id));
-    },
+        return toasts;
+      }
+      return [
+        ...toasts,
+        {
+          ...content,
+          id: content.id || generateId(),
+        },
+      ];
+    });
+  };
+
+  const handleRemoveToast = (id: number | string, position: ToastPosition) => {
+    const removeFromToasts = () => getToastSetter(position);
+
+    removeFromToasts()((toasts) => toasts.filter((t) => t.id !== id));
+  };
+
+  // eslint-disable-next-line react/jsx-no-constructed-context-values
+  const toastApis = {
+    addToast: (content: ToastType) => handleAddToast(content),
+    removeToast: (id: number | string, position: ToastPosition) =>
+      handleRemoveToast(id, position),
   };
 
   return (
-    <ToastContext.Provider value={api}>
+    <ToastContext.Provider value={toastApis}>
       {children}
       {container &&
         createPortal(
-          <ToastContainer
-            style={containerStyle}
-            horizontal={anchorOrigin.horizontal}
-            vertical={anchorOrigin.vertical}>
-            {toasts.map((toast) => (
-              <Toast {...toast} key={toast.id} />
-            ))}
-          </ToastContainer>,
+          <>
+            {renderToastContainer(rightTopToasts, 'right-top')}
+            {renderToastContainer(leftTopToasts, 'left-top')}
+            {renderToastContainer(centerTopToasts, 'center-top')}
+            {renderToastContainer(rightBottomToasts, 'right-bottom')}
+            {renderToastContainer(leftBottomToasts, 'left-bottom')}
+            {renderToastContainer(centerBottomToasts, 'center-bottom')}
+          </>,
           container
         )}
     </ToastContext.Provider>

package/src/components/Toast/Toast.helpers.ts

@@ -5,3 +5,8 @@ export function idGenerator() {
     return id;
   };
 }
+
+export const TOAST_UNMOUNT_DELAY = 500; // the delay before the toast is unmounted
+export const TOAST_TRANSITION_DURATION = 300; // the duration of the toast transition
+export const HOVER_TRANSITION_DURATION = 200; // the duration of the toast transition hover
+export const TOAST_HIDE_DELAY = 200; // the delay before the toast is invisible to shift remained toast smoothly

package/src/components/Toast/Toast.stories.tsx

@@ -16,7 +16,8 @@ export default {
     type: 'success',
     title: 'Please change your wallet network to Polygon',
     autoHideDuration: 5_000,
-    horizontal: 'right',
+    position: 'right-top',
+    variant: 'standard',
   },
   argTypes: {
     type: {
@@ -26,30 +27,26 @@ export default {
         options: ['success', 'warning', 'error', 'info', 'loading'],
       },
     },
+    position: {
+      name: 'position',
+      control: {
+        type: 'select',
+        options: [
+          'right-top',
+          'left-top',
+          'center-top',
+          'right-bottom',
+          'left-bottom',
+          'center-bottom',
+        ],
+      },
+    },
   },
 } as Meta<typeof Toast>;
 
-export const TopToasts = (props: ToastProps) => {
-  return (
-    <ToastProvider
-      container={document.body}
-      anchorOrigin={{
-        horizontal: props.horizontal,
-        vertical: 'top',
-      }}>
-      <ToastComponent {...props} />
-    </ToastProvider>
-  );
-};
-
-export const BottomToasts = (props: ToastProps) => {
+export const Main = (props: ToastProps) => {
   return (
-    <ToastProvider
-      container={document.body}
-      anchorOrigin={{
-        horizontal: props.horizontal,
-        vertical: 'bottom',
-      }}>
+    <ToastProvider container={document.body}>
       <ToastComponent {...props} />
     </ToastProvider>
   );