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

package/src/presentation/molecules/listitem/types/index.ts

@@ -1,17 +0,0 @@
-import { ViewStyle } from 'react-native';
-
-/**
- * ListItem component props
- *
- * leftIcon/rightIcon: Any MaterialIcons name
- * @see https://fonts.google.com/icons
- */
-export interface ListItemProps {
-  title: string;
-  subtitle?: string;
-  leftIcon?: string; // MaterialIcons name
-  rightIcon?: string; // MaterialIcons name
-  onPress?: () => void;
-  disabled?: boolean;
-  style?: ViewStyle;
-}

package/src/presentation/organisms/FormContainer.tsx

@@ -1,180 +0,0 @@
-/**
- * FormContainer Component
- *
- * A reusable container for forms with proper keyboard handling and responsive layout.
- *
- * Features:
- * - Pure React Native implementation (no Paper dependency)
- * - Universal keyboard handling (no platform-specific code)
- * - ScrollView with automatic content padding
- * - Safe area insets for bottom tab navigation overlap
- * - Responsive max width for large screens (tablets)
- * - Consistent vertical spacing between form elements
- * - Theme-aware surface colors
- * - Optimized performance with memoized styles
- *
- * Usage:
- * ```tsx
- * <FormContainer>
- *   <AtomicInput label="Name" value={name} onChangeText={setName} />
- *   <AtomicTextArea label="Description" value={desc} onChangeText={setDesc} />
- *   <AtomicButton variant="primary" onPress={handleSubmit}>
- *     Submit
- *   </AtomicButton>
- * </FormContainer>
- * ```
- *
- * Why This Component:
- * - Prevents keyboard from covering input fields (universal solution)
- * - Handles safe area (notch, bottom tabs) automatically
- * - Consistent form layout across all 100+ generated apps
- * - Responsive design for tablets (max 700px) and phones (full width)
- * - Automatic vertical spacing between form elements (no manual marginBottom)
- * - Reduces boilerplate in form screens
- * - Universal code - no platform checks, works on iOS, Android, Web
- *
- * Technical Details:
- * - Uses ScrollView with contentContainerStyle for keyboard handling
- * - Pure React Native View for surface (lightweight)
- * - Vertical spacing via Children.map() wrapping (universal compatibility)
- * - Safe area insets from react-native-safe-area-context
- * - Responsive values from useResponsive hook
- *
- * @module FormContainer
- */
-
-import React, { useMemo, Children } from 'react';
-import {
-  ScrollView,
-  StyleSheet,
-  View,
-  StyleProp,
-  ViewStyle,
-} from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { useAppDesignTokens } from '@umituz/react-native-theme';
-import { useResponsive } from '../hooks/useResponsive';
-
-/**
- * Props for FormContainer component
- */
-export interface FormContainerProps {
-  /** Form content (inputs, buttons, etc.) */
-  children: React.ReactNode;
-  /** Container style override (for outer View) */
-  containerStyle?: StyleProp<ViewStyle>;
-  /** Content container style override (for ScrollView content) */
-  contentContainerStyle?: StyleProp<ViewStyle>;
-  /** Show vertical scroll indicator */
-  showsVerticalScrollIndicator?: boolean;
-  /** Optional test ID for E2E testing */
-  testID?: string;
-  /** Show surface border (default: true) */
-  showBorder?: boolean;
-}
-
-/**
- * FormContainer - Universal form wrapper component
- *
- * Wraps forms with:
- * - Pure React Native surface
- * - Universal keyboard handling (no platform checks)
- * - ScrollView for content overflow
- * - Safe area insets (bottom tabs, notch)
- * - Responsive max width (tablets)
- * - Theme integration
- */
-export const FormContainer: React.FC<FormContainerProps> = ({
-  children,
-  containerStyle,
-  contentContainerStyle,
-  showsVerticalScrollIndicator = false,
-  testID,
-  showBorder = true,
-}) => {
-  const tokens = useAppDesignTokens();
-  const insets = useSafeAreaInsets();
-  const { formContentWidth, formBottomPadding, formElementSpacing } = useResponsive();
-
-  // Memoize styles to prevent recreation on every render
-  // Only recreate when theme colors or responsive values change
-  const styles = useMemo(
-    () =>
-      StyleSheet.create({
-        container: {
-          flex: 1,
-          backgroundColor: tokens.colors.backgroundPrimary,
-        },
-        surface: {
-          flex: 1,
-          backgroundColor: tokens.colors.surface,
-          borderWidth: showBorder ? 1 : 0,
-          borderColor: tokens.colors.border,
-          borderRadius: tokens.borders.radius.md,
-        },
-        scrollView: {
-          flex: 1,
-        },
-        contentContainer: {
-          flexGrow: 1,
-          padding: tokens.spacing.lg,
-          paddingTop: tokens.spacing.xl,
-          // Bottom padding: base + safe area insets for tab bar
-          paddingBottom: formBottomPadding + insets.bottom,
-          // Responsive max width (undefined for phones, 700px for tablets)
-          maxWidth: formContentWidth,
-          alignSelf: 'center',
-          width: '100%',
-        },
-        // Wrapper for each form element to add vertical spacing
-        // This is the universal replacement for CSS gap property
-        formElementWrapper: {
-          marginBottom: formElementSpacing,
-        },
-      }),
-    [
-      tokens.colors.backgroundPrimary,
-      tokens.colors.surface,
-      tokens.colors.border,
-      tokens.borders.radius.md,
-      tokens.spacing.lg,
-      tokens.spacing.xl,
-      formBottomPadding,
-      formContentWidth,
-      formElementSpacing,
-      insets.bottom,
-      showBorder,
-    ]
-  );
-
-  // Wrap each child with spacing View (universal gap replacement)
-  // Children.map() handles arrays, fragments, single elements correctly
-  const childrenWithSpacing = useMemo(() => {
-    const childArray = Children.toArray(children);
-    return childArray.map((child, index) => (
-      <View
-        key={index}
-        style={index < childArray.length - 1 ? styles.formElementWrapper : undefined}
-      >
-        {child}
-      </View>
-    ));
-  }, [children, styles.formElementWrapper]);
-
-  return (
-    <View style={[styles.container, containerStyle]} testID={testID}>
-      <View style={styles.surface}>
-        <ScrollView
-          style={styles.scrollView}
-          contentContainerStyle={[styles.contentContainer, contentContainerStyle]}
-          keyboardShouldPersistTaps="handled"
-          keyboardDismissMode="on-drag"
-          showsVerticalScrollIndicator={showsVerticalScrollIndicator}
-          testID={testID ? `${testID}-scroll` : undefined}
-        >
-          {childrenWithSpacing}
-        </ScrollView>
-      </View>
-    </View>
-  );
-};

