ncore-ui-kit/example/src/navigation/index.tsx

import {
    useEffect
} from "react";
import {
    Platform,
    View
} from "react-native";
import type RootStackParamList from "./type";
import stylesheet from "./stylesheet";
import {
    NCoreUIKitEmbeddedMenu,
    NCoreUIKitLocalize,
    NCoreUIKitTheme,
    PaletteSwitcher,
    LocaleSwitcher,
    ThemeSwitcher,
    MainHeader
} from "ncore-ui-kit";
import {
    type LinkingOptions,
    NavigationContainer,
    getStateFromPath,
    useNavigation
} from "@react-navigation/native";
import TypesOverridePage from "../pages/coreFeatures/typesOverride";
import {
    type NativeStackNavigationProp,
    createNativeStackNavigator
} from "@react-navigation/native-stack";
import {
    ComponentIcon,
    SettingsIcon,
    GoalIcon,
    HomeIcon
} from "lucide-react-native";
import NotificationIndicatorPage from "../pages/components/notificationIndicator";
import HighlightButtonPage from "../pages/components/highlightButton";
import PaletteSwitcherPage from "../pages/components/paletteSwitcher";
import LocaleExamplesPage from "../pages/coreFeatures/localeExamples";
import DateTimePickerPage from "../pages/components/dateTimePicker";
import LocaleSwitcherPage from "../pages/components/localeSwitcher";
import MarkdownViewerPage from "../pages/components/markdownViewer";
import ThemeExamplesPage from "../pages/coreFeatures/themeExamples";
import DateTimeSheetPage from "../pages/components/dateTimeSheet";
import MonthSelectorPage from "../pages/components/monthSelector";
import PageContainerPage from "../pages/components/pageContainer";
import TextAreaInputPage from "../pages/components/textAreaInput";
import ThemeSwitcherPage from "../pages/components/themeSwitcher";
import DateSelectorPage from "../pages/components/dateSelector";
import EmbeddedMenuPage from "../pages/components/embeddedMenu";
import NumericInputPage from "../pages/components/numericInput";
import TimeSelectorPage from "../pages/components/timeSelector";
import WebScrollbarPage from "../pages/components/webScrollbar";
import YearSelectorPage from "../pages/components/yearSelector";
import AvatarGroupPage from "../pages/components/avatarGroup";
import BottomSheetPage from "../pages/components/bottomSheet";
import RadioButtonPage from "../pages/components/radioButton";
import SelectSheetPage from "../pages/components/selectSheet";
import ToolsUsagePage from "../pages/coreFeatures/toolsUsage";
import CodeViewerPage from "../pages/components/codeViewer";
import MainHeaderPage from "../pages/components/mainHeader";
import SelectBoxPage from "../pages/components/selectBox";
import SeperatorPage from "../pages/components/seperator";
import StateCardPage from "../pages/components/stateCard";
import TextInputPage from "../pages/components/textInput";
import ImplementationPage from "../pages/implementation";
import CheckBoxPage from "../pages/components/checkBox";
import SiteLogoPage from "../pages/components/siteLogo";
import SnackBarPage from "../pages/components/snackBar";
import LoadingPage from "../pages/components/loading";
import RowCardPage from "../pages/components/rowCard";
import StickerPage from "../pages/components/sticker";
import InstallationPage from "../pages/installation";
import AvatarPage from "../pages/components/avatar";
import ButtonPage from "../pages/components/button";
import DialogPage from "../pages/components/dialog";
import HeaderPage from "../pages/components/header";
import SwitchPage from "../pages/components/switch";
import ModalPage from "../pages/components/modal";
import ToastPage from "../pages/components/toast";
import ChipPage from "../pages/components/chip";
import MenuPage from "../pages/components/menu";
import TextPage from "../pages/components/text";
import Home from "../pages/home";

const RootStack = createNativeStackNavigator();
const ComponentsStack = createNativeStackNavigator();
const GettingStartedStack = createNativeStackNavigator();
const CoreFeaturesStack = createNativeStackNavigator();

