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

package/src/presentation/molecules/EmptyState.tsx

@@ -1,130 +0,0 @@
-/**
- * EmptyState Molecule - Universal Empty State Display
- *
- * Displays icon, title, and subtitle for empty data scenarios
- * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
- *
- * Atomic Design Level: MOLECULE
- * Composition: Icon + AtomicText + Layout
- *
- * Usage:
- * - Empty lists
- * - Empty grids
- * - No search results
- * - No data states
- */
-
-import React from 'react';
-import { View, StyleSheet, ViewStyle, TextStyle } from 'react-native';
-import { AtomicText, AtomicIcon } from '../atoms';
-import { useAppDesignTokens } from '@umituz/react-native-theme';
-
-// =============================================================================
-// TYPE DEFINITIONS
-// =============================================================================
-
-export interface EmptyStateProps {
-  /** Material icon name */
-  icon: string;
-  /** Icon size (default: xl) */
-  iconSize?: 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
-  /** Main heading text */
-  title: string;
-  /** Descriptive subtitle text */
-  subtitle?: string;
-  /** Custom icon color (default: textTertiary) */
-  iconColor?: string;
-  /** Custom title color (default: textPrimary) */
-  titleColor?: string;
-  /** Custom subtitle color (default: textSecondary) */
-  subtitleColor?: string;
-  /** Container style override */
-  style?: ViewStyle;
-  /** Title style override */
-  titleStyle?: TextStyle;
-  /** Subtitle style override */
-  subtitleStyle?: TextStyle;
-}
-
-// =============================================================================
-// COMPONENT IMPLEMENTATION
-// =============================================================================
-
-export const EmptyState: React.FC<EmptyStateProps> = ({
-  icon,
-  iconSize = 'xl',
-  title,
-  subtitle,
-  iconColor,
-  titleColor,
-  subtitleColor,
-  style,
-  titleStyle,
-  subtitleStyle,
-}) => {
-  const tokens = useAppDesignTokens();
-  const styles = getStyles(tokens);
-
-  return (
-    <View style={[styles.container, style]}>
-      <AtomicIcon
-        name={icon}
-        size={iconSize}
-        customColor={iconColor || tokens.colors.textSecondary}
-      />
-      <AtomicText
-        type="headlineMedium"
-        color={titleColor || tokens.colors.textPrimary}
-        style={StyleSheet.flatten([
-          styles.title,
-          titleStyle,
-        ])}
-      >
-        {title}
-      </AtomicText>
-      {subtitle && (
-        <AtomicText
-          type="bodyMedium"
-          color={subtitleColor || tokens.colors.textSecondary}
-          style={StyleSheet.flatten([
-            styles.subtitle,
-            subtitleStyle,
-          ])}
-        >
-          {subtitle}
-        </AtomicText>
-      )}
-    </View>
-  );
-};
-
-// =============================================================================
-// STYLES
-// =============================================================================
-
-const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
-  StyleSheet.create({
-    container: {
-      flex: 1,
-      justifyContent: 'center',
-      alignItems: 'center',
-      paddingVertical: tokens.spacing.xl,
-      paddingHorizontal: tokens.spacing.lg,
-    },
-    title: {
-      fontSize: tokens.typography.headingMedium.fontSize,
-      fontWeight: tokens.typography.headingMedium.fontWeight,
-      marginTop: tokens.spacing.md,
-      textAlign: 'center',
-    },
-    subtitle: {
-      fontSize: tokens.typography.bodySmall.fontSize,
-      marginTop: tokens.spacing.xs,
-      textAlign: 'center',
-    },
-  });
-
-// =============================================================================
-// EXPORTS
-// =============================================================================
-

package/src/presentation/molecules/FormField.tsx

@@ -1,128 +0,0 @@
-/**
- * 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 '@umituz/react-native-theme';
-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

@@ -1,124 +0,0 @@
-/**
- * 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

@@ -1,94 +0,0 @@
-/**
- * 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 '@umituz/react-native-theme';
-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/ListItem.tsx

@@ -1,36 +0,0 @@
-import React from 'react';
-import { TouchableOpacity, View } from 'react-native';
-import { useAppDesignTokens } from '@umituz/react-native-theme';
-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 : undefined, 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="surfaceVariant" numberOfLines={2} style={listItemStyles.subtitle}>{subtitle}</AtomicText>}
-      </View>
-      {rightIcon && onPress && (
-        <View style={listItemStyles.iconContainer}>
-          <AtomicIcon name={rightIcon} color="surfaceVariant" />
-        </View>
-      )}
-    </Component>
-  );
-};

package/src/presentation/molecules/ScreenHeader.tsx

@@ -1,140 +0,0 @@
-/**
- * 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 '@umituz/react-native-theme';
-
-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;