@codella-software/react 2.2.26 → 2.3.0

package/dist/index.mjs

@@ -1,77 +1,309 @@
-import { useState, useEffect, useMemo, createContext, useContext, useCallback, useRef } from "react";
-import { TableBuilder } from "@codella-software/utils";
+import { FiltersAndSortService } from "@codella-software/utils";
+import { useRef, useEffect, useCallback, useSyncExternalStore, useMemo, useState, createContext, useContext } from "react";
 import { jsx } from "react/jsx-runtime";
 import { SSEService, WebsocketService, LiveUpdateService } from "@codella-software/utils/live-updates";
 import { RichContentService } from "@codella-software/utils/rich-content";
 import { TabsService } from "@codella-software/utils/tabs";
+function defaultIsEqual(prev, next) {
+  if (prev === next) return true;
+  if (prev.query !== next.query) return false;
+  if (prev.pagination.page !== next.pagination.page) return false;
+  if (prev.pagination.limit !== next.pagination.limit) return false;
+  const prevSort = prev.sort;
+  const nextSort = next.sort;
+  if ((prevSort == null ? void 0 : prevSort.fieldName) !== (nextSort == null ? void 0 : nextSort.fieldName)) return false;
+  if ((prevSort == null ? void 0 : prevSort.direction) !== (nextSort == null ? void 0 : nextSort.direction)) return false;
+  const prevFilters = prev.filters;
+  const nextFilters = next.filters;
+  const prevKeys = Object.keys(prevFilters);
+  const nextKeys = Object.keys(nextFilters);
+  if (prevKeys.length !== nextKeys.length) return false;
+  for (const key of prevKeys) {
+    if (prevFilters[key] !== nextFilters[key]) return false;
+  }
+  return true;
+}
+function countActiveFilters(filters, defaultFilters) {
+  let count = 0;
+  const keys = Object.keys(filters);
+  for (const key of keys) {
+    const value = filters[key];
+    const defaultValue = defaultFilters == null ? void 0 : defaultFilters[key];
+    const isDefault = value === defaultValue;
+    const isEmpty = value === null || value === void 0 || value === "";
+    const isEmptyArray = Array.isArray(value) && value.length === 0;
+    if (!isEmpty && !isEmptyArray && !isDefault) {
+      count++;
+    }
+  }
+  return count;
+}
 function useFiltersAndSort(options) {
-  const { service } = options;
-  if (!service) {
-    throw new Error("useFiltersAndSort: service is required");
+  const { service: externalService, config, debug = false, isEqual = defaultIsEqual } = options;
+  if (!externalService && !config) {
+    throw new Error(
+      "useFiltersAndSort: either `service` or `config` must be provided. Pass an existing FiltersAndSortService instance via `service`, or provide a `config` object to create a new service."
+    );
   }
-  const [state, setState] = useState(() => {
-    return service.getState();
-  });
+  if (externalService && config) {
+    if (debug) {
+      console.warn(
+        "useFiltersAndSort: both `service` and `config` were provided. The `service` will be used and `config` will be ignored."
+      );
+    }
+  }
+  const ownsServiceRef = useRef(false);
+  const serviceRef = useRef(null);
+  const isEqualRef = useRef(isEqual);
   useEffect(() => {
-    if (!service || !service.state$) {
-      return;
+    isEqualRef.current = isEqual;
+  }, [isEqual]);
+  if (!serviceRef.current) {
+    if (externalService) {
+      serviceRef.current = externalService;
+      ownsServiceRef.current = false;
+    } else if (config) {
+      serviceRef.current = new FiltersAndSortService({
+        storageKey: config.storageKey,
+        persistToStorage: config.persistToStorage,
+        initialState: config.initialState,
+        defaultFilters: config.defaultFilters,
+        skipStorageHydration: config.skipStorageHydration,
+        storageDebounceMs: config.storageDebounceMs,
+        storageKeyPrefix: config.storageKeyPrefix
+      });
+      ownsServiceRef.current = true;
+      if (debug) {
+        console.log(`useFiltersAndSort: created service with key "${config.storageKey}"`);
+      }
     }
-    const subscription = service.state$.subscribe((newState) => {
-      setState(newState);
+  }
+  const svc = serviceRef.current;
+  const defaultFiltersRef = useRef(config == null ? void 0 : config.defaultFilters);
+  const subscribe = useCallback(
+    (onStoreChange) => {
+      const subscription = svc.getState().subscribe(() => {
+        onStoreChange();
+      });
+      return () => subscription.unsubscribe();
+    },
+    [svc]
+  );
+  const getSnapshot = useCallback(() => svc.getCurrentState(), [svc]);
+  const getServerSnapshot = useCallback(() => svc.getDefaultState(), [svc]);
+  const state = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+  useEffect(() => {
+    if (!debug) return;
+    const sub = svc.getState().subscribe((newState) => {
+      console.log(`useFiltersAndSort [${svc.getStorageKey()}]:`, newState);
     });
-    return () => subscription.unsubscribe();
-  }, [service]);
-  const callbacks = useMemo(() => ({
-    setFilter: (key, value) => {
-      service.setFilter(key, value);
+    return () => sub.unsubscribe();
+  }, [svc, debug]);
+  useEffect(() => {
+    return () => {
+      if (ownsServiceRef.current && serviceRef.current) {
+        if (debug) {
+          console.log(`useFiltersAndSort: destroying owned service "${serviceRef.current.getStorageKey()}"`);
+        }
+        serviceRef.current.destroy();
+        serviceRef.current = null;
+      }
+    };
+  }, [debug]);
+  const setFilter = useCallback(
+    (key, value) => {
+      svc.setFilters({ [key]: value });
     },
-    clearFilter: (key) => {
-      service.clearFilter(key);
+    [svc]
+  );
+  const setFilters = useCallback(
+    (filters) => {
+      svc.setFilters(filters);
     },
-    clearAllFilters: () => {
-      service.clearAllFilters();
+    [svc]
+  );
+  const clearFilter = useCallback(
+    (key) => {
+      svc.removeFilter(key);
     },
-    setSort: (field, direction) => {
-      service.setSort(field, direction);
+    [svc]
+  );
+  const clearAllFilters = useCallback(() => {
+    svc.clearFilters();
+  }, [svc]);
+  const hasFilter = useCallback(
+    (key) => {
+      var _a;
+      const value = svc.getCurrentState().filters[key];
+      const defaultValue = (_a = defaultFiltersRef.current) == null ? void 0 : _a[key];
+      if (value === defaultValue) return false;
+      if (value === null || value === void 0 || value === "") return false;
+      if (Array.isArray(value) && value.length === 0) return false;
+      return true;
     },
-    toggleSort: (field) => {
-      service.toggleSort(field);
+    [svc]
+  );
+  const hasAnyFilters = useCallback(() => {
+    return countActiveFilters(svc.getCurrentState().filters, defaultFiltersRef.current) > 0;
+  }, [svc]);
+  const setSort = useCallback(
+    (field) => {
+      svc.setSort(field);
     },
-    setPage: (page) => {
-      service.setPage(page);
+    [svc]
+  );
+  const clearSort = useCallback(() => {
+    svc.setSort("");
+  }, [svc]);
+  const isSortedBy = useCallback(
+    (field) => {
+      var _a;
+      return ((_a = svc.getCurrentState().sort) == null ? void 0 : _a.fieldName) === field;
     },
-    setPageSize: (size) => {
-      service.setPageSize(size);
+    [svc]
+  );
+  const setPage = useCallback(
+    (page) => {
+      if (page < 0) {
+        if (debug) {
+          console.warn("useFiltersAndSort: setPage called with negative value, clamping to 0");
+        }
+        page = 0;
+      }
+      svc.setPagination(page);
     },
-    nextPage: () => {
-      service.nextPage();
+    [svc, debug]
+  );
+  const setPageSize = useCallback(
+    (size) => {
+      if (size < 1) {
+        if (debug) {
+          console.warn("useFiltersAndSort: setPageSize called with value < 1, clamping to 1");
+        }
+        size = 1;
+      }
+      const currentPage = svc.getCurrentState().pagination.page;
+      svc.setPagination(currentPage, size);
     },
-    prevPage: () => {
-      service.prevPage();
-    }
-  }), [service]);
-  const memoizedReturn = useMemo(() => ({
-    filters: state.filters,
-    sortBy: state.sortBy,
-    sortDirection: state.sortDirection,
-    page: state.page,
-    pageSize: state.pageSize,
-    ...callbacks
-  }), [state, callbacks]);
-  return memoizedReturn;
+    [svc, debug]
+  );
+  const nextPage = useCallback(() => {
+    svc.setPagination(svc.getCurrentState().pagination.page + 1);
+  }, [svc]);
+  const prevPage = useCallback(() => {
+    const newPage = Math.max(0, svc.getCurrentState().pagination.page - 1);
+    svc.setPagination(newPage);
+  }, [svc]);
+  const firstPage = useCallback(() => {
+    svc.setPagination(0);
+  }, [svc]);
+  const setQuery = useCallback(
+    (query) => {
+      svc.setQuery(query);
+    },
+    [svc]
+  );
+  const clearQuery = useCallback(() => {
+    svc.setQuery("");
+  }, [svc]);
+  const reset = useCallback(() => {
+    svc.reset();
+  }, [svc]);
+  const clearStorageAndReset = useCallback(() => {
+    svc.clearStorage();
+    svc.reset();
+  }, [svc]);
+  const getService = useCallback(() => svc, [svc]);
+  const activeFilterCount = useMemo(
+    () => countActiveFilters(state.filters, defaultFiltersRef.current),
+    [state.filters]
+  );
+  const isFirstPage = state.pagination.page === 0;
+  const offset = state.pagination.page * state.pagination.limit;
+  return useMemo(
+    () => {
+      var _a, _b;
+      return {
+        // State
+        filters: state.filters,
+        sortBy: ((_a = state.sort) == null ? void 0 : _a.fieldName) ?? null,
+        sortDirection: ((_b = state.sort) == null ? void 0 : _b.direction) ?? "asc",
+        page: state.pagination.page,
+        pageSize: state.pagination.limit,
+        query: state.query,
+        state,
+        // Filter actions
+        setFilter,
+        setFilters,
+        clearFilter,
+        clearAllFilters,
+        hasFilter,
+        hasAnyFilters,
+        activeFilterCount,
+        // Sort actions
+        setSort,
+        toggleSort: setSort,
+        clearSort,
+        isSortedBy,
+        // Pagination actions
+        setPage,
+        setPageSize,
+        nextPage,
+        prevPage,
+        firstPage,
+        isFirstPage,
+        offset,
+        // Query actions
+        setQuery,
+        clearQuery,
+        // General actions
+        reset,
+        clearStorageAndReset,
+        storageKey: svc.getStorageKey(),
+        // Service access
+        getService
+      };
+    },
+    [
+      state,
+      setFilter,
+      setFilters,
+      clearFilter,
+      clearAllFilters,
+      hasFilter,
+      hasAnyFilters,
+      activeFilterCount,
+      setSort,
+      clearSort,
+      isSortedBy,
+      setPage,
+      setPageSize,
+      nextPage,
+      prevPage,
+      firstPage,
+      isFirstPage,
+      offset,
+      setQuery,
+      clearQuery,
+      reset,
+      clearStorageAndReset,
+      svc,
+      getService
+    ]
+  );
 }
 function useFormBuilder(options) {
   const { builder } = options;
   if (!builder) {
     throw new Error("useFormBuilder: builder is required");
   }
-  const [state, setState] = useState(() => builder.getState());
+  const [state, setState] = useState(() => builder.currentState);
   const [isSubmitting, setIsSubmitting] = useState(false);
   useEffect(() => {
-    if (!builder || !builder.stateChanged$) {
+    if (!builder || !builder.state$) {
       return;
     }
-    const subscription = builder.stateChanged$.subscribe((newState) => {
+    const subscription = builder.state$.subscribe((newState) => {
       setState(newState);
     });
     return () => subscription.unsubscribe();
@@ -80,8 +312,10 @@ function useFormBuilder(options) {
     values: state.values,
     errors: state.errors,
     touched: state.touched,
-    currentStep: state.currentStep,
-    totalSteps: state.totalSteps,
+    currentStep: 0,
+    // Multi-step requires MultiStepFormBuilder
+    totalSteps: 1,
+    // Multi-step requires MultiStepFormBuilder
     isSubmitting,
     isValid: Object.keys(state.errors).length === 0,
     setFieldValue: async (field, value) => {
@@ -96,9 +330,9 @@ function useFormBuilder(options) {
     submit: async () => {
       setIsSubmitting(true);
       try {
-        const result = await builder.submit();
+        await builder.submit();
         setIsSubmitting(false);
-        return result;
+        return null;
       } catch (error) {
         setIsSubmitting(false);
         throw error;
@@ -108,14 +342,10 @@ function useFormBuilder(options) {
       builder.reset();
     },
     nextStep: () => {
-      if (builder.nextStep) {
-        builder.nextStep();
-      }
+      console.warn("nextStep() is only available on MultiStepFormBuilder");
     },
     prevStep: () => {
-      if (builder.prevStep) {
-        builder.prevStep();
-      }
+      console.warn("prevStep() is only available on MultiStepFormBuilder");
     }
   }), [builder, state, isSubmitting]);
   return memoizedReturn;
@@ -358,91 +588,10 @@ function useRichContent(options = {}) {
     setSelection
   };
 }
-function useTableService(options) {
-  const { config, data } = options;
-  const builder = useMemo(() => {
-    const tb = new TableBuilder(config);
-    tb.setData(data);
-    return tb;
-  }, [config]);
-  const [state, setState] = useState(() => builder.getState());
-  const [selectedRows, setSelectedRows] = useState([]);
-  const [allSelected, setAllSelected] = useState(false);
-  useEffect(() => {
-    if (!builder || !builder.stateChanged$) {
-      return;
-    }
-    const subscription = builder.stateChanged$.subscribe((newState) => {
-      setState(newState);
-    });
-    return () => subscription.unsubscribe();
-  }, [builder]);
-  useEffect(() => {
-    builder.setData(data);
-  }, [builder, data]);
-  const memoizedMethods = useMemo(() => ({
-    toggleRowSelection: (rowId) => {
-      setSelectedRows(
-        (prev) => prev.includes(rowId) ? prev.filter((id) => id !== rowId) : [...prev, rowId]
-      );
-    },
-    toggleAllSelection: () => {
-      if (allSelected) {
-        setSelectedRows([]);
-        setAllSelected(false);
-      } else {
-        setSelectedRows(state.rows.map((row) => row.id || String(row)));
-        setAllSelected(true);
-      }
-    },
-    clearSelection: () => {
-      setSelectedRows([]);
-      setAllSelected(false);
-    },
-    setSort: (field, direction) => {
-      builder.setSort(field, direction);
-    },
-    toggleSort: (field) => {
-      builder.toggleSort(field);
-    },
-    setFilter: (field, value) => {
-      builder.setFilter(field, value);
-    },
-    clearFilter: (field) => {
-      builder.clearFilter(field);
-    },
-    clearAllFilters: () => {
-      builder.clearAllFilters();
-    },
-    setPage: (page) => {
-      builder.setPage(page);
-    },
-    setPageSize: (size) => {
-      builder.setPageSize(size);
-    },
-    nextPage: () => {
-      builder.nextPage();
-    },
-    prevPage: () => {
-      builder.prevPage();
-    }
-  }), [builder, allSelected, state.rows]);
-  const memoizedReturn = useMemo(() => ({
-    rows: state.rows,
-    selectedRows,
-    allSelected,
-    currentPage: state.currentPage,
-    pageSize: state.pageSize,
-    totalPages: state.totalPages,
-    totalItems: state.totalItems,
-    hasNextPage: state.hasNextPage,
-    hasPrevPage: state.hasPrevPage,
-    sortBy: state.sortBy,
-    sortDirection: state.sortDirection,
-    filters: state.filters,
-    ...memoizedMethods
-  }), [state, selectedRows, allSelected, memoizedMethods]);
-  return memoizedReturn;
+function useTableService() {
+  throw new Error(
+    "useTableService is deprecated. TableBuilder is a configuration builder, not a stateful service. Use FiltersAndSortService with useFiltersAndSort hook for reactive state management. See documentation: https://github.com/CodellaSoftware/codella-utils"
+  );
 }
 const TabsContext = createContext(void 0);
 function TabsProvider({ config, children }) {