fix: upgrade (#165)

* chore(deps): update all non-major dev dependencies * chore: upgrade static * docs * more --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
SocialGouv · Jul 24, 2023 · 2423dc3 · 2423dc3
1 parent ee02dc7
commit 2423dc3
Show file tree

Hide file tree

Showing 12 changed files with 3,754 additions and 3,458 deletions.
diff --git a/.talismanrc b/.talismanrc
@@ -5,8 +5,10 @@ fileignoreconfig:
   checksum: 6debf4f640d4ed9cb39bb19445214ab52dcb23fb7da12feeb85070816d7ee52a
 - filename: .github/workflows/kontinuous-webhook-deploy.yml
   checksum: 1fa040cef27d48607572966b9f06bf23656c95d03dd4cf5aba2508f0218f3a48
+- filename: Dockerfile
+  checksum: 3e3c777aa156eb69b7212d18b431e3b605652e42e22d36f89be97c3c2a87c47f
 - filename: README.md
-  checksum: 12a9880a31cfafb6cc7bd02fbf9a8d948d487aff64ca34b27d5c4b327a83ad5e
+  checksum: 157189a250dee26188891a1e0fa584b9317fadebd05d014ab41deb190311a84c
 - filename: pages/mui.tsx
   checksum: 65dd6ab0469f43924ffc92d26055de14a77b1ef873e0efe69a014b582c38b694
 scopeconfig:

diff --git a/Dockerfile b/Dockerfile
@@ -1,8 +1,8 @@
-ARG NODE_VERSION=16-alpine3.16
+ARG NODE_VERSION=16-alpine3.18@sha256:82bcf77a5de631c6b19f4449ccec82bfbb7d8f6c94d6ae3bdf760ed67e080cb1
 
 # Install dependencies only when needed
 FROM node:$NODE_VERSION AS prepare
-RUN apk add --no-cache libc6-compat=1.2.3-r3
+RUN apk add --no-cache libc6-compat=1.2.4-r0
 WORKDIR /app
 COPY package.json yarn.lock ./
 

diff --git a/README.md b/README.md
@@ -1,19 +1,26 @@
 # template
 
-Template est une application [Next](https://nextjs.org/) développée par la [Fabrique des ministères sociaux](https://www.fabrique.social.gouv.fr/) et qui utilise le [Système de Design de l'État](https://gouvfr.atlassian.net/wiki/spaces/DB/overview).
+![GitHub last commit (branch)](https://img.shields.io/github/last-commit/socialgouv/template/main)
+![GitHub Workflow Status (with event)](https://img.shields.io/github/actions/workflow/status/socialgouv/template/preproduction.yaml)
+![Libraries.io dependency status for GitHub repo](https://img.shields.io/librariesio/github/socialgouv/template)
 
-L'application dispose de deux branches principales :
+Template minimal de la [Fabrique des ministères sociaux](https://www.fabrique.social.gouv.fr/) qui intègre nos [recommandations tech](https://socialgouv.github.io/support/docs/standards/developpement).
 
-- [`main`](https://github.com/SocialGouv/template) qui est un template de site statique sans la partie authentification
-- [`hasura`](https://github.com/SocialGouv/template/tree/hasura) qui ajoute un serveur Next.js, hasura et une authentification KeyCloak
-
-Ce template intègre les recommendations de la [documentation technique SocialGouv](https://socialgouv.github.io/support)
+> ⚠️ Le [Système de Design de l'État](https://www.systeme-de-design.gouv.fr/) s'adresse **uniquement** aux développeurs et aux concepteurs, qu'ils soient agents publics ou prestataires pour des sites Internet de l'État (Ministères, Administrations centrales, Préfectures, Ambassades, etc.)
 
 ## Description
 
-### D'un point de vue fonctionnel
+- 🇫🇷 Basé sur [codegouv/react-dsfr](https://github.com/codegouvfr/react-dsfr)
+- ⚖️ Pages de "conformité" (CGU, RGPD, stats..)
+- 📦 Testing, lint, CI & release automatisés
+- 🔒 Image docker `rootless`, [header CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP)
+- 🔑 prévention de fuite de secrets avec [talisman](https://github.com/thoughtworks/talisman/)
+- 📊 Intégration de sentry & matomo
+- ⚡️ Basé sur [Next](https://nextjs.org/) et TypeScript
 
-Ce template est composé de page :
+## Dans le détail
+
+### D'un point de vue fonctionnel
 
 - Page principale
 - Politique de confidentialité
@@ -24,7 +31,7 @@ Ce template est composé de page :
 - Healthz
 - Page 404
 
-#### En plus dans la branche hasura :
+#### En plus dans la branche `hasura` :
 
 - Page d'authentification
 - Page d'inscription
@@ -46,7 +53,7 @@ Ce template est composé de page :
   - intégration de [sentry](https://sentry.io/) pour gérer les erreurs
   - intégration de [matomo](https://matomo.org/) pour les statistiques d'utilisation
 
-#### En plus dans la branche hasura :
+#### En plus dans la branche `hasura` :
 
 - [keycloak](https://www.keycloak.org/) qui est un serveur d'authentification (exclusive à `main`)
 - [next-auth](https://next-auth.js.org/) qui est un wrapper pour gérer l'authentification au sein de l'application (exclusive à `main`)
@@ -81,7 +88,7 @@ cf .env.development
 
 en production, les secrets sont chiffrés dans GIT avec sealed-secrets.
 
-#### branche Hasura
+### Branche `Hasura`
 
 Lancer les serveurs Postgres, hasura et keycloak avec `docker-compose up`.
 

diff --git a/jest-setup.ts b/jest-setup.ts
diff --git a/jest.config.js b/jest.config.js
@@ -11,22 +11,13 @@ const customJestConfig = {
   // Add more setup options before each test is run
   // setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
   // if using TypeScript with a baseUrl set to the root directory then you need the below for alias' to work
-  moduleDirectories: ["node_modules", "<rootDir>/"],
+  //  moduleDirectories: ["node_modules", "<rootDir>/"],
   testEnvironment: "jest-environment-jsdom",
   testPathIgnorePatterns: [
-    "<rootDir>/node_modules/",
-    "<rootDir>/.next/",
+    // "<rootDir>/node_modules/",
+    //   "<rootDir>/.next/",
     "<rootDir>/cypress/",
   ],
-  moduleNameMapper: {
-    "@components": "<rootDir>/src/components",
-    "@config": "<rootDir>/src/config",
-    "@utils": "<rootDir>/src/utils",
-    "@hooks": "<rootDir>/src/hooks",
-    "@modules": "<rootDir>/src/modules",
-    "@lib": "<rootDir>/src/lib",
-  },
-  setupFilesAfterEnv: ["<rootDir>/jest-setup.ts"],
 };
 
 // createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async

diff --git a/lint-staged.config.js b/lint-staged.config.js
@@ -1,11 +1,14 @@
 const path = require("path");
 
-const buildEslintCommand = filenames =>
+const buildEslintCommand = (filenames) =>
   `next lint --fix --file ${filenames
-    .map(f => path.relative(process.cwd(), f))
+    .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],
+  "*.spec.{js,ts,tsx,jsx}": [
+    "jest --bail --findRelatedTests",
+    buildEslintCommand,
+  ],
 };
diff --git a/next.config.js b/next.config.js
@@ -4,9 +4,6 @@ const { version } = require("./package.json");
 
 const ContentSecurityPolicy = require("./csp.config");
 
-const withTM = require("next-transpile-modules")(["@codegouvfr/react-dsfr"]);
-
-/** @type {import('next').NextConfig} */
 const moduleExports = {
   reactStrictMode: true,
   swcMinify: true,
@@ -27,8 +24,9 @@ const moduleExports = {
     NEXT_PUBLIC_APP_VERSION_COMMIT: process.env.GITHUB_SHA,
     CONTENT_SECURITY_POLICY: ContentSecurityPolicy,
   },
+  transpilePackages: ["@codegouvfr/react-dsfr", "tss-react"],
 };
 
 module.exports = {
-  ...withTM(withSentryConfig(moduleExports, { silent: true })),
+  ...withSentryConfig(moduleExports, { silent: true }),
 };
diff --git a/package.json b/package.json
@@ -2,6 +2,9 @@
   "name": "@socialgouv/template",
   "version": "1.15.7",
   "private": true,
+  "engines": {
+    "node": ">=16.14 || >18"
+  },
   "scripts": {
     "predev": "only-include-used-icons",
     "prebuild": "node -r @swc-node/register scripts/prebuild.ts && yarn only-include-used-icons",
@@ -29,50 +32,49 @@
     "postinstall": "is-ci || husky install"
   },
   "dependencies": {
-    "@codegouvfr/react-dsfr": "^0.28.0",
-    "@emotion/react": "^11.10.5",
-    "@emotion/server": "^11.10.0",
-    "@emotion/styled": "^11.10.5",
-    "@mui/icons-material": "^5.11.0",
-    "@mui/material": "^5.11.1",
+    "@codegouvfr/react-dsfr": "^0.72.4",
+    "@emotion/react": "^11.11.1",
+    "@emotion/server": "^11.11.0",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.14.1",
+    "@mui/material": "^5.14.1",
     "@mui/x-data-grid": "^5.17.16",
     "@mui/x-date-pickers": "^5.0.11",
-    "@sentry/nextjs": "^6.17.9",
-    "@socialgouv/matomo-next": "^1.4.0",
-    "next": "13.1.0",
-    "next-seo": "^5.1.0",
+    "@sentry/nextjs": "^7.60.0",
+    "@socialgouv/matomo-next": "^1.6.1",
+    "next": "13.4.12",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "tss-react": "^4.6.0"
+    "tss-react": "^4.8.8"
   },
   "devDependencies": {
-    "@babel/core": "^7.17.5",
-    "@storybook/addon-actions": "^6.4.19",
-    "@storybook/addon-docs": "^6.5.15",
-    "@storybook/addon-essentials": "^6.4.19",
-    "@storybook/addon-interactions": "^6.4.19",
-    "@storybook/addon-links": "^6.4.19",
-    "@storybook/react": "^6.4.19",
-    "@storybook/testing-library": "^0.0.11",
-    "@swc-node/register": "^1.4.2",
-    "@swc/core": "^1.3.24",
-    "@testing-library/jest-dom": "^5.16.2",
+    "@babel/core": "^7.22.9",
+    "@storybook/addon-actions": "^6.5.16",
+    "@storybook/addon-docs": "^6.5.16",
+    "@storybook/addon-essentials": "^6.5.16",
+    "@storybook/addon-interactions": "^6.5.16",
+    "@storybook/addon-links": "^6.5.16",
+    "@storybook/react": "^6.5.16",
+    "@storybook/testing-library": "^0.2.0",
+    "@swc-node/register": "^1.6.6",
+    "@swc/core": "^1.3.70",
+    "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^12.1.2",
-    "@types/node": "18.11.17",
-    "@types/react": "18.0.26",
-    "@types/react-dom": "18.0.10",
+    "@types/node": "18.17.0",
+    "@types/react": "18.2.15",
+    "@types/react-dom": "18.2.7",
     "cypress": "^9.4.1",
-    "eslint": "8.30.0",
-    "eslint-config-next": "13.1.0",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-storybook": "^0.5.7",
-    "gh-pages": "^4.0.0",
-    "husky": "^8.0.1",
+    "eslint": "8.45.0",
+    "eslint-config-next": "13.4.12",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-storybook": "^0.6.13",
+    "gh-pages": "^5.0.0",
+    "husky": "^8.0.3",
     "is-ci": "^3.0.1",
-    "jest": "^27.5.1",
-    "lint-staged": "^12.3.7",
-    "next-transpile-modules": "^10.0.0",
-    "node-talisman": "^1.28.0",
+    "jest": "^29.6.1",
+    "jest-environment-jsdom": "^29.6.1",
+    "lint-staged": "^13.2.3",
+    "node-talisman": "^1.29.10",
     "start-server-and-test": "^1.14.0",
     "storybook-dark-mode": "^2.0.5",
     "typescript": "4.9.4"

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -17,6 +17,12 @@ import { Footer } from "@codegouvfr/react-dsfr/Footer";
 import { init } from "@socialgouv/matomo-next";
 import Head from "next/head";
 
+declare module "@codegouvfr/react-dsfr/next-pagesdir" {
+  interface RegisterLink {
+    Link: typeof Link;
+  }
+}
+
 // Only in TypeScript projects
 declare module "@codegouvfr/react-dsfr" {
   interface RegisterLink {
@@ -26,7 +32,13 @@ declare module "@codegouvfr/react-dsfr" {
 
 const { withDsfr, dsfrDocumentApi } = createNextDsfrIntegrationApi({
   defaultColorScheme: "system",
-  doPersistDarkModePreferenceWithCookie: true,
+  Link,
+  useLang: () => {
+    const { locale = "fr" } = useRouter();
+    return locale;
+  },
+
+  //doPersistDarkModePreferenceWithCookie: true,
   //Link,
   preloadFonts: [
     //"Marianne-Light",
@@ -76,6 +88,12 @@ const bottomLinks = [
       href: "/stats",
     },
   },
+  {
+    text: "Politique de confidentialité",
+    linkProps: {
+      href: "/politique-confidentialite",
+    },
+  },
   {
     text: "Contribuer sur GitHub",
     linkProps: {
@@ -174,7 +192,6 @@ function App({ Component, pageProps }: AppProps) {
           homeLinkProps={homeLinkPops}
           accessibilityLinkProps={{ href: "/accessibilite" }}
           termsLinkProps={{ href: "/mentions-legales" }}
-          personalDataLinkProps={{ href: "/politique-confidentialite" }}
           bottomItems={[...bottomLinks, headerFooterDisplayItem]}
         />
         <Display />
@@ -183,4 +200,4 @@ function App({ Component, pageProps }: AppProps) {
   );
 }
 
-export default withAppEmotionCache(withDsfr(App));
+export default withDsfr(withAppEmotionCache(App));
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -6,7 +6,14 @@ const { getColorSchemeHtmlAttributes, augmentDocumentForDsfr } =
 
 export default function Document(props: DocumentProps) {
   return (
-    <Html {...getColorSchemeHtmlAttributes(props)}>
+    <Html
+      {...getColorSchemeHtmlAttributes(props)}
+      //NOTE: Always show vertical scrollbar to avoid layout shift when modals are opened.
+      style={{
+        overflow: "-moz-scrollbars-vertical",
+        overflowY: "scroll",
+      }}
+    >
       <Head />
       <body>
         <Main />

diff --git a/src/test.spec.js b/src/test.spec.js