const CoreFeaturesNav = () => {
    return <CoreFeaturesStack.Navigator
        initialRouteName="ToolsUsage"
        screenOptions={{
            headerShown: true
        }}
    >
        <CoreFeaturesStack.Screen
            component={ToolsUsagePage}
            name="ToolsUsage"
        />
        <CoreFeaturesStack.Screen
            component={ThemeExamplesPage}
            name="ThemeExamples"
        />
        <CoreFeaturesStack.Screen
            component={LocaleExamplesPage}
            name="LocaleExamples"
        />
        <CoreFeaturesStack.Screen
            component={TypesOverridePage}
            name="TypesOverride"
        />
    </CoreFeaturesStack.Navigator>;
};

const GettingStartedNav = () => {
    return <GettingStartedStack.Navigator
        initialRouteName="Installation"
        screenOptions={{
            headerShown: true
        }}
    >
        <GettingStartedStack.Screen
            component={InstallationPage}
            name="Installation"
        />
        <GettingStartedStack.Screen
            component={ImplementationPage}
            name="Implementation"
        />
    </GettingStartedStack.Navigator>;
};

const ComponentsNav = () => {
    return <ComponentsStack.Navigator
        initialRouteName="Text"
        screenOptions={{
            headerShown: true
        }}
    >
        <ComponentsStack.Screen
            component={AvatarPage}
            name="Avatar"
        />
        <ComponentsStack.Screen
            component={AvatarGroupPage}
            name="AvatarGroup"
        />
        <ComponentsStack.Screen
            component={BottomSheetPage}
            name="BottomSheet"
        />
        <ComponentsStack.Screen
            component={ButtonPage}
            name="Button"
        />
        <ComponentsStack.Screen
            component={CheckBoxPage}
            name="CheckBox"
        />
        <ComponentsStack.Screen
            component={CodeViewerPage}
            name="CodeViewer"
        />
        <ComponentsStack.Screen
            component={ChipPage}
            name="Chip"
        />
        <ComponentsStack.Screen
            component={DateSelectorPage}
            name="DateSelector"
        />
        <ComponentsStack.Screen
            component={DateTimePickerPage}
            name="DateTimePicker"
        />
        <ComponentsStack.Screen
            component={DateTimeSheetPage}
            name="DateTimeSheet"
        />
        <ComponentsStack.Screen
            component={DialogPage}
            name="Dialog"
        />
        <ComponentsStack.Screen
            component={EmbeddedMenuPage}
            name="EmbeddedMenu"
        />
        <ComponentsStack.Screen
            component={HeaderPage}
            name="Header"
        />
        <ComponentsStack.Screen
            component={HighlightButtonPage}
            name="HighlightButton"
        />
        <ComponentsStack.Screen
            component={LoadingPage}
            name="Loading"
        />
        <ComponentsStack.Screen
            component={LocaleSwitcherPage}
            name="LocaleSwitcher"
        />
        <ComponentsStack.Screen
            component={MainHeaderPage}
            name="MainHeader"
        />
        <ComponentsStack.Screen
            component={MarkdownViewerPage}
            name="MarkdownViewer"
        />
        <ComponentsStack.Screen
            component={MenuPage}
            name="Menu"
        />
        <ComponentsStack.Screen
            component={ModalPage}
            name="Modal"
        />
        <ComponentsStack.Screen
            component={MonthSelectorPage}
            name="MonthSelector"
        />
        <ComponentsStack.Screen
            component={NotificationIndicatorPage}
            name="NotificationIndicator"
        />
        <ComponentsStack.Screen
            component={NumericInputPage}
            name="NumericInput"
        />
        <ComponentsStack.Screen
            component={PageContainerPage}
            name="PageContainer"
        />
        <ComponentsStack.Screen
            component={PaletteSwitcherPage}
            name="PaletteSwitcher"
        />
        <ComponentsStack.Screen
            component={RadioButtonPage}
            name="RadioButton"
        />
        <ComponentsStack.Screen
            component={RowCardPage}
            name="RowCard"
        />
        <ComponentsStack.Screen
            component={SelectBoxPage}
            name="SelectBox"
        />
        <ComponentsStack.Screen
            component={SelectSheetPage}
            name="SelectSheet"
        />
        <ComponentsStack.Screen
            component={SeperatorPage}
            name="Seperator"
        />
        <ComponentsStack.Screen
            component={SiteLogoPage}
            name="SiteLogo"
        />
        <ComponentsStack.Screen
            component={SnackBarPage}
            name="SnackBar"
        />
        <ComponentsStack.Screen
            component={StateCardPage}
            name="StateCard"
        />
        <ComponentsStack.Screen
            component={StickerPage}
            name="Sticker"
        />
        <ComponentsStack.Screen
            component={SwitchPage}
            name="Switch"
        />
        <ComponentsStack.Screen
            component={TextPage}
            name="Text"
        />
        <ComponentsStack.Screen
            component={TextAreaInputPage}
            name="TextAreaInput"
        />
        <ComponentsStack.Screen
            component={TextInputPage}
            name="TextInput"
        />
        <ComponentsStack.Screen
            component={ThemeSwitcherPage}
            name="ThemeSwitcher"
        />
        <ComponentsStack.Screen
            component={TimeSelectorPage}
            name="TimeSelector"
        />
        <ComponentsStack.Screen
            component={ToastPage}
            name="Toast"
        />
        <ComponentsStack.Screen
            component={WebScrollbarPage}
            name="WebScrollbar"
        />
        <ComponentsStack.Screen
            component={YearSelectorPage}
            name="YearSelector"
        />
    </ComponentsStack.Navigator>;
};

