@open-mercato/ui 0.6.6-develop.5716.1.b108502d0d → 0.6.6-develop.5738.1.4182c2b2c7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-mercato/ui",
-  "version": "0.6.6-develop.5716.1.b108502d0d",
+  "version": "0.6.6-develop.5738.1.4182c2b2c7",
   "type": "module",
   "main": "./dist/index.js",
   "scripts": {
@@ -154,13 +154,13 @@
     "remark-gfm": "^4.0.1"
   },
   "peerDependencies": {
-    "@open-mercato/shared": "0.6.6-develop.5716.1.b108502d0d",
+    "@open-mercato/shared": "0.6.6-develop.5738.1.4182c2b2c7",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
     "react-is": ">=18.0.0"
   },
   "devDependencies": {
-    "@open-mercato/shared": "0.6.6-develop.5716.1.b108502d0d",
+    "@open-mercato/shared": "0.6.6-develop.5738.1.4182c2b2c7",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.1",

package/src/backend/CrudForm.tsx

@@ -403,6 +403,12 @@ export type CrudFormGroupComponentProps = {
   values: Record<string, unknown>
   setValue: (id: string, v: unknown) => void
   errors: Record<string, string>
+  /**
+   * Field ids that active injection widgets declare as required (e.g. the SEO
+   * helper). Custom group components that render their own labels can use this
+   * to show a required marker that appears/disappears with the widget.
+   */
+  requiredFieldIds?: ReadonlySet<string>
 }
 
 // Special group kind for automatic Custom Fields section
@@ -1069,6 +1075,19 @@ export function CrudForm<TValues extends Record<string, unknown>>({
   const { triggerEvent: triggerInjectionEvent } = useInjectionSpotEvents(resolvedInjectionSpotId ?? '', injectionWidgets)
   const extendedInjectionEventsEnabled = CRUDFORM_EXTENDED_EVENTS_ENABLED && Boolean(resolvedInjectionSpotId)
 
+  // Fields that active injection widgets declare as required (e.g. the SEO helper
+  // enforcing a description). The host renders a visual required marker for these;
+  // enforcement stays in the widget's own onBeforeSave validation.
+  const widgetRequiredFieldIds = React.useMemo(() => {
+    const ids = new Set<string>()
+    for (const widget of injectionWidgets ?? []) {
+      const metadata = widget.module?.metadata
+      if (!metadata || metadata.enabled === false) continue
+      for (const fieldId of metadata.requiredFields ?? []) ids.add(fieldId)
+    }
+    return ids
+  }, [injectionWidgets])
+
   const transformValidationErrors = React.useCallback(
     async (fieldErrors: Record<string, string>): Promise<Record<string, string>> => {
       if (!extendedInjectionEventsEnabled || !Object.keys(fieldErrors).length) return fieldErrors
@@ -2214,6 +2233,33 @@ export function CrudForm<TValues extends Record<string, unknown>>({
     }
   }, [errors, formId])
 
+  // When an injection widget blocks save (e.g. the SEO helper), the blocking
+  // reason is easy to miss if the relevant field or the widget panel is off-screen.
+  // Deliberately scroll to the first field-mapped error, falling back to the
+  // injection widget region when the widget only returns a message.
+  const scrollToInjectionBlockedTarget = React.useCallback(
+    (fieldErrors?: Record<string, string>) => {
+      if (typeof document === 'undefined') return
+      const form = document.getElementById(formId)
+      if (!form) return
+      let target: HTMLElement | null = null
+      for (const fieldId of fieldErrors ? Object.keys(fieldErrors) : []) {
+        const fieldContainer = form.querySelector<HTMLElement>(`[data-crud-field-id="${fieldId}"]`)
+        if (fieldContainer) {
+          target = fieldContainer
+          break
+        }
+      }
+      if (!target) {
+        target = form.querySelector<HTMLElement>('[data-crud-injection-region]')
+      }
+      if (target && typeof target.scrollIntoView === 'function') {
+        target.scrollIntoView({ behavior: 'smooth', block: 'center' })
+      }
+    },
+    [formId],
+  )
+
   const updateEditedFieldMarker = React.useCallback((
     id: string,
     nextValue: unknown,
@@ -2717,6 +2763,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
           }
           const message = result.message || t('ui.forms.flash.saveBlocked', 'Save blocked by validation')
           flash(message, 'error')
+          scrollToInjectionBlockedTarget(result.fieldErrors)
           setPending(false)
           return
         }
@@ -3007,6 +3054,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
               wrapperClassName={wrapperClassName}
               entityIdForField={primaryEntityId ?? undefined}
               recordId={recordId}
+              markRequired={widgetRequiredFieldIds.has(f.id)}
             />
           )
         })}
