minimal-shared 0.0.2

package/dist/hooks/use-countdown-seconds/use-countdown-seconds.js

@@ -0,0 +1,36 @@
+// src/hooks/use-countdown-seconds/use-countdown-seconds.ts
+import { useState, useEffect, useCallback } from "react";
+function useCountdownSeconds(defaultValue) {
+  const [value, setValue] = useState(defaultValue);
+  const [isCounting, setIsCounting] = useState(false);
+  const handleStart = useCallback(() => {
+    setIsCounting(true);
+  }, []);
+  const handleReset = useCallback(() => {
+    setIsCounting(false);
+    setValue(defaultValue);
+  }, [defaultValue]);
+  useEffect(() => {
+    let interval = null;
+    if (isCounting && value > 0) {
+      interval = setInterval(() => {
+        setValue((prevValue) => prevValue - 1);
+      }, 1e3);
+    } else if (value <= 0) {
+      setIsCounting(false);
+    }
+    return () => {
+      if (interval) clearInterval(interval);
+    };
+  }, [isCounting, value]);
+  return {
+    value,
+    setValue,
+    isCounting,
+    start: handleStart,
+    reset: handleReset
+  };
+}
+export {
+  useCountdownSeconds
+};

package/dist/hooks/use-debounce/index.d.ts

@@ -0,0 +1 @@
+export { UseDebounceReturn, useDebounce } from './use-debounce.js';

package/dist/hooks/use-debounce/index.js

@@ -0,0 +1 @@
+export * from './use-debounce';

package/dist/hooks/use-debounce/use-debounce.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Custom hook to debounce a value. The debounced value will only update after the specified delay has passed without any changes.
+ *
+ * @param {string} value - The value to debounce.
+ * @param {number} [delay=1000] - The delay in milliseconds to wait before updating the debounced value.
+ *
+ * @returns {UseDebounceReturn} - The debounced value.
+ *
+ * @example
+ * const debouncedSearchTerm = useDebounce(searchTerm, 500);
+ *
+ * useEffect(() => {
+ *   if (debouncedSearchTerm) {
+ *     // Perform search
+ *   }
+ * }, [debouncedSearchTerm]);
+ */
+type UseDebounceReturn = string;
+declare function useDebounce(value: string, delay?: number): UseDebounceReturn;
+
+export { type UseDebounceReturn, useDebounce };

package/dist/hooks/use-debounce/use-debounce.js

@@ -0,0 +1,17 @@
+// src/hooks/use-debounce/use-debounce.ts
+import { useState, useEffect } from "react";
+function useDebounce(value, delay = 1e3) {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+  return debouncedValue;
+}
+export {
+  useDebounce
+};

package/dist/hooks/use-double-click/index.d.ts

@@ -0,0 +1,2 @@
+export { UseDoubleClickReturn, useDoubleClick } from './use-double-click.js';
+import 'react';

package/dist/hooks/use-double-click/index.js

@@ -0,0 +1 @@
+export * from './use-double-click';

package/dist/hooks/use-double-click/use-double-click.d.ts

@@ -0,0 +1,28 @@
+import { MouseEvent, SyntheticEvent } from 'react';
+
+/**
+ * Custom hook to handle single and double click events on an element.
+ *
+ * @param {UseDoubleClickProps} props - The properties for the hook.
+ * @param {number} [props.timeout=250] - The timeout in milliseconds to differentiate between single and double clicks.
+ * @param {function} [props.click] - The function to call on a single click.
+ * @param {function} props.doubleClick - The function to call on a double click.
+ *
+ * @returns {UseDoubleClickReturn} - A function to handle the click events.
+ *
+ * @example
+ * const handleClick = (event) => console.log('Single Click', event);
+ * const handleDoubleClick = (event) => console.log('Double Click', event);
+ * const handleEvent = useDoubleClick({ click: handleClick, doubleClick: handleDoubleClick });
+ *
+ * return <div onClick={handleEvent}>Click Me</div>;
+ */
+type UseDoubleClickReturn = (event: MouseEvent<HTMLElement>) => void;
+type UseDoubleClickProps = {
+    timeout?: number;
+    click?: (event: SyntheticEvent) => void;
+    doubleClick: (event: SyntheticEvent) => void;
+};
+declare function useDoubleClick({ click, doubleClick, timeout, }: UseDoubleClickProps): UseDoubleClickReturn;
+
+export { type UseDoubleClickReturn, useDoubleClick };

