@proteos/ui 0.60.0 → 0.75.0

package/src/components/conversation-brief-card/conversation-brief-review.test.tsx

@@ -172,9 +172,66 @@ describe('ConversationBriefPreview', () => {
         onCall={onCall}
       />,
     )
+    // Rests as a labelled row naming the first person + number; the pencil
+    // reveals the who-to-call select.
+    expect(screen.getByText('Calling')).toBeInTheDocument()
+    expect(screen.getByText('Alice Example · +4930123456')).toBeInTheDocument()
+    await userEvent.click(screen.getByRole('button', { name: 'Change the number to dial' }))
     expect(screen.getByRole('button', { name: /Who to call/ })).toBeInTheDocument()
+    await userEvent.click(screen.getByRole('button', { name: /Who to call/ }))
+    await userEvent.click(screen.getByRole('option', { name: /Tom Example/ }))
+    expect(screen.getByText('Tom Example · +4915500000')).toBeInTheDocument()
     await userEvent.click(screen.getByRole('button', { name: 'Call' }))
-    expect(onCall).toHaveBeenCalledWith(expect.objectContaining({ id: 'contact-1' }), '+4930123456')
+    expect(onCall).toHaveBeenCalledWith(expect.objectContaining({ id: 'contact-2' }), '+4915500000')
+  })
+
+  it('shows a single number without a pencil and hides the meta line on request', () => {
+    render(
+      <ConversationBriefPreview
+        brief={brief()}
+        contacts={[
+          contact({
+            addresses: [{ id: 'a2', kind: 'phone', value: '+4930123456' }],
+          } as Partial<Contact>),
+        ]}
+        onCall={vi.fn()}
+        isMetaHidden
+      />,
+    )
+    expect(screen.getByText('+4930123456')).toBeInTheDocument()
+    expect(
+      screen.queryByRole('button', { name: 'Change the number to dial' }),
+    ).not.toBeInTheDocument()
+    expect(screen.queryByText(/Channel phone/)).not.toBeInTheDocument()
+  })
+
+  it('lets a contact with several numbers pick which one to dial', async () => {
+    const onSelectionChange = vi.fn()
+    render(
+      <ConversationBriefPreview
+        brief={brief()}
+        contacts={[contact()]}
+        onCall={vi.fn()}
+        isCallButtonHidden
+        onSelectionChange={onSelectionChange}
+      />,
+    )
+    // First number auto-selected; the pencil reveals the number select, the
+    // label stays, and the x folds it back without a change.
+    expect(screen.getByText('+4930123456')).toBeInTheDocument()
+    await userEvent.click(screen.getByRole('button', { name: 'Change the number to dial' }))
+    expect(screen.getByText('Calling')).toBeInTheDocument()
+    await userEvent.click(screen.getByRole('button', { name: 'Keep the current number' }))
+    expect(screen.getByText('+4930123456')).toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: /Number to dial/ })).not.toBeInTheDocument()
+    await userEvent.click(screen.getByRole('button', { name: 'Change the number to dial' }))
+    await userEvent.click(screen.getByRole('button', { name: /Number to dial/ }))
+    await userEvent.click(screen.getByRole('option', { name: '+4917612345' }))
+    expect(screen.getByText('+4917612345')).toBeInTheDocument()
+    expect(onSelectionChange).toHaveBeenLastCalledWith(
+      expect.objectContaining({ id: 'contact-1' }),
+      '+4917612345',
+    )
   })
 
   it('can hide its Call button and report the target to the host', () => {

package/src/components/data-table/data-table.test.tsx

@@ -172,3 +172,27 @@ describe('DataTable grouping', () => {
     expect(screen.queryByText('crm')).toBeNull()
   })
 })
