@hyphen/hyphen-components 2.9.0

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

@@ -0,0 +1,98 @@
+import React from 'react';
+import { ValueOrFunction } from '../../types';
+
+export type ToastType = 'success' | 'error' | 'loading' | 'blank' | 'custom';
+
+export type ToastPosition =
+  | 'top-left'
+  | 'top-center'
+  | 'top-right'
+  | 'bottom-left'
+  | 'bottom-center'
+  | 'bottom-right';
+
+export interface Toast {
+  /**
+   * Type of toast to create.
+   */
+  type: ToastType;
+  /**
+   * Unique id for the toast.
+   */
+  id: string;
+  /**
+   * Toast message
+   */
+  message: ValueOrFunction<React.ReactNode, Toast>;
+  /**
+   * Determine of toast layout is compact or default.
+   */
+  isCompact?: boolean;
+  /**
+   * Custom duration for toast.
+   */
+  duration?: number;
+  /**
+   * Amount of time the toast timeout has been paused for.
+   * When the toast timeout is paused, its auto-dismissal will be delayed.
+   */
+  pauseDuration: number;
+  /**
+   * Custom toast position, use as needed to override global position from ToastContainer.
+   */
+  position?: ToastPosition;
+  /**
+   * Accessibility options
+   */
+  ariaProps: {
+    role: 'status' | 'alert';
+    'aria-live': 'assertive' | 'off' | 'polite';
+  };
+  /**
+   * Whether the toast can be dismissed (if true, the toast will include a close button)
+   */
+  canDismiss?: boolean;
+  /**
+   * Custom styles.
+   */
+  style?: React.CSSProperties;
+  /**
+   * Custom className
+   */
+  className?: string;
+  /**
+   * Epoch timestamp
+   */
+  createdAt: number;
+  /**
+   * Whether the toast is visible at the current time.
+   * Used in order to display a proper fade-out animation before the element is fully removed from the DOM.
+   */
+  visible: boolean;
+  /**
+   * Height of element (calculated with getBoundingClientRect)
+   */
+  height?: number;
+}
+
+export type ToastOptions = Partial<
+  Pick<
+    Toast,
+    | 'id'
+    | 'duration'
+    | 'ariaProps'
+    | 'className'
+    | 'style'
+    | 'position'
+    | 'canDismiss'
+    | 'isCompact'
+  >
+>;
+
+/**
+ * Extends toast options so that you can include options for each type of toast in the options.
+ * e.g: { duration: 1000, success: { duration: 2000 } }
+ */
+export type ExtendedToastOptions = ToastOptions & {
+  [key in ToastType]?: ToastOptions;
+};

package/src/components/Toast/ToastContainer.tsx

