@superrb/react-addons 1.0.0

package/hooks/use-hide-on-scroll.js

@@ -0,0 +1,35 @@
+import { useEventListener } from "../hooks";
+import { useCallback, useEffect, useState } from "react";
+const useHideOnScroll = (hiddenOnLoad = false) => {
+    const [hidden, setHidden] = useState(hiddenOnLoad);
+    const handleScroll = useCallback(() => {
+        const previousY = window.scrollY;
+        setTimeout(() => {
+            const y = window.scrollY;
+            if (y <= 50) {
+                setHidden(false);
+                return;
+            }
+            if (y > previousY + 10) {
+                setHidden(true);
+            }
+            if (y < previousY - 10) {
+                setHidden(false);
+            }
+        }, 100);
+    }, [setHidden]);
+    const handleLoad = useCallback(() => {
+        if (window.scrollY > 0) {
+            setHidden(true);
+        }
+    }, [setHidden]);
+    useEffect(() => {
+        handleScroll();
+    }, []);
+    useEventListener("scroll", handleScroll, { passive: true }, typeof window !== "undefined" ? window : undefined);
+    useEventListener("resize", handleLoad, { passive: true }, typeof window !== "undefined" ? window : undefined);
+    useEventListener("popstate", handleLoad, { passive: true }, typeof window !== "undefined" ? window : undefined);
+    useEventListener("pageshow", handleLoad, { passive: true }, typeof window !== "undefined" ? window : undefined);
+    return hidden;
+};
+export default useHideOnScroll;

package/hooks/use-id.d.ts

@@ -0,0 +1,3 @@
+declare const useId: (prefix: string) => string;
+export default useId;
+//# sourceMappingURL=use-id.d.ts.map

package/hooks/use-id.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-id.d.ts","sourceRoot":"","sources":["../src/hooks/use-id.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,KAAK,WAAY,MAAM,WAU5B,CAAA;AAED,eAAe,KAAK,CAAA"}

package/hooks/use-id.js

@@ -0,0 +1,9 @@
+import { useEffect, useState } from 'react';
+const useId = (prefix) => {
+    const [id, setId] = useState(`${prefix}-${Math.random().toString(36).substring(2, 9)}`);
+    useEffect(() => {
+        setId(`${prefix}-${Math.random().toString(36).substring(2, 9)}`);
+    }, [prefix]);
+    return id;
+};
+export default useId;

package/hooks/use-is-in-viewport.d.ts

@@ -0,0 +1,6 @@
+declare const useIsInViewport: (initial?: boolean, rootMargin?: string, threshold?: number[]) => {
+    isInViewport: boolean;
+    setRef: (ref: HTMLElement | null) => Promise<void>;
+};
+export default useIsInViewport;
+//# sourceMappingURL=use-is-in-viewport.d.ts.map

package/hooks/use-is-in-viewport.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-is-in-viewport.d.ts","sourceRoot":"","sources":["../src/hooks/use-is-in-viewport.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,eAAe;;kBAgEQ,WAAW,GAAG,IAAI;CAe9C,CAAA;AAED,eAAe,eAAe,CAAA"}

package/hooks/use-is-in-viewport.js

@@ -0,0 +1,64 @@
+import { useEffect, useRef, useState } from 'react';
+const useIsInViewport = (initial = false, rootMargin = '0px 0px', threshold = [0, 0.25, 0.5, 0.75, 1]) => {
+    const [isInViewport, setIsInViewport] = useState(initial);
+    const element = useRef();
+    const observer = useRef();
+    useEffect(() => {
+        if (!observer.current) {
+            observer.current = new IntersectionObserver(entries => {
+                entries.forEach(entry => {
+                    setIsInViewport(entry.isIntersecting && entry.intersectionRatio > 0);
+                });
+            }, {
+                rootMargin,
+                threshold,
+            });
+        }
+        return () => {
+            if (observer.current) {
+                observer.current.disconnect();
+                observer.current = null;
+            }
+        };
+    }, []);
+    const waitForObserver = () => {
+        return new Promise((resolve, reject) => {
+            if (observer.current) {
+                resolve(observer.current);
+                return;
+            }
+            let waitTimer;
+            const rejectionTimer = setTimeout(() => {
+                clearTimeout(waitTimer);
+                reject(new Error('Timeout waiting for observer'));
+            }, 5000);
+            const wait = () => {
+                if (observer.current) {
+                    clearTimeout(rejectionTimer);
+                    clearTimeout(waitTimer);
+                    resolve(observer.current);
+                    return;
+                }
+                waitTimer = setTimeout(wait, 1000);
+                return;
+            };
+            wait();
+        });
+    };
+    const setRef = async (ref) => {
+        element.current = ref;
+        if (ref) {
+            try {
+                const observer = await waitForObserver();
+                observer.observe(ref);
+            }
+            catch (error) {
+                // If IntersectionObserver fails, just set isInViewport to true
+                console.error(error);
+                setIsInViewport(true);
+            }
+        }
+    };
+    return { isInViewport, setRef };
+};
+export default useIsInViewport;

