feat: redesign - search component

.storybook/main.ts

@@ -8,10 +8,17 @@ const config: StorybookConfig = {
     '@storybook/addon-essentials',
     '@chromatic-com/storybook',
     '@storybook/addon-interactions',
+    'storybook-addon-next-router',
   ],
   framework: {
     name: '@storybook/nextjs',
     options: {},
   },
+  staticDirs: [
+    {
+      from: '../src/ui/theme/fonts',
+      to: 'src/ui/theme/fonts',
+    },
+  ],
 };
 export default config;

.storybook/preview.tsx

@@ -1,8 +1,17 @@
 import { ChakraProvider } from '@chakra-ui/react';
 import { withThemeByClassName } from '@storybook/addon-themes';
 import type { Preview } from '@storybook/react';
+import { AppRouterContext } from 'next/dist/shared/lib/app-router-context.shared-runtime';
 import React from 'react';
 
+import { Providers } from '../src/app/_components/Providers';
+import {
+  instrumentSans,
+  inter,
+  matterMonoRegular,
+  matterRegular,
+  openSauce,
+} from '../src/common/fonts';
 import { system } from '../src/ui/theme/theme';
 
 const preview: Preview = {
@@ -14,16 +23,35 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
+    nextRouter: {
+      Provider: AppRouterContext.Provider,
+      pathname: '/', // defaults to `/`
+      asPath: '/', // defaults to `/`
+      query: {}, // defaults to `{}`
+      push() {},
+    },
+    nextjs: {
+      appDirectory: true,
+    },
   },
   decorators: [
     Story => (
-      <ChakraProvider value={system}>
-        <Story />
-      </ChakraProvider>
+      <Providers addedCustomNetworksCookie={undefined} removedCustomNetworksCookie={undefined}>
+        {/*<ChakraProvider value={system}>*/}
+        <main
+          className={`${inter.variable} ${instrumentSans.variable} ${openSauce.variable} ${matterRegular.variable} ${matterMonoRegular.variable}`}
+        >
+          <Story />
+        </main>
+        {/*</ChakraProvider>*/}
+      </Providers>
     ),
     withThemeByClassName({
       defaultTheme: 'light',
-      themes: { light: '', dark: 'dark' },
+      themes: {
+        light: '',
+        dark: 'dark',
+      },
     }),
   ],
 };

package.json

@@ -133,6 +133,7 @@
     "@storybook/addon-links": "8.3.5",
     "@storybook/addon-onboarding": "8.3.5",
     "@storybook/blocks": "8.3.5",
+    "@storybook/experimental-nextjs-vite": "^8.5.2",
     "@storybook/nextjs": "8.3.5",
     "@storybook/react": "8.3.5",
     "@storybook/test": "8.3.5",
@@ -170,6 +171,7 @@
     "prettier": "3.1.0",
     "react-test-renderer": "18.2.0",
     "storybook": "8.3.5",
+    "storybook-addon-next-router": "^4.0.2",
     "ts-unused-exports": "8.0.0",
     "typescript": "5.3.2",
     "whatwg-fetch": "3.6.20"