clava 0.1.19 → 0.2.1

package/tests/computed-variants-test.ts

@@ -0,0 +1,298 @@
+import { describe, expect, test } from "vitest";
+import {
+  CONFIGS,
+  createCVFromConfig,
+  getConfigDescription,
+  getConfigMode,
+  getConfigTransformClass,
+  getModeComponent,
+  getStyleClass,
+} 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("computedVariants", () => {
+      const component = getModeComponent(
+        mode,
+        cv({
+          computedVariants: {
+            size: (value: "sm" | "lg") => (value === "sm" ? "small" : "large"),
+          },
+        }),
+      );
+      const props = component({ size: "lg" });
+      expect(getStyleClass(props)).toEqual({ class: cls("large") });
+    });
+
+    test("computedVariants with style", () => {
+      const component = getModeComponent(
+        mode,
+        cv({
+          computedVariants: {
+            size: (value: "sm" | "lg") => ({
+              class: value === "sm" ? "small" : "large",
+              style: { fontSize: value === "sm" ? "12px" : "16px" },
+            }),
+          },
+        }),
+      );
+      const props = component({ size: "lg" });
+      expect(getStyleClass(props)).toEqual({
+        class: cls("large"),
+        fontSize: "16px",
+      });
+    });
+
+    test("computedVariants can return another component default result", () => {
+      const button = cv({
+        variants: {
+          size: {
+            sm: { class: "button-sm", style: { fontSize: "12px" } },
+            lg: { class: "button-lg", style: { fontSize: "16px" } },
+          },
+        },
+      });
+      const component = getModeComponent(
+        mode,
+        cv({
+          computedVariants: {
+            size: (value: "sm" | "lg") => {
+              return button({ size: value });
+            },
+          },
+        }),
+      );
+      const props = component({ size: "lg" });
+      expect(getStyleClass(props)).toEqual({
+        class: cls("button-lg"),
+        fontSize: "16px",
+      });
+    });
+
+    test("computedVariants overrides extended object variants", () => {
+      const base = cv({
+        variants: {
+          size: {
+            sm: { class: "base-sm", style: { fontSize: "12px" } },
+            lg: { class: "base-lg", style: { fontSize: "16px" } },
+          },
+        },
+      });
+      const component = getModeComponent(
+        mode,
+        cv({
+          extend: [base],
+          computedVariants: {
+            size: (value: "sm" | "lg") => ({
+              class: value === "sm" ? "extended-sm" : "extended-lg",
+              style: {
+                backgroundColor: value === "sm" ? "lightgray" : "gray",
+              },
+            }),
+          },
+        }),
+      );
+      const props = component({ size: "lg" });
+      expect(getStyleClass(props)).toEqual({
+        class: cls("extended-lg"),
+        backgroundColor: "gray",
+      });
+    });
+
+    test("computedVariants overrides extended computedVariants", () => {
+      const base = cv({
+        computedVariants: {
+          size: (value: "sm" | "lg") => ({
+            class: value === "sm" ? "base-sm" : "base-lg",
+            style: { fontSize: value === "sm" ? "12px" : "16px" },
+          }),
+        },
+      });
+      const component = getModeComponent(
+        mode,
+        cv({
+          extend: [base],
+          computedVariants: {
+            size: (value: "sm" | "lg") => ({
+              class: value === "sm" ? "extended-sm" : "extended-lg",
+              style: {
+                backgroundColor: value === "sm" ? "lightgray" : "gray",
+              },
+            }),
+          },
+        }),
+      );
+      const props = component({ size: "lg" });
+      expect(getStyleClass(props)).toEqual({
+        class: cls("extended-lg"),
+        backgroundColor: "gray",
+      });
+    });
+
+    test("computedVariants style does not accept numbers", () => {
+      const component = getModeComponent(
+        mode,
+        cv({
+          computedVariants: {
+            // @ts-expect-error
+            size: (value: "sm" | "lg") => ({
+              class: value === "sm" ? "small" : "large",
+              style: { fontSize: value === "sm" ? 12 : 16 },
+            }),
+          },
+        }),
+      );
+      const props = component({ size: "lg" });
+      expect(getStyleClass(props)).toEqual({
+        class: cls("large"),
+        fontSize: expect.toBeOneOf(["16", "16px"]),
+      });
+    });
+
+    test("computedVariants changes extended boolean variant to string", () => {
+      const base = cv({
+        variants: { disabled: { true: "disabled", false: "enabled" } },
+      });
+      const component = getModeComponent(
+        mode,
+        cv({
+          extend: [base],
+          computedVariants: {
+            disabled: (value: "yes" | "no" | "maybe") => {
+              if (value === "yes") return "state-disabled";
+              if (value === "no") return "state-enabled";
+              return "state-pending";
+            },
+          },
+        }),
+      );
+      component({
+        // @ts-expect-error
+        disabled: true,
+      });
+      const props = component({ disabled: "maybe" });
+      expect(getStyleClass(props)).toEqual({ class: cls("state-pending") });
+    });
+
+    test("computedVariants changes extended string variant to boolean", () => {
+      const base = cv({ variants: { size: { sm: "sm", md: "md", lg: "lg" } } });
+      const component = getModeComponent(
+        mode,
+        cv({
+          extend: [base],
+          computedVariants: {
+            size: (value: boolean) => (value ? "size-large" : "size-small"),
+          },
+        }),
+      );
+      component({
+        // @ts-expect-error
+        size: "sm",
+      });
+      const propsTrue = component({ size: true });
+      expect(getStyleClass(propsTrue)).toEqual({ class: cls("size-large") });
+      const propsFalse = component({ size: false });
+      expect(getStyleClass(propsFalse)).toEqual({ class: cls("size-small") });
+    });
+
+    test("computedVariants with number type", () => {
+      const component = getModeComponent(
+        mode,
+        cv({
+          computedVariants: {
+            columns: (value: number) => ({
+              class: `grid-cols-${value}`,
+              style: { "--grid-columns": `${value}` },
+            }),
+          },
+        }),
+      );
+      const props = component({ columns: 3 });
+      expect(getStyleClass(props)).toEqual({
+        class: cls("grid-cols-3"),
+        "--grid-columns": "3",
+      });
+    });
+
+    test("computedVariants with number type returns dynamic styles", () => {
+      const component = getModeComponent(
+        mode,
+        cv({
+          computedVariants: {
+            gap: (value: number) => ({
+              style: { "--gap": `${value * 4}px` },
+            }),
+            padding: (value: number) => ({
+              style: {
+                "--padding-x": `${value}px`,
+                "--padding-y": `${value * 0.5}px`,
+              },
+            }),
+          },
+        }),
+      );
+      const props = component({ gap: 4, padding: 16 });
+      expect(getStyleClass(props)).toEqual({
+        class: "",
+        "--gap": "16px",
+        "--padding-x": "16px",
+        "--padding-y": "8px",
+      });
+    });
+
+    test("computedVariants with nullable type", () => {
+      const component = getModeComponent(
+        mode,
+        cv({
+          computedVariants: {
+            color: (value: string | null) => ({
+              class: value ? `color-${value}` : "color-default",
+              style: { "--color": value ?? "inherit" },
+            }),
+          },
+        }),
+      );
+      const propsWithValue = component({ color: "red" });
+      expect(getStyleClass(propsWithValue)).toEqual({
+        class: cls("color-red"),
+        "--color": "red",
+      });
+      const propsWithNull = component({ color: null });
+      expect(getStyleClass(propsWithNull)).toEqual({
+        class: cls("color-default"),
+        "--color": "inherit",
+      });
+    });
+
+    test("computedVariants changes extended variant from string to number", () => {
+      const base = cv({
+        variants: { size: { sm: "text-sm", md: "text-md", lg: "text-lg" } },
+      });
+      const component = getModeComponent(
+        mode,
+        cv({
+          extend: [base],
+          computedVariants: {
+            size: (value: number) => ({
+              class: "text-custom",
+              style: { fontSize: `${value}px` },
+            }),
+          },
+        }),
+      );
+      component({
+        // @ts-expect-error
+        size: "sm",
+      });
+      const props = component({ size: 18 });
+      expect(getStyleClass(props)).toEqual({
+        class: cls("text-custom"),
+        fontSize: "18px",
+      });
+    });
+  });
+}