const RenderHomeIcon = ({
    color
}: {
    color: keyof NCoreUIKit.IconContentColors;
}) => {
    const {
        colors
    } = NCoreUIKitTheme.useContext();

    return <HomeIcon
        color={colors.content.icon[color]}
    />;
};

const RenderComponentIcon = ({
    color
}: {
    color: keyof NCoreUIKit.IconContentColors;
}) => {
    const {
        colors
    } = NCoreUIKitTheme.useContext();

    return <ComponentIcon
        color={colors.content.icon[color]}
    />;
};

const RenderGettingStartedIcon = ({
    color
}: {
    color: keyof NCoreUIKit.IconContentColors;
}) => {
    const {
        colors
    } = NCoreUIKitTheme.useContext();

    return <GoalIcon
        color={colors.content.icon[color]}
    />;
};

const RenderCoreFeaturesIcon = ({
    color
}: {
    color: keyof NCoreUIKit.IconContentColors;
}) => {
    const {
        colors
    } = NCoreUIKitTheme.useContext();

    return <SettingsIcon
        color={colors.content.icon[color]}
    />;
};

const RootNav = () => {
    const {
        activeTheme,
        spaces
    } = NCoreUIKitTheme.useContext();

    const {
        localize
    } = NCoreUIKitLocalize.useContext();

    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();

    useEffect(() => {
        const currentMenuStatus = Platform.OS === "web" ? window.localStorage.getItem("main-menu-status") : "false";

        NCoreUIKitEmbeddedMenu.load({
            isCollapse: currentMenuStatus === "true" ? true : false,
            isWorkWithSafeAreaView: false,
            siteLogoProps: {
                isShowIcon: false,
                title: localize("menu")
            },
            buttons: [
                {
                    redirectMain: "Home",
                    isUseLocalize: true,
                    title: "home",
                    icon: ({
                        color
                    }) => <RenderHomeIcon
                        color={color}
                    />
                },
                {
                    redirectMain: "GettingStarted",
                    isCollapsible: true,
                    title: "gettingStarted",
                    isUseLocalize: true,
                    icon: ({
                        color
                    }) => <RenderGettingStartedIcon
                        color={color}
                    />,
                    subButtons: [
                        {
                            redirectMain: "GettingStarted",
                            redirectSub: "Installation",
                            title: "installation",
                            isUseLocalize: true
                        },
                        {
                            redirectMain: "GettingStarted",
                            redirectSub: "Implementation",
                            title: "implementation",
                            isUseLocalize: true
                        }
                    ]
                },
                {
                    redirectMain: "CoreFeatures",
                    isCollapsible: true,
                    title: "coreFeatures",
                    isUseLocalize: true,
                    icon: ({
                        color
                    }) => <RenderCoreFeaturesIcon
                        color={color}
                    />,
                    subButtons: [
                        {
                            redirectMain: "CoreFeatures",
                            redirectSub: "ToolsUsage",
                            title: "toolsUsage",
                            isUseLocalize: true
                        },
                        {
                            redirectMain: "CoreFeatures",
                            redirectSub: "ThemeExamples",
                            title: "themeExamples",
                            isUseLocalize: true
                        },
                        {
                            redirectMain: "CoreFeatures",
                            redirectSub: "LocaleExamples",
                            title: "localeExamples",
                            isUseLocalize: true
                        },
                        {
                            redirectMain: "CoreFeatures",
                            redirectSub: "TypesOverride",
                            title: "typesOverride",
                            isUseLocalize: true
                        }
                    ]
                },
                {
                    redirectMain: "Components",
                    isUseLocalize: true,
                    isCollapsible: true,
                    title: "components",
                    icon: ({
                        color
                    }) => <RenderComponentIcon
                        color={color}
                    />,
                    subButtons: [
                        {
                            redirectMain: "Components",
                            redirectSub: "Text",
                            title: "Text"
                        },
                        {
                            redirectMain: "Components",
                            redirectSub: "Button",
                            title: "Button"
                        },
                        {
                            redirectMain: "Components",
                            redirectSub: "HighlightButton",
                            title: "HighlightButton"
                        },
                        {
                            redirectMain: "Components",
                            redirectSub: "TextInput",
                            title: "TextInput"
                        },
                        {
                            redirectMain: "Components",
                            redirectSub: "TextAreaInput",
                            title: "TextAreaInput"
                        },
                        {
                            redirectMain: "Components",
                            redirectSub: "NumericInput",
                            title: "NumericInput"
                        },
                        {
                            redirectMain: "Components",
                            redirectSub: "SelectBox",
                            title: "SelectBox"
                        },
                        {
                            redirectMain: "Components",
                            redirectSub: "SelectSheet",
                            title: "SelectSheet"
                        },
                        {
                            redirectMain: "Components",
                            redirectSub: "CheckBox",
                            title: "CheckBox"
                        },
                        {
                            redirectMain: "Components",
                            redirectSub: "RadioButton",
                            title: "RadioButton"
                        },
                        {
                            redirectMain: "Components",
                            redirectSub: "Switch",
                            title: "Switch"
                        },
                        {
                            redirectMain: "Components",
                            redirectSub: "DateTimePicker",
                            title: "DateTimePicker"
                        },
                        {
                            redirectMain: "Components",
                            redirectSub: "DateTimeSheet",
                            title: "DateTimeSheet"
                        },
                        {
                            redirectMain: "Components",
                            redirectSub: "DateSelector",
                            title: "DateSelector"
                        },
                        {
                            redirectMain: "Components",
                            redirectSub: "TimeSelector",
                            title: "TimeSelector"
                        },
                        {
                            redirectMain: "Components",
                            redirectSub: "MonthSelector",
                            title: "MonthSelector"
                        },
                        {
                            redirectMain: "Components",
                            redirectSub: "YearSelector",
                            title: "YearSelector"
                        },
                        {
                            redirectMain: "Components",
                            redirectSub: "Avatar",
                            title: "Avatar"
                        },
                        {
                            redirectMain: "Components",
                            redirectSub: "AvatarGroup",
                            title: "AvatarGroup"
                        },
                        {
                            redirectMain: "Components",
                            redirectSub: "CodeViewer",
                            title: "CodeViewer"
                        },
                        {
                            redirectMain: "Components",
                            redirectSub: "Chip",
                            title: "Chip"
                        },
                        {
                            redirectMain: "Components",
                            redirectSub: "Sticker",
                            title: "Sticker"
                        },
                        {
                            redirectMain: "Components",
                            redirectSub: "RowCard",
                            title: "RowCard"
                        },
                        {
                            redirectMain: "Components",
                            redirectSub: "StateCard",
                            title: "StateCard"
                        },
                        {
                            redirectMain: "Components",
                            redirectSub: "Dialog",
                            title: "Dialog"
                        },
                        {
                            redirectMain: "Components",
                            redirectSub: "Modal",
                            title: "Modal"
                        },
                        {
                            redirectMain: "Components",
                            redirectSub: "BottomSheet",
                            title: "BottomSheet"
                        },
                        {
                            redirectMain: "Components",
                            redirectSub: "SnackBar",
                            title: "SnackBar"
                        },
                        {
                            redirectMain: "Components",
                            redirectSub: "Toast",
                            title: "Toast"
                        },
                        {
                            redirectMain: "Components",
                            redirectSub: "Loading",
                            title: "Loading"
                        },
                        {
                            redirectMain: "Components",
                            redirectSub: "NotificationIndicator",
                            title: "NotificationIndicator"
                        },
                        {
                            redirectMain: "Components",
                            redirectSub: "MarkdownViewer",
                            title: "MarkdownViewer"
                        },
                        {
                            redirectMain: "Components",
                            redirectSub: "Seperator",
                            title: "Seperator"
                        },
                        {
                            redirectMain: "Components",
                            redirectSub: "SiteLogo",
                            title: "SiteLogo"
                        },
                        {
                            redirectMain: "Components",
                            redirectSub: "WebScrollbar",
                            title: "WebScrollbar"
                        },
                        {
                            redirectMain: "Components",
                            redirectSub: "PageContainer",
                            title: "PageContainer"
                        },
                        {
                            redirectMain: "Components",
                            redirectSub: "Header",
                            title: "Header"
                        },
                        {
                            redirectMain: "Components",
                            redirectSub: "MainHeader",
                            title: "MainHeader"
                        },
                        {
                            redirectMain: "Components",
                            redirectSub: "Menu",
                            title: "Menu"
                        },
                        {
                            redirectMain: "Components",
                            redirectSub: "EmbeddedMenu",
                            title: "EmbeddedMenu"
                        },
                        {
                            redirectMain: "Components",
                            redirectSub: "ThemeSwitcher",
                            title: "ThemeSwitcher"
                        },
                        {
                            redirectMain: "Components",
                            redirectSub: "PaletteSwitcher",
                            title: "PaletteSwitcher"
                        },
                        {
                            redirectMain: "Components",
                            redirectSub: "LocaleSwitcher",
                            title: "LocaleSwitcher"
                        }
                    ]
                }
            ],
            isAutoClosed: true,
            id: "main-menu"
        });

        NCoreUIKitLocalize.addEventListener("state", updateLocaleStorage);
        NCoreUIKitEmbeddedMenu.addEventListener("state", updateStorage);
        NCoreUIKitTheme.addEventListener("state", updateThemeStorage);
    }, []);

    const updateStorage = () => {
        if(Platform.OS === "web") {
            const data = NCoreUIKitEmbeddedMenu.state.data;

            if(data && data.length) {
                const currentMenu = data.find(dI => dI.id === "main-menu");

                if(currentMenu) {
                    window.localStorage.setItem("main-menu-status", String(currentMenu.isCollapse));
                }
            }
        }
    };

    const updateLocaleStorage = () => {
        if(Platform.OS === "web") {
            const localeData = NCoreUIKitLocalize.state;

            if(localeData) {
                window.localStorage.setItem("locale", JSON.stringify(localeData));
            }
        }
    };

    const updateThemeStorage = () => {
        if(Platform.OS === "web") {
            const themeData = NCoreUIKitTheme.state;

            if(themeData) {
                window.localStorage.setItem("theme", JSON.stringify(themeData));
            }
        }
    };

    return <MainHeader
        isWorkWithSeperator={true}
        siteLogoProps={{
            imageUrl: activeTheme.indexOf("dark") !== -1 ? "http://ncore.nibgat.space/assets/images/darklogo.png" : "http://ncore.nibgat.space/assets/images/ncorelogo.png",
            onPress: () => {
                navigation.navigate("Home");
            },
            imageProps: {
                resizeMode: "stretch"
            },
            subTitle: "Design System - UI Kit",
            title: "NİBGAT® | NCore",
            isWorkWithAction: true,
            isWorkWithFlex1: true
        }}
        isWorkWithSticky={true}
        renderRight={() => {
            return <View
                style={[
                    stylesheet.rightContainer,
                    {
                        gap: spaces.spacingMd
                    }
                ]}
            >
                <LocaleSwitcher/>
                <PaletteSwitcher/>
                <ThemeSwitcher/>
            </View>;
        }}
        glassEffect={5}
    >
        <NCoreUIKitEmbeddedMenu.Render
            navigation={navigation as unknown as NCoreUIKit.Navigation}
            id="main-menu"
        >
            <RootStack.Navigator
                initialRouteName="Home"
                screenOptions={{
                    headerShown: false
                }}
            >
                <RootStack.Screen
                    component={GettingStartedNav}
                    name="GettingStarted"
                />
                <RootStack.Screen
                    component={CoreFeaturesNav}
                    name="CoreFeatures"
                />
                <RootStack.Screen
                    component={Home}
                    name="Home"
                />
                <RootStack.Screen
                    component={ComponentsNav}
                    name="Components"
                />
            </RootStack.Navigator>
        </NCoreUIKitEmbeddedMenu.Render>
    </MainHeader>;
};

