@umituz/react-native-design-system 1.15.0 → 2.0.1

package/src/molecules/confirmation-modal/components.tsx

@@ -0,0 +1,94 @@
+/**
+ * ConfirmationModal Subcomponents
+ *
+ * Smaller components for the confirmation modal
+ */
+
+import React from 'react';
+import { View, ViewStyle, StyleProp } from 'react-native';
+import { AtomicText, AtomicButton, AtomicIcon } from '../../atoms';
+import type { DesignTokens } from '../../theme';
+import {
+  getButtonContainerStyle,
+  getButtonStyle,
+} from './styles/confirmationModalStyles';
+
+export const ConfirmationModalIcon: React.FC<{
+  icon: string;
+  iconColor: string;
+  testID: string;
+}> = ({ icon, iconColor, testID }) => (
+  <AtomicIcon
+    name={icon}
+    size="xl"
+    color={iconColor as 'primary' | 'secondary' | 'error' | 'warning' | 'success' | 'surfaceVariant'}
+    testID={`${testID}-icon`}
+  />
+);
+
+export const ConfirmationModalTitle: React.FC<{
+  title: string;
+  tokens: DesignTokens;
+  testID: string;
+}> = ({ title, tokens, testID }) => (
+  <AtomicText
+    type="titleLarge"
+    style={{
+      color: tokens.colors.textPrimary,
+      textAlign: 'center',
+      fontWeight: tokens.typography.bold,
+    }}
+    testID={`${testID}-title`}
+  >
+    {title}
+  </AtomicText>
+);
+
+export const ConfirmationModalMessage: React.FC<{
+  message: string;
+  tokens: DesignTokens;
+  testID: string;
+}> = ({ message, tokens, testID }) => (
+  <AtomicText
+    type="bodyMedium"
+    style={{
+      color: tokens.colors.textSecondary,
+      textAlign: 'center',
+      lineHeight: tokens.typography.bodyMedium.lineHeight,
+    }}
+    testID={`${testID}-message`}
+  >
+    {message}
+  </AtomicText>
+);
+
+export const ConfirmationModalButtons: React.FC<{
+  confirmText: string;
+  cancelText: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+  confirmButtonStyle: StyleProp<ViewStyle>;
+  testID: string;
+}> = ({ confirmText, cancelText, onConfirm, onCancel, confirmButtonStyle, testID }) => (
+  <View style={getButtonContainerStyle({} as DesignTokens)}>
+    <AtomicButton
+      variant="outline"
+      size="md"
+      onPress={onCancel}
+      style={getButtonStyle()}
+      testID={`${testID}-cancel-button`}
+    >
+      {cancelText}
+    </AtomicButton>
+
+    <AtomicButton
+      variant="primary"
+      size="md"
+      onPress={onConfirm}
+      style={confirmButtonStyle}
+      testID={`${testID}-confirm-button`}
+    >
+      {confirmText}
+    </AtomicButton>
+  </View>
+);

package/src/molecules/confirmation-modal/index.ts

@@ -0,0 +1,7 @@
+/**
+ * ConfirmationModal Module - Re-exports
+ */
+
+export * from './types';
+export * from './styles/confirmationModalStyles';
+export { useConfirmationModal } from './useConfirmationModal';

package/src/molecules/confirmation-modal/styles/confirmationModalStyles.ts

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

