@umituz/react-native-design-system 1.7.1 → 1.7.3

package/src/presentation/atoms/AtomicDatePicker.tsx

@@ -1,354 +0,0 @@
-/**
- * AtomicDatePicker Component
- *
- * A reusable date picker component that wraps the native date picker
- * with consistent styling and behavior across platforms.
- *
- * Features:
- * - Platform-specific native pickers (iOS wheel, Android dialog)
- * - Consistent styling with design tokens
- * - Locale-aware date/time formatting (native Date methods)
- * - Timezone-aware (respects device timezone)
- * - Automatic language integration (native locale support)
- * - Optional label and error states
- * - Minimum and maximum date constraints
- * - Disabled state support
- * - Theme-aware styling
- * - Proper keyboard avoidance on iOS
- *
- * Usage:
- * ```tsx
- * const [selectedDate, setSelectedDate] = useState(new Date());
- *
- * <AtomicDatePicker
- *   value={selectedDate}
- *   onChange={setSelectedDate}
- *   label="Birth Date"
- *   minimumDate={new Date(1900, 0, 1)}
- *   maximumDate={new Date()}
- * />
- * ```
- *
- * Platform Behavior:
- * - iOS: Opens modal with spinner wheel, requires "Done" button
- * - Android: Opens native dialog, auto-closes on selection
- *
- * @module AtomicDatePicker
- */
-
-import React, { useState } from 'react';
-import {
-  View,
-  Text,
-  TouchableOpacity,
-  StyleSheet,
-  Modal,
-  useWindowDimensions,
-} from 'react-native';
-import DateTimePicker, { DateTimePickerEvent } from '@react-native-community/datetimepicker';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
-import { useResponsive } from '../hooks/useResponsive';
-import { AtomicIcon, type AtomicIconColor } from './AtomicIcon';
-
-/**
- * Props for AtomicDatePicker component
- */
-export interface AtomicDatePickerProps {
-  /** Selected date value */
-  value: Date;
-  /** Callback when date changes */
-  onChange: (date: Date) => void;
-  /** Optional label displayed above picker */
-  label?: string;
-  /** Optional error message displayed below picker */
-  error?: string;
-  /** Disable picker interaction */
-  disabled?: boolean;
-  /** Minimum selectable date */
-  minimumDate?: Date;
-  /** Maximum selectable date */
-  maximumDate?: Date;
-  /** Picker mode - date, time, or datetime (iOS only) */
-  mode?: 'date' | 'time' | 'datetime';
-  /** Placeholder text when no value selected */
-  placeholder?: string;
-  /** Optional test ID for E2E testing */
-  testID?: string;
-}
-
-/**
- * AtomicDatePicker - Universal date/time picker component
- *
- * Wraps @react-native-community/datetimepicker with:
- * - Theme integration
- * - Platform-specific modal handling
- * - Error states
- * - Disabled states
- * - Responsive sizing
- */
-export const AtomicDatePicker: React.FC<AtomicDatePickerProps> = ({
-  value,
-  onChange,
-  label,
-  error,
-  disabled = false,
-  minimumDate,
-  maximumDate,
-  mode = 'date',
-  placeholder = 'Select date',
-  testID,
-}) => {
-  const tokens = useAppDesignTokens();
-  const { height } = useWindowDimensions();
-  const insets = useSafeAreaInsets();
-  const { isTabletDevice } = useResponsive();
-  const [show, setShow] = useState(false);
-
-  /**
-   * Handle date/time change
-   * Universal handler that works across all platforms
-   * Note: event.type can be 'set', 'dismissed', or 'neutralButtonPressed'
-   */
-  const handleChange = (event: DateTimePickerEvent, selectedDate?: Date) => {
-    // Close picker when user confirms or dismisses
-    // iOS: Stays open until "Done" button (handled separately)
-    // Android/Web: Auto-closes on selection
-    if (event.type === 'set' || event.type === 'dismissed') {
-      setShow(false);
-    }
-
-    // Update value only if date was selected (not dismissed)
-    if (event.type === 'set' && selectedDate) {
-      onChange(selectedDate);
-    }
-  };
-
-  /**
-   * Format date based on mode
-   * Uses native Date formatting (locale-aware)
-   */
-  const formatDate = (date: Date): string => {
-    if (mode === 'time') {
-      // Format time only
-      return date.toLocaleTimeString([], {
-        hour: '2-digit',
-        minute: '2-digit'
-      });
-    }
-    if (mode === 'datetime') {
-      // Format date + time
-      const dateStr = date.toLocaleDateString([], {
-        year: 'numeric',
-        month: 'short',
-        day: 'numeric',
-      });
-      const timeStr = date.toLocaleTimeString([], {
-        hour: '2-digit',
-        minute: '2-digit'
-      });
-      return `${dateStr} ${timeStr}`;
-    }
-    // Format date only
-    return date.toLocaleDateString([], {
-      year: 'numeric',
-      month: 'long',
-      day: 'numeric',
-    });
-  };
-
-  /**
-   * Determine icon color based on state
-   */
-  const getIconColor = (): AtomicIconColor => {
-    if (disabled) return 'secondary';
-    if (error) return 'error';
-    return 'primary';
-  };
-
-  const styles = getStyles(tokens, height, insets);
-
-  return (
-    <View style={styles.container} testID={testID}>
-      {label && (
-        <Text style={styles.label} testID={testID ? `${testID}-label` : undefined}>
-          {label}
-        </Text>
-      )}
-
-      <TouchableOpacity
-        style={[
-          styles.button,
-          error ? styles.buttonError : undefined,
-          disabled ? styles.buttonDisabled : undefined,
-        ]}
-        onPress={() => !disabled && setShow(true)}
-        disabled={disabled}
-        testID={testID ? `${testID}-button` : undefined}
-        accessibilityLabel={label || placeholder}
-        accessibilityRole="button"
-        accessibilityState={{ disabled }}
-      >
-        <AtomicIcon
-          name="calendar"
-          color={getIconColor()}
-          size="md"
-        />
-        <Text
-          style={[
-            styles.text,
-            disabled ? styles.textDisabled : undefined,
-            error ? styles.textError : undefined,
-          ]}
-        >
-          {value ? formatDate(value) : placeholder}
-        </Text>
-      </TouchableOpacity>
-
-      {error && (
-        <Text style={styles.errorText} testID={testID ? `${testID}-error` : undefined}>
-          {error}
-        </Text>
-      )}
-
-      {/* Universal DatePicker - Works across iOS, Android, Web */}
-      {show && (
-        <Modal
-          transparent
-          animationType={isTabletDevice ? 'fade' : 'slide'}
-          visible={show}
-          onRequestClose={() => setShow(false)}
-        >
-          <TouchableOpacity
-            style={styles.modalOverlay}
-            activeOpacity={1}
-            onPress={() => setShow(false)}
-            accessibilityLabel="Close date picker"
-            accessibilityRole="button"
-          >
-            <View
-              style={styles.pickerContainer}
-              onStartShouldSetResponder={() => true}
-            >
-              <DateTimePicker
-                value={value || new Date()}
-                mode={mode}
-                display="spinner"
-                onChange={handleChange}
-                minimumDate={minimumDate}
-                maximumDate={maximumDate}
-                testID={testID ? `${testID}-picker` : undefined}
-              />
-              <View style={styles.buttonContainer}>
-                <TouchableOpacity
-                  style={styles.doneButton}
-                  onPress={() => setShow(false)}
-                  testID={testID ? `${testID}-done` : undefined}
-                  accessibilityLabel="Done"
-                  accessibilityRole="button"
-                >
-                  <Text style={styles.doneText}>Done</Text>
-                </TouchableOpacity>
-              </View>
-            </View>
-          </TouchableOpacity>
-        </Modal>
-      )}
-    </View>
-  );
-};
-
-/**
- * Get component styles based on design tokens
- */
-const getStyles = (
-  tokens: ReturnType<typeof useAppDesignTokens>,
-  height: number,
-  insets: { top: number; bottom: number; left: number; right: number },
-) => {
-  // Responsive button sizing based on device height
-  const buttonMinWidth = height <= 667 ? Math.min(height * 0.25, 150) : 200;
-
-  return StyleSheet.create({
-    container: {
-      marginBottom: tokens.spacing.md,
-    },
-    label: {
-      fontSize: tokens.typography.bodyMedium.fontSize,
-      fontWeight: tokens.typography.semibold,
-      color: tokens.colors.textPrimary,
-      marginBottom: tokens.spacing.sm,
-    },
-    button: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      backgroundColor: tokens.colors.surface,
-      borderWidth: 1,
-      borderColor: tokens.colors.border,
-      borderRadius: tokens.borders.radius.lg,
-      paddingHorizontal: tokens.spacing.md,
-      paddingVertical: tokens.spacing.md,
-      gap: tokens.spacing.sm,
-      minHeight: 48, // Apple HIG minimum touch target
-    },
-    buttonError: {
-      borderColor: tokens.colors.error,
-      borderWidth: tokens.borders.width.medium,
-    },
-    buttonDisabled: {
-      backgroundColor: tokens.colors.surfaceDisabled,
-      opacity: tokens.opacity.disabled,
-    },
-    text: {
-      flex: 1,
-      fontSize: tokens.typography.bodyLarge.fontSize,
-      color: tokens.colors.textPrimary,
-    },
-    textDisabled: {
-      color: tokens.colors.textDisabled,
-    },
-    textError: {
-      color: tokens.colors.error,
-    },
-    errorText: {
-      fontSize: tokens.typography.bodySmall.fontSize,
-      color: tokens.colors.error,
-      marginTop: tokens.spacing.xs,
-      marginLeft: tokens.spacing.xs,
-    },
-    modalOverlay: {
-      flex: 1,
-      backgroundColor: 'rgba(0, 0, 0, 0.5)',
-      justifyContent: 'flex-start',
-    },
-    pickerContainer: {
-      backgroundColor: tokens.colors.surface,
-      borderTopLeftRadius: tokens.borders.radius.xl,
-      borderTopRightRadius: tokens.borders.radius.xl,
-      paddingTop: tokens.spacing.lg,
-      paddingBottom: Math.max(
-        insets.bottom + tokens.spacing.md,
-        tokens.spacing.xl,
-      ),
-    },
-    buttonContainer: {
-      alignItems: 'center',
-      marginTop: tokens.spacing.md,
-      paddingHorizontal: tokens.spacing.lg,
-    },
-    doneButton: {
-      backgroundColor: tokens.colors.primary,
-      paddingHorizontal: tokens.spacing.xl,
-      paddingVertical: tokens.spacing.sm,
-      borderRadius: tokens.borders.radius.lg,
-      minWidth: buttonMinWidth,
-      alignItems: 'center',
-      minHeight: 44, // Apple HIG minimum touch target
-    },
-    doneText: {
-      color: tokens.colors.onPrimary,
-      fontSize: tokens.typography.bodyLarge.fontSize,
-      fontWeight: tokens.typography.semibold,
-    },
-  });
-};

