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

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

@@ -0,0 +1,70 @@
+import type { LabelProcessorProps } from "../types";
+
+export class LabelProcessor {
+  private static labelCache = new Map<string, string>();
+  private static maxCacheSize = 50;
+  private static cacheHits = 0;
+  private static cacheMisses = 0;
+
+  static processLabel(props: LabelProcessorProps): string {
+    const { label, getLabel } = props;
+    
+    // Create stable cache key
+    const getLabelKey = getLabel ? getLabel.toString().slice(0, 20) : 'none';
+    const cacheKey = `${String(label)}-${getLabelKey}`;
+    
+    // Check cache first
+    if (this.labelCache.has(cacheKey)) {
+      this.cacheHits++;
+      return this.labelCache.get(cacheKey)!;
+    }
+    
+    this.cacheMisses++;
+    let result: string;
+    
+    if (!getLabel) {
+      result = label;
+    } else {
+      try {
+        const processedLabel = getLabel(label);
+        result = typeof processedLabel === "string" ? processedLabel : label;
+      } catch (error) {
+        if (__DEV__) {
+          console.error(`[LabelProcessor] Error processing label: ${label}`, error);
+        }
+        result = label;
+      }
+    }
+    
+    // Cache management with LRU eviction
+    if (this.labelCache.size >= this.maxCacheSize) {
+      const firstKey = this.labelCache.keys().next().value;
+      if (firstKey) {
+        this.labelCache.delete(firstKey);
+      }
+    }
+    this.labelCache.set(cacheKey, result);
+    
+    // Log cache performance in development
+    if (__DEV__ && (this.cacheHits + this.cacheMisses) % 100 === 0) {
+      const hitRate = (this.cacheHits / (this.cacheHits + this.cacheMisses)) * 100;
+      console.log(`[LabelProcessor] Cache hit rate: ${hitRate.toFixed(1)}%`);
+    }
+    
+    return result;
+  }
+
+  static clearCache(): void {
+    this.labelCache.clear();
+    this.cacheHits = 0;
+    this.cacheMisses = 0;
+  }
+
+  static processTitle(title: string | undefined, getLabel?: (label: string) => string): string | undefined {
+    if (title === undefined || typeof title !== "string") {
+      return undefined;
+    }
+    
+    return getLabel ? getLabel(title) : title;
+  }
+}

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

@@ -0,0 +1,62 @@
+/**
+ * Navigation Event Cleanup Utilities
+ * 
+ * This file provides patterns for proper cleanup of navigation event listeners
+ * to prevent memory leaks in React Native applications.
+ * 
+ * Example usage:
+ * ```tsx
+ * useEffect(() => {
+ *   const unsubscribe = navigation.addListener('focus', handleFocus);
+ *   return unsubscribe; // Automatic cleanup on unmount
+ * }, [navigation, handleFocus]);
+ * 
+ * // For multiple listeners:
+ * useEffect(() => {
+ *   const unsubscribers = [
+ *     navigation.addListener('focus', handleFocus),
+ *     navigation.addListener('blur', handleBlur),
+ *   ];
+ *   
+ *   return () => unsubscribers.forEach(unsubscribe => unsubscribe());
+ * }, [navigation, handleFocus, handleBlur]);
+ * ```
+ */
+
+export interface NavigationCleanup {
+  unsubscribe: () => void;
+}
+
+export class NavigationCleanupManager {
+  /**
+   * Creates a cleanup function for multiple navigation listeners
+   */
+  static createMultiCleanup(unsubscribers: (() => void)[]): () => void {
+    return () => {
+      unsubscribers.forEach(unsubscribe => {
+        try {
+          unsubscribe();
+        } catch (error) {
+          if (__DEV__) {
+            console.warn('[NavigationCleanupManager] Error during cleanup:', error);
+          }
+        }
+      });
+    };
+  }
+
+  /**
+   * Safe cleanup wrapper that handles errors gracefully
+   */
+  static safeCleanup(unsubscribe: () => void): () => void {
+    return () => {
+      try {
+        unsubscribe();
+      } catch (error) {
+        if (__DEV__) {
+          console.warn('[NavigationCleanupManager] Error during cleanup:', error);
+        }
+      }
+    };
+  }
+}

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

