mdx-compiler-plugin.test.js.snap

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`docs-mdx-compiler-plugin decorators.mdx 1`] = `
"/* @jsx mdx */
import { DocsContainer } from '@storybook/addon-docs/blocks';

import { Button } from '@storybook/react/demo';
import { Story, Meta } from '@storybook/addon-docs/blocks';

const makeShortcode = name =>
  function MDXDefaultShortcode(props) {
    console.warn(
      'Component ' +
        name +
        ' was not imported, exported, or provided by MDXProvider as global scope'
    );
    return <div {...props} />;
  };

const layoutProps = {};
const MDXLayout = 'wrapper';
function MDXContent({ components, ...props }) {
  return (
    <MDXLayout {...layoutProps} {...props} components={components} mdxType=\\"MDXLayout\\">
      <Meta
        title=\\"Button\\"
        decorators={[
          storyFn => (
            <div
              style={{
                backgroundColor: 'yellow',
              }}
            >
              {storyFn()}
            </div>
          ),
        ]}
        mdxType=\\"Meta\\"
      />
      <h1>{\`Decorated story\`}</h1>
      <Story
        name=\\"one\\"
        decorators={[storyFn => <div className=\\"local\\">{storyFn()}</div>]}
        mdxType=\\"Story\\"
      >
        <Button mdxType=\\"Button\\">One</Button>
      </Story>
    </MDXLayout>
  );
}

MDXContent.isMDXComponent = true;

export const one = () => <Button>One</Button>;
one.story = {};
one.story.name = 'one';
one.story.parameters = { mdxSource: '<Button>One</Button>' };
one.story.decorators = [storyFn => <div className=\\"local\\">{storyFn()}</div>];

const componentMeta = {
  title: 'Button',
  decorators: [
    storyFn => (
      <div
        style={{
          backgroundColor: 'yellow',
        }}
      >
        {storyFn()}
      </div>
    ),
  ],
  includeStories: ['one'],
};

const mdxStoryNameToId = { one: 'button--one' };

componentMeta.parameters = componentMeta.parameters || {};
componentMeta.parameters.docs = {
  container: ({ context, children }) => (
    <DocsContainer context={{ ...context, mdxStoryNameToId }}>{children}</DocsContainer>
  ),
  page: MDXContent,
};

export default componentMeta;
"
`;

exports[`docs-mdx-compiler-plugin docs-only.mdx 1`] = `
"/* @jsx mdx */
import { DocsContainer } from '@storybook/addon-docs/blocks';

import { Meta } from '@storybook/addon-docs/blocks';

const makeShortcode = name =>
  function MDXDefaultShortcode(props) {
    console.warn(
      'Component ' +
        name +
        ' was not imported, exported, or provided by MDXProvider as global scope'
    );
    return <div {...props} />;
  };

const layoutProps = {};
const MDXLayout = 'wrapper';
function MDXContent({ components, ...props }) {
  return (
    <MDXLayout {...layoutProps} {...props} components={components} mdxType=\\"MDXLayout\\">
      <Meta title=\\"docs-only\\" mdxType=\\"Meta\\" />
      <h1>{\`Documentation only\`}</h1>
      <p>
        {\`This is a documentation-only MDX file which generates a dummy \`}
        <inlineCode parentName=\\"p\\">{\`docsOnly: true\`}</inlineCode>
        {\` story.\`}
      </p>
    </MDXLayout>
  );
}

MDXContent.isMDXComponent = true;

export const __page = () => {
  throw new Error('Docs-only story');
};

__page.story = { parameters: { docsOnly: true } };

const componentMeta = { title: 'docs-only', includeStories: ['__page'] };

const mdxStoryNameToId = {};

componentMeta.parameters = componentMeta.parameters || {};
componentMeta.parameters.docs = {
  container: ({ context, children }) => (
    <DocsContainer context={{ ...context, mdxStoryNameToId }}>{children}</DocsContainer>
  ),
  page: MDXContent,
};

export default componentMeta;
"
`;

