@strictly/react-form 0.0.7 → 0.0.8

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

@@ -1,6 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`mantine checkbox hooks > renders CustomError 1`] = `
+exports[`mantine checkbox hooks > renders Disabled 1`] = `
 <div>
   <style
     data-mantine-styles="classes"
@@ -9,7 +9,6 @@ exports[`mantine checkbox hooks > renders CustomError 1`] = `
   </style>
   <div
     class="m_46b77525 mantine-InputWrapper-root mantine-TextInput-root"
-    data-error="true"
   >
     <label
       class="m_8fdc1311 mantine-InputWrapper-label mantine-TextInput-label"
@@ -20,32 +19,25 @@ exports[`mantine checkbox hooks > renders CustomError 1`] = `
     </label>
     <div
       class="m_6c018570 mantine-Input-wrapper mantine-TextInput-wrapper"
-      data-error="true"
+      data-disabled="true"
       data-variant="default"
-      style="--input-margin-bottom: calc(var(--mantine-spacing-xs) / 2);"
     >
       <input
-        aria-describedby="mantine-0cyk5rcyk-error"
-        aria-invalid="true"
+        aria-invalid="false"
         class="m_8fb7ebe7 mantine-Input-input mantine-TextInput-input"
-        data-error="true"
+        data-disabled="true"
         data-variant="default"
+        disabled=""
         id="mantine-0cyk5rcyk"
         name="$"
         value="xxx"
       />
     </div>
-    <p
-      class="m_8f816625 mantine-InputWrapper-error mantine-TextInput-error"
-      id="mantine-0cyk5rcyk-error"
-    >
-      custom error
-    </p>
   </div>
 </div>
 `;
 
-exports[`mantine checkbox hooks > renders Disabled 1`] = `
+exports[`mantine checkbox hooks > renders Empty 1`] = `
 <div>
   <style
     data-mantine-styles="classes"
@@ -57,32 +49,29 @@ exports[`mantine checkbox hooks > renders Disabled 1`] = `
   >
     <label
       class="m_8fdc1311 mantine-InputWrapper-label mantine-TextInput-label"
-      for="mantine-0cyk5rcyk"
-      id="mantine-0cyk5rcyk-label"
+      for="mantine-0px4bipx4"
+      id="mantine-0px4bipx4-label"
     >
       Text Input
     </label>
     <div
       class="m_6c018570 mantine-Input-wrapper mantine-TextInput-wrapper"
-      data-disabled="true"
       data-variant="default"
     >
       <input
         aria-invalid="false"
         class="m_8fb7ebe7 mantine-Input-input mantine-TextInput-input"
-        data-disabled="true"
         data-variant="default"
-        disabled=""
-        id="mantine-0cyk5rcyk"
+        id="mantine-0px4bipx4"
         name="$"
-        value="xxx"
+        value=""
       />
     </div>
   </div>
 </div>
 `;
 
-exports[`mantine checkbox hooks > renders Empty 1`] = `
+exports[`mantine checkbox hooks > renders Error 1`] = `
 <div>
   <style
     data-mantine-styles="classes"
@@ -91,27 +80,38 @@ exports[`mantine checkbox hooks > renders Empty 1`] = `
   </style>
   <div
     class="m_46b77525 mantine-InputWrapper-root mantine-TextInput-root"
+    data-error="true"
   >
     <label
       class="m_8fdc1311 mantine-InputWrapper-label mantine-TextInput-label"
-      for="mantine-0px4bipx4"
-      id="mantine-0px4bipx4-label"
+      for="mantine-0cyk5rcyk"
+      id="mantine-0cyk5rcyk-label"
     >
       Text Input
     </label>
     <div
       class="m_6c018570 mantine-Input-wrapper mantine-TextInput-wrapper"
+      data-error="true"
       data-variant="default"
+      style="--input-margin-bottom: calc(var(--mantine-spacing-xs) / 2);"
     >
       <input
-        aria-invalid="false"
+        aria-describedby="mantine-0cyk5rcyk-error"
+        aria-invalid="true"
         class="m_8fb7ebe7 mantine-Input-input mantine-TextInput-input"
+        data-error="true"
         data-variant="default"
-        id="mantine-0px4bipx4"
+        id="mantine-0cyk5rcyk"
         name="$"
-        value=""
+        value="xxx"
       />
     </div>
