@storybook/codemod 7.0.0-alpha.37 → 7.0.0-alpha.39

package/dist/index.d.ts

@@ -0,0 +1,261 @@
+import fs from 'fs';
+import path from 'path';
+import { promisify } from 'util';
+import globby from 'globby';
+import { sync } from 'cross-spawn';
+
+declare function jscodeshiftToPrettierParser(parser?: string): string;
+
+const packageNames = {
+  '@kadira/react-storybook-decorator-centered': '@storybook/addon-centered',
+  '@kadira/storybook-addons': '@storybook/addons',
+  '@kadira/storybook-addon-actions': '@storybook/addon-actions',
+  '@kadira/storybook-addon-comments': '@storybook/addon-comments',
+  '@kadira/storybook-addon-graphql': '@storybook/addon-graphql',
+  '@kadira/storybook-addon-info': '@storybook/addon-info',
+  '@kadira/storybook-addon-knobs': '@storybook/addon-knobs',
+  '@kadira/storybook-addon-links': '@storybook/addon-links',
+  '@kadira/storybook-addon-notes': '@storybook/addon-notes',
+  '@kadira/storybook-addon-options': '@storybook/addon-options',
+  '@kadira/storybook-channels': '@storybook/channels',
+  '@kadira/storybook-channel-postmsg': '@storybook/channel-postmessage',
+  '@kadira/storybook-channel-websocket': '@storybook/channel-websocket',
+  '@kadira/storybook-ui': '@storybook/ui',
+  '@kadira/react-native-storybook': '@storybook/react-native',
+  '@kadira/react-storybook': '@storybook/react',
+  '@kadira/getstorybook': '@storybook/cli',
+  '@kadira/storybook': '@storybook/react',
+  storyshots: '@storybook/addon-storyshots',
+  getstorybook: '@storybook/cli',
+};
+
+function transformer$1(file, api) {
+  const j = api.jscodeshift;
+
+  const packageNamesKeys = Object.keys(packageNames);
+
+  /**
+   * Checks whether the node value matches a Storybook package
+   * @param {string} the import declaration node
+   * @returns {string} whether the node value matches a Storybook package
+   */
+  const getMatch = (oldpart) => packageNamesKeys.find((newpart) => oldpart.match(newpart));
+
+  /**
+   * Returns the name of the Storybook packages with the organisation name,
+   * replacing the old `@kadira/` prefix.
+   * @param {string} oldPackageName the name of the old package
+   * @return {string} the new package name
+   * @example
+   * // returns '@storybook/storybook'
+   * getNewPackageName('@kadira/storybook')
+   */
+  const getNewPackageName = (oldPackageName) => {
+    const match = getMatch(oldPackageName);
+
+    if (match) {
+      const replacement = packageNames[match];
+      return oldPackageName.replace(match, replacement);
+    }
+    return oldPackageName;
+  };
+
+  /**
+   * updatePackageName - updates the source name of the Storybook packages
+   * @param {ImportDeclaration} declaration the import declaration
+   * @returns {ImportDeclaration.Node} the import declaration node
+   */
+  const updatePackageName = (declaration) => {
+    // eslint-disable-next-line no-param-reassign
+    declaration.node.source.value = getNewPackageName(declaration.node.source.value);
+
+    return declaration.node;
+  };
+
+  return j(file.source)
+    .find(j.ImportDeclaration)
+    .replaceWith(updatePackageName)
+    .toSource({ quote: 'single' });
+}
+
+/**
+ * Takes the deprecated addon-info API, addWithInfo, and
+ * converts to the new withInfo API.
+ *
+ * Example of deprecated addWithInfo API:
+ *
+ * storiesOf('Button')
+ *   .addWithInfo(
+ *     'story name',
+ *     'Story description.',
+ *     () => (
+ *       <Button label="The Button" />
+ *     )
+ *   )
+ *
+ * Converts to the new withInfo API:
+ *
+ * storiesOf('Button')
+ *   .add('story name', withInfo(
+ *     'Story description.'
+ *   )(() => (
+ *     <Button label="The Button" />
+ *   )))
+ */
+function transformer(file, api) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+
+  /**
+   * Returns a list of parameters for the withInfo function. The contents
+   * of this list is either the second argument from the original
+   * addWithInfo function, if no additional options were used, or a
+   * combined object of all the options from the original function.
+   * @param {list} args - original addWithInfo function parameters
+   * @return {list} the modified list of parameters for the new function
+   */
+  const getOptions = (args) => {
+    if (args[3] === undefined) {
+      if (args[2] === undefined) {
+        // when the optional description string is not supplied for addWithInfo, use story name
+        return [args[0]];
+      }
+      return [args[1]];
+    }
+    return [
+      j.objectExpression([
+        j.property('init', j.identifier('text'), args[1]),
+        ...args[3].properties,
+      ]),
+    ];
+  };
+
+  /**
+   * Constructs the new withInfo function from the parameters of the
+   * original addWithInfo function.
+   * @param {CallExpression} addWithInfoExpression - original function
+   * @returns {CallExpression} the new withInfo function
+   */
+  const withInfo = (addWithInfoExpression) => {
+    const { node } = addWithInfoExpression;
+    const args = node.arguments;
+
+    // if optional description string is not supplied, the story component becomes second arg
+    const storyComponent = args[2] ? args[2] : args[1];
+
+    node.callee.property.name = 'add';
+    node.arguments = [
+      args[0],
+      j.callExpression(j.callExpression(j.identifier('withInfo'), getOptions(args)), [
+        storyComponent,
+      ]),
+    ];
+
+    return node;
+  };
+
+  /**
+   * Checks for - import { withInfo } from "@storybook/addon-info";
+   * Adds the import if necessary.
+   */
+  const checkWithInfoImport = () => {
+    const importExists = root
+      .find(j.ImportDeclaration)
+      .filter((imp) => imp.node.source.value === '@storybook/addon-info')
+      .size();
+
+    if (importExists) return;
+
+    root
+      .find(j.ImportDeclaration)
+      .at(-1)
+      .insertAfter(
+        j.importDeclaration(
+          [j.importSpecifier(j.identifier('withInfo'))],
+          j.literal('@storybook/addon-info')
+        )
+      );
+  };
+
+  const addWithInfoExpressions = root.find(j.CallExpression, {
+    callee: {
+      property: {
+        name: 'addWithInfo',
+      },
+    },
+  });
+
+  if (addWithInfoExpressions.size()) {
+    checkWithInfoImport();
+    addWithInfoExpressions.replaceWith(withInfo);
+  }
+
+  return root.toSource();
+}
+
+/* eslint import/prefer-default-export: "off" */
+
+const TRANSFORM_DIR = `${__dirname}/transforms`;
+
+function listCodemods() {
+  return fs
+    .readdirSync(TRANSFORM_DIR)
+    .filter((fname) => fname.endsWith('.js'))
+    .map((fname) => fname.slice(0, -3));
+}
+
+const renameAsync = promisify(fs.rename);
+
+async function renameFile(file, from, to, { logger }) {
+  const newFile = file.replace(from, to);
+  logger.log(`Rename: ${file} ${newFile}`);
+  return renameAsync(file, newFile);
+}
+
+async function runCodemod(codemod, { glob, logger, dryRun, rename, parser }) {
+  const codemods = listCodemods();
+  if (!codemods.includes(codemod)) {
+    throw new Error(`Unknown codemod ${codemod}. Run --list for options.`);
+  }
+
+  let renameParts = null;
+  if (rename) {
+    renameParts = rename.split(':');
+    if (renameParts.length !== 2) {
+      throw new Error(`Codemod rename: expected format "from:to", got "${rename}"`);
+    }
+  }
+
+  // jscodeshift/prettier know how to handle .ts/.tsx extensions,
+  // so if the user uses one of those globs, we can auto-infer
+  let inferredParser = parser;
+  if (!parser) {
+    const extension = path.extname(glob).slice(1);
+    const knownParser = jscodeshiftToPrettierParser(extension);
+    if (knownParser !== 'babel') inferredParser = extension;
+  }
+
+  const files = await globby([glob, '!**/node_modules', '!**/dist']);
+  logger.log(`=> Applying ${codemod}: ${files.length} files`);
+  if (!dryRun) {
+    const parserArgs = inferredParser ? ['--parser', inferredParser] : [];
+    sync(
+      'npx',
+      ['jscodeshift', '-t', `${TRANSFORM_DIR}/${codemod}.js`, ...parserArgs, ...files],
+      {
+        stdio: 'inherit',
+        shell: true,
+      }
+    );
+  }
+
+  if (renameParts) {
+    const [from, to] = renameParts;
+    logger.log(`=> Renaming ${rename}: ${files.length} files`);
+    await Promise.all(
+      files.map((file) => renameFile(file, new RegExp(`${from}$`), to, { logger }))
+    );
+  }
+}
+
+export { listCodemods, packageNames, runCodemod, transformer as updateAddonInfo, transformer$1 as updateOrganisationName };

