@storybook/nextjs 7.0.0-beta.1 → 7.0.0-beta.2

package/README.md

@@ -14,12 +14,12 @@
     - [Remote Images](#remote-images)
     - [Optimization](#optimization)
     - [AVIF](#avif)
-  - [Next.js Navigation](#nextjs-navigation)
   - [Next.js Routing](#nextjs-routing)
     - [Overriding defaults](#overriding-defaults)
     - [Global Defaults](#global-defaults)
     - [Default Router](#default-router)
     - [Actions Integration Caveats](#actions-integration-caveats)
+  - [Next.js Navigation](#nextjs-navigation)
   - [Sass/Scss](#sassscss)
   - [Css/Sass/Scss Modules](#csssassscss-modules)
   - [Styled JSX](#styled-jsx)
@@ -30,7 +30,7 @@
   - [Typescript](#typescript)
   - [Notes for Yarn v2 and v3 users](#notes-for-yarn-v2-and-v3-users)
   - [FAQ](#faq)
-    - [Stories for pages](#stories-for-pages)
+    - [Stories for pages](#stories-for-pages-components-which-fetch-data)
     - [Statically imported images won't load](#statically-imported-images-wont-load)
     - [Module not found: Error: Can't resolve [package name]](#module-not-found-error-cant-resolve-package-name)
 - [Acknowledgements](#acknowledgements)
@@ -71,29 +71,52 @@
 Follow the prompts after running this command in your Next.js project's root directory:
 
 ```bash
-npx storybook init
+npx storybook@next init
 ```
 
-[More on getting started with Storybook](https://storybook.js.org/docs/react/get-started/introduction)
+[More on getting started with Storybook](https://storybook.js.org/docs/react/get-started/install)
 
 ### In a project with Storybook
 
-Update your `main.js` to look something like this:
+This framework is designed to work with Storybook 7. If you’re not already using v7, upgrade with this command:
+
+```bash
+npx storybook@next upgrade --prerelease
+```
 
 Install the framework:
 
 ```bash
-yarn install @storybook/nextjs
+yarn install -D @storybook/nextjs@next
 ```
 
+Update your `main.js` to change the framework property:
+
 ```js
 // .storybook/main.js
 module.exports = {
+  // ...
   framework: {
-    name: '@storybook/nextjs',
-    options: {};
-  }
-}
+    // name: '@storybook/react-webpack5', // Remove this
+    name: '@storybook/nextjs', // Add this
+    options: {},
+  },
+};
+```
+
+If you were using Storybook plugins to integrate with Next.js, those are no longer necessary when using this framework and can be removed:
+
+```js
+// .storybook/main.js
+module.exports = {
+  // ...
+  addons: [
+    // ...
+    // These can both be removed
+    // 'storybook-addon-next',
+    // 'storybook-addon-next-router',
+  ],
+};
 ```
 
 ## Documentation
@@ -109,14 +132,13 @@ For example:
 const path = require('path');
 
 module.exports = {
-  // other config ommited for brevity
+  // ...
   framework: {
     name: '@storybook/nextjs',
     options: {
       nextConfigPath: path.resolve(__dirname, '../next.config.js'),
     },
   },
-  // ...
 };
 ```
 
@@ -174,69 +196,34 @@ export default function Home() {
 
 This format is not supported by this framework yet. Feel free to [open up an issue](https://github.com/storybookjs/storybook/issues) if this is something you want to see.
 
-### Next.js Navigation
-
-Please note that [next/navigation](https://beta.nextjs.org/docs/upgrade-guide#step-5-migrating-routing-hooks) can only be used in components/pages of the `app` directory of Next.js v13 or higher.
-
-#### Set `nextjs.appDirectory` to `true`
-
-If your story imports components that use `next/navigation`, you need to set the parameter `nextjs.appDirectory` to `true` in your Story:
-
-```js
-// SomeComponentThatUsesTheRouter.stories.js
-import SomeComponentThatUsesTheNavigation from './SomeComponentThatUsesTheNavigation';
-
-export default {
-  component: SomeComponentThatUsesTheNavigation,
-};
-
-// if you have the actions addon
-// you can click the links and see the route change events there
-export const Example = {
-  parameters: {
-    nextjs: {
-      appDirectory: true,
-    },
-  },
-},
-```
-
-If your Next.js project uses the `app` directory for every page (in other words, it does not have a `pages` directory), you can set the parameter `nextjs.appDirectory` to `true` in the [preview.js](https://storybook.js.org/docs/react/configure/overview#configure-story-rendering) file to apply it to all stories.
-
-```js
-// .storybook/preview.js
+### Next.js Routing
 
-export const parameters = {
-  nextjs: {
-    appDirectory: true,
-  },
-};
-```
+[Next.js's router](https://nextjs.org/docs/routing/introduction) is automatically stubbed for you so that when the router is interacted with, all of its interactions are automatically logged to the Actions ctions panel if you have the [Storybook actions addon](https://storybook.js.org/docs/react/essentials/actions).
 
-The parameter `nextjs.appDirectory` defaults to `false` if not set.
+> When using Next.js 13+, you should only use `next/router` in the `pages` directory. In the `app` directory, it is necessary to use `next/navigation`.
 
 #### Overriding defaults
 
-Per-story overrides can be done by adding a `nextjs.navigation` property onto the story [parameters](https://storybook.js.org/docs/react/writing-stories/parameters). The framework will shallowly merge whatever you put here into the router.
+Per-story overrides can be done by adding a `nextjs.router` property onto the story [parameters](https://storybook.js.org/docs/react/writing-stories/parameters). The framework will shallowly merge whatever you put here into the router.
 
 ```js
-// SomeComponentThatUsesTheNavigation.stories.js
-import SomeComponentThatUsesTheNavigation from './SomeComponentThatUsesTheNavigation';
+// SomeComponentThatUsesTheRouter.stories.js
+import SomeComponentThatUsesTheRouter from './SomeComponentThatUsesTheRouter';
 
 export default {
-  component: SomeComponentThatUsesTheNavigation,
+  component: SomeComponentThatUsesTheRouter,
 };
 
-// if you have the actions addon
-// you can click the links and see the route change events there
+// If you have the actions addon,
+// you can interact with the links and see the route change events there
 export const Example = {
   parameters: {
     nextjs: {
-      appDirectory: true,
-      navigation: {
-        pathname: '/some-default-path',
+      router: {
+        path: '/profile/[id]',
+        asPath: '/profile/1',
         query: {
-          foo: 'bar',
+          id: '1',
         },
       },
     },
@@ -253,41 +240,65 @@ Global defaults can be set in [preview.js](https://storybook.js.org/docs/react/c
 
 export const parameters = {
   nextjs: {
-    appDirectory: true,
-    navigation: {
-      pathname: '/some-default-path',
-      query: {
-        foo: 'bar',
-      },
+    router: {
+      path: '/some-default-path',
+      asPath: '/some-default-path',
+      query: {},
     },
   },
 };
 ```
 
-#### Default Navigation Context
+#### Default Router
 
-The default values on the stubbed navigation context are as follows:
+The default values on the stubbed router are as follows (see [globals](https://storybook.js.org/docs/react/essentials/toolbars-and-globals#globals) for more details on how globals work)
 
 ```ts
-const defaultNavigationContext = {
+const defaultRouter = {
   push(...args) {
-    action('nextNavigation.push')(...args);
+    action('nextRouter.push')(...args);
+    return Promise.resolve(true);
   },
   replace(...args) {
-    action('nextNavigation.replace')(...args);
+    action('nextRouter.replace')(...args);
+    return Promise.resolve(true);
   },
-  forward(...args) {
-    action('nextNavigation.forward')(...args);
+  reload(...args) {
+    action('nextRouter.reload')(...args);
   },
   back(...args) {
-    action('nextNavigation.back')(...args);
+    action('nextRouter.back')(...args);
+  },
+  forward() {
+    action('nextRouter.forward')();
   },
   prefetch(...args) {
-    action('nextNavigation.prefetch')(...args);
+    action('nextRouter.prefetch')(...args);
+    return Promise.resolve();
   },
-  refresh: () => {
-    action('nextNavigation.refresh')();
+  beforePopState(...args) {
+    action('nextRouter.beforePopState')(...args);
   },
+  events: {
+    on(...args) {
+      action('nextRouter.events.on')(...args);
+    },
+    off(...args) {
+      action('nextRouter.events.off')(...args);
+    },
+    emit(...args) {
+      action('nextRouter.events.emit')(...args);
+    },
+  },
+  // The locale should be configured [globally](https://storybook.js.org/docs/react/essentials/toolbars-and-globals#globals)
+  locale: globals?.locale,
+  asPath: '/',
+  basePath: '/',
+  isFallback: false,
+  isLocaleDomain: false,
+  isReady: true,
+  isPreview: false,
+  route: '/',
   pathname: '/',
   query: {},
 };
@@ -295,17 +306,16 @@ const defaultNavigationContext = {
 
 #### Actions Integration Caveats
 
-If you override a function, you lose the automatic action tab integration and have to build it out yourself.
+If you override a function, you lose the automatic actions integration and have to build it out yourself.
 
 ```js
 // .storybook/preview.js
 
 export const parameters = {
   nextjs: {
-    appDirectory: true,
-    navigation: {
+    router: {
       push() {
-        // The default implementation that logs the action into the action tab is lost
+        // The default implementation that logs the action into the Actions panel is lost
       },
     },
   },
@@ -320,13 +330,12 @@ import { action } from '@storybook/addon-actions';
 
 export const parameters = {
   nextjs: {
-    appDirectory: true,
-    navigation: {
+    router: {
       push(...args) {
-        // custom logic can go here
-        // this logs to the actions tab
-        action('nextNavigation.push')(...args);
-        // return whatever you want here
+        // Custom logic can go here
+        // This logs to the Actions panel
+        action('nextRouter.push')(...args);
+        // Return whatever you want here
         return Promise.resolve(true);
       },
     },
@@ -334,34 +343,67 @@ export const parameters = {
 };
 ```
 
-### Next.js Routing
+### Next.js Navigation
 
-[Next.js's router](https://nextjs.org/docs/routing/introduction) is automatically stubbed for you so that when the router is interacted with, all of its interactions are automatically logged to the [Storybook actions tab](https://storybook.js.org/docs/react/essentials/actions) if you have the actions addon.
+> Please note that [next/navigation](https://beta.nextjs.org/docs/upgrade-guide#step-5-migrating-routing-hooks) can only be used in components/pages in the `app` directory of Next.js 13+.
 
-You should only use `next/router` in the `pages` directory of Next.js v13 or higher. In the `app` directory, it is necessary to use `next/navigation`.
+#### Set `nextjs.appDirectory` to `true`
+
+If your story imports components that use `next/navigation`, you need to set the parameter `nextjs.appDirectory` to `true` in your Story:
+
+```js
+// SomeComponentThatUsesTheRouter.stories.js
+import SomeComponentThatUsesTheNavigation from './SomeComponentThatUsesTheNavigation';
+
+export default {
+  component: SomeComponentThatUsesTheNavigation,
+};
+
+export const Example = {
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+},
+```
+
+If your Next.js project uses the `app` directory for every page (in other words, it does not have a `pages` directory), you can set the parameter `nextjs.appDirectory` to `true` in the [preview.js](https://storybook.js.org/docs/react/configure/overview#configure-story-rendering) file to apply it to all stories.
+
+```js
+// .storybook/preview.js
+
+export const parameters = {
+  nextjs: {
+    appDirectory: true,
+  },
+};
+```
+
+The parameter `nextjs.appDirectory` defaults to `false` if not set.
 
 #### Overriding defaults
 
-Per-story overrides can be done by adding a `nextRouter` property onto the story [parameters](https://storybook.js.org/docs/react/writing-stories/parameters). The framework will shallowly merge whatever you put here into the router.
+Per-story overrides can be done by adding a `nextjs.navigation` property onto the story [parameters](https://storybook.js.org/docs/react/writing-stories/parameters). The framework will shallowly merge whatever you put here into the router.
 
 ```js
-// SomeComponentThatUsesTheRouter.stories.js
-import SomeComponentThatUsesTheRouter from './SomeComponentThatUsesTheRouter';
+// SomeComponentThatUsesTheNavigation.stories.js
+import SomeComponentThatUsesTheNavigation from './SomeComponentThatUsesTheNavigation';
 
 export default {
-  component: SomeComponentThatUsesTheRouter,
+  component: SomeComponentThatUsesTheNavigation,
 };
 
-// if you have the actions addon
-// you can click the links and see the route change events there
+// If you have the actions addon,
+// you can interact with the links and see the route change events there
 export const Example = {
   parameters: {
     nextjs: {
-      router: {
-        path: '/profile/[id]',
-        asPath: '/profile/ryanclementshax',
+      appDirectory: true,
+      navigation: {
+        pathname: '/profile',
         query: {
-          id: 'ryanclementshax',
+          user: '1',
         },
       },
     },
@@ -378,65 +420,38 @@ Global defaults can be set in [preview.js](https://storybook.js.org/docs/react/c
 
 export const parameters = {
   nextjs: {
-    router: {
-      path: '/some-default-path',
-      asPath: '/some-default-path',
-      query: {},
+    appDirectory: true,
+    navigation: {
+      pathname: '/some-default-path',
     },
   },
 };
 ```
 
-#### Default Router
+#### Default Navigation Context
 
-The default values on the stubbed router are as follows (see [globals](https://storybook.js.org/docs/react/essentials/toolbars-and-globals#globals) for more details on how globals work)
+The default values on the stubbed navigation context are as follows:
 
 ```ts
-const defaultRouter = {
+const defaultNavigationContext = {
   push(...args) {
-    action('nextRouter.push')(...args);
-    return Promise.resolve(true);
+    action('nextNavigation.push')(...args);
   },
   replace(...args) {
-    action('nextRouter.replace')(...args);
-    return Promise.resolve(true);
+    action('nextNavigation.replace')(...args);
   },
-  reload(...args) {
-    action('nextRouter.reload')(...args);
+  forward(...args) {
+    action('nextNavigation.forward')(...args);
   },
   back(...args) {
-    action('nextRouter.back')(...args);
-  },
-  forward() {
-    action('nextRouter.forward')();
+    action('nextNavigation.back')(...args);
   },
   prefetch(...args) {
-    action('nextRouter.prefetch')(...args);
-    return Promise.resolve();
-  },
-  beforePopState(...args) {
-    action('nextRouter.beforePopState')(...args);
+    action('nextNavigation.prefetch')(...args);
   },
-  events: {
-    on(...args) {
-      action('nextRouter.events.on')(...args);
-    },
-    off(...args) {
-      action('nextRouter.events.off')(...args);
-    },
-    emit(...args) {
-      action('nextRouter.events.emit')(...args);
-    },
+  refresh: () => {
+    action('nextNavigation.refresh')();
   },
-  // The locale should be configured [globally](https://storybook.js.org/docs/react/essentials/toolbars-and-globals#globals)
-  locale: globals?.locale,
-  asPath: '/',
-  basePath: '/',
-  isFallback: false,
-  isLocaleDomain: false,
-  isReady: true,
-  isPreview: false,
-  route: '/',
   pathname: '/',
   query: {},
 };
@@ -451,9 +466,10 @@ If you override a function, you lose the automatic action tab integration and ha
 
 export const parameters = {
   nextjs: {
-    router: {
+    appDirectory: true,
+    navigation: {
       push() {
-        // The default implementation that logs the action into the action tab is lost
+        // The default implementation that logs the action into the Actions panel is lost
       },
     },
   },
@@ -468,12 +484,13 @@ import { action } from '@storybook/addon-actions';
 
 export const parameters = {
   nextjs: {
-    router: {
+    appDirectory: true,
+    navigation: {
       push(...args) {
-        // custom logic can go here
-        // this logs to the actions tab
-        action('nextRouter.push')(...args);
-        // return whatever you want here
+        // Custom logic can go here
+        // This logs to the Actions panel
+        action('nextNavigation.push')(...args);
+        // Return whatever you want here
         return Promise.resolve(true);
       },
     },
@@ -496,7 +513,7 @@ This will automatically include any of your [custom sass configurations](https:/
 const path = require('path');
 
 module.exports = {
-  // any options here are included in sass compilation for your stories
+  // Any options here are included in Sass compilation for your stories
   sassOptions: {
     includePaths: [path.join(__dirname, 'styles')],
   },
@@ -508,7 +525,7 @@ module.exports = {
 [css modules](https://nextjs.org/docs/basic-features/built-in-css-support#adding-component-level-css) work as expected.
 
 ```js
-// this import works just fine in Storybook now
+// This import works just fine in Storybook now
 import styles from './Button.module.css';
 // sass/scss is also supported
 // import styles from './Button.module.scss'
@@ -603,10 +620,11 @@ export default function HomePage() {
 }
 ```
 
+Also OK for global styles in `preview.js`!
+
 ```js
-// preview.js
+// .storybook/preview.js
 
-// Also ok in preview.js!
 import 'styles/globals.scss';
 
 // ...
@@ -659,14 +677,14 @@ Below is an example of how to add svgr support to Storybook with this framework.
 ```js
 // .storybook/main.js
 module.exports = {
-  // other config omitted for brevity
+  // ...
   webpackFinal: async (config) => {
-    // this modifies the existing image rule to exclude .svg files
+    // This modifies the existing image rule to exclude .svg files
     // since you want to handle those files with @svgr/webpack
     const imageRule = config.module.rules.find((rule) => rule.test.test('.svg'));
     imageRule.exclude = /\.svg$/;
 
-    // configure .svg files to be loaded with @svgr/webpack
+    // Configure .svg files to be loaded with @svgr/webpack
     config.module.rules.push({
       test: /\.svg$/,
       use: ['@svgr/webpack'],
@@ -703,9 +721,9 @@ This is because those versions of Yarn have different package resolution rules t
 
 ### FAQ
 
-#### Stories for pages
+#### Stories for pages/components which fetch data
 
-Next.js page files can contain imports to modules meant to run in a node environment (for use in data fetching functions). If you import from a Next.js page file containing those node module imports in your stories, your Storybook's Webpack will crash because those modules will not run in a browser. To get around this, you can extract the component in your page file into a separate file and import that component in your stories. Or, if that's not feasible for some reason, you can [polyfill those modules](https://webpack.js.org/configuration/node/) in your Storybook's [`webpackFinal` configuration](https://storybook.js.org/docs/react/builders/webpack#extending-storybooks-webpack-config).
+Next.js page files can contain imports to modules meant to run in a node environment (for use in data fetching functions). If you import from a Next.js page file containing those node module imports in your stories, your Storybook's Webpack will crash because those modules will not run in a browser. To get around this, you can extract the component in your page file into a separate file and import that pure component in your stories. Or, if that's not feasible for some reason, you can [polyfill those modules](https://webpack.js.org/configuration/node/) in your Storybook's [`webpackFinal` configuration](https://storybook.js.org/docs/react/builders/webpack#extending-storybooks-webpack-config).
 
 **Before**
 
@@ -713,9 +731,10 @@ Next.js page files can contain imports to modules meant to run in a node environ
 // ./pages/my-page.jsx
 import fs from 'fs';
 
-export default MyPage = (props) => (
-  // ...
-);
+// Using this component in your stories will break the Storybook build
+export default function Page(props) {
+  return; // ...
+}
 
 export const getStaticProps = async () => {
   // Logic that uses `fs`
@@ -728,15 +747,57 @@ export const getStaticProps = async () => {
 // ./pages/my-page.jsx
 import fs from 'fs';
 
+// Use this pure component in your stories instead
 import MyPage from 'components/MyPage';
 
-export default MyPage;
+export default function Page(props) {
+  return <MyPage {...props} />;
+}
 
 export const getStaticProps = async () => {
   // Logic that uses `fs`
 };
 ```
 
+Starting with Next.js 13, you can also fetch data directly within server components in the `app` directory. This does not (currently) work within Storybook for similar reasons as above. It can be worked around similarly as well, by extracting a pure component to a separate file and importing that component in your stories.
+
+**Before**
+
+```jsx
+// ./app/my-page/index.jsx
+async function getData() {
+  const res = await fetch(...);
+  // ...
+}
+
+// Using this component in your stories will break the Storybook build
+export default async function Page() {
+  const data = await getData();
+
+  return // ...
+}
+```
+
+**After**
+
+```jsx
+// ./app/my-page/index.jsx
+
+// Use this component in your stories
+import MyPage from './components/MyPage';
+
+async function getData() {
+  const res = await fetch(...);
+  // ...
+}
+
+export default async function Page() {
+  const data = await getData();
+
+  return <MyPage {...data} />;
+}
+```
+
 #### Statically imported images won't load
 
 Make sure you are treating image imports the same way you treat them when using `next/image` in normal development.

package/dist/preset.d.ts

@@ -1020,7 +1020,7 @@ interface StorybookConfig {
     /**
      * References external Storybooks
      */
-    refs?: CoreCommon_StorybookRefs | ((config: any, options: Options) => CoreCommon_StorybookRefs);
+    refs?: PresetValue<CoreCommon_StorybookRefs>;
     /**
      * Modify or return babel config.
      */
@@ -1034,15 +1034,15 @@ interface StorybookConfig {
      *
      * @deprecated use `previewAnnotations` or `/preview.js` file instead
      */
-    config?: (entries: Entry[], options: Options) => Entry[];
+    config?: PresetValue<Entry[]>;
     /**
      * Add additional scripts to run in the preview a la `.storybook/preview.js`
      */
-    previewAnnotations?: (entries: Entry[], options: Options) => Entry[];
+    previewAnnotations?: PresetValue<Entry[]>;
     /**
      * Process CSF files for the story index.
      */
-    storyIndexers?: (indexers: StoryIndexer[], options: Options) => StoryIndexer[];
+    storyIndexers?: PresetValue<StoryIndexer[]>;
     /**
      * Docs related features in index generation
      */
@@ -1052,9 +1052,10 @@ interface StorybookConfig {
      * The previewHead and previewBody functions accept a string,
      * which is the existing head/body, and return a modified string.
      */
-    previewHead?: (head: string, options: Options) => string;
-    previewBody?: (body: string, options: Options) => string;
+    previewHead?: PresetValue<string>;
+    previewBody?: PresetValue<string>;
 }
+type PresetValue<T> = T | ((config: T, options: Options) => T | Promise<T>);
 type PresetProperty<K, TStorybookConfig = StorybookConfig> = TStorybookConfig[K extends keyof TStorybookConfig ? K : never] | PresetPropertyFn<K, TStorybookConfig>;
 type PresetPropertyFn<K, TStorybookConfig = StorybookConfig, TOptions = {}> = (config: TStorybookConfig[K extends keyof TStorybookConfig ? K : never], options: Options & TOptions) => TStorybookConfig[K extends keyof TStorybookConfig ? K : never] | Promise<TStorybookConfig[K extends keyof TStorybookConfig ? K : never]>;
 

package/dist/preset.js

@@ -1,5 +1,5 @@
-"use strict";var Z=Object.create;var x=Object.defineProperty;var ee=Object.getOwnPropertyDescriptor;var oe=Object.getOwnPropertyNames;var te=Object.getPrototypeOf,re=Object.prototype.hasOwnProperty;var se=(e,t)=>{for(var o in t)x(e,o,{get:t[o],enumerable:!0})},h=(e,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of oe(t))!re.call(e,s)&&s!==o&&x(e,s,{get:()=>t[s],enumerable:!(r=ee(t,s))||r.enumerable});return e};var i=(e,t,o)=>(o=e!=null?Z(te(e)):{},h(t||!e||!e.__esModule?x(o,"default",{value:e,enumerable:!0}):o,e)),ie=e=>h(x({},"__esModule",{value:!0}),e);var ye={};se(ye,{addons:()=>me,babel:()=>de,config:()=>ue,core:()=>ge,frameworkOptions:()=>le,webpackFinal:()=>xe});module.exports=ie(ye);var c=require("path"),Q=require("@babel/core"),Y=require("@storybook/core-common");var b=i(require("semver")),A=require("webpack");var k=i(require("path")),R=require("webpack"),j=require("next/constants"),P=i(require("find-up")),E=require("fs-extra"),I=i(require("ts-dedent")),S=require("url"),O=e=>{var t;(t=e.plugins)==null||t.push(new R.DefinePlugin({"process.env.__NEXT_VERSION":JSON.stringify(f())}))},f=()=>require(y("next/package.json")).version,ne=async e=>["mjs","js"].reduce(async(o,r)=>(await o||(o=(0,P.default)(`next.config.${r}`,{cwd:e})),o),Promise.resolve(void 0)),_=async({baseConfig:e={},nextConfigPath:t,configDir:o})=>{let r=t||await ne(o);if(!r||await(0,E.pathExists)(r)===!1)throw new Error(I.default`
+"use strict";var Z=Object.create;var x=Object.defineProperty;var ee=Object.getOwnPropertyDescriptor;var oe=Object.getOwnPropertyNames;var te=Object.getPrototypeOf,re=Object.prototype.hasOwnProperty;var se=(e,t)=>{for(var o in t)x(e,o,{get:t[o],enumerable:!0})},h=(e,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of oe(t))!re.call(e,s)&&s!==o&&x(e,s,{get:()=>t[s],enumerable:!(r=ee(t,s))||r.enumerable});return e};var n=(e,t,o)=>(o=e!=null?Z(te(e)):{},h(t||!e||!e.__esModule?x(o,"default",{value:e,enumerable:!0}):o,e)),ie=e=>h(x({},"__esModule",{value:!0}),e);var ye={};se(ye,{addons:()=>me,babel:()=>de,config:()=>ue,core:()=>ge,frameworkOptions:()=>le,webpackFinal:()=>xe});module.exports=ie(ye);var c=require("path"),Q=require("@babel/core"),Y=require("@storybook/core-common");var b=n(require("semver")),V=require("webpack");var k=n(require("path")),R=require("webpack"),j=require("next/constants"),P=n(require("find-up")),E=require("fs-extra"),S=n(require("ts-dedent")),I=require("url"),O=e=>{var t;(t=e.plugins)==null||t.push(new R.DefinePlugin({"process.env.__NEXT_VERSION":JSON.stringify(f())}))},f=()=>require(y("next/package.json")).version,ne=async e=>["mjs","js"].reduce(async(o,r)=>(await o||(o=(0,P.default)(`next.config.${r}`,{cwd:e})),o),Promise.resolve(void 0)),_=async({baseConfig:e={},nextConfigPath:t,configDir:o})=>{let r=t||await ne(o);if(!r||await(0,E.pathExists)(r)===!1)throw new Error(S.default`
         Could not find or resolve your Next config file. Please provide the next config file path as a framework option.
 
         More info: https://github.com/storybookjs/storybook/blob/next/code/frameworks/nextjs/README.md#options
-      `);let s=await import((0,S.pathToFileURL)(r).href),p=typeof s=="function"?s(j.PHASE_DEVELOPMENT_SERVER,{defaultConfig:e}):s;return p.default||p},n=(e,t,o)=>{e.resolve??={},e.resolve.alias??={};let r=e.resolve.alias,s=y(`${o??t}`);Array.isArray(r)?r.push({name:t,alias:s}):r[t]=s},y=e=>{let t=require.resolve(e,{paths:[k.default.resolve()]}),r=t.lastIndexOf(e.replace(/\//g,k.default.sep))+e.length;return t.substring(0,r)};var V=async({baseConfig:e,nextConfigPath:t,configDir:o})=>{let r=await _({baseConfig:e,nextConfigPath:t,configDir:o});return n(e,"next/config"),pe(e,r),r},W=f(),pe=(e,t)=>{var s,p;let o={"process.env.__NEXT_RUNTIME_CONFIG":JSON.stringify({serverRuntimeConfig:{},publicRuntimeConfig:t.publicRuntimeConfig})},r=(s=t.experimental)==null?void 0:s.newNextLinkBehavior;b.default.gte(W,"13.0.0")&&b.default.lt(W,"13.0.6")&&r!==!1?o["process.env.__NEXT_NEW_LINK_BEHAVIOR"]=!0:o["process.env.__NEXT_NEW_LINK_BEHAVIOR"]=r,(p=e.plugins)==null||p.push(new A.DefinePlugin(o))};var v=require("next/dist/build/webpack/config/blocks/css/loaders/getCssModuleLocalIdent"),w=require("next/dist/build/webpack/config/blocks/css/loaders/file-resolve"),q=i(require("semver"));var T=(e,t)=>{var r,s,p;let o=(r=e.module)==null?void 0:r.rules;o==null||o.forEach((m,l)=>{typeof m!="string"&&m.test instanceof RegExp&&m.test.test("test.css")&&(o[l]={test:/\.css$/,use:["style-loader",{loader:"css-loader",options:{importLoaders:1,...F(t),modules:{auto:!0,getLocalIdent:v.getCssModuleLocalIdent}}},"postcss-loader"]})}),o==null||o.push({test:/\.(scss|sass)$/,use:["style-loader",{loader:"css-loader",options:{importLoaders:3,...F(t),modules:{auto:!0,getLocalIdent:v.getCssModuleLocalIdent}}},"postcss-loader","resolve-url-loader",{loader:"sass-loader",options:{sourceMap:!0,sassOptions:t.sassOptions,additionalData:((s=t.sassOptions)==null?void 0:s.prependData)||((p=t.sassOptions)==null?void 0:p.additionalData)}}]})},F=e=>ae()?{url:{filter:L(e)},import:{filter:$(e)}}:{url:L(e),import:$(e)},L=e=>(t,o)=>{var r;return(0,w.cssFileResolve)(t,o,(r=e.experimental)==null?void 0:r.urlImports)},$=e=>(t,o,r)=>{var s;return(0,w.cssFileResolve)(typeof t=="string"?t:t.url,r,(s=e.experimental)==null?void 0:s.urlImports)},ae=()=>{try{let e=require(y("css-loader/package.json")).version;return q.default.gte(e,"6.0.0")}catch{return!1}};var D=i(require("tsconfig-paths-webpack-plugin")),M=require("tsconfig-paths"),B=e=>{let t=(0,M.loadConfig)();t.resultType==="failed"||!t.baseUrl||(e.resolve??={},e.resolve.plugins??=[],e.resolve.plugins.push(new D.default({configFile:t.configFileAbsolutePath,extensions:[".js",".jsx",".ts",".tsx"]})))};var U=i(require("semver"));var J=e=>{let t=fe();n(e,t)},fe=()=>{let e=f();return U.default.gte(e,"11.1.0")?"next/dist/shared/lib/router-context":"next/dist/next-server/lib/router-context"};var X=i(require("semver"));var H=e=>{let t=f();X.default.gte(t,"12.0.0")?n(e,"styled-jsx"):(n(e,"styled-jsx/babel"),n(e,"styled-jsx/css"),n(e,"styled-jsx/macro"),n(e,"styled-jsx/server"),n(e,"styled-jsx/style"),n(e,"styled-jsx/webpack"))};var K=i(require("semver"));var G=e=>{ce(e),n(e,"next/image")},ce=e=>{var s,p,m;let t=f();if(K.default.lt(t,"11.0.0"))return;let o=(s=e.module)==null?void 0:s.rules,r=o==null?void 0:o.find(l=>typeof l!="string"&&l.test instanceof RegExp&&l.test.test("test.jpg"));!r||(r.test=/\.(apng|eot|otf|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/,o==null||o.push({test:/\.(png|jpg|jpeg|gif|webp|avif|ico|bmp|svg)$/i,issuer:{not:/\.(css|scss|sass)$/},use:[{loader:require.resolve("@storybook/nextjs/next-image-loader-stub.js"),options:{filename:(p=r.generator)==null?void 0:p.filename}}]}),o==null||o.push({test:/\.(png|jpg|jpeg|gif|webp|avif|ico|bmp|svg)$/i,issuer:/\.(css|scss|sass)$/,type:"asset/resource",generator:{filename:(m=r.generator)==null?void 0:m.filename}}))};var u=i(require("semver")),d=require("webpack");function z(e){let t=f(),o=u.default.satisfies(t,"~12"),r=u.default.satisfies(t,"~13"),s=u.default.lt(t,"13.0.0");e.plugins=e.plugins??[],r||e.plugins.push(new d.IgnorePlugin({resourceRegExp:/next\/legacy\/image$/})),o||e.plugins.push(new d.IgnorePlugin({resourceRegExp:/next\/future\/image$/})),s&&e.plugins.push(new d.IgnorePlugin({resourceRegExp:/next\/dist\/shared\/lib\/hooks-client-context$/})),u.default.lt(t,"12.2.0")&&e.plugins.push(new d.IgnorePlugin({resourceRegExp:/next\/dist\/shared\/lib\/app-router-context$/}))}var me=[(0,c.dirname)(require.resolve((0,c.join)("@storybook/preset-react-webpack","package.json"))),(0,c.dirname)(require.resolve((0,c.join)("@storybook/builder-webpack5","package.json")))],C={},le=async(e,t)=>{let o=await t.presets.apply("framework");return typeof o=="string"?{name:o,options:C}:typeof o>"u"?{name:require.resolve("@storybook/nextjs"),options:C}:{name:o.name,options:{...C,...o.options}}},ge=async(e,t)=>{let o=await t.presets.apply("framework");return{...e,builder:{name:(0,c.dirname)(require.resolve((0,c.join)("@storybook/builder-webpack5","package.json"))),options:typeof o=="string"?{}:o.options.builder||{}},renderer:(0,c.dirname)(require.resolve((0,c.join)("@storybook/react","package.json")))}},ue=(e=[])=>[...e,require.resolve("@storybook/nextjs/preview.js")],de=async e=>{var m,l,N;let t=(0,Q.loadPartialConfig)({...e,filename:`${(0,Y.getProjectRoot)()}/__fake__.js`}),o=t==null?void 0:t.options,r=a=>typeof a=="object"&&a!==null&&"file"in a;((m=o==null?void 0:o.presets)==null?void 0:m.find(a=>{var g;return Array.isArray(a)&&a[0]==="next/babel"||a==="next/babel"||r(a)&&((g=a.file)==null?void 0:g.request)==="next/babel"}))||(l=o==null?void 0:o.presets)==null||l.push("next/babel");let p=(N=o==null?void 0:o.presets)==null?void 0:N.filter(a=>{var g;return!(r(a)&&((g=a.file)==null?void 0:g.request)===require.resolve("@babel/preset-react"))});return{...o,presets:p,babelrc:!1,configFile:!1}},xe=async(e,t)=>{let o=await t.presets.apply("frameworkOptions"),{options:{nextConfigPath:r}={}}=o,s=await V({baseConfig:e,nextConfigPath:r,configDir:t.configDir});return z(e),O(e),B(e),T(e,s),G(e),J(e),H(e),e};0&&(module.exports={addons,babel,config,core,frameworkOptions,webpackFinal});
+      `);let s=await import((0,I.pathToFileURL)(r).href),i=typeof s=="function"?s(j.PHASE_DEVELOPMENT_SERVER,{defaultConfig:e}):s;return i.default||i},p=(e,t,o)=>{e.resolve??={},e.resolve.alias??={};let r=e.resolve.alias,s=y(`${o??t}`);Array.isArray(r)?r.push({name:t,alias:s}):r[t]=s},y=e=>{let t=require.resolve(e,{paths:[k.default.resolve()]}),r=t.lastIndexOf(e.replace(/\//g,k.default.sep))+e.length;return t.substring(0,r)};var A=async({baseConfig:e,nextConfigPath:t,configDir:o})=>{let r=await _({baseConfig:e,nextConfigPath:t,configDir:o});return p(e,"next/config"),pe(e,r),r},W=f(),pe=(e,t)=>{var s,i;let o={"process.env.__NEXT_RUNTIME_CONFIG":JSON.stringify({serverRuntimeConfig:{},publicRuntimeConfig:t.publicRuntimeConfig})},r=(s=t.experimental)==null?void 0:s.newNextLinkBehavior;b.default.gte(W,"13.0.0")&&b.default.lt(W,"13.0.6")&&r!==!1?o["process.env.__NEXT_NEW_LINK_BEHAVIOR"]=!0:o["process.env.__NEXT_NEW_LINK_BEHAVIOR"]=r,(i=e.plugins)==null||i.push(new V.DefinePlugin(o))};var v=require("next/dist/build/webpack/config/blocks/css/loaders/getCssModuleLocalIdent"),w=require("next/dist/build/webpack/config/blocks/css/loaders/file-resolve"),$=n(require("semver"));var q=(e,t)=>{var r,s,i;let o=(r=e.module)==null?void 0:r.rules;o==null||o.forEach((m,l)=>{typeof m!="string"&&m.test instanceof RegExp&&m.test.test("test.css")&&(o[l]={test:/\.css$/,use:["style-loader",{loader:"css-loader",options:{importLoaders:1,...F(t),modules:{auto:!0,getLocalIdent:v.getCssModuleLocalIdent}}},"postcss-loader"]})}),o==null||o.push({test:/\.(scss|sass)$/,use:["style-loader",{loader:"css-loader",options:{importLoaders:3,...F(t),modules:{auto:!0,getLocalIdent:v.getCssModuleLocalIdent}}},"postcss-loader","resolve-url-loader",{loader:"sass-loader",options:{sourceMap:!0,sassOptions:t.sassOptions,additionalData:((s=t.sassOptions)==null?void 0:s.prependData)||((i=t.sassOptions)==null?void 0:i.additionalData)}}]})},F=e=>ae()?{url:{filter:L(e)},import:{filter:T(e)}}:{url:L(e),import:T(e)},L=e=>(t,o)=>{var r;return(0,w.cssFileResolve)(t,o,(r=e.experimental)==null?void 0:r.urlImports)},T=e=>(t,o,r)=>{var s;return(0,w.cssFileResolve)(typeof t=="string"?t:t.url,r,(s=e.experimental)==null?void 0:s.urlImports)},ae=()=>{try{let e=require(y("css-loader/package.json")).version;return $.default.gte(e,"6.0.0")}catch{return!1}};var D=n(require("tsconfig-paths-webpack-plugin")),M=require("tsconfig-paths"),B=e=>{let t=(0,M.loadConfig)();t.resultType==="failed"||!t.baseUrl||(e.resolve??={},e.resolve.plugins??=[],e.resolve.plugins.push(new D.default({configFile:t.configFileAbsolutePath,extensions:[".js",".jsx",".ts",".tsx"]})))};var U=n(require("semver"));var J=e=>{let t=fe();p(e,t)},fe=()=>{let e=f();return U.default.gte(e,"11.1.0")?"next/dist/shared/lib/router-context":"next/dist/next-server/lib/router-context"};var X=n(require("semver"));var H=e=>{let t=f();X.default.gte(t,"12.0.0")?p(e,"styled-jsx"):(p(e,"styled-jsx/babel"),p(e,"styled-jsx/css"),p(e,"styled-jsx/macro"),p(e,"styled-jsx/server"),p(e,"styled-jsx/style"),p(e,"styled-jsx/webpack"))};var K=n(require("semver"));var G=e=>{ce(e),p(e,"next/image")},ce=e=>{var s,i,m;let t=f();if(K.default.lt(t,"11.0.0"))return;let o=(s=e.module)==null?void 0:s.rules,r=o==null?void 0:o.find(l=>typeof l!="string"&&l.test instanceof RegExp&&l.test.test("test.jpg"));!r||(r.test=/\.(apng|eot|otf|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/,o==null||o.push({test:/\.(png|jpg|jpeg|gif|webp|avif|ico|bmp|svg)$/i,issuer:{not:/\.(css|scss|sass)$/},use:[{loader:require.resolve("@storybook/nextjs/next-image-loader-stub.js"),options:{filename:(i=r.generator)==null?void 0:i.filename}}]}),o==null||o.push({test:/\.(png|jpg|jpeg|gif|webp|avif|ico|bmp|svg)$/i,issuer:/\.(css|scss|sass)$/,type:"asset/resource",generator:{filename:(m=r.generator)==null?void 0:m.filename}}))};var u=n(require("semver")),d=require("webpack");function z(e){let t=f(),o=u.default.satisfies(t,"~12"),r=u.default.satisfies(t,"~13"),s=u.default.lt(t,"12.2.0"),i=u.default.lt(t,"13.0.0");e.plugins=e.plugins??[],r||e.plugins.push(new d.IgnorePlugin({resourceRegExp:/next\/legacy\/image$/})),(!o||s)&&e.plugins.push(new d.IgnorePlugin({resourceRegExp:/next\/future\/image$/})),i&&e.plugins.push(new d.IgnorePlugin({resourceRegExp:/next\/dist\/shared\/lib\/hooks-client-context$/})),s&&e.plugins.push(new d.IgnorePlugin({resourceRegExp:/next\/dist\/shared\/lib\/app-router-context$/}))}var me=[(0,c.dirname)(require.resolve((0,c.join)("@storybook/preset-react-webpack","package.json"))),(0,c.dirname)(require.resolve((0,c.join)("@storybook/builder-webpack5","package.json")))],C={},le=async(e,t)=>{let o=await t.presets.apply("framework");return typeof o=="string"?{name:o,options:C}:typeof o>"u"?{name:require.resolve("@storybook/nextjs"),options:C}:{name:o.name,options:{...C,...o.options}}},ge=async(e,t)=>{let o=await t.presets.apply("framework");return{...e,builder:{name:(0,c.dirname)(require.resolve((0,c.join)("@storybook/builder-webpack5","package.json"))),options:typeof o=="string"?{}:o.options.builder||{}},renderer:(0,c.dirname)(require.resolve((0,c.join)("@storybook/react","package.json")))}},ue=(e=[])=>[...e,require.resolve("@storybook/nextjs/preview.js")],de=async e=>{var m,l,N;let t=(0,Q.loadPartialConfig)({...e,filename:`${(0,Y.getProjectRoot)()}/__fake__.js`}),o=t==null?void 0:t.options,r=a=>typeof a=="object"&&a!==null&&"file"in a;((m=o==null?void 0:o.presets)==null?void 0:m.find(a=>{var g;return Array.isArray(a)&&a[0]==="next/babel"||a==="next/babel"||r(a)&&((g=a.file)==null?void 0:g.request)==="next/babel"}))||(l=o==null?void 0:o.presets)==null||l.push("next/babel");let i=(N=o==null?void 0:o.presets)==null?void 0:N.filter(a=>{var g;return!(r(a)&&((g=a.file)==null?void 0:g.request)===require.resolve("@babel/preset-react"))});return{...o,presets:i,babelrc:!1,configFile:!1}},xe=async(e,t)=>{let o=await t.presets.apply("frameworkOptions"),{options:{nextConfigPath:r}={}}=o,s=await A({baseConfig:e,nextConfigPath:r,configDir:t.configDir});return z(e),O(e),B(e),q(e,s),G(e),J(e),H(e),e};0&&(module.exports={addons,babel,config,core,frameworkOptions,webpackFinal});

package/dist/preset.mjs

@@ -2,4 +2,4 @@ import{__require}from"./chunk-LAHENP5R.mjs";import{dirname,join}from"path";impor
         Could not find or resolve your Next config file. Please provide the next config file path as a framework option.
 
         More info: https://github.com/storybookjs/storybook/blob/next/code/frameworks/nextjs/README.md#options
-      `);let nextConfigExport=await import(pathToFileURL(nextConfigFile).href),nextConfig=typeof nextConfigExport=="function"?nextConfigExport(PHASE_DEVELOPMENT_SERVER,{defaultConfig:baseConfig}):nextConfigExport;return nextConfig.default||nextConfig},addScopedAlias=(baseConfig,name,alias)=>{baseConfig.resolve??={},baseConfig.resolve.alias??={};let aliasConfig=baseConfig.resolve.alias,scopedAlias=scopedResolve(`${alias??name}`);Array.isArray(aliasConfig)?aliasConfig.push({name,alias:scopedAlias}):aliasConfig[name]=scopedAlias},scopedResolve=id=>{let scopedModulePath=__require.resolve(id,{paths:[path.resolve()]}),beginningOfMainScriptPath=scopedModulePath.lastIndexOf(id.replace(/\//g,path.sep))+id.length;return scopedModulePath.substring(0,beginningOfMainScriptPath)};var configureConfig=async({baseConfig,nextConfigPath,configDir})=>{let nextConfig=await resolveNextConfig({baseConfig,nextConfigPath,configDir});return addScopedAlias(baseConfig,"next/config"),setupRuntimeConfig(baseConfig,nextConfig),nextConfig},version=getNextjsVersion(),setupRuntimeConfig=(baseConfig,nextConfig)=>{let definePluginConfig={"process.env.__NEXT_RUNTIME_CONFIG":JSON.stringify({serverRuntimeConfig:{},publicRuntimeConfig:nextConfig.publicRuntimeConfig})},newNextLinkBehavior=nextConfig.experimental?.newNextLinkBehavior;semver.gte(version,"13.0.0")&&semver.lt(version,"13.0.6")&&newNextLinkBehavior!==!1?definePluginConfig["process.env.__NEXT_NEW_LINK_BEHAVIOR"]=!0:definePluginConfig["process.env.__NEXT_NEW_LINK_BEHAVIOR"]=newNextLinkBehavior,baseConfig.plugins?.push(new DefinePlugin2(definePluginConfig))};import{getCssModuleLocalIdent}from"next/dist/build/webpack/config/blocks/css/loaders/getCssModuleLocalIdent";import{cssFileResolve}from"next/dist/build/webpack/config/blocks/css/loaders/file-resolve";import semver2 from"semver";var configureCss=(baseConfig,nextConfig)=>{let rules=baseConfig.module?.rules;rules?.forEach((rule,i)=>{typeof rule!="string"&&rule.test instanceof RegExp&&rule.test.test("test.css")&&(rules[i]={test:/\.css$/,use:["style-loader",{loader:"css-loader",options:{importLoaders:1,...getImportAndUrlCssLoaderOptions(nextConfig),modules:{auto:!0,getLocalIdent:getCssModuleLocalIdent}}},"postcss-loader"]})}),rules?.push({test:/\.(scss|sass)$/,use:["style-loader",{loader:"css-loader",options:{importLoaders:3,...getImportAndUrlCssLoaderOptions(nextConfig),modules:{auto:!0,getLocalIdent:getCssModuleLocalIdent}}},"postcss-loader","resolve-url-loader",{loader:"sass-loader",options:{sourceMap:!0,sassOptions:nextConfig.sassOptions,additionalData:nextConfig.sassOptions?.prependData||nextConfig.sassOptions?.additionalData}}]})},getImportAndUrlCssLoaderOptions=nextConfig=>isCssLoaderV6()?{url:{filter:getUrlResolver(nextConfig)},import:{filter:getImportResolver(nextConfig)}}:{url:getUrlResolver(nextConfig),import:getImportResolver(nextConfig)},getUrlResolver=nextConfig=>(url,resourcePath)=>cssFileResolve(url,resourcePath,nextConfig.experimental?.urlImports),getImportResolver=nextConfig=>(url,_,resourcePath)=>cssFileResolve(typeof url=="string"?url:url.url,resourcePath,nextConfig.experimental?.urlImports),isCssLoaderV6=()=>{try{let cssLoaderVersion=__require(scopedResolve("css-loader/package.json")).version;return semver2.gte(cssLoaderVersion,"6.0.0")}catch{return!1}};import TsconfigPathsPlugin from"tsconfig-paths-webpack-plugin";import{loadConfig}from"tsconfig-paths";var configureImports=baseConfig=>{let configLoadResult=loadConfig();configLoadResult.resultType==="failed"||!configLoadResult.baseUrl||(baseConfig.resolve??={},baseConfig.resolve.plugins??=[],baseConfig.resolve.plugins.push(new TsconfigPathsPlugin({configFile:configLoadResult.configFileAbsolutePath,extensions:[".js",".jsx",".ts",".tsx"]})))};import semver3 from"semver";var configureRouting=baseConfig=>{let routerContextPath=getRouterContextPath();addScopedAlias(baseConfig,routerContextPath)},getRouterContextPath=()=>{let version2=getNextjsVersion();return semver3.gte(version2,"11.1.0")?"next/dist/shared/lib/router-context":"next/dist/next-server/lib/router-context"};import semver4 from"semver";var configureStyledJsx=baseConfig=>{let version2=getNextjsVersion();semver4.gte(version2,"12.0.0")?addScopedAlias(baseConfig,"styled-jsx"):(addScopedAlias(baseConfig,"styled-jsx/babel"),addScopedAlias(baseConfig,"styled-jsx/css"),addScopedAlias(baseConfig,"styled-jsx/macro"),addScopedAlias(baseConfig,"styled-jsx/server"),addScopedAlias(baseConfig,"styled-jsx/style"),addScopedAlias(baseConfig,"styled-jsx/webpack"))};import semver5 from"semver";var configureImages=baseConfig=>{configureStaticImageImport(baseConfig),addScopedAlias(baseConfig,"next/image")},configureStaticImageImport=baseConfig=>{let version2=getNextjsVersion();if(semver5.lt(version2,"11.0.0"))return;let rules=baseConfig.module?.rules,assetRule=rules?.find(rule=>typeof rule!="string"&&rule.test instanceof RegExp&&rule.test.test("test.jpg"));!assetRule||(assetRule.test=/\.(apng|eot|otf|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/,rules?.push({test:/\.(png|jpg|jpeg|gif|webp|avif|ico|bmp|svg)$/i,issuer:{not:/\.(css|scss|sass)$/},use:[{loader:__require.resolve("@storybook/nextjs/next-image-loader-stub.js"),options:{filename:assetRule.generator?.filename}}]}),rules?.push({test:/\.(png|jpg|jpeg|gif|webp|avif|ico|bmp|svg)$/i,issuer:/\.(css|scss|sass)$/,type:"asset/resource",generator:{filename:assetRule.generator?.filename}}))};import semver6 from"semver";import{IgnorePlugin}from"webpack";function configureNextImport(baseConfig){let nextJSVersion=getNextjsVersion(),isNext12=semver6.satisfies(nextJSVersion,"~12"),isNext13=semver6.satisfies(nextJSVersion,"~13"),isNextVersionSmallerThan13=semver6.lt(nextJSVersion,"13.0.0");baseConfig.plugins=baseConfig.plugins??[],isNext13||baseConfig.plugins.push(new IgnorePlugin({resourceRegExp:/next\/legacy\/image$/})),isNext12||baseConfig.plugins.push(new IgnorePlugin({resourceRegExp:/next\/future\/image$/})),isNextVersionSmallerThan13&&baseConfig.plugins.push(new IgnorePlugin({resourceRegExp:/next\/dist\/shared\/lib\/hooks-client-context$/})),semver6.lt(nextJSVersion,"12.2.0")&&baseConfig.plugins.push(new IgnorePlugin({resourceRegExp:/next\/dist\/shared\/lib\/app-router-context$/}))}var addons=[dirname(__require.resolve(join("@storybook/preset-react-webpack","package.json"))),dirname(__require.resolve(join("@storybook/builder-webpack5","package.json")))],defaultFrameworkOptions={},frameworkOptions=async(_,options)=>{let config2=await options.presets.apply("framework");return typeof config2=="string"?{name:config2,options:defaultFrameworkOptions}:typeof config2>"u"?{name:__require.resolve("@storybook/nextjs"),options:defaultFrameworkOptions}:{name:config2.name,options:{...defaultFrameworkOptions,...config2.options}}},core=async(config2,options)=>{let framework=await options.presets.apply("framework");return{...config2,builder:{name:dirname(__require.resolve(join("@storybook/builder-webpack5","package.json"))),options:typeof framework=="string"?{}:framework.options.builder||{}},renderer:dirname(__require.resolve(join("@storybook/react","package.json")))}},config=(entry=[])=>[...entry,__require.resolve("@storybook/nextjs/preview.js")],babel=async baseConfig=>{let options=loadPartialConfig({...baseConfig,filename:`${getProjectRoot()}/__fake__.js`})?.options,isPresetConfigItem=preset=>typeof preset=="object"&&preset!==null&&"file"in preset;options?.presets?.find(preset=>Array.isArray(preset)&&preset[0]==="next/babel"||preset==="next/babel"||isPresetConfigItem(preset)&&preset.file?.request==="next/babel")||options?.presets?.push("next/babel");let presets=options?.presets?.filter(preset=>!(isPresetConfigItem(preset)&&preset.file?.request===__require.resolve("@babel/preset-react")));return{...options,presets,babelrc:!1,configFile:!1}},webpackFinal=async(baseConfig,options)=>{let frameworkOptions2=await options.presets.apply("frameworkOptions"),{options:{nextConfigPath}={}}=frameworkOptions2,nextConfig=await configureConfig({baseConfig,nextConfigPath,configDir:options.configDir});return configureNextImport(baseConfig),configureRuntimeNextjsVersionResolution(baseConfig),configureImports(baseConfig),configureCss(baseConfig,nextConfig),configureImages(baseConfig),configureRouting(baseConfig),configureStyledJsx(baseConfig),baseConfig};export{addons,babel,config,core,frameworkOptions,webpackFinal};
+      `);let nextConfigExport=await import(pathToFileURL(nextConfigFile).href),nextConfig=typeof nextConfigExport=="function"?nextConfigExport(PHASE_DEVELOPMENT_SERVER,{defaultConfig:baseConfig}):nextConfigExport;return nextConfig.default||nextConfig},addScopedAlias=(baseConfig,name,alias)=>{baseConfig.resolve??={},baseConfig.resolve.alias??={};let aliasConfig=baseConfig.resolve.alias,scopedAlias=scopedResolve(`${alias??name}`);Array.isArray(aliasConfig)?aliasConfig.push({name,alias:scopedAlias}):aliasConfig[name]=scopedAlias},scopedResolve=id=>{let scopedModulePath=__require.resolve(id,{paths:[path.resolve()]}),beginningOfMainScriptPath=scopedModulePath.lastIndexOf(id.replace(/\//g,path.sep))+id.length;return scopedModulePath.substring(0,beginningOfMainScriptPath)};var configureConfig=async({baseConfig,nextConfigPath,configDir})=>{let nextConfig=await resolveNextConfig({baseConfig,nextConfigPath,configDir});return addScopedAlias(baseConfig,"next/config"),setupRuntimeConfig(baseConfig,nextConfig),nextConfig},version=getNextjsVersion(),setupRuntimeConfig=(baseConfig,nextConfig)=>{let definePluginConfig={"process.env.__NEXT_RUNTIME_CONFIG":JSON.stringify({serverRuntimeConfig:{},publicRuntimeConfig:nextConfig.publicRuntimeConfig})},newNextLinkBehavior=nextConfig.experimental?.newNextLinkBehavior;semver.gte(version,"13.0.0")&&semver.lt(version,"13.0.6")&&newNextLinkBehavior!==!1?definePluginConfig["process.env.__NEXT_NEW_LINK_BEHAVIOR"]=!0:definePluginConfig["process.env.__NEXT_NEW_LINK_BEHAVIOR"]=newNextLinkBehavior,baseConfig.plugins?.push(new DefinePlugin2(definePluginConfig))};import{getCssModuleLocalIdent}from"next/dist/build/webpack/config/blocks/css/loaders/getCssModuleLocalIdent";import{cssFileResolve}from"next/dist/build/webpack/config/blocks/css/loaders/file-resolve";import semver2 from"semver";var configureCss=(baseConfig,nextConfig)=>{let rules=baseConfig.module?.rules;rules?.forEach((rule,i)=>{typeof rule!="string"&&rule.test instanceof RegExp&&rule.test.test("test.css")&&(rules[i]={test:/\.css$/,use:["style-loader",{loader:"css-loader",options:{importLoaders:1,...getImportAndUrlCssLoaderOptions(nextConfig),modules:{auto:!0,getLocalIdent:getCssModuleLocalIdent}}},"postcss-loader"]})}),rules?.push({test:/\.(scss|sass)$/,use:["style-loader",{loader:"css-loader",options:{importLoaders:3,...getImportAndUrlCssLoaderOptions(nextConfig),modules:{auto:!0,getLocalIdent:getCssModuleLocalIdent}}},"postcss-loader","resolve-url-loader",{loader:"sass-loader",options:{sourceMap:!0,sassOptions:nextConfig.sassOptions,additionalData:nextConfig.sassOptions?.prependData||nextConfig.sassOptions?.additionalData}}]})},getImportAndUrlCssLoaderOptions=nextConfig=>isCssLoaderV6()?{url:{filter:getUrlResolver(nextConfig)},import:{filter:getImportResolver(nextConfig)}}:{url:getUrlResolver(nextConfig),import:getImportResolver(nextConfig)},getUrlResolver=nextConfig=>(url,resourcePath)=>cssFileResolve(url,resourcePath,nextConfig.experimental?.urlImports),getImportResolver=nextConfig=>(url,_,resourcePath)=>cssFileResolve(typeof url=="string"?url:url.url,resourcePath,nextConfig.experimental?.urlImports),isCssLoaderV6=()=>{try{let cssLoaderVersion=__require(scopedResolve("css-loader/package.json")).version;return semver2.gte(cssLoaderVersion,"6.0.0")}catch{return!1}};import TsconfigPathsPlugin from"tsconfig-paths-webpack-plugin";import{loadConfig}from"tsconfig-paths";var configureImports=baseConfig=>{let configLoadResult=loadConfig();configLoadResult.resultType==="failed"||!configLoadResult.baseUrl||(baseConfig.resolve??={},baseConfig.resolve.plugins??=[],baseConfig.resolve.plugins.push(new TsconfigPathsPlugin({configFile:configLoadResult.configFileAbsolutePath,extensions:[".js",".jsx",".ts",".tsx"]})))};import semver3 from"semver";var configureRouting=baseConfig=>{let routerContextPath=getRouterContextPath();addScopedAlias(baseConfig,routerContextPath)},getRouterContextPath=()=>{let version2=getNextjsVersion();return semver3.gte(version2,"11.1.0")?"next/dist/shared/lib/router-context":"next/dist/next-server/lib/router-context"};import semver4 from"semver";var configureStyledJsx=baseConfig=>{let version2=getNextjsVersion();semver4.gte(version2,"12.0.0")?addScopedAlias(baseConfig,"styled-jsx"):(addScopedAlias(baseConfig,"styled-jsx/babel"),addScopedAlias(baseConfig,"styled-jsx/css"),addScopedAlias(baseConfig,"styled-jsx/macro"),addScopedAlias(baseConfig,"styled-jsx/server"),addScopedAlias(baseConfig,"styled-jsx/style"),addScopedAlias(baseConfig,"styled-jsx/webpack"))};import semver5 from"semver";var configureImages=baseConfig=>{configureStaticImageImport(baseConfig),addScopedAlias(baseConfig,"next/image")},configureStaticImageImport=baseConfig=>{let version2=getNextjsVersion();if(semver5.lt(version2,"11.0.0"))return;let rules=baseConfig.module?.rules,assetRule=rules?.find(rule=>typeof rule!="string"&&rule.test instanceof RegExp&&rule.test.test("test.jpg"));!assetRule||(assetRule.test=/\.(apng|eot|otf|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/,rules?.push({test:/\.(png|jpg|jpeg|gif|webp|avif|ico|bmp|svg)$/i,issuer:{not:/\.(css|scss|sass)$/},use:[{loader:__require.resolve("@storybook/nextjs/next-image-loader-stub.js"),options:{filename:assetRule.generator?.filename}}]}),rules?.push({test:/\.(png|jpg|jpeg|gif|webp|avif|ico|bmp|svg)$/i,issuer:/\.(css|scss|sass)$/,type:"asset/resource",generator:{filename:assetRule.generator?.filename}}))};import semver6 from"semver";import{IgnorePlugin}from"webpack";function configureNextImport(baseConfig){let nextJSVersion=getNextjsVersion(),isNext12=semver6.satisfies(nextJSVersion,"~12"),isNext13=semver6.satisfies(nextJSVersion,"~13"),isNextVersionSmallerThan12dot2=semver6.lt(nextJSVersion,"12.2.0"),isNextVersionSmallerThan13=semver6.lt(nextJSVersion,"13.0.0");baseConfig.plugins=baseConfig.plugins??[],isNext13||baseConfig.plugins.push(new IgnorePlugin({resourceRegExp:/next\/legacy\/image$/})),(!isNext12||isNextVersionSmallerThan12dot2)&&baseConfig.plugins.push(new IgnorePlugin({resourceRegExp:/next\/future\/image$/})),isNextVersionSmallerThan13&&baseConfig.plugins.push(new IgnorePlugin({resourceRegExp:/next\/dist\/shared\/lib\/hooks-client-context$/})),isNextVersionSmallerThan12dot2&&baseConfig.plugins.push(new IgnorePlugin({resourceRegExp:/next\/dist\/shared\/lib\/app-router-context$/}))}var addons=[dirname(__require.resolve(join("@storybook/preset-react-webpack","package.json"))),dirname(__require.resolve(join("@storybook/builder-webpack5","package.json")))],defaultFrameworkOptions={},frameworkOptions=async(_,options)=>{let config2=await options.presets.apply("framework");return typeof config2=="string"?{name:config2,options:defaultFrameworkOptions}:typeof config2>"u"?{name:__require.resolve("@storybook/nextjs"),options:defaultFrameworkOptions}:{name:config2.name,options:{...defaultFrameworkOptions,...config2.options}}},core=async(config2,options)=>{let framework=await options.presets.apply("framework");return{...config2,builder:{name:dirname(__require.resolve(join("@storybook/builder-webpack5","package.json"))),options:typeof framework=="string"?{}:framework.options.builder||{}},renderer:dirname(__require.resolve(join("@storybook/react","package.json")))}},config=(entry=[])=>[...entry,__require.resolve("@storybook/nextjs/preview.js")],babel=async baseConfig=>{let options=loadPartialConfig({...baseConfig,filename:`${getProjectRoot()}/__fake__.js`})?.options,isPresetConfigItem=preset=>typeof preset=="object"&&preset!==null&&"file"in preset;options?.presets?.find(preset=>Array.isArray(preset)&&preset[0]==="next/babel"||preset==="next/babel"||isPresetConfigItem(preset)&&preset.file?.request==="next/babel")||options?.presets?.push("next/babel");let presets=options?.presets?.filter(preset=>!(isPresetConfigItem(preset)&&preset.file?.request===__require.resolve("@babel/preset-react")));return{...options,presets,babelrc:!1,configFile:!1}},webpackFinal=async(baseConfig,options)=>{let frameworkOptions2=await options.presets.apply("frameworkOptions"),{options:{nextConfigPath}={}}=frameworkOptions2,nextConfig=await configureConfig({baseConfig,nextConfigPath,configDir:options.configDir});return configureNextImport(baseConfig),configureRuntimeNextjsVersionResolution(baseConfig),configureImports(baseConfig),configureCss(baseConfig,nextConfig),configureImages(baseConfig),configureRouting(baseConfig),configureStyledJsx(baseConfig),baseConfig};export{addons,babel,config,core,frameworkOptions,webpackFinal};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/nextjs",
-  "version": "7.0.0-beta.1",
+  "version": "7.0.0-beta.2",
   "description": "Storybook for Next.js",
   "keywords": [
     "storybook",
@@ -59,12 +59,12 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/builder-webpack5": "7.0.0-beta.1",
-    "@storybook/core-common": "7.0.0-beta.1",
-    "@storybook/node-logger": "7.0.0-beta.1",
-    "@storybook/preset-react-webpack": "7.0.0-beta.1",
-    "@storybook/preview-api": "7.0.0-beta.1",
-    "@storybook/react": "7.0.0-beta.1",
+    "@storybook/builder-webpack5": "7.0.0-beta.2",
+    "@storybook/core-common": "7.0.0-beta.2",
+    "@storybook/node-logger": "7.0.0-beta.2",
+    "@storybook/preset-react-webpack": "7.0.0-beta.2",
+    "@storybook/preview-api": "7.0.0-beta.2",
+    "@storybook/react": "7.0.0-beta.2",
     "@types/node": "^16.0.0",
     "find-up": "^5.0.0",
     "fs-extra": "^9.0.1",
@@ -80,7 +80,7 @@
     "tsconfig-paths-webpack-plugin": "^3.5.2"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "7.0.0-beta.1",
+    "@storybook/addon-actions": "7.0.0-beta.2",
     "next": "^13.0.5",
     "typescript": "^4.9.3",
     "webpack": "^5.65.0"
@@ -119,5 +119,5 @@
     ],
     "platform": "node"
   },
-  "gitHead": "42c08678ac06d9c2c8e7a4c31a91e0a14bf5c2cd"
+  "gitHead": "66a0d588184add900c48d49f3a62743fa9cc5185"
 }