@umituz/react-native-design-system 1.8.0 → 1.8.1

package/src/presentation/atoms/AtomicPicker.tsx

@@ -1,458 +0,0 @@
-/**
- * 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,
-  Modal,
-  FlatList,
-  TextInput,
-  useWindowDimensions,
-  StyleSheet,
-} from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { useAppDesignTokens } from '@umituz/react-native-theme';
-import { AtomicPickerProps, PickerOption } from './picker/types';
-import { AtomicIcon } from './AtomicIcon';
-import { AtomicText } from './AtomicText';
-import {
-  getPickerContainerStyles,
-  getPickerLabelStyles,
-  getPickerPlaceholderStyles,
-  getPickerValueStyles,
-  getPickerErrorStyles,
-  getModalOverlayStyles,
-  getModalContainerStyles,
-  getModalHeaderStyles,
-  getModalTitleStyles,
-  getSearchContainerStyles,
-  getSearchInputStyles,
-  getOptionContainerStyles,
-  getOptionTextStyles,
-  getOptionDescriptionStyles,
-  getEmptyStateStyles,
-  getEmptyStateTextStyles,
-  getChipContainerStyles,
-  getChipStyles,
-  getChipTextStyles,
-} 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',
-  style,
-  labelStyle,
-  testID,
-}) => {
-  const tokens = useAppDesignTokens();
-  const { height } = useWindowDimensions();
-  const insets = useSafeAreaInsets();
-
-  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);
-  const modalOverlayStyles = getModalOverlayStyles(tokens);
-  const modalContainerStyles = getModalContainerStyles(tokens, height * 0.85);
-  const modalHeaderStyles = getModalHeaderStyles(tokens);
-  const modalTitleStyles = getModalTitleStyles(tokens);
-  const searchContainerStyles = getSearchContainerStyles(tokens);
-  const searchInputStyles = getSearchInputStyles(tokens);
-  const emptyStateStyles = getEmptyStateStyles(tokens);
-  const emptyStateTextStyles = getEmptyStateTextStyles(tokens);
-  const chipContainerStyles = getChipContainerStyles(tokens);
-  const chipStyles = getChipStyles(tokens);
-  const chipTextStyles = getChipTextStyles(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);
-  };
-
-  /**
-   * Render single option
-   */
-  const renderOption = ({ item }: { item: PickerOption }) => {
-    const selected = isSelected(item.value);
-    const itemDisabled = item.disabled || false;
-
-    const optionContainerStyle = getOptionContainerStyles(
-      tokens,
-      selected,
-      itemDisabled
-    );
-    const optionTextStyle = getOptionTextStyles(tokens, selected);
-    const optionDescriptionStyle = getOptionDescriptionStyles(tokens);
-
-    return (
-      <TouchableOpacity
-        onPress={() => !itemDisabled && handleSelect(item.value)}
-        disabled={itemDisabled}
-        testID={item.testID || `${testID}-option-${item.value}`}
-        style={optionContainerStyle}
-      >
-        {/* Option Icon */}
-        {item.icon && (
-          <AtomicIcon
-            name={item.icon}
-            size="md"
-            color={selected ? 'primary' : 'secondary'}
-          />
-        )}
-
-        {/* Option Content */}
-        <View style={{ flex: 1 }}>
-          <AtomicText style={optionTextStyle}>{item.label}</AtomicText>
-          {item.description && (
-            <AtomicText style={optionDescriptionStyle}>
-              {item.description}
-            </AtomicText>
-          )}
-        </View>
-
-        {/* Selected Indicator */}
-        {selected && (
-          <AtomicIcon name="CheckCircle" size="md" color="primary" />
-        )}
-      </TouchableOpacity>
-    );
-  };
-
-  /**
-   * Render selected chips for multi-select
-   */
-  const renderSelectedChips = () => {
-    if (!multiple || selectedOptions.length === 0) return null;
-
-    return (
-      <View style={chipContainerStyles}>
-        {selectedOptions.map((opt) => (
-          <View key={opt.value} style={chipStyles}>
-            <AtomicText style={chipTextStyles}>{opt.label}</AtomicText>
-            <TouchableOpacity
-              onPress={(e) => {
-                e.stopPropagation();
-                handleSelect(opt.value);
-              }}
-              hitSlop={{ top: 4, bottom: 4, left: 4, right: 4 }}
-            >
-              <AtomicIcon name="X" size="sm" color="primary" />
-            </TouchableOpacity>
-          </View>
-        ))}
-      </View>
-    );
-  };
-
-  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="Clear selection"
-              testID={`${testID}-clear`}
-            >
-              <AtomicIcon name="cancel" size="sm" color="secondary" />
-            </TouchableOpacity>
-          )}
-
-          {/* Dropdown Icon */}
-          <AtomicIcon
-            name={modalVisible ? 'expand-less' : 'expand-more'}
-            size="sm"
-            color={disabled ? 'surfaceVariant' : 'secondary'}
-          />
-        </View>
-      </TouchableOpacity>
-
-      {/* Selected Chips (Multi-select) */}
-      {renderSelectedChips()}
-
-      {/* Error Message */}
-      {error && <AtomicText style={errorStyles}>{error}</AtomicText>}
-
-      {/* Selection Modal */}
-      <Modal
-        visible={modalVisible}
-        animationType="slide"
-        transparent
-        onRequestClose={closeModal}
-        testID={`${testID}-modal`}
-      >
-        <View style={modalOverlayStyles}>
-          <View
-            style={[
-              modalContainerStyles,
-              { paddingBottom: insets.bottom + tokens.spacing.md },
-            ]}
-          >
-            {/* Modal Header */}
-            <View style={modalHeaderStyles}>
-              {/* Title */}
-              <AtomicText style={modalTitleStyles}>
-                {modalTitle || label || 'Select'}
-              </AtomicText>
-
-              {/* Close Button */}
-              <TouchableOpacity
-                onPress={closeModal}
-                hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
-                accessibilityRole="button"
-                accessibilityLabel="Close picker"
-                testID={`${testID}-close`}
-              >
-                <AtomicIcon name="X" size="md" color="primary" />
-              </TouchableOpacity>
-            </View>
-
-            {/* Search Bar */}
-            {searchable && (
-              <View style={searchContainerStyles}>
-                <AtomicIcon name="Search" size="sm" color="secondary" />
-                <TextInput
-                  value={searchQuery}
-                  onChangeText={handleSearch}
-                  placeholder="Search..."
-                  placeholderTextColor={tokens.colors.textSecondary}
-                  style={searchInputStyles}
-                  testID={`${testID}-search`}
-                />
-                {searchQuery.length > 0 && (
-                  <TouchableOpacity onPress={() => handleSearch('')}>
-                    <AtomicIcon name="cancel" size="sm" color="secondary" />
-                  </TouchableOpacity>
-                )}
-              </View>
-            )}
-
-            {/* Options List */}
-            {filteredOptions.length > 0 ? (
-              <FlatList
-                data={filteredOptions}
-                keyExtractor={(item) => item.value}
-                renderItem={renderOption}
-                showsVerticalScrollIndicator
-                testID={`${testID}-list`}
-              />
-            ) : (
-              <View style={emptyStateStyles}>
-                <AtomicIcon name="error-outline" size="xl" color="secondary" />
-                <AtomicText style={emptyStateTextStyles}>
-                  {emptyMessage}
-                </AtomicText>
-              </View>
-            )}
-          </View>
-        </View>
-      </Modal>
-    </View>
-  );
-};

