@duro-app/ui 0.24.0 → 0.25.0

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

@@ -1,3 +1,4 @@
+import {useState} from 'react'
 import type {Meta, StoryObj} from '@storybook/react'
 import {expect, fn, userEvent, within} from 'storybook/test'
 import {css, html} from 'react-strict-dom'
@@ -36,8 +37,19 @@ const FeedbackSchema = Schema.Struct({
   ),
 })
 
+const ProfileSchema = Schema.Struct({
+  name: Schema.String.pipe(
+    Schema.minLength(2, {message: () => 'Name must be at least 2 characters'}),
+  ),
+  email: Schema.String.pipe(
+    Schema.pattern(/^[^\s@]+@[^\s@]+\.[^\s@]+$/, {message: () => 'Enter a valid email'}),
+  ),
+  bio: Schema.String,
+})
+
 const wrapStyles = css.create({
   wrap: {maxWidth: 400},
+  wrapWide: {maxWidth: 600},
 })
 
 // --- Stories ---
@@ -241,3 +253,266 @@ export const StandaloneFieldStillWorks: Story = {
     await expect(alert).toHaveTextContent('Manual error — no Form wrapper needed.')
   },
 }
+
+// --- New feature stories ---
+
+export const NecessityIndicatorIcon: Story = {
+  name: 'Necessity indicator — icon',
+  render: () => (
+    <html.div style={wrapStyles.wrap}>
+      <Form
+        schema={ProfileSchema}
+        defaultValues={{name: '', email: '', bio: ''}}
+        onSubmit={fn()}
+        necessityIndicator="icon"
+      >
+        <Fieldset.Root gap="md">
+          <Field.Root name="name" required>
+            <Field.Label>Full name</Field.Label>
+            <Input placeholder="Jane Doe" />
+            <Field.Error />
+          </Field.Root>
+
+          <Field.Root name="email" required>
+            <Field.Label>Email</Field.Label>
+            <Input type="email" placeholder="you@example.com" />
+            <Field.Error />
+          </Field.Root>
+
+          <Field.Root name="bio">
+            <Field.Label>Bio</Field.Label>
+            <Textarea placeholder="Tell us about yourself..." rows={3} />
+          </Field.Root>
+
+          <Button type="submit">Save</Button>
+        </Fieldset.Root>
+      </Form>
+    </html.div>
+  ),
+  play: async ({canvas}) => {
+    // Required fields show asterisk
+    const nameLabel = canvas.getByText('Full name')
+    await expect(nameLabel.closest('label')?.textContent).toContain('*')
+
+    const emailLabel = canvas.getByText('Email')
+    await expect(emailLabel.closest('label')?.textContent).toContain('*')
+
+    // Optional field has no asterisk
+    const bioLabel = canvas.getByText('Bio')
+    await expect(bioLabel.closest('label')?.textContent).not.toContain('*')
+  },
+}
+
+export const NecessityIndicatorLabel: Story = {
+  name: 'Necessity indicator — label',
+  render: () => (
+    <html.div style={wrapStyles.wrap}>
+      <Form
+        schema={ProfileSchema}
+        defaultValues={{name: '', email: '', bio: ''}}
+        onSubmit={fn()}
+        necessityIndicator="label"
+      >
+        <Fieldset.Root gap="md">
+          <Field.Root name="name" required>
+            <Field.Label>Full name</Field.Label>
+            <Input placeholder="Jane Doe" />
+            <Field.Error />
+          </Field.Root>
+
+          <Field.Root name="email" required>
+            <Field.Label>Email</Field.Label>
+            <Input type="email" placeholder="you@example.com" />
+            <Field.Error />
+          </Field.Root>
+
+          <Field.Root name="bio">
+            <Field.Label>Bio</Field.Label>
+            <Textarea placeholder="Tell us about yourself..." rows={3} />
+          </Field.Root>
+
+          <Button type="submit">Save</Button>
+        </Fieldset.Root>
+      </Form>
+    </html.div>
+  ),
+  play: async ({canvas}) => {
+    // Required fields show "(required)" — there are two
+    const requiredIndicators = canvas.getAllByText('(required)')
+    await expect(requiredIndicators).toHaveLength(2)
+
+    // Optional field shows "(optional)"
+    await expect(canvas.getByText('(optional)')).toBeInTheDocument()
+  },
+}
+
+export const FocusFirstInvalid: Story = {
+  name: 'Focus first invalid on submit',
+  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}) => {
+    // Submit the form with empty fields
+    const button = canvas.getByRole('button', {name: 'Log in'})
+    await userEvent.click(button)
+
+    // First invalid field (username) should be focused
+    const usernameInput = canvas.getByPlaceholderText('Enter username')
+    await expect(usernameInput).toHaveFocus()
+  },
+}
+
+export const FormDisabled: Story = {
+  name: 'Form disabled',
+  render: () => (
+    <html.div style={wrapStyles.wrap}>
+      <Form
+        schema={LoginSchema}
+        defaultValues={{username: 'johndoe', password: 'supersecret1'}}
+        onSubmit={fn()}
+        disabled
+      >
+        <Fieldset.Root gap="md">
+          <Field.Root name="username">
+            <Field.Label>Username</Field.Label>
+            <Input placeholder="Enter username" />
+          </Field.Root>
+
+          <Field.Root name="password">
+            <Field.Label>Password</Field.Label>
+            <Input type="password" placeholder="Enter password" />
+          </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')
+    await expect(usernameInput).toBeDisabled()
+    await expect(passwordInput).toBeDisabled()
+  },
+}
+
+export const LabelPositionSide: Story = {
+  name: 'Label position — side',
+  render: () => (
+    <html.div style={wrapStyles.wrapWide}>
+      <Form
+        schema={ProfileSchema}
+        defaultValues={{name: '', email: '', bio: ''}}
+        onSubmit={fn()}
+        labelPosition="side"
+        necessityIndicator="icon"
+      >
+        {({formState}) => (
+          <Fieldset.Root gap="md">
+            <Field.Root name="name" required>
+              <Field.Label>Full name</Field.Label>
+              <Input placeholder="Jane Doe" />
+              <Field.Error />
+            </Field.Root>
+
+            <Field.Root name="email" required>
+              <Field.Label>Email</Field.Label>
+              <Input type="email" placeholder="you@example.com" />
+              <Field.Description>We will never share your email.</Field.Description>
+              <Field.Error />
+            </Field.Root>
+
+            <Field.Root name="bio">
+              <Field.Label>Bio</Field.Label>
+              <Textarea placeholder="Tell us about yourself..." rows={3} />
+            </Field.Root>
+
+            <Button type="submit" disabled={!formState.isValid}>
+              Save profile
+            </Button>
+          </Fieldset.Root>
+        )}
+      </Form>
+    </html.div>
+  ),
+  play: async ({canvas}) => {
+    await expect(canvas.getByPlaceholderText('Jane Doe')).toBeInTheDocument()
+    await expect(canvas.getByPlaceholderText('you@example.com')).toBeInTheDocument()
+  },
+}
+
+export const ServerValidationErrors: Story = {
+  name: 'Server validation errors',
+  render: () => {
+    function ServerErrorDemo() {
+      const [serverErrors, setServerErrors] = useState<
+        Partial<Record<'username' | 'password', string>>
+      >({})
+
+      return (
+        <html.div style={wrapStyles.wrap}>
+          <Form
+            schema={LoginSchema}
+            defaultValues={{username: '', password: ''}}
+            onSubmit={() => {
+              // Simulate server response with errors
+              setServerErrors({username: 'This username is already taken'})
+            }}
+            validationErrors={serverErrors}
+          >
+            <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">Register</Button>
+            </Fieldset.Root>
+          </Form>
+        </html.div>
+      )
+    }
+
+    return <ServerErrorDemo />
+  },
+  play: async ({canvas}) => {
+    const usernameInput = canvas.getByPlaceholderText('Enter username')
+    const passwordInput = canvas.getByPlaceholderText('Enter password')
+
+    // Fill valid values and submit
+    await userEvent.type(usernameInput, 'johndoe')
+    await userEvent.type(passwordInput, 'supersecret1')
+
+    const button = canvas.getByRole('button', {name: 'Register'})
+    await userEvent.click(button)
+
+    // Server error appears
+    const alert = await canvas.findByRole('alert')
+    await expect(alert).toHaveTextContent('This username is already taken')
+  },
+}

