chore: file structure refactor for app-vite-react

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"

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"
   }
 }

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"
 }

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"
 }

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 }>) => (
+  <Provider>{children}</Provider>
+);
 
-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<React.FC<{ children: React.ReactNode }>>;
+}>;
+
+// Providers component definition
+const Providers: React.FC<ProvidersProps> = ({ 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 = (<RootErrorPage />);
   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: <Home /> },
-      { label: () => "",                 Component: Status404Page,               path: "*",                 hidden: true },
-    ];
-
   config!: ReactAppConfig;
-  routes!: NavigationRoutes;
+  routes!: NavigationRoute[];
+  layoutElement!: Provider;
   providers!: Provider[];
   router!: ReturnType<typeof createBrowserRouter>;
 
   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: (
           <Providers list={this.providers}>

packages/mern-sample-app/app-vite-react/src/components/semantics/Datatable/components/DtSortableCell/DtSortableCell.tsx → 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;

packages/mern-sample-app/app-vite-react/src/app/components/Datatable/components/index.ts

@@ -0,0 +1,2 @@
+export * from "./DatatableContainer";
+export * from "./DtSortableCell";

packages/mern-sample-app/app-vite-react/src/components/semantics/Datatable/impl/ClientDatatable/ClientDatatable.tsx → 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<T>({
   data,

packages/mern-sample-app/app-vite-react/src/components/semantics/Datatable/impl/ClientDatatable/types.ts → 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<T> = (o1: T, o2: T) => number;
 

packages/mern-sample-app/app-vite-react/src/components/semantics/Datatable/impl/ServerDatatable/ServerDatatable.tsx → 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<T>({
   data,

packages/mern-sample-app/app-vite-react/src/components/semantics/Datatable/impl/ServerDatatable/types.ts → 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<T> = DtBaseColumn<T> & {
   sort?: string;

packages/mern-sample-app/app-vite-react/src/app/components/Datatable/impl/index.ts

@@ -0,0 +1,2 @@
+export * from "./ClientDatatable";
+export * from "./ServerDatatable";

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";

packages/mern-sample-app/app-vite-react/src/components/semantics/Footer/Footer.tsx → 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;

packages/mern-sample-app/app-vite-react/src/components/semantics/Header/Header.tsx → 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<Theme>;
 
@@ -146,9 +147,20 @@ export function Header({
           </Box>
 
           <Box display="flex" alignItems="center">
-            <InputThemeToggle />
-            <InputLocaleSelect />
-            {matchesDesktop && <InputLayoutToggle />}
+            <InputDarkThemeToggle
+              value={!!sigThemeOpts.value?.dark}
+              onChange={dark => (sigThemeOpts.value = { dark })}
+            />
+            <InputLocaleSelect
+              value={sigLocale.value}
+              onChange={locale => (sigLocale.value = locale)}
+            />
+            {matchesDesktop && (
+              <InputLayoutToggle
+                value={sigLayout.value}
+                onChange={layout => (sigLayout.value = layout)}
+              />
+            )}
             <UserMenuButton />
           </Box>
         </Box>