@umituz/react-native-design-system 2.4.5 → 2.4.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.4.5",
+  "version": "2.4.7",
   "description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography, responsive and safe area utilities",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/atoms/AtomicSpinner.tsx

@@ -0,0 +1,190 @@
+/**
+ * AtomicSpinner - Universal Loading Spinner Component
+ *
+ * Displays loading indicators with flexible configuration
+ *
+ * Atomic Design Level: ATOM
+ * Purpose: Loading state indication across all apps
+ *
+ * Usage:
+ * - Page loading states
+ * - Button loading states
+ * - Data fetching indicators
+ * - Async operation feedback
+ */
+
+import React from 'react';
+import { View, ActivityIndicator, StyleSheet, ViewStyle } from 'react-native';
+import { useAppDesignTokens } from '../theme';
+import { AtomicText } from './AtomicText';
+
+// =============================================================================
+// TYPE DEFINITIONS
+// =============================================================================
+
+export type SpinnerSize = 'sm' | 'md' | 'lg' | 'xl';
+export type SpinnerColor = 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'white';
+
+export interface AtomicSpinnerProps {
+  /** Spinner size preset or custom number */
+  size?: SpinnerSize | number;
+  /** Spinner color preset or custom hex */
+  color?: SpinnerColor | string;
+  /** Optional loading text */
+  text?: string;
+  /** Text position relative to spinner */
+  textPosition?: 'bottom' | 'right';
+  /** Fill entire parent container */
+  fullContainer?: boolean;
+  /** Show semi-transparent overlay behind spinner */
+  overlay?: boolean;
+  /** Overlay background color */
+  overlayColor?: string;
+  /** Style overrides for container */
+  style?: ViewStyle | ViewStyle[];
+  /** Test ID for testing */
+  testID?: string;
+}
+
+// =============================================================================
+// SIZE MAPPINGS
+// =============================================================================
+
+const SIZE_MAP: Record<SpinnerSize, number> = {
+  sm: 16,
+  md: 24,
+  lg: 36,
+  xl: 48,
+};
+
+const ACTIVITY_SIZE_MAP: Record<SpinnerSize, 'small' | 'large'> = {
+  sm: 'small',
+  md: 'small',
+  lg: 'large',
+  xl: 'large',
+};
+
+// =============================================================================
+// COMPONENT IMPLEMENTATION
+// =============================================================================
+
+export const AtomicSpinner: React.FC<AtomicSpinnerProps> = ({
+  size = 'md',
+  color = 'primary',
+  text,
+  textPosition = 'bottom',
+  fullContainer = false,
+  overlay = false,
+  overlayColor,
+  style,
+  testID,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  // Resolve size
+  const resolvedSize = typeof size === 'number' ? size : SIZE_MAP[size];
+  const activitySize = typeof size === 'number'
+    ? (size >= 30 ? 'large' : 'small')
+    : ACTIVITY_SIZE_MAP[size];
+
+  // Resolve color
+  const resolveColor = (): string => {
+    if (color.startsWith('#') || color.startsWith('rgb')) {
+      return color;
+    }
+    const colorMap: Record<SpinnerColor, string> = {
+      primary: tokens.colors.primary,
+      secondary: tokens.colors.secondary,
+      success: tokens.colors.success,
+      error: tokens.colors.error,
+      warning: tokens.colors.warning,
+      white: '#FFFFFF',
+    };
+    return colorMap[color as SpinnerColor] || tokens.colors.primary;
+  };
+
+  const spinnerColor = resolveColor();
+  const resolvedOverlayColor = overlayColor || 'rgba(0, 0, 0, 0.5)';
+
+  // Container styles
+  const containerStyles: ViewStyle[] = [
+    styles.container,
+    textPosition === 'right' && styles.containerRow,
+    fullContainer && styles.fullContainer,
+    overlay && [styles.overlay, { backgroundColor: resolvedOverlayColor }],
+  ].filter(Boolean) as ViewStyle[];
+
+  // Spinner wrapper styles
+  const spinnerWrapperStyles: ViewStyle = {
+    width: resolvedSize,
+    height: resolvedSize,
+    justifyContent: 'center',
+    alignItems: 'center',
+  };
+
+  return (
+    <View
+      style={[containerStyles, style]}
+      testID={testID}
+      accessibilityRole="progressbar"
+      accessibilityLabel={text || 'Loading'}
+      accessibilityLiveRegion="polite"
+    >
+      <View style={spinnerWrapperStyles}>
+        <ActivityIndicator
+          size={activitySize}
+          color={spinnerColor}
+          testID={testID ? `${testID}-indicator` : undefined}
+        />
+      </View>
+      {text && (
+        <AtomicText
+          type="bodyMedium"
+          style={[
+            styles.text,
+            textPosition === 'right' ? styles.textRight : styles.textBottom,
+            { color: overlay ? '#FFFFFF' : tokens.colors.textSecondary },
+          ]}
+        >
+          {text}
+        </AtomicText>
+      )}
+    </View>
+  );
+};
+
+// =============================================================================
+// STYLES
+// =============================================================================
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  containerRow: {
+    flexDirection: 'row',
+  },
+  fullContainer: {
+    flex: 1,
+  },
+  overlay: {
+    ...StyleSheet.absoluteFillObject,
+    zIndex: 999,
+  },
+  text: {
+    textAlign: 'center',
+  },
+  textBottom: {
+    marginTop: 12,
+  },
+  textRight: {
+    marginLeft: 12,
+  },
+});
+
+// =============================================================================
+// EXPORTS
+// =============================================================================
+
+export default AtomicSpinner;

