@strictly/react-form 0.0.1 → 0.0.2

package/mantine/error_renderer.ts

@@ -0,0 +1,15 @@
+import { type ComponentType } from 'react'
+
+export type ErrorRendererProps<E> = {
+  error: E,
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type ErrorRenderer<E = any> = ComponentType<ErrorRendererProps<E>>
+
+export function DefaultErrorRenderer({
+  error,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+}: ErrorRendererProps<any>) {
+  return error
+}

package/mantine/hooks.tsx

@@ -29,7 +29,7 @@ import {
 } from 'react'
 import { type AllFieldsOfFields } from 'types/all_fields_of_fields'
 import { type BooleanFieldsOfFields } from 'types/boolean_fields_of_fields'
-import { type ErrorTypeOfField } from 'types/error_type_of_field'
+import { type ErrorOfField } from 'types/error_of_field'
 import {
   type Fields,
 } from 'types/field'
@@ -76,20 +76,6 @@ function SimpleSelect(props: SelectProps & {
   return <Select {...props} />
 }
 
-export type ErrorRendererProps<E> = {
-  error: E,
-}
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type ErrorRenderer<E = any> = React.ComponentType<ErrorRendererProps<E>>
-
-function DefaultErrorRenderer({
-  error,
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-}: ErrorRendererProps<any>) {
-  return error
-}
-
 export function useMantineForm<
   F extends Fields,
 >({
@@ -146,27 +132,27 @@ class MantineFormImpl<
   F extends Fields,
 > implements MantineForm<F> {
   private readonly textInputCache: Cache<
-    [keyof StringFieldsOfFields<F>, ComponentType<SuppliedTextInputProps>, ErrorRenderer],
+    [keyof StringFieldsOfFields<F>, ComponentType<SuppliedTextInputProps>],
     MantineFieldComponent<SuppliedTextInputProps>
   > = new Cache(
     createTextInput.bind(this),
   )
   private readonly valueInputCache: Cache<
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    [keyof AllFieldsOfFields<F>, ComponentType<SuppliedValueInputProps<any>>, ErrorRenderer],
+    [keyof AllFieldsOfFields<F>, ComponentType<SuppliedValueInputProps<any>>],
     MantineFieldComponent<SuppliedTextInputProps>
   > = new Cache(
     createValueInput.bind(this),
   )
 
   private readonly checkboxCache: Cache<
-    [keyof BooleanFieldsOfFields<F>, ComponentType<SuppliedCheckboxProps>, ErrorRenderer],
+    [keyof BooleanFieldsOfFields<F>, ComponentType<SuppliedCheckboxProps>],
     MantineFieldComponent<SuppliedCheckboxProps>
   > = new Cache(
     createCheckbox.bind(this),
   )
   private readonly radioGroupCache: Cache<
-    [keyof StringFieldsOfFields<F>, ComponentType<SuppliedRadioGroupProps>, ErrorRenderer],
+    [keyof StringFieldsOfFields<F>, ComponentType<SuppliedRadioGroupProps>],
     MantineFieldComponent<SuppliedRadioGroupProps>
   > = new Cache(
     createRadioGroup.bind(this),
@@ -211,7 +197,6 @@ class MantineFormImpl<
   >(
     valuePath: K,
     TextInput?: ComponentType<P>,
-    ErrorRenderer?: ErrorRenderer<ErrorTypeOfField<F[K]>>,
   ): MantineFieldComponent<SuppliedTextInputProps, P>
   textInput<
     K extends keyof StringFieldsOfFields<F>,
@@ -221,15 +206,13 @@ class MantineFormImpl<
     valuePath: K,
     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
     TextInput: ComponentType<P> = TextInputImpl as ComponentType<P>,
-    ErrorRenderer: ErrorRenderer<ErrorTypeOfField<F[K]>> = DefaultErrorRenderer,
-  ): MantineFieldComponent<SuppliedTextInputProps, P> {
+  ): MantineFieldComponent<SuppliedTextInputProps, P, ErrorOfField<F[K]>> {
     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
     return this.textInputCache.retrieveOrCreate(
       valuePath,
       // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
       TextInput as ComponentType<SuppliedTextInputProps>,
-      ErrorRenderer,
-    ) as MantineFieldComponent<SuppliedTextInputProps, P>
+    ) as MantineFieldComponent<SuppliedTextInputProps, P, ErrorOfField<F[K]>>
   }
 
   valueInput<
@@ -239,30 +222,24 @@ class MantineFormImpl<
   >(
     valuePath: K,
     ValueInput: ComponentType<P>,
-    ErrorRenderer: ErrorRenderer<ErrorTypeOfField<F[K]>> = DefaultErrorRenderer,
-  ): MantineFieldComponent<SuppliedValueInputProps<ValueTypeOfField<F[K]>>, P> {
+  ): MantineFieldComponent<SuppliedValueInputProps<ValueTypeOfField<F[K]>>, P, ErrorOfField<F[K]>> {
     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
     return this.valueInputCache.retrieveOrCreate(
       valuePath,
       // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
       ValueInput as ComponentType<SuppliedValueInputProps<ValueTypeOfField<F[K]>>>,
-      ErrorRenderer,
-    ) as MantineFieldComponent<SuppliedTextInputProps, P>
+    ) as MantineFieldComponent<SuppliedTextInputProps, P, ErrorOfField<F[K]>>
   }
 
   select<
     K extends keyof StringFieldsOfFields<F>,
-  >(
-    valuePath: K,
-    ErrorRenderer: ErrorRenderer<ErrorTypeOfField<F[K]>> = DefaultErrorRenderer,
-  ) {
+  >(valuePath: K) {
     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
     return this.valueInputCache.retrieveOrCreate(
       valuePath,
       // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
       SimpleSelect as ComponentType<SuppliedValueInputProps<ValueTypeOfField<F[K]>>>,
-      ErrorRenderer,
-    ) as MantineFieldComponent<SuppliedTextInputProps, ComponentProps<typeof SimpleSelect>>
+    ) as MantineFieldComponent<SuppliedTextInputProps, ComponentProps<typeof SimpleSelect>, ErrorOfField<F[K]>>
   }
 
   checkbox<
@@ -274,20 +251,17 @@ class MantineFormImpl<
   >(
     valuePath: K,
     Checkbox: ComponentType<P>,
-    ErrorRenderer?: ErrorRenderer<ErrorTypeOfField<F[K]>>,
-  ): MantineFieldComponent<SuppliedCheckboxProps, P>
+  ): MantineFieldComponent<SuppliedCheckboxProps, P, ErrorOfField<F[K]>>
   checkbox<K extends keyof BooleanFieldsOfFields<F>, P extends SuppliedCheckboxProps>(
     valuePath: K,
     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
     Checkbox: ComponentType<P> = CheckboxImpl as ComponentType<P>,
-    ErrorRenderer: ErrorRenderer<ErrorTypeOfField<F[K]>> = DefaultErrorRenderer,
-  ): MantineFieldComponent<SuppliedCheckboxProps, P> {
+  ): MantineFieldComponent<SuppliedCheckboxProps, P, ErrorOfField<F[K]>> {
     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
     return this.checkboxCache.retrieveOrCreate(
       valuePath,
       // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
       Checkbox as ComponentType<SuppliedCheckboxProps>,
-      ErrorRenderer,
     ) as MantineFieldComponent<SuppliedCheckboxProps, P>
   }
 
@@ -300,7 +274,6 @@ class MantineFormImpl<
   >(
     valuePath: K,
     RadioGroup: ComponentType<P>,
-    ErrorRenderer?: ErrorRenderer<ErrorTypeOfField<F[K]>>,
   ): MantineFieldComponent<SuppliedRadioGroupProps, P>
   radioGroup<
     K extends keyof StringFieldsOfFields<F>,
@@ -309,15 +282,13 @@ class MantineFormImpl<
     valuePath: K,
     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
     RadioGroup: ComponentType<P> = RadioImpl.Group as ComponentType<PropsWithChildren<P>>,
-    ErrorRenderer: ErrorRenderer<ErrorTypeOfField<F[K]>> = DefaultErrorRenderer,
-  ): MantineFieldComponent<SuppliedRadioGroupProps, P> {
+  ): MantineFieldComponent<SuppliedRadioGroupProps, P, ErrorOfField<F[K]>> {
     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
     return this.radioGroupCache.retrieveOrCreate(
       valuePath,
       // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
       RadioGroup as ComponentType<SuppliedRadioGroupProps>,
-      ErrorRenderer,
-    ) as MantineFieldComponent<SuppliedRadioGroupProps, P>
+    ) as MantineFieldComponent<SuppliedRadioGroupProps, P, ErrorOfField<F[K]>>
   }
 
   radio<
