Enable header navigation to be a custom node for RSC

garronej · garronej · commit 96102f237b2b · 2022-12-30T07:38:51.000+01:00
diff --git a/package.json b/package.json
@@ -138,8 +138,9 @@
         "./Quote": "./dist/Quote.js",
         "./Pagination": "./dist/Pagination.js",
         "./Notice": "./dist/Notice.js",
+        "./MainNavigation": "./dist/MainNavigation/index.js",
         "./Highlight": "./dist/Highlight.js",
-        "./Header": "./dist/Header/index.js",
+        "./Header": "./dist/Header.js",
         "./Footer": "./dist/Footer.js",
         "./Display": "./dist/Display.js",
         "./Card": "./dist/Card.js",
diff --git a/src/Header.tsx b/src/Header.tsx
@@ -1,24 +1,24 @@
 import React, { memo, forwardRef, useId } from "react";
 import type { ReactNode } from "react";
-import { fr } from "../fr";
-import { createComponentI18nApi } from "../i18n";
+import { fr } from "./fr";
+import { createComponentI18nApi } from "./i18n";
 import { symToStr } from "tsafe/symToStr";
-import { cx } from "../tools/cx";
-import { getLink } from "../link";
-import type { RegisteredLinkProps } from "../link";
-import type { MainNavigationProps } from "./MainNavigation";
-import { MainNavigation } from "./MainNavigation";
+import { cx } from "./tools/cx";
+import { getLink } from "./link";
+import type { RegisteredLinkProps } from "./link";
 import { assert } from "tsafe/assert";
 import type { Equals } from "tsafe";
