From e313b6ae0a7c055b71a40338764fc129be28ac9d Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Mon, 17 Oct 2022 14:19:04 +0200 Subject: [PATCH 1/7] CLI: support .json in eslint plugin migration --- .../src/automigrate/fixes/eslint-plugin.ts | 26 ++++++++++++------- .../src/automigrate/helpers/getEslintInfo.ts | 4 +-- 2 files changed, 19 insertions(+), 11 deletions(-) diff --git a/code/lib/cli/src/automigrate/fixes/eslint-plugin.ts b/code/lib/cli/src/automigrate/fixes/eslint-plugin.ts index 1a83c18c91b7..2d856d0f5e22 100644 --- a/code/lib/cli/src/automigrate/fixes/eslint-plugin.ts +++ b/code/lib/cli/src/automigrate/fixes/eslint-plugin.ts @@ -3,6 +3,7 @@ import { dedent } from 'ts-dedent'; import { ConfigFile, readConfig, writeConfig } from '@storybook/csf-tools'; import { getStorybookInfo } from '@storybook/core-common'; +import { readJson, writeJson } from 'fs-extra'; import { findEslintFile, SUPPORTED_ESLINT_EXTENSIONS } from '../helpers/getEslintInfo'; import type { Fix } from '../types'; @@ -89,16 +90,23 @@ export const eslintPlugin: Fix = { `); } - const eslint = await readConfig(eslintFile); - logger.info(`✅ Configuring eslint rules in ${eslint.fileName}`); - + logger.info(`✅ Adding Storybook plugin to ${eslintFile}`); if (!dryRun) { - logger.info(`✅ Adding Storybook to extends list`); - const extendsConfig = eslint.getFieldValue(['extends']) || []; - const existingConfigValue = Array.isArray(extendsConfig) ? extendsConfig : [extendsConfig]; - eslint.setFieldValue(['extends'], [...existingConfigValue, 'plugin:storybook/recommended']); - - await writeConfig(eslint); + if (eslintFile.endsWith('json')) { + const eslintConfig = (await readJson(eslintFile)) as { extends?: string[] }; + const existingConfigValue = Array.isArray(eslintConfig.extends) + ? eslintConfig.extends + : [eslintConfig.extends]; + eslintConfig.extends = [...(existingConfigValue || []), 'plugin:storybook/recommended']; + await writeJson(eslintFile, eslintConfig, { spaces: 2 }); + } else { + const eslint = await readConfig(eslintFile); + const extendsConfig = eslint.getFieldValue(['extends']) || []; + const existingConfigValue = Array.isArray(extendsConfig) ? extendsConfig : [extendsConfig]; + eslint.setFieldValue(['extends'], [...existingConfigValue, 'plugin:storybook/recommended']); + + await writeConfig(eslint); + } } }, }; diff --git a/code/lib/cli/src/automigrate/helpers/getEslintInfo.ts b/code/lib/cli/src/automigrate/helpers/getEslintInfo.ts index fb153b8fe5b9..698e2c4bde7e 100644 --- a/code/lib/cli/src/automigrate/helpers/getEslintInfo.ts +++ b/code/lib/cli/src/automigrate/helpers/getEslintInfo.ts @@ -1,7 +1,7 @@ import fse from 'fs-extra'; -export const SUPPORTED_ESLINT_EXTENSIONS = ['js', 'cjs']; -const UNSUPPORTED_ESLINT_EXTENSIONS = ['yaml', 'yml', 'json']; +export const SUPPORTED_ESLINT_EXTENSIONS = ['js', 'cjs', 'json']; +const UNSUPPORTED_ESLINT_EXTENSIONS = ['yaml', 'yml']; export const findEslintFile = () => { const filePrefix = '.eslintrc'; From 12f44771686785f7564672dfa3f14ed5e2de5717 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Mon, 17 Oct 2022 19:54:29 +0200 Subject: [PATCH 2/7] detect file indentation in eslint plugin automigration --- code/lib/cli/package.json | 1 + code/lib/cli/src/automigrate/fixes/eslint-plugin.ts | 10 +++++++--- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/code/lib/cli/package.json b/code/lib/cli/package.json index 1984c5b7402a..2b62c1f06c70 100644 --- a/code/lib/cli/package.json +++ b/code/lib/cli/package.json @@ -55,6 +55,7 @@ "commander": "^6.2.1", "cross-spawn": "^7.0.3", "degit": "^2.8.4", + "detect-indent": "^7.0.1", "envinfo": "^7.7.3", "execa": "^5.0.0", "express": "^4.17.1", diff --git a/code/lib/cli/src/automigrate/fixes/eslint-plugin.ts b/code/lib/cli/src/automigrate/fixes/eslint-plugin.ts index 2d856d0f5e22..7c12542a621a 100644 --- a/code/lib/cli/src/automigrate/fixes/eslint-plugin.ts +++ b/code/lib/cli/src/automigrate/fixes/eslint-plugin.ts @@ -2,8 +2,9 @@ import chalk from 'chalk'; import { dedent } from 'ts-dedent'; import { ConfigFile, readConfig, writeConfig } from '@storybook/csf-tools'; import { getStorybookInfo } from '@storybook/core-common'; +import { readFile, readJson, writeJson } from 'fs-extra'; +import detectIndent from 'detect-indent'; -import { readJson, writeJson } from 'fs-extra'; import { findEslintFile, SUPPORTED_ESLINT_EXTENSIONS } from '../helpers/getEslintInfo'; import type { Fix } from '../types'; @@ -80,7 +81,7 @@ export const eslintPlugin: Fix = { if (!dryRun) packageManager.addDependencies({ installAsDevDependencies: true }, deps); if (!dryRun && unsupportedExtension) { - throw new Error(dedent` + logger.info(dedent` ⚠️ The plugin was successfuly installed but failed to configure. Found an .eslintrc config file with an unsupported automigration format: ${unsupportedExtension}. @@ -98,7 +99,10 @@ export const eslintPlugin: Fix = { ? eslintConfig.extends : [eslintConfig.extends]; eslintConfig.extends = [...(existingConfigValue || []), 'plugin:storybook/recommended']; - await writeJson(eslintFile, eslintConfig, { spaces: 2 }); + + const eslintFileContents = await readFile(eslintFile, 'utf8'); + const spaces = detectIndent(eslintFileContents).amount || 2; + await writeJson(eslintFile, eslintConfig, { spaces }); } else { const eslint = await readConfig(eslintFile); const extendsConfig = eslint.getFieldValue(['extends']) || []; From 18e36b10fa5826d7d54a95fda847d36fb75da819 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Mon, 17 Oct 2022 19:55:44 +0200 Subject: [PATCH 3/7] remove incorrect thrown error in eslint automigration --- code/lib/cli/src/automigrate/fixes/eslint-plugin.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/code/lib/cli/src/automigrate/fixes/eslint-plugin.ts b/code/lib/cli/src/automigrate/fixes/eslint-plugin.ts index 7c12542a621a..66046cb6573e 100644 --- a/code/lib/cli/src/automigrate/fixes/eslint-plugin.ts +++ b/code/lib/cli/src/automigrate/fixes/eslint-plugin.ts @@ -84,8 +84,10 @@ export const eslintPlugin: Fix = { logger.info(dedent` ⚠️ The plugin was successfuly installed but failed to configure. - Found an .eslintrc config file with an unsupported automigration format: ${unsupportedExtension}. - Supported formats for automigration are: ${SUPPORTED_ESLINT_EXTENSIONS.join(', ')}. + Found an eslint config file with an unsupported automigration format: .eslintrc.${unsupportedExtension}. + The supported formats for this automigration are: ${SUPPORTED_ESLINT_EXTENSIONS.join( + ', ' + )}. Please refer to https://github.com/storybookjs/eslint-plugin-storybook#usage to finish setting up the plugin manually. `); From 07c99f7d94cf55e11c6172066afcafaeb0a5bbcc Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Mon, 17 Oct 2022 20:07:15 +0200 Subject: [PATCH 4/7] update yarn.lock --- code/yarn.lock | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/code/yarn.lock b/code/yarn.lock index f9014c52b87d..3ae9d0a33bbe 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -7318,6 +7318,7 @@ __metadata: commander: ^6.2.1 cross-spawn: ^7.0.3 degit: ^2.8.4 + detect-indent: ^7.0.1 envinfo: ^7.7.3 execa: ^5.0.0 express: ^4.17.1 @@ -16762,6 +16763,13 @@ __metadata: languageName: node linkType: hard +"detect-indent@npm:^7.0.1": + version: 7.0.1 + resolution: "detect-indent@npm:7.0.1" + checksum: 47b6e3e3dda603c386e73b129f3e84844ae59bc2615f5072becf3cc02eab400bed5a4e6379c49d0b18cf630e80c2b07e87e0038b777addbc6ef793ad77dd05bc + languageName: node + linkType: hard + "detect-libc@npm:^1.0.3": version: 1.0.3 resolution: "detect-libc@npm:1.0.3" From d5b260d6266aa39c5f1f3cda9c438c886adbfe03 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Mon, 17 Oct 2022 20:29:06 +0200 Subject: [PATCH 5/7] downgrade detect-indent --- code/lib/cli/package.json | 2 +- code/yarn.lock | 11 ++--------- 2 files changed, 3 insertions(+), 10 deletions(-) diff --git a/code/lib/cli/package.json b/code/lib/cli/package.json index 2b62c1f06c70..e9a6bb1b2a54 100644 --- a/code/lib/cli/package.json +++ b/code/lib/cli/package.json @@ -55,7 +55,7 @@ "commander": "^6.2.1", "cross-spawn": "^7.0.3", "degit": "^2.8.4", - "detect-indent": "^7.0.1", + "detect-indent": "^6.1.0", "envinfo": "^7.7.3", "execa": "^5.0.0", "express": "^4.17.1", diff --git a/code/yarn.lock b/code/yarn.lock index 3ae9d0a33bbe..824c367fb65c 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -7318,7 +7318,7 @@ __metadata: commander: ^6.2.1 cross-spawn: ^7.0.3 degit: ^2.8.4 - detect-indent: ^7.0.1 + detect-indent: ^6.1.0 envinfo: ^7.7.3 execa: ^5.0.0 express: ^4.17.1 @@ -16756,20 +16756,13 @@ __metadata: languageName: node linkType: hard -"detect-indent@npm:^6.0.0": +"detect-indent@npm:^6.0.0, detect-indent@npm:^6.1.0": version: 6.1.0 resolution: "detect-indent@npm:6.1.0" checksum: dd83cdeda9af219cf77f5e9a0dc31d828c045337386cfb55ce04fad94ba872ee7957336834154f7647b89b899c3c7acc977c57a79b7c776b506240993f97acc7 languageName: node linkType: hard -"detect-indent@npm:^7.0.1": - version: 7.0.1 - resolution: "detect-indent@npm:7.0.1" - checksum: 47b6e3e3dda603c386e73b129f3e84844ae59bc2615f5072becf3cc02eab400bed5a4e6379c49d0b18cf630e80c2b07e87e0038b777addbc6ef793ad77dd05bc - languageName: node - linkType: hard - "detect-libc@npm:^1.0.3": version: 1.0.3 resolution: "detect-libc@npm:1.0.3" From ed4be1b825c31bf55aead2667b05a2b62f5e7efa Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Tue, 18 Oct 2022 07:49:43 +0200 Subject: [PATCH 6/7] add early return on eslint migration --- code/lib/cli/src/automigrate/fixes/eslint-plugin.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/code/lib/cli/src/automigrate/fixes/eslint-plugin.ts b/code/lib/cli/src/automigrate/fixes/eslint-plugin.ts index 66046cb6573e..8b9fb587ed43 100644 --- a/code/lib/cli/src/automigrate/fixes/eslint-plugin.ts +++ b/code/lib/cli/src/automigrate/fixes/eslint-plugin.ts @@ -91,6 +91,7 @@ export const eslintPlugin: Fix = { Please refer to https://github.com/storybookjs/eslint-plugin-storybook#usage to finish setting up the plugin manually. `); + return; } logger.info(`✅ Adding Storybook plugin to ${eslintFile}`); From 4f10f8a9e433b7ef34edc89916dc63d98f47c624 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Tue, 18 Oct 2022 07:56:19 +0200 Subject: [PATCH 7/7] Update code/lib/cli/src/automigrate/fixes/eslint-plugin.ts Co-authored-by: Jeppe Reinhold --- code/lib/cli/src/automigrate/fixes/eslint-plugin.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/cli/src/automigrate/fixes/eslint-plugin.ts b/code/lib/cli/src/automigrate/fixes/eslint-plugin.ts index 8b9fb587ed43..13f4515260a2 100644 --- a/code/lib/cli/src/automigrate/fixes/eslint-plugin.ts +++ b/code/lib/cli/src/automigrate/fixes/eslint-plugin.ts @@ -82,7 +82,7 @@ export const eslintPlugin: Fix = { if (!dryRun && unsupportedExtension) { logger.info(dedent` - ⚠️ The plugin was successfuly installed but failed to configure. + ⚠️ The plugin was successfully installed but failed to configure. Found an eslint config file with an unsupported automigration format: .eslintrc.${unsupportedExtension}. The supported formats for this automigration are: ${SUPPORTED_ESLINT_EXTENSIONS.join(