@duro-app/ui 0.23.0 → 0.25.0

package/src/components/Combobox/Combobox.tsx

@@ -0,0 +1,247 @@
+import {type ReactNode, useRef, useId, useEffect, useState} from 'react'
+import {html} from 'react-strict-dom'
+import {styles} from './styles.css'
+import {ComboboxContext, useCombobox} from './ComboboxContext'
+import {useComboboxRoot} from './useComboboxRoot'
+
+// --- Root ---
+interface RootProps {
+  name?: string
+  defaultValue?: string
+  value?: string
+  onValueChange?: (value: string | null) => void
+  inputValue?: string
+  onInputChange?: (value: string) => void
+  initialLabels?: Record<string, string>
+  children: ReactNode
+}
+
+function Root({
+  name,
+  defaultValue,
+  value,
+  onValueChange,
+  inputValue,
+  onInputChange,
+  initialLabels,
+  children,
+}: RootProps) {
+  const {ctx, rootRef} = useComboboxRoot({
+    defaultValue,
+    value,
+    onValueChange,
+    inputValue,
+    onInputChange,
+    initialLabels,
+  })
+
+  return (
+    <ComboboxContext.Provider value={ctx}>
+      <html.div ref={rootRef} style={styles.root}>
+        {name && <html.input type="hidden" name={name} value={ctx.value ?? ''} />}
+        {children}
+      </html.div>
+    </ComboboxContext.Provider>
+  )
+}
+
+// --- Input ---
+function Input({placeholder, children}: {placeholder?: string; children?: ReactNode}) {
+  const {
+    open,
+    openPopup,
+    close,
+    inputValue,
+    setInputValue,
+    listboxId,
+    highlightedId,
+    inputRef,
+  } = useCombobox()
+  const localRef = useRef<HTMLInputElement>(null)
+  const [focused, setFocused] = useState(false)
+
+  useEffect(() => {
+    inputRef.current = localRef.current
+  })
+
+  return (
+    <html.div style={[styles.inputWrapper, focused && styles.inputWrapperFocused]}>
+      <html.input
+        ref={localRef}
+        type="text"
+        role={'combobox' as 'listbox'}
+        value={inputValue}
+        placeholder={placeholder}
+        aria-expanded={open}
+        aria-haspopup="listbox"
+        aria-controls={open ? listboxId : undefined}
+        aria-activedescendant={highlightedId ?? undefined}
+        aria-autocomplete={'list' as 'none'}
+        autoComplete="off"
+        style={styles.input}
+        onFocus={() => {
+          setFocused(true)
+          openPopup()
+        }}
+        onBlur={() => {
+          setFocused(false)
+          // Delay close to allow item click to register
+          setTimeout(close, 150)
+        }}
+        onChange={(e: any) => {
+          setInputValue(e.target.value)
+          if (!open) openPopup()
+        }}
+      />
+      {children}
+    </html.div>
+  )
+}
+
+// --- Trigger ---
+function Trigger({children}: {children?: ReactNode}) {
+  const {open, openPopup, close, inputRef} = useCombobox()
+
+  return (
+    <html.button
+      type="button"
+      tabIndex={-1}
+      aria-label={open ? 'Close' : 'Open'}
+      onClick={() => {
+        if (open) {
+          close()
+        } else {
+          openPopup()
+        }
+        inputRef.current?.focus()
+      }}
+      style={styles.trigger}
+    >
+      {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.button>
+  )
+}
+
+// --- Popup ---
+function Popup({children}: {children: ReactNode}) {
+  const {open, listboxId} = useCombobox()
+
+  if (!open) return null
+
+  return (
+    <html.div
+      id={listboxId}
+      role="listbox"
+      style={styles.popup}
+    >
+      {children}
+    </html.div>
+  )
+}
+
+// --- Item ---
+interface ItemProps {
+  value: string
+  children: ReactNode
+}
+
+function Item({value: itemValue, children}: ItemProps) {
+  const {
+    value: selectedValue,
+    setValue,
+    inputValue,
+    labels,
+    registerLabel,
+    highlightedId,
+    setHighlightedId,
+    registerItem,
+  } = useCombobox()
+  const id = useId()
+  const ref = useRef<HTMLDivElement>(null)
+  const isSelected = selectedValue === itemValue
+  const isHighlighted = highlightedId === id
+
+  // Filter: check if this item matches the input
+  const label = labels[itemValue] ?? itemValue
+  const query = inputValue.toLowerCase()
+  const isVisible = !query || label.toLowerCase().includes(query)
+
+  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])
+
+  if (!isVisible) return null
+
+  return (
+    <html.div
+      ref={ref}
+      id={id}
+      role="option"
+      aria-selected={isSelected}
+      onClick={() => setValue(itemValue)}
+      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>
+}
+
+// --- Empty ---
+function Empty({children}: {children: ReactNode}) {
+  const {open, inputValue, labels} = useCombobox()
+
+  if (!open) return null
+
+  // Check if any items are visible
+  const query = inputValue.toLowerCase()
+  const hasVisibleItems = query
+    ? Object.values(labels).some((label) => label.toLowerCase().includes(query))
+    : true
+
+  if (hasVisibleItems) return null
+
+  return <html.div style={styles.empty}>{children}</html.div>
+}
+
+export const Combobox = {
+  Root,
+  Input,
+  Trigger,
+  Popup,
+  Item,
+  ItemText,
+  Empty,
+}

