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

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/mdx-to-csf.js

@@ -0,0 +1,184 @@
+// import recast from 'recast';
+import mdx from '@mdx-js/mdx';
+import prettier from 'prettier';
+import { sanitizeName } from '../lib/utils';
+
+/**
+ * Convert a component's MDX file into module story format
+ */
+export default function transformer(file, api) {
+  const j = api.jscodeshift;
+  const code = mdx.sync(file.source, {});
+  const root = j(code);
+
+  function parseJsxAttributes(attributes) {
+    const result = {};
+    attributes.forEach((attr) => {
+      const key = attr.name.name;
+      const val = attr.value.type === 'JSXExpressionContainer' ? attr.value.expression : attr.value;
+      result[key] = val;
+    });
+    return result;
+  }
+
+  function genObjectExpression(attrs) {
+    return j.objectExpression(
+      Object.entries(attrs).map(([key, val]) => j.property('init', j.identifier(key), val))
+    );
+  }
+
+  function convertToStories(path) {
+    const base = j(path);
+
+    const meta = {};
+    const includeStories = [];
+    const storyStatements = [];
+
+    // get rid of all mdxType junk
+    base
+      .find(j.JSXAttribute)
+      .filter((attr) => attr.node.name.name === 'mdxType')
+      .remove();
+
+    // parse <Meta title="..." />
+    base
+      .find(j.JSXElement)
+      .filter((elt) => elt.node.openingElement.name.name === 'Meta')
+      .forEach((elt) => {
+        const attrs = parseJsxAttributes(elt.node.openingElement.attributes);
+        Object.assign(meta, attrs);
+      });
+
+    // parse <Story name="..." />
+    base
+      .find(j.JSXElement)
+      .filter((elt) => elt.node.openingElement.name.name === 'Story')
+      .forEach((elt) => {
+        const attrs = parseJsxAttributes(elt.node.openingElement.attributes);
+        if (attrs.name) {
+          const storyKey = sanitizeName(attrs.name.value);
+          includeStories.push(storyKey);
+          if (storyKey === attrs.name.value) {
+            delete attrs.name;
+          }
+          let body =
+            elt.node.children.find((n) => n.type !== 'JSXText') ||
+            j.literal(elt.node.children[0].value);
+
+          if (body.type === 'JSXExpressionContainer') {
+            body = body.expression;
+          }
+
+          storyStatements.push(
+            j.exportDeclaration(
+              false,
+              j.variableDeclaration('const', [
+                j.variableDeclarator(
+                  j.identifier(storyKey),
+                  body.type === 'ArrowFunctionExpression'
+                    ? body
+                    : j.arrowFunctionExpression([], body)
+                ),
+              ])
+            )
+          );
+          if (Object.keys(attrs).length > 0) {
+            storyStatements.push(
+              j.assignmentStatement(
+                '=',
+                j.memberExpression(j.identifier(storyKey), j.identifier('story')),
+                genObjectExpression(attrs)
+              )
+            );
+          }
+          storyStatements.push(j.emptyStatement());
+        }
+      });
+
+    if (root.find(j.ExportNamedDeclaration).size() > 0) {
+      meta.includeStories = j.arrayExpression(includeStories.map((key) => j.literal(key)));
+    }
+    const statements = [
+      j.exportDefaultDeclaration(genObjectExpression(meta)),
+      j.emptyStatement(),
+      ...storyStatements,
+    ];
+
+    const lastStatement = root.find(j.Statement).at(-1);
+    statements.reverse().forEach((stmt) => {
+      lastStatement.insertAfter(stmt);
+    });
+    base.remove();
+  }
+
+  root.find(j.ExportDefaultDeclaration).forEach(convertToStories);
+
+  // strip out Story/Meta import and MDX junk
+
+  //   /* @jsx mdx */
+  root
+    .find(j.ImportDeclaration)
+    .at(0)
+    .replaceWith((exp) => j.importDeclaration(exp.node.specifiers, exp.node.source));
+
+  //  import { Story, Meta } from '@storybook/addon-docs';
+  root
+    .find(j.ImportDeclaration)
+    .filter((exp) => exp.node.source.value === '@storybook/addon-docs')
+    .remove();
+
+  //   const makeShortcode = ...
+  //   const layoutProps = {};
+  //   const MDXLayout = 'wrapper';
+  const MDX_DECLS = ['makeShortcode', 'layoutProps', 'MDXLayout'];
+  root
+    .find(j.VariableDeclaration)
+    .filter(
+      (decl) =>
+        decl.node.declarations.length === 1 && MDX_DECLS.includes(decl.node.declarations[0].id.name)
+    )
+    .remove();
+
+  //   const Source = makeShortcode('Source');
+  root
+    .find(j.VariableDeclarator)
+    .filter(
+      (expr) =>
+        expr.node.init.type === 'CallExpression' &&
+        expr.node.init.callee.type === 'Identifier' &&
+        expr.node.init.callee.name === 'makeShortcode'
+    )
+    .remove();
+
+  //   MDXContent.isMDXComponent = true;
+  root
+    .find(j.AssignmentExpression)
+    .filter(
+      (expr) =>
+        expr.node.left.type === 'MemberExpression' &&
+        expr.node.left.object.type === 'Identifier' &&
+        expr.node.left.object.name === 'MDXContent'
+    )
+    .remove();
+
+  // Add back `import React from 'react';` which is implicit in MDX
+  const react = root.find(j.ImportDeclaration).filter((decl) => decl.node.source.value === 'react');
+  if (react.size() === 0) {
+    root
+      .find(j.Statement)
+      .at(0)
+      .insertBefore(
+        j.importDeclaration([j.importDefaultSpecifier(j.identifier('React'))], j.literal('react'))
+      );
+  }
+
+  const source = root.toSource({ trailingComma: true, quote: 'single', tabWidth: 2 });
+  return prettier.format(source, {
+    parser: 'babel',
+    printWidth: 100,
+    tabWidth: 2,
+    bracketSpacing: true,
+    trailingComma: 'es5',
+    singleQuote: true,
+  });
+}

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),
+  });
+}