@spaced-out/ui-design-system 0.4.12 → 0.4.13-beta.0

package/lib/components/Toast/Toast.stories.tsx

@@ -0,0 +1,274 @@
+import * as React from 'react';
+
+import {Button} from '../Button/Button';
+import {Icon} from '../Icon';
+import {TEXT_COLORS} from '../Text';
+
+import type {ToastProps} from './';
+import {
+  Toast,
+  TOAST_SEMANTIC,
+  toastApi,
+  ToastBody,
+  ToastContainer,
+  ToastFooter,
+  ToastTitle,
+} from './';
+
+import css from './Toast.stories.module.css';
+
+
+const semanticOptions: Array<unknown> = [...Object.values(TOAST_SEMANTIC)];
+
+export default {
+  tags: ['autodocs'],
+  title: 'Components/Toast',
+  argTypes: {
+    semantic: {
+      options: semanticOptions,
+      description: 'Semantic type of Toast card',
+      control: {
+        type: 'select',
+      },
+      table: {
+        type: {summary: 'enum'},
+        defaultValue: {summary: TOAST_SEMANTIC.success},
+      },
+    },
+    hideCloseIcon: {
+      description: 'Hide the close icon',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        type: {summary: 'boolean'},
+        defaultValue: {summary: false},
+      },
+    },
+    time: {
+      description: 'Pass the time string after converting it right format',
+      table: {
+        type: {summary: 'string'},
+        defaultValue: {summary: null},
+      },
+    },
+    initialFocus: {
+      description:
+        'Which element to initially focus. Can be a number (tabbable index as specified by the order)',
+      control: {
+        type: 'number',
+      },
+      table: {
+        type: {summary: 'number'},
+        defaultValue: {summary: '-1'},
+      },
+    },
+    customIcon: {
+      description: 'Pass the custom Icon component',
+      table: {
+        type: {summary: 'React.ReactNode'},
+        defaultValue: {summary: null},
+      },
+    },
+    classNames: {
+      description:
+        'Provide an optional className to be applied to the wrapper, time',
+      control: {
+        type: 'object',
+      },
+      table: {
+        type: {
+          summary: '{wrapper?: string, time?: string}',
+        },
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      subtitle: 'Generates a Toast component',
+      description: {
+        component: `
+\`\`\`js
+import {
+  Toast,
+  TOAST_SEMANTIC,
+  ToastBody,
+  ToastFooter,
+  ToastTitle,
+  toastApi
+} from "@spaced-out/ui-design-system/lib/components/Toast";
+\`\`\`
+  There are two parts of toast component\n
+1. One is, how you create a toast card of different semantics, you can create toast card like below(Click on show code to check sample code)
+
+\`\`\`jsx
+const toastJsx =
+<Toast>
+  <ToastTitle> </ToastTitle>
+  <ToastBody> </ToastBody>
+  <ToastFooter> </ToastFooter>
+</Toast>
+\`\`\`
+
+2. Second is, how you show and manage the toast in your app.
+
+\`\`\`jsx
+import {ToastContainer} and add <ToastContainer></ToastContainer>
+\`\`\`
+once in your application tree.
+If you can't figure out where to put it, rendering it in the application root would be the best bet
+
+\`\`\`jsx
+import {toastApi}
+// now use
+const toastId = toastApi.show(toastJsx)
+\`\`\`
+
+if you want to remove the toast then use toastApi.remove and pass the toastId returned while adding the toast.
+\`toastApi.remove(toastId);\`
+        `,
+      },
+    },
+    storySource: {
+      componentPath: '/src/components/Toast/Toast.jsx',
+    },
+  },
+};
+
+export const _Toast = (args: ToastProps) => {
+  const toast1 = (
+    <Toast semantic={TOAST_SEMANTIC.success} {...args}>
+      <ToastTitle>Toast Title Sample</ToastTitle>
+      <ToastBody>The quick brown fox jumps over the lazy dog</ToastBody>
+      <ToastFooter>
+        <Button
+          children="Dismiss"
+          onClick={() => {
+            // eslint-disable-next-line no-console
+            console.log('Secondary Action Clicked');
+          }}
+        />
+        <Button
+          children="Primary Action"
+          onClick={() => {
+            // eslint-disable-next-line no-console
+            console.log('Primary Action Clicked');
+          }}
+        />
+      </ToastFooter>
+    </Toast>
+  );
+
+  const toast2 = (
+    <Toast {...args} semantic={TOAST_SEMANTIC.danger}>
+      <ToastTitle>Danger Toast </ToastTitle>
+      <ToastBody>The quick brown fox jumps over the lazy dog</ToastBody>
+    </Toast>
+  );
+
+  const toast3 = (
+    <Toast {...args} semantic={TOAST_SEMANTIC.warning}>
+      <ToastTitle>Warning Toast</ToastTitle>
+      <ToastBody>The quick brown fox jumps over the lazy dog</ToastBody>
+    </Toast>
+  );
+
+  const toast4 = (
+    <Toast
+      {...args}
+      semantic={TOAST_SEMANTIC.information}
+      customIcon={
+        <Icon name="sparkles" type={'solid'} color={TEXT_COLORS.information} />
+      }
+    >
+      <ToastTitle> Warning Toast </ToastTitle>
+      <ToastBody>The quick brown fox jumps over the lazy dog</ToastBody>
+      <ToastFooter>
+        <Button
+          children="Dismiss"
+          onClick={() => {
+            // eslint-disable-next-line no-console
+            console.log('Secondary Action Clicked');
+          }}
+        />
+        <Button
+          children="Primary Action"
+          onClick={() => {
+            // eslint-disable-next-line no-console
+            console.log('Primary Action Clicked');
+          }}
+        />
+      </ToastFooter>
+    </Toast>
+  );
+
+  React.useEffect(() => {
+    try {
+      const toastId = toastApi.show(toast1, {autoClose: false});
+      const timeoutID = setTimeout(() => {
+        toastApi.remove(toastId);
+      }, 10000);
+
+      return () => {
+        clearTimeout(timeoutID);
+      };
+    } catch (error: any) {
+      console.error(error);
+    }
+  }, []);
+
+  return (
+    <div className={css.storyContainer}>
+      {toast1}
+      <div className={css.buttonContainer}>
+        <Button
+          size="small"
+          onClick={() =>
+            toastApi.show(toast1, {
+              autoClose: false,
+            })
+          }
+        >
+          Toast With Action
+        </Button>
+        <Button
+          size="small"
+          onClick={() =>
+            toastApi.show(toast3, {
+              timeout: 10000,
+            })
+          }
+        >
+          Warning Toast
+        </Button>
+        <Button
+          size="small"
+          onClick={() =>
+            toastApi.show(toast2, {
+              timeout: 10000,
+            })
+          }
+        >
+          Danger Toast
+        </Button>
+        <Button
+          size="small"
+          onClick={() =>
+            toastApi.show(toast4, {
+              timeout: 10000,
+            })
+          }
+        >
+          Custom Icon Toast
+        </Button>
+      </div>
+      <ToastContainer />
+    </div>
+  );
+};
+
+_Toast.args = {
+  time: 'Today 4:00pm',
+  semantic: TOAST_SEMANTIC.success,
+  initialFocus: 0,
+};

