@storybook/addon-onboarding 0.0.35-canary.55.3fb8b82.0 → 0.0.35-canary.56.8463de1.0

package/dist/manager.mjs

@@ -39,7 +39,9 @@ var Ao=Object.defineProperty;var a=(t,o)=>()=>(t&&(o=t(t=0)),o);var jo=(t,o)=>{f
   font-size: 0.8125rem;
   font-weight: 700;
   font-family: ${({theme:t})=>t.typography.fonts.base};
-  transition: all 0.16s ease-in-out;
+  transition: background-color, box-shadow, opacity;
+  transition-duration: 0.16s;
+  transition-timing-function: ease-in-out;
   text-decoration: none;
 
   &:hover {
@@ -72,7 +74,7 @@ var Ao=Object.defineProperty;var a=(t,o)=>()=>(t&&(o=t(t=0)),o);var jo=(t,o)=>{f
   display: flex;
   justify-content: flex-end;
   margin-top: 15px;
-`,rt=({step:t,primaryProps:o,tooltipProps:r})=>e.createElement(Jo,{...r},e.createElement(Ro,null,t.title&&e.createElement(te,null,t.title),e.createElement(oe,null,t.content)),!t.hideNextButton&&e.createElement(ee,{id:"buttonNext"},e.createElement(d,{...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(ie,{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(z,{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:l=>{!o&&l.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();H();nt();});var lt,le,dt,mt=a(()=>{lt=styled.div`
+`,rt=({step:t,primaryProps:o,tooltipProps:r})=>e.createElement(Jo,{...r},e.createElement(Ro,null,t.title&&e.createElement(te,null,t.title),e.createElement(oe,null,t.content)),!t.hideNextButton&&e.createElement(ee,{id:"buttonNext"},e.createElement(d,{...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(ie,{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(z,{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:l=>{!o&&l.status===STATUS.FINISHED&&r();},floaterProps:{styles:{floater:{padding:0,paddingLeft:8,paddingTop:8,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();H();nt();});var lt,le,dt,mt=a(()=>{lt=styled.div`
   background-color: rgba(27, 28, 29, 0.48);
   position: fixed;
   inset: 0px;
@@ -438,4 +440,4 @@ export const Warning: Story = {
     label: 'Delete now',
     backgroundColor: 'red',
   }
-};`}]];});function vo(){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 Po=a(()=>{});var v,K=a(()=>{v="STORYBOOK_ADDON_ONBOARDING_CHANNEL";});var Do,Lo=a(()=>{N();Y();At();Zt();Jt();ro();io();po();mo();uo();fo();yo();bo();So();ko();Po();K();Do=({onFinish:t,api:o,addonsStore:r,skipOnboarding:n})=>{let[i,s]=useState("imports"),p={imports:0,meta:1,story:2,args:3,customStory:4},[l,m]=useState(!1),[g,u]=Ze(),y=no(),C=ao(i==="customStory",o,r),S=lo("syntax-highlighter-backdrop",i==="customStory"),R=vo(),F=R?.data?.language==="javascript"?xo:R?.data?.framework.name==="@storybook/nextjs"?wo:Co,Wo=()=>{let $=F[3][0].code;navigator.clipboard.writeText($.replace("// Copy the code below","")),m(!0);},Io=useCallback(()=>{o.emit(v,{step:"X:SkippedOnboarding",where:`HowToWriteAStoryModal:${i}`,type:"telemetry"});},[o,i]);return e.createElement(W,{width:740,height:430,defaultOpen:!0},({Title:$,Description:Mo,Close:Eo})=>e.createElement(Bt,null,F?e.createElement(Vt,{activeStep:p[i]||0,data:F,width:480}):null,i==="customStory"&&S&&!C?.data&&e.createElement(d,{ref:g,onClick:()=>Wo(),style:{position:"absolute",top:S.top+S.height-45,left:S.left+S.width-(u.width??0)-10,zIndex:1e3}},l?"Copied to clipboard":"Copy code"),e.createElement(Dt,null,e.createElement(Lt,null,e.createElement($,{asChild:!0},e.createElement(Ot,null,e.createElement(Icons,{icon:"bookmarkhollow",width:13}),e.createElement("span",null,"How to write a story"))),e.createElement(Eo,{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(d,{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:co})),e.createElement(L,null,e.createElement(d,{variant:"secondary",onClick:()=>s("imports")},"Previous"),e.createElement(d,{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:go})),e.createElement(L,null,e.createElement(d,{variant:"secondary",onClick:()=>s("meta")},"Previous"),e.createElement(d,{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(L,null,e.createElement(d,{variant:"secondary",onClick:()=>s("story")},"Previous"),e.createElement(d,{onClick:()=>s("customStory")},"Next"))),i==="customStory"&&(C?.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(qt,null,e.createElement(j,{isCompleted:l||C?.data,index:1},"Copy the Warning story"),e.createElement(j,{isCompleted:C?.data,index:2},e.createElement(Et,null,"Open the Button story in your current working directory"),y?.data&&e.createElement(I,null,y.data)),e.createElement(j,{isCompleted:C?.data,index:3},"Paste it at the bottom of the file and save"))),e.createElement(L,null,e.createElement(d,{variant:"secondary",onClick:()=>s("args")},"Previous"),C?.data?e.createElement(d,{onClick:()=>t()},"Go to story"):null))))),e.createElement(Nt,null,e.createElement(Wt,null),e.createElement(It,null),e.createElement(Mt,null)))))};});var zo={};jo(zo,{default:()=>Oo});function Oo({api:t}){let[o,r]=useState(!0),[n,i]=useState(!1),[s,p]=useState("1:Welcome"),l=useCallback(()=>{let m=new URL(window.location.href),g=decodeURIComponent(m.searchParams.get("path"));m.search=`?path=${g}&onboarding=false`,history.replaceState({},"",m.href),t.setQueryParams({onboarding:"false"}),r(!1);},[r,t]);return useEffect(()=>{t.emit(v,{step:"1:Welcome",type:"telemetry"});},[]),useEffect(()=>{t.emit(v,{step:s,type:"telemetry"});},[t,s]),useEffect(()=>{let m;return s==="4:VisitNewStory"&&(i(!0),m=window.setTimeout(()=>{p("5:ConfigureYourProject");},2e3)),()=>{clearTimeout(m);}},[s]),useEffect(()=>{let m=t.getCurrentStoryData()?.id;t.setQueryParams({onboarding:"true"}),m!=="example-button--primary"&&t.selectStory("example-button--primary",void 0,{ref:void 0});},[]),o?e.createElement(ThemeProvider,{theme:tr},o&&n&&e.createElement(z,{numberOfPieces:800,recycle:!1,tweenDuration:2e4,onConfettiComplete:m=>{m.reset(),i(!1);}}),o&&s==="1:Welcome"&&e.createElement(Pt,{onProceed:()=>{p("2:StorybookTour");},skipOnboarding:()=>{l(),t.emit(v,{step:"X:SkippedOnboarding",where:"WelcomeModal",type:"telemetry"});}}),o&&(s==="2:StorybookTour"||s==="5:ConfigureYourProject")&&e.createElement(it,{api:t,isFinalStep:s==="5:ConfigureYourProject",onFirstTourDone:()=>{p("3:WriteYourStory");},onLastTourDone:()=>{t.selectStory("configure-your-project--docs"),t.emit(v,{step:"6:FinishedOnboarding",type:"telemetry"}),l();}}),o&&s==="3:WriteYourStory"&&e.createElement(Do,{api:t,addonsStore:addons,onFinish:()=>{t.selectStory("example-button--warning"),p("4:VisitNewStory");},skipOnboarding:l})):null}var tr,No=a(()=>{st();Tt();Lo();H();K();tr=ensure(themes.light);});var sr=lazy(()=>Promise.resolve().then(()=>(No(),zo)));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),or.render(e.createElement(Suspense,{fallback:e.createElement("div",null,"Loading...")},e.createElement(sr,{api:t})),i);});});
+};`}]];});function vo(){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 Po=a(()=>{});var v,K=a(()=>{v="STORYBOOK_ADDON_ONBOARDING_CHANNEL";});var Do,Lo=a(()=>{N();Y();At();Zt();Jt();ro();io();po();mo();uo();fo();yo();bo();So();ko();Po();K();Do=({onFinish:t,api:o,addonsStore:r,skipOnboarding:n})=>{let[i,s]=useState("imports"),p={imports:0,meta:1,story:2,args:3,customStory:4},[l,m]=useState(!1),[g,u]=Ze(),y=no(),C=ao(i==="customStory",o,r),S=lo("syntax-highlighter-backdrop",i==="customStory"),R=vo(),F=R?.data?.language==="javascript"?xo:R?.data?.framework.name==="@storybook/nextjs"?wo:Co,Wo=()=>{let $=F[3][0].code;navigator.clipboard.writeText($.replace("// Copy the code below","")),m(!0);},Io=useCallback(()=>{o.emit(v,{step:"X:SkippedOnboarding",where:`HowToWriteAStoryModal:${i}`,type:"telemetry"});},[o,i]);return e.createElement(W,{width:740,height:430,defaultOpen:!0},({Title:$,Description:Mo,Close:Eo})=>e.createElement(Bt,null,F?e.createElement(Vt,{activeStep:p[i]||0,data:F,width:480}):null,i==="customStory"&&S&&!C?.data&&e.createElement(d,{ref:g,onClick:()=>Wo(),style:{position:"absolute",opacity:u.width?1:0,top:S.top+S.height-45,left:S.left+S.width-(u.width??0)-10,zIndex:1e3}},l?"Copied to clipboard":"Copy code"),e.createElement(Dt,null,e.createElement(Lt,null,e.createElement($,{asChild:!0},e.createElement(Ot,null,e.createElement(Icons,{icon:"bookmarkhollow",width:13}),e.createElement("span",null,"How to write a story"))),e.createElement(Eo,{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(d,{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:co})),e.createElement(L,null,e.createElement(d,{variant:"secondary",onClick:()=>s("imports")},"Previous"),e.createElement(d,{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:go})),e.createElement(L,null,e.createElement(d,{variant:"secondary",onClick:()=>s("meta")},"Previous"),e.createElement(d,{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(L,null,e.createElement(d,{variant:"secondary",onClick:()=>s("story")},"Previous"),e.createElement(d,{onClick:()=>s("customStory")},"Next"))),i==="customStory"&&(C?.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(qt,null,e.createElement(j,{isCompleted:l||C?.data,index:1},"Copy the Warning story"),e.createElement(j,{isCompleted:C?.data,index:2},e.createElement(Et,null,"Open the Button story in your current working directory"),y?.data&&e.createElement(I,null,y.data)),e.createElement(j,{isCompleted:C?.data,index:3},"Paste it at the bottom of the file and save"))),e.createElement(L,null,e.createElement(d,{variant:"secondary",onClick:()=>s("args")},"Previous"),C?.data?e.createElement(d,{onClick:()=>t()},"Go to story"):null))))),e.createElement(Nt,null,e.createElement(Wt,null),e.createElement(It,null),e.createElement(Mt,null)))))};});var zo={};jo(zo,{default:()=>Oo});function Oo({api:t}){let[o,r]=useState(!0),[n,i]=useState(!1),[s,p]=useState("1:Welcome"),l=useCallback(()=>{let m=new URL(window.location.href),g=decodeURIComponent(m.searchParams.get("path"));m.search=`?path=${g}&onboarding=false`,history.replaceState({},"",m.href),t.setQueryParams({onboarding:"false"}),r(!1);},[r,t]);return useEffect(()=>{t.emit(v,{step:"1:Welcome",type:"telemetry"});},[]),useEffect(()=>{t.emit(v,{step:s,type:"telemetry"});},[t,s]),useEffect(()=>{let m;return s==="4:VisitNewStory"&&(i(!0),m=window.setTimeout(()=>{p("5:ConfigureYourProject");},2e3)),()=>{clearTimeout(m);}},[s]),useEffect(()=>{let m=t.getCurrentStoryData()?.id;t.setQueryParams({onboarding:"true"}),m!=="example-button--primary"&&t.selectStory("example-button--primary",void 0,{ref:void 0});},[]),o?e.createElement(ThemeProvider,{theme:tr},o&&n&&e.createElement(z,{numberOfPieces:800,recycle:!1,tweenDuration:2e4,onConfettiComplete:m=>{m.reset(),i(!1);}}),o&&s==="1:Welcome"&&e.createElement(Pt,{onProceed:()=>{p("2:StorybookTour");},skipOnboarding:()=>{l(),t.emit(v,{step:"X:SkippedOnboarding",where:"WelcomeModal",type:"telemetry"});}}),o&&(s==="2:StorybookTour"||s==="5:ConfigureYourProject")&&e.createElement(it,{api:t,isFinalStep:s==="5:ConfigureYourProject",onFirstTourDone:()=>{p("3:WriteYourStory");},onLastTourDone:()=>{t.selectStory("configure-your-project--docs"),t.emit(v,{step:"6:FinishedOnboarding",type:"telemetry"}),l();}}),o&&s==="3:WriteYourStory"&&e.createElement(Do,{api:t,addonsStore:addons,onFinish:()=>{t.selectStory("example-button--warning"),p("4:VisitNewStory");},skipOnboarding:l})):null}var tr,No=a(()=>{st();Tt();Lo();H();K();tr=ensure(themes.light);});var sr=lazy(()=>Promise.resolve().then(()=>(No(),zo)));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),or.render(e.createElement(Suspense,{fallback:e.createElement("div",null,"Loading...")},e.createElement(sr,{api:t})),i);});});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-onboarding",
-  "version": "0.0.35-canary.55.3fb8b82.0",
+  "version": "0.0.35-canary.56.8463de1.0",
   "description": "Storybook Addon Onboarding - Introduces a new onboarding experience",
   "keywords": [
     "storybook-addons",