@duro-app/ui 0.12.1 → 0.14.0

package/src/components/Tabs/Tabs.stories.tsx

@@ -0,0 +1,142 @@
+import type {Meta, StoryObj} from '@storybook/react'
+import {expect} from 'storybook/test'
+import {Tabs} from './Tabs'
+
+const meta: Meta = {
+  title: 'Components/Tabs',
+}
+
+export default meta
+type Story = StoryObj
+
+export const Default: Story = {
+  render: () => (
+    <Tabs.Root defaultValue="overview">
+      <Tabs.List>
+        <Tabs.Tab value="overview">Overview</Tabs.Tab>
+        <Tabs.Tab value="security">Security</Tabs.Tab>
+        <Tabs.Tab value="network">Network</Tabs.Tab>
+      </Tabs.List>
+      <Tabs.Panel value="overview">Overview panel content</Tabs.Panel>
+      <Tabs.Panel value="security">Security panel content</Tabs.Panel>
+      <Tabs.Panel value="network">Network panel content</Tabs.Panel>
+    </Tabs.Root>
+  ),
+  play: async ({canvas, userEvent}) => {
+    const tablist = canvas.getByRole('tablist')
+    await expect(tablist).toBeInTheDocument()
+    await expect(tablist).toHaveAttribute('aria-orientation', 'horizontal')
+
+    const tabs = canvas.getAllByRole('tab')
+    await expect(tabs.length).toBe(3)
+
+    // Initial state: first tab selected
+    await expect(tabs[0]).toHaveAttribute('aria-selected', 'true')
+    await expect(tabs[1]).toHaveAttribute('aria-selected', 'false')
+    await expect(tabs[2]).toHaveAttribute('aria-selected', 'false')
+    await expect(canvas.getByRole('tabpanel')).toHaveTextContent('Overview panel content')
+
+    // Click second tab
+    await userEvent.click(tabs[1])
+    await expect(tabs[0]).toHaveAttribute('aria-selected', 'false')
+    await expect(tabs[1]).toHaveAttribute('aria-selected', 'true')
+    await expect(canvas.getByRole('tabpanel')).toHaveTextContent('Security panel content')
+
+    // Click third tab
+    await userEvent.click(tabs[2])
+    await expect(tabs[2]).toHaveAttribute('aria-selected', 'true')
+    await expect(canvas.getByRole('tabpanel')).toHaveTextContent('Network panel content')
+  },
+}
+
+export const KeyboardNavigation: Story = {
+  render: () => (
+    <Tabs.Root defaultValue="overview">
+      <Tabs.List>
+        <Tabs.Tab value="overview">Overview</Tabs.Tab>
+        <Tabs.Tab value="security">Security</Tabs.Tab>
+        <Tabs.Tab value="network">Network</Tabs.Tab>
+      </Tabs.List>
+      <Tabs.Panel value="overview">Overview content</Tabs.Panel>
+      <Tabs.Panel value="security">Security content</Tabs.Panel>
+      <Tabs.Panel value="network">Network content</Tabs.Panel>
+    </Tabs.Root>
+  ),
+  play: async ({canvas, userEvent}) => {
+    const tabs = canvas.getAllByRole('tab')
+
+    // Focus first tab then navigate with ArrowRight
+    await userEvent.click(tabs[0])
+    await expect(tabs[0]).toHaveAttribute('aria-selected', 'true')
+
+    await userEvent.keyboard('{ArrowRight}')
+    await expect(tabs[1]).toHaveFocus()
+
+    await userEvent.keyboard('{ArrowRight}')
+    await expect(tabs[2]).toHaveFocus()
+
+    // Wrap around
+    await userEvent.keyboard('{ArrowRight}')
+    await expect(tabs[0]).toHaveFocus()
+
+    // Home and End
+    await userEvent.keyboard('{End}')
+    await expect(tabs[2]).toHaveFocus()
+
+    await userEvent.keyboard('{Home}')
+    await expect(tabs[0]).toHaveFocus()
+  },
+}
+
+export const WithDisabledTab: Story = {
+  render: () => (
+    <Tabs.Root defaultValue="overview">
+      <Tabs.List>
+        <Tabs.Tab value="overview">Overview</Tabs.Tab>
+        <Tabs.Tab value="security">Security</Tabs.Tab>
+        <Tabs.Tab value="settings" disabled>
+          Settings
+        </Tabs.Tab>
+      </Tabs.List>
+      <Tabs.Panel value="overview">Overview content</Tabs.Panel>
+      <Tabs.Panel value="security">Security content</Tabs.Panel>
+      <Tabs.Panel value="settings">Settings content</Tabs.Panel>
+    </Tabs.Root>
+  ),
+  play: async ({canvas}) => {
+    const tabs = canvas.getAllByRole('tab')
+    await expect(tabs[2]).toHaveAttribute('aria-disabled', 'true')
+    await expect(tabs[2]).toHaveAttribute('aria-selected', 'false')
+  },
+}
+
+export const Vertical: Story = {
+  render: () => (
+    <Tabs.Root defaultValue="general" orientation="vertical">
+      <Tabs.List>
+        <Tabs.Tab value="general">General</Tabs.Tab>
+        <Tabs.Tab value="security">Security</Tabs.Tab>
+        <Tabs.Tab value="network">Network</Tabs.Tab>
+        <Tabs.Tab value="advanced">Advanced</Tabs.Tab>
+      </Tabs.List>
+      <Tabs.Panel value="general">General settings content</Tabs.Panel>
+      <Tabs.Panel value="security">Security settings content</Tabs.Panel>
+      <Tabs.Panel value="network">Network settings content</Tabs.Panel>
+      <Tabs.Panel value="advanced">Advanced settings content</Tabs.Panel>
+    </Tabs.Root>
+  ),
+  play: async ({canvas, userEvent}) => {
+    const tablist = canvas.getByRole('tablist')
+    await expect(tablist).toHaveAttribute('aria-orientation', 'vertical')
+
+    const tabs = canvas.getAllByRole('tab')
+
+    // Vertical tabs use ArrowDown/ArrowUp
+    await userEvent.click(tabs[0])
+    await userEvent.keyboard('{ArrowDown}')
+    await expect(tabs[1]).toHaveFocus()
+
+    await userEvent.keyboard('{ArrowUp}')
+    await expect(tabs[0]).toHaveFocus()
+  },
+}

