@hyphen/hyphen-components 2.9.0

package/src/components/Toast/Toast.store.ts

@@ -0,0 +1,280 @@
+import { useState, useEffect } from 'react';
+import { Toast, ExtendedToastOptions, ToastType } from './Toast.types';
+
+const TOAST_LIMIT = 20;
+
+// eslint-disable-next-line no-shadow
+export enum ToastStoreActionType {
+  ADD_TOAST = 'TOAST/ADD_TOAST',
+  UPDATE_TOAST = 'TOAST/UPDATE_TOAST',
+  UPSERT_TOAST = 'TOAST/UPSERT_TOAST',
+  DISMISS_TOAST = 'TOAST/DISMISS_TOAST',
+  REMOVE_TOAST = 'TOAST/REMOVE_TOAST',
+  START_PAUSE = 'TOAST/START_PAUSE',
+  END_PAUSE = 'TOAST/END_PAUSE',
+}
+
+type GenericAction<
+  TActionType extends PropertyKey,
+  TPayload extends Record<string, unknown>
+> = {
+  type: TActionType;
+  payload: TPayload;
+};
+
+type ToastStoreAction =
+  | GenericAction<ToastStoreActionType.ADD_TOAST, { toast: Toast }>
+  | GenericAction<ToastStoreActionType.UPSERT_TOAST, { toast: Toast }>
+  | GenericAction<ToastStoreActionType.UPDATE_TOAST, { toast: Partial<Toast> }>
+  | GenericAction<ToastStoreActionType.DISMISS_TOAST, { toastId?: string }>
+  | GenericAction<ToastStoreActionType.REMOVE_TOAST, { toastId?: string }>
+  | GenericAction<ToastStoreActionType.START_PAUSE, { time: number }>
+  | GenericAction<ToastStoreActionType.END_PAUSE, { time: number }>;
+
+interface ToastState {
+  toasts: Toast[];
+  pausedAt: number | undefined;
+}
+
+const toastTimeouts = new Map<Toast['id'], ReturnType<typeof setTimeout>>();
+
+const addToDismissedQueue = (toastId: string) => {
+  if (toastTimeouts.has(toastId)) {
+    return;
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId);
+    dispatch({
+      // eslint-disable-line
+      type: ToastStoreActionType.REMOVE_TOAST,
+      payload: { toastId },
+    });
+  }, 1000);
+
+  toastTimeouts.set(toastId, timeout);
+};
+
+const clearFromDismissedQueue = (toastId: string) => {
+  const timeout = toastTimeouts.get(toastId);
+  if (timeout) {
+    clearTimeout(timeout);
+  }
+};
+
+type ReducerCallback<TState, TAction> = (
+  state: TState,
+  action: TAction
+) => TState;
+type HandlerMap<
+  TActionTypes extends PropertyKey,
+  TAction extends GenericAction<TActionTypes, Record<string, unknown>>,
+  TState
+> = {
+  [action in TActionTypes]: ReducerCallback<TState, TAction>;
+};
+type ToastStoreHandlerMap = HandlerMap<
+  ToastStoreActionType,
+  ToastStoreAction,
+  ToastState
+>;
+
+const createReducer =
+  <
+    TActionTypes extends PropertyKey,
+    TAction extends GenericAction<TActionTypes, Record<string, unknown>>,
+    TState,
+    THandlers extends HandlerMap<TActionTypes, TAction, TState>
+  >(
+    initialState: TState,
+    handlers: THandlers
+  ) =>
+  (state: TState = initialState, action: TAction) => {
+    if (handlers.hasOwnProperty(action.type)) {
+      // eslint-disable-line
+      return handlers[action.type](state, action);
+    }
+
+    return state;
+  };
+
+type ToastStoreHandler = ReducerCallback<ToastState, ToastStoreAction>;
+
+const handleAddToast: ToastStoreHandler = (state, action) => {
+  if (!('toast' in action.payload)) return state;
+
+  const { toast } = action.payload;
+
+  return {
+    ...state,
+    toasts: [toast as Toast, ...state.toasts].slice(0, TOAST_LIMIT),
+  };
+};
+
+const handleUpdateToast: ToastStoreHandler = (state, action) => {
+  const { toast } = action.payload as { toast: Toast };
+
+  //  @TODO -- Side effects
+  if (toast.id) {
+    clearFromDismissedQueue(toast.id);
+  }
+
+  return {
+    ...state,
+    toasts: state.toasts.map((t) =>
+      t.id === toast.id ? { ...t, ...toast } : t
+    ), // eslint-disable-line
+  };
+};
+
+const handleUpsertToast: ToastStoreHandler = (state, action) => {
+  const { toast } = action.payload as { toast: Toast };
+
+  // @TODO -- refactor to avoid using recursive function before 'reducer is declared'
+  return state.toasts.find((t) => t.id === toast.id)
+    ? reducer(state, {
+        type: ToastStoreActionType.UPDATE_TOAST,
+        payload: { toast },
+      }) // eslint-disable-line
+    : reducer(state, {
+        type: ToastStoreActionType.ADD_TOAST,
+        payload: { toast } as { toast: Toast },
+      }); // eslint-disable-line
+};
+
+const handleDismissToast: ToastStoreHandler = (state, action) => {
+  const { toastId } = action.payload as { toastId: string };
+
+  if (toastId) {
+    addToDismissedQueue(toastId);
+  } else {
+    state.toasts.forEach((toast) => {
+      addToDismissedQueue(toast.id);
+    });
+  }
+
+  return {
+    ...state,
+    // eslint-disable-next-line no-confusing-arrow
+    toasts: state.toasts.map((t) =>
+      t.id === toastId || toastId === undefined ? { ...t, visible: false } : t
+    ),
+  };
+};
+
+const handleRemoveToast: ToastStoreHandler = (state, action) => {
+  const { toastId } = action.payload as { toastId: string };
+
+  if (toastId === undefined) {
+    return {
+      ...state,
+      toasts: [],
+    };
+  }
+
+  return {
+    ...state,
+    toasts: state.toasts.filter((t) => t.id !== toastId),
+  };
+};
+
+const handleStartPause: ToastStoreHandler = (state, action) => {
+  const { time } = action.payload as { time: number };
+
+  return {
+    ...state,
+    pausedAt: time,
+  };
+};
+
+const handleEndPause: ToastStoreHandler = (state, action) => {
+  const { time } = action.payload as { time: number };
+
+  const diff = time - (state.pausedAt || 0);
+
+  return {
+    ...state,
+    pausedAt: undefined,
+    toasts: state.toasts.map((t) => ({
+      ...t,
+      pauseDuration: t.pauseDuration + diff,
+    })),
+  };
+};
+
+const actionHandlers: ToastStoreHandlerMap = {
+  [ToastStoreActionType.ADD_TOAST]: handleAddToast,
+  [ToastStoreActionType.UPDATE_TOAST]: handleUpdateToast,
+  [ToastStoreActionType.UPSERT_TOAST]: handleUpsertToast,
+  [ToastStoreActionType.DISMISS_TOAST]: handleDismissToast,
+  [ToastStoreActionType.REMOVE_TOAST]: handleRemoveToast,
+  [ToastStoreActionType.START_PAUSE]: handleStartPause,
+  [ToastStoreActionType.END_PAUSE]: handleEndPause,
+};
+
+const toastReducer = createReducer<
+  ToastStoreActionType,
+  ToastStoreAction,
+  ToastState,
+  ToastStoreHandlerMap
+>({ toasts: [], pausedAt: undefined }, actionHandlers);
+
+const reducer = (state: ToastState, action: ToastStoreAction) =>
+  toastReducer(state, action);
+
+const listeners: Array<(state: ToastState) => void> = [];
+
+let memoryState: ToastState = { toasts: [], pausedAt: undefined };
+
+export const dispatch = (action: ToastStoreAction): void => {
+  memoryState = reducer(memoryState, action);
+  listeners.forEach((listener) => {
+    listener(memoryState);
+  });
+};
+
+const defaultTimeouts: {
+  [key in ToastType]: number;
+} = {
+  blank: 4000,
+  error: 4000,
+  success: 2000,
+  loading: Infinity,
+  custom: 4000,
+};
+
+export const useToastStore = (
+  toastOptions: ExtendedToastOptions = {}
+): ToastState => {
+  const [state, setState] = useState<ToastState>(memoryState);
+  useEffect(() => {
+    listeners.push(setState);
+    return () => {
+      const index = listeners.indexOf(setState);
+      if (index > -1) {
+        listeners.splice(index, 1);
+      }
+    };
+  }, [state]);
+
+  const mergedToasts = state.toasts.map((t) => ({
+    ...toastOptions,
+    ...toastOptions[t.type],
+    ...t,
+    duration:
+      t.duration ||
+      toastOptions[t.type]?.duration ||
+      toastOptions?.duration ||
+      defaultTimeouts[t.type],
+    style: {
+      ...toastOptions.style,
+      ...toastOptions[t.type]?.style,
+      ...t.style,
+    },
+  }));
+
+  return {
+    ...state,
+    toasts: mergedToasts,
+  };
+};

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

