@storybook/addon-onboarding 10.1.0-alpha.12 → 10.1.0-alpha.14

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/manager.js

@@ -1,30 +1,32 @@
 import {
-  ADDON_CONTROLS_ID
-} from "./_browser-chunks/chunk-BG2SBT4L.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-WWQZBI4C.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_CONTROLS_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
-    );
+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,10 +1,10 @@
-import CJS_COMPAT_NODE_URL_q5ovexczp2c from 'node:url';
-import CJS_COMPAT_NODE_PATH_q5ovexczp2c from 'node:path';
-import CJS_COMPAT_NODE_MODULE_q5ovexczp2c from "node:module";
+import CJS_COMPAT_NODE_URL_cky4rmco7i6 from 'node:url';
+import CJS_COMPAT_NODE_PATH_cky4rmco7i6 from 'node:path';
+import CJS_COMPAT_NODE_MODULE_cky4rmco7i6 from "node:module";
 
-var __filename = CJS_COMPAT_NODE_URL_q5ovexczp2c.fileURLToPath(import.meta.url);
-var __dirname = CJS_COMPAT_NODE_PATH_q5ovexczp2c.dirname(__filename);
-var require = CJS_COMPAT_NODE_MODULE_q5ovexczp2c.createRequire(import.meta.url);
+var __filename = CJS_COMPAT_NODE_URL_cky4rmco7i6.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_cky4rmco7i6.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_cky4rmco7i6.createRequire(import.meta.url);
 
 // ------------------------------------------------------------
 // end of CJS compatibility banner, injected by Storybook's esbuild configuration
@@ -14,15 +14,15 @@ var require = CJS_COMPAT_NODE_MODULE_q5ovexczp2c.createRequire(import.meta.url);
 import { telemetry } from "storybook/internal/telemetry";
 
 // package.json
-var version = "10.1.0-alpha.12";
+var version = "10.1.0-alpha.14";
 
 // 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 = async (channel, options) => {
   let { disableTelemetry } = await options.presets.apply("core", {});
-  return disableTelemetry || channel.on(STORYBOOK_ADDON_ONBOARDING_CHANNEL, ({ type, ...event }) => {
+  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;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-onboarding",
-  "version": "10.1.0-alpha.12",
+  "version": "10.1.0-alpha.14",
   "description": "Storybook Onboarding: Help new users learn how to write stories",
   "keywords": [
     "storybook",
@@ -59,7 +59,7 @@
     "typescript": "^5.8.3"
   },
   "peerDependencies": {
-    "storybook": "^10.1.0-alpha.12"
+    "storybook": "^10.1.0-alpha.14"
   },
   "publishConfig": {
     "access": "public"

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

@@ -1,7 +0,0 @@
-// src/constants.ts
-var STORYBOOK_ADDON_ONBOARDING_CHANNEL = "STORYBOOK_ADDON_ONBOARDING_CHANNEL", ADDON_CONTROLS_ID = "addon-controls";
-
-export {
-  STORYBOOK_ADDON_ONBOARDING_CHANNEL,
-  ADDON_CONTROLS_ID
-};