package/dist/index.js

@@ -0,0 +1 @@
+var R=Object.create;var l=Object.defineProperty;var N=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var C=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var W=(o,r)=>{for(var t in r)l(o,t,{get:r[t],enumerable:!0})},h=(o,r,t,a)=>{if(r&&typeof r=="object"||typeof r=="function")for(let n of A(r))!S.call(o,n)&&n!==t&&l(o,n,{get:()=>r[n],enumerable:!(a=N(r,n))||a.enumerable});return o};var f=(o,r,t)=>(t=o!=null?R(C(o)):{},h(r||!o||!o.__esModule?l(t,"default",{value:o,enumerable:!0}):t,o)),_=o=>h(l({},"__esModule",{value:!0}),o);var z={};W(z,{listCodemods:()=>E,packageNames:()=>m,runCodemod:()=>q,updateAddonInfo:()=>b,updateOrganisationName:()=>y});module.exports=_(z);var u=f(require("fs")),x=f(require("path")),w=require("util"),$=f(require("globby")),I=require("cross-spawn");var v=f(require("lodash/camelCase")),D=f(require("lodash/upperFirst"));function g(o){let r={babylon:"babel",flow:"flow",ts:"typescript",tsx:"typescript"};return o&&r[o]||"babel"}var m={"@kadira/react-storybook-decorator-centered":"@storybook/addon-centered","@kadira/storybook-addons":"@storybook/addons","@kadira/storybook-addon-actions":"@storybook/addon-actions","@kadira/storybook-addon-comments":"@storybook/addon-comments","@kadira/storybook-addon-graphql":"@storybook/addon-graphql","@kadira/storybook-addon-info":"@storybook/addon-info","@kadira/storybook-addon-knobs":"@storybook/addon-knobs","@kadira/storybook-addon-links":"@storybook/addon-links","@kadira/storybook-addon-notes":"@storybook/addon-notes","@kadira/storybook-addon-options":"@storybook/addon-options","@kadira/storybook-channels":"@storybook/channels","@kadira/storybook-channel-postmsg":"@storybook/channel-postmessage","@kadira/storybook-channel-websocket":"@storybook/channel-websocket","@kadira/storybook-ui":"@storybook/ui","@kadira/react-native-storybook":"@storybook/react-native","@kadira/react-storybook":"@storybook/react","@kadira/getstorybook":"@storybook/cli","@kadira/storybook":"@storybook/react",storyshots:"@storybook/addon-storyshots",getstorybook:"@storybook/cli"};function y(o,r){let t=r.jscodeshift,a=Object.keys(m),n=s=>a.find(e=>s.match(e)),c=s=>{let e=n(s);if(e){let i=m[e];return s.replace(e,i)}return s},p=s=>(s.node.source.value=c(s.node.source.value),s.node);return t(o.source).find(t.ImportDeclaration).replaceWith(p).toSource({quote:"single"})}function b(o,r){let t=r.jscodeshift,a=t(o.source),n=e=>e[3]===void 0?e[2]===void 0?[e[0]]:[e[1]]:[t.objectExpression([t.property("init",t.identifier("text"),e[1]),...e[3].properties])],c=e=>{let{node:i}=e,d=i.arguments,k=d[2]?d[2]:d[1];return i.callee.property.name="add",i.arguments=[d[0],t.callExpression(t.callExpression(t.identifier("withInfo"),n(d)),[k])],i},p=()=>{a.find(t.ImportDeclaration).filter(i=>i.node.source.value==="@storybook/addon-info").size()||a.find(t.ImportDeclaration).at(-1).insertAfter(t.importDeclaration([t.importSpecifier(t.identifier("withInfo"))],t.literal("@storybook/addon-info")))},s=a.find(t.CallExpression,{callee:{property:{name:"addWithInfo"}}});return s.size()&&(p(),s.replaceWith(c)),a.toSource()}var j=`${__dirname}/transforms`;function E(){return u.default.readdirSync(j).filter(o=>o.endsWith(".js")).map(o=>o.slice(0,-3))}var F=(0,w.promisify)(u.default.rename);async function O(o,r,t,{logger:a}){let n=o.replace(r,t);return a.log(`Rename: ${o} ${n}`),F(o,n)}async function q(o,{glob:r,logger:t,dryRun:a,rename:n,parser:c}){if(!E().includes(o))throw new Error(`Unknown codemod ${o}. Run --list for options.`);let s=null;if(n&&(s=n.split(":"),s.length!==2))throw new Error(`Codemod rename: expected format "from:to", got "${n}"`);let e=c;if(!c){let d=x.default.extname(r).slice(1);g(d)!=="babel"&&(e=d)}let i=await(0,$.default)([r,"!**/node_modules","!**/dist"]);if(t.log(`=> Applying ${o}: ${i.length} files`),!a){let d=e?["--parser",e]:[];(0,I.sync)("npx",["jscodeshift","-t",`${j}/${o}.js`,...d,...i],{stdio:"inherit",shell:!0})}if(s){let[d,k]=s;t.log(`=> Renaming ${n}: ${i.length} files`),await Promise.all(i.map(P=>O(P,new RegExp(`${d}$`),k,{logger:t})))}}0&&(module.exports={listCodemods,packageNames,runCodemod,updateAddonInfo,updateOrganisationName});

