@spree/dashboard-ui 0.1.0

package/src/ui/data-table.tsx

@@ -0,0 +1,60 @@
+import type { ReactNode } from 'react'
+import { cn } from '../lib/utils'
+
+function Table({ className, ...props }: React.ComponentProps<'table'>) {
+  return (
+    <div className="overflow-x-auto">
+      <table className={cn('w-full align-top text-foreground', className)} {...props} />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {
+  return <thead className={cn('align-bottom', className)} {...props} />
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<'tbody'>) {
+  return <tbody className={cn('align-middle', className)} {...props} />
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<'tr'>) {
+  return (
+    <tr className={cn('group/row hover:bg-muted/60 last:*:border-b-0', className)} {...props} />
+  )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<'th'>) {
+  return (
+    <th
+      className={cn(
+        'text-left text-sm font-medium text-muted-foreground bg-muted/50 p-2 border-b border-border whitespace-nowrap first:pl-4 last:pr-4',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<'td'>) {
+  return (
+    <td
+      className={cn(
+        'py-3 px-2 border-b border-border align-middle first:pl-4 last:pr-4 group-last/row:first:rounded-bl-xl group-last/row:last:rounded-br-xl',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableEmpty({ children, colSpan }: { children: ReactNode; colSpan: number }) {
+  return (
+    <tr>
+      <td colSpan={colSpan} className="py-12 text-center text-muted-foreground">
+        {children}
+      </td>
+    </tr>
+  )
+}
+
+export { Table, TableBody, TableCell, TableEmpty, TableHead, TableHeader, TableRow }

package/src/ui/date-picker.tsx

@@ -0,0 +1,253 @@
+import { format, parse, parseISO } from 'date-fns'
+import { formatInTimeZone, fromZonedTime, toZonedTime } from 'date-fns-tz'
+import i18n from 'i18next'
+import { CalendarIcon, XIcon } from 'lucide-react'
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { activeDateLocale } from '../lib/date-locale'
+import { cn } from '../lib/utils'
+import { Button } from './button'
+import { Calendar } from './calendar'
+import { Input } from './input'
+import { Popover, PopoverContent, PopoverTrigger } from './popover'
+
+interface DatePickerProps {
+  value?: string | null
+  onChange?: (value: string | null) => void
+  placeholder?: string
+  className?: string
+  disabled?: boolean
+  includeTime?: boolean
+  /**
+   * IANA timezone (e.g. `Europe/Berlin`) used to interpret datetime values.
+   * Defaults to the browser's resolved timezone. **Pass the store timezone
+   * for any admin-facing surface** so that wall-clock times mean the same
+   * thing for every admin regardless of where they're logged in from. Use
+   * `<StoreDatePicker>` (in `components/spree/`) to do this automatically.
+   *
+   * Date-only mode (`includeTime=false`) is timezone-agnostic — values are
+   * plain `yyyy-MM-dd` strings with no clock component.
+   */
+  timezone?: string
+  /**
+   * Render the calendar panel inline (absolute-positioned beneath the
+   * trigger) instead of via Base UI's `<Popover>` Portal. Set this on any
+   * usage nested inside a `<Sheet>` — Base UI's Popover Portal silently
+   * fails to mount inside deeply nested portal trees, so callers in form
+   * sheets / edit drawers must opt in. Filter panels and page-level forms
+   * keep the default Popover behavior.
+   */
+  inline?: boolean
+}
+
+const DATE_ONLY = /^\d{4}-\d{2}-\d{2}$/
+
+// Parse the inbound value into a Date whose **browser-local components**
+// match the *store-local* date/time the value represents:
+// - `yyyy-MM-dd` (date-only): timezone-agnostic; parse in browser-local.
+// - Full ISO timestamp (datetime): UTC instant reinterpreted in store TZ.
+function parseValue(value: string | null | undefined, tz: string): Date | undefined {
+  if (!value) return undefined
+  if (DATE_ONLY.test(value)) return parse(value, 'yyyy-MM-dd', new Date())
+  return toZonedTime(parseISO(value), tz)
+}
+
+// Format the value for the trigger button. Date-only uses the locally-anchored
+// Date; datetime uses store-TZ formatting on the original UTC instant.
+function formatTriggerLabel(
+  value: string | null | undefined,
+  date: Date | undefined,
+  tz: string,
+  includeTime: boolean,
+  placeholder: string,
+): string {
+  if (!date || Number.isNaN(date.getTime())) return placeholder
+  const locale = activeDateLocale()
+  if (includeTime && value && !DATE_ONLY.test(value)) {
+    return formatInTimeZone(parseISO(value), tz, 'PPP p', { locale })
+  }
+  return format(date, includeTime ? 'PPP p' : 'PPP', { locale })
+}
+
+function DatePicker({
+  value,
+  onChange,
+  placeholder = i18n.t('admin.common.pick_date'),
+  className,
+  disabled = false,
+  includeTime = false,
+  timezone,
+  inline = false,
+}: DatePickerProps) {
+  const [open, setOpen] = useState(false)
+  const containerRef = useRef<HTMLDivElement | null>(null)
+
+  // Browser TZ is the fallback — used in non-admin contexts (Storybook,
+  // isolated tests) where there's no store context to pull from.
+  const tz = useMemo(
+    () => timezone ?? Intl.DateTimeFormat().resolvedOptions().timeZone ?? 'UTC',
+    [timezone],
+  )
+
+  // The Calendar and trigger label both read browser-local components, so
+  // anchoring them to store-local wall-clock is what makes the UI correct.
+  const date = useMemo(() => parseValue(value, tz), [value, tz])
+  const isValidDate = !!date && !Number.isNaN(date.getTime())
+
+  // Inline mode only: close on outside pointerdown / Escape. Popover mode
+  // gets this behavior from Base UI.
+  useEffect(() => {
+    if (!inline || !open) return
+    function handle(event: PointerEvent) {
+      const target = event.target as Node | null
+      if (!target || !containerRef.current) return
+      if (!containerRef.current.contains(target)) setOpen(false)
+    }
+    function handleKey(event: KeyboardEvent) {
+      if (event.key === 'Escape') setOpen(false)
+    }
+    document.addEventListener('pointerdown', handle)
+    document.addEventListener('keydown', handleKey)
+    return () => {
+      document.removeEventListener('pointerdown', handle)
+      document.removeEventListener('keydown', handleKey)
+    }
+  }, [inline, open])
+
+  const handleSelect = (selected: Date | undefined) => {
+    if (!selected) {
+      onChange?.(null)
+      return
+    }
+
+    if (!includeTime) {
+      // Date-only: emit `yyyy-MM-dd` using browser-local components. The
+      // user clicked a specific calendar day; the day number is what
+      // matters, not the timezone.
+      onChange?.(format(selected, 'yyyy-MM-dd'))
+      setOpen(false)
+      return
+    }
+
+    // Datetime: the picked Date has browser-local components for the
+    // selected day at (preserved or zero) hours/minutes. Reinterpret those
+    // wall-clock components as **store-local time**, then emit the UTC
+    // instant. `fromZonedTime` does exactly this conversion.
+    if (date && isValidDate) {
+      selected.setHours(date.getHours(), date.getMinutes())
+    }
+    onChange?.(fromZonedTime(selected, tz).toISOString())
+  }
+
+  const handleTimeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const raw = e.target.value
+    if (!raw) {
+      onChange?.(null)
+      return
+    }
+    const [hours, minutes] = raw.split(':').map(Number)
+    if (!Number.isFinite(hours) || !Number.isFinite(minutes)) return
+    const d = date && isValidDate ? new Date(date) : new Date()
+    d.setHours(hours, minutes, 0, 0)
+    onChange?.(fromZonedTime(d, tz).toISOString())
+  }
+
+  const handleClear = (e: React.SyntheticEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    onChange?.(null)
+  }
+
+  const timeValue = useMemo(
+    () =>
+      isValidDate && date
+        ? `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
+        : '',
+    [isValidDate, date],
+  )
+
+  const triggerLabel = useMemo(
+    () => formatTriggerLabel(value, date, tz, includeTime, placeholder),
+    [value, date, tz, includeTime, placeholder],
+  )
+
+  const triggerChildren = (
+    <>
+      <CalendarIcon className="size-4 shrink-0 text-muted-foreground" />
+      <span className="flex-1 truncate">{triggerLabel}</span>
+      {isValidDate && (
+        <span
+          role="button"
+          tabIndex={0}
+          aria-label={i18n.t('admin.a11y.clear_date')}
+          className="inline-flex size-4 items-center justify-center rounded-sm text-muted-foreground hover:text-foreground transition-colors cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          onClick={handleClear}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' || e.key === ' ') handleClear(e)
+          }}
+        >
+          <XIcon className="size-3.5" />
+        </span>
+      )}
+    </>
+  )
+
+  const panelChildren = (
+    <>
+      <Calendar
+        mode="single"
+        selected={isValidDate ? date : undefined}
+        onSelect={handleSelect}
+        defaultMonth={isValidDate ? date : undefined}
+      />
+      {includeTime && (
+        <div className="border-t border-border px-3 py-2">
+          <Input type="time" value={timeValue} onChange={handleTimeChange} />
+        </div>
+      )}
+    </>
+  )
+
+  if (inline) {
+    return (
+      <div ref={containerRef} className={cn('relative', className)}>
+        <Button
+          type="button"
+          variant="outline"
+          data-empty={!isValidDate}
+          disabled={disabled}
+          aria-haspopup="dialog"
+          aria-expanded={open}
+          onClick={() => setOpen((v) => !v)}
+          className="w-full justify-start"
+        >
+          {triggerChildren}
+        </Button>
+        {open && (
+          <div
+            role="dialog"
+            aria-label={placeholder}
+            className="absolute top-full left-0 z-50 mt-2 w-auto rounded-lg border border-border bg-popover p-0 text-popover-foreground shadow-md"
+          >
+            {panelChildren}
+          </div>
+        )}
+      </div>
+    )
+  }
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild disabled={disabled}>
+        <Button type="button" variant="outline" data-empty={!isValidDate} className={className}>
+          {triggerChildren}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0" align="start">
+        {panelChildren}
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+export type { DatePickerProps }
+export { DatePicker }

package/src/ui/date-range-picker.tsx

@@ -0,0 +1,150 @@
+import { format, startOfMonth, startOfYear, subDays } from 'date-fns'
+import { CalendarIcon, ChevronDownIcon } from 'lucide-react'
+import { useState } from 'react'
+import type { DateRange as DayPickerDateRange } from 'react-day-picker'
+import { useTranslation } from 'react-i18next'
+import { activeDateLocale } from '../lib/date-locale'
+import { cn } from '../lib/utils'
+import { Button } from './button'
+import { Calendar } from './calendar'
+import { Popover, PopoverContent, PopoverTrigger } from './popover'
+
+export interface DateRange {
+  from: Date
+  to: Date
+}
+
+type PresetKey = '7d' | '14d' | '30d' | '90d' | 'this_month' | 'ytd' | 'custom'
+
+interface Preset {
+  key: PresetKey
+  labelKey: string
+  value: () => DateRange
+}
+
+const presets: Preset[] = [
+  {
+    key: '7d',
+    labelKey: 'admin.components.date_range_picker.presets.last_7_days',
+    value: () => ({ from: subDays(new Date(), 7), to: new Date() }),
+  },
+  {
+    key: '14d',
+    labelKey: 'admin.components.date_range_picker.presets.last_14_days',
+    value: () => ({ from: subDays(new Date(), 14), to: new Date() }),
+  },
+  {
+    key: '30d',
+    labelKey: 'admin.components.date_range_picker.presets.last_30_days',
+    value: () => ({ from: subDays(new Date(), 30), to: new Date() }),
+  },
+  {
+    key: '90d',
+    labelKey: 'admin.components.date_range_picker.presets.last_90_days',
+    value: () => ({ from: subDays(new Date(), 90), to: new Date() }),
+  },
+  {
+    key: 'this_month',
+    labelKey: 'admin.components.date_range_picker.presets.this_month',
+    value: () => ({ from: startOfMonth(new Date()), to: new Date() }),
+  },
+  {
+    key: 'ytd',
+    labelKey: 'admin.components.date_range_picker.presets.year_to_date',
+    value: () => ({ from: startOfYear(new Date()), to: new Date() }),
+  },
+]
+
+interface DateRangePickerProps {
+  value: DateRange
+  onChange: (range: DateRange) => void
+}
+
+export function DateRangePicker({ value, onChange }: DateRangePickerProps) {
+  const { t } = useTranslation()
+  const [open, setOpen] = useState(false)
+  const [activePreset, setActivePreset] = useState<PresetKey>('30d')
+  const [calendarRange, setCalendarRange] = useState<DayPickerDateRange | undefined>()
+
+  const activePresetLabelKey =
+    presets.find((p) => p.key === activePreset)?.labelKey ??
+    'admin.components.date_range_picker.presets.last_30_days'
+
+  const dateLocale = activeDateLocale()
+  const triggerLabel =
+    activePreset === 'custom'
+      ? `${format(value.from, 'MMM d', { locale: dateLocale })} – ${format(value.to, 'MMM d', { locale: dateLocale })}`
+      : t(activePresetLabelKey)
+
+  function selectPreset(preset: Preset) {
+    const range = preset.value()
+    setActivePreset(preset.key)
+    setCalendarRange({ from: range.from, to: range.to })
+    onChange(range)
+    setOpen(false)
+  }
+
+  function applyCustomRange() {
+    if (calendarRange?.from && calendarRange?.to) {
+      setActivePreset('custom')
+      onChange({ from: calendarRange.from, to: calendarRange.to })
+      setOpen(false)
+    }
+  }
+
+  const canApply = calendarRange?.from && calendarRange?.to
+
+  return (
+    <Popover
+      open={open}
+      onOpenChange={(nextOpen) => {
+        setOpen(nextOpen)
+        if (nextOpen) {
+          setCalendarRange({ from: value.from, to: value.to })
+        }
+      }}
+    >
+      <PopoverTrigger asChild>
+        <Button size="sm" variant="outline" className="h-8 gap-2 text-sm font-normal">
+          <CalendarIcon className="size-3.5" />
+          {triggerLabel}
+          <ChevronDownIcon className="size-3.5 text-muted-foreground" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent align="end" className="w-auto p-0">
+        <div className="flex">
+          <div className="flex flex-col border-r py-2">
+            {presets.map((preset) => (
+              <button
+                key={preset.key}
+                type="button"
+                onClick={() => selectPreset(preset)}
+                className={cn(
+                  'whitespace-nowrap px-4 py-1.5 text-left text-sm transition-colors hover:bg-accent',
+                  activePreset === preset.key && 'font-medium text-foreground',
+                  activePreset !== preset.key && 'text-muted-foreground',
+                )}
+              >
+                {t(preset.labelKey)}
+              </button>
+            ))}
+          </div>
+          <div className="flex flex-col p-3">
+            <Calendar
+              mode="range"
+              defaultMonth={calendarRange?.from}
+              selected={calendarRange}
+              onSelect={setCalendarRange}
+              numberOfMonths={2}
+            />
+            <div className="flex justify-end border-t pt-3">
+              <Button size="sm" disabled={!canApply} onClick={applyCustomRange}>
+                {t('admin.actions.apply')}
+              </Button>
+            </div>
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}

package/src/ui/dialog.tsx

@@ -0,0 +1,214 @@
+import { Dialog as DialogPrimitive } from '@base-ui/react/dialog'
+import i18n from 'i18next'
+import { XIcon } from 'lucide-react'
+import * as React from 'react'
+import { cn } from '../lib/utils'
+import { Button } from './button'
+
+function Dialog({
+  children,
+  open,
+  defaultOpen,
+  onOpenChange,
+  modal,
+  ...props
+}: {
+  children?: React.ReactNode
+  open?: boolean
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean, eventDetails: DialogPrimitive.Root.ChangeEventDetails) => void
+  modal?: boolean | 'trap-focus'
+}) {
+  return (
+    <DialogPrimitive.Root
+      data-slot="dialog"
+      open={open}
+      defaultOpen={defaultOpen}
+      onOpenChange={onOpenChange}
+      modal={modal}
+      {...props}
+    >
+      {children}
+    </DialogPrimitive.Root>
+  )
+}
+
+function DialogTrigger({
+  asChild,
+  children,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger> & {
+  asChild?: boolean
+}) {
+  if (asChild && React.isValidElement(children)) {
+    return <DialogPrimitive.Trigger data-slot="dialog-trigger" render={children} {...props} />
+  }
+  return (
+    <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props}>
+      {children}
+    </DialogPrimitive.Trigger>
+  )
+}
+
+function DialogPortal({ children, ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return (
+    <DialogPrimitive.Portal data-slot="dialog-portal" {...props}>
+      {children}
+    </DialogPrimitive.Portal>
+  )
+}
+
+function DialogClose({
+  asChild,
+  children,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close> & {
+  asChild?: boolean
+}) {
+  if (asChild && React.isValidElement(children)) {
+    return <DialogPrimitive.Close data-slot="dialog-close" render={children} {...props} />
+  }
+  return (
+    <DialogPrimitive.Close data-slot="dialog-close" {...props}>
+      {children}
+    </DialogPrimitive.Close>
+  )
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Backdrop>) {
+  return (
+    <DialogPrimitive.Backdrop
+      data-slot="dialog-overlay"
+      className={cn(
+        'fixed inset-0 isolate z-50 bg-gray-100/75 dark:bg-black/60 duration-100 data-[starting-style]:opacity-0 data-[ending-style]:opacity-0 transition-opacity',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Popup> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Popup
+        data-slot="dialog-content"
+        className={cn(
+          'fixed top-1/2 left-1/2 z-50 flex w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-xl border border-border bg-card text-foreground text-sm shadow-lg duration-100 outline-none sm:max-w-[500px] data-[starting-style]:opacity-0 data-[starting-style]:scale-95 data-[ending-style]:opacity-0 data-[ending-style]:scale-95 transition-[opacity,transform]',
+          className,
+        )}
+        style={{ maxHeight: '90vh' }}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            render={
+              <Button variant="ghost" className="absolute top-3 right-3" size="icon-sm">
+                <XIcon />
+                <span className="sr-only">{i18n.t('admin.actions.close')}</span>
+              </Button>
+            }
+          />
+        )}
+      </DialogPrimitive.Popup>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn('flex flex-col gap-1.5 border-b p-4', className)}
+      {...props}
+    />
+  )
+}
+
+function DialogBody({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="dialog-body"
+      className={cn('flex-auto overflow-y-auto p-4', className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}: React.ComponentProps<'div'> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        'flex flex-col-reverse gap-2 border-t bg-muted/50 p-4 sm:flex-row sm:justify-end',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      {showCloseButton && (
+        <DialogPrimitive.Close render={<Button>{i18n.t('admin.actions.close')}</Button>} />
+      )}
+    </div>
+  )
+}
+
+function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn('text-base leading-none font-medium', className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn(
+        'text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogBody,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}