@storybook/addon-onboarding 9.1.0-alpha.1 → 9.1.0-alpha.10
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.
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React2 from 'react';
|
|
2
2
|
import React2__default, { forwardRef, useRef, useEffect, createElement, useState, useCallback, isValidElement, cloneElement } from 'react';
|
|
3
|
-
import { SyntaxHighlighter, IconButton } from 'storybook/internal/components';
|
|
3
|
+
import { Modal, Form, SyntaxHighlighter, Button as Button$1, IconButton } from 'storybook/internal/components';
|
|
4
4
|
import { ADDON_ID } from 'storybook/internal/controls';
|
|
5
5
|
import { SAVE_STORY_RESPONSE } from 'storybook/internal/core-events';
|
|
6
6
|
import { styled, keyframes, convert, ThemeProvider, themes, useTheme, color } from 'storybook/theming';
|
|
@@ -125,13 +125,13 @@ Valid keys: `+JSON.stringify(Object.keys(shapeTypes),null," "));var error=check
|
|
|
125
125
|
@container (min-height: 1px) {
|
|
126
126
|
.__floater__arrow span { flex-direction: column; }
|
|
127
127
|
}
|
|
128
|
-
`,document.head.appendChild(style),()=>{let styleElement=document.querySelector("#sb-onboarding-arrow-style");styleElement&&styleElement.remove();}},[]),React2__default.createElement(TooltipBody,{...tooltipProps,style:step.styles?.tooltip},React2__default.createElement(Wrapper2,null,React2__default.createElement(TooltipHeader,null,step.title&&React2__default.createElement(TooltipTitle,null,step.title),React2__default.createElement(IconButton,{...closeProps,onClick:closeProps.onClick,variant:"solid"},React2__default.createElement(CloseAltIcon,null))),React2__default.createElement(TooltipContent,null,step.content)),React2__default.createElement(TooltipFooter,{id:"buttonNext"},React2__default.createElement(Count,null,index+1," of ",size),!step.hideNextButton&&React2__default.createElement(Button,{...primaryProps,onClick:step.onNextButtonClick||primaryProps.onClick,variant:"white"},index+1===size?"Done":"Next"))));function GuidedTour({step,steps,onClose,onComplete}){let[stepIndex,setStepIndex]=useState(null),theme2=useTheme();return useEffect(()=>{let timeout;return setStepIndex(current=>{let index=steps.findIndex(({key})=>key===step);return index===-1?null:index===current?current:(timeout=setTimeout(setStepIndex,500,index),null)}),()=>clearTimeout(timeout)},[step,steps]),stepIndex===null?null:React2__default.createElement(components_default,{continuous:!0,steps,stepIndex,spotlightPadding:0,disableCloseOnEsc:!0,disableOverlayClose:!0,disableScrolling:!0,callback:data=>{data.action===ACTIONS.CLOSE&&onClose(),data.action===ACTIONS.NEXT&&data.index===data.size-1&&onComplete();},floaterProps:{disableAnimation:!0,styles:{arrow:{length:20,spread:2},floater:{filter:theme2.base==="light"?"drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1))":"drop-shadow(#fff5 0px 0px 0.5px) drop-shadow(#fff5 0px 0px 0.5px)"}}},tooltipComponent:Tooltip,styles:{overlay:{mixBlendMode:"unset",backgroundColor:steps[stepIndex]?.target==="body"?"rgba(27, 28, 29, 0.2)":"none"},spotlight:{backgroundColor:"none",border:`solid 2px ${theme2.color.secondary}`,boxShadow:"0px 0px 0px 9999px rgba(27, 28, 29, 0.2)"},tooltip:{width:280,color:theme2.color.lightest,background:theme2.color.secondary},options:{zIndex:9998,primaryColor:theme2.color.secondary,arrowColor:theme2.color.secondary}}})}var fadeIn=keyframes({from:{opacity:0},to:{opacity:1}}),slideIn=keyframes({from:{transform:"translate(0, 20px)",opacity:0},to:{transform:"translate(0, 0)",opacity:1}}),scaleIn=keyframes({from:{opacity:0,transform:"scale(0.8)"},to:{opacity:1,transform:"scale(1)"}}),rotate=keyframes({"0%":{transform:"rotate(0deg)"},"100%":{transform:"rotate(360deg)"}}),Wrapper3=styled.div(({visible})=>({position:"fixed",top:0,left:0,right:0,bottom:0,display:"flex",opacity:visible?1:0,alignItems:"center",justifyContent:"center",zIndex:1e3,transition:"opacity 1s 0.5s"})),Backdrop=styled.div({position:"absolute",top:0,left:0,right:0,bottom:0,animation:`${fadeIn} 2s`,background:`
|
|
128
|
+
`,document.head.appendChild(style),()=>{let styleElement=document.querySelector("#sb-onboarding-arrow-style");styleElement&&styleElement.remove();}},[]),React2__default.createElement(TooltipBody,{...tooltipProps,style:step.styles?.tooltip},React2__default.createElement(Wrapper2,null,React2__default.createElement(TooltipHeader,null,step.title&&React2__default.createElement(TooltipTitle,null,step.title),React2__default.createElement(IconButton,{...closeProps,onClick:closeProps.onClick,variant:"solid"},React2__default.createElement(CloseAltIcon,null))),React2__default.createElement(TooltipContent,null,step.content)),React2__default.createElement(TooltipFooter,{id:"buttonNext"},React2__default.createElement(Count,null,index+1," of ",size),!step.hideNextButton&&React2__default.createElement(Button,{...primaryProps,onClick:step.onNextButtonClick||primaryProps.onClick,variant:"white"},index+1===size?"Done":"Next"))));function GuidedTour({step,steps,onClose,onComplete}){let[stepIndex,setStepIndex]=useState(null),theme2=useTheme();return useEffect(()=>{let timeout;return setStepIndex(current=>{let index=steps.findIndex(({key})=>key===step);return index===-1?null:index===current?current:(timeout=setTimeout(setStepIndex,500,index),null)}),()=>clearTimeout(timeout)},[step,steps]),stepIndex===null?null:React2__default.createElement(components_default,{continuous:!0,steps,stepIndex,spotlightPadding:0,disableCloseOnEsc:!0,disableOverlayClose:!0,disableScrolling:!0,callback:data=>{data.action===ACTIONS.CLOSE&&onClose(),data.action===ACTIONS.NEXT&&data.index===data.size-1&&onComplete();},floaterProps:{disableAnimation:!0,styles:{arrow:{length:20,spread:2},floater:{filter:theme2.base==="light"?"drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1))":"drop-shadow(#fff5 0px 0px 0.5px) drop-shadow(#fff5 0px 0px 0.5px)"}}},tooltipComponent:Tooltip,styles:{overlay:{mixBlendMode:"unset",backgroundColor:steps[stepIndex]?.target==="body"?"rgba(27, 28, 29, 0.2)":"none"},spotlight:{backgroundColor:"none",border:`solid 2px ${theme2.color.secondary}`,boxShadow:"0px 0px 0px 9999px rgba(27, 28, 29, 0.2)"},tooltip:{width:280,color:theme2.color.lightest,background:theme2.color.secondary},options:{zIndex:9998,primaryColor:theme2.color.secondary,arrowColor:theme2.color.secondary}}})}function isChromatic(windowArg){let windowToCheck=windowArg||typeof window<"u"&&window;return !!(windowToCheck&&(windowToCheck.navigator.userAgent.match(/Chromatic/)||windowToCheck.location.href.match(/chromatic=true/)))}var Content=styled(Modal.Content)(({theme:theme2})=>({fontSize:theme2.typography.size.s2,color:theme2.color.defaultText,gap:8})),Row=styled.div({display:"grid",gridTemplateColumns:"1fr 1fr",gap:14,marginBottom:8}),Question=styled.div(({theme:theme2})=>({marginTop:8,marginBottom:2,fontWeight:theme2.typography.weight.bold})),Label=styled.label({display:"flex",gap:8,'&:has(input[type="checkbox"]:not(:disabled), input[type="radio"]:not(:disabled))':{cursor:"pointer"}}),Actions=styled(Modal.Actions)({marginTop:8}),Checkbox=styled(Form.Checkbox)({margin:2}),IntentSurvey=({onComplete,onDismiss})=>{let[isSubmitting,setIsSubmitting]=useState(!1),[formFields,setFormFields]=useState({building:{label:"What are you building?",type:"checkbox",required:!0,options:shuffleObject({"design-system":{label:"Design system"},"application-ui":{label:"Application UI"}}),values:{"design-system":!1,"application-ui":!1}},interest:{label:"Which of these are you interested in?",type:"checkbox",required:!0,options:shuffleObject({"ui-documentation":{label:"Generating UI docs"},"functional-testing":{label:"Functional testing"},"accessibility-testing":{label:"Accessibility testing"},"visual-testing":{label:"Visual testing"},"ai-augmented-development":{label:"Building UI with AI"},"team-collaboration":{label:"Team collaboration"},"design-handoff":{label:"Design handoff"}}),values:{"ui-documentation":!1,"functional-testing":!1,"accessibility-testing":!1,"visual-testing":!1,"ai-augmented-development":!1,"team-collaboration":!1,"design-handoff":!1}},referrer:{label:"How did you learn about Storybook?",type:"select",required:!0,options:shuffleObject({"we-use-it-at-work":{label:"We use it at work"},"via-friend-or-colleague":{label:"Via friend or colleague"},"via-social-media":{label:"Via social media"},youtube:{label:"YouTube"},"web-search":{label:"Web Search"},"ai-agent":{label:"AI Agent (e.g. ChatGPT)"}}),values:{"we-use-it-at-work":!1,"via-friend-or-colleague":!1,"via-social-media":!1,youtube:!1,"web-search":!1,"ai-agent":!1}}}),updateFormData=(key,optionOrValue,value)=>{let field=formFields[key];setFormFields(fields=>{if(field.type==="checkbox"){let values={...field.values,[optionOrValue]:!!value};return {...fields,[key]:{...field,values}}}if(field.type==="select"){let values=Object.fromEntries(Object.entries(field.values).map(([opt])=>[opt,opt===optionOrValue]));return {...fields,[key]:{...field,values}}}return fields});},isValid=Object.values(formFields).every(field=>field.required?Object.values(field.values).some(value=>value===!0):!0);return React2__default.createElement(Modal,{defaultOpen:!0,width:420,onEscapeKeyDown:onDismiss},React2__default.createElement(Form,{onSubmit:e2=>{isValid&&(e2.preventDefault(),setIsSubmitting(!0),onComplete(Object.fromEntries(Object.entries(formFields).map(([key,field])=>[key,field.values]))));},id:"intent-survey-form"},React2__default.createElement(Content,null,React2__default.createElement(Modal.Header,null,React2__default.createElement(Modal.Title,null,"Help improve Storybook")),Object.keys(formFields).map(key=>{let field=formFields[key];return React2__default.createElement(React2__default.Fragment,{key},React2__default.createElement(Question,null,field.label),field.type==="checkbox"&&React2__default.createElement(Row,null,Object.entries(field.options).map(([opt,option])=>{let id=`${key}:${opt}`;return React2__default.createElement("div",{key:id},React2__default.createElement(Label,{htmlFor:id},React2__default.createElement(Checkbox,{name:id,id,checked:field.values[opt],disabled:isSubmitting,onChange:e2=>updateFormData(key,opt,e2.target.checked)}),option.label))})),field.type==="select"&&React2__default.createElement(Form.Select,{name:key,id:key,value:Object.entries(field.values).find(([,isSelected])=>isSelected)?.[0]||"",required:field.required,disabled:isSubmitting,onChange:e2=>updateFormData(key,e2.target.value)},React2__default.createElement("option",{disabled:!0,hidden:!0,value:""},"Select an option..."),Object.entries(field.options).map(([opt,option])=>React2__default.createElement("option",{key:opt,value:opt},option.label))))}),React2__default.createElement(Actions,null,React2__default.createElement(Button$1,{disabled:isSubmitting||!isValid,size:"medium",type:"submit",variant:"solid"},"Submit")))))};function shuffle(array){for(let i2=array.length-1;i2>0;i2--){let j=Math.floor(Math.random()*(i2+1));[array[i2],array[j]]=[array[j],array[i2]];}return array}function shuffleObject(object){return isChromatic()?object:Object.fromEntries(shuffle(Object.entries(object)))}var fadeIn=keyframes({from:{opacity:0},to:{opacity:1}}),slideIn=keyframes({from:{transform:"translate(0, 20px)",opacity:0},to:{transform:"translate(0, 0)",opacity:1}}),scaleIn=keyframes({from:{opacity:0,transform:"scale(0.8)"},to:{opacity:1,transform:"scale(1)"}}),rotate=keyframes({"0%":{transform:"rotate(0deg)"},"100%":{transform:"rotate(360deg)"}}),Wrapper3=styled.div(({visible})=>({position:"fixed",top:0,left:0,right:0,bottom:0,display:"flex",opacity:visible?1:0,alignItems:"center",justifyContent:"center",zIndex:1e3,transition:"opacity 1s 0.5s"})),Backdrop=styled.div({position:"absolute",top:0,left:0,right:0,bottom:0,animation:`${fadeIn} 2s`,background:`
|
|
129
129
|
radial-gradient(90% 90%, #ff4785 0%, #db5698 30%, #1ea7fdcc 100%),
|
|
130
130
|
radial-gradient(circle, #ff4785 0%, transparent 80%),
|
|
131
131
|
radial-gradient(circle at 30% 40%, #fc521f99 0%, #fc521f66 20%, transparent 40%),
|
|
132
132
|
radial-gradient(circle at 75% 75%, #fc521f99 0%, #fc521f77 18%, transparent 30%)`,"&::before":{opacity:.5,background:`
|
|
133
133
|
radial-gradient(circle at 30% 40%, #fc521f99 0%, #fc521f66 10%, transparent 20%),
|
|
134
|
-
radial-gradient(circle at 75% 75%, #fc521f99 0%, #fc521f77 8%, transparent 20%)`,content:'""',position:"absolute",top:"-50vw",left:"-50vh",transform:"translate(-50%, -50%)",width:"calc(100vw + 100vh)",height:"calc(100vw + 100vh)",animation:`${rotate} 12s linear infinite`}}),
|
|
135
|
-
`).length,steps=[{key:"2:Controls",target:"#control-primary",title:"Interactive story playground",content:React2__default.createElement(React2__default.Fragment,null,"See how a story renders with different data and state without touching code. Try it out by toggling this button.",React2__default.createElement(HighlightElement,{targetSelector:"#control-primary",pulsating:!0})),offset:20,placement:"right",disableBeacon:!0,disableOverlay:!0,spotlightClicks:!0,onNextButtonClick:()=>{document.querySelector("#control-primary").click();}},{key:"3:SaveFromControls",target:'button[aria-label="Create new story with these settings"]',title:"Save your changes as a new story",content:React2__default.createElement(React2__default.Fragment,null,"Great! Storybook stories represent the key states of each of your components. After modifying a story, you can save your changes from here or reset it.",React2__default.createElement(HighlightElement,{targetSelector:"button[aria-label='Create new story with these settings']"})),offset:6,placement:"top",disableBeacon:!0,disableOverlay:!0,spotlightClicks:!0,onNextButtonClick:()=>{document.querySelector('button[aria-label="Create new story with these settings"]').click();},styles:{tooltip:{width:400}}},{key:"5:StoryCreated",target:'#storybook-explorer-tree [data-selected="true"]',title:"You just added your first story!",content:React2__default.createElement(React2__default.Fragment,null,"Well done! You just created your first story from the Storybook manager. This automatically added a few lines of code in"," ",React2__default.createElement(SpanHighlight,null,createdStory?.sourceFileName),".",snippet&&React2__default.createElement(ThemeProvider,{theme:convert(themes.dark)},React2__default.createElement(CodeWrapper,null,React2__default.createElement(SyntaxHighlighter,{language:"jsx",showLineNumbers:!0,startingLineNumber},snippet)))),offset:12,placement:"right",disableBeacon:!0,disableOverlay:!0,styles:{tooltip:{width:400}}}];return React2__default.createElement(ThemeProvider,{theme},showConfetti&&React2__default.createElement(Confetti,null),step==="1:Intro"?React2__default.createElement(SplashScreen,{onDismiss:()=>setStep("2:Controls")}):React2__default.createElement(GuidedTour,{step,steps,onClose:disableOnboarding,onComplete:
|
|
134
|
+
radial-gradient(circle at 75% 75%, #fc521f99 0%, #fc521f77 8%, transparent 20%)`,content:'""',position:"absolute",top:"-50vw",left:"-50vh",transform:"translate(-50%, -50%)",width:"calc(100vw + 100vh)",height:"calc(100vw + 100vh)",animation:`${rotate} 12s linear infinite`}}),Content2=styled.div(({visible})=>({position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",color:"white",textAlign:"center",width:"90vw",minWidth:290,maxWidth:410,opacity:visible?1:0,transition:"opacity 0.5s",h1:{fontSize:45,fontWeight:"bold",animation:`${slideIn} 1.5s 1s backwards`}})),Features=styled.div({display:"flex",marginTop:40,div:{display:"flex",flexBasis:"33.33%",flexDirection:"column",alignItems:"center",animation:`${slideIn} 1s backwards`,"&:nth-child(1)":{animationDelay:"2s"},"&:nth-child(2)":{animationDelay:"2.5s"},"&:nth-child(3)":{animationDelay:"3s"}},svg:{marginBottom:10}}),RadialButton=styled.button({display:"inline-flex",position:"relative",alignItems:"center",justifyContent:"center",marginTop:40,width:48,height:48,padding:0,borderRadius:"50%",border:0,outline:"none",background:"rgba(255, 255, 255, 0.3)",cursor:"pointer",transition:"background 0.2s",animation:`${scaleIn} 1.5s 4s backwards`,"&:hover, &:focus":{background:"rgba(255, 255, 255, 0.4)"}}),ArrowIcon=styled(ArrowRightIcon)({width:30,color:"white"}),ProgressCircle=styled.svg(({progress})=>({position:"absolute",top:-1,left:-1,width:"50px!important",height:"50px!important",transform:"rotate(-90deg)",color:"white",circle:{r:"24",cx:"25",cy:"25",fill:"transparent",stroke:progress?"currentColor":"transparent",strokeWidth:"1",strokeLinecap:"round",strokeDasharray:Math.PI*48}})),SplashScreen=({onDismiss,duration=6e3})=>{let[progress,setProgress]=useState(-4e5/duration),[visible,setVisible]=useState(!0),ready=progress>=100,dismiss=useCallback(()=>{setVisible(!1);let timeout=setTimeout(onDismiss,1500);return ()=>clearTimeout(timeout)},[onDismiss]);return useEffect(()=>{if(!duration)return;let framelength=1e3/50,increment=100/(duration/framelength),interval=setInterval(()=>setProgress(prev=>prev+increment),framelength);return ()=>clearInterval(interval)},[duration]),useEffect(()=>{ready&&dismiss();},[ready,dismiss]),React2__default.createElement(Wrapper3,{visible},React2__default.createElement(Backdrop,null),React2__default.createElement(Content2,{visible},React2__default.createElement("h1",null,"Meet your new frontend workshop"),React2__default.createElement(Features,null,React2__default.createElement("div",null,React2__default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"33",height:"32"},React2__default.createElement("path",{d:"M4.06 0H32.5v28.44h-3.56V32H.5V3.56h3.56V0Zm21.33 7.11H4.06v21.33h21.33V7.11Z",fill:"currentColor"})),"Development"),React2__default.createElement("div",null,React2__default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"32",height:"32"},React2__default.createElement("path",{d:"M15.95 32c-1.85 0-3.1-1.55-3.1-3.54 0-1.1.45-2.78 1.35-5.03.9-2.3 1.35-4.51 1.35-6.81a22.21 22.21 0 0 0-5.1 3.67c-2.5 2.47-4.95 4.9-7.55 4.9-1.6 0-2.9-1.1-2.9-2.43 0-1.46 1.35-2.91 4.3-3.62 1.45-.36 3.1-.75 4.95-1.06 1.8-.31 3.8-1.02 5.9-2.08a23.77 23.77 0 0 0-6.1-2.12C5.3 13.18 2.3 12.6 1 11.28.35 10.6 0 9.9 0 9.14 0 7.82 1.2 6.8 2.95 6.8c2.65 0 5.75 3.1 7.95 5.3 1.1 1.1 2.65 2.21 4.65 3.27v-.57c0-1.77-.15-3.23-.55-4.3-.8-2.11-2.05-5.43-2.05-6.97 0-2.04 1.3-3.54 3.1-3.54 1.75 0 3.1 1.41 3.1 3.54 0 1.06-.45 2.78-1.35 5.12-.9 2.35-1.35 4.6-1.35 6.72 2.85-1.59 2.5-1.41 4.95-3.5 2.35-2.29 4-3.7 4.9-4.23.95-.58 1.9-.84 2.9-.84 1.6 0 2.8.97 2.8 2.34 0 1.5-1.25 2.78-4.15 3.62-1.4.4-3.05.75-4.9 1.1-1.9.36-3.9 1.07-6.1 2.13a23.3 23.3 0 0 0 5.95 2.08c3.65.7 6.75 1.32 8.15 2.6.7.67 1.05 1.33 1.05 2.08 0 1.33-1.2 2.43-2.95 2.43-2.95 0-6.75-4.15-8.2-5.61-.7-.7-2.2-1.72-4.4-2.96v.57c0 1.9.45 4.03 1.3 6.32.85 2.3 1.3 3.94 1.3 4.95 0 2.08-1.35 3.54-3.1 3.54Z",fill:"currentColor"})),"Testing"),React2__default.createElement("div",null,React2__default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"33",height:"32"},React2__default.createElement("path",{d:"M.5 16a16 16 0 1 1 32 0 16 16 0 0 1-32 0Zm16 12.44A12.44 12.44 0 0 1 4.3 13.53a8 8 0 1 0 9.73-9.73 12.44 12.44 0 1 1 2.47 24.64ZM12.06 16a4.44 4.44 0 1 1 0-8.89 4.44 4.44 0 0 1 0 8.89Z",fill:"currentColor",fillRule:"evenodd"})),"Documentation")),React2__default.createElement(RadialButton,{onClick:dismiss},React2__default.createElement(ArrowIcon,null),React2__default.createElement(ProgressCircle,{xmlns:"http://www.w3.org/2000/svg"},React2__default.createElement("circle",null)),React2__default.createElement(ProgressCircle,{xmlns:"http://www.w3.org/2000/svg",progress:!0},React2__default.createElement("circle",{strokeDashoffset:Math.PI*48*(1-Math.max(0,Math.min(progress,100))/100)})))))};var SpanHighlight=styled.span(({theme:theme2})=>({display:"inline-flex",borderRadius:3,padding:"0 5px",marginBottom:-2,opacity:.8,fontFamily:theme2.typography.fonts.mono,fontSize:11,border:theme2.base==="dark"?theme2.color.darkest:theme2.color.lightest,color:theme2.base==="dark"?theme2.color.lightest:theme2.color.darkest,backgroundColor:theme2.base==="dark"?"black":theme2.color.light,boxSizing:"border-box",lineHeight:"17px"})),CodeWrapper=styled.div(({theme:theme2})=>({background:theme2.background.content,borderRadius:3,marginTop:15,padding:10,fontSize:theme2.typography.size.s1,".linenumber":{opacity:.5}})),theme=convert();function Onboarding({api}){let[enabled,setEnabled]=useState(!0),[showConfetti,setShowConfetti]=useState(!1),[step,setStep]=useState("1:Intro"),[primaryControl,setPrimaryControl]=useState(),[saveFromControls,setSaveFromControls]=useState(),[createNewStoryForm,setCreateNewStoryForm]=useState(),[createdStory,setCreatedStory]=useState(),selectStory=useCallback(storyId=>{try{let{id,refId}=api.getCurrentStoryData()||{};(id!==storyId||refId!==void 0)&&api.selectStory(storyId);}catch{}},[api]),disableOnboarding=useCallback(()=>{let url=new URL(window.location.href),path=decodeURIComponent(url.searchParams.get("path"));url.search=`?path=${path}&onboarding=false`,history.replaceState({},"",url.href),api.setQueryParams({onboarding:"false"}),setEnabled(!1);},[api,setEnabled]),completeOnboarding=useCallback(answers=>{api.emit(STORYBOOK_ADDON_ONBOARDING_CHANNEL,{step:"7:FinishedOnboarding",type:"telemetry"}),api.emit(STORYBOOK_ADDON_ONBOARDING_CHANNEL,{answers,type:"survey"}),selectStory("configure-your-project--docs"),disableOnboarding();},[api,selectStory,disableOnboarding]);if(useEffect(()=>{api.setQueryParams({onboarding:"true"}),selectStory("example-button--primary"),api.togglePanel(!0),api.togglePanelPosition("bottom"),api.setSelectedPanel(ADDON_ID);},[api,selectStory]),useEffect(()=>{let observer=new MutationObserver(()=>{setPrimaryControl(document.getElementById("control-primary")),setSaveFromControls(document.getElementById("save-from-controls")),setCreateNewStoryForm(document.getElementById("create-new-story-form"));});return observer.observe(document.body,{childList:!0,subtree:!0}),()=>observer.disconnect()},[]),useEffect(()=>{setStep(current=>["1:Intro","5:StoryCreated","6:IntentSurvey","7:FinishedOnboarding"].includes(current)?current:createNewStoryForm?"4:CreateStory":saveFromControls?"3:SaveFromControls":primaryControl?"2:Controls":"1:Intro");},[createNewStoryForm,primaryControl,saveFromControls]),useEffect(()=>api.on(SAVE_STORY_RESPONSE,({payload,success})=>{!success||!payload?.newStoryName||(setCreatedStory(payload),setShowConfetti(!0),setStep("5:StoryCreated"),setTimeout(()=>api.clearNotification("save-story-success")));}),[api]),useEffect(()=>api.emit(STORYBOOK_ADDON_ONBOARDING_CHANNEL,{step,type:"telemetry"}),[api,step]),!enabled)return null;let source=createdStory?.sourceFileContent,startIndex=source?.lastIndexOf(`export const ${createdStory?.newStoryExportName}`),snippet=source?.slice(startIndex).trim(),startingLineNumber=source?.slice(0,startIndex).split(`
|
|
135
|
+
`).length,steps=[{key:"2:Controls",target:"#control-primary",title:"Interactive story playground",content:React2__default.createElement(React2__default.Fragment,null,"See how a story renders with different data and state without touching code. Try it out by toggling this button.",React2__default.createElement(HighlightElement,{targetSelector:"#control-primary",pulsating:!0})),offset:20,placement:"right",disableBeacon:!0,disableOverlay:!0,spotlightClicks:!0,onNextButtonClick:()=>{document.querySelector("#control-primary").click();}},{key:"3:SaveFromControls",target:'button[aria-label="Create new story with these settings"]',title:"Save your changes as a new story",content:React2__default.createElement(React2__default.Fragment,null,"Great! Storybook stories represent the key states of each of your components. After modifying a story, you can save your changes from here or reset it.",React2__default.createElement(HighlightElement,{targetSelector:"button[aria-label='Create new story with these settings']"})),offset:6,placement:"top",disableBeacon:!0,disableOverlay:!0,spotlightClicks:!0,onNextButtonClick:()=>{document.querySelector('button[aria-label="Create new story with these settings"]').click();},styles:{tooltip:{width:400}}},{key:"5:StoryCreated",target:'#storybook-explorer-tree [data-selected="true"]',title:"You just added your first story!",content:React2__default.createElement(React2__default.Fragment,null,"Well done! You just created your first story from the Storybook manager. This automatically added a few lines of code in"," ",React2__default.createElement(SpanHighlight,null,createdStory?.sourceFileName),".",snippet&&React2__default.createElement(ThemeProvider,{theme:convert(themes.dark)},React2__default.createElement(CodeWrapper,null,React2__default.createElement(SyntaxHighlighter,{language:"jsx",showLineNumbers:!0,startingLineNumber},snippet)))),offset:12,placement:"right",disableBeacon:!0,disableOverlay:!0,styles:{tooltip:{width:400}}}];return React2__default.createElement(ThemeProvider,{theme},showConfetti&&React2__default.createElement(Confetti,null),step==="1:Intro"?React2__default.createElement(SplashScreen,{onDismiss:()=>setStep("2:Controls")}):step==="6:IntentSurvey"?React2__default.createElement(IntentSurvey,{onComplete:completeOnboarding,onDismiss:disableOnboarding}):React2__default.createElement(GuidedTour,{step,steps,onClose:disableOnboarding,onComplete:()=>setStep("6:IntentSurvey")}))}
|
|
136
136
|
|
|
137
137
|
export { Onboarding as default };
|
package/dist/manager.js
CHANGED
|
@@ -4,4 +4,4 @@ import { ADDON_ID } from 'storybook/internal/controls';
|
|
|
4
4
|
import { STORY_SPECIFIED } from 'storybook/internal/core-events';
|
|
5
5
|
import { addons } from 'storybook/manager-api';
|
|
6
6
|
|
|
7
|
-
var Onboarding=lazy(()=>import('./Onboarding-
|
|
7
|
+
var Onboarding=lazy(()=>import('./Onboarding-XGKXPXUL.js'));addons.register("@storybook/addon-onboarding",async api=>{let urlState=api.getUrlState(),isOnboarding=urlState.path==="/onboarding"||urlState.queryParams.onboarding==="true";api.once(STORY_SPECIFIED,()=>{if(!(!!api.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/storybook/tree/next/code/addons/onboarding#uninstalling");return}if(!isOnboarding||window.innerWidth<730)return;api.togglePanel(!0),api.togglePanelPosition("bottom"),api.setSelectedPanel(ADDON_ID);let domNode=document.createElement("div");domNode.id="storybook-addon-onboarding",document.body.appendChild(domNode),ReactDOM.render(React.createElement(Suspense,{fallback:React.createElement("div",null)},React.createElement(Onboarding,{api})),domNode);});});
|
package/dist/preset.js
CHANGED
|
@@ -3,6 +3,6 @@
|
|
|
3
3
|
var fs = require('fs');
|
|
4
4
|
var telemetry = require('storybook/internal/telemetry');
|
|
5
5
|
|
|
6
|
-
var __require=(x=>typeof require<"u"?require:typeof Proxy<"u"?new Proxy(x,{get:(a,b)=>(typeof require<"u"?require:a)[b]}):x)(function(x){if(typeof require<"u")return require.apply(this,arguments);throw Error('Dynamic require of "'+x+'" is not supported')});var STORYBOOK_ADDON_ONBOARDING_CHANNEL="STORYBOOK_ADDON_ONBOARDING_CHANNEL";var experimental_serverChannel=async(channel,options)=>{let{disableTelemetry}=await options.presets.apply("core",{});if(!disableTelemetry){let packageJsonPath=__require.resolve("@storybook/addon-onboarding/package.json"),{version:addonVersion}=JSON.parse(fs.readFileSync(packageJsonPath,{encoding:"utf-8"}));channel.on(STORYBOOK_ADDON_ONBOARDING_CHANNEL,({type,...event})=>{type==="telemetry"
|
|
6
|
+
var __require=(x=>typeof require<"u"?require:typeof Proxy<"u"?new Proxy(x,{get:(a,b)=>(typeof require<"u"?require:a)[b]}):x)(function(x){if(typeof require<"u")return require.apply(this,arguments);throw Error('Dynamic require of "'+x+'" is not supported')});var STORYBOOK_ADDON_ONBOARDING_CHANNEL="STORYBOOK_ADDON_ONBOARDING_CHANNEL";var experimental_serverChannel=async(channel,options)=>{let{disableTelemetry}=await options.presets.apply("core",{});if(!disableTelemetry){let packageJsonPath=__require.resolve("@storybook/addon-onboarding/package.json"),{version:addonVersion}=JSON.parse(fs.readFileSync(packageJsonPath,{encoding:"utf-8"}));channel.on(STORYBOOK_ADDON_ONBOARDING_CHANNEL,({type,...event})=>{type==="telemetry"?telemetry.telemetry("addon-onboarding",{...event,addonVersion}):type==="survey"&&telemetry.telemetry("onboarding-survey",{...event,addonVersion});});}return channel};
|
|
7
7
|
|
|
8
8
|
exports.experimental_serverChannel = experimental_serverChannel;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@storybook/addon-onboarding",
|
|
3
|
-
"version": "9.1.0-alpha.
|
|
3
|
+
"version": "9.1.0-alpha.10",
|
|
4
4
|
"description": "Storybook Addon Onboarding - Introduces a new onboarding experience",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"storybook-addons",
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
"typescript": "^5.8.3"
|
|
54
54
|
},
|
|
55
55
|
"peerDependencies": {
|
|
56
|
-
"storybook": "^9.1.0-alpha.
|
|
56
|
+
"storybook": "^9.1.0-alpha.10"
|
|
57
57
|
},
|
|
58
58
|
"publishConfig": {
|
|
59
59
|
"access": "public"
|