@@ -3299,7 +3347,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
           if (g.component) {
             customFieldsInnerNodes.push(
               <div key={`${g.id}-component`} className="rounded-lg border bg-card px-4 py-3">
-                {g.component({ values, setValue, errors })}
+                {g.component({ values, setValue, errors, requiredFieldIds: widgetRequiredFieldIds })}
               </div>,
             )
           }
@@ -3346,7 +3394,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
           continue
         }
 
-        const componentNode = g.component ? g.component({ values, setValue, errors }) : null
+        const componentNode = g.component ? g.component({ values, setValue, errors, requiredFieldIds: widgetRequiredFieldIds }) : null
         if (g.bare) {
           if (componentNode) {
             nodes.push(<React.Fragment key={g.id}>{componentNode}</React.Fragment>)
@@ -3475,7 +3523,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
               ) : (
                 <div className="space-y-3">{col1Content}</div>
               )}
-              {hasSecondaryColumn ? <div className="space-y-3">{col2Content}</div> : null}
+              {hasSecondaryColumn ? <div className="space-y-3" data-crud-injection-region>{col2Content}</div> : null}
             </div>
             {formError && !Object.keys(errors).length ? <div className="text-sm text-status-error-text">{formError}</div> : null}
             {hideFooterActions || formReadOnly ? null : (
@@ -3569,6 +3617,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
                     wrapperClassName={wrapperClassName}
                     entityIdForField={primaryEntityId ?? undefined}
                     recordId={recordId}
+                    markRequired={widgetRequiredFieldIds.has(f.id)}
                   />
                 )
               })}