package/dist/hooks/use-double-click/use-double-click.js

@@ -0,0 +1,33 @@
+// src/hooks/use-double-click/use-double-click.ts
+import { useRef, useCallback } from "react";
+function useDoubleClick({
+  click,
+  doubleClick,
+  timeout = 250
+}) {
+  const clickTimeout = useRef(null);
+  const clearClickTimeout = useCallback(() => {
+    if (clickTimeout.current) {
+      clearTimeout(clickTimeout.current);
+      clickTimeout.current = null;
+    }
+  }, []);
+  const handleEvent = useCallback(
+    (event) => {
+      clearClickTimeout();
+      if (click && event.detail === 1) {
+        clickTimeout.current = setTimeout(() => {
+          click(event);
+        }, timeout);
+      }
+      if (event.detail % 2 === 0) {
+        doubleClick(event);
+      }
+    },
+    [click, doubleClick, timeout, clearClickTimeout]
+  );
+  return handleEvent;
+}
+export {
+  useDoubleClick
+};

package/dist/hooks/use-event-listener/index.d.ts

@@ -0,0 +1,2 @@
+export { useEventListener } from './use-event-listener.js';
+import 'react';

package/dist/hooks/use-event-listener/index.js

@@ -0,0 +1 @@
+export * from './use-event-listener';

package/dist/hooks/use-event-listener/use-event-listener.d.ts

@@ -0,0 +1,7 @@
+import { RefObject } from 'react';
+
+declare function useEventListener<K extends keyof WindowEventMap>(eventName: K, handler: (event: WindowEventMap[K]) => void, element?: undefined, options?: boolean | AddEventListenerOptions): void;
+declare function useEventListener<K extends keyof HTMLElementEventMap, T extends HTMLElement = HTMLDivElement>(eventName: K, handler: (event: HTMLElementEventMap[K]) => void, element: RefObject<T>, options?: boolean | AddEventListenerOptions): void;
+declare function useEventListener<K extends keyof DocumentEventMap>(eventName: K, handler: (event: DocumentEventMap[K]) => void, element: RefObject<Document>, options?: boolean | AddEventListenerOptions): void;
+
+export { useEventListener };

package/dist/hooks/use-event-listener/use-event-listener.js

@@ -0,0 +1,23 @@
+// src/hooks/use-event-listener/use-event-listener.ts
+import { useRef, useEffect, useLayoutEffect } from "react";
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+function useEventListener(eventName, handler, element, options) {
+  const savedHandler = useRef(handler);
+  useIsomorphicLayoutEffect(() => {
+    savedHandler.current = handler;
+  }, [handler]);
+  useEffect(() => {
+    const targetElement = element?.current || window;
+    if (!(targetElement && targetElement.addEventListener)) {
+      return;
+    }
+    const eventListener = (event) => savedHandler.current(event);
+    targetElement.addEventListener(eventName, eventListener, options);
+    return () => {
+      targetElement.removeEventListener(eventName, eventListener);
+    };
+  }, [eventName, element, options]);
+}
+export {
+  useEventListener
+};

package/dist/hooks/use-is-client/index.d.ts

@@ -0,0 +1 @@
+export { UseIsClientReturn, useIsClient } from './use-is-client.js';

package/dist/hooks/use-is-client/index.js

@@ -0,0 +1 @@
+export * from './use-is-client';

package/dist/hooks/use-is-client/use-is-client.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Custom hook to determine if the code is running on the client side.
+ *
+ * @returns {boolean} - Returns true if the code is running on the client side, otherwise false.
+ *
+ * @example
+ * const isClient = useIsClient();
+ *
+ * return (
+ *   <div>
+ *     <p>Is Client: {isClient.toString()}</p>
+ *   </div>
+ * );
+ */
+type UseIsClientReturn = boolean;
+declare function useIsClient(): UseIsClientReturn;
+
+export { type UseIsClientReturn, useIsClient };

package/dist/hooks/use-is-client/use-is-client.js

