@weser/storage 0.0.3

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022-present Robin Weser
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,22 @@
+# @weser/storage
+
+<img alt="npm version" src="https://badge.fury.io/js/@weser%2Fstorage.svg"> <img alt="npm downloads" src="https://img.shields.io/npm/dm/@weser/storage.svg"> <a href="https://bundlephobia.com/result?p=@weser/storage@latest"><img alt="Bundlephobia" src="https://img.shields.io/bundlephobia/minzip/@weser/storage.svg"></a>
+
+## Installation
+
+```sh
+# npm
+npm i --save @weser/storage
+# yarn
+yarn add @weser/storage
+# pnpm
+pnpm add @weser/storage
+```
+
+## Documentation
+
+## License
+
+@weser/storage is licensed under the [MIT License](http://opensource.org/licenses/MIT).<br>
+Documentation is licensed under [Creative Common License](http://creativecommons.org/licenses/by/4.0/).<br>
+Created with ♥ by [@robinweser](http://weser.io).

package/dist/createIndexedStorage.d.ts

@@ -0,0 +1,6 @@
+export default function createIndexedStorage(database: string, table: string): {
+    setItem: (key: string, value: any) => Promise<void>;
+    getItem: (key: string) => Promise<any>;
+    removeItem: (key: string) => Promise<void>;
+    clear: () => Promise<void>;
+};

package/dist/createIndexedStorage.js

@@ -0,0 +1,32 @@
+import { openDB } from 'idb';
+export default function createIndexedStorage(database, table) {
+    const dbPromise = openDB(database, 1, {
+        upgrade(db) {
+            if (!db.objectStoreNames.contains(table)) {
+                db.createObjectStore(table);
+            }
+        },
+    });
+    async function setItem(key, value) {
+        const db = await dbPromise;
+        await db.put(table, value, key);
+    }
+    async function getItem(key) {
+        const db = await dbPromise;
+        return await db.get(table, key);
+    }
+    async function removeItem(key) {
+        const db = await dbPromise;
+        await db.delete(table, key);
+    }
+    async function clear() {
+        const db = await dbPromise;
+        await db.clear(table);
+    }
+    return {
+        setItem,
+        getItem,
+        removeItem,
+        clear,
+    };
+}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { default as useStorage } from './useStorage.js';
+export { default as useLocalStorage } from './useLocalStorage.js';
+export { default as useSessionStorage } from './useSessionStorage.js';
+export { default as useIndexedStorage } from './useIndexedStorage.js';
+export { default as createIndexedStorage } from './createIndexedStorage.js';

package/dist/index.js

@@ -0,0 +1,5 @@
+export { default as useStorage } from './useStorage.js';
+export { default as useLocalStorage } from './useLocalStorage.js';
+export { default as useSessionStorage } from './useSessionStorage.js';
+export { default as useIndexedStorage } from './useIndexedStorage.js';
+export { default as createIndexedStorage } from './createIndexedStorage.js';

package/dist/useClickAway.d.ts

@@ -0,0 +1,2 @@
+import { RefObject } from 'react';
+export default function useClickAway(ref: RefObject<HTMLElement | null>, callback: () => void, active?: boolean): void;

package/dist/useClickAway.js

@@ -0,0 +1,19 @@
+import { useEffect } from 'react';
+export default function useClickAway(ref, callback, active = true) {
+    useEffect(() => {
+        const onClickAway = (e) => {
+            if (active && ref.current) {
+                const isClickOnInner = ref.current.contains(e.target);
+                if (!isClickOnInner) {
+                    setTimeout(callback, 0);
+                }
+            }
+        };
+        document.addEventListener('mousedown', onClickAway);
+        document.addEventListener('touchstart', onClickAway);
+        return () => {
+            document.removeEventListener('mousedown', onClickAway);
+            document.removeEventListener('touchstart', onClickAway);
+        };
+    }, [ref, active, callback]);
+}

package/dist/useClientOnly.d.ts

@@ -0,0 +1 @@
+export default function useClientSide(): boolean;

package/dist/useClientOnly.js

@@ -0,0 +1,6 @@
+import { useEffect, useState } from 'react';
+export default function useClientSide() {
+    const [isClientSide, setClientSide] = useState(false);
+    useEffect(() => setClientSide(true), []);
+    return isClientSide;
+}

package/dist/useDisclosure.d.ts

@@ -0,0 +1,16 @@
+export default function useDisclosure(defaultExpanded?: boolean): {
+    toggleProps: {
+        id: string;
+        onClick: void;
+        type: string;
+        'aria-expanded': boolean;
+        'aria-controls': string;
+    };
+    contentProps: {
+        id: string;
+        'aria-hidden': boolean;
+        'aria-labelledby': string;
+    };
+    isExpanded: boolean;
+    toggle: void;
+};

package/dist/useDisclosure.js

@@ -0,0 +1,25 @@
+import { useState, useEffect, useId } from 'react';
+export default function useDisclosure(defaultExpanded = false) {
+    const [isExpanded, setExpanded] = useState(defaultExpanded);
+    const id = useId();
+    useEffect(() => setExpanded(defaultExpanded), [defaultExpanded]);
+    const toggle = setExpanded((isExpanded) => !isExpanded);
+    const toggleProps = {
+        id: id + '-toggle',
+        onClick: toggle,
+        type: 'button',
+        'aria-expanded': isExpanded,
+        'aria-controls': id + '-content',
+    };
+    const contentProps = {
+        id: id + '-content',
+        'aria-hidden': !isExpanded,
+        'aria-labelledby': id + '-toggle',
+    };
+    return {
+        toggleProps,
+        contentProps,
+        isExpanded,
+        toggle,
+    };
+}

package/dist/useFocusTrap.d.ts

@@ -0,0 +1,7 @@
+import { RefObject } from 'react';
+type Config = {
+    visible?: boolean;
+    autoFocus?: boolean;
+};
+export default function useFocusTrap(ref: RefObject<HTMLElement | null>, active: boolean, config?: Config): void;
+export {};

package/dist/useFocusTrap.js

@@ -0,0 +1,77 @@
+import { useEffect } from 'react';
+import useKeyDown from './useKeyDown.js';
+const focusableSelector = `:is(
+  a[href], 
+  area[href], 
+  input:not([disabled]), 
+  select:not([disabled]), 
+  textarea:not([disabled]), 
+  button:not([disabled]), 
+  [tabindex]:not([tabindex="-1"]), 
+  [contenteditable]
+)`;
+export default function useFocusTrap(ref, active, config = {}) {
+    const { visible, autoFocus = true } = config;
+    useKeyDown('Tab', (e) => {
+        const element = ref.current;
+        if (!active || !element) {
+            return;
+        }
+        const focusables = [
+            ...element.querySelectorAll(focusableSelector),
+        ].filter((el) => el.hasAttribute('tabindex')
+            ? el.getAttribute('tabindex') !== '-1'
+            : true);
+        const firstFocusable = focusables[0];
+        const lastFocusable = focusables[focusables.length - 1];
+        const activeElement = document.activeElement;
+        let nextElement;
+        if (activeElement && focusables.includes(activeElement)) {
+            const index = focusables.indexOf(activeElement);
+            if (e.shiftKey) {
+                if (index === 0) {
+                    nextElement = lastFocusable;
+                }
+            }
+            else {
+                if (index === focusables.length - 1) {
+                    nextElement = firstFocusable;
+                }
+            }
+        }
+        else {
+            if (e.shiftKey) {
+                nextElement = lastFocusable;
+            }
+            else {
+                nextElement = firstFocusable;
+            }
+        }
+        if (nextElement) {
+            ;
+            nextElement.focus();
+            e.preventDefault();
+        }
+    }, {
+        active,
+    });
+    useEffect(() => {
+        const element = ref.current;
+        if (!autoFocus || !visible || !element) {
+            return;
+        }
+        const autoFocusElement = element.querySelector('[data-autofocus="true"]' + focusableSelector);
+        if (autoFocusElement) {
+            // @ts-ignore
+            autoFocusElement.focus();
+            return;
+        }
+        const nodeList = element.querySelectorAll(focusableSelector);
+        const elements = Array.from(nodeList);
+        const focusableElements = elements.filter((element) => !element.hasAttribute('tabindex') ||
+            element.getAttribute('tabindex') === '0');
+        // 1. focus the first focusable
+        // @ts-ignore, TODO: fix typing
+        focusableElements[0]?.focus();
+    }, [visible, ref, autoFocus]);
+}

package/dist/useIndexedStorage.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { Config } from './useStorage.js';
+export default function useIndexedStorage<T>(database: string, table: string, key: string, initialState: T, config?: Config<T>): [T, import("react").Dispatch<import("react").SetStateAction<T>>, boolean];

package/dist/useIndexedStorage.js

@@ -0,0 +1,6 @@
+import useStorage from './useStorage.js';
+import createIndexedStorage from './createIndexedStorage.js';
+export default function useIndexedStorage(database, table, key, initialState, config) {
+    const storage = createIndexedStorage(database, table);
+    return useStorage(() => storage, key, initialState, config);
+}

package/dist/useKeyDown.d.ts

@@ -0,0 +1,7 @@
+import { RefObject } from 'react';
+type Options = {
+    target?: RefObject<HTMLElement>;
+    active?: boolean;
+};
+export default function useKeyDown(keyCode: string | Array<string>, callback: (e: KeyboardEvent) => void, options?: Options): void;
+export {};

package/dist/useKeyDown.js

@@ -0,0 +1,22 @@
+import { useEffect } from 'react';
+export default function useKeyDown(keyCode, callback, options = {}) {
+    const { active = true, target } = options;
+    const keyCodes = [].concat(keyCode);
+    useEffect(() => {
+        if (!active || target === null || target?.current === null) {
+            return;
+        }
+        const hasRef = target && target.current;
+        const element = hasRef ? target.current : document;
+        if (element) {
+            const handleKeyDown = (e) => {
+                if (keyCodes.includes(e.code) &&
+                    (!hasRef || (hasRef && document.activeElement === element))) {
+                    callback(e);
+                }
+            };
+            element.addEventListener('keydown', handleKeyDown);
+            return () => element.removeEventListener('keydown', handleKeyDown);
+        }
+    }, [target, callback, active, keyCode]);
+}

package/dist/useLocalStorage.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { Config } from './useStorage';
+export default function useLocalStorage<T = any>(key: string, initialState: T, config?: Config<T>): [T, import("react").Dispatch<import("react").SetStateAction<T>>, boolean];

package/dist/useLocalStorage.js

@@ -0,0 +1,4 @@
+import useStorage from './useStorage';
+export default function useLocalStorage(key, initialState, config) {
+    return useStorage(() => localStorage, key, initialState, config);
+}

package/dist/useOptimisticState.d.ts

@@ -0,0 +1,3 @@
+type FunctionalSetState<T> = (previousState: T) => T;
+export default function useOptimisticState<T>(initialState: T): [T, (newState: T | FunctionalSetState<T>) => void];
+export {};

package/dist/useOptimisticState.js

@@ -0,0 +1,11 @@
+import { useOptimistic } from 'react';
+export default function useOptimisticState(initialState) {
+    const [state, setState] = useOptimistic(initialState, (_, update) => update);
+    function setFunctionalState(newState) {
+        if (newState instanceof Function) {
+            return setState(newState(state));
+        }
+        return setState(newState);
+    }
+    return [state, setFunctionalState];
+}

package/dist/useRouteChange.d.ts

@@ -0,0 +1 @@
+export default function useRouteChange(onRouteChange: (path: string) => void, pathname?: string): void;

package/dist/useRouteChange.js

@@ -0,0 +1,19 @@
+import { useEffect } from 'react';
+export default function useRouteChange(onRouteChange, pathname) {
+    useEffect(() => {
+        if (pathname) {
+            onRouteChange(pathname);
+        }
+    }, [pathname]);
+    // track clicks on links with the current path
+    useEffect(() => {
+        const onClick = (e) => {
+            const target = e.target;
+            if (target.tagName === 'A' && target.href === pathname) {
+                onRouteChange(pathname);
+            }
+        };
+        window.addEventListener('click', onClick);
+        return () => window.removeEventListener('click', onClick);
+    }, []);
+}

package/dist/useScrollBlocking.d.ts

@@ -0,0 +1 @@
+export default function useScrollBlocking(active: boolean): void;

package/dist/useScrollBlocking.js

@@ -0,0 +1,28 @@
+import { useEffect } from 'react';
+let scrollTop;
+function blockScrolling(scrollElement) {
+    scrollTop = window.scrollY;
+    scrollElement.style.overflow = 'hidden';
+    scrollElement.style.position = 'fixed';
+    scrollElement.style.width = '100%';
+    scrollElement.style.top = -scrollTop + 'px';
+}
+function enableScrolling(scrollElement) {
+    scrollElement.style.removeProperty('position');
+    scrollElement.style.removeProperty('overflow');
+    scrollElement.style.removeProperty('top');
+    scrollElement.style.removeProperty('width');
+    window.scrollTo(0, scrollTop);
+}
+function toggleScrolling(isBlocked) {
+    const scrollElement = document.scrollingElement;
+    if (isBlocked) {
+        blockScrolling(scrollElement);
+    }
+    else {
+        enableScrolling(scrollElement);
+    }
+}
+export default function useScrollBlocking(active) {
+    useEffect(() => toggleScrolling(active), [active]);
+}

package/dist/useSessionStorage.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { Config } from './useStorage';
+export default function useSessionStorage<T = any>(key: string, initialState: T, config?: Config<T>): [T, import("react").Dispatch<import("react").SetStateAction<T>>, boolean];

package/dist/useSessionStorage.js

@@ -0,0 +1,4 @@
+import useStorage from './useStorage';
+export default function useSessionStorage(key, initialState, config) {
+    return useStorage(() => sessionStorage, key, initialState, config);
+}

package/dist/useStorage.d.ts

@@ -0,0 +1,12 @@
+import { Dispatch, SetStateAction } from 'react';
+type SyntheticStorage<T = any> = {
+    getItem: (key: string) => T | Promise<T>;
+    setItem: (key: string, value: T) => void | Promise<void>;
+};
+export type Config<T> = {
+    onHydrated?: (value?: T) => void;
+    encode?: (value: T) => any;
+    decode?: (value: any) => T;
+};
+export default function useStorage<T = any>(getStorage: () => Storage | SyntheticStorage, key: string, initialState: T, config?: Config<T>): [T, Dispatch<SetStateAction<T>>, boolean];
+export {};

package/dist/useStorage.js

@@ -0,0 +1,56 @@
+'use client';
+import { useEffect, useState } from 'react';
+export default function useStorage(getStorage, key, initialState, config = {}) {
+    const { onHydrated, encode = JSON.stringify, decode = JSON.parse } = config;
+    const [isLoading, setLoading] = useState(true);
+    // @ts-ignore
+    const [state, setState] = useState(initialState);
+    useEffect(() => {
+        if (!isLoading) {
+            return;
+        }
+        const storage = getStorage();
+        if (storage) {
+            const isAsync = storage.getItem.constructor.name === 'AsyncFunction';
+            async function getStorageValue() {
+                if (isAsync) {
+                    return await storage.getItem(key);
+                }
+                else {
+                    return storage.getItem(key);
+                }
+            }
+            async function hydrate() {
+                const data = await getStorageValue();
+                let parsedValue;
+                if (data) {
+                    try {
+                        parsedValue = decode(data);
+                        setState(parsedValue);
+                    }
+                    catch (e) { }
+                }
+                setLoading(false);
+                if (onHydrated) {
+                    onHydrated(parsedValue);
+                }
+            }
+            hydrate();
+        }
+        else {
+            setLoading(false);
+        }
+    }, []);
+    useEffect(() => {
+        if (!isLoading) {
+            const storage = getStorage();
+            if (storage) {
+                try {
+                    storage.setItem(key, encode(state));
+                }
+                catch (e) { }
+            }
+        }
+    }, [isLoading, state]);
+    return [state, setState, isLoading];
+}

package/dist/useTrigger.d.ts

@@ -0,0 +1,7 @@
+import { RefObject } from 'react';
+type Props = {
+    defaultVisible?: boolean;
+    getTrigger?: () => HTMLElement | null;
+};
+export default function useTrigger({ defaultVisible, getTrigger, }?: Props): [boolean, (visible: boolean) => void, RefObject<HTMLElement>];
+export {};

package/dist/useTrigger.js

@@ -0,0 +1,24 @@
+import { useEffect, useRef, useState } from 'react';
+export default function useTrigger({ defaultVisible = false, getTrigger, } = {}) {
+    const triggerRef = useRef(null);
+    const [isVisible, _setVisible] = useState(false);
+    function getTriggerElement() {
+        if (getTrigger) {
+            return getTrigger();
+        }
+        return triggerRef.current;
+    }
+    function setVisible(visible) {
+        if (isVisible !== visible) {
+            _setVisible(visible);
+            if (!visible) {
+                const trigger = getTriggerElement();
+                if (trigger) {
+                    trigger.focus();
+                }
+            }
+        }
+    }
+    useEffect(() => _setVisible(defaultVisible), [defaultVisible]);
+    return [isVisible, setVisible, triggerRef];
+}

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@weser/storage",
+  "version": "0.0.3",
+  "description": "React hooks for working with persisted state",
+  "author": "Robin Weser <robin@weser.io>",
+  "license": "MIT",
+  "homepage": "https://github.com/robinweser/weser.git",
+  "repository": "https://github.com/robinweser/weser.git",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "LICENSE",
+    "README.md",
+    "dist/**"
+  ],
+  "browserslist": [
+    "IE >= 11",
+    "Firefox >= 60",
+    "Safari >= 11.1",
+    "Chrome >= 66",
+    "ChromeAndroid >= 66",
+    "iOS >= 11.3",
+    "Edge >= 15"
+  ],
+  "scripts": {
+    "setup": "pnpm build",
+    "clean": "rimraf dist",
+    "build": "tsc -b",
+    "dev": "pnpm build -w",
+    "test": "echo 1"
+  },
+  "keywords": [
+    "react",
+    "react-hook",
+    "react hooks",
+    "hooks",
+    "persisted state",
+    "storage",
+    "local storage",
+    "session storage",
+    "indexed db",
+    "utils"
+  ],
+  "dependencies": {
+    "idb": "^8.0.1"
+  },
+  "peerDependencies": {
+    "react": ">19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "ava": "^6.1.3",
+    "react": "^19.0.0",
+    "rimraf": "^3.0.2",
+    "typescript": "^5.4.5"
+  },
+  "gitHead": "de1f00e9f6100c1e0ccfdb8145af827e027c280a"
+}