@idealyst/navigation 1.0.83 → 1.0.84

package/src/examples/ExampleDrawerRouter.tsx

@@ -1,196 +0,0 @@
-import React from 'react';
-import { AvatarExamples, BadgeExamples, ButtonExamples, CardExamples, CheckboxExamples, DialogExamples, DividerExamples, IconExamples, InputExamples, PopoverExamples, SVGImageExamples, TextExamples, ViewExamples, ThemeExtensionExamples } from "../../../components/src/examples";
-import { DataGridShowcase } from "../../../datagrid/src/examples";
-import { DatePickerExamples } from "../../../datepicker/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 SVGImageDrawerScreen = () => (
-    <Screen>
-        <SVGImageExamples />
-    </Screen>
-);
-
-const DialogDrawerScreen = () => (
-    <Screen>
-        <DialogExamples />
-    </Screen>
-);
-
-const PopoverDrawerScreen = () => (
-    <Screen>
-        <PopoverExamples />
-    </Screen>
-);
-
-const DataGridDrawerScreen = () => (
-    <Screen>
-        <DataGridShowcase />
-    </Screen>
-);
-
-const DatePickerDrawerScreen = () => (
-    <Screen>
-        <DatePickerExamples />
-    </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: "svg-image", component: SVGImageDrawerScreen },
-        { path: "dialog", component: DialogDrawerScreen },
-        { path: "popover", component: PopoverDrawerScreen },
-        { path: "datagrid", component: DataGridDrawerScreen },
-        { path: "datepicker", component: DatePickerDrawerScreen },
-        { path: "theme-extension", component: ThemeExtensionDrawerScreen },
-    ],
-};
-
-export default DrawerRouter; 

package/src/examples/ExampleHybridRouter.tsx

@@ -1,62 +0,0 @@
-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

@@ -1,276 +0,0 @@
-import React from 'react';
-import { AvatarExamples, BadgeExamples, ButtonExamples, CardExamples, CheckboxExamples, DialogExamples, DividerExamples, IconExamples, InputExamples, PopoverExamples, ScreenExamples, SelectExamples, SVGImageExamples, TextExamples, ViewExamples, ThemeExtensionExamples } from "../../../components/src/examples";
-import { DataGridShowcase } from "../../../datagrid/src/examples";
-import { DatePickerExamples } from "../../../datepicker/src/examples";
-import { Button, Divider, Screen, Text, View } from "../../../components/src";
-import { useNavigator } from "../context";
-import { UnistylesRuntime } from 'react-native-unistyles';
-import { NavigatorParam, 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 123
-                    </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>
-                <Button
-                    onPress={() => {
-                        navigator.navigate({
-                            path: "/dialog",
-                            vars: {},
-                        });
-                    }}>
-                    Dialog
-                </Button>
-                <Button
-                    onPress={() => {
-                        navigator.navigate({
-                            path: "/popover",
-                            vars: {},
-                        });
-                    }}>
-                    Popover
-                </Button>
-                <Button
-                    onPress={() => {
-                        navigator.navigate({
-                            path: "/select",
-                            vars: {},
-                        });
-                    }}>
-                    Select
-                </Button>
-                
-                <Divider spacing="medium" />
-                <Text size="small" weight="semibold" color="secondary">Data Components</Text>
-                <Button
-                    variant="outlined"
-                    intent="neutral"
-                    onPress={() => {
-                        navigator.navigate({
-                            path: "/datagrid",
-                            vars: {},
-                        });
-                    }}>
-                    📊 DataGrid Showcase
-                </Button>
-                <Button
-                    variant="outlined"
-                    intent="neutral"
-                    onPress={() => {
-                        navigator.navigate({
-                            path: "/datepicker",
-                            vars: {},
-                        });
-                    }}>
-                    📅 DatePicker Examples
-                </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 StackRouter: NavigatorParam = {
-    path: "/",
-    type: 'navigator',
-    layout: 'stack',
-    routes: [
-        { 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: "select", type: 'screen', component: SelectExamples},
-        { path: "datagrid", type: 'screen', component: DataGridShowcase},
-        { path: "datepicker", type: 'screen', component: DatePickerExamples},
-        { path: "theme-extension", type: 'screen', component: ThemeExtensionExamples},
-    ],
-};
-
-export default StackRouter;