reduce Stories ceremony & add tests

[tomByrer]

How about adding some more caramel to your sugar? Let the build tool to do the export default () => typing for you. Easier to colocate the docs & test with the demo:

<stories>
  <info>
    By using the following settings, you can make many types of buttons....
  </info>

  <story title="Default with text">
    <Button>Hello Button</Button>

    <info inline=true>
      You'll notice the defaults have some styling already applied, & this note is right after the button
    </info>

    <tests>
      <expect title="match text">
        text().to.equal('Hello Button')
      </expect>
      <expect title="default class">
        find('.btn')).to.have.lengthOf(1)
      </expect>
    </tests>

    <snapshot flags"after-tests-pass"/>

  </story>

  <story title="Call to Action">
    <info>
      CTA use the highlight color; use sparingly (eg only for the "Buy Now" link)
    </info>
    etc...
</stories>

<info> is a pivoted version of a Storybook plugin.

Tests' code are more minimal & easier to scan with your eyes When the component renders, in it gets an unique class name (eg sb1904fiaoa4v), then all tests in that <story></story> get prefixed with expect(wrapper.find('.sb1904fiaoa4v'))..

<snapshot /> is visual regression test. I added a flag to only render if all the tests pass to prevent wasted CPU.

Although MDX looks fun, I like the idea of having new devs only having to learn extra weird XML-ish keywords since they're already learning HTML & JSX. Adding a 4th language, even if simple, is a bit much mind-jumping to me. Plus, using XML/JSX to separate concerns is easier for editors; clear boundaries for code-folding, jump-tos, etc....

I really dig the idea of having everything in 1 file; thanks for your idea!

[swyxio]

thanks for the idea!

after hacking on this a bit this weekend, i think i'm coming to the conclusion that the sfc plugin is lower level - i.e. this <stories> tag is something that we can build on TOP of an sfc plugin (or a general react-sfc preset sfc plugins.). sfc plugin exists mainly to make it possible to farm out different parts of a file to various filetype parsers.

in other words.. yes this will be possible. the degree to which we allow for a modular/fragmented vs a unified/opinionated system is going to be a very tough one..

[tomByrer]

Yes, I was thinking one approach would be:

• v1: the basic 'multiple files in one" would be fastest to dev, thus gain general awareness
• v2: more unified & slick/sugary API but would require more work