parseColorDecision, test that fails

Author: garronej

src/bin/css_to_ts/colorDecisions.ts

@@ -0,0 +1,57 @@
+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";
+
+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];
+
+export type ParsedColorDecisionName = {
+    context: Context;
+    usage: string; //Usage In reality use string because it's susceptible to change.
+    variant: "high" | "low" | undefined;
+    colorName: string; // "grey" "blueFrance"
+    state: State | undefined;
+};
+
+export function createParseColorDecisionName(params: {
+    /** Like [ "grey", "blueFrance", ... ]
+     * All the the color name in camel case that we deduce from Options
+     * it help parsing without making assumption on what is a valid Usage
+     */
+    colorNames: string[];
+}) {
+    const { colorNames } = params;
+
+    function parseColorDecisionName(desicsionName: `--${string}`): ParsedColorDecisionName {
+        return null as any;
+    }
+
+    return { parseColorDecisionName };
+}

src/bin/css_to_ts/colorOptions.ts

@@ -13,9 +13,7 @@ export const data_fr_theme = "data-fr-theme";
 
 export type Variant = "main" | "sun" | "moon";
 
-export const states = ["hover", "active"] as const;
-
-export type State = typeof states[number];
+export type State = "hover" | "active";
 
 export type BrightnessIndex = {
     value: number;
@@ -327,7 +325,6 @@ export type ColorOption = {
           };
 };
 
-/** Exported only for tests */
 export function parseColorOptions(rawCssCode: string): ColorOption[] {
     const parsedCss = css.parse(rawCssCode);
 

src/test/bin/colorDecisions/index.ts

@@ -0,0 +1 @@
+import "./parseColorDecisionName.test";

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

@@ -0,0 +1,80 @@
+import { createParseColorDecisionName } from "../../../bin/css_to_ts/colorDecisions";
+import type { ParsedColorDecisionName } from "../../../bin/css_to_ts/colorDecisions";
+import { assert } from "tsafe/assert";
+import { same } from "evt/tools/inDepth/same";
+
+console.log(`Running test ${__filename}`);
+
+const colorNames = ["grey", "orangeTerreBattue"];
+
+const { parseColorDecisionName } = createParseColorDecisionName({ colorNames });
+
+{
+    const expected: ParsedColorDecisionName = {
+        "context": "background",
+        "usage": "default",
+        "variant": undefined,
+        "colorName": "grey",
+        "state": "hover"
+    };
+
+    const got = parseColorDecisionName("--background-default-grey-hover");
+
+    assert(same(got, expected));
+}
+
+{
+    const expected: ParsedColorDecisionName = {
+        "context": "background",
+        "usage": "default",
+        "variant": undefined,
+        "colorName": "grey",
+        "state": undefined
+    };
+
+    const got = parseColorDecisionName("--background-default-grey");
+
+    assert(same(got, expected));
+}
+
+{
+    const expected: ParsedColorDecisionName = {
+        "context": "border",
+        "usage": "action",
+        "variant": "low",
+        "colorName": "orange-terre-battue",
+        "state": undefined
+    };
+
+    const got = parseColorDecisionName("--border-action-low-orange-terre-battue");
+
+    assert(same(got, expected));
+}
+
+{
+    const expected: ParsedColorDecisionName = {
+        "context": "background",
+        "usage": "altRaised",
+        "variant": undefined,
+        "colorName": "grey",
+        "state": "hover"
+    };
+
+    const got = parseColorDecisionName("--background-alt-raised-grey-hover");
+
+    assert(same(got, expected));
+}
+
+{
+    const expected: ParsedColorDecisionName = {
+        "context": "background",
+        "usage": "contrastOverlap",
+        "variant": undefined,
+        "colorName": "grey",
+        "state": undefined
+    };
+
+    const got = parseColorDecisionName("--background-contrast-overlap-grey");
+
+    assert(same(got, expected));
+}

src/test/bin/main.ts

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