package/hooks/use-is-mobile.d.ts

@@ -0,0 +1,3 @@
+declare const useIsMobile: (initial?: boolean, size?: string) => boolean;
+export default useIsMobile;
+//# sourceMappingURL=use-is-mobile.d.ts.map

package/hooks/use-is-mobile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-is-mobile.d.ts","sourceRoot":"","sources":["../src/hooks/use-is-mobile.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,WAAW,+CAiBhB,CAAA;AAED,eAAe,WAAW,CAAA"}

package/hooks/use-is-mobile.js

@@ -0,0 +1,16 @@
+import { useCallback, useEffect, useState } from 'react';
+const useIsMobile = (initial = true, size = '63.75em') => {
+    const [isMobile, setIsMobile] = useState(initial);
+    const setScreenSize = useCallback(() => {
+        setIsMobile(!window.matchMedia(`(min-width: ${size})`).matches);
+    }, [setIsMobile]);
+    useEffect(() => {
+        setScreenSize();
+        window.addEventListener('resize', setScreenSize);
+        return () => {
+            window.removeEventListener('resize', setScreenSize);
+        };
+    }, [setScreenSize]);
+    return isMobile;
+};
+export default useIsMobile;

package/hooks/use-lock-body-scroll.d.ts

@@ -0,0 +1,3 @@
+declare function useLockBodyScroll(toggle: boolean): void;
+export default useLockBodyScroll;
+//# sourceMappingURL=use-lock-body-scroll.d.ts.map

package/hooks/use-lock-body-scroll.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-lock-body-scroll.d.ts","sourceRoot":"","sources":["../src/hooks/use-lock-body-scroll.ts"],"names":[],"mappings":"AAEA,iBAAS,iBAAiB,CAAC,MAAM,EAAE,OAAO,GAAG,IAAI,CAOhD;AAED,eAAe,iBAAiB,CAAA"}

package/hooks/use-lock-body-scroll.js

@@ -0,0 +1,10 @@
+import { useEffect } from 'react';
+function useLockBodyScroll(toggle) {
+    useEffect(() => {
+        document.body.style.overflow = toggle ? 'hidden' : 'unset';
+        return () => {
+            document.body.style.overflow = 'unset';
+        };
+    }, [toggle]);
+}
+export default useLockBodyScroll;

package/hooks/use-modal.d.ts

@@ -0,0 +1,7 @@
+declare const useModal: (name: string) => {
+    isOpen: boolean;
+    openModal: () => void;
+    closeModal: () => void;
+};
+export default useModal;
+//# sourceMappingURL=use-modal.d.ts.map

package/hooks/use-modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-modal.d.ts","sourceRoot":"","sources":["../src/hooks/use-modal.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,QAAQ,SAAU,MAAM;;;;CAa7B,CAAA;AAED,eAAe,QAAQ,CAAA"}

package/hooks/use-modal.js

@@ -0,0 +1,15 @@
+import { useContext, useEffect, useState } from "react";
+import { ModalContext } from "../context";
+const useModal = (name) => {
+    const [open, setOpen] = useState(false);
+    const { openState, openModal, closeModal } = useContext(ModalContext);
+    useEffect(() => {
+        setOpen(openState[name]);
+    }, [openState[name]]);
+    return {
+        isOpen: open,
+        openModal: () => openModal(name),
+        closeModal: () => closeModal(name),
+    };
+};
+export default useModal;

package/hooks/use-motion-allowed.d.ts

@@ -0,0 +1,3 @@
+declare const useMotionAllowed: () => boolean;
+export default useMotionAllowed;
+//# sourceMappingURL=use-motion-allowed.d.ts.map

