@open-mercato/ui 0.4.2-canary-c02407ff85

package/src/backend/inputs/SwitchableMarkdownInput.tsx

@@ -0,0 +1,128 @@
+"use client"
+
+import * as React from 'react'
+import dynamic from 'next/dynamic'
+import type { PluggableList } from 'unified'
+import { LoadingMessage } from '../detail/LoadingMessage'
+
+export type SwitchableMarkdownInputProps = {
+  value: string
+  onChange: (value: string) => void
+  isMarkdownEnabled: boolean
+  disableMarkdown?: boolean
+  height?: number
+  placeholder?: string
+  rows?: number
+  textareaRef?: React.Ref<HTMLTextAreaElement>
+  onTextareaInput?: React.FormEventHandler<HTMLTextAreaElement>
+  textareaClassName?: string
+  editorWrapperClassName?: string
+  editorClassName?: string
+  disabled?: boolean
+  remarkPlugins?: PluggableList
+}
+
+type UiMarkdownEditorProps = {
+  value?: string
+  height?: number
+  onChange?: (value?: string) => void
+  previewOptions?: { remarkPlugins?: unknown[] }
+}
+
+const isTestEnv = typeof process !== 'undefined' && process.env.NODE_ENV === 'test'
+
+const MarkdownEditorTestStub: React.ComponentType<UiMarkdownEditorProps> = ({ value, onChange }) => (
+  <textarea
+    className="min-h-[160px] w-full rounded border px-3 py-2 text-sm"
+    value={value ?? ''}
+    onChange={(event) => onChange?.(event.target.value)}
+  />
+)
+
+const UiMarkdownEditor = isTestEnv
+  ? MarkdownEditorTestStub
+  : (dynamic(() => import('@uiw/react-md-editor'), {
+      ssr: false,
+      loading: () => (
+        <LoadingMessage
+          label="Loading editor..."
+          className="min-h-[220px] justify-center"
+        />
+      ),
+    }) as unknown as React.ComponentType<UiMarkdownEditorProps>)
+
+let markdownPluginsPromise: Promise<PluggableList> | null = null
+
+async function loadMarkdownPlugins(): Promise<PluggableList> {
+  if (isTestEnv) return []
+  if (!markdownPluginsPromise) {
+    markdownPluginsPromise = import('remark-gfm')
+      .then((mod) => [mod.default ?? mod] as PluggableList)
+      .catch(() => [])
+  }
+  return markdownPluginsPromise
+}
+
+export function SwitchableMarkdownInput({
+  value,
+  onChange,
+  isMarkdownEnabled,
+  disableMarkdown,
+  height = 220,
+  placeholder,
+  rows = 3,
+  textareaRef,
+  onTextareaInput,
+  textareaClassName,
+  editorWrapperClassName,
+  editorClassName,
+  disabled,
+  remarkPlugins,
+}: SwitchableMarkdownInputProps) {
+  const [localPlugins, setLocalPlugins] = React.useState<PluggableList>([])
+
+  React.useEffect(() => {
+    if (remarkPlugins) return
+    let active = true
+    void loadMarkdownPlugins().then((plugins) => {
+      if (active) setLocalPlugins(plugins)
+    })
+    return () => { active = false }
+  }, [remarkPlugins])
+
+  const resolvedPlugins = remarkPlugins ?? localPlugins
+  const editorWrapperClasses =
+    editorWrapperClassName ?? 'w-full rounded-lg border border-muted-foreground/20 bg-background p-2'
+  const editorClasses = editorClassName ?? 'w-full'
+  const textareaClasses =
+    textareaClassName
+    ?? 'w-full resize-none overflow-hidden rounded-lg border border-muted-foreground/20 bg-background px-3 py-2 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary'
+
+  if (isMarkdownEnabled && !disableMarkdown) {
+    return (
+      <div className={editorWrapperClasses}>
+        <div data-color-mode="light" className={editorClasses}>
+          <UiMarkdownEditor
+            value={value}
+            height={height}
+            onChange={(nextValue) => onChange(typeof nextValue === 'string' ? nextValue : '')}
+            previewOptions={resolvedPlugins.length ? { remarkPlugins: resolvedPlugins } : undefined}
+          />
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <textarea
+      ref={textareaRef}
+      rows={rows}
+      className={textareaClasses}
+      placeholder={placeholder}
+      value={value}
+      onChange={(event) => onChange(event.target.value)}
+      onInput={onTextareaInput}
+      disabled={disabled}
+    />
+  )
+}

package/src/backend/inputs/TagsInput.tsx

@@ -0,0 +1,259 @@
+"use client"
+
+import * as React from 'react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+
+export type TagsInputOption = {
+  value: string
+  label: string
+  description?: string | null
+}
+
+export type TagsInputProps = {
+  value: string[]
+  onChange: (next: string[]) => void
+  placeholder?: string
+  suggestions?: Array<string | TagsInputOption>
+  loadSuggestions?: (query?: string) => Promise<Array<string | TagsInputOption>>
+  selectedOptions?: TagsInputOption[]
+  resolveLabel?: (value: string) => string
+  resolveDescription?: (value: string) => string | null | undefined
+  autoFocus?: boolean
+  disabled?: boolean
+  allowCustomValues?: boolean
+}
+
+function normalizeOptions(input?: Array<string | TagsInputOption>): TagsInputOption[] {
+  if (!Array.isArray(input)) return []
+  return input
+    .map((option) => {
+      if (typeof option === 'string') {
+        const trimmed = option.trim()
+        if (!trimmed) return null
+        return { value: trimmed, label: trimmed }
+      }
+      const value = typeof option.value === 'string' ? option.value.trim() : ''
+      if (!value) return null
+      return {
+        value,
+        label: option.label?.trim() || value,
+        description: option.description ?? null,
+      }
+    })
+    .filter((option): option is TagsInputOption => !!option)
+}
+
+export function TagsInput({
+  value,
+  onChange,
+  placeholder,
+  suggestions,
+  loadSuggestions,
+  selectedOptions,
+  resolveLabel,
+  resolveDescription,
+  autoFocus,
+  disabled = false,
+  allowCustomValues = true,
+}: TagsInputProps) {
+  const t = useT()
+  const [input, setInput] = React.useState('')
+  const [asyncOptions, setAsyncOptions] = React.useState<TagsInputOption[]>([])
+  const [loading, setLoading] = React.useState(false)
+  const [touched, setTouched] = React.useState(false)
+
+  const staticOptions = React.useMemo(() => normalizeOptions(suggestions), [suggestions])
+  const selectedOptionList = React.useMemo(
+    () => normalizeOptions(selectedOptions),
+    [selectedOptions]
+  )
+
+  const optionMap = React.useMemo(() => {
+    const map = new Map<string, TagsInputOption>()
+    const register = (option: TagsInputOption) => {
+      if (!map.has(option.value)) {
+        map.set(option.value, option)
+      }
+    }
+    staticOptions.forEach(register)
+    asyncOptions.forEach(register)
+    selectedOptionList.forEach(register)
+    value.forEach((val) => {
+      if (map.has(val)) return
+      map.set(val, {
+        value: val,
+        label: resolveLabel?.(val) ?? val,
+        description: resolveDescription?.(val) ?? null,
+      })
+    })
+    return map
+  }, [asyncOptions, resolveDescription, resolveLabel, selectedOptionList, staticOptions, value])
+
+  const availableOptions = React.useMemo(() => {
+    return Array.from(optionMap.values()).filter((option) => !value.includes(option.value))
+  }, [optionMap, value])
+
+  const filteredSuggestions = React.useMemo(() => {
+    const query = input.toLowerCase().trim()
+    if (!query) return availableOptions.slice(0, 8)
+    return availableOptions.filter((option) => {
+      const labelMatch = option.label.toLowerCase().includes(query)
+      const descMatch = option.description?.toLowerCase().includes(query)
+      return labelMatch || Boolean(descMatch)
+    })
+  }, [availableOptions, input])
+
+  React.useEffect(() => {
+    if (!loadSuggestions || !touched || disabled) return
+    const query = input.trim()
+    let cancelled = false
+    const handle = window.setTimeout(async () => {
+      setLoading(true)
+      try {
+        const items = await loadSuggestions(query)
+        if (!cancelled) {
+          setAsyncOptions(normalizeOptions(items))
+        }
+      } finally {
+        if (!cancelled) setLoading(false)
+      }
+    }, 200)
+    return () => {
+      cancelled = true
+      window.clearTimeout(handle)
+    }
+  }, [disabled, input, loadSuggestions, touched])
+
+  const addValue = React.useCallback(
+    (nextValue: string) => {
+      if (disabled) return
+      const trimmed = nextValue.trim()
+      if (!trimmed) return
+      if (value.includes(trimmed)) return
+      onChange([...value, trimmed])
+    },
+    [disabled, onChange, value]
+  )
+
+  const findOptionForInput = React.useCallback(
+    (raw: string): TagsInputOption | null => {
+      const query = raw.trim().toLowerCase()
+      if (!query) return null
+      for (const option of optionMap.values()) {
+        if (option.value === raw.trim()) return option
+        if (option.label.toLowerCase() === query) return option
+      }
+      return null
+    },
+    [optionMap]
+  )
+
+  const addTag = React.useCallback(
+    (raw: string) => {
+      if (disabled) return
+      const option = findOptionForInput(raw)
+      if (option) {
+        addValue(option.value)
+        return
+      }
+      if (!allowCustomValues) return
+      addValue(raw)
+    },
+    [addValue, allowCustomValues, disabled, findOptionForInput]
+  )
+
+  const removeTag = React.useCallback(
+    (tag: string) => {
+      if (disabled) return
+      onChange(value.filter((candidate) => candidate !== tag))
+    },
+    [disabled, onChange, value]
+  )
+
+  return (
+    <div
+      className={[
+        'w-full rounded border px-2 py-1',
+        disabled ? 'bg-muted text-muted-foreground/80 cursor-not-allowed' : '',
+      ]
+        .filter(Boolean)
+        .join(' ')}
+      aria-disabled={disabled || undefined}
+    >
+      <div className="flex flex-wrap gap-1">
+        {value.map((tag) => {
+          const option = optionMap.get(tag)
+          const label = option?.label ?? tag
+          const description = option?.description
+          return (
+            <span key={tag} className="inline-flex items-center gap-2 rounded-sm bg-muted px-2 py-0.5 text-xs">
+              <span className="flex flex-col items-start leading-tight">
+                <span className="whitespace-nowrap">{label}</span>
+                {description ? (
+                  <span className="text-[10px] text-muted-foreground">{description}</span>
+                ) : null}
+              </span>
+              <button
+                type="button"
+                className="opacity-60 transition-opacity hover:opacity-100"
+                onClick={() => removeTag(tag)}
+                disabled={disabled}
+              >
+                ×
+              </button>
+            </span>
+          )
+        })}
+        <input
+          className="flex-1 min-w-[120px] border-0 py-1 text-sm outline-none disabled:bg-transparent"
+          value={input}
+          placeholder={placeholder || t('ui.inputs.tagsInput.placeholder', 'Add tag and press Enter')}
+          autoFocus={autoFocus}
+          data-crud-focus-target=""
+          disabled={disabled}
+          onFocus={() => setTouched(true)}
+          onChange={(event) => {
+            setTouched(true)
+            setInput(event.target.value)
+          }}
+          onKeyDown={(event) => {
+            if (disabled) return
+            if (event.key === 'Enter' || event.key === ',') {
+              event.preventDefault()
+              addTag(input)
+              setInput('')
+            } else if (event.key === 'Backspace' && input === '' && value.length > 0) {
+              removeTag(value[value.length - 1])
+            }
+          }}
+          onBlur={() => {
+            if (disabled) return
+            addTag(input)
+            setInput('')
+          }}
+        />
+        {loading && touched ? (
+          <div className="basis-full mt-1 text-xs text-muted-foreground">Loading suggestions…</div>
+        ) : null}
+        {!loading && filteredSuggestions.length ? (
+          <div className="basis-full mt-1 flex flex-col gap-1">
+            {filteredSuggestions.map((option) => (
+              <button
+                key={option.value}
+                type="button"
+                className="flex flex-col items-start rounded border px-1.5 py-1 text-xs transition hover:bg-muted"
+                onMouseDown={(event) => event.preventDefault()}
+                onClick={() => addValue(option.value)}
+              >
+                <span>{option.label}</span>
+                {option.description ? (
+                  <span className="text-[10px] text-muted-foreground">{option.description}</span>
+                ) : null}
+              </button>
+            ))}
+          </div>
+        ) : null}
+      </div>
+    </div>
+  )
+}

package/src/backend/inputs/index.ts

@@ -0,0 +1,5 @@
+export * from './PhoneNumberField'
+export * from './TagsInput'
+export * from './LookupSelect'
+export * from './ComboboxInput'
+export * from './SwitchableMarkdownInput'

package/src/backend/operations/LastOperationBanner.tsx

@@ -0,0 +1,85 @@
+"use client"
+import * as React from 'react'
+import { Undo2 } from 'lucide-react'
+import { useRouter } from 'next/navigation'
+import { Button } from '../../primitives/button'
+import { apiCall } from '../utils/apiCall'
+import { flash } from '../FlashMessages'
+import { useLastOperation, markUndoSuccess } from './store'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+
+export function LastOperationBanner() {
+  const t = useT()
+  const operation = useLastOperation()
+  const [pendingToken, setPendingToken] = React.useState<string | null>(null)
+  const router = useRouter()
+
+  if (!operation) return null
+
+  const rawLabel = operation.actionLabel ?? operation.commandId
+  const translatedLabel = t(rawLabel)
+  const label = translatedLabel === rawLabel ? rawLabel : translatedLabel
+  const isPending = pendingToken === operation.undoToken
+
+  async function handleUndo() {
+    const undoToken = operation?.undoToken
+    if (!undoToken || isPending) return
+    setPendingToken(undoToken)
+    try {
+      const call = await apiCall<Record<string, unknown>>('/api/audit_logs/audit-logs/actions/undo', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ undoToken }),
+      })
+      if (!call.ok) {
+        const message =
+          (call.result && typeof call.result.error === 'string' && call.result.error) ||
+          ''
+        throw new Error(message || t('audit_logs.banner.undo_failed', 'Failed to undo'))
+      }
+      markUndoSuccess(undoToken)
+      flash(t('audit_logs.banner.undo_success'), 'success')
+      router.refresh()
+      if (typeof window !== 'undefined') {
+        try {
+          const isJSDOM = typeof navigator !== 'undefined' && typeof navigator.userAgent === 'string'
+            ? navigator.userAgent.toLowerCase().includes('jsdom')
+            : false
+          if (!isJSDOM && typeof window.location?.reload === 'function') {
+            window.location.reload()
+          }
+        } catch {
+          // noop in non-browser or jsdom environments
+        }
+      }
+    } catch (err) {
+      const message = err instanceof Error && err.message ? err.message : t('audit_logs.banner.undo_error')
+      flash(message, 'error')
+    } finally {
+      setPendingToken(null)
+    }
+  }
+
+  return (
+    <div className="mb-4 flex items-center justify-between gap-3 rounded-md border border-amber-300 bg-amber-50 px-3 py-2 text-sm text-amber-900">
+      <div className="min-w-0 truncate">
+        <span className="font-medium text-amber-950">
+          {t('audit_logs.banner.last_operation')}
+        </span>
+        <span className="ml-2 truncate text-amber-900">
+          {label}
+        </span>
+      </div>
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() => { void handleUndo() }}
+        disabled={isPending}
+        className="border-amber-300 text-amber-900 hover:bg-amber-100"
+      >
+        <Undo2 className="mr-1 size-4" aria-hidden="true" />
+        {isPending ? t('audit_logs.actions.undoing') : t('audit_logs.banner.undo')}
+      </Button>
+    </div>
+  )
+}

