Release: Patch 8.0.7

CHANGELOG.md

@@ -1,3 +1,10 @@
+## 8.0.7
+
+- CLI: Add Visual Tests addon install auto-migration when upgrading to 8.0.x - [#26766](https://github.com/storybookjs/storybook/pull/26766), thanks @ndelangen!
+- Next.js: Move sharp into optional deps - [#26787](https://github.com/storybookjs/storybook/pull/26787), thanks @shuta13!
+- Vue: Disable controls for events, slots, and expose - [#26751](https://github.com/storybookjs/storybook/pull/26751), thanks @shilman!
+- Webpack: Bump webpack-dev-middleware to patch high security issue - [#26655](https://github.com/storybookjs/storybook/pull/26655), thanks @jwilliams-met!
+
 ## 8.0.6
 
 - CLI: Add --config-dir flag to migrate command - [#26721](https://github.com/storybookjs/storybook/pull/26721), thanks @yannbf!

MIGRATION.md

@@ -5477,7 +5477,7 @@ Currently there is no recommended way of accessing the component options of a st
 
 ## From version 4.0.x to 4.1.x
 
-There are are a few migrations you should be aware of in 4.1, including one unintentionally breaking change for advanced addon usage.
+There are a few migrations you should be aware of in 4.1, including one unintentionally breaking change for advanced addon usage.
 
 ### Private addon config
 

code/addons/gfm/README.md

@@ -6,6 +6,6 @@ The "@storybook/addon-mdx-gfm" addon is meant as a migration assistant for Story
 > This addon will likely be removed in a future version.
 
 It's recommended you read this document and follow its instructions instead:
-https://storybook.js.org/docs/react/writing-docs/mdx#lack-of-github-flavored-markdown-gfm
+https://storybook.js.org/docs/writing-docs/mdx#markdown-tables-arent-rendering-correctly
 
 Once you've made the necessary changes, you can remove the addon from your package.json and storybook config.

code/addons/viewport/README.md

@@ -22,7 +22,7 @@ export default {
 };
 ```
 
-You should now be able to see the viewport addon icon in the the toolbar at the top of the screen.
+You should now be able to see the viewport addon icon in the toolbar at the top of the screen.
 
 ## Usage
 

code/builders/builder-webpack5/package.json

@@ -94,7 +94,7 @@
     "util": "^0.12.4",
     "util-deprecate": "^1.0.2",
     "webpack": "5",
-    "webpack-dev-middleware": "^6.1.1",
+    "webpack-dev-middleware": "^6.1.2",
     "webpack-hot-middleware": "^2.25.1",
     "webpack-virtual-modules": "^0.5.0"
   },

code/lib/cli/src/automigrate/fixes/index.ts

@@ -26,6 +26,7 @@ import { removeJestTestingLibrary } from './remove-jest-testing-library';
 import { addonsAPI } from './addons-api';
 import { mdx1to3 } from './mdx-1-to-3';
 import { addonPostCSS } from './addon-postcss';
+import { vta } from './vta';
 import { upgradeStorybookRelatedDependencies } from './upgrade-storybook-related-dependencies';
 
 export * from '../types';
@@ -58,6 +59,7 @@ export const allFixes: Fix[] = [
   webpack5CompilerSetup,
   mdx1to3,
   upgradeStorybookRelatedDependencies,
+  vta,
 ];
 
 export const initFixes: Fix[] = [eslintPlugin];

code/lib/cli/src/automigrate/fixes/vta.test.ts

@@ -0,0 +1,61 @@
+import { describe, expect, it } from 'vitest';
+import type { StorybookConfig } from '@storybook/types';
+import { vta } from './vta';
+
+const check = async ({
+  packageManager,
+  main: mainConfig,
+  storybookVersion = '7.0.0',
+}: {
+  packageManager: any;
+  main: Partial<StorybookConfig> & Record<string, unknown>;
+  storybookVersion?: string;
+}) => {
+  return vta.check({
+    packageManager,
+    configDir: '',
+    mainConfig: mainConfig as any,
+    storybookVersion,
+  });
+};
+
+describe('no-ops', () => {
+  it('with addon setup', async () => {
+    await expect(
+      check({
+        packageManager: {},
+        main: {
+          addons: ['@chromatic-com/storybook'],
+        },
+      })
+    ).resolves.toBeFalsy();
+  });
+  it('with addon setup with options', async () => {
+    await expect(
+      check({
+        packageManager: {},
+        main: {
+          addons: [
+            {
+              name: '@chromatic-com/storybook',
+              options: {},
+            },
+          ],
+        },
+      })
+    ).resolves.toBeFalsy();
+  });
+});
+
+describe('continue', () => {
+  it('no addons', async () => {
+    await expect(
+      check({
+        packageManager: {},
+        main: {
+          stories: ['**/*.stories.mdx'],
+        },
+      })
+    ).resolves.toBeTruthy();
+  });
+});

code/lib/cli/src/automigrate/fixes/vta.ts

@@ -0,0 +1,55 @@
+import { dedent } from 'ts-dedent';
+import chalk from 'chalk';
+import { getAddonNames, updateMainConfig } from '../helpers/mainConfigFile';
+import type { Fix } from '../types';
+
+const logger = console;
+
+interface Options {}
+
+/**
+ */
+export const vta: Fix<Options> = {
+  id: 'visual-tests-addon',
+
+  versionRange: ['<8.0.7', '>=8.0.7'],
+
+  async check({ mainConfig }) {
+    const hadAddonInstalled = getAddonNames(mainConfig).some((addon) =>
+      addon.includes('@chromatic-com/storybook')
+    );
+
+    const skip = hadAddonInstalled;
+
+    if (skip) {
+      return null;
+    }
+
+    return {};
+  },
+
+  prompt() {
+    return dedent`
+      New to Storybook 8: Storybook's Visual Tests addon helps you catch unintentional changes/bugs in your stories. The addon is powered by Chromatic, a cloud-based testing tool developed by Storybook's core team.
+
+      Learn more: ${chalk.yellow('storybook.js.org/docs/writing-tests/visual-testing')}
+
+      Install Visual Tests addon in your project?
+    `;
+  },
+
+  async run({ packageManager, dryRun, mainConfigPath, skipInstall }) {
+    if (!dryRun) {
+      const packageJson = await packageManager.retrievePackageJson();
+      await packageManager.addDependencies(
+        { installAsDevDependencies: true, skipInstall, packageJson },
+        [`@chromatic-com/storybook@^1`]
+      );
+
+      await updateMainConfig({ mainConfigPath, dryRun: !!dryRun }, async (main) => {
+        logger.info(`✅ Adding "@chromatic-com/storybook" addon`);
+        main.appendValueToArray(['addons'], '@chromatic-dom/storybook');
+      });
+    }
+  },
+};

code/lib/core-server/src/utils/StoryIndexGenerator.ts

@@ -506,7 +506,7 @@ export class StoryIndexGenerator {
       // Otherwise the existing entry is created by `autodocs=true` which allowed to be overridden.
     } else {
       // If both entries are templates (e.g. you have two CSF files with the same title), then
-      //   we need to merge the entries. We'll use the the first one's name and importPath,
+      //   we need to merge the entries. We'll use the first one's name and importPath,
       //   but ensure we include both as storiesImports so they are both loaded before rendering
       //   the story (for the <Stories> block & friends)
       return {

code/package.json

@@ -295,5 +295,6 @@
         "Dependency Upgrades"
       ]
     ]
-  }
+  },
+  "deferredNextVersion": "8.0.7"
 }