react-better-html 1.1.17 → 1.1.19

package/dist/index.d.ts

@@ -11,8 +11,9 @@ import Chip from "./components/Chip";
 import InputField from "./components/InputField";
 import Dropdown, { type DropdownOption } from "./components/Dropdown";
 import ToggleInput from "./components/ToggleInput";
+import Form from "./components/Form";
 import BetterHtmlProvider, { useBetterHtmlContext, useTheme, useLoader, useLoaderControls } from "./components/BetterHtmlProvider";
-import { usePageResize, useMediaQuery, useBooleanState, useDebounceState } from "./utils/hooks";
+import { usePageResize, useMediaQuery, useBooleanState, useDebounceState, useForm } from "./utils/hooks";
 import { type OmitProps, type ExcludeOptions, type PickValue, type PartialRecord, type DeepPartialRecord, type PickAllRequired } from "./types/app";
 import { type AppConfig, type BetterHtmlConfig } from "./types/config";
 import { type AssetName, type AssetsConfig } from "./types/asset";
@@ -20,4 +21,4 @@ import { type IconName, type IconsConfig } from "./types/icon";
 import { type LoaderName, type LoaderConfig } from "./types/loader";
 import { type Color, type ColorName, type ColorTheme, type Colors, type Styles, type Theme, type ThemeConfig } from "./types/theme";
 import { isMobileDevice } from "./constants";
-export { BetterHtmlProvider, Div, Text, Loader, Icon, Image, Button, Divider, Modal, ModalRef, PageHolder, Chip, InputField, Dropdown, DropdownOption, ToggleInput, useBetterHtmlContext, useTheme, useLoader, useLoaderControls, usePageResize, useMediaQuery, useBooleanState, useDebounceState, OmitProps, ExcludeOptions, PickValue, PartialRecord, DeepPartialRecord, PickAllRequired, AppConfig, BetterHtmlConfig, AssetName, AssetsConfig, IconName, IconsConfig, LoaderName, LoaderConfig, Color, ColorName, ColorTheme, Colors, Styles, Theme, ThemeConfig, isMobileDevice, };
+export { BetterHtmlProvider, Div, Text, Loader, Icon, Image, Button, Divider, Modal, ModalRef, PageHolder, Chip, InputField, Dropdown, DropdownOption, ToggleInput, Form, useBetterHtmlContext, useTheme, useLoader, useLoaderControls, usePageResize, useMediaQuery, useBooleanState, useDebounceState, useForm, OmitProps, ExcludeOptions, PickValue, PartialRecord, DeepPartialRecord, PickAllRequired, AppConfig, BetterHtmlConfig, AssetName, AssetsConfig, IconName, IconsConfig, LoaderName, LoaderConfig, Color, ColorName, ColorTheme, Colors, Styles, Theme, ThemeConfig, isMobileDevice, };

package/dist/index.js

@@ -36,7 +36,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isMobileDevice = exports.useDebounceState = exports.useBooleanState = exports.useMediaQuery = exports.usePageResize = exports.useLoaderControls = exports.useLoader = exports.useTheme = exports.useBetterHtmlContext = exports.ToggleInput = exports.Dropdown = exports.InputField = exports.Chip = exports.PageHolder = exports.Modal = exports.Divider = exports.Button = exports.Image = exports.Icon = exports.Loader = exports.Text = exports.Div = exports.BetterHtmlProvider = void 0;
+exports.isMobileDevice = exports.useForm = exports.useDebounceState = exports.useBooleanState = exports.useMediaQuery = exports.usePageResize = exports.useLoaderControls = exports.useLoader = exports.useTheme = exports.useBetterHtmlContext = exports.Form = exports.ToggleInput = exports.Dropdown = exports.InputField = exports.Chip = exports.PageHolder = exports.Modal = exports.Divider = exports.Button = exports.Image = exports.Icon = exports.Loader = exports.Text = exports.Div = exports.BetterHtmlProvider = void 0;
 const Div_1 = __importDefault(require("./components/Div"));
 exports.Div = Div_1.default;
 const Text_1 = __importDefault(require("./components/Text"));