@@ -0,0 +1,21 @@
+import { DefaultTheme as NavigationDefaultTheme, DarkTheme as NavigationDarkTheme, Theme } from '@react-navigation/native';
+
+/**
+ * Create a navigation theme based on design tokens and mode
+ */
+export const createNavigationTheme = (colors: any, mode: 'light' | 'dark'): Theme => {
+    const baseTheme = mode === 'dark' ? NavigationDarkTheme : NavigationDefaultTheme;
+
+    return {
+        ...baseTheme,
+        colors: {
+            ...baseTheme.colors,
+            primary: colors.primary,
+            background: colors.backgroundPrimary,
+            card: colors.surface,
+            text: colors.textPrimary,
+            border: colors.border,
+            notification: colors.error,
+        },
+    };
+};

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

@@ -0,0 +1,61 @@
+import type { TabScreen, StackScreen } from "../types";
+
+export class NavigationValidator {
+  static validateScreens(screens: TabScreen[] | StackScreen[], type: "tab" | "stack"): void {
+    if (!Array.isArray(screens)) {
+      throw new Error(`Screens must be an array for ${type} navigator`);
+    }
+
+    if (screens.length === 0) {
+      if (__DEV__) {
+        console.warn(`[NavigationValidator] No screens provided for ${type} navigator`);
+      }
+      return;
+    }
+
+    const screenNames = new Set<string>();
+    
+    screens.forEach((screen, index) => {
+      if (!screen.name || typeof screen.name !== "string" || screen.name.trim() === "") {
+        throw new Error(`Screen at index ${index} must have a valid non-empty name`);
+      }
+
+      // Check for duplicate screen names
+      if (screenNames.has(screen.name)) {
+        throw new Error(`Duplicate screen name '${screen.name}' found at index ${index}`);
+      }
+      screenNames.add(screen.name);
+
+      if (!screen.component || typeof screen.component !== "function") {
+        throw new Error(`Screen '${screen.name}' must have a valid component`);
+      }
+
+      if (type === "tab") {
+        const tabScreen = screen as TabScreen;
+        if (!tabScreen.label || typeof tabScreen.label !== "string" || tabScreen.label.trim() === "") {
+          throw new Error(`Tab screen '${screen.name}' must have a valid non-empty label`);
+        }
+
+        if (tabScreen.icon !== undefined && (typeof tabScreen.icon !== "string" || tabScreen.icon.trim() === "")) {
+          if (__DEV__) {
+            console.warn(`[NavigationValidator] Tab screen '${screen.name}' has invalid icon, it will be ignored`);
+          }
+        }
+
+        if (tabScreen.label.length > 50) {
+          throw new Error(`Tab screen '${screen.name}' label too long (max 50 characters)`);
+        }
+      }
+    });
+  }
+
+  static validateInitialRoute(initialRouteName: string | undefined, screens: TabScreen[] | StackScreen[]): void {
+    if (initialRouteName && !screens.find(screen => screen.name === initialRouteName)) {
+      const error = `Initial route '${initialRouteName}' not found in screens. Available screens: ${screens.map(s => s.name).join(", ")}`;
+      if (__DEV__) {
+        console.error(`[NavigationValidator] ${error}`);
+      }
+      throw new Error(error);
+    }
+  }
+}

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

