From 4a8a518c4b3562d10b8509f8636d8c5dbe9f1bec Mon Sep 17 00:00:00 2001 From: maxgfr <25312957+maxgfr@users.noreply.github.com> Date: Fri, 18 Mar 2022 12:46:43 +0100 Subject: [PATCH] fix: storybook --- .eslintrc.json | 6 +- README.md | 7 -- next.config.js | 35 +++++++- package.json | 1 + src/components/footer/bottom.tsx | 90 ++++++++++++------- src/components/footer/type.ts | 1 + src/components/landing/head.stories.tsx | 22 +++++ .../landing/testimonial.stories.tsx | 25 ++++++ src/components/landing/tile.stories.tsx | 22 +++++ src/components/landing/tile.tsx | 6 +- .../{part.stories.tsx => index.stories.tsx} | 0 .../{tile.stories.tsx => index.stories.tsx} | 2 +- src/config/layout.ts | 1 + 13 files changed, 173 insertions(+), 45 deletions(-) create mode 100644 src/components/landing/head.stories.tsx create mode 100644 src/components/landing/testimonial.stories.tsx create mode 100644 src/components/landing/tile.stories.tsx rename src/components/mention/{part.stories.tsx => index.stories.tsx} (100%) rename src/components/stats/{tile.stories.tsx => index.stories.tsx} (96%) diff --git a/.eslintrc.json b/.eslintrc.json index bb8b1c09..80500b47 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,3 +1,7 @@ { - "extends": ["next/core-web-vitals", "plugin:storybook/recommended"] + "extends": [ + "next/core-web-vitals", + "plugin:storybook/recommended", + "plugin:jsx-a11y/recommended" + ] } diff --git a/README.md b/README.md index 30b4a3a6..9aac244a 100644 --- a/README.md +++ b/README.md @@ -57,10 +57,3 @@ yarn yarn build yarn export ``` - -## Todo - -- Ajouter des CSP -- Husky pour avant de commit faire des verifications -- Finir la documentation, en mode si vous créez un fichier faut le mettre là, etc. -- Rajouter une config sur un linter pour next 12 et accessibilité plugin diff --git a/next.config.js b/next.config.js index a15952ec..ba5db3c2 100644 --- a/next.config.js +++ b/next.config.js @@ -2,6 +2,18 @@ const { withSentryConfig } = require("@sentry/nextjs"); const { version } = require("./package.json"); +const ContentSecurityPolicy = ` + default-src 'self' *.fabrique.social.gouv.fr; + img-src 'self' data: *.fabrique.social.gouv.fr https://dummyimage.com/; + script-src 'self' *.fabrique.social.gouv.fr ${ + process.env.NODE_ENV !== "production" && "'unsafe-eval'" + }; + frame-src 'self' *.fabrique.social.gouv.fr; + style-src 'self' 'unsafe-inline'; + font-src 'self' data: blob:; + prefetch-src 'self' *.fabrique.social.gouv.fr; +`; + /** @type {import('next').NextConfig} */ const moduleExports = { reactStrictMode: true, @@ -16,4 +28,25 @@ const moduleExports = { }, }; -module.exports = withSentryConfig(moduleExports, { silent: true }); +module.exports = { + async headers() { + return [ + { + source: "/:path*", + headers: [ + { + key: "Content-Security-Policy", + value: ContentSecurityPolicy.replace(/\n/g, " ").trim(), + }, + { + key: "X-Robots-Tag", + value: process.env.NEXT_PUBLIC_IS_PRODUCTION_DEPLOYMENT + ? "all" + : "noindex, nofollow, nosnippet", + }, + ], + }, + ]; + }, + ...withSentryConfig(moduleExports, { silent: true }), +}; diff --git a/package.json b/package.json index c62ef797..149a33b0 100644 --- a/package.json +++ b/package.json @@ -51,6 +51,7 @@ "cypress": "^9.4.1", "eslint": "8.10.0", "eslint-config-next": "12.1.0", + "eslint-plugin-jsx-a11y": "^6.5.1", "eslint-plugin-storybook": "^0.5.7", "gh-pages": "^3.2.3", "husky": "^7.0.4", diff --git a/src/components/footer/bottom.tsx b/src/components/footer/bottom.tsx index e1b817d2..563c4da5 100644 --- a/src/components/footer/bottom.tsx +++ b/src/components/footer/bottom.tsx @@ -1,35 +1,59 @@ -import { FooterBottom, FooterCopy, FooterLink } from "@dataesr/react-dsfr"; +import { + FooterBottom, + FooterCopy, + FooterLink, + SwitchTheme, +} from "@dataesr/react-dsfr"; +import { useState } from "react"; import { FooterBottomSectionProps } from "./type"; -export const Bottom = (props: FooterBottomSectionProps): JSX.Element => ( - - {props.links.map((link, index) => ( - - {link.title} - - ))} - -

- Sauf mention contraire, tous les contenus de ce site sont sous{" "} - - licence etalab-2.0 - -

-