@@ -0,0 +1,41 @@
+/**
+ * ConfirmationModal Types
+ */
+import type { ViewStyle, StyleProp } from 'react-native';
+
+export type ConfirmationModalVariant = 'default' | 'destructive' | 'warning' | 'success';
+
+export interface ConfirmationModalVariantConfig {
+    icon: string;
+    iconColor: string;
+    confirmText?: string;
+}
+
+export interface ConfirmationModalProps {
+    /** Modal visibility */
+    visible: boolean;
+    /** Modal title */
+    title: string;
+    /** Modal message */
+    message: string;
+    /** Confirm button text */
+    confirmText?: string;
+    /** Cancel button text */
+    cancelText?: string;
+    /** Confirm callback */
+    onConfirm: () => void;
+    /** Cancel/Close callback */
+    onCancel: () => void;
+    /** Modal variant for styling */
+    variant?: ConfirmationModalVariant;
+    /** Optional icon */
+    icon?: string;
+    /** Test ID */
+    testID?: string;
+    /** Show backdrop */
+    showBackdrop?: boolean;
+    /** Allow backdrop dismiss */
+    backdropDismissible?: boolean;
+    /** Custom style */
+    style?: StyleProp<ViewStyle>;
+}

package/src/molecules/confirmation-modal/useConfirmationModal.ts

@@ -0,0 +1,50 @@
+/**
+ * ConfirmationModal Hook
+ *
+ * Hook for managing confirmation modal state
+ */
+
+import React from 'react';
+import { ConfirmationModalProps, ConfirmationModalVariant } from './types';
+
+const useConfirmationModalState = () => {
+  const [visible, setVisible] = React.useState(false);
+
+  const showConfirmation = React.useCallback(() => setVisible(true), []);
+  const hideConfirmation = React.useCallback(() => setVisible(false), []);
+
+  return { visible, showConfirmation, hideConfirmation };
+};
+
+export const useConfirmationModal = (config: {
+  title: string;
+  message: string;
+  variant?: ConfirmationModalVariant;
+  confirmText: string;
+  cancelText: string;
+  onConfirm: () => void;
+}) => {
+  const { visible, showConfirmation, hideConfirmation } = useConfirmationModalState();
+
+  const handleConfirm = React.useCallback(() => {
+    config.onConfirm();
+    hideConfirmation();
+  }, [config, hideConfirmation]);
+
+  const confirmationProps: ConfirmationModalProps = React.useMemo(() => ({
+    visible,
+    title: config.title,
+    message: config.message,
+    variant: config.variant || 'default',
+    confirmText: config.confirmText,
+    cancelText: config.cancelText,
+    onConfirm: handleConfirm,
+    onCancel: hideConfirmation,
+  }), [visible, config.title, config.message, config.variant, config.confirmText, config.cancelText, handleConfirm, hideConfirmation]);
+
+  return {
+    showConfirmation,
+    hideConfirmation,
+    confirmationProps,
+  };
+};

package/src/molecules/index.ts

@@ -0,0 +1,19 @@
+/**
+ * Molecules - Composite UI components
+ * Built from atoms following atomic design principles
+ */
+
+// Component exports
+export { FormField, type FormFieldProps } from './FormField';
+export { ListItem, type ListItemProps } from './ListItem';
+export { SearchBar, type SearchBarProps } from './SearchBar';
+export { IconContainer } from './IconContainer';
+export { ScreenHeader, type ScreenHeaderProps } from './ScreenHeader';
+export { ConfirmationModal } from './ConfirmationModalMain';
+export { useConfirmationModal } from './confirmation-modal/useConfirmationModal';
+
+// Type exports
+export type {
+  ConfirmationModalProps,
+  ConfirmationModalVariant,
+} from './confirmation-modal/types/';

package/src/molecules/listitem/index.ts

@@ -0,0 +1,6 @@
+/**
+ * ListItem Module - Re-exports
+ */
+
+export * from './types';
+export * from './styles/listItemStyles';

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

@@ -0,0 +1,37 @@
+/**
+ * ListItem Styles
+ */
+import type { ViewStyle, TextStyle } from 'react-native';
+import type { DesignTokens } from '../../../theme';
+
+export interface ListItemStyles {
+    container: ViewStyle;
+    disabled: ViewStyle;
+    iconContainer: ViewStyle;
+    content: ViewStyle;
+    subtitle: TextStyle;
+}
+
+export const getListItemStyles = (tokens: DesignTokens): ListItemStyles => ({
+    container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingVertical: tokens.spacing.md,
+        paddingHorizontal: tokens.spacing.md,
+        backgroundColor: tokens.colors.surface,
+        borderRadius: tokens.borders.radius.md,
+        minHeight: 56,
+    },
+    disabled: {
+        opacity: tokens.opacity.disabled,
+    },
+    iconContainer: {
+        marginRight: tokens.spacing.md,
+    },
+    content: {
+        flex: 1,
+    },
+    subtitle: {
+        marginTop: tokens.spacing.xs,
+    },
+});

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

