@umituz/react-native-design-system 1.0.0

package/src/presentation/organisms/AppHeader.tsx

@@ -0,0 +1,136 @@
+/**
+ * AppHeader Organism - Application Header Component
+ *
+ * Complex header combining atoms and molecules
+ * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
+ *
+ * Atomic Design Level: ORGANISM
+ * Composition: AtomicIcon + AtomicText + AtomicButton + SearchBar
+ */
+
+import React from 'react';
+import { View, ViewStyle, SafeAreaView } from 'react-native';
+import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
+import { AtomicText } from '../atoms/AtomicText';
+import { AtomicButton } from '../atoms/AtomicButton';
+import { AtomicIcon } from '../atoms/AtomicIcon';
+
+// =============================================================================
+// TYPE DEFINITIONS
+// =============================================================================
+
+/**
+ * AppHeader component props
+ *
+ * leftIcon/rightIcon: Any MaterialIcons name
+ * @see https://fonts.google.com/icons
+ */
+export interface AppHeaderProps {
+  title: string;
+  subtitle?: string;
+  leftIcon?: string; // MaterialIcons name
+  onLeftPress?: () => void;
+  rightIcon?: string; // MaterialIcons name
+  onRightPress?: () => void;
+  showShadow?: boolean;
+  backgroundColor?: string;
+  style?: ViewStyle;
+}
+
+// =============================================================================
+// COMPONENT IMPLEMENTATION
+// =============================================================================
+
+export const AppHeader: React.FC<AppHeaderProps> = ({
+  title,
+  subtitle,
+  leftIcon,
+  onLeftPress,
+  rightIcon,
+  onRightPress,
+  showShadow = true,
+  backgroundColor,
+  style,
+}) => {
+  const tokens = useAppDesignTokens();
+  const bgColor = backgroundColor || tokens.colors.surface;
+  const styles = getStyles(tokens);
+
+  return (
+    <SafeAreaView style={[styles.safeArea, { backgroundColor: bgColor }]}>
+      <View style={[styles.container, { backgroundColor: bgColor }, style]}>
+        {/* Left Action */}
+        <View style={styles.leftContainer}>
+          {leftIcon && onLeftPress && (
+            <AtomicButton
+              variant="text"
+              size="sm"
+              onPress={onLeftPress}
+              icon={leftIcon}
+            />
+          )}
+        </View>
+
+        {/* Title Section */}
+        <View style={styles.titleContainer}>
+          <AtomicText type="titleLarge" color="primary" numberOfLines={1}>
+            {title}
+          </AtomicText>
+          {subtitle && (
+            <AtomicText type="bodySmall" color="secondary" numberOfLines={1}>
+              {subtitle}
+            </AtomicText>
+          )}
+        </View>
+
+        {/* Right Action */}
+        <View style={styles.rightContainer}>
+          {rightIcon && onRightPress && (
+            <AtomicButton
+              variant="text"
+              size="sm"
+              onPress={onRightPress}
+              icon={rightIcon}
+            />
+          )}
+        </View>
+      </View>
+    </SafeAreaView>
+  );
+};
+
+// =============================================================================
+// STYLES
+// =============================================================================
+
+const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) => ({
+  safeArea: {
+    backgroundColor: tokens.colors.surface,
+  } as ViewStyle,
+  container: {
+    flexDirection: 'row' as const,
+    alignItems: 'center' as const,
+    justifyContent: 'space-between' as const,
+    paddingHorizontal: tokens.spacing.md,
+    paddingVertical: tokens.spacing.sm,
+    minHeight: tokens.iconSizes.xl + tokens.spacing.md,
+  } as ViewStyle,
+  leftContainer: {
+    width: tokens.iconSizes.xl + tokens.spacing.sm,
+    alignItems: 'flex-start' as const,
+  } as ViewStyle,
+  titleContainer: {
+    flex: 1,
+    alignItems: 'center' as const,
+    paddingHorizontal: tokens.spacing.sm,
+  } as ViewStyle,
+  rightContainer: {
+    width: tokens.iconSizes.xl + tokens.spacing.sm,
+    alignItems: 'flex-start' as const,
+  } as ViewStyle,
+});
+
+// =============================================================================
+// EXPORTS
+// =============================================================================
+

package/src/presentation/organisms/FormContainer.tsx