@@ -325,7 +296,7 @@ class MantineFormImpl<
   >(
     valuePath: K,
     value: ValueTypeOfField<F[K]>,
-  ): MantineFieldComponent<SuppliedRadioProps, RadioProps>
+  ): MantineFieldComponent<SuppliedRadioProps, RadioProps, ErrorOfField<F[K]>>
   radio<
     K extends keyof StringFieldsOfFields<F>,
     P extends SuppliedRadioProps,
@@ -333,7 +304,7 @@ class MantineFormImpl<
     valuePath: K,
     value: ValueTypeOfField<F[K]>,
     Radio: ComponentType<P>,
-  ): MantineFieldComponent<SuppliedRadioProps, P>
+  ): MantineFieldComponent<SuppliedRadioProps, P, ErrorOfField<F[K]>>
   radio<
     K extends keyof StringFieldsOfFields<F>,
     P extends SuppliedRadioProps,
@@ -342,7 +313,7 @@ class MantineFormImpl<
     value: ValueTypeOfField<F[K]>,
     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
     Radio: ComponentType<P> = RadioImpl as ComponentType<P>,
-  ): MantineFieldComponent<SuppliedRadioProps, P> {
+  ): MantineFieldComponent<SuppliedRadioProps, P, ErrorOfField<F[K]>> {
     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
     return this.radioCache.retrieveOrCreate(
       valuePath,
@@ -352,7 +323,9 @@ class MantineFormImpl<
     ) as MantineFieldComponent<SuppliedRadioProps, P>
   }
 
