@strictly/react-form 0.0.8 → 0.0.10

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

@@ -19,7 +19,7 @@ exports[`field view hooks > renders Disabled 1`] = `
         for="mantine-0cyk5rcyk"
         id="mantine-0cyk5rcyk-label"
       >
-        fields view
+        $
       </label>
       <div
         class="m_6c018570 mantine-Input-wrapper mantine-TextInput-wrapper"
@@ -39,51 +39,46 @@ exports[`field view hooks > renders Disabled 1`] = `
       </div>
     </div>
     <div
-      class="m_6d731127 mantine-Stack-root"
-      style="--stack-gap: var(--mantine-spacing-md); --stack-align: stretch; --stack-justify: flex-start;"
+      class="m_1b7284a3 mantine-Paper-root"
+      data-with-border="true"
     >
+      <p
+        class="mantine-focus-auto m_b6d8b162 mantine-Text-root"
+      >
+        $.a
+      </p>
       <div
-        class="m_46b77525 mantine-InputWrapper-root mantine-TextInput-root"
+        class="m_6d731127 mantine-Stack-root"
+        style="--stack-gap: var(--mantine-spacing-md); --stack-align: stretch; --stack-justify: flex-start;"
       >
-        <label
-          class="m_8fdc1311 mantine-InputWrapper-label mantine-TextInput-label"
-          for="mantine-0px4bipx4"
-          id="mantine-0px4bipx4-label"
-        >
-          sub fields view
-        </label>
         <div
-          class="m_6c018570 mantine-Input-wrapper mantine-TextInput-wrapper"
-          data-disabled="true"
-          data-variant="default"
+          class="m_46b77525 mantine-InputWrapper-root mantine-TextInput-root"
         >
-          <input
-            aria-invalid="false"
-            class="m_8fb7ebe7 mantine-Input-input mantine-TextInput-input"
+          <label
+            class="m_8fdc1311 mantine-InputWrapper-label mantine-TextInput-label"
+            for="mantine-0px4bipx4"
+            id="mantine-0px4bipx4-label"
+          >
+            $ (child)
+          </label>
+          <div
+            class="m_6c018570 mantine-Input-wrapper mantine-TextInput-wrapper"
             data-disabled="true"
             data-variant="default"
-            disabled=""
-            id="mantine-0px4bipx4"
-            name="$"
-            value="yyy"
-          />
+          >
+            <input
+              aria-invalid="false"
+              class="m_8fb7ebe7 mantine-Input-input mantine-TextInput-input"
+              data-disabled="true"
+              data-variant="default"
+              disabled=""
+              id="mantine-0px4bipx4"
+              name="$"
+              value="yyy"
+            />
+          </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"
-          >
-            Bonus Button
-          </span>
-        </span>
-      </button>
     </div>
   </div>
 </div>
@@ -105,10 +100,10 @@ exports[`field view hooks > renders Empty 1`] = `
     >
       <label
         class="m_8fdc1311 mantine-InputWrapper-label mantine-TextInput-label"
-        for="mantine-0px4bipx4"
-        id="mantine-0px4bipx4-label"
+        for="mantine-0cyk5rcyk"
+        id="mantine-0cyk5rcyk-label"
       >
-        fields view
+        $
       </label>
       <div
         class="m_6c018570 mantine-Input-wrapper mantine-TextInput-wrapper"
@@ -118,55 +113,50 @@ exports[`field view hooks > renders Empty 1`] = `
           aria-invalid="false"
           class="m_8fb7ebe7 mantine-Input-input mantine-TextInput-input"
           data-variant="default"
-          id="mantine-0px4bipx4"
+          id="mantine-0cyk5rcyk"
           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;"
+      class="m_1b7284a3 mantine-Paper-root"
+      data-with-border="true"
     >
+      <p
+        class="mantine-focus-auto m_b6d8b162 mantine-Text-root"
+      >
+        $.a
+      </p>
       <div
