fix(ui): Bump cva and minor type fixes (medusajs#5818)

**What** - Bumps `class-variance-authority` to new beta version - `cva@beta`. - Updates all usages of `cva` to new API. - Clear up the naming of types in `usePrompt` **Why** - A bug in how `class-variance-authority` exported its types mean that we were relying on patching the package to ensure that the correct types made it into the build of our UI package. This was important to ensure intellisense for component variants, such as `<Button size="large" />`. Previously in the UI monorepo, having the patch was enough to ensure that the correct types made it into the build, but that was not the case after we moved the design system to the core repo. The issue with types is fixed in the `@1` version of `cva` which is currently in beta. I have pinpointed the version to the current beta version to ensure stability despite the package currently being in beta.
SGFGOV · Dec 7, 2023 · 591ba23 · 591ba23
1 parent 85cda7c
commit 591ba23
Show file tree

Hide file tree

Showing 21 changed files with 228 additions and 305 deletions.
diff --git a/.changeset/shiny-stingrays-shop.md b/.changeset/shiny-stingrays-shop.md
@@ -0,0 +1,5 @@
+---
+"@medusajs/ui": patch
+---
+
+fix(ui): Bump 'class-variance-authority' to 'cva@beta' and update usage to new API. Also fix the naming of usePrompt types
diff --git a/.yarn/patches/class-variance-authority-npm-0.6.1-22a468e86e.patch b/.yarn/patches/class-variance-authority-npm-0.6.1-22a468e86e.patch
diff --git a/package.json b/package.json
@@ -92,7 +92,6 @@
   "resolutions": {
     "@redocly/cli/react": "^17.0.1",
     "@redocly/cli/react-dom": "^17.0.1",
-    "pg": "8.10.0",
-    "[email protected]": "patch:class-variance-authority@npm:0.6.1#.yarn/patches/class-variance-authority-npm-0.6.1-22a468e86e.patch"
+    "pg": "8.10.0"
   }
 }
diff --git a/packages/design-system/ui/package.json b/packages/design-system/ui/package.json
@@ -100,9 +100,9 @@
     "@radix-ui/react-tooltip": "^1.0.6",
     "@react-aria/datepicker": "^3.5.0",
     "@react-stately/datepicker": "^3.5.0",
-    "class-variance-authority": "^0.6.1",
     "clsx": "^1.2.1",
     "copy-to-clipboard": "^3.3.3",
+    "cva": "1.0.0-beta.1",
     "date-fns": "^2.30.0",
     "prism-react-renderer": "^2.0.6",
     "react-currency-input-field": "^3.6.11",

diff --git a/packages/design-system/ui/src/components/avatar/avatar.tsx b/packages/design-system/ui/src/components/avatar/avatar.tsx
@@ -1,32 +1,31 @@
 "use client"
 
 import * as Primitives from "@radix-ui/react-avatar"
-import { cva, type VariantProps } from "class-variance-authority"
+import { cva, type VariantProps } from "cva"
 import * as React from "react"
 
 import { clx } from "@/utils/clx"
 
