@duro-app/ui 0.12.2 → 0.14.1

package/src/components/Menu/Menu.stories.tsx

@@ -0,0 +1,146 @@
+import type {Meta, StoryObj} from '@storybook/react'
+import {expect, fn} from 'storybook/test'
+import {Menu} from './Menu'
+
+const meta: Meta = {
+  title: 'Components/Menu',
+}
+
+export default meta
+type Story = StoryObj
+
+export const Default: Story = {
+  render: () => {
+    const handleSettings = fn()
+    const handleProfile = fn()
+    return (
+      <Menu.Root>
+        <Menu.Trigger>
+          Options{' '}
+          <svg
+            width="12"
+            height="12"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            aria-hidden="true"
+            style={{verticalAlign: 'middle'}}
+          >
+            <path d="M6 9l6 6 6-6" />
+          </svg>
+        </Menu.Trigger>
+        <Menu.Popup>
+          <Menu.Item onClick={handleSettings}>Settings</Menu.Item>
+          <Menu.Item onClick={handleProfile}>Profile</Menu.Item>
+          <Menu.Item>Logout</Menu.Item>
+        </Menu.Popup>
+      </Menu.Root>
+    )
+  },
+  play: async ({canvas}) => {
+    const trigger = canvas.getByRole('button', {name: /Options/})
+    await expect(trigger).toHaveAttribute('aria-haspopup', 'menu')
+    await expect(trigger).toHaveAttribute('aria-expanded', 'false')
+    await expect(canvas.queryByRole('menu')).not.toBeInTheDocument()
+  },
+}
+
+export const OpenClose: Story = {
+  render: () => (
+    <Menu.Root>
+      <Menu.Trigger>Options</Menu.Trigger>
+      <Menu.Popup>
+        <Menu.Item>Settings</Menu.Item>
+        <Menu.Item>Profile</Menu.Item>
+        <Menu.Item>Logout</Menu.Item>
+      </Menu.Popup>
+    </Menu.Root>
+  ),
+  play: async ({canvas, userEvent}) => {
+    const trigger = canvas.getByRole('button', {name: /Options/})
+
+    await userEvent.click(trigger)
+    await expect(trigger).toHaveAttribute('aria-expanded', 'true')
+    const items = canvas.getAllByRole('menuitem')
+    await expect(items.length).toBe(3)
+
+    await userEvent.keyboard('{Escape}')
+    await expect(canvas.queryByRole('menu')).not.toBeInTheDocument()
+  },
+}
+
+export const KeyboardNavigation: Story = {
+  render: () => (
+    <Menu.Root>
+      <Menu.Trigger>
+        Navigate{' '}
+        <svg
+          width="12"
+          height="12"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          aria-hidden="true"
+          style={{verticalAlign: 'middle'}}
+        >
+          <path d="M6 9l6 6 6-6" />
+        </svg>
+      </Menu.Trigger>
+      <Menu.Popup>
+        <Menu.Item>First</Menu.Item>
+        <Menu.Item>Second</Menu.Item>
+        <Menu.Item>Third</Menu.Item>
+      </Menu.Popup>
+    </Menu.Root>
+  ),
+  play: async ({canvas, userEvent}) => {
+    const trigger = canvas.getByRole('button', {name: /Navigate/})
+    await userEvent.click(trigger)
+    await expect(canvas.getByRole('menu')).toBeInTheDocument()
+  },
+}
+
+export const WithLinks: Story = {
+  render: () => (
+    <Menu.Root>
+      <Menu.Trigger>
+        Account{' '}
+        <svg
+          width="12"
+          height="12"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          aria-hidden="true"
+          style={{verticalAlign: 'middle'}}
+        >
+          <path d="M6 9l6 6 6-6" />
+        </svg>
+      </Menu.Trigger>
+      <Menu.Popup>
+        <Menu.LinkItem href="#admin">Admin</Menu.LinkItem>
+        <Menu.LinkItem href="#settings">Settings</Menu.LinkItem>
+        <Menu.LinkItem href="#logout">Logout</Menu.LinkItem>
+      </Menu.Popup>
+    </Menu.Root>
+  ),
+  play: async ({canvas, userEvent}) => {
+    await userEvent.click(canvas.getByRole('button', {name: /Account/}))
+
+    const items = canvas.getAllByRole('menuitem')
+    await expect(items.length).toBe(3)
+
+    // Link items should be anchor elements with href
+    await expect(items[0].tagName).toBe('A')
+    await expect(items[0]).toHaveAttribute('href', '#admin')
+  },
+}

