@idealyst/navigation 1.0.82 → 1.0.84

package/src/examples/ExampleWebLayout.tsx

@@ -0,0 +1,107 @@
+import React, { useState } from 'react';
+import { View, Text, Button, Divider, ListItem, Icon, Badge } from '@idealyst/components';
+import { useNavigator } from '../context';
+import { Outlet } from '../router';
+import { UnistylesRuntime, useUnistyles } from 'react-native-unistyles';
+import { getNextTheme, getThemeDisplayName, isHighContrastTheme } from './unistyles';
+import ExampleSidebar from './ExampleSidebar';
+import ExampleSearchDialog from './ExampleSearchDialog';
+
+
+export const ExampleWebLayout: React.FC = () => {
+    const navigator = useNavigator();
+    const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+    const [showSearch, setShowSearch] = useState(false);
+    const currentTheme = UnistylesRuntime.themeName || 'light';
+    const { theme } = useUnistyles();
+
+    const cycleTheme = () => {
+        const nextTheme = getNextTheme(currentTheme);
+        UnistylesRuntime.setTheme(nextTheme as any);
+    };
+
+    const sidebarWidth = sidebarCollapsed ? 0 : 280;
+
+    return (
+        <View background='primary' style={{ height: '100vh', flexDirection: 'column', overflow: 'hidden' }}>
+            {/* Header */}
+            <View style={{
+                paddingRight: 32,
+                borderBottomWidth: 1,
+                borderBottomStyle: 'solid',
+                borderBottomColor: theme.colors.border.primary,
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+            }}>
+                <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+                    <Button
+                        type="text"
+                        leftIcon="menu"
+                        size="lg"
+                        onPress={() => setSidebarCollapsed(!sidebarCollapsed)}
+                        style={{ padding: 8 }}
+                    />
+                    <Button type='text' size="lg">
+                        <Text weight="bold" size="lg">
+                            Idealyst Components
+                        </Text>
+                    </Button>
+                    <Badge color='green'>
+                        {getThemeDisplayName(currentTheme)}
+                    </Badge>
+                </View>
+
+                <View style={{ flexDirection: 'row', gap: 8, alignItems: 'center' }}>
+                    <Button
+                        leftIcon="magnify"
+                        size='lg'
+                        intent='neutral'
+                        type='text'
+                        onPress={() => setShowSearch(true)}
+                    />
+                    <Button
+                        type="outlined"
+                        intent="primary"
+                        size="sm"
+                        onPress={cycleTheme}
+                    >
+                        Cycle Theme
+                    </Button>
+                </View>
+            </View>
+
+            {/* Search Dialog */}
+            <ExampleSearchDialog open={showSearch} onOpenChange={setShowSearch} />
+
+            {/* Main Content Area with Sidebar */}
+            <View style={{ flex: 1, flexDirection: 'row', overflow: 'hidden' }}>
+                {/* Sidebar */}
+                <View style={{
+                    width: sidebarWidth,
+                    height: '100%',
+                    borderRightWidth: sidebarCollapsed ? 0 : 1,
+                    borderRightStyle: 'solid',
+                    borderRightColor: theme.colors.border.primary,
+                    transition: 'width 0.3s ease, border-right-width 0.3s ease',
+                    overflow: 'hidden',
+                    flexShrink: 0,
+                }}>
+                    {!sidebarCollapsed && (
+                        <ExampleSidebar />
+                    )}
+                </View>
+
+                {/* Content Area */}
+                <View style={{
+                    flex: 1,
+                    overflowY: 'auto',
+                }}>
+                    <View style={{ padding: 24, maxWidth: 1200, margin: '0 auto', width: '100%' }}>
+                        <Outlet key={currentTheme} />
+                    </View>
+                </View>
+            </View>
+        </View>
+    );
+};

package/src/examples/HeaderRight.tsx

@@ -0,0 +1,27 @@
+import React, { useState } from 'react';
+import { Button, Icon, View } from '@idealyst/components';
+import { UnistylesRuntime } from 'react-native-unistyles';
+import ExampleSearchDialog from './ExampleSearchDialog';
+
+export default function HeaderRight() {
+    const [isDark, setIsDark] = useState(false);
+    const [showDialog, setShowDialog] = useState(false);
+
+    const toggleTheme = () => {
+        const newTheme = isDark ? 'light' : 'dark';
+        UnistylesRuntime.setTheme(newTheme);
+        setIsDark(!isDark);
+    };
+
+    return (
+        <View style={{ flexDirection: 'row', alignItems: 'center', paddingHorizontal: 12, }}>
+            <Button style={{ padding: 0, margin: 0, }}  type='text' onPress={() => setShowDialog(true)} >
+                <Icon name='magnify' intent='neutral' size={'md'} />
+            </Button>
+            <Button type='text' size='sm' onPress={toggleTheme}>
+                <Icon color={isDark ? 'yellow' : 'blue.800'} name={isDark ? 'weather-sunny' : 'moon-waning-crescent'} size='md' />
+            </Button>
+            <ExampleSearchDialog open={showDialog} onOpenChange={setShowDialog} />
+        </View>
+    );
+}