package/src/components/Form/Form.tsx

@@ -1,27 +1,48 @@
-import {type ReactNode, useCallback, useEffect, useRef} from 'react'
-import {html} from 'react-strict-dom'
+import {type ReactNode, useCallback, useEffect, useMemo, useRef} from 'react'
+import {css, html} from 'react-strict-dom'
 import {
   useForm,
   FormProvider,
   type UseFormReturn,
   type DefaultValues,
   type FieldValues,
+  type FieldErrors,
+  type Path,
 } from 'react-hook-form'
 import {effectTsResolver} from '@hookform/resolvers/effect-ts'
 import type {Schema} from 'effect'
-import {FormContext} from './FormContext'
+import {
+  FormContext,
+  type LabelPosition,
+  type NecessityIndicator,
+} from './FormContext'
 
 export interface FormProps<T extends FieldValues> {
   schema: Schema.Schema<T>
   defaultValues: DefaultValues<T>
   onSubmit: (data: T) => void | Promise<void>
+  disabled?: boolean
+  labelPosition?: LabelPosition
+  necessityIndicator?: NecessityIndicator
+  validationErrors?: Partial<Record<Path<T>, string>>
   children: ReactNode | ((methods: UseFormReturn<T>) => ReactNode)
 }
 
+const formStyles = css.create({
+  disabled: {
+    opacity: 0.5,
+    pointerEvents: 'none',
+  },
+})
+
 export function Form<T extends FieldValues>({
   schema,
   defaultValues,
   onSubmit,
+  disabled = false,
+  labelPosition = 'top',
+  necessityIndicator = false,
+  validationErrors,
   children,
 }: FormProps<T>) {
   const methods = useForm<T>({
@@ -31,13 +52,49 @@ export function Form<T extends FieldValues>({
     reValidateMode: 'onChange',
   })
 
+  // Sync server-side validation errors into RHF
+  const prevErrorKeysRef = useRef<string[]>([])
+  useEffect(() => {
+    const prevKeys = prevErrorKeysRef.current
+    const nextKeys = validationErrors ? Object.keys(validationErrors) : []
+
+    // Clear errors that were removed
+    for (const key of prevKeys) {
+      if (!nextKeys.includes(key)) {
+        methods.clearErrors(key as Path<T>)
+      }
+    }
+
+    // Set new errors
+    if (validationErrors) {
+      for (const [key, message] of Object.entries(validationErrors)) {
+        if (message) {
+          methods.setError(key as Path<T>, {type: 'server', message: message as string})
+        }
+      }
+    }
+
+    prevErrorKeysRef.current = nextKeys
+  }, [validationErrors, methods])
+
   const formRef = useRef<HTMLFormElement>(null)
+
+  const onInvalid = useCallback(
+    (errors: FieldErrors<T>) => {
+      const firstField = Object.keys(errors)[0]
+      if (firstField) {
+        methods.setFocus(firstField as Path<T>)
+      }
+    },
+    [methods],
+  )
+
   const handleSubmit = useCallback(
     (e: Event) => {
       e.preventDefault()
-      void methods.handleSubmit(onSubmit)()
+      void methods.handleSubmit(onSubmit, onInvalid)()
     },
-    [methods, onSubmit],
+    [methods, onSubmit, onInvalid],
   )
 
   useEffect(() => {
@@ -47,10 +104,19 @@ export function Form<T extends FieldValues>({
     return () => el.removeEventListener('submit', handleSubmit)
   }, [handleSubmit])
 
+  const formCtx = useMemo(
+    () => ({disabled, labelPosition, necessityIndicator}),
+    [disabled, labelPosition, necessityIndicator],
+  )
+
   return (
     <FormProvider {...methods}>
-      <FormContext.Provider value={true}>
-        <html.form ref={formRef}>
+      <FormContext.Provider value={formCtx}>
+        <html.form
+          ref={formRef}
+          aria-disabled={disabled || undefined}
+          style={disabled && formStyles.disabled}
+        >
           {typeof children === 'function' ? children(methods) : children}
         </html.form>
       </FormContext.Provider>

package/src/components/Form/FormContext.ts

@@ -1,6 +1,15 @@
 import {createContext, useContext} from 'react'
 
-export const FormContext = createContext(false)
+export type LabelPosition = 'top' | 'side'
+export type NecessityIndicator = 'icon' | 'label' | false
+
+export interface FormContextValue {
+  disabled: boolean
+  labelPosition: LabelPosition
+  necessityIndicator: NecessityIndicator
+}
+
+export const FormContext = createContext<FormContextValue | null>(null)
 
 export function useFormContext() {
   return useContext(FormContext)

package/src/components/Input/Input.tsx

@@ -59,6 +59,7 @@ export function Input({
   const effectiveOnChange = onChange ?? fieldCtx?.onChange
   const effectiveOnBlur = onBlur ?? fieldCtx?.onBlur
   const effectiveRef = ref ?? fieldCtx?.ref
+  const effectiveDisabled = disabled ?? ctx?.disabled
   const effectiveVariant = ctx?.invalid ? 'error' : variant
 
   // react-strict-dom omits web-only `pattern` from its types, but the
@@ -76,7 +77,7 @@ export function Input({
       autoComplete={autoComplete}
       value={effectiveValue}
       defaultValue={defaultValue}
-      disabled={disabled}
+      disabled={effectiveDisabled}
       aria-describedby={
         ctx ? `${ctx.descriptionId} ${ctx.invalid ? ctx.errorId : ''}`.trim() : undefined
       }

package/src/components/RadioGroup/RadioGroup.meta.ts

@@ -13,7 +13,10 @@ export const meta: ComponentMeta = {
     'Binary on/off — use Switch',
   ],
   relatedTo: [
-    {component: 'CheckboxGroup', relationship: 'CheckboxGroup for multi-select; RadioGroup for single-select'},
+    {
+      component: 'CheckboxGroup',
+      relationship: 'CheckboxGroup for multi-select; RadioGroup for single-select',
+    },
     {component: 'Select', relationship: 'Select for larger option sets or when space is limited'},
     {component: 'ToggleGroup', relationship: 'ToggleGroup for toolbar-style selection'},
   ],

package/src/components/RadioGroup/RadioGroup.tsx

@@ -84,10 +84,7 @@ function Item({value, disabled: itemDisabled = false, children}: ItemProps) {
   }
 
   return (
-    <html.label
-      style={[styles.item, isDisabled && styles.itemDisabled]}
-      onClick={handleClick}
-    >
+    <html.label style={[styles.item, isDisabled && styles.itemDisabled]} onClick={handleClick}>
       <html.input
         type="radio"
         value={value}

package/src/components/Table/SortIndicator.tsx

@@ -44,10 +44,7 @@ export function SortIndicator<TData>({column}: SortIndicatorProps<TData>) {
 
   return (
     <html.span
-      style={[
-        styles.root,
-        sorted ? styles.active : styles.inactive,
-      ]}
+      style={[styles.root, sorted ? styles.active : styles.inactive]}
       data-sort-indicator=""
     >
       {sorted === 'asc' ? '\u25B2' : sorted === 'desc' ? '\u25BC' : '\u21C5'}