package/lib/components/Toast/Toast.tsx

@@ -0,0 +1,264 @@
+import {Flow} from 'flow-to-typescript-codemod';
+
+import * as React from 'react';
+import {
+  FloatingFocusManager,
+  useFloating,
+} from '@floating-ui/react';
+
+import classify from '../../utils/classify';
+import {CloseIcon, Icon} from '../Icon';
+import {SubTitleExtraSmall, TEXT_COLORS} from '../Text';
+
+import typography from '../../styles/typography.module.css';
+import css from './Toast.module.css';
+
+
+type ClassNames = Readonly<{
+  wrapper?: string;
+  time?: string;
+}>;
+
+export const TOAST_SEMANTIC = Object.freeze({
+  success: 'success',
+  information: 'information',
+  warning: 'warning',
+  danger: 'danger',
+  primary: 'primary',
+});
+
+export type ToastSemanticType = typeof TOAST_SEMANTIC[keyof typeof TOAST_SEMANTIC];
+
+export type ToastProps = {
+  classNames?: ClassNames;
+  children?: React.ReactNode;
+  time?: string;
+  semantic?: ToastSemanticType;
+  onClose?: () => void;
+  initialFocus?: number;
+  customIcon?: React.ReactNode;
+  hideCloseIcon?: boolean;
+};
+
+const ToastIcon = ({
+  semantic,
+}: {
+  semantic: ToastSemanticType;
+}) => {
+  switch (semantic) {
+  case 'success':
+    return (
+      <Icon
+        name="circle-check"
+        size="medium"
+        color={TEXT_COLORS.success}
+        type="solid"
+      />
+    );
+
+  case TOAST_SEMANTIC.information:
+    return (
+      <Icon
+        name="circle-info"
+        size="medium"
+        color={TEXT_COLORS.information}
+        type="solid"
+      />
+    );
+
+  case TOAST_SEMANTIC.warning:
+    return (
+      <Icon
+        name="circle-exclamation"
+        size="medium"
+        color={TEXT_COLORS.warning}
+        type="solid"
+      />
+    );
+
+  case TOAST_SEMANTIC.danger:
+    return (
+      <Icon
+        name="shield-exclamation"
+        size="medium"
+        color={TEXT_COLORS.danger}
+        type="solid"
+      />
+    );
+
+  default:
+    return (
+      <Icon
+        color={TEXT_COLORS.neutral}
+        name="face-smile"
+        size="medium"
+        type="solid"
+      />
+    );
+  }
+};
+
+export type ToastTitleProps = {
+  children?: React.ReactNode;
+  className?: string;
+  semantic?: ToastSemanticType;
+};
+
+export const ToastTitle: Flow.AbstractComponent<ToastTitleProps, HTMLDivElement> = React.forwardRef<HTMLDivElement, ToastTitleProps>((
+  {
+    children,
+    // @ts-ignore - TS2322 - Type 'string' is not assignable to type 'ToastSemanticType'.
+    semantic = '',
+    className,
+    ...props
+  }: ToastTitleProps,
+  ref,
+) => (<div
+  className={classify(css.toastTitle, typography[semantic], className)}
+  {...props}
+  ref={ref}
+>
+  {children}
+</div>));
+
+ToastTitle.displayName = 'ToastTitle';
+
+export type ToastBodyProps = {
+  children?: React.ReactNode;
+  className?: string;
+};
+
+export const ToastBody: Flow.AbstractComponent<ToastBodyProps, HTMLDivElement> = React.forwardRef<HTMLDivElement, ToastBodyProps>((
+  {
+    children,
+    className,
+    ...props
+  }: ToastBodyProps,
+  ref,
+) => (<div className={classify(css.toastBody, className)} {...props} ref={ref}>
+  {children}
+</div>));
+
+ToastBody.displayName = 'ToastBody';
+
+export type ToastFooterProps = {
+  children?: React.ReactNode;
+  onClose?: () => void;
+};
+
+export const ToastFooter = (
+  {
+    children,
+    onClose,
+  }: ToastFooterProps,
+) => {
+  const arrayChildren = React.Children.toArray(children);
+  const footerActions = React.Children.map(children, (child, index) => {
+    const isLast = index === arrayChildren.length - 1;
+    if (React.isValidElement(child)) {
+// @ts-ignore - TS2339 - Property 'onClick' does not exist on type 'unknown'.
+      const {onClick} = child.props;
+
+      const buttonClickHandler = (e: any) => {
+        onClose && onClose();
+        onClick && onClick(e);
+      };
+
+// @ts-ignore - TS2339 - Property 'displayName' does not exist on type 'string | JSXElementConstructor<any>'.
+      if (child?.type?.displayName === 'Button' && isLast) {
+        return React.cloneElement(child, {
+          size: 'small',
+          type: 'primary',
+// @ts-ignore - TS2698 - Spread types may only be created from object types.
+          ...child.props,
+          onClick: buttonClickHandler,
+        });
+// @ts-ignore - TS2339 - Property 'displayName' does not exist on type 'string | JSXElementConstructor<any>'.
+      } else if (child?.type?.displayName === 'Button') {
+        return React.cloneElement(child, {
+          size: 'small',
+          type: 'tertiary',
+// @ts-ignore - TS2698 - Spread types may only be created from object types.
+          ...child.props,
+          onClick: buttonClickHandler,
+        });
+      }
+    }
+    return child;
+  });
+
+  return React.Children.count(children) > 0 ? (
+    <div className={css.toastFooterActions}>{footerActions}</div>
+  ) : null;
+};
+
+ToastFooter.displayName = 'ToastFooter';
+
+export const Toast = (
+  {
+    classNames,
+    children,
+    time,
+    semantic = TOAST_SEMANTIC.success,
+    onClose,
+    initialFocus = -1,
+    customIcon,
+    hideCloseIcon,
+  }: ToastProps,
+) => {
+  const {refs, context} = useFloating({
+    open: true,
+  });
+
+  const getComp = (comp: string) => {
+    const childrenArray = React.Children.toArray(children);
+    if (childrenArray.length) {
+      const nodes: React.ReactNode[] = [];
+      for (const child of childrenArray) {
+// @ts-ignore - TS2339 - Property 'type' does not exist on type 'string | number | bigint | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<React.ReactNode> | ReactPortal | Promise<...>'.
+        if (child?.type?.displayName === comp) {
+// @ts-ignore - TS2769 - No overload matches this call.
+          nodes.push(React.cloneElement(child, {semantic}));
+        }
+      }
+      return nodes.length > 1 ? nodes : nodes[0];
+    }
+    return null;
+  };
+
+  const footer = getComp('ToastFooter');
+// @ts-ignore - TS2769 - No overload matches this call.
+  const footerWithClose = footer ? React.cloneElement(footer, {onClose}) : null;
+
+  return (
+    <FloatingFocusManager context={context} initialFocus={initialFocus}>
+      <div
+        className={classify(css.toastContainer, classNames?.wrapper)}
+        ref={refs.setFloating}
+      >
+        {customIcon || <ToastIcon semantic={semantic} />}
+        <div className={css.toastMidSection}>
+          <div className={css.contentWrap}>
+            <div className={css.titleBodyWrap}>
+              {getComp('ToastTitle')}
+              {getComp('ToastBody')}
+            </div>
+            {time && (
+              <SubTitleExtraSmall className={classNames?.time}>
+                {time}
+              </SubTitleExtraSmall>
+            )}
+          </div>
+          {footerWithClose}
+        </div>
+        {!hideCloseIcon && (
+          <CloseIcon
+            classNames={{button: css.closeIcon}}
+            onClick={onClose}
+            ariaLabel="Close Button"
+          />
+        )}
+      </div>
+    </FloatingFocusManager>
+  );
+};

