@umituz/react-native-design-system 1.0.0

package/src/presentation/atoms/AtomicSkeleton.tsx

@@ -0,0 +1,146 @@
+/**
+ * AtomicSkeleton - Universal Skeleton Loading Component
+ *
+ * Displays animated skeleton placeholders for loading states
+ * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
+ *
+ * Atomic Design Level: ATOM
+ * Purpose: Loading state placeholder
+ *
+ * Usage:
+ * - Content loading placeholders
+ * - List item skeletons
+ * - Card skeletons
+ * - Text line skeletons
+ * - Image placeholders
+ */
+
+import React, { useEffect, useRef } from 'react';
+import { View, StyleSheet, ViewStyle, Animated, DimensionValue } from 'react-native';
+import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
+
+// =============================================================================
+// TYPE DEFINITIONS
+// =============================================================================
+
+export interface AtomicSkeletonProps {
+  /** Skeleton width */
+  width?: number | string;
+  /** Skeleton height */
+  height?: number | string;
+  /** Skeleton shape */
+  shape?: 'rectangle' | 'circle' | 'rounded';
+  /** Border radius for rounded shapes */
+  borderRadius?: number;
+  /** Animation duration in milliseconds */
+  duration?: number;
+  /** Whether to show animation */
+  animated?: boolean;
+  /** Skeleton color */
+  color?: string;
+  /** Highlight color for animation */
+  highlightColor?: string;
+  /** Style overrides */
+  style?: ViewStyle;
+  /** Test ID for testing */
+  testID?: string;
+}
+
+// =============================================================================
+// COMPONENT IMPLEMENTATION
+// =============================================================================
+
+export const AtomicSkeleton: React.FC<AtomicSkeletonProps> = ({
+  width = '100%',
+  height = 20,
+  shape = 'rectangle',
+  borderRadius,
+  duration,
+  animated = true,
+  color,
+  highlightColor,
+  style,
+  testID,
+}) => {
+  const tokens = useAppDesignTokens();
+  const animatedValue = useRef(new Animated.Value(0)).current;
+
+  // Default values
+  const finalDuration = duration ?? tokens.animations.slowest;
+  const skeletonColor = color || tokens.colors.surfaceVariant;
+  const skeletonHighlight = highlightColor || tokens.colors.surface;
+
+  // Animation effect
+  useEffect(() => {
+    if (animated) {
+      const animation = Animated.loop(
+        Animated.sequence([
+          Animated.timing(animatedValue, {
+            toValue: 1,
+            duration: finalDuration,
+            useNativeDriver: false,
+          }),
+          Animated.timing(animatedValue, {
+            toValue: 0,
+            duration: finalDuration,
+            useNativeDriver: false,
+          }),
+        ])
+      );
+      animation.start();
+
+      return () => animation.stop();
+    }
+  }, [animated, finalDuration, animatedValue]);
+
+  // Calculate border radius based on shape
+  const getBorderRadius = (): number => {
+    if (borderRadius !== undefined) return borderRadius;
+    
+    switch (shape) {
+      case 'circle':
+        return typeof height === 'number' ? height / 2 : 20;
+      case 'rounded':
+        return tokens.borders.radius.md;
+      case 'rectangle':
+      default:
+        return tokens.borders.radius.sm;
+    }
+  };
+
+  const skeletonStyle: ViewStyle = {
+    width: width as DimensionValue,
+    height: height as DimensionValue,
+    backgroundColor: skeletonColor,
+    borderRadius: getBorderRadius(),
+  };
+
+  if (animated) {
+    const animatedStyle = {
+      backgroundColor: animatedValue.interpolate({
+        inputRange: [0, 1],
+        outputRange: [skeletonColor, skeletonHighlight],
+      }),
+    };
+
+    return (
+      <Animated.View
+        style={[skeletonStyle, animatedStyle, style]}
+        testID={testID}
+      />
+    );
+  }
+
+  return (
+    <View
+      style={[skeletonStyle, style]}
+      testID={testID}
+    />
+  );
+};
+
+// =============================================================================
+// EXPORTS
+// =============================================================================
+
+export default AtomicSkeleton;

package/src/presentation/atoms/AtomicSort.tsx

