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

package/src/components/molecules/illustrations/no-notifications.tsx

@@ -0,0 +1,52 @@
+import type { IllustrationProps } from '@vendure-io/ui/components/molecules/illustrations/illustration-types';
+import { cn } from '@vendure-io/ui/lib/utils';
+
+/**
+ * A bell at rest, its clapper still, with faint dashed arcs trailing off
+ * where a ring would sound — nothing new has come in. For an empty
+ * notifications/alerts panel where the user is caught up — pass as
+ * `illustration` to `EmptyState`. Not for a generic empty list with no bell
+ * shape (use `EmptyCollectionIllustration` instead).
+ */
+function NoNotificationsIllustration({ className, size = 160 }: IllustrationProps) {
+  return (
+    <svg
+      viewBox="0 0 160 120"
+      width={size}
+      height={(size * 120) / 160}
+      fill="none"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      focusable="false"
+      className={cn('shrink-0', className)}
+    >
+      <ellipse cx="80" cy="104" rx="28" ry="5" className="fill-muted" />
+
+      {/* faint arcs where a ring would sound — dashed, trailing off */}
+      <path d="M48,44 Q40,52 48,60" className="stroke-border" strokeDasharray="2 5" />
+      <path d="M112,44 Q120,52 112,60" className="stroke-border" strokeDasharray="2 5" />
+
+      {/* hanging loop */}
+      <circle cx="80" cy="29" r="3" className="fill-surface stroke-muted-foreground" />
+
+      {/* bell body, dome flaring to a flat skirt */}
+      <path
+        d="M62,68 C62,48 70,34 80,34 C90,34 98,48 98,68 C101,68 103,70 103,71 L57,71 C57,70 59,68 62,68 Z"
+        className="fill-surface stroke-muted-foreground"
+      />
+
+      {/* clapper, still and centered — nothing ringing it */}
+      <circle cx="80" cy="72" r="2.5" className="fill-muted-foreground" />
+
+      {/* check mark — the one brand accent, caught up */}
+      <path
+        d="M95,78 L92.6,75.6 L91.9,76.4 L95,79.5 L101.6,72.9 L100.8,72.1 Z"
+        className="fill-brand"
+      />
+    </svg>
+  );
+}
+
+export { NoNotificationsIllustration };

package/src/components/molecules/illustrations/no-orders.tsx

@@ -0,0 +1,48 @@
+import type { IllustrationProps } from '@vendure-io/ui/components/molecules/illustrations/illustration-types';
+import { cn } from '@vendure-io/ui/lib/utils';
+
+/**
+ * An empty cart standing still, with faded motion dashes behind it where
+ * incoming orders would trail in. For order/checkout lists with nothing in
+ * them yet.
+ */
+function NoOrdersIllustration({ className, size = 160 }: IllustrationProps) {
+  return (
+    <svg
+      viewBox="0 0 160 120"
+      width={size}
+      height={(size * 120) / 160}
+      fill="none"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      focusable="false"
+      className={cn('shrink-0', className)}
+    >
+      <ellipse cx="78" cy="104" rx="30" ry="5" className="fill-muted" />
+
+      {/* stillness dashes, nothing rolling in */}
+      <line x1="10" y1="56" x2="22" y2="56" className="stroke-border" strokeDasharray="2 4" />
+      <line x1="6" y1="66" x2="20" y2="66" className="stroke-border" strokeDasharray="2 4" />
+      <line x1="10" y1="76" x2="22" y2="76" className="stroke-border" strokeDasharray="2 4" />
+
+      {/* handle */}
+      <path d="M42,50 L32,26 L44,26" className="stroke-muted-foreground" />
+
+      {/* basket */}
+      <path d="M40,50 L120,50 L108,86 L54,86 Z" className="fill-surface stroke-muted-foreground" />
+      <line x1="52" y1="62" x2="106" y2="62" className="stroke-border" strokeDasharray="3 3" />
+      <line x1="55" y1="74" x2="103" y2="74" className="stroke-border" strokeDasharray="3 3" />
+
+      {/* wheels */}
+      <circle cx="60" cy="94" r="6" className="fill-surface stroke-muted-foreground" />
+      <circle cx="100" cy="94" r="6" className="fill-surface stroke-muted-foreground" />
+
+      {/* waiting indicator — the one brand accent */}
+      <circle cx="112" cy="42" r="5" className="fill-brand" />
+    </svg>
+  );
+}
+
+export { NoOrdersIllustration };

