@umituz/react-native-design-system 1.0.0

package/src/presentation/molecules/SectionCard.tsx

@@ -0,0 +1,74 @@
+/**
+ * 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 '../hooks/useAppDesignTokens';
+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

@@ -0,0 +1,106 @@
+/**
+ * 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 '../hooks/useAppDesignTokens';
+
+// =============================================================================
+// 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

@@ -0,0 +1,125 @@
+/**
+ * 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 '../hooks/useAppDesignTokens';
+
+// =============================================================================
+// 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

@@ -0,0 +1,133 @@
+/**
+ * AtomicConfirmationModal Style Utilities
+ *
+ * Styling functions for confirmation modal component
+ */
+
+import { ViewStyle } from 'react-native';
+import { ConfirmationModalVariant, ConfirmationModalVariantConfig } from '../types';
+import type { DesignTokens } from '../../../tokens/AppDesignTokens';
+
+/**
+ * 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

@@ -0,0 +1,107 @@
+/**
+ * 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
+   * @default 'Confirm' (or variant-specific default)
+   */
+  confirmText?: string;
+
+  /**
+   * Cancel button text
+   * @default 'Cancel'
+   */
+  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

@@ -0,0 +1,42 @@
+/**
+ * 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 { LanguageSwitcher } from './LanguageSwitcher';
+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/languageswitcher/config/languageSwitcherConfig.ts

@@ -0,0 +1,5 @@
+export const languageSwitcherConfig = {
+  defaultIconSize: 20,
+  defaultNavigationScreen: 'LanguageSelection',
+  hitSlop: { top: 10, bottom: 10, left: 10, right: 10 },
+};

package/src/presentation/molecules/languageswitcher/hooks/useLanguageNavigation.ts

@@ -0,0 +1,15 @@
+import { useNavigation } from '@react-navigation/native';
+import { useLocalization } from '@domains/localization';
+import { getLanguageByCode, getDefaultLanguage } from '@constants/languages';
+
+export const useLanguageNavigation = (navigationScreen: string) => {
+  const navigation = useNavigation();
+  const { currentLanguage } = useLocalization();
+  const currentLang = getLanguageByCode(currentLanguage) || getDefaultLanguage();
+
+  const navigateToLanguageSelection = () => {
+    navigation.navigate(navigationScreen as never);
+  };
+
+  return { currentLang, navigateToLanguageSelection };
+};

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

@@ -0,0 +1,19 @@
+import { ViewStyle } from 'react-native';
+import { useAppDesignTokens } from '../../../hooks/useAppDesignTokens';
+
+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,
+});

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

@@ -0,0 +1,17 @@
+import { ViewStyle } from 'react-native';
+
+/**
+ * ListItem component props
+ *
+ * leftIcon/rightIcon: Any MaterialIcons name
+ * @see https://fonts.google.com/icons
+ */
+export interface ListItemProps {
+  title: string;
+  subtitle?: string;
+  leftIcon?: string; // MaterialIcons name
+  rightIcon?: string; // MaterialIcons name
+  onPress?: () => void;
+  disabled?: boolean;
+  style?: ViewStyle;
+}