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

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

@@ -0,0 +1,170 @@
+import { describe, expect, it } from '@jest/globals';
+import { dedent } from 'ts-dedent';
+import type { API } from 'jscodeshift';
+import ansiRegex from 'ansi-regex';
+import _transform from '../upgrade-deprecated-types';
+
+expect.addSnapshotSerializer({
+  print: (val: any) => val,
+  test: () => true,
+});
+
+const tsTransform = (source: string) =>
+  _transform({ source, path: 'Component.stories.ts' }, {} as API, { parser: 'tsx' }).trim();
+
+describe('upgrade-deprecated-types', () => {
+  describe('typescript', () => {
+    it('upgrade regular imports', () => {
+      expect(
+        tsTransform(dedent`
+          import { Story, ComponentMeta, Meta, ComponentStory, ComponentStoryObj, ComponentStoryFn } from '@storybook/react';
+          import { Cat, CatProps } from './Cat';
+            
+          const meta = { title: 'Cat', component: Cat } satisfies ComponentMeta<typeof Cat>
+          const meta2: Meta<CatProps> = { title: 'Cat', component: Cat };
+          export default meta;
+          
+          export const A: ComponentStory<typeof Cat> = (args) => <Cat {...args} />;
+          export const B: any = (args) => <Button {...args} />;
+          export const C: ComponentStoryFn<typeof Cat> = (args) => <Cat {...args} />;
+          export const D: ComponentStoryObj<typeof Cat> = {
+            args: {
+              name: 'Fluffy',
+            },
+          };
+          export const E: Story<CatProps> = (args) => <Cat {...args} />;
+        `)
+      ).toMatchInlineSnapshot(`
+        import { StoryFn, Meta, StoryObj } from '@storybook/react';
+        import { Cat, CatProps } from './Cat';
+
+        const meta = { title: 'Cat', component: Cat } satisfies Meta<typeof Cat>;
+        const meta2: Meta<CatProps> = { title: 'Cat', component: Cat };
+        export default meta;
+
+        export const A: StoryFn<typeof Cat> = (args) => <Cat {...args} />;
+        export const B: any = (args) => <Button {...args} />;
+        export const C: StoryFn<typeof Cat> = (args) => <Cat {...args} />;
+        export const D: StoryObj<typeof Cat> = {
+          args: {
+            name: 'Fluffy',
+          },
+        };
+        export const E: StoryFn<CatProps> = (args) => <Cat {...args} />;
+      `);
+    });
+
+    it('upgrade imports with local names', () => {
+      expect(
+        tsTransform(dedent`
+          import { Story as Story_, ComponentMeta as ComponentMeta_, ComponentStory as Story__, ComponentStoryObj as ComponentStoryObj_, ComponentStoryFn as StoryFn_ } from '@storybook/react';
+          import { Cat } from './Cat';
+            
+          const meta = { title: 'Cat', component: Cat } satisfies ComponentMeta_<typeof Cat>
+          const meta2: ComponentMeta_<typeof Cat> = { title: 'Cat', component: Cat };
+          export default meta;
+          
+          export const A: Story__<typeof Cat> = (args) => <Cat {...args} />;
+          export const B: any = (args) => <Button {...args} />;
+          export const C: StoryFn_<typeof Cat> = (args) => <Cat {...args} />;
+          export const D: ComponentStoryObj_<typeof Cat> = {
+            args: {
+              name: 'Fluffy',
+            },
+          };
+          export const E: Story_<CatProps> = (args) => <Cat {...args} />;
+        `)
+      ).toMatchInlineSnapshot(`
+        import {
+          StoryFn as Story_,
+          Meta as ComponentMeta_,
+          StoryObj as ComponentStoryObj_,
+        } from '@storybook/react';
+        import { Cat } from './Cat';
+
+        const meta = { title: 'Cat', component: Cat } satisfies ComponentMeta_<typeof Cat>;
+        const meta2: ComponentMeta_<typeof Cat> = { title: 'Cat', component: Cat };
+        export default meta;
+
+        export const A: Story__<typeof Cat> = (args) => <Cat {...args} />;
+        export const B: any = (args) => <Button {...args} />;
+        export const C: StoryFn_<typeof Cat> = (args) => <Cat {...args} />;
+        export const D: ComponentStoryObj_<typeof Cat> = {
+          args: {
+            name: 'Fluffy',
+          },
+        };
+        export const E: Story_<CatProps> = (args) => <Cat {...args} />;
+      `);
+    });
+
+    it('upgrade imports with conflicting local names', () => {
+      expect.addSnapshotSerializer({
+        serialize: (value) => value.replace(ansiRegex(), ''),
+        test: () => true,
+      });
+
+      expect(() =>
+        tsTransform(dedent`
+          import { ComponentMeta as Meta, ComponentStory as StoryFn } from '@storybook/react';
+          import { Cat } from './Cat';
+            
+          const meta = { title: 'Cat', component: Cat } satisfies Meta<typeof Cat>
+          export default meta;
+          
+          export const A: StoryFn<typeof Cat> = (args) => <Cat {...args} />;
+         
+        `)
+      ).toThrowErrorMatchingInlineSnapshot(`
+        This codemod does not support local imports that are called the same as a storybook import.
+        Rename this local import and try again.
+        > 1 |  import { ComponentMeta as Meta, ComponentStory as StoryFn } from '@storybook/react';
+            |           ^^^^^^^^^^^^^^^^^^^^^
+          2 |  import { Cat } from './Cat';
+          3 |    
+          4 |  const meta = { title: 'Cat', component: Cat } satisfies Meta<typeof Cat>
+      `);
+    });
+
+    it('upgrade namespaces', () => {
+      expect(
+        tsTransform(dedent`
+          import * as SB from '@storybook/react';
+          import { Cat, CatProps } from './Cat';
+  
+          const meta = { title: 'Cat', component: Cat } satisfies SB.ComponentMeta<typeof Cat>;
+          const meta2: SB.ComponentMeta<typeof Cat> = { title: 'Cat', component: Cat };
+          export default meta;
+  
+          export const A: SB.ComponentStory<typeof Cat> = (args) => <Cat {...args} />;
+          export const B: any = (args) => <Button {...args} />;
+          export const C: SB.ComponentStoryFn<typeof Cat> = (args) => <Cat {...args} />;
+          export const D: SB.ComponentStoryObj<typeof Cat> = {
+            args: {
+              name: 'Fluffy',
+            },
+          };
+          export const E: SB.Story<CatProps> = (args) => <Cat {...args} />;
+          
+        `)
+      ).toMatchInlineSnapshot(`
+        import * as SB from '@storybook/react';
+        import { Cat, CatProps } from './Cat';
+
+        const meta = { title: 'Cat', component: Cat } satisfies SB.Meta<typeof Cat>;
+        const meta2: SB.Meta<typeof Cat> = { title: 'Cat', component: Cat };
+        export default meta;
+
+        export const A: SB.StoryFn<typeof Cat> = (args) => <Cat {...args} />;
+        export const B: any = (args) => <Button {...args} />;
+        export const C: SB.StoryFn<typeof Cat> = (args) => <Cat {...args} />;
+        export const D: SB.StoryObj<typeof Cat> = {
+          args: {
+            name: 'Fluffy',
+          },
+        };
+        export const E: SB.StoryFn<CatProps> = (args) => <Cat {...args} />;
+      `);
+    });
+  });
+});

