Unlock 30% off on Manual Testing Annual Plans this Holiday Season.

Copied to Clipboard!

How to use includeStories method in storybook-root

Best JavaScript code snippet using storybook-root

mdx2.test.ts

Source:mdx2.test.ts

1import { dedent } from 'ts-dedent';2import prettier from 'prettier';3import { compileSync, SEPARATOR, wrapperJs } from './mdx2';4// @ts-ignore5expect.addSnapshotSerializer({6  print: (val: any) => val,7  test: (val) => true,8});9const clean = (mdx: string) => {10  const code = compileSync(mdx);11  const trimmed = code.split(SEPARATOR)[1].split(wrapperJs)[0];12  return prettier13    .format(trimmed, {14      parser: 'babel',15      printWidth: 100,16      tabWidth: 2,17      bracketSpacing: true,18      trailingComma: 'es5',19      singleQuote: true,20    })21    .trim();22};23describe('mdx2', () => {24  it('works', () => {25    const input = dedent`26      # hello27      <Meta title="foobar" />28      world {2 + 1}29      <Story name="foo">bar</Story>30    `;31    // @ts-ignore32    expect(clean(input)).toMatchInlineSnapshot(`33      export const foo = () => 'bar';34      foo.storyName = 'foo';35      foo.parameters = { storySource: { source: '"bar"' } };36      const componentMeta = { title: 'foobar', includeStories: ['foo'] };37      const mdxStoryNameToKey = { foo: 'foo' };38    `);39  });40  it('full snapshot', () => {41    const input = dedent`42      # hello43      <Meta title="foobar" />44      world {2 + 1}45      <Story name="foo">bar</Story>46    `;47    // @ts-ignore48    expect(compileSync(input)).toMatchInlineSnapshot(`49      /*@jsxRuntime automatic @jsxImportSource react*/50      import { assertIsFn, AddContext } from "@storybook/addon-docs";51      import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from "react/jsx-runtime";52      function MDXContent(props = {}) {53        const {wrapper: MDXLayout} = props.components || ({});54        return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {55          children: _jsx(_createMdxContent, {})56        })) : _createMdxContent();57        function _createMdxContent() {58          const _components = Object.assign({59            h1: "h1",60            p: "p"61          }, props.components), {Meta, Story} = _components;62          if (!Meta) _missingMdxReference("Meta", true);63          if (!Story) _missingMdxReference("Story", true);64          return _jsxs(_Fragment, {65            children: [_jsx(_components.h1, {66              children: "hello"67            }), "\\n", _jsx(Meta, {68              title: "foobar"69            }), "\\n", _jsxs(_components.p, {70              children: ["world ", 2 + 1]71            }), "\\n", _jsx(Story, {72              name: "foo",73              children: "bar"74            })]75          });76        }77      }78      function _missingMdxReference(id, component) {79        throw new Error("Expected " + (component ? "component" : "object") + " \`" + id + "\` to be defined: you likely forgot to import, pass, or provide it.");80      }81      // =========82      export const foo = () => (83                "bar"84              );85      foo.storyName = 'foo';86      foo.parameters = { storySource: { source: '\\"bar\\"' } };87      const componentMeta = { title: 'foobar', includeStories: ["foo"],  };88      const mdxStoryNameToKey = {"foo":"foo"};89      componentMeta.parameters = componentMeta.parameters || {};90      componentMeta.parameters.docs = {91        ...(componentMeta.parameters.docs || {}),92        page: () => <AddContext mdxStoryNameToKey={mdxStoryNameToKey} mdxComponentAnnotations={componentMeta}><MDXContent /></AddContext>,93      };94      export default componentMeta;95    `);96  });97  it('standalone jsx expressions', () => {98    expect(99      clean(dedent`100        # Standalone JSX expressions101        {3 + 3}102      `)103    ).toMatchInlineSnapshot(`104      const componentMeta = { includeStories: [] };105      const mdxStoryNameToKey = {};106    `);107  });108});109describe('docs-mdx-compiler-plugin', () => {110  it('component-args.mdx', () => {111    expect(112      clean(dedent`113        import { Button } from '@storybook/react/demo';114        import { Story, Meta } from '@storybook/addon-docs';115        <Meta title="Button" args={{ a: 1, b: 2 }} argTypes={{ a: { name: 'A' }, b: { name: 'B' } }} />116        # Args117        <Story name="component notes">118          <Button>Component notes</Button>119        </Story>120      `)121    ).toMatchInlineSnapshot(`122      export const componentNotes = () => <Button>{'Component notes'}</Button>;123      componentNotes.storyName = 'component notes';124      componentNotes.parameters = { storySource: { source: '<Button>{"Component notes"}</Button>' } };125      const componentMeta = {126        title: 'Button',127        args: {128          a: 1,129          b: 2,130        },131        argTypes: {132          a: {133            name: 'A',134          },135          b: {136            name: 'B',137          },138        },139        includeStories: ['componentNotes'],140      };141      const mdxStoryNameToKey = { 'component notes': 'componentNotes' };142    `);143  });144  it('component-id.mdx', () => {145    expect(146      clean(dedent`147        import { Button } from '@storybook/react/demo';148        import { Story, Meta } from '@storybook/addon-docs';149        150        <Meta title="Button" component={Button} id="button-id" />151        152        <Story name="component notes">153          <Button>Component notes</Button>154        </Story>        155      `)156    ).toMatchInlineSnapshot(`157      export const componentNotes = () => <Button>{'Component notes'}</Button>;158      componentNotes.storyName = 'component notes';159      componentNotes.parameters = { storySource: { source: '<Button>{"Component notes"}</Button>' } };160      const componentMeta = {161        title: 'Button',162        id: 'button-id',163        component: Button,164        includeStories: ['componentNotes'],165      };166      const mdxStoryNameToKey = { 'component notes': 'componentNotes' };167    `);168  });169  it('csf-imports.mdx', () => {170    expect(171      clean(dedent`172        import { Story, Meta, Canvas } from '@storybook/addon-docs';173        import { Welcome, Button } from '@storybook/angular/demo';174        import * as MyStories from './My.stories';175        import { Other } from './Other.stories';176        177        <Meta title="MDX/CSF imports" />178        179        # Stories from CSF imports180        181        <Story story={MyStories.Basic} />182        183        <Canvas>184          <Story story={Other} />185        </Canvas>186        187        <Story name="renamed" story={MyStories.Foo} />      188      `)189    ).toMatchInlineSnapshot(`190      export const _Basic_ = MyStories.Basic;191      export const _Other_ = Other;192      export const _Foo_ = MyStories.Foo;193      _Foo_.storyName = 'renamed';194      const componentMeta = { title: 'MDX/CSF imports', includeStories: ['_Basic_', '_Other_', '_Foo_'] };195      const mdxStoryNameToKey = { _Basic_: '_Basic_', _Other_: '_Other_', renamed: '_Foo_' };196    `);197  });198  it('decorators.mdx', () => {199    expect(200      clean(dedent`201        import { Button } from '@storybook/react/demo';202        import { Story, Meta } from '@storybook/addon-docs';203        <Meta204          title="Button"205          decorators={[(storyFn) => <div style={{ backgroundColor: 'yellow' }}>{storyFn()}</div>]}206        />207        # Decorated story208        <Story name="one" decorators={[(storyFn) => <div className="local">{storyFn()}</div>]}>209          <Button>One</Button>210        </Story>211      `)212    ).toMatchInlineSnapshot(`213      export const one = () => <Button>{'One'}</Button>;214      one.storyName = 'one';215      one.parameters = { storySource: { source: '<Button>{"One"}</Button>' } };216      one.decorators = [(storyFn) => <div className="local">{storyFn()}</div>];217      const componentMeta = {218        title: 'Button',219        decorators: [220          (storyFn) => (221            <div222              style={{223                backgroundColor: 'yellow',224              }}225            >226              {storyFn()}227            </div>228          ),229        ],230        includeStories: ['one'],231      };232      const mdxStoryNameToKey = { one: 'one' };233    `);234  });235  it('docs-only.mdx', () => {236    expect(237      clean(dedent`238        import { Meta } from '@storybook/addon-docs';239        <Meta title="docs-only" />240        # Documentation only241        This is a documentation-only MDX file which cleans a dummy 'docsOnly: true' story.242      `)243    ).toMatchInlineSnapshot(`244      export const __page = () => {245        throw new Error('Docs-only story');246      };247      __page.parameters = { docsOnly: true };248      const componentMeta = { title: 'docs-only', includeStories: ['__page'] };249      const mdxStoryNameToKey = {};250    `);251  });252  it('loaders.mdx', () => {253    expect(254      clean(dedent`255        import { Button } from '@storybook/react/demo';256        import { Story, Meta } from '@storybook/addon-docs';257        <Meta title="Button" loaders={[async () => ({ foo: 1 })]} />258        # Story with loader259        <Story name="one" loaders={[async () => ({ bar: 2 })]}>260          <Button>One</Button>261        </Story>262      `)263    ).toMatchInlineSnapshot(`264      export const one = () => <Button>{'One'}</Button>;265      one.storyName = 'one';266      one.parameters = { storySource: { source: '<Button>{"One"}</Button>' } };267      one.loaders = [268        async () => ({269          bar: 2,270        }),271      ];272      const componentMeta = {273        title: 'Button',274        loaders: [275          async () => ({276            foo: 1,277          }),278        ],279        includeStories: ['one'],280      };281      const mdxStoryNameToKey = { one: 'one' };282    `);283  });284  it('meta-quotes-in-title.mdx', () => {285    expect(286      clean(dedent`287        import { Meta } from '@storybook/addon-docs';288        <Meta title="Addons/Docs/what's in a title?" />289      `)290    ).toMatchInlineSnapshot(`291      export const __page = () => {292        throw new Error('Docs-only story');293      };294      __page.parameters = { docsOnly: true };295      const componentMeta = { title: "Addons/Docs/what's in a title?", includeStories: ['__page'] };296      const mdxStoryNameToKey = {};297    `);298  });299  it('non-story-exports.mdx', () => {300    expect(301      clean(dedent`302        import { Button } from '@storybook/react/demo';303        import { Story, Meta } from '@storybook/addon-docs';304        <Meta title="Button" />305        # Story definition306        <Story name="one">307          <Button>One</Button>308        </Story>309        export const two = 2;310        <Story name="hello story">311          <Button>Hello button</Button>312        </Story>313      `)314    ).toMatchInlineSnapshot(`315      export const one = () => <Button>{'One'}</Button>;316      one.storyName = 'one';317      one.parameters = { storySource: { source: '<Button>{"One"}</Button>' } };318      export const helloStory = () => <Button>{'Hello button'}</Button>;319      helloStory.storyName = 'hello story';320      helloStory.parameters = { storySource: { source: '<Button>{"Hello button"}</Button>' } };321      const componentMeta = { title: 'Button', includeStories: ['one', 'helloStory'] };322      const mdxStoryNameToKey = { one: 'one', 'hello story': 'helloStory' };323    `);324  });325  it('parameters.mdx', () => {326    expect(327      clean(dedent`328        import { Button } from '@storybook/react/demo';329        import { Story, Meta } from '@storybook/addon-docs';330        <Meta title="Button" component={Button} parameters={{ notes: 'component notes' }} />331        <Story name="component notes">332          <Button>Component notes</Button>333        </Story>334        <Story name="story notes" parameters={{ notes: 'story notes' }}>335          <Button>Story notes</Button>336        </Story>337      `)338    ).toMatchInlineSnapshot(`339      export const componentNotes = () => <Button>{'Component notes'}</Button>;340      componentNotes.storyName = 'component notes';341      componentNotes.parameters = { storySource: { source: '<Button>{"Component notes"}</Button>' } };342      export const storyNotes = () => <Button>{'Story notes'}</Button>;343      storyNotes.storyName = 'story notes';344      storyNotes.parameters = {345        storySource: { source: '<Button>{"Story notes"}</Button>' },346        ...{347          notes: 'story notes',348        },349      };350      const componentMeta = {351        title: 'Button',352        parameters: {353          notes: 'component notes',354        },355        component: Button,356        includeStories: ['componentNotes', 'storyNotes'],357      };358      const mdxStoryNameToKey = { 'component notes': 'componentNotes', 'story notes': 'storyNotes' };359    `);360  });361  it('previews.mdx', () => {362    expect(363      clean(dedent`364        import { Button } from '@storybook/react/demo';365        import { Canvas, Story, Meta } from '@storybook/addon-docs';366        <Meta title="Button" component={Button} parameters={{ notes: 'component notes' }} />367        # Canvas368        Canvases can contain normal components, stories, and story references369        <Canvas>370          <Button>Just a button</Button>371          <Story name="hello button">372            <Button>Hello button</Button>373          </Story>374          <Story name="two">375            <Button>Two</Button>376          </Story>377          <Story id="welcome--welcome" />378        </Canvas>379        Canvas without a story380        <Canvas>381          <Button>Just a button</Button>382        </Canvas>383      `)384    ).toMatchInlineSnapshot(`385      export const helloButton = () => <Button>{'Hello button'}</Button>;386      helloButton.storyName = 'hello button';387      helloButton.parameters = { storySource: { source: '<Button>{"Hello button"}</Button>' } };388      export const two = () => <Button>{'Two'}</Button>;389      two.storyName = 'two';390      two.parameters = { storySource: { source: '<Button>{"Two"}</Button>' } };391      const componentMeta = {392        title: 'Button',393        parameters: {394          notes: 'component notes',395        },396        component: Button,397        includeStories: ['helloButton', 'two'],398      };399      const mdxStoryNameToKey = { 'hello button': 'helloButton', two: 'two' };400    `);401  });402  it('story-args.mdx', () => {403    expect(404      clean(dedent`405        import { Button } from '@storybook/react/demo';406        import { Story, Meta } from '@storybook/addon-docs';407        <Meta title="Button" />408        # Args409        export const Template = (args) => <Button>Component notes</Button>;410        <Story411          name="component notes"412          args={{ a: 1, b: 2 }}413          argTypes={{ a: { name: 'A' }, b: { name: 'B' } }}414        >415          {Template.bind({})}416        </Story>417      `)418    ).toMatchInlineSnapshot(`419      export const componentNotes = Template.bind({});420      componentNotes.storyName = 'component notes';421      componentNotes.argTypes = {422        a: {423          name: 'A',424        },425        b: {426          name: 'B',427        },428      };429      componentNotes.args = {430        a: 1,431        b: 2,432      };433      componentNotes.parameters = { storySource: { source: 'args => <Button>Component notes</Button>' } };434      const componentMeta = { title: 'Button', includeStories: ['componentNotes'] };435      const mdxStoryNameToKey = { 'component notes': 'componentNotes' };436    `);437  });438  it('story-current.mdx', () => {439    expect(440      clean(dedent`441        import { Story } from '@storybook/addon-docs';442        # Current story443        <Story id="." />444      `)445    ).toMatchInlineSnapshot(`446      const componentMeta = { includeStories: [] };447      const mdxStoryNameToKey = {};448    `);449  });450  it('story-def-text-only.mdx', () => {451    expect(452      clean(dedent`453        import { Story, Meta } from '@storybook/addon-docs';454        <Meta title="Text" />455        # Story definition456        <Story name="text">Plain text</Story>457      `)458    ).toMatchInlineSnapshot(`459      export const text = () => 'Plain text';460      text.storyName = 'text';461      text.parameters = { storySource: { source: '"Plain text"' } };462      const componentMeta = { title: 'Text', includeStories: ['text'] };463      const mdxStoryNameToKey = { text: 'text' };464    `);465  });466  it('story-definitions.mdx', () => {467    expect(468      clean(dedent`469        import { Button } from '@storybook/react/demo';470        import { Story, Meta } from '@storybook/addon-docs';471        472        <Meta title="Button" />473        474        # Story definition475        476        <Story name="one">477          <Button>One</Button>478        </Story>479        480        <Story name="hello story">481          <Button>Hello button</Button>482        </Story>483        484        <Story name="w/punctuation">485          <Button>with punctuation</Button>486        </Story>487        488        <Story name="1 fine day">489          <Button>starts with number</Button>490        </Story>491      `)492    ).toMatchInlineSnapshot(`493      export const one = () => <Button>{'One'}</Button>;494      one.storyName = 'one';495      one.parameters = { storySource: { source: '<Button>{"One"}</Button>' } };496      export const helloStory = () => <Button>{'Hello button'}</Button>;497      helloStory.storyName = 'hello story';498      helloStory.parameters = { storySource: { source: '<Button>{"Hello button"}</Button>' } };499      export const wPunctuation = () => <Button>{'with punctuation'}</Button>;500      wPunctuation.storyName = 'w/punctuation';501      wPunctuation.parameters = { storySource: { source: '<Button>{"with punctuation"}</Button>' } };502      export const _1FineDay = () => <Button>{'starts with number'}</Button>;503      _1FineDay.storyName = '1 fine day';504      _1FineDay.parameters = { storySource: { source: '<Button>{"starts with number"}</Button>' } };505      const componentMeta = {506        title: 'Button',507        includeStories: ['one', 'helloStory', 'wPunctuation', '_1FineDay'],508      };509      const mdxStoryNameToKey = {510        one: 'one',511        'hello story': 'helloStory',512        'w/punctuation': 'wPunctuation',513        '1 fine day': '_1FineDay',514      };515    `);516  });517  it('story-function-var.mdx', () => {518    expect(519      clean(dedent`520        import { Meta, Story } from '@storybook/addon-docs';521        <Meta title="story-function-var" />522        523        export const basicFn = () => <Button />;524        525        # Button526        527        I can define a story with the function defined in CSF:528        529        <Story name="basic">{basicFn}</Story>      530      `)531    ).toMatchInlineSnapshot(`532      export const basic = assertIsFn(basicFn);533      basic.storyName = 'basic';534      basic.parameters = { storySource: { source: 'basicFn' } };535      const componentMeta = { title: 'story-function-var', includeStories: ['basic'] };536      const mdxStoryNameToKey = { basic: 'basic' };537    `);538  });539  it('story-function.mdx', () => {540    expect(541      clean(dedent`542        <Story name="function" height="100px">543          {() => {544            const btn = document.createElement('button');545            btn.innerHTML = 'Hello Button';546            btn.addEventListener('click', action('Click'));547            return btn;548          }}549        </Story>550      `)551    ).toMatchInlineSnapshot(`552      export const functionStory = () => {553        const btn = document.createElement('button');554        btn.innerHTML = 'Hello Button';555        btn.addEventListener('click', action('Click'));556        return btn;557      };558      functionStory.storyName = 'function';559      functionStory.parameters = {560        storySource: {561          source:562            '() => {\\n  const btn = document.createElement("button");\\n  btn.innerHTML = "Hello Button";\\n  btn.addEventListener("click", action("Click"));\\n  return btn;\\n}',563        },564      };565      const componentMeta = { includeStories: ['functionStory'] };566      const mdxStoryNameToKey = { function: 'functionStory' };567    `);568  });569  it('story-multiple-children.mdx', () => {570    expect(571      clean(dedent`572        import { Story, Meta } from '@storybook/addon-docs';573        <Meta title="Multiple" />574        575        # Multiple children576        577        <Story name="multiple children">578          <p>Hello Child #1</p>579          <p>Hello Child #2</p>580        </Story>581      `)582    ).toMatchInlineSnapshot(`583      export const multipleChildren = () => (584        <>585          <p>{'Hello Child #1'}</p>586          "\\n"587          <p>{'Hello Child #2'}</p>588        </>589      );590      multipleChildren.storyName = 'multiple children';591      multipleChildren.parameters = {592        storySource: { source: '<p>{"Hello Child #1"}</p>\\n"\\\\n"\\n<p>{"Hello Child #2"}</p>' },593      };594      const componentMeta = { title: 'Multiple', includeStories: ['multipleChildren'] };595      const mdxStoryNameToKey = { 'multiple children': 'multipleChildren' };596    `);597  });598  it('story-object.mdx', () => {599    expect(600      clean(dedent`601        import { Story, Meta } from '@storybook/addon-docs';602        import { Welcome, Button } from '@storybook/angular/demo';603        import { linkTo } from '@storybook/addon-links';604        605        <Meta title="MDX|Welcome" />606        607        # Story object608        609        <Story name="to storybook" height="300px">610          {{611            template: '<storybook-welcome-component (showApp)="showApp()"></storybook-welcome-component>',612            props: {613              showApp: linkTo('Button'),614            },615            moduleMetadata: {616              declarations: [Welcome],617            },618          }}619        </Story>620      `)621    ).toMatchInlineSnapshot(`622      export const toStorybook = () => ({623        template: '<storybook-welcome-component (showApp)="showApp()"></storybook-welcome-component>',624        props: {625          showApp: linkTo('Button'),626        },627        moduleMetadata: {628          declarations: [Welcome],629        },630      });631      toStorybook.storyName = 'to storybook';632      toStorybook.parameters = {633        storySource: {634          source:635            '{\\n  template: "<storybook-welcome-component (showApp)=\\\\"showApp()\\\\"></storybook-welcome-component>",\\n  props: {\\n    showApp: linkTo("Button")\\n  },\\n  moduleMetadata: {\\n    declarations: [Welcome]\\n  }\\n}',636        },637      };638      const componentMeta = { title: 'MDX|Welcome', includeStories: ['toStorybook'] };639      const mdxStoryNameToKey = { 'to storybook': 'toStorybook' };640    `);641  });642  it('story-references.mdx', () => {643    expect(644      clean(dedent`645        import { Story } from '@storybook/addon-docs';646        # Story reference647        <Story id="welcome--welcome" />648      `)649    ).toMatchInlineSnapshot(`650      const componentMeta = { includeStories: [] };651      const mdxStoryNameToKey = {};652    `);653  });654  it('title-template-string.mdx', () => {655    expect(656      clean(657        [658          "import { Meta, Story } from '@storybook/addon-docs';",659          "import { titleFunction } from '../title-generators';",660          '',661          // eslint-disable-next-line no-template-curly-in-string662          "<Meta title={`${titleFunction('template')}`} />",663        ].join('\n')664      )665    ).toMatchInlineSnapshot(`666      export const __page = () => {667        throw new Error('Docs-only story');668      };669      __page.parameters = { docsOnly: true };670      const componentMeta = { title: \`\${titleFunction('template')}\`, includeStories: ['__page'] };671      const mdxStoryNameToKey = {};672    `);673  });674  it('vanilla.mdx', () => {675    expect(676      clean(dedent`677        import { Button } from '@storybook/react/demo';678        # Hello MDX679        This is some random content.680        <Button>Hello button</Button>681      `)682    ).toMatchInlineSnapshot(`683      const componentMeta = { includeStories: [] };684      const mdxStoryNameToKey = {};685    `);686  });687  it('errors on missing story props', async () => {688    await expect(async () =>689      clean(dedent`690        import { Button } from '@storybook/react/demo';691        import { Story, Meta } from '@storybook/addon-docs';692        <Meta title="Button" />693        # Bad story694        <Story>695          <Button>One</Button>696        </Story>      697      `)698    ).rejects.toThrow('Expected a Story name, id, or story attribute');699  });700  describe('csf3', () => {701    it('auto-title-docs-only.mdx', () => {702      expect(703        clean(dedent`704          import { Meta } from '@storybook/addon-docs';705  706          <Meta />707  708          # Auto-title Docs Only709          Spme **markdown** here!710        `)711      ).toMatchInlineSnapshot(`712        export const __page = () => {713          throw new Error('Docs-only story');714        };715        __page.parameters = { docsOnly: true };716        const componentMeta = { includeStories: ['__page'] };717        const mdxStoryNameToKey = {};718      `);719    });720    it('auto-title.mdx', () => {721      expect(722        clean(dedent`723          import { Button } from '@storybook/react/demo';724          import { Story, Meta } from '@storybook/addon-docs';725          <Meta component={Button} />726          <Story name="Basic">727            <Button>Basic</Button>728          </Story>729        `)730      ).toMatchInlineSnapshot(`731        export const basic = () => <Button>{'Basic'}</Button>;732        basic.storyName = 'Basic';733        basic.parameters = { storySource: { source: '<Button>{"Basic"}</Button>' } };734        const componentMeta = { component: Button, includeStories: ['basic'] };735        const mdxStoryNameToKey = { Basic: 'basic' };736      `);737    });738    it('default-render.mdx', () => {739      expect(740        clean(dedent`741          import { Button } from '@storybook/react/demo';742          import { Story, Meta } from '@storybook/addon-docs';743          <Meta title="Button" component={Button} />744          <Story name="Basic" />745        `)746      ).toMatchInlineSnapshot(`747        export const basic = {};748        basic.storyName = 'Basic';749        basic.parameters = { storySource: { source: '{}' } };750        const componentMeta = { title: 'Button', component: Button, includeStories: ['basic'] };751        const mdxStoryNameToKey = { Basic: 'basic' };752      `);753    });754    it('component-render.mdx', () => {755      expect(756        clean(dedent`757          import { Button } from '@storybook/react/demo';758          import { Story, Meta } from '@storybook/addon-docs';759          <Meta title="Button" component={Button} render={(args) => <Button {...args} />} />760          <Story name="Basic" />761        `)762      ).toMatchInlineSnapshot(`763        export const basic = {};764        basic.storyName = 'Basic';765        basic.parameters = { storySource: { source: '{}' } };766        const componentMeta = {767          title: 'Button',768          component: Button,769          render: (args) => <Button {...args} />,770          includeStories: ['basic'],771        };772        const mdxStoryNameToKey = { Basic: 'basic' };773      `);774    });775    it('story-render.mdx', () => {776      expect(777        clean(dedent`778          import { Button } from '@storybook/react/demo';779          import { Story, Meta } from '@storybook/addon-docs';780          <Meta title="Button" component={Button} />781          <Story name="Basic" render={(args) => <Button {...args} />} />782        `)783      ).toMatchInlineSnapshot(`784        export const basic = {};785        basic.storyName = 'Basic';786        basic.parameters = { storySource: { source: '{}' } };787        basic.render = (args) => <Button {...args} />;788        const componentMeta = { title: 'Button', component: Button, includeStories: ['basic'] };789        const mdxStoryNameToKey = { Basic: 'basic' };790      `);791    });792    it('story-play.mdx', () => {793      expect(794        clean(dedent`795          import { Button } from '@storybook/react/demo';796          import { Story, Meta } from '@storybook/addon-docs';797          <Meta title="Button" component={Button} />798          <Story name="Basic" play={() => console.log('play')} />799        `)800      ).toMatchInlineSnapshot(`801        export const basic = {};802        basic.storyName = 'Basic';803        basic.parameters = { storySource: { source: '{}' } };804        basic.play = () => console.log('play');805        const componentMeta = { title: 'Button', component: Button, includeStories: ['basic'] };806        const mdxStoryNameToKey = { Basic: 'basic' };807      `);808    });809  });810  it('style tag', () => {811    expect(812      clean(dedent`813        import { Meta } from '@storybook/addon-docs';814        <Meta title="Example/Introduction" />815        <style>{\`816          .subheading {817            --mediumdark: '#999999';818            font-weight: 900;819            font-size: 13px;820            color: #999;821            letter-spacing: 6px;822            line-height: 24px;823            text-transform: uppercase;824            margin-bottom: 12px;825            margin-top: 40px;826          }827          .link-list {828            display: grid;829            grid-template-columns: 1fr;830            grid-template-rows: 1fr 1fr;831            row-gap: 10px;832          }833        \`}</style>834      `)835    ).toMatchInlineSnapshot(`836      export const __page = () => {837        throw new Error('Docs-only story');838      };839      __page.parameters = { docsOnly: true };840      const componentMeta = { title: 'Example/Introduction', includeStories: ['__page'] };841      const mdxStoryNameToKey = {};842    `);843  });...

