@storybook/addon-onboarding 1.0.2-canary.72.be7922a.0 → 1.0.2-canary.dd3a15a.0

package/dist/manager.mjs

@@ -524,7 +524,7 @@ export const Warning = {
       label: 'Delete now',
       backgroundColor: 'red',
     }
-  };`}]]};});function G0(){let[e,t]=useState(null);return useEffect(()=>{(async()=>{try{let o=await(await fetch("/project.json")).json();t({data:o,error:null});}catch(n){t({data:null,error:n});}})();},[]),e}var q0=v(()=>{});var dr,oc=v(()=>{dr="STORYBOOK_ADDON_ONBOARDING_CHANNEL";});var X0,Z0=v(()=>{Wo();tl();Hd();tm();g0();S0();T0();A0();_0();D0();L0();k0();V0();B0();U0();z0();q0();oc();X0=({onFinish:e,api:t,addonsStore:r,skipOnboarding:n})=>{let[o,i]=useState("imports"),a=useTheme(),s={imports:0,meta:1,story:2,args:3,customStory:4},[l,u]=useState(!1),[c,f]=Wd(),p=O0(),d=$0(o==="customStory",t,r),m=M0("syntax-highlighter-backdrop",o==="customStory"),h=G0(),g=h?.data?.language==="javascript",b=g?j0:h?.data?.framework.name==="@storybook/nextjs"?H0:W0,y=()=>{let w=b.code[3][0].code;navigator.clipboard.writeText(w.replace("// Copy the code below","")),u(!0);},x=useCallback(()=>{t.emit(dr,{step:"X:SkippedOnboarding",where:`HowToWriteAStoryModal:${o}`,type:"telemetry"});},[t,o]);return O__default.createElement(ti,{width:740,height:430,defaultOpen:!0},({Title:w,Description:C,Close:P})=>O__default.createElement(zd,null,b?O__default.createElement(v0,{activeStep:s[o]||0,data:b.code,width:480,filename:b.filename}):null,o==="customStory"&&m&&!d?.data&&O__default.createElement(Ce,{ref:c,onClick:()=>y(),style:{position:"absolute",opacity:f.width?1:0,top:m.top+m.height-45,left:m.left+m.width-(f.width??0)-10,zIndex:1e3}},l?"Copied to clipboard":"Copy code"),O__default.createElement(Gd,null,O__default.createElement(qd,null,O__default.createElement(w,{asChild:!0},O__default.createElement(Kd,null,O__default.createElement(Icons,{icon:"bookmarkhollow",width:13}),O__default.createElement("span",null,"How to write a story"))),O__default.createElement(P,{onClick:x,asChild:!0},O__default.createElement(Icons,{style:{cursor:"pointer"},icon:"cross",width:13,onClick:n,color:a.color.darkest}))),O__default.createElement(C,{asChild:!0},O__default.createElement(Yd,null,o==="imports"&&O__default.createElement(O__default.Fragment,null,O__default.createElement("div",null,O__default.createElement("h3",null,"Imports"),g?O__default.createElement("p",null,"Import a component. In this case, the Button component."):O__default.createElement(O__default.Fragment,null,O__default.createElement("p",null,"First, import ",O__default.createElement(ri,null,"Meta")," and"," ",O__default.createElement(ri,null,"StoryObj")," for type safety and autocompletion in TypeScript stories."),O__default.createElement("p",null,"Next, import a component. In this case, the Button component."))),O__default.createElement(Ce,{style:{marginTop:4},onClick:()=>{i("meta");}},"Next")),o==="meta"&&O__default.createElement(O__default.Fragment,null,O__default.createElement("div",null,O__default.createElement("h3",null,"Meta"),O__default.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."),O__default.createElement(ni,{width:"204",alt:"Title property pointing to Storybook's sidebar",src:I0})),O__default.createElement(Ln,null,O__default.createElement(Ce,{variant:"secondary",onClick:()=>i("imports")},"Previous"),O__default.createElement(Ce,{onClick:()=>i("story")},"Next"))),o==="story"&&O__default.createElement(O__default.Fragment,null,O__default.createElement("div",null,O__default.createElement("h3",null,"Story"),O__default.createElement("p",null,"Each named export is a story. Its contents specify how the story is rendered in addition to other configuration options."),O__default.createElement(ni,{width:"190",alt:"Story export pointing to the sidebar entry of the story",src:N0})),O__default.createElement(Ln,null,O__default.createElement(Ce,{variant:"secondary",onClick:()=>i("meta")},"Previous"),O__default.createElement(Ce,{onClick:()=>i("args")},"Next"))),o==="args"&&O__default.createElement(O__default.Fragment,null,O__default.createElement("div",null,O__default.createElement("h3",null,"Args"),O__default.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."),O__default.createElement(ni,{alt:"Args mapped to their controls in Storybook",width:"253",src:F0})),O__default.createElement(Ln,null,O__default.createElement(Ce,{variant:"secondary",onClick:()=>i("story")},"Previous"),O__default.createElement(Ce,{onClick:()=>i("customStory")},"Next"))),o==="customStory"&&(d?.error?null:O__default.createElement(O__default.Fragment,null,O__default.createElement("div",null,O__default.createElement("h3",null,"Create your first story"),O__default.createElement("p",null,"Now it's your turn. See how easy it is to create your first story by following these steps below."),O__default.createElement(x0,null,O__default.createElement(Ra,{isCompleted:l||d?.data,index:1},"Copy the Warning story."),O__default.createElement(Ra,{isCompleted:d?.data,index:2},O__default.createElement(em,null,"Open the Button story in your current working directory."),p?.data&&O__default.createElement(ri,null,p.data.replaceAll("/","/\u200B").replaceAll("\\","\\\u200B"))),O__default.createElement(Ra,{isCompleted:d?.data,index:3},"Paste it at the bottom of the file and save."))),O__default.createElement(Ln,null,O__default.createElement(Ce,{variant:"secondary",onClick:()=>i("args")},"Previous"),d?.data?O__default.createElement(Ce,{onClick:()=>e()},"Go to story"):null))))),O__default.createElement(Xd,null,O__default.createElement(Zd,null),O__default.createElement(Qd,null),O__default.createElement(Jd,null)))))};});var J0={};sc(J0,{default:()=>Q0});function Q0({api:e}){let[t,r]=useState(!0),[n,o]=useState(!1),[i,a]=useState("1:Welcome"),s=useCallback(()=>{let l=new URL(window.location.href),u=decodeURIComponent(l.searchParams.get("path"));l.search=`?path=${u}&onboarding=false`,history.replaceState({},"",l.href),e.setQueryParams({onboarding:"false"}),r(!1);},[r,e]);return useEffect(()=>{e.emit(dr,{step:"1:Welcome",type:"telemetry"});},[]),useEffect(()=>{i!=="1:Welcome"&&e.emit(dr,{step:i,type:"telemetry"});},[e,i]),useEffect(()=>{let l;return i==="4:VisitNewStory"&&(o(!0),l=window.setTimeout(()=>{a("5:ConfigureYourProject");},2e3)),()=>{clearTimeout(l);}},[i]),useEffect(()=>{let l=e.getCurrentStoryData()?.id;e.setQueryParams({onboarding:"true"}),l!=="example-button--primary"&&e.selectStory("example-button--primary",void 0,{ref:void 0});},[]),t?O__default.createElement(ThemeProvider,{theme:tO},t&&n&&O__default.createElement(Bo,{numberOfPieces:800,recycle:!1,tweenDuration:2e4,onConfettiComplete:l=>{l.reset(),o(!1);}}),t&&i==="1:Welcome"&&O__default.createElement(Nd,{onProceed:()=>{a("2:StorybookTour");},skipOnboarding:()=>{s(),e.emit(dr,{step:"X:SkippedOnboarding",where:"WelcomeModal",type:"telemetry"});}}),t&&(i==="2:StorybookTour"||i==="5:ConfigureYourProject")&&O__default.createElement(Bf,{api:e,isFinalStep:i==="5:ConfigureYourProject",onFirstTourDone:()=>{a("3:WriteYourStory");},onLastTourDone:()=>{e.selectStory("configure-your-project--docs"),e.emit(dr,{step:"6:FinishedOnboarding",type:"telemetry"}),s();}}),t&&i==="3:WriteYourStory"&&O__default.createElement(X0,{api:e,addonsStore:addons,onFinish:()=>{e.selectStory("example-button--warning"),a("4:VisitNewStory");},skipOnboarding:s})):null}var tO,eb=v(()=>{Wf();Vd();Z0();hs();oc();tO=convert();});var sO=lazy(()=>Promise.resolve().then(()=>(eb(),J0)));addons.register("@storybook/addon-onboarding",async e=>{let t=e.getUrlState(),r=t.path==="/onboarding"||t.queryParams.onboarding==="true";e.once(STORY_SPECIFIED,()=>{if(!(!!e.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;e.togglePanel(!0),e.togglePanelPosition("bottom"),e.setSelectedPanel("addon-controls");let o=document.createElement("div");o.id="storybook-addon-onboarding",document.body.appendChild(o),Do.render(O__default.createElement(Suspense,{fallback:O__default.createElement("div",null,"Loading...")},O__default.createElement(sO,{api:e})),o);});});
+  };`}]]};});function G0(){let[e,t]=useState(null);return useEffect(()=>{(async()=>{try{let o=await(await fetch("/project.json")).json();t({data:o,error:null});}catch(n){t({data:null,error:n});}})();},[]),e}var q0=v(()=>{});var dr,oc=v(()=>{dr="STORYBOOK_ADDON_ONBOARDING_CHANNEL";});var X0,Z0=v(()=>{Wo();tl();Hd();tm();g0();S0();T0();A0();_0();D0();L0();k0();V0();B0();U0();z0();q0();oc();X0=({onFinish:e,api:t,addonsStore:r,skipOnboarding:n})=>{let[o,i]=useState("imports"),a=useTheme(),s={imports:0,meta:1,story:2,args:3,customStory:4},[l,u]=useState(!1),[c,f]=Wd(),p=O0(),d=$0(o==="customStory",t,r),m=M0("syntax-highlighter-backdrop",o==="customStory"),h=G0(),g=h?.data?.language==="javascript",b=g?j0:h?.data?.framework.name==="@storybook/nextjs"?H0:W0,y=()=>{let w=b.code[3][0].code;navigator.clipboard.writeText(w.replace("// Copy the code below","")),u(!0);},x=useCallback(()=>{t.emit(dr,{step:"X:SkippedOnboarding",where:`HowToWriteAStoryModal:${o}`,type:"telemetry"});},[t,o]);return O__default.createElement(ti,{width:740,height:430,defaultOpen:!0},({Title:w,Description:C,Close:P})=>O__default.createElement(zd,null,b?O__default.createElement(v0,{activeStep:s[o]||0,data:b.code,width:480,filename:b.filename}):null,o==="customStory"&&m&&!d?.data&&O__default.createElement(Ce,{ref:c,onClick:()=>y(),style:{position:"absolute",opacity:f.width?1:0,top:m.top+m.height-45,left:m.left+m.width-(f.width??0)-10,zIndex:1e3}},l?"Copied to clipboard":"Copy code"),O__default.createElement(Gd,null,O__default.createElement(qd,null,O__default.createElement(w,{asChild:!0},O__default.createElement(Kd,null,O__default.createElement(Icons,{icon:"bookmarkhollow",width:13}),O__default.createElement("span",null,"How to write a story"))),O__default.createElement(P,{onClick:x,asChild:!0},O__default.createElement(Icons,{style:{cursor:"pointer"},icon:"cross",width:13,onClick:n,color:a.color.darkest}))),O__default.createElement(C,{asChild:!0},O__default.createElement(Yd,null,o==="imports"&&O__default.createElement(O__default.Fragment,null,O__default.createElement("div",null,O__default.createElement("h3",null,"Imports"),g?O__default.createElement("p",null,"Import a component. In this case, the Button component."):O__default.createElement(O__default.Fragment,null,O__default.createElement("p",null,"First, import ",O__default.createElement(ri,null,"Meta")," and"," ",O__default.createElement(ri,null,"StoryObj")," for type safety and autocompletion in TypeScript stories."),O__default.createElement("p",null,"Next, import a component. In this case, the Button component."))),O__default.createElement(Ce,{style:{marginTop:4},onClick:()=>{i("meta");}},"Next")),o==="meta"&&O__default.createElement(O__default.Fragment,null,O__default.createElement("div",null,O__default.createElement("h3",null,"Meta"),O__default.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."),O__default.createElement(ni,{width:"204",alt:"Title property pointing to Storybook's sidebar",src:I0})),O__default.createElement(Ln,null,O__default.createElement(Ce,{variant:"secondary",onClick:()=>i("imports")},"Previous"),O__default.createElement(Ce,{onClick:()=>i("story")},"Next"))),o==="story"&&O__default.createElement(O__default.Fragment,null,O__default.createElement("div",null,O__default.createElement("h3",null,"Story"),O__default.createElement("p",null,"Each named export is a story. Its contents specify how the story is rendered in addition to other configuration options."),O__default.createElement(ni,{width:"190",alt:"Story export pointing to the sidebar entry of the story",src:N0})),O__default.createElement(Ln,null,O__default.createElement(Ce,{variant:"secondary",onClick:()=>i("meta")},"Previous"),O__default.createElement(Ce,{onClick:()=>i("args")},"Next"))),o==="args"&&O__default.createElement(O__default.Fragment,null,O__default.createElement("div",null,O__default.createElement("h3",null,"Args"),O__default.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."),O__default.createElement(ni,{alt:"Args mapped to their controls in Storybook",width:"253",src:F0})),O__default.createElement(Ln,null,O__default.createElement(Ce,{variant:"secondary",onClick:()=>i("story")},"Previous"),O__default.createElement(Ce,{onClick:()=>i("customStory")},"Next"))),o==="customStory"&&(d?.error?null:O__default.createElement(O__default.Fragment,null,O__default.createElement("div",null,O__default.createElement("h3",null,"Create your first story"),O__default.createElement("p",null,"Now it's your turn. See how easy it is to create your first story by following these steps below."),O__default.createElement(x0,null,O__default.createElement(Ra,{isCompleted:l||d?.data,index:1},"Copy the Warning story."),O__default.createElement(Ra,{isCompleted:d?.data,index:2},O__default.createElement(em,null,"Open the Button story in your current working directory."),p?.data&&O__default.createElement(ri,null,p.data.replaceAll("/","/\u200B").replaceAll("\\","\\\u200B"))),O__default.createElement(Ra,{isCompleted:d?.data,index:3},"Paste it at the bottom of the file and save."))),O__default.createElement(Ln,null,O__default.createElement(Ce,{variant:"secondary",onClick:()=>i("args")},"Previous"),d?.data?O__default.createElement(Ce,{onClick:()=>e()},"Go to story"):null))))),O__default.createElement(Xd,null,O__default.createElement(Zd,null),O__default.createElement(Qd,null),O__default.createElement(Jd,null)))))};});var J0={};sc(J0,{default:()=>Q0});function Q0({api:e}){let[t,r]=useState(!0),[n,o]=useState(!1),[i,a]=useState("1:Welcome"),s=useCallback(()=>{let l=new URL(window.location.href),u=decodeURIComponent(l.searchParams.get("path"));l.search=`?path=${u}&onboarding=false`,history.replaceState({},"",l.href),e.setQueryParams({onboarding:"false"}),r(!1);},[r,e]);return useEffect(()=>{e.emit(dr,{step:"1:Welcome",type:"telemetry"});},[]),useEffect(()=>{e.emit(dr,{step:i,type:"telemetry"});},[e,i]),useEffect(()=>{let l;return i==="4:VisitNewStory"&&(o(!0),l=window.setTimeout(()=>{a("5:ConfigureYourProject");},2e3)),()=>{clearTimeout(l);}},[i]),useEffect(()=>{let l=e.getCurrentStoryData()?.id;e.setQueryParams({onboarding:"true"}),l!=="example-button--primary"&&e.selectStory("example-button--primary",void 0,{ref:void 0});},[]),t?O__default.createElement(ThemeProvider,{theme:tO},t&&n&&O__default.createElement(Bo,{numberOfPieces:800,recycle:!1,tweenDuration:2e4,onConfettiComplete:l=>{l.reset(),o(!1);}}),t&&i==="1:Welcome"&&O__default.createElement(Nd,{onProceed:()=>{a("2:StorybookTour");},skipOnboarding:()=>{s(),e.emit(dr,{step:"X:SkippedOnboarding",where:"WelcomeModal",type:"telemetry"});}}),t&&(i==="2:StorybookTour"||i==="5:ConfigureYourProject")&&O__default.createElement(Bf,{api:e,isFinalStep:i==="5:ConfigureYourProject",onFirstTourDone:()=>{a("3:WriteYourStory");},onLastTourDone:()=>{e.selectStory("configure-your-project--docs"),e.emit(dr,{step:"6:FinishedOnboarding",type:"telemetry"}),s();}}),t&&i==="3:WriteYourStory"&&O__default.createElement(X0,{api:e,addonsStore:addons,onFinish:()=>{e.selectStory("example-button--warning"),a("4:VisitNewStory");},skipOnboarding:s})):null}var tO,eb=v(()=>{Wf();Vd();Z0();hs();oc();tO=convert();});var sO=lazy(()=>Promise.resolve().then(()=>(eb(),J0)));addons.register("@storybook/addon-onboarding",async e=>{let t=e.getUrlState(),r=t.path==="/onboarding"||t.queryParams.onboarding==="true";e.once(STORY_SPECIFIED,()=>{if(!(!!e.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;e.togglePanel(!0),e.togglePanelPosition("bottom"),e.setSelectedPanel("addon-controls");let o=document.createElement("div");o.id="storybook-addon-onboarding",document.body.appendChild(o),Do.render(O__default.createElement(Suspense,{fallback:O__default.createElement("div",null,"Loading...")},O__default.createElement(sO,{api:e})),o);});});
 /*! Bundled license information:
 
 exenv/index.js:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-onboarding",
-  "version": "1.0.2-canary.72.be7922a.0",
+  "version": "1.0.2-canary.dd3a15a.0",
   "description": "Storybook Addon Onboarding - Introduces a new onboarding experience",
   "keywords": [
     "storybook-addons",