@storybook/codemod 7.0.0-alpha.8 → 7.0.0-beta.1

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

@@ -0,0 +1,250 @@
+import { describe, it, expect } from '@jest/globals';
+import { dedent } from 'ts-dedent';
+import _transform from '../csf-2-to-3';
+
+expect.addSnapshotSerializer({
+  print: (val: any) => val,
+  test: () => true,
+});
+
+const jsTransform = (source: string) => _transform({ source }, null, {}).trim();
+const tsTransform = (source: string) => _transform({ source }, null, { parser: 'tsx' }).trim();
+
+describe('csf-2-to-3', () => {
+  describe('javascript', () => {
+    it('should replace non-simple function exports with objects', () => {
+      expect(
+        jsTransform(dedent`
+          export default { title: 'Cat' };
+          export const A = () => <Cat />;
+          export const B = (args) => <Button {...args} />;
+        `)
+      ).toMatchInlineSnapshot(`
+        export default {
+          title: 'Cat',
+        };
+        export const A = () => <Cat />;
+        export const B = {
+          render: (args) => <Button {...args} />,
+        };
+      `);
+    });
+
+    it('should move annotations into story objects', () => {
+      expect(
+        jsTransform(dedent`
+          export default { title: 'Cat' };
+          export const A = () => <Cat />;
+          A.storyName = 'foo';
+          A.parameters = { bar: 2 };
+          A.play = () => {};
+        `)
+      ).toMatchInlineSnapshot(`
+        export default {
+          title: 'Cat',
+        };
+        export const A = {
+          render: () => <Cat />,
+          name: 'foo',
+          parameters: {
+            bar: 2,
+          },
+          play: () => {},
+        };
+      `);
+    });
+
+    it('should ignore non-story exports, statements', () => {
+      expect(
+        jsTransform(dedent`
+          export default { title: 'components/Fruit', includeStories: ['A'] };
+          export const A = (args) => <Apple {...args} />;
+          export const B = (args) => <Banana {...args} />;
+          const C = (args) => <Cherry {...args} />;
+        `)
+      ).toMatchInlineSnapshot(`
+        export default {
+          title: 'components/Fruit',
+          includeStories: ['A'],
+        };
+        export const A = {
+          render: (args) => <Apple {...args} />,
+        };
+        export const B = (args) => <Banana {...args} />;
+        const C = (args) => <Cherry {...args} />;
+      `);
+    });
+
+    it('should do nothing when there is no meta', () => {
+      expect(
+        jsTransform(dedent`
+          export const A = () => <Apple />;
+          export const B = (args) => <Banana {...args} />;
+        `)
+      ).toMatchInlineSnapshot(`
+        export const A = () => <Apple />;
+        export const B = (args) => <Banana {...args} />;
+      `);
+    });
+
+    it('should remove implicit global render function (react)', () => {
+      expect(
+        jsTransform(dedent`
+          export default { title: 'Cat', component: Cat };
+          export const A = (args) => <Cat {...args} />;
+          export const B = (args) => <Banana {...args} />;
+        `)
+      ).toMatchInlineSnapshot(`
+        export default {
+          title: 'Cat',
+          component: Cat,
+        };
+        export const A = {};
+        export const B = {
+          render: (args) => <Banana {...args} />,
+        };
+      `);
+    });
+
+    it('should ignore object exports', () => {
+      expect(
+        jsTransform(dedent`
+          export default { title: 'Cat', component: Cat };
+          export const A = {
+            render: (args) => <Cat {...args} />
+          };
+        `)
+      ).toMatchInlineSnapshot(`
+        export default {
+          title: 'Cat',
+          component: Cat,
+        };
+        export const A = {
+          render: (args) => <Cat {...args} />,
+        };
+      `);
+    });
+
+    it('should hoist template.bind (if there is only one)', () => {
+      expect(
+        jsTransform(dedent`
+          export default { title: 'Cat' };
+          const Template = (args) => <Cat {...args} />;
+          export const A = Template.bind({});
+          A.args = { isPrimary: false };
+        `)
+      ).toMatchInlineSnapshot(`
+        export default {
+          title: 'Cat',
+        };
+        export const A = {
+          render: (args) => <Cat {...args} />,
+          args: {
+            isPrimary: false,
+          },
+        };
+      `);
+    });
+
+    it('should remove implicit global render for template.bind', () => {
+      expect(
+        jsTransform(dedent`
+          export default { title: 'Cat', component: Cat };
+          const Template = (args) => <Cat {...args} />;
+          export const A = Template.bind({});
+          A.args = { isPrimary: false };
+          const Template2 = (args) => <Banana {...args} />;
+          export const B = Template2.bind({});
+          B.args = { isPrimary: true };
+        `)
+      ).toMatchInlineSnapshot(`
+        export default {
+          title: 'Cat',
+          component: Cat,
+        };
+        export const A = {
+          args: {
+            isPrimary: false,
+          },
+        };
+        export const B = {
+          render: (args) => <Banana {...args} />,
+          args: {
+            isPrimary: true,
+          },
+        };
+      `);
+    });
+
+    it('should ignore no-arg stories without annotations', () => {
+      expect(
+        jsTransform(dedent`
+          export default { title: 'Cat', component: Cat };
+          export const A = (args) => <Cat {...args} />;
+          export const B = () => <Cat name="frisky" />;
+          export const C = () => <Cat name="fluffy" />;
+          C.parameters = { foo: 2 };
+        `)
+      ).toMatchInlineSnapshot(`
+        export default {
+          title: 'Cat',
+          component: Cat,
+        };
+        export const A = {};
+        export const B = () => <Cat name="frisky" />;
+        export const C = {
+          render: () => <Cat name="fluffy" />,
+          parameters: {
+            foo: 2,
+          },
+        };
+      `);
+    });
+
+    it('should work for v1-style annotations', () => {
+      expect(
+        jsTransform(dedent`
+          export default { title: 'Cat' };
+          export const A = (args) => <Cat {...args} />;
+          A.story = {
+            parameters: { foo: 2 }
+          };
+        `)
+      ).toMatchInlineSnapshot(`
+        export default {
+          title: 'Cat',
+        };
+        export const A = {
+          render: (args) => <Cat {...args} />,
+          parameters: {
+            foo: 2,
+          },
+        };
+      `);
+    });
+  });
+
+  describe('typescript', () => {
+    it('should replace function exports with objects', () => {
+      expect(
+        tsTransform(dedent`
+          export default { title: 'Cat' } as Meta<CatProps>;
+          export const A: Story<CatProps> = (args) => <Cat {...args} />;
+          export const B: any = (args) => <Button {...args} />;
+          export const C: Story<CatProps> = () => <Cat />;
+        `)
+      ).toMatchInlineSnapshot(`
+        export default {
+          title: 'Cat',
+        } as Meta<CatProps>;
+        export const A: Story<CatProps> = {
+          render: (args) => <Cat {...args} />,
+        };
+        export const B: any = {
+          render: (args) => <Button {...args} />,
+        };
+        export const C: Story<CatProps> = () => <Cat />;
+      `);
+    });
+  });
+});