@@ -0,0 +1,12 @@
+// src/hooks/use-is-client/use-is-client.ts
+import { useState, useEffect } from "react";
+function useIsClient() {
+  const [isClient, setClient] = useState(false);
+  useEffect(() => {
+    setClient(true);
+  }, []);
+  return isClient;
+}
+export {
+  useIsClient
+};

package/dist/hooks/use-local-storage/index.d.ts

@@ -0,0 +1 @@
+export { UseLocalStorageReturn, useLocalStorage } from './use-local-storage.js';

package/dist/hooks/use-local-storage/index.js

@@ -0,0 +1 @@
+export * from './use-local-storage';

package/dist/hooks/use-local-storage/use-local-storage.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Custom hook to manage state with local storage.
+ *
+ * @param {string} key - The key for the local storage.
+ * @param {T} initialState - The initial state value.
+ * @param {Object} [options] - Optional settings.
+ * @param {boolean} [options.initOnLoad=false] - Whether to initialize the local storage on load.
+ *
+ * @returns {UseLocalStorageReturn<T>} - An object containing:
+ * - `state`: The current state.
+ * - `resetState`: A function to reset the state to the initial value and remove it from local storage.
+ * - `updateState`: A function to update the state and save it to local storage.
+ * - `updateField`: A function to update a specific field in the state and save it to local storage.
+ *
+ * @example
+ * const { state, resetState, updateState, updateField } = useLocalStorage('settings', initialState);
+ *
+ * return (
+ *   <div>
+ *     <p>State: {JSON.stringify(state)}</p>
+ *     <button onClick={() => updateState({name: 'John', age: 20})}>Set Name</button>
+ *     <button onClick={() => updateField('name', 'John')}>Set Name</button>
+ *     <button onClick={resetState}>Reset</button>
+ *   </div>
+ * );
+ */
+type UseLocalStorageReturn<T> = {
+    state: T;
+    resetState: (defaultState?: T) => void;
+    setState: (updateState: T | Partial<T>) => void;
+    setField: (name: keyof T, updateValue: T[keyof T]) => void;
+};
+declare function useLocalStorage<T>(key: string, initialState?: T, options?: {
+    initOnLoad?: boolean;
+}): UseLocalStorageReturn<T>;
+
+export { type UseLocalStorageReturn, useLocalStorage };

package/dist/hooks/use-local-storage/use-local-storage.js

@@ -0,0 +1,113 @@
+// src/hooks/use-local-storage/use-local-storage.ts
+import { useMemo, useState, useEffect, useCallback } from "react";
+
+// src/utils/local-storage/local-storage.ts
+function getStorage(key) {
+  const storedValue = localStorageGetItem(key);
+  if (storedValue) {
+    try {
+      return JSON.parse(storedValue);
+    } catch {
+      return storedValue;
+    }
+  }
+  return null;
+}
+function setStorage(key, value) {
+  try {
+    const serializedValue = JSON.stringify(value);
+    window.localStorage.setItem(key, serializedValue);
+  } catch (error) {
+    console.error("Error while setting storage:", error);
+  }
+}
+function removeStorage(key) {
+  try {
+    window.localStorage.removeItem(key);
+  } catch (error) {
+    console.error("Error while removing from storage:", error);
+  }
+}
+function localStorageAvailable() {
+  try {
+    const key = "__some_random_key_you_are_not_going_to_use__";
+    window.localStorage.setItem(key, key);
+    window.localStorage.removeItem(key);
+    return true;
+  } catch {
+    return false;
+  }
+}
+function localStorageGetItem(key, defaultValue = "") {
+  if (!localStorageAvailable()) {
+    return defaultValue;
+  }
+  const value = localStorage.getItem(key);
+  return value ?? defaultValue;
+}
+
+// src/hooks/use-local-storage/use-local-storage.ts
+function useLocalStorage(key, initialState, options) {
+  const isValuePresent = !!getStorage(key);
+  const storedValue = getStorage(key) ?? initialState;
+  const [state, set] = useState(storedValue);
+  const { initOnLoad = true } = options ?? {};
+  const hasMultipleValues = state && typeof state === "object";
+  useEffect(() => {
+    if (storedValue) {
+      if (hasMultipleValues) {
+        set((prevValue) => ({ ...prevValue, ...storedValue }));
+      } else {
+        set(storedValue);
+      }
+      if (!isValuePresent && initOnLoad) {
+        setStorage(key, storedValue);
+      }
+    }
+  }, []);
+  const setState = useCallback(
+    (newState) => {
+      if (hasMultipleValues) {
+        set((prevValue) => {
+          const updatedState = { ...prevValue, ...newState };
+          setStorage(key, updatedState);
+          return updatedState;
+        });
+      } else {
+        setStorage(key, newState);
+        set(newState);
+      }
+    },
+    [key, hasMultipleValues]
+  );
+  const setField = useCallback(
+    (name, updateValue) => {
+      if (hasMultipleValues) {
+        setState({ [name]: updateValue });
+      }
+    },
+    [hasMultipleValues, setState]
+  );
+  const resetState = useCallback(
+    (defaultState) => {
+      if (defaultState) {
+        set(defaultState);
+      }
+      removeStorage(key);
+    },
+    [key]
+  );
+  const memoizedValue = useMemo(
+    () => ({
+      state,
+      setState,
+      setField,
+      resetState
+    }),
+    [resetState, setField, setState, state]
+  );
+  return memoizedValue;
+}
+export {
+  useLocalStorage
+};

