@storybook/codemod 7.0.0-beta.5 → 7.0.0-beta.51

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 { jscodeshiftToPrettierParser } from '../lib/utils';
+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;
 
-function transform({ source }: { source: string }, api: any, options: { parser?: string }) {
+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 @@ function transform({ source }: { source: string }, api: any, options: { parser?:
     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 @@ function transform({ source }: { source: string }, api: any, options: { parser?:
         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,21 +179,134 @@ function transform({ source }: { source: string }, api: any, options: { parser?:
     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,
+
+  upgradeDeprecatedTypes(file);
+
+  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.'
+            );
+          }
+          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;
   };
 
-  return prettier.format(output, {
-    ...prettierConfig,
-    parser: jscodeshiftToPrettierParser(options?.parser),
-  });
+  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 default transform;
+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/chunk-CO6EPEMB.mjs

@@ -1 +0,0 @@
-import camelCase from"lodash/camelCase";import upperFirst from"lodash/upperFirst";var sanitizeName=name=>{let key=upperFirst(camelCase(name));return/^\d/.test(key)&&(key=`_${key}`),/^\d/.test(key)&&(key=`_${key}`),key};function jscodeshiftToPrettierParser(parser){let parserMap={babylon:"babel",flow:"flow",ts:"typescript",tsx:"typescript"};return parser&&parserMap[parser]||"babel"}export{sanitizeName,jscodeshiftToPrettierParser};

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 y=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var C=Object.prototype.hasOwnProperty;var D=(s,r)=>{for(var t in r)y(s,t,{get:r[t],enumerable:!0})},M=(s,r,t,a)=>{if(r&&typeof r=="object"||typeof r=="function")for(let o of A(r))!C.call(s,o)&&o!==t&&y(s,o,{get:()=>r[o],enumerable:!(a=v(r,o))||a.enumerable});return s};var W=s=>M(y({},"__esModule",{value:!0}),s);var L={};D(L,{default:()=>g});module.exports=W(L);var E=require("recast"),x=require("@storybook/csf");function J(s,r){return s.__paths[0].node.program.body.map(a=>{let{code:o}=(0,E.prettyPrint)(a,r);return a.type==="JSXElement"?`${o}
-`:o}).join(`
-`)}function K(s){let{code:r}=(0,E.prettyPrint)(s,{});return(0,eval)(r)}function g(s,r){let t=r.jscodeshift,a=t(s.source),o={},p={};function f(n,e){return t.jsxAttribute(t.jsxIdentifier(n),e.type==="Literal"?e:t.jsxExpressionContainer(e))}function S(n){return n.type==="ArrowFunctionExpression"&&n.body.type==="JSXElement"?n.body:t.jsxExpressionContainer(n)}function b(n){let e=o[n];if(e){let i=e.properties.find(c=>c.key.name==="name");if(i&&i.value.type==="Literal")return i.value.value}return n}function I(n){let e=[],i=o[n];return i&&i.properties.forEach(c=>{let{key:l,value:d}=c;l.name!=="name"&&e.push(f(l.name,d))}),e}let u=a.find(t.ExportDefaultDeclaration).filter(n=>n.node.declaration.properties.map(e=>e.key.name).includes("title"));if(u.size()===0)return a.toSource();a.find(t.ImportDeclaration).at(-1).insertAfter(t.emptyStatement()).insertAfter(t.importDeclaration([t.importSpecifier(t.identifier("Meta")),t.importSpecifier(t.identifier("Story"))],t.literal("@storybook/addon-docs"))),a.find(t.ImportDeclaration).filter(n=>n.node.source.value==="react").remove(),u.forEach(n=>{n.node.declaration.properties.forEach(e=>{["includeStories","excludeStories"].includes(e.key.name)&&(p[e.key.name]=K(e.value))})});let j=a.find(t.ExportNamedDeclaration);j.forEach(n=>{let e=n.node.declaration.declarations[0].id.name;(0,x.isExportStory)(e,p)&&(o[e]=null)});let h=a.find(t.AssignmentExpression).filter(n=>{let{left:e}=n.node;return e.type==="MemberExpression"&&e.object.type==="Identifier"&&e.object.name in o&&e.property.type==="Identifier"&&e.property.name==="story"});return h.forEach(n=>{let{left:e,right:i}=n.node;o[e.object.name]=i}),h.remove(),u.replaceWith(n=>{let e=t.jsxIdentifier("Meta"),i=[];n.node.declaration.properties.forEach(l=>{let{key:d,value:m}=l;["includeStories","excludeStories"].includes(d.name)||i.push(f(d.name,m))});let c=t.jsxOpeningElement(e,i);return c.selfClosing=!0,t.jsxElement(c)}),j.replaceWith(n=>{let e=n.node.declaration.declarations[0].id.name;if(!(0,x.isExportStory)(e,p))return n.node;let i=t.jsxIdentifier("Story"),c=b(e),l=[f("name",t.literal(c)),...I(e)],d=t.jsxOpeningElement(i,l),m=t.jsxClosingElement(i),k=[S(n.node.declaration.declarations[0].init)];return t.jsxElement(d,m,k)}),J(a,{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],
-};

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

@@ -1,12 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`csf-to-mdx transforms correctly using "decorators.input.js" data 1`] = `
-"import Button from './Button';
-import { Meta, Story } from '@storybook/addon-docs';
-
-<Meta
-  title='Some.Button'
-  decorators={[withKnobs, storyFn => <div className='foo'>{storyFn}</div>]} />
-
-<Story name='with decorator' decorators={[withKnobs]}><Button label='The Button' /></Story>"
-`;

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

@@ -1,23 +0,0 @@
-import React from 'react';
-import Button from './Button';
-import { action } from '@storybook/addon-actions';
-
-export default {
-  title: 'Button',
-  excludeStories: /.*Data$/,
-};
-
-export const rowData = { col1: 'a', col2: 2 };
-
-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/exclude-stories.output.snapshot

@@ -1,22 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`csf-to-mdx transforms correctly using "exclude-stories.input.js" data 1`] = `
-"import Button from './Button';
-import { action } from '@storybook/addon-actions';
-import { Meta, Story } from '@storybook/addon-docs';
-
-<Meta title='Button' />
-
-export const rowData = {
-  col1: 'a',
-  col2: 2,
-};
-<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/parameters.input.js

@@ -1,16 +0,0 @@
-import React from 'react';
-import Button from './Button';
-
-import { storiesOf } from '@storybook/react';
-
-export default {
-  title: 'Button',
-  component: Button,
-  parameters: {
-    foo: 1,
-    bar: 2,
-  },
-};
-
-export const story1 = () => <Button label="The Button" />;
-story1.story = { name: 'with kind parameters' };

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

@@ -1,17 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`csf-to-mdx transforms correctly using "parameters.input.js" data 1`] = `
-"import Button from './Button';
-import { storiesOf } from '@storybook/react';
-import { Meta, Story } from '@storybook/addon-docs';
-
-<Meta
-  title='Button'
-  component={Button}
-  parameters={{
-    foo: 1,
-    bar: 2,
-  }} />
-
-<Story name='with kind parameters'><Button label='The Button' /></Story>"
-`;

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

@@ -1,19 +0,0 @@
-import global from 'global';
-
-const { document } = global;
-
-export default {
-  title: 'Function',
-};
-
-export const functionStory = () => {
-  const btn = document.createElement('button');
-  btn.innerHTML = 'Hello Button';
-  btn.addEventListener('click', action('Click'));
-  return btn;
-};
-
-functionStory.story = {
-  name: 'function',
-  height: '100px',
-};

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

@@ -1,18 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`csf-to-mdx transforms correctly using "story-function.input.js" data 1`] = `
-"import global from 'global';
-import { Meta, Story } from '@storybook/addon-docs';
-
-const {
-  document,
-} = global;
-<Meta title='Function' />
-
-<Story name='function' height='100px'>{() => {
-    const btn = document.createElement('button');
-    btn.innerHTML = 'Hello Button';
-    btn.addEventListener('click', action('Click'));
-    return btn;
-  }}</Story>"
-`;