hooks / useDebounce

.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"

.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"]
+}

.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"]
 }

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
@@ -176,7 +176,7 @@ src
         "module": "commonjs",
         "target": "es6"
     },
-    "include": ["src"]
+    "include": ["src", "src/*.stories.tsx"]
 }
 ```
 

hooks/use-array/src/useArray.stories.css → hooks/use-array/src/useArray.stories.module.css

@@ -15,7 +15,7 @@
     flex-grow: 1;
 }
 
-button {
+.button {
     flex-basis: 100px;
     flex-shrink: 0;
 }

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,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={styles.container}>
+                <div className={styles.row}>
                     <input
-                        className="input"
+                        className={styles.input}
                         value={addValue}
                         type="numeric"
                         onChange={e => setAddValue(Number(e.target.value))}
                     />
-                    <button type="button" onClick={() => append(addValue)}>
+                    <button
+                        className={styles.button}
+                        type="button"
+                        onClick={() => append(addValue)}
+                    >
                         Append
                     </button>
                 </div>
-                <div className="row">
+                <div className={styles.row}>
                     <input
-                        className="input"
+                        className={styles.input}
                         value={prependValue}
                         type="numeric"
                         onChange={e => setPrependValue(Number(e.target.value))}
                     />
-                    <button onClick={() => prepend(prependValue)}>Prepend</button>
+                    <button
+                        className={styles.button}
+                        onClick={() => prepend(prependValue)}
+                    >
+                        Prepend
+                    </button>
                 </div>
-                <div className="row">
+                <div className={styles.row}>
                     <span>from</span>
                     <input
-                        className="input"
+                        className={styles.input}
                         value={fromValue}
                         type="numeric"
                         onChange={e => setFromValue(Number(e.target.value))}
                     />
                     <span>to</span>
                     <input
-                        className="input"
+                        className={styles.input}
                         value={lessValue}
                         type="numeric"
                         onChange={e => setLessValue(Number(e.target.value))}
                     />
-                    <button onClick={() => filter(a => a >= fromValue && a <= lessValue)}>Filter</button>
+                    <button
+                        className={styles.button}
+                        onClick={() => filter(a => a >= fromValue && a <= lessValue)}
+                    >
+                        Filter
+                    </button>
                 </div>
-                <div className="row">
+                <div className={styles.row}>
                     <span>index</span>
                     <input
-                        className="input"
+                        className={styles.input}
                         value={indexUpdateValue}
                         type="numeric"
                         onChange={e => setIndexUpdateValue(Number(e.target.value))}
                     />
                     <span>item</span>
                     <input
-                        className="input"
+                        className={styles.input}
                         value={updateValue}
                         type="numeric"
                         onChange={e => setUpdateValue(Number(e.target.value))}
                     />
-                    <button onClick={() => update(indexUpdateValue, updateValue)}>Update</button>
+                    <button
+                        className={styles.button}
+                        onClick={() => update(indexUpdateValue, updateValue)}
+                    >
+                        Update
+                    </button>
                 </div>
-                <div className="row">
+                <div className={styles.row}>
                     <input
-                        className="input"
+                        className={styles.input}
                         value={indexRemoveValue}
                         type="numeric"
                         onChange={e => setIndexRemoveValue(Number(e.target.value))}
                     />
-                    <button onClick={() => remove(indexRemoveValue)}>Remove</button>
+                    <button
+                        className={styles.button}
+                        onClick={() => remove(indexRemoveValue)}
+                    >
+                        Remove
+                    </button>
                 </div>
-                <div className="row">
-                    <button type="button" onClick={() => reset()}>
+                <div className={styles.row}>
+                    <button
+                        className={styles.button}
+                        type="button"
+                        onClick={() => reset()}
+                    >
                         Reset
                     </button>
-                    <button type="button" onClick={() => clear()}>
+                    <button
+                        className={styles.button}
+                        type="button"
+                        onClick={() => clear()}
+                    >
                         Clear
                     </button>
-                    <button type="button" onClick={() => sort((a, b) => a - b)}>
+                    <button
+                        className={styles.button}
+                        type="button"
+                        onClick={() => sort((a, b) => a - b)}
+                    >
                         Sort ASC
                     </button>
-                    <button type="button" onClick={() => sort((a, b) => b - a)}>
+                    <button
+                        className={styles.button}
+                        type="button"
+                        onClick={() => sort((a, b) => b - a)}
+                    >
                         Sort DES
                     </button>
                 </div>

hooks/use-array/tsconfig.json

@@ -7,5 +7,5 @@
     "module": "commonjs",
     "target": "es6"
   },
-  "include": ["src"]
+  "include": ["src", "../../types.d.ts"]
 }

hooks/use-debounced-callback/.npmignore

@@ -0,0 +1 @@
+src

hooks/use-debounced-callback/README.md

@@ -0,0 +1,34 @@
+# `@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-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

