Enable to augment the MUI theme

Author: garronej

src/lib/colors.ts

@@ -1,31 +1,31 @@
-import { useMemo } from "react";
 import { getColorOptions } from "./generatedFromCss/getColorOptions";
 import type { ColorOptions } from "./generatedFromCss/getColorOptions";
 import { getColorDecisions } from "./generatedFromCss/getColorDecisions";
 import type { ColorDecisions } from "./generatedFromCss/getColorDecisions";
 import { useIsDark } from "./darkMode";
+import { memoize } from "./tools/memoize";
 
 export type ColorTheme = {
     isDark: boolean;
     decisions: ColorDecisions;
     options: ColorOptions;
 };
 
-export function useColors(): ColorTheme {
-    const { isDark } = useIsDark();
-
-    const options = useMemo(() => getColorOptions({ isDark }), [isDark]);
-
-    const decisions = useMemo(() => getColorDecisions({ "colorOptions": options }), [options]);
+export const getColors = memoize(
+    (isDark: boolean): ColorTheme => {
+        const options = getColorOptions({ isDark });
 
-    const colorTheme = useMemo(
-        (): ColorTheme => ({
+        return {
             isDark,
             options,
-            decisions
-        }),
-        [isDark]
-    );
+            "decisions": getColorDecisions({ "colorOptions": options })
+        };
+    },
+    { "max": 1 }
+);
+
+export function useColors(): ColorTheme {
+    const { isDark } = useIsDark();
 
-    return colorTheme;
+    return getColors(isDark);
 }

src/lib/tools/memoize.ts

@@ -2,19 +2,31 @@ export function memoize<Args extends (number | boolean | string)[], R>(
     fn: (...args: Args) => R,
     options?: {
         argsLength?: number;
+        max?: number;
     }
 ): (...args: Args) => R {
-    const cache: Record<string, R> = {};
+    const cache = new Map<string, R>();
 
-    const { argsLength = fn.length } = options ?? {};
+    const { argsLength = fn.length, max = Infinity } = options ?? {};
 
     return ((...args: Args) => {
         const key = JSON.stringify(args.slice(0, argsLength).join("-sIs9sAslOdeWlEdIos3-"));
 
-        if (key in cache) {
-            return cache[key];
+        if (cache.has(key)) {
+            return cache.get(key);
         }
 
-        return (cache[key] = fn(...args));
+        if (max === cache.size) {
+            for (const key of cache.keys()) {
+                cache.delete(key);
+                break;
+            }
+        }
+
+        const value = fn(...args);
+
+        cache.set(key, value);
+
+        return value;
     }) as any;
 }

src/mui.tsx

@@ -4,11 +4,21 @@ import type { ReactNode } from "react";
 import { breakpointValues, breakpointValuesUnit } from "./lib/generatedFromCss/breakpoints";
 import type { Theme as MuiTheme } from "@mui/material/styles";
 import { createTheme, ThemeProvider as MuiThemeProvider } from "@mui/material/styles";
-import { getColorDecisions } from "./lib/generatedFromCss/getColorDecisions";
-import { getColorOptions } from "./lib/generatedFromCss/getColorOptions";
+import { getColors } from "./lib/colors";
 import { useIsDark } from "./lib/darkMode";
 import { typography } from "./lib/generatedFromCss/typography";
 import { spacingTokenByValue } from "./lib/generatedFromCss/spacing";
+import type { ColorTheme } from "./lib/colors";
+//import type { Components } from "@mui/material/styles";
+
+/*
+type NonAugmentedBaseMuiTheme = NonNullable<MuiTheme["components"]> extends Components<infer BaseMuiTheme> ? BaseMuiTheme : undefined;
+
+
+export type NonAugmentedMuiTheme = NonAugmentedBaseMuiTheme & {
+    components?: Components<NonAugmentedBaseMuiTheme>;
+};
+*/
 
 function createMuiDsfrTheme(params: { isDark: boolean }): MuiTheme {
     const { isDark } = params;
@@ -22,18 +32,17 @@ function createMuiDsfrTheme(params: { isDark: boolean }): MuiTheme {
             "values": breakpointValues
         },
         "palette": (() => {
-            const colorOptions = getColorOptions({ isDark });
-            const colorDecisions = getColorDecisions({ colorOptions });
+            const { decisions } = getColors(isDark);
 
             return {
                 "mode": isDark ? "dark" : "light",
                 "primary": {
-                    "main": colorDecisions.background.actionHigh.blueFrance.default,
-                    "light": colorDecisions.background.actionLow.blueFrance.default
+                    "main": decisions.background.actionHigh.blueFrance.default,
+                    "light": decisions.background.actionLow.blueFrance.default
                 },
                 "secondary": {
-                    "main": colorDecisions.background.actionHigh.redMarianne.default,
-                    "light": colorDecisions.background.actionLow.redMarianne.default
+                    "main": decisions.background.actionHigh.redMarianne.default,
+                    "light": decisions.background.actionLow.redMarianne.default
                 }
                 /*
                 "primary": {
@@ -82,18 +91,36 @@ function createMuiDsfrTheme(params: { isDark: boolean }): MuiTheme {
     return muiTheme;
 }
 
+export type NonAugmentedMuiTheme = MuiTheme;
+
 export type MuiDsfrThemeProviderProps = {
     children: ReactNode;
+    /** If you have implemented theme augmentation */
+    augmentMuiTheme?: (params: {
+        nonAugmentedMuiTheme: NonAugmentedMuiTheme;
+        frColorTheme: ColorTheme;
+    }) => MuiTheme;
 };
 
 export function MuiDsfrThemeProvider(props: MuiDsfrThemeProviderProps) {
-    const { children } = props;
+    const { children, augmentMuiTheme } = props;
 
     const { isDark } = useIsDark();
 
-    const muiTheme = useMemo(() => createMuiDsfrTheme({ isDark }), [isDark]);
+    const augmentedMuiTheme = useMemo(() => {
+        const muiTheme = createMuiDsfrTheme({ isDark });
+
+        if (augmentMuiTheme === undefined) {
+            return muiTheme;
+        }
+
+        return augmentMuiTheme({
+            "frColorTheme": getColors(isDark),
+            "nonAugmentedMuiTheme": muiTheme
+        });
+    }, [isDark, augmentMuiTheme]);
 
-    return <MuiThemeProvider theme={muiTheme}>{children}</MuiThemeProvider>;
+    return <MuiThemeProvider theme={augmentedMuiTheme}>{children}</MuiThemeProvider>;
 }
 
 /*