@@ -0,0 +1,115 @@
+import React from "react";
+import type { ParamListBase } from "@react-navigation/native";
+import type {
+  BottomTabScreenProps,
+  BottomTabNavigationOptions,
+} from "@react-navigation/bottom-tabs";
+import type {
+  TabScreen,
+  StackScreen,
+  TabNavigatorConfig,
+  StackNavigatorConfig,
+} from "../types";
+import { LabelProcessor } from "./LabelProcessor";
+import { IconRenderer } from "./IconRenderer";
+
+
+
+export function createTabScreen<T extends ParamListBase = ParamListBase>(
+  screen: TabScreen<T>,
+  config: TabNavigatorConfig<T>,
+  Tab: any
+): React.ReactElement {
+  const screenOptions = (
+    props: BottomTabScreenProps<T>
+  ): BottomTabNavigationOptions => {
+    const processedLabel = LabelProcessor.processLabel({
+      label: screen.label,
+      getLabel: config.getLabel,
+    });
+
+    const isFab = screen.isFab ?? false;
+
+    const baseOptions: BottomTabNavigationOptions = {
+      tabBarLabel: processedLabel,
+      title: processedLabel,
+      tabBarIcon: ({ focused }: { focused: boolean }) => {
+        const iconName = IconRenderer.getIconName(
+          screen.name,
+          focused,
+          screen.icon ?? "",
+          config.getTabIcon
+        );
+
+        return IconRenderer.renderIcon(
+          { iconName, focused, routeName: screen.name, isFab },
+          config.renderIcon
+        );
+      },
+    };
+
+    if (screen.options) {
+      if (typeof screen.options === "function") {
+        return {
+          ...baseOptions,
+          ...screen.options(props),
+        };
+      }
+      return {
+        ...baseOptions,
+        ...screen.options,
+      };
+    }
+
+    return baseOptions;
+  };
+
+  return React.createElement(Tab.Screen, {
+    key: screen.name,
+    name: screen.name,
+    component: screen.component,
+    options: screenOptions,
+  });
+}
+
+export function createStackScreen<T extends ParamListBase = ParamListBase>(
+  screen: StackScreen<T>,
+  config: StackNavigatorConfig<T>,
+  Stack: any
+): React.ReactElement {
+  const screenOptions = (props: { navigation: unknown; route: unknown }) => {
+    if (screen.options) {
+      if (typeof screen.options === "function") {
+        const customOptions = screen.options(props);
+        const processedTitle = LabelProcessor.processTitle(
+          customOptions.title,
+          config.getLabel
+        );
+
+        return {
+          ...customOptions,
+          ...(processedTitle && { title: processedTitle }),
+        };
+      }
+
+      const processedTitle = LabelProcessor.processTitle(
+        screen.options.title,
+        config.getLabel
+      );
+
+      return {
+        ...screen.options,
+        ...(processedTitle && { title: processedTitle }),
+      };
+    }
+
+    return {};
+  };
+
+  return React.createElement(Stack.Screen, {
+    key: screen.name,
+    name: screen.name,
+    component: screen.component,
+    options: screenOptions,
+  });
+}

package/src/molecules/navigation/utils/__tests__/IconRenderer.getIconName.test.ts

@@ -0,0 +1,109 @@
+import { IconRenderer } from '../IconRenderer';
+
+describe('IconRenderer - getIconName', () => {
+  it('should return original icon when no getTabIcon function provided', () => {
+    const result = IconRenderer.getIconName(
+      'Home',
+      true,
+      'home',
+      undefined
+    );
+
+    expect(result).toBe('home');
+  });
+
+  it('should get icon name using getTabIcon function', () => {
+    const getTabIcon = jest.fn((routeName, focused) => 
+      focused ? `${routeName}-active` : `${routeName}-inactive`
+    );
+
+    const result = IconRenderer.getIconName(
+      'Home',
+      true,
+      'home',
+      getTabIcon
+    );
+
+    expect(result).toBe('Home-active');
+    expect(getTabIcon).toHaveBeenCalledWith('Home', true);
+  });
+
+  it('should call getTabIcon when provided', () => {
+    const getTabIcon = jest.fn((routeName, focused) => 
+      `${routeName}-${focused ? 'active' : 'inactive'}`
+    );
+
+    IconRenderer.getIconName(
+      'Home',
+      true,
+      'home',
+      getTabIcon
+    );
+
+    expect(getTabIcon).toHaveBeenCalledWith('Home', true);
+  });
+
+  it('should handle different focus states', () => {
+    const getTabIcon = jest.fn((routeName, focused) => 
+      `${routeName}-${focused ? 'focused' : 'unfocused'}`
+    );
+
+    const focusedResult = IconRenderer.getIconName(
+      'Home',
+      true,
+      'home',
+      getTabIcon
+    );
+
+    const unfocusedResult = IconRenderer.getIconName(
+      'Home',
+      false,
+      'home',
+      getTabIcon
+    );
+
+    expect(focusedResult).toBe('Home-focused');
+    expect(unfocusedResult).toBe('Home-unfocused');
+    expect(getTabIcon).toHaveBeenCalledTimes(2);
+  });
+
+  it('should handle different route names', () => {
+    const getTabIcon = jest.fn((routeName, focused) => 
+      `${routeName}-${focused ? 'on' : 'off'}`
+    );
+
+    const profileResult = IconRenderer.getIconName(
+      'Profile',
+      true,
+      'profile',
+      getTabIcon
+    );
+
+    const settingsResult = IconRenderer.getIconName(
+      'Settings',
+      false,
+      'settings',
+      getTabIcon
+    );
+
+    expect(profileResult).toBe('Profile-on');
+    expect(settingsResult).toBe('Settings-off');
+    expect(getTabIcon).toHaveBeenCalledTimes(2);
+  });
+
+  it('should handle original icon parameter correctly', () => {
+    const getTabIcon = jest.fn((routeName, focused) => 
+      `${routeName}-${focused ? 'active' : 'inactive'}`
+    );
+
+    const result = IconRenderer.getIconName(
+      'Home',
+      true,
+      'home-icon',
+      getTabIcon
+    );
+
+    expect(result).toBe('Home-active');
+    expect(getTabIcon).toHaveBeenCalledWith('Home', true);
+  });
+});

