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

feat(inventory,dashboard,types,core-flows,js-sdk,medusa): Improve inventory UX (#10630)

Browse Source 
* feat(dashboard): Add UI for bulk editing inventory stock (#10556)

* progress

* cleanup types

* add changeset

* fix 0 values

* format schema

* add delete event and allow copy/pasting enabled for some fields

* add response types

* add tests

* work on fixing setValue behaviour

* cleanup toggle logic

* add loading state

* format schema

* add support for bidirectional actions in DataGrid and update Checkbox and RadioGroup

* update lock

* lint

* fix 404

* address feedback

* update cursor on bidirectional select
This commit is contained in:
Kasper Fabricius Kristensen
2025-01-13 01:07:14 +01:00
committed by GitHub
parent c5915451b8
commit bc22b81cdf
82 changed files with 2722 additions and 291 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -23,7 +23,16 @@ const Checkbox = React.forwardRef<
className
)}
>
<div className="text-ui-fg-on-inverted bg-ui-bg-base shadow-borders-base group-hover:bg-ui-bg-base-hover group-focus-visible:!shadow-borders-interactive-with-focus group-data-[state=checked]:bg-ui-bg-interactive group-data-[state=checked]:shadow-borders-interactive-with-shadow group-data-[state=indeterminate]:bg-ui-bg-interactive group-data-[state=indeterminate]:shadow-borders-interactive-with-shadow [&_path]:shadow-details-contrast-on-bg-interactive group-disabled:text-ui-fg-disabled group-disabled:!bg-ui-bg-disabled group-disabled:!shadow-borders-base transition-fg h-[14px] w-[14px] rounded-[3px]">
<div
className={clx(
"text-ui-fg-on-inverted bg-ui-bg-base shadow-borders-base [&_path]:shadow-details-contrast-on-bg-interactive transition-fg h-[14px] w-[14px] rounded-[3px]",
"group-disabled:cursor-not-allowed group-disabled:opacity-50",
"group-focus-visible:!shadow-borders-interactive-with-focus",
"group-hover:group-enabled:group-data-[state=unchecked]:bg-ui-bg-base-hover",
"group-data-[state=checked]:bg-ui-bg-interactive group-data-[state=checked]:shadow-borders-interactive-with-shadow",
"group-data-[state=indeterminate]:bg-ui-bg-interactive group-data-[state=indeterminate]:shadow-borders-interactive-with-shadow"
)}
>
<Primitives.Indicator className="absolute inset-0 flex items-center justify-center">
{checked === "indeterminate" ? <MinusMini /> : <CheckMini />}
</Primitives.Indicator>

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

@@ -36,7 +36,7 @@ const Indicator = React.forwardRef<
>
<div
className={clx(
"bg-ui-bg-base shadow-details-contrast-on-bg-interactive group-disabled:bg-ui-fg-disabled h-1.5 w-1.5 rounded-full group-disabled:shadow-none"
"bg-ui-bg-base shadow-details-contrast-on-bg-interactive h-1.5 w-1.5 rounded-full"
)}
/>
</Primitives.Indicator>
@@ -60,10 +60,10 @@ const Item = React.forwardRef<
<div
className={clx(
"shadow-borders-base bg-ui-bg-base transition-fg flex h-[14px] w-[14px] items-center justify-center rounded-full",
"group-hover:bg-ui-bg-base-hover",
"group-hover:group-enabled:group-data-[state=unchecked]:bg-ui-bg-base-hover",
"group-data-[state=checked]:bg-ui-bg-interactive group-data-[state=checked]:shadow-borders-interactive-with-shadow",
"group-focus-visible:!shadow-borders-interactive-with-focus",
"group-disabled:!bg-ui-bg-disabled group-disabled:!shadow-borders-base"
"group-disabled:cursor-not-allowed group-disabled:opacity-50"
)}
>
<Indicator />
@@ -95,7 +95,10 @@ const ChoiceBox = React.forwardRef<
<Primitives.Item
ref={ref}
className={clx(
"shadow-borders-base bg-ui-bg-base focus-visible:shadow-borders-interactive-with-focus outline-none transition-fg disabled:bg-ui-bg-disabled group flex items-start gap-x-2 rounded-lg p-3 disabled:cursor-not-allowed data-[state=checked]:shadow-borders-interactive-with-shadow",
"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",
"hover:enabled:bg-ui-bg-base-hover",
"data-[state=checked]:shadow-borders-interactive-with-shadow",
"group-disabled:cursor-not-allowed group-disabled:opacity-50",
className
)}
{...props}
@@ -103,7 +106,12 @@ const ChoiceBox = React.forwardRef<
aria-describedby={descriptionId}
>
<div className="flex h-5 w-5 items-center justify-center">
<div className="shadow-borders-base bg-ui-bg-base group-data-[state=checked]:bg-ui-bg-interactive group-data-[state=checked]:shadow-borders-interactive-with-shadow transition-fg group-disabled:!bg-ui-bg-disabled group-hover:bg-ui-bg-base-hover group-disabled:!shadow-borders-base flex h-3.5 w-3.5 items-center justify-center rounded-full">
<div
className={clx(
"shadow-borders-base bg-ui-bg-base group-data-[state=checked]:bg-ui-bg-interactive group-data-[state=checked]:shadow-borders-interactive-with-shadow transition-fg flex h-3.5 w-3.5 items-center justify-center rounded-full",
"group-hover:group-enabled:group-data-[state=unchecked]:bg-ui-bg-base-hover"
)}
>
<Indicator />
</div>
</div>
@@ -117,7 +125,7 @@ const ChoiceBox = React.forwardRef<
{label}
</Label>
<Hint
className="txt-compact-medium text-ui-fg-subtle group-disabled:text-ui-fg-disabled text-left"
className="txt-small text-ui-fg-subtle group-disabled:text-ui-fg-disabled text-left"
id={descriptionId}
>
{description}

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

@@ -7,7 +7,7 @@ import * as React from "react"
import { clx } from "@/utils/clx"
const switchVariants = cva({
base: "bg-ui-bg-switch-off hover:bg-ui-bg-switch-off-hover data-[state=unchecked]:hover:after:bg-switch-off-hover-gradient before:shadow-details-switch-background focus-visible:shadow-details-switch-background-focus data-[state=checked]:bg-ui-bg-interactive disabled:!bg-ui-bg-disabled group relative inline-flex items-center rounded-full outline-none transition-all before:absolute before:inset-0 before:rounded-full before:content-[''] after:absolute after:inset-0 after:rounded-full after:content-[''] disabled:cursor-not-allowed",
base: "bg-ui-bg-switch-off hover:bg-ui-bg-switch-off-hover data-[state=unchecked]:hover:after:bg-switch-off-hover-gradient before:shadow-details-switch-background focus-visible:shadow-details-switch-background-focus data-[state=checked]:bg-ui-bg-interactive disabled:opacity-50 group relative inline-flex items-center rounded-full outline-none transition-all before:absolute before:inset-0 before:rounded-full before:content-[''] after:absolute after:inset-0 after:rounded-full after:content-[''] disabled:cursor-not-allowed",
variants: {
size: {
small: "h-[16px] w-[28px]",
@@ -20,7 +20,7 @@ const switchVariants = cva({
})
const thumbVariants = cva({
base: "bg-ui-fg-on-color shadow-details-switch-handle group-disabled:bg-ui-fg-disabled pointer-events-none h-[14px] w-[14px] rounded-full transition-all group-disabled:shadow-none",
base: "bg-ui-fg-on-color shadow-details-switch-handle pointer-events-none h-[14px] w-[14px] rounded-full transition-all",
variants: {
size: {
small: