@duro-app/ui 0.15.1 → 0.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duro-app/ui",
-  "version": "0.15.1",
+  "version": "0.16.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -33,18 +33,35 @@
     "./reset.css": "./src/global-reset.css"
   },
   "peerDependencies": {
+    "@hookform/resolvers": "^5.0.0",
+    "effect": "^3.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-hook-form": "^7.55.0",
     "react-strict-dom": "^0.0.55"
   },
+  "peerDependenciesMeta": {
+    "react-hook-form": {
+      "optional": true
+    },
+    "@hookform/resolvers": {
+      "optional": true
+    },
+    "effect": {
+      "optional": true
+    }
+  },
   "dependencies": {
-    "@duro-app/tokens": "^0.15.1"
+    "@duro-app/tokens": "^0.16.0"
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.28.0",
+    "@hookform/resolvers": "^5.0.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "@vitejs/plugin-react": "^4.0.0",
+    "effect": "^3.0.0",
+    "react-hook-form": "^7.55.0",
     "typescript": "^5.7.0",
     "vite": "^6.0.0",
     "vite-plugin-babel": "^1.5.0",

package/src/components/Field/Field.tsx

@@ -1,15 +1,67 @@
 import {type ReactNode, useId, useMemo} from 'react'
 import {html} from 'react-strict-dom'
+import {useFormContext as useRHFFormContext, useController} from 'react-hook-form'
 import {FieldContext, useFieldContext} from './FieldContext'
+import {useFormContext} from '../Form/FormContext'
 import {styles} from './styles.css'
 
 // --- Root ---
 interface RootProps {
+  name?: string
   invalid?: boolean
   children: ReactNode
 }
 
-function Root({invalid = false, children}: RootProps) {
+function Root({name, ...props}: RootProps) {
+  const insideForm = useFormContext()
+  if (name && insideForm) {
+    return <ControlledRoot name={name} {...props} />
+  }
+  return <StaticRoot {...props} />
+}
+
+// Always calls useController — no conditional hooks
+function ControlledRoot({
+  name,
+  invalid: invalidProp = false,
+  children,
+}: {
+  name: string
+  invalid?: boolean
+  children: ReactNode
+}) {
+  const id = useId()
+  const {control} = useRHFFormContext()
+  const {field, fieldState} = useController({control, name})
+  const invalid = invalidProp || !!fieldState.error
+
+  const ctx = useMemo(
+    () => ({
+      controlId: `${id}-control`,
+      descriptionId: `${id}-description`,
+      errorId: `${id}-error`,
+      invalid,
+      field: {
+        value: field.value,
+        onChange: field.onChange,
+        onBlur: field.onBlur,
+        ref: field.ref,
+        name: field.name,
+      },
+      errorMessage: fieldState.error?.message,
+    }),
+    [id, invalid, field.value, field.onChange, field.onBlur, field.ref, field.name, fieldState.error],
+  )
+
+  return (
+    <FieldContext.Provider value={ctx}>
+      <html.div style={styles.root}>{children}</html.div>
+    </FieldContext.Provider>
+  )
+}
+
+// Current behavior, no RHF dependency
+function StaticRoot({invalid = false, children}: {invalid?: boolean; children: ReactNode}) {
   const id = useId()
   const ctx = useMemo(
     () => ({
@@ -63,11 +115,12 @@ interface ErrorProps {
 
 function Error({children}: ErrorProps) {
   const ctx = useFieldContext()
-  if (!ctx?.invalid && !children) return null
+  const content = children ?? ctx?.errorMessage
+  if (!ctx?.invalid && !content) return null
 
   return (
     <html.span id={ctx?.errorId} role="alert" style={styles.error}>
-      {children}
+      {content}
     </html.span>
   )
 }

package/src/components/Field/FieldContext.ts

@@ -5,8 +5,18 @@ interface FieldContextValue {
   descriptionId: string
   errorId: string
   invalid: boolean
+  field?: {
+    value: unknown
+    onChange: (...event: unknown[]) => void
+    onBlur: () => void
+    ref: React.RefCallback<unknown>
+    name: string
+  }
+  errorMessage?: string
 }
 
+export type {FieldContextValue}
+
 export const FieldContext = createContext<FieldContextValue | null>(null)
 
 export function useFieldContext() {

package/src/components/Form/Form.stories.tsx

@@ -0,0 +1,252 @@
+import type {Meta, StoryObj} from '@storybook/react'
+import {expect, fn, userEvent, within} from 'storybook/test'
+import {css, html} from 'react-strict-dom'
+import {Schema} from 'effect'
+import {Form} from './Form'
+import {Field} from '../Field/Field'
+import {Input} from '../Input/Input'
+import {Textarea} from '../Textarea/Textarea'
+import {Fieldset} from '../Fieldset/Fieldset'
+import {Button} from '../Button/Button'
+
+const meta: Meta = {
+  title: 'Components/Form',
+}
+
+export default meta
+type Story = StoryObj
+
+// --- Schemas ---
+
+const LoginSchema = Schema.Struct({
+  username: Schema.String.pipe(
+    Schema.minLength(3, {message: () => 'Username must be at least 3 characters'}),
+  ),
+  password: Schema.String.pipe(
+    Schema.minLength(8, {message: () => 'Password must be at least 8 characters'}),
+  ),
+})
+
+const FeedbackSchema = Schema.Struct({
+  email: Schema.String.pipe(
+    Schema.pattern(/^[^\s@]+@[^\s@]+\.[^\s@]+$/, {message: () => 'Enter a valid email address'}),
+  ),
+  message: Schema.String.pipe(
+    Schema.minLength(10, {message: () => 'Message must be at least 10 characters'}),
+  ),
+})
+
+const wrapStyles = css.create({
+  wrap: {maxWidth: 400},
+})
+
+// --- Stories ---
+
+export const Default: Story = {
+  render: () => {
+    const handleSubmit = fn()
+    return (
+      <html.div style={wrapStyles.wrap}>
+        <Form
+          schema={LoginSchema}
+          defaultValues={{username: '', password: ''}}
+          onSubmit={handleSubmit}
+        >
+          {({formState}) => (
+            <Fieldset.Root gap="md">
+              <Field.Root name="username">
+                <Field.Label>Username</Field.Label>
+                <Input placeholder="Enter username" />
+                <Field.Description>3-32 characters</Field.Description>
+                <Field.Error />
+              </Field.Root>
+
+              <Field.Root name="password">
+                <Field.Label>Password</Field.Label>
+                <Input type="password" placeholder="Enter password" />
+                <Field.Error />
+              </Field.Root>
+
+              <Button type="submit" disabled={!formState.isValid}>
+                Log in
+              </Button>
+            </Fieldset.Root>
+          )}
+        </Form>
+      </html.div>
+    )
+  },
+  play: async ({canvas}) => {
+    // Submit button starts disabled (empty fields are invalid)
+    const button = canvas.getByRole('button', {name: 'Log in'})
+    await expect(button).toBeDisabled()
+
+    // Labels and inputs rendered
+    await expect(canvas.getByText('Username')).toBeInTheDocument()
+    await expect(canvas.getByText('Password')).toBeInTheDocument()
+    await expect(canvas.getByPlaceholderText('Enter username')).toBeInTheDocument()
+    await expect(canvas.getByPlaceholderText('Enter password')).toBeInTheDocument()
+  },
+}
+
+export const ValidationOnBlur: Story = {
+  name: 'Validation — on blur',
+  render: () => (
+    <html.div style={wrapStyles.wrap}>
+      <Form
+        schema={LoginSchema}
+        defaultValues={{username: '', password: ''}}
+        onSubmit={fn()}
+      >
+        <Fieldset.Root gap="md">
+          <Field.Root name="username">
+            <Field.Label>Username</Field.Label>
+            <Input placeholder="Enter username" />
+            <Field.Error />
+          </Field.Root>
+
+          <Field.Root name="password">
+            <Field.Label>Password</Field.Label>
+            <Input type="password" placeholder="Enter password" />
+            <Field.Error />
+          </Field.Root>
+
+          <Button type="submit">Log in</Button>
+        </Fieldset.Root>
+      </Form>
+    </html.div>
+  ),
+  play: async ({canvas, step}) => {
+    const usernameInput = canvas.getByPlaceholderText('Enter username')
+    const passwordInput = canvas.getByPlaceholderText('Enter password')
+
+    await step('No errors before interaction', async () => {
+      expect(canvas.queryByRole('alert')).not.toBeInTheDocument()
+    })
+
+    await step('Type short username then blur — error appears', async () => {
+      await userEvent.type(usernameInput, 'ab')
+      await userEvent.tab() // blur
+      const alert = await canvas.findByRole('alert')
+      await expect(alert).toHaveTextContent('Username must be at least 3 characters')
+    })
+
+    await step('Fix username by typing more — error clears (reValidateMode: onChange)', async () => {
+      await userEvent.type(usernameInput, 'c') // now "abc"
+      expect(canvas.queryByText('Username must be at least 3 characters')).not.toBeInTheDocument()
+    })
+
+    await step('Blur empty password — error appears', async () => {
+      await userEvent.click(passwordInput)
+      await userEvent.tab()
+      const alerts = canvas.getAllByRole('alert')
+      const pwAlert = alerts.find((el) => el.textContent?.includes('Password'))
+      await expect(pwAlert).toBeDefined()
+    })
+  },
+}
+
+export const WithTextarea: Story = {
+  name: 'With Textarea',
+  render: () => (
+    <html.div style={wrapStyles.wrap}>
+      <Form
+        schema={FeedbackSchema}
+        defaultValues={{email: '', message: ''}}
+        onSubmit={fn()}
+      >
+        {({formState}) => (
+          <Fieldset.Root gap="md">
+            <Field.Root name="email">
+              <Field.Label>Email</Field.Label>
+              <Input type="email" placeholder="you@example.com" />
+              <Field.Error />
+            </Field.Root>
+
+            <Field.Root name="message">
+              <Field.Label>Message</Field.Label>
+              <Textarea placeholder="Tell us what you think..." rows={4} />
+              <Field.Description>At least 10 characters</Field.Description>
+              <Field.Error />
+            </Field.Root>
+
+            <Button type="submit" disabled={!formState.isValid}>
+              Send feedback
+            </Button>
+          </Fieldset.Root>
+        )}
+      </Form>
+    </html.div>
+  ),
+  play: async ({canvas}) => {
+    await expect(canvas.getByPlaceholderText('you@example.com')).toBeInTheDocument()
+    await expect(canvas.getByPlaceholderText('Tell us what you think...')).toBeInTheDocument()
+
+    const button = canvas.getByRole('button', {name: 'Send feedback'})
+    await expect(button).toBeDisabled()
+  },
+}
+
+export const SuccessfulSubmit: Story = {
+  name: 'Successful submit',
+  render: () => {
+    const onSubmit = fn()
+    return (
+      <html.div style={wrapStyles.wrap}>
+        <Form
+          schema={LoginSchema}
+          defaultValues={{username: '', password: ''}}
+          onSubmit={onSubmit}
+        >
+          <Fieldset.Root gap="md">
+            <Field.Root name="username">
+              <Field.Label>Username</Field.Label>
+              <Input placeholder="Enter username" />
+              <Field.Error />
+            </Field.Root>
+
+            <Field.Root name="password">
+              <Field.Label>Password</Field.Label>
+              <Input type="password" placeholder="Enter password" />
+              <Field.Error />
+            </Field.Root>
+
+            <Button type="submit">Log in</Button>
+          </Fieldset.Root>
+        </Form>
+      </html.div>
+    )
+  },
+  play: async ({canvas}) => {
+    const usernameInput = canvas.getByPlaceholderText('Enter username')
+    const passwordInput = canvas.getByPlaceholderText('Enter password')
+
+    // Fill valid values
+    await userEvent.type(usernameInput, 'johndoe')
+    await userEvent.type(passwordInput, 'supersecret1')
+
+    // No errors should be present
+    expect(canvas.queryByRole('alert')).not.toBeInTheDocument()
+  },
+}
+
+export const StandaloneFieldStillWorks: Story = {
+  name: 'Standalone Field (no Form)',
+  render: () => (
+    <html.div style={wrapStyles.wrap}>
+      <Field.Root invalid>
+        <Field.Label>Email</Field.Label>
+        <Input variant="error" placeholder="Enter email" />
+        <Field.Error>Manual error — no Form wrapper needed.</Field.Error>
+      </Field.Root>
+    </html.div>
+  ),
+  play: async ({canvas}) => {
+    // Standalone usage still works without Form context
+    const input = canvas.getByPlaceholderText('Enter email')
+    await expect(input).toHaveAttribute('aria-invalid', 'true')
+
+    const alert = canvas.getByRole('alert')
+    await expect(alert).toHaveTextContent('Manual error — no Form wrapper needed.')
+  },
+}

package/src/components/Form/Form.tsx

@@ -0,0 +1,59 @@
+import {type ReactNode, useCallback, useEffect, useRef} from 'react'
+import {html} from 'react-strict-dom'
+import {
+  useForm,
+  FormProvider,
+  type UseFormReturn,
+  type DefaultValues,
+  type FieldValues,
+} from 'react-hook-form'
+import {effectTsResolver} from '@hookform/resolvers/effect-ts'
+import type {Schema} from 'effect'
+import {FormContext} from './FormContext'
+
+export interface FormProps<T extends FieldValues> {
+  schema: Schema.Schema<T>
+  defaultValues: DefaultValues<T>
+  onSubmit: (data: T) => void | Promise<void>
+  children: ReactNode | ((methods: UseFormReturn<T>) => ReactNode)
+}
+
+export function Form<T extends FieldValues>({
+  schema,
+  defaultValues,
+  onSubmit,
+  children,
+}: FormProps<T>) {
+  const methods = useForm<T>({
+    resolver: effectTsResolver(schema),
+    defaultValues,
+    mode: 'onTouched',
+    reValidateMode: 'onChange',
+  })
+
+  const formRef = useRef<HTMLFormElement>(null)
+  const handleSubmit = useCallback(
+    (e: Event) => {
+      e.preventDefault()
+      void methods.handleSubmit(onSubmit)()
+    },
+    [methods, onSubmit],
+  )
+
+  useEffect(() => {
+    const el = formRef.current
+    if (!el) return
+    el.addEventListener('submit', handleSubmit)
+    return () => el.removeEventListener('submit', handleSubmit)
+  }, [handleSubmit])
+
+  return (
+    <FormProvider {...methods}>
+      <FormContext.Provider value={true}>
+        <html.form ref={formRef}>
+          {typeof children === 'function' ? children(methods) : children}
+        </html.form>
+      </FormContext.Provider>
+    </FormProvider>
+  )
+}

package/src/components/Form/FormContext.ts

@@ -0,0 +1,7 @@
+import {createContext, useContext} from 'react'
+
+export const FormContext = createContext(false)
+
+export function useFormContext() {
+  return useContext(FormContext)
+}

package/src/components/Input/Input.tsx

@@ -30,6 +30,8 @@ interface InputProps {
   defaultValue?: string
   disabled?: boolean
   onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
+  onBlur?: () => void
+  ref?: React.Ref<HTMLInputElement>
 }
 
 export function Input({
@@ -45,10 +47,20 @@ export function Input({
   defaultValue,
   disabled,
   onChange,
+  onBlur,
+  ref,
 }: InputProps) {
   const ctx = useFieldContext()
   const groupCtx = useInputGroupContext()
 
+  const fieldCtx = ctx?.field
+  const effectiveName = name ?? fieldCtx?.name
+  const effectiveValue = value ?? (fieldCtx ? String(fieldCtx.value ?? '') : undefined)
+  const effectiveOnChange = onChange ?? fieldCtx?.onChange
+  const effectiveOnBlur = onBlur ?? fieldCtx?.onBlur
+  const effectiveRef = ref ?? fieldCtx?.ref
+  const effectiveVariant = ctx?.invalid ? 'error' : variant
+
   // react-strict-dom omits web-only `pattern` from its types, but the
   // underlying DOM element supports it. Type-assert to pass it through.
   const extraProps = pattern !== undefined ? {pattern} : undefined
@@ -57,20 +69,22 @@ export function Input({
     <html.input
       id={ctx?.controlId}
       type={type}
-      name={name}
+      name={effectiveName}
       placeholder={placeholder}
       required={required}
       minLength={minLength}
       autoComplete={autoComplete}
-      value={value}
+      value={effectiveValue}
       defaultValue={defaultValue}
       disabled={disabled}
       aria-describedby={
         ctx ? `${ctx.descriptionId} ${ctx.invalid ? ctx.errorId : ''}`.trim() : undefined
       }
       aria-invalid={ctx?.invalid || variant === 'error' || undefined}
-      onChange={onChange}
-      style={[styles.base, styles[variant], groupCtx?.inGroup && styles.inGroup]}
+      onChange={effectiveOnChange as StrictInputProps['onChange']}
+      onBlur={effectiveOnBlur as StrictInputProps['onBlur']}
+      ref={effectiveRef as React.Ref<HTMLInputElement>}
+      style={[styles.base, styles[effectiveVariant], groupCtx?.inGroup && styles.inGroup]}
       {...(extraProps as Record<string, unknown>)}
     />
   )

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

@@ -5,7 +5,6 @@ import {typography} from '@duro-app/tokens/tokens/typography.css'
 
 export const styles = css.create({
   base: {
-    boxSizing: 'border-box',
     width: '100%',
     paddingTop: spacing.sm,
     paddingBottom: spacing.sm,

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

@@ -10,7 +10,6 @@ export const styles = css.create({
     width: '100%',
     marginLeft: 'auto',
     marginRight: 'auto',
-    boxSizing: 'border-box',
   },
   // Max-width presets
   maxSm: {maxWidth: 600},

package/src/components/Textarea/Textarea.tsx

@@ -2,6 +2,8 @@ import {html} from 'react-strict-dom'
 import {useFieldContext} from '../Field/FieldContext'
 import {styles} from './styles.css'
 
+type StrictTextareaProps = React.ComponentProps<typeof html.textarea>
+
 export type TextareaVariant = 'default' | 'error'
 
 interface TextareaProps {
@@ -14,6 +16,8 @@ interface TextareaProps {
   defaultValue?: string
   disabled?: boolean
   onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void
+  onBlur?: () => void
+  ref?: React.Ref<HTMLTextAreaElement>
 }
 
 export function Textarea({
@@ -26,25 +30,37 @@ export function Textarea({
   defaultValue,
   disabled,
   onChange,
+  onBlur,
+  ref,
 }: TextareaProps) {
   const ctx = useFieldContext()
 
+  const fieldCtx = ctx?.field
+  const effectiveName = name ?? fieldCtx?.name
+  const effectiveValue = value ?? (fieldCtx ? String(fieldCtx.value ?? '') : undefined)
+  const effectiveOnChange = onChange ?? fieldCtx?.onChange
+  const effectiveOnBlur = onBlur ?? fieldCtx?.onBlur
+  const effectiveRef = ref ?? fieldCtx?.ref
+  const effectiveVariant = ctx?.invalid ? 'error' : variant
+
   return (
     <html.textarea
       id={ctx?.controlId}
-      name={name}
+      name={effectiveName}
       placeholder={placeholder}
       required={required}
       rows={rows}
-      value={value}
+      value={effectiveValue}
       defaultValue={defaultValue}
       disabled={disabled}
       aria-describedby={
         ctx ? `${ctx.descriptionId} ${ctx.invalid ? ctx.errorId : ''}`.trim() : undefined
       }
       aria-invalid={ctx?.invalid || variant === 'error' || undefined}
-      onChange={onChange}
-      style={[styles.base, styles[variant]]}
+      onChange={effectiveOnChange as StrictTextareaProps['onChange']}
+      onBlur={effectiveOnBlur as StrictTextareaProps['onBlur']}
+      ref={effectiveRef as React.Ref<HTMLTextAreaElement>}
+      style={[styles.base, styles[effectiveVariant]]}
     />
   )
 }

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

@@ -5,7 +5,6 @@ import {typography} from '@duro-app/tokens/tokens/typography.css'
 
 export const styles = css.create({
   base: {
-    boxSizing: 'border-box',
     width: '100%',
     paddingTop: spacing.sm,
     paddingBottom: spacing.sm,

package/src/components/ToggleGroup/ToggleGroup.stories.tsx

@@ -119,7 +119,7 @@ export const Vertical: Story = {
     </ToggleGroup>
   ),
   play: async ({canvas}) => {
-    const group = canvas.getByRole('group')
+    const group = canvas.getByRole('toolbar')
     await expect(group).toHaveAttribute('aria-orientation', 'vertical')
   },
 }
@@ -153,7 +153,7 @@ export const AllVariants: Story = {
     </html.div>
   ),
   play: async ({canvas}) => {
-    const groups = canvas.getAllByRole('group')
+    const groups = canvas.getAllByRole('toolbar')
     await expect(groups.length).toBe(4)
   },
 }

package/src/index.ts

@@ -1,3 +1,4 @@
+import './global-reset.css'
 import './strict.css'
 
 // Components
@@ -12,6 +13,7 @@ export {Checkbox} from './components/Checkbox/Checkbox'
 export {EmptyState} from './components/EmptyState/EmptyState'
 export {Heading, type HeadingVariant} from './components/Heading/Heading'
 export {Field} from './components/Field/Field'
+export {Form, type FormProps} from './components/Form/Form'
 export {Fieldset, type FieldsetGap} from './components/Fieldset/Fieldset'
 export {Input, type InputVariant} from './components/Input/Input'
 export {InputGroup} from './components/InputGroup/InputGroup'