@duro-app/ui 0.25.0 → 0.26.0

package/src/components/TagGroup/TagGroup.stories.tsx

@@ -0,0 +1,193 @@
+import {useState} from 'react'
+import type {Meta, StoryObj} from '@storybook/react'
+import {expect, userEvent, within} from 'storybook/test'
+import {css, html} from 'react-strict-dom'
+import {TagGroup} from './TagGroup'
+import {Tag} from '../Tag/Tag'
+import {Field} from '../Field/Field'
+import {Stack} from '../Stack/Stack'
+
+const meta: Meta = {
+  title: 'Components/TagGroup',
+}
+
+export default meta
+type Story = StoryObj
+
+// ---------------------------------------------------------------------------
+// Static display (no input)
+// ---------------------------------------------------------------------------
+
+export const StaticDisplay: Story = {
+  render: () => (
+    <TagGroup.Root>
+      <TagGroup.List aria-label="Technologies">
+        <Tag value="react">React</Tag>
+        <Tag value="ts">TypeScript</Tag>
+        <Tag value="node">Node.js</Tag>
+      </TagGroup.List>
+    </TagGroup.Root>
+  ),
+  play: async ({canvas}) => {
+    await expect(canvas.getByText('React')).toBeInTheDocument()
+    await expect(canvas.getByText('TypeScript')).toBeInTheDocument()
+    await expect(canvas.getByText('Node.js')).toBeInTheDocument()
+  },
+}
+
+// ---------------------------------------------------------------------------
+// Editable with input
+// ---------------------------------------------------------------------------
+
+function EditableExample() {
+  const [tags, setTags] = useState(['react', 'typescript'])
+
+  return (
+    <TagGroup.Root value={tags} onValueChange={setTags}>
+      <TagGroup.List aria-label="Tags">
+        {tags.map((t) => (
+          <Tag key={t} value={t}>
+            {t}
+          </Tag>
+        ))}
+      </TagGroup.List>
+      <TagGroup.Input placeholder="Add tag..." />
+    </TagGroup.Root>
+  )
+}
+
+export const Editable: Story = {
+  render: () => <EditableExample />,
+  play: async ({canvas}) => {
+    await expect(canvas.getByText('react')).toBeInTheDocument()
+    await expect(canvas.getByText('typescript')).toBeInTheDocument()
+    // Input should be present
+    await expect(canvas.getByRole('textbox')).toBeInTheDocument()
+  },
+}
+
+// ---------------------------------------------------------------------------
+// With default value (uncontrolled)
+// ---------------------------------------------------------------------------
+
+export const WithDefaultValue: Story = {
+  render: () => {
+    function Uncontrolled() {
+      const [tags, setTags] = useState(['one', 'two'])
+      return (
+        <TagGroup.Root defaultValue={['one', 'two']} onValueChange={setTags}>
+          <TagGroup.List aria-label="Items">
+            {tags.map((t) => (
+              <Tag key={t} value={t}>
+                {t}
+              </Tag>
+            ))}
+          </TagGroup.List>
+          <TagGroup.Input placeholder="Add..." />
+        </TagGroup.Root>
+      )
+    }
+    return <Uncontrolled />
+  },
+}
+
+// ---------------------------------------------------------------------------
+// Email input with validation
+// ---------------------------------------------------------------------------
+
+function EmailExample() {
+  const [emails, setEmails] = useState<string[]>([])
+
+  return (
+    <Stack gap="md">
+      <Field.Root required>
+        <Field.Label>Invite emails</Field.Label>
+        <TagGroup.Root
+          name="emails"
+          value={emails}
+          onValueChange={setEmails}
+          onValidate={(v) => (v.includes('@') ? true : 'Invalid email')}
+        >
+          <TagGroup.List aria-label="Emails">
+            {emails.map((e) => (
+              <Tag key={e} value={e}>
+                {e}
+              </Tag>
+            ))}
+          </TagGroup.List>
+          <TagGroup.Input placeholder="Add email..." />
+        </TagGroup.Root>
+        <Field.Description>Press Enter or comma to add each email</Field.Description>
+      </Field.Root>
+    </Stack>
+  )
+}
+
+export const EmailInput: Story = {
+  render: () => <EmailExample />,
+  play: async ({canvas}) => {
+    const input = canvas.getByRole('textbox')
+    await expect(input).toBeInTheDocument()
+    // Type an email and press Enter
+    await userEvent.type(input, 'alice@example.com{Enter}')
+    await expect(canvas.getByText('alice@example.com')).toBeInTheDocument()
+    // Type another
+    await userEvent.type(input, 'bob@test.com,')
+    await expect(canvas.getByText('bob@test.com')).toBeInTheDocument()
+    // Invalid email should not create a tag
+    await userEvent.type(input, 'notanemail{Enter}')
+    expect(canvas.queryByText('notanemail')).not.toBeInTheDocument()
+  },
+}
+
+// ---------------------------------------------------------------------------
+// Disabled
+// ---------------------------------------------------------------------------
+
+function DisabledExample() {
+  const tags = ['react', 'vue', 'svelte']
+  return (
+    <TagGroup.Root value={tags} disabled>
+      <TagGroup.List aria-label="Frameworks">
+        {tags.map((t) => (
+          <Tag key={t} value={t}>
+            {t}
+          </Tag>
+        ))}
+      </TagGroup.List>
+      <TagGroup.Input placeholder="Disabled..." />
+    </TagGroup.Root>
+  )
+}
+
+export const Disabled: Story = {
+  render: () => <DisabledExample />,
+  play: async ({canvas}) => {
+    await expect(canvas.getByRole('textbox')).toBeDisabled()
+  },
+}
+
+// ---------------------------------------------------------------------------
+// Tag variants inside TagGroup
+// ---------------------------------------------------------------------------
+
+export const WithVariants: Story = {
+  render: () => (
+    <TagGroup.Root>
+      <TagGroup.List aria-label="Status">
+        <Tag value="active" variant="success">
+          Active
+        </Tag>
+        <Tag value="pending" variant="warning">
+          Pending
+        </Tag>
+        <Tag value="expired" variant="error">
+          Expired
+        </Tag>
+        <Tag value="info" variant="info">
+          Updated
+        </Tag>
+      </TagGroup.List>
+    </TagGroup.Root>
+  ),
+}

