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

package/src/presentation/atoms/AtomicButton.js

@@ -1,171 +0,0 @@
-import React from 'react';
-import { StyleSheet, TouchableOpacity, View } from 'react-native';
-import { AtomicText } from './AtomicText';
-import { Icon } from '@umituz/react-native-icon';
-import { useAppDesignTokens } from '@umituz/react-native-theme';
-export const AtomicButton = ({ title, children, onPress, variant = 'primary', size = 'md', disabled = false, icon, fullWidth = false, style, textStyle, testID, }) => {
-    const tokens = useAppDesignTokens();
-    const handlePress = () => {
-        if (!disabled) {
-            onPress();
-        }
-    };
-    // Size configurations
-    const sizeConfig = {
-        sm: {
-            paddingVertical: tokens.spacing.xs,
-            paddingHorizontal: tokens.spacing.sm,
-            fontSize: tokens.typography.bodySmall.fontSize,
-            iconSize: 16,
-            minHeight: 32,
-        },
-        md: {
-            paddingVertical: tokens.spacing.sm,
-            paddingHorizontal: tokens.spacing.md,
-            fontSize: tokens.typography.bodyMedium.fontSize,
-            iconSize: 20,
-            minHeight: 44,
-        },
-        lg: {
-            paddingVertical: tokens.spacing.md,
-            paddingHorizontal: tokens.spacing.lg,
-            fontSize: tokens.typography.bodyLarge.fontSize,
-            iconSize: 24,
-            minHeight: 52,
-        },
-    };
-    const config = sizeConfig[size];
-    // Variant styles
-    const getVariantStyles = () => {
-        const baseStyle = {
-            backgroundColor: tokens.colors.primary,
-            borderWidth: 0,
-        };
-        const baseTextStyle = {
-            color: tokens.colors.textInverse,
-        };
-        switch (variant) {
-            case 'primary':
-                return {
-                    container: {
-                        ...baseStyle,
-                        backgroundColor: tokens.colors.primary,
-                    },
-                    text: {
-                        ...baseTextStyle,
-                        color: tokens.colors.textInverse,
-                    },
-                };
-            case 'secondary':
-                return {
-                    container: {
-                        ...baseStyle,
-                        backgroundColor: tokens.colors.surfaceSecondary,
-                    },
-                    text: {
-                        ...baseTextStyle,
-                        color: tokens.colors.textPrimary,
-                    },
-                };
-            case 'outline':
-                return {
-                    container: {
-                        ...baseStyle,
-                        backgroundColor: 'transparent',
-                        borderWidth: 1,
-                        borderColor: tokens.colors.border,
-                    },
-                    text: {
-                        ...baseTextStyle,
-                        color: tokens.colors.textPrimary,
-                    },
-                };
-            case 'text':
-                return {
-                    container: {
-                        ...baseStyle,
-                        backgroundColor: 'transparent',
-                    },
-                    text: {
-                        ...baseTextStyle,
-                        color: tokens.colors.primary,
-                    },
-                };
-            case 'danger':
-                return {
-                    container: {
-                        ...baseStyle,
-                        backgroundColor: tokens.colors.error,
-                    },
-                    text: {
-                        ...baseTextStyle,
-                        color: tokens.colors.textInverse,
-                    },
-                };
-            default:
-                return {
-                    container: baseStyle,
-                    text: baseTextStyle,
-                };
-        }
-    };
-    const variantStyles = getVariantStyles();
-    const containerStyle = [
-        styles.button,
-        {
-            paddingVertical: config.paddingVertical,
-            paddingHorizontal: config.paddingHorizontal,
-            minHeight: config.minHeight,
-            borderRadius: tokens.borders.radius.md,
-        },
-        variantStyles.container,
-        fullWidth ? styles.fullWidth : undefined,
-        disabled ? styles.disabled : undefined,
-        style,
-    ];
-    const buttonTextStyle = [
-        {
-            fontSize: config.fontSize,
-            fontWeight: '600',
-        },
-        variantStyles.text,
-        disabled ? styles.disabledText : undefined,
-        textStyle,
-    ];
-    const buttonText = title || children;
-    const showIcon = icon;
-    const iconColor = variantStyles.text.color;
-    return (<TouchableOpacity style={containerStyle} onPress={handlePress} activeOpacity={0.8} disabled={disabled} testID={testID}>
-      <View style={styles.content}>
-        {showIcon ? (<Icon name={icon} customSize={config.iconSize} customColor={typeof iconColor === 'string' ? iconColor : undefined} style={styles.icon}/>) : null}
-
-        <AtomicText style={buttonTextStyle}>
-          {buttonText}
-        </AtomicText>
-      </View>
-    </TouchableOpacity>);
-};
-const styles = StyleSheet.create({
-    button: {
-        alignItems: 'center',
-        justifyContent: 'center',
-        flexDirection: 'row',
-    },
-    content: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    fullWidth: {
-        width: '100%',
-    },
-    disabled: {
-        opacity: 0.5,
-    },
-    disabledText: {
-        opacity: 0.7,
-    },
-    icon: {
-        marginRight: 8,
-    },
-});

