Add React Aria v1 wrapper

Headless wrapper using react-aria-components with DateFieldProps for
date transforms, value/defaultValue for Select, and min/max on
RangeField. Includes transform functions for checkbox, date, time,
and number field prop mapping.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: jho406

wrappers/js/react-aria/v1/index.jsx

@@ -0,0 +1,108 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import { Checkbox, ValidationContext } from '.'
+
+const buildPayload = () => {
+  return {
+    type: 'checkbox',
+    value: '1',
+    uncheckedValue: '0',
+    defaultChecked: true,
+    name: 'post[admin]',
+    id: 'post_admin',
+  }
+}
+
+describe('Checkbox', () => {
+  it('renders', () => {
+    const payload = buildPayload()
+
+    const { getByRole } = render(<Checkbox label="Is admin" {...payload} />)
+
+    const checkbox = getByRole('checkbox', { name: 'Is admin' })
+    expect(checkbox).not.toBeNull()
+  })
+
+  it('renders defaultSelected', () => {
+    const payload = buildPayload()
+    payload.defaultChecked = true
+
+    const { getByRole } = render(
+      <Checkbox {...payload} label={'Is admin'} errorKey={'is_admin'} />
+    )
+
+    const checkbox = getByRole('checkbox', { name: 'Is admin' })
+    expect(checkbox.checked).toEqual(true)
+  })
+
+  it('renders defaultSelected false', () => {
+    const payload = buildPayload()
+    payload.defaultChecked = false
+
+    const { getByRole } = render(
+      <Checkbox {...payload} label={'Is admin'} errorKey={'is_admin'} />
+    )
+
+    const checkbox = getByRole('checkbox', { name: 'Is admin' })
+    expect(checkbox.checked).toEqual(false)
+  })
+
+  it('renders selected', () => {
+    const payload = buildPayload()
+    delete payload.defaultChecked
+    payload.checked = true
+
+    const { getByRole } = render(
+      <Checkbox {...payload} label={'Is admin'} errorKey={'is_admin'} />
+    )
+
+    const checkbox = getByRole('checkbox', { name: 'Is admin' })
+    expect(checkbox.checked).toEqual(true)
+  })
+
+  it('renders unselected', () => {
+    const payload = buildPayload()
+    delete payload.defaultChecked
+    payload.checked = false
+
+    const { getByRole } = render(
+      <Checkbox {...payload} label={'Is admin'} errorKey={'is_admin'} />
+    )
+
+    const checkbox = getByRole('checkbox', { name: 'Is admin' })
+    expect(checkbox.checked).toEqual(false)
+  })
+
+  it('adds a hidden input if includeHidden is true', () => {
+    const payload = buildPayload()
+    payload.includeHidden = true
+    payload.uncheckedValue = '10'
+
+    const { container } = render(
+      <Checkbox {...payload} label={'Is admin'} errorKey={'is_admin'} />
+    )
+
+    const hiddenInput = container.querySelector('input[type=hidden]')
+    expect(hiddenInput).not.toBe(null)
+    expect(hiddenInput.name).toEqual('post[admin]')
+    expect(hiddenInput.value).toEqual('10')
+  })
+
+  it('renders with errors', async () => {
+    const payload = buildPayload()
+
+    const validationErrors = {
+      is_admin: 'Admin invalid',
+    }
+
+    const { getByRole } = render(
+      <ValidationContext.Provider value={validationErrors}>
+        <Checkbox {...payload} label={'Is admin'} errorKey={'is_admin'} />
+      </ValidationContext.Provider>
+    )
+
+    const checkbox = getByRole('checkbox', { name: 'Is admin' })
+    expect(checkbox).not.toBe(null)
+    expect(checkbox.getAttribute('aria-invalid')).toEqual('true')
+  })
+})

wrappers/ts/react-aria/v1/Checkbox.test.jsx

@@ -0,0 +1,99 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import { CollectionCheckboxes, ValidationContext } from '.'
+
+const buildCheckboxPayload = (value, label) => {
+  return {
+    type: 'checkbox',
+    value,
+    defaultChecked: true,
+    label,
+    name: 'post[author_ids][]',
+    id: `post_author_ids_${value}`,
+  }
+}
+
+const buildPayload = () => {
+  return {
+    collection: [
+      buildCheckboxPayload(1, 'one'),
+      buildCheckboxPayload(2, 'two'),
+    ],
+    includeHidden: true,
+    label: 'authors',
+    required: false,
+  }
+}
+
+describe('CollectionCheckboxes', () => {
+  it('renders', () => {
+    const payload = buildPayload()
+
+    const { getByRole, getAllByRole } = render(
+      <CollectionCheckboxes
+        {...payload}
+        label={'Authors'}
+        errorKey={'authors'}
+      />
+    )
+
+    const group = getByRole('group', { name: 'Authors' })
+    expect(group).not.toBeNull()
+
+    const checkboxes = getAllByRole('checkbox')
+    expect(checkboxes.length).toEqual(2)
+  })
+
+  it('renders nothing when the collection is blank', () => {
+    const payload = buildPayload()
+    payload.collection = []
+
+    const { container } = render(
+      <CollectionCheckboxes
+        {...payload}
+        label={'Authors'}
+        errorKey={'authors'}
+      />
+    )
+
+    expect(container.innerHTML).toEqual('')
+  })
+
+  it('renders hidden', () => {
+    const payload = buildPayload()
+    payload.includeHidden = true
+
+    const { container } = render(
+      <CollectionCheckboxes
+        {...payload}
+        label={'Authors'}
+        errorKey={'authors'}
+      />
+    )
+
+    const hiddenInput = container.querySelector('input[type=hidden]')
+    expect(hiddenInput.name).toEqual('post[author_ids][]')
+    expect(hiddenInput.value).toEqual('')
+  })
+
+  it('renders with error highlighting', async () => {
+    const payload = buildPayload()
+
+    const validationErrors = {
+      author_ids: 'id invalid',
+    }
+
+    const { getByText } = render(
+      <ValidationContext.Provider value={validationErrors}>
+        <CollectionCheckboxes
+          {...payload}
+          label={'Authors'}
+          errorKey={'author_ids'}
+        />
+      </ValidationContext.Provider>
+    )
+
+    const errorField = getByText('id invalid')
+    expect(errorField).not.toBeNull()
+  })
+})

