feat(dsfr): ajout de la page stats

packages/code-du-travail-frontend/.gitignore

@@ -8,3 +8,7 @@ cypress/screenshots
 cypress/downloads
 .env
 .env.*
+
+## Panda
+styled-system
+styled-system-studio

packages/code-du-travail-frontend/app/globals.css

@@ -0,0 +1,2 @@
+@layer reset, base, tokens, recipes, utilities;
+

packages/code-du-travail-frontend/app/layout.tsx

@@ -1,3 +1,4 @@
+import "./globals.css";
 import { DsfrHead } from "@codegouvfr/react-dsfr/next-appdir/DsfrHead";
 import { DsfrProvider } from "@codegouvfr/react-dsfr/next-appdir/DsfrProvider";
 import { getHtmlAttributes } from "@codegouvfr/react-dsfr/next-appdir/getHtmlAttributes";

packages/code-du-travail-frontend/app/stats/page.tsx

@@ -0,0 +1,36 @@
+import { Metadata } from "next";
+import { DsfrLayout } from "../../src/modules/layout";
+import { Stats } from "../../src/modules/stats";
+import { getStatsService } from "../../src/api";
+import { cache } from "react";
+import { REVALIDATE_TIME_DAY } from "../../src/config";
+
+export const dynamic = "force-static";
+
+export const revalidate = REVALIDATE_TIME_DAY;
+
+export const metadata: Metadata = {
+  title: "Statistiques",
+  description: "Statistiques d’utilisation du Code du travail numérique",
+};
+
+const getStats = cache(async () => {
+  return getStatsService();
+});
+
+async function Index() {
+  const data = await getStats();
+
+  return (
+    <DsfrLayout>
+      <Stats
+        nbDocuments={data.nbDocuments}
+        nbVisits={data.nbVisits}
+        nbSearches={data.nbSearches}
+        nbPageViews={data.nbPageViews}
+      />
+    </DsfrLayout>
+  );
+}
+
+export default Index;

packages/code-du-travail-frontend/package.json

@@ -7,14 +7,15 @@
   "keywords": [],
   "main": "src/index.js",
   "scripts": {
+    "prepare": "panda codegen",
     "dev": "yarn predev && next dev",
-    "predev": "react-dsfr update-icons",
+    "predev": "react-dsfr update-icons && panda codegen",
     "lint:js": "next lint --quiet",
     "lint:css": "stylelint './{src,pages}/**/*.{js,ts,tsx,jsx,css}' --quiet",
     "lint": "yarn lint:css && next lint",
     "precommit": "lint-staged",
     "start": "next start",
-    "prebuild": "node -r @swc-node/register scripts/prebuild.ts && react-dsfr update-icons",
+    "prebuild": "node -r @swc-node/register scripts/prebuild.ts && react-dsfr update-icons && panda codegen",
     "build": "yarn prebuild && next build",
     "build:analyze": "yarn prebuild && ANALYZE=true next build",
     "pretest:api": "NEXT_PUBLIC_ES_INDEX_PREFIX=cdtn_test NEXT_PUBLIC_APP_ENV=test NODE_ENV=test node -r @swc-node/register scripts/generate-data.ts",
@@ -81,6 +82,7 @@
     "zustand": "^4.3.6"
   },
   "devDependencies": {
+    "@pandacss/dev": "^0.45.2",
     "@swc-node/register": "^1.6.5",
     "@swc/core": "^1.3.60",
     "@testing-library/dom": "^8.11.3",

packages/code-du-travail-frontend/panda.config.ts

@@ -0,0 +1,20 @@
+import { defineConfig } from "@pandacss/dev";
+
+export default defineConfig({
+  // Whether to use css reset
+  preflight: true,
+
+  // Where to look for your css declarations
+  include: ["./src/**/*.{js,jsx,ts,tsx}", "./app/**/*.{js,jsx,ts,tsx}"],
+
+  // Files to exclude
+  exclude: [],
+
+  // Useful for theme customization
+  theme: {
+    extend: {},
+  },
+
+  // The output directory for your css system
+  outdir: "styled-system",
+});

packages/code-du-travail-frontend/postcss.config.cjs

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    '@pandacss/dev/postcss': {},
+  },
+}