package/src/presentation/atoms/AtomicCard.js

@@ -1,69 +0,0 @@
-import React from 'react';
-import { View, Pressable } from 'react-native';
-import { useAppDesignTokens } from '@umituz/react-native-theme';
-export const AtomicCard = ({ variant = 'elevated', padding = 'md', onPress, disabled = false, style, children, testID, }) => {
-    const tokens = useAppDesignTokens();
-    const handlePress = () => {
-        if (onPress && !disabled) {
-            onPress();
-        }
-    };
-    // Map padding to token values
-    const getPaddingValue = () => {
-        const paddingMap = {
-            none: 0,
-            sm: tokens.spacing.sm,
-            md: tokens.spacing.md,
-            lg: tokens.spacing.lg,
-            xl: tokens.spacing.xl,
-        };
-        return paddingMap[padding];
-    };
-    // Get variant styles
-    const getVariantStyle = () => {
-        const baseStyle = {
-            backgroundColor: tokens.colors.surface,
-            borderRadius: tokens.borders.radius.md,
-        };
-        switch (variant) {
-            case 'elevated':
-                return {
-                    ...baseStyle,
-                    borderWidth: 1,
-                    borderColor: tokens.colors.border,
-                };
-            case 'outlined':
-                return {
-                    ...baseStyle,
-                    borderWidth: 1,
-                    borderColor: tokens.colors.border,
-                };
-            case 'flat':
-                return {
-                    ...baseStyle,
-                    borderWidth: 0,
-                };
-            default:
-                return baseStyle;
-        }
-    };
-    const cardStyle = [
-        getVariantStyle(),
-        {
-            padding: getPaddingValue(),
-            opacity: disabled ? 0.5 : 1,
-        },
-        style,
-    ];
-    const cardContent = (<View style={cardStyle} testID={testID}>
-      {children}
-    </View>);
-    // If onPress provided, wrap with pressable
-    if (onPress && !disabled) {
-        return (<Pressable onPress={handlePress}>
-        {cardContent}
-      </Pressable>);
-    }
-    // Otherwise just return static card
-    return cardContent;
-};

package/src/presentation/atoms/AtomicChip.js

