get routing working

.eslintrc.json

@@ -27,7 +27,8 @@
       },
       "rules": {
         "@typescript-eslint/no-floating-promises": "error",
-        "@typescript-eslint/explicit-module-boundary-types": "error"
+        "@typescript-eslint/explicit-module-boundary-types": "error",
+        "@typescript-eslint/no-empty-function": "off"
       }
     }
   ]

examples/nextv12/package.json

@@ -27,8 +27,5 @@
     "eslint-config-next": "12.0.7",
     "eslint-plugin-storybook": "^0.5.5",
     "storybook-addon-next": "link:../../"
-  },
-  "resolutions": {
-    "colors": "1.4.0"
   }
 }

examples/nextv12/pages/nextjsRouting.js

@@ -9,7 +9,9 @@ export default function NextjsRouting() {
         <link rel="icon" href="/favicon.ico" />
       </Head>
       <Links />
-      <main>The links used to navigate this example use next.js routing</main>
+      <main>
+        Interact with any of the links and look at the "Actions" tab below
+      </main>
     </div>
   )
 }

examples/nextv12/yarn.lock

@@ -9987,13 +9987,6 @@ store2@^2.12.0:
   resolved "https://registry.yarnpkg.com/store2/-/store2-2.13.1.tgz#fae7b5bb9d35fc53dc61cd262df3abb2f6e59022"
   integrity sha512-iJtHSGmNgAUx0b/MCS6ASGxb//hGrHHRgzvN+K5bvkBTN7A9RTpPSf1WSp+nPGvWCJ1jRnvY7MKnuqfoi3OEqg==
 
-storybook-addon-next-router@^3.1.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/storybook-addon-next-router/-/storybook-addon-next-router-3.1.1.tgz#46623ca36b450745c3517f5cdc4bf30fa4a4a930"
-  integrity sha512-Z14dED37vNXkN7+VY80HhF9itGReWoBAlKREHEk2By/dW7zSSqcSyXYV4bDMXIMAFYHMaA1svcBC1idVG8FhAw==
-  dependencies:
-    tslib "^2.3.0"
-
 "storybook-addon-next@link:../..":
   version "0.0.0"
   uid ""

package.json

@@ -44,10 +44,10 @@
     "postcss-loader": "^6.2.1",
     "sass": "^1.48.0",
     "sass-loader": "^12.4.0",
-    "storybook-addon-next-router": "^3.1.1",
     "style-loader": "^3.3.1"
   },
   "devDependencies": {
+    "@storybook/addon-actions": "^6.4.13",
     "@storybook/core-common": "^6.4.13",
     "@types/loader-utils": "^2.0.3",
     "@types/react": "^17.0.38",

src/decorators/Router.tsx

@@ -0,0 +1,59 @@
+import { RouterContext } from 'next/dist/shared/lib/router-context'
+import Router, { NextRouter } from 'next/router'
+import { action } from '@storybook/addon-actions'
+import { StoryContext } from '@storybook/addons'
+
+export const RouterDecorator = (
+  Story: React.FC,
+  context: StoryContext
+): React.ReactNode => {
+  const nextRouterParams = context.parameters.nextRouter ?? {}
+
+  Router.router = {
+    locale: context?.globals?.locale,
+    route: '/',
+    pathname: '/',
+    query: {},
+    asPath: '/',
+    push(...args: unknown[]) {
+      action('nextRouter.push')(...args)
+      return Promise.resolve(true)
+    },
+    replace(...args: unknown[]) {
+      action('nextRouter.replace')(...args)
+      return Promise.resolve(true)
+    },
+    reload(...args: unknown[]) {
+      action('nextRouter.reload')(...args)
+    },
+    back(...args: unknown[]) {
+      action('nextRouter.back')(...args)
+    },
+    prefetch(...args: unknown[]) {
+      action('nextRouter.prefetch')(...args)
+      return Promise.resolve()
+    },
+    beforePopState(...args: unknown[]) {
+      action('nextRouter.beforePopState')(...args)
+    },
+    events: {
+      on(...args: unknown[]) {
+        action('nextRouter.events.on')(...args)
+      },
+      off(...args: unknown[]) {
+        action('nextRouter.events.off')(...args)
+      },
+      emit(...args: unknown[]) {
+        action('nextRouter.events.emit')(...args)
+      }
+    },
+    isFallback: false,
+    ...nextRouterParams
+  } as typeof Router.router
+
+  return (
+    <RouterContext.Provider value={Router.router as NextRouter}>
+      <Story />
+    </RouterContext.Provider>
+  )
+}

src/preset.ts

@@ -5,8 +5,6 @@ import { NextConfig } from 'next'
 import { Configuration as WebpackConfig } from 'webpack'
 import { StorybookConfig } from '@storybook/core-common'
 
-export const addons: StorybookConfig['addons'] = ['storybook-addon-next-router']
-
 export const config: StorybookConfig['config'] = (entry = []) => [
   ...entry,
   require.resolve('./preview')
@@ -26,7 +24,7 @@ export const webpackFinal: StorybookConfig['webpackFinal'] =
     configureRootAbsoluteImport(baseConfig)
     configureCss(baseConfig, nextConfigResolved)
     configureStaticImageImport(baseConfig)
-    configureNextImageStub(baseConfig)
+    configureModuleAliases(baseConfig)
 
     return baseConfig
   }
@@ -75,7 +73,7 @@ const configureStaticImageImport = (baseConfig: WebpackConfig): void => {
         test: rule.test,
         use: [
           {
-            loader: path.resolve(__dirname, 'next-image-loader-stub'),
+            loader: path.resolve(__dirname, './webpack/next-image-loader-stub'),
             options: {
               filename: rule.generator?.filename
             }
@@ -86,19 +84,23 @@ const configureStaticImageImport = (baseConfig: WebpackConfig): void => {
   })
 }
 
-const configureNextImageStub = (baseConfig: WebpackConfig): void => {
+// This is to help the addon in development
+// Without it, the addon resolves packages in its node_modules instead of the example's node_modules
+const configureModuleAliases = (baseConfig: WebpackConfig): void => {
   if (!baseConfig.resolve) baseConfig.resolve = {}
   if (!baseConfig.resolve.alias) baseConfig.resolve.alias = {}
 
   const aliasConfig = baseConfig.resolve.alias
-  const name = 'next/image'
-  const alias = path.resolve('node_modules/next/image')
-  if (Array.isArray(aliasConfig)) {
-    aliasConfig.push({
-      alias,
-      name
-    })
-  } else {
-    aliasConfig[name] = alias
+  const names = ['next/image', 'next/dist/shared/lib/router-context']
+  for (const name of names) {
+    const alias = path.resolve(`node_modules/${name}`)
+    if (Array.isArray(aliasConfig)) {
+      aliasConfig.push({
+        name,
+        alias
+      })
+    } else {
+      aliasConfig[name] = alias
+    }
   }
 }

src/preview.ts

@@ -1,8 +1,4 @@
-import { RouterContext } from 'next/dist/shared/lib/router-context'
-import './next-image-stub'
+import { RouterDecorator } from './decorators/Router'
+import './stubs/next-image-stub'
 
-export const parameters = {
-  nextRouter: {
-    Provider: RouterContext.Provider
-  }
-}
+export const decorators = [RouterDecorator]

src/register.ts

@@ -1,7 +1,3 @@
 import { addons } from '@storybook/addons'
 
-const ADDON_ID = 'storybook-addon-next'
-
-addons.register(ADDON_ID, () => {
-  return
-})
+addons.register('storybook-addon-next', () => {})