@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.11 → 0.2.16

package/dist/components/ui/navigation/stepper.d.ts

@@ -1,294 +0,0 @@
-
-// Simple icon components
-const ExclamationCircleIcon: React.FC<{ className?: string }> = ({ 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: React.FC<StepperProps> = ({
-  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: Implement step status display in future version
-  // showStepStatus = true,
-  onStepComplete,
-  onStepError,
-  onFinish,
-  onCancel,
-  className = '',
-  'data-testid': testId = 'stepper',
-}) => {
-  const [internalCurrentStep, setInternalCurrentStep] = useState<number>(
-    currentStep !== undefined ? currentStep : defaultCurrentStep
-  );
-
-  // Use controlled or uncontrolled current step
-  const currentStepIndex = currentStep !== undefined ? currentStep : internalCurrentStep;
-
-  const handleStepClick = useCallback((stepIndex: number) => {
-    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: number) => {
-    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':
-        return 'stepper--size-sm';
-      case 'lg':
-        return 'stepper--size-lg';
-      default: // md
-        return 'stepper--size-md';
-    }
-  };
-
-  const getVariantClasses = () => {
-    switch (variant) {
-      case 'vertical':
-        return 'stepper--vertical';
-      case 'horizontal':
-        return 'stepper--horizontal';
-      case 'wizard':
-        return 'stepper--wizard';
-      default:
-        return 'stepper--default';
-    }
-  };
-
-  const getThemeClasses = () => {
-    return 'stepper stepper--stan-design';
-  };
-
-  const getStepStatusIcon = (step: StepItem, stepIndex: number) => {
-    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: StepItem, stepIndex: number) => {
-    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: `${progressPercentage}%`
-              }}
-            />
-          </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...' : action.label}
-                      </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>
-          ) : (
-            <button
-              onClick={handleFinish}
-              className="stepper__nav-button stepper__nav-button--finish"
-            >
-              Finish
-            </button>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default Stepper;

package/dist/components/ui/navigation/tabs.d.ts

@@ -1,196 +0,0 @@
-
-// Simple icon components
-const PlusIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
-  <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
-    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
-  </svg>
-);
-
-export const Tabs: React.FC<TabsProps> = ({
-  tabs,
-  activeTab,
-  defaultActiveTab,
-  onTabChange,
-  variant = 'default',
-  size = 'md',
-  orientation = 'horizontal',
-  fullWidth = false,
-  centered = false,
-  disabled = false,
-  loading = false,
-  closable = false,
-  onTabClose,
-  addable = false,
-  onTabAdd,
-  // TODO: Implement draggable functionality in future version
-  // draggable = false,
-  // onTabsReorder,
-  className = '',
-  'data-testid': testId = 'tabs',
-}) => {
-  const [internalActiveTab, setInternalActiveTab] = useState<string>(
-    activeTab || defaultActiveTab || (tabs.length > 0 ? tabs[0].id : '')
-  );
-
-  // Use controlled or uncontrolled active tab
-  const currentActiveTab = activeTab !== undefined ? activeTab : internalActiveTab;
-
-  const handleTabChange = useCallback((tabId: string) => {
-    if (disabled || loading) return;
-
-    if (activeTab === undefined) {
-      setInternalActiveTab(tabId);
-    }
-
-    if (onTabChange) {
-      onTabChange(tabId);
-    }
-  }, [activeTab, onTabChange, disabled, loading]);
-
-  const handleTabClose = useCallback((tabId: string, event: React.MouseEvent) => {
-    event.stopPropagation();
-    if (onTabClose) {
-      onTabClose(tabId);
-    }
-  }, [onTabClose]);
-
-  const handleTabAdd = useCallback(() => {
-    if (onTabAdd) {
-      onTabAdd();
-    }
-  }, [onTabAdd]);
-
-  // Memoize current tab content
-  const currentTabContent = useMemo(() => {
-    return tabs.find(tab => tab.id === currentActiveTab)?.content || null;
-  }, [tabs, currentActiveTab]);
-
-  const getSizeClasses = () => {
-    switch (size) {
-      case 'sm':
-        return 'tabs__item--small';
-      case 'lg':
-        return 'tabs__item--large';
-      default: // md
-        return 'tabs__item--medium';
-    }
-  };
-
-  const getVariantClasses = (isActive: boolean, isDisabled: boolean) => {
-    if (isDisabled) {
-      return 'tabs__item--disabled';
-    }
-
-    switch (variant) {
-      case 'pills':
-        return isActive ? 'tabs__item--pills tabs__item--active' : 'tabs__item--pills';
-      case 'underline':
-        return isActive ? 'tabs__item--underline tabs__item--active' : 'tabs__item--underline';
-      case 'cards':
-        return isActive ? 'tabs__item--cards tabs__item--active' : 'tabs__item--cards';
-      case 'minimal':
-        return isActive ? 'tabs__item--minimal tabs__item--active' : 'tabs__item--minimal';
-      default: // default
-        return isActive ? 'tabs__item--default tabs__item--active' : 'tabs__item--default';
-    }
-  };
-
-    const getTabListClasses = () => {
-    const baseClasses = 'tabs__list tabs__list--semantic';
-
-    if (orientation === 'vertical') {
-      return `${baseClasses} tabs__list--vertical`;
-    }
-
-    if (fullWidth) {
-      return `${baseClasses} tabs__list--full-width`;
-    }
-
-    if (centered) {
-      return `${baseClasses} tabs__list--centered`;
-    }
-
-    return baseClasses;
-  };
-
-  const getTabClasses = (tab: TabItem) => {
-    const isActive = tab.id === currentActiveTab;
-    const isDisabled = tab.disabled || disabled;
-
-    const baseClasses = `tabs__item ${getSizeClasses()} ${getVariantClasses(isActive, isDisabled)}`;
-
-    if (orientation === 'vertical') {
-      return `${baseClasses} tabs__item--vertical`;
-    }
-
-    if (fullWidth) {
-      return `${baseClasses} tabs__item--full-width`;
-    }
-
-    return baseClasses;
-  };
-
-  if (tabs.length === 0) {
-    return null;
-  }
-
-  return (
-    <div className={`tabs ${orientation === 'vertical' ? 'tabs--vertical' : ''} ${className}`} data-testid={testId}>
-      {/* Tab List */}
-      <div className={getTabListClasses()}>
-        {tabs.map((tab) => (
-          <button
-            key={tab.id}
-            onClick={() => handleTabChange(tab.id)}
-            disabled={tab.disabled || disabled}
-            className={getTabClasses(tab)}
-            aria-selected={tab.id === currentActiveTab}
-            aria-controls={`panel-${tab.id}`}
-            role="tab"
-          >
-            {tab.icon && <span className="tabs__item-icon">{tab.icon}</span>}
-            <span className="tabs__item-label">{tab.label}</span>
-            {tab.badge && <span className="tabs__item-badge">{tab.badge}</span>}
-            {closable && tab.closable && (
-                              <button
-                  onClick={(e) => handleTabClose(tab.id, e)}
-                  className="tabs__close-button"
-                  aria-label={`Close ${tab.label} tab`}
-                >
-                  <XMarkIcon className="tabs__close-icon" />
-                </button>
-            )}
-          </button>
-        ))}
-
-        {addable && (
-          <button
-            onClick={handleTabAdd}
-            disabled={disabled || loading}
-            className={`tabs__add-button ${getSizeClasses()}`}
-            aria-label="Add new tab"
-          >
-            <PlusIcon className="tabs__add-icon" />
-          </button>
-        )}
-      </div>
-
-      {/* Tab Panels */}
-      <div
-        className={`tabs__content ${orientation === 'vertical' ? 'tabs__content--vertical' : ''}`}
-        role="tabpanel"
-        aria-labelledby={`tab-${currentActiveTab}`}
-      >
-        {loading ? (
-          <div className="tabs__loading">
-            <div className="tabs__loading-spinner"></div>
-          </div>
-        ) : (
-          currentTabContent
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default Tabs;