@maskingtech/react-toolkit 0.0.1

package/LICENCE

@@ -0,0 +1,23 @@
+
+(The MIT License)
+
+Copyright (c) 2025 Masking Technology B.V. <https://masking.tech>
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+'Software'), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/dist/mtreact.d.ts

@@ -0,0 +1,61 @@
+import { Component } from 'react';
+import { ComponentType } from 'react';
+import { DependencyList } from 'react';
+import { Dispatch } from 'react';
+import { ReactNode } from 'react';
+import { RefObject } from 'react';
+import { SetStateAction } from 'react';
+
+declare type ChangeHandler<T> = (value: T) => void;
+
+declare type DataHandler = (data: FormData) => Promise<void>;
+
+export declare class ErrorBoundary extends Component<Props, State> {
+    #private;
+    constructor(props: Props);
+    static getDerivedStateFromError(error: unknown): State;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    render(): ReactNode;
+}
+
+declare type FormRef = RefObject<HTMLFormElement | null>;
+
+declare type FormRef_2 = RefObject<HTMLFormElement | null>;
+
+declare type GetData<T> = () => Promise<T>;
+
+declare type GetData_2<T> = (page: number) => Promise<T[]>;
+
+declare type Props = {
+    readonly element: ComponentType<ViewProps>;
+    readonly children: ReactNode;
+};
+
+declare type State = {
+    error: unknown;
+};
+
+declare type States = 'pristine' | 'dirty' | 'submitting';
+
+declare type States_2 = 'idle' | 'submitting';
+
+declare type SubmitHandler = (data: FormData) => Promise<void>;
+
+export declare function useDebouncedValue<T>(initialValue: T, onChange: ChangeHandler<T>, delay?: number): readonly [T, Dispatch<SetStateAction<T>>];
+
+export declare function useFocusOnMount(ref?: RefObject<HTMLElement>): RefObject<HTMLElement>;
+
+export declare function useForm(submitData: SubmitHandler, ref?: FormRef): readonly [RefObject<HTMLFormElement>, States, () => Promise<void>];
+
+export declare function useFormData(handler: DataHandler, ref?: FormRef_2): readonly [RefObject<HTMLFormElement>, States_2, () => Promise<void>];
+
+export declare function useLoadData<T>(getData: GetData<T>, deps?: DependencyList): readonly [T, boolean, () => void, Dispatch<SetStateAction<T>>];
+
+export declare function usePagination<T>(getData: GetData_2<T>, limit: number, deps?: DependencyList): readonly [T[], boolean, boolean, () => void, () => void, Dispatch<SetStateAction<T[]>>];
+
+declare type ViewProps = {
+    error: unknown;
+};
+
+export { }

package/dist/mtreact.js

