@idealyst/navigation 1.0.0

package/package.json

@@ -0,0 +1,76 @@
+{
+  "name": "@idealyst/navigation",
+  "version": "1.0.0",
+  "description": "Cross-platform navigation library for React and React Native",
+  "main": "src/index.ts",
+  "module": "src/index.ts",
+  "types": "src/index.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/your-username/idealyst-framework.git",
+    "directory": "packages/navigation"
+  },
+  "author": "Nicholas Mercier <nicho.mercier@gmail.com>",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "import": "./src/index.ts",
+      "require": "./src/index.ts",
+      "types": "./src/index.ts"
+    },
+    "./examples": {
+      "import": "./src/examples/index.ts",
+      "require": "./src/examples/index.ts",
+      "types": "./src/examples/index.ts"
+    },
+    "./examples/unistyles": {
+      "import": "./src/examples/unistyles.ts",
+      "require": "./src/examples/unistyles.ts",
+      "types": "./src/examples/unistyles.ts"
+    }
+  },
+  "scripts": {
+    "build": "rollup -c",
+    "dev": "rollup -c -w",
+    "prepublishOnly": "echo 'Publishing TypeScript source directly'",
+    "publish:npm": "npm publish"
+  },
+  "dependencies": {
+    "@idealyst/components": "^1.0.0"
+  },
+  "peerDependencies": {
+    "@react-navigation/bottom-tabs": "^7.0.0",
+    "@react-navigation/drawer": "^7.0.0",
+    "@react-navigation/native": "^7.0.0",
+    "@react-navigation/native-stack": "^7.0.0",
+    "react": ">=16.8.0",
+    "react-native": ">=0.60.0",
+    "react-native-gesture-handler": "*",
+    "react-native-reanimated": "*",
+    "react-native-safe-area-context": "*",
+    "react-native-screens": "*",
+    "react-native-unistyles": "3.0.0-rc.5",
+    "react-router": "^7.6.3",
+    "react-router-dom": "^7.6.3"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "rollup": "^3.20.0",
+    "rollup-plugin-typescript2": "^0.34.0",
+    "typescript": "^5.0.0"
+  },
+  "files": [
+    "src"
+  ],
+  "keywords": [
+    "react",
+    "react-native",
+    "navigation",
+    "cross-platform",
+    "router"
+  ]
+}

package/src/context/NavigatorContext.native.tsx

@@ -0,0 +1,51 @@
+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 { useUnistyles } from 'react-native-unistyles';
+
+const NavigatorContext = createContext<{
+    navigate: (params: NavigateParams) => void;
+}>({
+    navigate: () => {},
+});
+
+const UnwrappedNavigatorProvider = ({ route }: NavigatorProviderProps) => {
+
+    const navigation = useNavigation();
+        
+    const navigate = (params: NavigateParams) => {
+        console.log('navigate', params);
+        navigation.navigate(params.path as never);
+    };
+
+    const RouteComponent = useMemo(() => {
+        // Memoize the router to prevent unnecessary re-renders
+        return memo(buildRouter(route));
+    }, [route]);
+     
+    return (
+        <NavigatorContext.Provider value={{ navigate }}>
+            <RouteComponent />
+        </NavigatorContext.Provider>
+    )
+};
+
+const NavigatorProvider = ({ route }: NavigatorProviderProps) => {
+    const {rt} = useUnistyles()
+    
+    const isDarkMode = rt.themeName === 'dark';
+
+    return (
+        <NavigationContainer theme={isDarkMode ? DarkTheme : DefaultTheme}>
+            <UnwrappedNavigatorProvider route={route} />
+        </NavigationContainer>
+    )
+};
+
+export { NavigatorProvider };
+
+
+export const useNavigator = () => {
+  return useContext(NavigatorContext);
+};

package/src/context/NavigatorContext.web.tsx

