Add missing files

Author: garronej

README.md

@@ -40,8 +40,8 @@ This module is a wrapper/compatibility layer for [@gouvfr/dsfr](https://github.c
 -   [x] Always in up to date with latest the DSFR evolutions.
         Code and Types generated from [`@gouvfr/dsfr`](https://www.npmjs.com/package/@gouvfr/dsfr)`/dist/dsfr.css`.
 -   [x] Exactly the same look and feel than with [@gouvfr/dsfr](https://www.npmjs.com/package/@gouvfr/dsfr).
--   [x] No [white flash when reloading in SSR setup](https://github.com/codegouvfr/@codegouvfr/react-dsfr/issues/2#issuecomment-1257263480).  
--   [x] Most components are server component ready. The others are labeled with `"use client";`  
+-   [x] No [white flash when reloading in SSR setup](https://github.com/codegouvfr/@codegouvfr/react-dsfr/issues/2#issuecomment-1257263480).
+-   [x] Most components are server component ready. The others are labeled with `"use client";`
 -   [x] [Perfect integration with all major React framework: Next.js (PagesDir and AppDir), Create React App, Vue](https://react-dsfr.etalab.studio/).
 -   [ ] All [the components](https://www.systeme-de-design.gouv.fr/elements-d-interface) are implemented (14/42, [see details](COMPONENTS.md))
 -   [x] Three shakable distribution, cherry pick the components you import. (It's not all in a big .js bundle)

src/next-appdir/fontUrlByFileBasename.ts

@@ -0,0 +1,23 @@
+import marianneLightWoff2Url from "../dsfr/fonts/Marianne-Light.woff2";
+import marianneItalicWoff2Url from "../dsfr/fonts/Marianne-Light_Italic.woff2";
+import marianneRegularWoff2Url from "../dsfr/fonts/Marianne-Regular.woff2";
+import marianneRegularItalicWoff2Url from "../dsfr/fonts/Marianne-Regular_Italic.woff2";
+import marianneMediumWoff2Url from "../dsfr/fonts/Marianne-Medium.woff2";
+import marianneMediumItalicWoff2Url from "../dsfr/fonts/Marianne-Medium_Italic.woff2";
+import marianneBoldWoff2Url from "../dsfr/fonts/Marianne-Bold.woff2";
+import marianneBoldItalicWoff2Url from "../dsfr/fonts/Marianne-Bold_Italic.woff2";
+import spectralRegularWoff2Url from "../dsfr/fonts/Spectral-Regular.woff2";
+import spectralExtraBoldWoff2Url from "../dsfr/fonts/Spectral-ExtraBold.woff2";
+
+export const fontUrlByFileBasename = {
+    "Marianne-Light": marianneLightWoff2Url,
+    "Marianne-Light_Italic": marianneItalicWoff2Url,
+    "Marianne-Regular": marianneRegularWoff2Url,
+    "Marianne-Regular_Italic": marianneRegularItalicWoff2Url,
+    "Marianne-Medium": marianneMediumWoff2Url,
+    "Marianne-Medium_Italic": marianneMediumItalicWoff2Url,
+    "Marianne-Bold": marianneBoldWoff2Url,
+    "Marianne-Bold_Italic": marianneBoldItalicWoff2Url,
+    "Spectral-Regular": spectralRegularWoff2Url,
+    "Spectral-ExtraBold": spectralExtraBoldWoff2Url
+} as const;

src/useIsDark/scriptToRunAsap.ts

@@ -0,0 +1,90 @@
+import type { ColorScheme } from "./client";
+import { data_fr_scheme, data_fr_theme, rootColorSchemeStyleTagId } from "./constants";
+import { getColors } from "../fr/colors";
+
+export const getScriptToRunAsap = (defaultColorScheme: ColorScheme | "system") => `
+{
+
+    window.ssrWasPerformedWithIsDark = "${defaultColorScheme}" === "dark";
+    
+    const isDark = (() => {
+    
+    	const isDarkExplicitlyProvidedAsParameter = (() => {
+    		if ("${defaultColorScheme}" === "system") {
+    			return undefined;
+    		}
+    
+    		switch ("${defaultColorScheme}") {
+    			case "dark": return true;
+    			case "light": return false;
+    		}
+    	})();
+    
+    	const isDarkFromLocalStorage = (() => {
+    		const colorSchemeReadFromLocalStorage = localStorage.getItem("scheme");
+    
+    		if (colorSchemeReadFromLocalStorage === null) {
+    			return undefined;
+    		}
+    
+    		if (colorSchemeReadFromLocalStorage === "system") {
+    			return undefined;
+    		}
+    
+    		switch (colorSchemeReadFromLocalStorage) {
+    			case "dark":
+    				return true;
+    			case "light":
+    				return false;
+    		}
+    	})();
+    
+    	const isDarkFromOsPreference = (() => {
+    		if (!window.matchMedia) {
+    			return undefined;
+    		}
+    
+    		return window.matchMedia("(prefers-color-scheme: dark)").matches;
+    	})();
+    
+    	const isDarkFallback = false;
+    
+    	return (
+    		isDarkFromLocalStorage ??
+    		isDarkExplicitlyProvidedAsParameter ??
+    		isDarkFromOsPreference ??
+    		isDarkFallback
+    	);
+    
+    })();
+    
+    ["${data_fr_scheme}", "${data_fr_theme}"].forEach(attr => document.documentElement.setAttribute(attr, isDark ? "dark" : "light"));
+
+    {
+
+        const element = document.createElement("style");
+
+        element.id = "${rootColorSchemeStyleTagId}";
+
+        element.innerHTML = \`:root { color-scheme: \${isDark ? "dark" : "light"}; }\`;
+
+        document.head.appendChild(element);
+
+    }
+
+    {
+
+        const element = document.createElement("meta");
+
+        element.name = "theme-color";
+
+        element.content = isDark ? "${
+            getColors(true).decisions.background.default.grey.default
+        }" : "${getColors(false).decisions.background.default.grey.default}";
+
+        document.head.appendChild(element);
+
+    }
+
+}
+`;