package/tests/extend-test.ts

@@ -0,0 +1,301 @@
+import { describe, expect, test } from "vitest";
+import {
+  CONFIGS,
+  createCVFromConfig,
+  getConfigDescription,
+  getConfigMode,
+  getConfigTransformClass,
+  getModeComponent,
+  getStyleClass,
+} 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("extend single component", () => {
+      const base = cv({ class: "base", variants: { size: { sm: "sm" } } });
+      const component = getModeComponent(
+        mode,
+        cv({ extend: [base], class: "extended" }),
+      );
+      const props = component({ size: "sm" });
+      expect(getStyleClass(props)).toEqual({ class: cls("base extended sm") });
+    });
+
+    test("extend multiple components", () => {
+      const base1 = cv({ class: "base1" });
+      const base2 = cv({ class: "base2" });
+      const component = getModeComponent(
+        mode,
+        cv({ extend: [base1, base2], class: "extended" }),
+      );
+      const props = component();
+      expect(getStyleClass(props)).toEqual({
+        class: cls("base1 base2 extended"),
+      });
+    });
+
+    test("extend with variant merging", () => {
+      const base = cv({ variants: { size: { sm: "base-sm", lg: "base-lg" } } });
+      const component = getModeComponent(
+        mode,
+        cv({ extend: [base], variants: { size: { sm: "extended-sm" } } }),
+      );
+      const props = component({ size: "sm" });
+      expect(getStyleClass(props)).toEqual({
+        class: cls("base-sm extended-sm"),
+      });
+    });
+
+    test("extend with variant merging setting base variant", () => {
+      const base = cv({ variants: { size: { sm: "base-sm", lg: "base-lg" } } });
+      const component = getModeComponent(
+        mode,
+        cv({
+          extend: [base],
+          variants: { size: { sm: "extended-sm" } },
+        }),
+      );
+      const props = component({ size: "lg" });
+      expect(getStyleClass(props)).toEqual({ class: cls("base-lg") });
+    });
+
+    test("extend can disable whole variant with null", () => {
+      const base = cv({
+        variants: { size: { sm: "base-sm", lg: "base-lg" } },
+        defaultVariants: { size: "sm" },
+      });
+      const component = getModeComponent(
+        mode,
+        cv({
+          extend: [base],
+          variants: { size: null },
+          defaultVariants: {
+            // @ts-expect-error disabled variant cannot be set
+            size:
+              // no error
+              "lg",
+          },
+        }),
+      );
+      const props = component({
+        // @ts-expect-error disabled variant cannot be set
+        size:
+          // no error
+          "lg",
+      });
+      expect(getStyleClass(props)).toEqual({ class: "" });
+    });
+
+    test("extend can disable variant value with null", () => {
+      const base = cv({
+        variants: { size: { sm: "base-sm", lg: "base-lg" } },
+        defaultVariants: { size: "sm" },
+      });
+      const component = getModeComponent(
+        mode,
+        cv({
+          extend: [base],
+          variants: { size: { sm: null } },
+          defaultVariants: {
+            // @ts-expect-error disabled variant value cannot be set
+            size:
+              // no error
+              "sm",
+          },
+        }),
+      );
+      const disabledProps = component({
+        // @ts-expect-error disabled variant value cannot be set
+        size:
+          // no error
+          "sm",
+      });
+      expect(getStyleClass(disabledProps)).toEqual({ class: "" });
+      const enabledProps = component({ size: "lg" });
+      expect(getStyleClass(enabledProps)).toEqual({ class: cls("base-lg") });
+    });
+
+    test("extend disabled variant value accepts valid defaultVariants", () => {
+      const base = cv({
+        variants: {
+          size: {
+            sm: { class: "base-sm", style: { fontSize: "12px" } },
+            lg: { class: "base-lg", style: { fontSize: "16px" } },
+          },
+        },
+      });
+      const component = getModeComponent(
+        mode,
+        cv({
+          extend: [base],
+          variants: { size: { sm: null } },
+          defaultVariants: { size: "lg" },
+        }),
+      );
+      const props = component();
+      expect(getStyleClass(props)).toEqual({
+        class: cls("base-lg"),
+        fontSize: "16px",
+      });
+    });
+
+    test("extend disabled variant value with computed setDefaultVariants", () => {
+      const base = cv({
+        variants: {
+          size: {
+            sm: { class: "base-sm", style: { fontSize: "12px" } },
+            lg: { class: "base-lg", style: { fontSize: "16px" } },
+          },
+        },
+      });
+      const validComponent = getModeComponent(
+        mode,
+        cv({
+          extend: [base],
+          variants: { size: { sm: null } },
+          computed: ({ setDefaultVariants }) => {
+            setDefaultVariants({ size: "lg" });
+          },
+        }),
+      );
+      expect(getStyleClass(validComponent())).toEqual({
+        class: cls("base-lg"),
+        fontSize: "16px",
+      });
+
+      const invalidComponent = getModeComponent(
+        mode,
+        cv({
+          extend: [base],
+          variants: { size: { sm: null } },
+          computed: ({ setDefaultVariants }) => {
+            setDefaultVariants({
+              // @ts-expect-error disabled variant value cannot be set
+              size:
+                // no error
+                "sm",
+            });
+          },
+        }),
+      );
+      expect(getStyleClass(invalidComponent())).toEqual({ class: "" });
+    });
+
+    test("extend disabled variant value with computed setVariants", () => {
+      const base = cv({
+        variants: {
+          size: {
+            sm: { class: "base-sm", style: { fontSize: "12px" } },
+            lg: { class: "base-lg", style: { fontSize: "16px" } },
+          },
+        },
+      });
+      const validComponent = getModeComponent(
+        mode,
+        cv({
+          extend: [base],
+          variants: { size: { sm: null } },
+          computed: ({ setVariants }) => {
+            setVariants({ size: "lg" });
+          },
+        }),
+      );
+      expect(getStyleClass(validComponent())).toEqual({
+        class: cls("base-lg"),
+        fontSize: "16px",
+      });
+
+      const invalidComponent = getModeComponent(
+        mode,
+        cv({
+          extend: [base],
+          variants: { size: { sm: null } },
+          computed: ({ setVariants }) => {
+            setVariants({
+              // @ts-expect-error disabled variant value cannot be set
+              size:
+                // no error
+                "sm",
+            });
+          },
+        }),
+      );
+      expect(getStyleClass(invalidComponent())).toEqual({ class: "" });
+    });
+
+    test("extend inherits defaultVariants", () => {
+      const base = cv({
+        variants: { size: { sm: "sm", lg: "lg" } },
+        defaultVariants: { size: "sm" },
+      });
+      const component = getModeComponent(mode, cv({ extend: [base] }));
+      const props = component();
+      expect(getStyleClass(props)).toEqual({ class: cls("sm") });
+    });
+
+    test("extend override defaultVariants", () => {
+      const base = cv({
+        variants: { size: { sm: "sm", lg: "lg" } },
+        defaultVariants: { size: "sm" },
+      });
+      const component = getModeComponent(
+        mode,
+        cv({ extend: [base], defaultVariants: { size: "lg" } }),
+      );
+      const props = component();
+      expect(getStyleClass(props)).toEqual({ class: cls("lg") });
+    });
+
+    test("extend jsx modal component preserves style", () => {
+      const base = cv({
+        class: "base",
+        style: { backgroundColor: "red" },
+      });
+      const component = getModeComponent(
+        mode,
+        cv({ extend: [base.jsx], class: "extended" }),
+      );
+      const props = component();
+      expect(getStyleClass(props)).toEqual({
+        class: cls("base extended"),
+        backgroundColor: "red",
+      });
+    });
+
+    test("extend html modal component preserves style", () => {
+      const base = cv({
+        class: "base",
+        style: { backgroundColor: "red" },
+      });
+      const component = getModeComponent(
+        mode,
+        cv({ extend: [base.html], class: "extended" }),
+      );
+      const props = component();
+      expect(getStyleClass(props)).toEqual({
+        class: cls("base extended"),
+        backgroundColor: "red",
+      });
+    });
+
+    test("extend htmlObj modal component preserves style", () => {
+      const base = cv({
+        class: "base",
+        style: { backgroundColor: "red" },
+      });
+      const component = getModeComponent(
+        mode,
+        cv({ extend: [base.htmlObj], class: "extended" }),
+      );
+      const props = component();
+      expect(getStyleClass(props)).toEqual({
+        class: cls("base extended"),
+        backgroundColor: "red",
+      });
+    });
+  });
+}

