@umituz/react-native-design-system 4.28.6 → 4.28.8

package/src/onboarding/presentation/components/questions/MultipleChoiceQuestion.tsx

@@ -4,12 +4,13 @@
  */
 
 import React from "react";
-import { View, StyleSheet } from "react-native";
+import { View } from "react-native";
 import { AtomicText } from "../../../../atoms/AtomicText";
 import { useOnboardingProvider } from "../../providers/OnboardingProvider";
 import { ensureArray } from "../../../infrastructure/utils/arrayUtils";
 import type { OnboardingQuestion } from "../../../domain/entities/OnboardingQuestion";
 import { QuestionOptionItem } from "./QuestionOptionItem";
+import { questionStyles } from "./questionStyles";
 
 export interface MultipleChoiceQuestionProps {
   question: OnboardingQuestion;
@@ -40,7 +41,7 @@ export const MultipleChoiceQuestion = ({
   };
 
   return (
-    <View style={styles.container}>
+    <View style={[questionStyles.container, { gap: 12 }]}>
       {question.options?.map((option) => (
         <QuestionOptionItem
           key={option.id}
@@ -53,7 +54,7 @@ export const MultipleChoiceQuestion = ({
       {question.validation?.maxSelections && (
         <AtomicText
           type="labelSmall"
-          style={[styles.hint, { color: colors.subTextColor }]}
+          style={[questionStyles.hint, { color: colors.subTextColor }]}
         >
           Select up to {question.validation.maxSelections} options
         </AtomicText>
@@ -61,14 +62,3 @@ export const MultipleChoiceQuestion = ({
     </View>
   );
 };
-
-const styles = StyleSheet.create({
-  container: {
-    width: "100%",
-    gap: 12,
-  },
-  hint: {
-    textAlign: "center",
-    marginTop: 8,
-  },
-});

package/src/onboarding/presentation/components/questions/QuestionOptionItem.tsx

@@ -4,10 +4,11 @@
  */
 
 import React from "react";
-import { View, TouchableOpacity, StyleSheet } from "react-native";
+import { View, TouchableOpacity } from "react-native";
 import { AtomicIcon, AtomicText } from "../../../../atoms";
 import type { QuestionOption } from "../../../domain/entities/OnboardingQuestion";
 import type { OnboardingColors } from "../../types/OnboardingTheme";
+import { questionStyles, OPTION_ICON_SIZE, OPTION_EMOJI_SIZE } from "./questionStyles";
 
 export interface QuestionOptionItemProps {
   option: QuestionOption;
@@ -27,7 +28,7 @@ export const QuestionOptionItem = React.memo(({
   return (
     <TouchableOpacity
       style={[
-        styles.option,
+        questionStyles.option,
         {
           backgroundColor: isSelected ? colors.iconBg : colors.featureItemBg,
           borderColor: isSelected ? colors.iconColor : colors.headerButtonBorder,
@@ -42,15 +43,15 @@ export const QuestionOptionItem = React.memo(({
     >
       {option.icon && (
         <View style={[
-          styles.optionIcon,
+          questionStyles.optionIcon,
           { backgroundColor: isSelected ? colors.iconColor : colors.featureItemBg }
         ]}>
           {isEmoji ? (
-            <AtomicText style={{ fontSize: 24 }}>{option.icon}</AtomicText>
+            <AtomicText style={{ fontSize: OPTION_EMOJI_SIZE }}>{option.icon}</AtomicText>
           ) : (
             <AtomicIcon
               name={option.icon}
-              customSize={20}
+              customSize={OPTION_ICON_SIZE}
               customColor={isSelected ? colors.buttonTextColor : colors.subTextColor}
             />
           )}
@@ -59,7 +60,7 @@ export const QuestionOptionItem = React.memo(({
       <AtomicText
         type="bodyLarge"
         style={[
-          styles.optionLabel,
+          questionStyles.optionLabel,
           {
             color: isSelected ? colors.textColor : colors.subTextColor,
             fontWeight: isSelected ? '700' : '500'
@@ -69,7 +70,7 @@ export const QuestionOptionItem = React.memo(({
         {option.label}
       </AtomicText>
       <View style={[
-        styles.checkbox,
+        questionStyles.checkbox,
         {
           borderColor: isSelected ? colors.iconColor : colors.headerButtonBorder,
           backgroundColor: isSelected ? colors.iconColor : 'transparent',
@@ -87,32 +88,3 @@ export const QuestionOptionItem = React.memo(({
     </TouchableOpacity>
   );
 });
-
-const styles = StyleSheet.create({
-  option: {
-    flexDirection: "row",
-    alignItems: "center",
-    borderRadius: 20,
-    padding: 16,
-    marginBottom: 8,
-  },
-  optionIcon: {
-    width: 40,
-    height: 40,
-    borderRadius: 20,
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginRight: 16,
-  },
-  optionLabel: {
-    flex: 1,
-    fontSize: 16,
-  },
-  checkbox: {
-    width: 24,
-    height: 24,
-    borderRadius: 8,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-});

package/src/onboarding/presentation/components/questions/RatingQuestion.tsx

@@ -3,6 +3,7 @@ import { View, TouchableOpacity, StyleSheet } from "react-native";
 import { AtomicIcon, AtomicText } from "../../../../atoms";
 import { useOnboardingProvider } from "../../providers/OnboardingProvider";
 import type { OnboardingQuestion } from "../../../domain/entities/OnboardingQuestion";
+import { createMappedArray } from "../../../../utils/arrayUtils";
 
 export interface RatingQuestionProps {
   question: OnboardingQuestion;
@@ -23,7 +24,7 @@ export const RatingQuestion = ({
   return (
     <View style={styles.container}>
       <View style={styles.stars}>
-        {Array.from({ length: max }).map((_, i) => {
+        {createMappedArray(max, (i) => {
           const isFilled = i < value;
           return (
             <TouchableOpacity

package/src/onboarding/presentation/components/questions/SingleChoiceQuestion.tsx

@@ -1,8 +1,9 @@
 import React from "react";
-import { View, TouchableOpacity, StyleSheet } from "react-native";
+import { View, TouchableOpacity } from "react-native";
 import { AtomicIcon, AtomicText } from "../../../../atoms";
 import { useOnboardingProvider } from "../../providers/OnboardingProvider";
 import type { OnboardingQuestion, QuestionOption } from "../../../domain/entities/OnboardingQuestion";
+import { questionStyles, OPTION_ICON_SIZE, OPTION_EMOJI_SIZE } from "./questionStyles";
 
 export interface SingleChoiceQuestionProps {
   question: OnboardingQuestion;
@@ -27,7 +28,7 @@ export const SingleChoiceQuestion = ({
       <TouchableOpacity
         key={option.id}
         style={[
-          styles.option,
+          questionStyles.option,
           {
             backgroundColor: isSelected ? colors.iconBg : colors.featureItemBg,
             borderColor: isSelected ? colors.iconColor : colors.headerButtonBorder,
@@ -39,29 +40,29 @@ export const SingleChoiceQuestion = ({
       >
         {option.icon && (
           <View style={[
-            styles.optionIcon,
+            questionStyles.optionIcon,
             { backgroundColor: isSelected ? colors.iconColor : colors.featureItemBg }
           ]}>
             {isEmoji ? (
-              <AtomicText style={{ fontSize: 24 }}>{option.icon}</AtomicText>
+              <AtomicText style={{ fontSize: OPTION_EMOJI_SIZE }}>{option.icon}</AtomicText>
             ) : (
               <AtomicIcon
                 name={option.icon}
-                customSize={20}
+                customSize={OPTION_ICON_SIZE}
                 customColor={isSelected ? colors.buttonTextColor : colors.subTextColor}
               />
             )}
           </View>
         )}
-        <AtomicText type="bodyLarge" style={[styles.optionLabel, { color: isSelected ? colors.textColor : colors.subTextColor, fontWeight: isSelected ? '700' : '500' }]}>
+        <AtomicText type="bodyLarge" style={[questionStyles.optionLabel, { color: isSelected ? colors.textColor : colors.subTextColor, fontWeight: isSelected ? '700' : '500' }]}>
           {option.label}
         </AtomicText>
         <View style={[
-          styles.radioOuter,
+          questionStyles.radioOuter,
           { borderColor: isSelected ? colors.iconColor : colors.headerButtonBorder }
         ]}>
           {isSelected && (
-            <View style={[styles.radioInner, { backgroundColor: colors.iconColor }]} />
+            <View style={[questionStyles.radioInner, { backgroundColor: colors.iconColor }]} />
           )}
         </View>
       </TouchableOpacity>
@@ -69,49 +70,8 @@ export const SingleChoiceQuestion = ({
   };
 
   return (
-    <View style={styles.container}>
+    <View style={[questionStyles.container, { gap: 12 }]}>
       {question.options?.map(renderOption)}
     </View>
   );
 };
-
-const styles = StyleSheet.create({
-  container: {
-    width: "100%",
-    gap: 12,
-  },
-  option: {
-    flexDirection: "row",
-    alignItems: "center",
-    borderRadius: 20,
-    padding: 16,
-    marginBottom: 8,
-  },
-  optionIcon: {
-    width: 40,
-    height: 40,
-    borderRadius: 20,
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginRight: 16,
-  },
-  optionLabel: {
-    flex: 1,
-    fontSize: 16,
-  },
-  radioOuter: {
-    width: 24,
-    height: 24,
-    borderRadius: 12,
-    borderWidth: 2,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  radioInner: {
-    width: 12,
-    height: 12,
-    borderRadius: 6,
-  },
-});
-
-

package/src/onboarding/presentation/components/questions/questionStyles.ts

@@ -0,0 +1,59 @@
+/**
+ * Shared Styles for Question Components
+ * Eliminates code duplication across SingleChoice, MultipleChoice, etc.
+ */
+
+import { StyleSheet } from 'react-native';
+
+export const questionStyles = StyleSheet.create({
+  option: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderRadius: 20,
+    padding: 16,
+    marginBottom: 8,
+    width: '100%',
+  },
+  optionIcon: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 16,
+  },
+  optionLabel: {
+    flex: 1,
+    fontSize: 16,
+  },
+  radioOuter: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    borderWidth: 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  radioInner: {
+    width: 12,
+    height: 12,
+    borderRadius: 6,
+  },
+  checkbox: {
+    width: 24,
+    height: 24,
+    borderRadius: 8,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  container: {
+    width: '100%',
+  },
+  hint: {
+    textAlign: 'center',
+    marginTop: 8,
+  },
+});
+
+export const OPTION_ICON_SIZE = 20;
+export const OPTION_EMOJI_SIZE = 24;

package/src/theme/index.ts

@@ -65,7 +65,8 @@ export type {
 // =============================================================================
 
 export { useAppDesignTokens } from './hooks/useAppDesignTokens';
-export { useDesignSystemTheme } from './infrastructure/globalThemeStore';
+// Alias for backward compatibility - useTheme is now the single source of truth
+export { useTheme as useDesignSystemTheme } from './infrastructure/stores/themeStore';
 export { useTheme } from './infrastructure/stores/themeStore';
 export { useThemedStyles, useThemedStyleSheet } from './hooks/useThemedStyles';
 export { useCommonStyles } from './hooks/useCommonStyles';

package/src/theme/infrastructure/providers/DesignSystemProvider.tsx

@@ -4,7 +4,7 @@ import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { useFonts } from 'expo-font';
 import { SafeAreaProvider, initialWindowMetrics } from '../../../safe-area';
 import { useTheme } from '../stores/themeStore';
-import { useDesignSystemTheme, type ThemeMode } from '../globalThemeStore';
+import type { ThemeMode } from '../../core/ColorPalette';
 import type { CustomThemeColors } from '../../core/CustomColors';
 import type { SplashScreenProps } from '../../../molecules/splash/types';
 import { FIVE_SECONDS_MS } from '../../../utils/constants/TimeConstants';
@@ -46,20 +46,16 @@ export const DesignSystemProvider: React.FC<DesignSystemProviderProps> = ({
   const setCustomColors = useTheme((state) => state.setCustomColors);
   const setDefaultColors = useTheme((state) => state.setDefaultColors);
   const setDefaultThemeMode = useTheme((state) => state.setDefaultThemeMode);
-  const setGlobalCustomColors = useDesignSystemTheme((state) => state.setCustomColors);
-  const setGlobalThemeMode = useDesignSystemTheme((state) => state.setThemeMode);
 
   useEffect(() => {
     // Register app's default colors for reset feature
     if (customColors) {
       setDefaultColors(customColors);
       setCustomColors(customColors);
-      setGlobalCustomColors(customColors);
     }
 
     // Set default theme mode BEFORE initialize
     setDefaultThemeMode(initialThemeMode);
-    setGlobalThemeMode(initialThemeMode);
 
     // Safety timeout: if initialization takes too long, proceed anyway
     const safetyTimer = setTimeout(() => {
@@ -89,8 +85,6 @@ export const DesignSystemProvider: React.FC<DesignSystemProviderProps> = ({
     setCustomColors,
     setDefaultColors,
     setDefaultThemeMode,
-    setGlobalCustomColors,
-    setGlobalThemeMode,
   ]);
 
   // Skip font loading gate when no custom fonts are provided

package/src/theme/infrastructure/stores/themeStore.ts

@@ -8,7 +8,6 @@
 import { createStore } from '../../../storage';
 import { lightTheme, darkTheme, type Theme } from '../../core/themes';
 import { ThemeStorage } from '../storage/ThemeStorage';
-import { useDesignSystemTheme } from '../globalThemeStore';
 import type { ThemeMode } from '../../core/ColorPalette';
 import type { CustomThemeColors } from '../../core/CustomColors';
 
@@ -95,16 +94,11 @@ export const useTheme = createStore<ThemeState, ThemeActions>({
           isDark: mode === 'dark',
           isInitialized: true,
         });
-
-        const dsTheme = useDesignSystemTheme.getState();
-        dsTheme.setThemeMode(mode);
-        dsTheme.setCustomColors(colors);
       } catch (error) {
         if (__DEV__) {
           console.error('[ThemeStore] Failed to initialize theme:', error);
         }
         set({ isInitialized: true, _initInProgress: false });
-        useDesignSystemTheme.getState().setThemeMode(defaultThemeMode);
       } finally {
         set({ _initInProgress: false });
       }
@@ -121,7 +115,6 @@ export const useTheme = createStore<ThemeState, ThemeActions>({
         const theme = mode === 'light' ? lightTheme : darkTheme;
         set({ themeMode: mode, theme, isDark: mode === 'dark' });
         await ThemeStorage.setThemeMode(mode);
-        useDesignSystemTheme.getState().setThemeMode(mode);
       } catch (error) {
         // Revert state on error
         set({ _lastUpdateId: undefined });
@@ -146,7 +139,6 @@ export const useTheme = createStore<ThemeState, ThemeActions>({
 
       try {
         await ThemeStorage.setCustomColors(colors);
-        useDesignSystemTheme.getState().setCustomColors(colors);
       } catch (error) {
         // Revert to previous colors on error
         set({ customColors: currentColors, _lastUpdateId: undefined });
@@ -173,9 +165,6 @@ export const useTheme = createStore<ThemeState, ThemeActions>({
       set({ themeMode: defaultThemeMode, theme, isDark: defaultThemeMode === 'dark', customColors: defaultColors });
       await ThemeStorage.clearThemeMode();
       await ThemeStorage.clearCustomColors();
-      const dsTheme = useDesignSystemTheme.getState();
-      dsTheme.setThemeMode(defaultThemeMode);
-      dsTheme.setCustomColors(defaultColors);
     },
 
     toggleTheme: async () => {

package/src/utils/arrayUtils.ts

@@ -0,0 +1,46 @@
+/**
+ * Array Utilities
+ * Common array manipulation helpers
+ */
+
+/**
+ * Creates an array of specified length and maps over it
+ * Alternative to Array.from({ length }).map() which is more verbose
+ *
+ * @param length - Length of array to create
+ * @param mapFn - Map function (receives index)
+ * @returns Mapped array
+ *
+ * @example
+ * createMappedArray(5, (i) => i * 2) // [0, 2, 4, 6, 8]
+ */
+export function createMappedArray<T>(
+  length: number,
+  mapFn: (index: number) => T
+): T[] {
+  return Array.from({ length }, (_, index) => mapFn(index));
+}
+
+/**
+ * Safely slice array to specified length
+ * Returns empty array if input is null/undefined
+ */
+export function safeSlice<T>(array: T[] | undefined, start: number, end?: number): T[] {
+  if (!array) return [];
+  return array.slice(start, end);
+}
+
+/**
+ * Filter array by ID
+ * Returns new array with item matching ID removed
+ */
+export function filterById<T extends { id: string }>(array: T[], idToRemove: string): T[] {
+  return array.filter(item => item.id !== idToRemove);
+}
+
+/**
+ * Find item in array by ID
+ */
+export function findById<T extends { id: string }>(array: T[], id: string): T | undefined {
+  return array.find(item => item.id === id);
+}

package/src/utils/index.ts

@@ -11,3 +11,10 @@ export {
   calculateLineHeight,
   createResponsiveSizes,
 } from './responsiveUtils';
+
+export {
+  createMappedArray,
+  safeSlice,
+  filterById,
+  findById,
+} from './arrayUtils';

package/dist/atoms/AtomicAvatar.d.ts

@@ -1,44 +0,0 @@
-/**
- * AtomicAvatar - Universal Avatar Component
- *
- * Displays user profile images with fallback to initials
- * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
- *
- * Atomic Design Level: ATOM
- * Purpose: User profile image display
- *
- * Usage:
- * - User profile pictures
- * - Contact avatars
- * - Group member avatars
- * - Default user placeholders
- */
-import React from 'react';
-import { ViewStyle, ImageStyle, ImageSourcePropType } from 'react-native';
-export interface AtomicAvatarProps {
-    /** Image source (URI or require) */
-    source?: ImageSourcePropType;
-    /** User's name for fallback initials */
-    name?: string;
-    /** Size of the avatar */
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
-    /** Custom size in pixels */
-    customSize?: number;
-    /** Background color for fallback */
-    backgroundColor?: string;
-    /** Text color for initials */
-    textColor?: string;
-    /** Border radius (default: circular) */
-    borderRadius?: number;
-    /** Border width */
-    borderWidth?: number;
-    /** Border color */
-    borderColor?: string;
-    /** Style overrides */
-    style?: ViewStyle | ViewStyle[];
-    /** Image style overrides */
-    imageStyle?: ImageStyle | ImageStyle[];
-    /** Test ID for testing */
-    testID?: string;
-}
-export declare const AtomicAvatar: React.FC<AtomicAvatarProps>;

package/dist/atoms/AtomicDatePicker.d.ts

@@ -1,42 +0,0 @@
-/**
- * AtomicDatePicker Component
- *
- * A reusable date picker component that wraps the native date picker
- * with consistent styling and behavior across platforms.
- *
- * Requires @react-native-community/datetimepicker as a peer dependency.
- * If not installed, the component will render only the button with a
- * console warning when pressed.
- *
- * @module AtomicDatePicker
- */
-import React from 'react';
-import { type StyleProp, type ViewStyle } from 'react-native';
-/**
- * Props for AtomicDatePicker component
- */
-export interface AtomicDatePickerProps {
-    /** Selected date value */
-    value: Date | null;
-    /** Callback when date changes */
-    onChange: (date: Date) => void;
-    /** Optional label displayed above picker */
-    label?: string;
-    /** Optional error message displayed below picker */
-    error?: string;
-    /** Disable picker interaction */
-    disabled?: boolean;
-    /** Minimum selectable date */
-    minimumDate?: Date;
-    /** Maximum selectable date */
-    maximumDate?: Date;
-    /** Picker mode - date, time, or datetime (iOS only) */
-    mode?: 'date' | 'time' | 'datetime';
-    /** Placeholder text when no value selected */
-    placeholder?: string;
-    /** Optional test ID for E2E testing */
-    testID?: string;
-    /** Optional container style */
-    style?: StyleProp<ViewStyle>;
-}
-export declare const AtomicDatePicker: React.FC<AtomicDatePickerProps>;

package/dist/atoms/AtomicFab.d.ts

@@ -1,36 +0,0 @@
-import React from 'react';
-import { AtomicFabProps } from './fab/types';
-import { FAB_SIZES, getFabVariants, getFabIconSize, getFabBorder } from './fab/styles/fabStyles';
-export type { FabSize, FabVariant, FabVariantConfig, FabSizeConfig, AtomicFabProps } from './fab/types';
-export { FAB_SIZES, getFabVariants, getFabIconSize, getFabBorder };
-/**
- * AtomicFab - Floating Action Button Component
- *
- * A Material Design 3 compliant FAB component for primary actions.
- * Follows CLAUDE.md standards for responsive positioning.
- *
- * @example
- * ```tsx
- * // IMPORTANT: FAB must be used at screen level, NOT inside ScrollView
- * <ScreenLayout>
- *   <ScrollView>
- *     {/* Your content *\/}
- *   </ScrollView>
- *   <AtomicFab
- *     icon="add"
- *     onPress={handleAddItem}
- *     variant="primary"
- *     size="md"
- *   />
- * </ScreenLayout>
- * ```
- *
- * Features:
- * - Material Design 3 sizes (sm: 40px, md: 56px, lg: 72px)
- * - Three variants: primary, secondary, surface
- * - Responsive positioning (above tab bar, safe area aware)
- * - Disabled state with opacity
- * - Theme-aware colors from design tokens
- * - Border for depth (no shadows per CLAUDE.md)
- */
-export declare const AtomicFab: React.FC<AtomicFabProps>;

package/dist/atoms/AtomicInput.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { TextInput } from 'react-native';
-import type { AtomicInputProps } from './input/types';
-export declare const AtomicInput: React.ForwardRefExoticComponent<AtomicInputProps & React.RefAttributes<TextInput>>;

package/dist/atoms/AtomicKeyboardAvoidingView.d.ts

@@ -1,17 +0,0 @@
-import React from 'react';
-import { type KeyboardAvoidingViewProps } from 'react-native';
-export interface AtomicKeyboardAvoidingViewProps extends KeyboardAvoidingViewProps {
-    /**
-     * Optional offset to adjust the position of the content.
-     * On iOS, this is often necessary to account for headers, tabs, etc.
-     */
-    offset?: number;
-}
-/**
- * AtomicKeyboardAvoidingView - A consistent wrapper for React Native's KeyboardAvoidingView
- *
- * Provides sensible defaults and OS-specific behaviors:
- * - iOS: behavior="padding"
- * - Android: behavior=undefined (handled by windowSoftInputMode="adjustResize")
- */
-export declare const AtomicKeyboardAvoidingView: React.FC<AtomicKeyboardAvoidingViewProps>;

package/dist/atoms/AtomicPicker.d.ts

@@ -1,9 +0,0 @@
-/**
- * AtomicPicker Component
- *
- * A reusable option picker/dropdown component for selecting from a list of options.
- */
-import React from 'react';
-import { AtomicPickerProps } from './picker/types';
-export type { AtomicPickerProps, PickerOption, PickerSize } from './picker/types';
-export declare const AtomicPicker: React.FC<AtomicPickerProps>;