@storybook/addon-onboarding 0.0.30 → 0.0.31-canary.50.cbab81a.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/manager.mjs +2 -2
- package/package.json +1 -1
package/dist/manager.mjs
CHANGED
|
@@ -72,7 +72,7 @@ var Eo=Object.defineProperty;var a=(t,o)=>()=>(t&&(o=t(t=0)),o);var Ao=(t,o)=>{f
|
|
|
72
72
|
display: flex;
|
|
73
73
|
justify-content: flex-end;
|
|
74
74
|
margin-top: 15px;
|
|
75
|
-
`,rt=({step:t,primaryProps:o,tooltipProps:r})=>e.createElement(qo,{...r},e.createElement(Jo,null,t.title&&e.createElement(Ro,null,t.title),e.createElement(te,null,t.content)),!t.hideNextButton&&e.createElement(oe,{id:"buttonNext"},e.createElement(u,{...o,...t.onNextButtonClick?{onClick:t.onNextButtonClick}:{}},"Next")));});function it({api:t,isFinalStep:o,onFirstTourDone:r,onLastTourDone:n}){let[i,s]=useState();return useEffect(()=>{t.once(UPDATE_STORY_ARGS,()=>{s(3);});},[]),e.createElement(ne,{steps:o?[{target:"#example-button--warning",title:"Congratulations!",content:e.createElement(e.Fragment,null,"You just created your first story. You nailed the basics. ",e.createElement("br",null),"Continue setting up your project and start writing stories for your components."),placement:"right",disableOverlay:!0,disableBeacon:!0,floaterProps:{disableAnimation:!0},onNextButtonClick(){n();}}]:[{target:"#storybook-explorer-tree > div",title:"Storybook is built from stories",content:"Storybook
|
|
75
|
+
`,rt=({step:t,primaryProps:o,tooltipProps:r})=>e.createElement(qo,{...r},e.createElement(Jo,null,t.title&&e.createElement(Ro,null,t.title),e.createElement(te,null,t.content)),!t.hideNextButton&&e.createElement(oe,{id:"buttonNext"},e.createElement(u,{...o,...t.onNextButtonClick?{onClick:t.onNextButtonClick}:{}},"Next")));});function it({api:t,isFinalStep:o,onFirstTourDone:r,onLastTourDone:n}){let[i,s]=useState();return useEffect(()=>{t.once(UPDATE_STORY_ARGS,()=>{s(3);});},[]),e.createElement(ne,{steps:o?[{target:"#example-button--warning",title:"Congratulations!",content:e.createElement(e.Fragment,null,"You just created your first story. You nailed the basics. ",e.createElement("br",null),"Continue setting up your project and start writing stories for your components."),placement:"right",disableOverlay:!0,disableBeacon:!0,floaterProps:{disableAnimation:!0},onNextButtonClick(){n();}}]:[{target:"#storybook-explorer-tree > div",title:"Storybook is built from stories",content:"Storybook stories represent the key states of each of your components. For example, this Button component has four stories.",placement:"right",disableBeacon:!0,styles:{spotlight:{transform:"translateY(30px)"}},floaterProps:{disableAnimation:!0}},{target:"#storybook-preview-iframe",title:"Storybook previews are interactive",content:"Whenever you modify code or stories, Storybook automatically updates how it previews your components.",placement:"bottom"},{target:"#root div[role=main]",title:"Interactive story playground",content:e.createElement(e.Fragment,null,"See how a story renders with different data and state without touching code.",e.createElement("br",null),e.createElement("br",null),"Try it out by pressing this button.",e.createElement(tt,{targetSelector:"#control-primary"})),placement:"right",spotlightClicks:!0,floaterProps:{target:"#control-primary"},hideNextButton:!0},{target:"#control-primary",title:"Congratulations!",content:e.createElement(e.Fragment,null,"You've learned how to control your stories interactively. Now let's explore how to write your first story.",e.createElement(O,{numberOfPieces:800,recycle:!1,tweenDuration:2e4})),placement:"right",disableOverlay:!0}],continuous:!0,stepIndex:i,spotlightPadding:0,hideBackButton:!0,disableCloseOnEsc:!0,disableOverlayClose:!0,disableScrolling:!0,hideCloseButton:!0,callback:d=>{!o&&d.status===STATUS.FINISHED&&r();},floaterProps:{styles:{floater:{padding:"8px 0 0 8px",filter:"drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1))"}}},tooltipComponent:rt,styles:{spotlight:{border:"solid 2px #004c7c"},overlay:{backgroundColor:"rgba(0, 0, 0, 0.48)"},options:{zIndex:1e4,primaryColor:"#029CFD"}}})}var st=a(()=>{ot();$();nt();});var lt,pe,dt,mt=a(()=>{lt=styled.div`
|
|
76
76
|
background-color: rgba(27, 28, 29, 0.48);
|
|
77
77
|
position: fixed;
|
|
78
78
|
inset: 0px;
|
|
@@ -418,4 +418,4 @@ export const Warning: Story = {
|
|
|
418
418
|
label: 'Delete now',
|
|
419
419
|
backgroundColor: 'red',
|
|
420
420
|
}
|
|
421
|
-
};`}]];});function ko(){let[t,o]=useState(null);return useEffect(()=>{(async()=>{try{let i=await(await fetch("/project.json")).json();o({data:i,error:null});}catch(n){o({data:null,error:n});}})();},[]),t}var vo=a(()=>{});var S,K=a(()=>{S="STORYBOOK_ADDON_ONBOARDING_CHANNEL";});var Bo,Do=a(()=>{z();H();Et();Vt();qt();eo();no();ao();lo();mo();co();go();xo();Co();So();vo();K();Bo=({onFinish:t,api:o,addonsStore:r,skipOnboarding:n})=>{let[i,s]=useState("imports"),l={imports:1,meta:2,story:3,args:4,customStory:5},[d,p]=useState(!1),[m,x]=Ue(),v=ro(),b=so(i==="customStory",o,r),P=po("syntax-highlighter-backdrop",i==="customStory"),R=ko(),_=R?.data?.language==="javascript"?yo:R?.data?.framework.name==="@storybook/nextjs"?wo:bo,No=()=>{let F=_[4][0].code;navigator.clipboard.writeText(F.replace("// Copy the code below","")),p(!0);},Io=useCallback(()=>{o.emit(S,{step:"X:SkippedOnboarding",where:`HowToWriteAStoryModal:${i}`,type:"telemetry"});},[o,i]);return e.createElement(N,{width:740,height:430,defaultOpen:!0},({Title:F,Description:Mo,Close:Wo})=>e.createElement(Bt,null,_?e.createElement(Ut,{activeStep:l[i]||1,data:_,width:480}):null,i==="customStory"&&P&&!b?.data&&e.createElement(u,{ref:m,onClick:()=>No(),style:{position:"absolute",top:P.top+P.height-45,left:P.left+P.width-(x.width??0)-10,zIndex:1e3}},d?"Copied to clipboard":"Copy code"),e.createElement(Dt,null,e.createElement(Lt,null,e.createElement(F,{asChild:!0},e.createElement(Ot,null,e.createElement(Icons,{icon:"bookmarkhollow",width:13}),e.createElement("span",null,"How to write a story"))),e.createElement(Wo,{onClick:Io,asChild:!0},e.createElement(Icons,{style:{cursor:"pointer"},icon:"cross",width:13,onClick:n}))),e.createElement(Mo,{asChild:!0},e.createElement(zt,null,i==="imports"&&e.createElement(e.Fragment,null,e.createElement("div",null,e.createElement("h3",null,"Imports"),e.createElement("p",null,"First, import ",e.createElement(I,null,"Meta")," and"," ",e.createElement(I,null,"StoryObj")," for type safety and autocompletion in TypeScript stories."),e.createElement("p",null,"Next, import a component. In this case, the Button component.")),e.createElement(u,{style:{marginTop:4},onClick:()=>{s("meta");}},"Next")),i==="meta"&&e.createElement(e.Fragment,null,e.createElement("div",null,e.createElement("h3",null,"Meta"),e.createElement("p",null,"The default export, Meta, contains metadata about this component's stories. The title field controls where stories appear in the sidebar."),e.createElement(M,{width:"204",alt:"Title property pointing to Storybook's sidebar",src:uo})),e.createElement(D,null,e.createElement(u,{variant:"secondary",onClick:()=>s("imports")},"Previous"),e.createElement(u,{onClick:()=>s("story")},"Next"))),i==="story"&&e.createElement(e.Fragment,null,e.createElement("div",null,e.createElement("h3",null,"Story"),e.createElement("p",null,"Each named export is a story. Its contents specify how the story is rendered in addition to other configuration options."),e.createElement(M,{width:"190",alt:"Story export pointing to the sidebar entry of the story",src:fo})),e.createElement(D,null,e.createElement(u,{variant:"secondary",onClick:()=>s("meta")},"Previous"),e.createElement(u,{onClick:()=>s("args")},"Next"))),i==="args"&&e.createElement(e.Fragment,null,e.createElement("div",null,e.createElement("h3",null,"Args"),e.createElement("p",null,"Args are inputs that are passed to the component, which Storybook uses to render the component in different states. In React, args = props. They also specify the initial control values for the story."),e.createElement(M,{alt:"Args mapped to their controls in Storybook",width:"253",src:ho})),e.createElement(D,null,e.createElement(u,{variant:"secondary",onClick:()=>s("story")},"Previous"),e.createElement(u,{onClick:()=>s("customStory")},"Next"))),i==="customStory"&&(b?.error?null:e.createElement(e.Fragment,null,e.createElement("div",null,e.createElement("h3",null,"Create your first story"),e.createElement("p",null,"Now it's your turn. See how easy it is to create your first story by following these steps below."),e.createElement(Kt,null,e.createElement(A,{isCompleted:d||b?.data,index:1},"Copy the Warning story"),e.createElement(A,{isCompleted:b?.data,index:2},"Open"," ",v?.data?e.createElement(I,null,v.data):e.createElement(e.Fragment,null,"the Button Story")," ","in your current working directory"),e.createElement(A,{isCompleted:b?.data,index:3},"Paste it at the bottom of the file and save"))),e.createElement(D,null,e.createElement(u,{variant:"secondary",onClick:()=>s("args")},"Previous"),b?.data?e.createElement(u,{onClick:()=>t()},"Go to story"):null))))),e.createElement(Nt,null,e.createElement(It,null),e.createElement(Mt,null),e.createElement(Wt,null)))))};});var Oo={};Ao(Oo,{default:()=>Lo});function Lo({api:t}){let[o,r]=useState(!0),[n,i]=useState(!1),[s,l]=useState("1:Welcome"),d=useCallback(()=>{let p=new URL(window.location.href),m=decodeURIComponent(p.searchParams.get("path"));p.search=`?path=${m}&onboarding=false`,history.replaceState({},"",p.href),t.setQueryParams({onboarding:"false"}),r(!1);},[r,t]);return useEffect(()=>{t.emit(S,{step:"1:Welcome",type:"telemetry"});},[]),useEffect(()=>{t.emit(S,{step:s,type:"telemetry"});},[t,s]),useEffect(()=>{let p;return s==="4:VisitNewStory"&&(i(!0),p=window.setTimeout(()=>{l("5:ConfigureYourProject");},2e3)),()=>{clearTimeout(p);}},[s]),useEffect(()=>{let p=t.getCurrentStoryData()?.id;t.setQueryParams({onboarding:"true"}),p!=="example-button--primary"&&t.selectStory("example-button--primary",void 0,{ref:void 0});},[]),o?e.createElement(ThemeProvider,{theme:Je},o&&n&&e.createElement(O,{numberOfPieces:800,recycle:!1,tweenDuration:2e4,onConfettiComplete:p=>{p.reset(),i(!1);}}),o&&s==="1:Welcome"&&e.createElement(Pt,{onProceed:()=>{l("2:StorybookTour");},skipOnboarding:()=>{d(),t.emit(S,{step:"X:SkippedOnboarding",where:"WelcomeModal",type:"telemetry"});}}),o&&(s==="2:StorybookTour"||s==="5:ConfigureYourProject")&&e.createElement(it,{api:t,isFinalStep:s==="5:ConfigureYourProject",onFirstTourDone:()=>{l("3:WriteYourStory");},onLastTourDone:()=>{t.selectStory("configure-your-project--docs"),t.emit(S,{step:"6:FinishedOnboarding",type:"telemetry"}),d();}}),o&&s==="3:WriteYourStory"&&e.createElement(Bo,{api:t,addonsStore:addons,onFinish:()=>{t.selectStory("example-button--warning"),l("4:VisitNewStory");},skipOnboarding:d})):null}var Je,zo=a(()=>{st();Tt();Do();$();K();Je=ensure(themes.light);});var nr=lazy(()=>Promise.resolve().then(()=>(zo(),Oo)));addons.register("@storybook/addon-onboarding",async t=>{let o=t.getUrlState(),r=o.path==="/onboarding"||o.queryParams.onboarding==="true";t.once(STORY_SPECIFIED,()=>{if(!(!!t.getData("example-button--primary")||!!document.getElementById("example-button--primary"))){console.warn("[@storybook/addon-onboarding] It seems like you have finished the onboarding experience in Storybook! Therefore this addon is not necessary anymore and will not be loaded. You are free to remove it from your project. More info: https://github.com/storybookjs/addon-onboarding#uninstalling");return}if(!r||window.innerWidth<730)return;t.togglePanel(!0),t.togglePanelPosition("bottom"),t.setSelectedPanel("addon-controls");let i=document.createElement("div");i.id="storybook-addon-onboarding",document.body.appendChild(i),Re.render(e.createElement(Suspense,{fallback:e.createElement("div",null,"Loading...")},e.createElement(nr,{api:t})),i);});});
|
|
421
|
+
};`}]];});function ko(){let[t,o]=useState(null);return useEffect(()=>{(async()=>{try{let i=await(await fetch("/project.json")).json();o({data:i,error:null});}catch(n){o({data:null,error:n});}})();},[]),t}var vo=a(()=>{});var S,K=a(()=>{S="STORYBOOK_ADDON_ONBOARDING_CHANNEL";});var Bo,Do=a(()=>{z();H();Et();Vt();qt();eo();no();ao();lo();mo();co();go();xo();Co();So();vo();K();Bo=({onFinish:t,api:o,addonsStore:r,skipOnboarding:n})=>{let[i,s]=useState("imports"),l={imports:1,meta:2,story:3,args:4,customStory:5},[d,p]=useState(!1),[m,x]=Ue(),v=ro(),b=so(i==="customStory",o,r),P=po("syntax-highlighter-backdrop",i==="customStory"),R=ko(),_=R?.data?.language==="javascript"?yo:R?.data?.framework.name==="@storybook/nextjs"?wo:bo,No=()=>{let F=_[4][0].code;navigator.clipboard.writeText(F.replace("// Copy the code below","")),p(!0);},Io=useCallback(()=>{o.emit(S,{step:"X:SkippedOnboarding",where:`HowToWriteAStoryModal:${i}`,type:"telemetry"});},[o,i]);return e.createElement(N,{width:740,height:430,defaultOpen:!0},({Title:F,Description:Mo,Close:Wo})=>e.createElement(Bt,null,_?e.createElement(Ut,{activeStep:l[i]||1,data:_,width:480}):null,i==="customStory"&&P&&!b?.data&&e.createElement(u,{ref:m,onClick:()=>No(),style:{position:"absolute",top:P.top+P.height-45,left:P.left+P.width-(x.width??0)-10,zIndex:1e3}},d?"Copied to clipboard":"Copy code"),e.createElement(Dt,null,e.createElement(Lt,null,e.createElement(F,{asChild:!0},e.createElement(Ot,null,e.createElement(Icons,{icon:"bookmarkhollow",width:13}),e.createElement("span",null,"How to write a story"))),e.createElement(Wo,{onClick:Io,asChild:!0},e.createElement(Icons,{style:{cursor:"pointer"},icon:"cross",width:13,onClick:n}))),e.createElement(Mo,{asChild:!0},e.createElement(zt,null,i==="imports"&&e.createElement(e.Fragment,null,e.createElement("div",null,e.createElement("h3",null,"Imports"),e.createElement("p",null,"First, import ",e.createElement(I,null,"Meta")," and"," ",e.createElement(I,null,"StoryObj")," for type safety and autocompletion in TypeScript stories."),e.createElement("p",null,"Next, import a component. In this case, the Button component.")),e.createElement(u,{style:{marginTop:4},onClick:()=>{s("meta");}},"Next")),i==="meta"&&e.createElement(e.Fragment,null,e.createElement("div",null,e.createElement("h3",null,"Meta"),e.createElement("p",null,"The default export, Meta, contains metadata about this component's stories. The title field (optional) controls where stories appear in the sidebar."),e.createElement(M,{width:"204",alt:"Title property pointing to Storybook's sidebar",src:uo})),e.createElement(D,null,e.createElement(u,{variant:"secondary",onClick:()=>s("imports")},"Previous"),e.createElement(u,{onClick:()=>s("story")},"Next"))),i==="story"&&e.createElement(e.Fragment,null,e.createElement("div",null,e.createElement("h3",null,"Story"),e.createElement("p",null,"Each named export is a story. Its contents specify how the story is rendered in addition to other configuration options."),e.createElement(M,{width:"190",alt:"Story export pointing to the sidebar entry of the story",src:fo})),e.createElement(D,null,e.createElement(u,{variant:"secondary",onClick:()=>s("meta")},"Previous"),e.createElement(u,{onClick:()=>s("args")},"Next"))),i==="args"&&e.createElement(e.Fragment,null,e.createElement("div",null,e.createElement("h3",null,"Args"),e.createElement("p",null,"Args are inputs that are passed to the component, which Storybook uses to render the component in different states. In React, args = props. They also specify the initial control values for the story."),e.createElement(M,{alt:"Args mapped to their controls in Storybook",width:"253",src:ho})),e.createElement(D,null,e.createElement(u,{variant:"secondary",onClick:()=>s("story")},"Previous"),e.createElement(u,{onClick:()=>s("customStory")},"Next"))),i==="customStory"&&(b?.error?null:e.createElement(e.Fragment,null,e.createElement("div",null,e.createElement("h3",null,"Create your first story"),e.createElement("p",null,"Now it's your turn. See how easy it is to create your first story by following these steps below."),e.createElement(Kt,null,e.createElement(A,{isCompleted:d||b?.data,index:1},"Copy the Warning story"),e.createElement(A,{isCompleted:b?.data,index:2},"Open"," ",v?.data?e.createElement(I,null,v.data):e.createElement(e.Fragment,null,"the Button Story")," ","in your current working directory"),e.createElement(A,{isCompleted:b?.data,index:3},"Paste it at the bottom of the file and save"))),e.createElement(D,null,e.createElement(u,{variant:"secondary",onClick:()=>s("args")},"Previous"),b?.data?e.createElement(u,{onClick:()=>t()},"Go to story"):null))))),e.createElement(Nt,null,e.createElement(It,null),e.createElement(Mt,null),e.createElement(Wt,null)))))};});var Oo={};Ao(Oo,{default:()=>Lo});function Lo({api:t}){let[o,r]=useState(!0),[n,i]=useState(!1),[s,l]=useState("1:Welcome"),d=useCallback(()=>{let p=new URL(window.location.href),m=decodeURIComponent(p.searchParams.get("path"));p.search=`?path=${m}&onboarding=false`,history.replaceState({},"",p.href),t.setQueryParams({onboarding:"false"}),r(!1);},[r,t]);return useEffect(()=>{t.emit(S,{step:"1:Welcome",type:"telemetry"});},[]),useEffect(()=>{t.emit(S,{step:s,type:"telemetry"});},[t,s]),useEffect(()=>{let p;return s==="4:VisitNewStory"&&(i(!0),p=window.setTimeout(()=>{l("5:ConfigureYourProject");},2e3)),()=>{clearTimeout(p);}},[s]),useEffect(()=>{let p=t.getCurrentStoryData()?.id;t.setQueryParams({onboarding:"true"}),p!=="example-button--primary"&&t.selectStory("example-button--primary",void 0,{ref:void 0});},[]),o?e.createElement(ThemeProvider,{theme:Je},o&&n&&e.createElement(O,{numberOfPieces:800,recycle:!1,tweenDuration:2e4,onConfettiComplete:p=>{p.reset(),i(!1);}}),o&&s==="1:Welcome"&&e.createElement(Pt,{onProceed:()=>{l("2:StorybookTour");},skipOnboarding:()=>{d(),t.emit(S,{step:"X:SkippedOnboarding",where:"WelcomeModal",type:"telemetry"});}}),o&&(s==="2:StorybookTour"||s==="5:ConfigureYourProject")&&e.createElement(it,{api:t,isFinalStep:s==="5:ConfigureYourProject",onFirstTourDone:()=>{l("3:WriteYourStory");},onLastTourDone:()=>{t.selectStory("configure-your-project--docs"),t.emit(S,{step:"6:FinishedOnboarding",type:"telemetry"}),d();}}),o&&s==="3:WriteYourStory"&&e.createElement(Bo,{api:t,addonsStore:addons,onFinish:()=>{t.selectStory("example-button--warning"),l("4:VisitNewStory");},skipOnboarding:d})):null}var Je,zo=a(()=>{st();Tt();Do();$();K();Je=ensure(themes.light);});var nr=lazy(()=>Promise.resolve().then(()=>(zo(),Oo)));addons.register("@storybook/addon-onboarding",async t=>{let o=t.getUrlState(),r=o.path==="/onboarding"||o.queryParams.onboarding==="true";t.once(STORY_SPECIFIED,()=>{if(!(!!t.getData("example-button--primary")||!!document.getElementById("example-button--primary"))){console.warn("[@storybook/addon-onboarding] It seems like you have finished the onboarding experience in Storybook! Therefore this addon is not necessary anymore and will not be loaded. You are free to remove it from your project. More info: https://github.com/storybookjs/addon-onboarding#uninstalling");return}if(!r||window.innerWidth<730)return;t.togglePanel(!0),t.togglePanelPosition("bottom"),t.setSelectedPanel("addon-controls");let i=document.createElement("div");i.id="storybook-addon-onboarding",document.body.appendChild(i),Re.render(e.createElement(Suspense,{fallback:e.createElement("div",null,"Loading...")},e.createElement(nr,{api:t})),i);});});
|