Merge branch 'new_color_picker'

Author: garronej

.prettierignore

@@ -4,3 +4,4 @@ node_modules/
 /.yarn_home/
 /test/integration/
 /dsfr/
+/src/fr/generatedFromCss/

README.fr.md

@@ -35,10 +35,7 @@ DSFR en pur JavaScript/CSS.
 
 [Lien vers la vidéo démo](https://youtu.be/5q88JgXUAY4)
 
-> Remarque pour les agents non familiers avec TypeScript: Cette librairie, à l'instar de toute librairie développez-en TypeScript
-> **peut** être utilisé dans des projets n'utilisant pas TypeScript!  
-> La distribution publiée sur NPM est constituée de fichier JavaScript couplé à des fichiers de déclaration de types. Ces derniers
-> on pour objet d'aider au développement, mais n'intervienne pas dans le fonctionnement de la libraire.
+> Bien que cette bibliothèque soit écrit en TypeScript, l'utilisation de TypeScript dans votre application est facultative (mais recommandée car elle présente des avantages exceptionnels pour vous et votre base de code).
 
 -   [x] une interface de programmation strictement typée et bien documentée.
 -   [x] Garantie d'être toujours à jour avec les [dernières évolutions du DSFR](https://www.systeme-de-design.gouv.fr/).

README.md

@@ -36,7 +36,7 @@ This module is a wrapper/compatibility layer for [@gouvfr/dsfr](https://github.c
 
 [Link to the demo video](https://youtu.be/5q88JgXUAY4)
 
-> For TypeScript and JavaScript projects.
+> While this module is written in TypeScript, using TypeScript in your application is optional (but recommended as it comes with outstanding benefits to both you and your codebase).
 
 -   [x] Fully TypeSafe, well documented API.
 -   [x] Always in up to date with latest the DSFR evolutions.

package.json

@@ -97,12 +97,14 @@
         "eslint-config-prettier": "^8.3.0",
         "eslint-plugin-storybook": "^0.6.7",
         "evt": "^2.4.2",
+        "fzf": "^0.5.1",
         "husky": "^4.3.8",
         "lint-staged": "^11.0.0",
         "memoizee": "^0.4.15",
         "next": "12.3.1",
         "oppa": "^0.4.0",
         "parse-numeric-range": "^1.3.0",
+        "powerhooks": "^0.21.0",
         "prettier": "^2.3.0",
         "react": "18.2.0",
         "react-dom": "18.2.0",

src/fr/colorResolver.ts

@@ -0,0 +1,44 @@
+import { parseColorOptions } from "./colorOptions";
+import { parseColorDecision } from "./colorDecisions";
+import { exclude } from "tsafe/exclude";
+import type { ColorDecision } from "./colorDecisions";
+import type { ColorOption } from "./colorOptions";
+import { symToStr } from "tsafe/symToStr";
+
+export type ColorDecisionAndCorrespondingOption = Omit<ColorDecision, "optionThemePath"> & {
+    colorOption: ColorOption;
+};
+
+export function generateColorDecisionAndCorrespondingOptionsTsCode(rawCssCode: string): string {
+    const colorOptions = parseColorOptions(rawCssCode);
+
+    const colorDecisionAndCorrespondingOption = parseColorDecision(rawCssCode)
+        .map(colorDecision => {
+            const colorOption = colorOptions.find(
+                colorOption =>
+                    colorOption.themePath.join(".") === colorDecision.optionThemePath.join(".")
+            );
+            return colorOption === undefined ? undefined : ([colorDecision, colorOption] as const);
+        })
+        .filter(exclude(undefined))
+        .map(
+            ([
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                { optionThemePath, ...colorDecision },
+                colorOption
+            ]): ColorDecisionAndCorrespondingOption => ({
+                ...colorDecision,
+                colorOption
+            })
+        );
+
+    return [
+        ``,
+        `export const ${symToStr({ colorDecisionAndCorrespondingOption })}= ${JSON.stringify(
+            colorDecisionAndCorrespondingOption,
+            null,
+            4
+        )} as const;`,
+        ``
+    ].join("\n");
+}

src/scripts/build/cssToTs/colorDecisionAndCorrespondingOptions.ts

@@ -161,8 +161,8 @@ export function getThemePath(parsedColorDecisionName: ParsedColorDecisionName) {
 
 export type ColorDecision = {
     colorDecisionName: `--${string}`;
-    themePath: string[];
-    optionThemePath: string[];
+    themePath: readonly string[];
+    optionThemePath: readonly string[];
 };
 
 export const parseColorDecision = memoize((rawCssCode: string): ColorDecision[] => {
@@ -230,7 +230,7 @@ export function generateGetColorDecisionsTsCode(rawCssCode: string): string {
             return hash;
         })();
 
-        function req(obj: any, path: string[]): void {
+        function req(obj: any, path: readonly string[]): void {
             const [propertyName, ...pathRest] = path;
 
             if (pathRest.length === 0) {

src/scripts/build/cssToTs/colorDecisions.ts

@@ -320,7 +320,7 @@ export function getThemePath(parsedColorOptionName: ParsedColorOptionName): stri
 
 export type ColorOption = {
     colorOptionName: `--${string}`;
-    themePath: string[];
+    themePath: readonly string[];
     color:
         | `#${string}`
         | {
@@ -404,7 +404,7 @@ export function generateGetColorOptionsTsCode(rawCssCode: string) {
             return hash;
         })();
 
-        function req(obj: any, path: string[]): void {
+        function req(obj: any, path: readonly string[]): void {
             const [propertyName, ...pathRest] = path;
 
             if (pathRest.length === 0) {

src/scripts/build/cssToTs/colorOptions.ts

@@ -5,7 +5,7 @@ import { getProjectRoot } from "../../../bin/tools/getProjectRoot";
 import { generateTypographyTsCode } from "./typography";
 import { generateSpacingTsCode } from "./spacing";
 import { generateClassNamesTsCode } from "./classNames";
-import { generateColorResolutionTsCode } from "./colorResolution";
+import { generateColorDecisionAndCorrespondingOptionsTsCode } from "./colorDecisionAndCorrespondingOptions";
 import * as fs from "fs";
 import { join as pathJoin, basename as pathBasename, relative as pathRelative } from "path";
 import type { Icon } from "../../../bin/only-include-used-icons";
@@ -114,9 +114,14 @@ export function cssToTs(params: {
     );
 
     fs.writeFileSync(
-        pathJoin(generatedDirPath, "colorResolution.ts"),
+        pathJoin(generatedDirPath, "colorDecisionAndCorrespondingOptions.ts"),
         Buffer.from(
-            [warningMessage, ``, generateColorResolutionTsCode(rawDsfrCssCode), ``].join("\n"),
+            [
+                warningMessage,
+                ``,
+                generateColorDecisionAndCorrespondingOptionsTsCode(rawDsfrCssCode),
+                ``
+            ].join("\n"),
             "utf8"
         )
     );