Merge branch 'main' of github.com:codegouvfr/react-dsfr into feature/nonce-trusted-types-csp

Author: lsagetlethias

README.md

@@ -82,7 +82,7 @@ yarn
 yarn storybook
 
 # Starting test apps
-yarn start-cra  # For testing in in a Create React App setup
+yarn start-cra  # For testing in a Create React App setup
 yarn start-vite # For testing in a Vite setup
 yarn start-next-pagesdir # For testing in a Next.js 13 PagesDir setup (the default setup)
 yarn start-next-appdir # For testing in a Next.js 13 AppDir setup

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@codegouvfr/react-dsfr",
-    "version": "0.75.8",
+    "version": "0.76.2",
     "description": "French State Design System React integration library",
     "repository": {
         "type": "git",

scripts/build/cssToTs/breakpoints.ts

@@ -149,15 +149,15 @@ export function generateBreakpointsTsCode(rawCssCode: string): string {
         `import { assert } from "tsafe/assert";`,
         `import type { Extends } from "tsafe";`,
         ``,
-        `export const BreakpointsValuesUnit = "em";`,
+        `export const breakpointsValuesUnit = "em";`,
         ``,
         `export const breakpointKeys = ["xs", ${sortedKeys
             .map(key => `"${key}"`)
             .join(", ")}] as const;`,
         ``,
         `export type BreakpointKeys = typeof breakpointKeys[number];`,
         ``,
-        `export const BreakpointsValues = {`,
+        `export const breakpointsValues = {`,
         JSON.stringify(
             Object.fromEntries(
                 (["xs", ...sortedKeys] as const).map(key => [
@@ -176,7 +176,7 @@ export function generateBreakpointsTsCode(rawCssCode: string): string {
             .join("\n"),
         `} as const;`,
         ``,
-        `assert<Extends<typeof BreakpointsValues, Record<BreakpointKeys, number>>>();`,
+        `assert<Extends<typeof breakpointsValues, Record<BreakpointKeys, number>>>();`,
         ``
     ].join("\n");
 }

scripts/link-in-integration-apps.ts

@@ -9,7 +9,7 @@ const projectDirPath = getProjectRoot();
 
 const commonThirdPartyDeps = (() => {
     const namespaceModuleNames: string[] = ["@emotion", "@mui"];
-    const standaloneModuleNames = ["react", "@types/react"];
+    const standaloneModuleNames = ["react", "react-dom", "@types/react"];
 
     return [
         ...namespaceModuleNames

src/Header/Header.tsx

@@ -63,6 +63,7 @@ export type HeaderProps = {
         Record<
             | "root"
             | "body"
+            | "container"
             | "bodyRow"
             | "brand"
             | "brandTop"
@@ -179,7 +180,7 @@ export const Header = memo(
                     {...rest}
                 >
                     <div className={cx(fr.cx("fr-header__body" as any), classes.body)}>
-                        <div className={fr.cx("fr-container")}>
+                        <div className={cx(fr.cx("fr-container"), classes.container)}>
                             <div className={cx(fr.cx("fr-header__body-row"), classes.bodyRow)}>
                                 <div
                                     className={cx(

src/fr/breakpoints.ts

@@ -1,7 +1,7 @@
 import type { BreakpointKeys } from "./generatedFromCss/breakpoints";
 import {
-    BreakpointsValues as values,
-    BreakpointsValuesUnit as unit,
+    breakpointsValues as values,
+    breakpointsValuesUnit as unit,
     breakpointKeys as keys
 } from "./generatedFromCss/breakpoints";
 import { type Equals, assert } from "tsafe/assert";
@@ -43,21 +43,62 @@ export const breakpoints = {
             .between(key, keys[keys.indexOf(key) + 1])
             .replace("@media", "@media not all and");
     },
+    "values": (() => {
+        const out = {
+            ...(() => {
+                const key = "xs" satisfies BreakpointKeys;
+
+                return { [key]: `${values[key]}${unit}` as const };
+            })(),
+            ...(() => {
+                const key = "sm" satisfies BreakpointKeys;
+
+                return { [key]: `${values[key]}${unit}` as const };
+            })(),
+            ...(() => {
+                const key = "md" satisfies BreakpointKeys;
+
+                return { [key]: `${values[key]}${unit}` as const };
+            })(),
+            ...(() => {
+                const key = "lg" satisfies BreakpointKeys;
+
+                return { [key]: `${values[key]}${unit}` as const };
+            })(),
+            ...(() => {
+                const key = "xl" satisfies BreakpointKeys;
+
+                return { [key]: `${values[key]}${unit}` as const };
+            })()
+        } as const;
+
+        assert<Equals<keyof typeof out, BreakpointKeys>>();
+
+        return out;
+    })(),
+    "valuesUnit": unit,
+    "emValues": (() => {
+        assert<Equals<typeof unit, "em">>();
+
+        return values;
+    })(),
     /**
      * Returns the breakpoint values in px.
      *
      * Warning: It reflects the values at a given time, if the root font size changes so will the breakpointsValues.
      * Plus this function is rather expensive to call.
      * If you're in react you should use the
-     * import { useBreakpointsValues } from "@codegouvfr/react-dsfr/useBreakpointsValues";
+     * import { useBreakpointsValuesPx } from "@codegouvfr/react-dsfr/useBreakpointsValuesPx";
      */
-    "getBreakpointsValues": (): BreakpointsValues => {
+    "getPxValues": (): BreakpointsValues => {
         assert<Equals<typeof unit, "em">>();
 
         const factor = getBaseFontSizePx();
 
         return Object.fromEntries(
             Object.entries(values).map(([key, value]) => [key, value * factor])
         ) as any;
-    }
+    },
+    /** @deprecated use breakpoints.values if you're ok with getting the value in em or breakpoints.getPxValues() if you want the value in pixel */
+    "getBreakpointsValues": () => breakpoints.getPxValues()
 };

src/useBreakpointsValues.ts

@@ -1,49 +1,7 @@
-import { useReducer, useEffect, useMemo } from "react";
-import { assert } from "tsafe/assert";
-import { breakpoints, type BreakpointKeys, type BreakpointsValues } from "./fr/breakpoints";
+import { type BreakpointKeys, type BreakpointsValues } from "./fr/breakpoints";
+import { useBreakpointsValuesPx } from "./useBreakpointsValuesPx";
 
 export type { BreakpointKeys, BreakpointsValues };
 
-/** Return the breakpoint values in px, the values ger refreshed
- *  when the base font size change.  */
-export function useBreakpointsValues() {
-    const [breakpointsValuesDependency, triggerRefresh] = useReducer(() => ({}), {});
-
-    useEffect(() => {
-        const htmlElement = document.querySelector("html");
-
-        assert(htmlElement !== null);
-
-        // Create a new MutationObserver to detect changes in the base font size
-        const observer = new MutationObserver(mutationsList => {
-            if (
-                mutationsList.find(
-                    mutation =>
-                        mutation.target === htmlElement &&
-                        mutation.attributeName === "style" &&
-                        (mutation.oldValue ?? "").indexOf("font-size") !== -1
-                ) !== undefined
-            ) {
-                triggerRefresh();
-            }
-        });
-
-        // Observe changes to the style attribute of the html element
-        observer.observe(htmlElement, {
-            "attributes": true,
-            "attributeOldValue": true,
-            "attributeFilter": ["style"]
-        });
-
-        return () => {
-            observer.disconnect();
-        };
-    }, []);
-
-    const breakpointsValues = useMemo(
-        () => breakpoints.getBreakpointsValues(),
-        [breakpointsValuesDependency]
-    );
-
-    return { breakpointsValues };
-}
+/** @deprecated Use import { useBreakpointsValuesPx } from "@codegouvfr/react-dsfr/useBreakpointsValuesPx"; instead */
+export const useBreakpointsValues = useBreakpointsValuesPx;

src/useBreakpointsValuesPx.ts

@@ -0,0 +1,49 @@
+import { useReducer, useEffect, useMemo } from "react";
+import { assert } from "tsafe/assert";
+import { breakpoints, type BreakpointKeys, type BreakpointsValues } from "./fr/breakpoints";
+
+export type { BreakpointKeys, BreakpointsValues };
+
+/** Return the breakpoint values in px, the values ger refreshed
+ *  when the base font size change.  */
+export function useBreakpointsValuesPx() {
+    const [breakpointsValuesDependency, triggerRefresh] = useReducer(() => ({}), {});
+
+    useEffect(() => {
+        const htmlElement = document.querySelector("html");
+
+        assert(htmlElement !== null);
+
+        // Create a new MutationObserver to detect changes in the base font size
+        const observer = new MutationObserver(mutationsList => {
+            if (
+                mutationsList.find(
+                    mutation =>
+                        mutation.target === htmlElement &&
+                        mutation.attributeName === "style" &&
+                        (mutation.oldValue ?? "").indexOf("font-size") !== -1
+                ) !== undefined
+            ) {
+                triggerRefresh();
+            }
+        });
+
+        // Observe changes to the style attribute of the html element
+        observer.observe(htmlElement, {
+            "attributes": true,
+            "attributeOldValue": true,
+            "attributeFilter": ["style"]
+        });
+
+        return () => {
+            observer.disconnect();
+        };
+    }, []);
+
+    const breakpointsValues = useMemo(
+        () => breakpoints.getPxValues(),
+        [breakpointsValuesDependency]
+    );
+
+    return { breakpointsValues };
+}

test/runtime/scripts/breakpoints/generateBreakpointsTsCode.test.ts

@@ -45,21 +45,21 @@ it("Generation of TS code for breakpoints", () => {
 import { assert } from "tsafe/assert";
 import type { Extends } from "tsafe";
 
-export const BreakpointsValuesUnit = "em";
+export const breakpointsValuesUnit = "em";
 
 export const breakpointKeys = ["xs", "sm", "md", "lg", "xl"] as const;
 
 export type BreakpointKeys = typeof breakpointKeys[number];
 
-export const BreakpointsValues = {
+export const breakpointsValues = {
     "xs": 0,
     "sm": 36,
     "md": 48,
     "lg": 62,
     "xl": 78
 } as const;
 
-assert<Extends<typeof BreakpointsValues, Record<BreakpointKeys, number>>>();
+assert<Extends<typeof breakpointsValues, Record<BreakpointKeys, number>>>();
 `.replace(/^\n/, "");
 
     const got = generateBreakpointsTsCode(input);