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

package/src/schemas/stock-location.ts

@@ -0,0 +1,126 @@
+import { requiredMessage } from '@spree/dashboard-ui'
+import { z } from 'zod/v4'
+import type { PanelStockLocation, PanelStockLocationCreateParams } from '../api-client'
+import { blankToUndefined, emptyToUndefined } from '../lib/form-mappers'
+
+// Labels live in `en.json` under `admin.stock_locations.kinds.*` and
+// `admin.stock_locations.pickup_stock_policies.*`. Consumers map these
+// values to translated labels at render time.
+export const STOCK_LOCATION_KINDS = ['warehouse', 'store', 'fulfillment_center'] as const
+export const PICKUP_STOCK_POLICIES = ['local', 'any'] as const
+export type PickupStockPolicy = (typeof PICKUP_STOCK_POLICIES)[number]
+
+export const stockLocationFormSchema = z.object({
+  name: z
+    .string()
+    .trim()
+    .min(1, { error: requiredMessage('name') }),
+  admin_name: z.string().optional(),
+  kind: z.enum(STOCK_LOCATION_KINDS),
+  active: z.boolean(),
+  default: z.boolean(),
+  propagate_all_variants: z.boolean(),
+  backorderable_default: z.boolean(),
+  address1: z.string().optional(),
+  address2: z.string().optional(),
+  city: z.string().optional(),
+  zipcode: z.string().optional(),
+  phone: z.string().optional(),
+  company: z.string().optional(),
+  country_code: z.string().optional(),
+  state_code: z.string().optional(),
+  state_name: z.string().optional(),
+  pickup_enabled: z.boolean(),
+  returns_enabled: z.boolean(),
+  pickup_stock_policy: z.enum(PICKUP_STOCK_POLICIES),
+  pickup_ready_in_minutes: z.preprocess(
+    emptyToUndefined,
+    z.coerce.number().int().min(0).optional().nullable(),
+  ),
+  pickup_instructions: z.string().optional(),
+})
+
+export type StockLocationFormValues = z.infer<typeof stockLocationFormSchema>
+
+export const STOCK_LOCATION_DEFAULTS: StockLocationFormValues = {
+  name: '',
+  admin_name: '',
+  kind: 'warehouse',
+  active: true,
+  default: false,
+  propagate_all_variants: false,
+  backorderable_default: false,
+  address1: '',
+  address2: '',
+  city: '',
+  zipcode: '',
+  phone: '',
+  company: '',
+  country_code: '',
+  state_code: '',
+  state_name: '',
+  pickup_enabled: false,
+  // Locations accept returns unless a merchant narrows it, which is how
+  // goods behaved before the flag existed.
+  returns_enabled: true,
+  pickup_stock_policy: 'local',
+  pickup_ready_in_minutes: null,
+  pickup_instructions: '',
+}
+
+export function stockLocationToFormValues(sl: PanelStockLocation): StockLocationFormValues {
+  return {
+    name: sl.name,
+    admin_name: sl.admin_name ?? '',
+    kind: STOCK_LOCATION_KINDS.includes(sl.kind as (typeof STOCK_LOCATION_KINDS)[number])
+      ? (sl.kind as (typeof STOCK_LOCATION_KINDS)[number])
+      : 'warehouse',
+    active: sl.active,
+    default: sl.default,
+    propagate_all_variants: sl.propagate_all_variants ?? false,
+    backorderable_default: sl.backorderable_default ?? false,
+    address1: sl.address1 ?? '',
+    address2: sl.address2 ?? '',
+    city: sl.city ?? '',
+    zipcode: sl.zipcode ?? '',
+    phone: sl.phone ?? '',
+    company: sl.company ?? '',
+    country_code: sl.country_code ?? '',
+    state_code: sl.state_code ?? '',
+    state_name: sl.state_name ?? '',
+    pickup_enabled: sl.pickup_enabled ?? false,
+    returns_enabled: sl.returns_enabled ?? true,
+    pickup_stock_policy: PICKUP_STOCK_POLICIES.includes(sl.pickup_stock_policy as PickupStockPolicy)
+      ? (sl.pickup_stock_policy as PickupStockPolicy)
+      : 'local',
+    pickup_ready_in_minutes: sl.pickup_ready_in_minutes ?? null,
+    pickup_instructions: sl.pickup_instructions ?? '',
+  }
+}
+
+// Drops blank strings → undefined so we don't overwrite null fields with "".
+export function formValuesToParams(v: StockLocationFormValues): PanelStockLocationCreateParams {
+  return {
+    name: v.name,
+    admin_name: blankToUndefined(v.admin_name),
+    kind: v.kind,
+    active: v.active,
+    default: v.default,
+    propagate_all_variants: v.propagate_all_variants,
+    backorderable_default: v.backorderable_default,
+    address1: blankToUndefined(v.address1),
+    address2: blankToUndefined(v.address2),
+    city: blankToUndefined(v.city),
+    zipcode: blankToUndefined(v.zipcode),
+    phone: blankToUndefined(v.phone),
+    company: blankToUndefined(v.company),
+    country_code: blankToUndefined(v.country_code),
+    state_code: blankToUndefined(v.state_code),
+    state_name: blankToUndefined(v.state_name),
+    pickup_enabled: v.pickup_enabled,
+    returns_enabled: v.returns_enabled,
+    pickup_stock_policy: v.pickup_stock_policy,
+    pickup_ready_in_minutes: v.pickup_ready_in_minutes ?? null,
+    pickup_instructions: blankToUndefined(v.pickup_instructions),
+  }
+}