package/src/examples/index.ts

@@ -1,6 +1,4 @@
-export { default as ExampleStackRouter } from './ExampleStackRouter';
-export { default as ExampleTabRouter } from './ExampleTabRouter';
-export { default as ExampleDrawerRouter } from './ExampleDrawerRouter';
-export { default as ExampleHybridRouter } from './ExampleHybridRouter';
+export { default as ExampleNavigationRouter } from './ExampleNavigationRouter';
 export { default as CustomStackLayout } from './CustomStackLayout';
-export { default as CustomTabLayout } from './CustomTabLayout';
+export { default as CustomTabLayout } from './CustomTabLayout';
+export { ExampleWebLayout } from './ExampleWebLayout';

package/src/examples/unistyles.ts

@@ -1,31 +1,25 @@
-import { breakpoints, defaultLightTheme, defaultDarkTheme } from '@idealyst/theme';
-import { highContrastThemes } from './highContrastThemes';
+import { lightTheme, darkTheme } from '@idealyst/theme';
 import { StyleSheet } from 'react-native-unistyles';
 
 // Extend UnistylesThemes to include high contrast themes
 // This overrides the more limited declaration from the components package
 declare module 'react-native-unistyles' {
   export interface UnistylesThemes {
-    light: typeof defaultLightTheme;
-    dark: typeof defaultDarkTheme;
-    lightHighContrast: typeof highContrastThemes.lightHighContrast;
-    darkHighContrast: typeof highContrastThemes.darkHighContrast;
+    light: typeof lightTheme,
+    dark: typeof darkTheme,
   }
 }
-
+  
 // Configure with all themes, including high contrast variants
 // This will override any previous configuration
 StyleSheet.configure({
   themes: {
-    light: defaultLightTheme,
-    dark: defaultDarkTheme,
-    lightHighContrast: highContrastThemes.lightHighContrast,
-    darkHighContrast: highContrastThemes.darkHighContrast,
+    light: lightTheme,
+    dark: darkTheme,
   },
   settings: {
     initialTheme: 'light',
   },
-  breakpoints,
 });
 
 // Export theme names for easy reference

package/src/hooks/useParams.web.ts

@@ -1,4 +1,4 @@
-import { useParams as useReactRouterParams } from 'react-router';
+import { useParams as useReactRouterParams } from '../router';
 
 /**
  * Custom useParams hook that wraps React Router's useParams

package/src/index.native.ts

@@ -1,4 +1,7 @@
 // Native-specific exports
-export * from './index';
+export * from './context';
+export * from './layouts';
+export * from './routing';
+export * from './hooks';
 
 // No React Router exports needed for native

package/src/index.web.ts

@@ -1,5 +1,5 @@
 // Web-specific exports
 export * from './index';
 
-// Re-export React Router components to ensure single instance
-export { Outlet } from 'react-router';
+// Direct export to fix module resolution
+export { NavigatorProvider, useNavigator } from './context/NavigatorContext.web';

package/src/layouts/DefaultStackLayout.tsx

@@ -1,10 +1,9 @@
 import React from 'react'
 import { View, Text } from '@idealyst/components'
 import { StackLayoutProps } from '../routing/types'
-import { Outlet } from '..'
-
+import { Outlet } from '../router'
+import { useNavigator } from '../context'
 export interface DefaultStackLayoutProps extends StackLayoutProps {
-    onNavigate: (path: string) => void
     currentPath: string
 }
 
@@ -15,9 +14,11 @@ export interface DefaultStackLayoutProps extends StackLayoutProps {
 export const DefaultStackLayout: React.FC<DefaultStackLayoutProps> = ({
     options,
     routes,
-    onNavigate,
     currentPath
 }) => {
+
+    const navigator = useNavigator()
+
     return (
         <View style={{ height: '100vh', flexDirection: 'column' }}>
             {/* Header */}
