Skip to content

Commit

Permalink
Fix integration apps
Browse files Browse the repository at this point in the history
  • Loading branch information
garronej committed Jun 27, 2023
1 parent 837345c commit f015361
Show file tree
Hide file tree
Showing 5 changed files with 102 additions and 130 deletions.
25 changes: 0 additions & 25 deletions test/integration/cra/src/Home.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,7 @@ import { fr } from "@codegouvfr/react-dsfr";
import { useIsDark } from "@codegouvfr/react-dsfr/useIsDark";
import { SideMenu } from "@codegouvfr/react-dsfr/SideMenu";
import { Table } from "@codegouvfr/react-dsfr/Table";
import { useGdprStore } from "@codegouvfr/react-dsfr/useGdprStore"
import { ButtonsGroup } from '@codegouvfr/react-dsfr/ButtonsGroup';
import { consentModalNativeButtonProps } from '@codegouvfr/react-dsfr/ConsentBanner';

const sideMenuItems = [
{
Expand Down Expand Up @@ -109,7 +107,6 @@ export function Home() {
/>

<TableExample />
<GdprStoreViewer />
</>
);
}
Expand All @@ -131,25 +128,3 @@ function TableExample() {
);
}


export const GdprStoreViewer = () => {
const {consents, firstChoiceMade } = useGdprStore();

return <>
<ButtonsGroup inlineLayoutWhen='always' buttons={[
{
"nativeButtonProps": consentModalNativeButtonProps,
children: "Open Consent"
},
{
children: "Reset Consent",
priority: "secondary",
onClick() {
localStorage.removeItem("dsfr-gdpr-consent");
window.location.reload();
}
}
]} />
<pre>{JSON.stringify({consents, firstChoiceMade})}</pre>
</>;
}
104 changes: 44 additions & 60 deletions test/integration/cra/src/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,19 +9,12 @@ import { Header } from "@codegouvfr/react-dsfr/Header";
import { fr } from "@codegouvfr/react-dsfr";
import { routes } from "./router";
import { headerFooterDisplayItem } from "@codegouvfr/react-dsfr/Display";
import { GdprStoreProvider } from "@codegouvfr/react-dsfr/gdpr";
import { ConsentBanner } from '@codegouvfr/react-dsfr/ConsentBanner';


startReactDsfr({
"defaultColorScheme": "system"
});

declare module "@codegouvfr/react-dsfr/gdpr" {
interface RegisterGdprServices {
matomo: never;
}
}

createRoot(document.getElementById("root")!).render(
<StrictMode>
Expand All @@ -46,62 +39,53 @@ function Root() {
}
}}
/>
<GdprStoreProvider>
<ConsentBanner gdprLinkProps={{ href: "/mui" }} siteName='Next Test App' services={[
{
name: "matomo",
title: "Matomo",
description: "User tracking",
}
]} />
<div style={{
"minHeight": "100vh",
"display": "flex",
"flexDirection": "column",
}}>
<Header
brandTop={<>INTITULE<br />OFFICIEL</>}
serviceTitle="Nom du site / service"
quickAccessItems={[
headerFooterDisplayItem,
{
iconId: "ri-mail-line",
linkProps: {
href: `mailto:${"[email protected]"}`,
},
text: "Nous contacter",
}
]}
homeLinkProps={{ ...routes.home().link, "title": "Accueil - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)" }}
navigation={[
{
"text": "Home",
"linkProps": routes.home().link,
"isActive": route.name === "home"
},
{
"text": "Mui playground",
"linkProps": routes.mui().link,
"isActive": route.name === "mui"
}
]}
/>
<div style={{
"minHeight": "100vh",
"display": "flex",
"flexDirection": "column",
"flex": 1,
"margin": "auto",
"maxWidth": 1000,
...fr.spacing("padding", { "topBottom": "10v" })
}}>
<Header
brandTop={<>INTITULE<br />OFFICIEL</>}
serviceTitle="Nom du site / service"
quickAccessItems={[
headerFooterDisplayItem,
{
iconId: "ri-mail-line",
linkProps: {
href: `mailto:${"[email protected]"}`,
},
text: "Nous contacter",
}
]}
homeLinkProps={{ ...routes.home().link, "title": "Accueil - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)" }}
navigation={[
{
"text": "Home",
"linkProps": routes.home().link,
"isActive": route.name === "home"
},
{
"text": "Mui playground",
"linkProps": routes.mui().link,
"isActive": route.name === "mui"
}
]}
/>
<div style={{
"flex": 1,
"margin": "auto",
"maxWidth": 1000,
...fr.spacing("padding", { "topBottom": "10v" })
}}>
{(() => {
switch (route.name) {
case "mui": return <Mui />;
case "home": return <Home />;
case false: return <h1>404</h1>
}
})()}
</div>
{(() => {
switch (route.name) {
case "mui": return <Mui />;
case "home": return <Home />;
case false: return <h1>404</h1>
}
})()}
</div>
</GdprStoreProvider>
</div>
</>
);

