storybook 10.1.0-beta.0 → 10.1.0-beta.2

package/dist/manager/runtime.js

@@ -10667,7 +10667,7 @@ var CodeWrapper = styled.div(({ theme }) => ({
         {
           id: "guidedTour",
           label: "Take the guided tour",
-          available: ({ index }) => !!index && "example-button--primary" in index && addons.experimental_getRegisteredAddons().includes(ADDON_ID2),
+          available: ({ index }) => !!index && "example-button--primary" in index && !!globalThis?.FEATURES?.controls && addons.experimental_getRegisteredAddons().includes(ADDON_ID2),
           criteria: "Guided tour is completed",
           subscribe: ({ api, accept }) => api.on(ADDON_ONBOARDING_CHANNEL, ({ step, type }) => {
             type !== "dismiss" && ["6:IntentSurvey", "7:FinishedOnboarding"].includes(step) && accept();
@@ -10703,14 +10703,22 @@ var CodeWrapper = styled.div(({ theme }) => ({
           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,
             {
-              href: api.getDocsUrl({ subpath: "writing-stories/decorators", renderer: !0 }),
+              href: api.getDocsUrl({
+                subpath: "writing-stories/decorators",
+                renderer: !0,
+                ref: "guide"
+              }),
               target: "_blank"
             },
             "setting up surrounding context in decorators"
           ), " ", "or", " ", react_default.createElement(
             Link,
             {
-              href: api.getDocsUrl({ subpath: "configure/styling-and-css", renderer: !0 }),
+              href: api.getDocsUrl({
+                subpath: "configure/styling-and-css",
+                renderer: !0,
+                ref: "guide"
+              }),
               target: "_blank"
             },
             "applying global styles"
@@ -10738,7 +10746,11 @@ export const Primary: Story = {
 };`), react_default.createElement("p", null, react_default.createElement(
             Link,
             {
-              href: api.getDocsUrl({ subpath: "writing-stories", renderer: !0 }),
+              href: api.getDocsUrl({
+                subpath: "writing-stories",
+                renderer: !0,
+                ref: "guide"
+              }),
               target: "_blank",
               withArrow: !0
             },
@@ -10752,7 +10764,10 @@ export const Primary: Story = {
           content: ({ api }) => react_default.createElement(react_default.Fragment, null, react_default.createElement("p", null, "Storybook gets better as you add more components. Start with the easy ones, like Button or Avatar, and work your way up to more complex components, like Select, Autocomplete, or even full pages."), react_default.createElement(
             "img",
             {
-              src: api.getDocsUrl({ subpath: "onboarding/sidebar-components.png", asset: !0 }),
+              src: api.getDocsUrl({
+                asset: "onboarding/sidebar-components.png",
+                ref: "guide"
+              }),
               alt: "Components in the sidebar"
             }
           ), react_default.createElement("p", null, react_default.createElement(
@@ -10760,7 +10775,8 @@ export const Primary: Story = {
             {
               href: api.getDocsUrl({
                 subpath: "get-started/whats-a-story#create-a-new-story",
-                renderer: !0
+                renderer: !0,
+                ref: "guide"
               }),
               target: "_blank",
               withArrow: !0
@@ -10783,8 +10799,8 @@ export const Primary: Story = {
             "img",
             {
               src: api.getDocsUrl({
-                subpath: "onboarding/sidebar-many-stories.png",
-                asset: !0
+                asset: "onboarding/sidebar-many-stories.png",
+                ref: "guide"
               }),
               alt: "Stories in the sidebar"
             }
@@ -10793,7 +10809,8 @@ export const Primary: Story = {
             {
               href: api.getDocsUrl({
                 subpath: "essentials/controls#creating-and-editing-stories-from-controls",
-                renderer: !0
+                renderer: !0,
+                ref: "guide"
               }),
               target: "_blank",
               withArrow: !0
@@ -10826,18 +10843,26 @@ export const Primary: Story = {
           id: "controls",
           after: ["renderComponent"],
           label: "Change a story with Controls",
+          available: () => !!globalThis?.FEATURES?.controls,
           criteria: "Story args are updated",
           subscribe: ({ api, done }) => api.on(STORY_ARGS_UPDATED, done),
           content: ({ api }) => react_default.createElement(react_default.Fragment, null, react_default.createElement("p", null, "When you change the value of one of the inputs in the Controls table, the story automatically updates to reflect that change. It's a great way to explore how a component handles various inputs."), react_default.createElement(
             "img",
             {
-              src: api.getDocsUrl({ subpath: "api/doc-block-controls.png", asset: !0 }),
+              src: api.getDocsUrl({
+                asset: "api/doc-block-controls.png",
+                ref: "guide"
+              }),
               alt: "Screenshot of Controls block"
             }
           ), react_default.createElement("strong", null, "Take it further"), react_default.createElement("p", null, "Read the", " ", react_default.createElement(
             Link,
             {
-              href: api.getDocsUrl({ subpath: "essentials/controls", renderer: !0 }),
+              href: api.getDocsUrl({
+                subpath: "essentials/controls",
+                renderer: !0,
+                ref: "guide"
+              }),
               target: "_blank"
             },
             "Controls documentation"
@@ -10847,18 +10872,26 @@ export const Primary: Story = {
           id: "viewports",
           after: ["renderComponent"],
           label: "Check responsiveness with Viewports",
+          available: () => !!globalThis?.FEATURES?.viewport,
           criteria: "Viewport global is updated",
           subscribe: ({ api, done }) => api.on(UPDATE_GLOBALS, ({ globals }) => globals?.viewport && done()),
           content: ({ api }) => react_default.createElement(react_default.Fragment, null, react_default.createElement("p", null, "Many UI components need to be responsive to the viewport size. Storybook has built-in support for previewing stories in various device sizes."), react_default.createElement(
             "img",
             {
-              src: api.getDocsUrl({ subpath: "onboarding/viewports-menu.png", asset: !0 }),
+              src: api.getDocsUrl({
+                asset: "onboarding/viewports-menu.png",
+                ref: "guide"
+              }),
               alt: "Screenshot of Viewports menu"
             }
           ), react_default.createElement("strong", null, "Take it further"), react_default.createElement("p", null, "Read the", " ", react_default.createElement(
             Link,
             {
-              href: api.getDocsUrl({ subpath: "essentials/viewport", renderer: !0 }),
+              href: api.getDocsUrl({
+                subpath: "essentials/viewport",
+                renderer: !0,
+                ref: "guide"
+              }),
               target: "_blank"
             },
             "Viewports documentation"
@@ -10881,7 +10914,10 @@ export default {
 }`), react_default.createElement("p", null, "Which would look like:"), react_default.createElement(
             "img",
             {
-              src: api.getDocsUrl({ subpath: "onboarding/sidebar-with-groups.png", asset: !0 }),
+              src: api.getDocsUrl({
+                asset: "onboarding/sidebar-with-groups.png",
+                ref: "guide"
+              }),
               alt: "Grouped components in the sidebar"
             }
           ), react_default.createElement("strong", null, "Take it further"), react_default.createElement("p", null, "Read the", " ", react_default.createElement(
@@ -10889,7 +10925,8 @@ export default {
             {
               href: api.getDocsUrl({
                 subpath: "writing-stories/naming-components-and-hierarchy",
-                renderer: !0
+                renderer: !0,
+                ref: "guide"
               }),
               target: "_blank"
             },
@@ -10916,8 +10953,8 @@ export default {
             "img",
             {
               src: api.getDocsUrl({
-                subpath: "writing-tests/testing-ui-overview.png",
-                asset: !0
+                asset: "writing-tests/testing-ui-overview.png",
+                ref: "guide"
               }),
               alt: "Storybook app with story status indicators, testing widget, and addon panel annotated"
             }
@@ -10926,7 +10963,8 @@ export default {
             {
               href: api.getDocsUrl({
                 subpath: "writing-tests/integrations/vitest-addon",
-                renderer: !0
+                renderer: !0,
+                ref: "guide"
               }),
               target: "_blank",
               withArrow: !0
@@ -10974,8 +11012,8 @@ export default {
             "img",
             {
               src: api.getDocsUrl({
-                subpath: "onboarding/test-widget-with-failures.png",
-                asset: !0
+                asset: "onboarding/test-widget-with-failures.png",
+                ref: "guide"
               }),
               alt: "Test widget showing test failures"
             }
@@ -10983,8 +11021,8 @@ export default {
             "img",
             {
               src: api.getDocsUrl({
-                subpath: "writing-tests/context-menu.png",
-                asset: !0
+                asset: "writing-tests/context-menu.png",
+                ref: "guide"
               }),
               alt: "Screenshot of story sidebar item with open menu"
             }
@@ -10993,7 +11031,8 @@ export default {
             {
               href: api.getDocsUrl({
                 subpath: "writing-tests#component-tests",
-                renderer: !0
+                renderer: !0,
+                ref: "guide"
               }),
               target: "_blank"
             },
@@ -11004,6 +11043,7 @@ export default {
           id: "writeInteractions",
           after: ["renderComponent"],
           label: "Test functionality with interactions",
+          available: () => !!globalThis?.FEATURES?.interactions,
           criteria: "At least one story with a play or test function",
           subscribe: subscribeToIndex(
             (entries) => Object.values(entries).some(
@@ -11047,8 +11087,8 @@ export const Disabled: Story = {
             "img",
             {
               src: api.getDocsUrl({
-                subpath: "writing-tests/interaction-test-pass.png",
-                asset: !0
+                asset: "writing-tests/interaction-test-pass.png",
+                ref: "guide"
               }),
               alt: "Storybook with a LoginForm component and passing interactions in the Interactions panel"
             }
@@ -11057,7 +11097,8 @@ export const Disabled: Story = {
             {
               href: api.getDocsUrl({
                 subpath: "writing-tests/interaction-testing",
-                renderer: !0
+                renderer: !0,
+                ref: "guide"
               }),
               target: "_blank"
             },
@@ -11077,7 +11118,8 @@ export const Disabled: Story = {
             {
               href: api.getDocsUrl({
                 subpath: "writing-tests/accessibility-testing",
-                renderer: !0
+                renderer: !0,
+                ref: "guide"
               }),
               target: "_blank",
               withArrow: !0
@@ -11098,8 +11140,8 @@ export const Disabled: Story = {
             "img",
             {
               src: api.getDocsUrl({
-                subpath: "writing-tests/test-widget-a11y-enabled.png",
-                asset: !0
+                asset: "writing-tests/test-widget-a11y-enabled.png",
+                ref: "guide"
               }),
               alt: "Testing widget with accessibility activated"
             }
@@ -11107,8 +11149,8 @@ export const Disabled: Story = {
             "img",
             {
               src: api.getDocsUrl({
-                subpath: "writing-tests/addon-a11y-debug-violations.png",
-                asset: !0
+                asset: "writing-tests/addon-a11y-debug-violations.png",
+                ref: "guide"
               }),
               alt: "Storybook app with accessibility panel open, showing violations and an interactive popover on the violating elements in the preview"
             }
@@ -11117,7 +11159,8 @@ export const Disabled: Story = {
             {
               href: api.getDocsUrl({
                 subpath: "writing-tests/accessibility-testing",
-                renderer: !0
+                renderer: !0,
+                ref: "guide"
               }),
               target: "_blank"
             },
@@ -11139,7 +11182,8 @@ export const Disabled: Story = {
             {
               href: api.getDocsUrl({
                 subpath: "writing-tests/visual-testing",
-                renderer: !0
+                renderer: !0,
+                ref: "guide"
               }),
               target: "_blank",
               withArrow: !0
@@ -11157,8 +11201,8 @@ export const Disabled: Story = {
             "img",
             {
               src: api.getDocsUrl({
-                subpath: "writing-tests/test-widget-expanded-with-vta.png",
-                asset: !0
+                asset: "writing-tests/test-widget-expanded-with-vta.png",
+                ref: "guide"
               }),
               alt: "Expanded testing widget, showing the Visual tests section"
             }
@@ -11166,8 +11210,8 @@ export const Disabled: Story = {
             "img",
             {
               src: api.getDocsUrl({
-                subpath: "writing-tests/vta-run-from-panel.png",
-                asset: !0
+                asset: "writing-tests/vta-run-from-panel.png",
+                ref: "guide"
               }),
               alt: "Visual tests addon panel showing a diff from the baseline"
             }
@@ -11176,7 +11220,8 @@ export const Disabled: Story = {
             {
               href: api.getDocsUrl({
                 subpath: "writing-tests/visual-testing",
-                renderer: !0
+                renderer: !0,
+                ref: "guide"
               }),
               target: "_blank"
             },
@@ -11196,8 +11241,8 @@ export const Disabled: Story = {
             "img",
             {
               src: api.getDocsUrl({
-                subpath: "writing-tests/test-widget-coverage-summary.png",
-                asset: !0
+                asset: "writing-tests/test-widget-coverage-summary.png",
+                ref: "guide"
               }),
               alt: "Test widget with coverage summary"
             }
@@ -11206,7 +11251,8 @@ export const Disabled: Story = {
             {
               href: api.getDocsUrl({
                 subpath: "writing-tests/test-coverage",
-                renderer: !0
+                renderer: !0,
+                ref: "guide"
               }),
               target: "_blank"
             },
@@ -11221,8 +11267,8 @@ export const Disabled: Story = {
             "img",
             {
               src: api.getDocsUrl({
-                subpath: "writing-tests/test-ci-workflow-pr-status-checks.png",
-                asset: !0
+                asset: "writing-tests/test-ci-workflow-pr-status-checks.png",
+                ref: "guide"
               }),
               alt: 'GitHub pull request status checks, with a failing "UI Tests / test" check'
             }
@@ -11231,7 +11277,8 @@ export const Disabled: Story = {
             {
               href: api.getDocsUrl({
                 subpath: "writing-tests/in-ci",
-                renderer: !0
+                renderer: !0,
+                ref: "guide"
               }),
               target: "_blank"
             },
@@ -11257,7 +11304,8 @@ export const Disabled: Story = {
             {
               href: api.getDocsUrl({
                 subpath: "writing-docs",
-                renderer: !0
+                renderer: !0,
+                ref: "guide"
               }),
               target: "_blank",
               withArrow: !0
@@ -11284,8 +11332,8 @@ export default {
             "img",
             {
               src: api.getDocsUrl({
-                subpath: "writing-docs/autodocs.png",
-                asset: !0
+                asset: "writing-docs/autodocs.png",
+                ref: "guide"
               }),
               alt: "Storybook autodocs page, showing a title, description, primary story, controls table, and additional stories"
             }
@@ -11294,7 +11342,8 @@ export default {
             {
               href: api.getDocsUrl({
                 subpath: "writing-docs/autodocs",
-                renderer: !0
+                renderer: !0,
+                ref: "guide"
               }),
               target: "_blank"
             },
@@ -11314,7 +11363,11 @@ export default {
           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,
             {
-              href: api.getDocsUrl({ subpath: "writing-docs/doc-blocks", renderer: !0 }),
+              href: api.getDocsUrl({
+                subpath: "writing-docs/doc-blocks",
+                renderer: !0,
+                ref: "guide"
+              }),
               target: "_blank"
             },
             "doc blocks"
@@ -11341,7 +11394,8 @@ npm install @my/awesome-project
             {
               href: api.getDocsUrl({
                 subpath: "writing-docs/mdx",
-                renderer: !0
+                renderer: !0,
+                ref: "guide"
               }),
               target: "_blank"
             },
@@ -11356,8 +11410,8 @@ npm install @my/awesome-project
             "img",
             {
               src: api.getDocsUrl({
-                subpath: "sharing/prbadge-publish.png",
-                asset: !0
+                asset: "sharing/prbadge-publish.png",
+                ref: "guide"
               }),
               alt: "PR check for publish action"
             }
@@ -11366,7 +11420,8 @@ npm install @my/awesome-project
             {
               href: api.getDocsUrl({
                 subpath: "sharing/publish-storybook",
-                renderer: !0
+                renderer: !0,
+                ref: "guide"
               }),
               target: "_blank"
             },
@@ -12037,14 +12092,17 @@ var fadeScaleIn = keyframes`
     default:
       return "Become an expert";
   }
-}, OpenGuideAction = ({ children }) => {
+}, OpenGuideAction = ({
+  children,
+  afterClick
+}) => {
   let api = useStorybookApi();
   return react_default.createElement(
     Listbox.Action,
     {
       ariaLabel: "Open onboarding guide",
       onClick: (e2) => {
-        e2.stopPropagation(), api.navigate("/settings/guide");
+        e2.stopPropagation(), api.navigate("/settings/guide"), afterClick?.();
       }
     },
     react_default.createElement(Listbox.Icon, null, react_default.createElement(ListUnorderedIcon, null)),
@@ -12065,7 +12123,7 @@ var fadeScaleIn = keyframes`
     );
     let timeout = setTimeout(setItems, 2e3, nextItems);
     return () => clearTimeout(timeout);
-  }, [nextItems, items]), react_default.createElement(CollapsibleWithMargin, { collapsed: !hasItems || !loaded }, react_default.createElement(HoverCard, { outlineAnimation: "rainbow" }, react_default.createElement(
+  }, [nextItems, items]), react_default.createElement(CollapsibleWithMargin, { collapsed: !hasItems || !loaded }, react_default.createElement(HoverCard, { id: "storybook-checklist-widget", outlineAnimation: "rainbow" }, react_default.createElement(
     Collapsible,
     {
       collapsed: !hasItems,
@@ -12098,7 +12156,7 @@ var fadeScaleIn = keyframes`
         {
           as: "div",
           closeOnOutsideClick: !0,
-          tooltip: ({ onHide }) => react_default.createElement(Listbox, { as: "ul" }, react_default.createElement(Listbox.Item, { as: "li" }, react_default.createElement(OpenGuideAction, null, react_default.createElement(Listbox.Text, null, "Open full guide"))), react_default.createElement(Listbox.Item, { as: "li" }, react_default.createElement(
+          tooltip: ({ onHide }) => react_default.createElement(Listbox, { as: "ul" }, react_default.createElement(Listbox.Item, { as: "li" }, react_default.createElement(OpenGuideAction, { afterClick: onHide }, react_default.createElement(Listbox.Text, null, "Open full guide"))), react_default.createElement(Listbox.Item, { as: "li" }, react_default.createElement(
             Listbox.Action,
             {
               ariaLabel: !1,
@@ -18826,7 +18884,7 @@ var Sections = styled.ol(({ theme }) => ({
   padding: 0,
   "& > li": {
     background: theme.background.content,
-    border: `1px solid ${theme.color.border}`,
+    border: `1px solid ${theme.base === "dark" ? theme.color.darker : theme.color.border}`,
     borderRadius: 8
   }
 })), Items = styled.ol(({ theme }) => ({
@@ -18836,7 +18894,7 @@ var Sections = styled.ol(({ theme }) => ({
   margin: 0,
   padding: 0,
   "& > li:not(:last-child)": {
-    boxShadow: `inset 0 -1px 0 ${theme.color.border}`
+    boxShadow: `inset 0 -1px 0 ${theme.base === "dark" ? theme.color.darker : theme.color.border}`
   },
   "& > li:last-child": {
     borderBottomLeftRadius: 7,
@@ -18932,7 +18990,7 @@ var Sections = styled.ol(({ theme }) => ({
     paddingLeft: 25,
     listStyleType: "disc",
     "li::marker": {
-      color: theme.color.medium
+      color: theme.color.mediumdark
     }
   }
 })), StatusIcon2 = styled.div(({ theme }) => ({
@@ -18941,9 +18999,9 @@ var Sections = styled.ol(({ theme }) => ({
   minHeight: 16,
   minWidth: 16,
   margin: 0,
-  background: theme.background.app,
+  background: theme.base === "dark" ? theme.color.darkest : theme.background.app,
   borderRadius: 9,
-  outline: `1px solid ${theme.color.border}`,
+  outline: `1px solid ${theme.base === "dark" ? theme.color.darker : theme.color.border}`,
   outlineOffset: -1
 })), Checked2 = styled(StatusPassIcon)(
   ({ theme, "data-visible": visible }) => ({