docs(SearchInput): update documentation for debounce feature

docs/storybook/SearchInput.md

@@ -0,0 +1,34 @@
+### Overview
+
+- The SearchInput component is a versatile input field that supports both controlled and uncontrolled modes with debounce functionality.
+
+### Interaction
+
+- Users can enter search terms into the input field. If the `type` prop is not specified, it defaults to a search field, which browsers style differently to indicate its purpose.
+- When the input is having search term, a clear icon appears to help users reset their search.
+
+### Context and Usage
+
+The SearchInput component supports both controlled and uncontrolled modes:
+- It provides flexible input functionality with debounce support and can be used in both controlled and uncontrolled modes.
+- Use the `onSearch` handler to manage API calls, which will be triggered based on the specified debounce timeout.
+
+#### Common Behavior
+
+- The `onChange` handler triggers on every character change.
+- The debounce feature, with a default delay of 0 milliseconds, can be customized using the `debounceTimeout` prop.
+- The `onSearch` function is called after the debounce delay, allowing for API calls.
+
+#### Controlled Mode
+
+- Use the `value` prop to control the input.
+
+#### Uncontrolled Mode
+
+- Use the `defaultValue` prop to set the initial input value.
+
+### Guidance
+
+- The `onChange` handler functions the same as in a standard input field.
+- All props related to the MUI TextField component are supported.
+- New props added for managing the debounce feature: `debounceTimeout` and `onSearch`.

src/components/basic/SearchInput/SearchInput.stories.tsx

@@ -22,12 +22,18 @@ import { useState } from 'react'
 import { ComponentStory } from '@storybook/react'
 
 import { SearchInput as Component } from '.'
+import searchInputDoc from '../../../../docs/storybook/SearchInput.md?raw'
 
 export default {
-  title: 'Form',
+  title: 'Form/SearchInput',
   component: Component,
   tags: ['autodocs'],
   argTypes: {},
+  parameters: {
+    docs: {
+      description: { component: searchInputDoc },
+    },
+  },
 }
 
 const Template: ComponentStory<typeof Component> = (args: any) => (

src/components/basic/SearchInput/SearchInput.test.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react'
 import { fireEvent, screen, waitFor } from '@testing-library/react'
 import { SearchInput } from '.'
-import { render } from '../../../test/test-utils'
+import { render } from '../../../test/testUtils'
 
 jest.useFakeTimers()