@storybook/addon-onboarding 0.0.7--canary.4.a77a4f9.0 → 0.0.7--canary.5.5d4ec86.0

package/dist/manager.js

@@ -1,14 +1,17 @@
 'use strict';
 
-var l = require('react-dom');
+var f = require('react-dom');
 var t = require('react');
-var theming = require('@storybook/theming');
+var h = require('react-joyride');
+var coreEvents = require('@storybook/core-events');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var l__default = /*#__PURE__*/_interopDefault(l);
+var f__default = /*#__PURE__*/_interopDefault(f);
 var t__default = /*#__PURE__*/_interopDefault(t);
+var h__default = /*#__PURE__*/_interopDefault(h);
 
-var m=theming.ensure(theming.themes.light);function o(){return t__default.default.createElement(theming.ThemeProvider,{theme:m},t__default.default.createElement("div",null,"Hello World"))}var e=document.createElement("div");e.id="addon-onboarding";e.style.position="absolute";e.style.top="0";e.style.left="0";e.style.width="0";e.style.height="0";e.style.overflow="hidden";e.style.opacity="0";e.style.visibility="hidden";document.body.appendChild(e);l__default.default.render(t__default.default.createElement(o,null),e);
+var n=({prefix:i,title:s,body:o})=>t__default.default.createElement("div",null,i,t__default.default.createElement("strong",{style:{fontSize:14}},s),t__default.default.createElement("p",{style:{fontSize:14,color:"#798186",margin:0,marginTop:10}},o)),r=0,p=()=>{let[i,s]=t.useState(!0),[o,c]=t.useState(),[u,y]=t.useState();return t.useEffect(()=>{setTimeout(()=>{let e=window?.__STORYBOOK_ADDONS_MANAGER?.getChannel();c(e),e.emit(coreEvents.SELECT_STORY,{storyId:"example-button--primary"}),document.querySelector("#tabbutton-addon-controls")?.click();},2e3);},[]),t.useEffect(()=>{o&&(o.on(coreEvents.STORY_CHANGED,e=>{e==="introduction-configure-your-project--docs"&&s(!1);}),o.on(coreEvents.STORY_ARGS_UPDATED,()=>{console.log("STORY_ARGS_UPDATED",{INTERACTIONS_COUNT:r}),r=r+1,r===2&&y(4);}));},[o]),t__default.default.createElement(h__default.default,{steps:[{content:t__default.default.createElement("div",{style:{width:"80%"}},t__default.default.createElement("h2",null,"Welcome to Storybook"),t__default.default.createElement("p",null,"Storybook helps you develop UI components. Let's learn the basics in a few simple steps. It shouldn't take more than 3 minutes. Enjoy!")),locale:{skip:t__default.default.createElement("span",{"aria-label":"skip"},"Skip onboarding")},placement:"center",target:"body",styles:{tooltip:{maxWidth:"100%",width:500,height:300}}},{target:".sto-1qwztpk",content:t__default.default.createElement(n,{title:"Your stories",body:`A story is a key state of your UI component. This Button component
+        has four stories.`}),placement:"right"},{target:"#storybook-preview-iframe",content:t__default.default.createElement(n,{title:"Interactive story preview",body:"Preview your stories here. Each time you modify a story, the changes will live update here."}),placement:"bottom"},{target:"#control-primary",content:t__default.default.createElement(n,{title:"Interactive story update",body:"Update your story without having to change the code. Modify this boolean input a couple times to see how it changes the story."}),placement:"right",spotlightPadding:5,spotlightClicks:!0,disableOverlay:!0,styles:{buttonNext:{display:"none"},spotlight:{borderRadius:200}}},{target:"#control-primary",content:t__default.default.createElement(n,{prefix:t__default.default.createElement("div",{style:{fontSize:"50px"}},"\u{1F64C}"),title:"Great progress!",body:"Now that you know how to control your stories interactively, let's dive deeper into how to create a story."}),placement:"right",disableOverlay:!0},{target:"#introduction-configure-your-project--docs",content:t__default.default.createElement(n,{title:"Configure the rest of your project",body:"Click on your story to see the result."}),placement:"right",disableOverlay:!0,styles:{buttonNext:{display:"none"}}}],continuous:!0,run:i,stepIndex:u,spotlightPadding:0,hideBackButton:!0,callback:e=>console.log(e),styles:{spotlight:{border:"solid 2px #004c7c"},tooltip:{maxWidth:260},buttonNext:{backgroundColor:"#029CFD",width:"100%",padding:"12px 9px",margin:0},tooltipContent:{paddingBottom:0},options:{zIndex:1e4}}})};var a=document.createElement("div");a.id="addon-onboarding";document.body.appendChild(a);f__default.default.render(t__default.default.createElement(p,null),a);
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=manager.js.map