package/dist/hooks/use-multi-select/index.d.ts

@@ -0,0 +1,2 @@
+export { UseMultiSelectReturn, updateSelectedItems, useMultiSelect } from './use-multi-select.js';
+import 'react';

package/dist/hooks/use-multi-select/index.js

@@ -0,0 +1 @@
+export * from './use-multi-select';

package/dist/hooks/use-multi-select/use-multi-select.d.ts

@@ -0,0 +1,55 @@
+import { Dispatch, SetStateAction } from 'react';
+
+/**
+ * Custom hook to manage the selection state of a list of items.
+ *
+ * @param {string[]} itemIds - The list of item IDs to manage.
+ * @param {string[]} [defaultSelected=[]] - The list of default selected item IDs.
+ *
+ * @returns {UseMultiSelectReturn} - An object containing:
+ * - `values`: The current list of selected item IDs.
+ * - `status`: The current selection status ('checked', 'unchecked', 'indeterminate').
+ * - `setValues`: A function to manually set the selected item IDs.
+ * - `onSelectAllItems`: A function to select all items.
+ * - `onDeSelectAllItems`: A function to deselect all items.
+ * - `onToggleSelectItem`: A function to toggle the selection of a specific item.
+ *
+ * @example
+ * const { values, status, onSelectAllItems, onDeSelectAllItems, onToggleSelectItem } = useMultiSelect(['item1', 'item2', 'item3'], ['item1']);
+ *
+ * return (
+ *   <div>
+ *     <button onClick={onSelectAllItems}>Select All</button>
+ *     <button onClick={onDeSelectAllItems}>Deselect All</button>
+ *     {itemIds.map(itemId => (
+ *       <div key={itemId}>
+ *         <input
+ *           type="checkbox"
+ *           checked={values.includes(itemId)}
+ *           onChange={() => onToggleSelectItem(itemId)}
+ *         />
+ *         {itemId}
+ *       </div>
+ *     ))}
+ *   </div>
+ * );
+ */
+type UseMultiSelectReturn = {
+    values: string[];
+    status: 'checked' | 'unchecked' | 'indeterminate';
+    setValues: Dispatch<SetStateAction<string[]>>;
+    onSelectAllItems: () => void;
+    onDeSelectAllItems: () => void;
+    onToggleSelectItem: (inputValue: string) => void;
+};
+declare function useMultiSelect(listItems: string[], defaultSelectedItems?: string[]): UseMultiSelectReturn;
+/**
+ * Updates the selected items list by adding or removing the specified item.
+ *
+ * @param {string[]} selectedItems - The current list of selected items.
+ * @param {string} newItem - The item to add or remove.
+ * @returns {string[]} - The updated list of selected items.
+ */
+declare function updateSelectedItems(selectedItems: string[], newItem: string): string[];
+
+export { type UseMultiSelectReturn, updateSelectedItems, useMultiSelect };

