Merge pull request #32 from SocialGouv/maxgfr/oklmzer

.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"
+  ]
 }

.husky/pre-commit

@@ -0,0 +1,5 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn lint-staged
+git add -A

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 <https://github.com/SocialGouv/linters> un linter pour next 12 et accessibilité plugin

csp.config.js

@@ -0,0 +1,13 @@
+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;
+`;
+
+module.exports = ContentSecurityPolicy;

lint-staged.config.js

@@ -0,0 +1,11 @@
+const path = require("path");
+
+const buildEslintCommand = filenames =>
+  `next lint --fix --file ${filenames
+    .map(f => path.relative(process.cwd(), f))
+    .join(" --file ")}`;
+
+module.exports = {
+  "**/*.ts?(x)": () => "tsc -p tsconfig.json --noEmit",
+  "*.{js,ts,tsx,jsx}": ["jest --bail --findRelatedTests", buildEslintCommand],
+};

next-seo.config.js

@@ -0,0 +1,18 @@
+import ContentSecurityPolicy from "./csp.config";
+
+const DEFAULT_SEO_CONFIG = {
+  additionalLinkTags: [
+    {
+      rel: "icon",
+      href: "/favicon.ico",
+    },
+  ],
+  additionalMetaTags: [
+    {
+      httpEquiv: "Content-Security-Policy",
+      content: ContentSecurityPolicy.replace(/\n/g, " ").trim(),
+    },
+  ],
+};
+
+export default DEFAULT_SEO_CONFIG;

next.config.js

@@ -2,6 +2,8 @@ const { withSentryConfig } = require("@sentry/nextjs");
 
 const { version } = require("./package.json");
 
+const ContentSecurityPolicy = require("./csp.config");
+
 /** @type {import('next').NextConfig} */
 const moduleExports = {
   reactStrictMode: true,
@@ -16,4 +18,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 }),
+};

package.json

@@ -8,6 +8,8 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
+    "prepare": "husky install",
+    "lint-staged": "lint-staged",
     "export": "next export",
     "build:export": "npm run build && npm run export",
     "e2e": "cypress open",
@@ -49,9 +51,12 @@
     "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",
     "jest": "^27.5.1",
+    "lint-staged": "^12.3.7",
     "start-server-and-test": "^1.14.0",
     "typescript": "4.6.2"
   }

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 => (
-  <FooterBottom>
-    {props.links.map((link, index) => (
-      <FooterLink key={`${index}-${link.title}`} href={link.href}>
-        {link.title}
-      </FooterLink>
-    ))}
-    <FooterCopy>
-      <p>
-        Sauf mention contraire, tous les contenus de ce site sont sous{" "}
-        <a
-          href="https://github.com/etalab/licence-ouverte/blob/master/LO.md"
-          rel="noreferrer"
-          target="_blank"
-        >
-          licence etalab-2.0
-        </a>
-      </p>
-      <p>
-        Version {props.version} (
-        <a
-          target="_blank"
-          href={`${props.repositoryUrl}/tree/${props.commitHash}`}
-          rel="noreferrer"
-        >
-          {props.commitHash.substring(0, 8)}
-        </a>
-        )
-      </p>
-    </FooterCopy>
-  </FooterBottom>
-);
+export const Bottom = (props: FooterBottomSectionProps): JSX.Element => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <FooterBottom>
+      {props.links.map((link, index) => (
+        <FooterLink key={`${index}-${link.title}`} href={link.href}>
+          {link.title}
+        </FooterLink>
+      ))}
+      {props.hasSwitchMode && (
+        <FooterLink onClick={() => setIsOpen(true)} href="/">
+          <span
+            className="fr-fi-theme-fill fr-link--icon-left"
+            aria-controls="fr-theme-modal"
+            data-fr-opened={isOpen}
+          >
+            Paramètres d’affichage
+          </span>
+        </FooterLink>
+      )}
+      <FooterCopy>
+        <p>
+          Sauf mention contraire, tous les contenus de ce site sont sous{" "}
+          <a
+            href="https://github.com/etalab/licence-ouverte/blob/master/LO.md"
+            rel="noreferrer"
+            target="_blank"
+          >
+            licence etalab-2.0
+          </a>
+        </p>
+        <p>
+          Version {props.version} (
+          <a
+            target="_blank"
+            href={`${props.repositoryUrl}/tree/${props.commitHash}`}
+            rel="noreferrer"
+          >
+            {props.commitHash.substring(0, 8)}
+          </a>
+          )
+        </p>
+      </FooterCopy>
+      {props.hasSwitchMode && (
+        <SwitchTheme isOpen={isOpen} setIsOpen={setIsOpen} />
+      )}
+    </FooterBottom>
+  );
+};

src/components/footer/type.ts

@@ -27,6 +27,7 @@ export type FooterBottomSectionProps = {
   version: string;
   repositoryUrl: string;
   commitHash: string;
+  hasSwitchMode: boolean;
 };
 
 export type FooterTopSectionProps = {

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<typeof Head>;
+
+const Template: ComponentStory<typeof Head> = args => <Head {...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",
+  },
+};

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<typeof Testimonial>;
+
+const Template: ComponentStory<typeof Testimonial> = args => (
+  <Testimonial {...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",
+  },
+};

src/components/landing/tile.stories.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Tile } from "./tile";
+
+export default {
+  title: "Tile",
+  component: Tile,
+} as ComponentMeta<typeof Tile>;
+
+const Template: ComponentStory<typeof Tile> = args => <Tile {...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/",
+};

src/components/landing/tile.tsx

@@ -16,8 +16,10 @@ export const Tile = (props: TileProps): JSX.Element => {
       <div className="fr-card fr-enlarge-link fr-pt-3w">
         <div className="fr-card__body">
           <h2 className="fr-card__title">
-            <Link href={props.href} passHref>
-              <a className="fr-card__link">{props.title}</a>
+            <Link href={props.href}>
+              <a className="fr-card__link" href={props.href}>
+                {props.title}
+              </a>
             </Link>
           </h2>
           <p className="fr-card__desc">{props.description}</p>

src/components/stats/tile.stories.tsx → src/components/stats/index.stories.tsx

@@ -14,7 +14,7 @@ const Template: ComponentStory<typeof StatsTile> = 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({});

src/config/layout.ts

@@ -168,6 +168,7 @@ export const footerPartnerSection: FooterPartnerSectionProps = {
 };
 
 export const footerBottomSection: FooterBottomSectionProps = {
+  hasSwitchMode: true,
   links: [
     {
       title: "Accessibilité : non conforme",

src/pages/_app.tsx

@@ -1,5 +1,6 @@
 import "@gouvfr/dsfr/dist/dsfr/dsfr.min.css";
 import type { AppProps } from "next/app";
+import SEO from "../../next-seo.config";
 import { Layout } from "@components";
 import {
   footerBodySection,
@@ -10,6 +11,7 @@ import {
 } from "@config";
 import { useEffect } from "react";
 import { init } from "@socialgouv/matomo-next";
+import { DefaultSeo } from "next-seo";
 
 function MyApp({ Component, pageProps }: AppProps) {
   useEffect(() => {
@@ -29,6 +31,7 @@ function MyApp({ Component, pageProps }: AppProps) {
         topSection: footerTopSection,
       }}
     >
+      <DefaultSeo {...(SEO as any)} />
       <Component {...pageProps} />
     </Layout>
   );

src/pages/cgu.tsx

@@ -15,6 +15,20 @@ const Cgu: NextPage = () => {
             href: "/favicon.ico",
           },
         ]}
+        additionalMetaTags={[
+          {
+            property: "dc:creator",
+            content: "Jane Doe",
+          },
+          {
+            name: "application-name",
+            content: "NextSeo",
+          },
+          {
+            httpEquiv: "x-ua-compatible",
+            content: "IE=edge; chrome=1",
+          },
+        ]}
       />
       <div className="fr-container fr-my-6w">
         <h1>Conditions générales d&apos;utilisation</h1>

tsconfig.json

@@ -24,7 +24,7 @@
       "@lib": ["./src/lib"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "jest-setup.ts"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
   "exclude": [
     "node_modules",
     "next-sitemap.js",