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

package/src/presentation/molecules/IconContainer.js

@@ -1,59 +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';
-const getSizeMap = (tokens) => ({
-    sm: tokens.iconSizes.sm,
-    md: tokens.iconSizes.md,
-    lg: tokens.iconSizes.lg,
-    xl: tokens.iconSizes.xl,
-});
-export const IconContainer = ({ 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.js

@@ -1,23 +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 { getListItemStyles } from './listitem/styles/listItemStyles';
-export const ListItem = ({ title, subtitle, leftIcon, rightIcon = 'forward', onPress, disabled = false, style, }) => {
-    const tokens = useAppDesignTokens();
-    const listItemStyles = getListItemStyles(tokens);
-    const Component = 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.js

@@ -1,93 +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, TouchableOpacity } 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';
-/**
- * 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 = ({ 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.js

@@ -1,46 +0,0 @@
-/**
- * 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 } from 'react-native';
-import { useAppDesignTokens } from '@umituz/react-native-theme';
-import { AtomicInput } from '../atoms/AtomicInput';
-// =============================================================================
-// COMPONENT IMPLEMENTATION
-// =============================================================================
-export const SearchBar = ({ 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) => ({
-    container: {
-        width: '100%',
-        marginVertical: tokens.spacing.sm,
-    },
-    input: {
-        backgroundColor: tokens.colors.surfaceVariant,
-    },
-});
-// =============================================================================
-// EXPORTS
-// =============================================================================

package/src/presentation/molecules/SectionCard.js

@@ -1,46 +0,0 @@
-/**
- * SectionCard Molecule Component
- *
- * Reusable section card with title and content area.
- * Used throughout settings screens for consistent grouping.
- *
- * Features:
- * - Automatic theme-aware styling
- * - Uppercase section titles with proper spacing
- * - Built on AtomicCard for consistency
- * - Flexible content area
- *
- * Atomic Design: Molecule (Card + Text)
- */
-import React from 'react';
-import { View, StyleSheet } from 'react-native';
-import { useAppDesignTokens } from '@umituz/react-native-theme';
-import { AtomicCard } from '../atoms/AtomicCard';
-import { AtomicText } from '../atoms/AtomicText';
-export const SectionCard = ({ title, children, style, contentStyle, testID, }) => {
-    const tokens = useAppDesignTokens();
-    const styles = getStyles(tokens);
-    return (<AtomicCard variant="outlined" style={StyleSheet.flatten([styles.card, style])} testID={testID}>
-      <AtomicText type="labelLarge" color={tokens.colors.textSecondary} style={styles.title}>
-        {title.toUpperCase()}
-      </AtomicText>
-      <View style={contentStyle}>
-        {children}
-      </View>
-    </AtomicCard>);
-};
-const getStyles = (tokens) => StyleSheet.create({
-    card: {
-        paddingVertical: tokens.spacing.md,
-        paddingHorizontal: 0,
-        marginHorizontal: tokens.spacing.md,
-        marginBottom: tokens.spacing.lg,
-    },
-    title: {
-        fontSize: tokens.typography.labelLarge.fontSize,
-        fontWeight: tokens.typography.labelLarge.fontWeight,
-        letterSpacing: 0.5,
-        paddingHorizontal: tokens.spacing.md,
-        marginBottom: tokens.spacing.sm,
-    },
-});

package/src/presentation/molecules/SectionContainer.js

@@ -1,63 +0,0 @@
-/**
- * SectionContainer Molecule - Universal Section Wrapper
- *
- * Provides consistent section layout with optional title
- * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
- *
- * Atomic Design Level: MOLECULE
- * Composition: View + AtomicText + Layout
- *
- * Usage:
- * - Home screen sections
- * - Dashboard sections
- * - Settings groups
- * - Content sections
- */
-import React from 'react';
-import { View, StyleSheet } from 'react-native';
-import { AtomicText } from '../atoms/AtomicText';
-import { useAppDesignTokens } from '@umituz/react-native-theme';
-// =============================================================================
-// COMPONENT IMPLEMENTATION
-// =============================================================================
-export const SectionContainer = ({ title, titleColor, titleStyle, style, children, rightAction, }) => {
-    const tokens = useAppDesignTokens();
-    const styles = getStyles(tokens);
-    return (<View style={[styles.section, style]}>
-      {title && (<View style={styles.header}>
-          <AtomicText type="titleLarge" color={titleColor || "primary"} style={StyleSheet.flatten([
-                styles.sectionTitle,
-                titleStyle,
-            ])}>
-            {title}
-          </AtomicText>
-          {rightAction && <View style={styles.rightAction}>{rightAction}</View>}
-        </View>)}
-      {children}
-    </View>);
-};
-// =============================================================================
-// STYLES
-// =============================================================================
-const getStyles = (tokens) => StyleSheet.create({
-    section: {
-        marginBottom: tokens.spacing.lg,
-        paddingHorizontal: tokens.spacing.md,
-    },
-    header: {
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        marginBottom: tokens.spacing.md,
-    },
-    sectionTitle: {
-        fontSize: tokens.typography.titleLarge.fontSize,
-        fontWeight: tokens.typography.titleLarge.fontWeight,
-    },
-    rightAction: {
-        marginLeft: tokens.spacing.sm,
-    },
-});
-// =============================================================================
-// EXPORTS
-// =============================================================================

package/src/presentation/molecules/SectionHeader.js

@@ -1,72 +0,0 @@
-/**
- * SectionHeader Molecule - Universal Section Header
- *
- * Displays section title with optional subtitle
- * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
- *
- * Atomic Design Level: MOLECULE
- * Composition: AtomicText + Layout
- *
- * Usage:
- * - List headers
- * - Grid headers
- * - Section dividers
- * - Screen headers
- */
-import React from 'react';
-import { View, StyleSheet } from 'react-native';
-import { AtomicText } from '../atoms/AtomicText';
-import { useAppDesignTokens } from '@umituz/react-native-theme';
-// =============================================================================
-// COMPONENT IMPLEMENTATION
-// =============================================================================
-export const SectionHeader = ({ title, subtitle, titleColor, subtitleColor, style, titleStyle, subtitleStyle, rightAction, }) => {
-    const tokens = useAppDesignTokens();
-    const styles = getStyles(tokens);
-    return (<View style={[styles.container, style]}>
-      <View style={styles.textContainer}>
-        <AtomicText type="headlineLarge" color={titleColor || "primary"} style={StyleSheet.flatten([
-            styles.title,
-            titleStyle,
-        ])}>
-          {title}
-        </AtomicText>
-        {subtitle && (<AtomicText type="bodyMedium" color={subtitleColor || "secondary"} style={StyleSheet.flatten([
-                styles.subtitle,
-                subtitleStyle,
-            ])}>
-            {subtitle}
-          </AtomicText>)}
-      </View>
-      {rightAction && <View style={styles.rightAction}>{rightAction}</View>}
-    </View>);
-};
-// =============================================================================
-// STYLES
-// =============================================================================
-const getStyles = (tokens) => StyleSheet.create({
-    container: {
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        paddingHorizontal: tokens.spacing.md,
-        paddingVertical: tokens.spacing.sm,
-    },
-    textContainer: {
-        flex: 1,
-    },
-    title: {
-        fontSize: tokens.typography.headlineLarge.fontSize,
-        fontWeight: tokens.typography.headlineLarge.fontWeight,
-        marginBottom: tokens.spacing.xs,
-    },
-    subtitle: {
-        fontSize: tokens.typography.bodyMedium.fontSize,
-    },
-    rightAction: {
-        marginLeft: tokens.spacing.sm,
-    },
-});
-// =============================================================================
-// EXPORTS
-// =============================================================================

package/src/presentation/molecules/confirmation-modal/styles/confirmationModalStyles.js

@@ -1,114 +0,0 @@
-/**
- * AtomicConfirmationModal Style Utilities
- *
- * Styling functions for confirmation modal component
- */
-/**
- * Get variant configuration (icon and color only)
- * Note: Confirm text is handled in component with translations
- */
-export const getVariantConfig = (variant, tokens) => {
-    switch (variant) {
-        case 'destructive':
-            return {
-                icon: 'warning',
-                iconColor: 'error',
-            };
-        case 'warning':
-            return {
-                icon: 'warning',
-                iconColor: 'warning',
-            };
-        case 'success':
-            return {
-                icon: 'check-circle',
-                iconColor: 'success',
-            };
-        case 'default':
-        default:
-            return {
-                icon: 'help-circle',
-                iconColor: 'primary',
-            };
-    }
-};
-/**
- * Get modal overlay style
- */
-export const getModalOverlayStyle = (tokens) => ({
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-});
-/**
- * Get backdrop style (invisible layer for dismissing)
- */
-export const getBackdropStyle = () => ({
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-});
-/**
- * Get modal container style
- */
-export const getModalContainerStyle = (tokens) => ({
-    width: '85%',
-    maxWidth: 400,
-    backgroundColor: tokens.colors.surface,
-    borderRadius: 16,
-    padding: 24,
-    alignItems: 'center',
-    borderWidth: 1,
-    borderColor: tokens.colors.outline,
-});
-/**
- * Get icon container style
- */
-export const getIconContainerStyle = (tokens) => ({
-    marginBottom: 16,
-});
-/**
- * Get title container style
- */
-export const getTitleContainerStyle = (tokens) => ({
-    marginBottom: 8,
-});
-/**
- * Get message container style
- */
-export const getMessageContainerStyle = (tokens) => ({
-    marginBottom: 24,
-});
-/**
- * Get button container style
- */
-export const getButtonContainerStyle = (tokens) => ({
-    flexDirection: 'row',
-    gap: 12,
-    width: '100%',
-});
-/**
- * Get button style
- */
-export const getButtonStyle = () => ({
-    flex: 1,
-});
-/**
- * Get confirm button variant based on modal variant
- */
-export const getConfirmButtonVariant = (variant) => {
-    switch (variant) {
-        case 'destructive':
-            return 'primary'; // Will use error color
-        case 'warning':
-            return 'primary'; // Will use warning color
-        case 'success':
-            return 'primary'; // Will use success color
-        case 'default':
-        default:
-            return 'primary';
-    }
-};

package/src/presentation/molecules/confirmation-modal/types/index.js

@@ -1,6 +0,0 @@
-/**
- * AtomicConfirmationModal Type Definitions
- *
- * Type-safe interfaces for confirmation modal component
- */
-export {};

package/src/presentation/molecules/index.js

@@ -1,16 +0,0 @@
-/**
- * Molecule Components Export Index
- *
- * Molecules are combinations of atoms that form more complex UI components
- * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
- *
- * Atomic Design Level: MOLECULES
- */
-// Component exports
-export { FormField } from './FormField';
-export { ListItem } from './ListItem';
-export { SearchBar } from './SearchBar';
-export { SectionCard } from './SectionCard';
-export { IconContainer } from './IconContainer';
-export { ScreenHeader } from './ScreenHeader';
-export { AtomicConfirmationModal, useConfirmationModal } from './AtomicConfirmationModal';

package/src/presentation/molecules/listitem/styles/listItemStyles.js

@@ -1,14 +0,0 @@
-export const getListItemStyles = (tokens) => ({
-    container: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        padding: tokens.spacing.md,
-        backgroundColor: tokens.colors.surface,
-        borderRadius: tokens.borders.radius.lg,
-        marginBottom: tokens.spacing.sm,
-    },
-    disabled: { opacity: 0.6 },
-    iconContainer: { marginHorizontal: tokens.spacing.sm },
-    content: { flex: 1 },
-    subtitle: { marginTop: tokens.spacing.xs },
-});

package/src/presentation/molecules/listitem/types/index.js

@@ -1 +0,0 @@
-export {};

package/src/presentation/organisms/AppHeader.js

@@ -1,77 +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, SafeAreaView } from 'react-native';
-import { useAppDesignTokens } from '@umituz/react-native-theme';
-import { AtomicText } from '../atoms/AtomicText';
-import { AtomicButton } from '../atoms/AtomicButton';
-// =============================================================================
-// COMPONENT IMPLEMENTATION
-// =============================================================================
-export const AppHeader = ({ 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) => ({
-    safeArea: {
-        backgroundColor: tokens.colors.surface,
-    },
-    container: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        paddingHorizontal: tokens.spacing.md,
-        paddingVertical: tokens.spacing.sm,
-        minHeight: tokens.iconSizes.xl + tokens.spacing.md,
-    },
-    leftContainer: {
-        width: tokens.iconSizes.xl + tokens.spacing.sm,
-        alignItems: 'flex-start',
-    },
-    titleContainer: {
-        flex: 1,
-        alignItems: 'center',
-        paddingHorizontal: tokens.spacing.sm,
-    },
-    rightContainer: {
-        width: tokens.iconSizes.xl + tokens.spacing.sm,
-        alignItems: 'flex-start',
-    },
-});
-// =============================================================================
-// EXPORTS
-// =============================================================================