@@ -0,0 +1,170 @@
+import React from 'react';
+import { prefersReducedMotion } from '../../lib/prefersReducedMotion';
+import { resolveValue } from '../../lib/resolveValue';
+import { Box } from '../Box/Box';
+import { Toast, ToastPosition, ExtendedToastOptions } from './Toast.types';
+import { ToastNotification } from './ToastNotification';
+import { useToasts } from './useToasts';
+import { toast } from './toast';
+
+export const createRectRef =
+  (onRect: (rect: DOMRect) => void) =>
+  (el: HTMLElement | null): void => {
+    if (el) {
+      const boundingRect = el.getBoundingClientRect();
+      onRect(boundingRect);
+    }
+  };
+
+const getPositionStyle = (
+  position: ToastPosition,
+  offset: number
+): React.CSSProperties => {
+  const top = position.includes('top');
+  const verticalStyle: React.CSSProperties = top ? { top: 0 } : { bottom: 0 };
+  const horizontalStyle = {
+    ...(position.includes('center') && { justifyContent: 'center' }),
+    ...(!position.includes('center') &&
+      position.includes('right') && { justifyContent: 'flex-end' }),
+  };
+  return {
+    left: 0,
+    right: 0,
+    display: 'flex',
+    position: 'absolute',
+    transition: prefersReducedMotion()
+      ? undefined
+      : 'all 230ms cubic-bezier(.21,1.02,.73,1)',
+    transform: `translateY(${offset * (top ? 1 : -1)}px)`,
+    ...verticalStyle,
+    ...horizontalStyle,
+  };
+};
+
+export interface ToastContainerProps {
+  /**
+   * Render function for each individual toast.
+   * This can be used to render custom toasts, although we recommend using the standard version,
+   * unless absolutely necessary.
+   */
+  children?: (t: Toast) => JSX.Element;
+  /**
+   * Style object for the toast container if needed.
+   */
+  containerStyle?: React.CSSProperties;
+  /**
+   * Custom classname for toast container if needed.
+   */
+  containerClassName?: string;
+  /**
+   * The vertical gap between each toast notification when multiple toasts are on screen (in pixels).
+   */
+  gutter?: number;
+  /**
+   * Global position for all toasts in container.
+   * NOTE: This can be overwritten by the position property of each individual toast.
+   */
+  position?: ToastPosition;
+  /**
+   * Display toasts in reverse order.
+   * NOTE: Reverse order in this case means that older toasts remain close to the position origin.
+   * and newer toasts appear further away from the origin.
+   */
+  reverseOrder?: boolean;
+  /**
+   * Global options for each toast. Can be overwritten for each individual toast as needed.
+   */
+  toastOptions?: ExtendedToastOptions;
+  /**
+   * Props spread into main container.
+   */
+  [x: string]: unknown; // eslint-disable-line
+}
+
+const DEFAULT_OFFSET = 16;
+
+const renderNotification = (
+  currentToast: Toast,
+  children: ((t: Toast) => JSX.Element) | undefined,
+  containerPosition: ToastContainerProps['position']
+) => {
+  const toastPosition = currentToast.position || containerPosition;
+
+  if (currentToast.type === 'custom') {
+    return resolveValue(currentToast.message, currentToast);
+  }
+
+  if (children) {
+    return children(currentToast);
+  }
+
+  return (
+    <ToastNotification
+      toast={currentToast}
+      position={toastPosition}
+      onDismiss={() => toast.dismiss(currentToast.id)}
+    />
+  );
+};
+
+export const ToastContainer: React.FC<ToastContainerProps> = ({
+  children = undefined,
+  containerStyle = undefined,
+  containerClassName = undefined,
+  gutter = 8,
+  position = 'top-center',
+  reverseOrder = false,
+  toastOptions,
+  ...restProps
+}) => {
+  const { toasts, handlers } = useToasts(toastOptions);
+
+  return (
+    <Box
+      style={{
+        top: DEFAULT_OFFSET,
+        left: DEFAULT_OFFSET,
+        right: DEFAULT_OFFSET,
+        bottom: DEFAULT_OFFSET,
+        pointerEvents: 'none', // ensure background elements are clickable
+        ...containerStyle,
+      }}
+      position="fixed"
+      zIndex="popover"
+      className={containerClassName}
+      onMouseEnter={handlers.startPause}
+      onMouseLeave={handlers.endPause}
+      {...restProps}
+    >
+      {toasts.map((t) => {
+        const toastPosition = t.position || position;
+        const offset = handlers.calculateOffset(t, {
+          reverseOrder,
+          gutter,
+          defaultPosition: position,
+        });
+        const positionStyle = getPositionStyle(toastPosition, offset);
+
+        const ref = t.height
+          ? undefined
+          : createRectRef((rect) => {
+              handlers.updateHeight(t.id, rect.height);
+            });
+
+        return (
+          <Box
+            ref={ref}
+            zIndex={t.visible ? 'popover' : undefined}
+            key={t.id}
+            style={{
+              ...positionStyle,
+            }}
+            display="block"
+          >
+            {renderNotification(t, children, position)}
+          </Box>
+        );
+      })}
+    </Box>
+  );
+};

package/src/components/Toast/ToastNotification.module.scss

