@duro-app/ui 0.37.1 → 0.38.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duro-app/ui",
-  "version": "0.37.1",
+  "version": "0.38.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -54,7 +54,7 @@
     }
   },
   "dependencies": {
-    "@duro-app/tokens": "^0.37.1"
+    "@duro-app/tokens": "^0.38.0"
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.28.0",

package/src/components/Toast/Toast.meta.ts

@@ -0,0 +1,34 @@
+import type {ComponentMeta} from '../component-meta'
+
+export const meta: ComponentMeta = {
+  description:
+    'Transient, self-dismissing notification for the RESULT of an action (saved, sent, revoked, failed). Mount <ToastProvider> once at the app root and call useToast().toast() from anywhere. Toasts stack and portal above dialogs.',
+  whenToUse: [
+    'Confirming an action succeeded (e.g. "Grant revoked")',
+    'Reporting an action failed, with the reason',
+    'Reversible actions that benefit from an inline Undo',
+  ],
+  whenNotToUse: [
+    'In-form validation errors — use Field.Error or an inline Alert',
+    'Persistent block-level messages — use Callout',
+    'Confirming a destructive action before it runs — use ConfirmDialog / Dialog',
+  ],
+  relatedTo: [
+    {
+      component: 'Alert',
+      relationship: 'Alert for inline/in-form status; Toast for action results',
+    },
+    {
+      component: 'ConfirmDialog',
+      relationship: 'ConfirmDialog gates a destructive action; Toast reports the outcome',
+    },
+  ],
+  example: `function Example() {
+  const {toast} = useToast()
+  return (
+    <Button onClick={() => toast({variant: 'success', message: 'Grant revoked', action: {label: 'Undo', onClick: restore}})}>
+      Revoke
+    </Button>
+  )
+}`,
+}

package/src/components/Toast/Toast.stories.tsx

@@ -0,0 +1,81 @@
+import type {Meta, StoryObj} from '@storybook/react'
+import {expect, userEvent, waitFor} from 'storybook/test'
+import {css, html} from 'react-strict-dom'
+import {ToastProvider, useToast} from './ToastProvider'
+
+const s = css.create({
+  row: {display: 'flex', flexDirection: 'row', gap: 8, flexWrap: 'wrap'},
+  btn: {padding: 8, borderRadius: 6, borderWidth: 1, borderStyle: 'solid', cursor: 'pointer'},
+})
+
+function Triggers() {
+  const {toast} = useToast()
+  return (
+    <html.div style={s.row}>
+      <html.button
+        style={s.btn}
+        onClick={() => toast({variant: 'success', message: 'Grant revoked', duration: 0})}
+      >
+        Show success
+      </html.button>
+      <html.button
+        style={s.btn}
+        onClick={() =>
+          toast({variant: 'error', message: 'Couldn’t revoke: SMTP down', duration: 0})
+        }
+      >
+        Show error
+      </html.button>
+      <html.button
+        style={s.btn}
+        onClick={() =>
+          toast({
+            variant: 'success',
+            message: 'Mapping deleted',
+            duration: 0,
+            action: {label: 'Undo', onClick: () => {}},
+          })
+        }
+      >
+        Show with undo
+      </html.button>
+    </html.div>
+  )
+}
+
+const meta: Meta<typeof ToastProvider> = {
+  title: 'Components/Toast',
+  component: ToastProvider,
+  render: () => (
+    <ToastProvider>
+      <Triggers />
+    </ToastProvider>
+  ),
+}
+export default meta
+type Story = StoryObj<typeof ToastProvider>
+
+export const Success: Story = {
+  play: async ({canvas}) => {
+    await userEvent.click(canvas.getByText('Show success'))
+    const toast = await waitFor(() => canvas.getByRole('status'))
+    await expect(toast).toHaveTextContent('Grant revoked')
+  },
+}
+
+export const Error: Story = {
+  play: async ({canvas}) => {
+    await userEvent.click(canvas.getByText('Show error'))
+    const toast = await waitFor(() => canvas.getByRole('alert'))
+    await expect(toast).toHaveTextContent('Couldn’t revoke: SMTP down')
+  },
+}
+
+export const Dismiss: Story = {
+  play: async ({canvas}) => {
+    await userEvent.click(canvas.getByText('Show success'))
+    await waitFor(() => canvas.getByRole('status'))
+    await userEvent.click(canvas.getByRole('button', {name: 'Dismiss'}))
+    await waitFor(() => expect(canvas.queryByRole('status')).not.toBeInTheDocument())
+  },
+}

package/src/components/Toast/ToastProvider.tsx

@@ -0,0 +1,189 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useSyncExternalStore,
+  type ReactNode,
+} from 'react'
+import {createPortal} from 'react-dom'
+import {html} from 'react-strict-dom'
+import {Icon, type IconName} from '../Icon'
+import {usePortalMount} from '../ThemeProvider/ThemeProvider'
+import {styles} from './styles.css'
+
+export type ToastVariant = 'success' | 'error' | 'info'
+
+export interface ToastAction {
+  label: string
+  onClick: () => void
+}
+
+export interface ToastOptions {
+  /** Visual + semantic tone. Errors announce assertively and linger longer. */
+  variant?: ToastVariant
+  message: ReactNode
+  /** Optional single action, e.g. Undo. Runs, then dismisses the toast. */
+  action?: ToastAction
+  /** Auto-dismiss delay in ms. `0` (or negative) keeps it until dismissed. */
+  duration?: number
+}
+
+export interface ToastContextValue {
+  /** Show a toast; returns its id so it can be dismissed programmatically. */
+  toast: (opts: ToastOptions) => string
+  dismiss: (id: string) => void
+}
+
+interface ToastEntry {
+  id: string
+  variant: ToastVariant
+  message: ReactNode
+  action?: ToastAction
+  duration: number
+}
+
+interface ToastStore {
+  subscribe: (cb: () => void) => () => void
+  getSnapshot: () => readonly ToastEntry[]
+  add: (opts: ToastOptions) => string
+  remove: (id: string) => void
+}
+
+const DEFAULT_DURATION: Record<ToastVariant, number> = {
+  success: 5000,
+  info: 5000,
+  error: 8000,
+}
+
+function createToastStore(): ToastStore {
+  let entries: ToastEntry[] = []
+  let seq = 0
+  const listeners = new Set<() => void>()
+  const notify = () => listeners.forEach((l) => l())
+
+  return {
+    subscribe: (cb) => {
+      listeners.add(cb)
+      return () => listeners.delete(cb)
+    },
+    getSnapshot: () => entries,
+    add: (opts) => {
+      const variant = opts.variant ?? 'info'
+      const id = `toast-${++seq}`
+      const duration = opts.duration ?? DEFAULT_DURATION[variant]
+      entries = [...entries, {id, variant, message: opts.message, action: opts.action, duration}]
+      notify()
+      return id
+    },
+    remove: (id) => {
+      const next = entries.filter((e) => e.id !== id)
+      if (next.length !== entries.length) {
+        entries = next
+        notify()
+      }
+    },
+  }
+}
+
+const variantIcon: Record<ToastVariant, IconName> = {
+  success: 'check-circle-filled',
+  error: 'x-circle-filled',
+  info: 'info-circle-filled',
+}
+const variantIconStyle = {
+  success: styles.iconSuccess,
+  error: styles.iconError,
+  info: styles.iconInfo,
+} as const
+
+const ToastContext = createContext<ToastContextValue | null>(null)
+
+export function useToast(): ToastContextValue {
+  const ctx = useContext(ToastContext)
+  if (!ctx) throw new Error('useToast must be used within a <ToastProvider>')
+  return ctx
+}
+
+function ToastItem({entry, onDismiss}: {entry: ToastEntry; onDismiss: (id: string) => void}) {
+  const {id, variant, message, action, duration} = entry
+
+  useEffect(() => {
+    if (duration <= 0) return
+    const timer = setTimeout(() => onDismiss(id), duration)
+    return () => clearTimeout(timer)
+  }, [id, duration, onDismiss])
+
+  return (
+    <html.div
+      role={variant === 'error' ? 'alert' : 'status'}
+      aria-live={variant === 'error' ? 'assertive' : 'polite'}
+      style={[styles.toast, styles[variant]]}
+    >
+      <html.div style={[styles.iconWrap, variantIconStyle[variant]]}>
+        <Icon name={variantIcon[variant]} size={18} />
+      </html.div>
+      <html.div style={styles.content}>
+        <html.div style={styles.message}>{message}</html.div>
+        {action ? (
+          <html.button
+            type="button"
+            style={styles.action}
+            onClick={() => {
+              action.onClick()
+              onDismiss(id)
+            }}
+          >
+            {action.label}
+          </html.button>
+        ) : null}
+      </html.div>
+      <html.button
+        type="button"
+        aria-label="Dismiss"
+        style={styles.closeBtn}
+        onClick={() => onDismiss(id)}
+      >
+        <Icon name="x-circle" size={16} />
+      </html.button>
+    </html.div>
+  )
+}
+
+export function ToastProvider({children}: {children: ReactNode}) {
+  const storeRef = useRef<ToastStore>(null)
+  if (storeRef.current === null) {
+    storeRef.current = createToastStore()
+  }
+  const store = storeRef.current
+
+  const entries = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot)
+  const mount = usePortalMount()
+
+  const value = useMemo<ToastContextValue>(
+    () => ({
+      toast: (opts) => store.add(opts),
+      dismiss: (id) => store.remove(id),
+    }),
+    [store],
+  )
+
+  const dismiss = useCallback((id: string) => store.remove(id), [store])
+
+  const region = (
+    <html.div role="region" aria-label="Notifications" style={styles.region}>
+      {entries.map((entry) => (
+        <ToastItem key={entry.id} entry={entry} onDismiss={dismiss} />
+      ))}
+    </html.div>
+  )
+
+  return (
+    <ToastContext.Provider value={value}>
+      {children}
+      {mount ? createPortal(region, mount) : region}
+    </ToastContext.Provider>
+  )
+}