- Version {props.version} ( - - {props.commitHash.substring(0, 8)} - - ) -

- - -); +export const Bottom = (props: FooterBottomSectionProps): JSX.Element => { + const [isOpen, setIsOpen] = useState(false); + + return ( + + {props.links.map((link, index) => ( + + {link.title} + + ))} + {props.hasSwitchMode && ( + setIsOpen(true)} href="/"> + + Paramètres d’affichage + + + )} + +

+ Sauf mention contraire, tous les contenus de ce site sont sous{" "} + + licence etalab-2.0 + +

+

+ Version {props.version} ( + + {props.commitHash.substring(0, 8)} + + ) +

+ + {props.hasSwitchMode && ( + + )} + + ); +}; diff --git a/src/components/footer/type.ts b/src/components/footer/type.ts index 6d04e690..e2bb39f2 100644 --- a/src/components/footer/type.ts +++ b/src/components/footer/type.ts @@ -27,6 +27,7 @@ export type FooterBottomSectionProps = { version: string; repositoryUrl: string; commitHash: string; + hasSwitchMode: boolean; }; export type FooterTopSectionProps = { diff --git a/src/components/landing/head.stories.tsx b/src/components/landing/head.stories.tsx new file mode 100644 index 00000000..7ed82c9c --- /dev/null +++ b/src/components/landing/head.stories.tsx @@ -0,0 +1,22 @@ +import React from "react"; +import { ComponentStory, ComponentMeta } from "@storybook/react"; + +import { Head } from "./head"; + +export default { + title: "Header", + component: Head, +} as ComponentMeta; + +const Template: ComponentStory = args => ; + +export const Default = Template.bind({}); +Default.args = { + title: "Random title", + textLead: "Random text lead", + description: "Random description", + image: { + src: "https://via.placeholder.com/600x400", + alt: "Random image", + }, +}; diff --git a/src/components/landing/testimonial.stories.tsx b/src/components/landing/testimonial.stories.tsx new file mode 100644 index 00000000..18752657 --- /dev/null +++ b/src/components/landing/testimonial.stories.tsx @@ -0,0 +1,25 @@ +import React from "react"; +import { ComponentStory, ComponentMeta } from "@storybook/react"; +import { Testimonial } from "./testimonial"; + +export default { + title: "Testimonial", + component: Testimonial, +} as ComponentMeta; + +const Template: ComponentStory = args => ( + +); + +export const Default = Template.bind({}); +Default.args = { + description: "Random description", + image: { + src: "https://via.placeholder.com/600x400", + alt: "Random image", + }, + link: { + href: "https://www.google.com", + title: "Random link", + }, +}; diff --git a/src/components/landing/tile.stories.tsx b/src/components/landing/tile.stories.tsx new file mode 100644 index 00000000..21cfd7b9 --- /dev/null +++ b/src/components/landing/tile.stories.tsx @@ -0,0 +1,22 @@ +import React from "react"; +import { ComponentStory, ComponentMeta } from "@storybook/react"; +import { Testimonial } from "./testimonial"; +import { Tile } from "./tile"; + +export default { + title: "Tile", + component: Tile, +} as ComponentMeta; + +const Template: ComponentStory = args => ; + +export const Default = Template.bind({}); +Default.args = { + title: "Random title", + description: "Random description", + image: { + src: "https://via.placeholder.com/600x400", + alt: "Random image", + }, + href: "https://www.fabrique.social.gouv.fr/", +}; diff --git a/src/components/landing/tile.tsx b/src/components/landing/tile.tsx index 64eff191..8b2834d3 100644 --- a/src/components/landing/tile.tsx +++ b/src/components/landing/tile.tsx @@ -16,8 +16,10 @@ export const Tile = (props: TileProps): JSX.Element => {

- - {props.title} + + + {props.title} +

{props.description}

diff --git a/src/components/mention/part.stories.tsx b/src/components/mention/index.stories.tsx similarity index 100% rename from src/components/mention/part.stories.tsx rename to src/components/mention/index.stories.tsx diff --git a/src/components/stats/tile.stories.tsx b/src/components/stats/index.stories.tsx similarity index 96% rename from src/components/stats/tile.stories.tsx rename to src/components/stats/index.stories.tsx index 0827d141..4234424d 100644 --- a/src/components/stats/tile.stories.tsx +++ b/src/components/stats/index.stories.tsx @@ -14,7 +14,7 @@ const Template: ComponentStory = args => ( export const Default = Template.bind({}); Default.args = { title: "Nombre de visites", - stats: "1.000.000" + stats: "1.000.000", }; export const WithDescription = Template.bind({}); diff --git a/src/config/layout.ts b/src/config/layout.ts index db338474..55895587 100644 --- a/src/config/layout.ts +++ b/src/config/layout.ts @@ -168,6 +168,7 @@ export const footerPartnerSection: FooterPartnerSectionProps = { }; export const footerBottomSection: FooterBottomSectionProps = { + hasSwitchMode: true, links: [ { title: "Accessibilité : non conforme",