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

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

@@ -0,0 +1,110 @@
+/**
+ * AtomicIcon Tests
+ * 
+ * Basic test cases for AtomicIcon component
+ */
+
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import { AtomicIcon } from '../AtomicIcon';
+
+// Mock design tokens
+jest.mock('@umituz/react-native-design-system-theme', () => ({
+  useAppDesignTokens: () => ({
+    colors: {
+      primary: '#007AFF',
+      secondary: '#8E8E93',
+    },
+  }),
+}));
+
+// Mock Lucide icons
+jest.mock('lucide-react-native', () => ({
+  Settings: () => 'Settings-Icon',
+  Heart: () => 'Heart-Icon',
+}));
+
+describe('AtomicIcon', () => {
+  it('renders with default props', () => {
+    const { getByTestId } = render(
+      <AtomicIcon name="Settings" testID="test-icon" />
+    );
+    
+    expect(getByTestId('test-icon')).toBeTruthy();
+  });
+
+  it('renders with different sizes', () => {
+    const { getByTestId, rerender } = render(
+      <AtomicIcon name="Settings" size="sm" testID="test-icon" />
+    );
+    
+    expect(getByTestId('test-icon')).toBeTruthy();
+    
+    rerender(<AtomicIcon name="Settings" size="lg" testID="test-icon" />);
+    expect(getByTestId('test-icon')).toBeTruthy();
+  });
+
+  it('renders with different colors', () => {
+    const { getByTestId, rerender } = render(
+      <AtomicIcon name="Settings" color="primary" testID="test-icon" />
+    );
+    
+    expect(getByTestId('test-icon')).toBeTruthy();
+    
+    rerender(<AtomicIcon name="Settings" color="secondary" testID="test-icon" />);
+    expect(getByTestId('test-icon')).toBeTruthy();
+  });
+
+  it('renders with custom size', () => {
+    const { getByTestId } = render(
+      <AtomicIcon name="Settings" customSize={32} testID="test-icon" />
+    );
+    
+    expect(getByTestId('test-icon')).toBeTruthy();
+  });
+
+  it('renders with custom color', () => {
+    const { getByTestId } = render(
+      <AtomicIcon name="Settings" customColor="#FF0000" testID="test-icon" />
+    );
+    
+    expect(getByTestId('test-icon')).toBeTruthy();
+  });
+
+  it('renders with background', () => {
+    const { getByTestId } = render(
+      <AtomicIcon 
+        name="Settings" 
+        withBackground 
+        backgroundColor="#F0F0F0" 
+        testID="test-icon" 
+      />
+    );
+    
+    expect(getByTestId('test-icon')).toBeTruthy();
+  });
+
+  it('has accessibility label when provided', () => {
+    const { getByTestId } = render(
+      <AtomicIcon 
+        name="Settings" 
+        accessibilityLabel="Settings icon" 
+        testID="test-icon" 
+      />
+    );
+    
+    expect(getByTestId('test-icon')).toBeTruthy();
+  });
+
+  it('handles unknown icon names gracefully', () => {
+    const consoleSpy = jest.spyOn(console, 'warn').mockImplementation();
+    
+    render(<AtomicIcon name="UnknownIcon" testID="test-icon" />);
+    
+    expect(consoleSpy).toHaveBeenCalledWith(
+      expect.stringContaining('Icon "UnknownIcon" not found')
+    );
+    
+    consoleSpy.mockRestore();
+  });
+});

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

