@strictly/react-form 0.0.1 → 0.0.2

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

@@ -335,6 +335,104 @@ exports[`mantine value input hooks > renders AnSlider 1`] = `
 </div>
 `;
 
+exports[`mantine value input hooks > renders CustomErrorNumberInput 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_e2f5cd4e m_46b77525 mantine-InputWrapper-root mantine-NumberInput-root"
+    data-error="true"
+  >
+    <label
+      class="m_8fdc1311 mantine-InputWrapper-label mantine-NumberInput-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-margin-bottom: calc(var(--mantine-spacing-xs) / 2); --input-right-section-width: var(--ni-right-section-width-sm);"
+    >
+      <input
+        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-0cyk5rcyk"
+        inputmode="numeric"
+        name="$"
+        type="text"
+        value="3"
+      />
+      <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>
+    <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`] = `
 <div>
   <style
@@ -440,17 +538,10 @@ exports[`mantine value input hooks > renders EmptyNumberInput 1`] = `
   >
     <label
       class="m_8fdc1311 mantine-InputWrapper-label mantine-NumberInput-label"
-      data-required="true"
       for="mantine-0px4bipx4"
       id="mantine-0px4bipx4-label"
     >
       Number Input
-      <span
-        aria-hidden="true"
-        class="m_78a94662 mantine-InputWrapper-required mantine-NumberInput-required"
-      >
-         *
-      </span>
     </label>
     <div
       class="m_6c018570 mantine-Input-wrapper mantine-NumberInput-wrapper"
