react-better-html 1.1.20 → 1.1.21

package/dist/components/BetterHtmlProvider.d.ts

@@ -1,6 +1,7 @@
 import { BetterHtmlConfig } from "../types/config";
 import { AnyOtherString, DeepPartialRecord } from "../types/app";
 import { LoaderName } from "../types/loader";
+import { BetterHtmlPlugin, PluginName } from "../types/plugin";
 export declare const useBetterHtmlContext: () => BetterHtmlConfig;
 export declare const useTheme: () => {
     colors: import("../types/theme").Colors;
@@ -11,10 +12,12 @@ export declare const useLoaderControls: () => {
     startLoading: (loaderName: LoaderName | AnyOtherString) => void;
     stopLoading: (loaderName: LoaderName | AnyOtherString) => void;
 };
+export declare const usePlugin: (pluginName: PluginName) => BetterHtmlPlugin | undefined;
 type BetterHtmlProviderProps = {
     value?: DeepPartialRecord<BetterHtmlConfig>;
+    plugins?: BetterHtmlPlugin[];
     children?: React.ReactNode;
 };
-declare function BetterHtmlProvider({ value, children }: BetterHtmlProviderProps): import("react/jsx-runtime").JSX.Element;
+declare function BetterHtmlProvider({ value, plugins: pluginsToUse, children }: BetterHtmlProviderProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof BetterHtmlProvider>;
 export default _default;

package/dist/components/BetterHtmlProvider.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useLoaderControls = exports.useLoader = exports.useTheme = exports.useBetterHtmlContext = void 0;
+exports.usePlugin = exports.useLoaderControls = exports.useLoader = exports.useTheme = exports.useBetterHtmlContext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const styled_components_1 = require("styled-components");
@@ -94,12 +94,21 @@ const useLoaderControls = () => {
     };
 };
 exports.useLoaderControls = useLoaderControls;
+const usePlugin = (pluginName) => {
+    const context = (0, react_1.useContext)(betterHtmlContext);
+    if (context === undefined) {
+        throw new Error("`usePlugin()` must be used within a `<BetterHtmlProvider>`. Make sure to add one at the root of your component tree.");
+    }
+    return context.plugins.find((plugin) => plugin.name === pluginName);
+};
+exports.usePlugin = usePlugin;
 function BetterHtmlProviderContent({ children }) {
     const theme = (0, exports.useTheme)();
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(GlobalStyle, { fontFamily: theme.styles.fontFamily, color: theme.colors.textPrimary, backgroundColor: theme.colors.backgroundBase }), children] }));
 }
-function BetterHtmlProvider({ value, children }) {
+function BetterHtmlProvider({ value, plugins: pluginsToUse, children }) {
     const [loaders, setLoaders] = (0, react_1.useState)(value?.loaders ?? {});
+    const [plugins] = (0, react_1.useState)(pluginsToUse ?? []);
     const readyValue = (0, react_1.useMemo)(() => ({
         app: {
             ...app_1.appConfig,
@@ -134,7 +143,13 @@ function BetterHtmlProvider({ value, children }) {
         components: {
             ...value?.components,
         },
-    }), [value, loaders]);
+        plugins,
+    }), [value, loaders, plugins]);
+    (0, react_1.useEffect)(() => {
+        plugins.forEach((plugin) => {
+            plugin.initialize?.();
+        });
+    }, [plugins]);
     return ((0, jsx_runtime_1.jsx)(betterHtmlContext.Provider, { value: readyValue, children: (0, jsx_runtime_1.jsx)(BetterHtmlProviderContent, { children: children }) }));
 }
 exports.default = (0, react_1.memo)(BetterHtmlProvider);

package/dist/components/ExampleComponent.d.ts

@@ -0,0 +1,5 @@
+type ExampleComponentProps = {
+    test?: string;
+};
+declare const _default: import("react").MemoExoticComponent<import("react").ComponentType<ExampleComponentProps>>;
+export default _default;

package/dist/components/ExampleComponent.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const withPlugin_1 = require("../utils/withPlugin");
+function ExampleComponent({ test, plugin }) {
+    const { Link } = plugin.components || {};
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("h1", { children: ["Example Component with Router Plugin: ", test] }), (0, jsx_runtime_1.jsx)(Link, { to: "/", children: "Go to Home Page" })] }));
+}
+exports.default = (0, react_1.memo)((0, withPlugin_1.withPlugin)("react-router-dom", ExampleComponent));

package/dist/components/Modal.d.ts