package/src/components/molecules/illustrations/no-plugins.tsx

@@ -0,0 +1,72 @@
+import type { IllustrationProps } from '@vendure-io/ui/components/molecules/illustrations/illustration-types';
+import { cn } from '@vendure-io/ui/lib/utils';
+
+/**
+ * A module block hovering above a dashed socket outline shaped just like it —
+ * an extension point with nothing plugged in. For an empty plugin list, or a
+ * plugin catalog with nothing installed — pass as `illustration` to
+ * `EmptyState`.
+ *
+ * Not for a search/filter miss in a populated catalog — pair that with
+ * `NoResultsIllustration` instead.
+ */
+function NoPluginsIllustration({ className, size = 160 }: IllustrationProps) {
+  return (
+    <svg
+      viewBox="0 0 160 120"
+      width={size}
+      height={(size * 120) / 160}
+      fill="none"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      focusable="false"
+      className={cn('shrink-0', className)}
+    >
+      <ellipse cx="80" cy="104" rx="28" ry="5" className="fill-muted" />
+
+      {/* module block, hovering */}
+      <rect
+        x="62"
+        y="20"
+        width="36"
+        height="28"
+        rx="4"
+        className="fill-surface stroke-muted-foreground"
+      />
+      <rect
+        x="74"
+        y="46"
+        width="12"
+        height="12"
+        rx="2"
+        className="fill-surface stroke-muted-foreground"
+      />
+      {/* connector pin — the one brand accent */}
+      <circle cx="80" cy="52" r="2.5" className="fill-brand" />
+
+      {/* empty socket, same shape, waiting below */}
+      <rect
+        x="74"
+        y="70"
+        width="12"
+        height="12"
+        rx="2"
+        className="stroke-border"
+        strokeDasharray="2 4"
+      />
+      <rect
+        x="62"
+        y="80"
+        width="36"
+        height="16"
+        rx="4"
+        className="stroke-border"
+        strokeDasharray="3 4"
+      />
+    </svg>
+  );
+}
+
+export { NoPluginsIllustration };

package/src/components/molecules/illustrations/no-results.tsx

@@ -0,0 +1,69 @@
+import type { IllustrationProps } from '@vendure-io/ui/components/molecules/illustrations/illustration-types';
+import { cn } from '@vendure-io/ui/lib/utils';
+
+/**
+ * A magnifying glass turning up nothing: dashed ghost rows behind the lens
+ * instead of results. For a search/filter that matched zero rows — pair with
+ * `EmptyState`. Not for "nothing exists yet" (use `EmptyCollectionIllustration`).
+ */
+function NoResultsIllustration({ className, size = 160 }: IllustrationProps) {
+  return (
+    <svg
+      viewBox="0 0 160 120"
+      width={size}
+      height={(size * 120) / 160}
+      fill="none"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      focusable="false"
+      className={cn('shrink-0', className)}
+    >
+      <ellipse cx="80" cy="104" rx="32" ry="5" className="fill-muted" />
+
+      {/* ghost result rows, unmatched */}
+      <rect
+        x="30"
+        y="40"
+        width="56"
+        height="10"
+        rx="5"
+        className="stroke-border"
+        strokeDasharray="3 4"
+      />
+      <rect
+        x="30"
+        y="56"
+        width="44"
+        height="10"
+        rx="5"
+        className="stroke-border"
+        strokeDasharray="3 4"
+      />
+      <rect
+        x="30"
+        y="72"
+        width="50"
+        height="10"
+        rx="5"
+        className="stroke-border"
+        strokeDasharray="3 4"
+      />
+
+      {/* lens */}
+      <circle cx="100" cy="48" r="22" className="fill-surface stroke-muted-foreground" />
+      <line x1="116" y1="64" x2="134" y2="82" className="stroke-muted-foreground" />
+      <line x1="93" y1="41" x2="107" y2="55" className="stroke-border" />
+      <line x1="107" y1="41" x2="93" y2="55" className="stroke-border" />
+
+      {/* sparkle — the one brand accent */}
+      <polygon
+        points="128,20 129.5,24.5 134,26 129.5,27.5 128,32 126.5,27.5 122,26 126.5,24.5"
+        className="fill-brand"
+      />
+    </svg>
+  );
+}
+
+export { NoResultsIllustration };

