@umituz/react-native-design-system 2.3.14 → 2.3.16

package/src/molecules/navigation/StackNavigator.tsx

@@ -0,0 +1,75 @@
+import React, { useMemo } from "react";
+import { createStackNavigator as createRNStackNavigator } from "@react-navigation/stack";
+import type { ParamListBase } from "@react-navigation/native";
+import type { StackNavigatorConfig, StackScreen } from "./types";
+import { NavigationValidator } from "./utils/NavigationValidator";
+import { createStackScreen } from "./utils/ScreenFactory";
+import { useAppDesignTokens } from "../../theme";
+
+// Create the navigator instance ONCE outside the component
+const Stack = createRNStackNavigator();
+
+export interface StackNavigatorProps<T extends ParamListBase> {
+    config: StackNavigatorConfig<T>;
+}
+
+/**
+ * StackNavigator Component
+ * 
+ * Reusable Stack Navigator component that handles configuration and rendering.
+ * Integrates with design tokens for consistent themed styling.
+ */
+export function StackNavigator<T extends ParamListBase>({ config }: StackNavigatorProps<T>) {
+    const tokens = useAppDesignTokens();
+
+    // Validate configuration
+    if (__DEV__) {
+        try {
+            NavigationValidator.validateScreens(config.screens, "stack");
+            NavigationValidator.validateInitialRoute(config.initialRouteName, config.screens);
+        } catch (error) {
+            if (__DEV__) console.error('[StackNavigator] Configuration validation failed:', error);
+        }
+    }
+
+    const { screens } = config;
+
+    // Default screen options using design tokens
+    const defaultScreenOptions = useMemo(() => ({
+        headerStyle: {
+            backgroundColor: tokens.colors.surface,
+            elevation: 0,
+            shadowOpacity: 0,
+            borderBottomWidth: 1,
+            borderBottomColor: tokens.colors.surfaceVariant,
+        },
+        headerTitleStyle: {
+            color: tokens.colors.onSurface,
+            fontSize: 18,
+            fontWeight: "600" as any,
+        },
+        headerTintColor: tokens.colors.primary,
+        cardStyle: {
+            backgroundColor: tokens.colors.background,
+        },
+    }), [tokens]);
+
+    if (screens.length === 0) {
+        if (__DEV__) console.warn('[StackNavigator] No screens found');
+        return null;
+    }
+
+    return (
+        <Stack.Navigator
+            initialRouteName={config.initialRouteName as string}
+            screenOptions={{
+                ...defaultScreenOptions,
+                ...(config.screenOptions as any),
+            }}
+        >
+            {screens.map((screen) =>
+                createStackScreen(screen as StackScreen<any>, config, Stack)
+            )}
+        </Stack.Navigator>
+    );
+}

package/src/molecules/navigation/TabsNavigator.tsx

@@ -0,0 +1,94 @@
+import React, { useMemo } from "react";
+import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
+import type { ParamListBase } from "@react-navigation/native";
+import type { TabNavigatorConfig, TabScreen } from "./types";
+import { NavigationValidator } from "./utils/NavigationValidator";
+import { createTabScreen } from "./utils/ScreenFactory";
+import { useAppDesignTokens } from "../../theme";
+
+// Create the navigator instance ONCE outside the component
+const Tab = createBottomTabNavigator();
+
+export interface TabsNavigatorProps<T extends ParamListBase> {
+    config: TabNavigatorConfig<T>;
+}
+
+/**
+ * TabsNavigator Component
+ * 
+ * Reusable Bottom Tab Navigator component that handles configuration and rendering.
+ * Integrates with design tokens for consistent themed styling.
+ */
+export function TabsNavigator<T extends ParamListBase>({
+    config,
+}: TabsNavigatorProps<T>) {
+    const tokens = useAppDesignTokens();
+
+    // Validate configuration
+    if (__DEV__) {
+        try {
+            NavigationValidator.validateScreens(config.screens, "tab");
+            NavigationValidator.validateInitialRoute(
+                config.initialRouteName,
+                config.screens
+            );
+        } catch (error) {
+            if (__DEV__)
+                console.error("[TabsNavigator] Configuration validation failed:", error);
+        }
+    }
+
+    // Memoize filtered screens
+    const visibleScreens = useMemo(
+        () => config.screens.filter((screen) => screen.visible !== false),
+        [config.screens]
+    );
+
+    // Default screen options using design tokens
+    const defaultScreenOptions = useMemo(
+        () => ({
+            tabBarActiveTintColor: tokens.colors.primary,
+            tabBarInactiveTintColor: tokens.colors.onSurface,
+            tabBarStyle: {
+                backgroundColor: tokens.colors.surface,
+                borderTopColor: tokens.colors.surfaceVariant,
+                height: (tokens.spacing as any).tabBarHeight || 60,
+                paddingBottom: 8,
+                paddingTop: 8,
+            },
+            headerStyle: {
+                backgroundColor: tokens.colors.surface,
+                elevation: 0,
+                shadowOpacity: 0,
+                borderBottomWidth: 1,
+                borderBottomColor: tokens.colors.surfaceVariant,
+            },
+            headerTitleStyle: {
+                color: tokens.colors.onSurface,
+                fontSize: 18,
+                fontWeight: "600" as any,
+            },
+            headerTintColor: tokens.colors.primary,
+        }),
+        [tokens]
+    );
+
+    if (visibleScreens.length === 0) {
+        if (__DEV__) console.warn("[TabsNavigator] No visible screens found");
+        return null;
+    }
+
+    return (
+        <Tab.Navigator
+            initialRouteName={config.initialRouteName as string}
+            screenOptions={{
+                ...defaultScreenOptions,
+                ...(config.screenOptions as any),
+            }}
+        >
+            {visibleScreens.map((screen) =>
+                createTabScreen(screen as TabScreen<any>, config, Tab)
+            )}
+        </Tab.Navigator>
+    );
+}