package/src/components/Menu/Menu.tsx

@@ -0,0 +1,151 @@
+import {type ReactNode, useRef, useId, useEffect} from 'react'
+import {html} from 'react-strict-dom'
+import {styles} from './styles.css'
+import {MenuContext, useMenu} from './MenuContext'
+import {useMenuRoot} from './useMenuRoot'
+
+// --- Root ---
+interface RootProps {
+  children: ReactNode
+}
+
+function Root({children}: RootProps) {
+  const {ctx, rootRef} = useMenuRoot()
+
+  return (
+    <MenuContext.Provider value={ctx}>
+      <html.div ref={rootRef} style={styles.root}>
+        {children}
+      </html.div>
+    </MenuContext.Provider>
+  )
+}
+
+// --- Trigger ---
+function Trigger({children}: {children: ReactNode}) {
+  const {open, toggle, menuId, triggerRef} = useMenu()
+  const localRef = useRef<HTMLButtonElement>(null)
+
+  // Sync local ref to context triggerRef
+  useEffect(() => {
+    triggerRef.current = localRef.current
+  })
+
+  return (
+    <html.button
+      ref={localRef}
+      type="button"
+      onClick={toggle}
+      aria-expanded={open}
+      aria-haspopup="menu"
+      aria-controls={open ? menuId : undefined}
+      style={styles.trigger}
+    >
+      {children}
+    </html.button>
+  )
+}
+
+// --- Popup ---
+interface PopupProps {
+  children: ReactNode
+  align?: 'start' | 'end'
+}
+
+function Popup({children, align = 'start'}: PopupProps) {
+  const {open, close, menuId, highlightedId} = useMenu()
+
+  if (!open) return null
+
+  return (
+    <>
+      <html.div style={styles.backdrop} onClick={close} />
+      <html.div
+        id={menuId}
+        role="menu"
+        aria-activedescendant={highlightedId ?? undefined}
+        style={[styles.popup, align === 'end' && styles.popupEnd]}
+      >
+        {children}
+      </html.div>
+    </>
+  )
+}
+
+// --- Item ---
+interface ItemProps {
+  onClick?: () => void
+  children: ReactNode
+}
+
+function Item({onClick, children}: ItemProps) {
+  const {close, highlightedId, setHighlightedId, registerItem} = useMenu()
+  const id = useId()
+  const ref = useRef<HTMLDivElement>(null)
+  const isHighlighted = highlightedId === id
+
+  useEffect(() => {
+    const el = ref.current
+    if (!el) return
+    return registerItem(id, el)
+  }, [id, registerItem])
+
+  const handleClick = () => {
+    onClick?.()
+    close()
+  }
+
+  return (
+    <html.div
+      ref={ref}
+      id={id}
+      role="menuitem"
+      onClick={handleClick}
+      onPointerEnter={() => setHighlightedId(id)}
+      style={[styles.item, isHighlighted && styles.itemHighlighted]}
+    >
+      {children}
+    </html.div>
+  )
+}
+
+// --- LinkItem ---
+interface LinkItemProps {
+  href: string
+  children: ReactNode
+}
+
+function LinkItem({href, children}: LinkItemProps) {
+  const {close, highlightedId, setHighlightedId, registerItem} = useMenu()
+  const id = useId()
+  const ref = useRef<HTMLAnchorElement>(null)
+  const isHighlighted = highlightedId === id
+
+  useEffect(() => {
+    const el = ref.current
+    if (!el) return
+    return registerItem(id, el)
+  }, [id, registerItem])
+
+  return (
+    <html.a
+      ref={ref}
+      id={id}
+      href={href}
+      onClick={close}
+      role="menuitem"
+      onPointerEnter={() => setHighlightedId(id)}
+      style={[styles.item, styles.linkItem, isHighlighted && styles.itemHighlighted]}
+    >
+      {children}
+    </html.a>
+  )
+}
+
+export const Menu = {
+  Root,
+  Trigger,
+  Popup,
+  Item,
+  LinkItem,
+}