package/src/components/Toast/index.ts

@@ -0,0 +1,2 @@
+export {ToastProvider, useToast} from './ToastProvider'
+export type {ToastVariant, ToastOptions, ToastAction, ToastContextValue} from './ToastProvider'

package/src/components/Toast/styles.css.ts

@@ -0,0 +1,115 @@
+import {css} from 'react-strict-dom'
+import {colors} from '@duro-app/tokens/tokens/colors.css'
+import {spacing, radii} from '@duro-app/tokens/tokens/spacing.css'
+import {typography} from '@duro-app/tokens/tokens/typography.css'
+import {shadows} from '@duro-app/tokens/tokens/shadows.css'
+
+const enter = css.keyframes({
+  from: {opacity: 0, transform: 'translateY(10px)'},
+  to: {opacity: 1, transform: 'translateY(0)'},
+})
+
+export const styles = css.create({
+  // Fixed, viewport-anchored stack. Portaled into the ThemeProvider mount so it
+  // layers above dialogs; the container itself is click-through, each toast
+  // re-enables pointer events.
+  region: {
+    position: 'fixed',
+    bottom: spacing.lg,
+    left: 0,
+    right: 0,
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: spacing.sm,
+    paddingLeft: spacing.md,
+    paddingRight: spacing.md,
+    pointerEvents: 'none',
+  },
+  toast: {
+    pointerEvents: 'auto',
+    boxSizing: 'border-box',
+    width: '100%',
+    maxWidth: 440,
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: spacing.sm,
+    padding: spacing.md,
+    borderRadius: radii.sm,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: colors.border,
+    borderLeftWidth: 3,
+    backgroundColor: colors.bgCard,
+    boxShadow: shadows.lg,
+    color: colors.text,
+    fontSize: typography.fontSizeSm,
+    lineHeight: typography.lineHeight,
+    animationName: {
+      default: enter,
+      '@media (prefers-reduced-motion: reduce)': 'none',
+    },
+    animationDuration: '160ms',
+    animationTimingFunction: 'ease-out',
+  },
+  success: {borderLeftColor: colors.successBorder},
+  error: {borderLeftColor: colors.errorBorder},
+  info: {borderLeftColor: colors.infoBorder},
+
+  iconWrap: {
+    flexShrink: 0,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingTop: 1,
+  },
+  iconSuccess: {color: colors.successText},
+  iconError: {color: colors.errorText},
+  iconInfo: {color: colors.infoText},
+
+  content: {
+    flex: 1,
+    minWidth: 0,
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 2,
+  },
+  message: {
+    color: colors.text,
+  },
+  action: {
+    alignSelf: 'flex-start',
+    marginTop: 2,
+    padding: 0,
+    borderWidth: 0,
+    backgroundColor: 'transparent',
+    color: colors.accent,
+    fontSize: typography.fontSizeSm,
+    fontWeight: typography.fontWeightMedium,
+    textDecorationLine: 'underline',
+    cursor: 'pointer',
+    outlineStyle: {default: 'none', ':focus-visible': 'solid'},
+    outlineWidth: 2,
+    outlineColor: colors.accent,
+    outlineOffset: 2,
+    borderRadius: radii.sm,
+  },
+  closeBtn: {
+    flexShrink: 0,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 2,
+    marginTop: -1,
+    borderWidth: 0,
+    backgroundColor: 'transparent',
+    color: {default: colors.textMuted, ':hover': colors.text},
+    cursor: 'pointer',
+    borderRadius: radii.sm,
+    outlineStyle: {default: 'none', ':focus-visible': 'solid'},
+    outlineWidth: 2,
+    outlineColor: colors.accent,
+    outlineOffset: 1,
+  },
+})

package/src/index.ts

@@ -40,6 +40,14 @@ export {Combobox} from './components/Combobox/Combobox'
 export {Select} from './components/Select/Select'
 export {SideNav} from './components/SideNav/SideNav'
 export {Spinner, type SpinnerSize} from './components/Spinner/Spinner'
+export {
+  ToastProvider,
+  useToast,
+  type ToastVariant,
+  type ToastOptions,
+  type ToastAction,
+  type ToastContextValue,
+} from './components/Toast'
 export {
   StatusIcon,
   type StatusIconName,