package/src/components/molecules/illustrations/not-found.tsx

@@ -0,0 +1,48 @@
+import type { IllustrationProps } from '@vendure-io/ui/components/molecules/illustrations/illustration-types';
+import { cn } from '@vendure-io/ui/lib/utils';
+
+/**
+ * A compass whose needle points off a dashed trail that dead-ends in an "x".
+ * For 404s and missing-resource errors — pass as `illustration` to
+ * `ErrorState` alongside a "Go back" action.
+ */
+function NotFoundIllustration({ className, size = 160 }: IllustrationProps) {
+  return (
+    <svg
+      viewBox="0 0 160 120"
+      width={size}
+      height={(size * 120) / 160}
+      fill="none"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      focusable="false"
+      className={cn('shrink-0', className)}
+    >
+      <ellipse cx="80" cy="104" rx="30" ry="5" className="fill-muted" />
+
+      {/* map, folded corner */}
+      <rect x="30" y="30" width="60" height="44" rx="2" className="fill-surface stroke-border" />
+      <polygon points="90,30 90,42 78,30" className="fill-muted stroke-border" />
+
+      {/* trail off the edge, lost */}
+      <path d="M96,70 Q120,80 148,64" className="stroke-border" strokeDasharray="3 4" />
+      <line x1="144" y1="60" x2="152" y2="68" className="stroke-muted-foreground" />
+      <line x1="152" y1="60" x2="144" y2="68" className="stroke-muted-foreground" />
+
+      {/* compass */}
+      <circle cx="76" cy="58" r="20" className="fill-surface stroke-muted-foreground" />
+      <line x1="76" y1="40" x2="76" y2="44" className="stroke-border" />
+      <line x1="76" y1="72" x2="76" y2="76" className="stroke-border" />
+      <line x1="58" y1="58" x2="62" y2="58" className="stroke-border" />
+      <line x1="90" y1="58" x2="94" y2="58" className="stroke-border" />
+      <polygon points="76,58 82,44 76,50" className="fill-muted-foreground" />
+      {/* needle tip — the one brand accent */}
+      <polygon points="76,58 70,72 76,66" className="fill-brand" />
+      <circle cx="76" cy="58" r="2" className="fill-surface stroke-muted-foreground" />
+    </svg>
+  );
+}
+
+export { NotFoundIllustration };

package/src/components/molecules/illustrations/offline.tsx

