@umituz/react-native-design-system 1.0.0

package/src/presentation/atoms/AtomicCard.tsx

@@ -0,0 +1,112 @@
+import React from 'react';
+import { Card as PaperCard } from 'react-native-paper';
+import { StyleProp, ViewStyle } from 'react-native';
+import Animated, { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';
+import { Pressable } from 'react-native';
+
+export type AtomicCardVariant = 'flat' | 'elevated' | 'outlined';
+export type AtomicCardPadding = 'none' | 'sm' | 'md' | 'lg' | 'xl';
+
+export interface AtomicCardProps {
+  variant?: AtomicCardVariant;
+  padding?: AtomicCardPadding;
+  onPress?: () => void;
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+  children?: React.ReactNode;
+  testID?: string;
+}
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+export const AtomicCard: React.FC<AtomicCardProps> = ({
+  variant = 'elevated',
+  padding = 'md',
+  onPress,
+  disabled = false,
+  style,
+  children,
+  testID,
+}) => {
+  // Animation for tap feedback
+  const scale = useSharedValue(1);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: scale.value }],
+  }));
+
+  const handlePressIn = () => {
+    if (onPress && !disabled) {
+      scale.value = withSpring(0.98, {
+        damping: 15,
+        stiffness: 150,
+      });
+    }
+  };
+
+  const handlePressOut = () => {
+    scale.value = withSpring(1);
+  };
+
+  const handlePress = () => {
+    if (onPress && !disabled) {
+      onPress();
+    }
+  };
+
+  // Map variants to Paper modes
+  const getPaperMode = (): 'elevated' | 'outlined' | 'contained' => {
+    switch (variant) {
+      case 'elevated':
+        return 'elevated';
+      case 'outlined':
+        return 'outlined';
+      case 'flat':
+        return 'contained';
+      default:
+        return 'elevated';
+    }
+  };
+
+  // Map padding to actual values
+  const getContentStyle = () => {
+    const paddingMap = {
+      none: 0,
+      sm: 8,
+      md: 16,
+      lg: 24,
+      xl: 32,
+    };
+    const paddingValue = paddingMap[padding];
+    return { padding: paddingValue };
+  };
+
+  const cardContent = (
+    <PaperCard
+      mode={getPaperMode()}
+      style={style}
+      testID={testID}
+    >
+      <PaperCard.Content style={getContentStyle()}>
+        {children}
+      </PaperCard.Content>
+    </PaperCard>
+  );
+
+  // If onPress provided, wrap with animated pressable
+  if (onPress && !disabled) {
+    return (
+      <AnimatedPressable
+        style={animatedStyle}
+        onPressIn={handlePressIn}
+        onPressOut={handlePressOut}
+        onPress={handlePress}
+      >
+        {cardContent}
+      </AnimatedPressable>
+    );
+  }
+
+  // Otherwise just return static card
+  return cardContent;
+};

package/src/presentation/atoms/AtomicChip.tsx

