@duro-app/ui 0.12.2 → 0.14.0

package/src/components/ScrollArea/ScrollArea.tsx

@@ -0,0 +1,170 @@
+import {type ReactNode, useRef, useCallback} from 'react'
+import {html} from 'react-strict-dom'
+import {styles} from './styles.css'
+import {ScrollAreaContext, useScrollArea} from './ScrollAreaContext'
+import {useScrollAreaRoot} from './useScrollAreaRoot'
+
+// --- Root ---
+
+interface RootProps {
+  children: ReactNode
+}
+
+function Root({children}: RootProps) {
+  const ctx = useScrollAreaRoot()
+
+  return (
+    <ScrollAreaContext.Provider value={ctx}>
+      <html.div style={styles.root}>{children}</html.div>
+    </ScrollAreaContext.Provider>
+  )
+}
+
+// --- Viewport ---
+
+interface ViewportProps {
+  children: ReactNode
+  maxHeight?: number | string
+}
+
+function Viewport({children, maxHeight}: ViewportProps) {
+  const {viewportRef} = useScrollArea()
+
+  return (
+    <html.div
+      ref={viewportRef}
+      style={[styles.viewport, maxHeight != null && styles.viewportMaxHeight(maxHeight)]}
+    >
+      {children}
+    </html.div>
+  )
+}
+
+// --- Content ---
+
+interface ContentProps {
+  children: ReactNode
+}
+
+function Content({children}: ContentProps) {
+  const {contentRef} = useScrollArea()
+  return (
+    <html.div ref={contentRef} style={styles.content}>
+      {children}
+    </html.div>
+  )
+}
+
+// --- Scrollbar ---
+
+type ScrollbarOrientation = 'vertical' | 'horizontal'
+
+interface ScrollbarProps {
+  orientation?: ScrollbarOrientation
+  children: ReactNode
+}
+
+function Scrollbar({orientation = 'vertical', children}: ScrollbarProps) {
+  const {scrolling, scrollHeight, scrollWidth, clientHeight, clientWidth} = useScrollArea()
+
+  // Hide scrollbar when content fits
+  const hasOverflow =
+    orientation === 'vertical' ? scrollHeight > clientHeight : scrollWidth > clientWidth
+
+  if (!hasOverflow) return null
+
+  return (
+    <html.div
+      style={[
+        styles.scrollbar,
+        orientation === 'vertical' ? styles.scrollbarVertical : styles.scrollbarHorizontal,
+        scrolling ? styles.scrollbarVisible : styles.scrollbarHidden,
+      ]}
+    >
+      {children}
+    </html.div>
+  )
+}
+
+// --- Thumb ---
+
+interface ThumbProps {
+  orientation?: ScrollbarOrientation
+}
+
+function Thumb({orientation = 'vertical'}: ThumbProps) {
+  const {viewportRef, scrollTop, scrollLeft, scrollHeight, scrollWidth, clientHeight, clientWidth} =
+    useScrollArea()
+  const draggingRef = useRef(false)
+  const startPosRef = useRef(0)
+  const startScrollRef = useRef(0)
+
+  const isVertical = orientation === 'vertical'
+
+  const thumbSizePercent = isVertical
+    ? Math.max((clientHeight / scrollHeight) * 100, 10)
+    : Math.max((clientWidth / scrollWidth) * 100, 10)
+
+  const maxScroll = isVertical ? scrollHeight - clientHeight : scrollWidth - clientWidth
+  const trackSize = isVertical ? clientHeight : clientWidth
+  const thumbPixelSize = (thumbSizePercent / 100) * trackSize
+  const scrollOffset = isVertical ? scrollTop : scrollLeft
+  const thumbOffset = maxScroll > 0 ? (scrollOffset / maxScroll) * (trackSize - thumbPixelSize) : 0
+
+  const thumbStyle = isVertical
+    ? styles.thumbVertical(`${thumbSizePercent}%`, `translateY(${thumbOffset}px)`)
+    : styles.thumbHorizontal(`${thumbSizePercent}%`, `translateX(${thumbOffset}px)`)
+
+  const handlePointerDown = useCallback(
+    (e: React.PointerEvent) => {
+      e.preventDefault()
+      draggingRef.current = true
+      startPosRef.current = isVertical ? e.clientY : e.clientX
+      startScrollRef.current = isVertical
+        ? (viewportRef.current?.scrollTop ?? 0)
+        : (viewportRef.current?.scrollLeft ?? 0)
+      ;(e.target as HTMLElement).setPointerCapture(e.pointerId)
+    },
+    [isVertical, viewportRef],
+  )
+
+  const handlePointerMove = useCallback(
+    (e: React.PointerEvent) => {
+      if (!draggingRef.current) return
+      const vp = viewportRef.current
+      if (!vp) return
+
+      const delta = (isVertical ? e.clientY : e.clientX) - startPosRef.current
+      const scrollRatio = maxScroll / (trackSize - thumbPixelSize)
+      const scrollDelta = delta * scrollRatio
+
+      if (isVertical) {
+        vp.scrollTop = startScrollRef.current + scrollDelta
+      } else {
+        vp.scrollLeft = startScrollRef.current + scrollDelta
+      }
+    },
+    [isVertical, maxScroll, trackSize, thumbPixelSize, viewportRef],
+  )
+
+  const handlePointerUp = useCallback(() => {
+    draggingRef.current = false
+  }, [])
+
+  return (
+    <html.div
+      onPointerDown={handlePointerDown}
+      onPointerMove={handlePointerMove}
+      onPointerUp={handlePointerUp}
+      style={[styles.thumb, thumbStyle]}
+    />
+  )
+}
+
+export const ScrollArea = {
+  Root,
+  Viewport,
+  Content,
+  Scrollbar,
+  Thumb,
+}

