@storybook/codemod 7.0.0-alpha.6 → 7.0.0-alpha.60

package/src/transforms/csf-to-mdx.js

@@ -0,0 +1,190 @@
+import { prettyPrint } from 'recast';
+import { isExportStory } from '@storybook/csf';
+
+function exportMdx(root, options) {
+  // eslint-disable-next-line no-underscore-dangle
+  const path = root.__paths[0];
+
+  // FIXME: insert the title as markdown after all of the imports
+  return path.node.program.body
+    .map((n) => {
+      const { code } = prettyPrint(n, options);
+      if (n.type === 'JSXElement') {
+        return `${code}\n`;
+      }
+      return code;
+    })
+    .join('\n');
+}
+
+function parseIncludeExclude(prop) {
+  const { code } = prettyPrint(prop, {});
+  // eslint-disable-next-line no-eval
+  return (0, eval)(code);
+}
+
+/**
+ * Convert a component's module story file into an MDX file
+ *
+ * For example:
+ *
+ * ```
+ * input { Button } from './Button';
+ * export default {
+ *   title: 'Button'
+ * }
+ * export const story = () => <Button label="The Button" />;
+ * ```
+ *
+ * Becomes:
+ *
+ * ```
+ * import { Meta, Story } from '@storybook/addon-docs';
+ * input { Button } from './Button';
+ *
+ * <Meta title='Button' />
+ *
+ * <Story name='story'>
+ *   <Button label="The Button" />
+ * </Story>
+ * ```
+ */
+export default function transformer(file, api) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+
+  // FIXME: save out all the storyFn.story = { ... }
+  const storyKeyToStory = {};
+  // save out includeStories / excludeStories
+  const meta = {};
+
+  function makeAttr(key, val) {
+    return j.jsxAttribute(
+      j.jsxIdentifier(key),
+      val.type === 'Literal' ? val : j.jsxExpressionContainer(val)
+    );
+  }
+
+  function getStoryContents(node) {
+    return node.type === 'ArrowFunctionExpression' && node.body.type === 'JSXElement'
+      ? node.body
+      : j.jsxExpressionContainer(node);
+  }
+
+  function getName(storyKey) {
+    const story = storyKeyToStory[storyKey];
+    if (story) {
+      const name = story.properties.find((prop) => prop.key.name === 'name');
+      if (name && name.value.type === 'Literal') {
+        return name.value.value;
+      }
+    }
+    return storyKey;
+  }
+
+  function getStoryAttrs(storyKey) {
+    const attrs = [];
+    const story = storyKeyToStory[storyKey];
+    if (story) {
+      story.properties.forEach((prop) => {
+        const { key, value } = prop;
+        if (key.name !== 'name') {
+          attrs.push(makeAttr(key.name, value));
+        }
+      });
+    }
+    return attrs;
+  }
+
+  // 1. If the program does not have `export default { title: '....' }, skip it
+  const defaultExportWithTitle = root
+    .find(j.ExportDefaultDeclaration)
+    .filter((def) => def.node.declaration.properties.map((p) => p.key.name).includes('title'));
+  if (defaultExportWithTitle.size() === 0) {
+    return root.toSource();
+  }
+
+  // 2a. Add imports from '@storybook/addon-docs'
+  root
+    .find(j.ImportDeclaration)
+    .at(-1)
+    .insertAfter(j.emptyStatement())
+    .insertAfter(
+      j.importDeclaration(
+        [j.importSpecifier(j.identifier('Meta')), j.importSpecifier(j.identifier('Story'))],
+        j.literal('@storybook/addon-docs')
+      )
+    );
+  // 2b. Remove react import which is implicit
+  root
+    .find(j.ImportDeclaration)
+    .filter((decl) => decl.node.source.value === 'react')
+    .remove();
+
+  // 3. Save out all the excluded stories
+  defaultExportWithTitle.forEach((exp) => {
+    exp.node.declaration.properties.forEach((p) => {
+      if (['includeStories', 'excludeStories'].includes(p.key.name)) {
+        meta[p.key.name] = parseIncludeExclude(p.value);
+      }
+    });
+  });
+
+  // 4. Collect all the story exports in storyKeyToStory[key] = null;
+  const namedExports = root.find(j.ExportNamedDeclaration);
+  namedExports.forEach((exp) => {
+    const storyKey = exp.node.declaration.declarations[0].id.name;
+    if (isExportStory(storyKey, meta)) {
+      storyKeyToStory[storyKey] = null;
+    }
+  });
+
+  // 5. Collect all the storyKey.story in storyKeyToStory and also remove them
+  const storyAssignments = root.find(j.AssignmentExpression).filter((exp) => {
+    const { left } = exp.node;
+    return (
+      left.type === 'MemberExpression' &&
+      left.object.type === 'Identifier' &&
+      left.object.name in storyKeyToStory &&
+      left.property.type === 'Identifier' &&
+      left.property.name === 'story'
+    );
+  });
+  storyAssignments.forEach((exp) => {
+    const { left, right } = exp.node;
+    storyKeyToStory[left.object.name] = right;
+  });
+  storyAssignments.remove();
+
+  // 6. Convert the default export to <Meta />
+  defaultExportWithTitle.replaceWith((exp) => {
+    const jsxId = j.jsxIdentifier('Meta');
+    const attrs = [];
+    exp.node.declaration.properties.forEach((prop) => {
+      const { key, value } = prop;
+      if (!['includeStories', 'excludeStories'].includes(key.name)) {
+        attrs.push(makeAttr(key.name, value));
+      }
+    });
+    const opening = j.jsxOpeningElement(jsxId, attrs);
+    opening.selfClosing = true;
+    return j.jsxElement(opening);
+  });
+
+  // 7. Convert all the named exports to <Story>...</Story>
+  namedExports.replaceWith((exp) => {
+    const storyKey = exp.node.declaration.declarations[0].id.name;
+    if (!isExportStory(storyKey, meta)) {
+      return exp.node;
+    }
+    const jsxId = j.jsxIdentifier('Story');
+    const name = getName(storyKey);
+    const attributes = [makeAttr('name', j.literal(name)), ...getStoryAttrs(storyKey)];
+    const opening = j.jsxOpeningElement(jsxId, attributes);
+    const closing = j.jsxClosingElement(jsxId);
+    const children = [getStoryContents(exp.node.declaration.declarations[0].init)];
+    return j.jsxElement(opening, closing, children);
+  });
+
+  return exportMdx(root, { quote: 'single', trailingComma: 'true', tabWidth: 2 });
+}

