@umituz/react-native-design-system 1.0.0

package/src/presentation/molecules/FormField.tsx

@@ -0,0 +1,128 @@
+/**
+ * FormField Molecule - Complete Form Input with Label and Error
+ *
+ * Combines AtomicText (label/error) + AtomicInput (field)
+ * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
+ *
+ * Atomic Design Level: MOLECULE
+ * Composition: AtomicText + AtomicInput
+ */
+
+import React from 'react';
+import { View, ViewStyle } from 'react-native';
+import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
+import { AtomicText } from '../atoms/AtomicText';
+import { AtomicInput, AtomicInputProps } from '../atoms/AtomicInput';
+
+// =============================================================================
+// TYPE DEFINITIONS
+// =============================================================================
+
+export interface FormFieldProps extends Omit<AtomicInputProps, 'state' | 'label'> {
+  label?: string;
+  error?: string;
+  helperText?: string;
+  required?: boolean;
+  containerStyle?: ViewStyle;
+  style?: ViewStyle; // Alias for containerStyle (for convenience)
+}
+
+// =============================================================================
+// COMPONENT IMPLEMENTATION
+// =============================================================================
+
+export const FormField: React.FC<FormFieldProps> = ({
+  label,
+  error,
+  helperText,
+  required = false,
+  containerStyle,
+  style, // Accept both style and containerStyle
+  ...inputProps
+}) => {
+  const tokens = useAppDesignTokens();
+  const inputState = error ? 'error' : 'default';
+
+  const styles = getStyles(tokens);
+
+  return (
+    <View style={[styles.container, containerStyle || style]}>
+      {/* Label */}
+      {label && (
+        <View style={styles.labelContainer}>
+          <AtomicText type="labelMedium" color="primary" style={styles.label}>
+            {label}
+          </AtomicText>
+          {required && (
+            <AtomicText type="labelMedium" color="error">
+              {' *'}
+            </AtomicText>
+          )}
+        </View>
+      )}
+
+      {/* Input Field */}
+      <AtomicInput
+        {...inputProps}
+        label={label || ''}
+        state={inputState}
+      />
+
+      {/* Error Message */}
+      {error && (
+        <AtomicText
+          type="bodySmall"
+         
+          color="error"
+          style={styles.errorText}
+        >
+          {error}
+        </AtomicText>
+      )}
+
+      {/* Helper Text */}
+      {!error && helperText && (
+        <AtomicText
+          type="bodySmall"
+         
+          color="secondary"
+          style={styles.helperText}
+        >
+          {helperText}
+        </AtomicText>
+      )}
+    </View>
+  );
+};
+
+// =============================================================================
+// STYLES
+// =============================================================================
+
+const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) => ({
+  container: {
+    marginBottom: tokens.spacing.md,
+  } as ViewStyle,
+  labelContainer: {
+    flexDirection: 'row',
+    marginBottom: tokens.spacing.sm,
+  } as ViewStyle,
+  label: {
+    fontWeight: tokens.typography.labelMedium.fontWeight,
+    color: tokens.colors.textPrimary,
+  } as ViewStyle,
+  inputError: {
+    borderColor: tokens.colors.error,
+  } as ViewStyle,
+  errorText: {
+    marginTop: tokens.spacing.xs,
+  } as ViewStyle,
+  helperText: {
+    marginTop: tokens.spacing.xs,
+  } as ViewStyle,
+});
+
+// =============================================================================
+// EXPORTS
+// =============================================================================
+

package/src/presentation/molecules/GridContainer.tsx