@@ -0,0 +1,43 @@
+import type { IllustrationProps } from '@vendure-io/ui/components/molecules/illustrations/illustration-types';
+import { cn } from '@vendure-io/ui/lib/utils';
+
+/**
+ * A cloud cut by a diagonal slash, with fading signal arcs above it. For
+ * network/connectivity failures — pass as `illustration` to `ErrorState`.
+ */
+function OfflineIllustration({ className, size = 160 }: IllustrationProps) {
+  return (
+    <svg
+      viewBox="0 0 160 120"
+      width={size}
+      height={(size * 120) / 160}
+      fill="none"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      focusable="false"
+      className={cn('shrink-0', className)}
+    >
+      <ellipse cx="80" cy="104" rx="28" ry="5" className="fill-muted" />
+
+      {/* fading signal, cut off */}
+      <path d="M70,20 a14,14 0 0,1 20,0" className="stroke-border" strokeDasharray="2 4" />
+      <path d="M65,12 a24,24 0 0,1 30,0" className="stroke-border" strokeDasharray="2 5" />
+
+      {/* cloud */}
+      <path
+        d="M46,66 C40,66 36,61 36,55 C36,49 41,44 47,44 C48,36 55,30 64,30 C72,30 79,35 81,42 C82,42 83,41 85,41 C93,41 100,48 100,56 C100,64 93,71 85,71 L52,71 C48,71 46,69 46,66 Z"
+        className="fill-surface stroke-muted-foreground"
+      />
+
+      {/* slash */}
+      <line x1="32" y1="32" x2="104" y2="74" className="stroke-muted-foreground" />
+
+      {/* reconnect dot — the one brand accent */}
+      <circle cx="104" cy="74" r="4" className="fill-brand" />
+    </svg>
+  );
+}
+
+export { OfflineIllustration };

package/src/components/molecules/illustrations/pending-approval.tsx

@@ -0,0 +1,56 @@
+import type { IllustrationProps } from '@vendure-io/ui/components/molecules/illustrations/illustration-types';
+import { cn } from '@vendure-io/ui/lib/utils';
+
+/**
+ * An hourglass mid-turn, sand piled solid at top and settling as a dashed
+ * pile below. For an invitation pending, an account awaiting setup or
+ * provisioning, or access awaiting approval. Not for a hard permission
+ * denial (use `AccessDeniedIllustration`) or a loading spinner state.
+ */
+function PendingApprovalIllustration({ className, size = 160 }: IllustrationProps) {
+  return (
+    <svg
+      viewBox="0 0 160 120"
+      width={size}
+      height={(size * 120) / 160}
+      fill="none"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      focusable="false"
+      className={cn('shrink-0', className)}
+    >
+      <ellipse cx="80" cy="104" rx="28" ry="5" className="fill-muted" />
+
+      {/* frame */}
+      <line x1="62" y1="26" x2="98" y2="26" className="stroke-muted-foreground" />
+      <line x1="62" y1="90" x2="98" y2="90" className="stroke-muted-foreground" />
+
+      {/* glass body, pinched at the waist */}
+      <path
+        d="M66,26 L66,42 Q66,58 80,58 Q94,58 94,42 L94,26 Z"
+        className="fill-surface stroke-muted-foreground"
+      />
+      <path
+        d="M66,90 L66,74 Q66,58 80,58 Q94,58 94,74 L94,90 Z"
+        className="fill-surface stroke-muted-foreground"
+      />
+
+      {/* settled sand, still piling — awaiting completion */}
+      <path
+        d="M71,84 Q80,72 89,84 Q80,88 71,84 Z"
+        className="fill-muted stroke-muted-foreground"
+        strokeDasharray="2 5"
+      />
+
+      {/* remaining sand up top, already solid */}
+      <path d="M70,30 L90,30 L82,44 L78,44 Z" className="fill-muted" />
+
+      {/* falling stream, the one brand accent */}
+      <circle cx="80" cy="61" r="2" className="fill-brand" />
+    </svg>
+  );
+}
+
+export { PendingApprovalIllustration };

package/src/components/molecules/illustrations/upload-dropzone.tsx