@@ -0,0 +1,63 @@
+.toast-notification {
+  background-color: var(--color-background-primary);
+  color: var(--color-font-primary);
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--size-border-radius-lg);
+  box-shadow: var(--size-box-shadow-md);
+  font-size: var(--size-font-size-sm);
+  will-change: transform;
+  pointer-events: auto;
+}
+
+.toast-dismiss {
+  border-color: var(--color-border-default);
+  color: var(--color-font-primary);
+}
+
+.toast-notification-enter-top {
+  :global {
+    animation: enterTop 0.25s cubic-bezier(0.21, 1.02, 0.73, 1) forwards;
+  }
+}
+
+.toast-notification-exit-top {
+  :global {
+    animation: exitTop 0.3s forwards cubic-bezier(0.06, 0.71, 0.55, 1);
+  }
+}
+
+.toast-notification-enter-bottom {
+  :global {
+    animation: enterBottom 0.25s cubic-bezier(0.21, 1.02, 0.73, 1) forwards;
+  }
+}
+
+.toast-notification-exit-bottom {
+  :global {
+    animation: exitBottom 0.3s forwards cubic-bezier(0.06, 0.71, 0.55, 1);
+  }
+}
+
+.toast-notification-exit-left {
+  :global {
+    animation: exitLeft 0.3s forwards cubic-bezier(0.06, 0.71, 0.55, 1);
+  }
+}
+
+.toast-notification-exit-right {
+  :global {
+    animation: exitRight 0.3s forwards cubic-bezier(0.06, 0.71, 0.55, 1);
+  }
+}
+
+.toast-notification-fade-in {
+  :global {
+    animation: fadeIn 0.25s cubic-bezier(0.21, 1.02, 0.73, 1) forwards;
+  }
+}
+
+.toast-notification-fade-out {
+  :global {
+    animation: fadeOut 0.3s forwards cubic-bezier(0.06, 0.71, 0.55, 1);
+  }
+}

package/src/components/Toast/ToastNotification.tsx

@@ -0,0 +1,176 @@
+import React from 'react';
+import classNames from 'classnames';
+import { Toast, ToastPosition } from './Toast.types';
+import { resolveValue } from '../../lib/resolveValue';
+import { prefersReducedMotion } from '../../lib/prefersReducedMotion';
+import { Box } from '../Box/Box';
+import { Icon } from '../Icon/Icon';
+import { Spinner } from '../Spinner/Spinner';
+import { IconName, FontColor } from '../../types';
+import styles from './ToastNotification.module.scss';
+
+interface ToastNotificationProps {
+  /**
+   * Toast object
+   */
+  toast: Toast;
+  /**
+   * Custom position for toast (overrides global container toast position).
+   */
+  position?: ToastPosition;
+  /**
+   * Custom styles for toast.
+   */
+  style?: React.CSSProperties;
+  /**
+   * Render function to create custom toast notification.
+   */
+  children?: (components: { message: React.ReactNode }) => React.ReactNode;
+  /**
+   * Handler for when the dismiss button is pressed.
+   */
+  onDismiss?: () => void;
+}
+
+const getAnimationClass = (
+  position: ToastPosition,
+  visible: boolean
+): React.CSSProperties | string => {
+  const verticalPosition = position.includes('top') ? 'top' : 'bottom';
+  const horizontalPosition = position.includes('left') ? 'left' : 'right';
+  const isCentered = position.includes('center');
+
+  const [enter, exit] = prefersReducedMotion()
+    ? [
+        styles['toast-notification-fade-in'],
+        styles['toast-notification-fade-out'],
+      ]
+    : [
+        styles[`toast-notification-enter-${verticalPosition}`],
+        styles[
+          `toast-notification-exit-${
+            isCentered ? verticalPosition : horizontalPosition
+          }`
+        ],
+      ];
+
+  return visible ? enter : exit;
+};
+
+const renderToastIcon = (toast: Toast) => {
+  const { type } = toast;
+
+  if (type === 'blank') return;
+
+  let iconName: IconName = 'exclamation-mark';
+  let iconColor: FontColor = 'base'; // dark
+
+  if (type === 'success') {
+    iconName = 'c-check';
+    iconColor = 'success';
+  }
+
+  if (type === 'error') {
+    iconName = 'c-warning';
+    iconColor = 'danger';
+  }
+
+  const icon =
+    type !== 'loading' ? (
+      <Icon name={iconName} color={iconColor} />
+    ) : (
+      <Spinner />
+    );
+
+  // eslint-disable-next-line consistent-return
+  return (
+    <Box justifyContent="center" height="100">
+      {icon}
+    </Box>
+  );
+};
+
+const renderDismissIcon = (
+  toast: Toast,
+  onDismiss: ToastNotificationProps['onDismiss']
+) => {
+  if (!toast.canDismiss) return;
+
+  // eslint-disable-next-line consistent-return
+  return (
+    <Box
+      as="button"
+      borderWidth="0 0 0 sm"
+      className={styles['toast-dismiss']}
+      padding="0 0 0 sm"
+      alignItems="center"
+      justifyContent="center"
+      cursor="pointer"
+      background="transparent" // transparent
+      height="100"
+      onClick={onDismiss}
+      aria-label="dismiss notification"
+    >
+      <Icon name="remove" />
+    </Box>
+  );
+};
+
+// eslint-disable-next-line import/prefer-default-export
+export const ToastNotification: React.FC<ToastNotificationProps> = React.memo(
+  ({ toast, position = 'top-center', style, children, onDismiss }) => {
+    const message = (
+      <Box
+        direction="row"
+        justifyContent="center"
+        style={{
+          flex: '1 1 auto',
+        }}
+        {...toast.ariaProps}
+      >
+        {resolveValue(toast.message, toast)}
+      </Box>
+    );
+
+    const animationClass = toast?.height
+      ? getAnimationClass(toast.position || position, toast.visible)
+      : undefined;
+
+    const classes = classNames(
+      toast.className,
+      styles['toast-notification'],
+      animationClass,
+      {
+        'toast-notification--not-visible': !toast.visible,
+      }
+    );
+
+    return (
+      <Box
+        alignItems="center"
+        maxWidth="300px"
+        padding={toast.isCompact ? 'sm' : 'md'}
+        direction="row"
+        className={classes}
+        gap="sm"
+        style={{
+          ...style,
+          ...toast.style,
+          ...(!toast.height && { opacity: 0 }),
+        }}
+      >
+        {typeof children === 'function' ? (
+          children({
+            message,
+          })
+        ) : (
+          <>
+            {renderToastIcon(toast)}
+            {message}
+            {renderDismissIcon(toast, onDismiss)}
+          </>
+        )}
+      </Box>
+    );
+  }
+);