package/src/components/Tabs/Tabs.tsx

@@ -0,0 +1,210 @@
+import {type ReactNode, useRef, useId, useEffect} from 'react'
+import {html} from 'react-strict-dom'
+import {styles} from './styles.css'
+import {TabsContext, useTabs} from './TabsContext'
+import {useTabsRoot} from './useTabsRoot'
+
+// --- Root ---
+
+interface RootProps {
+  children: ReactNode
+  value?: string
+  defaultValue?: string
+  onValueChange?: (value: string) => void
+  orientation?: 'horizontal' | 'vertical'
+}
+
+function Root({
+  children,
+  value,
+  defaultValue,
+  onValueChange,
+  orientation = 'horizontal',
+}: RootProps) {
+  const ctx = useTabsRoot({value, defaultValue, onValueChange, orientation})
+
+  return (
+    <TabsContext.Provider value={ctx}>
+      <html.div style={[styles.root, orientation === 'vertical' && styles.rootVertical]}>
+        {children}
+      </html.div>
+    </TabsContext.Provider>
+  )
+}
+
+// --- List ---
+
+interface ListProps {
+  children: ReactNode
+}
+
+function List({children}: ListProps) {
+  const {orientation, activeValue, onSelect, tabsRef, orderRef} = useTabs()
+  const listRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const el = listRef.current
+    if (!el) return
+
+    function handleKeyDown(this: HTMLElement, e: KeyboardEvent) {
+      const order = orderRef.current
+      const tabs = tabsRef.current
+      if (order.length === 0) return
+      const listEl = this
+
+      const prevKey = orientation === 'horizontal' ? 'ArrowLeft' : 'ArrowUp'
+      const nextKey = orientation === 'horizontal' ? 'ArrowRight' : 'ArrowDown'
+
+      let targetValue: string | null = null
+
+      switch (e.key) {
+        case nextKey: {
+          e.preventDefault()
+          const currentIdx = activeValue ? order.indexOf(activeValue) : -1
+          for (let i = 1; i <= order.length; i++) {
+            const idx = (currentIdx + i) % order.length
+            const val = order[idx]
+            if (!tabs.get(val)) {
+              targetValue = val
+              break
+            }
+          }
+          break
+        }
+        case prevKey: {
+          e.preventDefault()
+          const currentIdx = activeValue ? order.indexOf(activeValue) : 0
+          for (let i = 1; i <= order.length; i++) {
+            const idx = (currentIdx - i + order.length) % order.length
+            const val = order[idx]
+            if (!tabs.get(val)) {
+              targetValue = val
+              break
+            }
+          }
+          break
+        }
+        case 'Home': {
+          e.preventDefault()
+          for (const val of order) {
+            if (!tabs.get(val)) {
+              targetValue = val
+              break
+            }
+          }
+          break
+        }
+        case 'End': {
+          e.preventDefault()
+          for (let i = order.length - 1; i >= 0; i--) {
+            if (!tabs.get(order[i])) {
+              targetValue = order[i]
+              break
+            }
+          }
+          break
+        }
+      }
+
+      if (targetValue) {
+        onSelect(targetValue)
+        // Focus the newly activated tab button
+        const tabEl = listEl.querySelector(
+          `[data-tab-value="${targetValue}"]`,
+        ) as HTMLElement | null
+        tabEl?.focus()
+      }
+    }
+
+    el.addEventListener('keydown', handleKeyDown)
+    return () => el.removeEventListener('keydown', handleKeyDown)
+  }, [orientation, activeValue, onSelect, tabsRef, orderRef])
+
+  return (
+    <html.div
+      ref={listRef}
+      role="tablist"
+      aria-orientation={orientation}
+      style={[styles.list, orientation === 'vertical' && styles.listVertical]}
+    >
+      {children}
+    </html.div>
+  )
+}
+
+// --- Tab ---
+
+interface TabProps {
+  value: string
+  disabled?: boolean
+  children: ReactNode
+}
+
+function Tab({value, disabled = false, children}: TabProps) {
+  const {activeValue, onSelect, orientation, registerTab} = useTabs()
+  const isActive = activeValue === value
+  const tabId = useId()
+  const panelId = `${tabId}-panel`
+
+  useEffect(() => {
+    return registerTab(value, disabled)
+  }, [value, disabled, registerTab])
+
+  const handleClick = () => {
+    if (!disabled) {
+      onSelect(value)
+    }
+  }
+
+  return (
+    <html.button
+      type="button"
+      role="tab"
+      id={tabId}
+      aria-selected={isActive}
+      aria-controls={panelId}
+      aria-disabled={disabled || undefined}
+      data-tab-value={value}
+      tabIndex={isActive ? 0 : -1}
+      onClick={handleClick}
+      style={[
+        styles.tab,
+        orientation === 'vertical' && styles.tabVertical,
+        isActive &&
+          (orientation === 'vertical' ? styles.tabActiveVertical : styles.tabActiveHorizontal),
+        disabled && styles.tabDisabled,
+      ]}
+    >
+      {children}
+    </html.button>
+  )
+}
+
+// --- Panel ---
+
+interface PanelProps {
+  value: string
+  children: ReactNode
+}
+
+function Panel({value, children}: PanelProps) {
+  const {activeValue, orientation} = useTabs()
+
+  if (activeValue !== value) return null
+
+  return (
+    <html.div
+      role="tabpanel"
+      style={[styles.panel, orientation === 'vertical' && styles.panelVertical]}
+    >
+      {children}
+    </html.div>
+  )
+}
+
+export const Tabs = {
+  Root,
+  List,
+  Tab,
+  Panel,
+}

