@storybook/addon-onboarding 10.1.0-alpha.8 → 10.1.0-beta.0

package/dist/_browser-chunks/Survey-RTIK67MQ.js

@@ -0,0 +1,35 @@
+import {
+  IntentSurvey
+} from "./chunk-BTSM33XX.js";
+import {
+  ADDON_ONBOARDING_CHANNEL
+} from "./chunk-VFOIHBP2.js";
+import "./chunk-ZYVL3X5E.js";
+
+// src/Survey.tsx
+import React, { useCallback } from "react";
+import { ThemeProvider, convert } from "storybook/theming";
+var theme = convert();
+function Survey({ api }) {
+  let userAgent = globalThis?.navigator?.userAgent, disableOnboarding = useCallback(() => {
+    let url = new URL(window.location.href);
+    url.searchParams.set("onboarding", "false"), history.replaceState({}, "", url.href), api.setQueryParams({ onboarding: "false" });
+  }, [api]), complete = useCallback(
+    (answers) => {
+      api.emit(ADDON_ONBOARDING_CHANNEL, {
+        answers,
+        type: "survey",
+        userAgent
+      }), disableOnboarding();
+    },
+    [api, disableOnboarding, userAgent]
+  ), dismiss = useCallback(() => {
+    api.emit(ADDON_ONBOARDING_CHANNEL, {
+      type: "dismissSurvey"
+    }), disableOnboarding();
+  }, [api, disableOnboarding]);
+  return React.createElement(ThemeProvider, { theme }, React.createElement(IntentSurvey, { onComplete: complete, onDismiss: dismiss }));
+}
+export {
+  Survey as default
+};

package/dist/_browser-chunks/chunk-BTSM33XX.js

