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

package/src/atoms/fab/types/index.ts

@@ -0,0 +1,88 @@
+import { StyleProp, ViewStyle } from 'react-native';
+
+/**
+ * FAB (Floating Action Button) size variants
+ * Based on Material Design 3 standards
+ */
+export type FabSize = 'sm' | 'md' | 'lg';
+
+/**
+ * FAB variant types
+ * - primary: Main action (uses primary color)
+ * - secondary: Secondary action (uses secondary color)
+ * - surface: Neutral action (uses surface color with border)
+ */
+export type FabVariant = 'primary' | 'secondary' | 'surface';
+
+/**
+ * FAB configuration for variant styling
+ */
+export interface FabVariantConfig {
+  backgroundColor: string;
+  iconColor: string;
+}
+
+/**
+ * FAB configuration for size styling
+ */
+export interface FabSizeConfig {
+  width: number;
+  height: number;
+  borderRadius: number;
+}
+
+/**
+ * AtomicFab component props
+ */
+export interface AtomicFabProps {
+  /**
+   * Icon name to display (required)
+   * Any MaterialIcons name (see https://fonts.google.com/icons)
+   * Examples: 'add', 'edit', 'camera', etc.
+   */
+  icon: string;
+
+  /**
+   * Callback when FAB is pressed
+   */
+  onPress: () => void;
+
+  /**
+   * Visual variant of the FAB
+   * @default 'primary'
+   */
+  variant?: FabVariant;
+
+  /**
+   * Size of the FAB
+   * @default 'md'
+   */
+  size?: FabSize;
+
+  /**
+   * Whether the FAB is disabled
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Custom style for the FAB container
+   */
+  style?: StyleProp<ViewStyle>;
+
+  /**
+   * Test ID for testing
+   */
+  testID?: string;
+
+  /**
+   * Accessibility label
+   */
+  accessibilityLabel?: string;
+
+  /**
+   * Active opacity for touch feedback
+   * @default 0.7
+   */
+  activeOpacity?: number;
+}

package/src/atoms/index.ts

@@ -0,0 +1,70 @@
+/**
+ * Atoms - Primitive UI components
+ * Building blocks for molecules and organisms
+ */
+
+// Button
+export {
+  AtomicButton,
+  type AtomicButtonProps,
+  type ButtonVariant,
+  type ButtonSize,
+} from './AtomicButton';
+
+// Text
+export { AtomicText, type AtomicTextProps } from './AtomicText';
+
+// Card - Note: Card may not exist, check later
+// export {
+//   AtomicCard,
+//   type AtomicCardProps,
+//   type AtomicCardVariant,
+//   type AtomicCardPadding,
+// } from './AtomicCard';
+
+// Input
+export {
+  AtomicInput,
+  type AtomicInputProps,
+  type AtomicInputVariant,
+  type AtomicInputState,
+  type AtomicInputSize,
+} from './AtomicInput';
+
+// Icon
+export {
+  AtomicIcon,
+  type AtomicIconProps,
+  type IconSize,
+  type IconColor,
+  type IconName,
+} from './AtomicIcon';
+
+// Avatar
+export { AtomicAvatar, type AtomicAvatarProps } from './AtomicAvatar';
+
+// Chip
+export { AtomicChip, type AtomicChipProps } from './AtomicChip';
+
+// Progress
+export { AtomicProgress, type AtomicProgressProps } from './AtomicProgress';
+
+// Fab
+export {
+  AtomicFab,
+  type AtomicFabProps,
+  type FabSize,
+  type FabVariant,
+  getFabVariants,
+} from './AtomicFab';
+
+// Picker
+export {
+  AtomicPicker,
+  type AtomicPickerProps,
+  type PickerOption,
+  type PickerSize,
+} from './AtomicPicker';
+
+// DatePicker
+export { AtomicDatePicker, type AtomicDatePickerProps } from './AtomicDatePicker';

package/src/atoms/input/hooks/useInputState.ts

