From 4cd82bba4be2aed0c674d89f8d8527802911e262 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Thu, 8 Feb 2024 15:33:08 +0100 Subject: [PATCH 01/15] Add migrate-to-test-package codemod --- .../__tests__/migrate-to-test-package.test.ts | 44 +++++++++++++++++ .../src/transforms/migrate-to-test-package.ts | 49 +++++++++++++++++++ 2 files changed, 93 insertions(+) create mode 100644 code/lib/codemod/src/transforms/__tests__/migrate-to-test-package.test.ts create mode 100644 code/lib/codemod/src/transforms/migrate-to-test-package.ts diff --git a/code/lib/codemod/src/transforms/__tests__/migrate-to-test-package.test.ts b/code/lib/codemod/src/transforms/__tests__/migrate-to-test-package.test.ts new file mode 100644 index 000000000000..8ccb3a093631 --- /dev/null +++ b/code/lib/codemod/src/transforms/__tests__/migrate-to-test-package.test.ts @@ -0,0 +1,44 @@ +import { expect, test } from 'vitest'; +import transform from '../migrate-to-test-package'; +import dedent from 'ts-dedent'; + +expect.addSnapshotSerializer({ + serialize: (val: any) => (typeof val === 'string' ? val : val.toString()), + test: () => true, +}); + +const tsTransform = (source: string) => transform({ source, path: 'Component.stories.tsx' }).trim(); + +test('replace jest and testing-library with the test package', () => { + const input = dedent` + import { expect } from '@storybook/jest'; + import { within, userEvent } from '@storybook/testing-library'; + `; + + expect(tsTransform(input)).toMatchInlineSnapshot(` + import { expect } from "@storybook/test"; + import { within, userEvent } from "@storybook/test"; + `); +}); + +test('Make jest imports namespace imports', () => { + const input = dedent` + import { expect, jest } from '@storybook/jest'; + import { within, userEvent } from '@storybook/testing-library'; + + const onFocusMock = jest.fn(); + const onSearchMock = jest.fn(); + + jest.spyOn(window, 'Something'); + `; + + expect(tsTransform(input)).toMatchInlineSnapshot(` + import * as test, { expect } from "@storybook/test"; + import { within, userEvent } from "@storybook/test"; + + const onFocusMock = test.fn(); + const onSearchMock = test.fn(); + + test.spyOn(window, 'Something'); + `); +}); diff --git a/code/lib/codemod/src/transforms/migrate-to-test-package.ts b/code/lib/codemod/src/transforms/migrate-to-test-package.ts new file mode 100644 index 000000000000..d30776f11155 --- /dev/null +++ b/code/lib/codemod/src/transforms/migrate-to-test-package.ts @@ -0,0 +1,49 @@ +/* eslint-disable no-underscore-dangle */ +import type { FileInfo } from 'jscodeshift'; +import { loadCsf, printCsf } from '@storybook/csf-tools'; +import type { BabelFile } from '@babel/core'; +import * as babel from '@babel/core'; +import * as t from '@babel/types'; + +export default function transform(info: FileInfo): string { + const csf = loadCsf(info.source, { makeTitle: (title) => title }); + const fileNode = csf._ast; + // @ts-expect-error File is not yet exposed, see https://github.com/babel/babel/issues/11350#issuecomment-644118606 + const file: BabelFile = new babel.File( + { filename: info.path }, + { code: info.source, ast: fileNode } + ); + + file.path.traverse({ + ImportDeclaration: (path) => { + if ( + path.node.source.value === '@storybook/jest' || + path.node.source.value === '@storybook/testing-library' + ) { + if (path.node.source.value === '@storybook/jest') { + path.get('specifiers').forEach((specifier) => { + if (specifier.isImportSpecifier()) { + const imported = specifier.get('imported'); + if (!imported.isIdentifier()) return; + if (imported.node.name === 'jest') { + specifier.remove(); + path.node.specifiers.push(t.importNamespaceSpecifier(t.identifier('jest'))); + } + } + }); + } + path.get('source').replaceWith(t.stringLiteral('@storybook/test')); + } + }, + Identifier: (path) => { + console.log(path.node.name); + if (path.node.name === 'jest') { + path.replaceWith(t.identifier('test')); + } + }, + }); + + return printCsf(csf).code; +} + +export const parser = 'tsx'; From 816a8df2d8c0f5c4b84b1bc4a7821d4e2aede48a Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Thu, 8 Feb 2024 17:05:20 +0100 Subject: [PATCH 02/15] Prompt the codemod in an automigration --- code/lib/cli/src/automigrate/fixes/index.ts | 2 + .../fixes/remove-jest-testing-library.test.ts | 55 +++++++++++++++++++ .../fixes/remove-jest-testing-library.ts | 30 ++++++++++ 3 files changed, 87 insertions(+) create mode 100644 code/lib/cli/src/automigrate/fixes/remove-jest-testing-library.test.ts create mode 100644 code/lib/cli/src/automigrate/fixes/remove-jest-testing-library.ts diff --git a/code/lib/cli/src/automigrate/fixes/index.ts b/code/lib/cli/src/automigrate/fixes/index.ts index 27f8a80b3140..e08f9b13b0c7 100644 --- a/code/lib/cli/src/automigrate/fixes/index.ts +++ b/code/lib/cli/src/automigrate/fixes/index.ts @@ -20,6 +20,7 @@ import { wrapRequire } from './wrap-require'; import { reactDocgen } from './react-docgen'; import { removeReactDependency } from './prompt-remove-react'; import { storyshotsMigration } from './storyshots-migration'; +import { removeJestTestingLibrary } from './remove-jest-testing-library'; export * from '../types'; @@ -34,6 +35,7 @@ export const allFixes: Fix[] = [ sbBinary, sbScripts, incompatibleAddons, + removeJestTestingLibrary, removedGlobalClientAPIs, mdx1to2, mdxgfm, diff --git a/code/lib/cli/src/automigrate/fixes/remove-jest-testing-library.test.ts b/code/lib/cli/src/automigrate/fixes/remove-jest-testing-library.test.ts new file mode 100644 index 000000000000..be0d7a281511 --- /dev/null +++ b/code/lib/cli/src/automigrate/fixes/remove-jest-testing-library.test.ts @@ -0,0 +1,55 @@ +import { expect, it } from 'vitest'; + +import type { StorybookConfig } from '@storybook/types'; +import type { JsPackageManager } from '@storybook/core-common'; +import { removeJestTestingLibrary } from './remove-jest-testing-library'; + +const check = async ({ + packageManager, + main: mainConfig = {}, + storybookVersion = '8.0.0', +}: { + packageManager: Partial; + main?: Partial & Record; + storybookVersion?: string; +}) => { + return removeJestTestingLibrary.check({ + packageManager: packageManager as any, + configDir: '', + mainConfig: mainConfig as any, + storybookVersion, + }); +}; + +it('should show incompatible addons registered in main.js', async () => { + const options = await check({ + packageManager: { + getAllDependencies: async () => ({ + '@storybook/jest': '1.0.0', + '@storybook/testing-library': '1.0.0', + }), + }, + main: { addons: ['@storybook/essentials', '@storybook/addon-info'] }, + }); + + await expect(options).toMatchInlineSnapshot(` + { + "incompatiblePackages": [ + "@storybook/jest", + "@storybook/testing-library", + ], + } + `); + + expect(await removeJestTestingLibrary.prompt(options!)).toMatchInlineSnapshot(` + "Attention: We've detected that you're using the following packages which are known to be incompatible with Storybook 8: + + - @storybook/jest + - @storybook/testing-library + + Run: + npx sb migrate migrate-to-test-package --glob="**/*.stories.@(js|jsx|ts|tsx)" + + To migrate to the @storybook/test package." + `); +}); diff --git a/code/lib/cli/src/automigrate/fixes/remove-jest-testing-library.ts b/code/lib/cli/src/automigrate/fixes/remove-jest-testing-library.ts new file mode 100644 index 000000000000..17a63ca42810 --- /dev/null +++ b/code/lib/cli/src/automigrate/fixes/remove-jest-testing-library.ts @@ -0,0 +1,30 @@ +import chalk from 'chalk'; +import dedent from 'ts-dedent'; +import type { Fix } from '../types'; + +export const removeJestTestingLibrary: Fix<{ incompatiblePackages: string[] }> = { + id: 'remove-jest-testing-library', + promptOnly: true, + async check({ mainConfig, packageManager }) { + const deps = await packageManager.getAllDependencies(); + + const incompatiblePackages = Object.keys(deps).filter( + (it) => it === '@storybook/jest' || it === '@storybook/testing-library' + ); + return incompatiblePackages.length ? { incompatiblePackages } : null; + }, + prompt({ incompatiblePackages }) { + return dedent` + ${chalk.bold( + 'Attention' + )}: We've detected that you're using the following packages which are known to be incompatible with Storybook 8: + + ${incompatiblePackages.map((name) => `- ${chalk.cyan(`${name}`)}`).join('\n')} + + Run: + npx sb migrate migrate-to-test-package --glob="**/*.stories.@(js|jsx|ts|tsx)" + + To migrate to the @storybook/test package. + `; + }, +}; From be2f70ed68774e248f0b22d76bb6d90eecb4bb64 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Fri, 9 Feb 2024 11:09:13 +0100 Subject: [PATCH 03/15] Add the new entry --- code/lib/codemod/package.json | 2 ++ 1 file changed, 2 insertions(+) diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json index 52599bff2bfe..587b47d1fe0f 100644 --- a/code/lib/codemod/package.json +++ b/code/lib/codemod/package.json @@ -31,6 +31,7 @@ "./dist/transforms/csf-hoist-story-annotations.js": "./dist/transforms/csf-hoist-story-annotations.js", "./dist/transforms/move-builtin-addons.js": "./dist/transforms/move-builtin-addons.js", "./dist/transforms/mdx-to-csf.js": "./dist/transforms/mdx-to-csf.js", + "./dist/transforms/migrate-to-test-package.js": "./dist/transforms/migrate-to-test-package.js", "./dist/transforms/storiesof-to-csf.js": "./dist/transforms/storiesof-to-csf.js", "./dist/transforms/update-addon-info.js": "./dist/transforms/update-addon-info.js", "./dist/transforms/update-organisation-name.js": "./dist/transforms/update-organisation-name.js", @@ -93,6 +94,7 @@ "./src/transforms/csf-2-to-3.ts", "./src/transforms/csf-hoist-story-annotations.js", "./src/transforms/mdx-to-csf.ts", + "./src/transforms/migrate-to-test-package.ts", "./src/transforms/move-builtin-addons.js", "./src/transforms/storiesof-to-csf.js", "./src/transforms/update-addon-info.js", From 13509186149769c1ffd1c10081821b4516994f4b Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Fri, 9 Feb 2024 11:23:05 +0100 Subject: [PATCH 04/15] Apply prettier --- .../src/transforms/migrate-to-test-package.ts | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/code/lib/codemod/src/transforms/migrate-to-test-package.ts b/code/lib/codemod/src/transforms/migrate-to-test-package.ts index d30776f11155..23883136c254 100644 --- a/code/lib/codemod/src/transforms/migrate-to-test-package.ts +++ b/code/lib/codemod/src/transforms/migrate-to-test-package.ts @@ -4,8 +4,10 @@ import { loadCsf, printCsf } from '@storybook/csf-tools'; import type { BabelFile } from '@babel/core'; import * as babel from '@babel/core'; import * as t from '@babel/types'; +import prettier from 'prettier'; +import { logger } from '@storybook/node-logger'; -export default function transform(info: FileInfo): string { +export default async function transform(info: FileInfo) { const csf = loadCsf(info.source, { makeTitle: (title) => title }); const fileNode = csf._ast; // @ts-expect-error File is not yet exposed, see https://github.com/babel/babel/issues/11350#issuecomment-644118606 @@ -36,14 +38,22 @@ export default function transform(info: FileInfo): string { } }, Identifier: (path) => { - console.log(path.node.name); if (path.node.name === 'jest') { path.replaceWith(t.identifier('test')); } }, }); - return printCsf(csf).code; + let output = printCsf(csf).code; + try { + const prettierConfig = await prettier.resolveConfig(info.path); + if (prettierConfig) { + output = await prettier.format(output, { ...prettierConfig, filepath: info.path }); + } + } catch (e) { + logger.warn(`Failed applying prettier to ${info.path}.`); + } + return output; } export const parser = 'tsx'; From e2bf38be6a151c0f0aaf4856409a99cd23f92ff1 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Fri, 9 Feb 2024 11:26:39 +0100 Subject: [PATCH 05/15] Change wording --- .../automigrate/fixes/remove-jest-testing-library.ts | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/code/lib/cli/src/automigrate/fixes/remove-jest-testing-library.ts b/code/lib/cli/src/automigrate/fixes/remove-jest-testing-library.ts index 17a63ca42810..c8b444b91ff2 100644 --- a/code/lib/cli/src/automigrate/fixes/remove-jest-testing-library.ts +++ b/code/lib/cli/src/automigrate/fixes/remove-jest-testing-library.ts @@ -21,10 +21,12 @@ export const removeJestTestingLibrary: Fix<{ incompatiblePackages: string[] }> = ${incompatiblePackages.map((name) => `- ${chalk.cyan(`${name}`)}`).join('\n')} - Run: - npx sb migrate migrate-to-test-package --glob="**/*.stories.@(js|jsx|ts|tsx)" - - To migrate to the @storybook/test package. + Install the replacement for those package: ${chalk.cyan('@storybook/test')} + + And run the following codemod: + ${chalk.cyan( + 'npx sb migrate migrate-to-test-package --glob="**/*.stories.@(js|jsx|ts|tsx)"' + )} `; }, }; From 6d6789fe1b96753392d772b7a230dc98d205b19f Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Fri, 9 Feb 2024 11:27:34 +0100 Subject: [PATCH 06/15] Change wording --- .../cli/src/automigrate/fixes/remove-jest-testing-library.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/cli/src/automigrate/fixes/remove-jest-testing-library.ts b/code/lib/cli/src/automigrate/fixes/remove-jest-testing-library.ts index c8b444b91ff2..9263c35615e3 100644 --- a/code/lib/cli/src/automigrate/fixes/remove-jest-testing-library.ts +++ b/code/lib/cli/src/automigrate/fixes/remove-jest-testing-library.ts @@ -21,7 +21,7 @@ export const removeJestTestingLibrary: Fix<{ incompatiblePackages: string[] }> = ${incompatiblePackages.map((name) => `- ${chalk.cyan(`${name}`)}`).join('\n')} - Install the replacement for those package: ${chalk.cyan('@storybook/test')} + Install the replacement for those packages: ${chalk.cyan('@storybook/test')} And run the following codemod: ${chalk.cyan( From 2e3cdc6d6bd0ba9e9fde9c9a47dcc9ca8858e8bf Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Fri, 9 Feb 2024 12:04:12 +0100 Subject: [PATCH 07/15] Update snapshot --- .../automigrate/fixes/remove-jest-testing-library.test.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/code/lib/cli/src/automigrate/fixes/remove-jest-testing-library.test.ts b/code/lib/cli/src/automigrate/fixes/remove-jest-testing-library.test.ts index be0d7a281511..f967c74af544 100644 --- a/code/lib/cli/src/automigrate/fixes/remove-jest-testing-library.test.ts +++ b/code/lib/cli/src/automigrate/fixes/remove-jest-testing-library.test.ts @@ -47,9 +47,9 @@ it('should show incompatible addons registered in main.js', async () => { - @storybook/jest - @storybook/testing-library - Run: - npx sb migrate migrate-to-test-package --glob="**/*.stories.@(js|jsx|ts|tsx)" - - To migrate to the @storybook/test package." + Install the replacement for those packages: @storybook/test + + And run the following codemod: + npx sb migrate migrate-to-test-package --glob="**/*.stories.@(js|jsx|ts|tsx)" " `); }); From 570b3ba2ab2fa763b8f3159bc13b5524f0df8bfa Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Fri, 9 Feb 2024 12:24:47 +0100 Subject: [PATCH 08/15] Use default prettier setting if we can not find a config --- .../__tests__/migrate-to-test-package.test.ts | 20 ++++++++++--------- code/lib/codemod/src/transforms/csf-2-to-3.ts | 10 +--------- code/lib/codemod/src/transforms/mdx-to-csf.ts | 13 +++--------- .../src/transforms/migrate-to-test-package.ts | 17 ++++++++++------ .../src/transforms/storiesof-to-csf.js | 9 +-------- .../transforms/upgrade-deprecated-types.ts | 13 ++++-------- 6 files changed, 31 insertions(+), 51 deletions(-) diff --git a/code/lib/codemod/src/transforms/__tests__/migrate-to-test-package.test.ts b/code/lib/codemod/src/transforms/__tests__/migrate-to-test-package.test.ts index 8ccb3a093631..e6acb4b60279 100644 --- a/code/lib/codemod/src/transforms/__tests__/migrate-to-test-package.test.ts +++ b/code/lib/codemod/src/transforms/__tests__/migrate-to-test-package.test.ts @@ -7,21 +7,22 @@ expect.addSnapshotSerializer({ test: () => true, }); -const tsTransform = (source: string) => transform({ source, path: 'Component.stories.tsx' }).trim(); +const tsTransform = async (source: string) => + (await transform({ source, path: 'Component.stories.tsx' })).trim(); -test('replace jest and testing-library with the test package', () => { +test('replace jest and testing-library with the test package', async () => { const input = dedent` import { expect } from '@storybook/jest'; import { within, userEvent } from '@storybook/testing-library'; `; - expect(tsTransform(input)).toMatchInlineSnapshot(` - import { expect } from "@storybook/test"; - import { within, userEvent } from "@storybook/test"; + expect(await tsTransform(input)).toMatchInlineSnapshot(` + import { expect } from '@storybook/test'; + import { within, userEvent } from '@storybook/test'; `); }); -test('Make jest imports namespace imports', () => { +test('Make jest imports namespace imports', async () => { const input = dedent` import { expect, jest } from '@storybook/jest'; import { within, userEvent } from '@storybook/testing-library'; @@ -32,9 +33,10 @@ test('Make jest imports namespace imports', () => { jest.spyOn(window, 'Something'); `; - expect(tsTransform(input)).toMatchInlineSnapshot(` - import * as test, { expect } from "@storybook/test"; - import { within, userEvent } from "@storybook/test"; + expect(await tsTransform(input)).toMatchInlineSnapshot(` + import { expect } from '@storybook/test'; + import * as test from '@storybook/test'; + import { within, userEvent } from '@storybook/test'; const onFocusMock = test.fn(); const onSearchMock = test.fn(); diff --git a/code/lib/codemod/src/transforms/csf-2-to-3.ts b/code/lib/codemod/src/transforms/csf-2-to-3.ts index 38677f07f702..507c38999c88 100644 --- a/code/lib/codemod/src/transforms/csf-2-to-3.ts +++ b/code/lib/codemod/src/transforms/csf-2-to-3.ts @@ -204,16 +204,8 @@ export default async function transform(info: FileInfo, api: API, options: { par let output = printCsf(csf).code; try { - const prettierConfig = (await prettier.resolveConfig(info.path)) ?? { - printWidth: 100, - tabWidth: 2, - bracketSpacing: true, - trailingComma: 'es5', - singleQuote: true, - }; - output = await prettier.format(output, { - ...prettierConfig, + ...(await prettier.resolveConfig(info.path)), filepath: info.path, }); } catch (e) { diff --git a/code/lib/codemod/src/transforms/mdx-to-csf.ts b/code/lib/codemod/src/transforms/mdx-to-csf.ts index 53e2162ab19b..9c657c822e04 100644 --- a/code/lib/codemod/src/transforms/mdx-to-csf.ts +++ b/code/lib/codemod/src/transforms/mdx-to-csf.ts @@ -291,17 +291,10 @@ export async function transform(info: FileInfo, baseName: string): Promise<[stri const newMdx = mdxProcessor.stringify(root); let output = recast.print(file.path.node).code; - const prettierConfig = (await prettier.resolveConfig(`${info.path}.jsx`)) || { - printWidth: 100, - tabWidth: 2, - bracketSpacing: true, - trailingComma: 'es5', - singleQuote: true, - }; - + const path = `${info.path}.jsx`; output = await prettier.format(output.trim(), { - ...prettierConfig, - filepath: `${info.path}.jsx`, + ...(await prettier.resolveConfig(path)), + filepath: path, }); return [newMdx, output]; diff --git a/code/lib/codemod/src/transforms/migrate-to-test-package.ts b/code/lib/codemod/src/transforms/migrate-to-test-package.ts index 23883136c254..055c1d2a1352 100644 --- a/code/lib/codemod/src/transforms/migrate-to-test-package.ts +++ b/code/lib/codemod/src/transforms/migrate-to-test-package.ts @@ -5,7 +5,6 @@ import type { BabelFile } from '@babel/core'; import * as babel from '@babel/core'; import * as t from '@babel/types'; import prettier from 'prettier'; -import { logger } from '@storybook/node-logger'; export default async function transform(info: FileInfo) { const csf = loadCsf(info.source, { makeTitle: (title) => title }); @@ -29,6 +28,12 @@ export default async function transform(info: FileInfo) { if (!imported.isIdentifier()) return; if (imported.node.name === 'jest') { specifier.remove(); + path.insertAfter( + t.importDeclaration( + [t.importNamespaceSpecifier(t.identifier('test'))], + t.stringLiteral('@storybook/test') + ) + ); path.node.specifiers.push(t.importNamespaceSpecifier(t.identifier('jest'))); } } @@ -46,12 +51,12 @@ export default async function transform(info: FileInfo) { let output = printCsf(csf).code; try { - const prettierConfig = await prettier.resolveConfig(info.path); - if (prettierConfig) { - output = await prettier.format(output, { ...prettierConfig, filepath: info.path }); - } + output = await prettier.format(output, { + ...(await prettier.resolveConfig(info.path)), + filepath: info.path, + }); } catch (e) { - logger.warn(`Failed applying prettier to ${info.path}.`); + console.warn(`Failed applying prettier to ${info.path}.`); } return output; } diff --git a/code/lib/codemod/src/transforms/storiesof-to-csf.js b/code/lib/codemod/src/transforms/storiesof-to-csf.js index 83fc7b058a20..843ce9278256 100644 --- a/code/lib/codemod/src/transforms/storiesof-to-csf.js +++ b/code/lib/codemod/src/transforms/storiesof-to-csf.js @@ -265,14 +265,7 @@ export default async function transformer(file, api, options) { let output = source; try { - const prettierConfig = (await prettier.resolveConfig(file.path)) || { - printWidth: 100, - tabWidth: 2, - bracketSpacing: true, - trailingComma: 'es5', - singleQuote: true, - }; - + const prettierConfig = (await prettier.resolveConfig(file.path)) output = prettier.format(source, { ...prettierConfig, parser: jscodeshiftToPrettierParser(options.parser), diff --git a/code/lib/codemod/src/transforms/upgrade-deprecated-types.ts b/code/lib/codemod/src/transforms/upgrade-deprecated-types.ts index fb4cce571064..5751d139ba97 100644 --- a/code/lib/codemod/src/transforms/upgrade-deprecated-types.ts +++ b/code/lib/codemod/src/transforms/upgrade-deprecated-types.ts @@ -36,15 +36,10 @@ export default async function transform(info: FileInfo, api: API, options: { par let output = printCsf(csf).code; try { - const prettierConfig = (await prettier.resolveConfig(info.path)) || { - printWidth: 100, - tabWidth: 2, - bracketSpacing: true, - trailingComma: 'es5', - singleQuote: true, - }; - - output = await prettier.format(output, { ...prettierConfig, filepath: info.path }); + output = await prettier.format(output, { + ...(await prettier.resolveConfig(info.path)), + filepath: info.path, + }); } catch (e) { logger.log(`Failed applying prettier to ${info.path}.`); } From b0ece9f2f9dd464b24bc66bbe8a78fb88920242e Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Fri, 9 Feb 2024 16:13:59 +0100 Subject: [PATCH 09/15] Fix the test --- code/lib/codemod/src/transforms/migrate-to-test-package.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/code/lib/codemod/src/transforms/migrate-to-test-package.ts b/code/lib/codemod/src/transforms/migrate-to-test-package.ts index 055c1d2a1352..02545aae06af 100644 --- a/code/lib/codemod/src/transforms/migrate-to-test-package.ts +++ b/code/lib/codemod/src/transforms/migrate-to-test-package.ts @@ -34,7 +34,6 @@ export default async function transform(info: FileInfo) { t.stringLiteral('@storybook/test') ) ); - path.node.specifiers.push(t.importNamespaceSpecifier(t.identifier('jest'))); } } }); From 13dd36396ac2fc6505fa02fd28e6c537bd48e616 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Mon, 12 Feb 2024 11:47:42 +0100 Subject: [PATCH 10/15] Fix test name --- .../src/automigrate/fixes/remove-jest-testing-library.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/cli/src/automigrate/fixes/remove-jest-testing-library.test.ts b/code/lib/cli/src/automigrate/fixes/remove-jest-testing-library.test.ts index f967c74af544..a2c3afe87d94 100644 --- a/code/lib/cli/src/automigrate/fixes/remove-jest-testing-library.test.ts +++ b/code/lib/cli/src/automigrate/fixes/remove-jest-testing-library.test.ts @@ -21,7 +21,7 @@ const check = async ({ }); }; -it('should show incompatible addons registered in main.js', async () => { +it('should prompt to install the test package and run the codemod', async () => { const options = await check({ packageManager: { getAllDependencies: async () => ({ From 834d73b81926ba882a82278b4aff7ab0f0d275ff Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Mon, 12 Feb 2024 11:54:10 +0100 Subject: [PATCH 11/15] Fix lint --- code/nx.json | 21 +++++++++++++-------- 1 file changed, 13 insertions(+), 8 deletions(-) diff --git a/code/nx.json b/code/nx.json index ad6c9a817fe7..b072caaa73ab 100644 --- a/code/nx.json +++ b/code/nx.json @@ -1,11 +1,5 @@ { "$schema": "./node_modules/nx/schemas/nx-schema.json", - "implicitDependencies": { - "package.json": { - "dependencies": "*", - "devDependencies": "*" - } - }, "pluginsConfig": { "@nrwl/js": { "analyzeSourceFiles": false @@ -47,10 +41,21 @@ "dependencies": true } ], - "outputs": ["{projectRoot}/dist"], + "outputs": [ + "{projectRoot}/dist" + ], "cache": true } }, "nxCloudAccessToken": "NGVmYTkxMmItYzY3OS00MjkxLTk1ZDktZDFmYTFmNmVlNGY4fHJlYWQ=", - "parallel": 1 + "namedInputs": { + "default": [ + "{projectRoot}/**/*", + "sharedGlobals" + ], + "sharedGlobals": [], + "production": [ + "default" + ] + } } From 2ab74c7d857db222b86cfd181bcc1a486add5773 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Mon, 12 Feb 2024 11:56:02 +0100 Subject: [PATCH 12/15] Fix lint --- code/lib/codemod/src/transforms/storiesof-to-csf.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/codemod/src/transforms/storiesof-to-csf.js b/code/lib/codemod/src/transforms/storiesof-to-csf.js index 843ce9278256..993e9ff8c35b 100644 --- a/code/lib/codemod/src/transforms/storiesof-to-csf.js +++ b/code/lib/codemod/src/transforms/storiesof-to-csf.js @@ -265,7 +265,7 @@ export default async function transformer(file, api, options) { let output = source; try { - const prettierConfig = (await prettier.resolveConfig(file.path)) + const prettierConfig = await prettier.resolveConfig(file.path); output = prettier.format(source, { ...prettierConfig, parser: jscodeshiftToPrettierParser(options.parser), From deeedc85b91e03ae5b76003480efc1184bb2a39d Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Mon, 12 Feb 2024 12:07:20 +0100 Subject: [PATCH 13/15] sb -> storybook --- .../cli/src/automigrate/fixes/remove-jest-testing-library.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/cli/src/automigrate/fixes/remove-jest-testing-library.ts b/code/lib/cli/src/automigrate/fixes/remove-jest-testing-library.ts index 9263c35615e3..87cf964468b3 100644 --- a/code/lib/cli/src/automigrate/fixes/remove-jest-testing-library.ts +++ b/code/lib/cli/src/automigrate/fixes/remove-jest-testing-library.ts @@ -25,7 +25,7 @@ export const removeJestTestingLibrary: Fix<{ incompatiblePackages: string[] }> = And run the following codemod: ${chalk.cyan( - 'npx sb migrate migrate-to-test-package --glob="**/*.stories.@(js|jsx|ts|tsx)"' + 'npx storybook migrate migrate-to-test-package --glob="**/*.stories.@(js|jsx|ts|tsx)"' )} `; }, From f31380c4e491d898f476186a282a31115f52f538 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Mon, 12 Feb 2024 12:09:55 +0100 Subject: [PATCH 14/15] Fix unit test --- .../src/automigrate/fixes/remove-jest-testing-library.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/cli/src/automigrate/fixes/remove-jest-testing-library.test.ts b/code/lib/cli/src/automigrate/fixes/remove-jest-testing-library.test.ts index a2c3afe87d94..f062e4cad797 100644 --- a/code/lib/cli/src/automigrate/fixes/remove-jest-testing-library.test.ts +++ b/code/lib/cli/src/automigrate/fixes/remove-jest-testing-library.test.ts @@ -50,6 +50,6 @@ it('should prompt to install the test package and run the codemod', async () => Install the replacement for those packages: @storybook/test And run the following codemod: - npx sb migrate migrate-to-test-package --glob="**/*.stories.@(js|jsx|ts|tsx)" " + npx storybook migrate migrate-to-test-package --glob="**/*.stories.@(js|jsx|ts|tsx)" " `); }); From e6fea3f8c01a17ea3d4de71ced46c9129c5e308d Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Mon, 12 Feb 2024 13:52:54 +0100 Subject: [PATCH 15/15] Fix CI --- .../fixes/remove-jest-testing-library.test.ts | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/code/lib/cli/src/automigrate/fixes/remove-jest-testing-library.test.ts b/code/lib/cli/src/automigrate/fixes/remove-jest-testing-library.test.ts index f062e4cad797..60a2c2a97a35 100644 --- a/code/lib/cli/src/automigrate/fixes/remove-jest-testing-library.test.ts +++ b/code/lib/cli/src/automigrate/fixes/remove-jest-testing-library.test.ts @@ -3,6 +3,7 @@ import { expect, it } from 'vitest'; import type { StorybookConfig } from '@storybook/types'; import type { JsPackageManager } from '@storybook/core-common'; import { removeJestTestingLibrary } from './remove-jest-testing-library'; +import ansiRegex from 'ansi-regex'; const check = async ({ packageManager, @@ -41,15 +42,23 @@ it('should prompt to install the test package and run the codemod', async () => } `); + expect.addSnapshotSerializer({ + serialize: (value) => { + const stringVal = typeof value === 'string' ? value : value.toString(); + return stringVal.replace(ansiRegex(), ''); + }, + test: () => true, + }); + expect(await removeJestTestingLibrary.prompt(options!)).toMatchInlineSnapshot(` - "Attention: We've detected that you're using the following packages which are known to be incompatible with Storybook 8: + Attention: We've detected that you're using the following packages which are known to be incompatible with Storybook 8: - - @storybook/jest - - @storybook/testing-library + - @storybook/jest + - @storybook/testing-library - Install the replacement for those packages: @storybook/test + Install the replacement for those packages: @storybook/test And run the following codemod: - npx storybook migrate migrate-to-test-package --glob="**/*.stories.@(js|jsx|ts|tsx)" " + npx storybook migrate migrate-to-test-package --glob="**/*.stories.@(js|jsx|ts|tsx)" `); });