@open-mercato/ui 0.6.1-develop.3246.1.dbef9d7392 → 0.6.1-develop.3260.1.dc719cac84

package/src/primitives/__tests__/digit-input.test.tsx

@@ -0,0 +1,168 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import * as React from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { DigitInput } from '../digit-input'
+
+describe('DigitInput primitive', () => {
+  it('renders 6 cells by default', () => {
+    const { container } = render(<DigitInput />)
+    const cells = container.querySelectorAll('[data-slot="digit-input-cell"]')
+    expect(cells).toHaveLength(6)
+  })
+
+  it('honors the length prop', () => {
+    const { container } = render(<DigitInput length={4} />)
+    const cells = container.querySelectorAll('[data-slot="digit-input-cell"]')
+    expect(cells).toHaveLength(4)
+  })
+
+  it('renders the value distributed across cells', () => {
+    const { container } = render(<DigitInput value="12" length={4} onChange={() => {}} />)
+    const cells = container.querySelectorAll<HTMLInputElement>('[data-slot="digit-input-cell"]')
+    expect(cells[0].value).toBe('1')
+    expect(cells[1].value).toBe('2')
+    expect(cells[2].value).toBe('')
+    expect(cells[3].value).toBe('')
+  })
+
+  it('focuses the next cell after typing a digit', () => {
+    const { container } = render(<DigitInput length={4} onChange={() => {}} />)
+    const cells = container.querySelectorAll<HTMLInputElement>('[data-slot="digit-input-cell"]')
+    cells[0].focus()
+    fireEvent.change(cells[0], { target: { value: '7' } })
+    expect(document.activeElement).toBe(cells[1])
+  })
+
+  it('commits typed digit via onChange', () => {
+    const onChange = jest.fn()
+    const { container } = render(<DigitInput length={4} onChange={onChange} />)
+    const cells = container.querySelectorAll<HTMLInputElement>('[data-slot="digit-input-cell"]')
+    fireEvent.change(cells[0], { target: { value: '5' } })
+    expect(onChange).toHaveBeenCalledWith('5')
+  })
+
+  it('rejects non-digit characters when inputMode is numeric (default)', () => {
+    const onChange = jest.fn()
+    const { container } = render(<DigitInput length={4} onChange={onChange} />)
+    const cells = container.querySelectorAll<HTMLInputElement>('[data-slot="digit-input-cell"]')
+    fireEvent.change(cells[0], { target: { value: 'a' } })
+    expect(onChange).not.toHaveBeenCalled()
+  })
+
+  it('accepts non-digit characters when inputMode="text"', () => {
+    const onChange = jest.fn()
+    const { container } = render(<DigitInput length={4} inputMode="text" onChange={onChange} />)
+    const cells = container.querySelectorAll<HTMLInputElement>('[data-slot="digit-input-cell"]')
+    fireEvent.change(cells[0], { target: { value: 'X' } })
+    expect(onChange).toHaveBeenCalledWith('X')
+  })
+
+  it('Backspace on an empty cell focuses the previous cell and clears its value', () => {
+    const onChange = jest.fn()
+    const { container } = render(
+      <DigitInput value="12" length={4} onChange={onChange} />,
+    )
+    const cells = container.querySelectorAll<HTMLInputElement>('[data-slot="digit-input-cell"]')
+    cells[2].focus()
+    fireEvent.keyDown(cells[2], { key: 'Backspace' })
+    expect(document.activeElement).toBe(cells[1])
+    expect(onChange).toHaveBeenCalledWith('1')
+  })
+
+  it('ArrowLeft moves focus to the previous cell', () => {
+    const { container } = render(<DigitInput length={4} onChange={() => {}} />)
+    const cells = container.querySelectorAll<HTMLInputElement>('[data-slot="digit-input-cell"]')
+    cells[2].focus()
+    fireEvent.keyDown(cells[2], { key: 'ArrowLeft' })
+    expect(document.activeElement).toBe(cells[1])
+  })
+
+  it('ArrowRight moves focus to the next cell', () => {
+    const { container } = render(<DigitInput length={4} onChange={() => {}} />)
+    const cells = container.querySelectorAll<HTMLInputElement>('[data-slot="digit-input-cell"]')
+    cells[1].focus()
+    fireEvent.keyDown(cells[1], { key: 'ArrowRight' })
+    expect(document.activeElement).toBe(cells[2])
+  })
+
+  it('distributes a pasted string across cells and fires onComplete when filled', () => {
+    const onChange = jest.fn()
+    const onComplete = jest.fn()
+    const { container } = render(
+      <DigitInput length={4} onChange={onChange} onComplete={onComplete} />,
+    )
+    const cells = container.querySelectorAll<HTMLInputElement>('[data-slot="digit-input-cell"]')
+    fireEvent.paste(cells[0], {
+      clipboardData: { getData: () => '5678' },
+    })
+    expect(onChange).toHaveBeenCalledWith('5678')
+    expect(onComplete).toHaveBeenCalledWith('5678')
+  })
+
+  it('filters non-digit characters out of pasted strings in numeric mode', () => {
+    const onChange = jest.fn()
+    const { container } = render(<DigitInput length={4} onChange={onChange} />)
+    const cells = container.querySelectorAll<HTMLInputElement>('[data-slot="digit-input-cell"]')
+    fireEvent.paste(cells[0], {
+      clipboardData: { getData: () => '1a2b3c4d' },
+    })
+    expect(onChange).toHaveBeenCalledWith('1234')
+  })
+
+  it('renders each cell as type="password" when mask is true', () => {
+    const { container } = render(
+      <DigitInput value="12" length={2} mask onChange={() => {}} />,
+    )
+    const cells = container.querySelectorAll<HTMLInputElement>('[data-slot="digit-input-cell"]')
+    cells.forEach((cell) => expect(cell.type).toBe('password'))
+  })
+
+  it('disables every cell when disabled prop is set', () => {
+    const { container } = render(<DigitInput length={4} disabled onChange={() => {}} />)
+    const cells = container.querySelectorAll<HTMLInputElement>('[data-slot="digit-input-cell"]')
+    cells.forEach((cell) => expect(cell).toBeDisabled())
+  })
+
+  it('uncontrolled mode keeps internal state and emits onChange', () => {
+    const onChange = jest.fn()
+    const { container } = render(<DigitInput length={4} onChange={onChange} />)
+    const cells = container.querySelectorAll<HTMLInputElement>('[data-slot="digit-input-cell"]')
+    fireEvent.change(cells[0], { target: { value: '1' } })
+    fireEvent.change(cells[1], { target: { value: '2' } })
+    expect(onChange).toHaveBeenLastCalledWith('12')
+    expect(cells[0].value).toBe('1')
+    expect(cells[1].value).toBe('2')
+  })
+
+  it('aria-invalid propagates to the group wrapper and to each cell', () => {
+    const { container } = render(
+      <DigitInput length={2} value="12" onChange={() => {}} aria-invalid />,
+    )
+    const wrapper = container.querySelector('[data-slot="digit-input"]')
+    expect(wrapper).toHaveAttribute('aria-invalid', 'true')
+    const cells = container.querySelectorAll('[data-slot="digit-input-cell"]')
+    cells.forEach((cell) => expect(cell).toHaveAttribute('aria-invalid', 'true'))
+  })
+
+  it('uses a provided aria-label for the group and cell labels', () => {
+    render(<DigitInput length={3} aria-label="Two factor code" onChange={() => {}} />)
+    expect(screen.getByRole('group', { name: 'Two factor code' })).toBeInTheDocument()
+    expect(screen.getByLabelText('Two factor code digit 1')).toBeInTheDocument()
+    expect(screen.getByLabelText('Two factor code digit 2')).toBeInTheDocument()
+    expect(screen.getByLabelText('Two factor code digit 3')).toBeInTheDocument()
+  })
+
+  it('forwards id and name only to the first cell', () => {
+    const { container } = render(
+      <DigitInput length={3} id="otp" name="code" onChange={() => {}} />,
+    )
+    const cells = container.querySelectorAll<HTMLInputElement>('[data-slot="digit-input-cell"]')
+    expect(cells[0].id).toBe('otp')
+    expect(cells[0].name).toBe('code')
+    expect(cells[1].id).toBe('')
+    expect(cells[1].name).toBe('')
+  })
+})