package/src/molecules/navigation/components/FabButton.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { StyleSheet, View, type ViewStyle } from 'react-native';
+import { useAppDesignTokens } from '../../../theme';
+
+export interface FabButtonProps {
+    /** Content to render inside the FAB */
+    children: React.ReactNode;
+    /** Container style overrides */
+    style?: ViewStyle;
+}
+
+/**
+ * Standard FAB container component.
+ * Provides a centered, elevated circular container using design tokens.
+ */
+export const FabButton: React.FC<FabButtonProps> = ({
+    children,
+    style,
+}) => {
+    const tokens = useAppDesignTokens();
+
+    return (
+        <View style={[
+            styles.container,
+            {
+                backgroundColor: tokens.colors.primary,
+                borderColor: tokens.colors.onPrimary,
+                shadowColor: tokens.colors.onSurface,
+            },
+            style
+        ]}>
+            {children}
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderWidth: 1,
+        borderColor: "rgba(255, 255, 255, 0.1)",
+        zIndex: 10,
+    },
+});

package/src/molecules/navigation/components/TabLabel.tsx

@@ -0,0 +1,47 @@
+import React, { useMemo } from 'react';
+import { AtomicText } from '../../../atoms';
+
+export interface TabLabelProps {
+    label: string;
+    focused: boolean;
+    color?: string;
+    focusedColor?: string;
+    unfocusedColor?: string;
+    fontSize?: number;
+    focusedWeight?: '400' | '500' | '600' | '700' | '800' | '900';
+    unfocusedWeight?: '400' | '500' | '600' | '700' | '800' | '900';
+    textStyle?: any;
+    textType?: 'labelSmall' | 'labelMedium' | 'labelLarge' | 'bodySmall';
+}
+
+export const TabLabel: React.FC<TabLabelProps> = React.memo(({
+    label,
+    focused,
+    color,
+    focusedColor,
+    unfocusedColor,
+    fontSize,
+    focusedWeight = '600',
+    unfocusedWeight = '500',
+    textStyle,
+    textType = 'labelSmall',
+}) => {
+    const textStyleMemo = useMemo(() => [
+        {
+            color: color || (focused ? focusedColor : unfocusedColor),
+            textAlign: 'center' as const,
+            fontSize,
+            fontWeight: focused ? focusedWeight : unfocusedWeight,
+        },
+        textStyle,
+    ], [color, focused, focusedColor, unfocusedColor, fontSize, focusedWeight, unfocusedWeight, textStyle]);
+
+    return (
+        <AtomicText
+            type={textType}
+            style={textStyleMemo}
+        >
+            {label}
+        </AtomicText>
+    );
+});

package/src/molecules/navigation/createStackNavigator.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import type { ParamListBase } from "@react-navigation/native";
+import type { StackNavigatorConfig } from "./types";
+import { StackNavigator } from "./StackNavigator";
+
+/**
+ * Creates a Stack Navigator component based on configuration.
+ * 
+ * @deprecated Use <StackNavigator config={...} /> instead to prevent re-mounting issues.
+ * This wrapper is maintained for backward compatibility but using the component directly is recommended.
+ */
+export function createStackNavigator<T extends ParamListBase>(
+  config: StackNavigatorConfig<T>
+): React.ComponentType {
+  // Return a component that renders the new StackNavigator
+  // Using React.memo to prevent unnecessary re-renders of the wrapper
+  return React.memo(function StackNavigatorWrapper() {
+    return React.createElement(StackNavigator as any, { config });
+  });
+}

