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

package/src/components/ui/enterprise-mobile-experience.tsx

@@ -0,0 +1,464 @@
+import React, { forwardRef, useState, useEffect } from 'react'
+import { cn } from '../../lib/utils'
+
+// Enterprise Button Component
+export interface EnterpriseButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'default' | 'secondary' | 'outline' | 'ghost' | 'premium'
+  size?: 'sm' | 'default' | 'lg' | 'xl'
+  loading?: boolean
+  children: React.ReactNode
+}
+
+export const EnterpriseButton = forwardRef<HTMLButtonElement, EnterpriseButtonProps>(
+  ({ className, variant = 'default', size = 'default', loading = false, children, ...props }, ref) => {
+    const [isPressed, setIsPressed] = useState(false)
+
+    const baseClasses = 'enterprise-button enterprise-mobile-optimized enterprise-interaction-refined'
+    
+    const variantClasses = {
+      default: 'enterprise-button',
+      secondary: 'enterprise-button-secondary',
+      outline: 'enterprise-button-outline',
+      ghost: 'enterprise-button-ghost',
+      premium: 'enterprise-button enterprise-interaction-premium'
+    }
+
+    const sizeClasses = {
+      sm: 'px-4 py-2 text-sm min-h-[40px] min-w-[40px]',
+      default: 'px-6 py-3 text-base min-h-[48px] min-w-[48px]',
+      lg: 'px-8 py-4 text-lg min-h-[56px] min-w-[56px]',
+      xl: 'px-10 py-5 text-xl min-h-[64px] min-w-[64px]'
+    }
+
+    const handleMouseDown = () => setIsPressed(true)
+    const handleMouseUp = () => setIsPressed(false)
+    const handleMouseLeave = () => setIsPressed(false)
+
+    return (
+      <button
+        ref={ref}
+        className={cn(
+          baseClasses,
+          variantClasses[variant],
+          sizeClasses[size],
+          loading && 'enterprise-loading',
+          isPressed && 'scale-95',
+          className
+        )}
+        onMouseDown={handleMouseDown}
+        onMouseUp={handleMouseUp}
+        onMouseLeave={handleMouseLeave}
+        disabled={loading}
+        {...props}
+      >
+        {loading && (
+          <span className="enterprise-loading-spinner mr-2" />
+        )}
+        {children}
+      </button>
+    )
+  }
+)
+
+EnterpriseButton.displayName = 'EnterpriseButton'
+
+// Enterprise Card Component
+export interface EnterpriseCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: 'default' | 'interactive' | 'premium' | 'featured'
+  children: React.ReactNode
+}
+
+export const EnterpriseCard = forwardRef<HTMLDivElement, EnterpriseCardProps>(
+  ({ className, variant = 'default', children, ...props }, ref) => {
+    const baseClasses = 'enterprise-card enterprise-visual-refined'
+    
+    const variantClasses = {
+      default: '',
+      interactive: 'enterprise-card-interactive enterprise-interaction-refined',
+      premium: 'enterprise-card-premium enterprise-interaction-premium',
+      featured: 'enterprise-card-premium enterprise-interaction-premium border-2 border-cs-accent'
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          baseClasses,
+          variantClasses[variant],
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    )
+  }
+)
+
+EnterpriseCard.displayName = 'EnterpriseCard'
+
+// Enterprise Input Component
+export interface EnterpriseInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  variant?: 'default' | 'success' | 'error' | 'warning'
+  label?: string
+  required?: boolean
+  children?: React.ReactNode
+}
+
+export const EnterpriseInput = forwardRef<HTMLInputElement, EnterpriseInputProps>(
+  ({ className, variant = 'default', label, required = false, children, ...props }, ref) => {
+    const [isFocused, setIsFocused] = useState(false)
+
+    const baseClasses = 'enterprise-input enterprise-mobile-optimized enterprise-accessibility'
+    
+    const variantClasses = {
+      default: '',
+      success: 'enterprise-input-success',
+      error: 'enterprise-input-error',
+      warning: 'enterprise-input-warning'
+    }
+
+    const handleFocus = () => setIsFocused(true)
+    const handleBlur = () => setIsFocused(false)
+
+    return (
+      <div className="space-y-2">
+        {label && (
+          <label className={cn(
+            'enterprise-label',
+            required && 'enterprise-label-required'
+          )}>
+            {label}
+          </label>
+        )}
+        <div className="relative">
+          <input
+            ref={ref}
+            className={cn(
+              baseClasses,
+              variantClasses[variant],
+              isFocused && 'enterprise-input-focused',
+              className
+            )}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            {...props}
+          />
+          {children}
+        </div>
+      </div>
+    )
+  }
+)
+
+EnterpriseInput.displayName = 'EnterpriseInput'
+
+// Enterprise Progress Component
+export interface EnterpriseProgressProps {
+  value: number
+  max?: number
+  variant?: 'default' | 'success' | 'warning' | 'error'
+  size?: 'sm' | 'default' | 'lg'
+  showLabel?: boolean
+  className?: string
+}
+
+export const EnterpriseProgress: React.FC<EnterpriseProgressProps> = ({
+  value,
+  max = 100,
+  variant = 'default',
+  size = 'default',
+  showLabel = true,
+  className
+}) => {
+  const percentage = Math.min(100, Math.max(0, (value / max) * 100))
+  
+  const baseClasses = 'enterprise-progress enterprise-performance'
+  
+  const sizeClasses = {
+    sm: 'h-1',
+    default: 'h-2',
+    lg: 'h-3'
+  }
+
+  const variantClasses = {
+    default: 'enterprise-progress-bar',
+    success: 'enterprise-progress-bar bg-gradient-to-r from-cs-success to-cs-success/80',
+    warning: 'enterprise-progress-bar bg-gradient-to-r from-cs-warning to-cs-warning/80',
+    error: 'enterprise-progress-bar bg-gradient-to-r from-cs-error to-cs-error/80'
+  }
+
+  return (
+    <div className={cn('space-y-2', className)}>
+      {showLabel && (
+        <div className="flex justify-between items-center text-sm">
+          <span className="text-cs-text-primary font-medium">Progress</span>
+          <span className="text-cs-text-secondary">{Math.round(percentage)}%</span>
+        </div>
+      )}
+      <div className={cn(baseClasses, sizeClasses[size])}>
+        <div
+          className={cn(variantClasses[variant])}
+          style={{ width: `${percentage}%` }}
+        />
+      </div>
+    </div>
+  )
+}
+
+// Enterprise Quality Metric Component
+export interface EnterpriseQualityMetricProps {
+  score: number
+  label: string
+  description?: string
+  variant?: 'default' | 'excellent' | 'good' | 'needs-improvement'
+  className?: string
+}
+
+export const EnterpriseQualityMetric: React.FC<EnterpriseQualityMetricProps> = ({
+  score,
+  label,
+  description,
+  className
+}) => {
+  const getVariantClass = () => {
+    if (score >= 90) return 'enterprise-quality-excellent'
+    if (score >= 80) return 'enterprise-quality-good'
+    if (score < 80) return 'enterprise-quality-needs-improvement'
+    return 'enterprise-quality-metric'
+  }
+
+  const getScoreColor = () => {
+    if (score >= 90) return 'text-cs-success'
+    if (score >= 80) return 'text-cs-warning'
+    if (score < 80) return 'text-cs-error'
+    return 'text-cs-primary'
+  }
+
+  return (
+    <div className={cn('enterprise-quality-metric', getVariantClass(), className)}>
+      <div className={cn('enterprise-quality-score', getScoreColor())}>
+        {score}
+      </div>
+      <div className="enterprise-quality-label">
+        {label}
+      </div>
+      {description && (
+        <div className="enterprise-quality-description">
+          {description}
+        </div>
+      )}
+    </div>
+  )
+}
+
+// Enterprise Status Component
+export interface EnterpriseStatusProps {
+  phase: 'initializing' | 'optimizing' | 'polishing' | 'verifying' | 'complete' | 'enterprise-ready'
+  children: React.ReactNode
+  className?: string
+}
+
+export const EnterpriseStatus: React.FC<EnterpriseStatusProps> = ({
+  phase,
+  children,
+  className
+}) => {
+  const phaseClasses = {
+    initializing: 'enterprise-status-initializing',
+    optimizing: 'enterprise-status-optimizing',
+    polishing: 'enterprise-status-polishing',
+    verifying: 'enterprise-status-verifying',
+    complete: 'enterprise-status-complete',
+    'enterprise-ready': 'enterprise-status-enterprise-ready'
+  }
+
+  const phaseIcons = {
+    initializing: '🔄',
+    optimizing: '⚡',
+    polishing: '✨',
+    verifying: '🔍',
+    complete: '✅',
+    'enterprise-ready': '🏆'
+  }
+
+  return (
+    <span className={cn('enterprise-status', phaseClasses[phase], className)}>
+      <span className="text-lg">{phaseIcons[phase]}</span>
+      {children}
+    </span>
+  )
+}
+
+// Enterprise Container Component
+export interface EnterpriseContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode
+}
+
+export const EnterpriseContainer: React.FC<EnterpriseContainerProps> = ({
+  className,
+  children,
+  ...props
+}) => {
+  return (
+    <div
+      className={cn('enterprise-container', className)}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+// Enterprise Section Component
+export interface EnterpriseSectionProps extends React.HTMLAttributes<HTMLElement> {
+  children: React.ReactNode
+}
+
+export const EnterpriseSection: React.FC<EnterpriseSectionProps> = ({
+  className,
+  children,
+  ...props
+}) => {
+  return (
+    <section
+      className={cn('enterprise-section', className)}
+      {...props}
+    >
+      {children}
+    </section>
+  )
+}
+
+// Enterprise Grid Component
+export interface EnterpriseGridProps extends React.HTMLAttributes<HTMLDivElement> {
+  cols?: 1 | 2 | 3 | 4
+  children: React.ReactNode
+}
+
+export const EnterpriseGrid: React.FC<EnterpriseGridProps> = ({
+  cols = 1,
+  className,
+  children,
+  ...props
+}) => {
+  const colsClasses = {
+    1: 'enterprise-grid-cols-1',
+    2: 'enterprise-grid-cols-2',
+    3: 'enterprise-grid-cols-3',
+    4: 'enterprise-grid-cols-4'
+  }
+
+  return (
+    <div
+      className={cn('enterprise-grid', colsClasses[cols], className)}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+// Enterprise Loading Component
+export interface EnterpriseLoadingProps {
+  size?: 'sm' | 'default' | 'lg'
+  text?: string
+  className?: string
+}
+
+export const EnterpriseLoading: React.FC<EnterpriseLoadingProps> = ({
+  size = 'default',
+  text = 'Loading...',
+  className
+}) => {
+  const sizeClasses = {
+    sm: 'w-4 h-4',
+    default: 'w-6 h-6',
+    lg: 'w-8 h-8'
+  }
+
+  return (
+    <div className={cn('flex items-center justify-center space-x-2', className)}>
+      <div className={cn('enterprise-loading-spinner', sizeClasses[size])} />
+      {text && (
+        <span className="text-cs-text-secondary text-sm font-medium">
+          {text}
+        </span>
+      )}
+    </div>
+  )
+}
+
+// Enterprise Notification Component
+export interface EnterpriseNotificationProps {
+  type: 'success' | 'warning' | 'error' | 'info'
+  title: string
+  message?: string
+  onClose?: () => void
+  duration?: number
+  className?: string
+}
+
+export const EnterpriseNotification: React.FC<EnterpriseNotificationProps> = ({
+  type,
+  title,
+  message,
+  onClose,
+  duration = 5000,
+  className
+}) => {
+  const [isVisible, setIsVisible] = useState(true)
+
+  useEffect(() => {
+    if (duration > 0) {
+      const timer = setTimeout(() => {
+        setIsVisible(false)
+        onClose?.()
+      }, duration)
+
+      return () => clearTimeout(timer)
+    }
+  }, [duration, onClose])
+
+  const typeClasses = {
+    success: 'enterprise-notification-success',
+    warning: 'enterprise-notification-warning',
+    error: 'enterprise-notification-error',
+    info: 'enterprise-notification-info'
+  }
+
+  const typeIcons = {
+    success: '✅',
+    warning: '⚠️',
+    error: '❌',
+    info: 'ℹ️'
+  }
+
+  if (!isVisible) return null
+
+  return (
+    <div className={cn('enterprise-notification', typeClasses[type], className)}>
+      <div className="flex items-start space-x-3">
+        <span className="text-lg">{typeIcons[type]}</span>
+        <div className="flex-1">
+          <h4 className="text-sm font-semibold text-cs-text-primary">
+            {title}
+          </h4>
+          {message && (
+            <p className="text-sm text-cs-text-secondary mt-1">
+              {message}
+            </p>
+          )}
+        </div>
+        {onClose && (
+          <button
+            onClick={onClose}
+            className="text-cs-text-secondary hover:text-cs-text-primary transition-colors"
+          >
+            ✕
+          </button>
+        )}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,157 @@
+import React, { useState, useCallback } from 'react';
+import { AlertProps, AlertAction } 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 alert type
+const getAlertIcon = (type: AlertProps['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;
+  }
+};
+
+// Alert Action Button Component
+const AlertActionButton: React.FC<AlertAction & { theme: string }> = ({
+  label,
+  onClick,
+  variant = 'primary'
+}) => {
+  return (
+    <button
+      type="button"
+      className={`alert__action-button alert__action-button--${variant}`}
+      onClick={onClick}
+    >
+      {label}
+    </button>
+  );
+};
+
+// Main Alert Component
+export const Alert: React.FC<AlertProps> = ({
+  title,
+  message,
+  type = 'info',
+  dismissible = false,
+  onDismiss,
+  icon,
+  actions = [],
+  showIcon = true,
+  closable = false,
+  persistent = false,
+  className = '',
+  theme = 'stan-design',
+  size = 'md',
+  variant = 'default'
+}) => {
+  // const { getTheme } = useTheme();
+  // const themeConfig = getTheme(theme);
+  // Note: colors not needed as we're using semantic CSS classes
+  
+  const [isVisible, setIsVisible] = useState(true);
+
+  const handleDismiss = useCallback(() => {
+    if (onDismiss) {
+      onDismiss();
+    }
+    if (!persistent) {
+      setIsVisible(false);
+    }
+  }, [onDismiss, persistent]);
+
+  const shouldShowIcon = showIcon && (icon || type);
+  const shouldShowClose = (closable || dismissible) && !persistent;
+
+  if (!isVisible) {
+    return null;
+  }
+
+  return (
+    <div
+      className={`alert__container alert__container--${size} alert__container--${type} alert__container--${variant} ${className}`}
+      role="alert"
+      aria-live="polite"
+    >
+      {shouldShowIcon && (
+        <div className={`alert__icon alert__icon--${type}`}>
+          {icon || getAlertIcon(type, 'alert__icon')}
+        </div>
+      )}
+
+      <div className="alert__content">
+        {title && (
+          <h3 className="alert__title">
+            {title}
+          </h3>
+        )}
+
+        <div className={`alert__message ${!title ? 'alert__message--only' : ''}`}>
+          {message}
+        </div>
+
+        {actions.length > 0 && (
+          <div className="alert__actions">
+            {actions.map((action, index) => (
+              <AlertActionButton
+                key={index}
+                {...action}
+                theme={theme}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+
+      {shouldShowClose && (
+        <button
+          type="button"
+          className="alert__close-button"
+          onClick={handleDismiss}
+          aria-label="Close alert"
+        >
+          <XMarkIcon className="alert__close-icon" />
+        </button>
+      )}
+    </div>
+  );
+};
+
+export default Alert;