@idealyst/navigation 1.0.60 → 1.0.62

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/navigation",
-  "version": "1.0.60",
+  "version": "1.0.62",
   "description": "Cross-platform navigation library for React and React Native",
   "readme": "README.md",
   "main": "src/index.ts",
@@ -38,8 +38,8 @@
     "publish:npm": "npm publish"
   },
   "peerDependencies": {
-    "@idealyst/components": "^1.0.60",
-    "@idealyst/theme": "^1.0.60",
+    "@idealyst/components": "^1.0.62",
+    "@idealyst/theme": "^1.0.62",
     "@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,7 +1,7 @@
 import React, { createContext, memo, useContext, useMemo } from 'react';
 import { NavigateParams, NavigatorProviderProps } from './types';
 import { useNavigation, useNavigationState, DarkTheme, DefaultTheme, NavigationContainer } from '@react-navigation/native';
-import { buildRouter } from '../routing';
+import { buildNavigator } from '../routing';
 import { useUnistyles } from 'react-native-unistyles';
 
 const NavigatorContext = createContext<{
@@ -20,9 +20,11 @@ const UnwrappedNavigatorProvider = ({ route }: NavigatorProviderProps) => {
     };
 
     const RouteComponent = useMemo(() => {
-        // Memoize the router to prevent unnecessary re-renders
-        return memo(buildRouter(route));
+        // Memoize the navigator to prevent unnecessary re-renders
+        return memo(buildNavigator(route));
     }, [route]);
+
+    console.log('UnwrappedNavigatorProvider render', RouteComponent);
      
     return (
         <NavigatorContext.Provider value={{ navigate }}>

package/src/context/NavigatorContext.web.tsx

@@ -1,7 +1,6 @@
 import React, { createContext, memo, useContext, useMemo } from 'react';
 import { NavigateParams, NavigatorProviderProps } from './types';
-import { useNavigate } from "react-router-dom";
-import { buildRouter } from '../routing';
+import { buildNavigator } from '../routing';
 
 const NavigatorContext = createContext<{
     navigate: (params: NavigateParams) => void;
@@ -12,17 +11,26 @@ const NavigatorContext = createContext<{
 export const NavigatorProvider = ({ 
     route,
 }: NavigatorProviderProps) => {
-    const routerNavigate = useNavigate();
-    
     const navigateFunction = (params: NavigateParams) => {
         if (params.path) {
-            routerNavigate(params.path);
+            // Normalize path - convert empty string to '/'
+            let path = params.path
+            if (path === '' || path === '/') {
+                path = '/'
+            } else if (!path.startsWith('/')) {
+                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'));
         }
     };
     
     const RouteComponent = useMemo(() => {
         // Memoize the router to prevent unnecessary re-renders
-        return memo(buildRouter(route));
+        return memo(buildNavigator(route));
     }, [route]);
     
     return (

package/src/context/types.ts

@@ -1,4 +1,4 @@
-import { RouteParam } from "../routing";
+import { NavigatorParam } from "../routing";
 
 /**
  * When navigating to a new route, specify the path and the variables to be used in the route.
@@ -9,5 +9,5 @@ export type NavigateParams = {
 };
 
 export type NavigatorProviderProps = {
-    route: RouteParam;
+    route: NavigatorParam;
 };

package/src/examples/CustomStackLayout.tsx

@@ -0,0 +1,63 @@
+import { Button, Text, View } from "@idealyst/components";
+import { StackLayoutProps } from "src";
+import React, { useMemo } from "react";
+
+export default function CustomStackLayout({ 
+    routes,
+    options,
+    ContentComponent,
+    onNavigate,
+    currentPath
+}: StackLayoutProps) {
+
+    const headerTitle = useMemo(() => {
+        if (!options?.headerTitle) return <Text>{currentPath}</Text>;
+        if (typeof options.headerTitle === 'string') {
+            return <Text>{options.headerTitle}</Text>;
+        }
+        const HeaderComponent = options.headerTitle as React.ComponentType;
+        return <HeaderComponent />;
+    }, [options?.headerTitle, currentPath]);
+
+    return (
+        <View style={{ height: '100vh' }}>
+            {/* Header */}
+            <View style={{ padding: 16, borderBottom: '1px solid #e0e0e0' }}>
+                {headerTitle}
+            </View>
+            
+            {/* Main content area with sidebar and content */}
+            <View style={{ display: 'flex', flexDirection: 'row', flex: 1 }}>
+                {/* Left sidebar with routes */}
+                <View style={{ 
+                    width: 250, 
+                    padding: 16, 
+                    borderRight: '1px solid #e0e0e0',
+                    backgroundColor: '#f5f5f5',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: 8
+                }}>
+                    {routes.map(route => (
+                        <Button
+                            variant={currentPath === route.fullPath ? 'contained' : 'outlined'}
+                            key={route.path}
+                            onPress={() => onNavigate(route.path)}
+                            style={{ 
+                                justifyContent: 'flex-start',
+                                textAlign: 'left'
+                            }}
+                        >
+                            {route.fullPath === '/' ? 'Home' : route.fullPath}
+                        </Button>
+                    ))}
+                </View>
+                
+                {/* Main content area */}
+                <View style={{ flex: 1, padding: 16 }}>
+                    <ContentComponent />
+                </View>
+            </View>
+        </View>
+    )
+}

package/src/examples/CustomTabLayout.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import { Button, View, Text } from "@idealyst/components";
+import { TabLayoutProps } from "src/routing";
+
+export default function CustomTabLayout({
+    routes,
+    options,
+    ContentComponent,
+    onNavigate,
+    currentPath
+}: TabLayoutProps) {
+
+    return (
+        <View>
+            <View>
+                {options?.headerTitle ? (
+                    typeof options.headerTitle === 'string' ? (
+                        <Text>{options.headerTitle}</Text>
+                    ) : (
+                        React.createElement(options.headerTitle as React.ComponentType)
+                    )
+                ) : (
+                    <Text>Custom Tab Layout</Text>
+                )}
+            </View>
+            <View style={{ flexDirection: 'row' }}>
+                {routes.map(route => (
+                    <Button
+                        variant={currentPath === route.fullPath ? 'contained' : 'outlined'}
+                        key={route.path}
+                        onPress={() => onNavigate(route.path)}
+                        style={{ margin: 4 }}
+                    >
+                        {route.fullPath === '/' ? 'Home' : route.fullPath}
+                    </Button>
+                ))}
+            </View>
+            <View>
+                <ContentComponent />
+            </View>
+        </View>
+    )
+
+}

package/src/examples/ExampleHybridRouter.tsx

@@ -0,0 +1,62 @@
+import { NavigatorParam, RouteParam } from '../routing';
+import React from 'react';
+import { Button, Screen, Text } from '../../../components/src';
+import { useNavigator } from '../context';
+import CustomTabLayout from './CustomTabLayout';
+import CustomStackLayout from './CustomStackLayout';
+
+const RootScreen = () => {
+
+    const navigator = useNavigator();
+
+    return <Screen>
+        <Text>Root Screen</Text>
+        <Button title="Go to Tab" onPress={() => navigator.navigate({
+            path: '/tab',
+            vars: {},
+        })} />
+    </Screen>
+}
+
+const ExampleHybridRouter: NavigatorParam = {
+    path: '/',
+    type: 'navigator',
+    layout: 'stack',
+    layoutComponent: CustomStackLayout,
+    routes: [
+        {
+            type: 'screen',
+            path: '/',
+            component: RootScreen,
+            options: {
+                title: 'Example',
+            },
+        },
+        {
+            type: 'navigator',
+            path: '/tab',
+            layout: 'tab',
+            layoutComponent: CustomTabLayout,
+            routes: [
+                {
+                    type: 'screen',
+                    path: '/a',
+                    component: () => <Text>Tab A Example</Text>,
+                    options: {
+                        title: 'Tab Example',
+                    },
+                },
+                {
+                    type: 'screen',
+                    path: '/b',
+                    component: () => <Text>Tab B Example</Text>,
+                    options: {
+                        title: 'B',
+                    },
+                },
+            ]
+        },
+    ]
+}
+
+export default ExampleHybridRouter;

package/src/examples/ExampleStackRouter.tsx

@@ -6,7 +6,7 @@ import { Button, Divider, Screen, Text, View } from "../../../components/src";
 import { useNavigator } from "../context";
 import { UnistylesRuntime } from 'react-native-unistyles';
 import { GeneralLayout } from '../layouts/GeneralLayout';
-import { RouteParam } from '../routing';
+import { NavigatorParam, RouteParam } from '../routing';
 import { getNextTheme, getThemeDisplayName, isHighContrastTheme } from './unistyles';
 
 const HomeScreen = () => {
@@ -264,31 +264,29 @@ const WrappedGeneralLayout = (props: any) => {
     )
 }
 
-const StackRouter: RouteParam = {
+const StackRouter: NavigatorParam = {
     path: "/",
-    component: HomeScreen,
-    layout: {
-        type: "stack",
-        component: WrappedGeneralLayout,
-    },
+    type: 'navigator',
+    layout: 'stack',
     routes: [
-        { path: "avatar", component: AvatarExamples},
-        { path: "badge", component: BadgeExamples},
-        { path: "button", component: ButtonExamples},
-        { path: "card", component: CardExamples},
-        { path: "checkbox", component: CheckboxExamples},
-        { path: "divider", component: DividerExamples},
-        { path: "input", component: InputExamples},
-        { path: "text", component: TextExamples},
-        { path: "view", component: ViewExamples},
-        { path: "screen", component: ScreenExamples},
-        { path: "icon", component: IconExamples},
-        { path: "svg-image", component: SVGImageExamples},
-        { path: "dialog", component: DialogExamples},
-        { path: "popover", component: PopoverExamples},
-        { path: "datagrid", component: DataGridShowcase},
-        { path: "datepicker", component: DatePickerExamples},
-        { path: "theme-extension", component: ThemeExtensionExamples},
+        { path: "/", type: 'screen', component: HomeScreen },
+        { path: "avatar", type: 'screen', component: AvatarExamples},
+        { path: "badge", type: 'screen', component: BadgeExamples},
+        { path: "button", type: 'screen', component: ButtonExamples},
+        { path: "card", type: 'screen', component: CardExamples},
+        { path: "checkbox", type: 'screen', component: CheckboxExamples},
+        { path: "divider", type: 'screen', component: DividerExamples},
+        { path: "input", type: 'screen', component: InputExamples},
+        { path: "text", type: 'screen', component: TextExamples},
+        { path: "view", type: 'screen', component: ViewExamples},
+        { path: "screen", type: 'screen', component: ScreenExamples},
+        { path: "icon", type: 'screen', component: IconExamples},
+        { path: "svg-image", type: 'screen', component: SVGImageExamples},
+        { path: "dialog", type: 'screen', component: DialogExamples},
+        { path: "popover", type: 'screen', component: PopoverExamples},
+        { path: "datagrid", type: 'screen', component: DataGridShowcase},
+        { path: "datepicker", type: 'screen', component: DatePickerExamples},
+        { path: "theme-extension", type: 'screen', component: ThemeExtensionExamples},
     ],
 };
 

package/src/examples/ExampleTabRouter.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { ButtonExamples, CardExamples, IconExamples, SVGImageExamples, ThemeExtensionExamples } from "../../../components/src/examples";
 import { Screen, Text, View, Button, Icon } from "../../../components/src";
 import { UnistylesRuntime } from 'react-native-unistyles';
-import { RouteParam } from '../routing';
+import { NavigatorParam, RouteParam } from '../routing';
 import { useNavigator } from '../context';
 import { getNextTheme, getThemeDisplayName, isHighContrastTheme } from './unistyles';
 
@@ -160,12 +160,7 @@ const SettingsTabScreen = () => {
                 <View spacing="md">
                     <Text size="medium" weight="semibold">Screen Options Used</Text>
                     <Text size="small" style={{ fontFamily: 'monospace', backgroundColor: 'rgba(0,0,0,0.05)', padding: 8 }}>
-                        screenOptions: {{
-  title: 'Settings',{"\n"}
-  headerTitle: 'App Settings',{"\n"}
-  headerLeft: () => &lt;BackButton /&gt;,{"\n"}
-  headerRight: () => &lt;ActionButtons /&gt;
-}}
+                        Test
                     </Text>
                 </View>
                 
@@ -197,45 +192,48 @@ const ThemeTabScreen = () => (
     </Screen>
 );
 
-const TabRouter: RouteParam = {
+const TabRouter: NavigatorParam = {
     path: "/",
-    component: HomeTabScreen,
-    layout: {
-        type: "tab",
-    },
-    screenOptions: {
-        title: 'Home',
-        headerTitle: () => (
-            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-                <Icon name="home" size="md" style={{ marginRight: 8 }} />
-                <Text size="large" weight="bold">Tab Demo</Text>
-            </View>
-        ),
-        headerLeft: () => (
-            <Button variant="text" size="small">
-                <Icon name="menu" size="md" />
-            </Button>
-        ),
-        headerRight: () => (
-            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-                <Button variant="text" size="small" style={{ marginRight: 8 }}>
-                    <Icon name="bell" size="md" />
-                </Button>
-                <Button variant="text" size="small">
-                    <Icon name="account" size="md" />
-                </Button>
-            </View>
-        ),
-        tabBarLabel: 'Home',
-        tabBarIcon: ({ focused, size }) => {
-            return <Icon name="home" color={focused ? 'blue' : 'black'} size={size} />
-        },
-    },
+    layout: 'tab',
     routes: [
+        {
+            path: '/',
+            type: 'screen',
+            component: HomeTabScreen,
+            options: {
+                title: 'Home',
+                headerTitle: () => (
+                    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+                        <Icon name="home" size="md" style={{ marginRight: 8 }} />
+                        <Text size="large" weight="bold">Tab Demo</Text>
+                    </View>
+                ),
+                headerLeft: () => (
+                    <Button variant="text" size="small">
+                        <Icon name="menu" size="md" />
+                    </Button>
+                ),
+                headerRight: () => (
+                    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+                        <Button variant="text" size="small" style={{ marginRight: 8 }}>
+                            <Icon name="bell" size="md" />
+                        </Button>
+                        <Button variant="text" size="small">
+                            <Icon name="account" size="md" />
+                        </Button>
+                    </View>
+                ),
+                tabBarLabel: 'Home',
+                tabBarIcon: ({ focused, size }) => {
+                    return <Icon name="home" color={focused ? 'blue' : 'black'} size={size} />
+                },
+            },
+        },
         { 
             path: "components", 
             component: ComponentsTabScreen,
-            screenOptions: {
+            type: 'screen',
+            options: {
                 title: 'Components',
                 headerLeft: () => (
                     <Button variant="text" size="small">
@@ -259,7 +257,8 @@ const TabRouter: RouteParam = {
         { 
             path: "settings", 
             component: SettingsTabScreen,
-            screenOptions: {
+            type: 'screen',
+            options: {
                 title: 'Settings',
                 headerTitle: 'App Settings',
                 headerLeft: () => (
@@ -291,7 +290,8 @@ const TabRouter: RouteParam = {
         { 
             path: "theme", 
             component: ThemeTabScreen,
-            screenOptions: {
+            type: 'screen',
+            options: {
                 title: 'Theme',
                 headerTitle: () => (
                     <View style={{ flexDirection: 'row', alignItems: 'center' }}>

package/src/examples/index.ts

@@ -1,3 +1,4 @@
 export { default as ExampleStackRouter } from './ExampleStackRouter';
 export { default as ExampleTabRouter } from './ExampleTabRouter';
-export { default as ExampleDrawerRouter } from './ExampleDrawerRouter';
+export { default as ExampleDrawerRouter } from './ExampleDrawerRouter';
+export { default as ExampleHybridRouter } from './ExampleHybridRouter';

package/src/layouts/DefaultStackLayout.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import { View, Text } from '@idealyst/components'
+import { StackLayoutProps } from '../routing/types'
+
+export interface DefaultStackLayoutProps extends StackLayoutProps {
+    onNavigate: (path: string) => void
+    currentPath: string
+}
+
+/**
+ * Default Stack Layout Component for Web
+ * Provides a simple stack navigation interface using @idealyst/components
+ */
+export const DefaultStackLayout: React.FC<DefaultStackLayoutProps> = ({
+    options,
+    routes,
+    ContentComponent,
+    onNavigate,
+    currentPath
+}) => {
+    return (
+        <View style={{ height: '100vh', flexDirection: 'column' }}>
+            {/* Header */}
+            {(options?.headerTitle || options?.headerLeft || options?.headerRight) && (
+                <View style={{ 
+                    padding: 16, 
+                    borderBottomWidth: 1, 
+                    borderBottomColor: '#e0e0e0',
+                    backgroundColor: '#f8f9fa'
+                }}>
+                    <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
+                        <View style={{ flexDirection: 'row', alignItems: 'center', flex: 1 }}>
+                            {options.headerLeft && React.createElement(options.headerLeft as any)}
+                            
+                            {options.headerTitle && (
+                                typeof options.headerTitle === 'string' ? (
+                                    <Text size="large" weight="bold" style={{ marginLeft: options.headerLeft ? 12 : 0 }}>
+                                        {options.headerTitle}
+                                    </Text>
+                                ) : (
+                                    React.createElement(options.headerTitle as any)
+                                )
+                            )}
+                        </View>
+                        
+                        {options.headerRight && React.createElement(options.headerRight as any)}
+                    </View>
+                </View>
+            )}
+            
+            {/* Content Area */}
+            <View style={{ flex: 1, padding: 20 }}>
+                <ContentComponent />
+            </View>
+        </View>
+    )
+}

package/src/layouts/DefaultTabLayout.tsx

@@ -0,0 +1,101 @@
+import React from 'react'
+import { View, Text, Button, Icon } from '@idealyst/components'
+import { TabLayoutProps } from '../routing/types'
+
+export interface DefaultTabLayoutProps extends TabLayoutProps {}
+
+/**
+ * Default Tab Layout Component for Web
+ * Provides a simple tab navigation interface using @idealyst/components
+ */
+export const DefaultTabLayout: React.FC<DefaultTabLayoutProps> = ({
+    options,
+    routes,
+    ContentComponent,
+    onNavigate,
+    currentPath
+}) => {
+    return (
+        <View style={{ height: '100vh', flexDirection: 'column' }}>
+            {/* Header */}
+            {options?.headerTitle && (
+                <View style={{ 
+                    padding: 16, 
+                    borderBottomWidth: 1, 
+                    borderBottomColor: '#e0e0e0',
+                    backgroundColor: '#f8f9fa'
+                }}>
+                    <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
+                        <View style={{ flexDirection: 'row', alignItems: 'center', flex: 1 }}>
+                            {options.headerLeft && React.createElement(options.headerLeft as any)}
+                            
+                            {typeof options.headerTitle === 'string' ? (
+                                <Text size="large" weight="bold" style={{ marginLeft: options.headerLeft ? 12 : 0 }}>
+                                    {options.headerTitle}
+                                </Text>
+                            ) : (
+                                React.createElement(options.headerTitle as any)
+                            )}
+                        </View>
+                        
+                        {options.headerRight && React.createElement(options.headerRight as any)}
+                    </View>
+                </View>
+            )}
+            
+            {/* Tab Navigation */}
+            <View style={{ 
+                padding: 12, 
+                borderBottomWidth: 1, 
+                borderBottomColor: '#e0e0e0',
+                backgroundColor: '#ffffff'
+            }}>
+                <View style={{ flexDirection: 'row', gap: 8 }}>
+                    {routes.map((route) => {
+                        if (route.type !== 'screen') return null
+                        
+                        const isActive = currentPath === route.fullPath
+                        const screenRoute = route as any
+                        const label = screenRoute.options?.tabBarLabel || screenRoute.options?.title || (route.fullPath === '/' ? 'Home' : route.fullPath)
+                        const icon = screenRoute.options?.tabBarIcon
+                        
+                        return (
+                            <Button
+                                key={route.path}
+                                variant={isActive ? 'contained' : 'outlined'}
+                                intent={isActive ? 'primary' : undefined}
+                                size="small"
+                                onPress={() => onNavigate(route.path)}
+                                style={{ 
+                                    flexDirection: 'row',
+                                    alignItems: 'center',
+                                    gap: 6
+                                }}
+                            >
+                                {icon && typeof icon === 'string' && (
+                                    <Icon 
+                                        name={icon as any} 
+                                        size="sm" 
+                                        color={isActive ? 'white' : 'primary'} 
+                                    />
+                                )}
+                                <Text 
+                                    size="small" 
+                                    color={isActive ? 'white' : 'primary'}
+                                    weight={isActive ? 'semibold' : 'medium'}
+                                >
+                                    {label}
+                                </Text>
+                            </Button>
+                        )
+                    })}
+                </View>
+            </View>
+            
+            {/* Content Area */}
+            <View style={{ flex: 1, padding: 20 }}>
+                <ContentComponent />
+            </View>
+        </View>
+    )
+}