package/src/primitives/__tests__/empty-state.test.tsx

@@ -0,0 +1,154 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import * as React from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { EmptyState } from '../empty-state'
+
+describe('EmptyState primitive', () => {
+  it('renders the title', () => {
+    render(<EmptyState title="No results" />)
+    expect(screen.getByText('No results')).toBeInTheDocument()
+  })
+
+  it('renders description when provided', () => {
+    render(<EmptyState title="Empty" description="Try adjusting filters" />)
+    expect(screen.getByText('Try adjusting filters')).toBeInTheDocument()
+  })
+
+  it('renders an icon when provided', () => {
+    const Icon = () => <svg data-testid="empty-icon" />
+    render(<EmptyState title="None" icon={<Icon />} />)
+    expect(screen.getByTestId('empty-icon')).toBeInTheDocument()
+  })
+
+  it('renders custom actions ReactNode when provided', () => {
+    render(
+      <EmptyState
+        title="Empty"
+        actions={<button type="button">Custom action</button>}
+      />,
+    )
+    expect(screen.getByRole('button', { name: 'Custom action' })).toBeInTheDocument()
+  })
+
+  it('renders the legacy action object as a default outline button', () => {
+    const onClick = jest.fn()
+    render(
+      <EmptyState
+        title="Empty"
+        action={{ label: 'Add item', onClick }}
+      />,
+    )
+    const button = screen.getByRole('button', { name: /Add item/i })
+    expect(button).toBeInTheDocument()
+    fireEvent.click(button)
+    expect(onClick).toHaveBeenCalledTimes(1)
+  })
+
+  it('renders legacy actionLabel + onAction as a button (BC for old backend EmptyState)', () => {
+    const onAction = jest.fn()
+    render(
+      <EmptyState title="Empty" actionLabel="Create" onAction={onAction} />,
+    )
+    const button = screen.getByRole('button', { name: /Create/i })
+    fireEvent.click(button)
+    expect(onAction).toHaveBeenCalledTimes(1)
+  })
+
+  it('prefers actions over legacy action when both are provided', () => {
+    render(
+      <EmptyState
+        title="Empty"
+        actions={<button type="button">Primary</button>}
+        action={{ label: 'Legacy', onClick: () => {} }}
+      />,
+    )
+    expect(screen.getByRole('button', { name: 'Primary' })).toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: /Legacy/i })).not.toBeInTheDocument()
+  })
+
+  it('default variant renders dashed border + bg-muted/30', () => {
+    const { container } = render(<EmptyState title="Default" />)
+    const root = container.querySelector('[data-slot="empty-state"]')
+    expect(root!.className).toContain('border-dashed')
+    expect(root!.className).toContain('bg-muted/30')
+  })
+
+  it('subtle variant has no border and no muted background', () => {
+    const { container } = render(<EmptyState title="Subtle" variant="subtle" />)
+    const root = container.querySelector('[data-slot="empty-state"]')
+    expect(root!.className).not.toContain('border-dashed')
+    expect(root!.className).not.toContain('bg-muted/30')
+  })
+
+  it('subtle variant wraps icon in a round muted box (Figma illustration tile style)', () => {
+    const Icon = () => <svg data-testid="boxed-icon" />
+    const { container } = render(
+      <EmptyState title="Subtle" variant="subtle" icon={<Icon />} />,
+    )
+    const iconWrapper = container.querySelector('[data-slot="empty-state"] > div')
+    expect(iconWrapper!.className).toContain('bg-muted')
+    expect(iconWrapper!.className).toContain('rounded-full')
+  })
+
+  it('illustration prop renders without an icon-box wrapper (Figma illustrations bring own bg)', () => {
+    const Illustration = () => <svg data-testid="figma-illustration" width="120" height="120" />
+    const { container } = render(
+      <EmptyState
+        title="With illustration"
+        variant="subtle"
+        illustration={<Illustration />}
+      />,
+    )
+    expect(container.querySelector('[data-testid="figma-illustration"]')).toBeInTheDocument()
+    const wrapper = container.querySelector('[data-slot="empty-state"] > div')
+    expect(wrapper!.className).not.toContain('bg-muted')
+    expect(wrapper!.className).not.toContain('rounded-full')
+  })
+
+  it('illustration takes precedence over icon when both are provided', () => {
+    const Illustration = () => <svg data-testid="illustration" />
+    const Icon = () => <svg data-testid="icon" />
+    render(
+      <EmptyState
+        title="Both"
+        illustration={<Illustration />}
+        icon={<Icon />}
+      />,
+    )
+    expect(screen.getByTestId('illustration')).toBeInTheDocument()
+    expect(screen.queryByTestId('icon')).not.toBeInTheDocument()
+  })
+
+  it('size variants apply correct padding tokens', () => {
+    const { container: sm } = render(<EmptyState title="X" size="sm" />)
+    expect(sm.querySelector('[data-slot="empty-state"]')!.className).toContain('py-6')
+
+    const { container: dft } = render(<EmptyState title="X" />)
+    expect(dft.querySelector('[data-slot="empty-state"]')!.className).toContain('py-10')
+
+    const { container: lg } = render(<EmptyState title="X" size="lg" />)
+    expect(lg.querySelector('[data-slot="empty-state"]')!.className).toContain('py-16')
+  })
+
+  it('forwards className to the root element', () => {
+    const { container } = render(
+      <EmptyState title="Empty" className="custom-class" />,
+    )
+    expect(container.querySelector('[data-slot="empty-state"]')!.className).toContain('custom-class')
+  })
+
+  it('renders children between description and actions', () => {
+    render(
+      <EmptyState
+        title="Empty"
+        description="No items"
+      >
+        <p data-testid="custom-child">Extra content</p>
+      </EmptyState>,
+    )
+    expect(screen.getByTestId('custom-child')).toBeInTheDocument()
+  })
+})

