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

feat(ui,dashboard): Add DataTable block (#10024)

Browse Source 
**What**
- Adds opinionated DataTable block to `@medusajs/ui` 
- Adds new DataTable to `@medusajs/dashboard` that uses the above mentioned block as the primitive.

The PR also replaces the table on /customer-groups and the variants table on /products/:id with the new DataTable, to provide an example of it's usage. The previous DataTable component has been renamed to `_DataTable` and has been deprecated.

**Note**
This PR has a lot of LOC. 5,346 of these changes are the fr.json file, which wasn't formatted correctly before. When adding the new translations needed for this PR the file was formatted which caused each line to change to have the proper indentation.

Resolves CMRC-333
This commit is contained in:
Kasper Fabricius Kristensen
2025-01-20 13:26:12 +00:00
committed by GitHub
parent c3976a312b
commit 147c0e5a35
130 changed files with 9238 additions and 3884 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/design-system/ui/src/components/checkbox/checkbox.tsx
+6 -3
View File
@@ -5,13 +5,16 @@ import * as Primitives from "@radix-ui/react-checkbox"
import * as React from "react"
import { clx } from "@/utils/clx"
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.ComponentPropsWithoutRef<typeof Primitives.Root> & {
checked?: CheckboxCheckedState | undefined
}
>(({ className, checked, ...props }, ref) => {
return (
<Primitives.Root
@@ -19,13 +22,13 @@ const Checkbox = React.forwardRef<
ref={ref}
checked={checked}
className={clx(
"group relative inline-flex h-5 w-5 items-center justify-center outline-none ",
"group inline-flex h-5 w-5 items-center justify-center outline-none ",
className
)}
>
<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]",
"text-ui-fg-on-inverted bg-ui-bg-base shadow-borders-base [&_path]:shadow-details-contrast-on-bg-interactive transition-fg h-[15px] w-[15px] 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",
packages/design-system/ui/src/components/checkbox/index.ts
+1
View File
@@ -1 +1,2 @@
export * from "./checkbox"
export * from "./types"
packages/design-system/ui/src/components/checkbox/types.ts
+3
View File
@@ -0,0 +1,3 @@
import { CheckedState } from "@radix-ui/react-checkbox"
export type CheckboxCheckedState = CheckedState
packages/design-system/ui/src/components/command-bar/command-bar.tsx
+1 -1
View File
@@ -167,7 +167,7 @@ const Command = React.forwardRef<HTMLButtonElement, CommandProps>(
) => {
React.useEffect(() => {
const handleKeyDown = (event: KeyboardEvent) => {
if (event.key === shortcut) {
if (event.key.toLowerCase() === shortcut.toLowerCase()) {
event.preventDefault()
event.stopPropagation()
action()
packages/design-system/ui/src/components/date-picker/date-picker-field.tsx
+6 -2
View File
@@ -33,7 +33,6 @@ const datePickerFieldStyles = cva({
const DatePickerField = ({ size = "base", ...props }: DatePickerFieldProps) => {
const { locale } = useLocale()
const state = useDateFieldState({
...props,
locale,
@@ -44,7 +43,12 @@ const DatePickerField = ({ size = "base", ...props }: DatePickerFieldProps) => {
const { fieldProps } = useDateField(props, state, ref)
return (
<div ref={ref} aria-label="Date input" className={datePickerFieldStyles({ size })} {...fieldProps}>
<div
ref={ref}
aria-label="Date input"
className={datePickerFieldStyles({ size })}
{...fieldProps}
>
{state.segments.map((segment, index) => {
return <DateSegment key={index} segment={segment} state={state} />
})}
packages/design-system/ui/src/components/dropdown-menu/dropdown-menu.tsx
+12 -9
View File
@@ -48,7 +48,7 @@ const SubMenuTrigger = React.forwardRef<
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",
"focus-visible:bg-ui-bg-component-hover focus:bg-ui-bg-component-hover",
"active:bg-ui-bg-component-pressed",
"active:bg-ui-bg-component-hover",
"data-[disabled]:text-ui-fg-disabled data-[disabled]:pointer-events-none",
"data-[state=open]:!bg-ui-bg-component-hover",
className
@@ -56,7 +56,7 @@ const SubMenuTrigger = React.forwardRef<
{...props}
>
{children}
<ChevronRightMini className="ml-auto text-ui-fg-muted" />
<ChevronRightMini className="text-ui-fg-muted ml-auto" />
</Primitives.SubTrigger>
))
SubMenuTrigger.displayName = "DropdownMenu.SubMenuTrigger"
@@ -130,7 +130,7 @@ const Item = React.forwardRef<
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",
"focus-visible:bg-ui-bg-component-hover focus:bg-ui-bg-component-hover",
"active:bg-ui-bg-component-pressed",
"active:bg-ui-bg-component-hover",
"data-[disabled]:text-ui-fg-disabled data-[disabled]:pointer-events-none",
className
)}
@@ -149,9 +149,9 @@ const CheckboxItem = React.forwardRef<
<Primitives.CheckboxItem
ref={ref}
className={clx(
"bg-ui-bg-component text-ui-fg-base relative flex cursor-pointer select-none items-center rounded-md py-1.5 pl-[31px] pr-2 txt-compact-small outline-none transition-colors",
"focus-visible:bg-ui-bg-component-pressed",
"active:bg-ui-bg-component-pressed",
"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",
"focus-visible:bg-ui-bg-component-hover focus:bg-ui-bg-component-hover",
"active:bg-ui-bg-component-hover",
"data-[disabled]:text-ui-fg-disabled data-[disabled]:pointer-events-none",
"data-[state=checked]:txt-compact-small-plus",
className
@@ -180,8 +180,8 @@ const RadioItem = React.forwardRef<
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",
"focus-visible:bg-ui-bg-component-hover",
"active:bg-ui-bg-component-pressed",
"focus-visible:bg-ui-bg-component-hover focus:bg-ui-bg-component-hover",
"active:bg-ui-bg-component-hover",
"data-[disabled]:text-ui-fg-disabled data-[disabled]:pointer-events-none",
"data-[state=checked]:txt-compact-small-plus",
className
@@ -222,7 +222,10 @@ const Separator = React.forwardRef<
>(({ className, ...props }, ref) => (
<Primitives.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)}
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",
className
)}
{...props}
/>
))
packages/design-system/ui/src/components/icon-button/icon-button.tsx
+6 -7
View File
@@ -7,17 +7,16 @@ import { clx } from "@/utils/clx"
const iconButtonVariants = cva({
base: clx(
"transition-fg relative inline-flex w-fit items-center justify-center overflow-hidden rounded-md outline-none",
"disabled:bg-ui-bg-disabled disabled:shadow-buttons-neutral disabled:text-ui-fg-disabled disabled:after:hidden"
"transition-fg inline-flex w-fit items-center justify-center overflow-hidden rounded-md outline-none",
"disabled:bg-ui-bg-disabled disabled:shadow-buttons-neutral disabled:text-ui-fg-disabled "
),
variants: {
variant: {
primary: clx(
"shadow-buttons-neutral text-ui-fg-subtle bg-ui-button-neutral after:button-neutral-gradient",
"hover:bg-ui-button-neutral-hover hover:after:button-neutral-hover-gradient",
"active:bg-ui-button-neutral-pressed active:after:button-neutral-pressed-gradient",
"focus-visible:shadow-buttons-neutral-focus",
"after:absolute after:inset-0 after:content-['']"
"shadow-buttons-neutral text-ui-fg-subtle bg-ui-button-neutral",
"hover:bg-ui-button-neutral-hover",
"active:bg-ui-button-neutral-pressed",
"focus-visible:shadow-buttons-neutral-focus"
),
transparent: clx(
"text-ui-fg-subtle bg-ui-button-transparent",
packages/design-system/ui/src/components/skeleton/index.ts
+1
View File
@@ -0,0 +1 @@
export * from "./skeleton";
packages/design-system/ui/src/components/skeleton/skeleton.tsx
+16
View File
@@ -0,0 +1,16 @@
import { clx } from "@/utils/clx"
import * as React from "react"
function Skeleton({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) {
return (
<div
className={clx("bg-ui-bg-component animate-pulse rounded-md", className)}
{...props}
/>
)
}
export { Skeleton }
packages/design-system/ui/src/components/table/table.tsx
+6 -3
View File
@@ -49,7 +49,7 @@ const Cell = React.forwardRef<
HTMLTableCellElement,
React.HTMLAttributes<HTMLTableCellElement>
>(({ className, ...props }, ref) => (
<td ref={ref} className={clx("h-12 pr-6", className)} {...props} />
<td ref={ref} className={clx("h-12 py-0 pl-0 pr-6", className)} {...props} />
))
Cell.displayName = "Table.Cell"
@@ -60,7 +60,7 @@ const Header = React.forwardRef<
<thead
ref={ref}
className={clx(
"border-ui-border-base txt-compact-small-plus [&_tr:hover]:bg-ui-bg-base border-y",
"border-ui-border-base txt-compact-small-plus [&_tr]:bg-ui-bg-subtle [&_tr]:hover:bg-ui-bg-subtle border-y",
className
)}
{...props}
@@ -74,7 +74,10 @@ const HeaderCell = React.forwardRef<
>(({ className, ...props }, ref) => (
<th
ref={ref}
className={clx("txt-compact-small-plus h-12 pr-6 text-left", className)}
className={clx(
"txt-compact-small-plus h-12 py-0 pl-0 pr-6 text-left",
className
)}
{...props}
/>
))