@@ -0,0 +1,181 @@
+// src/features/IntentSurvey/IntentSurvey.tsx
+import React, { Fragment, useState } from "react";
+import { Button, Form, Modal } from "storybook/internal/components";
+import { styled } from "storybook/theming";
+
+// ../../.storybook/isChromatic.ts
+function isChromatic(windowArg) {
+  let windowToCheck = windowArg || typeof window < "u" && window;
+  return !!(windowToCheck && (windowToCheck.navigator.userAgent.match(/Chromatic/) || windowToCheck.location.href.match(/chromatic=true/)));
+}
+
+// src/features/IntentSurvey/IntentSurvey.tsx
+var Content = styled(Modal.Content)(({ theme }) => ({
+  fontSize: theme.typography.size.s2,
+  color: theme.color.defaultText,
+  gap: 8
+})), Row = styled.div({
+  display: "grid",
+  gridTemplateColumns: "1fr 1fr",
+  gap: 14,
+  marginBottom: 8
+}), Question = styled.div(({ theme }) => ({
+  marginTop: 8,
+  marginBottom: 2,
+  fontWeight: theme.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 React.createElement(
+    Modal,
+    {
+      ariaLabel: "Storybook user survey",
+      defaultOpen: !0,
+      width: 420,
+      onOpenChange: (isOpen) => {
+        isOpen || onDismiss();
+      }
+    },
+    React.createElement(Form, { onSubmit: (e) => {
+      isValid && (e.preventDefault(), setIsSubmitting(!0), onComplete(
+        Object.fromEntries(Object.entries(formFields).map(([key, field]) => [key, field.values]))
+      ));
+    }, id: "intent-survey-form" }, React.createElement(Content, null, React.createElement(Modal.Header, { onClose: onDismiss }, React.createElement(Modal.Title, null, "Help improve Storybook")), Object.keys(formFields).map((key) => {
+      let field = formFields[key];
+      return React.createElement(Fragment, { key }, React.createElement(Question, null, field.label), field.type === "checkbox" && React.createElement(Row, null, Object.entries(field.options).map(([opt, option]) => {
+        let id = `${key}:${opt}`;
+        return React.createElement("div", { key: id }, React.createElement(Label, { htmlFor: id }, React.createElement(
+          Checkbox,
+          {
+            name: id,
+            id,
+            checked: field.values[opt],
+            disabled: isSubmitting,
+            onChange: (e) => updateFormData(key, opt, e.target.checked)
+          }
+        ), option.label));
+      })), field.type === "select" && React.createElement(
+        Form.Select,
+        {
+          name: key,
+          id: key,
+          value: Object.entries(field.values).find(([, isSelected]) => isSelected)?.[0] || "",
+          required: field.required,
+          disabled: isSubmitting,
+          onChange: (e) => updateFormData(key, e.target.value)
+        },
+        React.createElement("option", { disabled: !0, hidden: !0, value: "" }, "Select an option..."),
+        Object.entries(field.options).map(([opt, option]) => React.createElement("option", { key: opt, value: opt }, option.label))
+      ));
+    }), React.createElement(Actions, null, React.createElement(
+      Button,
+      {
+        ariaLabel: !1,
+        disabled: isSubmitting || !isValid,
+        size: "medium",
+        type: "submit",
+        variant: "solid"
+      },
+      "Submit"
+    ))))
+  );
+};
+function shuffle(array) {
+  for (let i = array.length - 1; i > 0; i--) {
+    let j = Math.floor(Math.random() * (i + 1));
+    [array[i], array[j]] = [array[j], array[i]];
+  }
+  return array;
+}
+function shuffleObject(object) {
+  return isChromatic() ? object : Object.fromEntries(shuffle(Object.entries(object)));
+}
+
+export {
+  IntentSurvey
+};

package/dist/_browser-chunks/chunk-VFOIHBP2.js

@@ -0,0 +1,8 @@
+// src/constants.ts
+var ADDON_ID = "storybook/onboarding", ADDON_ONBOARDING_CHANNEL = `${ADDON_ID}/channel`, ADDON_CONTROLS_ID = "addon-controls";
+
+export {
+  ADDON_ID,
+  ADDON_ONBOARDING_CHANNEL,
+  ADDON_CONTROLS_ID
+};

package/dist/_browser-chunks/{chunk-CBI7MY27.js → chunk-ZYVL3X5E.js}

@@ -2,18 +2,14 @@ var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-var __commonJS = (cb, mod) => function __require() {
+var __getProtoOf = Object.getPrototypeOf, __hasOwnProp = Object.prototype.hasOwnProperty;
+var __commonJS = (cb, mod) => function() {
   return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
 };
 var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
+  if (from && typeof from == "object" || typeof from == "function")
     for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
+      !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
@@ -21,12 +17,11 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   // file that has been converted to a CommonJS file using a Babel-
   // compatible transform (i.e. "__esModule" has not been set), then set
   // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: !0 }) : target,
   mod
 ));
 
 export {
-  __name,
   __commonJS,
   __toESM
 };

package/dist/index.js

@@ -1,4 +1,4 @@
-import "./_browser-chunks/chunk-CBI7MY27.js";
+import "./_browser-chunks/chunk-ZYVL3X5E.js";
 
 // src/index.ts
 var index_default = {};

package/dist/manager.js

@@ -1,37 +1,32 @@
 import {
-  ADDON_CONTROLS_ID
-} from "./_browser-chunks/chunk-B266DSPW.js";
-import "./_browser-chunks/chunk-CBI7MY27.js";
+  ADDON_CONTROLS_ID,
+  ADDON_ID
+} from "./_browser-chunks/chunk-VFOIHBP2.js";
+import "./_browser-chunks/chunk-ZYVL3X5E.js";
 
 // src/manager.tsx
 import React, { Suspense, lazy } from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import { STORY_SPECIFIED } from "storybook/internal/core-events";
