@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.26 → 0.2.28

package/src/components/ui/data-display/data-grid.tsx

@@ -2,11 +2,12 @@
 
 import * as React from 'react';
 import { useState, useCallback, useMemo, useRef, useEffect } from 'react';;
-import { 
-  DataGridProps, 
-  DataGridColumnProps, 
-  SortableColumn, 
-  FilterConfig 
+import {
+  DataGridProps,
+  DataGridColumnProps,
+  SortableColumn,
+  FilterConfig,
+  ThemeName
 } from './types.js';
 
 // Simple icon components
@@ -144,7 +145,7 @@ const ColumnPanel: React.FC<{
   groups?: string[];
   onGroupChange?: (groups: string[]) => void;
   onColumnToggle?: (columnKey: string, visible: boolean) => void;
-  theme: 'stan-design' | 'enterprise' | 'harvey';
+  theme: ThemeName;
   size: 'sm' | 'md' | 'lg';
   onClose: () => void;
 }> = ({ columns, groups = [], onGroupChange, onColumnToggle, size, onClose }) => {
@@ -235,7 +236,7 @@ const DataGridToolbar: React.FC<{
   groups?: string[];
   onGroupChange?: (groups: string[]) => void;
   columns: SortableColumn[];
-  theme: 'stan-design' | 'enterprise' | 'harvey';
+  theme: ThemeName;
   size: 'sm' | 'md' | 'lg';
 }> = ({ 
   searchable, 

package/src/components/ui/data-display/table.tsx

@@ -2,13 +2,14 @@
 
 import * as React from 'react';
 import { useState, useCallback } from 'react';;
-import { 
-  TableProps, 
-  TableRowProps, 
-  SortableColumn, 
-  SortConfig, 
+import {
+  TableProps,
+  TableRowProps,
+  SortableColumn,
+  SortConfig,
   PaginationConfig,
-  FilterConfig 
+  FilterConfig,
+  ThemeName
 } from './types.js';
 
 // Simple icon components
@@ -51,7 +52,7 @@ const TableHeader: React.FC<{
   selectable?: boolean;
   onSelectAll?: (checked: boolean) => void;
   allSelected?: boolean;
-  theme: 'stan-design' | 'enterprise' | 'harvey';
+  theme: ThemeName;
   size: 'sm' | 'md' | 'lg';
   variant: 'default' | 'bordered' | 'striped' | 'compact';
 }> = ({ 
@@ -176,7 +177,7 @@ const SearchFilterBar: React.FC<{
   searchValue?: string;
   onSearchChange?: (value: string) => void;
   filters?: FilterConfig[];
-  theme: 'stan-design' | 'enterprise' | 'harvey';
+  theme: ThemeName;
   size: 'sm' | 'md' | 'lg';
 }> = ({ 
   searchable, 
@@ -227,7 +228,7 @@ const TablePagination: React.FC<{
   pagination?: PaginationConfig;
   onPageChange?: (page: number) => void;
   onPageSizeChange?: (pageSize: number) => void;
-  theme: 'stan-design' | 'enterprise' | 'harvey';
+  theme: ThemeName;
   size: 'sm' | 'md' | 'lg';
 }> = ({ pagination, onPageChange, onPageSizeChange, size }) => {
   // const { getTheme } = useTheme();

package/src/components/ui/data-display/types.ts

@@ -2,6 +2,10 @@
 // Comprehensive type definitions for all data display components
 
 import * as React from 'react';;
+import { ThemeName } from '../../../themes/types.js';
+
+// Re-export ThemeName for data display components
+export type { ThemeName };
 
 // ============================================================================
 // COMMON INTERFACES
@@ -9,7 +13,7 @@ import * as React from 'react';;
 
 export interface DataDisplayBaseProps {
   className?: string;
-  theme?: 'stan-design' | 'enterprise' | 'harvey';
+  theme?: ThemeName;
   size?: 'sm' | 'md' | 'lg';
   variant?: 'default' | 'bordered' | 'striped';
   loading?: boolean;
@@ -83,7 +87,7 @@ export interface TableRowProps {
   onSelect: (checked: boolean) => void;
   onExpand: () => void;
   onClick: () => void;
-  theme: 'stan-design' | 'enterprise' | 'harvey';
+  theme: ThemeName;
   size: 'sm' | 'md' | 'lg';
   variant: 'default' | 'bordered' | 'striped' | 'compact';
 }
@@ -131,7 +135,7 @@ export interface DataGridColumnProps {
   onSort: () => void;
   onResize: (width: number) => void;
   sortConfig?: SortConfig;
-  theme: 'stan-design' | 'enterprise' | 'harvey';
+  theme: ThemeName;
   size: 'sm' | 'md' | 'lg';
   resizable: boolean;
 }
@@ -265,7 +269,7 @@ export interface TreeItemProps {
   onToggleExpand?: (nodeId: string, expanded: boolean) => void;
   onSelectionChange?: (nodeId: string, selected: boolean) => void;
   onClick?: (node: TreeNode, event: React.MouseEvent) => void;
-  theme: string;
+  theme: ThemeName;
   size: 'sm' | 'md' | 'lg';
   variant: 'default' | 'bordered' | 'striped';
   draggable?: boolean;
@@ -342,7 +346,7 @@ export interface TimelineItemProps {
   mode: 'left' | 'right' | 'alternate';
   actions: TimelineAction[];
   onClick?: (item: TimelineItem) => void;
-  theme: string;
+  theme: ThemeName;
   size: 'sm' | 'md' | 'lg';
   variant: 'default' | 'bordered' | 'striped';
   showConnector: boolean;

package/src/components/ui/feedback/index.ts

@@ -0,0 +1,35 @@
+// Feedback Components - Main Export
+export { Alert } from './alert';
+export { Progress } from './progress';
+export { Toast, ToastContainer } from './toast';
+export { Skeleton } from './skeleton';
+
+// Toast Management
+export { ToastProvider, useToast, useToastHelpers } from './toast-context';
+export { ToastRenderer, GlobalToastRenderer } from './toast-renderer';
+
+// Types
+export type {
+  AlertProps,
+  AlertAction,
+  StatusAlertData,
+  ToastProps,
+  ToastAction,
+  ToastContainerProps,
+  ProgressProps,
+  ProgressStep,
+  SkeletonProps,
+  SkeletonTextProps,
+  SkeletonAvatarProps,
+  SkeletonButtonProps,
+  FeedbackBaseProps
+} from './types';
+
+export type {
+  ToastInstance,
+  ToastContextValue,
+  ToastProviderProps
+} from './toast-context';
+
+// Examples
+export { statusAlertExamples } from './status-alert-example';

package/src/components/ui/feedback/status-alert-example.ts

@@ -0,0 +1,71 @@
+// StatusAlertData Usage Example
+import { StatusAlertData } from './types.js';
+
+// Simple StatusAlertData examples
+export const statusAlertExamples: StatusAlertData[] = [
+  {
+    id: 'success-alert',
+    title: 'Success',
+    message: 'Your changes have been saved successfully.',
+    type: 'success',
+    dismissible: true,
+    onDismiss: () => console.log('Success alert dismissed'),
+    showIcon: true,
+    closable: true,
+    size: 'md',
+    variant: 'default'
+  },
+  {
+    id: 'warning-alert',
+    title: 'Warning',
+    message: 'Please review your settings before proceeding.',
+    type: 'warning',
+    dismissible: true,
+    actions: [
+      {
+        label: 'Review Settings',
+        onClick: () => console.log('Review settings clicked'),
+        variant: 'primary'
+      },
+      {
+        label: 'Dismiss',
+        onClick: () => console.log('Dismissed'),
+        variant: 'secondary'
+      }
+    ],
+    showIcon: true,
+    size: 'md',
+    variant: 'bordered'
+  },
+  {
+    id: 'error-alert',
+    title: 'Error',
+    message: 'An error occurred while processing your request.',
+    type: 'error',
+    dismissible: true,
+    onDismiss: () => console.log('Error alert dismissed'),
+    actions: [
+      {
+        label: 'Retry',
+        onClick: () => console.log('Retry clicked'),
+        variant: 'primary'
+      }
+    ],
+    showIcon: true,
+    closable: true,
+    size: 'lg',
+    variant: 'filled'
+  },
+  {
+    id: 'info-alert',
+    title: 'Information',
+    message: 'System maintenance is scheduled for tonight.',
+    type: 'info',
+    dismissible: false,
+    persistent: true,
+    showIcon: true,
+    size: 'md',
+    variant: 'default',
+    theme: 'stan-design'
+  }
+];

package/src/components/ui/feedback/toast-context.tsx

@@ -0,0 +1,145 @@
+'use client'
+
+import * as React from 'react';
+import { createContext, useContext, useState, useCallback, useRef } from 'react';;
+import { ToastProps } from './types.js';
+
+export interface ToastInstance extends Omit<ToastProps, 'id'> {
+  id: string;
+  createdAt: number;
+}
+
+export interface ToastContextValue {
+  toasts: ToastInstance[];
+  addToast: (toast: Omit<ToastInstance, 'id' | 'createdAt'>) => string;
+  removeToast: (id: string) => void;
+  clearAllToasts: () => void;
+}
+
+const ToastContext = createContext<ToastContextValue | undefined>(undefined);
+
+export interface ToastProviderProps {
+  children: React.ReactNode;
+  maxToasts?: number;
+  defaultDuration?: number;
+  defaultPosition?: ToastProps['position'];
+}
+
+export const ToastProvider: React.FC<ToastProviderProps> = ({
+  children,
+  maxToasts = 5,
+  defaultDuration = 5000,
+  defaultPosition = 'top-right'
+}) => {
+  const [toasts, setToasts] = useState<ToastInstance[]>([]);
+  const timeoutRefs = useRef<Map<string, NodeJS.Timeout>>(new Map());
+
+  const removeToast = useCallback((id: string) => {
+    setToasts(prev => prev.filter(toast => toast.id !== id));
+
+    const timeoutId = timeoutRefs.current.get(id);
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+      timeoutRefs.current.delete(id);
+    }
+  }, []);
+
+  const addToast = useCallback((toastData: Omit<ToastInstance, 'id' | 'createdAt'>) => {
+    const id = `toast-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    const toast: ToastInstance = {
+      ...toastData,
+      id,
+      createdAt: Date.now(),
+      duration: toastData.duration ?? defaultDuration,
+      position: toastData.position ?? defaultPosition,
+      autoClose: toastData.autoClose ?? true,
+      pauseOnHover: toastData.pauseOnHover ?? true,
+      closable: toastData.closable ?? true,
+      showIcon: toastData.showIcon ?? true,
+      size: toastData.size ?? 'md',
+      variant: toastData.variant ?? 'default'
+    };
+
+    setToasts(prev => {
+      const newToasts = [toast, ...prev];
+
+      if (newToasts.length > maxToasts) {
+        const toastsToRemove = newToasts.slice(maxToasts);
+        toastsToRemove.forEach(t => {
+          const timeoutId = timeoutRefs.current.get(t.id);
+          if (timeoutId) {
+            clearTimeout(timeoutId);
+            timeoutRefs.current.delete(t.id);
+          }
+        });
+        return newToasts.slice(0, maxToasts);
+      }
+
+      return newToasts;
+    });
+
+    if (toast.autoClose && toast.duration && toast.duration > 0) {
+      const timeoutId = setTimeout(() => {
+        removeToast(id);
+      }, toast.duration);
+
+      timeoutRefs.current.set(id, timeoutId);
+    }
+
+    return id;
+  }, [defaultDuration, defaultPosition, maxToasts, removeToast]);
+
+  const clearAllToasts = useCallback(() => {
+    timeoutRefs.current.forEach(timeoutId => clearTimeout(timeoutId));
+    timeoutRefs.current.clear();
+    setToasts([]);
+  }, []);
+
+  const contextValue: ToastContextValue = {
+    toasts,
+    addToast,
+    removeToast,
+    clearAllToasts
+  };
+
+  return (
+    <ToastContext.Provider value={contextValue}>
+      {children}
+    </ToastContext.Provider>
+  );
+};
+
+export const useToast = (): ToastContextValue => {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error('useToast must be used within a ToastProvider');
+  }
+  return context;
+};
+
+export const useToastHelpers = () => {
+  const { addToast } = useToast();
+
+  const showSuccess = useCallback((message: string, title?: string, options?: Partial<ToastInstance>) => {
+    return addToast({ type: 'success', message, title, ...options });
+  }, [addToast]);
+
+  const showError = useCallback((message: string, title?: string, options?: Partial<ToastInstance>) => {
+    return addToast({ type: 'error', message, title, ...options });
+  }, [addToast]);
+
+  const showWarning = useCallback((message: string, title?: string, options?: Partial<ToastInstance>) => {
+    return addToast({ type: 'warning', message, title, ...options });
+  }, [addToast]);
+
+  const showInfo = useCallback((message: string, title?: string, options?: Partial<ToastInstance>) => {
+    return addToast({ type: 'info', message, title, ...options });
+  }, [addToast]);
+
+  return {
+    showSuccess,
+    showError,
+    showWarning,
+    showInfo
+  };
+};

package/src/components/ui/feedback/toast-example.tsx

@@ -0,0 +1,65 @@
+'use client'
+
+import * as React from 'react';;
+import { ToastProvider, useToastHelpers, GlobalToastRenderer } from './index.js';
+
+const ToastDemo: React.FC = () => {
+  const { showSuccess, showError, showWarning, showInfo } = useToastHelpers();
+
+  const handleSuccess = () => {
+    showSuccess('Operation completed successfully!', 'Success');
+  };
+
+  const handleError = () => {
+    showError('Something went wrong. Please try again.', 'Error');
+  };
+
+  const handleWarning = () => {
+    showWarning('This action cannot be undone.', 'Warning');
+  };
+
+  const handleInfo = () => {
+    showInfo('New update available.', 'Information');
+  };
+
+  const handleCustomAction = () => {
+    showSuccess('File uploaded successfully!', 'Upload Complete', {
+      actions: [
+        {
+          label: 'View File',
+          onClick: () => console.log('View file clicked'),
+          variant: 'primary'
+        },
+        {
+          label: 'Share',
+          onClick: () => console.log('Share clicked'),
+          variant: 'secondary'
+        }
+      ]
+    });
+  };
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <h2>Toast Component Test</h2>
+      <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
+        <button onClick={handleSuccess}>Show Success</button>
+        <button onClick={handleError}>Show Error</button>
+        <button onClick={handleWarning}>Show Warning</button>
+        <button onClick={handleInfo}>Show Info</button>
+        <button onClick={handleCustomAction}>Show With Actions</button>
+      </div>
+    </div>
+  );
+};
+
+export const ToastExample: React.FC = () => {
+  return (
+    <ToastProvider maxToasts={5} defaultDuration={5000}>
+      <ToastDemo />
+      <GlobalToastRenderer />
+    </ToastProvider>
+  );
+};
+
+export default ToastExample;

package/src/components/ui/feedback/toast-renderer.tsx

@@ -0,0 +1,61 @@
+import * as React from 'react';;
+import { Toast, ToastContainer } from './toast.js';
+import { useToast } from './toast-context.js';
+import { ToastProps } from './types.js';
+
+export interface ToastRendererProps {
+  position?: ToastProps['position'];
+  className?: string;
+}
+
+export const ToastRenderer: React.FC<ToastRendererProps> = ({
+  position = 'top-right',
+  className = ''
+}) => {
+  const { toasts, removeToast } = useToast();
+
+  const positionToasts = toasts.filter(toast =>
+    (toast.position || 'top-right') === position
+  );
+
+  if (positionToasts.length === 0) {
+    return null;
+  }
+
+  return (
+    <ToastContainer position={position} className={className}>
+      {positionToasts.map((toast) => (
+        <Toast
+          key={toast.id}
+          {...toast}
+          onClose={() => removeToast(toast.id)}
+        />
+      ))}
+    </ToastContainer>
+  );
+};
+
+export const GlobalToastRenderer: React.FC<{ className?: string }> = ({
+  className = ''
+}) => {
+  const positions: ToastProps['position'][] = [
+    'top-left',
+    'top-center',
+    'top-right',
+    'bottom-left',
+    'bottom-center',
+    'bottom-right'
+  ];
+
+  return (
+    <>
+      {positions.map(position => (
+        <ToastRenderer
+          key={position}
+          position={position}
+          className={className}
+        />
+      ))}
+    </>
+  );
+};

package/src/components/ui/feedback/toast.tsx

@@ -97,14 +97,14 @@ const getToastColors = (type: ToastProps['type'], colors: any) => {
 // Toast Action Button Component
 const ToastActionButton: React.FC<ToastAction> = ({
   label,
-  action,
+  onClick,
   variant = 'primary'
 }) => {
   return (
     <button
       type="button"
       className={`toast__action-button toast__action-button--${variant}`}
-      onClick={() => action}
+      onClick={onClick}
     >
       {label}
     </button>
@@ -235,9 +235,11 @@ export const Toast: React.FC<ToastProps> = ({
           </h3>
         )}
 
-        <div className={`toast__message ${!title ? 'toast__message--only' : ''}`}>
-          {message}
-        </div>
+        {message && (
+          <div className={`toast__message ${!title ? 'toast__message--only' : ''}`}>
+            {message}
+          </div>
+        )}
 
         {actions.length > 0 && (
           <div className="toast__actions">

package/src/components/ui/feedback/types.ts

@@ -1,9 +1,10 @@
 import * as React from 'react';;
+import { ThemeName } from '../../../themes/types.js';
 
 // Base props for all feedback components
 export interface FeedbackBaseProps {
   className?: string;
-  theme?: 'stan-design' | 'harvey';
+  theme?: ThemeName;
 }
 
 // Alert Component Types
@@ -30,15 +31,33 @@ export interface AlertAction {
   size?: 'sm' | 'md' | 'lg';
 }
 
+// Status Alert Data Interface
+export interface StatusAlertData {
+  id?: string;
+  title?: string;
+  message?: string;
+  children?: React.ReactNode;
+  type: 'success' | 'warning' | 'error' | 'info';
+  dismissible?: boolean;
+  onDismiss?: () => void;
+  icon?: React.ReactNode;
+  actions?: AlertAction[];
+  showIcon?: boolean;
+  closable?: boolean;
+  persistent?: boolean;
+  size?: 'sm' | 'md' | 'lg';
+  variant?: 'default' | 'bordered' | 'filled';
+  theme?: ThemeName;
+}
+
 // Toast Component Types
 export interface ToastProps extends FeedbackBaseProps {
   id: string;
   title?: string;
-  message: string;
+  message?: string;
   type: 'success' | 'warning' | 'error' | 'info' | 'default';
   duration?: number; // milliseconds, 0 = persistent
   onClose?: () => void;
-  onAction?: (action: string) => void;
   actions?: ToastAction[];
   icon?: React.ReactNode;
   showIcon?: boolean;
@@ -54,7 +73,7 @@ export interface ToastProps extends FeedbackBaseProps {
 
 export interface ToastAction {
   label: string;
-  action: string;
+  onClick: () => void;
   variant?: 'primary' | 'secondary' | 'ghost';
 }
 
@@ -66,7 +85,7 @@ export interface ToastContainerProps {
   draggable?: boolean;
   progress?: boolean;
   className?: string;
-  theme?: 'stan-design' | 'harvey';
+  theme?: ThemeName;
 }
 
 // Progress Component Types

package/src/index.ts

@@ -3,11 +3,11 @@
  * Production-ready design system package with stan-design theme
  *
  * Auto-generated exports for:
- * - 40 UI components
+ * - 43 UI components
  * - 67 custom hooks
  * - 6 utility functions
  * - 29 theme system components
- * - 131 TypeScript types
+ * - 133 TypeScript types
  * - 4 design tokens
  * - 0 build plugins
  * - Complete CSS system (61+ files)
@@ -46,6 +46,9 @@ export { Tree } from './components/ui/data-display/tree.js';
 export { Alert } from './components/ui/feedback/alert.js';
 export { Progress } from './components/ui/feedback/progress.js';
 export { SkeletonText } from './components/ui/feedback/skeleton.js';
+export { ToastProvider } from './components/ui/feedback/toast-context.js';
+export { ToastExample } from './components/ui/feedback/toast-example.js';
+export { ToastRenderer } from './components/ui/feedback/toast-renderer.js';
 export { Toast } from './components/ui/feedback/toast.js';
 export { Backdrop } from './components/ui/overlay/backdrop.js';
 export { FocusManager } from './components/ui/overlay/focus-manager.js';
@@ -200,6 +203,7 @@ export type { NavigationAccessibility } from './components/ui/navigation/types.j
 export type { FeedbackBaseProps } from './components/ui/feedback/types.js';
 export type { AlertProps } from './components/ui/feedback/types.js';
 export type { AlertAction } from './components/ui/feedback/types.js';
+export type { StatusAlertData } from './components/ui/feedback/types.js';
 export type { ToastProps } from './components/ui/feedback/types.js';
 export type { ToastAction } from './components/ui/feedback/types.js';
 export type { ToastContainerProps } from './components/ui/feedback/types.js';
@@ -255,6 +259,7 @@ export type { PopoverContentProps } from './components/ui/overlay/types.js';
 export type { PopoverHeaderProps } from './components/ui/overlay/types.js';
 export type { PopoverBodyProps } from './components/ui/overlay/types.js';
 export type { PopoverFooterProps } from './components/ui/overlay/types.js';
+export type { ThemeName } from './themes/types.js';
 export type { MultiThemeConfig } from './themes/types.js';
 export type { FontThemeConfig } from './themes/types.js';
 export type { FontConfig } from './themes/types.js';

package/src/themes/types.ts

@@ -1,6 +1,10 @@
 // Multi-Theme System Type Definitions
 // This file defines the core interfaces for theme configuration
 
+// Theme Name Type - extensible for new themes
+// Note: 'enterprise' is used in tests but may not have a full theme implementation
+export type ThemeName = 'default' | 'stan-design' | 'harvey' | 'enterprise' | string;
+
 export interface MultiThemeConfig {
   fonts: FontThemeConfig;
   colors: ColorThemeConfig;

package/src/types.ts

@@ -1,6 +1,10 @@
 // Multi-Theme System Type Definitions
 // This file defines the core interfaces for theme configuration
 
+// Theme Name Type - extensible for new themes
+// Note: 'enterprise' is used in tests but may not have a full theme implementation
+export type ThemeName = 'default' | 'stan-design' | 'harvey' | 'enterprise' | string;
+
 export interface MultiThemeConfig {
   fonts: FontThemeConfig;
   colors: ColorThemeConfig;