Merge branch 'main' of github.com:codegouvfr/react-dsfr into feat/range-and-segmented

lsagetlethias · lsagetlethias · commit 98a275797cff · 2024-02-12T19:07:01.000+01:00
diff --git a/README.fr.md b/README.fr.md
@@ -43,7 +43,7 @@ Ce module est une boîte à outils avancée qui tire parti de [@gouvfr/dsfr](htt
 -   [x] Exactement le même aspect et ressenti qu'avec [@gouvfr/dsfr](https://www.npmjs.com/package/@gouvfr/dsfr).
 -   [x] Pas de [flash blanc lors du rechargement dans la configuration SSR](https://github.com/codegouvfr/@codegouvfr/react-dsfr/issues/2#issuecomment-1257263480).
 -   [x] La plupart des composants sont prêts pour les composants serveur. Les autres sont étiquetés avec `"use client";`
--   [x] [Intégration parfaite avec tous les principaux frameworks React : Next.js (PagesDir et AppDir), Create React App, Vue](https://react-dsfr.codegouv.studio/).
+-   [x] [Intégration parfaite avec tous les principaux frameworks React : Next.js (PagesDir et AppDir), Create React App, Vite](https://react-dsfr.codegouv.studio/).
 -   [x] (Presque) Tous [les composants](https://www.systeme-de-design.gouv.fr/elements-d-interface) sont [implémentés](https://components.react-dsfr.codegouv.studio/)
 -   [x] Trois distributions modulables, choisissez les composants que vous importez. (Ce n'est pas tout dans un gros bundle .js)
 -   [x] Intégration optionnelle avec [MUI](https://mui.com/). Si vous utilisez des composants MUI, ils seront
diff --git a/README.md b/README.md
@@ -45,7 +45,7 @@ This module is an advanced toolkit that leverages [@gouvfr/dsfr](https://github.
 -   [x] Exactly the same look and feel than with [@gouvfr/dsfr](https://www.npmjs.com/package/@gouvfr/dsfr).
 -   [x] No [white flash when reloading in SSR setup](https://github.com/codegouvfr/@codegouvfr/react-dsfr/issues/2#issuecomment-1257263480).
 -   [x] Most components are server component ready. The others are labeled with `"use client";`
--   [x] [Perfect integration with all major React framework: Next.js (PagesDir and AppDir), Create React App, Vue](https://react-dsfr.codegouv.studio/).
+-   [x] [Perfect integration with all major React framework: Next.js (PagesDir and AppDir), Create React App, Vite](https://react-dsfr.codegouv.studio/).
 -   [x] (Almost) All [the components](https://www.systeme-de-design.gouv.fr/elements-d-interface) are [implemented](https://components.react-dsfr.codegouv.studio/)
 -   [x] Three shakable distribution, cherry pick the components you import. (It's not all in a big .js bundle)
 -   [x] Optional integration with [MUI](https://mui.com/). If you use MUI components they will
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@codegouvfr/react-dsfr",
-    "version": "1.2.2",
+    "version": "1.5.0",
     "description": "French State Design System React integration library",
     "repository": {
         "type": "git",
@@ -66,7 +66,7 @@
         "@babel/core": "^7.20.2",
         "@emotion/react": "^11.10.4",
         "@emotion/styled": "^11.10.4",
-        "@gouvfr/dsfr": "1.11.0",
+        "@gouvfr/dsfr": "1.11.1",
         "@mui/icons-material": "^5.14.18",
         "@mui/material": "^5.14.18",
         "@storybook/addon-a11y": "^6.5.16",
diff --git a/src/Modal/useIsModalOpen.ts b/src/Modal/useIsModalOpen.ts
@@ -3,18 +3,35 @@
 import { useEffect, useState } from "react";
 import { assert } from "tsafe/assert";
 import { symToStr } from "tsafe/symToStr";
-
-export function useIsModalOpen(modal: { isOpenedByDefault: boolean; id: string }): boolean {
+import { useConstCallback } from "../tools/powerhooks/useConstCallback";
+
+export function useIsModalOpen(
+    modal: { isOpenedByDefault: boolean; id: string },
+    callbacks?: {
+        onConceal?: () => void;
+        onDisclose?: () => void;
+    }
+): boolean {
     const { id, isOpenedByDefault } = modal;
 
     const [isModalOpen, setIsModalOpen] = useState(isOpenedByDefault);
 
+    const getCurrentCallbacks = useConstCallback(() => callbacks);
+
     useEffect(() => {
         const cleanups: (() => void)[] = [];
 
         const observeDialogHtmlElement = (element: HTMLElement) => {
-            const onConceal = () => setIsModalOpen(false);
-            const onDisclose = () => setIsModalOpen(true);
+            const onConceal = () => {
+                setIsModalOpen(false);
+                setTimeout(() => {
+                    getCurrentCallbacks()?.onConceal?.();
+                }, 0);
+            };
+            const onDisclose = () => {
+                setIsModalOpen(true);
+                getCurrentCallbacks()?.onDisclose?.();
+            };
 
             element.addEventListener("dsfr.conceal", onConceal);
             element.addEventListener("dsfr.disclose", onDisclose);
diff --git a/src/bin/copy-dsfr-to-public.ts b/src/bin/copy-dsfr-to-public.ts
@@ -29,65 +29,80 @@ import type { Equals } from "tsafe";
         return undefined;
     })();
 
-    const publicDirPath =
-        viteConfigFilePath !== undefined
-            ? await (async function getVitePublicDirPath() {
-                  const viteConfig = fs.readFileSync(viteConfigFilePath).toString("utf8");
-
-                  if (!viteConfig.includes("publicDir")) {
-                      return pathJoin(projectDirPath, "public");
-                  }
-
-                  const [, afterPublicDir] = viteConfig.split(/\s["']?publicDir["']?\s*:/);
-
-                  for (let indexEnd = 0; indexEnd < afterPublicDir.length; indexEnd++) {
-                      const {
-                          default: path,
-                          basename,
-                          dirname,
-                          delimiter,
-                          extname,
-                          format,
-                          isAbsolute,
-                          join,
-                          normalize,
-                          parse,
-                          posix,
-                          relative,
-                          resolve,
-                          sep,
-                          toNamespacedPath,
-                          win32,
-                          ...rest
-                      } = await import("path");
-                      assert<Equals<keyof typeof rest, never>>();
-
-                      const part = afterPublicDir
-                          .substring(0, indexEnd)
-                          .replace(/__dirname/g, `"${projectDirPath}"`);
-
-                      let candidate: string;
-
-                      try {
-                          candidate = eval(part);
-                      } catch {
-                          continue;
-                      }
-
-                      if (typeof candidate !== "string") {
-                          continue;
-                      }
-
-                      return candidate;
-                  }
-
-                  console.error(
-                      `Can't parse the vite configuration please open an issue about it ${getRepoIssueUrl()}`
-                  );
-
-                  process.exit(-1);
-              })()
-            : pathJoin(projectDirPath, "public");
+    const publicDirPath = await (async () => {
+        command_line_argument: {
+            const arg = process.argv[2];
+
+            if (arg === undefined) {
+                break command_line_argument;
+            }
+
+            return arg;
+        }
+
+        read_from_vite_config: {
+            if (viteConfigFilePath === undefined) {
+                break read_from_vite_config;
+            }
+
+            const viteConfig = fs.readFileSync(viteConfigFilePath).toString("utf8");
+
+            if (!viteConfig.includes("publicDir")) {
+                return pathJoin(projectDirPath, "public");
+            }
+
+            const [, afterPublicDir] = viteConfig.split(/\s["']?publicDir["']?\s*:/);
+
+            for (let indexEnd = 0; indexEnd < afterPublicDir.length; indexEnd++) {
+                const {
+                    default: path,
+                    basename,
+                    dirname,
+                    delimiter,
+                    extname,
+                    format,
+                    isAbsolute,
+                    join,
+                    normalize,
+                    parse,
+                    posix,
+                    relative,
+                    resolve,
+                    sep,
+                    toNamespacedPath,
+                    win32,
+                    ...rest
+                } = await import("path");
+                assert<Equals<keyof typeof rest, never>>();
+
+                const part = afterPublicDir
+                    .substring(0, indexEnd)
+                    .replace(/__dirname/g, `"${projectDirPath}"`);
+
+                let candidate: string;
+
+                try {
+                    candidate = eval(part);
+                } catch {
+                    continue;
+                }
+
+                if (typeof candidate !== "string") {
+                    continue;
+                }
+
+                return candidate;
+            }
+
+            console.error(
+                `Can't parse the vite configuration please open an issue about it ${getRepoIssueUrl()}`
+            );
+
+            process.exit(-1);
+        }
+
+        return pathJoin(projectDirPath, "public");
+    })();
 
     edit_gitignore: {
         const gitignoreFilePath = pathJoin(projectDirPath, ".gitignore");
diff --git a/src/consentManagement/Placeholder.tsx b/src/consentManagement/Placeholder.tsx
@@ -0,0 +1,80 @@
+import React, { forwardRef, memo } from "react";
+import { fr } from "../fr";
+import { cx } from "../tools/cx";
+import { Equals, assert } from "tsafe";
+import { createComponentI18nApi } from "../i18n";
+import { symToStr } from "tsafe/symToStr";
+
+export type PlaceholderProps = {
+    className?: string;
+    style?: React.CSSProperties;
+    titleAs?: "span" | `h${1 | 2 | 3 | 4 | 5 | 6}`;
+    classes?: Partial<Record<"root" | "title" | "description" | "button", string>>;
+    title: string;
+    description: string;
+    onGranted: () => void;
+};
+
+export const Placeholder = memo(
+    forwardRef<HTMLDivElement, PlaceholderProps>((props, ref) => {
+        const { t } = useTranslation();
+        const {
+            className,
+            titleAs: HtmlTitleTag = "h4",
+            classes = {},
+            style,
+            title,
+            description,
+            onGranted,
+            ...rest
+        } = props;
+        assert<Equals<keyof typeof rest, never>>();
+        return (
+            <div
+                className={cx(fr.cx("fr-consent-placeholder"), classes.root, className)}
+                ref={ref}
+                style={style}
+                {...rest}
+            >
+                <HtmlTitleTag className={cx(fr.cx("fr-h6", "fr-mb-2v"), classes.title)}>
+                    {title}
+                </HtmlTitleTag>
+                <p className={cx(fr.cx("fr-mb-6v"), classes.title)}>{description}</p>
+                <button
+                    className={cx(fr.cx("fr-btn"), classes.button)}
+                    title={description}
+                    onClick={onGranted}
+                >
+                    {t("enable message")}
+                </button>
+            </div>
+        );
+    })
+);
+
+const { useTranslation, addPlaceholderTranslations } = createComponentI18nApi({
+    "componentName": symToStr({ Placeholder }),
+    "frMessages": {
+        /* spell-checker: disable */
+        "enable message": "Autoriser"
+        /* spell-checker: enable */
+    }
+});
+
+addPlaceholderTranslations({
+    "lang": "en",
+    "messages": {
+        "enable message": "Authorize"
+    }
+});
+
+addPlaceholderTranslations({
+    "lang": "es",
+    "messages": {
+        /* spell-checker: disable */
+        "enable message": "Permitir"
+        /* spell-checker: enable */
+    }
+});
+
+export { addPlaceholderTranslations };
diff --git a/stories/ConsentManagement.stories.tsx b/stories/ConsentManagement.stories.tsx
@@ -3,6 +3,7 @@ import { sectionName } from "./sectionName";
 import { getStoryFactory } from "./getStory";
 import { createConsentManagement } from "../dist/consentManagement";
 import { localStorageKeyPrefix } from "../dist/consentManagement/createConsentManagement";
+import { Placeholder } from "../dist/consentManagement/Placeholder";
 import { Footer } from "../dist/Footer";
 import { Button } from "../dist/Button";
 import { fr } from "../dist/fr";
@@ -263,7 +264,7 @@ const {
 });
 
 function Story() {
-    const { finalityConsent } = useConsent();
+    const { finalityConsent, assumeConsent } = useConsent();
 
     return (
         <>
@@ -272,6 +273,14 @@ function Story() {
             ) : (
                 <pre>{JSON.stringify({ finalityConsent }, null, 2)}</pre>
             )}
+            {finalityConsent && finalityConsent.analytics === false && (
+                <Placeholder
+                    title="Analytics are not enabled"
+                    description="We use cookies to measure the audience of our site and improve its content."
+                    onGranted={() => assumeConsent("analytics")}
+                    titleAs="span"
+                />
+            )}
             <Button
                 onClick={() => {
                     Object.keys(localStorage)
diff --git a/stories/Modal.stories.tsx b/stories/Modal.stories.tsx
@@ -46,10 +46,25 @@ function Home(){
             {/* You can also call modal.close() to programmatically close the modal */}
         </>
     );
-);
+}
+\`\`\`
+
+You can also register callbacks to be called when the modal is opened or closed:  
 
+\`\`\`tsx
+useIsModalOpen(
+    modal,
+    {
+        onClose: ()=> console.log("modal closed"),
+        onOpen: ()=> console.log("modal opened")
+    }
+);
 \`\`\`
 
+To create a Dialog component, something that you would use to ask the user a question, like "Do you want to proceed?", you can implement this pattern:  
+- [Component](https://github.com/codegouvfr/react-dsfr/blob/main/test/integration/cra/src/MyDialog.tsx), 
+- [Usage](https://github.com/codegouvfr/react-dsfr/blob/d5c0f304ed3416c8d10bba83e7a075a304d2caa0/test/integration/cra/src/Home.tsx#L117-L132). 
+
 `,
     "argTypes": {
         "title": {
@@ -113,6 +128,7 @@ function Template(args: ModalProps) {
     return (
         <>
             <Button nativeButtonProps={modal.buttonProps}>Open modal (stateless approach)</Button>
+            &nbsp; - or - &nbsp;
             <Button onClick={() => modal.open()}>Open modal with modal.open()</Button>
             <modal.Component {...args} />
         </>
diff --git a/test/integration/cra/public/index.html b/test/integration/cra/public/index.html
@@ -5,8 +5,6 @@
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="description" content="Web site created using create-react-app" />
-  <meta http-equiv="Content-Security-Policy"
-    content="require-trusted-types-for 'script'; trusted-types react-dsfr react-dsfr-asap" />
 
   <link rel="apple-touch-icon" href="%PUBLIC_URL%/dsfr/favicon/apple-touch-icon.png" />
   <link rel="icon" href="%PUBLIC_URL%/dsfr/favicon/favicon.svg" type="image/svg+xml" />
diff --git a/test/integration/cra/src/Home.tsx b/test/integration/cra/src/Home.tsx
diff --git a/test/integration/cra/src/MyDialog.tsx b/test/integration/cra/src/MyDialog.tsx
diff --git a/test/types/consentManagement.tsx b/test/types/consentManagement.tsx
diff --git a/yarn.lock b/yarn.lock