-import { addons } from "storybook/manager-api";
-var Onboarding = lazy(() => import("./_browser-chunks/Onboarding-XBLXWDOE.js"));
-addons.register("@storybook/addon-onboarding", async (api) => {
-  const urlState = api.getUrlState();
-  const isOnboarding = urlState.path === "/onboarding" || urlState.queryParams.onboarding === "true";
-  api.once(STORY_SPECIFIED, () => {
-    const hasButtonStories = !!api.getData("example-button--primary") || !!document.getElementById("example-button--primary");
-    if (!hasButtonStories) {
-      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(true);
-    api.togglePanelPosition("bottom");
-    api.setSelectedPanel(ADDON_CONTROLS_ID);
-    const 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
-    );
+import { addons, internal_universalChecklistStore as checklistStore } from "storybook/manager-api";
+var Onboarding = lazy(() => import("./_browser-chunks/Onboarding-4UKVZPT6.js")), Survey = lazy(() => import("./_browser-chunks/Survey-RTIK67MQ.js")), root = null, render = (node) => {
+  let container = document.getElementById("storybook-addon-onboarding");
+  container || (container = document.createElement("div"), container.id = "storybook-addon-onboarding", document.body.appendChild(container)), root = root ?? createRoot(container), root.render(React.createElement(Suspense, { fallback: React.createElement("div", null) }, node));
+};
+addons.register(ADDON_ID, async (api) => {
+  let { path, queryParams } = api.getUrlState(), isOnboarding = path === "/onboarding" || queryParams.onboarding === "true", isSurvey = queryParams.onboarding === "survey", hasCompletedSurvey = await new Promise((resolve) => {
+    let unsubscribe = checklistStore.onStateChange(({ loaded, items }) => {
+      loaded && (unsubscribe(), resolve(items.onboardingSurvey.status === "accepted"));
+    });
   });
+  if (isSurvey)
+    return hasCompletedSurvey ? null : render(React.createElement(Survey, { api }));
+  if (await new Promise((resolve) => api.once(STORY_SPECIFIED, resolve)), !(!!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_CONTROLS_ID), render(React.createElement(Onboarding, { api, hasCompletedSurvey }));
 });

package/dist/preset.js

@@ -1,41 +1,31 @@
-import CJS_COMPAT_NODE_URL_rgummksgijc from 'node:url';
-import CJS_COMPAT_NODE_PATH_rgummksgijc from 'node:path';
-import CJS_COMPAT_NODE_MODULE_rgummksgijc from "node:module";
+import CJS_COMPAT_NODE_URL_x8wp8fakaa from 'node:url';
+import CJS_COMPAT_NODE_PATH_x8wp8fakaa from 'node:path';
+import CJS_COMPAT_NODE_MODULE_x8wp8fakaa from "node:module";
 
-var __filename = CJS_COMPAT_NODE_URL_rgummksgijc.fileURLToPath(import.meta.url);
-var __dirname = CJS_COMPAT_NODE_PATH_rgummksgijc.dirname(__filename);
-var require = CJS_COMPAT_NODE_MODULE_rgummksgijc.createRequire(import.meta.url);
+var __filename = CJS_COMPAT_NODE_URL_x8wp8fakaa.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_x8wp8fakaa.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_x8wp8fakaa.createRequire(import.meta.url);
 
 // ------------------------------------------------------------
 // end of CJS compatibility banner, injected by Storybook's esbuild configuration
 // ------------------------------------------------------------
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 
 // src/preset.ts
 import { telemetry } from "storybook/internal/telemetry";
 
 // package.json
-var version = "10.1.0-alpha.8";
+var version = "10.1.0-beta.0";
 
 // src/constants.ts
-var STORYBOOK_ADDON_ONBOARDING_CHANNEL = "STORYBOOK_ADDON_ONBOARDING_CHANNEL";
+var ADDON_ID = "storybook/onboarding", ADDON_ONBOARDING_CHANNEL = `${ADDON_ID}/channel`;
 
 // src/preset.ts
-var experimental_serverChannel = /* @__PURE__ */ __name(async (channel, options) => {
-  const { disableTelemetry } = await options.presets.apply("core", {});
-  if (disableTelemetry) {
-    return channel;
-  }
-  channel.on(STORYBOOK_ADDON_ONBOARDING_CHANNEL, ({ type, ...event }) => {
-    if (type === "telemetry") {
-      telemetry("addon-onboarding", { ...event, addonVersion: version });
-    } else if (type === "survey") {
-      telemetry("onboarding-survey", { ...event, addonVersion: version });
-    }
-  });
-  return channel;
-}, "experimental_serverChannel");
+var experimental_serverChannel = async (channel, options) => {
+  let { disableTelemetry } = await options.presets.apply("core", {});
+  return disableTelemetry || channel.on(ADDON_ONBOARDING_CHANNEL, ({ type, ...event }) => {
+    type === "telemetry" ? telemetry("addon-onboarding", { ...event, addonVersion: version }) : type === "survey" && telemetry("onboarding-survey", { ...event, addonVersion: version });
+  }), channel;
+};
 export {
   experimental_serverChannel
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-onboarding",
-  "version": "10.1.0-alpha.8",
+  "version": "10.1.0-beta.0",
   "description": "Storybook Onboarding: Help new users learn how to write stories",
   "keywords": [
     "storybook",
@@ -52,14 +52,14 @@
   },
   "devDependencies": {
     "@neoconfetti/react": "^1.0.0",
-    "@storybook/icons": "^1.6.0",
+    "@storybook/icons": "^2.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-joyride": "^2.8.2",
     "typescript": "^5.8.3"
   },
   "peerDependencies": {
-    "storybook": "^10.1.0-alpha.8"
+    "storybook": "^10.1.0-beta.0"
   },
   "publishConfig": {
     "access": "public"