package/src/components/Toast/index.ts

@@ -0,0 +1,4 @@
+export * from './ToastContainer';
+export * from './Toast.types';
+export * from './toast';
+export * from './useToasts';

package/src/components/Toast/toast.ts

@@ -0,0 +1,102 @@
+import React from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import { resolveValue } from '../../lib/resolveValue';
+import { ValueOrFunction } from '../../types';
+import {
+  Toast,
+  ToastOptions,
+  ToastType,
+  ExtendedToastOptions,
+} from './Toast.types';
+import { ToastStoreActionType, dispatch } from './Toast.store';
+
+type Message = ValueOrFunction<React.ReactNode, Toast>;
+
+type ToastHandler = (message: Message, options?: ToastOptions) => string;
+
+const createToast = (
+  message: Message,
+  type: ToastType,
+  opts?: ToastOptions
+): Toast => ({
+  createdAt: Date.now(),
+  visible: true,
+  type,
+  ariaProps: {
+    role: 'status',
+    'aria-live': 'polite',
+  },
+  message,
+  pauseDuration: 0,
+  ...opts,
+  id: opts?.id || uuidv4(),
+  canDismiss: type !== 'loading' && opts?.canDismiss !== false,
+});
+
+const createHandler =
+  (type: ToastType): ToastHandler =>
+  (message, options) => {
+    const toast = createToast(message, type, options);
+
+    dispatch({
+      type: ToastStoreActionType.UPSERT_TOAST,
+      payload: { toast },
+    });
+    return toast.id;
+  };
+
+// eslint-disable-next-line
+const toast = (message: Message, opts?: ToastOptions) =>
+  createHandler('blank')(message, opts);
+
+toast.error = createHandler('error');
+toast.success = createHandler('success');
+toast.loading = createHandler('loading');
+toast.custom = createHandler('custom');
+
+toast.dismiss = (toastId?: string) => {
+  dispatch({
+    type: ToastStoreActionType.DISMISS_TOAST,
+    payload: { toastId },
+  });
+};
+
+toast.remove = (toastId?: string) =>
+  dispatch({
+    type: ToastStoreActionType.REMOVE_TOAST,
+    payload: { toastId },
+  });
+
+// eslint-disable-next-line func-names
+toast.async = function <T>(
+  promise: Promise<T>,
+  messages: {
+    loading: React.ReactNode;
+    success: ValueOrFunction<React.ReactNode, T>;
+    error: ValueOrFunction<React.ReactNode, unknown>;
+  },
+  opts?: ExtendedToastOptions
+) {
+  const id = toast.loading(messages.loading, { ...opts, ...opts?.loading });
+
+  promise
+    .then((data) => {
+      toast.success(resolveValue(messages.success, data), {
+        id,
+        ...opts,
+        ...opts?.success,
+      });
+      return data;
+    })
+    .catch((err) => {
+      toast.error(resolveValue(messages.error, err), {
+        id,
+        ...opts,
+        ...opts?.error,
+      });
+    });
+
+  return promise;
+};
+
+export { toast }; // eslint-disable-line import/prefer-default-export

