@umituz/react-native-design-system 1.7.1 → 1.7.3

package/src/presentation/atoms/AtomicSort.tsx

@@ -1,145 +0,0 @@
-import React from 'react';
-import { ScrollView, View } from 'react-native';
-import type { StyleProp, ViewStyle } from 'react-native';
-import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
-import { AtomicChip } from './AtomicChip';
-
-/**
- * Sort option interface
- */
-export interface SortOption {
-  id: string;
-  label: string;
-  icon?: string;
-}
-
-/**
- * Sort direction type
- */
-export type SortDirection = 'asc' | 'desc';
-
-/**
- * AtomicSort component props
- */
-export interface AtomicSortProps {
-  options: SortOption[];
-  selectedId: string | null;
-  sortDirection: SortDirection;
-  onSortChange: (optionId: string, direction: SortDirection) => void;
-  showDirectionToggle?: boolean;
-  variant?: 'outlined' | 'filled' | 'soft';
-  color?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
-  size?: 'sm' | 'md' | 'lg';
-  style?: StyleProp<ViewStyle>;
-  testID?: string;
-}
-
-/**
- * AtomicSort - Horizontal Sort Chip Component
- *
- * A Material Design 3 compliant sort component using chip selection.
- * Supports single selection with ascending/descending direction toggle.
- *
- * @example
- * ```tsx
- * const [sortBy, setSortBy] = useState<string | null>('name');
- * const [sortDir, setSortDir] = useState<SortDirection>('asc');
- *
- * <AtomicSort
- *   options={[
- *     { id: 'name', label: 'Name', icon: 'sort-alpha' },
- *     { id: 'date', label: 'Date', icon: 'schedule' },
- *     { id: 'priority', label: 'Priority', icon: 'flag' },
- *   ]}
- *   selectedId={sortBy}
- *   sortDirection={sortDir}
- *   onSortChange={(id, dir) => {
- *     setSortBy(id);
- *     setSortDir(dir);
- *   }}
- *   showDirectionToggle={true}
- * />
- * ```
- *
- * Features:
- * - Horizontal scrollable sort chips
- * - Single selection (one active sort at a time)
- * - Direction toggle (click active chip to switch asc/desc)
- * - Visual arrow indicators (↑ asc, ↓ desc)
- * - Theme-aware colors from design tokens
- * - Icon support per sort option
- * - Fully controlled component
- *
- * Behavior:
- * - Click inactive chip → Selects it with ascending direction
- * - Click active chip → Toggles direction (asc ↔ desc)
- * - Visual feedback via filled variant for active sort
- */
-export const AtomicSort: React.FC<AtomicSortProps> = ({
-  options,
-  selectedId,
-  sortDirection,
-  onSortChange,
-  showDirectionToggle = true,
-  variant = 'outlined',
-  color = 'primary',
-  size = 'md',
-  style,
-  testID,
-}) => {
-  const tokens = useAppDesignTokens();
-
-  /**
-   * Handle sort chip press
-   * - If clicking active chip: Toggle direction
-   * - If clicking inactive chip: Select it with 'asc' direction
-   */
-  const handleSortPress = (optionId: string) => {
-    if (selectedId === optionId) {
-      const newDirection = sortDirection === 'asc' ? 'desc' : 'asc';
-      onSortChange(optionId, newDirection);
-    } else {
-      onSortChange(optionId, 'asc');
-    }
-  };
-
-  const directionIcon = sortDirection === 'asc' ? 'arrow-upward' : 'arrow-downward';
-
-  return (
-    <ScrollView
-      horizontal
-      showsHorizontalScrollIndicator={false}
-      contentContainerStyle={{
-        paddingHorizontal: tokens.spacing.sm,
-        gap: tokens.spacing.sm,
-      }}
-      style={[style]}
-      testID={testID}
-    >
-      <View style={{ flexDirection: 'row', gap: tokens.spacing.sm }}>
-        {options.map((option) => {
-          const isSelected = selectedId === option.id;
-
-          return (
-            <AtomicChip
-              key={option.id}
-              variant={isSelected ? 'filled' : variant}
-              color={color}
-              size={size}
-              leadingIcon={option.icon}
-              trailingIcon={
-                isSelected && showDirectionToggle ? directionIcon : undefined
-              }
-              selected={isSelected}
-              clickable={true}
-              onPress={() => handleSortPress(option.id)}
-              testID={`sort-chip-${option.id}`}
-            >
-              {option.label}
-            </AtomicChip>
-          );
-        })}
-      </View>
-    </ScrollView>
-  );
-};