package/dist/index.mjs

@@ -0,0 +1 @@
+import u from"fs";import x from"path";import{promisify as w}from"util";import $ from"globby";import{sync as I}from"cross-spawn";import N from"lodash/camelCase";import C from"lodash/upperFirst";function m(t){let i={babylon:"babel",flow:"flow",ts:"typescript",tsx:"typescript"};return t&&i[t]||"babel"}var l={"@kadira/react-storybook-decorator-centered":"@storybook/addon-centered","@kadira/storybook-addons":"@storybook/addons","@kadira/storybook-addon-actions":"@storybook/addon-actions","@kadira/storybook-addon-comments":"@storybook/addon-comments","@kadira/storybook-addon-graphql":"@storybook/addon-graphql","@kadira/storybook-addon-info":"@storybook/addon-info","@kadira/storybook-addon-knobs":"@storybook/addon-knobs","@kadira/storybook-addon-links":"@storybook/addon-links","@kadira/storybook-addon-notes":"@storybook/addon-notes","@kadira/storybook-addon-options":"@storybook/addon-options","@kadira/storybook-channels":"@storybook/channels","@kadira/storybook-channel-postmsg":"@storybook/channel-postmessage","@kadira/storybook-channel-websocket":"@storybook/channel-websocket","@kadira/storybook-ui":"@storybook/ui","@kadira/react-native-storybook":"@storybook/react-native","@kadira/react-storybook":"@storybook/react","@kadira/getstorybook":"@storybook/cli","@kadira/storybook":"@storybook/react",storyshots:"@storybook/addon-storyshots",getstorybook:"@storybook/cli"};function y(t,i){let o=i.jscodeshift,d=Object.keys(l),a=e=>d.find(r=>e.match(r)),c=e=>{let r=a(e);if(r){let n=l[r];return e.replace(r,n)}return e},f=e=>(e.node.source.value=c(e.node.source.value),e.node);return o(t.source).find(o.ImportDeclaration).replaceWith(f).toSource({quote:"single"})}function b(t,i){let o=i.jscodeshift,d=o(t.source),a=r=>r[3]===void 0?r[2]===void 0?[r[0]]:[r[1]]:[o.objectExpression([o.property("init",o.identifier("text"),r[1]),...r[3].properties])],c=r=>{let{node:n}=r,s=n.arguments,p=s[2]?s[2]:s[1];return n.callee.property.name="add",n.arguments=[s[0],o.callExpression(o.callExpression(o.identifier("withInfo"),a(s)),[p])],n},f=()=>{d.find(o.ImportDeclaration).filter(n=>n.node.source.value==="@storybook/addon-info").size()||d.find(o.ImportDeclaration).at(-1).insertAfter(o.importDeclaration([o.importSpecifier(o.identifier("withInfo"))],o.literal("@storybook/addon-info")))},e=d.find(o.CallExpression,{callee:{property:{name:"addWithInfo"}}});return e.size()&&(f(),e.replaceWith(c)),d.toSource()}var h=`${__dirname}/transforms`;function j(){return u.readdirSync(h).filter(t=>t.endsWith(".js")).map(t=>t.slice(0,-3))}var E=w(u.rename);async function P(t,i,o,{logger:d}){let a=t.replace(i,o);return d.log(`Rename: ${t} ${a}`),E(t,a)}async function M(t,{glob:i,logger:o,dryRun:d,rename:a,parser:c}){if(!j().includes(t))throw new Error(`Unknown codemod ${t}. Run --list for options.`);let e=null;if(a&&(e=a.split(":"),e.length!==2))throw new Error(`Codemod rename: expected format "from:to", got "${a}"`);let r=c;if(!c){let s=x.extname(i).slice(1);m(s)!=="babel"&&(r=s)}let n=await $([i,"!**/node_modules","!**/dist"]);if(o.log(`=> Applying ${t}: ${n.length} files`),!d){let s=r?["--parser",r]:[];I("npx",["jscodeshift","-t",`${h}/${t}.js`,...s,...n],{stdio:"inherit",shell:!0})}if(e){let[s,p]=e;o.log(`=> Renaming ${a}: ${n.length} files`),await Promise.all(n.map(g=>P(g,new RegExp(`${s}$`),p,{logger:o})))}}export{j as listCodemods,l as packageNames,M as runCodemod,b as updateAddonInfo,y as updateOrganisationName};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/codemod",
-  "version": "7.0.0-alpha.37",
+  "version": "7.0.0-alpha.39",
   "description": "A collection of codemod scripts written with JSCodeshift",
   "keywords": [
     "storybook"
@@ -20,32 +20,35 @@
   },
   "license": "MIT",
   "sideEffects": false,
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
   "jsnext:main": "src/index.js",