@@ -0,0 +1,37 @@
+import React, { createContext, memo, useContext, useMemo } from 'react';
+import { NavigateParams, NavigatorProviderProps } from './types';
+import { useNavigate } from "react-router-dom";
+import { buildRouter } from '../routing';
+
+const NavigatorContext = createContext<{
+    navigate: (params: NavigateParams) => void;
+}>({
+    navigate: () => {},
+});
+
+export const NavigatorProvider = ({ 
+    route,
+}: NavigatorProviderProps) => {
+    const routerNavigate = useNavigate();
+    
+    const navigateFunction = (params: NavigateParams) => {
+        if (params.path) {
+            routerNavigate(params.path);
+        }
+    };
+    
+    const RouteComponent = useMemo(() => {
+        // Memoize the router to prevent unnecessary re-renders
+        return memo(buildRouter(route));
+    }, [route]);
+    
+    return (
+        <NavigatorContext.Provider value={{ navigate: navigateFunction }}>
+            <RouteComponent />
+        </NavigatorContext.Provider>
+    );
+};
+
+export const useNavigator = () => {
+    return useContext(NavigatorContext);
+}; 

package/src/context/index.native.ts

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

package/src/context/index.ts

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

package/src/context/index.web.ts

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

package/src/context/types.ts

@@ -0,0 +1,13 @@
+import { RouteParam } from "../routing";
+
+/**
+ * When navigating to a new route, specify the path and the variables to be used in the route.
+ */
+export type NavigateParams = {
+    path: string;
+    vars: Record<string, string>;
+};
+
+export type NavigatorProviderProps = {
+    route: RouteParam;
+};

package/src/examples/ExampleDrawerRouter.tsx

@@ -0,0 +1,159 @@
+import React from 'react';
+import { AvatarExamples, BadgeExamples, ButtonExamples, CardExamples, CheckboxExamples, DividerExamples, IconExamples, InputExamples, TextExamples, ViewExamples, ThemeExtensionExamples } from "../../../components/src/examples";
+import { Screen, Text, View, Button } from "../../../components/src";
+import { UnistylesRuntime } from 'react-native-unistyles';
+import { RouteParam } from '../routing';
+import { getNextTheme, getThemeDisplayName, isHighContrastTheme } from './unistyles';
+
+const HomeDrawerScreen = () => {
+    const currentTheme = UnistylesRuntime.themeName || 'light';
+    
+    const cycleTheme = () => {
+        const nextTheme = getNextTheme(currentTheme);
+        UnistylesRuntime.setTheme(nextTheme as any);
+        console.log('Theme changed to:', nextTheme);
+    };
+
+    const toggleHighContrast = () => {
+        const currentTheme = UnistylesRuntime.themeName || 'light';
+        let newTheme: string;
+        
+        if (isHighContrastTheme(currentTheme)) {
+            // Switch to standard variant
+            newTheme = currentTheme.includes('dark') ? 'dark' : 'light';
+        } else {
+            // Switch to high contrast variant
+            newTheme = currentTheme.includes('dark') ? 'darkHighContrast' : 'lightHighContrast';
+        }
+        
+        UnistylesRuntime.setTheme(newTheme as any);
+        console.log('Theme toggled to:', newTheme);
+    };
+    
+    return (
+        <Screen>
+            <View style={{ gap: 16 }}>
+                <Text size="large" weight="bold">
+                    Welcome to the Component Library
+                </Text>
+                <Text size="medium">
+                    Use the drawer menu to explore different components
+                </Text>
+                
+                <View style={{ gap: 12, padding: 16, backgroundColor: 'rgba(128, 128, 128, 0.1)', borderRadius: 8, marginTop: 8 }}>
+                    <Text size="medium" weight="semibold">
+                        Theme Controls
+                    </Text>
+                    <Text size="small">
+                        Current Theme: {getThemeDisplayName(currentTheme)}
+                    </Text>
+                    
+                    <View style={{ gap: 8 }}>
+                        <Button variant="outlined" onPress={cycleTheme}>
+                            🔄 Cycle Theme (Light → Dark → Light HC → Dark HC)
+                        </Button>
+                        
+                        <Button variant="outlined" onPress={toggleHighContrast}>
+                            ♿ Toggle High Contrast
+                        </Button>
+                    </View>
+                    
+                    {isHighContrastTheme(currentTheme) && (
+                        <Text size="small" style={{ fontStyle: 'italic' }}>
+                            ♿ High contrast mode is active for better accessibility
+                        </Text>
+                    )}
+                </View>
+            </View>
+        </Screen>
+    );
+};
+
+const AvatarDrawerScreen = () => (
+    <Screen>
+        <AvatarExamples />
+    </Screen>
+);
+
+const BadgeDrawerScreen = () => (
+    <Screen>
+        <BadgeExamples />
+    </Screen>
+);
+
+const ButtonDrawerScreen = () => (
+    <Screen>
+        <ButtonExamples />
+    </Screen>
+);
+
+const CardDrawerScreen = () => (
+    <Screen>
+        <CardExamples />
+    </Screen>
+);
+
+const CheckboxDrawerScreen = () => (
+    <Screen>
+        <CheckboxExamples />
+    </Screen>
+);
+
+const DividerDrawerScreen = () => (
+    <Screen>
+        <DividerExamples />
+    </Screen>
+);
+
+const InputDrawerScreen = () => (
+    <Screen>
+        <InputExamples />
+    </Screen>
+);
+
+const TextDrawerScreen = () => (
+    <Screen>
+        <TextExamples />
+    </Screen>
+);
+
+const ViewDrawerScreen = () => (
+    <Screen>   
+        <ViewExamples />
+    </Screen>
+);
+
+const IconDrawerScreen = () => (
+    <Screen>
+        <IconExamples />
+    </Screen>
+);
+
+const ThemeExtensionDrawerScreen = () => (
+    <Screen>
+        <ThemeExtensionExamples />
+    </Screen>
+);
+
+const DrawerRouter: RouteParam = {
+    path: "/",
+    component: HomeDrawerScreen,
+    layout: {
+        type: "drawer",
+    },
+    routes: [
+        { path: "avatar", component: AvatarDrawerScreen },
+        { path: "badge", component: BadgeDrawerScreen },
+        { path: "button", component: ButtonDrawerScreen },
+        { path: "card", component: CardDrawerScreen },
+        { path: "checkbox", component: CheckboxDrawerScreen },
+        { path: "divider", component: DividerDrawerScreen },
+        { path: "input", component: InputDrawerScreen },
+        { path: "text", component: TextDrawerScreen },
+        { path: "view", component: ViewDrawerScreen },
+        { path: "icon", component: IconDrawerScreen },
+        { path: "theme-extension", component: ThemeExtensionDrawerScreen },
+    ],
+};
+
+export default DrawerRouter; 

