@storybook/nextjs 7.0.0-beta.12 → 7.0.0-beta.14

package/README.md

@@ -15,6 +15,10 @@
     - [Local Images](#local-images)
     - [Remote Images](#remote-images)
     - [AVIF](#avif)
+  - [Next.js Font Optimization](#nextjs-font-optimization)
+    - [@next/font/google](#nextfontgoogle)
+    - [@next/font/local](#nextfontlocal)
+    - [Not supported features of @next/font](#not-supported-features-of-nextfont)
   - [Next.js Routing](#nextjs-routing)
     - [Overriding defaults](#overriding-defaults)
     - [Global Defaults](#global-defaults)
@@ -24,6 +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)
     - [Default Navigation Context](#default-navigation-context)
     - [Actions Integration Caveats](#actions-integration-caveats-1)
   - [Sass/Scss](#sassscss)
@@ -45,6 +50,8 @@
 
 👉 [Next.js's Image Component](#nextjss-image-component)
 
+👉 [Next.js Font Optimization](#nextjs-font-optimization)
+
 👉 [Next.js Routing (next/router)](#nextjs-routing)
 
 👉 [Next.js Navigation (next/navigation)](#nextjs-navigation)
@@ -208,6 +215,54 @@ export default function Home() {
 
 This format is not supported by this framework yet. Feel free to [open up an issue](https://github.com/storybookjs/storybook/issues) if this is something you want to see.
 
+### Next.js Font Optimization
+
+[@next/font](https://nextjs.org/docs/basic-features/font-optimization) is partially supported in Storybook. The packages `@next/font/google` and `@next/font/local` are supported.
+
+#### @next/font/google
+
+You don't have to do anything. `@next/font/google` is supported out of the box.
+
+#### @next/font/local
+
+For local fonts you have to define the [src](https://nextjs.org/docs/api-reference/next/font#src) property.
+The path is relative to the directory where the font loader function is called.
+
+If the following component defines your localFont like this:
+
+```js
+// src/components/MyComponent.js
+import localFont from '@next/font/local';
+
+const localRubikStorm = localFont({ src: './fonts/RubikStorm-Regular.ttf' });
+```
+
+You have to tell Storybook where the `fonts` directory is located. The `from` value is relative to the `.storybook` directory. The `to` value is relative to the execution context of Storybook. Very likely it is the root of your project.
+
+```js
+// .storybook/main.js
+module.exports = {
+  ...
+  "staticDirs": [
+    {
+      from: '../src/components/fonts',
+      to: 'src/components/fonts'
+    }
+  ],
+}
+```
+
+#### Not supported features of @next/font
+
+The following features are not supported (yet). Support for these features might be planned for the future:
+
+- [Support font loaders configuration in next.config.js](https://nextjs.org/docs/basic-features/font-optimization#specifying-a-subset)
+- [fallback](https://nextjs.org/docs/api-reference/next/font#fallback) option
+- [adjustFontFallback](https://nextjs.org/docs/api-reference/next/font#adjustfontfallback) option
+- [declarations](https://nextjs.org/docs/api-reference/next/font#declarations) option
+- [preload](https://nextjs.org/docs/api-reference/next/font#preload) option gets ignored. Storybook handles Font loading its own way.
+- [display](https://nextjs.org/docs/api-reference/next/font#display) option gets ignored. All fonts are loaded with display set to "block" to make Storybook load the font properly.
+
 ### 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 Actions ctions panel if you have the [Storybook actions addon](https://storybook.js.org/docs/react/essentials/actions).
@@ -440,6 +495,40 @@ export const parameters = {
 };
 ```
 
+#### `useSelectedLayoutSegment` and `useSelectedLayoutSegments` 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.
+
+```js
+// SomeComponentThatUsesTheNavigation.stories.js
+import SomeComponentThatUsesTheNavigation from './SomeComponentThatUsesTheNavigation';
+
+export default {
+  component: SomeComponentThatUsesTheNavigation,
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+      navigation: {
+        segments: ['dashboard', 'analytics']
+      },
+    },
+  },
+};
+
+export const Example = {};
+
+// SomeComponentThatUsesTheNavigation.js
+import { useSelectedLayoutSegment, useSelectedLayoutSegments } from 'next/navigation';
+
+export default function SomeComponentThatUsesTheNavigation() {
+  const segment = useSelectedLayoutSegment(); // dashboard
+  const segments = useSelectedLayoutSegments(); // ["dashboard", "analytics"]
+  ...
+}
+```
+
+The default value of `nextjs.navigation.segments` is `[]` if not set.
+
 #### Default Navigation Context
 
 The default values on the stubbed navigation context are as follows:

package/dist/app-router-provider-LIUPULW3.mjs

@@ -0,0 +1 @@
+import"./chunk-4MG4OZFL.mjs";import React from"react";import{AppRouterContext,LayoutRouterContext}from"next/dist/shared/lib/app-router-context";import{PathnameContext,SearchParamsContext}from"next/dist/shared/lib/hooks-client-context";var getParallelRoutes=segmentsList=>{let segment=segmentsList.shift();return segment?[segment,{children:getParallelRoutes(segmentsList)}]:[]},AppRouterProvider=({children,action,routeParams})=>{let{pathname,query,segments=[],...restRouteParams}=routeParams;return React.createElement(AppRouterContext.Provider,{value:{push(...args){action("nextNavigation.push")(...args)},replace(...args){action("nextNavigation.replace")(...args)},forward(...args){action("nextNavigation.forward")(...args)},back(...args){action("nextNavigation.back")(...args)},prefetch(...args){action("nextNavigation.prefetch")(...args)},refresh:()=>{action("nextNavigation.refresh")()},...restRouteParams}},React.createElement(SearchParamsContext.Provider,{value:new URLSearchParams(query)},React.createElement(LayoutRouterContext.Provider,{value:{childNodes:new Map,tree:[pathname,{children:getParallelRoutes([...segments])}],url:pathname}},React.createElement(PathnameContext.Provider,{value:pathname},children))))},app_router_provider_default=AppRouterProvider;export{app_router_provider_default as default};

package/dist/font/webpack/loader/storybook-nextjs-font-loader.d.ts

@@ -0,0 +1,3 @@
+declare function storybookNextjsFontLoader(this: any): Promise<string>;
+
+export { storybookNextjsFontLoader as default };

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

@@ -0,0 +1,40 @@
+"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 storybook_nextjs_font_loader_exports={};__export(storybook_nextjs_font_loader_exports,{default:()=>storybookNextjsFontLoader});module.exports=__toCommonJS(storybook_nextjs_font_loader_exports);var import_loader_utils3=__toESM(require("next/dist/compiled/loader-utils3")),import_utils=require("@next/font/dist/google/utils"),cssCache=new Map;async function getFontFaceDeclarations(options){let{fontFamily,weights,styles,selectedVariableAxes,display,variable}=(0,import_utils.validateData)(options.fontFamily,[options.props]),fontAxes=(0,import_utils.getFontAxes)(fontFamily,weights,styles,selectedVariableAxes),url=(0,import_utils.getUrl)(fontFamily,fontAxes,display);try{let hasCachedCSS=cssCache.has(url),fontFaceCSS=hasCachedCSS?cssCache.get(url):await(0,import_utils.fetchCSSFromGoogleFonts)(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:import_loader_utils3.default.getHashDigest(url,"md5","hex",6),fontFamily,fontFaceCSS,weights,styles,variable}}catch{throw new Error("Google Fonts couldn't be loaded.")}}var import_loader_utils32=__toESM(require("next/dist/compiled/loader-utils3")),import_utils2=require("@next/font/dist/local/utils"),import_path=__toESM(require("path"));async function getFontFaceDeclarations2(options,rootContext){let localFontSrc=options.props.src,parentFolder=options.filename.split("/").slice(0,-1).join("/").replace(rootContext,""),{weight,style,variable}=(0,import_utils2.validateData)("",options.props),id=`font-${import_loader_utils32.default.getHashDigest(Buffer.from(JSON.stringify(localFontSrc)),"md5","hex",6)}`;return{id,fontFamily:id,fontFaceCSS:(()=>{if(typeof localFontSrc=="string"){let localFontPath=import_path.default.join(parentFolder,localFontSrc);return`@font-face {
+          font-family: ${id};
+          src: url(${localFontPath});
+      }`}return localFontSrc.map(font=>{let localFontPath=import_path.default.join(parentFolder,font.path);return`@font-face {
+          font-family: ${id};
+          src: url(${localFontPath});
+          ${font.weight?`font-weight: ${font.weight};`:""}
+          ${font.style?`font-style: ${font.style};`:""}
+        }`}).join("")})(),weights:weight?[weight]:[],styles:style?[style]:[],variable}}function getCSSMeta(options){let className=getClassName(options),style=getStylesObj(options),variableClassName=`__variable_${className}`,classNamesCSS=`
+    .${className} {
+      font-family: ${options.fontFamily};
+      ${isNextCSSPropertyValid(options.styles)?`font-style: ${options.styles[0]};`:""}
+      ${isNextCSSPropertyValid(options.weights)?`font-weight: ${options.weights[0]};`:""}
+    }
+
+    ${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`
+    if (!document.getElementById('id-${id}')) {
+      const fontDeclarations = \`${fontFaceCSS}\`;
+      const style = document.createElement('style');
+      style.setAttribute('id', 'font-face-${id}');
+      style.innerHTML = fontDeclarations;
+      document.head.appendChild(style);
+
+      const classNamesCSS = \`${classNamesCSS}\`;
+      const classNamesStyle = document.createElement('style');
+      classNamesStyle.setAttribute('id', 'classnames-${id}');
+      classNamesStyle.innerHTML = classNamesCSS;
+      document.head.appendChild(classNamesStyle);
+
+    }
+  `}async function storybookNextjsFontLoader(){let options=this.getOptions(),rootCtx=this.rootContext,fontFaceDeclaration;if(options.source==="@next/font/google"&&(fontFaceDeclaration=await getFontFaceDeclarations(options)),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 = {
+      className: "${cssMeta.className}", 
+      style: ${JSON.stringify(cssMeta.style)}
+      ${cssMeta.variableClassName?`, variable: "${cssMeta.variableClassName}"`:""}
+    }
+    `}return"module.exports = {}"}0&&(module.exports={});

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

@@ -0,0 +1,40 @@
+import"../../../chunk-4MG4OZFL.mjs";import loaderUtils from"next/dist/compiled/loader-utils3";import{fetchCSSFromGoogleFonts,getFontAxes,getUrl,validateData}from"@next/font/dist/google/utils";var cssCache=new Map;async function getFontFaceDeclarations(options){let{fontFamily,weights,styles,selectedVariableAxes,display,variable}=validateData(options.fontFamily,[options.props]),fontAxes=getFontAxes(fontFamily,weights,styles,selectedVariableAxes),url=getUrl(fontFamily,fontAxes,display);try{let hasCachedCSS=cssCache.has(url),fontFaceCSS=hasCachedCSS?cssCache.get(url):await fetchCSSFromGoogleFonts(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{validateData as validateData2}from"@next/font/dist/local/utils";import path from"path";async function getFontFaceDeclarations2(options,rootContext){let localFontSrc=options.props.src,parentFolder=options.filename.split("/").slice(0,-1).join("/").replace(rootContext,""),{weight,style,variable}=validateData2("",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 {
+          font-family: ${id};
+          src: url(${localFontPath});
+      }`}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};`:""}
+          ${font.style?`font-style: ${font.style};`:""}
+        }`}).join("")})(),weights:weight?[weight]:[],styles:style?[style]:[],variable}}function getCSSMeta(options){let className=getClassName(options),style=getStylesObj(options),variableClassName=`__variable_${className}`,classNamesCSS=`
+    .${className} {
+      font-family: ${options.fontFamily};
+      ${isNextCSSPropertyValid(options.styles)?`font-style: ${options.styles[0]};`:""}
+      ${isNextCSSPropertyValid(options.weights)?`font-weight: ${options.weights[0]};`:""}
+    }
+
+    ${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`
+    if (!document.getElementById('id-${id}')) {
+      const fontDeclarations = \`${fontFaceCSS}\`;
+      const style = document.createElement('style');
+      style.setAttribute('id', 'font-face-${id}');
+      style.innerHTML = fontDeclarations;
+      document.head.appendChild(style);
+
+      const classNamesCSS = \`${classNamesCSS}\`;
+      const classNamesStyle = document.createElement('style');
+      classNamesStyle.setAttribute('id', 'classnames-${id}');
+      classNamesStyle.innerHTML = classNamesCSS;
+      document.head.appendChild(classNamesStyle);
+
+    }
+  `}async function storybookNextjsFontLoader(){let options=this.getOptions(),rootCtx=this.rootContext,fontFaceDeclaration;if(options.source==="@next/font/google"&&(fontFaceDeclaration=await getFontFaceDeclarations(options)),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 = {
+      className: "${cssMeta.className}", 
+      style: ${JSON.stringify(cssMeta.style)}
+      ${cssMeta.variableClassName?`, variable: "${cssMeta.variableClassName}"`:""}
+    }
+    `}return"module.exports = {}"}export{storybookNextjsFontLoader as default};