@open-mercato/ui 0.4.6-develop-ce2a0728a5 → 0.4.6-develop-4d77832982

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

@@ -0,0 +1,115 @@
+import * as React from 'react'
+import { renderToString } from 'react-dom/server'
+import type { ColumnDef } from '@tanstack/react-table'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { I18nProvider } from '@open-mercato/shared/lib/i18n/context'
+import { DataTable } from '../DataTable'
+
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({ push: jest.fn(), replace: jest.fn(), prefetch: jest.fn(), refresh: jest.fn() }),
+}))
+
+const useInjectionDataWidgetsMock = jest.fn()
+jest.mock('../injection/useInjectionDataWidgets', () => ({
+  useInjectionDataWidgets: (spotId: string) => useInjectionDataWidgetsMock(spotId),
+}))
+
+type Row = { id: string; name: string }
+
+describe('DataTable extensions', () => {
+  beforeEach(() => {
+    useInjectionDataWidgetsMock.mockImplementation(() => ({ widgets: [], isLoading: false, error: null }))
+  })
+
+  it('renders injected columns from data-table extension surface', () => {
+    useInjectionDataWidgetsMock.mockImplementation((spotId: string) => {
+      if (spotId === 'data-table:customers.people:columns') {
+        return {
+          widgets: [
+            {
+              metadata: { id: 'test.columns' },
+              columns: [
+                {
+                  id: 'ext_col',
+                  header: 'Injected',
+                  accessorKey: 'name',
+                  sortable: false,
+                },
+              ],
+            },
+          ],
+          isLoading: false,
+          error: null,
+        }
+      }
+      return { widgets: [], isLoading: false, error: null }
+    })
+
+    const columns: ColumnDef<Row>[] = [{ accessorKey: 'name', header: 'Name' }]
+    const queryClient = new QueryClient({ defaultOptions: { queries: { gcTime: 0 } } })
+    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: [{ id: 'r1', name: 'Alice' }],
+            injectionSpotId: 'data-table:customers.people',
+          }),
+        ),
+      ),
+    )
+
+    expect(html).toContain('Injected')
+    queryClient.clear()
+  })
+
+  it('renders injected bulk action button when bulk extension exists', () => {
+    useInjectionDataWidgetsMock.mockImplementation((spotId: string) => {
+      if (spotId === 'data-table:customers.people:bulk-actions') {
+        return {
+          widgets: [
+            {
+              metadata: { id: 'test.bulk-actions' },
+              bulkActions: [
+                {
+                  id: 'bulk-normal',
+                  label: 'Set normal',
+                  onExecute: async () => ({ ok: true }),
+                },
+              ],
+            },
+          ],
+          isLoading: false,
+          error: null,
+        }
+      }
+      return { widgets: [], isLoading: false, error: null }
+    })
+
+    const columns: ColumnDef<Row>[] = [{ accessorKey: 'name', header: 'Name' }]
+    const queryClient = new QueryClient({ defaultOptions: { queries: { gcTime: 0 } } })
+    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: [{ id: 'r1', name: 'Alice' }],
+            injectionSpotId: 'data-table:customers.people',
+          }),
+        ),
+      ),
+    )
+
+    expect(html).toContain('Set normal')
+    expect(html).toContain('Select all rows')
+    queryClient.clear()
+  })
+})

package/src/backend/__tests__/DataTable.namespaces.test.ts

@@ -0,0 +1,32 @@
+import { withDataTableNamespaces } from '../DataTable'
+
+describe('withDataTableNamespaces', () => {
+  it('preserves mapped row fields and appends namespaced payload fields', () => {
+    const row = { id: '1', name: 'Alice' }
+    const source = {
+      id: '1',
+      name: 'Alice',
+      _example: { priority: 'high' },
+      _other: { flag: true },
+      ignored: 'value',
+    }
+
+    expect(withDataTableNamespaces(row, source)).toEqual({
+      id: '1',
+      name: 'Alice',
+      _example: { priority: 'high' },
+      _other: { flag: true },
+    })
+  })
+
+  it('does not overwrite mapped values with non-namespaced source fields', () => {
+    const row = { id: '1', status: 'mapped' }
+    const source = { id: '1', status: 'source', plain: 123 }
+
+    expect(withDataTableNamespaces(row, source)).toEqual({
+      id: '1',
+      status: 'mapped',
+    })
+  })
+})
+

package/src/backend/__tests__/component-replacement.test.tsx