package/src/components/Combobox/ComboboxContext.ts

@@ -0,0 +1,26 @@
+import {createContext, useContext} from 'react'
+
+export interface ComboboxContextValue {
+  open: boolean
+  openPopup: () => void
+  close: () => void
+  value: string | null
+  setValue: (value: string) => void
+  inputValue: string
+  setInputValue: (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
+  inputRef: React.RefObject<HTMLInputElement | null>
+}
+
+export const ComboboxContext = createContext<ComboboxContextValue | null>(null)
+
+export function useCombobox() {
+  const ctx = useContext(ComboboxContext)
+  if (!ctx) throw new Error('Combobox compound components must be used within Combobox.Root')
+  return ctx
+}

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

@@ -0,0 +1,119 @@
+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',
+  },
+  inputWrapper: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: spacing.sm,
+    paddingLeft: spacing.md,
+    paddingRight: spacing.xs,
+    backgroundColor: colors.bgCard,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: {
+      default: colors.border,
+      ':hover': colors.accent,
+    },
+    borderRadius: radii.sm,
+    transitionProperty: 'border-color',
+    transitionDuration: '150ms',
+  },
+  inputWrapperFocused: {
+    borderColor: colors.accent,
+  },
+  input: {
+    flex: 1,
+    paddingTop: spacing.sm,
+    paddingBottom: spacing.sm,
+    fontFamily: typography.fontFamily,
+    fontSize: typography.fontSizeSm,
+    color: colors.text,
+    backgroundColor: 'transparent',
+    borderWidth: 0,
+    outline: 'none',
+    minWidth: 0,
+  },
+  trigger: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingTop: spacing.xs,
+    paddingBottom: spacing.xs,
+    paddingLeft: spacing.xs,
+    paddingRight: spacing.xs,
+    backgroundColor: 'transparent',
+    borderWidth: 0,
+    color: colors.textMuted,
+    cursor: 'pointer',
+  },
+  backdrop: {
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: 49,
+  },
+  popup: {
+    position: 'absolute',
+    top: '100%',
+    left: 0,
+    right: 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,
+    maxHeight: 200,
+    overflowY: 'auto',
+    zIndex: 50,
+  },
+  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,
+    cursor: 'pointer',
+    backgroundColor: 'transparent',
+    transitionProperty: 'background-color',
+    transitionDuration: '150ms',
+  },
+  itemSelected: {
+    color: colors.accent,
+    fontWeight: typography.fontWeightMedium,
+  },
+  itemHighlighted: {
+    backgroundColor: colors.bgCardHover,
+  },
+  itemHidden: {
+    display: 'none',
+  },
+  empty: {
+    paddingTop: spacing.sm,
+    paddingBottom: spacing.sm,
+    paddingLeft: spacing.md,
+    paddingRight: spacing.md,
+    fontSize: typography.fontSizeSm,
+    color: colors.textMuted,
+  },
+  hidden: {
+    display: 'none',
+  },
+})

package/src/components/Combobox/useComboboxRoot.ts