@@ -1,130 +0,0 @@
-/**
- * AtomicChip - Universal Chip/Tag Component
- *
- * Displays small tags, labels, or status indicators
- * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
- *
- * Atomic Design Level: ATOM
- * Purpose: Tag and label display
- *
- * Usage:
- * - Category tags
- * - Status indicators
- * - Filter chips
- * - Skill labels
- * - Badge displays
- */
-import React from 'react';
-import { View, TouchableOpacity } from 'react-native';
-import { AtomicText } from './AtomicText';
-import { AtomicIcon } from './AtomicIcon';
-import { useAppDesignTokens } from '@umituz/react-native-theme';
-// =============================================================================
-// COMPONENT IMPLEMENTATION
-// =============================================================================
-export const AtomicChip = ({ children, variant = 'filled', size = 'md', color = 'primary', backgroundColor, textColor, borderColor, leadingIcon, trailingIcon, clickable = false, onPress, selected = false, disabled = false, style, testID, }) => {
-    const tokens = useAppDesignTokens();
-    // Size mapping
-    const sizeMap = {
-        sm: {
-            paddingHorizontal: tokens.spacing.sm,
-            paddingVertical: tokens.spacing.xs,
-            fontSize: tokens.typography.bodySmall.fontSize,
-            iconSize: 'xs'
-        },
-        md: {
-            paddingHorizontal: tokens.spacing.md,
-            paddingVertical: tokens.spacing.sm,
-            fontSize: tokens.typography.bodyMedium.fontSize,
-            iconSize: 'sm'
-        },
-        lg: {
-            paddingHorizontal: tokens.spacing.md,
-            paddingVertical: tokens.spacing.sm,
-            fontSize: tokens.typography.bodyLarge.fontSize,
-            iconSize: 'sm'
-        },
-    };
-    const sizeConfig = sizeMap[size];
-    // Color mapping
-    const colorMap = {
-        primary: {
-            filled: { bg: tokens.colors.primary, text: tokens.colors.onPrimary, border: tokens.colors.primary },
-            outlined: { bg: 'transparent', text: tokens.colors.primary, border: tokens.colors.primary },
-            soft: { bg: tokens.colors.primaryContainer, text: tokens.colors.onPrimaryContainer, border: 'transparent' },
-        },
-        secondary: {
-            filled: { bg: tokens.colors.secondary, text: tokens.colors.onSecondary, border: tokens.colors.secondary },
-            outlined: { bg: 'transparent', text: tokens.colors.secondary, border: tokens.colors.secondary },
-            soft: { bg: tokens.colors.secondaryContainer, text: tokens.colors.onSecondaryContainer, border: 'transparent' },
-        },
-        success: {
-            filled: { bg: tokens.colors.success, text: tokens.colors.onSuccess, border: tokens.colors.success },
-            outlined: { bg: 'transparent', text: tokens.colors.success, border: tokens.colors.success },
-            soft: { bg: tokens.colors.successContainer, text: tokens.colors.onSuccessContainer, border: 'transparent' },
-        },
-        warning: {
-            filled: { bg: tokens.colors.warning, text: tokens.colors.onWarning, border: tokens.colors.warning },
-            outlined: { bg: 'transparent', text: tokens.colors.warning, border: tokens.colors.warning },
-            soft: { bg: tokens.colors.warningContainer, text: tokens.colors.onWarningContainer, border: 'transparent' },
-        },
-        error: {
-            filled: { bg: tokens.colors.error, text: tokens.colors.onError, border: tokens.colors.error },
-            outlined: { bg: 'transparent', text: tokens.colors.error, border: tokens.colors.error },
-            soft: { bg: tokens.colors.errorContainer, text: tokens.colors.onErrorContainer, border: 'transparent' },
-        },
-        info: {
-            filled: { bg: tokens.colors.info, text: tokens.colors.onInfo, border: tokens.colors.info },
-            outlined: { bg: 'transparent', text: tokens.colors.info, border: tokens.colors.info },
-            soft: { bg: tokens.colors.infoContainer, text: tokens.colors.onInfoContainer, border: 'transparent' },
-        },
-    };
-    const colorConfig = colorMap[color][variant];
-    // Apply custom colors if provided
-    const finalBackgroundColor = backgroundColor || colorConfig.bg;
-    const finalTextColor = textColor || colorConfig.text;
-    const finalBorderColor = borderColor || colorConfig.border;
-    // Handle disabled state
-    const isDisabled = disabled || (!clickable && !onPress);
-    const opacity = isDisabled ? 0.5 : 1;
-    // Handle selected state
-    const selectedStyle = selected ? {
-        borderWidth: tokens.borders.width.medium,
-        borderColor: tokens.colors.primary,
-    } : {};
-    const chipStyle = {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'center',
-        paddingHorizontal: sizeConfig.paddingHorizontal,
-        paddingVertical: sizeConfig.paddingVertical,
-        backgroundColor: finalBackgroundColor,
-        borderRadius: tokens.borders.radius.xl,
-        borderWidth: variant === 'outlined' ? 1 : 0,
-        borderColor: finalBorderColor,
-        opacity,
-        ...selectedStyle,
-    };
-    const textStyle = {
-        fontSize: sizeConfig.fontSize,
-        fontWeight: tokens.typography.medium,
-    };
-    const iconColor = finalTextColor;
-    const content = (<View style={[chipStyle, style]} testID={testID}>
-      {leadingIcon && (<AtomicIcon name={leadingIcon} size={sizeConfig.iconSize} customColor={iconColor} style={{ marginRight: tokens.spacing.xs }}/>)}
-      <AtomicText type="labelMedium" color={finalTextColor} style={textStyle}>
-        {children}
-      </AtomicText>
-      {trailingIcon && (<AtomicIcon name={trailingIcon} size={sizeConfig.iconSize} customColor={iconColor} style={{ marginLeft: tokens.spacing.xs }}/>)}
-    </View>);
-    if (clickable && onPress && !disabled) {
-        return (<TouchableOpacity onPress={onPress} activeOpacity={0.7}>
-        {content}
-      </TouchableOpacity>);
-    }
-    return content;
-};
-// =============================================================================
-// EXPORTS
-// =============================================================================
-export default AtomicChip;