package/src/components/ScrollArea/ScrollAreaContext.ts

@@ -0,0 +1,21 @@
+import {createContext, useContext} from 'react'
+
+export interface ScrollAreaContextValue {
+  viewportRef: React.RefObject<HTMLDivElement | null>
+  contentRef: React.RefObject<HTMLDivElement | null>
+  scrollTop: number
+  scrollLeft: number
+  scrollHeight: number
+  scrollWidth: number
+  clientHeight: number
+  clientWidth: number
+  scrolling: boolean
+}
+
+export const ScrollAreaContext = createContext<ScrollAreaContextValue | null>(null)
+
+export function useScrollArea() {
+  const ctx = useContext(ScrollAreaContext)
+  if (!ctx) throw new Error('ScrollArea compound components must be used within ScrollArea.Root')
+  return ctx
+}

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

@@ -0,0 +1,81 @@
+import {css} from 'react-strict-dom'
+import {colors} from '@duro-app/tokens/tokens/colors.css'
+import {radii} from '@duro-app/tokens/tokens/spacing.css'
+
+export const styles = css.create({
+  root: {
+    position: 'relative',
+    overflow: 'hidden',
+  },
+  viewport: {
+    width: '100%',
+    height: '100%',
+    overflowX: 'auto',
+    overflowY: 'auto',
+    // Hide native scrollbar
+    scrollbarWidth: 'none',
+  },
+  content: {
+    minWidth: '100%',
+    minHeight: '100%',
+  },
+  scrollbar: {
+    position: 'absolute',
+    zIndex: 1,
+    display: 'flex',
+    touchAction: 'none',
+    userSelect: 'none',
+    transitionProperty: 'opacity',
+    transitionDuration: '200ms',
+    transitionTimingFunction: 'ease',
+  },
+  scrollbarVertical: {
+    top: 0,
+    right: 0,
+    bottom: 0,
+    width: 8,
+    flexDirection: 'column',
+    paddingTop: 2,
+    paddingBottom: 2,
+    paddingRight: 2,
+  },
+  scrollbarHorizontal: {
+    left: 0,
+    right: 0,
+    bottom: 0,
+    height: 8,
+    flexDirection: 'row',
+    paddingLeft: 2,
+    paddingRight: 2,
+    paddingBottom: 2,
+  },
+  scrollbarHidden: {
+    opacity: 0,
+  },
+  scrollbarVisible: {
+    opacity: 1,
+  },
+  thumb: {
+    position: 'relative',
+    flex: 1,
+    backgroundColor: {
+      default: colors.border,
+      ':hover': colors.textMuted,
+    },
+    borderRadius: radii.full,
+    transitionProperty: 'background-color',
+    transitionDuration: '150ms',
+  },
+  // Dynamic styles — simple identifier params only (StyleX constraint)
+  viewportMaxHeight: (maxHeight: number | string) => ({
+    maxHeight,
+  }),
+  thumbVertical: (height: string, transform: string) => ({
+    height,
+    transform,
+  }),
+  thumbHorizontal: (width: string, transform: string) => ({
+    width,
+    transform,
+  }),
+})

package/src/components/ScrollArea/useScrollAreaRoot.ts

