@povio/ui 0.0.8 → 0.0.9

package/dist/hooks/useDebounceCallback.js

@@ -0,0 +1,29 @@
+import { useRef, useState, useCallback, useEffect } from "react";
+function useDebounceCallback(callback, { delay = 500 } = {}) {
+  const timeoutRef = useRef(null);
+  const [isDebouncing, setIsDebouncing] = useState(false);
+  const debouncedCallback = useCallback(
+    (...args) => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+      setIsDebouncing(true);
+      timeoutRef.current = setTimeout(() => {
+        setIsDebouncing(false);
+        callback?.(...args);
+      }, delay);
+    },
+    [callback, delay]
+  );
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+  return { callback: debouncedCallback, isDebouncing };
+}
+export {
+  useDebounceCallback
+};

package/dist/hooks/useDeepCompare.js

@@ -0,0 +1,25 @@
+import { useEffect, useLayoutEffect, useMemo, useRef } from "react";
+import { isEqual } from "../utils/isEqual.js";
+const useDeepCompareEffect = (callback, dependencies) => {
+  return useEffect(callback, useDeepCompareDeps(dependencies));
+};
+const useDeepCompareLayoutEffect = (callback, dependencies) => {
+  return useLayoutEffect(callback, useDeepCompareDeps(dependencies));
+};
+const useDeepCompareMemo = (factory, dependencies) => {
+  return useMemo(factory, useDeepCompareDeps(dependencies));
+};
+const useDeepCompareDeps = (value) => {
+  const ref = useRef(void 0);
+  const signalRef = useRef(0);
+  if (!isEqual(value, ref.current)) {
+    ref.current = value;
+    signalRef.current += 1;
+  }
+  return [signalRef.current];
+};
+export {
+  useDeepCompareEffect,
+  useDeepCompareLayoutEffect,
+  useDeepCompareMemo
+};

package/dist/hooks/useFilters.js

@@ -0,0 +1,120 @@
+import { useState, useEffect } from "react";
+import { UIRouter } from "../config/router.context.js";
+const serializeFiltersToQuery = (filterData, prefix) => {
+  const query = {};
+  for (const [key, value] of Object.entries(filterData)) {
+    if (value === null || value === void 0) {
+      continue;
+    }
+    const filterKey = `filter[${prefix && `${prefix}-`}${key}]`;
+    if (Array.isArray(value) || typeof value === "object") {
+      query[filterKey] = JSON.stringify(value);
+    } else if (typeof value === "boolean") {
+      query[filterKey] = value ? "true" : "false";
+    } else {
+      query[filterKey] = value;
+    }
+  }
+  return query;
+};
+const parseFilterFromQuery = (query) => {
+  const filter = {};
+  for (const [key, value] of Object.entries(query)) {
+    const match = /^filter\[(.+?)\]$/.exec(key);
+    if (!match) {
+      continue;
+    }
+    const filterKey = match[1];
+    const isArray = value.startsWith("[") && value.endsWith("]");
+    const isObject = value.startsWith("{") && value.endsWith("}");
+    const isNumber = !Number.isNaN(Number(value)) && value !== "";
+    const isBoolean = ["true", "false"].includes(value);
+    if (isArray || isObject || isNumber) {
+      filter[filterKey] = JSON.parse(value);
+    } else if (isBoolean) {
+      filter[filterKey] = value === "true";
+    } else {
+      filter[filterKey] = value;
+    }
+  }
+  return filter;
+};
+const useFilters = (defaultFilterValues, prefix = "") => {
+  const { query, pathname, replace } = UIRouter.useUIRouter();
+  const queryFilters = parseFilterFromQuery(query);
+  const [filterData, setFilterData] = useState(queryFilters);
+  useEffect(() => {
+    const setUrlToDefaultFilters = () => {
+      const flatFilterQuery = serializeFiltersToQuery(defaultFilterValues, prefix);
+      replace({
+        pathname,
+        query: {
+          ...query,
+          ...flatFilterQuery
+        }
+      });
+    };
+    const currentFilters = parseFilterFromQuery(query);
+    const hasFiltersSet = Object.keys(currentFilters).length > 0;
+    if (defaultFilterValues && !hasFiltersSet) {
+      setUrlToDefaultFilters();
+    }
+  }, [defaultFilterValues, prefix]);
+  useEffect(() => {
+    const newQueryFilters = parseFilterFromQuery(query);
+    setFilterData(newQueryFilters);
+  }, [query]);
+  const setFilterValue = (data) => {
+    let newFilters = { ...filterData };
+    const isReset = Object.keys(data).length === 0;
+    const isResetToDefault = data === defaultFilterValues;
+    if (isResetToDefault) {
+      newFilters = {
+        ...defaultFilterValues
+      };
+    } else if (isReset) {
+      newFilters = {};
+    } else {
+      Object.entries(data).forEach(([key, value]) => {
+        if (value === void 0) {
+          delete newFilters[key];
+        } else {
+          newFilters[key] = value;
+        }
+      });
+    }
+    const prefixPart = prefix ? `${prefix}-` : "";
+    const cleanedQuery = Object.keys(query).reduce(
+      (acc, k) => {
+        if (!k.startsWith(`filter[${prefixPart}`)) {
+          acc[k] = query[k];
+        }
+        return acc;
+      },
+      {}
+    );
+    const flatFilterQuery = serializeFiltersToQuery(newFilters, prefix);
+    replace({
+      pathname,
+      query: {
+        ...cleanedQuery,
+        ...flatFilterQuery
+      }
+    });
+    setFilterData(newFilters);
+  };
+  const getFilterValue = (keys) => {
+    const result = {};
+    keys.forEach((key) => {
+      result[key] = filterData[key];
+    });
+    return result;
+  };
+  const clearAllFilters = () => {
+    setFilterValue(defaultFilterValues ?? {});
+  };
+  return { filterData, setFilterValue, getFilterValue, clearAllFilters };
+};
+export {
+  useFilters
+};

