@idealyst/navigation 1.0.61 → 1.0.62

package/src/routing/router.web.tsx

@@ -1,366 +1,223 @@
-import React from "react";
-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';
+import React from 'react'
+import { NavigatorParam, RouteParam, TabNavigatorParam, StackNavigatorParam } from './types'
+import { DefaultTabLayout } from '../layouts/DefaultTabLayout'
+import { DefaultStackLayout } from '../layouts/DefaultStackLayout'
 
-// 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" />;
+/**
+ * Build the Web navigator using custom layout components
+ * @param params Navigator configuration
+ * @param parentPath Parent route path for nested routing
+ * @returns React Router component
+ */
+export const buildNavigator = (params: NavigatorParam, parentPath = '') => {
+    const NavigatorComponent = () => {
+        switch (params.layout) {
+            case 'tab':
+                return <TabNavigator params={params} parentPath={parentPath} />
+            case 'stack':
+                return <StackNavigator params={params} parentPath={parentPath} />
+            default:
+                throw new Error(`Unsupported navigator layout: ${(params as any).layout}`)
         }
-        
-        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>
-    );
-};
+    return NavigatorComponent
+}
 
-// 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;
+/**
+ * Normalize path for navigation - convert empty string to '/'
+ */
+const normalizePath = (path: string): string => {
+    if (path === '' || path === '/') {
+        return '/'
+    }
+    return path.startsWith('/') ? path : `/${path}`
 }
 
-// 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;
-    };
+/**
+ * Build full path by combining parent path with child path
+ */
+const buildFullPath = (parentPath: string, childPath: string): string => {
+    if (childPath === '/') {
+        return parentPath || '/'
+    }
     
-    const activeTab = getActiveTab();
+    const normalizedParent = parentPath === '/' ? '' : parentPath
+    const normalizedChild = normalizePath(childPath)
     
-    // 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 && (
-                    <View style={{ marginRight: 12 }}>
-                        {renderHeaderElement(webScreenOptions.headerLeft)}
-                    </View>
-                )}
-                {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 () => (
-        <Routes>
-            {buildWebRoutes(routeParam, path)}
-        </Routes>
-    );
-};
+    return `${normalizedParent}${normalizedChild}`
+}
 
 /**
- * Convert ScreenOptions to web-compatible props for layout components
+ * Check if current path matches a route, considering parent path
  */