@@ -34,7 +35,7 @@ export const DefaultStackLayout: React.FC<DefaultStackLayoutProps> = ({
                             
                             {options.headerTitle && (
                                 typeof options.headerTitle === 'string' ? (
-                                    <Text size="large" weight="bold" style={{ marginLeft: options.headerLeft ? 12 : 0 }}>
+                                    <Text size="lg" weight="bold" style={{ marginLeft: options.headerLeft ? 12 : 0 }}>
                                         {options.headerTitle}
                                     </Text>
                                 ) : (

package/src/layouts/DefaultTabLayout.tsx

@@ -1,7 +1,8 @@
 import React from 'react'
 import { View, Text, Button, Icon } from '@idealyst/components'
 import { TabLayoutProps } from '../routing/types'
-import { Outlet } from '..'
+import { Outlet } from '../router'
+import { useNavigator } from '../context'
 
 export interface DefaultTabLayoutProps extends TabLayoutProps {}
 
@@ -12,9 +13,11 @@ export interface DefaultTabLayoutProps extends TabLayoutProps {}
 export const DefaultTabLayout: React.FC<DefaultTabLayoutProps> = ({
     options,
     routes,
-    onNavigate,
     currentPath
 }) => {
+
+    const navigator = useNavigator()
+
     return (
         <View style={{ height: '100vh', flexDirection: 'column' }}>
             {/* Header */}
@@ -30,7 +33,7 @@ export const DefaultTabLayout: React.FC<DefaultTabLayoutProps> = ({
                             {options.headerLeft && React.createElement(options.headerLeft as any)}
                             
                             {typeof options.headerTitle === 'string' ? (
-                                <Text size="large" weight="bold" style={{ marginLeft: options.headerLeft ? 12 : 0 }}>
+                                <Text size="lg" weight="bold" style={{ marginLeft: options.headerLeft ? 12 : 0 }}>
                                     {options.headerTitle}
                                 </Text>
                             ) : (
@@ -64,8 +67,10 @@ export const DefaultTabLayout: React.FC<DefaultTabLayoutProps> = ({
                                 key={route.path}
                                 variant={isActive ? 'contained' : 'outlined'}
                                 intent={isActive ? 'primary' : undefined}
-                                size="small"
-                                onPress={() => onNavigate(route.path)}
+                                size="sm"
+                                onPress={() => navigator.navigate({
+                                    path: route.fullPath
+                                })}
                                 style={{ 
                                     flexDirection: 'row',
                                     alignItems: 'center',
@@ -80,7 +85,7 @@ export const DefaultTabLayout: React.FC<DefaultTabLayoutProps> = ({
                                     />
                                 )}
                                 <Text 
-                                    size="small" 
+                                    size="sm" 
                                     color={isActive ? 'white' : 'primary'}
                                     weight={isActive ? 'semibold' : 'medium'}
                                 >

package/src/router/index.native.ts

@@ -0,0 +1,17 @@
+// Native platforms don't use React Router
+// This is a stub to maintain cross-platform compatibility
+
+export const BrowserRouter = null;
+export const HashRouter = null;
+export const MemoryRouter = null;
+export const Router = null;
+export const useNavigate = () => null;
+export const useLocation = () => null;
+export const useParams = () => null;
+export const useSearchParams = () => null;
+export const Navigate = null;
+export const Outlet = null;
+export const Route = null;
+export const Routes = null;
+export const Link = null;
+export const NavLink = null;

package/src/router/index.ts

@@ -0,0 +1,3 @@
+// Platform-specific exports will be used
+// This file exists for TypeScript resolution
+// The actual exports come from platform-specific files

package/src/router/index.web.ts

@@ -0,0 +1,6 @@
+// Export all React Router modules from a centralized location
+// This prevents duplication issues when multiple packages need React Router
+
+// Re-export everything from react-router-dom
+// This includes all react-router exports plus the DOM-specific ones
+export * from 'react-router-dom';

package/src/routing/DrawerContentWrapper.native.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { DrawerContentComponentProps } from '@react-navigation/drawer';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { DrawerNavigatorProvider } from '../context/index.native';
+import { NavigatorParam, DrawerSidebarProps } from './types';
+
+/**
+ * Wrapper that renders the sidebar component and passes safe area insets
+ * The NavigatorContext is already provided by NavigatorProvider higher up in the tree,
+ * so the sidebar can use useNavigator hook directly
+ */
+export const DrawerContentWrapper: React.FC<{
+    content: React.ComponentType<DrawerSidebarProps>;
+    route: NavigatorParam;
+    drawerProps: DrawerContentComponentProps;
+}> = ({ content: Content, route, drawerProps }) => {
+    // Get safe area insets from React Native Safe Area Context
+    const insets = useSafeAreaInsets();
+
+    return (
+        <DrawerNavigatorProvider navigation={drawerProps.navigation} route={route}>
+            <Content insets={insets} />
+        </DrawerNavigatorProvider>
+    );
+};

package/src/routing/HeaderWrapper.native.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { DrawerNavigatorProvider } from '../context/index.native';
+import { NavigatorParam } from './types';
+
+/**
+ * Wrapper that renders the header component with navigation context
+ * This allows header components to use useNavigator and access route info
+ */
+export const HeaderWrapper: React.FC<{
+    content: React.ComponentType<any>;
+    route: NavigatorParam;
+    navigation: any;
+}> = ({ content: Content, route, navigation }) => {
+    return (
+        <DrawerNavigatorProvider navigation={navigation} route={route}>
+            <Content />
+        </DrawerNavigatorProvider>
+    );
+};

package/src/routing/index.native.tsx

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

package/src/routing/index.web.tsx

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

package/src/routing/router.native.tsx

@@ -1,21 +1,129 @@
-import { NavigatorParam, RouteParam } from './types'
+import { NavigatorParam, RouteParam, ScreenOptions } from './types'
 
 import { TypedNavigator } from "@react-navigation/native";
 import { createNativeStackNavigator } from "@react-navigation/native-stack";
 import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
+import { createDrawerNavigator } from "@react-navigation/drawer";
+import { DrawerContentWrapper } from './DrawerContentWrapper.native';
+import { HeaderWrapper } from './HeaderWrapper.native';
+import React from 'react';
+import { useUnistyles } from 'react-native-unistyles';
+import { useIsFocused } from '@react-navigation/native';
+
+/**
+ * Wrapper that makes screen components reactive to theme changes
+ * Only updates when the screen is focused
+ */
+const ThemeAwareScreenWrapper: React.FC<{
+    Component: React.ComponentType<any>;
+    [key: string]: any;
+}> = ({ Component, ...props }) => {
+    const isFocused = useIsFocused();
+
+    // Force update mechanism
+    const [, forceUpdate] = React.useReducer((x) => x + 1, 0);
+
+    // Subscribe to theme changes
+    const { rt } = useUnistyles();
+
+    // Force re-render when theme changes (only when focused)
+    React.useEffect(() => {
+        if (isFocused) {
+            console.log('[ThemeAwareScreenWrapper] Theme changed, forcing update. New theme:', rt.themeName);
+            forceUpdate();
+        }
+    }, [rt.themeName, isFocused]);
+
+    // Log when component renders
+    React.useEffect(() => {
+        if (isFocused) {
+            console.log('[ThemeAwareScreenWrapper] Screen rendered with theme:', rt.themeName);
+        }
+    });
+
+    // Only render when focused to optimize performance
+    if (!isFocused) {
+        return null;
+    }
+
+    return <Component {...props} />;
+};
+
+/**
+ * Cache for wrapped components to maintain stable references across renders
+ */
+const wrappedComponentCache = new WeakMap<React.ComponentType<any>, React.ComponentType<any>>();
+
+/**
+ * Creates a theme-aware component wrapper with a stable reference
+ * This prevents React Navigation warnings about inline components
+ */
+const createThemeAwareComponent = (OriginalComponent: React.ComponentType<any>) => {
+    // Check cache first to return the same wrapped component reference
+    if (wrappedComponentCache.has(OriginalComponent)) {
+        return wrappedComponentCache.get(OriginalComponent)!;
+    }
+
+    const Wrapped = React.memo((props: any) => (
+        <ThemeAwareScreenWrapper Component={OriginalComponent} {...props} />
+    ));
+    Wrapped.displayName = `ThemeAware(${OriginalComponent.displayName || OriginalComponent.name || 'Component'})`;
+
+    // Store in cache for future lookups
+    wrappedComponentCache.set(OriginalComponent, Wrapped);
+
+    return Wrapped;
+};
 
 /**
  * Build the Mobile navigator using React Navigation
- * @param params 
- * @param parentPath 
- * @returns 
+ * @param params
+ * @param parentPath
+ * @returns
  */
 export const buildNavigator = (params: NavigatorParam, parentPath = '') => {
     const NavigatorType = getNavigatorType(params);
+
+    // Wrap screenOptions to provide navigation context to headerRight
+    const screenOptions = params.options?.headerRight
+        ? (navProps: any) => {
+            const baseOptions = typeof params.options === 'function'
+                ? params.options(navProps)
+                : params.options;
+
+            return {
+                ...baseOptions,
+                headerRight: () => (
+                    <HeaderWrapper
+                        content={baseOptions.headerRight}
+                        route={params}
+                        navigation={navProps.navigation}
+                    />
+                ),
+            };
+        }
+        : params.options;
+
+    // Special handling for drawer navigator with custom sidebar
+    if (params.layout === 'drawer' && params.sidebarComponent) {
+        return () => (
+            <NavigatorType.Navigator
+                screenOptions={screenOptions}
+                drawerContent={(drawerProps: any) => (
+                    <DrawerContentWrapper
+                        route={params}
+                        content={params.sidebarComponent!}
+                        drawerProps={drawerProps}
+                    />
+                )}
+            >
+                {params.routes.map((child, index) => buildScreen(child, NavigatorType, parentPath, index))}
+            </NavigatorType.Navigator>
+        );
+    }
+
     return () => (
-        <NavigatorType.Navigator screenOptions={{
-            headerShown: params.options?.headerShown
-        }}>
+        <NavigatorType.Navigator screenOptions={screenOptions}>
             {params.routes.map((child, index) => buildScreen(child, NavigatorType, parentPath, index))}
         </NavigatorType.Navigator>
     )
@@ -23,8 +131,8 @@ export const buildNavigator = (params: NavigatorParam, parentPath = '') => {
 
 /**
  * Get Navigator Type
- * @param params 
- * @returns 
+ * @param params
+ * @returns
  */
 const getNavigatorType = (params: NavigatorParam) => {
     switch (params.layout) {
@@ -32,16 +140,18 @@ const getNavigatorType = (params: NavigatorParam) => {
             return createNativeStackNavigator();
         case 'tab':
             return createBottomTabNavigator();
+        case 'drawer':
+            return createDrawerNavigator();
     }
     throw new Error(`Unsupported navigator type: ${params.layout}`);
 }
 
 /**
  * Build Screen
- * @param params 
- * @param Navigator 
- * @param parentPath 
- * @returns 
+ * @param params
+ * @param Navigator
+ * @param parentPath
+ * @returns
  */
 const buildScreen = (params: RouteParam, Navigator: TypedNavigator, parentPath = '', index: number) => {
     // Build the full path by combining parent path with current route path
@@ -56,20 +166,20 @@ const buildScreen = (params: RouteParam, Navigator: TypedNavigator, parentPath =
         const routePath = params.path.startsWith('/') ? params.path.slice(1) : params.path;
         fullPath = `${parentPath}/${routePath}`;
     }
-    
-    console.log('📱 Registering screen:', {
-        originalPath: params.path,
-        parentPath,
-        fullPath,
-        type: params.type,
-        screenName: fullPath
-    });
-    
+
+    // Determine the component - wrap screens with ThemeAwareScreenWrapper
+    let component: React.ComponentType<any>;
+    if (params.type === 'screen') {
+        component = createThemeAwareComponent(params.component);
+    } else {
+        component = buildNavigator(params, fullPath);
+    }
+
     return (
         <Navigator.Screen
             key={`${fullPath}-${index}`}
             name={fullPath}
-            component={params.type === 'screen' ? params.component : buildNavigator(params, fullPath)}
+            component={component}
             options={params.options}
         />
     )

package/src/routing/router.web.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Routes, Route } from 'react-router'
+import { Routes, Route } from '../router'
 import { DefaultStackLayout } from '../layouts/DefaultStackLayout'
 import { DefaultTabLayout } from '../layouts/DefaultTabLayout'
 import { NavigatorParam, RouteParam } from './types'
@@ -13,7 +13,7 @@ import { NavigatorParam, RouteParam } from './types'
 export const buildNavigator = (params: NavigatorParam, parentPath = '') => {
     return () => (
         <Routes>
-            {params.routes.map((child, index) => buildRoute(child, index))}
+            {buildRoute(params, 0, false)}
         </Routes>
     )
 }
@@ -63,7 +63,6 @@ const buildRoute = (params: RouteParam, index: number, isNested = false) => {
                     <LayoutComponent
                         options={params.options}
                         routes={routesWithFullPaths}
-                        onNavigate={() => {}} // Layout components can use their own navigation logic
                         currentPath=""
                     />
                 }