@umituz/react-native-design-system 2.2.0 → 2.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "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/index.ts

@@ -70,3 +70,12 @@ export {
 
 // DatePicker
 export { AtomicDatePicker, type AtomicDatePickerProps } from './AtomicDatePicker';
+
+// Skeleton
+export {
+    AtomicSkeleton,
+    type AtomicSkeletonProps,
+    type SkeletonPattern,
+    type SkeletonConfig,
+    SKELETON_PATTERNS,
+} from './skeleton';

package/src/atoms/skeleton/AtomicSkeleton.tsx

@@ -0,0 +1,143 @@
+/**
+ * AtomicSkeleton - Skeleton Loader Component
+ *
+ * Skeleton placeholder loader with shimmer animation for loading states.
+ * 
+ * @example
+ * ```tsx
+ * // List skeleton
+ * <AtomicSkeleton pattern="list" count={5} />
+ * 
+ * // Card skeleton
+ * <AtomicSkeleton pattern="card" count={3} />
+ * 
+ * // Custom skeleton
+ * <AtomicSkeleton 
+ *   pattern="custom"
+ *   custom={[
+ *     { width: '100%', height: 200, borderRadius: 12 },
+ *     { width: '80%', height: 20, borderRadius: 4 }
+ *   ]}
+ * />
+ * ```
+ */
+
+import React, { useEffect, useRef } from 'react';
+import { View, StyleSheet, Animated, type StyleProp, type ViewStyle } from 'react-native';
+import { useAppDesignTokens } from '../../theme';
+import type { SkeletonPattern, SkeletonConfig } from './AtomicSkeleton.types';
+import { SKELETON_PATTERNS } from './AtomicSkeleton.types';
+
+const SHIMMER_DURATION = 1200;
+
+export interface AtomicSkeletonProps {
+  /** Skeleton pattern preset */
+  pattern?: SkeletonPattern;
+  /** Custom skeleton configurations */
+  custom?: SkeletonConfig[];
+  /** Number of skeleton items to render */
+  count?: number;
+  /** Custom container style */
+  style?: StyleProp<ViewStyle>;
+  /** Disable shimmer animation */
+  disableAnimation?: boolean;
+  /** Test ID for testing */
+  testID?: string;
+}
+
+/**
+ * Skeleton loader component with shimmer animation
+ * 
+ * Provides visual feedback during content loading with customizable patterns
+ */
+export const AtomicSkeleton: React.FC<AtomicSkeletonProps> = ({
+  pattern = 'list',
+  custom,
+  count = 1,
+  style,
+  disableAnimation = false,
+  testID,
+}) => {
+  const tokens = useAppDesignTokens();
+  const skeletonConfigs = pattern === 'custom' && custom
+    ? 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
+          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,
+          ]}
+        />
+      ))}
+    </View>
+  );
+
+  return (
+    <View style={[styles.container, style]} testID={testID}>
+      {Array.from({ length: count }).map((_, index) => renderSkeletonItem(index))}
+    </View>
+  );
+};
+
+AtomicSkeleton.displayName = 'AtomicSkeleton';
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+  },
+  skeletonGroup: {
+    width: '100%',
+  },
+  skeleton: {
+    overflow: 'hidden',
+  },
+});

package/src/atoms/skeleton/AtomicSkeleton.types.ts

@@ -0,0 +1,55 @@
+/**
+ * AtomicSkeleton Types
+ *
+ * Type definitions and configurations for skeleton loading states.
+ */
+
+/**
+ * Skeleton loader pattern presets
+ */
+export type SkeletonPattern = 'list' | 'card' | 'profile' | 'text' | 'custom';
+
+/**
+ * Skeleton loader configuration for individual skeleton elements
+ */
+export interface SkeletonConfig {
+  /** Width of skeleton element (number in pixels or percentage string) */
+  width?: number | string;
+  /** Height of skeleton element in pixels */
+  height?: number;
+  /** Border radius in pixels */
+  borderRadius?: number;
+  /** Bottom margin in pixels */
+  marginBottom?: number;
+}
+
+/**
+ * Predefined skeleton pattern configurations
+ * 
+ * - **list**: Single row skeleton for list items
+ * - **card**: Card-style skeleton with image and text placeholders
+ * - **profile**: Profile skeleton with avatar and text
+ * - **text**: Multiple text line skeletons
+ * - **custom**: Use custom configuration
+ */
+export const SKELETON_PATTERNS: Record<SkeletonPattern, SkeletonConfig[]> = {
+  list: [
+    { width: '100%', height: 60, borderRadius: 8, marginBottom: 12 },
+  ],
+  card: [
+    { width: '100%', height: 200, borderRadius: 12, marginBottom: 16 },
+    { width: '80%', height: 20, borderRadius: 4, marginBottom: 8 },
+    { width: '60%', height: 16, borderRadius: 4, marginBottom: 0 },
+  ],
+  profile: [
+    { width: 80, height: 80, borderRadius: 40, marginBottom: 16 },
+    { width: '60%', height: 24, borderRadius: 4, marginBottom: 8 },
+    { width: '40%', height: 16, borderRadius: 4, marginBottom: 0 },
+  ],
+  text: [
+    { width: '100%', height: 16, borderRadius: 4, marginBottom: 8 },
+    { width: '90%', height: 16, borderRadius: 4, marginBottom: 8 },
+    { width: '95%', height: 16, borderRadius: 4, marginBottom: 0 },
+  ],
+  custom: [],
+};

package/src/atoms/skeleton/index.ts

@@ -0,0 +1,9 @@
+/**
+ * AtomicSkeleton - Skeleton Loader
+ * 
+ * Exports skeleton loader component and types
+ */
+
+export { AtomicSkeleton, type AtomicSkeletonProps } from './AtomicSkeleton';
+export type { SkeletonPattern, SkeletonConfig } from './AtomicSkeleton.types';
+export { SKELETON_PATTERNS } from './AtomicSkeleton.types';

package/src/index.ts

@@ -142,6 +142,7 @@ export {
   AtomicProgress,
   AtomicPicker,
   AtomicDatePicker,
+  AtomicSkeleton,
   type IconName,
   type IconSize,
   type IconColor,
@@ -167,6 +168,10 @@ export {
   type PickerOption,
   type PickerSize,
   type AtomicDatePickerProps,
+  type AtomicSkeletonProps,
+  type SkeletonPattern,
+  type SkeletonConfig,
+  SKELETON_PATTERNS,
 } from './atoms';
 
 // =============================================================================