@@ -0,0 +1,72 @@
+import {useState, useCallback, useRef, useEffect} from 'react'
+import type {ScrollAreaContextValue} from './ScrollAreaContext'
+
+export function useScrollAreaRoot(): ScrollAreaContextValue {
+  const viewportRef = useRef<HTMLDivElement | null>(null)
+  const contentRef = useRef<HTMLDivElement | null>(null)
+  const [scrollTop, setScrollTop] = useState(0)
+  const [scrollLeft, setScrollLeft] = useState(0)
+  const [scrollHeight, setScrollHeight] = useState(0)
+  const [scrollWidth, setScrollWidth] = useState(0)
+  const [clientHeight, setClientHeight] = useState(0)
+  const [clientWidth, setClientWidth] = useState(0)
+  const [scrolling, setScrolling] = useState(false)
+  const scrollTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  const handleScroll = useCallback(() => {
+    const vp = viewportRef.current
+    if (!vp) return
+
+    setScrollTop(vp.scrollTop)
+    setScrollLeft(vp.scrollLeft)
+    setScrollHeight(vp.scrollHeight)
+    setScrollWidth(vp.scrollWidth)
+    setClientHeight(vp.clientHeight)
+    setClientWidth(vp.clientWidth)
+    setScrolling(true)
+
+    if (scrollTimerRef.current) clearTimeout(scrollTimerRef.current)
+    scrollTimerRef.current = setTimeout(() => setScrolling(false), 1000)
+  }, [])
+
+  // Observe viewport size changes
+  useEffect(() => {
+    const vp = viewportRef.current
+    if (!vp) return
+
+    const observer = new ResizeObserver(() => {
+      setScrollHeight(vp.scrollHeight)
+      setScrollWidth(vp.scrollWidth)
+      setClientHeight(vp.clientHeight)
+      setClientWidth(vp.clientWidth)
+    })
+    observer.observe(vp)
+    // Initial measurement
+    setScrollHeight(vp.scrollHeight)
+    setScrollWidth(vp.scrollWidth)
+    setClientHeight(vp.clientHeight)
+    setClientWidth(vp.clientWidth)
+
+    return () => observer.disconnect()
+  }, [])
+
+  // Attach scroll listener directly to ensure we capture it
+  useEffect(() => {
+    const vp = viewportRef.current
+    if (!vp) return
+    vp.addEventListener('scroll', handleScroll, {passive: true})
+    return () => vp.removeEventListener('scroll', handleScroll)
+  }, [handleScroll])
+
+  return {
+    viewportRef,
+    contentRef,
+    scrollTop,
+    scrollLeft,
+    scrollHeight,
+    scrollWidth,
+    clientHeight,
+    clientWidth,
+    scrolling,
+  }
+}

package/src/components/Select/Select.stories.tsx

