CLI: Warn when community addons are incompatible with Storybook 7

code/lib/cli/src/automigrate/fixes/incompatible-addons.test.ts

@@ -0,0 +1,50 @@
+/// <reference types="@types/jest" />;
+
+import type { StorybookConfig } from '@storybook/types';
+import type { PackageJson } from '../../js-package-manager';
+import { makePackageManager, mockStorybookData } from '../helpers/testing-helpers';
+import { incompatibleAddons } from './incompatible-addons';
+
+const check = async ({
+  packageJson,
+  main: mainConfig = {},
+  storybookVersion = '7.0.0',
+}: {
+  packageJson: PackageJson;
+  main?: Partial<StorybookConfig> & Record<string, unknown>;
+  storybookVersion?: string;
+}) => {
+  mockStorybookData({ mainConfig, storybookVersion });
+
+  return incompatibleAddons.check({
+    packageManager: makePackageManager(packageJson),
+    configDir: '',
+  });
+};
+
+describe('incompatible-addons fix', () => {
+  afterEach(jest.restoreAllMocks);
+
+  it('no-op when there are known addons', async () => {
+    const packageJson = {
+      dependencies: { '@storybook/addon-essentials': '^7.0.0' },
+    };
+    await expect(
+      check({ packageJson, main: { addons: ['@storybook/essentials'] } })
+    ).resolves.toBeNull();
+  });
+
+  it('should show incompatible addons', async () => {
+    const packageJson = {
+      dependencies: {
+        '@storybook/addon-essentials': '^7.0.0',
+        '@storybook/addon-info': '^6.0.0',
+      },
+    };
+    await expect(
+      check({ packageJson, main: { addons: ['@storybook/essentials', '@storybook/addon-info'] } })
+    ).resolves.toEqual({
+      incompatibleAddonList: ['@storybook/addon-info'],
+    });
+  });
+});

code/lib/cli/src/automigrate/fixes/incompatible-addons.ts

@@ -0,0 +1,36 @@
+import chalk from 'chalk';
+import dedent from 'ts-dedent';
+import type { Fix } from '../types';
+import { getStorybookData, getIncompatibleAddons } from '../helpers/mainConfigFile';
+
+interface IncompatibleAddonsOptions {
+  incompatibleAddonList: string[];
+}
+
+export const incompatibleAddons: Fix<IncompatibleAddonsOptions> = {
+  id: 'incompatible-addons',
+  promptOnly: true,
+
+  async check({ packageManager, configDir }) {
+    const { mainConfig } = await getStorybookData({
+      packageManager,
+      configDir,
+    });
+
+    const incompatibleAddonList = getIncompatibleAddons(mainConfig);
+
+    return incompatibleAddonList.length > 0 ? { incompatibleAddonList } : null;
+  },
+  prompt({ incompatibleAddonList }) {
+    return dedent`
+      ${chalk.bold(
+        chalk.red('Attention')
+      )}: We've detected that you're using the following addons which are known to be incompatible with Storybook 7:
+
+      ${incompatibleAddonList.map((addon) => `- ${chalk.cyan(addon)}`).join('\n')}
+
+      Please upgrade at your own risk, and check the following Github issue for more information:
+      ${chalk.yellow('https://github.com/storybookjs/storybook/issues/20529')}
+    `;
+  },
+};

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

@@ -17,6 +17,7 @@ import { addReact } from './add-react';
 import { nodeJsRequirement } from './nodejs-requirement';
 import { missingBabelRc } from './missing-babelrc';
 import { angularBuilders } from './angular-builders';
+import { incompatibleAddons } from './incompatible-addons';
 import { angularBuildersMultiproject } from './angular-builders-multiproject';
 
 export * from '../types';
@@ -32,6 +33,7 @@ export const allFixes: Fix[] = [
   sbBinary,
   sbScripts,
   newFrameworks,
+  incompatibleAddons,
   removedGlobalClientAPIs,
   mdx1to2,
   mdxgfm,

code/lib/cli/src/automigrate/helpers/mainConfigFile.ts

@@ -86,4 +86,52 @@ export const updateMainConfig = async (
     );
   }
 };
-export type SafeWriteMainConfig = typeof updateMainConfig;
+
+export const getAddonNames = (mainConfig: StorybookConfig): string[] => {
+  const addons = mainConfig.addons || [];
+  const addonList = addons.map((addon) => {
+    if (typeof addon === 'string') {
+      return addon;
+    }
+    if (typeof addon === 'object') {
+      return addon.name;
+    }
+
+    return undefined;
+  });
+
+  return addonList.filter(Boolean);
+};
+
+export const getIncompatibleAddons = (mainConfig: StorybookConfig) => {
+  // TODO: Keep this up to date with https://github.com/storybookjs/storybook/issues/20529
+
+  const incompatibleList = [
+    '@storybook/addon-knobs',
+    '@storybook/addon-postcss',
+    'storybook-addon-next-router',
+    'storybook-addon-outline',
+    '@storybook/addon-info',
+    'storybook-addon-next',
+    'storybook-docs-toc',
+    '@storybook/addon-google-analytics',
+    'storybook-addon-pseudo-states',
+    'storybook-dark-mode',
+    'storybook-addon-gatsby',
+    '@etchteam/storybook-addon-css-variables-theme',
+    '@storybook/addon-cssresources',
+    'storybook-addon-grid',
+    'storybook-multilevel-sort',
+    'storybook-addon-i18next',
+    'storybook-source-link',
+    'babel-plugin-storybook-csf-title',
+    '@urql/storybook-addon',
+    'storybook-addon-intl',
+    'storybook-addon-mock',
+    '@chakra-ui/storybook-addon',
+    'storybook-mobile-addon',
+  ];
+
+  const addons = getAddonNames(mainConfig);
+  return addons.filter((addon) => incompatibleList.includes(addon));
+};

