@storybook/codemod 7.0.0-beta.27 → 7.0.0-beta.29

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/csf-2-to-3.ts

@@ -1,9 +1,14 @@
 /* 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 { formatCsf, loadCsf } from '@storybook/csf-tools';
-import type { API, FileInfo, Options } from 'jscodeshift';
+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;
 
@@ -89,19 +94,28 @@ const isReactGlobalRenderFn = (csf: CsfFile, storyFn: t.Expression) => {
 const isSimpleCSFStory = (init: t.Expression, annotations: t.ObjectProperty[]) =>
   annotations.length === 0 && t.isArrowFunctionExpression(init) && init.params.length === 0;
 
-export default function transform({ source, path }: FileInfo, api: API, options: Options) {
+export default function transform(info: FileInfo, api: API, options: { parser?: string }) {
   const makeTitle = (userTitle?: string) => {
     return userTitle || 'FIXME';
   };
-  const csf = loadCsf(source, { makeTitle });
+  const csf = loadCsf(info.source, { makeTitle });
 
   try {
     csf.parse();
   } catch (err) {
     logger.log(`Error ${err}, skipping`);
-    return source;
+    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]) => {
@@ -111,12 +125,15 @@ export default function transform({ source, path }: FileInfo, api: API, options:
     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)
-      ) {
+      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;
       }
 
@@ -128,26 +145,24 @@ export default function transform({ source, path }: FileInfo, api: API, options:
         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])),
+          t.variableDeclarator(
+            importHelper.updateTypeTo(id, 'StoryObj'),
+            t.objectExpression([...renderAnnotation, ...annotations])
+          ),
         ])
       );
     }
   });
 
-  const updatedBody = csf._ast.program.body.reduce((acc, stmt) => {
+  importHelper.removeDeprecatedStoryImport();
+
+  csf._ast.program.body = csf._ast.program.body.reduce((acc, stmt) => {
     // remove story annotations & template declarations
     if (isStoryAnnotation(stmt, objectExports) || isTemplateDeclaration(stmt, csf._templates)) {
       return acc;
@@ -164,8 +179,10 @@ export default function transform({ source, path }: FileInfo, api: API, options:
     acc.push(stmt);
     return acc;
   }, []);
-  csf._ast.program.body = updatedBody;
-  let output = formatCsf(csf);
+
+  upgradeDeprecatedTypes(file);
+
+  let output = recast.print(csf._ast, {}).code;
 
   try {
     const prettierConfig = prettier.resolveConfig.sync('.', { editorconfig: true }) || {
@@ -179,13 +196,117 @@ export default function transform({ source, path }: FileInfo, api: API, options:
     output = prettier.format(output, {
       ...prettierConfig,
       // This will infer the parser from the filename.
-      filepath: path,
+      filepath: info.path,
     });
   } catch (e) {
-    logger.log(`Failed applying prettier to ${path}.`);
+    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.'
+            );
+          }
+          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/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/dist/transforms/csf-to-mdx.d.ts

@@ -1,29 +0,0 @@
-/**
- * Convert a component's module story file into an MDX file
- *
- * For example:
- *
- * ```
- * input { Button } from './Button';
- * export default {
- *   title: 'Button'
- * }
- * export const story = () => <Button label="The Button" />;
- * ```
- *
- * Becomes:
- *
- * ```
- * import { Meta, Story } from '@storybook/addon-docs';
- * input { Button } from './Button';
- *
- * <Meta title='Button' />
- *
- * <Story name='story'>
- *   <Button label="The Button" />
- * </Story>
- * ```
- */
-declare function transformer(file: any, api: any): any;
-
-export { transformer as default };

package/dist/transforms/csf-to-mdx.js