package/{src/test-language-service.ts → tests/language-service-test.ts}

@@ -10,8 +10,9 @@ import { fileURLToPath } from "node:url";
 import ts from "typescript";
 import { afterEach, describe, expect, test } from "vitest";
 
-const sourceDir = dirname(fileURLToPath(import.meta.url));
-const packageDir = resolve(sourceDir, "..");
+const testDir = dirname(fileURLToPath(import.meta.url));
+const packageDir = resolve(testDir, "..");
+const sourceDir = resolve(packageDir, "src");
 const workspaceDir = resolve(packageDir, "../..");
 const tempDirs: string[] = [];
 
@@ -26,6 +27,9 @@ function createCompilerOptions(): ts.CompilerOptions {
     target: ts.ScriptTarget.ES2020,
     module: ts.ModuleKind.NodeNext,
     moduleResolution: ts.ModuleResolutionKind.NodeNext,
+    // Match the repo's Node-aware TS environment so language-service
+    // navigation in the fixture reflects real editor behavior.
+    types: ["node"],
     allowImportingTsExtensions: true,
     strict: true,
     skipLibCheck: true,

package/{src/test-react.ts → tests/react-test.ts}

@@ -1,7 +1,7 @@
 import type { CSSProperties, ComponentProps } from "react";
 import { expect, expectTypeOf, test } from "vitest";
-import { type VariantProps, cv, splitProps } from "./index.ts";
-import type { JSXProps } from "./types.ts";
+import { type VariantProps, cv, splitProps } from "../src/index.ts";
+import type { JSXProps } from "../src/types.ts";
 
 test("splitProps", () => {
   const component = cv({ variants: { size: { sm: "sm", md: "md" } } });
@@ -30,7 +30,7 @@ test("component props", () => {
   const component = cv({
     style: { fontSize: "16px" },
     variants: { size: { sm: "sm", md: "md" } },
-  });
+  }).jsx;
   const props = component({ size: "sm", className: "custom" });
   expectTypeOf(props).toEqualTypeOf<JSXProps>();
   expect(props).toEqual({

package/{src/test-solid.ts → tests/solid-test.ts}

@@ -1,9 +1,7 @@
 import type { ComponentProps, JSX } from "solid-js";
 import { expect, expectTypeOf, test } from "vitest";
-import { type VariantProps, create, splitProps } from "./index.ts";
-import { type HTMLObjProps } from "./types.ts";
-
-const { cv } = create({ defaultMode: "htmlObj" });
+import { type VariantProps, cv, splitProps } from "../src/index.ts";
+import { type HTMLObjProps } from "../src/types.ts";
 
 test("splitProps", () => {
   const component = cv({ variants: { size: { sm: "sm", md: "md" } } });
@@ -26,7 +24,7 @@ test("component props", () => {
   const component = cv({
     style: { fontSize: "16px" },
     variants: { size: { sm: "sm", md: "md" } },
-  });
+  }).htmlObj;
   const props = component({ size: "sm", className: "custom" });
   expectTypeOf(props).toEqualTypeOf<HTMLObjProps>();
   expect(props).toEqual({