Add pre commit (#152)

* Add pre-commit hoos

* Add pre-commit hooks

* Run all files

.github/workflows/build.yml

@@ -9,8 +9,8 @@ jobs:
   build-and-deploy:
     runs-on: ubuntu-latest
     steps:
-    - name: Appel du hook Netlify
-      env:
-        URL: ${{ secrets.NETLIFY_PRODUCTION_BUILD_HOOK }}
-      run: |
-        curl --silent --show-error --fail -X POST "$URL"
+      - name: Appel du hook Netlify
+        env:
+          URL: ${{ secrets.NETLIFY_PRODUCTION_BUILD_HOOK }}
+        run: |
+          curl --silent --show-error --fail -X POST "$URL"

.github/workflows/ci.yml

@@ -10,7 +10,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '20.x'
+          node-version: "20.x"
       - name: Install dependencies
         run: yarn --frozen-lockfile
       - run: yarn test

.pre-commit-config.yaml

@@ -0,0 +1,9 @@
+repos:
+  - repo: https://github.com/pre-commit/mirrors-prettier
+    rev: v4.0.0-alpha.8
+    hooks:
+      - id: prettier
+  - repo: https://github.com/pre-commit/mirrors-eslint
+    rev: v9.10.0
+    hooks:
+      - id: eslint

README.md

@@ -12,6 +12,13 @@ https://quefairedemesdechets.ademe.fr
 
 `yarn start` pour lancer l'application sur [http://localhost:3000](http://localhost:3000)
 
+### `pre-commit`
+
+Ce projet utilise l'outil [pre-commit](https://pre-commit.com/hooks.html), populaire dans l'écosystème python.
+Il aurait pu utiliser [Husky](https://typicode.github.io/husky/) ou autre outil populaire dans l'écosystème node.js mais `pre-commit` étant déjà utilisé sur [Longue vie aux objets](http://github.com/incubateur-ademe/quefairedemesobjets/), il semblait logique d'uniformiser les outils.
+
+`pip install pre-commit` pour installer la dépendance
+`pre-commit install` pour installer les pre-commit hooks
 
 ## Déploiement
 

eslint.config.mjs

@@ -0,0 +1,12 @@
+import globals from "globals";
+import pluginJs from "@eslint/js";
+import tseslint from "typescript-eslint";
+import pluginReact from "eslint-plugin-react";
+
+export default [
+  { files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"] },
+  { languageOptions: { globals: globals.browser } },
+  pluginJs.configs.recommended,
+  ...tseslint.configs.recommended,
+  pluginReact.configs.flat.recommended,
+];

gatsby-config.ts

@@ -58,7 +58,7 @@ const config: GatsbyConfig = {
         siteId: "82",
         matomoUrl: "https://stats.beta.gouv.fr",
         siteUrl: "https://quefairedemesdechets.ademe.fr",
-        disableCookies: true
+        disableCookies: true,
       },
     },
     {

gatsby-node.ts

@@ -1,17 +1,17 @@
-import path from "path"
-import slug from "slug"
+import path from "path";
+import slug from "slug";
 
 exports.createPages = ({ graphql, actions: { createPage } }) => {
   return fetch(
-    `https://data.ademe.fr/data-fair/api/v1/datasets/que-faire-de-mes-dechets-produits/lines?format=json&q_mode=simple&size=1000&sampling=neighbors`
+    `https://data.ademe.fr/data-fair/api/v1/datasets/que-faire-de-mes-dechets-produits/lines?format=json&q_mode=simple&size=1000&sampling=neighbors`,
   )
     .then((res) => res.json())
     .then((res) =>
-      res.results.filter((waste) => typeof waste["ID"] !== "undefined")
+      res.results.filter((waste) => typeof waste["ID"] !== "undefined"),
     ) // handle Koumoul missing ID
     .then((wasteRes) =>
       fetch(
-        "https://data.ademe.fr/data-fair/api/v1/datasets/que-faire-de-mes-dechets-liens/lines?format=json&q_mode=simple&size=1000&sampling=neighbors"
+        "https://data.ademe.fr/data-fair/api/v1/datasets/que-faire-de-mes-dechets-liens/lines?format=json&q_mode=simple&size=1000&sampling=neighbors",
       )
         .then((res) => res.json())
         .then((res) => res.results)
@@ -35,7 +35,7 @@ exports.createPages = ({ graphql, actions: { createPage } }) => {
           }
           return tempWaste.map((waste) => ({
             ...waste,
-            slug: slug(waste[`Nom`], { locale: "fr"}),
+            slug: slug(waste[`Nom`], { locale: "fr" }),
             map:
               waste["Bdd"] === "sinoe" ||
               waste["Bdd"] === "google" ||
@@ -45,10 +45,10 @@ exports.createPages = ({ graphql, actions: { createPage } }) => {
             links: linkRes.filter((link) =>
               link["Produits_associes"]
                 .split("; ")
-                .includes(waste["ID"].split("_")[0])
+                .includes(waste["ID"].split("_")[0]),
             ),
           }));
-        })
+        }),
     )
     .then((res) =>
       res.forEach((product) => {
@@ -57,6 +57,6 @@ exports.createPages = ({ graphql, actions: { createPage } }) => {
           component: path.resolve("./src/templates/product.js"),
           context: { product },
         });
-      })
-    )
+      }),
+    );
 };

