@maskingtech/react-toolkit 0.0.1 → 0.0.2

package/README.md

@@ -0,0 +1,165 @@
+# React Toolkit
+
+A set of reusables for React mainly used by ourselves.
+
+## Components
+
+### ErrorBoundary
+
+Catches errors and passes it to the provided element.
+
+Usage:
+
+```tsx
+import { ErrorBoundary } from '@maskingtech/react-toolkit';
+
+function ErrorHandler({ error }: { error: unknown })
+{
+    return <>Oops...</>;
+}
+
+<ErrorBoundary element={ErrorHandler}>
+    {/* Content goes here */}
+</ErrorBoundary>;
+```
+
+## Hooks
+
+### useDebouncedValue
+
+Delays value updates for a period of time.
+
+Usage:
+
+```tsx
+import { useDebouncedValue } from '@maskingtech/react-toolkit';
+
+function MyComponent()
+{
+    const initialValue: number = 0; // required
+    const onChange = (debouncedValue: number) => {  }; // optional
+    const delay = 300; // optional, default 500
+
+    const [debouncedValue, setValue] = useDebouncedValue(initialValue, onChange, delay);
+
+    return <p>
+        {debouncedValue}
+        <button onClick={() => setValue(debouncedValue + 1)}>Increase</button>
+    </p>;
+}
+```
+
+### useFocusOnMount
+
+Gives a form element focus after mount.
+
+Usage:
+
+```tsx
+import { useFocusOnMount } from '@maskingtech/react-toolkit';
+
+function MyComponent()
+{
+    const ref = useFocusOnMount();
+
+    return <input type="text" ref={ref} />;
+}
+```
+
+### useForm
+
+Provides access to the data of a form after submitting.
+
+Usage:
+
+```tsx
+import { useForm } from '@maskingtech/react-toolkit';
+
+function MyComponent()
+{
+    const submitHandler = (data: FormData) { console.log(data.get('name')); };
+
+    const [ref, state, handleSubmit] = useForm(submitHandler);
+
+    // states: 'pristine' | 'dirty' | 'submitting'
+
+    return <form ref={ref} onSubmit={handleSubmit}>
+        <input type="text" name="name" />
+        <input type="submit" value="Submit" disabled={state !== 'dirty'} />
+    </form>;
+}
+```
+
+### useFormData
+
+Provides access to the data of a form without submitting.
+
+Usage:
+
+```tsx
+import { useFormData } from '@maskingtech/react-toolkit';
+
+function MyComponent()
+{
+    const dataHandler = (data: FormData) { console.log(data.get('name')); };
+
+    const [ref, state, handleData] = useFormData(dataHandler);
+
+    // states: 'idle' | 'working'
+
+    return <form ref={ref}>
+        <input type="text" name="name" />
+        <input type="button" value="Go!" disabled={state !== 'working'} />
+    </form>;
+}
+```
+
+### useLoadData
+
+Provides helpers for loading data.
+
+Usage:
+
+```tsx
+import { useLoadData } from '@maskingtech/react-toolkit';
+
+async function getData() { /* get data here */ }
+
+function MyComponent()
+{
+    const [data, isLoading, refresh, setData] = useLoadData(getData);
+
+    if (isLoading) return <>Loading...</>;
+
+    return <p>
+        {data}
+        <button onClick={() => refresh()}>Refresh</button>
+    </p>;
+}
+```
+
+### usePagination
+
+Provides helpers for loading paginated data.
+
+Usage:
+
+```tsx
+import { useLoadData } from '@maskingtech/react-toolkit';
+
+async function getPageData(page: number) { /* get data here */ }
+
+function MyComponent()
+{
+    const [data, isLoading, isFinished, next, previous, reset, setData] = useLoadData(useLoadData);
+
+    if (isLoading) return <>Loading...</>;
+
+    return <p>
+        {data}
+        <button onClick={() => previous()}>Previous</button>
+        <button onClick={() => next()}>Next</button>
+        <button onClick={() => reset()}>Reset</button>
+    </p>;
+}
+```

package/dist/mtreact.d.ts

@@ -38,13 +38,13 @@ declare type State = {
 
 declare type States = 'pristine' | 'dirty' | 'submitting';
 
-declare type States_2 = 'idle' | 'submitting';
+declare type States_2 = 'idle' | 'working';
 
 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 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 useFocusOnMount(ref?: RefObject<HTMLFormElement>): RefObject<HTMLFormElement>;
 
 export declare function useForm(submitData: SubmitHandler, ref?: FormRef): readonly [RefObject<HTMLFormElement>, States, () => Promise<void>];
 
@@ -52,7 +52,7 @@ export declare function useFormData(handler: DataHandler, ref?: FormRef_2): read
 
 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[]>>];
+export declare function usePagination<T>(getData: GetData_2<T>, limit: number, deps?: DependencyList): readonly [T[], boolean, boolean, () => void, () => void, () => void, Dispatch<SetStateAction<T[]>>];
 
 declare type ViewProps = {
     error: unknown;

package/dist/mtreact.js

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maskingtech/react-toolkit",
   "private": false,
-  "version": "0.0.1",
+  "version": "0.0.2",
   "type": "module",
   "repository": {
     "url": "https://github.com/MaskingTechnology/react-toolkit"