@@ -0,0 +1,124 @@
+/**
+ * GridContainer Molecule - Responsive Grid Layout
+ *
+ * Provides flexible grid layout with configurable columns and gap
+ * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
+ *
+ * Atomic Design Level: MOLECULE
+ * Composition: View + Responsive Layout
+ *
+ * Usage:
+ * - Stats grids (2 columns)
+ * - Action grids (2 columns)
+ * - Product grids (2-3 columns)
+ * - Gallery grids (3-4 columns)
+ */
+
+import React from 'react';
+import { View, StyleSheet, ViewStyle, DimensionValue } from 'react-native';
+
+// =============================================================================
+// TYPE DEFINITIONS
+// =============================================================================
+
+export interface GridContainerProps {
+  /** Number of columns (default: 2) */
+  columns?: 2 | 3 | 4;
+  /** Gap between items in pixels (default: 8) */
+  gap?: number;
+  /** Container style override */
+  style?: ViewStyle;
+  /** Grid items to render */
+  children: React.ReactNode;
+}
+
+export interface GridItemProps {
+  /** Item content */
+  children: React.ReactNode;
+  /** Item style override */
+  style?: ViewStyle;
+}
+
+// =============================================================================
+// COMPONENT IMPLEMENTATION
+// =============================================================================
+
+const GridContainerComponent: React.FC<GridContainerProps> = ({
+  columns = 2,
+  gap = 8,
+  style,
+  children,
+}) => {
+  const styles = getStyles(gap);
+
+  return (
+    <View style={[styles.container, style]}>
+      {React.Children.map(children, (child) => {
+        if (React.isValidElement<GridItemProps>(child)) {
+          const childStyle = child.props.style;
+          const itemStyle = getItemStyle(columns, gap);
+          return React.cloneElement(child, {
+            style: StyleSheet.flatten([itemStyle, childStyle]),
+          });
+        }
+        return child;
+      })}
+    </View>
+  );
+};
+
+// =============================================================================
+// GRID ITEM COMPONENT
+// =============================================================================
+
+export const GridItem: React.FC<GridItemProps> = ({ children, style }) => {
+  return <View style={style}>{children}</View>;
+};
+
+// Export GridContainer with Item property
+export const GridContainer = GridContainerComponent as typeof GridContainerComponent & {
+  Item: typeof GridItem;
+};
+
+// Attach GridItem to GridContainer for convenient usage
+GridContainer.Item = GridItem;
+
+// =============================================================================
+// HELPERS
+// =============================================================================
+
+const getItemStyle = (columns: number, gap: number): ViewStyle => {
+  // Calculate width: (100% - total gap space) / columns
+  // For 2 columns with 8px gap: (100% - 8px) / 2 = ~48%
+  // For 3 columns with 8px gap: (100% - 16px) / 3 = ~31.33%
+
+  const widthMap: Record<number, DimensionValue> = {
+    2: '48%' as DimensionValue,
+    3: '31.33%' as DimensionValue,
+    4: '23%' as DimensionValue,
+  };
+
+  return {
+    width: widthMap[columns] || ('48%' as DimensionValue),
+    marginHorizontal: gap / 2,
+    marginBottom: gap * 1.5,
+  };
+};
+
+// =============================================================================
+// STYLES
+// =============================================================================
+
+const getStyles = (gap: number) =>
+  StyleSheet.create({
+    container: {
+      flexDirection: 'row' as const,
+      flexWrap: 'wrap' as const,
+      marginHorizontal: -(gap / 2),
+    },
+  });
+
+// =============================================================================
+// EXPORTS
+// =============================================================================
+

package/src/presentation/molecules/IconContainer.tsx