@@ -0,0 +1,63 @@
+import { useState, useCallback } from 'react';
+
+interface UseInputStateProps {
+  value?: string;
+  onChangeText?: (text: string) => void;
+  secureTextEntry?: boolean;
+  showPasswordToggle?: boolean;
+  maxLength?: number;
+  showCharacterCount?: boolean;
+}
+
+interface UseInputStateReturn {
+  localValue: string;
+  isFocused: boolean;
+  isPasswordVisible: boolean;
+  characterCount: number;
+  isAtMaxLength: boolean;
+  setIsFocused: (focused: boolean) => void;
+  handleTextChange: (text: string) => void;
+  togglePasswordVisibility: () => void;
+}
+
+export const useInputState = ({
+  value = '',
+  onChangeText,
+  secureTextEntry = false,
+  showPasswordToggle = false,
+  maxLength,
+  showCharacterCount = false,
+}: UseInputStateProps = {}): UseInputStateReturn => {
+  const [localValue, setLocalValue] = useState(value);
+  const [isFocused, setIsFocused] = useState(false);
+  const [isPasswordVisible, setIsPasswordVisible] = useState(!secureTextEntry);
+
+  const handleTextChange = useCallback((text: string) => {
+    if (__DEV__) {
+      console.log('[useInputState] Text changed:', { text, length: text.length });
+    }
+    setLocalValue(text);
+    onChangeText?.(text);
+  }, [onChangeText]);
+
+  const togglePasswordVisibility = useCallback(() => {
+    if (__DEV__) {
+      console.log('[useInputState] Password visibility toggled');
+    }
+    setIsPasswordVisible((prev) => !prev);
+  }, []);
+
+  const characterCount = localValue.length;
+  const isAtMaxLength = maxLength ? characterCount >= maxLength : false;
+
+  return {
+    localValue,
+    isFocused,
+    isPasswordVisible,
+    characterCount,
+    isAtMaxLength,
+    setIsFocused,
+    handleTextChange,
+    togglePasswordVisibility,
+  };
+};

package/src/atoms/input/styles/inputStylesHelper.ts

@@ -0,0 +1,120 @@
+/**
+ * Input Styles Helper
+ *
+ * Helper functions for AtomicInput component styling.
+ * Extracted from AtomicInput for better separation of concerns.
+ */
+
+import { ViewStyle, TextStyle } from 'react-native';
+import { useAppDesignTokens } from '../../../theme';
+import type { AtomicInputVariant, AtomicInputSize } from '../../AtomicInput';
+
+interface GetVariantStyleParams {
+  variant: AtomicInputVariant;
+  isFocused: boolean;
+  hasError: boolean;
+  hasSuccess: boolean;
+  isDisabled: boolean;
+  tokens: ReturnType<typeof useAppDesignTokens>;
+}
+
+interface GetSizeConfigParams {
+  size: AtomicInputSize;
+  tokens: ReturnType<typeof useAppDesignTokens>;
+}
+
+export const getSizeConfig = ({ size, tokens }: GetSizeConfigParams) => {
+  const sizeConfig = {
+    sm: {
+      paddingVertical: tokens.spacing.xs,
+      paddingHorizontal: tokens.spacing.sm,
+      fontSize: tokens.typography.bodySmall.fontSize,
+      iconSize: 16,
+      minHeight: 40,
+    },
+    md: {
+      paddingVertical: tokens.spacing.sm,
+      paddingHorizontal: tokens.spacing.md,
+      fontSize: tokens.typography.bodyMedium.fontSize,
+      iconSize: 20,
+      minHeight: 48,
+    },
+    lg: {
+      paddingVertical: tokens.spacing.md,
+      paddingHorizontal: tokens.spacing.lg,
+      fontSize: tokens.typography.bodyLarge.fontSize,
+      iconSize: 24,
+      minHeight: 56,
+    },
+  };
+
+  return sizeConfig[size] ?? sizeConfig.md;
+};
+
+export const getVariantStyle = ({
+  variant,
+  isFocused,
+  hasError,
+  hasSuccess,
+  isDisabled,
+  tokens,
+}: GetVariantStyleParams): ViewStyle => {
+  const baseStyle: ViewStyle = {
+    backgroundColor: tokens.colors.surface,
+    borderRadius: tokens.borders.radius.md,
+  };
+
+  let borderColor = tokens.colors.border;
+  if (isFocused) borderColor = tokens.colors.primary;
+  if (hasError) borderColor = tokens.colors.error;
+  if (hasSuccess) borderColor = tokens.colors.success;
+  if (isDisabled) borderColor = tokens.colors.borderDisabled;
+
+  switch (variant) {
+    case 'outlined':
+      return {
+        ...baseStyle,
+        borderWidth: isFocused ? 2 : 1,
+        borderColor,
+      };
+
+    case 'filled':
+      return {
+        ...baseStyle,
+        backgroundColor: tokens.colors.surfaceVariant,
+        borderWidth: 0,
+        borderBottomWidth: isFocused ? 2 : 1,
+        borderBottomColor: borderColor,
+      };
+
+    case 'flat':
+      return {
+        ...baseStyle,
+        backgroundColor: 'transparent',
+        borderWidth: 0,
+        borderBottomWidth: 1,
+        borderBottomColor: borderColor,
+        borderRadius: 0,
+      };
+
+    default:
+      return baseStyle;
+  }
+};
+
+export const getTextColor = ({
+  isDisabled,
+  hasError,
+  hasSuccess,
+  tokens,
+}: {
+  isDisabled: boolean;
+  hasError: boolean;
+  hasSuccess: boolean;
+  tokens: ReturnType<typeof useAppDesignTokens>;
+}): string => {
+  if (isDisabled) return tokens.colors.textDisabled;
+  if (hasError) return tokens.colors.error;
+  if (hasSuccess) return tokens.colors.success;
+  return tokens.colors.onSurface;
+};

