@storybook/codemod 7.3.2 → 7.4.0-alpha.1

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

@@ -1,340 +0,0 @@
-/* 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

@@ -1,32 +0,0 @@
-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

@@ -1,277 +0,0 @@
-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),
-  });
-}