package/dist/hooks/useForm.js

@@ -0,0 +1,22 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useMemo } from "react";
+import { useForm as useForm$1 } from "react-hook-form";
+function useForm({
+  resolver,
+  zodSchema,
+  defaultValues,
+  ...props
+}) {
+  const formResolver = useMemo(
+    () => resolver ?? (zodSchema ? zodResolver(zodSchema) : void 0),
+    [resolver, zodSchema]
+  );
+  return useForm$1({
+    ...props,
+    resolver: formResolver,
+    defaultValues
+  });
+}
+export {
+  useForm
+};

package/{src → dist}/hooks/useFormAutosave.d.ts

@@ -1,7 +1,7 @@
 import { DependencyList } from 'react';
 import { FieldValues } from 'react-hook-form';
-import { UseAutosaveProps } from '#ui/hooks/useAutosave';
-import { UseFormProps, UseFormResolverProps } from '#ui/hooks/useForm';
+import { UseAutosaveProps } from './useAutosave';
+import { UseFormProps, UseFormResolverProps } from './useForm';
 export type UseFormAutosaveProps<TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues = TFieldValues, TResponse = unknown> = Omit<UseFormProps<TFieldValues, TContext, TTransformedValues>, "defaultValues"> & UseFormResolverProps<TFieldValues, TTransformedValues> & {
     autosaveDelay?: UseAutosaveProps<TFieldValues, TContext, TTransformedValues, TResponse>["delay"];
     enableAutosave?: UseAutosaveProps<TFieldValues, TContext, TTransformedValues, TResponse>["enabled"];

package/dist/hooks/useFormAutosave.js

@@ -0,0 +1,67 @@
+import { useRef, useEffect } from "react";
+import { useAutosave } from "./useAutosave.js";
+import { useForm } from "./useForm.js";
+import { ObjectUtils } from "../utils/object.utils.js";
+const getResetTimeoutErrorMessage = (resetTimeout) => `Form Reset Timeout (${resetTimeout}ms) - Action Required
+Problem: Form values weren't reset after submission.
+
+Likely causes:
+• Missing variables in reset dependency array
+• Reset dependencies not updating after form save
+• Async operations blocking timely reset
+
+Solutions:
+1. Ensure reset dependencies include all relevant state variables
+2. Confirm your submission handler updates state properly (check query invalidation)
+3. For slower operations, consider increasing the timeout threshold`;
+function useFormAutosave({
+  autosaveDelay,
+  enableAutosave,
+  onAutosave,
+  getResetValues,
+  resetDeps,
+  resetTimeout = 5e3,
+  ...props
+}) {
+  const form = useForm({ ...props, defaultValues: getResetValues() });
+  const shouldResetFormValuesRef = useRef(false);
+  const resetFormValuesTimeoutRef = useRef(void 0);
+  useEffect(() => {
+    const resetValues = getResetValues();
+    if (resetValues === void 0) {
+      return;
+    }
+    const resetFormValues = async () => {
+      const keepStateOptions = shouldResetFormValuesRef.current ? { keepDirtyValues: true } : void 0;
+      shouldResetFormValuesRef.current = false;
+      let values = resetValues;
+      if (ObjectUtils.isFunction(resetValues)) {
+        values = await resetValues();
+      }
+      form.reset(values, keepStateOptions);
+    };
+    resetFormValues();
+  }, [...resetDeps]);
+  const onSaveSuccess = () => {
+    shouldResetFormValuesRef.current = true;
+    if (resetFormValuesTimeoutRef.current) {
+      clearTimeout(resetFormValuesTimeoutRef.current);
+    }
+    resetFormValuesTimeoutRef.current = setTimeout(() => {
+      if (shouldResetFormValuesRef.current) {
+        throw new Error(getResetTimeoutErrorMessage(resetTimeout));
+      }
+    }, resetTimeout);
+  };
+  useAutosave({
+    form,
+    delay: autosaveDelay,
+    enabled: enableAutosave,
+    onSave: onAutosave,
+    onSaveSuccess
+  });
+  return form;
+}
+export {
+  useFormAutosave
+};

package/dist/hooks/useIntersectionObserver.js

@@ -0,0 +1,27 @@
+import { useState, useEffect } from "react";
+const useIntersectionObserver = ({
+  onIntersection,
+  root,
+  rootMargin,
+  threshold
+}) => {
+  const [ref, setRef] = useState(null);
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((entry) => entry.isIntersecting)) {
+          onIntersection?.();
+        }
+      },
+      { root, rootMargin, threshold }
+    );
+    if (ref) {
+      observer.observe(ref);
+    }
+    return () => observer.disconnect();
+  }, [ref, root, rootMargin, threshold, onIntersection]);
+  return { setRef };
+};
+export {
+  useIntersectionObserver
+};