-        class="m_46b77525 mantine-InputWrapper-root mantine-TextInput-root"
+        class="m_6d731127 mantine-Stack-root"
+        style="--stack-gap: var(--mantine-spacing-md); --stack-align: stretch; --stack-justify: flex-start;"
       >
-        <label
-          class="m_8fdc1311 mantine-InputWrapper-label mantine-TextInput-label"
-          for="mantine-12voha2vo"
-          id="mantine-12voha2vo-label"
-        >
-          sub fields view
-        </label>
         <div
-          class="m_6c018570 mantine-Input-wrapper mantine-TextInput-wrapper"
-          data-variant="default"
+          class="m_46b77525 mantine-InputWrapper-root mantine-TextInput-root"
         >
-          <input
-            aria-invalid="false"
-            class="m_8fb7ebe7 mantine-Input-input mantine-TextInput-input"
+          <label
+            class="m_8fdc1311 mantine-InputWrapper-label mantine-TextInput-label"
+            for="mantine-0px4bipx4"
+            id="mantine-0px4bipx4-label"
+          >
+            $ (child)
+          </label>
+          <div
+            class="m_6c018570 mantine-Input-wrapper mantine-TextInput-wrapper"
             data-variant="default"
-            id="mantine-12voha2vo"
-            name="$"
-            value=""
-          />
+          >
+            <input
+              aria-invalid="false"
+              class="m_8fb7ebe7 mantine-Input-input mantine-TextInput-input"
+              data-variant="default"
+              id="mantine-0px4bipx4"
+              name="$"
+              value=""
+            />
+          </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"
-          >
-            Bonus Button
-          </span>
-        </span>
-      </button>
     </div>
   </div>
 </div>
@@ -192,7 +182,7 @@ exports[`field view hooks > renders Errors 1`] = `
         for="mantine-0cyk5rcyk"
         id="mantine-0cyk5rcyk-label"
       >
-        fields view
+        $
       </label>
       <div
         class="m_6c018570 mantine-Input-wrapper mantine-TextInput-wrapper"
@@ -219,64 +209,70 @@ exports[`field view hooks > renders Errors 1`] = `
       </p>
     </div>
     <div
-      class="m_6d731127 mantine-Stack-root"
-      style="--stack-gap: var(--mantine-spacing-md); --stack-align: stretch; --stack-justify: flex-start;"
+      class="m_1b7284a3 mantine-Paper-root"
+      data-with-border="true"
     >
+      <p
+        class="mantine-focus-auto m_b6d8b162 mantine-Text-root"
+      >
+        $.a
+      </p>
       <div
-        class="m_46b77525 mantine-InputWrapper-root mantine-TextInput-root"
-        data-error="true"
+        class="m_6d731127 mantine-Stack-root"
+        style="--stack-gap: var(--mantine-spacing-md); --stack-align: stretch; --stack-justify: flex-start;"
       >
-        <label
-          class="m_8fdc1311 mantine-InputWrapper-label mantine-TextInput-label"
-          for="mantine-0px4bipx4"
-          id="mantine-0px4bipx4-label"
-        >
-          sub fields view
-        </label>
         <div
-          class="m_6c018570 mantine-Input-wrapper mantine-TextInput-wrapper"
+          class="m_46b77525 mantine-InputWrapper-root mantine-TextInput-root"
           data-error="true"
-          data-variant="default"
-          style="--input-margin-bottom: calc(var(--mantine-spacing-xs) / 2);"
         >
-          <input
-            aria-describedby="mantine-0px4bipx4-error"
-            aria-invalid="true"
-            class="m_8fb7ebe7 mantine-Input-input mantine-TextInput-input"
+          <label
+            class="m_8fdc1311 mantine-InputWrapper-label mantine-TextInput-label"
+            for="mantine-0px4bipx4"
+            id="mantine-0px4bipx4-label"
+          >
+            $ (child)
+          </label>
+          <div
+            class="m_6c018570 mantine-Input-wrapper mantine-TextInput-wrapper"
             data-error="true"
             data-variant="default"
