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

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

@@ -1,274 +0,0 @@
-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

@@ -1,264 +0,0 @@
-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.tsx

@@ -1,123 +0,0 @@
-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;
-};

package/lib/components/Toast/ToastManager.ts

@@ -1,60 +0,0 @@
-import type {callbackFuncTypes, contentTypes, ToastOptions} from '../../types/toast';
-import {uuid} from '../../utils/helpers';
-
-
-const DEFAULT_AUTOCLOSE_TIME = 8000; // default auto close time for with autoClose = true (be default true) but timeout not passed.
-
-export const POSITIONS = {
-  TOP_CENTER: 'topCenter',
-  TOP_LEFT: 'topLeft',
-  TOP_RIGHT: 'topRight',
-  BOTTOM_LEFT: 'bottomLeft',
-  BOTTOM_RIGHT: 'bottomRight',
-  BOTTOM_CENTER: 'bottomCenter',
-} as const;
-
-export const ACTIONS = {
-  ADD: 'ADD',
-  REMOVE: 'REMOVE',
-} as const;
-
-const defaultOptions: ToastOptions = {
-  autoClose: true,
-  timeout: DEFAULT_AUTOCLOSE_TIME,
-  position: POSITIONS.BOTTOM_LEFT,
-};
-
-export const toastManager: {
-  add(content: contentTypes, options?: ToastOptions): string;
-  remove(id: string): boolean;
-  subscribe(callback: callbackFuncTypes): void;
-} = (() => {
-  let callbackFn: callbackFuncTypes;
-
-  const manager = {
-// @ts-ignore - TS2355 - A function whose declared type is neither 'void' nor 'any' must return a value.
-    subscribe(callback: callbackFuncTypes): undefined {
-      callbackFn = callback;
-    },
-
-    add(content: contentTypes, options?: ToastOptions): string {
-      const mergedOptions = {...defaultOptions, ...options} as const;
-      const toastId = uuid();
-      callbackFn &&
-        callbackFn(ACTIONS.ADD, content, {...mergedOptions, id: toastId});
-      return toastId;
-    },
-
-    remove(id: string) {
-      callbackFn(ACTIONS.REMOVE, null, {id});
-      return true;
-    },
-  } as const;
-
-  return manager;
-})();
-
-export const toastApi = {
-  show: (content: contentTypes, options?: ToastOptions): string => toastManager.add(content, options),
-  remove: (id: string): boolean => toastManager.remove(id),
-} as const;