@@ -0,0 +1,283 @@
+import type { Meta } from '@storybook/react';
+import React, { useState } from 'react';
+import { ToastContainer, ToastPosition, toast } from './';
+import { Button } from '../Button/Button';
+import { Table } from '../Table/Table';
+import { Box } from '../Box/Box';
+
+const meta: Meta<typeof ToastContainer> = {
+  title: 'Components/Toast',
+  component: ToastContainer,
+  parameters: {
+    controls: { hideNoControlsWarning: true },
+  },
+  decorators: [
+    (Story, { args, viewMode }) => (
+      <>
+        {viewMode === 'story' && <ToastContainer />}
+        <Story args={{ ...args }} />
+      </>
+    ),
+  ],
+};
+
+export default meta;
+
+export const Example = () =>
+  (() => {
+    const handleClick = () => toast.success('File saved', { duration: 5000 });
+    return <Button onClick={handleClick}>Show toast</Button>;
+  })();
+
+export const Column = () =>
+  (() => {
+    const codePreviewStyle = {
+      padding: '3px 5px',
+      borderRadius: '3px',
+      border: '1px solid #EEEEEE',
+      color: 'rgba(51,51,51,0.9)',
+      backgroundColor: '#F8F8F8',
+    };
+    const toastInterfaceRows = [
+      {
+        name: 'id',
+        type: 'string',
+        description:
+          'Unique id of toast. This is autogenerated if not included, but can be included to update an existing toast.',
+      },
+      {
+        name: 'duration',
+        type: 'number',
+        description:
+          'Duration (in milliseconds) that toast remains on screen before auto-dismissing.',
+      },
+      {
+        name: 'ariaProps',
+        type: "{ role: 'status' | 'alert', 'aria-live': 'assertive' | 'off' | 'polite' }",
+        description: 'Accessibility props to be passed down to toast.',
+      },
+      {
+        name: 'className',
+        type: 'string',
+        description: 'Custom class.',
+      },
+      {
+        name: 'style',
+        type: 'CSS.StyleObject',
+        description: 'Custom styles',
+      },
+      {
+        name: 'position',
+        type: "  'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';",
+        description:
+          'Toast position (overrides global container toast position)',
+      },
+      {
+        name: 'canDismiss',
+        type: 'boolean',
+        description:
+          'Whether toast includes the close/dismiss icon allowing user to close it (defaults to true)',
+      },
+      {
+        name: 'isCompact',
+        type: 'boolean',
+        description: 'Whether to render a compact toast (smaller padding)',
+      },
+    ];
+    const columnConfig = [
+      { heading: 'Name', dataKey: 'name' },
+      {
+        heading: 'Type',
+        dataKey: 'type',
+        render: (cell: any) => <code style={codePreviewStyle}>{cell}</code>,
+      },
+      { heading: 'Description', dataKey: 'description' },
+    ];
+    return (
+      <Table rowKey="name" columns={columnConfig} rows={toastInterfaceRows} />
+    );
+  })();
+
+export const Position = () =>
+  (() => {
+    const handleClick = (position: ToastPosition) =>
+      toast('Hey there', { position });
+    return (
+      <Box gap="md" direction="row">
+        <Button onClick={() => handleClick('top-right')}>top right</Button>
+        <Button onClick={() => handleClick('top-center')}>top center</Button>
+        <Button onClick={() => handleClick('top-left')}>top left</Button>
+        <Button onClick={() => handleClick('bottom-right')}>
+          bottom right
+        </Button>
+        <Button onClick={() => handleClick('bottom-center')}>
+          bottom center
+        </Button>
+        <Button onClick={() => handleClick('bottom-left')}>bottom left</Button>
+      </Box>
+    );
+  })();
+
+export const Duration = () =>
+  (() => {
+    const handleClick = () => {
+      toast(`toast will close in 6 seconds`, { duration: 6000 });
+    };
+    return (
+      <Box gap="md" direction="row">
+        <Button onClick={handleClick}>Open toast with custom duration</Button>
+      </Box>
+    );
+  })();
+
+export const NotDismissible = () =>
+  (() => {
+    const handleClick = () => {
+      toast(`This toast can't be dismissed`, {
+        duration: 5000,
+        canDismiss: false,
+      });
+    };
+    return (
+      <Box gap="md" direction="row">
+        <Button onClick={handleClick}>Open non-dismissible toast</Button>
+      </Box>
+    );
+  })();
+
+export const ProgrammaticDismiss = () => {
+  const [toastId, setToastId] = useState('');
+  const handleClick = () => {
+    if (!toastId) {
+      const newToastId = toast(`Dismiss programmatically`, {
+        duration: 30000,
+        canDismiss: false,
+      });
+      setToastId(newToastId);
+    }
+  };
+  const handleDismiss = () => {
+    if (toastId) {
+      toast.dismiss(toastId);
+      setToastId('');
+    }
+  };
+  return (
+    <>
+      <Box gap="md" direction="row">
+        <Button onClick={handleClick} isDisabled={!!toastId}>
+          Show Toast
+        </Button>
+        <Button
+          variant="tertiary"
+          isDisabled={!toastId}
+          onClick={handleDismiss}
+        >
+          Dismiss toast
+        </Button>
+      </Box>
+    </>
+  );
+};
+
+export const Compact = () =>
+  (() => {
+    const handleClick = () => {
+      toast('This is compact', { isCompact: true });
+    };
+    return (
+      <Box gap="md" direction="row">
+        <Button onClick={handleClick}>Open compact toast</Button>
+      </Box>
+    );
+  })();
+
+export const BasicTypes = () =>
+  (() => {
+    const handleClick = (type: 'blank' | 'error' | 'success' | 'loading') => {
+      if (type === 'success') {
+        toast.success('Proposal saved');
+      } else if (type === 'error') {
+        toast.error('Unable to save');
+      } else if (type === 'loading') {
+        toast.loading('Loading...', { canDismiss: false });
+      } else {
+        toast('Toast without icon');
+      }
+    };
+    return (
+      <>
+        <Box fontSize="lg" fontWeight="bold" margin="0 0 md 0">
+          Basic Types
+        </Box>
+        <Box gap="md" direction="row">
+          <Button onClick={() => handleClick('blank')} variant="primary">
+            Default
+          </Button>
+          <Button onClick={() => handleClick('error')} variant="primary">
+            Error
+          </Button>
+          <Button onClick={() => handleClick('success')} variant="primary">
+            Success
+          </Button>
+          <Button onClick={() => handleClick('loading')} variant="primary">
+            Loading
+          </Button>
+        </Box>
+      </>
+    );
+  })();
+
+export const AdvancedTypes = () =>
+  (() => {
+    const handleClick = (type: 'async' | 'async-data') => {
+      if (type.includes('async')) {
+        const promise = new Promise((resolve, reject) => {
+          const randomNum = Math.floor(Math.random() * 2);
+          setTimeout(() => {
+            if (randomNum % 2 === 0) {
+              resolve(', data loaded');
+            } else {
+              reject(', bad request');
+            }
+          }, 2000);
+        });
+        toast.async(promise, {
+          loading: 'loading',
+          success: (data) => `Success${type.includes('data') ? data : ''}`,
+          error: (err) => `Error${type.includes('data') ? err : ''}`,
+        });
+      }
+    };
+    return (
+      <>
+        <Box fontSize="lg" fontWeight="bold" margin="0 0 md 0">
+          Advanced Types
+        </Box>
+        <Box display="block" childGap="md">
+          <Box display="block" childGap="sm">
+            <p>
+              With an async toast, you can pass the three states of an async op
+              (loading, success, error) to a corresponding toast state. By
+              passing the promise itself to the toast component, will will
+              handle displaying different toast variations based on the state of
+              the passed promise.
+            </p>
+            <Button onClick={() => handleClick('async')} variant="primary">
+              async
+            </Button>
+          </Box>
+          <Box display="block" childGap="sm">
+            <p>
+              If you need to include data or an error returned from the promise
+              you can pass a function to the toasts in question, see code
+              example.
+            </p>
+            <Button onClick={() => handleClick('async-data')} variant="primary">
+              async (including promise data)
+            </Button>
+          </Box>
+        </Box>
+      </>
+    );
+  })();