@storybook/nextjs 7.1.0-alpha.4 → 7.1.0-alpha.40

package/README.md

@@ -28,7 +28,7 @@
     - [Set `nextjs.appDirectory` to `true`](#set-nextjsappdirectory-to-true)
     - [Overriding defaults](#overriding-defaults-1)
     - [Global Defaults](#global-defaults-1)
-    - [`useSelectedLayoutSegment` and `useSelectedLayoutSegments` hook](#useselectedlayoutsegment-and-useselectedlayoutsegments-hook)
+    - [`useSelectedLayoutSegment` `useSelectedLayoutSegments` and `useParams` hook](#useselectedlayoutsegment-useselectedlayoutsegments-and-useparams-hook)
     - [Default Navigation Context](#default-navigation-context)
     - [Actions Integration Caveats](#actions-integration-caveats-1)
   - [Next.js Head](#nextjs-head)
@@ -44,7 +44,7 @@
   - [FAQ](#faq)
     - [Stories for pages/components which fetch data](#stories-for-pagescomponents-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)
+    - [Module not found: Error: Can't resolve `package name`](#module-not-found-error-cant-resolve-package-name)
     - [What if I'm using the Vite builder?](#what-if-im-using-the-vite-builder)
 - [Acknowledgements](#acknowledgements)
 
@@ -159,12 +159,16 @@ export default {
   framework: {
     name: '@storybook/nextjs',
     options: {
+      image: {
+        loading: 'eager',
+      },
       nextConfigPath: path.resolve(__dirname, '../next.config.js'),
     },
   },
 };
 ```
 
+- `image`: Props to pass to every instance of `next/image`
 - `nextConfigPath`: The absolute path to the `next.config.js`
 
 ### Next.js's Image Component
@@ -499,9 +503,9 @@ export const parameters = {
 };
 ```
 
-#### `useSelectedLayoutSegment` and `useSelectedLayoutSegments` hook
+#### `useSelectedLayoutSegment` `useSelectedLayoutSegments` and `useParams` hook
 
-The `useSelectedLayoutSegment` and `useSelectedLayoutSegments` hooks are supported in Storybook. You have to set the `nextjs.navigation.segments` parameter to return the segments you want to use.
+The `useSelectedLayoutSegment` `useSelectedLayoutSegments` and `useParams` hooks are supported in Storybook. You have to set the `nextjs.navigation.segments` parameter to return the segments or the params you want to use.
 
 ```js
 // SomeComponentThatUsesTheNavigation.stories.js
@@ -522,11 +526,46 @@ export default {
 export const Example = {};
 
 // SomeComponentThatUsesTheNavigation.js
-import { useSelectedLayoutSegment, useSelectedLayoutSegments } from 'next/navigation';
+import { useSelectedLayoutSegment, useSelectedLayoutSegments, useParams } from 'next/navigation';
 
 export default function SomeComponentThatUsesTheNavigation() {
   const segment = useSelectedLayoutSegment(); // dashboard
   const segments = useSelectedLayoutSegments(); // ["dashboard", "analytics"]
+  const params = useParams(); // {}
+  ...
+}
+```
+
+To use `useParams`, you have to use a two string elements array for a segment, the first array element is the param key and the second array element is the param value.
+
+```js
+// SomeComponentThatUsesParams.stories.js
+import SomeComponentThatUsesParams from './SomeComponentThatUsesParams';
+
+export default {
+  component: SomeComponentThatUsesParams,
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+      navigation: {
+        segments: [
+          ['slug', 'hello'],
+          ['framework', 'nextjs'],
+        ]
+      },
+    },
+  },
+};
+
+export const Example = {};
+
+// SomeComponentThatUsesParams.js
+import { useSelectedLayoutSegment, useSelectedLayoutSegments, useParams } from 'next/navigation';
+
+export default function SomeComponentThatUsesParams() {
+  const segment = useSelectedLayoutSegment(); // hello
+  const segments = useSelectedLayoutSegments(); // ["hello", "nextjs"]
+  const params = useParams(); // { slug: "hello", framework: "nextjs" }
   ...
 }
 ```
@@ -926,7 +965,7 @@ Therefore, if something in storybook isn't showing the image properly, make sure
 
 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]
+#### 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.
 

package/dist/chunk-YPQDI6HO.mjs

@@ -1 +1,3 @@
-var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __hasOwnProp=Object.prototype.hasOwnProperty;var __require=(x=>typeof require<"u"?require:typeof Proxy<"u"?new Proxy(x,{get:(a,b)=>(typeof require<"u"?require:a)[b]}):x)(function(x){if(typeof require<"u")return require.apply(this,arguments);throw new Error('Dynamic require of "'+x+'" is not supported')});var __esm=(fn,res)=>function(){return fn&&(res=(0,fn[__getOwnPropNames(fn)[0]])(fn=0)),res};var __commonJS=(cb,mod)=>function(){return mod||(0,cb[__getOwnPropNames(cb)[0]])((mod={exports:{}}).exports,mod),mod.exports};var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);export{__require,__esm,__commonJS,__export,__toCommonJS};
+var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __hasOwnProp=Object.prototype.hasOwnProperty;var __require=(x=>typeof require<"u"?require:typeof Proxy<"u"?new Proxy(x,{get:(a,b)=>(typeof require<"u"?require:a)[b]}):x)(function(x){if(typeof require<"u")return require.apply(this,arguments);throw new Error('Dynamic require of "'+x+'" is not supported')});var __esm=(fn,res)=>function(){return fn&&(res=(0, fn[__getOwnPropNames(fn)[0]])(fn=0)),res};var __commonJS=(cb,mod)=>function(){return mod||(0, cb[__getOwnPropNames(cb)[0]])((mod={exports:{}}).exports,mod),mod.exports};var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0});},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);
+
+export { __commonJS, __esm, __export, __require, __toCommonJS };

package/dist/font/webpack/loader/storybook-nextjs-font-loader.js

@@ -22,7 +22,7 @@
     }
 
     ${options.variable?`.${variableClassName} { ${options.variable}: '${options.fontFamily}'; }`:""}
-  `,fontFaceCSS=`${changeFontDisplayToSwap(options.fontFaceCSS)}`;return{className,fontFaceCSS,classNamesCSS,style,...options.variable?{variableClassName}:{}}}function getClassName({styles,weights,fontFamily}){let font=fontFamily.replace(" ","-").toLowerCase(),style=isNextCSSPropertyValid(styles)?styles[0]:null,weight=isNextCSSPropertyValid(weights)?weights[0]:null;return`${font}${style?`-${style}`:""}${weight?`-${weight}`:""}`}function getStylesObj({styles,weights,fontFamily}){return{fontFamily,...isNextCSSPropertyValid(styles)?{fontStyle:styles[0]}:{},...isNextCSSPropertyValid(weights)?{fontWeight:weights[0]}:{}}}function isNextCSSPropertyValid(prop){return prop.length===1&&prop[0]!=="variable"}function changeFontDisplayToSwap(css){return css.replaceAll("font-display: optional;","font-display: block;")}function setFontDeclarationsInHead({id,fontFaceCSS,classNamesCSS}){return`
+  `,fontFaceCSS=`${changeFontDisplayToSwap(options.fontFaceCSS)}`;return{className,fontFaceCSS,classNamesCSS,style,...options.variable?{variableClassName}:{}}}function getClassName({styles,weights,fontFamily}){let font=fontFamily.replaceAll(" ","-").toLowerCase(),style=isNextCSSPropertyValid(styles)?styles[0]:null,weight=isNextCSSPropertyValid(weights)?weights[0]:null;return`${font}${style?`-${style}`:""}${weight?`-${weight}`:""}`}function getStylesObj({styles,weights,fontFamily}){return{fontFamily,...isNextCSSPropertyValid(styles)?{fontStyle:styles[0]}:{},...isNextCSSPropertyValid(weights)?{fontWeight:weights[0]}:{}}}function isNextCSSPropertyValid(prop){return prop.length===1&&prop[0]!=="variable"}function changeFontDisplayToSwap(css){return css.replaceAll("font-display: optional;","font-display: block;")}function setFontDeclarationsInHead({id,fontFaceCSS,classNamesCSS}){return`
     if (!document.getElementById('id-${id}')) {
       const fontDeclarations = \`${fontFaceCSS}\`;
       const style = document.createElement('style');
@@ -45,4 +45,4 @@
       style: ${JSON.stringify(cssMeta.style)}
       ${cssMeta.variableClassName?`, variable: "${cssMeta.variableClassName}"`:""}
     }
-    `}return"module.exports = {}"}0&&(module.exports={});
+    `}return"module.exports = {}"}

package/dist/font/webpack/loader/storybook-nextjs-font-loader.mjs

@@ -1,15 +1,20 @@
-import{__esm,__export,__require,__toCommonJS}from"../../../chunk-YPQDI6HO.mjs";var google_font_utils_exports={};__export(google_font_utils_exports,{fetchCSSFromGoogleFonts:()=>fetchCSSFromGoogleFonts,getFontAxes:()=>getFontAxes,getUrl:()=>getUrl,validateData:()=>validateData});import dedent from"ts-dedent";var validateData,getUrl,getFontAxes,fetchCSSFromGoogleFonts,init_google_font_utils=__esm({"src/font/webpack/loader/utils/google-font-utils.ts"(){"use strict";try{let fontUtils=__require("@next/font/dist/google/utils");validateData=fontUtils.validateData,getUrl=fontUtils.getUrl,getFontAxes=fontUtils.getFontAxes,fetchCSSFromGoogleFonts=fontUtils.fetchCSSFromGoogleFonts}catch{try{let fontUtils=__require("next/dist/compiled/@next/font/dist/google/utils");validateData=fontUtils.validateData,getUrl=fontUtils.getUrl,getFontAxes=fontUtils.getFontAxes,fetchCSSFromGoogleFonts=fontUtils.fetchCSSFromGoogleFonts}catch{try{validateData=(functionName,fontData,config)=>__require("next/dist/compiled/@next/font/dist/google/validate-google-font-function-call").validateGoogleFontFunctionCall(functionName,fontData[0],config),getUrl=__require("next/dist/compiled/@next/font/dist/google/get-google-fonts-url").getGoogleFontsUrl,getFontAxes=__require("next/dist/compiled/@next/font/dist/google/get-font-axes").getFontAxes,fetchCSSFromGoogleFonts=__require("next/dist/compiled/@next/font/dist/google/fetch-css-from-google-fonts").fetchCSSFromGoogleFonts}catch{throw new Error(dedent`
+import { __export, __esm, __require, __toCommonJS } from '../../../chunk-YPQDI6HO.mjs';
+import dedent from 'ts-dedent';
+import loaderUtils from 'next/dist/compiled/loader-utils3';
+import path from 'path';
+
+var google_font_utils_exports={};__export(google_font_utils_exports,{fetchCSSFromGoogleFonts:()=>fetchCSSFromGoogleFonts,getFontAxes:()=>getFontAxes,getUrl:()=>getUrl,validateData:()=>validateData});var validateData,getUrl,getFontAxes,fetchCSSFromGoogleFonts,init_google_font_utils=__esm({"src/font/webpack/loader/utils/google-font-utils.ts"(){try{let fontUtils=__require("@next/font/dist/google/utils");validateData=fontUtils.validateData,getUrl=fontUtils.getUrl,getFontAxes=fontUtils.getFontAxes,fetchCSSFromGoogleFonts=fontUtils.fetchCSSFromGoogleFonts;}catch{try{let fontUtils=__require("next/dist/compiled/@next/font/dist/google/utils");validateData=fontUtils.validateData,getUrl=fontUtils.getUrl,getFontAxes=fontUtils.getFontAxes,fetchCSSFromGoogleFonts=fontUtils.fetchCSSFromGoogleFonts;}catch{try{validateData=(functionName,fontData,config)=>__require("next/dist/compiled/@next/font/dist/google/validate-google-font-function-call").validateGoogleFontFunctionCall(functionName,fontData[0],config),getUrl=__require("next/dist/compiled/@next/font/dist/google/get-google-fonts-url").getGoogleFontsUrl,getFontAxes=__require("next/dist/compiled/@next/font/dist/google/get-font-axes").getFontAxes,fetchCSSFromGoogleFonts=__require("next/dist/compiled/@next/font/dist/google/fetch-css-from-google-fonts").fetchCSSFromGoogleFonts;}catch{throw new Error(dedent`
         We are unable to load the helper functions to use next/font/google.
         Please downgrade Next.js to version 13.2.4 to continue to use next/font/google in Storybook.
         Feel free to open a Github Issue!
-      `)}}}}});var local_font_utils_exports={};__export(local_font_utils_exports,{validateData:()=>validateData2});import dedent2 from"ts-dedent";var validateData2,init_local_font_utils=__esm({"src/font/webpack/loader/utils/local-font-utils.ts"(){"use strict";try{validateData2=__require("@next/font/dist/local/utils").validateData}catch{try{validateData2=__require("next/dist/compiled/@next/font/dist/local/utils").validateData}catch{try{validateData2=__require("next/dist/compiled/@next/font/dist/local/validate-local-font-function-call").validateLocalFontFunctionCall}catch{throw new Error(dedent2`
+      `)}}}}});var local_font_utils_exports={};__export(local_font_utils_exports,{validateData:()=>validateData2});var validateData2,init_local_font_utils=__esm({"src/font/webpack/loader/utils/local-font-utils.ts"(){try{validateData2=__require("@next/font/dist/local/utils").validateData;}catch{try{validateData2=__require("next/dist/compiled/@next/font/dist/local/utils").validateData;}catch{try{validateData2=__require("next/dist/compiled/@next/font/dist/local/validate-local-font-function-call").validateLocalFontFunctionCall;}catch{throw new Error(dedent`
         We are unable to load the helper functions to use next/font/local.
         Please downgrade Next.js to version 13.2.4 to continue to use next/font/local in Storybook.
         Feel free to open a Github Issue!
-      `)}}}}});import loaderUtils from"next/dist/compiled/loader-utils3";var cssCache=new Map;async function getFontFaceDeclarations(options){let{fetchCSSFromGoogleFonts:fetchCSSFromGoogleFonts2,getFontAxes:getFontAxes2,getUrl:getUrl2,validateData:validateData3}=(init_google_font_utils(),__toCommonJS(google_font_utils_exports)),{fontFamily,weights,styles,selectedVariableAxes,display,variable}=validateData3(options.fontFamily,[options.props],null),fontAxes=getFontAxes2(fontFamily,weights,styles,selectedVariableAxes),url=getUrl2(fontFamily,fontAxes,display);try{let hasCachedCSS=cssCache.has(url),fontFaceCSS=hasCachedCSS?cssCache.get(url):await fetchCSSFromGoogleFonts2(url,fontFamily).catch(()=>null);if(hasCachedCSS?cssCache.delete(url):cssCache.set(url,fontFaceCSS),fontFaceCSS===null)throw Error(`Failed to fetch \`${fontFamily}\` from Google Fonts.`);return{id:loaderUtils.getHashDigest(url,"md5","hex",6),fontFamily,fontFaceCSS,weights,styles,variable}}catch{throw new Error("Google Fonts couldn't be loaded.")}}import loaderUtils2 from"next/dist/compiled/loader-utils3";import path from"path";async function getFontFaceDeclarations2(options,rootContext){let localFontSrc=options.props.src,parentFolder=options.filename.split("/").slice(0,-1).join("/").replace(rootContext,""),{validateData:validateData3}=(init_local_font_utils(),__toCommonJS(local_font_utils_exports)),{weight,style,variable}=validateData3("",options.props),id=`font-${loaderUtils2.getHashDigest(Buffer.from(JSON.stringify(localFontSrc)),"md5","hex",6)}`;return{id,fontFamily:id,fontFaceCSS:(()=>{if(typeof localFontSrc=="string"){let localFontPath=path.join(parentFolder,localFontSrc);return`@font-face {
+      `)}}}}});var cssCache=new Map;async function getFontFaceDeclarations(options){let{fetchCSSFromGoogleFonts:fetchCSSFromGoogleFonts2,getFontAxes:getFontAxes2,getUrl:getUrl2,validateData:validateData3}=(init_google_font_utils(),__toCommonJS(google_font_utils_exports)),{fontFamily,weights,styles,selectedVariableAxes,display,variable}=validateData3(options.fontFamily,[options.props],null),fontAxes=getFontAxes2(fontFamily,weights,styles,selectedVariableAxes),url=getUrl2(fontFamily,fontAxes,display);try{let hasCachedCSS=cssCache.has(url),fontFaceCSS=hasCachedCSS?cssCache.get(url):await fetchCSSFromGoogleFonts2(url,fontFamily).catch(()=>null);if(hasCachedCSS?cssCache.delete(url):cssCache.set(url,fontFaceCSS),fontFaceCSS===null)throw Error(`Failed to fetch \`${fontFamily}\` from Google Fonts.`);return {id:loaderUtils.getHashDigest(url,"md5","hex",6),fontFamily,fontFaceCSS,weights,styles,variable}}catch{throw new Error("Google Fonts couldn't be loaded.")}}async function getFontFaceDeclarations2(options,rootContext){let localFontSrc=options.props.src,parentFolder=options.filename.split("/").slice(0,-1).join("/").replace(rootContext,""),{validateData:validateData3}=(init_local_font_utils(),__toCommonJS(local_font_utils_exports)),{weight,style,variable}=validateData3("",options.props),id=`font-${loaderUtils.getHashDigest(Buffer.from(JSON.stringify(localFontSrc)),"md5","hex",6)}`;return {id,fontFamily:id,fontFaceCSS:(()=>{if(typeof localFontSrc=="string"){let localFontPath=path.join(parentFolder,localFontSrc);return `@font-face {
           font-family: ${id};
           src: url(${localFontPath});
-      }`}return localFontSrc.map(font=>{let localFontPath=path.join(parentFolder,font.path);return`@font-face {
+      }`}return localFontSrc.map(font=>{let localFontPath=path.join(parentFolder,font.path);return `@font-face {
           font-family: ${id};
           src: url(${localFontPath});
           ${font.weight?`font-weight: ${font.weight};`:""}
@@ -22,7 +27,7 @@ import{__esm,__export,__require,__toCommonJS}from"../../../chunk-YPQDI6HO.mjs";v
     }
 
     ${options.variable?`.${variableClassName} { ${options.variable}: '${options.fontFamily}'; }`:""}
-  `,fontFaceCSS=`${changeFontDisplayToSwap(options.fontFaceCSS)}`;return{className,fontFaceCSS,classNamesCSS,style,...options.variable?{variableClassName}:{}}}function getClassName({styles,weights,fontFamily}){let font=fontFamily.replace(" ","-").toLowerCase(),style=isNextCSSPropertyValid(styles)?styles[0]:null,weight=isNextCSSPropertyValid(weights)?weights[0]:null;return`${font}${style?`-${style}`:""}${weight?`-${weight}`:""}`}function getStylesObj({styles,weights,fontFamily}){return{fontFamily,...isNextCSSPropertyValid(styles)?{fontStyle:styles[0]}:{},...isNextCSSPropertyValid(weights)?{fontWeight:weights[0]}:{}}}function isNextCSSPropertyValid(prop){return prop.length===1&&prop[0]!=="variable"}function changeFontDisplayToSwap(css){return css.replaceAll("font-display: optional;","font-display: block;")}function setFontDeclarationsInHead({id,fontFaceCSS,classNamesCSS}){return`
+  `,fontFaceCSS=`${changeFontDisplayToSwap(options.fontFaceCSS)}`;return {className,fontFaceCSS,classNamesCSS,style,...options.variable?{variableClassName}:{}}}function getClassName({styles,weights,fontFamily}){let font=fontFamily.replaceAll(" ","-").toLowerCase(),style=isNextCSSPropertyValid(styles)?styles[0]:null,weight=isNextCSSPropertyValid(weights)?weights[0]:null;return `${font}${style?`-${style}`:""}${weight?`-${weight}`:""}`}function getStylesObj({styles,weights,fontFamily}){return {fontFamily,...isNextCSSPropertyValid(styles)?{fontStyle:styles[0]}:{},...isNextCSSPropertyValid(weights)?{fontWeight:weights[0]}:{}}}function isNextCSSPropertyValid(prop){return prop.length===1&&prop[0]!=="variable"}function changeFontDisplayToSwap(css){return css.replaceAll("font-display: optional;","font-display: block;")}function setFontDeclarationsInHead({id,fontFaceCSS,classNamesCSS}){return `
     if (!document.getElementById('id-${id}')) {
       const fontDeclarations = \`${fontFaceCSS}\`;
       const style = document.createElement('style');
@@ -37,7 +42,7 @@ import{__esm,__export,__require,__toCommonJS}from"../../../chunk-YPQDI6HO.mjs";v
       document.head.appendChild(classNamesStyle);
 
     }
-  `}async function storybookNextjsFontLoader(){let options=this.getOptions(),rootCtx=this.rootContext,fontFaceDeclaration;if((options.source==="next/font/google"||options.source==="@next/font/google")&&(fontFaceDeclaration=await getFontFaceDeclarations(options)),(options.source==="next/font/local"||options.source==="@next/font/local")&&(fontFaceDeclaration=await getFontFaceDeclarations2(options,rootCtx)),typeof fontFaceDeclaration<"u"){let cssMeta=getCSSMeta(fontFaceDeclaration);return`
+  `}async function storybookNextjsFontLoader(){let options=this.getOptions(),rootCtx=this.rootContext,fontFaceDeclaration;if((options.source==="next/font/google"||options.source==="@next/font/google")&&(fontFaceDeclaration=await getFontFaceDeclarations(options)),(options.source==="next/font/local"||options.source==="@next/font/local")&&(fontFaceDeclaration=await getFontFaceDeclarations2(options,rootCtx)),typeof fontFaceDeclaration<"u"){let cssMeta=getCSSMeta(fontFaceDeclaration);return `
     ${setFontDeclarationsInHead({fontFaceCSS:cssMeta.fontFaceCSS,id:fontFaceDeclaration.id,classNamesCSS:cssMeta.classNamesCSS})}
 
     module.exports = {
@@ -45,4 +50,6 @@ import{__esm,__export,__require,__toCommonJS}from"../../../chunk-YPQDI6HO.mjs";v
       style: ${JSON.stringify(cssMeta.style)}
       ${cssMeta.variableClassName?`, variable: "${cssMeta.variableClassName}"`:""}
     }
-    `}return"module.exports = {}"}export{storybookNextjsFontLoader as default};
+    `}return "module.exports = {}"}
+
+export { storybookNextjsFontLoader as default };