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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.2.0",
+  "version": "2.3.1",
   "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",
@@ -105,4 +105,4 @@
     "README.md",
     "LICENSE"
   ]
-}
+}

package/src/atoms/AtomicBadge.tsx

@@ -0,0 +1,121 @@
+/**
+ * AtomicBadge Component
+ * Reusable badge for labels, status indicators, and tags
+ */
+
+import React from "react";
+import { View, StyleSheet, type StyleProp, type ViewStyle, type TextStyle } from "react-native";
+import { AtomicText } from "./AtomicText";
+import { AtomicIcon, type IconName } from "./AtomicIcon";
+import { useAppDesignTokens } from "../theme";
+
+export type BadgeVariant = "primary" | "secondary" | "success" | "warning" | "error" | "info";
+export type BadgeSize = "sm" | "md" | "lg";
+
+export interface AtomicBadgeProps {
+    /** Badge text content */
+    text: string;
+    /** Visual variant */
+    variant?: BadgeVariant;
+    /** Size preset */
+    size?: BadgeSize;
+    /** Optional icon name (Ionicons) */
+    icon?: IconName;
+    /** Icon position */
+    iconPosition?: "left" | "right";
+    /** Custom container style */
+    style?: StyleProp<ViewStyle>;
+    /** Custom text style */
+    textStyle?: StyleProp<TextStyle>;
+    /** Test ID for testing */
+    testID?: string;
+}
+
+const SIZE_CONFIG = {
+    sm: { paddingH: 6, paddingV: 2, fontSize: 10, iconSize: 10, gap: 3, radius: 4 },
+    md: { paddingH: 8, paddingV: 4, fontSize: 11, iconSize: 12, gap: 4, radius: 6 },
+    lg: { paddingH: 12, paddingV: 6, fontSize: 13, iconSize: 14, gap: 5, radius: 8 },
+};
+
+export const AtomicBadge: React.FC<AtomicBadgeProps> = React.memo(({
+    text,
+    variant = "primary",
+    size = "md",
+    icon,
+    iconPosition = "left",
+    style,
+    textStyle,
+    testID,
+}) => {
+    const tokens = useAppDesignTokens();
+    const sizeConfig = SIZE_CONFIG[size];
+
+    const getVariantColors = () => {
+        switch (variant) {
+            case "primary":
+                return { bg: tokens.colors.primaryLight, text: tokens.colors.primary };
+            case "secondary":
+                return { bg: tokens.colors.surfaceSecondary, text: tokens.colors.textSecondary };
+            case "success":
+                return { bg: tokens.colors.successLight, text: tokens.colors.success };
+            case "warning":
+                return { bg: tokens.colors.warningLight, text: tokens.colors.warning };
+            case "error":
+                return { bg: tokens.colors.errorLight, text: tokens.colors.error };
+            case "info":
+                return { bg: tokens.colors.infoLight, text: tokens.colors.info };
+            default:
+                return { bg: tokens.colors.primaryLight, text: tokens.colors.primary };
+        }
+    };
+
+    const colors = getVariantColors();
+
+    const containerStyle: StyleProp<ViewStyle> = [
+        styles.container,
+        {
+            backgroundColor: colors.bg,
+            paddingHorizontal: sizeConfig.paddingH,
+            paddingVertical: sizeConfig.paddingV,
+            borderRadius: sizeConfig.radius,
+            gap: sizeConfig.gap,
+            flexDirection: iconPosition === "right" ? "row-reverse" : "row",
+        },
+        style,
+    ];
+
+    return (
+        <View style={containerStyle} testID={testID}>
+            {icon && (
+                <AtomicIcon
+                    name={icon}
+                    customSize={sizeConfig.iconSize}
+                    customColor={colors.text}
+                />
+            )}
+            <AtomicText
+                type="labelSmall"
+                style={[
+                    {
+                        color: colors.text,
+                        fontSize: sizeConfig.fontSize,
+                        fontWeight: "700",
+                    },
+                    textStyle,
+                ]}
+            >
+                {text}
+            </AtomicText>
+        </View>
+    );
+});
+
+AtomicBadge.displayName = "AtomicBadge";
+
+const styles = StyleSheet.create({
+    container: {
+        alignSelf: "flex-start",
+        alignItems: "center",
+        justifyContent: "center",
+    },
+});

package/src/atoms/index.ts

@@ -70,3 +70,20 @@ export {
 
 // DatePicker
 export { AtomicDatePicker, type AtomicDatePickerProps } from './AtomicDatePicker';
+
+// Skeleton
+export {
+    AtomicSkeleton,
+    type AtomicSkeletonProps,
+    type SkeletonPattern,
+    type SkeletonConfig,
+    SKELETON_PATTERNS,
+} from './skeleton';
+
+// Badge
+export {
+    AtomicBadge,
+    type AtomicBadgeProps,
+    type BadgeVariant,
+    type BadgeSize,
+} from './AtomicBadge';

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,8 @@ export {
   AtomicProgress,
   AtomicPicker,
   AtomicDatePicker,
+  AtomicSkeleton,
+  AtomicBadge,
   type IconName,
   type IconSize,
   type IconColor,
@@ -167,6 +169,13 @@ export {
   type PickerOption,
   type PickerSize,
   type AtomicDatePickerProps,
+  type AtomicSkeletonProps,
+  type SkeletonPattern,
+  type SkeletonConfig,
+  SKELETON_PATTERNS,
+  type AtomicBadgeProps,
+  type BadgeVariant,
+  type BadgeSize,
 } from './atoms';
 
 // =============================================================================