@vendure-io/ui 2.0.0-beta.0 → 2.0.0-beta.10

package/src/components/molecules/copy-feedback-provider.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import { createContext, type ReactNode, useContext, useMemo } from 'react';
+
+// Function props can't cross a server→client boundary, so a copy surface
+// rendered from RSC (e.g. MDX docs) could never receive an `onCopied` callback
+// for toast wiring. This context is the RSC-safe alternative: mount
+// CopyFeedbackProvider once in a client component (wire your toast there — the
+// DS never toasts), and copy surfaces resolve their feedback in a fixed order —
+// explicit prop → this context → nothing beyond the built-in copied icon.
+interface CopyFeedbackContextValue {
+  /** Called after a successful copy. Wire your toast here — the DS never toasts. */
+  onCopied?: () => void;
+  /** Called when the clipboard write fails. */
+  onCopyError?: (error: Error) => void;
+}
+
+const CopyFeedbackContext = createContext<CopyFeedbackContextValue>({});
+
+function CopyFeedbackProvider({
+  children,
+  onCopied,
+  onCopyError,
+}: CopyFeedbackContextValue & { children: ReactNode }) {
+  const value = useMemo(() => ({ onCopied, onCopyError }), [onCopied, onCopyError]);
+  return <CopyFeedbackContext.Provider value={value}>{children}</CopyFeedbackContext.Provider>;
+}
+
+function useCopyFeedback(): CopyFeedbackContextValue {
+  return useContext(CopyFeedbackContext);
+}
+
+export { CopyFeedbackProvider, useCopyFeedback, type CopyFeedbackContextValue };

package/src/components/molecules/copyable-text.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { Button } from '@vendure-io/ui/components/atoms/button';
+import { useCopyFeedback } from '@vendure-io/ui/components/molecules/copy-feedback-provider';
 import { useCopy } from '@vendure-io/ui/hooks/use-copy';
 import { cn } from '@vendure-io/ui/lib/utils';
 import { CheckIcon, CopyIcon } from 'lucide-react';
@@ -11,9 +12,16 @@ interface CopyButtonProps extends Omit<React.ComponentProps<typeof Button>, 'val
   value: string;
   /** How long the check-mark feedback stays visible, in ms. @default 2000 */
   timeout?: number;
-  /** Called after a successful copy. Wire your toast here — the DS never toasts. */
+  /**
+   * Called after a successful copy. Wire your toast here — the DS never toasts.
+   * Falls back to `CopyFeedbackProvider` when omitted (the RSC-safe path, since
+   * function props can't be passed from server components).
+   */
   onCopied?: () => void;
-  /** Called when the clipboard write fails (e.g. permissions, insecure context). */
+  /**
+   * Called when the clipboard write fails (e.g. permissions, insecure context).
+   * Falls back to `CopyFeedbackProvider` when omitted.
+   */
   onCopyError?: (error: Error) => void;
   /** Accessible label before copying. @default "Copy" */
   copyLabel?: string;
