@rango-dev/ui 0.27.0 → 0.27.1-next.0

package/dist/widget/ui/src/components/Toast/Toast.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Toast/Toast.styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAO3C,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAahC,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAyBzB,CAAC;AAEH,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAmCnB,CAAC;AAEH,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAI7B,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAa3B,CAAC;AAEH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAI9B,CAAC"}

package/dist/widget/ui/src/components/Toast/Toast.types.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+import type { Type } from '../Alert/Alert.types';
+import type { CSSProperties } from '@stitches/react';
+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 ToastProps = ToastType & {
+    id: number | string;
+    horizontal: 'left' | 'right';
+};
+export type ProviderContext = {
+    addToast: (content: ToastType) => void;
+    removeToast: (id: number | string) => void;
+};
+//# sourceMappingURL=Toast.types.d.ts.map

package/dist/widget/ui/src/components/Toast/Toast.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Toast/Toast.types.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErD,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,WAAW,CAAC;IACvB,YAAY,CAAC,EAAE;QACb,UAAU,EAAE,MAAM,GAAG,OAAO,CAAC;QAC7B,QAAQ,EAAE,QAAQ,GAAG,KAAK,CAAC;KAC5B,CAAC;IACF,cAAc,CAAC,EAAE,aAAa,CAAC;CAChC;AAED,MAAM,MAAM,SAAS,GAAG;IAAE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,GAAG,CAC1E;IACE,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,IAAI,CAAC;IACX,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB,GACD;IAAE,SAAS,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CACjC,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG;IACnC,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,GAAG,OAAO,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,EAAE,CAAC,OAAO,EAAE,SAAS,KAAK,IAAI,CAAC;IACvC,WAAW,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;CAC5C,CAAC"}

package/dist/widget/ui/src/components/Toast/index.d.ts

@@ -0,0 +1,3 @@
+export { Toast } from './Toast';
+export { ToastProvider, useToast } from './Toast.Provider';
+//# sourceMappingURL=index.d.ts.map

package/dist/widget/ui/src/components/Toast/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Toast/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/widget/ui/src/components/index.d.ts

@@ -29,6 +29,7 @@ export * from './SwapListItem';
 export * from './SwapDetailsPlaceholder';
 export * from './Switch';
 export * from './TextField';
+export * from './Toast';
 export * from './TokenList';
 export * from './TokenPreview';
 export * from './Tooltip';

package/dist/widget/ui/src/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,mBAAmB,CAAC;AAClC,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,wBAAwB,CAAC;AACvC,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,wBAAwB,CAAC;AACvC,cAAc,UAAU,CAAC;AACzB,cAAc,0BAA0B,CAAC;AACzC,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,0BAA0B,CAAC;AACzC,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,mBAAmB,CAAC;AAClC,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,wBAAwB,CAAC;AACvC,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,wBAAwB,CAAC;AACvC,cAAc,UAAU,CAAC;AACzB,cAAc,0BAA0B,CAAC;AACzC,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,0BAA0B,CAAC;AACzC,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/ui",
-  "version": "0.27.0",
+  "version": "0.27.1-next.0",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -77,4 +77,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/components/Alert/Alert.styles.ts

@@ -153,6 +153,11 @@ export const IconHighlight = styled('div', {
         backgroundColor: '$$color',
       },
     },
+    align: {
+      center: {
+        alignSelf: 'center',
+      },
+    },
   },
 });
 

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

@@ -0,0 +1,87 @@
+import type {
+  ProviderContext,
+  ProviderPropTypes,
+  ToastProps,
+  ToastType,
+} from './Toast.types';
+import type { PropsWithChildren } from 'react';
+
+import React, { createContext, useContext, useMemo, useState } from 'react';
+import { createPortal } from 'react-dom';
+
+import { Toast } from './Toast';
+import { idGenerator } from './Toast.helpers';
+import { ToastContainer } from './Toast.styles';
+
+const ToastContext = createContext<ProviderContext | undefined>(undefined);
+
+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[]>([]);
+
+  // 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
+        );
+        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 (
+    <ToastContext.Provider value={api}>
+      {children}
+      {container &&
+        createPortal(
+          <ToastContainer
+            style={containerStyle}
+            horizontal={anchorOrigin.horizontal}
+            vertical={anchorOrigin.vertical}>
+            {toasts.map((toast) => (
+              <Toast {...toast} key={toast.id} />
+            ))}
+          </ToastContainer>,
+          container
+        )}
+    </ToastContext.Provider>
+  );
+};
+
+export function useToast(): ProviderContext {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error(
+      'useToast can only be used within the ToastProvider component'
+    );
+  }
+  return context;
+}

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

@@ -0,0 +1,7 @@
+export function idGenerator() {
+  let id = 1;
+  return () => {
+    id++;
+    return id;
+  };
+}

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

@@ -0,0 +1,71 @@
+import type { ToastProps } from './Toast.types';
+import type { Meta } from '@storybook/react';
+
+import React from 'react';
+
+import { Button } from '../Button';
+
+import { ToastStoryContainer } from './Toast.styles';
+
+import { Toast, ToastProvider, useToast } from '.';
+
+export default {
+  title: 'Components/Toast',
+  component: Toast,
+  args: {
+    type: 'success',
+    title: 'Please change your wallet network to Polygon',
+    autoHideDuration: 5_000,
+    horizontal: 'right',
+  },
+  argTypes: {
+    type: {
+      name: 'type',
+      control: {
+        type: 'select',
+        options: ['success', 'warning', 'error', 'info', 'loading'],
+      },
+    },
+  },
+} 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) => {
+  return (
+    <ToastProvider
+      container={document.body}
+      anchorOrigin={{
+        horizontal: props.horizontal,
+        vertical: 'bottom',
+      }}>
+      <ToastComponent {...props} />
+    </ToastProvider>
+  );
+};
+
+const ToastComponent = (props: ToastProps) => {
+  const { addToast } = useToast();
+
+  return (
+    <ToastStoryContainer>
+      <Button
+        variant="contained"
+        type="success"
+        onClick={() => addToast(props)}>
+        Show Toast
+      </Button>
+    </ToastStoryContainer>
+  );
+};

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