@@ -465,7 +556,6 @@ exports[`mantine value input hooks > renders EmptyNumberInput 1`] = `
         id="mantine-0px4bipx4"
         inputmode="numeric"
         name="$"
-        required=""
         type="text"
         value=""
       />
@@ -611,3 +701,99 @@ exports[`mantine value input hooks > renders PopulatedNumberInput 1`] = `
   </div>
 </div>
 `;
+
+exports[`mantine value input hooks > renders RequiredNumberInput 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_e2f5cd4e m_46b77525 mantine-InputWrapper-root mantine-NumberInput-root"
+  >
+    <label
+      class="m_8fdc1311 mantine-InputWrapper-label mantine-NumberInput-label"
+      data-required="true"
+      for="mantine-0cyk5rcyk"
+      id="mantine-0cyk5rcyk-label"
+    >
+      Number Input
+      <span
+        aria-hidden="true"
+        class="m_78a94662 mantine-InputWrapper-required mantine-NumberInput-required"
+      >
+         *
+      </span>
+    </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-0cyk5rcyk"
+        inputmode="numeric"
+        name="$"
+        required=""
+        type="text"
+        value="3"
+      />
+      <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>
+</div>
+`;

package/mantine/specs/checkbox_hooks.stories.tsx

@@ -4,16 +4,27 @@ import {
   type StoryObj,
 } from '@storybook/react'
 import { type FormProps } from 'core/props'
+import { type ErrorRenderer } from 'mantine/error_renderer'
 import { useMantineForm } from 'mantine/hooks'
 import { type Field } from 'types/field'
 import { CHECKBOX_LABEL } from './checkbox_constants'
 
-function Component(props: FormProps<{
+function Component({
+  ErrorRenderer,
+  ...props
+}: FormProps<{
   $: Field<boolean, string>,
-}>) {
+}> & {
+  ErrorRenderer?: ErrorRenderer,
+}) {
   const inputProps = useMantineForm(props)
   const CheckboxComponent = inputProps.checkbox('$')
-  return <CheckboxComponent label={CHECKBOX_LABEL} />
+  return (
+    <CheckboxComponent
+      ErrorRenderer={ErrorRenderer}
+      label={CHECKBOX_LABEL}
+    />
+  )
 }
 
 const meta: Meta<typeof Component> = {
@@ -34,7 +45,7 @@ export const Off: Story = {
   args: {
     fields: {
       $: {
-        disabled: false,
+        readonly: false,
         required: false,
         value: false,
       },
@@ -46,7 +57,7 @@ export const On: Story = {
   args: {
     fields: {
       $: {
-        disabled: false,
+        readonly: false,
         required: false,
         value: true,
       },
@@ -58,7 +69,7 @@ export const Required: Story = {
   args: {
     fields: {
       $: {
-        disabled: false,
+        readonly: false,
         required: true,
         value: false,
       },
@@ -70,10 +81,39 @@ export const Disabled: Story = {
   args: {
     fields: {
       $: {
-        disabled: true,
+        readonly: true,
         required: false,
         value: false,
       },
     },
   },
 }
+
+export const Error: Story = {
+  args: {
+    fields: {
+      $: {
+        readonly: false,
+        required: false,
+        value: true,
+        error: 'error',
+      },
+    },
+  },
+}
+
+export const CustomError: Story = {
+  args: {
+    fields: {
+      $: {
+        readonly: false,
+        required: false,
+        value: true,
+        error: 'error',
+      },
+    },
+    ErrorRenderer: function () {
+      return 'custom error'
+    },
+  },
+}

package/mantine/specs/list_hooks.stories.tsx

@@ -57,7 +57,7 @@ export const Empty: Story = {
   args: {
     fields: {
       $: {
-        disabled: false,
+        readonly: false,
         required: false,
         value: [],
       },
@@ -69,7 +69,7 @@ export const Populated: Story = {
   args: {
     fields: {
       $: {
-        disabled: false,
+        readonly: false,
         required: false,
         value: [
           '$.4',

package/mantine/specs/radio_group_hooks.stories.tsx

@@ -7,6 +7,9 @@ import {
   type StoryObj,
 } from '@storybook/react'
 import { type FormProps } from 'core/props'
+import {
+  type ErrorRenderer,
+} from 'mantine/error_renderer'
 import { useMantineForm } from 'mantine/hooks'
 import { type Field } from 'types/field'
 import {
@@ -16,14 +19,22 @@ import {
   type RadioValue,
 } from './radio_group_constants'
 
-function Component(props: FormProps<{
+function Component({
+  ErrorRenderer,
+  ...props
+}: FormProps<{
   $: Field<RadioValue | null, string>,
-}>) {
+}> & {
+  ErrorRenderer?: ErrorRenderer,
+}) {
   const form = useMantineForm(props)
   const RadioGroupComponent = form.radioGroup('$')
 
   return (
-    <RadioGroupComponent label={RADIO_GROUP_LABEL}>
+    <RadioGroupComponent
+      ErrorRenderer={ErrorRenderer}
+      label={RADIO_GROUP_LABEL}
+    >
       <Stack>
         {RADIO_VALUES.map(function (value: RadioValue) {
           const label = RADIO_LABELS[value]
@@ -58,7 +69,7 @@ export const Empty: Story = {
   args: {
     fields: {
       $: {
-        disabled: false,
+        readonly: false,
         required: false,
         value: null,
       },
@@ -70,7 +81,7 @@ export const Populated: Story = {
   args: {
     fields: {
       $: {
-        disabled: false,
+        readonly: false,
         required: false,
         value: '3',
       },
@@ -82,7 +93,7 @@ export const Required: Story = {
   args: {
     fields: {
       $: {
-        disabled: false,
+        readonly: false,
         required: true,
         value: '1',
       },
@@ -94,10 +105,39 @@ export const Disabled: Story = {
   args: {
     fields: {
       $: {
-        disabled: true,
+        readonly: true,
+        required: false,
+        value: '2',
+      },
+    },
+  },
+}
+
+export const Error: Story = {
+  args: {
+    fields: {
+      $: {
+        readonly: false,
         required: false,
         value: '2',
+        error: 'error',
       },
     },
   },
 }
+
+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,17 +4,24 @@ import {
   type StoryObj,
 } from '@storybook/react'
 import { type FormProps } from 'core/props'
+import { type ErrorRenderer } from 'mantine/error_renderer'
 import { useMantineForm } from 'mantine/hooks'
 import { type Field } from 'types/field'
 import { SELECT_LABEL } from './select_hooks_constant'
 
-function Component(props: FormProps<{
+function Component({
+  ErrorRenderer,
+  ...props
+}: FormProps<{
   $: Field<string | null, string>,
-}>) {
+}> & {
+  ErrorRenderer?: ErrorRenderer,
+}) {
   const form = useMantineForm(props)
   const SelectComponent = form.select('$')
   return (
     <SelectComponent
+      ErrorRenderer={ErrorRenderer}
       data={[
         'a',
         'b',
@@ -43,8 +50,8 @@ export const EmptySelect: Story = {
   args: {
     fields: {
       $: {
-        disabled: false,
-        required: true,
+        readonly: false,
+        required: false,
         value: '',
       },
     },
@@ -55,8 +62,8 @@ export const PopulatedSelect: Story = {
   args: {
     fields: {
       $: {
-        disabled: false,
-        required: true,
+        readonly: false,
+        required: false,
         value: 'a',
       },
     },
@@ -67,11 +74,51 @@ export const InvalidSelect: Story = {
   args: {
     fields: {
       $: {
-        disabled: false,
-        required: true,
+        readonly: false,
+        required: false,
         value: 'd',
         error: 'invalid option',
       },
     },
   },
 }
+
+export const RequiredSelect: Story = {
+  args: {
+    fields: {
+      $: {
+        readonly: false,
+        required: true,
+        value: 'a',
+      },
+    },
+  },
+}
+
+export const DisabledSelect: Story = {
+  args: {
+    fields: {
+      $: {
+        readonly: true,
+        required: false,
+        value: 'a',
+      },
+    },
+  },
+}
+
+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,6 +13,7 @@ import {
   type SuppliedTextInputProps,
   type TextInputTarget,
 } from 'mantine/create_text_input'
+import { type ErrorRenderer } from 'mantine/error_renderer'
 import { useMantineForm } from 'mantine/hooks'
 import { type ComponentType } from 'react'
 import { type Field } from 'types/field'
@@ -22,15 +23,23 @@ type StoryTextInputProps<T extends TextInputTarget> = SuppliedTextInputProps<T>
 
 function Component<T extends TextInputTarget>({
   TextInput,
+  ErrorRenderer,
   ...props
 }: FormProps<{
   $: Field<string, string>,
 }> & {
   TextInput?: ComponentType<StoryTextInputProps<T>>,
+} & {
+  ErrorRenderer?: ErrorRenderer,
 }) {
   const form = useMantineForm(props)
   const TextInputComponent = form.textInput<'$', StoryTextInputProps<T>>('$', TextInput)
-  return <TextInputComponent label={TEXT_INPUT_LABEL} />
+  return (
+    <TextInputComponent
+      ErrorRenderer={ErrorRenderer}
+      label={TEXT_INPUT_LABEL}
+    />
+  )
 }
 
 const meta: Meta<typeof Component> = {
@@ -53,7 +62,7 @@ export const Empty: Story = {
   args: {
     fields: {
       $: {
-        disabled: false,
+        readonly: false,
         required: false,
         value: '',
       },
@@ -65,7 +74,7 @@ export const Populated: Story = {
   args: {
     fields: {
       $: {
-        disabled: false,
+        readonly: false,
         required: false,
         value: 'Hello',
       },
@@ -77,7 +86,7 @@ export const Required: Story = {
   args: {
     fields: {
       $: {
-        disabled: false,
+        readonly: false,
         required: true,
         value: 'xxx',
       },
@@ -89,7 +98,7 @@ export const Disabled: Story = {
   args: {
     fields: {
       $: {
-        disabled: true,
+        readonly: true,
         required: false,
         value: 'xxx',
       },
@@ -97,11 +106,27 @@ export const Disabled: Story = {
   },
 }
 
+export const CustomError: Story = {
+  args: {
+    fields: {
+      $: {
+        readonly: false,
+        required: false,
+        value: 'xxx',
+        error: 'error',
+      },
+    },
+    ErrorRenderer: function () {
+      return 'custom error'
+    },
+  },
+}
+
 export const OverriddenTextarea: Story<HTMLTextAreaElement> = {
   args: {
     fields: {
       $: {
-        disabled: false,
+        readonly: false,
         required: false,
         value: 'Textarea',
       },
@@ -114,7 +139,7 @@ export const OverriddenPillsInputField: Story = {
   args: {
     fields: {
       $: {
-        disabled: false,
+        readonly: false,
         required: false,
         value: 'PillsInputField',
       },