@umituz/react-native-design-system 1.8.0 → 1.8.1

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;