@fabio.caffarello/react-design-system 1.7.0 → 1.8.0

package/src/ui/organisms/Toast/ToastContainer.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import { createPortal } from 'react-dom';
+import { useToastContext } from './ToastContext';
+import { Toast } from './Toast';
+
+export interface ToastContainerProps {
+  position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center';
+  maxToasts?: number;
+}
+
+export function ToastContainer({
+  position = 'top-right',
+  maxToasts,
+}: ToastContainerProps) {
+  const { toasts, removeToast } = useToastContext();
+
+  const toastsToShow = maxToasts ? toasts.slice(0, maxToasts) : toasts;
+
+  if (toastsToShow.length === 0) return null;
+
+  const container = (
+    <div
+      className="fixed inset-0 pointer-events-none z-50"
+      aria-live="polite"
+      aria-label="Notifications"
+    >
+      {toastsToShow.map((toast, index) => {
+        const isTop = position.includes('top');
+        // Calculate offset: base 1rem + (index * 5rem for spacing)
+        const offset = 1 + index * 5;
+        
+        return (
+          <Toast
+            key={toast.id}
+            toast={toast}
+            onDismiss={removeToast}
+            position={position}
+            style={{
+              [isTop ? 'top' : 'bottom']: `${offset}rem`,
+            }}
+          />
+        );
+      })}
+    </div>
+  );
+
+  // Portal rendering
+  if (typeof window !== 'undefined') {
+    return createPortal(container, document.body);
+  }
+
+  return container;
+}

package/src/ui/organisms/Toast/ToastContext.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import { createContext, useContext } from 'react';
+
+export type ToastVariant = 'success' | 'error' | 'warning' | 'info';
+
+export interface Toast {
+  id: string;
+  title: string;
+  description?: string;
+  variant: ToastVariant;
+  duration?: number; // in milliseconds, undefined = no auto-dismiss
+  action?: {
+    label: string;
+    onClick: () => void;
+  };
+}
+
+export interface ToastContextValue {
+  toasts: Toast[];
+  addToast: (toast: Omit<Toast, 'id'>) => string;
+  removeToast: (id: string) => void;
+  clearAll: () => void;
+}
+
+export const ToastContext = createContext<ToastContextValue | undefined>(undefined);
+
+export function useToastContext(): ToastContextValue {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error('Toast components must be used within a ToastProvider');
+  }
+  return context;
+}
+
+export function useToastContextOptional(): ToastContextValue | undefined {
+  return useContext(ToastContext);
+}