package/src/components/Menu/MenuContext.ts

@@ -0,0 +1,20 @@
+import {createContext, useContext} from 'react'
+
+export interface MenuContextValue {
+  open: boolean
+  toggle: () => void
+  close: () => void
+  menuId: string
+  highlightedId: string | null
+  setHighlightedId: (id: string | null) => void
+  registerItem: (id: string, element: HTMLElement) => () => void
+  triggerRef: React.RefObject<HTMLButtonElement | null>
+}
+
+export const MenuContext = createContext<MenuContextValue | null>(null)
+
+export function useMenu() {
+  const ctx = useContext(MenuContext)
+  if (!ctx) throw new Error('Menu compound components must be used within Menu.Root')
+  return ctx
+}

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

@@ -0,0 +1,89 @@
+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'
+
+export const styles = css.create({
+  root: {
+    position: 'relative',
+    display: 'inline-flex',
+  },
+  trigger: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: spacing.sm,
+    paddingTop: spacing.sm,
+    paddingBottom: spacing.sm,
+    paddingLeft: spacing.md,
+    paddingRight: spacing.md,
+    fontFamily: typography.fontFamily,
+    fontSize: typography.fontSizeSm,
+    color: colors.text,
+    backgroundColor: {
+      default: 'transparent',
+      ':hover': colors.bgCardHover,
+    },
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: colors.border,
+    borderRadius: radii.sm,
+    cursor: 'pointer',
+    transitionProperty: 'background-color, border-color',
+    transitionDuration: '150ms',
+  },
+  backdrop: {
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: 49,
+  },
+  popup: {
+    position: 'absolute',
+    top: '100%',
+    left: 0,
+    marginTop: spacing.xs,
+    backgroundColor: colors.bgCard,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: colors.border,
+    borderRadius: radii.sm,
+    boxShadow: shadows.md,
+    paddingTop: spacing.xs,
+    paddingBottom: spacing.xs,
+    minWidth: 160,
+    zIndex: 50,
+  },
+  popupEnd: {
+    left: 'auto',
+    right: 0,
+  },
+  item: {
+    display: 'flex',
+    alignItems: 'center',
+    paddingTop: spacing.sm,
+    paddingBottom: spacing.sm,
+    paddingLeft: spacing.md,
+    paddingRight: spacing.md,
+    fontSize: typography.fontSizeSm,
+    fontFamily: typography.fontFamily,
+    color: colors.text,
+    borderRadius: radii.sm,
+    cursor: 'pointer',
+    backgroundColor: 'transparent',
+    transitionProperty: 'background-color',
+    transitionDuration: '150ms',
+  },
+  itemHighlighted: {
+    backgroundColor: colors.bgCardHover,
+  },
+  linkItem: {
+    textDecoration: 'none',
+    color: {
+      default: colors.text,
+      ':hover': colors.text,
+    },
+  },
+})

package/src/components/Menu/useMenuRoot.ts