@@ -0,0 +1,235 @@
+import {useState, useCallback, useMemo, useRef, useId, useEffect} from 'react'
+import {useControllableValue} from '../../hooks/useControllableValue'
+import type {ComboboxContextValue} from './ComboboxContext'
+
+interface UseComboboxRootOptions {
+  defaultValue?: string
+  value?: string
+  onValueChange?: (value: string | null) => void
+  inputValue?: string
+  onInputChange?: (value: string) => void
+  initialLabels?: Record<string, string>
+}
+
+export function useComboboxRoot({
+  defaultValue,
+  value: controlledValue,
+  onValueChange,
+  inputValue: controlledInputValue,
+  onInputChange,
+  initialLabels,
+}: UseComboboxRootOptions) {
+  const [value, setValue] = useControllableValue<string | null>(
+    controlledValue,
+    defaultValue ?? null,
+    onValueChange,
+  )
+  const [internalInputValue, setInternalInputValue] = useState('')
+  const inputValue = controlledInputValue !== undefined ? controlledInputValue : internalInputValue
+  const setInputValue = useCallback(
+    (v: string) => {
+      if (controlledInputValue === undefined) setInternalInputValue(v)
+      onInputChange?.(v)
+    },
+    [controlledInputValue, onInputChange],
+  )
+
+  const [open, setOpen] = useState(false)
+  const [labels, setLabels] = useState<Record<string, string>>(initialLabels ?? {})
+  const [highlightedId, setHighlightedId] = useState<string | null>(null)
+  const listboxId = useId()
+  const rootRef = useRef<HTMLDivElement>(null)
+  const inputRef = useRef<HTMLInputElement | null>(null)
+  const itemsRef = useRef(new Map<string, {value: string; element: HTMLElement}>())
+  const orderRef = useRef<string[]>([])
+
+  const close = useCallback(() => {
+    setOpen(false)
+    setHighlightedId(null)
+  }, [])
+
+  const openPopup = useCallback(() => {
+    setOpen(true)
+    // Highlight the selected item or first visible item
+    const items = itemsRef.current
+    const order = orderRef.current
+    let found: string | null = null
+    for (const id of order) {
+      const item = items.get(id)
+      if (item && item.value === value) {
+        found = id
+        break
+      }
+    }
+    setHighlightedId(found ?? (order.length > 0 ? order[0] : null))
+  }, [value])
+
+  const selectValue = useCallback(
+    (itemValue: string) => {
+      setValue(itemValue)
+      // Set input to show the selected label
+      const label = labels[itemValue] ?? itemValue
+      setInputValue(label)
+      close()
+      inputRef.current?.focus()
+    },
+    [setValue, labels, setInputValue, close],
+  )
+
+  const registerLabel = useCallback((v: string, label: string) => {
+    setLabels((prev) => {
+      if (prev[v] === label) return prev
+      return {...prev, [v]: label}
+    })
+  }, [])
+
+  const registerItem = useCallback((id: string, itemValue: string, element: HTMLElement) => {
+    itemsRef.current.set(id, {value: itemValue, element})
+    const map = itemsRef.current
+    const ids = [...map.keys()]
+    ids.sort((a, b) => {
+      const elA = map.get(a)?.element
+      const elB = map.get(b)?.element
+      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)
+    }
+  }, [])
+
+  // Get visible items (those matching the filter)
+  const getVisibleOrder = useCallback(() => {
+    const query = inputValue.toLowerCase()
+    if (!query) return orderRef.current
+    return orderRef.current.filter((id) => {
+      const item = itemsRef.current.get(id)
+      if (!item) return false
+      const label = labels[item.value] ?? item.value
+      return label.toLowerCase().includes(query)
+    })
+  }, [inputValue, labels])
+
+  // Keyboard navigation
+  useEffect(() => {
+    const root = rootRef.current
+    if (!root || !open) return
+
+    function handleKeyDown(e: KeyboardEvent) {
+      const visibleOrder = getVisibleOrder()
+      if (visibleOrder.length === 0 && e.key !== 'Escape' && e.key !== 'Tab') return
+
+      switch (e.key) {
+        case 'ArrowDown': {
+          e.preventDefault()
+          if (!open) {
+            setOpen(true)
+            return
+          }
+          setHighlightedId((prev) => {
+            const idx = prev ? visibleOrder.indexOf(prev) : -1
+            return visibleOrder[(idx + 1) % visibleOrder.length] ?? null
+          })
+          break
+        }
+        case 'ArrowUp': {
+          e.preventDefault()
+          setHighlightedId((prev) => {
+            const idx = prev ? visibleOrder.indexOf(prev) : 0
+            return visibleOrder[(idx - 1 + visibleOrder.length) % visibleOrder.length] ?? null
+          })
+          break
+        }
+        case 'Home': {
+          e.preventDefault()
+          setHighlightedId(visibleOrder[0] ?? null)
+          break
+        }
+        case 'End': {
+          e.preventDefault()
+          setHighlightedId(visibleOrder[visibleOrder.length - 1] ?? null)
+          break
+        }
+        case 'Enter': {
+          e.preventDefault()
+          setHighlightedId((prev) => {
+            if (prev) {
+              const item = itemsRef.current.get(prev)
+              if (item) selectValue(item.value)
+            } else if (!inputValue.trim()) {
+              // Empty input + Enter = clear selection (reset to "All")
+              selectValue('')
+            }
+            return prev
+          })
+          break
+        }
+        case 'Escape': {
+          e.preventDefault()
+          close()
+          inputRef.current?.focus()
+          break
+        }
+        case 'Tab': {
+          close()
+          break
+        }
+      }
+    }
+
+    root.addEventListener('keydown', handleKeyDown)
+    return () => root.removeEventListener('keydown', handleKeyDown)
+  }, [open, close, selectValue, getVisibleOrder])
+
+  // Scroll highlighted item into view
+  useEffect(() => {
+    if (!highlightedId) return
+    const item = itemsRef.current.get(highlightedId)
+    item?.element.scrollIntoView({block: 'nearest'})
+  }, [highlightedId])
+
+  // Sync input value with selected label when value changes externally
+  useEffect(() => {
+    if (value && labels[value] && !open) {
+      setInputValue(labels[value])
+    }
+  }, [value, labels, open, setInputValue])
+
+  const ctx: ComboboxContextValue = useMemo(
+    () => ({
+      open,
+      openPopup,
+      close,
+      value,
+      setValue: selectValue,
+      inputValue,
+      setInputValue,
+      labels,
+      registerLabel,
+      listboxId,
+      highlightedId,
+      setHighlightedId,
+      registerItem,
+      inputRef,
+    }),
+    [
+      open,
+      openPopup,
+      close,
+      value,
+      selectValue,
+      inputValue,
+      setInputValue,
+      labels,
+      registerLabel,
+      listboxId,
+      highlightedId,
+      setHighlightedId,
+      registerItem,
+    ],
+  )
+
+  return {ctx, rootRef}
+}

