@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.1.3 → 0.1.5

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

@@ -0,0 +1,280 @@
+import React, { useState, useEffect, useCallback, useRef } from 'react';
+import { ToastProps, ToastAction, ToastContainerProps } from './types';
+
+// Simple icon components
+const CheckCircleIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg className={className} fill="currentColor" viewBox="0 0 20 20">
+    <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+  </svg>
+);
+
+const ExclamationTriangleIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg className={className} fill="currentColor" viewBox="0 0 20 20">
+    <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
+  </svg>
+);
+
+const XCircleIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg className={className} fill="currentColor" viewBox="0 0 20 20">
+    <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
+  </svg>
+);
+
+const InformationCircleIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg className={className} 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 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
+  </svg>
+);
+
+const XMarkIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg className={className} fill="currentColor" viewBox="0 0 20 20">
+    <path fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clipRule="evenodd" />
+  </svg>
+);
+
+// Get icon for toast type
+const getToastIcon = (type: ToastProps['type'], className: string) => {
+  switch (type) {
+    case 'success':
+      return <CheckCircleIcon className={className} />;
+    case 'warning':
+      return <ExclamationTriangleIcon className={className} />;
+    case 'error':
+      return <XCircleIcon className={className} />;
+    case 'info':
+      return <InformationCircleIcon className={className} />;
+    default:
+      return null;
+  }
+};
+
+// Note: getToastColors function removed as we're using semantic CSS classes
+/*
+const getToastColors = (type: ToastProps['type'], colors: any) => {
+  switch (type) {
+    case 'success':
+      return {
+        background: colors.semantic.success + '10',
+        border: colors.semantic.success + '30',
+        text: colors.semantic.success,
+        icon: colors.semantic.success
+      };
+    case 'warning':
+      return {
+        background: colors.semantic.warning + '10',
+        border: colors.semantic.warning + '30',
+        text: colors.semantic.warning,
+        icon: colors.semantic.warning
+      };
+    case 'error':
+      return {
+        background: colors.semantic.error + '10',
+        border: colors.semantic.error + '30',
+        text: colors.semantic.error,
+        icon: colors.semantic.error
+      };
+    case 'info':
+      return {
+        background: colors.semantic.info + '10',
+        border: colors.semantic.info + '30',
+        text: colors.semantic.info,
+        icon: colors.semantic.info
+      };
+    default:
+      return {
+        background: colors.surface.surface,
+        border: colors.surface.border,
+        text: colors.text.primary,
+        icon: colors.text.secondary
+      };
+  }
+};
+*/
+
+// Toast Action Button Component
+const ToastActionButton: React.FC<ToastAction> = ({
+  label,
+  action,
+  variant = 'primary'
+}) => {
+  return (
+    <button
+      type="button"
+      className={`toast__action-button toast__action-button--${variant}`}
+      onClick={() => action}
+    >
+      {label}
+    </button>
+  );
+};
+
+// Individual Toast Component
+export const Toast: React.FC<ToastProps> = ({
+  title,
+  message,
+  type = 'default',
+  duration = 5000,
+  onClose,
+  actions = [],
+  icon,
+  showIcon = true,
+  closable = true,
+  autoClose = true,
+  pauseOnHover = true,
+  progress = false,
+  size = 'md',
+  variant = 'default',
+  className = '',
+}) => {
+  // Note: theme and colors not needed as we're using semantic CSS classes
+  
+  const [isVisible, setIsVisible] = useState(true);
+  const [progressValue, setProgressValue] = useState(100);
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const progressRef = useRef<NodeJS.Timeout | null>(null);
+
+  const handleClose = useCallback(() => {
+    setIsVisible(false);
+    if (onClose) {
+      onClose();
+    }
+  }, [onClose]);
+
+  const handleMouseEnter = useCallback(() => {
+    if (pauseOnHover && autoClose) {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+      if (progressRef.current) {
+        clearInterval(progressRef.current);
+      }
+    }
+  }, [pauseOnHover, autoClose]);
+
+  const handleMouseLeave = useCallback(() => {
+    if (pauseOnHover && autoClose) {
+      startAutoClose();
+    }
+  }, [pauseOnHover, autoClose]);
+
+  const startAutoClose = useCallback(() => {
+    if (duration > 0 && autoClose) {
+      timeoutRef.current = setTimeout(() => {
+        handleClose();
+      }, duration);
+
+      if (progress) {
+        const startTime = Date.now();
+        const endTime = startTime + duration;
+        
+        progressRef.current = setInterval(() => {
+          const now = Date.now();
+          const remaining = Math.max(0, endTime - now);
+          const newProgress = (remaining / duration) * 100;
+          setProgressValue(newProgress);
+          
+          if (remaining <= 0) {
+            if (progressRef.current) {
+              clearInterval(progressRef.current);
+            }
+          }
+        }, 10);
+      }
+    }
+  }, [duration, autoClose, progress, handleClose]);
+
+  useEffect(() => {
+    startAutoClose();
+    
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+      if (progressRef.current) {
+        clearInterval(progressRef.current);
+      }
+    };
+  }, [startAutoClose]);
+
+  if (!isVisible) {
+    return null;
+  }
+
+  const shouldShowIcon = showIcon && (icon || type);
+
+  return (
+    <div
+      className={`toast__container toast__container--${size} toast__container--${variant} toast__container--${type} ${className}`}
+      role="alert"
+      aria-live="polite"
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      {progress && (
+        <div className="toast__progress">
+          <div
+            className={`toast__progress-bar toast__progress-bar--${type}`}
+            style={{ width: `${progressValue}%` }}
+          />
+        </div>
+      )}
+
+      {shouldShowIcon && (
+        <div className={`toast__icon toast__icon--${type}`}>
+          {icon || getToastIcon(type, 'toast__icon')}
+        </div>
+      )}
+
+      <div className="toast__content">
+        {title && (
+          <h3 className="toast__title">
+            {title}
+          </h3>
+        )}
+
+        <div className={`toast__message ${!title ? 'toast__message--only' : ''}`}>
+          {message}
+        </div>
+
+        {actions.length > 0 && (
+          <div className="toast__actions">
+            {actions.map((action, index) => (
+              <ToastActionButton
+                key={index}
+                {...action}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+
+      {closable && (
+        <button
+          type="button"
+          className="toast__close-button"
+          onClick={handleClose}
+          aria-label="Close toast"
+        >
+          <XMarkIcon className="toast__close-icon" />
+        </button>
+      )}
+    </div>
+  );
+};
+
+// Toast Container Component
+export const ToastContainer: React.FC<ToastContainerProps & { children: React.ReactNode }> = ({
+  position = 'top-right',
+  className = '',
+  children
+}) => {
+  return (
+    <div className={`toast-container toast-container--${position} ${className}`}>
+      <div className="toast-container__list">
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export default Toast;

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

@@ -0,0 +1,125 @@
+import React from 'react';
+
+// Base props for all feedback components
+export interface FeedbackBaseProps {
+  className?: string;
+  theme?: 'stan-design' | 'harvey';
+}
+
+// Alert Component Types
+export interface AlertProps extends FeedbackBaseProps {
+  title?: string;
+  message: string;
+  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';
+}
+
+export interface AlertAction {
+  label: string;
+  onClick: () => void;
+  variant?: 'primary' | 'secondary' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+}
+
+// Toast Component Types
+export interface ToastProps extends FeedbackBaseProps {
+  id: string;
+  title?: 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;
+  closable?: boolean;
+  position?: 'top-left' | 'top-right' | 'top-center' | 'bottom-left' | 'bottom-right' | 'bottom-center';
+  autoClose?: boolean;
+  pauseOnHover?: boolean;
+  draggable?: boolean;
+  progress?: boolean;
+  size?: 'sm' | 'md' | 'lg';
+  variant?: 'default' | 'bordered' | 'filled';
+}
+
+export interface ToastAction {
+  label: string;
+  action: string;
+  variant?: 'primary' | 'secondary' | 'ghost';
+}
+
+export interface ToastContainerProps {
+  position?: ToastProps['position'];
+  maxToasts?: number;
+  autoClose?: boolean;
+  pauseOnHover?: boolean;
+  draggable?: boolean;
+  progress?: boolean;
+  className?: string;
+  theme?: 'stan-design' | 'harvey';
+}
+
+// Progress Component Types
+export interface ProgressProps extends FeedbackBaseProps {
+  value: number; // 0-100
+  max?: number;
+  min?: number;
+  label?: string;
+  showLabel?: boolean;
+  showValue?: boolean;
+  showPercentage?: boolean;
+  animated?: boolean;
+  striped?: boolean;
+  color?: string;
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  variant?: 'linear' | 'circular' | 'steps';
+  thickness?: number;
+  trackColor?: string;
+  progressColor?: string;
+  indeterminate?: boolean;
+  onComplete?: () => void;
+}
+
+export interface ProgressStep {
+  label: string;
+  value: number;
+  status: 'pending' | 'active' | 'completed' | 'error';
+  description?: string;
+}
+
+// Skeleton Component Types
+export interface SkeletonProps extends FeedbackBaseProps {
+  width?: string | number;
+  height?: string | number;
+  variant?: 'text' | 'circular' | 'rectangular' | 'rounded';
+  animation?: 'pulse' | 'wave' | 'none';
+  rows?: number;
+  spacing?: number;
+  show?: boolean;
+  className?: string;
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+}
+
+export interface SkeletonTextProps extends SkeletonProps {
+  lines?: number;
+  lineHeight?: string | number;
+  lastLineWidth?: string | number;
+}
+
+export interface SkeletonAvatarProps extends SkeletonProps {
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  shape?: 'circular' | 'square' | 'rounded';
+}
+
+export interface SkeletonButtonProps extends SkeletonProps {
+  fullWidth?: boolean;
+}

package/src/components/ui/font-preview.tsx

@@ -0,0 +1,288 @@
+import React from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card';
+import { Badge } from './badge';
+import { useTheme } from '../../themes';
+import { FontConfig } from '../../themes/types';
+
+export interface FontPreviewProps {
+  fontConfig?: FontConfig;
+  fontType?: 'primary' | 'secondary' | 'display' | 'body' | 'mono';
+  showAllVariations?: boolean;
+  className?: string;
+}
+
+export const FontPreview: React.FC<FontPreviewProps> = ({
+  fontConfig,
+  fontType = 'primary',
+  showAllVariations = false,
+  className = ''
+}) => {
+  const { currentThemeConfig } = useTheme();
+  
+  // Use provided fontConfig or get from current theme
+  const config = fontConfig || currentThemeConfig?.fonts[fontType];
+  
+  if (!config) {
+    return (
+      <Card className={className}>
+        <CardContent className="p-4">
+          <p className="text-sm text-muted-foreground">Font configuration not available</p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  const { family, weights, sizes, lineHeights, letterSpacing, fallbacks, source } = config;
+  
+  // Build full font family string with fallbacks
+  const fullFontFamily = fallbacks 
+    ? `${family}, ${fallbacks.join(', ')}`
+    : family;
+
+  // Sample text for preview
+  const sampleText = "The quick brown fox jumps over the lazy dog";
+  const sampleNumbers = "1234567890";
+  const sampleSpecial = "!@#$%^&*()_+-={}[]|\\:;\"'<>,.?/";
+
+  return (
+    <Card className={className}>
+      <CardHeader>
+        <CardTitle className="flex items-center justify-between">
+          <span className="capitalize">{fontType} Font</span>
+          <div className="flex gap-2">
+            {source && (
+              <Badge variant="outline" className="text-xs">
+                {source.type}
+              </Badge>
+            )}
+            <Badge variant="secondary" className="text-xs">
+              {weights?.length || 0} weights
+            </Badge>
+          </div>
+        </CardTitle>
+        <CardDescription>
+          <span className="font-mono text-xs">{family}</span>
+          {fallbacks && fallbacks.length > 0 && (
+            <div className="mt-1 text-xs text-muted-foreground">
+              Fallbacks: {fallbacks.slice(0, 3).join(', ')}
+              {fallbacks.length > 3 && ` (+${fallbacks.length - 3} more)`}
+            </div>
+          )}
+        </CardDescription>
+      </CardHeader>
+      
+      <CardContent className="space-y-6">
+        {/* Font Weights Preview */}
+        <div>
+          <h4 className="text-sm font-medium mb-3">Font Weights</h4>
+          <div className="space-y-2">
+            {weights?.map(weight => (
+              <div key={weight} className="flex items-center gap-4">
+                <Badge variant="outline" className="text-xs w-12 justify-center">
+                  {weight}
+                </Badge>
+                <p 
+                  style={{ 
+                    fontFamily: fullFontFamily,
+                    fontWeight: weight,
+                    fontSize: sizes?.md || '1rem'
+                  }}
+                  className="flex-1"
+                >
+                  {sampleText}
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {showAllVariations && (
+          <>
+            {/* Font Sizes Preview */}
+            <div>
+              <h4 className="text-sm font-medium mb-3">Font Sizes</h4>
+              <div className="space-y-2">
+                {Object.entries(sizes || {}).map(([size, value]) => (
+                  <div key={size} className="flex items-center gap-4">
+                    <Badge variant="outline" className="text-xs w-12 justify-center">
+                      {size}
+                    </Badge>
+                    <span className="text-xs text-muted-foreground w-16">{value}</span>
+                    <p 
+                      style={{ 
+                        fontFamily: fullFontFamily,
+                        fontSize: value,
+                        fontWeight: weights?.[0] || 400
+                      }}
+                    >
+                      Sample text
+                    </p>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            {/* Line Heights Preview */}
+            <div>
+              <h4 className="text-sm font-medium mb-3">Line Heights</h4>
+              <div className="space-y-4">
+                {Object.entries(lineHeights || {}).map(([height, value]) => (
+                  <div key={height} className="space-y-2">
+                    <div className="flex items-center gap-2">
+                      <Badge variant="outline" className="text-xs">
+                        {height}
+                      </Badge>
+                      <span className="text-xs text-muted-foreground">{value}</span>
+                    </div>
+                    <p 
+                      style={{ 
+                        fontFamily: fullFontFamily,
+                        fontSize: sizes?.md || '1rem',
+                        lineHeight: value,
+                        fontWeight: weights?.[0] || 400
+                      }}
+                      className="text-sm border-l-2 border-muted pl-4"
+                    >
+                      This is a multiline text example to demonstrate how line height affects the spacing between lines of text. 
+                      The line height setting controls the vertical space between each line, which is crucial for readability and 
+                      overall typography appearance.
+                    </p>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            {/* Letter Spacing Preview */}
+            <div>
+              <h4 className="text-sm font-medium mb-3">Letter Spacing</h4>
+              <div className="space-y-2">
+                {Object.entries(letterSpacing || {}).map(([spacing, value]) => (
+                  <div key={spacing} className="flex items-center gap-4">
+                    <Badge variant="outline" className="text-xs w-16 justify-center">
+                      {spacing}
+                    </Badge>
+                    <span className="text-xs text-muted-foreground w-16">{value}</span>
+                    <p 
+                      style={{ 
+                        fontFamily: fullFontFamily,
+                        fontSize: sizes?.md || '1rem',
+                        letterSpacing: value,
+                        fontWeight: weights?.[0] || 400
+                      }}
+                      className="flex-1"
+                    >
+                      Letter spacing example
+                    </p>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </>
+        )}
+
+        {/* Character Set Preview */}
+        <div>
+          <h4 className="text-sm font-medium mb-3">Character Support</h4>
+          <div className="space-y-3">
+            <div>
+              <span className="text-xs text-muted-foreground block mb-1">Alphabet</span>
+              <p 
+                style={{ 
+                  fontFamily: fullFontFamily,
+                  fontSize: sizes?.md || '1rem',
+                  fontWeight: weights?.[0] || 400
+                }}
+                className="text-sm"
+              >
+                {sampleText}
+              </p>
+            </div>
+            
+            <div>
+              <span className="text-xs text-muted-foreground block mb-1">Numbers</span>
+              <p 
+                style={{ 
+                  fontFamily: fullFontFamily,
+                  fontSize: sizes?.lg || '1.125rem',
+                  fontWeight: weights?.[0] || 400,
+                  letterSpacing: letterSpacing?.wide || '0.025em'
+                }}
+                className="text-sm"
+              >
+                {sampleNumbers}
+              </p>
+            </div>
+
+            <div>
+              <span className="text-xs text-muted-foreground block mb-1">Special Characters</span>
+              <p 
+                style={{ 
+                  fontFamily: fullFontFamily,
+                  fontSize: sizes?.sm || '0.875rem',
+                  fontWeight: weights?.[0] || 400
+                }}
+                className="text-sm"
+              >
+                {sampleSpecial}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {/* Font Loading Information */}
+        {source && (
+          <div className="pt-4 border-t">
+            <h4 className="text-sm font-medium mb-2">Font Loading</h4>
+            <div className="space-y-1 text-xs text-muted-foreground">
+              <div>Source: <span className="capitalize">{source.type}</span></div>
+              {source.url && <div>URL: {source.url}</div>}
+              {source.files && (
+                <div>
+                  Files: {Object.keys(source.files).join(', ')}
+                </div>
+              )}
+              {config.display && (
+                <div>Display: {config.display}</div>
+              )}
+            </div>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+};
+
+// Multi-font preview component
+export interface FontShowcaseProps {
+  showAllVariations?: boolean;
+  className?: string;
+}
+
+export const FontShowcase: React.FC<FontShowcaseProps> = ({
+  showAllVariations = false,
+  className = ''
+}) => {
+  const { currentThemeConfig } = useTheme();
+  
+  if (!currentThemeConfig?.fonts) {
+    return (
+      <div className={className}>
+        <p className="text-sm text-muted-foreground">No font configuration available</p>
+      </div>
+    );
+  }
+
+  const fontTypes: Array<keyof typeof currentThemeConfig.fonts> = ['primary', 'secondary', 'display', 'body', 'mono'];
+
+  return (
+    <div className={`space-y-6 ${className}`}>
+      {fontTypes.map(fontType => (
+        <FontPreview
+          key={fontType}
+          fontType={fontType}
+          showAllVariations={showAllVariations}
+        />
+      ))}
+    </div>
+  );
+};