Merge pull request #2 from SocialGouv/react-dsfr

.eslintrc.json

@@ -1,3 +1,7 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": "next/core-web-vitals",
+  "plugins": ["prettier"],
+  "rules": {
+    "prettier/prettier": "error"
+  }
 }

.gitignore

@@ -34,3 +34,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# VSCode
+.vscode

README.md

@@ -1,38 +1 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
-
-## Getting Started
-
-First, run the development server:
-
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
-
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
-
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
-
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+Pour modifier le contenu du site, éditer le fichier `src/pages/indext.tsx`.

next.config.js

@@ -1,6 +1,17 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
-}
+  images: {
+    unoptimized: true,
+  },
+  webpack: (config) => {
+    config.module.rules.push({
+      test: /\.woff2$/,
+      type: "asset/resource",
+    });
+    return config;
+  },
+  transpilePackages: ["@codegouvfr/react-dsfr"],
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;

package.json

@@ -7,9 +7,12 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "build-static": "next build && next export"
+    "build-static": "next build && next export",
+    "predev": "only-include-used-icons",
+    "prebuild": "only-include-used-icons"
   },
   "dependencies": {
+    "@codegouvfr/react-dsfr": "^0.37.0",
     "@types/node": "18.14.6",
     "@types/react": "18.0.28",
     "@types/react-dom": "18.0.11",
@@ -19,5 +22,9 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "typescript": "4.9.5"
+  },
+  "devDependencies": {
+    "eslint-plugin-prettier": "^4.2.1",
+    "prettier": "^2.8.4"
   }
 }

src/pages/_app.tsx

@@ -1,6 +1,120 @@
-import '@/styles/globals.css'
-import type { AppProps } from 'next/app'
+import type { AppProps } from "next/app";
 
-export default function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+import Link from "next/link";
+import { fr } from "@codegouvfr/react-dsfr";
+import { Header } from "@codegouvfr/react-dsfr/Header";
+import { Footer } from "@codegouvfr/react-dsfr/Footer";
+import {
+  Display,
+  headerFooterDisplayItem,
+} from "@codegouvfr/react-dsfr/Display";
+import { createNextDsfrIntegrationApi } from "@codegouvfr/react-dsfr/next-pagesdir";
+
+import "@/styles/globals.css";
+
+declare module "@codegouvfr/react-dsfr/next-pagesdir" {
+  interface RegisterLink {
+    Link: typeof Link;
+  }
+}
+
+const { withDsfr, dsfrDocumentApi } = createNextDsfrIntegrationApi({
+  defaultColorScheme: "system",
+  Link,
+  preloadFonts: [
+    //"Marianne-Light",
+    //"Marianne-Light_Italic",
+    "Marianne-Regular",
+    //"Marianne-Regular_Italic",
+    "Marianne-Medium",
+    //"Marianne-Medium_Italic",
+    "Marianne-Bold",
+    //"Marianne-Bold_Italic",
+    //"Spectral-Regular",
+    //"Spectral-ExtraBold"
+  ],
+});
+
+export { dsfrDocumentApi };
+
+function App({ Component, pageProps }: AppProps) {
+  const brandTop = (
+    <>
+      MINISTÈRES
+      <br />
+      SOCIAUX
+    </>
+  );
+  const homeLinkProps = { href: "/", title: "Accueil - BPCO" };
+
+  return (
+    <div
+      style={{
+        height: "100vh",
+        display: "flex",
+        flexDirection: "column",
+      }}
+    >
+      <Header
+        brandTop={brandTop}
+        serviceTitle="BPCO'Mieux"
+        homeLinkProps={homeLinkProps}
+        serviceTagline="L'application mobile pour les patients BPCO qui veulent suivre leurs signes cliniques respiratoires"
+        operatorLogo={{
+          alt: "logo BPCO",
+          imgUrl: "bpco.png",
+          orientation: "horizontal",
+        }}
+        quickAccessItems={[
+          {
+            iconId: "ri-customer-service-2-line",
+            linkProps: {
+              href: "#nous-contacter",
+            },
+            text: "Nous contacter",
+          },
+          {
+            iconId: "ri-download-cloud-line",
+            linkProps: {
+              href: "#",
+            },
+            text: "Télécharger l'app",
+          },
+        ]}
+      />
+      <main
+        style={{
+          flex: 1,
+          gap: "4rem",
+          margin: "auto",
+          display: "flex",
+          flexDirection: "column",
+          ...fr.spacing("padding", { topBottom: "16v", rightLeft: "10v" }),
+        }}
+      >
+        <Component {...pageProps} />
+      </main>
+      <Footer
+        brandTop={brandTop}
+        homeLinkProps={homeLinkProps}
+        accessibility="fully compliant"
+        bottomItems={[headerFooterDisplayItem]}
+        operatorLogo={{
+          alt: "logo BPCO",
+          imgUrl: "bpco.png",
+          orientation: "horizontal",
+        }}
+        contentDescription={`
+          BPCO'Mieux est un dispositif expérimental créé par le Dr Jean-Baptiste PERETOUT,
+          médecin réanimateur à l'hôpital Forcilles - Fondation Cognacq-Jay, financé par l'ARS Ile-de-France,
+          en collaboration avec la Fabrique du numérique des ministères sociaux.
+        `}
+        termsLinkProps={{ href: "/terms" }}
+        personalDataLinkProps={{ href: "/privacy-policy" }}
+      />
+      <Display />
+    </div>
+  );
 }
+
+export default withDsfr(App);

src/pages/_document.tsx

@@ -1,13 +1,19 @@
-import { Html, Head, Main, NextScript } from 'next/document'
+import { Html, Head, Main, NextScript, DocumentProps } from "next/document";
+import { dsfrDocumentApi } from "./_app";
 
-export default function Document() {
+const { getColorSchemeHtmlAttributes, augmentDocumentForDsfr } =
+  dsfrDocumentApi;
+
+export default function Document(props: DocumentProps) {
   return (
-    <Html lang="en">
+    <Html lang="fr" {...getColorSchemeHtmlAttributes(props)}>
       <Head />
       <body>
         <Main />
         <NextScript />
       </body>
     </Html>
-  )
+  );
 }
+
+augmentDocumentForDsfr(Document);