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

package/src/atoms/AtomicChip.tsx

@@ -0,0 +1,226 @@
+/**
+ * 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 '../theme';
+
+// =============================================================================
+// 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;
+  /** Active opacity for touch feedback */
+  activeOpacity?: number;
+}
+
+// =============================================================================
+// COMPONENT IMPLEMENTATION
+// =============================================================================
+
+export const AtomicChip: React.FC<AtomicChipProps> = React.memo(({
+  children,
+  variant = 'filled',
+  size = 'md',
+  color = 'primary',
+  backgroundColor,
+  textColor,
+  borderColor,
+  leadingIcon,
+  trailingIcon,
+  clickable = false,
+  onPress,
+  selected = false,
+  disabled = false,
+  style,
+  testID,
+  activeOpacity = 0.7,
+}) => {
+  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={activeOpacity}>
+        {content}
+      </TouchableOpacity>
+    );
+  }
+
+  return content;
+});
+
+// =============================================================================
+// EXPORTS
+// =============================================================================
+
+export default AtomicChip;

package/src/atoms/AtomicDatePicker.tsx

@@ -0,0 +1,255 @@
+/**
+ * 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:
+ * - Opens bottom sheet from bottom with spinner wheel
+ * - Requires "Done" button to confirm selection
+ * - Can be dismissed by swiping down or tapping backdrop
+ *
+ * @module AtomicDatePicker
+ */
+
+import React, { useState, useMemo } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  Platform,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import DateTimePicker, { DateTimePickerEvent } from '@react-native-community/datetimepicker';
+import { useAppDesignTokens } from '../theme';
+import { AtomicText } from './AtomicText';
+import { DatePickerModal } from './datepicker/components/DatePickerModal';
+import { DatePickerButton } from './datepicker/components/DatePickerButton';
+
+/**
+ * Props for AtomicDatePicker component
+ */
+export interface AtomicDatePickerProps {
+  /** Selected date value */
+  value: Date | null;
+  /** 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;
+  /** Optional container style */
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * 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,
+  style,
+}) => {
+  const tokens = useAppDesignTokens();
+  const [showPicker, setShowPicker] = useState(false);
+
+  /**
+   * Handle date/time change in picker
+   * On Android, directly apply the change. On iOS, show picker in modal and apply on confirm.
+   */
+  const handleChange = (event: DateTimePickerEvent, selectedDate?: Date) => {
+    if (Platform.OS === 'android') {
+      setShowPicker(false);
+      if (event.type === 'set' && selectedDate) {
+        onChange(selectedDate);
+      }
+    } else {
+      // iOS: Update value while picker is open
+      if (event.type === 'set' && selectedDate) {
+        onChange(selectedDate);
+      }
+      // iOS: Close on dismiss (swipe down)
+      if (event.type === 'dismissed') {
+        setShowPicker(false);
+      }
+    }
+  };
+
+  /**
+   * Handle open - show native picker
+   */
+  const handleOpen = () => {
+    if (Platform.OS === 'android') {
+      setShowPicker(true);
+    } else {
+      // iOS: Show picker inline
+      setShowPicker(true);
+    }
+  };
+
+  /**
+   * Format date based on mode
+   * Uses native Date formatting (locale-aware)
+   */
+  const formatDate = useMemo(() => (date: Date): string => {
+    if (mode === 'time') {
+      return date.toLocaleTimeString([], {
+        hour: '2-digit',
+        minute: '2-digit'
+      });
+    }
+    if (mode === 'datetime') {
+      const dateStr = date.toLocaleDateString([], {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+      });
+      const timeStr = date.toLocaleTimeString([], {
+        hour: '2-digit',
+        minute: '2-digit'
+      });
+      return `${dateStr} ${timeStr}`;
+    }
+    return date.toLocaleDateString([], {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+    });
+  }, [mode]);
+
+  /**
+   * Get display text for the button
+   */
+  const displayText = useMemo(() => {
+    if (!value) return placeholder;
+    return formatDate(value);
+  }, [value, placeholder, formatDate]);
+
+  const styles = getStyles(tokens);
+
+  return (
+    <View style={[styles.container, style]} testID={testID}>
+      {label && (
+        <AtomicText style={styles.label} testID={testID ? `${testID}-label` : undefined}>
+          {label}
+        </AtomicText>
+      )}
+
+      <DatePickerButton
+        onPress={handleOpen}
+        disabled={disabled}
+        displayText={displayText}
+        hasValue={!!value}
+        error={!!error}
+        testID={testID ? `${testID}-button` : undefined}
+      />
+
+      {error && (
+        <AtomicText style={styles.errorText} testID={testID ? `${testID}-error` : undefined}>
+          {error}
+        </AtomicText>
+      )}
+
+      {/* iOS Modal */}
+      <DatePickerModal
+        visible={Platform.OS === 'ios' && showPicker}
+        onClose={() => setShowPicker(false)}
+        onDateChange={handleChange}
+        currentDate={value ?? new Date()}
+        mode={mode}
+        minimumDate={minimumDate}
+        maximumDate={maximumDate}
+        testID={testID}
+      />
+
+      {/* Android Picker */}
+      {Platform.OS === 'android' && showPicker && (
+        <DateTimePicker
+          value={value ?? new Date()}
+          mode={mode}
+          display="default"
+          onChange={handleChange}
+          minimumDate={minimumDate}
+          maximumDate={maximumDate}
+          testID={testID ? `${testID}-picker` : undefined}
+        />
+      )}
+    </View>
+  );
+};
+
+/**
+ * Get component styles based on design tokens
+ */
+const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) => {
+  return StyleSheet.create({
+    container: {
+      marginBottom: tokens.spacing.md,
+    },
+    label: {
+      fontSize: tokens.typography.bodyMedium.fontSize,
+      fontWeight: tokens.typography.semibold,
+      color: tokens.colors.onSurface,
+      marginBottom: tokens.spacing.sm,
+    },
+    errorText: {
+      fontSize: tokens.typography.bodySmall.fontSize,
+      color: tokens.colors.error,
+      marginTop: tokens.spacing.xs,
+      marginLeft: tokens.spacing.xs,
+    },
+  });
+};

package/src/atoms/AtomicFab.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import { TouchableOpacity, StyleSheet } from 'react-native';
+import { useAppDesignTokens } from '../theme';
+import { useResponsive } from '../responsive';
+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,
+  activeOpacity = 0.7,
+}) => {
+  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={activeOpacity}
+      testID={testID}
+      accessibilityLabel={accessibilityLabel || `${icon} floating action button`}
+      accessibilityRole="button"
+    >
+      <AtomicIcon name={icon} size={iconSize} customColor={variantConfig.iconColor} />
+    </TouchableOpacity>
+  );
+};