@@ -0,0 +1,136 @@
+import {useState, useCallback, useRef, useId, useEffect} from 'react'
+import type {MenuContextValue} from './MenuContext'
+
+export function useMenuRoot() {
+  const [open, setOpen] = useState(false)
+  const [highlightedId, setHighlightedId] = useState<string | null>(null)
+  const menuId = useId()
+  const rootRef = useRef<HTMLDivElement>(null)
+  const triggerRef = useRef<HTMLButtonElement | null>(null)
+  const itemsRef = useRef(new Map<string, HTMLElement>())
+  const orderRef = useRef<string[]>([])
+  const needsInitialHighlightRef = useRef(false)
+
+  const close = useCallback(() => {
+    setOpen(false)
+    setHighlightedId(null)
+    needsInitialHighlightRef.current = false
+    triggerRef.current?.focus()
+  }, [])
+
+  const toggle = useCallback(() => {
+    setOpen((prev) => {
+      if (!prev) {
+        needsInitialHighlightRef.current = true
+      } else {
+        setHighlightedId(null)
+        needsInitialHighlightRef.current = false
+      }
+      return !prev
+    })
+  }, [])
+
+  // Highlight the first item after items register on open.
+  // Child effects (item registration) run before this parent effect,
+  // so orderRef is populated by the time this runs.
+  useEffect(() => {
+    if (open && needsInitialHighlightRef.current) {
+      needsInitialHighlightRef.current = false
+      const order = orderRef.current
+      if (order.length > 0) {
+        setHighlightedId(order[0])
+      }
+    }
+  }, [open])
+
+  const registerItem = useCallback((id: string, element: HTMLElement) => {
+    itemsRef.current.set(id, element)
+    const map = itemsRef.current
+    const ids = [...map.keys()]
+    ids.sort((a, b) => {
+      const elA = map.get(a)
+      const elB = map.get(b)
+      if (!elA || !elB) return 0
+      return elA.compareDocumentPosition(elB) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1
+    })
+    orderRef.current = ids
+    return () => {
+      itemsRef.current.delete(id)
+      orderRef.current = orderRef.current.filter((i) => i !== id)
+    }
+  }, [])
+
+  // Native keydown for full KeyboardEvent access (preventDefault)
+  useEffect(() => {
+    const root = rootRef.current
+    if (!root || !open) return
+
+    function handleKeyDown(e: KeyboardEvent) {
+      const order = orderRef.current
+      if (order.length === 0) return
+
+      switch (e.key) {
+        case 'ArrowDown': {
+          e.preventDefault()
+          setHighlightedId((prev) => {
+            const idx = prev ? order.indexOf(prev) : -1
+            return order[(idx + 1) % order.length]
+          })
+          break
+        }
+        case 'ArrowUp': {
+          e.preventDefault()
+          setHighlightedId((prev) => {
+            const idx = prev ? order.indexOf(prev) : 0
+            return order[(idx - 1 + order.length) % order.length]
+          })
+          break
+        }
+        case 'Home': {
+          e.preventDefault()
+          setHighlightedId(order[0])
+          break
+        }
+        case 'End': {
+          e.preventDefault()
+          setHighlightedId(order[order.length - 1])
+          break
+        }
+        case 'Enter':
+        case ' ': {
+          e.preventDefault()
+          const items = itemsRef.current
+          setHighlightedId((prev) => {
+            if (prev) {
+              const el = items.get(prev)
+              el?.click()
+            }
+            return prev
+          })
+          break
+        }
+        case 'Escape':
+        case 'Tab': {
+          close()
+          break
+        }
+      }
+    }
+
+    root.addEventListener('keydown', handleKeyDown)
+    return () => root.removeEventListener('keydown', handleKeyDown)
+  }, [open, close])
+
+  const ctx: MenuContextValue = {
+    open,
+    toggle,
+    close,
+    menuId,
+    highlightedId,
+    setHighlightedId,
+    registerItem,
+    triggerRef,
+  }
+
+  return {ctx, rootRef}
+}

package/src/components/PageShell/PageShell.tsx

@@ -0,0 +1,45 @@
+import type {ReactNode} from 'react'
+import {html} from 'react-strict-dom'
+import {styles} from './styles.css'
+
+export type PageShellMaxWidth = 'sm' | 'md' | 'lg' | 'full'
+export type PageShellPadding = 'sm' | 'md' | 'lg'
+
+interface PageShellProps {
+  /** Max-width preset: sm (600), md (800), lg (1200), full (none). Default: 'lg' */
+  maxWidth?: PageShellMaxWidth
+  /** Horizontal padding preset. Default: 'md' (24px) */
+  padding?: PageShellPadding
+  /** Header element rendered above the main content with same constraints */
+  header?: ReactNode
+  children: ReactNode
+}
+
+const maxWidthMap = {
+  sm: styles.maxSm,
+  md: styles.maxMd,
+  lg: styles.maxLg,
+  full: null,
+} as const
+
+const paddingMap = {
+  sm: styles.padSm,
+  md: styles.padMd,
+  lg: styles.padLg,
+} as const
+
+export function PageShell({maxWidth = 'lg', padding = 'md', header, children}: PageShellProps) {
+  const mw = maxWidthMap[maxWidth]
+  const pad = paddingMap[padding]
+
+  return (
+    <html.div style={styles.root}>
+      {header != null && (
+        <html.header style={[styles.container, styles.maxLg, pad, styles.headerPadding]}>
+          {header}
+        </html.header>
+      )}
+      <html.main style={[styles.container, mw, pad, styles.mainPadding]}>{children}</html.main>
+    </html.div>
+  )
+}

