@sohanemon/utils 1.0.2 → 2.1.0

package/dist/components/index.d.ts

@@ -0,0 +1 @@
+export { Icon as Iconify } from '@iconify/react';

package/dist/components/index.js

@@ -0,0 +1 @@
+export { Icon as Iconify } from '@iconify/react';

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,14 +1,2 @@
-import { type ClassValue } from 'clsx';
-interface ColorObject {
-    [key: string]: string | {
-        DEFAULT: string;
-        foreground?: string;
-    };
-}
-export declare function cn(...inputs: ClassValue[]): string;
-export declare function isNavActive(href: string, path: string): boolean;
-export declare function kebabCase(camelCase: string): string;
-export declare function cssColorVariable(colors: Record<string, string>): Record<string, string>;
-export declare function cleanSrc(src: string): string;
-export declare function tailwindColorObject(input: Record<string, string>): ColorObject;
-export {};
+export { Iconify } from './components';
+export { cleanSrc, cn, isNavActive } from './functions';

package/dist/index.js

@@ -1,74 +1,3 @@
-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);
-}
-function hexToHSLFormatted(hexColor) {
-    const [r, g, b] = hexColor.match(/\w\w/g)?.map((c) => parseInt(c, 16) / 255);
-    const maxVal = Math.max(r, g, b), minVal = Math.min(r, g, b);
-    const lightness = (maxVal + minVal) / 2;
-    const delta = maxVal - minVal;
-    const saturation = delta === 0 ? 0 : delta / (1 - Math.abs(2 * lightness - 1));
-    let hue = delta !== 0
-        ? maxVal === r
-            ? ((g - b) / delta + (g < b ? 6 : 0)) * 60
-            : maxVal === g
-                ? ((b - r) / delta + 2) * 60
-                : ((r - g) / delta + 4) * 60
-        : 0;
-    if (hue < 0)
-        hue += 360;
-    return `${Math.round(hue)} ${Math.round(saturation * 100)}% ${Math.round(lightness * 100)}%`;
-}
-function extractHSLValues(input) {
-    if (input.includes('#'))
-        return hexToHSLFormatted(input);
-    const matches = input.match(/hsla?\(([\d.]+),\s*([\d.]+)%,\s*([\d.]+)%(?:,\s*[\d.]+)?\)/);
-    if (!matches)
-        throw new Error(`Invalid HSL format: ${input}`);
-    return `${matches[1]} ${matches[2]}% ${matches[3]}%`;
-}
-export function kebabCase(camelCase) {
-    return camelCase.replace(/[A-Z]+(?![a-z])|[A-Z]/g, ($, ofs) => (ofs ? '-' : '') + $.toLowerCase());
-}
-export function cssColorVariable(colors) {
-    const temp = {};
-    Object.keys(colors).map((key) => {
-        temp[`--${kebabCase(key)}`] = extractHSLValues(colors[key]);
-    });
-    return temp;
-}
-export function cleanSrc(src) {
-    if (src.includes('/public/'))
-        return src.replace('/public/', '/');
-    return src;
-}
-export function tailwindColorObject(input) {
-    const transformed = {};
-    for (const key in input) {
-        if (Object.prototype.hasOwnProperty.call(input, key)) {
-            if (key.endsWith('Foreground')) {
-                const baseKey = key.replace(/Foreground$/, '');
-                if (!transformed[baseKey]) {
-                    // @ts-ignore
-                    transformed[baseKey] = {};
-                }
-                // @ts-ignore
-                transformed[baseKey].foreground = `hsl(var(--${key}))`;
-            }
-            else {
-                if (!transformed[key]) {
-                    transformed[key] = { DEFAULT: `hsl(var(--${key}))` };
-                }
-                else {
-                    // @ts-ignore
-                    transformed[key].DEFAULT = `hsl(var(--${key}))`;
-                }
-            }
-        }
-    }
-    return transformed;
-}
+'use client';
+export { Iconify } from './components';
+export { cleanSrc, cn, isNavActive } from './functions';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sohanemon/utils",
-  "version": "1.0.2",
+  "version": "2.1.0",
   "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"