package/src/primitives/__tests__/inline-input.test.tsx

@@ -0,0 +1,100 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import * as React from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { InlineInput } from '../inline-input'
+
+describe('InlineInput primitive', () => {
+  it('renders an input element', () => {
+    render(<InlineInput placeholder="Edit value" />)
+    expect(screen.getByPlaceholderText('Edit value')).toBeInTheDocument()
+  })
+
+  it('renders without a visible border at rest (border-transparent + bg-transparent)', () => {
+    const { container } = render(<InlineInput value="hello" onChange={() => {}} />)
+    const wrapper = container.querySelector('[data-slot="input-wrapper"]')
+    expect(wrapper).toHaveClass('border-transparent')
+    expect(wrapper).toHaveClass('bg-transparent')
+    expect(wrapper).toHaveClass('shadow-none')
+  })
+
+  it('reveals a hover border by default', () => {
+    const { container } = render(<InlineInput value="x" onChange={() => {}} />)
+    const wrapper = container.querySelector('[data-slot="input-wrapper"]')
+    expect(wrapper).toHaveClass('hover:border-input')
+  })
+
+  it('omits the hover border when showBorderOnHover is false', () => {
+    const { container } = render(
+      <InlineInput value="x" onChange={() => {}} showBorderOnHover={false} />,
+    )
+    const wrapper = container.querySelector('[data-slot="input-wrapper"]')
+    expect(wrapper).not.toHaveClass('hover:border-input')
+    expect(wrapper).toHaveClass('hover:bg-transparent')
+  })
+
+  it('defaults to the sm size (h-8)', () => {
+    const { container } = render(<InlineInput value="x" onChange={() => {}} />)
+    const wrapper = container.querySelector('[data-slot="input-wrapper"]')
+    expect(wrapper).toHaveClass('h-8')
+  })
+
+  it('supports size="default" (h-9)', () => {
+    const { container } = render(
+      <InlineInput value="x" onChange={() => {}} size="default" />,
+    )
+    const wrapper = container.querySelector('[data-slot="input-wrapper"]')
+    expect(wrapper).toHaveClass('h-9')
+  })
+
+  it('forwards value / onChange like a regular Input', () => {
+    const onChange = jest.fn()
+    render(<InlineInput value="hello" onChange={onChange} />)
+    const input = screen.getByDisplayValue('hello') as HTMLInputElement
+    fireEvent.change(input, { target: { value: 'world' } })
+    expect(onChange).toHaveBeenCalled()
+  })
+
+  it('forwards onBlur for save-on-blur consumer flows', () => {
+    const onBlur = jest.fn()
+    render(<InlineInput value="hello" onChange={() => {}} onBlur={onBlur} />)
+    const input = screen.getByDisplayValue('hello')
+    fireEvent.blur(input)
+    expect(onBlur).toHaveBeenCalled()
+  })
+
+  it('forwards refs to the underlying input element', () => {
+    const ref = React.createRef<HTMLInputElement>()
+    render(<InlineInput ref={ref} value="hello" onChange={() => {}} />)
+    expect(ref.current).not.toBeNull()
+    expect(ref.current?.tagName).toBe('INPUT')
+  })
+
+  it('merges consumer className alongside the borderless baseline', () => {
+    const { container } = render(
+      <InlineInput value="x" onChange={() => {}} className="text-right font-mono" />,
+    )
+    const wrapper = container.querySelector('[data-slot="input-wrapper"]')
+    expect(wrapper).toHaveClass('text-right')
+    expect(wrapper).toHaveClass('font-mono')
+    expect(wrapper).toHaveClass('border-transparent')
+  })
+
+  it('renders aria-invalid via the underlying Input wrapper', () => {
+    const { container } = render(
+      <InlineInput value="x" onChange={() => {}} aria-invalid />,
+    )
+    const input = container.querySelector('input')
+    expect(input).toHaveAttribute('aria-invalid', 'true')
+  })
+
+  it('honors a custom input type', () => {
+    const { container } = render(
+      <InlineInput value="user@example.com" onChange={() => {}} type="email" />,
+    )
+    const input = container.querySelector('input')
+    expect(input).toHaveAttribute('type', 'email')
+  })
+})