package/src/examples/ExampleStackRouter.tsx

@@ -0,0 +1,245 @@
+import React, { useState } from 'react';
+import { AvatarExamples, BadgeExamples, ButtonExamples, CardExamples, CheckboxExamples, DividerExamples, IconExamples, InputExamples, ScreenExamples, TextExamples, ViewExamples, ThemeExtensionExamples } from "../../../components/src/examples";
+import { Button, Divider, Screen, Text, View } from "../../../components/src";
+import { useNavigator } from "../context";
+import { UnistylesRuntime, StyleSheet } from 'react-native-unistyles';
+import { GeneralLayout } from '../layouts/GeneralLayout';
+import { RouteParam } from '../routing';
+import { getNextTheme, getThemeDisplayName, isHighContrastTheme } from './unistyles';
+
+const HomeScreen = () => {
+    const navigator = useNavigator();
+    const currentTheme = UnistylesRuntime.themeName || 'light';
+
+    const cycleTheme = () => {
+        const nextTheme = getNextTheme(currentTheme);
+        UnistylesRuntime.setTheme(nextTheme as any);
+        console.log('Theme changed to:', nextTheme);
+    };
+
+    const toggleHighContrast = () => {
+        const currentTheme = UnistylesRuntime.themeName || 'light';
+        let newTheme: string;
+        
+        if (isHighContrastTheme(currentTheme)) {
+            // Switch to standard variant
+            newTheme = currentTheme.includes('dark') ? 'dark' : 'light';
+        } else {
+            // Switch to high contrast variant
+            newTheme = currentTheme.includes('dark') ? 'darkHighContrast' : 'lightHighContrast';
+        }
+        
+        UnistylesRuntime.setTheme(newTheme as any);
+        console.log('Theme toggled to:', newTheme);
+    };
+
+    return (
+        <Screen>
+            <View style={{ maxWidth: 800, width: '100%', gap: 10, marginHorizontal: 'auto' }}>
+            {/* Theme Controls Section */}
+            <View style={{ gap: 12, padding: 16, backgroundColor: 'rgba(128, 128, 128, 0.1)', borderRadius: 8 }}>
+                <Text size="medium" weight="bold">
+                    Theme Controls
+                </Text>
+                <Text size="small">
+                    Current Theme: {getThemeDisplayName(currentTheme)}
+                </Text>
+                
+                <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap' }}>
+                    <Button
+                        variant="outlined"
+                        intent="primary"
+                        size="medium"
+                        onPress={cycleTheme}
+                    >
+                        🔄 Cycle Theme
+                    </Button>
+                    
+                    <Button
+                        variant="outlined"
+                        intent="neutral"
+                        size="medium"
+                        onPress={toggleHighContrast}
+                    >
+                        ♿ Toggle High Contrast
+                    </Button>
+                </View>
+                
+                {isHighContrastTheme(currentTheme) && (
+                    <Text size="small" style={{ fontStyle: 'italic', color: '#666' }}>
+                        ♿ High contrast mode is active for better accessibility
+                    </Text>
+                )}
+            </View>
+
+            {/* Component Navigation Buttons */}
+            <View style={{ gap: 10 }}>
+                <Button
+                    onPress={() => {
+                    navigator.navigate({
+                        path: "/avatar",
+                        vars: {},
+                    });
+                }}>
+                    Avatar
+                </Button>
+                <Button
+                    onPress={() => {
+                        navigator.navigate({
+                            path: "/badge",
+                            vars: {},
+                        });
+                    }}>
+                    Badge
+                </Button>
+                <Button
+                    onPress={() => {
+                        navigator.navigate({
+                            path: "/button",
+                            vars: {},
+                        });
+                    }}>
+                    Button
+                </Button>
+                <Button
+                    onPress={() => {
+                        navigator.navigate({
+                            path: "/card",
+                            vars: {},
+                        });
+                    }}>
+                    Card
+                </Button>
+                <Button
+                    onPress={() => {
+                        navigator.navigate({
+                            path: "/checkbox",
+                            vars: {},
+                        });
+                    }}>
+                    Checkbox
+                </Button>
+                <Button
+                    onPress={() => {
+                        navigator.navigate({
+                            path: "/divider",
+                            vars: {},
+                        });
+                    }}>
+                    Divider
+                </Button>
+                <Button
+                    onPress={() => {
+                        navigator.navigate({
+                            path: "/input",
+                            vars: {},
+                        });
+                    }}>
+                    Input
+                </Button>
+                <Button
+                    onPress={() => {
+                        navigator.navigate({
+                            path: "/text",
+                            vars: {},
+                        });
+                    }}>
+                    Text
+                </Button>
+                <Button
+                    onPress={() => {
+                        navigator.navigate({
+                            path: "/view",
+                            vars: {},
+                        });
+                    }}>
+                    View
+                </Button>
+                <Button
+                    onPress={() => {
+                        navigator.navigate({
+                            path: "/screen",
+                            vars: {},
+                        });
+                    }}>
+                    Screen
+                </Button>
+                <Button
+                    onPress={() => {
+                        navigator.navigate({
+                            path: "/icon",
+                            vars: {},
+                        });
+                    }}>
+                    Icon
+                </Button>
+                
+                <Divider spacing="medium" />
+                <Text size="small" weight="semibold" color="secondary">Theme System</Text>
+                <Button
+                    variant="outlined"
+                    intent="success"
+                    onPress={() => {
+                        navigator.navigate({
+                            path: "/theme-extension",
+                            vars: {},
+                        });
+                    }}>
+                    🎨 Theme Extension Demo
+                </Button>
+            </View>
+            </View>
+        </Screen>
+    )
+};
+
+const WrappedGeneralLayout = (props: any) => {
+
+    const navigator = useNavigator();
+
+    return (
+        <GeneralLayout
+            header={{
+                content: <Text style={{ marginHorizontal: 'auto' }} color="inverse">Stack Router Demo App</Text>,
+            }}
+            sidebar={{
+                enabled: true,
+                collapsible: true,
+                position: 'left',
+                initiallyExpanded: false,
+                content: <Button onPress={() => {
+                    navigator.navigate({
+                        path: "/",
+                        vars: {},
+                    });
+                }}>Home</Button>,
+            }}
+            {...props}>
+        </GeneralLayout>
+    )
+}
+
+const StackRouter: RouteParam = {
+    path: "/",
+    component: HomeScreen,
+    layout: {
+        type: "stack",
+        component: WrappedGeneralLayout,
+    },
+    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: "theme-extension", component: ThemeExtensionExamples},
+    ],
+};
+
+export default StackRouter;