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

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

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

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

@@ -1,335 +0,0 @@
-/* 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, printCsf } from '@storybook/csf-tools';
-import type { API, FileInfo } from 'jscodeshift';
-import type { BabelFile, NodePath } from '@babel/core';
-import * as babel from '@babel/core';
-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 = 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,
-      // 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

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