package/src/components/Tabs/TabsContext.ts

@@ -0,0 +1,20 @@
+import {createContext, useContext} from 'react'
+
+export type Orientation = 'horizontal' | 'vertical'
+
+export interface TabsContextValue {
+  activeValue: string | null
+  onSelect: (value: string) => void
+  orientation: Orientation
+  registerTab: (value: string, disabled: boolean) => () => void
+  tabsRef: React.RefObject<Map<string, boolean>>
+  orderRef: React.RefObject<string[]>
+}
+
+export const TabsContext = createContext<TabsContextValue | null>(null)
+
+export function useTabs() {
+  const ctx = useContext(TabsContext)
+  if (!ctx) throw new Error('Tabs compound components must be used within Tabs.Root')
+  return ctx
+}

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

@@ -0,0 +1,98 @@
+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',
+  },
+  rootVertical: {
+    flexDirection: 'row',
+  },
+  list: {
+    display: 'flex',
+    flexDirection: 'row',
+    borderBottomWidth: 1,
+    borderBottomStyle: 'solid',
+    borderBottomColor: colors.border,
+    gap: spacing.xs,
+  },
+  listVertical: {
+    flexDirection: 'column',
+    borderBottomWidth: 0,
+    borderRightWidth: 1,
+    borderRightStyle: 'solid',
+    borderRightColor: colors.border,
+    gap: 0,
+  },
+  tab: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingTop: spacing.sm,
+    paddingBottom: spacing.sm,
+    paddingLeft: spacing.md,
+    paddingRight: spacing.md,
+    fontFamily: typography.fontFamily,
+    fontSize: typography.fontSizeSm,
+    fontWeight: typography.fontWeightMedium,
+    color: {
+      default: colors.textMuted,
+      ':hover': colors.text,
+    },
+    backgroundColor: 'transparent',
+    borderWidth: 0,
+    borderBottomWidth: 2,
+    borderBottomStyle: 'solid',
+    borderBottomColor: 'transparent',
+    cursor: 'pointer',
+    transitionProperty: 'color, border-color',
+    transitionDuration: '150ms',
+    transitionTimingFunction: 'ease',
+    outlineWidth: {
+      default: 0,
+      ':focus-visible': 2,
+    },
+    outlineStyle: {
+      default: 'none',
+      ':focus-visible': 'solid',
+    },
+    outlineColor: {
+      default: 'transparent',
+      ':focus-visible': colors.accent,
+    },
+    outlineOffset: {
+      default: 0,
+      ':focus-visible': -2,
+    },
+  },
+  tabVertical: {
+    justifyContent: 'flex-start',
+    borderBottomWidth: 0,
+    borderRightWidth: 2,
+    borderRightStyle: 'solid',
+    borderRightColor: 'transparent',
+  },
+  tabActiveHorizontal: {
+    color: colors.text,
+    borderBottomColor: colors.accent,
+  },
+  tabActiveVertical: {
+    color: colors.text,
+    borderRightColor: colors.accent,
+  },
+  tabDisabled: {
+    opacity: 0.5,
+    cursor: 'not-allowed',
+    color: colors.textMuted,
+  },
+  panel: {
+    paddingTop: spacing.md,
+  },
+  panelVertical: {
+    paddingTop: 0,
+    paddingLeft: spacing.md,
+  },
+})