package/dist/manager.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/manager.tsx","../src/App.tsx"],"names":["ReactDOM","React","ThemeProvider","ensure","themes","theme","App","domNode"],"mappings":"AAAA,OAAOA,MAAc,YACrB,OAAOC,MAAW,QCDlB,OAAS,iBAAAC,EAAe,UAAAC,EAAQ,UAAAC,MAAc,qBAC9C,OAAOH,MAAW,QAElB,IAAMI,EAAQF,EAAOC,EAAO,KAAK,EAE1B,SAASE,GAAM,CACpB,OACEL,EAAA,cAACC,EAAA,CAAc,MAAOG,GACpBJ,EAAA,cAAC,WAAI,aAAW,CAClB,CAEJ,CDNA,IAAMM,EAAU,SAAS,cAAc,KAAK,EAE5CA,EAAQ,GAAK,mBACbA,EAAQ,MAAM,SAAW,WACzBA,EAAQ,MAAM,IAAM,IACpBA,EAAQ,MAAM,KAAO,IACrBA,EAAQ,MAAM,MAAQ,IACtBA,EAAQ,MAAM,OAAS,IACvBA,EAAQ,MAAM,SAAW,SACzBA,EAAQ,MAAM,QAAU,IACxBA,EAAQ,MAAM,WAAa,SAG3B,SAAS,KAAK,YAAYA,CAAO,EAGjCP,EAAS,OAAOC,EAAA,cAACK,EAAA,IAAI,EAAIC,CAAO","sourcesContent":["import ReactDOM from \"react-dom\";\nimport React from \"react\";\nimport { App } from \"./App\";\n\n// Add a new DOM element to document.body, where we will bootstrap our React app\nconst domNode = document.createElement(\"div\");\n\ndomNode.id = \"addon-onboarding\";\ndomNode.style.position = \"absolute\";\ndomNode.style.top = \"0\";\ndomNode.style.left = \"0\";\ndomNode.style.width = \"0\";\ndomNode.style.height = \"0\";\ndomNode.style.overflow = \"hidden\";\ndomNode.style.opacity = \"0\";\ndomNode.style.visibility = \"hidden\";\n\n// Append the new DOM element to document.body\ndocument.body.appendChild(domNode);\n\n// Render the React app\nReactDOM.render(<App />, domNode);\n","import { ThemeProvider, ensure, themes } from \"@storybook/theming\";\nimport React from \"react\";\n\nconst theme = ensure(themes.light);\n\nexport function App() {\n  return (\n    <ThemeProvider theme={theme}>\n      <div>Hello World</div>\n    </ThemeProvider>\n  );\n}\n"]}
+{"version":3,"sources":["../src/manager.tsx","../src/App.tsx"],"names":["ReactDOM","React","useEffect","useState","Joyride","STORY_CHANGED","STORY_ARGS_UPDATED","SELECT_STORY","TitleBody","prefix","title","body","INTERACTIONS_COUNT","App","shouldRun","setShouldRun","channel","setChannel","stepIndex","setStepIndex","channelInstance","storyId","data","domNode"],"mappings":"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","sourcesContent":["import ReactDOM from \"react-dom\";\nimport React from \"react\";\nimport { App } from \"./App\";\n\n// Add a new DOM element to document.body, where we will bootstrap our React app\nconst domNode = document.createElement(\"div\");\n\ndomNode.id = \"addon-onboarding\";\n// domNode.style.position = \"absolute\";\n// domNode.style.top = \"0\";\n// domNode.style.left = \"0\";\n// domNode.style.width = \"0\";\n// domNode.style.height = \"0\";\n// domNode.style.overflow = \"hidden\";\n// domNode.style.opacity = \"0\";\n// domNode.style.visibility = \"hidden\";\n\n// Append the new DOM element to document.body\ndocument.body.appendChild(domNode);\n\n// Render the React app\nReactDOM.render(<App />, domNode);","import React, { useEffect, useState } from \"react\";\nimport Joyride, { Step } from \"react-joyride\";\nimport {\n  STORY_CHANGED,\n  STORY_ARGS_UPDATED,\n  SELECT_STORY,\n} from \"@storybook/core-events\";\n\nconst TitleBody = ({\n  prefix,\n  title,\n  body,\n}: {\n  prefix?: React.ReactNode;\n  title: React.ReactNode;\n  body: React.ReactNode;\n}) => {\n  return (\n    <div>\n      {prefix}\n      <strong style={{ fontSize: 14 }}>{title}</strong>\n      <p style={{ fontSize: 14, color: \"#798186\", margin: 0, marginTop: 10 }}>{body}</p>\n    </div>\n  );\n};\n\nlet INTERACTIONS_COUNT = 0;\nexport const App = () => {\n  const [shouldRun, setShouldRun] = useState<boolean>(true);\n  const [channel, setChannel] = useState<any>();\n  const [stepIndex, setStepIndex] = useState<number>();\n\n  useEffect(() => {\n    // TODO: Only get the channel once Storybook is available\n    setTimeout(() => {\n      // @ts-ignore\n      const channelInstance = window?.__STORYBOOK_ADDONS_MANAGER?.getChannel();\n\n      setChannel(channelInstance);\n      channelInstance.emit(SELECT_STORY, {\n        storyId: \"example-button--primary\",\n      });\n\n      // @ts-ignore\n      document.querySelector(\"#tabbutton-addon-controls\")?.click();\n    }, 2000);\n  }, []);\n\n  useEffect(() => {\n    if (channel) {\n      channel.on(STORY_CHANGED, (storyId: string) => {\n        if(storyId === 'introduction-configure-your-project--docs') {\n          setShouldRun(false);\n        }\n      });\n\n      channel.on(STORY_ARGS_UPDATED, () => {\n        console.log(\"STORY_ARGS_UPDATED\", { INTERACTIONS_COUNT });\n        INTERACTIONS_COUNT = INTERACTIONS_COUNT + 1;\n        if (INTERACTIONS_COUNT === 2) {\n          setStepIndex(4);\n        }\n      });\n    }\n  }, [channel]);\n\n  // Challenges\n  // Do we need to remove autodocs from button component?\n  // What if the addon panel is not open/visible?\n  // What if the addon panel is in a bad placement?\n  // HMR when testing the onboarding component\n  // Setting up Storybook to the right state as it can be in different stories, addons, etc.\n  // Defining proper selectors to the Storybook components (task in the monorepo)\n  // Deal with Storybook channel updates\n  // Detect new story (apparently there is no event for that!)\n\n  const steps: Step[] = [\n    {\n      content: (\n        <div style={{ width: '80%' }}>\n          <h2>Welcome to Storybook</h2>\n          <p>\n            Storybook helps you develop UI components. Let's learn the basics in\n            a few simple steps. It shouldn't take more than 3 minutes. Enjoy!\n          </p>\n        </div>\n      ),\n      locale: { skip: <span aria-label=\"skip\">Skip onboarding</span> },\n      placement: \"center\",\n      target: \"body\",\n      styles: {\n        tooltip: {\n          maxWidth: '100%',\n          width: 500,\n          height: 300\n        },\n\n      }\n    },\n    {\n      target: \".sto-1qwztpk\",\n      content: (\n        <TitleBody\n          title=\"Your stories\"\n          body=\"A story is a key state of your UI component. This Button component\n        has four stories.\"\n        />\n      ),\n      placement: \"right\",\n    },\n    {\n      target: \"#storybook-preview-iframe\",\n      content: (\n        <TitleBody\n          title=\"Interactive story preview\"\n          body=\"Preview your stories here. Each time you modify a story, the changes will live update here.\"\n        />\n      ),\n      placement: \"bottom\",\n    },\n    {\n      target: \"#control-primary\",\n      content: (\n        <TitleBody\n          title=\"Interactive story update\"\n          body=\"Update your story without having to change the code. Modify this boolean input a couple times to see how it changes the story.\"\n        />\n      ),\n      placement: \"right\",\n      spotlightPadding: 5,\n      spotlightClicks: true,\n      disableOverlay: true,\n      styles: {\n        buttonNext: {\n          display: \"none\",\n        },\n        spotlight: {\n          borderRadius: 200,\n        },\n      },\n    },\n    {\n      target: \"#control-primary\",\n      content: (\n        <TitleBody\n          prefix={<div style={{ fontSize: \"50px\" }}>🙌</div>}\n          title=\"Great progress!\"\n          body=\"Now that you know how to control your stories interactively, let's dive deeper into how to create a story.\"\n        />\n      ),\n      placement: \"right\",\n      disableOverlay: true,\n    },\n    {\n      target: \"#introduction-configure-your-project--docs\",\n      content: (\n        <TitleBody title=\"Configure the rest of your project\"\n          body=\"Click on your story to see the result.\" />\n      ),\n      placement: \"right\",\n      disableOverlay: true,\n      styles: {\n        buttonNext: {\n          display: \"none\",\n        },\n      }\n    },\n  ];\n\n  return (\n    <Joyride\n      steps={steps}\n      continuous\n      run={shouldRun}\n      stepIndex={stepIndex}\n      spotlightPadding={0}\n      hideBackButton\n      callback={(data) => console.log(data)}\n      styles={{\n        spotlight: {\n          border: \"solid 2px #004c7c\",\n        },\n        tooltip: {\n          maxWidth: 260\n        },\n        buttonNext: {\n          backgroundColor: \"#029CFD\",\n          width: \"100%\",\n          padding: \"12px 9px\",\n          margin: 0,\n        },\n        tooltipContent: {\n          paddingBottom: 0\n        },\n        options: {\n          zIndex: 10000,\n        },\n      }}\n    />\n  );\n};\n"]}

