From 88e9be7bcd1e121d93071d13cc87d04501e6a738 Mon Sep 17 00:00:00 2001 From: Kasper Date: Thu, 7 Dec 2023 10:00:27 +0100 Subject: [PATCH 1/3] fix(ui): Bump cva and minor type fixes --- .changeset/shiny-stingrays-shop.md | 5 ++ ...iance-authority-npm-0.6.1-22a468e86e.patch | 71 ---------------- package.json | 3 +- packages/design-system/ui/package.json | 2 +- .../ui/src/components/avatar/avatar.tsx | 37 ++++---- .../ui/src/components/badge/badge.tsx | 7 +- .../ui/src/components/button/button.tsx | 84 +++++++++---------- .../currency-input/currency-input.tsx | 26 +++--- .../components/date-picker/date-picker.tsx | 26 +++--- .../ui/src/components/heading/heading.tsx | 5 +- .../ui/src/components/hint/hint.tsx | 26 +++--- .../src/components/icon-badge/icon-badge.tsx | 20 ++--- .../components/icon-button/icon-button.tsx | 60 +++++++------ .../ui/src/components/input/input.tsx | 26 +++--- .../ui/src/components/label/label.tsx | 5 +- .../ui/src/components/select/select.tsx | 20 ++--- .../ui/src/components/switch/switch.tsx | 52 ++++++------ .../ui/src/components/text/text.tsx | 4 +- .../{dialog.tsx => render-prompt.tsx} | 8 +- .../ui/src/hooks/use-prompt/use-prompt.tsx | 12 ++- yarn.lock | 34 +++++--- 21 files changed, 228 insertions(+), 305 deletions(-) create mode 100644 .changeset/shiny-stingrays-shop.md delete mode 100644 .yarn/patches/class-variance-authority-npm-0.6.1-22a468e86e.patch rename packages/design-system/ui/src/hooks/use-prompt/{dialog.tsx => render-prompt.tsx} (96%) diff --git a/.changeset/shiny-stingrays-shop.md b/.changeset/shiny-stingrays-shop.md new file mode 100644 index 0000000000000..9237bda43e732 --- /dev/null +++ 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 deleted file mode 100644 index 31f3a2f88f25c..0000000000000 --- a/.yarn/patches/class-variance-authority-npm-0.6.1-22a468e86e.patch +++ /dev/null @@ -1,71 +0,0 @@ -diff --git a/dist/index.d.ts b/dist/index.d.ts -index 676e466a43ad8932cbb3131bb2c3dea687d47041..cbffdc5191bd8535468fdeaf68365845d15804ea 100644 ---- a/dist/index.d.ts -+++ b/dist/index.d.ts -@@ -1,21 +1,55 @@ -+import type * as CLSX from "clsx"; - import clsx from "clsx"; --import type { ClassProp, ClassValue, OmitUndefined, StringToBoolean } from "./types"; --export type VariantProps any> = Omit[0]>, "class" | "className">; -+ -+type ClassPropKey = "class" | "className"; -+type ClassValue = CLSX.ClassValue; -+type ClassProp = -+ | { -+ class: ClassValue; -+ className?: never; -+ } -+ | { -+ class?: never; -+ className: ClassValue; -+ } -+ | { -+ class?: never; -+ className?: never; -+ }; -+type OmitUndefined = T extends undefined ? never : T; -+type StringToBoolean = T extends "true" | "false" ? boolean : T; -+ -+export type VariantProps any> = Omit< -+ OmitUndefined[0]>, -+ "class" | "className" -+>; - export type CxOptions = Parameters; - export type CxReturn = ReturnType; - export declare const cx: typeof clsx; - type ConfigSchema = Record>; - type ConfigVariants = { -- [Variant in keyof T]?: StringToBoolean | null | undefined; -+ [Variant in keyof T]?: StringToBoolean | null | undefined; - }; - type ConfigVariantsMulti = { -- [Variant in keyof T]?: StringToBoolean | StringToBoolean[] | undefined; -+ [Variant in keyof T]?: -+ | StringToBoolean -+ | StringToBoolean[] -+ | undefined; - }; --type Config = T extends ConfigSchema ? { -- variants?: T; -- defaultVariants?: ConfigVariants; -- compoundVariants?: (T extends ConfigSchema ? (ConfigVariants | ConfigVariantsMulti) & ClassProp : ClassProp)[]; --} : never; --type Props = T extends ConfigSchema ? ConfigVariants & ClassProp : ClassProp; --export declare const cva: (base?: ClassValue, config?: Config | undefined) => (props?: Props | undefined) => string; -+type Config = T extends ConfigSchema -+ ? { -+ variants?: T; -+ defaultVariants?: ConfigVariants; -+ compoundVariants?: (T extends ConfigSchema -+ ? (ConfigVariants | ConfigVariantsMulti) & ClassProp -+ : ClassProp)[]; -+ } -+ : never; -+type Props = T extends ConfigSchema -+ ? ConfigVariants & ClassProp -+ : ClassProp; -+export declare const cva: ( -+ base?: ClassValue, -+ config?: Config | undefined -+) => (props?: Props | undefined) => string; - export {}; diff --git a/package.json b/package.json index 6701ae07479a7..211a3526df6b1 100644 --- 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", - "class-variance-authority@0.6.1": "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 index 7856c36f2b553..89c94a5271caa 100644 --- 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": "beta", "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 index 3f34c55a528ca..528120455a446 100644 --- 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 index 78a77afc2726b..1878e291f2f1d 100644 --- 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 index 8c1cf7b2b58e2..5a0041016a7fb 100644 --- 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 index 0c7aff0e116ba..5ec855795e5d4 100644 --- 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 index 3832576f87913..611e2d658cd70 100644 --- 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 index 6ab4129c3b937..6394d2594ef6a 100644 --- 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", diff --git a/packages/design-system/ui/src/components/hint/hint.tsx b/packages/design-system/ui/src/components/hint/hint.tsx index d6598a18a172d..74a5396e2cc9c 100644 --- a/packages/design-system/ui/src/components/hint/hint.tsx +++ b/packages/design-system/ui/src/components/hint/hint.tsx @@ -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 & React.ComponentPropsWithoutRef<"span"> diff --git a/packages/design-system/ui/src/components/icon-badge/icon-badge.tsx b/packages/design-system/ui/src/components/icon-badge/icon-badge.tsx index d0a86878ca191..0904309b7835a 100644 --- a/packages/design-system/ui/src/components/icon-badge/icon-badge.tsx +++ b/packages/design-system/ui/src/components/icon-badge/icon-badge.tsx @@ -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, "color">, diff --git a/packages/design-system/ui/src/components/icon-button/icon-button.tsx b/packages/design-system/ui/src/components/icon-button/icon-button.tsx index a5ba58e3967a4..d325c7c1eb21d 100644 --- a/packages/design-system/ui/src/components/icon-button/icon-button.tsx +++ b/packages/design-system/ui/src/components/icon-button/icon-button.tsx @@ -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">, diff --git a/packages/design-system/ui/src/components/input/input.tsx b/packages/design-system/ui/src/components/input/input.tsx index 74efff00eba97..6dcdbef44cd65 100644 --- a/packages/design-system/ui/src/components/input/input.tsx +++ b/packages/design-system/ui/src/components/input/input.tsx @@ -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, diff --git a/packages/design-system/ui/src/components/label/label.tsx b/packages/design-system/ui/src/components/label/label.tsx index e0cc159b82d17..ce8a8028ffe90 100644 --- a/packages/design-system/ui/src/components/label/label.tsx +++ b/packages/design-system/ui/src/components/label/label.tsx @@ -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", diff --git a/packages/design-system/ui/src/components/select/select.tsx b/packages/design-system/ui/src/components/select/select.tsx index 5be9f26e8fe29..bcc97d7966896 100644 --- a/packages/design-system/ui/src/components/select/select.tsx +++ b/packages/design-system/ui/src/components/select/select.tsx @@ -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, diff --git a/packages/design-system/ui/src/components/switch/switch.tsx b/packages/design-system/ui/src/components/switch/switch.tsx index e0849bb4037d6..826b8feba433d 100644 --- a/packages/design-system/ui/src/components/switch/switch.tsx +++ b/packages/design-system/ui/src/components/switch/switch.tsx @@ -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", - }, - }, - defaultVariants: { - size: "base", +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", + }, +}) interface SwitchProps extends Omit< diff --git a/packages/design-system/ui/src/components/text/text.tsx b/packages/design-system/ui/src/components/text/text.tsx index 0f0baf0085f40..09c12c1449558 100644 --- a/packages/design-system/ui/src/components/text/text.tsx +++ b/packages/design-system/ui/src/components/text/text.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 textVariants = cva("", { +const textVariants = cva({ variants: { size: { xsmall: "", diff --git a/packages/design-system/ui/src/hooks/use-prompt/dialog.tsx b/packages/design-system/ui/src/hooks/use-prompt/render-prompt.tsx similarity index 96% rename from packages/design-system/ui/src/hooks/use-prompt/dialog.tsx rename to packages/design-system/ui/src/hooks/use-prompt/render-prompt.tsx index 2c862acaac1af..2af41bc5ae1b5 100644 --- a/packages/design-system/ui/src/hooks/use-prompt/dialog.tsx +++ b/packages/design-system/ui/src/hooks/use-prompt/render-prompt.tsx @@ -6,7 +6,7 @@ import { Input } from "@/components/input" import { Label } from "@/components/label" import { Prompt } from "@/components/prompt" -export type DialogProps = { +export type RenderPromptProps = { open: boolean title: string description: string @@ -17,7 +17,7 @@ export type DialogProps = { onCancel: () => void } -const Dialog = ({ +export const RenderPrompt = ({ open, title, description, @@ -26,7 +26,7 @@ const Dialog = ({ confirmText = "Confirm", onConfirm, onCancel, -}: DialogProps) => { +}: RenderPromptProps) => { const [userInput, setUserInput] = React.useState("") const handleUserInput = (event: React.ChangeEvent) => { @@ -108,5 +108,3 @@ const Dialog = ({ ) } - -export default Dialog diff --git a/packages/design-system/ui/src/hooks/use-prompt/use-prompt.tsx b/packages/design-system/ui/src/hooks/use-prompt/use-prompt.tsx index 829c4d873ace7..7c2f5bbf67725 100644 --- a/packages/design-system/ui/src/hooks/use-prompt/use-prompt.tsx +++ b/packages/design-system/ui/src/hooks/use-prompt/use-prompt.tsx @@ -2,14 +2,12 @@ import * as React from "react" import { createRoot } from "react-dom/client" -import { DialogProps } from "./dialog" +import { RenderPrompt, RenderPromptProps } from "./render-prompt" -import Dialog from "./dialog" - -type PromptProps = Omit +type UsePromptProps = Omit const usePrompt = () => { - const dialog = async (props: PromptProps): Promise => { + const prompt = async (props: UsePromptProps): Promise => { return new Promise((resolve) => { let open = true @@ -29,7 +27,7 @@ const usePrompt = () => { const render = () => { mountRoot.render( - { }) } - return dialog + return prompt } export { usePrompt } diff --git a/yarn.lock b/yarn.lock index b28f4bd5b4fac..eeccd9f0a1717 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8021,9 +8021,9 @@ __metadata: "@vitest/coverage-v8": ^0.32.2 autoprefixer: ^10.4.14 chromatic: ^6.20.0 - class-variance-authority: ^0.6.1 clsx: ^1.2.1 copy-to-clipboard: ^3.3.3 + cva: beta date-fns: ^2.30.0 eslint: ^7.32.0 eslint-plugin-storybook: ^0.6.12 @@ -21445,15 +21445,6 @@ __metadata: languageName: node linkType: hard -"class-variance-authority@npm:^0.6.1": - version: 0.6.1 - resolution: "class-variance-authority@npm:0.6.1" - dependencies: - clsx: 1.2.1 - checksum: 0685b1a92d97fbb26b1031a9dcb9d419c4bbb163aa20a6025a11f3a92ebd6209da277c63f789b294d890a0d500558de285fd842068c824d40b5beda97e01aa1a - languageName: node - linkType: hard - "classnames@npm:^2.2.6, classnames@npm:^2.3.1": version: 2.3.2 resolution: "classnames@npm:2.3.2" @@ -21735,7 +21726,14 @@ __metadata: languageName: node linkType: hard -"clsx@npm:1.2.1, clsx@npm:^1.1.0, clsx@npm:^1.1.1, clsx@npm:^1.2.1": +"clsx@npm:2.0.0": + version: 2.0.0 + resolution: "clsx@npm:2.0.0" + checksum: c09f43b3144a0b7826b6b11b6a111b2c7440831004eecc02d333533c5e58ef0aa5f2dce071d3b25fbb8c8ea97b45df96c74bcc1d51c8c2027eb981931107b0cd + languageName: node + linkType: hard + +"clsx@npm:^1.1.0, clsx@npm:^1.1.1, clsx@npm:^1.2.1": version: 1.2.1 resolution: "clsx@npm:1.2.1" checksum: 34dead8bee24f5e96f6e7937d711978380647e936a22e76380290e35486afd8634966ce300fc4b74a32f3762c7d4c0303f442c3e259f4ce02374eb0c82834f27 @@ -23176,6 +23174,20 @@ __metadata: languageName: node linkType: hard +"cva@npm:beta": + version: 1.0.0-beta.1 + resolution: "cva@npm:1.0.0-beta.1" + dependencies: + clsx: 2.0.0 + peerDependencies: + typescript: ">= 4.5.5 < 6" + peerDependenciesMeta: + typescript: + optional: true + checksum: 0ac27613b156d0ff6b1450c3257c1b98356865366165cb973748a102ed576dc07824cd098b23da6e24155d3b732d6222b4fa83cff85fbd2df3924a5b425bfbde + languageName: node + linkType: hard + "cyclist@npm:^1.0.1": version: 1.0.2 resolution: "cyclist@npm:1.0.2" From 57ec8028e0604f557bf54c1126c94402c1f0a003 Mon Sep 17 00:00:00 2001 From: Kasper Date: Thu, 7 Dec 2023 10:05:41 +0100 Subject: [PATCH 2/3] fix version of cva --- packages/design-system/ui/package.json | 2 +- yarn.lock | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/design-system/ui/package.json b/packages/design-system/ui/package.json index 89c94a5271caa..78c222a0f6fa7 100644 --- a/packages/design-system/ui/package.json +++ b/packages/design-system/ui/package.json @@ -102,7 +102,7 @@ "@react-stately/datepicker": "^3.5.0", "clsx": "^1.2.1", "copy-to-clipboard": "^3.3.3", - "cva": "beta", + "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/yarn.lock b/yarn.lock index eeccd9f0a1717..f1d4429dcc798 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8023,7 +8023,7 @@ __metadata: chromatic: ^6.20.0 clsx: ^1.2.1 copy-to-clipboard: ^3.3.3 - cva: beta + cva: 1.0.0-beta.1 date-fns: ^2.30.0 eslint: ^7.32.0 eslint-plugin-storybook: ^0.6.12 @@ -23174,7 +23174,7 @@ __metadata: languageName: node linkType: hard -"cva@npm:beta": +"cva@npm:1.0.0-beta.1": version: 1.0.0-beta.1 resolution: "cva@npm:1.0.0-beta.1" dependencies: From 2f679d0831584b618555ee62648b079c2d05a7f9 Mon Sep 17 00:00:00 2001 From: Kasper Date: Fri, 8 Dec 2023 15:45:33 +0100 Subject: [PATCH 3/3] fix default fields --- .../ui/public/locales/en/translation.json | 2 +- .../edit-prices-modal/edit-prices-actions.tsx | 2 +- .../edit-prices-modal/index.tsx | 16 ++++++++++++++-- .../price-list-product-prices-form.tsx | 2 +- 4 files changed, 17 insertions(+), 5 deletions(-) diff --git a/packages/admin-ui/ui/public/locales/en/translation.json b/packages/admin-ui/ui/public/locales/en/translation.json index f46e9330bfcc4..7eae69f38805b 100644 --- a/packages/admin-ui/ui/public/locales/en/translation.json +++ b/packages/admin-ui/ui/public/locales/en/translation.json @@ -1512,7 +1512,7 @@ "price-list-prices-form-prices-count_other": "{{count}} prices", "price-list-product-prices-form-invalid-data-title": "Invalid data", "price-list-product-prices-form-invalid-data-body": "The data you pasted contains values that are not numbers.", - "price-list-product-prices-form-column-visibility-button": "View", + "price-list-product-prices-form-column-visibility-button": "Currencies", "price-list-product-prices-form-column-visibility-currencies-label": "Currencies", "price-list-product-prices-form-column-visibility-regions-label": "Regions", "price-list-product-prices-form-column-product-label": "Product", diff --git a/packages/admin-ui/ui/src/components/organisms/product-variants-section/edit-prices-modal/edit-prices-actions.tsx b/packages/admin-ui/ui/src/components/organisms/product-variants-section/edit-prices-modal/edit-prices-actions.tsx index 0cd3503e72b36..6c40e5e97f465 100644 --- a/packages/admin-ui/ui/src/components/organisms/product-variants-section/edit-prices-modal/edit-prices-actions.tsx +++ b/packages/admin-ui/ui/src/components/organisms/product-variants-section/edit-prices-modal/edit-prices-actions.tsx @@ -43,7 +43,7 @@ function EditPricesActions(props: EditPricesActionsProps) { diff --git a/packages/admin-ui/ui/src/components/organisms/product-variants-section/edit-prices-modal/index.tsx b/packages/admin-ui/ui/src/components/organisms/product-variants-section/edit-prices-modal/index.tsx index c99fe2430a416..1e88e3b1f6a0d 100644 --- a/packages/admin-ui/ui/src/components/organisms/product-variants-section/edit-prices-modal/index.tsx +++ b/packages/admin-ui/ui/src/components/organisms/product-variants-section/edit-prices-modal/index.tsx @@ -1,5 +1,9 @@ import { MoneyAmount, Product } from "@medusajs/client-types" -import { useAdminRegions, useAdminUpdateVariant } from "medusa-react" +import { + useAdminRegions, + useAdminStore, + useAdminUpdateVariant, +} from "medusa-react" import { useEffect, useMemo, useRef, useState } from "react" import { getAllProductPricesCurrencies, @@ -52,6 +56,7 @@ function EditPricesModal(props: EditPricesModalProps) { const { regions: storeRegions } = useAdminRegions({ limit: 1000, }) + const { store } = useAdminStore() const regionCurrenciesMap = useRegionsCurrencyMap() const regions = getAllProductPricesRegions(props.product).sort() @@ -64,7 +69,14 @@ function EditPricesModal(props: EditPricesModalProps) { useState(false) const [showSaveConfirmationPrompt, setShowSaveConfirmationPrompt] = useState(false) - const [selectedCurrencies, setSelectedCurrencies] = useState(currencies) + + const initialCurrencies = + !currencies.length && !regions.length + ? store?.currencies.map((c) => c.code) + : currencies + + const [selectedCurrencies, setSelectedCurrencies] = + useState(initialCurrencies) const [selectedRegions, setSelectedRegions] = useState(regions) const toggleCurrency = (currencyCode: string) => { diff --git a/packages/admin-ui/ui/src/domain/pricing/forms/price-list-product-prices-form/price-list-product-prices-form.tsx b/packages/admin-ui/ui/src/domain/pricing/forms/price-list-product-prices-form/price-list-product-prices-form.tsx index b9c735ee83a22..0934b18762a12 100644 --- a/packages/admin-ui/ui/src/domain/pricing/forms/price-list-product-prices-form/price-list-product-prices-form.tsx +++ b/packages/admin-ui/ui/src/domain/pricing/forms/price-list-product-prices-form/price-list-product-prices-form.tsx @@ -1395,7 +1395,7 @@ const PriceListProductPricesForm = ({ {t( "price-list-product-prices-form-column-visibility-button", - "View" + "Currencies" )}