@storybook/nextjs 7.1.0-alpha.36 → 7.1.0-alpha.37

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)
@@ -503,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
@@ -526,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" }
   ...
 }
 ```

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');

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

@@ -27,7 +27,7 @@ var google_font_utils_exports={};__export(google_font_utils_exports,{fetchCSSFro
     }
 
     ${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');

package/dist/preview.js

@@ -1 +1 @@
-"use strict";var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __getProtoOf=Object.getPrototypeOf,__hasOwnProp=Object.prototype.hasOwnProperty;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 __toESM=(mod,isNodeMode,target)=>(target=mod!=null?__create(__getProtoOf(mod)):{},__copyProps(isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod)),__toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var preview_exports={};__export(preview_exports,{decorators:()=>decorators,parameters:()=>parameters});module.exports=__toCommonJS(preview_exports);var import_config=require("next/config");(0,import_config.setConfig)(process.env.__NEXT_RUNTIME_CONFIG);var React=__toESM(require("react"));var import_react=require("react"),ImageContext=(0,import_react.createContext)({});var ImageDecorator=(Story,{parameters:parameters2})=>{var _a;return(_a=parameters2.nextjs)!=null&&_a.image?React.createElement(ImageContext.Provider,{value:parameters2.nextjs.image},React.createElement(Story,null)):React.createElement(Story,null)};var React4=__toESM(require("react"));var import_react2=__toESM(require("react")),AppRouterContext,LayoutRouterContext,PathnameContext,SearchParamsContext;try{AppRouterContext=require("next/dist/shared/lib/app-router-context").AppRouterContext,LayoutRouterContext=require("next/dist/shared/lib/app-router-context").LayoutRouterContext,PathnameContext=require("next/dist/shared/lib/hooks-client-context").PathnameContext,SearchParamsContext=require("next/dist/shared/lib/hooks-client-context").SearchParamsContext}catch{AppRouterContext=import_react2.default.Fragment,LayoutRouterContext=import_react2.default.Fragment,PathnameContext=import_react2.default.Fragment,SearchParamsContext=import_react2.default.Fragment}var getParallelRoutes=segmentsList=>{let segment=segmentsList.shift();return segment?[segment,{children:getParallelRoutes(segmentsList)}]:[]},AppRouterProvider=({children,action:action2,routeParams})=>{let{pathname,query,segments=[],...restRouteParams}=routeParams;return import_react2.default.createElement(AppRouterContext.Provider,{value:{push(...args){action2("nextNavigation.push")(...args)},replace(...args){action2("nextNavigation.replace")(...args)},forward(...args){action2("nextNavigation.forward")(...args)},back(...args){action2("nextNavigation.back")(...args)},prefetch(...args){action2("nextNavigation.prefetch")(...args)},refresh:()=>{action2("nextNavigation.refresh")()},...restRouteParams}},import_react2.default.createElement(SearchParamsContext.Provider,{value:new URLSearchParams(query)},import_react2.default.createElement(LayoutRouterContext.Provider,{value:{childNodes:new Map,tree:[pathname,{children:getParallelRoutes([...segments])}],url:pathname,headRenderedAboveThisLevel:!0}},import_react2.default.createElement(PathnameContext.Provider,{value:pathname},children))))},app_router_provider_default=AppRouterProvider;var import_router_context=require("next/dist/shared/lib/router-context"),import_react3=__toESM(require("react")),PageRouterProvider=({children,action:action2,routeParams,globals})=>import_react3.default.createElement(import_router_context.RouterContext.Provider,{value:{push(...args){return action2("nextRouter.push")(...args),Promise.resolve(!0)},replace(...args){return action2("nextRouter.replace")(...args),Promise.resolve(!0)},reload(...args){action2("nextRouter.reload")(...args)},back(...args){action2("nextRouter.back")(...args)},forward(){action2("nextRouter.forward")()},prefetch(...args){return action2("nextRouter.prefetch")(...args),Promise.resolve()},beforePopState(...args){action2("nextRouter.beforePopState")(...args)},events:{on(...args){action2("nextRouter.events.on")(...args)},off(...args){action2("nextRouter.events.off")(...args)},emit(...args){action2("nextRouter.events.emit")(...args)}},locale:globals==null?void 0:globals.locale,route:"/",asPath:"/",basePath:"/",isFallback:!1,isLocaleDomain:!1,isReady:!0,isPreview:!1,...routeParams}},children),page_router_provider_default=PageRouterProvider;var action;try{action=require("@storybook/addon-actions").action}catch{action=()=>()=>{}}var defaultRouterParams={pathname:"/",query:{}},RouterDecorator=(Story,{globals,parameters:parameters2})=>{var _a,_b,_c;return((_a=parameters2.nextjs)==null?void 0:_a.appDirectory)??!1?React4.createElement(app_router_provider_default,{action,routeParams:{...defaultRouterParams,...(_b=parameters2.nextjs)==null?void 0:_b.navigation}},React4.createElement(Story,null)):React4.createElement(page_router_provider_default,{action,globals,routeParams:{...defaultRouterParams,...(_c=parameters2.nextjs)==null?void 0:_c.router}},React4.createElement(Story,null))};var React5=__toESM(require("react")),StyleRegistry;try{StyleRegistry=require("styled-jsx").StyleRegistry}catch{StyleRegistry=React5.Fragment}var StyledJsxDecorator=Story=>React5.createElement(StyleRegistry,null,React5.createElement(Story,null));var React6=__toESM(require("react")),import_semver=__toESM(require("semver"));var defaultLoader=({src,width,quality})=>{let missingValues=[];if(src||missingValues.push("src"),width||missingValues.push("width"),missingValues.length>0)throw new Error(`Next Image Optimization requires ${missingValues.join(", ")} to be provided. Make sure you pass them as props to the \`next/image\` component. Received: ${JSON.stringify({src,width,quality})}`);return`${src}?w=${width}&q=${quality??75}`},NextImage=require("next/image"),OriginalNextImage=NextImage.default;Object.defineProperty(NextImage,"default",{configurable:!0,value:props=>{let imageParameters=React6.useContext(ImageContext);return React6.createElement(OriginalNextImage,{...imageParameters,...props,loader:props.loader??defaultLoader})}});if(import_semver.default.satisfies(process.env.__NEXT_VERSION,"^13.0.0")){let OriginalNextLegacyImage=require("next/legacy/image").default;Object.defineProperty(OriginalNextLegacyImage,"default",{configurable:!0,value:props=>{let imageParameters=React6.useContext(ImageContext);return React6.createElement(OriginalNextLegacyImage,{...imageParameters,...props,loader:props.loader??defaultLoader})}})}if(import_semver.default.satisfies(process.env.__NEXT_VERSION,"^12.2.0")){let OriginalNextFutureImage=require("next/future/image").default;Object.defineProperty(OriginalNextFutureImage,"default",{configurable:!0,value:props=>{let imageParameters=React6.useContext(ImageContext);return React6.createElement(OriginalNextFutureImage,{...imageParameters,...props,loader:props.loader??defaultLoader})}})}var React8=__toESM(require("react"));var import_react4=__toESM(require("react")),import_head_manager_context=require("next/dist/shared/lib/head-manager-context"),import_head_manager=__toESM(require("next/dist/client/head-manager")),HeadManagerProvider=({children})=>{let headManager=(0,import_react4.useMemo)(import_head_manager.default,[]);return headManager.getIsSsr=()=>!1,import_react4.default.createElement(import_head_manager_context.HeadManagerContext.Provider,{value:headManager},children)},head_manager_provider_default=HeadManagerProvider;var HeadManagerDecorator=Story=>React8.createElement(head_manager_provider_default,null,React8.createElement(Story,null));function addNextHeadCount(){let meta=document.createElement("meta");meta.name="next-head-count",meta.content="0",document.head.appendChild(meta)}addNextHeadCount();var decorators=[StyledJsxDecorator,ImageDecorator,RouterDecorator,HeadManagerDecorator],parameters={docs:{source:{excludeDecorators:!0}}};0&&(module.exports={decorators,parameters});
+"use strict";var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __getProtoOf=Object.getPrototypeOf,__hasOwnProp=Object.prototype.hasOwnProperty;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 __toESM=(mod,isNodeMode,target)=>(target=mod!=null?__create(__getProtoOf(mod)):{},__copyProps(isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod)),__toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var preview_exports={};__export(preview_exports,{decorators:()=>decorators,parameters:()=>parameters});module.exports=__toCommonJS(preview_exports);var import_config=require("next/config");(0,import_config.setConfig)(process.env.__NEXT_RUNTIME_CONFIG);var React=__toESM(require("react"));var import_react=require("react"),ImageContext=(0,import_react.createContext)({});var ImageDecorator=(Story,{parameters:parameters2})=>{var _a;return(_a=parameters2.nextjs)!=null&&_a.image?React.createElement(ImageContext.Provider,{value:parameters2.nextjs.image},React.createElement(Story,null)):React.createElement(Story,null)};var React4=__toESM(require("react"));var import_react2=__toESM(require("react")),AppRouterContext,LayoutRouterContext,PathnameContext,SearchParamsContext,GlobalLayoutRouterContext;try{AppRouterContext=require("next/dist/shared/lib/app-router-context").AppRouterContext,LayoutRouterContext=require("next/dist/shared/lib/app-router-context").LayoutRouterContext,PathnameContext=require("next/dist/shared/lib/hooks-client-context").PathnameContext,SearchParamsContext=require("next/dist/shared/lib/hooks-client-context").SearchParamsContext,GlobalLayoutRouterContext=require("next/dist/shared/lib/app-router-context").GlobalLayoutRouterContext}catch{AppRouterContext=import_react2.default.Fragment,LayoutRouterContext=import_react2.default.Fragment,PathnameContext=import_react2.default.Fragment,SearchParamsContext=import_react2.default.Fragment,GlobalLayoutRouterContext=import_react2.default.Fragment}var getParallelRoutes=segmentsList=>{let segment=segmentsList.shift();return segment?[segment,{children:getParallelRoutes(segmentsList)}]:[]},AppRouterProvider=({children,action:action2,routeParams})=>{let{pathname,query,segments=[],...restRouteParams}=routeParams,tree=[pathname,{children:getParallelRoutes([...segments])}];return import_react2.default.createElement(PathnameContext.Provider,{value:pathname},import_react2.default.createElement(SearchParamsContext.Provider,{value:new URLSearchParams(query)},import_react2.default.createElement(GlobalLayoutRouterContext.Provider,{value:{changeByServerResponse(){},tree,focusAndScrollRef:{apply:!1,hashFragment:null,segmentPaths:[tree]},nextUrl:pathname}},import_react2.default.createElement(AppRouterContext.Provider,{value:{push(...args){action2("nextNavigation.push")(...args)},replace(...args){action2("nextNavigation.replace")(...args)},forward(...args){action2("nextNavigation.forward")(...args)},back(...args){action2("nextNavigation.back")(...args)},prefetch(...args){action2("nextNavigation.prefetch")(...args)},refresh:()=>{action2("nextNavigation.refresh")()},...restRouteParams}},import_react2.default.createElement(LayoutRouterContext.Provider,{value:{childNodes:new Map,tree,url:pathname}},children)))))},app_router_provider_default=AppRouterProvider;var import_router_context=require("next/dist/shared/lib/router-context"),import_react3=__toESM(require("react")),PageRouterProvider=({children,action:action2,routeParams,globals})=>import_react3.default.createElement(import_router_context.RouterContext.Provider,{value:{push(...args){return action2("nextRouter.push")(...args),Promise.resolve(!0)},replace(...args){return action2("nextRouter.replace")(...args),Promise.resolve(!0)},reload(...args){action2("nextRouter.reload")(...args)},back(...args){action2("nextRouter.back")(...args)},forward(){action2("nextRouter.forward")()},prefetch(...args){return action2("nextRouter.prefetch")(...args),Promise.resolve()},beforePopState(...args){action2("nextRouter.beforePopState")(...args)},events:{on(...args){action2("nextRouter.events.on")(...args)},off(...args){action2("nextRouter.events.off")(...args)},emit(...args){action2("nextRouter.events.emit")(...args)}},locale:globals==null?void 0:globals.locale,route:"/",asPath:"/",basePath:"/",isFallback:!1,isLocaleDomain:!1,isReady:!0,isPreview:!1,...routeParams}},children),page_router_provider_default=PageRouterProvider;var action;try{action=require("@storybook/addon-actions").action}catch{action=()=>()=>{}}var defaultRouterParams={pathname:"/",query:{}},RouterDecorator=(Story,{globals,parameters:parameters2})=>{var _a,_b,_c;return((_a=parameters2.nextjs)==null?void 0:_a.appDirectory)??!1?React4.createElement(app_router_provider_default,{action,routeParams:{...defaultRouterParams,...(_b=parameters2.nextjs)==null?void 0:_b.navigation}},React4.createElement(Story,null)):React4.createElement(page_router_provider_default,{action,globals,routeParams:{...defaultRouterParams,...(_c=parameters2.nextjs)==null?void 0:_c.router}},React4.createElement(Story,null))};var React5=__toESM(require("react")),StyleRegistry;try{StyleRegistry=require("styled-jsx").StyleRegistry}catch{StyleRegistry=React5.Fragment}var StyledJsxDecorator=Story=>React5.createElement(StyleRegistry,null,React5.createElement(Story,null));var React6=__toESM(require("react")),import_semver=__toESM(require("semver"));var defaultLoader=({src,width,quality})=>{let missingValues=[];if(src||missingValues.push("src"),width||missingValues.push("width"),missingValues.length>0)throw new Error(`Next Image Optimization requires ${missingValues.join(", ")} to be provided. Make sure you pass them as props to the \`next/image\` component. Received: ${JSON.stringify({src,width,quality})}`);return`${src}?w=${width}&q=${quality??75}`},NextImage=require("next/image"),OriginalNextImage=NextImage.default;Object.defineProperty(NextImage,"default",{configurable:!0,value:props=>{let imageParameters=React6.useContext(ImageContext);return React6.createElement(OriginalNextImage,{...imageParameters,...props,loader:props.loader??defaultLoader})}});if(import_semver.default.satisfies(process.env.__NEXT_VERSION,"^13.0.0")){let OriginalNextLegacyImage=require("next/legacy/image").default;Object.defineProperty(OriginalNextLegacyImage,"default",{configurable:!0,value:props=>{let imageParameters=React6.useContext(ImageContext);return React6.createElement(OriginalNextLegacyImage,{...imageParameters,...props,loader:props.loader??defaultLoader})}})}if(import_semver.default.satisfies(process.env.__NEXT_VERSION,"^12.2.0")){let OriginalNextFutureImage=require("next/future/image").default;Object.defineProperty(OriginalNextFutureImage,"default",{configurable:!0,value:props=>{let imageParameters=React6.useContext(ImageContext);return React6.createElement(OriginalNextFutureImage,{...imageParameters,...props,loader:props.loader??defaultLoader})}})}var React8=__toESM(require("react"));var import_react4=__toESM(require("react")),import_head_manager_context=require("next/dist/shared/lib/head-manager-context"),import_head_manager=__toESM(require("next/dist/client/head-manager")),HeadManagerProvider=({children})=>{let headManager=(0,import_react4.useMemo)(import_head_manager.default,[]);return headManager.getIsSsr=()=>!1,import_react4.default.createElement(import_head_manager_context.HeadManagerContext.Provider,{value:headManager},children)},head_manager_provider_default=HeadManagerProvider;var HeadManagerDecorator=Story=>React8.createElement(head_manager_provider_default,null,React8.createElement(Story,null));function addNextHeadCount(){let meta=document.createElement("meta");meta.name="next-head-count",meta.content="0",document.head.appendChild(meta)}addNextHeadCount();var decorators=[StyledJsxDecorator,ImageDecorator,RouterDecorator,HeadManagerDecorator],parameters={docs:{source:{excludeDecorators:!0}}};0&&(module.exports={decorators,parameters});

