@storybook/addon-onboarding 9.1.0 → 9.1.1
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.
|
@@ -125,7 +125,7 @@ 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}}})}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
|
|
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 discover 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%),
|
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-64RGZKLB.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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@storybook/addon-onboarding",
|
|
3
|
-
"version": "9.1.
|
|
3
|
+
"version": "9.1.1",
|
|
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.
|
|
56
|
+
"storybook": "^9.1.1"
|
|
57
57
|
},
|
|
58
58
|
"publishConfig": {
|
|
59
59
|
"access": "public"
|