package/src/ui/organisms/Toast/ToastProvider.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import { useState, useCallback, type ReactNode } from 'react';
+import { ToastContext, type Toast, type ToastContextValue } from './ToastContext';
+
+export interface ToastProviderProps {
+  children: ReactNode;
+  defaultDuration?: number; // Default auto-dismiss duration in ms
+  maxToasts?: number; // Maximum number of toasts to show
+}
+
+export function ToastProvider({
+  children,
+  defaultDuration = 5000,
+  maxToasts = 5,
+}: ToastProviderProps) {
+  const [toasts, setToasts] = useState<Toast[]>([]);
+
+  const addToast = useCallback((toast: Omit<Toast, 'id'>): string => {
+    const id = `toast-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    const newToast: Toast = {
+      ...toast,
+      id,
+      duration: toast.duration ?? defaultDuration,
+    };
+
+    setToasts((prev) => {
+      const updated = [newToast, ...prev];
+      // Limit number of toasts
+      return updated.slice(0, maxToasts);
+    });
+
+    return id;
+  }, [defaultDuration, maxToasts]);
+
+  const removeToast = useCallback((id: string) => {
+    setToasts((prev) => prev.filter((toast) => toast.id !== id));
+  }, []);
+
+  const clearAll = useCallback(() => {
+    setToasts([]);
+  }, []);
+
+  const contextValue: ToastContextValue = {
+    toasts,
+    addToast,
+    removeToast,
+    clearAll,
+  };
+
+  return (
+    <ToastContext.Provider value={contextValue}>
+      {children}
+    </ToastContext.Provider>
+  );
+}

package/src/ui/organisms/Toast/index.ts

@@ -0,0 +1,17 @@
+/**
+ * Toast Components
+ * 
+ * Toast notification system with provider, hook, and container.
+ */
+
+export { ToastProvider } from './ToastProvider';
+export { ToastContainer } from './ToastContainer';
+export { Toast } from './Toast';
+export { useToast } from './useToast';
+export { useToastContext, useToastContextOptional } from './ToastContext';
+
+export type { ToastProviderProps } from './ToastProvider';
+export type { ToastContainerProps } from './ToastContainer';
+export type { ToastProps } from './Toast';
+export type { ToastOptions } from './useToast';
+export type { Toast as ToastType, ToastVariant, ToastContextValue } from './ToastContext';

package/src/ui/organisms/Toast/useToast.ts

@@ -0,0 +1,70 @@
+'use client';
+
+import { useCallback } from 'react';
+import { useToastContext, type ToastVariant } from './ToastContext';
+
+export interface ToastOptions {
+  title: string;
+  description?: string;
+  variant?: ToastVariant;
+  duration?: number; // in milliseconds, undefined = no auto-dismiss
+  action?: {
+    label: string;
+    onClick: () => void;
+  };
+}
+
+/**
+ * useToast Hook
+ * 
+ * Hook for showing toast notifications.
+ * 
+ * @example
+ * ```tsx
+ * const toast = useToast();
+ * 
+ * toast.success('Success!', 'Operation completed successfully');
+ * toast.error('Error!', 'Something went wrong');
+ * toast.info('Info', 'Here is some information');
+ * toast.warning('Warning', 'Please be careful');
+ * ```
+ */
+export function useToast() {
+  const { addToast, removeToast, clearAll } = useToastContext();
+
+  const show = useCallback((options: ToastOptions) => {
+    return addToast({
+      title: options.title,
+      description: options.description,
+      variant: options.variant || 'info',
+      duration: options.duration,
+      action: options.action,
+    });
+  }, [addToast]);
+
+  const success = useCallback((title: string, description?: string, options?: Omit<ToastOptions, 'title' | 'description' | 'variant'>) => {
+    return show({ title, description, variant: 'success', ...options });
+  }, [show]);
+
+  const error = useCallback((title: string, description?: string, options?: Omit<ToastOptions, 'title' | 'description' | 'variant'>) => {
+    return show({ title, description, variant: 'error', ...options });
+  }, [show]);
+
+  const warning = useCallback((title: string, description?: string, options?: Omit<ToastOptions, 'title' | 'description' | 'variant'>) => {
+    return show({ title, description, variant: 'warning', ...options });
+  }, [show]);
+
+  const info = useCallback((title: string, description?: string, options?: Omit<ToastOptions, 'title' | 'description' | 'variant'>) => {
+    return show({ title, description, variant: 'info', ...options });
+  }, [show]);
+
+  return {
+    show,
+    success,
+    error,
+    warning,
+    info,
+    dismiss: removeToast,
+    clearAll,
+  };
+}

package/src/ui/organisms/index.ts

@@ -3,7 +3,22 @@ export { default as LoginBox } from "./LoginBox/LoginBox";
 export { default as Modal } from "./Modal/Modal";
 
 export { default as Table } from "./Table/Table";
-export type { TableColumn } from "./Table/Table";
+export * from "./Table";
 
 export { default as Sidebar } from "./Sidebar/Sidebar";
-export type { SidebarProps } from "./Sidebar/Sidebar";
+export * from "./Sidebar";
+
+export * from "./Dialog";
+export * from "./Toast";
+
+export { default as Stepper } from "./Stepper/Stepper";
+export type { StepperProps, StepperStep, StepperStatus } from "./Stepper/Stepper";
+
+export { default as Timeline } from "./Timeline/Timeline";
+export type { TimelineProps, TimelineItem, TimelineOrientation } from "./Timeline/Timeline";
+
+export { default as CommandPalette } from "./CommandPalette/CommandPalette";
+export type { CommandPaletteProps, CommandItem } from "./CommandPalette/CommandPalette";
+
+export { default as DataGrid } from "./DataGrid/DataGrid";
+export type { DataGridProps, DataGridColumn, DataGridGroup } from "./DataGrid/DataGrid";

package/src/ui/providers/AdvancedThemeProvider.tsx

@@ -0,0 +1,229 @@
+/**
+ * Advanced Theme Provider
+ * 
+ * Enhanced ThemeProvider with support for:
+ * - Multiple themes simultaneously
+ * - CSS variables
+ * - Theme inheritance
+ * - Smooth transitions
+ */
+
+'use client';
+
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+  useMemo,
+  useCallback,
+  type ReactNode,
+} from 'react';
+import { themeRegistry } from '../themes/ThemeRegistry';
+import { applyCSSVariables, removeCSSVariables } from '../themes/utils';
+import type { Theme, CustomThemeConfig, ThemeBuilderOptions } from '../themes/types';
+
+export interface AdvancedThemeContextValue {
+  // Current active theme
+  currentTheme: string;
+  themes: Record<string, Theme>;
+  
+  // Theme operations
+  setTheme: (themeName: string) => void;
+  registerTheme: (config: CustomThemeConfig) => Theme;
+  removeTheme: (themeName: string) => boolean;
+  
+  // Get theme
+  getTheme: (themeName?: string) => Theme | undefined;
+  
+  // Theme tokens (from current theme)
+  tokens: Theme | null;
+  
+  // Options
+  options: ThemeBuilderOptions;
+  setOptions: (options: Partial<ThemeBuilderOptions>) => void;
+}
+
+const AdvancedThemeContext = createContext<AdvancedThemeContextValue | undefined>(undefined);
+
+export interface AdvancedThemeProviderProps {
+  children: ReactNode;
+  defaultTheme?: string;
+  options?: ThemeBuilderOptions;
+  initialThemes?: CustomThemeConfig[];
+}
+
+/**
+ * Advanced ThemeProvider Component
+ * 
+ * Provides advanced theme management with support for multiple themes,
+ * CSS variables, inheritance, and smooth transitions.
+ * 
+ * @example
+ * ```tsx
+ * <AdvancedThemeProvider
+ *   defaultTheme="light"
+ *   options={{
+ *     enableCSSVariables: true,
+ *     enableTransitions: true,
+ *   }}
+ * >
+ *   <App />
+ * </AdvancedThemeProvider>
+ * ```
+ */
+export function AdvancedThemeProvider({
+  children,
+  defaultTheme = 'light',
+  options: initialOptions = {},
+  initialThemes = [],
+}: AdvancedThemeProviderProps) {
+  const [currentThemeName, setCurrentThemeName] = useState<string>(() => {
+    if (typeof window === 'undefined') {
+      return defaultTheme;
+    }
+
+    try {
+      const storageKey = initialOptions.storageKey || 'theme';
+      const stored = localStorage.getItem(storageKey);
+      if (stored && themeRegistry.has(stored)) {
+        return stored;
+      }
+    } catch (error) {
+      console.warn('Failed to read theme from localStorage:', error);
+    }
+
+    return defaultTheme;
+  });
+
+  const [options, setOptionsState] = useState<ThemeBuilderOptions>({
+    enableCSSVariables: true,
+    enableTransitions: true,
+    transitionDuration: '200ms',
+    storageKey: 'theme',
+    ...initialOptions,
+  });
+
+  // Register initial themes
+  useEffect(() => {
+    for (const config of initialThemes) {
+      themeRegistry.register(config);
+    }
+  }, [initialThemes]);
+
+  // Get current theme
+  const currentTheme = useMemo(() => {
+    return themeRegistry.get(currentThemeName);
+  }, [currentThemeName]);
+
+  // Get all themes
+  const themes = useMemo(() => {
+    return themeRegistry.getAll();
+  }, [currentThemeName]);
+
+  // Apply CSS variables
+  useEffect(() => {
+    if (!currentTheme || !options.enableCSSVariables) {
+      return;
+    }
+
+    const root = document.documentElement;
+    const variableNames = Object.keys(currentTheme.cssVariables);
+
+    // Apply transition if enabled
+    if (options.enableTransitions) {
+      const duration = options.transitionDuration || '200ms';
+      root.style.setProperty('--theme-transition', `all ${duration} ease-in-out`);
+      root.style.transition = 'var(--theme-transition)';
+    }
+
+    // Apply CSS variables
+    applyCSSVariables(root, currentTheme.cssVariables);
+
+    // Apply theme class
+    root.classList.remove(...themeRegistry.getThemeNames());
+    root.classList.add(currentThemeName);
+
+    // Cleanup function
+    return () => {
+      if (options.enableTransitions) {
+        root.style.removeProperty('--theme-transition');
+        root.style.removeProperty('transition');
+      }
+      removeCSSVariables(root, variableNames);
+    };
+  }, [currentTheme, currentThemeName, options]);
+
+  // Persist theme to localStorage
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+
+    try {
+      const storageKey = options.storageKey || 'theme';
+      localStorage.setItem(storageKey, currentThemeName);
+    } catch (error) {
+      console.warn('Failed to save theme to localStorage:', error);
+    }
+  }, [currentThemeName, options.storageKey]);
+
+  // Set theme
+  const setTheme = useCallback((themeName: string) => {
+    if (themeRegistry.has(themeName)) {
+      setCurrentThemeName(themeName);
+    } else {
+      console.warn(`Theme "${themeName}" not found. Available themes: ${themeRegistry.getThemeNames().join(', ')}`);
+    }
+  }, []);
+
+  // Register new theme
+  const registerTheme = useCallback((config: CustomThemeConfig): Theme => {
+    return themeRegistry.register(config);
+  }, []);
+
+  // Remove theme
+  const removeTheme = useCallback((themeName: string): boolean => {
+    return themeRegistry.remove(themeName);
+  }, []);
+
+  // Get theme
+  const getTheme = useCallback((themeName?: string): Theme | undefined => {
+    const name = themeName || currentThemeName;
+    return themeRegistry.get(name);
+  }, [currentThemeName]);
+
+  // Set options
+  const setOptions = useCallback((newOptions: Partial<ThemeBuilderOptions>) => {
+    setOptionsState((prev) => ({ ...prev, ...newOptions }));
+  }, []);
+
+  const value: AdvancedThemeContextValue = {
+    currentTheme: currentThemeName,
+    themes,
+    setTheme,
+    registerTheme,
+    removeTheme,
+    getTheme,
+    tokens: currentTheme || null,
+    options,
+    setOptions,
+  };
+
+  return (
+    <AdvancedThemeContext.Provider value={value}>
+      {children}
+    </AdvancedThemeContext.Provider>
+  );
+}
+
+/**
+ * Hook to use advanced theme context
+ */
+export function useAdvancedTheme(): AdvancedThemeContextValue {
+  const context = useContext(AdvancedThemeContext);
+  if (context === undefined) {
+    throw new Error('useAdvancedTheme must be used within an AdvancedThemeProvider');
+  }
+  return context;
+}

package/src/ui/providers/index.ts

@@ -0,0 +1,14 @@
+/**
+ * Providers Module
+ * 
+ * Exports for theme and context providers.
+ */
+
+export { ThemeProvider, useTheme } from './ThemeProvider';
+export type { ThemeContextValue, ThemeProviderProps } from './ThemeProvider';
+
+export {
+  AdvancedThemeProvider,
+  useAdvancedTheme,
+} from './AdvancedThemeProvider';
+export type { AdvancedThemeContextValue, AdvancedThemeProviderProps } from './AdvancedThemeProvider';