@storybook/codemod 0.0.0-pr-23609-sha-f47ef339

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

@@ -0,0 +1,340 @@
+/* eslint-disable no-param-reassign,@typescript-eslint/no-shadow */
+import type { FileInfo } from 'jscodeshift';
+import { babelParse, babelParseExpression } from '@storybook/csf-tools';
+import { remark } from 'remark';
+import type { Root } from 'remark-mdx';
+import remarkMdx from 'remark-mdx';
+import { SKIP, visit } from 'unist-util-visit';
+import { is } from 'unist-util-is';
+import type {
+  MdxJsxAttribute,
+  MdxJsxExpressionAttribute,
+  MdxJsxFlowElement,
+  MdxJsxTextElement,
+} from 'mdast-util-mdx-jsx';
+import type { MdxjsEsm } from 'mdast-util-mdxjs-esm';
+import * as t from '@babel/types';
+import type { BabelFile } from '@babel/core';
+import * as babel from '@babel/core';
+import * as recast from 'recast';
+import * as path from 'node:path';
+import prettier from 'prettier';
+import * as fs from 'node:fs';
+import camelCase from 'lodash/camelCase';
+import type { MdxFlowExpression } from 'mdast-util-mdx-expression';
+
+const mdxProcessor = remark().use(remarkMdx) as ReturnType<typeof remark>;
+
+export default function jscodeshift(info: FileInfo) {
+  const parsed = path.parse(info.path);
+
+  let baseName = path.join(
+    parsed.dir,
+    parsed.name.replace('.mdx', '').replace('.stories', '').replace('.story', '')
+  );
+
+  // make sure the new csf file we are going to create exists
+  while (fs.existsSync(`${baseName}.stories.js`)) {
+    baseName += '_';
+  }
+
+  const result = transform(info.source, path.basename(baseName));
+
+  const [mdx, csf] = result;
+
+  if (csf != null) {
+    fs.writeFileSync(`${baseName}.stories.js`, csf);
+  }
+
+  return mdx;
+}
+
+export function transform(source: string, baseName: string): [mdx: string, csf: string] {
+  const root = mdxProcessor.parse(source);
+  const storyNamespaceName = nameToValidExport(`${baseName}Stories`);
+
+  const metaAttributes: Array<MdxJsxAttribute | MdxJsxExpressionAttribute> = [];
+  const storiesMap = new Map<
+    string,
+    | {
+        type: 'value';
+        attributes: Array<MdxJsxAttribute | MdxJsxExpressionAttribute>;
+        children: (MdxJsxFlowElement | MdxJsxTextElement)['children'];
+      }
+    | {
+        type: 'reference';
+      }
+    | {
+        type: 'id';
+      }
+  >();
+
+  // rewrite addon docs import
+  visit(root, ['mdxjsEsm'], (node: MdxjsEsm) => {
+    node.value = node.value
+      .replaceAll('@storybook/addon-docs/blocks', '@storybook/blocks')
+      .replaceAll('@storybook/addon-docs', '@storybook/blocks');
+  });
+
+  const file = getEsmAst(root);
+
+  visit(
+    root,
+    ['mdxJsxFlowElement', 'mdxJsxTextElement'],
+    (node: MdxJsxFlowElement | MdxJsxTextElement, index, parent) => {
+      if (is(node, { name: 'Meta' })) {
+        metaAttributes.push(...node.attributes);
+        node.attributes = [
+          {
+            type: 'mdxJsxAttribute',
+            name: 'of',
+            value: {
+              type: 'mdxJsxAttributeValueExpression',
+              value: storyNamespaceName,
+            },
+          },
+        ];
+      }
+      if (is(node, { name: 'Story' })) {
+        const nameAttribute = node.attributes.find(
+          (it) => it.type === 'mdxJsxAttribute' && it.name === 'name'
+        );
+        const idAttribute = node.attributes.find(
+          (it) => it.type === 'mdxJsxAttribute' && it.name === 'id'
+        );
+        const storyAttribute = node.attributes.find(
+          (it) => it.type === 'mdxJsxAttribute' && it.name === 'story'
+        );
+        if (typeof nameAttribute?.value === 'string') {
+          let name = nameToValidExport(nameAttribute.value);
+          while (variableNameExists(name)) name += '_';
+
+          storiesMap.set(name, {
+            type: 'value',
+            attributes: node.attributes,
+            children: node.children,
+          });
+          node.attributes = [
+            {
+              type: 'mdxJsxAttribute',
+              name: 'of',
+              value: {
+                type: 'mdxJsxAttributeValueExpression',
+                value: `${storyNamespaceName}.${name}`,
+              },
+            },
+          ];
+          node.children = [];
+        } else if (idAttribute?.value) {
+          // e.g. <Story id="button--primary" />
+          // should be migrated manually as it is very hard to find out where the definition of such a string id is located
+          const nodeString = mdxProcessor.stringify({ type: 'root', children: [node] }).trim();
+          const newNode: MdxFlowExpression = {
+            type: 'mdxFlowExpression',
+            value: `/* ${nodeString} is deprecated, please migrate it to <Story of={referenceToStory} /> see: https://storybook.js.org/migration-guides/7.0 */`,
+          };
+          storiesMap.set(idAttribute.value as string, { type: 'id' });
+          parent.children.splice(index, 0, newNode);
+          // current index is the new comment, and index + 1 is current node
+          // SKIP traversing current node, and continue with the node after that
+          return [SKIP, index + 2];
+        } else if (
+          storyAttribute?.type === 'mdxJsxAttribute' &&
+          typeof storyAttribute.value === 'object' &&
+          storyAttribute.value.type === 'mdxJsxAttributeValueExpression'
+        ) {
+          // e.g. <Story story={Primary} />
+
+          const name = storyAttribute.value.value;
+          node.attributes = [
+            {
+              type: 'mdxJsxAttribute',
+              name: 'of',
+              value: {
+                type: 'mdxJsxAttributeValueExpression',
+                value: `${storyNamespaceName}.${name}`,
+              },
+            },
+          ];
+          node.children = [];
+
+          storiesMap.set(name, { type: 'reference' });
+        } else {
+          parent.children.splice(index, 1);
+          // Do not traverse `node`, continue at the node *now* at `index`.
+          return [SKIP, index];
+        }
+      }
+      return undefined;
+    }
+  );
+
+  const metaProperties = metaAttributes.flatMap((attribute) => {
+    if (attribute.type === 'mdxJsxAttribute') {
+      if (typeof attribute.value === 'string') {
+        return [t.objectProperty(t.identifier(attribute.name), t.stringLiteral(attribute.value))];
+      }
+      return [
+        t.objectProperty(
+          t.identifier(attribute.name),
+          babelParseExpression(attribute.value.value) as any as t.Expression
+        ),
+      ];
+    }
+    return [];
+  });
+
+  file.path.traverse({
+    // remove mdx imports from csf
+    ImportDeclaration(path) {
+      if (path.node.source.value === '@storybook/blocks') {
+        path.remove();
+      }
+    },
+    // remove exports from csf file
+    ExportNamedDeclaration(path) {
+      path.replaceWith(path.node.declaration);
+    },
+  });
+
+  if (storiesMap.size === 0 && metaAttributes.length === 0) {
+    // A CSF file must have at least one story, so skip migrating if this is the case.
+    return [mdxProcessor.stringify(root), null];
+  }
+
+  addStoriesImport(root, baseName, storyNamespaceName);
+
+  const newStatements: t.Statement[] = [
+    t.exportDefaultDeclaration(t.objectExpression(metaProperties)),
+  ];
+
+  function mapChildrenToRender(children: (MdxJsxFlowElement | MdxJsxTextElement)['children']) {
+    const child = children[0];
+
+    if (!child) return undefined;
+
+    if (child.type === 'text') {
+      return t.arrowFunctionExpression([], t.stringLiteral(child.value));
+    }
+    if (child.type === 'mdxFlowExpression' || child.type === 'mdxTextExpression') {
+      const expression = babelParseExpression(child.value) as any as t.Expression;
+
+      // Recreating those lines: https://github.com/storybookjs/mdx1-csf/blob/f408fc97e9a63097ca1ee577df9315a3cccca975/src/sb-mdx-plugin.ts#L185-L198
+      const BIND_REGEX = /\.bind\(.*\)/;
+      if (BIND_REGEX.test(child.value)) {
+        return expression;
+      }
+      if (t.isIdentifier(expression)) {
+        return expression;
+      }
+      if (t.isArrowFunctionExpression(expression)) {
+        return expression;
+      }
+      return t.arrowFunctionExpression([], expression);
+    }
+
+    const expression = babelParseExpression(
+      mdxProcessor.stringify({ type: 'root', children: [child] })
+    ) as any as t.Expression;
+    return t.arrowFunctionExpression([], expression);
+  }
+
+  function variableNameExists(name: string) {
+    let found = false;
+    file.path.traverse({
+      VariableDeclarator: (path) => {
+        const lVal = path.node.id;
+        if (t.isIdentifier(lVal) && lVal.name === name) found = true;
+      },
+    });
+    return found;
+  }
+
+  newStatements.push(
+    ...[...storiesMap].flatMap(([key, value]) => {
+      if (value.type === 'id') return [];
+      if (value.type === 'reference') {
+        return [
+          t.exportNamedDeclaration(null, [t.exportSpecifier(t.identifier(key), t.identifier(key))]),
+        ];
+      }
+      const renderProperty = mapChildrenToRender(value.children);
+      const newObject = t.objectExpression([
+        ...(renderProperty
+          ? [t.objectProperty(t.identifier('render'), mapChildrenToRender(value.children))]
+          : []),
+        ...value.attributes.flatMap((attribute) => {
+          if (attribute.type === 'mdxJsxAttribute') {
+            if (typeof attribute.value === 'string') {
+              return [
+                t.objectProperty(t.identifier(attribute.name), t.stringLiteral(attribute.value)),
+              ];
+            }
+            return [
+              t.objectProperty(
+                t.identifier(attribute.name),
+                babelParseExpression(attribute.value.value) as any as t.Expression
+              ),
+            ];
+          }
+          return [];
+        }),
+      ]);
+
+      return [
+        t.exportNamedDeclaration(
+          t.variableDeclaration('const', [t.variableDeclarator(t.identifier(key), newObject)])
+        ),
+      ];
+    })
+  );
+
+  file.path.node.body = [...file.path.node.body, ...newStatements];
+
+  const newMdx = mdxProcessor.stringify(root);
+  let output = recast.print(file.path.node).code;
+
+  const prettierConfig = prettier.resolveConfig.sync('.', { editorconfig: true }) || {
+    printWidth: 100,
+    tabWidth: 2,
+    bracketSpacing: true,
+    trailingComma: 'es5',
+    singleQuote: true,
+  };
+
+  output = prettier.format(output, { ...prettierConfig, filepath: `file.jsx` });
+
+  return [newMdx, output];
+}
+
+function getEsmAst(root: Root) {
+  const esm: string[] = [];
+  visit(root, ['mdxjsEsm'], (node: MdxjsEsm) => {
+    esm.push(node.value);
+  });
+  const esmSource = `${esm.join('\n\n')}`;
+
+  // @ts-expect-error File is not yet exposed, see https://github.com/babel/babel/issues/11350#issuecomment-644118606
+  const file: BabelFile = new babel.File(
+    { filename: 'info.path' },
+    { code: esmSource, ast: babelParse(esmSource) }
+  );
+  return file;
+}
+
+function addStoriesImport(root: Root, baseName: string, storyNamespaceName: string): void {
+  let found = false;
+
+  visit(root, ['mdxjsEsm'], (node: MdxjsEsm) => {
+    if (!found) {
+      node.value += `\nimport * as ${storyNamespaceName} from './${baseName}.stories';`;
+      found = true;
+    }
+  });
+}
+
+export function nameToValidExport(name: string) {
+  const [first, ...rest] = Array.from(camelCase(name));
+
+  return `${first.match(/[a-zA-Z_$]/) ? first.toUpperCase() : `$${first}`}${rest.join('')}`;
+}

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