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

package/src/components/Alert/Alert.tsx

@@ -18,6 +18,7 @@ export function Alert(props: PropsWithChildren<PropTypes>) {
     action,
     containerStyles,
     variant = 'regular',
+    titleAlign,
   } = props;
   const isFooterString = typeof footer === 'string';
 
@@ -36,6 +37,7 @@ export function Alert(props: PropsWithChildren<PropTypes>) {
           {title && (
             <Typography
               color={getColor(type, variant)}
+              align={titleAlign}
               variant="body"
               className="title_typography"
               size={variant === 'regular' ? 'xsmall' : 'small'}>

package/src/components/Alert/Alert.types.ts

@@ -1,3 +1,4 @@
+import type { BaseAlign } from '../Typography/Typography.types';
 import type { CSSProperties, ReactNode } from 'react';
 
 export type Type = 'success' | 'warning' | 'error' | 'info' | 'loading';
@@ -9,4 +10,5 @@ export interface PropTypes {
   action?: ReactNode;
   variant?: 'alarm' | 'regular';
   containerStyles?: CSSProperties;
+  titleAlign?: BaseAlign;
 }

package/src/components/Divider/Divider.tsx

@@ -9,6 +9,7 @@ const DEFAULT_SIZE = 12;
 export function Divider({
   size = DEFAULT_SIZE,
   direction = 'vertical',
+  ...props
 }: PropTypes) {
-  return <DividerContainer size={size} direction={direction} />;
+  return <DividerContainer size={size} direction={direction} {...props} />;
 }

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,
@@ -84,10 +84,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 +108,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/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.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>
   );

package/src/components/Toast/Toast.styles.ts

@@ -7,18 +7,7 @@ const toastOpacity = keyframes({
 });
 
 export const ToastContentContainer = styled('div', {
-  variants: {
-    horizontal: {
-      right: {
-        right: 12,
-        animation: `${toastOpacity} .7s`,
-      },
-      left: {
-        left: 12,
-        animation: `${toastOpacity} .7s`,
-      },
-    },
-  },
+  animation: `${toastOpacity} .7s`,
 });
 
 export const ToastContainer = styled('div', {
@@ -28,20 +17,31 @@ export const ToastContainer = styled('div', {
   gap: '$4',
   flexDirection: 'column',
   variants: {
-    horizontal: {
-      right: {
+    position: {
+      'right-top': {
         right: 12,
+        top: 2,
       },
-      left: {
+      'right-bottom': {
+        right: 12,
+        bottom: 2,
+      },
+      'left-top': {
         left: 12,
+        top: 2,
       },
-    },
-
-    vertical: {
-      top: {
+      'left-bottom': {
+        left: 12,
+        bottom: 2,
+      },
+      'center-top': {
+        left: '50%',
+        transform: 'translateX(-50%)',
         top: 2,
       },
-      bottom: {
+      'center-bottom': {
+        left: '50%',
+        transform: 'translateX(-50%)',
         bottom: 2,
       },
     },
@@ -53,36 +53,73 @@ export const AlertBox = styled('div', {
   borderRadius: '$sm',
   width: '292px',
   minHeight: '52px',
-  backgroundColor: '$background',
-  borderRight: '1px solid',
-  [`.${darkTheme} &`]: {
-    backgroundColor: '#070917',
-  },
-  '&:hover': {
-    backgroundColor: '$info100',
-    [`.${darkTheme} &`]: {
-      backgroundColor: '#111733',
-    },
-  },
   variants: {
+    variant: {
+      custom: {
+        backgroundColor: '$background',
+        borderRight: '1px solid',
+        '&:hover': {
+          backgroundColor: '$info100',
+          [`.${darkTheme} &`]: {
+            backgroundColor: '$neutral300',
+          },
+        },
+      },
+      standard: {
+        '& ._alert': {
+          padding: '$10',
+          width: '100%',
+          justifyContent: 'center',
+          alignItems: 'center',
+        },
+      },
+    },
     type: {
-      error: {
+      error: {},
+      success: {},
+      warning: {},
+      info: {},
+      loading: {},
+    },
+  },
+  compoundVariants: [
+    {
+      variant: 'custom',
+      type: 'error',
+
+      css: {
         borderRightColor: '$error500',
       },
-      success: {
+    },
+    {
+      variant: 'custom',
+      type: 'success',
+      css: {
         borderRightColor: '$success500',
       },
-      warning: {
+    },
+    {
+      variant: 'custom',
+      type: 'warning',
+      css: {
         borderRightColor: '$warning500',
       },
-      info: {
+    },
+    {
+      variant: 'custom',
+      type: 'info',
+      css: {
         borderRightColor: '$info500',
       },
-      loading: {
+    },
+    {
+      variant: 'custom',
+      type: 'loading',
+      css: {
         borderRightColor: '$info500',
       },
     },
-  },
+  ],
 });
 
 export const AlertFlexContainer = styled('div', {
@@ -108,6 +145,5 @@ export const StyledTypography = styled(Typography, {
 
 export const ToastStoryContainer = styled('div', {
   display: 'flex',
-  justifyContent: 'center',
   alignItems: 'center',
 });

package/src/components/Toast/Toast.tsx

@@ -2,9 +2,12 @@ import type { ToastProps } from './Toast.types';
 
 import React, { useEffect } from 'react';
 
+import { CloseIcon } from '../../icons';
+import { Alert } from '../Alert';
 import { IconHighlight } from '../Alert/Alert.styles';
 import AlertIcon from '../Alert/AlertIcon';
 import { Divider } from '../Divider';
+import { IconButton } from '../IconButton';
 
 import { useToast } from './Toast.Provider';
 import {
@@ -14,46 +17,70 @@ import {
   ToastContentContainer,
 } from './Toast.styles';
 
-const DEFAULT_HIDE_DURATION = 3_000;
-
 export const Toast = (props: ToastProps) => {
-  const { id, horizontal, autoHideDuration = DEFAULT_HIDE_DURATION } = props;
+  const {
+    id,
+    autoHideDuration,
+    onClose,
+    type,
+    title,
+    position,
+    hasCloseIcon = true,
+    hideOnTap = true,
+    variant = 'standard',
+  } = props;
   const { removeToast } = useToast();
   useEffect(() => {
-    const timer = setTimeout(() => {
-      removeToast(id);
-    }, autoHideDuration);
+    let cleanup;
+
+    if (autoHideDuration) {
+      const timer = setTimeout(() => {
+        handleClose();
+      }, autoHideDuration);
 
-    return () => {
-      clearTimeout(timer);
-    };
+      cleanup = () => clearTimeout(timer);
+    }
+
+    return cleanup;
   }, [id]);
 
+  const handleClose = () => {
+    removeToast(id, position);
+    onClose?.();
+  };
+
   return (
-    <ToastContentContainer horizontal={horizontal}>
-      {'component' in props ? (
-        props.component
-      ) : (
-        <AlertBox
-          onClick={() => removeToast(id)}
-          type={props.type}
-          style={props.style}>
+    <ToastContentContainer>
+      <AlertBox
+        onClick={hideOnTap ? handleClose : undefined}
+        variant={variant}
+        type={type}>
+        {variant === 'custom' ? (
           <AlertFlexContainer>
-            <IconHighlight type={props.type} align="center">
-              <AlertIcon type={props.type} />
+            <IconHighlight type={type} align="center">
+              <AlertIcon type={type} />
             </IconHighlight>
             <Divider direction="horizontal" size={10} />
-            <StyledTypography
-              variant="body"
-              size="small"
-              color={props.titleColor}
-              hasColor={!!props.titleColor}
-              align="left">
+            <StyledTypography variant="body" size="small" align="left">
               {props.title}
             </StyledTypography>
           </AlertFlexContainer>
-        </AlertBox>
-      )}
+        ) : (
+          <Alert
+            title={title}
+            type={type}
+            variant="alarm"
+            titleAlign="left"
+            action={
+              hasCloseIcon ? (
+                <IconButton variant="ghost" size="xsmall" onClick={handleClose}>
+                  <CloseIcon size={12} />
+                </IconButton>
+              ) : undefined
+            }
+          />
+        )}
+      </AlertBox>
     </ToastContentContainer>
   );
 };

package/src/components/Toast/Toast.types.ts

@@ -1,31 +1,33 @@
+import type { ToastContainer } from './Toast.styles';
 import type { Type } from '../Alert/Alert.types';
-import type { CSSProperties } from '@stitches/react';
+import type * as Stitches from '@stitches/react';
+import type { CSSProperties } from 'react';
 
+type BaseProps = Stitches.VariantProps<typeof ToastContainer>;
+export type ToastPosition = Exclude<BaseProps['position'], object>;
 export interface ProviderPropTypes {
   container: HTMLElement;
-  anchorOrigin?: {
-    horizontal: 'left' | 'right';
-    vertical: 'bottom' | 'top';
-  };
-  containerStyle?: CSSProperties;
 }
 
-export type ToastType = { autoHideDuration?: number; id?: number | string } & (
-  | {
-      title: string;
-      type: Type;
-      titleColor?: string;
-      style?: CSSProperties;
-    }
-  | { component: React.ReactNode }
-);
+export type ToastType = {
+  autoHideDuration?: number;
+  id?: number | string;
+  containerStyle?: CSSProperties;
+  onClose?: () => void;
+  position: ToastPosition;
+  title: string;
+  type: Type;
+  style?: CSSProperties;
+  hasCloseIcon?: boolean;
+  hideOnTap?: boolean;
+  variant?: 'custom' | 'standard';
+};
 
 export type ToastProps = ToastType & {
   id: number | string;
-  horizontal: 'left' | 'right';
 };
 
 export type ProviderContext = {
   addToast: (content: ToastType) => void;
-  removeToast: (id: number | string) => void;
+  removeToast: (id: number | string, position: ToastPosition) => void;
 };

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

@@ -4,7 +4,7 @@ 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>;
+export type BaseAlign = Exclude<BaseProps['align'], object>;
 
 // eslint-disable-next-line @typescript-eslint/no-magic-numbers
 type margin = 2 | 4 | 8 | 12;

package/src/containers/ConnectWalletsModal/ConnectWalletsModal.tsx

@@ -30,7 +30,9 @@ export function ConnectWalletsModal(props: PropTypes) {
       title={i18n.t('Connect Wallets')}
       open={open}
       onClose={onClose}
-      containerStyle={{ width: '75%', maxWidth: '30rem', height: '60%' }}>
+      styles={{
+        container: { width: '75%', maxWidth: '30rem', height: '60%' },
+      }}>
       <ModalContent>
         {list.map((info) => (
           <Wallet {...info} key={info.title} onClick={onSelect} />

package/src/icons/Autorenew.tsx

@@ -0,0 +1,20 @@
+import type { SvgIconPropsWithChildren } from '../components/SvgIcon';
+
+import React, { createElement } from 'react';
+
+import { SvgIcon } from '../components/SvgIcon';
+
+function SvgAutorenew(props: SvgIconPropsWithChildren) {
+  return createElement(
+    SvgIcon,
+    props,
+    <svg viewBox="0 0 24 24">
+      <path
+        fillRule="evenodd"
+        d="M12 6v3l4-4-4-4v3c-4.42 0-8 3.58-8 8 0 1.57.46 3.03 1.24 4.26L6.7 14.8c-.45-.83-.7-1.79-.7-2.8 0-3.31 2.69-6 6-6zm6.76 1.74L17.3 9.2c.44.84.7 1.79.7 2.8 0 3.31-2.69 6-6 6v-3l-4 4 4 4v-3c4.42 0 8-3.58 8-8 0-1.57-.46-3.03-1.24-4.26z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+export default SvgAutorenew;

package/src/icons/Exit.tsx

@@ -0,0 +1,20 @@
+import type { SvgIconPropsWithChildren } from '../components/SvgIcon';
+
+import React, { createElement } from 'react';
+
+import { SvgIcon } from '../components/SvgIcon';
+
+function SvgExit(props: SvgIconPropsWithChildren) {
+  return createElement(
+    SvgIcon,
+    props,
+    <svg viewBox="0 0 24 24">
+      <path
+        fillRule="evenodd"
+        d="M10.09 15.59 11.5 17l5-5-5-5-1.41 1.41L12.67 11H3v2h9.67l-2.58 2.59zM19 3H5c-1.11 0-2 .9-2 2v4h2V5h14v14H5v-4H3v4c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+export default SvgExit;