@@ -0,0 +1,21 @@
+/**
+ * ListItem Types
+ */
+import type { ViewStyle } from 'react-native';
+
+export interface ListItemProps {
+    /** Main title text */
+    title: string;
+    /** Optional subtitle text */
+    subtitle?: string;
+    /** Left icon name */
+    leftIcon?: string;
+    /** Right icon name */
+    rightIcon?: string;
+    /** Press handler */
+    onPress?: () => void;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Custom container style */
+    style?: ViewStyle;
+}

package/src/organisms/AppHeader.tsx

@@ -0,0 +1,136 @@
+/**
+ * AppHeader Organism - Application Header Component
+ *
+ * Complex header combining atoms and molecules
+ * Generic component suitable for any application
+ *
+ * Atomic Design Level: ORGANISM
+ * Composition: AtomicIcon + AtomicText + AtomicButton
+ */
+
+import React from 'react';
+import { View, type ViewStyle } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { useAppDesignTokens } from '../theme';
+import { AtomicText, AtomicButton, type IconName } from '../atoms';
+
+// =============================================================================
+// TYPE DEFINITIONS
+// =============================================================================
+
+/**
+ * AppHeader component props
+ *
+ * leftIcon/rightIcon: Any MaterialIcons name
+ * @see https://fonts.google.com/icons
+ */
+export interface AppHeaderProps {
+  title: string;
+  subtitle?: string;
+  leftIcon?: IconName;
+  onLeftPress?: () => void;
+  rightIcon?: IconName;
+  onRightPress?: () => void;
+  backgroundColor?: string;
+  style?: ViewStyle;
+  accessibilityLabel?: string;
+  accessibilityHint?: string;
+  accessible?: boolean;
+}
+
+// =============================================================================
+// COMPONENT IMPLEMENTATION
+// =============================================================================
+
+export const AppHeader: React.FC<AppHeaderProps> = ({
+  title,
+  subtitle,
+  leftIcon,
+  onLeftPress,
+  rightIcon,
+  onRightPress,
+  backgroundColor,
+  style,
+}) => {
+  const tokens = useAppDesignTokens();
+  const bgColor = backgroundColor || tokens.colors.surface;
+  const styles = createAppHeaderStyles(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 createAppHeaderStyles = (tokens: ReturnType<typeof useAppDesignTokens>) => ({
+  safeArea: {
+    backgroundColor: tokens.colors.surface,
+  } as ViewStyle,
+  container: {
+    flexDirection: 'row' as const,
+    alignItems: 'center' as const,
+    justifyContent: 'space-between' as const,
+    paddingHorizontal: tokens.spacing.md,
+    paddingVertical: tokens.spacing.sm,
+    minHeight: tokens.iconSizes.xl + tokens.spacing.md,
+  } as ViewStyle,
+  leftContainer: {
+    width: tokens.iconSizes.xl + tokens.spacing.sm,
+    alignItems: 'flex-start' as const,
+  } as ViewStyle,
+  titleContainer: {
+    flex: 1,
+    alignItems: 'center' as const,
+    paddingHorizontal: tokens.spacing.sm,
+  } as ViewStyle,
+  rightContainer: {
+    width: tokens.iconSizes.xl + tokens.spacing.sm,
+    alignItems: 'flex-start' as const,
+  } as ViewStyle,
+});
+
+// =============================================================================
+// EXPORTS
+// =============================================================================
+