package/dist/hooks/use-multi-select/use-multi-select.js

@@ -0,0 +1,36 @@
+// src/hooks/use-multi-select/use-multi-select.ts
+import { useMemo, useState, useCallback } from "react";
+function useMultiSelect(listItems, defaultSelectedItems) {
+  const [values, setValues] = useState(defaultSelectedItems ?? []);
+  const onToggleSelectItem = useCallback((newItem) => {
+    setValues((prevSelectedItems) => updateSelectedItems(prevSelectedItems, newItem));
+  }, []);
+  const onSelectAllItems = useCallback(() => {
+    setValues(
+      (prevSelectedItems) => prevSelectedItems.length === listItems.length ? [] : listItems
+    );
+  }, [listItems]);
+  const onDeSelectAllItems = useCallback(() => {
+    setValues([]);
+  }, []);
+  const status = useMemo(() => {
+    if (values.length === 0) return "unchecked";
+    if (values.length === listItems.length) return "checked";
+    return "indeterminate";
+  }, [listItems.length, values.length]);
+  return {
+    values,
+    status,
+    setValues,
+    onSelectAllItems,
+    onDeSelectAllItems,
+    onToggleSelectItem
+  };
+}
+function updateSelectedItems(selectedItems, newItem) {
+  return selectedItems.includes(newItem) ? selectedItems.filter((existingItem) => existingItem !== newItem) : [...selectedItems, newItem];
+}
+export {
+  updateSelectedItems,
+  useMultiSelect
+};

package/dist/hooks/use-popover/index.d.ts

@@ -0,0 +1,2 @@
+export { UsePopoverReturn, usePopover } from './use-popover.js';
+import 'react';

package/dist/hooks/use-popover/index.js

@@ -0,0 +1 @@
+export * from './use-popover';

package/dist/hooks/use-popover/use-popover.d.ts

@@ -0,0 +1,35 @@
+import { MouseEvent, Dispatch, SetStateAction } from 'react';
+
+/**
+ * Custom hook to manage the state of a popover.
+ *
+ * @returns {UsePopoverReturn<T>} - An object containing:
+ * - `open`: A boolean indicating whether the popover is open.
+ * - `anchorEl`: The current element that the popover is anchored to.
+ * - `onClose`: A function to close the popover.
+ * - `onOpen`: A function to open the popover.
+ * - `setAnchorEl`: A function to manually set the anchor element.
+ *
+ * @example
+ * const { open, anchorEl, onOpen, onClose } = usePopover<HTMLButtonElement>();
+ *
+ * return (
+ *   <>
+ *     <button variant="contained" onClick={onOpen}>Click me</button>
+ *
+ *     <Popover open={open} onClose={onClose} anchorEl={anchorEl}>
+ *        Popover content
+ *      </Popover>
+ *   </>
+ * );
+ */
+type UsePopoverReturn<T> = {
+    open: boolean;
+    anchorEl: T | null;
+    onClose: () => void;
+    onOpen: (event: MouseEvent<HTMLElement>) => void;
+    setAnchorEl: Dispatch<SetStateAction<T | null>>;
+};
+declare function usePopover<T extends HTMLElement>(): UsePopoverReturn<T>;
+
+export { type UsePopoverReturn, usePopover };

package/dist/hooks/use-popover/use-popover.js

@@ -0,0 +1,21 @@
+// src/hooks/use-popover/use-popover.ts
+import { useState, useCallback } from "react";
+function usePopover() {
+  const [anchorEl, setAnchorEl] = useState(null);
+  const onOpen = useCallback((event) => {
+    setAnchorEl(event.currentTarget);
+  }, []);
+  const onClose = useCallback(() => {
+    setAnchorEl(null);
+  }, []);
+  return {
+    open: !!anchorEl,
+    anchorEl,
+    onOpen,
+    onClose,
+    setAnchorEl
+  };
+}
+export {
+  usePopover
+};

package/dist/hooks/use-popover-hover/index.d.ts

@@ -0,0 +1,2 @@
+export { usePopoverHover } from './use-popover-hover.js';
+import 'react';

package/dist/hooks/use-popover-hover/index.js

