@ainias42/react-bootstrap-mobile 1.0.1 → 1.0.2

package/src/Components/FormElements/Controller/FileInputController.tsx

@@ -1,23 +1,29 @@
-import { FileInput, FileInputProps } from "../Input/FileInput/FileInput";
-import React, { useCallback } from "react";
-import { FieldPath, FieldValues, useController, useFormContext, useFormState } from "react-hook-form";
-import { FileType } from "../Input/FileInput/FileType";
-import { withMemo } from "../../../helper/withMemo";
-
+import { FileInput } from '@/Components/FormElements/Input/FileInput/FileInput';
+import { useController, useFormContext, useFormState } from 'react-hook-form';
+import { withMemo } from '@/helper/withMemo';
+import React, { useCallback } from 'react';
+import type { FieldPath, FieldValues } from 'react-hook-form';
+import type { FileInputProps } from '@/Components/FormElements/Input/FileInput/FileInput';
+import type { FileType } from '@/Components/FormElements/Input/FileInput/FileType';
 
 type Props<Values extends FieldValues, Name extends FieldPath<Values> = FieldPath<Values>> = Omit<
     FileInputProps<unknown>,
-    'name' | 'onBlur' | 'ref' | 'value' | "__allowChildren" | "children"|"onChangeFile"|"error"
+    'name' | 'onBlur' | 'ref' | 'value' | '__allowChildren' | 'children' | 'onChangeFile' | 'error'
 > & { name: Name };
 
