3

I am using Preview addon in Storybook for React to show the component usage in Docs.

<Preview withToolbar>
  <Story name="primary">
  <PrimaryButton  disabled={boolean("Disabled",false)} modifiers={["small"]} onClick={action('button-click')} > {text("Label", "Hello Storybook")}</PrimaryButton>
  </Story>
</Preview>

This generate doc as below : enter image description here There is a show code/ hide code switch which shows the React Code for the component , is it possible to show the plain HTML markup as well.

I need to use a single storybook component explorer for React and non React Projects so wanted to check if plain markup source code be generated as well.

Thanks

Bhupendra
  • 1,196
  • 16
  • 39

1 Answers1

4

I am in a similar situation where I just want to use react for the development of the stories and only display the HTML in the docs so it can be used with other frameworks.

This is what I came up with so far.

In .storybook/preview.js I am using a custom function to render the source code so the file look something like this:

import renderToHTML from './renderToHTML'

export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
  docs: {
    transformSource: (src, storyContext) => renderToHTML(storyContext.storyFn),
  },
}

this is documented here.

My renderToHTML function is defined like this:

import { renderToStaticMarkup } from 'react-dom/server'
import { AllHtmlEntities } from 'html-entities'
import prettier from 'prettier'
import HTMLParser from 'prettier/parser-html'
const entities = new AllHtmlEntities()

export default (story) =>
  prettier.format(entities.decode(renderToStaticMarkup(story())), {
    parser: 'html',
    plugins: [HTMLParser],
  })

I'm using renderToStaticMarkup to compile the story, then html-entities to unescape it and then using prettier to format it.

I am still experimenting with this so I might update the answer if I found issues or a better way to do things

TedMeftah
  • 1,845
  • 1
  • 21
  • 29
  • Looking for something similar, did you make any progress on this? – thomasbritton Feb 09 '21 at 11:56
  • 2
    This is also [how the HTML Addon does this](https://github.com/whitespace-se/storybook-addon-html/blob/26a0d16f85036af6e7dfcc69216cd1e2b8069d4f/addon/src/Panel.js#L37). A little improvement to your code might be to add `htmlWhitespaceSensitivity: 'ignore'` to your Prettier configuration. It will make the HTML render better. – dobrinov Mar 24 '21 at 09:35