@@ -1,3 +0,0 @@
-var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var csf_to_mdx_exports={};__export(csf_to_mdx_exports,{default:()=>transformer});module.exports=__toCommonJS(csf_to_mdx_exports);var import_recast=require("recast"),import_csf=require("@storybook/csf");function exportMdx(root,options){return root.__paths[0].node.program.body.map(n=>{let{code}=(0,import_recast.prettyPrint)(n,options);return n.type==="JSXElement"?`${code}
-`:code}).join(`
-`)}function parseIncludeExclude(prop){let{code}=(0,import_recast.prettyPrint)(prop,{});return(0,eval)(code)}function transformer(file,api){let j=api.jscodeshift,root=j(file.source),storyKeyToStory={},meta={};function makeAttr(key,val){return j.jsxAttribute(j.jsxIdentifier(key),val.type==="Literal"?val:j.jsxExpressionContainer(val))}function getStoryContents(node){return node.type==="ArrowFunctionExpression"&&node.body.type==="JSXElement"?node.body:j.jsxExpressionContainer(node)}function getName(storyKey){let story=storyKeyToStory[storyKey];if(story){let name=story.properties.find(prop=>prop.key.name==="name");if(name&&name.value.type==="Literal")return name.value.value}return storyKey}function getStoryAttrs(storyKey){let attrs=[],story=storyKeyToStory[storyKey];return story&&story.properties.forEach(prop=>{let{key,value}=prop;key.name!=="name"&&attrs.push(makeAttr(key.name,value))}),attrs}let defaultExportWithTitle=root.find(j.ExportDefaultDeclaration).filter(def=>def.node.declaration.properties.map(p=>p.key.name).includes("title"));if(defaultExportWithTitle.size()===0)return root.toSource();root.find(j.ImportDeclaration).at(-1).insertAfter(j.emptyStatement()).insertAfter(j.importDeclaration([j.importSpecifier(j.identifier("Meta")),j.importSpecifier(j.identifier("Story"))],j.literal("@storybook/addon-docs"))),root.find(j.ImportDeclaration).filter(decl=>decl.node.source.value==="react").remove(),defaultExportWithTitle.forEach(exp=>{exp.node.declaration.properties.forEach(p=>{["includeStories","excludeStories"].includes(p.key.name)&&(meta[p.key.name]=parseIncludeExclude(p.value))})});let namedExports=root.find(j.ExportNamedDeclaration);namedExports.forEach(exp=>{let storyKey=exp.node.declaration.declarations[0].id.name;(0,import_csf.isExportStory)(storyKey,meta)&&(storyKeyToStory[storyKey]=null)});let storyAssignments=root.find(j.AssignmentExpression).filter(exp=>{let{left}=exp.node;return left.type==="MemberExpression"&&left.object.type==="Identifier"&&left.object.name in storyKeyToStory&&left.property.type==="Identifier"&&left.property.name==="story"});return storyAssignments.forEach(exp=>{let{left,right}=exp.node;storyKeyToStory[left.object.name]=right}),storyAssignments.remove(),defaultExportWithTitle.replaceWith(exp=>{let jsxId=j.jsxIdentifier("Meta"),attrs=[];exp.node.declaration.properties.forEach(prop=>{let{key,value}=prop;["includeStories","excludeStories"].includes(key.name)||attrs.push(makeAttr(key.name,value))});let opening=j.jsxOpeningElement(jsxId,attrs);return opening.selfClosing=!0,j.jsxElement(opening)}),namedExports.replaceWith(exp=>{let storyKey=exp.node.declaration.declarations[0].id.name;if(!(0,import_csf.isExportStory)(storyKey,meta))return exp.node;let jsxId=j.jsxIdentifier("Story"),name=getName(storyKey),attributes=[makeAttr("name",j.literal(name)),...getStoryAttrs(storyKey)],opening=j.jsxOpeningElement(jsxId,attributes),closing=j.jsxClosingElement(jsxId),children=[getStoryContents(exp.node.declaration.declarations[0].init)];return j.jsxElement(opening,closing,children)}),exportMdx(root,{quote:"single",trailingComma:"true",tabWidth:2})}0&&(module.exports={});

package/dist/transforms/csf-to-mdx.mjs