-  "files": [
-    "dist/**/*",
-    "README.md",
-    "*.js",
-    "*.d.ts",
-    "!__testfixtures__"
-  ],
+  "types": "dist/index.d.ts",
   "scripts": {
     "check": "../../../scripts/node_modules/.bin/tsc --noEmit",
-    "prep": "node ../../../scripts/prepare.js"
+    "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
     "@babel/types": "^7.12.11",
     "@mdx-js/mdx": "^1.6.22",
     "@storybook/csf": "0.0.2--canary.49.258942b.0",
-    "@storybook/csf-tools": "7.0.0-alpha.37",
-    "@storybook/node-logger": "7.0.0-alpha.37",
+    "@storybook/csf-tools": "7.0.0-alpha.39",
+    "@storybook/node-logger": "7.0.0-alpha.39",
     "cross-spawn": "^7.0.3",
     "globby": "^11.0.2",
     "jscodeshift": "^0.13.1",
     "lodash": "^4.17.21",
     "prettier": ">=2.2.1 <=2.3.0",
-    "recast": "^0.19.0"
+    "recast": "^0.19.0",
+    "util": "^0.12.4"
   },
   "devDependencies": {
     "jest": "^26.6.3",
@@ -55,5 +58,11 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "82667a655108283aafc828427f00bb3590a334e5"
+  "bundler": {
+    "platform": "node",
+    "entries": [
+      "./src/index.js"
+    ]
+  },
+  "gitHead": "47386bd49d141ea70daac41ab3e4d52749fc5da9"
 }