package/src/components/TagGroup/TagGroup.tsx

@@ -0,0 +1,302 @@
+import {
+  type ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+import {html} from 'react-strict-dom'
+import {useControllableValue} from '../../hooks/useControllableValue'
+import {useFieldContext} from '../Field/FieldContext'
+import {TagGroupContext, type TagGroupContextValue} from './TagGroupContext'
+import {styles} from './styles.css'
+
+// ---------------------------------------------------------------------------
+// Local context accessor (non-throwing, returns null)
+// ---------------------------------------------------------------------------
+
+function useTagGroupCtx() {
+  return useContext(TagGroupContext)
+}
+
+// ---------------------------------------------------------------------------
+// TagGroup.Root
+// ---------------------------------------------------------------------------
+
+interface RootProps {
+  value?: string[]
+  defaultValue?: string[]
+  onValueChange?: (values: string[]) => void
+  /** Validate a value before adding. Return `true` if valid, or an error string. */
+  onValidate?: (value: string) => true | string
+  disabled?: boolean
+  /** Form field name — renders hidden inputs for each tag value */
+  name?: string
+  'aria-label'?: string
+  children: ReactNode
+}
+
+function Root({
+  value: controlledValue,
+  defaultValue = [],
+  onValueChange,
+  onValidate,
+  disabled: disabledProp = false,
+  name,
+  'aria-label': ariaLabel,
+  children,
+}: RootProps) {
+  const gridId = useId()
+  const fieldCtx = useFieldContext()
+  const [values, setValues] = useControllableValue(controlledValue, defaultValue, onValueChange)
+  const [focusedIndex, setFocusedIndex] = useState(-1)
+  const [editable, setEditable] = useState(false)
+  const [announcement, setAnnouncement] = useState('')
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  const disabled = disabledProp || (fieldCtx?.disabled ?? false)
+  const isInvalid = fieldCtx?.invalid ?? false
+
+  const addTag = useCallback(
+    (value: string) => {
+      const trimmed = value.trim()
+      if (!trimmed) return
+      if (values.includes(trimmed)) return
+      if (onValidate) {
+        const result = onValidate(trimmed)
+        if (result !== true) return
+      }
+      setValues([...values, trimmed])
+      setAnnouncement(`Added ${trimmed}`)
+    },
+    [values, setValues, onValidate],
+  )
+
+  const removeTag = useCallback(
+    (value: string) => {
+      const idx = values.indexOf(value)
+      if (idx === -1) return
+      const next = values.filter((v) => v !== value)
+      setValues(next)
+      setAnnouncement(`Removed ${value}`)
+
+      // Focus management: move to next tag, or previous, or input
+      if (next.length === 0) {
+        inputRef.current?.focus()
+        setFocusedIndex(-1)
+      } else if (idx >= next.length) {
+        setFocusedIndex(next.length - 1)
+      } else {
+        setFocusedIndex(idx)
+      }
+    },
+    [values, setValues],
+  )
+
+  // Focus the tag at focusedIndex when it changes
+  useEffect(() => {
+    if (focusedIndex >= 0 && focusedIndex < values.length) {
+      const container = document.getElementById(gridId)
+      if (!container) return
+      const rows = container.querySelectorAll('[role="row"]')
+      const target = rows[focusedIndex] as HTMLElement | undefined
+      target?.focus()
+    }
+  }, [focusedIndex, gridId, values.length])
+
+  const ctx = useMemo<TagGroupContextValue>(
+    () => ({
+      values,
+      addTag,
+      removeTag,
+      editable,
+      setEditable,
+      disabled,
+      validate: onValidate,
+      focusedIndex,
+      setFocusedIndex,
+      inputRef,
+      gridId,
+      name,
+    }),
+    [values, addTag, removeTag, editable, disabled, onValidate, focusedIndex, gridId, name],
+  )
+
+  return (
+    <TagGroupContext.Provider value={ctx}>
+      <html.div style={styles.root} aria-label={ariaLabel}>
+        <html.div
+          style={[
+            styles.container,
+            !editable && styles.containerStatic,
+            isInvalid && styles.containerError,
+            disabled && styles.containerDisabled,
+          ]}
+          aria-describedby={
+            fieldCtx
+              ? `${fieldCtx.descriptionId} ${fieldCtx.invalid ? fieldCtx.errorId : ''}`.trim()
+              : undefined
+          }
+          aria-invalid={isInvalid || undefined}
+        >
+          {children}
+        </html.div>
+
+        {/* Hidden inputs for form submission */}
+        {name && values.map((v) => <html.input key={v} type="hidden" name={name} value={v} />)}
+
+        {/* Live region for screen reader announcements */}
+        <html.div role="status" aria-live="polite" aria-atomic style={styles.liveRegion}>
+          {announcement}
+        </html.div>
+      </html.div>
+    </TagGroupContext.Provider>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// TagGroup.List
+// ---------------------------------------------------------------------------
+
+interface ListProps {
+  children: ReactNode
+  'aria-label'?: string
+}
+
+function List({children, 'aria-label': ariaLabel}: ListProps) {
+  const ctx = useTagGroupCtx()
+
+  return (
+    <html.div role={'grid' as any} aria-label={ariaLabel} id={ctx?.gridId} style={styles.list}>
+      {children}
+    </html.div>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// TagGroup.Input
+// ---------------------------------------------------------------------------
+
+interface InputProps {
+  placeholder?: string
+}
+
+function Input({placeholder}: InputProps) {
+  const ctx = useTagGroupCtx()
+  const [inputValue, setInputValue] = useState('')
+  const localRef = useRef<HTMLInputElement>(null)
+
+  // Sync local ref with context inputRef
+  useEffect(() => {
+    if (ctx?.inputRef) {
+      ;(ctx.inputRef as React.MutableRefObject<HTMLInputElement | null>).current = localRef.current
+    }
+  })
+
+  // Register as editable on mount
+  useEffect(() => {
+    ctx?.setEditable(true)
+    return () => ctx?.setEditable(false)
+  }, []) // eslint-disable-line react-hooks/exhaustive-deps
+
+  const commitValueRef = useRef<(raw: string) => boolean>(() => false)
+  commitValueRef.current = (raw: string) => {
+    const trimmed = raw.trim()
+    if (!trimmed || !ctx) return false
+    ctx.addTag(trimmed)
+    setInputValue('')
+    return true
+  }
+
+  // Native keydown for full KeyboardEvent access (preventDefault)
+  useEffect(() => {
+    const el = localRef.current
+    if (!el) return
+
+    function handleKeyDown(e: KeyboardEvent) {
+      if (!ctx) return
+      const target = e.target as HTMLInputElement
+
+      if (e.key === 'Enter' || e.key === ',' || e.key === ';') {
+        e.preventDefault()
+        commitValueRef.current(target.value)
+        return
+      }
+
+      if (e.key === 'Tab' && target.value.trim()) {
+        e.preventDefault()
+        commitValueRef.current(target.value)
+        return
+      }
+
+      if (e.key === 'Backspace' && !target.value && ctx.values.length > 0) {
+        e.preventDefault()
+        ctx.removeTag(ctx.values[ctx.values.length - 1])
+        return
+      }
+
+      if (e.key === 'ArrowLeft' && (target.selectionStart ?? 0) === 0 && ctx.values.length > 0) {
+        e.preventDefault()
+        ctx.setFocusedIndex(ctx.values.length - 1)
+        return
+      }
+
+      if (e.key === 'Escape') {
+        setInputValue('')
+      }
+    }
+
+    function handlePaste(e: ClipboardEvent) {
+      if (!ctx) return
+      const text = e.clipboardData?.getData('text') ?? ''
+      const items = text
+        .split(/[\n,;]+/)
+        .map((s) => s.trim())
+        .filter(Boolean)
+      if (items.length > 1) {
+        e.preventDefault()
+        for (const item of items) {
+          ctx.addTag(item)
+        }
+      }
+    }
+
+    function handleFocus() {
+      ctx?.setFocusedIndex(-1)
+    }
+
+    el.addEventListener('keydown', handleKeyDown)
+    el.addEventListener('paste', handlePaste)
+    el.addEventListener('focus', handleFocus)
+    return () => {
+      el.removeEventListener('keydown', handleKeyDown)
+      el.removeEventListener('paste', handlePaste)
+      el.removeEventListener('focus', handleFocus)
+    }
+  }, [ctx])
+
+  return (
+    <html.input
+      ref={localRef as React.Ref<HTMLInputElement>}
+      type="text"
+      value={inputValue}
+      onChange={(e: any) => setInputValue(e.target.value)}
+      placeholder={!ctx?.values.length ? placeholder : undefined}
+      disabled={ctx?.disabled}
+      style={styles.input}
+    />
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Namespace export
+// ---------------------------------------------------------------------------
+
+export const TagGroup = {
+  Root,
+  List,
+  Input,
+}

package/src/components/TagGroup/TagGroupContext.ts

@@ -0,0 +1,22 @@
+import {createContext, useContext} from 'react'
+
+export interface TagGroupContextValue {
+  values: string[]
+  addTag: (value: string) => void
+  removeTag: (value: string) => void
+  editable: boolean
+  setEditable: (v: boolean) => void
+  disabled: boolean
+  validate?: (value: string) => true | string
+  focusedIndex: number
+  setFocusedIndex: (index: number) => void
+  inputRef: React.RefObject<HTMLInputElement | null>
+  gridId: string
+  name?: string
+}
+
+export const TagGroupContext = createContext<TagGroupContextValue | null>(null)
+
+export function useTagGroup(): TagGroupContextValue | null {
+  return useContext(TagGroupContext)
+}

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

@@ -0,0 +1,97 @@
+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'
+
+export const styles = css.create({
+  root: {
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  container: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    gap: spacing.xs,
+    paddingTop: spacing.xs,
+    paddingBottom: spacing.xs,
+    paddingLeft: spacing.sm,
+    paddingRight: spacing.sm,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: {
+      default: colors.border,
+      ':focus-within': colors.accent,
+    },
+    borderRadius: radii.sm,
+    backgroundColor: colors.bg,
+    minHeight: 40,
+    transitionProperty: 'border-color',
+    transitionDuration: '150ms',
+    transitionTimingFunction: 'ease',
+    outlineWidth: {
+      default: 0,
+      ':focus-within': 2,
+    },
+    outlineStyle: {
+      default: 'none',
+      ':focus-within': 'solid',
+    },
+    outlineColor: {
+      default: 'transparent',
+      ':focus-within': colors.accent,
+    },
+    outlineOffset: {
+      default: 0,
+      ':focus-within': 1,
+    },
+  },
+  containerError: {
+    borderColor: {
+      default: colors.error,
+      ':focus-within': colors.error,
+    },
+  },
+  containerDisabled: {
+    opacity: 0.5,
+    cursor: 'not-allowed',
+  },
+  // Static display (no Input) — no input-field border
+  containerStatic: {
+    borderWidth: 0,
+    paddingTop: 0,
+    paddingBottom: 0,
+    paddingLeft: 0,
+    paddingRight: 0,
+    minHeight: 0,
+    backgroundColor: 'transparent',
+    outlineWidth: 0,
+  },
+  list: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    gap: spacing.xs,
+    alignItems: 'center',
+  },
+  input: {
+    flex: 1,
+    minWidth: 120,
+    borderWidth: 0,
+    backgroundColor: 'transparent',
+    fontFamily: typography.fontFamily,
+    fontSize: typography.fontSizeSm,
+    lineHeight: typography.lineHeight,
+    color: colors.text,
+    outlineWidth: 0,
+    paddingTop: spacing.xs,
+    paddingBottom: spacing.xs,
+    paddingLeft: spacing.xs,
+    paddingRight: spacing.xs,
+  },
+  liveRegion: {
+    position: 'absolute',
+    width: 1,
+    height: 1,
+    overflow: 'hidden',
+  },
+})

package/src/index.ts

@@ -43,6 +43,8 @@ export {
   type StatusIconName,
   type StatusIconVariant,
 } from './components/StatusIcon/StatusIcon'
+export {Tag, type TagVariant, type TagSize} from './components/Tag/Tag'
+export {TagGroup} from './components/TagGroup/TagGroup'
 export {Table, type TableVariant, type TableSize} from './components/Table/Table'
 // TanStack Table: consumers install @tanstack/react-table directly and use
 // Table.Pagination, Table.SortIndicator, Table.ColumnFilter for styled integration