+
+/* `placeholderData: keepPreviousData` keeps the previous rows on screen while
+   a changed filter / sort loads: no skeleton, the body just dims. */
+describe('DataTable placeholder rows', () => {
+  it('keeps the rows and dims the body while the query shows placeholder data', () => {
+    render(
+      <DataTable<Row>
+        query={{ ...query(ROWS), isPlaceholderData: true }}
+        columns={columns}
+        ariaLabel="Records"
+      />,
+    )
+
+    expect(screen.getByText('Alpha')).toBeInTheDocument()
+    expect(screen.queryByRole('status')).toBeNull()
+    expect(screen.getByText('Alpha').closest('[aria-busy]')).toHaveAttribute('aria-busy', 'true')
+  })
+
+  it('renders the body at full opacity once the rows are its own', () => {
+    render(<DataTable<Row> query={query(ROWS)} columns={columns} ariaLabel="Records" />)
+
+    expect(screen.getByText('Alpha').closest('[aria-busy]')).toBeNull()
+  })
+})

package/src/components/data-table/data-table.tsx

@@ -59,6 +59,10 @@ type InfinitePage<TRow> = { data: TRow[]; meta?: { items_total?: number } }
 export type InfiniteQueryLike<TRow> = {
   data?: { pages: InfinitePage<TRow>[] } | undefined
   isLoading: boolean
+  /** The rows on screen belong to the PREVIOUS query (a filter or sort just
+   *  changed and the new rows are still loading — `placeholderData:
+   *  keepPreviousData`). The body dims until the fresh rows land. */
+  isPlaceholderData?: boolean
   isFetchingNextPage: boolean
   hasNextPage: boolean | undefined
   error: Error | null
@@ -572,6 +576,11 @@ export function DataTable<TRow>({
                 <div
                   ref={listRef}
                   role="presentation"
+                  aria-busy={query.isPlaceholderData ? true : undefined}
+                  className={cn(
+                    'transition-opacity duration-150 motion-reduce:transition-none',
+                    query.isPlaceholderData && 'opacity-50',
+                  )}
                   style={{ height: totalSize, position: 'relative', width: '100%' }}
                 >
                   {virtualItems.map((vRow) => {

package/src/components/stepper/index.ts

@@ -0,0 +1,8 @@
+export type {
+  StepperOrientation,
+  StepperProps,
+  StepperStepProps,
+  StepperVariants,
+  StepState,
+} from './stepper'
+export { Stepper, StepperStep, stepperStyles } from './stepper'

package/src/components/stepper/stepper.stories.tsx

@@ -0,0 +1,84 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { Route } from 'lucide-react'
+import { useState } from 'react'
+
+import { Stepper, StepperStep, type StepState } from './stepper'
+
+const meta: Meta<typeof Stepper> = {
+  title: 'Components/Stepper',
+  component: Stepper,
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof Stepper>
+
+const STEPS = ['Definition', 'Sourcing', 'Audience review', 'Journey building', 'Schedule', 'Run']
+
+function stateAt(index: number, current: number): StepState {
+  if (index < current) return 'completed'
+  if (index === current) return 'current'
+  return 'upcoming'
+}
+
+/* Current step in the middle: completed ones carry a check, the current one
+   is filled, the rest are outlined. */
+export const Default: Story = {
+  render: () => (
+    <Stepper aria-label="Campaign setup">
+      {STEPS.map((label, i) => (
+        <StepperStep key={label} index={i} state={stateAt(i, 3)} isLast={i === STEPS.length - 1}>
+          {label}
+        </StepperStep>
+      ))}
+    </Stepper>
+  ),
+}
+
+/* Clicking a step selects it for viewing without moving the current one —
+   the page renderer's preview behaviour. */
+export const Preview: Story = {
+  render: function PreviewStory() {
+    const current = 2
+    const [selected, setSelected] = useState(current)
+    return (
+      <div className="flex flex-col gap-4">
+        <Stepper aria-label="Campaign setup">
+          {STEPS.map((label, i) => (
+            <StepperStep
+              key={label}
+              index={i}
+              state={stateAt(i, current)}
+              isSelected={i === selected}
+              isLast={i === STEPS.length - 1}
+              onPress={() => setSelected(i)}
+            >
+              {label}
+            </StepperStep>
+          ))}
+        </Stepper>
+        <div className="text-[13px] text-ink-3">
+          Viewing <span className="text-ink">{STEPS[selected]}</span>; current step is{' '}
+          <span className="text-ink">{STEPS[current]}</span>.
+        </div>
+      </div>
+    )
+  },
+}
+
+/* An icon replaces the number on upcoming / current markers. */
+export const WithIcons: Story = {
+  render: () => (
+    <Stepper aria-label="Campaign setup">
+      <StepperStep index={0} state="completed">
+        Definition
+      </StepperStep>
+      <StepperStep index={1} state="current" icon={<Route />}>
+        Journey building
+      </StepperStep>
+      <StepperStep index={2} state="upcoming" icon={<Route />} isLast>
+        Run
+      </StepperStep>
+    </Stepper>
+  ),
+}

package/src/components/stepper/stepper.test.tsx

@@ -0,0 +1,79 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+
+import { Stepper, StepperStep } from './stepper'
+
+function renderRail(onPress?: (index: number) => void) {
+  return render(
+    <Stepper aria-label="Setup">
+      <StepperStep index={0} state="completed" onPress={() => onPress?.(0)}>
+        Define
+      </StepperStep>
+      <StepperStep index={1} state="current" onPress={() => onPress?.(1)}>
+        Source
+      </StepperStep>
+      <StepperStep index={2} state="upcoming" isLast onPress={() => onPress?.(2)}>
+        Run
+      </StepperStep>
+    </Stepper>,
+  )
+}
+
+describe('Stepper', () => {
+  it('is an ordered list of buttons', () => {
+    renderRail()
+    expect(screen.getByRole('list', { name: 'Setup' })).toBeInTheDocument()
+    expect(screen.getAllByRole('listitem')).toHaveLength(3)
+    expect(screen.getAllByRole('button').map((b) => b.textContent)).toEqual([
+      'Define',
+      '2Source',
+      '3Run',
+    ])
+  })
+
+  it('marks only the current step with aria-current="step"', () => {
+    renderRail()
+    const items = screen.getAllByRole('listitem')
+    expect(items[0]).not.toHaveAttribute('aria-current')
+    expect(items[1]).toHaveAttribute('aria-current', 'step')
+    expect(items[2]).not.toHaveAttribute('aria-current')
+  })
+
+  it('reports presses per step', async () => {
+    const onPress = vi.fn()
+    renderRail(onPress)
+    await userEvent.click(screen.getByRole('button', { name: 'Run' }))
+    expect(onPress).toHaveBeenCalledWith(2)
+  })
+
+  it('shows an icon instead of the number on a step that is not completed', () => {
+    render(
+      <Stepper>
+        <StepperStep index={0} state="upcoming" icon={<svg data-testid="step-icon" />} isLast>
+          Run
+        </StepperStep>
+      </Stepper>,
+    )
+    expect(screen.getByTestId('step-icon')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Run' }).textContent).toBe('Run')
+  })
+
+  it('stacks vertically on request, with connectors between the steps', () => {
+    const { container } = render(
+      <Stepper aria-label="Wrap-up" orientation="vertical">
+        <StepperStep index={0} state="completed" orientation="vertical" isDisabled>
+          Transcript
+        </StepperStep>
+        <StepperStep index={1} state="current" orientation="vertical" isLast isDisabled>
+          Summary
+        </StepperStep>
+      </Stepper>,
+    )
+    expect(screen.getByRole('list', { name: 'Wrap-up' })).toBeInTheDocument()
+    expect(screen.getAllByRole('listitem')).toHaveLength(2)
+    // One connector between two steps (the last step draws none).
+    expect(container.querySelectorAll('li > span[aria-hidden]').length).toBe(1)
+    expect(screen.getByRole('button', { name: 'Transcript' })).toBeDisabled()
+  })
+})

package/src/components/stepper/stepper.tsx

@@ -0,0 +1,127 @@
+import { Check } from 'lucide-react'
+import type { HTMLAttributes, ReactNode } from 'react'
+import { Button as AriaButton, type ButtonProps as AriaButtonProps } from 'react-aria-components'
+import { tv, type VariantProps } from 'tailwind-variants'
+
+import { cn } from '../../lib/cn'
+
+/* =========================================================================
+   Stepper — an ordered rail of steps: a numbered marker per step, a check
+   on the completed ones, the current one marked (`aria-current="step"`),
+   connectors in between. Chrome only — which step is current, and what a
+   click does, is the consumer's business (the page renderer's `stepper`
+   element previews a step on click; a wizard would navigate).
+
+   `<Stepper>` is the `<ol>`; each `<StepperStep>` is an `<li>` wrapping a
+   RAC Button so steps are keyboard-reachable and announce their state.
+   `orientation="vertical"` stacks the steps with a short vertical connector
+   under each marker (a progress checklist, a wizard's side rail).
+   ========================================================================= */
+
+export const stepperStyles = tv({
+  slots: {
+    root: 'flex min-w-0 flex-wrap items-center gap-y-2 m-0 list-none p-0',
+    item: 'flex items-center',
+    trigger: [
+      'inline-flex items-center gap-[7px] rounded-sm border-0 bg-transparent p-0',
+      'cursor-pointer select-none outline-none',
+      'transition-colors duration-150',
+      'data-[focus-visible]:shadow-[var(--shadow-focus)]',
+      'data-[disabled]:cursor-default',
+    ],
+    marker: [
+      'grid size-[18px] shrink-0 place-items-center rounded-pill border-[1.5px]',
+      'font-mono text-[10px] font-medium leading-none',
+      'transition-[background-color,border-color,color] duration-150',
+      '[&_svg]:size-[11px]',
+    ],
+    label: 'whitespace-nowrap text-[13px]',
+    connector: 'mx-2.5 h-px w-6 shrink-0 bg-rule',
+  },
+  variants: {
+    orientation: {
+      horizontal: {},
+      vertical: {
+        root: 'flex-col flex-nowrap items-stretch gap-y-0',
+        item: 'flex-col items-start',
+        // Centered under the 18px marker (9px in, minus half the line).
+        connector: 'mx-0 my-1 ml-[8.5px] h-4 w-px',
+      },
+    },
+    state: {
+      completed: {
+        marker: 'border-accent bg-accent text-surface',
+        label: 'text-ink-2 group-data-[hovered]:text-ink',
+      },
+      current: {
+        marker: 'border-accent bg-accent text-surface',
+        label: 'font-medium text-accent',
+      },
+      upcoming: {
+        marker: 'border-rule-strong bg-transparent text-ink-3',
+        label: 'text-ink-3 group-data-[hovered]:text-ink',
+      },
+    },
+    isSelected: {
+      true: { label: 'underline decoration-accent/40 underline-offset-4' },
+      false: {},
+    },
+  },
+  defaultVariants: { orientation: 'horizontal', state: 'upcoming', isSelected: false },
+})
+
+export type StepperVariants = VariantProps<typeof stepperStyles>
+export type StepState = NonNullable<StepperVariants['state']>
+export type StepperOrientation = NonNullable<StepperVariants['orientation']>
+
+export type StepperProps = HTMLAttributes<HTMLOListElement> & {
+  /** Default horizontal. Pass the same value to each step. */
+  orientation?: StepperOrientation
+}
+
+export function Stepper({ orientation, className, ...props }: StepperProps) {
+  const { root } = stepperStyles({ orientation })
+  return <ol {...props} className={cn(root(), className)} />
+}
+
+export type StepperStepProps = Omit<AriaButtonProps, 'children' | 'className'> & {
+  /** Where the step sits relative to the current one. */
+  state: StepState
+  /** Mirrors the parent `<Stepper>`'s orientation (the connector's direction). */
+  orientation?: StepperOrientation
+  /** Zero-based position; drawn as `index + 1` unless `icon` is given. */
+  index: number
+  /** Replaces the number in the marker (the check still wins when completed). */
+  icon?: ReactNode
+  /** The step the consumer is showing — may differ from the current one. */
+  isSelected?: boolean
+  /** Hides the trailing connector. */
+  isLast?: boolean
+  children: ReactNode
+  className?: string
+}
+
+export function StepperStep({
+  state,
+  orientation,
+  index,
+  icon,
+  isSelected = false,
+  isLast = false,
+  children,
+  className,
+  ...props
+}: StepperStepProps) {
+  const styles = stepperStyles({ orientation, state, isSelected })
+  return (
+    <li aria-current={state === 'current' ? 'step' : undefined} className={styles.item()}>
+      <AriaButton {...props} className={cn('group', styles.trigger(), className)}>
+        <span aria-hidden="true" className={styles.marker()}>
+          {state === 'completed' ? <Check strokeWidth={2.5} /> : (icon ?? index + 1)}
+        </span>
+        <span className={styles.label()}>{children}</span>
+      </AriaButton>
+      {!isLast && <span aria-hidden="true" className={styles.connector()} />}
+    </li>
+  )
+}

package/src/components/time-slot-list/index.ts

@@ -0,0 +1,2 @@
+export type { TimeSlotListItem, TimeSlotListProps, TimeSlotListVariants } from './time-slot-list'
+export { TimeSlotList, timeSlotListStyles } from './time-slot-list'

package/src/components/time-slot-list/time-slot-list.stories.tsx

@@ -0,0 +1,100 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useState } from 'react'
+
+import { TimeSlotList } from './time-slot-list'
+
+const meta: Meta<typeof TimeSlotList> = {
+  title: 'Components/TimeSlotList',
+  component: TimeSlotList,
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <div className="w-[240px] p-5 bg-surface border border-rule rounded-md">
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof TimeSlotList>
+
+const TIMES = ['09:00', '09:30', '10:00', '10:30', '11:00', '13:00', '13:30', '14:00'].map(
+  (label) => ({
+    id: label,
+    label,
+  }),
+)
+
+export const Default: Story = {
+  render: () => {
+    const [selected, setSelected] = useState<string | null>('10:30')
+    return (
+      <TimeSlotList aria-label="Times" items={TIMES} selectedId={selected} onSelect={setSelected} />
+    )
+  },
+}
+
+export const WithInlineConfirm: Story = {
+  render: () => {
+    const [selected, setSelected] = useState<string | null>('10:30')
+    return (
+      <TimeSlotList
+        aria-label="Times"
+        items={TIMES}
+        selectedId={selected}
+        onSelect={setSelected}
+        confirmLabel="Confirm"
+        onConfirm={(id) => alert(`Booked ${id}`)}
+      />
+    )
+  },
+}
+
+export const TakenSlot: Story = {
+  render: () => {
+    const [selected, setSelected] = useState<string | null>(null)
+    return (
+      <TimeSlotList
+        aria-label="Times"
+        items={TIMES.map((item) => (item.id === '10:30' ? { ...item, isDisabled: true } : item))}
+        selectedId={selected}
+        onSelect={setSelected}
+      />
+    )
+  },
+}
+
+export const TwoColumns: Story = {
+  decorators: [
+    (Story) => (
+      <div className="w-[360px]">
+        <Story />
+      </div>
+    ),
+  ],
+  render: () => {
+    const [selected, setSelected] = useState<string | null>(null)
+    return (
+      <TimeSlotList
+        aria-label="Times"
+        items={TIMES}
+        selectedId={selected}
+        onSelect={setSelected}
+        columns={2}
+      />
+    )
+  },
+}
+
+export const Empty: Story = {
+  render: () => (
+    <TimeSlotList
+      aria-label="Times"
+      items={[]}
+      selectedId={null}
+      onSelect={() => {}}
+      emptyMessage="All booked today — pick another day."
+    />
+  ),
+}

package/src/components/time-slot-list/time-slot-list.test.tsx

@@ -0,0 +1,120 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { useState } from 'react'
+import { describe, expect, it, vi } from 'vitest'
+
+import { TimeSlotList } from './time-slot-list'
+
+const TIMES = ['09:00', '09:30', '10:00'].map((label) => ({ id: label, label }))
+
+function Harness({
+  initial = null,
+  onSelect,
+  onConfirm,
+  confirmLabel,
+  items = TIMES,
+}: {
+  initial?: string | null
+  onSelect?: (id: string) => void
+  onConfirm?: (id: string) => void
+  confirmLabel?: string
+  items?: ReadonlyArray<{ id: string; label: string; isDisabled?: boolean }>
+}) {
+  const [selected, setSelected] = useState<string | null>(initial)
+  return (
+    <TimeSlotList
+      aria-label="Times"
+      items={items}
+      selectedId={selected}
+      onSelect={(id) => {
+        setSelected(id)
+        onSelect?.(id)
+      }}
+      {...(confirmLabel ? { confirmLabel } : {})}
+      {...(onConfirm ? { onConfirm } : {})}
+    />
+  )
+}
+
+describe('TimeSlotList', () => {
+  it('renders one exclusive option per item', () => {
+    render(<Harness />)
+    expect(screen.getByRole('radiogroup', { name: 'Times' })).toBeInTheDocument()
+    expect(screen.getAllByRole('radio')).toHaveLength(3)
+  })
+
+  it('selects on click and reports the id', async () => {
+    const user = userEvent.setup()
+    const onSelect = vi.fn()
+    render(<Harness onSelect={onSelect} />)
+    await user.click(screen.getByRole('radio', { name: '09:30' }))
+    expect(onSelect).toHaveBeenLastCalledWith('09:30')
+    expect(screen.getByRole('radio', { name: '09:30' })).toBeChecked()
+  })
+
+  it('keeps the selection when the selected item is clicked again', async () => {
+    const user = userEvent.setup()
+    const onSelect = vi.fn()
+    render(<Harness initial="09:00" onSelect={onSelect} />)
+    await user.click(screen.getByRole('radio', { name: '09:00' }))
+    expect(screen.getByRole('radio', { name: '09:00' })).toBeChecked()
+  })
+
+  it('does not select a disabled item', async () => {
+    const user = userEvent.setup()
+    const onSelect = vi.fn()
+    render(
+      <Harness
+        onSelect={onSelect}
+        items={[{ id: '09:00', label: '09:00', isDisabled: true }, ...TIMES.slice(1)]}
+      />,
+    )
+    await user.click(screen.getByRole('radio', { name: '09:00' }))
+    expect(onSelect).not.toHaveBeenCalled()
+  })
+
+  it('shows the inline confirm beside the selected item only', async () => {
+    const user = userEvent.setup()
+    const onConfirm = vi.fn()
+    render(<Harness confirmLabel="Confirm" onConfirm={onConfirm} />)
+    expect(screen.queryByRole('button', { name: 'Confirm' })).not.toBeInTheDocument()
+    await user.click(screen.getByRole('radio', { name: '10:00' }))
+    await user.click(screen.getByRole('button', { name: 'Confirm' }))
+    expect(onConfirm).toHaveBeenCalledWith('10:00')
+  })
+
+  it('freezes every pick and the confirm while disabled', async () => {
+    const user = userEvent.setup()
+    const onSelect = vi.fn()
+    const onConfirm = vi.fn()
+    render(
+      <TimeSlotList
+        aria-label="Times"
+        items={TIMES}
+        selectedId="09:00"
+        onSelect={onSelect}
+        confirmLabel="Confirm"
+        onConfirm={onConfirm}
+        isDisabled
+      />,
+    )
+    await user.click(screen.getByRole('radio', { name: '09:30' }))
+    await user.click(screen.getByRole('button', { name: 'Confirm' }))
+    expect(onSelect).not.toHaveBeenCalled()
+    expect(onConfirm).not.toHaveBeenCalled()
+  })
+
+  it('renders the empty message when there are no items', () => {
+    render(
+      <TimeSlotList
+        aria-label="Times"
+        items={[]}
+        selectedId={null}
+        onSelect={() => {}}
+        emptyMessage="All booked today"
+      />,
+    )
+    expect(screen.getByRole('status')).toHaveTextContent('All booked today')
+    expect(screen.queryByRole('radiogroup')).not.toBeInTheDocument()
+  })
+})