package/src/components/Tabs/useTabsRoot.ts

@@ -0,0 +1,42 @@
+import {useCallback, useRef} from 'react'
+import {useControllableValue} from '../../hooks/useControllableValue'
+import type {Orientation, TabsContextValue} from './TabsContext'
+
+interface UseTabsRootOptions {
+  value?: string
+  defaultValue?: string
+  onValueChange?: (value: string) => void
+  orientation?: Orientation
+}
+
+export function useTabsRoot({
+  value: controlledValue,
+  defaultValue,
+  onValueChange,
+  orientation = 'horizontal',
+}: UseTabsRootOptions): TabsContextValue {
+  const [activeValue, onSelect] = useControllableValue<string | null>(
+    controlledValue,
+    defaultValue ?? null,
+    onValueChange
+      ? (v) => {
+          if (v !== null) onValueChange(v)
+        }
+      : undefined,
+  )
+  const tabsRef = useRef(new Map<string, boolean>())
+  const orderRef = useRef<string[]>([])
+
+  const registerTab = useCallback((value: string, disabled: boolean) => {
+    tabsRef.current.set(value, disabled)
+    if (!orderRef.current.includes(value)) {
+      orderRef.current.push(value)
+    }
+    return () => {
+      tabsRef.current.delete(value)
+      orderRef.current = orderRef.current.filter((v) => v !== value)
+    }
+  }, [])
+
+  return {activeValue, onSelect, orientation, registerTab, tabsRef, orderRef}
+}

package/src/components/Text/Text.tsx

@@ -0,0 +1,52 @@
+import type {ReactNode} from 'react'
+import {html} from 'react-strict-dom'
+import {typePresets} from '@duro-app/tokens/tokens/type-presets.css'
+import {styles} from './styles.css'
+
+export type TextVariant = 'bodySm' | 'bodyMd' | 'bodyLg' | 'caption' | 'label' | 'code' | 'overline'
+export type TextColor = 'default' | 'muted' | 'accent' | 'error' | 'success' | 'warning'
+
+interface TextProps {
+  variant?: TextVariant
+  color?: TextColor
+  weight?: 'normal' | 'medium' | 'semibold' | 'bold'
+  align?: 'start' | 'center' | 'end'
+  truncate?: boolean
+  as?: 'span' | 'p' | 'div'
+  children: ReactNode
+}
+
+const weightMap = {
+  normal: styles.weightNormal,
+  medium: styles.weightMedium,
+  semibold: styles.weightSemibold,
+  bold: styles.weightBold,
+} as const
+
+const alignMap = {
+  start: styles.alignStart,
+  center: styles.alignCenter,
+  end: styles.alignEnd,
+} as const
+
+export function Text({
+  variant = 'bodyMd',
+  color = 'default',
+  weight,
+  align,
+  truncate,
+  as = 'span',
+  children,
+}: TextProps) {
+  const style = [
+    typePresets[variant],
+    styles[color],
+    weight && weightMap[weight],
+    align && alignMap[align],
+    truncate && styles.truncate,
+  ]
+
+  if (as === 'p') return <html.p style={style}>{children}</html.p>
+  if (as === 'div') return <html.div style={style}>{children}</html.div>
+  return <html.span style={style}>{children}</html.span>
+}

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

