@umituz/react-native-design-system 1.0.0

package/src/presentation/atoms/picker/types/index.ts

@@ -0,0 +1,40 @@
+import { ViewStyle, TextStyle } from 'react-native';
+import { AtomicIconColor } from '../../AtomicIcon';
+
+/**
+ * Picker option item
+ *
+ * icon: Any MaterialIcons name
+ * @see https://fonts.google.com/icons
+ */
+export interface PickerOption {
+  label: string;
+  value: string;
+  icon?: string; // MaterialIcons name
+  disabled?: boolean;
+  description?: string;
+  testID?: string;
+}
+
+export type PickerSize = 'sm' | 'md' | 'lg';
+
+export interface AtomicPickerProps {
+  value: string | string[];
+  onChange: (value: string | string[]) => void;
+  options: PickerOption[];
+  label?: string;
+  placeholder?: string;
+  error?: string;
+  disabled?: boolean;
+  multiple?: boolean;
+  searchable?: boolean;
+  clearable?: boolean;
+  autoClose?: boolean;
+  color?: AtomicIconColor;
+  size?: PickerSize;
+  modalTitle?: string;
+  emptyMessage?: string;
+  style?: ViewStyle | ViewStyle[];
+  labelStyle?: TextStyle | TextStyle[];
+  testID?: string;
+}

package/src/presentation/atoms/touchable/styles/touchableStyles.ts