package/src/presentation/atoms/AtomicSwitch.tsx

@@ -1,166 +0,0 @@
-/**
- * AtomicSwitch - Universal Switch Component
- *
- * Provides consistent switch/toggle functionality with theme integration
- * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
- *
- * Atomic Design Level: ATOM
- * Purpose: Basic switch/toggle input
- *
- * Usage:
- * - Settings toggles
- * - Feature enable/disable
- * - Boolean preferences
- * - Form inputs
- */
-
-import React from 'react';
-import { Switch, SwitchProps, StyleSheet, ViewStyle } from 'react-native';
-import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
-
-// =============================================================================
-// TYPE DEFINITIONS
-// =============================================================================
-
-export interface AtomicSwitchProps extends Omit<SwitchProps, 'style'> {
-  /** Switch value */
-  value: boolean;
-  /** Value change handler */
-  onValueChange: (value: boolean) => void;
-  /** Size variant */
-  size?: 'sm' | 'md' | 'lg';
-  /** Color variant */
-  variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'error';
-  /** Disabled state */
-  disabled?: boolean;
-  /** Container style override */
-  style?: ViewStyle;
-  /** Track color override */
-  trackColor?: { false: string; true: string };
-  /** Thumb color override */
-  thumbColor?: string;
-  /** iOS specific props */
-  ios_backgroundColor?: string;
-}
-
-// =============================================================================
-// SIZE CONFIGURATION
-// =============================================================================
-
-const SIZE_CONFIG = {
-  sm: { scaleX: 0.8, scaleY: 0.8 },
-  md: { scaleX: 1, scaleY: 1 },
-  lg: { scaleX: 1.2, scaleY: 1.2 },
-} as const;
-
-// =============================================================================
-// COMPONENT IMPLEMENTATION
-// =============================================================================
-
-export const AtomicSwitch: React.FC<AtomicSwitchProps> = ({
-  value,
-  onValueChange,
-  size = 'md',
-  variant = 'primary',
-  disabled = false,
-  style,
-  trackColor,
-  thumbColor,
-  ios_backgroundColor,
-  ...props
-}) => {
-  const tokens = useAppDesignTokens();
-  const styles = getStyles(tokens);
-
-  const sizeConfig = SIZE_CONFIG[size as 'sm' | 'md' | 'lg'];
-  const colors = getVariantColors(tokens, variant as 'primary' | 'secondary' | 'success' | 'warning' | 'error');
-
-  const defaultTrackColor = trackColor || {
-    false: colors.trackFalse,
-    true: colors.trackTrue,
-  };
-
-  const defaultThumbColor = thumbColor || colors.thumb;
-  const defaultIosBackgroundColor = ios_backgroundColor || colors.trackFalse;
-
-  return (
-    <Switch
-      value={value}
-      onValueChange={onValueChange}
-      disabled={disabled}
-      trackColor={defaultTrackColor}
-      thumbColor={defaultThumbColor}
-      ios_backgroundColor={defaultIosBackgroundColor}
-      style={[
-        styles.switch,
-        {
-          transform: [{ scaleX: sizeConfig.scaleX }, { scaleY: sizeConfig.scaleY }],
-        },
-        style,
-      ]}
-      {...props}
-    />
-  );
-};
-
-// =============================================================================
-// HELPER FUNCTIONS
-// =============================================================================
-
-const getVariantColors = (tokens: ReturnType<typeof useAppDesignTokens>, variant: AtomicSwitchProps['variant']) => {
-  switch (variant) {
-    case 'primary':
-      return {
-        trackFalse: tokens.colors.surfaceSecondary,
-        trackTrue: tokens.colors.primary,
-        thumb: tokens.colors.surface,
-      };
-    case 'secondary':
-      return {
-        trackFalse: tokens.colors.surfaceSecondary,
-        trackTrue: tokens.colors.secondary,
-        thumb: tokens.colors.surface,
-      };
-    case 'success':
-      return {
-        trackFalse: tokens.colors.surfaceSecondary,
-        trackTrue: tokens.colors.success,
-        thumb: tokens.colors.surface,
-      };
-    case 'warning':
-      return {
-        trackFalse: tokens.colors.surfaceSecondary,
-        trackTrue: tokens.colors.warning,
-        thumb: tokens.colors.surface,
-      };
-    case 'error':
-      return {
-        trackFalse: tokens.colors.surfaceSecondary,
-        trackTrue: tokens.colors.error,
-        thumb: tokens.colors.surface,
-      };
-    default:
-      return {
-        trackFalse: tokens.colors.surfaceSecondary,
-        trackTrue: tokens.colors.primary,
-        thumb: tokens.colors.surface,
-      };
-  }
-};
-
-// =============================================================================
-// STYLES
-// =============================================================================
-
-const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
-  StyleSheet.create({
-    switch: {
-      // Default switch styling is handled by platform
-    },
-  });
-
-// =============================================================================
-// EXPORTS
-// =============================================================================
-
-export default AtomicSwitch;

