@storybook/codemod 7.0.0-alpha.8 → 7.0.0-beta.1

package/README.md

@@ -240,42 +240,6 @@ import { Meta, Story } from '@storybook/addon-docs';
 </Story>
 ```
 
-### mdx-to-csf
-
-This converts all your MDX stories into Component Story Format.
-
-```sh
-./node_modules/.bin/jscodeshift -t ./node_modules/@storybook/codemod/dist/transforms/mdx-to-csf.js . --ignore-pattern "node_modules|dist" --extensions=mdx
-```
-
-For example:
-
-```js
-import React from 'react';
-import Button from './Button';
-import { Meta, Story } from '@storybook/addon-docs';
-
-<Meta title='Button' />
-
-<Story name='basic stories'><Button label='The Button' /></Story>
-```
-
-Becomes:
-
-```js
-import React from 'react';
-import Button from './Button';
-
-export default {
-  title: 'Button',
-};
-
-export const basicStory = () => <Button label="The Button" />;
-basicStory.story = {
-  name: 'basic stories',
-};
-```
-
 ### upgrade-hierarchy-separators
 
 Starting in 5.3, Storybook is moving to using a single path separator, `/`, to specify the story hierarchy. It previously defaulted to `|` for story "roots" (optional) and either `/` or `.` for denoting paths. This codemod updates the old default to the new default.

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/preview-api',
+  '@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/manager',
+  '@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 v=Object.getOwnPropertyNames;var A=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var S=(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 v(r))!C.call(o,n)&&n!==t&&l(o,n,{get:()=>r[n],enumerable:!(a=N(r,n))||a.enumerable});return o};var p=(o,r,t)=>(t=o!=null?R(A(o)):{},h(r||!o||!o.__esModule?l(t,"default",{value:o,enumerable:!0}):t,o)),W=o=>h(l({},"__esModule",{value:!0}),o);var z={};S(z,{listCodemods:()=>E,packageNames:()=>m,runCodemod:()=>q,updateAddonInfo:()=>b,updateOrganisationName:()=>y});module.exports=W(z);var u=p(require("fs")),x=p(require("path")),w=require("util"),$=p(require("globby")),I=require("cross-spawn");var _=p(require("lodash/camelCase")),D=p(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/preview-api","@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/manager","@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},f=s=>(s.node.source.value=c(s.node.source.value),s.node);return t(o.source).find(t.ImportDeclaration).replaceWith(f).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},f=()=>{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()&&(f(),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 fs from"fs";import path from"path";import{promisify}from"util";import globby from"globby";import{sync as spawnSync}from"cross-spawn";import camelCase from"lodash/camelCase";import upperFirst from"lodash/upperFirst";function jscodeshiftToPrettierParser(parser){let parserMap={babylon:"babel",flow:"flow",ts:"typescript",tsx:"typescript"};return parser&&parserMap[parser]||"babel"}var packageNames={"@kadira/react-storybook-decorator-centered":"@storybook/addon-centered","@kadira/storybook-addons":"@storybook/preview-api","@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/manager","@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(file,api){let j=api.jscodeshift,packageNamesKeys=Object.keys(packageNames),getMatch=oldpart=>packageNamesKeys.find(newpart=>oldpart.match(newpart)),getNewPackageName=oldPackageName=>{let match=getMatch(oldPackageName);if(match){let replacement=packageNames[match];return oldPackageName.replace(match,replacement)}return oldPackageName},updatePackageName=declaration=>(declaration.node.source.value=getNewPackageName(declaration.node.source.value),declaration.node);return j(file.source).find(j.ImportDeclaration).replaceWith(updatePackageName).toSource({quote:"single"})}function transformer2(file,api){let j=api.jscodeshift,root=j(file.source),getOptions=args=>args[3]===void 0?args[2]===void 0?[args[0]]:[args[1]]:[j.objectExpression([j.property("init",j.identifier("text"),args[1]),...args[3].properties])],withInfo=addWithInfoExpression=>{let{node}=addWithInfoExpression,args=node.arguments,storyComponent=args[2]?args[2]:args[1];return node.callee.property.name="add",node.arguments=[args[0],j.callExpression(j.callExpression(j.identifier("withInfo"),getOptions(args)),[storyComponent])],node},checkWithInfoImport=()=>{root.find(j.ImportDeclaration).filter(imp=>imp.node.source.value==="@storybook/addon-info").size()||root.find(j.ImportDeclaration).at(-1).insertAfter(j.importDeclaration([j.importSpecifier(j.identifier("withInfo"))],j.literal("@storybook/addon-info")))},addWithInfoExpressions=root.find(j.CallExpression,{callee:{property:{name:"addWithInfo"}}});return addWithInfoExpressions.size()&&(checkWithInfoImport(),addWithInfoExpressions.replaceWith(withInfo)),root.toSource()}var TRANSFORM_DIR=`${__dirname}/transforms`;function listCodemods(){return fs.readdirSync(TRANSFORM_DIR).filter(fname=>fname.endsWith(".js")).map(fname=>fname.slice(0,-3))}var renameAsync=promisify(fs.rename);async function renameFile(file,from,to,{logger}){let newFile=file.replace(from,to);return logger.log(`Rename: ${file} ${newFile}`),renameAsync(file,newFile)}async function runCodemod(codemod,{glob,logger,dryRun,rename,parser}){if(!listCodemods().includes(codemod))throw new Error(`Unknown codemod ${codemod}. Run --list for options.`);let renameParts=null;if(rename&&(renameParts=rename.split(":"),renameParts.length!==2))throw new Error(`Codemod rename: expected format "from:to", got "${rename}"`);let inferredParser=parser;if(!parser){let extension=path.extname(glob).slice(1);jscodeshiftToPrettierParser(extension)!=="babel"&&(inferredParser=extension)}let files=await globby([glob,"!**/node_modules","!**/dist"]);if(logger.log(`=> Applying ${codemod}: ${files.length} files`),!dryRun){let parserArgs=inferredParser?["--parser",inferredParser]:[];spawnSync("npx",["jscodeshift","-t",`${TRANSFORM_DIR}/${codemod}.js`,...parserArgs,...files],{stdio:"inherit",shell:!0})}if(renameParts){let[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,transformer2 as updateAddonInfo,transformer as updateOrganisationName};

package/jest.config.js

@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.node');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/codemod",
-  "version": "7.0.0-alpha.8",
+  "version": "7.0.0-beta.1",
   "description": "A collection of codemod scripts written with JSCodeshift",
   "keywords": [
     "storybook"
@@ -20,46 +20,49 @@
   },
   "license": "MIT",
   "sideEffects": false,
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "jsnext:main": "src/index.js",
-  "typesVersions": {
-    "<3.8": {
-      "*": [
-        "ts3.4/*"
-      ]
-    }
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./package.json": "./package.json"
   },
-  "files": [
-    "dist/**/*",
-    "README.md",
-    "*.js",
-    "*.d.ts",
-    "!__testfixtures__"
-  ],
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "jsnext:main": "src/index.js",
+  "types": "dist/index.d.ts",
   "scripts": {
-    "prepare": "node ../../scripts/prepare.js"
+    "check": "../../../scripts/node_modules/.bin/tsc --noEmit",
+    "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@babel/types": "^7.12.11",
-    "@mdx-js/mdx": "^1.6.22",
-    "@storybook/csf": "0.0.2--canary.4566f4d.1",
-    "@storybook/csf-tools": "7.0.0-alpha.8",
-    "@storybook/node-logger": "7.0.0-alpha.8",
-    "core-js": "^3.8.2",
+    "@babel/types": "^7.20.2",
+    "@storybook/csf": "next",
+    "@storybook/csf-tools": "7.0.0-beta.1",
+    "@storybook/node-logger": "7.0.0-beta.1",
+    "@storybook/types": "7.0.0-beta.1",
     "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"
+    "prettier": "^2.8.0",
+    "recast": "^0.19.0",
+    "util": "^0.12.4"
   },
   "devDependencies": {
-    "jest": "^26.6.3",
-    "jest-specific-snapshot": "^4.0.0"
+    "jest": "^29.3.1",
+    "jest-specific-snapshot": "^7.0.0",
+    "typescript": "~4.9.3"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "24725501c32a073cebc6bf2674a47357136fbe3a"
+  "bundler": {
+    "platform": "node",
+    "entries": [
+      "./src/index.js"
+    ]
+  },
+  "gitHead": "42c08678ac06d9c2c8e7a4c31a91e0a14bf5c2cd"
 }

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\\" />);"
+`;