package/dist/hooks/useLocalStorage.js

@@ -0,0 +1,63 @@
+import { useState, useEffect, useCallback } from "react";
+const useLocalStorage = ({ key, schema }) => {
+  const [value, setValue] = useState(null);
+  const [isInitialLoading, setIsInitialLoading] = useState(true);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    if (!localStorage) {
+      setValue(null);
+      return;
+    }
+    try {
+      const lsValue = localStorage.getItem(key);
+      if (!lsValue) {
+        setValue(null);
+        return;
+      }
+      let jsonOrString;
+      try {
+        jsonOrString = JSON.parse(lsValue);
+      } catch {
+        jsonOrString = lsValue;
+      }
+      const parsedValue = schema.safeParse(jsonOrString);
+      if (parsedValue.success) {
+        setValue(parsedValue.data);
+      } else {
+        setError(parsedValue.error);
+        setValue(null);
+      }
+    } finally {
+      setIsInitialLoading(false);
+    }
+  }, [key, schema]);
+  const set = useCallback(
+    (newValue) => {
+      if (!localStorage) {
+        return;
+      }
+      const parsedValue = schema.safeParse(newValue);
+      if (!parsedValue.success) {
+        return;
+      }
+      if (typeof parsedValue.data === "string") {
+        localStorage.setItem(key, parsedValue.data);
+      } else {
+        localStorage.setItem(key, JSON.stringify(parsedValue.data));
+      }
+      setValue(parsedValue.data);
+    },
+    [key, schema]
+  );
+  const remove = useCallback(() => {
+    if (!localStorage) {
+      return;
+    }
+    localStorage.removeItem(key);
+    setValue(null);
+  }, [key]);
+  return { value, set, remove, error, isInitialLoading };
+};
+export {
+  useLocalStorage
+};