package/src/presentation/atoms/AtomicText.tsx

@@ -1,82 +0,0 @@
-import React from 'react';
-import { Text, StyleProp, TextStyle } from 'react-native';
-import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
-
-export type TextStyleVariant =
-  | 'displayLarge' | 'displayMedium' | 'displaySmall'
-  | 'headlineLarge' | 'headlineMedium' | 'headlineSmall'
-  | 'titleLarge' | 'titleMedium' | 'titleSmall'
-  | 'bodyLarge' | 'bodyMedium' | 'bodySmall'
-  | 'labelLarge' | 'labelMedium' | 'labelSmall';
-
-export type ColorVariant =
-  | 'primary'
-  | 'secondary'
-  | 'tertiary'
-  | 'disabled'
-  | 'inverse'
-  | 'success'
-  | 'error'
-  | 'warning'
-  | 'info';
-
-export interface AtomicTextProps {
-  children: React.ReactNode;
-  type?: TextStyleVariant;
-  color?: ColorVariant | string;
-  numberOfLines?: number;
-  style?: StyleProp<TextStyle>;
-  testID?: string;
-}
-
-export const AtomicText: React.FC<AtomicTextProps> = ({
-  children,
-  type = 'bodyMedium',
-  color,
-  numberOfLines,
-  style,
-  testID,
-}) => {
-  const tokens = useAppDesignTokens();
-
-  // Get typography style from tokens
-  const typographyStyle = tokens.typography[type];
-
-  // Get color from tokens or use custom color
-  const getTextColor = (): string => {
-    if (!color) {
-      return tokens.colors.textPrimary;
-    }
-
-    // Check if it's a semantic color name
-    const colorMap: Record<ColorVariant, string> = {
-      primary: tokens.colors.textPrimary,
-      secondary: tokens.colors.textSecondary,
-      tertiary: tokens.colors.textTertiary,
-      disabled: tokens.colors.textDisabled,
-      inverse: tokens.colors.textInverse,
-      success: tokens.colors.success,
-      error: tokens.colors.error,
-      warning: tokens.colors.warning,
-      info: tokens.colors.info,
-    };
-
-    return colorMap[color as ColorVariant] || color;
-  };
-
-  const textStyle: StyleProp<TextStyle> = [
-    typographyStyle,
-    { color: getTextColor() },
-    style,
-  ];
-
-  return (
-    <Text
-      numberOfLines={numberOfLines}
-      style={textStyle}
-      testID={testID}
-    >
-      {children}
-    </Text>
-  );
-};

package/src/presentation/atoms/AtomicTextArea.tsx

