clava 0.1.19 → 0.2.0

package/src/index.ts

@@ -14,8 +14,8 @@ import type {
   MergeVariants,
   ModalComponent,
   SplitPropsFunction,
+  StyleClassProps,
   StyleClassValue,
-  StyleProps,
   StyleValue,
   VariantValues,
   Variants,
@@ -77,6 +77,7 @@ function assign<T extends object>(target: T, source: T): void {
 export type {
   ClassValue,
   StyleValue,
+  StyleClassProps,
   StyleClassValue,
   JSXProps,
   HTMLProps,
@@ -112,8 +113,7 @@ export interface CVConfig<
   computed?: Computed<MergeVariants<V, CV, E>>;
 }
 
-interface CreateParams<M extends Mode> {
-  defaultMode?: M;
+interface CreateParams {
   transformClass?: (className: string) => string;
 }
 
@@ -839,10 +839,9 @@ function createResolveDefaults(
 /**
  * Creates the cv and cx functions.
  */
-export function create<M extends Mode = "jsx">({
-  defaultMode = "jsx" as M,
+export function create({
   transformClass = (className) => className,
-}: CreateParams<M> = {}) {
+}: CreateParams = {}) {
   const cx = (...classes: ClsxClassValue[]) => transformClass(clsx(...classes));
 
   const cv = <
@@ -851,12 +850,13 @@ export function create<M extends Mode = "jsx">({
     const E extends AnyComponent[] = [],
   >(
     config: CVConfig<V, CV, E> = {},
-  ): CVComponent<V, CV, E, StyleProps[M]> => {
+  ): CVComponent<V, CV, E> => {
     type MergedVariants = MergeVariants<V, CV, E>;
 
     const variantKeys = collectVariantKeys(config);
     const disabledVariantKeys = collectDisabledVariantKeys(config);
     const disabledVariantValues = collectDisabledVariantValues(config);
+    const inputPropsKeys = ["class", "className", "style", ...variantKeys];
 
     const getPropsKeys = (mode: Mode) => [
       getClassPropertyName(mode),
@@ -970,6 +970,75 @@ export function create<M extends Mode = "jsx">({
       };
     };
 
+    const getVariants = (variants?: VariantValues<MergedVariants>) => {
+      const variantProps = variants ?? {};
+      const resolvedVariants = resolveVariants(config, variantProps);
+      // Run computed function to get variants set via setVariants and
+      // setDefaultVariants
+      const { updatedVariants } = runComputedFunction(
+        config,
+        resolvedVariants,
+        variantProps,
+      );
+      return updatedVariants as VariantValues<MergedVariants>;
+    };
+
+    // Compute base class (without variants) - includes extended base classes
+    const extendedBaseClasses: ClassValue[] = [];
+    if (config.extend) {
+      for (const ext of config.extend) {
+        const meta = getComponentMeta(ext);
+        extendedBaseClasses.push(meta?.baseClass ?? "");
+      }
+    }
+    const baseClass = cx(
+      ...(extendedBaseClasses as ClsxClassValue[]),
+      config.class as ClsxClassValue,
+    );
+
+    // Compute static defaults once at creation time (without triggering
+    // computed functions)
+    const staticDefaults = collectStaticDefaults(config);
+
+    const initializeComponent = <
+      R extends ComponentResult,
+      T extends ModalComponent<MergedVariants, R>,
+    >(
+      component: T,
+      propsKeys: string[],
+    ): T => {
+      component.class = (props: ComponentProps<MergedVariants> = {}) => {
+        return computeResult(props).className;
+      };
+
+      component.getVariants = getVariants;
+      component.keys = propsKeys;
+      component.variantKeys = variantKeys;
+      component.propKeys = propsKeys;
+
+      // Store internal metadata hidden from public types
+      setComponentMeta(component, {
+        baseClass,
+        staticDefaults,
+        resolveDefaults: createResolveDefaults(config),
+      });
+
+      return component;
+    };
+
+    const createDefaultComponent = (): CVComponent<V, CV, E> => {
+      const component = ((props: ComponentProps<MergedVariants> = {}) => {
+        const { className, style } = computeResult(props);
+        return { class: className, style };
+      }) as CVComponent<V, CV, E>;
+
+      component.style = (props: ComponentProps<MergedVariants> = {}) => {
+        return computeResult(props).style;
+      };
+
+      return initializeComponent(component, inputPropsKeys);
+    };
+
     const createModalComponent = <R extends ComponentResult>(
       mode: Mode,
     ): ModalComponent<MergedVariants, R> => {
@@ -998,53 +1067,10 @@ export function create<M extends Mode = "jsx">({
         if (mode === "html") return styleValueToHTMLStyle(style);
         return styleValueToHTMLObjStyle(style);
       };
-
-      component.getVariants = (variants?: VariantValues<MergedVariants>) => {
-        const variantProps = variants ?? {};
-        const resolvedVariants = resolveVariants(config, variantProps);
-        // Run computed function to get variants set via setVariants and
-        // setDefaultVariants
-        const { updatedVariants } = runComputedFunction(
-          config,
-          resolvedVariants,
-          variantProps,
-        );
-        return updatedVariants as VariantValues<MergedVariants>;
-      };
-
-      component.keys = propsKeys;
-      component.variantKeys = variantKeys;
-      component.propKeys = propsKeys;
-
-      // Compute base class (without variants) - includes extended base classes
-      const extendedBaseClasses: ClassValue[] = [];
-      if (config.extend) {
-        for (const ext of config.extend) {
-          const meta = getComponentMeta(ext);
-          extendedBaseClasses.push(meta?.baseClass ?? "");
-        }
-      }
-      const baseClass = cx(
-        ...(extendedBaseClasses as ClsxClassValue[]),
-        config.class as ClsxClassValue,
-      );
-
-      // Compute static defaults once at creation time (without triggering
-      // computed functions)
-      const staticDefaults = collectStaticDefaults(config);
-
-      // Store internal metadata hidden from public types
-      setComponentMeta(component, {
-        baseClass,
-        staticDefaults,
-        resolveDefaults: createResolveDefaults(config),
-      });
-
-      return component;
+      return initializeComponent(component, propsKeys);
     };
 
-    // Create the default modal component
-    const defaultComponent = createModalComponent<StyleProps[M]>(defaultMode);
+    const defaultComponent = createDefaultComponent();
 
     // Create all modal variants
     const jsxComponent = createModalComponent<JSXProps>("jsx");
@@ -1052,7 +1078,7 @@ export function create<M extends Mode = "jsx">({
     const htmlObjComponent = createModalComponent<HTMLObjProps>("htmlObj");
 
     // Build the final component
-    const component = defaultComponent as CVComponent<V, CV, E, StyleProps[M]>;
+    const component = defaultComponent;
     component.jsx = jsxComponent;
     component.html = htmlComponent;
     component.htmlObj = htmlObjComponent;

package/src/types.ts

@@ -32,13 +32,22 @@ export interface HTMLObjProps {
   style: HTMLCSSProperties;
 }
 
+export interface StyleClassProps {
+  class: string;
+  style: StyleValue;
+}
+
 export interface StyleProps {
   jsx: JSXProps;
   html: HTMLProps;
   htmlObj: HTMLObjProps;
 }
 
-export type ComponentResult = JSXProps | HTMLProps | HTMLObjProps;
+export type ComponentResult =
+  | JSXProps
+  | HTMLProps
+  | HTMLObjProps
+  | StyleClassProps;
 
 type AllComponentResultKeys =
   | keyof JSXProps
@@ -160,16 +169,16 @@ export interface ModalComponent<V, R extends ComponentResult> {
   class: (props?: ComponentProps<V>) => string;
   style: (props?: ComponentProps<V>) => R["style"];
   getVariants: GetVariants<V>;
-  keys: (keyof V | keyof R)[];
+  keys: (keyof V | keyof NullableComponentResult)[];
   variantKeys: (keyof V)[];
-  propKeys: (keyof V | keyof R)[];
+  propKeys: (keyof V | keyof NullableComponentResult)[];
 }
 
 export interface CVComponent<
   V extends Variants = {},
   CV extends ComputedVariants = {},
   E extends AnyComponent[] = [],
-  R extends ComponentResult = ComponentResult,
+  R extends ComponentResult = StyleClassProps,
 > extends ModalComponent<MergeVariants<V, CV, E>, R> {
   jsx: ModalComponent<MergeVariants<V, CV, E>, JSXProps>;
   html: ModalComponent<MergeVariants<V, CV, E>, HTMLProps>;

package/tests/_utils.ts

@@ -0,0 +1,176 @@
+import { expect } from "vitest";
+import { type VariantProps, create, cv as cvBase } from "../src/index.ts";
+import type {
+  AnyComponent,
+  CVComponent,
+  ComponentResult,
+  ComputedVariants,
+  HTMLObjProps,
+  HTMLProps,
+  JSXProps,
+  StyleClassProps,
+  StyleProperty,
+  Variants,
+} from "../src/types.ts";
+import {
+  htmlObjStyleToStyleValue,
+  htmlStyleToStyleValue,
+  isHTMLObjStyle,
+  jsxStyleToStyleValue,
+} from "../src/utils.ts";
+
+const MODES = ["jsx", "html", "htmlObj"] as const;
+type Mode = (typeof MODES)[number] | null;
+
+export type HTMLProperties<T extends AnyComponent> = VariantProps<T> & {
+  id?: string;
+  class?: string;
+  className?: string;
+  style?: StyleProperty;
+};
+
+type ConfigParams = NonNullable<Parameters<typeof create>[0]>;
+
+interface Config {
+  mode: Mode;
+  transformClass?: ConfigParams["transformClass"];
+}
+
+const transformClass = {
+  uppercase: (className: string) => className.toUpperCase(),
+} satisfies Record<string, Config["transformClass"]>;
+
+export const CONFIGS = {
+  default: { mode: null },
+  jsx: { mode: "jsx" },
+  html: { mode: "html" },
+  htmlObj: { mode: "htmlObj" },
+  uppercase: {
+    mode: null,
+    transformClass: transformClass.uppercase,
+  },
+} satisfies Record<string, Config>;
+
+export function getConfigMode<T extends Config>(config: T): T["mode"] {
+  if (!("mode" in config)) return null;
+  return config.mode;
+}
+
+export function getConfigTransformClass(config: Config) {
+  if (!("transformClass" in config) || !config.transformClass) {
+    return (className: string) => className;
+  }
+  return config.transformClass;
+}
+
+export function getConfigDescription(config: Config) {
+  for (const [name, currentConfig] of Object.entries(CONFIGS)) {
+    if (currentConfig !== config) continue;
+    return name;
+  }
+  return "custom";
+}
+
+export function createCVFromConfig<T extends Config>(
+  config: T,
+): ReturnType<typeof create>["cv"] {
+  const transformClass = getConfigTransformClass(config);
+  const hasTransform = "transformClass" in config && config.transformClass;
+  if (!hasTransform) {
+    return cvBase;
+  }
+  const { cv } = create({ transformClass });
+  return cv;
+}
+
+export function getModeComponent<
+  M extends Mode,
+  V extends Variants = {},
+  CV extends ComputedVariants = {},
+  const E extends AnyComponent[] = [],
+>(mode: M, component: CVComponent<V, CV, E>) {
+  if (!mode) return component;
+  return component[mode];
+}
+
+function getClass(props: ComponentResult) {
+  if ("class" in props) return props.class;
+  return props.className;
+}
+
+export function getClassPropertyName(config: Config) {
+  const mode = config.mode;
+  if (mode === "jsx" || mode === null) return "className";
+  return "class";
+}
+
+export function getExpectedPropsKeys(config: Config, ...variantKeys: string[]) {
+  if (config.mode === null) {
+    return ["class", "className", "style", ...variantKeys];
+  }
+  return [getClassPropertyName(config), "style", ...variantKeys];
+}
+
+export function assertDefaultProps(
+  props: ComponentResult,
+): asserts props is StyleClassProps {
+  if (!("class" in props)) {
+    expect.fail("Expected default props to have class");
+  }
+  if (!("style" in props) || typeof props.style !== "object") {
+    expect.fail("Expected default props to have style");
+  }
+}
+
+export function assertJSXProps(
+  props: ComponentResult,
+): asserts props is JSXProps {
+  if (!("className" in props)) {
+    expect.fail("Expected jsx props to have className");
+  }
+  if (!("style" in props) || typeof props.style !== "object") {
+    expect.fail("Expected jsx props to have style");
+  }
+}
+
+export function assertHTMLProps(
+  props: ComponentResult,
+): asserts props is HTMLProps {
+  if (!("class" in props)) {
+    expect.fail("Expected html props to have class");
+  }
+  if (!("style" in props) || typeof props.style !== "string") {
+    expect.fail("Expected html props to have style");
+  }
+}
+
+export function assertHTMLObjProps(
+  props: ComponentResult,
+): asserts props is HTMLObjProps {
+  if (!("class" in props)) {
+    expect.fail("Expected htmlObj props to have class");
+  }
+  if (!("style" in props) || typeof props.style !== "object") {
+    expect.fail("Expected htmlObj props to have style");
+  }
+}
+
+export function getStyle(props: Pick<ComponentResult, "style">) {
+  if (typeof props.style === "string") {
+    return htmlStyleToStyleValue(props.style);
+  }
+  if (typeof props.style === "object") {
+    if (isHTMLObjStyle(props.style)) {
+      return htmlObjStyleToStyleValue(props.style);
+    }
+    return jsxStyleToStyleValue(props.style);
+  }
+  return {};
+}
+
+export function getStyleClass(props: ComponentResult): Record<string, unknown> {
+  return {
+    ...getStyle(props),
+    class: getClass(props),
+  };
+}