feat(internal-utils): add variants folder

Add variants utils to manage common component settings

packages/utils/internal-utils/src/index.ts

@@ -1,29 +1,3 @@
-/**
- * A utility function that serves as a workaround for Tailwind CSS IntelliSense issues
- * in large objects or when regex breaks in VSCode.
- *
- * @example
- *
- * // before
- * const styles: cva(['flex bg-primary', 'cursor-pointer'], {
- *   variants: {
- *     size: {
- *       small: "h-sz-24",
- *       medium: "h-sz-48"
- *     }
- *   }
- * })
- *
- * // after
- * const styles = cva(tw(['flex bg-primary', 'cursor-pointer']), {
- *   variants: {
- *     size: {
- *       small: tw("h-sz-24"),
- *       medium: tw("h-sz-48"),
- *     }
- *   }
- * })
- */
-export function tw<T>(v: T) {
-  return v
-}
+export { makeDesigns, makeIntents, makeShapes, makeSizes } from './variants'
+export * as VariantTypes from './variants/types'
+export * as variantConstants from './variants/constants'

packages/utils/internal-utils/src/variants/constants.ts

@@ -0,0 +1,19 @@
+const sizes = ['sm', 'md', 'lg'] as const
+
+const intents = [
+  'primary',
+  'secondary',
+  'success',
+  'error',
+  'info',
+  'alert',
+  'danger',
+  'neutral',
+  'surface',
+] as const
+
+const designs = ['filled', 'outlined', 'tinted', 'ghost', 'contrast'] as const
+
+const shapes = ['rounded', 'square', 'pill'] as const
+
+export { sizes, intents, designs, shapes }

packages/utils/internal-utils/src/variants/index.ts

@@ -0,0 +1,45 @@
+import {
+  Design,
+  DesignLookup,
+  Intent,
+  IntentLookup,
+  Picks,
+  Shape,
+  ShapeLookup,
+  Size,
+  SizeLookup,
+} from './types'
+
+function makeSizes<P extends Size[] = []>(
+  sizes: P extends [] ? SizeLookup : Picks<SizeLookup, P>
+): { size: P extends [] ? SizeLookup : Picks<SizeLookup, P> } {
+  return {
+    size: sizes,
+  }
+}
+
+function makeIntents<P extends Intent[] = []>(
+  intents: P extends [] ? IntentLookup : Picks<IntentLookup, P>
+): { intent: P extends [] ? IntentLookup : Picks<IntentLookup, P> } {
+  return {
+    intent: intents,
+  }
+}
+
+function makeDesigns<P extends Design[] = []>(
+  designs: P extends [] ? DesignLookup : Picks<DesignLookup, P>
+): { design: P extends [] ? DesignLookup : Picks<DesignLookup, P> } {
+  return {
+    design: designs,
+  }
+}
+
+function makeShapes<P extends Shape[] = []>(
+  shapes: P extends [] ? ShapeLookup : Picks<ShapeLookup, P>
+): { shape: P extends [] ? ShapeLookup : Picks<ShapeLookup, P> } {
+  return {
+    shape: shapes,
+  }
+}
+
+export { makeSizes, makeIntents, makeDesigns, makeShapes }

packages/utils/internal-utils/src/variants/types.ts

@@ -0,0 +1,37 @@
+import { designs, intents, shapes, sizes } from './constants'
+
+/* eslint-disable-next-line @typescript-eslint/ban-types */
+type Picks<T extends object, Entries extends (keyof T)[], Acc = {}> = Entries extends [
+  infer Entry,
+  ...infer Rest
+]
+  ? Rest extends (keyof T)[]
+    ? Entry extends keyof T
+      ? Picks<T, Rest, Acc & Pick<T, Entry>>
+      : Acc
+    : Acc
+  : Acc
+
+type Size = (typeof sizes)[number]
+type SizeLookup = Record<Size, string[]>
+
+type Intent = (typeof intents)[number]
+type IntentLookup = Record<Intent, string[]>
+
+type Design = (typeof designs)[number]
+type DesignLookup = Record<Design, string[]>
+
+type Shape = (typeof shapes)[number]
+type ShapeLookup = Record<Shape, string[]>
+
+export type {
+  Size,
+  SizeLookup,
+  Intent,
+  IntentLookup,
+  Design,
+  DesignLookup,
+  Shape,
+  ShapeLookup,
+  Picks,
+}