@fabio.caffarello/react-design-system 1.7.0 → 1.9.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).slice(2, 11)}`;
+    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,93 @@
+'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]);
+
+  const withUndo = useCallback(
+    (
+      title: string,
+      description: string | undefined,
+      onUndo: () => void,
+      variant: ToastVariant = 'info',
+      duration?: number
+    ) => {
+      return show({
+        title,
+        description,
+        variant,
+        duration,
+        action: {
+          label: 'Undo',
+          onClick: onUndo,
+        },
+      });
+    },
+    [show]
+  );
+
+  return {
+    show,
+    success,
+    error,
+    warning,
+    info,
+    withUndo,
+    dismiss: removeToast,
+    clearAll,
+  };
+}

package/src/ui/organisms/index.ts

@@ -2,8 +2,26 @@ 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 { default as SideNavbar } from "./SideNavbar";
+export * from "./SideNavbar";
+
+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";
+
+// Flow components have been moved to extensions/flow
+// Use: import { FlowCanvas, FlowProvider } from '@fabio.caffarello/react-design-system/extensions/flow'
+// or: import { FlowCanvas, FlowProvider } from '@fabio.caffarello/react-design-system/extensions'

package/src/ui/patterns/DataTablePattern/DataTablePattern.stories.tsx

@@ -0,0 +1,325 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import { expect, userEvent, within, waitFor } from '@storybook/test';
+import { DataTablePattern, type DataTableColumn } from './DataTablePattern';
+import { Button } from '../../atoms';
+
+interface User {
+  id: number;
+  name: string;
+  email: string;
+  role: string;
+  status: 'active' | 'inactive';
+}
+
+const meta: Meta<typeof DataTablePattern> = {
+  title: 'Patterns/DataTablePattern',
+  component: DataTablePattern,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+## DataTablePattern
+
+A complete data table pattern that combines Table, Pagination, Search, and Actions.
+This pattern solves the common UX problem of displaying searchable, paginated data tables.
+
+### Components Used
+- Table (organism)
+- Pagination (molecule)
+- SearchInput (molecule)
+- Button (atom)
+- Container (layout)
+- Stack (layout)
+
+### Events
+
+| Event | Description | Parameters | When Fired |
+|-------|-------------|------------|------------|
+| \`onSearch\` | Busca realizada | \`(query: string) => void\` | Quando o usuário busca na tabela |
+| \`onPageChange\` | Página mudou | \`(page: number) => void\` | Quando a página é alterada |
+| \`onAction\` | Ação executada | \`(action: string, row: T) => void\` | Quando uma ação é executada |
+
+### States
+
+| State | Description | How to Activate | Visual |
+|-------|-------------|-----------------|--------|
+| \`default\` | Default state | Initial render | Table with search and pagination |
+| \`loading\` | Loading state | \`loading={true}\` | Shows loading spinner |
+| \`empty\` | Empty state | No data | Shows empty message |
+| \`searching\` | Searching | Type in search | Filters table data |
+| \`with-actions\` | Com ações | \`actions\` prop definida | Botões de ação visíveis |
+| \`without-search\` | Sem busca | \`enableSearch={false}\` | Campo de busca oculto |
+| \`without-pagination\` | Sem paginação | \`enablePagination={false}\` | Controles de paginação ocultos |
+        `,
+      },
+    },
+  },
+  argTypes: {
+    enableSearch: {
+      control: 'boolean',
+      description: 'Enable search functionality',
+    },
+    enablePagination: {
+      control: 'boolean',
+      description: 'Enable pagination',
+    },
+    itemsPerPage: {
+      control: 'number',
+      description: 'Items per page',
+    },
+    loading: {
+      control: 'boolean',
+      description: 'Loading state',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof DataTablePattern>;
+
+const mockUsers: User[] = Array.from({ length: 45 }, (_, i) => ({
+  id: i + 1,
+  name: `User ${i + 1}`,
+  email: `user${i + 1}@example.com`,
+  role: i % 3 === 0 ? 'Admin' : i % 3 === 1 ? 'Editor' : 'Viewer',
+  status: i % 4 === 0 ? 'inactive' : 'active',
+}));
+
+const columns: DataTableColumn<User>[] = [
+  {
+    key: 'id',
+    label: 'ID',
+  },
+  {
+    key: 'name',
+    label: 'Name',
+  },
+  {
+    key: 'email',
+    label: 'Email',
+  },
+  {
+    key: 'role',
+    label: 'Role',
+  },
+  {
+    key: 'status',
+    label: 'Status',
+    render: (value) => (
+      <span
+        className={`px-2 py-1 rounded text-xs ${
+          value === 'active' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'
+        }`}
+      >
+        {value}
+      </span>
+    ),
+  },
+];
+
+export const Default: Story = {
+  args: {
+    columns,
+    data: mockUsers,
+    enableSearch: true,
+    enablePagination: true,
+    itemsPerPage: 10,
+  },
+};
+
+export const WithActions: Story = {
+  args: {
+    columns,
+    data: mockUsers,
+    enableSearch: true,
+    enablePagination: true,
+    actions: (
+      <>
+        <Button variant="primary">Add User</Button>
+        <Button variant="outline">Export</Button>
+      </>
+    ),
+  },
+};
+
+export const WithoutSearch: Story = {
+  args: {
+    columns,
+    data: mockUsers,
+    enableSearch: false,
+    enablePagination: true,
+    itemsPerPage: 10,
+  },
+};
+
+export const WithoutPagination: Story = {
+  args: {
+    columns,
+    data: mockUsers.slice(0, 5),
+    enableSearch: true,
+    enablePagination: false,
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    columns,
+    data: [],
+    loading: true,
+    enableSearch: true,
+    enablePagination: true,
+  },
+};
+
+export const Empty: Story = {
+  args: {
+    columns,
+    data: [],
+    enableSearch: true,
+    enablePagination: true,
+    emptyMessage: 'No users found',
+  },
+};
+
+// Event Stories
+export const WithEvents: Story = {
+  args: {
+    columns,
+    data: mockUsers,
+    enableSearch: true,
+    enablePagination: true,
+    itemsPerPage: 10,
+  },
+  decorators: [
+    (Story) => (
+      <div className="space-y-4">
+        <p className="text-sm text-gray-600">
+          Search or change pages. Check the Actions panel to see events being fired.
+        </p>
+        <Story />
+      </div>
+    ),
+  ],
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await waitFor(() => {
+      expect(canvas.getByText(/user 1/i)).toBeInTheDocument();
+    });
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Demonstrates pattern events. Search or navigate pages and check the Actions panel to see events being logged.',
+      },
+    },
+  },
+};
+
+// State Stories
+export const DefaultState: Story = {
+  args: {
+    columns,
+    data: mockUsers,
+    enableSearch: true,
+    enablePagination: true,
+    itemsPerPage: 10,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Default state - table with search and pagination.',
+      },
+    },
+  },
+};
+
+export const LoadingState: Story = {
+  args: {
+    columns,
+    data: [],
+    loading: true,
+    enableSearch: true,
+    enablePagination: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Loading state - shows loading spinner.',
+      },
+    },
+  },
+};
+
+export const EmptyState: Story = {
+  args: {
+    columns,
+    data: [],
+    enableSearch: true,
+    enablePagination: true,
+    emptyMessage: 'No users found',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Empty state - no data available.',
+      },
+    },
+  },
+};
+
+export const WithActionsState: Story = {
+  args: {
+    columns,
+    data: mockUsers,
+    enableSearch: true,
+    enablePagination: true,
+    actions: (
+      <>
+        <Button variant="primary">Add User</Button>
+        <Button variant="outline">Export</Button>
+      </>
+    ),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'With actions state - action buttons visible.',
+      },
+    },
+  },
+};
+
+export const WithoutSearchState: Story = {
+  args: {
+    columns,
+    data: mockUsers,
+    enableSearch: false,
+    enablePagination: true,
+    itemsPerPage: 10,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Without search state - search field hidden.',
+      },
+    },
+  },
+};
+
+export const WithoutPaginationState: Story = {
+  args: {
+    columns,
+    data: mockUsers.slice(0, 5),
+    enableSearch: true,
+    enablePagination: false,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Without pagination state - pagination controls hidden.',
+      },
+    },
+  },
+};