@mohasinac/react 0.1.0 → 1.1.0

package/dist/index.cjs

@@ -1,8 +1,25 @@
 "use strict";
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+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));
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -20,7 +37,10 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  UNSAVED_CHANGES_EVENT: () => UNSAVED_CHANGES_EVENT,
   useBreakpoint: () => useBreakpoint,
+  useBulkAction: () => useBulkAction,
+  useBulkSelection: () => useBulkSelection,
   useCamera: () => useCamera,
   useClickOutside: () => useClickOutside,
   useCountdown: () => useCountdown,
@@ -28,8 +48,12 @@ __export(index_exports, {
   useKeyPress: () => useKeyPress,
   useLongPress: () => useLongPress,
   useMediaQuery: () => useMediaQuery,
+  usePendingFilters: () => usePendingFilters,
+  usePendingTable: () => usePendingTable,
   usePullToRefresh: () => usePullToRefresh,
-  useSwipe: () => useSwipe
+  useSwipe: () => useSwipe,
+  useUnsavedChanges: () => useUnsavedChanges,
+  useUrlTable: () => useUrlTable
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -743,9 +767,387 @@ function useCamera() {
     switchCamera
   };
 }
+
+// src/hooks/useBulkSelection.ts
+var import_react10 = require("react");
+var BULK_MAX_IDS = 100;
+function useBulkSelection({
+  items,
+  keyExtractor,
+  maxSelection = BULK_MAX_IDS
+}) {
+  const [selectedIds, setSelectedIds] = (0, import_react10.useState)([]);
+  const allIds = (0, import_react10.useMemo)(() => items.map(keyExtractor), [items, keyExtractor]);
+  const isSelected = (0, import_react10.useCallback)(
+    (id) => selectedIds.includes(id),
+    [selectedIds]
+  );
+  const toggle = (0, import_react10.useCallback)(
+    (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 = (0, import_react10.useCallback)(() => {
+    setSelectedIds((prev) => {
+      const allSelected = prev.length === allIds.length && allIds.length > 0;
+      if (allSelected) return [];
+      return allIds.slice(0, maxSelection);
+    });
+  }, [allIds, maxSelection]);
+  const clearSelection = (0, import_react10.useCallback)(() => 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
+var import_navigation = require("next/navigation");
+var import_react11 = require("react");
+var NON_RESETTING_KEYS = ["page", "pageSize", "view"];
+function useUrlTable(options) {
+  var _a;
+  const router = (0, import_navigation.useRouter)();
+  const pathname = (0, import_navigation.usePathname)();
+  const searchParams = (0, import_navigation.useSearchParams)();
+  const defaults = (_a = options == null ? void 0 : options.defaults) != null ? _a : {};
+  const get = (0, import_react11.useCallback)(
+    (key) => {
+      var _a2, _b;
+      return (_b = (_a2 = searchParams.get(key)) != null ? _a2 : defaults[key]) != null ? _b : "";
+    },
+    [searchParams, defaults]
+  );
+  const getNumber = (0, import_react11.useCallback)(
+    (key, fallback = 0) => {
+      const v = get(key);
+      if (!v) return fallback;
+      const n = Number(v);
+      return isNaN(n) ? fallback : n;
+    },
+    [get]
+  );
+  const buildParams = (0, import_react11.useCallback)(
+    (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 = (0, import_react11.useCallback)(
+    (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 = (0, import_react11.useCallback)(
+    (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 = (0, import_react11.useCallback)(
+    (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 = (0, import_react11.useCallback)(
+    (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 = (0, import_react11.useCallback)(() => {
+    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
+var import_react12 = require("react");
+function usePendingFilters({
+  table,
+  keys
+}) {
+  const parseValues = (0, import_react12.useCallback)(
+    (key) => {
+      const raw = table.get(key);
+      return raw ? raw.split(",").filter(Boolean) : [];
+    },
+    [table]
+  );
+  const [pending, setPending] = (0, import_react12.useState)(
+    () => Object.fromEntries(keys.map((k) => [k, parseValues(k)]))
+  );
+  const applied = (0, import_react12.useMemo)(
+    () => Object.fromEntries(keys.map((k) => [k, parseValues(k)])),
+    [keys, parseValues]
+  );
+  const pendingCount = (0, import_react12.useMemo)(
+    () => Object.values(pending).reduce((sum, arr) => sum + arr.length, 0),
+    [pending]
+  );
+  const appliedCount = (0, import_react12.useMemo)(
+    () => Object.values(applied).reduce((sum, arr) => sum + arr.length, 0),
+    [applied]
+  );
+  const isDirty = (0, import_react12.useMemo)(() => {
+    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 = (0, import_react12.useCallback)((key, values) => {
+    setPending((prev) => __spreadProps(__spreadValues({}, prev), { [key]: values }));
+  }, []);
+  const apply = (0, import_react12.useCallback)(() => {
+    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 = (0, import_react12.useCallback)(() => {
+    setPending(Object.fromEntries(keys.map((k) => [k, parseValues(k)])));
+  }, [keys, parseValues]);
+  const clear = (0, import_react12.useCallback)(() => {
+    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
+var import_react13 = require("react");
+function usePendingTable(table, keys) {
+  const filters = usePendingFilters({ table, keys });
+  const pendingTable = (0, import_react13.useMemo)(
+    () => ({
+      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
+var import_react14 = require("react");
+var UNSAVED_CHANGES_EVENT = "unsaved-changes:confirm";
+function useUnsavedChanges({
+  formValues,
+  initialValues,
+  extraDirty = false,
+  confirmFn,
+  beforeUnloadWarning = "You have unsaved changes. Leave?"
+}) {
+  const [savedSnapshot, setSavedSnapshot] = (0, import_react14.useState)(initialValues);
+  const savedSnapshotRef = (0, import_react14.useRef)(savedSnapshot);
+  savedSnapshotRef.current = savedSnapshot;
+  (0, import_react14.useEffect)(() => {
+    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;
+  (0, import_react14.useEffect)(() => {
+    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 = (0, import_react14.useCallback)(() => {
+    setSavedSnapshot(__spreadValues({}, formValues));
+  }, [formValues]);
+  const confirmLeave = (0, import_react14.useCallback)(() => {
+    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
+var import_react15 = require("react");
+function useBulkAction(options) {
+  const [isLoading, setIsLoading] = (0, import_react15.useState)(false);
+  const [result, setResult] = (0, import_react15.useState)(null);
+  const [error, setError] = (0, import_react15.useState)(null);
+  const [pendingPayload, setPendingPayload] = (0, import_react15.useState)(null);
+  const optionsRef = (0, import_react15.useRef)(options);
+  optionsRef.current = options;
+  const runMutation = (0, import_react15.useCallback)(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 = (0, import_react15.useCallback)(
+    async (payload) => {
+      if (optionsRef.current.requiresConfirm) {
+        setPendingPayload(payload);
+        return;
+      }
+      await runMutation(payload);
+    },
+    [runMutation]
+  );
+  const confirmAndExecute = (0, import_react15.useCallback)(async () => {
+    if (!pendingPayload) return;
+    const payload = pendingPayload;
+    setPendingPayload(null);
+    await runMutation(payload);
+  }, [pendingPayload, runMutation]);
+  const cancelConfirm = (0, import_react15.useCallback)(() => setPendingPayload(null), []);
+  const reset = (0, import_react15.useCallback)(() => {
+    setResult(null);
+    setError(null);
+    setPendingPayload(null);
+  }, []);
+  return {
+    execute,
+    isLoading,
+    result,
+    error,
+    reset,
+    pendingPayload,
+    confirmAndExecute,
+    cancelConfirm
+  };
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  UNSAVED_CHANGES_EVENT,
   useBreakpoint,
+  useBulkAction,
+  useBulkSelection,
   useCamera,
   useClickOutside,
   useCountdown,
@@ -753,6 +1155,10 @@ function useCamera() {
   useKeyPress,
   useLongPress,
   useMediaQuery,
+  usePendingFilters,
+  usePendingTable,
   usePullToRefresh,
-  useSwipe
+  useSwipe,
+  useUnsavedChanges,
+  useUrlTable
 });