package/src/molecules/navigation/utils/__tests__/IconRenderer.renderIcon.test.ts

@@ -0,0 +1,116 @@
+import React from "react";
+import { IconRenderer } from "../IconRenderer";
+
+describe("IconRenderer - renderIcon", () => {
+  it("should return null when no renderIcon function provided", () => {
+    const result = IconRenderer.renderIcon({
+      iconName: "home",
+      focused: true,
+      routeName: "Home",
+      isFab: false,
+    });
+
+    expect(result).toBeNull();
+  });
+
+  it("should render icon using renderIcon function", () => {
+    const MockIcon = () => React.createElement("View", { testID: "mock-icon" });
+    const renderIcon = jest.fn(() => React.createElement(MockIcon));
+
+    const result = IconRenderer.renderIcon(
+      {
+        iconName: "home",
+        focused: true,
+        routeName: "Home",
+        isFab: false,
+      },
+      renderIcon
+    );
+
+    expect(renderIcon).toHaveBeenCalledWith("home", true, "Home", false);
+    expect(result).toBeTruthy();
+  });
+
+  it("should return null when renderIcon throws error", () => {
+    const renderIcon = jest.fn(() => {
+      throw new Error("Icon render failed");
+    });
+
+    const result = IconRenderer.renderIcon(
+      {
+        iconName: "home",
+        focused: true,
+        routeName: "Home",
+        isFab: false,
+      },
+      renderIcon
+    );
+
+    expect(result).toBeNull();
+  });
+
+  it("should render icon successfully", () => {
+    const renderIcon = jest.fn(() => React.createElement("View"));
+
+    const result = IconRenderer.renderIcon(
+      {
+        iconName: "home",
+        focused: true,
+        routeName: "Home",
+        isFab: false,
+      },
+      renderIcon
+    );
+
+    expect(renderIcon).toHaveBeenCalledWith("home", true, "Home", false);
+    expect(result).toBeTruthy();
+  });
+
+  it("should pass correct parameters to renderIcon function", () => {
+    const renderIcon = jest.fn(() => React.createElement("View"));
+
+    IconRenderer.renderIcon(
+      {
+        iconName: "profile",
+        focused: false,
+        routeName: "Profile",
+        isFab: false,
+      },
+      renderIcon
+    );
+
+    expect(renderIcon).toHaveBeenCalledWith("profile", false, "Profile", false);
+  });
+
+  it("should pass isFab true for FAB tabs", () => {
+    const renderIcon = jest.fn(() => React.createElement("View"));
+
+    IconRenderer.renderIcon(
+      {
+        iconName: "zap",
+        focused: true,
+        routeName: "Generate",
+        isFab: true,
+      },
+      renderIcon
+    );
+
+    expect(renderIcon).toHaveBeenCalledWith("zap", true, "Generate", true);
+  });
+
+  it("should handle different icon names with isFab", () => {
+    const renderIcon = jest.fn(() => React.createElement("View"));
+
+    IconRenderer.renderIcon(
+      {
+        iconName: "settings",
+        focused: true,
+        routeName: "Settings",
+        isFab: false,
+      },
+      renderIcon
+    );
+
+    expect(renderIcon).toHaveBeenCalledWith("settings", true, "Settings", false);
+  });
+});