package/src/molecules/navigation/createTabNavigator.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import type { ParamListBase } from "@react-navigation/native";
+import type { TabNavigatorConfig } from "./types";
+import { TabsNavigator } from "./TabsNavigator";
+
+/**
+ * Creates a Tab Navigator component based on configuration.
+ * 
+ * @deprecated Use <TabsNavigator config={...} /> instead to prevent re-mounting issues.
+ * This wrapper is maintained for backward compatibility but using the component directly is recommended.
+ */
+export function createTabNavigator<T extends ParamListBase>(
+  config: TabNavigatorConfig<T>
+): React.ComponentType {
+  // Return a component that renders the new TabsNavigator
+  // Using React.memo to prevent unnecessary re-renders of the wrapper
+  return React.memo(function TabNavigatorWrapper() {
+    return React.createElement(TabsNavigator as any, { config });
+  });
+}

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

@@ -0,0 +1,54 @@
+import { Platform } from 'react-native';
+import { useMemo } from 'react';
+import { useAppDesignTokens } from '../../../theme';
+
+export interface TabBarConfig {
+    backgroundColor?: string;
+    borderTopColor?: string;
+    borderTopWidth?: number;
+    paddingTop?: number;
+    paddingBottom?: number;
+    minHeight?: number;
+    activeTintColor?: string;
+    inactiveTintColor?: string;
+    labelFontSize?: number;
+    labelFontWeight?: string;
+    labelMarginTop?: number;
+    labelMarginBottom?: number;
+}
+
+export function useTabBarStyles(config: TabBarConfig = {}) {
+    const tokens = useAppDesignTokens();
+
+    const tabBarStyle = useMemo(() => ({
+        backgroundColor: config.backgroundColor || tokens.colors.surface,
+        borderTopColor: config.borderTopColor || tokens.colors.borderLight,
+        borderTopWidth: config.borderTopWidth ?? 1,
+        paddingTop: config.paddingTop ?? 12,
+        paddingBottom: config.paddingBottom ?? (Platform.OS === 'ios' ? 24 : 12),
+        minHeight: config.minHeight ?? (Platform.OS === 'ios' ? 80 : 70),
+    }), [config.backgroundColor, config.borderTopColor, config.borderTopWidth,
+    config.paddingTop, config.paddingBottom, config.minHeight, tokens.colors.surface,
+    tokens.colors.borderLight]);
+
+    const screenOptions = useMemo(() => ({
+        headerShown: false,
+        tabBarLabelStyle: {
+            fontSize: config.labelFontSize ?? 12,
+            fontWeight: (config.labelFontWeight ?? '600') as '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900' | 'normal' | 'bold',
+            marginTop: config.labelMarginTop ?? 12,
+            marginBottom: config.labelMarginBottom ?? 4,
+        },
+        tabBarActiveTintColor: config.activeTintColor || tokens.colors.primary,
+        tabBarInactiveTintColor: config.inactiveTintColor || tokens.colors.textSecondary,
+        tabBarStyle,
+    }), [config.labelFontSize, config.labelFontWeight, config.labelMarginTop,
+    config.labelMarginBottom, config.activeTintColor, config.inactiveTintColor,
+        tabBarStyle, tokens.colors.primary, tokens.colors.textSecondary]);
+
+    return useMemo(() => ({
+        tokens,
+        screenOptions,
+        tabBarStyle,
+    }), [tokens, screenOptions, tabBarStyle]);
+}

package/src/molecules/navigation/index.ts

@@ -0,0 +1,37 @@
+export { createTabNavigator } from "./createTabNavigator";
+export { createStackNavigator } from "./createStackNavigator";
+export { TabsNavigator, type TabsNavigatorProps } from "./TabsNavigator";
+export { StackNavigator, type StackNavigatorProps } from "./StackNavigator";
+export { FabButton, type FabButtonProps } from "./components/FabButton";
+
+export type {
+  TabScreen,
+  TabNavigatorConfig,
+  StackScreen,
+  StackNavigatorConfig,
+  BaseScreen,
+  BaseNavigatorConfig,
+  IconRendererProps,
+  LabelProcessorProps,
+  FabConfig,
+} from "./types";
+
+export { DEFAULT_FAB_CONFIG } from "./types";
+
+export { NavigationCleanupManager } from "./utils/NavigationCleanup";
+export type { NavigationCleanup } from "./utils/NavigationCleanup";
+
+export type {
+  BottomTabNavigationOptions,
+  BottomTabScreenProps,
+} from "@react-navigation/bottom-tabs";
+
+export type { StackNavigationOptions } from "@react-navigation/stack";
+
+// Navigation Utilities
+export { AppNavigation } from "./utils/AppNavigation";
+export { TabLabel, type TabLabelProps } from "./components/TabLabel";
+export { useTabBarStyles, type TabBarConfig } from "./hooks/useTabBarStyles";
+
+// Navigation Theme
+export { createNavigationTheme } from "./utils/NavigationTheme";