package/src/tables/package-types.tsx

@@ -0,0 +1,74 @@
+import { RelativeTime, ResourceNameCell } from '@spree/dashboard-ui'
+import { PackageIcon } from '@spree/dashboard-ui/icons'
+import i18n from 'i18next'
+import type { PanelPackageType } from '../api-client'
+import { defineTable } from '../lib/table-registry'
+
+defineTable<PanelPackageType>('package-types', {
+  docsPath: 'settings/package-types',
+  description: i18n.t('admin.package_types.description'),
+  title: i18n.t('admin.package_types.table_title'),
+  searchParam: 'name_cont',
+  searchPlaceholder: i18n.t('admin.package_types.search_placeholder'),
+  defaultSort: { field: 'name', direction: 'asc' },
+  emptyIcon: <PackageIcon className="size-8 text-muted-foreground" />,
+  emptyMessage: i18n.t('admin.package_types.empty'),
+  columns: [
+    {
+      key: 'name',
+      label: i18n.t('admin.fields.package_type.name.label'),
+      sortable: true,
+      default: true,
+      render: (packageType) => (
+        <ResourceNameCell
+          id={packageType.id}
+          // Omitted on a row this panel may read but not write, so the row
+          // click bridge never opens an edit sheet whose save could only
+          // 404. A seller sees the marketplace's packaging to know what they
+          // may pack into; it is not theirs to change.
+          dataAttr={packageType.editable === false ? undefined : 'data-package-type-id'}
+          name={packageType.name}
+          // This owner's own box, called out because every parcel quote from
+          // their warehouse is built on it.
+          secondary={packageType.default ? i18n.t('admin.package_types.default_badge') : undefined}
+        />
+      ),
+    },
+    {
+      key: 'kind',
+      label: i18n.t('admin.fields.package_type.kind.label'),
+      sortable: true,
+      default: true,
+      render: (packageType) => i18n.t(`admin.package_types.kinds.${packageType.kind}`),
+    },
+    {
+      key: 'dimensions',
+      label: i18n.t('admin.package_types.dimensions_column'),
+      default: true,
+      className: 'text-sm text-muted-foreground whitespace-nowrap',
+      // Three numbers mean nothing without the unit they were measured in —
+      // the same figures read as inches or centimetres differ sixteenfold by
+      // volume, which is what the freight tiers compare.
+      render: (packageType) =>
+        packageType.length && packageType.width && packageType.height
+          ? `${packageType.length} × ${packageType.width} × ${packageType.height} ${packageType.dimensions_unit}`
+          : '—',
+    },
+    {
+      key: 'volume',
+      label: i18n.t('admin.package_types.volume_column'),
+      className: 'text-sm text-muted-foreground whitespace-nowrap',
+      render: (packageType) =>
+        packageType.volume ? `${Number(packageType.volume).toFixed(3)} m³` : '—',
+    },
+    {
+      key: 'created_at',
+      label: i18n.t('admin.fields.created_at.label'),
+      sortable: true,
+      filterable: true,
+      filterType: 'date',
+      className: 'text-sm text-muted-foreground whitespace-nowrap',
+      render: (packageType) => <RelativeTime iso={packageType.created_at} />,
+    },
+  ],
+})