packages/code-du-travail-frontend/src/config.ts

@@ -11,8 +11,9 @@ export const COMMIT = process.env.NEXT_PUBLIC_COMMIT ?? "";
 export const SITE_URL =
   process.env.NEXT_PUBLIC_SITE_URL ?? `http://localhost:3000`;
 export const PACKAGE_VERSION = version;
-export const PIWIK_SITE_ID = process.env.NEXT_PUBLIC_PIWIK_SITE_ID ?? "";
-export const PIWIK_URL = process.env.NEXT_PUBLIC_PIWIK_URL ?? "";
+export const PIWIK_SITE_ID = process.env.NEXT_PUBLIC_PIWIK_SITE_ID ?? "3";
+export const PIWIK_URL =
+  process.env.NEXT_PUBLIC_PIWIK_URL ?? "https://matomo.fabrique.social.gouv.fr";
 export const IS_PREPROD =
   process.env.NEXT_PUBLIC_IS_PREPRODUCTION_DEPLOYMENT ?? false;
 export const IS_PROD =

packages/code-du-travail-frontend/src/modules/layout/Footer.tsx

@@ -1,9 +1,9 @@
-import variables from "./Footer.module.scss";
 import { Footer as FooterDsfr } from "@codegouvfr/react-dsfr/Footer";
 import { PACKAGE_VERSION } from "../../config";
 import { headerFooterDisplayItem } from "@codegouvfr/react-dsfr/Display";
 import { BrandTop } from "./BrandTop";
 import { homeLinksProps } from "./common";
+import { css } from "../../../styled-system/css";
 
 export const Footer = () => {
   return (
@@ -191,8 +191,12 @@ export const Footer = () => {
         headerFooterDisplayItem,
       ]}
       classes={{
-        logo: variables["footer-logo"],
+        logo: footerLogo,
       }}
     />
   );
 };
+
+const footerLogo = css({
+  boxShadow: "none !important",
+});

packages/code-du-travail-frontend/src/modules/layout/NeedMoreInfo.tsx

@@ -1,10 +1,10 @@
-import variables from "./NeedMoreInfo.module.scss";
 import { fr } from "@codegouvfr/react-dsfr";
 import { Button } from "@codegouvfr/react-dsfr/Button";
+import { css } from "../../../styled-system/css";
 
 export const NeedMoreInfo = () => {
   return (
-    <div className={`${variables["main-container"]}`}>
+    <div className={mainContainer}>
       <div className={fr.cx("fr-container")}>
         <div className={fr.cx("fr-grid-row")}>
           <div
@@ -14,15 +14,13 @@ export const NeedMoreInfo = () => {
               "fr-py-6w"
             )}`}
           >
-            <h2 className={variables.title}>
-              Besoin de plus d&apos;informations ?
-            </h2>
-            <p className={variables.paragraph}>
+            <h2 className={title}>Besoin de plus d&apos;informations ?</h2>
+            <p className={paragraph}>
               Les services du ministère du Travail en région informent,
               conseillent et orientent les salariés et les employeurs du secteur
               privé sur leurs questions en droit du travail.
             </p>
-            <div className={variables["button-container"]}>
+            <div className={buttonContainer}>
               <Button
                 iconId="fr-icon-chat-3-line"
                 iconPosition="right"
@@ -37,3 +35,22 @@ export const NeedMoreInfo = () => {
     </div>
   );
 };
+
+const mainContainer = css({
+  background: "var(--background-alt-blue-france)",
+});
+
+const title = css({
+  color: "var(--text-action-high-blue-france) !important",
+  fontWeight: 700,
+  textAlign: "center",
+});
+
+const paragraph = css({
+  color: "var(--text-action-high-blue-france)",
+});
+
+const buttonContainer = css({
+  display: "flex",
+  justifyContent: "center",
+});