storybook 10.1.0-beta.3 → 10.1.0-beta.4

package/dist/manager/runtime.js

@@ -6537,6 +6537,19 @@ var storeOptions = {
 };
 var STORE_CHANNEL_EVENT_NAME = `UNIVERSAL_STORE:${storeOptions.id}`;
 
+// src/cli/AddonVitestService.constants.ts
+var SUPPORTED_FRAMEWORKS = [
+  "html-vite" /* HTML_VITE */,
+  "nextjs-vite" /* NEXTJS_VITE */,
+  "preact-vite" /* PREACT_VITE */,
+  "react-native-web-vite" /* REACT_NATIVE_WEB_VITE */,
+  "react-vite" /* REACT_VITE */,
+  "svelte-vite" /* SVELTE_VITE */,
+  "sveltekit" /* SVELTEKIT */,
+  "vue3-vite" /* VUE3_VITE */,
+  "web-components-vite" /* WEB_COMPONENTS_VITE */
+];
+
 // src/docs-tools/shared.ts
 var ADDON_ID5 = "storybook/docs", PANEL_ID3 = `${ADDON_ID5}/panel`;
 var SNIPPET_RENDERED = `${ADDON_ID5}/snippet-rendered`;
@@ -10652,8 +10665,13 @@ var CodeWrapper = styled.div(({ theme }) => ({
   ".linenumber": {
     opacity: 0.5
   }
-})), CodeSnippet = (props) => react_default.createElement(ThemeProvider, { theme: convert(themes.dark) }, react_default.createElement(CodeWrapper, null, react_default.createElement(SyntaxHighlighter, { ...props }))), subscribeToIndex = (condition) => ({ api, done }) => {
-  let check = () => condition(api.getIndex()?.entries || {});
+})), CodeSnippet = (props) => react_default.createElement(ThemeProvider, { theme: convert(themes.dark) }, react_default.createElement(CodeWrapper, null, react_default.createElement(SyntaxHighlighter, { ...props }))), isExample = (id) => id.startsWith("example-") || id.startsWith("configure-your-project--"), subscribeToIndex = (condition) => ({ api, done }) => {
+  let check = () => condition(
+    Object.entries(api.getIndex()?.entries || {}).reduce(
+      (acc, [id, entry]) => isExample(entry.id) ? acc : Object.assign(acc, { [id]: entry }),
+      {}
+    )
+  );
   if (check())
     done();
   else
@@ -10699,7 +10717,10 @@ var CodeWrapper = styled.div(({ theme }) => ({
           id: "renderComponent",
           label: "Render a component",
           criteria: "A story finished rendering successfully",
-          subscribe: ({ api, done }) => api.on(STORY_FINISHED, ({ status }) => status === "success" && done()),
+          subscribe: ({ api, done }) => api.on(
+            STORY_FINISHED,
+            ({ storyId, status }) => status === "success" && !isExample(storyId) && done()
+          ),
           content: ({ api }) => react_default.createElement(react_default.Fragment, null, react_default.createElement("p", null, "Storybook renders your components in isolation, using stories. That allows you to work on the bit of UI you need, without worrying about the rest of the app."), react_default.createElement("p", null, "Rendering your components can often require", " ", react_default.createElement(
             Link,
             {
@@ -10786,7 +10807,7 @@ export const Primary: Story = {
           criteria: "At least 5 components exist in the index",
           subscribe: subscribeToIndex((entries) => {
             let stories = Object.values(entries).filter(
-              (entry) => entry.type === "story" && !entry.id.startsWith("example-")
+              (entry) => entry.type === "story"
             );
             return new Set(stories.map(({ title: title2 }) => title2)).size >= 5;
           })
@@ -10819,7 +10840,7 @@ export const Primary: Story = {
           ))),
           criteria: "At least 20 stories exist in the index",
           subscribe: subscribeToIndex((entries) => Object.values(entries).filter(
-            (entry) => entry.type === "story" && !entry.id.startsWith("example-")
+            (entry) => entry.type === "story"
           ).length >= 20)
         },
         {
@@ -10943,8 +10964,7 @@ export default {
           id: "installVitest",
           label: "Install Vitest addon",
           afterCompletion: "unavailable",
-          available: () => !0,
-          // TODO check for compatibility with the project
+          available: () => !!globalThis.STORYBOOK_FRAMEWORK && SUPPORTED_FRAMEWORKS.includes(globalThis.STORYBOOK_FRAMEWORK),
           criteria: "@storybook/addon-vitest registered in .storybook/main.js|ts",
           subscribe: ({ done }) => {
             addons.experimental_getRegisteredAddons().includes(ADDON_ID4) && done();
@@ -11047,7 +11067,7 @@ export default {
           criteria: "At least one story with a play or test function",
           subscribe: subscribeToIndex(
             (entries) => Object.values(entries).some(
-              ({ id, tags }) => !id.startsWith("example-") && (tags?.includes("play-fn") || tags?.includes("test-fn"))
+              (entry) => entry.tags?.includes("play-fn") || entry.tags?.includes("test-fn")
             )
           ),
           content: ({ api }) => react_default.createElement(react_default.Fragment, null, react_default.createElement("p", null, "When you need to test non-visual or particularly complex behavior of a component, add a play function."), react_default.createElement(CodeSnippet, { language: "typescript" }, `// Button.stories.ts
@@ -11319,16 +11339,16 @@ export const Disabled: Story = {
           label: "Automatically document your components",
           criteria: "At least one component with the autodocs tag applied",
           subscribe: subscribeToIndex(
-            (entries) => Object.values(entries).some(
-              ({ id, tags }) => !id.startsWith("example-") && tags?.includes("autodocs")
-            )
+            (entries) => Object.values(entries).some((entry) => entry.tags?.includes("autodocs"))
           ),
-          content: ({ api }) => react_default.createElement(react_default.Fragment, null, react_default.createElement("p", null, "Add the autodocs tag to a component's meta to automatically generate documentation for that component, complete with examples, source code, an API table, and a description."), react_default.createElement(CodeSnippet, { language: "typescript" }, `// Button.stories.ts
+          content: ({ api }) => react_default.createElement(react_default.Fragment, null, react_default.createElement("p", null, "Add the autodocs tag to a component's meta to automatically generate documentation for that component, complete with examples, source code, an API table, and a description."), react_default.createElement(CodeSnippet, { language: "typescript" }, `// Button.stories.js
 
-export default {
+const meta = {
   component: Button,
   tags: ['autodocs'], // \u{1F448} Add this tag
-}`), react_default.createElement("p", null, "That tag can also be applied in ", react_default.createElement("code", null, ".storybook/preview.ts"), ", to generate documentation for ", react_default.createElement("em", null, "all"), " components."), react_default.createElement(
+}
+  
+export default meta;`), react_default.createElement("p", null, "That tag can also be applied in ", react_default.createElement("code", null, ".storybook/preview.ts"), ", to generate documentation for ", react_default.createElement("em", null, "all"), " components."), react_default.createElement(
             "img",
             {
               src: api.getDocsUrl({
@@ -11356,9 +11376,7 @@ export default {
           label: "Custom content with MDX",
           criteria: "At least one MDX page",
           subscribe: subscribeToIndex(
-            (entries) => Object.values(entries).some(
-              ({ id, type }) => type === "docs" && !id.startsWith("example-")
-            )
+            (entries) => Object.values(entries).some((entry) => entry.type === "docs")
           ),
           content: ({ api }) => react_default.createElement(react_default.Fragment, null, react_default.createElement("p", null, "You can use MDX (markdown + React components) to provide an introduction to your project, document things like design tokens, or go beyond the automatic documentation for your components."), react_default.createElement("p", null, "For a start, create an ", react_default.createElement("code", null, "introduction.mdx"), " file and (using markdown and Storybook's", " ", react_default.createElement(
             Link,
@@ -14104,6 +14122,9 @@ var withStatusColor = ({ theme, status }) => {
 ), StatusButton = forwardRef((props, ref) => react_default.createElement(StyledButton, { variant: "ghost", padding: "small", ...props, ref }));
 StatusButton.displayName = "StatusButton";
 
+// src/manager/components/sidebar/StatusContext.tsx
+var StatusContext = createContext({});
+
 // src/manager/components/sidebar/ContextMenu.tsx
 var empty = {
   onMouseEnter: () => {
@@ -14119,7 +14140,7 @@ var empty = {
     outlineOffset: -2
   }
 }), useContextMenu = (context, links, api) => {
-  let [hoverCount, setHoverCount] = useState(0), [isOpen, setIsOpen] = useState(!1), [copyText, setCopyText] = react_default.useState("Copy story name"), shortcutKeys = api.getShortcutKeys(), enableShortcuts = !!shortcutKeys, topLinks = useMemo(() => {
+  let [hoverCount, setHoverCount] = useState(0), [isOpen, setIsOpen] = useState(!1), [copyText, setCopyText] = react_default.useState("Copy story name"), { allStatuses, groupStatus } = useContext(StatusContext), shortcutKeys = api.getShortcutKeys(), enableShortcuts = !!shortcutKeys, topLinks = useMemo(() => {
     let defaultLinks = [];
     return context && "importPath" in context && defaultLinks.push({
       id: "open-in-editor",
@@ -14146,7 +14167,7 @@ var empty = {
         }, 2e3);
       }
     }), defaultLinks;
-  }, [context, copyText, enableShortcuts, shortcutKeys]), handlers = useMemo(() => ({
+  }, [api, context, copyText, enableShortcuts, shortcutKeys]), handlers = useMemo(() => ({
     onMouseEnter: () => {
       setHoverCount((c2) => c2 + 1);
     },
@@ -14159,7 +14180,20 @@ var empty = {
   }), []), providerLinks = useMemo(() => {
     let registeredTestProviders = api.getElements(Addon_TypesEnum.experimental_TEST_PROVIDER);
     return hoverCount ? generateTestProviderLinks(registeredTestProviders, context) : [];
-  }, [api, context, hoverCount]), shouldRender = !context.refId && (providerLinks.length > 0 || links.length > 0 || topLinks.length > 0);
+  }, [api, context, hoverCount]), shouldRender = !context.refId && (providerLinks.length > 0 || links.length > 0 || topLinks.length > 0), isLeafNode = context.type === "story" || context.type === "docs", itemStatus = useMemo(() => {
+    let status = "status-value:unknown";
+    if (!context)
+      return status;
+    if (isLeafNode) {
+      let values = Object.values(allStatuses?.[context.id] || {}).map((s2) => s2.value);
+      status = getMostCriticalStatusValue(values);
+    }
+    if (!isLeafNode) {
+      let groupValue = groupStatus && groupStatus[context.id];
+      status = groupValue === "status-value:success" || groupValue === void 0 ? "status-value:unknown" : groupValue;
+    }
+    return status;
+  }, [allStatuses, groupStatus, context, isLeafNode]), MenuIcon2 = useMemo(() => context.type !== "story" && context.type !== "docs" ? itemStatus !== "status-value:success" && itemStatus !== "status-value:unknown" ? react_default.createElement("svg", { key: "icon", viewBox: "0 0 6 6", width: "6", height: "6" }, react_default.createElement(UseSymbol, { type: "dot" })) : react_default.createElement(EllipsisIcon, null) : itemStatus === "status-value:error" ? react_default.createElement("svg", { key: "icon", viewBox: "0 0 14 14", width: "14", height: "14" }, react_default.createElement(UseSymbol, { type: "error" })) : itemStatus === "status-value:warning" ? react_default.createElement("svg", { key: "icon", viewBox: "0 0 14 14", width: "14", height: "14" }, react_default.createElement(UseSymbol, { type: "warning" })) : itemStatus === "status-value:success" ? react_default.createElement("svg", { key: "icon", viewBox: "0 0 14 14", width: "14", height: "14" }, react_default.createElement(UseSymbol, { type: "success" })) : react_default.createElement(EllipsisIcon, null), [itemStatus, context.type]);
   return useMemo(() => globalThis.CONFIG_TYPE !== "DEVELOPMENT" ? empty : {
     onMouseEnter: handlers.onMouseEnter,
     node: shouldRender ? react_default.createElement(
@@ -14180,13 +14214,13 @@ var empty = {
           "data-testid": "context-menu",
           ariaLabel: "Open context menu",
           type: "button",
-          status: "status-value:pending",
+          status: itemStatus,
           onClick: handlers.onOpen
         },
-        react_default.createElement(EllipsisIcon, null)
+        MenuIcon2
       )
     ) : null
-  }, [context, handlers, isOpen, shouldRender, links, topLinks]);
+  }, [context, handlers, isOpen, shouldRender, links, topLinks, itemStatus, MenuIcon2]);
 }, LiveContextMenu = ({
   context,
   links,
@@ -14209,33 +14243,6 @@ function generateTestProviderLinks(registeredTestProviders, context) {
   }).filter(Boolean);
 }
 
-// src/manager/components/sidebar/StatusContext.tsx
-var StatusContext = createContext({}), useStatusSummary = (item) => {
-  let { data, allStatuses, groupStatus } = useContext(StatusContext), summary = {
-    counts: {
-      "status-value:pending": 0,
-      "status-value:success": 0,
-      "status-value:error": 0,
-      "status-value:warning": 0,
-      "status-value:unknown": 0
-    },
-    statusesByValue: {
-      "status-value:pending": {},
-      "status-value:success": {},
-      "status-value:error": {},
-      "status-value:warning": {},
-      "status-value:unknown": {}
-    }
-  };
-  if (data && allStatuses && groupStatus && ["status-value:pending", "status-value:warning", "status-value:error"].includes(
-    groupStatus[item.id]
-  ))
-    for (let storyId of getDescendantIds(data, item.id, !1))
-      for (let status of Object.values(allStatuses[storyId] ?? {}))
-        summary.counts[status.value]++, summary.statusesByValue[status.value][storyId] ??= [], summary.statusesByValue[status.value][storyId].push(status);
-  return summary;
-};
-
 // src/manager/components/sidebar/components/CollapseIcon.tsx
 var CollapseIconWrapper = styled.div(({ theme, isExpanded }) => ({
   width: 8,
@@ -14578,47 +14585,19 @@ var statusOrder = [
     setExpanded,
     onSelectStoryId,
     api
-  } = props, theme = useTheme(), { isDesktop, isMobile: isMobile2, setMobileMenuOpen } = useLayout(), { counts, statusesByValue } = useStatusSummary(item);
+  } = props, theme = useTheme(), { isDesktop, isMobile: isMobile2, setMobileMenuOpen } = useLayout();
   if (!isDisplayed)
     return null;
-  let statusLinks = useMemo(() => {
-    if (item.type === "story" || item.type === "docs")
-      return Object.entries(statuses).filter(([, status]) => status.sidebarContextMenu !== !1).sort((a2, b2) => statusOrder.indexOf(a2[1].value) - statusOrder.indexOf(b2[1].value)).map(([typeId, status]) => ({
-        id: typeId,
-        title: status.title,
-        description: status.description,
-        "aria-label": `Test status for ${status.title}: ${status.value}`,
-        icon: StatusIconMap[status.value],
-        onClick: () => {
-          onSelectStoryId(item.id), internal_fullStatusStore.selectStatuses([status]);
-        }
-      }));
-    if (item.type === "component" || item.type === "group") {
-      let links = [], errorCount = counts["status-value:error"], warningCount = counts["status-value:warning"];
-      return errorCount && links.push({
-        id: "errors",
-        icon: StatusIconMap["status-value:error"],
-        title: `${errorCount} ${errorCount === 1 ? "story" : "stories"} with errors`,
-        onClick: () => {
-          let [firstStoryId] = Object.entries(statusesByValue["status-value:error"])[0];
-          onSelectStoryId(firstStoryId);
-          let errorStatuses = Object.values(statusesByValue["status-value:error"]).flat();
-          internal_fullStatusStore.selectStatuses(errorStatuses);
-        }
-      }), warningCount && links.push({
-        id: "warnings",
-        icon: StatusIconMap["status-value:warning"],
-        title: `${warningCount} ${warningCount === 1 ? "story" : "stories"} with warnings`,
-        onClick: () => {
-          let [firstStoryId] = Object.entries(statusesByValue["status-value:warning"])[0];
-          onSelectStoryId(firstStoryId);
-          let warningStatuses = Object.values(statusesByValue["status-value:warning"]).flat();
-          internal_fullStatusStore.selectStatuses(warningStatuses);
-        }
-      }), links;
+  let statusLinks = useMemo(() => item.type === "story" || item.type === "docs" ? Object.entries(statuses).filter(([, status]) => status.sidebarContextMenu !== !1).sort((a2, b2) => statusOrder.indexOf(a2[1].value) - statusOrder.indexOf(b2[1].value)).map(([typeId, status]) => ({
+    id: typeId,
+    title: status.title,
+    description: status.description,
+    "aria-label": `Test status for ${status.title}: ${status.value}`,
+    icon: StatusIconMap[status.value],
+    onClick: () => {
+      onSelectStoryId(item.id), internal_fullStatusStore.selectStatuses([status]);
     }
-    return [];
-  }, [counts, item.id, item.type, onSelectStoryId, statuses, statusesByValue]), id = createId(item.id, refId), contextMenu = refId === "storybook_internal" ? useContextMenu(item, statusLinks, api) : { node: null, onMouseEnter: () => {
+  })) : [], [item.id, item.type, onSelectStoryId, statuses]), id = createId(item.id, refId), contextMenu = refId === "storybook_internal" ? useContextMenu(item, statusLinks, api) : { node: null, onMouseEnter: () => {
   } };
   if (item.type === "story" && !("children" in item && item.children) && (!("subtype" in item) || item.subtype !== "test") || item.type === "docs") {
     let LeafNode3 = item.type === "docs" ? DocumentNode : StoryNode, statusValue = getMostCriticalStatusValue(
@@ -19119,14 +19098,9 @@ var Sections = styled.ol(({ theme }) => ({
       return { id, title: title2, items, progress };
     }),
     [itemsById, sectionsById]
-  ), next = useMemo(
-    () => Object.values(sections).findIndex(
-      ({ items }) => items.some((item) => item.isOpen && item.isAvailable)
-    ),
-    [sections]
   );
-  return react_default.createElement(Sections, null, sections.map(({ id, title: title2, items, progress }, index) => {
-    let collapsed = !items.some((item) => item.id === locationHash) && (progress === 0 || progress === 100) && next !== index;
+  return react_default.createElement(Sections, null, sections.map(({ id, title: title2, items, progress }) => {
+    let collapsed = progress === 100 && items.every((item) => item.id !== locationHash);
     return react_default.createElement("li", { key: id }, react_default.createElement(Focus.Proxy, { targetId: `toggle-${id}` }, react_default.createElement(
       Collapsible,
       {
@@ -19164,7 +19138,7 @@ var Sections = styled.ol(({ theme }) => ({
           isSkipped,
           ...item
         }) => {
-          let isChecked = isAccepted || isDone, isCollapsed = isChecked && item.id !== locationHash, isLocked = !!isLockedBy, itemContent = content?.({ api });
+          let isChecked = isAccepted || isDone, isCollapsed = item.id !== locationHash, isLocked = !!isLockedBy, itemContent = content?.({ api });
           return react_default.createElement(Listbox.Item, { as: "li", key: item.id }, react_default.createElement(
             Focus.Target,
             {