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

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

@@ -0,0 +1,292 @@
+import React, { useEffect, useState } from 'react';
+import { useTheme } from '../../../themes/useTheme';
+import { ProgressProps, ProgressStep } from './types';
+
+// Default color fallbacks for when theme is not available
+const getDefaultColors = () => ({
+  surface: { background: '#ffffff', surface: '#f3f4f6', border: '#d1d5db', divider: '#e5e7eb' },
+  text: { primary: '#111827', secondary: '#6b7280', muted: '#9ca3af', inverse: '#ffffff', onPrimary: '#ffffff', onSecondary: '#ffffff', onSurface: '#111827' },
+  interactive: { hover: '#f3f4f6', active: '#e5e7eb', focus: '#3b82f6', disabled: '#d1d5db' },
+  primary: { 500: '#3b82f6' },
+  semantic: { success: '#10b981', warning: '#f59e0b', error: '#ef4444', info: '#3b82f6' }
+});
+
+// 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,
+  progressColor,
+  className = ''
+}) => {
+  const { getTheme } = useTheme();
+  const themeConfig = getTheme('stan-design');
+  const colors = themeConfig?.colors || getDefaultColors();
+
+  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"
+          stroke={trackColor || colors.surface.border}
+          strokeWidth={thickness}
+        />
+        {/* Progress */}
+        <circle
+          cx="50"
+          cy="50"
+          r={radius}
+          className={`progress__circle-progress ${animated ? 'progress__circle-progress--animated' : ''}`}
+          stroke={progressColor || color || colors.primary[500]}
+          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,
+  progressColor,
+  indeterminate = false,
+  onComplete,
+  className = '',
+  theme = 'stan-design'
+}) => {
+  const { getTheme } = useTheme();
+  const themeConfig = getTheme(theme);
+  const colors = themeConfig?.colors || getDefaultColors();
+  
+  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="w-full">
+      {/* Label and Value Display */}
+      {(showLabel || showValue || showPercentage) && (
+        <div className="flex justify-between items-center mb-2">
+          {showLabel && label && (
+            <span className="text-sm font-medium" style={{ color: colors.text.primary }}>
+              {label}
+            </span>
+          )}
+          {(showValue || showPercentage) && (
+            <span className="text-sm" style={{ color: colors.text.secondary }}>
+              {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 React from 'react';
+import { SkeletonProps, SkeletonTextProps, SkeletonAvatarProps, SkeletonButtonProps } from './types';
+
+// 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;