@duro-app/ui 0.24.0 → 0.26.0

package/src/components/Tag/Tag.tsx

@@ -0,0 +1,139 @@
+import {type ReactNode, useCallback, useRef} from 'react'
+import {html} from 'react-strict-dom'
+import {useTagGroup} from '../TagGroup/TagGroupContext'
+import {styles} from './styles.css'
+
+export type TagVariant = 'default' | 'success' | 'warning' | 'error' | 'info'
+export type TagSize = 'sm' | 'md'
+
+interface TagProps {
+  /** Value identifier — required when used inside TagGroup */
+  value?: string
+  variant?: TagVariant
+  size?: TagSize
+  /** Show remove button. Auto-derived from TagGroup context when inside one. */
+  removable?: boolean
+  /** Called when remove button is clicked. Auto-wired to TagGroup when inside one. */
+  onRemove?: () => void
+  disabled?: boolean
+  children: ReactNode
+}
+
+const sizeMap = {
+  sm: styles.sizeSm,
+  md: styles.sizeMd,
+} as const
+
+const removableSizeMap = {
+  sm: styles.removableSm,
+  md: styles.removableMd,
+} as const
+
+export function Tag({
+  value,
+  variant = 'default',
+  size = 'md',
+  removable: removableProp,
+  onRemove: onRemoveProp,
+  disabled: disabledProp = false,
+  children,
+}: TagProps) {
+  const group = useTagGroup()
+  const contentRef = useRef<HTMLElement>(null)
+
+  const isGrouped = group !== null
+  const disabled = disabledProp || (group?.disabled ?? false)
+  const removable = removableProp ?? (isGrouped ? group.editable : false)
+
+  const onRemove = useCallback(() => {
+    if (disabled) return
+    if (onRemoveProp) {
+      onRemoveProp()
+    } else if (isGrouped && value !== undefined) {
+      group.removeTag(value)
+    }
+  }, [disabled, onRemoveProp, isGrouped, value, group])
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (disabled) return
+      if ((e.key === 'Backspace' || e.key === 'Delete') && removable) {
+        e.preventDefault()
+        onRemove()
+      }
+      // Arrow key navigation delegated to TagGroup via context
+      if (isGrouped && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) {
+        e.preventDefault()
+        const idx = value !== undefined ? group.values.indexOf(value) : -1
+        if (e.key === 'ArrowLeft' && idx > 0) {
+          group.setFocusedIndex(idx - 1)
+        } else if (e.key === 'ArrowRight') {
+          if (idx < group.values.length - 1) {
+            group.setFocusedIndex(idx + 1)
+          } else {
+            // Move focus to input
+            group.inputRef.current?.focus()
+            group.setFocusedIndex(-1)
+          }
+        }
+      }
+    },
+    [disabled, removable, onRemove, isGrouped, value, group],
+  )
+
+  const removeLabel = contentRef.current?.textContent
+    ? `Remove ${contentRef.current.textContent}`
+    : 'Remove'
+
+  const tagContent = (
+    <>
+      <html.span ref={contentRef} {...(isGrouped ? {role: 'gridcell' as any} : {})}>
+        {children}
+      </html.span>
+      {removable && (
+        <html.button
+          type="button"
+          aria-label={removeLabel}
+          disabled={disabled}
+          onClick={(e) => {
+            ;(e as any).stopPropagation?.()
+            onRemove()
+          }}
+          tabIndex={-1}
+          style={[styles.removeButton, disabled && styles.removeButtonDisabled]}
+        >
+          <svg
+            width={size === 'sm' ? 10 : 12}
+            height={size === 'sm' ? 10 : 12}
+            viewBox="0 0 12 12"
+            fill="none"
+          >
+            <path
+              d="M3 3l6 6M9 3l-6 6"
+              stroke="currentColor"
+              strokeWidth={1.5}
+              strokeLinecap="round"
+            />
+          </svg>
+        </html.button>
+      )}
+    </>
+  )
+
+  return (
+    <html.span
+      {...(isGrouped ? {role: 'row' as any} : {})}
+      tabIndex={isGrouped ? 0 : undefined}
+      onKeyDown={isGrouped ? (handleKeyDown as any) : undefined}
+      style={[
+        styles.base,
+        sizeMap[size],
+        removable && removableSizeMap[size],
+        styles[variant],
+        disabled && styles.disabled,
+      ]}
+    >
+      {tagContent}
+    </html.span>
+  )
+}

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

