@open-mercato/ui 0.4.2-canary-c02407ff85

package/src/backend/UserMenu.tsx

@@ -0,0 +1,118 @@
+"use client"
+import * as React from 'react'
+import { User, LogOut } from 'lucide-react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+
+export function UserMenu({ email }: { email?: string }) {
+  const t = useT()
+  const [open, setOpen] = React.useState(false)
+  const buttonRef = React.useRef<HTMLButtonElement>(null)
+  const menuRef = React.useRef<HTMLDivElement>(null)
+  const logoutButtonRef = React.useRef<HTMLButtonElement>(null)
+
+  // Toggle menu open/close
+  const toggle = () => setOpen((v) => !v)
+
+  // Open on hover, close when mouse leaves the menu area
+  const onMouseEnter = () => setOpen(true)
+  const onMouseLeave = () => setOpen(false)
+
+  // Close menu when clicking outside
+  React.useEffect(() => {
+    if (!open) return
+    function handleClick(event: MouseEvent) {
+      if (
+        menuRef.current &&
+        !menuRef.current.contains(event.target as Node) &&
+        buttonRef.current &&
+        !buttonRef.current.contains(event.target as Node)
+      ) {
+        setOpen(false)
+      }
+    }
+    document.addEventListener('mousedown', handleClick)
+    return () => document.removeEventListener('mousedown', handleClick)
+  }, [open])
+
+  // Keyboard navigation
+  React.useEffect(() => {
+    if (!open) return
+    function handleKeyDown(event: KeyboardEvent) {
+      if (event.key === 'Escape') {
+        setOpen(false)
+        buttonRef.current?.focus()
+      } else if (event.key === 'ArrowDown' || event.key === 'Tab') {
+        event.preventDefault()
+        logoutButtonRef.current?.focus()
+      } else if (event.key === 'ArrowUp') {
+        event.preventDefault()
+        logoutButtonRef.current?.focus()
+      }
+    }
+    document.addEventListener('keydown', handleKeyDown)
+    return () => document.removeEventListener('keydown', handleKeyDown)
+  }, [open])
+
+  // Focus the first menu item when menu opens
+  React.useEffect(() => {
+    if (open) {
+      setTimeout(() => {
+        logoutButtonRef.current?.focus()
+      }, 0)
+    }
+  }, [open])
+
+  return (
+    <div className="relative" onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
+      <button
+        ref={buttonRef}
+        className="text-sm px-2 py-1 rounded hover:bg-accent inline-flex items-center gap-2"
+        onClick={() => setOpen(true)}
+        aria-expanded={open}
+        aria-haspopup="menu"
+        aria-controls="user-menu-dropdown"
+        id="user-menu-button"
+        type="button"
+        title={email || t('ui.userMenu.userFallback', 'User')}
+      >
+        <User className="size-4" />
+      </button>
+      {open && (
+        <div
+          ref={menuRef}
+          id="user-menu-dropdown"
+          className="absolute right-0 top-full mt-0 w-56 rounded-md border bg-background p-1 shadow z-50"
+          role="menu"
+          aria-labelledby="user-menu-button"
+          tabIndex={-1}
+        >
+          {email && (
+            <div className="px-2 py-2 text-xs text-muted-foreground border-b mb-1">
+              <div className="font-medium">{t('ui.userMenu.loggedInAs', 'Logged in as:')}</div>
+              <div className="truncate">{email}</div>
+            </div>
+          )}
+          <form action="/api/auth/logout" method="POST">
+            <button
+              ref={logoutButtonRef}
+              className="w-full text-left text-sm px-2 py-1 rounded hover:bg-accent inline-flex items-center gap-2 outline-none focus:outline-none focus-visible:outline-none ring-0 focus:ring-0 focus-visible:ring-0"
+              type="submit"
+              role="menuitem"
+              tabIndex={0}
+              onKeyDown={(e) => {
+                if (e.key === 'Escape') {
+                  setOpen(false)
+                  buttonRef.current?.focus()
+                }
+              }}
+            >
+              <LogOut className="size-4" />
+              <span>{t('ui.userMenu.logout', 'Logout')}</span>
+            </button>
+          </form>
+        </div>
+      )}
+    </div>
+  )
+}
+

package/src/backend/ValueIcons.tsx

