@storybook/codemod 7.4.0-alpha.0 → 7.4.0-alpha.2

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

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

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

@@ -1,142 +0,0 @@
-/* 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, printCsf } from '@storybook/csf-tools';
-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 csf = loadCsf(info.source, { makeTitle: (title) => title });
-  const fileNode = csf._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 = printCsf(csf).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

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

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