Add ServerComponent declinaison of the Sumary component

Author: garronej

package.json

@@ -133,7 +133,8 @@
         "./mui": "./dist/mui.js",
         "./Tile": "./dist/Tile.js",
         "./Tabs": "./dist/Tabs.js",
-        "./Summary": "./dist/Summary.js",
+        "./Summary/ServerComponent": "./dist/Summary/ServerComponent.js",
+        "./Summary": "./dist/Summary/index.js",
         "./Stepper": "./dist/Stepper.js",
         "./SkipLinks": "./dist/SkipLinks.js",
         "./Quote": "./dist/Quote.js",

src/Pagination.tsx

@@ -2,10 +2,10 @@ import React, { memo, forwardRef } from "react";
 import { symToStr } from "tsafe/symToStr";
 import { assert } from "tsafe/assert";
 import type { Equals } from "tsafe";
-
 import { fr } from "./fr";
 import { cx } from "./tools/cx";
-import { createComponentI18nApi } from "./i18n/i18n";
+import { createComponentI18nApi } from "./i18n/createComponentI18nApi";
+import { useLang } from "./i18n/useLang";
 import { RegisteredLinkProps, getLink } from "./link";
 
 export type PaginationProps = {
@@ -73,7 +73,7 @@ export const Pagination = memo(
 
         assert<Equals<keyof typeof rest, never>>();
 
-        const { t } = useTranslation();
+        const { t } = getTranslation(useLang());
 
         const { Link } = getLink();
 
@@ -177,7 +177,7 @@ export const Pagination = memo(
 
 Pagination.displayName = symToStr({ Pagination });
 
-const { useTranslation, addPaginationTranslations } = createComponentI18nApi({
+const { getTranslation, addPaginationTranslations } = createComponentI18nApi({
     "componentName": symToStr({ Pagination }),
     "frMessages": {
         "first page": "Première page",

src/Summary.tsx renamed to src/Summary/ServerComponent.tsx

@@ -1,36 +1,19 @@
-"use client";
-
 import React, { memo, forwardRef, useId } from "react";
 import { symToStr } from "tsafe/symToStr";
 import { assert } from "tsafe/assert";
 import type { Equals } from "tsafe";
-import { createComponentI18nApi } from "./i18n/createComponentI18nApi";
-import { useLang } from "./i18n/useLang";
-import { cx } from "./tools/cx";
-import { fr } from "./fr";
-import { getLink } from "./link";
-import type { RegisteredLinkProps } from "./link";
-
-type SummaryLink = {
-    text: string;
-    linkProps: RegisteredLinkProps;
-};
-
-export type SummaryProps = {
-    className?: string;
-    links: SummaryLink[];
-    title?: string;
-    /** Default: "p" */
-    as?: "p" | "h2" | "h3" | "h4" | "h5" | "h6";
-    classes?: Partial<Record<"root" | "title" | "link", string>>;
-};
+import { createComponentI18nApi } from "../i18n/createComponentI18nApi";
+import { cx } from "../tools/cx";
+import { fr } from "../fr";
+import { getLink } from "../link";
+import type { SummaryProps } from "./Summary";
 
 /** @see <https://react-dsfr-components.etalab.studio/?path=/docs/components-summary> */
 export const Summary = memo(
-    forwardRef<HTMLDivElement, SummaryProps>((props, ref) => {
-        const { className, links, as = "p", title, classes = {}, ...rest } = props;
+    forwardRef<HTMLDivElement, SummaryProps & { lang?: string }>((props, ref) => {
+        const { className, links, as = "p", title, classes = {}, lang = "fr", ...rest } = props;
 
-        const { t } = getTranslation(useLang());
+        const { t } = getTranslation(lang);
 
         const titleId = useId();
         const summaryTitle = title ?? t("title");

src/Summary/Summary.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import React from "react";
+import type { RegisteredLinkProps } from "../link";
+import { Summary as SummarySc } from "./ServerComponent";
+import { useLang } from "../i18n/useLang";
+
+export type SummaryProps = {
+    className?: string;
+    links: {
+        text: string;
+        linkProps: RegisteredLinkProps;
+    }[];
+    title?: string;
+    /** Default: "p" */
+    as?: "p" | "h2" | "h3" | "h4" | "h5" | "h6";
+    classes?: Partial<Record<"root" | "title" | "link", string>>;
+};
+
+export function Summary(props: SummaryProps) {
+    return <SummarySc {...props} lang={useLang()} />;
+}
+
+export default Summary;

src/Summary/index.ts

@@ -0,0 +1,7 @@
+export { addSummaryTranslations } from "./ServerComponent";
+import { Summary } from "./Summary";
+export { SummaryProps } from "./Summary";
+
+export { Summary };
+
+export default Summary;

src/i18n/createComponentI18nApi.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import { useMemo } from "react";
 
 function getLanguageBestApprox<Language extends string>(params: {

src/scripts/list-exports.ts

@@ -2,7 +2,6 @@ import * as fs from "fs";
 import { join as pathJoin } from "path";
 import { getProjectRoot } from "../bin/tools/getProjectRoot";
 import { exclude } from "tsafe/exclude";
-import { execSync } from "child_process";
 import { same } from "evt/tools/inDepth/same";
 import { capitalize } from "tsafe/capitalize";
 
@@ -45,7 +44,22 @@ const newExports = {
                             continue;
                         }
 
-                        return [basename, relativePath];
+                        const serverComponentRelativePath = pathJoin(
+                            basename,
+                            "ServerComponent.tsx"
+                        );
+
+                        return [
+                            [basename, relativePath],
+                            ...(fs.existsSync(pathJoin(srcDirPath, serverComponentRelativePath))
+                                ? [
+                                      [
+                                          pathJoin(basename, "ServerComponent"),
+                                          serverComponentRelativePath
+                                      ]
+                                  ]
+                                : [])
+                        ] as const;
                     }
 
                     return undefined;
@@ -60,12 +74,14 @@ const newExports = {
 
                     const componentName = match[1];
 
-                    return [componentName, `${componentName}.tsx`];
+                    return [[componentName, `${componentName}.tsx`]];
                 }
 
                 return undefined;
             })
             .filter(exclude(undefined))
+            .flat()
+            /*
             .filter(([, relativePath]) => {
                 try {
                     execSync(`git ls-files --error-unmatch ${pathJoin(srcDirPath, relativePath)}`, {
@@ -77,6 +93,7 @@ const newExports = {
 
                 return true;
             })
+            */
             .filter(exclude(undefined))
             .sort()
             .reverse()

stories/Summary.stories.tsx

@@ -7,7 +7,7 @@ const { meta, getStory } = getStoryFactory({
     "wrappedComponent": { Summary },
     "description": `
 - [See DSFR documentation](//www.systeme-de-design.gouv.fr/elements-d-interface/composants/sommaire)
-- [See source code](//github.com/codegouvfr/react-dsfr/blob/main/src/Summary.tsx)`,
+- [See source code](//github.com/codegouvfr/react-dsfr/blob/main/src/Summary/ServerComponent.tsx)`,
     "disabledProps": ["lang"]
 });
 

test/integration/next-appdir/app/page.tsx

@@ -3,7 +3,7 @@ import { Alert } from "@codegouvfr/react-dsfr/Alert";
 import { Badge } from "@codegouvfr/react-dsfr/Badge";
 import { Card } from "@codegouvfr/react-dsfr/Card";
 import { Tabs } from "@codegouvfr/react-dsfr/Tabs";
-import { Summary } from "@codegouvfr/react-dsfr/Summary";
+import { Summary } from "@codegouvfr/react-dsfr/Summary/ServerComponent";
 
 export default function Page() {