Merge pull request #18 from brunotot/prettify-app-vite-react

chore: prettify app-vite-react in file structure

packages/app-vite-react/package.json

@@ -11,7 +11,7 @@
     "build": "tsc && vite build --emptyOutDir",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "start": "serve -s dist",
-    "loadTranslationTypes": "i18next-resources-for-ts interface -i ./src/public/locales/en -o ./src/@types/resources.d.ts"
+    "loadTranslationTypes": "i18next-resources-for-ts interface -i ./public/locales/en -o ./src/lib/i18next/@types/resources.d.ts"
   },
   "dependencies": {
     "@emotion/react": "^11.13.3",

packages/app-vite-react/src/ReactApp.tsx

@@ -4,18 +4,17 @@ import type { RouteObject } from "react-router-dom";
 import { Outlet, RouterProvider, createBrowserRouter } from "react-router-dom";
 import { CssBaseline } from "@mui/material";
 
-import type { NavigationRoutes } from "@org/app-vite-react/config/NavigationRoute.config";
+import { type NavigationRoutes } from "@org/app-vite-react/routeTypes";
 
 import { Layout } from "@org/app-vite-react/components/layout/Layout";
-import type { Provider } from "@org/app-vite-react/components/providers/Providers";
-import { Providers } from "@org/app-vite-react/components/providers/Providers";
-import { StylesProvider } from "@org/app-vite-react/components/providers/impl/StylesProvider";
-import { ThemeProvider } from "@org/app-vite-react/components/providers/impl/MuiThemeProvider";
-import { QueryClientProvider } from "@org/app-vite-react/components/providers/impl/QueryClientProvider";
+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";
 
 import { Status404Page } from "@org/app-vite-react/app/pages/Status404";
 import { RootErrorPage } from "@org/app-vite-react/app/pages/RootError";
-import { KeycloakAuthProvider } from "./components/providers";
+import { KeycloakProvider } from "@org/app-vite-react/lib/keycloak-js";
+import { initI18n } from "@org/app-vite-react/lib/i18next/i18n";
 
 type ReactAppConfig = {
   providers?: Provider[];
@@ -40,7 +39,7 @@ function convertToRoutes(data: NavigationRoutes): RouteObject[] {
 export class ReactApp {
   static readonly #DEFAULT_ROOT_ERROR_PAGE = (<RootErrorPage />);
   static readonly #COMMON_PROVIDERS = [
-    KeycloakAuthProvider,
+    KeycloakProvider,
     QueryClientProvider,
     StylesProvider,
     ThemeProvider,
@@ -58,7 +57,7 @@ export class ReactApp {
   router!: ReturnType<typeof createBrowserRouter>;
 
   constructor() {
-    // NOOP
+    initI18n();
   }
 
   run(config: ReactAppConfig) {

packages/app-vite-react/src/app/pages/Home/HomePage.tsx

@@ -9,7 +9,7 @@ import { ServerDatatable } from "@org/app-vite-react/components/semantics/Datata
 import { DEFAULT_PAGINATION_OPTIONS } from "@org/app-vite-react/components/semantics/Datatable/types";
 import { DatatableContainer } from "@org/app-vite-react/components/semantics/Datatable/components/DatatableContainer";
 import { FixedBadge } from "@org/app-vite-react/app/pages/Home/FixedBadge";
-import { apiClient } from "@org/app-vite-react/setup/apiClient.setup";
+import { apiClient } from "@org/app-vite-react/lib/@ts-rest";
 
 function buildPaginationQueryParams(paginationOptions: PaginationOptions): {
   paginationOptions: string;

packages/app-vite-react/src/app/pages/Home/UserCreateFormButton.tsx

@@ -3,7 +3,7 @@ import { useState } from "react";
 import type { TODO, User } from "@org/lib-commons";
 import { UserForm } from "@org/app-vite-react/app/pages/Home/UserForm";
 import { Add } from "@mui/icons-material";
-import { apiClient } from "@org/app-vite-react/setup/apiClient.setup";
+import { apiClient } from "@org/app-vite-react/lib/@ts-rest";
 
 export type UserCreateFormButtonProps = {
   afterUpdate?: () => void;

packages/app-vite-react/src/app/routes.tsx

@@ -1,6 +1,6 @@
 import * as icons from "@mui/icons-material";
 
-import type { NavigationRoutes } from "@org/app-vite-react/config/NavigationRoute.config";
+import type { NavigationRoutes } from "@org/app-vite-react/routeTypes";
 import { HomePage } from "@org/app-vite-react/app/pages/Home";
 
 export const routes: NavigationRoutes = [

packages/app-vite-react/src/components/inputs/InputLocaleSelect/InputLocaleSelect.tsx

@@ -3,7 +3,7 @@ import { Typography } from "@mui/material";
 import { useTranslation } from "react-i18next";
 import { InputIconButtonSelect } from "@org/app-vite-react/components/inputs/InputIconButtonSelect/InputIconButtonSelect";
 import { sigLocale } from "@org/app-vite-react/signals/sigLocale";
-import type { Locale } from "@org/app-vite-react/config/i18n.config";
+import type { Locale } from "@org/app-vite-react/lib/i18next";
 
 function getLocaleNativeName(locale: Locale) {
   const name: string = new Intl.DisplayNames([locale], {

packages/app-vite-react/src/components/layout/variants/HorizontalNavVariant.tsx

@@ -1,29 +1,17 @@
 import { ChevronRight, ExpandMore } from "@mui/icons-material";
 import type { Breakpoint } from "@mui/material";
-import {
-  Box,
-  Container,
-  List,
-  ListItemButton,
-  ListItemIcon,
-  ListItemText,
-  Stack,
-} 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 type {
-  NavigationRoute,
-  NavigationRouteSingle,
-} from "@org/app-vite-react/config/NavigationRoute.config";
-import { isAnyRouteActive } from "@org/app-vite-react/config/NavigationRoute.config";
-import { reactServer } from "@org/app-vite-react/setup/reactServer.setup";
+import * as RouteTypes from "@org/app-vite-react/routeTypes";
+import { reactServer } from "@org/app-vite-react/server";
 
 export type HorizontalNavItemProps = {
-  item: NavigationRoute;
+  item: RouteTypes.NavigationRoute;
   dropdownPosition?: OriginPosition;
 };
 
@@ -39,17 +27,17 @@ function HorizontalNavItem({
   const { t } = useTranslation();
   const navigate = useNavigate();
   const hasChildren = "children" in item && item.children;
-  const children: NavigationRoute[] = (hasChildren ? item.children : []) as TODO;
+  const children: RouteTypes.NavigationRoute[] = (hasChildren ? item.children : []) as TODO;
   const isMainNavButton = dropdownPosition.anchorY === "bottom";
   const borderRadius = isMainNavButton ? 1 : undefined;
 
   if (hasChildren) {
-    const isAnyRouteActiveInGroup = isAnyRouteActive(children);
+    const isAnyRouteActiveInGroup = RouteTypes.isAnyRouteActive(children);
     return (
       <ButtonHoverMenu
         position={dropdownPosition}
         renderButton={(hoverProps, popupState) => (
-          <ListItemButton
+          <mui.ListItemButton
             selected={isMainNavButton ? isAnyRouteActiveInGroup : undefined}
             sx={{
               flexGrow: 0,
@@ -66,12 +54,12 @@ function HorizontalNavItem({
             }}
             {...hoverProps}
           >
-            {item.icon && <ListItemIcon>{item.icon}</ListItemIcon>}
-            <ListItemText primary={item.label(t)} />
-            <ListItemIcon sx={{ minWidth: 0 }}>
+            {item.icon && <mui.ListItemIcon>{item.icon}</mui.ListItemIcon>}
+            <mui.ListItemText primary={item.label(t)} />
+            <mui.ListItemIcon sx={{ minWidth: 0 }}>
               {isMainNavButton ? <ExpandMore /> : <ChevronRight />}
-            </ListItemIcon>
-          </ListItemButton>
+            </mui.ListItemIcon>
+          </mui.ListItemButton>
         )}
       >
         {children.map((child, index) => (
@@ -90,7 +78,7 @@ function HorizontalNavItem({
     );
   }
 
-  const itemSingle = item as NavigationRouteSingle;
+  const itemSingle = item as RouteTypes.NavigationRouteSingle;
 
   if (itemSingle.hidden === true) {
     return <></>;
@@ -99,7 +87,7 @@ function HorizontalNavItem({
   const isSelected = location.pathname === itemSingle.path;
 
   return (
-    <ListItemButton
+    <mui.ListItemButton
       sx={{
         flexGrow: 0,
         borderRadius,
@@ -109,9 +97,9 @@ function HorizontalNavItem({
       selected={isSelected}
       onClick={() => navigate(itemSingle.path)}
     >
-      {item.icon && <ListItemIcon>{item.icon}</ListItemIcon>}
-      <ListItemText primary={item.label(t)} />
-    </ListItemButton>
+      {item.icon && <mui.ListItemIcon>{item.icon}</mui.ListItemIcon>}
+      <mui.ListItemText primary={item.label(t)} />
+    </mui.ListItemButton>
   );
 }
 
@@ -127,22 +115,22 @@ export function HorizontalNavVariant({
   hidden = false,
 }: HorizontalNavVariantProps) {
   return (
-    <Box
+    <mui.Box
       sx={{
         backgroundColor,
         display: hidden ? "none" : undefined,
       }}
       paddingBlock={1}
     >
-      <Container sx={{ paddingInline: `0 !important` }} maxWidth={maxWidth}>
-        <List dense component={Stack} direction="row">
+      <mui.Container sx={{ paddingInline: `0 !important` }} maxWidth={maxWidth}>
+        <mui.List dense component={mui.Stack} direction="row">
           {reactServer.routes.map((item, index) => (
             <Fragment key={index}>
               <HorizontalNavItem item={item} />
             </Fragment>
           ))}
-        </List>
-      </Container>
-    </Box>
+        </mui.List>
+      </mui.Container>
+    </mui.Box>
   );
 }

packages/app-vite-react/src/components/layout/variants/SidebarNavVariant.tsx

@@ -5,15 +5,11 @@ import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useLocation, useNavigate } from "react-router-dom";
 import { Fragment } from "react/jsx-runtime";
-import type {
-  NavigationRoute,
-  NavigationRouteSingle,
-} from "@org/app-vite-react/config/NavigationRoute.config";
-import { isAnyRouteActive } from "@org/app-vite-react/config/NavigationRoute.config";
-import { reactServer } from "@org/app-vite-react/setup/reactServer.setup";
+import { reactServer } from "@org/app-vite-react/server";
+import * as RouteTypes from "@org/app-vite-react/routeTypes";
 
 export type SidebarNavItemProps = {
-  item: NavigationRoute;
+  item: RouteTypes.NavigationRoute;
   indent?: number;
 };
 
@@ -22,7 +18,7 @@ function SidebarNavItem({ item, indent = 0 }: SidebarNavItemProps) {
   const variant = item?.variant ?? "single";
   const renderChildrenPersistent = hasChildren && variant === "group";
   const renderChildrenMenu = hasChildren && variant === "menu";
-  const children: NavigationRoute[] = (hasChildren ? item.children : []) as TODO;
+  const children: RouteTypes.NavigationRoute[] = (hasChildren ? item.children : []) as TODO;
   const [open, setOpen] = useState(false);
   const navigate = useNavigate();
   const location = useLocation();
@@ -60,7 +56,7 @@ function SidebarNavItem({ item, indent = 0 }: SidebarNavItemProps) {
             paddingLeft: `calc(1.5rem + ${indent}rem)`,
             borderTopRightRadius: "2rem",
             borderBottomRightRadius: "2rem",
-            backgroundColor: isAnyRouteActive(children)
+            backgroundColor: RouteTypes.isAnyRouteActive(children)
               ? "var(--mui-palette-action-hover)"
               : undefined,
           }}
@@ -79,7 +75,7 @@ function SidebarNavItem({ item, indent = 0 }: SidebarNavItemProps) {
     );
   }
 
-  const itemSingle = item as NavigationRouteSingle;
+  const itemSingle = item as RouteTypes.NavigationRouteSingle;
 
   if (itemSingle.hidden === true) {
     return <></>;

packages/app-vite-react/src/components/providers/Providers.tsx

@@ -7,7 +7,7 @@ const nest = (children: React.ReactNode, Provider: React.FC<{ children: React.Re
   <Provider>{children}</Provider>
 );
 
-// Type for the props of the Providers component
+/** @hidden */
 export type ProvidersProps = React.PropsWithChildren<{
   list: Array<React.FC<{ children: React.ReactNode }>>;
 }>;

packages/app-vite-react/src/components/semantics/Header/UserMenuButton.tsx

@@ -12,7 +12,7 @@ import Settings from "@mui/icons-material/Settings";
 import Logout from "@mui/icons-material/Logout";
 import { type TODO } from "@org/lib-commons";
 import { sigUser } from "@org/app-vite-react/signals/sigUser";
-import { sigKeycloak } from "@org/app-vite-react/signals/sigKeycloak";
+import { keycloakLogout } from "@org/app-vite-react/lib/keycloak-js";
 
 export function UserMenuButton() {
   const [anchorEl, setAnchorEl] = React.useState(null);
@@ -24,8 +24,7 @@ export function UserMenuButton() {
     setAnchorEl(null);
   };
   const handleLogout = () => {
-    sigKeycloak.value!.logout();
-    //handleClose();
+    keycloakLogout();
   };
   return (
     <React.Fragment>

packages/app-vite-react/src/lib/@mui/index.ts

@@ -0,0 +1,2 @@
+export * from "./providers/MuiStylesProvider";
+export * from "./providers/MuiThemeProvider";

packages/app-vite-react/src/lib/@tanstack/index.ts

@@ -0,0 +1 @@
+export * from "./QueryClientProvider";

packages/app-vite-react/src/setup/apiClient.setup.ts → packages/app-vite-react/src/lib/@ts-rest/apiClient.ts

@@ -1,8 +1,6 @@
 import { initClient } from "@ts-rest/core";
 import { contracts } from "@org/lib-api-client";
 
-console.log(import.meta.env);
-
 const API_CLIENT_URL = import.meta.env.VITE_API_CLIENT_URL;
 
 if (!API_CLIENT_URL) {

packages/app-vite-react/src/lib/@ts-rest/index.ts

@@ -0,0 +1 @@
+export * from "./apiClient";

packages/app-vite-react/src/lib/i18next/i18n.ts

@@ -0,0 +1,21 @@
+import i18n, { type TFunction } from "i18next";
+import LanguageDetector from "i18next-browser-languagedetector";
+import Backend from "i18next-http-backend";
+import { initReactI18next } from "react-i18next";
+
+export type I18nTranslateFn = TFunction<"translation", undefined>;
+
+export type Locale = "hr" | "en";
+
+export function initI18n() {
+  i18n
+    .use(Backend)
+    .use(LanguageDetector)
+    .use(initReactI18next)
+    .init({
+      fallbackLng: "en",
+      interpolation: {
+        escapeValue: false,
+      },
+    });
+}

packages/app-vite-react/src/lib/i18next/index.ts

@@ -0,0 +1 @@
+export * from "./i18n";

packages/app-vite-react/src/setup/keycloakClient.setup.ts → packages/app-vite-react/src/lib/keycloak-js/KeycloakClient.ts

@@ -5,3 +5,7 @@ export const keycloakClient = new Keycloak({
   url: import.meta.env.VITE_API_KEYCLOAK_URL,
   clientId: "app-vite-react",
 });
+
+export async function keycloakLogout() {
+  await keycloakClient.logout();
+}