@proteos/ui 0.45.0 → 0.47.0

package/src/components/toast/index.ts

@@ -0,0 +1,9 @@
+export type {
+  ToastContent,
+  ToastOptions,
+  ToastQueue,
+  ToastRegionProps,
+  ToastVariant,
+  ToastVariants,
+} from './toast'
+export { createToastQueue, ToastRegion, toastStyles } from './toast'

package/src/components/toast/toast.stories.tsx

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { Button } from '@/components/button/button'
+
+import { createToastQueue, ToastRegion } from './toast'
+
+const queue = createToastQueue()
+
+const meta: Meta<typeof ToastRegion> = {
+  title: 'Components/Toast',
+  component: ToastRegion,
+  tags: ['autodocs'],
+  parameters: { layout: 'padded' },
+}
+
+export default meta
+type Story = StoryObj<typeof ToastRegion>
+
+export const Basic: Story = {
+  render: () => (
+    <div className="flex gap-2">
+      <Button
+        variant="secondary"
+        onPress={() => queue.add({ title: 'Saved', variant: 'info' }, { timeout: 4000 })}
+      >
+        Info
+      </Button>
+      <Button
+        variant="secondary"
+        onPress={() =>
+          queue.add(
+            {
+              title: 'Workflow finished',
+              description: 'sync-hubspot succeeded in 0:12',
+              variant: 'success',
+            },
+            { timeout: 5000 },
+          )
+        }
+      >
+        Success
+      </Button>
+      <Button
+        variant="secondary"
+        onPress={() =>
+          queue.add({
+            title: 'Workflow failed',
+            description: 'node "Create deal": hubspot returned 429 rate_limited',
+            variant: 'danger',
+          })
+        }
+      >
+        Danger (sticky)
+      </Button>
+      <ToastRegion queue={queue} />
+    </div>
+  ),
+}

package/src/components/toast/toast.test.tsx

@@ -0,0 +1,34 @@
+import { act, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it } from 'vitest'
+
+import { createToastQueue, ToastRegion } from './toast'
+
+describe('Toast', () => {
+  it('renders nothing until a toast is queued, then shows title + description', () => {
+    const queue = createToastQueue()
+    render(<ToastRegion queue={queue} />)
+    expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument()
+
+    act(() => {
+      queue.add({
+        title: 'Workflow finished',
+        description: 'sync-hubspot succeeded',
+        variant: 'success',
+      })
+    })
+    expect(screen.getByText('Workflow finished')).toBeInTheDocument()
+    expect(screen.getByText('sync-hubspot succeeded')).toBeInTheDocument()
+  })
+
+  it('dismisses via the close button', async () => {
+    const queue = createToastQueue()
+    render(<ToastRegion queue={queue} />)
+    act(() => {
+      queue.add({ title: 'Hello' })
+    })
+    const user = userEvent.setup()
+    await user.click(screen.getByRole('button', { name: 'Dismiss' }))
+    expect(screen.queryByText('Hello')).not.toBeInTheDocument()
+  })
+})

package/src/components/toast/toast.tsx

