Docz: Show: An alternate to <Playground/>

[Swapnull]

Hi,

I'm not really sure where this belongs, but I wanted to share it anyway.
I had 2 issues with the <Playground /> element provided by Docz, so I decided to build my own version.
My issues were
1) I need to output the generated HTML that each react component will output.
2) My client complained about the formatting of the and I found trying to edit the theme to be an absolute saga.

I have written my own helper to handle the displaying of code and elements - https://gist.github.com/Swapnull/b25fc0d408c9caade4bd3be59e3beb62

This allows me to use Prism themeing for the code block and decide if I display React/HTML for each element.

If somebody wants to create a theme to include this, be my guest, but maintaining a docz theme is a chore due to to constant updates and bug fixes you need to find time to merge in.

[pedronauck]

Really good, these ideas are so great @Swapnull, I think that can be something that I can put on <Playground>.

So, since <Playground> and <PropsTable> from docz need to have just the logic around it and can't have any style applied to this components, I'm planning to create a new package called docz-ui that will have some dummy components to help creating themes and building styleguides/design systems, some examples:

• Playground: our base playground used on default theme
• ColorGuide: some component to render a guide of colors
• Typograph: show all sizes and formats of fonts
• Animation: a playground for animations with play/stop button and a timeline inside it

And a lot of others components that this package can have, but I think that creating this package will facilitate so much some things!

[pedronauck]

I'll close this issue and split up it in two others on our roadmap
Please give us your vote there @Swapnull 🙏

• 💅 Allow to change Prism theme on Playground
• 📝 Parse and show HTML output on Playground

[pedronauck]

Released on v0.8.0 🚀

[damassi]

@Swapnull - your gist was just what i needed 👍 Ty!

[adrianoresende]

@pedronauck How to enable tabs to show HTML? The same example of @Swapnull ?

[rafael-vitor]

@pedronauck Apparently this was removed in a later version, is there any reasoning behind it? as this feature is still desired can we reopen this?