package/dist/hooks/useLongPressRepeat.js

@@ -0,0 +1,33 @@
+import { useRef, useEffect } from "react";
+const useLongPressRepeat = ({
+  onPress,
+  enabled = true,
+  interval = 85,
+  timeout = 500
+}) => {
+  const intervalRef = useRef(void 0);
+  useEffect(() => {
+    return () => {
+      clearInterval(intervalRef.current);
+    };
+  }, []);
+  const onPressStart = () => {
+    onPress(false);
+    if (!enabled) {
+      return;
+    }
+    intervalRef.current = setTimeout(() => {
+      onPress(true);
+      intervalRef.current = setInterval(() => {
+        onPress(true);
+      }, interval);
+    }, timeout);
+  };
+  const onPressEnd = () => {
+    clearInterval(intervalRef.current);
+  };
+  return { onPressStart, onPressEnd };
+};
+export {
+  useLongPressRepeat
+};

package/dist/hooks/usePagination.js

@@ -0,0 +1,35 @@
+import { useState, useEffect } from "react";
+import { UIRouter } from "../config/router.context.js";
+const DEFAULT_STATE = {
+  pageIndex: 1,
+  pageSize: 20
+};
+function usePagination(defaultPagination) {
+  const { pathname, query, replace, searchParams } = UIRouter.useUIRouter();
+  const [pagination, setPagination] = useState(
+    defaultPagination ?? {
+      pageIndex: searchParams.has("page") ? Number.parseInt(searchParams.get("page") ?? "", 10) : DEFAULT_STATE.pageIndex,
+      pageSize: searchParams.has("size") ? Number.parseInt(searchParams.get("size") ?? "", 10) : DEFAULT_STATE.pageSize
+    }
+  );
+  useEffect(() => {
+    const { page: _page, size: _size, ...queryParms } = query;
+    replace({
+      pathname,
+      query: {
+        ...queryParms,
+        ...pagination.pageSize !== DEFAULT_STATE.pageSize ? { size: pagination.pageSize } : {},
+        ...pagination.pageIndex !== DEFAULT_STATE.pageIndex ? { page: pagination.pageIndex } : {}
+      }
+    });
+  }, [pagination]);
+  return {
+    pagination,
+    setPagination,
+    pageIndex: pagination.pageIndex,
+    pageSize: pagination.pageSize
+  };
+}
+export {
+  usePagination
+};

package/dist/hooks/useScrollableListBox.js

@@ -0,0 +1,30 @@
+import { useRef, useEffect } from "react";
+import { useBreakpoint } from "./useBreakpoint.js";
+function useScrollableListBox() {
+  const ref = useRef(null);
+  const isDesktop = useBreakpoint("md");
+  useEffect(() => {
+    const node = ref.current;
+    if (!node || isDesktop) {
+      return void 0;
+    }
+    const onPointerDownCapture = (e) => {
+      e.stopPropagation();
+    };
+    const onClickCapture = (e) => {
+      if (e.currentTarget?.contains(e.target) && e.target !== e.currentTarget) {
+        e.target.click();
+      }
+    };
+    node.addEventListener("pointerdown", onPointerDownCapture);
+    node.addEventListener("click", onClickCapture);
+    return () => {
+      node.removeEventListener("pointerdown", onPointerDownCapture);
+      node.removeEventListener("click", onClickCapture);
+    };
+  }, [ref, isDesktop]);
+  return { ref };
+}
+export {
+  useScrollableListBox
+};

package/dist/hooks/useSorting.js