package/src/index.js

@@ -0,0 +1,77 @@
+/* eslint import/prefer-default-export: "off" */
+import fs from 'fs';
+import path from 'path';
+import { promisify } from 'util';
+import globby from 'globby';
+import { sync as spawnSync } from 'cross-spawn';
+import { jscodeshiftToPrettierParser } from './lib/utils';
+
+export {
+  default as updateOrganisationName,
+  packageNames,
+} from './transforms/update-organisation-name';
+
+export { default as updateAddonInfo } from './transforms/update-addon-info';
+
+const TRANSFORM_DIR = `${__dirname}/transforms`;
+
+export function listCodemods() {
+  return fs
+    .readdirSync(TRANSFORM_DIR)
+    .filter((fname) => fname.endsWith('.js'))
+    .map((fname) => fname.slice(0, -3));
+}
+
+const renameAsync = promisify(fs.rename);
+
+async function renameFile(file, from, to, { logger }) {
+  const newFile = file.replace(from, to);
+  logger.log(`Rename: ${file} ${newFile}`);
+  return renameAsync(file, newFile);
+}
+
+export async function runCodemod(codemod, { glob, logger, dryRun, rename, parser }) {
+  const codemods = listCodemods();
+  if (!codemods.includes(codemod)) {
+    throw new Error(`Unknown codemod ${codemod}. Run --list for options.`);
+  }
+
+  let renameParts = null;
+  if (rename) {
+    renameParts = rename.split(':');
+    if (renameParts.length !== 2) {
+      throw new Error(`Codemod rename: expected format "from:to", got "${rename}"`);
+    }
+  }
+
+  // jscodeshift/prettier know how to handle .ts/.tsx extensions,
+  // so if the user uses one of those globs, we can auto-infer
+  let inferredParser = parser;
+  if (!parser) {
+    const extension = path.extname(glob).slice(1);
+    const knownParser = jscodeshiftToPrettierParser(extension);
+    if (knownParser !== 'babel') inferredParser = extension;
+  }
+
+  const files = await globby([glob, '!**/node_modules', '!**/dist']);
+  logger.log(`=> Applying ${codemod}: ${files.length} files`);
+  if (!dryRun) {
+    const parserArgs = inferredParser ? ['--parser', inferredParser] : [];
+    spawnSync(
+      'npx',
+      ['jscodeshift', '-t', `${TRANSFORM_DIR}/${codemod}.js`, ...parserArgs, ...files],
+      {
+        stdio: 'inherit',
+        shell: true,
+      }
+    );
+  }
+
+  if (renameParts) {
+    const [from, to] = renameParts;
+    logger.log(`=> Renaming ${rename}: ${files.length} files`);
+    await Promise.all(
+      files.map((file) => renameFile(file, new RegExp(`${from}$`), to, { logger }))
+    );
+  }
+}