package/src/components/Toast/useToasts.ts

@@ -0,0 +1,102 @@
+import { useEffect, useMemo } from 'react';
+import { ExtendedToastOptions, Toast, ToastPosition } from './Toast.types';
+import { useToastStore, dispatch, ToastStoreActionType } from './Toast.store';
+import { toast } from './toast';
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export const useToasts = (toastOptions?: ExtendedToastOptions) => {
+  // eslint-disable-line import/prefer-default-export
+  const { toasts, pausedAt } = useToastStore(toastOptions);
+
+  useEffect(() => {
+    if (pausedAt) {
+      return;
+    }
+
+    const now = Date.now();
+    const timeouts = toasts.map((t) => {
+      if (t.duration === Infinity) {
+        return undefined;
+      }
+
+      const durationLeft =
+        (t.duration || 0) + t.pauseDuration - (now - t.createdAt);
+
+      if (durationLeft < 0) {
+        if (t.visible) {
+          toast.dismiss(t.id);
+        }
+        return undefined;
+      }
+      return setTimeout(() => toast.dismiss(t.id), durationLeft); // eslint-disable-line consistent-return
+    });
+
+    return () => {
+      // eslint-disable-line consistent-return
+      timeouts.forEach((timeout) => timeout && clearTimeout(timeout));
+    };
+  }, [toasts, pausedAt]);
+
+  const handlers = useMemo(
+    () => ({
+      startPause: () => {
+        dispatch({
+          type: ToastStoreActionType.START_PAUSE,
+          payload: { time: Date.now() },
+        });
+      },
+      endPause: () => {
+        if (pausedAt) {
+          dispatch({
+            type: ToastStoreActionType.END_PAUSE,
+            payload: { time: Date.now() },
+          });
+        }
+      },
+      updateHeight: (toastId: string, height: number) => {
+        if (toasts.find((t) => t.id === toastId)?.height === height) {
+          return;
+        }
+        dispatch({
+          type: ToastStoreActionType.UPDATE_TOAST,
+          payload: { toast: { id: toastId, height } },
+        });
+      },
+      calculateOffset: (
+        currentToast: Toast,
+        opts: {
+          reverseOrder: boolean;
+          gutter: number;
+          defaultPosition?: ToastPosition;
+        }
+      ) => {
+        const { reverseOrder, gutter, defaultPosition } = opts || {};
+
+        const relevantToasts = toasts.filter(
+          (t) =>
+            (t.position || defaultPosition) ===
+              (currentToast.position || defaultPosition) && t.height
+        );
+        const toastIndex = relevantToasts.findIndex(
+          (t) => t.id === currentToast.id
+        );
+        const toastsBefore = relevantToasts.filter(
+          (t, i) => i < toastIndex && t.visible
+        ).length;
+
+        const offset = relevantToasts
+          .filter((t) => t.visible)
+          .slice(...(reverseOrder ? [toastsBefore + 1] : [0, toastsBefore]))
+          .reduce((acc, t) => acc + (t.height || 0) + gutter, 0);
+
+        return offset;
+      },
+    }),
+    [toasts, pausedAt]
+  );
+
+  return {
+    toasts,
+    handlers,
+  };
+};