@storybook/codemod 7.0.0-beta.9 → 7.0.0-rc.0

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>"
-`;

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

@@ -1,24 +0,0 @@
-import React from 'react';
-import Button from './Button';
-
-import { storiesOf } from '@storybook/react';
-
-export default {
-  title: 'Button',
-};
-
-export const story1 = () => <Button label="The Button" />;
-story1.story = {
-  name: 'with story parameters',
-  parameters: {
-    header: false,
-    inline: true,
-  },
-};
-
-export const foo = () => <Button label="Foo" />;
-foo.story = {
-  parameters: {
-    bar: 1,
-  },
-};

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

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

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

@@ -1,190 +0,0 @@
-import { prettyPrint } from 'recast';
-import { isExportStory } from '@storybook/csf';
-
-function exportMdx(root, options) {
-  // eslint-disable-next-line no-underscore-dangle
-  const path = root.__paths[0];
-
-  // FIXME: insert the title as markdown after all of the imports
-  return path.node.program.body
-    .map((n) => {
-      const { code } = prettyPrint(n, options);
-      if (n.type === 'JSXElement') {
-        return `${code}\n`;
-      }
-      return code;
-    })
-    .join('\n');
-}
-
-function parseIncludeExclude(prop) {
-  const { code } = prettyPrint(prop, {});
-  // eslint-disable-next-line no-eval
-  return (0, eval)(code);
-}
-
-/**
- * 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>
- * ```
- */
-export default function transformer(file, api) {
-  const j = api.jscodeshift;
-  const root = j(file.source);
-
-  // FIXME: save out all the storyFn.story = { ... }
-  const storyKeyToStory = {};
-  // save out includeStories / excludeStories
-  const 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) {
-    const story = storyKeyToStory[storyKey];
-    if (story) {
-      const name = story.properties.find((prop) => prop.key.name === 'name');
-      if (name && name.value.type === 'Literal') {
-        return name.value.value;
-      }
-    }
-    return storyKey;
-  }
-
-  function getStoryAttrs(storyKey) {
-    const attrs = [];
-    const story = storyKeyToStory[storyKey];
-    if (story) {
-      story.properties.forEach((prop) => {
-        const { key, value } = prop;
-        if (key.name !== 'name') {
-          attrs.push(makeAttr(key.name, value));
-        }
-      });
-    }
-    return attrs;
-  }
-
-  // 1. If the program does not have `export default { title: '....' }, skip it
-  const 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();
-  }
-
-  // 2a. Add imports from '@storybook/addon-docs'
-  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')
-      )
-    );
-  // 2b. Remove react import which is implicit
-  root
-    .find(j.ImportDeclaration)
-    .filter((decl) => decl.node.source.value === 'react')
-    .remove();
-
-  // 3. Save out all the excluded stories
-  defaultExportWithTitle.forEach((exp) => {
-    exp.node.declaration.properties.forEach((p) => {
-      if (['includeStories', 'excludeStories'].includes(p.key.name)) {
-        meta[p.key.name] = parseIncludeExclude(p.value);
-      }
-    });
-  });
-
-  // 4. Collect all the story exports in storyKeyToStory[key] = null;
-  const namedExports = root.find(j.ExportNamedDeclaration);
-  namedExports.forEach((exp) => {
-    const storyKey = exp.node.declaration.declarations[0].id.name;
-    if (isExportStory(storyKey, meta)) {
-      storyKeyToStory[storyKey] = null;
-    }
-  });
-
-  // 5. Collect all the storyKey.story in storyKeyToStory and also remove them
-  const storyAssignments = root.find(j.AssignmentExpression).filter((exp) => {
-    const { left } = exp.node;
-    return (
-      left.type === 'MemberExpression' &&
-      left.object.type === 'Identifier' &&
-      left.object.name in storyKeyToStory &&
-      left.property.type === 'Identifier' &&
-      left.property.name === 'story'
-    );
-  });
-  storyAssignments.forEach((exp) => {
-    const { left, right } = exp.node;
-    storyKeyToStory[left.object.name] = right;
-  });
-  storyAssignments.remove();
-
-  // 6. Convert the default export to <Meta />
-  defaultExportWithTitle.replaceWith((exp) => {
-    const jsxId = j.jsxIdentifier('Meta');
-    const attrs = [];
-    exp.node.declaration.properties.forEach((prop) => {
-      const { key, value } = prop;
-      if (!['includeStories', 'excludeStories'].includes(key.name)) {
-        attrs.push(makeAttr(key.name, value));
-      }
-    });
-    const opening = j.jsxOpeningElement(jsxId, attrs);
-    opening.selfClosing = true;
-    return j.jsxElement(opening);
-  });
-
-  // 7. Convert all the named exports to <Story>...</Story>
-  namedExports.replaceWith((exp) => {
-    const storyKey = exp.node.declaration.declarations[0].id.name;
-    if (!isExportStory(storyKey, meta)) {
-      return exp.node;
-    }
-    const jsxId = j.jsxIdentifier('Story');
-    const name = getName(storyKey);
-    const attributes = [makeAttr('name', j.literal(name)), ...getStoryAttrs(storyKey)];
-    const opening = j.jsxOpeningElement(jsxId, attributes);
-    const closing = j.jsxClosingElement(jsxId);
-    const children = [getStoryContents(exp.node.declaration.declarations[0].init)];
-    return j.jsxElement(opening, closing, children);
-  });
-
-  return exportMdx(root, { quote: 'single', trailingComma: 'true', tabWidth: 2 });
-}