@strictly/react-form 0.0.5 → 0.0.7

package/mantine/specs/__snapshots__/form_hooks.tests.tsx.snap

@@ -0,0 +1,273 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`form hooks > renders Empty 1`] = `
+<div>
+  <style
+    data-mantine-styles="classes"
+  >
+    @media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}
+  </style>
+  <div
+    class="m_6d731127 mantine-Stack-root"
+    style="--stack-gap: var(--mantine-spacing-md); --stack-align: stretch; --stack-justify: flex-start;"
+  >
+    <div
+      class="m_46b77525 mantine-InputWrapper-root mantine-TextInput-root"
+    >
+      <label
+        class="m_8fdc1311 mantine-InputWrapper-label mantine-TextInput-label"
+        for="mantine-0px4bipx4"
+        id="mantine-0px4bipx4-label"
+      >
+        fields view
+      </label>
+      <div
+        class="m_6c018570 mantine-Input-wrapper mantine-TextInput-wrapper"
+        data-variant="default"
+      >
+        <input
+          aria-invalid="false"
+          class="m_8fb7ebe7 mantine-Input-input mantine-TextInput-input"
+          data-variant="default"
+          id="mantine-0px4bipx4"
+          name="$"
+          value=""
+        />
+      </div>
+    </div>
+    <div
+      class="m_6d731127 mantine-Stack-root"
+      style="--stack-gap: var(--mantine-spacing-md); --stack-align: stretch; --stack-justify: flex-start;"
+    >
+      <div
+        class="m_e2f5cd4e m_46b77525 mantine-InputWrapper-root mantine-NumberInput-root"
+      >
+        <label
+          class="m_8fdc1311 mantine-InputWrapper-label mantine-NumberInput-label"
+          for="mantine-12voha2vo"
+          id="mantine-12voha2vo-label"
+        >
+          sub form
+        </label>
+        <div
+          class="m_6c018570 mantine-Input-wrapper mantine-NumberInput-wrapper"
+          data-variant="default"
+          data-with-right-section="true"
+          style="--input-right-section-width: var(--ni-right-section-width-sm);"
+        >
+          <input
+            aria-invalid="false"
+            class="m_8fb7ebe7 mantine-Input-input mantine-NumberInput-input"
+            data-variant="default"
+            id="mantine-12voha2vo"
+            inputmode="numeric"
+            type="text"
+            value="0"
+          />
+          <div
+            class="m_82577fc2 mantine-Input-section mantine-NumberInput-section"
+            data-position="right"
+          >
+            <div
+              class="m_95e17d22 mantine-NumberInput-controls"
+            >
+              <button
+                aria-hidden="true"
+                class="mantine-focus-auto m_80b4b171 mantine-NumberInput-control m_87cf2631 mantine-UnstyledButton-root"
+                data-direction="up"
+                tabindex="-1"
+                type="button"
+              >
+                <svg
+                  fill="none"
+                  style="transform: rotate(180deg);"
+                  viewBox="0 0 15 15"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    clip-rule="evenodd"
+                    d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z"
+                    fill="currentColor"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </button>
+              <button
+                aria-hidden="true"
+                class="mantine-focus-auto m_80b4b171 mantine-NumberInput-control m_87cf2631 mantine-UnstyledButton-root"
+                data-direction="down"
+                tabindex="-1"
+                type="button"
+              >
+                <svg
+                  fill="none"
+                  viewBox="0 0 15 15"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    clip-rule="evenodd"
+                    d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z"
+                    fill="currentColor"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <button
+        class="mantine-focus-auto mantine-active m_77c9d27d mantine-Button-root m_87cf2631 mantine-UnstyledButton-root"
+        style="--button-color: var(--mantine-color-white);"
+        type="button"
+      >
+        <span
+          class="m_80f1301b mantine-Button-inner"
+        >
+          <span
+            class="m_811560b9 mantine-Button-label"
+          >
+            Cancel
+          </span>
+        </span>
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`form hooks > renders Populated 1`] = `
+<div>
+  <style
+    data-mantine-styles="classes"
+  >
+    @media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}
+  </style>
+  <div
+    class="m_6d731127 mantine-Stack-root"
+    style="--stack-gap: var(--mantine-spacing-md); --stack-align: stretch; --stack-justify: flex-start;"
+  >
+    <div
+      class="m_46b77525 mantine-InputWrapper-root mantine-TextInput-root"
+    >
+      <label
+        class="m_8fdc1311 mantine-InputWrapper-label mantine-TextInput-label"
+        for="mantine-0cyk5rcyk"
+        id="mantine-0cyk5rcyk-label"
+      >
+        fields view
+      </label>
+      <div
+        class="m_6c018570 mantine-Input-wrapper mantine-TextInput-wrapper"
+        data-variant="default"
+      >
+        <input
+          aria-invalid="false"
+          class="m_8fb7ebe7 mantine-Input-input mantine-TextInput-input"
+          data-variant="default"
+          id="mantine-0cyk5rcyk"
+          name="$"
+          value="Hello"
+        />
+      </div>
+    </div>
+    <div
+      class="m_6d731127 mantine-Stack-root"
+      style="--stack-gap: var(--mantine-spacing-md); --stack-align: stretch; --stack-justify: flex-start;"
+    >
+      <div
+        class="m_e2f5cd4e m_46b77525 mantine-InputWrapper-root mantine-NumberInput-root"
+      >
+        <label
+          class="m_8fdc1311 mantine-InputWrapper-label mantine-NumberInput-label"
+          for="mantine-0px4bipx4"
+          id="mantine-0px4bipx4-label"
+        >
+          sub form
+        </label>
+        <div
+          class="m_6c018570 mantine-Input-wrapper mantine-NumberInput-wrapper"
+          data-variant="default"
+          data-with-right-section="true"
+          style="--input-right-section-width: var(--ni-right-section-width-sm);"
+        >
+          <input
+            aria-invalid="false"
+            class="m_8fb7ebe7 mantine-Input-input mantine-NumberInput-input"
+            data-variant="default"
+            id="mantine-0px4bipx4"
+            inputmode="numeric"
+            type="text"
+            value="2"
+          />
+          <div
+            class="m_82577fc2 mantine-Input-section mantine-NumberInput-section"
+            data-position="right"
+          >
+            <div
+              class="m_95e17d22 mantine-NumberInput-controls"
+            >
+              <button
+                aria-hidden="true"
+                class="mantine-focus-auto m_80b4b171 mantine-NumberInput-control m_87cf2631 mantine-UnstyledButton-root"
+                data-direction="up"
+                tabindex="-1"
+                type="button"
+              >
+                <svg
+                  fill="none"
+                  style="transform: rotate(180deg);"
+                  viewBox="0 0 15 15"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    clip-rule="evenodd"
+                    d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z"
+                    fill="currentColor"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </button>
+              <button
+                aria-hidden="true"
+                class="mantine-focus-auto m_80b4b171 mantine-NumberInput-control m_87cf2631 mantine-UnstyledButton-root"
+                data-direction="down"
+                tabindex="-1"
+                type="button"
+              >
+                <svg
+                  fill="none"
+                  viewBox="0 0 15 15"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    clip-rule="evenodd"
+                    d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z"
+                    fill="currentColor"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <button
+        class="mantine-focus-auto mantine-active m_77c9d27d mantine-Button-root m_87cf2631 mantine-UnstyledButton-root"
+        style="--button-color: var(--mantine-color-white);"
+        type="button"
+      >
+        <span
+          class="m_80f1301b mantine-Button-inner"
+        >
+          <span
+            class="m_811560b9 mantine-Button-label"
+          >
+            Cancel
+          </span>
+        </span>
+      </button>
+    </div>
+  </div>
+</div>
+`;

package/mantine/specs/checkbox_hooks.stories.tsx

@@ -3,21 +3,21 @@ import {
   type Meta,
   type StoryObj,
 } from '@storybook/react'
-import { type FormProps } from 'core/props'
+import { type FieldsViewProps } from 'core/props'
 import { type ErrorRenderer } from 'mantine/error_renderer'
-import { useMantineForm } from 'mantine/hooks'
+import { useMantineFormFields } from 'mantine/hooks'
 import { type Field } from 'types/field'
 import { CHECKBOX_LABEL } from './checkbox_constants'
 
 function Component({
   ErrorRenderer,
   ...props
-}: FormProps<{
+}: FieldsViewProps<{
   $: Field<boolean, string>,
 }> & {
   ErrorRenderer?: ErrorRenderer,
 }) {
-  const inputProps = useMantineForm(props)
+  const inputProps = useMantineFormFields(props)
   const CheckboxComponent = inputProps.checkbox('$')
   return (
     <CheckboxComponent

package/mantine/specs/{sub_form_hooks.stories.tsx → fields_view_hooks.stories.tsx}

@@ -1,4 +1,5 @@
 import {
+  Button,
   Stack,
 } from '@mantine/core'
 import { action } from '@storybook/addon-actions'
@@ -6,29 +7,40 @@ import {
   type Meta,
   type StoryObj,
 } from '@storybook/react'
-import { type FormProps } from 'core/props'
-import { useMantineForm } from 'mantine/hooks'
+import { type FieldsViewProps } from 'core/props'
+import { useMantineFormFields } from 'mantine/hooks'
 import { type Field } from 'types/field'
 
-function SubFormImpl(props: FormProps<{
+const onClick = action('some button clicked')
+
+function SubFieldsView(props: FieldsViewProps<{
   $: Field<string, string>,
-}>) {
-  const form = useMantineForm(props)
+}> & {
+  onClick: () => void,
+}) {
+  const form = useMantineFormFields(props)
   const TextInput = form.textInput('$')
-  return <TextInput label='sub form' />
+  return (
+    <Stack>
+      <TextInput label='sub fields view' />
+      <Button onClick={props.onClick}>
+        Bonus Button
+      </Button>
+    </Stack>
+  )
 }
 
-function Component(props: FormProps<{
+function Component(props: FieldsViewProps<{
   $: Field<string, string>,
   '$.a': Field<string, string>,
 }>) {
-  const form = useMantineForm(props)
-  const SubForm = form.subForm('$.a', SubFormImpl)
+  const form = useMantineFormFields(props)
+  const FieldsView = form.fieldsView('$.a', SubFieldsView)
   const TextInput = form.textInput('$')
   return (
     <Stack>
-      <TextInput label='form' />
-      <SubForm />
+      <TextInput label='fields view' />
+      <FieldsView onClick={onClick} />
     </Stack>
   )
 }

package/mantine/specs/fields_view_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 './fields_view_hooks.stories'
+
+const composedStories = composeStories(stories)
+
+describe('field view hooks', function () {
+  it.each(toArray(composedStories))('renders %s', function (_name, Story) {
+    const wrapper = render(<Story />)
+    expect(wrapper.container).toMatchSnapshot()
+  })
+})

package/mantine/specs/form_hooks.stories.tsx

@@ -0,0 +1,107 @@
+import {
+  Button,
+  NumberInput,
+  Stack,
+} from '@mantine/core'
+import { action } from '@storybook/addon-actions'
+import {
+  type Meta,
+  type StoryObj,
+} from '@storybook/react'
+import {
+  type FieldsViewProps,
+  type FormProps,
+} from 'core/props'
+import { useMantineFormFields } from 'mantine/hooks'
+import { useCallback } from 'react'
+import { type Field } from 'types/field'
+
+const onCancel = action('canceled')
+
+function SubForm({
+  value,
+  onValueChange,
+  onCancel,
+}: FormProps<number> & {
+  onCancel: () => void,
+}) {
+  const onChange = useCallback((v: number | string) => {
+    onValueChange(Number.parseInt(`${v}`))
+  }, [onValueChange])
+  return (
+    <Stack>
+      <NumberInput
+        allowDecimal={false}
+        label='sub form'
+        onChange={onChange}
+        value={value}
+      />
+      <Button onClick={onCancel}>
+        Cancel
+      </Button>
+    </Stack>
+  )
+}
+
+function Component(props: FieldsViewProps<{
+  $: Field<string>,
+  '$.a': Field<number>,
+}>) {
+  const form = useMantineFormFields(props)
+  const Form = form.form('$.a', SubForm)
+  const TextInput = form.textInput('$')
+  return (
+    <Stack>
+      <TextInput label='fields view' />
+      <Form onCancel={onCancel} />
+    </Stack>
+  )
+}
+
+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: {
+      $: {
+        readonly: false,
+        required: false,
+        value: '',
+      },
+      '$.a': {
+        readonly: false,
+        required: false,
+        value: 0,
+      },
+    },
+  },
+}
+
+export const Populated: Story = {
+  args: {
+    fields: {
+      $: {
+        readonly: false,
+        required: false,
+        value: 'Hello',
+      },
+      '$.a': {
+        readonly: false,
+        required: false,
+        value: 2,
+      },
+    },
+  },
+}

package/mantine/specs/form_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 './form_hooks.stories'
+
+const composedStories = composeStories(stories)
+
+describe('form hooks', function () {
+  it.each(toArray(composedStories))('renders %s', function (_name, Story) {
+    const wrapper = render(<Story />)
+    expect(wrapper.container).toMatchSnapshot()
+  })
+})

package/mantine/specs/list_hooks.stories.tsx

@@ -8,16 +8,16 @@ import {
   type Meta,
   type StoryObj,
 } from '@storybook/react'
-import { type FormProps } from 'core/props'
-import { useMantineForm } from 'mantine/hooks'
+import { type FieldsViewProps } from 'core/props'
+import { useMantineFormFields } from 'mantine/hooks'
 import { type Field } from 'types/field'
 
 type ListPath = `$.${number}`
 
-function Component(props: FormProps<{
+function Component(props: FieldsViewProps<{
   $: Field<string[], string>,
 }>) {
-  const form = useMantineForm(props)
+  const form = useMantineFormFields(props)
   const List = form.list('$')
   return (
     <Paper

package/mantine/specs/radio_group_hooks.stories.tsx

@@ -6,11 +6,11 @@ import {
   type Meta,
   type StoryObj,
 } from '@storybook/react'
-import { type FormProps } from 'core/props'
+import { type FieldsViewProps } from 'core/props'
 import {
   type ErrorRenderer,
 } from 'mantine/error_renderer'
-import { useMantineForm } from 'mantine/hooks'
+import { useMantineFormFields } from 'mantine/hooks'
 import { type Field } from 'types/field'
 import {
   RADIO_GROUP_LABEL,
@@ -22,12 +22,12 @@ import {
 function Component({
   ErrorRenderer,
   ...props
-}: FormProps<{
+}: FieldsViewProps<{
   $: Field<RadioValue | null, string>,
 }> & {
   ErrorRenderer?: ErrorRenderer,
 }) {
-  const form = useMantineForm(props)
+  const form = useMantineFormFields(props)
   const RadioGroupComponent = form.radioGroup('$')
 
   return (

package/mantine/specs/select_hooks.stories.tsx

@@ -3,21 +3,21 @@ import {
   type Meta,
   type StoryObj,
 } from '@storybook/react'
-import { type FormProps } from 'core/props'
+import { type FieldsViewProps } from 'core/props'
 import { type ErrorRenderer } from 'mantine/error_renderer'
-import { useMantineForm } from 'mantine/hooks'
+import { useMantineFormFields } from 'mantine/hooks'
 import { type Field } from 'types/field'
 import { SELECT_LABEL } from './select_hooks_constant'
 
 function Component({
   ErrorRenderer,
   ...props
-}: FormProps<{
+}: FieldsViewProps<{
   $: Field<string | null, string>,
 }> & {
   ErrorRenderer?: ErrorRenderer,
 }) {
-  const form = useMantineForm(props)
+  const form = useMantineFormFields(props)
   const SelectComponent = form.select('$')
   return (
     <SelectComponent

package/mantine/specs/text_input_hooks.stories.tsx

@@ -8,13 +8,13 @@ import {
   type Meta,
   type StoryObj,
 } from '@storybook/react'
-import { type FormProps } from 'core/props'
+import { type FieldsViewProps } from 'core/props'
 import {
   type SuppliedTextInputProps,
   type TextInputTarget,
 } from 'mantine/create_text_input'
 import { type ErrorRenderer } from 'mantine/error_renderer'
-import { useMantineForm } from 'mantine/hooks'
+import { useMantineFormFields } from 'mantine/hooks'
 import { type ComponentType } from 'react'
 import { type Field } from 'types/field'
 import { TEXT_INPUT_LABEL } from './text_input_constants'
@@ -25,14 +25,14 @@ function Component<T extends TextInputTarget>({
   TextInput,
   ErrorRenderer,
   ...props
-}: FormProps<{
+}: FieldsViewProps<{
   $: Field<string, string>,
 }> & {
   TextInput?: ComponentType<StoryTextInputProps<T>>,
 } & {
   ErrorRenderer?: ErrorRenderer,
 }) {
-  const form = useMantineForm(props)
+  const form = useMantineFormFields(props)
   const TextInputComponent = form.textInput<'$', StoryTextInputProps<T>>('$', TextInput)
   return (
     <TextInputComponent

package/mantine/specs/value_input_hooks.stories.tsx

@@ -13,10 +13,10 @@ import {
   type Meta,
   type StoryObj,
 } from '@storybook/react'
-import { type FormProps } from 'core/props'
+import { type FieldsViewProps } from 'core/props'
 import { type SuppliedValueInputProps } from 'mantine/create_value_input'
 import { type ErrorRenderer } from 'mantine/error_renderer'
-import { useMantineForm } from 'mantine/hooks'
+import { useMantineFormFields } from 'mantine/hooks'
 import {
   type ComponentType,
 } from 'react'
@@ -37,7 +37,7 @@ function Component<
   ErrorRenderer,
   inputProps,
   ...props
-}: FormProps<{
+}: FieldsViewProps<{
   $: Field<V, string>,
 }> & {
   ValueInput: ComponentType<P>,
@@ -46,7 +46,7 @@ function Component<
 } & {
   ErrorRenderer?: ErrorRenderer,
 }) {
-  const form = useMantineForm(props)
+  const form = useMantineFormFields(props)
   const ValueInputComponent = form.valueInput<'$', P>('$', ValueInput)
   return (
     <ValueInputComponent

package/package.json

@@ -69,7 +69,7 @@
     "test:watch": "vitest"
   },
   "type": "module",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "exports": {
     ".": {
       "import": {

package/.out/mantine/create_sub_form.d.ts

@@ -1,6 +0,0 @@
-import type { FormProps } from 'core/props';
-import type { ComponentType } from 'react';
-import type { AllFieldsOfFields } from 'types/all_fields_of_fields';
-import type { Fields } from 'types/field';
-import type { SubFormFields } from 'types/sub_form_fields';
-export declare function createSubForm<F extends Fields, K extends keyof AllFieldsOfFields<F>, S extends Fields = SubFormFields<F, K>>(valuePath: K, SubForm: ComponentType<FormProps<S>>, observableProps: FormProps<F>): () => import("react/jsx-runtime").JSX.Element;