@storybook/nextjs 7.1.0-alpha.9 → 7.1.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (55) hide show
  1. package/README.md +41 -6
  2. package/dist/chunk-2SSJK7AW.mjs +5 -0
  3. package/dist/chunk-HAVEVISW.mjs +3 -0
  4. package/dist/chunk-YPQDI6HO.mjs +3 -1
  5. package/dist/font/webpack/loader/storybook-nextjs-font-loader.js +2 -2
  6. package/dist/font/webpack/loader/storybook-nextjs-font-loader.mjs +14 -7
  7. package/dist/images/context.d.ts +13 -0
  8. package/dist/images/context.js +1 -0
  9. package/dist/images/context.mjs +2 -0
  10. package/dist/images/next-future-image.d.ts +6 -0
  11. package/dist/images/next-future-image.js +1 -0
  12. package/dist/images/next-future-image.mjs +9 -0
  13. package/dist/images/next-image.d.ts +6 -0
  14. package/dist/images/next-image.js +1 -0
  15. package/dist/images/next-image.mjs +9 -0
  16. package/dist/images/next-legacy-image.d.ts +6 -0
  17. package/dist/images/next-legacy-image.js +1 -0
  18. package/dist/images/next-legacy-image.mjs +9 -0
  19. package/dist/index.d-19e760f3.d.ts +1247 -0
  20. package/dist/index.d.ts +28 -3
  21. package/dist/index.mjs +1 -0
  22. package/dist/next-image-loader-stub.d.ts +2 -0
  23. package/dist/next-image-loader-stub.js +1 -1
  24. package/dist/next-image-loader-stub.mjs +7 -1
  25. package/dist/preset.d.ts +9 -1067
  26. package/dist/preset.js +1 -1
  27. package/dist/preview.d.ts +5 -3
  28. package/dist/preview.js +1 -1
  29. package/dist/preview.mjs +12 -1
  30. package/package.json +37 -28
  31. package/src/globals.d.ts +3 -0
  32. package/template/cli/js/Button.stories.js +8 -4
  33. package/template/cli/js/Configure.mdx +284 -0
  34. package/template/cli/js/Header.jsx +1 -1
  35. package/template/cli/js/Page.jsx +1 -2
  36. package/template/cli/ts-3-8/Button.stories.ts +8 -4
  37. package/template/cli/ts-3-8/Configure.mdx +284 -0
  38. package/template/cli/ts-3-8/Header.tsx +1 -1
  39. package/template/cli/ts-3-8/Page.tsx +1 -1
  40. package/template/cli/{ts → ts-4-9}/Button.stories.ts +11 -7
  41. package/template/cli/ts-4-9/Configure.mdx +284 -0
  42. package/template/cli/{ts → ts-4-9}/Header.stories.ts +3 -3
  43. package/template/cli/{ts → ts-4-9}/Header.tsx +1 -1
  44. package/template/cli/{ts → ts-4-9}/Page.stories.ts +3 -3
  45. package/template/cli/{ts → ts-4-9}/Page.tsx +1 -1
  46. package/template/stories/Image.stories.jsx +3 -3
  47. package/template/stories_nextjs-12-js/ImageFuture.stories.jsx +3 -3
  48. package/template/stories_nextjs-default-js/ImageLegacy.stories.jsx +3 -3
  49. package/template/stories_nextjs-default-js/Navigation.stories.jsx +26 -0
  50. package/dist/preset.mjs +0 -1
  51. package/dist/types-96e623f7.d.ts +0 -28
  52. package/template/cli/js/Introduction.mdx +0 -230
  53. package/template/cli/ts/Introduction.mdx +0 -230
  54. package/template/cli/ts-3-8/Introduction.mdx +0 -230
  55. /package/template/cli/{ts → ts-4-9}/Button.tsx +0 -0