+    <p
+      class="m_8f816625 mantine-InputWrapper-error mantine-TextInput-error"
+      id="mantine-0cyk5rcyk-error"
+    >
+      error error
+    </p>
   </div>
 </div>
 `;

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

@@ -335,7 +335,7 @@ exports[`mantine value input hooks > renders AnSlider 1`] = `
 </div>
 `;
 
-exports[`mantine value input hooks > renders CustomErrorNumberInput 1`] = `
+exports[`mantine value input hooks > renders DisabledNumberInput 1`] = `
 <div>
   <style
     data-mantine-styles="classes"
@@ -344,7 +344,6 @@ exports[`mantine value input hooks > renders CustomErrorNumberInput 1`] = `
   </style>
   <div
     class="m_e2f5cd4e m_46b77525 mantine-InputWrapper-root mantine-NumberInput-root"
-    data-error="true"
   >
     <label
       class="m_8fdc1311 mantine-InputWrapper-label mantine-NumberInput-label"
@@ -355,17 +354,17 @@ exports[`mantine value input hooks > renders CustomErrorNumberInput 1`] = `
     </label>
     <div
       class="m_6c018570 mantine-Input-wrapper mantine-NumberInput-wrapper"
-      data-error="true"
+      data-disabled="true"
       data-variant="default"
       data-with-right-section="true"
-      style="--input-margin-bottom: calc(var(--mantine-spacing-xs) / 2); --input-right-section-width: var(--ni-right-section-width-sm);"
+      style="--input-right-section-width: var(--ni-right-section-width-sm); --input-right-section-pointer-events: none;"
     >
       <input
-        aria-describedby="mantine-0cyk5rcyk-error"
-        aria-invalid="true"
+        aria-invalid="false"
         class="m_8fb7ebe7 mantine-Input-input mantine-NumberInput-input"
-        data-error="true"
+        data-disabled="true"
         data-variant="default"
+        disabled=""
         id="mantine-0cyk5rcyk"
         inputmode="numeric"
         name="$"
@@ -383,6 +382,7 @@ exports[`mantine value input hooks > renders CustomErrorNumberInput 1`] = `
             aria-hidden="true"
             class="mantine-focus-auto m_80b4b171 mantine-NumberInput-control m_87cf2631 mantine-UnstyledButton-root"
             data-direction="up"
+            disabled=""
             tabindex="-1"
             type="button"
           >
@@ -404,6 +404,7 @@ exports[`mantine value input hooks > renders CustomErrorNumberInput 1`] = `
             aria-hidden="true"
             class="mantine-focus-auto m_80b4b171 mantine-NumberInput-control m_87cf2631 mantine-UnstyledButton-root"
             data-direction="down"
+            disabled=""
             tabindex="-1"
             type="button"
           >
@@ -423,17 +424,11 @@ exports[`mantine value input hooks > renders CustomErrorNumberInput 1`] = `
         </div>
       </div>
     </div>
-    <p
-      class="m_8f816625 mantine-InputWrapper-error mantine-NumberInput-error"
-      id="mantine-0cyk5rcyk-error"
-    >
-      a custom error
-    </p>
   </div>
 </div>
 `;
 
-exports[`mantine value input hooks > renders DisabledNumberInput 1`] = `
+exports[`mantine value input hooks > renders EmptyNumberInput 1`] = `
 <div>
   <style
     data-mantine-styles="classes"
@@ -445,29 +440,26 @@ exports[`mantine value input hooks > renders DisabledNumberInput 1`] = `
   >
     <label
       class="m_8fdc1311 mantine-InputWrapper-label mantine-NumberInput-label"
-      for="mantine-0cyk5rcyk"
-      id="mantine-0cyk5rcyk-label"
+      for="mantine-0px4bipx4"
+      id="mantine-0px4bipx4-label"
     >
       Number Input
     </label>
     <div
       class="m_6c018570 mantine-Input-wrapper mantine-NumberInput-wrapper"
-      data-disabled="true"
       data-variant="default"
       data-with-right-section="true"
-      style="--input-right-section-width: var(--ni-right-section-width-sm); --input-right-section-pointer-events: none;"
+      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-disabled="true"
         data-variant="default"
-        disabled=""
-        id="mantine-0cyk5rcyk"
+        id="mantine-0px4bipx4"
         inputmode="numeric"
         name="$"
         type="text"
-        value="3"
+        value=""
       />
       <div
         class="m_82577fc2 mantine-Input-section mantine-NumberInput-section"