@@ -0,0 +1,195 @@
+/**
+ * AtomicInput Tests
+ * 
+ * Basic test cases for AtomicInput component
+ */
+
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react-native';
+import { AtomicInput } from '../AtomicInput';
+
+// Mock design tokens
+jest.mock('@umituz/react-native-design-system-theme', () => ({
+  useAppDesignTokens: () => ({
+    colors: {
+      primary: '#007AFF',
+      secondary: '#8E8E93',
+      error: '#FF3B30',
+      success: '#34C759',
+      surface: '#F2F2F7',
+      border: '#C6C6C8',
+      textPrimary: '#000000',
+      textSecondary: '#8E8E93',
+      textDisabled: '#C7C7CC',
+    },
+    spacing: {
+      xs: 4,
+      sm: 8,
+      md: 16,
+      lg: 24,
+    },
+    typography: {
+      bodyMedium: { fontSize: 16 },
+      bodySmall: { fontSize: 14 },
+    },
+    borders: {
+      radius: {
+        md: 8,
+      },
+    },
+  }),
+}));
+
+describe('AtomicInput', () => {
+  it('renders correctly with basic props', () => {
+    const { getByDisplayValue } = render(
+      <AtomicInput value="test" onChangeText={() => {}} />
+    );
+    
+    expect(getByDisplayValue('test')).toBeTruthy();
+  });
+
+  it('handles text changes', () => {
+    const mockOnChange = jest.fn();
+    const { getByDisplayValue } = render(
+      <AtomicInput value="" onChangeText={mockOnChange} />
+    );
+    
+    const input = getByDisplayValue('');
+    fireEvent.changeText(input, 'new text');
+    
+    expect(mockOnChange).toHaveBeenCalledWith('new text');
+  });
+
+  it('renders with label', () => {
+    const { getByText } = render(
+      <AtomicInput value="" onChangeText={() => {}} label="Test Label" />
+    );
+    
+    expect(getByText('Test Label')).toBeTruthy();
+  });
+
+  it('renders with placeholder', () => {
+    const { getByPlaceholderText } = render(
+      <AtomicInput value="" onChangeText={() => {}} placeholder="Enter text" />
+    );
+    
+    expect(getByPlaceholderText('Enter text')).toBeTruthy();
+  });
+
+  it('renders with error state', () => {
+    const { getByText } = render(
+      <AtomicInput 
+        value="" 
+        onChangeText={() => {}} 
+        state="error" 
+        helperText="Error message" 
+      />
+    );
+    
+    expect(getByText('Error message')).toBeTruthy();
+  });
+
+  it('renders with success state', () => {
+    const { getByText } = render(
+      <AtomicInput 
+        value="" 
+        onChangeText={() => {}} 
+        state="success" 
+        helperText="Success message" 
+      />
+    );
+    
+    expect(getByText('Success message')).toBeTruthy();
+  });
+
+  it('renders with leading icon', () => {
+    const { getByTestId } = render(
+      <AtomicInput 
+        value="" 
+        onChangeText={() => {}} 
+        leadingIcon="Search" 
+        testID="test-input" 
+      />
+    );
+    
+    expect(getByTestId('test-input')).toBeTruthy();
+  });
+
+  it('renders with trailing icon', () => {
+    const { getByTestId } = render(
+      <AtomicInput 
+        value="" 
+        onChangeText={() => {}} 
+        trailingIcon="Eye" 
+        testID="test-input" 
+      />
+    );
+    
+    expect(getByTestId('test-input')).toBeTruthy();
+  });
+
+  it('renders with password toggle', () => {
+    const { getByTestId } = render(
+      <AtomicInput 
+        value="" 
+        onChangeText={() => {}} 
+        secureTextEntry 
+        showPasswordToggle 
+        testID="test-input" 
+      />
+    );
+    
+    expect(getByTestId('test-input')).toBeTruthy();
+  });
+
+  it('is disabled when disabled prop is true', () => {
+    const { getByDisplayValue } = render(
+      <AtomicInput value="test" onChangeText={() => {}} disabled />
+    );
+    
+    const input = getByDisplayValue('test');
+    expect(input).toBeDisabled();
+  });
+
+  it('renders with different variants', () => {
+    const { getByDisplayValue, rerender } = render(
+      <AtomicInput value="test" onChangeText={() => {}} variant="outlined" />
+    );
+    
+    expect(getByDisplayValue('test')).toBeTruthy();
+    
+    rerender(<AtomicInput value="test" onChangeText={() => {}} variant="filled" />);
+    expect(getByDisplayValue('test')).toBeTruthy();
+    
+    rerender(<AtomicInput value="test" onChangeText={() => {}} variant="flat" />);
+    expect(getByDisplayValue('test')).toBeTruthy();
+  });
+
+  it('renders with different sizes', () => {
+    const { getByDisplayValue, rerender } = render(
+      <AtomicInput value="test" onChangeText={() => {}} size="sm" />
+    );
+    
+    expect(getByDisplayValue('test')).toBeTruthy();
+    
+    rerender(<AtomicInput value="test" onChangeText={() => {}} size="md" />);
+    expect(getByDisplayValue('test')).toBeTruthy();
+    
+    rerender(<AtomicInput value="test" onChangeText={() => {}} size="lg" />);
+    expect(getByDisplayValue('test')).toBeTruthy();
+  });
+
+  it('shows character count when enabled', () => {
+    const { getByText } = render(
+      <AtomicInput 
+        value="test" 
+        onChangeText={() => {}} 
+        showCharacterCount 
+        maxLength={10} 
+      />
+    );
+    
+    expect(getByText('4/10')).toBeTruthy();
+  });
+});

package/src/atoms/datepicker/components/DatePickerButton.tsx

