react-better-html 1.1.71 → 1.1.73

package/dist/utils/hooks.js

@@ -1,450 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useStyledComponentStyles = useStyledComponentStyles;
-exports.useComponentPropsWithPrefix = useComponentPropsWithPrefix;
-exports.useComponentPropsWithExcludedStyle = useComponentPropsWithExcludedStyle;
-exports.useComponentPropsWithoutStyle = useComponentPropsWithoutStyle;
-exports.useComponentInputFieldDateProps = useComponentInputFieldDateProps;
-exports.usePageResize = usePageResize;
-exports.usePageScroll = usePageScroll;
-exports.useMediaQuery = useMediaQuery;
-exports.useBooleanState = useBooleanState;
-exports.useDebounceState = useDebounceState;
-exports.useForm = useForm;
-exports.useUrlQuery = useUrlQuery;
-const react_1 = require("react");
-const react_router_dom_1 = require("react-router-dom");
-const css_1 = require("../constants/css");
-const BetterHtmlProvider_1 = require("../components/BetterHtmlProvider");
-const cssPropsToExclude = [
-    "position",
-    "top",
-    "right",
-    "bottom",
-    "left",
-    "width",
-    "height",
-    "minWidth",
-    "minHeight",
-    "maxWidth",
-    "maxHeight",
-    "margin",
-    "marginTop",
-    "marginBottom",
-    "marginLeft",
-    "marginRight",
-    "marginBlock",
-    "marginInline",
-    "marginBlockStart",
-    "marginBlockEnd",
-    "marginInlineStart",
-    "marginInlineEnd",
-    "marginTrim",
-    "zIndex",
-];
-function useStyledComponentStyles(props, theme, 
-/** @default false */
-excludeProps) {
-    return (0, react_1.useMemo)(() => {
-        const normalStyle = {};
-        const hoverStyle = {};
-        let haveHover = false;
-        for (const key in props) {
-            if (excludeProps && cssPropsToExclude.includes(key))
-                continue;
-            if (key.endsWith("Hover")) {
-                haveHover = true;
-                const normalKey = key.slice(0, -5);
-                hoverStyle[normalKey] = props[key];
-            }
-            else {
-                if (!css_1.cssProps[key.toLowerCase()])
-                    continue;
-                normalStyle[key] = props[key];
-            }
-        }
-        if (haveHover)
-            normalStyle.transition = theme?.styles.transition ?? "";
-        return {
-            normalStyle,
-            hoverStyle,
-        };
-    }, [props, theme]);
-}
-function useComponentPropsWithPrefix(props, prefix) {
-    return (0, react_1.useMemo)(() => {
-        const returnValue = {};
-        for (const key in props) {
-            if (key.startsWith(`${prefix}-`)) {
-                returnValue[key] = props[key];
-            }
-        }
-        return returnValue;
-    }, [props, prefix]);
-}
-function useComponentPropsWithExcludedStyle(props) {
-    return (0, react_1.useMemo)(() => Object.keys(props).reduce((previousValue, currentValue) => {
-        const key = currentValue;
-        if (!cssPropsToExclude.includes(key))
-            return previousValue;
-        previousValue[key] = props[key];
-        return previousValue;
-    }, {}), [props]);
-}
-function useComponentPropsWithoutStyle(props) {
-    return (0, react_1.useMemo)(() => Object.keys(props).reduce((previousValue, currentValue) => {
-        if (!css_1.cssProps[currentValue.toLowerCase()])
-            previousValue[currentValue] = props[currentValue];
-        return previousValue;
-    }, {}), [props]);
-}
-function useComponentInputFieldDateProps(props, holderRef) {
-    const theme = (0, BetterHtmlProvider_1.useTheme)();
-    const [isOpen, setIsOpen] = useBooleanState();
-    const [isOpenLate, setIsOpenLate] = useBooleanState();
-    const [isFocused, setIsFocused] = useBooleanState();
-    const [internalValue, setInternalValue] = (0, react_1.useState)(props.value?.toString() ?? "");
-    const inputFieldProps = (0, react_1.useMemo)(() => ({
-        value: internalValue,
-        className: `${isOpen ? "react-better-html-inputField-dateTime-opened" : ""}${isOpenLate ? " react-better-html-inputField-dateTime-opened-late" : ""}${props.className ? ` ${props.className}` : ""}`,
-        onClick: (event) => {
-            if (props.disabled)
-                return;
-            setIsOpen.setTrue();
-            props.onClick?.(event);
-        },
-        onFocus: (event) => {
-            setIsFocused.setTrue();
-            props.onFocus?.(event);
-        },
-        onBlur: (event) => {
-            setIsFocused.setFalse();
-            props.onBlur?.(event);
-        },
-        onChangeValue: (value) => {
-            setInternalValue(value);
-            props.onChangeValue?.(value);
-        },
-    }), [props, internalValue, isOpen, isOpenLate]);
-    const insideInputFieldComponentProps = (0, react_1.useMemo)(() => ({
-        border: `1px solid ${isFocused ? theme.colors.primary : theme.colors.border}`,
-        borderTop: "none",
-        opacity: !isOpen ? 0 : undefined,
-        pointerEvents: !isOpen ? "none" : undefined,
-        transform: `translateY(${!isOpen ? -10 : 0}px)`,
-        zIndex: 1000,
-        transition: theme.styles.transition,
-    }), [isOpen, isFocused]);
-    (0, react_1.useEffect)(() => {
-        if (props.value === undefined || props.value === null)
-            return;
-        setInternalValue(props.value.toString());
-    }, [props.value]);
-    (0, react_1.useEffect)(() => {
-        if (isOpen) {
-            setIsOpenLate.setTrue();
-        }
-        else {
-            const timeout = setTimeout(setIsOpenLate.setFalse, 0.2 * 1000);
-            return () => {
-                clearTimeout(timeout);
-            };
-        }
-    }, [isOpen]);
-    (0, react_1.useEffect)(() => {
-        const handleClickOutside = (event) => {
-            if (holderRef.current && !holderRef.current.contains(event.target)) {
-                setIsOpen.setFalse();
-            }
-        };
-        if (isOpen) {
-            document.addEventListener("mousedown", handleClickOutside);
-        }
-        return () => {
-            document.removeEventListener("mousedown", handleClickOutside);
-        };
-    }, [isOpen]);
-    return {
-        internalValue,
-        setInternalValue,
-        inputFieldProps,
-        insideInputFieldComponentProps,
-        isOpen,
-    };
-}
-function usePageResize() {
-    const [width, setWidth] = (0, react_1.useState)(window.innerWidth);
-    const [height, setHeight] = (0, react_1.useState)(window.innerHeight);
-    (0, react_1.useEffect)(() => {
-        const onResize = () => {
-            setWidth(window.innerWidth);
-            setHeight(window.innerHeight);
-        };
-        window.addEventListener("resize", onResize);
-        return () => {
-            window.removeEventListener("resize", onResize);
-        };
-    }, []);
-    return {
-        width,
-        height,
-    };
-}
-function usePageScroll() {
-    const [scrollX, setScrollX] = (0, react_1.useState)(window.scrollX ?? 0);
-    const [scrollY, setScrollY] = (0, react_1.useState)(window.scrollY ?? 0);
-    (0, react_1.useEffect)(() => {
-        const onScroll = () => {
-            setScrollX(window.scrollX);
-            setScrollY(window.scrollY);
-        };
-        window.addEventListener("scroll", onScroll);
-        return () => {
-            window.removeEventListener("scroll", onScroll);
-        };
-    }, []);
-    return {
-        scrollX,
-        scrollY,
-    };
-}
-function useMediaQuery() {
-    const { width } = usePageResize();
-    return {
-        size320: width <= 320,
-        size400: width <= 400,
-        size500: width <= 500,
-        size600: width <= 600,
-        size700: width <= 700,
-        size800: width <= 800,
-        size900: width <= 900,
-        size1000: width <= 1000,
-        size1100: width <= 1100,
-        size1200: width <= 1200,
-        size1300: width <= 1300,
-        size1400: width <= 1400,
-        size1500: width <= 1500,
-        size1600: width <= 1600,
-    };
-}
-function useBooleanState(initialValue = false) {
-    const [state, setState] = (0, react_1.useState)(initialValue);
-    const setTrue = (0, react_1.useCallback)(() => setState(true), []);
-    const setFalse = (0, react_1.useCallback)(() => setState(false), []);
-    const toggle = (0, react_1.useCallback)(() => setState((oldValue) => !oldValue), []);
-    return [state, { setState, setTrue, setFalse, toggle }];
-}
-function useDebounceState(initialValue, delay = 0.5) {
-    const [value, setValue] = (0, react_1.useState)(initialValue);
-    const [debouncedValue, setDebouncedValue] = (0, react_1.useState)(initialValue);
-    const [isLoading, setIsLoading] = useBooleanState();
-    (0, react_1.useEffect)(() => {
-        setIsLoading.setTrue();
-        const timer = setTimeout(() => {
-            setDebouncedValue(value);
-            setIsLoading.setFalse();
-        }, delay * 1000);
-        return () => {
-            clearTimeout(timer);
-        };
-    }, [value, delay]);
-    return [value, debouncedValue, setValue, isLoading];
-}
-function useForm(options) {
-    const { defaultValues, requiredFields, onSubmit, validate } = options;
-    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 setFieldsValue = (0, react_1.useCallback)((values) => {
-        setValues((oldValue) => ({
-            ...oldValue,
-            ...values,
-        }));
-        setErrors((oldValue) => {
-            const newErrors = {};
-            for (const key in values)
-                newErrors[key] = undefined;
-            return newErrors;
-        });
-    }, []);
-    const getInputFieldProps = (0, react_1.useCallback)((field) => {
-        const type = inputTypes[field] ?? "text";
-        return {
-            required: requiredFields?.includes(field),
-            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"),
-                    }));
-            },
-            errorText: errors[field],
-        };
-    }, [values, setFieldValue, inputTypes, errors]);
-    const getTextAreaProps = (0, react_1.useCallback)((field) => {
-        return {
-            required: requiredFields?.includes(field),
-            value: values[field]?.toString() ?? "",
-            onChangeValue: (newValue) => {
-                setFieldValue(field, newValue);
-            },
-            errorText: errors[field],
-        };
-    }, [values, setFieldValue, inputTypes, errors]);
-    const getDropdownFieldProps = (0, react_1.useCallback)((field) => {
-        return {
-            required: requiredFields?.includes(field),
-            value: values[field],
-            onChange: (value) => {
-                setFieldValue(field, value);
-            },
-            errorText: errors[field],
-        };
-    }, [values, errors, setFieldValue]);
-    const getCheckboxProps = (0, react_1.useCallback)((field) => {
-        return {
-            required: requiredFields?.includes(field),
-            checked: values[field],
-            onChange: (checked) => {
-                setFieldValue(field, checked);
-            },
-            errorText: errors[field],
-        };
-    }, [values, errors, setFieldValue]);
-    const getRadioButtonProps = (0, react_1.useCallback)((field, value) => {
-        return {
-            required: requiredFields?.includes(field),
-            checked: values[field] === value,
-            name: field.toString(),
-            value,
-            onChange: (checked, newValue) => {
-                setFieldValue(field, checked ? newValue : undefined);
-            },
-            errorText: errors[field],
-        };
-    }, [values, errors, setFieldValue]);
-    const getSwitchProps = (0, react_1.useCallback)((field) => {
-        return {
-            required: requiredFields?.includes(field),
-            checked: values[field],
-            onChange: (checked) => {
-                setFieldValue(field, checked);
-            },
-            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]);
-    const isDirty = (0, react_1.useMemo)(() => Object.keys(defaultValues).some((key) => defaultValues[key] !== values[key]), [defaultValues, values]);
-    const isValid = (0, react_1.useMemo)(() => {
-        const validationErrors = validate?.(values) || {};
-        return Object.keys(validationErrors).length === 0;
-    }, [validate, values]);
-    const canSubmit = (0, react_1.useMemo)(() => {
-        const requiredFieldsHaveValues = requiredFields?.every((field) => values[field] !== undefined && values[field] !== "") ?? true;
-        return isValid && requiredFieldsHaveValues;
-    }, [isValid, requiredFields]);
-    return {
-        values,
-        errors,
-        isSubmitting,
-        setFieldValue,
-        setFieldsValue,
-        getInputFieldProps,
-        getTextAreaProps,
-        getDropdownFieldProps,
-        getCheckboxProps,
-        getRadioButtonProps,
-        getSwitchProps,
-        focusField,
-        onSubmit: onSubmitFunction,
-        reset,
-        requiredFields,
-        isDirty,
-        isValid,
-        canSubmit,
-    };
-}
-function useUrlQuery() {
-    const reactRouterDomPlugin = (0, BetterHtmlProvider_1.usePlugin)("react-router-dom");
-    if (!reactRouterDomPlugin) {
-        throw new Error("`useUrlQuery` hook requires the `react-router-dom` plugin to be added to the `plugins` prop in `<BetterHtmlProvider>`.");
-    }
-    const isInRouterContext = (0, react_router_dom_1.useInRouterContext)();
-    if (!isInRouterContext) {
-        throw new Error("`useUrlQuery` hook must be used inside a React Router context. Make sure your component is wrapped in a `<BrowserRouter>`, or another Router component.");
-    }
-    const navigate = (0, react_router_dom_1.useNavigate)();
-    const [searchParams] = (0, react_router_dom_1.useSearchParams)();
-    const setQuery = (0, react_1.useCallback)((query, keepHistory = true) => {
-        const currentSearchParams = {};
-        searchParams.forEach((value, key) => {
-            currentSearchParams[key] = value;
-        });
-        navigate({
-            search: (0, react_router_dom_1.createSearchParams)({
-                ...currentSearchParams,
-                ...Object.fromEntries(Object.entries(query).map(([key, value]) => [key, value.toString()])),
-            }).toString(),
-        }, {
-            replace: !keepHistory,
-        });
-    }, [navigate, searchParams]);
-    const getQuery = (0, react_1.useCallback)((name) => searchParams.get(name), [searchParams]);
-    const removeQuery = (0, react_1.useCallback)((name, keepHistory = true) => {
-        searchParams.delete(name);
-        navigate({
-            search: searchParams.toString(),
-        }, {
-            replace: !keepHistory,
-        });
-    }, [navigate, searchParams]);
-    return {
-        setQuery,
-        getQuery,
-        removeQuery,
-    };
-}

