Feature compatibility with various routing library

Author: garronej

src/Header.tsx

@@ -5,6 +5,8 @@ import { createComponentI18nApi } from "./lib/i18n";
 import { symToStr } from "tsafe/symToStr";
 import { cx } from "./lib/tools/cx";
 import { FrIconClassName, RiIconClassName } from "./lib/generatedFromCss/classNames";
+import type { LinkProps } from "./lib/routing";
+import { useLink } from "./lib/routing";
 
 //NOTE: This is a work in progress, this component is not yet usable.
 
@@ -15,7 +17,7 @@ export type HeaderProps = {
     baselinePrécisionsSurLorganisation: ReactNode;
     links: {
         text: ReactNode;
-        href: string;
+        linkProps: LinkProps;
         iconId: FrIconClassName | RiIconClassName;
     }[];
 };
@@ -35,6 +37,8 @@ export function Header(props: HeaderProps) {
 
     const { t } = useTranslation();
 
+    const { Link } = useLink();
+
     return (
         <header role="banner" className={cx(fr.cx("fr-header"), className)}>
             <div /*className={fr.cx("fr-header__body" as any)}*/>
@@ -75,11 +79,14 @@ export function Header(props: HeaderProps) {
                         <div className={fr.cx("fr-header__tools")}>
                             <div className={fr.cx("fr-header__tools-links")}>
                                 <ul className={fr.cx("fr-btns-group")}>
-                                    {links.map(({ href, iconId, text }) => (
-                                        <li key={href + iconId}>
-                                            <a className={fr.cx("fr-btn", iconId)} href={href}>
+                                    {links.map(({ linkProps, iconId, text }, i) => (
+                                        <li key={i}>
+                                            <Link
+                                                {...linkProps}
+                                                className={fr.cx("fr-btn", iconId)}
+                                            >
                                                 {text}
-                                            </a>
+                                            </Link>
                                         </li>
                                     ))}
                                 </ul>

src/lib/index.ts

@@ -8,6 +8,8 @@ export type { SpacingToken } from "./spacing";
 import { cx } from "./cx";
 export type { FrCxArg } from "./cx";
 export { DsfrLangProvider } from "./i18n";
+export { createLinkProvider } from "./routing";
+export type { LinkProps, HTMLAnchorProps } from "./routing";
 
 export const fr = {
     breakpoints,

src/lib/routing.tsx

@@ -0,0 +1,43 @@
+import React, { createContext, useContext } from "react";
+import type { ReactNode } from "react";
+
+import type { DetailedHTMLProps, AnchorHTMLAttributes } from "react";
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface LinkProps {
+    className?: string;
+    children?: ReactNode;
+}
+
+export type HTMLAnchorProps = DetailedHTMLProps<
+    AnchorHTMLAttributes<HTMLAnchorElement>,
+    HTMLAnchorElement
+>;
+
+const context = createContext<CreateLinkProviderPrams["Link"]>(props => <a {...props} />);
+
+type CreateLinkProviderPrams = {
+    Link: (props: LinkProps) => JSX.Element;
+};
+
+export function createLinkProvider(params: CreateLinkProviderPrams) {
+    const { Link } = params;
+
+    type Props = {
+        children: ReactNode;
+    };
+
+    function LinkProvider(props: Props) {
+        const { children } = props;
+
+        return <context.Provider value={Link}>{children}</context.Provider>;
+    }
+
+    return { LinkProvider };
+}
+
+export function useLink() {
+    const Link = useContext(context);
+
+    return { Link };
+}

src/next.tsx

@@ -31,9 +31,9 @@ import {
 import type { ColorScheme } from "./lib/darkMode";
 import DefaultDocument from "next/document";
 import { getAssetUrl } from "./lib/tools/getAssetUrl";
+import { setLangToUseIfProviderNotUsed } from "./lib/i18n";
 import "./dsfr/dsfr.css";
 import "./dsfr/utility/icons/icons.css";
-import { setLangToUseIfProviderNotUsed } from "./lib/i18n";
 
 const fontUrlByFileBasename = {
     "Marianne-Light": marianneLightWoff2Url,

test/integration/cra/src/index.tsx

@@ -6,6 +6,14 @@ import { Mui } from "./Mui";
 import { useRoute, RouteProvider } from "./router";
 import { Header } from "@codegouvfr/react-dsfr/Header";
 import { fr } from "@codegouvfr/react-dsfr";
+import type { Link as TypeRouteLink } from "type-route";
+import { routes } from "./router";
+
+declare module "@codegouvfr/react-dsfr" {
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    export interface LinkProps extends TypeRouteLink { }
+
+}
 
 startDsfrReact({
     "defaultColorScheme": "system"
@@ -20,19 +28,14 @@ createRoot(document.getElementById("root")!).render(
                 nomDuSiteSlashService="Nom du site / service"
                 links={[
                     {
-                        "text": "Créer un espace",
-                        "iconId": "fr-icon-add-circle-line",
-                        "href": "#"
-                    },
-                    {
-                        "text": "Se connecter",
-                        "iconId": "fr-icon-lock-line",
-                        "href": "#"
+                        "text": "Home",
+                        "iconId": "fr-icon-home-4-fill",
+                        "linkProps": routes.home().link
                     },
                     {
-                        "text": "S'enregistrer",
-                        "iconId": "fr-icon-account-line",
-                        "href": "#"
+                        "text": "Mui playground",
+                        "iconId": "ri-play-circle-fill",
+                        "linkProps": routes.mui().link
                     }
                 ]}
             />

test/integration/next/pages/_app.tsx

@@ -4,7 +4,13 @@ import { Header } from "@codegouvfr/react-dsfr/Header";
 import { createEmotionSsrAdvancedApproach } from "tss-react/next";
 import { useStyles } from "tss-react/dsfr";
 import { fr } from "@codegouvfr/react-dsfr";
+import type { LinkProps as NextLinkProps } from "next/link";
 
+declare module "@codegouvfr/react-dsfr" {
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    export interface LinkProps extends NextLinkProps { }
+
+}
 
 const {
     withDsfr,
@@ -46,17 +52,23 @@ function App({ Component, pageProps }: AppProps) {
                         {
                             "text": "Créer un espace",
                             "iconId": "fr-icon-add-circle-line",
-                            "href": "#"
+                            "linkProps": {
+                                "href": "#"
+                            }
                         },
                         {
                             "text": "Se connecter",
                             "iconId": "fr-icon-lock-line",
-                            "href": "#"
+                            "linkProps": {
+                                "href": "#"
+                            }
                         },
                         {
                             "text": "S'enregistrer",
                             "iconId": "fr-icon-account-line",
-                            "href": "#"
+                            "linkProps": {
+                                "href": "#"
+                            }
                         }
                     ]}
                 />