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

package/src/portal/components/PortalEmptyState.tsx

@@ -1,32 +1,37 @@
+/**
+ * @deprecated Import `EmptyState` from `@open-mercato/ui/primitives/empty-state`
+ * directly with `variant="subtle"` and `size="lg"` (matches the previous
+ * portal layout). The standalone `PortalEmptyState` is replaced by the
+ * unified primitive in DS Foundation v3.
+ *
+ * This shim preserves the legacy import path
+ * `@open-mercato/ui/portal/components/PortalEmptyState` for existing
+ * portal consumers — it forwards to the primitive with the portal-style
+ * variant + size pre-set.
+ */
+
 "use client"
-import type { ReactNode } from 'react'
 
-type PortalEmptyStateProps = {
-  icon?: ReactNode
+import * as React from 'react'
+import { EmptyState } from '../../primitives/empty-state'
+
+export type PortalEmptyStateProps = {
+  icon?: React.ReactNode
   title: string
   description?: string
-  action?: ReactNode
+  action?: React.ReactNode
 }
 
-/**
- * Empty state placeholder for portal sections with no content.
- * Dashed border, centered layout, optional icon and CTA.
- */
+/** @deprecated Use `EmptyState` from `@open-mercato/ui/primitives/empty-state` with `variant="subtle"` and `size="lg"`. */
 export function PortalEmptyState({ icon, title, description, action }: PortalEmptyStateProps) {
   return (
-    <div className="flex flex-col items-center justify-center gap-3 rounded-xl border border-dashed py-12 text-center">
-      {icon ? (
-        <div className="flex size-10 items-center justify-center rounded-lg bg-muted text-muted-foreground">
-          {icon}
-        </div>
-      ) : null}
-      <div>
-        <p className="text-sm font-medium text-foreground">{title}</p>
-        {description ? (
-          <p className="mt-0.5 max-w-sm text-sm text-muted-foreground">{description}</p>
-        ) : null}
-      </div>
-      {action ?? null}
-    </div>
+    <EmptyState
+      variant="subtle"
+      size="lg"
+      icon={icon}
+      title={title}
+      description={description}
+      actions={action}
+    />
   )
 }

package/src/primitives/__tests__/accordion.test.tsx

@@ -0,0 +1,197 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import * as React from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '../accordion'
+
+function renderBasic(
+  props: Partial<React.ComponentProps<typeof AccordionTrigger>> = {},
+  itemProps: Partial<React.ComponentProps<typeof AccordionItem>> = {},
+) {
+  return render(
+    <Accordion type="single" collapsible>
+      <AccordionItem value="one" {...itemProps}>
+        <AccordionTrigger {...props}>How do I update my account?</AccordionTrigger>
+        <AccordionContent>Visit Settings → Profile to edit your details.</AccordionContent>
+      </AccordionItem>
+    </Accordion>,
+  )
+}
+
+describe('Accordion primitive', () => {
+  it('renders the trigger label', () => {
+    renderBasic()
+    expect(screen.getByText('How do I update my account?')).toBeInTheDocument()
+  })
+
+  it('starts closed by default (single + collapsible)', () => {
+    const { container } = renderBasic()
+    const item = container.querySelector('[data-slot="accordion-item"]')
+    expect(item).toHaveAttribute('data-state', 'closed')
+  })
+
+  it('opens the item when the trigger is clicked', () => {
+    const { container } = renderBasic()
+    fireEvent.click(screen.getByRole('button', { name: /How do I update/ }))
+    expect(container.querySelector('[data-slot="accordion-item"]')).toHaveAttribute('data-state', 'open')
+  })
+
+  it('closes the item on a second click when collapsible', () => {
+    const { container } = renderBasic()
+    const trigger = screen.getByRole('button', { name: /How do I update/ })
+    fireEvent.click(trigger)
+    fireEvent.click(trigger)
+    expect(container.querySelector('[data-slot="accordion-item"]')).toHaveAttribute('data-state', 'closed')
+  })
+
+  it('only opens one item at a time with type="single"', () => {
+    const { container } = render(
+      <Accordion type="single" collapsible>
+        <AccordionItem value="a">
+          <AccordionTrigger>A</AccordionTrigger>
+          <AccordionContent>A body</AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="b">
+          <AccordionTrigger>B</AccordionTrigger>
+          <AccordionContent>B body</AccordionContent>
+        </AccordionItem>
+      </Accordion>,
+    )
+    fireEvent.click(screen.getByRole('button', { name: 'A' }))
+    fireEvent.click(screen.getByRole('button', { name: 'B' }))
+    const items = container.querySelectorAll('[data-slot="accordion-item"]')
+    expect(items[0]).toHaveAttribute('data-state', 'closed')
+    expect(items[1]).toHaveAttribute('data-state', 'open')
+  })
+
+  it('allows multiple items to stay open with type="multiple"', () => {
+    const { container } = render(
+      <Accordion type="multiple">
+        <AccordionItem value="a">
+          <AccordionTrigger>A</AccordionTrigger>
+          <AccordionContent>A body</AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="b">
+          <AccordionTrigger>B</AccordionTrigger>
+          <AccordionContent>B body</AccordionContent>
+        </AccordionItem>
+      </Accordion>,
+    )
+    fireEvent.click(screen.getByRole('button', { name: 'A' }))
+    fireEvent.click(screen.getByRole('button', { name: 'B' }))
+    const items = container.querySelectorAll('[data-slot="accordion-item"]')
+    expect(items[0]).toHaveAttribute('data-state', 'open')
+    expect(items[1]).toHaveAttribute('data-state', 'open')
+  })
+
+  it('marks the root slots with data-slot attributes', () => {
+    const { container } = renderBasic()
+    expect(container.querySelector('[data-slot="accordion-item"]')).not.toBeNull()
+    expect(container.querySelector('[data-slot="accordion-trigger"]')).not.toBeNull()
+    expect(container.querySelector('[data-slot="accordion-content"]')).not.toBeNull()
+  })
+
+  it('renders the Plus/Minus indicator by default (plus-minus triggerIcon)', () => {
+    const { container } = renderBasic()
+    const indicator = container.querySelector('[data-slot="accordion-trigger-indicator"]')
+    expect(indicator).not.toBeNull()
+    // Plus and Minus are both present; CSS toggles visibility via data-state.
+    expect(indicator?.querySelectorAll('svg').length).toBe(2)
+  })
+
+  it('renders a single ChevronDown when triggerIcon="chevron"', () => {
+    const { container } = renderBasic({ triggerIcon: 'chevron' })
+    const indicator = container.querySelector('[data-slot="accordion-trigger-indicator"]')
+    expect(indicator?.querySelectorAll('svg').length).toBe(1)
+  })
+
+  it('omits the indicator entirely when triggerIcon="none"', () => {
+    const { container } = renderBasic({ triggerIcon: 'none' })
+    expect(container.querySelector('[data-slot="accordion-trigger-indicator"]')).toBeNull()
+  })
+
+  it('renders a custom indicator node when provided (overrides triggerIcon)', () => {
+    const { container } = renderBasic({
+      triggerIcon: 'chevron',
+      indicator: <span data-testid="custom-indicator">42</span>,
+    })
+    expect(screen.getByTestId('custom-indicator')).toBeInTheDocument()
+    // No Chevron rendered when indicator override is supplied.
+    const indicator = container.querySelector('[data-slot="accordion-trigger-indicator"]')
+    expect(indicator?.querySelector('svg')).toBeNull()
+  })
+
+  it('renders leftIcon in a dedicated slot before the label', () => {
+    const { container } = renderBasic({ leftIcon: <span data-testid="left-icon" /> })
+    expect(container.querySelector('[data-slot="accordion-trigger-left-icon"]')).not.toBeNull()
+    expect(screen.getByTestId('left-icon')).toBeInTheDocument()
+  })
+
+  it('suppresses leftIcon when iconPosition="start" (indicator owns the leading slot)', () => {
+    const { container } = renderBasic({
+      leftIcon: <span data-testid="left-icon" />,
+      iconPosition: 'start',
+    })
+    expect(container.querySelector('[data-slot="accordion-trigger-left-icon"]')).toBeNull()
+    expect(screen.queryByTestId('left-icon')).toBeNull()
+  })
+
+  it('places the indicator at the start of the trigger when iconPosition="start"', () => {
+    const { container } = renderBasic({ iconPosition: 'start' })
+    const trigger = container.querySelector('[data-slot="accordion-trigger"]')!
+    const indicator = trigger.querySelector('[data-slot="accordion-trigger-indicator"]')
+    const label = trigger.querySelector('[data-slot="accordion-trigger-label"]')
+    expect(indicator).not.toBeNull()
+    // Indicator precedes the label in DOM order.
+    expect(indicator?.compareDocumentPosition(label!) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy()
+  })
+
+  it('applies card variant classes by default (border + shadow + bg-card)', () => {
+    const { container } = renderBasic()
+    const item = container.querySelector('[data-slot="accordion-item"]')!
+    expect(item).toHaveClass('border-border')
+    expect(item).toHaveClass('bg-card')
+    expect(item).toHaveClass('shadow-xs')
+  })
+
+  it('applies borderless variant classes when variant="borderless"', () => {
+    const { container } = renderBasic({}, { variant: 'borderless' })
+    const item = container.querySelector('[data-slot="accordion-item"]')!
+    expect(item).toHaveClass('border-transparent')
+    expect(item).toHaveClass('bg-transparent')
+    expect(item).toHaveClass('shadow-none')
+  })
+
+  it('exposes --accordion-indent on the item with a Tailwind has-[] promoter for the leftIcon case', () => {
+    const { container } = renderBasic({ leftIcon: <span /> })
+    const item = container.querySelector('[data-slot="accordion-item"]')!
+    // We can't assert the resolved CSS variable value in jsdom (no real CSS engine),
+    // so we assert the Tailwind utility that flips the variable is on the item.
+    expect(item.className).toContain('[--accordion-indent:14px]')
+    expect(item.className).toContain('has-[[data-slot=accordion-trigger-left-icon]]:[--accordion-indent:44px]')
+  })
+
+  it('forwards refs to the underlying Radix Item / Trigger / Content nodes', () => {
+    const itemRef = React.createRef<HTMLDivElement>()
+    const triggerRef = React.createRef<HTMLButtonElement>()
+    const contentRef = React.createRef<HTMLDivElement>()
+    render(
+      <Accordion type="single" collapsible defaultValue="one">
+        <AccordionItem ref={itemRef} value="one">
+          <AccordionTrigger ref={triggerRef}>Title</AccordionTrigger>
+          <AccordionContent ref={contentRef}>Body</AccordionContent>
+        </AccordionItem>
+      </Accordion>,
+    )
+    expect(itemRef.current).not.toBeNull()
+    expect(triggerRef.current?.tagName).toBe('BUTTON')
+    expect(contentRef.current).not.toBeNull()
+  })
+})

package/src/primitives/__tests__/alert.test.tsx

@@ -0,0 +1,204 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import * as React from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { Alert, AlertDescription, AlertTitle } from '../alert'
+
+describe('Alert primitive', () => {
+  it('renders with role="alert"', () => {
+    render(<Alert>Hello</Alert>)
+    expect(screen.getByRole('alert')).toBeInTheDocument()
+  })
+
+  it('defaults to status="information" + style="light" + size="sm"', () => {
+    const { container } = render(<Alert>Body</Alert>)
+    const alert = container.querySelector('[data-slot="alert"]')
+    expect(alert).toHaveAttribute('data-status', 'information')
+    expect(alert).toHaveAttribute('data-style', 'light')
+    expect(alert).toHaveClass('min-h-9')
+    expect(alert).toHaveClass('rounded-lg')
+  })
+
+  describe('Figma tokens — status × style matrix', () => {
+    it('error / filled: bg-status-error-icon + text-white', () => {
+      const { container } = render(<Alert status="error" style="filled">Oops</Alert>)
+      const alert = container.querySelector('[data-slot="alert"]')
+      expect(alert).toHaveClass('bg-status-error-icon')
+      expect(alert).toHaveClass('text-white')
+    })
+
+    it('error / light: bg-status-error-border + text-status-error-text (Figma #fecaca)', () => {
+      const { container } = render(<Alert status="error" style="light">Oops</Alert>)
+      const alert = container.querySelector('[data-slot="alert"]')
+      expect(alert).toHaveClass('bg-status-error-border')
+      expect(alert).toHaveClass('text-foreground')
+    })
+
+    it('error / lighter: bg-status-error-bg + text-status-error-text (Figma #fef2f2)', () => {
+      const { container } = render(<Alert status="error" style="lighter">Oops</Alert>)
+      const alert = container.querySelector('[data-slot="alert"]')
+      expect(alert).toHaveClass('bg-status-error-bg')
+      expect(alert).toHaveClass('text-foreground')
+    })
+
+    it('stroke style: bg-background + text-foreground + border-border + shadow-lg', () => {
+      const { container } = render(<Alert status="warning" style="stroke">Heads up</Alert>)
+      const alert = container.querySelector('[data-slot="alert"]')
+      expect(alert).toHaveClass('bg-background')
+      expect(alert).toHaveClass('text-foreground')
+      expect(alert).toHaveClass('border-border')
+      expect(alert).toHaveClass('shadow-lg')
+    })
+
+    it('feature status maps to status-neutral tokens (NOT brand-violet)', () => {
+      const { container } = render(<Alert status="feature" style="light">New release</Alert>)
+      const alert = container.querySelector('[data-slot="alert"]')
+      expect(alert).toHaveClass('bg-status-neutral-border')
+      expect(alert).toHaveClass('text-foreground')
+      expect(alert).not.toHaveClass('bg-brand-violet')
+    })
+
+    it('feature / filled: bg-status-neutral-icon + text-white', () => {
+      const { container } = render(<Alert status="feature" style="filled">Hi</Alert>)
+      const alert = container.querySelector('[data-slot="alert"]')
+      expect(alert).toHaveClass('bg-status-neutral-icon')
+      expect(alert).toHaveClass('text-white')
+    })
+  })
+
+  describe('Sizes', () => {
+    it('size="xs" applies min-h-8 + rounded-lg + text-xs', () => {
+      const { container } = render(<Alert size="xs">xs</Alert>)
+      const alert = container.querySelector('[data-slot="alert"]')
+      expect(alert).toHaveClass('min-h-8')
+      expect(alert).toHaveClass('rounded-lg')
+      expect(alert).toHaveClass('text-xs')
+    })
+
+    it('size="sm" applies min-h-9 + rounded-lg + text-sm (Figma Paragraph/Small)', () => {
+      const { container } = render(<Alert size="sm">sm</Alert>)
+      const alert = container.querySelector('[data-slot="alert"]')
+      expect(alert).toHaveClass('min-h-9')
+      expect(alert).toHaveClass('rounded-lg')
+      expect(alert).toHaveClass('text-sm')
+    })
+
+    it('size="default" applies rounded-xl + larger padding + no min height', () => {
+      const { container } = render(<Alert size="default">default</Alert>)
+      const alert = container.querySelector('[data-slot="alert"]')
+      expect(alert).toHaveClass('rounded-xl')
+      expect(alert).toHaveClass('text-sm')
+    })
+  })
+
+  describe('Icon badge (non-filled styles)', () => {
+    it('renders a badge wrap with status-x-icon bg + white icon for light style', () => {
+      const { container } = render(<Alert status="success" style="light">Saved</Alert>)
+      const badge = container.querySelector('[data-slot="alert-icon-badge"]')
+      expect(badge).not.toBeNull()
+      expect(badge).toHaveAttribute('data-status', 'success')
+      expect(badge).toHaveClass('bg-status-success-icon')
+      expect(badge).toHaveClass('rounded-full')
+      expect(badge).toHaveClass('text-white')
+    })
+
+    it('renders a badge wrap for lighter style too', () => {
+      const { container } = render(<Alert status="information" style="lighter">FYI</Alert>)
+      expect(container.querySelector('[data-slot="alert-icon-badge"]')).not.toBeNull()
+    })
+
+    it('renders a badge wrap for stroke style too', () => {
+      const { container } = render(<Alert status="error" style="stroke">Oops</Alert>)
+      expect(container.querySelector('[data-slot="alert-icon-badge"]')).not.toBeNull()
+    })
+
+    it('does NOT render a badge wrap for filled style — plain icon instead', () => {
+      const { container } = render(<Alert status="error" style="filled">Oops</Alert>)
+      expect(container.querySelector('[data-slot="alert-icon-badge"]')).toBeNull()
+      expect(container.querySelector('[data-slot="alert-icon"]')).not.toBeNull()
+    })
+
+    it('hides the icon entirely when showIcon is false', () => {
+      const { container } = render(
+        <Alert status="success" showIcon={false}>Done</Alert>,
+      )
+      expect(container.querySelector('[data-slot="alert-icon-badge"]')).toBeNull()
+      expect(container.querySelector('[data-slot="alert-icon"]')).toBeNull()
+    })
+
+    it('respects a custom icon override inside the badge', () => {
+      const Custom = () => <svg data-testid="custom-icon" aria-hidden="true" />
+      render(<Alert status="information" style="light" icon={<Custom />}>Info</Alert>)
+      expect(screen.getByTestId('custom-icon')).toBeInTheDocument()
+    })
+  })
+
+  describe('Action slot + dismiss', () => {
+    it('renders an inline action slot to the right of the description', () => {
+      render(
+        <Alert action={<button data-testid="action-link">Undo</button>}>Saved</Alert>,
+      )
+      expect(screen.getByTestId('action-link')).toBeInTheDocument()
+    })
+
+    it('renders a dismiss button when dismissible is true', () => {
+      render(<Alert dismissible onDismiss={() => {}}>Closable</Alert>)
+      expect(screen.getByRole('button', { name: 'Dismiss' })).toBeInTheDocument()
+    })
+
+    it('fires onDismiss when the dismiss button is clicked', () => {
+      const onDismiss = jest.fn()
+      render(<Alert dismissible onDismiss={onDismiss}>Closable</Alert>)
+      fireEvent.click(screen.getByRole('button', { name: 'Dismiss' }))
+      expect(onDismiss).toHaveBeenCalledTimes(1)
+    })
+
+    it('honors a custom dismissAriaLabel for i18n', () => {
+      render(
+        <Alert dismissible onDismiss={() => {}} dismissAriaLabel="Zamknij">
+          Closable
+        </Alert>,
+      )
+      expect(screen.getByRole('button', { name: 'Zamknij' })).toBeInTheDocument()
+    })
+  })
+
+  it('AlertTitle and AlertDescription compose inside the body slot', () => {
+    render(
+      <Alert status="success">
+        <AlertTitle>Saved</AlertTitle>
+        <AlertDescription>Your changes were saved.</AlertDescription>
+      </Alert>,
+    )
+    expect(screen.getByText('Saved').tagName).toBe('H5')
+    expect(screen.getByText('Your changes were saved.').tagName).toBe('P')
+  })
+
+  describe('legacy variant prop (BC)', () => {
+    it('maps variant="destructive" to status="error" with the new light default', () => {
+      const { container } = render(<Alert variant="destructive">Oops</Alert>)
+      const alert = container.querySelector('[data-slot="alert"]')
+      expect(alert).toHaveAttribute('data-status', 'error')
+      expect(alert).toHaveAttribute('data-style', 'light')
+      expect(alert).toHaveClass('bg-status-error-border')
+      expect(alert).toHaveClass('text-foreground')
+    })
+
+    it('maps variant="info" to status="information"', () => {
+      const { container } = render(<Alert variant="info">FYI</Alert>)
+      expect(container.querySelector('[data-slot="alert"]')).toHaveAttribute('data-status', 'information')
+    })
+
+    it('maps variant="default" to status="information"', () => {
+      const { container } = render(<Alert variant="default">Hello</Alert>)
+      expect(container.querySelector('[data-slot="alert"]')).toHaveAttribute('data-status', 'information')
+    })
+
+    it('explicit status overrides the legacy variant prop', () => {
+      const { container } = render(<Alert variant="destructive" status="success">Saved</Alert>)
+      expect(container.querySelector('[data-slot="alert"]')).toHaveAttribute('data-status', 'success')
+    })
+  })
+})

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

@@ -0,0 +1,98 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import * as React from 'react'
+import { render, screen } from '@testing-library/react'
+import {
+  CompactSelectTrigger,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectValue,
+} from '../compact-select'
+
+function renderCompactSelect(
+  props: Partial<React.ComponentProps<typeof CompactSelectTrigger>> = {},
+  defaultValue: string = 'all',
+) {
+  return render(
+    <Select defaultValue={defaultValue}>
+      <CompactSelectTrigger aria-label="View" {...props}>
+        <SelectValue />
+      </CompactSelectTrigger>
+      <SelectContent>
+        <SelectItem value="all">All</SelectItem>
+        <SelectItem value="open">Open</SelectItem>
+      </SelectContent>
+    </Select>,
+  )
+}
+
+describe('CompactSelect primitive', () => {
+  it('renders the trigger at h-7 (xs) regardless of explicit size attempts', () => {
+    const { container } = renderCompactSelect()
+    const trigger = container.querySelector('[data-slot="compact-select-trigger"]')
+    expect(trigger).not.toBeNull()
+    expect(trigger).toHaveClass('h-7')
+  })
+
+  it('uses the smaller px-2 text-xs styling of the xs size variant', () => {
+    const { container } = renderCompactSelect()
+    const trigger = container.querySelector('[data-slot="compact-select-trigger"]')!
+    expect(trigger).toHaveClass('px-2')
+    expect(trigger).toHaveClass('text-xs')
+  })
+
+  it('renders the triggerLabel prefix when provided', () => {
+    renderCompactSelect({ triggerLabel: 'View:' })
+    expect(screen.getByText('View:')).toBeInTheDocument()
+  })
+
+  it('omits the triggerLabel slot when no label is provided', () => {
+    const { container } = renderCompactSelect()
+    expect(container.querySelector('[data-slot="compact-select-trigger-label"]')).toBeNull()
+  })
+
+  it('marks the trigger label slot with data-slot for styling hooks', () => {
+    const { container } = renderCompactSelect({ triggerLabel: 'Sort:' })
+    const slot = container.querySelector('[data-slot="compact-select-trigger-label"]')
+    expect(slot).not.toBeNull()
+    expect(slot?.textContent).toBe('Sort:')
+  })
+
+  it('forwards the trigger to a ref consumer', () => {
+    const ref = React.createRef<HTMLButtonElement>()
+    render(
+      <Select defaultValue="a">
+        <CompactSelectTrigger ref={ref} aria-label="Pick">
+          <SelectValue />
+        </CompactSelectTrigger>
+        <SelectContent>
+          <SelectItem value="a">A</SelectItem>
+        </SelectContent>
+      </Select>,
+    )
+    expect(ref.current).not.toBeNull()
+    expect(ref.current?.tagName).toBe('BUTTON')
+  })
+
+  it('applies className alongside the size variant', () => {
+    const { container } = renderCompactSelect({ className: 'rounded-full border-brand-violet' })
+    const trigger = container.querySelector('[data-slot="compact-select-trigger"]')
+    expect(trigger).toHaveClass('rounded-full')
+    expect(trigger).toHaveClass('border-brand-violet')
+    expect(trigger).toHaveClass('h-7')
+  })
+
+  it('forwards SelectTrigger ARIA props to the underlying Radix trigger', () => {
+    renderCompactSelect({ 'aria-label': 'Period selector' })
+    expect(screen.getByRole('combobox', { name: 'Period selector' })).toBeInTheDocument()
+  })
+
+  it('renders aria-invalid styling when aria-invalid is set', () => {
+    const { container } = renderCompactSelect({ 'aria-invalid': true })
+    const trigger = container.querySelector('[aria-invalid="true"]')
+    expect(trigger).not.toBeNull()
+  })
+})