From cda88e214f483c946aeb7971b6c4e156ae115710 Mon Sep 17 00:00:00 2001
From: Ahammad Abdullah <ahammadabdullahnew@gmail.com>
Date: Thu, 10 Oct 2024 16:29:09 +0600
Subject: [PATCH] [fix #2476] docs: convert useClickableProps stories file to
 TS

[fix: #2475] docs: convert useDebounceEvent stories file to TS

[fix:#2475] docs: convert useDebounceEvent stories file to TS

[fix:#2475] docs: convert useDebounceEvent stories file to TS
---
 ...tories.js => useDebounceEvent.stories.tsx} | 23 +++++++++++--------
 1 file changed, 13 insertions(+), 10 deletions(-)
 rename packages/core/src/hooks/useDebounceEvent/__stories__/{useDebounceEvent.stories.js => useDebounceEvent.stories.tsx} (59%)

diff --git a/packages/core/src/hooks/useDebounceEvent/__stories__/useDebounceEvent.stories.js b/packages/core/src/hooks/useDebounceEvent/__stories__/useDebounceEvent.stories.tsx
similarity index 59%
rename from packages/core/src/hooks/useDebounceEvent/__stories__/useDebounceEvent.stories.js
rename to packages/core/src/hooks/useDebounceEvent/__stories__/useDebounceEvent.stories.tsx
index abea1c77d7..a18b0ac083 100644
--- a/packages/core/src/hooks/useDebounceEvent/__stories__/useDebounceEvent.stories.js
+++ b/packages/core/src/hooks/useDebounceEvent/__stories__/useDebounceEvent.stories.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import useDebounceEvent from "..";
+import useDebounceEvent, { UseDebounceResult } from "..";
 import "../../__stories__/general-hooks-stories.scss";
 
 export default {
@@ -8,8 +8,9 @@ export default {
 
 export const Overview = {
   render: () => {
-    const { inputValue, onEventChanged } = useDebounceEvent({
-      delay: 100
+    const { inputValue, onEventChanged }: UseDebounceResult = useDebounceEvent({
+      delay: 100,
+      onChange: () => {}
     });
 
     return <input type="text" value={inputValue} onChange={onEventChanged} />;
@@ -20,8 +21,9 @@ export const Overview = {
 
 export const PassingAnInitialValue = {
   render: () => {
-    const { inputValue, onEventChanged } = useDebounceEvent({
-      initialStateValue: "bla bla bla"
+    const { inputValue, onEventChanged }: UseDebounceResult = useDebounceEvent({
+      initialStateValue: "bla bla bla",
+      onChange: () => {}
     });
 
     return <input type="text" value={inputValue} onChange={onEventChanged} />;
@@ -34,14 +36,14 @@ export const PassingAnOnChangeHandler = {
   render: () => {
     const [length, setLength] = useState(0);
 
-    const { inputValue, onEventChanged } = useDebounceEvent({
-      onChange: value => setLength(value.length)
+    const { inputValue, onEventChanged }: UseDebounceResult = useDebounceEvent({
+      onChange: (value: string) => setLength(value.length)
     });
 
     return (
       <>
         <input type="text" value={inputValue} onChange={onEventChanged} />
-        {<span>Input has {length} characters</span>}
+        <span>Input has {length} characters</span>
       </>
     );
   },
@@ -51,8 +53,9 @@ export const PassingAnOnChangeHandler = {
 
 export const WithTrim = {
   render: () => {
-    const { inputValue, onEventChanged } = useDebounceEvent({
-      trim: true
+    const { inputValue, onEventChanged }: UseDebounceResult = useDebounceEvent({
+      trim: true,
+      onChange: () => {}
     });
 
     return <input type="text" value={inputValue} onChange={onEventChanged} />;