exports[`docs-mdx-compiler-plugin non-story-exports.mdx 1`] = `
"/* @jsx mdx */
import { DocsContainer } from '@storybook/addon-docs/blocks';

import { Button } from '@storybook/react/demo';
import { Story, Meta } from '@storybook/addon-docs/blocks';
export const two = 2;
const makeShortcode = name =>
  function MDXDefaultShortcode(props) {
    console.warn(
      'Component ' +
        name +
        ' was not imported, exported, or provided by MDXProvider as global scope'
    );
    return <div {...props} />;
  };

const layoutProps = {
  two,
};
const MDXLayout = 'wrapper';
function MDXContent({ components, ...props }) {
  return (
    <MDXLayout {...layoutProps} {...props} components={components} mdxType=\\"MDXLayout\\">
      <Meta title=\\"Button\\" mdxType=\\"Meta\\" />
      <h1>{\`Story definition\`}</h1>
      <Story name=\\"one\\" mdxType=\\"Story\\">
        <Button mdxType=\\"Button\\">One</Button>
      </Story>

      <Story name=\\"hello story\\" mdxType=\\"Story\\">
        <Button mdxType=\\"Button\\">Hello button</Button>
      </Story>
    </MDXLayout>
  );
}

MDXContent.isMDXComponent = true;

export const one = () => <Button>One</Button>;
one.story = {};
one.story.name = 'one';
one.story.parameters = { mdxSource: '<Button>One</Button>' };

export const helloStory = () => <Button>Hello button</Button>;
helloStory.story = {};
helloStory.story.name = 'hello story';
helloStory.story.parameters = { mdxSource: '<Button>Hello button</Button>' };

const componentMeta = { title: 'Button', includeStories: ['one', 'helloStory'] };

const mdxStoryNameToId = { one: 'button--one', 'hello story': 'button--hello-story' };

componentMeta.parameters = componentMeta.parameters || {};
componentMeta.parameters.docs = {
  container: ({ context, children }) => (
    <DocsContainer context={{ ...context, mdxStoryNameToId }}>{children}</DocsContainer>
  ),
  page: MDXContent,
};

export default componentMeta;
"
`;

exports[`docs-mdx-compiler-plugin parameters.mdx 1`] = `
"/* @jsx mdx */
import { DocsContainer } from '@storybook/addon-docs/blocks';

import { Button } from '@storybook/react/demo';
import { Story, Meta } from '@storybook/addon-docs/blocks';

const makeShortcode = name =>
  function MDXDefaultShortcode(props) {
    console.warn(
      'Component ' +
        name +
        ' was not imported, exported, or provided by MDXProvider as global scope'
    );
    return <div {...props} />;
  };

const layoutProps = {};
const MDXLayout = 'wrapper';
function MDXContent({ components, ...props }) {
  return (
    <MDXLayout {...layoutProps} {...props} components={components} mdxType=\\"MDXLayout\\">
      <Meta
        title=\\"Button\\"
        component={Button}
        parameters={{
          notes: 'component notes',
        }}
        mdxType=\\"Meta\\"
      />
      <Story name=\\"component notes\\" mdxType=\\"Story\\">
        <Button mdxType=\\"Button\\">Component notes</Button>
      </Story>
      <Story
        name=\\"story notes\\"
        parameters={{
          notes: 'story notes',
        }}
        mdxType=\\"Story\\"
      >
        <Button mdxType=\\"Button\\">Story notes</Button>
      </Story>
    </MDXLayout>
  );
}

MDXContent.isMDXComponent = true;

export const componentNotes = () => <Button>Component notes</Button>;
componentNotes.story = {};
componentNotes.story.name = 'component notes';
componentNotes.story.parameters = { mdxSource: '<Button>Component notes</Button>' };

export const storyNotes = () => <Button>Story notes</Button>;
storyNotes.story = {};
storyNotes.story.name = 'story notes';
storyNotes.story.parameters = {
  mdxSource: '<Button>Story notes</Button>',
  ...{
    notes: 'story notes',
  },
};

const componentMeta = {
  title: 'Button',
  parameters: {
    notes: 'component notes',
  },
  includeStories: ['componentNotes', 'storyNotes'],
};

const mdxStoryNameToId = {
  'component notes': 'button--component-notes',
  'story notes': 'button--story-notes',
};

componentMeta.parameters = componentMeta.parameters || {};
componentMeta.parameters.docs = {
  container: ({ context, children }) => (
    <DocsContainer context={{ ...context, mdxStoryNameToId }}>{children}</DocsContainer>
  ),
  page: MDXContent,
};

export default componentMeta;
"
`;

