@storybook/codemod 6.4.0-beta.24 → 6.4.0-beta.25

package/dist/esm/transforms/storiesof-to-csf.js

@@ -0,0 +1,287 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+import prettier from 'prettier';
+import { logger } from '@storybook/node-logger';
+import { storyNameFromExport } from '@storybook/csf';
+import { sanitizeName, jscodeshiftToPrettierParser } from '../lib/utils';
+/**
+ * Convert a legacy story API to component story format
+ *
+ * For example:
+ *
+ * ```
+ * input { Button } from './Button';
+ * storiesOf('Button', module).add('story', () => <Button label="The Button" />);
+ * ```
+ *
+ * Becomes:
+ *
+ * ```
+ * input { Button } from './Button';
+ * export default {
+ *   title: 'Button'
+ * }
+ * export const story = () => <Button label="The Button" />;
+ *
+ * NOTES: only support chained storiesOf() calls
+ */
+
+export default function transformer(file, api, options) {
+  var LITERAL = ['ts', 'tsx'].includes(options.parser) ? 'StringLiteral' : 'Literal';
+  var j = api.jscodeshift;
+  var root = j(file.source);
+
+  function extractDecorators(parameters) {
+    if (!parameters) {
+      return {};
+    }
+
+    if (!parameters.properties) {
+      return {
+        storyParams: parameters
+      };
+    }
+
+    var storyDecorators = parameters.properties.find(function (p) {
+      return p.key.name === 'decorators';
+    });
+
+    if (!storyDecorators) {
+      return {
+        storyParams: parameters
+      };
+    }
+
+    storyDecorators = storyDecorators.value;
+
+    var storyParams = _objectSpread({}, parameters);
+
+    storyParams.properties = storyParams.properties.filter(function (p) {
+      return p.key.name !== 'decorators';
+    });
+
+    if (storyParams.properties.length === 0) {
+      return {
+        storyDecorators: storyDecorators
+      };
+    }
+
+    return {
+      storyParams: storyParams,
+      storyDecorators: storyDecorators
+    };
+  }
+
+  function convertToModuleExports(path, originalExports) {
+    var base = j(path);
+    var statements = [];
+    var extraExports = []; // .addDecorator
+
+    var decorators = [];
+    base.find(j.CallExpression).filter(function (call) {
+      return call.node.callee.property && call.node.callee.property.name === 'addDecorator';
+    }).forEach(function (add) {
+      var decorator = add.node.arguments[0];
+      decorators.push(decorator);
+    });
+
+    if (decorators.length > 0) {
+      decorators.reverse();
+      extraExports.push(j.property('init', j.identifier('decorators'), j.arrayExpression(decorators)));
+    } // .addParameters
+
+
+    var parameters = [];
+    base.find(j.CallExpression).filter(function (call) {
+      return call.node.callee.property && call.node.callee.property.name === 'addParameters';
+    }).forEach(function (add) {
+      // jscodeshift gives us the find results in reverse, but these args come in
+      // order, so we double reverse here. ugh.
+      var params = [...add.node.arguments[0].properties];
+      params.reverse();
+      params.forEach(function (prop) {
+        return parameters.push(prop);
+      });
+    });
+
+    if (parameters.length > 0) {
+      parameters.reverse();
+      extraExports.push(j.property('init', j.identifier('parameters'), j.objectExpression(parameters)));
+    }
+
+    if (originalExports.length > 0) {
+      extraExports.push(j.property('init', j.identifier('excludeStories'), j.arrayExpression(originalExports.map(function (exp) {
+        return j.literal(exp);
+      }))));
+    } // storiesOf(...)
+
+
+    base.find(j.CallExpression).filter(function (call) {
+      return call.node.callee.name === 'storiesOf';
+    }).filter(function (call) {
+      return call.node.arguments.length > 0 && call.node.arguments[0].type === LITERAL;
+    }).forEach(function (storiesOf) {
+      var title = storiesOf.node.arguments[0].value;
+      statements.push(j.exportDefaultDeclaration(j.objectExpression([j.property('init', j.identifier('title'), j.literal(title)), ...extraExports])));
+    }); // .add(...)
+
+    var adds = [];
+    base.find(j.CallExpression).filter(function (add) {
+      return add.node.callee.property && add.node.callee.property.name === 'add';
+    }).filter(function (add) {
+      return add.node.arguments.length >= 2 && add.node.arguments[0].type === LITERAL;
+    }).forEach(function (add) {
+      return adds.push(add);
+    });
+    adds.reverse();
+    adds.push(path);
+    var identifiers = new Set();
+    root.find(j.Identifier).forEach(function ({
+      value: value
+    }) {
+      return identifiers.add(value.name);
+    });
+    adds.forEach(function (add) {
+      var name = add.node.arguments[0].value;
+      var key = sanitizeName(name);
+
+      while (identifiers.has(key)) {
+        key = `_${key}`;
+      }
+
+      identifiers.add(key);
+
+      if (storyNameFromExport(key) === name) {
+        name = null;
+      }
+
+      var val = add.node.arguments[1];
+      statements.push(j.exportDeclaration(false, j.variableDeclaration('const', [j.variableDeclarator(j.identifier(key), val)])));
+      var storyAnnotations = [];
+
+      if (name) {
+        storyAnnotations.push(j.property('init', j.identifier('name'), j.literal(name)));
+      }
+
+      if (add.node.arguments.length > 2) {
+        var originalStoryParams = add.node.arguments[2];
+
+        var _extractDecorators = extractDecorators(originalStoryParams),
+            storyParams = _extractDecorators.storyParams,
+            storyDecorators = _extractDecorators.storyDecorators;
+
+        if (storyParams) {
+          storyAnnotations.push(j.property('init', j.identifier('parameters'), storyParams));
+        }
+
+        if (storyDecorators) {
+          storyAnnotations.push(j.property('init', j.identifier('decorators'), storyDecorators));
+        }
+      }
+
+      if (storyAnnotations.length > 0) {
+        statements.push(j.assignmentStatement('=', j.memberExpression(j.identifier(key), j.identifier('story')), j.objectExpression(storyAnnotations)));
+      }
+    });
+    var stmt = path.parent.node.type === 'VariableDeclarator' ? path.parent.parent : path.parent;
+    statements.reverse();
+    statements.forEach(function (s) {
+      return stmt.insertAfter(s);
+    });
+    j(stmt).remove();
+  } // Save the original storiesOf
+
+
+  var initialStoriesOf = root.find(j.CallExpression).filter(function (call) {
+    return call.node.callee.name === 'storiesOf';
+  });
+  var defaultExports = root.find(j.ExportDefaultDeclaration); // If there's already a default export
+
+  if (defaultExports.size() > 0) {
+    if (initialStoriesOf.size() > 0) {
+      logger.warn(`Found ${initialStoriesOf.size()} 'storiesOf' calls but existing default export, SKIPPING: '${file.path}'`);
+    }
+
+    return root.toSource();
+  } // Exclude all the original named exports
+
+
+  var originalExports = [];
+  root.find(j.ExportNamedDeclaration).forEach(function (exp) {
+    var _exp$node = exp.node,
+        declaration = _exp$node.declaration,
+        specifiers = _exp$node.specifiers;
+
+    if (declaration) {
+      var id = declaration.id,
+          declarations = declaration.declarations;
+
+      if (declarations) {
+        declarations.forEach(function (decl) {
+          var _decl$id = decl.id,
+              name = _decl$id.name,
+              properties = _decl$id.properties;
+
+          if (name) {
+            originalExports.push(name);
+          } else if (properties) {
+            properties.forEach(function (prop) {
+              return originalExports.push(prop.key.name);
+            });
+          }
+        });
+      } else if (id) {
+        originalExports.push(id.name);
+      }
+    } else if (specifiers) {
+      specifiers.forEach(function (spec) {
+        return originalExports.push(spec.exported.name);
+      });
+    }
+  }); // each top-level add expression corresponds to the last "add" of the chain.
+  // replace it with the entire export statements
+
+  root.find(j.CallExpression).filter(function (add) {
+    return add.node.callee.property && add.node.callee.property.name === 'add';
+  }).filter(function (add) {
+    return add.node.arguments.length >= 2 && add.node.arguments[0].type === LITERAL;
+  }).filter(function (add) {
+    return ['ExpressionStatement', 'VariableDeclarator'].includes(add.parentPath.node.type);
+  }).forEach(function (path) {
+    return convertToModuleExports(path, originalExports);
+  }); // remove storiesOf import
+
+  root.find(j.ImportSpecifier).filter(function (spec) {
+    return spec.node.imported.name === 'storiesOf' && spec.parent.node.source.value.startsWith('@storybook/');
+  }).forEach(function (spec) {
+    var toRemove = spec.parent.node.specifiers.length > 1 ? spec : spec.parent;
+    j(toRemove).remove();
+  });
+  var source = root.toSource({
+    trailingComma: true,
+    quote: 'single',
+    tabWidth: 2
+  });
+
+  if (initialStoriesOf.size() > 1) {
+    logger.warn(`Found ${initialStoriesOf.size()} 'storiesOf' calls, PLEASE FIX BY HAND: '${file.path}'`);
+    return source;
+  }
+
+  var prettierConfig = prettier.resolveConfig.sync('.', {
+    editorconfig: true
+  }) || {
+    printWidth: 100,
+    tabWidth: 2,
+    bracketSpacing: true,
+    trailingComma: 'es5',
+    singleQuote: true
+  };
+  return prettier.format(source, _objectSpread(_objectSpread({}, prettierConfig), {}, {
+    parser: jscodeshiftToPrettierParser(options.parser) || 'babel'
+  }));
+}