-            id="mantine-0px4bipx4"
-            name="$"
-            value="xxx"
-          />
+            style="--input-margin-bottom: calc(var(--mantine-spacing-xs) / 2);"
+          >
+            <input
+              aria-describedby="mantine-0px4bipx4-error"
+              aria-invalid="true"
+              class="m_8fb7ebe7 mantine-Input-input mantine-TextInput-input"
+              data-error="true"
+              data-variant="default"
+              id="mantine-0px4bipx4"
+              name="$"
+              value="xxx"
+            />
+          </div>
+          <p
+            class="m_8f816625 mantine-InputWrapper-error mantine-TextInput-error"
+            id="mantine-0px4bipx4-error"
+          >
+            error sub form error
+          </p>
         </div>
-        <p
-          class="m_8f816625 mantine-InputWrapper-error mantine-TextInput-error"
-          id="mantine-0px4bipx4-error"
-        >
-          error sub form error
-        </p>
       </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"
-          >
-            Bonus Button
-          </span>
-        </span>
-      </button>
     </div>
   </div>
 </div>
 `;
 
+exports[`field view hooks > renders ParentFieldLabel 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>
+`;
+
 exports[`field view hooks > renders Populated 1`] = `
 <div>
   <style
@@ -296,7 +292,7 @@ exports[`field view hooks > renders Populated 1`] = `
         for="mantine-0cyk5rcyk"
         id="mantine-0cyk5rcyk-label"
       >
-        fields view
+        $
       </label>
       <div
         class="m_6c018570 mantine-Input-wrapper mantine-TextInput-wrapper"
@@ -313,48 +309,43 @@ exports[`field view hooks > renders Populated 1`] = `
       </div>
     </div>
     <div
-      class="m_6d731127 mantine-Stack-root"
-      style="--stack-gap: var(--mantine-spacing-md); --stack-align: stretch; --stack-justify: flex-start;"
+      class="m_1b7284a3 mantine-Paper-root"
+      data-with-border="true"
     >
+      <p
+        class="mantine-focus-auto m_b6d8b162 mantine-Text-root"
+      >
+        $.a
+      </p>
       <div
-        class="m_46b77525 mantine-InputWrapper-root mantine-TextInput-root"
+        class="m_6d731127 mantine-Stack-root"
+        style="--stack-gap: var(--mantine-spacing-md); --stack-align: stretch; --stack-justify: flex-start;"
       >
-        <label
-          class="m_8fdc1311 mantine-InputWrapper-label mantine-TextInput-label"
-          for="mantine-0px4bipx4"
-          id="mantine-0px4bipx4-label"
-        >
-          sub fields view
-        </label>
         <div
-          class="m_6c018570 mantine-Input-wrapper mantine-TextInput-wrapper"
-          data-variant="default"
+          class="m_46b77525 mantine-InputWrapper-root mantine-TextInput-root"
         >
-          <input
-            aria-invalid="false"
-            class="m_8fb7ebe7 mantine-Input-input mantine-TextInput-input"
+          <label
+            class="m_8fdc1311 mantine-InputWrapper-label mantine-TextInput-label"
+            for="mantine-0px4bipx4"
+            id="mantine-0px4bipx4-label"
+          >
+            $ (child)
+          </label>
+          <div
+            class="m_6c018570 mantine-Input-wrapper mantine-TextInput-wrapper"
             data-variant="default"
-            id="mantine-0px4bipx4"
-            name="$"
-            value="World"
-          />
+          >
+            <input
+              aria-invalid="false"
+              class="m_8fb7ebe7 mantine-Input-input mantine-TextInput-input"
+              data-variant="default"
+              id="mantine-0px4bipx4"
+              name="$"
+              value="World"
+            />
+          </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"
-          >
-            Bonus Button
-          </span>
-        </span>
-      </button>
     </div>
   </div>
 </div>
