Setup a MUI playground

garronej · garronej · commit a973eea415f7 · 2022-11-28T19:38:23.000+01:00
diff --git a/src/lib/start.ts b/src/lib/start.ts
@@ -86,7 +86,7 @@ export async function startDsfrReact(params: Params) {
         // NOTE: @gouvfr/dsfr/dist/dsfr.module.js is not isomorphic, it can't run on the Server.",
         // We set an artificial delay before starting the module otherwise to avoid getting",
         // Hydration error from Next.js
-        await new Promise(resolve => setTimeout(resolve, 150));
+        await new Promise(resolve => setTimeout(resolve, 400));
     }
 
     (window as any).dsfr.start();
diff --git a/src/mui.tsx b/src/mui.tsx
@@ -9,33 +9,35 @@ import { useIsDark } from "./lib/darkMode";
 import { typography } from "./lib/generatedFromCss/typography";
 import { spacingTokenByValue } from "./lib/generatedFromCss/spacing";
 import type { ColorTheme } from "./lib/colors";
-import { memoize } from "./lib/tools/memoize";
 import type { Theme as NonAugmentedMuiTheme } from "./lib/tools/@mui/material/styles/createTheme";
+import { assert } from "tsafe/assert";
+import { objectKeys } from "tsafe/objectKeys";
 
