Test integration with react-router

Author: garronej

src/lib/index.ts

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

src/lib/routing.tsx

@@ -17,23 +17,23 @@ export type HTMLAnchorProps = DetailedHTMLProps<
 const context = createContext<CreateLinkProviderPrams["Link"]>(props => <a {...props} />);
 
 type CreateLinkProviderPrams = {
-    Link: (props: LinkProps) => JSX.Element;
+    Link: (props: LinkProps) => ReturnType<React.FC>;
 };
 
-export function createLinkProvider(params: CreateLinkProviderPrams) {
+export function createDsfrLinkProvider(params: CreateLinkProviderPrams) {
     const { Link } = params;
 
     type Props = {
         children: ReactNode;
     };
 
-    function LinkProvider(props: Props) {
+    function DsfrLinkProvider(props: Props) {
         const { children } = props;
 
         return <context.Provider value={Link}>{children}</context.Provider>;
     }
 
-    return { LinkProvider };
+    return { DsfrLinkProvider };
 }
 
 export function useLink() {

test/integration/vite/package.json

@@ -14,7 +14,11 @@
     },
     "dependencies": {
         "react": "18.2.0",
-         "react-dom": "18.2.0",
+        "react-dom": "18.2.0",
+        "react-router-dom": "^6.4.3",
+        "@mui/x-date-pickers": "^5.0.9",
+        "@mui/icons-material": "^5.10.16",
+        "dayjs": "^1.11.6",
         "@codegouvfr/react-dsfr": "file:../../../dist"
     },
     "devDependencies": {
@@ -24,4 +28,4 @@
         "typescript": "^4.6.4",
         "vite": "^3.1.0"
     }
-}
+}

test/integration/vite/src/App.tsx renamed to test/integration/vite/src/Home.tsx

@@ -1,35 +1,12 @@
-import { Header } from "@codegouvfr/react-dsfr/Header";
 import { Alert } from "@codegouvfr/react-dsfr/Alert";
 import { useIsDark, fr } from "@codegouvfr/react-dsfr";
 import { DarkModeSwitch } from "@codegouvfr/react-dsfr/DarkModeSwitch";
 
-export function App() {
+export function Home() {
     const { isDark, setIsDark } = useIsDark();
 
     return (
         <>
-            <Header
-                intituléOfficiel="Intitulé officiel"
-                baselinePrécisionsSurLorganisation="baseline - Précision sur l'organisation"
-                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": "S'enregistrer",
-                        "iconId": "fr-icon-account-line",
-                        "href": "#"
-                    }
-                ]}
-            />
 
             <Alert
                 isClosable={true}