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

chore(ui,dashboard): Use radix-ui package (#11195)

Browse Source 
* update deps for ui

* chore(ui,dashboard): Use radix-ui package

---------

Co-authored-by: Oli Juhl <59018053+olivermrbl@users.noreply.github.com>
This commit is contained in:
Kasper Fabricius Kristensen
2025-02-02 14:20:34 +01:00
committed by GitHub
parent 12c3e6a03d
commit 9822bd930b
54 changed files with 1351 additions and 877 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
.changeset/twenty-maps-walk.md Normal file
View File

@@ -0,0 +1,6 @@
---
"@medusajs/dashboard": patch
"@medusajs/ui": patch
---
chore(ui,dashboard): Use radix-ui package

2
packages/admin/dashboard/package.json
View File

@@ -49,7 +49,6 @@
"@medusajs/icons": "2.4.0",
"@medusajs/js-sdk": "2.4.0",
"@medusajs/ui": "4.0.4",
"@radix-ui/react-collapsible": "1.1.0",
"@tanstack/react-query": "5.64.2",
"@tanstack/react-table": "8.20.5",
"@tanstack/react-virtual": "^3.8.3",
@@ -63,6 +62,7 @@
"match-sorter": "^6.3.4",
"motion": "^11.15.0",
"qs": "^6.12.0",
"radix-ui": "1.1.2",
"react": "^18.2.0",
"react-country-flag": "^3.1.0",
"react-currency-input-field": "^3.6.11",

13
packages/admin/dashboard/src/components/common/form/form.tsx
View File

@@ -6,8 +6,7 @@ import {
Tooltip,
clx,
} from "@medusajs/ui"
import * as LabelPrimitives from "@radix-ui/react-label"
import { Slot } from "@radix-ui/react-slot"
import { Label as RadixLabel, Slot } from "radix-ui"
import React, {
ReactNode,
createContext,
@@ -103,8 +102,8 @@ const Item = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
Item.displayName = "Form.Item"
const Label = forwardRef<
React.ElementRef<typeof LabelPrimitives.Root>,
React.ComponentPropsWithoutRef<typeof LabelPrimitives.Root> & {
React.ElementRef<typeof RadixLabel.Root>,
React.ComponentPropsWithoutRef<typeof RadixLabel.Root> & {
optional?: boolean
tooltip?: ReactNode
icon?: ReactNode
@@ -141,8 +140,8 @@ const Label = forwardRef<
Label.displayName = "Form.Label"
const Control = forwardRef<
React.ElementRef<typeof Slot>,
React.ComponentPropsWithoutRef<typeof Slot>
React.ElementRef<typeof Slot.Root>,
React.ComponentPropsWithoutRef<typeof Slot.Root>
>(({ ...props }, ref) => {
const {
error,
@@ -153,7 +152,7 @@ const Control = forwardRef<
} = useFormField()
return (
<Slot
<Slot.Root
ref={ref}
id={formItemId}
aria-describedby={

30
packages/admin/dashboard/src/components/data-grid/components/data-grid-keyboard-shortcut-modal.tsx
View File

@@ -8,7 +8,7 @@ import {
Kbd,
Text,
} from "@medusajs/ui"
import * as Dialog from "@radix-ui/react-dialog"
import { Dialog as RadixDialog } from "radix-ui"
import { useMemo, useState } from "react"
import { useTranslation } from "react-i18next"
@@ -177,35 +177,35 @@ export const DataGridKeyboardShortcutModal = ({
}, [searchValue, shortcuts])
return (
<Dialog.Root open={open} onOpenChange={onOpenChange}>
<Dialog.Trigger asChild>
<RadixDialog.Root open={open} onOpenChange={onOpenChange}>
<RadixDialog.Trigger asChild>
<Button size="small" variant="secondary">
{t("dataGrid.shortcuts.label")}
</Button>
</Dialog.Trigger>
<Dialog.Portal>
<Dialog.Overlay
</RadixDialog.Trigger>
<RadixDialog.Portal>
<RadixDialog.Overlay
className={clx(
"bg-ui-bg-overlay fixed inset-0",
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
)}
/>
<Dialog.Content className="bg-ui-bg-subtle shadow-elevation-modal fixed left-[50%] top-[50%] flex h-full max-h-[612px] w-full max-w-[560px] translate-x-[-50%] translate-y-[-50%] flex-col divide-y overflow-hidden rounded-lg outline-none">
<RadixDialog.Content className="bg-ui-bg-subtle shadow-elevation-modal fixed left-[50%] top-[50%] flex h-full max-h-[612px] w-full max-w-[560px] translate-x-[-50%] translate-y-[-50%] flex-col divide-y overflow-hidden rounded-lg outline-none">
<div className="flex flex-col gap-y-3 px-6 py-4">
<div className="flex items-center justify-between">
<div>
<Dialog.Title asChild>
<RadixDialog.Title asChild>
<Heading>{t("app.menus.user.shortcuts")}</Heading>
</Dialog.Title>
<Dialog.Description className="sr-only"></Dialog.Description>
</RadixDialog.Title>
<RadixDialog.Description className="sr-only"></RadixDialog.Description>
</div>
<div className="flex items-center gap-x-2">
<Kbd>esc</Kbd>
<Dialog.Close asChild>
<RadixDialog.Close asChild>
<IconButton variant="transparent" size="small">
<XMark />
</IconButton>
</Dialog.Close>
</RadixDialog.Close>
</div>
</div>
<div>
@@ -238,8 +238,8 @@ export const DataGridKeyboardShortcutModal = ({
)
})}
</div>
</Dialog.Content>
</Dialog.Portal>
</Dialog.Root>
</RadixDialog.Content>
</RadixDialog.Portal>
</RadixDialog.Root>
)
}

14
packages/admin/dashboard/src/components/layout/main-layout/main-layout.tsx
View File

@@ -15,7 +15,7 @@ import {
Users,
} from "@medusajs/icons"
import { Avatar, DropdownMenu, Text, clx } from "@medusajs/ui"
import * as Collapsible from "@radix-ui/react-collapsible"
import { Collapsible as RadixCollapsible } from "radix-ui"
import { useTranslation } from "react-i18next"
import { useStore } from "../../../hooks/api/store"
@@ -323,9 +323,9 @@ const ExtensionRouteSection = () => {
<Divider variant="dashed" />
</div>
<div className="flex flex-col gap-y-1 py-3">
<Collapsible.Root defaultOpen>
<RadixCollapsible.Root defaultOpen>
<div className="px-4">
<Collapsible.Trigger asChild className="group/trigger">
<RadixCollapsible.Trigger asChild className="group/trigger">
<button className="text-ui-fg-subtle flex w-full items-center justify-between px-2">
<Text size="xsmall" weight="plus" leading="compact">
{t("app.nav.common.extensions")}
@@ -335,9 +335,9 @@ const ExtensionRouteSection = () => {
<MinusMini className="group-data-[state=closed]/trigger:hidden" />
</div>
</button>
</Collapsible.Trigger>
</RadixCollapsible.Trigger>
</div>
<Collapsible.Content>
<RadixCollapsible.Content>
<nav className="flex flex-col gap-y-0.5 py-1 pb-4">
{menuItems.map((item, i) => {
return (
@@ -352,8 +352,8 @@ const ExtensionRouteSection = () => {
)
})}
</nav>
</Collapsible.Content>
</Collapsible.Root>
</RadixCollapsible.Content>
</RadixCollapsible.Root>
</div>
</div>
)

14
packages/admin/dashboard/src/components/layout/nav-item/nav-item.tsx
View File

@@ -1,5 +1,5 @@
import { Kbd, Text, clx } from "@medusajs/ui"
import * as Collapsible from "@radix-ui/react-collapsible"
import { Collapsible as RadixCollapsible } from "radix-ui"
import {
PropsWithChildren,
ReactNode,
@@ -155,8 +155,8 @@ export const NavItem = ({
</NavLink>
</NavItemTooltip>
{items && items.length > 0 && (
<Collapsible.Root open={open} onOpenChange={setOpen}>
<Collapsible.Trigger
<RadixCollapsible.Root open={open} onOpenChange={setOpen}>
<RadixCollapsible.Trigger
className={clx(
"text-ui-fg-subtle hover:text-ui-fg-base transition-fg hover:bg-ui-bg-subtle-hover flex w-full items-center gap-x-2 rounded-md py-0.5 pl-0.5 pr-2 outline-none lg:hidden",
{ "pl-2": isSetting }
@@ -168,8 +168,8 @@ export const NavItem = ({
<Text size="small" weight="plus" leading="compact">
{label}
</Text>
</Collapsible.Trigger>
<Collapsible.Content>
</RadixCollapsible.Trigger>
<RadixCollapsible.Content>
<div className="flex flex-col gap-y-0.5 pb-2 pt-0.5">
<ul className="flex flex-col gap-y-0.5">
<li className="flex w-full items-center gap-x-1 lg:hidden">
@@ -222,8 +222,8 @@ export const NavItem = ({
})}
</ul>
</div>
</Collapsible.Content>
</Collapsible.Root>
</RadixCollapsible.Content>
</RadixCollapsible.Root>
)}
</div>
)

24
packages/admin/dashboard/src/components/layout/settings-layout/settings-layout.tsx
View File

@@ -1,6 +1,6 @@
import { ArrowUturnLeft, MinusMini } from "@medusajs/icons"
import { IconButton, Text, clx } from "@medusajs/ui"
import * as Collapsible from "@radix-ui/react-collapsible"
import { Collapsible as RadixCollapsible } from "radix-ui"
import { Fragment, useEffect, useMemo, useState } from "react"
import { useTranslation } from "react-i18next"
import { Link, useLocation } from "react-router-dom"
@@ -134,21 +134,21 @@ const SettingsSidebar = () => {
</div>
<div className="flex flex-1 flex-col">
<div className="flex flex-1 flex-col overflow-y-auto">
<CollapsibleSection
<RadixCollapsibleSection
label={t("app.nav.settings.general")}
items={routes}
/>
<div className="flex items-center justify-center px-3">
<Divider variant="dashed" />
</div>
<CollapsibleSection
<RadixCollapsibleSection
label={t("app.nav.settings.developer")}
items={developerRoutes}
/>
<div className="flex items-center justify-center px-3">
<Divider variant="dashed" />
</div>
<CollapsibleSection
<RadixCollapsibleSection
label={t("app.nav.settings.myAccount")}
items={myAccountRoutes}
/>
@@ -157,7 +157,7 @@ const SettingsSidebar = () => {
<div className="flex items-center justify-center px-3">
<Divider variant="dashed" />
</div>
<CollapsibleSection
<RadixCollapsibleSection
label={t("app.nav.common.extensions")}
items={extensionRoutes}
/>
@@ -208,7 +208,7 @@ const Header = () => {
)
}
const CollapsibleSection = ({
const RadixCollapsibleSection = ({
label,
items,
}: {
@@ -216,20 +216,20 @@ const CollapsibleSection = ({
items: INavItem[]
}) => {
return (
<Collapsible.Root defaultOpen className="py-3">
<RadixCollapsible.Root defaultOpen className="py-3">
<div className="px-3">
<div className="text-ui-fg-muted flex h-7 items-center justify-between px-2">
<Text size="small" leading="compact">
{label}
</Text>
<Collapsible.Trigger asChild>
<RadixCollapsible.Trigger asChild>
<IconButton size="2xsmall" variant="transparent" className="static">
<MinusMini className="text-ui-fg-muted" />
</IconButton>
</Collapsible.Trigger>
</RadixCollapsible.Trigger>
</div>
</div>
<Collapsible.Content>
<RadixCollapsible.Content>
<div className="pt-0.5">
<nav className="flex flex-col gap-y-0.5">
{items.map((setting) => (
@@ -237,8 +237,8 @@ const CollapsibleSection = ({
))}
</nav>
</div>
</Collapsible.Content>
</Collapsible.Root>
</RadixCollapsible.Content>
</RadixCollapsible.Root>
)
}

29
packages/admin/dashboard/src/components/layout/shell/shell.tsx
View File

@@ -1,8 +1,7 @@
import * as Dialog from "@radix-ui/react-dialog"
import { SidebarLeft, TriangleRightMini, XMark } from "@medusajs/icons"
import { IconButton, clx } from "@medusajs/ui"
import { AnimatePresence } from "motion/react"
import { Dialog as RadixDialog } from "radix-ui"
import { PropsWithChildren, ReactNode, useEffect, useState } from "react"
import { useTranslation } from "react-i18next"
import {
@@ -225,22 +224,22 @@ const MobileSidebarContainer = ({ children }: PropsWithChildren) => {
const { mobile, toggle } = useSidebar()
return (
<Dialog.Root open={mobile} onOpenChange={() => toggle("mobile")}>
<Dialog.Portal>
<Dialog.Overlay
<RadixDialog.Root open={mobile} onOpenChange={() => toggle("mobile")}>
<RadixDialog.Portal>
<RadixDialog.Overlay
className={clx(
"bg-ui-bg-overlay fixed inset-0",
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
)}
/>
<Dialog.Content
<RadixDialog.Content
className={clx(
"bg-ui-bg-subtle shadow-elevation-modal fixed inset-y-2 left-2 flex w-full max-w-[304px] flex-col overflow-hidden rounded-lg border-r",
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:slide-out-to-left-1/2 data-[state=open]:slide-in-from-left-1/2 duration-200"
)}
>
<div className="p-3">
<Dialog.Close asChild>
<RadixDialog.Close asChild>
<IconButton
size="small"
variant="transparent"
@@ -248,17 +247,17 @@ const MobileSidebarContainer = ({ children }: PropsWithChildren) => {
>
<XMark />
</IconButton>
</Dialog.Close>
<Dialog.Title className="sr-only">
</RadixDialog.Close>
<RadixDialog.Title className="sr-only">
{t("app.nav.accessibility.title")}
</Dialog.Title>
<Dialog.Description className="sr-only">
</RadixDialog.Title>
<RadixDialog.Description className="sr-only">
{t("app.nav.accessibility.description")}
</Dialog.Description>
</RadixDialog.Description>
</div>
{children}
</Dialog.Content>
</Dialog.Portal>
</Dialog.Root>
</RadixDialog.Content>
</RadixDialog.Portal>
</RadixDialog.Root>
)
}

26
packages/admin/dashboard/src/components/layout/user-menu/user-menu.tsx
View File

@@ -18,7 +18,7 @@ import {
Text,
clx,
} from "@medusajs/ui"
import * as Dialog from "@radix-ui/react-dialog"
import { Dialog as RadixDialog } from "radix-ui"
import { useTranslation } from "react-i18next"
import { Skeleton } from "../../common/skeleton"
@@ -231,25 +231,25 @@ const GlobalKeybindsModal = (props: {
: globalShortcuts
return (
<Dialog.Root {...props}>
<Dialog.Portal>
<Dialog.Overlay className="bg-ui-bg-overlay fixed inset-0" />
<Dialog.Content className="bg-ui-bg-subtle shadow-elevation-modal fixed left-[50%] top-[50%] flex h-full max-h-[612px] w-full max-w-[560px] translate-x-[-50%] translate-y-[-50%] flex-col divide-y overflow-hidden rounded-lg">
<RadixDialog.Root {...props}>
<RadixDialog.Portal>
<RadixDialog.Overlay className="bg-ui-bg-overlay fixed inset-0" />
<RadixDialog.Content className="bg-ui-bg-subtle shadow-elevation-modal fixed left-[50%] top-[50%] flex h-full max-h-[612px] w-full max-w-[560px] translate-x-[-50%] translate-y-[-50%] flex-col divide-y overflow-hidden rounded-lg">
<div className="flex flex-col gap-y-3 px-6 py-4">
<div className="flex items-center justify-between">
<div>
<Dialog.Title asChild>
<RadixDialog.Title asChild>
<Heading>{t("app.menus.user.shortcuts")}</Heading>
</Dialog.Title>
<Dialog.Description className="sr-only"></Dialog.Description>
</RadixDialog.Title>
<RadixDialog.Description className="sr-only"></RadixDialog.Description>
</div>
<div className="flex items-center gap-x-2">
<Kbd>esc</Kbd>
<Dialog.Close asChild>
<RadixDialog.Close asChild>
<IconButton variant="transparent" size="small">
<XMark />
</IconButton>
</Dialog.Close>
</RadixDialog.Close>
</div>
</div>
<div>
@@ -286,9 +286,9 @@ const GlobalKeybindsModal = (props: {
)
})}
</div>
</Dialog.Content>
</Dialog.Portal>
</Dialog.Root>
</RadixDialog.Content>
</RadixDialog.Portal>
</RadixDialog.Root>
)
}

26
packages/admin/dashboard/src/components/search/search.tsx
View File

@@ -7,8 +7,8 @@ import {
Kbd,
Text,
} from "@medusajs/ui"
import * as Dialog from "@radix-ui/react-dialog"
import { Command } from "cmdk"
import { Dialog as RadixDialog } from "radix-ui"
import {
Children,
ComponentPropsWithoutRef,
@@ -285,7 +285,7 @@ const CommandPalette = forwardRef<
))
CommandPalette.displayName = Command.displayName
interface CommandDialogProps extends Dialog.DialogProps {
interface CommandDialogProps extends RadixDialog.DialogProps {
isLoading?: boolean
}
@@ -297,10 +297,10 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
}, [props.isLoading, children])
return (
<Dialog.Root {...props}>
<Dialog.Portal>
<Dialog.Overlay className="bg-ui-bg-overlay fixed inset-0" />
<Dialog.Content
<RadixDialog.Root {...props}>
<RadixDialog.Portal>
<RadixDialog.Overlay className="bg-ui-bg-overlay fixed inset-0" />
<RadixDialog.Content
className={clx(
"bg-ui-bg-base shadow-elevation-modal fixed left-[50%] top-[50%] flex max-h-[calc(100%-16px)] w-[calc(100%-16px)] min-w-0 max-w-2xl translate-x-[-50%] translate-y-[-50%] flex-col overflow-hidden rounded-xl p-0",
{
@@ -308,12 +308,12 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
}
)}
>
<Dialog.Title className="sr-only">
<RadixDialog.Title className="sr-only">
{t("app.search.title")}
</Dialog.Title>
<Dialog.Description className="sr-only">
</RadixDialog.Title>
<RadixDialog.Description className="sr-only">
{t("app.search.description")}
</Dialog.Description>
</RadixDialog.Description>
<CommandPalette className="[&_[cmdk-group-heading]]:text-muted-foreground flex h-full flex-col overflow-hidden [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0">
{children}
</CommandPalette>
@@ -337,9 +337,9 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
</div>
</div>
</div>
</Dialog.Content>
</Dialog.Portal>
</Dialog.Root>
</RadixDialog.Content>
</RadixDialog.Portal>
</RadixDialog.Root>
)
}

18
packages/admin/dashboard/src/components/table/data-table/data-table-filter/data-table-filter.tsx
View File

@@ -1,5 +1,5 @@
import { Button, clx } from "@medusajs/ui"
import * as Popover from "@radix-ui/react-popover"
import { Popover as RadixPopover } from "radix-ui"
import { useCallback, useEffect, useMemo, useRef, useState } from "react"
import { useSearchParams } from "react-router-dom"
@@ -174,14 +174,14 @@ export const DataTableFilter = ({
}
})}
{!readonly && availableFilters.length > 0 && (
<Popover.Root modal open={open} onOpenChange={setOpen}>
<Popover.Trigger asChild id="filters_menu_trigger">
<RadixPopover.Root modal open={open} onOpenChange={setOpen}>
<RadixPopover.Trigger asChild id="filters_menu_trigger">
<Button size="small" variant="secondary">
{t("filters.addFilter")}
</Button>
</Popover.Trigger>
<Popover.Portal>
<Popover.Content
</RadixPopover.Trigger>
<RadixPopover.Portal>
<RadixPopover.Content
className={clx(
"bg-ui-bg-base text-ui-fg-base shadow-elevation-flyout z-[1] h-full max-h-[200px] w-[300px] overflow-auto rounded-lg p-1 outline-none"
)}
@@ -213,9 +213,9 @@ export const DataTableFilter = ({
</div>
)
})}
</Popover.Content>
</Popover.Portal>
</Popover.Root>
</RadixPopover.Content>
</RadixPopover.Portal>
</RadixPopover.Root>
)}
{!readonly && activeFilters.length > 0 && (
<ClearAllFilters filters={filters} prefix={prefix} />

14
packages/admin/dashboard/src/components/table/data-table/data-table-filter/date-filter.tsx
View File

@@ -1,7 +1,7 @@
import { EllipseMiniSolid } from "@medusajs/icons"
import { DatePicker, Text, clx } from "@medusajs/ui"
import * as Popover from "@radix-ui/react-popover"
import isEqual from "lodash/isEqual"
import { Popover as RadixPopover } from "radix-ui"
import { useMemo, useState } from "react"
import { t } from "i18next"
@@ -124,7 +124,7 @@ export const DateFilter = ({
}
return (
<Popover.Root modal open={open} onOpenChange={handleOpenChange}>
<RadixPopover.Root modal open={open} onOpenChange={handleOpenChange}>
<FilterChip
hadPreviousValue={!!previousValue}
label={label}
@@ -133,8 +133,8 @@ export const DateFilter = ({
readonly={readonly}
/>
{!readonly && (
<Popover.Portal>
<Popover.Content
<RadixPopover.Portal>
<RadixPopover.Content
data-name="date_filter_content"
align="start"
sideOffset={8}
@@ -238,10 +238,10 @@ export const DateFilter = ({
</div>
</div>
)}
</Popover.Content>
</Popover.Portal>
</RadixPopover.Content>
</RadixPopover.Portal>
)}
</Popover.Root>
</RadixPopover.Root>
)
}

30
packages/admin/dashboard/src/components/table/data-table/data-table-filter/filter-chip.tsx
View File

@@ -1,8 +1,8 @@
import { XMarkMini } from "@medusajs/icons"
import { Text, clx } from "@medusajs/ui"
import { useTranslation } from "react-i18next"
import { Popover as RadixPopover } from "radix-ui"
import { MouseEvent } from "react"
import * as Popover from "@radix-ui/react-popover"
import { useTranslation } from "react-i18next"
export type FilterChipProps = {
hadPreviousValue?: boolean
@@ -29,12 +29,8 @@ const FilterChip = ({
}
return (
<div
className="bg-ui-bg-field transition-fg shadow-borders-base text-ui-fg-subtle flex cursor-default select-none items-stretch overflow-hidden rounded-md"
>
{!hadPreviousValue && (
<Popover.Anchor />
)}
<div className="bg-ui-bg-field transition-fg shadow-borders-base text-ui-fg-subtle flex cursor-default select-none items-stretch overflow-hidden rounded-md">
{!hadPreviousValue && <RadixPopover.Anchor />}
<div
className={clx(
"flex items-center justify-center whitespace-nowrap px-2 py-1",
@@ -61,12 +57,16 @@ const FilterChip = ({
</div>
)}
{!!(value || hadPreviousValue) && (
<Popover.Trigger asChild className={clx("flex-1 cursor-pointer overflow-hidden border-r p-1 px-2",
{
"hover:bg-ui-bg-field-hover": !readonly,
"data-[state=open]:bg-ui-bg-field-hover": !readonly,
}
)}>
<RadixPopover.Trigger
asChild
className={clx(
"flex-1 cursor-pointer overflow-hidden border-r p-1 px-2",
{
"hover:bg-ui-bg-field-hover": !readonly,
"data-[state=open]:bg-ui-bg-field-hover": !readonly,
}
)}
>
<Text
size="small"
leading="compact"
@@ -75,7 +75,7 @@ const FilterChip = ({
>
{value || "\u00A0"}
</Text>
</Popover.Trigger>
</RadixPopover.Trigger>
)}
</div>
{!readonly && !!(value || hadPreviousValue) && (

44
packages/admin/dashboard/src/components/table/data-table/data-table-filter/number-filter.tsx
View File

@@ -1,21 +1,18 @@
import { EllipseMiniSolid } from "@medusajs/icons"
import { Input, Label, clx } from "@medusajs/ui"
import * as Popover from "@radix-ui/react-popover"
import * as RadioGroup from "@radix-ui/react-radio-group"
import { debounce } from "lodash"
import {
ChangeEvent,
useCallback,
useEffect,
useState,
} from "react"
Popover as RadixPopover,
RadioGroup as RadixRadioGroup,
} from "radix-ui"
import { ChangeEvent, useCallback, useEffect, useState } from "react"
import { useTranslation } from "react-i18next"
import { TFunction } from "i18next"
import { useSelectedParams } from "../hooks"
import { useDataTableFilterContext } from "./context"
import { IFilter } from "./types"
import { TFunction } from "i18next"
import FilterChip from "./filter-chip"
import { IFilter } from "./types"
type NumberFilterProps = IFilter
@@ -140,7 +137,7 @@ export const NumberFilter = ({
const previousDisplayValue = parseDisplayValue(previousValue, t)
return (
<Popover.Root modal open={open} onOpenChange={handleOpenChange}>
<RadixPopover.Root modal open={open} onOpenChange={handleOpenChange}>
<FilterChip
hasOperator
hadPreviousValue={!!previousDisplayValue}
@@ -150,8 +147,8 @@ export const NumberFilter = ({
readonly={readonly}
/>
{!readonly && (
<Popover.Portal>
<Popover.Content
<RadixPopover.Portal>
<RadixPopover.Content
data-name="number_filter_content"
align="start"
sideOffset={8}
@@ -171,7 +168,7 @@ export const NumberFilter = ({
}}
>
<div className="p-1">
<RadioGroup.Root
<RadixRadioGroup.Root
value={operator}
onValueChange={(val) => setOperator(val as Comparison)}
className="flex flex-col items-start"
@@ -179,20 +176,20 @@ export const NumberFilter = ({
autoFocus
>
{operators.map((o) => (
<RadioGroup.Item
<RadixRadioGroup.Item
key={o.operator}
value={o.operator}
className="txt-compact-small hover:bg-ui-bg-base-hover focus-visible:bg-ui-bg-base-hover active:bg-ui-bg-base-pressed transition-fg grid w-full grid-cols-[20px_1fr] gap-2 rounded-[4px] px-2 py-1.5 text-left outline-none"
>
<div className="size-5">
<RadioGroup.Indicator>
<RadixRadioGroup.Indicator>
<EllipseMiniSolid />
</RadioGroup.Indicator>
</RadixRadioGroup.Indicator>
</div>
<span className="w-full">{o.label}</span>
</RadioGroup.Item>
</RadixRadioGroup.Item>
))}
</RadioGroup.Root>
</RadixRadioGroup.Root>
</div>
<div>
{operator === "range" ? (
@@ -245,14 +242,17 @@ export const NumberFilter = ({
</div>
)}
</div>
</Popover.Content>
</Popover.Portal>
</RadixPopover.Content>
</RadixPopover.Portal>
)}
</Popover.Root>
</RadixPopover.Root>
)
}
const parseDisplayValue = (value: string[] | null | undefined, t: TFunction) => {
const parseDisplayValue = (
value: string[] | null | undefined,
t: TFunction
) => {
const parsed = JSON.parse(value?.join(",") || "{}")
let displayValue = ""

14
packages/admin/dashboard/src/components/table/data-table/data-table-filter/select-filter.tsx
View File

@@ -1,7 +1,7 @@
import { CheckMini, EllipseMiniSolid, XMarkMini } from "@medusajs/icons"
import { clx } from "@medusajs/ui"
import * as Popover from "@radix-ui/react-popover"
import { Command } from "cmdk"
import { Popover as RadixPopover } from "radix-ui"
import { useState } from "react"
import { useTranslation } from "react-i18next"
@@ -98,7 +98,7 @@ export const SelectFilter = ({
: null
return (
<Popover.Root modal open={open} onOpenChange={handleOpenChange}>
<RadixPopover.Root modal open={open} onOpenChange={handleOpenChange}>
<FilterChip
hasOperator
hadPreviousValue={!!normalizedPrev?.length}
@@ -108,8 +108,8 @@ export const SelectFilter = ({
onRemove={handleRemove}
/>
{!readonly && (
<Popover.Portal>
<Popover.Content
<RadixPopover.Portal>
<RadixPopover.Content
hideWhenDetached
align="start"
sideOffset={8}
@@ -193,9 +193,9 @@ export const SelectFilter = ({
})}
</Command.List>
</Command>
</Popover.Content>
</Popover.Portal>
</RadixPopover.Content>
</RadixPopover.Portal>
)}
</Popover.Root>
</RadixPopover.Root>
)
}

20
packages/admin/dashboard/src/components/table/data-table/data-table-filter/string-filter.tsx
View File

@@ -1,11 +1,11 @@
import { Input, Label, clx } from "@medusajs/ui"
import * as Popover from "@radix-ui/react-popover"
import { debounce } from "lodash"
import { Popover as RadixPopover } from "radix-ui"
import { ChangeEvent, useCallback, useEffect, useState } from "react"
import { useSelectedParams } from "../hooks"
import { useDataTableFilterContext } from "./context"
import { IFilter } from "./types"
import FilterChip from "./filter-chip"
import { IFilter } from "./types"
type StringFilterProps = IFilter
@@ -24,7 +24,9 @@ export const StringFilter = ({
const query = selectedParams.get()
const [previousValue, setPreviousValue] = useState<string | undefined>(query?.[0])
const [previousValue, setPreviousValue] = useState<string | undefined>(
query?.[0]
)
// eslint-disable-next-line react-hooks/exhaustive-deps
const debouncedOnChange = useCallback(
@@ -69,7 +71,7 @@ export const StringFilter = ({
}
return (
<Popover.Root modal open={open} onOpenChange={handleOpenChange}>
<RadixPopover.Root modal open={open} onOpenChange={handleOpenChange}>
<FilterChip
hasOperator
hadPreviousValue={!!previousValue}
@@ -79,8 +81,8 @@ export const StringFilter = ({
readonly={readonly}
/>
{!readonly && (
<Popover.Portal>
<Popover.Content
<RadixPopover.Portal>
<RadixPopover.Content
hideWhenDetached
align="start"
sideOffset={8}
@@ -115,9 +117,9 @@ export const StringFilter = ({
/>
</div>
</div>
</Popover.Content>
</Popover.Portal>
</RadixPopover.Content>
</RadixPopover.Portal>
)}
</Popover.Root>
</RadixPopover.Root>
)
}

18
packages/admin/dashboard/src/routes/locations/common/components/conditional-price-form/conditional-price-form.tsx
View File

@@ -17,7 +17,7 @@ import {
Text,
Tooltip,
} from "@medusajs/ui"
import * as Accordion from "@radix-ui/react-accordion"
import { Accordion as RadixAccordion } from "radix-ui"
import React, { Fragment, ReactNode, useRef, useState } from "react"
import {
Control,
@@ -235,7 +235,7 @@ const ConditionalPriceList = ({
onValueChange,
}: ConditionalPriceListProps) => {
return (
<Accordion.Root
<RadixAccordion.Root
type="multiple"
defaultValue={[getRuleValue(0)]}
value={value}
@@ -243,7 +243,7 @@ const ConditionalPriceList = ({
className="flex flex-col gap-y-3"
>
{children}
</Accordion.Root>
</RadixAccordion.Root>
)
}
@@ -268,13 +268,13 @@ const ConditionalPriceItem = ({
}
return (
<Accordion.Item
<RadixAccordion.Item
value={getRuleValue(index)}
className={clx(
"bg-ui-bg-component shadow-elevation-card-rest rounded-lg"
)}
>
<Accordion.Trigger asChild>
<RadixAccordion.Trigger asChild>
<div className="group/trigger flex w-full cursor-pointer items-start justify-between gap-x-2 p-3">
<div className="flex flex-1 flex-wrap items-center justify-between gap-2">
<div className="flex h-7 items-center">
@@ -310,8 +310,8 @@ const ConditionalPriceItem = ({
</IconButton>
</div>
</div>
</Accordion.Trigger>
<Accordion.Content className="text-ui-fg-subtle">
</RadixAccordion.Trigger>
<RadixAccordion.Content className="text-ui-fg-subtle">
<Divider variant="dashed" />
<Form.Field
control={control}
@@ -392,8 +392,8 @@ const ConditionalPriceItem = ({
control={control}
currency={currency}
/>
</Accordion.Content>
</Accordion.Item>
</RadixAccordion.Content>
</RadixAccordion.Item>
)
}

14
packages/admin/dashboard/src/routes/orders/order-detail/components/order-activity-section/order-timeline.tsx
View File

@@ -1,5 +1,5 @@
import { Button, Text, Tooltip, clx, usePrompt } from "@medusajs/ui"
import * as Collapsible from "@radix-ui/react-collapsible"
import { Collapsible as RadixCollapsible } from "radix-ui"
import { PropsWithChildren, ReactNode, useMemo, useState } from "react"
@@ -628,14 +628,14 @@ const OrderActivityCollapsible = ({
}
return (
<Collapsible.Root open={open} onOpenChange={setOpen}>
<RadixCollapsible.Root open={open} onOpenChange={setOpen}>
{!open && (
<div className="grid grid-cols-[20px_1fr] items-start gap-2">
<div className="flex size-full flex-col items-center">
<div className="border-ui-border-strong w-px flex-1 bg-[linear-gradient(var(--border-strong)_33%,rgba(255,255,255,0)_0%)] bg-[length:1px_3px] bg-right bg-repeat-y" />
</div>
<div className="pb-4">
<Collapsible.Trigger className="text-left">
<RadixCollapsible.Trigger className="text-left">
<Text
size="small"
leading="compact"
@@ -646,11 +646,11 @@ const OrderActivityCollapsible = ({
count: activities.length,
})}
</Text>
</Collapsible.Trigger>
</RadixCollapsible.Trigger>
</div>
</div>
)}
<Collapsible.Content>
<RadixCollapsible.Content>
<div className="flex flex-col gap-y-0.5">
{activities.map((item, index) => {
return (
@@ -667,8 +667,8 @@ const OrderActivityCollapsible = ({
)
})}
</div>
</Collapsible.Content>
</Collapsible.Root>
</RadixCollapsible.Content>
</RadixCollapsible.Root>
)
}

14
packages/admin/dashboard/src/routes/products/common/components/category-combobox/category-combobox.tsx
View File

@@ -7,7 +7,7 @@ import {
} from "@medusajs/icons"
import { AdminProductCategoryResponse } from "@medusajs/types"
import { Text, clx } from "@medusajs/ui"
import * as Popover from "@radix-ui/react-popover"
import { Popover as RadixPopover } from "radix-ui"
import {
CSSProperties,
ComponentPropsWithoutRef,
@@ -239,8 +239,8 @@ export const CategoryCombobox = forwardRef<
}
return (
<Popover.Root open={open} onOpenChange={handleOpenChange}>
<Popover.Anchor
<RadixPopover.Root open={open} onOpenChange={handleOpenChange}>
<RadixPopover.Anchor
asChild
onClick={() => {
if (!open) {
@@ -317,8 +317,8 @@ export const CategoryCombobox = forwardRef<
<TrianglesMini className="text-ui-fg-muted" />
</button>
</div>
</Popover.Anchor>
<Popover.Content
</RadixPopover.Anchor>
<RadixPopover.Content
sideOffset={4}
role="listbox"
className={clx(
@@ -454,8 +454,8 @@ export const CategoryCombobox = forwardRef<
</div>
)}
</div>
</Popover.Content>
</Popover.Root>
</RadixPopover.Content>
</RadixPopover.Root>
)
})

165
packages/admin/dashboard/src/routes/tax-regions/common/components/tax-override-card/tax-override-card.tsx
View File

@@ -1,23 +1,20 @@
import {
ArrowDownRightMini,
PencilSquare,
Trash,
TriangleRightMini,
ArrowDownRightMini,
PencilSquare,
Trash,
TriangleRightMini,
} from "@medusajs/icons"
import { HttpTypes } from "@medusajs/types"
import { Badge, IconButton, StatusBadge, Text, Tooltip } from "@medusajs/ui"
import * as Collapsible from "@radix-ui/react-collapsible"
import { Collapsible as RadixCollapsible } from "radix-ui"
import { ComponentPropsWithoutRef } from "react"
import { useTranslation } from "react-i18next"
import { FetchError } from "@medusajs/js-sdk"
import { ActionMenu } from "../../../../../components/common/action-menu"
import { Divider } from "../../../../../components/common/divider"
import { useCollections } from "../../../../../hooks/api/collections"
import { useCustomerGroups } from "../../../../../hooks/api/customer-groups"
import { useProductTypes } from "../../../../../hooks/api/product-types"
import { useProducts } from "../../../../../hooks/api/products"
import { useProductTags } from "../../../../../hooks/api/tags"
import { formatPercentage } from "../../../../../lib/percentage-helpers"
import { TaxRateRuleReferenceType } from "../../constants"
import { useDeleteTaxRateAction } from "../../hooks"
@@ -50,14 +47,14 @@ export const TaxOverrideCard = ({ taxRate }: TaxOverrideCardProps) => {
).length
return (
<Collapsible.Root>
<RadixCollapsible.Root>
<div className="flex items-center justify-between px-6 py-3">
<div className="flex items-center gap-x-2">
<Collapsible.Trigger asChild>
<RadixCollapsible.Trigger asChild>
<IconButton size="2xsmall" variant="transparent" className="group">
<TriangleRightMini className="text-ui-fg-muted transition-transform group-data-[state='open']:rotate-90" />
</IconButton>
</Collapsible.Trigger>
</RadixCollapsible.Trigger>
<div className="flex items-center gap-x-1.5">
<Text size="small" weight="plus" leading="compact">
{taxRate.name}
@@ -110,7 +107,7 @@ export const TaxOverrideCard = ({ taxRate }: TaxOverrideCardProps) => {
/>
</div>
</div>
<Collapsible.Content>
<RadixCollapsible.Content>
<div className="bg-ui-bg-subtle">
<Divider variant="dashed" />
<div className="px-6 py-3">
@@ -154,8 +151,8 @@ export const TaxOverrideCard = ({ taxRate }: TaxOverrideCardProps) => {
</div>
</div>
</div>
</Collapsible.Content>
</Collapsible.Root>
</RadixCollapsible.Content>
</RadixCollapsible.Root>
)
}
@@ -186,18 +183,18 @@ const ReferenceBadge = ({
case TaxRateRuleReferenceType.PRODUCT:
label = t("taxRegions.fields.targets.tags.product")
break
case TaxRateRuleReferenceType.PRODUCT_COLLECTION:
label = t("taxRegions.fields.targets.tags.productCollection")
break
case TaxRateRuleReferenceType.PRODUCT_TAG:
label = t("taxRegions.fields.targets.tags.productTag")
break
// case TaxRateRuleReferenceType.PRODUCT_COLLECTION:
// label = t("taxRegions.fields.targets.tags.productCollection")
// break
// case TaxRateRuleReferenceType.PRODUCT_TAG:
// label = t("taxRegions.fields.targets.tags.productTag")
// break
case TaxRateRuleReferenceType.PRODUCT_TYPE:
label = t("taxRegions.fields.targets.tags.productType")
break
case TaxRateRuleReferenceType.CUSTOMER_GROUP:
label = t("taxRegions.fields.targets.tags.customerGroup")
break
// case TaxRateRuleReferenceType.CUSTOMER_GROUP:
// label = t("taxRegions.fields.targets.tags.customerGroup")
// break
}
if (!label) {
@@ -277,15 +274,15 @@ const useReferenceValues = (
}
)
const tags = useProductTags(
{
id: ids,
limit: 10,
},
{
enabled: !!ids.length && type === TaxRateRuleReferenceType.PRODUCT_TAG,
}
)
// const tags = useProductTags(
// {
// id: ids,
// limit: 10,
// },
// {
// enabled: !!ids.length && type === TaxRateRuleReferenceType.PRODUCT_TAG,
// }
// )
const productTypes = useProductTypes(
{
@@ -297,26 +294,26 @@ const useReferenceValues = (
}
)
const collections = useCollections(
{
id: ids,
limit: 10,
},
{
enabled:
!!ids.length && type === TaxRateRuleReferenceType.PRODUCT_COLLECTION,
}
)
// const collections = useCollections(
// {
// id: ids,
// limit: 10,
// },
// {
// enabled:
// !!ids.length && type === TaxRateRuleReferenceType.PRODUCT_COLLECTION,
// }
// )
const customerGroups = useCustomerGroups(
{
id: ids,
limit: 10,
},
{
enabled: !!ids.length && type === TaxRateRuleReferenceType.CUSTOMER_GROUP,
}
)
// const customerGroups = useCustomerGroups(
// {
// id: ids,
// limit: 10,
// },
// {
// enabled: !!ids.length && type === TaxRateRuleReferenceType.CUSTOMER_GROUP,
// }
// )
switch (type) {
case TaxRateRuleReferenceType.PRODUCT:
@@ -330,17 +327,17 @@ const useReferenceValues = (
isError: products.isError,
error: products.error,
}
case TaxRateRuleReferenceType.PRODUCT_TAG:
return {
labels: tags.product_tags?.map((tag: any) => tag.value),
isPending: tags.isPending,
additional:
tags.product_tags && tags.count
? tags.count - tags.product_tags.length
: 0,
isError: tags.isError,
error: tags.error,
}
// case TaxRateRuleReferenceType.PRODUCT_TAG:
// return {
// labels: tags.product_tags?.map((tag: any) => tag.value),
// isPending: tags.isPending,
// additional:
// tags.product_tags && tags.count
// ? tags.count - tags.product_tags.length
// : 0,
// isError: tags.isError,
// error: tags.error,
// }
case TaxRateRuleReferenceType.PRODUCT_TYPE:
return {
labels: productTypes.product_types?.map((type) => type.value),
@@ -352,27 +349,27 @@ const useReferenceValues = (
isError: productTypes.isError,
error: productTypes.error,
}
case TaxRateRuleReferenceType.PRODUCT_COLLECTION:
return {
labels: collections.collections?.map((collection) => collection.title!),
isPending: collections.isPending,
additional:
collections.collections && collections.count
? collections.count - collections.collections.length
: 0,
isError: collections.isError,
error: collections.error,
}
case TaxRateRuleReferenceType.CUSTOMER_GROUP:
return {
labels: customerGroups.customer_groups?.map((group) => group.name!),
isPending: customerGroups.isPending,
additional:
customerGroups.customer_groups && customerGroups.count
? customerGroups.count - customerGroups.customer_groups.length
: 0,
isError: customerGroups.isError,
error: customerGroups.error,
}
// case TaxRateRuleReferenceType.PRODUCT_COLLECTION:
// return {
// labels: collections.collections?.map((collection) => collection.title!),
// isPending: collections.isPending,
// additional:
// collections.collections && collections.count
// ? collections.count - collections.collections.length
// : 0,
// isError: collections.isError,
// error: collections.error,
// }
// case TaxRateRuleReferenceType.CUSTOMER_GROUP:
// return {
// labels: customerGroups.customer_groups?.map((group) => group.name!),
// isPending: customerGroups.isPending,
// additional:
// customerGroups.customer_groups && customerGroups.count
// ? customerGroups.count - customerGroups.customer_groups.length
// : 0,
// isError: customerGroups.isError,
// error: customerGroups.error,
// }
}
}

16
packages/admin/dashboard/src/routes/workflow-executions/workflow-execution-detail/components/workflow-execution-history-section/workflow-execution-history-section.tsx
View File

@@ -1,4 +1,5 @@
import { Spinner, TriangleDownMini } from "@medusajs/icons"
import { HttpTypes } from "@medusajs/types"
import {
clx,
CodeBlock,
@@ -7,8 +8,8 @@ import {
IconButton,
Text,
} from "@medusajs/ui"
import * as Collapsible from "@radix-ui/react-collapsible"
import { format } from "date-fns"
import { Collapsible as RadixCollapsible } from "radix-ui"
import { useEffect, useRef, useState } from "react"
import { useTranslation } from "react-i18next"
import { useLocation } from "react-router-dom"
@@ -20,7 +21,6 @@ import {
STEP_SKIPPED_STATES,
} from "../../../constants"
import { TransactionStepState, TransactionStepStatus } from "../../../types"
import { HttpTypes } from "@medusajs/types"
type WorkflowExecutionHistorySectionProps = {
execution: HttpTypes.AdminWorkflowExecution
@@ -154,8 +154,8 @@ const Event = ({
/>
</div>
</div>
<Collapsible.Root open={open} onOpenChange={setOpen}>
<Collapsible.Trigger asChild>
<RadixCollapsible.Root open={open} onOpenChange={setOpen}>
<RadixCollapsible.Trigger asChild>
<div className="group flex cursor-pointer items-start justify-between outline-none">
<Text size="small" leading="compact" weight="plus">
{identifier}
@@ -171,8 +171,8 @@ const Event = ({
</IconButton>
</div>
</div>
</Collapsible.Trigger>
<Collapsible.Content ref={ref}>
</RadixCollapsible.Trigger>
<RadixCollapsible.Content ref={ref}>
<div className="flex flex-col gap-y-2 pb-4 pt-2">
<div className="text-ui-fg-subtle flex flex-col gap-y-2">
<Text size="small" leading="compact">
@@ -269,8 +269,8 @@ const Event = ({
</div>
)}
</div>
</Collapsible.Content>
</Collapsible.Root>
</RadixCollapsible.Content>
</RadixCollapsible.Root>
</div>
)
}

16
packages/design-system/ui/package.json
View File

@@ -82,27 +82,13 @@
},
"dependencies": {
"@medusajs/icons": "~2.4.0",
"@radix-ui/react-accordion": "1.2.0",
"@radix-ui/react-alert-dialog": "1.1.1",
"@radix-ui/react-avatar": "1.1.0",
"@radix-ui/react-checkbox": "1.1.1",
"@radix-ui/react-dialog": "1.1.1",
"@radix-ui/react-dropdown-menu": "2.1.1",
"@radix-ui/react-label": "2.1.0",
"@radix-ui/react-popover": "1.1.1",
"@radix-ui/react-portal": "1.1.1",
"@radix-ui/react-radio-group": "1.2.0",
"@radix-ui/react-select": "2.1.1",
"@radix-ui/react-slot": "1.1.0",
"@radix-ui/react-switch": "1.1.0",
"@radix-ui/react-tabs": "1.1.0",
"@radix-ui/react-tooltip": "1.1.2",
"@tanstack/react-table": "8.20.5",
"clsx": "^1.2.1",
"copy-to-clipboard": "^3.3.3",
"cva": "1.0.0-beta.1",
"prism-react-renderer": "^2.0.6",
"prismjs": "^1.29.0",
"radix-ui": "1.1.2",
"react-aria": "^3.33.1",
"react-currency-input-field": "^3.6.11",
"react-stately": "^3.31.1",

6
packages/design-system/ui/src/blocks/data-table/components/data-table-action-cell.tsx
View File

@@ -2,11 +2,11 @@
import * as React from "react"
import type { DataTableActionColumnDefMeta } from "@/blocks/data-table/types"
import { DropdownMenu } from "@/components/dropdown-menu"
import { IconButton } from "@/components/icon-button"
import { EllipsisHorizontal } from "@medusajs/icons"
import { CellContext } from "@tanstack/react-table"
import { DropdownMenu } from "../../../components/dropdown-menu"
import { IconButton } from "../../../components/icon-button"
import { DataTableActionColumnDefMeta } from "../types"
interface DataTableActionCellProps<TData> {
ctx: CellContext<TData, unknown>

5
packages/design-system/ui/src/blocks/data-table/components/data-table-select-cell.tsx
View File

@@ -1,8 +1,7 @@
"use client"
import type { DataTableCellContext, DataTableHeaderContext } from "@/blocks/data-table/types"
import { Checkbox } from "@/components/checkbox"
import { CheckedState } from "@radix-ui/react-checkbox"
import { Checkbox, CheckboxCheckedState } from "@/components/checkbox"
import * as React from "react"
interface DataTableSelectCellProps<TData> {
@@ -32,7 +31,7 @@ const DataTableSelectHeader = <TData,>(props: DataTableSelectHeaderProps<TData>)
? "indeterminate"
: props.ctx.table.getIsAllPageRowsSelected()
const onChange = (checked: CheckedState) => {
const onChange = (checked: CheckboxCheckedState) => {
props.ctx.table.toggleAllPageRowsSelected(!!checked)
}

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

@@ -1,7 +1,7 @@
"use client"
import * as Primitives from "@radix-ui/react-avatar"
import { cva, type VariantProps } from "cva"
import { Avatar as RadixAvatar } from "radix-ui"
import * as React from "react"
import { clx } from "@/utils/clx"
@@ -116,7 +116,7 @@ const innerVariants = cva({
interface AvatarProps
extends Omit<
React.ComponentPropsWithoutRef<typeof Primitives.Root>,
React.ComponentPropsWithoutRef<typeof RadixAvatar.Root>,
"asChild" | "children" | "size"
>,
VariantProps<typeof avatarVariants> {
@@ -128,7 +128,7 @@ interface AvatarProps
* This component is based on the [Radix UI Avatar](https://www.radix-ui.com/primitives/docs/components/avatar) primitive.
*/
const Avatar = React.forwardRef<
React.ElementRef<typeof Primitives.Root>,
React.ElementRef<typeof RadixAvatar.Root>,
AvatarProps
>(
(
@@ -155,7 +155,7 @@ const Avatar = React.forwardRef<
ref
) => {
return (
<Primitives.Root
<RadixAvatar.Root
ref={ref}
{...props}
className={clx(
@@ -164,20 +164,20 @@ const Avatar = React.forwardRef<
)}
>
{src && (
<Primitives.Image
<RadixAvatar.Image
src={src}
className={innerVariants({ variant, size })}
/>
)}
<Primitives.Fallback
<RadixAvatar.Fallback
className={clx(
innerVariants({ variant, size }),
"bg-ui-bg-component-hover text-ui-fg-subtle pointer-events-none flex select-none items-center justify-center"
)}
>
{fallback}
</Primitives.Fallback>
</Primitives.Root>
</RadixAvatar.Fallback>
</RadixAvatar.Root>
)
}
)

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

@@ -1,5 +1,5 @@
import { Slot } from "@radix-ui/react-slot"
import { VariantProps, cva } from "cva"
import { Slot } from "radix-ui"
import * as React from "react"
import { clx } from "@/utils/clx"
@@ -131,7 +131,7 @@ const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
}: BadgeProps,
ref
) => {
const Component = asChild ? Slot : "span"
const Component = asChild ? Slot.Root : "span"
return (
<Component

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

@@ -1,5 +1,5 @@
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "cva"
import { Slot } from "radix-ui"
import * as React from "react"
import { clx } from "@/utils/clx"
@@ -90,7 +90,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
}: ButtonProps,
ref
) => {
const Component = asChild ? Slot : "button"
const Component = asChild ? Slot.Root : "button"
/**
* In the case of a button where asChild is true, and isLoading is true, we ensure that

4
packages/design-system/ui/src/components/calender/calendar.stories.tsx
View File

@@ -1,8 +1,8 @@
import { Button } from "@/components/button"
import { Calendar } from "@/components/calender/calendar"
import type { Meta, StoryObj } from "@storybook/react"
import * as React from "react"
import { ComponentPropsWithoutRef } from "react"
import { Button } from "../button"
import { Calendar } from "./calendar"
const meta: Meta<typeof Calendar> = {
title: "Components/CalendarNew",

14
packages/design-system/ui/src/components/checkbox/checkbox.tsx
View File

@@ -1,7 +1,7 @@
"use client"
import { CheckMini, MinusMini } from "@medusajs/icons"
import * as Primitives from "@radix-ui/react-checkbox"
import { Checkbox as RadixCheckbox } from "radix-ui"
import * as React from "react"
import { clx } from "@/utils/clx"
@@ -11,13 +11,13 @@ import { CheckboxCheckedState } from "./types"
* This component is based on the [Radix UI Checkbox](https://www.radix-ui.com/primitives/docs/components/checkbox) primitive.
*/
const Checkbox = React.forwardRef<
React.ElementRef<typeof Primitives.Root>,
React.ComponentPropsWithoutRef<typeof Primitives.Root> & {
React.ElementRef<typeof RadixCheckbox.Root>,
React.ComponentPropsWithoutRef<typeof RadixCheckbox.Root> & {
checked?: CheckboxCheckedState | undefined
}
>(({ className, checked, ...props }, ref) => {
return (
<Primitives.Root
<RadixCheckbox.Root
{...props}
ref={ref}
checked={checked}
@@ -36,11 +36,11 @@ const Checkbox = React.forwardRef<
"group-data-[state=indeterminate]:bg-ui-bg-interactive group-data-[state=indeterminate]:shadow-borders-interactive-with-shadow"
)}
>
<Primitives.Indicator>
<RadixCheckbox.Indicator>
{checked === "indeterminate" ? <MinusMini /> : <CheckMini />}
</Primitives.Indicator>
</RadixCheckbox.Indicator>
</div>
</Primitives.Root>
</RadixCheckbox.Root>
)
})
Checkbox.displayName = "Checkbox"

4
packages/design-system/ui/src/components/checkbox/types.ts
View File

@@ -1,3 +1,3 @@
import { CheckedState } from "@radix-ui/react-checkbox"
import type { Checkbox } from "radix-ui"
export type CheckboxCheckedState = CheckedState
export type CheckboxCheckedState = Checkbox.CheckedState

3
packages/design-system/ui/src/components/command-bar/command-bar.tsx
View File

@@ -1,7 +1,6 @@
"use client"
import * as Popover from "@radix-ui/react-popover"
import * as Portal from "@radix-ui/react-portal"
import { Popover, Portal } from "radix-ui"
import * as React from "react"
import { Kbd } from "@/components/kbd"

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

@@ -8,8 +8,8 @@ import {
SquareTwoStack,
SquareTwoStackMini,
} from "@medusajs/icons"
import { Slot } from "@radix-ui/react-slot"
import copy from "copy-to-clipboard"
import { Slot } from "radix-ui"
import React, { useState } from "react"
type CopyProps = React.HTMLAttributes<HTMLButtonElement> & {
@@ -81,7 +81,7 @@ const Copy = React.forwardRef<HTMLButtonElement, CopyProps>(
const isDefault = isDefaultVariant(variant)
const Component = asChild ? Slot : "button"
const Component = asChild ? Slot.Root : "button"
return (
<Tooltip content={text} open={done || open} onOpenChange={setOpen}>

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

@@ -1,9 +1,9 @@
import { Button } from "@/components/button"
import { Drawer } from "@/components/drawer"
import { Label } from "@/components/label"
import type { Meta, StoryObj } from "@storybook/react"
import * as React from "react"
import { ComponentPropsWithoutRef } from "react"
import { Button } from "../button"
import { Drawer } from "../drawer"
import { Label } from "../label"
import { DatePicker } from "./date-picker"
const meta: Meta<typeof DatePicker> = {

48
packages/design-system/ui/src/components/drawer/drawer.tsx
View File

@@ -1,7 +1,7 @@
"use client"
import { XMark } from "@medusajs/icons"
import * as DrawerPrimitives from "@radix-ui/react-dialog"
import { Dialog as RadixDialog } from "radix-ui"
import * as React from "react"
import { IconButton } from "@/components/icon-button"
@@ -9,7 +9,7 @@ import { Kbd } from "@/components/kbd"
import { Text } from "@/components/text"
import { clx } from "@/utils/clx"
interface DrawerRootProps extends React.ComponentPropsWithoutRef<typeof DrawerPrimitives.Root> {}
interface DrawerRootProps extends React.ComponentPropsWithoutRef<typeof RadixDialog.Root> {}
/**
* This component is based on the [Radix UI Dialog](https://www.radix-ui.com/primitives/docs/components/dialog) primitives.
@@ -17,65 +17,65 @@ interface DrawerRootProps extends React.ComponentPropsWithoutRef<typeof DrawerPr
const DrawerRoot = (
props: DrawerRootProps
) => {
return <DrawerPrimitives.Root {...props} />
return <RadixDialog.Root {...props} />
}
DrawerRoot.displayName = "Drawer"
interface DrawerTriggerProps extends React.ComponentPropsWithoutRef<typeof DrawerPrimitives.Trigger> {}
interface DrawerTriggerProps extends React.ComponentPropsWithoutRef<typeof RadixDialog.Trigger> {}
/**
* This component is used to create the trigger button that opens the drawer.
* It accepts props from the [Radix UI Dialog Trigger](https://www.radix-ui.com/primitives/docs/components/dialog#trigger) component.
*/
const DrawerTrigger = React.forwardRef<
React.ElementRef<typeof DrawerPrimitives.Trigger>,
React.ElementRef<typeof RadixDialog.Trigger>,
DrawerTriggerProps
>(({ className, ...props }: DrawerTriggerProps, ref) => {
return (
<DrawerPrimitives.Trigger ref={ref} className={clx(className)} {...props} />
<RadixDialog.Trigger ref={ref} className={clx(className)} {...props} />
)
})
DrawerTrigger.displayName = "Drawer.Trigger"
interface DrawerCloseProps extends React.ComponentPropsWithoutRef<typeof DrawerPrimitives.Close> {}
interface DrawerCloseProps extends React.ComponentPropsWithoutRef<typeof RadixDialog.Close> {}
/**
* This component is used to create the close button for the drawer.
* It accepts props from the [Radix UI Dialog Close](https://www.radix-ui.com/primitives/docs/components/dialog#close) component.
*/
const DrawerClose = React.forwardRef<
React.ElementRef<typeof DrawerPrimitives.Close>,
React.ElementRef<typeof RadixDialog.Close>,
DrawerCloseProps
>(({ className, ...props }: DrawerCloseProps, ref) => {
return (
<DrawerPrimitives.Close ref={ref} className={clx(className)} {...props} />
<RadixDialog.Close ref={ref} className={clx(className)} {...props} />
)
})
DrawerClose.displayName = "Drawer.Close"
interface DrawerPortalProps extends DrawerPrimitives.DialogPortalProps {}
interface DrawerPortalProps extends RadixDialog.DialogPortalProps {}
/**
* The `Drawer.Content` component uses this component to wrap the drawer content.
* It accepts props from the [Radix UI Dialog Portal](https://www.radix-ui.com/primitives/docs/components/dialog#portal) component.
*/
const DrawerPortal = (props: DrawerPortalProps) => {
return <DrawerPrimitives.DialogPortal {...props} />
return <RadixDialog.DialogPortal {...props} />
}
DrawerPortal.displayName = "Drawer.Portal"
interface DrawerOverlayProps extends React.ComponentPropsWithoutRef<typeof DrawerPrimitives.Overlay> {}
interface DrawerOverlayProps extends React.ComponentPropsWithoutRef<typeof RadixDialog.Overlay> {}
/**
* This component is used to create the overlay for the drawer.
* It accepts props from the [Radix UI Dialog Overlay](https://www.radix-ui.com/primitives/docs/components/dialog#overlay) component.
*/
const DrawerOverlay = React.forwardRef<
React.ElementRef<typeof DrawerPrimitives.Overlay>,
React.ElementRef<typeof RadixDialog.Overlay>,
DrawerOverlayProps
>(({ className, ...props }: DrawerOverlayProps, ref) => {
return (
<DrawerPrimitives.Overlay
<RadixDialog.Overlay
ref={ref}
className={clx(
"bg-ui-bg-overlay fixed inset-0",
@@ -88,7 +88,7 @@ const DrawerOverlay = React.forwardRef<
})
DrawerOverlay.displayName = "Drawer.Overlay"
interface DrawerContentProps extends React.ComponentPropsWithoutRef<typeof DrawerPrimitives.Content> {
interface DrawerContentProps extends React.ComponentPropsWithoutRef<typeof RadixDialog.Content> {
/**
* Props for the overlay component.
* It accepts props from the [Radix UI Dialog Overlay](https://www.radix-ui.com/primitives/docs/components/dialog#overlay) component.
@@ -106,13 +106,13 @@ interface DrawerContentProps extends React.ComponentPropsWithoutRef<typeof Drawe
* It accepts props from the [Radix UI Dialog Content](https://www.radix-ui.com/primitives/docs/components/dialog#content) component.
*/
const DrawerContent = React.forwardRef<
React.ElementRef<typeof DrawerPrimitives.Content>,
React.ElementRef<typeof RadixDialog.Content>,
DrawerContentProps
>(({ className, overlayProps, portalProps, ...props }: DrawerContentProps, ref) => {
return (
<DrawerPortal {...portalProps}>
<DrawerOverlay {...overlayProps} />
<DrawerPrimitives.Content
<RadixDialog.Content
ref={ref}
className={clx(
"bg-ui-bg-base shadow-elevation-modal border-ui-border-base fixed inset-y-2 flex w-full flex-1 flex-col rounded-lg border outline-none max-sm:inset-x-2 max-sm:w-[calc(100%-16px)] sm:right-2 sm:max-w-[560px]",
@@ -145,11 +145,11 @@ const DrawerHeader = React.forwardRef<
<div className={clx("flex flex-col gap-y-1", className)}>{children}</div>
<div className="flex items-center gap-x-2">
<Kbd>esc</Kbd>
<DrawerPrimitives.Close asChild>
<RadixDialog.Close asChild>
<IconButton size="small" type="button" variant="transparent">
<XMark />
</IconButton>
</DrawerPrimitives.Close>
</RadixDialog.Close>
</div>
</div>
)
@@ -198,27 +198,27 @@ DrawerFooter.displayName = "Drawer.Footer"
* This component adds an accessible title to the drawer.
* It accepts props from the [Radix UI Dialog Title](https://www.radix-ui.com/primitives/docs/components/dialog#title) component.
*/
const DrawerTitle = DrawerPrimitives.Title
const DrawerTitle = RadixDialog.Title
DrawerTitle.displayName = "Drawer.Title"
interface DrawerDescriptionProps extends React.ComponentPropsWithoutRef<typeof DrawerPrimitives.Description> {}
interface DrawerDescriptionProps extends React.ComponentPropsWithoutRef<typeof RadixDialog.Description> {}
/**
* This component adds accessible description to the drawer.
* It accepts props from the [Radix UI Dialog Description](https://www.radix-ui.com/primitives/docs/components/dialog#description) component.
*/
const DrawerDescription = React.forwardRef<
React.ElementRef<typeof DrawerPrimitives.Description>,
React.ElementRef<typeof RadixDialog.Description>,
DrawerDescriptionProps
>(({ className, children, ...props }: DrawerDescriptionProps, ref) => (
<DrawerPrimitives.Description
<RadixDialog.Description
ref={ref}
className={clx(className)}
asChild
{...props}
>
<Text>{children}</Text>
</DrawerPrimitives.Description>
</RadixDialog.Description>
))
DrawerDescription.displayName = "Drawer.Description"

82
packages/design-system/ui/src/components/dropdown-menu/dropdown-menu.tsx
View File

@@ -1,7 +1,7 @@
"use client"
import { CheckMini, ChevronRightMini, EllipseMiniSolid } from "@medusajs/icons"
import * as Primitives from "@radix-ui/react-dropdown-menu"
import { DropdownMenu as RadixDropdownMenu } from "radix-ui"
import * as React from "react"
import { clx } from "@/utils/clx"
@@ -9,41 +9,41 @@ import { clx } from "@/utils/clx"
/**
* This component is based on the [Radix UI Dropdown Menu](https://www.radix-ui.com/primitives/docs/components/dropdown-menu) primitive.
*/
const Root = Primitives.Root
const Root = RadixDropdownMenu.Root
Root.displayName = "DropdownMenu"
/**
* This component is based on the [Radix UI Dropdown Menu Trigger](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#trigger) primitive.
*/
const Trigger = Primitives.Trigger
const Trigger = RadixDropdownMenu.Trigger
Trigger.displayName = "DropdownMenu.Trigger"
/**
* This component is based on the [Radix UI Dropdown Menu Group](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#group) primitive.
*/
const Group = Primitives.Group
const Group = RadixDropdownMenu.Group
Group.displayName = "DropdownMenu.Group"
/**
* This component is based on the [Radix UI Dropdown Menu Sub](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#sub) primitive.
*/
const SubMenu = Primitives.Sub
const SubMenu = RadixDropdownMenu.Sub
SubMenu.displayName = "DropdownMenu.SubMenu"
/**
* This component is based on the [Radix UI Dropdown Menu RadioGroup](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#radiogroup) primitive.
*/
const RadioGroup = Primitives.RadioGroup
const RadioGroup = RadixDropdownMenu.RadioGroup
RadioGroup.displayName = "DropdownMenu.RadioGroup"
/**
* This component is based on the [Radix UI Dropdown Menu SubTrigger](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#subtrigger) primitive.
*/
const SubMenuTrigger = React.forwardRef<
React.ElementRef<typeof Primitives.SubTrigger>,
React.ComponentPropsWithoutRef<typeof Primitives.SubTrigger>
React.ElementRef<typeof RadixDropdownMenu.SubTrigger>,
React.ComponentPropsWithoutRef<typeof RadixDropdownMenu.SubTrigger>
>(({ className, children, ...props }, ref) => (
<Primitives.SubTrigger
<RadixDropdownMenu.SubTrigger
ref={ref}
className={clx(
"bg-ui-bg-component text-ui-fg-base txt-compact-small relative flex cursor-pointer select-none items-center rounded-md px-2 py-1.5 outline-none transition-colors",
@@ -57,7 +57,7 @@ const SubMenuTrigger = React.forwardRef<
>
{children}
<ChevronRightMini className="text-ui-fg-muted ml-auto" />
</Primitives.SubTrigger>
</RadixDropdownMenu.SubTrigger>
))
SubMenuTrigger.displayName = "DropdownMenu.SubMenuTrigger"
@@ -65,11 +65,11 @@ SubMenuTrigger.displayName = "DropdownMenu.SubMenuTrigger"
* This component is based on the [Radix UI Dropdown Menu SubContent](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#subcontent) primitive.
*/
const SubMenuContent = React.forwardRef<
React.ElementRef<typeof Primitives.SubContent>,
React.ComponentPropsWithoutRef<typeof Primitives.SubContent>
React.ElementRef<typeof RadixDropdownMenu.SubContent>,
React.ComponentPropsWithoutRef<typeof RadixDropdownMenu.SubContent>
>(({ className, collisionPadding = 8, ...props }, ref) => (
<Primitives.Portal>
<Primitives.SubContent
<RadixDropdownMenu.Portal>
<RadixDropdownMenu.SubContent
ref={ref}
collisionPadding={collisionPadding}
className={clx(
@@ -79,7 +79,7 @@ const SubMenuContent = React.forwardRef<
)}
{...props}
/>
</Primitives.Portal>
</RadixDropdownMenu.Portal>
))
SubMenuContent.displayName = "DropdownMenu.SubMenuContent"
@@ -87,8 +87,8 @@ SubMenuContent.displayName = "DropdownMenu.SubMenuContent"
* This component is based on the [Radix UI Dropdown Menu Content](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#content) primitive.
*/
const Content = React.forwardRef<
React.ElementRef<typeof Primitives.Content>,
React.ComponentPropsWithoutRef<typeof Primitives.Content>
React.ElementRef<typeof RadixDropdownMenu.Content>,
React.ComponentPropsWithoutRef<typeof RadixDropdownMenu.Content>
>(
(
{
@@ -100,8 +100,8 @@ const Content = React.forwardRef<
},
ref
) => (
<Primitives.Portal>
<Primitives.Content
<RadixDropdownMenu.Portal>
<RadixDropdownMenu.Content
ref={ref}
sideOffset={sideOffset}
align={align}
@@ -113,7 +113,7 @@ const Content = React.forwardRef<
)}
{...props}
/>
</Primitives.Portal>
</RadixDropdownMenu.Portal>
)
)
Content.displayName = "DropdownMenu.Content"
@@ -122,10 +122,10 @@ Content.displayName = "DropdownMenu.Content"
* This component is based on the [Radix UI Dropdown Menu Item](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#item) primitive.
*/
const Item = React.forwardRef<
React.ElementRef<typeof Primitives.Item>,
React.ComponentPropsWithoutRef<typeof Primitives.Item>
React.ElementRef<typeof RadixDropdownMenu.Item>,
React.ComponentPropsWithoutRef<typeof RadixDropdownMenu.Item>
>(({ className, ...props }, ref) => (
<Primitives.Item
<RadixDropdownMenu.Item
ref={ref}
className={clx(
"bg-ui-bg-component text-ui-fg-base txt-compact-small relative flex cursor-pointer select-none items-center rounded-md px-2 py-1.5 outline-none transition-colors",
@@ -143,10 +143,10 @@ Item.displayName = "DropdownMenu.Item"
* This component is based on the [Radix UI Dropdown Menu CheckboxItem](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#checkboxitem) primitive.
*/
const CheckboxItem = React.forwardRef<
React.ElementRef<typeof Primitives.CheckboxItem>,
React.ComponentPropsWithoutRef<typeof Primitives.CheckboxItem>
React.ElementRef<typeof RadixDropdownMenu.CheckboxItem>,
React.ComponentPropsWithoutRef<typeof RadixDropdownMenu.CheckboxItem>
>(({ className, children, checked, ...props }, ref) => (
<Primitives.CheckboxItem
<RadixDropdownMenu.CheckboxItem
ref={ref}
className={clx(
"bg-ui-bg-component text-ui-fg-base txt-compact-small relative flex cursor-pointer select-none items-center rounded-md py-1.5 pl-[31px] pr-2 outline-none transition-colors",
@@ -160,12 +160,12 @@ const CheckboxItem = React.forwardRef<
{...props}
>
<span className="absolute left-2 flex size-[15px] items-center justify-center">
<Primitives.ItemIndicator>
<RadixDropdownMenu.ItemIndicator>
<CheckMini />
</Primitives.ItemIndicator>
</RadixDropdownMenu.ItemIndicator>
</span>
{children}
</Primitives.CheckboxItem>
</RadixDropdownMenu.CheckboxItem>
))
CheckboxItem.displayName = "DropdownMenu.CheckboxItem"
@@ -173,10 +173,10 @@ CheckboxItem.displayName = "DropdownMenu.CheckboxItem"
* This component is based on the [Radix UI Dropdown Menu RadioItem](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#radioitem) primitive.
*/
const RadioItem = React.forwardRef<
React.ElementRef<typeof Primitives.RadioItem>,
React.ComponentPropsWithoutRef<typeof Primitives.RadioItem>
React.ElementRef<typeof RadixDropdownMenu.RadioItem>,
React.ComponentPropsWithoutRef<typeof RadixDropdownMenu.RadioItem>
>(({ className, children, ...props }, ref) => (
<Primitives.RadioItem
<RadixDropdownMenu.RadioItem
ref={ref}
className={clx(
"bg-ui-bg-component txt-compact-small relative flex cursor-pointer select-none items-center rounded-md py-1.5 pl-[31px] pr-2 outline-none transition-colors",
@@ -189,12 +189,12 @@ const RadioItem = React.forwardRef<
{...props}
>
<span className="absolute left-2 flex size-[15px] items-center justify-center">
<Primitives.ItemIndicator>
<RadixDropdownMenu.ItemIndicator>
<EllipseMiniSolid className="text-ui-fg-base" />
</Primitives.ItemIndicator>
</RadixDropdownMenu.ItemIndicator>
</span>
{children}
</Primitives.RadioItem>
</RadixDropdownMenu.RadioItem>
))
RadioItem.displayName = "DropdownMenu.RadioItem"
@@ -202,10 +202,10 @@ RadioItem.displayName = "DropdownMenu.RadioItem"
* This component is based on the [Radix UI Dropdown Menu Label](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#label) primitive.
*/
const Label = React.forwardRef<
React.ElementRef<typeof Primitives.Label>,
React.ComponentPropsWithoutRef<typeof Primitives.Label>
React.ElementRef<typeof RadixDropdownMenu.Label>,
React.ComponentPropsWithoutRef<typeof RadixDropdownMenu.Label>
>(({ className, ...props }, ref) => (
<Primitives.Label
<RadixDropdownMenu.Label
ref={ref}
className={clx("text-ui-fg-subtle txt-compact-xsmall-plus", className)}
{...props}
@@ -217,10 +217,10 @@ Label.displayName = "DropdownMenu.Label"
* This component is based on the [Radix UI Dropdown Menu Separator](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#separator) primitive.
*/
const Separator = React.forwardRef<
React.ElementRef<typeof Primitives.Separator>,
React.ComponentPropsWithoutRef<typeof Primitives.Separator>
React.ElementRef<typeof RadixDropdownMenu.Separator>,
React.ComponentPropsWithoutRef<typeof RadixDropdownMenu.Separator>
>(({ className, ...props }, ref) => (
<Primitives.Separator
<RadixDropdownMenu.Separator
ref={ref}
className={clx(
"bg-ui-border-component border-t-ui-border-menu-top border-b-ui-border-menu-bot -mx-1 my-1 h-0.5 border-b border-t",

40
packages/design-system/ui/src/components/focus-modal/focus-modal.tsx
View File

@@ -1,7 +1,7 @@
"use client"
import { XMark } from "@medusajs/icons"
import * as FocusModalPrimitives from "@radix-ui/react-dialog"
import { Dialog as RadixDialog } from "radix-ui"
import * as React from "react"
import { IconButton } from "@/components/icon-button"
@@ -14,27 +14,27 @@ import { clx } from "@/utils/clx"
* @prop onOpenChange - A function to handle when the modal is opened or closed.
*/
interface FocusModalRootProps
extends React.ComponentPropsWithoutRef<typeof FocusModalPrimitives.Root> {}
extends React.ComponentPropsWithoutRef<typeof RadixDialog.Root> {}
/**
* This component is based on the [Radix UI Dialog](https://www.radix-ui.com/primitives/docs/components/dialog) primitives.
*/
const FocusModalRoot = (props: FocusModalRootProps) => {
return <FocusModalPrimitives.Root {...props} />
return <RadixDialog.Root {...props} />
}
FocusModalRoot.displayName = "FocusModal"
interface FocusModalTriggerProps extends React.ComponentPropsWithoutRef<typeof FocusModalPrimitives.Trigger> {}
interface FocusModalTriggerProps extends React.ComponentPropsWithoutRef<typeof RadixDialog.Trigger> {}
/**
* This component is used to create the trigger button that opens the modal.
* It accepts props from the [Radix UI Dialog Trigger](https://www.radix-ui.com/primitives/docs/components/dialog#trigger) component.
*/
const FocusModalTrigger = React.forwardRef<
React.ElementRef<typeof FocusModalPrimitives.Trigger>,
React.ElementRef<typeof RadixDialog.Trigger>,
FocusModalTriggerProps
>((props: FocusModalTriggerProps, ref) => {
return <FocusModalPrimitives.Trigger ref={ref} {...props} />
return <RadixDialog.Trigger ref={ref} {...props} />
})
FocusModalTrigger.displayName = "FocusModal.Trigger"
@@ -42,10 +42,10 @@ FocusModalTrigger.displayName = "FocusModal.Trigger"
* This component is used to create the close button for the modal.
* It accepts props from the [Radix UI Dialog Close](https://www.radix-ui.com/primitives/docs/components/dialog#close) component.
*/
const FocusModalClose = FocusModalPrimitives.Close
const FocusModalClose = RadixDialog.Close
FocusModalClose.displayName = "FocusModal.Close"
interface FocusModalPortalProps extends FocusModalPrimitives.DialogPortalProps {}
interface FocusModalPortalProps extends RadixDialog.DialogPortalProps {}
/**
* The `FocusModal.Content` component uses this component to wrap the modal content.
@@ -53,7 +53,7 @@ interface FocusModalPortalProps extends FocusModalPrimitives.DialogPortalProps {
*/
const FocusModalPortal = (props: FocusModalPortalProps) => {
return (
<FocusModalPrimitives.DialogPortal {...props} />
<RadixDialog.DialogPortal {...props} />
)
}
FocusModalPortal.displayName = "FocusModal.Portal"
@@ -63,11 +63,11 @@ FocusModalPortal.displayName = "FocusModal.Portal"
* It accepts props from the [Radix UI Dialog Overlay](https://www.radix-ui.com/primitives/docs/components/dialog#overlay) component.
*/
const FocusModalOverlay = React.forwardRef<
React.ElementRef<typeof FocusModalPrimitives.Overlay>,
React.ComponentPropsWithoutRef<typeof FocusModalPrimitives.Overlay>
React.ElementRef<typeof RadixDialog.Overlay>,
React.ComponentPropsWithoutRef<typeof RadixDialog.Overlay>
>(({ className, ...props }, ref) => {
return (
<FocusModalPrimitives.Overlay
<RadixDialog.Overlay
ref={ref}
className={clx(
"bg-ui-bg-overlay fixed inset-0",
@@ -85,8 +85,8 @@ FocusModalOverlay.displayName = "FocusModal.Overlay"
* It accepts props from the [Radix UI Dialog Content](https://www.radix-ui.com/primitives/docs/components/dialog#content) component.
*/
const FocusModalContent = React.forwardRef<
React.ElementRef<typeof FocusModalPrimitives.Content>,
React.ComponentPropsWithoutRef<typeof FocusModalPrimitives.Content> & {
React.ElementRef<typeof RadixDialog.Content>,
React.ComponentPropsWithoutRef<typeof RadixDialog.Content> & {
overlayProps?: React.ComponentPropsWithoutRef<typeof FocusModalOverlay>
portalProps?: React.ComponentPropsWithoutRef<typeof FocusModalPortal>
}
@@ -94,7 +94,7 @@ const FocusModalContent = React.forwardRef<
return (
<FocusModalPortal {...portalProps}>
<FocusModalOverlay {...overlayProps} />
<FocusModalPrimitives.Content
<RadixDialog.Content
ref={ref}
className={clx(
"bg-ui-bg-base shadow-elevation-modal fixed inset-2 flex flex-col overflow-hidden rounded-lg border outline-none",
@@ -126,11 +126,11 @@ const FocusModalHeader = React.forwardRef<
{...props}
>
<div className="flex items-center gap-x-2">
<FocusModalPrimitives.Close asChild>
<RadixDialog.Close asChild>
<IconButton size="small" type="button" variant="transparent">
<XMark />
</IconButton>
</FocusModalPrimitives.Close>
</RadixDialog.Close>
<Kbd>esc</Kbd>
</div>
{children}
@@ -162,7 +162,7 @@ const FocusModalFooter = React.forwardRef<
})
FocusModalFooter.displayName = "FocusModal.Footer"
interface FocusModalTitleProps extends React.ComponentPropsWithoutRef<typeof FocusModalPrimitives.Title> {}
interface FocusModalTitleProps extends React.ComponentPropsWithoutRef<typeof RadixDialog.Title> {}
/**
* This component adds an accessible title to the modal.
@@ -173,7 +173,7 @@ const FocusModalTitle = React.forwardRef<
FocusModalTitleProps
>(({ className, ...props }: FocusModalTitleProps, ref) => {
return (
<FocusModalPrimitives.Title ref={ref} {...props} />
<RadixDialog.Title ref={ref} {...props} />
)
})
FocusModalTitle.displayName = "FocusModal.Title"
@@ -182,7 +182,7 @@ FocusModalTitle.displayName = "FocusModal.Title"
* This component adds accessible description to the modal.
* It accepts props from the [Radix UI Dialog Description](https://www.radix-ui.com/primitives/docs/components/dialog#description) component.
*/
const FocusModalDescription = FocusModalPrimitives.Description
const FocusModalDescription = RadixDialog.Description
FocusModalDescription.displayName = "FocusModal.Description"
/**

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

@@ -2,7 +2,7 @@ import { ExclamationCircleSolid } from "@medusajs/icons"
import { VariantProps, cva } from "cva"
import * as React from "react"
import { clx } from "../../utils/clx"
import { clx } from "@/utils/clx"
const hintVariants = cva({
base: "txt-small",

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

@@ -1,5 +1,5 @@
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "cva"
import { Slot } from "radix-ui"
import * as React from "react"
import { badgeColorVariants } from "@/components/badge"
@@ -47,7 +47,7 @@ const IconBadge = React.forwardRef<HTMLSpanElement, IconBadgeProps>(
}: IconBadgeProps,
ref
) => {
const Component = asChild ? Slot : "span"
const Component = asChild ? Slot.Root : "span"
return (
<Component

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

@@ -1,6 +1,6 @@
import { Spinner } from "@medusajs/icons"
import { Slot } from "@radix-ui/react-slot"
import { VariantProps, cva } from "cva"
import { Slot } from "radix-ui"
import * as React from "react"
import { clx } from "@/utils/clx"
@@ -78,7 +78,7 @@ const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
}: IconButtonProps,
ref
) => {
const Component = asChild ? Slot : "button"
const Component = asChild ? Slot.Root : "button"
/**
* In the case of a button where asChild is true, and isLoading is true, we ensure that

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

@@ -1,7 +1,7 @@
"use client"
import * as Primitives from "@radix-ui/react-label"
import { cva, type VariantProps } from "cva"
import { Label as RadixLabel } from "radix-ui"
import * as React from "react"
import { clx } from "@/utils/clx"
@@ -47,7 +47,7 @@ const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
...props
}: LabelProps, ref) => {
return (
<Primitives.Root
<RadixLabel.Root
ref={ref}
className={clx(labelVariants({ size, weight }), className)}
{...props}

34
packages/design-system/ui/src/components/popover/popover.tsx
View File

@@ -1,4 +1,4 @@
import * as Primitives from "@radix-ui/react-popover"
import { Popover as RadixPopover } from "radix-ui"
import * as React from "react"
import { clx } from "@/utils/clx"
@@ -7,44 +7,44 @@ import { clx } from "@/utils/clx"
* This component is based on the [Radix UI Popover](https://www.radix-ui.com/primitives/docs/components/popover) primitves.
*/
const Root = (
props: React.ComponentPropsWithoutRef<typeof Primitives.Root>
props: React.ComponentPropsWithoutRef<typeof RadixPopover.Root>
) => {
return <Primitives.Root {...props} />
return <RadixPopover.Root {...props} />
}
Root.displayName = "Popover"
const Trigger = React.forwardRef<
React.ElementRef<typeof Primitives.Trigger>,
React.ComponentPropsWithoutRef<typeof Primitives.Trigger>
React.ElementRef<typeof RadixPopover.Trigger>,
React.ComponentPropsWithoutRef<typeof RadixPopover.Trigger>
>((props, ref) => {
return <Primitives.Trigger ref={ref} {...props} />
return <RadixPopover.Trigger ref={ref} {...props} />
})
Trigger.displayName = "Popover.Trigger"
const Anchor = React.forwardRef<
React.ElementRef<typeof Primitives.Anchor>,
React.ComponentPropsWithoutRef<typeof Primitives.Anchor>
React.ElementRef<typeof RadixPopover.Anchor>,
React.ComponentPropsWithoutRef<typeof RadixPopover.Anchor>
>((props, ref) => {
return <Primitives.Anchor ref={ref} {...props} />
return <RadixPopover.Anchor ref={ref} {...props} />
})
Anchor.displayName = "Popover.Anchor"
const Close = React.forwardRef<
React.ElementRef<typeof Primitives.Close>,
React.ComponentPropsWithoutRef<typeof Primitives.Close>
React.ElementRef<typeof RadixPopover.Close>,
React.ComponentPropsWithoutRef<typeof RadixPopover.Close>
>((props, ref) => {
return <Primitives.Close ref={ref} {...props} />
return <RadixPopover.Close ref={ref} {...props} />
})
Close.displayName = "Popover.Close"
interface ContentProps
extends React.ComponentPropsWithoutRef<typeof Primitives.Content> {}
extends React.ComponentPropsWithoutRef<typeof RadixPopover.Content> {}
/**
* @excludeExternal
*/
const Content = React.forwardRef<
React.ElementRef<typeof Primitives.Content>,
React.ElementRef<typeof RadixPopover.Content>,
ContentProps
>(
(
@@ -69,8 +69,8 @@ const Content = React.forwardRef<
ref
) => {
return (
<Primitives.Portal>
<Primitives.Content
<RadixPopover.Portal>
<RadixPopover.Content
ref={ref}
sideOffset={sideOffset}
side={side}
@@ -83,7 +83,7 @@ const Content = React.forwardRef<
)}
{...props}
/>
</Primitives.Portal>
</RadixPopover.Portal>
)
}
)

30
packages/design-system/ui/src/components/progress-accordion/progress-accordion.tsx
View File

@@ -6,7 +6,7 @@ import {
CircleHalfSolid,
Plus,
} from "@medusajs/icons"
import * as Primitves from "@radix-ui/react-accordion"
import { Accordion as RadixAccordion } from "radix-ui"
import * as React from "react"
import { ProgressStatus } from "@/types"
@@ -16,17 +16,17 @@ import { IconButton } from "../icon-button"
/**
* This component is based on the [Radix UI Accordion](https://radix-ui.com/primitives/docs/components/accordion) primitves.
*/
const Root = (props: React.ComponentPropsWithoutRef<typeof Primitves.Root>) => {
return <Primitves.Root {...props} />
const Root = (props: React.ComponentPropsWithoutRef<typeof RadixAccordion.Root>) => {
return <RadixAccordion.Root {...props} />
}
Root.displayName = "ProgressAccordion"
const Item = React.forwardRef<
React.ElementRef<typeof Primitves.Item>,
React.ComponentPropsWithoutRef<typeof Primitves.Item>
React.ElementRef<typeof RadixAccordion.Item>,
React.ComponentPropsWithoutRef<typeof RadixAccordion.Item>
>(({ className, ...props }, ref) => {
return (
<Primitves.Item
<RadixAccordion.Item
ref={ref}
className={clx(
"border-ui-border-base border-b last-of-type:border-b-0",
@@ -39,7 +39,7 @@ const Item = React.forwardRef<
Item.displayName = "ProgressAccordion.Item"
interface HeaderProps
extends React.ComponentPropsWithoutRef<typeof Primitves.Header> {
extends React.ComponentPropsWithoutRef<typeof RadixAccordion.Header> {
status?: ProgressStatus
}
@@ -79,7 +79,7 @@ const ProgressIndicator = ({
ProgressIndicator.displayName = "ProgressAccordion.ProgressIndicator"
const Header = React.forwardRef<
React.ElementRef<typeof Primitves.Header>,
React.ElementRef<typeof RadixAccordion.Header>,
HeaderProps
>(
(
@@ -95,7 +95,7 @@ const Header = React.forwardRef<
ref
) => {
return (
<Primitves.Header
<RadixAccordion.Header
ref={ref}
className={clx(
"h3-core text-ui-fg-base group flex w-full flex-1 items-center gap-4 px-6",
@@ -105,23 +105,23 @@ const Header = React.forwardRef<
>
<ProgressIndicator status={status} />
{children}
<Primitves.Trigger asChild className="ml-auto">
<RadixAccordion.Trigger asChild className="ml-auto">
<IconButton variant="transparent">
<Plus className="transform transition-transform group-data-[state=open]:rotate-45" />
</IconButton>
</Primitves.Trigger>
</Primitves.Header>
</RadixAccordion.Trigger>
</RadixAccordion.Header>
)
}
)
Header.displayName = "ProgressAccordion.Header"
const Content = React.forwardRef<
React.ElementRef<typeof Primitves.Content>,
React.ComponentPropsWithoutRef<typeof Primitves.Content>
React.ElementRef<typeof RadixAccordion.Content>,
React.ComponentPropsWithoutRef<typeof RadixAccordion.Content>
>(({ className, ...props }, ref) => {
return (
<Primitves.Content
<RadixAccordion.Content
ref={ref}
className={clx(
"overflow-hidden",

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

@@ -5,7 +5,7 @@ import {
CircleDottedLine,
CircleHalfSolid,
} from "@medusajs/icons"
import * as ProgressTabsPrimitives from "@radix-ui/react-tabs"
import { Tabs as RadixTabs } from "radix-ui"
import * as React from "react"
import { ProgressStatus } from "@/types"
@@ -16,8 +16,8 @@ import { clx } from "@/utils/clx"
*
* @excludeExternal
*/
const ProgressTabsRoot = (props: ProgressTabsPrimitives.TabsProps) => {
return <ProgressTabsPrimitives.Root {...props} />
const ProgressTabsRoot = (props: RadixTabs.TabsProps) => {
return <RadixTabs.Root {...props} />
}
ProgressTabsRoot.displayName = "ProgressTabs"
@@ -59,14 +59,14 @@ ProgressIndicator.displayName = "ProgressTabs.ProgressIndicator"
interface ProgressTabsTriggerProps
extends Omit<
React.ComponentPropsWithoutRef<typeof ProgressTabsPrimitives.Trigger>,
React.ComponentPropsWithoutRef<typeof RadixTabs.Trigger>,
"asChild"
> {
status?: ProgressStatus
}
const ProgressTabsTrigger = React.forwardRef<
React.ElementRef<typeof ProgressTabsPrimitives.Trigger>,
React.ElementRef<typeof RadixTabs.Trigger>,
ProgressTabsTriggerProps
>(
(
@@ -78,7 +78,7 @@ const ProgressTabsTrigger = React.forwardRef<
}: ProgressTabsTriggerProps,
ref
) => (
<ProgressTabsPrimitives.Trigger
<RadixTabs.Trigger
ref={ref}
className={clx(
"txt-compact-small-plus transition-fg text-ui-fg-muted bg-ui-bg-subtle border-r-ui-border-base inline-flex h-[52px] w-full max-w-[200px] flex-1 items-center gap-x-2 border-r px-4 text-left outline-none",
@@ -93,16 +93,16 @@ const ProgressTabsTrigger = React.forwardRef<
>
<ProgressIndicator status={status} />
{children}
</ProgressTabsPrimitives.Trigger>
</RadixTabs.Trigger>
)
)
ProgressTabsTrigger.displayName = "ProgressTabs.Trigger"
const ProgressTabsList = React.forwardRef<
React.ElementRef<typeof ProgressTabsPrimitives.List>,
React.ComponentPropsWithoutRef<typeof ProgressTabsPrimitives.List>
React.ElementRef<typeof RadixTabs.List>,
React.ComponentPropsWithoutRef<typeof RadixTabs.List>
>(({ className, ...props }, ref) => (
<ProgressTabsPrimitives.List
<RadixTabs.List
ref={ref}
className={clx("flex items-center", className)}
{...props}
@@ -111,11 +111,11 @@ const ProgressTabsList = React.forwardRef<
ProgressTabsList.displayName = "ProgressTabs.List"
const ProgressTabsContent = React.forwardRef<
React.ElementRef<typeof ProgressTabsPrimitives.Content>,
React.ComponentPropsWithoutRef<typeof ProgressTabsPrimitives.Content>
React.ElementRef<typeof RadixTabs.Content>,
React.ComponentPropsWithoutRef<typeof RadixTabs.Content>
>(({ className, ...props }, ref) => {
return (
<ProgressTabsPrimitives.Content
<RadixTabs.Content
ref={ref}
className={clx("outline-none", className)}
{...props}

54
packages/design-system/ui/src/components/prompt/prompt.tsx
View File

@@ -1,6 +1,6 @@
"use client"
import * as Primitives from "@radix-ui/react-alert-dialog"
import { AlertDialog as RadixAlertDialog } from "radix-ui"
import * as React from "react"
import { Button } from "@/components/button"
@@ -42,31 +42,31 @@ const Root = ({
*/
variant = "danger",
...props
}: React.ComponentPropsWithoutRef<typeof Primitives.Root> & {
}: React.ComponentPropsWithoutRef<typeof RadixAlertDialog.Root> & {
variant?: PromptVariant
}) => {
return (
<PromptProvider variant={variant}>
<Primitives.Root {...props} />
<RadixAlertDialog.Root {...props} />
</PromptProvider>
)
}
Root.displayName = "Prompt"
const Trigger = Primitives.Trigger
const Trigger = RadixAlertDialog.Trigger
Trigger.displayName = "Prompt.Trigger"
const Portal = (props: Primitives.AlertDialogPortalProps) => {
return <Primitives.AlertDialogPortal {...props} />
const Portal = (props: RadixAlertDialog.AlertDialogPortalProps) => {
return <RadixAlertDialog.AlertDialogPortal {...props} />
}
Portal.displayName = "Prompt.Portal"
const Overlay = React.forwardRef<
React.ElementRef<typeof Primitives.Overlay>,
React.ComponentPropsWithoutRef<typeof Primitives.Overlay>
React.ElementRef<typeof RadixAlertDialog.Overlay>,
React.ComponentPropsWithoutRef<typeof RadixAlertDialog.Overlay>
>(({ className, ...props }, ref) => {
return (
<Primitives.Overlay
<RadixAlertDialog.Overlay
ref={ref}
className={clx(
"bg-ui-bg-overlay fixed inset-0",
@@ -80,27 +80,27 @@ const Overlay = React.forwardRef<
Overlay.displayName = "Prompt.Overlay"
const Title = React.forwardRef<
React.ElementRef<typeof Primitives.Title>,
Omit<React.ComponentPropsWithoutRef<typeof Primitives.Title>, "asChild">
React.ElementRef<typeof RadixAlertDialog.Title>,
Omit<React.ComponentPropsWithoutRef<typeof RadixAlertDialog.Title>, "asChild">
>(({ className, children, ...props }, ref) => {
return (
<Primitives.Title ref={ref} className={clx(className)} {...props} asChild>
<RadixAlertDialog.Title ref={ref} className={clx(className)} {...props} asChild>
<Heading level="h2" className="text-ui-fg-base">
{children}
</Heading>
</Primitives.Title>
</RadixAlertDialog.Title>
)
})
Title.displayName = "Prompt.Title"
const Content = React.forwardRef<
React.ElementRef<typeof Primitives.Content>,
React.ComponentPropsWithoutRef<typeof Primitives.Content>
React.ElementRef<typeof RadixAlertDialog.Content>,
React.ComponentPropsWithoutRef<typeof RadixAlertDialog.Content>
>(({ className, ...props }, ref) => {
return (
<Portal>
<Overlay />
<Primitives.Content
<RadixAlertDialog.Content
ref={ref}
className={clx(
"bg-ui-bg-base shadow-elevation-flyout fixed left-[50%] top-[50%] flex w-full max-w-[400px] translate-x-[-50%] translate-y-[-50%] flex-col rounded-lg border focus-visible:outline-none",
@@ -115,11 +115,11 @@ const Content = React.forwardRef<
Content.displayName = "Prompt.Content"
const Description = React.forwardRef<
React.ElementRef<typeof Primitives.Description>,
React.ComponentPropsWithoutRef<typeof Primitives.Description>
React.ElementRef<typeof RadixAlertDialog.Description>,
React.ComponentPropsWithoutRef<typeof RadixAlertDialog.Description>
>(({ className, ...props }, ref) => {
return (
<Primitives.Description
<RadixAlertDialog.Description
ref={ref}
className={clx("text-ui-fg-subtle txt-compact-medium", className)}
{...props}
@@ -129,13 +129,13 @@ const Description = React.forwardRef<
Description.displayName = "Prompt.Description"
const Action = React.forwardRef<
React.ElementRef<typeof Primitives.Action>,
Omit<React.ComponentPropsWithoutRef<typeof Primitives.Action>, "asChild">
React.ElementRef<typeof RadixAlertDialog.Action>,
Omit<React.ComponentPropsWithoutRef<typeof RadixAlertDialog.Action>, "asChild">
>(({ className, children, type, ...props }, ref) => {
const { variant } = usePromptContext()
return (
<Primitives.Action ref={ref} className={className} {...props} asChild>
<RadixAlertDialog.Action ref={ref} className={className} {...props} asChild>
<Button
size="small"
type={type}
@@ -143,21 +143,21 @@ const Action = React.forwardRef<
>
{children}
</Button>
</Primitives.Action>
</RadixAlertDialog.Action>
)
})
Action.displayName = "Prompt.Action"
const Cancel = React.forwardRef<
React.ElementRef<typeof Primitives.Cancel>,
Omit<React.ComponentPropsWithoutRef<typeof Primitives.Cancel>, "asChild">
React.ElementRef<typeof RadixAlertDialog.Cancel>,
Omit<React.ComponentPropsWithoutRef<typeof RadixAlertDialog.Cancel>, "asChild">
>(({ className, children, ...props }, ref) => {
return (
<Primitives.Cancel ref={ref} className={clx(className)} {...props} asChild>
<RadixAlertDialog.Cancel ref={ref} className={clx(className)} {...props} asChild>
<Button size="small" variant="secondary">
{children}
</Button>
</Primitives.Cancel>
</RadixAlertDialog.Cancel>
)
})
Cancel.displayName = "Prompt.Cancel"

36
packages/design-system/ui/src/components/radio-group/radio-group.tsx
View File

@@ -1,21 +1,21 @@
"use client"
import * as Primitives from "@radix-ui/react-radio-group"
import { RadioGroup as RadixRadioGroup } from "radix-ui"
import * as React from "react"
import { Hint } from "@/components/hint"
import { Label } from "@/components/label"
import { clx } from "@/utils/clx"
import { Hint } from "../hint"
import { Label } from "../label"
/**
* This component is based on the [Radix UI Radio Group](https://www.radix-ui.com/primitives/docs/components/radio-group) primitives.
*/
const Root = React.forwardRef<
React.ElementRef<typeof Primitives.Root>,
React.ComponentPropsWithoutRef<typeof Primitives.Root>
React.ElementRef<typeof RadixRadioGroup.Root>,
React.ComponentPropsWithoutRef<typeof RadixRadioGroup.Root>
>(({ className, ...props }, ref) => {
return (
<Primitives.Root
<RadixRadioGroup.Root
className={clx("grid gap-2", className)}
{...props}
ref={ref}
@@ -25,11 +25,11 @@ const Root = React.forwardRef<
Root.displayName = "RadioGroup"
const Indicator = React.forwardRef<
React.ElementRef<typeof Primitives.Indicator>,
React.ComponentPropsWithoutRef<typeof Primitives.Indicator>
React.ElementRef<typeof RadixRadioGroup.Indicator>,
React.ComponentPropsWithoutRef<typeof RadixRadioGroup.Indicator>
>(({ className, ...props }, ref) => {
return (
<Primitives.Indicator
<RadixRadioGroup.Indicator
ref={ref}
className={clx("flex items-center justify-center", className)}
{...props}
@@ -39,17 +39,17 @@ const Indicator = React.forwardRef<
"bg-ui-bg-base shadow-details-contrast-on-bg-interactive h-1.5 w-1.5 rounded-full"
)}
/>
</Primitives.Indicator>
</RadixRadioGroup.Indicator>
)
})
Indicator.displayName = "RadioGroup.Indicator"
const Item = React.forwardRef<
React.ElementRef<typeof Primitives.Item>,
React.ComponentPropsWithoutRef<typeof Primitives.Item>
React.ElementRef<typeof RadixRadioGroup.Item>,
React.ComponentPropsWithoutRef<typeof RadixRadioGroup.Item>
>(({ className, ...props }, ref) => {
return (
<Primitives.Item
<RadixRadioGroup.Item
ref={ref}
className={clx(
"group relative flex h-5 w-5 items-center justify-center outline-none",
@@ -68,19 +68,19 @@ const Item = React.forwardRef<
>
<Indicator />
</div>
</Primitives.Item>
</RadixRadioGroup.Item>
)
})
Item.displayName = "RadioGroup.Item"
interface ChoiceBoxProps
extends React.ComponentPropsWithoutRef<typeof Primitives.Item> {
extends React.ComponentPropsWithoutRef<typeof RadixRadioGroup.Item> {
label: string
description: string
}
const ChoiceBox = React.forwardRef<
React.ElementRef<typeof Primitives.Item>,
React.ElementRef<typeof RadixRadioGroup.Item>,
ChoiceBoxProps
>(({ className, id, label, description, ...props }, ref) => {
const generatedId = React.useId()
@@ -92,7 +92,7 @@ const ChoiceBox = React.forwardRef<
const descriptionId = `${id}-description`
return (
<Primitives.Item
<RadixRadioGroup.Item
ref={ref}
className={clx(
"shadow-borders-base bg-ui-bg-base focus-visible:shadow-borders-interactive-with-focus transition-fg group flex items-start gap-x-2 rounded-lg p-3 outline-none",
@@ -131,7 +131,7 @@ const ChoiceBox = React.forwardRef<
{description}
</Hint>
</div>
</Primitives.Item>
</RadixRadioGroup.Item>
)
})
ChoiceBox.displayName = "RadioGroup.ChoiceBox"

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

@@ -1,14 +1,14 @@
"use client"
import { Check, TrianglesMini } from "@medusajs/icons"
import * as SelectPrimitive from "@radix-ui/react-select"
import { cva } from "cva"
import { Select as RadixSelect } from "radix-ui"
import * as React from "react"
import { clx } from "@/utils/clx"
interface SelectProps
extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Root> {
extends React.ComponentPropsWithoutRef<typeof RadixSelect.Root> {
size?: "base" | "small"
}
@@ -42,7 +42,7 @@ const Root = ({
}: SelectProps) => {
return (
<SelectContext.Provider value={React.useMemo(() => ({ size }), [size])}>
<SelectPrimitive.Root {...props}>{children}</SelectPrimitive.Root>
<RadixSelect.Root {...props}>{children}</RadixSelect.Root>
</SelectContext.Provider>
)
}
@@ -51,14 +51,14 @@ Root.displayName = "Select"
/**
* Groups multiple items together.
*/
const Group = SelectPrimitive.Group
const Group = RadixSelect.Group
Group.displayName = "Select.Group"
/**
* Displays the selected value, or a placeholder if no value is selected.
* It's based on [Radix UI Select Value](https://www.radix-ui.com/primitives/docs/components/select#value).
*/
const Value = SelectPrimitive.Value
const Value = RadixSelect.Value
Value.displayName = "Select.Value"
const triggerVariants = cva({
@@ -85,27 +85,27 @@ const triggerVariants = cva({
* It's based on [Radix UI Select Trigger](https://www.radix-ui.com/primitives/docs/components/select#trigger).
*/
const Trigger = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Trigger>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
React.ElementRef<typeof RadixSelect.Trigger>,
React.ComponentPropsWithoutRef<typeof RadixSelect.Trigger>
>(({ className, children, ...props }, ref) => {
const { size } = useSelectContext()
return (
<SelectPrimitive.Trigger
<RadixSelect.Trigger
ref={ref}
className={clx(triggerVariants({ size }), className)}
{...props}
>
{children}
<SelectPrimitive.Icon asChild>
<RadixSelect.Icon asChild>
<TrianglesMini className="text-ui-fg-muted group-disabled/trigger:text-ui-fg-disabled" />
</SelectPrimitive.Icon>
</SelectPrimitive.Trigger>
</RadixSelect.Icon>
</RadixSelect.Trigger>
)
})
Trigger.displayName = "Select.Trigger"
interface SelectContentProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> {
interface SelectContentProps extends React.ComponentPropsWithoutRef<typeof RadixSelect.Content> {
}
/**
@@ -113,7 +113,7 @@ interface SelectContentProps extends React.ComponentPropsWithoutRef<typeof Selec
* It's based on [Radix UI Select Content](https://www.radix-ui.com/primitives/docs/components/select#content).
*/
const Content = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Content>,
React.ElementRef<typeof RadixSelect.Content>,
SelectContentProps
>(
(
@@ -136,8 +136,8 @@ const Content = React.forwardRef<
}: SelectContentProps,
ref
) => (
<SelectPrimitive.Portal>
<SelectPrimitive.Content
<RadixSelect.Portal>
<RadixSelect.Content
ref={ref}
className={clx(
"bg-ui-bg-component text-ui-fg-base shadow-elevation-flyout relative max-h-[200px] min-w-[var(--radix-select-trigger-width)] overflow-hidden rounded-lg",
@@ -155,7 +155,7 @@ const Content = React.forwardRef<
collisionPadding={collisionPadding}
{...props}
>
<SelectPrimitive.Viewport
<RadixSelect.Viewport
className={clx(
"p-1",
position === "popper" &&
@@ -163,9 +163,9 @@ const Content = React.forwardRef<
)}
>
{children}
</SelectPrimitive.Viewport>
</SelectPrimitive.Content>
</SelectPrimitive.Portal>
</RadixSelect.Viewport>
</RadixSelect.Content>
</RadixSelect.Portal>
)
)
Content.displayName = "Select.Content"
@@ -175,10 +175,10 @@ Content.displayName = "Select.Content"
* It's based on [Radix UI Select Label](https://www.radix-ui.com/primitives/docs/components/select#label).
*/
const Label = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Label>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
React.ElementRef<typeof RadixSelect.Label>,
React.ComponentPropsWithoutRef<typeof RadixSelect.Label>
>(({ className, ...props }, ref) => (
<SelectPrimitive.Label
<RadixSelect.Label
ref={ref}
className={clx(
"txt-compact-xsmall-plus text-ui-fg-muted px-2 py-1.5",
@@ -194,11 +194,11 @@ Label.displayName = "Select.Label"
* and accepts its props.
*/
const Item = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Item>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
React.ElementRef<typeof RadixSelect.Item>,
React.ComponentPropsWithoutRef<typeof RadixSelect.Item>
>(({ className, children, ...props }, ref) => {
return (
<SelectPrimitive.Item
<RadixSelect.Item
ref={ref}
className={clx(
"bg-ui-bg-component grid cursor-pointer grid-cols-[15px_1fr] gap-x-2 rounded-[4px] px-2 py-1.5 outline-none transition-colors txt-compact-small items-center",
@@ -211,23 +211,23 @@ const Item = React.forwardRef<
{...props}
>
<span className="flex h-[15px] w-[15px] items-center justify-center">
<SelectPrimitive.ItemIndicator className="flex items-center justify-center">
<RadixSelect.ItemIndicator className="flex items-center justify-center">
<Check />
</SelectPrimitive.ItemIndicator>
</RadixSelect.ItemIndicator>
</span>
<SelectPrimitive.ItemText className="flex-1 truncate">
<RadixSelect.ItemText className="flex-1 truncate">
{children}
</SelectPrimitive.ItemText>
</SelectPrimitive.Item>
</RadixSelect.ItemText>
</RadixSelect.Item>
)
})
Item.displayName = "Select.Item"
const Separator = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Separator>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
React.ElementRef<typeof RadixSelect.Separator>,
React.ComponentPropsWithoutRef<typeof RadixSelect.Separator>
>(({ className, ...props }, ref) => (
<SelectPrimitive.Separator
<RadixSelect.Separator
ref={ref}
className={clx("bg-ui-border-component -mx-1 my-1 h-0.5 border-t border-t-ui-border-menu-top border-b border-b-ui-border-menu-bot", className)}
{...props}

3
packages/design-system/ui/src/components/skeleton/skeleton.tsx
View File

@@ -1,6 +1,7 @@
import { clx } from "@/utils/clx"
import * as React from "react"
import { clx } from "@/utils/clx"
function Skeleton({
className,
...props

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

@@ -1,7 +1,7 @@
"use client"
import * as Primitives from "@radix-ui/react-switch"
import { VariantProps, cva } from "cva"
import { Switch as RadixSwitch } from "radix-ui"
import * as React from "react"
import { clx } from "@/utils/clx"
@@ -35,7 +35,7 @@ const thumbVariants = cva({
interface SwitchProps
extends Omit<
React.ComponentPropsWithoutRef<typeof Primitives.Root>,
React.ComponentPropsWithoutRef<typeof RadixSwitch.Root>,
"asChild"
>,
VariantProps<typeof switchVariants> {}
@@ -44,7 +44,7 @@ interface SwitchProps
* This component is based on the [Radix UI Switch](https://www.radix-ui.com/primitives/docs/components/switch) primitive.
*/
const Switch = React.forwardRef<
React.ElementRef<typeof Primitives.Root>,
React.ElementRef<typeof RadixSwitch.Root>,
SwitchProps
>(
(
@@ -58,13 +58,13 @@ const Switch = React.forwardRef<
}: SwitchProps,
ref
) => (
<Primitives.Root
<RadixSwitch.Root
className={clx(switchVariants({ size }), className)}
{...props}
ref={ref}
>
<Primitives.Thumb className={clx(thumbVariants({ size }))} />
</Primitives.Root>
<RadixSwitch.Thumb className={clx(thumbVariants({ size }))} />
</RadixSwitch.Root>
)
)
Switch.displayName = "Switch"

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

@@ -1,6 +1,6 @@
"use client"
import * as TabsPrimitives from "@radix-ui/react-tabs"
import { Tabs as RadixTabs } from "radix-ui"
import * as React from "react"
import { clx } from "@/utils/clx"
@@ -9,17 +9,17 @@ import { clx } from "@/utils/clx"
* This component is based on the [Radix UI Tabs](https://radix-ui.com/primitives/docs/components/tabs) primitves
*/
const TabsRoot = (
props: React.ComponentPropsWithoutRef<typeof TabsPrimitives.Root>
props: React.ComponentPropsWithoutRef<typeof RadixTabs.Root>
) => {
return <TabsPrimitives.Root {...props} />
return <RadixTabs.Root {...props} />
}
TabsRoot.displayName = "Tabs"
const TabsTrigger = React.forwardRef<
React.ElementRef<typeof TabsPrimitives.Trigger>,
React.ComponentPropsWithoutRef<typeof TabsPrimitives.Trigger>
React.ElementRef<typeof RadixTabs.Trigger>,
React.ComponentPropsWithoutRef<typeof RadixTabs.Trigger>
>(({ className, children, ...props }, ref) => (
<TabsPrimitives.Trigger
<RadixTabs.Trigger
ref={ref}
className={clx(
"txt-compact-small-plus transition-fg text-ui-fg-subtle inline-flex items-center justify-center rounded-full border border-transparent bg-transparent px-2.5 py-1 outline-none",
@@ -31,15 +31,15 @@ const TabsTrigger = React.forwardRef<
{...props}
>
{children}
</TabsPrimitives.Trigger>
</RadixTabs.Trigger>
))
TabsTrigger.displayName = "Tabs.Trigger"
const TabsList = React.forwardRef<
React.ElementRef<typeof TabsPrimitives.List>,
React.ComponentPropsWithoutRef<typeof TabsPrimitives.List>
React.ElementRef<typeof RadixTabs.List>,
React.ComponentPropsWithoutRef<typeof RadixTabs.List>
>(({ className, ...props }, ref) => (
<TabsPrimitives.List
<RadixTabs.List
ref={ref}
className={clx("flex items-center gap-2", className)}
{...props}
@@ -48,10 +48,10 @@ const TabsList = React.forwardRef<
TabsList.displayName = "Tabs.List"
const TabsContent = React.forwardRef<
React.ElementRef<typeof TabsPrimitives.Content>,
React.ComponentPropsWithoutRef<typeof TabsPrimitives.Content>
React.ElementRef<typeof RadixTabs.Content>,
React.ComponentPropsWithoutRef<typeof RadixTabs.Content>
>(({ className, ...props }, ref) => (
<TabsPrimitives.Content
<RadixTabs.Content
ref={ref}
className={clx("outline-none", className)}
{...props}

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

@@ -1,5 +1,5 @@
import { Slot } from "@radix-ui/react-slot"
import { VariantProps, cva } from "cva"
import { Slot } from "radix-ui"
import * as React from "react"
import { clx } from "@/utils/clx"
@@ -130,7 +130,7 @@ const Text = React.forwardRef<HTMLParagraphElement, TextProps>(
}: TextProps,
ref
) => {
const Component = asChild ? Slot : as
const Component = asChild ? Slot.Root : as
return (
<Component

2
packages/design-system/ui/src/components/textarea/textarea.tsx
View File

@@ -1,7 +1,7 @@
import * as React from "react"
import { inputBaseStyles } from "@/components/input"
import { clx } from "@/utils/clx"
import { inputBaseStyles } from "../input"
/**
* This component is based on the `textarea` element and supports all of its props

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

@@ -7,11 +7,11 @@ import {
XMark,
} from "@medusajs/icons"
import * as React from "react"
import { toast } from "sonner"
import { IconButton } from "@/components/icon-button"
import type { ToastAction, ToastVariant } from "@/types"
import { clx } from "@/utils/clx"
import { toast } from "sonner"
import { IconButton } from "../icon-button"
interface ToastComponentProps {
id: string | number

28
packages/design-system/ui/src/components/tooltip/tooltip.tsx
View File

@@ -1,14 +1,14 @@
"use client"
import * as Primitives from "@radix-ui/react-tooltip"
import { Tooltip as RadixTooltip } from "radix-ui"
import * as React from "react"
import { clx } from "@/utils/clx"
interface TooltipProps
extends Omit<Primitives.TooltipContentProps, "content" | "onClick">,
extends Omit<RadixTooltip.TooltipContentProps, "content" | "onClick">,
Pick<
Primitives.TooltipProps,
RadixTooltip.TooltipProps,
"open" | "defaultOpen" | "onOpenChange" | "delayDuration"
> {
content: React.ReactNode
@@ -40,17 +40,17 @@ const Tooltip = ({
...props
}: TooltipProps) => {
return (
<Primitives.Root
<RadixTooltip.Root
open={open}
defaultOpen={defaultOpen}
onOpenChange={onOpenChange}
delayDuration={delayDuration}
>
<Primitives.Trigger onClick={onClick} asChild>
<RadixTooltip.Trigger onClick={onClick} asChild>
{children}
</Primitives.Trigger>
<Primitives.Portal>
<Primitives.Content
</RadixTooltip.Trigger>
<RadixTooltip.Portal>
<RadixTooltip.Content
side={side}
sideOffset={sideOffset}
align="center"
@@ -63,19 +63,19 @@ const Tooltip = ({
style={{ ...props.style, maxWidth }}
>
{content}
</Primitives.Content>
</Primitives.Portal>
</Primitives.Root>
</RadixTooltip.Content>
</RadixTooltip.Portal>
</RadixTooltip.Root>
)
}
interface TooltipProviderProps extends Primitives.TooltipProviderProps {}
interface TooltipProviderProps extends RadixTooltip.TooltipProviderProps {}
const TooltipProvider = ({ children, delayDuration = 100, skipDelayDuration = 300, ...props }: TooltipProviderProps) => {
return (
<Primitives.TooltipProvider delayDuration={delayDuration} skipDelayDuration={skipDelayDuration} {...props}>
<RadixTooltip.TooltipProvider delayDuration={delayDuration} skipDelayDuration={skipDelayDuration} {...props}>
{children}
</Primitives.TooltipProvider>
</RadixTooltip.TooltipProvider>
)
}

1082
yarn.lock
View File

File diff suppressed because it is too large Load Diff