exports[`docs-mdx-compiler-plugin previews.mdx 1`] = `
"/* @jsx mdx */
import { DocsContainer } from '@storybook/addon-docs/blocks';

import { Button } from '@storybook/react/demo';
import { Preview, Story, Meta } from '@storybook/addon-docs/blocks';

const makeShortcode = name =>
  function MDXDefaultShortcode(props) {
    console.warn(
      'Component ' +
        name +
        ' was not imported, exported, or provided by MDXProvider as global scope'
    );
    return <div {...props} />;
  };

const layoutProps = {};
const MDXLayout = 'wrapper';
function MDXContent({ components, ...props }) {
  return (
    <MDXLayout {...layoutProps} {...props} components={components} mdxType=\\"MDXLayout\\">
      <Meta
        title=\\"Button\\"
        component={Button}
        parameters={{
          notes: 'component notes',
        }}
        mdxType=\\"Meta\\"
      />
      <h1>{\`Preview\`}</h1>
      <p>{\`Previews can contain normal components, stories, and story references\`}</p>
      <Preview mdxType=\\"Preview\\">
        <Button mdxType=\\"Button\\">Just a button</Button>
        <Story name=\\"hello button\\" mdxType=\\"Story\\">
          <Button mdxType=\\"Button\\">Hello button</Button>
        </Story>
        <Story name=\\"two\\" mdxType=\\"Story\\">
          <Button mdxType=\\"Button\\">Two</Button>
        </Story>
        <Story id=\\"welcome--welcome\\" mdxType=\\"Story\\" />
      </Preview>
    </MDXLayout>
  );
}

MDXContent.isMDXComponent = true;

export const helloButton = () => <Button>Hello button</Button>;
helloButton.story = {};
helloButton.story.name = 'hello button';
helloButton.story.parameters = { mdxSource: '<Button>Hello button</Button>' };

export const two = () => <Button>Two</Button>;
two.story = {};
two.story.name = 'two';
two.story.parameters = { mdxSource: '<Button>Two</Button>' };

const componentMeta = {
  title: 'Button',
  parameters: {
    notes: 'component notes',
  },
  includeStories: ['helloButton', 'two'],
};

const mdxStoryNameToId = { 'hello button': 'button--hello-button', two: 'button--two' };

componentMeta.parameters = componentMeta.parameters || {};
componentMeta.parameters.docs = {
  container: ({ context, children }) => (
    <DocsContainer context={{ ...context, mdxStoryNameToId }}>{children}</DocsContainer>
  ),
  page: MDXContent,
};

export default componentMeta;
"
`;

exports[`docs-mdx-compiler-plugin story-current.mdx 1`] = `
"/* @jsx mdx */
import { DocsContainer } from '@storybook/addon-docs/blocks';

import { Story } from '@storybook/addon-docs/blocks';

const makeShortcode = name =>
  function MDXDefaultShortcode(props) {
    console.warn(
      'Component ' +
        name +
        ' was not imported, exported, or provided by MDXProvider as global scope'
    );
    return <div {...props} />;
  };

const layoutProps = {};
const MDXLayout = 'wrapper';
function MDXContent({ components, ...props }) {
  return (
    <MDXLayout {...layoutProps} {...props} components={components} mdxType=\\"MDXLayout\\">
      <h1>{\`Current story\`}</h1>
      <Story id=\\".\\" mdxType=\\"Story\\" />
    </MDXLayout>
  );
}

MDXContent.isMDXComponent = true;

const componentMeta = { includeStories: [] };

const mdxStoryNameToId = {};

componentMeta.parameters = componentMeta.parameters || {};
componentMeta.parameters.docs = {
  container: ({ context, children }) => (
    <DocsContainer context={{ ...context, mdxStoryNameToId }}>{children}</DocsContainer>
  ),
  page: MDXContent,
};

export default componentMeta;
"
`;

