first commit

calcom/packages/lib/cva/cva.ts

@@ -0,0 +1,61 @@
+type ValidVariantTypes = string | number | null | boolean | undefined;
+type Variants = Record<string, ValidVariantTypes | ValidVariantTypes[]> & { className: string };
+
+/**
+ * Lets you use arrays for variants as well. This util combines all possible
+ * variants and returns an array with all possible options. Simply
+ * spread this in the compoundVariants.
+ */
+export const applyStyleToMultipleVariants = (variants: Variants) => {
+  const allKeysThatAreArrays = Object.keys(variants).filter((key) => Array.isArray(variants[key]));
+  const allKeysThatAreNotArrays = Object.keys(variants).filter((key) => !Array.isArray(variants[key]));
+  // Creates an object of all static options, ready to be merged in later with the array values.
+  const nonArrayOptions = allKeysThatAreNotArrays.reduce((acc, key) => {
+    return { ...acc, [key]: variants[key] };
+  }, {});
+
+  // Creates an array of all possible combinations of the array values.
+  // Eg if the variants object is { color: ["blue", "red"], size: ["small", "medium"] }
+  // then the result will be:
+  // [
+  //   { color: "blue", size: "small" },
+  //   { color: "blue", size: "medium" },
+  //   { color: "red", size: "small" },
+  //   { color: "red", size: "medium" },
+  // ]
+  const cartesianProductOfAllArrays = cartesianProduct(
+    allKeysThatAreArrays.map((key) => variants[key]) as ValidVariantTypes[][]
+  );
+
+  return cartesianProductOfAllArrays.map((variant) => {
+    const variantObject = variant.reduce((acc, value, index) => {
+      return { ...acc, [allKeysThatAreArrays[index]]: value };
+    }, {});
+
+    return {
+      ...nonArrayOptions,
+      ...variantObject,
+    };
+  });
+};
+
+/**
+ * A cartesian product is a final array that combines multiple arrays in ALL
+ * variations possible. For example:
+ *
+ * You have 3 arrays: [a, b], [1, 2], [y, z]
+ * The final result will be an array with all the different combinations:
+ * ["a", 1, "y"], ["a", 1, "z"], ["a", 2, "y"], ["a", 2, "z"], ["b", 1, "y"], etc
+ *
+ * We use this to create a params object for the static pages that combine multiple
+ * dynamic properties like 'stage' and 'meansOfTransport'. Resulting in an array
+ * with all different path combinations possible.
+ *
+ * @source: https://stackoverflow.com/questions/12303989/cartesian-product-of-multiple-arrays-in-javascript
+ * TS Inspiration: https://gist.github.com/ssippe/1f92625532eef28be6974f898efb23ef
+ */
+export const cartesianProduct = <T extends ValidVariantTypes>(sets: T[][]) =>
+  sets.reduce<T[][]>(
+    (accSets, set) => accSets.flatMap((accSet) => set.map((value) => [...accSet, value])),
+    [[]]
+  );