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 { NavigationContainer, type LinkingOptions, 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 MarkdownEditorPage from "../pages/components/markdownEditor"; 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 SystemToolbarPage from "../pages/components/systemToolbar"; import TextAreaInputPage from "../pages/components/textAreaInput"; import ThemeSwitcherPage from "../pages/components/themeSwitcher"; import DefaultJSONsPage from "../pages/coreFeatures/defaultJSONs"; 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 CodeEditorPage from "../pages/components/codeEditor"; 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 TooltipPage from "../pages/components/tooltip"; 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 ; }; const GettingStartedNav = () => { return ; }; const ComponentsNav = () => { return ; }; const RenderHomeIcon = ({ color }: { color: keyof NCoreUIKit.IconContentColors; }) => { const { colors } = NCoreUIKitTheme.useContext(); return ; }; const RenderComponentIcon = ({ color }: { color: keyof NCoreUIKit.IconContentColors; }) => { const { colors } = NCoreUIKitTheme.useContext(); return ; }; const RenderGettingStartedIcon = ({ color }: { color: keyof NCoreUIKit.IconContentColors; }) => { const { colors } = NCoreUIKitTheme.useContext(); return ; }; const RenderCoreFeaturesIcon = ({ color }: { color: keyof NCoreUIKit.IconContentColors; }) => { const { colors } = NCoreUIKitTheme.useContext(); return ; }; const RootNav = () => { const { activeTheme, spaces } = NCoreUIKitTheme.useContext(); const { localize } = NCoreUIKitLocalize.useContext(); const navigation = useNavigation>(); useEffect(() => { const currentMenuStatus = Platform.OS === "web" ? window.localStorage.getItem("main-menu-status") : "false"; NCoreUIKitEmbeddedMenu.load({ isCollapse: currentMenuStatus === "true" ? true : false, buttons: [ { icon: ({ color }) => , redirectMain: "Home", isUseLocalize: true, title: "home" }, { subButtons: [ { redirectMain: "GettingStarted", redirectSub: "Installation", title: "installation", isUseLocalize: true }, { redirectMain: "GettingStarted", redirectSub: "Implementation", title: "implementation", isUseLocalize: true } ], icon: ({ color }) => , redirectMain: "GettingStarted", title: "gettingStarted", isCollapsible: true, isUseLocalize: true }, { subButtons: [ { redirectMain: "CoreFeatures", redirectSub: "ToolsUsage", title: "toolsUsage", isUseLocalize: true }, { redirectMain: "CoreFeatures", redirectSub: "ThemeExamples", title: "themeExamples", isUseLocalize: true }, { redirectSub: "LocaleExamples", redirectMain: "CoreFeatures", title: "localeExamples", isUseLocalize: true }, { redirectMain: "CoreFeatures", redirectSub: "TypesOverride", title: "typesOverride", isUseLocalize: true }, { redirectMain: "CoreFeatures", redirectSub: "DefaultJSONs", title: "defaultJSONs", isUseLocalize: true } ], icon: ({ color }) => , redirectMain: "CoreFeatures", title: "coreFeatures", isCollapsible: true, isUseLocalize: true }, { subButtons: [ { redirectMain: "Components", redirectSub: "Text", title: "Text" }, { redirectMain: "Components", redirectSub: "Button", title: "Button" }, { redirectSub: "HighlightButton", redirectMain: "Components", title: "HighlightButton" }, { redirectMain: "Components", redirectSub: "TextInput", title: "TextInput" }, { redirectSub: "TextAreaInput", redirectMain: "Components", title: "TextAreaInput" }, { redirectSub: "NumericInput", redirectMain: "Components", 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" }, { redirectSub: "DateTimePicker", redirectMain: "Components", title: "DateTimePicker" }, { redirectSub: "DateTimeSheet", redirectMain: "Components", title: "DateTimeSheet" }, { redirectSub: "DateSelector", redirectMain: "Components", title: "DateSelector" }, { redirectSub: "TimeSelector", redirectMain: "Components", title: "TimeSelector" }, { redirectSub: "MonthSelector", redirectMain: "Components", title: "MonthSelector" }, { redirectSub: "YearSelector", redirectMain: "Components", title: "YearSelector" }, { redirectMain: "Components", redirectSub: "Avatar", title: "Avatar" }, { redirectMain: "Components", redirectSub: "AvatarGroup", title: "AvatarGroup" }, { redirectMain: "Components", redirectSub: "CodeViewer", title: "CodeViewer" }, { redirectMain: "Components", redirectSub: "CodeEditor", title: "CodeEditor", isUseLocalize: true }, { redirectSub: "SystemToolbar", redirectMain: "Components", title: "SystemToolbar", isUseLocalize: true }, { 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: "Tooltip", title: "Tooltip" }, { redirectMain: "Components", redirectSub: "Loading", title: "Loading" }, { redirectSub: "NotificationIndicator", title: "NotificationIndicator", redirectMain: "Components" }, { redirectSub: "MarkdownViewer", redirectMain: "Components", title: "MarkdownViewer" }, { redirectSub: "MarkdownEditor", redirectMain: "Components", title: "MarkdownEditor" }, { redirectMain: "Components", redirectSub: "Seperator", title: "Seperator" }, { redirectMain: "Components", redirectSub: "SiteLogo", title: "SiteLogo" }, { redirectSub: "WebScrollbar", redirectMain: "Components", title: "WebScrollbar" }, { redirectSub: "PageContainer", redirectMain: "Components", title: "PageContainer" }, { redirectMain: "Components", redirectSub: "Header", title: "Header" }, { redirectMain: "Components", redirectSub: "MainHeader", title: "MainHeader" }, { redirectMain: "Components", redirectSub: "Menu", title: "Menu" }, { redirectSub: "EmbeddedMenu", redirectMain: "Components", title: "EmbeddedMenu" }, { redirectSub: "ThemeSwitcher", redirectMain: "Components", title: "ThemeSwitcher" }, { redirectSub: "PaletteSwitcher", redirectMain: "Components", title: "PaletteSwitcher" }, { redirectSub: "LocaleSwitcher", redirectMain: "Components", title: "LocaleSwitcher" } ], redirectMain: "Components", icon: ({ color }) => , isCollapsible: true, isUseLocalize: true, title: "components" } ], isWorkWithSafeAreaView: false, siteLogoProps: { title: localize("menu"), isShowIcon: false }, 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 { navigation.navigate("Home"); }, imageProps: { resizeMode: "stretch" }, title: "NİBGAT® | NCore", isWorkWithAction: true, isWorkWithFlex1: true }} renderRight={() => { return ; }} isWorkWithSeperator={true} isWorkWithSticky={true} glassEffect={5} > ; }; const Navigation = () => { return `${options?.title ?? route?.name ?? "Home"} || NCore - Design System | UI Kit` }} linking={{ config: { screens: { Components: { screens: { NotificationIndicator: "notificationindicator", HighlightButton: "highlightbutton", PaletteSwitcher: "paletteswitcher", DateTimePicker: "datetimepicker", LocaleSwitcher: "localeswitcher", MarkdownEditor: "markdowneditor", MarkdownViewer: "markdownviewer", DateTimeSheet: "datetimesheet", MonthSelector: "monthselector", PageContainer: "pagecontainer", SystemToolbar: "systemtoolber", TextAreaInput: "textareainput", ThemeSwitcher: "themeswitcher", DateSelector: "dateselector", EmbeddedMenu: "embeddedmenu", NumericInput: "numericinput", TimeSelector: "timeselector", WebScrollbar: "webscrollbar", YearSelector: "yearselector", AvatarGroup: "avatargroup", BottomSheet: "bottomsheet", RadioButton: "radiobutton", SelectSheet: "selectsheet", CodeEditor: "codeeditor", CodeViewer: "codeviewer", MainHeader: "mainheader", SelectBox: "selectbox", Seperator: "seperator", StateCard: "statecard", TextInput: "textinput", CheckBox: "checkbox", SiteLogo: "sitelogo", SnackBar: "snackbar", Loading: "loading", RowCard: "rowcard", Sticker: "sticker", Tooltip: "tooltip", Avatar: "avatar", Button: "button", Dialog: "dialog", Header: "header", Switch: "switch", Modal: "modal", Toast: "toast", Chip: "chip", Menu: "menu", Text: "text" }, path: "components" }, CoreFeatures: { screens: { LocaleExamples: "localeexamples", ThemeExamples: "themeexamples", TypesOverride: "typesoverride", DefaultJSONs: "defaultjsons", ToolsUsage: "toolsusage" }, path: "corefeatures" }, GettingStarted: { screens: { Implementation: "implementation", Installation: "installation" }, path: "gettingstarted" }, Home: "home" } }, getStateFromPath: (path, options) => { return getStateFromPath(path.toLowerCase(), options); }, prefixes: [ "http://localhost:3000", "https://ncore.nibgat.space" ] } as LinkingOptions} > ; }; export default Navigation;