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

package/src/presentation/molecules/SearchBar.tsx

@@ -1,85 +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, TouchableOpacity, ViewStyle } from 'react-native';
-import { useAppDesignTokens } from '@umituz/react-native-theme';
-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
-// =============================================================================
-

package/src/presentation/molecules/SectionCard.tsx

@@ -1,74 +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';
-
-interface SectionCardProps {
-  title: string;
-  children: React.ReactNode;
-  style?: object;
-  contentStyle?: object;
-  testID?: string;
-}
-
-export const SectionCard: React.FC<SectionCardProps> = ({
-  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: ReturnType<typeof useAppDesignTokens>) => 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.tsx

@@ -1,106 +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, ViewStyle, TextStyle } from 'react-native';
-import { AtomicText } from '../atoms/AtomicText';
-import { useAppDesignTokens } from '@umituz/react-native-theme';
-
-// =============================================================================
-// TYPE DEFINITIONS
-// =============================================================================
-
-export interface SectionContainerProps {
-  /** Section title (optional) */
-  title?: string;
-  /** Section title color (default: textPrimary) */
-  titleColor?: string;
-  /** Section title style override */
-  titleStyle?: TextStyle;
-  /** Container style override */
-  style?: ViewStyle;
-  /** Content to render inside section */
-  children: React.ReactNode;
-  /** Right action element (e.g., "See All" link) */
-  rightAction?: React.ReactNode;
-}
-
-// =============================================================================
-// COMPONENT IMPLEMENTATION
-// =============================================================================
-
-export const SectionContainer: React.FC<SectionContainerProps> = ({
-  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: ReturnType<typeof useAppDesignTokens>) =>
-  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.tsx

@@ -1,125 +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, ViewStyle, TextStyle } from 'react-native';
-import { AtomicText } from '../atoms/AtomicText';
-import { useAppDesignTokens } from '@umituz/react-native-theme';
-
-// =============================================================================
-// TYPE DEFINITIONS
-// =============================================================================
-
-export interface SectionHeaderProps {
-  /** Main heading text */
-  title: string;
-  /** Optional subtitle text */
-  subtitle?: 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;
-  /** Right action element (e.g., button, icon) */
-  rightAction?: React.ReactNode;
-}
-
-// =============================================================================
-// COMPONENT IMPLEMENTATION
-// =============================================================================
-
-export const SectionHeader: React.FC<SectionHeaderProps> = ({
-  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: ReturnType<typeof useAppDesignTokens>) =>
-  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.ts

@@ -1,133 +0,0 @@
-/**
- * AtomicConfirmationModal Style Utilities
- *
- * Styling functions for confirmation modal component
- */
-
-import { ViewStyle } from 'react-native';
-import { ConfirmationModalVariant, ConfirmationModalVariantConfig } from '../types';
-import type { DesignTokens } from '@umituz/react-native-theme';
-
-/**
- * Get variant configuration (icon and color only)
- * Note: Confirm text is handled in component with translations
- */
-export const getVariantConfig = (
-  variant: ConfirmationModalVariant,
-  tokens: DesignTokens
-): Omit<ConfirmationModalVariantConfig, 'confirmText'> => {
-  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: DesignTokens): ViewStyle => ({
-  flex: 1,
-  justifyContent: 'center',
-  alignItems: 'center',
-  backgroundColor: 'rgba(0, 0, 0, 0.5)',
-});
-
-/**
- * Get backdrop style (invisible layer for dismissing)
- */
-export const getBackdropStyle = (): ViewStyle => ({
-  position: 'absolute',
-  top: 0,
-  left: 0,
-  right: 0,
-  bottom: 0,
-});
-
-/**
- * Get modal container style
- */
-export const getModalContainerStyle = (tokens: DesignTokens): ViewStyle => ({
-  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: DesignTokens): ViewStyle => ({
-  marginBottom: 16,
-});
-
-/**
- * Get title container style
- */
-export const getTitleContainerStyle = (tokens: DesignTokens): ViewStyle => ({
-  marginBottom: 8,
-});
-
-/**
- * Get message container style
- */
-export const getMessageContainerStyle = (tokens: DesignTokens): ViewStyle => ({
-  marginBottom: 24,
-});
-
-/**
- * Get button container style
- */
-export const getButtonContainerStyle = (tokens: DesignTokens): ViewStyle => ({
-  flexDirection: 'row',
-  gap: 12,
-  width: '100%',
-});
-
-/**
- * Get button style
- */
-export const getButtonStyle = (): ViewStyle => ({
-  flex: 1,
-});
-
-/**
- * Get confirm button variant based on modal variant
- */
-export const getConfirmButtonVariant = (
-  variant: ConfirmationModalVariant
-): 'primary' | 'secondary' | 'tertiary' | 'outline' | 'ghost' => {
-  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.ts

@@ -1,105 +0,0 @@
-/**
- * AtomicConfirmationModal Type Definitions
- *
- * Type-safe interfaces for confirmation modal component
- */
-
-import { StyleProp, ViewStyle } from 'react-native';
-import type { AtomicIconColor } from '../../../atoms/AtomicIcon';
-
-/**
- * Confirmation modal variant
- * Determines the visual style and default behavior
- */
-export type ConfirmationModalVariant =
-  | 'default'      // Generic confirmation (blue/primary)
-  | 'destructive'  // Delete/remove actions (red/error)
-  | 'warning'      // Warning/caution (orange/warning)
-  | 'success';     // Success confirmation (green/success)
-
-/**
- * Props for AtomicConfirmationModal component
- */
-export interface AtomicConfirmationModalProps {
-  /**
-   * Whether the modal is visible
-   */
-  visible: boolean;
-
-  /**
-   * Modal title (required)
-   * e.g., "Delete Item?", "Confirm Action", "Are you sure?"
-   */
-  title: string;
-
-  /**
-   * Modal message/description (required)
-   * e.g., "This action cannot be undone."
-   */
-  message: string;
-
-  /**
-   * Variant determines visual style
-   * @default 'default'
-   */
-  variant?: ConfirmationModalVariant;
-
-  /**
-   * Confirm button text (required)
-   */
-  confirmText: string;
-
-  /**
-   * Cancel button text (required)
-   */
-  cancelText: string;
-
-  /**
-   * Icon name to display at top (MaterialIcons name)
-   * If not provided, uses variant-specific default icon
-   * @see https://fonts.google.com/icons
-   */
-  icon?: string;
-
-  /**
-   * Callback when user confirms
-   */
-  onConfirm: () => void;
-
-  /**
-   * Callback when user cancels or dismisses
-   */
-  onCancel: () => void;
-
-  /**
-   * Whether to show backdrop (tap outside to close)
-   * @default true
-   */
-  showBackdrop?: boolean;
-
-  /**
-   * Whether backdrop is dismissible
-   * @default true
-   */
-  backdropDismissible?: boolean;
-
-  /**
-   * Custom style for modal container
-   */
-  style?: StyleProp<ViewStyle>;
-
-  /**
-   * Test ID for testing
-   */
-  testID?: string;
-}
-
-/**
- * Variant configuration
- * Maps variant to icon, colors, and default text
- */
-export interface ConfirmationModalVariantConfig {
-  icon: string; // MaterialIcons name
-  confirmText: string;
-  iconColor: AtomicIconColor;
-}

package/src/presentation/molecules/index.ts

@@ -1,41 +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';
-
-// SettingItem moved to @domains/settings/presentation/components/SettingItem
-// Import directly: import { SettingItem } from '@domains/settings/presentation/components/SettingItem';
-
-// Type exports
-export type { FormFieldProps } from './FormField';
-export type { ListItemProps } from './ListItem';
-export type { SearchBarProps } from './SearchBar';
-export type { ScreenHeaderProps } from './ScreenHeader';
-export type { AtomicConfirmationModalProps, ConfirmationModalVariant } from './AtomicConfirmationModal';
-
-// Union type for all molecule props (used for type narrowing)
-import type { FormFieldProps } from './FormField';
-import type { ListItemProps } from './ListItem';
-import type { SearchBarProps } from './SearchBar';
-import type { ScreenHeaderProps } from './ScreenHeader';
-import type { AtomicConfirmationModalProps } from './AtomicConfirmationModal';
-
-export type MoleculeComponentProps =
-  | FormFieldProps
-  | ListItemProps
-  | SearchBarProps
-  | ScreenHeaderProps
-  | AtomicConfirmationModalProps;

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

@@ -1,19 +0,0 @@
-import { ViewStyle } from 'react-native';
-import { useAppDesignTokens } from '@umituz/react-native-theme';
-
-type DesignTokens = ReturnType<typeof useAppDesignTokens>;
-
-export const getListItemStyles = (tokens: DesignTokens) => ({
-  container: {
-    flexDirection: 'row' as const,
-    alignItems: 'center' as const,
-    padding: tokens.spacing.md,
-    backgroundColor: tokens.colors.surface,
-    borderRadius: tokens.borders.radius.lg,
-    marginBottom: tokens.spacing.sm,
-  } as ViewStyle,
-  disabled: { opacity: 0.6 } as ViewStyle,
-  iconContainer: { marginHorizontal: tokens.spacing.sm } as ViewStyle,
-  content: { flex: 1 } as ViewStyle,
-  subtitle: { marginTop: tokens.spacing.xs } as ViewStyle,
-});