@@ -12,6 +12,8 @@ type ModalProps = {
     description?: string;
     descriptionColor?: string;
     headerBackgroundColor?: string;
+    /** @requires ReactRouterDomPlugin */
+    name?: string;
     overflow?: React.CSSProperties["overflow"];
     onOpen?: () => void;
     onClose?: () => void;

package/dist/components/Modal.js

@@ -11,6 +11,7 @@ const Button_1 = __importDefault(require("./Button"));
 const Text_1 = __importDefault(require("./Text"));
 const Divider_1 = __importDefault(require("./Divider"));
 const BetterHtmlProvider_1 = require("./BetterHtmlProvider");
+const hooks_1 = require("../utils/hooks");
 const DialogStylesElement = styled_components_1.default.dialog.withConfig({
     shouldForwardProp: (prop) => !["theme", "opacity"].includes(prop),
 }) `
@@ -50,7 +51,9 @@ const DialogStylesElement = styled_components_1.default.dialog.withConfig({
       }
    }
 `;
-const ModalComponent = (0, react_1.forwardRef)(function Modal({ maxWidth, title, titleColor, description, descriptionColor, headerBackgroundColor, overflow, onOpen, onClose, children, }, ref) {
+const ModalComponent = (0, react_1.forwardRef)(function Modal({ maxWidth, title, titleColor, description, descriptionColor, headerBackgroundColor, name, overflow, onOpen, onClose, children, }, ref) {
+    const reactRouterDomPlugin = (0, BetterHtmlProvider_1.usePlugin)("react-router-dom");
+    const urlQuery = reactRouterDomPlugin ? (0, hooks_1.useUrlQuery)() : undefined;
     const theme = (0, BetterHtmlProvider_1.useTheme)();
     const { app } = (0, BetterHtmlProvider_1.useBetterHtmlContext)();
     const dialogRef = (0, react_1.useRef)(null);
@@ -60,16 +63,22 @@ const ModalComponent = (0, react_1.forwardRef)(function Modal({ maxWidth, title,
         dialogRef.current?.showModal();
         setIsOpened(true);
         setIsOpenedLate(true);
+        if (urlQuery && name)
+            urlQuery.setQuery({
+                [`${name}-modal`]: "opened",
+            }, false);
         onOpen?.();
-    }, [onOpen]);
+    }, [onOpen, urlQuery, name]);
     const onClickClose = (0, react_1.useCallback)(() => {
         setIsOpened(false);
         onClose?.();
+        if (urlQuery && name)
+            urlQuery.removeQuery(`${name}-modal`, false);
         setTimeout(() => {
             dialogRef.current?.close();
             setIsOpenedLate(false);
         }, 0.2 * 1000);
-    }, [onClose]);
+    }, [onClose, urlQuery, name]);
     (0, react_1.useImperativeHandle)(ref, () => {
         return {
             open: onClickOpen,

package/dist/index.d.ts

@@ -13,7 +13,7 @@ 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, useForm } from "./utils/hooks";
+import { usePageResize, useMediaQuery, useBooleanState, useDebounceState, useForm, useUrlQuery } 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";
@@ -21,4 +21,5 @@ 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, 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, };
+export * from "./plugins";
+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, useUrlQuery, 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

@@ -32,11 +32,14 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-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;
+exports.isMobileDevice = exports.useUrlQuery = 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"));
@@ -77,5 +80,7 @@ Object.defineProperty(exports, "useMediaQuery", { enumerable: true, get: functio
 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; } });
+Object.defineProperty(exports, "useUrlQuery", { enumerable: true, get: function () { return hooks_1.useUrlQuery; } });
 const constants_1 = require("./constants");
 Object.defineProperty(exports, "isMobileDevice", { enumerable: true, get: function () { return constants_1.isMobileDevice; } });
+__exportStar(require("./plugins"), exports);

package/dist/plugins/index.d.ts

@@ -0,0 +1 @@
+export * from "./react-router-dom";

package/dist/plugins/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./react-router-dom"), exports);

package/dist/plugins/react-router-dom.d.ts

@@ -0,0 +1,2 @@
+import { BetterHtmlPlugin } from "../types/plugin";
+export declare const reactRouterDomPlugin: BetterHtmlPlugin;

package/dist/plugins/react-router-dom.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.reactRouterDomPlugin = void 0;
+const react_router_dom_1 = require("react-router-dom");
+exports.reactRouterDomPlugin = {
+    name: "react-router-dom",
+    components: {
+        Link: react_router_dom_1.Link,
+        NavLink: react_router_dom_1.NavLink,
+    },
+    initialize: () => {
+        console.log("react-router-dom plugin initialized");
+    },
+};

package/dist/types/components.d.ts

@@ -1,3 +1,4 @@
+import { BetterHtmlPlugin } from "./plugin";
 export type ComponentStyle = React.CSSProperties;
 export type ComponentHoverStyle = {
     [CSSProperty in keyof ComponentStyle as `${CSSProperty & string}Hover`]: ComponentStyle[CSSProperty];
@@ -7,3 +8,6 @@ export type ComponentPaddingProps = Pick<ComponentStyle, "padding" | "paddingTop
 export type ComponentPropWithRef<ComponentRef, ComponentProps> = ComponentProps & {
     ref?: React.Ref<ComponentRef>;
 };
+export type ComponentPropWithPlugin<ComponentProps> = ComponentProps & {
+    plugin: BetterHtmlPlugin;
+};

package/dist/types/plugin.d.ts

@@ -0,0 +1,7 @@
+import { ComponentType } from "react";
+export type PluginName = "react-router-dom";
+export type BetterHtmlPlugin = {
+    name: PluginName;
+    components?: Record<string, ComponentType<any>>;
+    initialize?: () => void;
+};

package/dist/types/plugin.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/utils/hooks.d.ts

@@ -57,3 +57,8 @@ export declare function useForm<FormFields extends Record<string, string | numbe
     onSubmit: (event: React.FormEvent<HTMLFormElement>) => Promise<void>;
     reset: () => void;
 };
+export declare function useUrlQuery(): {
+    setQuery: (query: Record<string, string>, keepHistory?: boolean) => void;
+    getQuery: (name: string) => string | null;
+    removeQuery: (name: string, keepHistory?: boolean) => void;
+};

package/dist/utils/hooks.js

@@ -9,8 +9,11 @@ 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",
@@ -235,3 +238,39 @@ function useForm({ defaultValues, onSubmit, validate, }) {
         reset,
     };
 }
+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 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,
+                ...query,
+            }).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/withPlugin.d.ts

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,15 @@
+"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;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "react-better-html",
-   "version": "1.1.20",
+   "version": "1.1.21",
    "description": "A component library for react that is as close to plane html as possible",
    "main": "dist/index.js",
    "files": [
@@ -42,6 +42,7 @@
    },
    "peerDependencies": {
       "react": "^19.0.0",
+      "react-router-dom": "^7.4.1",
       "styled-components": "^6.1.15"
    }
 }