@idealyst/navigation 1.0.49 → 1.0.50

package/src/routing/router.native.tsx

@@ -4,13 +4,73 @@ import { createNativeStackNavigator } from "@react-navigation/native-stack";
 import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
 import { createDrawerNavigator } from "@react-navigation/drawer";
 
-import { RouteParam } from "./types"
+import { RouteParam, ScreenOptions } from "./types"
 import { TypedNavigator } from "@react-navigation/native";
+import { Icon } from '@idealyst/components';
 
 export const buildRouter = (routeParam: RouteParam, path: string = '') => {
     return () => buildNativeRouter(routeParam, path)
 }
 
+/**
+ * Convert ScreenOptions to React Navigation screen options
+ */
+const convertScreenOptions = (screenOptions?: ScreenOptions) => {
+    if (!screenOptions) return {};
+
+    const options: any = {};
+
+    if (screenOptions.title) {
+        options.title = screenOptions.title;
+        options.headerTitle = screenOptions.title;
+    }
+
+    if (screenOptions.tabBarLabel) {
+        options.tabBarLabel = screenOptions.tabBarLabel;
+    }
+
+    if (screenOptions.tabBarIcon) {
+        if (typeof screenOptions.tabBarIcon === 'string') {
+            options.tabBarIcon = ({ focused }: { focused: boolean; color: string; size: number }) => (
+                <Icon 
+                    name={screenOptions.tabBarIcon as any} 
+                    color={focused ? 'primary' : 'secondary'} 
+                />
+            );
+        } else if (typeof screenOptions.tabBarIcon === 'function') {
+            options.tabBarIcon = screenOptions.tabBarIcon
+        } else {
+            options.tabBarIcon = screenOptions.tabBarIcon;
+        }
+    }
+
+    if (screenOptions.tabBarBadge !== undefined) {
+        options.tabBarBadge = screenOptions.tabBarBadge;
+    }
+
+    if (screenOptions.tabBarVisible !== undefined) {
+        options.tabBarStyle = screenOptions.tabBarVisible ? {} : { display: 'none' };
+    }
+
+    if (screenOptions.headerTitle) {
+        options.headerTitle = screenOptions.headerTitle;
+    }
+
+    if (screenOptions.headerBackVisible !== undefined) {
+        options.headerBackVisible = screenOptions.headerBackVisible;
+    }
+
+    if (screenOptions.headerRight) {
+        options.headerRight = screenOptions.headerRight;
+    }
+
+    if (screenOptions.platformOptions?.native) {
+        Object.assign(options, screenOptions.platformOptions.native);
+    }
+
+    return options;
+};
+
 /**
  * Create the router supporting React Navigation
  * @param routeParam 
@@ -21,7 +81,8 @@ export const buildRouter = (routeParam: RouteParam, path: string = '') => {
 const buildNativeRouter = (routeParam: RouteParam, path: string = '', LastNavigator?: TypedNavigator<any>): React.ReactElement => {
     const nextPath = (routeParam.path ? path + routeParam.path : path) || '';
     const type = routeParam.layout?.type;
-    console.log('Registered routes', nextPath, routeParam.routes);
+    const screenOptions = convertScreenOptions(routeParam.screenOptions);
+    
     switch (type) {
         case 'stack':
             const Stack = createNativeStackNavigator();
@@ -32,7 +93,11 @@ const buildNativeRouter = (routeParam: RouteParam, path: string = '', LastNaviga
                         freezeOnBlur: false,
                     }}
                 >
-                    <Stack.Screen name={nextPath} component={routeParam.component} />
+                    <Stack.Screen 
+                        name={nextPath} 
+                        component={routeParam.component} 
+                        options={screenOptions}
+                    />
                     {routeParam.routes?.map((route) => buildNativeRouter(route, nextPath, Stack))}
                 </Stack.Navigator>
             )
@@ -46,7 +111,11 @@ const buildNativeRouter = (routeParam: RouteParam, path: string = '', LastNaviga
                         freezeOnBlur: false,
                     }}
                 >
-                    <Tab.Screen name={nextPath} component={routeParam.component} />
+                    <Tab.Screen 
+                        name={nextPath} 
+                        component={routeParam.component}
+                        options={screenOptions}
+                    />
                     {routeParam.routes?.map((route) => buildNativeRouter(route, nextPath, Tab))}
                 </Tab.Navigator>
             )
@@ -60,7 +129,11 @@ const buildNativeRouter = (routeParam: RouteParam, path: string = '', LastNaviga
                         freezeOnBlur: false,
                     }}
                 >
-                    <Drawer.Screen name={nextPath} component={routeParam.component} />
+                    <Drawer.Screen 
+                        name={nextPath} 
+                        component={routeParam.component}
+                        options={screenOptions}
+                    />
                     {routeParam.routes?.map((route) => buildNativeRouter(route, nextPath, Drawer))}
                 </Drawer.Navigator>
             )
@@ -70,7 +143,11 @@ const buildNativeRouter = (routeParam: RouteParam, path: string = '', LastNaviga
             }
             return (
                 <>
-                    <LastNavigator.Screen options={{ headerShown: false, presentation: 'modal' }} name={nextPath} component={routeParam.component} />
+                    <LastNavigator.Screen 
+                        options={{ headerShown: false, presentation: 'modal', ...screenOptions }} 
+                        name={nextPath} 
+                        component={routeParam.component} 
+                    />
                     {routeParam.routes?.map((route) => buildNativeRouter(route, nextPath, LastNavigator))}
                 </>
             )
@@ -80,7 +157,11 @@ const buildNativeRouter = (routeParam: RouteParam, path: string = '', LastNaviga
             }
             return (
                 <>
-                    <LastNavigator.Screen name={nextPath} component={routeParam.component} />
+                    <LastNavigator.Screen 
+                        name={nextPath} 
+                        component={routeParam.component}
+                        options={screenOptions}
+                    />
                     {routeParam.routes?.map((route) => buildNativeRouter(route, nextPath, LastNavigator))}
                 </>
             )

package/src/routing/router.web.tsx

@@ -1,6 +1,217 @@
 import React from "react";
-import { Routes, Route, Outlet } from "react-router-dom";
-import { RouteParam } from "./types";
+import { Routes, Route, Outlet, useLocation, useNavigate } from "react-router-dom";
+import { RouteParam, ScreenOptions } from "./types";
+import { GeneralLayout } from "../layouts/GeneralLayout";
+import { View, Text, Icon, Pressable } from '@idealyst/components';
+
+// Types for TabButton
+interface TabRoute {
+    id: string;
+    path: string;
+    label: string;
+    icon?: React.ComponentType<{ focused: boolean; color: string; size: string }> 
+          | React.ReactElement 
+          | ((props: { focused: boolean; color: string; size: string }) => React.ReactElement)
+          | string;
+}
+
+interface TabButtonProps {
+    tab: TabRoute;
+    isActive: boolean;
+    onPress: () => void;
+}
+
+// Tab Button Component
+const TabButton: React.FC<TabButtonProps> = ({ tab, isActive, onPress }) => {
+    // Render icon - supports React elements, functions, and string names
+    const renderIcon = (icon: TabRoute['icon']) => {
+        if (!icon) return null;
+        
+        if (typeof icon === 'function') {
+            // Function-based icon that receives state - pass explicit colors
+            const IconComponent = icon as (props: { focused: boolean; color: string; size: string }) => React.ReactElement;
+            return IconComponent({ 
+                focused: isActive, 
+                color: isActive ? 'blue' : 'black.900',
+                size: 'sm'
+            });
+        }
+        
+        if (React.isValidElement(icon)) {
+            return icon;
+        }
+        
+        if (typeof icon === 'string') {
+            // Fallback for string icons (though this breaks transpiler support)
+            return <Icon name={icon as any} size="md" color={isActive ? 'white' : 'secondary'} />;
+        }
+        
+        // Handle React.ComponentType
+        if (typeof icon === 'object' && 'type' in icon) {
+            const IconComponent = icon as React.ComponentType<{ focused: boolean; color: string; size: string }>;
+            return <IconComponent focused={isActive} color={isActive ? 'white' : 'secondary'} size="sm" />;
+        }
+        
+        return null;
+    };
+    
+    return (
+        <Pressable onPress={onPress}>
+            <View
+                style={{
+                    paddingHorizontal: 12,
+                    paddingVertical: 8,
+                    borderRadius: 6,
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                }}
+            >
+                {tab.icon ? renderIcon(tab.icon) : null}
+                {tab.label && (
+                    <Text 
+                        size="small" 
+                        color={isActive ? 'blue' : 'black.900'}
+                        style={{
+                            marginLeft: tab.icon ? 8 : 0,
+                        }}
+                    >
+                        {tab.label}
+                    </Text>
+                )}
+            </View>
+        </Pressable>
+    );
+};
+
+// Types for SimpleTabLayout
+interface SimpleTabLayoutProps {
+    routeParam: RouteParam;
+    webScreenOptions: {
+        title?: string;
+        headerTitle?: React.ComponentType | React.ReactElement | string;
+        headerLeft?: React.ComponentType | React.ReactElement;
+        headerRight?: React.ComponentType | React.ReactElement;
+        tabBarLabel?: string;
+        tabBarIcon?: TabRoute['icon'];
+        [key: string]: any;
+    };
+    currentPath: string;
+}
+
+// Simple Tab Layout Component
+const SimpleTabLayout: React.FC<SimpleTabLayoutProps> = ({ routeParam, webScreenOptions }) => {
+    const location = useLocation();
+    const navigate = useNavigate();
+    
+    // Build tab links from routes with screen options
+    const tabRoutes: TabRoute[] = [
+        // Main route (home/index)
+        {
+            id: 'home',
+            path: '',
+            label: webScreenOptions.tabBarLabel || webScreenOptions.title || 'Home',
+            icon: webScreenOptions.tabBarIcon,
+        },
+        // Child routes
+        ...routeParam.routes!.map((route): TabRoute => {
+            const routeOptions = convertScreenOptionsForWeb(route.screenOptions);
+            return {
+                id: route.path || '',
+                path: route.path || '',
+                label: routeOptions.tabBarLabel || routeOptions.title || route.path || '',
+                icon: routeOptions.tabBarIcon,
+            };
+        }),
+    ];
+    
+    // Determine active tab based on current location
+    const getActiveTab = () => {
+        const path = location.pathname.replace(/^\//, ''); // Remove leading slash
+        const activeTabId = path || 'home';
+        return activeTabId;
+    };
+    
+    const activeTab = getActiveTab();
+    
+    // Helper to render header element (component, element, or string)
+    const renderHeaderElement = (element: React.ComponentType | React.ReactElement | string | undefined) => {
+        if (!element) return null;
+        if (React.isValidElement(element)) return element;
+        if (typeof element === 'string') return <Text size="large" weight="semibold">{element}</Text>;
+        if (typeof element === 'function') {
+            const Component = element as React.ComponentType;
+            return <Component />;
+        }
+        return null;
+    };
+
+    // Create simple header navigation
+    const headerContent = (
+        <View style={{ 
+            flexDirection: 'row', 
+            alignItems: 'center', 
+            justifyContent: 'space-between',
+            width: '100%',
+            flex: 1
+        }}>
+            {/* Left side */}
+            <View style={{ flexDirection: 'row', alignItems: 'center', flex: 1 }}>
+                {webScreenOptions.headerLeft ? (
+                    renderHeaderElement(webScreenOptions.headerLeft)
+                ) : (
+                    renderHeaderElement(
+                        webScreenOptions.headerTitle || 
+                        webScreenOptions.title || 
+                        'Navigation'
+                    )
+                )}
+            </View>
+            
+            {/* Tab Navigation */}
+            <View style={{ 
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 8,
+            }}>
+                {tabRoutes.map((tab) => (
+                    <TabButton
+                        key={tab.id}
+                        tab={tab}
+                        isActive={activeTab === tab.id}
+                        onPress={() => {
+                            let targetPath;
+                            if (tab.id === 'home') {
+                                targetPath = '/';
+                            } else {
+                                targetPath = `/${tab.path}`;
+                            }
+                            navigate(targetPath);
+                        }}
+                    />
+                ))}
+            </View>
+            
+            {/* Right side */}
+            <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-end', flex: 1 }}>
+                {renderHeaderElement(webScreenOptions.headerRight)}
+            </View>
+        </View>
+    );
+    
+    return (
+        <GeneralLayout
+            header={{
+                enabled: true,
+                content: headerContent,
+            }}
+            sidebar={{
+                enabled: false,
+            }}
+        >
+            <Outlet />
+        </GeneralLayout>
+    );
+};
 
 export const buildRouter = (routeParam: RouteParam, path: string = '') => {
     return () => (
@@ -10,6 +221,54 @@ export const buildRouter = (routeParam: RouteParam, path: string = '') => {
     );
 };
 
+/**
+ * Convert ScreenOptions to web-compatible props for layout components
+ */
+const convertScreenOptionsForWeb = (screenOptions?: ScreenOptions) => {
+    if (!screenOptions) return {};
+
+    const webOptions: any = {};
+
+    // Basic screen info
+    if (screenOptions.title) {
+        webOptions.title = screenOptions.title;
+    }
+
+    if (screenOptions.tabBarLabel) {
+        webOptions.tabBarLabel = screenOptions.tabBarLabel;
+    }
+
+    if (screenOptions.tabBarIcon) {
+        webOptions.tabBarIcon = screenOptions.tabBarIcon;
+    }
+
+    if (screenOptions.tabBarBadge !== undefined) {
+        webOptions.tabBarBadge = screenOptions.tabBarBadge;
+    }
+
+    if (screenOptions.tabBarVisible !== undefined) {
+        webOptions.tabBarVisible = screenOptions.tabBarVisible;
+    }
+
+    if (screenOptions.headerTitle) {
+        webOptions.headerTitle = screenOptions.headerTitle;
+    }
+
+    if (screenOptions.headerBackVisible !== undefined) {
+        webOptions.headerBackVisible = screenOptions.headerBackVisible;
+    }
+
+    if (screenOptions.headerRight) {
+        webOptions.headerRight = screenOptions.headerRight;
+    }
+
+    if (screenOptions.platformOptions?.web) {
+        Object.assign(webOptions, screenOptions.platformOptions.web);
+    }
+
+    return webOptions;
+};
+
 /**
  * Create React Router routes from RouteParam configuration
  * @param routeParam The route parameter configuration
@@ -23,11 +282,39 @@ const buildWebRoutes = (routeParam: RouteParam, parentPath: string = ''): React.
     // Handle layout wrapping
     const LayoutComponent = routeParam.layout?.component;
     const RouteComponent = routeParam.component;
+    const webScreenOptions = convertScreenOptionsForWeb(routeParam.screenOptions);
+    const isTabLayout = routeParam.layout?.type === 'tab';
     
-    if (LayoutComponent && routeParam.routes) {
-        // Create a wrapper component that renders the layout with Outlet
+    if (isTabLayout && routeParam.routes) {
+        // Create simple header-based tab navigation using GeneralLayout
+        const SimpleTabLayoutWrapper: React.FC = () => {
+            return <SimpleTabLayout routeParam={routeParam} webScreenOptions={webScreenOptions} currentPath={currentPath} />;
+        };
+        
+        // Create parent route with simple tab layout
+        const layoutRoute = (
+            <Route 
+                key={`simple-tab-layout-${currentPath || 'root'}`} 
+                path={currentPath || '/'} 
+                element={<SimpleTabLayoutWrapper />}
+            >
+                {/* Add index route for the main component */}
+                <Route 
+                    index 
+                    element={<RouteComponent {...webScreenOptions} />} 
+                />
+                {/* Add nested routes */}
+                {routeParam.routes.reduce((acc, nestedRoute) => {
+                    return acc.concat(buildWebRoutes(nestedRoute, currentPath));
+                }, [] as React.ReactElement[])}
+            </Route>
+        );
+        
+        routes.push(layoutRoute);
+    } else if (LayoutComponent && routeParam.routes) {
+        // Create a wrapper component that renders the layout with Outlet and screen options
         const LayoutWrapper: React.FC = () => (
-            <LayoutComponent>
+            <LayoutComponent {...webScreenOptions}>
                 <Outlet />
             </LayoutComponent>
         );
@@ -42,7 +329,7 @@ const buildWebRoutes = (routeParam: RouteParam, parentPath: string = ''): React.
                 {/* Add index route for the main component */}
                 <Route 
                     index 
-                    element={<RouteComponent />} 
+                    element={<RouteComponent {...webScreenOptions} />} 
                 />
                 {/* Add nested routes */}
                 {routeParam.routes.reduce((acc, nestedRoute) => {
@@ -58,7 +345,7 @@ const buildWebRoutes = (routeParam: RouteParam, parentPath: string = ''): React.
             <Route 
                 key={currentPath || 'root'} 
                 path={currentPath || '/'} 
-                element={<RouteComponent />} 
+                element={<RouteComponent {...webScreenOptions} />} 
             />
         );
         

package/src/routing/types.ts

@@ -1,10 +1,69 @@
 import React from "react";
 
+export type ScreenOptions = {
+    /**
+     * Screen title for navigation headers
+     */
+    title?: string;
+    
+    /**
+     * Icon component for tab/drawer navigation (React.ComponentType, React.ReactElement, function, or string)
+     */
+    tabBarIcon?: React.ComponentType<{ focused: boolean; color: string; size: number }> 
+                | React.ReactElement 
+                | ((props: { focused: boolean; color: string; size: string }) => React.ReactElement)
+                | string;
+    
+    /**
+     * Label for tab/drawer navigation
+     */
+    tabBarLabel?: string;
+    
+    /**
+     * Badge for tab navigation
+     */
+    tabBarBadge?: string | number;
+    
+    /**
+     * Whether to show the tab bar for this screen
+     */
+    tabBarVisible?: boolean;
+    
+    /**
+     * Custom header title component or string
+     */
+    headerTitle?: React.ComponentType | React.ReactElement | string;
+    
+    /**
+     * Custom header left component (overrides back button)
+     */
+    headerLeft?: React.ComponentType | React.ReactElement;
+    
+    /**
+     * Whether to show header back button
+     */
+    headerBackVisible?: boolean;
+    
+    /**
+     * Custom header right component
+     */
+    headerRight?: React.ComponentType | React.ReactElement;
+    
+    /**
+     * Additional platform-specific options
+     */
+    platformOptions?: {
+        native?: Record<string, any>;
+        web?: Record<string, any>;
+    };
+};
+
 export type RouteParam = {
     path?: string;
     routes?: RouteParam[];
     component: React.ComponentType;
     layout?: LayoutParam;
+    screenOptions?: ScreenOptions;
 }
 
 export type LayoutType = 'stack' | 'tab' | 'drawer' | 'modal';