integration/chore: use a dev-specific folder:

- allows us to easily differentiate the exposed components of the npm package vs the dev-only ones - allows the postcss config to purgecss correctly for production build, we do not include the classes seen in the dev components
2024-05-07 19:17:57 +02:00
parent adfe80f52a
commit 744e35f4db
9 changed files with 142 additions and 74 deletions
--- a/packages/integration/README.md
+++ b/packages/integration/README.md
@@ -31,7 +31,7 @@ To start, `npm install` a first time and copy the example env file: `cp .env.exa

 Then, run the local dev server with `npm run dev`.

-The main dev file is `src/dev.tsx` where a small testing React router is used to render the different React components while developing.
+The main dev file is `src/dev/dev.tsx` where a small testing React router is used to render the different React components while developing.

 ### Building

--- a/packages/integration/index.html
+++ b/packages/integration/index.html
@@ -7,7 +7,7 @@
  </head>
  <body>
    <div id="root"></div>
-    <script type="module" src="/src/dev.tsx"></script>
+    <script type="module" src="/src/dev/dev.tsx"></script>
    <script
      id="lasuite-gaufre-script"
      async
--- a/packages/integration/postcss.config.mjs
+++ b/packages/integration/postcss.config.mjs
@@ -5,7 +5,10 @@ import autoprefixer from "autoprefixer"
 export default {
  plugins: [
    purgecss({
-      content: ["./src/**/*.{js,jsx,ts,tsx,html}"],
+      content:
+        process.env.NODE_ENV === "production"
+          ? ["./src/html.tsx", "./src/components/**/*.tsx"]
+          : ["./src/**/*.{js,jsx,ts,tsx,html}"],
      css: ["./src/**/*.css"],
      variables: true,
    }),
--- a/packages/integration/src/components/StylesStandalone.tsx
+++ b/packages/integration/src/components/StylesStandalone.tsx
@@ -1,21 +0,0 @@
-import { ReactNode, useEffect } from "react"
-import dsfrStyles from "../styles/raw-dsfr.css?inline"
-import homepageStyles from "../styles/homepage-gaufre.css?inline"
-import devStyles from "../styles/dev.css?inline"
-
-export const StylesStandalone = ({ children }: { children: ReactNode }) => {
-  useEffect(() => {
-    if (document.querySelector("#styles-standalone")) {
-      return
-    }
-    const style = document.createElement("style")
-    style.id = "styles-standalone"
-    style.innerHTML = dsfrStyles + homepageStyles + devStyles
-    document.head.appendChild(style)
-    return () => {
-      document.querySelector("#styles-standalone")?.remove()
-    }
-  }, [])
-
-  return children
-}
--- a/packages/integration/src/dev/DsfrHeader.tsx
+++ b/packages/integration/src/dev/DsfrHeader.tsx
@@ -0,0 +1,52 @@
+import { ReactNode } from "react"
+
+/**
+ * This component is there to test showing the Gaufre button in a classic DSFR header
+ */
+export const DsfrHeader = ({ actions }: { actions: Array<ReactNode> }) => {
+  return (
+    <header role="banner" className="fr-header">
+      <div className="fr-header__body">
+        <div className="fr-container">
+          <div className="fr-header__body-row">
+            <div className="fr-header__brand fr-enlarge-link">
+              <div className="fr-header__brand-top">
+                <div className="fr-header__logo">
+                  <p className="fr-logo">
+                    Intitulé <br />
+                    officiel
+                  </p>
+                </div>
+              </div>
+              <div className="fr-header__service">
+                <a
+                  href="/"
+                  title="Accueil - [À MODIFIER - Nom du site / service] - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)"
+                >
+                  <p className="fr-header__service-title"> Nom du site / service </p>
+                </a>
+                <p className="fr-header__service-tagline">
+                  baseline - précisions sur l‘organisation
+                </p>
+              </div>
+            </div>
+            <div className="fr-header__tools">
+              <div className="fr-header__tools-links">
+                <ul className="fr-btns-group">
+                  <li>
+                    <a className="fr-btn fr-icon-add-circle-line" href="[url - à modifier]">
+                      Créer un espace
+                    </a>
+                  </li>
+                  {actions.map((action, i) => (
+                    <li key={i}>{action}</li>
+                  ))}
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </header>
+  )
+}
--- a/packages/integration/src/components/StylesFull.tsx
+++ b/packages/integration/src/components/StylesFull.tsx
@@ -1,7 +1,12 @@
 import { ReactNode, useEffect } from "react"
 import fullStyles from "../styles/homepage-full.css?inline"
-import devStyles from "../styles/dev.css?inline"
+import devStyles from "./dev.css?inline"

+/**
+ * wrap a component in StylesFull to apply the "homepage-full" styles
+ *
+ * this helps testing the html when we include the homepage+gaufre+dsfr css
+ */
 export const StylesFull = ({ children }: { children: ReactNode }) => {
  useEffect(() => {
    if (document.querySelector("#styles-full")) {
--- a/packages/integration/src/dev/StylesStandalone.tsx
+++ b/packages/integration/src/dev/StylesStandalone.tsx
@@ -0,0 +1,36 @@
+import { ReactNode, useEffect } from "react"
+import dsfrStyles from "../styles/raw-dsfr.css?inline"
+import homepageStyles from "../styles/homepage-gaufre.css?inline"
+import gaufreStyles from "../styles/gaufre.css?inline"
+import devStyles from "./dev.css?inline"
+
+/**
+ * wrap a component in StylesStandalone to apply the "raw-dsfr" and "homepage-gaufre" styles
+ *
+ * this helps testing the html when we include the homepage+gaufre css in an app already using the DSFR
+ */
+export const StylesStandalone = ({
+  children,
+  type = "homepage",
+}: {
+  children: ReactNode
+  type?: "homepage" | "gaufre"
+}) => {
+  useEffect(() => {
+    if (document.querySelector("#styles-standalone")) {
+      return
+    }
+    const style = document.createElement("style")
+    style.id = "styles-standalone"
+    style.innerHTML =
+      type === "homepage"
+        ? dsfrStyles + homepageStyles + devStyles
+        : dsfrStyles + gaufreStyles + devStyles
+    document.head.appendChild(style)
+    return () => {
+      document.querySelector("#styles-standalone")?.remove()
+    }
+  }, [])
+
+  return children
+}
--- a/packages/integration/src/styles/dev.css
+++ b/packages/integration/src/styles/dev.css
--- a/packages/integration/src/dev/dev.tsx
+++ b/packages/integration/src/dev/dev.tsx
@@ -3,14 +3,15 @@ import React, { type ReactNode } from "react"
 import ReactDOM from "react-dom/client"
 import { Link, Route, Switch } from "wouter"
 import { navigate } from "wouter/use-browser-location"
-import { Homepage } from "./components/Homepage"
-import { Gaufre } from "./components/Gaufre"
-import { EmailOrProconnect } from "./components/Homepage/EmailOrProconnect"
-import { Email } from "./components/Homepage/Email"
-import { Proconnect } from "./components/Homepage/Proconnect"
-import { StylesFull } from "./components/StylesFull"
-import { StylesStandalone } from "./components/StylesStandalone"
-import services from "../../../website/src/data/services.json"
+import { Homepage } from "../components/Homepage"
+import { Gaufre } from "../components/Gaufre"
+import { EmailOrProconnect } from "../components/Homepage/EmailOrProconnect"
+import { Email } from "../components/Homepage/Email"
+import { Proconnect } from "../components/Homepage/Proconnect"
+import { StylesFull } from "./StylesFull"
+import { StylesStandalone } from "./StylesStandalone"
+import { DsfrHeader } from "./DsfrHeader"
+import services from "../../../../website/src/data/services.json"

 const serviceHomepage = ({
  id,
@@ -97,48 +98,40 @@ const routes = [
    path: "/gaufre",
    label: "Gaufre",
    component: (
-      <div
-        style={{
-          margin: "2rem auto",
-          width: 800,
-          border: "1px solid #999",
-          padding: "2rem",
-          borderRadius: "0.5rem",
-        }}
-      >
-        <div style={{ display: "flex", justifyContent: "space-between" }}>
-          <h1>Test de la Gaufre</h1>
-          <Gaufre />
+      <StylesStandalone type="gaufre">
+        <DsfrHeader actions={[<Gaufre />]} />
+        <div className="fr-container fr-p-4w">
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac diam a libero posuere
+            ornare facilisis in mi. Nullam eu vulputate augue, in auctor nibh. Praesent ac tempus
+            dui. Integer vel enim non purus facilisis mattis et vel dolor. Aliquam lacinia elit et
+            massa faucibus, at dictum risus ornare. Vivamus ultricies magna et gravida consequat.
+            Donec ac odio finibus, lobortis purus vel, consequat purus. Maecenas convallis vel enim
+            eu malesuada. Vestibulum elementum maximus massa, a porta erat congue quis. Nunc neque
+            quam, euismod et malesuada in, bibendum ac ex. Phasellus felis elit, egestas a convallis
+            nec, malesuada a est. Donec ac urna venenatis lorem aliquet rhoncus in accumsan ipsum.
+          </p>
+          <p>
+            Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi sed augue elementum,
+            tempus diam in, euismod purus. Fusce interdum, leo nec blandit eleifend, sapien ligula
+            egestas quam, quis aliquam ex turpis ut augue. Nullam a neque consectetur, feugiat eros
+            a, lacinia tortor. Proin imperdiet vehicula justo, eget bibendum tortor gravida a.
+            Pellentesque sit amet fermentum urna. Ut rutrum eros a ligula dapibus pharetra. In
+            porttitor arcu in euismod dictum. Aenean vestibulum mi et dignissim rutrum. Phasellus
+            ultrices ex justo, eu tincidunt metus efficitur non. Curabitur ac lorem ornare, aliquet
+            neque et, tristique elit. Donec quis turpis sodales, interdum massa fermentum, dictum
+            magna.
+          </p>
+          <p>
+            Mauris elit risus, facilisis at magna quis, interdum tempor nulla. Ut ac erat eget
+            tellus ultricies semper. Ut at dictum ante. Lorem ipsum dolor sit amet, consectetur
+            adipiscing elit. Nam placerat lacinia eros ac convallis. Sed ultricies lectus et
+            pharetra aliquet. Vestibulum feugiat pulvinar fermentum. Vivamus imperdiet dapibus
+            ornare. Donec venenatis, lectus id faucibus tempus, sapien urna molestie augue, at
+            egestas enim lectus quis nisi.
+          </p>
        </div>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac diam a libero posuere
-          ornare facilisis in mi. Nullam eu vulputate augue, in auctor nibh. Praesent ac tempus dui.
-          Integer vel enim non purus facilisis mattis et vel dolor. Aliquam lacinia elit et massa
-          faucibus, at dictum risus ornare. Vivamus ultricies magna et gravida consequat. Donec ac
-          odio finibus, lobortis purus vel, consequat purus. Maecenas convallis vel enim eu
-          malesuada. Vestibulum elementum maximus massa, a porta erat congue quis. Nunc neque quam,
-          euismod et malesuada in, bibendum ac ex. Phasellus felis elit, egestas a convallis nec,
-          malesuada a est. Donec ac urna venenatis lorem aliquet rhoncus in accumsan ipsum.
-        </p>
-        <p>
-          Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi sed augue elementum,
-          tempus diam in, euismod purus. Fusce interdum, leo nec blandit eleifend, sapien ligula
-          egestas quam, quis aliquam ex turpis ut augue. Nullam a neque consectetur, feugiat eros a,
-          lacinia tortor. Proin imperdiet vehicula justo, eget bibendum tortor gravida a.
-          Pellentesque sit amet fermentum urna. Ut rutrum eros a ligula dapibus pharetra. In
-          porttitor arcu in euismod dictum. Aenean vestibulum mi et dignissim rutrum. Phasellus
-          ultrices ex justo, eu tincidunt metus efficitur non. Curabitur ac lorem ornare, aliquet
-          neque et, tristique elit. Donec quis turpis sodales, interdum massa fermentum, dictum
-          magna.
-        </p>
-        <p>
-          Mauris elit risus, facilisis at magna quis, interdum tempor nulla. Ut ac erat eget tellus
-          ultricies semper. Ut at dictum ante. Lorem ipsum dolor sit amet, consectetur adipiscing
-          elit. Nam placerat lacinia eros ac convallis. Sed ultricies lectus et pharetra aliquet.
-          Vestibulum feugiat pulvinar fermentum. Vivamus imperdiet dapibus ornare. Donec venenatis,
-          lectus id faucibus tempus, sapien urna molestie augue, at egestas enim lectus quis nisi.
-        </p>
-      </div>
+      </StylesStandalone>
    ),
  },
 ]