-const avatarVariants = cva(
-  "border-ui-border-strong flex shrink-0 items-center justify-center overflow-hidden border",
-  {
-    variants: {
-      variant: {
-        squared: "rounded-lg",
-        rounded: "rounded-full",
-      },
-      size: {
-        base: "h-8 w-8",
-        large: "h-10 w-10",
-      },
+const avatarVariants = cva({
+  base: "border-ui-border-strong flex shrink-0 items-center justify-center overflow-hidden border",
+  variants: {
+    variant: {
+      squared: "rounded-lg",
+      rounded: "rounded-full",
     },
-    defaultVariants: {
-      variant: "rounded",
-      size: "base",
+    size: {
+      base: "h-8 w-8",
+      large: "h-10 w-10",
     },
-  }
-)
+  },
+  defaultVariants: {
+    variant: "rounded",
+    size: "base",
+  },
+})
 
-const innerVariants = cva("aspect-square object-cover object-center", {
+const innerVariants = cva({
+  base: "aspect-square object-cover object-center",
   variants: {
     variant: {
       squared: "rounded-lg",

diff --git a/packages/design-system/ui/src/components/badge/badge.tsx b/packages/design-system/ui/src/components/badge/badge.tsx
@@ -1,10 +1,10 @@
 import { Slot } from "@radix-ui/react-slot"
-import { VariantProps, cva } from "class-variance-authority"
+import { VariantProps, cva } from "cva"
 import * as React from "react"
 
 import { clx } from "@/utils/clx"
 
-const badgeColorVariants = cva("", {
+const badgeColorVariants = cva({
   variants: {
     color: {
       green:
@@ -23,7 +23,8 @@ const badgeColorVariants = cva("", {
   },
 })
 
-const badgeSizeVariants = cva("inline-flex items-center gap-x-0.5 border", {
+const badgeSizeVariants = cva({
+  base: "inline-flex items-center gap-x-0.5 border",
   variants: {
     size: {
       small: "txt-compact-xsmall-plus px-1.5",

diff --git a/packages/design-system/ui/src/components/button/button.tsx b/packages/design-system/ui/src/components/button/button.tsx
@@ -1,58 +1,56 @@
 import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import { cva, type VariantProps } from "cva"
 import * as React from "react"
 
 import { clx } from "@/utils/clx"
 import { Spinner } from "@medusajs/icons"
 
-const buttonVariants = cva(
-  clx(
+const buttonVariants = cva({
+  base: clx(
     "transition-fg relative inline-flex w-fit items-center justify-center overflow-hidden rounded-md outline-none",
     "disabled:bg-ui-bg-disabled disabled:border-ui-border-base disabled:text-ui-fg-disabled disabled:shadow-buttons-neutral disabled:after:hidden",
     "after:transition-fg after:absolute after:inset-0 after:content-['']"
   ),
-  {
-    variants: {
-      variant: {
-        primary: clx(
-          "shadow-buttons-inverted text-ui-fg-on-inverted bg-ui-button-inverted after:button-inverted-gradient",
-          "hover:bg-ui-button-inverted-hover hover:after:button-inverted-hover-gradient",
-          "active:bg-ui-button-inverted-pressed active:after:button-inverted-pressed-gradient",
-          "focus:!shadow-buttons-inverted-focus"
-        ),
-        secondary: clx(
-          "shadow-buttons-neutral text-ui-fg-base bg-ui-button-neutral after:button-neutral-gradient",
-          "hover:bg-ui-button-neutral-hover hover:after:button-neutral-hover-gradient",
-          "active:bg-ui-button-neutral-pressed active:after:button-neutral-pressed-gradient",
-          "focus:shadow-buttons-neutral-focus"
-        ),
-        transparent: clx(
-          "after:hidden",
-          "text-ui-fg-base bg-ui-button-transparent",
-          "hover:bg-ui-button-transparent-hover",
-          "active:bg-ui-button-transparent-pressed",
-          "focus:shadow-buttons-neutral-focus focus:bg-ui-bg-base",
-          "disabled:!bg-transparent disabled:!shadow-none"
-        ),
-        danger: clx(
-          "shadow-buttons-colored shadow-buttons-danger text-ui-fg-on-color bg-ui-button-danger after:button-danger-gradient",
-          "hover:bg-ui-button-danger-hover hover:after:button-danger-hover-gradient",
-          "active:bg-ui-button-danger-pressed active:after:button-danger-pressed-gradient",
-          "focus:shadow-buttons-danger-focus"
-        ),
-      },
-      size: {
-        base: "txt-compact-small-plus gap-x-1.5 px-3 py-1.5",
-        large: "txt-compact-medium-plus gap-x-1.5 px-4 py-2.5",
-        xlarge: "txt-compact-large-plus gap-x-1.5 px-5 py-3.5",
-      },
+  variants: {
+    variant: {
+      primary: clx(
+        "shadow-buttons-inverted text-ui-fg-on-inverted bg-ui-button-inverted after:button-inverted-gradient",
+        "hover:bg-ui-button-inverted-hover hover:after:button-inverted-hover-gradient",
+        "active:bg-ui-button-inverted-pressed active:after:button-inverted-pressed-gradient",
+        "focus:!shadow-buttons-inverted-focus"
+      ),
+      secondary: clx(
+        "shadow-buttons-neutral text-ui-fg-base bg-ui-button-neutral after:button-neutral-gradient",
+        "hover:bg-ui-button-neutral-hover hover:after:button-neutral-hover-gradient",
+        "active:bg-ui-button-neutral-pressed active:after:button-neutral-pressed-gradient",
+        "focus:shadow-buttons-neutral-focus"
+      ),
+      transparent: clx(
+        "after:hidden",
+        "text-ui-fg-base bg-ui-button-transparent",
+        "hover:bg-ui-button-transparent-hover",
+        "active:bg-ui-button-transparent-pressed",
+        "focus:shadow-buttons-neutral-focus focus:bg-ui-bg-base",
+        "disabled:!bg-transparent disabled:!shadow-none"
+      ),
+      danger: clx(
+        "shadow-buttons-colored shadow-buttons-danger text-ui-fg-on-color bg-ui-button-danger after:button-danger-gradient",
+        "hover:bg-ui-button-danger-hover hover:after:button-danger-hover-gradient",
+        "active:bg-ui-button-danger-pressed active:after:button-danger-pressed-gradient",
+        "focus:shadow-buttons-danger-focus"
+      ),
     },
-    defaultVariants: {
-      size: "base",
-      variant: "primary",
+    size: {
+      base: "txt-compact-small-plus gap-x-1.5 px-3 py-1.5",
+      large: "txt-compact-medium-plus gap-x-1.5 px-4 py-2.5",
+      xlarge: "txt-compact-large-plus gap-x-1.5 px-5 py-3.5",
     },
-  }
-)
+  },
+  defaultVariants: {
+    size: "base",
+    variant: "primary",
+  },
+})
 
 interface ButtonProps
   extends React.ComponentPropsWithoutRef<"button">,

diff --git a/packages/design-system/ui/src/components/currency-input/currency-input.tsx b/packages/design-system/ui/src/components/currency-input/currency-input.tsx
@@ -5,26 +5,24 @@ import Primitive from "react-currency-input-field"
 
 import { Text } from "@/components/text"
 import { clx } from "@/utils/clx"
-import { VariantProps, cva } from "class-variance-authority"
+import { VariantProps, cva } from "cva"
 
-const currencyInputVariants = cva(
-  clx(
+const currencyInputVariants = cva({
+  base: clx(
     "flex items-center gap-x-1",
     "bg-ui-bg-field hover:bg-ui-bg-field-hover shadow-buttons-neutral placeholder-ui-fg-muted text-ui-fg-base transition-fg relative w-full rounded-md",
     "focus-within:shadow-borders-interactive-with-active"
   ),
-  {
-    variants: {
-      size: {
-        base: "txt-compact-medium h-10 px-3",
-        small: "txt-compact-small h-8 px-2",
-      },
-    },
-    defaultVariants: {
-      size: "base",
+  variants: {
+    size: {
+      base: "txt-compact-medium h-10 px-3",
+      small: "txt-compact-small h-8 px-2",
     },
-  }
-)
+  },
+  defaultVariants: {
+    size: "base",
+  },
+})
 
 interface CurrencyInputProps
   extends Omit<

diff --git a/packages/design-system/ui/src/components/date-picker/date-picker.tsx b/packages/design-system/ui/src/components/date-picker/date-picker.tsx
@@ -13,28 +13,26 @@ import { TimeInput } from "@/components/time-input"
 import type { DateRange } from "@/types"
 import { clx } from "@/utils/clx"
 import { isBrowserLocaleClockType24h } from "@/utils/is-browser-locale-hour-cycle-24h"
-import { cva } from "class-variance-authority"
+import { cva } from "cva"
 
-const displayVariants = cva(
-  clx(
+const displayVariants = cva({
+  base: clx(
     "text-ui-fg-base bg-ui-bg-field transition-fg shadow-buttons-neutral flex w-full items-center gap-x-2 rounded-md outline-none",
     "hover:bg-ui-bg-field-hover",
     "focus:shadow-borders-interactive-with-active data-[state=open]:shadow-borders-interactive-with-active",
     "disabled:bg-ui-bg-disabled disabled:text-ui-fg-disabled disabled:shadow-buttons-neutral",
     "aria-[invalid=true]:!shadow-borders-error"
   ),
-  {
-    variants: {
-      size: {
-        base: "txt-compact-medium h-10 px-3 py-2.5",
-        small: "txt-compact-small h-8 px-2 py-1.5",
-      },
+  variants: {
+    size: {
+      base: "txt-compact-medium h-10 px-3 py-2.5",
+      small: "txt-compact-small h-8 px-2 py-1.5",
     },
-    defaultVariants: {
-      size: "base",
-    },
-  }
-)
+  },
+  defaultVariants: {
+    size: "base",
+  },
+})
 
 const Display = React.forwardRef<
   HTMLButtonElement,

diff --git a/packages/design-system/ui/src/components/heading/heading.tsx b/packages/design-system/ui/src/components/heading/heading.tsx
@@ -1,9 +1,10 @@
-import { cva, type VariantProps } from "class-variance-authority"
+import { cva, type VariantProps } from "cva"
 import * as React from "react"
 
 import { clx } from "@/utils/clx"
 
-const headingVariants = cva("font-sans font-medium", {
+const headingVariants = cva({
+  base: "font-sans font-medium",
   variants: {
     level: {
       h1: "h1-core",