package/src/backend/operations/__tests__/LastOperationBanner.test.tsx

@@ -0,0 +1,99 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import * as React from 'react'
+import { fireEvent, screen, waitFor } from '@testing-library/react'
+import { renderWithProviders } from '@open-mercato/shared/lib/testing/renderWithProviders'
+import { LastOperationBanner } from '../LastOperationBanner'
+import { apiCall } from '../../utils/apiCall'
+import { flash } from '../../FlashMessages'
+import { markUndoSuccess, useLastOperation } from '../store'
+
+jest.mock('../../utils/apiCall', () => ({
+  apiCall: jest.fn(),
+}))
+
+jest.mock('../../FlashMessages', () => ({
+  flash: jest.fn(),
+}))
+
+jest.mock('../store', () => ({
+  useLastOperation: jest.fn(),
+  markUndoSuccess: jest.fn(),
+}))
+
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({
+    refresh: jest.fn(),
+  }),
+}))
+
+const mockOperation = {
+  actionLabel: 'audit_logs.actions.create',
+  commandId: 'users.create',
+  undoToken: 'token-123',
+}
+
+const createMockResponse = (status: number): Response => ({ status } as Response)
+
+const dict = {
+  'audit_logs.banner.last_operation': 'Last operation',
+  'audit_logs.banner.undo': 'Undo',
+  'audit_logs.actions.undoing': 'Undoing…',
+  'audit_logs.banner.undo_success': 'Undo completed',
+  'audit_logs.banner.undo_error': 'Undo failed',
+  'audit_logs.actions.create': 'Created user',
+}
+
+describe('LastOperationBanner', () => {
+  beforeEach(() => {
+    jest.resetAllMocks()
+    ;(useLastOperation as jest.Mock).mockReturnValue(mockOperation)
+  })
+
+  it('renders nothing when there is no operation', () => {
+    ;(useLastOperation as jest.Mock).mockReturnValue(null)
+    const { container } = renderWithProviders(<LastOperationBanner />, { dict })
+    expect(container).toBeEmptyDOMElement()
+  })
+
+  it('shows translated label and handles successful undo', async () => {
+    ;(apiCall as jest.Mock).mockResolvedValue({
+      ok: true,
+      status: 200,
+      result: {},
+      response: createMockResponse(200),
+    })
+
+    renderWithProviders(<LastOperationBanner />, { dict })
+
+    expect(screen.getByText('Last operation')).toBeInTheDocument()
+    fireEvent.click(screen.getByRole('button', { name: /undo/i }))
+
+    await waitFor(() => {
+      expect(apiCall).toHaveBeenCalledWith('/api/audit_logs/audit-logs/actions/undo', expect.objectContaining({
+        method: 'POST',
+      }))
+    })
+    expect(markUndoSuccess).toHaveBeenCalledWith('token-123')
+    expect(flash).toHaveBeenCalledWith('Undo completed', 'success')
+  })
+
+  it('surfaces undo errors from the API', async () => {
+    ;(apiCall as jest.Mock).mockResolvedValue({
+      ok: false,
+      status: 500,
+      result: { error: 'failed' },
+      response: createMockResponse(500),
+    })
+
+    renderWithProviders(<LastOperationBanner />, { dict })
+    fireEvent.click(screen.getByRole('button', { name: /undo/i }))
+
+    await waitFor(() => {
+      expect(flash).toHaveBeenCalledWith('failed', 'error')
+    })
+    expect(markUndoSuccess).not.toHaveBeenCalled()
+  })
+})