@strictly/react-form 0.0.1

package/mantine/specs/checkbox_hooks.tests.tsx

@@ -0,0 +1,100 @@
+import { composeStories } from '@storybook/react'
+import { toArray } from '@strictly/base'
+import {
+  fireEvent,
+  render,
+  type RenderResult,
+} from '@testing-library/react'
+import {
+  type Mock,
+  vi,
+} from 'vitest'
+import { CHECKBOX_LABEL } from './checkbox_constants'
+import * as stories from './checkbox_hooks.stories'
+
+const composedStories = composeStories(stories)
+const {
+  Off,
+  On,
+} = composedStories
+
+describe('mantine checkbox hooks', function () {
+  it.each(toArray(composedStories))('renders %s', function (_name, Story) {
+    const wrapper = render(<Story />)
+    expect(wrapper.container).toMatchSnapshot()
+  })
+
+  describe.each([
+    [
+      'Off',
+      Off,
+      true,
+    ],
+    [
+      'On',
+      On,
+      false,
+    ],
+  ] as const)('value change %s', function (_name, Component, expectedValue) {
+    let onFieldValueChange: Mock<(path: '$', value: boolean) => void>
+    let wrapper: RenderResult
+    let checkbox: HTMLElement
+
+    beforeEach(async function () {
+      onFieldValueChange = vi.fn()
+      wrapper = render(<Component onFieldValueChange={onFieldValueChange} />)
+      checkbox = await wrapper.findByLabelText(CHECKBOX_LABEL)
+    })
+
+    it('requests toggle', function () {
+      fireEvent.click(checkbox)
+      expect(onFieldValueChange).toHaveBeenCalledOnce()
+      expect(onFieldValueChange).toHaveBeenCalledWith('$', expectedValue)
+    })
+  })
+
+  describe('other events', function () {
+    let onFieldFocus: Mock<(path: '$') => void>
+    let onFieldBlur: Mock<(path: '$') => void>
+    let wrapper: RenderResult
+    let checkbox: HTMLElement
+
+    beforeEach(async function () {
+      onFieldFocus = vi.fn()
+      onFieldBlur = vi.fn()
+      wrapper = render((
+        <Off
+          onFieldBlur={onFieldBlur}
+          onFieldFocus={onFieldFocus}
+        />
+      ))
+      checkbox = await wrapper.findByLabelText(CHECKBOX_LABEL)
+    })
+
+    describe('focus', function () {
+      beforeEach(function () {
+        fireEvent.focus(checkbox)
+      })
+
+      it('fires focus event', function () {
+        expect(onFieldFocus).toHaveBeenCalledOnce()
+        expect(onFieldFocus).toHaveBeenCalledWith('$')
+      })
+
+      describe('blur', function () {
+        beforeEach(function () {
+          fireEvent.blur(checkbox)
+        })
+
+        it('fires blur event', function () {
+          expect(onFieldBlur).toHaveBeenCalledOnce()
+          expect(onFieldBlur).toHaveBeenCalledWith('$')
+        })
+
+        it('does not refire focus event', function () {
+          expect(onFieldFocus).toHaveBeenCalledOnce()
+        })
+      })
+    })
+  })
+})

package/mantine/specs/list_hooks.stories.tsx