@@ -0,0 +1,145 @@
+import React from 'react';
+import { ScrollView, View } from 'react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
+import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
+import { AtomicChip } from './AtomicChip';
+
+/**
+ * Sort option interface
+ */
+export interface SortOption {
+  id: string;
+  label: string;
+  icon?: string;
+}
+
+/**
+ * Sort direction type
+ */
+export type SortDirection = 'asc' | 'desc';
+
+/**
+ * AtomicSort component props
+ */
+export interface AtomicSortProps {
+  options: SortOption[];
+  selectedId: string | null;
+  sortDirection: SortDirection;
+  onSortChange: (optionId: string, direction: SortDirection) => void;
+  showDirectionToggle?: boolean;
+  variant?: 'outlined' | 'filled' | 'soft';
+  color?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
+  size?: 'sm' | 'md' | 'lg';
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+/**
+ * AtomicSort - Horizontal Sort Chip Component
+ *
+ * A Material Design 3 compliant sort component using chip selection.
+ * Supports single selection with ascending/descending direction toggle.
+ *
+ * @example
+ * ```tsx
+ * const [sortBy, setSortBy] = useState<string | null>('name');
+ * const [sortDir, setSortDir] = useState<SortDirection>('asc');
+ *
+ * <AtomicSort
+ *   options={[
+ *     { id: 'name', label: 'Name', icon: 'sort-alpha' },
+ *     { id: 'date', label: 'Date', icon: 'schedule' },
+ *     { id: 'priority', label: 'Priority', icon: 'flag' },
+ *   ]}
+ *   selectedId={sortBy}
+ *   sortDirection={sortDir}
+ *   onSortChange={(id, dir) => {
+ *     setSortBy(id);
+ *     setSortDir(dir);
+ *   }}
+ *   showDirectionToggle={true}
+ * />
+ * ```
+ *
+ * Features:
+ * - Horizontal scrollable sort chips
+ * - Single selection (one active sort at a time)
+ * - Direction toggle (click active chip to switch asc/desc)
+ * - Visual arrow indicators (↑ asc, ↓ desc)
+ * - Theme-aware colors from design tokens
+ * - Icon support per sort option
+ * - Fully controlled component
+ *
+ * Behavior:
+ * - Click inactive chip → Selects it with ascending direction
+ * - Click active chip → Toggles direction (asc ↔ desc)
+ * - Visual feedback via filled variant for active sort
+ */
+export const AtomicSort: React.FC<AtomicSortProps> = ({
+  options,
+  selectedId,
+  sortDirection,
+  onSortChange,
+  showDirectionToggle = true,
+  variant = 'outlined',
+  color = 'primary',
+  size = 'md',
+  style,
+  testID,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  /**
+   * Handle sort chip press
+   * - If clicking active chip: Toggle direction
+   * - If clicking inactive chip: Select it with 'asc' direction
+   */
+  const handleSortPress = (optionId: string) => {
+    if (selectedId === optionId) {
+      const newDirection = sortDirection === 'asc' ? 'desc' : 'asc';
+      onSortChange(optionId, newDirection);
+    } else {
+      onSortChange(optionId, 'asc');
+    }
+  };
+
+  const directionIcon = sortDirection === 'asc' ? 'arrow-upward' : 'arrow-downward';
+
+  return (
+    <ScrollView
+      horizontal
+      showsHorizontalScrollIndicator={false}
+      contentContainerStyle={{
+        paddingHorizontal: tokens.spacing.sm,
+        gap: tokens.spacing.sm,
+      }}
+      style={[style]}
+      testID={testID}
+    >
+      <View style={{ flexDirection: 'row', gap: tokens.spacing.sm }}>
+        {options.map((option) => {
+          const isSelected = selectedId === option.id;
+
+          return (
+            <AtomicChip
+              key={option.id}
+              variant={isSelected ? 'filled' : variant}
+              color={color}
+              size={size}
+              leadingIcon={option.icon}
+              trailingIcon={
+                isSelected && showDirectionToggle ? directionIcon : undefined
+              }
+              selected={isSelected}
+              clickable={true}
+              onPress={() => handleSortPress(option.id)}
+              testID={`sort-chip-${option.id}`}
+            >
+              {option.label}
+            </AtomicChip>
+          );
+        })}
+      </View>
+    </ScrollView>
+  );
+};

package/src/presentation/atoms/AtomicSwitch.tsx

@@ -0,0 +1,166 @@
+/**
+ * AtomicSwitch - Universal Switch Component
+ *
+ * Provides consistent switch/toggle functionality with theme integration
+ * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
+ *
+ * Atomic Design Level: ATOM
+ * Purpose: Basic switch/toggle input
+ *
+ * Usage:
+ * - Settings toggles
+ * - Feature enable/disable
+ * - Boolean preferences
+ * - Form inputs
+ */
+
+import React from 'react';
+import { Switch, SwitchProps, StyleSheet, ViewStyle } from 'react-native';
+import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
+
+// =============================================================================
+// TYPE DEFINITIONS
+// =============================================================================
+
+export interface AtomicSwitchProps extends Omit<SwitchProps, 'style'> {
+  /** Switch value */
+  value: boolean;
+  /** Value change handler */
+  onValueChange: (value: boolean) => void;
+  /** Size variant */
+  size?: 'sm' | 'md' | 'lg';
+  /** Color variant */
+  variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'error';
+  /** Disabled state */
+  disabled?: boolean;
+  /** Container style override */
+  style?: ViewStyle;
+  /** Track color override */
+  trackColor?: { false: string; true: string };
+  /** Thumb color override */
+  thumbColor?: string;
+  /** iOS specific props */
+  ios_backgroundColor?: string;
+}
+
+// =============================================================================
+// SIZE CONFIGURATION
+// =============================================================================
+
+const SIZE_CONFIG = {
+  sm: { scaleX: 0.8, scaleY: 0.8 },
+  md: { scaleX: 1, scaleY: 1 },
+  lg: { scaleX: 1.2, scaleY: 1.2 },
+} as const;
+
+// =============================================================================
+// COMPONENT IMPLEMENTATION
+// =============================================================================
+
+export const AtomicSwitch: React.FC<AtomicSwitchProps> = ({
+  value,
+  onValueChange,
+  size = 'md',
+  variant = 'primary',
+  disabled = false,
+  style,
+  trackColor,
+  thumbColor,
+  ios_backgroundColor,
+  ...props
+}) => {
+  const tokens = useAppDesignTokens();
+  const styles = getStyles(tokens);
+
+  const sizeConfig = SIZE_CONFIG[size];
+  const colors = getVariantColors(tokens, variant);
+
+  const defaultTrackColor = trackColor || {
+    false: colors.trackFalse,
+    true: colors.trackTrue,
+  };
+
+  const defaultThumbColor = thumbColor || colors.thumb;
+  const defaultIosBackgroundColor = ios_backgroundColor || colors.trackFalse;
+
+  return (
+    <Switch
+      value={value}
+      onValueChange={onValueChange}
+      disabled={disabled}
+      trackColor={defaultTrackColor}
+      thumbColor={defaultThumbColor}
+      ios_backgroundColor={defaultIosBackgroundColor}
+      style={[
+        styles.switch,
+        {
+          transform: [{ scaleX: sizeConfig.scaleX }, { scaleY: sizeConfig.scaleY }],
+        },
+        style,
+      ]}
+      {...props}
+    />
+  );
+};
+
+// =============================================================================
+// HELPER FUNCTIONS
+// =============================================================================
+
+const getVariantColors = (tokens: ReturnType<typeof useAppDesignTokens>, variant: AtomicSwitchProps['variant']) => {
+  switch (variant) {
+    case 'primary':
+      return {
+        trackFalse: tokens.colors.surfaceSecondary,
+        trackTrue: tokens.colors.primary,
+        thumb: tokens.colors.surface,
+      };
+    case 'secondary':
+      return {
+        trackFalse: tokens.colors.surfaceSecondary,
+        trackTrue: tokens.colors.secondary,
+        thumb: tokens.colors.surface,
+      };
+    case 'success':
+      return {
+        trackFalse: tokens.colors.surfaceSecondary,
+        trackTrue: tokens.colors.success,
+        thumb: tokens.colors.surface,
+      };
+    case 'warning':
+      return {
+        trackFalse: tokens.colors.surfaceSecondary,
+        trackTrue: tokens.colors.warning,
+        thumb: tokens.colors.surface,
+      };
+    case 'error':
+      return {
+        trackFalse: tokens.colors.surfaceSecondary,
+        trackTrue: tokens.colors.error,
+        thumb: tokens.colors.surface,
+      };
+    default:
+      return {
+        trackFalse: tokens.colors.surfaceSecondary,
+        trackTrue: tokens.colors.primary,
+        thumb: tokens.colors.surface,
+      };
+  }
+};
+
+// =============================================================================
+// STYLES
+// =============================================================================
+
+const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
+  StyleSheet.create({
+    switch: {
+      // Default switch styling is handled by platform
+    },
+  });
+
+// =============================================================================
+// EXPORTS
+// =============================================================================
+
+export default AtomicSwitch;

package/src/presentation/atoms/AtomicText.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { Text as PaperText } from 'react-native-paper';
+import { StyleProp, TextStyle } from 'react-native';
+
+export type TextStyleVariant =
+  | 'displayLarge' | 'displayMedium' | 'displaySmall'
+  | 'headlineLarge' | 'headlineMedium' | 'headlineSmall'
+  | 'titleLarge' | 'titleMedium' | 'titleSmall'
+  | 'bodyLarge' | 'bodyMedium' | 'bodySmall'
+  | 'labelLarge' | 'labelMedium' | 'labelSmall';
+
+export type ColorVariant =
+  | 'primary'
+  | 'secondary'
+  | 'tertiary'
+  | 'disabled'
+  | 'inverse'
+  | 'success'
+  | 'error'
+  | 'warning'
+  | 'info';
+
+export interface AtomicTextProps {
+  children: React.ReactNode;
+  type?: TextStyleVariant;
+  color?: ColorVariant | string;
+  numberOfLines?: number;
+  style?: StyleProp<TextStyle>;
+  testID?: string;
+}
+
+export const AtomicText: React.FC<AtomicTextProps> = ({
+  children,
+  type = 'bodyMedium',
+  color,
+  numberOfLines,
+  style,
+  testID,
+}) => {
+  return (
+    <PaperText
+      variant={type}
+      numberOfLines={numberOfLines}
+      style={style}
+      testID={testID}
+    >
+      {children}
+    </PaperText>
+  );
+};

package/src/presentation/atoms/AtomicTextArea.tsx

@@ -0,0 +1,198 @@
+/**
+ * AtomicTextArea Component
+ *
+ * A multiline text input component with Material Design 3 integration
+ * for longer text entry with consistent styling.
+ *
+ * Features:
+ * - React Native Paper TextInput with multiline
+ * - Material Design 3 outlined/filled/flat variants
+ * - Error, success, disabled states
+ * - Character counter with max length
+ * - Helper text for guidance or errors
+ * - Configurable rows for height
+ * - Theme-aware styling
+ * - Full accessibility support
+ *
+ * Usage:
+ * ```tsx
+ * const [description, setDescription] = useState('');
+ *
+ * <AtomicTextArea
+ *   value={description}
+ *   onChangeText={setDescription}
+ *   label="Description"
+ *   placeholder="Enter description..."
+ *   maxLength={500}
+ *   showCharacterCount
+ *   rows={6}
+ *   helperText="Provide a detailed description"
+ * />
+ * ```
+ */
+
+import React from 'react';
+import { View, StyleProp, ViewStyle, TextStyle } from 'react-native';
+import { TextInput, HelperText } from 'react-native-paper';
+import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
+
+export type AtomicTextAreaVariant = 'outlined' | 'filled' | 'flat';
+export type AtomicTextAreaState = 'default' | 'error' | 'success' | 'disabled';
+export type AtomicTextAreaSize = 'sm' | 'md' | 'lg';
+
+export interface AtomicTextAreaProps {
+  /** Textarea label */
+  label?: string;
+  /** Current textarea value */
+  value?: string;
+  /** Value change callback */
+  onChangeText?: (text: string) => void;
+  /** Textarea variant (outlined, filled, flat) */
+  variant?: AtomicTextAreaVariant;
+  /** Textarea state (default, error, success, disabled) */
+  state?: AtomicTextAreaState;
+  /** Textarea size (sm, md, lg) */
+  size?: AtomicTextAreaSize;
+  /** Placeholder text */
+  placeholder?: string;
+  /** Helper text below textarea */
+  helperText?: string;
+  /** Maximum character length */
+  maxLength?: number;
+  /** Show character counter */
+  showCharacterCount?: boolean;
+  /** Number of visible text rows */
+  rows?: number;
+  /** Minimum height in pixels */
+  minHeight?: number;
+  /** Auto-capitalize */
+  autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters';
+  /** Auto-correct */
+  autoCorrect?: boolean;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Container style */
+  style?: StyleProp<ViewStyle>;
+  /** Input text style */
+  inputStyle?: StyleProp<TextStyle>;
+  /** Test ID for E2E testing */
+  testID?: string;
+  /** Blur callback */
+  onBlur?: () => void;
+  /** Focus callback */
+  onFocus?: () => void;
+}
+
+/**
+ * AtomicTextArea - Material Design 3 Multiline Text Input
+ */
+export const AtomicTextArea: React.FC<AtomicTextAreaProps> = ({
+  variant = 'outlined',
+  state = 'default',
+  size = 'md',
+  label,
+  value = '',
+  onChangeText,
+  placeholder,
+  helperText,
+  maxLength,
+  showCharacterCount = false,
+  rows = 4,
+  minHeight,
+  autoCapitalize = 'sentences',
+  autoCorrect = true,
+  disabled = false,
+  style,
+  inputStyle,
+  testID,
+  onBlur,
+  onFocus,
+}) => {
+  const tokens = useAppDesignTokens();
+  const isDisabled = state === 'disabled' || disabled;
+  const characterCount = value?.toString().length || 0;
+
+  // Map variant to Paper mode
+  const getPaperMode = (): 'outlined' | 'flat' => {
+    if (variant === 'outlined') return 'outlined';
+    return 'flat'; // filled and flat both use 'flat' mode
+  };
+
+  // Map state to Paper error prop
+  const hasError = state === 'error';
+
+  // Calculate height based on rows
+  const getTextAreaHeight = () => {
+    if (minHeight) return minHeight;
+
+    // Base line height: 24px per row (approximate)
+    const lineHeight = 24;
+    const padding = 32; // Top and bottom padding
+    return (rows * lineHeight) + padding;
+  };
+
+  // Get text color based on state
+  const getTextColor = () => {
+    if (state === 'error') return tokens.colors.error;
+    if (state === 'success') return tokens.colors.success;
+    return tokens.colors.onSurface;
+  };
+
+  return (
+    <View style={style} testID={testID}>
+      <TextInput
+        mode={getPaperMode()}
+        label={label}
+        value={value}
+        onChangeText={onChangeText}
+        placeholder={placeholder}
+        error={hasError}
+        disabled={isDisabled}
+        maxLength={maxLength}
+        autoCapitalize={autoCapitalize}
+        autoCorrect={autoCorrect}
+        multiline={true}
+        numberOfLines={rows}
+        style={[
+          { height: getTextAreaHeight(), textAlignVertical: 'top' },
+          inputStyle,
+        ]}
+        textColor={getTextColor()}
+        onBlur={onBlur}
+        onFocus={onFocus}
+        testID={testID ? `${testID}-input` : undefined}
+      />
+
+      {(helperText || showCharacterCount) && (
+        <View style={{
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+          marginTop: tokens.spacing.xs,
+        }}>
+          {helperText && (
+            <HelperText
+              type={hasError ? 'error' : 'info'}
+              visible={Boolean(helperText)}
+              style={{ flex: 1 }}
+              testID={testID ? `${testID}-helper` : undefined}
+            >
+              {helperText}
+            </HelperText>
+          )}
+          {showCharacterCount && maxLength && (
+            <HelperText
+              type="info"
+              visible={true}
+              style={{ marginLeft: tokens.spacing.xs }}
+              testID={testID ? `${testID}-count` : undefined}
+            >
+              {characterCount}/{maxLength}
+            </HelperText>
+          )}
+        </View>
+      )}
+    </View>
+  );
+};
+
+export type { AtomicTextAreaProps as TextAreaProps };