@@ -4005,6 +4054,7 @@ type FieldControlProps = {
   wrapperClassName?: string
   entityIdForField?: string
   recordId?: string
+  markRequired?: boolean
 }
 
 function supportsWrapperBlurValidation(field: CrudField): boolean {
@@ -4118,6 +4168,7 @@ const FieldControl = React.memo(function FieldControlImpl({
   wrapperClassName,
   entityIdForField,
   recordId,
+  markRequired,
 }: FieldControlProps) {
   const t = useT()
   const fieldSetValue = React.useCallback(
@@ -4170,7 +4221,7 @@ const FieldControl = React.memo(function FieldControlImpl({
       {field.type !== 'checkbox' && field.label.trim().length > 0 ? (
         <label className="block text-sm font-medium">
           {field.label}
-          {field.required ? <span className="text-status-error-text"> *</span> : null}
+          {field.required || markRequired ? <span className="text-status-error-text"> *</span> : null}
         </label>
       ) : null}
       {field.type === 'text' && (
@@ -4477,6 +4528,7 @@ const FieldControl = React.memo(function FieldControlImpl({
   prev.field.label === next.field.label &&
   prev.field.description === next.field.description &&
   prev.field.required === next.field.required &&
+  prev.markRequired === next.markRequired &&
   prev.value === next.value &&
   prev.error === next.error &&
   prev.options === next.options &&

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

@@ -0,0 +1,122 @@
+/** @jest-environment jsdom */
+jest.setTimeout(15000)
+
+const pushMock = jest.fn()
+const confirmDialogMock = jest.fn()
+const triggerEventMock = jest.fn()
+
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({ push: pushMock }),
+  usePathname: () => '/',
+  useSearchParams: () => new URLSearchParams(),
+}))
+jest.mock('remark-gfm', () => ({ __esModule: true, default: {} }))
+jest.mock('../confirm-dialog', () => ({
+  useConfirmDialog: () => ({
+    confirm: confirmDialogMock,
+    ConfirmDialogElement: null,
+  }),
+}))
+jest.mock('../injection/InjectionSpot', () => ({
+  __esModule: true,
+  InjectionSpot: () => null,
+  useInjectionWidgets: () => ({ widgets: [], loading: false, error: null }),
+  useInjectionSpotEvents: () => ({ triggerEvent: triggerEventMock }),
+}))
+jest.mock('../injection/useInjectionDataWidgets', () => ({
+  __esModule: true,
+  useInjectionDataWidgets: () => ({ widgets: [], isLoading: false, error: null }),
+}))
+
+import * as React from 'react'
+import { act, fireEvent } from '@testing-library/react'
+import { renderWithProviders } from '@open-mercato/shared/lib/testing/renderWithProviders'
+import { CrudForm, type CrudField } from '../CrudForm'
+
+describe('CrudForm injection-block scroll behavior', () => {
+  const fields: CrudField[] = [
+    { id: 'name', label: 'Name', type: 'text' },
+    { id: 'description', label: 'Description', type: 'text' },
+  ]
+
+  let scrollSpy: jest.Mock
+
+  beforeEach(() => {
+    pushMock.mockReset()
+    confirmDialogMock.mockReset()
+    confirmDialogMock.mockResolvedValue(true)
+    triggerEventMock.mockReset()
+    scrollSpy = jest.fn()
+    // jsdom does not implement scrollIntoView
+    ;(Element.prototype as unknown as { scrollIntoView: unknown }).scrollIntoView = scrollSpy
+  })
+
+  it('scrolls to the first errored field when an injection widget blocks save', async () => {
+    triggerEventMock.mockImplementation(async (event: string, data: Record<string, unknown>) => {
+      if (event === 'onBeforeSave') {
+        return {
+          ok: false,
+          message: 'SEO helper: Description is missing.',
+          fieldErrors: { description: 'Description is required.' },
+        }
+      }
+      if (event === 'transformValidation') return data
+      return { ok: true, data }
+    })
+
+    const { container } = renderWithProviders(
+      <CrudForm
+        title="Form"
+        fields={fields}
+        initialValues={{ name: 'A valid product name', description: '' }}
+        injectionSpotId="crud-form:catalog.product"
+        onSubmit={() => {}}
+      />,
+      { dict: { 'ui.forms.actions.save': 'Save' } },
+    )
+
+    const form = container.querySelector('form') as HTMLFormElement
+    const descriptionContainer = container.querySelector(
+      '[data-crud-field-id="description"]',
+    ) as HTMLElement
+
+    await act(async () => {
+      fireEvent.submit(form)
+      await new Promise((resolve) => setTimeout(resolve, 0))
+      await Promise.resolve()
+    })
+
+    expect(scrollSpy).toHaveBeenCalled()
+    expect(scrollSpy.mock.instances[0]).toBe(descriptionContainer)
+    expect(scrollSpy).toHaveBeenCalledWith(expect.objectContaining({ block: 'center' }))
+  })
+
+  it('does not scroll when the injection widget allows save', async () => {
+    triggerEventMock.mockImplementation(async (event: string, data: Record<string, unknown>) => {
+      if (event === 'onBeforeSave') return { ok: true }
+      if (event === 'transformValidation') return data
+      return { ok: true, data }
+    })
+
+    const { container } = renderWithProviders(
+      <CrudForm
+        title="Form"
+        fields={fields}
+        initialValues={{ name: 'A valid product name', description: 'Long enough description text here.' }}
+        injectionSpotId="crud-form:catalog.product"
+        onSubmit={() => {}}
+      />,
+      { dict: { 'ui.forms.actions.save': 'Save' } },
+    )
+
+    const form = container.querySelector('form') as HTMLFormElement
+
+    await act(async () => {
+      fireEvent.submit(form)
+      await new Promise((resolve) => setTimeout(resolve, 0))
+      await Promise.resolve()
+    })
+
+    expect(scrollSpy).not.toHaveBeenCalled()
+  })
+})

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

@@ -0,0 +1,102 @@
+/** @jest-environment jsdom */
+jest.setTimeout(15000)
+
+const pushMock = jest.fn()
+const triggerEventMock = jest.fn(async () => ({ ok: true }))
+
+const requiredWidget = {
+  widgetId: 'catalog.injection.product-seo',
+  moduleId: 'catalog',
+  module: {
+    metadata: {
+      id: 'catalog.injection.product-seo',
+      title: 'Product SEO Helper',
+      enabled: true,
+      requiredFields: ['description'],
+    },
+    Widget: () => null,
+  },
+}
+
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({ push: pushMock }),
+  usePathname: () => '/',
+  useSearchParams: () => new URLSearchParams(),
+}))
+jest.mock('remark-gfm', () => ({ __esModule: true, default: {} }))
+jest.mock('../confirm-dialog', () => ({
+  useConfirmDialog: () => ({ confirm: jest.fn(), ConfirmDialogElement: null }),
+}))
+jest.mock('../injection/InjectionSpot', () => ({
+  __esModule: true,
+  InjectionSpot: () => null,
+  useInjectionWidgets: () => ({ widgets: [requiredWidget], loading: false, error: null }),
+  useInjectionSpotEvents: () => ({ triggerEvent: triggerEventMock }),
+}))
+jest.mock('../injection/useInjectionDataWidgets', () => ({
+  __esModule: true,
+  useInjectionDataWidgets: () => ({ widgets: [], isLoading: false, error: null }),
+}))
+
+import * as React from 'react'
+import { renderWithProviders } from '@open-mercato/shared/lib/testing/renderWithProviders'
+import { CrudForm, type CrudField } from '../CrudForm'
+
+describe('CrudForm required marker from injection widget metadata', () => {
+  const fields: CrudField[] = [
+    { id: 'name', label: 'Name', type: 'text' },
+    { id: 'description', label: 'Description', type: 'text' },
+  ]
+
+  it('renders a required marker on fields declared in an active widget requiredFields', () => {
+    const { container } = renderWithProviders(
+      <CrudForm
+        title="Form"
+        fields={fields}
+        initialValues={{ name: '', description: '' }}
+        injectionSpotId="crud-form:catalog.product"
+        onSubmit={() => {}}
+      />,
+      { dict: { 'ui.forms.actions.save': 'Save' } },
+    )
+
+    const descriptionMarker = container.querySelector(
+      '[data-crud-field-id="description"] .text-status-error-text',
+    )
+    const nameMarker = container.querySelector(
+      '[data-crud-field-id="name"] .text-status-error-text',
+    )
+
+    expect(descriptionMarker).not.toBeNull()
+    expect(descriptionMarker?.textContent).toContain('*')
+    expect(nameMarker).toBeNull()
+  })
+
+  it('passes the active widget requiredFields to custom group components via requiredFieldIds', () => {
+    let received: ReadonlySet<string> | undefined
+    const groups = [
+      {
+        id: 'builder',
+        component: (ctx: { requiredFieldIds?: ReadonlySet<string> }) => {
+          received = ctx.requiredFieldIds
+          return <div data-testid="builder" />
+        },
+      },
+    ]
+
+    renderWithProviders(
+      <CrudForm
+        title="Form"
+        fields={[]}
+        groups={groups}
+        initialValues={{ description: '' }}
+        injectionSpotId="crud-form:catalog.product"
+        onSubmit={() => {}}
+      />,
+      { dict: { 'ui.forms.actions.save': 'Save' } },
+    )
+
+    expect(received).toBeDefined()
+    expect(Array.from(received ?? [])).toContain('description')
+  })
+})