package/src/lib/utils.test.js

@@ -0,0 +1,9 @@
+import { sanitizeName } from './utils';
+
+it('should sanitize names', () => {
+  expect(sanitizeName('basic')).toMatchInlineSnapshot(`"Basic"`);
+  expect(sanitizeName('with space')).toMatchInlineSnapshot(`"WithSpace"`);
+  expect(sanitizeName('default')).toMatchInlineSnapshot(`"Default"`);
+  expect(sanitizeName('w/punctuation')).toMatchInlineSnapshot(`"WPunctuation"`);
+  expect(sanitizeName('5')).toMatchInlineSnapshot(`"_5"`);
+});

package/{dist/esm/lib/utils.js → src/lib/utils.ts}

@@ -1,30 +1,29 @@
 import camelCase from 'lodash/camelCase';
 import upperFirst from 'lodash/upperFirst';
-export var sanitizeName = function (name) {
-  var key = upperFirst(camelCase(name)); // prepend _ if name starts with a digit
 
+export const sanitizeName = (name: string) => {
+  let key = upperFirst(camelCase(name));
+  // prepend _ if name starts with a digit
   if (/^\d/.test(key)) {
     key = `_${key}`;
-  } // prepend _ if name starts with a digit
-
-
+  }
+  // prepend _ if name starts with a digit
   if (/^\d/.test(key)) {
     key = `_${key}`;
   }
-
   return key;
 };