const Navigation = () => {
    return <NavigationContainer
        documentTitle={{
            formatter: (options, route) => `NCore - Design System | UI Kit - ${options?.title ?? route?.name ?? "Home"}`
        }}
        linking={{
            prefixes: [
                "http://localhost:3000",
                "https://ncore.nibgat.space"
            ],
            config: {
                screens: {
                    Home: "home",
                    GettingStarted: {
                        path: "gettingstarted",
                        screens: {
                            Installation: "installation",
                            Implementation: "implementation"
                        }
                    },
                    CoreFeatures: {
                        path: "corefeatures",
                        screens: {
                            ToolsUsage: "toolsusage",
                            ThemeExamples: "themeexamples",
                            LocaleExamples: "localeexamples",
                            TypesOverride: "typesoverride"
                        }
                    },
                    Components: {
                        path: "components",
                        screens: {
                            Avatar: "avatar",
                            AvatarGroup: "avatargroup",
                            BottomSheet: "bottomsheet",
                            Button: "button",
                            CheckBox: "checkbox",
                            Chip: "chip",
                            CodeViewer: "codeviewer",
                            DateSelector: "dateselector",
                            DateTimePicker: "datetimepicker",
                            DateTimeSheet: "datetimesheet",
                            Dialog: "dialog",
                            EmbeddedMenu: "embeddedmenu",
                            Header: "header",
                            HighlightButton: "highlightbutton",
                            Loading: "loading",
                            LocaleSwitcher: "localeswitcher",
                            MainHeader: "mainheader",
                            MarkdownViewer: "markdownviewer",
                            Menu: "menu",
                            Modal: "modal",
                            MonthSelector: "monthselector",
                            NotificationIndicator: "notificationindicator",
                            NumericInput: "numericinput",
                            PageContainer: "pagecontainer",
                            PaletteSwitcher: "paletteswitcher",
                            RadioButton: "radiobutton",
                            RowCard: "rowcard",
                            SelectBox: "selectbox",
                            SelectSheet: "selectsheet",
                            Seperator: "seperator",
                            SiteLogo: "sitelogo",
                            SnackBar: "snackbar",
                            StateCard: "statecard",
                            Sticker: "sticker",
                            Switch: "switch",
                            Text: "text",
                            TextAreaInput: "textareainput",
                            TextInput: "textinput",
                            ThemeSwitcher: "themeswitcher",
                            TimeSelector: "timeselector",
                            Toast: "toast",
                            WebScrollbar: "webscrollbar",
                            YearSelector: "yearselector"
                        }
                    }
                }
            },
            getStateFromPath: (path, options) => {
                return getStateFromPath(path.toLowerCase(), options);
            }
        } as LinkingOptions<RootStackParamList>}
    >
        <RootNav/>
    </NavigationContainer>;
};
export default Navigation;