package/src/transforms/add-component-parameters.js

@@ -0,0 +1,62 @@
+/**
+ * Adds a `component` parameter for each storiesOf(...) call.
+ *
+ * For example:
+ *
+ * input { Button } from './Button';
+ * storiesOf('Button', module).add('story', () => <Button label="The Button" />);
+ *
+ * Becomes:
+ *
+ * input { Button } from './Button';
+ * storiesOf('Button', module)
+ *   .addParameters({ component: Button })
+ *   .add('story', () => <Button label="The Button" />);
+ *
+ * Heuristics:
+ * - The storiesOf "kind" name must be Button
+ * - Button must be imported in the file
+ */
+export default function transformer(file, api) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+
+  //  Create a dictionary whose keys are all the named imports in the file.
+  //  For instance:
+  //
+  //  import foo from 'foo';
+  //  import { bar, baz } from 'zoo';
+  //
+  //  => { foo: true, bar: true, baz: true }
+  const importMap = {};
+  root.find(j.ImportDeclaration).forEach((imp) =>
+    imp.node.specifiers.forEach((spec) => {
+      importMap[spec.local.name] = true;
+    })
+  );
+
+  function getLeafName(string) {
+    const parts = string.split(/\/|\.|\|/);
+    return parts[parts.length - 1];
+  }
+
+  function addComponentParameter(call) {
+    const { node } = call;
+    const leafName = getLeafName(node.arguments[0].value);
+    return j.callExpression(j.memberExpression(node, j.identifier('addParameters')), [
+      j.objectExpression([j.property('init', j.identifier('component'), j.identifier(leafName))]),
+    ]);
+  }
+
+  root
+    .find(j.CallExpression)
+    .filter((call) => call.node.callee.name === 'storiesOf')
+    .filter((call) => call.node.arguments.length > 0 && call.node.arguments[0].type === 'Literal')
+    .filter((call) => {
+      const leafName = getLeafName(call.node.arguments[0].value);
+      return importMap[leafName];
+    })
+    .replaceWith(addComponentParameter);
+
+  return root.toSource();
+}