package/src/primitives/__tests__/inline-select.test.tsx

@@ -0,0 +1,103 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import * as React from 'react'
+import { render, screen } from '@testing-library/react'
+import {
+  InlineSelectTrigger,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectValue,
+} from '../inline-select'
+
+function renderInlineSelect(
+  props: Partial<React.ComponentProps<typeof InlineSelectTrigger>> = {},
+) {
+  return render(
+    <Select defaultValue="open">
+      <InlineSelectTrigger aria-label="Status" {...props}>
+        <SelectValue />
+      </InlineSelectTrigger>
+      <SelectContent>
+        <SelectItem value="open">Open</SelectItem>
+        <SelectItem value="closed">Closed</SelectItem>
+      </SelectContent>
+    </Select>,
+  )
+}
+
+describe('InlineSelect primitive', () => {
+  it('renders the trigger borderless at rest', () => {
+    const { container } = renderInlineSelect()
+    const trigger = container.querySelector('[data-slot="inline-select-trigger"]')
+    expect(trigger).not.toBeNull()
+    expect(trigger).toHaveClass('border-transparent')
+    expect(trigger).toHaveClass('bg-transparent')
+    expect(trigger).toHaveClass('shadow-none')
+  })
+
+  it('shows the hover border by default', () => {
+    const { container } = renderInlineSelect()
+    const trigger = container.querySelector('[data-slot="inline-select-trigger"]')
+    expect(trigger).toHaveClass('hover:border-input')
+    expect(trigger).toHaveClass('hover:bg-muted/40')
+  })
+
+  it('omits the hover border when showBorderOnHover is false', () => {
+    const { container } = renderInlineSelect({ showBorderOnHover: false })
+    const trigger = container.querySelector('[data-slot="inline-select-trigger"]')
+    expect(trigger).not.toHaveClass('hover:border-input')
+    expect(trigger).toHaveClass('hover:bg-transparent')
+  })
+
+  it('defaults to the sm size (h-8)', () => {
+    const { container } = renderInlineSelect()
+    const trigger = container.querySelector('[data-slot="inline-select-trigger"]')
+    expect(trigger).toHaveClass('h-8')
+  })
+
+  it('supports size="default" (h-9)', () => {
+    const { container } = renderInlineSelect({ size: 'default' })
+    const trigger = container.querySelector('[data-slot="inline-select-trigger"]')
+    expect(trigger).toHaveClass('h-9')
+  })
+
+  it('forwards refs to the underlying button trigger', () => {
+    const ref = React.createRef<HTMLButtonElement>()
+    render(
+      <Select defaultValue="a">
+        <InlineSelectTrigger ref={ref} aria-label="Pick">
+          <SelectValue />
+        </InlineSelectTrigger>
+        <SelectContent>
+          <SelectItem value="a">A</SelectItem>
+        </SelectContent>
+      </Select>,
+    )
+    expect(ref.current).not.toBeNull()
+    expect(ref.current?.tagName).toBe('BUTTON')
+  })
+
+  it('merges consumer className alongside the borderless baseline', () => {
+    const { container } = renderInlineSelect({
+      className: 'text-right font-mono',
+    })
+    const trigger = container.querySelector('[data-slot="inline-select-trigger"]')
+    expect(trigger).toHaveClass('text-right')
+    expect(trigger).toHaveClass('font-mono')
+    expect(trigger).toHaveClass('border-transparent')
+  })
+
+  it('forwards aria-label to the Radix trigger', () => {
+    renderInlineSelect({ 'aria-label': 'Pipeline stage' })
+    expect(screen.getByRole('combobox', { name: 'Pipeline stage' })).toBeInTheDocument()
+  })
+
+  it('renders aria-invalid styling when aria-invalid is set', () => {
+    const { container } = renderInlineSelect({ 'aria-invalid': true })
+    const trigger = container.querySelector('[aria-invalid="true"]')
+    expect(trigger).not.toBeNull()
+  })
+})