@@ -0,0 +1,48 @@
+"use client"
+import * as React from 'react'
+import { Check, X, AlertTriangle, Minus, Circle } from 'lucide-react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+
+export function BooleanIcon({ value, trueLabel, falseLabel, className }: {
+  value?: boolean | null
+  trueLabel?: string
+  falseLabel?: string
+  className?: string
+}) {
+  const v = !!value
+  return (
+    <span className={`inline-flex items-center gap-1 ${className ?? ''}`}>
+      {v ? (
+        <Check className="size-4 text-emerald-600" />
+      ) : (
+        <X className="size-4 text-muted-foreground" />
+      )}
+      {v && trueLabel ? <span className="text-xs">{trueLabel}</span> : null}
+      {!v && falseLabel ? <span className="text-xs">{falseLabel}</span> : null}
+    </span>
+  )
+}
+
+export type EnumBadgeMap = Record<string, { label: string; className?: string; icon?: React.ReactNode }>
+
+export function EnumBadge({ value, map, fallback }: { value?: string | null; map: EnumBadgeMap; fallback?: string }) {
+  if (!value) return <span className="text-muted-foreground text-xs">{fallback ?? '—'}</span>
+  const cfg = map[value] || { label: String(value) }
+  return (
+    <span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs border ${cfg.className ?? ''}`}>
+      {cfg.icon}
+      <span>{cfg.label}</span>
+    </span>
+  )
+}
+
+// Presets for common enums (optional helper)
+export function useSeverityPreset(): EnumBadgeMap {
+  const t = useT()
+  return {
+    low: { label: t('ui.badges.severity.low', 'Low'), className: 'border-amber-200 text-amber-700 bg-amber-50', icon: <Circle className="size-3" /> },
+    medium: { label: t('ui.badges.severity.medium', 'Medium'), className: 'border-yellow-200 text-yellow-800 bg-yellow-50', icon: <Minus className="size-3" /> },
+    high: { label: t('ui.badges.severity.high', 'High'), className: 'border-red-200 text-red-700 bg-red-50', icon: <AlertTriangle className="size-3" /> },
+  }
+}
+

package/src/backend/__tests__/AppShell.test.tsx

@@ -0,0 +1,115 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import * as React from 'react'
+import { screen, waitFor } from '@testing-library/react'
+import { AppShell, ApplyBreadcrumb } from '../AppShell'
+import { renderWithProviders } from '@open-mercato/shared/lib/testing/renderWithProviders'
+
+jest.mock('next/link', () => {
+  const React = require('react')
+  return React.forwardRef(({ children, href, ...rest }: any, ref: React.ForwardedRef<HTMLAnchorElement>) => (
+    <a href={typeof href === 'string' ? href : href?.toString?.()} ref={ref} {...rest}>
+      {children}
+    </a>
+  ))
+})
+
+jest.mock('next/image', () => (props: any) => <img alt={props.alt} {...props} />)
+
+jest.mock('next/navigation', () => ({
+  usePathname: () => '/backend/users',
+  useRouter: () => ({
+    refresh: jest.fn(),
+    push: jest.fn(),
+  }),
+}))
+
+jest.mock('../operations/LastOperationBanner', () => ({
+  LastOperationBanner: () => <div data-testid="last-operation-banner" />,
+}))
+
+jest.mock('../indexes/PartialIndexBanner', () => ({
+  PartialIndexBanner: () => <div data-testid="partial-index-banner" />,
+}))
+
+jest.mock('../FlashMessages', () => ({
+  FlashMessages: () => <div data-testid="flash-messages" />,
+}))
+
+jest.mock('../../frontend/LanguageSwitcher', () => ({
+  LanguageSwitcher: () => <div data-testid="language-switcher" />,
+}))
+
+jest.mock('../upgrades/UpgradeActionBanner', () => ({
+  UpgradeActionBanner: () => <div data-testid="upgrade-action-banner" />,
+}))
+
+const dict = {
+  'appShell.productName': 'Mercato',
+  'appShell.menu': 'Menu',
+  'appShell.toggleSidebar': 'Toggle sidebar',
+  'appShell.collapseSidebar': 'Collapse',
+  'appShell.expandSidebar': 'Expand',
+  'appShell.userFallback': 'User',
+  'appShell.goToDashboard': 'Go to dashboard',
+  'appShell.closeMenu': 'Close',
+  'common.terms': 'Terms',
+  'common.privacy': 'Privacy',
+  'dashboard.title': 'Dashboard',
+  'custom.page.title': 'Custom Page',
+  'custom.page.breadcrumb': 'Custom Trail',
+}
+
+const groups = [
+  {
+    id: 'core',
+    name: 'Core',
+    items: [
+      { href: '/backend/users', title: 'Users List' },
+      { href: '/backend/roles', title: 'Roles' },
+    ],
+  },
+]
+
+describe('AppShell', () => {
+  beforeAll(() => {
+    const storage: Record<string, string> = {}
+    Object.defineProperty(window, 'localStorage', {
+      value: {
+        getItem: (key: string) => storage[key] ?? null,
+        setItem: (key: string, value: string) => {
+          storage[key] = value
+        },
+        removeItem: (key: string) => {
+          delete storage[key]
+        },
+      },
+      configurable: true,
+    })
+  })
+
+  it('renders navigation and breadcrumbs with translations applied via ApplyBreadcrumb', async () => {
+    renderWithProviders(
+      <AppShell
+        email="demo@example.com"
+        groups={groups}
+        breadcrumb={[{ label: 'Initial' }]}
+        currentTitle="Initial"
+      >
+        <ApplyBreadcrumb
+          titleKey="custom.page.title"
+          breadcrumb={[{ label: 'Custom Trail', labelKey: 'custom.page.breadcrumb', href: '/custom' }]}
+        />
+        <div>Child content</div>
+      </AppShell>,
+      { dict },
+    )
+
+    expect(screen.getByText('Users List')).toBeInTheDocument()
+    expect(screen.getAllByText('Terms')[0]).toBeInTheDocument()
+    expect(screen.getByTestId('flash-messages')).toBeInTheDocument()
+    expect(screen.getByText('Child content')).toBeInTheDocument()
+  })
+})

package/src/backend/__tests__/CrudForm.render.test.tsx

@@ -0,0 +1,30 @@
+jest.mock('next/navigation', () => ({ useRouter: () => ({ push: () => {} }) }))
+jest.mock('remark-gfm', () => ({ __esModule: true, default: {} }))
+jest.mock('@uiw/react-md-editor', () => ({ __esModule: true, default: () => null }))
+
+import * as React from 'react'
+import { renderToString } from 'react-dom/server'
+import { CrudForm, type CrudField } from '../CrudForm'
+import { I18nProvider } from '@open-mercato/shared/lib/i18n/context'
+
+describe('CrudForm SSR render', () => {
+  it('renders base fields', () => {
+    const fields: CrudField[] = [
+      { id: 'title', label: 'Title', type: 'text' },
+      { id: 'is_done', label: 'Done', type: 'checkbox' },
+    ]
+    const html = renderToString(
+      React.createElement(
+        I18nProvider as any,
+        { locale: 'en', dict: {} },
+        React.createElement(CrudForm as any, {
+          title: 'Form',
+          fields,
+          onSubmit: () => {},
+        })
+      )
+    )
+    expect(html).toContain('Title')
+    expect(html).toContain('Done')
+  })
+})

package/src/backend/__tests__/DataTable.render.test.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react'
+import { renderToString } from 'react-dom/server'
+import { DataTable } from '../DataTable'
+import type { ColumnDef } from '@tanstack/react-table'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { I18nProvider } from '@open-mercato/shared/lib/i18n/context'
+
+// Mock next/navigation for SSR compatibility of client components
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({ push: jest.fn(), replace: jest.fn(), prefetch: jest.fn() }),
+}))
+
+type Row = { id: string; name: string }
+
+describe('DataTable SSR render', () => {
+  it('renders built-in FilterBar when search/filters provided', () => {
+    const columns: ColumnDef<Row>[] = [
+      { accessorKey: 'name', header: 'Name' },
+    ]
+    const queryClient = new QueryClient({ defaultOptions: { queries: { gcTime: 0 } } })
+    try {
+      const html = renderToString(
+        React.createElement(
+          QueryClientProvider as any,
+          { client: queryClient },
+          React.createElement(
+            I18nProvider as any,
+            { locale: 'en', dict: {} },
+            React.createElement(DataTable as any, {
+              columns,
+              data: [],
+              title: 'Test',
+              searchValue: 'abc',
+              onSearchChange: () => {},
+              filters: [{ id: 'created_at', label: 'Created', type: 'dateRange' }],
+              filterValues: {},
+              onFiltersApply: () => {},
+            }),
+          ),
+        )
+      )
+      expect(html).toContain('Filters')
+      expect(html).toContain('Name')
+    } finally {
+      queryClient.clear()
+    }
+  })
+})

package/src/backend/__tests__/custom-field-filters.test.ts

@@ -0,0 +1,72 @@
+import { buildFilterDefsFromCustomFields, type CustomFieldDefDto } from '../utils/customFieldFilters'
+
+describe('buildFilterDefsFromCustomFields', () => {
+  it('maps boolean/select/text and respects filterable/multi', () => {
+    const defs: CustomFieldDefDto[] = [
+      { key: 'blocked', kind: 'boolean', filterable: true },
+      {
+        key: 'severity',
+        kind: 'select',
+        filterable: true,
+        options: [
+          { value: 'low', label: 'low' },
+          { value: 'medium', label: 'medium' },
+          { value: 'high', label: 'high' },
+        ],
+      },
+      {
+        key: 'labels',
+        kind: 'select',
+        filterable: true,
+        options: [
+          { value: 'bug', label: 'bug' },
+          { value: 'feature', label: 'feature' },
+        ],
+        multi: true,
+      },
+      { key: 'notes', kind: 'multiline', filterable: true },
+      { key: 'hidden', kind: 'text', filterable: false },
+    ]
+
+    const out = buildFilterDefsFromCustomFields(defs)
+
+    // boolean => checkbox
+    expect(out.find(f => f.id === 'cf_blocked')!.type).toBe('checkbox')
+    // select single => select with options and multiple false
+    const sev = out.find(f => f.id === 'cf_severity')!
+    expect(sev.type).toBe('select')
+    if (sev.type !== 'select') throw new Error('expected select')
+    expect(sev.multiple).toBeFalsy()
+    expect((sev.options || []).map((o) => o.value)).toEqual(['low','medium','high'])
+    // select multi => select with multiple true and id with In suffix
+    const labels = out.find(f => f.id === 'cf_labelsIn')!
+    expect(labels.type).toBe('select')
+    if (labels.type !== 'select') throw new Error('expected select')
+    expect(labels.multiple).toBe(true)
+    expect((labels.options || []).map((o) => o.value)).toEqual(['bug','feature'])
+    // text-like (multiline) => text
+    expect(out.find(f => f.id === 'cf_notes')!.type).toBe('text')
+    // non-filterable omitted
+    expect(out.some(f => f.id === 'cf_hidden')).toBe(false)
+  })
+
+  it('maps multi text to tags with async suggestions support', () => {
+    const defs: CustomFieldDefDto[] = [
+      {
+        key: 'labels',
+        kind: 'text',
+        filterable: true,
+        multi: true,
+        options: [
+          { value: 'bug', label: 'bug' },
+          { value: 'feature', label: 'feature' },
+        ],
+      },
+    ]
+    const out = buildFilterDefsFromCustomFields(defs)
+    const labels = out.find(f => f.id === 'cf_labelsIn')!
+    expect(labels.type).toBe('tags')
+    if (labels.type !== 'tags') throw new Error('expected tags')
+    expect((labels.options || []).map((o) => o.value)).toEqual(['bug','feature'])
+  })
+})

package/src/backend/__tests__/custom-field-forms.test.ts

@@ -0,0 +1,54 @@
+import { buildFormFieldsFromCustomFields } from '../utils/customFieldForms'
+import type { CustomFieldDefDto } from '../utils/customFieldFilters'
+
+describe('buildFormFieldsFromCustomFields', () => {
+  it('maps kinds to CrudField and filters by formEditable', () => {
+    const defs: CustomFieldDefDto[] = [
+      { key: 'blocked', kind: 'boolean', filterable: true, formEditable: true },
+      { key: 'priority', kind: 'integer', filterable: true, formEditable: true },
+      {
+        key: 'severity',
+        kind: 'select',
+        options: [
+          { value: 'low', label: 'low' },
+          { value: 'high', label: 'high' },
+        ],
+        multi: false,
+        filterable: true,
+        formEditable: true,
+      },
+      {
+        key: 'labels',
+        kind: 'select',
+        options: [
+          { value: 'bug', label: 'bug' },
+          { value: 'feature', label: 'feature' },
+        ],
+        multi: true,
+        filterable: true,
+        formEditable: true,
+      },
+      { key: 'notes', kind: 'multiline', filterable: false, formEditable: true },
+      // text with editor hint should render richtext
+      { key: 'desc', kind: 'text', filterable: false, formEditable: true, editor: 'htmlRichText' },
+      { key: 'hidden', kind: 'text', filterable: true, formEditable: false },
+    ]
+
+    const fields = buildFormFieldsFromCustomFields(defs)
+    const byId: Record<string, any> = Object.fromEntries(fields.map(f => [f.id, f]))
+    expect(byId['cf_blocked']?.type).toBe('checkbox')
+    expect(byId['cf_priority']?.type).toBe('number')
+    expect(byId['cf_severity']?.type).toBe('select')
+    expect(byId['cf_labels']?.type).toBe('select')
+    if (byId['cf_labels']?.type === 'select') {
+      expect(byId['cf_labels'].multiple).toBe(true)
+    }
+    // Multiline now defaults to richtext (markdown editor)
+    expect(byId['cf_notes']?.type).toBe('richtext')
+    expect(byId['cf_desc']?.type).toBe('richtext')
+    if (byId['cf_desc']?.type === 'richtext') {
+      expect(byId['cf_desc'].editor).toBe('html')
+    }
+    expect(byId['cf_hidden']).toBeUndefined()
+  })
+})

package/src/backend/__tests__/serverErrors.test.ts

@@ -0,0 +1,83 @@
+import { mapCrudServerErrorToFormErrors, raiseCrudError, readJsonSafe } from '../utils/serverErrors'
+
+describe('serverErrors helpers', () => {
+  it('maps details array into field errors and message', () => {
+    const error = {
+      error: 'Invalid input',
+      details: [
+        {
+          origin: 'string',
+          code: 'too_small',
+          minimum: 6,
+          inclusive: true,
+          path: ['password'],
+          message: 'Too small: expected string to have >=6 characters',
+        },
+      ],
+    }
+
+    const result = mapCrudServerErrorToFormErrors(error, { customEntity: false })
+    expect(result.fieldErrors).toEqual({
+      password: 'Too small: expected string to have >=6 characters',
+    })
+    expect(result.message).toBe('Too small: expected string to have >=6 characters')
+  })
+
+  it('keeps provided fieldErrors when available', () => {
+    const error = {
+      message: 'Invalid input',
+      fieldErrors: {
+        cf_notes: 'Notes are required',
+      },
+    }
+
+    const result = mapCrudServerErrorToFormErrors(error, { customEntity: false })
+    expect(result.fieldErrors).toEqual({ cf_notes: 'Notes are required' })
+    expect(result.message).toBe('Notes are required')
+  })
+
+  it('raiseCrudError throws structured object with parsed body', async () => {
+    expect.assertions(2)
+    const response = new Response(
+      JSON.stringify({
+        error: 'Invalid input',
+        details: [
+          {
+            path: ['password'],
+            message: 'Too small: expected string to have >=6 characters',
+          },
+        ],
+      }),
+      { status: 400, headers: { 'content-type': 'application/json' } },
+    )
+
+    try {
+      await raiseCrudError(response, 'Fallback message')
+    } catch (err) {
+      expect(err).toMatchObject({ status: 400, message: 'Invalid input' })
+      expect(err).toHaveProperty('details')
+    }
+  })
+
+  it('raiseCrudError falls back to message when body is plain text', async () => {
+    expect.assertions(1)
+    const response = new Response('Something went wrong', { status: 500 })
+
+    await expect(raiseCrudError(response, 'Fallback message')).rejects.toMatchObject({
+      status: 500,
+      message: 'Fallback message',
+    })
+  })
+
+  it('readJsonSafe returns fallback when body empty', async () => {
+    const response = new Response('', { status: 200 })
+    const result = await readJsonSafe<{ ok: boolean }>(response, { ok: false })
+    expect(result).toEqual({ ok: false })
+  })
+
+  it('readJsonSafe returns fallback when parsing fails', async () => {
+    const response = new Response('not json', { status: 200 })
+    const result = await readJsonSafe<{ ok: boolean }>(response, { ok: true })
+    expect(result).toEqual({ ok: true })
+  })
+})