package/src/transforms/move-builtin-addons.js

@@ -0,0 +1,32 @@
+export default function transformer(file, api) {
+  const j = api.jscodeshift;
+
+  const createImportDeclaration = (specifiers, source) =>
+    j.importDeclaration(
+      specifiers.map((s) => j.importSpecifier(j.identifier(s))),
+      j.literal(source)
+    );
+
+  const deprecates = {
+    action: [['action'], '@storybook/addon-actions'],
+    linkTo: [['linkTo'], '@storybook/addon-links'],
+  };
+
+  const transform = j(file.source)
+    .find(j.ImportDeclaration)
+    .filter((i) => i.value.source.value === '@storybook/react')
+    .forEach((i) => {
+      const importStatement = i.value;
+      importStatement.specifiers = importStatement.specifiers.filter((specifier) => {
+        const item = deprecates[specifier.local.name];
+        if (item) {
+          const [specifiers, moduleName] = item;
+          i.insertAfter(createImportDeclaration(specifiers, moduleName));
+          return false;
+        }
+        return specifier;
+      });
+    });
+
+  return transform.toSource({ quote: 'single' });
+}

package/src/transforms/storiesof-to-csf.js

@@ -0,0 +1,277 @@
+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) {
+  const LITERAL = ['ts', 'tsx'].includes(options.parser) ? 'StringLiteral' : 'Literal';
+
+  const j = api.jscodeshift;
+  const root = j(file.source);
+
+  function extractDecorators(parameters) {
+    if (!parameters) {
+      return {};
+    }
+    if (!parameters.properties) {
+      return { storyParams: parameters };
+    }
+    let storyDecorators = parameters.properties.find((p) => p.key.name === 'decorators');
+    if (!storyDecorators) {
+      return { storyParams: parameters };
+    }
+    storyDecorators = storyDecorators.value;
+    const storyParams = { ...parameters };
+    storyParams.properties = storyParams.properties.filter((p) => p.key.name !== 'decorators');
+    if (storyParams.properties.length === 0) {
+      return { storyDecorators };
+    }
+    return { storyParams, storyDecorators };
+  }
+
+  function convertToModuleExports(path, originalExports) {
+    const base = j(path);
+
+    const statements = [];
+    const extraExports = [];
+
+    // .addDecorator
+    const decorators = [];
+    base
+      .find(j.CallExpression)
+      .filter(
+        (call) => call.node.callee.property && call.node.callee.property.name === 'addDecorator'
+      )
+      .forEach((add) => {
+        const 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
+    const parameters = [];
+    base
+      .find(j.CallExpression)
+      .filter(
+        (call) => call.node.callee.property && call.node.callee.property.name === 'addParameters'
+      )
+      .forEach((add) => {
+        // jscodeshift gives us the find results in reverse, but these args come in
+        // order, so we double reverse here. ugh.
+        const params = [...add.node.arguments[0].properties];
+        params.reverse();
+        params.forEach((prop) => 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((exp) => j.literal(exp)))
+        )
+      );
+    }
+
+    // storiesOf(...)
+    base
+      .find(j.CallExpression)
+      .filter((call) => call.node.callee.name === 'storiesOf')
+      .filter((call) => call.node.arguments.length > 0 && call.node.arguments[0].type === LITERAL)
+      .forEach((storiesOf) => {
+        const title = storiesOf.node.arguments[0].value;
+        statements.push(
+          j.exportDefaultDeclaration(
+            j.objectExpression([
+              j.property('init', j.identifier('title'), j.literal(title)),
+              ...extraExports,
+            ])
+          )
+        );
+      });
+
+    // .add(...)
+    const adds = [];
+    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)
+      .forEach((add) => adds.push(add));
+
+    adds.reverse();
+    adds.push(path);
+
+    const identifiers = new Set();
+    root.find(j.Identifier).forEach(({ value }) => identifiers.add(value.name));
+    adds.forEach((add) => {
+      let name = add.node.arguments[0].value;
+      let key = sanitizeName(name);
+      while (identifiers.has(key)) {
+        key = `_${key}`;
+      }
+      identifiers.add(key);
+      if (storyNameFromExport(key) === name) {
+        name = null;
+      }
+
+      const val = add.node.arguments[1];
+      statements.push(
+        j.exportDeclaration(
+          false,
+          j.variableDeclaration('const', [j.variableDeclarator(j.identifier(key), val)])
+        )
+      );
+
+      const storyAnnotations = [];
+
+      if (name) {
+        storyAnnotations.push(j.property('init', j.identifier('name'), j.literal(name)));
+      }
+
+      if (add.node.arguments.length > 2) {
+        const originalStoryParams = add.node.arguments[2];
+        const { storyParams, storyDecorators } = extractDecorators(originalStoryParams);
+        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)
+          )
+        );
+      }
+    });
+
+    const stmt = path.parent.node.type === 'VariableDeclarator' ? path.parent.parent : path.parent;
+
+    statements.reverse();
+    statements.forEach((s) => stmt.insertAfter(s));
+    j(stmt).remove();
+  }
+
+  // Save the original storiesOf
+  const initialStoriesOf = root
+    .find(j.CallExpression)
+    .filter((call) => call.node.callee.name === 'storiesOf');
+
+  const 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
+  const originalExports = [];
+  root.find(j.ExportNamedDeclaration).forEach((exp) => {
+    const { declaration, specifiers } = exp.node;
+    if (declaration) {
+      const { id, declarations } = declaration;
+      if (declarations) {
+        declarations.forEach((decl) => {
+          const { name, properties } = decl.id;
+          if (name) {
+            originalExports.push(name);
+          } else if (properties) {
+            properties.forEach((prop) => originalExports.push(prop.key.name));
+          }
+        });
+      } else if (id) {
+        originalExports.push(id.name);
+      }
+    } else if (specifiers) {
+      specifiers.forEach((spec) => 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((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) =>
+      ['ExpressionStatement', 'VariableDeclarator'].includes(add.parentPath.node.type)
+    )
+    .forEach((path) => convertToModuleExports(path, originalExports));
+
+  // remove storiesOf import
+  root
+    .find(j.ImportSpecifier)
+    .filter(
+      (spec) =>
+        spec.node.imported.name === 'storiesOf' &&
+        spec.parent.node.source.value.startsWith('@storybook/')
+    )
+    .forEach((spec) => {
+      const toRemove = spec.parent.node.specifiers.length > 1 ? spec : spec.parent;
+      j(toRemove).remove();
+    });
+
+  const 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;
+  }
+
+  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),
+  });
+}

