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

package/src/transforms/update-addon-info.js

@@ -0,0 +1,114 @@
+/**
+ * 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) {
+  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
+   * 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
+   */
+  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,
+      ]),
+    ];
+  };
+
+  /**
+   * 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];
+
+    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.
+   */
+  const checkWithInfoImport = () => {
+    const importExists = root
+      .find(j.ImportDeclaration)
+      .filter((imp) => 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')
+        )
+      );
+  };
+
+  const addWithInfoExpressions = root.find(j.CallExpression, {
+    callee: {
+      property: {
+        name: 'addWithInfo',
+      },
+    },
+  });
+
+  if (addWithInfoExpressions.size()) {
+    checkWithInfoImport();
+    addWithInfoExpressions.replaceWith(withInfo);
+  }
+
+  return root.toSource();
+}

package/src/transforms/update-organisation-name.js

@@ -0,0 +1,71 @@
+export const packageNames = {
+  '@kadira/react-storybook-decorator-centered': '@storybook/addon-centered',
+  '@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',
+  '@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/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',
+};
+
+export default function transformer(file, api) {
+  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));
+
+  /**
+   * 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')
+   */
+  const getNewPackageName = (oldPackageName) => {
+    const match = getMatch(oldPackageName);
+
+    if (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
+   */
+  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' });
+}

package/src/transforms/upgrade-deprecated-types.ts

@@ -0,0 +1,142 @@
+/* eslint-disable no-underscore-dangle */
+import prettier from 'prettier';
+import type { API, FileInfo } from 'jscodeshift';
+import type { BabelFile, NodePath } from '@babel/core';
+import * as babel from '@babel/core';
+import { loadCsf } from '@storybook/csf-tools';
+import * as recast from 'recast';
+import * as t from '@babel/types';
+
+const logger = console;
+
+const deprecatedTypes = [
+  'ComponentStory',
+  'ComponentStoryFn',
+  'ComponentStoryObj',
+  'ComponentMeta',
+  'Story',
+];
+
+function migrateType(oldType: string) {
+  if (oldType === 'Story' || oldType === 'ComponentStory') return 'StoryFn';
+  return oldType.replace('Component', '');
+}
+
+export default function transform(info: FileInfo, api: API, options: { parser?: string }) {
+  // TODO what do I need to with the title?
+  const fileNode = loadCsf(info.source, { makeTitle: (title) => title })._ast;
+  // @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: info.source, ast: fileNode }
+  );
+
+  upgradeDeprecatedTypes(file);
+
+  let output = recast.print(file.path.node).code;
+
+  try {
+    const prettierConfig = prettier.resolveConfig.sync('.', { editorconfig: true }) || {
+      printWidth: 100,
+      tabWidth: 2,
+      bracketSpacing: true,
+      trailingComma: 'es5',
+      singleQuote: true,
+    };
+
+    output = prettier.format(output, { ...prettierConfig, filepath: info.path });
+  } catch (e) {
+    logger.log(`Failed applying prettier to ${info.path}.`);
+  }
+
+  return output;
+}
+
+export const parser = 'tsx';
+
+export function upgradeDeprecatedTypes(file: BabelFile) {
+  const importedNamespaces: Set<string> = new Set();
+  const typeReferencesToUpdate: Set<string> = new Set();
+  const existingImports: { name: string; isAlias: boolean; path: NodePath }[] = [];
+
+  file.path.traverse({
+    ImportDeclaration: (path) => {
+      existingImports.push(
+        ...path.get('specifiers').map((specifier) => ({
+          name: specifier.node.local.name,
+          isAlias: !(
+            specifier.isImportSpecifier() &&
+            t.isIdentifier(specifier.node.imported) &&
+            specifier.node.local.name === specifier.node.imported.name
+          ),
+          path: specifier,
+        }))
+      );
+
+      const source = path.node.source.value;
+      if (!source.startsWith('@storybook')) return;
+
+      path.get('specifiers').forEach((specifier) => {
+        if (specifier.isImportNamespaceSpecifier()) {
+          importedNamespaces.add(specifier.node.local.name);
+        }
+        if (!specifier.isImportSpecifier()) return;
+        const imported = specifier.get('imported');
+        if (!imported.isIdentifier()) return;
+
+        // if we find a deprecated import
+        if (deprecatedTypes.includes(imported.node.name)) {
+          // we don't have to rewrite type references for aliased imports
+          if (imported.node.name === specifier.node.local.name) {
+            typeReferencesToUpdate.add(specifier.node.local.name);
+          }
+
+          const newType = migrateType(imported.node.name);
+
+          // replace the deprecated import type when the new type isn't yet imported
+          // note that we don't replace the local name of the specifier
+          if (!existingImports.some((it) => it.name === newType)) {
+            imported.replaceWith(t.identifier(newType));
+            existingImports.push({ name: newType, isAlias: false, path: specifier });
+          } else {
+            // if the existing import has the same local name but is an alias we throw
+            // we could have imported the type with an alias, but seems to much effort
+            const existingImport = existingImports.find((it) => it.name === newType && it.isAlias);
+            if (existingImport) {
+              throw existingImport.path.buildCodeFrameError(
+                'This codemod does not support local imports that are called the same as a storybook import.\n' +
+                  'Rename this local import and try again.'
+              );
+            } else {
+              // if the type already exists, without being aliased
+              // we can safely remove the deprecated import now
+              specifier.remove();
+            }
+          }
+        }
+      });
+    },
+  });
+
+  file.path.traverse({
+    TSTypeReference: (path) => {
+      const typeName = path.get('typeName');
+      if (typeName.isIdentifier()) {
+        if (typeReferencesToUpdate.has(typeName.node.name)) {
+          typeName.replaceWith(t.identifier(migrateType(typeName.node.name)));
+        }
+      } else if (typeName.isTSQualifiedName()) {
+        // For example SB.StoryObj
+        const namespace = typeName.get('left');
+        if (namespace.isIdentifier()) {
+          if (importedNamespaces.has(namespace.node.name)) {
+            const right = typeName.get('right');
+            if (deprecatedTypes.includes(right.node.name)) {
+              right.replaceWith(t.identifier(migrateType(right.node.name)));
+            }
+          }
+        }
+      }
+    },
+  });
+}

package/src/transforms/upgrade-hierarchy-separators.js

@@ -0,0 +1,39 @@
+function upgradeSeparator(path) {
+  return path.replace(/[|.]/g, '/');
+}
+
+export default function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+
+  // storiesOf(...)
+  root
+    .find(j.CallExpression)
+    .filter((call) => call.node.callee.name === 'storiesOf')
+    .filter(
+      (call) =>
+        call.node.arguments.length > 0 &&
+        ['Literal', 'StringLiteral'].includes(call.node.arguments[0].type)
+    )
+    .forEach((call) => {
+      const arg0 = call.node.arguments[0];
+      arg0.value = upgradeSeparator(arg0.value);
+    });
+
+  // export default { title: ... }
+  root
+    .find(j.ExportDefaultDeclaration)
+    .filter((def) => def.node.declaration.properties.map((p) => p.key.name).includes('title'))
+    .forEach((def) => {
+      if (def.node.declaration && def.node.declaration.properties) {
+        def.node.declaration.properties.forEach((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/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "skipLibCheck": true,
+    "allowJs": true,
+    "strict": false
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "__testfixtures__", "__tests__"]
+}