From 27f10ba543bb8b368912304ec42bd7096964e1e4 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 8 Apr 2024 16:21:35 +0200 Subject: [PATCH 01/11] add VTA automigration --- code/lib/cli/src/automigrate/fixes/vta.ts | 60 +++++++++++++++++++++++ 1 file changed, 60 insertions(+) create mode 100644 code/lib/cli/src/automigrate/fixes/vta.ts diff --git a/code/lib/cli/src/automigrate/fixes/vta.ts b/code/lib/cli/src/automigrate/fixes/vta.ts new file mode 100644 index 000000000000..683c8d5fc540 --- /dev/null +++ b/code/lib/cli/src/automigrate/fixes/vta.ts @@ -0,0 +1,60 @@ +import { dedent } from 'ts-dedent'; +import { updateMainConfig } from '../helpers/mainConfigFile'; +import type { Fix } from '../types'; +import { getStorybookVersionSpecifier } from '../../helpers'; + +const logger = console; + +interface Options { + value?: boolean; +} + +/** + */ +export const vta: Fix = { + id: 'visual-testing-addon', + + versionRange: ['<7', '>=7'], + + async check({ mainConfig }) { + const hadAddonInstalled = !!mainConfig?.addons?.find((addon) => + addon.toString().includes('@chromatic-com/storybook') + ); + + // @ts-expect-error (user might be upgrading from an older version that still had it) + const usesMDX1 = mainConfig?.features?.legacyMdx1 === true || false; + const skip = hadAddonInstalled; + + if (skip) { + return null; + } + + return {}; + }, + + prompt() { + return dedent` + We've detected that you're not yet using the Visual Testing Addon. Would you like to add it? + `; + }, + + async run({ packageManager, dryRun, mainConfigPath, skipInstall }) { + if (!dryRun) { + const packageJson = await packageManager.retrievePackageJson(); + const versionToInstall = getStorybookVersionSpecifier( + await packageManager.retrievePackageJson() + ); + await packageManager.addDependencies( + { installAsDevDependencies: true, skipInstall, packageJson }, + [`@storybook/addon-mdx-gfm@${versionToInstall}`] + ); + + await updateMainConfig({ mainConfigPath, dryRun: !!dryRun }, async (main) => { + logger.info(`✅ Adding "@chromatic-com/storybook" addon`); + if (!dryRun) { + main.appendValueToArray(['addons'], '@chromatic-dom/storybook'); + } + }); + } + }, +}; From c298abd2f8fa0e00ba3c17a3b81b64620c415471 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 8 Apr 2024 16:22:40 +0200 Subject: [PATCH 02/11] cleanup --- code/lib/cli/src/automigrate/fixes/vta.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/code/lib/cli/src/automigrate/fixes/vta.ts b/code/lib/cli/src/automigrate/fixes/vta.ts index 683c8d5fc540..837aa5867fb9 100644 --- a/code/lib/cli/src/automigrate/fixes/vta.ts +++ b/code/lib/cli/src/automigrate/fixes/vta.ts @@ -5,9 +5,7 @@ import { getStorybookVersionSpecifier } from '../../helpers'; const logger = console; -interface Options { - value?: boolean; -} +interface Options {} /** */ From 777433d8a8be71d69fe0effffb60f7fa3a72807b Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 8 Apr 2024 16:23:51 +0200 Subject: [PATCH 03/11] add to index --- code/lib/cli/src/automigrate/fixes/index.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/code/lib/cli/src/automigrate/fixes/index.ts b/code/lib/cli/src/automigrate/fixes/index.ts index 022074fa8301..72f3eb9a605d 100644 --- a/code/lib/cli/src/automigrate/fixes/index.ts +++ b/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]; From ab38a3cf463eb87f876b3ce0c62601f18822d677 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 8 Apr 2024 16:29:30 +0200 Subject: [PATCH 04/11] "It should only run if beforeVersion is < 8.0.x where x is the version we release this in" --- code/lib/cli/src/automigrate/fixes/vta.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/cli/src/automigrate/fixes/vta.ts b/code/lib/cli/src/automigrate/fixes/vta.ts index 837aa5867fb9..cb274baaa7bc 100644 --- a/code/lib/cli/src/automigrate/fixes/vta.ts +++ b/code/lib/cli/src/automigrate/fixes/vta.ts @@ -12,7 +12,7 @@ interface Options {} export const vta: Fix = { id: 'visual-testing-addon', - versionRange: ['<7', '>=7'], + versionRange: ['<8.0.7', '>=7'], async check({ mainConfig }) { const hadAddonInstalled = !!mainConfig?.addons?.find((addon) => From 4a879f7590ea4f00817ee031d198c775c80d291a Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 9 Apr 2024 10:51:06 +0200 Subject: [PATCH 05/11] Add VTA automigration tests --- .../lib/cli/src/automigrate/fixes/vta.test.ts | 61 +++++++++++++++++++ code/lib/cli/src/automigrate/fixes/vta.ts | 6 +- 2 files changed, 65 insertions(+), 2 deletions(-) create mode 100644 code/lib/cli/src/automigrate/fixes/vta.test.ts diff --git a/code/lib/cli/src/automigrate/fixes/vta.test.ts b/code/lib/cli/src/automigrate/fixes/vta.test.ts new file mode 100644 index 000000000000..ff1cc2109470 --- /dev/null +++ b/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 & Record; + 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(); + }); +}); diff --git a/code/lib/cli/src/automigrate/fixes/vta.ts b/code/lib/cli/src/automigrate/fixes/vta.ts index cb274baaa7bc..b641513b55a7 100644 --- a/code/lib/cli/src/automigrate/fixes/vta.ts +++ b/code/lib/cli/src/automigrate/fixes/vta.ts @@ -12,11 +12,13 @@ interface Options {} export const vta: Fix = { id: 'visual-testing-addon', - versionRange: ['<8.0.7', '>=7'], + versionRange: ['<8.0.7', '>=8.0.7'], async check({ mainConfig }) { const hadAddonInstalled = !!mainConfig?.addons?.find((addon) => - addon.toString().includes('@chromatic-com/storybook') + typeof addon === 'string' + ? addon.includes('@chromatic-com/storybook') + : addon.name.includes('@chromatic-com/storybook') ); // @ts-expect-error (user might be upgrading from an older version that still had it) From ce192c2945b29f2a05d44f04b56226197bda8a34 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 10 Apr 2024 10:42:28 +0200 Subject: [PATCH 06/11] resolve review comment https://github.com/storybookjs/storybook/pull/26766#pullrequestreview-1990988907 --- code/lib/cli/src/automigrate/fixes/vta.ts | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/code/lib/cli/src/automigrate/fixes/vta.ts b/code/lib/cli/src/automigrate/fixes/vta.ts index b641513b55a7..3bb301ac8d80 100644 --- a/code/lib/cli/src/automigrate/fixes/vta.ts +++ b/code/lib/cli/src/automigrate/fixes/vta.ts @@ -41,12 +41,9 @@ export const vta: Fix = { async run({ packageManager, dryRun, mainConfigPath, skipInstall }) { if (!dryRun) { const packageJson = await packageManager.retrievePackageJson(); - const versionToInstall = getStorybookVersionSpecifier( - await packageManager.retrievePackageJson() - ); await packageManager.addDependencies( { installAsDevDependencies: true, skipInstall, packageJson }, - [`@storybook/addon-mdx-gfm@${versionToInstall}`] + [`@chromatic-com/storybook@^1`] ); await updateMainConfig({ mainConfigPath, dryRun: !!dryRun }, async (main) => { From 1a619602ee09d6002284660c88a28edf39d33fb3 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 10 Apr 2024 10:44:16 +0200 Subject: [PATCH 07/11] resolve review comment https://github.com/storybookjs/storybook/pull/26766#pullrequestreview-1989730532 --- code/lib/cli/src/automigrate/fixes/vta.ts | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/code/lib/cli/src/automigrate/fixes/vta.ts b/code/lib/cli/src/automigrate/fixes/vta.ts index 3bb301ac8d80..07daef3c9a31 100644 --- a/code/lib/cli/src/automigrate/fixes/vta.ts +++ b/code/lib/cli/src/automigrate/fixes/vta.ts @@ -1,5 +1,5 @@ import { dedent } from 'ts-dedent'; -import { updateMainConfig } from '../helpers/mainConfigFile'; +import { getAddonNames, updateMainConfig } from '../helpers/mainConfigFile'; import type { Fix } from '../types'; import { getStorybookVersionSpecifier } from '../../helpers'; @@ -15,10 +15,8 @@ export const vta: Fix = { versionRange: ['<8.0.7', '>=8.0.7'], async check({ mainConfig }) { - const hadAddonInstalled = !!mainConfig?.addons?.find((addon) => - typeof addon === 'string' - ? addon.includes('@chromatic-com/storybook') - : addon.name.includes('@chromatic-com/storybook') + const hadAddonInstalled = !!getAddonNames(mainConfig).find((addon) => + addon.includes('@chromatic-com/storybook') ); // @ts-expect-error (user might be upgrading from an older version that still had it) From 374520ea38c6b3cbe4cf04b891f000193d25d830 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 10 Apr 2024 10:44:58 +0200 Subject: [PATCH 08/11] resolve review comment https://github.com/storybookjs/storybook/pull/26766#pullrequestreview-1989726124 --- code/lib/cli/src/automigrate/fixes/vta.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/code/lib/cli/src/automigrate/fixes/vta.ts b/code/lib/cli/src/automigrate/fixes/vta.ts index 07daef3c9a31..ce582793f3a0 100644 --- a/code/lib/cli/src/automigrate/fixes/vta.ts +++ b/code/lib/cli/src/automigrate/fixes/vta.ts @@ -19,8 +19,6 @@ export const vta: Fix = { addon.includes('@chromatic-com/storybook') ); - // @ts-expect-error (user might be upgrading from an older version that still had it) - const usesMDX1 = mainConfig?.features?.legacyMdx1 === true || false; const skip = hadAddonInstalled; if (skip) { From c9c9a2e76e30cc6c26f01865dae1c8a1b1cc380b Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 10 Apr 2024 10:47:10 +0200 Subject: [PATCH 09/11] Add text provided by @joevaugh4n --- code/lib/cli/src/automigrate/fixes/vta.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/code/lib/cli/src/automigrate/fixes/vta.ts b/code/lib/cli/src/automigrate/fixes/vta.ts index ce582793f3a0..776019ff0f41 100644 --- a/code/lib/cli/src/automigrate/fixes/vta.ts +++ b/code/lib/cli/src/automigrate/fixes/vta.ts @@ -1,7 +1,6 @@ import { dedent } from 'ts-dedent'; import { getAddonNames, updateMainConfig } from '../helpers/mainConfigFile'; import type { Fix } from '../types'; -import { getStorybookVersionSpecifier } from '../../helpers'; const logger = console; @@ -30,7 +29,11 @@ export const vta: Fix = { prompt() { return dedent` - We've detected that you're not yet using the Visual Testing Addon. Would you like to add it? + 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: storybook.js.org/docs/writing-tests/visual-testing + + Install Visual Tests addon in your project? `; }, From 3b8bc279cc57bb8f10767cf3f183e1fbef7161ca Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 10 Apr 2024 16:12:16 +0200 Subject: [PATCH 10/11] Fix review comments --- code/lib/cli/src/automigrate/fixes/vta.ts | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/code/lib/cli/src/automigrate/fixes/vta.ts b/code/lib/cli/src/automigrate/fixes/vta.ts index 776019ff0f41..00e911174619 100644 --- a/code/lib/cli/src/automigrate/fixes/vta.ts +++ b/code/lib/cli/src/automigrate/fixes/vta.ts @@ -1,6 +1,7 @@ import { dedent } from 'ts-dedent'; import { getAddonNames, updateMainConfig } from '../helpers/mainConfigFile'; import type { Fix } from '../types'; +import chalk from 'chalk'; const logger = console; @@ -9,12 +10,12 @@ interface Options {} /** */ export const vta: Fix = { - id: 'visual-testing-addon', + id: 'visual-tests-addon', versionRange: ['<8.0.7', '>=8.0.7'], async check({ mainConfig }) { - const hadAddonInstalled = !!getAddonNames(mainConfig).find((addon) => + const hadAddonInstalled = getAddonNames(mainConfig).some((addon) => addon.includes('@chromatic-com/storybook') ); @@ -31,7 +32,7 @@ export const vta: Fix = { 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: storybook.js.org/docs/writing-tests/visual-testing + Learn more: ${chalk.yellow('storybook.js.org/docs/writing-tests/visual-testing')} Install Visual Tests addon in your project? `; @@ -47,9 +48,7 @@ export const vta: Fix = { await updateMainConfig({ mainConfigPath, dryRun: !!dryRun }, async (main) => { logger.info(`✅ Adding "@chromatic-com/storybook" addon`); - if (!dryRun) { - main.appendValueToArray(['addons'], '@chromatic-dom/storybook'); - } + main.appendValueToArray(['addons'], '@chromatic-dom/storybook'); }); } }, From 8a3e90903337d31b32453014dac7eaec60bd4780 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 10 Apr 2024 16:13:50 +0200 Subject: [PATCH 11/11] cleanup --- code/lib/cli/src/automigrate/fixes/vta.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/cli/src/automigrate/fixes/vta.ts b/code/lib/cli/src/automigrate/fixes/vta.ts index 00e911174619..c86f957298a8 100644 --- a/code/lib/cli/src/automigrate/fixes/vta.ts +++ b/code/lib/cli/src/automigrate/fixes/vta.ts @@ -1,7 +1,7 @@ import { dedent } from 'ts-dedent'; +import chalk from 'chalk'; import { getAddonNames, updateMainConfig } from '../helpers/mainConfigFile'; import type { Fix } from '../types'; -import chalk from 'chalk'; const logger = console;