package/src/atoms/picker/components/PickerChips.tsx

@@ -0,0 +1,57 @@
+/**
+ * PickerChips Component
+ *
+ * Component for rendering selected chips in multi-select mode.
+ * Extracted from AtomicPicker for better separation of concerns.
+ */
+
+import React from 'react';
+import { View, TouchableOpacity } from 'react-native';
+import { useAppDesignTokens } from '../../../theme';
+import { PickerOption } from '../types';
+import { AtomicIcon } from '../../AtomicIcon';
+import { AtomicText } from '../../AtomicText';
+import {
+  getChipContainerStyles,
+  getChipStyles,
+  getChipTextStyles,
+} from '../styles/pickerStyles';
+
+interface PickerChipsProps {
+  selectedOptions: PickerOption[];
+  onRemoveChip: (value: string) => void;
+  testID?: string;
+}
+
+export const PickerChips: React.FC<PickerChipsProps> = React.memo(({
+  selectedOptions,
+  onRemoveChip,
+  testID,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  const chipContainerStyles = getChipContainerStyles(tokens);
+  const chipStyles = getChipStyles(tokens);
+  const chipTextStyles = getChipTextStyles(tokens);
+
+  if (selectedOptions.length === 0) return null;
+
+  return (
+    <View style={chipContainerStyles}>
+      {selectedOptions.map((opt) => (
+        <View key={opt.value} style={chipStyles}>
+          <AtomicText style={chipTextStyles}>{opt.label}</AtomicText>
+          <TouchableOpacity
+            onPress={(e) => {
+              e.stopPropagation();
+              onRemoveChip(opt.value);
+            }}
+            hitSlop={{ top: 4, bottom: 4, left: 4, right: 4 }}
+          >
+            <AtomicIcon name="X" size="sm" color="primary" />
+          </TouchableOpacity>
+        </View>
+      ))}
+    </View>
+  );
+});

package/src/atoms/picker/components/PickerModal.tsx

@@ -0,0 +1,214 @@
+/**
+ * PickerModal Component
+ *
+ * Modal component for AtomicPicker that handles the selection interface.
+ * Extracted from AtomicPicker to follow single responsibility principle.
+ *
+ * Features:
+ * - Search functionality
+ * - Option list rendering
+ * - Multi-select support
+ * - Empty state handling
+ */
+
+import React from 'react';
+import {
+  View,
+  Modal,
+  FlatList,
+  TextInput,
+  StyleSheet,
+  TouchableOpacity,
+} from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useAppDesignTokens } from '../../../theme';
+import { PickerOption } from '../types';
+import { AtomicIcon } from '../../AtomicIcon';
+import { AtomicText } from '../../AtomicText';
+import {
+  getModalOverlayStyles,
+  getModalContainerStyles,
+  getModalHeaderStyles,
+  getModalTitleStyles,
+  getSearchContainerStyles,
+  getSearchInputStyles,
+  getOptionContainerStyles,
+  getOptionTextStyles,
+  getOptionDescriptionStyles,
+  getEmptyStateStyles,
+  getEmptyStateTextStyles,
+} from '../styles/pickerStyles';
+
+interface PickerModalProps {
+  visible: boolean;
+  onClose: () => void;
+  options: PickerOption[];
+  selectedValues: string[];
+  onSelect: (value: string) => void;
+  title?: string;
+  searchable?: boolean;
+  searchQuery: string;
+  onSearchChange: (query: string) => void;
+  filteredOptions: PickerOption[];
+  multiple?: boolean;
+  emptyMessage?: string;
+  searchPlaceholder?: string;
+  closeAccessibilityLabel?: string;
+  testID?: string;
+}
+
+export const PickerModal: React.FC<PickerModalProps> = React.memo(({
+  visible,
+  onClose,
+  options,
+  selectedValues,
+  onSelect,
+  title,
+  searchable = false,
+  searchQuery,
+  onSearchChange,
+  filteredOptions,
+  multiple = false,
+  emptyMessage = 'No options available',
+  searchPlaceholder = 'Search...',
+  closeAccessibilityLabel = 'Close picker',
+  testID,
+}) => {
+  const tokens = useAppDesignTokens();
+  const insets = useSafeAreaInsets();
+
+  const modalOverlayStyles = getModalOverlayStyles(tokens);
+  const modalContainerStyles = getModalContainerStyles(tokens, 0);
+  const modalHeaderStyles = getModalHeaderStyles(tokens);
+  const modalTitleStyles = getModalTitleStyles(tokens);
+  const searchContainerStyles = getSearchContainerStyles(tokens);
+  const searchInputStyles = getSearchInputStyles(tokens);
+  const emptyStateStyles = getEmptyStateStyles(tokens);
+  const emptyStateTextStyles = getEmptyStateTextStyles(tokens);
+
+  const isSelected = (optionValue: string): boolean => {
+    return selectedValues.includes(optionValue);
+  };
+
+  const renderOption = ({ item }: { item: PickerOption }) => {
+    const selected = isSelected(item.value);
+    const itemDisabled = item.disabled || false;
+
+    const optionContainerStyle = getOptionContainerStyles(
+      tokens,
+      selected,
+      itemDisabled
+    );
+    const optionTextStyle = getOptionTextStyles(tokens, selected);
+    const optionDescriptionStyle = getOptionDescriptionStyles(tokens);
+
+    return (
+      <TouchableOpacity
+        onPress={() => !itemDisabled && onSelect(item.value)}
+        disabled={itemDisabled}
+        testID={item.testID || `${testID}-option-${item.value}`}
+        style={optionContainerStyle}
+      >
+        {/* Option Icon */}
+        {item.icon && (
+          <AtomicIcon
+            name={item.icon}
+            size="md"
+            color={selected ? 'primary' : 'secondary'}
+          />
+        )}
+
+        {/* Option Content */}
+        <View style={{ flex: 1 }}>
+          <AtomicText style={optionTextStyle}>{item.label}</AtomicText>
+          {item.description && (
+            <AtomicText style={optionDescriptionStyle}>
+              {item.description}
+            </AtomicText>
+          )}
+        </View>
+
+        {/* Selected Indicator */}
+        {selected && (
+          <AtomicIcon name="CircleCheck" size="md" color="primary" />
+        )}
+      </TouchableOpacity>
+    );
+  };
+
+  return (
+    <Modal
+      visible={visible}
+      animationType="slide"
+      transparent
+      onRequestClose={onClose}
+      testID={`${testID}-modal`}
+    >
+      <View style={modalOverlayStyles}>
+        <View
+          style={[
+            modalContainerStyles,
+            { paddingBottom: insets.bottom + tokens.spacing.md },
+          ]}
+        >
+          {/* Modal Header */}
+          <View style={modalHeaderStyles}>
+            {/* Title */}
+            <AtomicText style={modalTitleStyles}>
+              {title || 'Select'}
+            </AtomicText>
+
+            {/* Close Button */}
+            <TouchableOpacity
+              onPress={onClose}
+              hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+              accessibilityRole="button"
+              accessibilityLabel={closeAccessibilityLabel}
+              testID={`${testID}-close`}
+            >
+              <AtomicIcon name="X" size="md" color="primary" />
+            </TouchableOpacity>
+          </View>
+
+          {/* Search Bar */}
+          {searchable && (
+            <View style={searchContainerStyles}>
+              <AtomicIcon name="Search" size="sm" color="secondary" />
+              <TextInput
+                value={searchQuery}
+                onChangeText={onSearchChange}
+                placeholder={searchPlaceholder}
+                placeholderTextColor={tokens.colors.textSecondary}
+                style={searchInputStyles}
+                testID={`${testID}-search`}
+              />
+              {searchQuery.length > 0 && (
+                <TouchableOpacity onPress={() => onSearchChange('')}>
+                  <AtomicIcon name="X" size="sm" color="secondary" />
+                </TouchableOpacity>
+              )}
+            </View>
+          )}
+
+          {/* Options List */}
+          {filteredOptions.length > 0 ? (
+            <FlatList
+              data={filteredOptions}
+              keyExtractor={(item) => item.value}
+              renderItem={renderOption}
+              showsVerticalScrollIndicator
+              testID={`${testID}-list`}
+            />
+          ) : (
+            <View style={emptyStateStyles}>
+              <AtomicIcon name="Info" size="xl" color="secondary" />
+              <AtomicText style={emptyStateTextStyles}>
+                {emptyMessage}
+              </AtomicText>
+            </View>
+          )}
+        </View>
+      </View>
+    </Modal>
+  );
+});