@strictly/react-form 0.0.1 → 0.0.2

package/.out/mantine/specs/value_input_hooks.stories.js

@@ -3,10 +3,10 @@ import { JsonInput, NumberInput, Rating, Slider, } from '@mantine/core';
 import { action } from '@storybook/addon-actions';
 import { useMantineForm } from 'mantine/hooks';
 import { NUMBER_INPUT_LABEL, SLIDER_LABEL, } from './value_input_constants';
-function Component({ ValueInput, inputs, ...props }) {
+function Component({ ValueInput, ErrorRenderer, inputProps, ...props }) {
     const form = useMantineForm(props);
     const ValueInputComponent = form.valueInput('$', ValueInput);
-    return (_jsx(ValueInputComponent, { ...inputs }));
+    return (_jsx(ValueInputComponent, { ...inputProps, ErrorRenderer: ErrorRenderer }));
 }
 const meta = {
     component: Component,
@@ -22,13 +22,13 @@ export const EmptyNumberInput = {
     args: {
         fields: {
             $: {
-                disabled: false,
-                required: true,
+                readonly: false,
+                required: false,
                 value: '',
             },
         },
         ValueInput: NumberInput,
-        inputs: {
+        inputProps: {
             label: NUMBER_INPUT_LABEL,
         },
     },
@@ -37,13 +37,47 @@ export const PopulatedNumberInput = {
     args: {
         fields: {
             $: {
-                disabled: false,
+                readonly: false,
                 required: false,
                 value: 3,
             },
         },
         ValueInput: NumberInput,
-        inputs: {
+        inputProps: {
+            label: NUMBER_INPUT_LABEL,
+        },
+    },
+};
+export const RequiredNumberInput = {
+    args: {
+        fields: {
+            $: {
+                readonly: false,
+                required: true,
+                value: 3,
+            },
+        },
+        ValueInput: NumberInput,
+        inputProps: {
+            label: NUMBER_INPUT_LABEL,
+        },
+    },
+};
+export const CustomErrorNumberInput = {
+    args: {
+        fields: {
+            $: {
+                readonly: false,
+                required: false,
+                value: 3,
+                error: 'an error',
+            },
+        },
+        ValueInput: NumberInput,
+        ErrorRenderer: function () {
+            return 'a custom error';
+        },
+        inputProps: {
             label: NUMBER_INPUT_LABEL,
         },
     },
@@ -52,13 +86,13 @@ export const DisabledNumberInput = {
     args: {
         fields: {
             $: {
-                disabled: true,
+                readonly: true,
                 required: false,
                 value: 3,
             },
         },
         ValueInput: NumberInput,
-        inputs: {
+        inputProps: {
             label: NUMBER_INPUT_LABEL,
         },
     },
@@ -67,13 +101,13 @@ export const AnSlider = {
     args: {
         fields: {
             $: {
-                disabled: false,
+                readonly: false,
                 required: false,
                 value: 3,
             },
         },
         ValueInput: Slider,
-        inputs: {
+        inputProps: {
             label: SLIDER_LABEL,
             min: 1,
             max: 10,
@@ -98,26 +132,26 @@ export const AnRating = {
     args: {
         fields: {
             $: {
-                disabled: false,
+                readonly: false,
                 required: false,
                 value: 2,
             },
         },
         ValueInput: Rating,
-        inputs: {},
+        inputProps: {},
     },
 };
 export const AnJsonInput = {
     args: {
         fields: {
             $: {
-                disabled: false,
+                readonly: false,
                 required: false,
                 value: '{}',
             },
         },
         ValueInput: JsonInput,
-        inputs: {
+        inputProps: {
             rows: 8,
         },
     },

package/.out/mantine/types.d.ts

@@ -1,6 +1,7 @@
 import { type ComponentType } from 'react';
 import { type Fields } from 'types/field';
 import { type UnsafePartialComponent } from 'util/partial';
+import { type ErrorRenderer } from './error_renderer';
 export type MantineForm<F extends Fields> = {
     fields: F;
     onFieldValueChange: (<K extends keyof F>(this: void, key: K, value: F[K]['value']) => void) | undefined;
@@ -8,4 +9,6 @@ export type MantineForm<F extends Fields> = {
     onFieldBlur: ((this: void, key: keyof F) => void) | undefined;
     onFieldSubmit: ((this: void, key: keyof F) => boolean | void) | undefined;
 };
-export type MantineFieldComponent<T, P = T> = UnsafePartialComponent<ComponentType<P>, T>;
+export type MantineFieldComponent<T, P = T, E = any> = UnsafePartialComponent<ComponentType<P>, T, {
+    ErrorRenderer?: ErrorRenderer<E>;
+}>;