@proteos/ui 0.79.0 → 0.80.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proteos/ui",
-  "version": "0.79.0",
+  "version": "0.80.0",
   "license": "FSL-1.1-Apache-2.0",
   "description": "Proteos React component library (React Aria Components + Tailwind v4).",
   "repository": {
@@ -57,7 +57,7 @@
     "tailwindcss": "^4.2.4",
     "thinking-orbs": "^0.3.1",
     "wavesurfer.js": "8.0.5",
-    "@proteos/sdk": "0.79.0"
+    "@proteos/sdk": "0.80.0"
   },
   "devDependencies": {
     "@biomejs/biome": "^2.4.13",

package/src/components/ava-action-review/ava-action-review.stories.tsx

@@ -0,0 +1,313 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { type ReactNode, useState } from 'react'
+
+import { Badge } from '../badge/badge'
+import { Button } from '../button/button'
+import { GlowFrame } from '../glow-frame/glow-frame'
+import { Input } from '../input/input'
+import { Modal, ModalBody, ModalContent, ModalHeader, ModalTitle } from '../modal/modal'
+import { Select } from '../select/select'
+import { Textarea } from '../textarea/textarea'
+import {
+  AvaActionReview,
+  AvaActionReviewActions,
+  AvaActionReviewAddField,
+  AvaActionReviewBody,
+  AvaActionReviewErrors,
+  AvaActionReviewFooter,
+  AvaActionReviewHead,
+  AvaActionReviewProblem,
+  AvaActionReviewReason,
+  AvaActionReviewRow,
+  type AvaActionReviewRowState,
+  AvaActionReviewRows,
+  AvaActionReviewSummary,
+  AvaActionReviewTitle,
+} from './ava-action-review'
+
+const meta: Meta<typeof AvaActionReviewRow> = {
+  title: 'Components/AvaActionReview',
+  component: AvaActionReviewRow,
+  tags: ['autodocs'],
+  argTypes: {
+    state: { control: 'radio', options: ['changed', 'added', 'unresolved', 'rejected', 'removed'] },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof AvaActionReviewRow>
+
+const STATUS_OPTIONS = [
+  { id: 'open', label: 'Open' },
+  { id: 'won', label: 'Won' },
+  { id: 'churned', label: 'Churned' },
+] as const
+
+function ReadOnly({ children }: { children: ReactNode }) {
+  return (
+    <div className="flex min-h-8 items-center rounded-md bg-surface-2 px-2.5 py-1.5 text-[13px] text-ink">
+      {children}
+    </div>
+  )
+}
+
+export const Row: Story = {
+  args: {
+    label: 'Status',
+    from: <ReadOnly>Open</ReadOnly>,
+    to: <ReadOnly>Churned</ReadOnly>,
+    state: 'changed',
+    onRemove: () => {},
+    onRestore: () => {},
+  },
+}
+
+const LONG_FROM =
+  'Waiting on legal to confirm the updated data-processing terms before the renewal goes to procurement.'
+const LONG_TO =
+  'Send the countersigned order form to procurement on Monday, then book the handover call with the customer success lead.'
+const SUMMARY =
+  'Marks the renewal as won and raises the amount by 10% to match the signed order form.'
+const ADD_GROUPS = [
+  {
+    label: 'On this form',
+    options: [
+      { id: 'probability', label: 'Probability' },
+      { id: 'renewal', label: 'Renewal date' },
+    ],
+  },
+  { label: 'More fields', options: [{ id: 'competitor', label: 'Competitor' }] },
+]
+
+function ReviewContent() {
+  const [status, setStatus] = useState('churned')
+  const [amount, setAmount] = useState('13200')
+  const [removed, setRemoved] = useState<Record<string, boolean>>({})
+  const stateFor = (key: string, fallback: AvaActionReviewRowState = 'changed') =>
+    removed[key] ? 'removed' : fallback
+  const toggle = (key: string, value: boolean) => setRemoved((prev) => ({ ...prev, [key]: value }))
+  return (
+    <AvaActionReview>
+      <AvaActionReviewHead>
+        <AvaActionReviewTitle eyebrow="Update">Renewal — Acme GmbH</AvaActionReviewTitle>
+        <AvaActionReviewSummary>{SUMMARY}</AvaActionReviewSummary>
+      </AvaActionReviewHead>
+      <AvaActionReviewBody>
+        <AvaActionReviewErrors
+          errors={['“Created at” is managed by the platform and cannot be changed.']}
+        />
+        <AvaActionReviewRows>
+          <AvaActionReviewRow
+            label="Status"
+            state={stateFor('status')}
+            from={
+              <ReadOnly>
+                <Badge>Open</Badge>
+              </ReadOnly>
+            }
+            to={
+              <Select
+                size="sm"
+                aria-label="Status"
+                options={STATUS_OPTIONS}
+                selectedKey={status}
+                onSelectionChange={(key) => setStatus(String(key))}
+              />
+            }
+            onRemove={() => toggle('status', true)}
+            onRestore={() => toggle('status', false)}
+          />
+          <AvaActionReviewRow
+            label="Amount"
+            state={stateFor('amount')}
+            from={<ReadOnly>12,000</ReadOnly>}
+            to={<Input size="sm" aria-label="Amount" value={amount} onChange={setAmount} />}
+            onRemove={() => toggle('amount', true)}
+            onRestore={() => toggle('amount', false)}
+          />
+          <AvaActionReviewRow
+            label="Owner"
+            state={stateFor('owner', 'unresolved')}
+            from={<ReadOnly>Lena Hartmann</ReadOnly>}
+            to={<Input size="sm" aria-label="Owner" placeholder="Pick a user…" />}
+            hint="“Julia” matches two people. Pick the user."
+            onRemove={() => toggle('owner', true)}
+            onRestore={() => toggle('owner', false)}
+          />
+          <AvaActionReviewRow
+            label="Tier"
+            state="rejected"
+            to={
+              <span className="text-[12.5px] text-danger">
+                “Platinum” is not an option. Choose Silver or Gold.
+              </span>
+            }
+          />
+          <AvaActionReviewRow
+            label="Next step"
+            isLong
+            state={stateFor('next')}
+            from={<ReadOnly>{LONG_FROM}</ReadOnly>}
+            to={<Textarea size="sm" aria-label="Next step" rows={3} defaultValue={LONG_TO} />}
+            onRemove={() => toggle('next', true)}
+            onRestore={() => toggle('next', false)}
+          />
+          <AvaActionReviewRow
+            label="Probability"
+            state="added"
+            from={<ReadOnly>60</ReadOnly>}
+            to={<Input size="sm" aria-label="Probability" defaultValue="60" />}
+            onRemove={() => {}}
+          />
+        </AvaActionReviewRows>
+      </AvaActionReviewBody>
+      <AvaActionReviewFooter>
+        <AvaActionReviewAddField groups={ADD_GROUPS} onPick={() => {}} />
+        <AvaActionReviewActions>
+          <Button variant="ghost" size="sm">
+            Cancel
+          </Button>
+          <Button variant="cta" size="sm">
+            Apply 3 changes
+          </Button>
+        </AvaActionReviewActions>
+      </AvaActionReviewFooter>
+    </AvaActionReview>
+  )
+}
+
+/** Drag the corner: below 448px of width the cells stack. */
+export const Review: Story = {
+  parameters: { controls: { hideNoControlsWarning: true } },
+  render: () => (
+    <div className="h-[560px] w-[320px] min-w-[240px] max-w-[768px] resize-x overflow-hidden rounded-md border border-rule bg-surface">
+      <ReviewContent />
+    </div>
+  ),
+}
+
+export const Wide: Story = {
+  parameters: { controls: { hideNoControlsWarning: true } },
+  render: () => (
+    <div className="h-[640px] w-[672px] overflow-hidden rounded-md border border-rule bg-surface">
+      <ReviewContent />
+    </div>
+  ),
+}
+
+/** The foot stays at the bottom right when the rows are few. */
+export const ShortInTallHost: Story = {
+  parameters: { controls: { hideNoControlsWarning: true } },
+  render: () => (
+    <div className="h-[560px] w-[320px] overflow-hidden rounded-md border border-rule bg-surface">
+      <AvaActionReview>
+        <AvaActionReviewHead>
+          <AvaActionReviewTitle
+            eyebrow="Update"
+            action={
+              <Button variant="link" size="sm" className="h-auto py-0 text-[12.5px]">
+                Change
+              </Button>
+            }
+          >
+            Renewal — Acme GmbH
+          </AvaActionReviewTitle>
+          <AvaActionReviewReason>
+            Same customer and an open stage. The only match.
+          </AvaActionReviewReason>
+          <AvaActionReviewSummary meta="1 suggested">{SUMMARY}</AvaActionReviewSummary>
+          <AvaActionReviewProblem>
+            No price book exists for 2027. The amount uses the current list price.
+          </AvaActionReviewProblem>
+        </AvaActionReviewHead>
+        <AvaActionReviewBody>
+          <AvaActionReviewRows>
+            <AvaActionReviewRow
+              label="Amount"
+              from={<ReadOnly>12,000</ReadOnly>}
+              to={<Input size="sm" aria-label="Amount" defaultValue="13200" />}
+              onRemove={() => {}}
+            />
+          </AvaActionReviewRows>
+        </AvaActionReviewBody>
+        <AvaActionReviewFooter>
+          <AvaActionReviewAddField groups={ADD_GROUPS} onPick={() => {}} />
+          <AvaActionReviewActions>
+            <Button variant="ghost" size="sm">
+              Cancel
+            </Button>
+            <Button variant="cta" size="sm">
+              Apply 1 change
+            </Button>
+          </AvaActionReviewActions>
+        </AvaActionReviewFooter>
+      </AvaActionReview>
+    </div>
+  ),
+}
+
+/** The page hosts' modal: a long proposal scrolls in the body, the foot stays. */
+export const InModal: Story = {
+  parameters: { controls: { hideNoControlsWarning: true } },
+  render: () => (
+    <Modal isOpen>
+      <ModalContent modalClassName="max-w-2xl">
+        <ModalHeader className="px-4 pt-4 pb-2">
+          <ModalTitle>Log renewal</ModalTitle>
+        </ModalHeader>
+        <ModalBody className="overflow-hidden p-0">
+          <div className="flex min-h-0 flex-col gap-2">
+            <GlowFrame status="ready" className="min-h-0 flex-1 rounded-md">
+              <div className="flex min-h-0 flex-1 flex-col">
+                <ReviewContent />
+              </div>
+            </GlowFrame>
+          </div>
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  ),
+}
+
+/** Press More: the head scrolls, the body keeps its room, the foot stays in the box. */
+export const LongHeadInShortHost: Story = {
+  parameters: { controls: { hideNoControlsWarning: true } },
+  render: () => (
+    <div className="h-[300px] w-[320px] overflow-hidden rounded-md border border-rule bg-surface">
+      <AvaActionReview>
+        <AvaActionReviewHead>
+          <AvaActionReviewTitle eyebrow="Action">Create renewal quote</AvaActionReviewTitle>
+          <AvaActionReviewSummary meta="5 suggested">
+            {SUMMARY} {SUMMARY} {SUMMARY} {SUMMARY} {SUMMARY}
+          </AvaActionReviewSummary>
+          <AvaActionReviewProblem>
+            No price book exists for 2027. The amount uses the current list price.
+          </AvaActionReviewProblem>
+          <AvaActionReviewProblem>
+            The customer has no billing contact. Add one before you start.
+          </AvaActionReviewProblem>
+        </AvaActionReviewHead>
+        <AvaActionReviewBody>
+          <AvaActionReviewRows>
+            <AvaActionReviewRow
+              label="Amount"
+              from={<ReadOnly>12,000</ReadOnly>}
+              to={<Input size="sm" aria-label="Amount" defaultValue="13200" />}
+              onRemove={() => {}}
+            />
+          </AvaActionReviewRows>
+        </AvaActionReviewBody>
+        <AvaActionReviewFooter>
+          <AvaActionReviewActions>
+            <Button variant="ghost" size="sm">
+              Cancel
+            </Button>
+            <Button variant="cta" size="sm">
+              Apply 1 change
+            </Button>
+          </AvaActionReviewActions>
+        </AvaActionReviewFooter>
+      </AvaActionReview>
+    </div>
+  ),
+}

package/src/components/{record-update/record-update.test.tsx → ava-action-review/ava-action-review.test.tsx}

@@ -3,16 +3,17 @@ import userEvent from '@testing-library/user-event'
 import { describe, expect, it, vi } from 'vitest'
 
 import {
-  RecordUpdate,
-  RecordUpdateErrors,
-  RecordUpdateRow,
-  RecordUpdateRows,
-  RecordUpdateSummary,
-} from './record-update'
+  AvaActionReview,
+  AvaActionReviewAddField,
+  AvaActionReviewErrors,
+  AvaActionReviewRow,
+  AvaActionReviewRows,
+  AvaActionReviewSummary,
+} from './ava-action-review'
 
-describe('RecordUpdateRow', () => {
+describe('AvaActionReviewRow', () => {
   it('names the group after the label and shows both cells', () => {
-    render(<RecordUpdateRow label="Status" from={<span>Open</span>} to={<span>Won</span>} />)
+    render(<AvaActionReviewRow label="Status" from={<span>Open</span>} to={<span>Won</span>} />)
     expect(screen.getByRole('group')).toHaveAttribute('data-state', 'changed')
     expect(screen.getByText('Status')).toBeInTheDocument()
     expect(screen.getByText('Open')).toBeInTheDocument()
@@ -24,7 +25,7 @@ describe('RecordUpdateRow', () => {
     const onRemove = vi.fn()
     const onRestore = vi.fn()
     const { rerender } = render(
-      <RecordUpdateRow
+      <AvaActionReviewRow
         label="Status"
         from="Open"
         to="Won"
@@ -37,7 +38,7 @@ describe('RecordUpdateRow', () => {
     expect(screen.queryByRole('button', { name: 'Restore change' })).not.toBeInTheDocument()
 
     rerender(
-      <RecordUpdateRow
+      <AvaActionReviewRow
         label="Status"
         from="Open"
         to="Won"
@@ -53,14 +54,14 @@ describe('RecordUpdateRow', () => {
   })
 
   it('renders the proposed value alone when there is no current value', () => {
-    const { container } = render(<RecordUpdateRow label="Name" to={<span>Julia</span>} />)
+    const { container } = render(<AvaActionReviewRow label="Name" to={<span>Julia</span>} />)
     expect(screen.getByText('Julia')).toBeInTheDocument()
     expect(container.querySelector('svg')).toBeNull()
   })
 
-  it('tags a rejected row and keeps its cells (the explanation rides in `to`)', () => {
+  it('tags a rejected row and shows only the explanation', () => {
     render(
-      <RecordUpdateRow
+      <AvaActionReviewRow
         label="Created at"
         from="2026-09-01"
         to={<span>Read-only field</span>}
@@ -70,12 +71,13 @@ describe('RecordUpdateRow', () => {
     expect(screen.getByRole('group')).toHaveAttribute('data-state', 'rejected')
     expect(screen.getByText('not possible')).toBeInTheDocument()
     expect(screen.getByText('Read-only field')).toBeInTheDocument()
+    expect(screen.queryByText('2026-09-01')).not.toBeInTheDocument()
     expect(screen.queryByRole('button')).not.toBeInTheDocument()
   })
 
   it('tags an unresolved row and shows the hint; an error is an alert', () => {
     render(
-      <RecordUpdateRow
+      <AvaActionReviewRow
         label="Owner"
         from="Tonio"
         to={<input aria-label="Owner" />}
@@ -91,16 +93,16 @@ describe('RecordUpdateRow', () => {
   })
 })
 
-describe('RecordUpdate', () => {
+describe('AvaActionReview', () => {
   it('composes summary, rows and the general errors alert', () => {
     render(
-      <RecordUpdate>
-        <RecordUpdateSummary>Two changes.</RecordUpdateSummary>
-        <RecordUpdateRows>
-          <RecordUpdateRow label="Status" from="Open" to="Won" />
-        </RecordUpdateRows>
-        <RecordUpdateErrors errors={['Created at cannot be changed.']} />
-      </RecordUpdate>,
+      <AvaActionReview>
+        <AvaActionReviewSummary>Two changes.</AvaActionReviewSummary>
+        <AvaActionReviewRows>
+          <AvaActionReviewRow label="Status" from="Open" to="Won" />
+        </AvaActionReviewRows>
+        <AvaActionReviewErrors errors={['Created at cannot be changed.']} />
+      </AvaActionReview>,
     )
     expect(screen.getByText('Two changes.')).toBeInTheDocument()
     expect(screen.getByRole('group', { name: '' })).toBeInTheDocument()
@@ -108,7 +110,34 @@ describe('RecordUpdate', () => {
   })
 
   it('renders no errors block when the list is empty', () => {
-    render(<RecordUpdateErrors errors={[]} />)
+    render(<AvaActionReviewErrors errors={[]} />)
     expect(screen.queryByRole('alert')).not.toBeInTheDocument()
   })
 })
+
+describe('AvaActionReviewRow labels', () => {
+  it('names the two cells for assistive tech and tags an added row', () => {
+    render(<AvaActionReviewRow label="Status" from="Open" to="Won" state="added" />)
+    expect(screen.getByText('Current')).toBeInTheDocument()
+    expect(screen.getByText('New')).toBeInTheDocument()
+    expect(screen.getByText('added')).toBeInTheDocument()
+  })
+})
+
+describe('AvaActionReviewAddField', () => {
+  const groups = [
+    { label: 'On this form', options: [{ id: 'probability', label: 'Probability' }] },
+    { label: 'More fields', options: [{ id: 'competitor', label: 'Competitor' }] },
+  ]
+
+  it('filters as you type and reports the pick', async () => {
+    const user = userEvent.setup()
+    const onPick = vi.fn()
+    render(<AvaActionReviewAddField groups={groups} onPick={onPick} />)
+    await user.click(screen.getByRole('button', { name: 'Add field' }))
+    await user.type(await screen.findByRole('searchbox', { name: 'Find a field' }), 'comp')
+    expect(screen.queryByRole('menuitem', { name: 'Probability' })).not.toBeInTheDocument()
+    await user.click(screen.getByRole('menuitem', { name: 'Competitor' }))
+    expect(onPick).toHaveBeenCalledWith('competitor')
+  })
+})