package/dist/manager.mjs

@@ -1,7 +1,9 @@
-import l from 'react-dom';
-import t from 'react';
-import { ensure, themes, ThemeProvider } from '@storybook/theming';
+import f from 'react-dom';
+import t, { useState, useEffect } from 'react';
+import h from 'react-joyride';
+import { SELECT_STORY, STORY_CHANGED, STORY_ARGS_UPDATED } from '@storybook/core-events';
 
-var m=ensure(themes.light);function o(){return t.createElement(ThemeProvider,{theme:m},t.createElement("div",null,"Hello World"))}var e=document.createElement("div");e.id="addon-onboarding";e.style.position="absolute";e.style.top="0";e.style.left="0";e.style.width="0";e.style.height="0";e.style.overflow="hidden";e.style.opacity="0";e.style.visibility="hidden";document.body.appendChild(e);l.render(t.createElement(o,null),e);
+var n=({prefix:i,title:s,body:o})=>t.createElement("div",null,i,t.createElement("strong",{style:{fontSize:14}},s),t.createElement("p",{style:{fontSize:14,color:"#798186",margin:0,marginTop:10}},o)),r=0,p=()=>{let[i,s]=useState(!0),[o,c]=useState(),[u,y]=useState();return useEffect(()=>{setTimeout(()=>{let e=window?.__STORYBOOK_ADDONS_MANAGER?.getChannel();c(e),e.emit(SELECT_STORY,{storyId:"example-button--primary"}),document.querySelector("#tabbutton-addon-controls")?.click();},2e3);},[]),useEffect(()=>{o&&(o.on(STORY_CHANGED,e=>{e==="introduction-configure-your-project--docs"&&s(!1);}),o.on(STORY_ARGS_UPDATED,()=>{console.log("STORY_ARGS_UPDATED",{INTERACTIONS_COUNT:r}),r=r+1,r===2&&y(4);}));},[o]),t.createElement(h,{steps:[{content:t.createElement("div",{style:{width:"80%"}},t.createElement("h2",null,"Welcome to Storybook"),t.createElement("p",null,"Storybook helps you develop UI components. Let's learn the basics in a few simple steps. It shouldn't take more than 3 minutes. Enjoy!")),locale:{skip:t.createElement("span",{"aria-label":"skip"},"Skip onboarding")},placement:"center",target:"body",styles:{tooltip:{maxWidth:"100%",width:500,height:300}}},{target:".sto-1qwztpk",content:t.createElement(n,{title:"Your stories",body:`A story is a key state of your UI component. This Button component
+        has four stories.`}),placement:"right"},{target:"#storybook-preview-iframe",content:t.createElement(n,{title:"Interactive story preview",body:"Preview your stories here. Each time you modify a story, the changes will live update here."}),placement:"bottom"},{target:"#control-primary",content:t.createElement(n,{title:"Interactive story update",body:"Update your story without having to change the code. Modify this boolean input a couple times to see how it changes the story."}),placement:"right",spotlightPadding:5,spotlightClicks:!0,disableOverlay:!0,styles:{buttonNext:{display:"none"},spotlight:{borderRadius:200}}},{target:"#control-primary",content:t.createElement(n,{prefix:t.createElement("div",{style:{fontSize:"50px"}},"\u{1F64C}"),title:"Great progress!",body:"Now that you know how to control your stories interactively, let's dive deeper into how to create a story."}),placement:"right",disableOverlay:!0},{target:"#introduction-configure-your-project--docs",content:t.createElement(n,{title:"Configure the rest of your project",body:"Click on your story to see the result."}),placement:"right",disableOverlay:!0,styles:{buttonNext:{display:"none"}}}],continuous:!0,run:i,stepIndex:u,spotlightPadding:0,hideBackButton:!0,callback:e=>console.log(e),styles:{spotlight:{border:"solid 2px #004c7c"},tooltip:{maxWidth:260},buttonNext:{backgroundColor:"#029CFD",width:"100%",padding:"12px 9px",margin:0},tooltipContent:{paddingBottom:0},options:{zIndex:1e4}}})};var a=document.createElement("div");a.id="addon-onboarding";document.body.appendChild(a);f.render(t.createElement(p,null),a);
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=manager.mjs.map

