diff --git a/lib/codemod/src/lib/utils.js b/lib/codemod/src/lib/utils.js index 55623881dfae..bacb61a17328 100644 --- a/lib/codemod/src/lib/utils.js +++ b/lib/codemod/src/lib/utils.js @@ -13,3 +13,14 @@ export const sanitizeName = (name) => { } return key; }; + +export function jscodeshiftToPrettierParser(parser) { + const parserMap = { + babylon: 'babel', + flow: 'flow', + ts: 'typescript', + tsx: 'typescript', + }; + + return parserMap[parser] || 'babel'; +} diff --git a/lib/codemod/src/transforms/storiesof-to-csf.js b/lib/codemod/src/transforms/storiesof-to-csf.js index 73cf2a1e353d..a1a78aa489bc 100644 --- a/lib/codemod/src/transforms/storiesof-to-csf.js +++ b/lib/codemod/src/transforms/storiesof-to-csf.js @@ -1,7 +1,7 @@ import prettier from 'prettier'; import { logger } from '@storybook/node-logger'; import { storyNameFromExport } from '@storybook/csf'; -import { sanitizeName } from '../lib/utils'; +import { sanitizeName, jscodeshiftToPrettierParser } from '../lib/utils'; /** * Convert a legacy story API to component story format @@ -25,6 +25,8 @@ import { sanitizeName } from '../lib/utils'; * NOTES: only support chained storiesOf() calls */ export default function transformer(file, api, options) { + const LITERAL = ['ts', 'tsx'].includes(options.parser) ? 'StringLiteral' : 'Literal'; + const j = api.jscodeshift; const root = j(file.source); @@ -107,7 +109,7 @@ export default function transformer(file, api, options) { base .find(j.CallExpression) .filter((call) => call.node.callee.name === 'storiesOf') - .filter((call) => call.node.arguments.length > 0 && call.node.arguments[0].type === 'Literal') + .filter((call) => call.node.arguments.length > 0 && call.node.arguments[0].type === LITERAL) .forEach((storiesOf) => { const title = storiesOf.node.arguments[0].value; statements.push( @@ -125,7 +127,7 @@ export default function transformer(file, api, options) { base .find(j.CallExpression) .filter((add) => add.node.callee.property && add.node.callee.property.name === 'add') - .filter((add) => add.node.arguments.length >= 2 && add.node.arguments[0].type === 'Literal') + .filter((add) => add.node.arguments.length >= 2 && add.node.arguments[0].type === LITERAL) .forEach((add) => adds.push(add)); adds.reverse(); @@ -233,7 +235,7 @@ export default function transformer(file, api, options) { root .find(j.CallExpression) .filter((add) => add.node.callee.property && add.node.callee.property.name === 'add') - .filter((add) => add.node.arguments.length >= 2 && add.node.arguments[0].type === 'Literal') + .filter((add) => add.node.arguments.length >= 2 && add.node.arguments[0].type === LITERAL) .filter((add) => ['ExpressionStatement', 'VariableDeclarator'].includes(add.parentPath.node.type) ) @@ -260,13 +262,16 @@ export default function transformer(file, api, options) { return source; } - return prettier.format(source, { - parser: options.parser || 'babel', - // FIXME: storybook defaults + const prettierConfig = prettier.resolveConfig.sync('.', { editorconfig: true }) || { printWidth: 100, tabWidth: 2, bracketSpacing: true, trailingComma: 'es5', singleQuote: true, + }; + + return prettier.format(source, { + ...prettierConfig, + parser: jscodeshiftToPrettierParser(options.parser) || 'babel', }); }