@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.1.4 → 0.1.6

package/src/components/ui/touch-friendly-interface.tsx

@@ -0,0 +1,296 @@
+import React, { forwardRef } from 'react'
+import { cn } from '../../lib/utils'
+import { useTouchFriendlyInterface } from '../../hooks/use-touch-friendly-interface'
+
+// Touch-Friendly Button Component
+export interface TouchFriendlyButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'default' | 'secondary' | 'outline' | 'ghost' | 'destructive'
+  size?: 'sm' | 'default' | 'lg' | 'xl'
+  feedback?: 'scale' | 'ripple' | 'color' | 'none'
+  children: React.ReactNode
+}
+
+export const TouchFriendlyButton = forwardRef<HTMLButtonElement, TouchFriendlyButtonProps>(
+  ({ className, variant = 'default', size = 'default', feedback = 'scale', children, ...props }, ref) => {
+    const { isTouchTargetCompliant, getTouchTargetSize } = useTouchFriendlyInterface({
+      minSize: 44,
+      feedback
+    })
+
+    const baseClasses = 'touch-target touch-friendly-button touch-interaction touch-performance'
+    const feedbackClasses = {
+      scale: 'touch-feedback',
+      ripple: 'touch-ripple',
+      color: 'touch-state-hover touch-state-active',
+      none: ''
+    }
+
+    const variantClasses = {
+      default: 'touch-friendly-button',
+      secondary: 'touch-friendly-button-secondary',
+      outline: 'touch-target touch-spacing bg-transparent border border-cs-border text-cs-text-primary hover:bg-cs-hover-bg',
+      ghost: 'touch-target touch-spacing bg-transparent text-cs-text-primary hover:bg-cs-hover-bg',
+      destructive: 'touch-target touch-spacing bg-cs-error text-white hover:bg-cs-error-hover'
+    }
+
+    const sizeClasses = {
+      sm: 'min-h-[44px] min-w-[44px] px-3 py-2 text-sm',
+      default: 'min-h-[48px] min-w-[48px] px-4 py-3 text-base',
+      lg: 'min-h-[56px] min-w-[56px] px-6 py-4 text-lg',
+      xl: 'min-h-[64px] min-w-[64px] px-8 py-5 text-xl'
+    }
+
+    return (
+      <button
+        ref={ref}
+        className={cn(
+          baseClasses,
+          feedbackClasses[feedback],
+          variantClasses[variant],
+          sizeClasses[size],
+          className
+        )}
+        style={{
+          minHeight: `${getTouchTargetSize()}px`,
+          minWidth: `${getTouchTargetSize()}px`
+        }}
+        {...props}
+      >
+        {children}
+        {!isTouchTargetCompliant() && (
+          <span className="text-xs text-cs-warning ml-2">
+            ⚠️ Target too small
+          </span>
+        )}
+      </button>
+    )
+  }
+)
+
+TouchFriendlyButton.displayName = 'TouchFriendlyButton'
+
+// Touch-Friendly Input Component
+export interface TouchFriendlyInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+  touchSize?: 'sm' | 'default' | 'lg'
+  feedback?: 'scale' | 'ripple' | 'color' | 'none'
+}
+
+export const TouchFriendlyInput = forwardRef<HTMLInputElement, TouchFriendlyInputProps>(
+  ({ className, touchSize = 'default', feedback = 'scale', ...props }, ref) => {
+    const { getTouchTargetSize } = useTouchFriendlyInterface({
+      minSize: 44,
+      feedback
+    })
+
+    const baseClasses = 'touch-target touch-friendly-input touch-interaction touch-performance'
+    const feedbackClasses = {
+      scale: 'touch-feedback',
+      ripple: 'touch-ripple',
+      color: 'touch-state-hover touch-state-focus',
+      none: ''
+    }
+
+    const sizeClasses = {
+      sm: 'min-h-[44px] min-w-[44px] px-3 py-2 text-sm',
+      default: 'min-h-[48px] min-w-[48px] px-4 py-3 text-base',
+      lg: 'min-h-[56px] min-w-[56px] px-6 py-4 text-lg'
+    }
+
+    return (
+      <input
+        ref={ref}
+        className={cn(
+          baseClasses,
+          feedbackClasses[feedback],
+          sizeClasses[touchSize],
+          className
+        )}
+        style={{
+          minHeight: `${getTouchTargetSize()}px`,
+          minWidth: `${getTouchTargetSize()}px`
+        }}
+        {...props}
+      />
+    )
+  }
+)
+
+TouchFriendlyInput.displayName = 'TouchFriendlyInput'
+
+// Touch-Friendly Card Component
+export interface TouchFriendlyCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  size?: 'sm' | 'default' | 'lg'
+  feedback?: 'scale' | 'ripple' | 'color' | 'none'
+  interactive?: boolean
+}
+
+export const TouchFriendlyCard = forwardRef<HTMLDivElement, TouchFriendlyCardProps>(
+  ({ className, size = 'default', feedback = 'scale', interactive = false, children, ...props }, ref) => {
+    const { isTouchTargetCompliant, getTouchTargetSize } = useTouchFriendlyInterface({
+      minSize: 44,
+      feedback
+    })
+
+    const baseClasses = 'touch-friendly-card touch-interaction touch-performance'
+    const feedbackClasses = interactive ? {
+      scale: 'touch-feedback',
+      ripple: 'touch-ripple',
+      color: 'touch-state-hover touch-state-active',
+      none: ''
+    } : { scale: '', ripple: '', color: '', none: '' }
+
+    const sizeClasses = {
+      sm: 'min-h-[44px] min-w-[44px] p-3',
+      default: 'min-h-[48px] min-w-[48px] p-4',
+      lg: 'min-h-[56px] min-w-[56px] p-6'
+    }
+
+    const interactiveClasses = interactive ? 'cursor-pointer' : ''
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          baseClasses,
+          feedbackClasses[feedback],
+          sizeClasses[size],
+          interactiveClasses,
+          className
+        )}
+        style={{
+          minHeight: `${getTouchTargetSize()}px`,
+          minWidth: `${getTouchTargetSize()}px`
+        }}
+        {...props}
+      >
+        {children}
+        {interactive && !isTouchTargetCompliant() && (
+          <div className="text-xs text-cs-warning mt-2">
+            ⚠️ Interactive target too small
+          </div>
+        )}
+      </div>
+    )
+  }
+)
+
+TouchFriendlyCard.displayName = 'TouchFriendlyCard'
+
+// Touch-Friendly Toggle Component
+export interface TouchFriendlyToggleProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  checked?: boolean
+  onCheckedChange?: (checked: boolean) => void
+  size?: 'sm' | 'default' | 'lg'
+}
+
+export const TouchFriendlyToggle = forwardRef<HTMLButtonElement, TouchFriendlyToggleProps>(
+  ({ className, checked = false, onCheckedChange, size = 'default', ...props }, ref) => {
+    const { isTouchTargetCompliant, getTouchTargetSize } = useTouchFriendlyInterface({
+      minSize: 44,
+      feedback: 'scale'
+    })
+
+    const baseClasses = 'touch-target touch-interaction touch-performance touch-feedback'
+    const sizeClasses = {
+      sm: 'min-h-[44px] min-w-[44px]',
+      default: 'min-h-[48px] min-w-[48px]',
+      lg: 'min-h-[56px] min-w-[56px]'
+    }
+
+    const handleClick = () => {
+      onCheckedChange?.(!checked)
+    }
+
+    return (
+      <button
+        ref={ref}
+        type="button"
+        role="switch"
+        aria-checked={checked}
+        className={cn(
+          baseClasses,
+          sizeClasses[size],
+          'relative inline-flex items-center justify-center rounded-full transition-colors',
+          checked ? 'bg-cs-primary' : 'bg-cs-border',
+          'focus:outline-none focus:ring-2 focus:ring-cs-primary focus:ring-offset-2',
+          className
+        )}
+        style={{
+          minHeight: `${getTouchTargetSize()}px`,
+          minWidth: `${getTouchTargetSize()}px`
+        }}
+        onClick={handleClick}
+        {...props}
+      >
+        <span
+          className={cn(
+            'inline-block rounded-full bg-white shadow transform transition-transform',
+            size === 'sm' ? 'w-5 h-5' : size === 'default' ? 'w-6 h-6' : 'w-7 h-7',
+            checked ? 'translate-x-full' : 'translate-x-0'
+          )}
+        />
+        {!isTouchTargetCompliant() && (
+          <span className="text-xs text-cs-warning absolute -bottom-6 left-1/2 transform -translate-x-1/2">
+            ⚠️ Target too small
+          </span>
+        )}
+      </button>
+    )
+  }
+)
+
+TouchFriendlyToggle.displayName = 'TouchFriendlyToggle'
+
+// Touch-Friendly Slider Component
+export interface TouchFriendlySliderProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
+  touchSize?: 'sm' | 'default' | 'lg'
+  showValue?: boolean
+}
+
+export const TouchFriendlySlider = forwardRef<HTMLInputElement, TouchFriendlySliderProps>(
+  ({ className, touchSize = 'default', showValue = true, ...props }, ref) => {
+    const { isTouchTargetCompliant, getTouchTargetSize } = useTouchFriendlyInterface({
+      minSize: 44,
+      feedback: 'scale'
+    })
+
+    const baseClasses = 'touch-target touch-interaction touch-performance touch-feedback'
+    const sizeClasses = {
+      sm: 'min-h-[44px] min-w-[44px]',
+      default: 'min-h-[48px] min-w-[48px]',
+      lg: 'min-h-[56px] min-w-[56px]'
+    }
+
+    return (
+      <div className="flex flex-col items-center space-y-2">
+        <input
+          ref={ref}
+          type="range"
+          className={cn(
+            baseClasses,
+            sizeClasses[touchSize],
+            'w-full h-2 bg-cs-border rounded-lg appearance-none cursor-pointer',
+            'focus:outline-none focus:ring-2 focus:ring-cs-primary',
+            className
+          )}
+          style={{
+            minHeight: `${getTouchTargetSize()}px`
+          }}
+          {...props}
+        />
+        {showValue && (
+          <span className="text-sm text-cs-text-secondary">
+            {props.value || props.defaultValue || 0}
+          </span>
+        )}
+        {!isTouchTargetCompliant() && (
+          <span className="text-xs text-cs-warning">
+            ⚠️ Slider target too small
+          </span>
+        )}
+      </div>
+    )
+  }
+)
+
+TouchFriendlySlider.displayName = 'TouchFriendlySlider'