package/src/transforms/__tests__/transforms.tests.js

@@ -0,0 +1,32 @@
+import path from 'path';
+import fs from 'fs';
+import 'jest-specific-snapshot';
+import { applyTransform } from 'jscodeshift/dist/testUtils';
+
+jest.mock('@storybook/node-logger');
+
+const inputRegExp = /\.input\.js$/;
+
+const fixturesDir = path.resolve(__dirname, '../__testfixtures__');
+fs.readdirSync(fixturesDir).forEach((transformName) => {
+  // FIXME: delete after https://github.com/storybookjs/storybook/issues/19497
+  if (transformName === 'mdx-to-csf') return;
+
+  const transformFixturesDir = path.join(fixturesDir, transformName);
+  describe(`${transformName}`, () => {
+    fs.readdirSync(transformFixturesDir)
+      .filter((fileName) => inputRegExp.test(fileName))
+      .forEach((fileName) => {
+        const inputPath = path.join(transformFixturesDir, fileName);
+        it(`transforms correctly using "${fileName}" data`, () =>
+          expect(
+            applyTransform(
+              // eslint-disable-next-line global-require,import/no-dynamic-require
+              require(path.join(__dirname, '..', transformName)),
+              null,
+              { path: inputPath, source: fs.readFileSync(inputPath, 'utf8') }
+            )
+          ).toMatchSpecificSnapshot(inputPath.replace(inputRegExp, '.output.snapshot')));
+      });
+  });
+});

package/{dist/esm → src}/transforms/add-component-parameters.js

