@idealyst/navigation 1.0.78 → 1.0.79

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/navigation",
-  "version": "1.0.78",
+  "version": "1.0.79",
   "description": "Cross-platform navigation library for React and React Native",
   "readme": "README.md",
   "main": "src/index.ts",
@@ -18,8 +18,10 @@
   },
   "exports": {
     ".": {
-      "import": "./src/index.ts",
-      "require": "./src/index.ts",
+      "react-native": "./src/index.native.ts",
+      "default": "./src/index.web.ts",
+      "import": "./src/index.web.ts",
+      "require": "./src/index.web.ts",
       "types": "./src/index.ts"
     },
     "./examples": {
@@ -38,8 +40,8 @@
     "publish:npm": "npm publish"
   },
   "peerDependencies": {
-    "@idealyst/components": "^1.0.78",
-    "@idealyst/theme": "^1.0.78",
+    "@idealyst/components": "^1.0.79",
+    "@idealyst/theme": "^1.0.79",
     "@react-navigation/bottom-tabs": "^7.0.0",
     "@react-navigation/drawer": "^7.0.0",
     "@react-navigation/native": "^7.0.0",

package/src/context/NavigatorContext.native.tsx

@@ -1,33 +1,101 @@
 import React, { createContext, memo, useContext, useMemo } from 'react';
-import { NavigateParams, NavigatorProviderProps } from './types';
-import { useNavigation, useNavigationState, DarkTheme, DefaultTheme, NavigationContainer } from '@react-navigation/native';
+import { NavigateParams, NavigatorProviderProps, NavigatorContextValue } from './types';
+import { useNavigation, useNavigationState, DarkTheme, DefaultTheme, NavigationContainer, useRoute } from '@react-navigation/native';
 import { buildNavigator } from '../routing';
 import { useUnistyles } from 'react-native-unistyles';
 
-const NavigatorContext = createContext<{
-    navigate: (params: NavigateParams) => void;
-}>({
+const NavigatorContext = createContext<NavigatorContextValue>({
     navigate: () => {},
+    params: {},
 });
 
+// Utility function to parse path with parameters and find matching route
+const parseParameterizedPath = (path: string, routes: any[]): { routeName: string, params: Record<string, string> } | null => {
+    // Handle absolute paths like /event/123
+    if (path.startsWith('/')) {
+        const pathSegments = path.split('/').filter(Boolean);
+        
+        // Find matching route by checking patterns like /event/:id
+        const findMatchingRoute = (routeList: any[], segments: string[], startIndex = 0): any => {
+            for (const route of routeList) {
+                const routeSegments = route.path.split('/').filter(Boolean);
+                
+                if (routeSegments.length === segments.length - startIndex) {
+                    let isMatch = true;
+                    const extractedParams: Record<string, string> = {};
+                    
+                    for (let i = 0; i < routeSegments.length; i++) {
+                        const routeSegment = routeSegments[i];
+                        const pathSegment = segments[startIndex + i];
+                        
+                        if (routeSegment.startsWith(':')) {
+                            // Parameter segment - extract value
+                            const paramName = routeSegment.slice(1);
+                            extractedParams[paramName] = pathSegment;
+                        } else if (routeSegment !== pathSegment) {
+                            // Literal segment must match exactly
+                            isMatch = false;
+                            break;
+                        }
+                    }
+                    
+                    if (isMatch) {
+                        return { route, params: extractedParams };
+                    }
+                }
+                
+                // Check nested routes
+                if (route.routes) {
+                    const nestedMatch = findMatchingRoute(route.routes, segments, startIndex + route.path.split('/').filter(Boolean).length);
+                    if (nestedMatch) {
+                        return nestedMatch;
+                    }
+                }
+            }
+            return null;
+        };
+        
+        const match = findMatchingRoute([route], pathSegments);
+        if (match) {
+            return {
+                routeName: match.route.path,
+                params: match.params
+            };
+        }
+    }
+    
+    return null;
+};
+
 const UnwrappedNavigatorProvider = ({ route }: NavigatorProviderProps) => {
 
     const navigation = useNavigation();
+    const currentRoute = useRoute();
         
     const navigate = (params: NavigateParams) => {
-        console.log('navigate', params);
-        navigation.navigate(params.path as never);
+        
+        // Parse parameterized path for mobile
+        const parsed = parseParameterizedPath(params.path, [route]);
+        
+        if (parsed) {
+            // Navigate to the pattern route with extracted parameters
+            navigation.navigate(parsed.routeName as never, parsed.params as never);
+        } else {
+            // Fallback to direct navigation
+            navigation.navigate(params.path as never, params.vars as never);
+        }
     };
 
     const RouteComponent = useMemo(() => {
         // Memoize the navigator to prevent unnecessary re-renders
         return memo(buildNavigator(route));
     }, [route]);
-
-    console.log('UnwrappedNavigatorProvider render', RouteComponent);
      
     return (
-        <NavigatorContext.Provider value={{ navigate }}>
+        <NavigatorContext.Provider value={{ 
+            navigate,
+            params: currentRoute.params || {}
+        }}>
             <RouteComponent />
         </NavigatorContext.Provider>
     )

package/src/context/NavigatorContext.web.tsx

@@ -1,16 +1,19 @@
 import React, { createContext, memo, useContext, useMemo } from 'react';
-import { NavigateParams, NavigatorProviderProps } from './types';
+import { useNavigate, useParams } from 'react-router';
+import { NavigateParams, NavigatorProviderProps, NavigatorContextValue } from './types';
 import { buildNavigator } from '../routing';
 
-const NavigatorContext = createContext<{
-    navigate: (params: NavigateParams) => void;
-}>({
+const NavigatorContext = createContext<NavigatorContextValue>({
     navigate: () => {},
+    params: {},
 });
 
 export const NavigatorProvider = ({ 
     route,
 }: NavigatorProviderProps) => {
+    const reactRouterNavigate = useNavigate()
+    const params = useParams()
+    
     const navigateFunction = (params: NavigateParams) => {
         if (params.path) {
             // Normalize path - convert empty string to '/'
@@ -21,10 +24,15 @@ export const NavigatorProvider = ({
                 path = `/${path}`
             }
             
-            // Use HTML5 history API for proper navigation without hash
-            window.history.pushState({}, '', path);
-            // Trigger a popstate event to update any listening components
-            window.dispatchEvent(new PopStateEvent('popstate'));
+            // Substitute variables in the path if provided
+            if (params.vars) {
+                Object.entries(params.vars).forEach(([key, value]) => {
+                    path = path.replace(`:${key}`, value);
+                });
+            }
+            
+            // Use React Router's navigate function
+            reactRouterNavigate(path);
         }
     };
     
@@ -34,7 +42,10 @@ export const NavigatorProvider = ({
     }, [route]);
     
     return (
-        <NavigatorContext.Provider value={{ navigate: navigateFunction }}>
+        <NavigatorContext.Provider value={{ 
+            navigate: navigateFunction,
+            params: params || {}
+        }}>
             <RouteComponent />
         </NavigatorContext.Provider>
     );

package/src/context/types.ts

@@ -10,4 +10,12 @@ export type NavigateParams = {
 
 export type NavigatorProviderProps = {
     route: NavigatorParam;
+};
+
+/**
+ * Context value that includes navigation function and current route parameters
+ */
+export type NavigatorContextValue = {
+    navigate: (params: NavigateParams) => void;
+    params: Record<string, string>;
 };

package/src/index.native.ts

@@ -0,0 +1,4 @@
+// Native-specific exports
+export * from './index';
+
+// No React Router exports needed for native

package/src/index.ts

@@ -1,8 +1,4 @@
-// Web-specific exports
+// Cross-platform exports
 export * from './context';
-
-// Layout components
 export * from './layouts';
-
-// Routing utilities and components
 export * from './routing';

package/src/index.web.ts

@@ -0,0 +1,5 @@
+// Web-specific exports
+export * from './index';
+
+// Re-export React Router components to ensure single instance
+export { Outlet } from 'react-router';

package/src/layouts/DefaultStackLayout.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { View, Text } from '@idealyst/components'
 import { StackLayoutProps } from '../routing/types'
+import { Outlet } from 'react-router'
 
 export interface DefaultStackLayoutProps extends StackLayoutProps {
     onNavigate: (path: string) => void
@@ -14,7 +15,6 @@ export interface DefaultStackLayoutProps extends StackLayoutProps {
 export const DefaultStackLayout: React.FC<DefaultStackLayoutProps> = ({
     options,
     routes,
-    ContentComponent,
     onNavigate,
     currentPath
 }) => {
@@ -50,7 +50,7 @@ export const DefaultStackLayout: React.FC<DefaultStackLayoutProps> = ({
             
             {/* Content Area */}
             <View style={{ flex: 1, padding: 20 }}>
-                <ContentComponent />
+                <Outlet />
             </View>
         </View>
     )

package/src/layouts/DefaultTabLayout.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { View, Text, Button, Icon } from '@idealyst/components'
 import { TabLayoutProps } from '../routing/types'
+import { Outlet } from 'react-router'
 
 export interface DefaultTabLayoutProps extends TabLayoutProps {}
 
@@ -11,7 +12,6 @@ export interface DefaultTabLayoutProps extends TabLayoutProps {}
 export const DefaultTabLayout: React.FC<DefaultTabLayoutProps> = ({
     options,
     routes,
-    ContentComponent,
     onNavigate,
     currentPath
 }) => {
@@ -94,7 +94,7 @@ export const DefaultTabLayout: React.FC<DefaultTabLayoutProps> = ({
             
             {/* Content Area */}
             <View style={{ flex: 1, padding: 20 }}>
-                <ContentComponent />
+                <Outlet />
             </View>
         </View>
     )

package/src/routing/index.native.tsx

@@ -1,2 +1,6 @@
 export * from './router.native';
-export * from './types';
+export * from './types';
+
+// Added for consistency
+const Outlet = null
+export { Outlet };

package/src/routing/index.web.tsx

@@ -1,2 +1,4 @@
 export * from './router.web';
-export * from './types'; 
+export * from './types'; 
+
+export { Outlet } from 'react-router';

package/src/routing/router.web.tsx

@@ -1,223 +1,78 @@
 import React from 'react'
+import { Routes, Route } from 'react-router'
 import { DefaultStackLayout } from '../layouts/DefaultStackLayout'
 import { DefaultTabLayout } from '../layouts/DefaultTabLayout'
-import { NavigatorParam, StackNavigatorParam, TabNavigatorParam } from './types'
+import { NavigatorParam, RouteParam } from './types'
 
 /**
- * Build the Web navigator using custom layout components
+ * Build the Web navigator using React Router v7 nested routes
  * @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 NavigatorComponent
-}
-
-/**
- * Normalize path for navigation - convert empty string to '/'
- */
-const normalizePath = (path: string): string => {
-    if (path === '' || path === '/') {
-        return '/'
-    }
-    return path.startsWith('/') ? path : `/${path}`
-}
-
-/**
- * Build full path by combining parent path with child path
- */
-const buildFullPath = (parentPath: string, childPath: string): string => {
-    if (childPath === '/') {
-        return parentPath || '/'
-    }
-    
-    const normalizedParent = parentPath === '/' ? '' : parentPath
-    const normalizedChild = normalizePath(childPath)
-
-    return `${normalizedParent}${normalizedChild}`
+    return () => (
+        <Routes>
+            {params.routes.map((child, index) => buildRoute(child, index))}
+        </Routes>
+    )
 }
 
-/**
- * Check if current path matches a route, considering parent path
- */
-const pathMatches = (currentPath: string, routePath: string, parentPath: string): boolean => {
-    const fullRoutePath = buildFullPath(parentPath, routePath)
-    return currentPath === fullRoutePath
-}
 
 /**
- * Tab Navigator Component for web using custom layout components
+ * Build Route - handles both screens and nested navigators
+ * @param params Route configuration
+ * @param index Route index for key generation
+ * @param isNested Whether this is a nested route (should strip leading slash)
+ * @returns React Router Route element
  */
-const TabNavigator: React.FC<{ params: TabNavigatorParam; parentPath: string }> = ({ 
-    params, 
-    parentPath 
-}) => {
-    // Get current path from window location
-    const getCurrentPath = () => {
-        return window.location.pathname
-    }
-
-    const [currentPath, setCurrentPath] = React.useState(getCurrentPath)
-
-    // 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)
-    }
+const buildRoute = (params: RouteParam, index: number, isNested = false) => {
+    // For nested routes, strip leading slash to make path relative
+    const routePath = isNested && params.path.startsWith('/') 
+        ? params.path.slice(1) 
+        : params.path;
     
-    // 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}`)
-        }
-
-        return currentRoute.component
-    }
-
-    // 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 || DefaultTabLayout
-
-    return (
-        <LayoutComponent
-            options={params.options}
-            routes={routesWithFullPaths}
-            ContentComponent={getCurrentRoute()}
-            onNavigate={navigateToRoute}
-            currentPath={currentPath}
-        />
-    )
-}
-
-/**
- * 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
-    }
-
-    const [currentPath, setCurrentPath] = React.useState(getCurrentPath)
-
-    // Listen for navigation changes
-    React.useEffect(() => {
-        const handlePopState = () => {
-            setCurrentPath(getCurrentPath())
-        }
+    if (params.type === 'screen') {
         
-        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)
-        })
+        // If the route path is empty (root route in navigator), make it an index route
+        const routeProps = routePath === '' ? { index: true } : { path: routePath };
         
-        // 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 + '/') || currentPath === fullRoutePath
-                }
-                return false
-            })
-            
-            if (navigatorRoute && navigatorRoute.type === 'navigator') {
-                return () => {
-                    const NestedNavigator = buildNavigator(navigatorRoute, buildFullPath(parentPath, navigatorRoute.path))
-                    return React.createElement(NestedNavigator)
-                }
-            }
-        }
+        return (
+            <Route
+                key={`${params.path}-${index}`}
+                {...routeProps}
+                element={React.createElement(params.component)}
+            />
+        );
+    } else if (params.type === 'navigator') {
+        // Get the layout component directly
+        const LayoutComponent = params.layoutComponent || 
+            (params.layout === 'tab' ? DefaultTabLayout : DefaultStackLayout);
         
-        // 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)
-            }
-        }
+        // Transform routes to include full paths for layout component
+        const routesWithFullPaths = params.routes.map(route => ({
+            ...route,
+            fullPath: route.path
+        }));
         
-        // If all else fails, return a not found component
-        return () => React.createElement('div', {}, `Route not found: ${currentPath}`)
+        return (
+            <Route 
+                key={`${params.path}-${index}`} 
+                path={routePath}
+                element={
+                    <LayoutComponent
+                        options={params.options}
+                        routes={routesWithFullPaths}
+                        onNavigate={() => {}} // Layout components can use their own navigation logic
+                        currentPath=""
+                    />
+                }
+            >
+                {params.routes.map((child, childIndex) => buildRoute(child, childIndex, true))}
+            </Route>
+        );
     }
+    
+    return null;
+}
 
-    // 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

@@ -102,7 +102,6 @@ export type RouteWithFullPath<T = ScreenOptions> = RouteParam<T> & {
 export type TabLayoutProps = {
     options?: NavigatorOptions
     routes: RouteWithFullPath<TabBarScreenOptions>[]
-    ContentComponent: React.ComponentType
     onNavigate: (path: string) => void
     currentPath: string
 }
@@ -110,7 +109,6 @@ export type TabLayoutProps = {
 export type StackLayoutProps = {
     options?: NavigatorOptions
     routes: RouteWithFullPath<ScreenOptions>[]
-    ContentComponent: React.ComponentType
     onNavigate: (path: string) => void
     currentPath: string
 }