@umituz/react-native-design-system 1.14.0 → 2.0.0

package/src/molecules/ConfirmationModalMain.tsx

@@ -0,0 +1,91 @@
+/**
+ * ConfirmationModal Main Component
+ *
+ * Main confirmation modal component
+ */
+
+import React from 'react';
+import { View, Modal, TouchableOpacity } from 'react-native';
+import { useAppDesignTokens } from '../theme';
+import { ConfirmationModalProps } from './confirmation-modal/types/';
+import {
+  getModalOverlayStyle,
+  getBackdropStyle,
+} from './confirmation-modal/styles/confirmationModalStyles';
+import { ConfirmationModalContent } from './ConfirmationModalContent';
+
+const useBackdropHandler = (backdropDismissible: boolean, onCancel: () => void) => {
+  return React.useCallback(() => {
+    if (backdropDismissible) {
+      onCancel();
+    }
+  }, [backdropDismissible, onCancel]);
+};
+
+const ConfirmationModalBackdrop: React.FC<{
+  showBackdrop: boolean;
+  onBackdropPress: () => void;
+  testID: string;
+}> = ({ showBackdrop, onBackdropPress, testID }) => {
+  if (!showBackdrop) return null;
+
+  return (
+    <TouchableOpacity
+      style={getBackdropStyle()}
+      activeOpacity={1}
+      onPress={onBackdropPress}
+      testID={`${testID}-backdrop`}
+    />
+  );
+};
+
+export const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
+  visible,
+  title,
+  message,
+  variant = 'default',
+  confirmText = 'Confirm',
+  cancelText = 'Cancel',
+  icon,
+  onConfirm,
+  onCancel,
+  showBackdrop = true,
+  backdropDismissible = true,
+  style,
+  testID = 'atomic-confirmation-modal',
+}) => {
+  const tokens = useAppDesignTokens();
+  const handleBackdropPress = useBackdropHandler(backdropDismissible, onCancel);
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      onRequestClose={onCancel}
+      statusBarTranslucent
+      testID={testID}
+    >
+      <View style={getModalOverlayStyle(tokens)}>
+        <ConfirmationModalBackdrop
+          showBackdrop={showBackdrop}
+          onBackdropPress={handleBackdropPress}
+          testID={testID}
+        />
+
+        <ConfirmationModalContent
+          tokens={tokens}
+          variant={variant}
+          title={title}
+          message={message}
+          confirmText={confirmText}
+          cancelText={cancelText}
+          icon={icon}
+          onConfirm={onConfirm}
+          onCancel={onCancel}
+          style={style}
+          testID={testID}
+        />
+      </View>
+    </Modal>
+  );
+};

package/src/molecules/FormField.tsx