package/hooks/use-motion-allowed.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-motion-allowed.d.ts","sourceRoot":"","sources":["../src/hooks/use-motion-allowed.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,gBAAgB,eAUrB,CAAA;AAED,eAAe,gBAAgB,CAAA"}

package/hooks/use-motion-allowed.js

@@ -0,0 +1,9 @@
+import { useEffect, useState } from 'react';
+const useMotionAllowed = () => {
+    const [motionAllowed, setMotionAllowed] = useState(true);
+    useEffect(() => {
+        setMotionAllowed(!window.matchMedia('(prefers-reduced-motion: reduce)').matches);
+    }, [setMotionAllowed]);
+    return motionAllowed;
+};
+export default useMotionAllowed;

package/hooks/use-parallax.d.ts

@@ -0,0 +1,3 @@
+declare const useParallax: (items: HTMLElement[], flag?: boolean) => void;
+export default useParallax;
+//# sourceMappingURL=use-parallax.d.ts.map

package/hooks/use-parallax.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-parallax.d.ts","sourceRoot":"","sources":["../src/hooks/use-parallax.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,WAAW,UAAW,WAAW,EAAE,SAAQ,OAAO,SA6BvD,CAAA;AAED,eAAe,WAAW,CAAA"}

package/hooks/use-parallax.js

@@ -0,0 +1,18 @@
+import { useEventListener, useMotionAllowed } from "../hooks";
+import { useCallback } from "react";
+const useParallax = (items, flag = true) => {
+    const isMotionAllowed = useMotionAllowed();
+    const onScroll = useCallback((event) => {
+        items.forEach((item, index) => {
+            if (!item) {
+                return;
+            }
+            const box = item.getBoundingClientRect();
+            requestAnimationFrame(() => {
+                item.style.transform = `translate3d(0, ${(box.top / window.innerHeight) * 100 * (1 + index / 500)}%, 0)`;
+            });
+        });
+    }, [items]);
+    useEventListener("scroll", onScroll, { passive: true }, undefined, flag && isMotionAllowed);
+};
+export default useParallax;

package/hooks.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Hooks
+ */
+import useAsync from "./hooks/use-async";
+import useDraggableScroll from "./hooks/use-draggable-scroll";
+import useEventListener from "./hooks/use-event-listener";
+import useHideOnScroll from "./hooks/use-hide-on-scroll";
+import useId from "./hooks/use-id";
+import useIsInViewport from "./hooks/use-is-in-viewport";
+import useIsMobile from "./hooks/use-is-mobile";
+import useLockBodyScroll from "./hooks/use-lock-body-scroll";
+import useModal from "./hooks/use-modal";
+import useMotionAllowed from "./hooks/use-motion-allowed";
+import useParallax from "./hooks/use-parallax";
+export { useAsync, useDraggableScroll, useEventListener, useHideOnScroll, useId, useIsInViewport, useIsMobile, useLockBodyScroll, useModal, useMotionAllowed, useParallax, };
+//# sourceMappingURL=hooks.d.ts.map

package/hooks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["src/hooks.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,QAAQ,MAAM,mBAAmB,CAAA;AACxC,OAAO,kBAAkB,MAAM,8BAA8B,CAAA;AAC7D,OAAO,gBAAgB,MAAM,4BAA4B,CAAA;AACzD,OAAO,eAAe,MAAM,4BAA4B,CAAA;AACxD,OAAO,KAAK,MAAM,gBAAgB,CAAA;AAClC,OAAO,eAAe,MAAM,4BAA4B,CAAA;AACxD,OAAO,WAAW,MAAM,uBAAuB,CAAA;AAC/C,OAAO,iBAAiB,MAAM,8BAA8B,CAAA;AAC5D,OAAO,QAAQ,MAAM,mBAAmB,CAAA;AACxC,OAAO,gBAAgB,MAAM,4BAA4B,CAAA;AACzD,OAAO,WAAW,MAAM,sBAAsB,CAAA;AAE9C,OAAO,EACL,QAAQ,EACR,kBAAkB,EAClB,gBAAgB,EAChB,eAAe,EACf,KAAK,EACL,eAAe,EACf,WAAW,EACX,iBAAiB,EACjB,QAAQ,EACR,gBAAgB,EAChB,WAAW,GACZ,CAAA"}

