@rakeyshgidwani/roger-ui-bank-theme-jeremy 0.5.3

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

@@ -0,0 +1,279 @@
+'use client'
+
+import * as React from 'react';
+import { useEffect, useState } from 'react';;
+import { ProgressProps, ProgressStep } from './types.js';
+
+// Linear Progress Component
+const LinearProgress: React.FC<ProgressProps> = ({
+  value,
+  max = 100,
+  min = 0,
+  animated = true,
+  striped = false,
+  color,
+  size = 'md',
+  className = ''
+}) => {
+  // Note: theme and colors not needed as we're using semantic CSS classes
+
+  const percentage = Math.min(Math.max(((value - min) / (max - min)) * 100, 0), 100);
+
+  return (
+    <div className={`progress__container progress__container--${size} ${className}`}>
+      <div
+        className={`progress__bar ${animated ? 'progress__bar--animated' : ''} ${striped ? 'progress__bar--striped' : ''} ${color ? `progress__bar--${color}` : ''}`}
+        style={{ width: `${percentage}%` }}
+      />
+    </div>
+  );
+};
+
+// Circular Progress Component
+const CircularProgress: React.FC<ProgressProps> = ({
+  value,
+  max = 100,
+  min = 0,
+  animated = true,
+  color,
+  size = 'md',
+  thickness = 4,
+  trackColor: _trackColor,
+  progressColor: _progressColor,
+  className = ''
+}) => {
+  // Note: theme colors not needed as we're using semantic CSS classes
+
+  const percentage = Math.min(Math.max(((value - min) / (max - min)) * 100, 0), 100);
+  const radius = 50 - (thickness / 2);
+  const circumference = 2 * Math.PI * radius;
+  const strokeDasharray = circumference;
+  const strokeDashoffset = circumference - (percentage / 100) * circumference;
+
+  return (
+    <div className={`progress__circular progress__circular--${size} ${className}`}>
+      <svg className="progress__circle" viewBox="0 0 100 100">
+        {/* Track */}
+        <circle
+          cx="50"
+          cy="50"
+          r={radius}
+          className="progress__circle-track"
+          strokeWidth={thickness}
+        />
+        {/* Progress */}
+        <circle
+          cx="50"
+          cy="50"
+          r={radius}
+          className={`progress__circle-progress ${animated ? 'progress__circle-progress--animated' : ''} ${color ? `progress__circle-progress--${color}` : ''}`}
+          strokeWidth={thickness}
+          strokeDasharray={strokeDasharray}
+          strokeDashoffset={strokeDashoffset}
+        />
+      </svg>
+      {/* Center text */}
+      <div className="progress__circle-label">
+        {Math.round(percentage)}%
+      </div>
+    </div>
+  );
+};
+
+// Steps Progress Component
+const StepsProgress: React.FC<ProgressProps & { steps?: ProgressStep[] }> = ({
+  steps = [],
+  className = ''
+}) => {
+  // Note: size and colors not needed as we're using semantic CSS classes
+
+  const getStatusIcon = (status: ProgressStep['status']) => {
+    switch (status) {
+      case 'completed':
+        return (
+          <svg className="progress__step-icon" fill="currentColor" viewBox="0 0 20 20">
+            <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+          </svg>
+        );
+      case 'active':
+        return (
+          <svg className="progress__step-icon" fill="currentColor" viewBox="0 0 20 20">
+            <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clipRule="evenodd" />
+          </svg>
+        );
+      case 'error':
+        return (
+          <svg className="progress__step-icon" fill="currentColor" viewBox="0 0 20 20">
+            <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
+          </svg>
+        );
+      case 'pending':
+      default:
+        return (
+          <svg className="progress__step-icon" fill="currentColor" viewBox="0 0 20 20">
+            <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clipRule="evenodd" />
+          </svg>
+        );
+    }
+  };
+
+  if (steps.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className={`progress__steps ${className}`}>
+      {steps.map((step, index) => (
+        <div key={index} className="progress__step">
+          {/* Step indicator */}
+          <div
+            className={`progress__step-indicator progress__step-indicator--${step.status}`}
+          >
+            {getStatusIcon(step.status)}
+          </div>
+
+          {/* Step connector */}
+          {index < steps.length - 1 && (
+            <div
+              className={`progress__step-connector ${step.status === 'completed' ? 'progress__step-connector--completed' : ''}`}
+            />
+          )}
+
+          {/* Step label */}
+          <div className={`progress__step-label progress__step-label--${step.status}`}>
+            <div className="progress__step-title">
+              {step.label}
+            </div>
+            {step.description && (
+              <div className="progress__step-description">
+                {step.description}
+              </div>
+            )}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+// Main Progress Component
+export const Progress: React.FC<ProgressProps> = ({
+  value,
+  max = 100,
+  min = 0,
+  label,
+  showLabel = false,
+  showValue = false,
+  showPercentage = false,
+  animated = true,
+  striped = false,
+  color,
+  size = 'md',
+  variant = 'linear',
+  thickness,
+  trackColor: _trackColor,
+  progressColor: _progressColor,
+  indeterminate = false,
+  onComplete,
+  className = '',
+  theme = 'stan-design'
+}) => {
+  // Note: theme colors not needed as we're using semantic CSS classes
+  
+  const [currentValue, setCurrentValue] = useState(value);
+
+  useEffect(() => {
+    setCurrentValue(value);
+    
+    if (value >= max && onComplete) {
+      onComplete();
+    }
+  }, [value, max, onComplete]);
+
+  useEffect(() => {
+    if (indeterminate) {
+      const interval = setInterval(() => {
+        setCurrentValue(prev => {
+          if (prev >= max) return min;
+          return prev + (max - min) / 20;
+        });
+      }, 100);
+      
+      return () => clearInterval(interval);
+    }
+  }, [indeterminate, min, max]);
+
+  const renderProgress = () => {
+    switch (variant) {
+      case 'circular':
+        return (
+          <CircularProgress
+            value={currentValue}
+            max={max}
+            min={min}
+            animated={animated}
+            color={color}
+            size={size}
+            thickness={thickness}
+            trackColor={_trackColor}
+            progressColor={_progressColor}
+            className={className}
+          />
+        );
+      case 'steps':
+        return (
+          <StepsProgress
+            value={currentValue}
+            max={max}
+            min={min}
+            size={size}
+            className={className}
+          />
+        );
+      case 'linear':
+      default:
+        return (
+          <LinearProgress
+            value={currentValue}
+            max={max}
+            min={min}
+            animated={animated}
+            striped={striped}
+            color={color}
+            size={size}
+            thickness={thickness}
+            trackColor={_trackColor}
+            progressColor={_progressColor}
+            className={className}
+          />
+        );
+    }
+  };
+
+  return (
+    <div className={`progress__wrapper progress__wrapper--${theme} ${className}`}>
+      {/* Label and Value Display */}
+      {(showLabel || showValue || showPercentage) && (
+        <div className="progress__header">
+          {showLabel && label && (
+            <span className="progress__label">
+              {label}
+            </span>
+          )}
+          {(showValue || showPercentage) && (
+            <span className="progress__value">
+              {showValue && `${currentValue}/${max}`}
+              {showValue && showPercentage && ' - '}
+              {showPercentage && `${Math.round(((currentValue - min) / (max - min)) * 100)}%`}
+            </span>
+          )}
+        </div>
+      )}
+
+      {/* Progress Component */}
+      {renderProgress()}
+    </div>
+  );
+};
+
+export default Progress;

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

@@ -0,0 +1,185 @@
+import * as React from 'react';;
+import { SkeletonProps, SkeletonTextProps, SkeletonAvatarProps, SkeletonButtonProps } from './types.js';
+
+// Base Skeleton Component
+const BaseSkeleton: React.FC<SkeletonProps> = ({
+  width,
+  height,
+  variant = 'rectangular',
+  animation = 'pulse',
+  className = '',
+  size = 'md'
+}) => {
+  // Note: theme and colors not needed as we're using semantic CSS classes
+
+  const getDefaultDimensions = () => {
+    if (width && height) return { width, height };
+
+    switch (variant) {
+      case 'circular':
+        switch (size) {
+          case 'sm': return { width: '2rem', height: '2rem' };
+          case 'lg': return { width: '4rem', height: '4rem' };
+          default: return { width: '3rem', height: '3rem' };
+        }
+      case 'text':
+        switch (size) {
+          case 'sm': return { width: '100%', height: '0.875rem' };
+          case 'lg': return { width: '100%', height: '1.25rem' };
+          default: return { width: '100%', height: '1rem' };
+        }
+      case 'rectangular':
+      case 'rounded':
+      default:
+        switch (size) {
+          case 'sm': return { width: '100%', height: '2rem' };
+          case 'lg': return { width: '100%', height: '4rem' };
+          default: return { width: '100%', height: '3rem' };
+        }
+    }
+  };
+
+  const dimensions = getDefaultDimensions();
+
+  return (
+    <div
+      className={`skeleton__base skeleton__base--${variant} skeleton__base--${animation} skeleton__base--${size} ${className}`}
+      style={{
+        width: dimensions.width,
+        height: dimensions.height
+      }}
+      aria-busy="true"
+      role="progressbar"
+      aria-label="Loading content"
+    />
+  );
+};
+
+// Skeleton Text Component
+export const SkeletonText: React.FC<SkeletonTextProps> = ({
+  lines = 3,
+  lineHeight,
+  lastLineWidth,
+  spacing = 2,
+  className = '',
+  ...props
+}) => {
+  const getLineHeight = () => {
+    if (lineHeight) return lineHeight;
+    switch (props.size) {
+      case 'sm': return '0.875rem';
+      case 'lg': return '1.25rem';
+      default: return '1rem';
+    }
+  };
+
+  const getLastLineWidth = () => {
+    if (lastLineWidth) return lastLineWidth;
+    return '75%';
+  };
+
+  return (
+    <div className={`skeleton__text skeleton__text--spacing-${spacing} ${className}`}>
+      {Array.from({ length: lines }).map((_, index) => (
+        <div
+          key={index}
+          className={`skeleton__text-line skeleton__text-line--${props.size || 'md'} skeleton__base--${props.animation || 'pulse'} ${
+            index === lines - 1 ? 'skeleton__text-line--last' : ''
+          }`}
+          style={{
+            width: index === lines - 1 ? getLastLineWidth() : '100%',
+            height: getLineHeight()
+          }}
+          aria-busy="true"
+        />
+      ))}
+    </div>
+  );
+};
+
+// Skeleton Avatar Component
+export const SkeletonAvatar: React.FC<SkeletonAvatarProps> = ({
+  size = 'md',
+  shape = 'circular',
+  className = '',
+  ...props
+}) => {
+  return (
+    <div
+      className={`skeleton__avatar skeleton__avatar--${size} skeleton__avatar--${shape} skeleton__base--${props.animation || 'pulse'} ${className}`}
+      aria-busy="true"
+      role="progressbar"
+      aria-label="Loading avatar"
+    />
+  );
+};
+
+// Skeleton Button Component
+export const SkeletonButton: React.FC<SkeletonButtonProps> = ({
+  size = 'md',
+  variant = 'contained',
+  fullWidth = false,
+  className = '',
+  ...props
+}) => {
+  return (
+    <div
+      className={`skeleton__button skeleton__button--${size} skeleton__button--${variant} ${
+        fullWidth ? 'skeleton__button--full-width' : ''
+      } skeleton__base--${props.animation || 'pulse'} ${className}`}
+      aria-busy="true"
+      role="progressbar"
+      aria-label="Loading button"
+    />
+  );
+};
+
+// Main Skeleton Component
+export const Skeleton: React.FC<SkeletonProps> = ({
+  width,
+  height,
+  variant = 'rectangular',
+  animation = 'pulse',
+  rows = 1,
+  spacing = 2,
+  show = true,
+  className = '',
+  theme = 'stan-design',
+  size = 'md'
+}) => {
+  if (!show) {
+    return null;
+  }
+
+  if (rows > 1) {
+    return (
+      <div className={`skeleton__container skeleton__container--spacing-${spacing} ${className}`}>
+        {Array.from({ length: rows }).map((_, index) => (
+          <BaseSkeleton
+            key={index}
+            width={width}
+            height={height}
+            variant={variant}
+            animation={animation}
+            size={size}
+            theme={theme}
+          />
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <BaseSkeleton
+      width={width}
+      height={height}
+      variant={variant}
+      animation={animation}
+      size={size}
+      theme={theme}
+      className={className}
+    />
+  );
+};
+
+export default Skeleton;

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
+  };
+};