From 44fe1f88c397b624aac73b5b680e2ad988a7b898 Mon Sep 17 00:00:00 2001
From: Nastya Vasenina <vasenina@byndyusoft.com>
Date: Mon, 19 Feb 2024 00:51:03 +0300
Subject: [PATCH 01/31] feat: add useDebounce

---
 hooks/use-debounce/.npmignore                 |  1 +
 hooks/use-debounce/README.md                  |  9 ++++
 hooks/use-debounce/package.json               | 33 ++++++++++++
 hooks/use-debounce/src/index.ts               |  2 +
 .../use-debounce/src/useDebounce.stories.css  | 10 ++++
 .../use-debounce/src/useDebounce.stories.mdx  |  7 +++
 .../use-debounce/src/useDebounce.stories.tsx  | 34 +++++++++++++
 hooks/use-debounce/src/useDebounce.tests.tsx  | 51 +++++++++++++++++++
 hooks/use-debounce/src/useDebounce.ts         | 21 ++++++++
 hooks/use-debounce/tsconfig.json              | 12 +++++
 hooks/use-window-size/package.json            |  2 +-
 package-lock.json                             | 11 ++++
 12 files changed, 192 insertions(+), 1 deletion(-)
 create mode 100644 hooks/use-debounce/.npmignore
 create mode 100644 hooks/use-debounce/README.md
 create mode 100644 hooks/use-debounce/package.json
 create mode 100644 hooks/use-debounce/src/index.ts
 create mode 100644 hooks/use-debounce/src/useDebounce.stories.css
 create mode 100644 hooks/use-debounce/src/useDebounce.stories.mdx
 create mode 100644 hooks/use-debounce/src/useDebounce.stories.tsx
 create mode 100644 hooks/use-debounce/src/useDebounce.tests.tsx
 create mode 100644 hooks/use-debounce/src/useDebounce.ts
 create mode 100644 hooks/use-debounce/tsconfig.json

diff --git a/hooks/use-debounce/.npmignore b/hooks/use-debounce/.npmignore
new file mode 100644
index 00000000..85de9cf9
--- /dev/null
+++ b/hooks/use-debounce/.npmignore
@@ -0,0 +1 @@
+src
diff --git a/hooks/use-debounce/README.md b/hooks/use-debounce/README.md
new file mode 100644
index 00000000..c81625af
--- /dev/null
+++ b/hooks/use-debounce/README.md
@@ -0,0 +1,9 @@
+# `@byndyusoft-ui/use-debounce`
+---
+> A React hook that uses for delaying the execution of functions or state updates until a specified time period has passed without any further changes
+
+### Installation
+
+```
+npm i @byndyusoft-ui/use-debounce
+```
diff --git a/hooks/use-debounce/package.json b/hooks/use-debounce/package.json
new file mode 100644
index 00000000..b8d940e7
--- /dev/null
+++ b/hooks/use-debounce/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "@byndyusoft-ui/use-debounce",
+  "version": "0.0.0",
+  "description": "Byndyusoft UI React Hook",
+  "keywords": [
+    "byndyusoft",
+    "byndyusoft-ui",
+    "react",
+    "hook",
+    "debounce"
+  ],
+  "author": "Anastasia Vasenina <vasenina@byndyusoft.com>",
+  "homepage": "https://github.com/Byndyusoft/ui/tree/master/hooks/use-debounce#readme",
+  "license": "Apache-2.0",
+  "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",
+    "test": "jest --config ../../jest.config.js"
+  },
+  "bugs": {
+    "url": "https://github.com/Byndyusoft/ui/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}
diff --git a/hooks/use-debounce/src/index.ts b/hooks/use-debounce/src/index.ts
new file mode 100644
index 00000000..565acd73
--- /dev/null
+++ b/hooks/use-debounce/src/index.ts
@@ -0,0 +1,2 @@
+import useDebounce from './useDebounce';
+export default useDebounce;
diff --git a/hooks/use-debounce/src/useDebounce.stories.css b/hooks/use-debounce/src/useDebounce.stories.css
new file mode 100644
index 00000000..c70c2fae
--- /dev/null
+++ b/hooks/use-debounce/src/useDebounce.stories.css
@@ -0,0 +1,10 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+input{
+    max-height: 40px;
+    width: 100px;     
+}
\ No newline at end of file
diff --git a/hooks/use-debounce/src/useDebounce.stories.mdx b/hooks/use-debounce/src/useDebounce.stories.mdx
new file mode 100644
index 00000000..cf910280
--- /dev/null
+++ b/hooks/use-debounce/src/useDebounce.stories.mdx
@@ -0,0 +1,7 @@
+import { Meta } from '@storybook/addon-docs';
+import Readme from '../README.md';
+import { Markdown } from '@storybook/blocks';
+
+<Meta title="hooks/useDebounce" />
+
+<Markdown>{Readme}</Markdown>
diff --git a/hooks/use-debounce/src/useDebounce.stories.tsx b/hooks/use-debounce/src/useDebounce.stories.tsx
new file mode 100644
index 00000000..ddf45897
--- /dev/null
+++ b/hooks/use-debounce/src/useDebounce.stories.tsx
@@ -0,0 +1,34 @@
+import React, { useState } from 'react';
+import useDebounce from './useDebounce';
+import './useDebounce.stories.css';
+import type { Meta, StoryObj } from '@storybook/react';
+
+type Story = StoryObj<typeof Template>;
+
+const Template = () => {
+    const [value, setValue] = useState('');
+    const [debouncedValue, isReady] = useDebounce(value, 2000);
+    const isReadyText = 'true';
+    const isNotReadyText = 'false';
+
+    return (
+        <div className="container">
+            <span>
+                Debounced value: <span>{debouncedValue}</span>
+            </span>
+            <span>Debounced value is ready: {isReady ? isReadyText : isNotReadyText}</span>
+            <input value={value} onChange={e => setValue(e.target.value)} />
+        </div>
+    );
+};
+
+export const HookStory: Story = {
+    decorators: [() => <Template />]
+};
+
+const meta: Meta<typeof Template> = {
+    title: 'hooks/useDebounce',
+    component: Template
+};
+
+export default meta;
diff --git a/hooks/use-debounce/src/useDebounce.tests.tsx b/hooks/use-debounce/src/useDebounce.tests.tsx
new file mode 100644
index 00000000..0dc9bc57
--- /dev/null
+++ b/hooks/use-debounce/src/useDebounce.tests.tsx
@@ -0,0 +1,51 @@
+import React, { useState } from 'react';
+import { render, screen, RenderResult, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import useDebounce from './useDebounce';
+
+const isReadyText = 'true';
+const isNotReadyText = 'false';
+const isReadyLabel = 'is ready';
+const debouncedValueLabel = 'debounced value';
+const inputValue = '1111';
+
+const Setup = (): JSX.Element => {
+    const [value, setValue] = useState('');
+    const [debouncedValue, isReady] = useDebounce(value, 2000);
+
+    return (
+        <div className="container">
+            <span>
+                Debounced value: <span aria-label={debouncedValueLabel}>{debouncedValue}</span>
+            </span>
+            <span>
+                Debounced value is ready:{' '}
+                <span aria-label={isReadyLabel}>{isReady ? isReadyText : isNotReadyText}</span>
+            </span>
+            <input value={value} onChange={e => setValue(e.target.value)} />
+        </div>
+    );
+};
+
+describe('hooks/useDebounce', () => {
+    test('useDebounce works', async () => {
+        render(<Setup />);
+        const isReady = await screen.findByLabelText(isReadyLabel);
+        expect(isReady).toHaveTextContent(isReadyText);
+        const input = await screen.findByRole('textbox');
+        userEvent.type(input, inputValue);
+        await waitFor(
+            () => {
+                expect(isReady).toHaveTextContent(isNotReadyText);
+            },
+            { timeout: 1000 }
+        );
+        await waitFor(
+            () => {
+                expect(screen.getByLabelText(debouncedValueLabel)).toHaveTextContent(inputValue);
+                expect(isReady).toHaveTextContent(isReadyText);
+            },
+            { timeout: 2100 }
+        );
+    });
+});
diff --git a/hooks/use-debounce/src/useDebounce.ts b/hooks/use-debounce/src/useDebounce.ts
new file mode 100644
index 00000000..bddf00af
--- /dev/null
+++ b/hooks/use-debounce/src/useDebounce.ts
@@ -0,0 +1,21 @@
+import { useEffect, useRef, useState } from 'react';
+
+export default function useDebounce(value: string, delay = 300): [string, boolean] {
+    const [debouncedValue, setDebouncedValue] = useState(value);
+    const timeout = useRef<NodeJS.Timeout>();
+
+    useEffect(() => {
+        timeout.current = setTimeout(() => {
+            timeout.current = undefined;
+            setDebouncedValue(value);
+        }, delay);
+
+        return () => {
+            clearTimeout(timeout.current);
+        };
+    }, [value, delay]);
+
+    const isReady = !timeout.current;
+
+    return [debouncedValue, isReady];
+}
diff --git a/hooks/use-debounce/tsconfig.json b/hooks/use-debounce/tsconfig.json
new file mode 100644
index 00000000..a67bd73b
--- /dev/null
+++ b/hooks/use-debounce/tsconfig.json
@@ -0,0 +1,12 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "declaration": true,
+    "declarationDir": "dist",
+    "outDir": "dist",
+    "module": "commonjs",
+    "target": "es6"
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "src/*.tests.ts"]
+}
diff --git a/hooks/use-window-size/package.json b/hooks/use-window-size/package.json
index 59295a79..ca57c609 100644
--- a/hooks/use-window-size/package.json
+++ b/hooks/use-window-size/package.json
@@ -10,7 +10,7 @@
     "window",
     "size"
   ],
-  "author": "Nastya Vasenina <vasenina@byndyusoft.com>",
+  "author": "Anastasia Vasenina <vasenina@byndyusoft.com>",
   "homepage": "https://github.com/Byndyusoft/ui/tree/master/hooks/use-window-size#readme",
   "license": "Apache-2.0",
   "main": "dist/index.js",
diff --git a/package-lock.json b/package-lock.json
index ffaeaa8b..bbce32d8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -87,6 +87,10 @@
         "@byndyusoft-ui/use-event-listener": "*"
       }
     },
+    "hooks/use-debounce": {
+      "version": "0.0.0",
+      "license": "Apache-2.0"
+    },
     "hooks/use-event-listener": {
       "name": "@byndyusoft-ui/use-event-listener",
       "version": "0.1.0",
@@ -2363,6 +2367,10 @@
       "resolved": "hooks/use-click-outside",
       "link": true
     },
+    "node_modules/@byndyusoft-ui/use-debounce": {
+      "resolved": "hooks/use-debounce",
+      "link": true
+    },
     "node_modules/@byndyusoft-ui/use-event-listener": {
       "resolved": "hooks/use-event-listener",
       "link": true
@@ -33848,6 +33856,9 @@
         "@byndyusoft-ui/use-event-listener": "*"
       }
     },
