@datatechsolutions/tympan 0.3.0 → 0.4.0

package/src/components/schema-request-form/SchemaRequestForm.css

@@ -0,0 +1,75 @@
+/* SchemaRequestForm (spec: wave-2/schema-request-form.md; design direction §2.1, §2.3, §2.4, §2.10). */
+@layer tympan.components {
+  .ty-request-form {
+    --ty-request-accent: var(--ty-info);
+    display: flex;
+    flex-direction: column;
+    gap: var(--ty-space-4);
+    padding: var(--ty-space-5);
+    border: 1px solid var(--ty-line);
+    border-inline-start: 3px solid var(--ty-request-accent);
+    border-radius: var(--ty-radius-card);
+    background: var(--ty-surface-raised);
+    box-shadow: var(--ty-shadow-raised);
+  }
+  .ty-request-form[data-tone='warning'] {
+    --ty-request-accent: var(--ty-warning);
+  }
+  .ty-request-form[data-tone='success'] {
+    --ty-request-accent: var(--ty-success);
+  }
+  .ty-request-form[data-tone='danger'] {
+    --ty-request-accent: var(--ty-danger);
+  }
+  .ty-request-form__prompt {
+    margin: 0;
+    color: var(--ty-ink);
+    font-family: var(--ty-font-serif);
+    font-size: var(--ty-font-size-h3);
+    font-weight: var(--ty-font-weight-semibold);
+    line-height: var(--ty-font-line-height-h3);
+  }
+  .ty-request-form__description {
+    max-inline-size: calc(var(--ty-measure-prose) * 1ch);
+    color: var(--ty-ink-2);
+    font-size: var(--ty-font-size-body);
+    line-height: var(--ty-font-line-height-body);
+  }
+  .ty-request-form__form,
+  .ty-request-form__fields {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ty-space-4);
+  }
+  .ty-request-form__actions {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    gap: var(--ty-space-3);
+  }
+  .ty-request-form__resolution {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--ty-space-2);
+    margin: 0;
+    color: var(--ty-ink-2);
+  }
+
+  @media (max-width: 639.98px) {
+    .ty-request-form__actions {
+      flex-direction: column;
+      align-items: stretch;
+    }
+    .ty-request-form__actions > * {
+      inline-size: 100%;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .ty-request-form {
+      border: 1px solid CanvasText;
+      border-inline-start-width: 3px;
+    }
+  }
+}

package/src/components/schema-request-form/SchemaRequestForm.test.tsx