package/src/presentation/atoms/AtomicDivider.tsx

@@ -1,114 +0,0 @@
-/**
- * AtomicDivider - Universal Divider Component
- *
- * Displays horizontal or vertical dividers for content separation
- * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
- *
- * Atomic Design Level: ATOM
- * Purpose: Content separation and visual hierarchy
- *
- * Usage:
- * - Section separators
- * - List item dividers
- * - Card separators
- * - Menu dividers
- * - Form field separators
- */
-
-import React from 'react';
-import { View, StyleSheet, ViewStyle } from 'react-native';
-import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
-
-// =============================================================================
-// TYPE DEFINITIONS
-// =============================================================================
-
-export interface AtomicDividerProps {
-  /** Divider orientation */
-  orientation?: 'horizontal' | 'vertical';
-  /** Divider thickness */
-  thickness?: 'thin' | 'medium' | 'thick';
-  /** Divider color */
-  color?: string;
-  /** Divider length (for horizontal: width, for vertical: height) */
-  length?: number | string;
-  /** Margin around the divider */
-  margin?: number;
-  /** Margin top */
-  marginTop?: number;
-  /** Margin bottom */
-  marginBottom?: number;
-  /** Margin left */
-  marginLeft?: number;
-  /** Margin right */
-  marginRight?: number;
-  /** Style overrides */
-  style?: ViewStyle;
-  /** Test ID for testing */
-  testID?: string;
-}
-
-// =============================================================================
-// COMPONENT IMPLEMENTATION
-// =============================================================================
-
-export const AtomicDivider: React.FC<AtomicDividerProps> = ({
-  orientation = 'horizontal',
-  thickness = 'thin',
-  color,
-  length,
-  margin,
-  marginTop,
-  marginBottom,
-  marginLeft,
-  marginRight,
-  style,
-  testID,
-}) => {
-  const tokens = useAppDesignTokens();
-
-  // Thickness mapping
-  const thicknessMap = {
-    thin: 1,
-    medium: 2,
-    thick: 4,
-  };
-
-  const dividerThickness = thicknessMap[thickness];
-  const dividerColor = color || tokens.colors.border;
-
-  // Compute final length values with proper type handling
-  const finalLength = length !== undefined ? length : (orientation === 'horizontal' ? '100%' : 20);
-
-  // Base styles for all dividers
-  const baseStyle: ViewStyle = {
-    backgroundColor: dividerColor,
-    margin: margin,
-    marginTop: marginTop,
-    marginBottom: marginBottom,
-    marginLeft: marginLeft,
-    marginRight: marginRight,
-  };
-
-  // Orientation-specific styles with explicit type casting
-  const orientationStyle: ViewStyle = (orientation === 'horizontal' ? {
-    width: finalLength as ViewStyle['width'],
-    height: dividerThickness,
-  } : {
-    width: dividerThickness,
-    height: finalLength as ViewStyle['height'],
-  }) as ViewStyle;
-
-  return (
-    <View
-      style={[baseStyle, orientationStyle, style]}
-      testID={testID}
-    />
-  );
-};
-
-// =============================================================================
-// EXPORTS
-// =============================================================================
-
-export default AtomicDivider;

