@umituz/react-native-design-system 2.4.4 → 2.4.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.4.4",
+  "version": "2.4.6",
   "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/AtomicCard.tsx

@@ -1,30 +1,41 @@
 /**
  * AtomicCard Component
- * 
+ *
  * A simple, styled card container component
  */
 
 import React from 'react';
-import { View, StyleSheet, type ViewStyle, type StyleProp } from 'react-native';
+import {
+  View,
+  Pressable,
+  StyleSheet,
+  type ViewStyle,
+  type StyleProp,
+  type GestureResponderEvent,
+} from 'react-native';
 import { useAppDesignTokens } from '../theme';
 
 export type AtomicCardVariant = 'elevated' | 'outlined' | 'filled';
 export type AtomicCardPadding = 'none' | 'sm' | 'md' | 'lg';
 
 export interface AtomicCardProps {
-    children: React.ReactNode;
-    variant?: AtomicCardVariant;
-    padding?: AtomicCardPadding;
-    style?: StyleProp<ViewStyle>;
-    testID?: string;
+  children: React.ReactNode;
+  variant?: AtomicCardVariant;
+  padding?: AtomicCardPadding;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+  onPress?: (event: GestureResponderEvent) => void;
+  disabled?: boolean;
 }
 
 export const AtomicCard: React.FC<AtomicCardProps> = ({
-    children,
-    variant = 'elevated',
-    padding = 'md',
-    style,
-    testID,
+  children,
+  variant = 'elevated',
+  padding = 'md',
+  style,
+  testID,
+  onPress,
+  disabled,
 }) => {
     const tokens = useAppDesignTokens();
 
@@ -58,24 +69,36 @@ export const AtomicCard: React.FC<AtomicCardProps> = ({
         }
     };
 
+  const cardStyle = [
+    styles.card,
+    { borderRadius: tokens.borders.radius.md },
+    { padding: paddingValues[padding] },
+    getVariantStyle(),
+    style,
+  ];
+
+  if (onPress) {
     return (
-        <View
-            style={[
-                styles.card,
-                { borderRadius: tokens.borders.radius.md },
-                { padding: paddingValues[padding] },
-                getVariantStyle(),
-                style,
-            ]}
-            testID={testID}
-        >
-            {children}
-        </View>
+      <Pressable
+        style={cardStyle}
+        testID={testID}
+        onPress={onPress}
+        disabled={disabled}
+      >
+        {children}
+      </Pressable>
     );
+  }
+
+  return (
+    <View style={cardStyle} testID={testID}>
+      {children}
+    </View>
+  );
 };
 
 const styles = StyleSheet.create({
-    card: {
-        overflow: 'hidden',
-    },
+  card: {
+    overflow: 'hidden',
+  },
 });

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>