WIP Feature/storybook default import

examples/with-storybook/.storybook/main.js

@@ -1,4 +1,8 @@
 module.exports = {
   stories: ['../stories/*.stories.@(ts|tsx|js|jsx|mdx)'],
-  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
+  addons: [
+    '@storybook/addon-actions',
+    '@storybook/addon-links',
+    '@next/plugin-storybook',
+  ],
 }

examples/with-storybook/components/index.js

@@ -1,3 +1,4 @@
+import sayHello from '@/sayHello'
 export default function Home() {
-  return <div>Hello World</div>
+  return <div>{sayHello()}</div>
 }

examples/with-storybook/jsconfig.json

@@ -0,0 +1,9 @@
+// tsconfig.json or jsconfig.json
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["utils/*"]
+    }
+  }
+}

examples/with-storybook/package.json

@@ -16,6 +16,7 @@
   },
   "license": "MIT",
   "devDependencies": {
+    "@next/plugin-storybook": "10.0.0",
     "@storybook/addon-actions": "6.0.5",
     "@storybook/addon-links": "6.0.5",
     "@storybook/addons": "6.0.5",

examples/with-storybook/utils/sayHello.js

@@ -0,0 +1,5 @@
+// Dummy function used demo module paths aliases
+// @see https://nextjs.org/docs/advanced-features/module-path-aliases
+export default function sayHello() {
+  return 'Hello World'
+}

packages/next-plugin-storybook/package.json

@@ -1,11 +1,18 @@
 {
   "name": "@next/plugin-storybook",
+  "exports": {
+    "./": "./dist/"
+  },
   "version": "10.0.0",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/next-plugin-storybook"
   },
   "peerDependencies": {
     "next": "*"
-  }
+  },
+  "scripts": {
+    "build": "yarn tsc -d -w -p tsconfig.json"
+  },
+  "dependencies": {}
 }

packages/next-plugin-storybook/preset.js → packages/next-plugin-storybook/preset.ts

@@ -1,7 +1,7 @@
-const { PHASE_PRODUCTION_BUILD } = require('next/constants')
-const { findPagesDir } = require('next/dist/lib/find-pages-dir')
-const loadConfig = require('next/dist/next-server/server/config').default
-const getWebpackConfig = require('next/dist/build/webpack-config').default
+import { PHASE_PRODUCTION_BUILD } from 'next/constants'
+import { findPagesDir } from 'next/lib/find-pages-dir'
+import loadConfig from 'next/next-server/server/config'
+import getWebpackConfig from 'next/build/webpack-config'
 
 const CWD = process.cwd()
 
@@ -15,6 +15,7 @@ async function webpackFinal(config) {
     target: 'server',
     config: nextConfig,
     buildId: 'storybook',
+    rewrites: [],
   })
 
   config.plugins = [...config.plugins, ...nextWebpackConfig.plugins]
@@ -27,7 +28,7 @@ async function webpackFinal(config) {
   config.module.rules = [
     ...config.module.rules.filter((rule) => {
       // the rules we're filtering use RegExp for the test
-      if (!rule.test instanceof RegExp) return true
+      if (!(rule.test instanceof RegExp)) return true
       // use Next.js' built-in CSS
       if (rule.test.test('hello.css')) {
         return false

packages/next-plugin-storybook/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "outDir": "dist/",
+    "module": "commonjs",
+    "sourceMap": true,
+    "esModuleInterop": true,
+    "target": "es2015",
+    "downlevelIteration": true,
+    "preserveWatchOutput": true
+  },
+  "include": ["**/*.ts"],
+  "exclude": ["node_modules", "dist", "./*.d.ts"]
+}