@@ -0,0 +1,57 @@
+import {css} from 'react-strict-dom'
+import {colors} from '@duro-app/tokens/tokens/colors.css'
+import {typography} from '@duro-app/tokens/tokens/typography.css'
+
+export const styles = css.create({
+  // Colors
+  default: {
+    color: colors.text,
+  },
+  muted: {
+    color: colors.textMuted,
+  },
+  accent: {
+    color: colors.accent,
+  },
+  error: {
+    color: colors.errorText,
+  },
+  success: {
+    color: colors.successText,
+  },
+  warning: {
+    color: colors.warningText,
+  },
+
+  // Weight overrides
+  weightNormal: {
+    fontWeight: typography.fontWeightNormal,
+  },
+  weightMedium: {
+    fontWeight: typography.fontWeightMedium,
+  },
+  weightSemibold: {
+    fontWeight: typography.fontWeightSemibold,
+  },
+  weightBold: {
+    fontWeight: typography.fontWeightBold,
+  },
+
+  // Alignment
+  alignStart: {
+    textAlign: 'start',
+  },
+  alignCenter: {
+    textAlign: 'center',
+  },
+  alignEnd: {
+    textAlign: 'end',
+  },
+
+  // Truncate
+  truncate: {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+  },
+})

package/src/components/Textarea/Textarea.stories.tsx

@@ -0,0 +1,80 @@
+import type {Meta, StoryObj} from '@storybook/react'
+import {expect, fn} from 'storybook/test'
+import {css, html} from 'react-strict-dom'
+import {Textarea} from './Textarea'
+
+const meta: Meta<typeof Textarea> = {
+  title: 'Components/Textarea',
+  component: Textarea,
+  args: {
+    onChange: fn(),
+  },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'error'],
+    },
+    disabled: {control: 'boolean'},
+    rows: {control: 'number'},
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Textarea>
+
+export const Default: Story = {
+  args: {placeholder: 'Enter your message...'},
+  play: async ({canvas, userEvent, args}) => {
+    const textarea = canvas.getByPlaceholderText('Enter your message...')
+    await expect(textarea).toBeInTheDocument()
+    await expect(textarea).toBeEnabled()
+
+    await userEvent.type(textarea, 'Hello world')
+    await expect(textarea).toHaveValue('Hello world')
+    await expect(args.onChange).toHaveBeenCalled()
+  },
+}
+
+export const Error: Story = {
+  args: {variant: 'error', placeholder: 'Invalid content'},
+  play: async ({canvas}) => {
+    const textarea = canvas.getByPlaceholderText('Invalid content')
+    await expect(textarea).toHaveAttribute('aria-invalid', 'true')
+  },
+}
+
+export const Disabled: Story = {
+  args: {placeholder: 'Disabled', disabled: true},
+  play: async ({canvas}) => {
+    await expect(canvas.getByPlaceholderText('Disabled')).toBeDisabled()
+  },
+}
+
+export const CustomRows: Story = {
+  args: {placeholder: 'Large textarea', rows: 8},
+  play: async ({canvas}) => {
+    const textarea = canvas.getByPlaceholderText('Large textarea')
+    await expect(textarea).toHaveAttribute('rows', '8')
+  },
+}
+
+const stackStyles = css.create({
+  stack: {display: 'flex', flexDirection: 'column', gap: 12, maxWidth: 320},
+})
+
+export const AllVariants: Story = {
+  render: () => (
+    <html.div style={stackStyles.stack}>
+      <Textarea placeholder="Default textarea" />
+      <Textarea variant="error" placeholder="Error textarea" />
+      <Textarea placeholder="Disabled" disabled />
+    </html.div>
+  ),
+  play: async ({canvas}) => {
+    const textareas = canvas.getAllByRole('textbox')
+    await expect(textareas.length).toBe(3)
+
+    const disabled = canvas.getByPlaceholderText('Disabled')
+    await expect(disabled).toBeDisabled()
+  },
+}