@@ -380,7 +371,7 @@ exports[`field view hooks > renders Required 1`] = `
         for="mantine-0cyk5rcyk"
         id="mantine-0cyk5rcyk-label"
       >
-        fields view
+        $
         <span
           aria-hidden="true"
           class="m_78a94662 mantine-InputWrapper-required mantine-TextInput-required"
@@ -404,57 +395,63 @@ exports[`field view hooks > renders Required 1`] = `
       </div>
     </div>
     <div
-      class="m_6d731127 mantine-Stack-root"
-      style="--stack-gap: var(--mantine-spacing-md); --stack-align: stretch; --stack-justify: flex-start;"
+      class="m_1b7284a3 mantine-Paper-root"
+      data-with-border="true"
     >
+      <p
+        class="mantine-focus-auto m_b6d8b162 mantine-Text-root"
+      >
+        $.a
+      </p>
       <div
-        class="m_46b77525 mantine-InputWrapper-root mantine-TextInput-root"
+        class="m_6d731127 mantine-Stack-root"
+        style="--stack-gap: var(--mantine-spacing-md); --stack-align: stretch; --stack-justify: flex-start;"
       >
-        <label
-          class="m_8fdc1311 mantine-InputWrapper-label mantine-TextInput-label"
-          data-required="true"
-          for="mantine-0px4bipx4"
-          id="mantine-0px4bipx4-label"
-        >
-          sub fields view
-          <span
-            aria-hidden="true"
-            class="m_78a94662 mantine-InputWrapper-required mantine-TextInput-required"
-          >
-             *
-          </span>
-        </label>
         <div
-          class="m_6c018570 mantine-Input-wrapper mantine-TextInput-wrapper"
-          data-variant="default"
+          class="m_46b77525 mantine-InputWrapper-root mantine-TextInput-root"
         >
-          <input
-            aria-invalid="false"
-            class="m_8fb7ebe7 mantine-Input-input mantine-TextInput-input"
+          <label
+            class="m_8fdc1311 mantine-InputWrapper-label mantine-TextInput-label"
+            data-required="true"
+            for="mantine-0px4bipx4"
+            id="mantine-0px4bipx4-label"
+          >
+            $ (child)
+            <span
+              aria-hidden="true"
+              class="m_78a94662 mantine-InputWrapper-required mantine-TextInput-required"
+            >
+               *
+            </span>
+          </label>
+          <div
+            class="m_6c018570 mantine-Input-wrapper mantine-TextInput-wrapper"
             data-variant="default"
