@spree/dashboard-core 0.1.0

package/src/components/settings-sidebar.tsx

@@ -0,0 +1,139 @@
+import {
+  Badge,
+  cn,
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from '@spree/dashboard-ui'
+import { Link, useParams, useRouterState } from '@tanstack/react-router'
+import { PackageIcon } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+import {
+  type SettingsNavEntry,
+  type SettingsNavSnapshot,
+  useSettingsNav,
+} from '../lib/settings-nav-registry'
+import { type Permissions, usePermissions } from '../providers/permission-provider'
+import { NavIcon } from './nav-main'
+
+/**
+ * Secondary settings sidebar. Always mounted as a sibling to the primary
+ * sidebar so it can extend full-height (top of viewport to bottom, beside
+ * the TopBar rather than below it). Width animates between `0` and
+ * `--spacing-sidebar-width` driven by the `open` prop, so entering and
+ * leaving the settings area gets a slide-in/slide-out transition.
+ *
+ * Entries reuse the same shadcn primitives (`SidebarMenuButton`, `NavIcon`,
+ * `SidebarGroupLabel`) as the primary sidebar so hover/active states and
+ * spacing stay perfectly consistent.
+ *
+ * Hidden below `lg` regardless of `open` — settings on narrow viewports
+ * still need a separate solution.
+ */
+export function SettingsSidebar({ open }: { open: boolean }) {
+  const { t } = useTranslation()
+  const { storeId } = useParams({ strict: false }) as { storeId?: string }
+  const id = storeId ?? 'default'
+  const snapshot = useSettingsNav()
+  const { permissions } = usePermissions()
+  const visible = filterByPermissions(snapshot, permissions)
+
+  // `sticky top-0 h-svh` keeps the nav at full viewport height as the page
+  // scrolls. `overflow-hidden` clips the inner fixed-width content while the
+  // outer `width` animates between 0 and `--spacing-sidebar-width`. `aria-hidden`
+  // while closed prevents screen-reader and keyboard access to hidden links.
+  return (
+    <aside
+      aria-label={t('admin.a11y.settings_navigation')}
+      aria-hidden={!open}
+      data-state={open ? 'open' : 'closed'}
+      className={cn(
+        'sticky top-0 z-30 hidden h-svh shrink-0 self-start overflow-hidden bg-sidebar text-sidebar-foreground transition-[width,border-color] duration-200 ease-out lg:block',
+        open
+          ? 'lg:w-(--spacing-sidebar-width) border-e border-border/50'
+          : 'lg:w-0 border-e-0 border-transparent',
+      )}
+    >
+      <div
+        className={cn(
+          'flex h-full w-(--spacing-sidebar-width) flex-col gap-2 overflow-y-auto py-2 transition-opacity duration-200',
+          open ? 'opacity-100 delay-100' : 'pointer-events-none opacity-0',
+        )}
+      >
+        {visible.groups.map(({ group, entries }) => (
+          <SidebarGroup key={group.key}>
+            <SidebarGroupLabel>
+              {group.labelKey ? t(group.labelKey) : group.label}
+            </SidebarGroupLabel>
+            <SidebarMenu>
+              {entries.map((entry) => (
+                <SettingsItem
+                  key={entry.key}
+                  entry={entry}
+                  storeId={id}
+                  // While closed, keep the items out of the tab order — the
+                  // `aria-hidden` above does not, by itself, prevent focus.
+                  tabIndex={open ? 0 : -1}
+                />
+              ))}
+            </SidebarMenu>
+          </SidebarGroup>
+        ))}
+      </div>
+    </aside>
+  )
+}
+
+function SettingsItem({
+  entry,
+  storeId,
+  tabIndex,
+}: {
+  entry: SettingsNavEntry
+  storeId: string
+  tabIndex: number
+}) {
+  const { t } = useTranslation()
+  const routerState = useRouterState()
+  const currentPath = routerState.location.pathname
+  const url = `/${storeId}/settings${entry.path}`
+  const isActive = currentPath === url || currentPath.startsWith(`${url}/`)
+  const Icon = entry.icon ?? PackageIcon
+  const label = entry.labelKey ? t(entry.labelKey) : entry.label
+
+  return (
+    <SidebarMenuItem>
+      {/* No `tooltip` prop — it keys off the primary sidebar's collapsed state
+          via `useSidebar()`, which would fire spuriously in this secondary nav. */}
+      <SidebarMenuButton asChild isActive={isActive}>
+        <Link to={url} tabIndex={tabIndex}>
+          <NavIcon icon={Icon} isActive={isActive} />
+          <span>{label}</span>
+          {entry.comingSoon && (
+            <Badge className="ms-auto h-5 bg-sidebar-accent px-1.5 py-0 text-[10px] font-normal text-sidebar-foreground/70">
+              Soon
+            </Badge>
+          )}
+        </Link>
+      </SidebarMenuButton>
+    </SidebarMenuItem>
+  )
+}
+
+function filterByPermissions(
+  snapshot: SettingsNavSnapshot,
+  permissions: Permissions,
+): SettingsNavSnapshot {
+  const groups = snapshot.groups
+    .map(({ group, entries }) => ({
+      group,
+      entries: entries.filter((e) => !e.subject || permissions.can('read', e.subject)),
+    }))
+    .filter((g) => g.entries.length > 0)
+  return {
+    groups,
+    all: groups.flatMap((g) => g.entries),
+  }
+}

package/src/components/slot.tsx

@@ -0,0 +1,50 @@
+import { Fragment } from 'react'
+import { type SlotAmbientContext, useSlotEntries } from '../lib/slot-registry'
+
+interface SlotProps<TContext> {
+  /** Slot name, e.g. "product.form_sidebar" or "order.dropdown". */
+  name: string
+  /** Slot-specific context passed to every registered component. */
+  context?: TContext
+  /**
+   * Rendered when no entries are registered or all are gated out by `if`.
+   * Useful when a slot is the only thing in a section (avoid empty headings).
+   */
+  fallback?: React.ReactNode
+}
+
+/**
+ * Renders all components registered to a slot, sorted by `position`,
+ * filtered by each entry's `if` predicate. Each component receives `context`
+ * as props plus ambient `{ permissions, store, user }` (populated as the
+ * providers come online).
+ */
+export function Slot<TContext extends object = object>({
+  name,
+  context,
+  fallback,
+}: SlotProps<TContext>) {
+  const entries = useSlotEntries(name)
+
+  // Ambient context — wired up properly once SlotProvider lands. For now
+  // an empty object so plugin `if` predicates can destructure safely.
+  const ambient: SlotAmbientContext = {}
+  const merged = { ...ambient, ...(context ?? {}) } as TContext & SlotAmbientContext
+
+  const visible = entries.filter((entry) => (entry.if ? entry.if(merged) : true))
+
+  if (visible.length === 0) return fallback ?? null
+
+  return (
+    <>
+      {visible.map((entry) => {
+        const Component = entry.component
+        return (
+          <Fragment key={entry.id}>
+            <Component {...merged} />
+          </Fragment>
+        )
+      })}
+    </>
+  )
+}

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

@@ -0,0 +1,18 @@
+import { DatePicker, type DatePickerProps } from '@spree/dashboard-ui'
+import { useStore } from '../providers/store-provider'
+
+/**
+ * Drop-in `<DatePicker>` that pulls the timezone from `<StoreProvider>` so
+ * every datetime in the admin SPA is interpreted in the store's timezone
+ * regardless of where the admin is logged in from.
+ *
+ * Use this in every admin form, filter, and sheet that touches a date.
+ * Only reach for the bare `<DatePicker>` when you need to override the
+ * timezone explicitly (rare).
+ */
+function StoreDatePicker(props: Omit<DatePickerProps, 'timezone'>) {
+  const { timezone } = useStore()
+  return <DatePicker {...props} timezone={timezone} />
+}
+
+export { StoreDatePicker }

package/src/components/store-switcher.tsx

@@ -0,0 +1,70 @@
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  SidebarMenu,
+  SidebarMenuItem,
+  Skeleton,
+  useSidebar,
+} from '@spree/dashboard-ui'
+import { ChevronsUpDownIcon, ExternalLinkIcon } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+import { useStore } from '../providers/store-provider'
+
+export function StoreSwitcher() {
+  const { t } = useTranslation()
+  const { isMobile, state } = useSidebar()
+  const isCollapsed = state === 'collapsed'
+
+  const { store, isLoading } = useStore()
+
+  if (isLoading) return <Skeleton className="h-header-height w-full rounded-xl" />
+
+  const storeInitials = store?.name
+    .split(' ')
+    .map((name) => name[0])
+    .join('')
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem className="h-header-height flex items-center">
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild className="flex w-full items-center">
+            <button
+              type="button"
+              className="rounded-xl outline-hidden transition-colors duration-100 hover:bg-sidebar-accent data-[state=open]:bg-sidebar-accent gap-2 p-1.5"
+            >
+              <Avatar>
+                {store?.logo_url && <AvatarImage src={store.logo_url} />}
+                <AvatarFallback>{storeInitials}</AvatarFallback>
+              </Avatar>
+              {!isCollapsed && (
+                <>
+                  <div className="grid flex-1 text-left text-sm leading-tight">
+                    <span className="truncate font-medium text-foreground">{store?.name}</span>
+                  </div>
+                  <ChevronsUpDownIcon className="ml-auto size-4 text-muted-foreground" />
+                </>
+              )}
+            </button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="min-w-48"
+            side={isMobile ? 'bottom' : 'right'}
+            align="start"
+            sideOffset={8}
+          >
+            <DropdownMenuItem>
+              <ExternalLinkIcon className="size-4" />
+              {t('admin.account.view_store')}
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}