@umituz/react-native-design-system 1.8.0 → 1.8.1

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/AppHeader.tsx

@@ -1,137 +0,0 @@
-/**
- * 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 '@umituz/react-native-theme';
-import { AtomicText } from '../atoms/AtomicText';
-import { AtomicButton } from '../atoms/AtomicButton';
-import { AtomicIcon } from '../atoms/AtomicIcon';
-import type { IconName } from '@umituz/react-native-icon';
-
-// =============================================================================
-// TYPE DEFINITIONS
-// =============================================================================
-
-/**
- * AppHeader component props
- *
- * leftIcon/rightIcon: Any MaterialIcons name
- * @see https://fonts.google.com/icons
- */
-export interface AppHeaderProps {
-  title: string;
-  subtitle?: string;
-  leftIcon?: IconName;
-  onLeftPress?: () => void;
-  rightIcon?: IconName;
-  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

@@ -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;