package/src/transforms/csf-2-to-3.ts

@@ -0,0 +1,336 @@
+/* eslint-disable no-underscore-dangle */
+import prettier from 'prettier';
+import * as t from '@babel/types';
+import { isIdentifier, isTSTypeAnnotation, isTSTypeReference } from '@babel/types';
+import type { CsfFile } from '@storybook/csf-tools';
+import { loadCsf } from '@storybook/csf-tools';
+import type { API, FileInfo } from 'jscodeshift';
+import type { BabelFile, NodePath } from '@babel/core';
+import * as babel from '@babel/core';
+import * as recast from 'recast';
+import { upgradeDeprecatedTypes } from './upgrade-deprecated-types';
+
+const logger = console;
+
+const renameAnnotation = (annotation: string) => {
+  return annotation === 'storyName' ? 'name' : annotation;
+};
+
+const getTemplateBindVariable = (init: t.Expression) =>
+  t.isCallExpression(init) &&
+  t.isMemberExpression(init.callee) &&
+  t.isIdentifier(init.callee.object) &&
+  t.isIdentifier(init.callee.property) &&
+  init.callee.property.name === 'bind' &&
+  (init.arguments.length === 0 ||
+    (init.arguments.length === 1 &&
+      t.isObjectExpression(init.arguments[0]) &&
+      init.arguments[0].properties.length === 0))
+    ? init.callee.object.name
+    : null;
+
+// export const A = ...
+// A.parameters = { ... }; <===
+const isStoryAnnotation = (stmt: t.Statement, objectExports: Record<string, any>) =>
+  t.isExpressionStatement(stmt) &&
+  t.isAssignmentExpression(stmt.expression) &&
+  t.isMemberExpression(stmt.expression.left) &&
+  t.isIdentifier(stmt.expression.left.object) &&
+  objectExports[stmt.expression.left.object.name];
+
+const getNewExport = (stmt: t.Statement, objectExports: Record<string, any>) => {
+  if (
+    t.isExportNamedDeclaration(stmt) &&
+    t.isVariableDeclaration(stmt.declaration) &&
+    stmt.declaration.declarations.length === 1
+  ) {
+    const decl = stmt.declaration.declarations[0];
+    if (t.isVariableDeclarator(decl) && t.isIdentifier(decl.id)) {
+      return objectExports[decl.id.name];
+    }
+  }
+  return null;
+};
+
+// Remove render function when it matches the global render function in react
+// export default { component: Cat };
+// export const A = (args) => <Cat {...args} />;
+const isReactGlobalRenderFn = (csf: CsfFile, storyFn: t.Expression) => {
+  if (
+    csf._meta?.component &&
+    t.isArrowFunctionExpression(storyFn) &&
+    storyFn.params.length === 1 &&
+    t.isJSXElement(storyFn.body)
+  ) {
+    const { openingElement } = storyFn.body;
+    if (
+      openingElement.selfClosing &&
+      t.isJSXIdentifier(openingElement.name) &&
+      openingElement.attributes.length === 1
+    ) {
+      const attr = openingElement.attributes[0];
+      const param = storyFn.params[0];
+      if (
+        t.isJSXSpreadAttribute(attr) &&
+        t.isIdentifier(attr.argument) &&
+        t.isIdentifier(param) &&
+        param.name === attr.argument.name &&
+        csf._meta.component === openingElement.name.name
+      ) {
+        return true;
+      }
+    }
+  }
+  return false;
+};
+
+// A simple CSF story is a no-arg story without any extra annotations (params, args, etc.)
+const isSimpleCSFStory = (init: t.Expression, annotations: t.ObjectProperty[]) =>
+  annotations.length === 0 && t.isArrowFunctionExpression(init) && init.params.length === 0;
+
+function removeUnusedTemplates(csf: CsfFile) {
+  Object.entries(csf._templates).forEach(([template, templateExpression]) => {
+    const references: NodePath[] = [];
+    babel.traverse(csf._ast, {
+      Identifier: (path) => {
+        if (path.node.name === template) references.push(path);
+      },
+    });
+    // if there is only one reference and this reference is the variable declaration initializing the template
+    // then we are sure the template is unused
+    if (references.length === 1) {
+      const reference = references[0];
+      if (
+        reference.parentPath.isVariableDeclarator() &&
+        reference.parentPath.node.init === templateExpression
+      ) {
+        reference.parentPath.remove();
+      }
+    }
+  });
+}
+
+export default function transform(info: FileInfo, api: API, options: { parser?: string }) {
+  const makeTitle = (userTitle?: string) => {
+    return userTitle || 'FIXME';
+  };
+  const csf = loadCsf(info.source, { makeTitle });
+
+  try {
+    csf.parse();
+  } catch (err) {
+    logger.log(`Error ${err}, skipping`);
+    return info.source;
+  }
+
+  // This allows for showing buildCodeFrameError messages
+  // @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: csf._ast }
+  );
+
+  const importHelper = new StorybookImportHelper(file, info);
+
+  const objectExports: Record<string, t.Statement> = {};
+  Object.entries(csf._storyExports).forEach(([key, decl]) => {
+    const annotations = Object.entries(csf._storyAnnotations[key]).map(([annotation, val]) => {
+      return t.objectProperty(t.identifier(renameAnnotation(annotation)), val as t.Expression);
+    });
+
+    if (t.isVariableDeclarator(decl)) {
+      const { init, id } = decl;
+      // only replace arrow function expressions && template
+      const template = getTemplateBindVariable(init);
+      if (!t.isArrowFunctionExpression(init) && !template) return;
+      // Do change the type of no-arg stories without annotations to StoryFn when applicable
+      if (isSimpleCSFStory(init, annotations)) {
+        objectExports[key] = t.exportNamedDeclaration(
+          t.variableDeclaration('const', [
+            t.variableDeclarator(importHelper.updateTypeTo(id, 'StoryFn'), init),
+          ])
+        );
+        return;
+      }
+
+      let storyFn: t.Expression = template && t.identifier(template);
+      if (!storyFn) {
+        storyFn = init;
+      }
+
+      // Remove the render function when we can hoist the template
+      // const Template = (args) => <Cat {...args} />;
+      // export const A = Template.bind({});
+      const renderAnnotation = isReactGlobalRenderFn(
+        csf,
+        template ? csf._templates[template] : storyFn
+      )
+        ? []
+        : [t.objectProperty(t.identifier('render'), storyFn)];
+
+      objectExports[key] = t.exportNamedDeclaration(
+        t.variableDeclaration('const', [
+          t.variableDeclarator(
+            importHelper.updateTypeTo(id, 'StoryObj'),
+            t.objectExpression([...renderAnnotation, ...annotations])
+          ),
+        ])
+      );
+    }
+  });
+
+  csf._ast.program.body = csf._ast.program.body.reduce((acc, stmt) => {
+    const statement = stmt as t.Statement;
+    // remove story annotations & template declarations
+    if (isStoryAnnotation(statement, objectExports)) {
+      return acc;
+    }
+
+    // replace story exports with new object exports
+    const newExport = getNewExport(statement, objectExports);
+    if (newExport) {
+      acc.push(newExport);
+      return acc;
+    }
+
+    // include unknown statements
+    acc.push(statement);
+    return acc;
+  }, []);
+
+  upgradeDeprecatedTypes(file);
+  importHelper.removeDeprecatedStoryImport();
+  removeUnusedTemplates(csf);
+
+  let output = recast.print(csf._ast, {}).code;
+
+  try {
+    const prettierConfig = prettier.resolveConfig.sync('.', { editorconfig: true }) || {
+      printWidth: 100,
+      tabWidth: 2,
+      bracketSpacing: true,
+      trailingComma: 'es5',
+      singleQuote: true,
+    };
+
+    output = prettier.format(output, {
+      ...prettierConfig,
+      // This will infer the parser from the filename.
+      filepath: info.path,
+    });
+  } catch (e) {
+    logger.log(`Failed applying prettier to ${info.path}.`);
+  }
+
+  return output;
+}
+
+class StorybookImportHelper {
+  constructor(file: BabelFile, info: FileInfo) {
+    this.sbImportDeclarations = this.getAllSbImportDeclarations(file);
+  }
+
+  private sbImportDeclarations: NodePath<t.ImportDeclaration>[];
+
+  private getAllSbImportDeclarations = (file: BabelFile) => {
+    const found: NodePath<t.ImportDeclaration>[] = [];
+
+    file.path.traverse({
+      ImportDeclaration: (path) => {
+        const source = path.node.source.value;
+        if (source.startsWith('@storybook/csf') || !source.startsWith('@storybook')) return;
+        const isRendererImport = path.get('specifiers').some((specifier) => {
+          if (specifier.isImportNamespaceSpecifier()) {
+            // throw path.buildCodeFrameError(
+            //   `This codemod does not support namespace imports for a ${path.node.source.value} package.\n` +
+            //     'Replace the namespace import with named imports and try again.'
+            // );
+            throw new Error(
+              `This codemod does not support namespace imports for a ${path.node.source.value} package.\n` +
+                'Replace the namespace import with named imports and try again.'
+            );
+          }
+          if (!specifier.isImportSpecifier()) return false;
+          const imported = specifier.get('imported');
+          if (!imported.isIdentifier()) return false;
+
+          return [
+            'Story',
+            'StoryFn',
+            'StoryObj',
+            'Meta',
+            'ComponentStory',
+            'ComponentStoryFn',
+            'ComponentStoryObj',
+            'ComponentMeta',
+          ].includes(imported.node.name);
+        });
+
+        if (isRendererImport) found.push(path);
+      },
+    });
+    return found;
+  };
+
+  getOrAddImport = (type: string): string | undefined => {
+    // prefer type import
+    const sbImport =
+      this.sbImportDeclarations.find((path) => path.node.importKind === 'type') ??
+      this.sbImportDeclarations[0];
+    if (sbImport == null) return undefined;
+
+    const specifiers = sbImport.get('specifiers');
+    const importSpecifier = specifiers.find((specifier) => {
+      if (!specifier.isImportSpecifier()) return false;
+      const imported = specifier.get('imported');
+      if (!imported.isIdentifier()) return false;
+      return imported.node.name === type;
+    });
+    if (importSpecifier) return importSpecifier.node.local.name;
+    specifiers[0].insertBefore(t.importSpecifier(t.identifier(type), t.identifier(type)));
+    return type;
+  };
+
+  removeDeprecatedStoryImport = () => {
+    const specifiers = this.sbImportDeclarations.flatMap((it) => it.get('specifiers'));
+    const storyImports = specifiers.filter((specifier) => {
+      if (!specifier.isImportSpecifier()) return false;
+      const imported = specifier.get('imported');
+      if (!imported.isIdentifier()) return false;
+      return imported.node.name === 'Story';
+    });
+    storyImports.forEach((path) => path.remove());
+  };
+
+  getAllLocalImports = () => {
+    return this.sbImportDeclarations
+      .flatMap((it) => it.get('specifiers'))
+      .map((it) => it.node.local.name);
+  };
+
+  updateTypeTo = (id: t.LVal, type: string): t.LVal => {
+    if (
+      isIdentifier(id) &&
+      isTSTypeAnnotation(id.typeAnnotation) &&
+      isTSTypeReference(id.typeAnnotation.typeAnnotation) &&
+      isIdentifier(id.typeAnnotation.typeAnnotation.typeName)
+    ) {
+      const { name } = id.typeAnnotation.typeAnnotation.typeName;
+      if (this.getAllLocalImports().includes(name)) {
+        const localTypeImport = this.getOrAddImport(type);
+        return {
+          ...id,
+          typeAnnotation: t.tsTypeAnnotation(
+            t.tsTypeReference(
+              t.identifier(localTypeImport),
+              id.typeAnnotation.typeAnnotation.typeParameters
+            )
+          ),
+        };
+      }
+    }
+    return id;
+  };
+}
+
+export const parser = 'tsx';

