feat: add presets in vcn

packages/react/shared.ts

@@ -46,47 +46,87 @@ type VariantType = Record<string, Record<string, string>>;
  *
  * @example
  * ```
- * type VariantKV = VariantKV<VariantType>
- * // VariantKV = {
- * //   opened: BooleanString<"true" | "false"> = boolean;
- * //   size: BooleanString<"sm" | "md" | "lg">;
- * //   color: BooleanString<"red" | "green" | "blue">;
- * // }
+ * const kvs: VariantKV<VariantType> = {
+ *   opened: true  // BooleanString<"true" | "false"> = boolean;
+ *   size: "sm"    // BooleanString<"sm" | "md" | "lg"> = "sm" | "md" | "lg";
+ *   color: "red"  // BooleanString<"red" | "green" | "blue"> = "red" | "green" | "blue";
+ * }
  * ```
  */
 type VariantKV<V extends VariantType> = {
   [VariantKey in keyof V]: BooleanString<keyof V[VariantKey] & string>;
 };
 
+/**
+ * Takes VariantType, and returns a type that represents the preset object.
+ *
+ * @example
+ * ```
+ * const presets: PresetType<VariantType> = {
+ *   preset1: {
+ *     opened: true,
+ *     size: "sm",
+ *     color: "red",
+ *   },
+ *   preset2: {
+ *     opened: false,
+ *     size: "md",
+ *     color: "green",
+ *   },
+ * }
+ * ```
+ */
+type PresetType<V extends VariantType> = Record<
+  string,
+  Partial<VariantKV<V>> & { className?: string }
+>;
+
 export function vcn<V extends VariantType>({
   base,
   variants,
   defaults,
+  presets,
 }: {
   base?: string | undefined;
   variants: V /* VariantType */;
   defaults: VariantKV<V>;
+  presets?: PresetType<V>;
 }): [
-  (variantProps: Partial<VariantKV<V>> & { className?: string }) => string,
+  (
+    variantProps: Partial<VariantKV<V>> & {
+      className?: string;
+      preset?: keyof PresetType<V>;
+    }
+  ) => string,
   <AnyPropBeforeResolve extends Record<string, any>>(
     anyProps: AnyPropBeforeResolve,
     options?: {
+      excludePreset?: boolean;
       excludeClassName?: boolean;
     }
   ) => [
-    Partial<VariantKV<V>> & { className?: string },
-    Omit<AnyPropBeforeResolve, keyof Partial<VariantKV<V>> | "className">,
+    Partial<VariantKV<V>> & {
+      className?: string;
+      preset?: keyof PresetType<V>;
+    },
+    Omit<
+      AnyPropBeforeResolve,
+      keyof Partial<VariantKV<V>> | "className" | "preset"
+    >,
   ],
 ] {
   return [
     /**
      * Takes any props (including className), and returns the class name.
-     * If there is no variant specified in props, then it will fallback to default.
+     * If there is no variant specified in props, then it will fallback to preset, and then default.
      *
      * @param variantProps - The variant props including className.
      * @returns The class name.
      */
-    ({ className, ...variantProps }) => {
+    ({ className, preset, ...variantProps }) => {
+      const currentPreset: PresetType<V>[string] | null =
+        presets && preset ? presets[preset] ?? null : null;
+      const presetVariantKeys: (keyof V)[] = Object.keys(currentPreset ?? {});
       return twMerge(
         base,
         ...(
@@ -95,16 +135,20 @@ export function vcn<V extends VariantType>({
           ([variantKey, defaultValue]) =>
             variants[variantKey][
               (variantProps as unknown as Partial<VariantKV<V>>)[variantKey] ??
-                defaultValue
+                (currentPreset !== null &&
+                presetVariantKeys.includes(variantKey)
+                  ? currentPreset[variantKey] ?? defaultValue
+                  : defaultValue)
             ]
         ),
+        currentPreset?.className,
         className
       );
     },
     /**
      * Takes any props, parse variant props and other props.
-     * If `options.excludeClassName` is true, then it will parse className as "other" props.
-     * Otherwise, it will parse className as variant props.
+     * If `options.excludeA` is true, then it will parse `A` as "other" props.
+     * Otherwise, it will parse A as variant props.
      *
      * @param anyProps - Any props that have passed to the component.
      * @param options - Options.
@@ -117,7 +161,8 @@ export function vcn<V extends VariantType>({
         ([variantProps, otherProps], [key, value]) => {
           if (
             variantKeys.includes(key) ||
-            (!options.excludeClassName && key === "className")
+            (!options.excludeClassName && key === "className") ||
+            (!options.excludePreset && key === "preset")
           ) {
             return [{ ...variantProps, [key]: value }, otherProps];
           }