refactor: reduce code implementation complexity using transformer

packages/react/lib/vcn.ts

@@ -57,6 +57,11 @@ type VariantKV<V extends VariantType> = {
   [VariantKey in keyof V]: BooleanString<keyof V[VariantKey] & string>;
 };
 
+/**
+ * Used for safely casting `Object.entries(<VariantKV>)`
+ */
+type VariantKVEntry<V extends VariantType> = [keyof V, BooleanString<keyof V[keyof V] & string>][]
+
 /**
  * Takes VariantType, and returns a type that represents the preset object.
  *
@@ -167,6 +172,26 @@ export function vcn<
   defaults: VariantKV<V>;
   presets?: P;
 }) {
+  /**
+   * --Internal utility function--
+   * After transforming props to final version (which means "after overriding default, preset, and variant props sent via component props")
+   * It turns final version of variant props to className
+   */
+  function __transformer__(final: VariantKV<V>, dynamics: string[], propClassName?: string): string {
+    const classNames: string[] = [];
+
+    for (const [variantName, variantKey] of (Object.entries(final) as VariantKVEntry<V>)) {
+      classNames.push(variants[variantName][variantKey.toString()])
+    }
+
+    return twMerge(
+      base,
+      ...classNames,
+      ...dynamics,
+      propClassName,
+    )
+  }
+
   return [
     /**
      * Takes any props (including className), and returns the class name.
@@ -180,42 +205,31 @@ export function vcn<
         VariantKV<V>
       >,
     ) => {
-      const { className, preset, ...otherVariantProps } = variantProps;
+      const { className, preset, ..._otherVariantProps } = variantProps;
 
-      const currentPreset: P[keyof P] | null =
-        presets && preset ? (presets as NonNullable<P>)[preset] ?? null : null;
-      const presetVariantKeys: (keyof V)[] = Object.keys(currentPreset ?? {});
-      return twMerge(
-        base,
-        ...(
-          Object.entries(defaults) as [keyof V, keyof V[keyof V] & string][]
-        ).map<string>(([variantKey, defaultValue]) => {
       // Omit<Partial<VariantKV<V>> & { className; preset; }, className | preset> = Partial<VariantKV<V>> (safe to cast)
-          // Partial<VariantKV<V>>[keyof V] => { [k in keyof V]?: BooleanString<keyof V[keyof V] & string> } => BooleanString<keyof V[keyof V]>
+      // We all know `keyof V` = string, right? (but typescript says it's not, so.. attacking typescript with unknown lol)
+      const otherVariantProps = _otherVariantProps as unknown as Partial<VariantKV<V>>
 
-          const directVariantValue: (keyof V[keyof V] & string) | undefined = (
+      const kv: VariantKV<V> = { ...defaults };
-            otherVariantProps as unknown as Partial<VariantKV<V>>
-          )[variantKey]?.toString?.(); // BooleanString<> -> string (safe to index V[keyof V])
 
-          const currentPresetVariantValue:
+      // Preset Processing
-            | (keyof V[keyof V] & string)
+      if (presets && preset && preset in presets) {
-            | undefined =
+        for (const [variantName, variantKey] of (Object.entries((presets)[preset]) as VariantKVEntry<V>)) {
-            !!currentPreset && presetVariantKeys.includes(variantKey)
+          kv[variantName] = variantKey
-              ? (currentPreset as Partial<VariantKV<V>>)[
+        }
-                  variantKey
+      }
-                ]?.toString?.()
-              : undefined;
 
-          const variantValue: keyof V[keyof V] & string =
+      // VariantProps Processing
-            directVariantValue ?? currentPresetVariantValue ?? defaultValue;
+      for (const [variantName, variantKey] of (Object.entries(otherVariantProps) as VariantKVEntry<V>)) {
-          return variants[variantKey][variantValue];
+        kv[variantName] = variantKey
-        }),
+      }
-        (
+
-          currentPreset as Partial<VariantKV<V>> | null
+      // make dynamics result
-        )?.className?.toString?.(), // preset's classname comes after user's variant props? huh..
+      const dynamicClasses: string[] = []
-        className,
+      return __transformer__(kv, dynamicClasses, className);
-      );
     },
+
     /**
      * Takes any props, parse variant props and other props.
      * If `options.excludeA` is true, then it will parse `A` as "other" props.