Expand Down
25 changes: 0 additions & 25 deletions test/integration/vite/src/Home.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,6 @@ import { fr } from "@codegouvfr/react-dsfr";
import { useIsDark } from "@codegouvfr/react-dsfr/useIsDark";
import { useState } from "react";
import { Table } from "@codegouvfr/react-dsfr/Table";
import { useGdprStore } from "@codegouvfr/react-dsfr/useGdprStore"
import { consentModalNativeButtonProps } from '@codegouvfr/react-dsfr/ConsentBanner';

export function Home() {
const { isDark, setIsDark } = useIsDark();
Expand Down Expand Up @@ -68,8 +66,6 @@ export function Home() {
</div>
<Form />
<TableExample />
<GdprStoreViewer />

</>
);
}
Expand Down Expand Up @@ -207,24 +203,3 @@ function TableExample() {
}


export const GdprStoreViewer = () => {
const {consents, firstChoiceMade } = useGdprStore();

return <>
<ButtonsGroup inlineLayoutWhen='always' buttons={[
{
"nativeButtonProps": consentModalNativeButtonProps,
children: "Open Consent"
},
{
children: "Reset Consent",
priority: "secondary",
onClick() {
localStorage.removeItem("dsfr-gdpr-consent");
location.reload();
}
}
]} />
<pre>{JSON.stringify({consents, firstChoiceMade})}</pre>
</>;
}
46 changes: 46 additions & 0 deletions test/integration/vite/src/gdpr.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
"use client";

import { createGdprApi } from "@codegouvfr/react-dsfr/gdpr";

export const {
ConsentBannerAndConsentManagement,
useGdpr,
FooterConsentManagementItem,
FooterPersonalDataPolicyItem
} = createGdprApi({
"finalityDescription": ({ lang }) => ({
"advertising": {
"title": "Publicité",
"description": "Nous utilisons des cookies pour vous proposer des publicités adaptées à vos centres d’intérêts et mesurer leur efficacité."
},
"analytics": {
"title": "Analyse",
"description": "Nous utilisons des cookies pour mesurer l’audience de notre site et améliorer son contenu."
},
"personalization": {
"title": "Personnalisation",
"description": "Nous utilisons des cookies pour vous proposer des contenus adaptés à vos centres d’intérêts."
},
"statistics": {
"title": "Statistiques",
"description": "Nous utilisons des cookies pour mesurer l’audience de notre site et améliorer son contenu.",
"subFinalities": {
"deviceInfo": "Informations sur votre appareil",
"traffic": "Informations sur votre navigation",
}
}
}),
"personalDataPolicyLinkProps": {
"to": "#",
"onClick": ()=> {
alert("Navigate or display your data policy");
}
},
"consentCallback": async ({ finalityConsent, finalityConsent_prev })=> {
console.log("callback from gdpr hook", { finalityConsent, finalityConsent_prev });
}
});




32 changes: 12 additions & 20 deletions test/integration/vite/src/main.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,7 @@ import { Routes, Route, Link, useLocation } from "react-router-dom";
import { headerFooterDisplayItem } from "@codegouvfr/react-dsfr/Display";
import { GlobalStyles } from "tss-react";
import { fr } from "@codegouvfr/react-dsfr";
import { GdprStoreProvider } from "@codegouvfr/react-dsfr/gdpr";
import { ConsentBanner } from '@codegouvfr/react-dsfr/ConsentBanner';
import { ConsentBannerAndConsentManagement, FooterConsentManagementItem, FooterPersonalDataPolicyItem } from "./gdpr";

startReactDsfr({ "defaultColorScheme": "system", Link });

Expand All @@ -21,11 +20,6 @@ declare module "@codegouvfr/react-dsfr/spa" {
}
}

declare module "@codegouvfr/react-dsfr/gdpr" {
interface RegisterGdprServices {
matomo: never;
}
}

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
<React.StrictMode>
Expand All @@ -52,21 +46,15 @@ function Root() {
const location = useLocation();

return (
<GdprStoreProvider>
<ConsentBanner gdprLinkProps={{ to: "/mui" }} siteName='Next Test App' services={[
{
name: "matomo",
title: "Matomo",
description: "User tracking",
}
]} />
<>
<ConsentBannerAndConsentManagement />
<div style={{ "minHeight": "100vh", "display": "flex", "flexDirection": "column" }}>
<Header
brandTop={<>INTITULE<br />OFFICIEL</>}
serviceTitle="Nom du site / service"
homeLinkProps={{
"to": "/",
"title": "Accueil - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)"
homeLinkProps={{
"to": "/",
"title": "Accueil - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)"
}}
quickAccessItems={[
headerFooterDisplayItem,
Expand Down Expand Up @@ -123,10 +111,14 @@ function Root() {
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
eu fugiat nulla pariatur.
`}
bottomItems={[headerFooterDisplayItem]}
bottomItems={[
headerFooterDisplayItem,
<FooterPersonalDataPolicyItem />,
<FooterConsentManagementItem />
]}
/>
</div>
</GdprStoreProvider>
</>
);

}

0 comments on commit f015361

Please sign in to comment.