@umituz/react-native-design-system 1.5.33 → 1.5.34

package/src/presentation/organisms/FormContainer.js

@@ -1,126 +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, } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { useAppDesignTokens } from '@umituz/react-native-theme';
-import { useResponsive } from '../hooks/useResponsive';
-/**
- * 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 = ({ 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.js

@@ -1,68 +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 } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
-import { useAppDesignTokens } from '@umituz/react-native-theme';
-export const ScreenLayout = ({ 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) => 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.js

@@ -1,13 +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';

package/src/presentation/tokens/commonStyles.js

@@ -1,219 +0,0 @@
-/**
- * Common Styles - Reusable Style Patterns
- *
- * Centralized style utilities to reduce duplication across screens.
- * These styles are composable and follow DRY principles.
- *
- * Usage:
- * ```typescript
- * import { useCommonStyles } from '@domains/design-system/commonStyles';
- *
- * const MyComponent = () => {
- *   const commonStyles = useCommonStyles();
- *   return <View style={commonStyles.screenContainer}>...</View>;
- * };
- * ```
- */
-import { useAppDesignTokens } from '@umituz/react-native-theme';
-/**
- * Hook to get common styles with dynamic theme support
- */
-export const useCommonStyles = () => {
-    const tokens = useAppDesignTokens();
-    return {
-        // ========================================================================
-        // SCREEN CONTAINERS
-        // ========================================================================
-        /**
-         * Standard full-screen container
-         * Most common pattern: flex: 1 with background color
-         */
-        screenContainer: {
-            flex: 1,
-            backgroundColor: tokens.colors.backgroundPrimary,
-        },
-        /**
-         * Basic flex container without background
-         * Use when background is set elsewhere or not needed
-         */
-        flexContainer: {
-            flex: 1,
-        },
-        /**
-         * Screen container with secondary background
-         */
-        screenContainerSecondary: {
-            flex: 1,
-            backgroundColor: tokens.colors.backgroundSecondary,
-        },
-        // ========================================================================
-        // SCROLL CONTAINERS
-        // ========================================================================
-        /**
-         * Standard ScrollView wrapper
-         */
-        scrollView: {
-            flex: 1,
-        },
-        /**
-         * ScrollView content container with standard padding
-         */
-        scrollContent: {
-            paddingHorizontal: tokens.spacing.lg,
-            paddingBottom: tokens.spacing.xl,
-        },
-        /**
-         * ScrollView content that grows to fill available space
-         */
-        scrollContentGrow: {
-            flexGrow: 1,
-            padding: tokens.spacing.lg,
-        },
-        /**
-         * Centered scroll content (for forms, onboarding screens)
-         */
-        scrollContentCentered: {
-            flexGrow: 1,
-            padding: tokens.spacing.lg,
-            justifyContent: 'center',
-        },
-        // ========================================================================
-        // LAYOUT UTILITIES
-        // ========================================================================
-        /**
-         * Centered container - both horizontal and vertical
-         * Perfect for empty states, splash screens
-         */
-        centerContainer: {
-            flex: 1,
-            justifyContent: 'center',
-            alignItems: 'center',
-        },
-        /**
-         * Centered container with padding
-         */
-        centerContainerPadded: {
-            flex: 1,
-            justifyContent: 'center',
-            alignItems: 'center',
-            paddingHorizontal: tokens.spacing.xl,
-        },
-        /**
-         * Horizontal row layout
-         */
-        row: {
-            flexDirection: 'row',
-            alignItems: 'center',
-        },
-        /**
-         * Horizontal row with space between
-         */
-        rowBetween: {
-            flexDirection: 'row',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-        },
-        /**
-         * Horizontal row centered
-         */
-        rowCenter: {
-            flexDirection: 'row',
-            alignItems: 'center',
-            justifyContent: 'center',
-        },
-        // ========================================================================
-        // PADDING UTILITIES
-        // ========================================================================
-        /**
-         * Standard horizontal padding
-         */
-        paddedHorizontal: {
-            paddingHorizontal: tokens.spacing.lg,
-        },
-        /**
-         * Standard vertical padding
-         */
-        paddedVertical: {
-            paddingVertical: tokens.spacing.lg,
-        },
-        /**
-         * Standard padding all sides
-         */
-        padded: {
-            padding: tokens.spacing.lg,
-        },
-        // ========================================================================
-        // SECTION STYLES
-        // ========================================================================
-        /**
-         * Standard section container
-         */
-        section: {
-            marginBottom: tokens.spacing.xl,
-        },
-        /**
-         * Section with padding
-         */
-        sectionPadded: {
-            marginBottom: tokens.spacing.xl,
-            paddingHorizontal: tokens.spacing.lg,
-        },
-        // ========================================================================
-        // TEXT STYLES
-        // ========================================================================
-        /**
-         * Screen title - primary heading
-         */
-        screenTitle: {
-            ...tokens.typography.headingLarge,
-            color: tokens.colors.textPrimary,
-            marginBottom: tokens.spacing.sm,
-        },
-        /**
-         * Section title
-         */
-        sectionTitle: {
-            ...tokens.typography.headingMedium,
-            color: tokens.colors.textPrimary,
-            marginBottom: tokens.spacing.md,
-        },
-        /**
-         * Subtitle/description text
-         */
-        subtitle: {
-            ...tokens.typography.bodyMedium,
-            color: tokens.colors.textSecondary,
-            textAlign: 'center',
-        },
-        /**
-         * Body text
-         */
-        bodyText: {
-            ...tokens.typography.bodyMedium,
-            color: tokens.colors.textPrimary,
-        },
-        /**
-         * Secondary text (muted)
-         */
-        secondaryText: {
-            ...tokens.typography.bodySmall,
-            color: tokens.colors.textSecondary,
-        },
-        // ========================================================================
-        // FORM STYLES
-        // ========================================================================
-        /**
-         * Form container
-         */
-        form: {
-            width: '100%',
-        },
-        /**
-         * Form header section
-         */
-        formHeader: {
-            alignItems: 'center',
-            marginBottom: tokens.spacing.xl,
-        },
-    };
-};

package/src/presentation/utils/platformConstants.js

@@ -1,113 +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,
-};
-/**
- * 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,
-};
-/**
- * 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),
-};
-/**
- * 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) => {
-    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 = 'generic') => {
-    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
-    }
-};