@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.7 → 0.2.9

package/dist/components/ui/navigation/stepper.esm.js

@@ -0,0 +1,292 @@
+/**
+ * Stepper Component
+ * Provides comprehensive stepper functionality with theme support and multiple variants
+ */
+
+import * as React from 'react';
+import { useState, useCallback, useMemo } from 'react';
+import { CheckIcon, ExclamationTriangleIcon } from '@heroicons/react/24/outline';
+import { StepperProps, StepItem } from './types';
+
+// Simple icon components
+const ExclamationCircleIcon}> = ({ className = '' }) => (
+  <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+  </svg>
+);
+
+export const Stepper= ({
+  steps,
+  currentStep = 0,
+  defaultCurrentStep = 0,
+  onStepChange,
+  variant = 'default',
+  size = 'md',
+  showStepNumbers = true,
+  showStepLabels = true,
+  showStepDescriptions = true,
+  showStepIcons = true,
+  allowStepClick = true,
+  allowStepNavigation = true,
+  showProgress = true,
+  // TODO= true,
+  onStepComplete,
+  onStepError,
+  onFinish,
+  onCancel,
+  className = '',
+  'data-testid'= 'stepper',
+}) => {
+  const [internalCurrentStep, setInternalCurrentStep] = useState<number>(
+    currentStep !== undefined ? currentStep );
+
+  // Use controlled or uncontrolled current step
+  const currentStepIndex = currentStep !== undefined ? currentStep ;
+
+  const handleStepClick = useCallback((stepIndex) => {
+    if (!allowStepClick || !allowStepNavigation) return;
+    
+    const step = steps[stepIndex];
+    if (step.disabled) return;
+    
+    if (currentStep === undefined) {
+      setInternalCurrentStep(stepIndex);
+    }
+    
+    if (onStepChange) {
+      onStepChange(stepIndex);
+    }
+  }, [currentStep, onStepChange, allowStepClick, allowStepNavigation, steps]);
+
+  const handleStepComplete = useCallback(async (stepIndex) => {
+    const step = steps[stepIndex];
+    if (!step.validation) return;
+
+    try {
+      const isValid = await step.validation();
+      if (isValid) {
+        if (onStepComplete) {
+          onStepComplete(stepIndex);
+        }
+        // Move to next step if available
+        if (stepIndex < steps.length - 1) {
+          handleStepClick(stepIndex + 1);
+        } else if (onFinish) {
+          onFinish();
+        }
+      }
+    } catch (error) {
+      if (onStepError) {
+        onStepError(stepIndex);
+      }
+    }
+  }, [steps, onStepComplete, onStepError, onFinish, handleStepClick]);
+
+  const handleFinish = useCallback(() => {
+    if (onFinish) {
+      onFinish();
+    }
+  }, [onFinish]);
+
+  const handleCancel = useCallback(() => {
+    if (onCancel) {
+      onCancel();
+    }
+  }, [onCancel]);
+
+  // Calculate progress percentage
+  const progressPercentage = useMemo(() => {
+    return ((currentStepIndex + 1) / steps.length) * 100;
+  }, [currentStepIndex, steps.length]);
+
+  const getSizeClasses = () => {
+    switch (size) {
+      case 'sm';
+      case 'lg';
+      default;
+    }
+  };
+
+  const getVariantClasses = () => {
+    switch (variant) {
+      case 'vertical';
+      case 'horizontal';
+      case 'wizard';
+      default;
+    }
+  };
+
+  const getThemeClasses = () => {
+    return 'stepper stepper--stan-design';
+  };
+
+  const getStepStatusIcon = (step, stepIndex) => {
+    if (!showStepIcons) return null;
+
+    if (step.status === 'completed') {
+      return <CheckIcon className="stepper__step-icon stepper__step-icon--completed" />;
+    }
+
+    if (step.status === 'error') {
+      return <ExclamationCircleIcon className="stepper__step-icon stepper__step-icon--error" />;
+    }
+
+    if (step.status === 'warning') {
+      return <ExclamationTriangleIcon className="stepper__step-icon stepper__step-icon--warning" />;
+    }
+
+    if (stepIndex === currentStepIndex) {
+      return <div className="stepper__step-number stepper__step-number--current">
+        {stepIndex + 1}
+      </div>;
+    }
+
+    if (showStepNumbers) {
+      return <div className="stepper__step-number stepper__step-number--default">
+        {stepIndex + 1}
+      </div>;
+    }
+
+    return null;
+  };
+
+  const getStepClasses = (step, stepIndex) => {
+    let classes = 'stepper__step';
+
+    if (step.disabled) {
+      classes += ' stepper__step--disabled';
+    } else if (stepIndex === currentStepIndex) {
+      classes += ' stepper__step--current';
+    } else if (step.status === 'completed') {
+      classes += ' stepper__step--completed';
+    } else if (step.status === 'error') {
+      classes += ' stepper__step--error';
+    } else if (step.status === 'warning') {
+      classes += ' stepper__step--warning';
+    } else {
+      classes += ' stepper__step--default';
+    }
+
+    return classes;
+  };
+
+  if (steps.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className={`stepper__container ${getThemeClasses()} ${getSizeClasses()} ${className}`} data-testid={testId}>
+      {/* Progress Bar */}
+      {showProgress && (
+        <div className="stepper__progress">
+          <div className="stepper__progress-header">
+            <span className="stepper__progress-label">Progress</span>
+            <span className="stepper__progress-percentage">{Math.round(progressPercentage)}%</span>
+          </div>
+          <div className="stepper__progress-track">
+            <div
+              className="stepper__progress-bar"
+              style={{
+                width}%`
+              }}
+            />
+          </div>
+        </div>
+      )}
+
+      {/* Steps */}
+      <div className={`stepper__steps ${getVariantClasses()}`}>
+        {steps.map((step, stepIndex) => (
+          <div
+            key={step.id}
+            className={`stepper__step-container ${variant === 'vertical' ? 'stepper__step-container--vertical' }`}
+          >
+            <div
+              className={`${getStepClasses(step, stepIndex)} ${variant === 'vertical' ? 'stepper__step--vertical' }`}
+              onClick={() => handleStepClick(stepIndex)}
+            >
+              {getStepStatusIcon(step, stepIndex)}
+              
+              <div className={`stepper__step-content ${variant === 'vertical' ? 'stepper__step-content--vertical' }`}>
+                {showStepLabels && (
+                  <div className="stepper__step-label">
+                    {step.label}
+                    {step.required && <span className="stepper__step-required">*</span>}
+                  </div>
+                )}
+
+                {showStepDescriptions && step.description && (
+                  <div className="stepper__step-description">
+                    {step.description}
+                  </div>
+                )}
+              </div>
+            </div>
+
+            {/* Step Content for Wizard variant */}
+            {variant === 'wizard' && stepIndex === currentStepIndex && step.content && (
+              <div className="stepper__step-panel">
+                {step.content}
+
+                {/* Step Actions */}
+                {step.actions && (
+                  <div className="stepper__step-actions">
+                    {step.actions.map((action, actionIndex) => (
+                      <button
+                        key={actionIndex}
+                        onClick={action.onClick}
+                        disabled={action.disabled}
+                        className={`stepper__action stepper__action--${
+                          action.variant || 'default'
+                        }`}
+                      >
+                        {action.loading ? 'Loading...' }
+                      </button>
+                    ))}
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+
+      {/* Global Actions */}
+      <div className="stepper__navigation">
+        <button
+          onClick={handleCancel}
+          className="stepper__nav-button stepper__nav-button--cancel"
+        >
+          Cancel
+        </button>
+
+        <div className="stepper__nav-actions">
+          {currentStepIndex > 0 && (
+            <button
+              onClick={() => handleStepClick(currentStepIndex - 1)}
+              className="stepper__nav-button stepper__nav-button--previous"
+            >
+              Previous
+            </button>
+          )}
+
+          {currentStepIndex < steps.length - 1 && !steps.slice(currentStepIndex + 1).every(step => step.disabled) ? (
+            <button
+              onClick={() => handleStepComplete(currentStepIndex)}
+              className="stepper__nav-button stepper__nav-button--next"
+            >
+              Next
+            </button>
+          ) ={handleFinish}
+              className="stepper__nav-button stepper__nav-button--finish"
+            >
+              Finish
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Stepper;

package/dist/components/ui/navigation/stepper.js

@@ -0,0 +1,292 @@
+/**
+ * Stepper Component
+ * Provides comprehensive stepper functionality with theme support and multiple variants
+ */
+
+import * as React from 'react';
+import { useState, useCallback, useMemo } from 'react';
+import { CheckIcon, ExclamationTriangleIcon } from '@heroicons/react/24/outline';
+import { StepperProps, StepItem } from './types';
+
+// Simple icon components
+const ExclamationCircleIcon}> = ({ className = '' }) => (
+  <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+  </svg>
+);
+
+export const Stepper= ({
+  steps,
+  currentStep = 0,
+  defaultCurrentStep = 0,
+  onStepChange,
+  variant = 'default',
+  size = 'md',
+  showStepNumbers = true,
+  showStepLabels = true,
+  showStepDescriptions = true,
+  showStepIcons = true,
+  allowStepClick = true,
+  allowStepNavigation = true,
+  showProgress = true,
+  // TODO= true,
+  onStepComplete,
+  onStepError,
+  onFinish,
+  onCancel,
+  className = '',
+  'data-testid'= 'stepper',
+}) => {
+  const [internalCurrentStep, setInternalCurrentStep] = useState<number>(
+    currentStep !== undefined ? currentStep );
+
+  // Use controlled or uncontrolled current step
+  const currentStepIndex = currentStep !== undefined ? currentStep ;
+
+  const handleStepClick = useCallback((stepIndex) => {
+    if (!allowStepClick || !allowStepNavigation) return;
+    
+    const step = steps[stepIndex];
+    if (step.disabled) return;
+    
+    if (currentStep === undefined) {
+      setInternalCurrentStep(stepIndex);
+    }
+    
+    if (onStepChange) {
+      onStepChange(stepIndex);
+    }
+  }, [currentStep, onStepChange, allowStepClick, allowStepNavigation, steps]);
+
+  const handleStepComplete = useCallback(async (stepIndex) => {
+    const step = steps[stepIndex];
+    if (!step.validation) return;
+
+    try {
+      const isValid = await step.validation();
+      if (isValid) {
+        if (onStepComplete) {
+          onStepComplete(stepIndex);
+        }
+        // Move to next step if available
+        if (stepIndex < steps.length - 1) {
+          handleStepClick(stepIndex + 1);
+        } else if (onFinish) {
+          onFinish();
+        }
+      }
+    } catch (error) {
+      if (onStepError) {
+        onStepError(stepIndex);
+      }
+    }
+  }, [steps, onStepComplete, onStepError, onFinish, handleStepClick]);
+
+  const handleFinish = useCallback(() => {
+    if (onFinish) {
+      onFinish();
+    }
+  }, [onFinish]);
+
+  const handleCancel = useCallback(() => {
+    if (onCancel) {
+      onCancel();
+    }
+  }, [onCancel]);
+
+  // Calculate progress percentage
+  const progressPercentage = useMemo(() => {
+    return ((currentStepIndex + 1) / steps.length) * 100;
+  }, [currentStepIndex, steps.length]);
+
+  const getSizeClasses = () => {
+    switch (size) {
+      case 'sm';
+      case 'lg';
+      default;
+    }
+  };
+
+  const getVariantClasses = () => {
+    switch (variant) {
+      case 'vertical';
+      case 'horizontal';
+      case 'wizard';
+      default;
+    }
+  };
+
+  const getThemeClasses = () => {
+    return 'stepper stepper--stan-design';
+  };
+
+  const getStepStatusIcon = (step, stepIndex) => {
+    if (!showStepIcons) return null;
+
+    if (step.status === 'completed') {
+      return <CheckIcon className="stepper__step-icon stepper__step-icon--completed" />;
+    }
+
+    if (step.status === 'error') {
+      return <ExclamationCircleIcon className="stepper__step-icon stepper__step-icon--error" />;
+    }
+
+    if (step.status === 'warning') {
+      return <ExclamationTriangleIcon className="stepper__step-icon stepper__step-icon--warning" />;
+    }
+
+    if (stepIndex === currentStepIndex) {
+      return <div className="stepper__step-number stepper__step-number--current">
+        {stepIndex + 1}
+      </div>;
+    }
+
+    if (showStepNumbers) {
+      return <div className="stepper__step-number stepper__step-number--default">
+        {stepIndex + 1}
+      </div>;
+    }
+
+    return null;
+  };
+
+  const getStepClasses = (step, stepIndex) => {
+    let classes = 'stepper__step';
+
+    if (step.disabled) {
+      classes += ' stepper__step--disabled';
+    } else if (stepIndex === currentStepIndex) {
+      classes += ' stepper__step--current';
+    } else if (step.status === 'completed') {
+      classes += ' stepper__step--completed';
+    } else if (step.status === 'error') {
+      classes += ' stepper__step--error';
+    } else if (step.status === 'warning') {
+      classes += ' stepper__step--warning';
+    } else {
+      classes += ' stepper__step--default';
+    }
+
+    return classes;
+  };
+
+  if (steps.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className={`stepper__container ${getThemeClasses()} ${getSizeClasses()} ${className}`} data-testid={testId}>
+      {/* Progress Bar */}
+      {showProgress && (
+        <div className="stepper__progress">
+          <div className="stepper__progress-header">
+            <span className="stepper__progress-label">Progress</span>
+            <span className="stepper__progress-percentage">{Math.round(progressPercentage)}%</span>
+          </div>
+          <div className="stepper__progress-track">
+            <div
+              className="stepper__progress-bar"
+              style={{
+                width}%`
+              }}
+            />
+          </div>
+        </div>
+      )}
+
+      {/* Steps */}
+      <div className={`stepper__steps ${getVariantClasses()}`}>
+        {steps.map((step, stepIndex) => (
+          <div
+            key={step.id}
+            className={`stepper__step-container ${variant === 'vertical' ? 'stepper__step-container--vertical' }`}
+          >
+            <div
+              className={`${getStepClasses(step, stepIndex)} ${variant === 'vertical' ? 'stepper__step--vertical' }`}
+              onClick={() => handleStepClick(stepIndex)}
+            >
+              {getStepStatusIcon(step, stepIndex)}
+              
+              <div className={`stepper__step-content ${variant === 'vertical' ? 'stepper__step-content--vertical' }`}>
+                {showStepLabels && (
+                  <div className="stepper__step-label">
+                    {step.label}
+                    {step.required && <span className="stepper__step-required">*</span>}
+                  </div>
+                )}
+
+                {showStepDescriptions && step.description && (
+                  <div className="stepper__step-description">
+                    {step.description}
+                  </div>
+                )}
+              </div>
+            </div>
+
+            {/* Step Content for Wizard variant */}
+            {variant === 'wizard' && stepIndex === currentStepIndex && step.content && (
+              <div className="stepper__step-panel">
+                {step.content}
+
+                {/* Step Actions */}
+                {step.actions && (
+                  <div className="stepper__step-actions">
+                    {step.actions.map((action, actionIndex) => (
+                      <button
+                        key={actionIndex}
+                        onClick={action.onClick}
+                        disabled={action.disabled}
+                        className={`stepper__action stepper__action--${
+                          action.variant || 'default'
+                        }`}
+                      >
+                        {action.loading ? 'Loading...' }
+                      </button>
+                    ))}
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+
+      {/* Global Actions */}
+      <div className="stepper__navigation">
+        <button
+          onClick={handleCancel}
+          className="stepper__nav-button stepper__nav-button--cancel"
+        >
+          Cancel
+        </button>
+
+        <div className="stepper__nav-actions">
+          {currentStepIndex > 0 && (
+            <button
+              onClick={() => handleStepClick(currentStepIndex - 1)}
+              className="stepper__nav-button stepper__nav-button--previous"
+            >
+              Previous
+            </button>
+          )}
+
+          {currentStepIndex < steps.length - 1 && !steps.slice(currentStepIndex + 1).every(step => step.disabled) ? (
+            <button
+              onClick={() => handleStepComplete(currentStepIndex)}
+              className="stepper__nav-button stepper__nav-button--next"
+            >
+              Next
+            </button>
+          ) ={handleFinish}
+              className="stepper__nav-button stepper__nav-button--finish"
+            >
+              Finish
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Stepper;