@@ -1,313 +0,0 @@
-/**
- * AtomicTextArea Component
- *
- * A multiline text input component with pure React Native implementation
- * for longer text entry with consistent styling.
- *
- * Features:
- * - Pure React Native TextInput with multiline
- * - Outlined/filled/flat variants
- * - Error, success, disabled states
- * - Character counter with max length
- * - Helper text for guidance or errors
- * - Configurable rows for height
- * - Theme-aware styling
- * - Full accessibility support
- *
- * Usage:
- * ```tsx
- * const [description, setDescription] = useState('');
- *
- * <AtomicTextArea
- *   value={description}
- *   onChangeText={setDescription}
- *   label="Description"
- *   placeholder="Enter description..."
- *   maxLength={500}
- *   showCharacterCount
- *   rows={6}
- *   helperText="Provide a detailed description"
- * />
- * ```
- */
-
-import React, { useState } from 'react';
-import { View, TextInput, StyleSheet, StyleProp, ViewStyle, TextStyle } from 'react-native';
-import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
-import { AtomicText } from './AtomicText';
-
-export type AtomicTextAreaVariant = 'outlined' | 'filled' | 'flat';
-export type AtomicTextAreaState = 'default' | 'error' | 'success' | 'disabled';
-export type AtomicTextAreaSize = 'sm' | 'md' | 'lg';
-
-export interface AtomicTextAreaProps {
-  /** Textarea label */
-  label?: string;
-  /** Current textarea value */
-  value?: string;
-  /** Value change callback */
-  onChangeText?: (text: string) => void;
-  /** Textarea variant (outlined, filled, flat) */
-  variant?: AtomicTextAreaVariant;
-  /** Textarea state (default, error, success, disabled) */
-  state?: AtomicTextAreaState;
-  /** Textarea size (sm, md, lg) */
-  size?: AtomicTextAreaSize;
-  /** Placeholder text */
-  placeholder?: string;
-  /** Helper text below textarea */
-  helperText?: string;
-  /** Maximum character length */
-  maxLength?: number;
-  /** Show character counter */
-  showCharacterCount?: boolean;
-  /** Number of visible text rows */
-  rows?: number;
-  /** Minimum height in pixels */
-  minHeight?: number;
-  /** Auto-capitalize */
-  autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters';
-  /** Auto-correct */
-  autoCorrect?: boolean;
-  /** Disabled state */
-  disabled?: boolean;
-  /** Container style */
-  style?: StyleProp<ViewStyle>;
-  /** Input text style */
-  inputStyle?: StyleProp<TextStyle>;
-  /** Test ID for E2E testing */
-  testID?: string;
-  /** Blur callback */
-  onBlur?: () => void;
-  /** Focus callback */
-  onFocus?: () => void;
-}
-
-/**
- * AtomicTextArea - Pure React Native Multiline Text Input
- */
-export const AtomicTextArea: React.FC<AtomicTextAreaProps> = ({
-  variant = 'outlined',
-  state = 'default',
-  size = 'md',
-  label,
-  value = '',
-  onChangeText,
-  placeholder,
-  helperText,
-  maxLength,
-  showCharacterCount = false,
-  rows = 4,
-  minHeight,
-  autoCapitalize = 'sentences',
-  autoCorrect = true,
-  disabled = false,
-  style,
-  inputStyle,
-  testID,
-  onBlur,
-  onFocus,
-}) => {
-  const tokens = useAppDesignTokens();
-  const [isFocused, setIsFocused] = useState(false);
-  const isDisabled = state === 'disabled' || disabled;
-  const characterCount = value?.toString().length || 0;
-  const hasError = state === 'error';
-  const hasSuccess = state === 'success';
-
-  // Size configuration
-  const sizeConfig = {
-    sm: {
-      paddingVertical: tokens.spacing.xs,
-      paddingHorizontal: tokens.spacing.sm,
-      fontSize: tokens.typography.bodySmall.fontSize,
-      lineHeight: 20,
-    },
-    md: {
-      paddingVertical: tokens.spacing.sm,
-      paddingHorizontal: tokens.spacing.md,
-      fontSize: tokens.typography.bodyMedium.fontSize,
-      lineHeight: 24,
-    },
-    lg: {
-      paddingVertical: tokens.spacing.md,
-      paddingHorizontal: tokens.spacing.lg,
-      fontSize: tokens.typography.bodyLarge.fontSize,
-      lineHeight: 28,
-    },
-  };
-
-  const config = sizeConfig[size];
-
-  // Calculate height based on rows
-  const getTextAreaHeight = () => {
-    if (minHeight) return minHeight;
-    const paddingVertical = config.paddingVertical * 2;
-    return (rows * config.lineHeight) + paddingVertical;
-  };
-
-  // Get variant styles
-  const getVariantStyle = (): ViewStyle => {
-    const baseStyle: ViewStyle = {
-      backgroundColor: tokens.colors.surface,
-      borderRadius: tokens.borders.radius.md,
-    };
-
-    let borderColor = tokens.colors.border;
-    if (isFocused) borderColor = tokens.colors.primary;
-    if (hasError) borderColor = tokens.colors.error;
-    if (hasSuccess) borderColor = tokens.colors.success;
-    if (isDisabled) borderColor = tokens.colors.borderDisabled;
-
-    switch (variant) {
-      case 'outlined':
-        return {
-          ...baseStyle,
-          borderWidth: isFocused ? 2 : 1,
-          borderColor,
-        };
-
-      case 'filled':
-        return {
-          ...baseStyle,
-          backgroundColor: tokens.colors.surfaceSecondary,
-          borderWidth: 0,
-          borderBottomWidth: isFocused ? 2 : 1,
-          borderBottomColor: borderColor,
-        };
-
-      case 'flat':
-        return {
-          ...baseStyle,
-          backgroundColor: 'transparent',
-          borderWidth: 0,
-          borderBottomWidth: 1,
-          borderBottomColor: borderColor,
-          borderRadius: 0,
-        };
-
-      default:
-        return baseStyle;
-    }
-  };
-
-  // Get text color based on state
-  const getTextColor = () => {
-    if (isDisabled) return tokens.colors.textDisabled;
-    if (hasError) return tokens.colors.error;
-    if (hasSuccess) return tokens.colors.success;
-    return tokens.colors.textPrimary;
-  };
-
-  const containerStyle: StyleProp<ViewStyle> = [
-    styles.container,
-    getVariantStyle(),
-    {
-      paddingVertical: config.paddingVertical,
-      paddingHorizontal: config.paddingHorizontal,
-      height: getTextAreaHeight(),
-      opacity: isDisabled ? 0.5 : 1,
-    },
-    style,
-  ];
-
-  const textInputStyle: StyleProp<TextStyle> = [
-    styles.input,
-    {
-      fontSize: config.fontSize,
-      lineHeight: config.lineHeight,
-      color: getTextColor(),
-    },
-    inputStyle,
-  ];
-
-  return (
-    <View testID={testID}>
-      {label && (
-        <AtomicText
-          type="labelMedium"
-          color={hasError ? 'error' : hasSuccess ? 'success' : 'secondary'}
-          style={styles.label}
-        >
-          {label}
-        </AtomicText>
-      )}
-
-      <View style={containerStyle}>
-        <TextInput
-          value={value}
-          onChangeText={onChangeText}
-          placeholder={placeholder}
-          placeholderTextColor={tokens.colors.textSecondary}
-          maxLength={maxLength}
-          autoCapitalize={autoCapitalize}
-          autoCorrect={autoCorrect}
-          editable={!isDisabled}
-          multiline={true}
-          numberOfLines={rows}
-          textAlignVertical="top"
-          style={textInputStyle}
-          onBlur={() => {
-            setIsFocused(false);
-            onBlur?.();
-          }}
-          onFocus={() => {
-            setIsFocused(true);
-            onFocus?.();
-          }}
-          testID={testID ? `${testID}-input` : undefined}
-        />
-      </View>
-
-      {(helperText || showCharacterCount) && (
-        <View style={styles.helperRow}>
-          {helperText && (
-            <AtomicText
-              type="bodySmall"
-              color={hasError ? 'error' : 'secondary'}
-              style={styles.helperText}
-              testID={testID ? `${testID}-helper` : undefined}
-            >
-              {helperText}
-            </AtomicText>
-          )}
-          {showCharacterCount && maxLength && (
-            <AtomicText
-              type="bodySmall"
-              color="secondary"
-              style={styles.characterCount}
-              testID={testID ? `${testID}-count` : undefined}
-            >
-              {characterCount}/{maxLength}
-            </AtomicText>
-          )}
-        </View>
-      )}
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    justifyContent: 'flex-start',
-  },
-  input: {
-    flex: 1,
-  },
-  label: {
-    marginBottom: 4,
-  },
-  helperRow: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    marginTop: 4,
-  },
-  helperText: {
-    flex: 1,
-  },
-  characterCount: {
-    marginLeft: 8,
-  },
-});
-
-export type { AtomicTextAreaProps as TextAreaProps };