fix(inputs): add dynamic validation

morewings · Jul 16, 2024 · 113cdf0 · 113cdf0
1 parent a414be8
commit 113cdf0
Show file tree

Hide file tree

Showing 27 changed files with 219 additions and 53 deletions.
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -55,7 +55,7 @@ const preview: Preview = {
         },
         options: {
             storySort: {
-                order: ['Intro', 'Layout', 'Inputs', 'Typography', 'Components'],
+                order: ['Intro', 'Theme', 'Layout', 'Inputs', 'Typography', 'Components'],
             },
         },
         viewport: {viewports: customViewports},

diff --git a/src/internal/inputs/ValidationProps.ts b/src/internal/inputs/ValidationProps.ts
@@ -7,6 +7,12 @@ export enum ValidationState {
 }
 
 export type ValidationProps = {
+    /** Enable to re-run validation when any field in the form changes */
+    revalidateOnFormChange?: boolean;
+    /**
+     * Provide callback function to validate input.
+     * @see https://koval.support/inputs/input-validation
+     */
     validatorFn?: (
         value: unknown,
         validityState: ValidityState,

diff --git a/src/internal/inputs/index.ts b/src/internal/inputs/index.ts
@@ -16,3 +16,4 @@ export {
     validatorSyncBoolean,
 } from './validatorMocks.ts';
 export {useHandleFormReset} from './useHandleFormReset.ts';
+export {useRevalidateOnFormChange} from './useRevalidateOnFormChange.ts';
diff --git a/src/internal/inputs/useRevalidateOnFormChange.ts b/src/internal/inputs/useRevalidateOnFormChange.ts
@@ -0,0 +1,25 @@
+import type {MutableRefObject} from 'react';
+import {type FormEvent, useEffect} from 'react';
+
+const ChangeEvent = new Event('change', {bubbles: false});
+
+export const useRevalidateOnFormChange = (
+    inputRef: MutableRefObject<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement | null>,
+    validateInput: (event: FormEvent) => unknown,
+    condition?: boolean
+) => {
+    useEffect(() => {
+        if (condition) {
+            const inputElement = inputRef?.current;
+            const formElement = inputElement?.form;
+            const revalidateInput = () => {
+                inputElement && inputElement?.dispatchEvent(ChangeEvent);
+                inputElement && validateInput(ChangeEvent as unknown as FormEvent);
+            };
+            formElement && formElement.addEventListener('change', revalidateInput);
+            return () => {
+                formElement && formElement.removeEventListener('change', revalidateInput);
+            };
+        }
+    }, [inputRef, condition, validateInput]);
+};
diff --git a/src/lib/Form/Form.mdx b/src/lib/Form/Form.mdx
@@ -1,32 +1,26 @@
-import { Meta, ArgTypes, Story, Canvas, Source, Markdown } from "@storybook/blocks";
+import { Meta, ArgTypes, Story, Canvas, Source, Markdown, Primary } from "@storybook/blocks";
 import * as FormStories from "./Form.stories";
 import { Form } from "./Form";
 
-<Meta title="Inputs/Form" component={Form} />
+<Meta title="Inputs/Form" of={FormStories} />
 
 # Form
 
 Form wraps `HTMLFormElement` with some useful features.
 
-## Icon props
-
-<ArgTypes of={Form} />
-
-## Description
-
-`Icon` is an icon.
-
 ## Imports
 
-<Source format={true} code={`
-const a = 'b';
-import a from 'b';
-`} />
+<Markdown>{`
+\`\`\`ts
+import {Form} from 'koval-ui';
+\`\`\`
+`}</Markdown>
+
+## Form props
 
+<ArgTypes of={Form} />
 
-## Demo
 
-### Basic example
-<Canvas of={FormStories.Example} />
+<Primary />
 
 
diff --git a/src/lib/Form/Form.stories.tsx b/src/lib/Form/Form.stories.tsx
@@ -33,8 +33,6 @@ const meta = {
         onReset: fn(),
         onChange: fn(),
         onInvalid: fn(),
-        autoComplete: 'off',
-        autoCapitalize: 'off',
         noValidate: false,
     },
     argTypes: {
@@ -92,7 +90,7 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Example: Story = {
+export const Primary: Story = {
     args: {
         onSubmit: (event, state) => {
             event.preventDefault();
@@ -173,3 +171,45 @@ export const Example: Story = {
         ),
     },
 };
+
+export const ComplexValidation: Story = {
+    name: 'Complex validation',
+    args: {
+        onSubmit: (event, state) => {
+            event.preventDefault();
+            console.log('onSubmit', state);
+        },
+    },
+    render: args => {
+        const validatorFn = (
+            value: unknown,
+            _: unknown,
+            formState: Record<string, FormDataEntryValue>
+        ) => {
+            console.log('formState', formState);
+            if (formState['case-selector'] === 'lowercase') {
+                const isLowerCase = (value as string).toLowerCase() === value;
+                return isLowerCase ? '' : 'Only lower case allowed.';
+            } else if (formState['case-selector'] === 'uppercase') {
+                const isUpperCase = (value as string).toUpperCase() === value;
+                return isUpperCase ? '' : 'Only upper case allowed.';
+            }
+            return '';
+        };
+        return (
+            <Form {...args}>
+                <InputGroup name="case-selector">
+                    <InputRadio defaultChecked={true} label="Allow uppercase" value="uppercase" />
+                    <InputRadio label="Allow lowercase" value="lowercase" />
+                </InputGroup>
+                <InputText
+                    revalidateOnFormChange={true}
+                    validatorFn={validatorFn}
+                    name="text"
+                    placeholder="Validity changes according to user choise"
+                />
+                <Button type="submit">Submit</Button>
+            </Form>
+        );
+    },
+};
diff --git a/src/lib/InputCheckbox/InputCheckbox.stories.tsx b/src/lib/InputCheckbox/InputCheckbox.stories.tsx
@@ -91,6 +91,11 @@ const meta = {
                 disable: true,
             },
         },
+        revalidateOnFormChange: {
+            table: {
+                disable: true,
+            },
+        },
         validatorFn: {
             options: ['noValidator', 'syncValidator', 'asyncValidator'], // An array of serializable values
             mapping: {

diff --git a/src/lib/InputCheckbox/InputCheckbox.tsx b/src/lib/InputCheckbox/InputCheckbox.tsx
@@ -3,14 +3,20 @@ import {forwardRef, useCallback} from 'react';
 import classNames from 'classnames';
 
 import type {DataAttributes, LibraryProps} from '@/internal/LibraryAPI';
-import {ValidationState, defaultValidator, useValidation} from '@/internal/inputs';
+import {
+    ValidationState,
+    defaultValidator,
+    useValidation,
+    useRevalidateOnFormChange,
+} from '@/internal/inputs';
 import type {
     NativePropsInteractive,
     CallbackPropsInteractive,
     ValidationProps,
 } from '@/internal/inputs';
 import {IconError, IconLoader, IconValid} from '@/internal/Icons';
 import {useInternalId} from '@/internal/hooks/useInternalId.ts';
+import {useInternalRef} from '@/internal/hooks/useInternalRef.ts';
 
 import classes from './InputCheckbox.module.css';
 
@@ -39,12 +45,17 @@ export const InputCheckbox = forwardRef<HTMLInputElement, Props>(
             label,
             validatorFn = defaultValidator,
             required,
+            revalidateOnFormChange,
             ...nativeProps
         },
         ref
     ) => {
         const id = useInternalId(idProp);
         const {validateInteractive, validity, setValidity} = useValidation({validatorFn});
+
+        const inputRef = useInternalRef(ref);
+        useRevalidateOnFormChange(inputRef, validateInteractive, revalidateOnFormChange);
+
         const ValidationIcon = {
             [ValidationState.error]: IconError,
             [ValidationState.valid]: IconValid,

diff --git a/src/lib/InputDate/InputDate.stories.tsx b/src/lib/InputDate/InputDate.stories.tsx
@@ -92,6 +92,11 @@ const meta = {
                 disable: true,
             },
         },
+        revalidateOnFormChange: {
+            table: {
+                disable: true,
+            },
+        },
         validatorFn: {
             options: ['noValidator', 'syncValidator', 'asyncValidator'], // An array of serializable values
             mapping: {

diff --git a/src/lib/InputDate/InputDate.tsx b/src/lib/InputDate/InputDate.tsx
@@ -6,9 +6,11 @@ import classNames from 'classnames';
 import {IconError, IconValid, IconLoader, IconCalendar} from '@/internal/Icons';
 import type {DataAttributes, LibraryProps} from '@/internal/LibraryAPI';
 import type {NativePropsTextual, CallbackPropsTextual, ValidationProps} from '@/internal/inputs';
+import {useRevalidateOnFormChange} from '@/internal/inputs';
 import {defaultValidator} from '@/internal/inputs';
 import {ValidationState, useValidation} from '@/internal/inputs';
 import {useInternalId} from '@/internal/hooks/useInternalId.ts';
+import {useInternalRef} from '@/internal/hooks/useInternalRef.ts';
 
 import classes from './InputDate.module.css';
 
@@ -33,6 +35,7 @@ export const InputDate = forwardRef<HTMLInputElement, Props>(
             onKeyUp = () => {},
             defaultValue,
             validatorFn = defaultValidator,
+            revalidateOnFormChange,
             ...nativeProps
         },
         ref
@@ -46,6 +49,10 @@ export const InputDate = forwardRef<HTMLInputElement, Props>(
             [ValidationState.valid]: IconValid,
             [ValidationState.inProgress]: IconLoader,
         }[validity!];
+
+        const inputRef = useInternalRef(ref);
+        useRevalidateOnFormChange(inputRef, validateTextual, revalidateOnFormChange);
+
         const displayValue = (value ?? defaultValue) as string;
         const handleChange = useCallback(
             (event: ChangeEvent<HTMLInputElement>) => {

diff --git a/src/lib/InputGroup/InputGroup.tsx b/src/lib/InputGroup/InputGroup.tsx
@@ -10,7 +10,6 @@ import {
 import classNames from 'classnames';
 
 import type {LibraryProps, DataAttributes} from '@/internal/LibraryAPI';
-import type {ValidationState} from '@/internal/inputs';
 
 import classes from './InputGroup.module.css';
 
@@ -23,7 +22,6 @@ type ChildProps = {
 
 export type Props = DataAttributes &
     LibraryProps & {
-        validation?: keyof typeof ValidationState;
         label?: string;
         children: ReactElement<ChildProps & unknown>[];
         name: string;
@@ -37,21 +35,7 @@ export type Props = DataAttributes &
     };
 
 export const InputGroup = forwardRef<HTMLFieldSetElement, Props>(
-    (
-        {
-            className,
-            validation,
-            id,
-            label,
-            children,
-            name,
-            disabled,
-            hint,
-            required,
-            ...nativeProps
-        },
-        ref
-    ) => {
+    ({className, id, label, children, name, disabled, hint, required, ...nativeProps}, ref) => {
         const childrenWithProps = useMemo(() => {
             return Children.map(children, element => {
                 if (isValidElement(element)) {

diff --git a/src/lib/InputNumber/InputNumber.stories.tsx b/src/lib/InputNumber/InputNumber.stories.tsx
@@ -98,6 +98,11 @@ const meta = {
                 disable: true,
             },
         },
+        revalidateOnFormChange: {
+            table: {
+                disable: true,
+            },
+        },
         validatorFn: {
             options: ['noValidator', 'syncValidator', 'asyncValidator'], // An array of serializable values
             mapping: {

diff --git a/src/lib/InputNumber/InputNumber.tsx b/src/lib/InputNumber/InputNumber.tsx
@@ -7,6 +7,7 @@ import {useLocalTheme} from 'css-vars-hook';
 import {IconError, IconValid, IconLoader, IconArrowUp, IconArrowDown} from '@/internal/Icons';
 import type {DataAttributes, LibraryProps} from '@/internal/LibraryAPI';
 import type {NativePropsNumeric, CallbackPropsTextual, ValidationProps} from '@/internal/inputs';
+import {useRevalidateOnFormChange} from '@/internal/inputs';
 import {ValidationState, defaultValidator, useValidation} from '@/internal/inputs';
 import {useInternalRef} from '@/internal/hooks/useInternalRef.ts';
 
@@ -41,11 +42,16 @@ export const InputNumber = forwardRef<HTMLInputElement, Props>(
             validatorFn = defaultValidator,
             size = 10,
             step = 1,
+            revalidateOnFormChange,
             ...nativeProps
         },
         ref
     ) => {
         const {validateTextual, validity, setValidity} = useValidation({validatorFn});
+
+        const inputRef = useInternalRef(ref);
+        useRevalidateOnFormChange(inputRef, validateTextual, revalidateOnFormChange);
+
         const ValidationIcon = {
             [ValidationState.error]: IconError,
             [ValidationState.valid]: IconValid,
@@ -62,8 +68,6 @@ export const InputNumber = forwardRef<HTMLInputElement, Props>(
             setValidity(ValidationState.error);
         }, [setValidity]);
 
-        const inputRef = useInternalRef(ref);
-
         const handleDecrement = useCallback(() => {
             inputRef.current!.stepDown();
             inputRef.current!.dispatchEvent(ChangeEventSpinner);

diff --git a/src/lib/InputPassword/InputPassword.stories.tsx b/src/lib/InputPassword/InputPassword.stories.tsx
@@ -102,6 +102,11 @@ const meta = {
                 disable: true,
             },
         },
+        revalidateOnFormChange: {
+            table: {
+                disable: true,
+            },
+        },
         validatorFn: {
             options: ['noValidator', 'syncValidator', 'asyncValidator'], // An array of serializable values
             mapping: {

diff --git a/src/lib/InputPassword/InputPassword.tsx b/src/lib/InputPassword/InputPassword.tsx
@@ -7,8 +7,10 @@ import classNames from 'classnames';
 import {IconError, IconValid, IconLoader, IconLock, IconLockOpen} from '@/internal/Icons';
 import type {DataAttributes, LibraryProps} from '@/internal/LibraryAPI';
 import type {NativePropsTextual, CallbackPropsTextual, ValidationProps} from '@/internal/inputs';
+import {useRevalidateOnFormChange} from '@/internal/inputs';
 import {ValidationState, defaultValidator, useValidation} from '@/internal/inputs';
 import {useInternalId} from '@/internal/hooks/useInternalId.ts';
+import {useInternalRef} from '@/internal/hooks/useInternalRef.ts';
 
 import classes from './InputPassword.module.css';
 
@@ -40,11 +42,16 @@ export const InputPassword = forwardRef<HTMLInputElement, Props>(
             id,
             readOnly,
             size = 16,
+            revalidateOnFormChange,
             ...nativeProps
         },
         ref
     ) => {
         const {validateTextual, validity, setValidity} = useValidation({validatorFn});
+
+        const inputRef = useInternalRef(ref);
+        useRevalidateOnFormChange(inputRef, validateTextual, revalidateOnFormChange);
+
         const ValidationIcon = {
             [ValidationState.error]: IconError,
             [ValidationState.valid]: IconValid,

diff --git a/src/lib/InputRange/InputRange.stories.tsx b/src/lib/InputRange/InputRange.stories.tsx
@@ -86,6 +86,11 @@ const meta = {
                 disable: true,
             },
         },
+        revalidateOnFormChange: {
+            table: {
+                disable: true,
+            },
+        },
         validatorFn: {
             options: ['noValidator', 'syncValidator', 'asyncValidator'], // An array of serializable values
             mapping: {