feat(ui): replace theme-ui by mui + migration vers dsfr (#992)

SocialGouv · Aug 25, 2023 · 5241a6b · 5241a6b
1 parent 7a4c014
commit 5241a6b
Show file tree

Hide file tree

Showing 114 changed files with 2,020 additions and 1,953 deletions.
diff --git a/.github/workflows/quality.yml b/.github/workflows/quality.yml
@@ -20,7 +20,7 @@ jobs:
       - name: Set up Node
         uses: actions/setup-node@v3
         with:
-          node-version: 20
+          node-version: 20.3.1
           cache: "yarn"
       - name: Install dependencies
         run: |
@@ -61,7 +61,7 @@ jobs:
       - name: Set up Node
         uses: actions/setup-node@v3
         with:
-          node-version: 20
+          node-version: 20.3.1
           cache: "yarn"
       - name: Lint ${{ matrix.repositories }}
         run: |
@@ -94,7 +94,7 @@ jobs:
       - name: Set up Node
         uses: actions/setup-node@v3
         with:
-          node-version: 20
+          node-version: 20.3.1
           cache: "yarn"
       - name: Test ${{ matrix.repositories }}
         run: |

diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -20,7 +20,7 @@ jobs:
       - name: Set up Node
         uses: actions/setup-node@v3
         with:
-          node-version: 20
+          node-version: 20.3.1
           cache: "yarn"
       - name: Install dependencies
         run: yarn install --frozen-lockfile

diff --git a/.node-version b/.node-version
@@ -1 +1 @@
-20
+20
diff --git a/targets/frontend/next.config.js b/targets/frontend/next.config.js
@@ -5,6 +5,7 @@ const withTM = require("next-transpile-modules")([
   "@shared/graphql-client",
   "@shared/id-generator",
   "@socialgouv/cdtn-ui",
+  "@codegouvfr/react-dsfr",
 ]);
 
 const basePath = "";
@@ -14,54 +15,57 @@ const securityHeaders = [
     key: "X-Frame-Options",
     value: "deny",
   },
-  {key: "X-XSS-Protection", value: "1; mode=block"},
-  {key: "X-Content-Type-Options", value: "nosniff"},
+  { key: "X-XSS-Protection", value: "1; mode=block" },
+  { key: "X-Content-Type-Options", value: "nosniff" },
 ];
 
-module.exports =
-  withTM(
-    withSourceMaps({
-      basePath,
-      async headers() {
-        return [
-          {
-            headers: securityHeaders,
-            // Apply these headers to all routes in your application.
-            source: "/:path*",
-          },
-        ];
-      },
-      poweredByHeader: false,
-      serverRuntimeConfig: {
-        rootDir: __dirname,
-      },
-      webpack: (config, {isServer, dev}) => {
-        config.output.chunkFilename = isServer
-          ? `${dev ? "[name]" : "[name].[fullhash]"}.js`
-          : `static/chunks/${dev ? "[name]" : "[name].[fullhash]"}.js`;
-        config.module.rules.push({
-          exclude: /node_modules/,
-          loader: "graphql-tag/loader",
-          test: /\.(graphql|gql)$/,
-        });
-        // In `pages/_app.js`, Sentry is imported from @sentry/node. While
-        // @sentry/browser will run in a Node.js environment, @sentry/node will use
-        // Node.js-only APIs to catch even more unhandled exceptions.
-        //
-        // This works well when Next.js is SSRing your page on a server with
-        // Node.js, but it is not what we want when your client-side bundle is being
-        // executed by a browser.
-        //
-        // Luckily, Next.js will call this webpack function twice, once for the
-        // server and once for the client. Read more:
-        // https://nextjs.org/docs#customizing-webpack-config
-        //
-        // So ask Webpack to replace @sentry/node imports with @sentry/browser when
-        // building the browser's bundle
-        if (!isServer) {
-          config.resolve.alias["@sentry/node"] = "@sentry/browser";
-        }
-        return config;
-      },
-    })
-  );
+module.exports = withTM(
+  withSourceMaps({
+    basePath,
+    async headers() {
+      return [
+        {
+          headers: securityHeaders,
+          // Apply these headers to all routes in your application.
+          source: "/:path*",
+        },
+      ];
+    },
+    poweredByHeader: false,
+    serverRuntimeConfig: {
+      rootDir: __dirname,
+    },
+    webpack: (config, { isServer, dev }) => {
+      config.output.chunkFilename = isServer
+        ? `${dev ? "[name]" : "[name].[fullhash]"}.js`
+        : `static/chunks/${dev ? "[name]" : "[name].[fullhash]"}.js`;
+      config.module.rules.push({
+        exclude: /node_modules/,
+        loader: "graphql-tag/loader",
+        test: /\.(graphql|gql)$/,
+      });
+      // In `pages/_app.js`, Sentry is imported from @sentry/node. While
+      // @sentry/browser will run in a Node.js environment, @sentry/node will use
+      // Node.js-only APIs to catch even more unhandled exceptions.
+      //
+      // This works well when Next.js is SSRing your page on a server with
+      // Node.js, but it is not what we want when your client-side bundle is being
+      // executed by a browser.
+      //
+      // Luckily, Next.js will call this webpack function twice, once for the
+      // server and once for the client. Read more:
+      // https://nextjs.org/docs#customizing-webpack-config
+      //
+      // So ask Webpack to replace @sentry/node imports with @sentry/browser when
+      // building the browser's bundle
+      if (!isServer) {
+        config.resolve.alias["@sentry/node"] = "@sentry/browser";
+      }
+      config.module.rules.push({
+        test: /\.woff2$/,
+        type: "asset/resource",
+      });
+      return config;
+    },
+  })
+);
diff --git a/targets/frontend/package.json b/targets/frontend/package.json
@@ -4,8 +4,10 @@
   "dependencies": {
     "@azure/abort-controller": "^1.0.4",
     "@azure/storage-blob": "^12.7.0",
+    "@codegouvfr/react-dsfr": "^0.74.2",
     "@elastic/elasticsearch": "^7.14.1",
     "@emotion/react": "11.10.6",
+    "@emotion/server": "^11.11.0",
     "@emotion/styled": "11.10.6",
     "@hapi/boom": "^9.1.4",
     "@hapi/joi": "^17.1.1",
@@ -74,7 +76,6 @@
     "strip-markdown": "^4.2.0",
     "styled-components": "^5.3.9",
     "swr": "^1.0.1",
-    "theme-ui": "^0.11.2",
     "unified": "^9.2.2",
     "unist-util-parents": "^1.0.3",
     "unist-util-select": "^4.0.1",
@@ -117,6 +118,8 @@
     "lint": "next lint",
     "precommit": "lint-staged",
     "start": "next start",
+    "predev": "only-include-used-icons",
+    "prebuild": "only-include-used-icons",
     "prepush": "yarn build && yarn lint && yarn test --bail --changedSince=master",
     "test": "jest"
   }