@@ -0,0 +1,223 @@
+/**
+ * AtomicChip - Universal Chip/Tag Component
+ *
+ * Displays small tags, labels, or status indicators
+ * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
+ *
+ * Atomic Design Level: ATOM
+ * Purpose: Tag and label display
+ *
+ * Usage:
+ * - Category tags
+ * - Status indicators
+ * - Filter chips
+ * - Skill labels
+ * - Badge displays
+ */
+
+import React from 'react';
+import { View, StyleSheet, ViewStyle, TouchableOpacity } from 'react-native';
+import { AtomicText } from './AtomicText';
+import { AtomicIcon } from './AtomicIcon';
+import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
+
+// =============================================================================
+// TYPE DEFINITIONS
+// =============================================================================
+
+export interface AtomicChipProps {
+  /** Text content of the chip */
+  children: React.ReactNode;
+  /** Chip variant */
+  variant?: 'filled' | 'outlined' | 'soft';
+  /** Chip size */
+  size?: 'sm' | 'md' | 'lg';
+  /** Chip color theme */
+  color?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
+  /** Custom background color */
+  backgroundColor?: string;
+  /** Custom text color */
+  textColor?: string;
+  /** Custom border color */
+  borderColor?: string;
+  /** Leading icon */
+  leadingIcon?: string;
+  /** Trailing icon */
+  trailingIcon?: string;
+  /** Whether the chip is clickable */
+  clickable?: boolean;
+  /** Click handler */
+  onPress?: () => void;
+  /** Whether the chip is selected */
+  selected?: boolean;
+  /** Whether the chip is disabled */
+  disabled?: boolean;
+  /** Style overrides */
+  style?: ViewStyle;
+  /** Test ID for testing */
+  testID?: string;
+}
+
+// =============================================================================
+// COMPONENT IMPLEMENTATION
+// =============================================================================
+
+export const AtomicChip: React.FC<AtomicChipProps> = ({
+  children,
+  variant = 'filled',
+  size = 'md',
+  color = 'primary',
+  backgroundColor,
+  textColor,
+  borderColor,
+  leadingIcon,
+  trailingIcon,
+  clickable = false,
+  onPress,
+  selected = false,
+  disabled = false,
+  style,
+  testID,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  // Size mapping
+  const sizeMap = {
+    sm: { 
+      paddingHorizontal: tokens.spacing.sm, 
+      paddingVertical: tokens.spacing.xs, 
+      fontSize: tokens.typography.bodySmall.fontSize, 
+      iconSize: 'xs' as const 
+    },
+    md: { 
+      paddingHorizontal: tokens.spacing.md, 
+      paddingVertical: tokens.spacing.sm, 
+      fontSize: tokens.typography.bodyMedium.fontSize, 
+      iconSize: 'sm' as const 
+    },
+    lg: { 
+      paddingHorizontal: tokens.spacing.md, 
+      paddingVertical: tokens.spacing.sm, 
+      fontSize: tokens.typography.bodyLarge.fontSize, 
+      iconSize: 'sm' as const 
+    },
+  };
+
+  const sizeConfig = sizeMap[size];
+
+  // Color mapping
+  const colorMap = {
+    primary: {
+      filled: { bg: tokens.colors.primary, text: tokens.colors.onPrimary, border: tokens.colors.primary },
+      outlined: { bg: 'transparent', text: tokens.colors.primary, border: tokens.colors.primary },
+      soft: { bg: tokens.colors.primaryContainer, text: tokens.colors.onPrimaryContainer, border: 'transparent' },
+    },
+    secondary: {
+      filled: { bg: tokens.colors.secondary, text: tokens.colors.onSecondary, border: tokens.colors.secondary },
+      outlined: { bg: 'transparent', text: tokens.colors.secondary, border: tokens.colors.secondary },
+      soft: { bg: tokens.colors.secondaryContainer, text: tokens.colors.onSecondaryContainer, border: 'transparent' },
+    },
+    success: {
+      filled: { bg: tokens.colors.success, text: tokens.colors.onSuccess, border: tokens.colors.success },
+      outlined: { bg: 'transparent', text: tokens.colors.success, border: tokens.colors.success },
+      soft: { bg: tokens.colors.successContainer, text: tokens.colors.onSuccessContainer, border: 'transparent' },
+    },
+    warning: {
+      filled: { bg: tokens.colors.warning, text: tokens.colors.onWarning, border: tokens.colors.warning },
+      outlined: { bg: 'transparent', text: tokens.colors.warning, border: tokens.colors.warning },
+      soft: { bg: tokens.colors.warningContainer, text: tokens.colors.onWarningContainer, border: 'transparent' },
+    },
+    error: {
+      filled: { bg: tokens.colors.error, text: tokens.colors.onError, border: tokens.colors.error },
+      outlined: { bg: 'transparent', text: tokens.colors.error, border: tokens.colors.error },
+      soft: { bg: tokens.colors.errorContainer, text: tokens.colors.onErrorContainer, border: 'transparent' },
+    },
+    info: {
+      filled: { bg: tokens.colors.info, text: tokens.colors.onInfo, border: tokens.colors.info },
+      outlined: { bg: 'transparent', text: tokens.colors.info, border: tokens.colors.info },
+      soft: { bg: tokens.colors.infoContainer, text: tokens.colors.onInfoContainer, border: 'transparent' },
+    },
+  };
+
+  const colorConfig = colorMap[color][variant];
+
+  // Apply custom colors if provided
+  const finalBackgroundColor = backgroundColor || colorConfig.bg;
+  const finalTextColor = textColor || colorConfig.text;
+  const finalBorderColor = borderColor || colorConfig.border;
+
+  // Handle disabled state
+  const isDisabled = disabled || (!clickable && !onPress);
+  const opacity = isDisabled ? 0.5 : 1;
+
+  // Handle selected state
+  const selectedStyle = selected ? {
+    borderWidth: tokens.borders.width.medium,
+    borderColor: tokens.colors.primary,
+  } : {};
+
+  const chipStyle: ViewStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: sizeConfig.paddingHorizontal,
+    paddingVertical: sizeConfig.paddingVertical,
+    backgroundColor: finalBackgroundColor,
+    borderRadius: tokens.borders.radius.xl,
+    borderWidth: variant === 'outlined' ? 1 : 0,
+    borderColor: finalBorderColor,
+    opacity,
+    ...selectedStyle,
+  };
+
+  const textStyle = {
+    fontSize: sizeConfig.fontSize,
+    fontWeight: tokens.typography.medium,
+  };
+
+  const iconColor = finalTextColor;
+
+  const content = (
+    <View style={[chipStyle, style]} testID={testID}>
+      {leadingIcon && (
+        <AtomicIcon
+          name={leadingIcon}
+          size={sizeConfig.iconSize}
+          customColor={iconColor}
+          style={{ marginRight: tokens.spacing.xs }}
+        />
+      )}
+      <AtomicText
+        type="labelMedium"
+        color={finalTextColor}
+        style={textStyle}
+      >
+        {children}
+      </AtomicText>
+      {trailingIcon && (
+        <AtomicIcon
+          name={trailingIcon}
+          size={sizeConfig.iconSize}
+          customColor={iconColor}
+          style={{ marginLeft: tokens.spacing.xs }}
+        />
+      )}
+    </View>
+  );
+
+  if (clickable && onPress && !disabled) {
+    return (
+      <TouchableOpacity onPress={onPress} activeOpacity={0.7}>
+        {content}
+      </TouchableOpacity>
+    );
+  }
+
+  return content;
+};
+
+// =============================================================================
+// EXPORTS
+// =============================================================================
+
+export default AtomicChip;

package/src/presentation/atoms/AtomicDatePicker.tsx

@@ -0,0 +1,347 @@
+/**
+ * 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 (via timezone domain)
+ * - Timezone-aware (respects device timezone)
+ * - Automatic language integration (changes with app language)
+ * - 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 { useTimezone } from '@domains/timezone';
+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 { formatDate: formatDateTz, formatTime } = useTimezone();
+  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 timezone domain for locale-aware and timezone-aware formatting
+   * Automatically respects user's selected language and device timezone
+   */
+  const formatDate = (date: Date): string => {
+    if (mode === 'time') {
+      // Format time only (e.g., "02:30 PM" in English, "14:30" in Turkish)
+      return formatTime(date);
+    }
+    if (mode === 'datetime') {
+      // Format date + time (e.g., "January 15, 2024 02:30 PM")
+      const dateStr = formatDateTz(date, {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+      });
+      const timeStr = formatTime(date);
+      return `${dateStr} ${timeStr}`;
+    }
+    // Format date only (e.g., "January 15, 2024" in English, "15 Ocak 2024" in Turkish)
+    return formatDateTz(date);
+  };
+
+  /**
+   * 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,
+    },
+  });
+};