@sohanemon/utils 4.0.15 → 4.0.17

package/dist/components/index.d.ts

@@ -1,3 +1,3 @@
-export { Icon as Iconify } from "@iconify/react";
-export { MediaWrapper } from "./media-wrapper";
-export { ResponsiveIndicator, ResponsiveIndicator as TailwindIndicator, } from "./responsive-indicator";
+export { Icon as Iconify } from '@iconify/react';
+export { MediaWrapper } from './media-wrapper';
+export { ResponsiveIndicator, ResponsiveIndicator as TailwindIndicator, } from './responsive-indicator';

package/dist/components/index.js

@@ -1,4 +1,4 @@
-"use client";
-export { Icon as Iconify } from "@iconify/react";
-export { MediaWrapper } from "./media-wrapper";
-export { ResponsiveIndicator, ResponsiveIndicator as TailwindIndicator, } from "./responsive-indicator";
+'use client';
+export { Icon as Iconify } from '@iconify/react';
+export { MediaWrapper } from './media-wrapper';
+export { ResponsiveIndicator, ResponsiveIndicator as TailwindIndicator, } from './responsive-indicator';

package/dist/components/media-wrapper.d.ts

@@ -1,8 +1,10 @@
-import * as React from "react";
-type BreakPoints = "sm" | "md" | "lg" | "xl" | "2xl" | "max-sm" | "max-md" | "max-lg" | "max-xl" | "max-2xl";
-type MediaWrapperProps = React.ComponentProps<"div"> & {
+import * as React from 'react';
+type BreakPoints = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'max-sm' | 'max-md' | 'max-lg' | 'max-xl' | 'max-2xl';
+type MediaWrapperProps = React.ComponentProps<'div'> & {
     breakpoint: BreakPoints;
     as?: React.ElementType;
+    fallback?: React.ElementType;
+    classNameFallback?: string;
 };
-export declare function MediaWrapper({ breakpoint, as, ...props }: MediaWrapperProps): any;
+export declare function MediaWrapper({ breakpoint, as, fallback, classNameFallback, className: classNameOriginal, ...props }: MediaWrapperProps): any;
 export {};

package/dist/components/media-wrapper.js

@@ -1,10 +1,14 @@
-"use client";
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
-import { useMediaQuery } from "../hooks";
-export function MediaWrapper({ breakpoint, as = "div", ...props }) {
-    const overMedia = useMediaQuery(breakpoint.split("-").pop());
-    const isMax = breakpoint.startsWith("max");
-    const Wrapper = overMedia === isMax ? React.Fragment : as;
-    return _jsx(Wrapper, { ...props });
+import * as React from 'react';
+import { useMediaQuery } from '../hooks';
+export function MediaWrapper({ breakpoint, as = 'div', fallback = React.Fragment, classNameFallback, className: classNameOriginal, ...props }) {
+    const overMedia = useMediaQuery(breakpoint.split('-').pop());
+    const isMax = breakpoint.startsWith('max');
+    const useFallback = overMedia === isMax;
+    // Conditionally determining which component to render,
+    // and what className should be passed to it.
+    const Wrapper = useFallback ? fallback : as;
+    const className = useFallback ? classNameFallback : classNameOriginal;
+    return _jsx(Wrapper, { className: className, ...props });
 }

package/dist/components/responsive-indicator.d.ts

@@ -1,2 +1,2 @@
-import * as React from "react";
+import * as React from 'react';
 export declare const ResponsiveIndicator: React.FC;

package/dist/components/responsive-indicator.js

@@ -1,6 +1,6 @@
-"use client";
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
+import * as React from 'react';
 export const ResponsiveIndicator = () => {
     const [viewportWidth, setViewportWidth] = React.useState(window.innerWidth);
     const [position, setPosition] = React.useState(0); // State to manage button position
@@ -8,60 +8,60 @@ export const ResponsiveIndicator = () => {
         const handleResize = () => {
             setViewportWidth(window.innerWidth);
         };
-        window.addEventListener("resize", handleResize);
+        window.addEventListener('resize', handleResize);
         return () => {
-            window.removeEventListener("resize", handleResize);
+            window.removeEventListener('resize', handleResize);
         };
     }, []);
     // Function to handle button click
     const handleClick = () => {
         setPosition((prevPosition) => (prevPosition + 1) % 4); // Cycle through positions
     };
-    let text = "";
+    let text = '';
     if (viewportWidth < 640) {
-        text = "xs";
+        text = 'xs';
     }
     else if (viewportWidth >= 640 && viewportWidth < 768) {
-        text = "sm";
+        text = 'sm';
     }
     else if (viewportWidth >= 768 && viewportWidth < 1024) {
-        text = "md";
+        text = 'md';
     }
     else if (viewportWidth >= 1024 && viewportWidth < 1280) {
-        text = "lg";
+        text = 'lg';
     }
     else if (viewportWidth >= 1280 && viewportWidth < 1536) {
-        text = "xl";
+        text = 'xl';
     }
     else {
-        text = "2xl";
+        text = '2xl';
     }
     // Define positions
     const positions = [
-        { bottom: "2rem", left: "2rem" }, // Bottom left
-        { bottom: "2rem", right: "2rem" }, // Bottom right
-        { top: "2rem", right: "2rem" }, // Top right
-        { top: "2rem", left: "2rem" }, // Top left
+        { bottom: '2rem', left: '2rem' }, // Bottom left
+        { bottom: '2rem', right: '2rem' }, // Bottom right
+        { top: '2rem', right: '2rem' }, // Top right
+        { top: '2rem', left: '2rem' }, // Top left
     ];
     const buttonStyle = {
-        position: "fixed",
+        position: 'fixed',
         zIndex: 50,
-        display: "grid",
-        height: "2.5rem",
-        width: "2.5rem",
-        borderRadius: "50%",
-        placeContent: "center",
-        backgroundColor: "#2d3748",
-        fontFamily: "Courier New, Courier, monospace",
-        fontSize: "1rem",
-        color: "#ffffff",
-        border: "2px solid #4a5568",
-        boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
-        padding: "0.5rem",
-        transition: "all 0.2s ease-in-out",
+        display: 'grid',
+        height: '2.5rem',
+        width: '2.5rem',
+        borderRadius: '50%',
+        placeContent: 'center',
+        backgroundColor: '#2d3748',
+        fontFamily: 'Courier New, Courier, monospace',
+        fontSize: '1rem',
+        color: '#ffffff',
+        border: '2px solid #4a5568',
+        boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+        padding: '0.5rem',
+        transition: 'all 0.2s ease-in-out',
         ...positions[position], // Apply the current position
     };
-    if (process.env.NODE_ENV === "production")
+    if (process.env.NODE_ENV === 'production')
         return null;
     return (_jsx("button", { type: "button", style: buttonStyle, onClick: handleClick, children: text }));
 };

package/dist/functions/index.d.ts

@@ -1,4 +1,6 @@
 import { type ClassValue } from 'clsx';
+import type * as React from 'react';
 export declare function cn(...inputs: ClassValue[]): string;
 export declare function isNavActive(href: string, path: string): boolean;
 export declare function cleanSrc(src: string): string;
+export declare const scrollTo: (containerSelector: string | React.RefObject<HTMLDivElement>, to: "top" | "bottom") => void;

package/dist/functions/index.js

@@ -12,3 +12,21 @@ export function cleanSrc(src) {
         return src.replace('/public/', '/');
     return src;
 }
+export const scrollTo = (containerSelector, to) => {
+    let container;
+    if (typeof containerSelector === 'string') {
+        container = document.querySelector(containerSelector);
+    }
+    else if (containerSelector.current) {
+        container = containerSelector.current;
+    }
+    else {
+        return;
+    }
+    if (container) {
+        container.scrollTo({
+            top: to === 'top' ? 0 : container.scrollHeight - container.clientHeight,
+            behavior: 'smooth',
+        });
+    }
+};

package/dist/hooks/index.d.ts

@@ -1,6 +1,6 @@
-import { type Dispatch, type EffectCallback, type SetStateAction } from "react";
+import { type Dispatch, type EffectCallback, type SetStateAction } from 'react';
 export declare const useClickOutside: (callback?: () => void) => any;
-export declare function useMediaQuery(tailwindBreakpoint: "sm" | "md" | "lg" | "xl" | "2xl" | `(${string})`): any;
+export declare function useMediaQuery(tailwindBreakpoint: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | `(${string})`): any;
 export declare function useEffectOnce(effect: EffectCallback): void;
 export declare function useUpdateEffect(effect: EffectCallback, deps: any[]): void;
 export declare function useDebounce<T>(state: T, delay?: number): T;
@@ -10,4 +10,20 @@ export declare function useWindowEvent<K extends string = keyof WindowEventMap>(
 type LocalStorageValue<T> = [T, Dispatch<SetStateAction<T>>];
 export declare const useLocalStorage: <T extends Record<string, any>>(key: string, defaultValue: T) => LocalStorageValue<T>;
 export declare const useUrlParams: <T extends string | number | boolean>(key: string, defaultValue: T) => [T, (value: T) => void];
+interface UseAsyncOptions<T extends (...args: any) => any> {
+    initialArgs?: Parameters<T>[0];
+    callback?: {
+        onSuccess?: (result: T) => void;
+        onError?: (error: Error) => void;
+        onExecute?: () => void;
+        onSettle?: () => void;
+    };
+    mode?: 'onLoad' | 'onTrigger';
+}
+export declare const useAsync: <T extends (...args: any) => any>(fn: T, opts?: UseAsyncOptions<T>) => {
+    execute: any;
+    isLoading: any;
+    result: any;
+    error: any;
+};
 export {};

package/dist/hooks/index.js

@@ -1,6 +1,6 @@
-"use client";
-import { useEffect, useLayoutEffect, useMemo, useRef, useState, } from "react";
-export const useClickOutside = (callback = () => alert("clicked outside")) => {
+'use client';
+import { useEffect, useLayoutEffect, useMemo, useTransition, useCallback, useRef, useState, } from 'react';
+export const useClickOutside = (callback = () => alert('clicked outside')) => {
     const ref = useRef(null);
     const listener = (e) => {
         if (ref.current && !ref.current.contains(e.target)) {
@@ -8,11 +8,11 @@ export const useClickOutside = (callback = () => alert("clicked outside")) => {
         }
     };
     useEffect(() => {
-        document.addEventListener("mousedown", listener);
-        document.addEventListener("touchstart", listener);
+        document.addEventListener('mousedown', listener);
+        document.addEventListener('touchstart', listener);
         return () => {
-            document.removeEventListener("mousedown", listener);
-            document.removeEventListener("touchstart", listener);
+            document.removeEventListener('mousedown', listener);
+            document.removeEventListener('touchstart', listener);
         };
     });
     return ref;
@@ -20,22 +20,22 @@ export const useClickOutside = (callback = () => alert("clicked outside")) => {
 export function useMediaQuery(tailwindBreakpoint) {
     const parsedQuery = useMemo(() => {
         switch (tailwindBreakpoint) {
-            case "sm":
-                return "(min-width: 640px)";
-            case "md":
-                return "(min-width: 768px)";
-            case "lg":
-                return "(min-width: 1024px)";
-            case "xl":
-                return "(min-width: 1280px)";
-            case "2xl":
-                return "(min-width: 1536px)";
+            case 'sm':
+                return '(min-width: 640px)';
+            case 'md':
+                return '(min-width: 768px)';
+            case 'lg':
+                return '(min-width: 1024px)';
+            case 'xl':
+                return '(min-width: 1280px)';
+            case '2xl':
+                return '(min-width: 1536px)';
             default:
                 return tailwindBreakpoint;
         }
     }, [tailwindBreakpoint]);
     const getMatches = (parsedQuery) => {
-        if (typeof window !== "undefined") {
+        if (typeof window !== 'undefined') {
             return window.matchMedia(parsedQuery).matches;
         }
         return false;
@@ -47,16 +47,14 @@ export function useMediaQuery(tailwindBreakpoint) {
     useEffect(() => {
         const matchMedia = window.matchMedia(parsedQuery);
         handleChange();
-        matchMedia.addEventListener("change", handleChange);
+        matchMedia.addEventListener('change', handleChange);
         return () => {
-            matchMedia.removeEventListener("change", handleChange);
+            matchMedia.removeEventListener('change', handleChange);
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [parsedQuery]);
     return matches;
 }
 export function useEffectOnce(effect) {
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     useEffect(effect, []);
 }
 export function useUpdateEffect(effect, deps) {
@@ -81,7 +79,7 @@ export function useDebounce(state, delay = 500) {
     }, [state, delay]);
     return debouncedState;
 }
-export const useIsomorphicEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+export const useIsomorphicEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
 export function useTimeout(callback, delay = 1000) {
     const savedCallback = useRef(callback);
     useIsomorphicEffect(() => {
@@ -114,7 +112,7 @@ export const useLocalStorage = (key, defaultValue) => {
     // Function to update the stored value in local storage and state
     const updateStoredValue = (valueOrFn) => {
         let newValue;
-        if (typeof valueOrFn === "function") {
+        if (typeof valueOrFn === 'function') {
             const updateFunction = valueOrFn;
             newValue = updateFunction(storedValue);
         }
@@ -141,8 +139,48 @@ export const useUrlParams = (key, defaultValue) => {
     const updateValue = (newValue) => {
         const params = new URLSearchParams(window.location.search);
         params.set(key, String(newValue));
-        window.history.pushState({}, "", `${window.location.pathname}?${params}`);
+        window.history.pushState({}, '', `${window.location.pathname}?${params}`);
         setValue(newValue);
     };
     return [value, updateValue];
 };
+export const useAsync = (fn, opts = {}) => {
+    const { initialArgs, callback = {}, mode = "onTrigger" } = opts;
+    const { onSuccess, onError, onExecute, onSettle } = callback;
+    const [isLoading, setIsLoading] = useState(false);
+    const [result, setValue] = useState(null);
+    const [error, setError] = useState(null);
+    const [isPending, startTransition] = useTransition();
+    const execute = useCallback(async (args) => {
+        setIsLoading(true);
+        setValue(null);
+        setError(null);
+        onExecute?.();
+        try {
+            startTransition(async () => {
+                const response = await fn(args);
+                setValue(response);
+                onSuccess?.(response);
+            });
+        }
+        catch (error) {
+            setError(error);
+            onError?.(error);
+        }
+        finally {
+            setIsLoading(false);
+            onSettle?.();
+        }
+    }, [fn, onExecute, onSuccess, onError, onSettle]);
+    useEffect(() => {
+        if (mode === 'onLoad') {
+            execute(initialArgs);
+        }
+    }, []);
+    return {
+        execute,
+        isLoading: isLoading || isPending,
+        result,
+        error,
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sohanemon/utils",
-  "version": "4.0.15",
+  "version": "4.0.17",
   "description": "",
   "type": "module",
   "source": "./src/index.ts",
@@ -8,12 +8,15 @@
   "types": "./dist/index.d.ts",
   "exports": {
     ".": "./dist/index.js",
+    "./core": "./dist/index.js",
     "./hooks": "./dist/hooks/index.js",
-    "./components": "./dist/components/index.js",
-    "./package.json": "./package.json"
+    "./components": "./dist/components/index.js"
   },
   "typesVersions": {
     "*": {
+      "core": [
+        "dist/index.d.ts"
+      ],
       "hooks": [
         "dist/hooks/index.d.ts"
       ],
@@ -26,6 +29,11 @@
     "dist",
     "README.md"
   ],
+  "scripts": {
+    "build": "tsc",
+    "build:watch": "tsc --watch",
+    "export": "tsc && npm publish"
+  },
   "keywords": [
     "utils",
     "cn"
@@ -40,10 +48,5 @@
     "clsx": "^2.0.0",
     "react": "^18.2.0",
     "tailwind-merge": "^1.14.0"
-  },
-  "scripts": {
-    "build": "tsc",
-    "build:watch": "tsc --watch",
-    "export": "tsc && npm publish"
   }
-}
+}