@@ -0,0 +1,113 @@
+import { darkTheme, keyframes, lightTheme, styled } from '../../theme';
+import { Typography } from '../Typography';
+
+const toastOpacity = keyframes({
+  from: { opacity: 0 },
+  to: { opacity: 1 },
+});
+
+export const ToastContentContainer = styled('div', {
+  variants: {
+    horizontal: {
+      right: {
+        right: 12,
+        animation: `${toastOpacity} .7s`,
+      },
+      left: {
+        left: 12,
+        animation: `${toastOpacity} .7s`,
+      },
+    },
+  },
+});
+
+export const ToastContainer = styled('div', {
+  position: 'absolute',
+  zIndex: 9999,
+  display: 'flex',
+  gap: '$4',
+  flexDirection: 'column',
+  variants: {
+    horizontal: {
+      right: {
+        right: 12,
+      },
+      left: {
+        left: 12,
+      },
+    },
+
+    vertical: {
+      top: {
+        top: 2,
+      },
+      bottom: {
+        bottom: 2,
+      },
+    },
+  },
+});
+
+export const AlertBox = styled('div', {
+  display: 'flex',
+  borderRadius: '$sm',
+  width: '292px',
+  minHeight: '52px',
+  backgroundColor: '$background',
+  borderRight: '1px solid',
+  [`.${darkTheme} &`]: {
+    backgroundColor: '#070917',
+  },
+  '&:hover': {
+    backgroundColor: '$info100',
+    [`.${darkTheme} &`]: {
+      backgroundColor: '#111733',
+    },
+  },
+  variants: {
+    type: {
+      error: {
+        borderRightColor: '$error500',
+      },
+      success: {
+        borderRightColor: '$success500',
+      },
+      warning: {
+        borderRightColor: '$warning500',
+      },
+      info: {
+        borderRightColor: '$info500',
+      },
+      loading: {
+        borderRightColor: '$info500',
+      },
+    },
+  },
+});
+
+export const AlertFlexContainer = styled('div', {
+  display: 'flex',
+  padding: '$10',
+  alignItems: 'center',
+});
+
+export const StyledTypography = styled(Typography, {
+  variants: {
+    hasColor: {
+      false: {
+        [`.${lightTheme} &`]: {
+          color: '$neutral700',
+        },
+        [`.${darkTheme} &`]: {
+          color: '$neutral900',
+        },
+      },
+    },
+  },
+});
+
+export const ToastStoryContainer = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});

package/src/components/Toast/Toast.tsx

@@ -0,0 +1,59 @@
+import type { ToastProps } from './Toast.types';
+
+import React, { useEffect } from 'react';
+
+import { IconHighlight } from '../Alert/Alert.styles';
+import AlertIcon from '../Alert/AlertIcon';
+import { Divider } from '../Divider';
+
+import { useToast } from './Toast.Provider';
+import {
+  AlertBox,
+  AlertFlexContainer,
+  StyledTypography,
+  ToastContentContainer,
+} from './Toast.styles';
+
+const DEFAULT_HIDE_DURATION = 3_000;
+
+export const Toast = (props: ToastProps) => {
+  const { id, horizontal, autoHideDuration = DEFAULT_HIDE_DURATION } = props;
+  const { removeToast } = useToast();
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      removeToast(id);
+    }, autoHideDuration);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [id]);
+
+  return (
+    <ToastContentContainer horizontal={horizontal}>
+      {'component' in props ? (
+        props.component
+      ) : (
+        <AlertBox
+          onClick={() => removeToast(id)}
+          type={props.type}
+          style={props.style}>
+          <AlertFlexContainer>
+            <IconHighlight type={props.type} align="center">
+              <AlertIcon type={props.type} />
+            </IconHighlight>
+            <Divider direction="horizontal" size={10} />
+            <StyledTypography
+              variant="body"
+              size="small"
+              color={props.titleColor}
+              hasColor={!!props.titleColor}
+              align="left">
+              {props.title}
+            </StyledTypography>
+          </AlertFlexContainer>
+        </AlertBox>
+      )}
+    </ToastContentContainer>
+  );
+};

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

@@ -0,0 +1,31 @@
+import type { Type } from '../Alert/Alert.types';
+import type { CSSProperties } from '@stitches/react';
+
+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 ToastProps = ToastType & {
+  id: number | string;
+  horizontal: 'left' | 'right';
+};
+
+export type ProviderContext = {
+  addToast: (content: ToastType) => void;
+  removeToast: (id: number | string) => void;
+};

package/src/components/Toast/index.ts

@@ -0,0 +1,2 @@
+export { Toast } from './Toast';
+export { ToastProvider, useToast } from './Toast.Provider';

package/src/components/index.ts

@@ -29,6 +29,7 @@ export * from './SwapListItem';
 export * from './SwapDetailsPlaceholder';
 export * from './Switch';
 export * from './TextField';
+export * from './Toast';
 export * from './TokenList';
 export * from './TokenPreview';
 export * from './Tooltip';