package/src/hooks/index.ts

@@ -0,0 +1,190 @@
+// Performance monitoring hooks
+export { usePerformance } from './use-performance'
+export type {
+  PerformanceMetrics,
+  PerformanceThresholds,
+  PerformanceCallbacks,
+  PerformanceOptions
+} from './use-performance'
+
+export { useFrameRate } from './use-frame-rate'
+export type {
+  FrameRateMetrics,
+  FrameRateThresholds,
+  FrameRateCallbacks,
+  FrameRateOptions
+} from './use-frame-rate'
+
+export { useMemoryUsage } from './use-memory-usage'
+export type {
+  MemoryMetrics,
+  MemoryThresholds,
+  MemoryCallbacks,
+  MemoryOptions
+} from './use-memory-usage'
+
+export { useBatteryStatus } from './use-battery-status'
+export type {
+  BatteryMetrics,
+  BatteryThresholds,
+  BatteryCallbacks,
+  BatteryOptions
+} from './use-battery-status'
+
+export { usePerformanceThrottling } from './use-performance-throttling'
+export type {
+  PerformanceThrottlingConfig,
+  PerformanceThrottlingCallbacks
+} from './use-performance-throttling'
+
+// Touch optimization & gesture support hooks
+export { useGestures, useSwipeGesture, usePinchGesture, useTapGesture, useLongPressGesture } from './use-gestures'
+export type {
+  GestureConfig,
+  SwipeGesture,
+  PinchGesture,
+  GestureCallbacks,
+  GestureState
+} from './use-gestures'
+
+export { useTouchOptimization, useBasicTouchOptimization, useBatteryAwareTouchOptimization } from './use-touch-optimization'
+export type {
+  TouchOptimizationConfig,
+  TouchPerformanceMetrics,
+  TouchOptimizationCallbacks,
+  TouchOptimizationState
+} from './use-touch-optimization'
+
+export { useMobileTouch, useBasicMobileTouch, useEnhancedMobileTouch } from './use-mobile-touch'
+export type {
+  MobileTouchConfig,
+  TouchFeedbackState,
+  GestureHint,
+  MobileTouchCallbacks,
+  MobileTouchState
+} from './use-mobile-touch'
+
+// Animation hooks
+export { 
+  useAnimationProfile,
+  useAnimationDuration,
+  useAnimationEasing,
+  useAnimationClasses,
+  usePerformanceMode
+} from './use-animation-profile'
+export type { 
+  AnimationProfile,
+  PerformanceMetrics as AnimationPerformanceMetrics
+} from './use-animation-profile'
+
+// Device hook
+export { useDevice } from './use-device'
+export type { DeviceInfo } from './use-device'
+
+// Battery-conscious animation hooks
+export { useBatteryAnimations } from './use-battery-animations'
+export type {
+  BatteryAnimationConfig,
+  BatteryAnimationState,
+  BatteryAnimationCallbacks
+} from './use-battery-animations'
+
+// Hardware acceleration hooks
+export { useHardwareAcceleration } from './use-hardware-acceleration'
+export type {
+  GPUInfo,
+  HardwareAccelerationMetrics,
+  HardwareAccelerationConfig,
+  HardwareAccelerationCallbacks
+} from './use-hardware-acceleration'
+
+// Battery optimization hooks
+export { useBatteryOptimization } from './use-battery-optimization'
+export type {
+  BatteryStatus,
+  BatteryOptimizationConfig,
+  BatteryOptimizationCallbacks
+} from './use-battery-optimization'
+
+// Advanced component architecture hooks
+export { useAdvancedPatterns } from './use-advanced-patterns'
+export type {
+  AdvancedPatternsConfig,
+  AdvancedPatternsCallbacks,
+  CompoundComponentContext,
+  RenderPropsConfig,
+  HigherOrderComponentConfig
+} from './use-advanced-patterns'
+
+export { useComponentPerformance } from './use-component-performance'
+export type {
+  ComponentPerformanceConfig,
+  ComponentPerformanceCallbacks,
+  PerformanceMetrics as ComponentPerformanceMetrics
+} from './use-component-performance'
+
+export { useMobileOptimization } from './use-mobile-optimization'
+export type {
+  MobileOptimizationConfig,
+  MobileOptimizationCallbacks,
+  MobileOptimizationState
+} from './use-mobile-optimization'
+
+export { useReusableArchitecture } from './use-reusable-architecture'
+export type {
+  ReusableArchitectureConfig,
+  ReusableArchitectureCallbacks,
+  ComponentTemplate,
+  SharedPattern,
+  SharedStyle,
+  SharedBehavior
+} from './use-reusable-architecture'
+
+export { useAccessibilitySupport } from './use-accessibility-support'
+export type {
+  AccessibilitySupportConfig,
+  AccessibilitySupportCallbacks,
+  AccessibilityState,
+  AccessibilityFeatures
+} from './use-accessibility-support'
+
+// Mobile skeleton and loading states hooks
+export { default as useMobileSkeleton } from './use-mobile-skeleton'
+export type {
+  MobileSkeletonConfig,
+  SkeletonVariant,
+  DeviceLoadingState,
+  MobileSkeletonCallbacks
+} from './use-mobile-skeleton'
+
+export { default as useDeviceLoadingStates } from './use-device-loading-states'
+export type {
+  DeviceLoadingStatesConfig,
+  LoadingState,
+  DeviceSpecificState,
+  DeviceLoadingStatesCallbacks
+} from './use-device-loading-states'
+
+export { default as useLoadingPerformance } from './use-loading-performance'
+export type {
+  LoadingPerformanceConfig,
+  PerformanceMetrics as LoadingPerformanceMetrics,
+  OptimizationStrategy as LoadingOptimizationStrategy,
+  LoadingPerformanceCallbacks
+} from './use-loading-performance'
+
+export { default as useBatteryConsciousLoading } from './use-battery-conscious-loading'
+export type {
+  BatteryConsciousLoadingConfig,
+  BatteryState as BatteryLoadingState,
+  LoadingOptimization,
+  BatteryConsciousLoadingCallbacks
+} from './use-battery-conscious-loading'
+
+export { default as useLoadingAccessibility } from './use-loading-accessibility'
+export type {
+  LoadingAccessibilityConfig,
+  AccessibilityFeature,
+  AccessibilityState as LoadingAccessibilityState,
+  LoadingAccessibilityCallbacks
+} from './use-loading-accessibility'