@povio/ui 0.0.5 → 0.0.7

package/dist/hooks/useAutosave.js

@@ -0,0 +1,80 @@
+import { useRef, useEffect } from "react";
+import { useFormState, useWatch } from "react-hook-form";
+import { isEqual } from "../utils/isEqual.js";
+import { ObjectUtils } from "../utils/object.utils.js";
+function isNilOrEqual(left, right) {
+  if (ObjectUtils.isNil(left) && ObjectUtils.isNil(right)) {
+    return true;
+  }
+  return isEqual(left, right);
+}
+function diffLeftOnly(left, right, shallowKeys) {
+  if (!ObjectUtils.isObject(left) || ObjectUtils.isDate(left) || ObjectUtils.isRegExp(left)) {
+    return !isNilOrEqual(left, right) ? left : void 0;
+  }
+  if (Array.isArray(left)) {
+    return !isNilOrEqual(left, right) ? left : void 0;
+  }
+  const result = Object.entries(left).reduce((acc, [key, value]) => {
+    const shallowSubtree = shallowKeys?.[key];
+    if (shallowSubtree === true) {
+      if (!isNilOrEqual(value, right?.[key])) {
+        acc[key] = value;
+      }
+      return acc;
+    }
+    const diff = diffLeftOnly(value, right?.[key], shallowSubtree);
+    if (diff !== void 0 && (!ObjectUtils.isObject(diff) || !ObjectUtils.isEmpty(diff))) {
+      acc[key] = diff;
+    }
+    return acc;
+  }, {});
+  return ObjectUtils.isEmpty(result) ? void 0 : result;
+}
+function useAutosave({
+  form,
+  delay = 500,
+  enabled = true,
+  onSave,
+  onSaveSuccess
+}) {
+  const timeoutRef = useRef(void 0);
+  const { control, reset, handleSubmit } = form;
+  const { dirtyFields, defaultValues } = useFormState({ control });
+  const formData = useWatch({ control });
+  useEffect(() => {
+    if (!enabled || Object.keys(dirtyFields).length === 0) {
+      return void 0;
+    }
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    timeoutRef.current = setTimeout(() => {
+      handleSubmit(async (data) => {
+        const dirtyData = Object.entries(dirtyFields).filter(([, value]) => value).reduce((acc, [key]) => ({ ...acc, [key]: data[key] }), {});
+        const changedData = diffLeftOnly(dirtyData, defaultValues, dirtyFields) ?? {};
+        if (Object.keys(changedData).length === 0) {
+          return void 0;
+        }
+        try {
+          reset(void 0, { keepValues: true });
+          await onSave(changedData);
+          onSaveSuccess?.();
+        } catch {
+          reset(defaultValues);
+          return void 0;
+        }
+        return void 0;
+      })();
+      return void 0;
+    }, delay);
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, [defaultValues, dirtyFields, formData, delay, onSave, handleSubmit, enabled, reset]);
+}
+export {
+  useAutosave
+};

package/dist/hooks/useBreakpoint.d.ts

@@ -0,0 +1,3 @@
+type Breakpoint = "xs" | "sm" | "md" | "lg" | "xl";
+export declare function useBreakpoint(breakpointKey: Breakpoint): boolean;
+export {};

package/dist/hooks/useBreakpoint.js

@@ -0,0 +1,20 @@
+import { useMemo } from "react";
+import { useMediaQuery } from "react-responsive";
+function getBreakpoints() {
+  const cs = getComputedStyle(document.documentElement);
+  const entries = ["sm", "md", "lg", "xl", "2xl"].map((k) => [k, cs.getPropertyValue(`--breakpoint-${k}`).trim()]).filter(([, v]) => !!v);
+  return Object.fromEntries(entries);
+}
+function useBreakpoint(breakpointKey) {
+  const breakpoints = useMemo(() => getBreakpoints(), []);
+  if (!breakpoints) {
+    throw new Error("Tailwind config is missing theme.screens");
+  }
+  const bool = useMediaQuery({
+    query: `(min-width: ${breakpoints[breakpointKey]})`
+  });
+  return bool;
+}
+export {
+  useBreakpoint
+};

package/dist/hooks/useDebounceCallback.d.ts

@@ -0,0 +1,6 @@
+export declare function useDebounceCallback<T extends (...args: any[]) => any>(callback?: T, { delay }?: {
+    delay?: number;
+}): {
+    callback: (...args: Parameters<T>) => void;
+    isDebouncing: boolean;
+};

package/{src/hooks/useDebounceCallback.ts → dist/hooks/useDebounceCallback.js}

@@ -1,28 +1,20 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-
-export function useDebounceCallback<T extends (...args: any[]) => any>(
-  callback?: T,
-  { delay = 500 }: { delay?: number } = {},
-) {
-  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+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: Parameters<T>) => {
+    (...args) => {
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current);
       }
-
       setIsDebouncing(true);
-
       timeoutRef.current = setTimeout(() => {
         setIsDebouncing(false);
         callback?.(...args);
       }, delay);
     },