@@ -0,0 +1,112 @@
+/**
+ * DatePickerButton Component
+ *
+ * Button component that triggers the date picker modal.
+ * Extracted from AtomicDatePicker for better separation of concerns.
+ */
+
+import React from 'react';
+import {
+  View,
+  TouchableOpacity,
+  StyleSheet,
+} from 'react-native';
+import { useAppDesignTokens } from '../../../theme';
+import { AtomicIcon } from '../../AtomicIcon';
+import { AtomicText } from '../../AtomicText';
+
+interface DatePickerButtonProps {
+  onPress: () => void;
+  disabled?: boolean;
+  displayText: string;
+  hasValue: boolean;
+  error?: boolean;
+  testID?: string;
+}
+
+export const DatePickerButton: React.FC<DatePickerButtonProps> = ({
+  onPress,
+  disabled = false,
+  displayText,
+  hasValue,
+  error,
+  testID,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  const buttonStyles = StyleSheet.create({
+    container: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      paddingHorizontal: tokens.spacing.md,
+      paddingVertical: tokens.spacing.sm,
+      borderRadius: tokens.borders.radius.md,
+      borderWidth: 1,
+      backgroundColor: tokens.colors.surface,
+      minHeight: 48,
+    },
+    containerError: {
+      borderColor: tokens.colors.error,
+    },
+    containerDisabled: {
+      backgroundColor: tokens.colors.surfaceVariant,
+      borderColor: tokens.colors.outline,
+      opacity: 0.6,
+    },
+    containerDefault: {
+      borderColor: tokens.colors.outline,
+    },
+    textContainer: {
+      flex: 1,
+    },
+    placeholderText: {
+      fontSize: tokens.typography.bodyMedium.fontSize,
+      color: tokens.colors.textSecondary,
+    },
+    valueText: {
+      fontSize: tokens.typography.bodyMedium.fontSize,
+      color: tokens.colors.onSurface,
+      fontWeight: '500',
+    },
+    iconContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: tokens.spacing.xs,
+    },
+  });
+
+  const containerStyle = [
+    buttonStyles.container,
+    error ? buttonStyles.containerError :
+      disabled ? buttonStyles.containerDisabled :
+        buttonStyles.containerDefault,
+  ];
+
+  const textStyle = hasValue ? buttonStyles.valueText : buttonStyles.placeholderText;
+
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      disabled={disabled}
+      accessibilityRole="button"
+      accessibilityState={{ disabled }}
+      testID={testID}
+      style={containerStyle}
+    >
+      <View style={buttonStyles.textContainer}>
+        <AtomicText style={textStyle} numberOfLines={1}>
+          {displayText}
+        </AtomicText>
+      </View>
+
+      <View style={buttonStyles.iconContainer}>
+        <AtomicIcon
+          name="Calendar"
+          size="md"
+          color={disabled ? 'surfaceVariant' : 'secondary'}
+        />
+      </View>
+    </TouchableOpacity>
+  );
+};

package/src/atoms/datepicker/components/DatePickerModal.tsx

@@ -0,0 +1,143 @@
+/**
+ * DatePickerModal Component
+ *
+ * Modal component for iOS date picker with proper styling and behavior.
+ * Extracted from AtomicDatePicker for better separation of concerns.
+ */
+
+import React from 'react';
+import {
+  View,
+  Modal,
+  TouchableOpacity,
+  StyleSheet,
+  Platform,
+} from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import DateTimePicker, { DateTimePickerEvent } from '@react-native-community/datetimepicker';
+import { useAppDesignTokens } from '../../../theme';
+import { AtomicIcon } from '../../AtomicIcon';
+import { AtomicText } from '../../AtomicText';
+
+interface DatePickerModalProps {
+  visible: boolean;
+  onClose: () => void;
+  onDateChange: (event: DateTimePickerEvent, date?: Date) => void;
+  currentDate: Date;
+  mode?: 'date' | 'time' | 'datetime';
+  minimumDate?: Date;
+  maximumDate?: Date;
+  overlayOpacity?: number;
+  titleText?: {
+    date?: string;
+    time?: string;
+    datetime?: string;
+  };
+  doneButtonText?: string;
+  testID?: string;
+}
+
+export const DatePickerModal: React.FC<DatePickerModalProps> = ({
+  visible,
+  onClose,
+  onDateChange,
+  currentDate,
+  mode = 'date',
+  minimumDate,
+  maximumDate,
+  overlayOpacity = 0.5,
+  titleText,
+  doneButtonText = 'Done',
+  testID,
+}) => {
+  const tokens = useAppDesignTokens();
+  const insets = useSafeAreaInsets();
+
+  const modalStyles = StyleSheet.create({
+    overlay: {
+      flex: 1,
+      backgroundColor: `rgba(0, 0, 0, ${overlayOpacity})`,
+      justifyContent: 'flex-end',
+    },
+    container: {
+      backgroundColor: tokens.colors.surface,
+      borderTopLeftRadius: tokens.borders.radius.lg,
+      borderTopRightRadius: tokens.borders.radius.lg,
+      paddingBottom: insets.bottom,
+    },
+    header: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      paddingHorizontal: tokens.spacing.md,
+      paddingVertical: tokens.spacing.sm,
+      borderBottomWidth: 1,
+      borderBottomColor: tokens.colors.outline,
+    },
+    title: {
+      fontSize: tokens.typography.titleLarge.fontSize,
+      fontWeight: '600',
+      color: tokens.colors.onSurface,
+    },
+    doneButton: {
+      paddingHorizontal: tokens.spacing.md,
+      paddingVertical: tokens.spacing.xs,
+      borderRadius: tokens.borders.radius.md,
+      backgroundColor: tokens.colors.primary,
+    },
+    doneButtonText: {
+      fontSize: tokens.typography.labelMedium.fontSize,
+      fontWeight: '500',
+      color: tokens.colors.onPrimary,
+    },
+  });
+
+  if (Platform.OS !== 'ios') {
+    return null;
+  }
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="slide"
+      onRequestClose={onClose}
+      testID={`${testID}-modal`}
+    >
+      <View style={modalStyles.overlay}>
+        <View style={modalStyles.container}>
+          {/* Header */}
+          <View style={modalStyles.header}>
+            <AtomicText style={modalStyles.title}>
+              {mode === 'date'
+                ? (titleText?.date || 'Select Date')
+                : mode === 'time'
+                  ? (titleText?.time || 'Select Time')
+                  : (titleText?.datetime || 'Select Date & Time')
+              }
+            </AtomicText>
+            <TouchableOpacity
+              onPress={onClose}
+              style={modalStyles.doneButton}
+              testID={`${testID}-done`}
+            >
+              <AtomicText style={modalStyles.doneButtonText}>{doneButtonText}</AtomicText>
+            </TouchableOpacity>
+          </View>
+
+          {/* Date Picker */}
+          <DateTimePicker
+            value={currentDate}
+            mode={mode}
+            onChange={onDateChange}
+            minimumDate={minimumDate}
+            maximumDate={maximumDate}
+            display="spinner"
+            style={{ alignSelf: 'center' }}
+            testID={`${testID}-picker`}
+          />
+        </View>
+      </View>
+    </Modal>
+  );
+};