package/{dist/esm → src}/transforms/update-addon-info.js

@@ -23,8 +23,9 @@
  *   )))
  */
 export default function transformer(file, api) {
-  var j = api.jscodeshift;
-  var root = j(file.source);
+  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
@@ -33,56 +34,75 @@ export default function transformer(file, api) {
    * @param {list} args - original addWithInfo function parameters
    * @return {list} the modified list of parameters for the new function
    */
-
-  var getOptions = function (args) {
+  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])];
+    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];
 
-  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])];
+    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();
 
-
-  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')));
+
+    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, {
+  const addWithInfoExpressions = root.find(j.CallExpression, {
     callee: {
       property: {
-        name: 'addWithInfo'
-      }
-    }
+        name: 'addWithInfo',
+      },
+    },
   });
 
   if (addWithInfoExpressions.size()) {
@@ -91,4 +111,4 @@ export default function transformer(file, api) {
   }
 
   return root.toSource();
-}
+}

package/{dist/esm → src}/transforms/update-organisation-name.js

@@ -1,6 +1,6 @@
-export var packageNames = {
+export const packageNames = {
   '@kadira/react-storybook-decorator-centered': '@storybook/addon-centered',
-  '@kadira/storybook-addons': '@storybook/addons',
+  '@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',
@@ -12,28 +12,27 @@ export var packageNames = {
   '@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/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'
+  getstorybook: '@storybook/cli',
 };
+
 export default function transformer(file, api) {
-  var j = api.jscodeshift;
-  var packageNamesKeys = Object.keys(packageNames);
+  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));
 
-  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.
@@ -43,32 +42,30 @@ export default function transformer(file, api) {
    * // returns '@storybook/storybook'
    * getNewPackageName('@kadira/storybook')
    */
-
-
-  var getNewPackageName = function (oldPackageName) {
-    var match = getMatch(oldPackageName);
+  const getNewPackageName = (oldPackageName) => {
+    const match = getMatch(oldPackageName);
 
     if (match) {
-      var replacement = packageNames[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
    */
-
-
-  var updatePackageName = function (declaration) {
+  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'
-  });
-}
+  return j(file.source)
+    .find(j.ImportDeclaration)
+    .replaceWith(updatePackageName)
+    .toSource({ quote: 'single' });
+}