package/src/presentation/organisms/ScreenLayout.tsx

@@ -1,171 +0,0 @@
-/**
- * ScreenLayout - Universal Screen Container Component
- *
- * Provides consistent layout structure for all screens:
- * - SafeAreaView with configurable edges
- * - Optional ScrollView for content
- * - Theme-aware background colors
- * - Optional header/footer slots
- * - Consistent spacing and padding
- *
- * Usage:
- * <ScreenLayout>
- *   <View>Your content here</View>
- * </ScreenLayout>
- *
- * Advanced:
- * <ScreenLayout
- *   scrollable={false}
- *   edges={['top', 'bottom']}
- *   header={<CustomHeader />}
- * >
- *   <View>Content</View>
- * </ScreenLayout>
- */
-
-import React, { useMemo } from 'react';
-import { View, ScrollView, StyleSheet, ViewStyle } from 'react-native';
-import { SafeAreaView, Edge } from 'react-native-safe-area-context';
-import { useAppDesignTokens } from '@umituz/react-native-theme';
-
-export interface ScreenLayoutProps {
-  /**
-   * Content to render inside the layout
-   */
-  children: React.ReactNode;
-
-  /**
-   * Enable scrolling (default: true)
-   * Set to false for screens with custom scroll logic
-   */
-  scrollable?: boolean;
-
-  /**
-   * Safe area edges to apply (default: ['top'])
-   * Common values:
-   * - ['top'] - For screens with bottom tabs
-   * - ['top', 'bottom'] - For modal screens
-   * - [] - No safe area (use cautiously)
-   */
-  edges?: Edge[];
-
-  /**
-   * Optional header component
-   * Rendered above scrollable content
-   */
-  header?: React.ReactNode;
-
-  /**
-   * Optional footer component
-   * Rendered below scrollable content
-   */
-  footer?: React.ReactNode;
-
-  /**
-   * Override background color
-   * If not provided, uses theme's backgroundPrimary
-   */
-  backgroundColor?: string;
-
-  /**
-   * Custom container style
-   */
-  containerStyle?: ViewStyle;
-
-  /**
-   * Custom content container style (for ScrollView)
-   */
-  contentContainerStyle?: ViewStyle;
-
-  /**
-   * Test ID for automation
-   */
-  testID?: string;
-
-  /**
-   * Hide vertical scroll indicator (default: false)
-   */
-  hideScrollIndicator?: boolean;
-
-  /**
-   * Enable keyboard avoiding behavior (default: false)
-   * Useful for screens with inputs
-   */
-  keyboardAvoiding?: boolean;
-
-}
-
-export const ScreenLayout: React.FC<ScreenLayoutProps> = ({
-  children,
-  scrollable = true,
-  edges = ['top'],
-  header,
-  footer,
-  backgroundColor,
-  containerStyle,
-  contentContainerStyle,
-  testID,
-  hideScrollIndicator = false,
-  keyboardAvoiding = false,
-}) => {
-  // Automatically uses current theme from global store
-  const tokens = useAppDesignTokens();
-  const styles = useMemo(() => getStyles(tokens), [tokens]);
-
-  const bgColor = backgroundColor || tokens.colors.backgroundPrimary;
-
-  // Non-scrollable layout
-  if (!scrollable) {
-    return (
-      <SafeAreaView
-        style={[styles.container, { backgroundColor: bgColor }, containerStyle]}
-        edges={edges}
-        testID={testID}
-      >
-        {header}
-        <View style={[styles.content, contentContainerStyle]}>
-          {children}
-        </View>
-        {footer}
-      </SafeAreaView>
-    );
-  }
-
-  // Scrollable layout (default)
-  return (
-    <SafeAreaView
-      style={[styles.container, { backgroundColor: bgColor }, containerStyle]}
-      edges={edges}
-      testID={testID}
-    >
-      {header}
-      <ScrollView
-        style={styles.scrollView}
-        contentContainerStyle={[styles.scrollContent, contentContainerStyle]}
-        showsVerticalScrollIndicator={!hideScrollIndicator}
-        keyboardShouldPersistTaps={keyboardAvoiding ? 'handled' : 'never'}
-      >
-        {children}
-      </ScrollView>
-      {footer}
-    </SafeAreaView>
-  );
-};
-
-const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
-  StyleSheet.create({
-    container: {
-      flex: 1,
-    },
-    content: {
-      flex: 1,
-    },
-    scrollView: {
-      flex: 1,
-    },
-    scrollContent: {
-      flexGrow: 1,
-      paddingHorizontal: tokens.spacing.md,
-      paddingBottom: tokens.spacing.lg,
-    },
-  });