@@ -0,0 +1,180 @@
+/**
+ * FormContainer Component
+ *
+ * A reusable container for forms with Material Design 3 integration,
+ * proper keyboard handling, and responsive layout.
+ *
+ * Features:
+ * - Material Design 3 Surface component for elevation and theme integration
+ * - 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 and elevation
+ * - 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)
+ * - Material Design 3 surface with proper elevation
+ * - Reduces boilerplate in form screens
+ * - Universal code - no platform checks, works on iOS, Android, Web
+ *
+ * Technical Details:
+ * - Uses ScrollView with contentContainerStyle for keyboard handling
+ * - React Native Paper Surface for Material Design 3 integration
+ * - 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 { Surface } from 'react-native-paper';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
+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;
+  /** Disable Material Design elevation (default: false) */
+  disableElevation?: boolean;
+}
+
+/**
+ * FormContainer - Universal form wrapper component
+ *
+ * Wraps forms with:
+ * - Material Design 3 Surface component
+ * - 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,
+  disableElevation = false,
+}) => {
+  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,
+        },
+        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.spacing.lg,
+      tokens.spacing.xl,
+      formBottomPadding,
+      formContentWidth,
+      formElementSpacing,
+      insets.bottom,
+    ]
+  );
+
+  // 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}>
+      <Surface
+        style={styles.surface}
+        elevation={disableElevation ? 0 : 1}
+      >
+        <ScrollView
+          style={styles.scrollView}
+          contentContainerStyle={[styles.contentContainer, contentContainerStyle]}
+          keyboardShouldPersistTaps="handled"
+          keyboardDismissMode="on-drag"
+          showsVerticalScrollIndicator={showsVerticalScrollIndicator}
+          testID={testID ? `${testID}-scroll` : undefined}
+        >
+          {childrenWithSpacing}
+        </ScrollView>
+      </Surface>
+    </View>
+  );
+};

package/src/presentation/organisms/ScreenLayout.tsx

@@ -0,0 +1,209 @@
+/**
+ * ScreenLayout - Universal Screen Container Component
+ *
+ * Provides consistent layout structure for all screens:
+ * - SafeAreaView with configurable edges
+ * - Optional ScrollView for content
+ * - Loading state support
+ * - Theme-aware background colors
+ * - Optional header/footer slots
+ * - Consistent spacing and padding
+ *
+ * Usage:
+ * <ScreenLayout>
+ *   <View>Your content here</View>
+ * </ScreenLayout>
+ *
+ * Advanced:
+ * <ScreenLayout
+ *   scrollable={false}
+ *   loading={isLoading}
+ *   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 '../hooks/useAppDesignTokens';
+import { LoadingState } from '../loading/presentation/components/LoadingState';
+
+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[];
+
+  /**
+   * Show loading state
+   * When true, displays LoadingState component
+   */
+  loading?: boolean;
+
+  /**
+   * Loading icon name (default: 'settings')
+   */
+  loadingIcon?: string;
+
+  /**
+   * Loading message (default: 'Loading...')
+   */
+  loadingMessage?: string;
+
+  /**
+   * 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'],
+  loading = false,
+  loadingIcon = 'settings',
+  loadingMessage = 'Loading...',
+  header,
+  footer,
+  backgroundColor,
+  containerStyle,
+  contentContainerStyle,
+  testID,
+  hideScrollIndicator = false,
+  keyboardAvoiding = false,
+}) => {
+  const tokens = useAppDesignTokens();
+  const styles = useMemo(() => getStyles(tokens), [tokens]);
+
+  const bgColor = backgroundColor || tokens.colors.backgroundPrimary;
+
+  // Show loading state
+  if (loading) {
+    return (
+      <SafeAreaView
+        style={[styles.container, { backgroundColor: bgColor }, containerStyle]}
+        edges={edges}
+        testID={testID}
+      >
+        <LoadingState
+          icon={loadingIcon}
+          message={loadingMessage}
+          size="large"
+          fullScreen
+        />
+      </SafeAreaView>
+    );
+  }
+
+  // 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

@@ -0,0 +1,25 @@
+/**
+ * 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/tokens/AppDesignTokens.ts

@@ -0,0 +1,57 @@
+/**
+ * DESIGN TOKENS - PUBLIC API
+ *
+ * ✅ CLEAN BARREL EXPORT - Single source of truth
+ * ✅ ZERO DUPLICATION - All tokens from TokenFactory
+ * ✅ TYPE-SAFE - Full TypeScript support
+ * ✅ FACTORY-FIRST - Benefits all 100+ generated apps
+ *
+ * @module AppDesignTokens
+ */
+
+// =============================================================================
+// CORE EXPORTS (from TokenFactory)
+// =============================================================================
+
+export {
+  createDesignTokens,
+  STATIC_DESIGN_TOKENS,
+  STATIC_TOKENS,
+  withAlpha,
+  type DesignTokens,
+  type ThemeMode,
+  type ColorPalette,
+} from './core/TokenFactory';
+
+// =============================================================================
+// BASE TOKEN EXPORTS
+// =============================================================================
+
+export {
+  BASE_TOKENS,
+  spacing,
+  typography,
+  animations,
+  borders,
+  iconSizes,
+  opacity,
+  avatarSizes,
+  type Spacing,
+  type Typography,
+  type Animations,
+  type Borders,
+  type IconSizes,
+  type Opacity,
+  type AvatarSizes,
+  type BaseTokens,
+} from './core/BaseTokens';
+
+// =============================================================================
+// COLOR PALETTE EXPORTS
+// =============================================================================
+
+export {
+  lightColors,
+  darkColors,
+  getColorPalette,
+} from './core/ColorPalette';