@@ -0,0 +1,83 @@
+import {
+  Code,
+  Paper,
+  Stack,
+} from '@mantine/core'
+import { action } from '@storybook/addon-actions'
+import {
+  type Meta,
+  type StoryObj,
+} from '@storybook/react'
+import { type FormProps } from 'core/props'
+import { useMantineForm } from 'mantine/hooks'
+import { type Field } from 'types/field'
+
+type ListPath = `$.${number}`
+
+function Component(props: FormProps<{
+  $: Field<string[], string>,
+}>) {
+  const form = useMantineForm(props)
+  const List = form.list('$')
+  return (
+    <Paper
+      p='sm'
+      withBorder={true}
+    >
+      <Stack>
+        <List>
+          {function (valuePath: ListPath) {
+            return (
+              <Code key={valuePath}>
+                ValuePath: {valuePath}
+              </Code>
+            )
+          }}
+        </List>
+      </Stack>
+    </Paper>
+  )
+}
+
+const meta: Meta<typeof Component> = {
+  component: Component,
+  args: {
+    onFieldBlur: action('onFieldBlur'),
+    onFieldFocus: action('onFieldFocus'),
+    onFieldSubmit: action('onFieldSubmit'),
+    onFieldValueChange: action('onFieldValueChange'),
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof Component>
+
+export const Empty: Story = {
+  args: {
+    fields: {
+      $: {
+        disabled: false,
+        required: false,
+        value: [],
+      },
+    },
+  },
+}
+
+export const Populated: Story = {
+  args: {
+    fields: {
+      $: {
+        disabled: false,
+        required: false,
+        value: [
+          '$.4',
+          '$.6',
+          '$.19',
+          '$.0',
+        ],
+      },
+    },
+  },
+}

package/mantine/specs/list_hooks.tests.tsx

@@ -0,0 +1,15 @@
+import { composeStories } from '@storybook/react'
+import { toArray } from '@strictly/base'
+import {
+  render,
+} from '@testing-library/react'
+import * as stories from './list_hooks.stories'
+
+const composedStories = composeStories(stories)
+
+describe('mantine list hooks', function () {
+  it.each(toArray(composedStories))('renders %s', function (_name, Story) {
+    const wrapper = render(<Story />)
+    expect(wrapper.container).toMatchSnapshot()
+  })
+})

package/mantine/specs/radio_group_constants.ts

@@ -0,0 +1,12 @@
+export const RADIO_GROUP_LABEL = 'Radio Group'
+export const RADIO_VALUES = [
+  '1',
+  '2',
+  '3',
+] as const
+export type RadioValue = typeof RADIO_VALUES[number]
+export const RADIO_LABELS: Record<RadioValue, string> = {
+  1: 'One',
+  2: 'Two',
+  3: 'Three',
+}

package/mantine/specs/radio_group_hooks.stories.tsx

@@ -0,0 +1,103 @@
+import {
+  Stack,
+} from '@mantine/core'
+import { action } from '@storybook/addon-actions'
+import {
+  type Meta,
+  type StoryObj,
+} from '@storybook/react'
+import { type FormProps } from 'core/props'
+import { useMantineForm } from 'mantine/hooks'
+import { type Field } from 'types/field'
+import {
+  RADIO_GROUP_LABEL,
+  RADIO_LABELS,
+  RADIO_VALUES,
+  type RadioValue,
+} from './radio_group_constants'
+
+function Component(props: FormProps<{
+  $: Field<RadioValue | null, string>,
+}>) {
+  const form = useMantineForm(props)
+  const RadioGroupComponent = form.radioGroup('$')
+
+  return (
+    <RadioGroupComponent label={RADIO_GROUP_LABEL}>
+      <Stack>
+        {RADIO_VALUES.map(function (value: RadioValue) {
+          const label = RADIO_LABELS[value]
+          const RadioComponent = form.radio('$', value)
+          return (
+            <RadioComponent
+              key={label}
+              label={label}
+            />
+          )
+        })}
+      </Stack>
+    </RadioGroupComponent>
+  )
+}
+
+const meta: Meta<typeof Component> = {
+  component: Component,
+  args: {
+    onFieldBlur: action('onFieldBlur'),
+    onFieldFocus: action('onFieldFocus'),
+    onFieldSubmit: action('onFieldSubmit'),
+    onFieldValueChange: action('onFieldValueChange'),
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof Component>
+
+export const Empty: Story = {
+  args: {
+    fields: {
+      $: {
+        disabled: false,
+        required: false,
+        value: null,
+      },
+    },
+  },
+}
+
+export const Populated: Story = {
+  args: {
+    fields: {
+      $: {
+        disabled: false,
+        required: false,
+        value: '3',
+      },
+    },
+  },
+}
+
+export const Required: Story = {
+  args: {
+    fields: {
+      $: {
+        disabled: false,
+        required: true,
+        value: '1',
+      },
+    },
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    fields: {
+      $: {
+        disabled: true,
+        required: false,
+        value: '2',
+      },
+    },
+  },
+}

package/mantine/specs/radio_group_hooks.tests.tsx

@@ -0,0 +1,92 @@
+import { composeStories } from '@storybook/react'
+import { toArray } from '@strictly/base'
+import {
+  fireEvent,
+  render,
+  type RenderResult,
+} from '@testing-library/react'
+import {
+  type Mock,
+  vi,
+} from 'vitest'
+import {
+  RADIO_GROUP_LABEL,
+  RADIO_LABELS,
+  RADIO_VALUES,
+  type RadioValue,
+} from './radio_group_constants'
+import * as stories from './radio_group_hooks.stories'
+
+const composedStories = composeStories(stories)
+const {
+  Empty,
+} = composedStories
+
+describe('mantine radio group hooks', function () {
+  it.each(toArray(composedStories))('renders %s', function (_name, Story) {
+    const wrapper = render(<Story />)
+    expect(wrapper.container).toMatchSnapshot()
+  })
+
+  describe('events', function () {
+    let onFieldValueChange: Mock<(path: '$', value: RadioValue) => void>
+    let onFieldFocus: Mock<(path: '$') => void>
+    let onFieldBlur: Mock<(path: '$') => void>
+    let wrapper: RenderResult
+    let radioGroup: HTMLElement
+
+    beforeEach(async function () {
+      onFieldValueChange = vi.fn()
+      onFieldFocus = vi.fn()
+      onFieldBlur = vi.fn()
+      wrapper = render((
+        <Empty
+          onFieldBlur={onFieldBlur}
+          onFieldFocus={onFieldFocus}
+          onFieldValueChange={onFieldValueChange}
+        />
+      ))
+      radioGroup = await wrapper.findByLabelText(RADIO_GROUP_LABEL)
+    })
+
+    describe.each(RADIO_VALUES)('selects %s', function (value) {
+      let radio: HTMLElement
+      beforeEach(async function () {
+        const label = RADIO_LABELS[value]
+        radio = await wrapper.findByLabelText(label)
+        fireEvent.click(radio)
+      })
+
+      it('fires onFieldValueChange', function () {
+        expect(onFieldValueChange).toHaveBeenCalledOnce()
+        expect(onFieldValueChange).toHaveBeenCalledWith('$', value)
+      })
+    })
+
+    describe('focus', function () {
+      beforeEach(function () {
+        fireEvent.focus(radioGroup)
+      })
+
+      it('fires focus event', function () {
+        expect(onFieldFocus).toHaveBeenCalledOnce()
+        expect(onFieldFocus).toHaveBeenCalledWith('$')
+      })
+
+      describe('blur', function () {
+        beforeEach(function () {
+          fireEvent.blur(radioGroup)
+        })
+
+        it('fires blur event', function () {
+          expect(onFieldBlur).toHaveBeenCalledOnce()
+          expect(onFieldBlur).toHaveBeenCalledWith('$')
+        })
+
+        it('does not refire focus event', function () {
+          expect(onFieldFocus).toHaveBeenCalledOnce()
+        })
+      })
+    })
+  })
+})

package/mantine/specs/select_hooks.stories.tsx

@@ -0,0 +1,77 @@
+import { action } from '@storybook/addon-actions'
+import {
+  type Meta,
+  type StoryObj,
+} from '@storybook/react'
+import { type FormProps } from 'core/props'
+import { useMantineForm } from 'mantine/hooks'
+import { type Field } from 'types/field'
+import { SELECT_LABEL } from './select_hooks_constant'
+
+function Component(props: FormProps<{
+  $: Field<string | null, string>,
+}>) {
+  const form = useMantineForm(props)
+  const SelectComponent = form.select('$')
+  return (
+    <SelectComponent
+      data={[
+        'a',
+        'b',
+        'c',
+      ]}
+      label={SELECT_LABEL}
+    />
+  )
+}
+
+const meta: Meta<typeof Component> = {
+  component: Component,
+  args: {
+    onFieldBlur: action('onFieldBlur'),
+    onFieldFocus: action('onFieldFocus'),
+    onFieldSubmit: action('onFieldSubmit'),
+    onFieldValueChange: action('onFieldValueChange'),
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof Component>
+
+export const EmptySelect: Story = {
+  args: {
+    fields: {
+      $: {
+        disabled: false,
+        required: true,
+        value: '',
+      },
+    },
+  },
+}
+
+export const PopulatedSelect: Story = {
+  args: {
+    fields: {
+      $: {
+        disabled: false,
+        required: true,
+        value: 'a',
+      },
+    },
+  },
+}
+
+export const InvalidSelect: Story = {
+  args: {
+    fields: {
+      $: {
+        disabled: false,
+        required: true,
+        value: 'd',
+        error: 'invalid option',
+      },
+    },
+  },
+}

package/mantine/specs/select_hooks.tests.tsx

@@ -0,0 +1,14 @@
+import { composeStories } from '@storybook/react'
+import { toArray } from '@strictly/base'
+import {
+  render,
+} from '@testing-library/react'
+import * as stories from './select_hooks.stories'
+
+const composedStories = composeStories(stories)
+describe('mantine select hooks', function () {
+  it.each(toArray(composedStories))('renders %s', function (_name, Story) {
+    const wrapper = render(<Story />)
+    expect(wrapper.container).toMatchSnapshot()
+  })
+})

package/mantine/specs/select_hooks_constant.ts

@@ -0,0 +1 @@
+export const SELECT_LABEL = 'Select'

package/mantine/specs/text_input_constants.ts

@@ -0,0 +1 @@
+export const TEXT_INPUT_LABEL = 'Text Input'

package/mantine/specs/text_input_hooks.stories.tsx

@@ -0,0 +1,124 @@
+import {
+  PillsInputField,
+  Textarea,
+  type TextInputProps,
+} from '@mantine/core'
+import { action } from '@storybook/addon-actions'
+import {
+  type Meta,
+  type StoryObj,
+} from '@storybook/react'
+import { type FormProps } from 'core/props'
+import {
+  type SuppliedTextInputProps,
+  type TextInputTarget,
+} from 'mantine/create_text_input'
+import { useMantineForm } from 'mantine/hooks'
+import { type ComponentType } from 'react'
+import { type Field } from 'types/field'
+import { TEXT_INPUT_LABEL } from './text_input_constants'
+
+type StoryTextInputProps<T extends TextInputTarget> = SuppliedTextInputProps<T> & Pick<TextInputProps, 'label'>
+
+function Component<T extends TextInputTarget>({
+  TextInput,
+  ...props
+}: FormProps<{
+  $: Field<string, string>,
+}> & {
+  TextInput?: ComponentType<StoryTextInputProps<T>>,
+}) {
+  const form = useMantineForm(props)
+  const TextInputComponent = form.textInput<'$', StoryTextInputProps<T>>('$', TextInput)
+  return <TextInputComponent label={TEXT_INPUT_LABEL} />
+}
+
+const meta: Meta<typeof Component> = {
+  component: Component,
+  args: {
+    onFieldBlur: action('onFieldBlur'),
+    onFieldFocus: action('onFieldFocus'),
+    onFieldSubmit: action('onFieldSubmit'),
+    onFieldValueChange: action('onFieldValueChange'),
+  },
+}
+
+export default meta
+
+type Story<
+  T extends TextInputTarget = HTMLInputElement,
+> = StoryObj<typeof Component<T>>
+
+export const Empty: Story = {
+  args: {
+    fields: {
+      $: {
+        disabled: false,
+        required: false,
+        value: '',
+      },
+    },
+  },
+}
+
+export const Populated: Story = {
+  args: {
+    fields: {
+      $: {
+        disabled: false,
+        required: false,
+        value: 'Hello',
+      },
+    },
+  },
+}
+
+export const Required: Story = {
+  args: {
+    fields: {
+      $: {
+        disabled: false,
+        required: true,
+        value: 'xxx',
+      },
+    },
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    fields: {
+      $: {
+        disabled: true,
+        required: false,
+        value: 'xxx',
+      },
+    },
+  },
+}
+
+export const OverriddenTextarea: Story<HTMLTextAreaElement> = {
+  args: {
+    fields: {
+      $: {
+        disabled: false,
+        required: false,
+        value: 'Textarea',
+      },
+    },
+    TextInput: Textarea,
+  },
+}
+
+export const OverriddenPillsInputField: Story = {
+  args: {
+    fields: {
+      $: {
+        disabled: false,
+        required: false,
+        value: 'PillsInputField',
+      },
+    },
+    TextInput: PillsInputField,
+  },
+}