@@ -0,0 +1,99 @@
+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({
+  base: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: spacing.xs,
+    fontFamily: typography.fontFamily,
+    fontWeight: typography.fontWeightMedium,
+    lineHeight: 1,
+    borderRadius: radii.full,
+    whiteSpace: 'nowrap',
+    borderWidth: 0,
+    outlineWidth: {
+      default: 0,
+      ':focus-visible': 2,
+    },
+    outlineStyle: {
+      default: 'none',
+      ':focus-visible': 'solid',
+    },
+    outlineColor: {
+      default: 'transparent',
+      ':focus-visible': colors.accent,
+    },
+    outlineOffset: {
+      default: 0,
+      ':focus-visible': 1,
+    },
+  },
+  sizeMd: {
+    paddingTop: spacing.xs,
+    paddingBottom: spacing.xs,
+    paddingLeft: spacing.sm,
+    paddingRight: spacing.sm,
+    fontSize: typography.fontSizeXs,
+  },
+  sizeSm: {
+    paddingTop: 2,
+    paddingBottom: 2,
+    paddingLeft: spacing.xs,
+    paddingRight: spacing.xs,
+    fontSize: '0.625rem',
+  },
+  // Reduce right padding when removable to keep visual balance with the button
+  removableMd: {
+    paddingRight: spacing.xs,
+  },
+  removableSm: {
+    paddingRight: 2,
+  },
+  default: {
+    backgroundColor: colors.bgCardHover,
+    color: colors.textMuted,
+  },
+  success: {
+    backgroundColor: colors.successBg,
+    color: colors.successText,
+  },
+  warning: {
+    backgroundColor: colors.warningBg,
+    color: colors.warningText,
+  },
+  error: {
+    backgroundColor: colors.errorBg,
+    color: colors.errorText,
+  },
+  info: {
+    backgroundColor: colors.infoBg,
+    color: colors.infoText,
+  },
+  disabled: {
+    opacity: 0.5,
+    cursor: 'not-allowed',
+  },
+  removeButton: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 0,
+    borderWidth: 0,
+    backgroundColor: 'transparent',
+    color: 'inherit',
+    cursor: 'pointer',
+    borderRadius: radii.full,
+    opacity: {
+      default: 0.6,
+      ':hover': 1,
+    },
+    outlineWidth: 0,
+  },
+  removeButtonDisabled: {
+    cursor: 'not-allowed',
+    opacity: 0.4,
+  },
+})

package/src/components/TagGroup/TagGroup.meta.ts

@@ -0,0 +1,27 @@
+import type {ComponentMeta} from '../component-meta'
+
+export const meta: ComponentMeta = {
+  description:
+    'Compound component for managing a collection of tags. Supports editable mode with an inline input for adding tags via Enter/comma, removal via X button or Backspace, and paste support for bulk adding.',
+  whenToUse: [
+    'Email address input (add/remove multiple emails)',
+    'Editable tag collections (categories, labels)',
+    'Static display of tag groups with optional removal',
+  ],
+  whenNotToUse: [
+    'Single value selection — use Select or Combobox',
+    'Static non-interactive labels — use Badge with Cluster',
+    'Toggle-based selection — use ToggleGroup',
+  ],
+  relatedTo: [
+    {component: 'Tag', relationship: 'Tag is the item inside TagGroup.List'},
+    {component: 'Badge', relationship: 'Static display alternative'},
+    {component: 'Field', relationship: 'Wrap in Field.Root for label + description + error'},
+  ],
+  example: `<TagGroup.Root name="emails" value={emails} onValueChange={setEmails}>
+  <TagGroup.List aria-label="Emails">
+    {emails.map(e => <Tag key={e} value={e}>{e}</Tag>)}
+  </TagGroup.List>
+  <TagGroup.Input placeholder="Add email..." />
+</TagGroup.Root>`,
+}

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>
+  ),
+}