@@ -0,0 +1,71 @@
+import { ViewStyle } from 'react-native';
+import { FeedbackStrength } from '../types';
+
+/**
+ * Get opacity value based on feedback strength
+ */
+export const getOpacityValue = (strength: FeedbackStrength): number => {
+  switch (strength) {
+    case 'subtle':
+      return 0.8;
+    case 'normal':
+      return 0.6;
+    case 'strong':
+      return 0.4;
+    default:
+      return 0.6;
+  }
+};
+
+/**
+ * Get base touchable container style
+ * Ensures minimum touch target size (iOS HIG: 48x48)
+ */
+export const getTouchableContainerStyle = (): ViewStyle => ({
+  minWidth: 48,
+  minHeight: 48,
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
+/**
+ * Get disabled touchable style
+ */
+export const getDisabledStyle = (): ViewStyle => ({
+  opacity: 0.5,
+});
+
+/**
+ * Get loading container style
+ * Centers the loading indicator
+ */
+export const getLoadingContainerStyle = (): ViewStyle => ({
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
+/**
+ * Convert number to HitSlop object
+ * If hitSlop is a number, apply it to all sides
+ */
+export const normalizeHitSlop = (
+  hitSlop: number | { top?: number; bottom?: number; left?: number; right?: number } | undefined
+): { top: number; bottom: number; left: number; right: number } | undefined => {
+  if (hitSlop === undefined) return undefined;
+
+  if (typeof hitSlop === 'number') {
+    return {
+      top: hitSlop,
+      bottom: hitSlop,
+      left: hitSlop,
+      right: hitSlop,
+    };
+  }
+
+  return {
+    top: hitSlop.top || 0,
+    bottom: hitSlop.bottom || 0,
+    left: hitSlop.left || 0,
+    right: hitSlop.right || 0,
+  };
+};

package/src/presentation/atoms/touchable/types/index.ts

@@ -0,0 +1,162 @@
+import { StyleProp, ViewStyle, GestureResponderEvent } from 'react-native';
+
+/**
+ * Touchable feedback variant
+ * - opacity: iOS-style opacity feedback (default)
+ * - highlight: Android-style highlight feedback
+ * - ripple: Material Design ripple effect (Android only)
+ * - none: No visual feedback
+ */
+export type TouchableFeedback = 'opacity' | 'highlight' | 'ripple' | 'none';
+
+/**
+ * Feedback strength for visual feedback
+ * - subtle: Light feedback (0.8 opacity)
+ * - normal: Standard feedback (0.6 opacity)
+ * - strong: Strong feedback (0.4 opacity)
+ */
+export type FeedbackStrength = 'subtle' | 'normal' | 'strong';
+
+/**
+ * Hit slop configuration
+ * Extends the touchable area beyond the component's bounds
+ */
+export interface HitSlop {
+  top?: number;
+  bottom?: number;
+  left?: number;
+  right?: number;
+}
+
+/**
+ * AtomicTouchable component props
+ *
+ * A unified touchable wrapper with consistent behavior across platforms.
+ * Uses React Native's Pressable API for modern, accessible touch handling.
+ *
+ * @example
+ * ```tsx
+ * <AtomicTouchable
+ *   onPress={handlePress}
+ *   feedback="opacity"
+ *   strength="normal"
+ *   disabled={isLoading}
+ *   loading={isLoading}
+ *   hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+ *   style={styles.touchable}
+ * >
+ *   <AtomicText>Press Me</AtomicText>
+ * </AtomicTouchable>
+ * ```
+ */
+export interface AtomicTouchableProps {
+  /**
+   * Content to render inside the touchable
+   */
+  children: React.ReactNode;
+
+  /**
+   * Callback fired when the touchable is pressed
+   */
+  onPress?: (event: GestureResponderEvent) => void;
+
+  /**
+   * Callback fired when press starts (finger down)
+   */
+  onPressIn?: (event: GestureResponderEvent) => void;
+
+  /**
+   * Callback fired when press ends (finger up)
+   */
+  onPressOut?: (event: GestureResponderEvent) => void;
+
+  /**
+   * Callback fired on long press (500ms default)
+   */
+  onLongPress?: (event: GestureResponderEvent) => void;
+
+  /**
+   * Feedback variant
+   * @default 'opacity'
+   */
+  feedback?: TouchableFeedback;
+
+  /**
+   * Feedback strength
+   * @default 'normal'
+   */
+  strength?: FeedbackStrength;
+
+  /**
+   * Disable the touchable
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Show loading indicator (disables touch)
+   * @default false
+   */
+  loading?: boolean;
+
+  /**
+   * Hit slop - extends touchable area
+   * Useful for small touch targets
+   * @default undefined
+   */
+  hitSlop?: HitSlop | number;
+
+  /**
+   * Custom style for the touchable container
+   */
+  style?: StyleProp<ViewStyle>;
+
+  /**
+   * Style applied when pressed
+   */
+  pressedStyle?: StyleProp<ViewStyle>;
+
+  /**
+   * Style applied when disabled
+   */
+  disabledStyle?: StyleProp<ViewStyle>;
+
+  /**
+   * Accessibility label for screen readers
+   */
+  accessibilityLabel?: string;
+
+  /**
+   * Accessibility hint for screen readers
+   */
+  accessibilityHint?: string;
+
+  /**
+   * Accessibility role
+   * @default 'button'
+   */
+  accessibilityRole?: 'button' | 'link' | 'none';
+
+  /**
+   * Test ID for E2E testing
+   */
+  testID?: string;
+
+  /**
+   * Delay before onLongPress is triggered (ms)
+   * @default 500
+   */
+  delayLongPress?: number;
+
+  /**
+   * Ripple color (Android only, for 'ripple' feedback)
+   * @default theme primary color with alpha
+   */
+  rippleColor?: string;
+
+  /**
+   * Border radius for ripple effect (Android only)
+   * @default 0
+   */
+  rippleRadius?: number;
+}

package/src/presentation/hooks/useAppDesignTokens.ts

@@ -0,0 +1,78 @@
+/**
+ * useAppDesignTokens Hook - Dynamic Theme-Aware Design Tokens
+ *
+ * ✅ ZERO DUPLICATION - Uses TokenFactory (Single Source of Truth)
+ * ✅ DYNAMIC theme switching (light/dark)
+ * ✅ Type-safe design tokens
+ * ✅ Automatic re-render on theme change
+ * ✅ Graceful fallback to light theme
+ * ✅ NO CIRCULAR DEPENDENCY - Relative imports break barrel export cycle
+ *
+ * CRITICAL: Uses RELATIVE imports to break circular dependency!
+ * - Relative import for useTheme (not barrel '@domains/theme')
+ * - Relative import for TokenFactory (not barrel through AppDesignTokens)
+ * - NOT exported from AppDesignTokens.ts (only from design-system/index.ts)
+ *
+ * This architecture prevents cycle:
+ * - useAppDesignTokens → useTheme (relative, not through barrel)
+ * - theme → design-system (through barrel, but useAppDesignTokens not in token barrel)
+ * - No cycle detected!
+ *
+ * @module useAppDesignTokens
+ */
+
+import { useMemo } from 'react';
+import { useTheme } from '../../../theme/infrastructure/stores/themeStore';
+import { createDesignTokens, STATIC_DESIGN_TOKENS, type ThemeMode } from '../tokens/core/TokenFactory';
+
+/**
+ * 🎯 DYNAMIC DESIGN TOKENS HOOK
+ *
+ * USE THIS HOOK in all components for theme-aware design tokens!
+ *
+ * ✅ Colors are DYNAMIC (update when theme changes)
+ * ✅ Typography, spacing, etc. are STATIC (performance optimization)
+ * ✅ Automatic re-render on theme change
+ * ✅ Zero duplication (uses TokenFactory)
+ *
+ * @example
+ * ```typescript
+ * import { useAppDesignTokens } from '@domains/design-system';
+ *
+ * const MyComponent = () => {
+ *   const tokens = useAppDesignTokens();
+ *   return (
+ *     <View style={{
+ *       backgroundColor: tokens.colors.primary,
+ *       padding: tokens.spacing.md,
+ *       borderRadius: tokens.borders.radius.md
+ *     }}>
+ *       <Text style={tokens.typography.bodyLarge}>Hello!</Text>
+ *     </View>
+ *   );
+ * };
+ * ```
+ */
+export const useAppDesignTokens = () => {
+  // ✅ Hooks must be called unconditionally at the top level
+  const { theme, themeMode: mode } = useTheme();
+
+  return useMemo(() => {
+    try {
+      // Validate theme mode
+      const themeMode: ThemeMode = mode === 'dark' ? 'dark' : 'light';
+
+      // Validate theme colors exist
+      if (!theme?.colors || typeof theme.colors !== 'object' || !theme.colors.primary) {
+        console.warn('useAppDesignTokens: Invalid theme, using light theme fallback');
+        return STATIC_DESIGN_TOKENS; // Fallback to light theme
+      }
+
+      // ✅ Create tokens using TokenFactory (ZERO duplication!)
+      return createDesignTokens(themeMode);
+    } catch (error) {
+      console.warn('useAppDesignTokens: Error accessing theme, using fallback:', error);
+      return STATIC_DESIGN_TOKENS; // Fallback to light theme
+    }
+  }, [theme?.colors, mode]); // Re-compute when colors or mode changes
+};

package/src/presentation/hooks/useResponsive.ts

@@ -0,0 +1,180 @@
+/**
+ * useResponsive Hook
+ *
+ * React Hook for accessing responsive utilities with real-time dimension updates
+ * and safe area insets integration.
+ *
+ * Usage:
+ * ```tsx
+ * const { logoSize, inputHeight, fabPosition, isSmallDevice } = useResponsive();
+ * ```
+ */
+
+import { useWindowDimensions } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import {
+  getResponsiveLogoSize,
+  getResponsiveInputHeight,
+  getResponsiveHorizontalPadding,
+  getResponsiveBottomPosition,
+  getResponsiveFABPosition,
+  getResponsiveModalMaxHeight,
+  getResponsiveMinModalHeight,
+  getResponsiveIconContainerSize,
+  getResponsiveGridColumns,
+  getResponsiveMaxWidth,
+  getResponsiveFontSize,
+  isSmallPhone,
+  isTablet,
+  isLandscape,
+  getDeviceType,
+  getMinTouchTargetSize,
+  getSpacingMultiplier,
+  getOnboardingIconMarginTop,
+  getOnboardingIconMarginBottom,
+  getOnboardingTitleMarginBottom,
+  getOnboardingTextPadding,
+  getOnboardingDescriptionMarginTop,
+  getOnboardingIconSize,
+  getFormBottomPadding,
+  getInputIconSize,
+  getFormContentWidth,
+  getFormElementSpacing,
+  DeviceType,
+} from '../utils/responsive';
+
+export interface UseResponsiveReturn {
+  // Device info
+  width: number;
+  height: number;
+  isSmallDevice: boolean;
+  isTabletDevice: boolean;
+  isLandscapeMode: boolean;
+  deviceType: DeviceType;
+
+  // Safe area insets
+  insets: {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+  };
+
+  // Responsive sizes
+  logoSize: number;
+  inputHeight: number;
+  iconContainerSize: number;
+  maxContentWidth: number;
+  minTouchTarget: number;
+
+  // Responsive positioning
+  horizontalPadding: number;
+  bottomPosition: number;
+  fabPosition: { bottom: number; right: number };
+
+  // Responsive layout
+  modalMaxHeight: string;
+  modalMinHeight: number;
+  gridColumns: number;
+  spacingMultiplier: number;
+
+  // Onboarding-specific spacing (pre-calculated, device-aware)
+  onboardingIconMarginTop: number;
+  onboardingIconMarginBottom: number;
+  onboardingIconSize: number;
+  onboardingTitleMarginBottom: number;
+  onboardingTextPadding: number;
+  onboardingDescriptionMarginTop: number;
+
+  // Form-specific spacing (pre-calculated, universal)
+  formBottomPadding: number;
+  inputIconSize: number;
+  formContentWidth: number | undefined;
+  formElementSpacing: number;
+
+  // Utility functions
+  getLogoSize: (baseSize?: number) => number;
+  getInputHeight: (baseHeight?: number) => number;
+  getIconSize: (baseSize?: number) => number;
+  getMaxWidth: (baseWidth?: number) => number;
+  getFontSize: (baseFontSize: number) => number;
+  getGridCols: (mobile?: number, tablet?: number) => number;
+}
+
+/**
+ * Hook for responsive design utilities
+ * Automatically updates when screen dimensions or orientation changes
+ */
+export const useResponsive = (): UseResponsiveReturn => {
+  const { width, height } = useWindowDimensions();
+  const insets = useSafeAreaInsets();
+
+  return {
+    // Device info
+    width,
+    height,
+    isSmallDevice: isSmallPhone(),
+    isTabletDevice: isTablet(),
+    isLandscapeMode: isLandscape(),
+    deviceType: getDeviceType(),
+
+    // Safe area insets
+    insets,
+
+    // Responsive sizes (with default values)
+    logoSize: getResponsiveLogoSize(),
+    inputHeight: getResponsiveInputHeight(),
+    iconContainerSize: getResponsiveIconContainerSize(),
+    maxContentWidth: getResponsiveMaxWidth(),
+    minTouchTarget: getMinTouchTargetSize(),
+
+    // Responsive positioning
+    horizontalPadding: getResponsiveHorizontalPadding(16, insets),
+    bottomPosition: getResponsiveBottomPosition(32, insets),
+    fabPosition: getResponsiveFABPosition(insets),
+
+    // Responsive layout
+    modalMaxHeight: getResponsiveModalMaxHeight(),
+    modalMinHeight: getResponsiveMinModalHeight(),
+    gridColumns: getResponsiveGridColumns(),
+    spacingMultiplier: getSpacingMultiplier(),
+
+    // Onboarding-specific spacing (pre-calculated, no component calculations)
+    onboardingIconMarginTop: getOnboardingIconMarginTop(),
+    onboardingIconMarginBottom: getOnboardingIconMarginBottom(),
+    onboardingIconSize: getOnboardingIconSize(),
+    onboardingTitleMarginBottom: getOnboardingTitleMarginBottom(),
+    onboardingTextPadding: getOnboardingTextPadding(),
+    onboardingDescriptionMarginTop: getOnboardingDescriptionMarginTop(),
+
+    // Form-specific spacing (pre-calculated, universal)
+    formBottomPadding: getFormBottomPadding(insets.bottom),
+    inputIconSize: getInputIconSize(),
+    formContentWidth: getFormContentWidth(),
+    formElementSpacing: getFormElementSpacing(),
+
+    // Utility functions (allow custom base values)
+    getLogoSize: (baseSize) => getResponsiveLogoSize(baseSize),
+    getInputHeight: (baseHeight) => getResponsiveInputHeight(baseHeight),
+    getIconSize: (baseSize) => getResponsiveIconContainerSize(baseSize),
+    getMaxWidth: (baseWidth) => getResponsiveMaxWidth(baseWidth),
+    getFontSize: (baseFontSize) => getResponsiveFontSize(baseFontSize),
+    getGridCols: (mobile, tablet) => getResponsiveGridColumns(mobile, tablet),
+  };
+};
+
+/**
+ * Shorthand hook for just responsive sizes
+ */
+export const useResponsiveSizes = () => {
+  const { logoSize, inputHeight, iconContainerSize, maxContentWidth } = useResponsive();
+  return { logoSize, inputHeight, iconContainerSize, maxContentWidth };
+};
+
+/**
+ * Shorthand hook for just device type checks
+ */
+export const useDeviceType = () => {
+  const { isSmallDevice, isTabletDevice, deviceType } = useResponsive();
+  return { isSmallDevice, isTabletDevice, deviceType };
+};

package/src/presentation/loading/index.ts

@@ -0,0 +1,40 @@
+/**
+ * Loading Domain - Public API
+ *
+ * Domain-Driven Design (DDD) Architecture
+ * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
+ *
+ * This is the SINGLE SOURCE OF TRUTH for the Loading domain.
+ * ALL imports from this domain MUST go through this file.
+ *
+ * Architecture:
+ * - presentation/components: UI components (LoadingState, LoadingSpinner)
+ * - presentation/hooks: React hooks (useLoading)
+ *
+ * Usage:
+ *   import { LoadingState, LoadingSpinner, useLoading } from '@domains/design-system';
+ */
+
+// =============================================================================
+// PRESENTATION LAYER - Components
+// =============================================================================
+
+export { LoadingState } from './presentation/components/LoadingState';
+export type { LoadingStateProps, LoadingStateSize } from './presentation/components/LoadingState';
+
+export { LoadingSpinner } from './presentation/components/LoadingSpinner';
+export type {
+  LoadingSpinnerProps,
+  LoadingSpinnerSize,
+  LoadingSpinnerColor,
+} from './presentation/components/LoadingSpinner';
+
+// =============================================================================
+// PRESENTATION LAYER - Hooks
+// =============================================================================
+
+export { useLoading } from './presentation/hooks/useLoading';
+export type {
+  LoadingConfig,
+  UseLoadingReturn,
+} from './presentation/hooks/useLoading';

package/src/presentation/loading/presentation/components/LoadingSpinner.tsx

@@ -0,0 +1,116 @@
+/**
+ * LoadingSpinner - Theme-Aware Activity Indicator
+ *
+ * Refactored from AtomicLoadingSpinner - now part of Loading domain
+ * Uses central useAppDesignTokens() hook for automatic theme switching
+ * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
+ *
+ * Features:
+ * - ✅ AUTOMATIC theme switching via useAppDesignTokens()
+ * - ✅ Multiple size variants (small, medium, large)
+ * - ✅ Dynamic color customization
+ * - ✅ Overlay support
+ * - ✅ Message display
+ */
+
+import React from 'react';
+import { View, ActivityIndicator, ViewStyle } from 'react-native';
+import { useAppDesignTokens } from '../../../hooks/useAppDesignTokens';
+import { withAlpha } from '../../../tokens/AppDesignTokens';
+import { AtomicText } from '../../../atoms/AtomicText';
+
+// =============================================================================
+// TYPE DEFINITIONS
+// =============================================================================
+
+export type LoadingSpinnerSize = 'small' | 'medium' | 'large';
+export type LoadingSpinnerColor = 'primary' | 'secondary' | 'white';
+
+export interface LoadingSpinnerProps {
+  size?: LoadingSpinnerSize;
+  color?: LoadingSpinnerColor;
+  message?: string;
+  overlay?: boolean;
+  style?: ViewStyle;
+}
+
+// =============================================================================
+// SIZE VARIANTS
+// =============================================================================
+
+const sizeVariants: Record<LoadingSpinnerSize, 'small' | 'large'> = {
+  small: 'small',
+  medium: 'large',
+  large: 'large',
+};
+
+// =============================================================================
+// COMPONENT IMPLEMENTATION
+// =============================================================================
+
+export const LoadingSpinner: React.FC<LoadingSpinnerProps> = ({
+  size = 'medium',
+  color = 'primary',
+  message,
+  overlay = false,
+  style,
+}) => {
+  // ✅ DYNAMIC tokens from central hook
+  const tokens = useAppDesignTokens();
+
+  const spinnerSize = sizeVariants[size];
+
+  /**
+   * Get spinner color from dynamic theme
+   * ✅ Automatically updates when theme changes
+   */
+  const getSpinnerColor = (): string => {
+    switch (color) {
+      case 'primary':
+        return tokens.colors.primary;
+      case 'secondary':
+        return tokens.colors.secondary;
+      case 'white':
+        return tokens.colors.textInverse;
+      default:
+        return tokens.colors.primary;
+    }
+  };
+
+  const spinnerColor = getSpinnerColor();
+
+  const containerStyle: ViewStyle = overlay
+    ? {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: withAlpha(tokens.colors.black, 0.5),
+        justifyContent: 'center',
+        alignItems: 'center',
+        zIndex: 9999,
+      }
+    : {
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: tokens.spacing.lg,
+      };
+
+  return (
+    <View style={[containerStyle, style]}>
+      <ActivityIndicator size={spinnerSize} color={spinnerColor} />
+      {message && (
+        <AtomicText
+          type="bodyMedium"
+          color={overlay ? 'inverse' : 'primary'}
+          style={{ marginTop: tokens.spacing.md, textAlign: 'center' }}
+        >
+          {message}
+        </AtomicText>
+      )}
+    </View>
+  );
+};
+
+export default LoadingSpinner;