+    "@byndyusoft-ui/use-debounce": {
+      "version": "file:hooks/use-debounce"
+    },
     "@byndyusoft-ui/use-event-listener": {
       "version": "file:hooks/use-event-listener",
       "requires": {

From 687b9c1af1ac700254c92c6d2fa0657a8bc909e4 Mon Sep 17 00:00:00 2001
From: Nastya Vasenina <vasenina@byndyusoft.com>
Date: Thu, 21 Mar 2024 14:53:27 +0300
Subject: [PATCH 02/31] feat: add use-debounce-callback

---
 hooks/use-debounce-callback/.npmignore        |  1 +
 hooks/use-debounce-callback/README.md         |  9 ++++
 hooks/use-debounce-callback/package.json      | 33 +++++++++++++
 hooks/use-debounce-callback/src/index.ts      |  2 +
 .../src/useDebounceCallback.stories.css       | 10 ++++
 .../src/useDebounceCallback.stories.mdx       |  7 +++
 .../src/useDebounceCallback.stories.tsx       | 32 ++++++++++++
 .../src/useDebounceCallback.tests.tsx         | 49 +++++++++++++++++++
 .../src/useDebounceCallback.ts                | 24 +++++++++
 hooks/use-debounce-callback/tsconfig.json     | 12 +++++
 10 files changed, 179 insertions(+)
 create mode 100644 hooks/use-debounce-callback/.npmignore
 create mode 100644 hooks/use-debounce-callback/README.md
 create mode 100644 hooks/use-debounce-callback/package.json
 create mode 100644 hooks/use-debounce-callback/src/index.ts
 create mode 100644 hooks/use-debounce-callback/src/useDebounceCallback.stories.css
 create mode 100644 hooks/use-debounce-callback/src/useDebounceCallback.stories.mdx
 create mode 100644 hooks/use-debounce-callback/src/useDebounceCallback.stories.tsx
 create mode 100644 hooks/use-debounce-callback/src/useDebounceCallback.tests.tsx
 create mode 100644 hooks/use-debounce-callback/src/useDebounceCallback.ts
 create mode 100644 hooks/use-debounce-callback/tsconfig.json

diff --git a/hooks/use-debounce-callback/.npmignore b/hooks/use-debounce-callback/.npmignore
new file mode 100644
index 00000000..85de9cf9
--- /dev/null
+++ b/hooks/use-debounce-callback/.npmignore
@@ -0,0 +1 @@
+src
diff --git a/hooks/use-debounce-callback/README.md b/hooks/use-debounce-callback/README.md
new file mode 100644
index 00000000..818461e2
--- /dev/null
+++ b/hooks/use-debounce-callback/README.md
@@ -0,0 +1,9 @@
+# `@byndyusoft-ui/use-debounce-callback`
+---
+> A React hook that uses for delaying the execution of functions or state updates until a specified time period has passed without any further changes
+
+### Installation
+
+```
+npm i @byndyusoft-ui/use-debounce-callback
+```
diff --git a/hooks/use-debounce-callback/package.json b/hooks/use-debounce-callback/package.json
new file mode 100644
index 00000000..dc739e0b
--- /dev/null
+++ b/hooks/use-debounce-callback/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "@byndyusoft-ui/use-debounce-callback",
+  "version": "0.0.0",
+  "description": "Byndyusoft UI React Hook",
+  "keywords": [
+    "byndyusoft",
+    "byndyusoft-ui",
+    "react",
+    "hook",
+    "debounce"
+  ],
+  "author": "Anastasia Vasenina <vasenina@byndyusoft.com>",
+  "homepage": "https://github.com/Byndyusoft/ui/tree/master/hooks/use-debounce#readme",
+  "license": "Apache-2.0",
+  "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",
+    "test": "jest --config ../../jest.config.js"
+  },
+  "bugs": {
+    "url": "https://github.com/Byndyusoft/ui/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}
diff --git a/hooks/use-debounce-callback/src/index.ts b/hooks/use-debounce-callback/src/index.ts
new file mode 100644
index 00000000..7fded2f5
--- /dev/null
+++ b/hooks/use-debounce-callback/src/index.ts
@@ -0,0 +1,2 @@
+import useDebounceCallback from './useDebounceCallback';
+export default useDebounceCallback;
diff --git a/hooks/use-debounce-callback/src/useDebounceCallback.stories.css b/hooks/use-debounce-callback/src/useDebounceCallback.stories.css
new file mode 100644
index 00000000..c70c2fae
--- /dev/null
+++ b/hooks/use-debounce-callback/src/useDebounceCallback.stories.css
@@ -0,0 +1,10 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+input{
+    max-height: 40px;
+    width: 100px;     
+}
\ No newline at end of file
diff --git a/hooks/use-debounce-callback/src/useDebounceCallback.stories.mdx b/hooks/use-debounce-callback/src/useDebounceCallback.stories.mdx
new file mode 100644
index 00000000..cf910280
--- /dev/null
+++ b/hooks/use-debounce-callback/src/useDebounceCallback.stories.mdx
@@ -0,0 +1,7 @@
+import { Meta } from '@storybook/addon-docs';
+import Readme from '../README.md';
+import { Markdown } from '@storybook/blocks';
+
+<Meta title="hooks/useDebounce" />
+
+<Markdown>{Readme}</Markdown>
diff --git a/hooks/use-debounce-callback/src/useDebounceCallback.stories.tsx b/hooks/use-debounce-callback/src/useDebounceCallback.stories.tsx
new file mode 100644
index 00000000..f9fa6547
--- /dev/null
+++ b/hooks/use-debounce-callback/src/useDebounceCallback.stories.tsx
@@ -0,0 +1,32 @@
+import React, { useState } from 'react';
+// import useDebounceCallback from './useDebounceCallback';
+import './useDebounce.stories.css';
+import type { Meta, StoryObj } from '@storybook/react';
+
+type Story = StoryObj<typeof Template>;
+
+const Template = () => {
+    const [value, setValue] = useState('');
+    // const [debouncedValue, isReady] = useDebounce(value, 2000);
+    const isReadyText = 'true';
+    const isNotReadyText = 'false';
+
+    return (
+        <div className="container">
+            <span>{/* Debounced value: <span>{debouncedValue}</span> */}</span>
+            {/* <span>Debounced value is ready: {isReady ? isReadyText : isNotReadyText}</span> */}
+            <input value={value} onChange={e => setValue(e.target.value)} />
+        </div>
+    );
+};
+
+export const HookStory: Story = {
+    decorators: [() => <Template />]
+};
+
+const meta: Meta<typeof Template> = {
+    title: 'hooks/useDebounce',
+    component: Template
+};
+
+export default meta;
diff --git a/hooks/use-debounce-callback/src/useDebounceCallback.tests.tsx b/hooks/use-debounce-callback/src/useDebounceCallback.tests.tsx
new file mode 100644
index 00000000..a4a40784
--- /dev/null
+++ b/hooks/use-debounce-callback/src/useDebounceCallback.tests.tsx
@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+import { render, screen, RenderResult, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+// import useDebounceCallback from './useDebounceCallback';
+
+const isReadyText = 'true';
+const isNotReadyText = 'false';
+const isReadyLabel = 'is ready';
+const debouncedValueLabel = 'debounced value';
+const inputValue = '1111';
+
+const Setup = (): JSX.Element => {
+    const [value, setValue] = useState('');
+    // const [debouncedValue, isReady] = useDebounce(value, 2000);
+
+    return (
+        <div className="container">
+            <span>{/* Debounced value: <span aria-label={debouncedValueLabel}>{debouncedValue}</span> */}</span>
+            <span>
+                Debounced value is ready:{' '}
+                {/* <span aria-label={isReadyLabel}>{isReady ? isReadyText : isNotReadyText}</span> */}
+            </span>
+            <input value={value} onChange={e => setValue(e.target.value)} />
+        </div>
+    );
+};
+
+describe('hooks/useDebounce', () => {
+    test('useDebounce works', async () => {
+        render(<Setup />);
+        const isReady = await screen.findByLabelText(isReadyLabel);
+        expect(isReady).toHaveTextContent(isReadyText);
+        const input = await screen.findByRole('textbox');
+        userEvent.type(input, inputValue);
+        await waitFor(
+            () => {
+                expect(isReady).toHaveTextContent(isNotReadyText);
+            },
+            { timeout: 1000 }
+        );
+        await waitFor(
+            () => {
+                expect(screen.getByLabelText(debouncedValueLabel)).toHaveTextContent(inputValue);
+                expect(isReady).toHaveTextContent(isReadyText);
+            },
+            { timeout: 2100 }
+        );
+    });
+});
diff --git a/hooks/use-debounce-callback/src/useDebounceCallback.ts b/hooks/use-debounce-callback/src/useDebounceCallback.ts
new file mode 100644
index 00000000..81311f08
--- /dev/null
+++ b/hooks/use-debounce-callback/src/useDebounceCallback.ts
@@ -0,0 +1,24 @@
+import { useEffect, useRef } from 'react';
+
+export default function useDebouncedCallback<A extends any[]>(callback: (...args: A) => void, delay: number) {
+    const argsRef = useRef<A>();
+    const timeout = useRef<ReturnType<typeof setTimeout>>();
+
+    function cleanup() {
+        if (timeout.current) {
+            clearTimeout(timeout.current);
+        }
+    }
+
+    useEffect(() => cleanup, []);
+
+    return function debouncedCallback(...args: A) {
+        argsRef.current = args;
+        cleanup();
+        timeout.current = setTimeout(() => {
+            if (argsRef.current) {
+                callback(...argsRef.current);
+            }
+        }, delay);
+    };
+}
diff --git a/hooks/use-debounce-callback/tsconfig.json b/hooks/use-debounce-callback/tsconfig.json
new file mode 100644
index 00000000..a67bd73b
--- /dev/null
+++ b/hooks/use-debounce-callback/tsconfig.json
@@ -0,0 +1,12 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "declaration": true,
+    "declarationDir": "dist",
+    "outDir": "dist",
+    "module": "commonjs",
+    "target": "es6"
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "src/*.tests.ts"]
+}

From 865b3e8bf2663e97a3b8deacb65b9d9ea09f184c Mon Sep 17 00:00:00 2001
From: Nastya Vasenina <vasenina@byndyusoft.com>
Date: Wed, 10 Apr 2024 14:04:42 +0300
Subject: [PATCH 03/31] feat: add useDebounse

---
 components/portal/src/Portal.tests.tsx        |  2 +-
 hooks/use-debounce-callback/README.md         |  2 +-
 .../src/useDebounceCallback.stories.tsx       | 23 ++++---
 .../src/useDebounceCallback.tests.tsx         | 61 +++++++++++--------
 .../src/useDebounceCallback.ts                | 10 ++-
 hooks/use-debounce/README.md                  |  2 +-
 .../use-debounce/src/useDebounce.stories.tsx  | 11 ++--
 hooks/use-debounce/src/useDebounce.tests.tsx  | 29 +++------
 hooks/use-debounce/src/useDebounce.ts         | 23 ++-----
 package-lock.json                             | 12 ++++
 10 files changed, 87 insertions(+), 88 deletions(-)

diff --git a/components/portal/src/Portal.tests.tsx b/components/portal/src/Portal.tests.tsx
index 3cca90aa..2e1d12b0 100644
--- a/components/portal/src/Portal.tests.tsx
+++ b/components/portal/src/Portal.tests.tsx
@@ -3,7 +3,7 @@ import { render, screen } from '@testing-library/react';
 import Portal from './Portal';
 
 describe('components/Portal', () => {
-    test('renders correctly with children', () => {
+    test.skip('renders correctly with children', () => {
         const { baseElement } = render(
             <Portal id="portal">
                 <div data-testid="content" />
diff --git a/hooks/use-debounce-callback/README.md b/hooks/use-debounce-callback/README.md
index 818461e2..52e3e3a5 100644
--- a/hooks/use-debounce-callback/README.md
+++ b/hooks/use-debounce-callback/README.md
@@ -1,6 +1,6 @@
 # `@byndyusoft-ui/use-debounce-callback`
 ---
-> A React hook that uses for delaying the execution of functions or state updates until a specified time period has passed without any further changes
+> A React hook that uses for delaying the execution of functions updates until a specified time period has passed without any further changes
 
 ### Installation
 
diff --git a/hooks/use-debounce-callback/src/useDebounceCallback.stories.tsx b/hooks/use-debounce-callback/src/useDebounceCallback.stories.tsx
index f9fa6547..4d2ddfcd 100644
--- a/hooks/use-debounce-callback/src/useDebounceCallback.stories.tsx
+++ b/hooks/use-debounce-callback/src/useDebounceCallback.stories.tsx
@@ -1,21 +1,24 @@
 import React, { useState } from 'react';
-// import useDebounceCallback from './useDebounceCallback';
-import './useDebounce.stories.css';
+import useDebounceCallback from './useDebounceCallback';
+import './useDebounceCallback.stories.css';
 import type { Meta, StoryObj } from '@storybook/react';
 
 type Story = StoryObj<typeof Template>;
 
+const oldValue = 'old value';
+const newValue = 'new value';
+const timeout = 2000;
+
 const Template = () => {
-    const [value, setValue] = useState('');
-    // const [debouncedValue, isReady] = useDebounce(value, 2000);
-    const isReadyText = 'true';
-    const isNotReadyText = 'false';
+    const [value, setValue] = useState(oldValue);
+    const setDebounceValue = useDebounceCallback(setValue, timeout);
 
     return (
         <div className="container">
-            <span>{/* Debounced value: <span>{debouncedValue}</span> */}</span>
-            {/* <span>Debounced value is ready: {isReady ? isReadyText : isNotReadyText}</span> */}
-            <input value={value} onChange={e => setValue(e.target.value)} />
+            <span>Value: {value}</span>
+            <button onClick={() => setDebounceValue(newValue)}>debounced change</button>
+            <button onClick={() => setValue(newValue)}>change</button>
+            <button onClick={() => setValue(oldValue)}>reset</button>
         </div>
     );
 };
@@ -25,7 +28,7 @@ export const HookStory: Story = {
 };
 
 const meta: Meta<typeof Template> = {
-    title: 'hooks/useDebounce',
+    title: 'hooks/useDebounceCallback',
     component: Template
 };
 
diff --git a/hooks/use-debounce-callback/src/useDebounceCallback.tests.tsx b/hooks/use-debounce-callback/src/useDebounceCallback.tests.tsx
index a4a40784..253fe2dd 100644
--- a/hooks/use-debounce-callback/src/useDebounceCallback.tests.tsx
+++ b/hooks/use-debounce-callback/src/useDebounceCallback.tests.tsx
@@ -1,49 +1,56 @@
 import React, { useState } from 'react';
 import { render, screen, RenderResult, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-// import useDebounceCallback from './useDebounceCallback';
+import useDebounceCallback from './useDebounceCallback';
 
-const isReadyText = 'true';
-const isNotReadyText = 'false';
-const isReadyLabel = 'is ready';
-const debouncedValueLabel = 'debounced value';
-const inputValue = '1111';
+const oldValue = 'old value';
+const newValue = 'new value';
+const timeout = 2000;
+const debouncedChangeLabel = 'debounced change label';
+const changeLabel = 'change label';
+const resetLabel = 'reset label';
 
 const Setup = (): JSX.Element => {
-    const [value, setValue] = useState('');
-    // const [debouncedValue, isReady] = useDebounce(value, 2000);
+    const [value, setValue] = useState(oldValue);
+    const setDebounceValue = useDebounceCallback(setValue, timeout);
 
     return (
         <div className="container">
-            <span>{/* Debounced value: <span aria-label={debouncedValueLabel}>{debouncedValue}</span> */}</span>
             <span>
-                Debounced value is ready:{' '}
-                {/* <span aria-label={isReadyLabel}>{isReady ? isReadyText : isNotReadyText}</span> */}
+                Value: <span>{value}</span>
             </span>
-            <input value={value} onChange={e => setValue(e.target.value)} />
+            <button aria-label={debouncedChangeLabel} onClick={() => setDebounceValue(newValue)}>
+                debounced change
+            </button>
+            <button aria-label={changeLabel} onClick={() => setValue(newValue)}>
+                change
+            </button>
+            <button aria-label={resetLabel} onClick={() => setValue(oldValue)}>
+                reset
+            </button>
         </div>
     );
 };
 
-describe('hooks/useDebounce', () => {
-    test('useDebounce works', async () => {
+describe('hooks/useDebounceCallback', () => {
+    test('useDebounceCallback works', async () => {
         render(<Setup />);
-        const isReady = await screen.findByLabelText(isReadyLabel);
-        expect(isReady).toHaveTextContent(isReadyText);
-        const input = await screen.findByRole('textbox');
-        userEvent.type(input, inputValue);
-        await waitFor(
-            () => {
-                expect(isReady).toHaveTextContent(isNotReadyText);
-            },
-            { timeout: 1000 }
-        );
+
+        const debouncedChangeButton = await screen.findByLabelText(debouncedChangeLabel);
+        const changeButton = await screen.findByLabelText(changeLabel);
+        const resetButton = await screen.findByLabelText(resetLabel);
+        expect(screen.findByText(oldValue)).toBeInTheDocument();
+        userEvent.click(changeButton);
+        expect(screen.findByText(newValue)).toBeInTheDocument();
+        userEvent.click(resetButton);
+        expect(screen.findByText(oldValue)).toBeInTheDocument();
+        userEvent.click(debouncedChangeButton);
+        expect(screen.findByText(oldValue)).toBeInTheDocument();
         await waitFor(
             () => {
-                expect(screen.getByLabelText(debouncedValueLabel)).toHaveTextContent(inputValue);
-                expect(isReady).toHaveTextContent(isReadyText);
+                expect(screen.findByText(newValue)).toBeInTheDocument();
             },
-            { timeout: 2100 }
+            { timeout: 2500 }
         );
     });
 });
diff --git a/hooks/use-debounce-callback/src/useDebounceCallback.ts b/hooks/use-debounce-callback/src/useDebounceCallback.ts
index 81311f08..d1869ae1 100644
--- a/hooks/use-debounce-callback/src/useDebounceCallback.ts
+++ b/hooks/use-debounce-callback/src/useDebounceCallback.ts
@@ -1,6 +1,9 @@
 import { useEffect, useRef } from 'react';
 
-export default function useDebouncedCallback<A extends any[]>(callback: (...args: A) => void, delay: number) {
+export default function useDebouncedCallback<A extends any[]>(
+    callback: (...args: A) => void,
+    delay: number
+): (...args: A) => void {
     const argsRef = useRef<A>();
     const timeout = useRef<ReturnType<typeof setTimeout>>();
 
@@ -12,13 +15,16 @@ export default function useDebouncedCallback<A extends any[]>(callback: (...args
 
     useEffect(() => cleanup, []);
 
-    return function debouncedCallback(...args: A) {
+    const setDebouncedValue = (...args: A) => {
         argsRef.current = args;
         cleanup();
+
         timeout.current = setTimeout(() => {
             if (argsRef.current) {
                 callback(...argsRef.current);
             }
         }, delay);
     };
+
+    return setDebouncedValue;
 }
diff --git a/hooks/use-debounce/README.md b/hooks/use-debounce/README.md
index c81625af..43678810 100644
--- a/hooks/use-debounce/README.md
+++ b/hooks/use-debounce/README.md
@@ -1,6 +1,6 @@
 # `@byndyusoft-ui/use-debounce`
 ---
-> A React hook that uses for delaying the execution of functions or state updates until a specified time period has passed without any further changes
+> A React hook that uses to delay update state updates until a specified time period has passed without any further changes
 
 ### Installation
 
diff --git a/hooks/use-debounce/src/useDebounce.stories.tsx b/hooks/use-debounce/src/useDebounce.stories.tsx
index ddf45897..166944ab 100644
--- a/hooks/use-debounce/src/useDebounce.stories.tsx
+++ b/hooks/use-debounce/src/useDebounce.stories.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import useDebounce from './useDebounce';
 import './useDebounce.stories.css';
 import type { Meta, StoryObj } from '@storybook/react';
@@ -6,18 +6,15 @@ import type { Meta, StoryObj } from '@storybook/react';
 type Story = StoryObj<typeof Template>;
 
 const Template = () => {
-    const [value, setValue] = useState('');
-    const [debouncedValue, isReady] = useDebounce(value, 2000);
-    const isReadyText = 'true';
-    const isNotReadyText = 'false';
+    const [debouncedValue, setDebouncedValue] = useDebounce('', 2000);
 
     return (
         <div className="container">
             <span>
                 Debounced value: <span>{debouncedValue}</span>
             </span>
-            <span>Debounced value is ready: {isReady ? isReadyText : isNotReadyText}</span>
-            <input value={value} onChange={e => setValue(e.target.value)} />
+            <input onChange={e => setDebouncedValue(e.target.value)} />
+            <button onClick={() => setDebouncedValue('10000')}>set debounced value</button>
         </div>
     );
 };
diff --git a/hooks/use-debounce/src/useDebounce.tests.tsx b/hooks/use-debounce/src/useDebounce.tests.tsx
index 0dc9bc57..1bb50127 100644
--- a/hooks/use-debounce/src/useDebounce.tests.tsx
+++ b/hooks/use-debounce/src/useDebounce.tests.tsx
@@ -1,49 +1,34 @@
-import React, { useState } from 'react';
-import { render, screen, RenderResult, waitFor } from '@testing-library/react';
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import useDebounce from './useDebounce';
 
-const isReadyText = 'true';
-const isNotReadyText = 'false';
-const isReadyLabel = 'is ready';
 const debouncedValueLabel = 'debounced value';
 const inputValue = '1111';
 
 const Setup = (): JSX.Element => {
-    const [value, setValue] = useState('');
-    const [debouncedValue, isReady] = useDebounce(value, 2000);
+    const [debouncedValue, setDebouncedValue] = useDebounce('', 2000);
 
     return (
         <div className="container">
             <span>
                 Debounced value: <span aria-label={debouncedValueLabel}>{debouncedValue}</span>
             </span>
-            <span>
-                Debounced value is ready:{' '}
-                <span aria-label={isReadyLabel}>{isReady ? isReadyText : isNotReadyText}</span>
-            </span>
-            <input value={value} onChange={e => setValue(e.target.value)} />
+            <input onChange={e => setDebouncedValue(e.target.value)} />
         </div>
     );
 };
 
 describe('hooks/useDebounce', () => {
-    test('useDebounce works', async () => {
+    test.skip('useDebounce works', async () => {
         render(<Setup />);
-        const isReady = await screen.findByLabelText(isReadyLabel);
-        expect(isReady).toHaveTextContent(isReadyText);
+
         const input = await screen.findByRole('textbox');
         userEvent.type(input, inputValue);
-        await waitFor(
-            () => {
-                expect(isReady).toHaveTextContent(isNotReadyText);
-            },
-            { timeout: 1000 }
-        );
+
         await waitFor(
             () => {
                 expect(screen.getByLabelText(debouncedValueLabel)).toHaveTextContent(inputValue);
-                expect(isReady).toHaveTextContent(isReadyText);
             },
             { timeout: 2100 }
         );
diff --git a/hooks/use-debounce/src/useDebounce.ts b/hooks/use-debounce/src/useDebounce.ts
index bddf00af..dfc83cd8 100644
--- a/hooks/use-debounce/src/useDebounce.ts
+++ b/hooks/use-debounce/src/useDebounce.ts
@@ -1,21 +1,10 @@
-import { useEffect, useRef, useState } from 'react';
+import { useState } from 'react';
+import useDebounceCallback from '@byndyusoft-ui/use-debounce-callback';
 
-export default function useDebounce(value: string, delay = 300): [string, boolean] {
-    const [debouncedValue, setDebouncedValue] = useState(value);
-    const timeout = useRef<NodeJS.Timeout>();
+export default function useDebounce(value: string, delay = 300): [string, (value: string) => void] {
+    const [debouncedValue, setValue] = useState(value);
 
-    useEffect(() => {
-        timeout.current = setTimeout(() => {
-            timeout.current = undefined;
-            setDebouncedValue(value);
-        }, delay);
+    const setDebounceValue = useDebounceCallback(setValue, delay);
 
-        return () => {
-            clearTimeout(timeout.current);
-        };
-    }, [value, delay]);
-
-    const isReady = !timeout.current;
-
-    return [debouncedValue, isReady];
+    return [debouncedValue, setDebounceValue];
 }
diff --git a/package-lock.json b/package-lock.json
index bbce32d8..38204759 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -88,6 +88,11 @@
       }
     },
     "hooks/use-debounce": {
+      "name": "@byndyusoft-ui/use-debounce",
+      "version": "0.0.0",
+      "license": "Apache-2.0"
+    },
+    "hooks/use-debounce-callback": {
       "version": "0.0.0",
       "license": "Apache-2.0"
     },
@@ -2371,6 +2376,10 @@
       "resolved": "hooks/use-debounce",
       "link": true
     },
+    "node_modules/@byndyusoft-ui/use-debounce-callback": {
+      "resolved": "hooks/use-debounce-callback",
+      "link": true
+    },
     "node_modules/@byndyusoft-ui/use-event-listener": {
       "resolved": "hooks/use-event-listener",
       "link": true
@@ -33859,6 +33868,9 @@
     "@byndyusoft-ui/use-debounce": {
       "version": "file:hooks/use-debounce"
     },
+    "@byndyusoft-ui/use-debounce-callback": {
+      "version": "file:hooks/use-debounce-callback"
+    },
     "@byndyusoft-ui/use-event-listener": {
       "version": "file:hooks/use-event-listener",
       "requires": {

From 256b0dee07afd2978d3a4f5950da5dff4a11ce39 Mon Sep 17 00:00:00 2001
From: Nastya Vasenina <vasenina@byndyusoft.com>
Date: Wed, 10 Apr 2024 14:14:47 +0300
Subject: [PATCH 04/31] resolve conflicts

---
 components/portal/src/Portal.tests.tsx       | 2 +-
 hooks/use-debounce/src/useDebounce.tests.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/portal/src/Portal.tests.tsx b/components/portal/src/Portal.tests.tsx
index 32594173..d6d614d3 100644
--- a/components/portal/src/Portal.tests.tsx
+++ b/components/portal/src/Portal.tests.tsx
@@ -3,7 +3,7 @@ import { render, screen } from '@testing-library/react';
 import Portal from './Portal';
 
 describe('components/Portal', () => {
-    test.skip('renders correctly with children', () => {
+    test('renders correctly with children', () => {
         const { baseElement } = render(
             <Portal id="portal">
                 <div data-testid="content" />
diff --git a/hooks/use-debounce/src/useDebounce.tests.tsx b/hooks/use-debounce/src/useDebounce.tests.tsx
index 1bb50127..29614b96 100644
--- a/hooks/use-debounce/src/useDebounce.tests.tsx
+++ b/hooks/use-debounce/src/useDebounce.tests.tsx
@@ -20,7 +20,7 @@ const Setup = (): JSX.Element => {
 };
 
 describe('hooks/useDebounce', () => {
-    test.skip('useDebounce works', async () => {
+    test('useDebounce works', async () => {
         render(<Setup />);
 
         const input = await screen.findByRole('textbox');

From b04673f6196d76a62b99765e88598cc60b64f210 Mon Sep 17 00:00:00 2001
From: Nastya Vasenina <vasenina@byndyusoft.com>
Date: Wed, 17 Apr 2024 13:05:21 +0300
Subject: [PATCH 05/31] fix: fix name

---
 hooks/use-debounce-callback/src/index.ts      |  2 --
 hooks/use-debounce/src/index.ts               |  2 --
 hooks/use-debounce/src/useDebounce.ts         | 10 -------
 .../.npmignore                                |  0
 .../README.md                                 |  4 +--
 .../package.json                              |  6 ++--
 hooks/use-debounced-callback/src/index.ts     |  2 ++
 .../src/useDebouncedCallback.stories.css}     |  0
 .../src/useDebouncedCallback.stories.mdx}     |  2 +-
 .../src/useDebouncedCallback.stories.tsx}     |  8 ++---
 .../src/useDebouncedCallback.tests.tsx}       |  8 ++---
 .../src/useDebouncedCallback.ts}              |  0
 .../tsconfig.json                             |  0
 .../.npmignore                                |  0
 .../README.md                                 |  4 +--
 .../package.json                              |  6 ++--
 hooks/use-debounced-value/src/index.ts        |  2 ++
 .../src/useDebouncedValue.stories.css}        |  0
 .../src/useDebouncedValue.stories.mdx}        |  2 +-
 .../src/useDebouncedValue.stories.tsx}        |  8 ++---
 .../src/useDebouncedValue.tests.tsx}          |  8 ++---
 .../src/useDebouncedValue.ts                  | 10 +++++++
 .../tsconfig.json                             |  0
 package-lock.json                             | 30 ++++++++++++++-----
 package.json                                  |  2 ++
 25 files changed, 66 insertions(+), 50 deletions(-)
 delete mode 100644 hooks/use-debounce-callback/src/index.ts
 delete mode 100644 hooks/use-debounce/src/index.ts
 delete mode 100644 hooks/use-debounce/src/useDebounce.ts
 rename hooks/{use-debounce-callback => use-debounced-callback}/.npmignore (100%)
 rename hooks/{use-debounce-callback => use-debounced-callback}/README.md (66%)
 rename hooks/{use-debounce-callback => use-debounced-callback}/package.json (80%)
 create mode 100644 hooks/use-debounced-callback/src/index.ts
 rename hooks/{use-debounce-callback/src/useDebounceCallback.stories.css => use-debounced-callback/src/useDebouncedCallback.stories.css} (100%)
 rename hooks/{use-debounce-callback/src/useDebounceCallback.stories.mdx => use-debounced-callback/src/useDebouncedCallback.stories.mdx} (78%)
 rename hooks/{use-debounce-callback/src/useDebounceCallback.stories.tsx => use-debounced-callback/src/useDebouncedCallback.stories.tsx} (78%)
 rename hooks/{use-debounce-callback/src/useDebounceCallback.tests.tsx => use-debounced-callback/src/useDebouncedCallback.tests.tsx} (89%)
 rename hooks/{use-debounce-callback/src/useDebounceCallback.ts => use-debounced-callback/src/useDebouncedCallback.ts} (100%)
 rename hooks/{use-debounce-callback => use-debounced-callback}/tsconfig.json (100%)
 rename hooks/{use-debounce => use-debounced-value}/.npmignore (100%)
 rename hooks/{use-debounce => use-debounced-value}/README.md (65%)
 rename hooks/{use-debounce => use-debounced-value}/package.json (81%)
 create mode 100644 hooks/use-debounced-value/src/index.ts
 rename hooks/{use-debounce/src/useDebounce.stories.css => use-debounced-value/src/useDebouncedValue.stories.css} (100%)
 rename hooks/{use-debounce/src/useDebounce.stories.mdx => use-debounced-value/src/useDebouncedValue.stories.mdx} (79%)
 rename hooks/{use-debounce/src/useDebounce.stories.tsx => use-debounced-value/src/useDebouncedValue.stories.tsx} (75%)
 rename hooks/{use-debounce/src/useDebounce.tests.tsx => use-debounced-value/src/useDebouncedValue.tests.tsx} (79%)
 create mode 100644 hooks/use-debounced-value/src/useDebouncedValue.ts
 rename hooks/{use-debounce => use-debounced-value}/tsconfig.json (100%)

diff --git a/hooks/use-debounce-callback/src/index.ts b/hooks/use-debounce-callback/src/index.ts
deleted file mode 100644
index 7fded2f5..00000000
--- a/hooks/use-debounce-callback/src/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import useDebounceCallback from './useDebounceCallback';
-export default useDebounceCallback;
diff --git a/hooks/use-debounce/src/index.ts b/hooks/use-debounce/src/index.ts
deleted file mode 100644
index 565acd73..00000000
--- a/hooks/use-debounce/src/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import useDebounce from './useDebounce';
-export default useDebounce;
diff --git a/hooks/use-debounce/src/useDebounce.ts b/hooks/use-debounce/src/useDebounce.ts
deleted file mode 100644
index dfc83cd8..00000000
--- a/hooks/use-debounce/src/useDebounce.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { useState } from 'react';
-import useDebounceCallback from '@byndyusoft-ui/use-debounce-callback';
-
-export default function useDebounce(value: string, delay = 300): [string, (value: string) => void] {
-    const [debouncedValue, setValue] = useState(value);
-
-    const setDebounceValue = useDebounceCallback(setValue, delay);
-
-    return [debouncedValue, setDebounceValue];
-}
diff --git a/hooks/use-debounce-callback/.npmignore b/hooks/use-debounced-callback/.npmignore
similarity index 100%
rename from hooks/use-debounce-callback/.npmignore
rename to hooks/use-debounced-callback/.npmignore
diff --git a/hooks/use-debounce-callback/README.md b/hooks/use-debounced-callback/README.md
similarity index 66%
rename from hooks/use-debounce-callback/README.md
rename to hooks/use-debounced-callback/README.md
index 52e3e3a5..f57aaff7 100644
--- a/hooks/use-debounce-callback/README.md
+++ b/hooks/use-debounced-callback/README.md
@@ -1,9 +1,9 @@
-# `@byndyusoft-ui/use-debounce-callback`
+# `@byndyusoft-ui/use-debounced-callback`
 ---
 > A React hook that uses for delaying the execution of functions updates until a specified time period has passed without any further changes
 
 ### Installation
 
 ```
-npm i @byndyusoft-ui/use-debounce-callback
+npm i @byndyusoft-ui/use-debounced-callback
 ```
diff --git a/hooks/use-debounce-callback/package.json b/hooks/use-debounced-callback/package.json
similarity index 80%
rename from hooks/use-debounce-callback/package.json
rename to hooks/use-debounced-callback/package.json
index dc739e0b..e9b7f807 100644
--- a/hooks/use-debounce-callback/package.json
+++ b/hooks/use-debounced-callback/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@byndyusoft-ui/use-debounce-callback",
+  "name": "@byndyusoft-ui/use-debounced-callback",
   "version": "0.0.0",
   "description": "Byndyusoft UI React Hook",
   "keywords": [
@@ -10,7 +10,7 @@
     "debounce"
   ],
   "author": "Anastasia Vasenina <vasenina@byndyusoft.com>",
-  "homepage": "https://github.com/Byndyusoft/ui/tree/master/hooks/use-debounce#readme",
+  "homepage": "https://github.com/Byndyusoft/ui/tree/master/hooks/use-debounced-callback#readme",
   "license": "Apache-2.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -22,7 +22,7 @@
     "build": "tsc",
     "clean": "rimraf dist",
     "lint": "eslint src --config ../../eslint.config.js",
-    "test": "jest --config ../../jest.config.js"
+    "test": "jest --config ../../jest.config.js --roots hooks/use-debounced-callback/src"
   },
   "bugs": {
     "url": "https://github.com/Byndyusoft/ui/issues"
diff --git a/hooks/use-debounced-callback/src/index.ts b/hooks/use-debounced-callback/src/index.ts
new file mode 100644
index 00000000..9a796d68
--- /dev/null
+++ b/hooks/use-debounced-callback/src/index.ts
@@ -0,0 +1,2 @@
+import useDebouncedCallback from './useDebouncedCallback';
+export default useDebouncedCallback;
diff --git a/hooks/use-debounce-callback/src/useDebounceCallback.stories.css b/hooks/use-debounced-callback/src/useDebouncedCallback.stories.css
similarity index 100%
rename from hooks/use-debounce-callback/src/useDebounceCallback.stories.css
rename to hooks/use-debounced-callback/src/useDebouncedCallback.stories.css
diff --git a/hooks/use-debounce-callback/src/useDebounceCallback.stories.mdx b/hooks/use-debounced-callback/src/useDebouncedCallback.stories.mdx
similarity index 78%
rename from hooks/use-debounce-callback/src/useDebounceCallback.stories.mdx
rename to hooks/use-debounced-callback/src/useDebouncedCallback.stories.mdx
index cf910280..23cd019b 100644
--- a/hooks/use-debounce-callback/src/useDebounceCallback.stories.mdx
+++ b/hooks/use-debounced-callback/src/useDebouncedCallback.stories.mdx
@@ -2,6 +2,6 @@ import { Meta } from '@storybook/addon-docs';
 import Readme from '../README.md';
 import { Markdown } from '@storybook/blocks';
 
-<Meta title="hooks/useDebounce" />
+<Meta title="hooks/useDebouncedCallback" />
 
 <Markdown>{Readme}</Markdown>
diff --git a/hooks/use-debounce-callback/src/useDebounceCallback.stories.tsx b/hooks/use-debounced-callback/src/useDebouncedCallback.stories.tsx
similarity index 78%
rename from hooks/use-debounce-callback/src/useDebounceCallback.stories.tsx
rename to hooks/use-debounced-callback/src/useDebouncedCallback.stories.tsx
index 4d2ddfcd..ca886274 100644
--- a/hooks/use-debounce-callback/src/useDebounceCallback.stories.tsx
+++ b/hooks/use-debounced-callback/src/useDebouncedCallback.stories.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
-import useDebounceCallback from './useDebounceCallback';
-import './useDebounceCallback.stories.css';
+import useDebouncedCallback from './useDebouncedCallback';
+import './useDebouncedCallback.stories.css';
 import type { Meta, StoryObj } from '@storybook/react';
 
 type Story = StoryObj<typeof Template>;
@@ -11,7 +11,7 @@ const timeout = 2000;
 
 const Template = () => {
     const [value, setValue] = useState(oldValue);
-    const setDebounceValue = useDebounceCallback(setValue, timeout);
+    const setDebounceValue = useDebouncedCallback(setValue, timeout);
 
     return (
         <div className="container">
@@ -28,7 +28,7 @@ export const HookStory: Story = {
 };
 
 const meta: Meta<typeof Template> = {
-    title: 'hooks/useDebounceCallback',
+    title: 'hooks/useDebouncedCallback',
     component: Template
 };
 
diff --git a/hooks/use-debounce-callback/src/useDebounceCallback.tests.tsx b/hooks/use-debounced-callback/src/useDebouncedCallback.tests.tsx
similarity index 89%
rename from hooks/use-debounce-callback/src/useDebounceCallback.tests.tsx
rename to hooks/use-debounced-callback/src/useDebouncedCallback.tests.tsx
index 253fe2dd..88ca2760 100644
--- a/hooks/use-debounce-callback/src/useDebounceCallback.tests.tsx
+++ b/hooks/use-debounced-callback/src/useDebouncedCallback.tests.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { render, screen, RenderResult, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import useDebounceCallback from './useDebounceCallback';
+import useDebouncedCallback from './useDebouncedCallback';
 
 const oldValue = 'old value';
 const newValue = 'new value';
@@ -12,7 +12,7 @@ const resetLabel = 'reset label';
 
 const Setup = (): JSX.Element => {
     const [value, setValue] = useState(oldValue);
-    const setDebounceValue = useDebounceCallback(setValue, timeout);
+    const setDebounceValue = useDebouncedCallback(setValue, timeout);
 
     return (
         <div className="container">
@@ -32,8 +32,8 @@ const Setup = (): JSX.Element => {
     );
 };
 
-describe('hooks/useDebounceCallback', () => {
-    test('useDebounceCallback works', async () => {
+describe('hooks/useDebouncedCallback', () => {
+    test('useDebouncedCallback works', async () => {
         render(<Setup />);
 
         const debouncedChangeButton = await screen.findByLabelText(debouncedChangeLabel);
diff --git a/hooks/use-debounce-callback/src/useDebounceCallback.ts b/hooks/use-debounced-callback/src/useDebouncedCallback.ts
similarity index 100%
rename from hooks/use-debounce-callback/src/useDebounceCallback.ts
rename to hooks/use-debounced-callback/src/useDebouncedCallback.ts
diff --git a/hooks/use-debounce-callback/tsconfig.json b/hooks/use-debounced-callback/tsconfig.json
similarity index 100%
rename from hooks/use-debounce-callback/tsconfig.json
rename to hooks/use-debounced-callback/tsconfig.json
diff --git a/hooks/use-debounce/.npmignore b/hooks/use-debounced-value/.npmignore
similarity index 100%
rename from hooks/use-debounce/.npmignore
rename to hooks/use-debounced-value/.npmignore
diff --git a/hooks/use-debounce/README.md b/hooks/use-debounced-value/README.md
similarity index 65%
rename from hooks/use-debounce/README.md
rename to hooks/use-debounced-value/README.md
index 43678810..2382a97d 100644
--- a/hooks/use-debounce/README.md
+++ b/hooks/use-debounced-value/README.md
@@ -1,9 +1,9 @@
-# `@byndyusoft-ui/use-debounce`
+# `@byndyusoft-ui/use-debounced-value`
 ---
 > A React hook that uses to delay update state updates until a specified time period has passed without any further changes
 
 ### Installation
 
 ```
-npm i @byndyusoft-ui/use-debounce
+npm i @byndyusoft-ui/use-debounced-value
 ```
diff --git a/hooks/use-debounce/package.json b/hooks/use-debounced-value/package.json
similarity index 81%
rename from hooks/use-debounce/package.json
rename to hooks/use-debounced-value/package.json
index b8d940e7..00610c1c 100644
--- a/hooks/use-debounce/package.json
+++ b/hooks/use-debounced-value/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@byndyusoft-ui/use-debounce",
+  "name": "@byndyusoft-ui/use-debounced-value",
   "version": "0.0.0",
   "description": "Byndyusoft UI React Hook",
   "keywords": [
@@ -10,7 +10,7 @@
     "debounce"
   ],
   "author": "Anastasia Vasenina <vasenina@byndyusoft.com>",
-  "homepage": "https://github.com/Byndyusoft/ui/tree/master/hooks/use-debounce#readme",
+  "homepage": "https://github.com/Byndyusoft/ui/tree/master/hooks/use-debounced-value#readme",
   "license": "Apache-2.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -22,7 +22,7 @@
     "build": "tsc",
     "clean": "rimraf dist",
     "lint": "eslint src --config ../../eslint.config.js",
-    "test": "jest --config ../../jest.config.js"
+    "test": "jest --config ../../jest.config.js --roots hooks/use-debounced-value/src"
   },
   "bugs": {
     "url": "https://github.com/Byndyusoft/ui/issues"
diff --git a/hooks/use-debounced-value/src/index.ts b/hooks/use-debounced-value/src/index.ts
new file mode 100644
index 00000000..13295e00
--- /dev/null
+++ b/hooks/use-debounced-value/src/index.ts
@@ -0,0 +1,2 @@
+import useDebouncedValue from './useDebouncedValue';
+export default useDebouncedValue;
diff --git a/hooks/use-debounce/src/useDebounce.stories.css b/hooks/use-debounced-value/src/useDebouncedValue.stories.css
similarity index 100%
rename from hooks/use-debounce/src/useDebounce.stories.css
rename to hooks/use-debounced-value/src/useDebouncedValue.stories.css
diff --git a/hooks/use-debounce/src/useDebounce.stories.mdx b/hooks/use-debounced-value/src/useDebouncedValue.stories.mdx
similarity index 79%
rename from hooks/use-debounce/src/useDebounce.stories.mdx
rename to hooks/use-debounced-value/src/useDebouncedValue.stories.mdx
index cf910280..fa112bca 100644
--- a/hooks/use-debounce/src/useDebounce.stories.mdx
+++ b/hooks/use-debounced-value/src/useDebouncedValue.stories.mdx
@@ -2,6 +2,6 @@ import { Meta } from '@storybook/addon-docs';
 import Readme from '../README.md';
 import { Markdown } from '@storybook/blocks';
 
-<Meta title="hooks/useDebounce" />
+<Meta title="hooks/useDebouncedValue" />
 
 <Markdown>{Readme}</Markdown>
diff --git a/hooks/use-debounce/src/useDebounce.stories.tsx b/hooks/use-debounced-value/src/useDebouncedValue.stories.tsx
similarity index 75%
rename from hooks/use-debounce/src/useDebounce.stories.tsx
rename to hooks/use-debounced-value/src/useDebouncedValue.stories.tsx
index 166944ab..868d5f8a 100644
--- a/hooks/use-debounce/src/useDebounce.stories.tsx
+++ b/hooks/use-debounced-value/src/useDebouncedValue.stories.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
-import useDebounce from './useDebounce';
-import './useDebounce.stories.css';
+import useDebouncedValue from './useDebouncedValue';
+import './useDebouncedValue.stories.css';
 import type { Meta, StoryObj } from '@storybook/react';
 
 type Story = StoryObj<typeof Template>;
 
 const Template = () => {
-    const [debouncedValue, setDebouncedValue] = useDebounce('', 2000);
+    const [debouncedValue, setDebouncedValue] = useDebouncedValue('', 2000);
 
     return (
         <div className="container">
@@ -24,7 +24,7 @@ export const HookStory: Story = {
 };
 
 const meta: Meta<typeof Template> = {
-    title: 'hooks/useDebounce',
+    title: 'hooks/useDebouncedValue',
     component: Template
 };
 
diff --git a/hooks/use-debounce/src/useDebounce.tests.tsx b/hooks/use-debounced-value/src/useDebouncedValue.tests.tsx
similarity index 79%
rename from hooks/use-debounce/src/useDebounce.tests.tsx
rename to hooks/use-debounced-value/src/useDebouncedValue.tests.tsx
index 29614b96..2ba77b15 100644
--- a/hooks/use-debounce/src/useDebounce.tests.tsx
+++ b/hooks/use-debounced-value/src/useDebouncedValue.tests.tsx
@@ -1,13 +1,13 @@
 import React from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import useDebounce from './useDebounce';
+import useDebouncedValue from './useDebouncedValue';
 
 const debouncedValueLabel = 'debounced value';
 const inputValue = '1111';
 
 const Setup = (): JSX.Element => {
-    const [debouncedValue, setDebouncedValue] = useDebounce('', 2000);
+    const [debouncedValue, setDebouncedValue] = useDebouncedValue('', 2000);
 
     return (
         <div className="container">
@@ -19,8 +19,8 @@ const Setup = (): JSX.Element => {
     );
 };
 
-describe('hooks/useDebounce', () => {
-    test('useDebounce works', async () => {
+describe('hooks/useDebouncedValue', () => {
+    test('useDebouncedValue works', async () => {
         render(<Setup />);
 
         const input = await screen.findByRole('textbox');
diff --git a/hooks/use-debounced-value/src/useDebouncedValue.ts b/hooks/use-debounced-value/src/useDebouncedValue.ts
new file mode 100644
index 00000000..f9e9e8ee
--- /dev/null
+++ b/hooks/use-debounced-value/src/useDebouncedValue.ts
@@ -0,0 +1,10 @@
+import { useState } from 'react';
+import useDebouncedCallback from '@byndyusoft-ui/use-debounced-callback';
+
+export default function useDebouncedValue(value: string, delay = 300): [string, (value: string) => void] {
+    const [debouncedValue, setValue] = useState(value);
+
+    const setDebounceValue = useDebouncedCallback(setValue, delay);
+
+    return [debouncedValue, setDebounceValue];
+}
diff --git a/hooks/use-debounce/tsconfig.json b/hooks/use-debounced-value/tsconfig.json
similarity index 100%
rename from hooks/use-debounce/tsconfig.json
rename to hooks/use-debounced-value/tsconfig.json
diff --git a/package-lock.json b/package-lock.json
index d22009ae..81cc52ad 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,8 @@
         "styles/*"
       ],
       "dependencies": {
+        "@byndyusoft-ui/use-debounced-callback": "^0.0.0",
+        "@byndyusoft-ui/use-debounced-value": "^0.0.0",
         "save-dev": "^0.0.1-security"
       },
       "devDependencies": {
@@ -93,9 +95,21 @@
     "hooks/use-debounce": {
       "name": "@byndyusoft-ui/use-debounce",
       "version": "0.0.0",
+      "extraneous": true,
       "license": "Apache-2.0"
     },
     "hooks/use-debounce-callback": {
+      "version": "0.0.0",
+      "extraneous": true,
+      "license": "Apache-2.0"
+    },
+    "hooks/use-debounced-callback": {
+      "name": "@byndyusoft-ui/use-debounced-callback",
+      "version": "0.0.0",
+      "license": "Apache-2.0"
+    },
+    "hooks/use-debounced-value": {
+      "name": "@byndyusoft-ui/use-debounced-value",
       "version": "0.0.0",
       "license": "Apache-2.0"
     },
@@ -2377,12 +2391,12 @@
       "resolved": "hooks/use-click-outside",
       "link": true
     },
-    "node_modules/@byndyusoft-ui/use-debounce": {
-      "resolved": "hooks/use-debounce",
+    "node_modules/@byndyusoft-ui/use-debounced-callback": {
+      "resolved": "hooks/use-debounced-callback",
       "link": true
     },
-    "node_modules/@byndyusoft-ui/use-debounce-callback": {
-      "resolved": "hooks/use-debounce-callback",
+    "node_modules/@byndyusoft-ui/use-debounced-value": {
+      "resolved": "hooks/use-debounced-value",
       "link": true
     },
     "node_modules/@byndyusoft-ui/use-event-listener": {
@@ -33872,11 +33886,11 @@
         "@byndyusoft-ui/use-event-listener": "*"
       }
     },
-    "@byndyusoft-ui/use-debounce": {
-      "version": "file:hooks/use-debounce"
+    "@byndyusoft-ui/use-debounced-callback": {
+      "version": "file:hooks/use-debounced-callback"
     },
-    "@byndyusoft-ui/use-debounce-callback": {
-      "version": "file:hooks/use-debounce-callback"
+    "@byndyusoft-ui/use-debounced-value": {
+      "version": "file:hooks/use-debounced-value"
     },
     "@byndyusoft-ui/use-event-listener": {
       "version": "file:hooks/use-event-listener",
diff --git a/package.json b/package.json
index 9dd209df..316df57c 100644
--- a/package.json
+++ b/package.json
@@ -91,6 +91,8 @@
     "react-dom": "^17.0.2"
   },
   "dependencies": {
+    "@byndyusoft-ui/use-debounced-callback": "^0.0.0",
+    "@byndyusoft-ui/use-debounced-value": "^0.0.0",
     "save-dev": "^0.0.1-security"
   }
 }

From ecdb5be921e3f12c471a2ee72ca93a854a94be7e Mon Sep 17 00:00:00 2001
From: Nastya Vasenina <vasenina@byndyusoft.com>
Date: Wed, 17 Apr 2024 13:09:10 +0300
Subject: [PATCH 06/31] fix: delete wrong changes

---
 hooks/use-window-size/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/hooks/use-window-size/package.json b/hooks/use-window-size/package.json
index 7888b015..ab6f0d44 100644
--- a/hooks/use-window-size/package.json
+++ b/hooks/use-window-size/package.json
@@ -10,7 +10,7 @@
     "window",
     "size"
   ],
-  "author": "Anastasia Vasenina <vasenina@byndyusoft.com>",
+  "author": "Nastya Vasenina <vasenina@byndyusoft.com>",
   "homepage": "https://github.com/Byndyusoft/ui/tree/master/hooks/use-window-size#readme",
   "license": "Apache-2.0",
   "main": "dist/index.js",

From 4565f1151c9bf1650db80ad21575ed4dd8e3541e Mon Sep 17 00:00:00 2001
From: Nastya Vasenina <vasenina@byndyusoft.com>
Date: Wed, 17 Apr 2024 13:59:12 +0300
Subject: [PATCH 07/31] fix: fix test

---
 .../src/useDebouncedCallback.tests.tsx        | 28 +++++--------------
 1 file changed, 7 insertions(+), 21 deletions(-)

diff --git a/hooks/use-debounced-callback/src/useDebouncedCallback.tests.tsx b/hooks/use-debounced-callback/src/useDebouncedCallback.tests.tsx
index 88ca2760..6434b6e1 100644
--- a/hooks/use-debounced-callback/src/useDebouncedCallback.tests.tsx
+++ b/hooks/use-debounced-callback/src/useDebouncedCallback.tests.tsx
@@ -1,5 +1,5 @@
-import React, { useState } from 'react';
-import { render, screen, RenderResult, waitFor } from '@testing-library/react';
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import useDebouncedCallback from './useDebouncedCallback';
 
@@ -7,27 +7,20 @@ const oldValue = 'old value';
 const newValue = 'new value';
 const timeout = 2000;
 const debouncedChangeLabel = 'debounced change label';
-const changeLabel = 'change label';
-const resetLabel = 'reset label';
 
 const Setup = (): JSX.Element => {
-    const [value, setValue] = useState(oldValue);
-    const setDebounceValue = useDebouncedCallback(setValue, timeout);
+    let value = oldValue;
+    const handleChangeValue = () => (value = newValue);
+    const setDebounceValue = useDebouncedCallback(handleChangeValue, timeout);
 
     return (
         <div className="container">
             <span>
                 Value: <span>{value}</span>
             </span>
-            <button aria-label={debouncedChangeLabel} onClick={() => setDebounceValue(newValue)}>
+            <button aria-label={debouncedChangeLabel} onClick={setDebounceValue}>
                 debounced change
             </button>
-            <button aria-label={changeLabel} onClick={() => setValue(newValue)}>
-                change
-            </button>
-            <button aria-label={resetLabel} onClick={() => setValue(oldValue)}>
-                reset
-            </button>
         </div>
     );
 };
@@ -35,15 +28,8 @@ const Setup = (): JSX.Element => {
 describe('hooks/useDebouncedCallback', () => {
     test('useDebouncedCallback works', async () => {
         render(<Setup />);
-
-        const debouncedChangeButton = await screen.findByLabelText(debouncedChangeLabel);
-        const changeButton = await screen.findByLabelText(changeLabel);
-        const resetButton = await screen.findByLabelText(resetLabel);
-        expect(screen.findByText(oldValue)).toBeInTheDocument();
-        userEvent.click(changeButton);
-        expect(screen.findByText(newValue)).toBeInTheDocument();
-        userEvent.click(resetButton);
         expect(screen.findByText(oldValue)).toBeInTheDocument();
+        const debouncedChangeButton = await screen.getByLabelText(debouncedChangeLabel);
         userEvent.click(debouncedChangeButton);
         expect(screen.findByText(oldValue)).toBeInTheDocument();
         await waitFor(

From 6f85519f5f67d1049641bb665fa070d03a660cc3 Mon Sep 17 00:00:00 2001
From: Nastya Vasenina <vasenina@byndyusoft.com>
Date: Wed, 17 Apr 2024 16:00:09 +0300
Subject: [PATCH 08/31] fix: fix tests

---
 .../src/useDebouncedCallback.tests.tsx        | 43 ++++++-------------
 .../src/useDebouncedValue.tests.tsx           | 43 +++++++------------
 2 files changed, 30 insertions(+), 56 deletions(-)

diff --git a/hooks/use-debounced-callback/src/useDebouncedCallback.tests.tsx b/hooks/use-debounced-callback/src/useDebouncedCallback.tests.tsx
index 6434b6e1..8d2a183a 100644
--- a/hooks/use-debounced-callback/src/useDebouncedCallback.tests.tsx
+++ b/hooks/use-debounced-callback/src/useDebouncedCallback.tests.tsx
@@ -1,40 +1,25 @@
-import React from 'react';
-import { render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { waitFor } from '@testing-library/react';
+import { renderHook, act } from '@testing-library/react-hooks';
 import useDebouncedCallback from './useDebouncedCallback';
 
 const oldValue = 'old value';
 const newValue = 'new value';
 const timeout = 2000;
-const debouncedChangeLabel = 'debounced change label';
-
-const Setup = (): JSX.Element => {
-    let value = oldValue;
-    const handleChangeValue = () => (value = newValue);
-    const setDebounceValue = useDebouncedCallback(handleChangeValue, timeout);
-
-    return (
-        <div className="container">
-            <span>
-                Value: <span>{value}</span>
-            </span>
-            <button aria-label={debouncedChangeLabel} onClick={setDebounceValue}>
-                debounced change
-            </button>
-        </div>
-    );
-};
 
 describe('hooks/useDebouncedCallback', () => {
-    test('useDebouncedCallback works', async () => {
-        render(<Setup />);
-        expect(screen.findByText(oldValue)).toBeInTheDocument();
-        const debouncedChangeButton = await screen.getByLabelText(debouncedChangeLabel);
-        userEvent.click(debouncedChangeButton);
-        expect(screen.findByText(oldValue)).toBeInTheDocument();
-        await waitFor(
+    test('useDebouncedCallback works', () => {
+        let value = oldValue;
+        const handle = () => (value = newValue);
+        const { result } = renderHook(() => useDebouncedCallback(handle, timeout));
+        const setDebounceValue = result.current;
+        act(() => {
+            setDebounceValue();
+        });
+
+        expect(value).toEqual(oldValue);
+        waitFor(
             () => {
-                expect(screen.findByText(newValue)).toBeInTheDocument();
+                expect(value).toEqual(newValue);
             },
             { timeout: 2500 }
         );
diff --git a/hooks/use-debounced-value/src/useDebouncedValue.tests.tsx b/hooks/use-debounced-value/src/useDebouncedValue.tests.tsx
index 2ba77b15..18294734 100644
--- a/hooks/use-debounced-value/src/useDebouncedValue.tests.tsx
+++ b/hooks/use-debounced-value/src/useDebouncedValue.tests.tsx
@@ -1,36 +1,25 @@
-import React from 'react';
-import { render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { waitFor } from '@testing-library/react';
+import { renderHook, act } from '@testing-library/react-hooks';
 import useDebouncedValue from './useDebouncedValue';
 
-const debouncedValueLabel = 'debounced value';
-const inputValue = '1111';
-
-const Setup = (): JSX.Element => {
-    const [debouncedValue, setDebouncedValue] = useDebouncedValue('', 2000);
-
-    return (
-        <div className="container">
-            <span>
-                Debounced value: <span aria-label={debouncedValueLabel}>{debouncedValue}</span>
-            </span>
-            <input onChange={e => setDebouncedValue(e.target.value)} />
-        </div>
-    );
-};
+const oldValue = 'old value';
+const newValue = 'new value';
+const timeout = 2000;
 
 describe('hooks/useDebouncedValue', () => {
-    test('useDebouncedValue works', async () => {
-        render(<Setup />);
-
-        const input = await screen.findByRole('textbox');
-        userEvent.type(input, inputValue);
-
-        await waitFor(
+    test('useDebouncedValue works', () => {
+        const { result } = renderHook(() => useDebouncedValue(oldValue, timeout));
+        const [debouncedValue, setDebouncedValue] = result.current;
+        expect(debouncedValue).toEqual(oldValue);
+        act(() => {
+            setDebouncedValue(newValue);
+        });
+        expect(debouncedValue).toEqual(oldValue);
+        waitFor(
             () => {
-                expect(screen.getByLabelText(debouncedValueLabel)).toHaveTextContent(inputValue);
+                expect(debouncedValue).toEqual(newValue);
             },
-            { timeout: 2100 }
+            { timeout: 2500 }
         );
     });
 });

From 0fe4443a5e82dfdf8be4b433f2a34acc5851eac8 Mon Sep 17 00:00:00 2001
From: Eugene Abrosimov <sadcitizen@yandex.ru>
Date: Sun, 29 Sep 2024 16:38:47 +0500
Subject: [PATCH 09/31] chore: fix package.json

---
 hooks/use-debounced-value/package.json | 3 +++
 package.json                           | 2 --
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/hooks/use-debounced-value/package.json b/hooks/use-debounced-value/package.json
index 00610c1c..af42a5fa 100644
--- a/hooks/use-debounced-value/package.json
+++ b/hooks/use-debounced-value/package.json
@@ -29,5 +29,8 @@
   },
   "publishConfig": {
     "access": "public"
+  },
+  "peerDependencies": {
+    "@byndyusoft-ui/use-debounced-callback": "*"
   }
 }
diff --git a/package.json b/package.json
index 316df57c..9dd209df 100644
--- a/package.json
+++ b/package.json
@@ -91,8 +91,6 @@
     "react-dom": "^17.0.2"
   },
   "dependencies": {
-    "@byndyusoft-ui/use-debounced-callback": "^0.0.0",
-    "@byndyusoft-ui/use-debounced-value": "^0.0.0",
     "save-dev": "^0.0.1-security"
   }
 }

From ef012362844dde0b9d738d1932a83c693593d003 Mon Sep 17 00:00:00 2001
From: Viktor Smorodin <smorodin@byndyusoft.com>
Date: Fri, 29 Nov 2024 18:34:08 +0300
Subject: [PATCH 10/31] =?UTF-8?q?refactor(usedebounce):=20=D1=80=D0=B5?=
 =?UTF-8?q?=D1=84=D0=B0=D0=BA=D1=82=D0=BE=D1=80=D0=B8=D0=BD=D0=B3=20=D1=85?=
 =?UTF-8?q?=D1=83=D0=BA=D0=BE=D0=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/useDebouncedCallback.ts               | 20 ++++++++-----------
 .../src/useDebouncedValue.ts                  | 12 +++++++----
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/hooks/use-debounced-callback/src/useDebouncedCallback.ts b/hooks/use-debounced-callback/src/useDebouncedCallback.ts
index d1869ae1..b806f985 100644
--- a/hooks/use-debounced-callback/src/useDebouncedCallback.ts
+++ b/hooks/use-debounced-callback/src/useDebouncedCallback.ts
@@ -1,30 +1,26 @@
 import { useEffect, useRef } from 'react';
 
-export default function useDebouncedCallback<A extends any[]>(
+const useDebouncedCallback = <A extends any[]>(
     callback: (...args: A) => void,
     delay: number
-): (...args: A) => void {
+): (...args: A) => void => {
     const argsRef = useRef<A>();
-    const timeout = useRef<ReturnType<typeof setTimeout>>();
+    const timeoutIdRef = useRef<ReturnType<typeof setTimeout>>();
 
-    function cleanup() {
-        if (timeout.current) {
-            clearTimeout(timeout.current);
-        }
-    }
+    const cleanup = () => clearTimeout(timeoutIdRef.current);
 
     useEffect(() => cleanup, []);
 
-    const setDebouncedValue = (...args: A) => {
+    return (...args: A): void => {
         argsRef.current = args;
         cleanup();
 
-        timeout.current = setTimeout(() => {
+        timeoutIdRef.current = setTimeout(() => {
             if (argsRef.current) {
                 callback(...argsRef.current);
             }
         }, delay);
     };
+};
 
-    return setDebouncedValue;
-}
+export default useDebouncedCallback;
diff --git a/hooks/use-debounced-value/src/useDebouncedValue.ts b/hooks/use-debounced-value/src/useDebouncedValue.ts
index f9e9e8ee..72ba5b78 100644
--- a/hooks/use-debounced-value/src/useDebouncedValue.ts
+++ b/hooks/use-debounced-value/src/useDebouncedValue.ts
@@ -1,10 +1,14 @@
 import { useState } from 'react';
 import useDebouncedCallback from '@byndyusoft-ui/use-debounced-callback';
 
-export default function useDebouncedValue(value: string, delay = 300): [string, (value: string) => void] {
+type THookReturn<T> = [T, (arg: T) => void];
+
+const useDebouncedValue = <T>(value: T, delay = 300): THookReturn<T> => {
     const [debouncedValue, setValue] = useState(value);
 
-    const setDebounceValue = useDebouncedCallback(setValue, delay);
+    const setDebouncedValue = useDebouncedCallback(setValue, delay);
+
+    return [debouncedValue, setDebouncedValue];
+};
 
-    return [debouncedValue, setDebounceValue];
-}
+export default useDebouncedValue;

From 66f41850d70efc3442b4471f2e5685daca7c5938 Mon Sep 17 00:00:00 2001
From: Viktor Smorodin <smorodin@byndyusoft.com>
Date: Sun, 1 Dec 2024 12:31:42 +0300
Subject: [PATCH 11/31] =?UTF-8?q?feat(useDebounce):=20=D0=B4=D0=BE=D0=B1?=
 =?UTF-8?q?=D0=B0=D0=B2=D0=B8=D0=BB=20tsconfig.build.json?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 hooks/use-debounced-callback/tsconfig.build.json | 4 ++++
 hooks/use-debounced-callback/tsconfig.json       | 3 +--
 hooks/use-debounced-value/tsconfig.build.json    | 4 ++++
 3 files changed, 9 insertions(+), 2 deletions(-)
 create mode 100644 hooks/use-debounced-callback/tsconfig.build.json
 create mode 100644 hooks/use-debounced-value/tsconfig.build.json

diff --git a/hooks/use-debounced-callback/tsconfig.build.json b/hooks/use-debounced-callback/tsconfig.build.json
new file mode 100644
index 00000000..b4b36060
--- /dev/null
+++ b/hooks/use-debounced-callback/tsconfig.build.json
@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "exclude": ["src/*.tests.ts"]
+}
diff --git a/hooks/use-debounced-callback/tsconfig.json b/hooks/use-debounced-callback/tsconfig.json
index a67bd73b..5b7870da 100644
--- a/hooks/use-debounced-callback/tsconfig.json
+++ b/hooks/use-debounced-callback/tsconfig.json
@@ -7,6 +7,5 @@
     "module": "commonjs",
     "target": "es6"
   },
-  "include": ["src"],
-  "exclude": ["node_modules", "src/*.tests.ts"]
+  "include": ["src"]
 }
diff --git a/hooks/use-debounced-value/tsconfig.build.json b/hooks/use-debounced-value/tsconfig.build.json
new file mode 100644
index 00000000..b4b36060
--- /dev/null
+++ b/hooks/use-debounced-value/tsconfig.build.json
@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "exclude": ["src/*.tests.ts"]
+}

From a5772384a9971230ab3dd2f21629ededf0d7d784 Mon Sep 17 00:00:00 2001
From: Viktor Smorodin <smorodin@byndyusoft.com>
Date: Sun, 1 Dec 2024 12:32:25 +0300
Subject: [PATCH 12/31] =?UTF-8?q?feat(useDebounce):=20=D0=B4=D0=BE=D0=B1?=
 =?UTF-8?q?=D0=B0=D0=B2=D0=B8=D0=BB=20tsconfig.build.json?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 hooks/use-debounced-value/tsconfig.json | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/hooks/use-debounced-value/tsconfig.json b/hooks/use-debounced-value/tsconfig.json
index a67bd73b..5b7870da 100644
--- a/hooks/use-debounced-value/tsconfig.json
+++ b/hooks/use-debounced-value/tsconfig.json
@@ -7,6 +7,5 @@
     "module": "commonjs",
     "target": "es6"
   },
-  "include": ["src"],
-  "exclude": ["node_modules", "src/*.tests.ts"]
+  "include": ["src"]
 }

From 610f581bd0c37088ed93c433da9876023a3370b2 Mon Sep 17 00:00:00 2001
From: Viktor Smorodin <smorodin@byndyusoft.com>
Date: Mon, 2 Dec 2024 18:35:15 +0300
Subject: [PATCH 13/31] =?UTF-8?q?test(hooks/usedebounce):=20=D1=82=D0=B5?=
 =?UTF-8?q?=D1=81=D1=82=D1=8B=20=D0=B8=20=D1=80=D0=B8=D0=B4=D0=BC=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 hooks/use-debounced-callback/README.md        | 25 ++++++++++
 .../src/useDebouncedCallback.tests.tsx        | 46 ++++++++++++++++---
 .../src/useDebouncedCallback.ts               |  8 ++--
 hooks/use-debounced-value/README.md           | 11 +++++
 .../src/useDebouncedValue.tests.tsx           | 27 +++++++----
 .../src/useDebouncedValue.ts                  |  4 +-
 6 files changed, 99 insertions(+), 22 deletions(-)

diff --git a/hooks/use-debounced-callback/README.md b/hooks/use-debounced-callback/README.md
index f57aaff7..55eaf106 100644
--- a/hooks/use-debounced-callback/README.md
+++ b/hooks/use-debounced-callback/README.md
@@ -6,4 +6,29 @@
 
 ```
 npm i @byndyusoft-ui/use-debounced-callback
+# or
+yarn add @byndyusoft-ui/use-debounced-callback
 ```
+
+### Usage
+
+```ts
+type THookReturn<T> = [T, (arg: T) => void];
+
+const useDebouncedValue = <T>(value: T, delay = 300): THookReturn<T> => {
+    const [debouncedValue, setValue] = useState(value);
+
+    const setDebouncedValue = useDebouncedCallback(setValue, delay);
+
+    return [debouncedValue, setDebouncedValue];
+};
+```
+
+### License
+
+Apache-2.0
+
+### Authors
+
+Anastasia Vasenina\
+Viktor Smorodin
\ No newline at end of file
diff --git a/hooks/use-debounced-callback/src/useDebouncedCallback.tests.tsx b/hooks/use-debounced-callback/src/useDebouncedCallback.tests.tsx
index 8d2a183a..00c68872 100644
--- a/hooks/use-debounced-callback/src/useDebouncedCallback.tests.tsx
+++ b/hooks/use-debounced-callback/src/useDebouncedCallback.tests.tsx
@@ -4,24 +4,56 @@ import useDebouncedCallback from './useDebouncedCallback';
 
 const oldValue = 'old value';
 const newValue = 'new value';
-const timeout = 2000;
 
 describe('hooks/useDebouncedCallback', () => {
-    test('useDebouncedCallback works', () => {
+    test('works correctly with one handler call', async () => {
         let value = oldValue;
         const handle = () => (value = newValue);
-        const { result } = renderHook(() => useDebouncedCallback(handle, timeout));
+        const { result } = renderHook(() => useDebouncedCallback(handle, 2000));
         const setDebounceValue = result.current;
-        act(() => {
-            setDebounceValue();
-        });
+
+        act(setDebounceValue);
 
         expect(value).toEqual(oldValue);
-        waitFor(
+
+        await waitFor(
+            () => {
+                expect(value).toEqual(oldValue);
+            },
+            { timeout: 1000 }
+        );
+
+        await waitFor(
             () => {
                 expect(value).toEqual(newValue);
             },
             { timeout: 2500 }
         );
     });
+
+    test('works correctly with several handler calls', async () => {
+        const handle = jest.fn();
+        const { result } = renderHook(() => useDebouncedCallback(handle, 2000));
+        const setDebounceValue = result.current;
+
+        act(setDebounceValue);
+        act(setDebounceValue);
+
+        await waitFor(
+            () => {
+                expect(handle).toBeCalledTimes(1);
+            },
+            { timeout: 2500 }
+        );
+
+        act(setDebounceValue);
+        act(setDebounceValue);
+
+        await waitFor(
+            () => {
+                expect(handle).toBeCalledTimes(2);
+            },
+            { timeout: 2500 }
+        );
+    });
 });
diff --git a/hooks/use-debounced-callback/src/useDebouncedCallback.ts b/hooks/use-debounced-callback/src/useDebouncedCallback.ts
index b806f985..9dc6bcc4 100644
--- a/hooks/use-debounced-callback/src/useDebouncedCallback.ts
+++ b/hooks/use-debounced-callback/src/useDebouncedCallback.ts
@@ -1,15 +1,15 @@
 import { useEffect, useRef } from 'react';
 
-const useDebouncedCallback = <A extends any[]>(
+export function useDebouncedCallback<A extends any[]>(
     callback: (...args: A) => void,
     delay: number
-): (...args: A) => void => {
+): (...args: A) => void {
     const argsRef = useRef<A>();
     const timeoutIdRef = useRef<ReturnType<typeof setTimeout>>();
 
     const cleanup = () => clearTimeout(timeoutIdRef.current);
 
-    useEffect(() => cleanup, []);
+    useEffect(() => cleanup(), []);
 
     return (...args: A): void => {
         argsRef.current = args;
@@ -21,6 +21,6 @@ const useDebouncedCallback = <A extends any[]>(
             }
         }, delay);
     };
-};
+}
 
 export default useDebouncedCallback;
diff --git a/hooks/use-debounced-value/README.md b/hooks/use-debounced-value/README.md
index 2382a97d..ae9a3859 100644
--- a/hooks/use-debounced-value/README.md
+++ b/hooks/use-debounced-value/README.md
@@ -6,4 +6,15 @@
 
 ```
 npm i @byndyusoft-ui/use-debounced-value
+# or
+yarn add @byndyusoft-ui/use-debounced-value
 ```
+
+### License
+
+Apache-2.0
+
+### Authors
+
+Anastasia Vasenina\
+Viktor Smorodin
diff --git a/hooks/use-debounced-value/src/useDebouncedValue.tests.tsx b/hooks/use-debounced-value/src/useDebouncedValue.tests.tsx
index 18294734..1ca8d842 100644
--- a/hooks/use-debounced-value/src/useDebouncedValue.tests.tsx
+++ b/hooks/use-debounced-value/src/useDebouncedValue.tests.tsx
@@ -4,20 +4,31 @@ import useDebouncedValue from './useDebouncedValue';
 
 const oldValue = 'old value';
 const newValue = 'new value';
-const timeout = 2000;
 
 describe('hooks/useDebouncedValue', () => {
-    test('useDebouncedValue works', () => {
-        const { result } = renderHook(() => useDebouncedValue(oldValue, timeout));
-        const [debouncedValue, setDebouncedValue] = result.current;
-        expect(debouncedValue).toEqual(oldValue);
+    test('works correctly', async () => {
+        const { result } = renderHook(() => useDebouncedValue(oldValue, 2000));
+        const getCurrentDebouncedValue = () => result.current[0];
+        const setDebouncedValue = result.current[1];
+
+        expect(getCurrentDebouncedValue()).toEqual(oldValue);
+
         act(() => {
             setDebouncedValue(newValue);
         });
-        expect(debouncedValue).toEqual(oldValue);
-        waitFor(
+
+        expect(getCurrentDebouncedValue()).toEqual(oldValue);
+
+        await waitFor(
+            () => {
+                expect(getCurrentDebouncedValue()).toEqual(oldValue);
+            },
+            { timeout: 1500 }
+        );
+
+        await waitFor(
             () => {
-                expect(debouncedValue).toEqual(newValue);
+                expect(getCurrentDebouncedValue()).toEqual(newValue);
             },
             { timeout: 2500 }
         );
diff --git a/hooks/use-debounced-value/src/useDebouncedValue.ts b/hooks/use-debounced-value/src/useDebouncedValue.ts
index 72ba5b78..b46c6d2a 100644
--- a/hooks/use-debounced-value/src/useDebouncedValue.ts
+++ b/hooks/use-debounced-value/src/useDebouncedValue.ts
@@ -3,12 +3,10 @@ import useDebouncedCallback from '@byndyusoft-ui/use-debounced-callback';
 
 type THookReturn<T> = [T, (arg: T) => void];
 
-const useDebouncedValue = <T>(value: T, delay = 300): THookReturn<T> => {
+export default function useDebouncedValue<T>(value: T, delay = 300): THookReturn<T> {
     const [debouncedValue, setValue] = useState(value);
 
     const setDebouncedValue = useDebouncedCallback(setValue, delay);
 
     return [debouncedValue, setDebouncedValue];
 };
-
-export default useDebouncedValue;

From c19db26464b00b36ff992375f5c622ffaa111675 Mon Sep 17 00:00:00 2001
From: Viktor Smorodin <smorodin@byndyusoft.com>
Date: Mon, 2 Dec 2024 20:50:45 +0300
Subject: [PATCH 14/31] =?UTF-8?q?feat(hooks/usedebounce):=20=D1=80=D0=B5?=
 =?UTF-8?q?=D1=84=D0=B0=D0=BA=D1=82=D0=BE=D1=80=20=D0=B8=20=D0=B8=D1=81?=
 =?UTF-8?q?=D1=82=D0=BE=D1=80=D0=B8=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 hooks/use-debounced-callback/README.md        |  4 +-
 .../src/useDebouncedCallback.ts               | 14 ++---
 hooks/use-debounced-value/README.md           |  4 +-
 .../src/useDebouncedValue.stories.css         | 36 +++++++++++--
 .../src/useDebouncedValue.stories.mdx         | 20 ++++++-
 .../src/useDebouncedValue.stories.tsx         | 52 ++++++++++++++-----
 .../src/useDebouncedValue.ts                  |  4 +-
 7 files changed, 100 insertions(+), 34 deletions(-)

diff --git a/hooks/use-debounced-callback/README.md b/hooks/use-debounced-callback/README.md
index 55eaf106..49644f8b 100644
--- a/hooks/use-debounced-callback/README.md
+++ b/hooks/use-debounced-callback/README.md
@@ -1,5 +1,6 @@
 # `@byndyusoft-ui/use-debounced-callback`
 ---
+
 > A React hook that uses for delaying the execution of functions updates until a specified time period has passed without any further changes
 
 ### Installation
@@ -30,5 +31,4 @@ Apache-2.0
 
 ### Authors
 
-Anastasia Vasenina\
-Viktor Smorodin
\ No newline at end of file
+Anastasia Vasenina, Viktor Smorodin
\ No newline at end of file
diff --git a/hooks/use-debounced-callback/src/useDebouncedCallback.ts b/hooks/use-debounced-callback/src/useDebouncedCallback.ts
index 9dc6bcc4..8d61e686 100644
--- a/hooks/use-debounced-callback/src/useDebouncedCallback.ts
+++ b/hooks/use-debounced-callback/src/useDebouncedCallback.ts
@@ -1,26 +1,20 @@
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useCallback } from 'react';
 
 export function useDebouncedCallback<A extends any[]>(
     callback: (...args: A) => void,
     delay: number
 ): (...args: A) => void {
-    const argsRef = useRef<A>();
     const timeoutIdRef = useRef<ReturnType<typeof setTimeout>>();
 
     const cleanup = () => clearTimeout(timeoutIdRef.current);
 
     useEffect(() => cleanup(), []);
 
-    return (...args: A): void => {
-        argsRef.current = args;
+    return useCallback((...args: A): void => {
         cleanup();
 
-        timeoutIdRef.current = setTimeout(() => {
-            if (argsRef.current) {
-                callback(...argsRef.current);
-            }
-        }, delay);
-    };
+        timeoutIdRef.current = setTimeout(() => callback(...args), delay);
+    }, [delay]);
 }
 
 export default useDebouncedCallback;
diff --git a/hooks/use-debounced-value/README.md b/hooks/use-debounced-value/README.md
index ae9a3859..18de9847 100644
--- a/hooks/use-debounced-value/README.md
+++ b/hooks/use-debounced-value/README.md
@@ -1,5 +1,6 @@
 # `@byndyusoft-ui/use-debounced-value`
 ---
+
 > A React hook that uses to delay update state updates until a specified time period has passed without any further changes
 
 ### Installation
@@ -16,5 +17,4 @@ Apache-2.0
 
 ### Authors
 
-Anastasia Vasenina\
-Viktor Smorodin
+Anastasia Vasenina, Viktor Smorodin
diff --git a/hooks/use-debounced-value/src/useDebouncedValue.stories.css b/hooks/use-debounced-value/src/useDebouncedValue.stories.css
index c70c2fae..0b50e4b2 100644
--- a/hooks/use-debounced-value/src/useDebouncedValue.stories.css
+++ b/hooks/use-debounced-value/src/useDebouncedValue.stories.css
@@ -1,10 +1,36 @@
 .container {
     display: flex;
     flex-direction: column;
-    gap: 8px;
+    gap: 0.5rem;
 }
 
-input{
-    max-height: 40px;
-    width: 100px;     
-}
\ No newline at end of file
+.block {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    width: 2rem;
+}
+
+.title {
+   width: 8rem;
+}
+
+.input {
+    max-height: 3.5rem;
+    width: 12rem;
+}
+
+.divider {
+    width: 100%;
+    height: 1px;
+    margin: 0.5rem 0;
+
+    background-color: gray;
+}
diff --git a/hooks/use-debounced-value/src/useDebouncedValue.stories.mdx b/hooks/use-debounced-value/src/useDebouncedValue.stories.mdx
index fa112bca..a3dbeaa1 100644
--- a/hooks/use-debounced-value/src/useDebouncedValue.stories.mdx
+++ b/hooks/use-debounced-value/src/useDebouncedValue.stories.mdx
@@ -1,7 +1,25 @@
 import { Meta } from '@storybook/addon-docs';
 import Readme from '../README.md';
-import { Markdown } from '@storybook/blocks';
+import { Markdown, Source, Canvas, Story} from '@storybook/blocks';
+import { TestStory } from './useDebouncedValue.stories';
 
 <Meta title="hooks/useDebouncedValue" />
 
 <Markdown>{Readme}</Markdown>
+
+## Usage
+
+To use the hook in your project you must:
+
+1. Import the component where you need it:
+
+
+<Source language="javascript" code="import useDebouncedValue from '@byndyusoft-ui/use-debounced-value';" />
+
+
+2. Give start value and delay props:
+
+
+<Canvas withSource="open" of={TestStory}>
+    <Story story={TestStory} />
+</Canvas>
diff --git a/hooks/use-debounced-value/src/useDebouncedValue.stories.tsx b/hooks/use-debounced-value/src/useDebouncedValue.stories.tsx
index 868d5f8a..8b45e163 100644
--- a/hooks/use-debounced-value/src/useDebouncedValue.stories.tsx
+++ b/hooks/use-debounced-value/src/useDebouncedValue.stories.tsx
@@ -1,27 +1,55 @@
-import React from 'react';
+import React, { useState } from 'react';
 import useDebouncedValue from './useDebouncedValue';
 import './useDebouncedValue.stories.css';
-import type { Meta, StoryObj } from '@storybook/react';
+// import type { StoryObj } from '@storybook/react';
+import {Meta} from '@storybook/react';
 
-type Story = StoryObj<typeof Template>;
+// type Story = StoryObj<typeof Template>;
 
 const Template = () => {
-    const [debouncedValue, setDebouncedValue] = useDebouncedValue('', 2000);
+    const [delay, setDelay] = useState(1000)
+    const [debouncedValue, setDebouncedValue] = useDebouncedValue('', delay);
 
     return (
         <div className="container">
-            <span>
-                Debounced value: <span>{debouncedValue}</span>
-            </span>
-            <input onChange={e => setDebouncedValue(e.target.value)} />
-            <button onClick={() => setDebouncedValue('10000')}>set debounced value</button>
+            <div className="block">
+                <span className="title">Delay:</span>
+                <button
+                    className="button"
+                    type="button"
+                    disabled={delay <= 0}
+                    onClick={() => setDelay(delay - 100)}
+                >-</button>
+
+                <span>{`${delay} ms`}</span>
+
+                <button
+                    className="button"
+                    type="button"
+                    onClick={() => setDelay(delay + 100)}
+                >+</button>
+            </div>
+
+            <div className="block">
+                <span className="title">Type anything:</span>
+                <input className="input" onChange={e => setDebouncedValue(e.target.value)} />
+            </div>
+
+            <div className="divider" />
+
+            <div className="block">
+                <span className="title">Debounced result:</span>
+                <span>{debouncedValue}</span>
+            </div>
         </div>
     );
 };
 
-export const HookStory: Story = {
-    decorators: [() => <Template />]
-};
+export const TestStory = Template.bind({});
+
+// export const HookStory: Story = {
+//     decorators: [() => <Template />],
+// };
 
 const meta: Meta<typeof Template> = {
     title: 'hooks/useDebouncedValue',
diff --git a/hooks/use-debounced-value/src/useDebouncedValue.ts b/hooks/use-debounced-value/src/useDebouncedValue.ts
index b46c6d2a..1ecc2d8a 100644
--- a/hooks/use-debounced-value/src/useDebouncedValue.ts
+++ b/hooks/use-debounced-value/src/useDebouncedValue.ts
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useMemo } from 'react';
 import useDebouncedCallback from '@byndyusoft-ui/use-debounced-callback';
 
 type THookReturn<T> = [T, (arg: T) => void];
@@ -8,5 +8,5 @@ export default function useDebouncedValue<T>(value: T, delay = 300): THookReturn
 
     const setDebouncedValue = useDebouncedCallback(setValue, delay);
 
-    return [debouncedValue, setDebouncedValue];
+    return useMemo(() => ([debouncedValue, setDebouncedValue]), [debouncedValue, setDebouncedValue]);
 };

From 02e225796cc5356e4ffe1222444ea05c675aff6b Mon Sep 17 00:00:00 2001
From: Viktor Smorodin <smorodin@byndyusoft.com>
Date: Tue, 3 Dec 2024 21:15:51 +0300
Subject: [PATCH 15/31] =?UTF-8?q?feat(hooks/useDebouncedValue):=20=D1=80?=
 =?UTF-8?q?=D0=B0=D0=B7=D0=BE=D0=B1=D1=80=D0=B0=D0=BB=D1=81=D1=8F=20=D1=81?=
 =?UTF-8?q?=D0=BE=20storybook=20=D0=B8=20mdx?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .storybook/main.ts                            |  8 +++---
 .../src/useDebouncedValue.docs.mdx            | 21 ++++++++++++++++
 .../src/useDebouncedValue.stories.mdx         | 25 -------------------
 .../src/useDebouncedValue.stories.tsx         | 25 +++++++------------
 4 files changed, 35 insertions(+), 44 deletions(-)
 create mode 100644 hooks/use-debounced-value/src/useDebouncedValue.docs.mdx
 delete mode 100644 hooks/use-debounced-value/src/useDebouncedValue.stories.mdx

diff --git a/.storybook/main.ts b/.storybook/main.ts
index 4cbefb3e..8dae993a 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -1,9 +1,11 @@
 import { dirname, join } from 'path';
 module.exports = {
     stories: [
-        '../components/**/src/**/*.stories.@(js|jsx|ts|tsx|mdx)',
-        '../hooks/**/src/**/*.stories.@(js|jsx|ts|tsx|mdx)',
-        '../styles/**/*.stories.@(js|jsx|ts|tsx|mdx)'
+        '../components/**/src/**/*.stories.@(js|jsx|ts|tsx)',
+        '../components/**/src/**/*.docs.mdx',
+        '../hooks/**/src/**/*.stories.@(js|jsx|ts|tsx)',
+        '../hooks/**/src/**/*.docs.mdx',
+        '../styles/**/*.stories.@(js|jsx|ts|tsx)'
     ],
 
     addons: [
diff --git a/hooks/use-debounced-value/src/useDebouncedValue.docs.mdx b/hooks/use-debounced-value/src/useDebouncedValue.docs.mdx
new file mode 100644
index 00000000..1c8adce0
--- /dev/null
+++ b/hooks/use-debounced-value/src/useDebouncedValue.docs.mdx
@@ -0,0 +1,21 @@
+import { Markdown, Source, Canvas, Meta, Story } from '@storybook/blocks';
+import * as useDebouncedValueStories from './useDebouncedValue.stories';
+import Readme from '../README.md';
+
+<Meta title="hooks/useDebouncedValue" of={useDebouncedValueStories} />
+
+<Markdown>{Readme}</Markdown>
+
+## Usage
+
+To use the hook in your project you must:
+
+1. Import the hook where you need it:
+
+<Source language="javascript" code="import useDebouncedValue from '@byndyusoft-ui/use-debounced-value';" />
+
+2. Give start value and delay props:
+
+<Canvas sourceState="shown" story={useDebouncedValueStories.DebouncedInputStory} />
+
+<Story of={useDebouncedValueStories.DebouncedInputStory} />
\ No newline at end of file
diff --git a/hooks/use-debounced-value/src/useDebouncedValue.stories.mdx b/hooks/use-debounced-value/src/useDebouncedValue.stories.mdx
deleted file mode 100644
index a3dbeaa1..00000000
--- a/hooks/use-debounced-value/src/useDebouncedValue.stories.mdx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-import Readme from '../README.md';
-import { Markdown, Source, Canvas, Story} from '@storybook/blocks';
-import { TestStory } from './useDebouncedValue.stories';
-
-<Meta title="hooks/useDebouncedValue" />
-
-<Markdown>{Readme}</Markdown>
-
-## Usage
-
-To use the hook in your project you must:
-
-1. Import the component where you need it:
-
-
-<Source language="javascript" code="import useDebouncedValue from '@byndyusoft-ui/use-debounced-value';" />
-
-
-2. Give start value and delay props:
-
-
-<Canvas withSource="open" of={TestStory}>
-    <Story story={TestStory} />
-</Canvas>
diff --git a/hooks/use-debounced-value/src/useDebouncedValue.stories.tsx b/hooks/use-debounced-value/src/useDebouncedValue.stories.tsx
index 8b45e163..a32b1062 100644
--- a/hooks/use-debounced-value/src/useDebouncedValue.stories.tsx
+++ b/hooks/use-debounced-value/src/useDebouncedValue.stories.tsx
@@ -1,13 +1,10 @@
 import React, { useState } from 'react';
+import { StoryObj } from '@storybook/react';
 import useDebouncedValue from './useDebouncedValue';
 import './useDebouncedValue.stories.css';
-// import type { StoryObj } from '@storybook/react';
-import {Meta} from '@storybook/react';
 
-// type Story = StoryObj<typeof Template>;
-
-const Template = () => {
-    const [delay, setDelay] = useState(1000)
+const DebouncedInput = () => {
+    const [delay, setDelay] = useState(1000);
     const [debouncedValue, setDebouncedValue] = useDebouncedValue('', delay);
 
     return (
@@ -45,15 +42,11 @@ const Template = () => {
     );
 };
 
-export const TestStory = Template.bind({});
-
-// export const HookStory: Story = {
-//     decorators: [() => <Template />],
-// };
-
-const meta: Meta<typeof Template> = {
-    title: 'hooks/useDebouncedValue',
-    component: Template
+export const DebouncedInputStory : StoryObj<typeof DebouncedInput> = {
+    name: 'Debounced input',
+    render: DebouncedInput
 };
 
-export default meta;
+export default {
+    title: 'hooks/useDebouncedValue'
+};

From 4934f14e1392080540da9ac717490a639ac62376 Mon Sep 17 00:00:00 2001
From: Viktor Smorodin <v.smorodinaspb@gmail.com>
Date: Wed, 4 Dec 2024 11:23:10 +0300
Subject: [PATCH 16/31] =?UTF-8?q?feat(hooks/useDebouncedCallback):=20?=
 =?UTF-8?q?=D0=B8=D1=81=D1=82=D0=BE=D1=80=D0=B8=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/useDebouncedCallback.docs.mdx         | 19 ++++++
 .../src/useDebouncedCallback.stories.css      | 19 ++++--
 .../src/useDebouncedCallback.stories.mdx      |  7 ---
 .../src/useDebouncedCallback.stories.tsx      | 58 ++++++++++++-------
 .../src/useDebouncedValue.docs.mdx            |  2 +-
 package-lock.json                             | 10 ++--
 6 files changed, 76 insertions(+), 39 deletions(-)
 create mode 100644 hooks/use-debounced-callback/src/useDebouncedCallback.docs.mdx
 delete mode 100644 hooks/use-debounced-callback/src/useDebouncedCallback.stories.mdx

diff --git a/hooks/use-debounced-callback/src/useDebouncedCallback.docs.mdx b/hooks/use-debounced-callback/src/useDebouncedCallback.docs.mdx
new file mode 100644
index 00000000..b9c902e4
--- /dev/null
+++ b/hooks/use-debounced-callback/src/useDebouncedCallback.docs.mdx
@@ -0,0 +1,19 @@
+import { Markdown, Source, Canvas, Meta, Story } from '@storybook/blocks';
+import * as useDebouncedCallbackStories from './useDebouncedCallback.stories';
+import Readme from '../README.md';
+
+<Meta title="hooks/useDebouncedCallback" of={useDebouncedCallbackStories} />
+
+<Markdown>{Readme}</Markdown>
+
+## Usage
+
+To use the hook in your project you must:
+
+1. Import the hook where you need it:
+
+<Source language="javascript" code="import useDebouncedCallback from '@byndyusoft-ui/use-debounced-callback';" />
+
+2. Give callback and delay args.
+
+<Canvas sourceState="shown" story={useDebouncedCallbackStories.DebouncedColorChangeStory} />
diff --git a/hooks/use-debounced-callback/src/useDebouncedCallback.stories.css b/hooks/use-debounced-callback/src/useDebouncedCallback.stories.css
index c70c2fae..0d2285d6 100644
--- a/hooks/use-debounced-callback/src/useDebouncedCallback.stories.css
+++ b/hooks/use-debounced-callback/src/useDebouncedCallback.stories.css
@@ -1,10 +1,17 @@
-.container {
+.use-debounced-callback__container {
+    display: flex;
+    gap: 2rem;
+}
+
+.use-debounced-callback__block {
     display: flex;
     flex-direction: column;
-    gap: 8px;
+    gap: 1rem;
+
+    width: 15rem;
 }
 
-input{
-    max-height: 40px;
-    width: 100px;     
-}
\ No newline at end of file
+.use-debounced-callback__rectangle {
+    width: 100%;
+    height: 5rem;
+}
diff --git a/hooks/use-debounced-callback/src/useDebouncedCallback.stories.mdx b/hooks/use-debounced-callback/src/useDebouncedCallback.stories.mdx
deleted file mode 100644
index 23cd019b..00000000
--- a/hooks/use-debounced-callback/src/useDebouncedCallback.stories.mdx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-import Readme from '../README.md';
-import { Markdown } from '@storybook/blocks';
-
-<Meta title="hooks/useDebouncedCallback" />
-
-<Markdown>{Readme}</Markdown>
diff --git a/hooks/use-debounced-callback/src/useDebouncedCallback.stories.tsx b/hooks/use-debounced-callback/src/useDebouncedCallback.stories.tsx
index ca886274..8c4552f4 100644
--- a/hooks/use-debounced-callback/src/useDebouncedCallback.stories.tsx
+++ b/hooks/use-debounced-callback/src/useDebouncedCallback.stories.tsx
@@ -1,35 +1,51 @@
 import React, { useState } from 'react';
+import type { StoryObj } from '@storybook/react';
 import useDebouncedCallback from './useDebouncedCallback';
 import './useDebouncedCallback.stories.css';
-import type { Meta, StoryObj } from '@storybook/react';
 
-type Story = StoryObj<typeof Template>;
+const COLORS = ['red', 'green', 'yellow'];
 
-const oldValue = 'old value';
-const newValue = 'new value';
-const timeout = 2000;
-
-const Template = () => {
-    const [value, setValue] = useState(oldValue);
-    const setDebounceValue = useDebouncedCallback(setValue, timeout);
+const DebouncedColorChange = () => {
+    const [colorIndexOne, setColorIndexOne] = useState(0);
+    const [colorIndexTwo, setColorIndexTwo] = useState(0);
+    const setDebouncedColorIndexTwo = useDebouncedCallback(setColorIndexTwo, 1000);
 
     return (
-        <div className="container">
-            <span>Value: {value}</span>
-            <button onClick={() => setDebounceValue(newValue)}>debounced change</button>
-            <button onClick={() => setValue(newValue)}>change</button>
-            <button onClick={() => setValue(oldValue)}>reset</button>
+        <div className="use-debounced-callback__container">
+            <div className="use-debounced-callback__block">
+                <button
+                    type="button"
+                    onClick={() => setColorIndexOne((colorIndexOne + 1) % 3)}
+                >
+                    Click for color change
+                </button>
+                <div
+                    className="use-debounced-callback__rectangle"
+                    style={{ backgroundColor: COLORS[colorIndexOne] }}
+                />
+            </div>
+
+            <div className="use-debounced-callback__block">
+                <button
+                    type="button"
+                    onClick={() => setDebouncedColorIndexTwo((colorIndexTwo + 1) % 3)}
+                >
+                    Click for debounced color change (delay: 1000 ms)
+                </button>
+                <div
+                    className="use-debounced-callback__rectangle"
+                    style={{ backgroundColor: COLORS[colorIndexTwo] }}
+                />
+            </div>
         </div>
     );
 };
 
-export const HookStory: Story = {
-    decorators: [() => <Template />]
+export const DebouncedColorChangeStory: StoryObj<typeof DebouncedColorChange> = {
+    name: 'Debounced color change',
+    render: DebouncedColorChange
 };
 
-const meta: Meta<typeof Template> = {
-    title: 'hooks/useDebouncedCallback',
-    component: Template
+export default {
+    title: 'hooks/useDebouncedCallback'
 };
-
-export default meta;
diff --git a/hooks/use-debounced-value/src/useDebouncedValue.docs.mdx b/hooks/use-debounced-value/src/useDebouncedValue.docs.mdx
index 1c8adce0..79f4ccd1 100644
--- a/hooks/use-debounced-value/src/useDebouncedValue.docs.mdx
+++ b/hooks/use-debounced-value/src/useDebouncedValue.docs.mdx
@@ -14,7 +14,7 @@ To use the hook in your project you must:
 
 <Source language="javascript" code="import useDebouncedValue from '@byndyusoft-ui/use-debounced-value';" />
 
-2. Give start value and delay props:
+2. Give start value and delay args:
 
 <Canvas sourceState="shown" story={useDebouncedValueStories.DebouncedInputStory} />
 
diff --git a/package-lock.json b/package-lock.json
index 4bf07773..31c9006f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,8 +17,6 @@
         "styles/*"
       ],
       "dependencies": {
-        "@byndyusoft-ui/use-debounced-callback": "^0.0.0",
-        "@byndyusoft-ui/use-debounced-value": "^0.0.0",
         "react-frame-component": "^5.2.6",
         "save-dev": "^0.0.1-security"
       },
@@ -143,7 +141,10 @@
     "hooks/use-debounced-value": {
       "name": "@byndyusoft-ui/use-debounced-value",
       "version": "0.0.0",
-      "license": "Apache-2.0"
+      "license": "Apache-2.0",
+      "peerDependencies": {
+        "@byndyusoft-ui/use-debounced-callback": "*"
+      }
     },
     "hooks/use-event-listener": {
       "name": "@byndyusoft-ui/use-event-listener",
@@ -36936,7 +36937,8 @@
       "version": "file:hooks/use-debounced-callback"
     },
     "@byndyusoft-ui/use-debounced-value": {
-      "version": "file:hooks/use-debounced-value"
+      "version": "file:hooks/use-debounced-value",
+      "requires": {}
     },
     "@byndyusoft-ui/use-event-listener": {
       "version": "file:hooks/use-event-listener",

From 26c5f8d80ba2dd80018e2b961fae8ac89b6103bd Mon Sep 17 00:00:00 2001
From: Viktor Smorodin <v.smorodinaspb@gmail.com>
Date: Wed, 4 Dec 2024 11:42:51 +0300
Subject: [PATCH 17/31] =?UTF-8?q?feat(usedebounce):=20=D1=83=D0=B1=D1=80?=
 =?UTF-8?q?=D0=B0=D0=BB=20story=20=D0=B8=D0=B7=20=D0=B4=D0=BE=D0=BA=D1=83?=
 =?UTF-8?q?=D0=BC=D0=B5=D0=BD=D1=82=D0=B0=D1=86=D0=B8=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../use-debounced-callback/src/useDebouncedCallback.docs.mdx  | 2 +-
 hooks/use-debounced-value/src/useDebouncedValue.docs.mdx      | 4 +---
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/hooks/use-debounced-callback/src/useDebouncedCallback.docs.mdx b/hooks/use-debounced-callback/src/useDebouncedCallback.docs.mdx
index b9c902e4..f8015c4b 100644
--- a/hooks/use-debounced-callback/src/useDebouncedCallback.docs.mdx
+++ b/hooks/use-debounced-callback/src/useDebouncedCallback.docs.mdx
@@ -1,4 +1,4 @@
-import { Markdown, Source, Canvas, Meta, Story } from '@storybook/blocks';
+import { Markdown, Source, Canvas, Meta } from '@storybook/blocks';
 import * as useDebouncedCallbackStories from './useDebouncedCallback.stories';
 import Readme from '../README.md';
 
diff --git a/hooks/use-debounced-value/src/useDebouncedValue.docs.mdx b/hooks/use-debounced-value/src/useDebouncedValue.docs.mdx
index 79f4ccd1..d670a4e1 100644
--- a/hooks/use-debounced-value/src/useDebouncedValue.docs.mdx
+++ b/hooks/use-debounced-value/src/useDebouncedValue.docs.mdx
@@ -1,4 +1,4 @@
-import { Markdown, Source, Canvas, Meta, Story } from '@storybook/blocks';
+import { Markdown, Source, Canvas, Meta } from '@storybook/blocks';
 import * as useDebouncedValueStories from './useDebouncedValue.stories';
 import Readme from '../README.md';
 
@@ -17,5 +17,3 @@ To use the hook in your project you must:
 2. Give start value and delay args:
 
 <Canvas sourceState="shown" story={useDebouncedValueStories.DebouncedInputStory} />
-
-<Story of={useDebouncedValueStories.DebouncedInputStory} />
\ No newline at end of file

From e358b5545818a530a48a1ca5b5b000e63257d1af Mon Sep 17 00:00:00 2001
From: Viktor Smorodin <v.smorodinaspb@gmail.com>
Date: Wed, 4 Dec 2024 16:41:46 +0300
Subject: [PATCH 18/31] =?UTF-8?q?feat(usedebounce):=20=D0=BE=D0=B1=D0=BD?=
 =?UTF-8?q?=D0=BE=D0=B2=D0=B8=D0=BB=20=D0=B8=D1=81=D1=82=D0=BE=D1=80=D0=B8?=
 =?UTF-8?q?=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/useDebouncedCallback.docs.mdx         |  2 +-
 ...> useDebouncedCallback.stories.module.css} |  6 ++---
 .../src/useDebouncedCallback.stories.tsx      | 12 +++++-----
 .../src/useDebouncedValue.docs.mdx            |  2 +-
 ...s => useDebouncedValue.stories.module.css} |  0
 .../src/useDebouncedValue.stories.tsx         | 24 +++++++++----------
 6 files changed, 23 insertions(+), 23 deletions(-)
 rename hooks/use-debounced-callback/src/{useDebouncedCallback.stories.css => useDebouncedCallback.stories.module.css} (59%)
 rename hooks/use-debounced-value/src/{useDebouncedValue.stories.css => useDebouncedValue.stories.module.css} (100%)

diff --git a/hooks/use-debounced-callback/src/useDebouncedCallback.docs.mdx b/hooks/use-debounced-callback/src/useDebouncedCallback.docs.mdx
index f8015c4b..2810be6e 100644
--- a/hooks/use-debounced-callback/src/useDebouncedCallback.docs.mdx
+++ b/hooks/use-debounced-callback/src/useDebouncedCallback.docs.mdx
@@ -16,4 +16,4 @@ To use the hook in your project you must:
 
 2. Give callback and delay args.
 
-<Canvas sourceState="shown" story={useDebouncedCallbackStories.DebouncedColorChangeStory} />
+<Canvas sourceState="shown" of={useDebouncedCallbackStories.DebouncedColorChangeStory} />
diff --git a/hooks/use-debounced-callback/src/useDebouncedCallback.stories.css b/hooks/use-debounced-callback/src/useDebouncedCallback.stories.module.css
similarity index 59%
rename from hooks/use-debounced-callback/src/useDebouncedCallback.stories.css
rename to hooks/use-debounced-callback/src/useDebouncedCallback.stories.module.css
index 0d2285d6..a12ad26d 100644
--- a/hooks/use-debounced-callback/src/useDebouncedCallback.stories.css
+++ b/hooks/use-debounced-callback/src/useDebouncedCallback.stories.module.css
@@ -1,9 +1,9 @@
-.use-debounced-callback__container {
+.container {
     display: flex;
     gap: 2rem;
 }
 
-.use-debounced-callback__block {
+.block {
     display: flex;
     flex-direction: column;
     gap: 1rem;
@@ -11,7 +11,7 @@
     width: 15rem;
 }
 
-.use-debounced-callback__rectangle {
+.rectangle {
     width: 100%;
     height: 5rem;
 }
diff --git a/hooks/use-debounced-callback/src/useDebouncedCallback.stories.tsx b/hooks/use-debounced-callback/src/useDebouncedCallback.stories.tsx
index 8c4552f4..d9877376 100644
--- a/hooks/use-debounced-callback/src/useDebouncedCallback.stories.tsx
+++ b/hooks/use-debounced-callback/src/useDebouncedCallback.stories.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import type { StoryObj } from '@storybook/react';
 import useDebouncedCallback from './useDebouncedCallback';
-import './useDebouncedCallback.stories.css';
+import styles from './useDebouncedCallback.stories.module.css';
 
 const COLORS = ['red', 'green', 'yellow'];
 
@@ -11,8 +11,8 @@ const DebouncedColorChange = () => {
     const setDebouncedColorIndexTwo = useDebouncedCallback(setColorIndexTwo, 1000);
 
     return (
-        <div className="use-debounced-callback__container">
-            <div className="use-debounced-callback__block">
+        <div className={styles.container}>
+            <div className={styles.block}>
                 <button
                     type="button"
                     onClick={() => setColorIndexOne((colorIndexOne + 1) % 3)}
@@ -20,12 +20,12 @@ const DebouncedColorChange = () => {
                     Click for color change
                 </button>
                 <div
-                    className="use-debounced-callback__rectangle"
+                    className={styles.rectangle}
                     style={{ backgroundColor: COLORS[colorIndexOne] }}
                 />
             </div>
 
-            <div className="use-debounced-callback__block">
+            <div className={styles.block}>
                 <button
                     type="button"
                     onClick={() => setDebouncedColorIndexTwo((colorIndexTwo + 1) % 3)}
@@ -33,7 +33,7 @@ const DebouncedColorChange = () => {
                     Click for debounced color change (delay: 1000 ms)
                 </button>
                 <div
-                    className="use-debounced-callback__rectangle"
+                    className={styles.rectangle}
                     style={{ backgroundColor: COLORS[colorIndexTwo] }}
                 />
             </div>
diff --git a/hooks/use-debounced-value/src/useDebouncedValue.docs.mdx b/hooks/use-debounced-value/src/useDebouncedValue.docs.mdx
index d670a4e1..b0da6c00 100644
--- a/hooks/use-debounced-value/src/useDebouncedValue.docs.mdx
+++ b/hooks/use-debounced-value/src/useDebouncedValue.docs.mdx
@@ -16,4 +16,4 @@ To use the hook in your project you must:
 
 2. Give start value and delay args:
 
-<Canvas sourceState="shown" story={useDebouncedValueStories.DebouncedInputStory} />
+<Canvas sourceState="shown" of={useDebouncedValueStories.DebouncedInputStory} />
diff --git a/hooks/use-debounced-value/src/useDebouncedValue.stories.css b/hooks/use-debounced-value/src/useDebouncedValue.stories.module.css
similarity index 100%
rename from hooks/use-debounced-value/src/useDebouncedValue.stories.css
rename to hooks/use-debounced-value/src/useDebouncedValue.stories.module.css
diff --git a/hooks/use-debounced-value/src/useDebouncedValue.stories.tsx b/hooks/use-debounced-value/src/useDebouncedValue.stories.tsx
index a32b1062..6f2f86f8 100644
--- a/hooks/use-debounced-value/src/useDebouncedValue.stories.tsx
+++ b/hooks/use-debounced-value/src/useDebouncedValue.stories.tsx
@@ -1,18 +1,18 @@
 import React, { useState } from 'react';
 import { StoryObj } from '@storybook/react';
 import useDebouncedValue from './useDebouncedValue';
-import './useDebouncedValue.stories.css';
+import styles from './useDebouncedValue.stories.module.css';
 
 const DebouncedInput = () => {
     const [delay, setDelay] = useState(1000);
     const [debouncedValue, setDebouncedValue] = useDebouncedValue('', delay);
 
     return (
-        <div className="container">
-            <div className="block">
-                <span className="title">Delay:</span>
+        <div className={styles.container}>
+            <div className={styles.block}>
+                <span className={styles.title}>Delay:</span>
                 <button
-                    className="button"
+                    className={styles.button}
                     type="button"
                     disabled={delay <= 0}
                     onClick={() => setDelay(delay - 100)}
@@ -21,21 +21,21 @@ const DebouncedInput = () => {
                 <span>{`${delay} ms`}</span>
 
                 <button
-                    className="button"
+                    className={styles.button}
                     type="button"
                     onClick={() => setDelay(delay + 100)}
                 >+</button>
             </div>
 
-            <div className="block">
-                <span className="title">Type anything:</span>
-                <input className="input" onChange={e => setDebouncedValue(e.target.value)} />
+            <div className={styles.block}>
+                <span className={styles.title}>Type anything:</span>
+                <input className={styles.input} onChange={e => setDebouncedValue(e.target.value)} />
             </div>
 
-            <div className="divider" />
+            <div className={styles.divider} />
 
-            <div className="block">
-                <span className="title">Debounced result:</span>
+            <div className={styles.block}>
+                <span className={styles.title}>Debounced result:</span>
                 <span>{debouncedValue}</span>
             </div>
         </div>

From 157d3e4ff5127bab4f9a1fe4c62ceb30dbfb9e1e Mon Sep 17 00:00:00 2001
From: Viktor Smorodin <smorodin@byndyusoft.com>
Date: Thu, 5 Dec 2024 12:33:04 +0300
Subject: [PATCH 19/31] =?UTF-8?q?feat(useDebounce):=20=D0=BF=D0=BE=D0=BF?=
 =?UTF-8?q?=D1=80=D0=B0=D0=B2=D0=B8=D0=BB=20=D1=81=D1=82=D0=B8=D0=BB=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...e.css => useDebouncedCallback.stories.css} |  6 ++---
 hooks/use-debounced-value/package.json        |  2 +-
 ...dule.css => useDebouncedValue.stories.css} | 12 +++++-----
 .../src/useDebouncedValue.stories.tsx         | 24 +++++++++----------
 hooks/use-debounced-value/tsconfig.build.json |  2 +-
 5 files changed, 23 insertions(+), 23 deletions(-)
 rename hooks/use-debounced-callback/src/{useDebouncedCallback.stories.module.css => useDebouncedCallback.stories.css} (59%)
 rename hooks/use-debounced-value/src/{useDebouncedValue.stories.module.css => useDebouncedValue.stories.css} (66%)

diff --git a/hooks/use-debounced-callback/src/useDebouncedCallback.stories.module.css b/hooks/use-debounced-callback/src/useDebouncedCallback.stories.css
similarity index 59%
rename from hooks/use-debounced-callback/src/useDebouncedCallback.stories.module.css
rename to hooks/use-debounced-callback/src/useDebouncedCallback.stories.css
index a12ad26d..0d2285d6 100644
--- a/hooks/use-debounced-callback/src/useDebouncedCallback.stories.module.css
+++ b/hooks/use-debounced-callback/src/useDebouncedCallback.stories.css
@@ -1,9 +1,9 @@
-.container {
+.use-debounced-callback__container {
     display: flex;
     gap: 2rem;
 }
 
-.block {
+.use-debounced-callback__block {
     display: flex;
     flex-direction: column;
     gap: 1rem;
@@ -11,7 +11,7 @@
     width: 15rem;
 }
 
-.rectangle {
+.use-debounced-callback__rectangle {
     width: 100%;
     height: 5rem;
 }
diff --git a/hooks/use-debounced-value/package.json b/hooks/use-debounced-value/package.json
index af42a5fa..243c4270 100644
--- a/hooks/use-debounced-value/package.json
+++ b/hooks/use-debounced-value/package.json
@@ -19,7 +19,7 @@
     "url": "git+https://github.com/Byndyusoft/ui.git"
   },
   "scripts": {
-    "build": "tsc",
+    "build": "tsc --project tsconfig.build.json",
     "clean": "rimraf dist",
     "lint": "eslint src --config ../../eslint.config.js",
     "test": "jest --config ../../jest.config.js --roots hooks/use-debounced-value/src"
diff --git a/hooks/use-debounced-value/src/useDebouncedValue.stories.module.css b/hooks/use-debounced-value/src/useDebouncedValue.stories.css
similarity index 66%
rename from hooks/use-debounced-value/src/useDebouncedValue.stories.module.css
rename to hooks/use-debounced-value/src/useDebouncedValue.stories.css
index 0b50e4b2..ae5b84ff 100644
--- a/hooks/use-debounced-value/src/useDebouncedValue.stories.module.css
+++ b/hooks/use-debounced-value/src/useDebouncedValue.stories.css
@@ -1,16 +1,16 @@
-.container {
+.use-debounced-value__container {
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
 }
 
-.block {
+.use-debounced-value__block {
     display: flex;
     align-items: center;
     gap: 1rem;
 }
 
-.button {
+.use-debounced-value__button {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -18,16 +18,16 @@
     width: 2rem;
 }
 
-.title {
+.use-debounced-value__title {
    width: 8rem;
 }
 
-.input {
+.use-debounced-value__input {
     max-height: 3.5rem;
     width: 12rem;
 }
 
-.divider {
+.use-debounced-value__divider {
     width: 100%;
     height: 1px;
     margin: 0.5rem 0;
diff --git a/hooks/use-debounced-value/src/useDebouncedValue.stories.tsx b/hooks/use-debounced-value/src/useDebouncedValue.stories.tsx
index 6f2f86f8..196fc70d 100644
--- a/hooks/use-debounced-value/src/useDebouncedValue.stories.tsx
+++ b/hooks/use-debounced-value/src/useDebouncedValue.stories.tsx
@@ -1,18 +1,18 @@
 import React, { useState } from 'react';
 import { StoryObj } from '@storybook/react';
 import useDebouncedValue from './useDebouncedValue';
-import styles from './useDebouncedValue.stories.module.css';
+import './useDebouncedValue.stories.css';
 
 const DebouncedInput = () => {
     const [delay, setDelay] = useState(1000);
     const [debouncedValue, setDebouncedValue] = useDebouncedValue('', delay);
 
     return (
-        <div className={styles.container}>
-            <div className={styles.block}>
-                <span className={styles.title}>Delay:</span>
+        <div className="use-debounced-value__container">
+            <div className="use-debounced-value__block">
+                <span className="use-debounced-value__title">Delay:</span>
                 <button
-                    className={styles.button}
+                    className="use-debounced-value__button"
                     type="button"
                     disabled={delay <= 0}
                     onClick={() => setDelay(delay - 100)}
@@ -21,21 +21,21 @@ const DebouncedInput = () => {
                 <span>{`${delay} ms`}</span>
 
                 <button
-                    className={styles.button}
+                    className="use-debounced-value__button"
                     type="button"
                     onClick={() => setDelay(delay + 100)}
                 >+</button>
             </div>
 
-            <div className={styles.block}>
-                <span className={styles.title}>Type anything:</span>
-                <input className={styles.input} onChange={e => setDebouncedValue(e.target.value)} />
+            <div className="use-debounced-value__block">
+                <span className="use-debounced-value__title">Type anything:</span>
+                <input className="use-debounced-value__input" onChange={e => setDebouncedValue(e.target.value)} />
             </div>
 
-            <div className={styles.divider} />
+            <div className="use-debounced-value__divider" />
 
-            <div className={styles.block}>
-                <span className={styles.title}>Debounced result:</span>
+            <div className="use-debounced-value__block">
+                <span className="use-debounced-value__title">Debounced result:</span>
                 <span>{debouncedValue}</span>
             </div>
         </div>
diff --git a/hooks/use-debounced-value/tsconfig.build.json b/hooks/use-debounced-value/tsconfig.build.json
index b4b36060..2c767fd6 100644
--- a/hooks/use-debounced-value/tsconfig.build.json
+++ b/hooks/use-debounced-value/tsconfig.build.json
@@ -1,4 +1,4 @@
 {
   "extends": "./tsconfig.json",
-  "exclude": ["src/*.tests.ts"]
+  "exclude": ["src/*.tests.ts", "src/*.stories.tsx"]
 }

From 40feece0e0e70c316b64564e807df9382dac0a07 Mon Sep 17 00:00:00 2001
From: Viktor Smorodin <smorodin@byndyusoft.com>
Date: Thu, 5 Dec 2024 12:34:42 +0300
Subject: [PATCH 20/31] =?UTF-8?q?feat(useDebounce):=20=D0=BF=D0=BE=D0=BF?=
 =?UTF-8?q?=D1=80=D0=B0=D0=B2=D0=B8=D0=BB=20=D1=81=D1=82=D0=B8=D0=BB=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 hooks/use-array/src/useArray.stories.css      |  8 +-
 hooks/use-array/src/useArray.stories.tsx      | 86 ++++++++++++++-----
 hooks/use-debounced-callback/package.json     |  2 +-
 .../src/useDebouncedCallback.stories.css      |  4 +
 .../src/useDebouncedCallback.stories.tsx      | 14 +--
 .../tsconfig.build.json                       |  2 +-
 6 files changed, 81 insertions(+), 35 deletions(-)

diff --git a/hooks/use-array/src/useArray.stories.css b/hooks/use-array/src/useArray.stories.css
index e38cb476..c84a9978 100644
--- a/hooks/use-array/src/useArray.stories.css
+++ b/hooks/use-array/src/useArray.stories.css
@@ -1,21 +1,21 @@
-.container {
+.use-array__container {
     display: flex;
     flex-direction: column;
     gap: 8px;
 }
 
-.row {
+.use-array__row {
     width: 424px;
     display: flex;
     gap: 8px;
 }
 
-.input {
+.use-array__input {
     min-width: 0;
     flex-grow: 1;
 }
 
-button {
+.use-array__button {
     flex-basis: 100px;
     flex-shrink: 0;
 }
diff --git a/hooks/use-array/src/useArray.stories.tsx b/hooks/use-array/src/useArray.stories.tsx
index 8b736f63..905230e4 100644
--- a/hooks/use-array/src/useArray.stories.tsx
+++ b/hooks/use-array/src/useArray.stories.tsx
@@ -18,81 +18,121 @@ const Template = (): JSX.Element => {
             <h1>List</h1>
             <strong>{list.length > 0 ? list.join(', ') : 'Empty'}</strong>
             <hr />
-            <div className="container">
-                <div className="row">
+            <div className="use-array__container">
+                <div className="use-array__row">
                     <input
-                        className="input"
+                        className="use-array__input"
                         value={addValue}
                         type="numeric"
                         onChange={e => setAddValue(Number(e.target.value))}
                     />
-                    <button type="button" onClick={() => append(addValue)}>
+                    <button
+                        className="use-array__button"
+                        type="button"
+                        onClick={() => append(addValue)}
+                    >
                         Append
                     </button>
                 </div>
-                <div className="row">
+                <div className="use-array__row">
                     <input
-                        className="input"
+                        className="use-array__input"
                         value={prependValue}
                         type="numeric"
                         onChange={e => setPrependValue(Number(e.target.value))}
                     />
-                    <button onClick={() => prepend(prependValue)}>Prepend</button>
+                    <button
+                        className="use-array__button"
+                        onClick={() => prepend(prependValue)}
+                    >
+                        Prepend
+                    </button>
                 </div>
-                <div className="row">
+                <div className="use-array__row">
                     <span>from</span>
                     <input
-                        className="input"
+                        className="use-array__input"
                         value={fromValue}
                         type="numeric"
                         onChange={e => setFromValue(Number(e.target.value))}
                     />
                     <span>to</span>
                     <input
-                        className="input"
+                        className="use-array__input"
                         value={lessValue}
                         type="numeric"
                         onChange={e => setLessValue(Number(e.target.value))}
                     />
-                    <button onClick={() => filter(a => a >= fromValue && a <= lessValue)}>Filter</button>
+                    <button
+                        className="use-array__button"
+                        onClick={() => filter(a => a >= fromValue && a <= lessValue)}
+                    >
+                        Filter
+                    </button>
                 </div>
-                <div className="row">
+                <div className="use-array__row">
                     <span>index</span>
                     <input
-                        className="input"
+                        className="use-array__input"
                         value={indexUpdateValue}
                         type="numeric"
                         onChange={e => setIndexUpdateValue(Number(e.target.value))}
                     />
                     <span>item</span>
                     <input
-                        className="input"
+                        className="use-array__input"
                         value={updateValue}
                         type="numeric"
                         onChange={e => setUpdateValue(Number(e.target.value))}
                     />
-                    <button onClick={() => update(indexUpdateValue, updateValue)}>Update</button>
+                    <button
+                        className="use-array__button"
+                        onClick={() => update(indexUpdateValue, updateValue)}
+                    >
+                        Update
+                    </button>
                 </div>
-                <div className="row">
+                <div className="use-array__row">
                     <input
-                        className="input"
+                        className="use-array__input"
                         value={indexRemoveValue}
                         type="numeric"
                         onChange={e => setIndexRemoveValue(Number(e.target.value))}
                     />
-                    <button onClick={() => remove(indexRemoveValue)}>Remove</button>
+                    <button
+                        className="use-array__button"
+                        onClick={() => remove(indexRemoveValue)}
+                    >
+                        Remove
+                    </button>
                 </div>
-                <div className="row">
-                    <button type="button" onClick={() => reset()}>
+                <div className="use-array__row">
+                    <button
+                        className="use-array__button"
+                        type="button"
+                        onClick={() => reset()}
+                    >
                         Reset
                     </button>
-                    <button type="button" onClick={() => clear()}>
+                    <button
+                        className="use-array__button"
+                        type="button"
+                        onClick={() => clear()}
+                    >
                         Clear
                     </button>
-                    <button type="button" onClick={() => sort((a, b) => a - b)}>
+                    <button
+                        className="use-array__button"
+                        type="button"
+                        onClick={() => sort((a, b) => a - b)}
+                    >
                         Sort ASC
                     </button>
-                    <button type="button" onClick={() => sort((a, b) => b - a)}>
+                    <button
+                        className="use-array__button"
+                        type="button"
+                        onClick={() => sort((a, b) => b - a)}
+                    >
                         Sort DES
                     </button>
                 </div>
diff --git a/hooks/use-debounced-callback/package.json b/hooks/use-debounced-callback/package.json
index e9b7f807..24622b8d 100644
--- a/hooks/use-debounced-callback/package.json
+++ b/hooks/use-debounced-callback/package.json
@@ -19,7 +19,7 @@
     "url": "git+https://github.com/Byndyusoft/ui.git"
   },
   "scripts": {
-    "build": "tsc",
+    "build": "tsc --project tsconfig.build.json",
     "clean": "rimraf dist",
     "lint": "eslint src --config ../../eslint.config.js",
     "test": "jest --config ../../jest.config.js --roots hooks/use-debounced-callback/src"
diff --git a/hooks/use-debounced-callback/src/useDebouncedCallback.stories.css b/hooks/use-debounced-callback/src/useDebouncedCallback.stories.css
index 0d2285d6..fb5742ad 100644
--- a/hooks/use-debounced-callback/src/useDebouncedCallback.stories.css
+++ b/hooks/use-debounced-callback/src/useDebouncedCallback.stories.css
@@ -15,3 +15,7 @@
     width: 100%;
     height: 5rem;
 }
+
+.use-debounced-callback__button {
+    height: 5rem;
+}
diff --git a/hooks/use-debounced-callback/src/useDebouncedCallback.stories.tsx b/hooks/use-debounced-callback/src/useDebouncedCallback.stories.tsx
index d9877376..e9aedbb1 100644
--- a/hooks/use-debounced-callback/src/useDebouncedCallback.stories.tsx
+++ b/hooks/use-debounced-callback/src/useDebouncedCallback.stories.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import type { StoryObj } from '@storybook/react';
 import useDebouncedCallback from './useDebouncedCallback';
-import styles from './useDebouncedCallback.stories.module.css';
+import './useDebouncedCallback.stories.css';
 
 const COLORS = ['red', 'green', 'yellow'];
 
@@ -11,29 +11,31 @@ const DebouncedColorChange = () => {
     const setDebouncedColorIndexTwo = useDebouncedCallback(setColorIndexTwo, 1000);
 
     return (
-        <div className={styles.container}>
-            <div className={styles.block}>
+        <div className="use-debounced-callback__container">
+            <div className="use-debounced-callback__block">
                 <button
+                    className="use-debounced-callback__button"
                     type="button"
                     onClick={() => setColorIndexOne((colorIndexOne + 1) % 3)}
                 >
                     Click for color change
                 </button>
                 <div
-                    className={styles.rectangle}
+                    className="use-debounced-callback__rectangle"
                     style={{ backgroundColor: COLORS[colorIndexOne] }}
                 />
             </div>
 
-            <div className={styles.block}>
+            <div className="use-debounced-callback__block">
                 <button
+                    className="use-debounced-callback__button"
                     type="button"
                     onClick={() => setDebouncedColorIndexTwo((colorIndexTwo + 1) % 3)}
                 >
                     Click for debounced color change (delay: 1000 ms)
                 </button>
                 <div
-                    className={styles.rectangle}
+                    className="use-debounced-callback__rectangle"
                     style={{ backgroundColor: COLORS[colorIndexTwo] }}
                 />
             </div>
diff --git a/hooks/use-debounced-callback/tsconfig.build.json b/hooks/use-debounced-callback/tsconfig.build.json
index b4b36060..2c767fd6 100644
--- a/hooks/use-debounced-callback/tsconfig.build.json
+++ b/hooks/use-debounced-callback/tsconfig.build.json
@@ -1,4 +1,4 @@
 {
   "extends": "./tsconfig.json",
-  "exclude": ["src/*.tests.ts"]
+  "exclude": ["src/*.tests.ts", "src/*.stories.tsx"]
 }

From 6fce7736ad0f53e0f42727efb38a3d0fe75bd542 Mon Sep 17 00:00:00 2001
From: Viktor Smorodin <smorodin@byndyusoft.com>
Date: Thu, 5 Dec 2024 13:54:20 +0300
Subject: [PATCH 21/31] =?UTF-8?q?fix(useDebounce):=20=D1=84=D0=B8=D0=BA?=
 =?UTF-8?q?=D1=81=D1=8B=20=D0=BF=D0=BE=D1=81=D0=BB=D0=B5=20=D1=80=D0=B5?=
 =?UTF-8?q?=D0=B2=D1=8C=D1=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/useDebouncedCallback.docs.mdx         |  2 +-
 .../src/useDebouncedCallback.stories.tsx      | 14 +++++------
 .../src/useDebouncedCallback.tests.tsx        | 25 +++++++++++--------
 hooks/use-debounced-value/README.md           | 18 +++++++++++++
 .../src/useDebouncedValue.docs.mdx            |  2 +-
 5 files changed, 42 insertions(+), 19 deletions(-)

diff --git a/hooks/use-debounced-callback/src/useDebouncedCallback.docs.mdx b/hooks/use-debounced-callback/src/useDebouncedCallback.docs.mdx
index 2810be6e..85e72e81 100644
--- a/hooks/use-debounced-callback/src/useDebouncedCallback.docs.mdx
+++ b/hooks/use-debounced-callback/src/useDebouncedCallback.docs.mdx
@@ -6,7 +6,7 @@ import Readme from '../README.md';
 
 <Markdown>{Readme}</Markdown>
 
-## Usage
+## Guide
 
 To use the hook in your project you must:
 
diff --git a/hooks/use-debounced-callback/src/useDebouncedCallback.stories.tsx b/hooks/use-debounced-callback/src/useDebouncedCallback.stories.tsx
index e9aedbb1..78331796 100644
--- a/hooks/use-debounced-callback/src/useDebouncedCallback.stories.tsx
+++ b/hooks/use-debounced-callback/src/useDebouncedCallback.stories.tsx
@@ -6,9 +6,9 @@ import './useDebouncedCallback.stories.css';
 const COLORS = ['red', 'green', 'yellow'];
 
 const DebouncedColorChange = () => {
-    const [colorIndexOne, setColorIndexOne] = useState(0);
-    const [colorIndexTwo, setColorIndexTwo] = useState(0);
-    const setDebouncedColorIndexTwo = useDebouncedCallback(setColorIndexTwo, 1000);
+    const [firstColorIndex, setFirstColorIndex] = useState(0);
+    const [secondColorIndex, setSecondColorIndex] = useState(0);
+    const setDebouncedSecondColorIndex = useDebouncedCallback(setSecondColorIndex, 1000);
 
     return (
         <div className="use-debounced-callback__container">
@@ -16,13 +16,13 @@ const DebouncedColorChange = () => {
                 <button
                     className="use-debounced-callback__button"
                     type="button"
-                    onClick={() => setColorIndexOne((colorIndexOne + 1) % 3)}
+                    onClick={() => setFirstColorIndex((firstColorIndex + 1) % 3)}
                 >
                     Click for color change
                 </button>
                 <div
                     className="use-debounced-callback__rectangle"
-                    style={{ backgroundColor: COLORS[colorIndexOne] }}
+                    style={{ backgroundColor: COLORS[firstColorIndex] }}
                 />
             </div>
 
@@ -30,13 +30,13 @@ const DebouncedColorChange = () => {
                 <button
                     className="use-debounced-callback__button"
                     type="button"
-                    onClick={() => setDebouncedColorIndexTwo((colorIndexTwo + 1) % 3)}
+                    onClick={() => setDebouncedSecondColorIndex((secondColorIndex + 1) % 3)}
                 >
                     Click for debounced color change (delay: 1000 ms)
                 </button>
                 <div
                     className="use-debounced-callback__rectangle"
-                    style={{ backgroundColor: COLORS[colorIndexTwo] }}
+                    style={{ backgroundColor: COLORS[secondColorIndex] }}
                 />
             </div>
         </div>
diff --git a/hooks/use-debounced-callback/src/useDebouncedCallback.tests.tsx b/hooks/use-debounced-callback/src/useDebouncedCallback.tests.tsx
index 00c68872..78d22f39 100644
--- a/hooks/use-debounced-callback/src/useDebouncedCallback.tests.tsx
+++ b/hooks/use-debounced-callback/src/useDebouncedCallback.tests.tsx
@@ -9,7 +9,7 @@ describe('hooks/useDebouncedCallback', () => {
     test('works correctly with one handler call', async () => {
         let value = oldValue;
         const handle = () => (value = newValue);
-        const { result } = renderHook(() => useDebouncedCallback(handle, 2000));
+        const { result } = renderHook(() => useDebouncedCallback(handle, 1000));
         const setDebounceValue = result.current;
 
         act(setDebounceValue);
@@ -20,40 +20,45 @@ describe('hooks/useDebouncedCallback', () => {
             () => {
                 expect(value).toEqual(oldValue);
             },
-            { timeout: 1000 }
+            { timeout: 500 }
         );
 
         await waitFor(
             () => {
                 expect(value).toEqual(newValue);
             },
-            { timeout: 2500 }
+            { timeout: 1500 }
         );
     });
 
     test('works correctly with several handler calls', async () => {
         const handle = jest.fn();
-        const { result } = renderHook(() => useDebouncedCallback(handle, 2000));
+        const { result } = renderHook(() => useDebouncedCallback(handle, 500));
         const setDebounceValue = result.current;
 
-        act(setDebounceValue);
-        act(setDebounceValue);
+        act(() => {
+            setDebounceValue();
+            setDebounceValue();
+        });
 
         await waitFor(
             () => {
                 expect(handle).toBeCalledTimes(1);
             },
-            { timeout: 2500 }
+            { timeout: 1000 }
         );
 
-        act(setDebounceValue);
-        act(setDebounceValue);
+        act(() => {
+            setDebounceValue();
+            setDebounceValue();
+            setDebounceValue();
+        });
 
         await waitFor(
             () => {
                 expect(handle).toBeCalledTimes(2);
             },
-            { timeout: 2500 }
+            { timeout: 1000 }
         );
     });
 });
diff --git a/hooks/use-debounced-value/README.md b/hooks/use-debounced-value/README.md
index 18de9847..c16c2602 100644
--- a/hooks/use-debounced-value/README.md
+++ b/hooks/use-debounced-value/README.md
@@ -11,6 +11,24 @@ npm i @byndyusoft-ui/use-debounced-value
 yarn add @byndyusoft-ui/use-debounced-value
 ```
 
+### Usage
+
+```tsx
+() => {
+    const initalValue = '';
+    const delay = 1000;
+
+    const [debouncedValue, setDebouncedValue] = useDebouncedValue(initalValue, delay);
+    
+    return (
+        <div>
+            <input onChange={e => setDebouncedValue(e.target.value)} />
+            <span>Debounced result: {debouncedValue}</span>
+        </div>
+    );
+}
+```
+
 ### License
 
 Apache-2.0
diff --git a/hooks/use-debounced-value/src/useDebouncedValue.docs.mdx b/hooks/use-debounced-value/src/useDebouncedValue.docs.mdx
index b0da6c00..7e1eef18 100644
--- a/hooks/use-debounced-value/src/useDebouncedValue.docs.mdx
+++ b/hooks/use-debounced-value/src/useDebouncedValue.docs.mdx
@@ -6,7 +6,7 @@ import Readme from '../README.md';
 
 <Markdown>{Readme}</Markdown>
 
-## Usage
+## Guide
 
 To use the hook in your project you must:
 

From ef4b293372d19cdcaa343f0c57e86d358c9ec97b Mon Sep 17 00:00:00 2001
From: Viktor Smorodin <smorodin@byndyusoft.com>
Date: Thu, 5 Dec 2024 17:48:44 +0300
Subject: [PATCH 22/31] =?UTF-8?q?feat(useDebounce):=20css=20=D0=BC=D0=BE?=
 =?UTF-8?q?=D0=B4=D1=83=D0=BB=D0=B8=20=D0=B8=20=D0=BE=D0=B1=D0=BD=D0=BE?=
 =?UTF-8?q?=D0=B2=D0=BB=D0=B5=D0=BD=D0=B8=D1=8F=20=D1=88=D0=B0=D0=B1=D0=BB?=
 =?UTF-8?q?=D0=BE=D0=BD=D0=BE=D0=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .templates/create/hook/package.json.ejs       |  2 +-
 .../create/hook/tsconfig.build.json.ejs       |  7 ++++++
 .templates/create/hook/tsconfig.json.ejs      |  9 +------
 CODE_OF_CONDUCT.md                            |  2 +-
 ...> useDebouncedCallback.stories.module.css} |  8 +++----
 .../src/useDebouncedCallback.stories.tsx      | 16 ++++++-------
 hooks/use-debounced-callback/tsconfig.json    |  2 +-
 ...s => useDebouncedValue.stories.module.css} | 12 +++++-----
 .../src/useDebouncedValue.stories.tsx         | 24 +++++++++----------
 hooks/use-debounced-value/tsconfig.json       |  2 +-
 10 files changed, 42 insertions(+), 42 deletions(-)
 create mode 100644 .templates/create/hook/tsconfig.build.json.ejs
 rename hooks/use-debounced-callback/src/{useDebouncedCallback.stories.css => useDebouncedCallback.stories.module.css} (55%)
 rename hooks/use-debounced-value/src/{useDebouncedValue.stories.css => useDebouncedValue.stories.module.css} (66%)

diff --git a/.templates/create/hook/package.json.ejs b/.templates/create/hook/package.json.ejs
index 199ca881..c1925b9d 100644
--- a/.templates/create/hook/package.json.ejs
+++ b/.templates/create/hook/package.json.ejs
@@ -21,7 +21,7 @@ to: hooks/<%= h.changeCase.paramCase(name) %>/package.json
     "url": "git+https://github.com/Byndyusoft/ui.git"
   },
   "scripts": {
-    "build": "tsc",
+    "build": "tsc --project tsconfig.build.json",
     "clean": "rimraf dist",
     "lint": "eslint src --config ../../eslint.config.js",
     "test": "jest --config ../../jest.config.js --roots components/<%= h.changeCase.paramCase(name) %>/src"
diff --git a/.templates/create/hook/tsconfig.build.json.ejs b/.templates/create/hook/tsconfig.build.json.ejs
new file mode 100644
index 00000000..de616aa3
--- /dev/null
+++ b/.templates/create/hook/tsconfig.build.json.ejs
@@ -0,0 +1,7 @@
+---
+to: hooks/<%= h.changeCase.paramCase(name) %>/tsconfig.build.json
+---
+{
+"extends": "./tsconfig.json",
+"exclude": ["src/*.tests.ts", "src/*.stories.tsx"]
+}
diff --git a/.templates/create/hook/tsconfig.json.ejs b/.templates/create/hook/tsconfig.json.ejs
index b86ee394..bf7d6f68 100644
--- a/.templates/create/hook/tsconfig.json.ejs
+++ b/.templates/create/hook/tsconfig.json.ejs
@@ -10,12 +10,5 @@ to: hooks/<%= h.changeCase.paramCase(name) %>/tsconfig.json
     "module": "commonjs",
     "target": "es6"
   },
-  "include": [
-    "src"
-  ],
-  "exclude": [
-    "node_modules",
-    "src/**/*.tests.tsx",
-    "src/**/*.stories.tsx"
-  ]
+  "include": ["src", "src/*.stories.tsx"]
 }
diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md
index 094436c4..7b4db857 100644
--- a/CODE_OF_CONDUCT.md
+++ b/CODE_OF_CONDUCT.md
@@ -176,7 +176,7 @@ src
         "module": "commonjs",
         "target": "es6"
     },
-    "include": ["src"]
+    "include": ["src", "src/*.stories.tsx"]
 }
 ```
 
diff --git a/hooks/use-debounced-callback/src/useDebouncedCallback.stories.css b/hooks/use-debounced-callback/src/useDebouncedCallback.stories.module.css
similarity index 55%
rename from hooks/use-debounced-callback/src/useDebouncedCallback.stories.css
rename to hooks/use-debounced-callback/src/useDebouncedCallback.stories.module.css
index fb5742ad..0a084fd5 100644
--- a/hooks/use-debounced-callback/src/useDebouncedCallback.stories.css
+++ b/hooks/use-debounced-callback/src/useDebouncedCallback.stories.module.css
@@ -1,9 +1,9 @@
-.use-debounced-callback__container {
+.container {
     display: flex;
     gap: 2rem;
 }
 
-.use-debounced-callback__block {
+.block {
     display: flex;
     flex-direction: column;
     gap: 1rem;
@@ -11,11 +11,11 @@
     width: 15rem;
 }
 
-.use-debounced-callback__rectangle {
+.rectangle {
     width: 100%;
     height: 5rem;
 }
 
-.use-debounced-callback__button {
+.button {
     height: 5rem;
 }
diff --git a/hooks/use-debounced-callback/src/useDebouncedCallback.stories.tsx b/hooks/use-debounced-callback/src/useDebouncedCallback.stories.tsx
index 78331796..6bb8b99c 100644
--- a/hooks/use-debounced-callback/src/useDebouncedCallback.stories.tsx
+++ b/hooks/use-debounced-callback/src/useDebouncedCallback.stories.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import type { StoryObj } from '@storybook/react';
 import useDebouncedCallback from './useDebouncedCallback';
-import './useDebouncedCallback.stories.css';
+import styles from './useDebouncedCallback.stories.module.css';
 
 const COLORS = ['red', 'green', 'yellow'];
 
@@ -11,31 +11,31 @@ const DebouncedColorChange = () => {
     const setDebouncedSecondColorIndex = useDebouncedCallback(setSecondColorIndex, 1000);
 
     return (
-        <div className="use-debounced-callback__container">
-            <div className="use-debounced-callback__block">
+        <div className={styles.container}>
+            <div className={styles.block}>
                 <button
-                    className="use-debounced-callback__button"
+                    className={styles.button}
                     type="button"
                     onClick={() => setFirstColorIndex((firstColorIndex + 1) % 3)}
                 >
                     Click for color change
                 </button>
                 <div
-                    className="use-debounced-callback__rectangle"
+                    className={styles.rectangle}
                     style={{ backgroundColor: COLORS[firstColorIndex] }}
                 />
             </div>
 
-            <div className="use-debounced-callback__block">
+            <div className={styles.block}>
                 <button
-                    className="use-debounced-callback__button"
+                    className={styles.button}
                     type="button"
                     onClick={() => setDebouncedSecondColorIndex((secondColorIndex + 1) % 3)}
                 >
                     Click for debounced color change (delay: 1000 ms)
                 </button>
                 <div
-                    className="use-debounced-callback__rectangle"
+                    className={styles.rectangle}
                     style={{ backgroundColor: COLORS[secondColorIndex] }}
                 />
             </div>
diff --git a/hooks/use-debounced-callback/tsconfig.json b/hooks/use-debounced-callback/tsconfig.json
index 5b7870da..ad2f569e 100644
--- a/hooks/use-debounced-callback/tsconfig.json
+++ b/hooks/use-debounced-callback/tsconfig.json
@@ -7,5 +7,5 @@
     "module": "commonjs",
     "target": "es6"
   },
-  "include": ["src"]
+  "include": ["src", "../../types.d.ts"]
 }
diff --git a/hooks/use-debounced-value/src/useDebouncedValue.stories.css b/hooks/use-debounced-value/src/useDebouncedValue.stories.module.css
similarity index 66%
rename from hooks/use-debounced-value/src/useDebouncedValue.stories.css
rename to hooks/use-debounced-value/src/useDebouncedValue.stories.module.css
index ae5b84ff..0b50e4b2 100644
--- a/hooks/use-debounced-value/src/useDebouncedValue.stories.css
+++ b/hooks/use-debounced-value/src/useDebouncedValue.stories.module.css
@@ -1,16 +1,16 @@
-.use-debounced-value__container {
+.container {
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
 }
 
-.use-debounced-value__block {
+.block {
     display: flex;
     align-items: center;
     gap: 1rem;
 }
 
-.use-debounced-value__button {
+.button {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -18,16 +18,16 @@
     width: 2rem;
 }
 
-.use-debounced-value__title {
+.title {
    width: 8rem;
 }
 
-.use-debounced-value__input {
+.input {
     max-height: 3.5rem;
     width: 12rem;
 }
 
-.use-debounced-value__divider {
+.divider {
     width: 100%;
     height: 1px;
     margin: 0.5rem 0;
diff --git a/hooks/use-debounced-value/src/useDebouncedValue.stories.tsx b/hooks/use-debounced-value/src/useDebouncedValue.stories.tsx
index 196fc70d..6f2f86f8 100644
--- a/hooks/use-debounced-value/src/useDebouncedValue.stories.tsx
+++ b/hooks/use-debounced-value/src/useDebouncedValue.stories.tsx
@@ -1,18 +1,18 @@
 import React, { useState } from 'react';
 import { StoryObj } from '@storybook/react';
 import useDebouncedValue from './useDebouncedValue';
-import './useDebouncedValue.stories.css';
+import styles from './useDebouncedValue.stories.module.css';
 
 const DebouncedInput = () => {
     const [delay, setDelay] = useState(1000);
     const [debouncedValue, setDebouncedValue] = useDebouncedValue('', delay);
 
     return (
-        <div className="use-debounced-value__container">
-            <div className="use-debounced-value__block">
-                <span className="use-debounced-value__title">Delay:</span>
+        <div className={styles.container}>
+            <div className={styles.block}>
+                <span className={styles.title}>Delay:</span>
                 <button
-                    className="use-debounced-value__button"
+                    className={styles.button}
                     type="button"
                     disabled={delay <= 0}
                     onClick={() => setDelay(delay - 100)}
@@ -21,21 +21,21 @@ const DebouncedInput = () => {
                 <span>{`${delay} ms`}</span>
 
                 <button
-                    className="use-debounced-value__button"
+                    className={styles.button}
                     type="button"
                     onClick={() => setDelay(delay + 100)}
                 >+</button>
             </div>
 
-            <div className="use-debounced-value__block">
-                <span className="use-debounced-value__title">Type anything:</span>
-                <input className="use-debounced-value__input" onChange={e => setDebouncedValue(e.target.value)} />
+            <div className={styles.block}>
+                <span className={styles.title}>Type anything:</span>
+                <input className={styles.input} onChange={e => setDebouncedValue(e.target.value)} />
             </div>
 
-            <div className="use-debounced-value__divider" />
+            <div className={styles.divider} />
 
-            <div className="use-debounced-value__block">
-                <span className="use-debounced-value__title">Debounced result:</span>
+            <div className={styles.block}>
+                <span className={styles.title}>Debounced result:</span>
                 <span>{debouncedValue}</span>
             </div>
         </div>
diff --git a/hooks/use-debounced-value/tsconfig.json b/hooks/use-debounced-value/tsconfig.json
index 5b7870da..ad2f569e 100644
--- a/hooks/use-debounced-value/tsconfig.json
+++ b/hooks/use-debounced-value/tsconfig.json
@@ -7,5 +7,5 @@
     "module": "commonjs",
     "target": "es6"
   },
-  "include": ["src"]
+  "include": ["src", "../../types.d.ts"]
 }

From 377bf15cfe9c4a5d04a1e89664a59b2f36af5f29 Mon Sep 17 00:00:00 2001
From: Viktor Smorodin <smorodin@byndyusoft.com>
Date: Thu, 5 Dec 2024 17:57:56 +0300
Subject: [PATCH 23/31] =?UTF-8?q?feat(codeOfConduct):=20=D0=BE=D0=B1=D0=BD?=
 =?UTF-8?q?=D0=BE=D0=B2=D0=BB=D0=B5=D0=BD=D0=B8=D0=B5=20=D0=B8=D0=BC=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=B8=20=D1=84=D0=B0=D0=B9=D0=BB=D0=B0=20=D1=81=D1=82?=
 =?UTF-8?q?=D0=B8=D0=BB=D0=B5=D0=B9=20=D0=B8=D1=81=D1=82=D0=BE=D1=80=D0=B8?=
 =?UTF-8?q?=D0=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CODE_OF_CONDUCT.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md
index 7b4db857..8f80c315 100644
--- a/CODE_OF_CONDUCT.md
+++ b/CODE_OF_CONDUCT.md
@@ -56,7 +56,7 @@ component-name // Название компонента в kebab case
 |   ├── ComponentName.types.ts
 |   ├── ComponentName.tests.tsx
 |   ├── ComponentName.stories.tsx
-|   ├── ComponentName.stories.css // стили историй
+|   ├── ComponentName.stories.module.css // стили историй
 |   ├── ComponentName.docs.mdx // документация компонента
 |   └── index.ts
 ├── README.md
@@ -78,7 +78,7 @@ use-hook-name // Название хука в kebab case
 |   ├── useHookName.utilities.ts // логика и методы хука
 |   ├── useHookName.tests.ts
 |   ├── useHookName.stories.tsx
-|   ├── useHookName.stories.css
+|   ├── useHookName.stories.module.css // стили историй
 |   └── useHookName.docs.mdx // документация хука
 ├── README.md
 ├── package.json

From b7a1a1b4a7ea032f842e6a8eabb8d5d5b1ddb990 Mon Sep 17 00:00:00 2001
From: Andrey Zhukov <Zhukov290791@gmail.com>
Date: Wed, 8 Jan 2025 18:02:34 +0500
Subject: [PATCH 24/31] feat(useDebounce): add tests for useDebouncedCallback
 hook

---
 .../src/useDebouncedCallback.tests.tsx        | 148 ++++++++++++++++++
 1 file changed, 148 insertions(+)

diff --git a/hooks/use-debounced-callback/src/useDebouncedCallback.tests.tsx b/hooks/use-debounced-callback/src/useDebouncedCallback.tests.tsx
index 78d22f39..35dde650 100644
--- a/hooks/use-debounced-callback/src/useDebouncedCallback.tests.tsx
+++ b/hooks/use-debounced-callback/src/useDebouncedCallback.tests.tsx
@@ -61,4 +61,152 @@ describe('hooks/useDebouncedCallback', () => {
             { timeout: 1000 }
         );
     });
+
+    test('cleans up timer on unmount', async () => {
+        const handle = jest.fn();
+        const { result, unmount } = renderHook(() => useDebouncedCallback(handle, 500));
+        const setDebounceValue = result.current;
+
+        act(() => {
+            setDebounceValue();
+        });
+
+        unmount();
+
+        await waitFor(
+            () => {
+                expect(handle).not.toBeCalled();
+            },
+            { timeout: 600 }
+        );
+    });
+
+    test('uses the latest callback after it changes', async () => {
+        let value = '';
+
+        const { result, rerender } = renderHook(({ callback }) => useDebouncedCallback(callback, 500), {
+            initialProps: { callback: () => (value = oldValue) }
+        });
+
+        const setDebounceValue = result.current;
+
+        act(() => {
+            setDebounceValue();
+        });
+
+        rerender({ callback: () => (value = newValue) });
+
+        await waitFor(
+            () => {
+                expect(value).toEqual(newValue);
+            },
+            { timeout: 600 }
+        );
+    });
+
+    test('executes callback immediately with delay = 0', async () => {
+        const handle = jest.fn();
+        const { result } = renderHook(() => useDebouncedCallback(handle, 0));
+        const setDebounceValue = result.current;
+
+        act(() => {
+            setDebounceValue();
+        });
+
+        await waitFor(
+            () => {
+                expect(handle).toBeCalledTimes(1);
+            },
+            { timeout: 100 }
+        );
+    });
+
+    test('cancels previous timer before starting a new one', async () => {
+        const handle = jest.fn();
+        const { result } = renderHook(() => useDebouncedCallback(handle, 500));
+        const setDebounceValue = result.current;
+
+        act(() => {
+            setDebounceValue();
+        });
+
+        await waitFor(
+            () => {
+                expect(handle).not.toBeCalled();
+            },
+            { timeout: 300 }
+        );
+
+        act(() => {
+            setDebounceValue();
+        });
+
+        await waitFor(
+            () => {
+                expect(handle).toBeCalledTimes(1);
+            },
+            { timeout: 600 }
+        );
+    });
+
+    test('adjusts to updated delay value', async () => {
+        const handle = jest.fn();
+        const { result, rerender } = renderHook(({ delay }) => useDebouncedCallback(handle, delay), {
+            initialProps: { delay: 500 }
+        });
+        const setDebounceValue = result.current;
+
+        act(() => {
+            setDebounceValue();
+        });
+
+        rerender({ delay: 1000 });
+
+        act(() => {
+            setDebounceValue();
+        });
+
+        await waitFor(
+            () => {
+                expect(handle).not.toBeCalled();
+            },
+            { timeout: 750 }
+        );
+
+        await waitFor(
+            () => {
+                expect(handle).toBeCalledTimes(1);
+            },
+            { timeout: 750 }
+        );
+    });
+
+    test('ensure no unnecessary rerenders when dependency is omitted', async () => {
+        const handle = jest.fn();
+        const { result } = renderHook(() => useDebouncedCallback(handle, 500));
+
+        act(() => {
+            result.current(oldValue);
+        });
+
+        await waitFor(
+            () => {
+                expect(handle).toHaveBeenCalledWith(oldValue);
+                expect(handle).toHaveBeenCalledTimes(1);
+            },
+            { timeout: 600 }
+        );
+
+        act(() => {
+            result.current(newValue);
+        });
+
+        await waitFor(
+            () => {
+                expect(handle).toHaveBeenCalledWith(newValue);
+                expect(handle).toHaveBeenCalledTimes(2);
+            },
+            { timeout: 600 }
+        );
+    });
 });

From f0665de306feec824a80c409d5f6f14dbadb66d9 Mon Sep 17 00:00:00 2001
From: Andrey Zhukov <Zhukov290791@gmail.com>
Date: Wed, 8 Jan 2025 18:06:45 +0500
Subject: [PATCH 25/31] feat(useDebounce): refactor useDebouncedCallback to use
 useTimeout

---
 hooks/use-debounced-callback/package.json     |  6 ++++++
 .../src/useDebouncedCallback.ts               | 19 +++++++++----------
 package-lock.json                             | 13 +++++++++++--
 3 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/hooks/use-debounced-callback/package.json b/hooks/use-debounced-callback/package.json
index 24622b8d..f9f1d67b 100644
--- a/hooks/use-debounced-callback/package.json
+++ b/hooks/use-debounced-callback/package.json
@@ -29,5 +29,11 @@
   },
   "publishConfig": {
     "access": "public"
+  },
+  "dependencies": {
+    "@byndyusoft-ui/use-timeout": "*"
+  },
+  "peerDependencies": {
+    "@byndyusoft-ui/types": "*"
   }
 }
diff --git a/hooks/use-debounced-callback/src/useDebouncedCallback.ts b/hooks/use-debounced-callback/src/useDebouncedCallback.ts
index 8d61e686..5e1dba6e 100644
--- a/hooks/use-debounced-callback/src/useDebouncedCallback.ts
+++ b/hooks/use-debounced-callback/src/useDebouncedCallback.ts
@@ -1,20 +1,19 @@
-import { useEffect, useRef, useCallback } from 'react';
+import { useCallback, useRef } from 'react';
+import { Nullable } from '@byndyusoft-ui/types';
+import useTimeout from '@byndyusoft-ui/use-timeout';
 
-export function useDebouncedCallback<A extends any[]>(
+export function useDebouncedCallback<A extends unknown[]>(
     callback: (...args: A) => void,
     delay: number
 ): (...args: A) => void {
-    const timeoutIdRef = useRef<ReturnType<typeof setTimeout>>();
+    const argsRef = useRef<Nullable<A>>(null);
 
-    const cleanup = () => clearTimeout(timeoutIdRef.current);
-
-    useEffect(() => cleanup(), []);
+    const { start } = useTimeout(() => argsRef.current && callback(...argsRef.current), delay);
 
     return useCallback((...args: A): void => {
-        cleanup();
-
-        timeoutIdRef.current = setTimeout(() => callback(...args), delay);
-    }, [delay]);
+        argsRef.current = args;
+        start();
+    }, []);
 }
 
 export default useDebouncedCallback;
diff --git a/package-lock.json b/package-lock.json
index e1143673..23e48d23 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -136,7 +136,13 @@
     "hooks/use-debounced-callback": {
       "name": "@byndyusoft-ui/use-debounced-callback",
       "version": "0.0.0",
-      "license": "Apache-2.0"
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@byndyusoft-ui/use-timeout": "*"
+      },
+      "peerDependencies": {
+        "@byndyusoft-ui/types": "*"
+      }
     },
     "hooks/use-debounced-value": {
       "name": "@byndyusoft-ui/use-debounced-value",
@@ -36937,7 +36943,10 @@
       }
     },
     "@byndyusoft-ui/use-debounced-callback": {
-      "version": "file:hooks/use-debounced-callback"
+      "version": "file:hooks/use-debounced-callback",
+      "requires": {
+        "@byndyusoft-ui/use-timeout": "*"
+      }
     },
     "@byndyusoft-ui/use-debounced-value": {
       "version": "file:hooks/use-debounced-value",

From afc67f24639b6b5c188f48fad404d5e3bd1c1b74 Mon Sep 17 00:00:00 2001
From: Andrey Zhukov <Zhukov290791@gmail.com>
Date: Thu, 9 Jan 2025 02:56:49 +0500
Subject: [PATCH 26/31] feat(useDebounce): refactor` index.ts` to export
 directly

---
 hooks/use-debounced-callback/src/index.ts | 3 +--
 hooks/use-debounced-value/src/index.ts    | 3 +--
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/hooks/use-debounced-callback/src/index.ts b/hooks/use-debounced-callback/src/index.ts
index 9a796d68..06c38de5 100644
--- a/hooks/use-debounced-callback/src/index.ts
+++ b/hooks/use-debounced-callback/src/index.ts
@@ -1,2 +1 @@
-import useDebouncedCallback from './useDebouncedCallback';
-export default useDebouncedCallback;
+export { default } from './useDebouncedCallback';
diff --git a/hooks/use-debounced-value/src/index.ts b/hooks/use-debounced-value/src/index.ts
index 13295e00..9adcf053 100644
--- a/hooks/use-debounced-value/src/index.ts
+++ b/hooks/use-debounced-value/src/index.ts
@@ -1,2 +1 @@
-import useDebouncedValue from './useDebouncedValue';
-export default useDebouncedValue;
+export { default } from './useDebouncedValue';

From 1554c4f4290b3fcc772af109df77840ae7759aba Mon Sep 17 00:00:00 2001
From: Andrey Zhukov <Zhukov290791@gmail.com>
Date: Wed, 22 Jan 2025 23:58:57 +0500
Subject: [PATCH 27/31] fix(useDebounce): fix dependencies for `useDebounce`

---
 .../src/useDebouncedCallback.tests.tsx        | 62 +++++++++++++++++++
 .../src/useDebouncedCallback.ts               |  2 +-
 2 files changed, 63 insertions(+), 1 deletion(-)

diff --git a/hooks/use-debounced-callback/src/useDebouncedCallback.tests.tsx b/hooks/use-debounced-callback/src/useDebouncedCallback.tests.tsx
index 35dde650..680015d4 100644
--- a/hooks/use-debounced-callback/src/useDebouncedCallback.tests.tsx
+++ b/hooks/use-debounced-callback/src/useDebouncedCallback.tests.tsx
@@ -209,4 +209,66 @@ describe('hooks/useDebouncedCallback', () => {
             { timeout: 600 }
         );
     });
+
+    test('should update the debounced function when delay changes', async () => {
+        const handle = jest.fn();
+        const { result, rerender } = renderHook(
+          ({ callback, delay }) => useDebouncedCallback(callback, delay),
+          {
+              initialProps: { callback: handle, delay: 1000 },
+          }
+        );
+
+        rerender({ delay: 500 , callback: handle});
+
+        act(() => {
+            result.current(oldValue);
+
+        });
+
+        expect(handle).not.toHaveBeenCalled();
+
+        act(() => {
+            result.current(newValue);
+        });
+
+        await waitFor(
+          () => {
+              expect(handle).toHaveBeenCalledWith(newValue);
+              expect(handle).toHaveBeenCalledTimes(1);
+          },
+          { timeout: 600 }
+        );
+    });
+
+    test('should update the debounced function when callback changes', async () => {
+        const oldHandle = jest.fn();
+        const newHandle = jest.fn();
+
+        const { result, rerender } = renderHook(
+          ({ callback, delay }) => useDebouncedCallback(callback, delay),
+          { initialProps: { callback: oldHandle, delay: 500 } }
+        );
+
+        rerender({ delay: 500, callback: newHandle });
+
+        act(() => {
+            result.current(oldValue);
+        });
+
+        expect(oldHandle).not.toHaveBeenCalled();
+
+        act(() => {
+            result.current(newValue);
+        });
+
+        await waitFor(
+          () => {
+              expect(newHandle).toHaveBeenCalledWith(newValue);
+              expect(newHandle).toHaveBeenCalledTimes(1);
+              expect(oldHandle).not.toBeCalled();
+          },
+          { timeout: 600 }
+        );
+    });
 });
diff --git a/hooks/use-debounced-callback/src/useDebouncedCallback.ts b/hooks/use-debounced-callback/src/useDebouncedCallback.ts
index 5e1dba6e..4192cf06 100644
--- a/hooks/use-debounced-callback/src/useDebouncedCallback.ts
+++ b/hooks/use-debounced-callback/src/useDebouncedCallback.ts
@@ -13,7 +13,7 @@ export function useDebouncedCallback<A extends unknown[]>(
     return useCallback((...args: A): void => {
         argsRef.current = args;
         start();
-    }, []);
+    }, [callback, delay]);
 }
 
 export default useDebouncedCallback;

From 22daa71e1cb512557ea676c8c356366fa96d921c Mon Sep 17 00:00:00 2001
From: Andrey Zhukov <Zhukov290791@gmail.com>
Date: Thu, 23 Jan 2025 00:11:55 +0500
Subject: [PATCH 28/31] refactor(useDebounce): fix markdown code `useDebounced`

---
 .../src/useDebouncedCallback.stories.tsx      | 10 +----
 .../src/useDebouncedCallback.tests.tsx        | 41 ++++++++-----------
 .../src/useDebouncedCallback.ts               | 11 +++--
 .../src/useDebouncedValue.stories.module.css  |  2 +-
 .../src/useDebouncedValue.stories.tsx         | 14 +++----
 .../src/useDebouncedValue.tests.tsx           |  4 +-
 .../src/useDebouncedValue.ts                  |  4 +-
 7 files changed, 39 insertions(+), 47 deletions(-)

diff --git a/hooks/use-debounced-callback/src/useDebouncedCallback.stories.tsx b/hooks/use-debounced-callback/src/useDebouncedCallback.stories.tsx
index 6bb8b99c..012dd176 100644
--- a/hooks/use-debounced-callback/src/useDebouncedCallback.stories.tsx
+++ b/hooks/use-debounced-callback/src/useDebouncedCallback.stories.tsx
@@ -20,10 +20,7 @@ const DebouncedColorChange = () => {
                 >
                     Click for color change
                 </button>
-                <div
-                    className={styles.rectangle}
-                    style={{ backgroundColor: COLORS[firstColorIndex] }}
-                />
+                <div className={styles.rectangle} style={{ backgroundColor: COLORS[firstColorIndex] }} />
             </div>
 
             <div className={styles.block}>
@@ -34,10 +31,7 @@ const DebouncedColorChange = () => {
                 >
                     Click for debounced color change (delay: 1000 ms)
                 </button>
-                <div
-                    className={styles.rectangle}
-                    style={{ backgroundColor: COLORS[secondColorIndex] }}
-                />
+                <div className={styles.rectangle} style={{ backgroundColor: COLORS[secondColorIndex] }} />
             </div>
         </div>
     );
diff --git a/hooks/use-debounced-callback/src/useDebouncedCallback.tests.tsx b/hooks/use-debounced-callback/src/useDebouncedCallback.tests.tsx
index 680015d4..49c9c2ea 100644
--- a/hooks/use-debounced-callback/src/useDebouncedCallback.tests.tsx
+++ b/hooks/use-debounced-callback/src/useDebouncedCallback.tests.tsx
@@ -212,18 +212,14 @@ describe('hooks/useDebouncedCallback', () => {
 
     test('should update the debounced function when delay changes', async () => {
         const handle = jest.fn();
-        const { result, rerender } = renderHook(
-          ({ callback, delay }) => useDebouncedCallback(callback, delay),
-          {
-              initialProps: { callback: handle, delay: 1000 },
-          }
-        );
+        const { result, rerender } = renderHook(({ callback, delay }) => useDebouncedCallback(callback, delay), {
+            initialProps: { callback: handle, delay: 1000 }
+        });
 
-        rerender({ delay: 500 , callback: handle});
+        rerender({ delay: 500, callback: handle });
 
         act(() => {
             result.current(oldValue);
-
         });
 
         expect(handle).not.toHaveBeenCalled();
@@ -233,11 +229,11 @@ describe('hooks/useDebouncedCallback', () => {
         });
 
         await waitFor(
-          () => {
-              expect(handle).toHaveBeenCalledWith(newValue);
-              expect(handle).toHaveBeenCalledTimes(1);
-          },
-          { timeout: 600 }
+            () => {
+                expect(handle).toHaveBeenCalledWith(newValue);
+                expect(handle).toHaveBeenCalledTimes(1);
+            },
+            { timeout: 600 }
         );
     });
 
@@ -245,10 +241,9 @@ describe('hooks/useDebouncedCallback', () => {
         const oldHandle = jest.fn();
         const newHandle = jest.fn();
 
-        const { result, rerender } = renderHook(
-          ({ callback, delay }) => useDebouncedCallback(callback, delay),
-          { initialProps: { callback: oldHandle, delay: 500 } }
-        );
+        const { result, rerender } = renderHook(({ callback, delay }) => useDebouncedCallback(callback, delay), {
+            initialProps: { callback: oldHandle, delay: 500 }
+        });
 
         rerender({ delay: 500, callback: newHandle });
 
@@ -263,12 +258,12 @@ describe('hooks/useDebouncedCallback', () => {
         });
 
         await waitFor(
-          () => {
-              expect(newHandle).toHaveBeenCalledWith(newValue);
-              expect(newHandle).toHaveBeenCalledTimes(1);
-              expect(oldHandle).not.toBeCalled();
-          },
-          { timeout: 600 }
+            () => {
+                expect(newHandle).toHaveBeenCalledWith(newValue);
+                expect(newHandle).toHaveBeenCalledTimes(1);
+                expect(oldHandle).not.toBeCalled();
+            },
+            { timeout: 600 }
         );
     });
 });
diff --git a/hooks/use-debounced-callback/src/useDebouncedCallback.ts b/hooks/use-debounced-callback/src/useDebouncedCallback.ts
index 4192cf06..7431abd2 100644
--- a/hooks/use-debounced-callback/src/useDebouncedCallback.ts
+++ b/hooks/use-debounced-callback/src/useDebouncedCallback.ts
@@ -10,10 +10,13 @@ export function useDebouncedCallback<A extends unknown[]>(
 
     const { start } = useTimeout(() => argsRef.current && callback(...argsRef.current), delay);
 
-    return useCallback((...args: A): void => {
-        argsRef.current = args;
-        start();
-    }, [callback, delay]);
+    return useCallback(
+        (...args: A): void => {
+            argsRef.current = args;
+            start();
+        },
+        [callback, delay]
+    );
 }
 
 export default useDebouncedCallback;
diff --git a/hooks/use-debounced-value/src/useDebouncedValue.stories.module.css b/hooks/use-debounced-value/src/useDebouncedValue.stories.module.css
index 0b50e4b2..7de9f425 100644
--- a/hooks/use-debounced-value/src/useDebouncedValue.stories.module.css
+++ b/hooks/use-debounced-value/src/useDebouncedValue.stories.module.css
@@ -19,7 +19,7 @@
 }
 
 .title {
-   width: 8rem;
+    width: 8rem;
 }
 
 .input {
diff --git a/hooks/use-debounced-value/src/useDebouncedValue.stories.tsx b/hooks/use-debounced-value/src/useDebouncedValue.stories.tsx
index 6f2f86f8..a247923d 100644
--- a/hooks/use-debounced-value/src/useDebouncedValue.stories.tsx
+++ b/hooks/use-debounced-value/src/useDebouncedValue.stories.tsx
@@ -16,15 +16,15 @@ const DebouncedInput = () => {
                     type="button"
                     disabled={delay <= 0}
                     onClick={() => setDelay(delay - 100)}
-                >-</button>
+                >
+                    -
+                </button>
 
                 <span>{`${delay} ms`}</span>
 
-                <button
-                    className={styles.button}
-                    type="button"
-                    onClick={() => setDelay(delay + 100)}
-                >+</button>
+                <button className={styles.button} type="button" onClick={() => setDelay(delay + 100)}>
+                    +
+                </button>
             </div>
 
             <div className={styles.block}>
@@ -42,7 +42,7 @@ const DebouncedInput = () => {
     );
 };
 
-export const DebouncedInputStory : StoryObj<typeof DebouncedInput> = {
+export const DebouncedInputStory: StoryObj<typeof DebouncedInput> = {
     name: 'Debounced input',
     render: DebouncedInput
 };
diff --git a/hooks/use-debounced-value/src/useDebouncedValue.tests.tsx b/hooks/use-debounced-value/src/useDebouncedValue.tests.tsx
index 1ca8d842..db706cfd 100644
--- a/hooks/use-debounced-value/src/useDebouncedValue.tests.tsx
+++ b/hooks/use-debounced-value/src/useDebouncedValue.tests.tsx
@@ -8,8 +8,8 @@ const newValue = 'new value';
 describe('hooks/useDebouncedValue', () => {
     test('works correctly', async () => {
         const { result } = renderHook(() => useDebouncedValue(oldValue, 2000));
-        const getCurrentDebouncedValue = () => result.current[0];
-        const setDebouncedValue = result.current[1];
+        const getCurrentDebouncedValue = (): string => result.current[0];
+        const [, setDebouncedValue] = result.current;
 
         expect(getCurrentDebouncedValue()).toEqual(oldValue);
 
diff --git a/hooks/use-debounced-value/src/useDebouncedValue.ts b/hooks/use-debounced-value/src/useDebouncedValue.ts
index 1ecc2d8a..1183c265 100644
--- a/hooks/use-debounced-value/src/useDebouncedValue.ts
+++ b/hooks/use-debounced-value/src/useDebouncedValue.ts
@@ -8,5 +8,5 @@ export default function useDebouncedValue<T>(value: T, delay = 300): THookReturn
 
     const setDebouncedValue = useDebouncedCallback(setValue, delay);
 
-    return useMemo(() => ([debouncedValue, setDebouncedValue]), [debouncedValue, setDebouncedValue]);
-};
+    return useMemo(() => [debouncedValue, setDebouncedValue], [debouncedValue, setDebouncedValue]);
+}

From 328d7714cd33aede9d8da5a41775108018a7c1e5 Mon Sep 17 00:00:00 2001
From: Andrey Zhukov <Zhukov290791@gmail.com>
Date: Thu, 23 Jan 2025 00:24:48 +0500
Subject: [PATCH 29/31] feat(useDebounce): improve type for `useDebouncedValue`

---
 hooks/use-debounced-value/src/useDebouncedValue.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/hooks/use-debounced-value/src/useDebouncedValue.ts b/hooks/use-debounced-value/src/useDebouncedValue.ts
index 1183c265..ebd5cd84 100644
--- a/hooks/use-debounced-value/src/useDebouncedValue.ts
+++ b/hooks/use-debounced-value/src/useDebouncedValue.ts
@@ -1,9 +1,10 @@
-import { useState, useMemo } from 'react';
+import { useMemo, useState } from 'react';
+import { InitialState } from '@byndyusoft-ui/types';
 import useDebouncedCallback from '@byndyusoft-ui/use-debounced-callback';
 
 type THookReturn<T> = [T, (arg: T) => void];
 
-export default function useDebouncedValue<T>(value: T, delay = 300): THookReturn<T> {
+export default function useDebouncedValue<T>(value: InitialState<T>, delay = 300): THookReturn<T> {
     const [debouncedValue, setValue] = useState(value);
 
     const setDebouncedValue = useDebouncedCallback(setValue, delay);

From 757042af855e5638414774129bf19fb9e30ab5e0 Mon Sep 17 00:00:00 2001
From: Andrey Zhukov <Zhukov290791@gmail.com>
Date: Thu, 23 Jan 2025 00:33:54 +0500
Subject: [PATCH 30/31] fix(useDebounce): fix test for `useDebouncedCallback`

---
 .../use-debounced-callback/src/useDebouncedCallback.tests.tsx  | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/hooks/use-debounced-callback/src/useDebouncedCallback.tests.tsx b/hooks/use-debounced-callback/src/useDebouncedCallback.tests.tsx
index 49c9c2ea..a63567c3 100644
--- a/hooks/use-debounced-callback/src/useDebouncedCallback.tests.tsx
+++ b/hooks/use-debounced-callback/src/useDebouncedCallback.tests.tsx
@@ -63,6 +63,8 @@ describe('hooks/useDebouncedCallback', () => {
     });
 
     test('cleans up timer on unmount', async () => {
+        jest.spyOn(global, 'clearTimeout');
+
         const handle = jest.fn();
         const { result, unmount } = renderHook(() => useDebouncedCallback(handle, 500));
         const setDebounceValue = result.current;
@@ -79,6 +81,7 @@ describe('hooks/useDebouncedCallback', () => {
             },
             { timeout: 600 }
         );
+        expect(clearTimeout).toHaveBeenCalled();
     });
 
     test('uses the latest callback after it changes', async () => {

From 51f20d4ba66fd53264c4655240b44acd6c874457 Mon Sep 17 00:00:00 2001
From: Viktor Smorodin <smorodin@byndyusoft.com>
Date: Thu, 23 Jan 2025 11:15:43 +0300
Subject: [PATCH 31/31] =?UTF-8?q?feat(useArray):=20=D0=B4=D0=BE=D0=B1?=
 =?UTF-8?q?=D0=B0=D0=B2=D0=B8=D0=BB=20css=20modules=20=D0=B2=20=D0=B8?=
 =?UTF-8?q?=D1=81=D1=82=D0=BE=D1=80=D0=B8=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...tories.css => useArray.stories.module.css} |  8 ++--
 hooks/use-array/src/useArray.stories.tsx      | 48 +++++++++----------
 hooks/use-array/tsconfig.json                 |  2 +-
 3 files changed, 29 insertions(+), 29 deletions(-)
 rename hooks/use-array/src/{useArray.stories.css => useArray.stories.module.css} (70%)

diff --git a/hooks/use-array/src/useArray.stories.css b/hooks/use-array/src/useArray.stories.module.css
similarity index 70%
rename from hooks/use-array/src/useArray.stories.css
rename to hooks/use-array/src/useArray.stories.module.css
index c84a9978..e8aa9378 100644
--- a/hooks/use-array/src/useArray.stories.css
+++ b/hooks/use-array/src/useArray.stories.module.css
@@ -1,21 +1,21 @@
-.use-array__container {
+.container {
     display: flex;
     flex-direction: column;
     gap: 8px;
 }
 
-.use-array__row {
+.row {
     width: 424px;
     display: flex;
     gap: 8px;
 }
 
-.use-array__input {
+.input {
     min-width: 0;
     flex-grow: 1;
 }
 
-.use-array__button {
+.button {
     flex-basis: 100px;
     flex-shrink: 0;
 }
diff --git a/hooks/use-array/src/useArray.stories.tsx b/hooks/use-array/src/useArray.stories.tsx
index 905230e4..b2b9b95a 100644
--- a/hooks/use-array/src/useArray.stories.tsx
+++ b/hooks/use-array/src/useArray.stories.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { StoryObj } from '@storybook/react';
 import useArray from './useArray';
-import './useArray.stories.css';
+import styles from './useArray.stories.module.css';
 
 const Template = (): JSX.Element => {
     const [addValue, setAddValue] = useState(0);
@@ -18,118 +18,118 @@ const Template = (): JSX.Element => {
             <h1>List</h1>
             <strong>{list.length > 0 ? list.join(', ') : 'Empty'}</strong>
             <hr />
-            <div className="use-array__container">
-                <div className="use-array__row">
+            <div className={styles.container}>
+                <div className={styles.row}>
                     <input
-                        className="use-array__input"
+                        className={styles.input}
                         value={addValue}
                         type="numeric"
                         onChange={e => setAddValue(Number(e.target.value))}
                     />
                     <button
-                        className="use-array__button"
+                        className={styles.button}
                         type="button"
                         onClick={() => append(addValue)}
                     >
                         Append
                     </button>
                 </div>
-                <div className="use-array__row">
+                <div className={styles.row}>
                     <input
-                        className="use-array__input"
+                        className={styles.input}
                         value={prependValue}
                         type="numeric"
                         onChange={e => setPrependValue(Number(e.target.value))}
                     />
                     <button
-                        className="use-array__button"
+                        className={styles.button}
                         onClick={() => prepend(prependValue)}
                     >
                         Prepend
                     </button>
                 </div>
-                <div className="use-array__row">
+                <div className={styles.row}>
                     <span>from</span>
                     <input
-                        className="use-array__input"
+                        className={styles.input}
                         value={fromValue}
                         type="numeric"
                         onChange={e => setFromValue(Number(e.target.value))}
                     />
                     <span>to</span>
                     <input
-                        className="use-array__input"
+                        className={styles.input}
                         value={lessValue}
                         type="numeric"
                         onChange={e => setLessValue(Number(e.target.value))}
                     />
                     <button
-                        className="use-array__button"
+                        className={styles.button}
                         onClick={() => filter(a => a >= fromValue && a <= lessValue)}
                     >
                         Filter
                     </button>
                 </div>
-                <div className="use-array__row">
+                <div className={styles.row}>
                     <span>index</span>
                     <input
-                        className="use-array__input"
+                        className={styles.input}
                         value={indexUpdateValue}
                         type="numeric"
                         onChange={e => setIndexUpdateValue(Number(e.target.value))}
                     />
                     <span>item</span>
                     <input
-                        className="use-array__input"
+                        className={styles.input}
                         value={updateValue}
                         type="numeric"
                         onChange={e => setUpdateValue(Number(e.target.value))}
                     />
                     <button
-                        className="use-array__button"
+                        className={styles.button}
                         onClick={() => update(indexUpdateValue, updateValue)}
                     >
                         Update
                     </button>
                 </div>
-                <div className="use-array__row">
+                <div className={styles.row}>
                     <input
-                        className="use-array__input"
+                        className={styles.input}
                         value={indexRemoveValue}
                         type="numeric"
                         onChange={e => setIndexRemoveValue(Number(e.target.value))}
                     />
                     <button
-                        className="use-array__button"
+                        className={styles.button}
                         onClick={() => remove(indexRemoveValue)}
                     >
                         Remove
                     </button>
                 </div>
-                <div className="use-array__row">
+                <div className={styles.row}>
                     <button
-                        className="use-array__button"
+                        className={styles.button}
                         type="button"
                         onClick={() => reset()}
                     >
                         Reset
                     </button>
                     <button
-                        className="use-array__button"
+                        className={styles.button}
                         type="button"
                         onClick={() => clear()}
                     >
                         Clear
                     </button>
                     <button
-                        className="use-array__button"
+                        className={styles.button}
                         type="button"
                         onClick={() => sort((a, b) => a - b)}
                     >
                         Sort ASC
                     </button>
                     <button
-                        className="use-array__button"
+                        className={styles.button}
                         type="button"
                         onClick={() => sort((a, b) => b - a)}
                     >
diff --git a/hooks/use-array/tsconfig.json b/hooks/use-array/tsconfig.json
index 5b7870da..ad2f569e 100644
--- a/hooks/use-array/tsconfig.json
+++ b/hooks/use-array/tsconfig.json
@@ -7,5 +7,5 @@
     "module": "commonjs",
     "target": "es6"
   },
-  "include": ["src"]
+  "include": ["src", "../../types.d.ts"]
 }