wrappers/ts/react-aria/v1/CollectionCheckboxes.test.jsx

@@ -0,0 +1,99 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import { CollectionRadioButtons, ValidationContext } from '.'
+
+const buildRadioButtonPayload = (value, label, rest) => {
+  return {
+    type: 'radio',
+    value,
+    label,
+    name: 'post[subscribe]',
+    id: `post_subscribe_${value}`,
+    ...rest,
+  }
+}
+
+const buildPayload = () => {
+  return {
+    collection: [
+      buildRadioButtonPayload(1, 'one', { defaultChecked: true }),
+      buildRadioButtonPayload(2, 'two'),
+    ],
+    includeHidden: true,
+    label: 'Subscribe',
+    required: false,
+  }
+}
+
+describe('CollectionRadioButtons', () => {
+  it('renders', () => {
+    const payload = buildPayload()
+
+    const { getByRole, getAllByRole } = render(
+      <CollectionRadioButtons
+        {...payload}
+        label={'Subscribe'}
+        errorKey={'subscribe'}
+      />
+    )
+
+    const radiogroup = getByRole('radiogroup', { name: 'Subscribe' })
+    expect(radiogroup).not.toBeNull()
+
+    const radios = getAllByRole('radio')
+    expect(radios.length).toEqual(2)
+  })
+
+  it('renders nothing when the collection is blank', () => {
+    const payload = buildPayload()
+    payload.collection = []
+
+    const { container } = render(
+      <CollectionRadioButtons
+        {...payload}
+        label={'Subscribe'}
+        errorKey={'subscribe'}
+      />
+    )
+
+    expect(container.innerHTML).toEqual('')
+  })
+
+  it('renders hidden', () => {
+    const payload = buildPayload()
+    payload.includeHidden = true
+
+    const { container } = render(
+      <CollectionRadioButtons
+        {...payload}
+        label={'Subscribe'}
+        errorKey={'subscribe'}
+      />
+    )
+
+    const hiddenInput = container.querySelector('input[type=hidden]')
+    expect(hiddenInput.name).toEqual('post[subscribe]')
+    expect(hiddenInput.value).toEqual('')
+  })
+
+  it('renders with error highlighting', async () => {
+    const payload = buildPayload()
+
+    const validationErrors = {
+      subscribe: 'id invalid',
+    }
+
+    const { getByText } = render(
+      <ValidationContext.Provider value={validationErrors}>
+        <CollectionRadioButtons
+          {...payload}
+          label={'Subscribe'}
+          errorKey={'subscribe'}
+        />
+      </ValidationContext.Provider>
+    )
+
+    const errorField = getByText('id invalid')
+    expect(errorField).not.toBeNull()
+  })
+})

wrappers/ts/react-aria/v1/CollectionRadioButtons.test.jsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import { ColorField, ValidationContext } from '.'
+
+const buildPayload = () => {
+  return {
+    type: 'color',
+    name: 'post[color]',
+    id: 'post_color',
+    required: false,
+    defaultValue: '#000000',
+  }
+}
+
+describe('ColorField', () => {
+  it('renders', () => {
+    const payload = buildPayload()
+
+    const { container } = render(
+      <ColorField {...payload} label={'color'} errorKey={'color'} />
+    )
+
+    const input = container.querySelector('input')
+    expect(input).not.toBeNull()
+    expect(input.value).toEqual('#000000')
+  })
+
+  it('renders with field errors', async () => {
+    const payload = buildPayload()
+
+    const validationErrors = {
+      color: 'color invalid',
+    }
+
+    const { getByText } = render(
+      <ValidationContext.Provider value={validationErrors}>
+        <ColorField {...payload} label={'color'} errorKey={'color'} />
+      </ValidationContext.Provider>
+    )
+
+    const errorField = getByText('color invalid')
+    expect(errorField).not.toBeNull()
+  })
+})