@storybook/nextjs 7.0.0-alpha.41

package/README.md

@@ -0,0 +1,603 @@
+# Storybook for Next.js <!-- omit in toc -->
+
+## Table of Contents <!-- omit in toc -->
+
+- [Supported Features](#supported-features)
+- [Requirements](#requirements)
+- [Getting Started](#getting-started)
+  - [In a project without Storybook](#in-a-project-without-storybook)
+  - [In a project with Storybook](#in-a-project-with-storybook)
+- [Documentation](#documentation)
+  - [Options](#options)
+  - [Next.js's Image Component](#nextjss-image-component)
+    - [Local Images](#local-images)
+    - [Remote Images](#remote-images)
+    - [Optimization](#optimization)
+    - [AVIF](#avif)
+  - [Next.js Routing](#nextjs-routing)
+    - [Overriding defaults](#overriding-defaults)
+    - [Global Defaults](#global-defaults)
+    - [Default Router](#default-router)
+    - [Actions Integration Caveats](#actions-integration-caveats)
+  - [Sass/Scss](#sassscss)
+  - [Css/Sass/Scss Modules](#csssassscss-modules)
+  - [Styled JSX](#styled-jsx)
+  - [Postcss](#postcss)
+  - [Absolute Imports](#absolute-imports)
+  - [Runtime Config](#runtime-config)
+  - [Custom Webpack Config](#custom-webpack-config)
+  - [Typescript](#typescript)
+  - [Notes for Yarn v2 and v3 users](#notes-for-yarn-v2-and-v3-users)
+  - [FAQ](#faq)
+    - [Stories for pages](#stories-for-pages)
+    - [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)
+
+## Supported Features
+
+👉 [Next.js's Image Component](#nextjss-image-component)
+
+👉 [Next.js Routing](#nextjs-routing)
+
+👉 [Sass/Scss](#sassscss)
+
+👉 [Css/Sass/Scss Modules](#csssassscss-modules)
+
+👉 [Styled JSX](#styled-jsx)
+
+👉 [Postcss](#postcss)
+
+👉 [Absolute Imports](#absolute-imports)
+
+👉 [Runtime Config](#runtime-config)
+
+👉 [Custom Webpack Config](#custom-webpack-config)
+
+👉 [Typescript](#typescript) (already supported out of the box by Storybook)
+
+## Requirements
+
+- [Next.js](https://nextjs.org/) >= 9.x
+- [Storybook](https://storybook.js.org/) >= 7.x
+
+## Getting Started
+
+### In a project without Storybook
+
+Follow the prompts after running this command in your Next.js project's root directory:
+
+```bash
+npx storybook init
+```
+
+[More on getting started with Storybook](https://storybook.js.org/docs/react/get-started/introduction)
+
+### In a project with Storybook
+
+Update your `main.js` to look something like this:
+
+Install the framework:
+
+```bash
+yarn install @storybook/nextjs
+```
+
+```js
+// .storybook/main.js
+module.exports = {
+  framework: {
+    name: '@storybook/nextjs',
+    options: {};
+  }
+}
+```
+
+## Documentation
+
+### Options
+
+You can be pass an options object for addional configuration if needed.
+
+For example:
+
+```js
+// .storybook/main.js
+const path = require('path');
+
+module.exports = {
+  // other config ommited for brevity
+  framework: {
+    name: '@storybook/nextjs',
+    options: {
+      nextConfigPath: path.resolve(__dirname, '../next.config.js'),
+    },
+  },
+  // ...
+};
+```
+
+- `nextConfigPath`: The absolute path to the `next.config.js`
+
+### Next.js's Image Component
+
+[next/image](https://nextjs.org/docs/api-reference/next/image) is [notoriously difficult](https://github.com/vercel/next.js/issues/18393) to get working with Storybook. This framework allows you to use Next.js's `Image` component with no configuration!
+
+#### Local Images
+
+[Local images](https://nextjs.org/docs/basic-features/image-optimization#local-images) work just fine! Keep in mind that this feature was [only added in Next.js v11](https://nextjs.org/blog/next-11#automatic-size-detection-local-images).
+
+```js
+import Image from 'next/image';
+import profilePic from '../public/me.png';
+
+function Home() {
+  return (
+    <>
+      <h1>My Homepage</h1>
+      <Image
+        src={profilePic}
+        alt="Picture of the author"
+        // width={500} automatically provided
+        // height={500} automatically provided
+        // blurDataURL="../public/me.png" set to equal the image itself (for this framework)
+        // placeholder="blur" // Optional blur-up while loading
+      />
+      <p>Welcome to my homepage!</p>
+    </>
+  );
+}
+```
+
+#### Remote Images
+
+[Remote images](https://nextjs.org/docs/basic-features/image-optimization#remote-images) also work just fine!
+
+```js
+import Image from 'next/image';
+
+export default function Home() {
+  return (
+    <>
+      <h1>My Homepage</h1>
+      <Image src="/me.png" alt="Picture of the author" width={500} height={500} />
+      <p>Welcome to my homepage!</p>
+    </>
+  );
+}
+```
+
+#### Optimization
+
+All Next.js `Image`s are automatically [unoptimized](https://nextjs.org/docs/api-reference/next/image#unoptimized) for you.
+
+If [placeholder="blur"](https://nextjs.org/docs/api-reference/next/image#placeholder) is used, the [blurDataURL](https://nextjs.org/docs/api-reference/next/image#blurdataurl) used is the [src](https://nextjs.org/docs/api-reference/next/image#src) of the image (thus effectively disabling the placeholder).
+
+See [this issue](https://github.com/vercel/next.js/issues/18393) for more discussion on how Next.js `Image`s are handled for Storybook.
+
+#### AVIF
+
+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 Routing
+
+[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.
+
+#### 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.
+
+```js
+// SomeComponentThatUsesTheRouter.stories.js
+import SomeComponentThatUsesTheRouter from './SomeComponentThatUsesTheRouter';
+
+export default {
+  component: SomeComponentThatUsesTheRouter,
+};
+
+// if you have the actions addon
+// you can click the links and see the route change events there
+export const Example = {
+  parameters: {
+    nextRouter: {
+      path: '/profile/[id]',
+      asPath: '/profile/ryanclementshax',
+      query: {
+        id: 'ryanclementshax',
+      },
+    },
+  },
+};
+```
+
+#### Global Defaults
+
+Global defaults can be set in [preview.js](https://storybook.js.org/docs/react/configure/overview#configure-story-rendering) and will be shallowly merged with the default router.
+
+```js
+// .storybook/main.js
+
+export const parameters = {
+  nextRouter: {
+    path: '/some-default-path',
+    asPath: '/some-default-path',
+    query: {},
+  },
+};
+```
+
+#### Default Router
+
+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 defaultRouter = {
+  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,
+};
+```
+
+#### Actions Integration Caveats
+
+If you override a function, you lose the automatic action tab integration and have to build it out yourself.
+
+```js
+// .storybook/main.js
+
+export const parameters = {
+  nextRouter: {
+    push() {
+      // The default implementation that logs the action into the action tab is lost
+    },
+  },
+};
+```
+
+Doing this yourself looks something like this (make sure you install the `@storybook/addon-actions` package):
+
+```js
+// .storybook/main.js
+import { action } from '@storybook/addon-actions';
+
+export const parameters = {
+  nextRouter: {
+    push(...args) {
+      // custom logic can go here
+      // this logs to the actions tab
+      action('nextRouter.push')(...args);
+      // return whatever you want here
+      return Promise.resolve(true);
+    },
+  },
+};
+```
+
+### Sass/Scss
+
+[Global sass/scss stylesheets](https://nextjs.org/docs/basic-features/built-in-css-support#sass-support) are supported without any additional configuration as well. Just import them into [preview.js](https://storybook.js.org/docs/react/configure/overview#configure-story-rendering)
+
+```js
+import '../styles/globals.scss';
+```
+
+This will automatically include any of your [custom sass configurations](https://nextjs.org/docs/basic-features/built-in-css-support#customizing-sass-options) in your `next.config.js` file.
+
+```js
+// next.config.js
+const path = require('path');
+
+module.exports = {
+  // any options here are included in sass compilation for your stories
+  sassOptions: {
+    includePaths: [path.join(__dirname, 'styles')],
+  },
+};
+```
+
+### Css/Sass/Scss Modules
+
+[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
+import styles from './Button.module.css';
+// sass/scss is also supported
+// import styles from './Button.module.scss'
+// import styles from './Button.module.sass'
+
+export function Button() {
+  return (
+    <button type="button" className={styles.error}>
+      Destroy
+    </button>
+  );
+}
+```
+
+### Styled JSX
+
+The built in CSS-in-JS solution for Next.js is [styled-jsx](https://nextjs.org/docs/basic-features/built-in-css-support#css-in-js), and this framework supports that out of the box too, zero config.
+
+```js
+// This works just fine in Storybook now
+function HelloWorld() {
+  return (
+    <div>
+      Hello world
+      <p>scoped!</p>
+      <style jsx>{`
+        p {
+          color: blue;
+        }
+        div {
+          background: red;
+        }
+        @media (max-width: 600px) {
+          div {
+            background: blue;
+          }
+        }
+      `}</style>
+      <style global jsx>{`
+        body {
+          background: black;
+        }
+      `}</style>
+    </div>
+  );
+}
+
+export default HelloWorld;
+```
+
+You can use your own babel config too. This is an example of how you can customize styled-jsx.
+
+```json
+// .babelrc or whatever config file you use
+{
+  "presets": [
+    [
+      "next/babel",
+      {
+        "styled-jsx": {
+          "plugins": ["@styled-jsx/plugin-sass"]
+        }
+      }
+    ]
+  ]
+}
+```
+
+If you use a monorepo, you may need to add the babel config yourself to your storybook project. Just add a babel config to your storybook project with the following contents to get started.
+
+```json
+{
+  "presets": ["next/babel"]
+}
+```
+
+### Postcss
+
+Next.js lets you [customize postcss config](https://nextjs.org/docs/advanced-features/customizing-postcss-config#default-behavior). Thus this framework will automatically handle your postcss config for you.
+
+This allows for cool things like zero config tailwindcss! (See [Next.js' example](https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss))
+
+### Absolute Imports
+
+Goodbye `../`! Absolute imports from the root directory work just fine.
+
+```js
+// All good!
+import Button from 'components/button';
+// Also good!
+import styles from 'styles/HomePage.module.css';
+
+export default function HomePage() {
+  return (
+    <>
+      <h1 className={styles.title}>Hello World</h1>
+      <Button />
+    </>
+  );
+}
+```
+
+```js
+// preview.js
+
+// Also ok in preview.js!
+import 'styles/globals.scss';
+
+// ...
+```
+
+### Runtime Config
+
+Next.js allows for [Runtime Configuration](https://nextjs.org/docs/api-reference/next.config.js/runtime-configuration) which lets you import a handy `getConfig` function to get certain configuration defined in your `next.config.js` file at runtime.
+
+In the context of Storybook with this framework, you can expect Next.js's [Runtime Configuration](https://nextjs.org/docs/api-reference/next.config.js/runtime-configuration) feature to work just fine.
+
+Note, because Storybook doesn't server render your components, your components will only see what they normally see on the client side (i.e. they won't see `serverRuntimeConfig` but will see `publicRuntimeConfig`).
+
+For example, consider the following Next.js config:
+
+```js
+// next.config.js
+module.exports = {
+  serverRuntimeConfig: {
+    mySecret: 'secret',
+    secondSecret: process.env.SECOND_SECRET, // Pass through env variables
+  },
+  publicRuntimeConfig: {
+    staticFolder: '/static',
+  },
+};
+```
+
+Calls to `getConfig` would return the following object when called within Storybook:
+
+```json
+{
+  "serverRuntimeConfig": {},
+  "publicRuntimeConfig": {
+    "staticFolder": "/static"
+  }
+}
+```
+
+### Custom Webpack Config
+
+Next.js comes with a lot of things for free out of the box like sass support, but sometimes you add [custom webpack config modifications to Next.js](https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config). This framework takes care of most of the webpack modifications you would want to add. If Next.js supports a feature out of the box, then that feature will work out of the box in Storybook. If Next.js doesn't support something out of the box, but makes it easy to configure, then this framework will do the same for that thing for Storybook.
+
+Any webpack modifications desired for Storybook should be made in [.storybook/main.js](https://storybook.js.org/docs/react/builders/webpack#extending-storybooks-webpack-config).
+
+Note: Not all webpack modifications are copy/paste-able between `next.config.js` and `.storybook/main.js`. It is recommended to do your reasearch on how to properly make your modifcation to Storybook's webpack config and on how [webpack works](https://webpack.js.org/concepts/).
+
+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
+    // 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
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: ['@svgr/webpack'],
+    });
+
+    return config;
+  },
+};
+```
+
+### Typescript
+
+Storybook handles most [Typescript](https://www.typescriptlang.org/) configurations, but this framework adds additional support for Next.js's support for [Absolute Imports and Module path aliases](https://nextjs.org/docs/advanced-features/module-path-aliases). In short, it takes into account your `tsconfig.json`'s [baseUrl](https://www.typescriptlang.org/tsconfig#baseUrl) and [paths](https://www.typescriptlang.org/tsconfig#paths). Thus, a `tsconfig.json` like the one below would work out of the box.
+
+```json
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/components/*": ["components/*"]
+    }
+  }
+}
+```
+
+### Notes for Yarn v2 and v3 users
+
+If you're using [Yarn](https://yarnpkg.com/) v2 or v3, you may run into issues where Storybook can't resolve `style-loader` or `css-loader`. For example, you might get errors like:
+
+`Module not found: Error: Can't resolve 'css-loader'`\
+`Module not found: Error: Can't resolve 'style-loader'`
+
+This is because those versions of Yarn have different package resolution rules than Yarn v1.x. If this is the case for you, just install the package directly.
+
+### FAQ
+
+#### Stories for pages
+
+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).
+
+**Before**
+
+```jsx
+// ./pages/my-page.jsx
+import fs from 'fs';
+
+export default MyPage = (props) => (
+  // ...
+);
+
+export const getStaticProps = async () => {
+  // Logic that uses `fs`
+};
+```
+
+**After**
+
+```jsx
+// ./pages/my-page.jsx
+import fs from 'fs';
+
+import MyPage from 'components/MyPage';
+
+export default MyPage;
+
+export const getStaticProps = async () => {
+  // Logic that uses `fs`
+};
+```
+
+#### 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.
+
+Before using this framework, image imports just imported the raw path to the image (e.g. `'static/media/stories/assets/logo.svg'`). Now image imports work the "Next.js way", meaning that you now get an object when importing an image. For example:
+
+```json
+{
+  "src": "static/media/stories/assets/logo.svg",
+  "height": 48,
+  "width": 48,
+  "blurDataURL": "static/media/stories/assets/logo.svg"
+}
+```
+
+Therefore, if something in storybook isn't showing the image properly, make sure you expect the object to be returned from an import instead of just the asset path.
+
+See [local images](https://nextjs.org/docs/basic-features/image-optimization#local-images) for more detail on how Next.js treats static image imports.
+
+#### Module not found: Error: Can't resolve [package name]
+
+You might get this if you're using Yarn v2 or v3. See [Notes for Yarn v2 and v3 users](#notes-for-yarn-v2-and-v3-users) for more details.
+
+## Acknowledgements
+
+This framework borrows heavily from these Storybook addons:
+
+- [storybook-addon-next](https://github.com/RyanClementsHax/storybook-addon-next) by [RyanClementsHax](https://github.com/RyanClementsHax/)
+- [storybook-addon-next-router](https://github.com/lifeiscontent/storybook-addon-next-router) by [lifeiscontent](https://github.com/lifeiscontent)

package/dist/chunk-D2N66TOG.mjs

@@ -0,0 +1 @@
+var g=(a=>typeof require!="undefined"?require:typeof Proxy!="undefined"?new Proxy(a,{get:(b,c)=>(typeof require!="undefined"?require:b)[c]}):a)(function(a){if(typeof require!="undefined")return require.apply(this,arguments);throw new Error('Dynamic require of "'+a+'" is not supported')});var d=(a,b)=>()=>(a&&(b=a(a=0)),b);var h=(a,b)=>()=>(b||a((b={exports:{}}).exports,b),b.exports);var k,f=d(()=>{k={}});export{g as a,h as b,f as c,k as d};

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export * from '@storybook/react';
+export { F as FrameworkOptions, S as StorybookConfig } from './types-4223e3ef.js';
+import '@storybook/preset-react-webpack';
+import '@storybook/builder-webpack5';

package/dist/index.js

@@ -0,0 +1 @@
+"use strict";var a=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var c=Object.getOwnPropertyNames;var d=Object.prototype.hasOwnProperty;var t=(r,o,m,x)=>{if(o&&typeof o=="object"||typeof o=="function")for(let e of c(o))!d.call(r,e)&&e!==m&&a(r,e,{get:()=>o[e],enumerable:!(x=b(o,e))||x.enumerable});return r},p=(r,o,m)=>(t(r,o,"default"),m&&t(m,o,"default"));var g=r=>t(a({},"__esModule",{value:!0}),r);var f={};module.exports=g(f);p(f,require("@storybook/react"),module.exports);

package/dist/index.mjs

@@ -0,0 +1 @@
+import{c as o}from"./chunk-D2N66TOG.mjs";o();export*from"@storybook/react";o();

package/dist/next-image-loader-stub.d.ts

@@ -0,0 +1,8 @@
+import { RawLoaderDefinition } from 'webpack';
+
+interface LoaderOptions {
+    filename: string;
+}
+declare const nextImageLoaderStub: RawLoaderDefinition<LoaderOptions>;
+
+export { nextImageLoaderStub as default };

package/dist/next-image-loader-stub.js

@@ -0,0 +1 @@
+"use strict";var m=Object.create;var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var c=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var x=(t,e,i,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of h(e))!u.call(t,o)&&o!==i&&a(t,o,{get:()=>e[o],enumerable:!(r=p(e,o))||r.enumerable});return t};var d=(t,e,i)=>(i=t!=null?m(c(t)):{},x(e||!t||!t.__esModule?a(i,"default",{value:t,enumerable:!0}):i,t));var n=require("loader-utils"),s=d(require("image-size")),f=function(t){let{filename:e}=this.getOptions(),i=(0,n.interpolateName)(this,e.replace("[ext]",".[ext]"),{context:this.rootContext,content:t});this.emitFile(i,t);let{width:r,height:o}=(0,s.default)(t);return`export default ${JSON.stringify({src:i,height:o,width:r,blurDataURL:i})};`};f.raw=!0;module.exports=f;

package/dist/next-image-loader-stub.mjs

@@ -0,0 +1 @@
+import{b as f,c as i}from"./chunk-D2N66TOG.mjs";import{interpolateName as m}from"loader-utils";import p from"image-size";var h=f((d,r)=>{i();var o=function(t){let{filename:a}=this.getOptions(),e=m(this,a.replace("[ext]",".[ext]"),{context:this.rootContext,content:t});this.emitFile(e,t);let{width:n,height:s}=p(t);return`export default ${JSON.stringify({src:e,height:s,width:n,blurDataURL:e})};`};o.raw=!0;r.exports=o});export default h();

package/dist/preset.d.ts

@@ -0,0 +1,14 @@
+import { PresetProperty, Options } from '@storybook/core-common';
+import { TransformOptions } from '@babel/core';
+import { S as StorybookConfig } from './types-4223e3ef.js';
+import '@storybook/preset-react-webpack';
+import '@storybook/builder-webpack5';
+
+declare const addons: PresetProperty<'addons', StorybookConfig>;
+declare const frameworkOptions: (_: never, options: Options) => Promise<StorybookConfig['framework']>;
+declare const core: PresetProperty<'core', StorybookConfig>;
+declare const config: StorybookConfig['previewAnnotations'];
+declare const babel: (baseConfig: TransformOptions) => Promise<TransformOptions>;
+declare const webpackFinal: StorybookConfig['webpackFinal'];
+
+export { addons, babel, config, core, frameworkOptions, webpackFinal };

package/dist/preset.js

@@ -0,0 +1,5 @@
+"use strict";var U=Object.create;var l=Object.defineProperty;var X=Object.getOwnPropertyDescriptor;var G=Object.getOwnPropertyNames;var H=Object.getPrototypeOf,z=Object.prototype.hasOwnProperty;var B=(o,e)=>{for(var t in e)l(o,t,{get:e[t],enumerable:!0})},k=(o,e,t,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of G(e))!z.call(o,s)&&s!==t&&l(o,s,{get:()=>e[s],enumerable:!(r=X(e,s))||r.enumerable});return o};var n=(o,e,t)=>(t=o!=null?U(H(o)):{},k(e||!o||!o.__esModule?l(t,"default",{value:o,enumerable:!0}):t,o)),K=o=>k(l({},"__esModule",{value:!0}),o);var fo={};B(fo,{addons:()=>ro,babel:()=>po,config:()=>no,core:()=>io,frameworkOptions:()=>so,webpackFinal:()=>ao});module.exports=K(fo);var p=require("path");var w=require("next/constants"),C=n(require("find-up")),j=require("fs-extra"),R=n(require("ts-dedent")),h=require("webpack");var u=n(require("path")),v=require("webpack"),b=o=>{var e;(e=o.plugins)==null||e.push(new v.DefinePlugin({"process.env.__NEXT_VERSION":JSON.stringify(a())}))},a=()=>require(g("next/package.json")).version,i=(o,e,t)=>{o.resolve??={},o.resolve.alias??={};let r=o.resolve.alias,s=g(`${t??e}`);Array.isArray(r)?r.push({name:e,alias:s}):r[e]=s},g=o=>{let e=require.resolve(o,{paths:[u.default.resolve()]}),r=e.lastIndexOf(o.replace(/\//g,u.default.sep))+o.length;return e.substring(0,r)};var P=async({baseConfig:o,nextConfigPath:e,configDir:t})=>{let r=await Y({baseConfig:o,nextConfigPath:e,configDir:t});return i(o,"next/config"),Z(o,r),r},Q=async o=>["mjs","js"].reduce(async(t,r)=>(await t||(t=(0,C.default)(`next.config.${r}`,{cwd:o})),t),Promise.resolve(void 0)),Y=async({baseConfig:o,nextConfigPath:e,configDir:t})=>{let r=e||await Q(t);if(!r||await(0,j.pathExists)(r)===!1)throw new Error(R.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(r);return typeof s=="function"?s(w.PHASE_DEVELOPMENT_SERVER,{defaultConfig:o}):s},Z=(o,e)=>{var t;(t=o.plugins)==null||t.push(new h.DefinePlugin({"process.env.__NEXT_RUNTIME_CONFIG":JSON.stringify({serverRuntimeConfig:{},publicRuntimeConfig:e.publicRuntimeConfig})}))};var d=require("next/dist/build/webpack/config/blocks/css/loaders/getCssModuleLocalIdent"),x=require("next/dist/build/webpack/config/blocks/css/loaders/file-resolve"),E=n(require("semver"));var T=(o,e)=>{var r,s,f;let t=(r=o.module)==null?void 0:r.rules;t==null||t.forEach((c,m)=>{typeof c!="string"&&c.test instanceof RegExp&&c.test.test("test.css")&&(t[m]={test:/\.css$/,use:["style-loader",{loader:"css-loader",options:{importLoaders:1,...O(e),modules:{auto:!0,getLocalIdent:d.getCssModuleLocalIdent}}},"postcss-loader"]})}),t==null||t.push({test:/\.(scss|sass)$/,use:["style-loader",{loader:"css-loader",options:{importLoaders:3,...O(e),modules:{auto:!0,getLocalIdent:d.getCssModuleLocalIdent}}},"postcss-loader","resolve-url-loader",{loader:"sass-loader",options:{sourceMap:!0,sassOptions:e.sassOptions,additionalData:((s=e.sassOptions)==null?void 0:s.prependData)||((f=e.sassOptions)==null?void 0:f.additionalData)}}]})},O=o=>oo()?{url:{filter:S(o)},import:{filter:N(o)}}:{url:S(o),import:N(o)},S=o=>(e,t)=>{var r;return(0,x.cssFileResolve)(e,t,(r=o.experimental)==null?void 0:r.urlImports)},N=o=>(e,t,r)=>{var s;return(0,x.cssFileResolve)(typeof e=="string"?e:e.url,r,(s=o.experimental)==null?void 0:s.urlImports)},oo=()=>{try{let o=require(g("css-loader/package.json")).version;return E.default.gte(o,"6.0.0")}catch{return!1}};var W=n(require("tsconfig-paths-webpack-plugin")),I=require("tsconfig-paths"),F=o=>{let e=(0,I.loadConfig)();e.resultType==="failed"||!e.baseUrl||(o.resolve??={},o.resolve.plugins??=[],o.resolve.plugins.push(new W.default({configFile:e.configFileAbsolutePath,extensions:[".js",".jsx",".ts",".tsx"]})))};var A=n(require("semver"));var L=o=>{let e=eo();i(o,e)},eo=()=>{let o=a();return A.default.gte(o,"11.1.0")?"next/dist/shared/lib/router-context":"next/dist/next-server/lib/router-context"};var D=n(require("semver"));var V=o=>{let e=a();D.default.gte(e,"12.0.0")?i(o,"styled-jsx"):(i(o,"styled-jsx/babel"),i(o,"styled-jsx/css"),i(o,"styled-jsx/macro"),i(o,"styled-jsx/server"),i(o,"styled-jsx/style"),i(o,"styled-jsx/webpack"))};var _=async o=>{o.plugins||=[],o.plugins.includes("styled-jsx/babel")||o.plugins.push("styled-jsx/babel")};var q=n(require("semver"));var $=o=>{to(o),i(o,"next/image")},to=o=>{var s,f,c;let e=a();if(q.default.lt(e,"11.0.0"))return;let t=(s=o.module)==null?void 0:s.rules,r=t==null?void 0:t.find(m=>typeof m!="string"&&m.test instanceof RegExp&&m.test.test("test.jpg"));!r||(r.test=/\.(apng|eot|otf|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/,t==null||t.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:(f=r.generator)==null?void 0:f.filename}}]}),t==null||t.push({test:/\.(png|jpg|jpeg|gif|webp|avif|ico|bmp|svg)$/i,issuer:/\.(css|scss|sass)$/,type:"asset/resource",generator:{filename:(c=r.generator)==null?void 0:c.filename}}))};var M=require("tsconfig-paths"),J=async o=>{(0,M.loadConfig)().resultType==="success"&&(o.presets||=[],o.presets.includes("@babel/preset-typescript")||o.presets.push("@babel/preset-typescript"))};var ro=[(0,p.dirname)(require.resolve((0,p.join)("@storybook/preset-react-webpack","package.json"))),(0,p.dirname)(require.resolve((0,p.join)("@storybook/react","package.json"))),(0,p.dirname)(require.resolve((0,p.join)("@storybook/builder-webpack5","package.json")))],y={},so=async(o,e)=>{let t=await e.presets.apply("framework");return typeof t=="string"?{name:t,options:y}:typeof t>"u"?{name:require.resolve("@storybook/nextjs"),options:y}:{name:t.name,options:{...y,...t.options}}},io=async(o,e)=>{let t=await e.presets.apply("framework");return{...o,builder:{name:(0,p.dirname)(require.resolve((0,p.join)("@storybook/builder-webpack5","package.json"))),options:typeof t=="string"?{}:t.options.builder||{}}}},no=(o=[])=>[...o,require.resolve("@storybook/nextjs/preview.js")],po=async o=>(J(o),_(o),o),ao=async(o,e)=>{let t=await e.presets.apply("frameworkOptions"),{options:{nextConfigPath:r}={}}=t,s=await P({baseConfig:o,nextConfigPath:r,configDir:e.configDir});return b(o),F(o),T(o,s),$(o),L(o),V(o),o};0&&(module.exports={addons,babel,config,core,frameworkOptions,webpackFinal});

package/dist/preset.mjs

@@ -0,0 +1,5 @@
+import{a as n,c as s}from"./chunk-D2N66TOG.mjs";s();import{dirname as m,join as l}from"path";s();import{PHASE_DEVELOPMENT_SERVER as E}from"next/constants";import T from"find-up";import{pathExists as W}from"fs-extra";import I from"ts-dedent";import{DefinePlugin as F}from"webpack";s();import u from"path";import{DefinePlugin as N}from"webpack";var d=o=>{o.plugins?.push(new N({"process.env.__NEXT_VERSION":JSON.stringify(f())}))},f=()=>n(c("next/package.json")).version,p=(o,e,t)=>{o.resolve??={},o.resolve.alias??={};let r=o.resolve.alias,i=c(`${t??e}`);Array.isArray(r)?r.push({name:e,alias:i}):r[e]=i},c=o=>{let e=n.resolve(o,{paths:[u.resolve()]}),r=e.lastIndexOf(o.replace(/\//g,u.sep))+o.length;return e.substring(0,r)};var x=async({baseConfig:o,nextConfigPath:e,configDir:t})=>{let r=await L({baseConfig:o,nextConfigPath:e,configDir:t});return p(o,"next/config"),D(o,r),r},A=async o=>["mjs","js"].reduce(async(t,r)=>(await t||(t=T(`next.config.${r}`,{cwd:o})),t),Promise.resolve(void 0)),L=async({baseConfig:o,nextConfigPath:e,configDir:t})=>{let r=e||await A(t);if(!r||await W(r)===!1)throw new Error(I`
+        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 i=await import(r);return typeof i=="function"?i(E,{defaultConfig:o}):i},D=(o,e)=>{o.plugins?.push(new F({"process.env.__NEXT_RUNTIME_CONFIG":JSON.stringify({serverRuntimeConfig:{},publicRuntimeConfig:e.publicRuntimeConfig})}))};s();import{getCssModuleLocalIdent as y}from"next/dist/build/webpack/config/blocks/css/loaders/getCssModuleLocalIdent";import{cssFileResolve as w}from"next/dist/build/webpack/config/blocks/css/loaders/file-resolve";import V from"semver";var C=(o,e)=>{let t=o.module?.rules;t?.forEach((r,i)=>{typeof r!="string"&&r.test instanceof RegExp&&r.test.test("test.css")&&(t[i]={test:/\.css$/,use:["style-loader",{loader:"css-loader",options:{importLoaders:1,...k(e),modules:{auto:!0,getLocalIdent:y}}},"postcss-loader"]})}),t?.push({test:/\.(scss|sass)$/,use:["style-loader",{loader:"css-loader",options:{importLoaders:3,...k(e),modules:{auto:!0,getLocalIdent:y}}},"postcss-loader","resolve-url-loader",{loader:"sass-loader",options:{sourceMap:!0,sassOptions:e.sassOptions,additionalData:e.sassOptions?.prependData||e.sassOptions?.additionalData}}]})},k=o=>_()?{url:{filter:v(o)},import:{filter:b(o)}}:{url:v(o),import:b(o)},v=o=>(e,t)=>w(e,t,o.experimental?.urlImports),b=o=>(e,t,r)=>w(typeof e=="string"?e:e.url,r,o.experimental?.urlImports),_=()=>{try{let o=n(c("css-loader/package.json")).version;return V.gte(o,"6.0.0")}catch{return!1}};s();import q from"tsconfig-paths-webpack-plugin";import{loadConfig as $}from"tsconfig-paths";var j=o=>{let e=$();e.resultType==="failed"||!e.baseUrl||(o.resolve??={},o.resolve.plugins??=[],o.resolve.plugins.push(new q({configFile:e.configFileAbsolutePath,extensions:[".js",".jsx",".ts",".tsx"]})))};s();import M from"semver";var R=o=>{let e=J();p(o,e)},J=()=>{let o=f();return M.gte(o,"11.1.0")?"next/dist/shared/lib/router-context":"next/dist/next-server/lib/router-context"};s();import U from"semver";var h=o=>{let e=f();U.gte(e,"12.0.0")?p(o,"styled-jsx"):(p(o,"styled-jsx/babel"),p(o,"styled-jsx/css"),p(o,"styled-jsx/macro"),p(o,"styled-jsx/server"),p(o,"styled-jsx/style"),p(o,"styled-jsx/webpack"))};s();var P=async o=>{o.plugins||=[],o.plugins.includes("styled-jsx/babel")||o.plugins.push("styled-jsx/babel")};s();import X from"semver";var O=o=>{G(o),p(o,"next/image")},G=o=>{let e=f();if(X.lt(e,"11.0.0"))return;let t=o.module?.rules,r=t?.find(i=>typeof i!="string"&&i.test instanceof RegExp&&i.test.test("test.jpg"));!r||(r.test=/\.(apng|eot|otf|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/,t?.push({test:/\.(png|jpg|jpeg|gif|webp|avif|ico|bmp|svg)$/i,issuer:{not:/\.(css|scss|sass)$/},use:[{loader:n.resolve("@storybook/nextjs/next-image-loader-stub.js"),options:{filename:r.generator?.filename}}]}),t?.push({test:/\.(png|jpg|jpeg|gif|webp|avif|ico|bmp|svg)$/i,issuer:/\.(css|scss|sass)$/,type:"asset/resource",generator:{filename:r.generator?.filename}}))};s();import{loadConfig as H}from"tsconfig-paths";var S=async o=>{H().resultType==="success"&&(o.presets||=[],o.presets.includes("@babel/preset-typescript")||o.presets.push("@babel/preset-typescript"))};var Do=[m(n.resolve(l("@storybook/preset-react-webpack","package.json"))),m(n.resolve(l("@storybook/react","package.json"))),m(n.resolve(l("@storybook/builder-webpack5","package.json")))],g={},Vo=async(o,e)=>{let t=await e.presets.apply("framework");return typeof t=="string"?{name:t,options:g}:typeof t>"u"?{name:n.resolve("@storybook/nextjs"),options:g}:{name:t.name,options:{...g,...t.options}}},_o=async(o,e)=>{let t=await e.presets.apply("framework");return{...o,builder:{name:m(n.resolve(l("@storybook/builder-webpack5","package.json"))),options:typeof t=="string"?{}:t.options.builder||{}}}},qo=(o=[])=>[...o,n.resolve("@storybook/nextjs/preview.js")],$o=async o=>(S(o),P(o),o),Mo=async(o,e)=>{let t=await e.presets.apply("frameworkOptions"),{options:{nextConfigPath:r}={}}=t,i=await x({baseConfig:o,nextConfigPath:r,configDir:e.configDir});return d(o),j(o),C(o,i),O(o),R(o),h(o),o};export{Do as addons,$o as babel,qo as config,_o as core,Vo as frameworkOptions,Mo as webpackFinal};

package/dist/preview.d.ts

@@ -0,0 +1,12 @@
+import * as lib_addons_dist from 'lib/addons/dist';
+import * as react from 'react';
+
+declare type AnyFramework = {
+    component: unknown;
+    storyResult: unknown;
+    T?: unknown;
+};
+
+declare const decorators: ((Story: react.FC<{}>, { globals, parameters }: lib_addons_dist.StoryContext<AnyFramework>) => react.ReactNode)[];
+
+export { decorators };

package/dist/preview.js

@@ -0,0 +1,10 @@
+"use strict";var M=Object.create;var y=Object.defineProperty;var H=Object.getOwnPropertyDescriptor;var U=Object.getOwnPropertyNames;var $=Object.getPrototypeOf,G=Object.prototype.hasOwnProperty;var x=(t,r)=>()=>(r||t((r={exports:{}}).exports,r),r.exports),K=(t,r)=>{for(var i in r)y(t,i,{get:r[i],enumerable:!0})},N=(t,r,i,e)=>{if(r&&typeof r=="object"||typeof r=="function")for(let n of U(r))!G.call(t,n)&&n!==i&&y(t,n,{get:()=>r[n],enumerable:!(e=H(r,n))||e.enumerable});return t};var h=(t,r,i)=>(i=t!=null?M($(t)):{},N(r||!t||!t.__esModule?y(i,"default",{value:t,enumerable:!0}):i,t)),Q=t=>N(y({},"__esModule",{value:!0}),t);var X=x(p=>{var m=require("react");function Y(t){return t&&typeof t=="object"&&"default"in t?t:{default:t}}var v=Y(m);function T(t,r){for(var i=0;i<r.length;i++){var e=r[i];e.enumerable=e.enumerable||!1,e.configurable=!0,"value"in e&&(e.writable=!0),Object.defineProperty(t,e.key,e)}}function Z(t,r,i){return r&&T(t.prototype,r),i&&T(t,i),t}var S=typeof process<"u"&&process.env&&process.env.NODE_ENV==="production",z=function(t){return Object.prototype.toString.call(t)==="[object String]"},ee=function(){function t(i){var e=i===void 0?{}:i,n=e.name,o=n===void 0?"stylesheet":n,s=e.optimizeForSpeed,u=s===void 0?S:s;l(z(o),"`name` must be a string"),this._name=o,this._deletedRulePlaceholder="#"+o+"-deleted-rule____{}",l(typeof u=="boolean","`optimizeForSpeed` must be a boolean"),this._optimizeForSpeed=u,this._serverSheet=void 0,this._tags=[],this._injected=!1,this._rulesCount=0;var c=typeof window<"u"&&document.querySelector('meta[property="csp-nonce"]');this._nonce=c?c.getAttribute("content"):null}var r=t.prototype;return r.setOptimizeForSpeed=function(e){l(typeof e=="boolean","`setOptimizeForSpeed` accepts a boolean"),l(this._rulesCount===0,"optimizeForSpeed cannot be when rules have already been inserted"),this.flush(),this._optimizeForSpeed=e,this.inject()},r.isOptimizeForSpeed=function(){return this._optimizeForSpeed},r.inject=function(){var e=this;if(l(!this._injected,"sheet already injected"),this._injected=!0,typeof window<"u"&&this._optimizeForSpeed){this._tags[0]=this.makeStyleTag(this._name),this._optimizeForSpeed="insertRule"in this.getSheet(),this._optimizeForSpeed||(S||console.warn("StyleSheet: optimizeForSpeed mode not supported falling back to standard mode."),this.flush(),this._injected=!0);return}this._serverSheet={cssRules:[],insertRule:function(n,o){return typeof o=="number"?e._serverSheet.cssRules[o]={cssText:n}:e._serverSheet.cssRules.push({cssText:n}),o},deleteRule:function(n){e._serverSheet.cssRules[n]=null}}},r.getSheetForTag=function(e){if(e.sheet)return e.sheet;for(var n=0;n<document.styleSheets.length;n++)if(document.styleSheets[n].ownerNode===e)return document.styleSheets[n]},r.getSheet=function(){return this.getSheetForTag(this._tags[this._tags.length-1])},r.insertRule=function(e,n){if(l(z(e),"`insertRule` accepts only strings"),typeof window>"u")return typeof n!="number"&&(n=this._serverSheet.cssRules.length),this._serverSheet.insertRule(e,n),this._rulesCount++;if(this._optimizeForSpeed){var o=this.getSheet();typeof n!="number"&&(n=o.cssRules.length);try{o.insertRule(e,n)}catch{return S||console.warn(`StyleSheet: illegal rule: 
+
+`+e+`
+
+See https://stackoverflow.com/q/20007992 for more info`),-1}}else{var s=this._tags[n];this._tags.push(this.makeStyleTag(this._name,e,s))}return this._rulesCount++},r.replaceRule=function(e,n){if(this._optimizeForSpeed||typeof window>"u"){var o=typeof window<"u"?this.getSheet():this._serverSheet;if(n.trim()||(n=this._deletedRulePlaceholder),!o.cssRules[e])return e;o.deleteRule(e);try{o.insertRule(n,e)}catch{S||console.warn(`StyleSheet: illegal rule: 
+
+`+n+`
+
+See https://stackoverflow.com/q/20007992 for more info`),o.insertRule(this._deletedRulePlaceholder,e)}}else{var s=this._tags[e];l(s,"old rule at index `"+e+"` not found"),s.textContent=n}return e},r.deleteRule=function(e){if(typeof window>"u"){this._serverSheet.deleteRule(e);return}if(this._optimizeForSpeed)this.replaceRule(e,"");else{var n=this._tags[e];l(n,"rule at index `"+e+"` not found"),n.parentNode.removeChild(n),this._tags[e]=null}},r.flush=function(){this._injected=!1,this._rulesCount=0,typeof window<"u"?(this._tags.forEach(function(e){return e&&e.parentNode.removeChild(e)}),this._tags=[]):this._serverSheet.cssRules=[]},r.cssRules=function(){var e=this;return typeof window>"u"?this._serverSheet.cssRules:this._tags.reduce(function(n,o){return o?n=n.concat(Array.prototype.map.call(e.getSheetForTag(o).cssRules,function(s){return s.cssText===e._deletedRulePlaceholder?null:s})):n.push(null),n},[])},r.makeStyleTag=function(e,n,o){n&&l(z(n),"makeStyleTag accepts only strings as second parameter");var s=document.createElement("style");this._nonce&&s.setAttribute("nonce",this._nonce),s.type="text/css",s.setAttribute("data-"+e,""),n&&s.appendChild(document.createTextNode(n));var u=document.head||document.getElementsByTagName("head")[0];return o?u.insertBefore(s,o):u.appendChild(s),s},Z(t,[{key:"length",get:function(){return this._rulesCount}}]),t}();function l(t,r){if(!t)throw new Error("StyleSheet: "+r+".")}function te(t){for(var r=5381,i=t.length;i;)r=r*33^t.charCodeAt(--i);return r>>>0}var re=te,ne=function(t){return t.replace(/\/style/gi,"\\/style")},d={};function C(t,r){if(!r)return"jsx-"+t;var i=String(r),e=t+i;return d[e]||(d[e]="jsx-"+re(t+"-"+i)),d[e]}function I(t,r){var i=/__jsx-style-dynamic-selector/g;typeof window>"u"&&(r=ne(r));var e=t+r;return d[e]||(d[e]=r.replace(i,t)),d[e]}function ie(t,r){return r===void 0&&(r={}),t.map(function(i){var e=i[0],n=i[1];return v.default.createElement("style",{id:"__"+e,key:"__"+e,nonce:r.nonce?r.nonce:void 0,dangerouslySetInnerHTML:{__html:n}})})}var oe=function(){function t(i){var e=i===void 0?{}:i,n=e.styleSheet,o=n===void 0?null:n,s=e.optimizeForSpeed,u=s===void 0?!1:s;this._sheet=o||new ee({name:"styled-jsx",optimizeForSpeed:u}),this._sheet.inject(),o&&typeof u=="boolean"&&(this._sheet.setOptimizeForSpeed(u),this._optimizeForSpeed=this._sheet.isOptimizeForSpeed()),this._fromServer=void 0,this._indices={},this._instancesCounts={}}var r=t.prototype;return r.add=function(e){var n=this;this._optimizeForSpeed===void 0&&(this._optimizeForSpeed=Array.isArray(e.children),this._sheet.setOptimizeForSpeed(this._optimizeForSpeed),this._optimizeForSpeed=this._sheet.isOptimizeForSpeed()),typeof window<"u"&&!this._fromServer&&(this._fromServer=this.selectFromServer(),this._instancesCounts=Object.keys(this._fromServer).reduce(function(f,J){return f[J]=0,f},{}));var o=this.getIdAndRules(e),s=o.styleId,u=o.rules;if(s in this._instancesCounts){this._instancesCounts[s]+=1;return}var c=u.map(function(f){return n._sheet.insertRule(f)}).filter(function(f){return f!==-1});this._indices[s]=c,this._instancesCounts[s]=1},r.remove=function(e){var n=this,o=this.getIdAndRules(e).styleId;if(se(o in this._instancesCounts,"styleId: `"+o+"` not found"),this._instancesCounts[o]-=1,this._instancesCounts[o]<1){var s=this._fromServer&&this._fromServer[o];s?(s.parentNode.removeChild(s),delete this._fromServer[o]):(this._indices[o].forEach(function(u){return n._sheet.deleteRule(u)}),delete this._indices[o]),delete this._instancesCounts[o]}},r.update=function(e,n){this.add(n),this.remove(e)},r.flush=function(){this._sheet.flush(),this._sheet.inject(),this._fromServer=void 0,this._indices={},this._instancesCounts={}},r.cssRules=function(){var e=this,n=this._fromServer?Object.keys(this._fromServer).map(function(s){return[s,e._fromServer[s]]}):[],o=this._sheet.cssRules();return n.concat(Object.keys(this._indices).map(function(s){return[s,e._indices[s].map(function(u){return o[u].cssText}).join(e._optimizeForSpeed?"":`
+`)]}).filter(function(s){return Boolean(s[1])}))},r.styles=function(e){return ie(this.cssRules(),e)},r.getIdAndRules=function(e){var n=e.children,o=e.dynamic,s=e.id;if(o){var u=C(s,o);return{styleId:u,rules:Array.isArray(n)?n.map(function(c){return I(u,c)}):[I(u,n)]}}return{styleId:C(s),rules:Array.isArray(n)?n:[n]}},r.selectFromServer=function(){var e=Array.prototype.slice.call(document.querySelectorAll('[id^="__jsx-"]'));return e.reduce(function(n,o){var s=o.id.slice(2);return n[s]=o,n},{})},t}();function se(t,r){if(!t)throw new Error("StyleSheetRegistry: "+r+".")}var R=m.createContext(null);R.displayName="StyleSheetContext";function b(){return new oe}function ue(t){var r=t.registry,i=t.children,e=m.useContext(R),n=m.useState(function(){return e||r||b()}),o=n[0];return v.default.createElement(R.Provider,{value:o},i)}function q(){return m.useContext(R)}var ae=v.default.useInsertionEffect||v.default.useLayoutEffect,A=typeof window<"u"?b():void 0;function D(t){var r=A||q();return r?typeof window>"u"?(r.add(t),null):(ae(function(){return r.add(t),function(){r.remove(t)}},[t.id,String(t.dynamic)]),null):null}D.dynamic=function(t){return t.map(function(r){var i=r[0],e=r[1];return C(i,e)}).join(" ")};p.StyleRegistry=ue;p.createStyleRegistry=b;p.style=D;p.useStyleRegistry=q});var V=x((me,L)=>{L.exports=X()});var ce={};K(ce,{decorators:()=>le});module.exports=Q(ce);var P=require("next/config");(0,P.setConfig)(process.env.__NEXT_RUNTIME_CONFIG);var w=h(require("react")),O=require("next/dist/shared/lib/router-context"),F=h(require("next/router")),a;try{a=require("@storybook/addon-actions").action}catch{a=()=>()=>{}}var W={route:"/",pathname:"/",query:{},asPath:"/",push(...t){return a("nextRouter.push")(...t),Promise.resolve(!0)},replace(...t){return a("nextRouter.replace")(...t),Promise.resolve(!0)},reload(...t){a("nextRouter.reload")(...t)},back(...t){a("nextRouter.back")(...t)},prefetch(...t){return a("nextRouter.prefetch")(...t),Promise.resolve()},beforePopState(...t){a("nextRouter.beforePopState")(...t)},events:{on(...t){a("nextRouter.events.on")(...t)},off(...t){a("nextRouter.events.off")(...t)},emit(...t){a("nextRouter.events.emit")(...t)}},isFallback:!1},E=(t,{globals:r,parameters:i})=>{let e=i.nextRouter??{};return F.default.router={...W,locale:r==null?void 0:r.locale,...e},w.createElement(O.RouterContext.Provider,{value:F.default.router},w.createElement(t,null))};var _=h(require("react")),j;try{j=V().StyleRegistry}catch{j=_.Fragment}var B=t=>_.createElement(j,null,_.createElement(t,null));var k=h(require("react")),g=h(require("semver"));if(g.default.gt(process.env.__NEXT_VERSION,"9.0.0")){let t=require("next/image"),r=t.default;Object.defineProperty(t,"default",{configurable:!0,value:i=>typeof i.src=="string"?k.createElement(r,{...i,unoptimized:!0,blurDataURL:i.src}):k.createElement(r,{...i,unoptimized:!0})}),g.default.gte(process.env.__NEXT_VERSION,"12.1.5")&&g.default.lt(process.env.__NEXT_VERSION,"12.2.0")&&Object.defineProperty(t,"__esModule",{configurable:!0,value:!0})}var le=[B,E];0&&(module.exports={decorators});

package/dist/preview.mjs

@@ -0,0 +1,10 @@
+import{a as g,b as x,c as a,d as l}from"./chunk-D2N66TOG.mjs";var q=x(_=>{a();var p=g("react");function H(t){return t&&typeof t=="object"&&"default"in t?t:{default:t}}var v=H(p);function O(t,n){for(var i=0;i<n.length;i++){var e=n[i];e.enumerable=e.enumerable||!1,e.configurable=!0,"value"in e&&(e.writable=!0),Object.defineProperty(t,e.key,e)}}function U(t,n,i){return n&&O(t.prototype,n),i&&O(t,i),t}var S=typeof process<"u"&&l&&!0,F=function(t){return Object.prototype.toString.call(t)==="[object String]"},$=function(){function t(i){var e=i===void 0?{}:i,r=e.name,o=r===void 0?"stylesheet":r,s=e.optimizeForSpeed,u=s===void 0?S:s;f(F(o),"`name` must be a string"),this._name=o,this._deletedRulePlaceholder="#"+o+"-deleted-rule____{}",f(typeof u=="boolean","`optimizeForSpeed` must be a boolean"),this._optimizeForSpeed=u,this._serverSheet=void 0,this._tags=[],this._injected=!1,this._rulesCount=0;var d=typeof window<"u"&&document.querySelector('meta[property="csp-nonce"]');this._nonce=d?d.getAttribute("content"):null}var n=t.prototype;return n.setOptimizeForSpeed=function(e){f(typeof e=="boolean","`setOptimizeForSpeed` accepts a boolean"),f(this._rulesCount===0,"optimizeForSpeed cannot be when rules have already been inserted"),this.flush(),this._optimizeForSpeed=e,this.inject()},n.isOptimizeForSpeed=function(){return this._optimizeForSpeed},n.inject=function(){var e=this;if(f(!this._injected,"sheet already injected"),this._injected=!0,typeof window<"u"&&this._optimizeForSpeed){this._tags[0]=this.makeStyleTag(this._name),this._optimizeForSpeed="insertRule"in this.getSheet(),this._optimizeForSpeed||(S||console.warn("StyleSheet: optimizeForSpeed mode not supported falling back to standard mode."),this.flush(),this._injected=!0);return}this._serverSheet={cssRules:[],insertRule:function(r,o){return typeof o=="number"?e._serverSheet.cssRules[o]={cssText:r}:e._serverSheet.cssRules.push({cssText:r}),o},deleteRule:function(r){e._serverSheet.cssRules[r]=null}}},n.getSheetForTag=function(e){if(e.sheet)return e.sheet;for(var r=0;r<document.styleSheets.length;r++)if(document.styleSheets[r].ownerNode===e)return document.styleSheets[r]},n.getSheet=function(){return this.getSheetForTag(this._tags[this._tags.length-1])},n.insertRule=function(e,r){if(f(F(e),"`insertRule` accepts only strings"),typeof window>"u")return typeof r!="number"&&(r=this._serverSheet.cssRules.length),this._serverSheet.insertRule(e,r),this._rulesCount++;if(this._optimizeForSpeed){var o=this.getSheet();typeof r!="number"&&(r=o.cssRules.length);try{o.insertRule(e,r)}catch{return S||console.warn(`StyleSheet: illegal rule: 
+
+`+e+`
+
+See https://stackoverflow.com/q/20007992 for more info`),-1}}else{var s=this._tags[r];this._tags.push(this.makeStyleTag(this._name,e,s))}return this._rulesCount++},n.replaceRule=function(e,r){if(this._optimizeForSpeed||typeof window>"u"){var o=typeof window<"u"?this.getSheet():this._serverSheet;if(r.trim()||(r=this._deletedRulePlaceholder),!o.cssRules[e])return e;o.deleteRule(e);try{o.insertRule(r,e)}catch{S||console.warn(`StyleSheet: illegal rule: 
+
+`+r+`
+
+See https://stackoverflow.com/q/20007992 for more info`),o.insertRule(this._deletedRulePlaceholder,e)}}else{var s=this._tags[e];f(s,"old rule at index `"+e+"` not found"),s.textContent=r}return e},n.deleteRule=function(e){if(typeof window>"u"){this._serverSheet.deleteRule(e);return}if(this._optimizeForSpeed)this.replaceRule(e,"");else{var r=this._tags[e];f(r,"rule at index `"+e+"` not found"),r.parentNode.removeChild(r),this._tags[e]=null}},n.flush=function(){this._injected=!1,this._rulesCount=0,typeof window<"u"?(this._tags.forEach(function(e){return e&&e.parentNode.removeChild(e)}),this._tags=[]):this._serverSheet.cssRules=[]},n.cssRules=function(){var e=this;return typeof window>"u"?this._serverSheet.cssRules:this._tags.reduce(function(r,o){return o?r=r.concat(Array.prototype.map.call(e.getSheetForTag(o).cssRules,function(s){return s.cssText===e._deletedRulePlaceholder?null:s})):r.push(null),r},[])},n.makeStyleTag=function(e,r,o){r&&f(F(r),"makeStyleTag accepts only strings as second parameter");var s=document.createElement("style");this._nonce&&s.setAttribute("nonce",this._nonce),s.type="text/css",s.setAttribute("data-"+e,""),r&&s.appendChild(document.createTextNode(r));var u=document.head||document.getElementsByTagName("head")[0];return o?u.insertBefore(s,o):u.appendChild(s),s},U(t,[{key:"length",get:function(){return this._rulesCount}}]),t}();function f(t,n){if(!t)throw new Error("StyleSheet: "+n+".")}function G(t){for(var n=5381,i=t.length;i;)n=n*33^t.charCodeAt(--i);return n>>>0}var K=G,Q=function(t){return t.replace(/\/style/gi,"\\/style")},m={};function b(t,n){if(!n)return"jsx-"+t;var i=String(n),e=t+i;return m[e]||(m[e]="jsx-"+K(t+"-"+i)),m[e]}function E(t,n){var i=/__jsx-style-dynamic-selector/g;typeof window>"u"&&(n=Q(n));var e=t+n;return m[e]||(m[e]=n.replace(i,t)),m[e]}function W(t,n){return n===void 0&&(n={}),t.map(function(i){var e=i[0],r=i[1];return v.default.createElement("style",{id:"__"+e,key:"__"+e,nonce:n.nonce?n.nonce:void 0,dangerouslySetInnerHTML:{__html:r}})})}var Y=function(){function t(i){var e=i===void 0?{}:i,r=e.styleSheet,o=r===void 0?null:r,s=e.optimizeForSpeed,u=s===void 0?!1:s;this._sheet=o||new $({name:"styled-jsx",optimizeForSpeed:u}),this._sheet.inject(),o&&typeof u=="boolean"&&(this._sheet.setOptimizeForSpeed(u),this._optimizeForSpeed=this._sheet.isOptimizeForSpeed()),this._fromServer=void 0,this._indices={},this._instancesCounts={}}var n=t.prototype;return n.add=function(e){var r=this;this._optimizeForSpeed===void 0&&(this._optimizeForSpeed=Array.isArray(e.children),this._sheet.setOptimizeForSpeed(this._optimizeForSpeed),this._optimizeForSpeed=this._sheet.isOptimizeForSpeed()),typeof window<"u"&&!this._fromServer&&(this._fromServer=this.selectFromServer(),this._instancesCounts=Object.keys(this._fromServer).reduce(function(h,V){return h[V]=0,h},{}));var o=this.getIdAndRules(e),s=o.styleId,u=o.rules;if(s in this._instancesCounts){this._instancesCounts[s]+=1;return}var d=u.map(function(h){return r._sheet.insertRule(h)}).filter(function(h){return h!==-1});this._indices[s]=d,this._instancesCounts[s]=1},n.remove=function(e){var r=this,o=this.getIdAndRules(e).styleId;if(Z(o in this._instancesCounts,"styleId: `"+o+"` not found"),this._instancesCounts[o]-=1,this._instancesCounts[o]<1){var s=this._fromServer&&this._fromServer[o];s?(s.parentNode.removeChild(s),delete this._fromServer[o]):(this._indices[o].forEach(function(u){return r._sheet.deleteRule(u)}),delete this._indices[o]),delete this._instancesCounts[o]}},n.update=function(e,r){this.add(r),this.remove(e)},n.flush=function(){this._sheet.flush(),this._sheet.inject(),this._fromServer=void 0,this._indices={},this._instancesCounts={}},n.cssRules=function(){var e=this,r=this._fromServer?Object.keys(this._fromServer).map(function(s){return[s,e._fromServer[s]]}):[],o=this._sheet.cssRules();return r.concat(Object.keys(this._indices).map(function(s){return[s,e._indices[s].map(function(u){return o[u].cssText}).join(e._optimizeForSpeed?"":`
+`)]}).filter(function(s){return Boolean(s[1])}))},n.styles=function(e){return W(this.cssRules(),e)},n.getIdAndRules=function(e){var r=e.children,o=e.dynamic,s=e.id;if(o){var u=b(s,o);return{styleId:u,rules:Array.isArray(r)?r.map(function(d){return E(u,d)}):[E(u,r)]}}return{styleId:b(s),rules:Array.isArray(r)?r:[r]}},n.selectFromServer=function(){var e=Array.prototype.slice.call(document.querySelectorAll('[id^="__jsx-"]'));return e.reduce(function(r,o){var s=o.id.slice(2);return r[s]=o,r},{})},t}();function Z(t,n){if(!t)throw new Error("StyleSheetRegistry: "+n+".")}var R=p.createContext(null);R.displayName="StyleSheetContext";function z(){return new Y}function ee(t){var n=t.registry,i=t.children,e=p.useContext(R),r=p.useState(function(){return e||n||z()}),o=r[0];return v.default.createElement(R.Provider,{value:o},i)}function I(){return p.useContext(R)}var te=v.default.useInsertionEffect||v.default.useLayoutEffect,T=typeof window<"u"?z():void 0;function A(t){var n=T||I();return n?typeof window>"u"?(n.add(t),null):(te(function(){return n.add(t),function(){n.remove(t)}},[t.id,String(t.dynamic)]),null):null}A.dynamic=function(t){return t.map(function(n){var i=n[0],e=n[1];return b(i,e)}).join(" ")};_.StyleRegistry=ee;_.createStyleRegistry=z;_.style=A;_.useStyleRegistry=I});var X=x((ue,D)=>{a();D.exports=q()});a();a();import{setConfig as B}from"next/config";B(l.__NEXT_RUNTIME_CONFIG);a();import*as w from"react";import{RouterContext as J}from"next/dist/shared/lib/router-context";import N from"next/router";var c;try{c=g("@storybook/addon-actions").action}catch{c=()=>()=>{}}var M={route:"/",pathname:"/",query:{},asPath:"/",push(...t){return c("nextRouter.push")(...t),Promise.resolve(!0)},replace(...t){return c("nextRouter.replace")(...t),Promise.resolve(!0)},reload(...t){c("nextRouter.reload")(...t)},back(...t){c("nextRouter.back")(...t)},prefetch(...t){return c("nextRouter.prefetch")(...t),Promise.resolve()},beforePopState(...t){c("nextRouter.beforePopState")(...t)},events:{on(...t){c("nextRouter.events.on")(...t)},off(...t){c("nextRouter.events.off")(...t)},emit(...t){c("nextRouter.events.emit")(...t)}},isFallback:!1},P=(t,{globals:n,parameters:i})=>{let e=i.nextRouter??{};return N.router={...M,locale:n?.locale,...e},w.createElement(J.Provider,{value:N.router},w.createElement(t,null))};a();import*as y from"react";var C;try{C=X().StyleRegistry}catch{C=y.Fragment}var L=t=>y.createElement(C,null,y.createElement(t,null));a();import*as k from"react";import j from"semver";if(j.gt(l.__NEXT_VERSION,"9.0.0")){let t=g("next/image"),n=t.default;Object.defineProperty(t,"default",{configurable:!0,value:i=>typeof i.src=="string"?k.createElement(n,{...i,unoptimized:!0,blurDataURL:i.src}):k.createElement(n,{...i,unoptimized:!0})}),j.gte(l.__NEXT_VERSION,"12.1.5")&&j.lt(l.__NEXT_VERSION,"12.2.0")&&Object.defineProperty(t,"__esModule",{configurable:!0,value:!0})}var me=[L,P];export{me as decorators};

package/dist/types-4223e3ef.d.ts

@@ -0,0 +1,28 @@
+import { ReactOptions, StorybookConfig as StorybookConfig$1, TypescriptOptions as TypescriptOptions$1 } from '@storybook/preset-react-webpack';
+import { BuilderOptions, StorybookConfigWebpack, TypescriptOptions } from '@storybook/builder-webpack5';
+
+declare type FrameworkName = '@storybook/nextjs';
+declare type BuilderName = '@storybook/builder-webpack5';
+declare type FrameworkOptions = ReactOptions & {
+    nextConfigPath?: string;
+    builder?: BuilderOptions;
+};
+declare type StorybookConfigFramework = {
+    framework: FrameworkName | {
+        name: FrameworkName;
+        options: FrameworkOptions;
+    };
+    core?: StorybookConfig$1['core'] & {
+        builder?: BuilderName | {
+            name: BuilderName;
+            options: BuilderOptions;
+        };
+    };
+    typescript?: Partial<TypescriptOptions & TypescriptOptions$1> & StorybookConfig$1['typescript'];
+};
+/**
+ * The interface for Storybook configuration in `main.ts` files.
+ */
+declare type StorybookConfig = Omit<StorybookConfig$1, keyof StorybookConfigWebpack | keyof StorybookConfigFramework> & StorybookConfigWebpack & StorybookConfigFramework;
+
+export { FrameworkOptions as F, StorybookConfig as S };

package/package.json

@@ -0,0 +1,124 @@
+{
+  "name": "@storybook/nextjs",
+  "version": "7.0.0-alpha.41",
+  "description": "Storybook for Next.js",
+  "keywords": [
+    "storybook",
+    "nextjs"
+  ],
+  "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/nextjs",
+  "bugs": {
+    "url": "https://github.com/storybookjs/storybook/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/storybookjs/storybook.git",
+    "directory": "code/frameworks/nextjs"
+  },
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/storybook"
+  },
+  "license": "MIT",
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./preset": {
+      "require": "./dist/preset.js",
+      "import": "./dist/preset.mjs",
+      "types": "./dist/preset.d.ts"
+    },
+    "./preview.js": {
+      "require": "./dist/preview.js",
+      "import": "./dist/preview.mjs",
+      "types": "./dist/preview.d.ts"
+    },
+    "./next-image-loader-stub.js": {
+      "require": "./dist/next-image-loader-stub.js",
+      "import": "./dist/next-image-loader-stub.mjs",
+      "types": "./dist/next-image-loader-stub.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/**/*",
+    "types/**/*",
+    "README.md",
+    "*.js",
+    "*.d.ts"
+  ],
+  "scripts": {
+    "check": "tsc --noEmit",
+    "prep": "../../../scripts/prepare/bundle.ts"
+  },
+  "dependencies": {
+    "@babel/preset-typescript": "^7.18.6",
+    "@storybook/addons": "7.0.0-alpha.41",
+    "@storybook/builder-webpack5": "7.0.0-alpha.41",
+    "@storybook/core-common": "7.0.0-alpha.41",
+    "@storybook/node-logger": "7.0.0-alpha.41",
+    "@storybook/preset-react-webpack": "7.0.0-alpha.41",
+    "@storybook/react": "7.0.0-alpha.41",
+    "@types/node": "^14.14.20 || ^16.0.0",
+    "find-up": "^5.0.0",
+    "fs-extra": "^9.0.1",
+    "image-size": "^1.0.0",
+    "loader-utils": "^3.2.0",
+    "pnp-webpack-plugin": "^1.7.0",
+    "postcss-loader": "^6.2.1",
+    "resolve-url-loader": "^5.0.0",
+    "sass-loader": "^12.4.0",
+    "semver": "^7.3.5",
+    "ts-dedent": "^2.0.0",
+    "tsconfig-paths": "^4.0.0",
+    "tsconfig-paths-webpack-plugin": "^3.5.2"
+  },
+  "devDependencies": {
+    "@storybook/addon-actions": "7.0.0-alpha.41",
+    "@types/loader-utils": "^2.0.3",
+    "next": "^12.2.4",
+    "typescript": "~4.6.3",
+    "webpack": "^5.65.0"
+  },
+  "peerDependencies": {
+    "@babel/core": "^7.11.5",
+    "@storybook/addon-actions": "7.0.0-alpha.40",
+    "next": "^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "webpack": "^5.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@babel/core": {
+      "optional": true
+    },
+    "@storybook/addon-actions": {
+      "optional": true
+    },
+    "typescript": {
+      "optional": true
+    }
+  },
+  "engines": {
+    "node": ">=10.13.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "bundler": {
+    "entries": [
+      "./src/index.ts",
+      "./src/preset.ts",
+      "./src/preview.tsx",
+      "./src/next-image-loader-stub.ts"
+    ],
+    "platform": "node"
+  },
+  "gitHead": "7ec6f916eb875bd2e3cf3aa6b1afcd1fe25d1637"
+}

package/preset.js

@@ -0,0 +1 @@
+module.exports = require('./dist/preset');