@@ -0,0 +1,30 @@
+import { useState, useMemo, useEffect } from "react";
+import { UIRouter } from "../config/router.context.js";
+function useSorting(defaultSorting, prefix = "") {
+  const { pathname, replace, searchParams, query } = UIRouter.useUIRouter();
+  const [sorting, setSorting] = useState(
+    defaultSorting ?? searchParams.get(`order${prefix && `-${prefix}`}`)?.split(",").map((item) => {
+      if (item.startsWith("-")) {
+        return { id: item.slice(1), desc: true };
+      }
+      if (item.startsWith("+")) {
+        return { id: item.slice(1), desc: false };
+      }
+      return { id: item, desc: false };
+    }) ?? []
+  );
+  const order = useMemo(() => {
+    return sorting.map((field) => `${field.desc ? "-" : "+"}${field.id}`).join(",");
+  }, [sorting]);
+  useEffect(() => {
+    const { sort: _sort, ...queryParms } = query;
+    replace({
+      pathname,
+      query: { ...queryParms, ...order ? { [`order${prefix && `-${prefix}`}`]: order } : {} }
+    });
+  }, [order]);
+  return { sorting, setSorting, order };
+}
+export {
+  useSorting
+};

package/dist/hooks/useStateAndRef.js

@@ -0,0 +1,17 @@
+import { useState, useRef, useCallback } from "react";
+import { ObjectUtils } from "../utils/object.utils.js";
+const useStateAndRef = (initialState) => {
+  const [state, setState] = useState(initialState);
+  const ref = useRef(state);
+  const updateValue = useCallback(
+    (value) => {
+      ref.current = ObjectUtils.isFunction(value) ? value(ref.current) : value;
+      setState(ref.current);
+    },
+    [setState]
+  );
+  return [state, ref, updateValue];
+};
+export {
+  useStateAndRef
+};

package/dist/hooks/useTableColumnConfig.js

@@ -0,0 +1,63 @@
+import { useState, useEffect, useCallback, useMemo } from "react";
+function sortByKeyOrder(data, orderedKeys = []) {
+  return [...data].sort((a, b) => {
+    return orderedKeys.findIndex((key) => key === (a.id ?? a.accessorKey)) - orderedKeys.findIndex((key) => key === (b.id ?? b.accessorKey));
+  });
+}
+function useTableColumnConfig(defaultColumns, options = {}) {
+  const [internalVisibleColumns, setInternalVisibleColumns] = useState(
+    () => defaultColumns.reduce((acc, col) => {
+      const key = col.id ?? col.accessorKey;
+      acc[key] = true;
+      return acc;
+    }, {})
+  );
+  const [internalColumnOrder, setInternalColumnOrder] = useState(
+    () => defaultColumns.map((col) => col.id ?? col.accessorKey)
+  );
+  useEffect(() => {
+    if (options.visibleColumns) {
+      setInternalVisibleColumns(options.visibleColumns);
+    }
+  }, [options.visibleColumns]);
+  useEffect(() => {
+    if (options.columnOrder) {
+      setInternalColumnOrder(options.columnOrder);
+    }
+  }, [options.columnOrder]);
+  const handleVisibilityChange = useCallback(
+    (value) => {
+      setInternalVisibleColumns(value);
+      options?.onVisibilityChange?.(value);
+    },
+    [options]
+  );
+  const handleOrderChange = useCallback(
+    (value) => {
+      setInternalColumnOrder(value);
+      options?.onOrderChange?.(value);
+    },
+    [options]
+  );
+  const configColumns = useMemo(
+    () => sortByKeyOrder(defaultColumns, internalColumnOrder),
+    [defaultColumns, internalColumnOrder]
+  );
+  const columns = useMemo(
+    () => configColumns.filter(
+      (col) => internalVisibleColumns?.[col.id ?? col.accessorKey] ?? true
+    ),
+    [configColumns, internalVisibleColumns]
+  );
+  return {
+    configColumns,
+    columns,
+    visibleColumns: internalVisibleColumns,
+    columnOrder: internalColumnOrder,
+    onVisibilityChange: handleVisibilityChange,
+    onOrderChange: handleOrderChange
+  };
+}
+export {
+  useTableColumnConfig
+};