mdx.ts

Source:mdx.ts

1// import recast from 'recast';2import mdx from '@mdx-js/mdx'3import prettier from 'prettier'4import { sanitizeName, prettify } from '../support'5/**6 * Convert a component's MDX file into module story format7 */8export function mdxTransformer(file, api) {9    const j = api.jscodeshift10    const code = mdx.sync(file.source, {})11    const root = j(code)12    function parseJsxAttributes(attributes) {13        const result = {}14        attributes.forEach((attr) => {15            const key = attr.name.name16            const val =17                attr.value.type === 'JSXExpressionContainer'18                    ? attr.value.expression19                    : attr.value20            result[key] = val21        })22        return result23    }24    function genObjectExpression(attrs) {25        return j.objectExpression(26            Object.entries(attrs).map(([key, val]) =>27                j.property('init', j.identifier(key), val),28            ),29        )30    }31    function convertToStories(path) {32        const base = j(path)33        const meta: any = {}34        const includeStories = []35        const storyStatements = []36        // get rid of all mdxType junk37        base.find(j.JSXAttribute)38            .filter((attr) => attr.node.name.name === 'mdxType')39            .remove()40        // parse <Meta title="..." />41        base.find(j.JSXElement)42            .filter((elt) => elt.node.openingElement.name.name === 'Meta')43            .forEach((elt) => {44                const attrs = parseJsxAttributes(45                    elt.node.openingElement.attributes,46                )47                Object.assign(meta, attrs)48            })49        // parse <Story name="..." />50        base.find(j.JSXElement)51            .filter((elt) => elt.node.openingElement.name.name === 'Story')52            .forEach((elt) => {53                const attrs: any = parseJsxAttributes(54                    elt.node.openingElement.attributes,55                )56                if (attrs.name) {57                    const storyKey = sanitizeName(attrs.name.value)58                    includeStories.push(storyKey)59                    if (storyKey === attrs.name.value) {60                        delete attrs.name61                    }62                    let body =63                        elt.node.children.find((n) => n.type !== 'JSXText') ||64                        j.literal(elt.node.children[0].value)65                    if (body.type === 'JSXExpressionContainer') {66                        body = body.expression67                    }68                    storyStatements.push(69                        j.exportDeclaration(70                            false,71                            j.variableDeclaration('const', [72                                j.variableDeclarator(73                                    j.identifier(storyKey),74                                    body.type === 'ArrowFunctionExpression'75                                        ? body76                                        : j.arrowFunctionExpression([], body),77                                ),78                            ]),79                        ),80                    )81                    if (Object.keys(attrs).length > 0) {82                        storyStatements.push(83                            j.assignmentStatement(84                                '=',85                                j.memberExpression(86                                    j.identifier(storyKey),87                                    j.identifier('story'),88                                ),89                                genObjectExpression(attrs),90                            ),91                        )92                    }93                    storyStatements.push(j.emptyStatement())94                }95            })96        if (root.find(j.ExportNamedDeclaration).size() > 0) {97            meta.includeStories = j.arrayExpression(98                includeStories.map((key) => j.literal(key)),99            )100        }101        const statements = [102            j.exportDefaultDeclaration(genObjectExpression(meta)),103            j.emptyStatement(),104            ...storyStatements,105        ]106        const lastStatement = root.find(j.Statement).at(-1)107        statements.reverse().forEach((stmt) => {108            lastStatement.insertAfter(stmt)109        })110        base.remove()111    }112    root.find(j.ExportDefaultDeclaration).forEach(convertToStories)113    // strip out Story/Meta import and MDX junk114    //   /* @jsx mdx */115    root.find(j.ImportDeclaration)116        .at(0)117        .replaceWith((exp) =>118            j.importDeclaration(exp.node.specifiers, exp.node.source),119        )120    //  import { Story, Meta } from '@storybook/addon-docs/blocks';121    root.find(j.ImportDeclaration)122        .filter(123            (exp) => exp.node.source.value === '@storybook/addon-docs/blocks',124        )125        .remove()126    //   const makeShortcode = ...127    //   const layoutProps = {};128    //   const MDXLayout = 'wrapper';129    const MDX_DECLS = ['makeShortcode', 'layoutProps', 'MDXLayout']130    root.find(j.VariableDeclaration)131        .filter(132            (decl) =>133                decl.node.declarations.length === 1 &&134                MDX_DECLS.includes(decl.node.declarations[0].id.name),135        )136        .remove()137    //   const Source = makeShortcode('Source');138    root.find(j.VariableDeclarator)139        .filter(140            (expr) =>141                expr.node.init.type === 'CallExpression' &&142                expr.node.init.callee.type === 'Identifier' &&143                expr.node.init.callee.name === 'makeShortcode',144        )145        .remove()146    //   MDXContent.isMDXComponent = true;147    root.find(j.AssignmentExpression)148        .filter(149            (expr) =>150                expr.node.left.type === 'MemberExpression' &&151                expr.node.left.object.type === 'Identifier' &&152                expr.node.left.object.name === 'MDXContent',153        )154        .remove()155    // Add back `import React from 'react';` which is implicit in MDX156    const react = root157        .find(j.ImportDeclaration)158        .filter((decl) => decl.node.source.value === 'react')159    if (react.size() === 0) {160        root.find(j.Statement)161            .at(0)162            .insertBefore(163                j.importDeclaration(164                    [j.importDefaultSpecifier(j.identifier('React'))],165                    j.literal('react'),166                ),167            )168    }169    const source = root.toSource({170        trailingComma: true,171        quote: 'single',172        tabWidth: 2,173    })174    return prettify(source)...