-import type { FrIconClassName, RiIconClassName } from "../fr/generatedFromCss/classNames";
+import type { FrIconClassName, RiIconClassName } from "./fr/generatedFromCss/classNames";
+import type { MainNavigationProps } from "./MainNavigation";
+import { MainNavigation } from "./MainNavigation";
 
 export type HeaderProps = {
     className?: string;
     brandTop: ReactNode;
     serviceTitle?: ReactNode;
     serviceTagline?: ReactNode;
     homeLinkProps: RegisteredLinkProps & { title: string };
-    navItems?: MainNavigationProps.Item[];
+    navigation?: MainNavigationProps.Item[] | ReactNode;
     /** There should be at most three of them */
     quickAccessItems?: HeaderProps.QuickAccessItem[];
     operatorLogo?: {
@@ -59,14 +59,7 @@ export type HeaderProps = {
             | "serviceTitle"
             | "serviceTagline"
             | "menu"
-            | "menuLinks"
-            | "nav"
-            | "navList"
-            | "navItem"
-            | "navLink"
-            | "navBtn"
-            | "navMenu"
-            | "navMenuList",
+            | "menuLinks",
             string
         >
     >;
@@ -105,7 +98,7 @@ export const Header = memo(
             serviceTitle,
             serviceTagline,
             homeLinkProps,
-            navItems = [],
+            navigation = undefined,
             quickAccessItems = [],
             operatorLogo,
             renderSearchInput,
@@ -180,7 +173,7 @@ export const Header = memo(
                                     )}
 
                                     {(quickAccessItems.length > 0 ||
-                                        navItems.length > 0 ||
+                                        navigation !== undefined ||
                                         renderSearchInput !== undefined) && (
                                         <div
                                             className={cx(
@@ -328,7 +321,7 @@ export const Header = memo(
                         </div>
                     </div>
                 </div>
-                {(navItems.length !== 0 || quickAccessItems.length !== 0) && (
+                {(navigation !== undefined || quickAccessItems.length !== 0) && (
                     <div
                         className={cx(fr.cx("fr-header__menu", "fr-modal"), classes.menu)}
                         id={menuModalId}
@@ -345,20 +338,12 @@ export const Header = memo(
                             <div
                                 className={cx(fr.cx("fr-header__menu-links"), classes.menuLinks)}
                             />
-                            {navItems.length !== 0 && (
-                                <MainNavigation
-                                    items={navItems}
-                                    classes={{
-                                        "root": classes.nav,
-                                        "list": classes.navList,
-                                        "item": classes.navItem,
-                                        "link": classes.navLink,
-                                        "btn": classes.navBtn,
-                                        "menu": classes.navMenu,
-                                        "menuList": classes.navMenuList
-                                    }}
-                                />
-                            )}
+                            {navigation !== undefined &&
+                                (navigation instanceof Array ? (
+                                    <MainNavigation items={navigation} />
+                                ) : (
+                                    navigation
+                                ))}
                         </div>
                     </div>
                 )}
diff --git a/src/Header/index.ts b/src/Header/index.ts
diff --git a/src/MainNavigation/MainNavigation.tsx b/src/MainNavigation/MainNavigation.tsx
@@ -1,13 +1,13 @@
 import React, { memo, forwardRef, useId } from "react";
 import type { ReactNode } from "react";
-import { createComponentI18nApi } from "../../i18n";
+import { createComponentI18nApi } from "../i18n";
 import { symToStr } from "tsafe/symToStr";
 import { assert } from "tsafe/assert";
 import type { Equals } from "tsafe";
-import type { RegisteredLinkProps } from "../../link";
-import { getLink } from "../../link";
-import { fr } from "../../fr";
-import { cx } from "../../tools/cx";
+import type { RegisteredLinkProps } from "../link";
+import { getLink } from "../link";
+import { fr } from "../fr";
+import { cx } from "../tools/cx";
 import type { MenuProps } from "./Menu";
 import { Menu } from "./Menu";
 import type { MegaMenuProps } from "./MegaMenu";
diff --git a/src/MainNavigation/MegaMenu.tsx b/src/MainNavigation/MegaMenu.tsx
@@ -1,13 +1,13 @@
 import React, { memo, forwardRef } from "react";
 import type { ReactNode } from "react";
 import { symToStr } from "tsafe/symToStr";
-import { createComponentI18nApi } from "../../i18n";
-import { fr } from "../../fr";
-import { cx } from "../../tools/cx";
+import { createComponentI18nApi } from "../i18n";
+import { fr } from "../fr";
+import { cx } from "../tools/cx";
 import { assert } from "tsafe/assert";
 import type { Equals } from "tsafe";
-import { getLink } from "../../link";
-import type { RegisteredLinkProps } from "../../link";
+import { getLink } from "../link";
+import type { RegisteredLinkProps } from "../link";
 
 export type MegaMenuProps = {
     classes?: Partial<Record<"root" | "leader" | "category" | "list", string>>;
@@ -157,4 +157,6 @@ addMegaMenuTranslations({
     }
 });
 
+export { addMegaMenuTranslations };
+
 export default MegaMenu;
diff --git a/src/MainNavigation/Menu.tsx b/src/MainNavigation/Menu.tsx
@@ -3,12 +3,12 @@
 import React, { memo, forwardRef } from "react";
 import type { ReactNode } from "react";
 import { symToStr } from "tsafe/symToStr";
-import { fr } from "../../fr";
-import { cx } from "../../tools/cx";
+import { fr } from "../fr";
+import { cx } from "../tools/cx";
 import { assert } from "tsafe/assert";
 import type { Equals } from "tsafe";
-import type { RegisteredLinkProps } from "../../link";
-import { getLink } from "../../link";
+import type { RegisteredLinkProps } from "../link";
+import { getLink } from "../link";
 
 export type MenuProps = {
     classes?: Partial<Record<"root" | "list", string>>;
diff --git a/src/MainNavigation/index.ts b/src/MainNavigation/index.ts
@@ -1,4 +1,5 @@
 export * from "./MainNavigation";
+export { addMegaMenuTranslations } from "./MegaMenu";
 
 import { MainNavigation } from "./MainNavigation";
 
diff --git a/src/scripts/list-exports.ts b/src/scripts/list-exports.ts
@@ -2,7 +2,7 @@ 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 { execSync } from "child_process";
 import { same } from "evt/tools/inDepth/same";
 import { capitalize } from "tsafe/capitalize";
 
@@ -65,6 +65,7 @@ const newExports = {
                 return undefined;
             })
             .filter(exclude(undefined))
+            /*
             .filter(([, relativePath]) => {
                 try {
                     execSync(`git ls-files --error-unmatch ${pathJoin(srcDirPath, relativePath)}`, {
@@ -76,6 +77,7 @@ const newExports = {
 
                 return true;
             })
+            */
             .filter(exclude(undefined))
             .sort()
             .reverse()
diff --git a/stories/Header.stories.tsx b/stories/Header.stories.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import { Header } from "../dist/Header";
+import { MainNavigation } from "../dist/MainNavigation";
 import { sectionName } from "./sectionName";
 import { getStoryFactory } from "./getStory";
 import placeholder_9x16ImgUrl from "./assets/placeholder.9x16.png";
@@ -38,7 +39,7 @@ export const SimpleHeader = getStory({
         "href": "/",
         "title": "Accueil - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)"
     },
-    "navItems": [
+    "navigation": [
         {
             "text": "accès direct",
             "linkProps": {
@@ -182,7 +183,7 @@ export const HeaderWithQuickAccessItemsNavItemsAndSearchEngine = getStory({
             }
         }
     ],
-    "navItems": [
+    "navigation": [
         {
             "text": "accès direct",
             "linkProps": {
@@ -287,3 +288,66 @@ export const WithHorizontalOperatorLogo = getStory({
         "alt": "[À MODIFIER - texte alternatif de l’image]"
     }
 });
+
+export const NavigationAsCustomNode = getStory(
+    {
+        "brandTop": (
+            <>
+                INTITULE
+                <br />
+                OFFICIEL
+            </>
+        ),
+        "homeLinkProps": {
+            "href": "/",
+            "title": "Accueil - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)"
+        },
+        "navigation": (
+            <MainNavigation
+                items={[
+                    {
+                        "text": "accès direct",
+                        "linkProps": {
+                            "href": "#",
+                            "target": "_self"
+                        }
+                    },
+                    {
+                        "text": "accès direct",
+                        "linkProps": {
+                            "href": "#",
+                            "target": "_self"
+                        },
+                        "isActive": true
+                    },
+                    {
+                        "text": "accès direct",
+                        "linkProps": {
+                            "href": "#",
+                            "target": "_self"
+                        }
+                    },
+                    {
+                        "text": "accès direct",
+                        "linkProps": {
+                            "href": "#",
+                            "target": "_self"
+                        }
+                    }
+                ]}
+            />
+        )
+    },
+    {
+        "description": `You can provide a custom \`ReactNode\` as \`navigation\` prop.  
+    It is useful to keep the Header as a server component in Next 13 AppDir.  
+
+\`\`\`tsx
+        
+import { MainNavigation } from "@codegouvfr/react-dsfr/MainNavigation";  
+        
+\`\`\`
+
+    `
+    }
+);
diff --git a/test/integration/cra/src/Home.tsx b/test/integration/cra/src/Home.tsx
@@ -7,7 +7,6 @@ export function Home() {
 
     return (
         <>
-
             <Alert
                 closable
                 severity="success"
diff --git a/test/integration/cra/src/index.tsx b/test/integration/cra/src/index.tsx
@@ -32,7 +32,7 @@ function Root() {
                 serviceTitle="Nom du site / service"
                 quickAccessItems={[headerFooterDisplayItem]}
                 homeLinkProps={{ ...routes.home().link, "title": "Accueil - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)" }}
-                navItems={[
+                navigation={[
                     {
                         "text": "Home",
                         "linkProps": routes.home().link,
diff --git a/test/integration/next-pagesdir/pages/_app.tsx b/test/integration/next-pagesdir/pages/_app.tsx
@@ -62,7 +62,7 @@ function App({ Component, pageProps }: AppProps) {
                 brandTop={brandTop}
                 serviceTitle="Nom du site / service"
                 homeLinkProps={homeLinkPops}
-                navItems={[
+                navigation={[
                     {
                         "text": "Home",
                         "linkProps": {
diff --git a/test/integration/vite/src/main.tsx b/test/integration/vite/src/main.tsx
@@ -36,7 +36,7 @@ function Root() {
                 serviceTitle="Nom du site / service"
                 homeLinkProps={{ "to": "/", "title": "Accueil - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)" }}
                 quickAccessItems={[headerFooterDisplayItem]}
-                navItems={[
+                navigation={[
                     {
                         "text": "Home",
                         "linkProps": {

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`export * from "./MainNavigation";`
	`2`	`+export { addMegaMenuTranslations } from "./MegaMenu";`
`2`	`3`
`3`	`4`	`import { MainNavigation } from "./MainNavigation";`
`4`	`5`