@@ -0,0 +1,59 @@
+import type { IllustrationProps } from '@vendure-io/ui/components/molecules/illustrations/illustration-types';
+import { cn } from '@vendure-io/ui/lib/utils';
+
+/**
+ * A dashed-outline tray with a file card rising into it on an upward arrow.
+ * For a drag-and-drop upload target with nothing dropped yet ("drop files
+ * here to upload") — pass as `illustration` to `EmptyState`. Not for an
+ * already-existing media library that just happens to be empty (use
+ * `EmptyMediaIllustration`).
+ */
+function UploadDropzoneIllustration({ className, size = 160 }: IllustrationProps) {
+  return (
+    <svg
+      viewBox="0 0 160 120"
+      width={size}
+      height={(size * 120) / 160}
+      fill="none"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      focusable="false"
+      className={cn('shrink-0', className)}
+    >
+      <ellipse cx="80" cy="104" rx="28" ry="5" className="fill-muted" />
+
+      {/* tray — the drop target, empty */}
+      <rect
+        x="32"
+        y="14"
+        width="96"
+        height="46"
+        rx="10"
+        className="stroke-border"
+        strokeDasharray="3 4"
+      />
+
+      {/* file card, folded corner, about to be dropped */}
+      <rect
+        x="66"
+        y="72"
+        width="28"
+        height="20"
+        rx="2"
+        className="fill-surface stroke-muted-foreground"
+      />
+      <polygon points="94,72 94,78 88,72" className="fill-muted stroke-border" />
+      <line x1="71" y1="83" x2="85" y2="83" className="stroke-border" />
+      <line x1="71" y1="88" x2="79" y2="88" className="stroke-border" />
+
+      {/* rising into the tray */}
+      <line x1="80" y1="70" x2="80" y2="40" className="stroke-muted-foreground" />
+      {/* arrowhead — the one brand accent */}
+      <polygon points="80,28 70,44 90,44" className="fill-brand" />
+    </svg>
+  );
+}
+
+export { UploadDropzoneIllustration };

package/src/components/molecules/money.tsx

@@ -0,0 +1,91 @@
+'use client';
+
+import { useFormatSettings } from '@vendure-io/ui/components/molecules/format-provider';
+import { cn } from '@vendure-io/ui/lib/utils';
+import type { ComponentProps } from 'react';
+
+// How many minor-unit digits a currency uses — 2 for USD (cents), 0 for JPY, 3
+// for BHD. Derived from Intl rather than a hardcoded `/100`, which is wrong for
+// zero- and three-decimal currencies (the enterprise-portal `Price` bug this
+// fixes). Falls back to 2 for an unrecognised code so a typo can't throw.
+function currencyFractionDigits(currency?: string): number {
+  if (!currency) return 2;
+  try {
+    return (
+      new Intl.NumberFormat(undefined, { style: 'currency', currency }).resolvedOptions()
+        .maximumFractionDigits ?? 2
+    );
+  } catch {
+    return 2;
+  }
+}
+
+// Dev-warn once per session, not once per render — a table of currency-less
+// cells would otherwise flood the console.
+let warnedMissingCurrency = false;
+
+interface MoneyProps extends ComponentProps<'span'> {
+  /** Amount in integer minor units (Vendure convention), e.g. `2500` = $25.00. */
+  value: number;
+  /** ISO 4217 code. Falls back to `FormatProvider`'s `currency`. */
+  currency?: string;
+  /** BCP 47 locale. Falls back to `FormatProvider`, then the runtime default. */
+  locale?: string;
+  /**
+   * Minor-unit digits, used to scale minor→major and to set the displayed
+   * fraction digits. Resolution: prop → context `currencyPrecision` → the
+   * currency's own Intl fraction digits.
+   */
+  precision?: number;
+  currencyDisplay?: Intl.NumberFormatOptions['currencyDisplay'];
+}
+
+/**
+ * SSR note: output depends on locale, so server and client renders can disagree
+ * when it falls back to the runtime default. SSR consumers should pin `locale`
+ * via `FormatProvider` (or the prop) to avoid hydration mismatches.
+ */
+function Money({
+  value,
+  currency,
+  locale,
+  precision,
+  currencyDisplay,
+  className,
+  ...props
+}: MoneyProps) {
+  const settings = useFormatSettings();
+  const resolvedCurrency = currency ?? settings.currency;
+  const resolvedLocale = locale ?? settings.locale;
+  const resolvedPrecision =
+    precision ?? settings.currencyPrecision ?? currencyFractionDigits(resolvedCurrency);
+
+  if (!resolvedCurrency && !warnedMissingCurrency && process.env.NODE_ENV !== 'production') {
+    warnedMissingCurrency = true;
+    console.warn(
+      '<Money> was rendered without a `currency` prop or a `FormatProvider` currency; ' +
+        'the amount is shown as a plain number.',
+    );
+  }
+
+  const major = value / 10 ** resolvedPrecision;
+  const options: Intl.NumberFormatOptions = {
+    minimumFractionDigits: resolvedPrecision,
+    maximumFractionDigits: resolvedPrecision,
+  };
+  if (resolvedCurrency) {
+    options.style = 'currency';
+    options.currency = resolvedCurrency;
+    if (currencyDisplay) options.currencyDisplay = currencyDisplay;
+  }
+
+  const formatted = new Intl.NumberFormat(resolvedLocale, options).format(major);
+
+  return (
+    <span data-slot="money" className={cn('tabular-nums', className)} {...props}>
+      {formatted}
+    </span>
+  );
+}
+
+export { Money, type MoneyProps };