-  pill<K extends keyof AllFieldsOfFields<F>>(valuePath: K): MantineFieldComponent<SuppliedPillProps, PillProps>
+  pill<
+    K extends keyof AllFieldsOfFields<F>,
+  >(valuePath: K): MantineFieldComponent<SuppliedPillProps, PillProps, ErrorOfField<F[K]>>
   pill<
     K extends keyof AllFieldsOfFields<F>,
     P extends SuppliedPillProps,
@@ -367,13 +340,13 @@ class MantineFormImpl<
     valuePath: K,
     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
     Pill: ComponentType<P> = PillImpl as ComponentType<P>,
-  ): MantineFieldComponent<SuppliedPillProps, P> {
+  ): MantineFieldComponent<SuppliedPillProps, P, ErrorOfField<F[K]>> {
     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
     return this.pillCache.retrieveOrCreate(
       valuePath,
       // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
       Pill as ComponentType<SuppliedPillProps>,
-    ) as MantineFieldComponent<SuppliedPillProps, P>
+    ) as MantineFieldComponent<SuppliedPillProps, P, ErrorOfField<F[K]>>
   }
 
   list<
@@ -388,7 +361,8 @@ class MantineFormImpl<
       DefaultList,
     ) as MantineFieldComponent<
       SuppliedListProps<ElementOfArray<F[K]>>,
-      ComponentProps<typeof DefaultList<ElementOfArray<F[K]>>>
+      ComponentProps<typeof DefaultList<ElementOfArray<F[K]>>>,
+      ErrorOfField<F[K]>
     >
   }
 }

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

@@ -1,5 +1,68 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`mantine checkbox hooks > renders CustomError 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_bf2d988c mantine-Checkbox-root m_5f75b09e mantine-Checkbox-root"
+    data-checked="true"
+    data-label-position="right"
+    style="--checkbox-color: var(--mantine-color-blue-filled);"
+  >
+    <div
+      class="m_5f6e695e mantine-Checkbox-body"
+    >
+      <div
+        class="m_26062bec mantine-Checkbox-inner"
+        data-label-position="right"
+      >
+        <input
+          checked=""
+          class="mantine-focus-auto m_26063560 mantine-Checkbox-input"
+          data-error="true"
+          id="mantine-0cyk5rcyk"
+          name="$"
+          type="checkbox"
+        />
+        <svg
+          aria-hidden="true"
+          class="m_bf295423 mantine-Checkbox-icon"
+          fill="none"
+          viewBox="0 0 10 7"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M4 4.586L1.707 2.293A1 1 0 1 0 .293 3.707l3 3a.997.997 0 0 0 1.414 0l5-5A1 1 0 1 0 8.293.293L4 4.586z"
+            fill="currentColor"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </div>
+      <div
+        class="m_d3ea56bb mantine-Checkbox-labelWrapper"
+      >
+        <label
+          class="m_8ee546b8 mantine-Checkbox-label"
+          for="mantine-0cyk5rcyk"
+        >
+          Checkbox
+        </label>
+        <p
+          class="m_8e8a99cc mantine-Checkbox-error m_8f816625 mantine-InputWrapper-error"
+        >
+          custom error
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`mantine checkbox hooks > renders Disabled 1`] = `
 <div>
   <style
@@ -58,6 +121,69 @@ exports[`mantine checkbox hooks > renders Disabled 1`] = `
 </div>
 `;
 
+exports[`mantine checkbox hooks > renders Error 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_bf2d988c mantine-Checkbox-root m_5f75b09e mantine-Checkbox-root"
+    data-checked="true"
+    data-label-position="right"
+    style="--checkbox-color: var(--mantine-color-blue-filled);"
+  >
+    <div
+      class="m_5f6e695e mantine-Checkbox-body"
+    >
+      <div
+        class="m_26062bec mantine-Checkbox-inner"
+        data-label-position="right"
+      >
+        <input
+          checked=""
+          class="mantine-focus-auto m_26063560 mantine-Checkbox-input"
+          data-error="true"
+          id="mantine-0cyk5rcyk"
+          name="$"
+          type="checkbox"
+        />
+        <svg
+          aria-hidden="true"
+          class="m_bf295423 mantine-Checkbox-icon"
+          fill="none"
+          viewBox="0 0 10 7"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M4 4.586L1.707 2.293A1 1 0 1 0 .293 3.707l3 3a.997.997 0 0 0 1.414 0l5-5A1 1 0 1 0 8.293.293L4 4.586z"
+            fill="currentColor"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </div>
+      <div
+        class="m_d3ea56bb mantine-Checkbox-labelWrapper"
+      >
+        <label
+          class="m_8ee546b8 mantine-Checkbox-label"
+          for="mantine-0cyk5rcyk"
+        >
+          Checkbox
+        </label>
+        <p
+          class="m_8e8a99cc mantine-Checkbox-error m_8f816625 mantine-InputWrapper-error"
+        >
+          error
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`mantine checkbox hooks > renders Off 1`] = `
 <div>
   <style