React-styleguidist: Add a "View HTML" button

[kidkuro]

Many design systems can be used simply as a CSS library as well as React component library.

The styleguides document how to use the components both as React and as pure HTML with CSS classes. E.g.: https://designsystem.gov.au/components/buttons/

We are using Styleguidist and would like to add a "View HTML" button next the the "View Code" button that presents a read-only view of the currently rendered React component.

This would allow users to just download our CSS bundle and implement our components using which rendering technology is appropriate to them.

I haven't tried implementing this yet, but I would look at ways of accessing the innerHTML of a rendered Preview in Playground, though I realise this is a little quirky from a React perspective.

I would make the feature optional, and update slots to take a configuration object to determine whether to include the extra tab button and panel.

Happy to have a go at creating a pull request if you would be happy including this feature in React Styleguidist.

[kidkuro]

I have a basic working version locally. I split a CodeEvaluator component out of Preview which does the code compilation and creates the WrappedComponent to be rendered by the Preview component.

A new HtmlViewer component is loaded as a second example tab, which receives the code, creates a CodeEvaluator and renders it into a detached div. When render is complete it displays the innerHTML.

The config update would be a new exampleTabTypes property that is an array which can include ['code', 'html'] and defaults to ['code'].

I have to write some new tests, format the HTML, and get the configuration working then I will submit a PR for review.

[sapegin]

I'd not include it in the core, but that could be a good plugin, so any help with the plugin API and making Styleguidist components more flexible would be super cool ;-)

[kidkuro]

Ok, I'll have a look into that, though I am limited for time.

In the meantime, I'll raise a couple of tickets and PRs to fix a bug in the slots onClick logic, and refactor CodeEvaluator from Preview to separate the responsibilities and make the CodeEvaluator available for a plugin slot to use (even if the HtmlViewer wouldn't be included in Styleguidist).

[sapegin]

Sounds great!

[caseycallow]

@kidkuro Do you have an example of this anywhere? I'm trying to do the same thing and having trouble getting a custom configuration up and running.

[kidkuro]

Nowhere public sorry. Also, I currently don't have access to that code.

The general approach though, from memory, I think was to override slots using https://react-styleguidist.js.org/docs/configuration.html#styleguidecomponents and add an extra handler similar to the view code one but instead used Styleguidist's own ReactExample component to render the code into a div element that isn't attached to the document, then return it's innerHTML.

You'll have to dig around in the source code to find the bits you need and how to do it.