exports[`docs-mdx-compiler-plugin story-def-text-only.mdx 1`] = `
"/* @jsx mdx */
import { DocsContainer } from '@storybook/addon-docs/blocks';

import { Story, Meta } from '@storybook/addon-docs/blocks';

const makeShortcode = name =>
  function MDXDefaultShortcode(props) {
    console.warn(
      'Component ' +
        name +
        ' was not imported, exported, or provided by MDXProvider as global scope'
    );
    return <div {...props} />;
  };

const layoutProps = {};
const MDXLayout = 'wrapper';
function MDXContent({ components, ...props }) {
  return (
    <MDXLayout {...layoutProps} {...props} components={components} mdxType=\\"MDXLayout\\">
      <Meta title=\\"Text\\" mdxType=\\"Meta\\" />
      <h1>{\`Story definition\`}</h1>
      <Story name=\\"text\\" mdxType=\\"Story\\">
        Plain text
      </Story>
    </MDXLayout>
  );
}

MDXContent.isMDXComponent = true;

export const text = () => 'Plain text';
text.story = {};
text.story.name = 'text';
text.story.parameters = { mdxSource: \\"'Plain text'\\" };

const componentMeta = { title: 'Text', includeStories: ['text'] };

const mdxStoryNameToId = { text: 'text--text' };

componentMeta.parameters = componentMeta.parameters || {};
componentMeta.parameters.docs = {
  container: ({ context, children }) => (
    <DocsContainer context={{ ...context, mdxStoryNameToId }}>{children}</DocsContainer>
  ),
  page: MDXContent,
};

export default componentMeta;
"
`;

exports[`docs-mdx-compiler-plugin story-definitions.mdx 1`] = `
"/* @jsx mdx */
import { DocsContainer } from '@storybook/addon-docs/blocks';

import { Button } from '@storybook/react/demo';
import { Story, Meta } from '@storybook/addon-docs/blocks';

const makeShortcode = name =>
  function MDXDefaultShortcode(props) {
    console.warn(
      'Component ' +
        name +
        ' was not imported, exported, or provided by MDXProvider as global scope'
    );
    return <div {...props} />;
  };

const layoutProps = {};
const MDXLayout = 'wrapper';
function MDXContent({ components, ...props }) {
  return (
    <MDXLayout {...layoutProps} {...props} components={components} mdxType=\\"MDXLayout\\">
      <Meta title=\\"Button\\" mdxType=\\"Meta\\" />
      <h1>{\`Story definition\`}</h1>
      <Story name=\\"one\\" mdxType=\\"Story\\">
        <Button mdxType=\\"Button\\">One</Button>
      </Story>
      <Story name=\\"hello story\\" mdxType=\\"Story\\">
        <Button mdxType=\\"Button\\">Hello button</Button>
      </Story>
      <Story name=\\"w/punctuation\\" mdxType=\\"Story\\">
        <Button mdxType=\\"Button\\">with punctuation</Button>
      </Story>
      <Story name=\\"1 fine day\\" mdxType=\\"Story\\">
        <Button mdxType=\\"Button\\">starts with number</Button>
      </Story>
    </MDXLayout>
  );
}

MDXContent.isMDXComponent = true;

export const one = () => <Button>One</Button>;
one.story = {};
one.story.name = 'one';
one.story.parameters = { mdxSource: '<Button>One</Button>' };

export const helloStory = () => <Button>Hello button</Button>;
helloStory.story = {};
helloStory.story.name = 'hello story';
helloStory.story.parameters = { mdxSource: '<Button>Hello button</Button>' };

export const wPunctuation = () => <Button>with punctuation</Button>;
wPunctuation.story = {};
wPunctuation.story.name = 'w/punctuation';
wPunctuation.story.parameters = { mdxSource: '<Button>with punctuation</Button>' };

export const _1FineDay = () => <Button>starts with number</Button>;
_1FineDay.story = {};
_1FineDay.story.name = '1 fine day';
_1FineDay.story.parameters = { mdxSource: '<Button>starts with number</Button>' };

const componentMeta = {
  title: 'Button',
  includeStories: ['one', 'helloStory', 'wPunctuation', '_1FineDay'],
};

const mdxStoryNameToId = {
  one: 'button--one',
  'hello story': 'button--hello-story',
  'w/punctuation': 'button--w-punctuation',
  '1 fine day': 'button--1-fine-day',
};

componentMeta.parameters = componentMeta.parameters || {};
componentMeta.parameters.docs = {
  container: ({ context, children }) => (
    <DocsContainer context={{ ...context, mdxStoryNameToId }}>{children}</DocsContainer>
  ),
  page: MDXContent,
};

export default componentMeta;
"
`;

