Merge pull request #12453 from remorses/fix-codemod-storiesof-to-csf

CLI: Fix storiesof-to-csf codemod for TypeScript
storybookjs · Sep 26, 2020 · 18c45b1 · 18c45b1
1 parent aac915d
commit 18c45b1
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 7 deletions.
diff --git 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
@@ -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',
   });
 }