@@ -0,0 +1,138 @@
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+import { expectNoAxeViolations } from '../../../test/axe'
+import { cssOf, mediaBlock } from '../../../test/css'
+import { ThemeScope } from '../../internal/ThemeScope'
+import { SchemaRequestForm, type InputRequest } from './SchemaRequestForm'
+import * as rtlDom from '@testing-library/react'
+import { expectNoAxeViolations as axeRtl } from '../../../test/axe'
+import { renderRtl } from '../../../test/rtl'
+
+const request: InputRequest = {
+  stepId: 'verify-1',
+  prompt: 'Does the station file confirm the PM2.5 mean?',
+  description: 'Centro, Vila Aurora, 2024',
+  fields: [
+    { key: 'excerpt', kind: 'text', label: 'Quoted excerpt', required: true },
+    { key: 'pages', kind: 'number', label: 'Page', min: 0 },
+    { key: 'verdict', kind: 'choice', label: 'Verdict', options: [{ value: 'proved', label: 'Proved' }, { value: 'refuted', label: 'Refuted' }], default: 'proved' },
+    { key: 'confident', kind: 'boolean', label: 'I opened the source', default: true },
+    { key: 'reason', kind: 'longText', label: 'Reason' },
+  ],
+}
+
+describe('SchemaRequestForm', () => {
+  it('blocks an empty required field and focuses it', async () => {
+    const submit = vi.fn()
+    render(<SchemaRequestForm runId="r1" request={request} submit={submit} />)
+    await userEvent.type(screen.getByRole('spinbutton', { name: 'Page' }), '-2')
+    await userEvent.click(screen.getByRole('button', { name: 'Submit' }))
+    const excerpt = screen.getByRole('textbox', { name: /Quoted excerpt/ })
+    expect(excerpt).toHaveAttribute('aria-invalid', 'true')
+    expect(excerpt).toHaveFocus()
+    expect(screen.getByText('Enter 0 or more.')).toBeInTheDocument()
+    expect(submit).not.toHaveBeenCalled()
+  })
+
+  it('submits approved with the payload keys, dropping empty strings', async () => {
+    const submit = vi.fn(async () => {})
+    const onResolved = vi.fn()
+    render(<SchemaRequestForm runId="r1" request={request} submit={submit} onResolved={onResolved} />)
+    await userEvent.type(screen.getByRole('textbox', { name: /Quoted excerpt/ }), 'launched in 2024')
+    await userEvent.type(screen.getByRole('spinbutton', { name: 'Page' }), '3')
+    await userEvent.click(screen.getByRole('button', { name: 'Submit' }))
+    expect(submit).toHaveBeenCalledWith('r1', 'verify-1', {
+      approved: true,
+      payload: { excerpt: 'launched in 2024', pages: 3, verdict: 'proved', confident: true },
+    })
+    await waitFor(() => expect(onResolved).toHaveBeenCalledTimes(1))
+  })
+
+  it('rejects with the reason field, ignoring required fields', async () => {
+    const submit = vi.fn(async () => {})
+    render(<SchemaRequestForm runId="r1" request={request} submit={submit} />)
+    await userEvent.type(screen.getByRole('textbox', { name: 'Reason' }), 'Source is offline')
+    await userEvent.click(screen.getByRole('button', { name: 'Reject' }))
+    expect(submit).toHaveBeenCalledWith('r1', 'verify-1', { approved: false, reason: 'Source is offline' })
+  })
+
+  it('uses a generic reason when there is no reason value', async () => {
+    const submit = vi.fn(async () => {})
+    render(<SchemaRequestForm runId="r1" request={{ ...request, fields: request.fields.slice(0, 1) }} submit={submit} />)
+    await userEvent.click(screen.getByRole('button', { name: 'Reject' }))
+    expect(submit).toHaveBeenCalledWith('r1', 'verify-1', { approved: false, reason: 'Rejected by the reviewer' })
+  })
+
+  it('hides reject when rejectLabel is null', () => {
+    render(<SchemaRequestForm runId="r1" request={{ ...request, rejectLabel: null }} submit={vi.fn()} />)
+    expect(screen.queryByRole('button', { name: 'Reject' })).toBeNull()
+  })
+
+  it('shows an alert on failure and keeps the fields editable', async () => {
+    const submit = vi.fn(async () => {
+      throw new Error('Conflict: someone answered first')
+    })
+    render(<SchemaRequestForm runId="r1" request={request} submit={submit} />)
+    const excerpt = screen.getByRole('textbox', { name: /Quoted excerpt/ })
+    await userEvent.type(excerpt, 'x')
+    await userEvent.click(screen.getByRole('button', { name: 'Submit' }))
+    expect(await screen.findByRole('alert')).toHaveTextContent('Conflict: someone answered first')
+    expect(excerpt).toBeEnabled()
+    expect(excerpt).toHaveValue('x')
+  })
+
+  it('ignores a second activation while sending and disables the controls', async () => {
+    let finish: () => void = () => {}
+    const submit = vi.fn(() => new Promise<void>((r) => (finish = r)))
+    render(<SchemaRequestForm runId="r1" request={request} submit={submit} />)
+    await userEvent.type(screen.getByRole('textbox', { name: /Quoted excerpt/ }), 'x{Enter}')
+    const busy = screen.getByRole('button', { name: 'Sending' })
+    expect(busy).toHaveAttribute('aria-busy', 'true')
+    await userEvent.click(busy)
+    expect(submit).toHaveBeenCalledTimes(1)
+    expect(screen.getByRole('textbox', { name: /Quoted excerpt/ })).toBeDisabled()
+    finish()
+    expect(await screen.findByRole('status')).toHaveTextContent('Answer sent. The run resumed.')
+  })
+
+  it('replaces the buttons with a status sentence after success', async () => {
+    const onResolved = vi.fn()
+    render(<SchemaRequestForm runId="r1" request={request} submit={async () => {}} onResolved={onResolved} />)
+    await userEvent.type(screen.getByRole('textbox', { name: /Quoted excerpt/ }), 'x')
+    await userEvent.click(screen.getByRole('button', { name: 'Submit' }))
+    expect(await screen.findByRole('status')).toHaveTextContent('Approved')
+    expect(screen.queryByRole('button', { name: 'Submit' })).toBeNull()
+    expect(onResolved).toHaveBeenCalledTimes(1)
+    expect(onResolved).toHaveBeenCalledWith({ approved: true, payload: expect.objectContaining({ excerpt: 'x' }) })
+  })
+
+  it('stacks the actions full width below 640 px and keeps the accent in forced colours', () => {
+    const css = cssOf('components/schema-request-form/SchemaRequestForm.css')
+    expect(mediaBlock(css, /\(max-width:\s*639\.98px\)/)).toMatch(/inline-size:\s*100%/)
+    expect(mediaBlock(css, /\(forced-colors:\s*active\)/)).toMatch(/border/)
+  })
+
+  it('has no axe violations, light and dark', async () => {
+    const { container } = render(
+      <>
+        {(['light', 'dark'] as const).map((scheme) => (
+          <ThemeScope key={scheme} scheme={scheme}>
+            <SchemaRequestForm runId={`r-${scheme}`} request={{ ...request, prompt: `${request.prompt} (${scheme})` }} submit={async () => {}} />
+          </ThemeScope>
+        ))}
+      </>,
+    )
+    await expectNoAxeViolations(container)
+  })
+})
+
+describe('SchemaRequestForm in right-to-left (ar)', () => {
+  it('renders mirrored where directional and passes axe', async () => {
+    const { container } = renderRtl(
+      <SchemaRequestForm runId="run-1" request={{ stepId: 's', prompt: 'هل يؤكد المصدر السنة؟', fields: [{ key: 'page', kind: 'number', label: 'الصفحة', min: 1 }] }} submit={vi.fn()} />,
+    )
+    expect(rtlDom.screen.getByText('هل يؤكد المصدر السنة؟')).toBeInTheDocument()
+    await axeRtl(container)
+  })
+})