package/dist/manager.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/manager.tsx","../src/App.tsx"],"names":["ReactDOM","React","ThemeProvider","ensure","themes","theme","App","domNode"],"mappings":"AAAA,OAAOA,MAAc,YACrB,OAAOC,MAAW,QCDlB,OAAS,iBAAAC,EAAe,UAAAC,EAAQ,UAAAC,MAAc,qBAC9C,OAAOH,MAAW,QAElB,IAAMI,EAAQF,EAAOC,EAAO,KAAK,EAE1B,SAASE,GAAM,CACpB,OACEL,EAAA,cAACC,EAAA,CAAc,MAAOG,GACpBJ,EAAA,cAAC,WAAI,aAAW,CAClB,CAEJ,CDNA,IAAMM,EAAU,SAAS,cAAc,KAAK,EAE5CA,EAAQ,GAAK,mBACbA,EAAQ,MAAM,SAAW,WACzBA,EAAQ,MAAM,IAAM,IACpBA,EAAQ,MAAM,KAAO,IACrBA,EAAQ,MAAM,MAAQ,IACtBA,EAAQ,MAAM,OAAS,IACvBA,EAAQ,MAAM,SAAW,SACzBA,EAAQ,MAAM,QAAU,IACxBA,EAAQ,MAAM,WAAa,SAG3B,SAAS,KAAK,YAAYA,CAAO,EAGjCP,EAAS,OAAOC,EAAA,cAACK,EAAA,IAAI,EAAIC,CAAO","sourcesContent":["import ReactDOM from \"react-dom\";\nimport React from \"react\";\nimport { App } from \"./App\";\n\n// Add a new DOM element to document.body, where we will bootstrap our React app\nconst domNode = document.createElement(\"div\");\n\ndomNode.id = \"addon-onboarding\";\ndomNode.style.position = \"absolute\";\ndomNode.style.top = \"0\";\ndomNode.style.left = \"0\";\ndomNode.style.width = \"0\";\ndomNode.style.height = \"0\";\ndomNode.style.overflow = \"hidden\";\ndomNode.style.opacity = \"0\";\ndomNode.style.visibility = \"hidden\";\n\n// Append the new DOM element to document.body\ndocument.body.appendChild(domNode);\n\n// Render the React app\nReactDOM.render(<App />, domNode);\n","import { ThemeProvider, ensure, themes } from \"@storybook/theming\";\nimport React from \"react\";\n\nconst theme = ensure(themes.light);\n\nexport function App() {\n  return (\n    <ThemeProvider theme={theme}>\n      <div>Hello World</div>\n    </ThemeProvider>\n  );\n}\n"]}
+{"version":3,"sources":["../src/manager.tsx","../src/App.tsx"],"names":["ReactDOM","React","useEffect","useState","Joyride","STORY_CHANGED","STORY_ARGS_UPDATED","SELECT_STORY","TitleBody","prefix","title","body","INTERACTIONS_COUNT","App","shouldRun","setShouldRun","channel","setChannel","stepIndex","setStepIndex","channelInstance","storyId","data","domNode"],"mappings":"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","sourcesContent":["import ReactDOM from \"react-dom\";\nimport React from \"react\";\nimport { App } from \"./App\";\n\n// Add a new DOM element to document.body, where we will bootstrap our React app\nconst domNode = document.createElement(\"div\");\n\ndomNode.id = \"addon-onboarding\";\n// domNode.style.position = \"absolute\";\n// domNode.style.top = \"0\";\n// domNode.style.left = \"0\";\n// domNode.style.width = \"0\";\n// domNode.style.height = \"0\";\n// domNode.style.overflow = \"hidden\";\n// domNode.style.opacity = \"0\";\n// domNode.style.visibility = \"hidden\";\n\n// Append the new DOM element to document.body\ndocument.body.appendChild(domNode);\n\n// Render the React app\nReactDOM.render(<App />, domNode);","import React, { useEffect, useState } from \"react\";\nimport Joyride, { Step } from \"react-joyride\";\nimport {\n  STORY_CHANGED,\n  STORY_ARGS_UPDATED,\n  SELECT_STORY,\n} from \"@storybook/core-events\";\n\nconst TitleBody = ({\n  prefix,\n  title,\n  body,\n}: {\n  prefix?: React.ReactNode;\n  title: React.ReactNode;\n  body: React.ReactNode;\n}) => {\n  return (\n    <div>\n      {prefix}\n      <strong style={{ fontSize: 14 }}>{title}</strong>\n      <p style={{ fontSize: 14, color: \"#798186\", margin: 0, marginTop: 10 }}>{body}</p>\n    </div>\n  );\n};\n\nlet INTERACTIONS_COUNT = 0;\nexport const App = () => {\n  const [shouldRun, setShouldRun] = useState<boolean>(true);\n  const [channel, setChannel] = useState<any>();\n  const [stepIndex, setStepIndex] = useState<number>();\n\n  useEffect(() => {\n    // TODO: Only get the channel once Storybook is available\n    setTimeout(() => {\n      // @ts-ignore\n      const channelInstance = window?.__STORYBOOK_ADDONS_MANAGER?.getChannel();\n\n      setChannel(channelInstance);\n      channelInstance.emit(SELECT_STORY, {\n        storyId: \"example-button--primary\",\n      });\n\n      // @ts-ignore\n      document.querySelector(\"#tabbutton-addon-controls\")?.click();\n    }, 2000);\n  }, []);\n\n  useEffect(() => {\n    if (channel) {\n      channel.on(STORY_CHANGED, (storyId: string) => {\n        if(storyId === 'introduction-configure-your-project--docs') {\n          setShouldRun(false);\n        }\n      });\n\n      channel.on(STORY_ARGS_UPDATED, () => {\n        console.log(\"STORY_ARGS_UPDATED\", { INTERACTIONS_COUNT });\n        INTERACTIONS_COUNT = INTERACTIONS_COUNT + 1;\n        if (INTERACTIONS_COUNT === 2) {\n          setStepIndex(4);\n        }\n      });\n    }\n  }, [channel]);\n\n  // Challenges\n  // Do we need to remove autodocs from button component?\n  // What if the addon panel is not open/visible?\n  // What if the addon panel is in a bad placement?\n  // HMR when testing the onboarding component\n  // Setting up Storybook to the right state as it can be in different stories, addons, etc.\n  // Defining proper selectors to the Storybook components (task in the monorepo)\n  // Deal with Storybook channel updates\n  // Detect new story (apparently there is no event for that!)\n\n  const steps: Step[] = [\n    {\n      content: (\n        <div style={{ width: '80%' }}>\n          <h2>Welcome to Storybook</h2>\n          <p>\n            Storybook helps you develop UI components. Let's learn the basics in\n            a few simple steps. It shouldn't take more than 3 minutes. Enjoy!\n          </p>\n        </div>\n      ),\n      locale: { skip: <span aria-label=\"skip\">Skip onboarding</span> },\n      placement: \"center\",\n      target: \"body\",\n      styles: {\n        tooltip: {\n          maxWidth: '100%',\n          width: 500,\n          height: 300\n        },\n\n      }\n    },\n    {\n      target: \".sto-1qwztpk\",\n      content: (\n        <TitleBody\n          title=\"Your stories\"\n          body=\"A story is a key state of your UI component. This Button component\n        has four stories.\"\n        />\n      ),\n      placement: \"right\",\n    },\n    {\n      target: \"#storybook-preview-iframe\",\n      content: (\n        <TitleBody\n          title=\"Interactive story preview\"\n          body=\"Preview your stories here. Each time you modify a story, the changes will live update here.\"\n        />\n      ),\n      placement: \"bottom\",\n    },\n    {\n      target: \"#control-primary\",\n      content: (\n        <TitleBody\n          title=\"Interactive story update\"\n          body=\"Update your story without having to change the code. Modify this boolean input a couple times to see how it changes the story.\"\n        />\n      ),\n      placement: \"right\",\n      spotlightPadding: 5,\n      spotlightClicks: true,\n      disableOverlay: true,\n      styles: {\n        buttonNext: {\n          display: \"none\",\n        },\n        spotlight: {\n          borderRadius: 200,\n        },\n      },\n    },\n    {\n      target: \"#control-primary\",\n      content: (\n        <TitleBody\n          prefix={<div style={{ fontSize: \"50px\" }}>🙌</div>}\n          title=\"Great progress!\"\n          body=\"Now that you know how to control your stories interactively, let's dive deeper into how to create a story.\"\n        />\n      ),\n      placement: \"right\",\n      disableOverlay: true,\n    },\n    {\n      target: \"#introduction-configure-your-project--docs\",\n      content: (\n        <TitleBody title=\"Configure the rest of your project\"\n          body=\"Click on your story to see the result.\" />\n      ),\n      placement: \"right\",\n      disableOverlay: true,\n      styles: {\n        buttonNext: {\n          display: \"none\",\n        },\n      }\n    },\n  ];\n\n  return (\n    <Joyride\n      steps={steps}\n      continuous\n      run={shouldRun}\n      stepIndex={stepIndex}\n      spotlightPadding={0}\n      hideBackButton\n      callback={(data) => console.log(data)}\n      styles={{\n        spotlight: {\n          border: \"solid 2px #004c7c\",\n        },\n        tooltip: {\n          maxWidth: 260\n        },\n        buttonNext: {\n          backgroundColor: \"#029CFD\",\n          width: \"100%\",\n          padding: \"12px 9px\",\n          margin: 0,\n        },\n        tooltipContent: {\n          paddingBottom: 0\n        },\n        options: {\n          zIndex: 10000,\n        },\n      }}\n    />\n  );\n};\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-onboarding",
-  "version": "0.0.7--canary.4.a77a4f9.0",
+  "version": "0.0.7--canary.5.5d4ec86.0",
   "description": "Storybook Addon Onboarding - Introduces a new onboarding experience",
   "keywords": [
     "storybook-addons",
@@ -55,14 +55,11 @@
   },
   "devDependencies": {
     "@storybook/addon-essentials": "^7.0.0",
-    "@storybook/addon-interactions": "^7.0.17",
+    "@storybook/addon-interactions": "^7.0.0",
     "@storybook/addon-links": "^7.0.0",
-    "@storybook/jest": "^0.1.0",
     "@storybook/react": "^7.0.0",
     "@storybook/react-vite": "^7.0.0",
     "@storybook/testing-library": "^0.0.14-next.1",
-    "@storybook/theming": "^7.0.17",
-    "@storybook/types": "^7.0.17",
     "@types/node": "^18.15.0",
     "@types/react": "^18.0.34",
     "@types/react-dom": "^18.2.4",
@@ -111,7 +108,6 @@
   "readme": "ERROR: No README data found!",
   "homepage": "https://github.com/storybookjs/addon-onboarding#readme",
   "dependencies": {
-    "@floating-ui/react": "^0.24.1"
-  },
-  "packageManager": "yarn@1.22.19"
+    "react-joyride": "^2.5.4"
+  }
 }