package/src/atoms/fab/styles/fabStyles.ts

@@ -0,0 +1,98 @@
+/**
+ * FAB (Floating Action Button) Styles
+ *
+ * Material Design 3 compliant FAB sizing and styling
+ * Used by AtomicFab component
+ */
+
+import type { ViewStyle } from 'react-native';
+import type { FabSizeConfig, FabVariantConfig } from '../types';
+
+/**
+ * FAB size configurations based on Material Design 3
+ * - sm: Small FAB (40x40)
+ * - md: Regular FAB (56x56) - Default
+ * - lg: Large FAB (72x72)
+ */
+export const FAB_SIZES: Record<'sm' | 'md' | 'lg', FabSizeConfig> = {
+  sm: {
+    width: 40,
+    height: 40,
+    borderRadius: 12,
+  },
+  md: {
+    width: 56,
+    height: 56,
+    borderRadius: 16,
+  },
+  lg: {
+    width: 72,
+    height: 72,
+    borderRadius: 20,
+  },
+} as const;
+
+/**
+ * Get FAB variant configurations based on design tokens
+ * @param tokens - Design tokens from theme
+ * @returns Variant configurations for primary, secondary, and surface
+ */
+export function getFabVariants(tokens: {
+  colors: {
+    primary: string;
+    onPrimary: string;
+    secondary: string;
+    onSecondary: string;
+    surface: string;
+    onSurface: string;
+  };
+}): Record<'primary' | 'secondary' | 'surface', FabVariantConfig> {
+  return {
+    primary: {
+      backgroundColor: tokens.colors.primary,
+      iconColor: tokens.colors.onPrimary,
+    },
+    secondary: {
+      backgroundColor: tokens.colors.secondary,
+      iconColor: tokens.colors.onSecondary,
+    },
+    surface: {
+      backgroundColor: tokens.colors.surface,
+      iconColor: tokens.colors.onSurface,
+    },
+  };
+}
+
+/**
+ * Get icon size based on FAB size
+ * @param size - FAB size variant
+ * @returns Icon size in pixels
+ */
+export function getFabIconSize(size: 'sm' | 'md' | 'lg'): number {
+  switch (size) {
+    case 'sm':
+      return 20;
+    case 'md':
+      return 24;
+    case 'lg':
+      return 28;
+    default:
+      return 24;
+  }
+}
+
+/**
+ * Get FAB border style for depth (no shadows per CLAUDE.md)
+ * @param tokens - Design tokens from theme
+ * @returns Border style object
+ */
+export function getFabBorder(tokens: {
+  colors: {
+    border: string;
+  };
+}): ViewStyle {
+  return {
+    borderWidth: 1,
+    borderColor: tokens.colors.border,
+  };
+}