package/src/presentation/organisms/index.ts

@@ -1,25 +0,0 @@
-/**
- * Organism Components Export Index
- *
- * Organisms are complex components composed of molecules and atoms
- * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
- *
- * Atomic Design Level: ORGANISMS
- */
-
-// Component exports
-// AppHeader - Main application header with navigation
-export { AppHeader } from './AppHeader';
-
-// ScreenLayout - Universal screen container with consistent layout
-export { ScreenLayout } from './ScreenLayout';
-
-// Type exports
-export type { AppHeaderProps } from './AppHeader';
-export type { ScreenLayoutProps } from './ScreenLayout';
-
-// Union type for all organism props (used for type narrowing)
-import type { AppHeaderProps } from './AppHeader';
-import type { ScreenLayoutProps } from './ScreenLayout';
-
-export type OrganismComponentProps = AppHeaderProps | ScreenLayoutProps;

package/src/presentation/utils/platformConstants.ts

@@ -1,124 +0,0 @@
-/**
- * Platform-Specific Constants
- *
- * Design system constants that ensure compliance with platform guidelines.
- * These values are based on official Human Interface Guidelines (HIG) from Apple and Material Design from Google.
- */
-
-/**
- * iOS Human Interface Guidelines (HIG) Constants
- *
- * @see https://developer.apple.com/design/human-interface-guidelines/layout
- */
-export const IOS_HIG = {
-  /**
-   * Minimum Touch Target Size
-   *
-   * Apple requires a minimum tappable area of 44pt x 44pt for ALL interactive controls.
-   * This is enforced during App Store review.
-   *
-   * @critical Violating this can result in App Store rejection
-   */
-  MIN_TOUCH_TARGET: 44,
-
-  /**
-   * Recommended Minimum Touch Target Size
-   *
-   * For better accessibility and usability, Apple recommends 48pt x 48pt.
-   */
-  RECOMMENDED_TOUCH_TARGET: 48,
-
-  /**
-   * Minimum Text Size
-   *
-   * Minimum font size for body text to ensure readability.
-   */
-  MIN_TEXT_SIZE: 17,
-
-  /**
-   * Minimum Contrast Ratio
-   *
-   * WCAG AA compliance requires 4.5:1 for normal text.
-   */
-  MIN_CONTRAST_RATIO: 4.5,
-} as const;
-
-/**
- * Android Material Design Guidelines Constants
- *
- * @see https://m3.material.io/foundations/layout/applying-layout/window-size-classes
- */
-export const ANDROID_MATERIAL = {
-  /**
-   * Minimum Touch Target Size
-   *
-   * Material Design 3 recommends a minimum of 48dp x 48dp.
-   */
-  MIN_TOUCH_TARGET: 48,
-
-  /**
-   * Minimum Text Size
-   *
-   * Minimum font size for body text.
-   */
-  MIN_TEXT_SIZE: 14,
-} as const;
-
-/**
- * Universal Platform Constants
- *
- * These values work across both iOS and Android, taking the more restrictive requirement.
- */
-export const PLATFORM_CONSTANTS = {
-  /**
-   * Minimum Touch Target Size
-   *
-   * Uses iOS requirement (44pt) as it's more restrictive than Android (48dp).
-   * This ensures compliance on both platforms.
-   */
-  MIN_TOUCH_TARGET: Math.max(IOS_HIG.MIN_TOUCH_TARGET, ANDROID_MATERIAL.MIN_TOUCH_TARGET),
-
-  /**
-   * Recommended Touch Target Size
-   *
-   * Uses the higher value between iOS and Android recommendations.
-   */
-  RECOMMENDED_TOUCH_TARGET: 48,
-
-  /**
-   * Minimum Text Size
-   *
-   * Uses iOS requirement as it's larger.
-   */
-  MIN_TEXT_SIZE: Math.max(IOS_HIG.MIN_TEXT_SIZE, ANDROID_MATERIAL.MIN_TEXT_SIZE),
-} as const;
-
-/**
- * Helper function to validate touch target size
- *
- * @param size - The size to validate (in pt/dp)
- * @returns true if size meets platform requirements
- */
-export const isValidTouchTarget = (size: number): boolean => {
-  return size >= IOS_HIG.MIN_TOUCH_TARGET;
-};
-
-/**
- * Helper function to get minimum touch target for component
- *
- * @param componentType - The type of component ('button' | 'input' | 'icon' | 'generic')
- * @returns The minimum touch target size for that component type
- */
-export const getMinTouchTarget = (componentType: 'button' | 'input' | 'icon' | 'generic' = 'generic'): number => {
-  switch (componentType) {
-    case 'button':
-      return PLATFORM_CONSTANTS.RECOMMENDED_TOUCH_TARGET; // 48pt recommended for buttons
-    case 'input':
-      return PLATFORM_CONSTANTS.RECOMMENDED_TOUCH_TARGET; // 48pt recommended for inputs
-    case 'icon':
-      return IOS_HIG.MIN_TOUCH_TARGET; // 44pt minimum for icon buttons
-    case 'generic':
-    default:
-      return IOS_HIG.MIN_TOUCH_TARGET; // 44pt minimum for all other interactive elements
-  }
-};