package/dist/preview.mjs

@@ -7,6 +7,6 @@ import semver from 'semver';
 import { HeadManagerContext } from 'next/dist/shared/lib/head-manager-context';
 import initHeadManager from 'next/dist/client/head-manager';
 
-setConfig(process.env.__NEXT_RUNTIME_CONFIG);var ImageContext=createContext({});var ImageDecorator=(Story,{parameters:parameters2})=>parameters2.nextjs?.image?React2.createElement(ImageContext.Provider,{value:parameters2.nextjs.image},React2.createElement(Story,null)):React2.createElement(Story,null);var AppRouterContext,LayoutRouterContext,PathnameContext,SearchParamsContext;try{AppRouterContext=__require("next/dist/shared/lib/app-router-context").AppRouterContext,LayoutRouterContext=__require("next/dist/shared/lib/app-router-context").LayoutRouterContext,PathnameContext=__require("next/dist/shared/lib/hooks-client-context").PathnameContext,SearchParamsContext=__require("next/dist/shared/lib/hooks-client-context").SearchParamsContext;}catch{AppRouterContext=React2__default.Fragment,LayoutRouterContext=React2__default.Fragment,PathnameContext=React2__default.Fragment,SearchParamsContext=React2__default.Fragment;}var getParallelRoutes=segmentsList=>{let segment=segmentsList.shift();return segment?[segment,{children:getParallelRoutes(segmentsList)}]:[]},AppRouterProvider=({children,action:action2,routeParams})=>{let{pathname,query,segments=[],...restRouteParams}=routeParams;return React2__default.createElement(AppRouterContext.Provider,{value:{push(...args){action2("nextNavigation.push")(...args);},replace(...args){action2("nextNavigation.replace")(...args);},forward(...args){action2("nextNavigation.forward")(...args);},back(...args){action2("nextNavigation.back")(...args);},prefetch(...args){action2("nextNavigation.prefetch")(...args);},refresh:()=>{action2("nextNavigation.refresh")();},...restRouteParams}},React2__default.createElement(SearchParamsContext.Provider,{value:new URLSearchParams(query)},React2__default.createElement(LayoutRouterContext.Provider,{value:{childNodes:new Map,tree:[pathname,{children:getParallelRoutes([...segments])}],url:pathname,headRenderedAboveThisLevel:!0}},React2__default.createElement(PathnameContext.Provider,{value:pathname},children))))},app_router_provider_default=AppRouterProvider;var PageRouterProvider=({children,action:action2,routeParams,globals})=>React2__default.createElement(RouterContext.Provider,{value:{push(...args){return action2("nextRouter.push")(...args),Promise.resolve(!0)},replace(...args){return action2("nextRouter.replace")(...args),Promise.resolve(!0)},reload(...args){action2("nextRouter.reload")(...args);},back(...args){action2("nextRouter.back")(...args);},forward(){action2("nextRouter.forward")();},prefetch(...args){return action2("nextRouter.prefetch")(...args),Promise.resolve()},beforePopState(...args){action2("nextRouter.beforePopState")(...args);},events:{on(...args){action2("nextRouter.events.on")(...args);},off(...args){action2("nextRouter.events.off")(...args);},emit(...args){action2("nextRouter.events.emit")(...args);}},locale:globals?.locale,route:"/",asPath:"/",basePath:"/",isFallback:!1,isLocaleDomain:!1,isReady:!0,isPreview:!1,...routeParams}},children),page_router_provider_default=PageRouterProvider;var action;try{action=__require("@storybook/addon-actions").action;}catch{action=()=>()=>{};}var defaultRouterParams={pathname:"/",query:{}},RouterDecorator=(Story,{globals,parameters:parameters2})=>parameters2.nextjs?.appDirectory??!1?React2.createElement(app_router_provider_default,{action,routeParams:{...defaultRouterParams,...parameters2.nextjs?.navigation}},React2.createElement(Story,null)):React2.createElement(page_router_provider_default,{action,globals,routeParams:{...defaultRouterParams,...parameters2.nextjs?.router}},React2.createElement(Story,null));var StyleRegistry;try{StyleRegistry=__require("styled-jsx").StyleRegistry;}catch{StyleRegistry=React2.Fragment;}var StyledJsxDecorator=Story=>React2.createElement(StyleRegistry,null,React2.createElement(Story,null));var defaultLoader=({src,width,quality})=>{let missingValues=[];if(src||missingValues.push("src"),width||missingValues.push("width"),missingValues.length>0)throw new Error(`Next Image Optimization requires ${missingValues.join(", ")} to be provided. Make sure you pass them as props to the \`next/image\` component. Received: ${JSON.stringify({src,width,quality})}`);return `${src}?w=${width}&q=${quality??75}`},NextImage=__require("next/image"),OriginalNextImage=NextImage.default;Object.defineProperty(NextImage,"default",{configurable:!0,value:props=>{let imageParameters=React2.useContext(ImageContext);return React2.createElement(OriginalNextImage,{...imageParameters,...props,loader:props.loader??defaultLoader})}});if(semver.satisfies(process.env.__NEXT_VERSION,"^13.0.0")){let OriginalNextLegacyImage=__require("next/legacy/image").default;Object.defineProperty(OriginalNextLegacyImage,"default",{configurable:!0,value:props=>{let imageParameters=React2.useContext(ImageContext);return React2.createElement(OriginalNextLegacyImage,{...imageParameters,...props,loader:props.loader??defaultLoader})}});}if(semver.satisfies(process.env.__NEXT_VERSION,"^12.2.0")){let OriginalNextFutureImage=__require("next/future/image").default;Object.defineProperty(OriginalNextFutureImage,"default",{configurable:!0,value:props=>{let imageParameters=React2.useContext(ImageContext);return React2.createElement(OriginalNextFutureImage,{...imageParameters,...props,loader:props.loader??defaultLoader})}});}var HeadManagerProvider=({children})=>{let headManager=useMemo(initHeadManager,[]);return headManager.getIsSsr=()=>!1,React2__default.createElement(HeadManagerContext.Provider,{value:headManager},children)},head_manager_provider_default=HeadManagerProvider;var HeadManagerDecorator=Story=>React2.createElement(head_manager_provider_default,null,React2.createElement(Story,null));function addNextHeadCount(){let meta=document.createElement("meta");meta.name="next-head-count",meta.content="0",document.head.appendChild(meta);}addNextHeadCount();var decorators=[StyledJsxDecorator,ImageDecorator,RouterDecorator,HeadManagerDecorator],parameters={docs:{source:{excludeDecorators:!0}}};
+setConfig(process.env.__NEXT_RUNTIME_CONFIG);var ImageContext=createContext({});var ImageDecorator=(Story,{parameters:parameters2})=>parameters2.nextjs?.image?React2.createElement(ImageContext.Provider,{value:parameters2.nextjs.image},React2.createElement(Story,null)):React2.createElement(Story,null);var AppRouterContext,LayoutRouterContext,PathnameContext,SearchParamsContext,GlobalLayoutRouterContext;try{AppRouterContext=__require("next/dist/shared/lib/app-router-context").AppRouterContext,LayoutRouterContext=__require("next/dist/shared/lib/app-router-context").LayoutRouterContext,PathnameContext=__require("next/dist/shared/lib/hooks-client-context").PathnameContext,SearchParamsContext=__require("next/dist/shared/lib/hooks-client-context").SearchParamsContext,GlobalLayoutRouterContext=__require("next/dist/shared/lib/app-router-context").GlobalLayoutRouterContext;}catch{AppRouterContext=React2__default.Fragment,LayoutRouterContext=React2__default.Fragment,PathnameContext=React2__default.Fragment,SearchParamsContext=React2__default.Fragment,GlobalLayoutRouterContext=React2__default.Fragment;}var getParallelRoutes=segmentsList=>{let segment=segmentsList.shift();return segment?[segment,{children:getParallelRoutes(segmentsList)}]:[]},AppRouterProvider=({children,action:action2,routeParams})=>{let{pathname,query,segments=[],...restRouteParams}=routeParams,tree=[pathname,{children:getParallelRoutes([...segments])}];return React2__default.createElement(PathnameContext.Provider,{value:pathname},React2__default.createElement(SearchParamsContext.Provider,{value:new URLSearchParams(query)},React2__default.createElement(GlobalLayoutRouterContext.Provider,{value:{changeByServerResponse(){},tree,focusAndScrollRef:{apply:!1,hashFragment:null,segmentPaths:[tree]},nextUrl:pathname}},React2__default.createElement(AppRouterContext.Provider,{value:{push(...args){action2("nextNavigation.push")(...args);},replace(...args){action2("nextNavigation.replace")(...args);},forward(...args){action2("nextNavigation.forward")(...args);},back(...args){action2("nextNavigation.back")(...args);},prefetch(...args){action2("nextNavigation.prefetch")(...args);},refresh:()=>{action2("nextNavigation.refresh")();},...restRouteParams}},React2__default.createElement(LayoutRouterContext.Provider,{value:{childNodes:new Map,tree,url:pathname}},children)))))},app_router_provider_default=AppRouterProvider;var PageRouterProvider=({children,action:action2,routeParams,globals})=>React2__default.createElement(RouterContext.Provider,{value:{push(...args){return action2("nextRouter.push")(...args),Promise.resolve(!0)},replace(...args){return action2("nextRouter.replace")(...args),Promise.resolve(!0)},reload(...args){action2("nextRouter.reload")(...args);},back(...args){action2("nextRouter.back")(...args);},forward(){action2("nextRouter.forward")();},prefetch(...args){return action2("nextRouter.prefetch")(...args),Promise.resolve()},beforePopState(...args){action2("nextRouter.beforePopState")(...args);},events:{on(...args){action2("nextRouter.events.on")(...args);},off(...args){action2("nextRouter.events.off")(...args);},emit(...args){action2("nextRouter.events.emit")(...args);}},locale:globals?.locale,route:"/",asPath:"/",basePath:"/",isFallback:!1,isLocaleDomain:!1,isReady:!0,isPreview:!1,...routeParams}},children),page_router_provider_default=PageRouterProvider;var action;try{action=__require("@storybook/addon-actions").action;}catch{action=()=>()=>{};}var defaultRouterParams={pathname:"/",query:{}},RouterDecorator=(Story,{globals,parameters:parameters2})=>parameters2.nextjs?.appDirectory??!1?React2.createElement(app_router_provider_default,{action,routeParams:{...defaultRouterParams,...parameters2.nextjs?.navigation}},React2.createElement(Story,null)):React2.createElement(page_router_provider_default,{action,globals,routeParams:{...defaultRouterParams,...parameters2.nextjs?.router}},React2.createElement(Story,null));var StyleRegistry;try{StyleRegistry=__require("styled-jsx").StyleRegistry;}catch{StyleRegistry=React2.Fragment;}var StyledJsxDecorator=Story=>React2.createElement(StyleRegistry,null,React2.createElement(Story,null));var defaultLoader=({src,width,quality})=>{let missingValues=[];if(src||missingValues.push("src"),width||missingValues.push("width"),missingValues.length>0)throw new Error(`Next Image Optimization requires ${missingValues.join(", ")} to be provided. Make sure you pass them as props to the \`next/image\` component. Received: ${JSON.stringify({src,width,quality})}`);return `${src}?w=${width}&q=${quality??75}`},NextImage=__require("next/image"),OriginalNextImage=NextImage.default;Object.defineProperty(NextImage,"default",{configurable:!0,value:props=>{let imageParameters=React2.useContext(ImageContext);return React2.createElement(OriginalNextImage,{...imageParameters,...props,loader:props.loader??defaultLoader})}});if(semver.satisfies(process.env.__NEXT_VERSION,"^13.0.0")){let OriginalNextLegacyImage=__require("next/legacy/image").default;Object.defineProperty(OriginalNextLegacyImage,"default",{configurable:!0,value:props=>{let imageParameters=React2.useContext(ImageContext);return React2.createElement(OriginalNextLegacyImage,{...imageParameters,...props,loader:props.loader??defaultLoader})}});}if(semver.satisfies(process.env.__NEXT_VERSION,"^12.2.0")){let OriginalNextFutureImage=__require("next/future/image").default;Object.defineProperty(OriginalNextFutureImage,"default",{configurable:!0,value:props=>{let imageParameters=React2.useContext(ImageContext);return React2.createElement(OriginalNextFutureImage,{...imageParameters,...props,loader:props.loader??defaultLoader})}});}var HeadManagerProvider=({children})=>{let headManager=useMemo(initHeadManager,[]);return headManager.getIsSsr=()=>!1,React2__default.createElement(HeadManagerContext.Provider,{value:headManager},children)},head_manager_provider_default=HeadManagerProvider;var HeadManagerDecorator=Story=>React2.createElement(head_manager_provider_default,null,React2.createElement(Story,null));function addNextHeadCount(){let meta=document.createElement("meta");meta.name="next-head-count",meta.content="0",document.head.appendChild(meta);}addNextHeadCount();var decorators=[StyledJsxDecorator,ImageDecorator,RouterDecorator,HeadManagerDecorator],parameters={docs:{source:{excludeDecorators:!0}}};
 
 export { decorators, parameters };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/nextjs",
