Skip to content

Commit

Permalink
Merge pull request #16 from brunotot/bump-mui-to-v6
Browse files Browse the repository at this point in the history
chore: bump mui to v6
  • Loading branch information
brunotot authored Sep 3, 2024
2 parents 13cf091 + 33df309 commit 077177a
Show file tree
Hide file tree
Showing 21 changed files with 607 additions and 378 deletions.
13 changes: 13 additions & 0 deletions .vscode/launch.json
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,19 @@
"outputCapture": "std",
"autoAttachChildProcesses": false
},
{
"name": "@org: reinstall",
"runtimeArgs": ["run", "reinstall"],
"presentation": { "group": "1" },
// Defaults below
"runtimeVersion": "21.7.0",
"type": "node",
"request": "launch",
"runtimeExecutable": "npm",
"console": "integratedTerminal",
"outputCapture": "std",
"autoAttachChildProcesses": false
},
{
"name": "@org: lint",
"runtimeArgs": ["run", "lint"],
Expand Down
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
"test": "npm run app-node-express:test && npm run app-vite-react:test && npm run lib-commons:test && npm run lib-api-client:test",
"build": "npm run app-node-express:build && npm run app-vite-react:build && npm run lib-commons:build && npm run lib-api-client:build",
"clean": "rm -rf docs && npm run app-node-express:clean && npm run app-vite-react:clean && npm run lib-commons:clean && npm run lib-api-client:clean",
"reinstall": "rm -rf node_modules packages/app-node-express/node_modules packages/app-vite-react/node_modules packages/lib-commons/node_modules packages/lib-api-client/node_modules && pnpm i",
"lint": "npm run app-node-express:lint && npm run app-vite-react:lint && npm run lib-commons:lint && npm run lib-api-client:lint",
"writeTypedoc": "bash assets/sh/typedoc.sh",
"app-node-express:start": "npm run start --prefix packages/app-node-express",
Expand Down
27 changes: 16 additions & 11 deletions packages/app-vite-react/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,16 +14,18 @@
"loadTranslationTypes": "i18next-resources-for-ts interface -i ./src/public/locales/en -o ./src/@types/resources.d.ts"
},
"dependencies": {
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.0",
"@mui/icons-material": "^5.15.14",
"@mui/lab": "5.0.0-alpha.169",
"@mui/material": "^5.15.14",
"@mui/styles": "^5.15.14",
"@mui/x-tree-view": "^7.0.0",
"@org/lib-commons": "workspace:*",
"@emotion/react": "^11.13.3",
"@emotion/styled": "^11.13.0",
"@mui/icons-material": "^6.0.2",
"@mui/lab": "6.0.0-beta.9",
"@mui/material": "^6.0.2",
"@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",
"@ts-rest/core": "^3.45.0",
"@ts-rest/react-query": "^3.45.0",
Expand All @@ -32,23 +34,26 @@
"i18next": "^23.10.1",
"i18next-browser-languagedetector": "^7.2.0",
"i18next-http-backend": "^2.5.0",
"jwt-decode": "^4.0.0",
"keycloak-js": "^25.0.4",
"material-ui-popup-state": "^5.1.0",
"polished": "^4.3.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-i18next": "^14.1.0",
"react-router-dom": "^6.22.3",
"react-use": "^17.5.0"
"react-use": "^17.5.0",
"styled-components": "^6.1.13"
},
"devDependencies": {
"@preact/signals-react-transform": "^0.3.1",
"@types/react": "^18.2.56",
"@types/react-dom": "^18.2.19",
"@vitejs/plugin-react": "^4.2.1",
"vite": "^5.1.4",
"i18next-resources-for-ts": "^1.5.0",
"locize-cli": "^8.0.0",
"serve": "^14.2.1",
"typescript": "^5.2.2"
"typescript": "^5.2.2",
"vite": "^5.1.4"
}
}
45 changes: 11 additions & 34 deletions packages/app-vite-react/src/ReactApp.tsx
Original file line number Diff line number Diff line change
@@ -1,14 +1,10 @@
import type { ReactNode } from "react";
import React from "react";
import ReactDOM from "react-dom/client";
import { type Signal, signal } from "@preact/signals-react";
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 { MuiThemeConfig, MuiThemeValue } from "@org/app-vite-react/config/MuiTheme.config";
import { createTheme } from "@org/app-vite-react/config/MuiTheme.config";

import { Layout } from "@org/app-vite-react/components/layout/Layout";
import type { Provider } from "@org/app-vite-react/components/providers/Providers";
Expand All @@ -19,20 +15,12 @@ import { QueryClientProvider } from "@org/app-vite-react/components/providers/im

import { Status404Page } from "@org/app-vite-react/app/pages/Status404";
import { RootErrorPage } from "@org/app-vite-react/app/pages/RootError";

type ReactAppSignals = {
theme: Signal<MuiThemeValue>;
};
import { KeycloakAuthProvider } from "./components/providers";

type ReactAppConfig = {
providers?: Provider[];
errorElement?: ReactNode;
routes: NavigationRoutes;
theme: MuiThemeConfig;
};

type DeepPartial<T> = {
[K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];
};

