mock router for my components

web/.storybook/main.ts

@@ -1,4 +1,5 @@
 import type { StorybookConfig } from '@storybook/nextjs';
+import path from 'path';
 
 const config: StorybookConfig = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
@@ -11,6 +12,14 @@ const config: StorybookConfig = {
     name: '@storybook/nextjs',
     options: {}
   },
-  staticDirs: ['../public']
+  staticDirs: ['../public'],
+  webpackFinal: async (config) => {
+    config.resolve = config.resolve || {};
+    config.resolve.alias = {
+      ...(config.resolve.alias || {}),
+      'next/navigation': path.resolve(__dirname, './mocks/next-navigation.ts')
+    };
+    return config;
+  }
 };
 export default config;

web/.storybook/mocks/next-navigation.ts

@@ -0,0 +1,11 @@
+// mocks/next-navigation.ts
+export const useRouter = () => ({
+  push: () => {},
+  replace: () => {},
+  refresh: () => {},
+  back: () => {}
+});
+
+export const usePathname = () => '/';
+export const useSearchParams = () => new URLSearchParams();
+export const useParams = () => ({});

web/src/components/ui/buttons/Button.stories.tsx

@@ -102,13 +102,6 @@ export const Disabled: Story = {
   }
 };
 
-export const AsChild: Story = {
-  args: {
-    asChild: true,
-    children: <a href="www.google.com">Link Button</a>
-  }
-};
-
 export const Loading: Story = {
   args: {
     variant: 'default',