package/src/transforms/csf-hoist-story-annotations.js

@@ -0,0 +1,97 @@
+const getContainingStatement = (n) => {
+  if (n.node.type.endsWith('Statement')) {
+    return n;
+  }
+  return getContainingStatement(n.parent);
+};
+
+/**
+ * Hoist CSF .story annotations
+ *
+ * For example:
+ *
+ * ```
+ * export const Basic = () => <Button />
+ * Basic.story = {
+ *   name: 'foo',
+ *   parameters: { ... },
+ *   decorators = [ ... ],
+ * };
+ * ```
+ *
+ * Becomes:
+ *
+ * ```
+ * export const Basic = () => <Button />
+ * Basic.storyName = 'foo';
+ * Basic.parameters = { ... };
+ * Basic.decorators = [ ... ];
+ * ```
+ */
+export default function transformer(file, api) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+
+  const renameKey = (exp) =>
+    exp.type === 'Identifier' && exp.name === 'name' ? j.identifier('storyName') : exp;
+
+  // 1. If the program does not have `export default { title: '....' }, skip it
+  const defaultExportWithTitle = root
+    .find(j.ExportDefaultDeclaration)
+    .filter(
+      (def) =>
+        def.node.declaration.type === 'ObjectExpression' &&
+        def.node.declaration.properties.map((p) => p.key.name).includes('title')
+    );
+  if (defaultExportWithTitle.size() === 0) {
+    return root.toSource();
+  }
+
+  // 2. Replace each Foo.story = { x: xVal } with Foo.x = xVal;
+  const storyAssignments = root.find(j.AssignmentExpression).filter((exp) => {
+    const { left, right } = exp.node;
+    return (
+      left.type === 'MemberExpression' &&
+      left.object.type === 'Identifier' &&
+      left.property.type === 'Identifier' &&
+      left.property.name === 'story' &&
+      right.type === 'ObjectExpression'
+    );
+  });
+  storyAssignments.forEach((exp) => {
+    const { left, right } = exp.node;
+    right.properties.forEach((prop) => {
+      const stmt = getContainingStatement(exp);
+      stmt.insertBefore(
+        j.assignmentStatement('=', j.memberExpression(left.object, renameKey(prop.key)), prop.value)
+      );
+    });
+  });
+
+  // 3. Remove the .story annotations
+  storyAssignments.remove();
+
+  // 4. Replace each Foo.story.x with Foo.x;
+  const storyOverrides = root.find(j.AssignmentExpression).filter((exp) => {
+    const { left } = exp.node;
+    return (
+      left.type === 'MemberExpression' &&
+      left.object.type === 'MemberExpression' &&
+      left.object.property.type === 'Identifier' &&
+      left.object.property.name === 'story' &&
+      left.property.type === 'Identifier'
+      // ?? ANNOTATION_FIELDS.includes(right.property.name)
+    );
+  });
+  storyOverrides.replaceWith((exp) => {
+    const { left, right } = exp.node;
+    return j.assignmentExpression(
+      '=',
+      j.memberExpression(left.object.object, renameKey(left.property)),
+      right
+    );
+  });
+
+  // 4. Render the updated tree
+  return root.toSource({ quote: 'single' });
+}