-  "version": "7.1.0-alpha.36",
+  "version": "7.1.0-alpha.37",
   "description": "Storybook for Next.js",
   "keywords": [
     "storybook",
@@ -70,13 +70,13 @@
     "@babel/preset-react": "^7.22.0",
     "@babel/preset-typescript": "^7.21.0",
     "@babel/runtime": "^7.22.0",
-    "@storybook/addon-actions": "7.1.0-alpha.36",
-    "@storybook/builder-webpack5": "7.1.0-alpha.36",
-    "@storybook/core-common": "7.1.0-alpha.36",
-    "@storybook/node-logger": "7.1.0-alpha.36",
-    "@storybook/preset-react-webpack": "7.1.0-alpha.36",
-    "@storybook/preview-api": "7.1.0-alpha.36",
-    "@storybook/react": "7.1.0-alpha.36",
+    "@storybook/addon-actions": "7.1.0-alpha.37",
+    "@storybook/builder-webpack5": "7.1.0-alpha.37",
+    "@storybook/core-common": "7.1.0-alpha.37",
+    "@storybook/node-logger": "7.1.0-alpha.37",
+    "@storybook/preset-react-webpack": "7.1.0-alpha.37",
+    "@storybook/preview-api": "7.1.0-alpha.37",
+    "@storybook/react": "7.1.0-alpha.37",
     "@types/node": "^16.0.0",
     "css-loader": "^6.7.3",
     "find-up": "^5.0.0",
@@ -147,5 +147,5 @@
     ],
     "platform": "node"
   },