-    [callback, delay],
+    [callback, delay]
   );
-
   useEffect(() => {
     return () => {
       if (timeoutRef.current) {
@@ -30,6 +22,8 @@ export function useDebounceCallback<T extends (...args: any[]) => any>(
       }
     };
   }, []);
-
   return { callback: debouncedCallback, isDebouncing };
 }
+export {
+  useDebounceCallback
+};

package/dist/hooks/useDeepCompare.d.ts

@@ -0,0 +1,4 @@
+import { EffectCallback } from 'react';
+export declare const useDeepCompareEffect: (callback: EffectCallback, dependencies: any[]) => void;
+export declare const useDeepCompareLayoutEffect: (callback: EffectCallback, dependencies: any[]) => void;
+export declare const useDeepCompareMemo: <T = any>(factory: () => T, dependencies: any[]) => T;

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.d.ts

@@ -0,0 +1,7 @@
+export interface FilterStore<TFilterData> {
+    filterData: TFilterData;
+    setFilterValue: (data: Partial<TFilterData>) => void;
+    getFilterValue: (keys: (keyof TFilterData)[]) => Partial<TFilterData>;
+    clearAllFilters: () => void;
+}
+export declare const useFilters: <TFilterData>(defaultFilterValues?: TFilterData, prefix?: string) => FilterStore<TFilterData>;

package/{src/hooks/useFilters.ts → dist/hooks/useFilters.js}

@@ -1,26 +1,12 @@
-import { useEffect, useState } from "react";
-
-import { UIRouter } from "../config/router.context";
-
-type FilterValue = string | string[] | boolean;
-
-export interface FilterStore<TFilterData> {
-  filterData: TFilterData;
-  setFilterValue: (data: Partial<TFilterData>) => void;
-  getFilterValue: (keys: (keyof TFilterData)[]) => Partial<TFilterData>;
-  clearAllFilters: () => void;
-}
-
-const serializeFiltersToQuery = (filterData: Record<string, FilterValue>, prefix: string) => {
-  const query: Record<string, string | string[]> = {};
-
+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 === undefined) {
+    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") {
@@ -29,92 +15,75 @@ const serializeFiltersToQuery = (filterData: Record<string, FilterValue>, prefix
       query[filterKey] = value;
     }
   }
-
   return query;
 };
-
-const parseFilterFromQuery = (query: Record<string, string>): Record<string, FilterValue> => {
-  const filter: Record<string, FilterValue> = {};
-
+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) as FilterValue;
+      filter[filterKey] = JSON.parse(value);
     } else if (isBoolean) {
       filter[filterKey] = value === "true";
     } else {
       filter[filterKey] = value;
     }
   }
-
   return filter;
 };