diff --git a/targets/frontend/src/__tests__/contenus/contentList.test.tsx b/targets/frontend/src/__tests__/contenus/contentList.test.tsx
@@ -9,6 +9,10 @@ jest.mock("next/router", () => ({
   }),
 }));
 
+jest.mock("@codegouvfr/react-dsfr/useIsDark", () => ({
+  useIsDark: jest.fn().mockReturnValue(false),
+}));
+
 describe("Given parameters", () => {
   describe("When rendering the component DocumentsPage", () => {
     let rendering: RenderResult;

diff --git a/targets/frontend/src/components/alerts/AlertTabs.tsx b/targets/frontend/src/components/alerts/AlertTabs.tsx
@@ -1,12 +1,13 @@
 import Link from "next/link";
 import PropTypes from "prop-types";
 import { getStatusLabel, slugifyRepository } from "src/models";
-import { Spinner } from "theme-ui";
+import CircularProgress from "@mui/material/CircularProgress";
 import { useQuery } from "urql";
+import { Tabs, Tab } from "@mui/material";
 
-import { TabItem, Tabs } from "../tabs";
 import { FixedSnackBar } from "../utils/SnackBar";
 import React from "react";
+import { useRouter } from "next/router";
 
 const countAlertByStatusQuery = `
 query getAlerts($repository: String!) {
@@ -30,17 +31,34 @@ export function AlertTabs({
   repository: string;
   activeStatus: string;
 }) {
+  const router = useRouter();
+
+  const [value, setValue] = React.useState(0);
+
+  const handleChange = (event: React.SyntheticEvent, newValue: number) => {
+    setValue(newValue);
+  };
+
   const [result] = useQuery({
     query: countAlertByStatusQuery,
     variables: {
       repository,
     },
   });
 
+  React.useEffect(() => {
+    const status = result.data?.statuses.find(
+      (status: any) => status.name === activeStatus
+    );
+    if (status) {
+      setValue(result.data?.statuses.indexOf(status));
+    }
+  }, [result.data, activeStatus]);
+
   const { fetching, error, data } = result;
 
   if (fetching) {
-    return <Spinner />;
+    return <CircularProgress />;
   }
 
   if (error) {
@@ -52,19 +70,21 @@ export function AlertTabs({
   }
 
   return (
-    <Tabs id="statustab">
+    <Tabs value={value} onChange={handleChange}>
       {data.statuses.map((status: any) => (
-        <Link
-          shallow
+        <Tab
           key={status.name}
-          href={`/alerts/${slugifyRepository(repository)}/${status.name}`}
-          passHref
-          style={{ textDecoration: "none" }}
-        >
-          <TabItem controls="statustab" selected={status.name === activeStatus}>
-            {getStatusLabel(status.name)} ({status.alerts.aggregate.count})
-          </TabItem>
-        </Link>
+          label={`${getStatusLabel(status.name)} (${
+            status.alerts.aggregate.count
+          })`}
+          onClick={() => {
+            router.push(
+              `/alerts/${slugifyRepository(repository)}/${status.name}`,
+              undefined,
+              { shallow: true }
+            );
+          }}
+        />
       ))}
     </Tabs>
   );

diff --git a/targets/frontend/src/components/alerts/AlertTitle.tsx b/targets/frontend/src/components/alerts/AlertTitle.tsx
@@ -17,15 +17,15 @@ export const AlertTitle: React.FC<Props> = ({ alertId, info, children }) => {
   return (
     <Stack direction="row" alignItems="center" justifyContent="space-between">
       <AlertStatus alertId={alertId} />
-      <h2>{children}</h2>
+      <h2 style={{ marginBottom: "0" }}>{children}</h2>
       {info.type === "dila" && info.num && (
         <a
-          sx={{ px: "xsmall" }}
+          style={{ paddingLeft: "0.8rem", paddingRight: "0.8rem" }}
           target="_blank"
           rel="noopener noreferrer"
           href={`https://legifrance.gouv.fr/conv_coll/id/${info.id}`}
         >
-          <IconButton variant="secondary">
+          <IconButton>
             <IoIosLink
               aria-label="Voir la convention sur legifrance"
               style={{ height: "iconXSmall", width: "iconXSmall" }}
@@ -36,13 +36,9 @@ export const AlertTitle: React.FC<Props> = ({ alertId, info, children }) => {
       <Box sx={{ flex: "1 1 0" }} />
       <IconButton
         sx={{ justifyItems: "flex-end" }}
-        variant="secondary"
         onClick={() => setShowComment(!showComment)}
       >
-        <IoMdChatbubbles
-          aria-label="Voir les commentaires"
-          style={{ height: "iconXSmall", width: "iconXSmall" }}
-        />
+        <IoMdChatbubbles aria-label="Voir les commentaires" />
       </IconButton>
       {showComment && <Comments alertId={alertId} />}
     </Stack>

diff --git a/targets/frontend/src/components/alerts/Status.tsx b/targets/frontend/src/components/alerts/Status.tsx
@@ -25,16 +25,16 @@ export function AlertStatus({ alertId }: { alertId: string }) {
   }
 
   return (
-    <MenuButton variant="secondary">
-      <MenuItem onSelect={() => updateStatus("doing")}>
-        <span sx={{ display: "inline-block", width: "1.5em" }} />
+    <MenuButton>
+      <MenuItem onClick={() => updateStatus("doing")}>
+        <span style={{ display: "inline-block", width: "1.5em" }} />
         En cours
       </MenuItem>
-      <MenuItem onSelect={() => updateStatus("done")}>
+      <MenuItem onClick={() => updateStatus("done")}>
         <IoIosCheckmark style={{ height: "iconSmall", width: "iconSmall" }} />{" "}
         Traité
       </MenuItem>
-      <MenuItem onSelect={() => updateStatus("rejected")}>
+      <MenuItem onClick={() => updateStatus("rejected")}>
         <IoIosClose style={{ height: "iconSmall", width: "iconSmall" }} />{" "}
         Rejeté
       </MenuItem>

diff --git a/targets/frontend/src/components/button/CopyButton.js b/targets/frontend/src/components/button/CopyButton.js
@@ -2,6 +2,7 @@ import { Button } from "@mui/material";
 import PropTypes from "prop-types";
 import { useEffect, useState } from "react";
 import { IoMdCheckmark, IoMdClipboard } from "react-icons/io";
+import { theme } from "../../theme";
 
 export const CopyButton = ({
   onClip,
@@ -34,11 +35,11 @@ export const CopyButton = ({
     >
       {copied ? (
         <>
-          <IoMdCheckmark sx={iconSx} /> Copié !
+          <IoMdCheckmark style={iconSx} /> Copié !
         </>
       ) : (
         <>
-          <IoMdClipboard sx={iconSx} />
+          <IoMdClipboard style={iconSx} />
           Copier
         </>
       )}
@@ -47,9 +48,9 @@ export const CopyButton = ({
 };
 
 const iconSx = {
-  height: "iconSmall",
-  mr: "xxsmall",
-  width: "iconSmall",
+  height: theme.sizes.iconSmall,
+  marginRight: theme.space.xxsmall,
+  width: theme.sizes.iconSmall,
 };
 
 CopyButton.propTypes = {