feat: i18n

lsagetlethias · lsagetlethias · commit b1f99604873e · 2023-04-16T01:14:06.000+02:00
diff --git a/src/ConsentBanner/ConsentBannerActions.tsx b/src/ConsentBanner/ConsentBannerActions.tsx
@@ -6,6 +6,7 @@ import React from "react";
 import { useGdprStore } from "../useGdprStore";
 import { GdprService } from "../gdpr";
 import { ModalProps } from "../Modal";
+import { useTranslation } from "./i18n";
 
 export interface ConsentBannerActionsProps {
     services: GdprService[];
@@ -18,6 +19,9 @@ export const ConsentBannerActions = ({
 }: ConsentBannerActionsProps) => {
     const setConsent = useGdprStore(state => state.setConsent);
     const setFirstChoiceMade = useGdprStore(state => state.setFirstChoiceMade);
+
+    const { t } = useTranslation();
+
     const acceptAll = () => {
         services.forEach(service => {
             if (!service.mandatory) setConsent(service.name, true);
@@ -39,18 +43,18 @@ export const ConsentBannerActions = ({
             inlineLayoutWhen="sm and up"
             buttons={[
                 {
-                    children: "Tout accepter",
-                    title: "Autoriser tous les cookies",
+                    children: t("accept all"),
+                    title: t("accept all - title"),
                     onClick: () => acceptAll()
                 },
                 {
-                    children: "Tout refuser",
-                    title: "Refuser tous les cookies",
+                    children: t("refuse all"),
+                    title: t("refuse all - title"),
                     onClick: () => refuseAll()
                 },
                 {
-                    children: "Personnaliser",
-                    title: "Personnaliser les cookies",
+                    children: t("customize cookies"),
+                    title: t("customize cookies - title"),
                     priority: "secondary",
                     ...consentModalButtonProps
                 }
diff --git a/src/ConsentBanner/ConsentBannerContent.tsx b/src/ConsentBanner/ConsentBannerContent.tsx
@@ -2,8 +2,8 @@ import React from "react";
 // eslint-disable-next-line @typescript-eslint/no-unused-vars -- used in doc
 import { FooterProps } from "../Footer";
 import { fr } from "../fr";
-import { getLink } from "../link";
 import { ConsentBannerActions, ConsentBannerActionsProps } from "./ConsentBannerActions";
+import { useTranslation } from "./i18n";
 
 export interface ConsentBannerContentProps extends ConsentBannerActionsProps {
     /** Usually the same as {@link FooterProps.personalDataLinkProps} */
@@ -18,16 +18,15 @@ export const ConsentBannerContent = ({
     services,
     consentModalButtonProps
 }: ConsentBannerContentProps) => {
-    const { Link } = getLink();
+    const { t } = useTranslation();
     return (
         <div className={fr.cx("fr-consent-banner")}>
-            <h2 className={fr.cx("fr-h6")}>À propos des cookies sur {siteName}</h2>
+            <h2 className={fr.cx("fr-h6")}>{t("about cookies", { siteName })}</h2>
             <div className="fr-consent-banner__content">
                 <p className="fr-text--sm">
-                    Bienvenue ! Nous utilisons des cookies pour améliorer votre expérience et les
-                    services disponibles sur ce site. Pour en savoir plus, visitez la page{" "}
-                    <Link href={gdprPageLink}>Données personnelles et cookies</Link>. Vous pouvez, à
-                    tout moment, avoir le contrôle sur les cookies que vous souhaitez activer.
+                    {t("welcome message", {
+                        gdprPageLink
+                    })}
                 </p>
             </div>
             <ConsentBannerActions
diff --git a/src/ConsentBanner/ConsentBannerContentDisplayer.tsx b/src/ConsentBanner/ConsentBannerContentDisplayer.tsx
@@ -0,0 +1,18 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { useGdprStore } from "../useGdprStore";
+import { ConsentBannerContent, ConsentBannerContentProps } from "./ConsentBannerContent";
+
+export const ConsentBannerContentDisplayer = (props: ConsentBannerContentProps) => {
+    const firstChoiceMade = useGdprStore(state => state.firstChoiceMade);
+    const __inited = useGdprStore(state => state.__inited);
+    const [stateFCM, setStateFCM] = useState(true);
+
+    useEffect(() => {
+        __inited && setStateFCM(firstChoiceMade);
+    }, [firstChoiceMade, __inited]);
+
+    if (stateFCM) return null;
+    return <ConsentBannerContent {...props} />;
+};
diff --git a/src/ConsentBanner/ConsentManager.tsx b/src/ConsentBanner/ConsentManager.tsx
@@ -1,10 +1,13 @@
+"use client";
+
 import React, { useState, useEffect } from "react";
 import ButtonsGroup from "../ButtonsGroup";
 import { fr } from "../fr";
 import { GdprService } from "../gdpr";
 import { getLink } from "../link";
 import { useGdprStore } from "../useGdprStore";
 import { ConsentBannerContentProps } from "./ConsentBannerContent";
+import { useTranslation } from "./i18n";
 
 const partition = <T,>(arr: T[], criteria: (item: T) => boolean): [T[], T[]] => [
     arr.filter(item => criteria(item)),
@@ -23,6 +26,8 @@ export const ConsentManager = ({
     const consents = useGdprStore(state => state.consents);
     const [accepted, setAccepted] = useState<string[]>([]);
 
+    const { t } = useTranslation();
+
     useEffect(() => {
         setAccepted([
             ...Object.entries(consents)
@@ -69,9 +74,9 @@ export const ConsentManager = ({
                         className={fr.cx("fr-consent-service__title")}
                         id="fr-consent-service__title"
                     >
-                        Préférences pour tous les services.
+                        {t("all services pref")}
                         <br />
-                        <Link href={gdprPageLink}>Données personnelles et cookies</Link>
+                        <Link href={gdprPageLink}>{t("personal data cookies")}</Link>
                     </legend>
                     <div className={fr.cx("fr-consent-service__radios")}>
                         <ButtonsGroup
@@ -80,13 +85,13 @@ export const ConsentManager = ({
                             buttons={[
                                 {
                                     onClick: () => accept(),
-                                    title: "Tout accepter",
-                                    children: "Tout accepter"
+                                    title: t("accept all"),
+                                    children: t("accept all")
                                 },
                                 {
                                     onClick: () => refuse(),
-                                    title: "Tout refuser",
-                                    children: "Tout refuser",
+                                    title: t("refuse all"),
+                                    children: t("refuse all"),
                                     priority: "secondary"
                                 }
                             ]}
@@ -119,7 +124,7 @@ export const ConsentManager = ({
                                     htmlFor={`consent-finality-${index}-accept`}
                                     className={fr.cx("fr-label")}
                                 >
-                                    Accepter
+                                    {t("accept")}
                                 </label>
                             </div>
                             <div className={fr.cx("fr-radio-group")}>
@@ -137,7 +142,7 @@ export const ConsentManager = ({
                                     htmlFor={`consent-finality-${index}-refuse`}
                                     className={fr.cx("fr-label")}
                                 >
-                                    Refuser
+                                    {t("refuse")}
                                 </label>
                             </div>
                         </div>
@@ -157,8 +162,8 @@ export const ConsentManager = ({
                 buttons={[
                     {
                         ...consentModalButtonProps,
-                        children: "Confirmer mes choix",
-                        title: "Confirmer mes choix",
+                        children: t("confirm choices"),
+                        title: t("confirm choices"),
                         onClick: () => confirm()
                     }
                 ]}
diff --git a/src/ConsentBanner/i18n.tsx b/src/ConsentBanner/i18n.tsx
@@ -0,0 +1,63 @@
+import { createComponentI18nApi } from "../i18n";
+import React from "react";
+import { getLink } from "../link";
+
+export const { useTranslation, addConsentBannerTranslations } = createComponentI18nApi({
+    componentName: "ConsentBanner",
+    frMessages: {
+        "all services pref": "Préférences pour tous les services.",
+        "personal data cookies": "Données personnelles et cookies",
+        "accept all": "Tout accepter",
+        "accept all - title": "Autoriser tous les cookies",
+        "refuse all": "Tout refuser",
+        "refuse all - title": "Refuser tous les cookies",
+        "accept": "Accepter",
+        "refuse": "Refuser",
+        "confirm choices": "Confirmer mes choix",
+        "about cookies": (p: { siteName: string }) => `À propos des cookies sur ${p.siteName}`,
+        "welcome message": (p: { gdprPageLink: string }) => {
+            const { Link } = getLink();
+            return (
+                <>
+                    Bienvenue ! Nous utilisons des cookies pour améliorer votre expérience et les
+                    services disponibles sur ce site. Pour en savoir plus, visitez la page{" "}
+                    <Link href={p.gdprPageLink}>Données personnelles et cookies</Link>. Vous pouvez,
+                    à tout moment, avoir le contrôle sur les cookies que vous souhaitez activer.
+                </>
+            );
+        },
+        "customize cookies": "Personnaliser",
+        "customize cookies - title": "Personnaliser les cookies",
+        "consent modal title": "Panneau de gestion des cookies"
+    }
+});
+
+addConsentBannerTranslations({
+    lang: "en",
+    messages: {
+        "all services pref": "Preferences for all services.",
+        "personal data cookies": "Personal data and cookies",
+        "accept all": "Accept all",
+        "accept all - title": "Accept all cookies",
+        "refuse all": "Refuse all",
+        "refuse all - title": "Refuse all cookies",
+        "accept": "Accept",
+        "refuse": "Refuse",
+        "confirm choices": "Confirm my choices",
+        "about cookies": (p: { siteName: string }) => `About cookies on ${p.siteName}`,
+        "welcome message": (p: { gdprPageLink: string }) => {
+            const { Link } = getLink();
+            return (
+                <>
+                    Welcome to our website! We use cookies to improve your experience and the
+                    services available services available on this site. To learn more, visit the{" "}
+                    <Link href={p.gdprPageLink}>"Personal Data and Cookies"</Link> page. You can, at
+                    any time, have control over which cookies you wish to enable at any time.
+                </>
+            );
+        },
+        "customize cookies": "Customize",
+        "customize cookies - title": "Customize cookies",
+        "consent modal title": "Cookie management panel"
+    }
+});
diff --git a/src/ConsentBanner/index.tsx b/src/ConsentBanner/index.tsx
@@ -1,13 +1,11 @@
-"use client";
-
 import React, { memo } from "react";
-import { useEffect, useState } from "react";
 
-import { useGdprStore } from "../useGdprStore";
 import { symToStr } from "tsafe/symToStr";
 import { createModal } from "../Modal";
-import { ConsentBannerContent, ConsentBannerContentProps } from "./ConsentBannerContent";
+import { ConsentBannerContentProps } from "./ConsentBannerContent";
 import { ConsentManager } from "./ConsentManager";
+import { ConsentBannerContentDisplayer } from "./ConsentBannerContentDisplayer";
+import { useTranslation } from "./i18n";
 
 const { ConsentModal, consentModalButtonProps } = createModal({
     name: "Consent",
@@ -18,32 +16,24 @@ export { consentModalButtonProps };
 
 export type ConsentBannerProps = Omit<ConsentBannerContentProps, "consentModalButtonProps">;
 
+// TODO handle sub finalities (https://www.systeme-de-design.gouv.fr/uploads/Capture_d_ecran_2021_03_24_a_17_45_33_8ba8e1fabb_1_1dd3309589.png)
 export const ConsentBanner = memo((props: ConsentBannerProps) => {
     const { gdprPageLink, services } = props;
-
-    const firstChoiceMade = useGdprStore(state => state.firstChoiceMade);
-    const __inited = useGdprStore(state => state.__inited);
-    const [stateFCM, setStateFCM] = useState(true);
-
-    useEffect(() => {
-        __inited && setStateFCM(firstChoiceMade);
-    }, [firstChoiceMade, __inited]);
+    const { t } = useTranslation();
 
     return (
         <>
-            <ConsentModal title="Panneau de gestion des cookies" size="large">
+            <ConsentModal title={t("consent modal title")} size="large">
                 <ConsentManager
                     gdprPageLink={gdprPageLink}
                     services={services}
                     consentModalButtonProps={consentModalButtonProps}
                 />
             </ConsentModal>
-            {!stateFCM && (
-                <ConsentBannerContent
-                    {...props}
-                    consentModalButtonProps={consentModalButtonProps}
-                />
-            )}
+            <ConsentBannerContentDisplayer
+                {...props}
+                consentModalButtonProps={consentModalButtonProps}
+            />
         </>
     );
 });
diff --git a/src/Modal.tsx b/src/Modal.tsx
@@ -89,7 +89,7 @@ const Modal = memo(
                             <div className={fr.cx("fr-modal__body")}>
                                 <div className={fr.cx("fr-modal__header")}>
                                     <button
-                                        className={fr.cx("fr-link--close", "fr-link")}
+                                        className={fr.cx("fr-btn--close", "fr-btn")}
                                         title={t("close")}
                                         aria-controls={id}
                                     >
diff --git a/src/i18n.tsx b/src/i18n.tsx
@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import { type ReactNode, useMemo } from "react";
 
 function getLanguageBestApprox<Language extends string>(params: {
     languages: readonly Language[];
@@ -31,29 +31,31 @@ function getLanguageBestApprox<Language extends string>(params: {
     return undefined;
 }
 
-type FrMessagesToTranslationFunction<
-    FrMessages extends Record<string, string | ((params: any) => string)>
-> = {
+type Message = NonNullable<ReactNode> | ((params: any) => NonNullable<ReactNode>);
+type Messages = Record<string, Message>;
+
+type FrMessagesToTranslationFunction<FrMessages extends Messages> = {
     (messageKey: NonFunctionMessageKey<FrMessages>): string;
     <K extends FunctionMessageKey<FrMessages>>(
         messageKey: K,
         params: ExtractArgument<FrMessages[K]>
     ): string;
 };
 
-type ExtractArgument<Message extends string | ((params: any) => string)> = Message extends (
+type ExtractArgument<TMessage extends Message> = TMessage extends (
     params: any
-) => string
-    ? Parameters<Message>[0]
+) => Exclude<Message, string>
+    ? Parameters<TMessage>[0]
     : never;
 
-type NonFunctionMessageKey<FrMessages extends Record<string, string | ((params: any) => string)>> =
-    {
-        [Key in keyof FrMessages]: FrMessages[Key] extends string ? Key : never;
-    }[keyof FrMessages];
+type NonFunctionMessageKey<FrMessages extends Messages> = {
+    [Key in keyof FrMessages]: FrMessages[Key] extends string ? Key : never;
+}[keyof FrMessages];
 
-type FunctionMessageKey<FrMessages extends Record<string, string | ((params: any) => string)>> =
-    Exclude<keyof FrMessages, NonFunctionMessageKey<FrMessages>>;
+type FunctionMessageKey<FrMessages extends Messages> = Exclude<
+    keyof FrMessages,
+    NonFunctionMessageKey<FrMessages>
+>;
 
 let useLang: () => string = () => "fr";
 
@@ -63,7 +65,7 @@ export function setUseLang(params: { useLang: () => string }) {
 
 export function createComponentI18nApi<
     ComponentName extends string,
-    FrMessages extends Record<string, string | ((params: any) => string)>
+    FrMessages extends Messages
 >(params: {
     componentName: ComponentName;
     frMessages: FrMessages;
@@ -89,7 +91,7 @@ export function createComponentI18nApi<
             return bestApproxLang ?? "fr";
         }, [lang]);
 
-        function t(messageKey: keyof FrMessages, params?: any): string {
+        function t(messageKey: keyof FrMessages, params?: any): ReactNode {
             const messageOrFn =
                 (messagesByLang as any)[bestMatchLang][messageKey] ??
                 (messagesByLang["fr"] as any)[messageKey];
diff --git a/test/integration/next-appdir/app/StartDsfr.tsx b/test/integration/next-appdir/app/StartDsfr.tsx
@@ -4,6 +4,7 @@ import { startReactDsfr } from "@codegouvfr/react-dsfr/next-appdir";
 import { defaultColorScheme } from "./defaultColorScheme";
 import Link from "next/link";
 
+
 declare module "@codegouvfr/react-dsfr/next-appdir" {
     interface RegisterLink { 
         Link: typeof Link;
@@ -12,7 +13,9 @@ declare module "@codegouvfr/react-dsfr/next-appdir" {
 
 startReactDsfr({ 
 	defaultColorScheme, 
-	Link
+	Link,
+    // Uncomment to test in english
+    // useLang: () => "en",
 });
 
 export default function StartDsfr(){

Original file line number	Diff line number	Diff line change
`@@ -89,7 +89,7 @@ const Modal = memo(`
`89`	`89`	`<div className={fr.cx("fr-modal__body")}>`
`90`	`90`	`<div className={fr.cx("fr-modal__header")}>`
`91`	`91`	`<button`
`92`		`- className={fr.cx("fr-link--close", "fr-link")}`
	`92`	`+ className={fr.cx("fr-btn--close", "fr-btn")}`
`93`	`93`	`title={t("close")}`
`94`	`94`	`aria-controls={id}`
`95`	`95`	`>`