package/src/presentation/atoms/AtomicDatePicker.js

@@ -1,245 +0,0 @@
-/**
- * AtomicDatePicker Component
- *
- * A reusable date picker component that wraps the native date picker
- * with consistent styling and behavior across platforms.
- *
- * Features:
- * - Platform-specific native pickers (iOS wheel, Android dialog)
- * - Consistent styling with design tokens
- * - Locale-aware date/time formatting (native Date methods)
- * - Timezone-aware (respects device timezone)
- * - Automatic language integration (native locale support)
- * - Optional label and error states
- * - Minimum and maximum date constraints
- * - Disabled state support
- * - Theme-aware styling
- * - Proper keyboard avoidance on iOS
- *
- * Usage:
- * ```tsx
- * const [selectedDate, setSelectedDate] = useState(new Date());
- *
- * <AtomicDatePicker
- *   value={selectedDate}
- *   onChange={setSelectedDate}
- *   label="Birth Date"
- *   minimumDate={new Date(1900, 0, 1)}
- *   maximumDate={new Date()}
- * />
- * ```
- *
- * Platform Behavior:
- * - iOS: Opens modal with spinner wheel, requires "Done" button
- * - Android: Opens native dialog, auto-closes on selection
- *
- * @module AtomicDatePicker
- */
-import React, { useState } from 'react';
-import { View, Text, TouchableOpacity, StyleSheet, Modal, useWindowDimensions, } from 'react-native';
-import DateTimePicker from '@react-native-community/datetimepicker';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { useAppDesignTokens } from '@umituz/react-native-theme';
-import { useResponsive } from '../hooks/useResponsive';
-import { AtomicIcon } from './AtomicIcon';
-/**
- * AtomicDatePicker - Universal date/time picker component
- *
- * Wraps @react-native-community/datetimepicker with:
- * - Theme integration
- * - Platform-specific modal handling
- * - Error states
- * - Disabled states
- * - Responsive sizing
- */
-export const AtomicDatePicker = ({ value, onChange, label, error, disabled = false, minimumDate, maximumDate, mode = 'date', placeholder = 'Select date', testID, }) => {
-    const tokens = useAppDesignTokens();
-    const { height } = useWindowDimensions();
-    const insets = useSafeAreaInsets();
-    const { isTabletDevice } = useResponsive();
-    const [show, setShow] = useState(false);
-    /**
-     * Handle date/time change
-     * Universal handler that works across all platforms
-     * Note: event.type can be 'set', 'dismissed', or 'neutralButtonPressed'
-     */
-    const handleChange = (event, selectedDate) => {
-        // Close picker when user confirms or dismisses
-        // iOS: Stays open until "Done" button (handled separately)
-        // Android/Web: Auto-closes on selection
-        if (event.type === 'set' || event.type === 'dismissed') {
-            setShow(false);
-        }
-        // Update value only if date was selected (not dismissed)
-        if (event.type === 'set' && selectedDate) {
-            onChange(selectedDate);
-        }
-    };
-    /**
-     * Format date based on mode
-     * Uses native Date formatting (locale-aware)
-     */
-    const formatDate = (date) => {
-        if (mode === 'time') {
-            // Format time only
-            return date.toLocaleTimeString([], {
-                hour: '2-digit',
-                minute: '2-digit'
-            });
-        }
-        if (mode === 'datetime') {
-            // Format date + time
-            const dateStr = date.toLocaleDateString([], {
-                year: 'numeric',
-                month: 'short',
-                day: 'numeric',
-            });
-            const timeStr = date.toLocaleTimeString([], {
-                hour: '2-digit',
-                minute: '2-digit'
-            });
-            return `${dateStr} ${timeStr}`;
-        }
-        // Format date only
-        return date.toLocaleDateString([], {
-            year: 'numeric',
-            month: 'long',
-            day: 'numeric',
-        });
-    };
-    /**
-     * Determine icon color based on state
-     */
-    const getIconColor = () => {
-        if (disabled)
-            return 'secondary';
-        if (error)
-            return 'error';
-        return 'primary';
-    };
-    const styles = getStyles(tokens, height, insets);
-    return (<View style={styles.container} testID={testID}>
-      {label && (<Text style={styles.label} testID={testID ? `${testID}-label` : undefined}>
-          {label}
-        </Text>)}
-
-      <TouchableOpacity style={[
-            styles.button,
-            error ? styles.buttonError : undefined,
-            disabled ? styles.buttonDisabled : undefined,
-        ]} onPress={() => !disabled && setShow(true)} disabled={disabled} testID={testID ? `${testID}-button` : undefined} accessibilityLabel={label || placeholder} accessibilityRole="button" accessibilityState={{ disabled }}>
-        <AtomicIcon name="calendar" color={getIconColor()} size="md"/>
-        <Text style={[
-            styles.text,
-            disabled ? styles.textDisabled : undefined,
-            error ? styles.textError : undefined,
-        ]}>
-          {value ? formatDate(value) : placeholder}
-        </Text>
-      </TouchableOpacity>
-
-      {error && (<Text style={styles.errorText} testID={testID ? `${testID}-error` : undefined}>
-          {error}
-        </Text>)}
-
-      {/* Universal DatePicker - Works across iOS, Android, Web */}
-      {show && (<Modal transparent animationType={isTabletDevice ? 'fade' : 'slide'} visible={show} onRequestClose={() => setShow(false)}>
-          <TouchableOpacity style={styles.modalOverlay} activeOpacity={1} onPress={() => setShow(false)} accessibilityLabel="Close date picker" accessibilityRole="button">
-            <View style={styles.pickerContainer} onStartShouldSetResponder={() => true}>
-              <DateTimePicker value={value || new Date()} mode={mode} display="spinner" onChange={handleChange} minimumDate={minimumDate} maximumDate={maximumDate} testID={testID ? `${testID}-picker` : undefined}/>
-              <View style={styles.buttonContainer}>
-                <TouchableOpacity style={styles.doneButton} onPress={() => setShow(false)} testID={testID ? `${testID}-done` : undefined} accessibilityLabel="Done" accessibilityRole="button">
-                  <Text style={styles.doneText}>Done</Text>
-                </TouchableOpacity>
-              </View>
-            </View>
-          </TouchableOpacity>
-        </Modal>)}
-    </View>);
-};
-/**
- * Get component styles based on design tokens
- */
-const getStyles = (tokens, height, insets) => {
-    // Responsive button sizing based on device height
-    const buttonMinWidth = height <= 667 ? Math.min(height * 0.25, 150) : 200;
-    return StyleSheet.create({
-        container: {
-            marginBottom: tokens.spacing.md,
-        },
-        label: {
-            fontSize: tokens.typography.bodyMedium.fontSize,
-            fontWeight: tokens.typography.semibold,
-            color: tokens.colors.textPrimary,
-            marginBottom: tokens.spacing.sm,
-        },
-        button: {
-            flexDirection: 'row',
-            alignItems: 'center',
-            backgroundColor: tokens.colors.surface,
-            borderWidth: 1,
-            borderColor: tokens.colors.border,
-            borderRadius: tokens.borders.radius.lg,
-            paddingHorizontal: tokens.spacing.md,
-            paddingVertical: tokens.spacing.md,
-            gap: tokens.spacing.sm,
-            minHeight: 48, // Apple HIG minimum touch target
-        },
-        buttonError: {
-            borderColor: tokens.colors.error,
-            borderWidth: tokens.borders.width.medium,
-        },
-        buttonDisabled: {
-            backgroundColor: tokens.colors.surfaceDisabled,
-            opacity: tokens.opacity.disabled,
-        },
-        text: {
-            flex: 1,
-            fontSize: tokens.typography.bodyLarge.fontSize,
-            color: tokens.colors.textPrimary,
-        },
-        textDisabled: {
-            color: tokens.colors.textDisabled,
-        },
-        textError: {
-            color: tokens.colors.error,
-        },
-        errorText: {
-            fontSize: tokens.typography.bodySmall.fontSize,
-            color: tokens.colors.error,
-            marginTop: tokens.spacing.xs,
-            marginLeft: tokens.spacing.xs,
-        },
-        modalOverlay: {
-            flex: 1,
-            backgroundColor: 'rgba(0, 0, 0, 0.5)',
-            justifyContent: 'flex-start',
-        },
-        pickerContainer: {
-            backgroundColor: tokens.colors.surface,
-            borderTopLeftRadius: tokens.borders.radius.xl,
-            borderTopRightRadius: tokens.borders.radius.xl,
-            paddingTop: tokens.spacing.lg,
-            paddingBottom: Math.max(insets.bottom + tokens.spacing.md, tokens.spacing.xl),
-        },
-        buttonContainer: {
-            alignItems: 'center',
-            marginTop: tokens.spacing.md,
-            paddingHorizontal: tokens.spacing.lg,
-        },
-        doneButton: {
-            backgroundColor: tokens.colors.primary,
-            paddingHorizontal: tokens.spacing.xl,
-            paddingVertical: tokens.spacing.sm,
-            borderRadius: tokens.borders.radius.lg,
-            minWidth: buttonMinWidth,
-            alignItems: 'center',
-            minHeight: 44, // Apple HIG minimum touch target
-        },
-        doneText: {
-            color: tokens.colors.onPrimary,
-            fontSize: tokens.typography.bodyLarge.fontSize,
-            fontWeight: tokens.typography.semibold,
-        },
-    });
-};