package/src/molecules/navigation/utils/__tests__/LabelProcessor.processLabel.test.ts

@@ -0,0 +1,116 @@
+import { LabelProcessor } from '../LabelProcessor';
+
+describe('LabelProcessor - processLabel', () => {
+  beforeEach(() => {
+    // Clear cache before each test
+    (LabelProcessor as any).labelCache.clear();
+  });
+
+  it('should return original label when no getLabel function provided', () => {
+    const result = LabelProcessor.processLabel({
+      label: 'Test Label',
+    });
+
+    expect(result).toBe('Test Label');
+  });
+
+  it('should process label using getLabel function', () => {
+    const getLabel = jest.fn((label: string) => label.toUpperCase());
+    
+    const result = LabelProcessor.processLabel({
+      label: 'test label',
+      getLabel,
+    });
+
+    expect(result).toBe('TEST LABEL');
+    expect(getLabel).toHaveBeenCalledWith('test label');
+  });
+
+  it('should return original label when getLabel returns non-string', () => {
+    const getLabel = jest.fn(() => 123);
+    
+    const result = LabelProcessor.processLabel({
+      label: 'Test Label',
+      getLabel,
+    });
+
+    expect(result).toBe('Test Label');
+  });
+
+  it('should return original label when getLabel throws error', () => {
+    const getLabel = jest.fn(() => {
+      throw new Error('Processing failed');
+    });
+    
+    const consoleSpy = jest.spyOn(console, 'error').mockImplementation();
+    
+    const result = LabelProcessor.processLabel({
+      label: 'Test Label',
+      getLabel,
+    });
+
+    expect(result).toBe('Test Label');
+    expect(consoleSpy).toHaveBeenCalledWith(
+      '[LabelProcessor] Error processing label: Test Label',
+      expect.any(Error)
+    );
+    
+    consoleSpy.mockRestore();
+  });
+
+  it('should cache results to improve performance', () => {
+    const getLabel = jest.fn((label: string) => label.toUpperCase());
+    
+    // First call
+    const result1 = LabelProcessor.processLabel({
+      label: 'Test Label',
+      getLabel,
+    });
+    
+    // Second call with same parameters
+    const result2 = LabelProcessor.processLabel({
+      label: 'Test Label',
+      getLabel,
+    });
+
+    expect(result1).toBe('TEST LABEL');
+    expect(result2).toBe('TEST LABEL');
+    expect(getLabel).toHaveBeenCalledTimes(1); // Should only be called once due to caching
+  });
+
+  it('should handle cache size limit to prevent memory leaks', () => {
+    const getLabel = jest.fn((label: string) => label.toUpperCase());
+    
+    // Fill cache beyond limit
+    for (let i = 0; i < 150; i++) {
+      LabelProcessor.processLabel({
+        label: `label${i}`,
+        getLabel,
+      });
+    }
+
+    // Cache should not grow indefinitely
+    const cacheSize = (LabelProcessor as any).labelCache.size;
+    expect(cacheSize).toBeLessThanOrEqual(100);
+  });
+
+  it('should handle different getLabel functions separately', () => {
+    const getLabel1 = jest.fn((label: string) => label.toUpperCase());
+    const getLabel2 = jest.fn((label: string) => label.toLowerCase());
+    
+    const result1 = LabelProcessor.processLabel({
+      label: 'Test Label 1',
+      getLabel: getLabel1,
+    });
+    
+    const result2 = LabelProcessor.processLabel({
+      label: 'Test Label 2',
+      getLabel: getLabel2,
+    });
+
+    expect(result1).toBe('TEST LABEL 1');
+    expect(result2).toBe('test label 2');
+    expect(getLabel1).toHaveBeenCalledTimes(1);
+    expect(getLabel2).toHaveBeenCalledTimes(1);
+  });
+});