How to render stories to individual HTML files? #9455

kalinchernev · 2020-01-15T06:54:59Z

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!

The text was updated successfully, but these errors were encountered:

kalinchernev · 2020-01-16T08:12:49Z

Possibly related #9221

Maybe an example of #775 (comment) will be helpful enough.

kalinchernev · 2020-01-16T09:24:43Z

Another issue I found which could be related: #8009

I tried to use getStorybook from storybook and get a list of stories during the process of "sourcing" the information in the configuration file. It's a client API though and I don't quite want to have the need to load the storybook in the browser in order to click on a button to get a list of stories and possibly render them later.

stale · 2020-02-06T10:23:41Z

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

kalinchernev · 2020-02-06T10:24:42Z

It's still a valid question.

stale · 2020-02-27T11:03:35Z

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

kalinchernev · 2020-02-27T11:37:39Z

Still relevant

…

On Thu, 27 Feb 2020, 19:03 stale[bot], ***@***.***> wrote: Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks! — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#9455?email_source=notifications&email_token=AAOVTFGAGTERT7XLS7CLZADRE6MYRA5CNFSM4KG6TTT2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEND52VQ#issuecomment-591912278>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAOVTFGQVZWBHJV5X7BZQXLRE6MYRANCNFSM4KG6TTTQ> .

shilman · 2020-02-28T00:55:21Z

@kalinchernev AFAIK there's no way to do this currently

kalinchernev · 2020-02-28T03:26:54Z

Hi @shilman in a project where I need this, I have already migrated configurations to latest recommended structure, as well as stories format.

I made a small attempt last week to use the stories glob pattern from the config which was ok, and I also validated that the custom babel config for the storybook is usable outside the storybook (duh :))

In a week or two I plan to setup a webpack to follow the babel config or possibly the overrides coming from storybook and I still have hope that stories being react components, with react's server side rendering it might be some how possible.

Do you think this way of thinking is wrong or there have been similar failed attempts?

shilman · 2020-02-28T06:15:20Z

@kalinchernev I'm not aware of any efforts here yet. You've commented on #9382 which is a similar issue/concern (can I close this and we continue the conversation there?). It should be possible, with work, and @ndelangen would be the right person to collaborate with on this.

ndelangen · 2020-03-02T12:23:58Z

@kalinchernev I've been giving the following some thought recently:

What if storybook had a command to generate a data.json which would include the stories? Would that help your case?

kalinchernev · 2020-03-02T13:11:42Z

The task at hand for me at the moment is to generate HTML files for teams to compare markup between different language implementations in different instances of storybook. Like between React and Twig. What would the data.json look like?

…

On Mon, 2 Mar 2020, 20:23 Norbert de Langen, ***@***.***> wrote: @kalinchernev <https://github.com/kalinchernev> I've been giving the following some thought recently: What if storybook had a command to generate a data.json which would include the stories? Would that help your case? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#9455?email_source=notifications&email_token=AAOVTFEYZE3AVY7MJRVDSF3RFOQN7A5CNFSM4KG6TTT2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOENPDMFY#issuecomment-593376791>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAOVTFBTUXPO77QLS7VWGRDRFOQN7ANCNFSM4KG6TTTQ> .

kalinchernev · 2020-03-02T13:12:22Z

Clarification: comparison of components between implementations.

…

On Mon, 2 Mar 2020, 21:11 Kalin Chernev, ***@***.***> wrote: The task at hand for me at the moment is to generate HTML files for teams to compare markup between different language implementations in different instances of storybook. Like between React and Twig. What would the data.json look like? On Mon, 2 Mar 2020, 20:23 Norbert de Langen, ***@***.***> wrote: > @kalinchernev <https://github.com/kalinchernev> I've been giving the > following some thought recently: > > What if storybook had a command to generate a data.json which would > include the stories? Would that help your case? > > — > You are receiving this because you were mentioned. > Reply to this email directly, view it on GitHub > <#9455?email_source=notifications&email_token=AAOVTFEYZE3AVY7MJRVDSF3RFOQN7A5CNFSM4KG6TTT2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOENPDMFY#issuecomment-593376791>, > or unsubscribe > <https://github.com/notifications/unsubscribe-auth/AAOVTFBTUXPO77QLS7VWGRDRFOQN7ANCNFSM4KG6TTTQ> > . >

ndelangen · 2020-03-02T14:01:38Z

@kalinchernev I think you could use storyshots for this purpose?
https://github.com/storybookjs/storybook/tree/next/addons/storyshots/storyshots-core

kalinchernev · 2020-03-02T14:27:09Z

The projects are in different repositories. One is https://github.com/ec-europa/europa-component-library and another is https://github.com/ec-europa/ecl-twig I tried the storyshots few months ago for regression testing in the first one, but wasn't quite successful and the setup wasn't accepted in the main branch. I also checked it's code few weeks ago trying to imagine using part of its APIs for rendering with puppeteer, but could find a doable path for few hours.

…

On Mon, 2 Mar 2020, 22:01 Norbert de Langen, ***@***.***> wrote: @kalinchernev <https://github.com/kalinchernev> I think you could use storyshots for this purpose? https://github.com/storybookjs/storybook/tree/next/addons/storyshots/storyshots-core — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#9455?email_source=notifications&email_token=AAOVTFHN4CTMX4PPITRPYRDRFO34HA5CNFSM4KG6TTT2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOENPNBBI#issuecomment-593416325>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAOVTFA53P3AXM74KIV5YK3RFO34HANCNFSM4KG6TTTQ> .

ndelangen · 2020-03-02T14:29:58Z