@@ -0,0 +1,122 @@
+import { jsx as S } from "react/jsx-runtime";
+import { Component as b, useState as c, useEffect as m, useRef as v, useCallback as l } from "react";
+class R extends b {
+  #t = (t) => {
+    this.setState({ error: t.reason }), t.preventDefault();
+  };
+  constructor(t) {
+    super(t), this.state = { error: void 0 };
+  }
+  static getDerivedStateFromError(t) {
+    return { error: t };
+  }
+  componentDidMount() {
+    window.addEventListener("unhandledrejection", this.#t);
+  }
+  componentWillUnmount() {
+    window.removeEventListener("unhandledrejection", this.#t);
+  }
+  render() {
+    if (this.state.error !== void 0) {
+      const t = this.props.element;
+      return /* @__PURE__ */ S(t, { error: this.state.error });
+    }
+    return this.props.children;
+  }
+}
+function j(n, t, e = 500) {
+  const [a, u] = c(n), [o, s] = c(n);
+  return m(() => {
+    const i = setTimeout(() => s(a), e);
+    return () => clearTimeout(i);
+  }, [a, e]), m(() => {
+    t(o);
+  }, [o, t]), [o, u];
+}
+function C(n) {
+  const t = n ?? v(null);
+  return m(() => {
+    t !== null && t.current?.focus();
+  }, [t]), t;
+}
+function I(n, t) {
+  const e = t ?? v(null), [a, u] = c(new FormData()), [o, s] = c("pristine"), i = l(() => {
+    const r = e.current;
+    r !== null && (u(new FormData(r)), s("pristine"));
+  }, [e]), d = l(() => {
+    const r = e.current;
+    if (r === null) return;
+    const f = new FormData(r);
+    if (a.values().toArray().length !== f.values().toArray().length) {
+      s("dirty");
+      return;
+    }
+    for (const [F, g] of f.entries())
+      if (a.get(F) !== g) {
+        s("dirty");
+        return;
+      }
+    s("pristine");
+  }, [e, a]), p = l(async () => {
+    const r = e.current;
+    r !== null && (s("submitting"), await n(new FormData(r)), i());
+  }, [e, o, n, i]);
+  return m(() => {
+    const r = e.current;
+    if (r === null) return;
+    const f = () => d();
+    return r.addEventListener("input", f), () => r.removeEventListener("input", f);
+  }, [e, d]), m(() => i(), [i]), [e, o, p];
+}
+function P(n, t) {
+  const e = t ?? v(null), [a, u] = c("idle"), o = l(async () => {
+    const s = e.current;
+    s !== null && (u("submitting"), await n(new FormData(s)), u("idle"));
+  }, [e, n]);
+  return [e, a, o];
+}
+function k(n, t = []) {
+  const [e, a] = c(void 0), [u, o] = c(!1), s = l(() => {
+    let d = !1;
+    const p = async () => {
+      o(!0);
+      const r = await n();
+      o(!1), !d && a(r);
+    }, h = () => {
+      d = !0;
+    };
+    return p(), h;
+  }, [n]), i = l(() => {
+    a(void 0), s();
+  }, [s]);
+  return m(s, [n, ...t]), [e, u, i, a];
+}
+function A(n, t, e = []) {
+  const [a, u] = c([]), [o, s] = c(0), [i, d] = c(!1), [p, h] = c(!1), r = l(() => {
+    let D = !1;
+    const y = async () => {
+      d(!0);
+      const w = await n(o);
+      w.length < t && h(!0), !D && (d(!1), u((E) => [...E, ...w]));
+    }, L = () => {
+      D = !0;
+    };
+    return y(), L;
+  }, [n, t, o]), f = l(() => {
+    u([]), d(!1), h(!1), s(0);
+  }, []), F = l(() => {
+    s((D) => D + 1);
+  }, []), g = l(() => {
+    f(), r();
+  }, []);
+  return m(f, [f, t, ...e]), m(r, [n, r, o]), [a, i, p, F, g, u];
+}
+export {
+  R as ErrorBoundary,
+  j as useDebouncedValue,
+  C as useFocusOnMount,
+  I as useForm,
+  P as useFormData,
+  k as useLoadData,
+  A as usePagination
+};

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@maskingtech/react-toolkit",
+  "private": false,
+  "version": "0.0.1",
+  "type": "module",
+  "repository": {
+    "url": "https://github.com/MaskingTechnology/react-toolkit"
+  },
+  "scripts": {
+    "build": "vite build",
+    "clean": "rimraf dist",
+    "lint": "eslint",
+    "prepublishOnly": "npm run build"
+  },
+  "exports": {
+    ".": "./dist/mtreact.js"
+  },
+  "files": [
+    "README.md",
+    "dist"
+  ],
+  "peerDependencies": {
+    "react": "^19.2.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "9.39.1",
+    "@types/react": "19.2.7",
+    "@types/node": "25.0.1",
+    "@vitejs/plugin-react": "5.1.2",
+    "eslint-plugin-react": "7.37.5",
+    "rimraf": "6.1.2",
+    "typescript": "5.9.3",
+    "typescript-eslint": "8.49.0",
+    "vite": "7.2.7",
+    "vite-plugin-dts": "4.5.4"
+  },
+  "optionalDependencies": {
+    "@rollup/rollup-linux-x64-gnu": "4.53.3"
+  }
+}