hooks/use-debounced-callback/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@byndyusoft-ui/use-debounced-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-debounced-callback#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 --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"
+  },
+  "bugs": {
+    "url": "https://github.com/Byndyusoft/ui/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@byndyusoft-ui/use-timeout": "*"
+  },
+  "peerDependencies": {
+    "@byndyusoft-ui/types": "*"
+  }
+}

hooks/use-debounced-callback/src/index.ts

@@ -0,0 +1 @@
+export { default } from './useDebouncedCallback';

hooks/use-debounced-callback/src/useDebouncedCallback.docs.mdx

@@ -0,0 +1,19 @@
+import { Markdown, Source, Canvas, Meta } from '@storybook/blocks';
+import * as useDebouncedCallbackStories from './useDebouncedCallback.stories';
+import Readme from '../README.md';
+
+<Meta title="hooks/useDebouncedCallback" of={useDebouncedCallbackStories} />
+
+<Markdown>{Readme}</Markdown>
+
+## Guide
+
+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" of={useDebouncedCallbackStories.DebouncedColorChangeStory} />

hooks/use-debounced-callback/src/useDebouncedCallback.stories.module.css

@@ -0,0 +1,21 @@
+.container {
+    display: flex;
+    gap: 2rem;
+}
+
+.block {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+
+    width: 15rem;
+}
+
+.rectangle {
+    width: 100%;
+    height: 5rem;
+}
+
+.button {
+    height: 5rem;
+}

hooks/use-debounced-callback/src/useDebouncedCallback.stories.tsx

@@ -0,0 +1,47 @@
+import React, { useState } from 'react';
+import type { StoryObj } from '@storybook/react';
+import useDebouncedCallback from './useDebouncedCallback';
+import styles from './useDebouncedCallback.stories.module.css';
+
+const COLORS = ['red', 'green', 'yellow'];
+
+const DebouncedColorChange = () => {
+    const [firstColorIndex, setFirstColorIndex] = useState(0);
+    const [secondColorIndex, setSecondColorIndex] = useState(0);
+    const setDebouncedSecondColorIndex = useDebouncedCallback(setSecondColorIndex, 1000);
+
+    return (
+        <div className={styles.container}>
+            <div className={styles.block}>
+                <button
+                    className={styles.button}
+                    type="button"
+                    onClick={() => setFirstColorIndex((firstColorIndex + 1) % 3)}
+                >
+                    Click for color change
+                </button>
+                <div className={styles.rectangle} style={{ backgroundColor: COLORS[firstColorIndex] }} />
+            </div>
+
+            <div className={styles.block}>
+                <button
+                    className={styles.button}
+                    type="button"
+                    onClick={() => setDebouncedSecondColorIndex((secondColorIndex + 1) % 3)}
+                >
+                    Click for debounced color change (delay: 1000 ms)
+                </button>
+                <div className={styles.rectangle} style={{ backgroundColor: COLORS[secondColorIndex] }} />
+            </div>
+        </div>
+    );
+};
+
+export const DebouncedColorChangeStory: StoryObj<typeof DebouncedColorChange> = {
+    name: 'Debounced color change',
+    render: DebouncedColorChange
+};
+
+export default {
+    title: 'hooks/useDebouncedCallback'
+};