package/README.md CHANGED
@@ -28,7 +28,7 @@
28
28
  - [Set `nextjs.appDirectory` to `true`](#set-nextjsappdirectory-to-true)
29
29
  - [Overriding defaults](#overriding-defaults-1)
30
30
  - [Global Defaults](#global-defaults-1)
31
- - [`useSelectedLayoutSegment` and `useSelectedLayoutSegments` hook](#useselectedlayoutsegment-and-useselectedlayoutsegments-hook)
31
+ - [`useSelectedLayoutSegment` `useSelectedLayoutSegments` and `useParams` hook](#useselectedlayoutsegment-useselectedlayoutsegments-and-useparams-hook)
32
32
  - [Default Navigation Context](#default-navigation-context)
33
33
  - [Actions Integration Caveats](#actions-integration-caveats-1)
34
34
  - [Next.js Head](#nextjs-head)
@@ -44,7 +44,7 @@
44
44
  - [FAQ](#faq)
45
45
  - [Stories for pages/components which fetch data](#stories-for-pagescomponents-which-fetch-data)
46
46
  - [Statically imported images won't load](#statically-imported-images-wont-load)
47
- - [Module not found: Error: Can't resolve \[package name\]](#module-not-found-error-cant-resolve-package-name)
47
+ - [Module not found: Error: Can't resolve `package name`](#module-not-found-error-cant-resolve-package-name)
48
48
  - [What if I'm using the Vite builder?](#what-if-im-using-the-vite-builder)
49
49
  - [Acknowledgements](#acknowledgements)
50
50
 
@@ -503,9 +503,9 @@ export const parameters = {
503
503
  };
504
504
  ```
505
505
 
506
- #### `useSelectedLayoutSegment` and `useSelectedLayoutSegments` hook
506
+ #### `useSelectedLayoutSegment` `useSelectedLayoutSegments` and `useParams` hook
507
507
 
508
- 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.
508
+ 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.
509
509
 
510
510
  ```js
511
511
  // SomeComponentThatUsesTheNavigation.stories.js
@@ -526,11 +526,46 @@ export default {
526
526
  export const Example = {};
527
527
 
528
528
  // SomeComponentThatUsesTheNavigation.js
529
- import { useSelectedLayoutSegment, useSelectedLayoutSegments } from 'next/navigation';
529
+ import { useSelectedLayoutSegment, useSelectedLayoutSegments, useParams } from 'next/navigation';
530
530
 
531
531
  export default function SomeComponentThatUsesTheNavigation() {
532
532
  const segment = useSelectedLayoutSegment(); // dashboard
533
533
  const segments = useSelectedLayoutSegments(); // ["dashboard", "analytics"]
534
+ const params = useParams(); // {}
535
+ ...
536
+ }
537
+ ```
538
+
539
+ 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.
540
+
541
+ ```js
542
+ // SomeComponentThatUsesParams.stories.js
543
+ import SomeComponentThatUsesParams from './SomeComponentThatUsesParams';
544
+
545
+ export default {
546
+ component: SomeComponentThatUsesParams,
547
+ parameters: {
548
+ nextjs: {
549
+ appDirectory: true,
550
+ navigation: {
551
+ segments: [
552
+ ['slug', 'hello'],
553
+ ['framework', 'nextjs'],
554
+ ]
555
+ },
556
+ },
557
+ },
558
+ };
559
+
560
+ export const Example = {};
561
+
562
+ // SomeComponentThatUsesParams.js
563
+ import { useSelectedLayoutSegment, useSelectedLayoutSegments, useParams } from 'next/navigation';
564
+
565
+ export default function SomeComponentThatUsesParams() {
566
+ const segment = useSelectedLayoutSegment(); // hello
567
+ const segments = useSelectedLayoutSegments(); // ["hello", "nextjs"]
568
+ const params = useParams(); // { slug: "hello", framework: "nextjs" }
534
569
  ...
535
570
  }
536
571
  ```
@@ -930,7 +965,7 @@ Therefore, if something in storybook isn't showing the image properly, make sure
930
965
 
931
966
  See [local images](https://nextjs.org/docs/basic-features/image-optimization#local-images) for more detail on how Next.js treats static image imports.
932
967
 
933
- #### Module not found: Error: Can't resolve [package name]
968
+ #### Module not found: Error: Can't resolve `package name`
934
969
 
935
970
  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.
936
971
 
@@ -0,0 +1,5 @@
1
+ import { createContext } from 'react';
2
+
3
+ var ImageContext=createContext({});
4
+
5
+ export { ImageContext };
@@ -0,0 +1,3 @@
1
+ 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}`};
2
+
3
+ export { defaultLoader };
@@ -1 +1,3 @@
1
- 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};
1
+ 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);
2
+
3
+ export { __commonJS, __esm, __export, __require, __toCommonJS };
@@ -22,7 +22,7 @@
22
22
  }
23
23
 
24
24
  ${options.variable?`.${variableClassName} { ${options.variable}: '${options.fontFamily}'; }`:""}
25
- `,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`
25
+ `,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`
26
26
  if (!document.getElementById('id-${id}')) {
27
27
  const fontDeclarations = \`${fontFaceCSS}\`;
28
28
  const style = document.createElement('style');
@@ -45,4 +45,4 @@
45
45
  style: ${JSON.stringify(cssMeta.style)}
46
46
  ${cssMeta.variableClassName?`, variable: "${cssMeta.variableClassName}"`:""}
47
47
  }
48
- `}return"module.exports = {}"}0&&(module.exports={});
48
+ `}return"module.exports = {}"}
@@ -1,15 +1,20 @@
1
- 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`
1
+ import { __export, __esm, __require, __toCommonJS } from '../../../chunk-YPQDI6HO.mjs';
2
+ import dedent from 'ts-dedent';
3
+ import loaderUtils from 'next/dist/compiled/loader-utils3';
4
+ import path from 'path';
5
+
6
+ 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`
2
7
  We are unable to load the helper functions to use next/font/google.
3
8
  Please downgrade Next.js to version 13.2.4 to continue to use next/font/google in Storybook.
4
9
  Feel free to open a Github Issue!
5
- `)}}}}});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`
10
+ `)}}}}});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`
6
11
  We are unable to load the helper functions to use next/font/local.
7
12
  Please downgrade Next.js to version 13.2.4 to continue to use next/font/local in Storybook.
8
13
  Feel free to open a Github Issue!
9
- `)}}}}});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 {
14
+ `)}}}}});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 {
10
15
  font-family: ${id};
11
16
  src: url(${localFontPath});
12
- }`}return localFontSrc.map(font=>{let localFontPath=path.join(parentFolder,font.path);return`@font-face {
17
+ }`}return localFontSrc.map(font=>{let localFontPath=path.join(parentFolder,font.path);return `@font-face {
13
18
  font-family: ${id};
14
19
  src: url(${localFontPath});
15
20
  ${font.weight?`font-weight: ${font.weight};`:""}
@@ -22,7 +27,7 @@ import{__esm,__export,__require,__toCommonJS}from"../../../chunk-YPQDI6HO.mjs";v
22
27
  }
23
28
 
24
29
  ${options.variable?`.${variableClassName} { ${options.variable}: '${options.fontFamily}'; }`:""}
25
- `,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`
30
+ `,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 `
26
31
  if (!document.getElementById('id-${id}')) {
27
32
  const fontDeclarations = \`${fontFaceCSS}\`;
28
33
  const style = document.createElement('style');
@@ -37,7 +42,7 @@ import{__esm,__export,__require,__toCommonJS}from"../../../chunk-YPQDI6HO.mjs";v
37
42
  document.head.appendChild(classNamesStyle);
38
43
 
39
44
  }
40
- `}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`
45
+ `}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 `
41
46
  ${setFontDeclarationsInHead({fontFaceCSS:cssMeta.fontFaceCSS,id:fontFaceDeclaration.id,classNamesCSS:cssMeta.classNamesCSS})}
42
47
 
43
48
  module.exports = {
@@ -45,4 +50,6 @@ import{__esm,__export,__require,__toCommonJS}from"../../../chunk-YPQDI6HO.mjs";v
45
50
  style: ${JSON.stringify(cssMeta.style)}
46
51
  ${cssMeta.variableClassName?`, variable: "${cssMeta.variableClassName}"`:""}
47
52
  }
48
- `}return"module.exports = {}"}export{storybookNextjsFontLoader as default};
53
+ `}return "module.exports = {}"}
54
+
55
+ export { storybookNextjsFontLoader as default };
@@ -0,0 +1,13 @@
1
+ import * as React from 'react';
2
+ import { ImageProps, StaticImageData } from 'next/image';
3
+ import { ImageProps as ImageProps$1 } from 'next/legacy/image';
4
+
5
+ interface StaticRequire {
6
+ default: StaticImageData;
7
+ }
8
+ declare type StaticImport = StaticRequire | StaticImageData;
9
+ declare const ImageContext: React.Context<Partial<Omit<ImageProps, "src"> & {
10
+ src: string | StaticImport;
11
+ }> & Omit<ImageProps$1, "src">>;
12
+
13
+ export { ImageContext };
@@ -0,0 +1 @@
1
+ "use strict";var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __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 __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var context_exports={};__export(context_exports,{ImageContext:()=>ImageContext});module.exports=__toCommonJS(context_exports);var import_react=require("react"),ImageContext=(0,import_react.createContext)({});0&&(module.exports={ImageContext});
@@ -0,0 +1,2 @@
1
+ export { ImageContext } from '../chunk-2SSJK7AW.mjs';
2
+ import '../chunk-YPQDI6HO.mjs';
@@ -0,0 +1,6 @@
1
+ import React__default from 'react';
2
+ import * as _NextImage from 'next/image';
3
+
4
+ declare function NextFutureImage(props: _NextImage.ImageProps): React__default.JSX.Element;
5
+
6
+ export { NextFutureImage as default };
@@ -0,0 +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 next_future_image_exports={};__export(next_future_image_exports,{default:()=>next_future_image_default});module.exports=__toCommonJS(next_future_image_exports);var import_react2=__toESM(require("react")),import_image=__toESM(require("sb-original/next/future/image"));var import_react=require("react"),ImageContext=(0,import_react.createContext)({});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}`};function NextFutureImage(props){let imageParameters=import_react2.default.useContext(ImageContext);return import_react2.default.createElement(import_image.default,{...imageParameters,...props,loader:props.loader??defaultLoader})}var next_future_image_default=NextFutureImage;
@@ -0,0 +1,9 @@
1
+ import { defaultLoader } from '../chunk-HAVEVISW.mjs';
2
+ import { ImageContext } from '../chunk-2SSJK7AW.mjs';
3
+ import '../chunk-YPQDI6HO.mjs';
4
+ import React from 'react';
5
+ import OriginalNextFutureImage from 'sb-original/next/future/image';
6
+
7
+ function NextFutureImage(props){let imageParameters=React.useContext(ImageContext);return React.createElement(OriginalNextFutureImage,{...imageParameters,...props,loader:props.loader??defaultLoader})}var next_future_image_default=NextFutureImage;
8
+
9
+ export { next_future_image_default as default };
@@ -0,0 +1,6 @@
1
+ import * as _NextImage from 'next/image';
2
+ import React__default from 'react';
3
+
4
+ declare const MockedNextImage: (props: _NextImage.ImageProps) => React__default.JSX.Element;
5
+
6
+ export { MockedNextImage as default };
@@ -0,0 +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 next_image_exports={};__export(next_image_exports,{default:()=>next_image_default});module.exports=__toCommonJS(next_image_exports);var import_image=__toESM(require("sb-original/next/image")),import_react2=__toESM(require("react"));var import_react=require("react"),ImageContext=(0,import_react.createContext)({});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}`};var MockedNextImage=props=>{let imageParameters=import_react2.default.useContext(ImageContext);return import_react2.default.createElement(import_image.default,{...imageParameters,...props,loader:props.loader??defaultLoader})},next_image_default=MockedNextImage;
@@ -0,0 +1,9 @@
1
+ import { defaultLoader } from '../chunk-HAVEVISW.mjs';
2
+ import { ImageContext } from '../chunk-2SSJK7AW.mjs';
3
+ import '../chunk-YPQDI6HO.mjs';
4
+ import OriginalNextImage from 'sb-original/next/image';
5
+ import React from 'react';
6
+
7
+ var MockedNextImage=props=>{let imageParameters=React.useContext(ImageContext);return React.createElement(OriginalNextImage,{...imageParameters,...props,loader:props.loader??defaultLoader})},next_image_default=MockedNextImage;
8
+
9
+ export { next_image_default as default };
@@ -0,0 +1,6 @@
1
+ import * as _NextLegacyImage from 'next/legacy/image';
2
+ import React__default from 'react';
3
+
4
+ declare function NextLegacyImage(props: _NextLegacyImage.ImageProps): React__default.JSX.Element;
5
+
6
+ export { NextLegacyImage as default };
@@ -0,0 +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 next_legacy_image_exports={};__export(next_legacy_image_exports,{default:()=>next_legacy_image_default});module.exports=__toCommonJS(next_legacy_image_exports);var import_image=__toESM(require("sb-original/next/legacy/image")),import_react2=__toESM(require("react"));var import_react=require("react"),ImageContext=(0,import_react.createContext)({});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}`};function NextLegacyImage(props){let imageParameters=import_react2.default.useContext(ImageContext);return import_react2.default.createElement(import_image.default,{...imageParameters,...props,loader:props.loader??defaultLoader})}var next_legacy_image_default=NextLegacyImage;
@@ -0,0 +1,9 @@
1
+ import { defaultLoader } from '../chunk-HAVEVISW.mjs';
2
+ import { ImageContext } from '../chunk-2SSJK7AW.mjs';
3
+ import '../chunk-YPQDI6HO.mjs';
4
+ import OriginalNextLegacyImage from 'sb-original/next/legacy/image';
5
+ import React from 'react';
6
+
7
+ function NextLegacyImage(props){let imageParameters=React.useContext(ImageContext);return React.createElement(OriginalNextLegacyImage,{...imageParameters,...props,loader:props.loader??defaultLoader})}var next_legacy_image_default=NextLegacyImage;
8
+
9
+ export { next_legacy_image_default as default };