@umituz/react-native-design-system 4.28.5 → 4.28.7

package/src/molecules/navigation/hooks/useAppNavigation.ts

@@ -14,59 +14,12 @@ export interface AppNavigationResult {
   pop: (count?: number) => void;
   popToTop: () => void;
   canGoBack: () => boolean;
-  getState: () => ReturnType<NavigationProp<ParamListBase>["getState"]>;
-  getParent: () => NavigationProp<ParamListBase> | undefined;
+  getState: () => ReturnType<NavigationProp<ParamListBase>["getState"]> | null;
+  getParent: () => NavigationProp<ParamListBase> | null | undefined;
   /** Whether navigation is available (inside NavigationContainer) */
   isReady: boolean;
 }
 
-/**
- * Creates a no-op navigation object for use outside NavigationContainer
- */
-function createNoOpNavigation(): AppNavigationResult {
-  return {
-    navigate: () => {
-      if (__DEV__) {
-        console.warn('[useAppNavigation] Navigation not ready. Component must be inside NavigationContainer.');
-      }
-    },
-    push: () => {
-      if (__DEV__) {
-        console.warn('[useAppNavigation] Navigation not ready. Component must be inside NavigationContainer.');
-      }
-    },
-    goBack: () => {
-      if (__DEV__) {
-        console.warn('[useAppNavigation] Navigation not ready. Component must be inside NavigationContainer.');
-      }
-    },
-    reset: () => {
-      if (__DEV__) {
-        console.warn('[useAppNavigation] Navigation not ready. Component must be inside NavigationContainer.');
-      }
-    },
-    replace: () => {
-      if (__DEV__) {
-        console.warn('[useAppNavigation] Navigation not ready. Component must be inside NavigationContainer.');
-      }
-    },
-    pop: () => {
-      if (__DEV__) {
-        console.warn('[useAppNavigation] Navigation not ready. Component must be inside NavigationContainer.');
-      }
-    },
-    popToTop: () => {
-      if (__DEV__) {
-        console.warn('[useAppNavigation] Navigation not ready. Component must be inside NavigationContainer.');
-      }
-    },
-    canGoBack: () => false,
-    getState: () => ({ key: 'root', index: 0, routeNames: [], history: [], routes: [], type: 'nav', stale: false }),
-    getParent: () => undefined,
-    isReady: false,
-  };
-}
-
 /**
  * useAppNavigation Hook
  *
@@ -81,84 +34,101 @@ function createNoOpNavigation(): AppNavigationResult {
  *      }
  */
 export function useAppNavigation(): AppNavigationResult {
-  try {
-    const navigation = useNavigation<NavigationProp<ParamListBase>>();
-
-    const navigate = useCallback(
-      (screen: string, params?: Record<string, unknown>) => {
-        // Dynamic navigation: use CommonActions for type-safe arbitrary screen navigation
-        navigation.dispatch(
-          CommonActions.navigate({
-            name: screen,
-            params,
-          })
-        );
-      },
-      [navigation]
-    );
+  // Always call hooks - no conditional calls
+  const navigation = useNavigation<NavigationProp<ParamListBase>>();
 
-    const push = useCallback(
-      (screen: string, params?: Record<string, unknown>) => {
-        navigation.dispatch(StackActions.push(screen, params));
-      },
-      [navigation]
-    );
+  // Check if navigation is ready
+  const isReady = Boolean(navigation);
 
-    const goBack = useCallback(() => {
-      if (navigation.canGoBack()) {
-        navigation.goBack();
+  const navigate = useCallback(
+    (screen: string, params?: Record<string, unknown>) => {
+      if (!navigation) {
+        if (__DEV__) {
+          console.warn('[useAppNavigation] Navigation not ready. Component must be inside NavigationContainer.');
+        }
+        return;
       }
-    }, [navigation]);
+      // Dynamic navigation: use CommonActions for type-safe arbitrary screen navigation
+      navigation.dispatch(
+        CommonActions.navigate({
+          name: screen,
+          params,
+        })
+      );
+    },
+    [navigation]
+  );
 
-    const reset = useCallback(
-      (screen: string, params?: Record<string, unknown>) => {
-        navigation.reset({ index: 0, routes: [{ name: screen, params }] });
-      },
-      [navigation]
-    );
+  const push = useCallback(
+    (screen: string, params?: Record<string, unknown>) => {
+      if (!navigation) return;
+      navigation.dispatch(StackActions.push(screen, params));
+    },
+    [navigation]
+  );
+
+  const goBack = useCallback(() => {
+    if (!navigation) return;
+    if (navigation.canGoBack()) {
+      navigation.goBack();
+    }
+  }, [navigation]);
+
+  const reset = useCallback(
+    (screen: string, params?: Record<string, unknown>) => {
+      if (!navigation) return;
+      navigation.reset({ index: 0, routes: [{ name: screen, params }] });
+    },
+    [navigation]
+  );
 
-    const replace = useCallback(
-      (screen: string, params?: Record<string, unknown>) => {
-        navigation.dispatch(StackActions.replace(screen, params));
-      },
-      [navigation]
-    );
+  const replace = useCallback(
+    (screen: string, params?: Record<string, unknown>) => {
+      if (!navigation) return;
+      navigation.dispatch(StackActions.replace(screen, params));
+    },
+    [navigation]
+  );
 
-    const pop = useCallback(
-      (count = 1) => {
-        navigation.dispatch(StackActions.pop(count));
-      },
-      [navigation]
-    );
+  const pop = useCallback(
+    (count = 1) => {
+      if (!navigation) return;
+      navigation.dispatch(StackActions.pop(count));
+    },
+    [navigation]
+  );
 
-    const popToTop = useCallback(() => {
-      navigation.dispatch(StackActions.popToTop());
-    }, [navigation]);
+  const popToTop = useCallback(() => {
+    if (!navigation) return;
+    navigation.dispatch(StackActions.popToTop());
+  }, [navigation]);
 
-    const canGoBack = useCallback(() => navigation.canGoBack(), [navigation]);
+  const canGoBackCallback = useCallback(() => {
+    return navigation ? navigation.canGoBack() : false;
+  }, [navigation]);
 
-    const getState = useCallback(() => navigation.getState(), [navigation]);
+  const getState = useCallback(() => {
+    return navigation ? navigation.getState() : null;
+  }, [navigation]);
 
-    const getParent = useCallback(() => navigation.getParent(), [navigation]);
+  const getParent = useCallback(() => {
+    return navigation ? navigation.getParent() : null;
+  }, [navigation]);
 
-    return useMemo(
-      () => ({
-        navigate,
-        push,
-        goBack,
-        reset,
-        replace,
-        pop,
-        popToTop,
-        canGoBack,
-        getState,
-        getParent,
-        isReady: true,
-      }),
-      [navigate, push, goBack, reset, replace, pop, popToTop, canGoBack, getState, getParent]
-    );
-  } catch (error) {
-    // Navigation not ready - return no-op navigation
-    return createNoOpNavigation();
-  }
+  return useMemo(
+    () => ({
+      navigate,
+      push,
+      goBack,
+      reset,
+      replace,
+      pop,
+      popToTop,
+      canGoBack: canGoBackCallback,
+      getState,
+      getParent,
+      isReady,
+    }),
+    [navigate, push, goBack, reset, replace, pop, popToTop, canGoBackCallback, getState, getParent, isReady]
+  );
 }

package/src/molecules/navigation/hooks/useAppRoute.ts

@@ -1,5 +1,5 @@
 import { useRoute } from "@react-navigation/native";
-import type { RouteProp, ParamListBase } from "@react-navigation/native";
+import type { RouteProp } from "@react-navigation/native";
 import { useMemo } from "react";
 
 /**
@@ -16,32 +16,31 @@ import { useMemo } from "react";
  * }
  * ```
  */
-export function useAppRoute(): any {
-  try {
-    const route = useRoute();
-    return useMemo(
-      () => ({
-        ...route,
-        isReady: true,
-      }),
-      [route]
-    );
-  } catch (error) {
-    // Route not ready - return empty route
-    if (__DEV__) {
-      console.warn('[useAppRoute] Route not ready. Component must be inside NavigationContainer.');
-    }
-    return useMemo(
-      () => ({
-        key: '',
-        name: '',
-        params: undefined,
-        path: undefined,
-        isReady: false,
-      }),
-      []
-    );
-  }
+export interface AppRouteResult<T = unknown> {
+  key: string;
+  name: string;
+  params: T | undefined;
+  path: string | undefined;
+  isReady: boolean;
+}
+
+export function useAppRoute<T = unknown>(): AppRouteResult<T> {
+  // Always call hooks - no conditional calls
+  const route = useRoute<any>();
+
+  // Check if route is ready
+  const isReady = Boolean(route);
+
+  return useMemo(
+    () => ({
+      key: route?.key ?? '',
+      name: route?.name ?? '',
+      params: route?.params as T | undefined,
+      path: route?.path ?? undefined,
+      isReady,
+    }),
+    [route, isReady]
+  );
 }
 
 export type { RouteProp };

package/src/onboarding/domain/entities/ChatMessage.ts

@@ -0,0 +1,19 @@
+/**
+ * Chat Message Entity
+ *
+ * Defines a message in the chat interface
+ */
+
+export interface ChatMessage {
+  /** Message text content */
+  text: string;
+
+  /** Whether this is a user message or bot message */
+  isUser: boolean;
+
+  /** Whether this message should be highlighted */
+  isImportant?: boolean;
+
+  /** Optional delay before showing this message */
+  delay?: number;
+}

package/src/onboarding/domain/entities/ChatStep.ts

@@ -0,0 +1,72 @@
+/**
+ * Chat Step Entity
+ *
+ * Defines a single step in chat-based onboarding flow
+ * Generic and reusable across all apps
+ */
+
+export type ChatMascotState = "idle" | "thinking" | "reacting" | "excited" | "speaking";
+
+export interface ChatOption {
+  /** Display label for the option */
+  label: string;
+
+  /** Value to be stored when selected */
+  value: string;
+
+  /** Next step ID to navigate to */
+  next: string;
+
+  /** Optional icon name (from icon library) */
+  icon?: string;
+}
+
+export interface ChatStep {
+  /** Unique step identifier */
+  id: string;
+
+  /** Messages to display in chat bubbles */
+  messages: string[];
+
+  /** Optional mascot animation state */
+  mascotState?: ChatMascotState;
+
+  /** Delay before showing this step (ms) */
+  delay?: number;
+
+  /** Available options for user to select */
+  options?: ChatOption[];
+
+  /** Auto-advance to next step after delay */
+  autoNext?: string;
+
+  /** Manual next step ID (for input steps) */
+  next?: string;
+
+  /** Mark as completion step */
+  isComplete?: boolean;
+
+  /** Show persona summary card */
+  showPersonaSummary?: boolean;
+
+  /** Show insights section */
+  showInsights?: boolean;
+
+  /** Show matches section */
+  showMatches?: boolean;
+
+  /** Show phase visualizer */
+  showPhaseVisualizer?: boolean;
+
+  /** Show name input field */
+  isNameInput?: boolean;
+
+  /** Allow skipping name input if empty */
+  skipIfEmpty?: boolean;
+}
+
+/**
+ * Chat Onboarding Flow
+ * Record of step ID to step configuration
+ */
+export type ChatOnboardingFlow = Record<string, ChatStep>;

package/src/onboarding/index.ts

@@ -39,6 +39,13 @@ export type {
 } from "./domain/entities/OnboardingQuestion";
 export type { OnboardingUserData } from "./domain/entities/OnboardingUserData";
 
+// =============================================================================
+// CHAT ONBOARDING - Domain Entities
+// =============================================================================
+
+export type { ChatStep, ChatOption, ChatOnboardingFlow, ChatMascotState } from "./domain/entities/ChatStep";
+export type { ChatMessage } from "./domain/entities/ChatMessage";
+
 // =============================================================================
 // INFRASTRUCTURE LAYER - Storage and Hooks
 // =============================================================================
@@ -59,6 +66,15 @@ export {
   type UseOnboardingContainerStyleProps,
   type UseOnboardingContainerStyleReturn,
 } from "./presentation/hooks/useOnboardingContainerStyle";
+export {
+  useChatAnimations,
+  type UseChatAnimationsReturn,
+} from "./infrastructure/hooks/useChatAnimations";
+export {
+  useChatOnboarding,
+  type UseChatOnboardingOptions,
+  type UseChatOnboardingReturn,
+} from "./presentation/hooks/useChatOnboarding";
 
 // =============================================================================
 // PRESENTATION LAYER - Components and Screens
@@ -103,5 +119,18 @@ export type { RatingQuestionProps } from "./presentation/components/questions/Ra
 export { OnboardingResetSetting } from "./presentation/components/OnboardingResetSetting";
 export type { OnboardingResetSettingProps } from "./presentation/components/OnboardingResetSetting";
 
+// =============================================================================
+// CHAT ONBOARDING - Presentation Components
+// =============================================================================
+
+export { ChatMessageComponent } from "./presentation/components/chat";
+export type { ChatMessageProps } from "./presentation/components/chat";
+export { ChatOptionButton } from "./presentation/components/chat";
+export type { ChatOptionButtonProps } from "./presentation/components/chat";
+export { TypingIndicator } from "./presentation/components/chat";
+export type { TypingIndicatorProps } from "./presentation/components/chat";
+export { ChatOnboardingScreen } from "./presentation/screens/ChatOnboardingScreen";
+export type { ChatOnboardingScreenProps } from "./presentation/screens/ChatOnboardingScreen";
+
 
 export { useOnboardingFlow, type UseOnboardingFlowResult } from './hooks/useOnboardingFlow';

package/src/onboarding/infrastructure/hooks/useChatAnimations.ts

@@ -0,0 +1,145 @@
+/**
+ * Chat Animations Hook
+ *
+ * Lazy loads React Native Reanimated for chat UI animations
+ * Prevents unnecessary bundle size for apps not using chat onboarding
+ */
+
+import { useEffect, useState, useRef } from "react";
+
+export interface UseChatAnimationsReturn {
+  /** Reanimated Animated value from lazy load */
+  Animated: any | null;
+
+  /** Whether animations are ready */
+  isReady: boolean;
+
+  /** Create fade-in animation */
+  createFadeIn: (duration?: number) => any;
+
+  /** Create slide-up animation */
+  createSlideUp: (fromY?: number, duration?: number) => any;
+
+  /** Create typing cursor animation */
+  createTypingCursor: () => any;
+
+  /** Clean up animations */
+  cleanup: () => void;
+}
+
+/**
+ * Hook for lazy-loading chat animations
+ * Only loads Reanimated when actually used
+ */
+export const useChatAnimations = (): UseChatAnimationsReturn => {
+  const [Animated, setAnimated] = useState<any>(null);
+  const [isReady, setIsReady] = useState(false);
+  const animationRefs = useRef<any[]>([]);
+
+  useEffect(() => {
+    let mounted = true;
+
+    // Lazy load Reanimated only when needed
+    const loadAnimations = async () => {
+      try {
+        // const reanimated = await import("@umituz/react-native-animation");
+
+        if (!mounted) return;
+
+        // TODO: Lazy load Reanimated when @umituz/react-native-animation is available
+        // For now, return empty
+        setAnimated(() => null);
+        setIsReady(true);
+
+        if (__DEV__) {
+          console.log("[useChatAnimations] Animations disabled (Reanimated not available)");
+        }
+      } catch (error) {
+        if (__DEV__) {
+          console.warn("[useChatAnimations] Failed to load Reanimated:", error);
+        }
+        setIsReady(false);
+      }
+    };
+
+    loadAnimations();
+
+    return () => {
+      mounted = false;
+      // Clean up animation refs
+      animationRefs.current.forEach((ref) => {
+        if (ref && typeof ref.cancel === "function") {
+          ref.cancel();
+        }
+      });
+      animationRefs.current = [];
+    };
+  }, []);
+
+  const createFadeIn = (duration = 300) => {
+    if (!Animated) return null;
+
+    try {
+      const { withTiming } = Animated;
+      const animation = withTiming(1, { duration });
+      animationRefs.current.push(animation);
+      return animation;
+    } catch {
+      return null;
+    }
+  };
+
+  const createSlideUp = (_fromY = 20, duration = 400) => {
+    if (!Animated) return null;
+
+    try {
+      const { withTiming, Easing } = Animated;
+      const animation = withTiming(0, {
+        duration,
+        easing: Easing.out(Easing.ease),
+      });
+      animationRefs.current.push(animation);
+      return animation;
+    } catch {
+      return null;
+    }
+  };
+
+  const createTypingCursor = () => {
+    if (!Animated) return null;
+
+    try {
+      const { withRepeat, withSequence, withTiming, Easing } = Animated;
+      const animation = withRepeat(
+        withSequence(
+          withTiming(1, { duration: 800, easing: Easing.inOut(Easing.ease) }),
+          withTiming(0, { duration: 800, easing: Easing.inOut(Easing.ease) })
+        ),
+        -1,
+        true
+      );
+      animationRefs.current.push(animation);
+      return animation;
+    } catch {
+      return null;
+    }
+  };
+
+  const cleanup = () => {
+    animationRefs.current.forEach((ref) => {
+      if (ref && typeof ref.cancel === "function") {
+        ref.cancel();
+      }
+    });
+    animationRefs.current = [];
+  };
+
+  return {
+    Animated,
+    isReady,
+    createFadeIn,
+    createSlideUp,
+    createTypingCursor,
+    cleanup,
+  };
+};