package/src/components/PageShell/index.ts

@@ -0,0 +1,2 @@
+export {PageShell} from './PageShell'
+export type {PageShellMaxWidth, PageShellPadding} from './PageShell'

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

@@ -0,0 +1,26 @@
+import {css} from 'react-strict-dom'
+import {layoutSpacing} from '@duro-app/tokens/tokens/layout-spacing.css'
+import {spacing} from '@duro-app/tokens/tokens/spacing.css'
+
+export const styles = css.create({
+  root: {
+    width: '100%',
+  },
+  container: {
+    width: '100%',
+    marginLeft: 'auto',
+    marginRight: 'auto',
+    boxSizing: 'border-box',
+  },
+  // Max-width presets
+  maxSm: {maxWidth: 600},
+  maxMd: {maxWidth: 800},
+  maxLg: {maxWidth: 1200},
+  // Horizontal padding
+  padSm: {paddingLeft: layoutSpacing.containerSm, paddingRight: layoutSpacing.containerSm},
+  padMd: {paddingLeft: layoutSpacing.containerMd, paddingRight: layoutSpacing.containerMd},
+  padLg: {paddingLeft: layoutSpacing.containerLg, paddingRight: layoutSpacing.containerLg},
+  // Vertical spacing
+  headerPadding: {paddingTop: spacing.lg},
+  mainPadding: {paddingTop: spacing.xl, paddingBottom: spacing.xl},
+})

package/src/components/ScrollArea/ScrollArea.stories.tsx

@@ -0,0 +1,82 @@
+import type {Meta, StoryObj} from '@storybook/react'
+import {expect} from 'storybook/test'
+import {css, html} from 'react-strict-dom'
+import {ScrollArea} from './ScrollArea'
+
+const meta: Meta = {
+  title: 'Components/ScrollArea',
+}
+
+export default meta
+type Story = StoryObj
+
+const demoStyles = css.create({
+  container: {
+    width: 300,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: '#333333',
+    borderRadius: 8,
+  },
+  item: {
+    paddingTop: 12,
+    paddingBottom: 12,
+    paddingLeft: 16,
+    paddingRight: 16,
+    borderBottomWidth: 1,
+    borderBottomStyle: 'solid',
+    borderBottomColor: '#1a1a1a',
+    fontSize: 14,
+    color: '#e5e5e5',
+  },
+})
+
+const items = Array.from({length: 30}, (_, i) => `Item ${i + 1}`)
+
+export const Default: Story = {
+  render: () => (
+    <html.div style={demoStyles.container}>
+      <ScrollArea.Root>
+        <ScrollArea.Viewport maxHeight={300}>
+          <ScrollArea.Content>
+            {items.map((item) => (
+              <html.div key={item} style={demoStyles.item}>
+                {item}
+              </html.div>
+            ))}
+          </ScrollArea.Content>
+        </ScrollArea.Viewport>
+        <ScrollArea.Scrollbar orientation="vertical">
+          <ScrollArea.Thumb />
+        </ScrollArea.Scrollbar>
+      </ScrollArea.Root>
+    </html.div>
+  ),
+  play: async ({canvas}) => {
+    // Content renders
+    await expect(canvas.getByText('Item 1')).toBeInTheDocument()
+    await expect(canvas.getByText('Item 10')).toBeInTheDocument()
+  },
+}
+
+export const ShortContent: Story = {
+  render: () => (
+    <html.div style={demoStyles.container}>
+      <ScrollArea.Root>
+        <ScrollArea.Viewport maxHeight={300}>
+          <ScrollArea.Content>
+            <html.div style={demoStyles.item}>Only one item</html.div>
+            <html.div style={demoStyles.item}>Two items</html.div>
+          </ScrollArea.Content>
+        </ScrollArea.Viewport>
+        <ScrollArea.Scrollbar orientation="vertical">
+          <ScrollArea.Thumb />
+        </ScrollArea.Scrollbar>
+      </ScrollArea.Root>
+    </html.div>
+  ),
+  play: async ({canvas}) => {
+    await expect(canvas.getByText('Only one item')).toBeInTheDocument()
+    await expect(canvas.getByText('Two items')).toBeInTheDocument()
+  },
+}