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

package/dist/hooks/use-mobile-skeleton.esm.js

@@ -1,25 +1,46 @@
 import { useState, useCallback, useRef, useEffect } from 'react'
 
 export interface MobileSkeletonConfig {
-  enableMobileOptimization?}
+  enableMobileOptimization?: boolean
+  enablePerformanceOptimization?: boolean
+  enableBatteryOptimization?: boolean
+  enableAccessibilitySupport?: boolean
+  enableTouchOptimization?: boolean
+  animationDuration?: number
+  skeletonCount?: number
+  mobileBreakpoint?: number
+}
 
 export interface SkeletonVariant {
-  id}
+  id: string
+  name: string
+  width: string | number
+  height: string | number
+  borderRadius?: string | number
+  animation?: 'pulse' | 'wave' | 'shimmer' | 'fade'
+  mobileOptimized?: boolean
+  touchFriendly?: boolean
+}
 
 export interface DeviceLoadingState {
-  deviceType}
+  deviceType: 'mobile' | 'tablet' | 'desktop'
+  orientation: 'portrait' | 'landscape'
+  screenSize: 'small' | 'medium' | 'large'
+  loadingStrategy: 'skeleton' | 'spinner' | 'progress' | 'skeleton-spinner'
+  animationIntensity: 'low' | 'medium' | 'high'
+}
 
 export interface MobileSkeletonCallbacks {
-  onSkeletonCreated?) => void
-  onLoadingStateChanged?) => void
-  onPerformanceOptimized?) => void
-  onBatteryOptimized?) => void
-  onAccessibilityEnhanced?) => void
+  onSkeletonCreated?: (variant: SkeletonVariant) => void
+  onLoadingStateChanged?: (state: DeviceLoadingState) => void
+  onPerformanceOptimized?: (optimization: string) => void
+  onBatteryOptimized?: (strategy: string) => void
+  onAccessibilityEnhanced?: (feature: string) => void
 }
 
 export const useMobileSkeleton = (
-  config= {},
-  callbacks= {}
+  config: MobileSkeletonConfig = {},
+  callbacks: MobileSkeletonCallbacks = {}
 ) => {
   const {
     enablePerformanceOptimization = true,
@@ -30,20 +51,22 @@ export const useMobileSkeleton = (
   } = config
 
   const [deviceState, setDeviceState] = useState<DeviceLoadingState>({
-    deviceType,
-    orientation,
-    screenSize,
-    loadingStrategy,
-    animationIntensity})
+    deviceType: 'desktop',
+    orientation: 'landscape',
+    screenSize: 'large',
+    loadingStrategy: 'skeleton',
+    animationIntensity: 'medium'
+  })
 
   const [skeletonVariants, setSkeletonVariants] = useState<SkeletonVariant[]>([])
   const [isOptimizing, setIsOptimizing] = useState(false)
   const [optimizations, setOptimizations] = useState<string[]>([])
   const [performanceMetrics, setPerformanceMetrics] = useState({
-    renderTime,
-    animationFrameRate,
-    memoryUsage,
-    batteryImpact})
+    renderTime: 0,
+    animationFrameRate: 60,
+    memoryUsage: 0,
+    batteryImpact: 'low'
+  })
 
 
   const animationFrameRef = useRef<number | null>(null)