package/src/presentation/atoms/AtomicDivider.js

@@ -1,57 +0,0 @@
-/**
- * AtomicDivider - Universal Divider Component
- *
- * Displays horizontal or vertical dividers for content separation
- * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
- *
- * Atomic Design Level: ATOM
- * Purpose: Content separation and visual hierarchy
- *
- * Usage:
- * - Section separators
- * - List item dividers
- * - Card separators
- * - Menu dividers
- * - Form field separators
- */
-import React from 'react';
-import { View } from 'react-native';
-import { useAppDesignTokens } from '@umituz/react-native-theme';
-// =============================================================================
-// COMPONENT IMPLEMENTATION
-// =============================================================================
-export const AtomicDivider = ({ orientation = 'horizontal', thickness = 'thin', color, length, margin, marginTop, marginBottom, marginLeft, marginRight, style, testID, }) => {
-    const tokens = useAppDesignTokens();
-    // Thickness mapping
-    const thicknessMap = {
-        thin: 1,
-        medium: 2,
-        thick: 4,
-    };
-    const dividerThickness = thicknessMap[thickness];
-    const dividerColor = color || tokens.colors.border;
-    // Compute final length values with proper type handling
-    const finalLength = length !== undefined ? length : (orientation === 'horizontal' ? '100%' : 20);
-    // Base styles for all dividers
-    const baseStyle = {
-        backgroundColor: dividerColor,
-        margin: margin,
-        marginTop: marginTop,
-        marginBottom: marginBottom,
-        marginLeft: marginLeft,
-        marginRight: marginRight,
-    };
-    // Orientation-specific styles with explicit type casting
-    const orientationStyle = (orientation === 'horizontal' ? {
-        width: finalLength,
-        height: dividerThickness,
-    } : {
-        width: dividerThickness,
-        height: finalLength,
-    });
-    return (<View style={[baseStyle, orientationStyle, style]} testID={testID}/>);
-};
-// =============================================================================
-// EXPORTS
-// =============================================================================
-export default AtomicDivider;