package/src/atoms/index.ts

@@ -87,3 +87,11 @@ export {
     type BadgeVariant,
     type BadgeSize,
 } from './AtomicBadge';
+
+// Spinner
+export {
+    AtomicSpinner,
+    type AtomicSpinnerProps,
+    type SpinnerSize,
+    type SpinnerColor,
+} from './AtomicSpinner';

package/src/atoms/skeleton/AtomicSkeleton.tsx

@@ -22,8 +22,17 @@
  * ```
  */
 
-import React, { useEffect, useRef } from 'react';
-import { View, StyleSheet, Animated, type StyleProp, type ViewStyle } from 'react-native';
+import React, { useEffect } from 'react';
+import { View, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
+import {
+  useSharedValue,
+  useAnimatedStyle,
+  withRepeat,
+  withSequence,
+  withTiming,
+  Easing,
+} from 'react-native-reanimated';
+import Animated from 'react-native-reanimated';
 import { useAppDesignTokens } from '../../theme';
 import type { SkeletonPattern, SkeletonConfig } from './AtomicSkeleton.types';
 import { SKELETON_PATTERNS } from './AtomicSkeleton.types';
@@ -50,6 +59,53 @@ export interface AtomicSkeletonProps {
  * 
  * Provides visual feedback during content loading with customizable patterns
  */
+const SkeletonItem: React.FC<{
+  config: SkeletonConfig;
+  baseColor: string;
+  highlightColor: string;
+  disableAnimation: boolean;
+}> = ({ config, baseColor, highlightColor, disableAnimation }) => {
+  const opacity = useSharedValue(0);
+
+  useEffect(() => {
+    if (disableAnimation) return;
+
+    opacity.value = withRepeat(
+      withSequence(
+        withTiming(1, { duration: SHIMMER_DURATION / 2, easing: Easing.ease }),
+        withTiming(0, { duration: SHIMMER_DURATION / 2, easing: Easing.ease })
+      ),
+      -1,
+      false
+    );
+  }, [opacity, disableAnimation]);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    backgroundColor: disableAnimation
+      ? baseColor
+      : opacity.value === 0
+        ? baseColor
+        : highlightColor,
+    opacity: disableAnimation ? 1 : 0.5 + opacity.value * 0.5,
+  }));
+
+  return (
+    <Animated.View
+      style={[
+        styles.skeleton,
+        {
+          width: config.width as number | `${number}%` | undefined,
+          height: config.height,
+          borderRadius: config.borderRadius,
+          marginBottom: config.marginBottom,
+          backgroundColor: baseColor,
+        },
+        animatedStyle,
+      ]}
+    />
+  );
+};
+
 export const AtomicSkeleton: React.FC<AtomicSkeletonProps> = ({
   pattern = 'list',
   custom,
@@ -63,59 +119,15 @@ export const AtomicSkeleton: React.FC<AtomicSkeletonProps> = ({
     ? custom
     : SKELETON_PATTERNS[pattern];
 
-  const shimmerAnim = useRef(new Animated.Value(0)).current;
-
-  useEffect(() => {
-    if (disableAnimation) return;
-
-    const shimmerAnimation = Animated.loop(
-      Animated.sequence([
-        Animated.timing(shimmerAnim, {
-          toValue: 1,
-          duration: SHIMMER_DURATION,
-          useNativeDriver: false,
-        }),
-        Animated.timing(shimmerAnim, {
-          toValue: 0,
-          duration: 0,
-          useNativeDriver: false,
-        }),
-      ])
-    );
-
-    shimmerAnimation.start();
-
-    return () => {
-      shimmerAnimation.stop();
-    };
-  }, [shimmerAnim, disableAnimation]);
-
-  const backgroundColor = shimmerAnim.interpolate({
-    inputRange: [0, 0.5, 1],
-    outputRange: [
-      tokens.colors.surfaceSecondary,
-      tokens.colors.border,
-      tokens.colors.surfaceSecondary,
-    ],
-  });
-
   const renderSkeletonItem = (index: number) => (
     <View key={`skeleton-group-${index}`} style={styles.skeletonGroup}>
       {skeletonConfigs.map((config, configIndex) => (
-        <Animated.View
+        <SkeletonItem
           key={`skeleton-${index}-${configIndex}`}
-          style={[
-            styles.skeleton,
-            {
-              width: config.width as number | `${number}%` | undefined,
-              height: config.height,
-              borderRadius: config.borderRadius,
-              marginBottom: config.marginBottom,
-              backgroundColor: disableAnimation
-                ? tokens.colors.surfaceSecondary
-                : backgroundColor,
-            } as any,
-          ]}
+          config={config}
+          baseColor={tokens.colors.surfaceSecondary}
+          highlightColor={tokens.colors.border}
+          disableAnimation={disableAnimation}
         />
       ))}
     </View>