Merge pull request #25851 from storybookjs/version-non-patch-from-8.0…

….0-alpha.17

Release: Prerelease beta 8.0.0-beta.0

.circleci/config.yml

@@ -43,7 +43,7 @@ executors:
         default: "small"
     working_directory: /tmp/storybook
     docker:
-      - image: mcr.microsoft.com/playwright:v1.36.0-focal
+      - image: mcr.microsoft.com/playwright:v1.41.1-jammy
         environment:
           NODE_OPTIONS: --max_old_space_size=6144
     resource_class: <<parameters.class>>
@@ -359,6 +359,19 @@ jobs:
           clone_options: "--depth 1 --verbose"
       - attach_workspace:
           at: .
+      - run:
+          name: Swap node versions
+          command: |
+            set +e
+            wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.1/install.sh | bash
+            export NVM_DIR="$HOME/.nvm"
+            [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
+            [ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"
+            nvm install v18.14.0
+            nvm alias default 18.14.0
+
+            echo 'export NVM_DIR="$HOME/.nvm"' >> $BASH_ENV
+            echo '[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"' >> $BASH_ENV
       - run:
           name: Running Test Runner
           command: yarn task --task test-runner --template $(yarn get-template --cadence << pipeline.parameters.workflow >> --task test-runner) --no-link --start-from=never --junit
@@ -379,6 +392,19 @@ jobs:
           clone_options: "--depth 1 --verbose"
       - attach_workspace:
           at: .
+      - run:
+          name: Swap node versions
+          command: |
+            set +e
+            wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.1/install.sh | bash
+            export NVM_DIR="$HOME/.nvm"
+            [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
+            [ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"
+            nvm install v18.14.0
+            nvm alias default 18.14.0
+
+            echo 'export NVM_DIR="$HOME/.nvm"' >> $BASH_ENV
+            echo '[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"' >> $BASH_ENV
       - run:
           name: Running Test Runner in Dev mode
           command: yarn task --task test-runner-dev --template $(yarn get-template --cadence << pipeline.parameters.workflow >> --task test-runner-dev) --no-link --start-from=never --junit
@@ -418,6 +444,19 @@ jobs:
           clone_options: "--depth 1 --verbose"
       - attach_workspace:
           at: .
+      - run:
+          name: Swap node versions
+          command: |
+            set +e
+            wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.1/install.sh | bash
+            export NVM_DIR="$HOME/.nvm"
+            [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
+            [ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"
+            nvm install v18.14.0
+            nvm alias default 18.14.0
+
+            echo 'export NVM_DIR="$HOME/.nvm"' >> $BASH_ENV
+            echo '[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"' >> $BASH_ENV
       - run:
           name: Running E2E Tests
           command: yarn task --task e2e-tests --template $(yarn get-template --cadence << pipeline.parameters.workflow >> --task e2e-tests) --no-link --start-from=never --junit
@@ -441,6 +480,19 @@ jobs:
           clone_options: "--depth 1 --verbose"
       - attach_workspace:
           at: .
+      - run:
+          name: Swap node versions
+          command: |
+            set +e
+            wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.1/install.sh | bash
+            export NVM_DIR="$HOME/.nvm"
+            [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
+            [ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"
+            nvm install v18.14.0
+            nvm alias default 18.14.0
+
+            echo 'export NVM_DIR="$HOME/.nvm"' >> $BASH_ENV
+            echo '[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"' >> $BASH_ENV
       - run:
           name: Running E2E Tests
           command: yarn task --task e2e-tests-dev --template $(yarn get-template --cadence << pipeline.parameters.workflow >> --task e2e-tests-dev) --no-link --start-from=never --junit
@@ -464,6 +516,19 @@ jobs:
           clone_options: "--depth 1 --verbose"
       - attach_workspace:
           at: .
+      - run:
+          name: Swap node versions
+          command: |
+            set +e
+            wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.1/install.sh | bash
+            export NVM_DIR="$HOME/.nvm"
+            [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
+            [ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"
+            nvm install v18.14.0
+            nvm alias default 18.14.0
+
+            echo 'export NVM_DIR="$HOME/.nvm"' >> $BASH_ENV
+            echo '[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"' >> $BASH_ENV
       - run:
           name: Running Bench
           command: yarn task --task bench --template $(yarn get-template --cadence << pipeline.parameters.workflow >> --task bench) --no-link --start-from=never --junit

.github/workflows/cron-weekly.yml

@@ -16,4 +16,9 @@ jobs:
           use-quiet-mode: 'yes'
           # output full HTTP info for broken links
           use-verbose-mode: 'yes'
-          config-file: '.github/workflows/markdown-link-check-config.json'
+          config-file: '.github/workflows/markdown-link-check-config.json'   
+      # Notify to Discord channel on failure
+      - name: Send Discord Notification
+        if: failure() # Only run this step if previous steps failed
+        run: |
+          curl -H "Content-Type: application/json" -X POST -d '{"content":"The Markdown Links Check workflow has failed in the repository: [storybook]"}' ${{ secrets.DISCORD_MONITORING_URL }}

CHANGELOG.prerelease.md

@@ -1,3 +1,9 @@
+## 8.0.0-beta.0
+
+- CLI: Add Visual Tests addon to `init` - [#25850](https://github.com/storybookjs/storybook/pull/25850), thanks [@shilman](https://github.com/shilman)!
+- CLI: Upgrade boxen library - [#25713](https://github.com/storybookjs/storybook/pull/25713), thanks [@yannbf](https://github.com/yannbf)!
+- UI: Fix custom tabs not showing in the manager - [#25792](https://github.com/storybookjs/storybook/pull/25792), thanks [@ndelangen](https://github.com/ndelangen)!
+
 ## 8.0.0-alpha.17
 
 - CLI: Fix add command for non monorepo deps - [#25791](https://github.com/storybookjs/storybook/pull/25791), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!

MIGRATION.md

@@ -1,6 +1,7 @@
 <h1>Migration</h1>
 
 - [From version 7.x to 8.0.0](#from-version-7x-to-800)
+  - [Tab addons are now routed to a query parameter](#tab-addons-are-now-routed-to-a-query-parameter)
   - [Default keyboard shortcuts changed](#default-keyboard-shortcuts-changed)
   - [Manager addons are now rendered with React 18](#manager-addons-are-now-rendered-with-react-18)
   - [Removal of `storiesOf`-API](#removal-of-storiesof-api)
@@ -70,6 +71,7 @@
     - [`createChannel` from `@storybook/postmessage` and `@storybook/channel-websocket`](#createchannel-from-storybookpostmessage-and-storybookchannel-websocket)
     - [StoryStore and methods deprecated](#storystore-and-methods-deprecated)
   - [Addon author changes](#addon-author-changes)
+    - [Tab addons cannot manually route, Tool addons can filter their visibility via tabId](#tab-addons-cannot-manually-route-tool-addons-can-filter-their-visibility-via-tabid)
     - [Removed `config` preset](#removed-config-preset-1)
 - [From version 7.5.0 to 7.6.0](#from-version-750-to-760)
     - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated)
@@ -386,6 +388,12 @@
 
 ## From version 7.x to 8.0.0
 
+### Tab addons are now routed to a query parameter
+
+The URL of a tab used to be: `http://localhost:6006/?path=/my-addon-tab/my-story`.
+
+The new URL of a tab is `http://localhost:6006/?path=/story/my-story&tab=my-addon-tab`.
+
 ### Default keyboard shortcuts changed
 
 The default keyboard shortcuts have changed to avoid any conflicts with the browser's default shortcuts or when you are directly typing in the Manager. If you want to get the new default shortcuts, you can reset your shortcuts in the keyboard shortcuts panel by pressing the `Restore default` button.
@@ -1050,6 +1058,46 @@ Note that both these methods require initialization, so you should await `previe
 
 ### Addon author changes
 
+#### Tab addons cannot manually route, Tool addons can filter their visibility via tabId
+
+The TAB type addons now should no longer specify the `match` or `route` property.
+
+Instead storybook will automatically show the addon's rendered content when the query parameter `tab` is set to the addon's ID.
+
+Example:
+
+```tsx
+import { addons, types } from "@storybook/manager-api";
+
+addons.register("my-addon", () => {
+  addons.add("my-addon/tab", {
+    type: types.TAB,
+    title: "My Addon",
+    render: () => <div>Hello World</div>,
+  });
+});
+```
+
+Tool type addon will now receive the `tabId` property passed to their `match` function.
+That way they can chose to show/hide their content based on the current tab.
+
+When the canvas is shown, the `tabId` will be set to `undefined`.
+
+Example:
+
+```tsx
+import { addons, types } from "@storybook/manager-api";
+
+addons.register("my-addon", () => {
+  addons.add("my-addon/tool", {
+    type: types.TOOL,
+    title: "My Addon",
+    match: ({ tabId }) => tabId === "my-addon/tab",
+    render: () => <div>👀</div>,
+  });
+});
+```
+
 #### Removed `config` preset
 
 In Storybook 7.0 we have deprecated the preset field `config` and it has been replaced with `previewAnnotations`. The `config` preset is now completely removed in Storybook 8.0.

code/addons/a11y/src/manager.tsx

@@ -29,7 +29,7 @@ addons.register(ADDON_ID, (api) => {
   addons.add(PANEL_ID, {
     title: '',
     type: types.TOOL,
-    match: ({ viewMode }) => viewMode === 'story',
+    match: ({ viewMode, tabId }) => viewMode === 'story' && !tabId,
     render: () => <VisionSimulator />,
   });
 

code/addons/backgrounds/src/manager.tsx

@@ -9,7 +9,7 @@ addons.register(ADDON_ID, () => {
   addons.add(ADDON_ID, {
     title: 'Backgrounds',
     type: types.TOOL,
-    match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),
+    match: ({ viewMode, tabId }) => !!(viewMode && viewMode.match(/^(story|docs)$/)) && !tabId,
     render: () => (
       <Fragment>
         <BackgroundSelector />

code/addons/measure/src/manager.tsx

@@ -8,7 +8,7 @@ addons.register(ADDON_ID, () => {
   addons.add(TOOL_ID, {
     type: types.TOOL,
     title: 'Measure',
-    match: ({ viewMode }) => viewMode === 'story',
+    match: ({ viewMode, tabId }) => viewMode === 'story' && !tabId,
     render: () => <Tool />,
   });
 });

code/addons/outline/src/manager.tsx

@@ -8,7 +8,7 @@ addons.register(ADDON_ID, () => {
   addons.add(ADDON_ID, {
     title: 'Outline',
     type: types.TOOL,
-    match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),
+    match: ({ viewMode, tabId }) => !!(viewMode && viewMode.match(/^(story|docs)$/)) && !tabId,
     render: () => <OutlineSelector />,
   });
 });

code/addons/themes/docs/getting-started/postcss.md

@@ -64,7 +64,7 @@ Use `prefers-color-scheme` media in your CSS:
 }
 @media (prefers-color-scheme: dark) {
   html {
-    --text-color: white
+    --text-color: white;
   }
 }
 ```

code/addons/themes/src/manager.tsx

@@ -7,7 +7,7 @@ addons.register(ADDON_ID, () => {
   addons.add(THEME_SWITCHER_ID, {
     title: 'Themes',
     type: types.TOOL,
-    match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),
+    match: ({ viewMode, tabId }) => !!(viewMode && viewMode.match(/^(story|docs)$/)) && !tabId,
     render: ThemeSwitcher,
     paramKey: PARAM_KEY,
   });

code/addons/toolbars/src/manager.tsx

@@ -7,7 +7,7 @@ addons.register(ADDON_ID, () =>
   addons.add(ADDON_ID, {
     title: ADDON_ID,
     type: types.TOOL,
-    match: () => true,
+    match: ({ tabId }) => !tabId,
     render: () => <ToolbarManager />,
   })
 );

code/addons/viewport/src/manager.tsx

@@ -9,7 +9,7 @@ addons.register(ADDON_ID, () => {
   addons.add(ADDON_ID, {
     title: 'viewport / media-queries',
     type: types.TOOL,
-    match: ({ viewMode }) => viewMode === 'story',
+    match: ({ viewMode, tabId }) => viewMode === 'story' && !tabId,
     render: () => <ViewportTool />,
   });
 });

code/e2e-tests/addon-docs.spec.ts

@@ -34,7 +34,8 @@ test.describe('addon-docs', () => {
     await expect(anotherStory).toContainText('Another button, just to show multiple stories');
   });
 
-  test('should show source=code view for stories', async ({ page }) => {
+  // FIXME - get rid of the flake
+  test.skip('should show source=code view for stories', async ({ page }) => {
     const skipped = [
       // SSv6 does not render stories in the correct order in our sandboxes
       'internal\\/ssv6',

code/e2e-tests/tags.spec.ts

@@ -3,7 +3,8 @@ import { SbPage } from './util';
 
 const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001';
 
-test.describe('tags', () => {
+// FIXME - get rid of the flake
+test.describe.skip('tags', () => {
   test.beforeEach(async ({ page }) => {
     await page.goto(storybookUrl);
     await new SbPage(page).waitUntilLoaded();

code/lib/cli/package.json

@@ -96,7 +96,7 @@
     "@types/cross-spawn": "^6.0.2",
     "@types/prompts": "^2.0.9",
     "@types/util-deprecate": "^1.0.0",
-    "boxen": "^5.1.2",
+    "boxen": "^7.1.1",
     "slash": "^5.0.0",
     "strip-json-comments": "^3.1.1",
     "typescript": "^5.3.2"

code/lib/cli/src/automigrate/fixes/react-docgen.ts

@@ -26,11 +26,12 @@ export const reactDocgen: Fix<Options> = {
       but "typescript.reactDocgen" is unset.
       
       In Storybook 8.0, we changed the default React docgen analysis from 
-      "react-docgen-typescript" to "react-docgen", which dramatically faster
-      but doesn't handle all TypeScript constructs.
-
-      We can update your config to continue to use "react-docgen-typescript",
-      though we recommend giving "react-docgen" for a much faster dev experience.
+      "react-docgen-typescript" to "react-docgen". We recommend "react-docgen"
+      for most projects, since it is dramatically faster. However, it doesn't
+      handle all TypeScript constructs, and may generate different results
+      than "react-docgen-typescript".
+      
+      Should we update your config to continue to use "react-docgen-typescript"?
 
       https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#react-docgen-component-analysis-by-default
     `;

code/lib/cli/src/generators/baseGenerator.ts

@@ -196,7 +196,7 @@ export async function baseGenerator(
   );
 
   const {
-    extraAddons: extraAddonPackages,
+    extraAddons: extraAddonPackages = [],
     extraPackages,
     staticDir,
     addScripts,
@@ -222,21 +222,23 @@ export async function baseGenerator(
         })
       : extraAddonPackages;
 
-  // added to main.js
-  const addons = [
+  extraAddonsToInstall.push(
     '@storybook/addon-links',
     '@storybook/addon-essentials',
+    '@chromatic-com/storybook@^1'
+  );
+
+  // added to main.js
+  const addons = [
     ...(compiler ? [`@storybook/addon-webpack5-compiler-${compiler}`] : []),
-    ...stripVersions(extraAddonsToInstall || []),
+    ...stripVersions(extraAddonsToInstall),
   ].filter(Boolean);
 
   // added to package.json
   const addonPackages = [
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
     '@storybook/blocks',
     ...(compiler ? [`@storybook/addon-webpack5-compiler-${compiler}`] : []),
-    ...(extraAddonsToInstall || []),
+    ...extraAddonsToInstall,
   ].filter(Boolean);
 
   // TODO: migrate template stories in solid and qwik to use @storybook/test

code/lib/core-server/package.json

@@ -104,7 +104,7 @@
     "@types/ip": "^1.1.0",
     "@types/node-fetch": "^2.5.7",
     "@types/ws": "^8",
-    "boxen": "^5.1.2",
+    "boxen": "^7.1.1",
     "node-fetch": "^3.3.1",
     "slash": "^5.0.0",
     "typescript": "^5.3.2"

code/lib/manager-api/src/modules/url.ts

@@ -144,6 +144,12 @@ export interface SubAPI {
    * @returns {void}
    */
   setQueryParams: (input: QueryParams) => void;
+  /**
+   * Set the query parameters for the current URL & navigates.
+   * @param {QueryParams} input - An object containing the query parameters to set.
+   * @returns {void}
+   */
+  applyQueryParams: (input: QueryParams) => void;
 }
 
 export const init: ModuleFn<SubAPI, SubState> = (moduleArgs) => {
@@ -188,6 +194,12 @@ export const init: ModuleFn<SubAPI, SubState> = (moduleArgs) => {
         provider.channel?.emit(UPDATE_QUERY_PARAMS, update);
       }
     },
+    applyQueryParams(input) {
+      const { path, queryParams } = api.getUrlState();
+
+      navigateTo(path, { ...queryParams, ...input } as any);
+      api.setQueryParams(input);
+    },
     navigateUrl(url, options) {
       navigate(url, { plain: true, ...options });
     },