@spree/dashboard-ui 0.13.1 → 1.0.0-beta.1

package/src/ui/tabs.tsx

@@ -0,0 +1,84 @@
+import { Tabs as TabsPrimitive } from '@base-ui/react/tabs'
+import type * as React from 'react'
+import { cn } from '../lib/utils'
+
+function Tabs({
+  className,
+  orientation = 'horizontal',
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      orientation={orientation}
+      className={cn(
+        'group/tabs flex gap-2 data-[orientation=horizontal]:flex-col data-[orientation=vertical]:flex-row',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+/** The track a set of tabs sits in, recessed so the selected tab reads as raised. */
+function TabsList({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      className={cn(
+        'inline-flex w-fit items-center justify-center gap-1 rounded-lg bg-track-recessed p-1 text-muted-foreground',
+        'group-data-[orientation=vertical]/tabs:h-auto group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:flex-col',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </TabsPrimitive.List>
+  )
+}
+
+function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Tab>) {
+  return (
+    <TabsPrimitive.Tab
+      data-slot="tabs-trigger"
+      className={cn(
+        // min-h-7 + py-1 keeps the hit area past the 24px WCAG target size at
+        // every text size; the old h-[calc(100%-1px)] left it to the parent.
+        'inline-flex min-h-7 flex-1 cursor-pointer items-center justify-center gap-1.5 rounded-md px-2.5 py-1 text-sm font-medium whitespace-nowrap',
+        'transition-[color,background-color,box-shadow] duration-150 ease-out outline-none motion-reduce:transition-none',
+        'group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start',
+        // Unselected tabs recede so the selected one reads as chosen; hover
+        // promotes to full foreground rather than only shifting the surface,
+        // which is the part a colour-blind or low-vision reader can see.
+        'text-muted-foreground hover:text-foreground',
+        // The raised surface lives on the tab itself, as it did before the
+        // indicator: it is the thing that makes the selection legible, and it
+        // must not depend on a separate element rendering correctly behind it.
+        'data-[active]:bg-nested-raised data-[active]:text-foreground data-[active]:shadow-xs',
+        // Same focus treatment as Button, so a keyboard user sees one
+        // consistent indicator across the dashboard.
+        'focus-visible:shadow-[0_0_0_3px_color-mix(in_srgb,var(--ring)_15%,transparent)]',
+        'disabled:pointer-events-none disabled:opacity-70 disabled:cursor-not-allowed',
+        "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Panel>) {
+  return (
+    <TabsPrimitive.Panel
+      data-slot="tabs-content"
+      className={cn('flex-1 outline-none', className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsContent, TabsList, TabsTrigger }

package/src/ui/textarea.tsx

@@ -7,7 +7,7 @@ function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
     <textarea
       data-slot="textarea"
       className={cn(
-        'flex field-sizing-content min-h-16 w-full rounded-lg border border-border bg-card px-2.5 py-1.5 text-base font-normal leading-normal text-foreground shadow-xs transition-all duration-100 ease-in-out outline-none placeholder:text-muted-foreground focus:border-blue-500 focus:shadow-[0_0_0_3px_rgba(59,130,246,0.15)] disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-muted disabled:border-border disabled:text-muted-foreground disabled:shadow-none aria-invalid:border-destructive',
+        'flex field-sizing-content min-h-16 w-full rounded-md border border-border bg-card px-2.5 py-1.5 text-base font-normal leading-normal text-foreground transition-[color,background-color,border-color,box-shadow] duration-100 ease-out outline-none placeholder:text-muted-foreground focus:border-blue-500 focus:shadow-[0_0_0_3px_color-mix(in_srgb,var(--ring)_15%,transparent)] disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground aria-invalid:border-destructive',
         className,
       )}
       {...props}

package/src/ui/thumbnail.tsx

@@ -0,0 +1,80 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+import type * as React from 'react'
+import { cn } from '../lib/utils'
+import { ImageIcon } from '../spree/icons'
+
+const thumbnailVariants = cva(
+  // The wrapper always renders, so a record without an image keeps the same
+  // footprint as one with it and rows never reflow. `shrink-0` matters in the
+  // flex rows these sit in — without it a long product name squashes the image.
+  'flex shrink-0 items-center justify-center overflow-hidden border bg-muted text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*=size-])]:size-4',
+  {
+    variants: {
+      size: {
+        xs: 'size-5 [&_svg:not([class*=size-])]:size-3',
+        sm: 'size-8',
+        md: 'size-10',
+        lg: 'size-12 [&_svg:not([class*=size-])]:size-5',
+      },
+      shape: {
+        rounded: 'rounded-md',
+        square: 'rounded-none',
+        circle: 'rounded-full',
+      },
+    },
+    defaultVariants: {
+      size: 'md',
+      shape: 'rounded',
+    },
+  },
+)
+
+export interface ThumbnailProps
+  extends Omit<React.ComponentProps<'div'>, 'children'>,
+    VariantProps<typeof thumbnailVariants> {
+  /** Image to show. When absent or failed, the fallback renders instead. */
+  src?: string | null
+  /**
+   * Describes the image for screen readers. Leave unset when a visible label
+   * sits beside the thumbnail — the image is decorative then, and repeating
+   * the name makes screen readers announce it twice.
+   */
+  alt?: string
+  /** Overrides the placeholder shown when there is no image. */
+  fallback?: React.ReactNode
+  /** Defer loading until the thumbnail is near the viewport. */
+  loading?: 'eager' | 'lazy'
+}
+
+/**
+ * A product or record image at a fixed size, falling back to a placeholder.
+ *
+ * Images are cropped to fill the box (`object-cover`), which suits photography.
+ * Logos and artwork that must not be cropped want `Attachment` instead.
+ */
+export function Thumbnail({
+  src,
+  alt = '',
+  fallback,
+  size,
+  shape,
+  className,
+  loading,
+  ...props
+}: ThumbnailProps) {
+  return (
+    <div
+      data-slot="thumbnail"
+      className={cn(thumbnailVariants({ size, shape }), className)}
+      {...props}
+    >
+      {src ? (
+        <img src={src} alt={alt} loading={loading} className="size-full object-cover" />
+      ) : (
+        (fallback ?? <ImageIcon />)
+      )}
+    </div>
+  )
+}
+
+export { thumbnailVariants }

package/src/ui/toast.tsx

@@ -0,0 +1,112 @@
+'use client'
+
+import { Toast as ToastPrimitive } from '@base-ui/react/toast'
+import i18n from 'i18next'
+import type * as React from 'react'
+import { cn } from '../lib/utils'
+import {
+  CircleCheckIcon,
+  InfoIcon,
+  Loader2Icon,
+  OctagonXIcon,
+  TriangleAlertIcon,
+  XIcon,
+} from '../spree/icons'
+
+/**
+ * App-wide toast manager. Created outside React so a toast can be raised from
+ * anywhere — a mutation hook, an event subscriber, a plain async function —
+ * without threading a hook through the call stack.
+ *
+ * Raise one with `toastManager.add({ type: 'success', title: '…' })`. Passing
+ * an `id` that already exists updates that toast in place and restarts its
+ * timer, which is how a long-running job reports progress through a single
+ * toast rather than stacking one per step.
+ */
+export const toastManager = ToastPrimitive.createToastManager()
+
+const ICONS: Record<string, React.ReactNode> = {
+  success: <CircleCheckIcon className="size-4 text-emerald-600 dark:text-emerald-400" />,
+  error: <OctagonXIcon className="size-4 text-destructive" />,
+  warning: <TriangleAlertIcon className="size-4 text-amber-600 dark:text-amber-400" />,
+  info: <InfoIcon className="size-4 text-muted-foreground" />,
+  loading: <Loader2Icon className="size-4 animate-spin text-muted-foreground" />,
+}
+
+function ToastList() {
+  const { toasts } = ToastPrimitive.useToastManager()
+
+  return toasts.map((toast) => (
+    <ToastPrimitive.Root
+      key={toast.id}
+      toast={toast}
+      // Base UI types a toast as `dialog`, which puts every transient
+      // notification in the same bucket as real modals — a `getByRole('dialog')`
+      // lookup, ours or a screen reader user's, matches whatever toast happens
+      // to be on screen. `status` is what a passive notification should expose.
+      role={toast.type === 'error' ? 'alert' : 'status'}
+      // `--toast-index` / `--toast-offset-y` drive the stacked-card effect:
+      // toasts behind the front one scale down and sit slightly higher.
+      className={cn(
+        // Normal flow inside a bottom-anchored column, not absolute
+        // positioning: a zero-height viewport gives an absolutely-positioned
+        // child nothing to sit on, and it renders below the fold.
+        'pointer-events-auto w-full',
+        'rounded-xl border border-border bg-popover p-4 text-popover-foreground shadow-lg',
+        'transition-all duration-200 ease-out',
+        'data-[starting-style]:translate-y-2 data-[starting-style]:opacity-0',
+        'data-[ending-style]:translate-y-2 data-[ending-style]:opacity-0',
+      )}
+    >
+      <div className="flex items-start gap-3">
+        {toast.type && ICONS[toast.type] && (
+          <span className="mt-0.5 shrink-0">{ICONS[toast.type]}</span>
+        )}
+        <div className="flex min-w-0 flex-1 flex-col gap-1">
+          <ToastPrimitive.Title className="font-medium text-sm leading-snug" />
+          <ToastPrimitive.Description className="text-muted-foreground text-sm leading-snug" />
+        </div>
+        <ToastPrimitive.Close
+          // 44px tap target on touch, compact for a pointer — the same rule the
+          // rest of the app follows for icon-only controls.
+          className="-mt-1 -mr-1 inline-flex size-7 shrink-0 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+          aria-label={i18n.t('admin.actions.close')}
+        >
+          <XIcon className="size-4" />
+        </ToastPrimitive.Close>
+      </div>
+    </ToastPrimitive.Root>
+  ))
+}
+
+/**
+ * Mount once at the app root, inside the provider that owns the queue.
+ *
+ * Replaces the Sonner toaster: shadcn dropped that integration in favour of
+ * this Base UI primitive, which is also what every other overlay in this app
+ * (Sheet, Dialog, Popover, Select) is already built on.
+ */
+export function Toaster({ children }: { children?: React.ReactNode }) {
+  return (
+    <ToastPrimitive.Provider toastManager={toastManager}>
+      {children}
+      <ToastPrimitive.Portal>
+        <ToastPrimitive.Viewport
+          className={cn(
+            // Below the overlay layer (`z-50`) rather than above everything:
+            // the stack sits bottom-right, which is exactly where a side
+            // sheet's footer buttons are, and a toast drifting over Save is
+            // both unclickable and a click the merchant did not intend.
+            'fixed right-4 z-40 flex w-[min(22rem,calc(100vw-2rem))] flex-col gap-2',
+            // `pointer-events-none` on the column so the empty space above the
+            // stack never blocks the page; each toast takes them back.
+            'pointer-events-none',
+            'bottom-[max(1rem,env(safe-area-inset-bottom))]',
+          )}
+        >
+          <ToastList />
+        </ToastPrimitive.Viewport>
+      </ToastPrimitive.Portal>
+    </ToastPrimitive.Provider>
+  )
+}

package/src/ui/tooltip.tsx

@@ -85,7 +85,9 @@ function TooltipContent({
         <TooltipPrimitive.Popup
           data-slot="tooltip-content"
           className={cn(
-            'z-50 inline-flex w-fit max-w-[200px] items-center gap-1.5 rounded-lg border border-border bg-popover px-2 py-1 text-sm font-normal text-popover-foreground shadow-md data-[starting-style]:opacity-0 data-[starting-style]:scale-95 data-[ending-style]:opacity-0 data-[ending-style]:scale-95 transition-[opacity,transform] duration-100',
+            // `origin-(--transform-origin)` so it grows out of the element it
+            // describes rather than its own centre.
+            'z-50 inline-flex w-fit max-w-[200px] items-center gap-1.5 rounded-lg border border-border bg-popover px-2 py-1 text-sm font-normal text-popover-foreground shadow-md origin-(--transform-origin) data-[starting-style]:opacity-0 data-[starting-style]:scale-95 data-[ending-style]:opacity-0 data-[ending-style]:scale-95 transition-[opacity,transform,translate,scale] duration-100 ease-out',
             className,
           )}
           {...props}

package/src/ui/sonner.tsx

@@ -1,47 +0,0 @@
-import {
-  CircleCheckIcon,
-  InfoIcon,
-  Loader2Icon,
-  OctagonXIcon,
-  TriangleAlertIcon,
-} from 'lucide-react'
-import type { CSSProperties } from 'react'
-import { Toaster as Sonner, type ToasterProps } from 'sonner'
-import { useTheme } from '../spree/theme-provider'
-
-const Toaster = ({ ...props }: ToasterProps) => {
-  // The shadcn-default Sonner template assumes `next-themes`. This app has its
-  // own ThemeProvider that exposes a `mode` (the user's selection: light/dark/system)
-  // — Sonner's `theme` prop accepts the same three values, so we forward it.
-  const { mode } = useTheme()
-
-  return (
-    <Sonner
-      theme={mode as ToasterProps['theme']}
-      className="toaster group"
-      icons={{
-        success: <CircleCheckIcon className="size-4" />,
-        info: <InfoIcon className="size-4" />,
-        warning: <TriangleAlertIcon className="size-4" />,
-        error: <OctagonXIcon className="size-4" />,
-        loading: <Loader2Icon className="size-4 animate-spin" />,
-      }}
-      style={
-        {
-          '--normal-bg': 'var(--popover)',
-          '--normal-text': 'var(--popover-foreground)',
-          '--normal-border': 'var(--border)',
-          '--border-radius': 'var(--radius)',
-        } as CSSProperties
-      }
-      toastOptions={{
-        classNames: {
-          toast: 'cn-toast',
-        },
-      }}
-      {...props}
-    />
-  )
-}
-
-export { Toaster }