package/src/components/{custom → molecules}/multi-select.tsx

@@ -7,7 +7,7 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '@vendure-io/ui/components/ui/select';
+} from '@vendure-io/ui/components/atoms/select';
 import { cn } from '@vendure-io/ui/lib/utils';
 import * as React from 'react';
 
@@ -133,7 +133,7 @@ function MultiSelect<T>({
       name={name}
       required={required}
     >
-      {/* [vendure] default to a stable, container-width trigger so it doesn't grow with the
+      {/* Default to a stable, container-width trigger so it doesn't grow with the
           selection — the underlying SelectTrigger is `w-fit`, which we override here. */}
       <SelectTrigger
         id={id}

package/src/components/molecules/page-header.tsx

@@ -0,0 +1,80 @@
+import { cn } from '@vendure-io/ui/lib/utils';
+import type * as React from 'react';
+
+// Compound-only, by decision: there is no simple-props sugar and
+// no dual-mode root. Callers assemble the parts, which keeps one way to build a
+// header and lets variance in the wild (back links, badge rows beside the title,
+// mono subtitles) live as free children rather than as an ever-growing prop set.
+
+/** The header row: title/description on the left, actions on the right. */
+function PageHeader({ className, ...props }: React.ComponentProps<'header'>) {
+  return (
+    <header
+      data-slot="page-header"
+      className={cn('flex items-start justify-between gap-4', className)}
+      {...props}
+    />
+  );
+}
+
+/** Left column holding the title, description, and any inline badges. */
+function PageHeaderContent({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="page-header-content"
+      className={cn('flex min-w-0 flex-col gap-1', className)}
+      {...props}
+    />
+  );
+}
+
+function PageHeaderTitle({ className, ...props }: React.ComponentProps<'h1'>) {
+  return (
+    <h1
+      data-slot="page-header-title"
+      className={cn('text-style-page-title break-words', className)}
+      {...props}
+    />
+  );
+}
+
+function PageHeaderDescription({ className, ...props }: React.ComponentProps<'p'>) {
+  return (
+    <p
+      data-slot="page-header-description"
+      className={cn('text-sm text-muted-foreground', className)}
+      {...props}
+    />
+  );
+}
+
+/** Right-hand action slot (buttons, menus). Stays put as the title wraps. */
+function PageHeaderActions({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="page-header-actions"
+      className={cn('flex shrink-0 items-center gap-2', className)}
+      {...props}
+    />
+  );
+}
+
+/** Optional row rendered above the header — typically a back link. */
+function PageHeaderBackLink({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="page-header-back-link"
+      className={cn('flex items-center gap-1 text-sm text-muted-foreground', className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  PageHeader,
+  PageHeaderContent,
+  PageHeaderTitle,
+  PageHeaderDescription,
+  PageHeaderActions,
+  PageHeaderBackLink,
+};