@strictly/react-form 0.0.6 → 0.0.8

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.6",
+  "version": "0.0.8",
   "exports": {
     ".": {
       "import": {