wip: add search-input component

src/stories/components/search-bar.stories.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react'
 import { IconButton } from '@chakra-ui/react'
 import { Meta, StoryObj } from '@storybook/react'
 import { IconTune, SearchBar } from '../../components'
@@ -15,4 +16,8 @@ export const Default: Story = {
     placeholder: 'Search',
     buttons: <IconButton icon={<IconTune />} aria-label="Filters" />,
   },
+  render: (args) => {
+    const [query, setQuery] = useState('')
+    return <SearchBar {...args} query={query} onSearch={setQuery} />
+  },
 }

src/stories/components/search-input.stories.tsx

@@ -0,0 +1,21 @@
+import { useState } from 'react'
+import { Meta, StoryObj } from '@storybook/react'
+import { SearchInput } from '../../components'
+
+const meta: Meta<typeof SearchInput> = {
+  title: 'Components/Search Input',
+  component: SearchInput,
+}
+
+export default meta
+type Story = StoryObj<typeof SearchInput>
+
+export const Default: Story = {
+  args: {
+    placeholder: 'Search',
+  },
+  render: (args) => {
+    const [query, setQuery] = useState('')
+    return <SearchInput {...args} query={query} onChange={setQuery} />
+  },
+}