-            id="mantine-0px4bipx4"
-            name="$"
-            required=""
-            value="yyy"
-          />
+          >
+            <input
+              aria-invalid="false"
+              class="m_8fb7ebe7 mantine-Input-input mantine-TextInput-input"
+              data-variant="default"
+              id="mantine-0px4bipx4"
+              name="$"
+              required=""
+              value="yyy"
+            />
+          </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"
-          >
-            Bonus Button
-          </span>
-        </span>
-      </button>
     </div>
   </div>
 </div>
 `;
+
+exports[`field view hooks > renders SubFieldLabel 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>
+  $ (child)
+</div>
+`;

package/mantine/specs/create_fields_view.tests.ts

@@ -0,0 +1,29 @@
+import { type CallbackMapper } from 'mantine/create_fields_view'
+
+describe('createFieldsView', () => {
+  describe('CallbackMapper', () => {
+    it('maps a root paths', () => {
+      type Cm = CallbackMapper<`$`>
+      const callbackMapper: Cm = null!
+      type Callback = (valuePath: '$') => void
+      type MappedCallback = ReturnType<typeof callbackMapper<Callback>>
+      expectTypeOf<MappedCallback>().toEqualTypeOf<(valuePath: '$') => void>()
+    })
+
+    it('maps a simple paths', () => {
+      type Cm = CallbackMapper<`$.x`>
+      const callbackMapper: Cm = null!
+      type Callback = (valuePath: '$.x.y') => void
+      type MappedCallback = ReturnType<typeof callbackMapper<Callback>>
+      expectTypeOf<MappedCallback>().toEqualTypeOf<(valuePath: '$.y') => void>()
+    })
+
+    it('maps a indexed paths', () => {
+      type Cm = CallbackMapper<`$.${number}.x`>
+      const callbackMapper: Cm = null!
+      type Callback = (valuePath: `$.${number}.x.${number}.y`) => void
+      type MappedCallback = ReturnType<typeof callbackMapper<Callback>>
+      expectTypeOf<MappedCallback>().toEqualTypeOf<(valuePath: `$.${number}.y`) => void>()
+    })
+  })
+})

package/mantine/specs/fields_view_hooks.stories.tsx

@@ -1,6 +1,7 @@
 import {
-  Button,
+  Paper,
   Stack,
+  Text,
 } from '@mantine/core'
 import { action } from '@storybook/addon-actions'
 import {
@@ -9,50 +10,91 @@ import {
 } from '@storybook/react'
 import { type FieldsViewProps } from 'core/props'
 import { useMantineFormFields } from 'mantine/hooks'
+import {
+  useCallback,
+  useMemo,
+} from 'react'
 import { type Field } from 'types/field'
 
-const onClick = action('some button clicked')
+export function ParentFieldLabel() {
+  return '$'
+}
+
+export function SubFieldLabel() {
+  return '$ (child)'
+}
 
 function ErrorRenderer({ error }: { error: string }) {
   return `error ${error}`
 }
 
-function SubFieldsView(props: FieldsViewProps<{
+function SubFieldsView({
+  onClickField: onClickFieldImpl,
+  ...props
+}: FieldsViewProps<{
   $: Field<string, string>,
 }> & {
-  onClick: () => void,
+  onClickField: (valuePath: '$') => void,
 }) {
   const form = useMantineFormFields(props)
   const TextInput = form.textInput('$')
+  const onClick$ = useCallback(() => {
+    onClickFieldImpl('$')
+  }, [onClickFieldImpl])
   return (
     <Stack>
       <TextInput
         ErrorRenderer={ErrorRenderer}
-        label='sub fields view'
+        label={SubFieldLabel()}
+        onClick={onClick$}
       />
-      <Button onClick={props.onClick}>
-        Bonus Button
-      </Button>
     </Stack>
   )
 }
 
-function Component(props: FieldsViewProps<{
+function Component({
+  onClickField: onClickFieldImpl,
+  ...props
+}: FieldsViewProps<{
   $: Field<string, string>,
   '$.a': Field<string, string>,
-}>) {
+}> & {
+  onClickField: (valuePath: '$' | '$.a') => void,
+}) {
   const form = useMantineFormFields(props)
-  const FieldsView = form.fieldsView('$.a', SubFieldsView)
+  const {
+    Component,
+    callbackMapper,
+  } = form.fieldsView('$.a', SubFieldsView)
   const TextInput = form.textInput('$')
+  const onClick$ = useCallback(() => {
+    onClickFieldImpl('$')
+  }, [onClickFieldImpl])
+
+  const onClickChildField = useMemo(() => {
+    return callbackMapper(onClickFieldImpl)
+  }, [
+    onClickFieldImpl,
+    callbackMapper,
+  ])
   return (
     <Stack>
       <TextInput
         ErrorRenderer={ErrorRenderer}
-        label='fields view'
-      />
-      <FieldsView
-        onClick={onClick}
+        label={ParentFieldLabel()}
+        onClick={onClick$}
       />
+      <Paper
+        p='sm'
+        withBorder={true}
+      >
+        <Text>
+          $.a
+        </Text>
+        <Component
+          onClickField={onClickChildField}
+        />
+      </Paper>
     </Stack>
   )
 }
@@ -64,6 +106,7 @@ const meta: Meta<typeof Component> = {
     onFieldFocus: action('onFieldFocus'),
     onFieldSubmit: action('onFieldSubmit'),
     onFieldValueChange: action('onFieldValueChange'),
+    onClickField: action('onClickField'),
   },
 }