storybook 10.0.0-beta.5 → 10.0.0-beta.7

package/dist/core-server/presets/common-manager.js

@@ -55,7 +55,7 @@ import {
 import {
   MINIMAL_VIEWPORTS,
   responsiveViewport
-} from "../../_browser-chunks/chunk-O5R5CGFA.js";
+} from "../../_browser-chunks/chunk-TMDZCWME.js";
 import {
   ADDON_ID as ADDON_ID2,
   PARAM_KEY as PARAM_KEY2,
@@ -86,6 +86,7 @@ import {
   useArgs,
   useGlobals,
   useParameter,
+  useStorybookApi,
   useStorybookState
 } from "storybook/manager-api";
 import { styled as styled30 } from "storybook/theming";
@@ -5325,6 +5326,7 @@ var AddonWrapper = styled30.div({
   overflowY: "auto"
 });
 var ControlsPanel = /* @__PURE__ */ __name(({ saveStory, createStory }) => {
+  const api = useStorybookApi();
   const [isLoading, setIsLoading] = useState13(true);
   const [args, updateArgs, resetArgs, initialArgs] = useArgs();
   const [globals] = useGlobals();
@@ -5336,6 +5338,7 @@ var ControlsPanel = /* @__PURE__ */ __name(({ saveStory, createStory }) => {
     disableSaveFromUI = false
   } = useParameter(PARAM_KEY5, {});
   const { path, previewInitialized } = useStorybookState();
+  const storyData = api.getCurrentStoryData();
   useEffect10(() => {
     if (previewInitialized) {
       setIsLoading(false);
@@ -5369,15 +5372,15 @@ var ControlsPanel = /* @__PURE__ */ __name(({ saveStory, createStory }) => {
       sort,
       isLoading
     }
-  ), hasControls && hasUpdatedArgs && global.CONFIG_TYPE === "DEVELOPMENT" && disableSaveFromUI !== true && React37.createElement(SaveStory, { ...{ resetArgs, saveStory, createStory } }));
+  ), hasControls && storyData.type === "story" && storyData.subtype !== "test" && hasUpdatedArgs && global.CONFIG_TYPE === "DEVELOPMENT" && disableSaveFromUI !== true && React37.createElement(SaveStory, { ...{ resetArgs, saveStory, createStory } }));
 }, "ControlsPanel");
 
 // src/controls/components/Title.tsx
 import React38 from "react";
 import { Badge } from "storybook/internal/components";
-import { useArgTypes as useArgTypes2, useStorybookApi } from "storybook/manager-api";
+import { useArgTypes as useArgTypes2, useStorybookApi as useStorybookApi2 } from "storybook/manager-api";
 function Title2() {
-  const api = useStorybookApi();
+  const api = useStorybookApi2();
   const selectedPanel = api.getSelectedPanel();
   const rows = useArgTypes2();
   const controlsCount = Object.values(rows).filter(
@@ -5501,9 +5504,9 @@ import { addons as addons2, types as types2 } from "storybook/manager-api";
 import React40 from "react";
 import { Badge as Badge2 } from "storybook/internal/components";
 import { STORY_CHANGED } from "storybook/internal/core-events";
-import { useAddonState, useChannel, useStorybookApi as useStorybookApi2 } from "storybook/manager-api";
+import { useAddonState, useChannel, useStorybookApi as useStorybookApi3 } from "storybook/manager-api";
 function Title3() {
-  const api = useStorybookApi2();
+  const api = useStorybookApi3();
   const selectedPanel = api.getSelectedPanel();
   const [{ count }, setCount] = useAddonState(ADDON_ID, { count: 0 });
   useChannel({
@@ -6893,7 +6896,9 @@ import {
   experimental_useStatusStore,
   useAddonState as useAddonState2,
   useChannel as useChannel2,
-  useParameter as useParameter2
+  useParameter as useParameter2,
+  useStorybookApi as useStorybookApi6,
+  useStorybookState as useStorybookState2
 } from "storybook/manager-api";
 
 // src/component-testing/constants.ts
@@ -7049,7 +7054,7 @@ var DetachedDebuggerMessage = /* @__PURE__ */ __name(({ storyUrl }) => {
 import React47, { useEffect as useEffect12, useState as useState15 } from "react";
 import { EmptyTabContent as EmptyTabContent2, Link as Link5 } from "storybook/internal/components";
 import { DocumentIcon as DocumentIcon3 } from "@storybook/icons";
-import { useStorybookApi as useStorybookApi3 } from "storybook/manager-api";
+import { useStorybookApi as useStorybookApi4 } from "storybook/manager-api";
 import { styled as styled34 } from "storybook/theming";
 var Links2 = styled34.div(({ theme: theme3 }) => ({
   display: "flex",
@@ -7058,7 +7063,7 @@ var Links2 = styled34.div(({ theme: theme3 }) => ({
 }));
 var Empty2 = /* @__PURE__ */ __name(() => {
   const [isLoading, setIsLoading] = useState15(true);
-  const api = useStorybookApi3();
+  const api = useStorybookApi4();
   const docsUrl = api.getDocsUrl({
     subpath: DOCUMENTATION_PLAY_FUNCTION_LINK,
     versioned: true,
@@ -8623,8 +8628,10 @@ var StyledIconButton2 = styled39(IconButton6)(({ theme: theme3 }) => ({
 var StyledSeparator = styled39(Separator)({
   marginTop: 0
 });
-var StyledLocation = styled39(P2)(({ theme: theme3 }) => ({
-  color: theme3.textMutedColor,
+var StyledLocation = styled39(P2)(({ theme: theme3, isText }) => ({
+  color: isText ? theme3.textMutedColor : theme3.color.secondary,
+  cursor: isText ? "default" : "pointer",
+  fontWeight: isText ? theme3.typography.weight.regular : theme3.typography.weight.bold,
   justifyContent: "flex-end",
   textAlign: "right",
   whiteSpace: "nowrap",
@@ -8657,7 +8664,10 @@ var Subnav = /* @__PURE__ */ __name(({
   controlStates,
   status,
   storyFileName,
-  onScrollToEnd
+  onScrollToEnd,
+  importPath,
+  canOpenInEditor,
+  api
 }) => {
   const buttonText = status === "errored" ? "Scroll to error" : "Scroll to end";
   const theme3 = useTheme7();
@@ -8693,13 +8703,32 @@ var Subnav = /* @__PURE__ */ __name(({
       disabled: !controlStates.end
     },
     React63.createElement(FastForwardIcon, null)
-  )), React63.createElement(WithTooltip3, { trigger: "hover", hasChrome: false, tooltip: React63.createElement(Note2, { note: "Rerun" }) }, React63.createElement(RerunButton, { "aria-label": "Rerun", onClick: controls.rerun }, React63.createElement(SyncIcon, null)))), storyFileName && React63.createElement(Group, null, React63.createElement(StyledLocation, null, storyFileName)))));
+  )), React63.createElement(WithTooltip3, { trigger: "hover", hasChrome: false, tooltip: React63.createElement(Note2, { note: "Rerun" }) }, React63.createElement(RerunButton, { "aria-label": "Rerun", onClick: controls.rerun }, React63.createElement(SyncIcon, null)))), (importPath || storyFileName) && React63.createElement(Group, null, canOpenInEditor ? React63.createElement(
+    WithTooltip3,
+    {
+      trigger: "hover",
+      hasChrome: false,
+      tooltip: React63.createElement(Note2, { note: "Open in editor" })
+    },
+    React63.createElement(
+      StyledLocation,
+      {
+        "aria-label": "Open in editor",
+        onClick: () => {
+          api.openInEditor({
+            file: importPath
+          });
+        }
+      },
+      storyFileName
+    )
+  ) : React63.createElement(StyledLocation, { isText: true }, storyFileName)))));
 }, "Subnav");
 
 // src/component-testing/components/TestDiscrepancyMessage.tsx
 import React64 from "react";
 import { Link as Link6 } from "storybook/internal/components";
-import { useStorybookApi as useStorybookApi4 } from "storybook/manager-api";
+import { useStorybookApi as useStorybookApi5 } from "storybook/manager-api";
 import { styled as styled40 } from "storybook/theming";
 var Wrapper12 = styled40.div(({ theme: { color: color2, typography: typography4, background } }) => ({
   textAlign: "start",
@@ -8723,7 +8752,7 @@ var Wrapper12 = styled40.div(({ theme: { color: color2, typography: typography4,
   }
 }));
 var TestDiscrepancyMessage = /* @__PURE__ */ __name(({ browserTestStatus }) => {
-  const api = useStorybookApi4();
+  const api = useStorybookApi5();
   const docsUrl = api.getDocsUrl({
     subpath: DOCUMENTATION_DISCREPANCY_LINK,
     versioned: true,
@@ -8787,7 +8816,10 @@ var InteractionsPanel = React65.memo(
     onScrollToEnd,
     endRef,
     hasResultMismatch,
-    browserTestStatus
+    browserTestStatus,
+    importPath,
+    canOpenInEditor,
+    api
   }) {
     const filter = useAnsiToHtmlFilter();
     const hasRealInteractions = interactions.some((i2) => i2.id !== INTERNAL_RENDER_CALL_ID);
@@ -8798,7 +8830,10 @@ var InteractionsPanel = React65.memo(
         controlStates,
         status,
         storyFileName: fileName,
-        onScrollToEnd
+        onScrollToEnd,
+        importPath,
+        canOpenInEditor,
+        api
       }
     ), React65.createElement("div", { "aria-label": "Interactions list" }, interactions.map((call) => React65.createElement(
       Interaction,
@@ -8933,13 +8968,18 @@ var getInternalRenderLogItem = /* @__PURE__ */ __name((status) => ({
 }), "getInternalRenderLogItem");
 var Panel = memo4(
   /* @__PURE__ */ __name(function PanelMemoized({ refId, storyId, storyUrl }) {
-    const { statusValue, testRunId } = experimental_useStatusStore((state) => {
-      const storyStatus = refId ? void 0 : state[storyId]?.[STATUS_TYPE_ID_COMPONENT_TEST];
+    const { statusValue, testRunId } = experimental_useStatusStore((state2) => {
+      const storyStatus = refId ? void 0 : state2[storyId]?.[STATUS_TYPE_ID_COMPONENT_TEST];
       return {
         statusValue: storyStatus?.value,
         testRunId: storyStatus?.data?.testRunId
       };
     });
+    const state = useStorybookState2();
+    const api = useStorybookApi6();
+    const data = api.getData(state.storyId, state.refId);
+    const importPath = data?.importPath;
+    const canOpenInEditor = global2.CONFIG_TYPE === "DEVELOPMENT" && !state.refId;
     const [panelState, set] = useAddonState2(ADDON_ID7, {
       status: "rendering",
       controlStates: INITIAL_CONTROL_STATES,
@@ -8980,6 +9020,7 @@ var Panel = memo4(
       }
       return () => observer?.disconnect();
     }, []);
+    const lastStoryId = useRef7(void 0);
     const lastRenderId = useRef7(0);
     const emit = useChannel2(
       {
@@ -8987,16 +9028,17 @@ var Panel = memo4(
         [EVENTS.SYNC]: (payload) => {
           log.current = [getInternalRenderLogItem("done" /* DONE */), ...payload.logItems];
           set(
-            (state) => getPanelState(
-              { ...state, controlStates: payload.controlStates, pausedAt: payload.pausedAt },
+            (state2) => getPanelState(
+              { ...state2, controlStates: payload.controlStates, pausedAt: payload.pausedAt },
               { log: log.current, calls: calls.current, collapsed, setCollapsed }
             )
           );
         },
         [STORY_RENDER_PHASE_CHANGED]: (event) => {
-          if (event.newPhase === "preparing" || event.newPhase === "loading") {
+          if (lastStoryId.current === event.storyId && ["preparing", "loading"].includes(event.newPhase)) {
             return;
           }
+          lastStoryId.current = event.storyId;
           lastRenderId.current = Math.max(lastRenderId.current, event.renderId || 0);
           if (lastRenderId.current !== event.renderId) {
             return;
@@ -9015,10 +9057,10 @@ var Panel = memo4(
               unhandledErrors: void 0
             });
           } else {
-            set((state) => {
-              const status2 = event.newPhase in playStatusMap ? playStatusMap[event.newPhase] : state.status;
+            set((state2) => {
+              const status2 = event.newPhase in playStatusMap ? playStatusMap[event.newPhase] : state2.status;
               return getPanelState(
-                { ...state, status: status2, pausedAt: void 0 },
+                { ...state2, status: status2, pausedAt: void 0 },
                 { log: log.current, calls: calls.current, collapsed, setCollapsed }
               );
             });
@@ -9031,9 +9073,9 @@ var Panel = memo4(
             getInternalRenderCall(storyId, { ...e2, callId: INTERNAL_RENDER_CALL_ID })
           );
           set(
-            (state) => getPanelState(
+            (state2) => getPanelState(
               {
-                ...state,
+                ...state2,
                 hasException: true,
                 caughtException: void 0,
                 controlStates: INITIAL_CONTROL_STATES,
@@ -9044,17 +9086,17 @@ var Panel = memo4(
           );
         },
         [PLAY_FUNCTION_THREW_EXCEPTION]: (caughtException2) => {
-          set((state) => ({ ...state, caughtException: caughtException2, hasException: true }));
+          set((state2) => ({ ...state2, caughtException: caughtException2, hasException: true }));
         },
         [UNHANDLED_ERRORS_WHILE_PLAYING]: (unhandledErrors2) => {
-          set((state) => ({ ...state, unhandledErrors: unhandledErrors2, hasException: true }));
+          set((state2) => ({ ...state2, unhandledErrors: unhandledErrors2, hasException: true }));
         }
       },
       [collapsed]
     );
     useEffect17(() => {
       set(
-        (state) => getPanelState(state, { log: log.current, calls: calls.current, collapsed, setCollapsed })
+        (state2) => getPanelState(state2, { log: log.current, calls: calls.current, collapsed, setCollapsed })
       );
     }, [set, collapsed]);
     const controls = useMemo5(
@@ -9122,7 +9164,10 @@ var Panel = memo4(
         unhandledErrors,
         pausedAt,
         endRef,
-        onScrollToEnd: scrollTarget && scrollToTarget
+        onScrollToEnd: scrollTarget && scrollToTarget,
+        importPath,
+        canOpenInEditor,
+        api
       }
     ));
   }, "PanelMemoized")
@@ -9131,9 +9176,9 @@ var Panel = memo4(
 // src/component-testing/components/PanelTitle.tsx
 import React67 from "react";
 import { Badge as Badge3 } from "storybook/internal/components";
-import { useAddonState as useAddonState3, useStorybookApi as useStorybookApi5 } from "storybook/manager-api";
+import { useAddonState as useAddonState3, useStorybookApi as useStorybookApi7 } from "storybook/manager-api";
 function PanelTitle() {
-  const api = useStorybookApi5();
+  const api = useStorybookApi7();
   const selectedPanel = api.getSelectedPanel();
   const [addonState = {}] = useAddonState3(ADDON_ID7);
   const { status, hasException, interactionsCount } = addonState;
@@ -9306,11 +9351,11 @@ import { addons as addons5, types as types5 } from "storybook/manager-api";
 import React71, { useCallback as useCallback9, useEffect as useEffect18 } from "react";
 import { IconButton as IconButton8 } from "storybook/internal/components";
 import { RulerIcon } from "@storybook/icons";
-import { useGlobals as useGlobals3, useStorybookApi as useStorybookApi6 } from "storybook/manager-api";
+import { useGlobals as useGlobals3, useStorybookApi as useStorybookApi8 } from "storybook/manager-api";
 var Tool = /* @__PURE__ */ __name(() => {
   const [globals, updateGlobals] = useGlobals3();
   const { measureEnabled } = globals || {};
-  const api = useStorybookApi6();
+  const api = useStorybookApi8();
   const toggleMeasure = useCallback9(
     () => updateGlobals({
       measureEnabled: !measureEnabled
@@ -9319,7 +9364,7 @@ var Tool = /* @__PURE__ */ __name(() => {
   );
   useEffect18(() => {
     api.setAddonShortcut(ADDON_ID4, {
-      label: "Toggle Measure [M]",
+      label: "Toggle Measure",
       defaultShortcut: ["M"],
       actionName: "measure",
       showInMenu: false,
@@ -9358,10 +9403,10 @@ import { addons as addons6, types as types6 } from "storybook/manager-api";
 import React74, { memo as memo6, useCallback as useCallback10, useEffect as useEffect19 } from "react";
 import { IconButton as IconButton9 } from "storybook/internal/components";
 import { OutlineIcon } from "@storybook/icons";
-import { useGlobals as useGlobals4, useStorybookApi as useStorybookApi7 } from "storybook/manager-api";
+import { useGlobals as useGlobals4, useStorybookApi as useStorybookApi9 } from "storybook/manager-api";
 var OutlineSelector = memo6(/* @__PURE__ */ __name(function OutlineSelector2() {
   const [globals, updateGlobals] = useGlobals4();
-  const api = useStorybookApi7();
+  const api = useStorybookApi9();
   const isActive = [true, "true"].includes(globals[PARAM_KEY4]);
   const toggleOutline = useCallback10(
     () => updateGlobals({
@@ -9501,7 +9546,7 @@ var ViewportTool = /* @__PURE__ */ __name(({ api }) => {
   const { options = MINIMAL_VIEWPORTS, disable } = config || {};
   const data = globals?.[PARAM_KEY2] || {};
   const viewportName = typeof data === "string" ? data : data.value;
-  const isRotated = typeof data === "string" ? false : data.isRotated;
+  const isRotated = typeof data === "string" ? false : !!data.isRotated;
   const item = options[viewportName] || responsiveViewport;
   const isActive = isTooltipVisible || item !== responsiveViewport;
   const isLocked = PARAM_KEY2 in storyGlobals;

package/dist/core-server/presets/common-override-preset.js

@@ -1,23 +1,23 @@
-import CJS_COMPAT_NODE_URL_0oz6lpav6bgq from 'node:url';
-import CJS_COMPAT_NODE_PATH_0oz6lpav6bgq from 'node:path';
-import CJS_COMPAT_NODE_MODULE_0oz6lpav6bgq from "node:module";
+import CJS_COMPAT_NODE_URL_srln17sp2zh from 'node:url';
+import CJS_COMPAT_NODE_PATH_srln17sp2zh from 'node:path';
+import CJS_COMPAT_NODE_MODULE_srln17sp2zh from "node:module";
 
-var __filename = CJS_COMPAT_NODE_URL_0oz6lpav6bgq.fileURLToPath(import.meta.url);
-var __dirname = CJS_COMPAT_NODE_PATH_0oz6lpav6bgq.dirname(__filename);
-var require = CJS_COMPAT_NODE_MODULE_0oz6lpav6bgq.createRequire(import.meta.url);
+var __filename = CJS_COMPAT_NODE_URL_srln17sp2zh.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_srln17sp2zh.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_srln17sp2zh.createRequire(import.meta.url);
 
 // ------------------------------------------------------------
 // end of CJS compatibility banner, injected by Storybook's esbuild configuration
 // ------------------------------------------------------------
 import {
   glob
-} from "../../_node-chunks/chunk-UTCFHTQH.js";
+} from "../../_node-chunks/chunk-MRCMZPA2.js";
 import {
   slash
-} from "../../_node-chunks/chunk-J3DQMIO4.js";
+} from "../../_node-chunks/chunk-FCNWWJV7.js";
 import {
   __name
-} from "../../_node-chunks/chunk-2VMDKLSW.js";
+} from "../../_node-chunks/chunk-ZM2HT2RW.js";
 
 // src/core-server/utils/remove-mdx-entries.ts
 import { isAbsolute, join, relative } from "node:path";