package/hooks.js

@@ -0,0 +1,15 @@
+/**
+ * Hooks
+ */
+import useAsync from "./hooks/use-async";
+import useDraggableScroll from "./hooks/use-draggable-scroll";
+import useEventListener from "./hooks/use-event-listener";
+import useHideOnScroll from "./hooks/use-hide-on-scroll";
+import useId from "./hooks/use-id";
+import useIsInViewport from "./hooks/use-is-in-viewport";
+import useIsMobile from "./hooks/use-is-mobile";
+import useLockBodyScroll from "./hooks/use-lock-body-scroll";
+import useModal from "./hooks/use-modal";
+import useMotionAllowed from "./hooks/use-motion-allowed";
+import useParallax from "./hooks/use-parallax";
+export { useAsync, useDraggableScroll, useEventListener, useHideOnScroll, useId, useIsInViewport, useIsMobile, useLockBodyScroll, useModal, useMotionAllowed, useParallax, };

package/index.d.ts

@@ -0,0 +1,7 @@
+import * as Components from "./components";
+import * as Context from "./context";
+import * as Hooks from "./hooks";
+import * as Storage from "./storage";
+import * as Utils from "./utils";
+export { Components, Context, Hooks, Storage, Utils };
+//# sourceMappingURL=index.d.ts.map

package/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,UAAU,MAAM,cAAc,CAAA;AAC1C,OAAO,KAAK,OAAO,MAAM,WAAW,CAAA;AACpC,OAAO,KAAK,KAAK,MAAM,SAAS,CAAA;AAChC,OAAO,KAAK,OAAO,MAAM,WAAW,CAAA;AAEpC,OAAO,KAAK,KAAK,MAAM,SAAS,CAAA;AAEhC,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,CAAA"}

package/index.js

@@ -0,0 +1,7 @@
+import * as Components from "./components";
+import * as Context from "./context";
+import * as Hooks from "./hooks";
+import * as Storage from "./storage";
+// import * as Types from './types'
+import * as Utils from "./utils";
+export { Components, Context, Hooks, Storage, Utils };

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@superrb/react-addons",
+  "type": "module",
+  "version": "1.0.0",
+  "main": "index.js",
+  "repository": "https://github.com/superrbstudio/react-addons",
+  "author": "@molovo",
+  "license": "MIT",
+  "private": false,
+  "dependencies": {
+    "install-peers-cli": "^2.2.0",
+    "react-use-draggable-scroll": "^0.4.7"
+  },
+  "peerDependencies": {
+    "@prismicio/client": "^7.2.0",
+    "@prismicio/next": "^1.3.4",
+    "@superrb/react-addons": "^1.0.0",
+    "@types/node": "^20.5.7",
+    "@types/react": "^18.2.21",
+    "next": "^13.4.19",
+    "react": "^18.2.0",
+    "typescript": "^5.2.2"
+  },
+  "scripts": {
+    "build": "tsc",
+    "prepublishOnly": "yarn build",
+    "prepare": "install-peers",
+    "dev": "watch 'yarn build' ./src"
+  },
+  "devDependencies": {
+    "watch": "^1.0.2"
+  }
+}

package/storage.d.ts

@@ -0,0 +1,3 @@
+export declare const local: Storage;
+export declare const session: Storage;
+//# sourceMappingURL=storage.d.ts.map

package/storage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"storage.d.ts","sourceRoot":"","sources":["src/storage.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,KAAK,SAAqC,CAAA;AACvD,eAAO,MAAM,OAAO,SAAuC,CAAA"}

package/storage.js

@@ -0,0 +1,3 @@
+import { storageFactory } from "./utils/storage-factory";
+export const local = storageFactory(() => localStorage);
+export const session = storageFactory(() => sessionStorage);

package/tsconfig.json

@@ -0,0 +1,43 @@
+{
+  "compilerOptions": {
+    "target": "ES2021",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "ES2021"
+    ],
+    "declaration": true,
+    "declarationMap": true,
+    "allowJs": false,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": false,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": false,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "noUnusedLocals": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "outDir": ".",
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    }
+  },
+  "include": [
+    "src/**/*"
+  ],
+  "exclude": [
+    "node_modules",
+    "!src/**/*"
+  ]
+}