@sohanemon/utils 2.0.0 → 2.1.1

package/dist/components/index.d.ts

@@ -0,0 +1,2 @@
+export { Icon as Iconify } from '@iconify/react';
+export declare function TailwindIndicator(): any;

package/dist/components/index.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export { Icon as Iconify } from '@iconify/react';
+export function TailwindIndicator() {
+    if (process.env.NODE_ENV === 'production')
+        return null;
+    return (_jsxs("div", { className: 'fixed bottom-1 left-1 z-50 flex h-6 w-6 items-center justify-center rounded-full bg-gray-800 p-3 font-mono text-xs text-white', children: [_jsx("div", { className: 'block sm:hidden', children: "xs" }), _jsx("div", { className: 'hidden sm:block md:hidden', children: "sm" }), _jsx("div", { className: 'hidden md:block lg:hidden', children: "md" }), _jsx("div", { className: 'hidden lg:block xl:hidden', children: "lg" }), _jsx("div", { className: 'hidden xl:block 2xl:hidden', children: "xl" }), _jsx("div", { className: 'hidden 2xl:block', children: "2xl" })] }));
+}

package/dist/functions/index.d.ts

@@ -0,0 +1,4 @@
+import { type ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;
+export declare function isNavActive(href: string, path: string): boolean;
+export declare function cleanSrc(src: string): string;

package/dist/functions/index.js

@@ -0,0 +1,13 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}
+export function isNavActive(href, path) {
+    return href === '/' ? path === '/' : path?.includes(href);
+}
+export function cleanSrc(src) {
+    if (src.includes('/public/'))
+        return src.replace('/public/', '/');
+    return src;
+}

package/dist/hooks/index.d.ts

@@ -0,0 +1,9 @@
+import { EffectCallback } from 'react';
+export declare const useClickOutside: (callback?: () => void) => any;
+export declare function useMediaQuery(tailwindBreakpoint: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | `(${string})`): any;
+export declare const useSwiperRef: () => any[];
+export declare function useEffectOnce(effect: EffectCallback): void;
+export declare function useUpdateEffect(effect: EffectCallback, deps: any[]): void;
+export declare const useIsomorphicEffect: any;
+export declare function useTimeout(callback: () => void, delay?: number | null): void;
+export declare function useWindowEvent<K extends string = keyof WindowEventMap>(type: K, listener: K extends keyof WindowEventMap ? (this: Window, ev: WindowEventMap[K]) => void : (this: Window, ev: CustomEvent) => void, options?: boolean | AddEventListenerOptions): void;

package/dist/hooks/index.js

@@ -0,0 +1,115 @@
+import { useEffect, useLayoutEffect, useMemo, 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)) {
+            callback();
+        }
+    };
+    useEffect(() => {
+        document.addEventListener('mousedown', listener);
+        document.addEventListener('touchstart', listener);
+        return () => {
+            document.removeEventListener('mousedown', listener);
+            document.removeEventListener('touchstart', listener);
+        };
+    });
+    return ref;
+};
+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)';
+            default:
+                return tailwindBreakpoint;
+        }
+    }, [tailwindBreakpoint]);
+    const getMatches = (parsedQuery) => {
+        if (typeof window !== 'undefined') {
+            return window.matchMedia(parsedQuery).matches;
+        }
+        return false;
+    };
+    const [matches, setMatches] = useState(getMatches(parsedQuery));
+    function handleChange() {
+        setMatches(getMatches(parsedQuery));
+    }
+    useEffect(() => {
+        const matchMedia = window.matchMedia(parsedQuery);
+        handleChange();
+        matchMedia.addEventListener('change', handleChange);
+        return () => {
+            matchMedia.removeEventListener('change', handleChange);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [parsedQuery]);
+    return matches;
+}
+export const useSwiperRef = () => {
+    const [navigationElement, setNavigationElement] = useState(null);
+    const ref = useRef(null);
+    useEffect(() => {
+        setNavigationElement(ref.current);
+    }, []);
+    return [navigationElement, ref];
+};
+// call the hook
+// const [nextEl, nextRef] = useSwiperRef();
+// const [prevEl, prevRef] = useSwiperRef();
+// add to navigation module
+// <Swiper
+//   modules={[Navigation]}
+//   navigation={{
+//     prevEl,
+//     nextEl,
+//   }}
+// >
+//   ...
+// </Swiper>;
+// add ref to any element which may trigger
+// <button ref={nextRef}>...</button>;
+export function useEffectOnce(effect) {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useEffect(effect, []);
+}
+export function useUpdateEffect(effect, deps) {
+    const isInitialMount = useRef(true);
+    useEffect(() => {
+        if (isInitialMount.current) {
+            isInitialMount.current = false;
+        }
+        else {
+            return effect();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, deps);
+}
+export const useIsomorphicEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+export function useTimeout(callback, delay = 1000) {
+    const savedCallback = useRef(callback);
+    useIsomorphicEffect(() => {
+        savedCallback.current = callback;
+    }, [callback]);
+    useEffect(() => {
+        if (!delay && delay !== 0) {
+            return;
+        }
+        const id = setTimeout(() => savedCallback.current(), delay);
+        return () => clearTimeout(id);
+    }, [delay]);
+}
+export function useWindowEvent(type, listener, options) {
+    useEffect(() => {
+        window.addEventListener(type, listener, options);
+        return () => window.removeEventListener(type, listener, options);
+    }, [type, listener]);
+}

package/dist/index.d.ts

@@ -1,4 +1,3 @@
-import { type ClassValue } from 'clsx';
-export declare function cn(...inputs: ClassValue[]): string;
-export declare function isNavActive(href: string, path: string): boolean;
-export declare function cleanSrc(src: string): string;
+export * from './components';
+export * from './functions';
+export * from './hooks';

package/dist/index.js

@@ -1,13 +1,4 @@
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-export function cn(...inputs) {
-    return twMerge(clsx(inputs));
-}
-export function isNavActive(href, path) {
-    return href === '/' ? path === '/' : path?.includes(href);
-}
-export function cleanSrc(src) {
-    if (src.includes('/public/'))
-        return src.replace('/public/', '/');
-    return src;
-}
+'use client';
+export * from './components';
+export * from './functions';
+export * from './hooks';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sohanemon/utils",
-  "version": "2.0.0",
+  "version": "2.1.1",
   "description": "",
   "source": "./src/index.ts",
   "main": "./dist/index.js",
@@ -17,10 +17,10 @@
   "author": "sohanemon",
   "license": "ISC",
   "devDependencies": {
-    "@types/node": "^20.5.7",
     "typescript": "^5.2.2"
   },
   "dependencies": {
+    "@iconify/react": "^4.1.1",
     "clsx": "^2.0.0",
     "react": "^18.2.0",
     "tailwind-merge": "^1.14.0"