package/src/components/schema-request-form/SchemaRequestForm.tsx

@@ -0,0 +1,231 @@
+import { useEffect, useId, useRef, useState, type ReactNode } from 'react'
+import { Form } from 'react-aria-components'
+import { cx } from '../../internal/cx'
+import { useMessages } from '../../internal/provider'
+import type { Messages } from '../../internal/messages'
+import { Button } from '../button/Button'
+import { Checkbox } from '../checkbox/Checkbox'
+import { InlineNotice } from '../inline-notice/InlineNotice'
+import { NativeSelect } from '../native-select/NativeSelect'
+import { StatusPill } from '../status-pill/StatusPill'
+import { TextArea } from '../text-area/TextArea'
+import { TextField } from '../text-field/TextField'
+
+interface FieldBase {
+  key: string
+  label: string
+  required?: boolean
+  help?: string
+}
+export type RequestField =
+  | (FieldBase & { kind: 'text'; placeholder?: string; default?: string })
+  | (FieldBase & { kind: 'number'; min?: number; max?: number; step?: number; default?: number })
+  | (FieldBase & { kind: 'longText'; rows?: number; default?: string })
+  | (FieldBase & { kind: 'choice'; options: { value: string; label: string }[]; default?: string })
+  | (FieldBase & { kind: 'boolean'; default?: boolean })
+
+export interface InputRequest {
+  stepId: string
+  prompt: string
+  description?: ReactNode
+  fields: RequestField[]
+  submitLabel?: string
+  /** null hides the reject button. */
+  rejectLabel?: string | null
+  tone?: 'info' | 'warning' | 'success' | 'danger'
+}
+
+export interface RequestDecision {
+  approved: boolean
+  payload?: Record<string, unknown>
+  reason?: string
+}
+
+export interface SchemaRequestFormProps {
+  runId: string
+  request: InputRequest
+  submit: (runId: string, stepId: string, decision: RequestDecision) => Promise<void>
+  onResolved?: (result: { approved: boolean; payload: Record<string, unknown> }) => void
+  className?: string
+}
+
+type Values = Record<string, string | boolean>
+type Phase = { kind: 'editing' } | { kind: 'sending'; approved: boolean } | { kind: 'resolved'; approved: boolean } | { kind: 'failed'; message: string }
+
+function initialValues(fields: RequestField[]): Values {
+  const out: Values = {}
+  for (const f of fields) out[f.key] = f.kind === 'boolean' ? !!f.default : f.default != null ? String(f.default) : ''
+  return out
+}
+
+/** Error text per invalid field (empty object when everything passes). */
+function check(fields: RequestField[], values: Values, t: Messages['requestForm']): Record<string, string> {
+  const errors: Record<string, string> = {}
+  for (const f of fields) {
+    const v = values[f.key]
+    if (f.kind === 'boolean') {
+      if (f.required && v !== true) errors[f.key] = t.required
+      continue
+    }
+    const text = typeof v === 'string' ? v.trim() : ''
+    if (!text) {
+      if (f.required) errors[f.key] = t.required
+      continue
+    }
+    if (f.kind === 'number') {
+      const n = Number(text)
+      if (!Number.isFinite(n)) errors[f.key] = t.notNumber
+      else if (f.min != null && n < f.min) errors[f.key] = t.atLeast(f.min)
+      else if (f.max != null && n > f.max) errors[f.key] = t.atMost(f.max)
+    }
+  }
+  return errors
+}
+
+/** Payload for an approval: typed values, empty strings dropped. */
+function payloadOf(fields: RequestField[], values: Values): Record<string, unknown> {
+  const out: Record<string, unknown> = {}
+  for (const f of fields) {
+    const v = values[f.key]
+    if (f.kind === 'boolean') out[f.key] = v === true
+    else if (typeof v === 'string' && v.trim() !== '') out[f.key] = f.kind === 'number' ? Number(v) : v
+  }
+  return out
+}
+
+/** One control for one schema entry, chosen by kind. */
+function RequestControl(props: { field: RequestField; value: string | boolean; error?: string; locked: boolean; placeholder: string; onValue: (v: string | boolean) => void }) {
+  const { field: f, error, locked } = props
+  const text = typeof props.value === 'string' ? props.value : ''
+  switch (f.kind) {
+    case 'boolean':
+      return <Checkbox label={f.label} description={f.help} isSelected={props.value === true} onChange={props.onValue} errorMessage={error} disabled={locked} required={f.required} />
+    case 'longText':
+      return <TextArea label={f.label} hint={f.help} rows={f.rows ?? 3} value={text} onChange={props.onValue} errorMessage={error} disabled={locked} required={f.required} />
+    case 'choice':
+      return <NativeSelect label={f.label} hint={f.help} options={f.options} placeholder={props.placeholder} value={text} onChange={props.onValue} errorMessage={error} disabled={locked} required={f.required} />
+    default:
+      return (
+        <TextField
+          label={f.label}
+          hint={f.help}
+          inputType={f.kind === 'number' ? 'number' : 'text'}
+          placeholder={f.kind === 'text' ? f.placeholder : undefined}
+          value={text}
+          onChange={props.onValue}
+          errorMessage={error}
+          disabled={locked}
+          required={f.required}
+        />
+      )
+  }
+}
+
+/**
+ * A form rendered from a small field schema that answers a paused run's
+ * request for input (spec: wave-2/schema-request-form.md).
+ */
+export function SchemaRequestForm({ runId, request, submit, onResolved, className }: SchemaRequestFormProps) {
+  const t = useMessages().requestForm
+  const [values, setValues] = useState<Values>(() => initialValues(request.fields))
+  const [errors, setErrors] = useState<Record<string, string>>({})
+  const [phase, setPhase] = useState<Phase>({ kind: 'editing' })
+  const inFlight = useRef(false)
+  const bodyRef = useRef<HTMLDivElement>(null)
+  const focusKey = useRef<string | null>(null)
+  const titleId = useId()
+  const locked = phase.kind === 'sending' || phase.kind === 'resolved'
+
+  useEffect(() => {
+    if (!focusKey.current) return
+    const target = bodyRef.current?.querySelector<HTMLElement>(`[data-request-key="${CSS.escape(focusKey.current)}"] :is(input, select, textarea)`)
+    focusKey.current = null
+    target?.focus()
+  }, [errors])
+
+  const send = async (decision: RequestDecision) => {
+    if (inFlight.current || phase.kind === 'resolved') return
+    inFlight.current = true
+    setPhase({ kind: 'sending', approved: decision.approved })
+    try {
+      await submit(runId, request.stepId, decision)
+      setPhase({ kind: 'resolved', approved: decision.approved })
+      onResolved?.({ approved: decision.approved, payload: decision.payload ?? {} })
+    } catch (err) {
+      setPhase({ kind: 'failed', message: (err instanceof Error && err.message) || t.failed })
+    } finally {
+      inFlight.current = false
+    }
+  }
+
+  const approve = () => {
+    const found = check(request.fields, values, t)
+    setErrors(found)
+    const first = request.fields.find((f) => found[f.key])
+    if (first) {
+      focusKey.current = first.key
+      return
+    }
+    void send({ approved: true, payload: payloadOf(request.fields, values) })
+  }
+  const reject = () => {
+    const reason = typeof values.reason === 'string' && values.reason.trim() ? values.reason.trim() : t.defaultReason
+    void send({ approved: false, reason })
+  }
+
+  const sending = phase.kind === 'sending'
+  return (
+    <section className={cx('ty-request-form', className)} data-tone={request.tone ?? 'info'} aria-labelledby={titleId}>
+      <h3 id={titleId} className="ty-request-form__prompt">
+        {request.prompt}
+      </h3>
+      {request.description ? <div className="ty-request-form__description">{request.description}</div> : null}
+      {phase.kind === 'failed' ? (
+        <InlineNotice tone="danger" urgency="assertive">
+          {phase.message}
+        </InlineNotice>
+      ) : null}
+      <Form
+        className="ty-request-form__form"
+        validationBehavior="aria"
+        aria-labelledby={titleId}
+        onSubmit={(e) => {
+          e.preventDefault()
+          approve()
+        }}
+      >
+        <div ref={bodyRef} className="ty-request-form__fields">
+          {request.fields.map((field) => (
+            <div key={field.key} data-request-key={field.key}>
+              <RequestControl
+                field={field}
+                value={values[field.key] ?? ''}
+                error={errors[field.key]}
+                locked={locked}
+                placeholder={t.choose}
+                onValue={(v) => setValues((prev) => ({ ...prev, [field.key]: v }))}
+              />
+            </div>
+          ))}
+        </div>
+        {phase.kind === 'resolved' ? (
+          <p className="ty-request-form__resolution" role="status">
+            <StatusPill status={phase.approved ? 'approved' : 'rejected'} label={phase.approved ? t.approved : t.rejected} tone={phase.approved ? 'success' : 'neutral'} />
+            <span>{phase.approved ? t.approvedSentence : t.rejectedSentence}</span>
+          </p>
+        ) : (
+          <div className="ty-request-form__actions">
+            {request.rejectLabel === null ? null : (
+              <Button variant="secondary" disabled={sending} busy={sending && phase.approved === false} busyLabel={t.sending} onPress={reject}>
+                {request.rejectLabel ?? t.reject}
+              </Button>
+            )}
+            <Button variant="primary" type="submit" busy={sending && phase.approved} disabled={sending && !phase.approved} busyLabel={t.sending}>
+              {request.submitLabel ?? t.submit}
+            </Button>
+          </div>
+        )}
+      </Form>
+    </section>
+  )
+}