-
-export const useFilters = <TFilterData>(defaultFilterValues?: TFilterData, prefix = ""): FilterStore<TFilterData> => {
+const useFilters = (defaultFilterValues, prefix = "") => {
   const { query, pathname, replace } = UIRouter.useUIRouter();
-
-  const queryFilters = parseFilterFromQuery(query as Record<string, string>);
-  const [filterData, setFilterData] = useState<TFilterData>(queryFilters as TFilterData);
-
+  const queryFilters = parseFilterFromQuery(query);
+  const [filterData, setFilterData] = useState(queryFilters);
   useEffect(() => {
     const setUrlToDefaultFilters = () => {
-      const flatFilterQuery = serializeFiltersToQuery(defaultFilterValues as Record<string, FilterValue>, prefix);
+      const flatFilterQuery = serializeFiltersToQuery(defaultFilterValues, prefix);
       replace({
         pathname,
         query: {
           ...query,
-          ...flatFilterQuery,
-        },
+          ...flatFilterQuery
+        }
       });
     };
-
-    const currentFilters = parseFilterFromQuery(query as Record<string, string>);
+    const currentFilters = parseFilterFromQuery(query);
     const hasFiltersSet = Object.keys(currentFilters).length > 0;
-
     if (defaultFilterValues && !hasFiltersSet) {
       setUrlToDefaultFilters();
     }
   }, [defaultFilterValues, prefix]);
-
   useEffect(() => {
-    const newQueryFilters = parseFilterFromQuery(query as Record<string, string>);
-    setFilterData(newQueryFilters as TFilterData);
+    const newQueryFilters = parseFilterFromQuery(query);
+    setFilterData(newQueryFilters);
   }, [query]);
-
-  const setFilterValue = (data: Partial<TFilterData>) => {
+  const setFilterValue = (data) => {
     let newFilters = { ...filterData };
-
     const isReset = Object.keys(data).length === 0;
     const isResetToDefault = data === defaultFilterValues;
-
     if (isResetToDefault) {
       newFilters = {
-        ...defaultFilterValues,
-      } satisfies TFilterData;
+        ...defaultFilterValues
+      };
     } else if (isReset) {
-      newFilters = {} as TFilterData;
+      newFilters = {};
     } else {
       Object.entries(data).forEach(([key, value]) => {
-        if (value === undefined) {
-          delete newFilters[key as keyof TFilterData];
+        if (value === void 0) {
+          delete newFilters[key];
         } else {
-          newFilters[key as keyof TFilterData] = value as TFilterData[keyof TFilterData];
+          newFilters[key] = value;
         }
       });
     }
-
     const prefixPart = prefix ? `${prefix}-` : "";
-
     const cleanedQuery = Object.keys(query).reduce(
       (acc, k) => {
         if (!k.startsWith(`filter[${prefixPart}`)) {
@@ -122,33 +91,30 @@ export const useFilters = <TFilterData>(defaultFilterValues?: TFilterData, prefi
         }
         return acc;
       },
-      {} as typeof query,
+      {}
     );
-
-    const flatFilterQuery = serializeFiltersToQuery(newFilters as Record<string, FilterValue>, prefix);
-
+    const flatFilterQuery = serializeFiltersToQuery(newFilters, prefix);
     replace({
       pathname,
       query: {
         ...cleanedQuery,
-        ...flatFilterQuery,
-      },
+        ...flatFilterQuery
+      }
     });
-
     setFilterData(newFilters);
   };
-
-  const getFilterValue = (keys: (keyof TFilterData)[]) => {
-    const result = {} as Partial<TFilterData>;
+  const getFilterValue = (keys) => {
+    const result = {};
     keys.forEach((key) => {
       result[key] = filterData[key];
     });
     return result;
   };
-
   const clearAllFilters = () => {
-    setFilterValue(defaultFilterValues ?? ({} as TFilterData));
+    setFilterValue(defaultFilterValues ?? {});
   };
-
   return { filterData, setFilterValue, getFilterValue, clearAllFilters };
 };
+export {
+  useFilters
+};

package/dist/hooks/useForm.d.ts

@@ -0,0 +1,18 @@
+import { BrowserNativeObject, ExtractObjects, FieldValues, NestedValue, UseFormProps as UseReactHookFormProps } from 'react-hook-form';
+import { z } from 'zod';
+type DeepNullablePartial<T> = T extends BrowserNativeObject | NestedValue ? T : {
+    [K in keyof T]?: ExtractObjects<T[K]> extends never ? T[K] | null : DeepNullablePartial<T[K]>;
+};
+type AsyncDefaultValues<TFieldValues> = (payload?: unknown) => Promise<TFieldValues>;
+type NullableDefaultValues<TFieldValues> = TFieldValues extends AsyncDefaultValues<TFieldValues> ? DeepNullablePartial<Awaited<TFieldValues>> : DeepNullablePartial<TFieldValues>;
+export type UseFormResolverProps<TFieldValues extends FieldValues, TTransformedValues = TFieldValues> = {
+    zodSchema: z.ZodType<TTransformedValues, TFieldValues>;
+    resolver?: never;
+} | {
+    zodSchema?: never;
+};
+export type UseFormProps<TFieldValues extends FieldValues, TContext, TTransformedValues = TFieldValues> = Omit<UseReactHookFormProps<TFieldValues, TContext, TTransformedValues>, "defaultValues"> & {
+    defaultValues?: NullableDefaultValues<TFieldValues> | AsyncDefaultValues<TFieldValues>;
+};
+export declare function useForm<TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues = TFieldValues>({ resolver, zodSchema, defaultValues, ...props }: UseFormProps<TFieldValues, TContext, TTransformedValues> & UseFormResolverProps<TFieldValues, TTransformedValues>): import('react-hook-form').UseFormReturn<TFieldValues, TContext, TTransformedValues>;
+export {};

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/dist/hooks/useFormAutosave.d.ts

@@ -0,0 +1,13 @@
+import { DependencyList } from 'react';
+import { FieldValues } from 'react-hook-form';
+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"];
+    onAutosave: UseAutosaveProps<TFieldValues, TContext, TTransformedValues, TResponse>["onSave"];
+    getResetValues: () => UseFormProps<TFieldValues, TContext, TTransformedValues>["defaultValues"];
+    resetDeps: DependencyList;
+    resetTimeout?: number;
+};
+export declare function useFormAutosave<TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues = TFieldValues, TResponse = any>({ autosaveDelay, enableAutosave, onAutosave, getResetValues, resetDeps, resetTimeout, ...props }: UseFormAutosaveProps<TFieldValues, TContext, TTransformedValues, TResponse>): import('react-hook-form').UseFormReturn<TFieldValues, TContext, TTransformedValues>;

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.d.ts

@@ -0,0 +1,7 @@
+type UseIntersectionObserverProps = {
+    onIntersection?: () => void;
+} & IntersectionObserverInit;
+export declare const useIntersectionObserver: ({ onIntersection, root, rootMargin, threshold, }: UseIntersectionObserverProps) => {
+    setRef: import('react').Dispatch<import('react').SetStateAction<Element | null>>;
+};
+export {};

package/{src/hooks/useIntersectionObserver.ts → dist/hooks/useIntersectionObserver.js}

@@ -1,33 +1,27 @@
-import { useEffect, useState } from "react";
-
-type UseIntersectionObserverProps = {
-  onIntersection?: () => void;
-} & IntersectionObserverInit;
-
-export const useIntersectionObserver = ({
+import { useState, useEffect } from "react";
+const useIntersectionObserver = ({
   onIntersection,
   root,
   rootMargin,
-  threshold,
-}: UseIntersectionObserverProps) => {
-  const [ref, setRef] = useState<Element | null>(null);
-
+  threshold
+}) => {
+  const [ref, setRef] = useState(null);
   useEffect(() => {
     const observer = new IntersectionObserver(
-      (entries: IntersectionObserverEntry[]) => {
+      (entries) => {
         if (entries.some((entry) => entry.isIntersecting)) {
           onIntersection?.();
         }
       },
-      { root, rootMargin, threshold },
+      { root, rootMargin, threshold }
     );
-
     if (ref) {
       observer.observe(ref);
     }
-
     return () => observer.disconnect();
   }, [ref, root, rootMargin, threshold, onIntersection]);
-
   return { setRef };
 };
+export {
+  useIntersectionObserver
+};

package/dist/hooks/useLocalStorage.d.ts

@@ -0,0 +1,13 @@
+import { z } from 'zod';
+interface IProps<ZOutput, ZInput> {
+    key: string;
+    schema: z.ZodType<ZOutput, ZInput>;
+}
+export declare const useLocalStorage: <ZOutput, ZInput>({ key, schema }: IProps<ZOutput, ZInput>) => {
+    value: ZOutput | null;
+    set: (newValue: ZInput) => void;
+    remove: () => void;
+    error: Error | null;
+    isInitialLoading: boolean;
+};
+export {};

package/{src/hooks/useLocalStorage.ts → dist/hooks/useLocalStorage.js}

@@ -1,39 +1,26 @@
-import { useCallback, useEffect, useState } from "react";
-import type { z } from "zod";
-
-interface IProps<ZOutput, ZInput> {
-  key: string;
-  schema: z.ZodType<ZOutput, ZInput>;
-}
-
-export const useLocalStorage = <ZOutput, ZInput>({ key, schema }: IProps<ZOutput, ZInput>) => {
-  const [value, setValue] = useState<ZOutput | null>(null);
+import { useState, useEffect, useCallback } from "react";
+const useLocalStorage = ({ key, schema }) => {
+  const [value, setValue] = useState(null);
   const [isInitialLoading, setIsInitialLoading] = useState(true);
-
-  const [error, setError] = useState<Error | null>(null);
-
+  const [error, setError] = useState(null);
   useEffect(() => {
     if (!localStorage) {
       setValue(null);
       return;
     }
-
     try {
       const lsValue = localStorage.getItem(key);
       if (!lsValue) {
         setValue(null);
         return;
       }
-
-      let jsonOrString: unknown;
+      let jsonOrString;
       try {
         jsonOrString = JSON.parse(lsValue);
       } catch {
         jsonOrString = lsValue;
       }
-
       const parsedValue = schema.safeParse(jsonOrString);
-
       if (parsedValue.success) {
         setValue(parsedValue.data);
       } else {
@@ -44,38 +31,33 @@ export const useLocalStorage = <ZOutput, ZInput>({ key, schema }: IProps<ZOutput
       setIsInitialLoading(false);
     }
   }, [key, schema]);
-
   const set = useCallback(
-    (newValue: ZInput) => {
+    (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],
+    [key, schema]
   );
-
   const remove = useCallback(() => {
     if (!localStorage) {
       return;
     }
-
     localStorage.removeItem(key);
     setValue(null);
   }, [key]);
-
   return { value, set, remove, error, isInitialLoading };
 };
+export {
+  useLocalStorage
+};