-const createMuiDsfrTheme = memoize(
-    (isDark: boolean): MuiTheme => {
-        const muiTheme = createTheme({
-            "shape": {
-                "borderRadius": 0
-            },
-            "breakpoints": {
-                "unit": breakpointValuesUnit,
-                "values": breakpointValues
-            },
-            "palette": (() => {
-                const { decisions } = getColors(isDark);
-
-                return {
-                    "mode": isDark ? "dark" : "light",
-                    "primary": {
-                        "main": decisions.background.actionHigh.blueFrance.default,
-                        "light": decisions.background.actionLow.blueFrance.default
-                    },
-                    "secondary": {
-                        "main": decisions.background.actionHigh.redMarianne.default,
-                        "light": decisions.background.actionLow.redMarianne.default
-                    }
-                    /*
+function createMuiDsfrTheme(params: { isDark: boolean }): MuiTheme {
+    const { isDark } = params;
+
+    const muiTheme = createTheme({
+        "shape": {
+            "borderRadius": 0
+        },
+        "breakpoints": {
+            "unit": breakpointValuesUnit,
+            "values": breakpointValues
+        },
+        "palette": (() => {
+            const { decisions } = getColors(isDark);
+
+            return {
+                "mode": isDark ? "dark" : "light",
+                "primary": {
+                    "main": decisions.background.actionHigh.blueFrance.default,
+                    "light": decisions.background.actionLow.blueFrance.default
+                },
+                "secondary": {
+                    "main": decisions.background.actionHigh.redMarianne.default,
+                    "light": decisions.background.actionLow.redMarianne.default
+                }
+                /*
                 "primary": {
                     "900": colorOptions.blueFrance._925_125.default,
                     "800": colorOptions.blueFrance._850_200.default,
@@ -45,73 +47,99 @@ const createMuiDsfrTheme = memoize(
                     "light": colorDecisions.background.actionLow.redMarianne.default,
                 },
                 */
-                } as const;
-            })(),
-            "typography": {
+            } as const;
+        })(),
+        "typography": (() => {
+            const getBySelector = (selector: typeof typography[number]["selector"]) => {
+                const variant = typography.find(variant => variant.selector === selector);
+                assert(variant !== undefined);
+
+                const style = { ...variant.style };
+
+                //TODO: Investigate why we need to do that.
+                delete (style as any).margin;
+
+                return style;
+            };
+
+            return {
                 "fontFamily": '"Marianne", arial, sans-serif',
-                "h1": typography.find(({ selector }) => selector === "h1")!.style,
-                "h2": typography.find(({ selector }) => selector === "h2")!.style,
-                "h3": typography.find(({ selector }) => selector === "h3")!.style,
-                "h4": typography.find(({ selector }) => selector === "h4")!.style,
-                "h5": typography.find(({ selector }) => selector === "h5")!.style,
-                "h6": typography.find(({ selector }) => selector === "h6")!.style,
+                "h1": getBySelector("h1"),
+                "h2": getBySelector("h2"),
+                "h3": getBySelector("h3"),
+                "h4": getBySelector("h4"),
+                "h5": getBySelector("h5"),
+                "h6": getBySelector("h6"),
                 //"subtitle1":
                 //"subtitle2":
-                "body1": typography.find(({ selector }) => selector === "p")!.style
+                "body1": getBySelector("p")
                 //"body2": {},
                 //"caption": {},
                 //"button": {},
                 //"overline": {}
-            },
-            "spacing": (() => {
-                //NOTE: The properties are declared sorted in the object.
-                const values = Object.values(spacingTokenByValue);
-
-                return (abs: string | number) =>
-                    typeof abs === "string"
-                        ? abs
-                        : abs === 0
-                        ? 0
-                        : (() => {
-                              const value = values[abs - 1];
-                              return value === undefined ? abs : value;
-                          })();
-            })()
-        });
-
-        return muiTheme;
-    },
-    { "max": 1 }
-);
-
-export type MuiDsfrThemeProviderProps = {
-    children: ReactNode;
-    /** If you have implemented theme augmentation */
-    augmentMuiTheme?: (params: {
+            };
+        })(),
+        "spacing": (() => {
+            const values: string[] = [];
+
+            //NOTE: The properties are declared sorted in the object.
+            objectKeys(spacingTokenByValue).forEach(key => {
+                if (key.endsWith("w")) {
+                    values.push(spacingTokenByValue[key]);
+                }
+            });
+
+            return (abs: string | number) =>
+                typeof abs === "string"
+                    ? abs
+                    : abs === 0
+                    ? 0
+                    : (() => {
+                          const value = values[abs - 1];
+                          return value === undefined ? abs : value;
+                      })();
+        })()
+    });
+
+    return muiTheme;
+}
+
+export function createMuiDsfrThemeProvider(params: {
+    augmentMuiTheme: (params: {
         nonAugmentedMuiTheme: NonAugmentedMuiTheme;
         frColorTheme: ColorTheme;
     }) => MuiTheme;
-};
+}) {
+    const { augmentMuiTheme } = params;
 
-export function MuiDsfrThemeProvider(props: MuiDsfrThemeProviderProps) {
-    const { children, augmentMuiTheme } = props;
+    type Props = {
+        children: ReactNode;
+        /** If you have implemented theme augmentation */
+    };
 
-    const { isDark } = useIsDark();
+    function MuiDsfrThemeProvider(props: Props) {
+        const { children } = props;
 
-    const theme = useMemo(() => {
-        const theme = createMuiDsfrTheme(isDark);
+        const { isDark } = useIsDark();
 
-        if (augmentMuiTheme === undefined) {
-            return theme;
-        }
+        const theme = useMemo(
+            () =>
+                augmentMuiTheme({
+                    "frColorTheme": getColors(isDark),
+                    "nonAugmentedMuiTheme": createMuiDsfrTheme({ isDark })
+                }),
+            [isDark]
+        );
+
+        return <MuiThemeProvider theme={theme}>{children}</MuiThemeProvider>;
+    }
 
-        return augmentMuiTheme({
-            "frColorTheme": getColors(isDark),
-            "nonAugmentedMuiTheme": theme
-        });
-    }, [isDark, augmentMuiTheme]);
+    return { MuiDsfrThemeProvider };
+}
 
-    return <MuiThemeProvider theme={theme}>{children}</MuiThemeProvider>;
+export function noAugmentation(params: { nonAugmentedMuiTheme: MuiTheme }) {
+    const { nonAugmentedMuiTheme } = params;
+    return nonAugmentedMuiTheme;
 }
 
 /*
diff --git a/src/scripts/yarn-link.ts b/src/scripts/yarn-link.ts
@@ -8,9 +8,7 @@ import { getProjectRoot } from "../bin/tools/getProjectRoot";
 const projectDirPath = getProjectRoot();
 
 const commonThirdPartyDeps = (() => {
-    const namespaceModuleNames: string[] = [
-        /*"@emotion"*/
-    ];
+    const namespaceModuleNames: string[] = ["@emotion", "@mui"];
     const standaloneModuleNames = ["react", "@types/react"];
 
     return [
diff --git a/test/integration/next/package.json b/test/integration/next/package.json
@@ -19,7 +19,13 @@
         "@emotion/react": "^11.10.5",
         "@emotion/server": "^11.10.0",
         "tss-react": "^4.4.4",
+        "@mui/material": "^5.10.15",
+        "@mui/icons-material": "5.10.15",
+        "@emotion/styled": "^11.10.5",
+        "dayjs": "^1.11.6",
+        "@mui/x-date-pickers": "^5.0.9",
         "@codegouvfr/react-dsfr": "file:../../../dist"
+        
     },
     "devDependencies": {
         "@types/react": "18.0.21",
diff --git a/test/integration/next/pages/_app.tsx b/test/integration/next/pages/_app.tsx
@@ -3,6 +3,9 @@ import { DsfrLangProvider } from "@codegouvfr/react-dsfr";
 import { createNextDsfrIntegrationApi } from "@codegouvfr/react-dsfr/next";
 import { Header } from "@codegouvfr/react-dsfr/Header";
 import { createEmotionSsrAdvancedApproach } from "tss-react/next";
+import { useStyles } from "tss-react/dsfr";
+import { fr } from "@codegouvfr/react-dsfr";
+
 
 const {
     withDsfr,
@@ -24,38 +27,49 @@ const {
     "doPersistDarkModePreferenceWithCookie": true
 });
 
-const { augmentDocumentWithEmotionCache, withAppEmotionCache} = createEmotionSsrAdvancedApproach({
+const { augmentDocumentWithEmotionCache, withAppEmotionCache } = createEmotionSsrAdvancedApproach({
     "key": "css"
 });
 
 export { dsfrDocumentApi, augmentDocumentWithEmotionCache };
 
 function App({ Component, pageProps }: AppProps) {
+
+    const { css } = useStyles();
+
     return (
         <DsfrLangProvider lang="fr">
-            <Header
-                intituléOfficiel="Intitulé officiel"
-                baselinePrécisionsSurLorganisation="baseline - Précision sur l'organisation"
-                nomDuSiteSlashService="Nom du site / service"
-                links={[
-                    {
-                        "text": "Créer un espace",
-                        "iconId": "fr-icon-add-circle-line",
-                        "href": "#"
-                    },
-                    {
-                        "text": "Se connecter",
-                        "iconId": "fr-icon-lock-line",
-                        "href": "#"
-                    },
-                    {
-                        "text": "S'enregistrer",
-                        "iconId": "fr-icon-account-line",
-                        "href": "#"
-                    }
-                ]}
-            />
-            <Component {...pageProps} />
+                <Header
+                    intituléOfficiel="Intitulé officiel"
+                    baselinePrécisionsSurLorganisation="baseline - Précision sur l'organisation"
+                    nomDuSiteSlashService="Nom du site / service"
+                    links={[
+                        {
+                            "text": "Créer un espace",
+                            "iconId": "fr-icon-add-circle-line",
+                            "href": "#"
+                        },
+                        {
+                            "text": "Se connecter",
+                            "iconId": "fr-icon-lock-line",
+                            "href": "#"
+                        },
+                        {
+                            "text": "S'enregistrer",
+                            "iconId": "fr-icon-account-line",
+                            "href": "#"
+                        }
+                    ]}
+                />
+                <div className={css({
+                    "margin": "auto",
+                    "maxWidth": 1000,
+                    ...fr.spacing("padding", {
+                        "topBottom": "10v"
+                    })
+                })}>
+                    <Component {...pageProps} />
+                </div>
         </DsfrLangProvider>
     );
 }
diff --git a/test/integration/next/pages/index.tsx b/test/integration/next/pages/index.tsx
@@ -8,7 +8,6 @@ import { useStyles } from "tss-react/dsfr";
 export default function App() {
     const { isDark, setIsDark } = useIsDark();
 
-
     return (
         <>
             <Alert
diff --git a/test/integration/next/pages/mui.tsx b/test/integration/next/pages/mui.tsx
diff --git a/test/integration/next/yarn.lock b/test/integration/next/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -86,7 +86,7 @@ export async function startDsfrReact(params: Params) {`
`86`	`86`	`// NOTE: @gouvfr/dsfr/dist/dsfr.module.js is not isomorphic, it can't run on the Server.",`
`87`	`87`	`// We set an artificial delay before starting the module otherwise to avoid getting",`
`88`	`88`	`// Hydration error from Next.js`
`89`		`- await new Promise(resolve => setTimeout(resolve, 150));`
	`89`	`+ await new Promise(resolve => setTimeout(resolve, 400));`
`90`	`90`	`}`
`91`	`91`
`92`	`92`	`(window as any).dsfr.start();`