@@ -0,0 +1,144 @@
+import type {Meta, StoryObj} from '@storybook/react'
+import {expect, fn} from 'storybook/test'
+import {Select} from './Select'
+
+const meta: Meta = {
+  title: 'Components/Select',
+}
+
+export default meta
+type Story = StoryObj
+
+export const Default: Story = {
+  render: () => (
+    <Select.Root defaultValue="en">
+      <Select.Trigger>
+        <Select.Value />
+        <Select.Icon />
+      </Select.Trigger>
+      <Select.Popup>
+        <Select.Item value="en">
+          <Select.ItemText>English</Select.ItemText>
+        </Select.Item>
+        <Select.Item value="fr">
+          <Select.ItemText>Francais</Select.ItemText>
+        </Select.Item>
+        <Select.Item value="es">
+          <Select.ItemText>Espanol</Select.ItemText>
+        </Select.Item>
+      </Select.Popup>
+    </Select.Root>
+  ),
+  play: async ({canvas}) => {
+    const trigger = canvas.getByRole('combobox')
+    await expect(trigger).toHaveAttribute('aria-expanded', 'false')
+    await expect(trigger).toHaveAttribute('aria-haspopup', 'listbox')
+    await expect(trigger).toHaveTextContent(/English/)
+  },
+}
+
+export const OpenAndSelect: Story = {
+  render: () => (
+    <Select.Root defaultValue="en">
+      <Select.Trigger>
+        <Select.Value />
+        <Select.Icon />
+      </Select.Trigger>
+      <Select.Popup>
+        <Select.Item value="en">
+          <Select.ItemText>English</Select.ItemText>
+        </Select.Item>
+        <Select.Item value="fr">
+          <Select.ItemText>Francais</Select.ItemText>
+        </Select.Item>
+        <Select.Item value="es">
+          <Select.ItemText>Espanol</Select.ItemText>
+        </Select.Item>
+      </Select.Popup>
+    </Select.Root>
+  ),
+  play: async ({canvas, userEvent}) => {
+    const trigger = canvas.getByRole('combobox')
+
+    await userEvent.click(trigger)
+    await expect(trigger).toHaveAttribute('aria-expanded', 'true')
+    const options = canvas.getAllByRole('option')
+    await expect(options.length).toBe(3)
+    await expect(options[0]).toHaveAttribute('aria-selected', 'true')
+
+    await userEvent.click(options[1])
+    await expect(trigger).toHaveTextContent(/Francais/)
+    await expect(canvas.queryByRole('listbox')).not.toBeInTheDocument()
+  },
+}
+
+export const WithPlaceholder: Story = {
+  render: () => (
+    <Select.Root>
+      <Select.Trigger>
+        <Select.Value placeholder="Choose a language..." />
+        <Select.Icon />
+      </Select.Trigger>
+      <Select.Popup>
+        <Select.Item value="react">
+          <Select.ItemText>React</Select.ItemText>
+        </Select.Item>
+        <Select.Item value="vue">
+          <Select.ItemText>Vue</Select.ItemText>
+        </Select.Item>
+        <Select.Item value="svelte">
+          <Select.ItemText>Svelte</Select.ItemText>
+        </Select.Item>
+        <Select.Item value="angular">
+          <Select.ItemText>Angular</Select.ItemText>
+        </Select.Item>
+      </Select.Popup>
+    </Select.Root>
+  ),
+  play: async ({canvas, userEvent}) => {
+    const trigger = canvas.getByRole('combobox')
+
+    // Shows placeholder when nothing selected
+    await expect(trigger).toHaveTextContent(/Choose a language\.\.\./)
+
+    // Open and select
+    await userEvent.click(trigger)
+    const options = canvas.getAllByRole('option')
+    await expect(options.length).toBe(4)
+
+    // None selected initially
+    for (const opt of options) {
+      await expect(opt).toHaveAttribute('aria-selected', 'false')
+    }
+
+    await userEvent.click(canvas.getByText('Vue'))
+    await expect(trigger).toHaveTextContent(/Vue/)
+  },
+}
+
+export const KeyboardNavigation: Story = {
+  render: () => (
+    <Select.Root>
+      <Select.Trigger>
+        <Select.Value placeholder="Select..." />
+        <Select.Icon />
+      </Select.Trigger>
+      <Select.Popup>
+        <Select.Item value="a">
+          <Select.ItemText>Alpha</Select.ItemText>
+        </Select.Item>
+        <Select.Item value="b">
+          <Select.ItemText>Bravo</Select.ItemText>
+        </Select.Item>
+        <Select.Item value="c">
+          <Select.ItemText>Charlie</Select.ItemText>
+        </Select.Item>
+      </Select.Popup>
+    </Select.Root>
+  ),
+  play: async ({canvas, userEvent}) => {
+    const trigger = canvas.getByRole('combobox')
+    await userEvent.click(trigger)
+    await expect(canvas.getByRole('listbox')).toBeInTheDocument()
+  },
+}

package/src/components/Select/Select.tsx