@@ -1,3 +0,0 @@
-import{prettyPrint}from"recast";import{isExportStory}from"@storybook/csf";function exportMdx(root,options){return root.__paths[0].node.program.body.map(n=>{let{code}=prettyPrint(n,options);return n.type==="JSXElement"?`${code}
-`:code}).join(`
-`)}function parseIncludeExclude(prop){let{code}=prettyPrint(prop,{});return(0,eval)(code)}function transformer(file,api){let j=api.jscodeshift,root=j(file.source),storyKeyToStory={},meta={};function makeAttr(key,val){return j.jsxAttribute(j.jsxIdentifier(key),val.type==="Literal"?val:j.jsxExpressionContainer(val))}function getStoryContents(node){return node.type==="ArrowFunctionExpression"&&node.body.type==="JSXElement"?node.body:j.jsxExpressionContainer(node)}function getName(storyKey){let story=storyKeyToStory[storyKey];if(story){let name=story.properties.find(prop=>prop.key.name==="name");if(name&&name.value.type==="Literal")return name.value.value}return storyKey}function getStoryAttrs(storyKey){let attrs=[],story=storyKeyToStory[storyKey];return story&&story.properties.forEach(prop=>{let{key,value}=prop;key.name!=="name"&&attrs.push(makeAttr(key.name,value))}),attrs}let defaultExportWithTitle=root.find(j.ExportDefaultDeclaration).filter(def=>def.node.declaration.properties.map(p=>p.key.name).includes("title"));if(defaultExportWithTitle.size()===0)return root.toSource();root.find(j.ImportDeclaration).at(-1).insertAfter(j.emptyStatement()).insertAfter(j.importDeclaration([j.importSpecifier(j.identifier("Meta")),j.importSpecifier(j.identifier("Story"))],j.literal("@storybook/addon-docs"))),root.find(j.ImportDeclaration).filter(decl=>decl.node.source.value==="react").remove(),defaultExportWithTitle.forEach(exp=>{exp.node.declaration.properties.forEach(p=>{["includeStories","excludeStories"].includes(p.key.name)&&(meta[p.key.name]=parseIncludeExclude(p.value))})});let namedExports=root.find(j.ExportNamedDeclaration);namedExports.forEach(exp=>{let storyKey=exp.node.declaration.declarations[0].id.name;isExportStory(storyKey,meta)&&(storyKeyToStory[storyKey]=null)});let storyAssignments=root.find(j.AssignmentExpression).filter(exp=>{let{left}=exp.node;return left.type==="MemberExpression"&&left.object.type==="Identifier"&&left.object.name in storyKeyToStory&&left.property.type==="Identifier"&&left.property.name==="story"});return storyAssignments.forEach(exp=>{let{left,right}=exp.node;storyKeyToStory[left.object.name]=right}),storyAssignments.remove(),defaultExportWithTitle.replaceWith(exp=>{let jsxId=j.jsxIdentifier("Meta"),attrs=[];exp.node.declaration.properties.forEach(prop=>{let{key,value}=prop;["includeStories","excludeStories"].includes(key.name)||attrs.push(makeAttr(key.name,value))});let opening=j.jsxOpeningElement(jsxId,attrs);return opening.selfClosing=!0,j.jsxElement(opening)}),namedExports.replaceWith(exp=>{let storyKey=exp.node.declaration.declarations[0].id.name;if(!isExportStory(storyKey,meta))return exp.node;let jsxId=j.jsxIdentifier("Story"),name=getName(storyKey),attributes=[makeAttr("name",j.literal(name)),...getStoryAttrs(storyKey)],opening=j.jsxOpeningElement(jsxId,attributes),closing=j.jsxClosingElement(jsxId),children=[getStoryContents(exp.node.declaration.declarations[0].init)];return j.jsxElement(opening,closing,children)}),exportMdx(root,{quote:"single",trailingComma:"true",tabWidth:2})}export{transformer as default};

package/src/transforms/__testfixtures__/csf-to-mdx/basic.input.js

@@ -1,20 +0,0 @@
-import React from 'react';
-import Button from './Button';
-import { action } from '@storybook/addon-actions';
-
-export default {
-  title: 'Button',
-};
-
-export const story1 = () => <Button label="Story 1" />;
-
-export const story2 = () => <Button label="Story 2" onClick={action('click')} />;
-story2.story = { name: 'second story' };
-
-export const story3 = () => (
-  <div>
-    <Button label="The Button" onClick={action('onClick')} />
-    <br />
-  </div>
-);
-story3.story = { name: 'complex story' };

package/src/transforms/__testfixtures__/csf-to-mdx/basic.output.snapshot

@@ -1,18 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`csf-to-mdx transforms correctly using "basic.input.js" data 1`] = `
-"import Button from './Button';
-import { action } from '@storybook/addon-actions';
-import { Meta, Story } from '@storybook/addon-docs';
-
-<Meta title='Button' />
-
-<Story name='story1'><Button label='Story 1' /></Story>
-
-<Story name='second story'><Button label='Story 2' onClick={action('click')} /></Story>
-
-<Story name='complex story'><div>
-    <Button label='The Button' onClick={action('onClick')} />
-    <br />
-  </div></Story>"
-`;

package/src/transforms/__testfixtures__/csf-to-mdx/component-id.input.js

@@ -1,9 +0,0 @@
-import React from 'react';
-import Button from './Button';
-
-export default {
-  title: 'Button',
-  id: 'button-id',
-};
-
-export const someStory = () => <Button label="Story 1" />;

package/src/transforms/__testfixtures__/csf-to-mdx/component-id.output.snapshot

@@ -1,10 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`csf-to-mdx transforms correctly using "component-id.input.js" data 1`] = `
-"import Button from './Button';
-import { Meta, Story } from '@storybook/addon-docs';
-
-<Meta title='Button' id='button-id' />
-
-<Story name='someStory'><Button label='Story 1' /></Story>"
-`;

package/src/transforms/__testfixtures__/csf-to-mdx/decorators.input.js

@@ -1,13 +0,0 @@
-import React from 'react';
-import Button from './Button';
-
-export default {
-  title: 'Some.Button',
-  decorators: [withKnobs, (storyFn) => <div className="foo">{storyFn}</div>],
-};
-
-export const story1 = () => <Button label="The Button" />;
-story1.story = {
-  name: 'with decorator',
-  decorators: [withKnobs],
-};