@idealyst/navigation 1.0.83 → 1.0.84

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/navigation",
-  "version": "1.0.83",
+  "version": "1.0.84",
   "description": "Cross-platform navigation library for React and React Native",
   "readme": "README.md",
   "main": "src/index.ts",
@@ -43,8 +43,8 @@
     "publish:npm": "npm publish"
   },
   "peerDependencies": {
-    "@idealyst/components": "^1.0.83",
-    "@idealyst/theme": "^1.0.83",
+    "@idealyst/components": "^1.0.84",
+    "@idealyst/theme": "^1.0.84",
     "@react-navigation/bottom-tabs": ">=7.0.0",
     "@react-navigation/drawer": ">=7.0.0",
     "@react-navigation/native": ">=7.0.0",
@@ -60,8 +60,15 @@
     "react-router-dom": ">=6.0.0"
   },
   "devDependencies": {
+    "@idealyst/components": "^1.0.84",
+    "@idealyst/datagrid": "^1.0.83",
+    "@idealyst/datepicker": "^1.0.83",
+    "@idealyst/theme": "^1.0.84",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
+    "react": "^19.1.0",
+    "react-native": "^0.80.1",
+    "react-native-unistyles": "^3.0.10",
     "react-router": "7.9.1",
     "typescript": "^5.0.0"
   },

package/src/context/NavigatorContext.native.tsx

@@ -1,10 +1,16 @@
-import React, { createContext, memo, useContext, useMemo } from 'react';
+import React, { createContext, memo, use, useContext, useMemo } from 'react';
 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<NavigatorContextValue>({
+    route: undefined,
+    navigate: () => {},
+});
+
+const DrawerNavigatorContext = createContext<NavigatorContextValue>({
+    route: undefined,
     navigate: () => {},
 });
 