package/src/tables/stock-locations.tsx

@@ -0,0 +1,124 @@
+import { ActiveBadge, ResourceNameCell } from '@spree/dashboard-ui'
+import { WarehouseIcon } from '@spree/dashboard-ui/icons'
+import i18n from 'i18next'
+import type { PanelStockLocation } from '../api-client'
+import { defineTable } from '../lib/table-registry'
+
+defineTable<PanelStockLocation>('stock-locations', {
+  docsPath: 'settings/locations',
+  description: i18n.t('admin.stock_locations.description'),
+  title: i18n.t('admin.settings_nav.items.stock_locations'),
+  searchParam: 'name_cont',
+  searchPlaceholder: i18n.t('admin.stock_locations.search_placeholder'),
+  defaultSort: { field: 'name', direction: 'asc' },
+  emptyIcon: <WarehouseIcon className="size-8 text-muted-foreground" />,
+  emptyMessage: i18n.t('admin.stock_locations.empty'),
+  columns: [
+    {
+      key: 'name',
+      label: i18n.t('admin.fields.name.label'),
+      sortable: true,
+      default: true,
+      render: (sl) => (
+        <ResourceNameCell
+          id={sl.id}
+          dataAttr="data-stock-location-id"
+          name={sl.name}
+          secondary={sl.admin_name}
+        />
+      ),
+    },
+    {
+      key: 'kind',
+      label: i18n.t('admin.stock_locations.columns.type'),
+      sortable: true,
+      filterable: true,
+      default: true,
+      filterType: 'enum',
+      filterOptions: [
+        { value: 'warehouse', label: i18n.t('admin.stock_locations.kinds.warehouse') },
+        { value: 'store', label: i18n.t('admin.stock_locations.kinds.store') },
+        {
+          value: 'fulfillment_center',
+          label: i18n.t('admin.stock_locations.kinds.fulfillment_center'),
+        },
+      ],
+      quickFilter: true,
+      render: (sl) => {
+        const key = `admin.stock_locations.kinds.${sl.kind}`
+        const label = i18n.exists(key) ? i18n.t(key) : sl.kind.replace('_', ' ')
+        return <span className="capitalize">{label}</span>
+      },
+    },
+    {
+      key: 'city',
+      label: i18n.t('admin.stock_locations.columns.location'),
+      default: true,
+      render: (sl) => {
+        const parts = [sl.city, sl.state_text || sl.state_code, sl.country_code]
+          .filter(Boolean)
+          .join(', ')
+        return parts || '—'
+      },
+    },
+    {
+      key: 'pickup_enabled',
+      label: i18n.t('admin.stock_locations.columns.pickup'),
+      sortable: true,
+      filterable: true,
+      default: true,
+      filterType: 'boolean',
+      render: (sl) => (
+        <ActiveBadge
+          active={sl.pickup_enabled}
+          activeLabel={i18n.t('admin.stock_locations.badges.enabled')}
+          dashWhenInactive
+        />
+      ),
+    },
+    {
+      key: 'returns_enabled',
+      label: i18n.t('admin.stock_locations.columns.returns'),
+      sortable: true,
+      filterable: true,
+      default: true,
+      filterType: 'boolean',
+      render: (sl) => (
+        <ActiveBadge
+          active={sl.returns_enabled ?? true}
+          activeLabel={i18n.t('admin.stock_locations.badges.enabled')}
+          dashWhenInactive
+        />
+      ),
+    },
+    {
+      key: 'active',
+      label: i18n.t('admin.fields.active.label'),
+      sortable: true,
+      filterable: true,
+      default: true,
+      filterType: 'boolean',
+      render: (sl) => (
+        <ActiveBadge
+          active={sl.active}
+          activeLabel={i18n.t('admin.fields.active.label')}
+          inactiveLabel={i18n.t('admin.stock_locations.badges.inactive')}
+        />
+      ),
+    },
+    {
+      key: 'default',
+      label: i18n.t('admin.stock_locations.columns.default'),
+      default: true,
+      filterable: true,
+      filterType: 'boolean',
+      render: (sl) => (
+        <ActiveBadge
+          active={sl.default}
+          activeLabel={i18n.t('admin.stock_locations.badges.default')}
+          dashWhenInactive
+        />
+      ),
+    },
+  ],
+})

