wip lint

postcss.config.js

@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-};
+}

src/components/Callout.tsx

@@ -1,16 +1,16 @@
-import Image from "next/image";
+import Image from 'next/image'
 
 export interface CalloutProps {
-  children: any;
+  children: any
 }
 
 type UnionSVGProps = {
-  className: string;
-};
+  className: string
+}
 
 const UnionSVG = ({ className }: UnionSVGProps) => (
   <Image className={className} src="/union.svg" width={30} height={30} alt="" />
-);
+)
 
 export const Callout = ({ children }: CalloutProps) => (
   <div className="w-[80%] max-w-[42rem] relative my-[30px] mx-auto">
@@ -22,4 +22,4 @@ export const Callout = ({ children }: CalloutProps) => (
     </div>
     <UnionSVG className="rotate-180 flex absolute bottom-[-1.3rem] right-[-1.3rem] h-[1.3rem] w-[1.3rem]" />
   </div>
-);
+)

src/components/Core/BreakLine.tsx

@@ -1,6 +1,6 @@
-import { twMerge } from "tailwind-merge";
-import React from "react";
-import { CommonProps } from "@/types";
+import { twMerge } from 'tailwind-merge'
+import React from 'react'
+import { CommonProps } from '@/types'
 
 /**
  * Line Break Component
@@ -13,6 +13,6 @@ import { CommonProps } from "@/types";
  * should be ignored by screen readers.
  *
  */
-export const Br: React.FC<Omit<CommonProps, "children">> = ({ className }) => (
-  <br className={twMerge("hidden sm:inline", className)} aria-hidden={true} />
-);
+export const Br: React.FC<Omit<CommonProps, 'children'>> = ({ className }) => (
+  <br className={twMerge('hidden sm:inline', className)} aria-hidden={true} />
+)

src/components/Core/Button.tsx

@@ -1,21 +1,21 @@
-import Image from "next/image";
-import Link from "next/link";
-import { twMerge } from "tailwind-merge";
-import { CommonProps } from "@/types";
+import Image from 'next/image'
+import Link from 'next/link'
+import { twMerge } from 'tailwind-merge'
+import { CommonProps } from '@/types'
 
 interface ButtonProps extends CommonProps {
-  href?: string;
-  "aria-label"?: string;
+  href?: string
+  'aria-label'?: string
 }
 
 export const ButtonStyle =
