@umituz/react-native-design-system 1.15.0 → 2.0.0

package/src/atoms/AtomicPicker.tsx

@@ -0,0 +1,310 @@
+/**
+ * AtomicPicker Component
+ *
+ * A reusable option picker/dropdown component for selecting from a list of options.
+ *
+ * Features:
+ * - Single and multi-select support
+ * - Modal display mode (full-screen on mobile)
+ * - Optional search/filter capability
+ * - Error and disabled states
+ * - Theme-aware styling
+ * - Icons for options
+ * - Clearable selection
+ * - react-hook-form integration ready
+ *
+ * Architecture:
+ * - Follows AtomicButton pattern with separated types and styles
+ * - Uses helper functions from picker/styles/pickerStyles.ts
+ * - Types defined in picker/types/index.ts
+ * - Zero inline StyleSheet.create()
+ *
+ * Usage:
+ * ```tsx
+ * const [partyType, setPartyType] = useState('birthday');
+ *
+ * <AtomicPicker
+ *   value={partyType}
+ *   onChange={setPartyType}
+ *   options={[
+ *     { label: 'Birthday Party', value: 'birthday', icon: 'cake' },
+ *     { label: 'Wedding', value: 'wedding', icon: 'heart' },
+ *     { label: 'Corporate Event', value: 'corporate', icon: 'briefcase' },
+ *   ]}
+ *   label="Party Type"
+ *   placeholder="Select party type"
+ *   searchable
+ * />
+ * ```
+ *
+ * @module AtomicPicker
+ */
+
+import React, { useState, useMemo } from 'react';
+import {
+  View,
+  TouchableOpacity,
+  StyleSheet,
+} from 'react-native';
+import { useAppDesignTokens } from '../theme';
+import { AtomicPickerProps, PickerOption } from './picker/types';
+import { AtomicIcon } from './AtomicIcon';
+import { AtomicText } from './AtomicText';
+import { PickerModal } from './picker/components/PickerModal';
+import { PickerChips } from './picker/components/PickerChips';
+import {
+  getPickerContainerStyles,
+  getPickerLabelStyles,
+  getPickerPlaceholderStyles,
+  getPickerValueStyles,
+  getPickerErrorStyles,
+} from './picker/styles/pickerStyles';
+
+export type { AtomicPickerProps, PickerOption, PickerSize } from './picker/types';
+
+/**
+ * AtomicPicker - Universal option picker component
+ *
+ * Displays a button that opens a modal for selection.
+ * Supports single/multi-select, search, and custom rendering.
+ */
+export const AtomicPicker: React.FC<AtomicPickerProps> = ({
+  value,
+  onChange,
+  options,
+  label,
+  placeholder = 'Select...',
+  error,
+  disabled = false,
+  multiple = false,
+  searchable = false,
+  clearable = false,
+  autoClose = true,
+  color = 'primary',
+  size = 'md',
+  modalTitle,
+  emptyMessage = 'No options available',
+  clearAccessibilityLabel = 'Clear selection',
+  closeAccessibilityLabel = 'Close picker',
+  style,
+  labelStyle,
+  testID,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  const [modalVisible, setModalVisible] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
+
+  // Get style helpers with design tokens
+  const containerStyles = getPickerContainerStyles(tokens);
+  const labelStyles = getPickerLabelStyles(tokens);
+  const placeholderStyles = getPickerPlaceholderStyles(tokens);
+  const valueStyles = getPickerValueStyles(tokens);
+  const errorStyles = getPickerErrorStyles(tokens);
+
+  /**
+   * Normalize value to array for consistent handling
+   */
+  const selectedValues = useMemo(() => {
+    if (multiple) {
+      return Array.isArray(value) ? value : [];
+    }
+    return value ? [value as string] : [];
+  }, [value, multiple]);
+
+  /**
+   * Get selected option objects
+   */
+  const selectedOptions = useMemo(() => {
+    return options.filter((opt) => selectedValues.includes(opt.value));
+  }, [options, selectedValues]);
+
+  /**
+   * Filter options based on search query
+   */
+  const filteredOptions = useMemo(() => {
+    if (!searchQuery.trim()) return options;
+
+    const query = searchQuery.toLowerCase();
+    return options.filter(
+      (opt) =>
+        opt.label.toLowerCase().includes(query) ||
+        opt.description?.toLowerCase().includes(query)
+    );
+  }, [options, searchQuery]);
+
+  /**
+   * Format display text for selected value(s)
+   */
+  const displayText = useMemo(() => {
+    if (selectedOptions.length === 0) {
+      return placeholder;
+    }
+
+    if (multiple) {
+      return selectedOptions.length === 1
+        ? selectedOptions[0].label
+        : `${selectedOptions.length} selected`;
+    }
+
+    return selectedOptions[0]?.label || placeholder;
+  }, [selectedOptions, placeholder, multiple]);
+
+  /**
+   * Handle modal open
+   */
+  const openModal = () => {
+    if (disabled) return;
+    setModalVisible(true);
+    setSearchQuery('');
+  };
+
+  /**
+   * Handle modal close
+   */
+  const closeModal = () => {
+    setModalVisible(false);
+    setSearchQuery('');
+  };
+
+  /**
+   * Handle option selection
+   */
+  const handleSelect = (optionValue: string) => {
+    if (multiple) {
+      const newValues = selectedValues.includes(optionValue)
+        ? selectedValues.filter((v) => v !== optionValue)
+        : [...selectedValues, optionValue];
+      onChange(newValues);
+    } else {
+      onChange(optionValue);
+      if (autoClose) {
+        closeModal();
+      }
+    }
+  };
+
+  /**
+   * Handle clear selection
+   */
+  const handleClear = () => {
+    onChange(multiple ? [] : '');
+  };
+
+  /**
+   * Handle search query change
+   */
+  const handleSearch = (query: string) => {
+    setSearchQuery(query);
+  };
+
+  /**
+   * Check if option is selected
+   */
+  const isSelected = (optionValue: string): boolean => {
+    return selectedValues.includes(optionValue);
+  };
+
+  /**
+   * Handle chip removal
+   */
+  const handleChipRemove = (value: string) => {
+    handleSelect(value);
+  };
+
+  const pickerContainerStyle = StyleSheet.flatten([
+    containerStyles.base,
+    containerStyles.size[size],
+    error ? containerStyles.state.error : undefined,
+    disabled ? containerStyles.state.disabled : undefined,
+    style,
+  ]);
+
+  const pickerLabelStyle = StyleSheet.flatten([
+    labelStyles.base,
+    labelStyles.size[size],
+    labelStyle,
+  ]);
+
+  const pickerValueStyle = StyleSheet.flatten([
+    selectedOptions.length > 0 ? valueStyles.base : placeholderStyles.base,
+    selectedOptions.length > 0
+      ? valueStyles.size[size]
+      : placeholderStyles.size[size],
+  ]);
+
+  return (
+    <View>
+      {/* Label */}
+      {label && <AtomicText style={pickerLabelStyle}>{label}</AtomicText>}
+
+      {/* Picker Button */}
+      <TouchableOpacity
+        onPress={openModal}
+        disabled={disabled}
+        accessibilityRole="button"
+        accessibilityLabel={label || placeholder}
+        accessibilityState={{ disabled }}
+        testID={testID}
+        style={pickerContainerStyle}
+      >
+        {/* Display Text */}
+        <AtomicText style={pickerValueStyle} numberOfLines={1}>
+          {displayText}
+        </AtomicText>
+
+        {/* Icons */}
+        <View style={{ flexDirection: 'row', alignItems: 'center', gap: tokens.spacing.xs }}>
+          {/* Clear Button */}
+          {clearable && selectedOptions.length > 0 && !disabled && (
+            <TouchableOpacity
+              onPress={handleClear}
+              hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+              accessibilityRole="button"
+              accessibilityLabel={clearAccessibilityLabel}
+              testID={`${testID}-clear`}
+            >
+              <AtomicIcon name="X" size="sm" color="secondary" />
+            </TouchableOpacity>
+          )}
+
+          {/* Dropdown Icon */}
+          <AtomicIcon
+            name={modalVisible ? 'ChevronUp' : 'ChevronDown'}
+            size="sm"
+            color={disabled ? 'surfaceVariant' : 'secondary'}
+          />
+        </View>
+      </TouchableOpacity>
+
+      {/* Selected Chips (Multi-select) */}
+      <PickerChips
+        selectedOptions={selectedOptions}
+        onRemoveChip={handleChipRemove}
+        testID={testID}
+      />
+
+      {/* Error Message */}
+      {error && <AtomicText style={errorStyles}>{error}</AtomicText>}
+
+      {/* Selection Modal */}
+      <PickerModal
+        visible={modalVisible}
+        onClose={closeModal}
+        options={options}
+        selectedValues={selectedValues}
+        onSelect={handleSelect}
+        title={modalTitle || label}
+        searchable={searchable}
+        searchQuery={searchQuery}
+        onSearchChange={handleSearch}
+        filteredOptions={filteredOptions}
+        multiple={multiple}
+        emptyMessage={emptyMessage}
+        searchPlaceholder="Search..."
+        closeAccessibilityLabel={closeAccessibilityLabel}
+        testID={testID}
+      />
+    </View>
+  );
+};

package/src/atoms/AtomicProgress.tsx

@@ -0,0 +1,149 @@
+/**
+ * AtomicProgress - Universal Progress Bar Component
+ *
+ * Displays progress bars for completion tracking
+ * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
+ *
+ * Atomic Design Level: ATOM
+ * Purpose: Progress indication and completion tracking
+ *
+ * Usage:
+ * - File upload progress
+ * - Task completion progress
+ * - Achievement progress
+ * - Form completion
+ */
+
+import React from 'react';
+import { View, StyleSheet, ViewStyle, DimensionValue, Text } from 'react-native';
+import { useAppDesignTokens } from '../theme';
+
+// =============================================================================
+// TYPE DEFINITIONS
+// =============================================================================
+
+export interface AtomicProgressProps {
+  /** Progress value (0-100) */
+  value: number;
+  /** Progress bar height */
+  height?: number;
+  /** Progress bar width */
+  width?: number | string;
+  /** Progress bar color */
+  color?: string;
+  /** Background color */
+  backgroundColor?: string;
+  /** Progress bar shape */
+  shape?: 'rounded' | 'square';
+  /** Whether to show percentage text */
+  showPercentage?: boolean;
+  /** Whether to show value text */
+  showValue?: boolean;
+  /** Custom text color */
+  textColor?: string;
+  /** Style overrides */
+  style?: ViewStyle | ViewStyle[];
+  /** Test ID for testing */
+  testID?: string;
+}
+
+// =============================================================================
+// COMPONENT IMPLEMENTATION
+// =============================================================================
+
+export const AtomicProgress: React.FC<AtomicProgressProps> = ({
+  value,
+  height = 8,
+  width = '100%',
+  color,
+  backgroundColor,
+  shape = 'rounded',
+  showPercentage = false,
+  showValue = false,
+  textColor,
+  style,
+  testID,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  // Clamp value between 0 and 100
+  const clampedValue = Math.max(0, Math.min(100, value));
+
+  // Default colors
+  const progressColor = color || tokens.colors.primary;
+  const progressBackground = backgroundColor || tokens.colors.surfaceVariant;
+  const progressTextColor = textColor || tokens.colors.textPrimary;
+
+  // Calculate progress width
+  const progressWidth = `${clampedValue}%`;
+
+  // Border radius based on shape
+  const borderRadius = shape === 'rounded' ? height / 2 : 0;
+
+  const containerStyle: ViewStyle = {
+    width: width as DimensionValue,
+    height,
+    backgroundColor: progressBackground,
+    borderRadius,
+    overflow: 'hidden',
+  };
+
+  const progressStyle: ViewStyle = {
+    width: progressWidth as DimensionValue,
+    height: '100%' as DimensionValue,
+    backgroundColor: progressColor,
+    borderRadius,
+  };
+
+  const textStyle = {
+    fontSize: tokens.typography.bodySmall.fontSize,
+    fontWeight: tokens.typography.labelMedium.fontWeight,
+    color: progressTextColor,
+    textAlign: 'center' as const,
+  };
+
+  return (
+    <View
+      style={[containerStyle, style]}
+      testID={testID}
+      accessibilityRole="progressbar"
+      accessibilityValue={{ min: 0, max: 100, now: Math.round(clampedValue) }}
+      accessibilityLabel={`Progress: ${Math.round(clampedValue)}${showPercentage ? '%' : ''}`}
+    >
+      <View style={progressStyle} />
+      {(showPercentage || showValue) && (
+        <View style={styles.textContainer}>
+          <Text
+            style={textStyle}
+            accessibilityLiveRegion="polite"
+            accessibilityLabel={`Current progress: ${Math.round(clampedValue)}${showPercentage ? '%' : ''}`}
+          >
+            {showPercentage ? `${Math.round(clampedValue)}%` : `${Math.round(clampedValue)}`}
+          </Text>
+        </View>
+      )}
+    </View>
+  );
+};
+
+// =============================================================================
+// STYLES
+// =============================================================================
+
+const styles = StyleSheet.create({
+  textContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+// =============================================================================
+// EXPORTS
+// =============================================================================
+
+export default AtomicProgress;

package/src/atoms/AtomicText.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { Text, StyleProp, TextStyle } from 'react-native';
+import { useAppDesignTokens } from '../theme';
+import type { TextStyleVariant, ColorVariant } from '../typography';
+import { getTextColor } from '../typography';
+
+export interface AtomicTextProps {
+  children: React.ReactNode;
+  type?: TextStyleVariant;
+  color?: ColorVariant | string;
+  numberOfLines?: number;
+  ellipsizeMode?: 'head' | 'middle' | 'tail' | 'clip';
+  textAlign?: 'auto' | 'left' | 'right' | 'center' | 'justify';
+  style?: StyleProp<TextStyle>;
+  testID?: string;
+}
+
+export const AtomicText: React.FC<AtomicTextProps> = ({
+  children,
+  type = 'bodyMedium',
+  color,
+  numberOfLines,
+  ellipsizeMode,
+  textAlign,
+  style,
+  testID,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  // Get typography style from tokens
+  const typographyStyle = (tokens.typography as Record<string, any>)[type];
+
+  // Get color from tokens or use custom color using utility function
+  const resolvedColor = getTextColor(color, tokens);
+
+  const textStyle: StyleProp<TextStyle> = [
+    typographyStyle,
+    {
+      color: resolvedColor,
+      ...(textAlign && { textAlign }),
+    },
+    style,
+  ];
+
+  return (
+    <Text
+      numberOfLines={numberOfLines}
+      ellipsizeMode={ellipsizeMode}
+      style={textStyle}
+      testID={testID}
+    >
+      {children}
+    </Text>
+  );
+};

package/src/atoms/__tests__/AtomicButton.test.tsx

@@ -0,0 +1,107 @@
+/**
+ * AtomicButton Tests
+ * 
+ * Basic test cases for AtomicButton component
+ * These tests can be run by consuming applications
+ */
+
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react-native';
+import { AtomicButton } from '../AtomicButton';
+
+// Mock design tokens
+jest.mock('@umituz/react-native-design-system-theme', () => ({
+  useAppDesignTokens: () => ({
+    colors: {
+      primary: '#007AFF',
+      onPrimary: '#FFFFFF',
+      secondary: '#8E8E93',
+      surface: '#F2F2F7',
+      border: '#C6C6C8',
+    },
+    spacing: {
+      xs: 4,
+      sm: 8,
+      md: 16,
+      lg: 24,
+    },
+    typography: {
+      bodyMedium: { fontSize: 16 },
+      labelLarge: { fontSize: 18 },
+    },
+    borders: {
+      radius: {
+        md: 8,
+      },
+    },
+  }),
+}));
+
+describe('AtomicButton', () => {
+  it('renders correctly with title', () => {
+    const { getByText } = render(
+      <AtomicButton title="Test Button" onPress={() => {}} />
+    );
+    
+    expect(getByText('Test Button')).toBeTruthy();
+  });
+
+  it('handles press events', () => {
+    const mockOnPress = jest.fn();
+    const { getByText } = render(
+      <AtomicButton title="Test Button" onPress={mockOnPress} />
+    );
+    
+    fireEvent.press(getByText('Test Button'));
+    expect(mockOnPress).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders with different variants', () => {
+    const { getByText, rerender } = render(
+      <AtomicButton title="Primary" onPress={() => {}} variant="primary" />
+    );
+    
+    expect(getByText('Primary')).toBeTruthy();
+    
+    rerender(<AtomicButton title="Secondary" onPress={() => {}} variant="secondary" />);
+    expect(getByText('Secondary')).toBeTruthy();
+  });
+
+  it('renders with different sizes', () => {
+    const { getByText, rerender } = render(
+      <AtomicButton title="Small" onPress={() => {}} size="sm" />
+    );
+    
+    expect(getByText('Small')).toBeTruthy();
+    
+    rerender(<AtomicButton title="Large" onPress={() => {}} size="lg" />);
+    expect(getByText('Large')).toBeTruthy();
+  });
+
+  it('is disabled when disabled prop is true', () => {
+    const mockOnPress = jest.fn();
+    const { getByText } = render(
+      <AtomicButton title="Disabled" onPress={mockOnPress} disabled />
+    );
+    
+    const button = getByText('Disabled').parent;
+    expect(button).toBeDisabled();
+  });
+
+  it('renders with icon', () => {
+    const { getByTestId } = render(
+      <AtomicButton title="With Icon" onPress={() => {}} icon="Settings" testID="test-button" />
+    );
+    
+    expect(getByTestId('test-button')).toBeTruthy();
+  });
+
+  it('applies custom styles', () => {
+    const customStyle = { backgroundColor: 'red' };
+    const { getByTestId } = render(
+      <AtomicButton title="Custom" onPress={() => {}} style={customStyle} testID="test-button" />
+    );
+    
+    expect(getByTestId('test-button')).toBeTruthy();
+  });
+});