package/src/vite/index.ts

@@ -21,6 +21,17 @@ export interface SpreeDashboardPluginOptions {
    */
   cssEntry?: string
 
+  /**
+   * Shell packages whose source Tailwind should scan, on top of
+   * `@spree/dashboard-core` and `@spree/dashboard-ui`. Defaults to
+   * `['@spree/dashboard']`, the operator's dashboard. A different panel — a
+   * seller's, or a host's own shell — passes its own package name here so its
+   * components' classes survive the build. Unresolvable names are skipped
+   * rather than erroring: a custom dashboard composed straight from core + ui
+   * has no shell at all.
+   */
+  shellPackages?: string[]
+
   /**
    * Names of dashboard plugin packages installed in the host app. Each name
    * must be a resolvable npm package specifier — the same string you'd pass
@@ -83,11 +94,29 @@ export interface SpreeDashboardPluginOptions {
  *
  *     spreeDashboardPlugin({
  *       cssEntry: './src/admin.css',
- *       plugins: ['@my-store/vendor-portal-plugin'],  // explicit whitelist opt-out
+ *       plugins: ['@my-store/seller-portal-plugin'],  // explicit whitelist opt-out
  *     })
  */
 export function spreeDashboardPlugin(options: SpreeDashboardPluginOptions = {}): PluginOption[] {
-  return [dashboardTailwindSourcePlugin(options), tailwindcss()]
+  return [dashboardProseMirrorDedupePlugin(), dashboardTailwindSourcePlugin(options), tailwindcss()]
+}
+
+/**
+ * TipTap 3.31's `@tiptap/pm` asks for `prosemirror-model` ^1.25.11, but
+ * `prosemirror-schema-list` still resolves 1.25.4. Two copies in the
+ * bundle make `wrapInList` throw. Force Vite onto one module.
+ */
+function dashboardProseMirrorDedupePlugin(): Plugin {
+  return {
+    name: 'spree:dashboard-prosemirror-dedupe',
+    config() {
+      return {
+        resolve: {
+          dedupe: ['prosemirror-model', 'prosemirror-view', '@tiptap/pm', '@tiptap/core'],
+        },
+      }
+    },
+  }
 }
 
 /** Module specifier hosts import to activate discovered dashboard plugins. */
@@ -155,11 +184,15 @@ function dashboardTailwindSourcePlugin(options: SpreeDashboardPluginOptions): Pl
           pluginErrors.push({ pkg, kind: 'unresolved' })
         }
       }