@@ -0,0 +1,183 @@
+import {type ReactNode, useRef, useId, useEffect} from 'react'
+import {html} from 'react-strict-dom'
+import {styles} from './styles.css'
+import {SelectContext, useSelect} from './SelectContext'
+import {useSelectRoot} from './useSelectRoot'
+
+// --- Root ---
+interface RootProps {
+  name?: string
+  defaultValue?: string
+  value?: string
+  onValueChange?: (value: string | null) => void
+  initialLabels?: Record<string, string>
+  children: ReactNode
+}
+
+function Root({name, defaultValue, value, onValueChange, initialLabels, children}: RootProps) {
+  const {ctx, rootRef} = useSelectRoot({defaultValue, value, onValueChange, initialLabels})
+
+  return (
+    <SelectContext.Provider value={ctx}>
+      <html.div ref={rootRef} style={styles.root}>
+        {name && <html.input type="hidden" name={name} value={ctx.value ?? ''} />}
+        {children}
+      </html.div>
+    </SelectContext.Provider>
+  )
+}
+
+// --- Trigger ---
+function Trigger({children}: {children: ReactNode}) {
+  const {open, toggle, listboxId, highlightedId, triggerRef} = useSelect()
+  const localRef = useRef<HTMLButtonElement>(null)
+
+  // Sync local ref to context triggerRef
+  useEffect(() => {
+    triggerRef.current = localRef.current
+  })
+
+  return (
+    <html.button
+      ref={localRef}
+      type="button"
+      role={'combobox' as 'listbox'}
+      onClick={toggle}
+      aria-expanded={open}
+      aria-haspopup="listbox"
+      aria-controls={open ? listboxId : undefined}
+      aria-activedescendant={highlightedId ?? undefined}
+      style={styles.trigger}
+    >
+      {children}
+    </html.button>
+  )
+}
+
+// --- Value ---
+function Value({placeholder}: {placeholder?: string}) {
+  const {value, labels} = useSelect()
+  const display = value ? (labels[value] ?? value) : null
+
+  return (
+    <html.span style={display ? styles.value : styles.placeholder}>
+      {display ?? placeholder}
+    </html.span>
+  )
+}
+
+// --- Icon ---
+function Icon({children}: {children?: ReactNode}) {
+  return (
+    <html.span style={styles.icon}>
+      {children ?? (
+        <svg
+          width="12"
+          height="12"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          aria-hidden="true"
+        >
+          <path d="M6 9l6 6 6-6" />
+        </svg>
+      )}
+    </html.span>
+  )
+}
+
+// --- Popup ---
+function Popup({children}: {children: ReactNode}) {
+  const {open, close, listboxId} = useSelect()
+
+  return (
+    <>
+      {open && <html.div style={styles.backdrop} onClick={close} />}
+      <html.div
+        id={listboxId}
+        role="listbox"
+        aria-hidden={!open}
+        style={[styles.popup, !open && styles.hidden]}
+      >
+        {children}
+      </html.div>
+    </>
+  )
+}
+
+// --- Item ---
+interface ItemProps {
+  value: string
+  children: ReactNode
+}
+
+function Item({value: itemValue, children}: ItemProps) {
+  const {
+    value: selectedValue,
+    setValue,
+    close,
+    registerLabel,
+    highlightedId,
+    setHighlightedId,
+    registerItem,
+  } = useSelect()
+  const id = useId()
+  const ref = useRef<HTMLDivElement>(null)
+  const isSelected = selectedValue === itemValue
+  const isHighlighted = highlightedId === id
+
+  // Register label from DOM text content (works with both string and JSX children)
+  useEffect(() => {
+    const el = ref.current
+    if (!el) return
+    const text = el.textContent
+    if (text) registerLabel(itemValue, text)
+  }, [itemValue, registerLabel])
+
+  useEffect(() => {
+    const el = ref.current
+    if (!el) return
+    return registerItem(id, itemValue, el)
+  }, [id, itemValue, registerItem])
+
+  const handleClick = () => {
+    setValue(itemValue)
+    close()
+  }
+
+  return (
+    <html.div
+      ref={ref}
+      id={id}
+      role="option"
+      aria-selected={isSelected}
+      onClick={handleClick}
+      onPointerEnter={() => setHighlightedId(id)}
+      style={[
+        styles.item,
+        isSelected && styles.itemSelected,
+        isHighlighted && styles.itemHighlighted,
+      ]}
+    >
+      {children}
+    </html.div>
+  )
+}
+
+// --- ItemText ---
+function ItemText({children}: {children: ReactNode}) {
+  return <html.span>{children}</html.span>
+}
+
+export const Select = {
+  Root,
+  Trigger,
+  Value,
+  Icon,
+  Popup,
+  Item,
+  ItemText,
+}

package/src/components/Select/SelectContext.ts

@@ -0,0 +1,24 @@
+import {createContext, useContext} from 'react'
+
+export interface SelectContextValue {
+  open: boolean
+  toggle: () => void
+  close: () => void
+  value: string | null
+  setValue: (value: string) => void
+  labels: Record<string, string>
+  registerLabel: (value: string, label: string) => void
+  listboxId: string
+  highlightedId: string | null
+  setHighlightedId: (id: string | null) => void
+  registerItem: (id: string, value: string, element: HTMLElement) => () => void
+  triggerRef: React.RefObject<HTMLButtonElement | null>
+}
+
+export const SelectContext = createContext<SelectContextValue | null>(null)
+
+export function useSelect() {
+  const ctx = useContext(SelectContext)
+  if (!ctx) throw new Error('Select compound components must be used within Select.Root')
+  return ctx
+}