function convertToRoutes(data: NavigationRoutes): RouteObject[] {
Expand All @@ -51,15 +39,19 @@ function convertToRoutes(data: NavigationRoutes): RouteObject[] {

export class ReactApp {
static readonly #DEFAULT_ROOT_ERROR_PAGE = (<RootErrorPage />);
static readonly #COMMON_PROVIDERS = [QueryClientProvider, StylesProvider, ThemeProvider];
static readonly #COMMON_PROVIDERS = [
KeycloakAuthProvider,
QueryClientProvider,
StylesProvider,
ThemeProvider,
];

// prettier-ignore
static readonly #COMMON_ROUTES: NavigationRoutes = [
//{ label: () => "Configure Colors", Component: ThemeColorConfigurationPage, path: "/configure-colors", icon: <Home /> },
{ label: () => "", Component: Status404Page, path: "*", hidden: true },
];

signals!: ReactAppSignals;
config!: ReactAppConfig;
routes!: NavigationRoutes;
providers!: Provider[];
Expand All @@ -71,36 +63,21 @@ export class ReactApp {

run(config: ReactAppConfig) {
this.#loadConfig(config);
ReactDOM.createRoot(document.getElementById("root")!).render(
/*ReactDOM.createRoot(document.getElementById("root")!).render(
<React.StrictMode>
<RouterProvider router={this.router} />
</React.StrictMode>,
);*/
ReactDOM.createRoot(document.getElementById("root")!).render(
<RouterProvider router={this.router} />,
);
}

changeTheme(theme: DeepPartial<MuiThemeConfig>) {
this.signals.theme.value = this.#loadTheme({
config: { ...this.config.theme.config, ...theme.config },
colors: { ...this.config.theme.colors, ...theme.colors },
});
}

#loadTheme(theme: MuiThemeConfig) {
return createTheme(theme);
}

#loadConfig(config: ReactAppConfig) {
this.config = config;
this.routes = [...config.routes, ...ReactApp.#COMMON_ROUTES];
this.providers = [...(config.providers ?? []), ...ReactApp.#COMMON_PROVIDERS];
this.router = this.#createBrowserRouter();
this.signals = this.#buildSignals(config);
}

#buildSignals({ theme }: ReactAppConfig): ReactAppSignals {
return {
theme: signal(this.#loadTheme(theme)),
};
}

#createBrowserRouter() {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { Box, Card, CardContent, TextField, Typography, useTheme } from "@mui/material";
import { reactServer } from "@org/app-vite-react/setup/reactServer.setup";

export function ThemeColorConfigurationPage() {
const theme = useTheme();
Expand All @@ -16,10 +15,11 @@ export function ThemeColorConfigurationPage() {
sx={{ "& label": { fontWeight: "bold" } }}
color="primary"
label="Primary"
onChange={e => {
reactServer.changeTheme({
onChange={() => {
/*reactServer.changeTheme({
colors: { primary: e.target.value },
});
});*/
console.log("TODO!!!");
}}
value={theme.palette.primary.main}
type="color"
Expand Down
112 changes: 0 additions & 112 deletions packages/app-vite-react/src/app/theme.ts

This file was deleted.

Original file line number Diff line number Diff line change
@@ -1,22 +1,20 @@
import { DarkMode, LightMode } from "@mui/icons-material";
import { IconButton, Tooltip } from "@mui/material";
import { useColorScheme } from "@mui/material/styles";
import { sigThemeOpts } from "@org/app-vite-react/signals/sigTheme";
import { useTranslation } from "react-i18next";

export function InputThemeToggle() {
const { t } = useTranslation();
const { mode, setMode } = useColorScheme();
const isDarkMode = mode === "dark";

const isDarkMode = !!sigThemeOpts.value?.dark;

const handleToggle = () => {
setMode(mode === "dark" ? "light" : "dark");
sigThemeOpts.value = { dark: !isDarkMode };
};

return (
<Tooltip title={isDarkMode ? t("setDarkMode") : t("setLightMode")}>
<IconButton onClick={handleToggle}>
{isDarkMode ? <DarkMode /> : <LightMode />}
</IconButton>
<IconButton onClick={handleToggle}>{isDarkMode ? <DarkMode /> : <LightMode />}</IconButton>
</Tooltip>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import { StrictMode, type PropsWithChildren } from "react";
import { ReactKeycloakProvider, useKeycloak } from "@react-keycloak/web";
import { keycloakClient } from "@org/app-vite-react/setup/keycloakClient.setup";
import { decodeUserData, sigUser } from "@org/app-vite-react/signals/sigUser";
import { sigToken } from "@org/app-vite-react/signals/sigToken";
import { sigKeycloak } from "@org/app-vite-react/signals/sigKeycloak";

const KeycloakAuthContent = ({ children }: PropsWithChildren) => {
const { keycloak, initialized } = useKeycloak();

if (!initialized) {
return <div>Loading...</div>;
}

if (!keycloak.authenticated) {
return <div>Not authenticated</div>;
}

sigKeycloak.value = keycloak;
return <>{children}</>;
};

export function KeycloakAuthProvider({ children }: PropsWithChildren) {
return (
<ReactKeycloakProvider
initOptions={{ onLoad: "login-required" }}
authClient={keycloakClient}
onTokens={({ token }) => {
if (!token) {
console.error("No token received from Keycloak");
return;
}
sigToken.value = token;
sigUser.value = decodeUserData(token);
}}
>
<KeycloakAuthContent>
<StrictMode>{children}</StrictMode>
</KeycloakAuthContent>
</ReactKeycloakProvider>
);
}
Loading

0 comments on commit 077177a

Please sign in to comment.