@@ -0,0 +1 @@
+export * from './use-popover-hover';

package/dist/hooks/use-popover-hover/use-popover-hover.d.ts

@@ -0,0 +1,41 @@
+import { RefObject, Dispatch, SetStateAction } from 'react';
+
+/**
+ * Custom hook to manage the state of a popover that opens on hover.
+ *
+ * @param {RefObject<T>} [inputRef] - An optional ref object to use for the popover element.
+ *
+ * @returns {UsePopoverHoverReturn<T>} - An object containing:
+ * - `open`: A boolean indicating whether the popover is open.
+ * - `onOpen`: A function to open the popover.
+ * - `anchorEl`: The current element that the popover is anchored to.
+ * - `onClose`: A function to close the popover.
+ * - `elementRef`: A ref object for the popover element.
+ * - `setOpen`: A function to manually set the open state of the popover.
+ *
+ * @example
+ * const { open, onOpen, onClose, elementRef } = usePopoverHover<HTMLButtonElement>();
+ *
+ * return (
+ *   <>
+ *      <button ref={elementRef} onMouseEnter={onOpen} onMouseLeave={onClose}>
+ *        Hover me
+ *      </button>
+ *
+ *      <Popover open={open} anchorEl={anchorEl}>
+ *        Popover content
+ *      </Popover>
+ *   </>
+ * );
+ */
+type UsePopoverHoverReturn<T> = {
+    open: boolean;
+    onOpen: () => void;
+    anchorEl: T | null;
+    onClose: () => void;
+    elementRef: RefObject<T>;
+    setOpen: Dispatch<SetStateAction<boolean>>;
+};
+declare function usePopoverHover<T extends HTMLElement>(inputRef?: RefObject<T>): UsePopoverHoverReturn<T>;
+
+export { usePopoverHover };

package/dist/hooks/use-popover-hover/use-popover-hover.js

@@ -0,0 +1,24 @@
+// src/hooks/use-popover-hover/use-popover-hover.ts
+import { useRef, useState, useCallback } from "react";
+function usePopoverHover(inputRef) {
+  const initialRef = useRef(null);
+  const elementRef = inputRef || initialRef;
+  const [open, setOpen] = useState(false);
+  const onOpen = useCallback(() => {
+    setOpen(true);
+  }, []);
+  const onClose = useCallback(() => {
+    setOpen(false);
+  }, []);
+  return {
+    elementRef,
+    anchorEl: elementRef.current,
+    open,
+    onOpen,
+    onClose,
+    setOpen
+  };
+}
+export {
+  usePopoverHover
+};

package/dist/hooks/use-scroll-offset-top/index.d.ts

@@ -0,0 +1,2 @@
+export { UseScrollOffsetTopReturn, useScrollOffsetTop } from './use-scroll-offset-top.js';
+import 'react';

package/dist/hooks/use-scroll-offset-top/index.js

@@ -0,0 +1 @@
+export * from './use-scroll-offset-top';

package/dist/hooks/use-scroll-offset-top/use-scroll-offset-top.d.ts

@@ -0,0 +1,28 @@
+import { RefObject } from 'react';
+
+/**
+ * Custom hook to manage the offset top state based on scroll position.
+ *
+ * @param {number} [defaultValue=0] - The offset value at which the state changes.
+ *
+ * @returns {UseScrollOffsetTopReturn<T>} - An object containing:
+ * - `offsetTop`: A boolean indicating whether the scroll position is past the offset.
+ * - `elementRef`: A ref object to attach to the element to track its offset.
+ *
+ * @example
+ * 1.Applies to top <header/>
+ * const { offsetTop } = useScrollOffsetTop(80);
+ *
+ * Or
+ *
+ * 2.Applies to element
+ * const { offsetTop, elementRef } = useScrollOffsetTop(80);
+ * <div ref={elementRef} />
+ */
+type UseScrollOffsetTopReturn<T> = {
+    offsetTop: boolean;
+    elementRef: RefObject<T>;
+};
+declare function useScrollOffsetTop<T extends HTMLElement>(defaultValue?: number): UseScrollOffsetTopReturn<T>;
+
+export { type UseScrollOffsetTopReturn, useScrollOffsetTop };