@umituz/react-native-design-system 1.0.0

package/src/presentation/atoms/AtomicDivider.tsx

@@ -0,0 +1,114 @@
+/**
+ * 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

@@ -0,0 +1,104 @@
+import React from 'react';
+import { TouchableOpacity, ActivityIndicator, 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)
+ * - Loading state with spinner
+ * - 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,
+  loading = false,
+  style,
+  testID,
+  accessibilityLabel,
+}) => {
+  const tokens = useAppDesignTokens();
+  const responsive = useResponsive();
+  const isDisabled = disabled || loading;
+
+  // Get configurations
+  const sizeConfig = FAB_SIZES[size];
+  const variants = getFabVariants(tokens);
+  const variantConfig = variants[variant];
+  const iconSize = getFabIconSize(size);
+
+  // 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"
+    >
+      {loading ? (
+        <ActivityIndicator size="small" color={variantConfig.iconColor} />
+      ) : (
+        <AtomicIcon name={icon} size={iconSize} customColor={variantConfig.iconColor} />
+      )}
+    </TouchableOpacity>
+  );
+};

package/src/presentation/atoms/AtomicFilter.tsx

@@ -0,0 +1,154 @@
+import React from 'react';
+import { ScrollView, View, TouchableOpacity, ViewStyle } from 'react-native';
+import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
+import { AtomicChip } from './AtomicChip';
+import { AtomicText } from './AtomicText';
+import { AtomicIcon } from './AtomicIcon';
+import { AtomicFilterProps, FilterOption } from './filter/types';
+import {
+  getFilterContainerStyle,
+  getClearAllContainerStyle,
+  getScrollContentContainerStyle,
+} from './filter/styles/filterStyles';
+
+export type { FilterOption, AtomicFilterProps } from './filter/types';
+export {
+  getFilterContainerStyle,
+  getClearAllContainerStyle,
+  getScrollContentContainerStyle,
+} from './filter/styles/filterStyles';
+
+/**
+ * AtomicFilter - Horizontal Filter Chip Component
+ *
+ * A Material Design 3 compliant filter component using chip selection.
+ * Supports single and multi-select modes with "Clear All" functionality.
+ *
+ * @example
+ * ```tsx
+ * const [selectedFilters, setSelectedFilters] = useState<string[]>([]);
+ *
+ * <AtomicFilter
+ *   options={[
+ *     { id: 'active', label: 'Active', icon: 'check-circle' },
+ *     { id: 'completed', label: 'Completed', icon: 'check' },
+ *     { id: 'pending', label: 'Pending', icon: 'clock' },
+ *   ]}
+ *   selectedIds={selectedFilters}
+ *   onSelectionChange={setSelectedFilters}
+ *   multiSelect={true}
+ *   showClearAll={true}
+ * />
+ * ```
+ *
+ * Features:
+ * - Horizontal scrollable filter chips
+ * - Single/Multi-select modes
+ * - Clear all button (when filters active)
+ * - Theme-aware colors from design tokens
+ * - Icon support per filter option
+ * - Fully controlled component
+ */
+export const AtomicFilter: React.FC<AtomicFilterProps> = ({
+  options,
+  selectedIds,
+  onSelectionChange,
+  multiSelect = true,
+  showClearAll = true,
+  variant = 'outlined',
+  color = 'primary',
+  size = 'md',
+  style,
+  testID,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  /**
+   * Handle filter chip press
+   */
+  const handleFilterPress = (optionId: string) => {
+    if (multiSelect) {
+      // Multi-select mode: Toggle selection
+      if (selectedIds.includes(optionId)) {
+        // Deselect
+        onSelectionChange(selectedIds.filter(id => id !== optionId));
+      } else {
+        // Select
+        onSelectionChange([...selectedIds, optionId]);
+      }
+    } else {
+      // Single-select mode: Replace selection
+      if (selectedIds.includes(optionId)) {
+        // Deselect (clear selection)
+        onSelectionChange([]);
+      } else {
+        // Select (only this one)
+        onSelectionChange([optionId]);
+      }
+    }
+  };
+
+  /**
+   * Handle clear all button press
+   */
+  const handleClearAll = () => {
+    onSelectionChange([]);
+  };
+
+  const hasActiveFilters = selectedIds.length > 0;
+
+  return (
+    <ScrollView
+      horizontal
+      showsHorizontalScrollIndicator={false}
+      contentContainerStyle={getScrollContentContainerStyle()}
+      style={[style]}
+      testID={testID}
+    >
+      <View style={getFilterContainerStyle()}>
+        {options.map((option) => {
+          const isSelected = selectedIds.includes(option.id);
+
+          return (
+            <AtomicChip
+              key={option.id}
+              variant={isSelected ? 'filled' : variant}
+              color={color}
+              size={size}
+              leadingIcon={option.icon}
+              selected={isSelected}
+              clickable={true}
+              onPress={() => handleFilterPress(option.id)}
+              testID={`filter-chip-${option.id}`}
+            >
+              {option.label}
+            </AtomicChip>
+          );
+        })}
+
+        {/* Clear All Button */}
+        {showClearAll && hasActiveFilters && (
+          <TouchableOpacity
+            onPress={handleClearAll}
+            style={[
+              getClearAllContainerStyle(),
+              {
+                backgroundColor: tokens.colors.surfaceVariant,
+                borderWidth: 1,
+                borderColor: tokens.colors.outline,
+              }
+            ]}
+            testID="clear-all-button"
+          >
+            <View style={{ flexDirection: 'row', alignItems: 'center', gap: tokens.spacing.xs }}>
+              <AtomicIcon name="X" size="xs" color="surfaceVariant" />
+              <AtomicText type="labelSmall" style={{ color: tokens.colors.textSecondary }}>
+                Clear All
+              </AtomicText>
+            </View>
+          </TouchableOpacity>
+        )}
+      </View>
+    </ScrollView>
+  );
+};

package/src/presentation/atoms/AtomicFormError.tsx

@@ -0,0 +1,105 @@
+/**
+ * AtomicFormError - Universal Form Error Component
+ *
+ * Provides consistent error message display for forms
+ * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
+ *
+ * Atomic Design Level: ATOM
+ * Purpose: Display validation error messages
+ *
+ * Usage:
+ * - Form field validation errors
+ * - Global form error messages
+ * - API error display
+ * - Input validation feedback
+ */
+
+import React from 'react';
+import { View, StyleSheet, StyleProp, ViewStyle, TextStyle } from 'react-native';
+import { AtomicText } from './AtomicText';
+import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
+import { withAlpha } from '../tokens/AppDesignTokens';
+
+// =============================================================================
+// TYPE DEFINITIONS
+// =============================================================================
+
+export interface AtomicFormErrorProps {
+  /** Error message to display */
+  message: string | null | undefined;
+  /** Error display variant */
+  variant?: 'global' | 'field';
+  /** Custom container style */
+  style?: StyleProp<ViewStyle>;
+  /** Custom text style */
+  textStyle?: StyleProp<TextStyle>;
+}
+
+// =============================================================================
+// COMPONENT IMPLEMENTATION
+// =============================================================================
+
+export const AtomicFormError: React.FC<AtomicFormErrorProps> = ({
+  message,
+  variant = 'field',
+  style,
+  textStyle,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  if (!message) {
+    return null;
+  }
+
+  if (variant === 'global') {
+    return (
+      <View
+        style={[
+          {
+            padding: tokens.spacing.md,
+            borderRadius: tokens.borders.radius.md,
+            marginBottom: tokens.spacing.sm,
+            backgroundColor: withAlpha(tokens.colors.error, 0.15),
+          },
+          style,
+        ]}
+      >
+        <AtomicText
+          type="bodySmall"
+          color="error"
+          style={StyleSheet.flatten([
+            {
+              textAlign: 'center',
+              fontWeight: tokens.typography.medium,
+            },
+            textStyle,
+          ])}
+        >
+          {message}
+        </AtomicText>
+      </View>
+    );
+  }
+
+  return (
+    <AtomicText
+      type="bodySmall"
+      color="error"
+      style={StyleSheet.flatten([
+        {
+          marginTop: tokens.spacing.xs,
+          marginLeft: tokens.spacing.xs,
+        },
+        textStyle,
+      ])}
+    >
+      {message}
+    </AtomicText>
+  );
+};
+
+// =============================================================================
+// EXPORTS
+// =============================================================================
+
+export default AtomicFormError;

package/src/presentation/atoms/AtomicIcon.tsx

@@ -0,0 +1,29 @@
+/**
+ * AtomicIcon - Design System Icon Component
+ *
+ * Simple wrapper around Icon domain for backward compatibility.
+ * All icon functionality is provided by @domains/icons.
+ *
+ * @deprecated Use Icon from @domains/icons directly in new code
+ */
+
+import React from 'react';
+import { Icon, type IconProps } from '@domains/icons';
+
+/**
+ * AtomicIcon Component (Wrapper)
+ *
+ * This is a simple wrapper around Icon from @domains/icons.
+ * It exists for backward compatibility with existing code.
+ *
+ * For new code, import Icon directly from @domains/icons
+ */
+export const AtomicIcon: React.FC<IconProps> = (props) => {
+  return <Icon {...props} />;
+};
+
+// Re-export types for backward compatibility
+export type { IconProps as AtomicIconProps } from '@domains/icons';
+export type { IconSize as AtomicIconSize } from '@domains/icons';
+export type { IconColor as AtomicIconColor } from '@domains/icons';
+export type { IconName as AtomicIconName } from '@domains/icons';

package/src/presentation/atoms/AtomicImage.tsx

@@ -0,0 +1,149 @@
+/**
+ * AtomicImage - Universal Image Component
+ *
+ * Provides consistent image handling across the app with theme integration
+ * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
+ *
+ * Atomic Design Level: ATOM
+ * Purpose: Basic image display with consistent styling
+ *
+ * Usage:
+ * - Profile pictures
+ * - Product images
+ * - Icons and illustrations
+ * - Background images
+ */
+
+import React from 'react';
+import { Image, ImageProps, StyleSheet, ViewStyle } from 'react-native';
+import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
+
+// =============================================================================
+// TYPE DEFINITIONS
+// =============================================================================
+
+export interface AtomicImageProps extends Omit<ImageProps, 'style'> {
+  /** Image source */
+  source: ImageProps['source'];
+  /** Size variant */
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+  /** Shape variant */
+  shape?: 'square' | 'circle' | 'rounded';
+  /** Border radius override */
+  borderRadius?: number;
+  /** Container style override */
+  style?: ViewStyle | ViewStyle[];
+  /** Image style override */
+  imageStyle?: ImageProps['style'];
+  /** Background color */
+  backgroundColor?: string;
+  /** Border color */
+  borderColor?: string;
+  /** Border width */
+  borderWidth?: number;
+}
+
+// =============================================================================
+// SIZE CONFIGURATION
+// =============================================================================
+
+const SIZE_CONFIG = {
+  xs: 24,
+  sm: 32,
+  md: 48,
+  lg: 64,
+  xl: 96,
+  xxl: 128,
+} as const;
+
+// =============================================================================
+// COMPONENT IMPLEMENTATION
+// =============================================================================
+
+export const AtomicImage: React.FC<AtomicImageProps> = ({
+  source,
+  size = 'md',
+  shape = 'rounded',
+  borderRadius,
+  style,
+  imageStyle,
+  backgroundColor,
+  borderColor,
+  borderWidth = 0,
+  ...props
+}) => {
+  const tokens = useAppDesignTokens();
+  const styles = getStyles(tokens);
+
+  const imageSize = SIZE_CONFIG[size];
+  const calculatedBorderRadius = borderRadius ?? getBorderRadius(shape, imageSize, tokens);
+
+  const containerStyle = [
+    styles.container,
+    {
+      width: imageSize,
+      height: imageSize,
+      borderRadius: calculatedBorderRadius,
+      backgroundColor: backgroundColor || tokens.colors.surface,
+      borderColor: borderColor || tokens.colors.border,
+      borderWidth,
+    },
+    style,
+  ];
+
+  const finalImageStyle = [
+    styles.image,
+    {
+      borderRadius: calculatedBorderRadius,
+    },
+    imageStyle,
+  ];
+
+  return (
+    <Image
+      source={source}
+      style={finalImageStyle}
+      {...props}
+    />
+  );
+};
+
+// =============================================================================
+// HELPER FUNCTIONS
+// =============================================================================
+
+const getBorderRadius = (shape: AtomicImageProps['shape'], size: number, tokens: ReturnType<typeof useAppDesignTokens>): number => {
+  switch (shape) {
+    case 'circle':
+      return size / 2;
+    case 'square':
+      return 0;
+    case 'rounded':
+    default:
+      return tokens.borders.radius.md;
+  }
+};
+
+// =============================================================================
+// STYLES
+// =============================================================================
+
+const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
+  StyleSheet.create({
+    container: {
+      overflow: 'hidden',
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    image: {
+      width: '100%',
+      height: '100%',
+      resizeMode: 'cover',
+    },
+  });
+
+// =============================================================================
+// EXPORTS
+// =============================================================================
+
+export default AtomicImage;