From f9af91997b3d57052b7a288bf51d0c81cf6c909c Mon Sep 17 00:00:00 2001 From: Bruno Tot Date: Thu, 12 Sep 2024 15:31:51 +0200 Subject: [PATCH] chore: file structure refactor for app-vite-react --- .../mern-sample-app/app-vite-react/.eslintrc | 2 +- .../app-vite-react/package.json | 19 +- .../public/locales/en/translation.json | 40 +- .../public/locales/hr/translation.json | 40 +- .../app-vite-react/src/ReactApp.tsx | 61 +- .../src/app/components/.gitkeep | 0 .../components}/Datatable/Datatable.tsx | 0 .../DatatableContainer/DatatableContainer.tsx | 0 .../components/DatatableContainer/index.ts | 0 .../DtSortableCell/DtSortableCell.tsx | 2 +- .../components/DtSortableCell/index.ts | 0 .../components/Datatable/components/index.ts | 2 + .../impl/ClientDatatable/ClientDatatable.tsx | 8 +- .../Datatable/impl/ClientDatatable/index.ts | 0 .../Datatable/impl/ClientDatatable/types.ts | 2 +- .../impl/ServerDatatable/ServerDatatable.tsx | 6 +- .../Datatable/impl/ServerDatatable/index.ts | 0 .../Datatable/impl/ServerDatatable/types.ts | 2 +- .../app/components/Datatable/impl/index.ts | 2 + .../src/app/components/Datatable/index.ts | 4 + .../components}/Datatable/types.ts | 0 .../components}/Footer/Footer.tsx | 2 +- .../components}/Footer/index.ts | 0 .../components}/Header/Header.tsx | 28 +- .../components}/Header/UserMenuButton.tsx | 0 .../components}/Header/index.ts | 0 .../components}/Logo/Logo.tsx | 0 .../components}/Logo/index.ts | 0 .../components}/Sidebar/Sidebar.tsx | 10 +- .../components}/Sidebar/index.ts | 0 .../InputDarkThemeToggle.tsx | 24 + .../app/inputs/InputDarkThemeToggle/index.ts | 1 + .../InputLayoutToggle/InputLayoutToggle.tsx | 26 + .../inputs/InputLayoutToggle/index.ts | 0 .../InputLocaleSelect/InputLocaleSelect.tsx | 61 + .../inputs/InputLocaleSelect/index.ts | 0 .../HorizontalLayout}/ButtonHoverMenu.tsx | 0 .../HorizontalLayout/HorizontalLayout.tsx} | 14 +- .../src/app/layout/HorizontalLayout/index.ts | 2 + .../src/{components => app}/layout/Layout.tsx | 27 +- .../layout/SidebarLayout/SidebarLayout.tsx} | 11 +- .../src/app/layout/SidebarLayout/index.ts | 1 + .../app-vite-react/src/app/layout/index.ts | 5 + .../src/app/pages/Home/HomePage.tsx | 14 +- .../app/pages/Home/UserCreateFormButton.tsx | 4 +- .../src/app/pages/Login/LoginPage.tsx | 2 +- .../app-vite-react/src/app/routes.tsx | 8 +- .../InputFuzzySearch/InputFuzzySearch.tsx | 27 - .../inputs/InputFuzzySearch/index.ts | 1 - .../InputIconButtonSelect.tsx | 74 - .../inputs/InputIconButtonSelect/index.ts | 1 - .../InputLayoutToggle/InputLayoutToggle.tsx | 21 - .../InputLocaleSelect/InputLocaleSelect.tsx | 31 - .../InputRangeBasic/InputRangeBasic.tsx | 61 - .../inputs/InputRangeBasic/index.ts | 1 - .../InputThemeToggle/InputThemeToggle.tsx | 20 - .../inputs/InputThemeToggle/index.ts | 1 - .../src/components/inputs/index.ts | 6 - .../src/components/layout/index.ts | 2 - .../src/components/layout/variants/index.ts | 4 - .../navigation/ButtonHoverMenu/index.ts | 1 - .../src/components/navigation/index.ts | 2 - .../src/components/providers/Providers.tsx | 18 - .../components/semantics/Datatable/index.ts | 1 - .../src/components/semantics/index.ts | 3 - .../src/lib/@mui/MuiStylesProvider.tsx | 6 + .../src/lib/@mui/MuiThemeProvider.tsx | 7 + .../app-vite-react/src/lib/@mui/index.ts | 4 +- .../lib/@mui/providers/MuiStylesProvider.tsx | 6 - .../lib/@mui/providers/MuiThemeProvider.tsx | 7 - .../src/lib/@tanstack/QueryClientProvider.tsx | 2 +- .../app-vite-react/src/lib/@ts-rest/index.ts | 2 +- .../{apiClient.ts => tsRestApiClient.ts} | 2 +- .../app-vite-react/src/lib/i18next/i18n.ts | 32 +- .../app-vite-react/src/lib/i18next/index.ts | 1 + .../src/lib/i18next/useTranslation.ts | 6 + .../src/lib/keycloak-js/KeycloakProvider.tsx | 21 +- .../src/lib/keycloak-js/KeycloakUser.ts | 18 - .../app-vite-react/src/main.tsx | 12 +- .../src/{routeTypes.ts => route-typings.ts} | 13 +- .../app-vite-react/src/server.ts | 1 - .../app-vite-react/src/signals/sigLayout.ts | 2 +- .../app-vite-react/src/signals/sigLocale.ts | 8 +- .../app-vite-react/src/signals/sigToken.ts | 3 - .../app-vite-react/test/App.test.tsx | 12 + .../app-vite-react/test/root.test.tsx | 10 + .../app-vite-react/test/setup/setupFiles.ts | 8 + .../app-vite-react/tsconfig.json | 4 +- .../app-vite-react/vite.config.ts | 20 + pnpm-lock.yaml | 9928 ++++++++--------- 90 files changed, 5093 insertions(+), 5747 deletions(-) delete mode 100644 packages/mern-sample-app/app-vite-react/src/app/components/.gitkeep rename packages/mern-sample-app/app-vite-react/src/{components/semantics => app/components}/Datatable/Datatable.tsx (100%) rename packages/mern-sample-app/app-vite-react/src/{components/semantics => app/components}/Datatable/components/DatatableContainer/DatatableContainer.tsx (100%) rename packages/mern-sample-app/app-vite-react/src/{components/semantics => app/components}/Datatable/components/DatatableContainer/index.ts (100%) rename packages/mern-sample-app/app-vite-react/src/{components/semantics => app/components}/Datatable/components/DtSortableCell/DtSortableCell.tsx (95%) rename packages/mern-sample-app/app-vite-react/src/{components/semantics => app/components}/Datatable/components/DtSortableCell/index.ts (100%) create mode 100644 packages/mern-sample-app/app-vite-react/src/app/components/Datatable/components/index.ts rename packages/mern-sample-app/app-vite-react/src/{components/semantics => app/components}/Datatable/impl/ClientDatatable/ClientDatatable.tsx (92%) rename packages/mern-sample-app/app-vite-react/src/{components/semantics => app/components}/Datatable/impl/ClientDatatable/index.ts (100%) rename packages/mern-sample-app/app-vite-react/src/{components/semantics => app/components}/Datatable/impl/ClientDatatable/types.ts (74%) rename packages/mern-sample-app/app-vite-react/src/{components/semantics => app/components}/Datatable/impl/ServerDatatable/ServerDatatable.tsx (92%) rename packages/mern-sample-app/app-vite-react/src/{components/semantics => app/components}/Datatable/impl/ServerDatatable/index.ts (100%) rename packages/mern-sample-app/app-vite-react/src/{components/semantics => app/components}/Datatable/impl/ServerDatatable/types.ts (80%) create mode 100644 packages/mern-sample-app/app-vite-react/src/app/components/Datatable/impl/index.ts create mode 100644 packages/mern-sample-app/app-vite-react/src/app/components/Datatable/index.ts rename packages/mern-sample-app/app-vite-react/src/{components/semantics => app/components}/Datatable/types.ts (100%) rename packages/mern-sample-app/app-vite-react/src/{components/semantics => app/components}/Footer/Footer.tsx (93%) rename packages/mern-sample-app/app-vite-react/src/{components/semantics => app/components}/Footer/index.ts (100%) rename packages/mern-sample-app/app-vite-react/src/{components/semantics => app/components}/Header/Header.tsx (80%) rename packages/mern-sample-app/app-vite-react/src/{components/semantics => app/components}/Header/UserMenuButton.tsx (100%) rename packages/mern-sample-app/app-vite-react/src/{components/semantics => app/components}/Header/index.ts (100%) rename packages/mern-sample-app/app-vite-react/src/{components/semantics => app/components}/Logo/Logo.tsx (100%) rename packages/mern-sample-app/app-vite-react/src/{components/semantics => app/components}/Logo/index.ts (100%) rename packages/mern-sample-app/app-vite-react/src/{components/navigation => app/components}/Sidebar/Sidebar.tsx (86%) rename packages/mern-sample-app/app-vite-react/src/{components/navigation => app/components}/Sidebar/index.ts (100%) create mode 100644 packages/mern-sample-app/app-vite-react/src/app/inputs/InputDarkThemeToggle/InputDarkThemeToggle.tsx create mode 100644 packages/mern-sample-app/app-vite-react/src/app/inputs/InputDarkThemeToggle/index.ts create mode 100644 packages/mern-sample-app/app-vite-react/src/app/inputs/InputLayoutToggle/InputLayoutToggle.tsx rename packages/mern-sample-app/app-vite-react/src/{components => app}/inputs/InputLayoutToggle/index.ts (100%) create mode 100644 packages/mern-sample-app/app-vite-react/src/app/inputs/InputLocaleSelect/InputLocaleSelect.tsx rename packages/mern-sample-app/app-vite-react/src/{components => app}/inputs/InputLocaleSelect/index.ts (100%) rename packages/mern-sample-app/app-vite-react/src/{components/navigation/ButtonHoverMenu => app/layout/HorizontalLayout}/ButtonHoverMenu.tsx (100%) rename packages/mern-sample-app/app-vite-react/src/{components/layout/variants/HorizontalNavVariant.tsx => app/layout/HorizontalLayout/HorizontalLayout.tsx} (89%) create mode 100644 packages/mern-sample-app/app-vite-react/src/app/layout/HorizontalLayout/index.ts rename packages/mern-sample-app/app-vite-react/src/{components => app}/layout/Layout.tsx (73%) rename packages/mern-sample-app/app-vite-react/src/{components/layout/variants/SidebarNavVariant.tsx => app/layout/SidebarLayout/SidebarLayout.tsx} (91%) create mode 100644 packages/mern-sample-app/app-vite-react/src/app/layout/SidebarLayout/index.ts create mode 100644 packages/mern-sample-app/app-vite-react/src/app/layout/index.ts delete mode 100644 packages/mern-sample-app/app-vite-react/src/components/inputs/InputFuzzySearch/InputFuzzySearch.tsx delete mode 100644 packages/mern-sample-app/app-vite-react/src/components/inputs/InputFuzzySearch/index.ts delete mode 100644 packages/mern-sample-app/app-vite-react/src/components/inputs/InputIconButtonSelect/InputIconButtonSelect.tsx delete mode 100644 packages/mern-sample-app/app-vite-react/src/components/inputs/InputIconButtonSelect/index.ts delete mode 100644 packages/mern-sample-app/app-vite-react/src/components/inputs/InputLayoutToggle/InputLayoutToggle.tsx delete mode 100644 packages/mern-sample-app/app-vite-react/src/components/inputs/InputLocaleSelect/InputLocaleSelect.tsx delete mode 100644 packages/mern-sample-app/app-vite-react/src/components/inputs/InputRangeBasic/InputRangeBasic.tsx delete mode 100644 packages/mern-sample-app/app-vite-react/src/components/inputs/InputRangeBasic/index.ts delete mode 100644 packages/mern-sample-app/app-vite-react/src/components/inputs/InputThemeToggle/InputThemeToggle.tsx delete mode 100644 packages/mern-sample-app/app-vite-react/src/components/inputs/InputThemeToggle/index.ts delete mode 100644 packages/mern-sample-app/app-vite-react/src/components/inputs/index.ts delete mode 100644 packages/mern-sample-app/app-vite-react/src/components/layout/index.ts delete mode 100644 packages/mern-sample-app/app-vite-react/src/components/layout/variants/index.ts delete mode 100644 packages/mern-sample-app/app-vite-react/src/components/navigation/ButtonHoverMenu/index.ts delete mode 100644 packages/mern-sample-app/app-vite-react/src/components/navigation/index.ts delete mode 100644 packages/mern-sample-app/app-vite-react/src/components/providers/Providers.tsx delete mode 100644 packages/mern-sample-app/app-vite-react/src/components/semantics/Datatable/index.ts delete mode 100644 packages/mern-sample-app/app-vite-react/src/components/semantics/index.ts create mode 100644 packages/mern-sample-app/app-vite-react/src/lib/@mui/MuiStylesProvider.tsx create mode 100644 packages/mern-sample-app/app-vite-react/src/lib/@mui/MuiThemeProvider.tsx delete mode 100644 packages/mern-sample-app/app-vite-react/src/lib/@mui/providers/MuiStylesProvider.tsx delete mode 100644 packages/mern-sample-app/app-vite-react/src/lib/@mui/providers/MuiThemeProvider.tsx rename packages/mern-sample-app/app-vite-react/src/lib/@ts-rest/{apiClient.ts => tsRestApiClient.ts} (84%) create mode 100644 packages/mern-sample-app/app-vite-react/src/lib/i18next/useTranslation.ts rename packages/mern-sample-app/app-vite-react/src/{routeTypes.ts => route-typings.ts} (70%) delete mode 100644 packages/mern-sample-app/app-vite-react/src/signals/sigToken.ts create mode 100644 packages/mern-sample-app/app-vite-react/test/App.test.tsx create mode 100644 packages/mern-sample-app/app-vite-react/test/root.test.tsx create mode 100644 packages/mern-sample-app/app-vite-react/test/setup/setupFiles.ts diff --git a/packages/mern-sample-app/app-vite-react/.eslintrc b/packages/mern-sample-app/app-vite-react/.eslintrc index 72028774..ed4b1413 100644 --- a/packages/mern-sample-app/app-vite-react/.eslintrc +++ b/packages/mern-sample-app/app-vite-react/.eslintrc @@ -2,7 +2,7 @@ "root": true, "env": { "browser": true, "es2020": true }, "extends": [ - "../../.eslintrc", + "../../../.eslintrc", "eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:react-hooks/recommended" diff --git a/packages/mern-sample-app/app-vite-react/package.json b/packages/mern-sample-app/app-vite-react/package.json index e894a1e0..84fbeb12 100644 --- a/packages/mern-sample-app/app-vite-react/package.json +++ b/packages/mern-sample-app/app-vite-react/package.json @@ -4,18 +4,17 @@ "version": "0.0.1", "type": "module", "scripts": { - "test": "echo 'No tests found'", + "test": "vitest --run", + "test:coverage": "vitest --run --coverage", "clean": "rm -rf ./dist", "debug": "vite --mode debug", "dev": "vite", "build": "tsc && vite build --emptyOutDir", - "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", + "lint": "npx eslint . --ext ts,tsx --report-unused-disable-directives", "start": "serve -s dist", "loadTranslationTypes": "i18next-resources-for-ts interface -i ./public/locales/en -o ./src/lib/i18next/@types/resources.d.ts" }, "dependencies": { - "@org/lib-commons": "workspace:*", - "@org/lib-api-client": "workspace:*", "@emotion/react": "^11.13.3", "@emotion/styled": "^11.13.0", "@mui/icons-material": "^6.0.2", @@ -24,6 +23,8 @@ "@mui/styled-engine-sc": "^6.0.2", "@mui/styles": "^6.0.2", "@mui/x-tree-view": "^7.15.0", + "@org/lib-api-client": "workspace:*", + "@org/lib-commons": "workspace:*", "@preact/signals-react": "^2.0.1", "@react-keycloak/web": "^3.4.0", "@tanstack/react-query": "^5.32.1", @@ -46,13 +47,21 @@ }, "devDependencies": { "@preact/signals-react-transform": "^0.3.1", + "@testing-library/jest-dom": "^6.5.0", + "@testing-library/react": "^16.0.1", + "@testing-library/user-event": "^14.5.2", "@types/react": "^18.2.56", "@types/react-dom": "^18.2.19", + "@typescript-eslint/eslint-plugin": "^8.5.0", "@vitejs/plugin-react": "^4.2.1", + "eslint-plugin-react-hooks": "^4.6.2", + "eslint-plugin-react-refresh": "^0.4.11", "i18next-resources-for-ts": "^1.5.0", + "jsdom": "^25.0.0", "locize-cli": "^8.0.0", "serve": "^14.2.1", "typescript": "^5.2.2", - "vite": "^5.1.4" + "vite": "^5.1.4", + "vitest": "^2.0.5" } } diff --git a/packages/mern-sample-app/app-vite-react/public/locales/en/translation.json b/packages/mern-sample-app/app-vite-react/public/locales/en/translation.json index b29743f7..b63ec7ec 100644 --- a/packages/mern-sample-app/app-vite-react/public/locales/en/translation.json +++ b/packages/mern-sample-app/app-vite-react/public/locales/en/translation.json @@ -1,31 +1,31 @@ { - "test": "Test EN", - "setDarkMode": "Dark mode", - "setLightMode": "Light mode", - "systemLanguage": "Language", + "accountSettings": "Account Settings", "appTheme": "Theme", + "apps": "Apps", "borderRadius": "Border radius", - "doSearch": "Search", + "calendar": "Calendar", + "cards": "Cards", "dashboard": "Dashboard", - "accountSettings": "Account Settings", - "pages": "Pages", - "login": "Login", - "register": "Register", + "doSearch": "Search", "error": "Error", - "userInterface": "User Interface", - "typography": "Typography", - "icons": "Icons", - "cards": "Cards", - "tables": "Tables", "forms": "Forms", - "apps": "Apps", - "calendar": "Calendar", + "icons": "Icons", "invoice": "Invoice", - "user": "User", - "rolesAndPermissions": "Roles & Permissions", "list": "List", - "view": "View", + "login": "Login", + "pages": "Pages", + "register": "Register", + "rolesAndPermissions": "Roles & Permissions", + "setDarkMode": "Dark mode", + "setLightMode": "Light mode", + "systemLanguage": "Language", "systemLayout": "Layout", + "systemLayoutHorizontal": "Horizontal view", "systemLayoutSidebar": "Sidebar view", - "systemLayoutHorizontal": "Horizontal view" + "tables": "Tables", + "test": "Test EN", + "typography": "Typography", + "user": "User", + "userInterface": "User Interface", + "view": "View" } diff --git a/packages/mern-sample-app/app-vite-react/public/locales/hr/translation.json b/packages/mern-sample-app/app-vite-react/public/locales/hr/translation.json index db09180a..23fc6641 100644 --- a/packages/mern-sample-app/app-vite-react/public/locales/hr/translation.json +++ b/packages/mern-sample-app/app-vite-react/public/locales/hr/translation.json @@ -1,31 +1,31 @@ { - "test": "Test HR", - "setDarkMode": "Tamni način rada", - "setLightMode": "Svijetli način rada", - "systemLanguage": "Jezik", + "accountSettings": "Postavke Računa", "appTheme": "Tema", + "apps": "Aplikacije", "borderRadius": "Radijus ruba", - "doSearch": "Pretraži", + "calendar": "Kalendar", + "cards": "Kartice", "dashboard": "Kontrolna ploča", - "accountSettings": "Postavke Računa", - "pages": "Stranice", - "login": "Prijava", - "register": "Registracija", + "doSearch": "Pretraži", "error": "Greška", - "userInterface": "Korisničko Sučelje", - "typography": "Tipografija", - "icons": "Ikone", - "cards": "Kartice", - "tables": "Tablice", "forms": "Forme", - "apps": "Aplikacije", - "calendar": "Kalendar", + "icons": "Ikone", "invoice": "Račun", - "user": "Korisnik", - "rolesAndPermissions": "Uloge i Dozvole", "list": "Lista", - "view": "Pregled", + "login": "Prijava", + "pages": "Stranice", + "register": "Registracija", + "rolesAndPermissions": "Uloge i Dozvole", + "setDarkMode": "Tamni način rada", + "setLightMode": "Svijetli način rada", + "systemLanguage": "Jezik", "systemLayout": "Izgled", + "systemLayoutHorizontal": "Horizontalni dizajn", "systemLayoutSidebar": "Dizajn sa bočnom trakom", - "systemLayoutHorizontal": "Horizontalni dizajn" + "tables": "Tablice", + "test": "Test HR", + "typography": "Tipografija", + "user": "Korisnik", + "userInterface": "Korisničko Sučelje", + "view": "Pregled" } diff --git a/packages/mern-sample-app/app-vite-react/src/ReactApp.tsx b/packages/mern-sample-app/app-vite-react/src/ReactApp.tsx index 9fb55bcb..b93245ca 100644 --- a/packages/mern-sample-app/app-vite-react/src/ReactApp.tsx +++ b/packages/mern-sample-app/app-vite-react/src/ReactApp.tsx @@ -1,27 +1,38 @@ -import type { ReactNode } from "react"; +import React, { type ReactNode } from "react"; import ReactDOM from "react-dom/client"; -import type { RouteObject } from "react-router-dom"; -import { Outlet, RouterProvider, createBrowserRouter } from "react-router-dom"; +import { type RouteObject, Outlet, RouterProvider, createBrowserRouter } from "react-router-dom"; import { CssBaseline } from "@mui/material"; +import { type NavigationRoute } from "@org/app-vite-react/route-typings"; +import { MuiStylesProvider, MuiThemeProvider } from "@org/app-vite-react/lib/@mui"; +import { QueryClientProvider } from "@org/app-vite-react/lib/@tanstack"; +import { KeycloakProvider } from "@org/app-vite-react/lib/keycloak-js"; +import { initI18n } from "@org/app-vite-react/lib/i18next"; -import { type NavigationRoutes } from "@org/app-vite-react/routeTypes"; +type Provider = React.FC<{ children: React.ReactNode }>; -import { Layout } from "@org/app-vite-react/components/layout/Layout"; -import { Providers, type Provider } from "@org/app-vite-react/components/providers/Providers"; -import { StylesProvider, ThemeProvider } from "@org/app-vite-react/lib/@mui"; -import { QueryClientProvider } from "@org/app-vite-react/lib/@tanstack"; +// Function to nest children within a component +const nest = (children: React.ReactNode, Provider: React.FC<{ children: React.ReactNode }>) => ( + {children} +); -import { Status404Page } from "@org/app-vite-react/app/pages/Status404"; -import { RootErrorPage } from "@org/app-vite-react/app/pages/RootError"; -import { KeycloakProvider } from "@org/app-vite-react/lib/keycloak-js"; +/** @hidden */ +type ProvidersProps = React.PropsWithChildren<{ + list: Array>; +}>; + +// Providers component definition +const Providers: React.FC = ({ children, list }) => { + return <>{list.reduceRight(nest, children)}; +}; type ReactAppConfig = { providers?: Provider[]; - errorElement?: ReactNode; - routes: NavigationRoutes; + layoutElement: Provider; + errorElement: ReactNode; + routes: NavigationRoute[]; }; -function convertToRoutes(data: NavigationRoutes): RouteObject[] { +function convertToRoutes(data: NavigationRoute[]): RouteObject[] { const routes: RouteObject[] = []; for (const item of data) { @@ -36,27 +47,21 @@ function convertToRoutes(data: NavigationRoutes): RouteObject[] { } export class ReactApp { - static readonly #DEFAULT_ROOT_ERROR_PAGE = (); static readonly #COMMON_PROVIDERS = [ KeycloakProvider, QueryClientProvider, - StylesProvider, - ThemeProvider, + MuiStylesProvider, + MuiThemeProvider, ]; - // prettier-ignore - static readonly #COMMON_ROUTES: NavigationRoutes = [ - //{ label: () => "Configure Colors", Component: ThemeColorConfigurationPage, path: "/configure-colors", icon: }, - { label: () => "", Component: Status404Page, path: "*", hidden: true }, - ]; - config!: ReactAppConfig; - routes!: NavigationRoutes; + routes!: NavigationRoute[]; + layoutElement!: Provider; providers!: Provider[]; router!: ReturnType; constructor() { - // NOOP + initI18n(); } run(config: ReactAppConfig) { @@ -73,15 +78,17 @@ export class ReactApp { #loadConfig(config: ReactAppConfig) { this.config = config; - this.routes = [...config.routes, ...ReactApp.#COMMON_ROUTES]; + this.routes = [...config.routes]; + this.layoutElement = config.layoutElement; this.providers = [...(config.providers ?? []), ...ReactApp.#COMMON_PROVIDERS]; this.router = this.#createBrowserRouter(); } #createBrowserRouter() { + const Layout = this.layoutElement; return createBrowserRouter([ { - errorElement: this.config.errorElement ?? ReactApp.#DEFAULT_ROOT_ERROR_PAGE, + errorElement: this.config.errorElement, children: convertToRoutes(this.routes), element: ( diff --git a/packages/mern-sample-app/app-vite-react/src/app/components/.gitkeep b/packages/mern-sample-app/app-vite-react/src/app/components/.gitkeep deleted file mode 100644 index e69de29b..00000000 diff --git a/packages/mern-sample-app/app-vite-react/src/components/semantics/Datatable/Datatable.tsx b/packages/mern-sample-app/app-vite-react/src/app/components/Datatable/Datatable.tsx similarity index 100% rename from packages/mern-sample-app/app-vite-react/src/components/semantics/Datatable/Datatable.tsx rename to packages/mern-sample-app/app-vite-react/src/app/components/Datatable/Datatable.tsx diff --git a/packages/mern-sample-app/app-vite-react/src/components/semantics/Datatable/components/DatatableContainer/DatatableContainer.tsx b/packages/mern-sample-app/app-vite-react/src/app/components/Datatable/components/DatatableContainer/DatatableContainer.tsx similarity index 100% rename from packages/mern-sample-app/app-vite-react/src/components/semantics/Datatable/components/DatatableContainer/DatatableContainer.tsx rename to packages/mern-sample-app/app-vite-react/src/app/components/Datatable/components/DatatableContainer/DatatableContainer.tsx diff --git a/packages/mern-sample-app/app-vite-react/src/components/semantics/Datatable/components/DatatableContainer/index.ts b/packages/mern-sample-app/app-vite-react/src/app/components/Datatable/components/DatatableContainer/index.ts similarity index 100% rename from packages/mern-sample-app/app-vite-react/src/components/semantics/Datatable/components/DatatableContainer/index.ts rename to packages/mern-sample-app/app-vite-react/src/app/components/Datatable/components/DatatableContainer/index.ts diff --git a/packages/mern-sample-app/app-vite-react/src/components/semantics/Datatable/components/DtSortableCell/DtSortableCell.tsx b/packages/mern-sample-app/app-vite-react/src/app/components/Datatable/components/DtSortableCell/DtSortableCell.tsx similarity index 95% rename from packages/mern-sample-app/app-vite-react/src/components/semantics/Datatable/components/DtSortableCell/DtSortableCell.tsx rename to packages/mern-sample-app/app-vite-react/src/app/components/Datatable/components/DtSortableCell/DtSortableCell.tsx index 1a84f82c..df68d3b9 100644 --- a/packages/mern-sample-app/app-vite-react/src/components/semantics/Datatable/components/DtSortableCell/DtSortableCell.tsx +++ b/packages/mern-sample-app/app-vite-react/src/app/components/Datatable/components/DtSortableCell/DtSortableCell.tsx @@ -4,7 +4,7 @@ import { useCallback, useState } from "react"; import type { DtBaseColumnAlign, DtBaseColumnRenderHeader, -} from "@org/app-vite-react/components/semantics/Datatable/types"; +} from "@org/app-vite-react/app/components/Datatable"; export type DtSortableCellProps = { id: string; diff --git a/packages/mern-sample-app/app-vite-react/src/components/semantics/Datatable/components/DtSortableCell/index.ts b/packages/mern-sample-app/app-vite-react/src/app/components/Datatable/components/DtSortableCell/index.ts similarity index 100% rename from packages/mern-sample-app/app-vite-react/src/components/semantics/Datatable/components/DtSortableCell/index.ts rename to packages/mern-sample-app/app-vite-react/src/app/components/Datatable/components/DtSortableCell/index.ts diff --git a/packages/mern-sample-app/app-vite-react/src/app/components/Datatable/components/index.ts b/packages/mern-sample-app/app-vite-react/src/app/components/Datatable/components/index.ts new file mode 100644 index 00000000..8d3920f8 --- /dev/null +++ b/packages/mern-sample-app/app-vite-react/src/app/components/Datatable/components/index.ts @@ -0,0 +1,2 @@ +export * from "./DatatableContainer"; +export * from "./DtSortableCell"; diff --git a/packages/mern-sample-app/app-vite-react/src/components/semantics/Datatable/impl/ClientDatatable/ClientDatatable.tsx b/packages/mern-sample-app/app-vite-react/src/app/components/Datatable/impl/ClientDatatable/ClientDatatable.tsx similarity index 92% rename from packages/mern-sample-app/app-vite-react/src/components/semantics/Datatable/impl/ClientDatatable/ClientDatatable.tsx rename to packages/mern-sample-app/app-vite-react/src/app/components/Datatable/impl/ClientDatatable/ClientDatatable.tsx index 2a9c04db..50ad0f5a 100644 --- a/packages/mern-sample-app/app-vite-react/src/components/semantics/Datatable/impl/ClientDatatable/ClientDatatable.tsx +++ b/packages/mern-sample-app/app-vite-react/src/app/components/Datatable/impl/ClientDatatable/ClientDatatable.tsx @@ -10,10 +10,10 @@ import { import type { TODO } from "@org/lib-commons"; import type { MouseEvent } from "react"; import { Fragment, useMemo, useState } from "react"; -import { DtSortableCell } from "@org/app-vite-react/components/semantics/Datatable/components/DtSortableCell/DtSortableCell"; -import type { DtBaseOrder } from "@org/app-vite-react/components/semantics/Datatable/types"; -import { DEFAULT_PAGINATION_OPTIONS } from "@org/app-vite-react/components/semantics/Datatable/types"; -import type { ClientDatatableProps } from "@org/app-vite-react/components/semantics/Datatable/impl/ClientDatatable/types"; +import { DtSortableCell } from "@org/app-vite-react/app/components/Datatable/components/DtSortableCell/DtSortableCell"; +import type { DtBaseOrder } from "@org/app-vite-react/app/components/Datatable/types"; +import { DEFAULT_PAGINATION_OPTIONS } from "@org/app-vite-react/app/components/Datatable/types"; +import type { ClientDatatableProps } from "@org/app-vite-react/app/components/Datatable/impl/ClientDatatable/types"; export function ClientDatatable({ data, diff --git a/packages/mern-sample-app/app-vite-react/src/components/semantics/Datatable/impl/ClientDatatable/index.ts b/packages/mern-sample-app/app-vite-react/src/app/components/Datatable/impl/ClientDatatable/index.ts similarity index 100% rename from packages/mern-sample-app/app-vite-react/src/components/semantics/Datatable/impl/ClientDatatable/index.ts rename to packages/mern-sample-app/app-vite-react/src/app/components/Datatable/impl/ClientDatatable/index.ts diff --git a/packages/mern-sample-app/app-vite-react/src/components/semantics/Datatable/impl/ClientDatatable/types.ts b/packages/mern-sample-app/app-vite-react/src/app/components/Datatable/impl/ClientDatatable/types.ts similarity index 74% rename from packages/mern-sample-app/app-vite-react/src/components/semantics/Datatable/impl/ClientDatatable/types.ts rename to packages/mern-sample-app/app-vite-react/src/app/components/Datatable/impl/ClientDatatable/types.ts index 85c10141..c30a542a 100644 --- a/packages/mern-sample-app/app-vite-react/src/components/semantics/Datatable/impl/ClientDatatable/types.ts +++ b/packages/mern-sample-app/app-vite-react/src/app/components/Datatable/impl/ClientDatatable/types.ts @@ -1,4 +1,4 @@ -import type { DtBaseColumn } from "@org/app-vite-react/components/semantics/Datatable/types"; +import type { DtBaseColumn } from "@org/app-vite-react/app/components/Datatable/types"; export type DtClientColumnSort = (o1: T, o2: T) => number; diff --git a/packages/mern-sample-app/app-vite-react/src/components/semantics/Datatable/impl/ServerDatatable/ServerDatatable.tsx b/packages/mern-sample-app/app-vite-react/src/app/components/Datatable/impl/ServerDatatable/ServerDatatable.tsx similarity index 92% rename from packages/mern-sample-app/app-vite-react/src/components/semantics/Datatable/impl/ServerDatatable/ServerDatatable.tsx rename to packages/mern-sample-app/app-vite-react/src/app/components/Datatable/impl/ServerDatatable/ServerDatatable.tsx index c0e965ba..9157300a 100644 --- a/packages/mern-sample-app/app-vite-react/src/components/semantics/Datatable/impl/ServerDatatable/ServerDatatable.tsx +++ b/packages/mern-sample-app/app-vite-react/src/app/components/Datatable/impl/ServerDatatable/ServerDatatable.tsx @@ -10,9 +10,9 @@ import { import type { TODO } from "@org/lib-commons"; import type { MouseEvent } from "react"; import { Fragment, useCallback } from "react"; -import type { ServerDatatableProps } from "@org/app-vite-react/components/semantics/Datatable/impl/ServerDatatable/types"; -import type { DtBaseSortItem } from "@org/app-vite-react/components/semantics/Datatable/types"; -import { DtSortableCell } from "@org/app-vite-react/components/semantics/Datatable/components/DtSortableCell"; +import type { ServerDatatableProps } from "@org/app-vite-react/app/components/Datatable/impl/ServerDatatable/types"; +import type { DtBaseSortItem } from "@org/app-vite-react/app/components/Datatable/types"; +import { DtSortableCell } from "@org/app-vite-react/app/components/Datatable/components/DtSortableCell"; export function ServerDatatable({ data, diff --git a/packages/mern-sample-app/app-vite-react/src/components/semantics/Datatable/impl/ServerDatatable/index.ts b/packages/mern-sample-app/app-vite-react/src/app/components/Datatable/impl/ServerDatatable/index.ts similarity index 100% rename from packages/mern-sample-app/app-vite-react/src/components/semantics/Datatable/impl/ServerDatatable/index.ts rename to packages/mern-sample-app/app-vite-react/src/app/components/Datatable/impl/ServerDatatable/index.ts diff --git a/packages/mern-sample-app/app-vite-react/src/components/semantics/Datatable/impl/ServerDatatable/types.ts b/packages/mern-sample-app/app-vite-react/src/app/components/Datatable/impl/ServerDatatable/types.ts similarity index 80% rename from packages/mern-sample-app/app-vite-react/src/components/semantics/Datatable/impl/ServerDatatable/types.ts rename to packages/mern-sample-app/app-vite-react/src/app/components/Datatable/impl/ServerDatatable/types.ts index e88089a1..276d74a3 100644 --- a/packages/mern-sample-app/app-vite-react/src/components/semantics/Datatable/impl/ServerDatatable/types.ts +++ b/packages/mern-sample-app/app-vite-react/src/app/components/Datatable/impl/ServerDatatable/types.ts @@ -1,5 +1,5 @@ import type { PaginationOptions } from "@org/lib-commons"; -import type { DtBaseColumn } from "@org/app-vite-react/components/semantics/Datatable/types"; +import type { DtBaseColumn } from "@org/app-vite-react/app/components/Datatable/types"; export type DtServerColumn = DtBaseColumn & { sort?: string; diff --git a/packages/mern-sample-app/app-vite-react/src/app/components/Datatable/impl/index.ts b/packages/mern-sample-app/app-vite-react/src/app/components/Datatable/impl/index.ts new file mode 100644 index 00000000..7b83e739 --- /dev/null +++ b/packages/mern-sample-app/app-vite-react/src/app/components/Datatable/impl/index.ts @@ -0,0 +1,2 @@ +export * from "./ClientDatatable"; +export * from "./ServerDatatable"; diff --git a/packages/mern-sample-app/app-vite-react/src/app/components/Datatable/index.ts b/packages/mern-sample-app/app-vite-react/src/app/components/Datatable/index.ts new file mode 100644 index 00000000..bf7151dc --- /dev/null +++ b/packages/mern-sample-app/app-vite-react/src/app/components/Datatable/index.ts @@ -0,0 +1,4 @@ +export * from "./Datatable"; +export * from "./types"; +export * from "./components"; +export * from "./impl"; diff --git a/packages/mern-sample-app/app-vite-react/src/components/semantics/Datatable/types.ts b/packages/mern-sample-app/app-vite-react/src/app/components/Datatable/types.ts similarity index 100% rename from packages/mern-sample-app/app-vite-react/src/components/semantics/Datatable/types.ts rename to packages/mern-sample-app/app-vite-react/src/app/components/Datatable/types.ts diff --git a/packages/mern-sample-app/app-vite-react/src/components/semantics/Footer/Footer.tsx b/packages/mern-sample-app/app-vite-react/src/app/components/Footer/Footer.tsx similarity index 93% rename from packages/mern-sample-app/app-vite-react/src/components/semantics/Footer/Footer.tsx rename to packages/mern-sample-app/app-vite-react/src/app/components/Footer/Footer.tsx index 031eab51..8a270eba 100644 --- a/packages/mern-sample-app/app-vite-react/src/components/semantics/Footer/Footer.tsx +++ b/packages/mern-sample-app/app-vite-react/src/app/components/Footer/Footer.tsx @@ -1,6 +1,6 @@ import type { Breakpoint } from "@mui/material"; import { Box, Container, Link, Typography } from "@mui/material"; -import type { MuiSxProps } from "@org/app-vite-react/components/semantics/Header"; +import type { MuiSxProps } from "@org/app-vite-react/app/components/Header"; export type FooterProps = { backgroundColor?: string; diff --git a/packages/mern-sample-app/app-vite-react/src/components/semantics/Footer/index.ts b/packages/mern-sample-app/app-vite-react/src/app/components/Footer/index.ts similarity index 100% rename from packages/mern-sample-app/app-vite-react/src/components/semantics/Footer/index.ts rename to packages/mern-sample-app/app-vite-react/src/app/components/Footer/index.ts diff --git a/packages/mern-sample-app/app-vite-react/src/components/semantics/Header/Header.tsx b/packages/mern-sample-app/app-vite-react/src/app/components/Header/Header.tsx similarity index 80% rename from packages/mern-sample-app/app-vite-react/src/components/semantics/Header/Header.tsx rename to packages/mern-sample-app/app-vite-react/src/app/components/Header/Header.tsx index f1fc1b6e..8fd4f688 100644 --- a/packages/mern-sample-app/app-vite-react/src/components/semantics/Header/Header.tsx +++ b/packages/mern-sample-app/app-vite-react/src/app/components/Header/Header.tsx @@ -10,16 +10,17 @@ import { Link, useMediaQuery, } from "@mui/material"; -import { - InputLayoutToggle, - InputLocaleSelect, - InputThemeToggle, -} from "@org/app-vite-react/components/inputs"; +import { InputLayoutToggle } from "@org/app-vite-react/app/inputs/InputLayoutToggle"; +import { InputLocaleSelect } from "@org/app-vite-react/app/inputs/InputLocaleSelect"; +import { InputDarkThemeToggle } from "@org/app-vite-react/app/inputs/InputDarkThemeToggle"; import { useMatches } from "react-router-dom"; import type { TODO } from "@org/lib-commons"; import { sigSidebarOpen } from "@org/app-vite-react/signals/sigSidebarOpen"; import { UserMenuButton } from "./UserMenuButton"; import { useState } from "react"; +import { sigThemeOpts } from "@org/app-vite-react/signals/sigTheme"; +import { sigLocale } from "@org/app-vite-react/signals/sigLocale"; +import { sigLayout } from "@org/app-vite-react/signals/sigLayout"; export type MuiSxProps = SxProps; @@ -146,9 +147,20 @@ export function Header({ - - - {matchesDesktop && } + (sigThemeOpts.value = { dark })} + /> + (sigLocale.value = locale)} + /> + {matchesDesktop && ( + (sigLayout.value = layout)} + /> + )} diff --git a/packages/mern-sample-app/app-vite-react/src/components/semantics/Header/UserMenuButton.tsx b/packages/mern-sample-app/app-vite-react/src/app/components/Header/UserMenuButton.tsx similarity index 100% rename from packages/mern-sample-app/app-vite-react/src/components/semantics/Header/UserMenuButton.tsx rename to packages/mern-sample-app/app-vite-react/src/app/components/Header/UserMenuButton.tsx diff --git a/packages/mern-sample-app/app-vite-react/src/components/semantics/Header/index.ts b/packages/mern-sample-app/app-vite-react/src/app/components/Header/index.ts similarity index 100% rename from packages/mern-sample-app/app-vite-react/src/components/semantics/Header/index.ts rename to packages/mern-sample-app/app-vite-react/src/app/components/Header/index.ts diff --git a/packages/mern-sample-app/app-vite-react/src/components/semantics/Logo/Logo.tsx b/packages/mern-sample-app/app-vite-react/src/app/components/Logo/Logo.tsx similarity index 100% rename from packages/mern-sample-app/app-vite-react/src/components/semantics/Logo/Logo.tsx rename to packages/mern-sample-app/app-vite-react/src/app/components/Logo/Logo.tsx diff --git a/packages/mern-sample-app/app-vite-react/src/components/semantics/Logo/index.ts b/packages/mern-sample-app/app-vite-react/src/app/components/Logo/index.ts similarity index 100% rename from packages/mern-sample-app/app-vite-react/src/components/semantics/Logo/index.ts rename to packages/mern-sample-app/app-vite-react/src/app/components/Logo/index.ts diff --git a/packages/mern-sample-app/app-vite-react/src/components/navigation/Sidebar/Sidebar.tsx b/packages/mern-sample-app/app-vite-react/src/app/components/Sidebar/Sidebar.tsx similarity index 86% rename from packages/mern-sample-app/app-vite-react/src/components/navigation/Sidebar/Sidebar.tsx rename to packages/mern-sample-app/app-vite-react/src/app/components/Sidebar/Sidebar.tsx index 237f65a5..449e690a 100644 --- a/packages/mern-sample-app/app-vite-react/src/components/navigation/Sidebar/Sidebar.tsx +++ b/packages/mern-sample-app/app-vite-react/src/app/components/Sidebar/Sidebar.tsx @@ -25,16 +25,10 @@ export function Sidebar({ const drawerWidth = hidden ? 0 : paperWidth; const drawerPosition = matchesDesktop ? "relative" : undefined; const paperPosition = matchesDesktop ? "absolute" : undefined; - const drawerVariant = hidden - ? "temporary" - : matchesDesktop - ? "permanent" - : "temporary"; + const drawerVariant = hidden ? "temporary" : matchesDesktop ? "permanent" : "temporary"; const bottomPadding = 150; - const paperMaxHeight = matchesDesktop - ? undefined - : `calc(100% - ${bottomPadding}px)`; + const paperMaxHeight = matchesDesktop ? undefined : `calc(100% - ${bottomPadding}px)`; const paperTop = matchesDesktop ? undefined : bottomPadding; return ( diff --git a/packages/mern-sample-app/app-vite-react/src/components/navigation/Sidebar/index.ts b/packages/mern-sample-app/app-vite-react/src/app/components/Sidebar/index.ts similarity index 100% rename from packages/mern-sample-app/app-vite-react/src/components/navigation/Sidebar/index.ts rename to packages/mern-sample-app/app-vite-react/src/app/components/Sidebar/index.ts diff --git a/packages/mern-sample-app/app-vite-react/src/app/inputs/InputDarkThemeToggle/InputDarkThemeToggle.tsx b/packages/mern-sample-app/app-vite-react/src/app/inputs/InputDarkThemeToggle/InputDarkThemeToggle.tsx new file mode 100644 index 00000000..ec55e5b1 --- /dev/null +++ b/packages/mern-sample-app/app-vite-react/src/app/inputs/InputDarkThemeToggle/InputDarkThemeToggle.tsx @@ -0,0 +1,24 @@ +import { DarkMode, LightMode } from "@mui/icons-material"; +import { IconButton, Tooltip } from "@mui/material"; +import { useTranslation } from "@org/app-vite-react/lib/i18next"; + +export type InputDarkThemeToggleProps = { + value: boolean; + onChange: (dark: boolean) => void; +}; + +export function InputDarkThemeToggle({ value: dark, onChange }: InputDarkThemeToggleProps) { + const t = useTranslation(); + const title = dark ? t("setDarkMode") : t("setLightMode"); + const icon = dark ? : ; + + const onClick = () => { + onChange(!dark); + }; + + return ( + + {icon} + + ); +} diff --git a/packages/mern-sample-app/app-vite-react/src/app/inputs/InputDarkThemeToggle/index.ts b/packages/mern-sample-app/app-vite-react/src/app/inputs/InputDarkThemeToggle/index.ts new file mode 100644 index 00000000..e5e1f826 --- /dev/null +++ b/packages/mern-sample-app/app-vite-react/src/app/inputs/InputDarkThemeToggle/index.ts @@ -0,0 +1 @@ +export * from "./InputDarkThemeToggle"; diff --git a/packages/mern-sample-app/app-vite-react/src/app/inputs/InputLayoutToggle/InputLayoutToggle.tsx b/packages/mern-sample-app/app-vite-react/src/app/inputs/InputLayoutToggle/InputLayoutToggle.tsx new file mode 100644 index 00000000..f4db51ca --- /dev/null +++ b/packages/mern-sample-app/app-vite-react/src/app/inputs/InputLayoutToggle/InputLayoutToggle.tsx @@ -0,0 +1,26 @@ +import { TableChart, ViewSidebar } from "@mui/icons-material"; +import { IconButton, Tooltip } from "@mui/material"; +import { useTranslation } from "@org/app-vite-react/lib/i18next"; +import { type LayoutVariant } from "@org/app-vite-react/app/layout"; + +export type InputLayoutToggleProps = { + value: LayoutVariant; + onChange: (value: LayoutVariant) => void; +}; + +export function InputLayoutToggle({ value, onChange }: InputLayoutToggleProps) { + const t = useTranslation(); + const isHorizontalLayout = value === "HorizontalLayout"; + + const onClick = () => { + onChange(isHorizontalLayout ? "SidebarLayout" : "HorizontalLayout"); + }; + + return ( + + + {isHorizontalLayout ? : } + + + ); +} diff --git a/packages/mern-sample-app/app-vite-react/src/components/inputs/InputLayoutToggle/index.ts b/packages/mern-sample-app/app-vite-react/src/app/inputs/InputLayoutToggle/index.ts similarity index 100% rename from packages/mern-sample-app/app-vite-react/src/components/inputs/InputLayoutToggle/index.ts rename to packages/mern-sample-app/app-vite-react/src/app/inputs/InputLayoutToggle/index.ts diff --git a/packages/mern-sample-app/app-vite-react/src/app/inputs/InputLocaleSelect/InputLocaleSelect.tsx b/packages/mern-sample-app/app-vite-react/src/app/inputs/InputLocaleSelect/InputLocaleSelect.tsx new file mode 100644 index 00000000..e7ad1c27 --- /dev/null +++ b/packages/mern-sample-app/app-vite-react/src/app/inputs/InputLocaleSelect/InputLocaleSelect.tsx @@ -0,0 +1,61 @@ +import { Translate } from "@mui/icons-material"; +import { Box, IconButton, Menu, MenuItem, Tooltip, Typography } from "@mui/material"; +import { LANGUAGE_LIST, useTranslation, type I18nLocale } from "@org/app-vite-react/lib/i18next"; +import { TODO } from "@org/lib-commons"; +import { useMemo, useState } from "react"; + +function getLocaleNativeName(locale: I18nLocale) { + const name: string = new Intl.DisplayNames([locale], { + type: "language", + }).of(locale)!; + return name.charAt(0).toUpperCase() + name.slice(1); +} + +export type InputLocaleSelectProps = { + value: I18nLocale; + onChange: (value: I18nLocale) => void; +}; + +export function InputLocaleSelect({ value, onChange }: InputLocaleSelectProps) { + const t = useTranslation(); + const items = LANGUAGE_LIST; + const [anchorEl, setAnchorEl] = useState(null); + const open = Boolean(anchorEl); + const handleClickListItem = (event: TODO) => { + setAnchorEl(event.currentTarget); + }; + + const handleMenuItemClick = (item: I18nLocale) => { + onChange(item); + setAnchorEl(null); + }; + + const handleClose = () => { + setAnchorEl(null); + }; + + const selectedItem: I18nLocale | undefined = useMemo( + () => items.find(item => value === item), + // eslint-disable-next-line react-hooks/exhaustive-deps + [items, value], + ); + + return ( + <> + + + + {selectedItem ? {selectedItem.toUpperCase()} : } + + + + + {items.map(item => ( + handleMenuItemClick(item)}> + {getLocaleNativeName(item)} + + ))} + + + ); +} diff --git a/packages/mern-sample-app/app-vite-react/src/components/inputs/InputLocaleSelect/index.ts b/packages/mern-sample-app/app-vite-react/src/app/inputs/InputLocaleSelect/index.ts similarity index 100% rename from packages/mern-sample-app/app-vite-react/src/components/inputs/InputLocaleSelect/index.ts rename to packages/mern-sample-app/app-vite-react/src/app/inputs/InputLocaleSelect/index.ts diff --git a/packages/mern-sample-app/app-vite-react/src/components/navigation/ButtonHoverMenu/ButtonHoverMenu.tsx b/packages/mern-sample-app/app-vite-react/src/app/layout/HorizontalLayout/ButtonHoverMenu.tsx similarity index 100% rename from packages/mern-sample-app/app-vite-react/src/components/navigation/ButtonHoverMenu/ButtonHoverMenu.tsx rename to packages/mern-sample-app/app-vite-react/src/app/layout/HorizontalLayout/ButtonHoverMenu.tsx diff --git a/packages/mern-sample-app/app-vite-react/src/components/layout/variants/HorizontalNavVariant.tsx b/packages/mern-sample-app/app-vite-react/src/app/layout/HorizontalLayout/HorizontalLayout.tsx similarity index 89% rename from packages/mern-sample-app/app-vite-react/src/components/layout/variants/HorizontalNavVariant.tsx rename to packages/mern-sample-app/app-vite-react/src/app/layout/HorizontalLayout/HorizontalLayout.tsx index 52b9c078..04a7ff36 100644 --- a/packages/mern-sample-app/app-vite-react/src/components/layout/variants/HorizontalNavVariant.tsx +++ b/packages/mern-sample-app/app-vite-react/src/app/layout/HorizontalLayout/HorizontalLayout.tsx @@ -3,12 +3,12 @@ import type { Breakpoint } from "@mui/material"; import * as mui from "@mui/material"; import type { TODO } from "@org/lib-commons"; import { Fragment } from "react"; -import { useTranslation } from "react-i18next"; import { useNavigate } from "react-router-dom"; -import type { OriginPosition } from "@org/app-vite-react/components/navigation/ButtonHoverMenu"; -import { ButtonHoverMenu } from "@org/app-vite-react/components/navigation/ButtonHoverMenu"; -import * as RouteTypes from "@org/app-vite-react/routeTypes"; +import * as RouteTypes from "@org/app-vite-react/route-typings"; import { reactServer } from "@org/app-vite-react/server"; +import { useTranslation } from "@org/app-vite-react/lib/i18next"; +import { ButtonHoverMenu, type OriginPosition } from "./ButtonHoverMenu"; +import { isAnyRouteActive } from "../Layout"; export type HorizontalNavItemProps = { item: RouteTypes.NavigationRoute; @@ -24,7 +24,7 @@ function HorizontalNavItem({ transformX: "left", }, }: HorizontalNavItemProps) { - const { t } = useTranslation(); + const t = useTranslation(); const navigate = useNavigate(); const hasChildren = "children" in item && item.children; const children: RouteTypes.NavigationRoute[] = (hasChildren ? item.children : []) as TODO; @@ -32,7 +32,7 @@ function HorizontalNavItem({ const borderRadius = isMainNavButton ? 1 : undefined; if (hasChildren) { - const isAnyRouteActiveInGroup = RouteTypes.isAnyRouteActive(children); + const isAnyRouteActiveInGroup = isAnyRouteActive(children); return (