-      // The app shell is optional: present when the host builds on the full
-      // `@spree/dashboard` package, absent for custom dashboards composed
-      // directly from core + ui — hence no error when unresolved.
-      const shellDir = resolvePackageSourceDir('@spree/dashboard', fromHost)
-      if (shellDir) resolvedSources.push(shellDir)
+      // The app shell is optional: present when the host builds on a full
+      // shell package, absent for custom dashboards composed directly from
+      // core + ui — hence no error when unresolved. Which shell varies by
+      // panel: `@spree/dashboard` for the operator's, `@spree/seller-dashboard`
+      // for a seller's, or a host's own.
+      for (const shell of options.shellPackages ?? ['@spree/dashboard']) {
+        const shellDir = resolvePackageSourceDir(shell, fromHost)
+        if (shellDir) resolvedSources.push(shellDir)
+      }
       for (const pkg of pluginPackages) {
         const dir = resolvePackageSourceDir(pkg, fromHost)
         if (dir) {

package/src/components/top-bar.tsx

@@ -1,209 +0,0 @@
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-  Button,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-  LanguageMenuItems,
-  SidebarTrigger,
-  ThemeMenuItems,
-} from '@spree/dashboard-ui'
-import { Link } from '@tanstack/react-router'
-import {
-  BookOpenIcon,
-  ExternalLinkIcon,
-  LogOutIcon,
-  MailIcon,
-  MessageCircleIcon,
-  SearchIcon,
-  UserIcon,
-} from 'lucide-react'
-import { useTranslation } from 'react-i18next'
-import { useAuth } from '../hooks/use-auth'
-import { useCommandPalette } from '../hooks/use-command-palette'
-import { useSwitchAdminLocale } from '../hooks/use-switch-admin-locale'
-import { getInitials } from '../lib/formatters'
-import { i18n } from '../lib/i18n'
-import { storefrontHref } from '../lib/storefront'
-import { useStore } from '../providers/store-provider'
-
-const IS_MAC = typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.platform ?? '')
-
-/**
- * Top-bar shell for the admin SPA. Three-slot layout:
- *   [☰ sidebar toggle]   [global search]   [view store · user menu]
- *
- * The search trigger opens the global ⌘K command palette (provider mounted at
- * the layout root). The keyboard shortcut is registered in the provider, not
- * here, so it works regardless of focus location.
- */
-/**
- * @param uiLocales Admin UI languages for the in-menu switcher. The app owns
- *   which locale bundles ship (see the dashboard's `getAvailableUiLocales`) and
- *   injects them here, so this core component stays free of bundle knowledge.
- */
-export function TopBar({
-  uiLocales = [],
-}: {
-  uiLocales?: ReadonlyArray<{ code: string; name: string }>
-}) {
-  return (
-    <header className="sticky top-0 z-40 flex h-header-height shrink-0 items-center gap-3 bg-background/90 px-4 border-b border-border/50 backdrop-blur supports-[backdrop-filter]:bg-background/75">
-      <SidebarTrigger className="-ml-1 h-8 w-8" />
-
-      <div className="flex flex-1 justify-center">
-        <SearchTrigger />
-      </div>
-
-      <div className="flex items-center gap-2">
-        <ViewStoreLink />
-        <TopBarUser uiLocales={uiLocales} />
-      </div>
-    </header>
-  )
-}
-
-// ---------------------------------------------------------------------------
-// Search trigger — opens the global command palette
-// ---------------------------------------------------------------------------
-
-function SearchTrigger() {
-  const { t } = useTranslation()
-  const { setOpen } = useCommandPalette()
-
-  return (
-    <button
-      type="button"
-      onClick={() => setOpen(true)}
-      className="flex w-full max-w-md items-center gap-2 rounded-lg border border-border bg-muted/40 px-2 py-1.5 text-sm text-muted-foreground transition-colors hover:bg-muted"
-    >
-      <SearchIcon className="size-4" />
-      <span className="flex-1 text-left">{t('admin.components.command_palette.placeholder')}</span>
-      <kbd className="hidden rounded border bg-background px-1.5 py-0.5 font-mono text-xs sm:inline-flex">
-        {IS_MAC ? '⌘K' : 'Ctrl+K'}
-      </kbd>
-    </button>
-  )
-}
-
-// ---------------------------------------------------------------------------
-// View Store link
-// ---------------------------------------------------------------------------
-
-function ViewStoreLink() {
-  const { t } = useTranslation()
-  const { store } = useStore()
-  const href = storefrontHref(store)
-  if (!href) return null
-
-  return (
-    <Button asChild variant="ghost" size="sm">
-      <a href={href} target="_blank" rel="noreferrer">
-        <ExternalLinkIcon className="size-4" />
-        <span className="hidden sm:inline">{t('admin.account.view_store')}</span>
-      </a>
-    </Button>
-  )
-}
-
-// ---------------------------------------------------------------------------
-// User menu
-// ---------------------------------------------------------------------------
-
-function TopBarUser({ uiLocales }: { uiLocales: ReadonlyArray<{ code: string; name: string }> }) {
-  const { t } = useTranslation()
-  const { user, logout } = useAuth()
-  const { store } = useStore()
-  const switchAdminLocale = useSwitchAdminLocale()
-  if (!user) return null
-
-  const initials = getInitials(user.full_name, user.email)
-
-  // Switching the admin UI language persists to the account, mirrors it into
-  // the auth context, and reloads — see useSwitchAdminLocale for why all three
-  // steps are required.
-  const handleSelectLocale = (code: string) => {
-    void switchAdminLocale(code)
-  }
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <button
-          type="button"
-          aria-label={t('admin.a11y.user_menu')}
-          className="flex items-center gap-2 rounded-lg p-1 transition-colors hover:bg-accent"
-        >
-          <Avatar className="size-7">
-            {user.avatar_url && <AvatarImage src={user.avatar_url} alt="" />}
-            <AvatarFallback className="bg-primary text-xs text-primary-foreground dark:bg-accent dark:text-foreground">
-              {initials}
-            </AvatarFallback>
-          </Avatar>
-        </button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" className="w-56" sideOffset={8}>
-        <div className="flex items-center gap-2 p-1.5">
-          <Avatar className="size-8">
-            {user.avatar_url && <AvatarImage src={user.avatar_url} alt="" />}
-            <AvatarFallback className="bg-primary text-xs text-primary-foreground dark:bg-accent dark:text-foreground">
-              {initials}
-            </AvatarFallback>
-          </Avatar>
-          <div className="grid min-w-0 flex-1 text-sm leading-tight">
-            <span className="truncate font-medium text-foreground">
-              {user.full_name || user.email}
-            </span>
-            {user.full_name && (
-              <span className="truncate text-xs text-muted-foreground">{user.email}</span>
-            )}
-          </div>
-        </div>
-        <DropdownMenuSeparator />
-        <ThemeMenuItems />
-        {/* Compact nested submenu; self-hides when < 2 languages are installed. */}
-        <LanguageMenuItems
-          label={t('admin.account.language.label')}
-          locales={uiLocales}
-          value={i18n.language}
-          onSelect={handleSelectLocale}
-        />
-        {uiLocales.length >= 2 && <DropdownMenuSeparator />}
-        {store && (
-          <DropdownMenuItem asChild>
-            <Link
-              to="/$storeId/settings/profile"
-              params={{ storeId: store.id }}
-              className="no-underline"
-            >
-              <UserIcon className="size-4" />
-              {t('admin.account.edit_profile')}
-            </Link>
-          </DropdownMenuItem>
-        )}
-        <DropdownMenuSeparator />
-        <DropdownMenuItem>
-          <BookOpenIcon className="size-4" />
-          {t('admin.account.documentation')}
-        </DropdownMenuItem>
-        <DropdownMenuItem>
-          <MessageCircleIcon className="size-4" />
-          {t('admin.account.community')}
-        </DropdownMenuItem>
-        <DropdownMenuItem>
-          <MailIcon className="size-4" />
-          {t('admin.account.contact_support')}
-        </DropdownMenuItem>
-        <DropdownMenuSeparator />
-        <DropdownMenuItem onClick={logout} className="text-destructive focus:text-destructive">
-          <LogOutIcon className="size-4" />
-          {t('admin.account.log_out')}
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}