@@ -0,0 +1,232 @@
+/** @jest-environment jsdom */
+import * as React from 'react'
+import { render, screen } from '@testing-library/react'
+import { z } from 'zod'
+import {
+  registerComponent,
+  registerComponentOverrides,
+  ComponentReplacementHandles,
+} from '@open-mercato/shared/modules/widgets/component-registry'
+import { useRegisteredComponent } from '../injection/useRegisteredComponent'
+import { DetailFieldsSection } from '../detail/DetailFieldsSection'
+
+describe('component replacement', () => {
+  afterEach(() => {
+    registerComponentOverrides([])
+  })
+
+  it('falls back to passed component when no registry entry exists', () => {
+    const Fallback = ({ value }: { value: string }) => <div>{value}</div>
+
+    function Consumer() {
+      const Resolved = useRegisteredComponent<{ value: string }>('missing.component', Fallback)
+      return <Resolved value="fallback rendered" />
+    }
+
+    render(<Consumer />)
+    expect(screen.getByText('fallback rendered')).toBeInTheDocument()
+  })
+
+  it('applies wrapper override around registered component', () => {
+    const componentId = 'test.section'
+    const Base = ({ value }: { value: string }) => <span>{value}</span>
+
+    registerComponent({
+      id: componentId,
+      component: Base,
+      metadata: {
+        module: 'test',
+      },
+    })
+    registerComponentOverrides([
+      {
+        target: { componentId },
+        priority: 10,
+        metadata: { module: 'test' },
+        wrapper: (Original) => {
+          const Wrapped = (props: { value: string }) => (
+            <div data-testid="wrapped">
+              <Original {...props} />
+            </div>
+          )
+          Wrapped.displayName = 'Wrapped'
+          return Wrapped
+        },
+      },
+    ])
+
+    function Consumer() {
+      const Resolved = useRegisteredComponent<{ value: string }>(componentId)
+      return <Resolved value="wrapped rendered" />
+    }
+
+    render(<Consumer />)
+    expect(screen.getByTestId('wrapped')).toBeInTheDocument()
+    expect(screen.getByText('wrapped rendered')).toBeInTheDocument()
+  })
+
+  it('renders section handle for DetailFieldsSection', () => {
+    render(
+      <DetailFieldsSection
+        fields={[
+          {
+            key: 'name',
+            kind: 'custom',
+            label: 'Name',
+            emptyLabel: '-',
+            render: () => <span>Name</span>,
+          },
+        ]}
+      />,
+    )
+
+    const handle = ComponentReplacementHandles.section('ui.detail', 'DetailFieldsSection')
+    const wrapper = document.querySelector(`[data-component-handle="${handle}"]`)
+    expect(wrapper).not.toBeNull()
+  })
+
+  it('falls back to original component when replacement props schema validation fails', () => {
+    const componentId = 'test.replace.schema'
+    const Original = ({ value }: { value: string }) => <span>original:{value}</span>
+    const Replacement = ({ value }: { value: string }) => <span>replacement:{value}</span>
+    const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {})
+
+    registerComponent({
+      id: componentId,
+      component: Original,
+      metadata: { module: 'test' },
+    })
+    registerComponentOverrides([
+      {
+        target: { componentId },
+        priority: 100,
+        metadata: { module: 'test' },
+        replacement: Replacement,
+        propsSchema: z.object({ value: z.string().min(4) }),
+      },
+    ])
+
+    function Consumer() {
+      const Resolved = useRegisteredComponent<{ value: string }>(componentId)
+      return <Resolved value="bad" />
+    }
+
+    render(<Consumer />)
+    expect(screen.getByText('original:bad')).toBeInTheDocument()
+    expect(screen.queryByText('replacement:bad')).toBeNull()
+    expect(consoleSpy).toHaveBeenCalled()
+    consoleSpy.mockRestore()
+  })
+
+  it('uses highest-priority replacement when multiple replacements are registered', () => {
+    const componentId = 'test.replace.priority'
+    const Original = ({ value }: { value: string }) => <span>original:{value}</span>
+    const LowPriorityReplacement = ({ value }: { value: string }) => <span>low:{value}</span>
+    const HighPriorityReplacement = ({ value }: { value: string }) => <span>high:{value}</span>
+    const warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {})
+
+    registerComponent({
+      id: componentId,
+      component: Original,
+      metadata: { module: 'test' },
+    })
+    registerComponentOverrides([
+      {
+        target: { componentId },
+        priority: 50,
+        metadata: { module: 'low-priority-module' },
+        replacement: LowPriorityReplacement,
+        propsSchema: z.object({ value: z.string() }),
+      },
+      {
+        target: { componentId },
+        priority: 100,
+        metadata: { module: 'high-priority-module' },
+        replacement: HighPriorityReplacement,
+        propsSchema: z.object({ value: z.string() }),
+      },
+    ])
+
+    function Consumer() {
+      const Resolved = useRegisteredComponent<{ value: string }>(componentId)
+      return <Resolved value="picked" />
+    }
+
+    render(<Consumer />)
+    expect(screen.queryByText('low:picked')).toBeNull()
+    expect(screen.getByText('high:picked')).toBeInTheDocument()
+    expect(warnSpy).toHaveBeenCalledWith(
+      `[UMES] Multiple replacements registered for "${componentId}". Highest-priority replacement is applied.`,
+    )
+    warnSpy.mockRestore()
+  })
+
+  it('applies propsTransform overrides before rendering', () => {
+    const componentId = 'test.props.transform'
+    const Base = ({ value, className }: { value: string; className?: string }) => (
+      <span data-testid="props-transform-target" className={className}>
+        {value}
+      </span>
+    )
+
+    registerComponent({
+      id: componentId,
+      component: Base,
+      metadata: { module: 'test' },
+    })
+    registerComponentOverrides([
+      {
+        target: { componentId },
+        priority: 50,
+        metadata: { module: 'props-transform-module' },
+        propsTransform: (props: { value: string; className?: string }) => ({
+          ...props,
+          className: 'injected-class',
+        }),
+      },
+    ])
+
+    function Consumer() {
+      const Resolved = useRegisteredComponent<{ value: string; className?: string }>(componentId)
+      return <Resolved value="props transformed" />
+    }
+
+    render(<Consumer />)
+    expect(screen.getByTestId('props-transform-target')).toHaveClass('injected-class')
+    expect(screen.getByText('props transformed')).toBeInTheDocument()
+  })
+
+  it('falls back to original component when replacement crashes at render time', () => {
+    const componentId = 'test.replace.crash'
+    const Original = ({ value }: { value: string }) => <span>original:{value}</span>
+    const CrashingReplacement = () => {
+      throw new Error('replacement render crash')
+    }
+    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {})
+
+    registerComponent({
+      id: componentId,
+      component: Original,
+      metadata: { module: 'test' },
+    })
+    registerComponentOverrides([
+      {
+        target: { componentId },
+        priority: 100,
+        metadata: { module: 'crashing-module' },
+        replacement: CrashingReplacement,
+        propsSchema: z.object({ value: z.string() }),
+      },
+    ])
+
+    function Consumer() {
+      const Resolved = useRegisteredComponent<{ value: string }>(componentId)
+      return <Resolved value="fallback" />
+    }
+
+    render(<Consumer />)
+    expect(screen.getByText('original:fallback')).toBeInTheDocument()
+    expect(errorSpy).toHaveBeenCalled()
+    errorSpy.mockRestore()
+  })
+})

