Docz 2.x

[jonashaefele]

Upgrade Docz to the 2.x releases. (2.2 in this case).

Deployed at: https://design-system-slowworks.hoppin.now.sh

The 2.x branch of Docz is under super active development and bugs get fixed almost daily. Which is super nice in comparison to the 1.x branch we were on before.

This isn't completely bug-free, but a lot nicer. Replicates at least the functionality we had before.

Make sure you nuke both node_modules and .docz to make sure there's no weird old bits coming with you from 1.x

Known bugs:

Prettier is bad at formatting complicated MDX, check

• prettier/prettier#7041
• prettier/prettier#5795
• doczjs/docz#1247
• doczjs/docz#1099

--> So I disabled MDX formatting until that gets stable.

In the meantime, things to be aware of:

Inside Playground, don't leave empty lines (https://github.com/doczjs/docz/issues/1099)

<Playground>
  {() => {

    return (<div>
      This breaks!
    </div>);

}
</Playground>

<Playground>
  {() => {
    return (<div>
      This works!
    </div>);
}
</Playground>

If Props and Playground come directly after each other, they both break e.g.:

<Props of={Tag} />
<Playground>
  <Tag>This</Tag>
  <Tag>Totally</Tag>
  <Tag>Breaks</Tag>
  <Heading as="h3">Fail</Heading>
</Playground>

but:

<Props of={Tag} />

<Playground>
  <Tag>This</Tag>
  <Tag>Totally</Tag>
  <Tag>Works</Tag>
  <Heading as="h3">See the empty line above.</Heading>
</Playground>

Prettier wants to remove that empty line, so I ended up adding a bit of copy between the two to be future proof when we add prettier for MDX back in.

<Props of={Tag} />

Demo:

<Playground>
  <Tag>This</Tag>
  <Tag>Totally</Tag>
  <Tag>Works</Tag>
  <Heading as="h3">Fail save, completely.</Heading>
</Playground>

And lastly:

Playground is missing its default padding:

But apparently that bug fix already scheduled to be released in 2.3 so leaving that for now.