package.json

@@ -42,6 +42,7 @@
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.24.7",
+    "@eslint/js": "^9.10.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.0",
@@ -50,14 +51,18 @@
     "@types/node": "^20.14.10",
     "@types/react": "^18.3.4",
     "@types/react-dom": "^18.3.0",
+    "eslint": "^9.10.0",
+    "eslint-plugin-react": "^7.35.2",
     "gatsby-cli": "^5.13.3",
     "gatsby-plugin-root-import": "^2.0.9",
     "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.32",
+    "globals": "^15.9.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "prettier": "^3.3.2",
     "ts-jest": "^29.2.4",
     "typescript": "^5.6.2",
+    "typescript-eslint": "^8.5.0",
     "webpack": "^5.94.0",
     "webpack-cli": "^5.1.4"
   },

src/components/base/Accordion.tsx

@@ -2,14 +2,14 @@ import React, { useState } from "react";
 import styled from "styled-components";
 
 type AccordionItem = {
-  title: string
-  content: React.ReactElement | string
-}
+  title: string;
+  content: React.ReactElement | string;
+};
 
 const TitleWrapper = styled.h3`
   margin: 0;
   padding: 0;
-`
+`;
 const Title = styled.button<{ $expanded?: boolean }>`
   width: 100%;
   display: flex;
@@ -18,7 +18,7 @@ const Title = styled.button<{ $expanded?: boolean }>`
   jutify-content: space-between;
   padding: 1rem;
   cursor: pointer;
-  transition: .25s;
+  transition: 0.25s;
   user-select: none;
   -webkit-user-select: none;
   -webkit-appearance: button;
@@ -30,44 +30,42 @@ const Title = styled.button<{ $expanded?: boolean }>`
   }
 
   ${({ $expanded }) => $expanded && `background: #E3E3FD;`}
-`
+`;
 
 const Chevron = styled.svg<{ $expanded: boolean }>`
   ---rotation: rotate(180deg);
 
   width: 10px;
   height: 10px;
   margin-left: auto;
-  transition: .25s;
+  transition: 0.25s;
   will-change: transform;
   transform: var(---rotation);
   ${({ $expanded }) => $expanded && `---rotation: rotate(0deg);`}
-`
+`;
 
 const AccordionItemWrapper = styled.div`
-  border-top: 1px solid rgba(0, 0, 0, .1);
-  border-bottom: 1px solid rgba(0, 0, 0, .1);
-`
-
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+`;
 
-const Content = styled.div<{ $expanded?: boolean; }> `
+const Content = styled.div<{ $expanded?: boolean }>`
   display: none;
   padding: 1rem;
   ${({ $expanded }) => $expanded && `display: block;`}