package/src/backend/detail/ActivitiesSection.tsx

@@ -16,6 +16,8 @@ import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { createTranslatorWithFallback } from '@open-mercato/shared/lib/i18n/translate'
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@open-mercato/ui/primitives/dialog'
 import { useConfirmDialog } from '../confirm-dialog'
+import { ComponentReplacementHandles } from '@open-mercato/shared/modules/widgets/component-registry'
+import { useRegisteredComponent } from '../injection/useRegisteredComponent'
 
 type Translator = (key: string, fallback?: string, params?: Record<string, string | number>) => string
 
@@ -692,7 +694,7 @@ export type ActivitiesSectionProps<C = unknown> = {
   manageHref?: string
 }
 
-export function ActivitiesSection<C = unknown>({
+function ActivitiesSectionImpl<C = unknown>({
   entityId,
   dealId,
   addActionLabel,
@@ -1248,4 +1250,18 @@ export function ActivitiesSection<C = unknown>({
   )
 }
 
+export function ActivitiesSection<C = unknown>(props: ActivitiesSectionProps<C>) {
+  const handle = ComponentReplacementHandles.section('ui.detail', 'ActivitiesSection')
+  const Resolved = useRegisteredComponent<ActivitiesSectionProps<C>>(
+    handle,
+    ActivitiesSectionImpl as React.ComponentType<ActivitiesSectionProps<C>>,
+  )
+
+  return (
+    <div data-component-handle={handle}>
+      <Resolved {...props} />
+    </div>
+  )
+}
+
 export default ActivitiesSection

package/src/backend/detail/AddressesSection.tsx

@@ -8,6 +8,8 @@ import { useT } from '@open-mercato/shared/lib/i18n/context'
 import AddressTiles, { type AddressInput, type AddressValue } from './AddressTiles'
 import type { AddressTypesAdapter } from './AddressEditor'
 import type { AddressFormatStrategy } from './addressFormat'
+import { ComponentReplacementHandles } from '@open-mercato/shared/modules/widgets/component-registry'
+import { useRegisteredComponent } from '../injection/useRegisteredComponent'
 
 type Translator = (key: string, fallback?: string, params?: Record<string, string | number>) => string
 
@@ -69,7 +71,7 @@ function generateTempId() {
   return `tmp_${Math.random().toString(36).slice(2)}`
 }
 
-export function AddressesSection<C = unknown>({
+function AddressesSectionImpl<C = unknown>({
   entityId,
   emptyLabel,
   addActionLabel,
@@ -343,4 +345,18 @@ export function AddressesSection<C = unknown>({
   )
 }
 
+export function AddressesSection<C = unknown>(props: AddressesSectionProps<C>) {
+  const handle = ComponentReplacementHandles.section('ui.detail', 'AddressesSection')
+  const Resolved = useRegisteredComponent<AddressesSectionProps<C>>(
+    handle,
+    AddressesSectionImpl as React.ComponentType<AddressesSectionProps<C>>,
+  )
+
+  return (
+    <div data-component-handle={handle}>
+      <Resolved {...props} />
+    </div>
+  )
+}
+
 export default AddressesSection

package/src/backend/detail/AttachmentsSection.tsx

@@ -9,6 +9,8 @@ import { cn } from '@open-mercato/shared/lib/utils'
 import { AttachmentVisualPreview, formatAttachmentFileSize } from './AttachmentVisualPreview'
 import { AttachmentDeleteDialog } from './AttachmentDeleteDialog'
 import { AttachmentMetadataDialog, type AttachmentItem, type AttachmentMetadataSavePayload } from './AttachmentMetadataDialog'
+import { ComponentReplacementHandles } from '@open-mercato/shared/modules/widgets/component-registry'
+import { useRegisteredComponent } from '../injection/useRegisteredComponent'
 
 type AttachmentsResponse = {
   items?: AttachmentItem[]
@@ -26,7 +28,7 @@ type Props = {
   onChanged?: () => void
 }
 
-export function AttachmentsSection({
+function AttachmentsSectionImpl({
   entityId,
   recordId,
   title,
@@ -309,3 +311,17 @@ export function AttachmentsSection({
     </div>
   )
 }
+
+export function AttachmentsSection(props: Props) {
+  const handle = ComponentReplacementHandles.section('ui.detail', 'AttachmentsSection')
+  const Resolved = useRegisteredComponent<Props>(
+    handle,
+    AttachmentsSectionImpl as React.ComponentType<Props>,
+  )
+
+  return (
+    <div data-component-handle={handle}>
+      <Resolved {...props} />
+    </div>
+  )
+}

package/src/backend/detail/CustomDataSection.tsx

@@ -19,6 +19,8 @@ import {
 import { ensureDictionaryEntries } from '@open-mercato/core/modules/dictionaries/components/hooks/useDictionaryEntries'
 import { useOrganizationScopeVersion } from '@open-mercato/shared/lib/frontend/useOrganizationScope'
 import { cn } from '@open-mercato/shared/lib/utils'
+import { ComponentReplacementHandles } from '@open-mercato/shared/modules/widgets/component-registry'
+import { useRegisteredComponent } from '../injection/useRegisteredComponent'
 
 type MarkdownPreviewProps = { children: string; className?: string; remarkPlugins?: PluggableList }
 
@@ -216,7 +218,7 @@ function formatFieldValue(
   return resolved
 }
 
-export function CustomDataSection({
+function CustomDataSectionImpl({
   entityId,
   entityIds,
   values,
@@ -527,4 +529,18 @@ export function CustomDataSection({
   )
 }
 
+export function CustomDataSection(props: CustomDataSectionProps) {
+  const handle = ComponentReplacementHandles.section('ui.detail', 'CustomDataSection')
+  const Resolved = useRegisteredComponent<CustomDataSectionProps>(
+    handle,
+    CustomDataSectionImpl as React.ComponentType<CustomDataSectionProps>,
+  )
+
+  return (
+    <div data-component-handle={handle}>
+      <Resolved {...props} />
+    </div>
+  )
+}
+
 export default CustomDataSection

package/src/backend/detail/DetailFieldsSection.tsx

@@ -1,6 +1,8 @@
 "use client"
 
 import * as React from 'react'
+import { ComponentReplacementHandles } from '@open-mercato/shared/modules/widgets/component-registry'
+import { useRegisteredComponent } from '../injection/useRegisteredComponent'
 import {
   InlineMultilineEditor,
   InlineSelectEditor,
@@ -66,7 +68,7 @@ export type DetailFieldsSectionProps = {
   className?: string
 }
 
-export function DetailFieldsSection({ fields, className }: DetailFieldsSectionProps) {
+function DetailFieldsSectionImpl({ fields, className }: DetailFieldsSectionProps) {
   return (
     <div className={['grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3', className].filter(Boolean).join(' ')}>
       {fields.map((field) => {
@@ -145,3 +147,17 @@ export function DetailFieldsSection({ fields, className }: DetailFieldsSectionPr
     </div>
   )
 }
+
+export function DetailFieldsSection(props: DetailFieldsSectionProps) {
+  const handle = ComponentReplacementHandles.section('ui.detail', 'DetailFieldsSection')
+  const Resolved = useRegisteredComponent<DetailFieldsSectionProps>(
+    handle,
+    DetailFieldsSectionImpl as React.ComponentType<DetailFieldsSectionProps>,
+  )
+
+  return (
+    <div data-component-handle={handle}>
+      <Resolved {...props} />
+    </div>
+  )
+}

package/src/backend/detail/NotesSection.tsx

@@ -16,6 +16,8 @@ import { LoadingMessage } from './LoadingMessage'
 import { TabEmptyState } from './TabEmptyState'
 import { useConfirmDialog } from '../confirm-dialog'
 import { formatDateTime } from '@open-mercato/shared/lib/time'
+import { ComponentReplacementHandles } from '@open-mercato/shared/modules/widgets/component-registry'
+import { useRegisteredComponent } from '../injection/useRegisteredComponent'
 type Translator = (key: string, fallback?: string, params?: Record<string, string | number>) => string
 
 export type SectionAction = {
@@ -262,7 +264,7 @@ export function mapCommentSummary(input: unknown): CommentSummary {
   }
 }
 
-export function NotesSection<C = unknown>({
+function NotesSectionImpl<C = unknown>({
   entityId,
   dealId,
   emptyLabel,
@@ -1246,3 +1248,17 @@ export function NotesSection<C = unknown>({
     </div>
   )
 }
+
+export function NotesSection<C = unknown>(props: NotesSectionProps<C>) {
+  const handle = ComponentReplacementHandles.section('ui.detail', 'NotesSection')
+  const Resolved = useRegisteredComponent<NotesSectionProps<C>>(
+    handle,
+    NotesSectionImpl as React.ComponentType<NotesSectionProps<C>>,
+  )
+
+  return (
+    <div data-component-handle={handle}>
+      <Resolved {...props} />
+    </div>
+  )
+}

package/src/backend/detail/TagsSection.tsx

@@ -6,6 +6,8 @@ import { Button } from '@open-mercato/ui/primitives/button'
 import { TagsInput } from '@open-mercato/ui/backend/inputs/TagsInput'
 import { DataLoader } from '@open-mercato/ui/primitives/DataLoader'
 import { flash } from '@open-mercato/ui/backend/FlashMessages'
+import { ComponentReplacementHandles } from '@open-mercato/shared/modules/widgets/component-registry'
+import { useRegisteredComponent } from '../injection/useRegisteredComponent'
 
 export type TagOption = {
   id: string
@@ -44,7 +46,7 @@ export type TagsSectionProps = {
   labels: TagsSectionLabels
 }
 
-export function TagsSection({
+function TagsSectionImpl({
   title,
   tags,
   onChange,
@@ -311,4 +313,18 @@ export function TagsSection({
   )
 }
 
+export function TagsSection(props: TagsSectionProps) {
+  const handle = ComponentReplacementHandles.section('ui.detail', 'TagsSection')
+  const Resolved = useRegisteredComponent<TagsSectionProps>(
+    handle,
+    TagsSectionImpl as React.ComponentType<TagsSectionProps>,
+  )
+
+  return (
+    <div data-component-handle={handle}>
+      <Resolved {...props} />
+    </div>
+  )
+}
+
 export default TagsSection