@jordan-mace/chaser-design-system 1.2.2 → 1.2.4

package/src/components/Toast/Toast.tsx

@@ -0,0 +1,342 @@
+import React, { createContext, useContext, useState, useEffect, useCallback, useRef, ReactNode } from 'react';
+import { createPortal } from 'react-dom';
+import clsx from 'clsx';
+import {
+  toastContainer,
+  toastWrapper,
+  toastItem,
+  toastCloseButton,
+  toastProgressBarContainer,
+  toastProgressBar,
+  toastContent,
+  fadeOutSuccess,
+  fadeOutError,
+  fadeOutWarning,
+  fadeOutInfo,
+  slideInRight,
+} from './styles.css';
+import { Icon } from '../Icon';
+
+export type ToastPosition =
+  | 'top-left'
+  | 'top-center'
+  | 'top-right'
+  | 'bottom-left'
+  | 'bottom-center'
+  | 'bottom-right';
+
+export type ToastVariant = 'success' | 'error' | 'warning' | 'info';
+
+export type ToastOptions = {
+  duration?: number;
+  closable?: boolean;
+  position?: ToastPosition;
+  onClose?: () => void;
+};
+
+type ToastItem = {
+  id: string;
+  message: string;
+  variant: ToastVariant;
+  options: ToastOptions;
+  startTime: number;
+  paused: boolean;
+  duration: number;
+};
+
+type ToastContextType = {
+  addToast: (message: string, variant?: ToastVariant, options?: ToastOptions) => string;
+  removeToast: (id: string) => void;
+  handleDismissAll: () => void;
+  handleResumeAll: () => void;
+};
+
+const ToastContext = createContext<ToastContextType>({
+  addToast: () => '',
+  removeToast: () => {},
+  handleDismissAll: () => {},
+  handleResumeAll: () => {},
+});
+
+const getFadeOutForVariant = (variant: ToastVariant) => {
+  const fadeOutMap = {
+    success: fadeOutSuccess,
+    error: fadeOutError,
+    warning: fadeOutWarning,
+    info: fadeOutInfo,
+  };
+  return fadeOutMap[variant] || fadeOutInfo;
+};
+
+const positionToClassKey: Record<ToastPosition, keyof typeof toastWrapper> = {
+  'top-left': 'topLeft',
+  'top-center': 'topCenter',
+  'top-right': 'topRight',
+  'bottom-left': 'bottomLeft',
+  'bottom-center': 'bottomCenter',
+  'bottom-right': 'bottomRight',
+};
+
+type ToastProviderProps = {
+  children: ReactNode;
+  position?: ToastPosition;
+  maxVisible?: number;
+  stacking?: 'stack' | 'replace';
+};
+
+export const ToastProvider = ({
+  children,
+  position = 'top-right',
+  maxVisible = 5,
+  stacking = 'stack',
+}: ToastProviderProps) => {
+  const [toasts, setToasts] = useState<ToastItem[]>([]);
+  const [pauseId, setPauseId] = useState<string | null>(null);
+  const timeoutsRef = useRef<Map<string, NodeJS.Timeout>>(new Map());
+  const pauseTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const toastsRef = useRef<ToastItem[]>([]);
+
+  // Keep ref in sync with state
+  useEffect(() => {
+    toastsRef.current = toasts;
+  }, [toasts]);
+
+  const removeToastInternal = useCallback((id: string) => {
+    setToasts((prev) => {
+      const toast = prev.find((t) => t.id === id);
+      if (toast) {
+        toast.options.onClose?.();
+      }
+      return prev.filter((t) => t.id !== id);
+    });
+
+    const timeout = timeoutsRef.current.get(id);
+    if (timeout) {
+      clearTimeout(timeout);
+      timeoutsRef.current.delete(id);
+    }
+  }, []);
+
+  const addToast = useCallback(
+    (message: string, variant: ToastVariant = 'info', options: ToastOptions = {}): string => {
+      const id = `toast-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+      const duration = options.duration ?? 5000;
+      const startTime = Date.now();
+
+      const newToast: ToastItem = {
+        id,
+        message,
+        variant,
+        options: { ...options, duration, position: options.position ?? position },
+        startTime,
+        paused: false,
+        duration,
+      };
+
+      setToasts((prev) => {
+        if (stacking === 'replace') {
+          return [newToast];
+        }
+        const filtered = prev.filter((t) => {
+          const elapsed = Date.now() - t.startTime;
+          return elapsed < (t.options.duration ?? 5000);
+        });
+        return [...filtered, newToast].slice(-maxVisible);
+      });
+
+      const timeoutId = setTimeout(() => {
+        removeToastInternal(id);
+      }, duration);
+
+      timeoutsRef.current.set(id, timeoutId);
+
+      return id;
+    },
+    [maxVisible, stacking, position, removeToastInternal],
+  );
+
+  const dismissInternal = useCallback((id: string) => {
+    const toast = toastsRef.current.find((t) => t.id === id);
+    if (!toast) return;
+
+    setToasts((prev) =>
+      prev.map((t) => {
+        if (t.id === id) {
+          return { ...t, paused: true };
+        }
+        return t;
+      }),
+    );
+
+    if (pauseTimeoutRef.current) {
+      clearTimeout(pauseTimeoutRef.current);
+    }
+
+    setPauseId(id);
+    pauseTimeoutRef.current = setTimeout(() => {
+      setPauseId(null);
+      removeToastInternal(id);
+    }, 500);
+
+    const timeout = timeoutsRef.current.get(id);
+    if (timeout) {
+      clearTimeout(timeout);
+      timeoutsRef.current.delete(id);
+    }
+  }, [removeToastInternal]);
+
+  const dismissAllInternal = useCallback(() => {
+    setPauseId('all');
+    toastsRef.current.forEach((toast) => {
+      const timeout = timeoutsRef.current.get(toast.id);
+      if (timeout) {
+        clearTimeout(timeout);
+        timeoutsRef.current.delete(toast.id);
+      }
+    });
+  }, []);
+
+  const resumeAllInternal = useCallback(() => {
+    setPauseId(null);
+    toastsRef.current.forEach((toast) => {
+      if (toast.paused && toast.duration > 500) {
+        const timeout = setTimeout(() => {
+          removeToastInternal(toast.id);
+        }, toast.duration - (Date.now() - toast.startTime));
+        timeoutsRef.current.set(toast.id, timeout);
+      }
+    });
+  }, [removeToastInternal]);
+
+  useEffect(() => {
+    return () => {
+      timeoutsRef.current.forEach((timeout) => clearTimeout(timeout));
+      if (pauseTimeoutRef.current) {
+        clearTimeout(pauseTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  const value: ToastContextType = {
+    addToast,
+    removeToast: removeToastInternal,
+    handleDismissAll: dismissAllInternal,
+    handleResumeAll: resumeAllInternal,
+  };
+
+  return (
+    <ToastContext.Provider value={value}>
+      {children}
+      <ToastContainer
+        toasts={toasts}
+        position={position}
+        pauseId={pauseId}
+        onDismiss={dismissInternal}
+        onDismissAll={dismissAllInternal}
+        onResumeAll={resumeAllInternal}
+      />
+    </ToastContext.Provider>
+  );
+};
+
+type ToastContainerProps = {
+  toasts: ToastItem[];
+  position: ToastPosition;
+  pauseId: string | null;
+  onDismiss: (id: string) => void;
+  onDismissAll: () => void;
+  onResumeAll: () => void;
+};
+
+const ToastContainer = ({
+  toasts,
+  position,
+  pauseId,
+  onDismiss,
+  onDismissAll,
+  onResumeAll,
+}: ToastContainerProps) => {
+  const [container, setContainer] = useState<HTMLElement | null>(null);
+
+  useEffect(() => {
+    const existingContainer = document.getElementById('toast-container');
+    if (existingContainer) {
+      setContainer(existingContainer);
+    } else {
+      const el = document.createElement('div');
+      el.id = 'toast-container';
+      document.body.appendChild(el);
+      setContainer(el);
+    }
+  }, []);
+
+  if (!container) return null;
+
+  return createPortal(
+    <div
+      className={clsx(toastContainer, toastWrapper[positionToClassKey[position]])}
+      onMouseEnter={onDismissAll}
+      onMouseLeave={onResumeAll}
+    >
+      {toasts.map((toast) => {
+        const elapsed = Date.now() - toast.startTime;
+        const progress = ((toast.duration - elapsed) / toast.duration) * 100;
+        const fadeOutAnimation = getFadeOutForVariant(toast.variant);
+
+        return (
+          <div
+            key={toast.id}
+            className={toastItem}
+            style={{
+              opacity: toast.paused || pauseId !== null ? 0.7 : 1,
+              animation: `${slideInRight} 0.2s ease, 0.2s ease ${fadeOutAnimation} forwards`,
+            }}
+            onMouseEnter={() => onDismiss(toast.id)}
+          >
+            <div className={toastContent}>
+              <Icon name={toast.variant === 'success' ? 'check' : toast.variant === 'error' ? 'error' : 'info'} />
+              <span style={{ marginLeft: '8px' }}>{toast.message}</span>
+              {toast.options.closable !== false && (
+                <button
+                  type="button"
+                  className={toastCloseButton}
+                  onClick={() => onDismiss(toast.id)}
+                  aria-label="Close toast"
+                >
+                  <Icon name="close" />
+                </button>
+              )}
+              {toast.duration > 0 && (
+                <div className={toastProgressBarContainer}>
+                  <div
+                    className={toastProgressBar}
+                    style={{ width: `${progress}%` }}
+                  />
+                </div>
+              )}
+            </div>
+          </div>
+        );
+      })}
+    </div>,
+    container,
+  );
+};
+
+export const useToast = () => {
+  const context = useContext(ToastContext);
+  return context;
+};
+
+export type ToastComponentProps = {
+  message: string;
+  variant?: ToastVariant;
+  options?: ToastOptions;
+  className?: string;
+};
+
+export const Toast = ({ message, variant = 'info', options, className }: ToastComponentProps) => {
+  return null;
+};
+
+Toast.displayName = 'Toast';

package/src/components/Toast/index.ts

@@ -0,0 +1,9 @@
+export {
+  ToastProvider,
+  Toast,
+  useToast,
+  type ToastOptions,
+  type ToastPosition,
+  type ToastVariant,
+  type ToastComponentProps,
+} from './Toast';

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

@@ -0,0 +1,213 @@
+import { style, styleVariants, keyframes } from '@vanilla-extract/css';
+import { vars } from '../../styles/theme.css';
+import { styleWithLayer } from '../../styles/utils';
+
+export const slideInRight = keyframes({
+  '0%': {
+    transform: 'translateX(100%)',
+    opacity: '0',
+  },
+  '100%': {
+    transform: 'translateX(0)',
+    opacity: '1',
+  },
+});
+
+export const slideInLeft = keyframes({
+  '0%': {
+    transform: 'translateX(-100%)',
+    opacity: '0',
+  },
+  '100%': {
+    transform: 'translateX(0)',
+    opacity: '1',
+  },
+});
+
+export const slideInTop = keyframes({
+  '0%': {
+    transform: 'translateY(-100%)',
+    opacity: '0',
+  },
+  '100%': {
+    transform: 'translateY(0)',
+    opacity: '1',
+  },
+});
+
+export const slideOutRight = keyframes({
+  '0%': {
+    transform: 'translateX(0)',
+    opacity: '1',
+  },
+  '100%': {
+    transform: 'translateX(100%)',
+    opacity: '0',
+  },
+});
+
+export const slideOutLeft = keyframes({
+  '0%': {
+    transform: 'translateX(0)',
+    opacity: '1',
+  },
+  '100%': {
+    transform: 'translateX(-100%)',
+    opacity: '0',
+  },
+});
+
+export const slideInBottom = keyframes({
+  '0%': {
+    transform: 'translateY(100%)',
+    opacity: '0',
+  },
+  '100%': {
+    transform: 'translateY(0)',
+    opacity: '1',
+  },
+});
+
+export const slideOutBottom = keyframes({
+  '0%': {
+    transform: 'translateY(0)',
+    opacity: '1',
+  },
+  '100%': {
+    transform: 'translateY(100%)',
+    opacity: '0',
+  },
+});
+
+export const fadeIn = keyframes({
+  '0%': { opacity: '0' },
+  '100%': { opacity: '1' },
+});
+
+export const fadeOut = keyframes({
+  '0%': { opacity: '1' },
+  '100%': { opacity: '0' },
+});
+
+export const fadeOutSuccess = keyframes({
+  '0%': { opacity: '1' },
+  '100%': { opacity: '0' },
+});
+
+export const fadeOutError = keyframes({
+  '0%': { opacity: '1' },
+  '100%': { opacity: '0' },
+});
+
+export const fadeOutWarning = keyframes({
+  '0%': { opacity: '1' },
+  '100%': { opacity: '0' },
+});
+
+export const fadeOutInfo = keyframes({
+  '0%': { opacity: '1' },
+  '100%': { opacity: '0' },
+});
+
+export const slideOut = keyframes({
+  '0%': {
+    transform: 'translateX(0)',
+    opacity: '1',
+  },
+  '100%': {
+    transform: 'translateX(100%)',
+    opacity: '0',
+  },
+});
+
+export const toastContainer = style({
+  position: 'fixed',
+  zIndex: '9999',
+  pointerEvents: 'none',
+});
+
+export const toastWrapper = styleVariants({
+  topLeft: {
+    position: 'fixed',
+    top: '16px',
+    left: '16px',
+    zIndex: '9999',
+  },
+  topCenter: {
+    position: 'fixed',
+    top: '16px',
+    left: '50%',
+    transform: 'translateX(-50%)',
+    zIndex: '9999',
+  },
+  topRight: {
+    position: 'fixed',
+    top: '16px',
+    right: '16px',
+    zIndex: '9999',
+  },
+  bottomLeft: {
+    position: 'fixed',
+    bottom: '16px',
+    left: '16px',
+    zIndex: '9999',
+  },
+  bottomCenter: {
+    position: 'fixed',
+    bottom: '16px',
+    left: '50%',
+    transform: 'translateX(-50%)',
+    zIndex: '9999',
+  },
+  bottomRight: {
+    position: 'fixed',
+    bottom: '16px',
+    right: '16px',
+    zIndex: '9999',
+  },
+});
+
+export const toastItem = style({
+  width: '300px',
+  pointerEvents: 'auto',
+  marginBottom: '8px',
+});
+
+export const toastCloseButton = style({
+  background: 'none',
+  border: 'none',
+  cursor: 'pointer',
+  padding: '0',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  color: vars.colors.textSecondary,
+  fontSize: '16px',
+  lineHeight: '1',
+  ':hover': {
+    color: vars.colors.textPrimary,
+  },
+});
+
+export const toastProgressBarContainer = style({
+  position: 'absolute',
+  left: 0,
+  right: 0,
+  bottom: 0,
+  height: '3px',
+  backgroundColor: 'rgba(0, 0, 0, 0.1)',
+  borderRadius: '0 0 4px 4px',
+  overflow: 'hidden',
+});
+
+export const toastProgressBar = style({
+  height: '100%',
+  borderRadius: '0 0 4px 4px',
+  transition: 'width 0.1s linear',
+  animation: `progressBar 0.3s ease ${fadeIn} forwards`,
+});
+
+export const toastContent = styleWithLayer({
+  flex: 1,
+  minWidth: 0,
+});