code/lib/core-server/src/build-dev.ts

@@ -26,6 +26,7 @@ import { outputStartupInformation } from './utils/output-startup-information';
 import { updateCheck } from './utils/update-check';
 import { getServerPort, getServerChannelUrl } from './utils/server-address';
 import { getManagerBuilder, getPreviewBuilder } from './utils/get-builders';
+import { warnOnIncompatibleAddons } from './utils/warnOnIncompatibleAddons';
 
 export async function buildDevStandalone(
   options: CLIOptions & LoadOptions & BuilderOptions
@@ -66,14 +67,16 @@ export async function buildDevStandalone(
   options.serverChannelUrl = getServerChannelUrl(port, options);
   /* eslint-enable no-param-reassign */
 
-  const { framework } = await loadMainConfig(options);
+  const { framework, addons } = await loadMainConfig(options);
   const corePresets = [];
 
   const frameworkName = typeof framework === 'string' ? framework : framework?.name;
   validateFrameworkName(frameworkName);
 
   corePresets.push(join(frameworkName, 'preset'));
 
+  warnOnIncompatibleAddons(addons);
+
   // Load first pass: We need to determine the builder
   // We need to do this because builders might introduce 'overridePresets' which we need to take into account
   // We hope to remove this in SB8

code/lib/core-server/src/build-static.ts

@@ -35,6 +35,7 @@ import { extractStorybookMetadata } from './utils/metadata';
 import { StoryIndexGenerator } from './utils/StoryIndexGenerator';
 import { summarizeIndex } from './utils/summarizeIndex';
 import { defaultStaticDirs } from './utils/constants';
+import { warnOnIncompatibleAddons } from './utils/warnOnIncompatibleAddons';
 
 export type BuildStaticStandaloneOptions = CLIOptions &
   LoadOptions &
@@ -65,7 +66,7 @@ export async function buildStaticStandalone(options: BuildStaticStandaloneOption
   await emptyDir(options.outputDir);
   await ensureDir(options.outputDir);
 
-  const { framework } = await loadMainConfig(options);
+  const { framework, addons } = await loadMainConfig(options);
   const corePresets = [];
 
   const frameworkName = typeof framework === 'string' ? framework : framework?.name;
@@ -75,6 +76,8 @@ export async function buildStaticStandalone(options: BuildStaticStandaloneOption
     logger.warn(`you have not specified a framework in your ${options.configDir}/main.js`);
   }
 
+  warnOnIncompatibleAddons(addons);
+
   logger.info('=> Loading presets');
   let presets = await loadAllPresets({
     corePresets: [

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

@@ -0,0 +1,61 @@
+import type { Preset } from '@storybook/types';
+import { logger } from '@storybook/client-logger';
+import chalk from 'chalk';
+import dedent from 'ts-dedent';
+
+export const warnOnIncompatibleAddons = (addons: Preset[]) => {
+  const addonList = addons.map((addon) => {
+    if (typeof addon === 'string') {
+      return addon;
+    }
+    if (typeof addon === 'object') {
+      return addon.name;
+    }
+
+    return undefined;
+  });
+
+  const addonNames = addonList.filter(Boolean);
+
+  // TODO: Keep this up to date with https://github.com/storybookjs/storybook/issues/20529
+  const incompatibleList = [
+    '@storybook/addon-knobs',
+    '@storybook/addon-postcss',
+    'storybook-addon-next-router',
+    'storybook-addon-outline',
+    '@storybook/addon-info',
+    'storybook-addon-next',
+    'storybook-docs-toc',
+    '@storybook/addon-google-analytics',
+    'storybook-addon-pseudo-states',
+    'storybook-dark-mode',
+    'storybook-addon-gatsby',
+    '@etchteam/storybook-addon-css-variables-theme',
+    '@storybook/addon-cssresources',
+    'storybook-addon-grid',
+    'storybook-multilevel-sort',
+    'storybook-addon-i18next',
+    'storybook-source-link',
+    'babel-plugin-storybook-csf-title',
+    '@urql/storybook-addon',
+    'storybook-addon-intl',
+    'storybook-addon-mock',
+    '@chakra-ui/storybook-addon',
+    'storybook-mobile-addon',
+  ];
+
+  const incompatibleAddons = addonNames.filter((addon) => incompatibleList.includes(addon));
+
+  if (incompatibleAddons.length > 0) {
+    logger.warn(dedent`
+      ${chalk.bold(
+        chalk.red('Attention')
+      )}: We've detected that you're using the following addons which are known to be incompatible with Storybook 7:
+
+      ${incompatibleAddons.map((addon) => `- ${chalk.cyan(addon)}`).join('\n')}
+
+      Please upgrade at your own risk, and check the following Github issue for more information:
+      ${chalk.yellow('https://github.com/storybookjs/storybook/issues/20529')}\n
+    `);
+  }
+};