package/dist/esm/transforms/update-addon-info.js

@@ -0,0 +1,94 @@
+/**
+ * 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" />
+ *   )))
+ */
+export default function transformer(file, api) {
+  var j = api.jscodeshift;
+  var 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
+   */
+
+  var getOptions = function (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
+   */
+
+
+  var withInfo = function (addWithInfoExpression) {
+    var node = addWithInfoExpression.node;
+    var args = node.arguments; // if optional description string is not supplied, the story component becomes second arg
+
+    var 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.
+   */
+
+
+  var checkWithInfoImport = function () {
+    var importExists = root.find(j.ImportDeclaration).filter(function (imp) {
+      return 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')));
+  };
+
+  var addWithInfoExpressions = root.find(j.CallExpression, {
+    callee: {
+      property: {
+        name: 'addWithInfo'
+      }
+    }
+  });
+
+  if (addWithInfoExpressions.size()) {
+    checkWithInfoImport();
+    addWithInfoExpressions.replaceWith(withInfo);
+  }
+
+  return root.toSource();
+}

package/dist/esm/transforms/update-organisation-name.js

@@ -0,0 +1,74 @@
+export var 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'
+};
+export default function transformer(file, api) {
+  var j = api.jscodeshift;
+  var 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
+   */
+
+  var getMatch = function (oldpart) {
+    return packageNamesKeys.find(function (newpart) {
+      return 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')
+   */
+
+
+  var getNewPackageName = function (oldPackageName) {
+    var match = getMatch(oldPackageName);
+
+    if (match) {
+      var 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
+   */
+
+
+  var updatePackageName = function (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'
+  });
+}

package/dist/esm/transforms/upgrade-hierarchy-separators.js

@@ -0,0 +1,35 @@
+function upgradeSeparator(path) {
+  return path.replace(/[|.]/g, '/');
+}
+
+export default function transformer(file, api, options) {
+  var j = api.jscodeshift;
+  var root = j(file.source); // storiesOf(...)
+
+  root.find(j.CallExpression).filter(function (call) {
+    return call.node.callee.name === 'storiesOf';
+  }).filter(function (call) {
+    return call.node.arguments.length > 0 && ['Literal', 'StringLiteral'].includes(call.node.arguments[0].type);
+  }).forEach(function (call) {
+    var arg0 = call.node.arguments[0];
+    arg0.value = upgradeSeparator(arg0.value);
+  }); // export default { title: ... }
+
+  root.find(j.ExportDefaultDeclaration).filter(function (def) {
+    return def.node.declaration.properties.map(function (p) {
+      return p.key.name;
+    }).includes('title');
+  }).forEach(function (def) {
+    if (def.node.declaration && def.node.declaration.properties) {
+      def.node.declaration.properties.forEach(function (p) {
+        if (p.key.name === 'title') {
+          // eslint-disable-next-line no-param-reassign
+          p.value.value = upgradeSeparator(p.value.value);
+        }
+      });
+    }
+  });
+  return root.toSource({
+    quote: 'single'
+  });
+}

package/dist/modern/index.js

@@ -0,0 +1,99 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import "core-js/modules/es.promise.js";
+import "core-js/modules/es.symbol.description.js";
+
+/* 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';
+var TRANSFORM_DIR = `${__dirname}/transforms`;
+export function listCodemods() {
+  return fs.readdirSync(TRANSFORM_DIR).filter(function (fname) {
+    return fname.endsWith('.js');
+  }).map(function (fname) {
+    return fname.slice(0, -3);
+  });
+}
+var renameAsync = promisify(fs.rename);
+
+async function renameFile(file, from, to, {
+  logger: logger
+}) {
+  var newFile = file.replace(from, to);
+  logger.log(`Rename: ${file} ${newFile}`);
+  return renameAsync(file, newFile);
+}
+
+export async function runCodemod(codemod, {
+  glob: glob,
+  logger: logger,
+  dryRun: dryRun,
+  rename: rename,
+  parser: parser
+}) {
+  var codemods = listCodemods();
+
+  if (!codemods.includes(codemod)) {
+    throw new Error(`Unknown codemod ${codemod}. Run --list for options.`);
+  }
+
+  var 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
+
+
+  var inferredParser = parser;
+
+  if (!parser) {
+    var extension = path.extname(glob).slice(1);
+    var knownParser = jscodeshiftToPrettierParser(extension);
+    if (knownParser !== 'babel') inferredParser = extension;
+  }
+
+  var files = await globby([glob, '!**/node_modules', '!**/dist']);
+  logger.log(`=> Applying ${codemod}: ${files.length} files`);
+
+  if (!dryRun) {
+    var parserArgs = inferredParser ? ['--parser', inferredParser] : [];
+    spawnSync('npx', ['jscodeshift', '-t', `${TRANSFORM_DIR}/${codemod}.js`, ...parserArgs, ...files], {
+      stdio: 'inherit'
+    });
+  }
+
+  if (renameParts) {
+    var _renameParts = renameParts,
+        _renameParts2 = _slicedToArray(_renameParts, 2),
+        from = _renameParts2[0],
+        to = _renameParts2[1];
+
+    logger.log(`=> Renaming ${rename}: ${files.length} files`);
+    await Promise.all(files.map(function (file) {
+      return renameFile(file, new RegExp(`${from}$`), to, {
+        logger: logger
+      });
+    }));
+  }
+}

package/dist/modern/lib/utils.js

@@ -0,0 +1,25 @@
+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
+
+  if (/^\d/.test(key)) {
+    key = `_${key}`;
+  } // prepend _ if name starts with a digit
+
+
+  if (/^\d/.test(key)) {
+    key = `_${key}`;
+  }
+
+  return key;
+};
+export function jscodeshiftToPrettierParser(parser) {
+  var parserMap = {
+    babylon: 'babel',
+    flow: 'flow',
+    ts: 'typescript',
+    tsx: 'typescript'
+  };
+  return parserMap[parser] || 'babel';
+}

package/dist/modern/transforms/add-component-parameters.js

@@ -0,0 +1,57 @@
+/**
+ * Adds a `component` parameter for each storiesOf(...) call.
+ *
+ * For example:
+ *
+ * input { Button } from './Button';
+ * storiesOf('Button', module).add('story', () => <Button label="The Button" />);
+ *
+ * Becomes:
+ *
+ * input { Button } from './Button';
+ * storiesOf('Button', module)
+ *   .addParameters({ component: Button })
+ *   .add('story', () => <Button label="The Button" />);
+ *
+ * Heuristics:
+ * - The storiesOf "kind" name must be Button
+ * - Button must be imported in the file
+ */
+export default function transformer(file, api) {
+  var j = api.jscodeshift;
+  var root = j(file.source); //  Create a dictionary whose keys are all the named imports in the file.
+  //  For instance:
+  //
+  //  import foo from 'foo';
+  //  import { bar, baz } from 'zoo';
+  //
+  //  => { foo: true, bar: true, baz: true }
+
+  var importMap = {};
+  root.find(j.ImportDeclaration).forEach(function (imp) {
+    return imp.node.specifiers.forEach(function (spec) {
+      importMap[spec.local.name] = true;
+    });
+  });
+
+  function getLeafName(string) {
+    var parts = string.split(/\/|\.|\|/);
+    return parts[parts.length - 1];
+  }
+
+  function addComponentParameter(call) {
+    var node = call.node;
+    var leafName = getLeafName(node.arguments[0].value);
+    return j.callExpression(j.memberExpression(node, j.identifier('addParameters')), [j.objectExpression([j.property('init', j.identifier('component'), j.identifier(leafName))])]);
+  }
+
+  var storiesOfCalls = root.find(j.CallExpression).filter(function (call) {
+    return call.node.callee.name === 'storiesOf';
+  }).filter(function (call) {
+    return call.node.arguments.length > 0 && call.node.arguments[0].type === 'Literal';
+  }).filter(function (call) {
+    var leafName = getLeafName(call.node.arguments[0].value);
+    return importMap[leafName];
+  }).replaceWith(addComponentParameter);
+  return root.toSource();
+}