package/src/molecules/navigation/types.ts

@@ -0,0 +1,118 @@
+import type { ParamListBase } from "@react-navigation/native";
+import type {
+  BottomTabNavigationOptions,
+  BottomTabScreenProps,
+} from "@react-navigation/bottom-tabs";
+import type { StackNavigationOptions } from "@react-navigation/stack";
+import type { IconName } from "../../atoms/AtomicIcon";
+
+export type NavigationParams = Record<string, unknown>;
+
+/**
+ * FAB (Floating Action Button) configuration for center tab
+ */
+export interface FabConfig {
+  /** FAB button size (default: 56) */
+  size?: number;
+  /** Vertical offset from tab bar (default: -20) */
+  offsetY?: number;
+  /** Border radius (default: size / 2) */
+  borderRadius?: number;
+  /** Border width when inactive (default: 3) */
+  borderWidth?: number;
+}
+
+/**
+ * Base interface for all screen configurations
+ * @template T - Type of navigation parameters for the screen
+ */
+export interface BaseScreen<T extends ParamListBase = ParamListBase> {
+  /** Unique name identifier for the screen */
+  name: string;
+  /** React component to render for this screen */
+  component: React.ComponentType<T>;
+}
+
+/**
+ * Configuration for a tab navigation screen
+ * @template T - Type of navigation parameters for the screen
+ */
+export interface TabScreen<T extends ParamListBase = ParamListBase>
+  extends BaseScreen<T> {
+  /** Display label for the tab */
+  label: string;
+  /** Icon identifier for the tab */
+  icon?: IconName;
+  /** Mark this tab as a FAB (center floating button) */
+  isFab?: boolean;
+  /** Additional navigation options for the tab */
+  options?:
+  | BottomTabNavigationOptions
+  | ((props: BottomTabScreenProps<T>) => BottomTabNavigationOptions);
+  /** Whether the tab should be visible */
+  visible?: boolean;
+}
+
+/**
+ * Configuration for a stack navigation screen
+ * @template T - Type of navigation parameters for the screen
+ */
+export interface StackScreen<T extends ParamListBase = ParamListBase>
+  extends BaseScreen<T> {
+  /** Additional navigation options for the stack screen */
+  options?:
+  | StackNavigationOptions
+  | ((props: { navigation: unknown; route: unknown }) => StackNavigationOptions);
+}
+
+export interface BaseNavigatorConfig<T extends ParamListBase = ParamListBase> {
+  screens: TabScreen[] | StackScreen[];
+  initialRouteName?: Extract<keyof T, string>;
+  getLabel?: (label: string) => string;
+}
+
+export interface TabNavigatorConfig<T extends ParamListBase = ParamListBase>
+  extends BaseNavigatorConfig<T> {
+  screens: TabScreen[];
+  /** Custom icon renderer function */
+  renderIcon?: (
+    iconName: string,
+    focused: boolean,
+    routeName: string,
+    isFab: boolean
+  ) => React.ReactElement;
+  /** Get icon name for a tab */
+  getTabIcon?: (routeName: string, focused: boolean) => IconName;
+  /** Screen options for all tabs */
+  screenOptions?:
+  | BottomTabNavigationOptions
+  | ((props: BottomTabScreenProps<T>) => BottomTabNavigationOptions);
+  /** FAB configuration for center button styling */
+  fabConfig?: FabConfig;
+}
+
+export interface StackNavigatorConfig<T extends ParamListBase = ParamListBase>
+  extends BaseNavigatorConfig<T> {
+  screens: StackScreen[];
+  screenOptions?: StackNavigationOptions;
+}
+
+export interface IconRendererProps {
+  iconName: IconName;
+  focused: boolean;
+  routeName: string;
+  isFab: boolean;
+}
+
+export interface LabelProcessorProps {
+  label: string;
+  getLabel?: (label: string) => string;
+}
+
+/** Default FAB configuration values */
+export const DEFAULT_FAB_CONFIG: Required<FabConfig> = {
+  size: 56,
+  offsetY: -20,
+  borderRadius: 28,
+  borderWidth: 3,
+};