-export const FileInputController = withMemo(function FileInputController<Values extends FieldValues, Name extends FieldPath<Values> = FieldPath<Values>>(
-    {name, ...otherProps}: Props<Values, Name>,
-) {
-    const {field, fieldState} = useController({name});
-    const {errors} = useFormState();
+export const FileInputController = withMemo(function FileInputController<
+    Values extends FieldValues,
+    Name extends FieldPath<Values> = FieldPath<Values>,
+>({ name, ...otherProps }: Props<Values, Name>) {
+    const { field, fieldState } = useController({ name });
+    const { errors } = useFormState();
 
-    const {clearErrors, setError} = useFormContext();
-    const errorMessage = fieldState.error?.message ?? errors[`${name}.src`]?.message as string|undefined ?? errors[`${name}.name`]?.message as string|undefined ?? errors[`${name}.type`]?.message as string|undefined;
+    const { clearErrors, setError } = useFormContext();
+    const errorMessage =
+        fieldState.error?.message ??
+        (errors[`${name}.src`]?.message as string | undefined) ??
+        (errors[`${name}.name`]?.message as string | undefined) ??
+        (errors[`${name}.type`]?.message as string | undefined);
 
     const internalOnChange = useCallback(
         (arg: FileType | undefined) => {
@@ -27,14 +33,17 @@ export const FileInputController = withMemo(function FileInputController<Values
             clearErrors(`${name}.type`);
             field.onChange(arg);
         },
-        [clearErrors, field, name]
+        [clearErrors, field, name],
     );
 
-    const setErrorMessage = useCallback((error: string) => {
-        setError(name, {
-            message: error,
-        });
-    }, [name, setError]);
+    const setErrorMessage = useCallback(
+        (error: string) => {
+            setError(name, {
+                message: error,
+            });
+        },
+        [name, setError],
+    );
 
     return (
         <FileInput

package/src/Components/FormElements/Controller/HookForm.tsx

@@ -1,43 +1,147 @@
-import React, { useCallback } from 'react';
-import { FormProvider, FormProviderProps } from "react-hook-form";
-import { withMemo } from "../../../helper/withMemo";
-import { LoadingArea } from "../../LoadingArea/LoadingArea";
-import { SendFormContext } from "./SendFormContext";
+import { FormError } from '@/Components/FormElements/Error/FormError';
+import { FormProvider } from 'react-hook-form';
+import { LoadingArea } from '@/Components/LoadingArea/LoadingArea';
+import { SendFormContext } from '@/Components/FormElements/Controller/SendFormContext';
+import { withMemo } from '@/helper/withMemo';
+import React, { useCallback, useEffect } from 'react';
+import type { Awaitable } from '@ainias42/js-helper';
+import type { FieldPath, FormProviderProps, Path } from 'react-hook-form';
 
 type FieldValues = Record<string, any>;
-export type HookFormProps<TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues extends FieldValues | undefined = undefined> =
-    FormProviderProps<TFieldValues, TContext, TTransformedValues>
-    & {
-    onSend?: () => void;
+export type HookFormProps<
+    TFieldValues extends FieldValues = FieldValues,
+    TContext = any,
+    TTransformedValues extends FieldValues | undefined = undefined,
+> = FormProviderProps<TFieldValues, TContext, TTransformedValues> & {
+    onSave?: (partialNewData: Partial<TFieldValues>, newData: TFieldValues) => Awaitable<void>;
+    handleErrors?: (error: unknown) => [string, { message: string }][];
+    onUnhandledError?: (error: unknown) => void;
+    isSaveOnChange?: boolean;
+    saveFullData?: boolean;
 };
 
-export const HookForm = withMemo(function HookForm<TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues extends FieldValues | undefined = undefined>({
-                                                                                                                                                                                       children,
-                                                                                                                                                                                       onSend,
-                                                                                                                                                                                       ...methods
-                                                                                                                                                                                   }: HookFormProps<TFieldValues, TContext, TTransformedValues>) {
+export const HookForm = withMemo(function HookForm<
+    TFieldValues extends FieldValues = FieldValues,
+    TContext = any,
+    TTransformedValues extends FieldValues | undefined = undefined,
+>({
+    children,
+    isSaveOnChange = false,
+    onSave,
+    saveFullData = false,
+    watch,
+    getValues,
+    setError,
+    trigger,
+    handleErrors,
+    onUnhandledError,
+    ...methods
+}: HookFormProps<TFieldValues, TContext, TTransformedValues>) {
     // Refs
 
     // States/Variables/Selectors
-
-    // Create an inner, as the onSend may have other attributes
-    const innerOnSend = useCallback(() => onSend?.(), [onSend]);
+    const [unhanldedError, setUnhandledError] = React.useState<string | undefined>(undefined);
 
     // Dispatch
 
     // Callbacks
+    const handleUnhandledError = useCallback(
+        (error: unknown) => {
+            if (onUnhandledError) {
+                onUnhandledError(error);
+            } else if (typeof error === 'string') {
+                setUnhandledError(error);
+            } else {
+                setUnhandledError(String(error));
+            }
+        },
+        [onUnhandledError],
+    );
+
+    const handleError = useCallback(
+        (error: unknown) => {
+            const errors = handleErrors?.(error);
+            if (!errors) {
+                handleUnhandledError(error);
+                return;
+            }
+
+            const unhandledErrors: string[] = [];
+            const formFields = getValues();
+            for (const [key, errorMessage] of errors) {
+                const keyParts = key.split('.');
+                const lastKey = keyParts.at(-1);
+                setError(lastKey as FieldPath<TFieldValues>, errorMessage);
+                if (lastKey && !(lastKey in formFields)) {
+                    unhandledErrors.push(`${lastKey}: ${errorMessage.message}`);
+                }
+            }
+
+            if (unhandledErrors.length) {
+                handleUnhandledError(unhandledErrors.join('\n'));
+            }
+        },
+        [getValues, handleErrors, handleUnhandledError, setError],
+    );
+
+    const checkDataAndSave = useCallback(
+        async (data: TFieldValues, name: Path<TFieldValues> | undefined, forceFullSave = false, throwError = false) => {
+            setUnhandledError(undefined);
+            const shouldSaveFullData = forceFullSave || saveFullData;
+            if (!(await trigger(shouldSaveFullData ? undefined : name))) {
+                return;
+            }
+
+            try {
+                if (!shouldSaveFullData) {
+                    if (name) {
+                        const firstPart = name.split('.')[0];
+                        await onSave?.({ [firstPart]: data[firstPart] } as TFieldValues, data);
+                    }
+                } else {
+                    await onSave?.(data, data);
+                }
+            } catch (error) {
+                handleError(error);
+                if (throwError) {
+                    throw error;
+                }
+            }
+        },
+        [handleError, onSave, saveFullData, trigger],
+    );
+
+    const innerOnSend = useCallback(
+        () => checkDataAndSave(getValues(), undefined, true, true),
+        [checkDataAndSave, getValues],
+    );
 
     // Effects
+    useEffect(() => {
+        if (!isSaveOnChange) {
+            return undefined;
+        }
+
+        const { unsubscribe } = watch((data, info) => {
+            if (info.type === 'change') {
+                checkDataAndSave(data as TFieldValues, info.name);
+            }
+        });
+        return unsubscribe;
+    }, [watch, checkDataAndSave, isSaveOnChange]);
 
     // Other
 
     // RenderFunctions
 
-    return <FormProvider {...methods}>
-        <SendFormContext.Provider value={innerOnSend}>
-            <LoadingArea loading={methods.formState.isSubmitting} __allowChildren="all">
-                {children}
-            </LoadingArea>
-        </SendFormContext.Provider>
-    </FormProvider>;
+    return (
+        <FormProvider {...methods} watch={watch} trigger={trigger} getValues={getValues} setError={setError}>
+            <SendFormContext.Provider value={innerOnSend}>
+                <LoadingArea loading={methods.formState.isSubmitting} __allowChildren="all">
+                    {children}
+                    <FormError error={unhanldedError} />
+                </LoadingArea>
+            </SendFormContext.Provider>
+        </FormProvider>
+    );
 });

package/src/Components/FormElements/Controller/InputController.ts

@@ -1,4 +1,4 @@
-import { Input } from "../Input/Input";
-import { withHookController } from "./withHookController";
+import { Input } from '@/Components/FormElements/Input/Input';
+import { withHookController } from '@/Components/FormElements/Controller/withHookController';
 
-export const InputController = withHookController(Input, "onChangeText");
+export const InputController = withHookController(Input, 'onChangeText');

package/src/Components/FormElements/Controller/MultipleFileInputController.ts

@@ -1,5 +1,4 @@
-import { MultipleFileInput } from "../Input/FileInput/MultipleFileInput";
-import { withHookController } from "./withHookController";
+import { MultipleFileInput } from '@/Components/FormElements/Input/FileInput/MultipleFileInput';
+import { withHookController } from '@/Components/FormElements/Controller/withHookController';
 
-// TODO Error handling(?)
 export const MultipleFileInputController = withHookController(MultipleFileInput, 'onChangeFiles');

package/src/Components/FormElements/Controller/PasswordInputController.ts

@@ -1,4 +1,4 @@
-import { withHookController } from "./withHookController";
-import { PasswordInput } from "../Input/PasswordInput/PasswordInput";
+import { PasswordInput } from '@/Components/FormElements/Input/PasswordInput/PasswordInput';
+import { withHookController } from '@/Components/FormElements/Controller/withHookController';
 
-export const PasswordInputController = withHookController(PasswordInput, "onChangeText");
+export const PasswordInputController = withHookController(PasswordInput, 'onChangeText');

package/src/Components/FormElements/Controller/SelectController.ts

@@ -1,4 +1,4 @@
-import { withHookController } from "./withHookController";
-import { Select } from "../Select/Select";
+import { Select } from '@/Components/FormElements/Select/Select';
+import { withHookController } from '@/Components/FormElements/Controller/withHookController';
 
-export const SelectController = withHookController(Select, "onChangeValue");
+export const SelectController = withHookController(Select, 'onChangeValue');

package/src/Components/FormElements/Controller/SendFormContext.ts

@@ -1,7 +1,7 @@
-import { createContext, useContext } from "react";
+import { createContext, useContext } from 'react';
 
-export const SendFormContext = createContext<(() => void)|undefined>(undefined);
+export const SendFormContext = createContext<(() => void) | undefined>(undefined);
 
-export function useSendFormContext(){
+export function useSendFormContext() {
     return useContext(SendFormContext);
 }

package/src/Components/FormElements/Controller/SliderController.ts

@@ -0,0 +1,4 @@
+import { Slider } from '@/Components/FormElements/Slider/Slider';
+import { withHookController } from '@/Components/FormElements/Controller/withHookController';
+
+export const SliderController = withHookController(Slider, 'onChangeValue');

package/src/Components/FormElements/Controller/SwitchController.ts

@@ -1,4 +1,4 @@
-import { Switch } from "../Switch/Switch";
-import { withHookController } from "./withHookController";
+import { Switch } from '@/Components/FormElements/Switch/Switch';
+import { withHookController } from '@/Components/FormElements/Controller/withHookController';
 
-export const SwitchController = withHookController(Switch, "onChangeChecked");
+export const SwitchController = withHookController(Switch, 'onChangeChecked');

package/src/Components/FormElements/Controller/TextareaController.ts

@@ -1,4 +1,4 @@
-import { withHookController } from "./withHookController";
-import { Textarea } from "../Textarea/Textarea";
+import { Textarea } from '@/Components/FormElements/Textarea/Textarea';
+import { withHookController } from '@/Components/FormElements/Controller/withHookController';
 
 export const TextareaController = withHookController(Textarea, 'onChangeText');

package/src/Components/FormElements/Controller/useYupResolver.ts

@@ -1,9 +1,11 @@
 import { useCallback } from 'react';
-import { AnyObject, InferType, Maybe, ObjectSchema, ValidationError } from 'yup';
+import type { AnyObject, InferType, Maybe, ObjectSchema, ValidationError } from 'yup';
 
 // TODO set translate function from somewhere else
-export function useYupResolver<ObjectType extends Maybe<AnyObject>>(validationSchema: ObjectSchema<ObjectType>, translate: (key: string, args?: Record<string, string | number>) => string) {
-
+export function useYupResolver<ObjectType extends Maybe<AnyObject>>(
+    validationSchema: ObjectSchema<ObjectType>,
+    translate: (key: string, args?: Record<string, string | number>) => string,
+) {
     return useCallback(
         async (data: InferType<ObjectSchema<ObjectType>>) => {
             try {
@@ -15,8 +17,8 @@ export function useYupResolver<ObjectType extends Maybe<AnyObject>>(validationSc
                     values,
                     errors: {},
                 };
-            } catch (errors) {
-                const reducedErrors = (errors.inner as ValidationError[]).reduce(
+            } catch (error) {
+                const reducedErrors = (error as { inner: ValidationError[] }).inner.reduce(
                     (allErrors, currentError) => {
                         if (currentError.path === undefined) {
                             return allErrors;
@@ -25,9 +27,9 @@ export function useYupResolver<ObjectType extends Maybe<AnyObject>>(validationSc
                         let message = currentError.message as
                             | string
                             | {
-                            key: string;
-                            args?: Record<string, string | number>;
-                        };
+                                  key: string;
+                                  args?: Record<string, string | number>;
+                              };
                         if (typeof message === 'object') {
                             message = translate(message.key, message.args);
                         } else {

package/src/Components/FormElements/Controller/withHookController.tsx

@@ -1,14 +1,15 @@
-import React, {
-    ComponentProps,
-    ComponentRef,
-    ComponentType, ForwardedRef,
-    useCallback
-} from "react";
-import { FieldPath, FieldValues, useController, useFormContext } from "react-hook-form";
-import { useComposedRef } from "../../Hooks/useComposedRef";
-import { withMemo } from "../../../helper/withMemo";
+import { useComposedRef } from '@/Components/Hooks/useComposedRef';
+import { useController, useFormContext } from 'react-hook-form';
+import { withMemo } from '@/helper/withMemo';
+import React, { useCallback } from 'react';
+import type { ComponentProps, ComponentRef, ComponentType, ForwardedRef } from 'react';
+import type { FieldPath, FieldValues } from 'react-hook-form';
 
-export function withHookController<C extends ComponentType<any>, OnChangeProp extends keyof ComponentProps<C>>(Comp: C, onChangeProp: OnChangeProp, emptyValue: any = null) {
+export function withHookController<C extends ComponentType<any>, OnChangeProp extends keyof ComponentProps<C>>(
+    Comp: C,
+    onChangeProp: OnChangeProp,
+    emptyValue: any = null,
+) {
     type RefType = ComponentRef<C>;
     type OldProps = ComponentProps<C>;
 
@@ -17,13 +18,15 @@ export function withHookController<C extends ComponentType<any>, OnChangeProp ex
         'name' | 'onBlur' | OnChangeProp | 'value'
     > & { name: Name };
 
-    function WithHookComponent<Values extends FieldValues, Name extends FieldPath<Values> = FieldPath<Values>>(
-        {name, ref, ...otherProps}: Props<Values, Name> & {ref?: ForwardedRef<RefType>},
-    ) {
-        const children = "children" in otherProps ? otherProps.children : undefined;
+    function WithHookComponent<Values extends FieldValues, Name extends FieldPath<Values> = FieldPath<Values>>({
+        name,
+        ref,
+        ...otherProps
+    }: Props<Values, Name> & { ref?: ForwardedRef<RefType> }) {
+        const children = 'children' in otherProps ? otherProps.children : undefined;
 
-        const {field, fieldState} = useController({name});
-        const {clearErrors} = useFormContext();
+        const { field, fieldState } = useController({ name });
+        const { clearErrors } = useFormContext();
         const composedRef = useComposedRef(ref, field.ref);
         const errorMessage = fieldState.error?.message;
 
@@ -32,10 +35,10 @@ export function withHookController<C extends ComponentType<any>, OnChangeProp ex
                 clearErrors(name);
                 field.onChange(arg);
             },
-            [clearErrors, field, name]
+            [clearErrors, field, name],
         );
         const onChangeProps = {
-            [onChangeProp]: internalOnChange
+            [onChangeProp]: internalOnChange,
         };
 
         return (

package/src/Components/FormElements/Error/FormError.stories.tsx

@@ -0,0 +1,16 @@
+import { FormError } from '@/Components/FormElements/Error/FormError';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+const meta = {
+    component: FormError,
+} satisfies Meta<typeof FormError>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        error: 'Wrong Value',
+    },
+};

package/src/Components/FormElements/Error/FormError.tsx

@@ -0,0 +1,42 @@
+import { Block } from '@/Components/Layout/Block';
+import { InlineBlock } from '@/Components/Layout/InlineBlock';
+import { TEXT_SIZE, Text } from '@/Components/Text/Text';
+import { withMemo } from '@/helper/withMemo';
+import React from 'react';
+import styles from '@/Components/FormElements/Error/formError.module.scss';
+
+export type FormErrorProps = { error?: string; inline?: boolean };
+
+export const FormError = withMemo(function FormError({ error, inline }: FormErrorProps) {
+    // Refs
+
+    // States/Variables/Selectors
+
+    // Dispatch
+
+    // Callbacks
+
+    // Effects
+
+    // Other
+
+    // RenderFunctions
+
+    if (!error) {
+        return null;
+    }
+
+    if (inline) {
+        return (
+            <InlineBlock className={styles.error}>
+                <Text size={TEXT_SIZE.small}>{error}</Text>
+            </InlineBlock>
+        );
+    }
+
+    return (
+        <Block className={styles.error}>
+            <Text size={TEXT_SIZE.small}>{error}</Text>
+        </Block>
+    );
+});

package/src/Components/FormElements/Error/formError.module.scss

@@ -0,0 +1,9 @@
+@use "../../../scss/vars" as *;
+
+@include vars {
+  --error-text-color: var(--flavor-destructive)
+}
+
+.error {
+  --text-primary-default-color: var(--error-text-color)
+}

package/src/Components/FormElements/Form.stories.tsx

@@ -0,0 +1,16 @@
+import { FormError } from '@/Components/FormElements/Error/FormError';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+const meta = {
+    component: FormError,
+} satisfies Meta<typeof FormError>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        error: 'Wrong Value',
+    },
+};

package/src/Components/FormElements/Input/FileInput/FileInput.tsx

@@ -1,55 +1,75 @@
 import * as React from 'react';
-import { RbmComponentProps } from '../../../RbmComponentProps';
-import { Override } from '../../../../TypeHelpers';
+import { MultipleFileInput } from '@/Components/FormElements/Input/FileInput/MultipleFileInput';
 import { useCallback, useMemo } from 'react';
-import { Listener, useListenerWithExtractedProps } from '../../../Hooks/useListener';
-import styles from './fileInput.scss';
-import { withMemo } from '../../../../helper/withMemo';
-import { FileType } from "./FileType";
-import { MultipleFileInput, MultipleFileInputProps } from "./MultipleFileInput";
-
+import { useListenerWithExtractedProps } from '@/Components/Hooks/useListener';
+import { withMemo } from '@/helper/withMemo';
+import type { FileType } from '@/Components/FormElements/Input/FileInput/FileType';
+import type { Listener } from '@/Components/Hooks/useListener';
+import type { MultipleFileInputProps } from '@/Components/FormElements/Input/FileInput/MultipleFileInput';
+import type { Override } from '@/TypeHelpers';
+import type { RbmComponentProps } from '@/Components/RbmComponentProps';
 
 export type FileInputProps<OnChangeFileData> = RbmComponentProps<
     Override<
-        Omit<MultipleFileInputProps<unknown>, "onChangeFiles" | "maxFiles" | "onChangeFilesData" | "mimeTypes" | "showDeleteButton">, {
-        value?: FileType,
-        mimeType?: string | string[],
-        required?: boolean,
-        "data-test-id"?: string;
-    } & Listener<'onChangeFile', OnChangeFileData, FileType | undefined>>
+        Omit<
+            MultipleFileInputProps<unknown>,
+            'onChangeFiles' | 'maxFiles' | 'onChangeFilesData' | 'mimeTypes' | 'showDeleteButton'
+        >,
+        {
+            value?: FileType;
+            mimeType?: string | string[];
+            required?: boolean;
+            'data-test-id'?: string;
+        } & Listener<'onChangeFile', OnChangeFileData, FileType | undefined>
+    >
 >;
 
 export const FileInput = withMemo(function FileInput<OnChangeData>({
-                                                                       value,
-                                                                       mimeType,
-                                                                       required = false,
-                                                                       ...otherProps
-                                                                   }: FileInputProps<OnChangeData>) {
+    value,
+    mimeType,
+    required = false,
+    ...otherProps
+}: FileInputProps<OnChangeData>) {
     // Variables
 
     // Refs
 
     // States
-    const mimeTypes = useMemo(() => (mimeType ? (Array.isArray(mimeType) ? mimeType : [mimeType]) : undefined), [mimeType]);
-    const innerValue = useMemo(() => value ? [value] : [], [value]);
+    const mimeTypes = useMemo(
+        () => (mimeType ? (Array.isArray(mimeType) ? mimeType : [mimeType]) : undefined),
+        [mimeType],
+    );
+    const innerValue = useMemo(() => (value ? [value] : []), [value]);
 
     // Selectors
 
     // Callbacks
-    const [onChangeFile, multipleFileInputProps] = useListenerWithExtractedProps<"onChangeFile", OnChangeData>("onChangeFile", otherProps);
-    const onChangeFiles = useCallback((files: FileType[]) => {
-        if (!required || files[0]) {
-            console.log("LOG-d onChangeFile", files[0]);
-            onChangeFile(files[0]);
-        }
-    }, [onChangeFile, required]);
+    const [onChangeFile, multipleFileInputProps] = useListenerWithExtractedProps<'onChangeFile', OnChangeData>(
+        'onChangeFile',
+        otherProps,
+    );
+    const onChangeFiles = useCallback(
+        (files: FileType[]) => {
+            if (!required || files[0]) {
+                onChangeFile(files[0]);
+            }
+        },
+        [onChangeFile, required],
+    );
 
     // Effects
 
     // Other
 
     //  Render Functions
-    return <MultipleFileInput maxFiles={1} value={innerValue} onChangeFiles={onChangeFiles}
-                              mimeTypes={mimeTypes} showDeleteButton={!required} {...multipleFileInputProps}/>;
-
-}, styles);
+    return (
+        <MultipleFileInput
+            maxFiles={1}
+            value={innerValue}
+            onChangeFiles={onChangeFiles}
+            mimeTypes={mimeTypes}
+            showDeleteButton={!required}
+            {...multipleFileInputProps}
+        />
+    );
+});