-  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16"
+  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17"
 }

package/template/stories_nextjs-default-js/Navigation.stories.jsx

@@ -2,6 +2,7 @@ import {
   useRouter,
   usePathname,
   useSearchParams,
+  useParams,
   useSelectedLayoutSegment,
   useSelectedLayoutSegments,
 } from 'next/navigation';
@@ -11,6 +12,7 @@ function Component() {
   const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
+  const params = useParams();
   const segment = useSelectedLayoutSegment();
   const segments = useSelectedLayoutSegments();
 
@@ -58,6 +60,16 @@ function Component() {
           ))}
         </ul>
       </div>
+      <div>
+        params:{' '}
+        <ul>
+          {Object.entries(params).map(([key, value]) => (
+            <li key={key}>
+              {key}: {value}
+            </li>
+          ))}
+        </ul>
+      </div>
       {routerActions.map(({ cb, name }) => (
         <div key={name} style={{ marginBottom: '1em' }}>
           <button type="button" onClick={cb}>
@@ -96,3 +108,17 @@ export const WithSegmentDefined = {
     },
   },
 };
+
+export const WithSegmentDefinedForParams = {
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+      navigation: {
+        segments: [
+          ['slug', 'hello'],
+          ['framework', 'nextjs'],
+        ],
+      },
+    },
+  },
+};