React Styleguidist usage examples in typescript files

React Styleguidist uses external Markdown files to store usage examples. We wanted to use TypeScript for examples because reasons and we managed to do this with horrible solution. It includes custom webpack loader that parses TypeScript file with regular expressions and converts it to markdown. You could find parts of our code below.

You can find more info about why and how we did it in this talk:

AlertBar.example.tsx contains usage example. styleguide.config.js contains parts of config replacing Styleguidist's webpack loader with examples-loader.js. examples.test.tsx is a usual Jest test covering all examples with snapshot tests.