package/dist/utils/logger.d.ts

@@ -1,41 +0,0 @@
-type TextColor = keyof typeof textColors;
-type BackgroundColor = keyof typeof backgroundColors;
-type Options = {
-    color?: TextColor;
-    backgroundColor?: BackgroundColor;
-    bold?: boolean;
-};
-declare const textColors: {
-    black: string;
-    red: string;
-    green: string;
-    yellow: string;
-    blue: string;
-    magenta: string;
-    cyan: string;
-    white: string;
-};
-declare const backgroundColors: {
-    black: string;
-    red: string;
-    green: string;
-    yellow: string;
-    blue: string;
-    magenta: string;
-    cyan: string;
-    white: string;
-};
-export declare const log: {
-    /** @description Default log function */
-    log: (text?: string, options?: Options) => void;
-    /** @description Logs the value in pretty json format */
-    json: (jsonObject?: any, options?: Options) => void;
-    /** @description Logs a -=-= pattern */
-    divider: (color?: TextColor) => void;
-    trace: () => void;
-    success: (text?: string, bold?: boolean) => void;
-    info: (text?: string, bold?: boolean) => void;
-    warn: (text?: string, bold?: boolean) => void;
-    error: (text?: string, bold?: boolean) => void;
-};
-export {};

package/dist/utils/logger.js