-export function jscodeshiftToPrettierParser(parser) {
-  var parserMap = {
+
+export function jscodeshiftToPrettierParser(parser?: string) {
+  const parserMap: Record<string, string> = {
     babylon: 'babel',
     flow: 'flow',
     ts: 'typescript',
-    tsx: 'typescript'
+    tsx: 'typescript',
   };
 
   if (!parser) {
     return 'babel';
   }
-
   return parserMap[parser] || 'babel';
-}
+}

package/src/transforms/__testfixtures__/add-component-parameters/add-component-parameters.input.js

@@ -0,0 +1,44 @@
+/* eslint-disable */
+import React from 'react';
+import Button from './Button';
+
+import { storiesOf, configure } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+storiesOf('Button', module).add('basic', () => <Button label="The Button" />);
+
+storiesOf('Button').add('no module', () => <Button label="The Button" />);
+
+storiesOf('Button', module).add('with story parameters', () => <Button label="The Button" />, {
+  header: false,
+  inline: true,
+});
+
+storiesOf('Button', module)
+  .addParameters({ foo: 1 })
+  .add('with kind parameters', () => <Button label="The Button" />);
+
+storiesOf('Button', module)
+  .addParameters({ component: Button })
+  .add('with existing component parameters', () => <Button label="The Button" />);
+
+storiesOf('Button', module).add('complex story', () => (
+  <div>
+    <Button label="The Button" onClick={action('onClick')} />
+    <br />
+  </div>
+));
+
+storiesOf('Root|Some/Button', module).add('with path', () => <Button label="The Button" />);
+
+storiesOf('Some.Button', module).add('with dot-path', () => <Button label="The Button" />);
+
+storiesOf('Some.Button', module)
+  .addDecorator(withKnobs)
+  .add('with decorator', () => <Button label="The Button" />);
+
+// This isn't a valid story, but it tests the `import { comp } from ...` case
+storiesOf('action', module).add('non-default component export', () => <action />);
+
+// This shouldn't get modified since the story name doesn't match
+storiesOf('something', module).add('non-matching story', () => <Button label="The Button" />);

package/src/transforms/__testfixtures__/add-component-parameters/add-component-parameters.output.snapshot

@@ -0,0 +1,68 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`add-component-parameters transforms correctly using "add-component-parameters.input.js" data 1`] = `
+"/* eslint-disable */
+import React from 'react';
+import Button from './Button';
+
+import { storiesOf, configure } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+storiesOf('Button', module).addParameters({
+  component: Button
+}).add('basic', () => <Button label=\\"The Button\\" />);
+
+storiesOf('Button').addParameters({
+  component: Button
+}).add('no module', () => <Button label=\\"The Button\\" />);
+
+storiesOf('Button', module).addParameters({
+  component: Button
+}).add('with story parameters', () => <Button label=\\"The Button\\" />, {
+  header: false,
+  inline: true,
+});
+
+storiesOf('Button', module).addParameters({
+  component: Button
+})
+  .addParameters({ foo: 1 })
+  .add('with kind parameters', () => <Button label=\\"The Button\\" />);
+
+storiesOf('Button', module).addParameters({
+  component: Button
+})
+  .addParameters({ component: Button })
+  .add('with existing component parameters', () => <Button label=\\"The Button\\" />);
+
+storiesOf('Button', module).addParameters({
+  component: Button
+}).add('complex story', () => (
+  <div>
+    <Button label=\\"The Button\\" onClick={action('onClick')} />
+    <br />
+  </div>
+));
+
+storiesOf('Root|Some/Button', module).addParameters({
+  component: Button
+}).add('with path', () => <Button label=\\"The Button\\" />);
+
+storiesOf('Some.Button', module).addParameters({
+  component: Button
+}).add('with dot-path', () => <Button label=\\"The Button\\" />);
+
+storiesOf('Some.Button', module).addParameters({
+  component: Button
+})
+  .addDecorator(withKnobs)
+  .add('with decorator', () => <Button label=\\"The Button\\" />);
+
+// This isn't a valid story, but it tests the \`import { comp } from ...\` case
+storiesOf('action', module).addParameters({
+  component: action
+}).add('non-default component export', () => <action />);
+
+// This shouldn't get modified since the story name doesn't match
+storiesOf('something', module).add('non-matching story', () => <Button label=\\"The Button\\" />);"
+`;