@@ -0,0 +1,155 @@
+/**
+ * FormField Molecule - Complete Form Input with Label and Error
+ *
+ * Combines AtomicText (label/error) + AtomicInput (field)
+ *
+ * Atomic Design Level: MOLECULE
+ * Composition: AtomicText + AtomicInput
+ */
+
+import React from 'react';
+import { View, ViewStyle } from 'react-native';
+import { useAppDesignTokens } from '../theme';
+import { AtomicText, AtomicInput, type AtomicInputProps } from '../atoms';
+
+// =============================================================================
+// 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)
+  requiredIndicator?: string;
+}
+
+// =============================================================================
+// COMPONENT IMPLEMENTATION
+// =============================================================================
+
+const FormFieldLabel: React.FC<{
+  label?: string;
+  required?: boolean;
+  requiredIndicator?: string;
+  styles: ReturnType<typeof getStyles>;
+}> = ({ label, required, requiredIndicator, styles }) => {
+  if (!label) return null;
+
+  return (
+    <View style={styles.labelContainer}>
+      <AtomicText type="labelMedium" color="primary" style={styles.label}>
+        {label}
+      </AtomicText>
+      {required && (
+        <AtomicText type="labelMedium" color="error">
+          {requiredIndicator}
+        </AtomicText>
+      )}
+    </View>
+  );
+};
+
+const FormFieldMessage: React.FC<{
+  error?: string;
+  helperText?: string;
+  styles: ReturnType<typeof getStyles>;
+}> = ({ error, helperText, styles }) => {
+  if (error) {
+    return (
+      <AtomicText
+        type="bodySmall"
+        color="error"
+        style={styles.errorText}
+      >
+        {error}
+      </AtomicText>
+    );
+  }
+
+  if (helperText) {
+    return (
+      <AtomicText
+        type="bodySmall"
+        color="secondary"
+        style={styles.helperText}
+      >
+        {helperText}
+      </AtomicText>
+    );
+  }
+
+  return null;
+};
+
+export const FormField: React.FC<FormFieldProps> = ({
+  label,
+  error,
+  helperText,
+  required = false,
+  containerStyle,
+  style,
+  requiredIndicator = ' *',
+  ...inputProps
+}) => {
+  const tokens = useAppDesignTokens();
+  const inputState = error ? 'error' : 'default';
+  const styles = getStyles(tokens);
+
+  return (
+    <View style={[styles.container, containerStyle || style]}>
+      <FormFieldLabel
+        label={label}
+        required={required}
+        requiredIndicator={requiredIndicator}
+        styles={styles}
+      />
+
+      <AtomicInput
+        {...inputProps}
+        label={label || ''}
+        state={inputState}
+      />
+
+      <FormFieldMessage
+        error={error}
+        helperText={helperText}
+        styles={styles}
+      />
+    </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/molecules/IconContainer.tsx

@@ -0,0 +1,79 @@
+/**
+ * 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 '../theme';
+
+interface IconContainerProps {
+  icon: React.ReactNode;
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  backgroundColor?: 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,
+  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 || tokens.colors.surfaceVariant,
+    },
+    withBorder && {
+      borderWidth: 1,
+      borderColor: borderColor || tokens.colors.border,
+    },
+    style,
+  ];
+
+  return (
+    <View style={containerStyle} testID={testID}>
+      {icon}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/molecules/ListItem.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import { useAppDesignTokens } from '../theme';
+import { AtomicText, AtomicIcon } from '../atoms';
+import { ListItemProps } from './listitem/types';
+import { getListItemStyles } from './listitem/styles/listItemStyles';
+
+export type { ListItemProps };
+
+export const ListItem: React.FC<ListItemProps> = ({
+  title, subtitle, leftIcon, rightIcon, 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/molecules/ScreenHeader.tsx

@@ -0,0 +1,171 @@
+/**
+ * ScreenHeader Component
+ *
+ * Reusable screen header with consistent back button placement
+ *
+ * Features:
+ * - Top-left back button (configurable icon)
+ * - Centered title text
+ * - Optional right action button
+ * - Consistent spacing and layout
+ * - Theme-aware styling
+ * - Fully configurable for general purpose use
+ */
+
+import React from 'react';
+import { View, TouchableOpacity, ViewStyle } from 'react-native';
+import { AtomicIcon, AtomicText } from '../atoms';
+import { useAppDesignTokens } from '../theme';
+
+export interface ScreenHeaderProps {
+  /** Screen title (centered) */
+  title: string;
+
+  /** Optional right action button */
+  rightAction?: React.ReactNode;
+
+  /** Custom back button action (required if back button is visible) */
+  onBackPress?: () => void;
+
+  /** Hide back button (rare cases only) */
+  hideBackButton?: boolean;
+
+  /** Additional header style */
+  style?: ViewStyle;
+
+  /** Test ID for E2E testing */
+  testID?: string;
+
+  /** Custom back button icon name */
+  backIconName?: string;
+
+  /** Custom back button icon color */
+  backIconColor: 'primary' | 'secondary' | 'error' | 'warning' | 'success' | 'surfaceVariant';
+}
+
+/**
+ * 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}
+ * />
+ */
+const ScreenHeaderBackButton: React.FC<{
+  hideBackButton?: boolean;
+  onBackPress?: () => void;
+  backIconName?: string;
+  backIconColor?: 'primary' | 'secondary' | 'error' | 'warning' | 'success' | 'surfaceVariant';
+  testID?: string;
+}> = ({ hideBackButton, onBackPress, backIconName, backIconColor, testID }) => {
+  const handleBackPress = React.useCallback(() => {
+    if (onBackPress) {
+      onBackPress();
+    } else {
+      __DEV__ && console.warn('ScreenHeader: onBackPress is required when back button is visible');
+    }
+  }, [onBackPress]);
+
+  if (hideBackButton) return null;
+
+  return (
+    <View style={{ width: 40, alignItems: 'flex-start' }}>
+      <TouchableOpacity
+        onPress={handleBackPress}
+        hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+        testID={`${testID}-back-button`}
+      >
+        <AtomicIcon name={backIconName || 'ArrowLeft'} color={backIconColor} />
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const ScreenHeaderTitle: React.FC<{
+  title: string;
+  tokens: ReturnType<typeof useAppDesignTokens>;
+  testID?: string;
+}> = ({ title, tokens, testID }) => (
+  <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>
+);
+
+const ScreenHeaderRightAction: React.FC<{
+  rightAction?: React.ReactNode;
+}> = ({ rightAction }) => (
+  <View style={{ width: 40, alignItems: 'flex-start' }}>
+    {rightAction || <View style={{ width: 40 }} />}
+  </View>
+);
+
+export const ScreenHeader: React.FC<ScreenHeaderProps> = ({
+  title,
+  rightAction,
+  onBackPress,
+  hideBackButton = false,
+  style,
+  testID = 'screen-header',
+  backIconName = 'ArrowLeft',
+  backIconColor = 'primary',
+}) => {
+  const tokens = useAppDesignTokens();
+
+  const headerStyle = React.useMemo(() => [
+    {
+      flexDirection: 'row' as const,
+      alignItems: 'center' as const,
+      justifyContent: 'space-between' as const,
+      paddingHorizontal: tokens.spacing.screenPadding,
+      paddingVertical: tokens.spacing.md,
+      borderBottomWidth: 0.5,
+      backgroundColor: tokens.colors.backgroundPrimary,
+      borderBottomColor: tokens.colors.border,
+    },
+    style
+  ], [tokens, style]);
+
+  return (
+    <View style={headerStyle} testID={testID}>
+      <ScreenHeaderBackButton
+        hideBackButton={hideBackButton}
+        onBackPress={onBackPress}
+        backIconName={backIconName}
+        backIconColor={backIconColor}
+        testID={testID}
+      />
+
+      <ScreenHeaderTitle title={title} tokens={tokens} testID={testID} />
+
+      <ScreenHeaderRightAction rightAction={rightAction} />
+    </View>
+  );
+};
+
+export default ScreenHeader;