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

package/src/molecules/SearchBar.tsx

@@ -0,0 +1,198 @@
+/**
+ * SearchBar Molecule - Enhanced Search Input with Clear Button
+ *
+ * Universal search input with clear functionality and loading state
+ * Fully configurable for general purpose use
+ */
+
+import React from 'react';
+import {
+  View,
+  TextInput,
+  TouchableOpacity,
+  ActivityIndicator,
+  StyleSheet,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import { useAppDesignTokens } from '../theme';
+import { AtomicIcon } from '../atoms';
+
+export interface SearchBarProps {
+  value: string;
+  onChangeText: (text: string) => void;
+  onSubmit?: () => void;
+  onClear?: () => void;
+  placeholder?: string;
+  autoFocus?: boolean;
+  loading?: boolean;
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+  containerStyle?: ViewStyle;
+  searchIconName?: string;
+  clearIconName?: string;
+}
+
+const useSearchBarLogic = (
+  value: string,
+  loading: boolean,
+  onChangeText: (text: string) => void,
+  onClear?: () => void,
+  onSubmit?: () => void
+) => {
+  const handleClear = React.useCallback(() => {
+    onChangeText('');
+    onClear?.();
+  }, [onChangeText, onClear]);
+
+  const handleSubmit = React.useCallback(() => {
+    onSubmit?.();
+  }, [onSubmit]);
+
+  const showClear = React.useMemo(() =>
+    value.length > 0 && !loading, [value, loading]
+  );
+
+  return { handleClear, handleSubmit, showClear };
+};
+
+const SearchBarInput: React.FC<{
+  value: string;
+  placeholder?: string;
+  autoFocus?: boolean;
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+  onChangeText: (text: string) => void;
+  onSubmitEditing?: () => void;
+  tokens: ReturnType<typeof useAppDesignTokens>;
+}> = ({ value, placeholder, autoFocus, disabled, style, onChangeText, onSubmitEditing, tokens }) => {
+  const styles = React.useMemo(() => getSearchBarStyles(), []);
+
+  const inputStyle = React.useMemo(() => [
+    styles.input,
+    {
+      color: tokens.colors.textPrimary,
+      ...tokens.typography.bodyMedium,
+    },
+  ], [styles.input, tokens.colors.textPrimary, tokens.typography.bodyMedium]);
+
+  return (
+    <TextInput
+      value={value}
+      onChangeText={onChangeText}
+      onSubmitEditing={onSubmitEditing}
+      placeholder={placeholder}
+      placeholderTextColor={tokens.colors.textSecondary}
+      autoFocus={autoFocus}
+      editable={!disabled}
+      returnKeyType="search"
+      autoCapitalize="none"
+      autoCorrect={false}
+      style={[inputStyle, style]}
+    />
+  );
+};
+
+const SearchBarIcons: React.FC<{
+  searchIconName: string;
+  clearIconName: string;
+  loading: boolean;
+  showClear: boolean;
+  onClear: () => void;
+  tokens: ReturnType<typeof useAppDesignTokens>;
+}> = ({ searchIconName, clearIconName, loading, showClear, onClear, tokens }) => {
+  const styles = React.useMemo(() => getSearchBarStyles(), []);
+
+  return (
+    <>
+      <AtomicIcon
+        name={searchIconName}
+        customSize={20}
+        customColor={tokens.colors.textSecondary}
+        style={styles.searchIcon}
+      />
+
+      {loading && (
+        <ActivityIndicator
+          size="small"
+          color={tokens.colors.primary}
+          style={styles.icon}
+        />
+      )}
+
+      {showClear && (
+        <TouchableOpacity onPress={onClear} style={styles.icon}>
+          <AtomicIcon name={clearIconName} customSize={20} customColor={tokens.colors.textSecondary} />
+        </TouchableOpacity>
+      )}
+    </>
+  );
+};
+
+const SearchBarComponent: React.FC<SearchBarProps> = ({
+  value,
+  onChangeText,
+  onSubmit,
+  onClear,
+  placeholder,
+  autoFocus = false,
+  loading = false,
+  disabled = false,
+  style,
+  containerStyle,
+  searchIconName = 'search',
+  clearIconName = 'close-circle',
+}) => {
+  const tokens = useAppDesignTokens();
+  const { handleClear, handleSubmit, showClear } = useSearchBarLogic(
+    value, loading, onChangeText, onClear, onSubmit
+  );
+
+  return (
+    <View style={containerStyle}>
+      <SearchBarIcons
+        searchIconName={searchIconName}
+        clearIconName={clearIconName}
+        loading={loading}
+        showClear={showClear}
+        onClear={handleClear}
+        tokens={tokens}
+      />
+
+      <SearchBarInput
+        value={value}
+        placeholder={placeholder}
+        autoFocus={autoFocus}
+        disabled={disabled}
+        style={style}
+        onChangeText={onChangeText}
+        onSubmitEditing={handleSubmit}
+        tokens={tokens}
+      />
+    </View>
+  );
+};
+
+export const SearchBar = SearchBarComponent;
+
+const getSearchBarStyles = () => StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderRadius: 12,
+    minHeight: 44,
+  },
+  searchIcon: {
+    marginRight: 12,
+  },
+  input: {
+    flex: 1,
+    paddingVertical: 0,
+  },
+  icon: {
+    marginLeft: 8,
+  },
+});
+

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;
+}