@@ -77,7 +83,7 @@ const parseParameterizedPath = (path: string, rootRoute: any): { routeName: stri
 const UnwrappedNavigatorProvider = ({ route }: NavigatorProviderProps) => {
 
     const navigation = useNavigation();
-        
+
     const navigate = (params: NavigateParams) => {
         // Parse parameterized path for mobile
         const parsed = parseParameterizedPath(params.path, route);
@@ -94,9 +100,10 @@ const UnwrappedNavigatorProvider = ({ route }: NavigatorProviderProps) => {
         // Memoize the navigator to prevent unnecessary re-renders
         return memo(buildNavigator(route));
     }, [route]);
-     
+
     return (
-        <NavigatorContext.Provider value={{ 
+        <NavigatorContext.Provider value={{
+            route,
             navigate,
         }}>
             <RouteComponent />
@@ -116,9 +123,33 @@ const NavigatorProvider = ({ route }: NavigatorProviderProps) => {
     )
 };
 
-export { NavigatorProvider };
+const DrawerNavigatorProvider = ({ navigation, route, children }: { navigation: any, route: any, children: React.ReactNode }) => {
+
+    const navigate = (params: NavigateParams) => {
+        // 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
+        }
+    };
+
+    return (
+        <DrawerNavigatorContext.Provider value={{ navigate, route }}>
+            {children}
+        </DrawerNavigatorContext.Provider>
+    );
+};
+
+export { NavigatorProvider, DrawerNavigatorProvider };
 
 
 export const useNavigator = () => {
-  return useContext(NavigatorContext);
+  const drawerContext = useContext(DrawerNavigatorContext);
+  if (!drawerContext) {
+    return useContext(NavigatorContext)
+  }
+  return drawerContext;
 };

package/src/context/NavigatorContext.web.tsx

@@ -5,6 +5,7 @@ import { buildNavigator } from '../routing';
 
 const NavigatorContext = createContext<NavigatorContextValue>({
     navigate: () => {},
+    route: undefined,
 });
 
 export const NavigatorProvider = ({
@@ -40,7 +41,8 @@ export const NavigatorProvider = ({
     }, [route]);
     
     return (
-        <NavigatorContext.Provider value={{ 
+        <NavigatorContext.Provider value={{
+            route,
             navigate: navigateFunction,
         }}>
             <RouteComponent />

package/src/context/types.ts

@@ -10,11 +10,13 @@ export type NavigateParams = {
 
 export type NavigatorProviderProps = {
     route: NavigatorParam;
+    _overrideNavigation?: any; // Used in the drawer navigator which has to provide its own navigation object
 };
 
 /**
  * Context value that includes navigation function and current route parameters
  */
 export type NavigatorContextValue = {
+    route: NavigatorParam | undefined;
     navigate: (params: NavigateParams) => void;
 };

package/src/examples/CustomStackLayout.tsx

@@ -1,12 +1,10 @@
 import { Button, Text, View } from "@idealyst/components";
-import { StackLayoutProps } from "src";
+import { StackLayoutProps } from "../routing/types";
 import React, { useMemo } from "react";
 
 export default function CustomStackLayout({ 
     routes,
     options,
-    ContentComponent,
-    onNavigate,
     currentPath
 }: StackLayoutProps) {
 

package/src/examples/CustomTabLayout.tsx

@@ -1,15 +1,16 @@
 import React from "react";
 import { Button, View, Text, Pressable } from "@idealyst/components";
-import { RouteParam, TabBarScreenOptions, TabLayoutProps } from "src/routing";
+import { RouteParam, TabBarScreenOptions, TabLayoutProps } from "../routing";
+import { useNavigator } from "../context";
 
 export default function CustomTabLayout({
     routes,
     options,
-    ContentComponent,
-    onNavigate,
     currentPath
 }: TabLayoutProps) {
-    console.log(routes)
+
+    const navigator = useNavigator();
+
     return (
         <View>
             <View>
@@ -28,7 +29,7 @@ export default function CustomTabLayout({
                     <TabButton
                         key={route.path}
                         route={route}
-                        onNavigate={onNavigate}
+                        onNavigate={(path) => navigator.navigate({ path: route.fullPath })}
                         currentPath={currentPath}
                     />
                 ))}

package/src/examples/ExampleNavigationRouter.tsx

@@ -0,0 +1,111 @@
+import React from 'react';
+import { AvatarExamples, BadgeExamples, ButtonExamples, CardExamples, CheckboxExamples, DialogExamples, DividerExamples, IconExamples, InputExamples, PopoverExamples, ScreenExamples, SelectExamples, SliderExamples, SVGImageExamples, TextExamples, ViewExamples, ThemeExtensionExamples, SwitchExamples, RadioButtonExamples, ProgressExamples, TextAreaExamples, TabBarExamples, TooltipExamples, AccordionExamples, ListExamples, TableExamples, MenuExamples, ImageExamples, VideoExamples, AlertExamples, SkeletonExamples, ChipExamples, BreadcrumbExamples } from '@idealyst/components/examples';
+import { DataGridShowcase } from '@idealyst/datagrid/examples';
+import { DatePickerExamples } from '@idealyst/datepicker/examples';
+import { Text, View, Card, Screen } from '@idealyst/components';
+import { NavigatorParam, RouteParam } from '../routing';
+import { ExampleWebLayout } from './ExampleWebLayout';
+import ExampleSidebar from './ExampleSidebar';
+import HeaderRight from './HeaderRight';
+
+const HomeScreen = () => {
+    return (
+        <Screen>
+            <View spacing='lg' padding={12}>
+                <Text size="xl" weight="bold">
+                    Welcome to Idealyst Components
+                </Text>
+
+                <Card>
+                    <View spacing="md" style={{ padding: 16 }}>
+                        <Text size="lg" weight="semibold">
+                            Getting Started
+                        </Text>
+                        <Text>
+                            Explore the component library using the sidebar navigation. Each component includes examples
+                            and demonstrations of various props and configurations.
+                        </Text>
+                    </View>
+                </Card>
+
+                <Card>
+                    <View spacing="md" style={{ padding: 16 }}>
+                        <Text size="lg" weight="semibold">
+                            Features
+                        </Text>
+                        <View spacing="sm">
+                            <Text>• Cross-platform components for React and React Native</Text>
+                            <Text>• Comprehensive theming system with light/dark modes</Text>
+                            <Text>• High contrast accessibility support</Text>
+                            <Text>• Responsive design with Unistyles</Text>
+                            <Text>• Type-safe component APIs</Text>
+                        </View>
+                    </View>
+                </Card>
+
+                <Card>
+                    <View spacing="md" style={{ padding: 16 }}>
+                        <Text size="lg" weight="semibold">
+                            Theme Controls
+                        </Text>
+                        <Text>
+                            Use the theme controls in the header to switch between light/dark themes and
+                            toggle high contrast mode for better accessibility.
+                        </Text>
+                    </View>
+                </Card>
+            </View>
+        </Screen>
+    )
+};
+
+const ExampleNavigationRouter: NavigatorParam = {
+    path: "/",
+    type: 'navigator',
+    layout: 'drawer',
+    sidebarComponent: ExampleSidebar,
+    layoutComponent: ExampleWebLayout,
+    options: {
+        headerRight: HeaderRight,
+    },
+    routes: [
+        { path: "/", type: 'screen', component: HomeScreen, options: { title: "Home" } },
+        { path: "avatar", type: 'screen', component: AvatarExamples, options: { title: "Avatar" } },
+        { path: "badge", type: 'screen', component: BadgeExamples, options: { title: "Badge" } },
+        { path: "button", type: 'screen', component: ButtonExamples, options: { title: "Button" } },
+        { path: "card", type: 'screen', component: CardExamples, options: { title: "Card" } },
+        { path: "checkbox", type: 'screen', component: CheckboxExamples, options: { title: "Checkbox" } },
+        { path: "divider", type: 'screen', component: DividerExamples, options: { title: "Divider" } },
+        { path: "input", type: 'screen', component: InputExamples, options: { title: "Input" } },
+        { path: "text", type: 'screen', component: TextExamples, options: { title: "Text" } },
+        { path: "view", type: 'screen', component: ViewExamples, options: { title: "View" } },
+        { path: "screen", type: 'screen', component: ScreenExamples, options: { title: "Screen" } },
+        { path: "icon", type: 'screen', component: IconExamples, options: { title: "Icon" } },
+        { path: "svg-image", type: 'screen', component: SVGImageExamples, options: { title: "SVG Image" } },
+        { path: "dialog", type: 'screen', component: DialogExamples, options: { title: "Dialog" } },
+        { path: "popover", type: 'screen', component: PopoverExamples, options: { title: "Popover" } },
+        { path: "select", type: 'screen', component: SelectExamples, options: { title: "Select" } },
+        { path: "slider", type: 'screen', component: SliderExamples, options: { title: "Slider" } },
+        { path: "switch", type: 'screen', component: SwitchExamples, options: { title: "Switch" } },
+        { path: "radio-button", type: 'screen', component: RadioButtonExamples, options: { title: "Radio Button" } },
+        { path: "progress", type: 'screen', component: ProgressExamples, options: { title: "Progress" } },
+        { path: "textarea", type: 'screen', component: TextAreaExamples, options: { title: "Text Area" } },
+        { path: "tooltip", type: 'screen', component: TooltipExamples, options: { title: "Tooltip" } },
+        { path: "accordion", type: 'screen', component: AccordionExamples, options: { title: "Accordion" } },
+        { path: "menu", type: 'screen', component: MenuExamples, options: { title: "Menu" } },
+        { path: "list", type: 'screen', component: ListExamples, options: { title: "List" } },
+        { path: "table", type: 'screen', component: TableExamples, options: { title: "Table" } },
+        { path: "tabbar", type: 'screen', component: TabBarExamples, options: { title: "Tab Bar" } },
+        { path: "alert", type: 'screen', component: AlertExamples, options: { title: "Alert" } },
+        { path: "skeleton", type: 'screen', component: SkeletonExamples, options: { title: "Skeleton" } },
+        { path: "chip", type: 'screen', component: ChipExamples, options: { title: "Chip" } },
+        { path: "breadcrumb", type: 'screen', component: BreadcrumbExamples, options: { title: "Breadcrumb" } },
+        { path: "image", type: 'screen', component: ImageExamples, options: { title: "Image" } },
+        { path: "video", type: 'screen', component: VideoExamples, options: { title: "Video" } },
+        { path: "datagrid", type: 'screen', component: DataGridShowcase, options: { title: "Data Grid" } },
+        { path: "datepicker", type: 'screen', component: DatePickerExamples, options: { title: "Date Picker" } },
+        { path: "theme-extension", type: 'screen', component: ThemeExtensionExamples, options: { title: "Theme Extension" } },
+    ],
+};
+
+export default ExampleNavigationRouter;

package/src/examples/ExampleSearchDialog.tsx

@@ -0,0 +1,134 @@
+import React, { useState, useMemo } from 'react';
+import { Dialog, View, Text, Input, ListItem, List } from '@idealyst/components';
+import { useNavigator } from '../context';
+import type { IconName } from '@idealyst/components';
+
+// Icon mapping for routes
+const routeIcons: Record<string, IconName> = {
+    '/': 'home',
+    'button': 'gesture-tap',
+    'checkbox': 'checkbox-marked',
+    'input': 'form-textbox',
+    'radio-button': 'radiobox-marked',
+    'select': 'form-dropdown',
+    'slider': 'tune',
+    'switch': 'toggle-switch',
+    'textarea': 'note-text',
+    'accordion': 'chevron-down',
+    'alert': 'information',
+    'avatar': 'account-circle',
+    'badge': 'label',
+    'card': 'credit-card',
+    'chip': 'label',
+    'icon': 'emoticon',
+    'list': 'format-list-bulleted',
+    'skeleton': 'timer-sand-empty',
+    'text': 'format-text',
+    'divider': 'minus',
+    'screen': 'cellphone',
+    'view': 'view-compact',
+    'breadcrumb': 'chevron-right',
+    'tabbar': 'tab',
+    'dialog': 'picture-in-picture-bottom-right',
+    'menu': 'menu',
+    'popover': 'message',
+    'tooltip': 'help',
+    'progress': 'timer-sand-empty',
+    'image': 'image',
+    'svg-image': 'image',
+    'video': 'video',
+    'datagrid': 'grid',
+    'datepicker': 'calendar-today',
+    'table': 'table',
+    'theme-extension': 'palette',
+};
+
+// Get all routes recursively
+const getAllRoutes = (routes: any[]): Array<{ path: string; title: string; icon?: IconName }> => {
+    const result: Array<{ path: string; title: string; icon?: IconName }> = [];
+
+    routes.forEach((route) => {
+        if (route.type === 'screen' && route.options?.title) {
+            result.push({
+                path: route.path,
+                title: route.options.title,
+                icon: routeIcons[route.path],
+            });
+        }
+        if (route.routes) {
+            result.push(...getAllRoutes(route.routes));
+        }
+    });
+
+    return result;
+};
+
+interface ExampleSearchDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+}
+
+export default function ExampleSearchDialog({ open, onOpenChange }: ExampleSearchDialogProps) {
+    const [searchQuery, setSearchQuery] = useState('');
+    const navigator = useNavigator();
+
+    // Get all available pages
+    const allPages = useMemo(() => {
+        if (!navigator.route?.routes) return [];
+        return getAllRoutes(navigator.route.routes);
+    }, [navigator.route]);
+
+    // Filter pages based on search query
+    const filteredPages = useMemo(() => {
+        if (!searchQuery.trim()) return allPages;
+
+        const query = searchQuery.toLowerCase();
+        return allPages.filter((page) =>
+            page.title.toLowerCase().includes(query)
+        );
+    }, [searchQuery, allPages]);
+
+    const handleNavigate = (path: string) => {
+        navigator.navigate({ path: `/${path}` });
+        onOpenChange(false);
+        setSearchQuery('');
+    };
+
+    // Reset search when dialog closes
+    const handleOpenChange = (newOpen: boolean) => {
+        if (!newOpen) {
+            setSearchQuery('');
+        }
+        onOpenChange(newOpen);
+    };
+
+    return (
+        <Dialog open={open} onOpenChange={handleOpenChange} title='Search Pages'>
+            <View spacing='md'>
+                <Input
+                    placeholder='Search for a page...'
+                    value={searchQuery}
+                    onChangeText={setSearchQuery}
+                    leftIcon='magnify'
+                />
+                {filteredPages.length > 0 ? (
+                    <List scrollable maxHeight={400}>
+                        {filteredPages.map((page) => (
+                            <ListItem
+                                size='sm'
+                                key={page.path}
+                                label={page.title}
+                                leading={page.icon}
+                                onPress={() => handleNavigate(page.path)}
+                            />
+                        ))}
+                    </List>
+                ) : (
+                    <Text color='tertiary' style={{ textAlign: 'center', padding: 16 }}>
+                        No pages found
+                    </Text>
+                )}
+            </View>
+        </Dialog>
+    );
+}

package/src/examples/ExampleSidebar.tsx

@@ -0,0 +1,134 @@
+import { ListItem, View, Text, Divider, Screen, List } from "@idealyst/components";
+import { useNavigator } from "../context";
+import type { DrawerSidebarProps } from "../routing/types";
+
+interface ComponentGroup {
+    title: string;
+    items: Array<{
+        label: string;
+        path: string;
+        icon?: string;
+    }>;
+}
+
+const componentGroups: ComponentGroup[] = [
+    {
+        title: 'Form',
+        items: [
+            { label: 'Button', path: '/button', icon: 'gesture-tap' },
+            { label: 'Checkbox', path: '/checkbox', icon: 'checkbox-marked' },
+            { label: 'Input', path: '/input', icon: 'form-textbox' },
+            { label: 'RadioButton', path: '/radio-button', icon: 'radiobox-marked' },
+            { label: 'Select', path: '/select', icon: 'form-dropdown' },
+            { label: 'Slider', path: '/slider', icon: 'tune' },
+            { label: 'Switch', path: '/switch', icon: 'toggle-switch' },
+            { label: 'TextArea', path: '/textarea', icon: 'note-text' },
+        ],
+    },
+    {
+        title: 'Display',
+        items: [
+            { label: 'Accordion', path: '/accordion', icon: 'chevron-down' },
+            { label: 'Alert', path: '/alert', icon: 'information' },
+            { label: 'Avatar', path: '/avatar', icon: 'account-circle' },
+            { label: 'Badge', path: '/badge', icon: 'label' },
+            { label: 'Card', path: '/card', icon: 'credit-card' },
+            { label: 'Chip', path: '/chip', icon: 'label' },
+            { label: 'Icon', path: '/icon', icon: 'emoticon' },
+            { label: 'List', path: '/list', icon: 'format-list-bulleted' },
+            { label: 'Skeleton', path: '/skeleton', icon: 'timer-sand-empty' },
+            { label: 'Text', path: '/text', icon: 'format-text' },
+        ],
+    },
+    {
+        title: 'Layout',
+        items: [
+            { label: 'Divider', path: '/divider', icon: 'minus' },
+            { label: 'Screen', path: '/screen', icon: 'cellphone' },
+            { label: 'View', path: '/view', icon: 'view-compact' },
+        ],
+    },
+    {
+        title: 'Navigation',
+        items: [
+            { label: 'Breadcrumb', path: '/breadcrumb', icon: 'chevron-right' },
+            { label: 'TabBar', path: '/tabbar', icon: 'tab' },
+        ],
+    },
+    {
+        title: 'Overlay',
+        items: [
+            { label: 'Dialog', path: '/dialog', icon: 'picture-in-picture-bottom-right' },
+            { label: 'Menu', path: '/menu', icon: 'menu' },
+            { label: 'Popover', path: '/popover', icon: 'message' },
+            { label: 'Tooltip', path: '/tooltip', icon: 'help' },
+        ],
+    },
+    {
+        title: 'Feedback',
+        items: [
+            { label: 'Progress', path: '/progress', icon: 'timer-sand-empty' },
+        ],
+    },
+    {
+        title: 'Media',
+        items: [
+            { label: 'Image', path: '/image', icon: 'image' },
+            { label: 'SVG Image', path: '/svg-image', icon: 'image' },
+            { label: 'Video', path: '/video', icon: 'video' },
+        ],
+    },
+    {
+        title: 'Data',
+        items: [
+            { label: 'DataGrid', path: '/datagrid', icon: 'grid' },
+            { label: 'DatePicker', path: '/datepicker', icon: 'calendar-today' },
+            { label: 'Table', path: '/table', icon: 'table' },
+        ],
+    },
+    {
+        title: 'Theme',
+        items: [
+            { label: 'Theme Extension', path: '/theme-extension', icon: 'palette' },
+        ],
+    },
+];
+
+export default function ExampleSidebar({ insets }: DrawerSidebarProps) {
+    const navigator = useNavigator();
+
+    return (
+    <Screen
+            style={{
+                height: '100%',
+                padding: 16,
+            }}
+            contentInset={insets}
+        >
+        {componentGroups.map((group, groupIndex) => (
+            <List key={group.title}>
+                <Text
+                    size="sm"
+                    weight="bold"
+                    color="secondary"
+                    style={{ marginBottom: 8, marginLeft: 8 }}
+                >
+                    {group.title}
+                </Text>
+                {group.items.map((item) => (
+                    <ListItem
+                        key={item.path}
+                        label={item.label}
+                        leading={item.icon}
+                        size="sm"
+                        onPress={() => navigator.navigate({ path: item.path, vars: {} })}
+                    />
+                ))}
+                {groupIndex < componentGroups.length - 1 && (
+                    <Divider spacing="sm" style={{ marginTop: 8 }} />
+                )}
+            </List>
+        ))}
+        </Screen>
+    )
+}