@@ -63,6 +63,8 @@ const Dropdown_1 = __importDefault(require("./components/Dropdown"));
 exports.Dropdown = Dropdown_1.default;
 const ToggleInput_1 = __importDefault(require("./components/ToggleInput"));
 exports.ToggleInput = ToggleInput_1.default;
+const Form_1 = __importDefault(require("./components/Form"));
+exports.Form = Form_1.default;
 const BetterHtmlProvider_1 = __importStar(require("./components/BetterHtmlProvider"));
 exports.BetterHtmlProvider = BetterHtmlProvider_1.default;
 Object.defineProperty(exports, "useBetterHtmlContext", { enumerable: true, get: function () { return BetterHtmlProvider_1.useBetterHtmlContext; } });
@@ -74,5 +76,6 @@ Object.defineProperty(exports, "usePageResize", { enumerable: true, get: functio
 Object.defineProperty(exports, "useMediaQuery", { enumerable: true, get: function () { return hooks_1.useMediaQuery; } });
 Object.defineProperty(exports, "useBooleanState", { enumerable: true, get: function () { return hooks_1.useBooleanState; } });
 Object.defineProperty(exports, "useDebounceState", { enumerable: true, get: function () { return hooks_1.useDebounceState; } });
+Object.defineProperty(exports, "useForm", { enumerable: true, get: function () { return hooks_1.useForm; } });
 const constants_1 = require("./constants");
 Object.defineProperty(exports, "isMobileDevice", { enumerable: true, get: function () { return constants_1.isMobileDevice; } });

package/dist/utils/hooks.d.ts

@@ -1,5 +1,8 @@
-import { ComponentHoverStyle, ComponentStyle } from "../types/components";
+import { ComponentHoverStyle, ComponentPropWithRef, ComponentStyle } from "../types/components";
 import { Theme } from "../types/theme";
+import { OmitProps, PartialRecord } from "../types/app";
+import { InputFieldProps } from "../components/InputField";
+import { DropdownProps } from "../components/Dropdown";
 export declare function useStyledComponentStyles(props: ComponentStyle & ComponentHoverStyle, theme?: Theme, 
 /** @default false */
 excludeProps?: boolean): {
@@ -39,3 +42,18 @@ export declare function useBooleanState(initialValue?: boolean): [
     }
 ];
 export declare function useDebounceState<Value>(initialValue: Value, delay?: number): [value: Value, debouncedValue: Value, setValue: React.Dispatch<React.SetStateAction<Value>>, isLoading: boolean];
+export declare function useForm<FormFields extends Record<string, string | number | boolean | undefined>>({ defaultValues, onSubmit, validate, }: {
+    defaultValues: FormFields;
+    onSubmit?: (values: FormFields) => void | Promise<void>;
+    validate?: (values: FormFields) => PartialRecord<keyof FormFields, string>;
+}): {
+    values: FormFields;
+    errors: Partial<Record<keyof FormFields, string>>;
+    isSubmitting: boolean;
+    setFieldValue: <FieldName extends keyof FormFields>(field: FieldName, value: FormFields[FieldName] | undefined) => void;
+    getInputFieldProps: <FieldName extends keyof FormFields>(field: FieldName) => ComponentPropWithRef<HTMLInputElement, InputFieldProps>;
+    getDropdownFieldProps: <FieldName extends keyof FormFields>(field: FieldName) => OmitProps<ComponentPropWithRef<HTMLDivElement, DropdownProps<FormFields[FieldName], unknown>>, "options">;
+    focusField: (field: keyof FormFields) => void;
+    onSubmit: (event: React.FormEvent<HTMLFormElement>) => Promise<void>;
+    reset: () => void;
+};

package/dist/utils/hooks.js

@@ -8,12 +8,9 @@ exports.usePageResize = usePageResize;
 exports.useMediaQuery = useMediaQuery;
 exports.useBooleanState = useBooleanState;
 exports.useDebounceState = useDebounceState;
+exports.useForm = useForm;
 const react_1 = require("react");
-const cssProps = Object.keys(document.documentElement.style).reduce((previousValue, currentValue) => {
-    previousValue[currentValue.toLowerCase()] = true;
-    previousValue[`${currentValue}Hover`.toLowerCase()] = true;
-    return previousValue;
-}, {});
+const css_1 = require("../constants/css");
 const cssPropsToExclude = [
     "position",
     "top",
@@ -56,7 +53,7 @@ excludeProps) {
                 hoverStyle[normalKey] = props[key];
             }
             else {
-                if (!cssProps[key.toLowerCase()])
+                if (!css_1.cssProps[key.toLowerCase()])
                     continue;
                 normalStyle[key] = props[key];
             }
@@ -91,7 +88,7 @@ function useComponentPropsWithExcludedStyle(props) {
 }
 function useComponentPropsWithoutStyle(props) {
     return (0, react_1.useMemo)(() => Object.keys(props).reduce((previousValue, currentValue) => {
-        if (!cssProps[currentValue.toLowerCase()])
+        if (!css_1.cssProps[currentValue.toLowerCase()])
             previousValue[currentValue] = props[currentValue];
         return previousValue;
     }, {}), [props]);
@@ -156,3 +153,85 @@ function useDebounceState(initialValue, delay = 0.5) {
     }, [value, delay]);
     return [value, debouncedValue, setValue, isLoading];
 }
+function useForm({ defaultValues, onSubmit, validate, }) {
+    const inputFieldRefs = (0, react_1.useRef)({});
+    const [inputTypes, setInputTypes] = (0, react_1.useState)({});
+    const [values, setValues] = (0, react_1.useState)(defaultValues);
+    const [errors, setErrors] = (0, react_1.useState)({});
+    const [isSubmitting, setIsSubmitting] = useBooleanState();
+    const setFieldValue = (0, react_1.useCallback)((field, value) => {
+        setValues((oldValue) => ({
+            ...oldValue,
+            [field]: value,
+        }));
+        setErrors((oldValue) => ({
+            ...oldValue,
+            [field]: undefined,
+        }));
+    }, []);
+    const getInputFieldProps = (0, react_1.useCallback)((field) => {
+        const type = inputTypes[field] ?? "text";
+        return {
+            value: values[field]?.toString() ?? "",
+            onChangeValue: (newValue) => {
+                const readyValue = type === "number" ? (newValue ? Number(newValue) : undefined) : newValue;
+                setFieldValue(field, readyValue);
+            },
+            ref: (element) => {
+                if (!element)
+                    return;
+                inputFieldRefs.current[field] = element;
+                if (inputTypes[field] === undefined)
+                    setInputTypes((oldValue) => ({
+                        ...oldValue,
+                        [field]: element.getAttribute("type"),
+                    }));
+            },
+        };
+    }, [values, setFieldValue, inputTypes]);
+    const getDropdownFieldProps = (0, react_1.useCallback)((field) => {
+        return {
+            value: values[field],
+            onChange: (value) => {
+                setFieldValue(field, value);
+            },
+            errorText: errors[field],
+        };
+    }, [values, errors, setFieldValue]);
+    const focusField = (0, react_1.useCallback)((field) => {
+        inputFieldRefs.current[field]?.focus();
+    }, []);
+    const onSubmitFunction = (0, react_1.useCallback)(async (event) => {
+        event.preventDefault();
+        setIsSubmitting.setTrue();
+        try {
+            const validationErrors = validate?.(values) || {};
+            setErrors(validationErrors);
+            if (Object.keys(validationErrors).length === 0) {
+                await onSubmit?.(values);
+            }
+            else {
+                const firstErrorField = Object.keys(validationErrors)[0];
+                focusField(firstErrorField);
+            }
+        }
+        finally {
+            setIsSubmitting.setFalse();
+        }
+    }, [values, validate, onSubmit, focusField]);
+    const reset = (0, react_1.useCallback)(() => {
+        setValues(defaultValues);
+        setErrors({});
+    }, [defaultValues]);
+    return {
+        values,
+        errors,
+        isSubmitting,
+        setFieldValue,
+        getInputFieldProps,
+        getDropdownFieldProps,
+        focusField,
+        onSubmit: onSubmitFunction,
+        reset,
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "react-better-html",
-   "version": "1.1.17",
+   "version": "1.1.19",
    "description": "A component library for react that is as close to plane html as possible",
    "main": "dist/index.js",
    "files": [