clava 0.1.19 → 0.2.1

package/tests/class-style-test.ts

@@ -0,0 +1,341 @@
+import { describe, expect, expectTypeOf, test } from "vitest";
+import type {
+  HTMLCSSProperties,
+  JSXCSSProperties,
+  StyleClassProps,
+  StyleValue,
+} from "../src/types.ts";
+import {
+  CONFIGS,
+  assertDefaultProps,
+  assertHTMLObjProps,
+  assertHTMLProps,
+  assertJSXProps,
+  createCVFromConfig,
+  getConfigDescription,
+  getConfigMode,
+  getConfigTransformClass,
+  getModeComponent,
+  getStyleClass,
+} from "./_utils.ts";
+
+for (const config of [CONFIGS.default, CONFIGS.uppercase]) {
+  const mode = getConfigMode(config);
+  const cv = createCVFromConfig(config);
+  const cls = getConfigTransformClass(config);
+
+  describe(getConfigDescription(config), () => {
+    test("style has correct shape for mode", () => {
+      const component = getModeComponent(
+        mode,
+        cv({ class: "base", style: { backgroundColor: "red" } }),
+      );
+      const props = component();
+      assertDefaultProps(props);
+      expect(props).not.toHaveProperty("className");
+      expect(props.class).toBe(cls("base"));
+      expect(props.style.backgroundColor).toBe("red");
+      expectTypeOf(props).toEqualTypeOf<StyleClassProps>();
+      expectTypeOf(props.style).toEqualTypeOf<StyleValue>();
+    });
+
+    test("no argument still returns normalized shape", () => {
+      const component = getModeComponent(mode, cv());
+      const props = component();
+      assertDefaultProps(props);
+      expect(props).not.toHaveProperty("className");
+      expect(props.class).toBe("");
+      expect(props.style).toEqual({});
+      expectTypeOf(props).toEqualTypeOf<StyleClassProps>();
+      expectTypeOf(props.style).toEqualTypeOf<StyleValue>();
+    });
+  });
+}
+
+for (const config of [CONFIGS.jsx]) {
+  const mode = getConfigMode(config);
+  const cv = createCVFromConfig(config);
+  const cls = getConfigTransformClass(config);
+
+  describe(getConfigDescription(config), () => {
+    test("style has correct shape for mode", () => {
+      const component = getModeComponent(
+        mode,
+        cv({ class: "base", style: { backgroundColor: "red" } }),
+      );
+      const props = component();
+      assertJSXProps(props);
+      expect(props).not.toHaveProperty("class");
+      expect(props.className).toBe(cls("base"));
+      expect(props.style.backgroundColor).toBe("red");
+      expectTypeOf(props.style).toEqualTypeOf<JSXCSSProperties>();
+    });
+
+    test("no argument still returns jsx shape", () => {
+      const component = getModeComponent(mode, cv());
+      const props = component();
+      assertJSXProps(props);
+      expect(props).not.toHaveProperty("class");
+      expect(props.className).toBe("");
+      expect(props.style).toEqual({});
+      expectTypeOf(props.style).toEqualTypeOf<JSXCSSProperties>();
+    });
+  });
+}
+
+for (const config of [CONFIGS.html]) {
+  const mode = getConfigMode(config);
+  const cv = createCVFromConfig(config);
+  const cls = getConfigTransformClass(config);
+
+  describe(getConfigDescription(config), () => {
+    test("style has correct shape for mode", () => {
+      const component = getModeComponent(
+        mode,
+        cv({ class: "base", style: { backgroundColor: "red" } }),
+      );
+      const props = component();
+      assertHTMLProps(props);
+      expect(props).not.toHaveProperty("className");
+      expect(props.class).toBe(cls("base"));
+      expect(props.style).toBe("background-color: red;");
+    });
+
+    test("no argument still returns html shape", () => {
+      const component = getModeComponent(mode, cv());
+      const props = component();
+      assertHTMLProps(props);
+      expect(props).not.toHaveProperty("className");
+      expect(props.class).toBe("");
+      expect(props.style).toBe("");
+    });
+  });
+}
+
+for (const config of [CONFIGS.htmlObj]) {
+  const mode = getConfigMode(config);
+  const cv = createCVFromConfig(config);
+  const cls = getConfigTransformClass(config);
+
+  describe(getConfigDescription(config), () => {
+    test("style has correct shape for mode", () => {
+      const component = getModeComponent(
+        mode,
+        cv({ class: "base", style: { backgroundColor: "red" } }),
+      );
+      const props = component();
+      assertHTMLObjProps(props);
+      expect(props).not.toHaveProperty("className");
+      expect(props.class).toBe(cls("base"));
+      expect(props.style["background-color"]).toBe("red");
+      expectTypeOf(props.style).toEqualTypeOf<HTMLCSSProperties>();
+    });
+
+    test("no argument still returns htmlObj shape", () => {
+      const component = getModeComponent(mode, cv());
+      const props = component();
+      assertHTMLObjProps(props);
+      expect(props).not.toHaveProperty("className");
+      expect(props.class).toBe("");
+      expect(props.style).toEqual({});
+      expectTypeOf(props.style).toEqualTypeOf<HTMLCSSProperties>();
+    });
+  });
+}
+
+for (const config of Object.values(CONFIGS)) {
+  const mode = getConfigMode(config);
+  const cv = createCVFromConfig(config);
+  const cls = getConfigTransformClass(config);
+
+  describe(getConfigDescription(config), () => {
+    test("no argument", () => {
+      const component = getModeComponent(mode, cv());
+      const props = component();
+      expect(getStyleClass(props)).toEqual({ class: "" });
+    });
+
+    test("null class", () => {
+      const component = getModeComponent(mode, cv({ class: null }));
+      const props = component();
+      expect(getStyleClass(props)).toEqual({ class: "" });
+    });
+
+    test("empty array class", () => {
+      const component = getModeComponent(mode, cv({ class: [] }));
+      const props = component();
+      expect(getStyleClass(props)).toEqual({ class: "" });
+    });
+
+    test("string class", () => {
+      const component = getModeComponent(mode, cv({ class: "foo bar" }));
+      const props = component();
+      expect(getStyleClass(props)).toEqual({ class: cls("foo bar") });
+    });
+
+    test("nested array class", () => {
+      const component = getModeComponent(
+        mode,
+        cv({ class: ["foo", ["bar", ["baz"]]] }),
+      );
+      const props = component();
+      expect(getStyleClass(props)).toEqual({ class: cls("foo bar baz") });
+    });
+
+    test("nested array class with falsy values", () => {
+      const component = getModeComponent(
+        mode,
+        cv({ class: ["foo", null, ["bar", false, ["baz", 0]]] }),
+      );
+      const props = component();
+      expect(getStyleClass(props)).toEqual({ class: cls("foo bar baz") });
+    });
+
+    test("merge class from props", () => {
+      const component = getModeComponent(mode, cv({ class: "foo bar" }));
+      const props = component({ class: "baz qux" });
+      expect(getStyleClass(props)).toEqual({ class: cls("foo bar baz qux") });
+    });
+
+    test("merge className from props", () => {
+      const component = getModeComponent(mode, cv({ class: "foo bar" }));
+      const props = component({ className: "baz qux" });
+      expect(getStyleClass(props)).toEqual({ class: cls("foo bar baz qux") });
+    });
+
+    test("merge class and className from props", () => {
+      const component = getModeComponent(mode, cv({ class: "foo bar" }));
+      const props = component({ class: "baz qux", className: "quux corge" });
+      expect(getStyleClass(props)).toEqual({
+        class: cls("foo bar baz qux quux corge"),
+      });
+    });
+
+    test("merge null class from props", () => {
+      const component = getModeComponent(mode, cv({ class: "foo bar" }));
+      const props = component({ class: null });
+      expect(getStyleClass(props)).toEqual({ class: cls("foo bar") });
+    });
+
+    test("merge null className from props", () => {
+      const component = getModeComponent(mode, cv({ class: "foo bar" }));
+      const props = component({ className: null });
+      expect(getStyleClass(props)).toEqual({ class: cls("foo bar") });
+    });
+
+    test("empty style", () => {
+      const component = getModeComponent(mode, cv({ style: {} }));
+      const props = component();
+      expect(getStyleClass(props)).toEqual({ class: "" });
+    });
+
+    test("style with properties", () => {
+      const component = getModeComponent(
+        mode,
+        cv({ style: { backgroundColor: "red", fontSize: "16px" } }),
+      );
+      const props = component();
+      expect(getStyleClass(props)).toEqual({
+        class: "",
+        backgroundColor: "red",
+        fontSize: "16px",
+      });
+    });
+
+    test("style does not accept numbers", () => {
+      const component = getModeComponent(
+        mode,
+        cv({
+          style: {
+            backgroundColor: "red",
+            // @ts-expect-error
+            fontSize: 16,
+          },
+        }),
+      );
+      const props = component();
+      expect(getStyleClass(props)).toEqual({
+        class: "",
+        backgroundColor: "red",
+        fontSize: expect.toBeOneOf(["16", "16px"]),
+      });
+    });
+
+    test("style with custom property", () => {
+      const component = getModeComponent(
+        mode,
+        cv({ style: { backgroundColor: "red", "--custom-var": "value" } }),
+      );
+      const props = component();
+      expect(getStyleClass(props)).toEqual({
+        class: "",
+        backgroundColor: "red",
+        "--custom-var": "value",
+      });
+    });
+
+    test("merge style from props", () => {
+      const component = getModeComponent(
+        mode,
+        cv({ style: { backgroundColor: "red" } }),
+      );
+      const props = component({ style: { fontSize: "16px" } });
+      expect(getStyleClass(props)).toEqual({
+        class: "",
+        backgroundColor: "red",
+        fontSize: "16px",
+      });
+    });
+
+    test("merge jsx style from props", () => {
+      const component = getModeComponent(
+        mode,
+        cv({ style: { backgroundColor: "red" } }),
+      );
+      const props = component({ style: { fontSize: 16 } });
+      expect(getStyleClass(props)).toEqual({
+        class: "",
+        backgroundColor: "red",
+        fontSize: "16px",
+      });
+    });
+
+    test("merge html style from props", () => {
+      const component = getModeComponent(
+        mode,
+        cv({ style: { backgroundColor: "red" } }),
+      );
+      const props = component({ style: "font-size: 16px" });
+      expect(getStyleClass(props)).toEqual({
+        class: "",
+        backgroundColor: "red",
+        fontSize: "16px",
+      });
+    });
+
+    test("merge htmlObj style from props", () => {
+      const component = getModeComponent(
+        mode,
+        cv({ style: { backgroundColor: "red" } }),
+      );
+      const props = component({ style: { "font-size": 16 } });
+      expect(getStyleClass(props)).toEqual({
+        class: "",
+        backgroundColor: "red",
+        fontSize: "16px",
+      });
+    });
+
+    test("merge null style from props", () => {
+      const component = getModeComponent(
+        mode,
+        cv({ style: { backgroundColor: "red" } }),
+      );
+      const props = component({ style: null });
+      expect(getStyleClass(props)).toEqual({
+        class: "",
+        backgroundColor: "red",
+      });
+    });
+  });
+}