exports[`docs-mdx-compiler-plugin story-function.mdx 1`] = `
"/* @jsx mdx */
import { DocsContainer } from '@storybook/addon-docs/blocks';

const makeShortcode = name =>
  function MDXDefaultShortcode(props) {
    console.warn(
      'Component ' +
        name +
        ' was not imported, exported, or provided by MDXProvider as global scope'
    );
    return <div {...props} />;
  };
const Story = makeShortcode('Story');
const layoutProps = {};
const MDXLayout = 'wrapper';
function MDXContent({ components, ...props }) {
  return (
    <MDXLayout {...layoutProps} {...props} components={components} mdxType=\\"MDXLayout\\">
      <Story name=\\"function\\" height=\\"100px\\" mdxType=\\"Story\\">
        {() => {
          const btn = document.createElement('button');
          btn.innerHTML = 'Hello Button';
          btn.addEventListener('click', action('Click'));
          return btn;
        }}
      </Story>
    </MDXLayout>
  );
}

MDXContent.isMDXComponent = true;

export const functionStory = () => {
  const btn = document.createElement('button');
  btn.innerHTML = 'Hello Button';
  btn.addEventListener('click', action('Click'));
  return btn;
};
functionStory.story = {};
functionStory.story.name = 'function';
functionStory.story.parameters = {
  mdxSource:
    \\"() => {\\\\n  const btn = document.createElement('button');\\\\n  btn.innerHTML = 'Hello Button';\\\\n  btn.addEventListener('click', action('Click'));\\\\n  return btn;\\\\n}\\",
};

const componentMeta = { includeStories: ['functionStory'] };

const mdxStoryNameToId = {};

componentMeta.parameters = componentMeta.parameters || {};
componentMeta.parameters.docs = {
  container: ({ context, children }) => (
    <DocsContainer context={{ ...context, mdxStoryNameToId }}>{children}</DocsContainer>
  ),
  page: MDXContent,
};

export default componentMeta;
"
`;