-const convertScreenOptionsForWeb = (screenOptions?: ScreenOptions) => {
-    if (!screenOptions) return {};
-
-    const webOptions: any = {};
+const pathMatches = (currentPath: string, routePath: string, parentPath: string): boolean => {
+    const fullRoutePath = buildFullPath(parentPath, routePath)
+    return currentPath === fullRoutePath
+}
 
-    // Basic screen info
-    if (screenOptions.title) {
-        webOptions.title = screenOptions.title;
+/**
+ * Tab Navigator Component for web using custom layout components
+ */
+const TabNavigator: React.FC<{ params: TabNavigatorParam; parentPath: string }> = ({ 
+    params, 
+    parentPath 
+}) => {
+    // Get current path from window location
+    const getCurrentPath = () => {
+        return window.location.pathname
     }
 
-    if (screenOptions.tabBarLabel) {
-        webOptions.tabBarLabel = screenOptions.tabBarLabel;
-    }
+    const [currentPath, setCurrentPath] = React.useState(getCurrentPath)
 
-    if (screenOptions.tabBarIcon) {
-        webOptions.tabBarIcon = screenOptions.tabBarIcon;
+    // Listen for navigation changes
+    React.useEffect(() => {
+        const handlePopState = () => {
+            setCurrentPath(getCurrentPath())
+        }
+        
+        window.addEventListener('popstate', handlePopState)
+        return () => window.removeEventListener('popstate', handlePopState)
+    }, [])
+
+    // Navigate function
+    const navigateToRoute = (routePath: string) => {
+        const fullPath = buildFullPath(parentPath, routePath)
+        window.history.pushState({}, '', fullPath)
+        setCurrentPath(fullPath)
     }
+    
+    // Get current route component
+    const getCurrentRoute = () => {
+        // Find matching route
+        const currentRoute = params.routes.find(route => {
+            return pathMatches(currentPath, route.path, parentPath)
+        }) || params.routes[0] // fallback to first route
+
+        if (!currentRoute || currentRoute.type !== 'screen') {
+            return () => React.createElement('div', {}, `Route not found: ${currentPath}`)
+        }
 
-    if (screenOptions.tabBarBadge !== undefined) {
-        webOptions.tabBarBadge = screenOptions.tabBarBadge;
+        return currentRoute.component
     }
 
-    if (screenOptions.tabBarVisible !== undefined) {
-        webOptions.tabBarVisible = screenOptions.tabBarVisible;
-    }
+    // Transform routes to include full paths for layout component
+    const routesWithFullPaths = params.routes.map(route => ({
+        ...route,
+        fullPath: buildFullPath(parentPath, route.path)
+    }))
 
-    if (screenOptions.headerTitle) {
-        webOptions.headerTitle = screenOptions.headerTitle;
-    }
+    // Use custom layout component or default
+    const LayoutComponent = params.layoutComponent || DefaultTabLayout
 
-    if (screenOptions.headerBackVisible !== undefined) {
-        webOptions.headerBackVisible = screenOptions.headerBackVisible;
-    }
+    return (
+        <LayoutComponent
+            options={params.options}
+            routes={routesWithFullPaths}
+            ContentComponent={getCurrentRoute()}
+            onNavigate={navigateToRoute}
+            currentPath={currentPath}
+        />
+    )
+}
 
-    if (screenOptions.headerLeft) {
-        webOptions.headerLeft = screenOptions.headerLeft;
+/**
+ * Stack Navigator Component for web using custom layout components
+ */
+const StackNavigator: React.FC<{ params: StackNavigatorParam; parentPath: string }> = ({ 
+    params, 
+    parentPath 
+}) => {
+    // Get current path from window location
+    const getCurrentPath = () => {
+        return window.location.pathname
     }
 
-    if (screenOptions.headerRight) {
-        webOptions.headerRight = screenOptions.headerRight;
-    }
+    const [currentPath, setCurrentPath] = React.useState(getCurrentPath)
 
-    if (screenOptions.platformOptions?.web) {
-        Object.assign(webOptions, screenOptions.platformOptions.web);
+    // Listen for navigation changes
+    React.useEffect(() => {
+        const handlePopState = () => {
+            setCurrentPath(getCurrentPath())
+        }
+        
+        window.addEventListener('popstate', handlePopState)
+        return () => window.removeEventListener('popstate', handlePopState)
+    }, [])
+
+    // Navigate function
+    const navigateToRoute = (routePath: string) => {
+        const fullPath = buildFullPath(parentPath, routePath)
+        window.history.pushState({}, '', fullPath)
+        setCurrentPath(fullPath)
     }
-
-    return webOptions;
-};
-
-/**
- * Create React Router routes from RouteParam configuration
- * @param routeParam The route parameter configuration
- * @param parentPath The parent path for nested routes
- * @returns Array of React Router Route elements
- */
-const buildWebRoutes = (routeParam: RouteParam, parentPath: string = ''): React.ReactElement[] => {
-    const routes: React.ReactElement[] = [];
-    const currentPath = routeParam.path ? `${parentPath}${routeParam.path}` : parentPath;
     
-    // Handle layout wrapping
-    const LayoutComponent = routeParam.layout?.component;
-    const RouteComponent = routeParam.component;
-    const webScreenOptions = convertScreenOptionsForWeb(routeParam.screenOptions);
-    const isTabLayout = routeParam.layout?.type === 'tab';
-    
-    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>
-        );
+    // Get current route component
+    const getCurrentRoute = () => {
+        // Find matching route
+        const currentRoute = params.routes.find(route => {
+            return pathMatches(currentPath, route.path, parentPath)
+        })
         
-        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 {...webScreenOptions}>
-                <Outlet />
-            </LayoutComponent>
-        );
-        
-        // Create parent route with layout
-        const layoutRoute = (
-            <Route 
-                key={`layout-${currentPath || 'root'}`} 
-                path={currentPath || '/'} 
-                element={<LayoutWrapper />}
-            >
-                {/* 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 {
-        // Simple route without layout
-        routes.push(
-            <Route 
-                key={currentPath || 'root'} 
-                path={currentPath || '/'} 
-                element={<RouteComponent {...webScreenOptions} />} 
-            />
-        );
+        // If no exact match, check if current path starts with any navigator route
+        if (!currentRoute) {
+            const navigatorRoute = params.routes.find(route => {
+                if (route.type === 'navigator') {
+                    const fullRoutePath = buildFullPath(parentPath, route.path)
+                    return currentPath.startsWith(fullRoutePath)
+                }
+                return false
+            })
+            
+            if (navigatorRoute && navigatorRoute.type === 'navigator') {
+                return () => {
+                    const NestedNavigator = buildNavigator(navigatorRoute, buildFullPath(parentPath, navigatorRoute.path))
+                    return React.createElement(NestedNavigator)
+                }
+            }
+        }
         
-        // Handle nested routes without layout
-        if (routeParam.routes) {
-            routeParam.routes.forEach(nestedRoute => {
-                routes.push(...buildWebRoutes(nestedRoute, currentPath));
-            });
+        // Fallback to first route if no match
+        if (!currentRoute) {
+            const fallbackRoute = params.routes[0]
+            if (fallbackRoute.type === 'screen') {
+                return fallbackRoute.component
+            } else if (fallbackRoute.type === 'navigator') {
+                const NestedNavigator = buildNavigator(fallbackRoute, buildFullPath(parentPath, fallbackRoute.path))
+                return () => React.createElement(NestedNavigator)
+            }
         }
+
+        if (currentRoute) {
+            if (currentRoute.type === 'screen') {
+                return currentRoute.component
+            } else if (currentRoute.type === 'navigator') {
+                // Nested navigator
+                const NestedNavigator = buildNavigator(currentRoute, buildFullPath(parentPath, currentRoute.path))
+                return () => React.createElement(NestedNavigator)
+            }
+        }
+        
+        // If all else fails, return a not found component
+        return () => React.createElement('div', {}, `Route not found: ${currentPath}`)
     }
-    
-    return routes;
-};
+
+    // Transform routes to include full paths for layout component
+    const routesWithFullPaths = params.routes.map(route => ({
+        ...route,
+        fullPath: buildFullPath(parentPath, route.path)
+    }))
+
+    // Use custom layout component or default
+    const LayoutComponent = params.layoutComponent || DefaultStackLayout
+
+    return (
+        <LayoutComponent
+            options={params.options}
+            routes={routesWithFullPaths}
+            ContentComponent={getCurrentRoute()}
+            onNavigate={navigateToRoute}
+            currentPath={currentPath}
+        />
+    )
+}

package/src/routing/types.ts

@@ -6,6 +6,12 @@ export type ScreenOptions = {
      */
     title?: string;
     
+};
+
+/**
+ * Tab bar specific screen options
+ */
+export type TabBarScreenOptions = {
     /**
      * Icon component for tab/drawer navigation (React.ComponentType, React.ReactElement, function, or string)
      */
@@ -28,6 +34,10 @@ export type ScreenOptions = {
      * Whether to show the tab bar for this screen
      */
     tabBarVisible?: boolean;
+} & ScreenOptions
+
+export type NavigatorOptions = {
+
     
     /**
      * Custom header title component or string
@@ -48,27 +58,59 @@ export type ScreenOptions = {
      * Custom header right component
      */
     headerRight?: React.ComponentType | React.ReactElement;
-    
-    /**
-     * Additional platform-specific options
-     */
-    platformOptions?: {
-        native?: Record<string, any>;
-        web?: Record<string, any>;
-    };
-};
+}
+
+export type BaseNavigatorParam = {
+    path: string
+    type: 'navigator'
+    options?: NavigatorOptions
+}
+
+export type TabNavigatorParam = {
+    layout: 'tab'
+    routes: RouteParam<TabBarScreenOptions>[]
+    layoutComponent?: TabLayoutComponent
+} & BaseNavigatorParam
+
+export type StackNavigatorParam = {
+    layout: 'stack'
+    routes: RouteParam<ScreenOptions>[]
+    layoutComponent?: StackLayoutComponent
+} & BaseNavigatorParam
+
+export type NavigatorParam = TabNavigatorParam | StackNavigatorParam
+
+export type ScreenParam<T = ScreenOptions> = {
+    path: string
+    type: 'screen'
+    options?: T
+    component: React.ComponentType
+}
+
+export type RouteParam<T = ScreenOptions> = NavigatorParam | ScreenParam<T>;
 
-export type RouteParam = {
-    path?: string;
-    routes?: RouteParam[];
-    component: React.ComponentType;
-    layout?: LayoutParam;
-    screenOptions?: ScreenOptions;
+/**
+ * Extended route type with full path for layout components
+ */
+export type RouteWithFullPath<T = ScreenOptions> = RouteParam<T> & {
+    fullPath: string
 }
 
-export type LayoutType = 'stack' | 'tab' | 'drawer' | 'modal';
+export type TabLayoutProps = {
+    options?: NavigatorOptions
+    routes: RouteWithFullPath<TabBarScreenOptions>[]
+    ContentComponent: React.ComponentType
+    onNavigate: (path: string) => void
+    currentPath: string
+}
+
+export type StackLayoutProps = {
+    options?: NavigatorOptions
+    routes: RouteWithFullPath<ScreenOptions>[]
+    ContentComponent: React.ComponentType
+    onNavigate: (path: string) => void
+    currentPath: string
+}
 
-export type LayoutParam = {
-    type: LayoutType;
-    component?: React.ComponentType<{ children?: React.ReactNode }>;
-}
+export type TabLayoutComponent = React.ComponentType<TabLayoutProps>
+export type StackLayoutComponent = React.ComponentType<StackLayoutProps>

package/src/routing_old/index.native.tsx

@@ -0,0 +1,2 @@
+export * from './router.native';
+export * from './types';

package/src/routing_old/index.ts

@@ -0,0 +1,2 @@
+export * from './router.web';
+export * from './types'; 

package/src/routing_old/index.web.tsx

@@ -0,0 +1,2 @@
+export * from './router.web';
+export * from './types';