package/src/presentation/atoms/AtomicFab.tsx

@@ -1,98 +0,0 @@
-import React from 'react';
-import { TouchableOpacity, StyleSheet } from 'react-native';
-import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
-import { useResponsive } from '../hooks/useResponsive';
-import { AtomicIcon } from './AtomicIcon';
-import { AtomicFabProps } from './fab/types';
-import {
-  FAB_SIZES,
-  getFabVariants,
-  getFabIconSize,
-  getFabBorder,
-} from './fab/styles/fabStyles';
-
-export type { FabSize, FabVariant, FabVariantConfig, FabSizeConfig, AtomicFabProps } from './fab/types';
-export { FAB_SIZES, getFabVariants, getFabIconSize, getFabBorder };
-
-/**
- * AtomicFab - Floating Action Button Component
- *
- * A Material Design 3 compliant FAB component for primary actions.
- * Follows CLAUDE.md standards for responsive positioning.
- *
- * @example
- * ```tsx
- * // IMPORTANT: FAB must be used at screen level, NOT inside ScrollView
- * <ScreenLayout>
- *   <ScrollView>
- *     {/* Your content *\/}
- *   </ScrollView>
- *   <AtomicFab
- *     icon="add"
- *     onPress={handleAddItem}
- *     variant="primary"
- *     size="md"
- *   />
- * </ScreenLayout>
- * ```
- *
- * Features:
- * - Material Design 3 sizes (sm: 40px, md: 56px, lg: 72px)
- * - Three variants: primary, secondary, surface
- * - Responsive positioning (above tab bar, safe area aware)
- * - Disabled state with opacity
- * - Theme-aware colors from design tokens
- * - Border for depth (no shadows per CLAUDE.md)
- */
-export const AtomicFab: React.FC<AtomicFabProps> = ({
-  icon,
-  onPress,
-  variant = 'primary',
-  size = 'md',
-  disabled = false,
-  style,
-  testID,
-  accessibilityLabel,
-}) => {
-  const tokens = useAppDesignTokens();
-  const responsive = useResponsive();
-  const isDisabled = disabled;
-
-  // Get configurations
-  const sizeConfig = FAB_SIZES[size as 'sm' | 'md' | 'lg'];
-  const variants = getFabVariants(tokens);
-  const variantConfig = variants[variant as 'primary' | 'secondary' | 'surface'];
-  const iconSize = getFabIconSize(size as 'sm' | 'md' | 'lg');
-
-  // Combine styles
-  const fabStyle = StyleSheet.flatten([
-    {
-      position: 'absolute' as const,
-      bottom: responsive.fabPosition.bottom,
-      right: responsive.fabPosition.right,
-      width: sizeConfig.width,
-      height: sizeConfig.height,
-      borderRadius: sizeConfig.borderRadius,
-      backgroundColor: variantConfig.backgroundColor,
-      alignItems: 'center' as const,
-      justifyContent: 'center' as const,
-    },
-    getFabBorder(tokens),
-    isDisabled ? { opacity: tokens.opacity.disabled } : undefined,
-    style, // Custom style override
-  ]);
-
-  return (
-    <TouchableOpacity
-      style={fabStyle}
-      onPress={onPress}
-      disabled={isDisabled}
-      activeOpacity={0.7}
-      testID={testID}
-      accessibilityLabel={accessibilityLabel || `${icon} button`}
-      accessibilityRole="button"
-    >
-      <AtomicIcon name={icon} size={iconSize} customColor={variantConfig.iconColor} />
-    </TouchableOpacity>
-  );
-};