package/lib/components/Toast/ToastContainer.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const ToastContainer: () => null | React.ReactPortal;
+//# sourceMappingURL=ToastContainer.d.ts.map

package/lib/components/Toast/ToastContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastContainer.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/ToastContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AA6C3D,eAAO,MAAM,cAAc,QAAO,IAAI,GAAG,KAAK,CAAC,WA6E9C,CAAC"}

package/lib/components/Toast/ToastContainer.js

@@ -12,7 +12,6 @@ var _ = require("./");
 var _ToastContainerModule = _interopRequireDefault(require("./ToastContainer.module.css"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-// $FlowFixMe[untyped-import]
 const ADD = 'ADD';
 const REMOVE = 'REMOVE';
 const reducer = (state, action) => {
@@ -21,8 +20,7 @@ const reducer = (state, action) => {
     data
   } = action;
   if (type === ADD) {
-    if (/* $FlowIgnore */
-    state.filter(i => i.uniqueCode && i.uniqueCode === data.uniqueCode).length) {
+    if (state.filter(i => i.uniqueCode && i.uniqueCode === data.uniqueCode).length) {
       return state;
     }
     return [...state, data];
@@ -74,7 +72,6 @@ const ToastContainer = () => {
   }, []);
   const positionMaintainer = () => {
     const mapper = {};
-    /* $FlowIgnore */
     data.map(_ref => {
       let {
         position,
@@ -99,7 +96,7 @@ const ToastContainer = () => {
         } = _ref2;
         return (
           /*#__PURE__*/
-          // $FlowFixMe
+          // @ts-ignore - TS2769 - No overload matches this call.
           _react.default.cloneElement(content, {
             key: id,
             onClose: () => dispatch({

package/lib/components/Toast/ToastContainer.tsx

@@ -0,0 +1,123 @@
+import React, {useEffect, useReducer, useRef} from 'react';
+import {createPortal} from 'react-dom';
+import type {actionTypes, contentTypes, optionTypes} from 'src/types/toast';
+
+import {useToastPortal} from '../../hooks';
+import {classify} from '../../utils/classify';
+
+import {toastManager} from './';
+
+import css from './ToastContainer.module.css';
+
+
+const ADD = 'ADD';
+const REMOVE = 'REMOVE';
+
+type stateTypes = ((optionTypes) & {
+  content?: contentTypes;
+});
+
+type MapperValues = ((optionTypes) & {
+  content: contentTypes;
+});
+
+type Actions = {
+  type: actionTypes;
+  data: stateTypes;
+};
+
+const reducer = (state: stateTypes[], action: Actions) => {
+  const {type, data} = action;
+
+  if (type === ADD) {
+    if (
+      state.filter((i) => i.uniqueCode && i.uniqueCode === data.uniqueCode).length
+    ) {
+      return state;
+    }
+
+    return [...state, data];
+  } else if (type === REMOVE) {
+    return state.filter((i) => i.id !== data.id);
+  }
+  return state;
+};
+
+export const ToastContainer = (): null | React.ReactPortal => {
+  const [data, dispatch] = useReducer(reducer, []);
+  const toastRef = useRef<HTMLDivElement | null>(null);
+
+  const {loaded} = useToastPortal({toastRef});
+
+  const callback = (
+    actionType: actionTypes,
+    content: contentTypes,
+    options: optionTypes,
+  ) => {
+    if (actionType === ADD) {
+      dispatch({type: ADD, data: {content, ...options, key: `${options.id}`}});
+    }
+    if (actionType === REMOVE) {
+      dispatch({type: REMOVE, data: {id: options.id}});
+    }
+
+    if (options.autoClose) {
+      window.setTimeout(() => {
+        dispatch({type: REMOVE, data: {id: options.id}});
+      }, options.timeout);
+    }
+  };
+
+  useEffect(() => {
+    toastManager.subscribe(callback);
+  }, []);
+
+  const positionMaintainer = () => {
+    const mapper: Record<string, any> = {};
+    data.map(({
+      position,
+      ...rest
+    }: optionTypes) => {
+      if (position) {
+        if (!mapper[position]) {
+          mapper[position] = [];
+        }
+        mapper[position].push(rest);
+      }
+    });
+
+    return mapper;
+  };
+
+  const markup = () => {
+    const mapper = positionMaintainer();
+
+    return Object.keys(mapper).map((position) => {
+      const content = mapper[position].map(({
+        content,
+        id,
+      }: MapperValues) =>
+// @ts-ignore - TS2769 - No overload matches this call.
+        React.cloneElement(content, {
+          key: id,
+          onClose: () => dispatch({type: REMOVE, data: {id}}),
+        }),
+      );
+
+      return (
+        <div
+          key={position.toString()}
+          className={classify(css.toastContainer, css[position])}
+        >
+          {content}
+        </div>
+      );
+    });
+  };
+
+  if (!toastRef.current) {
+    return null;
+  }
+
+  return loaded ? createPortal(markup(), toastRef.current) : null;
+};