exports[`docs-mdx-compiler-plugin story-object.mdx 1`] = `
"/* @jsx mdx */
import { DocsContainer } from '@storybook/addon-docs/blocks';

import { Story, Meta } from '@storybook/addon-docs/blocks';
import { Welcome, Button } from '@storybook/angular/demo';
import { linkTo } from '@storybook/addon-links';

const makeShortcode = name =>
  function MDXDefaultShortcode(props) {
    console.warn(
      'Component ' +
        name +
        ' was not imported, exported, or provided by MDXProvider as global scope'
    );
    return <div {...props} />;
  };

const layoutProps = {};
const MDXLayout = 'wrapper';
function MDXContent({ components, ...props }) {
  return (
    <MDXLayout {...layoutProps} {...props} components={components} mdxType=\\"MDXLayout\\">
      <Meta title=\\"MDX|Welcome\\" mdxType=\\"Meta\\" />
      <h1>{\`Story object\`}</h1>
      <Story name=\\"to storybook\\" height=\\"300px\\" mdxType=\\"Story\\">
        {{
          template: \`<storybook-welcome-component (showApp)=\\"showApp()\\"></storybook-welcome-component>\`,
          props: {
            showApp: linkTo('Button'),
          },
          moduleMetadata: {
            declarations: [Welcome],
          },
        }}
      </Story>
    </MDXLayout>
  );
}

MDXContent.isMDXComponent = true;

export const toStorybook = () => ({
  template: \`<storybook-welcome-component (showApp)=\\"showApp()\\"></storybook-welcome-component>\`,
  props: {
    showApp: linkTo('Button'),
  },
  moduleMetadata: {
    declarations: [Welcome],
  },
});
toStorybook.story = {};
toStorybook.story.name = 'to storybook';
toStorybook.story.parameters = {
  mdxSource:
    '{\\\\n  template: \`<storybook-welcome-component (showApp)=\\"showApp()\\"></storybook-welcome-component>\`,\\\\n  props: {\\\\n    showApp: linkTo(\\\\'Button\\\\')\\\\n  },\\\\n  moduleMetadata: {\\\\n    declarations: [Welcome]\\\\n  }\\\\n}',
};

const componentMeta = { title: 'MDX|Welcome', includeStories: ['toStorybook'] };

const mdxStoryNameToId = { 'to storybook': 'mdx-welcome--to-storybook' };

componentMeta.parameters = componentMeta.parameters || {};
componentMeta.parameters.docs = {
  container: ({ context, children }) => (
    <DocsContainer context={{ ...context, mdxStoryNameToId }}>{children}</DocsContainer>
  ),
  page: MDXContent,
};

export default componentMeta;
"
`;

exports[`docs-mdx-compiler-plugin story-references.mdx 1`] = `
"/* @jsx mdx */
import { DocsContainer } from '@storybook/addon-docs/blocks';

import { Story } from '@storybook/addon-docs/blocks';

const makeShortcode = name =>
  function MDXDefaultShortcode(props) {
    console.warn(
      'Component ' +
        name +
        ' was not imported, exported, or provided by MDXProvider as global scope'
    );
    return <div {...props} />;
  };

const layoutProps = {};
const MDXLayout = 'wrapper';
function MDXContent({ components, ...props }) {
  return (
    <MDXLayout {...layoutProps} {...props} components={components} mdxType=\\"MDXLayout\\">
      <h1>{\`Story reference\`}</h1>
      <Story id=\\"welcome--welcome\\" mdxType=\\"Story\\" />
    </MDXLayout>
  );
}

MDXContent.isMDXComponent = true;

const componentMeta = { includeStories: [] };

const mdxStoryNameToId = {};

componentMeta.parameters = componentMeta.parameters || {};
componentMeta.parameters.docs = {
  container: ({ context, children }) => (
    <DocsContainer context={{ ...context, mdxStoryNameToId }}>{children}</DocsContainer>
  ),
  page: MDXContent,
};

export default componentMeta;
"
`;

exports[`docs-mdx-compiler-plugin vanilla.mdx 1`] = `
"/* @jsx mdx */
import { DocsContainer } from '@storybook/addon-docs/blocks';

import { Button } from '@storybook/react/demo';

const makeShortcode = name =>
  function MDXDefaultShortcode(props) {
    console.warn(
      'Component ' +
        name +
        ' was not imported, exported, or provided by MDXProvider as global scope'
    );
    return <div {...props} />;
  };

const layoutProps = {};
const MDXLayout = 'wrapper';
function MDXContent({ components, ...props }) {
  return (
    <MDXLayout {...layoutProps} {...props} components={components} mdxType=\\"MDXLayout\\">
      <h1>{\`Hello MDX\`}</h1>
      <p>{\`This is some random content.\`}</p>
      <Button mdxType=\\"Button\\">Hello button</Button>
    </MDXLayout>
  );
}

MDXContent.isMDXComponent = true;

const componentMeta = { includeStories: [] };

const mdxStoryNameToId = {};

componentMeta.parameters = componentMeta.parameters || {};
componentMeta.parameters.docs = {
  container: ({ context, children }) => (
    <DocsContainer context={{ ...context, mdxStoryNameToId }}>{children}</DocsContainer>
  ),
  page: MDXContent,
};

export default componentMeta;
"
`;