@@ -480,7 +472,6 @@ exports[`mantine value input hooks > renders DisabledNumberInput 1`] = `
             aria-hidden="true"
             class="mantine-focus-auto m_80b4b171 mantine-NumberInput-control m_87cf2631 mantine-UnstyledButton-root"
             data-direction="up"
-            disabled=""
             tabindex="-1"
             type="button"
           >
@@ -502,7 +493,6 @@ exports[`mantine value input hooks > renders DisabledNumberInput 1`] = `
             aria-hidden="true"
             class="mantine-focus-auto m_80b4b171 mantine-NumberInput-control m_87cf2631 mantine-UnstyledButton-root"
             data-direction="down"
-            disabled=""
             tabindex="-1"
             type="button"
           >
@@ -526,7 +516,7 @@ exports[`mantine value input hooks > renders DisabledNumberInput 1`] = `
 </div>
 `;
 
-exports[`mantine value input hooks > renders EmptyNumberInput 1`] = `
+exports[`mantine value input hooks > renders ErrorNumberInput 1`] = `
 <div>
   <style
     data-mantine-styles="classes"
@@ -535,29 +525,33 @@ exports[`mantine value input hooks > renders EmptyNumberInput 1`] = `
   </style>
   <div
     class="m_e2f5cd4e m_46b77525 mantine-InputWrapper-root mantine-NumberInput-root"
+    data-error="true"
   >
     <label
       class="m_8fdc1311 mantine-InputWrapper-label mantine-NumberInput-label"
-      for="mantine-0px4bipx4"
-      id="mantine-0px4bipx4-label"
+      for="mantine-0cyk5rcyk"
+      id="mantine-0cyk5rcyk-label"
     >
       Number Input
     </label>
     <div
       class="m_6c018570 mantine-Input-wrapper mantine-NumberInput-wrapper"
+      data-error="true"
       data-variant="default"
       data-with-right-section="true"
-      style="--input-right-section-width: var(--ni-right-section-width-sm);"
+      style="--input-margin-bottom: calc(var(--mantine-spacing-xs) / 2); --input-right-section-width: var(--ni-right-section-width-sm);"
     >
       <input
-        aria-invalid="false"
+        aria-describedby="mantine-0cyk5rcyk-error"
+        aria-invalid="true"
         class="m_8fb7ebe7 mantine-Input-input mantine-NumberInput-input"
+        data-error="true"
         data-variant="default"
-        id="mantine-0px4bipx4"
+        id="mantine-0cyk5rcyk"
         inputmode="numeric"
         name="$"
         type="text"
-        value=""
+        value="3"
       />
       <div
         class="m_82577fc2 mantine-Input-section mantine-NumberInput-section"
@@ -610,6 +604,12 @@ exports[`mantine value input hooks > renders EmptyNumberInput 1`] = `
         </div>
       </div>
     </div>
