How to render stories to individual HTML files?

Versions

• @storybook/addon-a11y: 5.2.8,
• @storybook/addon-cssresources: 5.2.8,
• @storybook/addon-knobs: 5.2.8,
• @storybook/addon-options: 5.2.8,
• @storybook/addon-viewport: 5.2.8,
• @storybook/addons: 5.2.8,
• @storybook/react: 5.2.8,
• @storybook/theming: 5.2.8,

Hello, I’m looking for a way to provide rendered HTML files for each story defined withing a project.

The current syntax is StoriesOf, for example:

/* eslint-disable import/no-extraneous-dependencies */
import React from 'react';
import { storiesOf } from '@storybook/react';
import { withKnobs, text } from '@storybook/addon-knobs';
import StoryWrapper from '@ecl/story-wrapper';
import demoContent from '@ecl/ec-specs-accordion2/demo/data';

import { Accordion2 } from '../src/Accordion2';
import { Accordion2Item } from '../src/Accordion2Item';

storiesOf('Components|Accordion', module)
  .addDecorator(withKnobs)
  .addDecorator(story => (
    <StoryWrapper
      afterMount={() => {
        if (!window.ECL) return {};

        const components = window.ECL.autoInit();
        return { components };
      }}
      beforeUnmount={context => {
        if (context.components) {
          context.components.forEach(c => c.destroy());
        }
      }}
    >
      {story()}
    </StoryWrapper>
  ))
  .add('default', () => {
    const toggle1 = {
      ...demoContent.items[0].toggle,
      label: text('Toggle 1', demoContent.items[0].toggle.label),
    };

    const toggle2 = {
      ...demoContent.items[1].toggle,
      label: text('Toggle 2', demoContent.items[1].toggle.label),
    };

    const toggle3 = {
      ...demoContent.items[2].toggle,
      label: text('Toggle 3', demoContent.items[2].toggle.label),
    };

    return (
      <Accordion2 data-ecl-auto-init="Accordion2">
        <Accordion2Item
          toggle={toggle1}
          id={demoContent.items[0].id}
          level={demoContent.items[0].level}
        >
          {text('Content 1', demoContent.items[0].content)}
        </Accordion2Item>
        <Accordion2Item
          toggle={toggle2}
          id={demoContent.items[1].id}
          level={demoContent.items[1].level}
        >
          {text('Content 2', demoContent.items[1].content)}
        </Accordion2Item>
        <Accordion2Item
          toggle={toggle3}
          id={demoContent.items[2].id}
          level={demoContent.items[2].level}
        >
          {text('Content 3', demoContent.items[2].content)}
        </Accordion2Item>
      </Accordion2>
    );
  });

And the config file is with an older organization, such as this:

import { configure, addDecorator, addParameters } from '@storybook/react';

// addDecorator() ...

// addParameters() ...

const contexts = [
  require.context('../../templates', true, /stories.*\.jsx?$/),
  require.context('../../page-structure', true, /stories.*\.jsx?$/),
  require.context('../../layout', true, /stories.*\.jsx?$/),
  require.context('../../components', true, /stories.*\.jsx?$/),
  require.context('../../utilities', true, /stories.*\.jsx?$/),
  require.context('../../deprecated', true, /stories.*\.jsx?$/),
];

configure(() => {
  contexts.forEach(context => {
    context
      .keys()
      .filter(key => !key.includes('node_modules'))
      .forEach(context);
  });
}, module);

A given story and context is accessible through a makeDecorator() API but I can’t figure a way to have a function with these parameters out of Storybook’s context.

What I’m trying to achieve is to load all stories from node and use ReactDOMServer to render stories with their contexts.

Would it be possible with 5.2.8? Would I need to first migrate to 5.3 as suggested here? (the hint is one of the last points about “Creating a separate page per component”)

Thanks in advance for any hints!

[kalinchernev]

It’s still a valid question.

[michaellouviere]

I am also looking to do this. Seems there’s some demand in the industry to solve for this.