package/src/presentation/atoms/AtomicProgress.tsx

@@ -1,139 +0,0 @@
-/**
- * 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 '@umituz/react-native-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}>
-      <View style={progressStyle} />
-      {(showPercentage || showValue) && (
-        <View style={styles.textContainer}>
-          <Text style={textStyle}>
-            {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/presentation/atoms/AtomicSearchBar.tsx

@@ -1,114 +0,0 @@
-import React from 'react';
-import { View, TextInput, TouchableOpacity, StyleSheet } from 'react-native';
-import type { StyleProp, ViewStyle, TextStyle } from 'react-native';
-import { useAppDesignTokens } from '@umituz/react-native-theme';
-import { AtomicIcon } from './AtomicIcon';
-
-export interface AtomicSearchBarProps {
-  value: string;
-  onChangeText: (text: string) => void;
-  placeholder?: string;
-  autoFocus?: boolean;
-  editable?: boolean;
-  onClear?: () => void;
-  onFocus?: () => void;
-  onBlur?: () => void;
-  onSubmitEditing?: () => void;
-  style?: StyleProp<ViewStyle>;
-  inputStyle?: StyleProp<TextStyle>;
-  accessibilityLabel?: string;
-  accessibilityHint?: string;
-}
-
-export const AtomicSearchBar: React.FC<AtomicSearchBarProps> = ({
-  value,
-  onChangeText,
-  placeholder = 'Search...',
-  autoFocus = false,
-  editable = true,
-  onClear,
-  onFocus,
-  onBlur,
-  onSubmitEditing,
-  style,
-  inputStyle,
-  accessibilityLabel = 'Search input',
-  accessibilityHint,
-}) => {
-  const tokens = useAppDesignTokens();
-
-  const handleClear = () => {
-    onChangeText('');
-    onClear?.();
-  };
-
-  return (
-    <View
-      style={[
-        {
-          flexDirection: 'row',
-          alignItems: 'center',
-          backgroundColor: tokens.colors.surfaceSecondary,
-          borderRadius: tokens.borders.radius.lg,
-          borderWidth: 1,
-          borderColor: tokens.colors.border,
-          paddingHorizontal: tokens.spacing.md,
-          paddingVertical: tokens.spacing.sm,
-          gap: tokens.spacing.sm,
-          minHeight: 48,
-        },
-        style,
-      ]}
-      accessibilityRole="search"
-    >
-      <AtomicIcon
-        name="Search"
-        size="sm"
-        color="secondary"
-      />
-
-      <TextInput
-        value={value}
-        onChangeText={onChangeText}
-        placeholder={placeholder}
-        placeholderTextColor={tokens.colors.textSecondary}
-        autoFocus={autoFocus}
-        editable={editable}
-        onFocus={onFocus}
-        onBlur={onBlur}
-        onSubmitEditing={onSubmitEditing}
-        style={[
-          {
-            flex: 1,
-            ...tokens.typography.bodyMedium,
-            color: tokens.colors.textPrimary,
-            padding: 0,
-            margin: 0,
-          },
-          inputStyle,
-        ]}
-        accessibilityLabel={accessibilityLabel}
-        accessibilityHint={accessibilityHint}
-        returnKeyType="search"
-        underlineColorAndroid="transparent"
-      />
-
-      {value.length > 0 && (
-        <TouchableOpacity
-          onPress={handleClear}
-          style={{
-            padding: tokens.spacing.xs,
-          }}
-          accessibilityLabel="Clear search"
-          accessibilityRole="button"
-        >
-          <AtomicIcon
-            name="X"
-            size="sm"
-            color="secondary"
-          />
-        </TouchableOpacity>
-      )}
-    </View>
-  );
-};