@@ -57,7 +80,12 @@ export const useMobileSkeleton = (
     const isTablet = width > mobileBreakpoint && width <= 1024
     const isPortrait = height > width
 
-    let deviceType) {
+    let deviceType: 'mobile' | 'tablet' | 'desktop'
+    let screenSize: 'small' | 'medium' | 'large'
+    let loadingStrategy: 'skeleton' | 'spinner' | 'progress' | 'skeleton-spinner'
+    let animationIntensity: 'low' | 'medium' | 'high'
+
+    if (isMobile) {
       deviceType = 'mobile'
       screenSize = 'small'
       loadingStrategy = 'skeleton'
@@ -74,9 +102,9 @@ export const useMobileSkeleton = (
       animationIntensity = 'high'
     }
 
-    const newState= {
+    const newState: DeviceLoadingState = {
       deviceType,
-      orientation,
+      orientation: isPortrait ? 'portrait' : 'landscape',
       screenSize,
       loadingStrategy,
       animationIntensity
@@ -90,14 +118,14 @@ export const useMobileSkeleton = (
 
   // Create skeleton variants
   const createSkeletonVariant = useCallback((
-    variant, 'id'>
+    variant: Omit<SkeletonVariant, 'id'>
   ) => {
     const id = `skeleton-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
-    const newVariant= {
+    const newVariant: SkeletonVariant = {
       ...variant,
       id,
-      mobileOptimized=== 'mobile',
-      touchFriendly=== 'mobile'
+      mobileOptimized: deviceState.deviceType === 'mobile',
+      touchFriendly: enableTouchOptimization && deviceState.deviceType === 'mobile'
     }
 
     setSkeletonVariants(prev => [...prev, newVariant])
@@ -108,43 +136,47 @@ export const useMobileSkeleton = (
 
   // Generate default skeleton variants
   const generateDefaultSkeletons = useCallback(() => {
-    const defaults] = [
+    const defaults: SkeletonVariant[] = [
       {
-        id,
-        name,
-        width,
-        height,
-        borderRadius,
-        animation,
-        mobileOptimized,
-        touchFriendly},
+        id: 'text-line',
+        name: 'Text Line',
+        width: '100%',
+        height: 16,
+        borderRadius: 4,
+        animation: 'pulse',
+        mobileOptimized: true,
+        touchFriendly: true
+      },
       {
-        id,
-        name,
-        width,
-        height,
-        borderRadius,
-        animation,
-        mobileOptimized,
-        touchFriendly},
+        id: 'avatar',
+        name: 'Avatar',
+        width: 40,
+        height: 40,
+        borderRadius: '50%',
+        animation: 'shimmer',
+        mobileOptimized: true,
+        touchFriendly: true
+      },
       {
-        id,
-        name,
-        width,
-        height,
-        borderRadius,
-        animation,
-        mobileOptimized,
-        touchFriendly},
+        id: 'card',
+        name: 'Card',
+        width: '100%',
+        height: 120,
+        borderRadius: 8,
+        animation: 'wave',
+        mobileOptimized: true,
+        touchFriendly: true
+      },
       {
-        id,
-        name,
-        width,
-        height,
-        borderRadius,
-        animation,
-        mobileOptimized,
-        touchFriendly}
+        id: 'button',
+        name: 'Button',
+        width: 120,
+        height: 40,
+        borderRadius: 6,
+        animation: 'pulse',
+        mobileOptimized: true,
+        touchFriendly: true
+      }
     ]
 
     setSkeletonVariants(defaults)
@@ -262,7 +294,8 @@ export const useMobileSkeleton = (
         setPerformanceMetrics(prev => ({
           ...prev,
           renderTime,
-          animationFrameRate}))
+          animationFrameRate: fps
+        }))
         
         frameCount = 0
         lastTime = currentTime
@@ -359,10 +392,10 @@ export const useMobileSkeleton = (
     autoOptimize,
     
     // Utility functions
-    isMobileOptimized) => deviceState.deviceType === 'mobile',
-    getLoadingStrategy) => deviceState.loadingStrategy,
-    getAnimationIntensity) => deviceState.animationIntensity,
-    clearOptimizations) => setOptimizations([])
+    isMobileOptimized: () => deviceState.deviceType === 'mobile',
+    getLoadingStrategy: () => deviceState.loadingStrategy,
+    getAnimationIntensity: () => deviceState.animationIntensity,
+    clearOptimizations: () => setOptimizations([])
   }
 }
 

package/dist/hooks/use-mobile-skeleton.js

@@ -1,25 +1,46 @@
 import { useState, useCallback, useRef, useEffect } from 'react'
 
 export interface MobileSkeletonConfig {
-  enableMobileOptimization?}
+  enableMobileOptimization?: boolean
+  enablePerformanceOptimization?: boolean
+  enableBatteryOptimization?: boolean
+  enableAccessibilitySupport?: boolean
+  enableTouchOptimization?: boolean
+  animationDuration?: number
+  skeletonCount?: number
+  mobileBreakpoint?: number
+}
 
 export interface SkeletonVariant {
-  id}
+  id: string
+  name: string
+  width: string | number
+  height: string | number
+  borderRadius?: string | number
+  animation?: 'pulse' | 'wave' | 'shimmer' | 'fade'
+  mobileOptimized?: boolean
+  touchFriendly?: boolean
+}
 
 export interface DeviceLoadingState {
-  deviceType}
+  deviceType: 'mobile' | 'tablet' | 'desktop'
+  orientation: 'portrait' | 'landscape'
+  screenSize: 'small' | 'medium' | 'large'
+  loadingStrategy: 'skeleton' | 'spinner' | 'progress' | 'skeleton-spinner'
+  animationIntensity: 'low' | 'medium' | 'high'
+}
 
 export interface MobileSkeletonCallbacks {
-  onSkeletonCreated?) => void
-  onLoadingStateChanged?) => void
-  onPerformanceOptimized?) => void
-  onBatteryOptimized?) => void
-  onAccessibilityEnhanced?) => void
+  onSkeletonCreated?: (variant: SkeletonVariant) => void
+  onLoadingStateChanged?: (state: DeviceLoadingState) => void
+  onPerformanceOptimized?: (optimization: string) => void
+  onBatteryOptimized?: (strategy: string) => void
+  onAccessibilityEnhanced?: (feature: string) => void
 }
 
 export const useMobileSkeleton = (
-  config= {},
-  callbacks= {}
+  config: MobileSkeletonConfig = {},
+  callbacks: MobileSkeletonCallbacks = {}
 ) => {
   const {
     enablePerformanceOptimization = true,
@@ -30,20 +51,22 @@ export const useMobileSkeleton = (
   } = config
 
   const [deviceState, setDeviceState] = useState<DeviceLoadingState>({
-    deviceType,
-    orientation,
-    screenSize,
-    loadingStrategy,
-    animationIntensity})
+    deviceType: 'desktop',
+    orientation: 'landscape',
+    screenSize: 'large',
+    loadingStrategy: 'skeleton',
+    animationIntensity: 'medium'
+  })
 
   const [skeletonVariants, setSkeletonVariants] = useState<SkeletonVariant[]>([])
   const [isOptimizing, setIsOptimizing] = useState(false)
   const [optimizations, setOptimizations] = useState<string[]>([])
   const [performanceMetrics, setPerformanceMetrics] = useState({
-    renderTime,
-    animationFrameRate,
-    memoryUsage,
-    batteryImpact})
+    renderTime: 0,
+    animationFrameRate: 60,
+    memoryUsage: 0,
+    batteryImpact: 'low'
+  })
 
 
   const animationFrameRef = useRef<number | null>(null)
@@ -57,7 +80,12 @@ export const useMobileSkeleton = (
     const isTablet = width > mobileBreakpoint && width <= 1024
     const isPortrait = height > width
 
-    let deviceType) {
+    let deviceType: 'mobile' | 'tablet' | 'desktop'
+    let screenSize: 'small' | 'medium' | 'large'
+    let loadingStrategy: 'skeleton' | 'spinner' | 'progress' | 'skeleton-spinner'
+    let animationIntensity: 'low' | 'medium' | 'high'
+
+    if (isMobile) {
       deviceType = 'mobile'
       screenSize = 'small'
       loadingStrategy = 'skeleton'
@@ -74,9 +102,9 @@ export const useMobileSkeleton = (
       animationIntensity = 'high'
     }
 
-    const newState= {
+    const newState: DeviceLoadingState = {
       deviceType,
-      orientation,
+      orientation: isPortrait ? 'portrait' : 'landscape',
       screenSize,
       loadingStrategy,
       animationIntensity
@@ -90,14 +118,14 @@ export const useMobileSkeleton = (
 
   // Create skeleton variants
   const createSkeletonVariant = useCallback((
-    variant, 'id'>
+    variant: Omit<SkeletonVariant, 'id'>
   ) => {
     const id = `skeleton-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
-    const newVariant= {
+    const newVariant: SkeletonVariant = {
       ...variant,
       id,
-      mobileOptimized=== 'mobile',
-      touchFriendly=== 'mobile'
+      mobileOptimized: deviceState.deviceType === 'mobile',
+      touchFriendly: enableTouchOptimization && deviceState.deviceType === 'mobile'
     }
 
     setSkeletonVariants(prev => [...prev, newVariant])
@@ -108,43 +136,47 @@ export const useMobileSkeleton = (
 
   // Generate default skeleton variants
   const generateDefaultSkeletons = useCallback(() => {
-    const defaults] = [
+    const defaults: SkeletonVariant[] = [
       {
-        id,
-        name,
-        width,
-        height,
-        borderRadius,
-        animation,
-        mobileOptimized,
-        touchFriendly},
+        id: 'text-line',
+        name: 'Text Line',
+        width: '100%',
+        height: 16,
+        borderRadius: 4,
+        animation: 'pulse',
+        mobileOptimized: true,
+        touchFriendly: true
+      },
       {
-        id,
-        name,
-        width,
-        height,
-        borderRadius,
-        animation,
-        mobileOptimized,
-        touchFriendly},
+        id: 'avatar',
+        name: 'Avatar',
+        width: 40,
+        height: 40,
+        borderRadius: '50%',
+        animation: 'shimmer',
+        mobileOptimized: true,
+        touchFriendly: true
+      },
       {
-        id,
-        name,
-        width,
-        height,
-        borderRadius,
-        animation,
-        mobileOptimized,
-        touchFriendly},
+        id: 'card',
+        name: 'Card',
+        width: '100%',
+        height: 120,
+        borderRadius: 8,
+        animation: 'wave',
+        mobileOptimized: true,
+        touchFriendly: true
+      },
       {
-        id,
-        name,
-        width,
-        height,
-        borderRadius,
-        animation,
-        mobileOptimized,
-        touchFriendly}
+        id: 'button',
+        name: 'Button',
+        width: 120,
+        height: 40,
+        borderRadius: 6,
+        animation: 'pulse',
+        mobileOptimized: true,
+        touchFriendly: true
+      }
     ]
 
     setSkeletonVariants(defaults)
@@ -262,7 +294,8 @@ export const useMobileSkeleton = (
         setPerformanceMetrics(prev => ({
           ...prev,
           renderTime,
-          animationFrameRate}))
+          animationFrameRate: fps
+        }))
         
         frameCount = 0
         lastTime = currentTime
@@ -359,10 +392,10 @@ export const useMobileSkeleton = (
     autoOptimize,
     
     // Utility functions
-    isMobileOptimized) => deviceState.deviceType === 'mobile',
-    getLoadingStrategy) => deviceState.loadingStrategy,
-    getAnimationIntensity) => deviceState.animationIntensity,
-    clearOptimizations) => setOptimizations([])
+    isMobileOptimized: () => deviceState.deviceType === 'mobile',
+    getLoadingStrategy: () => deviceState.loadingStrategy,
+    getAnimationIntensity: () => deviceState.animationIntensity,
+    clearOptimizations: () => setOptimizations([])
   }
 }