package/src/components/Field/Field.stories.tsx

@@ -63,6 +63,7 @@ export const WithError: Story = {
 
 const stackStyles = css.create({
   stack: {display: 'flex', flexDirection: 'column', gap: 16, maxWidth: 400},
+  stackWide: {display: 'flex', flexDirection: 'column', gap: 16, maxWidth: 600},
 })
 
 export const FormExample: Story = {
@@ -96,3 +97,62 @@ export const FormExample: Story = {
     await expect(alert).toHaveTextContent('Passwords do not match.')
   },
 }
+
+export const WithNecessityIcon: Story = {
+  name: 'With necessity indicator (standalone)',
+  render: () => (
+    <html.div style={stackStyles.stack}>
+      <Field.Root required>
+        <Field.Label>Email</Field.Label>
+        <Input placeholder="you@example.com" />
+        <Field.Description>Required field with no Form context — indicator needs Form.</Field.Description>
+      </Field.Root>
+    </html.div>
+  ),
+  play: async ({canvas}) => {
+    // Without Form context, no indicator shows (necessityIndicator comes from Form)
+    const label = canvas.getByText('Email')
+    await expect(label).toBeInTheDocument()
+  },
+}
+
+export const LabelSide: Story = {
+  name: 'Label position — side (standalone)',
+  render: () => (
+    <html.div style={stackStyles.stackWide}>
+      <Field.Root labelPosition="side">
+        <Field.Label>Username</Field.Label>
+        <Input placeholder="Enter username" />
+        <Field.Description>3-32 characters, letters and numbers only.</Field.Description>
+      </Field.Root>
+
+      <Field.Root labelPosition="side" invalid>
+        <Field.Label>Email</Field.Label>
+        <Input variant="error" placeholder="Enter email" />
+        <Field.Error>Please enter a valid email address.</Field.Error>
+      </Field.Root>
+    </html.div>
+  ),
+  play: async ({canvas}) => {
+    await expect(canvas.getByPlaceholderText('Enter username')).toBeInTheDocument()
+    await expect(canvas.getByPlaceholderText('Enter email')).toBeInTheDocument()
+    await expect(canvas.getByRole('alert')).toHaveTextContent('Please enter a valid email address.')
+  },
+}
+
+export const Disabled: Story = {
+  name: 'Disabled field (standalone)',
+  render: () => (
+    <html.div style={stackStyles.stack}>
+      <Field.Root disabled>
+        <Field.Label>Username</Field.Label>
+        <Input placeholder="Enter username" />
+        <Field.Description>This field is disabled.</Field.Description>
+      </Field.Root>
+    </html.div>
+  ),
+  play: async ({canvas}) => {
+    const input = canvas.getByPlaceholderText('Enter username')
+    await expect(input).toBeDisabled()
+  },
+}