@storybook/preview-api 8.1.0-alpha.7 → 8.1.0-beta.0
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/index.d.ts +16 -3
- package/dist/index.js +15 -9
- package/dist/index.mjs +15 -9
- package/package.json +7 -7
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { Channel } from '@storybook/channels';
|
|
2
2
|
import * as _storybook_types from '@storybook/types';
|
|
3
3
|
import { Renderer, Args, StoryContext, StoryId, DecoratorApplicator, Addon_StoryWrapper, StoryName, ComponentTitle, StoryIndex, IndexEntry, Path, PreparedStory, Globals, GlobalTypes, LegacyStoryAnnotationsOrFn, NormalizedComponentAnnotations, NormalizedStoryAnnotations, ModuleExports, CSFFile, NormalizedProjectAnnotations, ModuleExport, PreparedMeta, ProjectAnnotations, StepRunner, NamedOrDefaultProjectAnnotations, ComponentAnnotations, ComposedStoryFn, Store_CSFExports, ComposeStoryFn, ModuleImportFn, StoryContextForLoaders, StoryContextForEnhancers, Parameters, StoryIndexV3, BoundStory, StrictArgTypes, ArgTypesEnhancer, LegacyStoryFn, DecoratorFunction, PartialStoryFn, StoryContextUpdate, NormalizedStoriesSpecifier, Addon_StorySortParameterV7, StoryRenderOptions, ViewMode, RenderToCanvas, RenderContextCallbacks, DocsContextProps, ResolvedModuleExportType, ResolvedModuleExportFromType } from '@storybook/types';
|
|
4
|
+
import { CleanupCallback } from '@storybook/csf';
|
|
5
|
+
import { RequestData, ArgTypesRequestPayload } from '@storybook/core-events';
|
|
4
6
|
import qs$1 from 'qs';
|
|
5
7
|
|
|
6
8
|
declare class AddonStore {
|
|
@@ -315,7 +317,7 @@ declare function composeConfigs<TRenderer extends Renderer>(moduleExportList: Mo
|
|
|
315
317
|
/**
|
|
316
318
|
* Compose step runners to create a single step runner that applies each step runner in order.
|
|
317
319
|
*
|
|
318
|
-
* A step runner is a
|
|
320
|
+
* A step runner is a function that takes a defined step: `step('label', () => { ... })`
|
|
319
321
|
* and runs it. The prototypical example is from `@storybook/addon-interactions` where the
|
|
320
322
|
* step runner will decorate all instrumented code inside the step with information about the
|
|
321
323
|
* label.
|
|
@@ -357,6 +359,7 @@ declare class StoryStore<TRenderer extends Renderer> {
|
|
|
357
359
|
globals: GlobalsStore;
|
|
358
360
|
args: ArgsStore;
|
|
359
361
|
hooks: Record<StoryId, HooksContext<TRenderer>>;
|
|
362
|
+
cleanupCallbacks: Record<StoryId, CleanupCallback[] | undefined>;
|
|
360
363
|
cachedCSFFiles?: Record<Path, CSFFile<TRenderer>>;
|
|
361
364
|
processCSFFileWithCache: typeof processCSFFile;
|
|
362
365
|
prepareMetaWithCache: typeof prepareMeta;
|
|
@@ -391,7 +394,8 @@ declare class StoryStore<TRenderer extends Renderer> {
|
|
|
391
394
|
getStoryContext(story: PreparedStory<TRenderer>, { forceInitialArgs }?: {
|
|
392
395
|
forceInitialArgs?: boolean | undefined;
|
|
393
396
|
}): Omit<StoryContextForLoaders, 'viewMode'>;
|
|
394
|
-
|
|
397
|
+
addCleanupCallbacks(story: PreparedStory<TRenderer>, callbacks: CleanupCallback[]): void;
|
|
398
|
+
cleanupStory(story: PreparedStory<TRenderer>): Promise<void>;
|
|
395
399
|
extract(options?: {
|
|
396
400
|
includeDocsOnly?: boolean;
|
|
397
401
|
}): Record<StoryId, StoryContextForEnhancers<TRenderer>>;
|
|
@@ -459,7 +463,7 @@ interface Render<TRenderer extends Renderer> {
|
|
|
459
463
|
renderToElement: (canvasElement: TRenderer['canvasElement'], renderStoryToElement?: any, options?: StoryRenderOptions) => Promise<void>;
|
|
460
464
|
}
|
|
461
465
|
|
|
462
|
-
type RenderPhase = 'preparing' | 'loading' | 'rendering' | 'playing' | 'played' | 'completed' | 'aborted' | 'errored';
|
|
466
|
+
type RenderPhase = 'preparing' | 'loading' | 'beforeEach' | 'rendering' | 'playing' | 'played' | 'completed' | 'aborted' | 'errored';
|
|
463
467
|
declare class StoryRender<TRenderer extends Renderer> implements Render<TRenderer> {
|
|
464
468
|
channel: Channel;
|
|
465
469
|
store: StoryStore<TRenderer>;
|
|
@@ -474,6 +478,7 @@ declare class StoryRender<TRenderer extends Renderer> implements Render<TRendere
|
|
|
474
478
|
private abortController?;
|
|
475
479
|
private canvasElement?;
|
|
476
480
|
private notYetRendered;
|
|
481
|
+
private rerenderEnqueued;
|
|
477
482
|
disableKeyListeners: boolean;
|
|
478
483
|
private teardownRender;
|
|
479
484
|
torndown: boolean;
|
|
@@ -489,6 +494,13 @@ declare class StoryRender<TRenderer extends Renderer> implements Render<TRendere
|
|
|
489
494
|
initial?: boolean;
|
|
490
495
|
forceRemount?: boolean;
|
|
491
496
|
}): Promise<void>;
|
|
497
|
+
/**
|
|
498
|
+
* Rerender the story.
|
|
499
|
+
* If the story is currently pending (loading/rendering), the rerender will be enqueued,
|
|
500
|
+
* and will be executed after the current render is completed.
|
|
501
|
+
* Rerendering while playing will not be enqueued, and will be executed immediately, to support
|
|
502
|
+
* rendering args changes while playing.
|
|
503
|
+
*/
|
|
492
504
|
rerender(): Promise<void>;
|
|
493
505
|
remount(): Promise<void>;
|
|
494
506
|
cancelRender(): void;
|
|
@@ -644,6 +656,7 @@ declare class Preview<TRenderer extends Renderer> {
|
|
|
644
656
|
storyId: StoryId;
|
|
645
657
|
updatedArgs: Args;
|
|
646
658
|
}): Promise<void>;
|
|
659
|
+
onRequestArgTypesInfo({ id, payload }: RequestData<ArgTypesRequestPayload>): Promise<void>;
|
|
647
660
|
onResetArgs({ storyId, argNames }: {
|
|
648
661
|
storyId: string;
|
|
649
662
|
argNames?: string[];
|
package/dist/index.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}var it,normalCompletion=!0,didErr=!1,err;return{s:function(){it=o[Symbol.iterator]()},n:function(){var step=it.next();return normalCompletion=step.done,step},e:function(_e2){didErr=!0,err=_e2},f:function(){try{!normalCompletion&&it.return!=null&&it.return()}finally{if(didErr)throw err}}}}function _unsupportedIterableToArray(o,minLen){if(o){if(typeof o=="string")return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);if(n==="Object"&&o.constructor&&(n=o.constructor.name),n==="Map"||n==="Set")return Array.from(n);if(n==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen)}}function _arrayLikeToArray(arr,len){(len==null||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i<len;i++)arr2[i]=arr[i];return arr2}var entities=require_lib(),defaults={fg:"#FFF",bg:"#000",newline:!1,escapeXML:!1,stream:!1,colors:getDefaultColors()};function getDefaultColors(){var colors={0:"#000",1:"#A00",2:"#0A0",3:"#A50",4:"#00A",5:"#A0A",6:"#0AA",7:"#AAA",8:"#555",9:"#F55",10:"#5F5",11:"#FF5",12:"#55F",13:"#F5F",14:"#5FF",15:"#FFF"};return range(0,5).forEach(function(red){range(0,5).forEach(function(green){range(0,5).forEach(function(blue){return setStyleColor(red,green,blue,colors)})})}),range(0,23).forEach(function(gray){var c=gray+232,l=toHexString(gray*10+8);colors[c]="#"+l+l+l}),colors}function setStyleColor(red,green,blue,colors){var c=16+red*36+green*6+blue,r=red>0?red*40+55:0,g=green>0?green*40+55:0,b=blue>0?blue*40+55:0;colors[c]=toColorHexString([r,g,b])}function toHexString(num){for(var str=num.toString(16);str.length<2;)str="0"+str;return str}function toColorHexString(ref){var results=[],_iterator=_createForOfIteratorHelper(ref),_step;try{for(_iterator.s();!(_step=_iterator.n()).done;){var r=_step.value;results.push(toHexString(r))}}catch(err){_iterator.e(err)}finally{_iterator.f()}return"#"+results.join("")}function generateOutput(stack,token,data,options){var result;return token==="text"?result=pushText(data,options):token==="display"?result=handleDisplay(stack,data,options):token==="xterm256"?result=pushForegroundColor(stack,options.colors[data]):token==="rgb"&&(result=handleRgb(stack,data)),result}function handleRgb(stack,data){data=data.substring(2).slice(0,-1);var operation=+data.substr(0,2),color=data.substring(5).split(";"),rgb=color.map(function(value){return("0"+Number(value).toString(16)).substr(-2)}).join("");return pushStyle(stack,(operation===38?"color:#":"background-color:#")+rgb)}function handleDisplay(stack,code,options){code=parseInt(code,10);var codeMap={"-1":function(){return"<br/>"},0:function(){return stack.length&&resetStyles(stack)},1:function(){return pushTag(stack,"b")},3:function(){return pushTag(stack,"i")},4:function(){return pushTag(stack,"u")},8:function(){return pushStyle(stack,"display:none")},9:function(){return pushTag(stack,"strike")},22:function(){return pushStyle(stack,"font-weight:normal;text-decoration:none;font-style:normal")},23:function(){return closeTag(stack,"i")},24:function(){return closeTag(stack,"u")},39:function(){return pushForegroundColor(stack,options.fg)},49:function(){return pushBackgroundColor(stack,options.bg)},53:function(){return pushStyle(stack,"text-decoration:overline")}},result;return codeMap[code]?result=codeMap[code]():4<code&&code<7?result=pushTag(stack,"blink"):29<code&&code<38?result=pushForegroundColor(stack,options.colors[code-30]):39<code&&code<48?result=pushBackgroundColor(stack,options.colors[code-40]):89<code&&code<98?result=pushForegroundColor(stack,options.colors[8+(code-90)]):99<code&&code<108&&(result=pushBackgroundColor(stack,options.colors[8+(code-100)])),result}function resetStyles(stack){var stackClone=stack.slice(0);return stack.length=0,stackClone.reverse().map(function(tag){return"</"+tag+">"}).join("")}function range(low,high){for(var results=[],j=low;j<=high;j++)results.push(j);return results}function notCategory(category){return function(e){return(category===null||e.category!==category)&&category!=="all"}}function categoryForCode(code){code=parseInt(code,10);var result=null;return code===0?result="all":code===1?result="bold":2<code&&code<5?result="underline":4<code&&code<7?result="blink":code===8?result="hide":code===9?result="strike":29<code&&code<38||code===39||89<code&&code<98?result="foreground-color":(39<code&&code<48||code===49||99<code&&code<108)&&(result="background-color"),result}function pushText(text,options){return options.escapeXML?entities.encodeXML(text):text}function pushTag(stack,tag,style){return style||(style=""),stack.push(tag),"<".concat(tag).concat(style?' style="'.concat(style,'"'):"",">")}function pushStyle(stack,style){return pushTag(stack,"span",style)}function pushForegroundColor(stack,color){return pushTag(stack,"span","color:"+color)}function pushBackgroundColor(stack,color){return pushTag(stack,"span","background-color:"+color)}function closeTag(stack,style){var last;if(stack.slice(-1)[0]===style&&(last=stack.pop()),last)return"</"+style+">"}function tokenize(text,options,callback){var ansiMatch=!1,ansiHandler=3;function remove(){return""}function removeXterm256(m,g1){return callback("xterm256",g1),""}function newline(m){return options.newline?callback("display",-1):callback("text",m),""}function ansiMess(m,g1){ansiMatch=!0,g1.trim().length===0&&(g1="0"),g1=g1.trimRight(";").split(";");var _iterator2=_createForOfIteratorHelper(g1),_step2;try{for(_iterator2.s();!(_step2=_iterator2.n()).done;){var g=_step2.value;callback("display",g)}}catch(err){_iterator2.e(err)}finally{_iterator2.f()}return""}function realText(m){return callback("text",m),""}function rgb(m){return callback("rgb",m),""}var tokens=[{pattern:/^\x08+/,sub:remove},{pattern:/^\x1b\[[012]?K/,sub:remove},{pattern:/^\x1b\[\(B/,sub:remove},{pattern:/^\x1b\[[34]8;2;\d+;\d+;\d+m/,sub:rgb},{pattern:/^\x1b\[38;5;(\d+)m/,sub:removeXterm256},{pattern:/^\n/,sub:newline},{pattern:/^\r+\n/,sub:newline},{pattern:/^\x1b\[((?:\d{1,3};?)+|)m/,sub:ansiMess},{pattern:/^\x1b\[\d?J/,sub:remove},{pattern:/^\x1b\[\d{0,3};\d{0,3}f/,sub:remove},{pattern:/^\x1b\[?[\d;]{0,3}/,sub:remove},{pattern:/^(([^\x1b\x08\r\n])+)/,sub:realText}];function process(handler2,i2){i2>ansiHandler&&ansiMatch||(ansiMatch=!1,text=text.replace(handler2.pattern,handler2.sub))}var results1=[],_text=text,length=_text.length;outer:for(;length>0;){for(var i=0,o=0,len=tokens.length;o<len;i=++o){var handler=tokens[i];if(process(handler,i),text.length!==length){length=text.length;continue outer}}if(text.length===length)break;results1.push(0),length=text.length}return results1}function updateStickyStack(stickyStack,token,data){return token!=="text"&&(stickyStack=stickyStack.filter(notCategory(categoryForCode(data))),stickyStack.push({token,data,category:categoryForCode(data)})),stickyStack}var Filter=function(){function Filter2(options){_classCallCheck(this,Filter2),options=options||{},options.colors&&(options.colors=Object.assign({},defaults.colors,options.colors)),this.options=Object.assign({},defaults,options),this.stack=[],this.stickyStack=[]}return _createClass(Filter2,[{key:"toHtml",value:function(input){var _this=this;input=typeof input=="string"?[input]:input;var stack=this.stack,options=this.options,buf=[];return this.stickyStack.forEach(function(element){var output=generateOutput(stack,element.token,element.data,options);output&&buf.push(output)}),tokenize(input.join(""),options,function(token,data){var output=generateOutput(stack,token,data,options);output&&buf.push(output),options.stream&&(_this.stickyStack=updateStickyStack(_this.stickyStack,token,data))}),stack.length&&buf.push(resetStyles(stack)),buf.join("")}}]),Filter2}();module2.exports=Filter}});var src_exports={};__export(src_exports,{DocsContext:()=>DocsContext,HooksContext:()=>HooksContext,Preview:()=>Preview,PreviewWeb:()=>PreviewWeb,PreviewWithSelection:()=>PreviewWithSelection,StoryStore:()=>StoryStore,UrlStore:()=>UrlStore,WebView:()=>WebView,addons:()=>addons,applyHooks:()=>applyHooks,combineArgs:()=>combineArgs,combineParameters:()=>combineParameters,composeConfigs:()=>composeConfigs,composeStepRunners:()=>composeStepRunners,composeStories:()=>composeStories,composeStory:()=>composeStory,createPlaywrightTest:()=>createPlaywrightTest,decorateStory:()=>decorateStory,defaultDecorateStory:()=>defaultDecorateStory,filterArgTypes:()=>filterArgTypes,inferControls:()=>inferControls,makeDecorator:()=>makeDecorator,mockChannel:()=>mockChannel,normalizeStory:()=>normalizeStory,prepareMeta:()=>prepareMeta,prepareStory:()=>prepareStory,sanitizeStoryContextUpdate:()=>sanitizeStoryContextUpdate,setProjectAnnotations:()=>setProjectAnnotations,simulateDOMContentLoaded:()=>simulateDOMContentLoaded,simulatePageLoad:()=>simulatePageLoad,sortStoriesV7:()=>sortStoriesV7,useArgs:()=>useArgs,useCallback:()=>useCallback,useChannel:()=>useChannel,useEffect:()=>useEffect,useGlobals:()=>useGlobals,useMemo:()=>useMemo,useParameter:()=>useParameter,useReducer:()=>useReducer,useRef:()=>useRef,useState:()=>useState,useStoryContext:()=>useStoryContext,userOrAutoTitle:()=>userOrAutoTitle,userOrAutoTitleFromSpecifier:()=>userOrAutoTitleFromSpecifier});module.exports=__toCommonJS(src_exports);var import_global=require("@storybook/global");var import_channels=require("@storybook/channels");function mockChannel(){let transport={setHandler:()=>{},send:()=>{}};return new import_channels.Channel({transport})}var AddonStore=class{constructor(){this.getChannel=()=>{if(!this.channel){let channel=mockChannel();return this.setChannel(channel),channel}return this.channel};this.ready=()=>this.promise;this.hasChannel=()=>!!this.channel;this.setChannel=channel=>{this.channel=channel,this.resolve()};this.promise=new Promise(res=>{this.resolve=()=>res(this.getChannel())})}},KEY="__STORYBOOK_ADDONS_PREVIEW";function getAddonsStore(){return import_global.global[KEY]||(import_global.global[KEY]=new AddonStore),import_global.global[KEY]}var addons=getAddonsStore();var import_global2=require("@storybook/global"),import_client_logger=require("@storybook/client-logger"),import_core_events=require("@storybook/core-events");var HooksContext=class{constructor(){this.hookListsMap=void 0;this.mountedDecorators=void 0;this.prevMountedDecorators=void 0;this.currentHooks=void 0;this.nextHookIndex=void 0;this.currentPhase=void 0;this.currentEffects=void 0;this.prevEffects=void 0;this.currentDecoratorName=void 0;this.hasUpdates=void 0;this.currentContext=void 0;this.renderListener=storyId=>{storyId===this.currentContext?.id&&(this.triggerEffects(),this.currentContext=null,this.removeRenderListeners())};this.init()}init(){this.hookListsMap=new WeakMap,this.mountedDecorators=new Set,this.prevMountedDecorators=new Set,this.currentHooks=[],this.nextHookIndex=0,this.currentPhase="NONE",this.currentEffects=[],this.prevEffects=[],this.currentDecoratorName=null,this.hasUpdates=!1,this.currentContext=null}clean(){this.prevEffects.forEach(effect=>{effect.destroy&&effect.destroy()}),this.init(),this.removeRenderListeners()}getNextHook(){let hook=this.currentHooks[this.nextHookIndex];return this.nextHookIndex+=1,hook}triggerEffects(){this.prevEffects.forEach(effect=>{!this.currentEffects.includes(effect)&&effect.destroy&&effect.destroy()}),this.currentEffects.forEach(effect=>{this.prevEffects.includes(effect)||(effect.destroy=effect.create())}),this.prevEffects=this.currentEffects,this.currentEffects=[]}addRenderListeners(){this.removeRenderListeners(),addons.getChannel().on(import_core_events.STORY_RENDERED,this.renderListener)}removeRenderListeners(){addons.getChannel().removeListener(import_core_events.STORY_RENDERED,this.renderListener)}};function hookify(fn){let hookified=(...args)=>{let{hooks}=typeof args[0]=="function"?args[1]:args[0],prevPhase=hooks.currentPhase,prevHooks=hooks.currentHooks,prevNextHookIndex=hooks.nextHookIndex,prevDecoratorName=hooks.currentDecoratorName;hooks.currentDecoratorName=fn.name,hooks.prevMountedDecorators.has(fn)?(hooks.currentPhase="UPDATE",hooks.currentHooks=hooks.hookListsMap.get(fn)||[]):(hooks.currentPhase="MOUNT",hooks.currentHooks=[],hooks.hookListsMap.set(fn,hooks.currentHooks),hooks.prevMountedDecorators.add(fn)),hooks.nextHookIndex=0;let prevContext=import_global2.global.STORYBOOK_HOOKS_CONTEXT;import_global2.global.STORYBOOK_HOOKS_CONTEXT=hooks;let result=fn(...args);if(import_global2.global.STORYBOOK_HOOKS_CONTEXT=prevContext,hooks.currentPhase==="UPDATE"&&hooks.getNextHook()!=null)throw new Error("Rendered fewer hooks than expected. This may be caused by an accidental early return statement.");return hooks.currentPhase=prevPhase,hooks.currentHooks=prevHooks,hooks.nextHookIndex=prevNextHookIndex,hooks.currentDecoratorName=prevDecoratorName,result};return hookified.originalFn=fn,hookified}var numberOfRenders=0,RENDER_LIMIT=25,applyHooks=applyDecorators=>(storyFn,decorators)=>{let decorated=applyDecorators(hookify(storyFn),decorators.map(decorator=>hookify(decorator)));return context=>{let{hooks}=context;hooks.prevMountedDecorators??=new Set,hooks.mountedDecorators=new Set([storyFn,...decorators]),hooks.currentContext=context,hooks.hasUpdates=!1;let result=decorated(context);for(numberOfRenders=1;hooks.hasUpdates;)if(hooks.hasUpdates=!1,hooks.currentEffects=[],result=decorated(context),numberOfRenders+=1,numberOfRenders>RENDER_LIMIT)throw new Error("Too many re-renders. Storybook limits the number of renders to prevent an infinite loop.");return hooks.addRenderListeners(),result}},areDepsEqual=(deps,nextDeps)=>deps.length===nextDeps.length&&deps.every((dep,i)=>dep===nextDeps[i]),invalidHooksError=()=>new Error("Storybook preview hooks can only be called inside decorators and story functions.");function getHooksContextOrNull(){return import_global2.global.STORYBOOK_HOOKS_CONTEXT||null}function getHooksContextOrThrow(){let hooks=getHooksContextOrNull();if(hooks==null)throw invalidHooksError();return hooks}function useHook(name,callback,deps){let hooks=getHooksContextOrThrow();if(hooks.currentPhase==="MOUNT"){deps!=null&&!Array.isArray(deps)&&import_client_logger.logger.warn(`${name} received a final argument that is not an array (instead, received ${deps}). When specified, the final argument must be an array.`);let hook={name,deps};return hooks.currentHooks.push(hook),callback(hook),hook}if(hooks.currentPhase==="UPDATE"){let hook=hooks.getNextHook();if(hook==null)throw new Error("Rendered more hooks than during the previous render.");return hook.name!==name&&import_client_logger.logger.warn(`Storybook has detected a change in the order of Hooks${hooks.currentDecoratorName?` called by ${hooks.currentDecoratorName}`:""}. This will lead to bugs and errors if not fixed.`),deps!=null&&hook.deps==null&&import_client_logger.logger.warn(`${name} received a final argument during this render, but not during the previous render. Even though the final argument is optional, its type cannot change between renders.`),deps!=null&&hook.deps!=null&&deps.length!==hook.deps.length&&import_client_logger.logger.warn(`The final argument passed to ${name} changed size between renders. The order and size of this array must remain constant.
|
|
4
4
|
Previous: ${hook.deps}
|
|
5
5
|
Incoming: ${deps}`),(deps==null||hook.deps==null||!areDepsEqual(deps,hook.deps))&&(callback(hook),hook.deps=deps),hook}throw invalidHooksError()}function useMemoLike(name,nextCreate,deps){let{memoizedState}=useHook(name,hook=>{hook.memoizedState=nextCreate()},deps);return memoizedState}function useMemo(nextCreate,deps){return useMemoLike("useMemo",nextCreate,deps)}function useCallback(callback,deps){return useMemoLike("useCallback",()=>callback,deps)}function useRefLike(name,initialValue){return useMemoLike(name,()=>({current:initialValue}),[])}function useRef(initialValue){return useRefLike("useRef",initialValue)}function triggerUpdate(){let hooks=getHooksContextOrNull();if(hooks!=null&&hooks.currentPhase!=="NONE")hooks.hasUpdates=!0;else try{addons.getChannel().emit(import_core_events.FORCE_RE_RENDER)}catch{import_client_logger.logger.warn("State updates of Storybook preview hooks work only in browser")}}function useStateLike(name,initialState){let stateRef=useRefLike(name,typeof initialState=="function"?initialState():initialState),setState=update=>{stateRef.current=typeof update=="function"?update(stateRef.current):update,triggerUpdate()};return[stateRef.current,setState]}function useState(initialState){return useStateLike("useState",initialState)}function useReducer(reducer,initialArg,init){let initialState=init!=null?()=>init(initialArg):initialArg,[state,setState]=useStateLike("useReducer",initialState);return[state,action=>setState(prevState=>reducer(prevState,action))]}function useEffect(create,deps){let hooks=getHooksContextOrThrow(),effect=useMemoLike("useEffect",()=>({create}),deps);hooks.currentEffects.includes(effect)||hooks.currentEffects.push(effect)}function useChannel(eventMap,deps=[]){let channel=addons.getChannel();return useEffect(()=>(Object.entries(eventMap).forEach(([type,listener])=>channel.on(type,listener)),()=>{Object.entries(eventMap).forEach(([type,listener])=>channel.removeListener(type,listener))}),[...Object.keys(eventMap),...deps]),useCallback(channel.emit.bind(channel),[channel])}function useStoryContext(){let{currentContext}=getHooksContextOrThrow();if(currentContext==null)throw invalidHooksError();return currentContext}function useParameter(parameterKey,defaultValue){let{parameters}=useStoryContext();if(parameterKey)return parameters[parameterKey]??defaultValue}function useArgs(){let channel=addons.getChannel(),{id:storyId,args}=useStoryContext(),updateArgs=useCallback(updatedArgs=>channel.emit(import_core_events.UPDATE_STORY_ARGS,{storyId,updatedArgs}),[channel,storyId]),resetArgs=useCallback(argNames=>channel.emit(import_core_events.RESET_STORY_ARGS,{storyId,argNames}),[channel,storyId]);return[args,updateArgs,resetArgs]}function useGlobals(){let channel=addons.getChannel(),{globals}=useStoryContext(),updateGlobals=useCallback(newGlobals=>channel.emit(import_core_events.UPDATE_GLOBALS,{globals:newGlobals}),[channel]);return[globals,updateGlobals]}var makeDecorator=({name,parameterName,wrapper,skipIfNoParametersOrOptions=!1})=>{let decorator=options=>(storyFn,context)=>{let parameters=context.parameters&&context.parameters[parameterName];return parameters&¶meters.disable||skipIfNoParametersOrOptions&&!options&&!parameters?storyFn(context):wrapper(storyFn,context,{options,parameters})};return(...args)=>typeof args[0]=="function"?decorator()(...args):(...innerArgs)=>{if(innerArgs.length>1)return args.length>1?decorator(args)(...innerArgs):decorator(...args)(...innerArgs);throw new Error(`Passing stories directly into ${name}() is not allowed,
|
|
6
|
-
instead use addDecorator(${name}) and pass options with the '${parameterName}' parameter`)}};var import_memoizerific2=__toESM(require("memoizerific")),import_mapValues4=__toESM(require("lodash/mapValues.js")),import_pick=__toESM(require("lodash/pick.js")),import_preview_errors2=require("@storybook/core-events/preview-errors"),
|
|
6
|
+
instead use addDecorator(${name}) and pass options with the '${parameterName}' parameter`)}};var import_memoizerific2=__toESM(require("memoizerific")),import_mapValues4=__toESM(require("lodash/mapValues.js")),import_pick=__toESM(require("lodash/pick.js")),import_preview_errors2=require("@storybook/core-events/preview-errors"),import_client_logger9=require("@storybook/client-logger");var import_memoizerific=__toESM(require("memoizerific")),import_preview_errors=require("@storybook/core-events/preview-errors"),getImportPathMap=(0,import_memoizerific.default)(1)(entries=>Object.values(entries).reduce((acc,entry)=>(acc[entry.importPath]=acc[entry.importPath]||entry,acc),{})),StoryIndexStore=class{constructor({entries}={v:4,entries:{}}){this.entries=entries}entryFromSpecifier(specifier){let entries=Object.values(this.entries);if(specifier==="*")return entries[0];if(typeof specifier=="string")return this.entries[specifier]?this.entries[specifier]:entries.find(entry=>entry.id.startsWith(specifier));let{name,title}=specifier;return entries.find(entry=>entry.name===name&&entry.title===title)}storyIdToEntry(storyId){let storyEntry=this.entries[storyId];if(!storyEntry)throw new import_preview_errors.MissingStoryAfterHmrError({storyId});return storyEntry}importPathToEntry(importPath){return getImportPathMap(this.entries)[importPath]}};var import_dequal=require("dequal"),import_client_logger2=require("@storybook/client-logger"),import_isPlainObject=__toESM(require("lodash/isPlainObject.js")),import_ts_dedent=require("ts-dedent"),INCOMPATIBLE=Symbol("incompatible"),map=(arg,argType)=>{let type=argType.type;if(arg==null||!type||argType.mapping)return arg;switch(type.name){case"string":return String(arg);case"enum":return arg;case"number":return Number(arg);case"boolean":return String(arg)==="true";case"array":return!type.value||!Array.isArray(arg)?INCOMPATIBLE:arg.reduce((acc,item,index)=>{let mapped=map(item,{type:type.value});return mapped!==INCOMPATIBLE&&(acc[index]=mapped),acc},new Array(arg.length));case"object":return typeof arg=="string"||typeof arg=="number"?arg:!type.value||typeof arg!="object"?INCOMPATIBLE:Object.entries(arg).reduce((acc,[key,val])=>{let mapped=map(val,{type:type.value[key]});return mapped===INCOMPATIBLE?acc:Object.assign(acc,{[key]:mapped})},{});default:return INCOMPATIBLE}},mapArgsToTypes=(args,argTypes)=>Object.entries(args).reduce((acc,[key,value])=>{if(!argTypes[key])return acc;let mapped=map(value,argTypes[key]);return mapped===INCOMPATIBLE?acc:Object.assign(acc,{[key]:mapped})},{}),combineArgs=(value,update)=>Array.isArray(value)&&Array.isArray(update)?update.reduce((acc,upd,index)=>(acc[index]=combineArgs(value[index],update[index]),acc),[...value]).filter(v=>v!==void 0):!(0,import_isPlainObject.default)(value)||!(0,import_isPlainObject.default)(update)?update:Object.keys({...value,...update}).reduce((acc,key)=>{if(key in update){let combined=combineArgs(value[key],update[key]);combined!==void 0&&(acc[key]=combined)}else acc[key]=value[key];return acc},{}),validateOptions=(args,argTypes)=>Object.entries(argTypes).reduce((acc,[key,{options}])=>{function allowArg(){return key in args&&(acc[key]=args[key]),acc}if(!options)return allowArg();if(!Array.isArray(options))return import_client_logger2.once.error(import_ts_dedent.dedent`
|
|
7
7
|
Invalid argType: '${key}.options' should be an array.
|
|
8
8
|
|
|
9
9
|
More info: https://storybook.js.org/docs/react/api/argtypes
|
|
@@ -16,13 +16,19 @@ CSF .story annotations deprecated; annotate story functions directly:
|
|
|
16
16
|
- StoryFn.story.name => StoryFn.storyName
|
|
17
17
|
- StoryFn.story.(parameters|decorators) => StoryFn.(parameters|decorators)
|
|
18
18
|
See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#hoisted-csf-annotations for details and codemod.
|
|
19
|
-
`,deprecatedStoryAnnotationWarning=(0,import_util_deprecate.default)(()=>{},deprecatedStoryAnnotation);function normalizeStory(key,storyAnnotations,meta){let storyObject=storyAnnotations,userStoryFn=typeof storyAnnotations=="function"?storyAnnotations:null,{story}=storyObject;story&&(import_client_logger4.logger.debug("deprecated story",story),deprecatedStoryAnnotationWarning());let exportName=(0,import_csf.storyNameFromExport)(key),name=typeof storyObject!="function"&&storyObject.name||storyObject.storyName||story?.name||exportName,decorators=[...normalizeArrays(storyObject.decorators),...normalizeArrays(story?.decorators)],parameters={...story?.parameters,...storyObject.parameters},args={...story?.args,...storyObject.args},argTypes={...story?.argTypes,...storyObject.argTypes},loaders=[...normalizeArrays(storyObject.loaders),...normalizeArrays(story?.loaders)],{render,play,tags=[]}=storyObject,id=parameters.__id||(0,import_csf.toId)(meta.id,exportName);return{moduleExport:storyAnnotations,id,name,tags,decorators,parameters,args,argTypes:normalizeInputTypes(argTypes),loaders,...render&&{render},...userStoryFn&&{userStoryFn},...play&&{play}}}var import_csf3=require("@storybook/csf"),import_client_logger5=require("@storybook/client-logger");var import_csf2=require("@storybook/csf");function normalizeComponentAnnotations(defaultExport,title=defaultExport.title,importPath){let{id,argTypes}=defaultExport;return{id:(0,import_csf2.sanitize)(id||title),...defaultExport,title,...argTypes&&{argTypes:normalizeInputTypes(argTypes)},parameters:{fileName:importPath,...defaultExport.parameters}}}var checkGlobals=parameters=>{let{globals,globalTypes}=parameters;(globals||globalTypes)&&import_client_logger5.logger.error("Global args/argTypes can only be set globally",JSON.stringify({globals,globalTypes}))},checkStorySort=parameters=>{let{options}=parameters;options?.storySort&&import_client_logger5.logger.error("The storySort option parameter can only be set globally")},checkDisallowedParameters=parameters=>{parameters&&(checkGlobals(parameters),checkStorySort(parameters))};function processCSFFile(moduleExports,importPath,title){let{default:defaultExport,__namedExportsOrder,...namedExports}=moduleExports,meta=normalizeComponentAnnotations(defaultExport,title,importPath);checkDisallowedParameters(meta.parameters);let csfFile={meta,stories:{},moduleExports};return Object.keys(namedExports).forEach(key=>{if((0,import_csf3.isExportStory)(key,meta)){let storyMeta=normalizeStory(key,namedExports[key],meta);checkDisallowedParameters(storyMeta.parameters),csfFile.stories[storyMeta.id]=storyMeta}}),csfFile}var import_global3=require("@storybook/global"),import_csf4=require("@storybook/csf");var import_isPlainObject2=__toESM(require("lodash/isPlainObject.js")),combineParameters=(...parameterSets)=>{let mergeKeys={},definedParametersSets=parameterSets.filter(Boolean),combined=definedParametersSets.reduce((acc,parameters)=>(Object.entries(parameters).forEach(([key,value])=>{let existing=acc[key];Array.isArray(value)||typeof existing>"u"?acc[key]=value:(0,import_isPlainObject2.default)(value)&&(0,import_isPlainObject2.default)(existing)?mergeKeys[key]=!0:typeof value<"u"&&(acc[key]=value)}),acc),{});return Object.keys(mergeKeys).forEach(key=>{let mergeValues=definedParametersSets.filter(Boolean).map(p=>p[key]).filter(value=>typeof value<"u");mergeValues.every(value=>(0,import_isPlainObject2.default)(value))?combined[key]=combineParameters(...mergeValues):combined[key]=mergeValues[mergeValues.length-1]}),combined};function decorateStory(storyFn,decorator,bindWithContext){let boundStoryFunction=bindWithContext(storyFn);return context=>decorator(boundStoryFunction,context)}function sanitizeStoryContextUpdate({componentId,title,kind,id,name,story,parameters,initialArgs,argTypes,...update}={}){return update}function defaultDecorateStory(storyFn,decorators){let contextStore={},bindWithContext=decoratedStoryFn=>update=>{if(!contextStore.value)throw new Error("Decorated function called without init");return contextStore.value={...contextStore.value,...sanitizeStoryContextUpdate(update)},decoratedStoryFn(contextStore.value)},decoratedWithContextStore=decorators.reduce((story,decorator)=>decorateStory(story,decorator,bindWithContext),storyFn);return context=>(contextStore.value=context,decoratedWithContextStore(context))}function prepareStory(storyAnnotations,componentAnnotations,projectAnnotations){let{moduleExport,id,name}=storyAnnotations||{},partialAnnotations=preparePartialAnnotations(storyAnnotations,componentAnnotations,projectAnnotations),applyLoaders=async context=>{let updatedContext={...context,loaded:{}};for(let loaders of[..."__STORYBOOK_TEST_LOADERS__"in import_global3.global&&Array.isArray(import_global3.global.__STORYBOOK_TEST_LOADERS__)?[import_global3.global.__STORYBOOK_TEST_LOADERS__]:[],normalizeArrays(projectAnnotations.loaders),normalizeArrays(componentAnnotations.loaders),normalizeArrays(storyAnnotations.loaders)]){let loadResults=await Promise.all(loaders.map(loader=>loader(updatedContext))),loaded=Object.assign({},...loadResults);updatedContext={...updatedContext,loaded:{...updatedContext.loaded,...loaded}}}return updatedContext},undecoratedStoryFn=context=>render(context.args,context),{applyDecorators=defaultDecorateStory,runStep}=projectAnnotations,decorators=[...normalizeArrays(storyAnnotations?.decorators),...normalizeArrays(componentAnnotations?.decorators),...normalizeArrays(projectAnnotations?.decorators)],render=storyAnnotations?.userStoryFn||storyAnnotations?.render||componentAnnotations.render||projectAnnotations.render;if(!render)throw new Error(`No render function available for storyId '${id}'`);let decoratedStoryFn=applyHooks(applyDecorators)(undecoratedStoryFn,decorators),unboundStoryFn=context=>decoratedStoryFn(context),play=storyAnnotations?.play||componentAnnotations.play;return{...partialAnnotations,moduleExport,id,name,story:name,originalStoryFn:render,undecoratedStoryFn,unboundStoryFn,applyLoaders,playFunction:play&&(async storyContext=>{let playFunctionContext={...storyContext,step:(label,play2)=>runStep(label,play2,playFunctionContext)};return play(playFunctionContext)})}}function prepareMeta(componentAnnotations,projectAnnotations,moduleExport){return{...preparePartialAnnotations(void 0,componentAnnotations,projectAnnotations),moduleExport}}function preparePartialAnnotations(storyAnnotations,componentAnnotations,projectAnnotations){let
|
|
19
|
+
`,deprecatedStoryAnnotationWarning=(0,import_util_deprecate.default)(()=>{},deprecatedStoryAnnotation);function normalizeStory(key,storyAnnotations,meta){let storyObject=storyAnnotations,userStoryFn=typeof storyAnnotations=="function"?storyAnnotations:null,{story}=storyObject;story&&(import_client_logger4.logger.debug("deprecated story",story),deprecatedStoryAnnotationWarning());let exportName=(0,import_csf.storyNameFromExport)(key),name=typeof storyObject!="function"&&storyObject.name||storyObject.storyName||story?.name||exportName,decorators=[...normalizeArrays(storyObject.decorators),...normalizeArrays(story?.decorators)],parameters={...story?.parameters,...storyObject.parameters},args={...story?.args,...storyObject.args},argTypes={...story?.argTypes,...storyObject.argTypes},loaders=[...normalizeArrays(storyObject.loaders),...normalizeArrays(story?.loaders)],beforeEach=[...normalizeArrays(storyObject.beforeEach),...normalizeArrays(story?.beforeEach)],{render,play,tags=[]}=storyObject,id=parameters.__id||(0,import_csf.toId)(meta.id,exportName);return{moduleExport:storyAnnotations,id,name,tags,decorators,parameters,args,argTypes:normalizeInputTypes(argTypes),loaders,beforeEach,...render&&{render},...userStoryFn&&{userStoryFn},...play&&{play}}}var import_csf3=require("@storybook/csf"),import_client_logger5=require("@storybook/client-logger");var import_csf2=require("@storybook/csf");function normalizeComponentAnnotations(defaultExport,title=defaultExport.title,importPath){let{id,argTypes}=defaultExport;return{id:(0,import_csf2.sanitize)(id||title),...defaultExport,title,...argTypes&&{argTypes:normalizeInputTypes(argTypes)},parameters:{fileName:importPath,...defaultExport.parameters}}}var checkGlobals=parameters=>{let{globals,globalTypes}=parameters;(globals||globalTypes)&&import_client_logger5.logger.error("Global args/argTypes can only be set globally",JSON.stringify({globals,globalTypes}))},checkStorySort=parameters=>{let{options}=parameters;options?.storySort&&import_client_logger5.logger.error("The storySort option parameter can only be set globally")},checkDisallowedParameters=parameters=>{parameters&&(checkGlobals(parameters),checkStorySort(parameters))};function processCSFFile(moduleExports,importPath,title){let{default:defaultExport,__namedExportsOrder,...namedExports}=moduleExports,meta=normalizeComponentAnnotations(defaultExport,title,importPath);checkDisallowedParameters(meta.parameters);let csfFile={meta,stories:{},moduleExports};return Object.keys(namedExports).forEach(key=>{if((0,import_csf3.isExportStory)(key,meta)){let storyMeta=normalizeStory(key,namedExports[key],meta);checkDisallowedParameters(storyMeta.parameters),csfFile.stories[storyMeta.id]=storyMeta}}),csfFile}var import_ts_dedent3=require("ts-dedent"),import_global3=require("@storybook/global"),import_csf4=require("@storybook/csf"),import_global4=require("@storybook/global"),import_client_logger6=require("@storybook/client-logger");var import_isPlainObject2=__toESM(require("lodash/isPlainObject.js")),combineParameters=(...parameterSets)=>{let mergeKeys={},definedParametersSets=parameterSets.filter(Boolean),combined=definedParametersSets.reduce((acc,parameters)=>(Object.entries(parameters).forEach(([key,value])=>{let existing=acc[key];Array.isArray(value)||typeof existing>"u"?acc[key]=value:(0,import_isPlainObject2.default)(value)&&(0,import_isPlainObject2.default)(existing)?mergeKeys[key]=!0:typeof value<"u"&&(acc[key]=value)}),acc),{});return Object.keys(mergeKeys).forEach(key=>{let mergeValues=definedParametersSets.filter(Boolean).map(p=>p[key]).filter(value=>typeof value<"u");mergeValues.every(value=>(0,import_isPlainObject2.default)(value))?combined[key]=combineParameters(...mergeValues):combined[key]=mergeValues[mergeValues.length-1]}),combined};function decorateStory(storyFn,decorator,bindWithContext){let boundStoryFunction=bindWithContext(storyFn);return context=>decorator(boundStoryFunction,context)}function sanitizeStoryContextUpdate({componentId,title,kind,id,name,story,parameters,initialArgs,argTypes,...update}={}){return update}function defaultDecorateStory(storyFn,decorators){let contextStore={},bindWithContext=decoratedStoryFn=>update=>{if(!contextStore.value)throw new Error("Decorated function called without init");return contextStore.value={...contextStore.value,...sanitizeStoryContextUpdate(update)},decoratedStoryFn(contextStore.value)},decoratedWithContextStore=decorators.reduce((story,decorator)=>decorateStory(story,decorator,bindWithContext),storyFn);return context=>(contextStore.value=context,decoratedWithContextStore(context))}function prepareStory(storyAnnotations,componentAnnotations,projectAnnotations){let{moduleExport,id,name}=storyAnnotations||{},partialAnnotations=preparePartialAnnotations(storyAnnotations,componentAnnotations,projectAnnotations),applyLoaders=async context=>{let updatedContext={...context,loaded:{}};for(let loaders of[..."__STORYBOOK_TEST_LOADERS__"in import_global3.global&&Array.isArray(import_global3.global.__STORYBOOK_TEST_LOADERS__)?[import_global3.global.__STORYBOOK_TEST_LOADERS__]:[],normalizeArrays(projectAnnotations.loaders),normalizeArrays(componentAnnotations.loaders),normalizeArrays(storyAnnotations.loaders)]){let loadResults=await Promise.all(loaders.map(loader=>loader(updatedContext))),loaded=Object.assign({},...loadResults);updatedContext={...updatedContext,loaded:{...updatedContext.loaded,...loaded}}}return updatedContext},applyBeforeEach=async context=>{let cleanupCallbacks=new Array;for(let beforeEach of[...normalizeArrays(projectAnnotations.beforeEach),...normalizeArrays(componentAnnotations.beforeEach),...normalizeArrays(storyAnnotations.beforeEach)]){let cleanup=await beforeEach(context);cleanup&&cleanupCallbacks.push(cleanup)}return cleanupCallbacks},undecoratedStoryFn=context=>render(context.args,context),{applyDecorators=defaultDecorateStory,runStep}=projectAnnotations,decorators=[...normalizeArrays(storyAnnotations?.decorators),...normalizeArrays(componentAnnotations?.decorators),...normalizeArrays(projectAnnotations?.decorators)],render=storyAnnotations?.userStoryFn||storyAnnotations?.render||componentAnnotations.render||projectAnnotations.render;if(!render)throw new Error(`No render function available for storyId '${id}'`);let decoratedStoryFn=applyHooks(applyDecorators)(undecoratedStoryFn,decorators),unboundStoryFn=context=>decoratedStoryFn(context),play=storyAnnotations?.play||componentAnnotations.play;return{...partialAnnotations,moduleExport,id,name,story:name,originalStoryFn:render,undecoratedStoryFn,unboundStoryFn,applyLoaders,applyBeforeEach,playFunction:play&&(async storyContext=>{let playFunctionContext={...storyContext,step:(label,play2)=>runStep(label,play2,playFunctionContext)};return play(playFunctionContext)})}}function prepareMeta(componentAnnotations,projectAnnotations,moduleExport){return{...preparePartialAnnotations(void 0,componentAnnotations,projectAnnotations),moduleExport}}function preparePartialAnnotations(storyAnnotations,componentAnnotations,projectAnnotations){let defaultTags=["dev","test"];typeof import_global4.global.DOCS_OPTIONS?.autodocs<"u"&&import_client_logger6.once.warn(import_ts_dedent3.dedent`
|
|
20
|
+
The \`docs.autodocs\` setting in '.storybook/main.js' is deprecated. Use \`tags: ['autodocs']\` in \`.storybook/preview.js\` instead.
|
|
21
|
+
|
|
22
|
+
For more info see: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#mainjs-docsautodocs-is-deprecated
|
|
23
|
+
`);let extraTags=import_global4.global.DOCS_OPTIONS?.autodocs===!0?["autodocs"]:[],tags=(0,import_csf4.combineTags)(...defaultTags,...extraTags,...projectAnnotations.tags??[],...componentAnnotations.tags??[],...storyAnnotations?.tags??[]),parameters=combineParameters(projectAnnotations.parameters,componentAnnotations.parameters,storyAnnotations?.parameters),{argTypesEnhancers=[],argsEnhancers=[]}=projectAnnotations,passedArgTypes=combineParameters(projectAnnotations.argTypes,componentAnnotations.argTypes,storyAnnotations?.argTypes);if(storyAnnotations){let render=storyAnnotations?.userStoryFn||storyAnnotations?.render||componentAnnotations.render||projectAnnotations.render;parameters.__isArgsStory=render&&render.length>0}let passedArgs={...projectAnnotations.args,...componentAnnotations.args,...storyAnnotations?.args},contextForEnhancers={componentId:componentAnnotations.id,title:componentAnnotations.title,kind:componentAnnotations.title,id:storyAnnotations?.id||componentAnnotations.id,name:storyAnnotations?.name||"__meta",story:storyAnnotations?.name||"__meta",component:componentAnnotations.component,subcomponents:componentAnnotations.subcomponents,tags,parameters,initialArgs:passedArgs,argTypes:passedArgTypes};contextForEnhancers.argTypes=argTypesEnhancers.reduce((accumulatedArgTypes,enhancer)=>enhancer({...contextForEnhancers,argTypes:accumulatedArgTypes}),contextForEnhancers.argTypes);let initialArgsBeforeEnhancers={...passedArgs};contextForEnhancers.initialArgs=argsEnhancers.reduce((accumulatedArgs,enhancer)=>({...accumulatedArgs,...enhancer({...contextForEnhancers,initialArgs:accumulatedArgs})}),initialArgsBeforeEnhancers);let{name,story,...withoutStoryIdentifiers}=contextForEnhancers;return withoutStoryIdentifiers}function prepareContext(context){let{args:unmappedArgs}=context,targetedContext={...context,allArgs:void 0,argsByTarget:void 0};if(import_global3.global.FEATURES?.argTypeTargetsV7){let argsByTarget=groupArgsByTarget(context);targetedContext={...context,allArgs:context.args,argsByTarget,args:argsByTarget[UNTARGETED]||{}}}let mappedArgs=Object.entries(targetedContext.args).reduce((acc,[key,val])=>{if(!targetedContext.argTypes[key]?.mapping)return acc[key]=val,acc;let mappingFn=originalValue=>{let mapping=targetedContext.argTypes[key].mapping;return mapping&&originalValue in mapping?mapping[originalValue]:originalValue};return acc[key]=Array.isArray(val)?val.map(mappingFn):mappingFn(val),acc},{}),includedArgs=Object.entries(mappedArgs).reduce((acc,[key,val])=>{let argType=targetedContext.argTypes[key]||{};return(0,import_csf4.includeConditionalArg)(argType,mappedArgs,targetedContext.globals)&&(acc[key]=val),acc},{});return{...targetedContext,unmappedArgs,args:includedArgs}}var import_mapValues2=__toESM(require("lodash/mapValues.js")),import_ts_dedent4=require("ts-dedent"),import_client_logger7=require("@storybook/client-logger");var inferType=(value,name,visited)=>{let type=typeof value;switch(type){case"boolean":case"string":case"number":case"function":case"symbol":return{name:type};default:break}return value?visited.has(value)?(import_client_logger7.logger.warn(import_ts_dedent4.dedent`
|
|
20
24
|
We've detected a cycle in arg '${name}'. Args should be JSON-serializable.
|
|
21
25
|
|
|
22
26
|
Consider using the mapping feature or fully custom args:
|
|
23
27
|
- Mapping: https://storybook.js.org/docs/react/writing-stories/args#mapping-to-complex-arg-values
|
|
24
28
|
- Custom args: https://storybook.js.org/docs/react/essentials/controls#fully-custom-args
|
|
25
|
-
`),{name:"other",value:"cyclic object"}):(visited.add(value),Array.isArray(value)?{name:"array",value:value.length>0?inferType(value[0],name,new Set(visited)):{name:"other",value:"unknown"}}:{name:"object",value:(0,import_mapValues2.default)(value,field=>inferType(field,name,new Set(visited)))}):{name:"object",value:{}}},inferArgTypes=context=>{let{id,argTypes:userArgTypes={},initialArgs={}}=context,argTypes=(0,import_mapValues2.default)(initialArgs,(arg,key)=>({name:key,type:inferType(arg,`${id}.${key}`,new Set)})),userArgTypesNames=(0,import_mapValues2.default)(userArgTypes,(argType,key)=>({name:key}));return combineParameters(argTypes,userArgTypesNames,userArgTypes)};inferArgTypes.secondPass=!0;var import_mapValues3=__toESM(require("lodash/mapValues.js")),
|
|
29
|
+
`),{name:"other",value:"cyclic object"}):(visited.add(value),Array.isArray(value)?{name:"array",value:value.length>0?inferType(value[0],name,new Set(visited)):{name:"other",value:"unknown"}}:{name:"object",value:(0,import_mapValues2.default)(value,field=>inferType(field,name,new Set(visited)))}):{name:"object",value:{}}},inferArgTypes=context=>{let{id,argTypes:userArgTypes={},initialArgs={}}=context,argTypes=(0,import_mapValues2.default)(initialArgs,(arg,key)=>({name:key,type:inferType(arg,`${id}.${key}`,new Set)})),userArgTypesNames=(0,import_mapValues2.default)(userArgTypes,(argType,key)=>({name:key}));return combineParameters(argTypes,userArgTypesNames,userArgTypes)};inferArgTypes.secondPass=!0;var import_mapValues3=__toESM(require("lodash/mapValues.js")),import_client_logger8=require("@storybook/client-logger");var import_pickBy=__toESM(require("lodash/pickBy.js")),matches=(name,descriptor)=>Array.isArray(descriptor)?descriptor.includes(name):name.match(descriptor),filterArgTypes=(argTypes,include,exclude)=>!include&&!exclude?argTypes:argTypes&&(0,import_pickBy.default)(argTypes,(argType,key)=>{let name=argType.name||key;return(!include||matches(name,include))&&(!exclude||!matches(name,exclude))});var inferControl=(argType,name,matchers)=>{let{type,options}=argType;if(type){if(matchers.color&&matchers.color.test(name)){let controlType=type.name;if(controlType==="string")return{control:{type:"color"}};controlType!=="enum"&&import_client_logger8.logger.warn(`Addon controls: Control of type color only supports string, received "${controlType}" instead`)}if(matchers.date&&matchers.date.test(name))return{control:{type:"date"}};switch(type.name){case"array":return{control:{type:"object"}};case"boolean":return{control:{type:"boolean"}};case"string":return{control:{type:"text"}};case"number":return{control:{type:"number"}};case"enum":{let{value}=type;return{control:{type:value?.length<=5?"radio":"select"},options:value}}case"function":case"symbol":return null;default:return{control:{type:options?"select":"object"}}}}},inferControls=context=>{let{argTypes,parameters:{__isArgsStory,controls:{include=null,exclude=null,matchers={}}={}}}=context;if(!__isArgsStory)return argTypes;let filteredArgTypes=filterArgTypes(argTypes,include,exclude),withControls=(0,import_mapValues3.default)(filteredArgTypes,(argType,name)=>argType?.type&&inferControl(argType,name,matchers));return combineParameters(withControls,filteredArgTypes)};inferControls.secondPass=!0;function normalizeProjectAnnotations({argTypes,globalTypes,argTypesEnhancers,decorators,loaders,beforeEach,...annotations}){return{...argTypes&&{argTypes:normalizeInputTypes(argTypes)},...globalTypes&&{globalTypes:normalizeInputTypes(globalTypes)},decorators:normalizeArrays(decorators),loaders:normalizeArrays(loaders),beforeEach:normalizeArrays(beforeEach),argTypesEnhancers:[...argTypesEnhancers||[],inferArgTypes,inferControls],...annotations}}var import_global5=require("@storybook/global");function composeStepRunners(stepRunners){return async(label,play,playContext)=>{await stepRunners.reduceRight((innerPlay,stepRunner)=>async()=>stepRunner(label,innerPlay,playContext),async()=>play(playContext))()}}function getField(moduleExportList,field){return moduleExportList.map(xs=>xs.default?.[field]??xs[field]).filter(Boolean)}function getArrayField(moduleExportList,field,options={}){return getField(moduleExportList,field).reduce((prev,cur)=>{let normalized=normalizeArrays(cur);return options.reverseFileOrder?[...normalized,...prev]:[...prev,...normalized]},[])}function getObjectField(moduleExportList,field){return Object.assign({},...getField(moduleExportList,field))}function getSingletonField(moduleExportList,field){return getField(moduleExportList,field).pop()}function composeConfigs(moduleExportList){let allArgTypeEnhancers=getArrayField(moduleExportList,"argTypesEnhancers"),stepRunners=getField(moduleExportList,"runStep");return{parameters:combineParameters(...getField(moduleExportList,"parameters")),decorators:getArrayField(moduleExportList,"decorators",{reverseFileOrder:!(import_global5.global.FEATURES?.legacyDecoratorFileOrder??!1)}),args:getObjectField(moduleExportList,"args"),argsEnhancers:getArrayField(moduleExportList,"argsEnhancers"),argTypes:getObjectField(moduleExportList,"argTypes"),argTypesEnhancers:[...allArgTypeEnhancers.filter(e=>!e.secondPass),...allArgTypeEnhancers.filter(e=>e.secondPass)],globals:getObjectField(moduleExportList,"globals"),globalTypes:getObjectField(moduleExportList,"globalTypes"),loaders:getArrayField(moduleExportList,"loaders"),beforeEach:getArrayField(moduleExportList,"beforeEach"),render:getSingletonField(moduleExportList,"render"),renderToCanvas:getSingletonField(moduleExportList,"renderToCanvas"),renderToDOM:getSingletonField(moduleExportList,"renderToDOM"),applyDecorators:getSingletonField(moduleExportList,"applyDecorators"),runStep:composeStepRunners(stepRunners),tags:getArrayField(moduleExportList,"tags")}}var import_csf5=require("@storybook/csf"),import_ts_dedent5=__toESM(require("ts-dedent"));var globalProjectAnnotations={},DEFAULT_STORY_TITLE="ComposedStory",DEFAULT_STORY_NAME="Unnamed Story";function extractAnnotation(annotation){return"default"in annotation?annotation.default:annotation}function setProjectAnnotations(projectAnnotations){let annotations=Array.isArray(projectAnnotations)?projectAnnotations:[projectAnnotations];globalProjectAnnotations=composeConfigs(annotations.map(extractAnnotation))}var cleanups=[];function composeStory(storyAnnotations,componentAnnotations,projectAnnotations,defaultConfig,exportsName){if(storyAnnotations===void 0)throw new Error("Expected a story but received undefined.");componentAnnotations.title=componentAnnotations.title??DEFAULT_STORY_TITLE;let normalizedComponentAnnotations=normalizeComponentAnnotations(componentAnnotations),storyName=exportsName||storyAnnotations.storyName||storyAnnotations.story?.name||storyAnnotations.name||DEFAULT_STORY_NAME,normalizedStory=normalizeStory(storyName,storyAnnotations,normalizedComponentAnnotations),normalizedProjectAnnotations=normalizeProjectAnnotations(composeConfigs([defaultConfig??{},globalProjectAnnotations,projectAnnotations??{}])),story=prepareStory(normalizedStory,normalizedComponentAnnotations,normalizedProjectAnnotations),globalsFromGlobalTypes=getValuesFromArgTypes(normalizedProjectAnnotations.globalTypes),context={hooks:new HooksContext,globals:{...globalsFromGlobalTypes,...normalizedProjectAnnotations.globals},args:{...story.initialArgs},viewMode:"story",loaded:{},abortSignal:null,canvasElement:null,...story},playFunction=story.playFunction?async extraContext=>story.playFunction({...context,...extraContext,canvasElement:extraContext?.canvasElement??globalThis.document?.body}):void 0,previousCleanupsDone=!1;return Object.assign(function(extraArgs){if(context.args={...context.initialArgs,...extraArgs},cleanups.length>0&&!previousCleanupsDone){let humanReadableIdentifier=storyName;story.title!==DEFAULT_STORY_TITLE&&(humanReadableIdentifier=`${story.title} - ${humanReadableIdentifier}`),storyName===DEFAULT_STORY_NAME&&Object.keys(context.args).length>0&&(humanReadableIdentifier=`${humanReadableIdentifier} (${Object.keys(context.args).join(", ")})`),console.warn(import_ts_dedent5.default`Some stories were not cleaned up before rendering '${humanReadableIdentifier}'.
|
|
30
|
+
|
|
31
|
+
You should load the story with \`await Story.load()\` before rendering it.`)}return story.unboundStoryFn(prepareContext(context))},{id:story.id,storyName,load:async()=>{for(let{callback}of[...cleanups].reverse())await callback();cleanups.length=0,previousCleanupsDone=!0;let loadedContext=await story.applyLoaders(context);context.loaded=loadedContext.loaded,cleanups.push(...(await story.applyBeforeEach(context)).filter(Boolean).map(callback=>({storyName,callback})))},args:story.initialArgs,parameters:story.parameters,argTypes:story.argTypes,play:playFunction})}function composeStories(storiesImport,globalConfig,composeStoryFn){let{default:meta,__esModule,__namedExportsOrder,...stories}=storiesImport;return Object.entries(stories).reduce((storiesMap,[exportsName,story])=>(0,import_csf5.isExportStory)(exportsName,meta)?Object.assign(storiesMap,{[exportsName]:composeStoryFn(story,meta,globalConfig,exportsName)}):storiesMap,{})}function createPlaywrightTest(baseTest){return baseTest.extend({mount:async({mount,page},use)=>{await use(async(storyRef,...restArgs)=>{if(!("__pw_type"in storyRef)||"__pw_type"in storyRef&&storyRef.__pw_type!=="jsx")throw new Error(import_ts_dedent5.default`
|
|
26
32
|
Portable stories in Playwright CT only work when referencing JSX elements.
|
|
27
33
|
Please use JSX format for your components such as:
|
|
28
34
|
|
|
@@ -33,11 +39,11 @@ See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#hoisted-csf-
|
|
|
33
39
|
await mount(<MyComponent foo="bar"/>)
|
|
34
40
|
|
|
35
41
|
More info: https://storybook.js.org/docs/api/portable-stories-playwright
|
|
36
|
-
`);await page.evaluate(async wrappedStoryRef=>{let unwrappedStoryRef=await globalThis.__pwUnwrapObject?.(wrappedStoryRef);return("__pw_type"in unwrappedStoryRef?unwrappedStoryRef.type:unwrappedStoryRef)?.load?.()},storyRef);let mountResult=await mount(storyRef,...restArgs);return await page.evaluate(async wrappedStoryRef=>{let unwrappedStoryRef=await globalThis.__pwUnwrapObject?.(wrappedStoryRef),story="__pw_type"in unwrappedStoryRef?unwrappedStoryRef.type:unwrappedStoryRef,canvasElement=document.querySelector("#root");return story?.play?.({canvasElement})},storyRef),mountResult})}})}var CSF_CACHE_SIZE=1e3,STORY_CACHE_SIZE=1e4,StoryStore=class{constructor(storyIndex,importFn,projectAnnotations){this.importFn=importFn;this.getStoriesJsonData=()=>{let value=this.getSetStoriesPayload(),allowedParameters=["fileName","docsOnly","framework","__id","__isArgsStory"];return{v:3,stories:(0,import_mapValues4.default)(value.stories,story=>{let{importPath}=this.storyIndex.entries[story.id];return{...(0,import_pick.default)(story,["id","name","title"]),importPath,kind:story.title,story:story.name,parameters:{...(0,import_pick.default)(story.parameters,allowedParameters),fileName:importPath}}})}};this.storyIndex=new StoryIndexStore(storyIndex),this.projectAnnotations=normalizeProjectAnnotations(projectAnnotations);let{globals,globalTypes}=projectAnnotations;this.args=new ArgsStore,this.globals=new GlobalsStore({globals,globalTypes}),this.hooks={},this.processCSFFileWithCache=(0,import_memoizerific2.default)(CSF_CACHE_SIZE)(processCSFFile),this.prepareMetaWithCache=(0,import_memoizerific2.default)(CSF_CACHE_SIZE)(prepareMeta),this.prepareStoryWithCache=(0,import_memoizerific2.default)(STORY_CACHE_SIZE)(prepareStory)}setProjectAnnotations(projectAnnotations){this.projectAnnotations=normalizeProjectAnnotations(projectAnnotations);let{globals,globalTypes}=projectAnnotations;this.globals.set({globals,globalTypes})}async onStoriesChanged({importFn,storyIndex}){importFn&&(this.importFn=importFn),storyIndex&&(this.storyIndex.entries=storyIndex.entries),this.cachedCSFFiles&&await this.cacheAllCSFFiles()}async storyIdToEntry(storyId){return this.storyIndex.storyIdToEntry(storyId)}async loadCSFFileByStoryId(storyId){let{importPath,title}=this.storyIndex.storyIdToEntry(storyId),moduleExports=await this.importFn(importPath);return this.processCSFFileWithCache(moduleExports,importPath,title)}async loadAllCSFFiles(){let importPaths={};return Object.entries(this.storyIndex.entries).forEach(([storyId,{importPath}])=>{importPaths[importPath]=storyId}),(await Promise.all(Object.entries(importPaths).map(async([importPath,storyId])=>({importPath,csfFile:await this.loadCSFFileByStoryId(storyId)})))).reduce((acc,{importPath,csfFile})=>(acc[importPath]=csfFile,acc),{})}async cacheAllCSFFiles(){this.cachedCSFFiles=await this.loadAllCSFFiles()}preparedMetaFromCSFFile({csfFile}){let componentAnnotations=csfFile.meta;return this.prepareMetaWithCache(componentAnnotations,this.projectAnnotations,csfFile.moduleExports.default)}async loadStory({storyId}){let csfFile=await this.loadCSFFileByStoryId(storyId);return this.storyFromCSFFile({storyId,csfFile})}storyFromCSFFile({storyId,csfFile}){let storyAnnotations=csfFile.stories[storyId];if(!storyAnnotations)throw new import_preview_errors2.MissingStoryFromCsfFileError({storyId});let componentAnnotations=csfFile.meta,story=this.prepareStoryWithCache(storyAnnotations,componentAnnotations,this.projectAnnotations);return this.args.setInitial(story),this.hooks[story.id]=this.hooks[story.id]||new HooksContext,story}componentStoriesFromCSFFile({csfFile}){return Object.keys(this.storyIndex.entries).filter(storyId=>!!csfFile.stories[storyId]).map(storyId=>this.storyFromCSFFile({storyId,csfFile}))}async loadEntry(id){let entry=await this.storyIdToEntry(id),storyImports=entry.type==="docs"?entry.storiesImports:[],[entryExports,...csfFiles]=await Promise.all([this.importFn(entry.importPath),...storyImports.map(storyImportPath=>{let firstStoryEntry=this.storyIndex.importPathToEntry(storyImportPath);return this.loadCSFFileByStoryId(firstStoryEntry.id)})]);return{entryExports,csfFiles}}getStoryContext(story,{forceInitialArgs=!1}={}){return prepareContext({...story,args:forceInitialArgs?story.initialArgs:this.args.get(story.id),globals:this.globals.get(),hooks:this.hooks[story.id]})}cleanupStory(story){this.hooks[story.id].clean()}extract(options={includeDocsOnly:!1}){let{cachedCSFFiles}=this;if(!cachedCSFFiles)throw new import_preview_errors2.CalledExtractOnStoreError;return Object.entries(this.storyIndex.entries).reduce((acc,[storyId,{type,importPath}])=>{if(type==="docs")return acc;let csfFile=cachedCSFFiles[importPath],story=this.storyFromCSFFile({storyId,csfFile});return!options.includeDocsOnly&&story.parameters.docsOnly||(acc[storyId]=Object.entries(story).reduce((storyAcc,[key,value])=>key==="moduleExport"||typeof value=="function"?storyAcc:Array.isArray(value)?Object.assign(storyAcc,{[key]:value.slice().sort()}):Object.assign(storyAcc,{[key]:value}),{args:story.initialArgs})),acc},{})}getSetStoriesPayload(){let stories=this.extract({includeDocsOnly:!0}),kindParameters=Object.values(stories).reduce((acc,{title})=>(acc[title]={},acc),{});return{v:2,globals:this.globals.get(),globalParameters:{},kindParameters,stories}}raw(){return(0,
|
|
42
|
+
`);await page.evaluate(async wrappedStoryRef=>{let unwrappedStoryRef=await globalThis.__pwUnwrapObject?.(wrappedStoryRef);return("__pw_type"in unwrappedStoryRef?unwrappedStoryRef.type:unwrappedStoryRef)?.load?.()},storyRef);let mountResult=await mount(storyRef,...restArgs);return await page.evaluate(async wrappedStoryRef=>{let unwrappedStoryRef=await globalThis.__pwUnwrapObject?.(wrappedStoryRef),story="__pw_type"in unwrappedStoryRef?unwrappedStoryRef.type:unwrappedStoryRef,canvasElement=document.querySelector("#root");return story?.play?.({canvasElement})},storyRef),mountResult})}})}var CSF_CACHE_SIZE=1e3,STORY_CACHE_SIZE=1e4,StoryStore=class{constructor(storyIndex,importFn,projectAnnotations){this.importFn=importFn;this.getStoriesJsonData=()=>{let value=this.getSetStoriesPayload(),allowedParameters=["fileName","docsOnly","framework","__id","__isArgsStory"];return{v:3,stories:(0,import_mapValues4.default)(value.stories,story=>{let{importPath}=this.storyIndex.entries[story.id];return{...(0,import_pick.default)(story,["id","name","title"]),importPath,kind:story.title,story:story.name,parameters:{...(0,import_pick.default)(story.parameters,allowedParameters),fileName:importPath}}})}};this.storyIndex=new StoryIndexStore(storyIndex),this.projectAnnotations=normalizeProjectAnnotations(projectAnnotations);let{globals,globalTypes}=projectAnnotations;this.args=new ArgsStore,this.globals=new GlobalsStore({globals,globalTypes}),this.hooks={},this.cleanupCallbacks={},this.processCSFFileWithCache=(0,import_memoizerific2.default)(CSF_CACHE_SIZE)(processCSFFile),this.prepareMetaWithCache=(0,import_memoizerific2.default)(CSF_CACHE_SIZE)(prepareMeta),this.prepareStoryWithCache=(0,import_memoizerific2.default)(STORY_CACHE_SIZE)(prepareStory)}setProjectAnnotations(projectAnnotations){this.projectAnnotations=normalizeProjectAnnotations(projectAnnotations);let{globals,globalTypes}=projectAnnotations;this.globals.set({globals,globalTypes})}async onStoriesChanged({importFn,storyIndex}){importFn&&(this.importFn=importFn),storyIndex&&(this.storyIndex.entries=storyIndex.entries),this.cachedCSFFiles&&await this.cacheAllCSFFiles()}async storyIdToEntry(storyId){return this.storyIndex.storyIdToEntry(storyId)}async loadCSFFileByStoryId(storyId){let{importPath,title}=this.storyIndex.storyIdToEntry(storyId),moduleExports=await this.importFn(importPath);return this.processCSFFileWithCache(moduleExports,importPath,title)}async loadAllCSFFiles(){let importPaths={};return Object.entries(this.storyIndex.entries).forEach(([storyId,{importPath}])=>{importPaths[importPath]=storyId}),(await Promise.all(Object.entries(importPaths).map(async([importPath,storyId])=>({importPath,csfFile:await this.loadCSFFileByStoryId(storyId)})))).reduce((acc,{importPath,csfFile})=>(acc[importPath]=csfFile,acc),{})}async cacheAllCSFFiles(){this.cachedCSFFiles=await this.loadAllCSFFiles()}preparedMetaFromCSFFile({csfFile}){let componentAnnotations=csfFile.meta;return this.prepareMetaWithCache(componentAnnotations,this.projectAnnotations,csfFile.moduleExports.default)}async loadStory({storyId}){let csfFile=await this.loadCSFFileByStoryId(storyId);return this.storyFromCSFFile({storyId,csfFile})}storyFromCSFFile({storyId,csfFile}){let storyAnnotations=csfFile.stories[storyId];if(!storyAnnotations)throw new import_preview_errors2.MissingStoryFromCsfFileError({storyId});let componentAnnotations=csfFile.meta,story=this.prepareStoryWithCache(storyAnnotations,componentAnnotations,this.projectAnnotations);return this.args.setInitial(story),this.hooks[story.id]=this.hooks[story.id]||new HooksContext,story}componentStoriesFromCSFFile({csfFile}){return Object.keys(this.storyIndex.entries).filter(storyId=>!!csfFile.stories[storyId]).map(storyId=>this.storyFromCSFFile({storyId,csfFile}))}async loadEntry(id){let entry=await this.storyIdToEntry(id),storyImports=entry.type==="docs"?entry.storiesImports:[],[entryExports,...csfFiles]=await Promise.all([this.importFn(entry.importPath),...storyImports.map(storyImportPath=>{let firstStoryEntry=this.storyIndex.importPathToEntry(storyImportPath);return this.loadCSFFileByStoryId(firstStoryEntry.id)})]);return{entryExports,csfFiles}}getStoryContext(story,{forceInitialArgs=!1}={}){return prepareContext({...story,args:forceInitialArgs?story.initialArgs:this.args.get(story.id),globals:this.globals.get(),hooks:this.hooks[story.id]})}addCleanupCallbacks(story,callbacks){this.cleanupCallbacks[story.id]=callbacks}async cleanupStory(story){this.hooks[story.id].clean();let callbacks=this.cleanupCallbacks[story.id];if(callbacks)for(let callback of[...callbacks].reverse())await callback();delete this.cleanupCallbacks[story.id]}extract(options={includeDocsOnly:!1}){let{cachedCSFFiles}=this;if(!cachedCSFFiles)throw new import_preview_errors2.CalledExtractOnStoreError;return Object.entries(this.storyIndex.entries).reduce((acc,[storyId,{type,importPath}])=>{if(type==="docs")return acc;let csfFile=cachedCSFFiles[importPath],story=this.storyFromCSFFile({storyId,csfFile});return!options.includeDocsOnly&&story.parameters.docsOnly||(acc[storyId]=Object.entries(story).reduce((storyAcc,[key,value])=>key==="moduleExport"||typeof value=="function"?storyAcc:Array.isArray(value)?Object.assign(storyAcc,{[key]:value.slice().sort()}):Object.assign(storyAcc,{[key]:value}),{args:story.initialArgs})),acc},{})}getSetStoriesPayload(){let stories=this.extract({includeDocsOnly:!0}),kindParameters=Object.values(stories).reduce((acc,{title})=>(acc[title]={},acc),{});return{v:2,globals:this.globals.get(),globalParameters:{},kindParameters,stories}}raw(){return(0,import_client_logger9.deprecate)("StoryStore.raw() is deprecated and will be removed in 9.0, please use extract() instead"),Object.values(this.extract()).map(({id})=>this.fromId(id)).filter(Boolean)}fromId(storyId){if((0,import_client_logger9.deprecate)("StoryStore.fromId() is deprecated and will be removed in 9.0, please use loadStory() instead"),!this.cachedCSFFiles)throw new Error("Cannot call fromId/raw() unless you call cacheAllCSFFiles() first.");let importPath;try{({importPath}=this.storyIndex.storyIdToEntry(storyId))}catch{return null}let csfFile=this.cachedCSFFiles[importPath],story=this.storyFromCSFFile({storyId,csfFile});return{...story,storyFn:update=>{let context={...this.getStoryContext(story),viewMode:"story"};return story.unboundStoryFn({...context,...update})}}}};function slash(path){return path.startsWith("\\\\?\\")?path:path.replace(/\\/g,"/")}var import_ts_dedent6=require("ts-dedent"),import_client_logger10=require("@storybook/client-logger"),sanitize2=parts=>{if(parts.length===0)return parts;let last=parts[parts.length-1],lastStripped=last?.replace(/(?:[.](?:story|stories))?([.][^.]+)$/i,"");if(parts.length===1)return[lastStripped];let nextToLast=parts[parts.length-2];return lastStripped&&nextToLast&&lastStripped.toLowerCase()===nextToLast.toLowerCase()?[...parts.slice(0,-2),lastStripped]:lastStripped&&(/^(story|stories)([.][^.]+)$/i.test(last)||/^index$/i.test(lastStripped))?parts.slice(0,-1):[...parts.slice(0,-1),lastStripped]};function pathJoin(paths){return paths.flatMap(p=>p.split("/")).filter(Boolean).join("/")}var userOrAutoTitleFromSpecifier=(fileName,entry,userTitle)=>{let{directory,importPathMatcher,titlePrefix=""}=entry||{};typeof fileName=="number"&&import_client_logger10.once.warn(import_ts_dedent6.dedent`
|
|
37
43
|
CSF Auto-title received a numeric fileName. This typically happens when
|
|
38
44
|
webpack is mis-configured in production mode. To force webpack to produce
|
|
39
45
|
filenames, set optimization.moduleIds = "named" in your webpack config.
|
|
40
|
-
`);let normalizedFileName=slash(String(fileName));if(importPathMatcher.exec(normalizedFileName)){if(!userTitle){let suffix=normalizedFileName.replace(directory,""),parts=pathJoin([titlePrefix,suffix]).split("/");return parts=sanitize2(parts),parts.join("/")}return titlePrefix?pathJoin([titlePrefix,userTitle]):userTitle}},userOrAutoTitle=(fileName,storiesEntries,userTitle)=>{for(let i=0;i<storiesEntries.length;i+=1){let title=userOrAutoTitleFromSpecifier(fileName,storiesEntries[i],userTitle);if(title)return title}return userTitle||void 0};var
|
|
46
|
+
`);let normalizedFileName=slash(String(fileName));if(importPathMatcher.exec(normalizedFileName)){if(!userTitle){let suffix=normalizedFileName.replace(directory,""),parts=pathJoin([titlePrefix,suffix]).split("/");return parts=sanitize2(parts),parts.join("/")}return titlePrefix?pathJoin([titlePrefix,userTitle]):userTitle}},userOrAutoTitle=(fileName,storiesEntries,userTitle)=>{for(let i=0;i<storiesEntries.length;i+=1){let title=userOrAutoTitleFromSpecifier(fileName,storiesEntries[i],userTitle);if(title)return title}return userTitle||void 0};var import_ts_dedent7=require("ts-dedent");var STORY_KIND_PATH_SEPARATOR=/\s*\/\s*/,storySort=(options={})=>(a,b)=>{if(a.title===b.title&&!options.includeNames)return 0;let method=options.method||"configure",order=options.order||[],storyTitleA=a.title.trim().split(STORY_KIND_PATH_SEPARATOR),storyTitleB=b.title.trim().split(STORY_KIND_PATH_SEPARATOR);options.includeNames&&(storyTitleA.push(a.name),storyTitleB.push(b.name));let depth=0;for(;storyTitleA[depth]||storyTitleB[depth];){if(!storyTitleA[depth])return-1;if(!storyTitleB[depth])return 1;let nameA=storyTitleA[depth],nameB=storyTitleB[depth];if(nameA!==nameB){let indexA=order.indexOf(nameA),indexB=order.indexOf(nameB),indexWildcard=order.indexOf("*");return indexA!==-1||indexB!==-1?(indexA===-1&&(indexWildcard!==-1?indexA=indexWildcard:indexA=order.length),indexB===-1&&(indexWildcard!==-1?indexB=indexWildcard:indexB=order.length),indexA-indexB):method==="configure"?0:nameA.localeCompare(nameB,options.locales?options.locales:void 0,{numeric:!0,sensitivity:"accent"})}let index=order.indexOf(nameA);index===-1&&(index=order.indexOf("*")),order=index!==-1&&Array.isArray(order[index+1])?order[index+1]:[],depth+=1}return 0};var sortStoriesCommon=(stories,storySortParameter,fileNameOrder)=>{if(storySortParameter){let sortFn;typeof storySortParameter=="function"?sortFn=storySortParameter:sortFn=storySort(storySortParameter),stories.sort(sortFn)}else stories.sort((s1,s2)=>fileNameOrder.indexOf(s1.importPath)-fileNameOrder.indexOf(s2.importPath));return stories},sortStoriesV7=(stories,storySortParameter,fileNameOrder)=>{try{return sortStoriesCommon(stories,storySortParameter,fileNameOrder)}catch(err){throw new Error(import_ts_dedent7.dedent`
|
|
41
47
|
Error sorting stories with sort parameter ${storySortParameter}:
|
|
42
48
|
|
|
43
49
|
> ${err.message}
|
|
@@ -45,16 +51,16 @@ See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#hoisted-csf-
|
|
|
45
51
|
Are you using a V6-style sort function in V7 mode?
|
|
46
52
|
|
|
47
53
|
More info: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#v7-style-story-sort
|
|
48
|
-
`)}};var import_global5=require("@storybook/global"),import_client_logger10=require("@storybook/client-logger"),import_core_events3=require("@storybook/core-events"),import_preview_errors3=require("@storybook/core-events/preview-errors");var import_core_events2=require("@storybook/core-events");var PREPARE_ABORTED=new Error("prepareAborted");var{AbortController}=globalThis;function serializeError(error){try{let{name="Error",message=String(error),stack}=error;return{name,message,stack}}catch{return{name:"Error",message:String(error)}}}var StoryRender=class{constructor(channel,store,renderToScreen,callbacks,id,viewMode,renderOptions={autoplay:!0,forceInitialArgs:!1},story){this.channel=channel;this.store=store;this.renderToScreen=renderToScreen;this.callbacks=callbacks;this.id=id;this.viewMode=viewMode;this.renderOptions=renderOptions;this.type="story";this.notYetRendered=!0;this.disableKeyListeners=!1;this.teardownRender=()=>{};this.torndown=!1;this.abortController=new AbortController,story&&(this.story=story,this.phase="preparing")}async runPhase(signal,phase,phaseFn){this.phase=phase,this.channel.emit(import_core_events2.STORY_RENDER_PHASE_CHANGED,{newPhase:this.phase,storyId:this.id}),phaseFn&&await phaseFn(),signal.aborted&&(this.phase="aborted",this.channel.emit(import_core_events2.STORY_RENDER_PHASE_CHANGED,{newPhase:this.phase,storyId:this.id}))}async prepare(){if(await this.runPhase(this.abortController.signal,"preparing",async()=>{this.story=await this.store.loadStory({storyId:this.id})}),this.abortController.signal.aborted)throw this.store.cleanupStory(this.story),PREPARE_ABORTED}isEqual(other){return!!(this.id===other.id&&this.story&&this.story===other.story)}isPreparing(){return["preparing"].includes(this.phase)}isPending(){return["rendering","playing"].includes(this.phase)}async renderToElement(canvasElement){return this.canvasElement=canvasElement,this.render({initial:!0,forceRemount:!0})}storyContext(){if(!this.story)throw new Error("Cannot call storyContext before preparing");let{forceInitialArgs}=this.renderOptions;return this.store.getStoryContext(this.story,{forceInitialArgs})}async render({initial=!1,forceRemount=!1}={}){let{canvasElement}=this;if(!this.story)throw new Error("cannot render when not prepared");if(!canvasElement)throw new Error("cannot render when canvasElement is unset");let{id,componentId,title,name,tags,applyLoaders,unboundStoryFn,playFunction}=this.story;forceRemount&&!initial&&(this.cancelRender(),this.abortController=new AbortController);let abortSignal=this.abortController.signal;try{let loadedContext;if(await this.runPhase(abortSignal,"loading",async()=>{loadedContext=await applyLoaders({...this.storyContext(),viewMode:this.viewMode})}),abortSignal.aborted)return;let renderStoryContext={...loadedContext,...this.storyContext(),abortSignal,canvasElement},renderContext={componentId,title,kind:title,id,name,story:name,tags,...this.callbacks,showError:error=>(this.phase="errored",this.callbacks.showError(error)),showException:error=>(this.phase="errored",this.callbacks.showException(error)),forceRemount:forceRemount||this.notYetRendered,storyContext:renderStoryContext,storyFn:()=>unboundStoryFn(renderStoryContext),unboundStoryFn};if(await this.runPhase(abortSignal,"rendering",async()=>{let teardown=await this.renderToScreen(renderContext,canvasElement);this.teardownRender=teardown||(()=>{})}),this.notYetRendered=!1,abortSignal.aborted)return;let ignoreUnhandledErrors=this.story.parameters?.test?.dangerouslyIgnoreUnhandledErrors===!0,unhandledErrors=new Set,onError=event=>unhandledErrors.add("error"in event?event.error:event.reason);if(this.renderOptions.autoplay&&forceRemount&&playFunction&&this.phase!=="errored"){window.addEventListener("error",onError),window.addEventListener("unhandledrejection",onError),this.disableKeyListeners=!0;try{await this.runPhase(abortSignal,"playing",async()=>{await playFunction(renderContext.storyContext)}),!ignoreUnhandledErrors&&unhandledErrors.size>0?await this.runPhase(abortSignal,"errored"):await this.runPhase(abortSignal,"played")}catch(error){if(await this.runPhase(abortSignal,"errored",async()=>{this.channel.emit(import_core_events2.PLAY_FUNCTION_THREW_EXCEPTION,serializeError(error))}),this.story.parameters.throwPlayFunctionExceptions!==!1)throw error;console.error(error)}if(!ignoreUnhandledErrors&&unhandledErrors.size>0&&this.channel.emit(import_core_events2.UNHANDLED_ERRORS_WHILE_PLAYING,Array.from(unhandledErrors).map(serializeError)),this.disableKeyListeners=!1,window.removeEventListener("unhandledrejection",onError),window.removeEventListener("error",onError),abortSignal.aborted)return}await this.runPhase(abortSignal,"completed",async()=>this.channel.emit(import_core_events2.STORY_RENDERED,id))}catch(err){this.phase="errored",this.callbacks.showException(err)}}async rerender(){return this.render()}async remount(){return this.render({forceRemount:!0})}cancelRender(){this.abortController?.abort()}async teardown(){this.torndown=!0,this.cancelRender(),this.story&&this.store.cleanupStory(this.story);for(let i=0;i<3;i+=1){if(!this.isPending()){await this.teardownRender();return}await new Promise(resolve=>setTimeout(resolve,0))}window.location.reload(),await new Promise(()=>{})}};var{fetch}=import_global5.global,STORY_INDEX_PATH="./index.json",Preview=class{constructor(importFn,getProjectAnnotations,channel=addons.getChannel(),shouldInitialize=!0){this.importFn=importFn;this.getProjectAnnotations=getProjectAnnotations;this.channel=channel;this.storyRenders=[];this.storeInitializationPromise=new Promise((resolve,reject)=>{this.resolveStoreInitializationPromise=resolve,this.rejectStoreInitializationPromise=reject}),shouldInitialize&&this.initialize()}get storyStore(){return new Proxy({},{get:(_,method)=>{if(this.storyStoreValue)return(0,import_client_logger10.deprecate)("Accessing the Story Store is deprecated and will be removed in 9.0"),this.storyStoreValue[method];throw new import_preview_errors3.StoryStoreAccessedBeforeInitializationError}})}async initialize(){this.setupListeners();try{let projectAnnotations=await this.getProjectAnnotationsOrRenderError();await this.initializeWithProjectAnnotations(projectAnnotations)}catch(err){this.rejectStoreInitializationPromise(err)}}ready(){return this.storeInitializationPromise}setupListeners(){this.channel.on(import_core_events3.STORY_INDEX_INVALIDATED,this.onStoryIndexChanged.bind(this)),this.channel.on(import_core_events3.UPDATE_GLOBALS,this.onUpdateGlobals.bind(this)),this.channel.on(import_core_events3.UPDATE_STORY_ARGS,this.onUpdateArgs.bind(this)),this.channel.on(import_core_events3.RESET_STORY_ARGS,this.onResetArgs.bind(this)),this.channel.on(import_core_events3.FORCE_RE_RENDER,this.onForceReRender.bind(this)),this.channel.on(import_core_events3.FORCE_REMOUNT,this.onForceRemount.bind(this))}async getProjectAnnotationsOrRenderError(){try{let projectAnnotations=await this.getProjectAnnotations();if(this.renderToCanvas=projectAnnotations.renderToCanvas,!this.renderToCanvas)throw new import_preview_errors3.MissingRenderToCanvasError;return projectAnnotations}catch(err){throw this.renderPreviewEntryError("Error reading preview.js:",err),err}}async initializeWithProjectAnnotations(projectAnnotations){this.projectAnnotationsBeforeInitialization=projectAnnotations;try{let storyIndex=await this.getStoryIndexFromServer();return this.initializeWithStoryIndex(storyIndex)}catch(err){throw this.renderPreviewEntryError("Error loading story index:",err),err}}async getStoryIndexFromServer(){let result=await fetch(STORY_INDEX_PATH);if(result.status===200)return result.json();throw new import_preview_errors3.StoryIndexFetchError({text:await result.text()})}initializeWithStoryIndex(storyIndex){if(!this.projectAnnotationsBeforeInitialization)throw new Error("Cannot call initializeWithStoryIndex until project annotations resolve");this.storyStoreValue=new StoryStore(storyIndex,this.importFn,this.projectAnnotationsBeforeInitialization),delete this.projectAnnotationsBeforeInitialization,this.setInitialGlobals(),this.resolveStoreInitializationPromise()}async setInitialGlobals(){this.emitGlobals()}emitGlobals(){if(!this.storyStoreValue)throw new import_preview_errors3.CalledPreviewMethodBeforeInitializationError({methodName:"emitGlobals"});let payload={globals:this.storyStoreValue.globals.get()||{},globalTypes:this.storyStoreValue.projectAnnotations.globalTypes||{}};this.channel.emit(import_core_events3.SET_GLOBALS,payload)}async onGetProjectAnnotationsChanged({getProjectAnnotations}){delete this.previewEntryError,this.getProjectAnnotations=getProjectAnnotations;let projectAnnotations=await this.getProjectAnnotationsOrRenderError();if(!this.storyStoreValue){await this.initializeWithProjectAnnotations(projectAnnotations);return}this.storyStoreValue.setProjectAnnotations(projectAnnotations),this.emitGlobals()}async onStoryIndexChanged(){if(delete this.previewEntryError,!(!this.storyStoreValue&&!this.projectAnnotationsBeforeInitialization))try{let storyIndex=await this.getStoryIndexFromServer();if(this.projectAnnotationsBeforeInitialization){this.initializeWithStoryIndex(storyIndex);return}await this.onStoriesChanged({storyIndex})}catch(err){throw this.renderPreviewEntryError("Error loading story index:",err),err}}async onStoriesChanged({importFn,storyIndex}){if(!this.storyStoreValue)throw new import_preview_errors3.CalledPreviewMethodBeforeInitializationError({methodName:"onStoriesChanged"});await this.storyStoreValue.onStoriesChanged({importFn,storyIndex})}async onUpdateGlobals({globals}){if(!this.storyStoreValue)throw new import_preview_errors3.CalledPreviewMethodBeforeInitializationError({methodName:"onUpdateGlobals"});this.storyStoreValue.globals.update(globals),await Promise.all(this.storyRenders.map(r=>r.rerender())),this.channel.emit(import_core_events3.GLOBALS_UPDATED,{globals:this.storyStoreValue.globals.get(),initialGlobals:this.storyStoreValue.globals.initialGlobals})}async onUpdateArgs({storyId,updatedArgs}){if(!this.storyStoreValue)throw new import_preview_errors3.CalledPreviewMethodBeforeInitializationError({methodName:"onUpdateArgs"});this.storyStoreValue.args.update(storyId,updatedArgs),await Promise.all(this.storyRenders.filter(r=>r.id===storyId&&!r.renderOptions.forceInitialArgs).map(r=>r.rerender())),this.channel.emit(import_core_events3.STORY_ARGS_UPDATED,{storyId,args:this.storyStoreValue.args.get(storyId)})}async onResetArgs({storyId,argNames}){if(!this.storyStoreValue)throw new import_preview_errors3.CalledPreviewMethodBeforeInitializationError({methodName:"onResetArgs"});let story=this.storyRenders.find(r=>r.id===storyId)?.story||await this.storyStoreValue.loadStory({storyId}),updatedArgs=(argNames||[...new Set([...Object.keys(story.initialArgs),...Object.keys(this.storyStoreValue.args.get(storyId))])]).reduce((acc,argName)=>(acc[argName]=story.initialArgs[argName],acc),{});await this.onUpdateArgs({storyId,updatedArgs})}async onForceReRender(){await Promise.all(this.storyRenders.map(r=>r.rerender()))}async onForceRemount({storyId}){await Promise.all(this.storyRenders.filter(r=>r.id===storyId).map(r=>r.remount()))}renderStoryToElement(story,element,callbacks,options){if(!this.renderToCanvas||!this.storyStoreValue)throw new import_preview_errors3.CalledPreviewMethodBeforeInitializationError({methodName:"renderStoryToElement"});let render=new StoryRender(this.channel,this.storyStoreValue,this.renderToCanvas,callbacks,story.id,"docs",options,story);return render.renderToElement(element),this.storyRenders.push(render),async()=>{await this.teardownRender(render)}}async teardownRender(render,{viewModeChanged}={}){this.storyRenders=this.storyRenders.filter(r=>r!==render),await render?.teardown?.({viewModeChanged})}async loadStory({storyId}){if(!this.storyStoreValue)throw new import_preview_errors3.CalledPreviewMethodBeforeInitializationError({methodName:"loadStory"});return this.storyStoreValue.loadStory({storyId})}getStoryContext(story,{forceInitialArgs=!1}={}){if(!this.storyStoreValue)throw new import_preview_errors3.CalledPreviewMethodBeforeInitializationError({methodName:"getStoryContext"});return this.storyStoreValue.getStoryContext(story,{forceInitialArgs})}async extract(options){if(!this.storyStoreValue)throw new import_preview_errors3.CalledPreviewMethodBeforeInitializationError({methodName:"extract"});if(this.previewEntryError)throw this.previewEntryError;return await this.storyStoreValue.cacheAllCSFFiles(),this.storyStoreValue.extract(options)}renderPreviewEntryError(reason,err){this.previewEntryError=err,import_client_logger10.logger.error(reason),import_client_logger10.logger.error(err),this.channel.emit(import_core_events3.CONFIG_ERROR,err)}};var import_global8=require("@storybook/global");var import_tiny_invariant=__toESM(require("tiny-invariant")),import_core_events6=require("@storybook/core-events"),import_client_logger11=require("@storybook/client-logger"),import_preview_errors4=require("@storybook/core-events/preview-errors");var import_core_events4=require("@storybook/core-events");var import_ts_dedent7=__toESM(require("ts-dedent")),DocsContext=class{constructor(channel,store,renderStoryToElement,csfFiles){this.channel=channel;this.store=store;this.renderStoryToElement=renderStoryToElement;this.storyIdByName=storyName=>{let storyId=this.nameToStoryId.get(storyName);if(storyId)return storyId;throw new Error(`No story found with that name: ${storyName}`)};this.componentStories=()=>this.componentStoriesValue;this.componentStoriesFromCSFFile=csfFile=>this.store.componentStoriesFromCSFFile({csfFile});this.storyById=storyId=>{if(!storyId){if(!this.primaryStory)throw new Error("No primary story defined for docs entry. Did you forget to use `<Meta>`?");return this.primaryStory}let csfFile=this.storyIdToCSFFile.get(storyId);if(!csfFile)throw new Error(`Called \`storyById\` for story that was never loaded: ${storyId}`);return this.store.storyFromCSFFile({storyId,csfFile})};this.getStoryContext=story=>({...this.store.getStoryContext(story),viewMode:"docs"});this.loadStory=id=>this.store.loadStory({storyId:id});this.componentStoriesValue=[],this.storyIdToCSFFile=new Map,this.exportToStory=new Map,this.exportsToCSFFile=new Map,this.nameToStoryId=new Map,this.attachedCSFFiles=new Set,csfFiles.forEach((csfFile,index)=>{this.referenceCSFFile(csfFile)})}referenceCSFFile(csfFile){this.exportsToCSFFile.set(csfFile.moduleExports,csfFile),this.exportsToCSFFile.set(csfFile.moduleExports.default,csfFile),this.store.componentStoriesFromCSFFile({csfFile}).forEach(story=>{let annotation=csfFile.stories[story.id];this.storyIdToCSFFile.set(annotation.id,csfFile),this.exportToStory.set(annotation.moduleExport,story)})}attachCSFFile(csfFile){if(!this.exportsToCSFFile.has(csfFile.moduleExports))throw new Error("Cannot attach a CSF file that has not been referenced");if(this.attachedCSFFiles.has(csfFile))return;this.attachedCSFFiles.add(csfFile),this.store.componentStoriesFromCSFFile({csfFile}).forEach(story=>{this.nameToStoryId.set(story.name,story.id),this.componentStoriesValue.push(story),this.primaryStory||(this.primaryStory=story)})}referenceMeta(metaExports,attach){let resolved=this.resolveModuleExport(metaExports);if(resolved.type!=="meta")throw new Error("<Meta of={} /> must reference a CSF file module export or meta export. Did you mistakenly reference your component instead of your CSF file?");attach&&this.attachCSFFile(resolved.csfFile)}get projectAnnotations(){let{projectAnnotations}=this.store;if(!projectAnnotations)throw new Error("Can't get projectAnnotations from DocsContext before they are initialized");return projectAnnotations}resolveAttachedModuleExportType(moduleExportType){if(moduleExportType==="story"){if(!this.primaryStory)throw new Error("No primary story attached to this docs file, did you forget to use <Meta of={} />?");return{type:"story",story:this.primaryStory}}if(this.attachedCSFFiles.size===0)throw new Error("No CSF file attached to this docs file, did you forget to use <Meta of={} />?");let firstAttachedCSFFile=Array.from(this.attachedCSFFiles)[0];if(moduleExportType==="meta")return{type:"meta",csfFile:firstAttachedCSFFile};let{component}=firstAttachedCSFFile.meta;if(!component)throw new Error("Attached CSF file does not defined a component, did you forget to export one?");return{type:"component",component}}resolveModuleExport(moduleExportOrType){let csfFile=this.exportsToCSFFile.get(moduleExportOrType);if(csfFile)return{type:"meta",csfFile};let story=this.exportToStory.get(moduleExportOrType);return story?{type:"story",story}:{type:"component",component:moduleExportOrType}}resolveOf(moduleExportOrType,validTypes=[]){let resolved;if(["component","meta","story"].includes(moduleExportOrType)){let type=moduleExportOrType;resolved=this.resolveAttachedModuleExportType(type)}else resolved=this.resolveModuleExport(moduleExportOrType);if(validTypes.length&&!validTypes.includes(resolved.type)){let prettyType=resolved.type==="component"?"component or unknown":resolved.type;throw new Error(import_ts_dedent7.default`Invalid value passed to the 'of' prop. The value was resolved to a '${prettyType}' type but the only types for this block are: ${validTypes.join(", ")}.
|
|
54
|
+
`)}};var import_global6=require("@storybook/global"),import_client_logger11=require("@storybook/client-logger"),import_core_events3=require("@storybook/core-events"),import_preview_errors3=require("@storybook/core-events/preview-errors");var import_core_events2=require("@storybook/core-events");var PREPARE_ABORTED=new Error("prepareAborted");var{AbortController}=globalThis;function serializeError(error){try{let{name="Error",message=String(error),stack}=error;return{name,message,stack}}catch{return{name:"Error",message:String(error)}}}var StoryRender=class{constructor(channel,store,renderToScreen,callbacks,id,viewMode,renderOptions={autoplay:!0,forceInitialArgs:!1},story){this.channel=channel;this.store=store;this.renderToScreen=renderToScreen;this.callbacks=callbacks;this.id=id;this.viewMode=viewMode;this.renderOptions=renderOptions;this.type="story";this.notYetRendered=!0;this.rerenderEnqueued=!1;this.disableKeyListeners=!1;this.teardownRender=()=>{};this.torndown=!1;this.abortController=new AbortController,story&&(this.story=story,this.phase="preparing")}async runPhase(signal,phase,phaseFn){this.phase=phase,this.channel.emit(import_core_events2.STORY_RENDER_PHASE_CHANGED,{newPhase:this.phase,storyId:this.id}),phaseFn&&await phaseFn(),signal.aborted&&(this.phase="aborted",this.channel.emit(import_core_events2.STORY_RENDER_PHASE_CHANGED,{newPhase:this.phase,storyId:this.id}))}async prepare(){if(await this.runPhase(this.abortController.signal,"preparing",async()=>{this.story=await this.store.loadStory({storyId:this.id})}),this.abortController.signal.aborted)throw await this.store.cleanupStory(this.story),PREPARE_ABORTED}isEqual(other){return!!(this.id===other.id&&this.story&&this.story===other.story)}isPreparing(){return["preparing"].includes(this.phase)}isPending(){return["loading","beforeEach","rendering","playing"].includes(this.phase)}async renderToElement(canvasElement){return this.canvasElement=canvasElement,this.render({initial:!0,forceRemount:!0})}storyContext(){if(!this.story)throw new Error("Cannot call storyContext before preparing");let{forceInitialArgs}=this.renderOptions;return this.store.getStoryContext(this.story,{forceInitialArgs})}async render({initial=!1,forceRemount=!1}={}){let{canvasElement}=this;if(!this.story)throw new Error("cannot render when not prepared");let story=this.story;if(!canvasElement)throw new Error("cannot render when canvasElement is unset");let{id,componentId,title,name,tags,applyLoaders,applyBeforeEach,unboundStoryFn,playFunction}=story;forceRemount&&!initial&&(this.cancelRender(),this.abortController=new AbortController);let abortSignal=this.abortController.signal;try{let loadedContext;if(await this.runPhase(abortSignal,"loading",async()=>{loadedContext=await applyLoaders({...this.storyContext(),viewMode:this.viewMode,canvasElement})}),abortSignal.aborted)return;let renderStoryContext={...loadedContext,...this.storyContext(),abortSignal,canvasElement};if(await this.runPhase(abortSignal,"beforeEach",async()=>{let cleanupCallbacks=await applyBeforeEach(renderStoryContext);this.store.addCleanupCallbacks(story,cleanupCallbacks)}),abortSignal.aborted)return;let renderContext={componentId,title,kind:title,id,name,story:name,tags,...this.callbacks,showError:error=>(this.phase="errored",this.callbacks.showError(error)),showException:error=>(this.phase="errored",this.callbacks.showException(error)),forceRemount:forceRemount||this.notYetRendered,storyContext:renderStoryContext,storyFn:()=>unboundStoryFn(renderStoryContext),unboundStoryFn};if(await this.runPhase(abortSignal,"rendering",async()=>{let teardown=await this.renderToScreen(renderContext,canvasElement);this.teardownRender=teardown||(()=>{})}),this.notYetRendered=!1,abortSignal.aborted)return;let ignoreUnhandledErrors=this.story.parameters?.test?.dangerouslyIgnoreUnhandledErrors===!0,unhandledErrors=new Set,onError=event=>unhandledErrors.add("error"in event?event.error:event.reason);if(this.renderOptions.autoplay&&forceRemount&&playFunction&&this.phase!=="errored"){window.addEventListener("error",onError),window.addEventListener("unhandledrejection",onError),this.disableKeyListeners=!0;try{await this.runPhase(abortSignal,"playing",async()=>{await playFunction(renderContext.storyContext)}),!ignoreUnhandledErrors&&unhandledErrors.size>0?await this.runPhase(abortSignal,"errored"):await this.runPhase(abortSignal,"played")}catch(error){if(await this.runPhase(abortSignal,"errored",async()=>{this.channel.emit(import_core_events2.PLAY_FUNCTION_THREW_EXCEPTION,serializeError(error))}),this.story.parameters.throwPlayFunctionExceptions!==!1)throw error;console.error(error)}if(!ignoreUnhandledErrors&&unhandledErrors.size>0&&this.channel.emit(import_core_events2.UNHANDLED_ERRORS_WHILE_PLAYING,Array.from(unhandledErrors).map(serializeError)),this.disableKeyListeners=!1,window.removeEventListener("unhandledrejection",onError),window.removeEventListener("error",onError),abortSignal.aborted)return}await this.runPhase(abortSignal,"completed",async()=>this.channel.emit(import_core_events2.STORY_RENDERED,id))}catch(err){this.phase="errored",this.callbacks.showException(err)}this.rerenderEnqueued&&(this.rerenderEnqueued=!1,this.render())}async rerender(){if(this.isPending()&&this.phase!=="playing")this.rerenderEnqueued=!0;else return this.render()}async remount(){return await this.teardown(),this.render({forceRemount:!0})}cancelRender(){this.abortController?.abort()}async teardown(){this.torndown=!0,this.cancelRender(),this.story&&await this.store.cleanupStory(this.story);for(let i=0;i<3;i+=1){if(!this.isPending()){await this.teardownRender();return}await new Promise(resolve=>setTimeout(resolve,0))}window.location.reload(),await new Promise(()=>{})}};var{fetch}=import_global6.global,STORY_INDEX_PATH="./index.json",Preview=class{constructor(importFn,getProjectAnnotations,channel=addons.getChannel(),shouldInitialize=!0){this.importFn=importFn;this.getProjectAnnotations=getProjectAnnotations;this.channel=channel;this.storyRenders=[];this.storeInitializationPromise=new Promise((resolve,reject)=>{this.resolveStoreInitializationPromise=resolve,this.rejectStoreInitializationPromise=reject}),shouldInitialize&&this.initialize()}get storyStore(){return new Proxy({},{get:(_,method)=>{if(this.storyStoreValue)return(0,import_client_logger11.deprecate)("Accessing the Story Store is deprecated and will be removed in 9.0"),this.storyStoreValue[method];throw new import_preview_errors3.StoryStoreAccessedBeforeInitializationError}})}async initialize(){this.setupListeners();try{let projectAnnotations=await this.getProjectAnnotationsOrRenderError();await this.initializeWithProjectAnnotations(projectAnnotations)}catch(err){this.rejectStoreInitializationPromise(err)}}ready(){return this.storeInitializationPromise}setupListeners(){this.channel.on(import_core_events3.STORY_INDEX_INVALIDATED,this.onStoryIndexChanged.bind(this)),this.channel.on(import_core_events3.UPDATE_GLOBALS,this.onUpdateGlobals.bind(this)),this.channel.on(import_core_events3.UPDATE_STORY_ARGS,this.onUpdateArgs.bind(this)),this.channel.on(import_core_events3.ARGTYPES_INFO_REQUEST,this.onRequestArgTypesInfo.bind(this)),this.channel.on(import_core_events3.RESET_STORY_ARGS,this.onResetArgs.bind(this)),this.channel.on(import_core_events3.FORCE_RE_RENDER,this.onForceReRender.bind(this)),this.channel.on(import_core_events3.FORCE_REMOUNT,this.onForceRemount.bind(this))}async getProjectAnnotationsOrRenderError(){try{let projectAnnotations=await this.getProjectAnnotations();if(this.renderToCanvas=projectAnnotations.renderToCanvas,!this.renderToCanvas)throw new import_preview_errors3.MissingRenderToCanvasError;return projectAnnotations}catch(err){throw this.renderPreviewEntryError("Error reading preview.js:",err),err}}async initializeWithProjectAnnotations(projectAnnotations){this.projectAnnotationsBeforeInitialization=projectAnnotations;try{let storyIndex=await this.getStoryIndexFromServer();return this.initializeWithStoryIndex(storyIndex)}catch(err){throw this.renderPreviewEntryError("Error loading story index:",err),err}}async getStoryIndexFromServer(){let result=await fetch(STORY_INDEX_PATH);if(result.status===200)return result.json();throw new import_preview_errors3.StoryIndexFetchError({text:await result.text()})}initializeWithStoryIndex(storyIndex){if(!this.projectAnnotationsBeforeInitialization)throw new Error("Cannot call initializeWithStoryIndex until project annotations resolve");this.storyStoreValue=new StoryStore(storyIndex,this.importFn,this.projectAnnotationsBeforeInitialization),delete this.projectAnnotationsBeforeInitialization,this.setInitialGlobals(),this.resolveStoreInitializationPromise()}async setInitialGlobals(){this.emitGlobals()}emitGlobals(){if(!this.storyStoreValue)throw new import_preview_errors3.CalledPreviewMethodBeforeInitializationError({methodName:"emitGlobals"});let payload={globals:this.storyStoreValue.globals.get()||{},globalTypes:this.storyStoreValue.projectAnnotations.globalTypes||{}};this.channel.emit(import_core_events3.SET_GLOBALS,payload)}async onGetProjectAnnotationsChanged({getProjectAnnotations}){delete this.previewEntryError,this.getProjectAnnotations=getProjectAnnotations;let projectAnnotations=await this.getProjectAnnotationsOrRenderError();if(!this.storyStoreValue){await this.initializeWithProjectAnnotations(projectAnnotations);return}this.storyStoreValue.setProjectAnnotations(projectAnnotations),this.emitGlobals()}async onStoryIndexChanged(){if(delete this.previewEntryError,!(!this.storyStoreValue&&!this.projectAnnotationsBeforeInitialization))try{let storyIndex=await this.getStoryIndexFromServer();if(this.projectAnnotationsBeforeInitialization){this.initializeWithStoryIndex(storyIndex);return}await this.onStoriesChanged({storyIndex})}catch(err){throw this.renderPreviewEntryError("Error loading story index:",err),err}}async onStoriesChanged({importFn,storyIndex}){if(!this.storyStoreValue)throw new import_preview_errors3.CalledPreviewMethodBeforeInitializationError({methodName:"onStoriesChanged"});await this.storyStoreValue.onStoriesChanged({importFn,storyIndex})}async onUpdateGlobals({globals}){if(!this.storyStoreValue)throw new import_preview_errors3.CalledPreviewMethodBeforeInitializationError({methodName:"onUpdateGlobals"});this.storyStoreValue.globals.update(globals),await Promise.all(this.storyRenders.map(r=>r.rerender())),this.channel.emit(import_core_events3.GLOBALS_UPDATED,{globals:this.storyStoreValue.globals.get(),initialGlobals:this.storyStoreValue.globals.initialGlobals})}async onUpdateArgs({storyId,updatedArgs}){if(!this.storyStoreValue)throw new import_preview_errors3.CalledPreviewMethodBeforeInitializationError({methodName:"onUpdateArgs"});this.storyStoreValue.args.update(storyId,updatedArgs),await Promise.all(this.storyRenders.filter(r=>r.id===storyId&&!r.renderOptions.forceInitialArgs).map(r=>r.rerender())),this.channel.emit(import_core_events3.STORY_ARGS_UPDATED,{storyId,args:this.storyStoreValue.args.get(storyId)})}async onRequestArgTypesInfo({id,payload}){try{await this.storeInitializationPromise;let story=await this.storyStoreValue?.loadStory(payload);this.channel.emit(import_core_events3.ARGTYPES_INFO_RESPONSE,{id,success:!0,payload:{argTypes:story?.argTypes||{}},error:null})}catch(e){this.channel.emit(import_core_events3.ARGTYPES_INFO_RESPONSE,{id,success:!1,error:e?.message})}}async onResetArgs({storyId,argNames}){if(!this.storyStoreValue)throw new import_preview_errors3.CalledPreviewMethodBeforeInitializationError({methodName:"onResetArgs"});let story=this.storyRenders.find(r=>r.id===storyId)?.story||await this.storyStoreValue.loadStory({storyId}),updatedArgs=(argNames||[...new Set([...Object.keys(story.initialArgs),...Object.keys(this.storyStoreValue.args.get(storyId))])]).reduce((acc,argName)=>(acc[argName]=story.initialArgs[argName],acc),{});await this.onUpdateArgs({storyId,updatedArgs})}async onForceReRender(){await Promise.all(this.storyRenders.map(r=>r.rerender()))}async onForceRemount({storyId}){await Promise.all(this.storyRenders.filter(r=>r.id===storyId).map(r=>r.remount()))}renderStoryToElement(story,element,callbacks,options){if(!this.renderToCanvas||!this.storyStoreValue)throw new import_preview_errors3.CalledPreviewMethodBeforeInitializationError({methodName:"renderStoryToElement"});let render=new StoryRender(this.channel,this.storyStoreValue,this.renderToCanvas,callbacks,story.id,"docs",options,story);return render.renderToElement(element),this.storyRenders.push(render),async()=>{await this.teardownRender(render)}}async teardownRender(render,{viewModeChanged}={}){this.storyRenders=this.storyRenders.filter(r=>r!==render),await render?.teardown?.({viewModeChanged})}async loadStory({storyId}){if(!this.storyStoreValue)throw new import_preview_errors3.CalledPreviewMethodBeforeInitializationError({methodName:"loadStory"});return this.storyStoreValue.loadStory({storyId})}getStoryContext(story,{forceInitialArgs=!1}={}){if(!this.storyStoreValue)throw new import_preview_errors3.CalledPreviewMethodBeforeInitializationError({methodName:"getStoryContext"});return this.storyStoreValue.getStoryContext(story,{forceInitialArgs})}async extract(options){if(!this.storyStoreValue)throw new import_preview_errors3.CalledPreviewMethodBeforeInitializationError({methodName:"extract"});if(this.previewEntryError)throw this.previewEntryError;return await this.storyStoreValue.cacheAllCSFFiles(),this.storyStoreValue.extract(options)}renderPreviewEntryError(reason,err){this.previewEntryError=err,import_client_logger11.logger.error(reason),import_client_logger11.logger.error(err),this.channel.emit(import_core_events3.CONFIG_ERROR,err)}};var import_global9=require("@storybook/global");var import_tiny_invariant=__toESM(require("tiny-invariant")),import_core_events6=require("@storybook/core-events"),import_client_logger12=require("@storybook/client-logger"),import_preview_errors4=require("@storybook/core-events/preview-errors");var import_core_events4=require("@storybook/core-events");var import_ts_dedent8=__toESM(require("ts-dedent")),DocsContext=class{constructor(channel,store,renderStoryToElement,csfFiles){this.channel=channel;this.store=store;this.renderStoryToElement=renderStoryToElement;this.storyIdByName=storyName=>{let storyId=this.nameToStoryId.get(storyName);if(storyId)return storyId;throw new Error(`No story found with that name: ${storyName}`)};this.componentStories=()=>this.componentStoriesValue;this.componentStoriesFromCSFFile=csfFile=>this.store.componentStoriesFromCSFFile({csfFile});this.storyById=storyId=>{if(!storyId){if(!this.primaryStory)throw new Error("No primary story defined for docs entry. Did you forget to use `<Meta>`?");return this.primaryStory}let csfFile=this.storyIdToCSFFile.get(storyId);if(!csfFile)throw new Error(`Called \`storyById\` for story that was never loaded: ${storyId}`);return this.store.storyFromCSFFile({storyId,csfFile})};this.getStoryContext=story=>({...this.store.getStoryContext(story),viewMode:"docs"});this.loadStory=id=>this.store.loadStory({storyId:id});this.componentStoriesValue=[],this.storyIdToCSFFile=new Map,this.exportToStory=new Map,this.exportsToCSFFile=new Map,this.nameToStoryId=new Map,this.attachedCSFFiles=new Set,csfFiles.forEach((csfFile,index)=>{this.referenceCSFFile(csfFile)})}referenceCSFFile(csfFile){this.exportsToCSFFile.set(csfFile.moduleExports,csfFile),this.exportsToCSFFile.set(csfFile.moduleExports.default,csfFile),this.store.componentStoriesFromCSFFile({csfFile}).forEach(story=>{let annotation=csfFile.stories[story.id];this.storyIdToCSFFile.set(annotation.id,csfFile),this.exportToStory.set(annotation.moduleExport,story)})}attachCSFFile(csfFile){if(!this.exportsToCSFFile.has(csfFile.moduleExports))throw new Error("Cannot attach a CSF file that has not been referenced");if(this.attachedCSFFiles.has(csfFile))return;this.attachedCSFFiles.add(csfFile),this.store.componentStoriesFromCSFFile({csfFile}).forEach(story=>{this.nameToStoryId.set(story.name,story.id),this.componentStoriesValue.push(story),this.primaryStory||(this.primaryStory=story)})}referenceMeta(metaExports,attach){let resolved=this.resolveModuleExport(metaExports);if(resolved.type!=="meta")throw new Error("<Meta of={} /> must reference a CSF file module export or meta export. Did you mistakenly reference your component instead of your CSF file?");attach&&this.attachCSFFile(resolved.csfFile)}get projectAnnotations(){let{projectAnnotations}=this.store;if(!projectAnnotations)throw new Error("Can't get projectAnnotations from DocsContext before they are initialized");return projectAnnotations}resolveAttachedModuleExportType(moduleExportType){if(moduleExportType==="story"){if(!this.primaryStory)throw new Error("No primary story attached to this docs file, did you forget to use <Meta of={} />?");return{type:"story",story:this.primaryStory}}if(this.attachedCSFFiles.size===0)throw new Error("No CSF file attached to this docs file, did you forget to use <Meta of={} />?");let firstAttachedCSFFile=Array.from(this.attachedCSFFiles)[0];if(moduleExportType==="meta")return{type:"meta",csfFile:firstAttachedCSFFile};let{component}=firstAttachedCSFFile.meta;if(!component)throw new Error("Attached CSF file does not defined a component, did you forget to export one?");return{type:"component",component}}resolveModuleExport(moduleExportOrType){let csfFile=this.exportsToCSFFile.get(moduleExportOrType);if(csfFile)return{type:"meta",csfFile};let story=this.exportToStory.get(moduleExportOrType);return story?{type:"story",story}:{type:"component",component:moduleExportOrType}}resolveOf(moduleExportOrType,validTypes=[]){let resolved;if(["component","meta","story"].includes(moduleExportOrType)){let type=moduleExportOrType;resolved=this.resolveAttachedModuleExportType(type)}else resolved=this.resolveModuleExport(moduleExportOrType);if(validTypes.length&&!validTypes.includes(resolved.type)){let prettyType=resolved.type==="component"?"component or unknown":resolved.type;throw new Error(import_ts_dedent8.default`Invalid value passed to the 'of' prop. The value was resolved to a '${prettyType}' type but the only types for this block are: ${validTypes.join(", ")}.
|
|
49
55
|
- Did you pass a component to the 'of' prop when the block only supports a story or a meta?
|
|
50
56
|
- ... or vice versa?
|
|
51
|
-
- Did you pass a story, CSF file or meta to the 'of' prop that is not indexed, ie. is not targeted by the 'stories' globs in the main configuration?`)}switch(resolved.type){case"component":return{...resolved,projectAnnotations:this.projectAnnotations};case"meta":return{...resolved,preparedMeta:this.store.preparedMetaFromCSFFile({csfFile:resolved.csfFile})};case"story":default:return resolved}}};var CsfDocsRender=class{constructor(channel,store,entry,callbacks){this.channel=channel;this.store=store;this.entry=entry;this.callbacks=callbacks;this.type="docs";this.subtype="csf";this.torndown=!1;this.disableKeyListeners=!1;this.preparing=!1;this.id=entry.id}isPreparing(){return this.preparing}async prepare(){this.preparing=!0;let{entryExports,csfFiles=[]}=await this.store.loadEntry(this.id);if(this.torndown)throw PREPARE_ABORTED;let{importPath,title}=this.entry,primaryCsfFile=this.store.processCSFFileWithCache(entryExports,importPath,title),primaryStoryId=Object.keys(primaryCsfFile.stories)[0];this.story=this.store.storyFromCSFFile({storyId:primaryStoryId,csfFile:primaryCsfFile}),this.csfFiles=[primaryCsfFile,...csfFiles],this.preparing=!1}isEqual(other){return!!(this.id===other.id&&this.story&&this.story===other.story)}docsContext(renderStoryToElement){if(!this.csfFiles)throw new Error("Cannot render docs before preparing");let docsContext=new DocsContext(this.channel,this.store,renderStoryToElement,this.csfFiles);return this.csfFiles.forEach(csfFile=>docsContext.attachCSFFile(csfFile)),docsContext}async renderToElement(canvasElement,renderStoryToElement){if(!this.story||!this.csfFiles)throw new Error("Cannot render docs before preparing");let docsContext=this.docsContext(renderStoryToElement),{docs:docsParameter}=this.story.parameters||{};if(!docsParameter)throw new Error("Cannot render a story in viewMode=docs if `@storybook/addon-docs` is not installed");let renderer=await docsParameter.renderer(),{render}=renderer,renderDocs=async()=>{try{await render(docsContext,docsParameter,canvasElement),this.channel.emit(import_core_events4.DOCS_RENDERED,this.id)}catch(err){this.callbacks.showException(err)}};return this.rerender=async()=>renderDocs(),this.teardownRender=async({viewModeChanged})=>{!viewModeChanged||!canvasElement||renderer.unmount(canvasElement)},renderDocs()}async teardown({viewModeChanged}={}){this.teardownRender?.({viewModeChanged}),this.torndown=!0}};var import_core_events5=require("@storybook/core-events");var MdxDocsRender=class{constructor(channel,store,entry,callbacks){this.channel=channel;this.store=store;this.entry=entry;this.callbacks=callbacks;this.type="docs";this.subtype="mdx";this.torndown=!1;this.disableKeyListeners=!1;this.preparing=!1;this.id=entry.id}isPreparing(){return this.preparing}async prepare(){this.preparing=!0;let{entryExports,csfFiles=[]}=await this.store.loadEntry(this.id);if(this.torndown)throw PREPARE_ABORTED;this.csfFiles=csfFiles,this.exports=entryExports,this.preparing=!1}isEqual(other){return!!(this.id===other.id&&this.exports&&this.exports===other.exports)}docsContext(renderStoryToElement){if(!this.csfFiles)throw new Error("Cannot render docs before preparing");return new DocsContext(this.channel,this.store,renderStoryToElement,this.csfFiles)}async renderToElement(canvasElement,renderStoryToElement){if(!this.exports||!this.csfFiles||!this.store.projectAnnotations)throw new Error("Cannot render docs before preparing");let docsContext=this.docsContext(renderStoryToElement),{docs}=this.store.projectAnnotations.parameters||{};if(!docs)throw new Error("Cannot render a story in viewMode=docs if `@storybook/addon-docs` is not installed");let docsParameter={...docs,page:this.exports.default},renderer=await docs.renderer(),{render}=renderer,renderDocs=async()=>{try{await render(docsContext,docsParameter,canvasElement),this.channel.emit(import_core_events5.DOCS_RENDERED,this.id)}catch(err){this.callbacks.showException(err)}};return this.rerender=async()=>renderDocs(),this.teardownRender=async({viewModeChanged}={})=>{!viewModeChanged||!canvasElement||(renderer.unmount(canvasElement),this.torndown=!0)},renderDocs()}async teardown({viewModeChanged}={}){this.teardownRender?.({viewModeChanged}),this.torndown=!0}};var globalWindow=globalThis;function focusInInput(event){let target=event.composedPath&&event.composedPath()[0]||event.target;return/input|textarea/i.test(target.tagName)||target.getAttribute("contenteditable")!==null}var AUTODOCS_TAG="autodocs",STORIES_MDX_TAG="stories-mdx",ATTACHED_MDX_TAG="attached-mdx";function isMdxEntry({tags}){return!tags?.includes(AUTODOCS_TAG)&&!tags?.includes(STORIES_MDX_TAG)}function isStoryRender(r){return r.type==="story"}function isDocsRender(r){return r.type==="docs"}function isCsfDocsRender(r){return isDocsRender(r)&&r.subtype==="csf"}var PreviewWithSelection=class extends Preview{constructor(importFn,getProjectAnnotations,selectionStore,view){super(importFn,getProjectAnnotations,void 0,!1);this.importFn=importFn;this.getProjectAnnotations=getProjectAnnotations;this.selectionStore=selectionStore;this.view=view;this.initialize()}setupListeners(){super.setupListeners(),globalWindow.onkeydown=this.onKeydown.bind(this),this.channel.on(import_core_events6.SET_CURRENT_STORY,this.onSetCurrentStory.bind(this)),this.channel.on(import_core_events6.UPDATE_QUERY_PARAMS,this.onUpdateQueryParams.bind(this)),this.channel.on(import_core_events6.PRELOAD_ENTRIES,this.onPreloadStories.bind(this))}async setInitialGlobals(){if(!this.storyStoreValue)throw new import_preview_errors4.CalledPreviewMethodBeforeInitializationError({methodName:"setInitialGlobals"});let{globals}=this.selectionStore.selectionSpecifier||{};globals&&this.storyStoreValue.globals.updateFromPersisted(globals),this.emitGlobals()}async initializeWithStoryIndex(storyIndex){return await super.initializeWithStoryIndex(storyIndex),this.selectSpecifiedStory()}async selectSpecifiedStory(){if(!this.storyStoreValue)throw new import_preview_errors4.CalledPreviewMethodBeforeInitializationError({methodName:"selectSpecifiedStory"});if(this.selectionStore.selection){await this.renderSelection();return}if(!this.selectionStore.selectionSpecifier){this.renderMissingStory();return}let{storySpecifier,args}=this.selectionStore.selectionSpecifier,entry=this.storyStoreValue.storyIndex.entryFromSpecifier(storySpecifier);if(!entry){storySpecifier==="*"?this.renderStoryLoadingException(storySpecifier,new import_preview_errors4.EmptyIndexError):this.renderStoryLoadingException(storySpecifier,new import_preview_errors4.NoStoryMatchError({storySpecifier:storySpecifier.toString()}));return}let{id:storyId,type:viewMode}=entry;this.selectionStore.setSelection({storyId,viewMode}),this.channel.emit(import_core_events6.STORY_SPECIFIED,this.selectionStore.selection),this.channel.emit(import_core_events6.CURRENT_STORY_WAS_SET,this.selectionStore.selection),await this.renderSelection({persistedArgs:args})}async onGetProjectAnnotationsChanged({getProjectAnnotations}){await super.onGetProjectAnnotationsChanged({getProjectAnnotations}),this.selectionStore.selection&&this.renderSelection()}async onStoriesChanged({importFn,storyIndex}){await super.onStoriesChanged({importFn,storyIndex}),this.selectionStore.selection?await this.renderSelection():await this.selectSpecifiedStory()}onKeydown(event){if(!this.storyRenders.find(r=>r.disableKeyListeners)&&!focusInInput(event)){let{altKey,ctrlKey,metaKey,shiftKey,key,code,keyCode}=event;this.channel.emit(import_core_events6.PREVIEW_KEYDOWN,{event:{altKey,ctrlKey,metaKey,shiftKey,key,code,keyCode}})}}async onSetCurrentStory(selection){this.selectionStore.setSelection({viewMode:"story",...selection}),await this.storeInitializationPromise,this.channel.emit(import_core_events6.CURRENT_STORY_WAS_SET,this.selectionStore.selection),this.renderSelection()}onUpdateQueryParams(queryParams){this.selectionStore.setQueryParams(queryParams)}async onUpdateGlobals({globals}){super.onUpdateGlobals({globals}),(this.currentRender instanceof MdxDocsRender||this.currentRender instanceof CsfDocsRender)&&await this.currentRender.rerender?.()}async onUpdateArgs({storyId,updatedArgs}){super.onUpdateArgs({storyId,updatedArgs})}async onPreloadStories({ids}){await this.storeInitializationPromise,this.storyStoreValue&&await Promise.allSettled(ids.map(id=>this.storyStoreValue?.loadEntry(id)))}async renderSelection({persistedArgs}={}){let{renderToCanvas}=this;if(!this.storyStoreValue||!renderToCanvas)throw new import_preview_errors4.CalledPreviewMethodBeforeInitializationError({methodName:"renderSelection"});let{selection}=this.selectionStore;if(!selection)throw new Error("Cannot call renderSelection as no selection was made");let{storyId}=selection,entry;try{entry=await this.storyStoreValue.storyIdToEntry(storyId)}catch(err){this.currentRender&&await this.teardownRender(this.currentRender),this.renderStoryLoadingException(storyId,err);return}let storyIdChanged=this.currentSelection?.storyId!==storyId,viewModeChanged=this.currentRender?.type!==entry.type;entry.type==="story"?this.view.showPreparingStory({immediate:viewModeChanged}):this.view.showPreparingDocs({immediate:viewModeChanged}),this.currentRender?.isPreparing()&&await this.teardownRender(this.currentRender);let render;entry.type==="story"?render=new StoryRender(this.channel,this.storyStoreValue,(...args)=>(this.view.showStoryDuringRender(),renderToCanvas(...args)),this.mainStoryCallbacks(storyId),storyId,"story"):isMdxEntry(entry)?render=new MdxDocsRender(this.channel,this.storyStoreValue,entry,this.mainStoryCallbacks(storyId)):render=new CsfDocsRender(this.channel,this.storyStoreValue,entry,this.mainStoryCallbacks(storyId));let lastSelection=this.currentSelection;this.currentSelection=selection;let lastRender=this.currentRender;this.currentRender=render;try{await render.prepare()}catch(err){err!==PREPARE_ABORTED&&(lastRender&&await this.teardownRender(lastRender),this.renderStoryLoadingException(storyId,err));return}let implementationChanged=!storyIdChanged&&lastRender&&!render.isEqual(lastRender);if(persistedArgs&&isStoryRender(render)&&((0,import_tiny_invariant.default)(!!render.story),this.storyStoreValue.args.updateFromPersisted(render.story,persistedArgs)),lastRender&&!lastRender.torndown&&!storyIdChanged&&!implementationChanged&&!viewModeChanged){this.currentRender=lastRender,this.channel.emit(import_core_events6.STORY_UNCHANGED,storyId),this.view.showMain();return}if(lastRender&&await this.teardownRender(lastRender,{viewModeChanged}),lastSelection&&(storyIdChanged||viewModeChanged)&&this.channel.emit(import_core_events6.STORY_CHANGED,storyId),isStoryRender(render)){(0,import_tiny_invariant.default)(!!render.story);let{parameters,initialArgs,argTypes,unmappedArgs}=this.storyStoreValue.getStoryContext(render.story);this.channel.emit(import_core_events6.STORY_PREPARED,{id:storyId,parameters,initialArgs,argTypes,args:unmappedArgs}),(implementationChanged||persistedArgs)&&this.channel.emit(import_core_events6.STORY_ARGS_UPDATED,{storyId,args:unmappedArgs})}else{let{parameters}=this.storyStoreValue.projectAnnotations;if(isCsfDocsRender(render)||render.entry.tags?.includes(ATTACHED_MDX_TAG)){if(!render.csfFiles)throw new import_preview_errors4.MdxFileWithNoCsfReferencesError({storyId});({parameters}=this.storyStoreValue.preparedMetaFromCSFFile({csfFile:render.csfFiles[0]}))}this.channel.emit(import_core_events6.DOCS_PREPARED,{id:storyId,parameters})}isStoryRender(render)?((0,import_tiny_invariant.default)(!!render.story),this.storyRenders.push(render),this.currentRender.renderToElement(this.view.prepareForStory(render.story))):this.currentRender.renderToElement(this.view.prepareForDocs(),this.renderStoryToElement.bind(this))}async teardownRender(render,{viewModeChanged=!1}={}){this.storyRenders=this.storyRenders.filter(r=>r!==render),await render?.teardown?.({viewModeChanged})}mainStoryCallbacks(storyId){return{showMain:()=>this.view.showMain(),showError:err=>this.renderError(storyId,err),showException:err=>this.renderException(storyId,err)}}renderPreviewEntryError(reason,err){super.renderPreviewEntryError(reason,err),this.view.showErrorDisplay(err)}renderMissingStory(){this.view.showNoPreview(),this.channel.emit(import_core_events6.STORY_MISSING)}renderStoryLoadingException(storySpecifier,err){import_client_logger11.logger.error(err),this.view.showErrorDisplay(err),this.channel.emit(import_core_events6.STORY_MISSING,storySpecifier)}renderException(storyId,error){let{name="Error",message=String(error),stack}=error;this.channel.emit(import_core_events6.STORY_THREW_EXCEPTION,{name,message,stack}),this.channel.emit(import_core_events6.STORY_RENDER_PHASE_CHANGED,{newPhase:"errored",storyId}),error.message?.startsWith("ignoredException")||(this.view.showErrorDisplay(error),import_client_logger11.logger.error(`Error rendering story '${storyId}':`),import_client_logger11.logger.error(error))}renderError(storyId,{title,description}){import_client_logger11.logger.error(`Error rendering story ${title}: ${description}`),this.channel.emit(import_core_events6.STORY_ERRORED,{title,description}),this.channel.emit(import_core_events6.STORY_RENDER_PHASE_CHANGED,{newPhase:"errored",storyId}),this.view.showErrorDisplay({message:title,stack:description})}};var import_global6=require("@storybook/global"),import_qs2=__toESM(require("qs"));var import_qs=__toESM(require("qs")),import_ts_dedent8=require("ts-dedent"),import_client_logger12=require("@storybook/client-logger"),import_isPlainObject3=__toESM(require("lodash/isPlainObject.js")),VALIDATION_REGEXP=/^[a-zA-Z0-9 _-]*$/,NUMBER_REGEXP=/^-?[0-9]+(\.[0-9]+)?$/,HEX_REGEXP=/^#([a-f0-9]{3,4}|[a-f0-9]{6}|[a-f0-9]{8})$/i,COLOR_REGEXP=/^(rgba?|hsla?)\(([0-9]{1,3}),\s?([0-9]{1,3})%?,\s?([0-9]{1,3})%?,?\s?([0-9](\.[0-9]{1,2})?)?\)$/i,validateArgs=(key="",value)=>key===null||key===""||!VALIDATION_REGEXP.test(key)?!1:value==null||value instanceof Date||typeof value=="number"||typeof value=="boolean"?!0:typeof value=="string"?VALIDATION_REGEXP.test(value)||NUMBER_REGEXP.test(value)||HEX_REGEXP.test(value)||COLOR_REGEXP.test(value):Array.isArray(value)?value.every(v=>validateArgs(key,v)):(0,import_isPlainObject3.default)(value)?Object.entries(value).every(([k,v])=>validateArgs(k,v)):!1,QS_OPTIONS={delimiter:";",allowDots:!0,allowSparse:!0,decoder(str,defaultDecoder,charset,type){if(type==="value"&&str.startsWith("!")){if(str==="!undefined")return;if(str==="!null")return null;if(str==="!true")return!0;if(str==="!false")return!1;if(str.startsWith("!date(")&&str.endsWith(")"))return new Date(str.slice(6,-1));if(str.startsWith("!hex(")&&str.endsWith(")"))return`#${str.slice(5,-1)}`;let color=str.slice(1).match(COLOR_REGEXP);if(color)return str.startsWith("!rgba")?`${color[1]}(${color[2]}, ${color[3]}, ${color[4]}, ${color[5]})`:str.startsWith("!hsla")?`${color[1]}(${color[2]}, ${color[3]}%, ${color[4]}%, ${color[5]})`:str.startsWith("!rgb")?`${color[1]}(${color[2]}, ${color[3]}, ${color[4]})`:`${color[1]}(${color[2]}, ${color[3]}%, ${color[4]}%)`}return type==="value"&&NUMBER_REGEXP.test(str)?Number(str):defaultDecoder(str,defaultDecoder,charset)}},parseArgsParam=argsString=>{let parts=argsString.split(";").map(part=>part.replace("=","~").replace(":","="));return Object.entries(import_qs.default.parse(parts.join(";"),QS_OPTIONS)).reduce((acc,[key,value])=>validateArgs(key,value)?Object.assign(acc,{[key]:value}):(import_client_logger12.once.warn(import_ts_dedent8.dedent`
|
|
57
|
+
- Did you pass a story, CSF file or meta to the 'of' prop that is not indexed, ie. is not targeted by the 'stories' globs in the main configuration?`)}switch(resolved.type){case"component":return{...resolved,projectAnnotations:this.projectAnnotations};case"meta":return{...resolved,preparedMeta:this.store.preparedMetaFromCSFFile({csfFile:resolved.csfFile})};case"story":default:return resolved}}};var CsfDocsRender=class{constructor(channel,store,entry,callbacks){this.channel=channel;this.store=store;this.entry=entry;this.callbacks=callbacks;this.type="docs";this.subtype="csf";this.torndown=!1;this.disableKeyListeners=!1;this.preparing=!1;this.id=entry.id}isPreparing(){return this.preparing}async prepare(){this.preparing=!0;let{entryExports,csfFiles=[]}=await this.store.loadEntry(this.id);if(this.torndown)throw PREPARE_ABORTED;let{importPath,title}=this.entry,primaryCsfFile=this.store.processCSFFileWithCache(entryExports,importPath,title),primaryStoryId=Object.keys(primaryCsfFile.stories)[0];this.story=this.store.storyFromCSFFile({storyId:primaryStoryId,csfFile:primaryCsfFile}),this.csfFiles=[primaryCsfFile,...csfFiles],this.preparing=!1}isEqual(other){return!!(this.id===other.id&&this.story&&this.story===other.story)}docsContext(renderStoryToElement){if(!this.csfFiles)throw new Error("Cannot render docs before preparing");let docsContext=new DocsContext(this.channel,this.store,renderStoryToElement,this.csfFiles);return this.csfFiles.forEach(csfFile=>docsContext.attachCSFFile(csfFile)),docsContext}async renderToElement(canvasElement,renderStoryToElement){if(!this.story||!this.csfFiles)throw new Error("Cannot render docs before preparing");let docsContext=this.docsContext(renderStoryToElement),{docs:docsParameter}=this.story.parameters||{};if(!docsParameter)throw new Error("Cannot render a story in viewMode=docs if `@storybook/addon-docs` is not installed");let renderer=await docsParameter.renderer(),{render}=renderer,renderDocs=async()=>{try{await render(docsContext,docsParameter,canvasElement),this.channel.emit(import_core_events4.DOCS_RENDERED,this.id)}catch(err){this.callbacks.showException(err)}};return this.rerender=async()=>renderDocs(),this.teardownRender=async({viewModeChanged})=>{!viewModeChanged||!canvasElement||renderer.unmount(canvasElement)},renderDocs()}async teardown({viewModeChanged}={}){this.teardownRender?.({viewModeChanged}),this.torndown=!0}};var import_core_events5=require("@storybook/core-events");var MdxDocsRender=class{constructor(channel,store,entry,callbacks){this.channel=channel;this.store=store;this.entry=entry;this.callbacks=callbacks;this.type="docs";this.subtype="mdx";this.torndown=!1;this.disableKeyListeners=!1;this.preparing=!1;this.id=entry.id}isPreparing(){return this.preparing}async prepare(){this.preparing=!0;let{entryExports,csfFiles=[]}=await this.store.loadEntry(this.id);if(this.torndown)throw PREPARE_ABORTED;this.csfFiles=csfFiles,this.exports=entryExports,this.preparing=!1}isEqual(other){return!!(this.id===other.id&&this.exports&&this.exports===other.exports)}docsContext(renderStoryToElement){if(!this.csfFiles)throw new Error("Cannot render docs before preparing");return new DocsContext(this.channel,this.store,renderStoryToElement,this.csfFiles)}async renderToElement(canvasElement,renderStoryToElement){if(!this.exports||!this.csfFiles||!this.store.projectAnnotations)throw new Error("Cannot render docs before preparing");let docsContext=this.docsContext(renderStoryToElement),{docs}=this.store.projectAnnotations.parameters||{};if(!docs)throw new Error("Cannot render a story in viewMode=docs if `@storybook/addon-docs` is not installed");let docsParameter={...docs,page:this.exports.default},renderer=await docs.renderer(),{render}=renderer,renderDocs=async()=>{try{await render(docsContext,docsParameter,canvasElement),this.channel.emit(import_core_events5.DOCS_RENDERED,this.id)}catch(err){this.callbacks.showException(err)}};return this.rerender=async()=>renderDocs(),this.teardownRender=async({viewModeChanged}={})=>{!viewModeChanged||!canvasElement||(renderer.unmount(canvasElement),this.torndown=!0)},renderDocs()}async teardown({viewModeChanged}={}){this.teardownRender?.({viewModeChanged}),this.torndown=!0}};var globalWindow=globalThis;function focusInInput(event){let target=event.composedPath&&event.composedPath()[0]||event.target;return/input|textarea/i.test(target.tagName)||target.getAttribute("contenteditable")!==null}var ATTACHED_MDX_TAG="attached-mdx",UNATTACHED_MDX_TAG="unattached-mdx";function isMdxEntry({tags}){return tags?.includes(UNATTACHED_MDX_TAG)||tags?.includes(ATTACHED_MDX_TAG)}function isStoryRender(r){return r.type==="story"}function isDocsRender(r){return r.type==="docs"}function isCsfDocsRender(r){return isDocsRender(r)&&r.subtype==="csf"}var PreviewWithSelection=class extends Preview{constructor(importFn,getProjectAnnotations,selectionStore,view){super(importFn,getProjectAnnotations,void 0,!1);this.importFn=importFn;this.getProjectAnnotations=getProjectAnnotations;this.selectionStore=selectionStore;this.view=view;this.initialize()}setupListeners(){super.setupListeners(),globalWindow.onkeydown=this.onKeydown.bind(this),this.channel.on(import_core_events6.SET_CURRENT_STORY,this.onSetCurrentStory.bind(this)),this.channel.on(import_core_events6.UPDATE_QUERY_PARAMS,this.onUpdateQueryParams.bind(this)),this.channel.on(import_core_events6.PRELOAD_ENTRIES,this.onPreloadStories.bind(this))}async setInitialGlobals(){if(!this.storyStoreValue)throw new import_preview_errors4.CalledPreviewMethodBeforeInitializationError({methodName:"setInitialGlobals"});let{globals}=this.selectionStore.selectionSpecifier||{};globals&&this.storyStoreValue.globals.updateFromPersisted(globals),this.emitGlobals()}async initializeWithStoryIndex(storyIndex){return await super.initializeWithStoryIndex(storyIndex),this.selectSpecifiedStory()}async selectSpecifiedStory(){if(!this.storyStoreValue)throw new import_preview_errors4.CalledPreviewMethodBeforeInitializationError({methodName:"selectSpecifiedStory"});if(this.selectionStore.selection){await this.renderSelection();return}if(!this.selectionStore.selectionSpecifier){this.renderMissingStory();return}let{storySpecifier,args}=this.selectionStore.selectionSpecifier,entry=this.storyStoreValue.storyIndex.entryFromSpecifier(storySpecifier);if(!entry){storySpecifier==="*"?this.renderStoryLoadingException(storySpecifier,new import_preview_errors4.EmptyIndexError):this.renderStoryLoadingException(storySpecifier,new import_preview_errors4.NoStoryMatchError({storySpecifier:storySpecifier.toString()}));return}let{id:storyId,type:viewMode}=entry;this.selectionStore.setSelection({storyId,viewMode}),this.channel.emit(import_core_events6.STORY_SPECIFIED,this.selectionStore.selection),this.channel.emit(import_core_events6.CURRENT_STORY_WAS_SET,this.selectionStore.selection),await this.renderSelection({persistedArgs:args})}async onGetProjectAnnotationsChanged({getProjectAnnotations}){await super.onGetProjectAnnotationsChanged({getProjectAnnotations}),this.selectionStore.selection&&this.renderSelection()}async onStoriesChanged({importFn,storyIndex}){await super.onStoriesChanged({importFn,storyIndex}),this.selectionStore.selection?await this.renderSelection():await this.selectSpecifiedStory()}onKeydown(event){if(!this.storyRenders.find(r=>r.disableKeyListeners)&&!focusInInput(event)){let{altKey,ctrlKey,metaKey,shiftKey,key,code,keyCode}=event;this.channel.emit(import_core_events6.PREVIEW_KEYDOWN,{event:{altKey,ctrlKey,metaKey,shiftKey,key,code,keyCode}})}}async onSetCurrentStory(selection){this.selectionStore.setSelection({viewMode:"story",...selection}),await this.storeInitializationPromise,this.channel.emit(import_core_events6.CURRENT_STORY_WAS_SET,this.selectionStore.selection),this.renderSelection()}onUpdateQueryParams(queryParams){this.selectionStore.setQueryParams(queryParams)}async onUpdateGlobals({globals}){super.onUpdateGlobals({globals}),(this.currentRender instanceof MdxDocsRender||this.currentRender instanceof CsfDocsRender)&&await this.currentRender.rerender?.()}async onUpdateArgs({storyId,updatedArgs}){super.onUpdateArgs({storyId,updatedArgs})}async onPreloadStories({ids}){await this.storeInitializationPromise,this.storyStoreValue&&await Promise.allSettled(ids.map(id=>this.storyStoreValue?.loadEntry(id)))}async renderSelection({persistedArgs}={}){let{renderToCanvas}=this;if(!this.storyStoreValue||!renderToCanvas)throw new import_preview_errors4.CalledPreviewMethodBeforeInitializationError({methodName:"renderSelection"});let{selection}=this.selectionStore;if(!selection)throw new Error("Cannot call renderSelection as no selection was made");let{storyId}=selection,entry;try{entry=await this.storyStoreValue.storyIdToEntry(storyId)}catch(err){this.currentRender&&await this.teardownRender(this.currentRender),this.renderStoryLoadingException(storyId,err);return}let storyIdChanged=this.currentSelection?.storyId!==storyId,viewModeChanged=this.currentRender?.type!==entry.type;entry.type==="story"?this.view.showPreparingStory({immediate:viewModeChanged}):this.view.showPreparingDocs({immediate:viewModeChanged}),this.currentRender?.isPreparing()&&await this.teardownRender(this.currentRender);let render;entry.type==="story"?render=new StoryRender(this.channel,this.storyStoreValue,(...args)=>(this.view.showStoryDuringRender(),renderToCanvas(...args)),this.mainStoryCallbacks(storyId),storyId,"story"):isMdxEntry(entry)?render=new MdxDocsRender(this.channel,this.storyStoreValue,entry,this.mainStoryCallbacks(storyId)):render=new CsfDocsRender(this.channel,this.storyStoreValue,entry,this.mainStoryCallbacks(storyId));let lastSelection=this.currentSelection;this.currentSelection=selection;let lastRender=this.currentRender;this.currentRender=render;try{await render.prepare()}catch(err){lastRender&&await this.teardownRender(lastRender),err!==PREPARE_ABORTED&&this.renderStoryLoadingException(storyId,err);return}let implementationChanged=!storyIdChanged&&lastRender&&!render.isEqual(lastRender);if(persistedArgs&&isStoryRender(render)&&((0,import_tiny_invariant.default)(!!render.story),this.storyStoreValue.args.updateFromPersisted(render.story,persistedArgs)),lastRender&&!lastRender.torndown&&!storyIdChanged&&!implementationChanged&&!viewModeChanged){this.currentRender=lastRender,this.channel.emit(import_core_events6.STORY_UNCHANGED,storyId),this.view.showMain();return}if(lastRender&&await this.teardownRender(lastRender,{viewModeChanged}),lastSelection&&(storyIdChanged||viewModeChanged)&&this.channel.emit(import_core_events6.STORY_CHANGED,storyId),isStoryRender(render)){(0,import_tiny_invariant.default)(!!render.story);let{parameters,initialArgs,argTypes,unmappedArgs}=this.storyStoreValue.getStoryContext(render.story);this.channel.emit(import_core_events6.STORY_PREPARED,{id:storyId,parameters,initialArgs,argTypes,args:unmappedArgs})}else{let{parameters}=this.storyStoreValue.projectAnnotations;if(isCsfDocsRender(render)||render.entry.tags?.includes(ATTACHED_MDX_TAG)){if(!render.csfFiles)throw new import_preview_errors4.MdxFileWithNoCsfReferencesError({storyId});({parameters}=this.storyStoreValue.preparedMetaFromCSFFile({csfFile:render.csfFiles[0]}))}this.channel.emit(import_core_events6.DOCS_PREPARED,{id:storyId,parameters})}isStoryRender(render)?((0,import_tiny_invariant.default)(!!render.story),this.storyRenders.push(render),this.currentRender.renderToElement(this.view.prepareForStory(render.story))):this.currentRender.renderToElement(this.view.prepareForDocs(),this.renderStoryToElement.bind(this))}async teardownRender(render,{viewModeChanged=!1}={}){this.storyRenders=this.storyRenders.filter(r=>r!==render),await render?.teardown?.({viewModeChanged})}mainStoryCallbacks(storyId){return{showMain:()=>this.view.showMain(),showError:err=>this.renderError(storyId,err),showException:err=>this.renderException(storyId,err)}}renderPreviewEntryError(reason,err){super.renderPreviewEntryError(reason,err),this.view.showErrorDisplay(err)}renderMissingStory(){this.view.showNoPreview(),this.channel.emit(import_core_events6.STORY_MISSING)}renderStoryLoadingException(storySpecifier,err){import_client_logger12.logger.error(err),this.view.showErrorDisplay(err),this.channel.emit(import_core_events6.STORY_MISSING,storySpecifier)}renderException(storyId,error){let{name="Error",message=String(error),stack}=error;this.channel.emit(import_core_events6.STORY_THREW_EXCEPTION,{name,message,stack}),this.channel.emit(import_core_events6.STORY_RENDER_PHASE_CHANGED,{newPhase:"errored",storyId}),error.message?.startsWith("ignoredException")||(this.view.showErrorDisplay(error),import_client_logger12.logger.error(`Error rendering story '${storyId}':`),import_client_logger12.logger.error(error))}renderError(storyId,{title,description}){import_client_logger12.logger.error(`Error rendering story ${title}: ${description}`),this.channel.emit(import_core_events6.STORY_ERRORED,{title,description}),this.channel.emit(import_core_events6.STORY_RENDER_PHASE_CHANGED,{newPhase:"errored",storyId}),this.view.showErrorDisplay({message:title,stack:description})}};var import_global7=require("@storybook/global"),import_qs2=__toESM(require("qs"));var import_qs=__toESM(require("qs")),import_ts_dedent9=require("ts-dedent"),import_client_logger13=require("@storybook/client-logger"),import_isPlainObject3=__toESM(require("lodash/isPlainObject.js")),VALIDATION_REGEXP=/^[a-zA-Z0-9 _-]*$/,NUMBER_REGEXP=/^-?[0-9]+(\.[0-9]+)?$/,HEX_REGEXP=/^#([a-f0-9]{3,4}|[a-f0-9]{6}|[a-f0-9]{8})$/i,COLOR_REGEXP=/^(rgba?|hsla?)\(([0-9]{1,3}),\s?([0-9]{1,3})%?,\s?([0-9]{1,3})%?,?\s?([0-9](\.[0-9]{1,2})?)?\)$/i,validateArgs=(key="",value)=>key===null||key===""||!VALIDATION_REGEXP.test(key)?!1:value==null||value instanceof Date||typeof value=="number"||typeof value=="boolean"?!0:typeof value=="string"?VALIDATION_REGEXP.test(value)||NUMBER_REGEXP.test(value)||HEX_REGEXP.test(value)||COLOR_REGEXP.test(value):Array.isArray(value)?value.every(v=>validateArgs(key,v)):(0,import_isPlainObject3.default)(value)?Object.entries(value).every(([k,v])=>validateArgs(k,v)):!1,QS_OPTIONS={delimiter:";",allowDots:!0,allowSparse:!0,decoder(str,defaultDecoder,charset,type){if(type==="value"&&str.startsWith("!")){if(str==="!undefined")return;if(str==="!null")return null;if(str==="!true")return!0;if(str==="!false")return!1;if(str.startsWith("!date(")&&str.endsWith(")"))return new Date(str.slice(6,-1));if(str.startsWith("!hex(")&&str.endsWith(")"))return`#${str.slice(5,-1)}`;let color=str.slice(1).match(COLOR_REGEXP);if(color)return str.startsWith("!rgba")?`${color[1]}(${color[2]}, ${color[3]}, ${color[4]}, ${color[5]})`:str.startsWith("!hsla")?`${color[1]}(${color[2]}, ${color[3]}%, ${color[4]}%, ${color[5]})`:str.startsWith("!rgb")?`${color[1]}(${color[2]}, ${color[3]}, ${color[4]})`:`${color[1]}(${color[2]}, ${color[3]}%, ${color[4]}%)`}return type==="value"&&NUMBER_REGEXP.test(str)?Number(str):defaultDecoder(str,defaultDecoder,charset)}},parseArgsParam=argsString=>{let parts=argsString.split(";").map(part=>part.replace("=","~").replace(":","="));return Object.entries(import_qs.default.parse(parts.join(";"),QS_OPTIONS)).reduce((acc,[key,value])=>validateArgs(key,value)?Object.assign(acc,{[key]:value}):(import_client_logger13.once.warn(import_ts_dedent9.dedent`
|
|
52
58
|
Omitted potentially unsafe URL args.
|
|
53
59
|
|
|
54
60
|
More info: https://storybook.js.org/docs/react/writing-stories/args#setting-args-through-the-url
|
|
55
|
-
`),acc),{})};var{history,document:document2}=
|
|
61
|
+
`),acc),{})};var{history,document:document2}=import_global7.global;function pathToId(path){let match=(path||"").match(/^\/story\/(.+)/);if(!match)throw new Error(`Invalid path '${path}', must start with '/story/'`);return match[1]}var getQueryString=({selection,extraParams})=>{let search=typeof document2<"u"?document2.location.search:"",{path,selectedKind,selectedStory,...rest}=import_qs2.default.parse(search,{ignoreQueryPrefix:!0});return import_qs2.default.stringify({...rest,...extraParams,...selection&&{id:selection.storyId,viewMode:selection.viewMode}},{encode:!1,addQueryPrefix:!0})},setPath=selection=>{if(!selection)return;let query=getQueryString({selection}),{hash=""}=document2.location;document2.title=selection.storyId,history.replaceState({},"",`${document2.location.pathname}${query}${hash}`)},isObject=val=>val!=null&&typeof val=="object"&&Array.isArray(val)===!1,getFirstString=v=>{if(v!==void 0){if(typeof v=="string")return v;if(Array.isArray(v))return getFirstString(v[0]);if(isObject(v))return getFirstString(Object.values(v).filter(Boolean))}},getSelectionSpecifierFromPath=()=>{if(typeof document2<"u"){let query=import_qs2.default.parse(document2.location.search,{ignoreQueryPrefix:!0}),args=typeof query.args=="string"?parseArgsParam(query.args):void 0,globals=typeof query.globals=="string"?parseArgsParam(query.globals):void 0,viewMode=getFirstString(query.viewMode);(typeof viewMode!="string"||!viewMode.match(/docs|story/))&&(viewMode="story");let path=getFirstString(query.path),storyId=path?pathToId(path):getFirstString(query.id);if(storyId)return{storySpecifier:storyId,args,globals,viewMode}}return null},UrlStore=class{constructor(){this.selectionSpecifier=getSelectionSpecifierFromPath()}setSelection(selection){this.selection=selection,setPath(this.selection)}setQueryParams(queryParams){let query=getQueryString({extraParams:queryParams}),{hash=""}=document2.location;history.replaceState({},"",`${document2.location.pathname}${query}${hash}`)}};var import_global8=require("@storybook/global"),import_client_logger14=require("@storybook/client-logger"),import_ansi_to_html=__toESM(require_ansi_to_html()),import_ts_dedent10=require("ts-dedent"),import_qs3=__toESM(require("qs")),{document:document3}=import_global8.global,PREPARING_DELAY=100,Mode=(Mode2=>(Mode2.MAIN="MAIN",Mode2.NOPREVIEW="NOPREVIEW",Mode2.PREPARING_STORY="PREPARING_STORY",Mode2.PREPARING_DOCS="PREPARING_DOCS",Mode2.ERROR="ERROR",Mode2))(Mode||{}),classes={PREPARING_STORY:"sb-show-preparing-story",PREPARING_DOCS:"sb-show-preparing-docs",MAIN:"sb-show-main",NOPREVIEW:"sb-show-nopreview",ERROR:"sb-show-errordisplay"},layoutClassMap={centered:"sb-main-centered",fullscreen:"sb-main-fullscreen",padded:"sb-main-padded"},ansiConverter=new import_ansi_to_html.default({escapeXML:!0}),WebView=class{constructor(){this.testing=!1;if(typeof document3<"u"){let{__SPECIAL_TEST_PARAMETER__}=import_qs3.default.parse(document3.location.search,{ignoreQueryPrefix:!0});switch(__SPECIAL_TEST_PARAMETER__){case"preparing-story":{this.showPreparingStory(),this.testing=!0;break}case"preparing-docs":{this.showPreparingDocs(),this.testing=!0;break}default:}}}prepareForStory(story){return this.showStory(),this.applyLayout(story.parameters.layout),document3.documentElement.scrollTop=0,document3.documentElement.scrollLeft=0,this.storyRoot()}storyRoot(){return document3.getElementById("storybook-root")}prepareForDocs(){return this.showMain(),this.showDocs(),this.applyLayout("fullscreen"),document3.documentElement.scrollTop=0,document3.documentElement.scrollLeft=0,this.docsRoot()}docsRoot(){return document3.getElementById("storybook-docs")}applyLayout(layout="padded"){if(layout==="none"){document3.body.classList.remove(this.currentLayoutClass),this.currentLayoutClass=null;return}this.checkIfLayoutExists(layout);let layoutClass=layoutClassMap[layout];document3.body.classList.remove(this.currentLayoutClass),document3.body.classList.add(layoutClass),this.currentLayoutClass=layoutClass}checkIfLayoutExists(layout){layoutClassMap[layout]||import_client_logger14.logger.warn(import_ts_dedent10.dedent`
|
|
56
62
|
The desired layout: ${layout} is not a valid option.
|
|
57
63
|
The possible options are: ${Object.keys(layoutClassMap).join(", ")}, none.
|
|
58
64
|
`)}showMode(mode){clearTimeout(this.preparingTimeout),Object.keys(Mode).forEach(otherMode=>{otherMode===mode?document3.body.classList.add(classes[otherMode]):document3.body.classList.remove(classes[otherMode])})}showErrorDisplay({message="",stack=""}){let header=message,detail=stack,parts=message.split(`
|
|
59
65
|
`);parts.length>1&&([header]=parts,detail=parts.slice(1).join(`
|
|
60
|
-
`).replace(/^\n/,"")),document3.getElementById("error-message").innerHTML=ansiConverter.toHtml(header),document3.getElementById("error-stack").innerHTML=ansiConverter.toHtml(detail),this.showMode("ERROR")}showNoPreview(){this.testing||(this.showMode("NOPREVIEW"),this.storyRoot()?.setAttribute("hidden","true"),this.docsRoot()?.setAttribute("hidden","true"))}showPreparingStory({immediate=!1}={}){clearTimeout(this.preparingTimeout),immediate?this.showMode("PREPARING_STORY"):this.preparingTimeout=setTimeout(()=>this.showMode("PREPARING_STORY"),PREPARING_DELAY)}showPreparingDocs({immediate=!1}={}){clearTimeout(this.preparingTimeout),immediate?this.showMode("PREPARING_DOCS"):this.preparingTimeout=setTimeout(()=>this.showMode("PREPARING_DOCS"),PREPARING_DELAY)}showMain(){this.showMode("MAIN")}showDocs(){this.storyRoot().setAttribute("hidden","true"),this.docsRoot().removeAttribute("hidden")}showStory(){this.docsRoot().setAttribute("hidden","true"),this.storyRoot().removeAttribute("hidden")}showStoryDuringRender(){document3.body.classList.add(classes.MAIN)}};var PreviewWeb=class extends PreviewWithSelection{constructor(importFn,getProjectAnnotations){super(importFn,getProjectAnnotations,new UrlStore,new WebView);this.importFn=importFn;this.getProjectAnnotations=getProjectAnnotations;
|
|
66
|
+
`).replace(/^\n/,"")),document3.getElementById("error-message").innerHTML=ansiConverter.toHtml(header),document3.getElementById("error-stack").innerHTML=ansiConverter.toHtml(detail),this.showMode("ERROR")}showNoPreview(){this.testing||(this.showMode("NOPREVIEW"),this.storyRoot()?.setAttribute("hidden","true"),this.docsRoot()?.setAttribute("hidden","true"))}showPreparingStory({immediate=!1}={}){clearTimeout(this.preparingTimeout),immediate?this.showMode("PREPARING_STORY"):this.preparingTimeout=setTimeout(()=>this.showMode("PREPARING_STORY"),PREPARING_DELAY)}showPreparingDocs({immediate=!1}={}){clearTimeout(this.preparingTimeout),immediate?this.showMode("PREPARING_DOCS"):this.preparingTimeout=setTimeout(()=>this.showMode("PREPARING_DOCS"),PREPARING_DELAY)}showMain(){this.showMode("MAIN")}showDocs(){this.storyRoot().setAttribute("hidden","true"),this.docsRoot().removeAttribute("hidden")}showStory(){this.docsRoot().setAttribute("hidden","true"),this.storyRoot().removeAttribute("hidden")}showStoryDuringRender(){document3.body.classList.add(classes.MAIN)}};var PreviewWeb=class extends PreviewWithSelection{constructor(importFn,getProjectAnnotations){super(importFn,getProjectAnnotations,new UrlStore,new WebView);this.importFn=importFn;this.getProjectAnnotations=getProjectAnnotations;import_global9.global.__STORYBOOK_PREVIEW__=this}};var import_global10=require("@storybook/global"),{document:document4}=import_global10.global,runScriptTypes=["application/javascript","application/ecmascript","application/x-ecmascript","application/x-javascript","text/ecmascript","text/javascript","text/javascript1.0","text/javascript1.1","text/javascript1.2","text/javascript1.3","text/javascript1.4","text/javascript1.5","text/jscript","text/livescript","text/x-ecmascript","text/x-javascript","module"],SCRIPT="script",SCRIPTS_ROOT_ID="scripts-root";function simulateDOMContentLoaded(){let DOMContentLoadedEvent=document4.createEvent("Event");DOMContentLoadedEvent.initEvent("DOMContentLoaded",!0,!0),document4.dispatchEvent(DOMContentLoadedEvent)}function insertScript($script,callback,$scriptRoot){let scriptEl=document4.createElement("script");scriptEl.type=$script.type==="module"?"module":"text/javascript",$script.src?(scriptEl.onload=callback,scriptEl.onerror=callback,scriptEl.src=$script.src):scriptEl.textContent=$script.innerText,$scriptRoot?$scriptRoot.appendChild(scriptEl):document4.head.appendChild(scriptEl),$script.parentNode.removeChild($script),$script.src||callback()}function insertScriptsSequentially(scriptsToExecute,callback,index=0){scriptsToExecute[index](()=>{index++,index===scriptsToExecute.length?callback():insertScriptsSequentially(scriptsToExecute,callback,index)})}function simulatePageLoad($container){let $scriptsRoot=document4.getElementById(SCRIPTS_ROOT_ID);$scriptsRoot?$scriptsRoot.innerHTML="":($scriptsRoot=document4.createElement("div"),$scriptsRoot.id=SCRIPTS_ROOT_ID,document4.body.appendChild($scriptsRoot));let $scripts=Array.from($container.querySelectorAll(SCRIPT));if($scripts.length){let scriptsToExecute=[];$scripts.forEach($script=>{let typeAttr=$script.getAttribute("type");(!typeAttr||runScriptTypes.includes(typeAttr))&&scriptsToExecute.push(callback=>insertScript($script,callback,$scriptsRoot))}),scriptsToExecute.length&&insertScriptsSequentially(scriptsToExecute,simulateDOMContentLoaded,void 0)}else simulateDOMContentLoaded()}0&&(module.exports={DocsContext,HooksContext,Preview,PreviewWeb,PreviewWithSelection,StoryStore,UrlStore,WebView,addons,applyHooks,combineArgs,combineParameters,composeConfigs,composeStepRunners,composeStories,composeStory,createPlaywrightTest,decorateStory,defaultDecorateStory,filterArgTypes,inferControls,makeDecorator,mockChannel,normalizeStory,prepareMeta,prepareStory,sanitizeStoryContextUpdate,setProjectAnnotations,simulateDOMContentLoaded,simulatePageLoad,sortStoriesV7,useArgs,useCallback,useChannel,useEffect,useGlobals,useMemo,useParameter,useReducer,useRef,useState,useStoryContext,userOrAutoTitle,userOrAutoTitleFromSpecifier});
|
package/dist/index.mjs
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
import { global } from '@storybook/global';
|
|
2
2
|
import { Channel } from '@storybook/channels';
|
|
3
|
-
import { logger, deprecate as deprecate$1
|
|
4
|
-
import { STORY_RENDERED, STORY_INDEX_INVALIDATED, UPDATE_GLOBALS, UPDATE_STORY_ARGS, RESET_STORY_ARGS, FORCE_RE_RENDER, FORCE_REMOUNT, SET_GLOBALS, GLOBALS_UPDATED, STORY_ARGS_UPDATED, CONFIG_ERROR, SET_CURRENT_STORY, UPDATE_QUERY_PARAMS, PRELOAD_ENTRIES, STORY_SPECIFIED, CURRENT_STORY_WAS_SET, PREVIEW_KEYDOWN, STORY_UNCHANGED, STORY_CHANGED, STORY_PREPARED, DOCS_PREPARED, STORY_MISSING, STORY_THREW_EXCEPTION, STORY_RENDER_PHASE_CHANGED, STORY_ERRORED, PLAY_FUNCTION_THREW_EXCEPTION, UNHANDLED_ERRORS_WHILE_PLAYING, DOCS_RENDERED } from '@storybook/core-events';
|
|
3
|
+
import { logger, once, deprecate as deprecate$1 } from '@storybook/client-logger';
|
|
4
|
+
import { STORY_RENDERED, STORY_INDEX_INVALIDATED, UPDATE_GLOBALS, UPDATE_STORY_ARGS, ARGTYPES_INFO_REQUEST, RESET_STORY_ARGS, FORCE_RE_RENDER, FORCE_REMOUNT, SET_GLOBALS, GLOBALS_UPDATED, STORY_ARGS_UPDATED, ARGTYPES_INFO_RESPONSE, CONFIG_ERROR, SET_CURRENT_STORY, UPDATE_QUERY_PARAMS, PRELOAD_ENTRIES, STORY_SPECIFIED, CURRENT_STORY_WAS_SET, PREVIEW_KEYDOWN, STORY_UNCHANGED, STORY_CHANGED, STORY_PREPARED, DOCS_PREPARED, STORY_MISSING, STORY_THREW_EXCEPTION, STORY_RENDER_PHASE_CHANGED, STORY_ERRORED, PLAY_FUNCTION_THREW_EXCEPTION, UNHANDLED_ERRORS_WHILE_PLAYING, DOCS_RENDERED } from '@storybook/core-events';
|
|
5
5
|
import memoize2 from 'memoizerific';
|
|
6
6
|
import mapValues2 from 'lodash/mapValues.js';
|
|
7
7
|
import pick from 'lodash/pick.js';
|
|
8
8
|
import { MissingStoryFromCsfFileError, CalledExtractOnStoreError, StoryStoreAccessedBeforeInitializationError, MissingRenderToCanvasError, StoryIndexFetchError, CalledPreviewMethodBeforeInitializationError, EmptyIndexError, NoStoryMatchError, MdxFileWithNoCsfReferencesError, MissingStoryAfterHmrError } from '@storybook/core-events/preview-errors';
|
|
9
9
|
import { dequal } from 'dequal';
|
|
10
10
|
import isPlainObject from 'lodash/isPlainObject.js';
|
|
11
|
-
import
|
|
12
|
-
import { storyNameFromExport, toId, isExportStory, sanitize, includeConditionalArg } from '@storybook/csf';
|
|
11
|
+
import dedent5, { dedent } from 'ts-dedent';
|
|
12
|
+
import { storyNameFromExport, toId, combineTags, isExportStory, sanitize, includeConditionalArg } from '@storybook/csf';
|
|
13
13
|
import deprecate from 'util-deprecate';
|
|
14
14
|
import pickBy from 'lodash/pickBy.js';
|
|
15
15
|
import invariant from 'tiny-invariant';
|
|
@@ -33,13 +33,19 @@ CSF .story annotations deprecated; annotate story functions directly:
|
|
|
33
33
|
- StoryFn.story.name => StoryFn.storyName
|
|
34
34
|
- StoryFn.story.(parameters|decorators) => StoryFn.(parameters|decorators)
|
|
35
35
|
See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#hoisted-csf-annotations for details and codemod.
|
|
36
|
-
`,deprecatedStoryAnnotationWarning=deprecate(()=>{},deprecatedStoryAnnotation);function normalizeStory(key,storyAnnotations,meta){let storyObject=storyAnnotations,userStoryFn=typeof storyAnnotations=="function"?storyAnnotations:null,{story}=storyObject;story&&(logger.debug("deprecated story",story),deprecatedStoryAnnotationWarning());let exportName=storyNameFromExport(key),name=typeof storyObject!="function"&&storyObject.name||storyObject.storyName||story?.name||exportName,decorators=[...normalizeArrays(storyObject.decorators),...normalizeArrays(story?.decorators)],parameters={...story?.parameters,...storyObject.parameters},args={...story?.args,...storyObject.args},argTypes={...story?.argTypes,...storyObject.argTypes},loaders=[...normalizeArrays(storyObject.loaders),...normalizeArrays(story?.loaders)],{render,play,tags=[]}=storyObject,id=parameters.__id||toId(meta.id,exportName);return {moduleExport:storyAnnotations,id,name,tags,decorators,parameters,args,argTypes:normalizeInputTypes(argTypes),loaders,...render&&{render},...userStoryFn&&{userStoryFn},...play&&{play}}}function normalizeComponentAnnotations(defaultExport,title=defaultExport.title,importPath){let{id,argTypes}=defaultExport;return {id:sanitize(id||title),...defaultExport,title,...argTypes&&{argTypes:normalizeInputTypes(argTypes)},parameters:{fileName:importPath,...defaultExport.parameters}}}var checkGlobals=parameters=>{let{globals,globalTypes}=parameters;(globals||globalTypes)&&logger.error("Global args/argTypes can only be set globally",JSON.stringify({globals,globalTypes}));},checkStorySort=parameters=>{let{options}=parameters;options?.storySort&&logger.error("The storySort option parameter can only be set globally");},checkDisallowedParameters=parameters=>{parameters&&(checkGlobals(parameters),checkStorySort(parameters));};function processCSFFile(moduleExports,importPath,title){let{default:defaultExport,__namedExportsOrder,...namedExports}=moduleExports,meta=normalizeComponentAnnotations(defaultExport,title,importPath);checkDisallowedParameters(meta.parameters);let csfFile={meta,stories:{},moduleExports};return Object.keys(namedExports).forEach(key=>{if(isExportStory(key,meta)){let storyMeta=normalizeStory(key,namedExports[key],meta);checkDisallowedParameters(storyMeta.parameters),csfFile.stories[storyMeta.id]=storyMeta;}}),csfFile}var combineParameters=(...parameterSets)=>{let mergeKeys={},definedParametersSets=parameterSets.filter(Boolean),combined=definedParametersSets.reduce((acc,parameters)=>(Object.entries(parameters).forEach(([key,value])=>{let existing=acc[key];Array.isArray(value)||typeof existing>"u"?acc[key]=value:isPlainObject(value)&&isPlainObject(existing)?mergeKeys[key]=!0:typeof value<"u"&&(acc[key]=value);}),acc),{});return Object.keys(mergeKeys).forEach(key=>{let mergeValues=definedParametersSets.filter(Boolean).map(p=>p[key]).filter(value=>typeof value<"u");mergeValues.every(value=>isPlainObject(value))?combined[key]=combineParameters(...mergeValues):combined[key]=mergeValues[mergeValues.length-1];}),combined};function decorateStory(storyFn,decorator,bindWithContext){let boundStoryFunction=bindWithContext(storyFn);return context=>decorator(boundStoryFunction,context)}function sanitizeStoryContextUpdate({componentId,title,kind,id,name,story,parameters,initialArgs,argTypes,...update}={}){return update}function defaultDecorateStory(storyFn,decorators){let contextStore={},bindWithContext=decoratedStoryFn=>update=>{if(!contextStore.value)throw new Error("Decorated function called without init");return contextStore.value={...contextStore.value,...sanitizeStoryContextUpdate(update)},decoratedStoryFn(contextStore.value)},decoratedWithContextStore=decorators.reduce((story,decorator)=>decorateStory(story,decorator,bindWithContext),storyFn);return context=>(contextStore.value=context,decoratedWithContextStore(context))}function prepareStory(storyAnnotations,componentAnnotations,projectAnnotations){let{moduleExport,id,name}=storyAnnotations||{},partialAnnotations=preparePartialAnnotations(storyAnnotations,componentAnnotations,projectAnnotations),applyLoaders=async context=>{let updatedContext={...context,loaded:{}};for(let loaders of [..."__STORYBOOK_TEST_LOADERS__"in global&&Array.isArray(global.__STORYBOOK_TEST_LOADERS__)?[global.__STORYBOOK_TEST_LOADERS__]:[],normalizeArrays(projectAnnotations.loaders),normalizeArrays(componentAnnotations.loaders),normalizeArrays(storyAnnotations.loaders)]){let loadResults=await Promise.all(loaders.map(loader=>loader(updatedContext))),loaded=Object.assign({},...loadResults);updatedContext={...updatedContext,loaded:{...updatedContext.loaded,...loaded}};}return updatedContext},undecoratedStoryFn=context=>render(context.args,context),{applyDecorators=defaultDecorateStory,runStep}=projectAnnotations,decorators=[...normalizeArrays(storyAnnotations?.decorators),...normalizeArrays(componentAnnotations?.decorators),...normalizeArrays(projectAnnotations?.decorators)],render=storyAnnotations?.userStoryFn||storyAnnotations?.render||componentAnnotations.render||projectAnnotations.render;if(!render)throw new Error(`No render function available for storyId '${id}'`);let decoratedStoryFn=applyHooks(applyDecorators)(undecoratedStoryFn,decorators),unboundStoryFn=context=>decoratedStoryFn(context),play=storyAnnotations?.play||componentAnnotations.play;return {...partialAnnotations,moduleExport,id,name,story:name,originalStoryFn:render,undecoratedStoryFn,unboundStoryFn,applyLoaders,playFunction:play&&(async storyContext=>{let playFunctionContext={...storyContext,step:(label,play2)=>runStep(label,play2,playFunctionContext)};return play(playFunctionContext)})}}function prepareMeta(componentAnnotations,projectAnnotations,moduleExport){return {...preparePartialAnnotations(void 0,componentAnnotations,projectAnnotations),moduleExport}}function preparePartialAnnotations(storyAnnotations,componentAnnotations,projectAnnotations){let
|
|
36
|
+
`,deprecatedStoryAnnotationWarning=deprecate(()=>{},deprecatedStoryAnnotation);function normalizeStory(key,storyAnnotations,meta){let storyObject=storyAnnotations,userStoryFn=typeof storyAnnotations=="function"?storyAnnotations:null,{story}=storyObject;story&&(logger.debug("deprecated story",story),deprecatedStoryAnnotationWarning());let exportName=storyNameFromExport(key),name=typeof storyObject!="function"&&storyObject.name||storyObject.storyName||story?.name||exportName,decorators=[...normalizeArrays(storyObject.decorators),...normalizeArrays(story?.decorators)],parameters={...story?.parameters,...storyObject.parameters},args={...story?.args,...storyObject.args},argTypes={...story?.argTypes,...storyObject.argTypes},loaders=[...normalizeArrays(storyObject.loaders),...normalizeArrays(story?.loaders)],beforeEach=[...normalizeArrays(storyObject.beforeEach),...normalizeArrays(story?.beforeEach)],{render,play,tags=[]}=storyObject,id=parameters.__id||toId(meta.id,exportName);return {moduleExport:storyAnnotations,id,name,tags,decorators,parameters,args,argTypes:normalizeInputTypes(argTypes),loaders,beforeEach,...render&&{render},...userStoryFn&&{userStoryFn},...play&&{play}}}function normalizeComponentAnnotations(defaultExport,title=defaultExport.title,importPath){let{id,argTypes}=defaultExport;return {id:sanitize(id||title),...defaultExport,title,...argTypes&&{argTypes:normalizeInputTypes(argTypes)},parameters:{fileName:importPath,...defaultExport.parameters}}}var checkGlobals=parameters=>{let{globals,globalTypes}=parameters;(globals||globalTypes)&&logger.error("Global args/argTypes can only be set globally",JSON.stringify({globals,globalTypes}));},checkStorySort=parameters=>{let{options}=parameters;options?.storySort&&logger.error("The storySort option parameter can only be set globally");},checkDisallowedParameters=parameters=>{parameters&&(checkGlobals(parameters),checkStorySort(parameters));};function processCSFFile(moduleExports,importPath,title){let{default:defaultExport,__namedExportsOrder,...namedExports}=moduleExports,meta=normalizeComponentAnnotations(defaultExport,title,importPath);checkDisallowedParameters(meta.parameters);let csfFile={meta,stories:{},moduleExports};return Object.keys(namedExports).forEach(key=>{if(isExportStory(key,meta)){let storyMeta=normalizeStory(key,namedExports[key],meta);checkDisallowedParameters(storyMeta.parameters),csfFile.stories[storyMeta.id]=storyMeta;}}),csfFile}var combineParameters=(...parameterSets)=>{let mergeKeys={},definedParametersSets=parameterSets.filter(Boolean),combined=definedParametersSets.reduce((acc,parameters)=>(Object.entries(parameters).forEach(([key,value])=>{let existing=acc[key];Array.isArray(value)||typeof existing>"u"?acc[key]=value:isPlainObject(value)&&isPlainObject(existing)?mergeKeys[key]=!0:typeof value<"u"&&(acc[key]=value);}),acc),{});return Object.keys(mergeKeys).forEach(key=>{let mergeValues=definedParametersSets.filter(Boolean).map(p=>p[key]).filter(value=>typeof value<"u");mergeValues.every(value=>isPlainObject(value))?combined[key]=combineParameters(...mergeValues):combined[key]=mergeValues[mergeValues.length-1];}),combined};function decorateStory(storyFn,decorator,bindWithContext){let boundStoryFunction=bindWithContext(storyFn);return context=>decorator(boundStoryFunction,context)}function sanitizeStoryContextUpdate({componentId,title,kind,id,name,story,parameters,initialArgs,argTypes,...update}={}){return update}function defaultDecorateStory(storyFn,decorators){let contextStore={},bindWithContext=decoratedStoryFn=>update=>{if(!contextStore.value)throw new Error("Decorated function called without init");return contextStore.value={...contextStore.value,...sanitizeStoryContextUpdate(update)},decoratedStoryFn(contextStore.value)},decoratedWithContextStore=decorators.reduce((story,decorator)=>decorateStory(story,decorator,bindWithContext),storyFn);return context=>(contextStore.value=context,decoratedWithContextStore(context))}function prepareStory(storyAnnotations,componentAnnotations,projectAnnotations){let{moduleExport,id,name}=storyAnnotations||{},partialAnnotations=preparePartialAnnotations(storyAnnotations,componentAnnotations,projectAnnotations),applyLoaders=async context=>{let updatedContext={...context,loaded:{}};for(let loaders of [..."__STORYBOOK_TEST_LOADERS__"in global&&Array.isArray(global.__STORYBOOK_TEST_LOADERS__)?[global.__STORYBOOK_TEST_LOADERS__]:[],normalizeArrays(projectAnnotations.loaders),normalizeArrays(componentAnnotations.loaders),normalizeArrays(storyAnnotations.loaders)]){let loadResults=await Promise.all(loaders.map(loader=>loader(updatedContext))),loaded=Object.assign({},...loadResults);updatedContext={...updatedContext,loaded:{...updatedContext.loaded,...loaded}};}return updatedContext},applyBeforeEach=async context=>{let cleanupCallbacks=new Array;for(let beforeEach of [...normalizeArrays(projectAnnotations.beforeEach),...normalizeArrays(componentAnnotations.beforeEach),...normalizeArrays(storyAnnotations.beforeEach)]){let cleanup=await beforeEach(context);cleanup&&cleanupCallbacks.push(cleanup);}return cleanupCallbacks},undecoratedStoryFn=context=>render(context.args,context),{applyDecorators=defaultDecorateStory,runStep}=projectAnnotations,decorators=[...normalizeArrays(storyAnnotations?.decorators),...normalizeArrays(componentAnnotations?.decorators),...normalizeArrays(projectAnnotations?.decorators)],render=storyAnnotations?.userStoryFn||storyAnnotations?.render||componentAnnotations.render||projectAnnotations.render;if(!render)throw new Error(`No render function available for storyId '${id}'`);let decoratedStoryFn=applyHooks(applyDecorators)(undecoratedStoryFn,decorators),unboundStoryFn=context=>decoratedStoryFn(context),play=storyAnnotations?.play||componentAnnotations.play;return {...partialAnnotations,moduleExport,id,name,story:name,originalStoryFn:render,undecoratedStoryFn,unboundStoryFn,applyLoaders,applyBeforeEach,playFunction:play&&(async storyContext=>{let playFunctionContext={...storyContext,step:(label,play2)=>runStep(label,play2,playFunctionContext)};return play(playFunctionContext)})}}function prepareMeta(componentAnnotations,projectAnnotations,moduleExport){return {...preparePartialAnnotations(void 0,componentAnnotations,projectAnnotations),moduleExport}}function preparePartialAnnotations(storyAnnotations,componentAnnotations,projectAnnotations){let defaultTags=["dev","test"];typeof global.DOCS_OPTIONS?.autodocs<"u"&&once.warn(dedent`
|
|
37
|
+
The \`docs.autodocs\` setting in '.storybook/main.js' is deprecated. Use \`tags: ['autodocs']\` in \`.storybook/preview.js\` instead.
|
|
38
|
+
|
|
39
|
+
For more info see: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#mainjs-docsautodocs-is-deprecated
|
|
40
|
+
`);let extraTags=global.DOCS_OPTIONS?.autodocs===!0?["autodocs"]:[],tags=combineTags(...defaultTags,...extraTags,...projectAnnotations.tags??[],...componentAnnotations.tags??[],...storyAnnotations?.tags??[]),parameters=combineParameters(projectAnnotations.parameters,componentAnnotations.parameters,storyAnnotations?.parameters),{argTypesEnhancers=[],argsEnhancers=[]}=projectAnnotations,passedArgTypes=combineParameters(projectAnnotations.argTypes,componentAnnotations.argTypes,storyAnnotations?.argTypes);if(storyAnnotations){let render=storyAnnotations?.userStoryFn||storyAnnotations?.render||componentAnnotations.render||projectAnnotations.render;parameters.__isArgsStory=render&&render.length>0;}let passedArgs={...projectAnnotations.args,...componentAnnotations.args,...storyAnnotations?.args},contextForEnhancers={componentId:componentAnnotations.id,title:componentAnnotations.title,kind:componentAnnotations.title,id:storyAnnotations?.id||componentAnnotations.id,name:storyAnnotations?.name||"__meta",story:storyAnnotations?.name||"__meta",component:componentAnnotations.component,subcomponents:componentAnnotations.subcomponents,tags,parameters,initialArgs:passedArgs,argTypes:passedArgTypes};contextForEnhancers.argTypes=argTypesEnhancers.reduce((accumulatedArgTypes,enhancer)=>enhancer({...contextForEnhancers,argTypes:accumulatedArgTypes}),contextForEnhancers.argTypes);let initialArgsBeforeEnhancers={...passedArgs};contextForEnhancers.initialArgs=argsEnhancers.reduce((accumulatedArgs,enhancer)=>({...accumulatedArgs,...enhancer({...contextForEnhancers,initialArgs:accumulatedArgs})}),initialArgsBeforeEnhancers);let{name,story,...withoutStoryIdentifiers}=contextForEnhancers;return withoutStoryIdentifiers}function prepareContext(context){let{args:unmappedArgs}=context,targetedContext={...context,allArgs:void 0,argsByTarget:void 0};if(global.FEATURES?.argTypeTargetsV7){let argsByTarget=groupArgsByTarget(context);targetedContext={...context,allArgs:context.args,argsByTarget,args:argsByTarget[UNTARGETED]||{}};}let mappedArgs=Object.entries(targetedContext.args).reduce((acc,[key,val])=>{if(!targetedContext.argTypes[key]?.mapping)return acc[key]=val,acc;let mappingFn=originalValue=>{let mapping=targetedContext.argTypes[key].mapping;return mapping&&originalValue in mapping?mapping[originalValue]:originalValue};return acc[key]=Array.isArray(val)?val.map(mappingFn):mappingFn(val),acc},{}),includedArgs=Object.entries(mappedArgs).reduce((acc,[key,val])=>{let argType=targetedContext.argTypes[key]||{};return includeConditionalArg(argType,mappedArgs,targetedContext.globals)&&(acc[key]=val),acc},{});return {...targetedContext,unmappedArgs,args:includedArgs}}var inferType=(value,name,visited)=>{let type=typeof value;switch(type){case"boolean":case"string":case"number":case"function":case"symbol":return {name:type};}return value?visited.has(value)?(logger.warn(dedent`
|
|
37
41
|
We've detected a cycle in arg '${name}'. Args should be JSON-serializable.
|
|
38
42
|
|
|
39
43
|
Consider using the mapping feature or fully custom args:
|
|
40
44
|
- Mapping: https://storybook.js.org/docs/react/writing-stories/args#mapping-to-complex-arg-values
|
|
41
45
|
- Custom args: https://storybook.js.org/docs/react/essentials/controls#fully-custom-args
|
|
42
|
-
`),{name:"other",value:"cyclic object"}):(visited.add(value),Array.isArray(value)?{name:"array",value:value.length>0?inferType(value[0],name,new Set(visited)):{name:"other",value:"unknown"}}:{name:"object",value:mapValues2(value,field=>inferType(field,name,new Set(visited)))}):{name:"object",value:{}}},inferArgTypes=context=>{let{id,argTypes:userArgTypes={},initialArgs={}}=context,argTypes=mapValues2(initialArgs,(arg,key)=>({name:key,type:inferType(arg,`${id}.${key}`,new Set)})),userArgTypesNames=mapValues2(userArgTypes,(argType,key)=>({name:key}));return combineParameters(argTypes,userArgTypesNames,userArgTypes)};inferArgTypes.secondPass=!0;var matches=(name,descriptor)=>Array.isArray(descriptor)?descriptor.includes(name):name.match(descriptor),filterArgTypes=(argTypes,include,exclude)=>!include&&!exclude?argTypes:argTypes&&pickBy(argTypes,(argType,key)=>{let name=argType.name||key;return (!include||matches(name,include))&&(!exclude||!matches(name,exclude))});var inferControl=(argType,name,matchers)=>{let{type,options}=argType;if(type){if(matchers.color&&matchers.color.test(name)){let controlType=type.name;if(controlType==="string")return {control:{type:"color"}};controlType!=="enum"&&logger.warn(`Addon controls: Control of type color only supports string, received "${controlType}" instead`);}if(matchers.date&&matchers.date.test(name))return {control:{type:"date"}};switch(type.name){case"array":return {control:{type:"object"}};case"boolean":return {control:{type:"boolean"}};case"string":return {control:{type:"text"}};case"number":return {control:{type:"number"}};case"enum":{let{value}=type;return {control:{type:value?.length<=5?"radio":"select"},options:value}}case"function":case"symbol":return null;default:return {control:{type:options?"select":"object"}}}}},inferControls=context=>{let{argTypes,parameters:{__isArgsStory,controls:{include=null,exclude=null,matchers={}}={}}}=context;if(!__isArgsStory)return argTypes;let filteredArgTypes=filterArgTypes(argTypes,include,exclude),withControls=mapValues2(filteredArgTypes,(argType,name)=>argType?.type&&inferControl(argType,name,matchers));return combineParameters(withControls,filteredArgTypes)};inferControls.secondPass=!0;function normalizeProjectAnnotations({argTypes,globalTypes,argTypesEnhancers,decorators,loaders,...annotations}){return {...argTypes&&{argTypes:normalizeInputTypes(argTypes)},...globalTypes&&{globalTypes:normalizeInputTypes(globalTypes)},decorators:normalizeArrays(decorators),loaders:normalizeArrays(loaders),argTypesEnhancers:[...argTypesEnhancers||[],inferArgTypes,inferControls],...annotations}}function composeStepRunners(stepRunners){return async(label,play,playContext)=>{await stepRunners.reduceRight((innerPlay,stepRunner)=>async()=>stepRunner(label,innerPlay,playContext),async()=>play(playContext))();}}function getField(moduleExportList,field){return moduleExportList.map(xs=>xs.default?.[field]??xs[field]).filter(Boolean)}function getArrayField(moduleExportList,field,options={}){return getField(moduleExportList,field).reduce((prev,cur)=>{let normalized=normalizeArrays(cur);return options.reverseFileOrder?[...normalized,...prev]:[...prev,...normalized]},[])}function getObjectField(moduleExportList,field){return Object.assign({},...getField(moduleExportList,field))}function getSingletonField(moduleExportList,field){return getField(moduleExportList,field).pop()}function composeConfigs(moduleExportList){let allArgTypeEnhancers=getArrayField(moduleExportList,"argTypesEnhancers"),stepRunners=getField(moduleExportList,"runStep");return {parameters:combineParameters(...getField(moduleExportList,"parameters")),decorators:getArrayField(moduleExportList,"decorators",{reverseFileOrder:!(global.FEATURES?.legacyDecoratorFileOrder??!1)}),args:getObjectField(moduleExportList,"args"),argsEnhancers:getArrayField(moduleExportList,"argsEnhancers"),argTypes:getObjectField(moduleExportList,"argTypes"),argTypesEnhancers:[...allArgTypeEnhancers.filter(e=>!e.secondPass),...allArgTypeEnhancers.filter(e=>e.secondPass)],globals:getObjectField(moduleExportList,"globals"),globalTypes:getObjectField(moduleExportList,"globalTypes"),loaders:getArrayField(moduleExportList,"loaders"),render:getSingletonField(moduleExportList,"render"),renderToCanvas:getSingletonField(moduleExportList,"renderToCanvas"),renderToDOM:getSingletonField(moduleExportList,"renderToDOM"),applyDecorators:getSingletonField(moduleExportList,"applyDecorators"),runStep:composeStepRunners(stepRunners)}}var globalProjectAnnotations={};function extractAnnotation(annotation){return "default"in annotation?annotation.default:annotation}function setProjectAnnotations(projectAnnotations){let annotations=Array.isArray(projectAnnotations)?projectAnnotations:[projectAnnotations];globalProjectAnnotations=composeConfigs(annotations.map(extractAnnotation));}function composeStory(storyAnnotations,componentAnnotations,projectAnnotations,defaultConfig,exportsName){if(storyAnnotations===void 0)throw new Error("Expected a story but received undefined.");componentAnnotations.title=componentAnnotations.title??
|
|
46
|
+
`),{name:"other",value:"cyclic object"}):(visited.add(value),Array.isArray(value)?{name:"array",value:value.length>0?inferType(value[0],name,new Set(visited)):{name:"other",value:"unknown"}}:{name:"object",value:mapValues2(value,field=>inferType(field,name,new Set(visited)))}):{name:"object",value:{}}},inferArgTypes=context=>{let{id,argTypes:userArgTypes={},initialArgs={}}=context,argTypes=mapValues2(initialArgs,(arg,key)=>({name:key,type:inferType(arg,`${id}.${key}`,new Set)})),userArgTypesNames=mapValues2(userArgTypes,(argType,key)=>({name:key}));return combineParameters(argTypes,userArgTypesNames,userArgTypes)};inferArgTypes.secondPass=!0;var matches=(name,descriptor)=>Array.isArray(descriptor)?descriptor.includes(name):name.match(descriptor),filterArgTypes=(argTypes,include,exclude)=>!include&&!exclude?argTypes:argTypes&&pickBy(argTypes,(argType,key)=>{let name=argType.name||key;return (!include||matches(name,include))&&(!exclude||!matches(name,exclude))});var inferControl=(argType,name,matchers)=>{let{type,options}=argType;if(type){if(matchers.color&&matchers.color.test(name)){let controlType=type.name;if(controlType==="string")return {control:{type:"color"}};controlType!=="enum"&&logger.warn(`Addon controls: Control of type color only supports string, received "${controlType}" instead`);}if(matchers.date&&matchers.date.test(name))return {control:{type:"date"}};switch(type.name){case"array":return {control:{type:"object"}};case"boolean":return {control:{type:"boolean"}};case"string":return {control:{type:"text"}};case"number":return {control:{type:"number"}};case"enum":{let{value}=type;return {control:{type:value?.length<=5?"radio":"select"},options:value}}case"function":case"symbol":return null;default:return {control:{type:options?"select":"object"}}}}},inferControls=context=>{let{argTypes,parameters:{__isArgsStory,controls:{include=null,exclude=null,matchers={}}={}}}=context;if(!__isArgsStory)return argTypes;let filteredArgTypes=filterArgTypes(argTypes,include,exclude),withControls=mapValues2(filteredArgTypes,(argType,name)=>argType?.type&&inferControl(argType,name,matchers));return combineParameters(withControls,filteredArgTypes)};inferControls.secondPass=!0;function normalizeProjectAnnotations({argTypes,globalTypes,argTypesEnhancers,decorators,loaders,beforeEach,...annotations}){return {...argTypes&&{argTypes:normalizeInputTypes(argTypes)},...globalTypes&&{globalTypes:normalizeInputTypes(globalTypes)},decorators:normalizeArrays(decorators),loaders:normalizeArrays(loaders),beforeEach:normalizeArrays(beforeEach),argTypesEnhancers:[...argTypesEnhancers||[],inferArgTypes,inferControls],...annotations}}function composeStepRunners(stepRunners){return async(label,play,playContext)=>{await stepRunners.reduceRight((innerPlay,stepRunner)=>async()=>stepRunner(label,innerPlay,playContext),async()=>play(playContext))();}}function getField(moduleExportList,field){return moduleExportList.map(xs=>xs.default?.[field]??xs[field]).filter(Boolean)}function getArrayField(moduleExportList,field,options={}){return getField(moduleExportList,field).reduce((prev,cur)=>{let normalized=normalizeArrays(cur);return options.reverseFileOrder?[...normalized,...prev]:[...prev,...normalized]},[])}function getObjectField(moduleExportList,field){return Object.assign({},...getField(moduleExportList,field))}function getSingletonField(moduleExportList,field){return getField(moduleExportList,field).pop()}function composeConfigs(moduleExportList){let allArgTypeEnhancers=getArrayField(moduleExportList,"argTypesEnhancers"),stepRunners=getField(moduleExportList,"runStep");return {parameters:combineParameters(...getField(moduleExportList,"parameters")),decorators:getArrayField(moduleExportList,"decorators",{reverseFileOrder:!(global.FEATURES?.legacyDecoratorFileOrder??!1)}),args:getObjectField(moduleExportList,"args"),argsEnhancers:getArrayField(moduleExportList,"argsEnhancers"),argTypes:getObjectField(moduleExportList,"argTypes"),argTypesEnhancers:[...allArgTypeEnhancers.filter(e=>!e.secondPass),...allArgTypeEnhancers.filter(e=>e.secondPass)],globals:getObjectField(moduleExportList,"globals"),globalTypes:getObjectField(moduleExportList,"globalTypes"),loaders:getArrayField(moduleExportList,"loaders"),beforeEach:getArrayField(moduleExportList,"beforeEach"),render:getSingletonField(moduleExportList,"render"),renderToCanvas:getSingletonField(moduleExportList,"renderToCanvas"),renderToDOM:getSingletonField(moduleExportList,"renderToDOM"),applyDecorators:getSingletonField(moduleExportList,"applyDecorators"),runStep:composeStepRunners(stepRunners),tags:getArrayField(moduleExportList,"tags")}}var globalProjectAnnotations={},DEFAULT_STORY_TITLE="ComposedStory",DEFAULT_STORY_NAME="Unnamed Story";function extractAnnotation(annotation){return "default"in annotation?annotation.default:annotation}function setProjectAnnotations(projectAnnotations){let annotations=Array.isArray(projectAnnotations)?projectAnnotations:[projectAnnotations];globalProjectAnnotations=composeConfigs(annotations.map(extractAnnotation));}var cleanups=[];function composeStory(storyAnnotations,componentAnnotations,projectAnnotations,defaultConfig,exportsName){if(storyAnnotations===void 0)throw new Error("Expected a story but received undefined.");componentAnnotations.title=componentAnnotations.title??DEFAULT_STORY_TITLE;let normalizedComponentAnnotations=normalizeComponentAnnotations(componentAnnotations),storyName=exportsName||storyAnnotations.storyName||storyAnnotations.story?.name||storyAnnotations.name||DEFAULT_STORY_NAME,normalizedStory=normalizeStory(storyName,storyAnnotations,normalizedComponentAnnotations),normalizedProjectAnnotations=normalizeProjectAnnotations(composeConfigs([defaultConfig??{},globalProjectAnnotations,projectAnnotations??{}])),story=prepareStory(normalizedStory,normalizedComponentAnnotations,normalizedProjectAnnotations),globalsFromGlobalTypes=getValuesFromArgTypes(normalizedProjectAnnotations.globalTypes),context={hooks:new HooksContext,globals:{...globalsFromGlobalTypes,...normalizedProjectAnnotations.globals},args:{...story.initialArgs},viewMode:"story",loaded:{},abortSignal:null,canvasElement:null,...story},playFunction=story.playFunction?async extraContext=>story.playFunction({...context,...extraContext,canvasElement:extraContext?.canvasElement??globalThis.document?.body}):void 0,previousCleanupsDone=!1;return Object.assign(function(extraArgs){if(context.args={...context.initialArgs,...extraArgs},cleanups.length>0&&!previousCleanupsDone){let humanReadableIdentifier=storyName;story.title!==DEFAULT_STORY_TITLE&&(humanReadableIdentifier=`${story.title} - ${humanReadableIdentifier}`),storyName===DEFAULT_STORY_NAME&&Object.keys(context.args).length>0&&(humanReadableIdentifier=`${humanReadableIdentifier} (${Object.keys(context.args).join(", ")})`),console.warn(dedent5`Some stories were not cleaned up before rendering '${humanReadableIdentifier}'.
|
|
47
|
+
|
|
48
|
+
You should load the story with \`await Story.load()\` before rendering it.`);}return story.unboundStoryFn(prepareContext(context))},{id:story.id,storyName,load:async()=>{for(let{callback}of [...cleanups].reverse())await callback();cleanups.length=0,previousCleanupsDone=!0;let loadedContext=await story.applyLoaders(context);context.loaded=loadedContext.loaded,cleanups.push(...(await story.applyBeforeEach(context)).filter(Boolean).map(callback=>({storyName,callback})));},args:story.initialArgs,parameters:story.parameters,argTypes:story.argTypes,play:playFunction})}function composeStories(storiesImport,globalConfig,composeStoryFn){let{default:meta,__esModule,__namedExportsOrder,...stories}=storiesImport;return Object.entries(stories).reduce((storiesMap,[exportsName,story])=>isExportStory(exportsName,meta)?Object.assign(storiesMap,{[exportsName]:composeStoryFn(story,meta,globalConfig,exportsName)}):storiesMap,{})}function createPlaywrightTest(baseTest){return baseTest.extend({mount:async({mount,page},use)=>{await use(async(storyRef,...restArgs)=>{if(!("__pw_type"in storyRef)||"__pw_type"in storyRef&&storyRef.__pw_type!=="jsx")throw new Error(dedent5`
|
|
43
49
|
Portable stories in Playwright CT only work when referencing JSX elements.
|
|
44
50
|
Please use JSX format for your components such as:
|
|
45
51
|
|
|
@@ -50,7 +56,7 @@ See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#hoisted-csf-
|
|
|
50
56
|
await mount(<MyComponent foo="bar"/>)
|
|
51
57
|
|
|
52
58
|
More info: https://storybook.js.org/docs/api/portable-stories-playwright
|
|
53
|
-
`);await page.evaluate(async wrappedStoryRef=>{let unwrappedStoryRef=await globalThis.__pwUnwrapObject?.(wrappedStoryRef);return ("__pw_type"in unwrappedStoryRef?unwrappedStoryRef.type:unwrappedStoryRef)?.load?.()},storyRef);let mountResult=await mount(storyRef,...restArgs);return await page.evaluate(async wrappedStoryRef=>{let unwrappedStoryRef=await globalThis.__pwUnwrapObject?.(wrappedStoryRef),story="__pw_type"in unwrappedStoryRef?unwrappedStoryRef.type:unwrappedStoryRef,canvasElement=document.querySelector("#root");return story?.play?.({canvasElement})},storyRef),mountResult});}})}var CSF_CACHE_SIZE=1e3,STORY_CACHE_SIZE=1e4,StoryStore=class{constructor(storyIndex,importFn,projectAnnotations){this.importFn=importFn;this.getStoriesJsonData=()=>{let value=this.getSetStoriesPayload(),allowedParameters=["fileName","docsOnly","framework","__id","__isArgsStory"];return {v:3,stories:mapValues2(value.stories,story=>{let{importPath}=this.storyIndex.entries[story.id];return {...pick(story,["id","name","title"]),importPath,kind:story.title,story:story.name,parameters:{...pick(story.parameters,allowedParameters),fileName:importPath}}})}};this.storyIndex=new StoryIndexStore(storyIndex),this.projectAnnotations=normalizeProjectAnnotations(projectAnnotations);let{globals,globalTypes}=projectAnnotations;this.args=new ArgsStore,this.globals=new GlobalsStore({globals,globalTypes}),this.hooks={},this.processCSFFileWithCache=memoize2(CSF_CACHE_SIZE)(processCSFFile),this.prepareMetaWithCache=memoize2(CSF_CACHE_SIZE)(prepareMeta),this.prepareStoryWithCache=memoize2(STORY_CACHE_SIZE)(prepareStory);}setProjectAnnotations(projectAnnotations){this.projectAnnotations=normalizeProjectAnnotations(projectAnnotations);let{globals,globalTypes}=projectAnnotations;this.globals.set({globals,globalTypes});}async onStoriesChanged({importFn,storyIndex}){importFn&&(this.importFn=importFn),storyIndex&&(this.storyIndex.entries=storyIndex.entries),this.cachedCSFFiles&&await this.cacheAllCSFFiles();}async storyIdToEntry(storyId){return this.storyIndex.storyIdToEntry(storyId)}async loadCSFFileByStoryId(storyId){let{importPath,title}=this.storyIndex.storyIdToEntry(storyId),moduleExports=await this.importFn(importPath);return this.processCSFFileWithCache(moduleExports,importPath,title)}async loadAllCSFFiles(){let importPaths={};return Object.entries(this.storyIndex.entries).forEach(([storyId,{importPath}])=>{importPaths[importPath]=storyId;}),(await Promise.all(Object.entries(importPaths).map(async([importPath,storyId])=>({importPath,csfFile:await this.loadCSFFileByStoryId(storyId)})))).reduce((acc,{importPath,csfFile})=>(acc[importPath]=csfFile,acc),{})}async cacheAllCSFFiles(){this.cachedCSFFiles=await this.loadAllCSFFiles();}preparedMetaFromCSFFile({csfFile}){let componentAnnotations=csfFile.meta;return this.prepareMetaWithCache(componentAnnotations,this.projectAnnotations,csfFile.moduleExports.default)}async loadStory({storyId}){let csfFile=await this.loadCSFFileByStoryId(storyId);return this.storyFromCSFFile({storyId,csfFile})}storyFromCSFFile({storyId,csfFile}){let storyAnnotations=csfFile.stories[storyId];if(!storyAnnotations)throw new MissingStoryFromCsfFileError({storyId});let componentAnnotations=csfFile.meta,story=this.prepareStoryWithCache(storyAnnotations,componentAnnotations,this.projectAnnotations);return this.args.setInitial(story),this.hooks[story.id]=this.hooks[story.id]||new HooksContext,story}componentStoriesFromCSFFile({csfFile}){return Object.keys(this.storyIndex.entries).filter(storyId=>!!csfFile.stories[storyId]).map(storyId=>this.storyFromCSFFile({storyId,csfFile}))}async loadEntry(id){let entry=await this.storyIdToEntry(id),storyImports=entry.type==="docs"?entry.storiesImports:[],[entryExports,...csfFiles]=await Promise.all([this.importFn(entry.importPath),...storyImports.map(storyImportPath=>{let firstStoryEntry=this.storyIndex.importPathToEntry(storyImportPath);return this.loadCSFFileByStoryId(firstStoryEntry.id)})]);return {entryExports,csfFiles}}getStoryContext(story,{forceInitialArgs=!1}={}){return prepareContext({...story,args:forceInitialArgs?story.initialArgs:this.args.get(story.id),globals:this.globals.get(),hooks:this.hooks[story.id]})}cleanupStory(story){this.hooks[story.id].clean();}extract(options={includeDocsOnly:!1}){let{cachedCSFFiles}=this;if(!cachedCSFFiles)throw new CalledExtractOnStoreError;return Object.entries(this.storyIndex.entries).reduce((acc,[storyId,{type,importPath}])=>{if(type==="docs")return acc;let csfFile=cachedCSFFiles[importPath],story=this.storyFromCSFFile({storyId,csfFile});return !options.includeDocsOnly&&story.parameters.docsOnly||(acc[storyId]=Object.entries(story).reduce((storyAcc,[key,value])=>key==="moduleExport"||typeof value=="function"?storyAcc:Array.isArray(value)?Object.assign(storyAcc,{[key]:value.slice().sort()}):Object.assign(storyAcc,{[key]:value}),{args:story.initialArgs})),acc},{})}getSetStoriesPayload(){let stories=this.extract({includeDocsOnly:!0}),kindParameters=Object.values(stories).reduce((acc,{title})=>(acc[title]={},acc),{});return {v:2,globals:this.globals.get(),globalParameters:{},kindParameters,stories}}raw(){return deprecate$1("StoryStore.raw() is deprecated and will be removed in 9.0, please use extract() instead"),Object.values(this.extract()).map(({id})=>this.fromId(id)).filter(Boolean)}fromId(storyId){if(deprecate$1("StoryStore.fromId() is deprecated and will be removed in 9.0, please use loadStory() instead"),!this.cachedCSFFiles)throw new Error("Cannot call fromId/raw() unless you call cacheAllCSFFiles() first.");let importPath;try{({importPath}=this.storyIndex.storyIdToEntry(storyId));}catch{return null}let csfFile=this.cachedCSFFiles[importPath],story=this.storyFromCSFFile({storyId,csfFile});return {...story,storyFn:update=>{let context={...this.getStoryContext(story),viewMode:"story"};return story.unboundStoryFn({...context,...update})}}}};function slash(path){return path.startsWith("\\\\?\\")?path:path.replace(/\\/g,"/")}var sanitize2=parts=>{if(parts.length===0)return parts;let last=parts[parts.length-1],lastStripped=last?.replace(/(?:[.](?:story|stories))?([.][^.]+)$/i,"");if(parts.length===1)return [lastStripped];let nextToLast=parts[parts.length-2];return lastStripped&&nextToLast&&lastStripped.toLowerCase()===nextToLast.toLowerCase()?[...parts.slice(0,-2),lastStripped]:lastStripped&&(/^(story|stories)([.][^.]+)$/i.test(last)||/^index$/i.test(lastStripped))?parts.slice(0,-1):[...parts.slice(0,-1),lastStripped]};function pathJoin(paths){return paths.flatMap(p=>p.split("/")).filter(Boolean).join("/")}var userOrAutoTitleFromSpecifier=(fileName,entry,userTitle)=>{let{directory,importPathMatcher,titlePrefix=""}=entry||{};typeof fileName=="number"&&once.warn(dedent`
|
|
59
|
+
`);await page.evaluate(async wrappedStoryRef=>{let unwrappedStoryRef=await globalThis.__pwUnwrapObject?.(wrappedStoryRef);return ("__pw_type"in unwrappedStoryRef?unwrappedStoryRef.type:unwrappedStoryRef)?.load?.()},storyRef);let mountResult=await mount(storyRef,...restArgs);return await page.evaluate(async wrappedStoryRef=>{let unwrappedStoryRef=await globalThis.__pwUnwrapObject?.(wrappedStoryRef),story="__pw_type"in unwrappedStoryRef?unwrappedStoryRef.type:unwrappedStoryRef,canvasElement=document.querySelector("#root");return story?.play?.({canvasElement})},storyRef),mountResult});}})}var CSF_CACHE_SIZE=1e3,STORY_CACHE_SIZE=1e4,StoryStore=class{constructor(storyIndex,importFn,projectAnnotations){this.importFn=importFn;this.getStoriesJsonData=()=>{let value=this.getSetStoriesPayload(),allowedParameters=["fileName","docsOnly","framework","__id","__isArgsStory"];return {v:3,stories:mapValues2(value.stories,story=>{let{importPath}=this.storyIndex.entries[story.id];return {...pick(story,["id","name","title"]),importPath,kind:story.title,story:story.name,parameters:{...pick(story.parameters,allowedParameters),fileName:importPath}}})}};this.storyIndex=new StoryIndexStore(storyIndex),this.projectAnnotations=normalizeProjectAnnotations(projectAnnotations);let{globals,globalTypes}=projectAnnotations;this.args=new ArgsStore,this.globals=new GlobalsStore({globals,globalTypes}),this.hooks={},this.cleanupCallbacks={},this.processCSFFileWithCache=memoize2(CSF_CACHE_SIZE)(processCSFFile),this.prepareMetaWithCache=memoize2(CSF_CACHE_SIZE)(prepareMeta),this.prepareStoryWithCache=memoize2(STORY_CACHE_SIZE)(prepareStory);}setProjectAnnotations(projectAnnotations){this.projectAnnotations=normalizeProjectAnnotations(projectAnnotations);let{globals,globalTypes}=projectAnnotations;this.globals.set({globals,globalTypes});}async onStoriesChanged({importFn,storyIndex}){importFn&&(this.importFn=importFn),storyIndex&&(this.storyIndex.entries=storyIndex.entries),this.cachedCSFFiles&&await this.cacheAllCSFFiles();}async storyIdToEntry(storyId){return this.storyIndex.storyIdToEntry(storyId)}async loadCSFFileByStoryId(storyId){let{importPath,title}=this.storyIndex.storyIdToEntry(storyId),moduleExports=await this.importFn(importPath);return this.processCSFFileWithCache(moduleExports,importPath,title)}async loadAllCSFFiles(){let importPaths={};return Object.entries(this.storyIndex.entries).forEach(([storyId,{importPath}])=>{importPaths[importPath]=storyId;}),(await Promise.all(Object.entries(importPaths).map(async([importPath,storyId])=>({importPath,csfFile:await this.loadCSFFileByStoryId(storyId)})))).reduce((acc,{importPath,csfFile})=>(acc[importPath]=csfFile,acc),{})}async cacheAllCSFFiles(){this.cachedCSFFiles=await this.loadAllCSFFiles();}preparedMetaFromCSFFile({csfFile}){let componentAnnotations=csfFile.meta;return this.prepareMetaWithCache(componentAnnotations,this.projectAnnotations,csfFile.moduleExports.default)}async loadStory({storyId}){let csfFile=await this.loadCSFFileByStoryId(storyId);return this.storyFromCSFFile({storyId,csfFile})}storyFromCSFFile({storyId,csfFile}){let storyAnnotations=csfFile.stories[storyId];if(!storyAnnotations)throw new MissingStoryFromCsfFileError({storyId});let componentAnnotations=csfFile.meta,story=this.prepareStoryWithCache(storyAnnotations,componentAnnotations,this.projectAnnotations);return this.args.setInitial(story),this.hooks[story.id]=this.hooks[story.id]||new HooksContext,story}componentStoriesFromCSFFile({csfFile}){return Object.keys(this.storyIndex.entries).filter(storyId=>!!csfFile.stories[storyId]).map(storyId=>this.storyFromCSFFile({storyId,csfFile}))}async loadEntry(id){let entry=await this.storyIdToEntry(id),storyImports=entry.type==="docs"?entry.storiesImports:[],[entryExports,...csfFiles]=await Promise.all([this.importFn(entry.importPath),...storyImports.map(storyImportPath=>{let firstStoryEntry=this.storyIndex.importPathToEntry(storyImportPath);return this.loadCSFFileByStoryId(firstStoryEntry.id)})]);return {entryExports,csfFiles}}getStoryContext(story,{forceInitialArgs=!1}={}){return prepareContext({...story,args:forceInitialArgs?story.initialArgs:this.args.get(story.id),globals:this.globals.get(),hooks:this.hooks[story.id]})}addCleanupCallbacks(story,callbacks){this.cleanupCallbacks[story.id]=callbacks;}async cleanupStory(story){this.hooks[story.id].clean();let callbacks=this.cleanupCallbacks[story.id];if(callbacks)for(let callback of [...callbacks].reverse())await callback();delete this.cleanupCallbacks[story.id];}extract(options={includeDocsOnly:!1}){let{cachedCSFFiles}=this;if(!cachedCSFFiles)throw new CalledExtractOnStoreError;return Object.entries(this.storyIndex.entries).reduce((acc,[storyId,{type,importPath}])=>{if(type==="docs")return acc;let csfFile=cachedCSFFiles[importPath],story=this.storyFromCSFFile({storyId,csfFile});return !options.includeDocsOnly&&story.parameters.docsOnly||(acc[storyId]=Object.entries(story).reduce((storyAcc,[key,value])=>key==="moduleExport"||typeof value=="function"?storyAcc:Array.isArray(value)?Object.assign(storyAcc,{[key]:value.slice().sort()}):Object.assign(storyAcc,{[key]:value}),{args:story.initialArgs})),acc},{})}getSetStoriesPayload(){let stories=this.extract({includeDocsOnly:!0}),kindParameters=Object.values(stories).reduce((acc,{title})=>(acc[title]={},acc),{});return {v:2,globals:this.globals.get(),globalParameters:{},kindParameters,stories}}raw(){return deprecate$1("StoryStore.raw() is deprecated and will be removed in 9.0, please use extract() instead"),Object.values(this.extract()).map(({id})=>this.fromId(id)).filter(Boolean)}fromId(storyId){if(deprecate$1("StoryStore.fromId() is deprecated and will be removed in 9.0, please use loadStory() instead"),!this.cachedCSFFiles)throw new Error("Cannot call fromId/raw() unless you call cacheAllCSFFiles() first.");let importPath;try{({importPath}=this.storyIndex.storyIdToEntry(storyId));}catch{return null}let csfFile=this.cachedCSFFiles[importPath],story=this.storyFromCSFFile({storyId,csfFile});return {...story,storyFn:update=>{let context={...this.getStoryContext(story),viewMode:"story"};return story.unboundStoryFn({...context,...update})}}}};function slash(path){return path.startsWith("\\\\?\\")?path:path.replace(/\\/g,"/")}var sanitize2=parts=>{if(parts.length===0)return parts;let last=parts[parts.length-1],lastStripped=last?.replace(/(?:[.](?:story|stories))?([.][^.]+)$/i,"");if(parts.length===1)return [lastStripped];let nextToLast=parts[parts.length-2];return lastStripped&&nextToLast&&lastStripped.toLowerCase()===nextToLast.toLowerCase()?[...parts.slice(0,-2),lastStripped]:lastStripped&&(/^(story|stories)([.][^.]+)$/i.test(last)||/^index$/i.test(lastStripped))?parts.slice(0,-1):[...parts.slice(0,-1),lastStripped]};function pathJoin(paths){return paths.flatMap(p=>p.split("/")).filter(Boolean).join("/")}var userOrAutoTitleFromSpecifier=(fileName,entry,userTitle)=>{let{directory,importPathMatcher,titlePrefix=""}=entry||{};typeof fileName=="number"&&once.warn(dedent`
|
|
54
60
|
CSF Auto-title received a numeric fileName. This typically happens when
|
|
55
61
|
webpack is mis-configured in production mode. To force webpack to produce
|
|
56
62
|
filenames, set optimization.moduleIds = "named" in your webpack config.
|
|
@@ -62,10 +68,10 @@ See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#hoisted-csf-
|
|
|
62
68
|
Are you using a V6-style sort function in V7 mode?
|
|
63
69
|
|
|
64
70
|
More info: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#v7-style-story-sort
|
|
65
|
-
`)}};var PREPARE_ABORTED=new Error("prepareAborted");var{AbortController}=globalThis;function serializeError(error){try{let{name="Error",message=String(error),stack}=error;return {name,message,stack}}catch{return {name:"Error",message:String(error)}}}var StoryRender=class{constructor(channel,store,renderToScreen,callbacks,id,viewMode,renderOptions={autoplay:!0,forceInitialArgs:!1},story){this.channel=channel;this.store=store;this.renderToScreen=renderToScreen;this.callbacks=callbacks;this.id=id;this.viewMode=viewMode;this.renderOptions=renderOptions;this.type="story";this.notYetRendered=!0;this.disableKeyListeners=!1;this.teardownRender=()=>{};this.torndown=!1;this.abortController=new AbortController,story&&(this.story=story,this.phase="preparing");}async runPhase(signal,phase,phaseFn){this.phase=phase,this.channel.emit(STORY_RENDER_PHASE_CHANGED,{newPhase:this.phase,storyId:this.id}),phaseFn&&await phaseFn(),signal.aborted&&(this.phase="aborted",this.channel.emit(STORY_RENDER_PHASE_CHANGED,{newPhase:this.phase,storyId:this.id}));}async prepare(){if(await this.runPhase(this.abortController.signal,"preparing",async()=>{this.story=await this.store.loadStory({storyId:this.id});}),this.abortController.signal.aborted)throw this.store.cleanupStory(this.story),PREPARE_ABORTED}isEqual(other){return !!(this.id===other.id&&this.story&&this.story===other.story)}isPreparing(){return ["preparing"].includes(this.phase)}isPending(){return ["rendering","playing"].includes(this.phase)}async renderToElement(canvasElement){return this.canvasElement=canvasElement,this.render({initial:!0,forceRemount:!0})}storyContext(){if(!this.story)throw new Error("Cannot call storyContext before preparing");let{forceInitialArgs}=this.renderOptions;return this.store.getStoryContext(this.story,{forceInitialArgs})}async render({initial=!1,forceRemount=!1}={}){let{canvasElement}=this;if(!this.story)throw new Error("cannot render when not prepared");if(!canvasElement)throw new Error("cannot render when canvasElement is unset");let{id,componentId,title,name,tags,applyLoaders,unboundStoryFn,playFunction}=this.story;forceRemount&&!initial&&(this.cancelRender(),this.abortController=new AbortController);let abortSignal=this.abortController.signal;try{let loadedContext;if(await this.runPhase(abortSignal,"loading",async()=>{loadedContext=await applyLoaders({...this.storyContext(),viewMode:this.viewMode});}),abortSignal.aborted)return;let renderStoryContext={...loadedContext,...this.storyContext(),abortSignal,canvasElement},renderContext={componentId,title,kind:title,id,name,story:name,tags,...this.callbacks,showError:error=>(this.phase="errored",this.callbacks.showError(error)),showException:error=>(this.phase="errored",this.callbacks.showException(error)),forceRemount:forceRemount||this.notYetRendered,storyContext:renderStoryContext,storyFn:()=>unboundStoryFn(renderStoryContext),unboundStoryFn};if(await this.runPhase(abortSignal,"rendering",async()=>{let teardown=await this.renderToScreen(renderContext,canvasElement);this.teardownRender=teardown||(()=>{});}),this.notYetRendered=!1,abortSignal.aborted)return;let ignoreUnhandledErrors=this.story.parameters?.test?.dangerouslyIgnoreUnhandledErrors===!0,unhandledErrors=new Set,onError=event=>unhandledErrors.add("error"in event?event.error:event.reason);if(this.renderOptions.autoplay&&forceRemount&&playFunction&&this.phase!=="errored"){window.addEventListener("error",onError),window.addEventListener("unhandledrejection",onError),this.disableKeyListeners=!0;try{await this.runPhase(abortSignal,"playing",async()=>{await playFunction(renderContext.storyContext);}),!ignoreUnhandledErrors&&unhandledErrors.size>0?await this.runPhase(abortSignal,"errored"):await this.runPhase(abortSignal,"played");}catch(error){if(await this.runPhase(abortSignal,"errored",async()=>{this.channel.emit(PLAY_FUNCTION_THREW_EXCEPTION,serializeError(error));}),this.story.parameters.throwPlayFunctionExceptions!==!1)throw error;console.error(error);}if(!ignoreUnhandledErrors&&unhandledErrors.size>0&&this.channel.emit(UNHANDLED_ERRORS_WHILE_PLAYING,Array.from(unhandledErrors).map(serializeError)),this.disableKeyListeners=!1,window.removeEventListener("unhandledrejection",onError),window.removeEventListener("error",onError),abortSignal.aborted)return}await this.runPhase(abortSignal,"completed",async()=>this.channel.emit(STORY_RENDERED,id));}catch(err){this.phase="errored",this.callbacks.showException(err);}}async rerender(){return this.render()}async remount(){return this.render({forceRemount:!0})}cancelRender(){this.abortController?.abort();}async teardown(){this.torndown=!0,this.cancelRender(),this.story&&this.store.cleanupStory(this.story);for(let i=0;i<3;i+=1){if(!this.isPending()){await this.teardownRender();return}await new Promise(resolve=>setTimeout(resolve,0));}window.location.reload(),await new Promise(()=>{});}};var {fetch}=global,STORY_INDEX_PATH="./index.json",Preview=class{constructor(importFn,getProjectAnnotations,channel=addons.getChannel(),shouldInitialize=!0){this.importFn=importFn;this.getProjectAnnotations=getProjectAnnotations;this.channel=channel;this.storyRenders=[];this.storeInitializationPromise=new Promise((resolve,reject)=>{this.resolveStoreInitializationPromise=resolve,this.rejectStoreInitializationPromise=reject;}),shouldInitialize&&this.initialize();}get storyStore(){return new Proxy({},{get:(_,method)=>{if(this.storyStoreValue)return deprecate$1("Accessing the Story Store is deprecated and will be removed in 9.0"),this.storyStoreValue[method];throw new StoryStoreAccessedBeforeInitializationError}})}async initialize(){this.setupListeners();try{let projectAnnotations=await this.getProjectAnnotationsOrRenderError();await this.initializeWithProjectAnnotations(projectAnnotations);}catch(err){this.rejectStoreInitializationPromise(err);}}ready(){return this.storeInitializationPromise}setupListeners(){this.channel.on(STORY_INDEX_INVALIDATED,this.onStoryIndexChanged.bind(this)),this.channel.on(UPDATE_GLOBALS,this.onUpdateGlobals.bind(this)),this.channel.on(UPDATE_STORY_ARGS,this.onUpdateArgs.bind(this)),this.channel.on(RESET_STORY_ARGS,this.onResetArgs.bind(this)),this.channel.on(FORCE_RE_RENDER,this.onForceReRender.bind(this)),this.channel.on(FORCE_REMOUNT,this.onForceRemount.bind(this));}async getProjectAnnotationsOrRenderError(){try{let projectAnnotations=await this.getProjectAnnotations();if(this.renderToCanvas=projectAnnotations.renderToCanvas,!this.renderToCanvas)throw new MissingRenderToCanvasError;return projectAnnotations}catch(err){throw this.renderPreviewEntryError("Error reading preview.js:",err),err}}async initializeWithProjectAnnotations(projectAnnotations){this.projectAnnotationsBeforeInitialization=projectAnnotations;try{let storyIndex=await this.getStoryIndexFromServer();return this.initializeWithStoryIndex(storyIndex)}catch(err){throw this.renderPreviewEntryError("Error loading story index:",err),err}}async getStoryIndexFromServer(){let result=await fetch(STORY_INDEX_PATH);if(result.status===200)return result.json();throw new StoryIndexFetchError({text:await result.text()})}initializeWithStoryIndex(storyIndex){if(!this.projectAnnotationsBeforeInitialization)throw new Error("Cannot call initializeWithStoryIndex until project annotations resolve");this.storyStoreValue=new StoryStore(storyIndex,this.importFn,this.projectAnnotationsBeforeInitialization),delete this.projectAnnotationsBeforeInitialization,this.setInitialGlobals(),this.resolveStoreInitializationPromise();}async setInitialGlobals(){this.emitGlobals();}emitGlobals(){if(!this.storyStoreValue)throw new CalledPreviewMethodBeforeInitializationError({methodName:"emitGlobals"});let payload={globals:this.storyStoreValue.globals.get()||{},globalTypes:this.storyStoreValue.projectAnnotations.globalTypes||{}};this.channel.emit(SET_GLOBALS,payload);}async onGetProjectAnnotationsChanged({getProjectAnnotations}){delete this.previewEntryError,this.getProjectAnnotations=getProjectAnnotations;let projectAnnotations=await this.getProjectAnnotationsOrRenderError();if(!this.storyStoreValue){await this.initializeWithProjectAnnotations(projectAnnotations);return}this.storyStoreValue.setProjectAnnotations(projectAnnotations),this.emitGlobals();}async onStoryIndexChanged(){if(delete this.previewEntryError,!(!this.storyStoreValue&&!this.projectAnnotationsBeforeInitialization))try{let storyIndex=await this.getStoryIndexFromServer();if(this.projectAnnotationsBeforeInitialization){this.initializeWithStoryIndex(storyIndex);return}await this.onStoriesChanged({storyIndex});}catch(err){throw this.renderPreviewEntryError("Error loading story index:",err),err}}async onStoriesChanged({importFn,storyIndex}){if(!this.storyStoreValue)throw new CalledPreviewMethodBeforeInitializationError({methodName:"onStoriesChanged"});await this.storyStoreValue.onStoriesChanged({importFn,storyIndex});}async onUpdateGlobals({globals}){if(!this.storyStoreValue)throw new CalledPreviewMethodBeforeInitializationError({methodName:"onUpdateGlobals"});this.storyStoreValue.globals.update(globals),await Promise.all(this.storyRenders.map(r=>r.rerender())),this.channel.emit(GLOBALS_UPDATED,{globals:this.storyStoreValue.globals.get(),initialGlobals:this.storyStoreValue.globals.initialGlobals});}async onUpdateArgs({storyId,updatedArgs}){if(!this.storyStoreValue)throw new CalledPreviewMethodBeforeInitializationError({methodName:"onUpdateArgs"});this.storyStoreValue.args.update(storyId,updatedArgs),await Promise.all(this.storyRenders.filter(r=>r.id===storyId&&!r.renderOptions.forceInitialArgs).map(r=>r.rerender())),this.channel.emit(STORY_ARGS_UPDATED,{storyId,args:this.storyStoreValue.args.get(storyId)});}async onResetArgs({storyId,argNames}){if(!this.storyStoreValue)throw new CalledPreviewMethodBeforeInitializationError({methodName:"onResetArgs"});let story=this.storyRenders.find(r=>r.id===storyId)?.story||await this.storyStoreValue.loadStory({storyId}),updatedArgs=(argNames||[...new Set([...Object.keys(story.initialArgs),...Object.keys(this.storyStoreValue.args.get(storyId))])]).reduce((acc,argName)=>(acc[argName]=story.initialArgs[argName],acc),{});await this.onUpdateArgs({storyId,updatedArgs});}async onForceReRender(){await Promise.all(this.storyRenders.map(r=>r.rerender()));}async onForceRemount({storyId}){await Promise.all(this.storyRenders.filter(r=>r.id===storyId).map(r=>r.remount()));}renderStoryToElement(story,element,callbacks,options){if(!this.renderToCanvas||!this.storyStoreValue)throw new CalledPreviewMethodBeforeInitializationError({methodName:"renderStoryToElement"});let render=new StoryRender(this.channel,this.storyStoreValue,this.renderToCanvas,callbacks,story.id,"docs",options,story);return render.renderToElement(element),this.storyRenders.push(render),async()=>{await this.teardownRender(render);}}async teardownRender(render,{viewModeChanged}={}){this.storyRenders=this.storyRenders.filter(r=>r!==render),await render?.teardown?.({viewModeChanged});}async loadStory({storyId}){if(!this.storyStoreValue)throw new CalledPreviewMethodBeforeInitializationError({methodName:"loadStory"});return this.storyStoreValue.loadStory({storyId})}getStoryContext(story,{forceInitialArgs=!1}={}){if(!this.storyStoreValue)throw new CalledPreviewMethodBeforeInitializationError({methodName:"getStoryContext"});return this.storyStoreValue.getStoryContext(story,{forceInitialArgs})}async extract(options){if(!this.storyStoreValue)throw new CalledPreviewMethodBeforeInitializationError({methodName:"extract"});if(this.previewEntryError)throw this.previewEntryError;return await this.storyStoreValue.cacheAllCSFFiles(),this.storyStoreValue.extract(options)}renderPreviewEntryError(reason,err){this.previewEntryError=err,logger.error(reason),logger.error(err),this.channel.emit(CONFIG_ERROR,err);}};var DocsContext=class{constructor(channel,store,renderStoryToElement,csfFiles){this.channel=channel;this.store=store;this.renderStoryToElement=renderStoryToElement;this.storyIdByName=storyName=>{let storyId=this.nameToStoryId.get(storyName);if(storyId)return storyId;throw new Error(`No story found with that name: ${storyName}`)};this.componentStories=()=>this.componentStoriesValue;this.componentStoriesFromCSFFile=csfFile=>this.store.componentStoriesFromCSFFile({csfFile});this.storyById=storyId=>{if(!storyId){if(!this.primaryStory)throw new Error("No primary story defined for docs entry. Did you forget to use `<Meta>`?");return this.primaryStory}let csfFile=this.storyIdToCSFFile.get(storyId);if(!csfFile)throw new Error(`Called \`storyById\` for story that was never loaded: ${storyId}`);return this.store.storyFromCSFFile({storyId,csfFile})};this.getStoryContext=story=>({...this.store.getStoryContext(story),viewMode:"docs"});this.loadStory=id=>this.store.loadStory({storyId:id});this.componentStoriesValue=[],this.storyIdToCSFFile=new Map,this.exportToStory=new Map,this.exportsToCSFFile=new Map,this.nameToStoryId=new Map,this.attachedCSFFiles=new Set,csfFiles.forEach((csfFile,index)=>{this.referenceCSFFile(csfFile);});}referenceCSFFile(csfFile){this.exportsToCSFFile.set(csfFile.moduleExports,csfFile),this.exportsToCSFFile.set(csfFile.moduleExports.default,csfFile),this.store.componentStoriesFromCSFFile({csfFile}).forEach(story=>{let annotation=csfFile.stories[story.id];this.storyIdToCSFFile.set(annotation.id,csfFile),this.exportToStory.set(annotation.moduleExport,story);});}attachCSFFile(csfFile){if(!this.exportsToCSFFile.has(csfFile.moduleExports))throw new Error("Cannot attach a CSF file that has not been referenced");if(this.attachedCSFFiles.has(csfFile))return;this.attachedCSFFiles.add(csfFile),this.store.componentStoriesFromCSFFile({csfFile}).forEach(story=>{this.nameToStoryId.set(story.name,story.id),this.componentStoriesValue.push(story),this.primaryStory||(this.primaryStory=story);});}referenceMeta(metaExports,attach){let resolved=this.resolveModuleExport(metaExports);if(resolved.type!=="meta")throw new Error("<Meta of={} /> must reference a CSF file module export or meta export. Did you mistakenly reference your component instead of your CSF file?");attach&&this.attachCSFFile(resolved.csfFile);}get projectAnnotations(){let{projectAnnotations}=this.store;if(!projectAnnotations)throw new Error("Can't get projectAnnotations from DocsContext before they are initialized");return projectAnnotations}resolveAttachedModuleExportType(moduleExportType){if(moduleExportType==="story"){if(!this.primaryStory)throw new Error("No primary story attached to this docs file, did you forget to use <Meta of={} />?");return {type:"story",story:this.primaryStory}}if(this.attachedCSFFiles.size===0)throw new Error("No CSF file attached to this docs file, did you forget to use <Meta of={} />?");let firstAttachedCSFFile=Array.from(this.attachedCSFFiles)[0];if(moduleExportType==="meta")return {type:"meta",csfFile:firstAttachedCSFFile};let{component}=firstAttachedCSFFile.meta;if(!component)throw new Error("Attached CSF file does not defined a component, did you forget to export one?");return {type:"component",component}}resolveModuleExport(moduleExportOrType){let csfFile=this.exportsToCSFFile.get(moduleExportOrType);if(csfFile)return {type:"meta",csfFile};let story=this.exportToStory.get(moduleExportOrType);return story?{type:"story",story}:{type:"component",component:moduleExportOrType}}resolveOf(moduleExportOrType,validTypes=[]){let resolved;if(["component","meta","story"].includes(moduleExportOrType)){let type=moduleExportOrType;resolved=this.resolveAttachedModuleExportType(type);}else resolved=this.resolveModuleExport(moduleExportOrType);if(validTypes.length&&!validTypes.includes(resolved.type)){let prettyType=resolved.type==="component"?"component or unknown":resolved.type;throw new Error(dedent4`Invalid value passed to the 'of' prop. The value was resolved to a '${prettyType}' type but the only types for this block are: ${validTypes.join(", ")}.
|
|
71
|
+
`)}};var PREPARE_ABORTED=new Error("prepareAborted");var{AbortController}=globalThis;function serializeError(error){try{let{name="Error",message=String(error),stack}=error;return {name,message,stack}}catch{return {name:"Error",message:String(error)}}}var StoryRender=class{constructor(channel,store,renderToScreen,callbacks,id,viewMode,renderOptions={autoplay:!0,forceInitialArgs:!1},story){this.channel=channel;this.store=store;this.renderToScreen=renderToScreen;this.callbacks=callbacks;this.id=id;this.viewMode=viewMode;this.renderOptions=renderOptions;this.type="story";this.notYetRendered=!0;this.rerenderEnqueued=!1;this.disableKeyListeners=!1;this.teardownRender=()=>{};this.torndown=!1;this.abortController=new AbortController,story&&(this.story=story,this.phase="preparing");}async runPhase(signal,phase,phaseFn){this.phase=phase,this.channel.emit(STORY_RENDER_PHASE_CHANGED,{newPhase:this.phase,storyId:this.id}),phaseFn&&await phaseFn(),signal.aborted&&(this.phase="aborted",this.channel.emit(STORY_RENDER_PHASE_CHANGED,{newPhase:this.phase,storyId:this.id}));}async prepare(){if(await this.runPhase(this.abortController.signal,"preparing",async()=>{this.story=await this.store.loadStory({storyId:this.id});}),this.abortController.signal.aborted)throw await this.store.cleanupStory(this.story),PREPARE_ABORTED}isEqual(other){return !!(this.id===other.id&&this.story&&this.story===other.story)}isPreparing(){return ["preparing"].includes(this.phase)}isPending(){return ["loading","beforeEach","rendering","playing"].includes(this.phase)}async renderToElement(canvasElement){return this.canvasElement=canvasElement,this.render({initial:!0,forceRemount:!0})}storyContext(){if(!this.story)throw new Error("Cannot call storyContext before preparing");let{forceInitialArgs}=this.renderOptions;return this.store.getStoryContext(this.story,{forceInitialArgs})}async render({initial=!1,forceRemount=!1}={}){let{canvasElement}=this;if(!this.story)throw new Error("cannot render when not prepared");let story=this.story;if(!canvasElement)throw new Error("cannot render when canvasElement is unset");let{id,componentId,title,name,tags,applyLoaders,applyBeforeEach,unboundStoryFn,playFunction}=story;forceRemount&&!initial&&(this.cancelRender(),this.abortController=new AbortController);let abortSignal=this.abortController.signal;try{let loadedContext;if(await this.runPhase(abortSignal,"loading",async()=>{loadedContext=await applyLoaders({...this.storyContext(),viewMode:this.viewMode,canvasElement});}),abortSignal.aborted)return;let renderStoryContext={...loadedContext,...this.storyContext(),abortSignal,canvasElement};if(await this.runPhase(abortSignal,"beforeEach",async()=>{let cleanupCallbacks=await applyBeforeEach(renderStoryContext);this.store.addCleanupCallbacks(story,cleanupCallbacks);}),abortSignal.aborted)return;let renderContext={componentId,title,kind:title,id,name,story:name,tags,...this.callbacks,showError:error=>(this.phase="errored",this.callbacks.showError(error)),showException:error=>(this.phase="errored",this.callbacks.showException(error)),forceRemount:forceRemount||this.notYetRendered,storyContext:renderStoryContext,storyFn:()=>unboundStoryFn(renderStoryContext),unboundStoryFn};if(await this.runPhase(abortSignal,"rendering",async()=>{let teardown=await this.renderToScreen(renderContext,canvasElement);this.teardownRender=teardown||(()=>{});}),this.notYetRendered=!1,abortSignal.aborted)return;let ignoreUnhandledErrors=this.story.parameters?.test?.dangerouslyIgnoreUnhandledErrors===!0,unhandledErrors=new Set,onError=event=>unhandledErrors.add("error"in event?event.error:event.reason);if(this.renderOptions.autoplay&&forceRemount&&playFunction&&this.phase!=="errored"){window.addEventListener("error",onError),window.addEventListener("unhandledrejection",onError),this.disableKeyListeners=!0;try{await this.runPhase(abortSignal,"playing",async()=>{await playFunction(renderContext.storyContext);}),!ignoreUnhandledErrors&&unhandledErrors.size>0?await this.runPhase(abortSignal,"errored"):await this.runPhase(abortSignal,"played");}catch(error){if(await this.runPhase(abortSignal,"errored",async()=>{this.channel.emit(PLAY_FUNCTION_THREW_EXCEPTION,serializeError(error));}),this.story.parameters.throwPlayFunctionExceptions!==!1)throw error;console.error(error);}if(!ignoreUnhandledErrors&&unhandledErrors.size>0&&this.channel.emit(UNHANDLED_ERRORS_WHILE_PLAYING,Array.from(unhandledErrors).map(serializeError)),this.disableKeyListeners=!1,window.removeEventListener("unhandledrejection",onError),window.removeEventListener("error",onError),abortSignal.aborted)return}await this.runPhase(abortSignal,"completed",async()=>this.channel.emit(STORY_RENDERED,id));}catch(err){this.phase="errored",this.callbacks.showException(err);}this.rerenderEnqueued&&(this.rerenderEnqueued=!1,this.render());}async rerender(){if(this.isPending()&&this.phase!=="playing")this.rerenderEnqueued=!0;else return this.render()}async remount(){return await this.teardown(),this.render({forceRemount:!0})}cancelRender(){this.abortController?.abort();}async teardown(){this.torndown=!0,this.cancelRender(),this.story&&await this.store.cleanupStory(this.story);for(let i=0;i<3;i+=1){if(!this.isPending()){await this.teardownRender();return}await new Promise(resolve=>setTimeout(resolve,0));}window.location.reload(),await new Promise(()=>{});}};var {fetch}=global,STORY_INDEX_PATH="./index.json",Preview=class{constructor(importFn,getProjectAnnotations,channel=addons.getChannel(),shouldInitialize=!0){this.importFn=importFn;this.getProjectAnnotations=getProjectAnnotations;this.channel=channel;this.storyRenders=[];this.storeInitializationPromise=new Promise((resolve,reject)=>{this.resolveStoreInitializationPromise=resolve,this.rejectStoreInitializationPromise=reject;}),shouldInitialize&&this.initialize();}get storyStore(){return new Proxy({},{get:(_,method)=>{if(this.storyStoreValue)return deprecate$1("Accessing the Story Store is deprecated and will be removed in 9.0"),this.storyStoreValue[method];throw new StoryStoreAccessedBeforeInitializationError}})}async initialize(){this.setupListeners();try{let projectAnnotations=await this.getProjectAnnotationsOrRenderError();await this.initializeWithProjectAnnotations(projectAnnotations);}catch(err){this.rejectStoreInitializationPromise(err);}}ready(){return this.storeInitializationPromise}setupListeners(){this.channel.on(STORY_INDEX_INVALIDATED,this.onStoryIndexChanged.bind(this)),this.channel.on(UPDATE_GLOBALS,this.onUpdateGlobals.bind(this)),this.channel.on(UPDATE_STORY_ARGS,this.onUpdateArgs.bind(this)),this.channel.on(ARGTYPES_INFO_REQUEST,this.onRequestArgTypesInfo.bind(this)),this.channel.on(RESET_STORY_ARGS,this.onResetArgs.bind(this)),this.channel.on(FORCE_RE_RENDER,this.onForceReRender.bind(this)),this.channel.on(FORCE_REMOUNT,this.onForceRemount.bind(this));}async getProjectAnnotationsOrRenderError(){try{let projectAnnotations=await this.getProjectAnnotations();if(this.renderToCanvas=projectAnnotations.renderToCanvas,!this.renderToCanvas)throw new MissingRenderToCanvasError;return projectAnnotations}catch(err){throw this.renderPreviewEntryError("Error reading preview.js:",err),err}}async initializeWithProjectAnnotations(projectAnnotations){this.projectAnnotationsBeforeInitialization=projectAnnotations;try{let storyIndex=await this.getStoryIndexFromServer();return this.initializeWithStoryIndex(storyIndex)}catch(err){throw this.renderPreviewEntryError("Error loading story index:",err),err}}async getStoryIndexFromServer(){let result=await fetch(STORY_INDEX_PATH);if(result.status===200)return result.json();throw new StoryIndexFetchError({text:await result.text()})}initializeWithStoryIndex(storyIndex){if(!this.projectAnnotationsBeforeInitialization)throw new Error("Cannot call initializeWithStoryIndex until project annotations resolve");this.storyStoreValue=new StoryStore(storyIndex,this.importFn,this.projectAnnotationsBeforeInitialization),delete this.projectAnnotationsBeforeInitialization,this.setInitialGlobals(),this.resolveStoreInitializationPromise();}async setInitialGlobals(){this.emitGlobals();}emitGlobals(){if(!this.storyStoreValue)throw new CalledPreviewMethodBeforeInitializationError({methodName:"emitGlobals"});let payload={globals:this.storyStoreValue.globals.get()||{},globalTypes:this.storyStoreValue.projectAnnotations.globalTypes||{}};this.channel.emit(SET_GLOBALS,payload);}async onGetProjectAnnotationsChanged({getProjectAnnotations}){delete this.previewEntryError,this.getProjectAnnotations=getProjectAnnotations;let projectAnnotations=await this.getProjectAnnotationsOrRenderError();if(!this.storyStoreValue){await this.initializeWithProjectAnnotations(projectAnnotations);return}this.storyStoreValue.setProjectAnnotations(projectAnnotations),this.emitGlobals();}async onStoryIndexChanged(){if(delete this.previewEntryError,!(!this.storyStoreValue&&!this.projectAnnotationsBeforeInitialization))try{let storyIndex=await this.getStoryIndexFromServer();if(this.projectAnnotationsBeforeInitialization){this.initializeWithStoryIndex(storyIndex);return}await this.onStoriesChanged({storyIndex});}catch(err){throw this.renderPreviewEntryError("Error loading story index:",err),err}}async onStoriesChanged({importFn,storyIndex}){if(!this.storyStoreValue)throw new CalledPreviewMethodBeforeInitializationError({methodName:"onStoriesChanged"});await this.storyStoreValue.onStoriesChanged({importFn,storyIndex});}async onUpdateGlobals({globals}){if(!this.storyStoreValue)throw new CalledPreviewMethodBeforeInitializationError({methodName:"onUpdateGlobals"});this.storyStoreValue.globals.update(globals),await Promise.all(this.storyRenders.map(r=>r.rerender())),this.channel.emit(GLOBALS_UPDATED,{globals:this.storyStoreValue.globals.get(),initialGlobals:this.storyStoreValue.globals.initialGlobals});}async onUpdateArgs({storyId,updatedArgs}){if(!this.storyStoreValue)throw new CalledPreviewMethodBeforeInitializationError({methodName:"onUpdateArgs"});this.storyStoreValue.args.update(storyId,updatedArgs),await Promise.all(this.storyRenders.filter(r=>r.id===storyId&&!r.renderOptions.forceInitialArgs).map(r=>r.rerender())),this.channel.emit(STORY_ARGS_UPDATED,{storyId,args:this.storyStoreValue.args.get(storyId)});}async onRequestArgTypesInfo({id,payload}){try{await this.storeInitializationPromise;let story=await this.storyStoreValue?.loadStory(payload);this.channel.emit(ARGTYPES_INFO_RESPONSE,{id,success:!0,payload:{argTypes:story?.argTypes||{}},error:null});}catch(e){this.channel.emit(ARGTYPES_INFO_RESPONSE,{id,success:!1,error:e?.message});}}async onResetArgs({storyId,argNames}){if(!this.storyStoreValue)throw new CalledPreviewMethodBeforeInitializationError({methodName:"onResetArgs"});let story=this.storyRenders.find(r=>r.id===storyId)?.story||await this.storyStoreValue.loadStory({storyId}),updatedArgs=(argNames||[...new Set([...Object.keys(story.initialArgs),...Object.keys(this.storyStoreValue.args.get(storyId))])]).reduce((acc,argName)=>(acc[argName]=story.initialArgs[argName],acc),{});await this.onUpdateArgs({storyId,updatedArgs});}async onForceReRender(){await Promise.all(this.storyRenders.map(r=>r.rerender()));}async onForceRemount({storyId}){await Promise.all(this.storyRenders.filter(r=>r.id===storyId).map(r=>r.remount()));}renderStoryToElement(story,element,callbacks,options){if(!this.renderToCanvas||!this.storyStoreValue)throw new CalledPreviewMethodBeforeInitializationError({methodName:"renderStoryToElement"});let render=new StoryRender(this.channel,this.storyStoreValue,this.renderToCanvas,callbacks,story.id,"docs",options,story);return render.renderToElement(element),this.storyRenders.push(render),async()=>{await this.teardownRender(render);}}async teardownRender(render,{viewModeChanged}={}){this.storyRenders=this.storyRenders.filter(r=>r!==render),await render?.teardown?.({viewModeChanged});}async loadStory({storyId}){if(!this.storyStoreValue)throw new CalledPreviewMethodBeforeInitializationError({methodName:"loadStory"});return this.storyStoreValue.loadStory({storyId})}getStoryContext(story,{forceInitialArgs=!1}={}){if(!this.storyStoreValue)throw new CalledPreviewMethodBeforeInitializationError({methodName:"getStoryContext"});return this.storyStoreValue.getStoryContext(story,{forceInitialArgs})}async extract(options){if(!this.storyStoreValue)throw new CalledPreviewMethodBeforeInitializationError({methodName:"extract"});if(this.previewEntryError)throw this.previewEntryError;return await this.storyStoreValue.cacheAllCSFFiles(),this.storyStoreValue.extract(options)}renderPreviewEntryError(reason,err){this.previewEntryError=err,logger.error(reason),logger.error(err),this.channel.emit(CONFIG_ERROR,err);}};var DocsContext=class{constructor(channel,store,renderStoryToElement,csfFiles){this.channel=channel;this.store=store;this.renderStoryToElement=renderStoryToElement;this.storyIdByName=storyName=>{let storyId=this.nameToStoryId.get(storyName);if(storyId)return storyId;throw new Error(`No story found with that name: ${storyName}`)};this.componentStories=()=>this.componentStoriesValue;this.componentStoriesFromCSFFile=csfFile=>this.store.componentStoriesFromCSFFile({csfFile});this.storyById=storyId=>{if(!storyId){if(!this.primaryStory)throw new Error("No primary story defined for docs entry. Did you forget to use `<Meta>`?");return this.primaryStory}let csfFile=this.storyIdToCSFFile.get(storyId);if(!csfFile)throw new Error(`Called \`storyById\` for story that was never loaded: ${storyId}`);return this.store.storyFromCSFFile({storyId,csfFile})};this.getStoryContext=story=>({...this.store.getStoryContext(story),viewMode:"docs"});this.loadStory=id=>this.store.loadStory({storyId:id});this.componentStoriesValue=[],this.storyIdToCSFFile=new Map,this.exportToStory=new Map,this.exportsToCSFFile=new Map,this.nameToStoryId=new Map,this.attachedCSFFiles=new Set,csfFiles.forEach((csfFile,index)=>{this.referenceCSFFile(csfFile);});}referenceCSFFile(csfFile){this.exportsToCSFFile.set(csfFile.moduleExports,csfFile),this.exportsToCSFFile.set(csfFile.moduleExports.default,csfFile),this.store.componentStoriesFromCSFFile({csfFile}).forEach(story=>{let annotation=csfFile.stories[story.id];this.storyIdToCSFFile.set(annotation.id,csfFile),this.exportToStory.set(annotation.moduleExport,story);});}attachCSFFile(csfFile){if(!this.exportsToCSFFile.has(csfFile.moduleExports))throw new Error("Cannot attach a CSF file that has not been referenced");if(this.attachedCSFFiles.has(csfFile))return;this.attachedCSFFiles.add(csfFile),this.store.componentStoriesFromCSFFile({csfFile}).forEach(story=>{this.nameToStoryId.set(story.name,story.id),this.componentStoriesValue.push(story),this.primaryStory||(this.primaryStory=story);});}referenceMeta(metaExports,attach){let resolved=this.resolveModuleExport(metaExports);if(resolved.type!=="meta")throw new Error("<Meta of={} /> must reference a CSF file module export or meta export. Did you mistakenly reference your component instead of your CSF file?");attach&&this.attachCSFFile(resolved.csfFile);}get projectAnnotations(){let{projectAnnotations}=this.store;if(!projectAnnotations)throw new Error("Can't get projectAnnotations from DocsContext before they are initialized");return projectAnnotations}resolveAttachedModuleExportType(moduleExportType){if(moduleExportType==="story"){if(!this.primaryStory)throw new Error("No primary story attached to this docs file, did you forget to use <Meta of={} />?");return {type:"story",story:this.primaryStory}}if(this.attachedCSFFiles.size===0)throw new Error("No CSF file attached to this docs file, did you forget to use <Meta of={} />?");let firstAttachedCSFFile=Array.from(this.attachedCSFFiles)[0];if(moduleExportType==="meta")return {type:"meta",csfFile:firstAttachedCSFFile};let{component}=firstAttachedCSFFile.meta;if(!component)throw new Error("Attached CSF file does not defined a component, did you forget to export one?");return {type:"component",component}}resolveModuleExport(moduleExportOrType){let csfFile=this.exportsToCSFFile.get(moduleExportOrType);if(csfFile)return {type:"meta",csfFile};let story=this.exportToStory.get(moduleExportOrType);return story?{type:"story",story}:{type:"component",component:moduleExportOrType}}resolveOf(moduleExportOrType,validTypes=[]){let resolved;if(["component","meta","story"].includes(moduleExportOrType)){let type=moduleExportOrType;resolved=this.resolveAttachedModuleExportType(type);}else resolved=this.resolveModuleExport(moduleExportOrType);if(validTypes.length&&!validTypes.includes(resolved.type)){let prettyType=resolved.type==="component"?"component or unknown":resolved.type;throw new Error(dedent5`Invalid value passed to the 'of' prop. The value was resolved to a '${prettyType}' type but the only types for this block are: ${validTypes.join(", ")}.
|
|
66
72
|
- Did you pass a component to the 'of' prop when the block only supports a story or a meta?
|
|
67
73
|
- ... or vice versa?
|
|
68
|
-
- Did you pass a story, CSF file or meta to the 'of' prop that is not indexed, ie. is not targeted by the 'stories' globs in the main configuration?`)}switch(resolved.type){case"component":return {...resolved,projectAnnotations:this.projectAnnotations};case"meta":return {...resolved,preparedMeta:this.store.preparedMetaFromCSFFile({csfFile:resolved.csfFile})};case"story":default:return resolved}}};var CsfDocsRender=class{constructor(channel,store,entry,callbacks){this.channel=channel;this.store=store;this.entry=entry;this.callbacks=callbacks;this.type="docs";this.subtype="csf";this.torndown=!1;this.disableKeyListeners=!1;this.preparing=!1;this.id=entry.id;}isPreparing(){return this.preparing}async prepare(){this.preparing=!0;let{entryExports,csfFiles=[]}=await this.store.loadEntry(this.id);if(this.torndown)throw PREPARE_ABORTED;let{importPath,title}=this.entry,primaryCsfFile=this.store.processCSFFileWithCache(entryExports,importPath,title),primaryStoryId=Object.keys(primaryCsfFile.stories)[0];this.story=this.store.storyFromCSFFile({storyId:primaryStoryId,csfFile:primaryCsfFile}),this.csfFiles=[primaryCsfFile,...csfFiles],this.preparing=!1;}isEqual(other){return !!(this.id===other.id&&this.story&&this.story===other.story)}docsContext(renderStoryToElement){if(!this.csfFiles)throw new Error("Cannot render docs before preparing");let docsContext=new DocsContext(this.channel,this.store,renderStoryToElement,this.csfFiles);return this.csfFiles.forEach(csfFile=>docsContext.attachCSFFile(csfFile)),docsContext}async renderToElement(canvasElement,renderStoryToElement){if(!this.story||!this.csfFiles)throw new Error("Cannot render docs before preparing");let docsContext=this.docsContext(renderStoryToElement),{docs:docsParameter}=this.story.parameters||{};if(!docsParameter)throw new Error("Cannot render a story in viewMode=docs if `@storybook/addon-docs` is not installed");let renderer=await docsParameter.renderer(),{render}=renderer,renderDocs=async()=>{try{await render(docsContext,docsParameter,canvasElement),this.channel.emit(DOCS_RENDERED,this.id);}catch(err){this.callbacks.showException(err);}};return this.rerender=async()=>renderDocs(),this.teardownRender=async({viewModeChanged})=>{!viewModeChanged||!canvasElement||renderer.unmount(canvasElement);},renderDocs()}async teardown({viewModeChanged}={}){this.teardownRender?.({viewModeChanged}),this.torndown=!0;}};var MdxDocsRender=class{constructor(channel,store,entry,callbacks){this.channel=channel;this.store=store;this.entry=entry;this.callbacks=callbacks;this.type="docs";this.subtype="mdx";this.torndown=!1;this.disableKeyListeners=!1;this.preparing=!1;this.id=entry.id;}isPreparing(){return this.preparing}async prepare(){this.preparing=!0;let{entryExports,csfFiles=[]}=await this.store.loadEntry(this.id);if(this.torndown)throw PREPARE_ABORTED;this.csfFiles=csfFiles,this.exports=entryExports,this.preparing=!1;}isEqual(other){return !!(this.id===other.id&&this.exports&&this.exports===other.exports)}docsContext(renderStoryToElement){if(!this.csfFiles)throw new Error("Cannot render docs before preparing");return new DocsContext(this.channel,this.store,renderStoryToElement,this.csfFiles)}async renderToElement(canvasElement,renderStoryToElement){if(!this.exports||!this.csfFiles||!this.store.projectAnnotations)throw new Error("Cannot render docs before preparing");let docsContext=this.docsContext(renderStoryToElement),{docs}=this.store.projectAnnotations.parameters||{};if(!docs)throw new Error("Cannot render a story in viewMode=docs if `@storybook/addon-docs` is not installed");let docsParameter={...docs,page:this.exports.default},renderer=await docs.renderer(),{render}=renderer,renderDocs=async()=>{try{await render(docsContext,docsParameter,canvasElement),this.channel.emit(DOCS_RENDERED,this.id);}catch(err){this.callbacks.showException(err);}};return this.rerender=async()=>renderDocs(),this.teardownRender=async({viewModeChanged}={})=>{!viewModeChanged||!canvasElement||(renderer.unmount(canvasElement),this.torndown=!0);},renderDocs()}async teardown({viewModeChanged}={}){this.teardownRender?.({viewModeChanged}),this.torndown=!0;}};var globalWindow=globalThis;function focusInInput(event){let target=event.composedPath&&event.composedPath()[0]||event.target;return /input|textarea/i.test(target.tagName)||target.getAttribute("contenteditable")!==null}var AUTODOCS_TAG="autodocs",STORIES_MDX_TAG="stories-mdx",ATTACHED_MDX_TAG="attached-mdx";function isMdxEntry({tags}){return !tags?.includes(AUTODOCS_TAG)&&!tags?.includes(STORIES_MDX_TAG)}function isStoryRender(r){return r.type==="story"}function isDocsRender(r){return r.type==="docs"}function isCsfDocsRender(r){return isDocsRender(r)&&r.subtype==="csf"}var PreviewWithSelection=class extends Preview{constructor(importFn,getProjectAnnotations,selectionStore,view){super(importFn,getProjectAnnotations,void 0,!1);this.importFn=importFn;this.getProjectAnnotations=getProjectAnnotations;this.selectionStore=selectionStore;this.view=view;this.initialize();}setupListeners(){super.setupListeners(),globalWindow.onkeydown=this.onKeydown.bind(this),this.channel.on(SET_CURRENT_STORY,this.onSetCurrentStory.bind(this)),this.channel.on(UPDATE_QUERY_PARAMS,this.onUpdateQueryParams.bind(this)),this.channel.on(PRELOAD_ENTRIES,this.onPreloadStories.bind(this));}async setInitialGlobals(){if(!this.storyStoreValue)throw new CalledPreviewMethodBeforeInitializationError({methodName:"setInitialGlobals"});let{globals}=this.selectionStore.selectionSpecifier||{};globals&&this.storyStoreValue.globals.updateFromPersisted(globals),this.emitGlobals();}async initializeWithStoryIndex(storyIndex){return await super.initializeWithStoryIndex(storyIndex),this.selectSpecifiedStory()}async selectSpecifiedStory(){if(!this.storyStoreValue)throw new CalledPreviewMethodBeforeInitializationError({methodName:"selectSpecifiedStory"});if(this.selectionStore.selection){await this.renderSelection();return}if(!this.selectionStore.selectionSpecifier){this.renderMissingStory();return}let{storySpecifier,args}=this.selectionStore.selectionSpecifier,entry=this.storyStoreValue.storyIndex.entryFromSpecifier(storySpecifier);if(!entry){storySpecifier==="*"?this.renderStoryLoadingException(storySpecifier,new EmptyIndexError):this.renderStoryLoadingException(storySpecifier,new NoStoryMatchError({storySpecifier:storySpecifier.toString()}));return}let{id:storyId,type:viewMode}=entry;this.selectionStore.setSelection({storyId,viewMode}),this.channel.emit(STORY_SPECIFIED,this.selectionStore.selection),this.channel.emit(CURRENT_STORY_WAS_SET,this.selectionStore.selection),await this.renderSelection({persistedArgs:args});}async onGetProjectAnnotationsChanged({getProjectAnnotations}){await super.onGetProjectAnnotationsChanged({getProjectAnnotations}),this.selectionStore.selection&&this.renderSelection();}async onStoriesChanged({importFn,storyIndex}){await super.onStoriesChanged({importFn,storyIndex}),this.selectionStore.selection?await this.renderSelection():await this.selectSpecifiedStory();}onKeydown(event){if(!this.storyRenders.find(r=>r.disableKeyListeners)&&!focusInInput(event)){let{altKey,ctrlKey,metaKey,shiftKey,key,code,keyCode}=event;this.channel.emit(PREVIEW_KEYDOWN,{event:{altKey,ctrlKey,metaKey,shiftKey,key,code,keyCode}});}}async onSetCurrentStory(selection){this.selectionStore.setSelection({viewMode:"story",...selection}),await this.storeInitializationPromise,this.channel.emit(CURRENT_STORY_WAS_SET,this.selectionStore.selection),this.renderSelection();}onUpdateQueryParams(queryParams){this.selectionStore.setQueryParams(queryParams);}async onUpdateGlobals({globals}){super.onUpdateGlobals({globals}),(this.currentRender instanceof MdxDocsRender||this.currentRender instanceof CsfDocsRender)&&await this.currentRender.rerender?.();}async onUpdateArgs({storyId,updatedArgs}){super.onUpdateArgs({storyId,updatedArgs});}async onPreloadStories({ids}){await this.storeInitializationPromise,this.storyStoreValue&&await Promise.allSettled(ids.map(id=>this.storyStoreValue?.loadEntry(id)));}async renderSelection({persistedArgs}={}){let{renderToCanvas}=this;if(!this.storyStoreValue||!renderToCanvas)throw new CalledPreviewMethodBeforeInitializationError({methodName:"renderSelection"});let{selection}=this.selectionStore;if(!selection)throw new Error("Cannot call renderSelection as no selection was made");let{storyId}=selection,entry;try{entry=await this.storyStoreValue.storyIdToEntry(storyId);}catch(err){this.currentRender&&await this.teardownRender(this.currentRender),this.renderStoryLoadingException(storyId,err);return}let storyIdChanged=this.currentSelection?.storyId!==storyId,viewModeChanged=this.currentRender?.type!==entry.type;entry.type==="story"?this.view.showPreparingStory({immediate:viewModeChanged}):this.view.showPreparingDocs({immediate:viewModeChanged}),this.currentRender?.isPreparing()&&await this.teardownRender(this.currentRender);let render;entry.type==="story"?render=new StoryRender(this.channel,this.storyStoreValue,(...args)=>(this.view.showStoryDuringRender(),renderToCanvas(...args)),this.mainStoryCallbacks(storyId),storyId,"story"):isMdxEntry(entry)?render=new MdxDocsRender(this.channel,this.storyStoreValue,entry,this.mainStoryCallbacks(storyId)):render=new CsfDocsRender(this.channel,this.storyStoreValue,entry,this.mainStoryCallbacks(storyId));let lastSelection=this.currentSelection;this.currentSelection=selection;let lastRender=this.currentRender;this.currentRender=render;try{await render.prepare();}catch(err){err!==PREPARE_ABORTED&&(lastRender&&await this.teardownRender(lastRender),this.renderStoryLoadingException(storyId,err));return}let implementationChanged=!storyIdChanged&&lastRender&&!render.isEqual(lastRender);if(persistedArgs&&isStoryRender(render)&&(invariant(!!render.story),this.storyStoreValue.args.updateFromPersisted(render.story,persistedArgs)),lastRender&&!lastRender.torndown&&!storyIdChanged&&!implementationChanged&&!viewModeChanged){this.currentRender=lastRender,this.channel.emit(STORY_UNCHANGED,storyId),this.view.showMain();return}if(lastRender&&await this.teardownRender(lastRender,{viewModeChanged}),lastSelection&&(storyIdChanged||viewModeChanged)&&this.channel.emit(STORY_CHANGED,storyId),isStoryRender(render)){invariant(!!render.story);let{parameters,initialArgs,argTypes,unmappedArgs}=this.storyStoreValue.getStoryContext(render.story);this.channel.emit(STORY_PREPARED,{id:storyId,parameters,initialArgs,argTypes,args:unmappedArgs}),(implementationChanged||persistedArgs)&&this.channel.emit(STORY_ARGS_UPDATED,{storyId,args:unmappedArgs});}else {let{parameters}=this.storyStoreValue.projectAnnotations;if(isCsfDocsRender(render)||render.entry.tags?.includes(ATTACHED_MDX_TAG)){if(!render.csfFiles)throw new MdxFileWithNoCsfReferencesError({storyId});({parameters}=this.storyStoreValue.preparedMetaFromCSFFile({csfFile:render.csfFiles[0]}));}this.channel.emit(DOCS_PREPARED,{id:storyId,parameters});}isStoryRender(render)?(invariant(!!render.story),this.storyRenders.push(render),this.currentRender.renderToElement(this.view.prepareForStory(render.story))):this.currentRender.renderToElement(this.view.prepareForDocs(),this.renderStoryToElement.bind(this));}async teardownRender(render,{viewModeChanged=!1}={}){this.storyRenders=this.storyRenders.filter(r=>r!==render),await render?.teardown?.({viewModeChanged});}mainStoryCallbacks(storyId){return {showMain:()=>this.view.showMain(),showError:err=>this.renderError(storyId,err),showException:err=>this.renderException(storyId,err)}}renderPreviewEntryError(reason,err){super.renderPreviewEntryError(reason,err),this.view.showErrorDisplay(err);}renderMissingStory(){this.view.showNoPreview(),this.channel.emit(STORY_MISSING);}renderStoryLoadingException(storySpecifier,err){logger.error(err),this.view.showErrorDisplay(err),this.channel.emit(STORY_MISSING,storySpecifier);}renderException(storyId,error){let{name="Error",message=String(error),stack}=error;this.channel.emit(STORY_THREW_EXCEPTION,{name,message,stack}),this.channel.emit(STORY_RENDER_PHASE_CHANGED,{newPhase:"errored",storyId}),error.message?.startsWith("ignoredException")||(this.view.showErrorDisplay(error),logger.error(`Error rendering story '${storyId}':`),logger.error(error));}renderError(storyId,{title,description}){logger.error(`Error rendering story ${title}: ${description}`),this.channel.emit(STORY_ERRORED,{title,description}),this.channel.emit(STORY_RENDER_PHASE_CHANGED,{newPhase:"errored",storyId}),this.view.showErrorDisplay({message:title,stack:description});}};var VALIDATION_REGEXP=/^[a-zA-Z0-9 _-]*$/,NUMBER_REGEXP=/^-?[0-9]+(\.[0-9]+)?$/,HEX_REGEXP=/^#([a-f0-9]{3,4}|[a-f0-9]{6}|[a-f0-9]{8})$/i,COLOR_REGEXP=/^(rgba?|hsla?)\(([0-9]{1,3}),\s?([0-9]{1,3})%?,\s?([0-9]{1,3})%?,?\s?([0-9](\.[0-9]{1,2})?)?\)$/i,validateArgs=(key="",value)=>key===null||key===""||!VALIDATION_REGEXP.test(key)?!1:value==null||value instanceof Date||typeof value=="number"||typeof value=="boolean"?!0:typeof value=="string"?VALIDATION_REGEXP.test(value)||NUMBER_REGEXP.test(value)||HEX_REGEXP.test(value)||COLOR_REGEXP.test(value):Array.isArray(value)?value.every(v=>validateArgs(key,v)):isPlainObject(value)?Object.entries(value).every(([k,v])=>validateArgs(k,v)):!1,QS_OPTIONS={delimiter:";",allowDots:!0,allowSparse:!0,decoder(str,defaultDecoder,charset,type){if(type==="value"&&str.startsWith("!")){if(str==="!undefined")return;if(str==="!null")return null;if(str==="!true")return !0;if(str==="!false")return !1;if(str.startsWith("!date(")&&str.endsWith(")"))return new Date(str.slice(6,-1));if(str.startsWith("!hex(")&&str.endsWith(")"))return `#${str.slice(5,-1)}`;let color=str.slice(1).match(COLOR_REGEXP);if(color)return str.startsWith("!rgba")?`${color[1]}(${color[2]}, ${color[3]}, ${color[4]}, ${color[5]})`:str.startsWith("!hsla")?`${color[1]}(${color[2]}, ${color[3]}%, ${color[4]}%, ${color[5]})`:str.startsWith("!rgb")?`${color[1]}(${color[2]}, ${color[3]}, ${color[4]})`:`${color[1]}(${color[2]}, ${color[3]}%, ${color[4]}%)`}return type==="value"&&NUMBER_REGEXP.test(str)?Number(str):defaultDecoder(str,defaultDecoder,charset)}},parseArgsParam=argsString=>{let parts=argsString.split(";").map(part=>part.replace("=","~").replace(":","="));return Object.entries(qs2.parse(parts.join(";"),QS_OPTIONS)).reduce((acc,[key,value])=>validateArgs(key,value)?Object.assign(acc,{[key]:value}):(once.warn(dedent`
|
|
74
|
+
- Did you pass a story, CSF file or meta to the 'of' prop that is not indexed, ie. is not targeted by the 'stories' globs in the main configuration?`)}switch(resolved.type){case"component":return {...resolved,projectAnnotations:this.projectAnnotations};case"meta":return {...resolved,preparedMeta:this.store.preparedMetaFromCSFFile({csfFile:resolved.csfFile})};case"story":default:return resolved}}};var CsfDocsRender=class{constructor(channel,store,entry,callbacks){this.channel=channel;this.store=store;this.entry=entry;this.callbacks=callbacks;this.type="docs";this.subtype="csf";this.torndown=!1;this.disableKeyListeners=!1;this.preparing=!1;this.id=entry.id;}isPreparing(){return this.preparing}async prepare(){this.preparing=!0;let{entryExports,csfFiles=[]}=await this.store.loadEntry(this.id);if(this.torndown)throw PREPARE_ABORTED;let{importPath,title}=this.entry,primaryCsfFile=this.store.processCSFFileWithCache(entryExports,importPath,title),primaryStoryId=Object.keys(primaryCsfFile.stories)[0];this.story=this.store.storyFromCSFFile({storyId:primaryStoryId,csfFile:primaryCsfFile}),this.csfFiles=[primaryCsfFile,...csfFiles],this.preparing=!1;}isEqual(other){return !!(this.id===other.id&&this.story&&this.story===other.story)}docsContext(renderStoryToElement){if(!this.csfFiles)throw new Error("Cannot render docs before preparing");let docsContext=new DocsContext(this.channel,this.store,renderStoryToElement,this.csfFiles);return this.csfFiles.forEach(csfFile=>docsContext.attachCSFFile(csfFile)),docsContext}async renderToElement(canvasElement,renderStoryToElement){if(!this.story||!this.csfFiles)throw new Error("Cannot render docs before preparing");let docsContext=this.docsContext(renderStoryToElement),{docs:docsParameter}=this.story.parameters||{};if(!docsParameter)throw new Error("Cannot render a story in viewMode=docs if `@storybook/addon-docs` is not installed");let renderer=await docsParameter.renderer(),{render}=renderer,renderDocs=async()=>{try{await render(docsContext,docsParameter,canvasElement),this.channel.emit(DOCS_RENDERED,this.id);}catch(err){this.callbacks.showException(err);}};return this.rerender=async()=>renderDocs(),this.teardownRender=async({viewModeChanged})=>{!viewModeChanged||!canvasElement||renderer.unmount(canvasElement);},renderDocs()}async teardown({viewModeChanged}={}){this.teardownRender?.({viewModeChanged}),this.torndown=!0;}};var MdxDocsRender=class{constructor(channel,store,entry,callbacks){this.channel=channel;this.store=store;this.entry=entry;this.callbacks=callbacks;this.type="docs";this.subtype="mdx";this.torndown=!1;this.disableKeyListeners=!1;this.preparing=!1;this.id=entry.id;}isPreparing(){return this.preparing}async prepare(){this.preparing=!0;let{entryExports,csfFiles=[]}=await this.store.loadEntry(this.id);if(this.torndown)throw PREPARE_ABORTED;this.csfFiles=csfFiles,this.exports=entryExports,this.preparing=!1;}isEqual(other){return !!(this.id===other.id&&this.exports&&this.exports===other.exports)}docsContext(renderStoryToElement){if(!this.csfFiles)throw new Error("Cannot render docs before preparing");return new DocsContext(this.channel,this.store,renderStoryToElement,this.csfFiles)}async renderToElement(canvasElement,renderStoryToElement){if(!this.exports||!this.csfFiles||!this.store.projectAnnotations)throw new Error("Cannot render docs before preparing");let docsContext=this.docsContext(renderStoryToElement),{docs}=this.store.projectAnnotations.parameters||{};if(!docs)throw new Error("Cannot render a story in viewMode=docs if `@storybook/addon-docs` is not installed");let docsParameter={...docs,page:this.exports.default},renderer=await docs.renderer(),{render}=renderer,renderDocs=async()=>{try{await render(docsContext,docsParameter,canvasElement),this.channel.emit(DOCS_RENDERED,this.id);}catch(err){this.callbacks.showException(err);}};return this.rerender=async()=>renderDocs(),this.teardownRender=async({viewModeChanged}={})=>{!viewModeChanged||!canvasElement||(renderer.unmount(canvasElement),this.torndown=!0);},renderDocs()}async teardown({viewModeChanged}={}){this.teardownRender?.({viewModeChanged}),this.torndown=!0;}};var globalWindow=globalThis;function focusInInput(event){let target=event.composedPath&&event.composedPath()[0]||event.target;return /input|textarea/i.test(target.tagName)||target.getAttribute("contenteditable")!==null}var ATTACHED_MDX_TAG="attached-mdx",UNATTACHED_MDX_TAG="unattached-mdx";function isMdxEntry({tags}){return tags?.includes(UNATTACHED_MDX_TAG)||tags?.includes(ATTACHED_MDX_TAG)}function isStoryRender(r){return r.type==="story"}function isDocsRender(r){return r.type==="docs"}function isCsfDocsRender(r){return isDocsRender(r)&&r.subtype==="csf"}var PreviewWithSelection=class extends Preview{constructor(importFn,getProjectAnnotations,selectionStore,view){super(importFn,getProjectAnnotations,void 0,!1);this.importFn=importFn;this.getProjectAnnotations=getProjectAnnotations;this.selectionStore=selectionStore;this.view=view;this.initialize();}setupListeners(){super.setupListeners(),globalWindow.onkeydown=this.onKeydown.bind(this),this.channel.on(SET_CURRENT_STORY,this.onSetCurrentStory.bind(this)),this.channel.on(UPDATE_QUERY_PARAMS,this.onUpdateQueryParams.bind(this)),this.channel.on(PRELOAD_ENTRIES,this.onPreloadStories.bind(this));}async setInitialGlobals(){if(!this.storyStoreValue)throw new CalledPreviewMethodBeforeInitializationError({methodName:"setInitialGlobals"});let{globals}=this.selectionStore.selectionSpecifier||{};globals&&this.storyStoreValue.globals.updateFromPersisted(globals),this.emitGlobals();}async initializeWithStoryIndex(storyIndex){return await super.initializeWithStoryIndex(storyIndex),this.selectSpecifiedStory()}async selectSpecifiedStory(){if(!this.storyStoreValue)throw new CalledPreviewMethodBeforeInitializationError({methodName:"selectSpecifiedStory"});if(this.selectionStore.selection){await this.renderSelection();return}if(!this.selectionStore.selectionSpecifier){this.renderMissingStory();return}let{storySpecifier,args}=this.selectionStore.selectionSpecifier,entry=this.storyStoreValue.storyIndex.entryFromSpecifier(storySpecifier);if(!entry){storySpecifier==="*"?this.renderStoryLoadingException(storySpecifier,new EmptyIndexError):this.renderStoryLoadingException(storySpecifier,new NoStoryMatchError({storySpecifier:storySpecifier.toString()}));return}let{id:storyId,type:viewMode}=entry;this.selectionStore.setSelection({storyId,viewMode}),this.channel.emit(STORY_SPECIFIED,this.selectionStore.selection),this.channel.emit(CURRENT_STORY_WAS_SET,this.selectionStore.selection),await this.renderSelection({persistedArgs:args});}async onGetProjectAnnotationsChanged({getProjectAnnotations}){await super.onGetProjectAnnotationsChanged({getProjectAnnotations}),this.selectionStore.selection&&this.renderSelection();}async onStoriesChanged({importFn,storyIndex}){await super.onStoriesChanged({importFn,storyIndex}),this.selectionStore.selection?await this.renderSelection():await this.selectSpecifiedStory();}onKeydown(event){if(!this.storyRenders.find(r=>r.disableKeyListeners)&&!focusInInput(event)){let{altKey,ctrlKey,metaKey,shiftKey,key,code,keyCode}=event;this.channel.emit(PREVIEW_KEYDOWN,{event:{altKey,ctrlKey,metaKey,shiftKey,key,code,keyCode}});}}async onSetCurrentStory(selection){this.selectionStore.setSelection({viewMode:"story",...selection}),await this.storeInitializationPromise,this.channel.emit(CURRENT_STORY_WAS_SET,this.selectionStore.selection),this.renderSelection();}onUpdateQueryParams(queryParams){this.selectionStore.setQueryParams(queryParams);}async onUpdateGlobals({globals}){super.onUpdateGlobals({globals}),(this.currentRender instanceof MdxDocsRender||this.currentRender instanceof CsfDocsRender)&&await this.currentRender.rerender?.();}async onUpdateArgs({storyId,updatedArgs}){super.onUpdateArgs({storyId,updatedArgs});}async onPreloadStories({ids}){await this.storeInitializationPromise,this.storyStoreValue&&await Promise.allSettled(ids.map(id=>this.storyStoreValue?.loadEntry(id)));}async renderSelection({persistedArgs}={}){let{renderToCanvas}=this;if(!this.storyStoreValue||!renderToCanvas)throw new CalledPreviewMethodBeforeInitializationError({methodName:"renderSelection"});let{selection}=this.selectionStore;if(!selection)throw new Error("Cannot call renderSelection as no selection was made");let{storyId}=selection,entry;try{entry=await this.storyStoreValue.storyIdToEntry(storyId);}catch(err){this.currentRender&&await this.teardownRender(this.currentRender),this.renderStoryLoadingException(storyId,err);return}let storyIdChanged=this.currentSelection?.storyId!==storyId,viewModeChanged=this.currentRender?.type!==entry.type;entry.type==="story"?this.view.showPreparingStory({immediate:viewModeChanged}):this.view.showPreparingDocs({immediate:viewModeChanged}),this.currentRender?.isPreparing()&&await this.teardownRender(this.currentRender);let render;entry.type==="story"?render=new StoryRender(this.channel,this.storyStoreValue,(...args)=>(this.view.showStoryDuringRender(),renderToCanvas(...args)),this.mainStoryCallbacks(storyId),storyId,"story"):isMdxEntry(entry)?render=new MdxDocsRender(this.channel,this.storyStoreValue,entry,this.mainStoryCallbacks(storyId)):render=new CsfDocsRender(this.channel,this.storyStoreValue,entry,this.mainStoryCallbacks(storyId));let lastSelection=this.currentSelection;this.currentSelection=selection;let lastRender=this.currentRender;this.currentRender=render;try{await render.prepare();}catch(err){lastRender&&await this.teardownRender(lastRender),err!==PREPARE_ABORTED&&this.renderStoryLoadingException(storyId,err);return}let implementationChanged=!storyIdChanged&&lastRender&&!render.isEqual(lastRender);if(persistedArgs&&isStoryRender(render)&&(invariant(!!render.story),this.storyStoreValue.args.updateFromPersisted(render.story,persistedArgs)),lastRender&&!lastRender.torndown&&!storyIdChanged&&!implementationChanged&&!viewModeChanged){this.currentRender=lastRender,this.channel.emit(STORY_UNCHANGED,storyId),this.view.showMain();return}if(lastRender&&await this.teardownRender(lastRender,{viewModeChanged}),lastSelection&&(storyIdChanged||viewModeChanged)&&this.channel.emit(STORY_CHANGED,storyId),isStoryRender(render)){invariant(!!render.story);let{parameters,initialArgs,argTypes,unmappedArgs}=this.storyStoreValue.getStoryContext(render.story);this.channel.emit(STORY_PREPARED,{id:storyId,parameters,initialArgs,argTypes,args:unmappedArgs});}else {let{parameters}=this.storyStoreValue.projectAnnotations;if(isCsfDocsRender(render)||render.entry.tags?.includes(ATTACHED_MDX_TAG)){if(!render.csfFiles)throw new MdxFileWithNoCsfReferencesError({storyId});({parameters}=this.storyStoreValue.preparedMetaFromCSFFile({csfFile:render.csfFiles[0]}));}this.channel.emit(DOCS_PREPARED,{id:storyId,parameters});}isStoryRender(render)?(invariant(!!render.story),this.storyRenders.push(render),this.currentRender.renderToElement(this.view.prepareForStory(render.story))):this.currentRender.renderToElement(this.view.prepareForDocs(),this.renderStoryToElement.bind(this));}async teardownRender(render,{viewModeChanged=!1}={}){this.storyRenders=this.storyRenders.filter(r=>r!==render),await render?.teardown?.({viewModeChanged});}mainStoryCallbacks(storyId){return {showMain:()=>this.view.showMain(),showError:err=>this.renderError(storyId,err),showException:err=>this.renderException(storyId,err)}}renderPreviewEntryError(reason,err){super.renderPreviewEntryError(reason,err),this.view.showErrorDisplay(err);}renderMissingStory(){this.view.showNoPreview(),this.channel.emit(STORY_MISSING);}renderStoryLoadingException(storySpecifier,err){logger.error(err),this.view.showErrorDisplay(err),this.channel.emit(STORY_MISSING,storySpecifier);}renderException(storyId,error){let{name="Error",message=String(error),stack}=error;this.channel.emit(STORY_THREW_EXCEPTION,{name,message,stack}),this.channel.emit(STORY_RENDER_PHASE_CHANGED,{newPhase:"errored",storyId}),error.message?.startsWith("ignoredException")||(this.view.showErrorDisplay(error),logger.error(`Error rendering story '${storyId}':`),logger.error(error));}renderError(storyId,{title,description}){logger.error(`Error rendering story ${title}: ${description}`),this.channel.emit(STORY_ERRORED,{title,description}),this.channel.emit(STORY_RENDER_PHASE_CHANGED,{newPhase:"errored",storyId}),this.view.showErrorDisplay({message:title,stack:description});}};var VALIDATION_REGEXP=/^[a-zA-Z0-9 _-]*$/,NUMBER_REGEXP=/^-?[0-9]+(\.[0-9]+)?$/,HEX_REGEXP=/^#([a-f0-9]{3,4}|[a-f0-9]{6}|[a-f0-9]{8})$/i,COLOR_REGEXP=/^(rgba?|hsla?)\(([0-9]{1,3}),\s?([0-9]{1,3})%?,\s?([0-9]{1,3})%?,?\s?([0-9](\.[0-9]{1,2})?)?\)$/i,validateArgs=(key="",value)=>key===null||key===""||!VALIDATION_REGEXP.test(key)?!1:value==null||value instanceof Date||typeof value=="number"||typeof value=="boolean"?!0:typeof value=="string"?VALIDATION_REGEXP.test(value)||NUMBER_REGEXP.test(value)||HEX_REGEXP.test(value)||COLOR_REGEXP.test(value):Array.isArray(value)?value.every(v=>validateArgs(key,v)):isPlainObject(value)?Object.entries(value).every(([k,v])=>validateArgs(k,v)):!1,QS_OPTIONS={delimiter:";",allowDots:!0,allowSparse:!0,decoder(str,defaultDecoder,charset,type){if(type==="value"&&str.startsWith("!")){if(str==="!undefined")return;if(str==="!null")return null;if(str==="!true")return !0;if(str==="!false")return !1;if(str.startsWith("!date(")&&str.endsWith(")"))return new Date(str.slice(6,-1));if(str.startsWith("!hex(")&&str.endsWith(")"))return `#${str.slice(5,-1)}`;let color=str.slice(1).match(COLOR_REGEXP);if(color)return str.startsWith("!rgba")?`${color[1]}(${color[2]}, ${color[3]}, ${color[4]}, ${color[5]})`:str.startsWith("!hsla")?`${color[1]}(${color[2]}, ${color[3]}%, ${color[4]}%, ${color[5]})`:str.startsWith("!rgb")?`${color[1]}(${color[2]}, ${color[3]}, ${color[4]})`:`${color[1]}(${color[2]}, ${color[3]}%, ${color[4]}%)`}return type==="value"&&NUMBER_REGEXP.test(str)?Number(str):defaultDecoder(str,defaultDecoder,charset)}},parseArgsParam=argsString=>{let parts=argsString.split(";").map(part=>part.replace("=","~").replace(":","="));return Object.entries(qs2.parse(parts.join(";"),QS_OPTIONS)).reduce((acc,[key,value])=>validateArgs(key,value)?Object.assign(acc,{[key]:value}):(once.warn(dedent`
|
|
69
75
|
Omitted potentially unsafe URL args.
|
|
70
76
|
|
|
71
77
|
More info: https://storybook.js.org/docs/react/writing-stories/args#setting-args-through-the-url
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@storybook/preview-api",
|
|
3
|
-
"version": "8.1.0-
|
|
3
|
+
"version": "8.1.0-beta.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"storybook"
|
|
@@ -44,12 +44,12 @@
|
|
|
44
44
|
"prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts"
|
|
45
45
|
},
|
|
46
46
|
"dependencies": {
|
|
47
|
-
"@storybook/channels": "8.1.0-
|
|
48
|
-
"@storybook/client-logger": "8.1.0-
|
|
49
|
-
"@storybook/core-events": "8.1.0-
|
|
50
|
-
"@storybook/csf": "^0.1.
|
|
47
|
+
"@storybook/channels": "8.1.0-beta.0",
|
|
48
|
+
"@storybook/client-logger": "8.1.0-beta.0",
|
|
49
|
+
"@storybook/core-events": "8.1.0-beta.0",
|
|
50
|
+
"@storybook/csf": "^0.1.7",
|
|
51
51
|
"@storybook/global": "^5.0.0",
|
|
52
|
-
"@storybook/types": "8.1.0-
|
|
52
|
+
"@storybook/types": "8.1.0-beta.0",
|
|
53
53
|
"@types/qs": "^6.9.5",
|
|
54
54
|
"dequal": "^2.0.2",
|
|
55
55
|
"lodash": "^4.17.21",
|
|
@@ -60,7 +60,7 @@
|
|
|
60
60
|
"util-deprecate": "^1.0.2"
|
|
61
61
|
},
|
|
62
62
|
"devDependencies": {
|
|
63
|
-
"@storybook/core-common": "8.1.0-
|
|
63
|
+
"@storybook/core-common": "8.1.0-beta.0",
|
|
64
64
|
"ansi-to-html": "^0.6.11",
|
|
65
65
|
"slash": "^5.0.0"
|
|
66
66
|
},
|