@@ -1,66 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.log = void 0;
-const textColors = {
-    black: "#111111",
-    red: "#f83e4b",
-    green: "#5ac53a",
-    yellow: "#f8d770",
-    blue: "#3d6fdf",
-    magenta: "#9648eb",
-    cyan: "#53b2c8",
-    white: "#f8f8f8",
-};
-const backgroundColors = {
-    black: "#111111",
-    red: "#f83e4b",
-    green: "#5ac53a",
-    yellow: "#f8d770",
-    blue: "#3d6fdf",
-    magenta: "#9648eb",
-    cyan: "#53b2c8",
-    white: "#f8f8f8",
-};
-const logTypes = {
-    info: "cyan",
-    success: "green",
-    warn: "yellow",
-    error: "red",
-};
-function getCssString(options) {
-    const color = options.color ? textColors[options.color] : undefined;
-    const backgroundColor = options.backgroundColor ? backgroundColors[options.backgroundColor] : undefined;
-    const fontWeight = options.bold ? "bold" : "normal";
-    return `${color ? `color: ${color};` : ""}${backgroundColor ? `background-color: ${backgroundColor};` : ""}${fontWeight ? `font-weight: ${fontWeight};` : ""}`;
-}
-function logText(text, options) {
-    console.log(`%c${text}`, getCssString(options ?? {}));
-}
-exports.log = {
-    ...Object.entries(logTypes).reduce((previousValue, [logType, color]) => {
-        previousValue[logType] = (text = "", bold) => {
-            logText(text, {
-                color,
-                bold,
-            });
-        };
-        return previousValue;
-    }, {}),
-    /** @description Default log function */
-    log: (text, options) => {
-        logText(text, options);
-    },
-    /** @description Logs the value in pretty json format */
-    json: (jsonObject, options) => {
-        logText(`\n${JSON.stringify(jsonObject, null, 4)}`, options);
-    },
-    /** @description Logs a -=-= pattern */
-    divider: (color) => {
-        logText("-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-", {
-            color,
-        });
-    },
-    trace: () => {
-        console.trace();
-    },
-};