package/src/molecules/navigation/utils/AppNavigation.ts

@@ -0,0 +1,101 @@
+import { NavigationContainerRef, CommonActions, StackActions } from '@react-navigation/native';
+
+export class AppNavigation {
+    private static navigationRef: NavigationContainerRef<any> | null = null;
+
+    /**
+     * Set the global navigation reference
+     */
+    static setRef(ref: NavigationContainerRef<any> | null): void {
+        this.navigationRef = ref;
+    }
+
+    /**
+     * Set the global navigation reference (alias for setRef)
+     * @deprecated Use setRef instead
+     */
+    static setNavigationRef(ref: NavigationContainerRef<any> | null): void {
+        this.setRef(ref);
+    }
+
+    /**
+     * Get the global navigation reference
+     */
+    static getRef(): NavigationContainerRef<any> | null {
+        return this.navigationRef;
+    }
+
+    /**
+     * Navigate to a route
+     */
+    static navigate(name: string, params?: object): void {
+        if (this.navigationRef?.isReady()) {
+            this.navigationRef.navigate(name, params);
+        } else if (__DEV__) {
+            console.warn('[AppNavigation] Navigation ref is not ready. Call setRef() first.');
+        }
+    }
+
+    /**
+     * Push a route onto the stack
+     */
+    static push(name: string, params?: object): void {
+        if (this.navigationRef?.isReady()) {
+            this.navigationRef.dispatch(StackActions.push(name, params));
+        }
+    }
+
+    /**
+     * Go back to the previous screen
+     */
+    static goBack(): void {
+        if (this.navigationRef?.isReady() && this.navigationRef.canGoBack()) {
+            this.navigationRef.goBack();
+        }
+    }
+
+    /**
+     * Reset the navigation state
+     */
+    static reset(name: string, params?: object): void {
+        if (this.navigationRef?.isReady()) {
+            this.navigationRef.dispatch(
+                CommonActions.reset({
+                    index: 0,
+                    routes: [{ name, params }],
+                })
+            );
+        }
+    }
+
+    /**
+     * Replace the current route
+     */
+    static replace(name: string, params?: object): void {
+        if (this.navigationRef?.isReady()) {
+            this.navigationRef.dispatch(StackActions.replace(name, params));
+        }
+    }
+
+    /**
+    * Navigate to a screen in a nested navigator (e.g. Tab > Stack > Screen)
+    */
+    static navigateToNested(parentParams: { screen: string; params?: any }): void {
+        // This is a simplified wrapper for navigating to nested stacks which usually looks like:
+        // navigate('ParentStack', { screen: 'ChildScreen', params: { ... } })
+        // But React Navigation handle this quite well with basic .navigate too if hierarchy is clear.
+        // Kept simple for now.
+    }
+
+    /**
+     * Navigate to a screen in the parent navigator
+     */
+    static navigateToParent(name: string, params?: object): void {
+        if (this.navigationRef?.isReady()) {
+            const parent = this.navigationRef.getParent();
+            if (parent) {
+                parent.navigate(name, params);
+            }
+        }
+    }
+}

package/src/molecules/navigation/utils/IconRenderer.ts

@@ -0,0 +1,50 @@
+import React from "react";
+import type { IconRendererProps } from "../types";
+import { AtomicIcon } from "../../../atoms/AtomicIcon";
+import type { IconName } from "../../../atoms/AtomicIcon";
+
+type RenderIconFn = (
+  iconName: IconName,
+  focused: boolean,
+  routeName: string,
+  isFab: boolean
+) => React.ReactElement;
+
+export class IconRenderer {
+  static renderIcon(
+    props: IconRendererProps,
+    renderIcon?: RenderIconFn
+  ): React.ReactElement | null {
+    const { iconName, focused, routeName, isFab } = props;
+
+    if (renderIcon) {
+      try {
+        const result = renderIcon(iconName, focused, routeName, isFab);
+        if (React.isValidElement(result)) {
+          return result;
+        }
+      } catch {
+        // Fallback to default
+      }
+    }
+
+    if (!iconName) {
+      return null;
+    }
+
+    return React.createElement(AtomicIcon, {
+      name: iconName,
+      size: isFab ? "lg" : "md",
+      color: focused ? "primary" : "onSurface",
+    });
+  }
+
+  static getIconName(
+    routeName: string,
+    focused: boolean,
+    icon: IconName,
+    getTabIcon?: (routeName: string, focused: boolean) => IconName
+  ): IconName {
+    return getTabIcon ? getTabIcon(routeName, focused) : icon;
+  }
+}