+    <p
+      class="m_8f816625 mantine-InputWrapper-error mantine-NumberInput-error"
+      id="mantine-0cyk5rcyk-error"
+    >
+      error an error
+    </p>
   </div>
 </div>
 `;

package/mantine/specs/checkbox_hooks.stories.tsx

@@ -4,19 +4,19 @@ import {
   type StoryObj,
 } from '@storybook/react'
 import { type FieldsViewProps } from 'core/props'
-import { type ErrorRenderer } from 'mantine/error_renderer'
 import { useMantineFormFields } from 'mantine/hooks'
 import { type Field } from 'types/field'
 import { CHECKBOX_LABEL } from './checkbox_constants'
 
+function ErrorRenderer({ error }: { error: string }) {
+  return `Error ${error}`
+}
+
 function Component({
-  ErrorRenderer,
   ...props
 }: FieldsViewProps<{
   $: Field<boolean, string>,
-}> & {
-  ErrorRenderer?: ErrorRenderer,
-}) {
+}>) {
   const inputProps = useMantineFormFields(props)
   const CheckboxComponent = inputProps.checkbox('$')
   return (
@@ -101,19 +101,3 @@ export const Error: Story = {
     },
   },
 }
-
-export const CustomError: Story = {
-  args: {
-    fields: {
-      $: {
-        readonly: false,
-        required: false,
-        value: true,
-        error: 'error',
-      },
-    },
-    ErrorRenderer: function () {
-      return 'custom error'
-    },
-  },
-}

package/mantine/specs/fields_view_hooks.stories.tsx

@@ -13,6 +13,10 @@ import { type Field } from 'types/field'
 
 const onClick = action('some button clicked')
 
+function ErrorRenderer({ error }: { error: string }) {
+  return `error ${error}`
+}
+
 function SubFieldsView(props: FieldsViewProps<{
   $: Field<string, string>,
 }> & {
@@ -22,7 +26,10 @@ function SubFieldsView(props: FieldsViewProps<{
   const TextInput = form.textInput('$')
   return (
     <Stack>
-      <TextInput label='sub fields view' />
+      <TextInput
+        ErrorRenderer={ErrorRenderer}
+        label='sub fields view'
+      />
       <Button onClick={props.onClick}>
         Bonus Button
       </Button>
@@ -39,8 +46,13 @@ function Component(props: FieldsViewProps<{
   const TextInput = form.textInput('$')
   return (
     <Stack>
-      <TextInput label='fields view' />
-      <FieldsView onClick={onClick} />
+      <TextInput
+        ErrorRenderer={ErrorRenderer}
+        label='fields view'
+      />
+      <FieldsView
+        onClick={onClick}
+      />
     </Stack>
   )
 }
@@ -127,7 +139,7 @@ export const Disabled: Story = {
   },
 }
 
-export const CustomError: Story = {
+export const Errors: Story = {
   args: {
     fields: {
       $: {

package/mantine/specs/form_hooks.stories.tsx

@@ -18,6 +18,10 @@ import { type Field } from 'types/field'
 
 const onCancel = action('canceled')
 
+function ErrorRenderer({ error }: { error: string }) {
+  return `error ${error}`
+}
+
 function SubForm({
   value,
   onValueChange,
@@ -44,15 +48,18 @@ function SubForm({
 }
 
 function Component(props: FieldsViewProps<{
-  $: Field<string>,
-  '$.a': Field<number>,
+  $: Field<string, string>,
+  '$.a': Field<number, string>,
 }>) {
   const form = useMantineFormFields(props)
   const Form = form.form('$.a', SubForm)
   const TextInput = form.textInput('$')
   return (
     <Stack>
-      <TextInput label='fields view' />
+      <TextInput
+        ErrorRenderer={ErrorRenderer}
+        label='fields view'
+      />
       <Form onCancel={onCancel} />
     </Stack>
   )

package/mantine/specs/radio_group_hooks.stories.tsx

@@ -19,14 +19,15 @@ import {
   type RadioValue,
 } from './radio_group_constants'
 
+function ErrorRenderer({ error }: { error: string }) {
+  return `custom error ${error}`
+}
+
 function Component({
-  ErrorRenderer,
   ...props
 }: FieldsViewProps<{
   $: Field<RadioValue | null, string>,
-}> & {
-  ErrorRenderer?: ErrorRenderer,
-}) {
+}>) {
   const form = useMantineFormFields(props)
   const RadioGroupComponent = form.radioGroup('$')
 
@@ -41,6 +42,7 @@ function Component({
           const RadioComponent = form.radio('$', value)
           return (
             <RadioComponent
+              ErrorRenderer={ErrorRenderer}
               key={label}
               label={label}
             />
@@ -125,19 +127,3 @@ export const Error: Story = {
     },
   },
 }
-
-export const CustomError: Story = {
-  args: {
-    fields: {
-      $: {
-        readonly: false,
-        required: false,
-        value: '2',
-        error: 'error',
-      },
-    },
-    ErrorRenderer: function () {
-      return 'custom error'
-    },
-  },
-}

package/mantine/specs/select_hooks.stories.tsx

@@ -4,19 +4,19 @@ import {
   type StoryObj,
 } from '@storybook/react'
 import { type FieldsViewProps } from 'core/props'
-import { type ErrorRenderer } from 'mantine/error_renderer'
 import { useMantineFormFields } from 'mantine/hooks'
 import { type Field } from 'types/field'
 import { SELECT_LABEL } from './select_hooks_constant'
 
+function ErrorRenderer({ error }: { error: string }) {
+  return `Error ${error}`
+}
+
 function Component({
-  ErrorRenderer,
   ...props
 }: FieldsViewProps<{
   $: Field<string | null, string>,
-}> & {
-  ErrorRenderer?: ErrorRenderer,
-}) {
+}>) {
   const form = useMantineFormFields(props)
   const SelectComponent = form.select('$')
   return (
@@ -106,19 +106,3 @@ export const DisabledSelect: Story = {
     },
   },
 }
-
-export const CustomErrorSelect: Story = {
-  args: {
-    fields: {
-      $: {
-        readonly: false,
-        required: true,
-        value: 'c',
-        error: 'error',
-      },
-    },
-    ErrorRenderer: function () {
-      return 'custom error'
-    },
-  },
-}

package/mantine/specs/text_input_hooks.stories.tsx

@@ -13,7 +13,6 @@ import {
   type SuppliedTextInputProps,
   type TextInputTarget,
 } from 'mantine/create_text_input'
-import { type ErrorRenderer } from 'mantine/error_renderer'
 import { useMantineFormFields } from 'mantine/hooks'
 import { type ComponentType } from 'react'
 import { type Field } from 'types/field'
@@ -21,16 +20,17 @@ import { TEXT_INPUT_LABEL } from './text_input_constants'
 
 type StoryTextInputProps<T extends TextInputTarget> = SuppliedTextInputProps<T> & Pick<TextInputProps, 'label'>
 
+function ErrorRenderer({ error }: { error: string }) {
+  return `error ${error}`
+}
+
 function Component<T extends TextInputTarget>({
   TextInput,
-  ErrorRenderer,
   ...props
 }: FieldsViewProps<{
   $: Field<string, string>,
 }> & {
   TextInput?: ComponentType<StoryTextInputProps<T>>,
-} & {
-  ErrorRenderer?: ErrorRenderer,
 }) {
   const form = useMantineFormFields(props)
   const TextInputComponent = form.textInput<'$', StoryTextInputProps<T>>('$', TextInput)
@@ -106,7 +106,7 @@ export const Disabled: Story = {
   },
 }
 
-export const CustomError: Story = {
+export const Error: Story = {
   args: {
     fields: {
       $: {
@@ -116,9 +116,6 @@ export const CustomError: Story = {
         error: 'error',
       },
     },
-    ErrorRenderer: function () {
-      return 'custom error'
-    },
   },
 }
 

package/mantine/specs/value_input_hooks.stories.tsx

@@ -15,7 +15,6 @@ import {
 } from '@storybook/react'
 import { type FieldsViewProps } from 'core/props'
 import { type SuppliedValueInputProps } from 'mantine/create_value_input'
-import { type ErrorRenderer } from 'mantine/error_renderer'
 import { useMantineFormFields } from 'mantine/hooks'
 import {
   type ComponentType,
@@ -26,6 +25,10 @@ import {
   SLIDER_LABEL,
 } from './value_input_constants'
 
+function ErrorRenderer({ error }: { error: string }) {
+  return `error ${error}`
+}
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type StoryValueInputProps<V> = SuppliedValueInputProps<V, any>
 
@@ -34,7 +37,6 @@ function Component<
   P extends StoryValueInputProps<V>,
 >({
   ValueInput,
-  ErrorRenderer,
   inputProps,
   ...props
 }: FieldsViewProps<{
@@ -43,8 +45,6 @@ function Component<
   ValueInput: ComponentType<P>,
 } & {
   inputProps: P,
-} & {
-  ErrorRenderer?: ErrorRenderer,
 }) {
   const form = useMantineFormFields(props)
   const ValueInputComponent = form.valueInput<'$', P>('$', ValueInput)
@@ -124,7 +124,7 @@ export const RequiredNumberInput: Story<number | string, NumberInputProps> = {
   },
 }
 
-export const CustomErrorNumberInput: Story<number | string, NumberInputProps> = {
+export const ErrorNumberInput: Story<number | string, NumberInputProps> = {
   args: {
     fields: {
       $: {
@@ -135,9 +135,6 @@ export const CustomErrorNumberInput: Story<number | string, NumberInputProps> =
       },
     },
     ValueInput: NumberInput,
-    ErrorRenderer: function () {
-      return 'a custom error'
-    },
     inputProps: {
       label: NUMBER_INPUT_LABEL,
     },

package/mantine/types.ts

@@ -12,6 +12,10 @@ export type MantineForm<F extends Fields> = {
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type MantineFieldComponent<T, P = T, E = any> = UnsafePartialComponent<ComponentType<P>, T, {
-  ErrorRenderer?: ErrorRenderer<E>,
-}>
+export type MantineFieldComponent<T, P = T, E = any> = UnsafePartialComponent<
+  ComponentType<P>,
+  T,
+  // escape hatch for never comparisons `E extends never` will not work, always returning never
+  // https://github.com/microsoft/TypeScript/issues/31751
+  [E] extends [never] ? {} : { ErrorRenderer: ErrorRenderer<E> }
+>

package/package.json

@@ -22,6 +22,7 @@
     "@storybook/builder-vite": "^8.4.5",
     "@storybook/react": "^8.4.5",
     "@storybook/react-vite": "^8.4.5",
+    "@storybook/test": "^8.4.5",
     "@storybook/test-runner": "^0.21.0",
     "@strictly/support-vite": "*",
     "@testing-library/dom": "^10.4.0",
@@ -69,7 +70,7 @@
     "test:watch": "vitest"
   },
   "type": "module",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "exports": {
     ".": {
       "import": {