package/src/transforms/__testfixtures__/csf-hoist-story-annotations/basic.input.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import Button from './Button';
+import { action } from '@storybook/addon-actions';
+
+export default {
+  title: 'Button',
+};
+
+export const story1 = () => <Button label="Story 1" />;
+
+export const story2 = () => <Button label="Story 2" onClick={action('click')} />;
+story2.story = { name: 'second story' };
+
+export const story3 = () => (
+  <div>
+    <Button label="The Button" onClick={action('onClick')} />
+    <br />
+  </div>
+);
+const baz = 17;
+story3.story = {
+  name: 'complex story',
+  parameters: { foo: { bar: baz } },
+  decorators: [(storyFn) => <bar>{storyFn}</bar>],
+};

package/src/transforms/__testfixtures__/csf-hoist-story-annotations/basic.output.snapshot

@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`csf-hoist-story-annotations transforms correctly using "basic.input.js" data 1`] = `
+"import React from 'react';
+import Button from './Button';
+import { action } from '@storybook/addon-actions';
+
+export default {
+  title: 'Button',
+};
+
+export const story1 = () => <Button label=\\"Story 1\\" />;
+
+export const story2 = () => <Button label=\\"Story 2\\" onClick={action('click')} />;
+story2.storyName = 'second story';
+
+export const story3 = () => (
+  <div>
+    <Button label=\\"The Button\\" onClick={action('onClick')} />
+    <br />
+  </div>
+);
+const baz = 17;
+story3.storyName = 'complex story';
+story3.parameters = { foo: { bar: baz } };
+story3.decorators = [(storyFn) => <bar>{storyFn}</bar>];"
+`;

package/src/transforms/__testfixtures__/csf-hoist-story-annotations/overrides.input.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import Button from './Button';
+import { action } from '@storybook/addon-actions';
+
+export default {
+  title: 'Button',
+};
+
+export const story1 = () => <Button label="Story 1" />;
+
+export const story2 = () => <Button label="Story 2" onClick={action('click')} />;
+story2.story = { name: 'second story' };
+story2.story.parameters = { foo: 'bar' };
+
+export const story3 = () => (
+  <div>
+    <Button label="The Button" onClick={action('onClick')} />
+    <br />
+  </div>
+);
+const baz = 17;
+story3.story = {};
+story3.story.name = 'complex story';
+story3.story.parameters = { foo: { bar: baz } };
+story3.story.decorators = [(storyFn) => <bar>{storyFn}</bar>];