package/dist/utils/variableFunctions.d.ts

@@ -1,6 +0,0 @@
-import { AnyOtherString } from "../types/app";
-import { LoaderName } from "../types/loader";
-export declare const loaderControls: {
-    startLoading: (loaderName: LoaderName | AnyOtherString) => void;
-    stopLoading: (loaderName: LoaderName | AnyOtherString) => void;
-};

package/dist/utils/variableFunctions.js

@@ -1,28 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.loaderControls = void 0;
-const BetterHtmlProvider_1 = require("../components/BetterHtmlProvider");
-const checkBetterHtmlContextValue = (value, functionsName) => {
-    if (value === undefined) {
-        throw new Error(`\`${functionsName}()\` must be used within a \`<BetterHtmlProvider>\`. Make sure to add one at the root of your component tree.`);
-    }
-    return value !== undefined;
-};
-exports.loaderControls = {
-    startLoading: (loaderName) => {
-        if (!checkBetterHtmlContextValue(BetterHtmlProvider_1.externalBetterHtmlContextValue, "loaderControls.startLoading"))
-            return;
-        BetterHtmlProvider_1.externalBetterHtmlContextValue.setLoaders((oldValue) => ({
-            ...oldValue,
-            [loaderName.toString()]: true,
-        }));
-    },
-    stopLoading: (loaderName) => {
-        if (!checkBetterHtmlContextValue(BetterHtmlProvider_1.externalBetterHtmlContextValue, "loaderControls.stopLoading"))
-            return;
-        BetterHtmlProvider_1.externalBetterHtmlContextValue.setLoaders((oldValue) => ({
-            ...oldValue,
-            [loaderName.toString()]: false,
-        }));
-    },
-};

package/dist/utils/withPlugin.d.ts

@@ -1,4 +0,0 @@
-import { ComponentType } from "react";
-import { PluginName } from "../types/plugin";
-import { ComponentPropWithPlugin } from "../types/components";
-export declare function withPlugin<ComponentProps extends object>(pluginName: PluginName, WrappedComponent: ComponentType<ComponentPropWithPlugin<ComponentProps>>): ComponentType<ComponentProps>;

package/dist/utils/withPlugin.js

@@ -1,15 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.withPlugin = withPlugin;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const BetterHtmlProvider_1 = require("../components/BetterHtmlProvider");
-function withPlugin(pluginName, WrappedComponent) {
-    const WithPlugin = (props) => {
-        const plugin = (0, BetterHtmlProvider_1.usePlugin)(pluginName);
-        if (!plugin)
-            throw new Error(`\`${pluginName}\` must be added to the \`plugins\` prop in \`<BetterHtmlProvider>\` for the component to work.`);
-        return (0, jsx_runtime_1.jsx)(WrappedComponent, { ...props, plugin: plugin });
-    };
-    WithPlugin.displayName = `WithPlugin(${pluginName})`;
-    return WithPlugin;
-}