@@ -0,0 +1,121 @@
+import { CircleAlert, CircleCheck, Info, X as XLucide } from 'lucide-react'
+import {
+  Button as AriaButton,
+  Text as AriaText,
+  UNSTABLE_Toast as AriaToast,
+  UNSTABLE_ToastContent as AriaToastContent,
+  type ToastOptions as AriaToastOptions,
+  UNSTABLE_ToastQueue as AriaToastQueue,
+  UNSTABLE_ToastRegion as AriaToastRegion,
+} from 'react-aria-components'
+import { tv, type VariantProps } from 'tailwind-variants'
+
+import { cn } from '../../lib/cn'
+
+/* =========================================================================
+   Toast — brief, transient notification stack (bottom-right). Wraps RAC's
+   ToastRegion / Toast (queue, ARIA live region, focus management, timeouts).
+
+   Usage: create ONE queue per app (`createToastQueue()`), mount ONE
+   `<ToastRegion queue={queue} />` near the root, and push from anywhere
+   with `queue.add({ title, description?, variant? }, { timeout })`.
+   ========================================================================= */
+
+export type ToastVariant = 'info' | 'success' | 'danger'
+
+/** The payload a caller enqueues. Pure data — the region renders it. */
+export interface ToastContent {
+  title: string
+  description?: string
+  variant?: ToastVariant
+}
+
+export type ToastQueue = AriaToastQueue<ToastContent>
+export type ToastOptions = AriaToastOptions
+
+/** Creates the app-wide queue. `maxVisibleToasts` bounds the on-screen stack. */
+export function createToastQueue(options: { maxVisibleToasts?: number } = {}): ToastQueue {
+  return new AriaToastQueue<ToastContent>({ maxVisibleToasts: options.maxVisibleToasts ?? 3 })
+}
+
+export const toastStyles = tv({
+  slots: {
+    root: [
+      'flex items-start gap-3 w-[360px] max-w-[calc(100vw-32px)]',
+      'rounded-lg border border-rule bg-surface shadow-float',
+      'px-3.5 py-3 outline-none',
+      'focus-visible:shadow-focus',
+      'entering:animate-in entering:fade-in-0 entering:slide-in-from-bottom-2 entering:duration-200',
+      'exiting:animate-out exiting:fade-out-0 exiting:duration-150',
+    ],
+    icon: 'size-4 shrink-0 mt-0.5',
+    title: 'font-sans text-[13px] font-medium leading-[1.4] text-ink',
+    description: 'font-sans text-[12.5px] leading-[1.5] text-ink-3 break-words',
+  },
+  variants: {
+    variant: {
+      info: { icon: 'text-ink-3' },
+      success: { icon: 'text-success' },
+      danger: { icon: 'text-danger' },
+    },
+  },
+  defaultVariants: { variant: 'info' },
+})
+
+export type ToastVariants = VariantProps<typeof toastStyles>
+
+const VARIANT_ICON = {
+  info: Info,
+  success: CircleCheck,
+  danger: CircleAlert,
+} as const
+
+export interface ToastRegionProps {
+  queue: ToastQueue
+  className?: string
+}
+
+/** The single live region that renders queued toasts. */
+export function ToastRegion({ queue, className }: ToastRegionProps) {
+  return (
+    <AriaToastRegion
+      queue={queue}
+      className={cn(
+        'fixed bottom-4 right-4 z-[1300] flex flex-col-reverse gap-2 outline-none',
+        className,
+      )}
+    >
+      {({ toast }) => {
+        const variant = toast.content.variant ?? 'info'
+        const Icon = VARIANT_ICON[variant]
+        const { root, icon, title, description } = toastStyles({ variant })
+        return (
+          <AriaToast toast={toast} className={root()}>
+            <Icon className={icon()} aria-hidden />
+            <AriaToastContent className="flex flex-col gap-0.5 flex-1 min-w-0">
+              <AriaText slot="title" className={title()}>
+                {toast.content.title}
+              </AriaText>
+              {toast.content.description ? (
+                <AriaText slot="description" className={description()}>
+                  {toast.content.description}
+                </AriaText>
+              ) : null}
+            </AriaToastContent>
+            <AriaButton
+              slot="close"
+              aria-label="Dismiss"
+              className={cn(
+                'shrink-0 inline-flex items-center justify-center size-6 rounded-md',
+                'text-ink-4 hover:text-ink hover:bg-surface-2 cursor-pointer outline-none',
+                'focus-visible:shadow-focus',
+              )}
+            >
+              <XLucide className="size-3.5" />
+            </AriaButton>
+          </AriaToast>
+        )
+      }}
+    </AriaToastRegion>
+  )
+}

package/src/index.ts

@@ -9,6 +9,7 @@ export * from './components/button'
 export * from './components/card'
 export * from './components/channel-icon'
 export * from './components/checkbox'
+export * from './components/color-input'
 export * from './components/combobox'
 export * from './components/command'
 export * from './components/currency-input'
@@ -22,6 +23,7 @@ export * from './components/error-animation'
 export * from './components/field'
 export * from './components/file-field'
 export * from './components/file-viewer'
+export * from './components/icon-picker'
 export * from './components/image-attachment'
 export * from './components/image-lightbox'
 export * from './components/input'
@@ -47,6 +49,7 @@ export * from './components/tabs'
 export * from './components/tag-input'
 export * from './components/textarea'
 export * from './components/time-field'
+export * from './components/toast'
 export * from './components/tooltip'
 
 export { cn } from './lib/cn'

package/src/test/setup.ts

@@ -4,6 +4,36 @@ import { afterEach, expect } from 'vitest'
 
 expect.extend(matchers)
 
+// jsdom implements neither Element.scrollTo nor IntersectionObserver, both of
+// which the virtualized DataTable calls on mount. Stub them so scrolling
+// components can be rendered in tests at all.
+if (!Element.prototype.scrollTo) {
+  Element.prototype.scrollTo = () => {}
+}
+if (!('ResizeObserver' in globalThis)) {
+  class NoopResizeObserver implements ResizeObserver {
+    disconnect() {}
+    observe() {}
+    unobserve() {}
+  }
+  globalThis.ResizeObserver = NoopResizeObserver as unknown as typeof ResizeObserver
+}
+if (!('IntersectionObserver' in globalThis)) {
+  class NoopIntersectionObserver implements IntersectionObserver {
+    readonly root = null
+    readonly rootMargin = ''
+    readonly thresholds: ReadonlyArray<number> = []
+    disconnect() {}
+    observe() {}
+    unobserve() {}
+    takeRecords(): IntersectionObserverEntry[] {
+      return []
+    }
+  }
+  globalThis.IntersectionObserver =
+    NoopIntersectionObserver as unknown as typeof IntersectionObserver
+}
+
 afterEach(() => {
   cleanup()
 })