@mohasinac/react 0.1.0 → 1.1.0

package/dist/index.js

@@ -1,3 +1,23 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+
 // src/hooks/useMediaQuery.ts
 import { useState, useEffect } from "react";
 function useMediaQuery(query) {
@@ -708,8 +728,386 @@ function useCamera() {
     switchCamera
   };
 }
+
+// src/hooks/useBulkSelection.ts
+import { useState as useState5, useCallback as useCallback5, useMemo as useMemo2 } from "react";
+var BULK_MAX_IDS = 100;
+function useBulkSelection({
+  items,
+  keyExtractor,
+  maxSelection = BULK_MAX_IDS
+}) {
+  const [selectedIds, setSelectedIds] = useState5([]);
+  const allIds = useMemo2(() => items.map(keyExtractor), [items, keyExtractor]);
+  const isSelected = useCallback5(
+    (id) => selectedIds.includes(id),
+    [selectedIds]
+  );
+  const toggle = useCallback5(
+    (id) => {
+      setSelectedIds((prev) => {
+        if (prev.includes(id)) return prev.filter((s) => s !== id);
+        if (prev.length >= maxSelection) return prev;
+        return [...prev, id];
+      });
+    },
+    [maxSelection]
+  );
+  const toggleAll = useCallback5(() => {
+    setSelectedIds((prev) => {
+      const allSelected = prev.length === allIds.length && allIds.length > 0;
+      if (allSelected) return [];
+      return allIds.slice(0, maxSelection);
+    });
+  }, [allIds, maxSelection]);
+  const clearSelection = useCallback5(() => setSelectedIds([]), []);
+  const isAllSelected = allIds.length > 0 && selectedIds.length === allIds.length;
+  const isIndeterminate = selectedIds.length > 0 && selectedIds.length < allIds.length;
+  return {
+    selectedIds,
+    selectedCount: selectedIds.length,
+    isSelected,
+    isAllSelected,
+    isIndeterminate,
+    toggle,
+    toggleAll,
+    clearSelection,
+    setSelectedIds
+  };
+}
+
+// src/hooks/useUrlTable.ts
+import { useRouter, usePathname, useSearchParams } from "next/navigation";
+import { useCallback as useCallback6 } from "react";
+var NON_RESETTING_KEYS = ["page", "pageSize", "view"];
+function useUrlTable(options) {
+  var _a;
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const defaults = (_a = options == null ? void 0 : options.defaults) != null ? _a : {};
+  const get = useCallback6(
+    (key) => {
+      var _a2, _b;
+      return (_b = (_a2 = searchParams.get(key)) != null ? _a2 : defaults[key]) != null ? _b : "";
+    },
+    [searchParams, defaults]
+  );
+  const getNumber = useCallback6(
+    (key, fallback = 0) => {
+      const v = get(key);
+      if (!v) return fallback;
+      const n = Number(v);
+      return isNaN(n) ? fallback : n;
+    },
+    [get]
+  );
+  const buildParams = useCallback6(
+    (updates) => {
+      const p = new URLSearchParams(searchParams.toString());
+      for (const [k, v] of Object.entries(updates)) {
+        if (v === "" || v === void 0) p.delete(k);
+        else p.set(k, v);
+      }
+      return p;
+    },
+    [searchParams]
+  );
+  const set = useCallback6(
+    (key, value) => {
+      const p = buildParams({ [key]: value });
+      if (!NON_RESETTING_KEYS.includes(key)) {
+        p.set("page", "1");
+      }
+      router.replace(`${pathname}?${p.toString()}`);
+    },
+    [buildParams, pathname, router]
+  );
+  const setMany = useCallback6(
+    (updates) => {
+      const p = buildParams(updates);
+      const keys = Object.keys(updates);
+      const allNonResetting = keys.every(
+        (k) => NON_RESETTING_KEYS.includes(k)
+      );
+      if (!allNonResetting && !keys.includes("page")) {
+        p.set("page", "1");
+      }
+      router.replace(`${pathname}?${p.toString()}`);
+    },
+    [buildParams, pathname, router]
+  );
+  const clear = useCallback6(
+    (keys) => {
+      if (keys) {
+        const p = new URLSearchParams(searchParams.toString());
+        keys.forEach((k) => p.delete(k));
+        p.set("page", "1");
+        router.replace(`${pathname}?${p.toString()}`);
+      } else {
+        router.replace(pathname);
+      }
+    },
+    [searchParams, pathname, router]
+  );
+  const setPage = (page) => set("page", String(page));
+  const setPageSize = (size) => set("pageSize", String(size));
+  const setSort = (sort) => set("sort", sort);
+  const buildSieveParams = useCallback6(
+    (sieveFilters) => {
+      const page = get("page") || "1";
+      const pageSize = get("pageSize") || defaults["pageSize"] || "25";
+      const sort = get("sort") || defaults["sort"] || "-createdAt";
+      const parts = new URLSearchParams();
+      if (sieveFilters) parts.set("filters", sieveFilters);
+      parts.set("sorts", sort);
+      parts.set("page", page);
+      parts.set("pageSize", pageSize);
+      return `?${parts.toString()}`;
+    },
+    [get, defaults]
+  );
+  const buildSearchParams = useCallback6(() => {
+    const p = new URLSearchParams();
+    const addIfPresent = (k) => {
+      const v = get(k);
+      if (v) p.set(k, v);
+    };
+    ["q", "category", "minPrice", "maxPrice"].forEach(addIfPresent);
+    p.set("sort", get("sort") || defaults["sort"] || "-createdAt");
+    p.set("page", get("page") || "1");
+    p.set("pageSize", get("pageSize") || defaults["pageSize"] || "24");
+    return `?${p.toString()}`;
+  }, [get, defaults]);
+  return {
+    params: searchParams,
+    get,
+    getNumber,
+    set,
+    setMany,
+    clear,
+    setPage,
+    setPageSize,
+    setSort,
+    buildSieveParams,
+    buildSearchParams
+  };
+}
+
+// src/hooks/usePendingFilters.ts
+import { useCallback as useCallback7, useMemo as useMemo3, useState as useState6 } from "react";
+function usePendingFilters({
+  table,
+  keys
+}) {
+  const parseValues = useCallback7(
+    (key) => {
+      const raw = table.get(key);
+      return raw ? raw.split(",").filter(Boolean) : [];
+    },
+    [table]
+  );
+  const [pending, setPending] = useState6(
+    () => Object.fromEntries(keys.map((k) => [k, parseValues(k)]))
+  );
+  const applied = useMemo3(
+    () => Object.fromEntries(keys.map((k) => [k, parseValues(k)])),
+    [keys, parseValues]
+  );
+  const pendingCount = useMemo3(
+    () => Object.values(pending).reduce((sum, arr) => sum + arr.length, 0),
+    [pending]
+  );
+  const appliedCount = useMemo3(
+    () => Object.values(applied).reduce((sum, arr) => sum + arr.length, 0),
+    [applied]
+  );
+  const isDirty = useMemo3(() => {
+    return keys.some((k) => {
+      var _a, _b;
+      const p = ((_a = pending[k]) != null ? _a : []).slice().sort();
+      const a = ((_b = applied[k]) != null ? _b : []).slice().sort();
+      return p.length !== a.length || p.some((v, i) => v !== a[i]);
+    });
+  }, [keys, pending, applied]);
+  const set = useCallback7((key, values) => {
+    setPending((prev) => __spreadProps(__spreadValues({}, prev), { [key]: values }));
+  }, []);
+  const apply = useCallback7(() => {
+    var _a;
+    const updates = { page: "1" };
+    for (const k of keys) {
+      updates[k] = ((_a = pending[k]) != null ? _a : []).join(",");
+    }
+    table.setMany(updates);
+  }, [keys, pending, table]);
+  const reset = useCallback7(() => {
+    setPending(Object.fromEntries(keys.map((k) => [k, parseValues(k)])));
+  }, [keys, parseValues]);
+  const clear = useCallback7(() => {
+    const empty = Object.fromEntries(keys.map((k) => [k, []]));
+    setPending(empty);
+    const updates = { page: "1" };
+    for (const k of keys) updates[k] = "";
+    table.setMany(updates);
+  }, [keys, table]);
+  return {
+    pending,
+    applied,
+    isDirty,
+    pendingCount,
+    appliedCount,
+    set,
+    apply,
+    reset,
+    clear
+  };
+}
+
+// src/hooks/usePendingTable.ts
+import { useMemo as useMemo4 } from "react";
+function usePendingTable(table, keys) {
+  const filters = usePendingFilters({ table, keys });
+  const pendingTable = useMemo4(
+    () => ({
+      get: (key) => {
+        var _a, _b;
+        return (_b = (_a = filters.pending[key]) == null ? void 0 : _a[0]) != null ? _b : "";
+      },
+      set: (key, value) => {
+        filters.set(key, value ? [value] : []);
+      },
+      setMany: (updates) => {
+        for (const [k, v] of Object.entries(updates)) {
+          filters.set(k, v ? [v] : []);
+        }
+      }
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [filters.pending, filters.set]
+  );
+  return {
+    pendingTable,
+    filterActiveCount: filters.appliedCount,
+    onFilterApply: filters.apply,
+    onFilterClear: filters.clear
+  };
+}
+
+// src/hooks/useUnsavedChanges.ts
+import { useState as useState7, useEffect as useEffect10, useCallback as useCallback8, useRef as useRef8 } from "react";
+var UNSAVED_CHANGES_EVENT = "unsaved-changes:confirm";
+function useUnsavedChanges({
+  formValues,
+  initialValues,
+  extraDirty = false,
+  confirmFn,
+  beforeUnloadWarning = "You have unsaved changes. Leave?"
+}) {
+  const [savedSnapshot, setSavedSnapshot] = useState7(initialValues);
+  const savedSnapshotRef = useRef8(savedSnapshot);
+  savedSnapshotRef.current = savedSnapshot;
+  useEffect10(() => {
+    if (initialValues && !savedSnapshotRef.current) {
+      setSavedSnapshot(initialValues);
+    }
+  }, [initialValues]);
+  const isFormDirty = (() => {
+    if (!savedSnapshot) return false;
+    return Object.keys(formValues).some(
+      (key) => {
+        var _a, _b;
+        return ((_a = formValues[key]) != null ? _a : "") !== ((_b = savedSnapshot[key]) != null ? _b : "");
+      }
+    );
+  })();
+  const isDirty = isFormDirty || extraDirty;
+  useEffect10(() => {
+    if (!isDirty) return;
+    const handler = (e) => {
+      e.preventDefault();
+      e.returnValue = beforeUnloadWarning;
+      return beforeUnloadWarning;
+    };
+    window.addEventListener("beforeunload", handler);
+    return () => window.removeEventListener("beforeunload", handler);
+  }, [isDirty, beforeUnloadWarning]);
+  const markClean = useCallback8(() => {
+    setSavedSnapshot(__spreadValues({}, formValues));
+  }, [formValues]);
+  const confirmLeave = useCallback8(() => {
+    if (!isDirty) return Promise.resolve(true);
+    if (confirmFn) return confirmFn();
+    return Promise.resolve(
+      window.confirm("You have unsaved changes. Leave without saving?")
+    );
+  }, [isDirty, confirmFn]);
+  return { isDirty, isFormDirty, markClean, confirmLeave };
+}
+
+// src/hooks/useBulkAction.ts
+import { useState as useState8, useCallback as useCallback9, useRef as useRef9 } from "react";
+function useBulkAction(options) {
+  const [isLoading, setIsLoading] = useState8(false);
+  const [result, setResult] = useState8(null);
+  const [error, setError] = useState8(null);
+  const [pendingPayload, setPendingPayload] = useState8(null);
+  const optionsRef = useRef9(options);
+  optionsRef.current = options;
+  const runMutation = useCallback9(async (payload) => {
+    var _a, _b, _c, _d, _e;
+    setIsLoading(true);
+    setError(null);
+    try {
+      const res = await optionsRef.current.mutationFn(payload);
+      setResult(res);
+      await ((_b = (_a = optionsRef.current).onSuccess) == null ? void 0 : _b.call(_a, res, payload));
+    } catch (err) {
+      const error2 = err instanceof Error ? err : new Error((_c = err == null ? void 0 : err.message) != null ? _c : "Unexpected error");
+      setError(error2);
+      (_e = (_d = optionsRef.current).onError) == null ? void 0 : _e.call(_d, error2, payload);
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+  const execute = useCallback9(
+    async (payload) => {
+      if (optionsRef.current.requiresConfirm) {
+        setPendingPayload(payload);
+        return;
+      }
+      await runMutation(payload);
+    },
+    [runMutation]
+  );
+  const confirmAndExecute = useCallback9(async () => {
+    if (!pendingPayload) return;
+    const payload = pendingPayload;
+    setPendingPayload(null);
+    await runMutation(payload);
+  }, [pendingPayload, runMutation]);
+  const cancelConfirm = useCallback9(() => setPendingPayload(null), []);
+  const reset = useCallback9(() => {
+    setResult(null);
+    setError(null);
+    setPendingPayload(null);
+  }, []);
+  return {
+    execute,
+    isLoading,
+    result,
+    error,
+    reset,
+    pendingPayload,
+    confirmAndExecute,
+    cancelConfirm
+  };
+}
 export {
+  UNSAVED_CHANGES_EVENT,
   useBreakpoint,
+  useBulkAction,
+  useBulkSelection,
   useCamera,
   useClickOutside,
   useCountdown,
@@ -717,6 +1115,10 @@ export {
   useKeyPress,
   useLongPress,
   useMediaQuery,
+  usePendingFilters,
+  usePendingTable,
   usePullToRefresh,
-  useSwipe
+  useSwipe,
+  useUnsavedChanges,
+  useUrlTable
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mohasinac/react",
-  "version": "0.1.0",
+  "version": "1.1.0",
   "publishConfig": {
     "access": "public"
   },
@@ -25,7 +25,8 @@
   },
   "peerDependencies": {
     "react": ">=18",
-    "react-dom": ">=18"
+    "react-dom": ">=18",
+    "next": ">=14"
   },
   "devDependencies": {
     "tsup": "^8.5.0",