@@ -18,40 +18,45 @@
  * - Button must be imported in the file
  */
 export default function transformer(file, api) {
-  var j = api.jscodeshift;
-  var root = j(file.source); //  Create a dictionary whose keys are all the named imports in the file.
+  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 }
-
-  var importMap = {};
-  root.find(j.ImportDeclaration).forEach(function (imp) {
-    return imp.node.specifiers.forEach(function (spec) {
+  const importMap = {};
+  root.find(j.ImportDeclaration).forEach((imp) =>
+    imp.node.specifiers.forEach((spec) => {
       importMap[spec.local.name] = true;
-    });
-  });
+    })
+  );
 
   function getLeafName(string) {
-    var parts = string.split(/\/|\.|\|/);
+    const parts = string.split(/\/|\.|\|/);
     return parts[parts.length - 1];
   }
 
   function addComponentParameter(call) {
-    var node = call.node;
-    var 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))])]);
+    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))]),
+    ]);
   }
 
-  var storiesOfCalls = root.find(j.CallExpression).filter(function (call) {
-    return call.node.callee.name === 'storiesOf';
-  }).filter(function (call) {
-    return call.node.arguments.length > 0 && call.node.arguments[0].type === 'Literal';
-  }).filter(function (call) {
-    var leafName = getLeafName(call.node.arguments[0].value);
-    return importMap[leafName];
-  }).replaceWith(addComponentParameter);
+  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,184 @@
+/* eslint-disable no-underscore-dangle */
+import prettier from 'prettier';
+import * as t from '@babel/types';
+import type { CsfFile } from '@storybook/csf-tools';
+import { formatCsf, loadCsf } from '@storybook/csf-tools';
+import { jscodeshiftToPrettierParser } from '../lib/utils';
+
+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 isTemplateDeclaration = (stmt: t.Statement, templates: Record<string, any>) =>
+  t.isVariableDeclaration(stmt) &&
+  stmt.declarations.length === 1 &&
+  t.isIdentifier(stmt.declarations[0].id) &&
+  templates[stmt.declarations[0].id.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 transform({ source }: { source: string }, api: any, options: { parser?: string }) {
+  const makeTitle = (userTitle?: string) => {
+    return userTitle || 'FIXME';
+  };
+  const csf = loadCsf(source, { makeTitle });
+
+  try {
+    csf.parse();
+  } catch (err) {
+    logger.log(`Error ${err}, skipping`);
+    return source;
+  }
+
+  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
+      // ignore no-arg stories without annotations
+      const template = getTemplateBindVariable(init);
+      if (
+        (!t.isArrowFunctionExpression(init) && !template) ||
+        isSimpleCSFStory(init, annotations)
+      ) {
+        return;
+      }
+
+      // Remove the render function when we can hoist the template
+      // const Template = (args) => <Cat {...args} />;
+      // export const A = Template.bind({});
+      let storyFn = template && csf._templates[template];
+      if (!storyFn) {
+        storyFn = init;
+      }
+
+      const keyId = t.identifier(key);
+      // @ts-expect-error (Converted from ts-ignore)
+      const { typeAnnotation } = id;
+      if (typeAnnotation) {
+        keyId.typeAnnotation = typeAnnotation;
+      }
+
+      const renderAnnotation = isReactGlobalRenderFn(csf, storyFn)
+        ? []
+        : [t.objectProperty(t.identifier('render'), storyFn)];
+
+      objectExports[key] = t.exportNamedDeclaration(
+        t.variableDeclaration('const', [
+          t.variableDeclarator(keyId, t.objectExpression([...renderAnnotation, ...annotations])),
+        ])
+      );
+    }
+  });
+
+  const updatedBody = csf._ast.program.body.reduce((acc, stmt) => {
+    // remove story annotations & template declarations
+    if (isStoryAnnotation(stmt, objectExports) || isTemplateDeclaration(stmt, csf._templates)) {
+      return acc;
+    }
+
+    // replace story exports with new object exports
+    const newExport = getNewExport(stmt, objectExports);
+    if (newExport) {
+      acc.push(newExport);
+      return acc;
+    }
+
+    // include unknown statements
+    acc.push(stmt);
+    return acc;
+  }, []);
+  csf._ast.program.body = updatedBody;
+  const output = formatCsf(csf);
+
+  const prettierConfig = prettier.resolveConfig.sync('.', { editorconfig: true }) || {
+    printWidth: 100,
+    tabWidth: 2,
+    bracketSpacing: true,
+    trailingComma: 'es5',
+    singleQuote: true,
+  };
+
+  return prettier.format(output, {
+    ...prettierConfig,
+    parser: jscodeshiftToPrettierParser(options?.parser),
+  });
+}
+
+export default transform;

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' });
+}