@@ -0,0 +1,94 @@
+/**
+ * IconContainer Molecule Component
+ *
+ * Standardized icon container with consistent sizing and styling.
+ * Used throughout app for icon displays in lists, cards, and settings.
+ *
+ * Features:
+ * - Consistent sizing system
+ * - Optional background circle
+ * - Optional gradient background
+ * - Theme-aware colors
+ * - Accessibility support
+ *
+ * Atomic Design: Molecule (View + Icon)
+ */
+
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
+import { LinearGradient } from 'expo-linear-gradient';
+
+interface IconContainerProps {
+  icon: React.ReactNode;
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  backgroundColor?: string;
+  gradient?: string[];
+  withBorder?: boolean;
+  borderColor?: string;
+  style?: object;
+  testID?: string;
+}
+
+const getSizeMap = (tokens: ReturnType<typeof useAppDesignTokens>) => ({
+  sm: tokens.iconSizes.sm,
+  md: tokens.iconSizes.md,
+  lg: tokens.iconSizes.lg,
+  xl: tokens.iconSizes.xl,
+});
+
+export const IconContainer: React.FC<IconContainerProps> = ({
+  icon,
+  size = 'md',
+  backgroundColor,
+  gradient,
+  withBorder = false,
+  borderColor,
+  style,
+  testID,
+}) => {
+  const tokens = useAppDesignTokens();
+  const sizeMap = getSizeMap(tokens);
+  const containerSize = sizeMap[size];
+  const borderRadius = containerSize / 2;
+
+  const containerStyle = [
+    styles.container,
+    {
+      width: containerSize,
+      height: containerSize,
+      borderRadius,
+      backgroundColor: backgroundColor || (gradient ? undefined : tokens.colors.surfaceVariant),
+    },
+    withBorder && {
+      borderWidth: 1,
+      borderColor: borderColor || tokens.colors.border,
+    },
+    style,
+  ];
+
+  if (gradient) {
+    return (
+      <LinearGradient
+        colors={gradient}
+        style={containerStyle}
+        testID={testID}
+      >
+        {icon}
+      </LinearGradient>
+    );
+  }
+
+  return (
+    <View style={containerStyle} testID={testID}>
+      {icon}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/presentation/molecules/LanguageSwitcher.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { TouchableOpacity, StyleSheet } from 'react-native';
+import { AtomicText, AtomicIcon } from '../atoms';
+import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
+import { useLanguageNavigation } from './languageswitcher/hooks/useLanguageNavigation';
+import { languageSwitcherConfig } from './languageswitcher/config/languageSwitcherConfig';
+
+interface LanguageSwitcherProps {
+  showName?: boolean;
+  showFlag?: boolean;
+  color?: string;
+  navigationScreen?: string;
+}
+
+export const LanguageSwitcher: React.FC<LanguageSwitcherProps> = ({
+  showName = false,
+  showFlag = true,
+  color,
+  navigationScreen = languageSwitcherConfig.defaultNavigationScreen,
+}) => {
+  const tokens = useAppDesignTokens();
+  const { currentLang, navigateToLanguageSelection } = useLanguageNavigation(navigationScreen);
+  const iconColor = color || tokens.colors.textPrimary;
+
+  const styles = getStyles(tokens);
+
+  return (
+    <TouchableOpacity style={styles.container} onPress={navigateToLanguageSelection} activeOpacity={0.7} hitSlop={languageSwitcherConfig.hitSlop}>
+      {showFlag && <AtomicText type="headlineSmall" style={styles.flag}>{currentLang.flag}</AtomicText>}
+      {showName && <AtomicText type="bodySmall" color={iconColor} style={styles.languageName}>{currentLang.nativeName}</AtomicText>}
+      {!showName && !showFlag && <AtomicIcon name="Languages" color="primary" />}
+    </TouchableOpacity>
+  );
+};
+
+const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) => ({
+  container: { flexDirection: 'row' as const, alignItems: 'center' as const, gap: tokens.spacing.sm, paddingHorizontal: tokens.spacing.xs },
+  flag: { fontSize: tokens.typography.headingSmall.fontSize },
+  languageName: { fontSize: tokens.typography.bodySmall.fontSize, fontWeight: tokens.typography.semibold },
+});
+
+export default LanguageSwitcher;

package/src/presentation/molecules/ListItem.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
+import { AtomicText } from '../atoms/AtomicText';
+import { AtomicIcon } from '../atoms/AtomicIcon';
+import { ListItemProps } from './listitem/types';
+import { getListItemStyles } from './listitem/styles/listItemStyles';
+
+export type { ListItemProps };
+
+export const ListItem: React.FC<ListItemProps> = ({
+  title, subtitle, leftIcon, rightIcon = 'forward', onPress, disabled = false, style,
+}) => {
+  const tokens = useAppDesignTokens();
+  const listItemStyles = getListItemStyles(tokens);
+  const Component: React.ComponentType<any> = onPress ? TouchableOpacity : View;
+
+  return (
+    <Component style={[listItemStyles.container, disabled && listItemStyles.disabled, style]} onPress={onPress} disabled={disabled} activeOpacity={0.7}>
+      {leftIcon && (
+        <View style={listItemStyles.iconContainer}>
+          <AtomicIcon name={leftIcon} color={disabled ? 'surfaceVariant' : 'primary'} />
+        </View>
+      )}
+      <View style={listItemStyles.content}>
+        <AtomicText type="bodyLarge" color={disabled ? 'surfaceVariant' : 'onSurface'} numberOfLines={1}>{title}</AtomicText>
+        {subtitle && <AtomicText type="bodySmall" color={disabled ? 'surfaceVariant' : 'surfaceVariant'} numberOfLines={2} style={listItemStyles.subtitle}>{subtitle}</AtomicText>}
+      </View>
+      {rightIcon && onPress && (
+        <View style={listItemStyles.iconContainer}>
+          <AtomicIcon name={rightIcon} color={disabled ? 'surfaceVariant' : 'surfaceVariant'} />
+        </View>
+      )}
+    </Component>
+  );
+};

package/src/presentation/molecules/ScreenHeader.tsx

@@ -0,0 +1,140 @@
+/**
+ * ScreenHeader Component - {{APP_NAME}}
+ *
+ * Reusable screen header with consistent back button placement
+ * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
+ *
+ * Features:
+ * - Top-left back button (arrow-back icon)
+ * - Centered title text
+ * - Optional right action button
+ * - Consistent spacing and layout
+ * - Works with all 100+ generated apps
+ *
+ * CRITICAL: Back button MUST ALWAYS be top-left (never bottom, never center)
+ */
+
+import React from 'react';
+import { View, StyleSheet, TouchableOpacity, ViewStyle } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import { AtomicIcon } from '../atoms/AtomicIcon';
+import { AtomicText } from '../atoms/AtomicText';
+import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
+
+export interface ScreenHeaderProps {
+  /** Screen title (centered) */
+  title: string;
+
+  /** Optional right action button */
+  rightAction?: React.ReactNode;
+
+  /** Custom back button action (default: navigation.goBack()) */
+  onBackPress?: () => void;
+
+  /** Hide back button (rare cases only) */
+  hideBackButton?: boolean;
+
+  /** Additional header style */
+  style?: ViewStyle;
+
+  /** Test ID for E2E testing */
+  testID?: string;
+}
+
+/**
+ * ScreenHeader Component
+ *
+ * @example
+ * // Basic usage (most common)
+ * <ScreenHeader title="Settings" />
+ *
+ * @example
+ * // With right action
+ * <ScreenHeader
+ *   title="Edit Profile"
+ *   rightAction={<TouchableOpacity onPress={handleSave}><Text>Save</Text></TouchableOpacity>}
+ * />
+ *
+ * @example
+ * // Custom back action
+ * <ScreenHeader
+ *   title="Unsaved Changes"
+ *   onBackPress={handleUnsavedChanges}
+ * />
+ */
+export const ScreenHeader: React.FC<ScreenHeaderProps> = ({
+  title,
+  rightAction,
+  onBackPress,
+  hideBackButton = false,
+  style,
+  testID = 'screen-header',
+}) => {
+  const navigation = useNavigation();
+  const tokens = useAppDesignTokens();
+
+  const handleBackPress = () => {
+    if (onBackPress) {
+      onBackPress();
+    } else {
+      navigation.goBack();
+    }
+  };
+
+  return (
+    <View
+      style={[
+        {
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          paddingHorizontal: tokens.spacing.screenPadding,
+          paddingVertical: tokens.spacing.md,
+          borderBottomWidth: 0.5,
+          backgroundColor: tokens.colors.backgroundPrimary,
+          borderBottomColor: tokens.colors.border,
+        },
+        style
+      ]}
+      testID={testID}
+    >
+      {/* Left: Back Button (ALWAYS top-left when visible) */}
+      <View style={{ width: 40, alignItems: 'flex-start' }}>
+        {!hideBackButton && (
+          <TouchableOpacity
+            onPress={handleBackPress}
+            hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+            testID={`${testID}-back-button`}
+          >
+            <AtomicIcon name="arrow-back" color="primary" />
+          </TouchableOpacity>
+        )}
+      </View>
+
+      {/* Center: Title */}
+      <View style={{ flex: 1, alignItems: 'center', paddingHorizontal: tokens.spacing.sm }}>
+        <AtomicText
+          type="headlineMedium"
+          style={[
+            {
+              fontWeight: tokens.typography.bold,
+              textAlign: 'center',
+              color: tokens.colors.textPrimary,
+            }
+          ]}
+          numberOfLines={1}
+          testID={`${testID}-title`}
+        >
+          {title}
+        </AtomicText>
+      </View>
+
+      {/* Right: Optional Action or Placeholder */}
+      <View style={{ width: 40, alignItems: 'flex-start' }}>
+        {rightAction || <View style={{ width: 40 }} />}
+      </View>
+    </View>
+  );
+};
+
+export default ScreenHeader;

package/src/presentation/molecules/SearchBar.tsx

@@ -0,0 +1,85 @@
+/**
+ * SearchBar Molecule - Search Input with Icon and Clear Button
+ *
+ * Combines AtomicInput + AtomicIcon + AtomicButton
+ * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
+ *
+ * Atomic Design Level: MOLECULE
+ * Composition: AtomicInput + AtomicIcon + TouchableOpacity
+ */
+
+import React from 'react';
+import { View, TouchableOpacity, ViewStyle } from 'react-native';
+import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
+import { AtomicInput, AtomicInputProps } from '../atoms/AtomicInput';
+import { AtomicIcon } from '../atoms/AtomicIcon';
+
+// =============================================================================
+// TYPE DEFINITIONS
+// =============================================================================
+
+export interface SearchBarProps extends Omit<AtomicInputProps, 'leftIcon' | 'rightIcon'> {
+  onClear?: () => void;
+  containerStyle?: ViewStyle;
+}
+
+// =============================================================================
+// COMPONENT IMPLEMENTATION
+// =============================================================================
+
+export const SearchBar: React.FC<SearchBarProps> = ({
+  value,
+  onChangeText,
+  onClear,
+  placeholder = 'Search...',
+  containerStyle,
+  ...inputProps
+}) => {
+  const tokens = useAppDesignTokens();
+
+  const handleClear = () => {
+    if (onChangeText) {
+      onChangeText('');
+    }
+    if (onClear) {
+      onClear();
+    }
+  };
+
+  const styles = getStyles(tokens);
+
+  return (
+    <View style={[styles.container, containerStyle]}>
+      <AtomicInput
+        {...inputProps}
+        value={value}
+        onChangeText={onChangeText}
+        placeholder={placeholder}
+        variant="filled"
+        style={styles.input}
+        leadingIcon="Search"
+        trailingIcon={value && value.length > 0 ? "X" : undefined}
+        onTrailingIconPress={value && value.length > 0 ? handleClear : undefined}
+      />
+    </View>
+  );
+};
+
+// =============================================================================
+// STYLES
+// =============================================================================
+
+const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) => ({
+  container: {
+    width: '100%',
+    marginVertical: tokens.spacing.sm,
+  } as ViewStyle,
+  input: {
+    backgroundColor: tokens.colors.surfaceVariant,
+  } as ViewStyle,
+});
+
+// =============================================================================
+// EXPORTS
+// =============================================================================
+