-`
+`;
 
 export default function Accordion({ items }: { items: AccordionItem[] }) {
-  const [expandedItem, setExpandedItem] = useState<number | null>(null)
+  const [expandedItem, setExpandedItem] = useState<number | null>(null);
 
   return (
     <div>
       {items.map(({ title, content }, index) => {
-        const expanded = expandedItem === index
-        const id = `accordion-item-${index}`
+        const expanded = expandedItem === index;
+        const id = `accordion-item-${index}`;
         return (
           <AccordionItemWrapper key={id}>
-            <TitleWrapper
-            >
+            <TitleWrapper>
               <Title
                 $expanded={expanded}
                 onClick={() => setExpandedItem(expanded ? null : index)}
@@ -79,9 +77,20 @@ export default function Accordion({ items }: { items: AccordionItem[] }) {
               >
                 {title}
 
-                <Chevron $expanded={expanded}
-                  width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
-                  <path fillRule="evenodd" clipRule="evenodd" d="M4.99999 2.21883L1.69999 5.51883L0.757324 4.57616L4.99999 0.333496L9.24266 4.57616L8.29999 5.51883L4.99999 2.21883Z" fill="#000091" />
+                <Chevron
+                  $expanded={expanded}
+                  width="10"
+                  height="6"
+                  viewBox="0 0 10 6"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M4.99999 2.21883L1.69999 5.51883L0.757324 4.57616L4.99999 0.333496L9.24266 4.57616L8.29999 5.51883L4.99999 2.21883Z"
+                    fill="#000091"
+                  />
                 </Chevron>
               </Title>
             </TitleWrapper>
@@ -91,9 +100,11 @@ export default function Accordion({ items }: { items: AccordionItem[] }) {
               id={id}
               $expanded={expanded}
               data-testid={`accordion-content`}
-            >{content}</Content>
+            >
+              {content}
+            </Content>
           </AccordionItemWrapper>
-        )
+        );
       })}
     </div>
   );

src/components/layout/Contact.js

@@ -63,7 +63,7 @@ export default function Contact(props) {
   const mutation = useMutation({
     mutationFn: (formData) => {
       return fetch("/", { method: "post", body: formData });
-    }
+    },
   });
 
   return (
@@ -96,7 +96,7 @@ export default function Contact(props) {
                   "form-name",
                   ["integration", "autre"].includes(user.objet)
                     ? "contact"
-                    : "bug"
+                    : "bug",
                 );
                 Object.keys(user).map((key) => formData.append(key, user[key]));
                 mutation.mutate(formData);

src/components/layout/Footer.js

@@ -16,7 +16,8 @@ const Wrapper = styled.footer`
   transition: all 600ms;
 `;
 const Content = styled.div`
-  max-width: ${(props) => props.width || props.theme.widths.maxWidthWithGutters};
+  max-width: ${(props) =>
+    props.width || props.theme.widths.maxWidthWithGutters};
   margin: 0 auto;
   padding: 2rem 1rem 1rem;
 `;

src/components/layout/web/Seo.js

@@ -38,7 +38,10 @@ const SEO = (props) => {
     <Helmet title={seo.title}>
       <meta name="description" content={seo.description} />
       <meta name="image" content={seo.image} />
-      <meta name="google-site-verification" content="vHhqbYkCiU-dtj5Ona46jyfzS5E0NvNfnROEqtcRAWE" />
+      <meta
+        name="google-site-verification"
+        content="vHhqbYkCiU-dtj5Ona46jyfzS5E0NvNfnROEqtcRAWE"
+      />
 
       {seo.url && <meta property="og:url" content={seo.url} />}
 

src/components/misc/Bin.js

@@ -125,7 +125,8 @@ const Position = styled.div`
   transform: rotate(${(props) => (props.$position["y"] === "top" ? 180 : 0)}deg)
     translateX(
       ${(props) =>
-        (props.$position["y"] === "bottom" && props.$position["x"] === "right") ||
+        (props.$position["y"] === "bottom" &&
+          props.$position["x"] === "right") ||
         (props.$position["y"] === "top" && props.$position["x"] === "left")
           ? -8.3125
           : 0}rem

src/components/misc/MapWrapper.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useContext, useEffect } from "react"
+import React, { useState, useContext, useEffect } from "react";
 import styled, { keyframes, ThemeContext } from "styled-components";
 import { Map, Marker, Overlay, ZoomControl } from "pigeon-maps";
 
@@ -85,7 +85,7 @@ export default function MapWrapper(props) {
   );
 
   const themeContext = useContext(ThemeContext);
-        
+
   useEffect(() => {
     if (address.latitude && address.longitude) {
       window._paq?.push(["trackEvent", "Map", "Adresse"]);
@@ -105,10 +105,7 @@ export default function MapWrapper(props) {
         setCenter={setCenter}
         setZoom={setZoom}
       />
-      <Switch
-        setList={setList}
-        list={list}
-      />
+      <Switch setList={setList} list={list} />
       <Loader $isFetching={isFetching} />
       <Cache $visible={!address.label} />
       {list ? (

src/components/misc/mapWrapper/address/TextInput.tsx

@@ -37,7 +37,6 @@ export default React.forwardRef(function TextInput(
   },
   ref,
 ) {
-
   return (
     <Wrapper>
       <Input

src/components/providers/StyleProvider.js

@@ -8,7 +8,7 @@ const StyleProvider = (props) => {
 
   useEffect(() => {
     setTheme(
-      window.location.search.includes("theme=night") ? "night" : "default"
+      window.location.search.includes("theme=night") ? "night" : "default",
     );
   }, []);
   return (