mdx2.ts

Source:mdx2.ts

1import generate from '@babel/generator';2import * as t from '@babel/types';3import cloneDeep from 'lodash/cloneDeep';4import toBabel from 'estree-to-babel';5// Keeping as much code as possible from the original compiler to avoid breaking changes6import {7  genCanvasExports,8  genStoryExport,9  genMeta,10  CompilerOptions,11  Context,12  MetaExport,13  wrapperJs,14  stringifyMeta,15} from './sb-mdx-plugin';16export const SEPARATOR = '// =========';17export { wrapperJs };18function extractExports(root: t.File, options: CompilerOptions) {19  const context: Context = {20    counter: 0,21    storyNameToKey: {},22    namedExports: {},23  };24  const storyExports = [];25  const includeStories = [];26  let metaExport: MetaExport | null = null;27  const { code } = generate(root, {});28  let contents: t.ExpressionStatement;29  root.program.body.forEach((child) => {30    if (t.isExpressionStatement(child) && t.isJSXFragment(child.expression)) {31      if (contents) throw new Error('duplicate contents');32      contents = child;33    } else if (34      t.isExportNamedDeclaration(child) &&35      t.isVariableDeclaration(child.declaration) &&36      child.declaration.declarations.length === 137    ) {38      const declaration = child.declaration.declarations[0];39      if (t.isVariableDeclarator(declaration) && t.isIdentifier(declaration.id)) {40        const { name } = declaration.id;41        context.namedExports[name] = declaration.init;42      }43    }44  });45  if (contents) {46    const jsx = contents.expression as t.JSXFragment;47    jsx.children.forEach((child) => {48      if (t.isJSXElement(child)) {49        if (t.isJSXIdentifier(child.openingElement.name)) {50          const name = child.openingElement.name.name;51          let stories;52          if (['Canvas', 'Preview'].includes(name)) {53            stories = genCanvasExports(child, context);54          } else if (name === 'Story') {55            stories = genStoryExport(child, context);56          } else if (name === 'Meta') {57            const meta = genMeta(child, options);58            if (meta) {59              if (metaExport) {60                throw new Error('Meta can only be declared once');61              }62              metaExport = meta;63            }64          }65          if (stories) {66            Object.entries(stories).forEach(([key, story]) => {67              includeStories.push(key);68              storyExports.push(story);69            });70          }71        }72      } else if (t.isJSXExpressionContainer(child)) {73        // Skip string literals & other JSX expressions74      } else {75        throw new Error(`Unexpected JSX child: ${child.type}`);76      }77    });78  }79  if (metaExport) {80    if (!storyExports.length) {81      storyExports.push('export const __page = () => { throw new Error("Docs-only story"); };');82      storyExports.push('__page.parameters = { docsOnly: true };');83      includeStories.push('__page');84    }85  } else {86    metaExport = {};87  }88  metaExport.includeStories = JSON.stringify(includeStories);89  const fullJsx = [90    ...storyExports,91    `const componentMeta = ${stringifyMeta(metaExport)};`,92    `const mdxStoryNameToKey = ${JSON.stringify(context.storyNameToKey)};`,93    wrapperJs,94    'export default componentMeta;',95  ].join('\n\n');96  return fullJsx;97}98export const plugin = (store: any) => (root: any) => {99  const estree = store.toEstree(root);100  // toBabel mutates root, so we need to clone it101  const clone = cloneDeep(estree);102  const babel = toBabel(clone);103  store.exports = extractExports(babel, {});104  return root;105};106export const postprocess = (code: string, extractedExports: string) => {107  const lines = code.toString().trim().split('\n');108  // /*@jsxRuntime automatic @jsxImportSource react*/109  const first = lines.shift();110  return [111    first,112    'import { assertIsFn, AddContext } from "@storybook/addon-docs";',113    ...lines.filter((line) => !line.match(/^export default/)),114    SEPARATOR,115    extractedExports,116  ].join('\n');117};118export const mdxSync = (code: string) => {119  const { compileSync } = require('@mdx-js/mdx');120  const { toEstree } = require('hast-util-to-estree');121  const store = { exports: '', toEstree };122  const output = compileSync(code, {123    rehypePlugins: [[plugin, store]],124  });125  return postprocess(output.toString(), store.exports);126};...

Using AI Code Generation

1const req = require.context('../src', true, /\.stories\.js$/);2function loadStories() {3  req.keys().forEach(filename => req(filename));4}5configure(loadStories, module);6import { configure } from '@storybook/react';7import { setOptions } from '@storybook/addon-options';8import { setDefaults } from '@storybook/addon-info';9setOptions({

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.