@kalinchernev I'd be open to an online meeting discussing this, and perhaps helping you in the right direction.

https://calendly.com/ndelangen/storybook

kalinchernev · 2020-03-02T14:53:32Z

Many thanks, sent a suggestion, please adjust to your preference! Much appreciated!

…

On Mon, 2 Mar 2020, 22:30 Norbert de Langen, ***@***.***> wrote: @kalinchernev <https://github.com/kalinchernev> I'd be open to an online meeting discussing this, and perhaps helping you in the right direction. https://calendly.com/ndelangen/storybook — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#9455?email_source=notifications&email_token=AAOVTFGMS4ITF2DPR6BRCGTRFO7GPA5CNFSM4KG6TTT2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOENPQI5Q#issuecomment-593429622>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAOVTFA6EPZLUCCTYZXZZLTRFO7GPANCNFSM4KG6TTTQ> .

ndelangen · 2020-03-09T20:24:11Z

@kalinchernev

Topic: Norbert de Langen's Personal Meeting Room
Date: Mar 9, 2020 03:04 PM Amsterdam

Meeting Recording:
https://zoom.us/rec/share/2MZ7Kozo-U1LZs-R10H4U7wxG57rX6a8hnNKrqINmE5x_3HCu8_bsfHWIQxvdm7P

kalinchernev · 2020-03-10T12:32:48Z

Thank you again for the time @ndelangen !

stale · 2020-03-31T13:00:21Z

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

stale · 2020-04-30T13:46:48Z

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

aghan · 2021-03-11T13:25:44Z

Hello All,

I wanted to do something similar. Is there a way we could render stories and export them into HTML files? I read the comments and it seems there is no way to do this but still wanted to check.

michaellouviere · 2022-02-16T19:55:43Z

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

muratcorlu · 2022-07-06T12:00:29Z

@kalinchernev

Topic: Norbert de Langen's Personal Meeting Room Date: Mar 9, 2020 03:04 PM Amsterdam

Meeting Recording: https://zoom.us/rec/share/2MZ7Kozo-U1LZs-R10H4U7wxG57rX6a8hnNKrqINmE5x_3HCu8_bsfHWIQxvdm7P

@ndelangen @kalinchernev Can you share a summary of your discussion? Zoom link doesn't work anymore. I'm also very interested in with this. Is there any blocker?

kalinchernev · 2022-07-06T12:13:05Z

The meeting was a bit more than 2 years ago. From the technical discussions I remember https://storybook.js.org/docs/react/sharing/storybook-composition being mentioned as a potential solution.

kalinchernev changed the title ~~How to render stories to individual files?~~ How to render stories to individual HTML files? Jan 15, 2020

shilman added question / support api: addons core labels Jan 15, 2020

stale bot added the inactive label Feb 6, 2020

stale bot removed the inactive label Feb 6, 2020

stale bot added the inactive label Feb 27, 2020

stale bot removed the inactive label Feb 27, 2020

stale bot added the inactive label Mar 31, 2020

stale bot closed this as completed Apr 30, 2020

Hypnosphi mentioned this issue Jan 15, 2021

2 packages updated by dependencies.io #2175

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to render stories to individual HTML files? #9455

How to render stories to individual HTML files? #9455

kalinchernev commented Jan 15, 2020

kalinchernev commented Jan 16, 2020

kalinchernev commented Jan 16, 2020

stale bot commented Feb 6, 2020

kalinchernev commented Feb 6, 2020

stale bot commented Feb 27, 2020

kalinchernev commented Feb 27, 2020 via email

shilman commented Feb 28, 2020

kalinchernev commented Feb 28, 2020

shilman commented Feb 28, 2020

ndelangen commented Mar 2, 2020

kalinchernev commented Mar 2, 2020 via email

kalinchernev commented Mar 2, 2020 via email

ndelangen commented Mar 2, 2020

kalinchernev commented Mar 2, 2020 via email

ndelangen commented Mar 2, 2020

kalinchernev commented Mar 2, 2020 via email

ndelangen commented Mar 9, 2020

kalinchernev commented Mar 10, 2020

stale bot commented Mar 31, 2020

stale bot commented Apr 30, 2020

aghan commented Mar 11, 2021

michaellouviere commented Feb 16, 2022

muratcorlu commented Jul 6, 2022

kalinchernev commented Jul 6, 2022

How to render stories to individual HTML files? #9455

How to render stories to individual HTML files? #9455

Comments

kalinchernev commented Jan 15, 2020

Versions

kalinchernev commented Jan 16, 2020

kalinchernev commented Jan 16, 2020

stale bot commented Feb 6, 2020

kalinchernev commented Feb 6, 2020

stale bot commented Feb 27, 2020

kalinchernev commented Feb 27, 2020 via email

shilman commented Feb 28, 2020

kalinchernev commented Feb 28, 2020

shilman commented Feb 28, 2020

ndelangen commented Mar 2, 2020

kalinchernev commented Mar 2, 2020 via email

kalinchernev commented Mar 2, 2020 via email

ndelangen commented Mar 2, 2020

kalinchernev commented Mar 2, 2020 via email

ndelangen commented Mar 2, 2020

kalinchernev commented Mar 2, 2020 via email

ndelangen commented Mar 9, 2020

kalinchernev commented Mar 10, 2020

stale bot commented Mar 31, 2020

stale bot commented Apr 30, 2020

aghan commented Mar 11, 2021

michaellouviere commented Feb 16, 2022

muratcorlu commented Jul 6, 2022

kalinchernev commented Jul 6, 2022