asyavee/medusa-store
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

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

Browse Source 
**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.
This commit is contained in:
Kasper Fabricius Kristensen
2023-12-07 21:13:44 +01:00
committed by GitHub
parent 85cda7ce37
commit 591ba2388d
21 changed files with 228 additions and 305 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
packages/design-system/ui/src/components/avatar/avatar.tsx
View File

@@ -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",

7
packages/design-system/ui/src/components/badge/badge.tsx
View File

@@ -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",

84
packages/design-system/ui/src/components/button/button.tsx
View File

@@ -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">,

26
packages/design-system/ui/src/components/currency-input/currency-input.tsx
View File

@@ -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",
},
variants: {
size: {
base: "txt-compact-medium h-10 px-3",
small: "txt-compact-small h-8 px-2",
},
defaultVariants: {
size: "base",
},
}
)
},
defaultVariants: {
size: "base",
},
})
interface CurrencyInputProps
extends Omit<

26
packages/design-system/ui/src/components/date-picker/date-picker.tsx
View File

@@ -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,

5
packages/design-system/ui/src/components/heading/heading.tsx
View File

@@ -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",

26
packages/design-system/ui/src/components/hint/hint.tsx
View File

@@ -1,23 +1,21 @@
import { VariantProps, cva } from "class-variance-authority"
import { VariantProps, cva } from "cva"
import * as React from "react"
import { ExclamationCircleSolid } from "@medusajs/icons"
import { clx } from "../../utils/clx"
const hintVariants = cva(
"txt-compact-xsmall inline-flex items-center gap-x-2",
{
variants: {
variant: {
info: "text-ui-fg-subtle",
error: "text-ui-fg-error",
},
const hintVariants = cva({
base: "txt-compact-xsmall inline-flex items-center gap-x-2",
variants: {
variant: {
info: "text-ui-fg-subtle",
error: "text-ui-fg-error",
},
defaultVariants: {
variant: "info",
},
}
)
},
defaultVariants: {
variant: "info",
},
})
type HintProps = VariantProps<typeof hintVariants> &
React.ComponentPropsWithoutRef<"span">

20
packages/design-system/ui/src/components/icon-badge/icon-badge.tsx
View File

@@ -1,21 +1,19 @@
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 { badgeColorVariants } from "@/components/badge"
import { clx } from "@/utils/clx"
const iconBadgeVariants = cva(
"flex items-center justify-center overflow-hidden rounded-md border",
{
variants: {
size: {
base: "h-6 w-6",
large: "h-7 w-7",
},
const iconBadgeVariants = cva({
base: "flex items-center justify-center overflow-hidden rounded-md border",
variants: {
size: {
base: "h-6 w-6",
large: "h-7 w-7",
},
}
)
},
})
interface IconBadgeProps
extends Omit<React.ComponentPropsWithoutRef<"span">, "color">,

60
packages/design-system/ui/src/components/icon-button/icon-button.tsx
View File

@@ -1,45 +1,43 @@
import { Spinner } from "@medusajs/icons"
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 iconButtonVariants = cva(
clx(
const iconButtonVariants = 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:shadow-buttons-neutral disabled:text-ui-fg-disabled disabled:after:hidden"
),
{
variants: {
variant: {
primary: clx(
"shadow-buttons-neutral text-ui-fg-subtle 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",
"after:absolute after:inset-0 after:content-['']"
),
transparent: clx(
"text-ui-fg-subtle 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"
),
},
size: {
base: "h-8 w-8 p-1.5",
large: "h-10 w-10 p-2.5",
xlarge: "h-12 w-12 p-3.5",
},
variants: {
variant: {
primary: clx(
"shadow-buttons-neutral text-ui-fg-subtle 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",
"after:absolute after:inset-0 after:content-['']"
),
transparent: clx(
"text-ui-fg-subtle 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"
),
},
defaultVariants: {
variant: "primary",
size: "base",
size: {
base: "h-8 w-8 p-1.5",
large: "h-10 w-10 p-2.5",
xlarge: "h-12 w-12 p-3.5",
},
}
)
},
defaultVariants: {
variant: "primary",
size: "base",
},
})
interface IconButtonProps
extends React.ComponentPropsWithoutRef<"button">,

26
packages/design-system/ui/src/components/input/input.tsx
View File

@@ -1,7 +1,7 @@
"use client"
import { Eye, EyeSlash, MagnifyingGlassMini } from "@medusajs/icons"
import { VariantProps, cva } from "class-variance-authority"
import { VariantProps, cva } from "cva"
import * as React from "react"
import { clx } from "@/utils/clx"
@@ -13,23 +13,21 @@ const inputBaseStyles = clx(
"aria-[invalid=true]:!shadow-borders-error invalid:!shadow-borders-error"
)
const inputVariants = cva(
clx(
const inputVariants = cva({
base: clx(
inputBaseStyles,
"[&::--webkit-search-cancel-button]:hidden [&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden"
),
{
variants: {
size: {
base: "txt-compact-medium h-10 px-3 py-[9px]",
small: "txt-compact-small h-8 px-2 py-[5px]",
},
variants: {
size: {
base: "txt-compact-medium h-10 px-3 py-[9px]",
small: "txt-compact-small h-8 px-2 py-[5px]",
},
defaultVariants: {
size: "base",
},
}
)
},
defaultVariants: {
size: "base",
},
})
const Input = React.forwardRef<
HTMLInputElement,

5
packages/design-system/ui/src/components/label/label.tsx
View File

@@ -1,12 +1,13 @@
"use client"
import * as Primitives from "@radix-ui/react-label"
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 labelVariants = cva("font-sans", {
const labelVariants = cva({
base: "font-sans",
variants: {
size: {
xsmall: "txt-compact-xsmall",

20
packages/design-system/ui/src/components/select/select.tsx
View File

@@ -2,7 +2,7 @@
import { ChevronUpDown, EllipseMiniSolid } from "@medusajs/icons"
import * as SelectPrimitive from "@radix-ui/react-select"
import { cva } from "class-variance-authority"
import { cva } from "cva"
import * as React from "react"
import { clx } from "@/utils/clx"
@@ -40,8 +40,8 @@ const Group = SelectPrimitive.Group
const Value = SelectPrimitive.Value
const triggerVariants = cva(
clx(
const triggerVariants = cva({
base: clx(
"bg-ui-bg-field txt-compact-medium shadow-buttons-neutral transition-fg flex w-full select-none items-center justify-between rounded-md outline-none",
"data-[placeholder]:text-ui-fg-muted text-ui-fg-base",
"hover:bg-ui-bg-field-hover",
@@ -51,15 +51,13 @@ const triggerVariants = cva(
"disabled:!bg-ui-bg-disabled disabled:!text-ui-fg-disabled",
"group/trigger"
),
{
variants: {
size: {
base: "h-10 px-3 py-[9px]",
small: "h-8 px-2 py-[5px]",
},
variants: {
size: {
base: "h-10 px-3 py-[9px]",
small: "h-8 px-2 py-[5px]",
},
}
)
},
})
const Trigger = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Trigger>,

52
packages/design-system/ui/src/components/switch/switch.tsx
View File

@@ -1,41 +1,37 @@
"use client"
import * as Primitives from "@radix-ui/react-switch"
import { VariantProps, cva } from "class-variance-authority"
import { VariantProps, cva } from "cva"
import * as React from "react"
import { clx } from "@/utils/clx"
const switchVariants = cva(
"bg-ui-bg-switch-off hover:bg-ui-bg-switch-off-hover data-[state=unchecked]:hover:after:bg-switch-off-hover-gradient before:shadow-details-switch-background focus:shadow-details-switch-background-focus data-[state=checked]:bg-ui-bg-interactive disabled:!bg-ui-bg-disabled group relative inline-flex items-center rounded-full outline-none transition-all before:absolute before:inset-0 before:rounded-full before:content-[''] after:absolute after:inset-0 after:rounded-full after:content-[''] disabled:cursor-not-allowed",
{
variants: {
size: {
small: "h-[16px] w-[28px]",
base: "h-[18px] w-[32px]",
},
const switchVariants = cva({
base: "bg-ui-bg-switch-off hover:bg-ui-bg-switch-off-hover data-[state=unchecked]:hover:after:bg-switch-off-hover-gradient before:shadow-details-switch-background focus:shadow-details-switch-background-focus data-[state=checked]:bg-ui-bg-interactive disabled:!bg-ui-bg-disabled group relative inline-flex items-center rounded-full outline-none transition-all before:absolute before:inset-0 before:rounded-full before:content-[''] after:absolute after:inset-0 after:rounded-full after:content-[''] disabled:cursor-not-allowed",
variants: {
size: {
small: "h-[16px] w-[28px]",
base: "h-[18px] w-[32px]",
},
defaultVariants: {
size: "base",
},
}
)
},
defaultVariants: {
size: "base",
},
})
const thumbVariants = cva(
"bg-ui-fg-on-color shadow-details-switch-handle group-disabled:bg-ui-fg-disabled pointer-events-none h-[14px] w-[14px] rounded-full transition-all group-disabled:shadow-none",
{
variants: {
size: {
small:
"h-[12px] w-[12px] data-[state=checked]:translate-x-3.5 data-[state=unchecked]:translate-x-0.5",
base: "h-[14px] w-[14px] transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0.5",
},
const thumbVariants = cva({
base: "bg-ui-fg-on-color shadow-details-switch-handle group-disabled:bg-ui-fg-disabled pointer-events-none h-[14px] w-[14px] rounded-full transition-all group-disabled:shadow-none",
variants: {
size: {
small:
"h-[12px] w-[12px] data-[state=checked]:translate-x-3.5 data-[state=unchecked]:translate-x-0.5",
base: "h-[14px] w-[14px] transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0.5",
},
defaultVariants: {
size: "base",
},
}
)
},
defaultVariants: {
size: "base",
},
})
interface SwitchProps
extends Omit<

4
packages/design-system/ui/src/components/text/text.tsx
View File

@@ -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 textVariants = cva("", {
const textVariants = cva({
variants: {
size: {
xsmall: "",