@@ -40,6 +48,7 @@ function CopyButton({
   ...props
 }: CopyButtonProps) {
   const { copied, copy } = useCopy({ timeout });
+  const copyFeedback = useCopyFeedback();
 
   return (
     <Button
@@ -53,8 +62,9 @@ function CopyButton({
         onClick?.(event);
         if (event.defaultPrevented) return;
         const ok = await copy(value);
-        if (ok) onCopied?.();
-        else onCopyError?.(new Error('Failed to copy to the clipboard'));
+        if (ok) (onCopied ?? copyFeedback.onCopied)?.();
+        else
+          (onCopyError ?? copyFeedback.onCopyError)?.(new Error('Failed to copy to the clipboard'));
       }}
       {...props}
     >
@@ -71,10 +81,14 @@ interface CopyableTextProps {
   className?: string;
   /** How long the check-mark feedback stays visible, in ms. @default 2000 */
   timeout?: number;
-  /** Called after a successful copy. Wire your toast here — the DS never toasts. */
+  /** Called after a successful copy. Wire your toast here — the DS never toasts. Falls back to `CopyFeedbackProvider`. */
   onCopied?: () => void;
-  /** Called when the clipboard write fails. */
+  /** Called when the clipboard write fails. Falls back to `CopyFeedbackProvider`. */
   onCopyError?: (error: Error) => void;
+  /** Accessible label before copying, forwarded to the inner `CopyButton`. @default "Copy" */
+  copyLabel?: string;
+  /** Accessible label shown while the copied state is active, forwarded to the inner `CopyButton`. @default "Copied" */
+  copiedLabel?: string;
 }
 
 /**
@@ -89,11 +103,20 @@ function CopyableText({
   timeout,
   onCopied,
   onCopyError,
+  copyLabel,
+  copiedLabel,
 }: CopyableTextProps) {
   return (
     <span data-slot="copyable-text" className={cn('inline-flex items-center gap-1.5', className)}>
       {children ?? value}
-      <CopyButton value={value} timeout={timeout} onCopied={onCopied} onCopyError={onCopyError} />
+      <CopyButton
+        value={value}
+        timeout={timeout}
+        onCopied={onCopied}
+        onCopyError={onCopyError}
+        copyLabel={copyLabel}
+        copiedLabel={copiedLabel}
+      />
     </span>
   );
 }

package/src/components/molecules/data-table/data-table.tsx

@@ -367,95 +367,97 @@ function DataTable<TData>({
         <DataTableBulkActions table={table} cache={selectionCache} render={bulkActions} />
       )}
 
-      <Table>
-        <TableHeader>
-          {table.getHeaderGroups().map((headerGroup) => (
-            <TableRow key={headerGroup.id} className="group/header-row">
-              {headerGroup.headers.map((headerCell) => {
-                const content = headerCell.isPlaceholder
-                  ? null
-                  : flexRender(headerCell.column.columnDef.header, headerCell.getContext());
-                return (
-                  <TableHead
-                    key={headerCell.id}
-                    aria-sort={ariaSort(sorting != null, headerCell.column)}
-                    className={columnClass(headerCell.column.id)}
-                  >
-                    {sorting != null && !headerCell.isPlaceholder ? (
-                      <DataTableColumnHeader
-                        column={headerCell.column}
-                        sortLabel={l.sortLabel(headerLabelText(headerCell.column))}
-                      >
-                        {content}
-                      </DataTableColumnHeader>
-                    ) : (
-                      content
-                    )}
-                  </TableHead>
-                );
-              })}
-            </TableRow>
-          ))}
-        </TableHeader>
-        <TableBody>
-          {isLoading && rows.length === 0 ? (
-            Array.from({ length: skeletonRowCount }).map((_, rowIndex) => (
-              <TableRow key={`skeleton-${rowIndex}`}>
-                {Array.from({ length: Math.max(columnCount, 1) }).map((__, cellIndex) => (
-                  <TableCell key={`skeleton-cell-${cellIndex}`}>
-                    <Skeleton className="h-4 w-full" />
-                  </TableCell>
-                ))}
+      <div className="bg-card overflow-hidden rounded-xl border border-border/60">
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id} className="group/header-row">
+                {headerGroup.headers.map((headerCell) => {
+                  const content = headerCell.isPlaceholder
+                    ? null
+                    : flexRender(headerCell.column.columnDef.header, headerCell.getContext());
+                  return (
+                    <TableHead
+                      key={headerCell.id}
+                      aria-sort={ariaSort(sorting != null, headerCell.column)}
+                      className={columnClass(headerCell.column.id)}
+                    >
+                      {sorting != null && !headerCell.isPlaceholder ? (
+                        <DataTableColumnHeader
+                          column={headerCell.column}
+                          sortLabel={l.sortLabel(headerLabelText(headerCell.column))}
+                        >
+                          {content}
+                        </DataTableColumnHeader>
+                      ) : (
+                        content
+                      )}
+                    </TableHead>
+                  );
+                })}
               </TableRow>
-            ))
-          ) : bodyRows.length === 0 ? (
-            <TableRow className="hover:bg-transparent">
-              <TableCell
-                colSpan={Math.max(columnCount, 1)}
-                className="text-muted-foreground h-24 text-center"
-              >
-                {emptyState ?? l.empty}
-              </TableCell>
-            </TableRow>
-          ) : (
-            bodyRows.map((row) => {
-              const rowNode = (
-                <TableRow
-                  className="group/row"
-                  data-state={row.getIsSelected() ? 'selected' : undefined}
-                >
-                  {row.getVisibleCells().map((cell) => (
-                    <TableCell key={cell.id} className={columnClass(cell.column.id)}>
-                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+            ))}
+          </TableHeader>
+          <TableBody>
+            {isLoading && rows.length === 0 ? (
+              Array.from({ length: skeletonRowCount }).map((_, rowIndex) => (
+                <TableRow key={`skeleton-${rowIndex}`}>
+                  {Array.from({ length: Math.max(columnCount, 1) }).map((__, cellIndex) => (
+                    <TableCell key={`skeleton-cell-${cellIndex}`}>
+                      <Skeleton className="h-4 w-full" />
                     </TableCell>
                   ))}
                 </TableRow>
-              );
-              // Right-click accelerator: the row itself is the context-menu
-              // trigger, so the consumer supplies only the items and the core
-              // owns the menu chrome.
-              const defaultRow = contextActions ? (
-                <ContextMenu>
-                  <ContextMenuTrigger render={rowNode} />
-                  <ContextMenuContent>
-                    {contextActions(row.original, { row, table })}
-                  </ContextMenuContent>
-                </ContextMenu>
-              ) : (
-                rowNode
-              );
-              // Row-render seam: consumers can swap the default row for a
-              // full-width utility row or a per-row wrapper the cell grid can't
-              // express. Returning `defaultRow` keeps the built-in rendering.
-              return (
-                <React.Fragment key={row.id}>
-                  {renderRow ? renderRow(row, { table, columnCount, defaultRow }) : defaultRow}
-                </React.Fragment>
-              );
-            })
-          )}
-        </TableBody>
-      </Table>
+              ))
+            ) : bodyRows.length === 0 ? (
+              <TableRow className="hover:bg-transparent">
+                <TableCell
+                  colSpan={Math.max(columnCount, 1)}
+                  className="text-muted-foreground h-24 text-center"
+                >
+                  {emptyState ?? l.empty}
+                </TableCell>
+              </TableRow>
+            ) : (
+              bodyRows.map((row) => {
+                const rowNode = (
+                  <TableRow
+                    className="group/row"
+                    data-state={row.getIsSelected() ? 'selected' : undefined}
+                  >
+                    {row.getVisibleCells().map((cell) => (
+                      <TableCell key={cell.id} className={columnClass(cell.column.id)}>
+                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                      </TableCell>
+                    ))}
+                  </TableRow>
+                );
+                // Right-click accelerator: the row itself is the context-menu
+                // trigger, so the consumer supplies only the items and the core
+                // owns the menu chrome.
+                const defaultRow = contextActions ? (
+                  <ContextMenu>
+                    <ContextMenuTrigger render={rowNode} />
+                    <ContextMenuContent>
+                      {contextActions(row.original, { row, table })}
+                    </ContextMenuContent>
+                  </ContextMenu>
+                ) : (
+                  rowNode
+                );
+                // Row-render seam: consumers can swap the default row for a
+                // full-width utility row or a per-row wrapper the cell grid can't
+                // express. Returning `defaultRow` keeps the built-in rendering.
+                return (
+                  <React.Fragment key={row.id}>
+                    {renderRow ? renderRow(row, { table, columnCount, defaultRow }) : defaultRow}
+                  </React.Fragment>
+                );
+              })
+            )}
+          </TableBody>
+        </Table>
+      </div>
 
       {pagination && (
         <TablePagination

package/src/components/molecules/date-picker.tsx

@@ -0,0 +1,117 @@
+'use client';
+
+import { Button } from '@vendure-io/ui/components/atoms/button';
+import { Calendar } from '@vendure-io/ui/components/atoms/calendar';
+import { Popover, PopoverContent, PopoverTrigger } from '@vendure-io/ui/components/atoms/popover';
+import { useFormatSettings } from '@vendure-io/ui/components/molecules/format-provider';
+import {
+  formatCalendarDate,
+  formatDateLabel,
+  parseCalendarDate,
+} from '@vendure-io/ui/lib/date-value';
+import { cn } from '@vendure-io/ui/lib/utils';
+import { CalendarIcon, XIcon } from 'lucide-react';
+import * as React from 'react';
+
+type CalendarProps = Omit<
+  React.ComponentProps<typeof Calendar>,
+  'mode' | 'selected' | 'onSelect' | 'disabled' | 'defaultMonth'
+>;
+
+interface DatePickerProps extends Omit<React.ComponentProps<'div'>, 'defaultValue' | 'onChange'> {
+  /** Local calendar date (`YYYY-MM-DD`), never an instant. */
+  value?: string;
+  onValueChange?: (value: string | undefined) => void;
+  min?: string;
+  max?: string;
+  placeholder?: React.ReactNode;
+  clearable?: boolean;
+  disabled?: boolean;
+  invalid?: boolean;
+  name?: string;
+  id?: string;
+  calendarProps?: CalendarProps;
+}
+
+/** Date-only picker whose value cannot shift when serialized across time zones. */
+function DatePicker({
+  value,
+  onValueChange,
+  min,
+  max,
+  placeholder = 'Pick a date',
+  clearable = true,
+  disabled,
+  invalid,
+  name,
+  id,
+  calendarProps,
+  className,
+  ...props
+}: DatePickerProps) {
+  const [open, setOpen] = React.useState(false);
+  const { locale } = useFormatSettings();
+  const selected = parseCalendarDate(value);
+  const minDate = parseCalendarDate(min);
+  const maxDate = parseCalendarDate(max);
+  const disabledMatchers = [
+    ...(minDate ? [{ before: minDate }] : []),
+    ...(maxDate ? [{ after: maxDate }] : []),
+  ];
+
+  return (
+    <div
+      data-slot="date-picker"
+      className={cn('flex min-w-0 items-center gap-1', className)}
+      {...props}
+    >
+      {name ? <input type="hidden" name={name} value={value ?? ''} /> : null}
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger
+          render={
+            <Button
+              id={id}
+              type="button"
+              variant="outline"
+              disabled={disabled}
+              aria-invalid={invalid || undefined}
+              className="min-w-0 flex-1 justify-start font-normal"
+            />
+          }
+        >
+          <CalendarIcon />
+          <span className={cn('truncate', !selected && 'text-muted-foreground')}>
+            {selected ? formatDateLabel(selected, locale) : placeholder}
+          </span>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto p-0" align="start">
+          <Calendar
+            {...calendarProps}
+            mode="single"
+            selected={selected}
+            defaultMonth={selected ?? minDate}
+            disabled={disabledMatchers}
+            onSelect={(date) => {
+              onValueChange?.(date ? formatCalendarDate(date) : undefined);
+              if (date) setOpen(false);
+            }}
+          />
+        </PopoverContent>
+      </Popover>
+      {clearable && selected ? (
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon-sm"
+          disabled={disabled}
+          aria-label="Clear date"
+          onClick={() => onValueChange?.(undefined)}
+        >
+          <XIcon />
+        </Button>
+      ) : null}
+    </div>
+  );
+}
+
+export { DatePicker, type DatePickerProps };

package/src/components/molecules/date-range-picker.tsx

@@ -0,0 +1,151 @@
+'use client';
+
+import { Button } from '@vendure-io/ui/components/atoms/button';
+import { Calendar } from '@vendure-io/ui/components/atoms/calendar';
+import { Popover, PopoverContent, PopoverTrigger } from '@vendure-io/ui/components/atoms/popover';
+import { useFormatSettings } from '@vendure-io/ui/components/molecules/format-provider';
+import {
+  formatCalendarDate,
+  formatDateRangeLabel,
+  parseCalendarDate,
+} from '@vendure-io/ui/lib/date-value';
+import { cn } from '@vendure-io/ui/lib/utils';
+import { CalendarRangeIcon, XIcon } from 'lucide-react';
+import * as React from 'react';
+import type { DateRange } from 'react-day-picker';
+
+type CalendarProps = Omit<
+  React.ComponentProps<typeof Calendar>,
+  'mode' | 'selected' | 'onSelect' | 'defaultMonth'
+>;
+
+interface DateRangeValue {
+  from?: string;
+  to?: string;
+}
+
+interface DateRangePreset {
+  id: string;
+  label: React.ReactNode;
+  value: DateRangeValue | (() => DateRangeValue);
+}
+
+interface DateRangePickerProps
+  extends Omit<React.ComponentProps<'div'>, 'defaultValue' | 'onChange'> {
+  /** Local calendar-date boundaries (`YYYY-MM-DD`), inclusive. */
+  value?: DateRangeValue;
+  onValueChange?: (value: DateRangeValue | undefined) => void;
+  placeholder?: React.ReactNode;
+  clearable?: boolean;
+  disabled?: boolean;
+  invalid?: boolean;
+  presets?: readonly DateRangePreset[];
+  calendarProps?: CalendarProps;
+}
+
+function resolvePreset(value: DateRangePreset['value']): DateRangeValue {
+  return typeof value === 'function' ? value() : value;
+}
+
+function DateRangePicker({
+  value,
+  onValueChange,
+  placeholder = 'Pick a date range',
+  clearable = true,
+  disabled,
+  invalid,
+  presets = [],
+  calendarProps,
+  className,
+  ...props
+}: DateRangePickerProps) {
+  const [open, setOpen] = React.useState(false);
+  const { locale } = useFormatSettings();
+  const selected: DateRange = {
+    from: parseCalendarDate(value?.from),
+    to: parseCalendarDate(value?.to),
+  };
+  const hasValue = Boolean(selected.from);
+
+  function commitRange(range: DateRange | undefined) {
+    if (!range?.from) {
+      onValueChange?.(undefined);
+      return;
+    }
+    onValueChange?.({
+      from: formatCalendarDate(range.from),
+      to: range.to ? formatCalendarDate(range.to) : undefined,
+    });
+  }
+
+  return (
+    <div
+      data-slot="date-range-picker"
+      className={cn('flex min-w-0 items-center gap-1', className)}
+      {...props}
+    >
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger
+          render={
+            <Button
+              type="button"
+              variant="outline"
+              disabled={disabled}
+              aria-invalid={invalid || undefined}
+              className="min-w-0 flex-1 justify-start font-normal"
+            />
+          }
+        >
+          <CalendarRangeIcon />
+          <span className={cn('truncate', !hasValue && 'text-muted-foreground')}>
+            {selected.from ? formatDateRangeLabel(selected.from, selected.to, locale) : placeholder}
+          </span>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto p-0" align="start">
+          <div className={cn('flex', presets.length > 0 && 'divide-x')}>
+            {presets.length > 0 ? (
+              <div className="flex w-40 flex-col gap-1 p-2">
+                {presets.map((preset) => (
+                  <Button
+                    key={preset.id}
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    className="justify-start font-normal"
+                    onClick={() => {
+                      onValueChange?.(resolvePreset(preset.value));
+                      setOpen(false);
+                    }}
+                  >
+                    {preset.label}
+                  </Button>
+                ))}
+              </div>
+            ) : null}
+            <Calendar
+              {...calendarProps}
+              mode="range"
+              selected={selected}
+              defaultMonth={selected.from}
+              onSelect={commitRange}
+            />
+          </div>
+        </PopoverContent>
+      </Popover>
+      {clearable && hasValue ? (
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon-sm"
+          disabled={disabled}
+          aria-label="Clear date range"
+          onClick={() => onValueChange?.(undefined)}
+        >
+          <XIcon />
+        </Button>
+      ) : null}
+    </div>
+  );
+}
+
+export { DateRangePicker, type DateRangePickerProps, type DateRangePreset, type DateRangeValue };