Local Storage Service and Hook

components/flex/package.json

@@ -23,7 +23,6 @@
   "scripts": {
     "build": "rollup --config",
     "clean": "rimraf dist && rimraf .turbo && rimraf node_modules && rimraf package-lock.json",
-    "test": "jest --config ../../jest.config.js --roots components/flex/src",
     "lint:check": "npm run eslint:check && npm run prettier:check && npm run stylelint:check",
     "lint:fix": "npm run eslint:fix && npm run prettier:fix && npm run stylelint:fix",
     "eslint:check": "eslint src --config ../../eslint.config.js",

hooks/use-intersection-observer/package.json

@@ -21,8 +21,7 @@
   "scripts": {
     "build": "tsc --project tsconfig.build.json",
     "clean": "rimraf dist && rimraf .turbo && rimraf node_modules && rimraf package-lock.json",
-    "lint": "eslint src --config ../../eslint.config.js",
-    "test": "jest --config ../../jest.config.js --roots hooks/use-intersection-observer/src"
+    "lint": "eslint src --config ../../eslint.config.js"
   },
   "bugs": {
     "url": "https://github.com/Byndyusoft/ui/issues"

hooks/use-isomorphic-layout-effect/package.json

@@ -20,8 +20,7 @@
   "scripts": {
     "build": "tsc --project tsconfig.build.json",
     "clean": "rimraf dist && rimraf .turbo && rimraf node_modules && rimraf package-lock.json",
-    "lint": "eslint src --config ../../eslint.config.js",
-    "test": "jest --config ../../jest.config.js"
+    "lint": "eslint src --config ../../eslint.config.js"
   },
   "bugs": {
     "url": "https://github.com/Byndyusoft/ui/issues"

hooks/use-local-storage/README.md

@@ -0,0 +1,11 @@
+# `byndyusoft-ui/use-local-storage`
+
+> A custom hook that uses Local Storage API to persist state.
+
+## Installation
+
+```sh
+npm i @byndyusoft-ui/use-local-storage
+# or
+yarn add @byndyusoft-ui/use-local-storage
+```

hooks/use-local-storage/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@byndyusoft-ui/use-local-storage",
+  "version": "0.1.0",
+  "description": "Byndyusoft UI Local Storage React Hook",
+  "keywords": [
+    "byndyusoft",
+    "byndyusoft-ui",
+    "react",
+    "hook",
+    "local-storage"
+  ],
+  "author": "Eugene Abrosimov <sadcitizen@yandex.ru>",
+  "homepage": "https://github.com/Byndyusoft/ui/tree/master/hooks/use-local-storage#readme",
+  "license": "ISC",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Byndyusoft/ui.git"
+  },
+  "scripts": {
+    "build": "tsc",
+    "clean": "rimraf dist",
+    "lint": "eslint src --config ../../eslint.config.js"
+  },
+  "bugs": {
+    "url": "https://github.com/Byndyusoft/ui/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@byndyusoft-ui/local-storage": "*",
+    "@byndyusoft-ui/use-event-listener": "*"
+  }
+}

hooks/use-local-storage/src/index.ts

@@ -0,0 +1,4 @@
+import useLocalStorage, { IUseLocalStorageActions, IUseLocalStorageOptions, TUseLocalStorage } from './useLocalStorage';
+
+export { IUseLocalStorageActions, IUseLocalStorageOptions, TUseLocalStorage };
+export default useLocalStorage;

hooks/use-local-storage/src/useLocalStorage.stories.mdx

@@ -0,0 +1,7 @@
+import { Meta } from '@storybook/addon-docs';
+import { Markdown } from '@storybook/blocks';
+import Readme from '../README.md';
+
+<Meta title="hooks/useLocalStorage" />
+
+<Markdown>{Readme}</Markdown>

hooks/use-local-storage/src/useLocalStorage.stories.tsx

@@ -0,0 +1,42 @@
+import React, { useCallback, useRef, useState } from 'react';
+import useLocalStorage from './useLocalStorage';
+import type { Meta, StoryObj } from '@storybook/react';
+
+type TTokenTemplateStory = StoryObj<typeof TokenTemplate>;
+
+const TokenTemplate = (): JSX.Element => {
+    const [token, { setValue: setToken, removeValue: removeToken }] = useLocalStorage('access', '');
+    const [inputValue, setInputValue] = useState('Brand new token');
+    const handleClick = useCallback(() => {
+        setToken(inputValue);
+    }, [setToken, inputValue]);
+
+    const handleClickDelete = () => {
+        removeToken();
+    };
+
+    return (
+        <section>
+            <div>Access token: {token ?? 'no token'}</div>
+            <p>
+                <input value={inputValue} onChange={e => setInputValue(e.target.value)} />
+            </p>
+
+            <button type="button" onClick={handleClick}>
+                Добавить токен
+            </button>
+            <p>
+                <button onClick={handleClickDelete}>Удалить токен</button>
+            </p>
+        </section>
+    );
+};
+export const Token: TTokenTemplateStory = {
+    decorators: [() => <TokenTemplate />]
+};
+
+const meta: Meta = {
+    title: 'hooks/useLocalStorage'
+};
+
+export default meta;

hooks/use-local-storage/src/useLocalStorage.tests.ts

@@ -0,0 +1,133 @@
+import { act, renderHook } from '@testing-library/react-hooks';
+import useLocalStorage from './useLocalStorage';
+
+describe('hooks/useLocalStorage', () => {
+    const KEY = 'ls-test-key';
+
+    beforeEach(() => {
+        window.localStorage.clear();
+    });
+
+    test('initializes with default value when storage is empty', () => {
+        const { result } = renderHook(() => useLocalStorage(KEY, 'default'));
+
+        expect(result.current[0]).toBe('default');
+    });
+
+    test('reads existing value from localStorage on init', () => {
+        window.localStorage.setItem(KEY, JSON.stringify('stored'));
+
+        const { result } = renderHook(() => useLocalStorage(KEY, 'default'));
+
+        expect(result.current[0]).toBe('stored');
+    });
+
+    test('setValue updates state and writes to localStorage', () => {
+        const { result } = renderHook(() => useLocalStorage(KEY, 'default'));
+
+        act(() => {
+            result.current[1].setValue('next');
+        });
+
+        expect(result.current[0]).toBe('next');
+        expect(window.localStorage.getItem(KEY)).toBe(JSON.stringify('next'));
+    });
+
+    test('removeValue clears storage and resets to default', () => {
+        window.localStorage.setItem(KEY, JSON.stringify('stored'));
+
+        const { result } = renderHook(() => useLocalStorage(KEY, 'default'));
+
+        act(() => {
+            result.current[1].removeValue();
+        });
+
+        expect(result.current[0]).toBe('default');
+        expect(window.localStorage.getItem(KEY)).toBeNull();
+    });
+
+    test('respects custom serializer and deserializer from options', () => {
+        const serialize = vi.fn((value: { foo: string }) => `(${value.foo})`);
+        const deserialize = vi.fn((raw: string) => ({ foo: raw.slice(1, -1) }));
+
+        window.localStorage.setItem(KEY, '(baz)');
+
+        const { result, rerender } = renderHook(
+            (props: { initial: { foo: string } }) =>
+                useLocalStorage<{ foo: string }>(KEY, props.initial, { serialize, deserialize }),
+            {
+                initialProps: { initial: { foo: 'default' } }
+            }
+        );
+
+        expect(deserialize).toHaveBeenCalledWith('(baz)');
+
+        act(() => {
+            result.current[1].setValue({ foo: 'bar' });
+        });
+
+        expect(window.localStorage.getItem(KEY)).toBe('(bar)');
+
+        expect(serialize).toHaveBeenCalledWith({ foo: 'bar' });
+    });
+
+    test('updates value when storage event for the same key and same storage area is dispatched', () => {
+        const { result } = renderHook(() => useLocalStorage(KEY, 'default'));
+
+        const event = new Event('storage') as StorageEvent;
+        (event as any).key = KEY;
+        (event as any).newValue = JSON.stringify('from-event');
+        (event as any).storageArea = window.localStorage;
+
+        act(() => {
+            window.dispatchEvent(event);
+        });
+
+        expect(result.current[0]).toBe('from-event');
+    });
+
+    test('do not update value when storage event for the same key and other storage area is dispatched (syncTab = false)', () => {
+        const { result } = renderHook(() => useLocalStorage(KEY, 'default'));
+
+        const event = new Event('storage') as StorageEvent;
+        (event as any).key = KEY;
+        (event as any).newValue = JSON.stringify('from-event');
+        (event as any).storageArea = {} as Storage;
+
+        act(() => {
+            window.dispatchEvent(event);
+        });
+
+        expect(result.current[0]).toBe('default');
+    });
+
+    test('do not update value when storage event for the other key and same storage area is dispatched (syncTab = false)', () => {
+        const { result } = renderHook(() => useLocalStorage(KEY, 'default'));
+
+        const event = new Event('storage') as StorageEvent;
+        (event as any).key = 'other-key';
+        (event as any).newValue = JSON.stringify('from-event');
+        (event as any).storageArea = window.localStorage;
+
+        act(() => {
+            window.dispatchEvent(event);
+        });
+
+        expect(result.current[0]).toBe('default');
+    });
+
+    test('updates value when storage event for the same key and other storage area is dispatched (syncTab = true)', () => {
+        const { result } = renderHook(() => useLocalStorage(KEY, 'default', { syncTabs: true }));
+
+        const event = new Event('storage') as StorageEvent;
+        (event as any).key = KEY;
+        (event as any).newValue = JSON.stringify('from-event');
+        (event as any).storageArea = {} as Storage;
+
+        act(() => {
+            window.dispatchEvent(event);
+        });
+
+        expect(result.current[0]).toBe('from-event');
+    });
+});

hooks/use-local-storage/src/useLocalStorage.ts

@@ -0,0 +1,68 @@
+import { useCallback, useMemo, useState } from 'react';
+import { TSerializeValue, TDeserializeValue, LocalStorageService } from '@byndyusoft-ui/local-storage';
+import useEventListener from '@byndyusoft-ui/use-event-listener';
+
+export interface IUseLocalStorageActions<TValue> {
+    setValue: (value: TValue) => void;
+    removeValue: () => void;
+}
+
+export interface IUseLocalStorageOptions<TValue> {
+    serialize?: TSerializeValue<TValue>;
+    deserialize?: TDeserializeValue<TValue>;
+    syncTabs?: boolean;
+}
+
+export type TUseLocalStorage<TValue> = [TValue, IUseLocalStorageActions<TValue>];
+
+export default function useLocalStorage<TValue>(
+    key: string,
+    defaultValue: TValue,
+    options?: IUseLocalStorageOptions<TValue>
+): TUseLocalStorage<TValue> {
+    const service = useMemo(
+        () =>
+            new LocalStorageService(key, defaultValue, {
+                serialize: options?.serialize,
+                deserialize: options?.deserialize
+            }),
+        [key, defaultValue, options]
+    );
+
+    const [storedValue, setStoredValue] = useState<TValue>(() => service.getValue());
+
+    const setValue = useCallback(
+        (nextValue: TValue) => {
+            service.setValue(nextValue);
+            setStoredValue(nextValue);
+        },
+        [key, options]
+    );
+
+    const removeValue = useCallback(() => {
+        service.removeValue();
+        setStoredValue(defaultValue);
+    }, [key, defaultValue]);
+
+    const handleEvent = useCallback(
+        (event: StorageEvent) => {
+            if (event.key !== key) {
+                return;
+            }
+
+            if (window.localStorage === event.storageArea || options?.syncTabs) {
+                setStoredValue(event.newValue ? service.deserialize(event.newValue) : defaultValue);
+            }
+        },
+        [key, options]
+    );
+
+    useEventListener('storage', handleEvent);
+
+    const methods = useMemo<IUseLocalStorageActions<TValue>>(
+        () => ({ setValue, removeValue }),
+        [setValue, removeValue]
+    );
+
+    return [storedValue, methods];
+}

hooks/use-local-storage/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "declaration": true,
+    "declarationDir": "dist",
+    "outDir": "dist",
+    "module": "commonjs"
+  },
+  "include": [
+    "../../types.d.ts",
+    "src"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}