clava 0.0.2 → 0.1.1

package/src/test.ts

@@ -1,5 +1,4 @@
 import { describe, expect, expectTypeOf, test } from "vitest";
-
 import type {
   AnyComponent,
   ComponentResult,
@@ -11,8 +10,12 @@ import type {
   Component,
   StyleProperty,
 } from "./types.ts";
-
-import { cv as cvBase, create, type VariantProps } from "./index.ts";
+import {
+  cv as cvBase,
+  create,
+  splitProps,
+  type VariantProps,
+} from "./index.ts";
 import {
   htmlObjStyleToStyleValue,
   htmlStyleToStyleValue,
@@ -83,17 +86,19 @@ function getConfigDescription(config: Config) {
   return "custom";
 }
 
-function createCVFromConfig<T extends Config>(config: T) {
+function createCVFromConfig<T extends Config>(
+  config: T,
+): T["defaultMode"] & T["transformClass"] extends never
+  ? typeof cvBase
+  : ReturnType<typeof create>["cv"] {
   const defaultMode = getConfigDefaultMode(config);
   const transformClass = getConfigTransformClass(config);
   const hasTransform = "transformClass" in config && config.transformClass;
   if (!defaultMode && !hasTransform) {
     return cvBase;
   }
-  return create({
-    defaultMode: defaultMode ?? undefined,
-    transformClass,
-  }).cv;
+  const { cv } = create({ defaultMode: defaultMode ?? "jsx", transformClass });
+  return cv as any;
 }
 
 function getModalComponent<
@@ -1033,6 +1038,63 @@ for (const config of Object.values(CONFIGS)) {
       expect(getStyleClass(props)).toEqual({ class: cls("lg blue") });
     });
 
+    test("computed setDefaultVariants overrides defaultVariants", () => {
+      const component = getModalComponent(
+        mode,
+        cv({
+          variants: {
+            size: { sm: "sm", lg: "lg" },
+            color: { red: "red", blue: "blue" },
+          },
+          defaultVariants: { size: "sm", color: "red" },
+          computed: ({ setDefaultVariants }) => {
+            setDefaultVariants({ color: "blue" });
+          },
+        }),
+      );
+      const props = component();
+      expect(getStyleClass(props)).toEqual({ class: cls("sm blue") });
+    });
+
+    test("computed setDefaultVariants overrides extended defaultVariants", () => {
+      const base = cv({
+        variants: { color: { red: "red", blue: "blue" } },
+        defaultVariants: { color: "red" },
+      });
+      const component = getModalComponent(
+        mode,
+        cv({
+          extend: [base],
+          variants: { size: { sm: "sm", lg: "lg" } },
+          defaultVariants: { size: "sm" },
+          computed: ({ setDefaultVariants }) => {
+            setDefaultVariants({ color: "blue" });
+          },
+        }),
+      );
+      const props = component();
+      expect(getStyleClass(props)).toEqual({ class: cls("blue sm") });
+    });
+
+    test("computed setDefaultVariants overrides child defaultVariants", () => {
+      const base = cv({
+        variants: { size: { sm: "sm", lg: "lg" } },
+      });
+      const component = getModalComponent(
+        mode,
+        cv({
+          extend: [base],
+          variants: { color: { red: "red", blue: "blue" } },
+          defaultVariants: { size: "sm", color: "red" },
+          computed: ({ setDefaultVariants }) => {
+            setDefaultVariants({ size: "lg" });
+          },
+        }),
+      );
+      const props = component();
+      expect(getStyleClass(props)).toEqual({ class: cls("lg red") });
+    });
+
     test("computed with defaultVariants", () => {
       const component = getModalComponent(
         mode,
@@ -1299,7 +1361,7 @@ for (const config of Object.values(CONFIGS)) {
         style: { color: "red" },
         [classNameProp]: "extra",
       };
-      const [variantProps, otherProps] = component.splitProps(props);
+      const [variantProps, otherProps] = splitProps(props, component);
       expectTypeOf(variantProps).branded.toEqualTypeOf<
         Pick<
           HTMLProperties<typeof component>,
@@ -1327,8 +1389,10 @@ for (const config of Object.values(CONFIGS)) {
         style: "color: red;",
         [classNameProp]: "extra",
       };
-      const [variantProps, otherProps] =
-        component.onlyVariants.splitProps(props);
+      const [variantProps, otherProps] = splitProps(
+        props,
+        component.onlyVariants,
+      );
       expectTypeOf(variantProps).branded.toEqualTypeOf<{
         size?: "sm" | "lg";
       }>();
@@ -1382,7 +1446,7 @@ for (const config of Object.values(CONFIGS)) {
         id: "test",
         size: "lg",
       };
-      const [variantProps, otherProps] = component.splitProps(props);
+      const [variantProps, otherProps] = splitProps(props, component);
       expectTypeOf(variantProps).branded.toEqualTypeOf<
         Pick<
           HTMLProperties<typeof component>,
@@ -1410,8 +1474,9 @@ for (const config of Object.values(CONFIGS)) {
         [classNameProp]: "extra",
         disabled: true,
       };
-      const [variantProps, extraProps, otherProps] = component.splitProps(
+      const [variantProps, extraProps, otherProps] = splitProps(
         props,
+        component,
         ["disabled"],
       );
       expectTypeOf(variantProps).branded.toEqualTypeOf<
@@ -1451,8 +1516,9 @@ for (const config of Object.values(CONFIGS)) {
         color: "blue",
         [classNameProp]: "extra",
       };
-      const [comp1Props, comp2Props, otherProps] = component1.splitProps(
+      const [comp1Props, comp2Props, otherProps] = splitProps(
         props,
+        component1,
         component2,
       );
       expectTypeOf(comp1Props).branded.toEqualTypeOf<
@@ -1496,8 +1562,9 @@ for (const config of Object.values(CONFIGS)) {
         id: "test",
         size: "lg",
       };
-      const [comp1Props, comp2Props, otherProps] = component1.splitProps(
+      const [comp1Props, comp2Props, otherProps] = splitProps(
         props,
+        component1,
         component2,
       );
       expect(comp1Props).toEqual({ size: "lg" });
@@ -1523,8 +1590,9 @@ for (const config of Object.values(CONFIGS)) {
         style: { backgroundColor: "yellow" },
         [classNameProp]: "extra",
       };
-      const [comp1Props, comp2Props, otherProps] = component1.splitProps(
+      const [comp1Props, comp2Props, otherProps] = splitProps(
         props,
+        component1,
         component2.onlyVariants,
       );
       expectTypeOf(comp1Props).branded.toEqualTypeOf<
@@ -1562,8 +1630,12 @@ for (const config of Object.values(CONFIGS)) {
         color: "blue",
         disabled: true,
       };
-      const [comp1Props, extraProps, comp2Props, otherProps] =
-        component1.splitProps(props, ["disabled"], component2.onlyVariants);
+      const [comp1Props, extraProps, comp2Props, otherProps] = splitProps(
+        props,
+        component1,
+        ["disabled"],
+        component2.onlyVariants,
+      );
       expect(comp1Props).toEqual({ size: "lg" });
       expect(extraProps).toEqual({ disabled: true });
       expect(comp2Props).toEqual({ color: "blue" });
@@ -1584,8 +1656,9 @@ for (const config of Object.values(CONFIGS)) {
         id: "test",
         size: "lg",
       };
-      const [comp1Props, comp2Props, otherProps] = component1.splitProps(
+      const [comp1Props, comp2Props, otherProps] = splitProps(
         props,
+        component1,
         component2.onlyVariants,
       );
       expectTypeOf(comp1Props).branded.toEqualTypeOf<
@@ -1617,8 +1690,9 @@ for (const config of Object.values(CONFIGS)) {
           defaultVariants: { color: "red" },
         }),
       );
-      const [comp1Props, comp2Props, otherProps] = component1.splitProps(
+      const [comp1Props, comp2Props, otherProps] = splitProps(
         { id: "test" },
+        component1,
         component2.onlyVariants,
       );
       // Each gets its own defaults
@@ -1641,8 +1715,10 @@ for (const config of Object.values(CONFIGS)) {
         size: "lg",
         [classNameProp]: "extra",
       };
-      const [variantProps, otherProps] =
-        component.onlyVariants.splitProps(props);
+      const [variantProps, otherProps] = splitProps(
+        props,
+        component.onlyVariants,
+      );
       expect(variantProps).toEqual({
         size: "lg",
         color: "red",
@@ -1662,8 +1738,11 @@ for (const config of Object.values(CONFIGS)) {
         [classNameProp]: "extra",
         disabled: true,
       };
-      const [variantProps, extraProps, otherProps] =
-        component.onlyVariants.splitProps(props, ["disabled"]);
+      const [variantProps, extraProps, otherProps] = splitProps(
+        props,
+        component.onlyVariants,
+        ["disabled"],
+      );
       expect(variantProps).toEqual({ size: "lg" });
       expect(extraProps).toEqual({ disabled: true });
       expect(otherProps).toEqual({ id: "test", [classNameProp]: "extra" });
@@ -1692,8 +1771,11 @@ for (const config of Object.values(CONFIGS)) {
         color: "blue",
         [classNameProp]: "extra",
       };
-      const [comp1Props, comp2Props, otherProps] =
-        component1.onlyVariants.splitProps(props, component2.onlyVariants);
+      const [comp1Props, comp2Props, otherProps] = splitProps(
+        props,
+        component1.onlyVariants,
+        component2.onlyVariants,
+      );
       expect(comp1Props).toEqual({ size: "lg" });
       expect(comp2Props).toEqual({ color: "blue" });
       expect(otherProps).toEqual({ id: "test", [classNameProp]: "extra" });
@@ -1711,7 +1793,7 @@ for (const config of Object.values(CONFIGS)) {
         id: "test",
         size: "lg",
       };
-      const [variantProps, otherProps] = component.splitProps(props);
+      const [variantProps, otherProps] = splitProps(props, component);
       expectTypeOf(variantProps).branded.toEqualTypeOf<
         Pick<
           HTMLProperties<typeof component>,
@@ -1736,8 +1818,9 @@ for (const config of Object.values(CONFIGS)) {
         [classNameProp]: "extra",
         disabled: true,
       };
-      const [variantProps, extraProps, otherProps] = component.splitProps(
+      const [variantProps, extraProps, otherProps] = splitProps(
         props,
+        component,
         ["disabled"],
       );
       expect(variantProps).toEqual({
@@ -1769,8 +1852,9 @@ for (const config of Object.values(CONFIGS)) {
         color: "blue",
         [classNameProp]: "extra",
       };
-      const [comp1Props, comp2Props, otherProps] = component1.splitProps(
+      const [comp1Props, comp2Props, otherProps] = splitProps(
         props,
+        component1,
         component2,
       );
       expect(comp1Props).toEqual({
@@ -1802,8 +1886,9 @@ for (const config of Object.values(CONFIGS)) {
         id: "test",
         size: "lg",
       };
-      const [comp1Props, comp2Props, otherProps] = component1.splitProps(
+      const [comp1Props, comp2Props, otherProps] = splitProps(
         props,
+        component1,
         component2,
       );
       expect(comp1Props).toEqual({ size: "lg" });
@@ -1830,8 +1915,9 @@ for (const config of Object.values(CONFIGS)) {
         style: { backgroundColor: "yellow" },
         [classNameProp]: "extra",
       };
-      const [comp1Props, comp2Props, otherProps] = component1.splitProps(
+      const [comp1Props, comp2Props, otherProps] = splitProps(
         props,
+        component1,
         component2.onlyVariants,
       );
       expect(comp1Props).toEqual({
@@ -1860,8 +1946,12 @@ for (const config of Object.values(CONFIGS)) {
         color: "blue",
         disabled: true,
       };
-      const [comp1Props, extraProps, comp2Props, otherProps] =
-        component1.splitProps(props, ["disabled"], component2.onlyVariants);
+      const [comp1Props, extraProps, comp2Props, otherProps] = splitProps(
+        props,
+        component1,
+        ["disabled"],
+        component2.onlyVariants,
+      );
       expect(comp1Props).toEqual({ size: "lg" });
       expect(extraProps).toEqual({ disabled: true });
       expect(comp2Props).toEqual({ color: "blue" });
@@ -1882,8 +1972,9 @@ for (const config of Object.values(CONFIGS)) {
         id: "test",
         size: "lg",
       };
-      const [comp1Props, comp2Props, otherProps] = component1.splitProps(
+      const [comp1Props, comp2Props, otherProps] = splitProps(
         props,
+        component1,
         component2.onlyVariants,
       );
       expect(comp1Props).toEqual({ size: "lg" });
@@ -1911,8 +2002,9 @@ for (const config of Object.values(CONFIGS)) {
         HTMLProperties<typeof component2> = {
         id: "test",
       };
-      const [comp1Props, comp2Props, otherProps] = component1.splitProps(
+      const [comp1Props, comp2Props, otherProps] = splitProps(
         props,
+        component1,
         component2.onlyVariants,
       );
       // Each gets its own defaults
@@ -1935,8 +2027,10 @@ for (const config of Object.values(CONFIGS)) {
         size: "lg",
         [classNameProp]: "extra",
       };
-      const [variantProps, otherProps] =
-        component.onlyVariants.splitProps(props);
+      const [variantProps, otherProps] = splitProps(
+        props,
+        component.onlyVariants,
+      );
       expect(variantProps).toEqual({
         size: "lg",
         color: "red",
@@ -1956,8 +2050,11 @@ for (const config of Object.values(CONFIGS)) {
         [classNameProp]: "extra",
         disabled: true,
       };
-      const [variantProps, extraProps, otherProps] =
-        component.onlyVariants.splitProps(props, ["disabled"]);
+      const [variantProps, extraProps, otherProps] = splitProps(
+        props,
+        component.onlyVariants,
+        ["disabled"],
+      );
       expect(variantProps).toEqual({ size: "lg" });
       expect(extraProps).toEqual({ disabled: true });
       expect(otherProps).toEqual({ id: "test", [classNameProp]: "extra" });
@@ -1986,8 +2083,11 @@ for (const config of Object.values(CONFIGS)) {
         color: "blue",
         [classNameProp]: "extra",
       };
-      const [comp1Props, comp2Props, otherProps] =
-        component1.onlyVariants.splitProps(props, component2.onlyVariants);
+      const [comp1Props, comp2Props, otherProps] = splitProps(
+        props,
+        component1.onlyVariants,
+        component2.onlyVariants,
+      );
       expect(comp1Props).toEqual({ size: "lg" });
       expect(comp2Props).toEqual({ color: "blue" });
       expect(otherProps).toEqual({ id: "test", [classNameProp]: "extra" });