@umituz/react-native-design-system 1.5.36 → 1.5.38

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 '@umituz/react-native-theme';
-
-// =============================================================================
-// 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 '@umituz/react-native-theme';
-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>
-  );
-};

package/src/presentation/atoms/AtomicFilter.tsx

@@ -1,154 +0,0 @@
-import React from 'react';
-import { ScrollView, View, TouchableOpacity, ViewStyle } from 'react-native';
-import { useAppDesignTokens } from '@umituz/react-native-theme';
-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

@@ -1,105 +0,0 @@
-/**
- * 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 '@umituz/react-native-theme';
-import { withAlpha } from '@umituz/react-native-theme';
-
-// =============================================================================
-// 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

@@ -1,40 +0,0 @@
-/**
- * AtomicIcon - Atomic Design System Icon Component
- *
- * Wrapper for the universal Icon component from @domains/icons
- * Provides backward compatibility with AtomicIcon naming convention
- * while leveraging the full power of the icons domain architecture.
- */
-
-import React from 'react';
-import { Icon } from '@umituz/react-native-icon';
-import type { IconProps, IconSize, IconColor, IconName } from '@umituz/react-native-icon';
-
-/**
- * AtomicIcon Component
- *
- * @example
- * ```tsx
- * import { AtomicIcon } from '@umituz/react-native-design-system';
- *
- * // Basic usage
- * <AtomicIcon name="Settings" size="md" color="primary" />
- *
- * // Custom size and color
- * <AtomicIcon name="Heart" customSize={32} customColor="#FF0000" />
- *
- * // With background
- * <AtomicIcon name="Info" size="lg" withBackground backgroundColor="#667eea" />
- * ```
- */
-export const AtomicIcon: React.FC<IconProps> = (props) => {
-  return <Icon {...props} />;
-};
-
-/**
- * Re-export types with Atomic naming convention
- */
-export type AtomicIconProps = IconProps;
-export type AtomicIconSize = IconSize;
-export type AtomicIconColor = IconColor;
-export type AtomicIconName = IconName;

package/src/presentation/atoms/AtomicImage.tsx

@@ -1,149 +0,0 @@
-/**
- * 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 '@umituz/react-native-theme';
-
-// =============================================================================
-// 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 as 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'];
-  const calculatedBorderRadius = borderRadius ?? getBorderRadius(shape as 'square' | 'circle' | 'rounded', 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;