createParseColorDecisionName

Author: garronej

src/bin/css_to_ts/colorDecisions.ts

@@ -1,43 +1,21 @@
 import type { State } from "./colorOptions";
-
-//export type Context= "background" | "border" | "text" | "illustration";
-
-//export type Usage = "action" |
-//"active" | "disabled" | "error" | "success"  |
-//"default" | "title" | "label" | "contrast";
-
-//export type Usage = "default" | "alt";
-
-//Not in path
-//export type Variant = "high" | "low";
+import { states } from "./colorOptions";
+import { id } from "tsafe/id";
+import { assert } from "tsafe/assert";
+import { capitalize } from "tsafe/capitalize";
 
 const contexts = ["background", "text", "border", "artwork"] as const;
 
 type Context = typeof contexts[number];
 
-/*
-const usages = [
-    "default",
-    "alt",
-    "contrast",
-    "flat",
-    "action",
-    "active",
-    "open",
-    "disabled",
-    "raised",
-    "altRaised",
-    "altOverlap",
-    "contrastRaised"
-] as const;
-*/
-
-//type Usage = typeof usages[number];
+const variants = ["hight", "low"] as const;
+
+type Variant = typeof variants[number];
 
 export type ParsedColorDecisionName = {
     context: Context;
-    usage: string; //Usage In reality use string because it's susceptible to change.
-    variant: "high" | "low" | undefined;
+    usage: string; //default alt contrast altOverlap contrastRaised
+    variant: Variant | undefined;
     colorName: string; // "grey" "blueFrance"
     state: State | undefined;
 };
@@ -51,24 +29,96 @@ export function createParseColorDecisionName(params: {
 }) {
     const { colorNames } = params;
 
-    console.log(colorNames);
-
-    function parseColorDecisionName(decisionName: `--${string}`): ParsedColorDecisionName {
-        console.log(decisionName);
-
-        //const parsedColorDecisionName: ParsedColorDecisionName = { } as any;
-
-        //let revArr = colorOptionName.replace(/^--/, "").split("-").reverse();
-
+    function parseColorDecisionName(colorDecisionName: `--${string}`): ParsedColorDecisionName {
         /*
+		colorDecisionName: 
 		--background-default-grey-hover
 		--background-default-grey
 		--border-action-low-orange-terre-battue
 		--background-alt-raised-grey-hover
 		--background-contrast-overlap-grey
 		*/
 
-        return null as any;
+        const parsedColorDecisionName: ParsedColorDecisionName = {} as any;
+
+        let arr = colorDecisionName.replace(/^--/, "").split("-");
+
+        /*
+		arr: 
+		[ "background", "default", "grey", "hover" ]
+		[ "background", "default", "grey" ]
+		[ "border", "action-low", "orange", "terre", "battue"]
+		[ "background", "alt", "raised", "grey", "hover" ]
+		[ "background", "contrast-overlap", "grey" ]
+		*/
+
+        //parse context
+        {
+            const [firstWord, ...rest] = arr;
+
+            arr = rest;
+
+            assert(id<readonly string[]>(contexts).includes(firstWord));
+
+            parsedColorDecisionName.context = firstWord as any;
+        }
+
+        parse_state: {
+            const [lastWord, ...rest] = [...arr].reverse();
+            rest.reverse();
+
+            if (!id<readonly string[]>(states).includes(lastWord)) {
+                parsedColorDecisionName.variant = undefined;
+                break parse_state;
+            }
+
+            arr = rest;
+
+            parsedColorDecisionName.state = lastWord as any;
+        }
+
+        parse_colorName: {
+            for (const colorName of colorNames) {
+                const kebabCaseColorName = colorName.replace(
+                    /([A-Z])/g,
+                    group => `-${group.toLowerCase()}`
+                );
+
+                const join = arr.join("-");
+
+                if (!join.endsWith(kebabCaseColorName)) {
+                    continue;
+                }
+
+                arr = join.split("-" + kebabCaseColorName)[0].split("-");
+
+                parsedColorDecisionName.colorName = colorName;
+
+                break parse_colorName;
+            }
+
+            assert(false);
+        }
+
+        parse_variant: {
+            const [lastWord, ...rest] = [...arr].reverse();
+            rest.reverse();
+
+            if (!id<readonly string[]>(variants).includes(lastWord)) {
+                parsedColorDecisionName.variant = undefined;
+                break parse_variant;
+            }
+
+            arr = rest;
+
+            parsedColorDecisionName.variant = lastWord as any;
+        }
+
+        parsedColorDecisionName.usage = arr
+            .map((word, i) => (i === 0 ? word : capitalize(word)))
+            .join("");
+
+        return parsedColorDecisionName;
     }
 
     return { parseColorDecisionName };

src/bin/css_to_ts/colorOptions.ts

@@ -13,7 +13,8 @@ export const data_fr_theme = "data-fr-theme";
 
 export type Variant = "main" | "sun" | "moon";
 
-export type State = "hover" | "active";
+export const states = ["hover", "active"] as const;
+export type State = typeof states[number];
 
 export type BrightnessIndex = {
     value: number;

src/test/bin/colorDecisions/parseColorDecisionName.test.ts

@@ -21,6 +21,8 @@ const { parseColorDecisionName } = createParseColorDecisionName({ colorNames });
     const got = parseColorDecisionName("--background-default-grey-hover");
 
     assert(same(got, expected));
+
+    console.log("PASS 1");
 }
 
 {
@@ -35,20 +37,24 @@ const { parseColorDecisionName } = createParseColorDecisionName({ colorNames });
     const got = parseColorDecisionName("--background-default-grey");
 
     assert(same(got, expected));
+
+    console.log("PASS 2");
 }
 
 {
     const expected: ParsedColorDecisionName = {
         "context": "border",
         "usage": "action",
         "variant": "low",
-        "colorName": "orange-terre-battue",
+        "colorName": "orangeTerreBattue",
         "state": undefined
     };
 
     const got = parseColorDecisionName("--border-action-low-orange-terre-battue");
 
     assert(same(got, expected));
+
+    console.log("PASS 3");
 }
 
 {
@@ -63,6 +69,8 @@ const { parseColorDecisionName } = createParseColorDecisionName({ colorNames });
     const got = parseColorDecisionName("--background-alt-raised-grey-hover");
 
     assert(same(got, expected));
+
+    console.log("PASS 4");
 }
 
 {
@@ -77,4 +85,6 @@ const { parseColorDecisionName } = createParseColorDecisionName({ colorNames });
     const got = parseColorDecisionName("--background-contrast-overlap-grey");
 
     assert(same(got, expected));
+
+    console.log("PASS 5");
 }

src/test/bin/main.ts

@@ -1,2 +1,2 @@
 import "./colorOptions";
-//import "./colorDecisions";
+import "./colorDecisions";