-  "flex justify-center align-middle items-center min-h-10 text-base font-medium text-dinum-white-0 px-6 sm:w-auto bg-dinum-blue-1 hover:bg-dsfr-blue-2 transition ease-in-out delay-50 duration-300 text-center";
+  'flex justify-center align-middle items-center min-h-10 text-base font-medium text-dinum-white-0 px-6 sm:w-auto bg-dinum-blue-1 hover:bg-dsfr-blue-2 transition ease-in-out delay-50 duration-300 text-center'
 
 export const Button: React.FC<ButtonProps> = ({
   children,
   href,
   className,
-  "aria-label": ariaLabel,
+  'aria-label': ariaLabel,
 }) => (
   <>
     {href ? (
@@ -30,4 +30,4 @@ export const Button: React.FC<ButtonProps> = ({
       <button className={twMerge(ButtonStyle, className)}>{children}</button>
     )}
   </>
-);
+)

src/components/Core/ExternalLink.tsx

@@ -1,29 +1,29 @@
-import Image from "next/image";
-import { CommonProps } from "@/types";
-import { ButtonStyle } from "@/components/Core/Button";
-import { twMerge } from "tailwind-merge";
+import Image from 'next/image'
+import { CommonProps } from '@/types'
+import { ButtonStyle } from '@/components/Core/Button'
+import { twMerge } from 'tailwind-merge'
 
-export type LinkProps = Omit<CommonProps, "children"> & {
-  href: string;
-  children: string;
+export type LinkProps = Omit<CommonProps, 'children'> & {
+  href: string
+  children: string
   /**
    * The text vocalized by screen readers.
    * Use this only to add context to the link if the default text is not enough to understand the link on its own.
    *
    * note: a string telling the user that the link opens in a new window is always added at the end of the aria-label,
    * whether you pass one or not.
    */
-  "aria-label"?: string;
-};
+  'aria-label'?: string
+}
 
 /**
  * our ButtonExternalLink passes html to ExternalLink.
  * In that case, aria-label is mandatory as it can't be guessed from a children string anymore.
  */
-type ComplexChildrenLinkProps = Omit<LinkProps, "children" | "aria-label"> & {
-  children: React.ReactNode;
-  "aria-label": string;
-};
+type ComplexChildrenLinkProps = Omit<LinkProps, 'children' | 'aria-label'> & {
+  children: React.ReactNode
+  'aria-label': string
+}
 
 /**
  * ExternalLink Component
@@ -33,7 +33,7 @@ type ComplexChildrenLinkProps = Omit<LinkProps, "children" | "aria-label"> & {
  */
 export const ExternalLink: React.FC<LinkProps | ComplexChildrenLinkProps> = ({
   children,
-  "aria-label": ariaLabel,
+  'aria-label': ariaLabel,
   ...subProps
 }) => (
   <a
@@ -43,12 +43,12 @@ export const ExternalLink: React.FC<LinkProps | ComplexChildrenLinkProps> = ({
   >
     {children}
   </a>
-);
+)
 
 export const ButtonExternalLink: React.FC<LinkProps> = ({
   className,
   children,
-  "aria-label": ariaLabel,
+  'aria-label': ariaLabel,
   ...subprops
 }) => (
   <ExternalLink
@@ -66,4 +66,4 @@ export const ButtonExternalLink: React.FC<LinkProps> = ({
       />
     </span>
   </ExternalLink>
-);
+)

src/components/Core/Strong.tsx

@@ -1,12 +1,12 @@
-import React from "react";
+import React from 'react'
 
 export interface StrongProps {
-  children: React.ReactNode;
+  children: React.ReactNode
 }
 
 /**
  * Strong component represents bold text with a specific styling.
  */
 export const Strong: React.FC<StrongProps> = ({ children }: StrongProps) => (
   <strong className="text-dinum-grey-2">{children}</strong>
-);
+)

src/components/Core/index.ts

@@ -1,4 +1,4 @@
-export * from "./BreakLine";
-export * from "./Strong";
-export * from "./Button";
-export * from "./ExternalLink";
+export * from './BreakLine'
+export * from './Strong'
+export * from './Button'
+export * from './ExternalLink'

src/components/Layout/ContentSection.tsx

@@ -1,5 +1,5 @@
-import { HTMLAttributes, PropsWithChildren } from "react";
-import { twMerge } from "tailwind-merge";
+import { HTMLAttributes, PropsWithChildren } from 'react'
+import { twMerge } from 'tailwind-merge'
 
 export const ContentSection = ({
   children,
@@ -11,19 +11,19 @@ export const ContentSection = ({
   return (
     <div
       className={twMerge(
-        "overflow-hidden flex justify-center py-[50px] md:py-20",
-        className,
+        'overflow-hidden flex justify-center py-[50px] md:py-20',
+        className
       )}
     >
       <div
         className={twMerge(
-          "flex flex-col items-center w-full lg:w-[64em] px-4 gap-[50px]",
-          classNameChildren,
+          'flex flex-col items-center w-full lg:w-[64em] px-4 gap-[50px]',
+          classNameChildren
         )}
         {...props}
       >
         {children}
       </div>
     </div>
-  );
-};
+  )
+}

src/components/Layout/Footer.tsx

@@ -1,22 +1,22 @@
-import Link from "next/link";
-import { twMerge } from "tailwind-merge";
-import { ExternalLink, LinkProps, Br } from "@/components/Core";
+import Link from 'next/link'
+import { twMerge } from 'tailwind-merge'
+import { ExternalLink, LinkProps, Br } from '@/components/Core'
 
 const hover =
-  "hover:underline hover:decoration-2 hover:underline-offset-4 transition ease-in-out delay-50 duration-300 hover:cursor-pointer";
+  'hover:underline hover:decoration-2 hover:underline-offset-4 transition ease-in-out delay-50 duration-300 hover:cursor-pointer'
 
 const externalLinks: LinkProps[] = [
-  { href: "https://legifrance.gouv.fr/fr/", children: "legifrance.gouv.fr" },
-  { href: "https://gouvernement.fr/fr/", children: "gouvernement.fr" },
-  { href: "https://www.service-public.fr/", children: "service-public.fr" },
-  { href: "https://www.data.gouv.fr/fr/", children: "data.gouv.fr" },
-];
+  { href: 'https://legifrance.gouv.fr/fr/', children: 'legifrance.gouv.fr' },
+  { href: 'https://gouvernement.fr/fr/', children: 'gouvernement.fr' },
+  { href: 'https://www.service-public.fr/', children: 'service-public.fr' },
+  { href: 'https://www.data.gouv.fr/fr/', children: 'data.gouv.fr' },
+]
 
 const pages: LinkProps[] = [
-  { href: "/apropos", children: "Mentions Légales" },
-  { href: "/suivi", children: "Données personnelles et cookies" },
-  { href: "/accessibilite", children: "Accessibilité: audit en cours" },
-];
+  { href: '/apropos', children: 'Mentions Légales' },
+  { href: '/suivi', children: 'Données personnelles et cookies' },
+  { href: '/accessibilite', children: 'Accessibilité: audit en cours' },
+]
 
 export const Footer = () => (
   <footer className="pt-8 border-t-2 border-dinum-blue-1 pb-40">
@@ -42,7 +42,7 @@ export const Footer = () => (
             {externalLinks.map((link) => (
               <li
                 key={link.href}
-                className={twMerge("mr-6 my-2 decoration-dinum-grey-5", hover)}
+                className={twMerge('mr-6 my-2 decoration-dinum-grey-5', hover)}
               >
                 <ExternalLink
                   className="font-bold text-sm text-dinum-grey-5 external-link-grey"
@@ -65,7 +65,7 @@ export const Footer = () => (
               >
                 <Link
                   {...link}
-                  className={twMerge("border-dinum-grey-1", hover)}
+                  className={twMerge('border-dinum-grey-1', hover)}
                 >
                   {link.children}
                 </Link>
@@ -75,12 +75,12 @@ export const Footer = () => (
         </div>
         <div className="mt-2">
           <p className="inline text-xs text-dinum-grey-3 leading-5">
-            Sauf mention contraire, tous les contenus de ce site sont sous{" "}
+            Sauf mention contraire, tous les contenus de ce site sont sous{' '}
             <ExternalLink
               href="https://github.com/etalab/licence-ouverte/blob/master/LO.md"
               className={twMerge(
-                "relative underline underline-offset-4 external-link-grey",
-                hover,
+                'relative underline underline-offset-4 external-link-grey',
+                hover
               )}
             >
               licence etalab-2.0
@@ -90,4 +90,4 @@ export const Footer = () => (
       </div>
     </div>
   </footer>
-);
+)

src/components/Layout/Layout.tsx

@@ -1,20 +1,20 @@
-import Head from "next/head";
-import { NavBar } from "@/components/Layout/NavBar";
-import { Footer } from "@/components/Layout/Footer";
-import { CommonProps } from "@/types";
-import { TITLE_SITE } from "@/constant";
+import Head from 'next/head'
+import { NavBar } from '@/components/Layout/NavBar'
+import { Footer } from '@/components/Layout/Footer'
+import { CommonProps } from '@/types'
+import { TITLE_SITE } from '@/constant'
 
 export const Layout: React.FC<
   CommonProps & {
     /**
      * Text to use as page <title>. It should represent what the current page is about.
      * The website name is appended to the title automatically.
      */
-    title: string;
+    title: string
   }
 > = ({ title, ...props }) => {
-  const isHomepage = title === TITLE_SITE;
-  const pageTitle = isHomepage ? title : `${title} - ${TITLE_SITE}`;
+  const isHomepage = title === TITLE_SITE
+  const pageTitle = isHomepage ? title : `${title} - ${TITLE_SITE}`
   return (
     <>
       <Head>
@@ -23,13 +23,13 @@ export const Layout: React.FC<
           key="ogtitle"
           property="og:title"
           content={
-            isHomepage ? "Travailler avec La Suite numérique" : pageTitle
+            isHomepage ? 'Travailler avec La Suite numérique' : pageTitle
           }
         />
       </Head>
       <NavBar />
       <main {...props}>{props.children}</main>
       <Footer />
     </>
-  );
-};
+  )
+}

src/components/Layout/MetaHeader.tsx

@@ -1,5 +1,5 @@
-import Head from "next/head";
-import { URL_SITE } from "@/constant";
+import Head from 'next/head'
+import { URL_SITE } from '@/constant'
 
 export const MetaHeader = () => (
   <Head>
@@ -16,4 +16,4 @@ export const MetaHeader = () => (
       content={`https://${URL_SITE}/thumbnail.webp`}
     />
   </Head>
-);
+)

src/components/Layout/NavBar.tsx

@@ -1,5 +1,5 @@
-import Link from "next/link";
-import { Br, Strong } from "@/components/Core";
+import Link from 'next/link'
+import { Br, Strong } from '@/components/Core'
 
 /**
  * NavBar Component
@@ -34,4 +34,4 @@ export const NavBar = () => (
       </div>
     </div>
   </header>
-);
+)

src/components/Layout/index.ts

@@ -1,5 +1,5 @@
-export * from "./Footer";
-export * from "./NavBar";
-export * from "./MetaHeader";
-export * from "./Layout";
-export * from "./ContentSection";
+export * from './Footer'
+export * from './NavBar'
+export * from './MetaHeader'
+export * from './Layout'
+export * from './ContentSection'