package/src/components/search-bar/SearchBar.css

@@ -0,0 +1,117 @@
+/* SearchBar (spec: wave-2/search-bar.md; design direction §2.3, §2.10, §3.6). */
+@layer tympan.components {
+  .ty-search-bar {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-areas: 'main actions' 'chips chips';
+    align-items: center;
+    gap: var(--ty-space-3) var(--ty-space-4);
+    padding-block-end: var(--ty-space-3);
+  }
+  .ty-search-bar[data-bordered] {
+    border-block-end: 1px solid var(--ty-line);
+  }
+  .ty-search-bar__main {
+    grid-area: main;
+    display: flex;
+    align-items: center;
+    gap: var(--ty-space-2);
+    min-inline-size: 0;
+  }
+  .ty-search-bar__field {
+    flex: 1;
+  }
+  .ty-search-bar__chips {
+    grid-area: chips;
+  }
+  .ty-search-bar__actions {
+    grid-area: actions;
+    display: flex;
+    align-items: center;
+    gap: var(--ty-space-2);
+  }
+  .ty-search-bar__text-action {
+    position: relative;
+    min-block-size: var(--ty-control-height);
+    padding-inline: var(--ty-space-2);
+    border: 0;
+    border-radius: var(--ty-radius-control);
+    background: transparent;
+    color: var(--ty-accent);
+    font: inherit;
+    font-size: var(--ty-font-size-body);
+    font-weight: var(--ty-font-weight-semibold);
+    white-space: nowrap;
+    cursor: pointer;
+    outline: none;
+    transition: opacity var(--ty-dur-instant) var(--ty-ease);
+  }
+  .ty-search-bar__text-action::before {
+    content: '';
+    position: absolute;
+    inset-block-start: 50%;
+    /* physical: centring with translate(-50%) is the same in both directions */
+    left: 50%;
+    inline-size: max(100%, var(--ty-control-target));
+    block-size: max(100%, var(--ty-control-target));
+    transform: translate(-50%, -50%);
+  }
+  .ty-search-bar__text-action[data-hovered] {
+    color: var(--ty-accent-strong);
+  }
+  .ty-search-bar__text-action[data-focus-visible] {
+    outline: var(--ty-focus-width) solid var(--ty-focus-ring);
+    outline-offset: 2px;
+  }
+  .ty-search-bar__count {
+    display: inline-grid;
+    place-items: center;
+    min-inline-size: 20px;
+    block-size: 20px;
+    padding-inline: var(--ty-space-1);
+    border-radius: var(--ty-radius-pill);
+    background: var(--ty-accent-soft);
+    color: var(--ty-on-accent-soft);
+    font-size: var(--ty-font-size-meta);
+    font-variant-numeric: tabular-nums;
+  }
+  .ty-search-bar__context {
+    display: flex;
+    align-items: center;
+    gap: var(--ty-space-2);
+    margin: 0 0 var(--ty-space-4);
+    color: var(--ty-ink-3);
+    font-size: var(--ty-font-size-meta);
+  }
+  .ty-search-bar__context-label {
+    color: var(--ty-ink-2);
+    font-weight: var(--ty-font-weight-semibold);
+  }
+  .ty-search-bar__drawer-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--ty-space-2);
+    margin-block-start: var(--ty-space-5);
+  }
+
+  /* Under 640: chips wrap below and the trailing slot moves under them. */
+  @media (max-width: 639.98px) {
+    .ty-search-bar {
+      grid-template-columns: minmax(0, 1fr);
+      grid-template-areas: 'main' 'chips' 'actions';
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .ty-search-bar__text-action {
+      transition: none;
+    }
+  }
+  @media (forced-colors: active) {
+    .ty-search-bar[data-bordered] {
+      border-block-end-color: CanvasText;
+    }
+    .ty-search-bar__count {
+      border: 1px solid ButtonText;
+    }
+  }
+}