package/tests/component-api-test.ts

@@ -0,0 +1,214 @@
+import { describe, expect, expectTypeOf, test } from "vitest";
+import { type Variant, cv as cvBase } from "../src/index.ts";
+import {
+  CONFIGS,
+  createCVFromConfig,
+  getConfigDescription,
+  getConfigMode,
+  getConfigTransformClass,
+  getExpectedPropsKeys,
+  getModeComponent,
+  getStyle,
+} from "./_utils.ts";
+
+for (const config of Object.values(CONFIGS)) {
+  const mode = getConfigMode(config);
+  const cv = createCVFromConfig(config);
+  const cls = getConfigTransformClass(config);
+
+  describe(getConfigDescription(config), () => {
+    test("class method", () => {
+      const component = getModeComponent(
+        mode,
+        cv({ class: "foo", variants: { size: { sm: "sm", lg: "lg" } } }),
+      );
+      const className = component.class({ size: "lg" });
+      expect(className).toBe(cls("foo lg"));
+    });
+
+    test("style method", () => {
+      const component = getModeComponent(
+        mode,
+        cv({ style: { backgroundColor: "red" } }),
+      );
+      const style = component.style();
+      expect(getStyle({ style })).toEqual({ backgroundColor: "red" });
+    });
+
+    test("getVariants returns variant values", () => {
+      const component = getModeComponent(
+        mode,
+        cv({
+          variants: { size: { sm: "sm", lg: "lg" } },
+          defaultVariants: { size: "sm" },
+        }),
+      );
+      const variants = component.getVariants({ size: "lg" });
+      expect(variants).toEqual({ size: "lg" });
+    });
+
+    test("getVariants returns default variants", () => {
+      const component = getModeComponent(
+        mode,
+        cv({
+          variants: { size: { sm: "sm", lg: "lg" } },
+          defaultVariants: { size: "sm" },
+        }),
+      );
+      const variants = component.getVariants();
+      expect(variants).toEqual({ size: "sm" });
+    });
+
+    test("getVariants returns variants set by computed setVariants", () => {
+      const component = getModeComponent(
+        mode,
+        cv({
+          variants: {
+            size: { sm: "sm", lg: "lg" },
+            color: { red: "red", blue: "blue" },
+          },
+          computed: ({ variants, setVariants }) => {
+            if (variants.size === "lg") {
+              setVariants({ color: "red" });
+            }
+          },
+        }),
+      );
+      const variants = component.getVariants({ size: "lg" });
+      expect(variants).toEqual({ size: "lg", color: "red" });
+    });
+
+    test("getVariants returns variants set by computed setDefaultVariants", () => {
+      const component = getModeComponent(
+        mode,
+        cv({
+          variants: {
+            size: { sm: "sm", lg: "lg" },
+            color: { red: "red", blue: "blue" },
+          },
+          computed: ({ variants, setDefaultVariants }) => {
+            if (variants.size === "lg") {
+              setDefaultVariants({ color: "blue" });
+            }
+          },
+        }),
+      );
+      const variants = component.getVariants({ size: "lg" });
+      expect(variants).toEqual({ size: "lg", color: "blue" });
+    });
+
+    test("getVariants setDefaultVariants does not override props", () => {
+      const component = getModeComponent(
+        mode,
+        cv({
+          variants: {
+            size: { sm: "sm", lg: "lg" },
+            color: { red: "red", blue: "blue" },
+          },
+          computed: ({ setDefaultVariants }) => {
+            setDefaultVariants({ color: "blue" });
+          },
+        }),
+      );
+      const variants = component.getVariants({ color: "red" });
+      expect(variants).toEqual({ color: "red" });
+    });
+
+    test("getVariants setVariants overrides props", () => {
+      const component = getModeComponent(
+        mode,
+        cv({
+          variants: {
+            size: { sm: "sm", lg: "lg" },
+            color: { red: "red", blue: "blue" },
+          },
+          computed: ({ setVariants }) => {
+            setVariants({ color: "blue" });
+          },
+        }),
+      );
+      const variants = component.getVariants({ color: "red" });
+      expect(variants).toEqual({ color: "blue" });
+    });
+
+    test("keys returns props keys", () => {
+      const component = getModeComponent(
+        mode,
+        cv({ variants: { size: { sm: "sm" }, color: { red: "red" } } }),
+      );
+      expectTypeOf(component.keys).toExtend<
+        ("class" | "className" | "style" | "size" | "color")[]
+      >();
+      expect(component.keys).toEqual(
+        getExpectedPropsKeys(config, "size", "color"),
+      );
+    });
+
+    test("variantKeys property", () => {
+      const component = getModeComponent(
+        mode,
+        cv({
+          variants: { size: { sm: "sm" }, color: { red: "red" } },
+        }),
+      );
+      expectTypeOf(component.variantKeys).toEqualTypeOf<("size" | "color")[]>();
+      expect(component.variantKeys).toEqual(["size", "color"]);
+    });
+
+    test("propKeys property", () => {
+      const component = getModeComponent(
+        mode,
+        cv({ variants: { size: { sm: "sm" }, color: { red: "red" } } }),
+      );
+      expectTypeOf(component.propKeys).toExtend<
+        ("class" | "className" | "style" | "size" | "color")[]
+      >();
+      expect(component.propKeys).toEqual(
+        getExpectedPropsKeys(config, "size", "color"),
+      );
+    });
+
+    test("propKeys on different modes", () => {
+      const component = getModeComponent(
+        mode,
+        cv({ variants: { size: { sm: "sm" } } }),
+      );
+      expect(component.propKeys).toEqual(getExpectedPropsKeys(config, "size"));
+    });
+  });
+}
+
+describe("Variant utility type", () => {
+  test("matches variant keys from another component", () => {
+    const base = cvBase({
+      variants: { foo: { sm: "foo-sm", lg: "foo-lg" } },
+    });
+    const component = cvBase({
+      extend: [base],
+      variants: {
+        bar: {
+          sm: "bar-sm",
+          lg: "bar-lg",
+        } satisfies Variant<typeof base, "foo">,
+      },
+    });
+    expect(component({ bar: "sm" }).class).toContain("bar-sm");
+  });
+
+  test("rejects invalid variant keys", () => {
+    const base = cvBase({
+      variants: { foo: { sm: "foo-sm", lg: "foo-lg" } },
+    });
+    cvBase({
+      extend: [base],
+      variants: {
+        bar: {
+          sm: "bar-sm",
+          lg: "bar-lg",
+          // @ts-expect-error
+          xl: "bar-xl",
+        } satisfies Variant<typeof base, "foo">,
+      },
+    });
+  });
+});