Storybook: [help wanted] Render all stories on one page

[dimaip]

Hey, I want to visually diff all of my stories with BackstopJS. I know you have this feature planned, but for now, I need something simple to get going.

Is it possible to create a storybook plugin to render all stories on one page? Can you give me a pointer? I could feed that page to BackstopJS, specify a class name that is wrapping each story and call it a day.

[roonyh]

See available extensions. I think add stories group from @jurgob is just what you want.

[dimaip]

Hey, thanks, I'm already using that one, but it's good for adding multiple variants of one component on one page, whereas I need to concat all stories together and display them on one page.

[jurgob]

So basically, you want to see different widget in every story? Can you specify why? (It could be interesting).
Bte A dirty and fast solution could be create a widget which Just display a child and then use my widget. Something like:
const Cont = ({child}) => {child} and then passing Cont to the plugin.

[jurgob]

*and then use "add stories group" plugin

[mnmtanish]

Hi @dimaip

How about creating a scenario per story? I've wrote a simple POC to do that. Before doing anything else, how can developers use backstopjs with storybook?

To check the POC

git clone https://github.com/kadira-samples/react-button
git checkout backstop-setup
npm install
node .storybook/gen_backstop.js

With a little extra effort we can remove the last gen_backstop.js stage (backstop supports js configs). Didn't do it for the POC.

cc: @arunoda

[dimaip]

@jurgob sorry for not replying for a long time, was on vacation without the internet... So yes, I just want to test every component I have with BackstopJS. I could dump them all on one page, wrap them with some div with a class and match them in BackstopJS.

Another solution would be as @mnmtanish proposed, which I quite like, to generate BackstopJS' config based on data received from Storybook.
Btw, what does POC stand for?

So this was basically what I needed, didn't know it was possible: storybook.getStoryBook();

[mnmtanish]

POC means "Proof of Concept". Like a demo.
https://en.wikipedia.org/wiki/Proof_of_concept

[dimaip]

@mnmtanish ah hah, I see. I'll try to integrate your solution and get rid of 4) when I'm back from vacation, sounds really promising so far!
Thanks a lot!

[arunoda]

I think we've a kind of solution now.
We wanted to more docs for this and it' coming soon.

[sylvainbannier]

@mnmtanish, tried backstop with the settings found in backstop-setup branch of https://github.com/kadira-samples/react-button but I always get half of my CSS

Upper half is what I get, lower half is what I should get.

It's like some CSS is missing.

I guess it's more of an issue with backstop or phantom but I'm not sure about that. Have you experienced the same issue ?

[mnmtanish]

Hi @sylvainbannier

The script on the backstop-setup branch just loads story functions with nodejs and renders them. As we're not using Webpack here, it won't load styles from css files. The styles which do get loaded in this example must be inline styles.

The backstop-setup branch was just an experiment so I don't recommend using it. When we find a good way to do this, we'll try to add this feature to the storyshots tool.

[sylvainbannier]

thanks @mnmtanish so storyshot will be about jest screenshot testing and css regression testing too ?

[arunoda]

@sylvainbannier check the last part of this blog post: Snapshot Testing in React Storybook

[jeffcarbs]

I just solved this in my app, albeit for a slightly different purpose. I just wanted to be able to view all of my components on one page so when making edits to a global style library I can spot-check to make sure everything looks as expected. Figured I'd share my code just in case others find it useful:

https://gist.github.com/jeffcarbs/ef81004e53fc755bbb84a23146fb3a24

The basic idea is:

• load all stories
• load a story that uses getStorybook to get all previously loaded stories and render them all

[vidal7]

I just solved this in my app, albeit for a slightly different purpose. I just wanted to be able to view all of my components on one page so when making edits to a global style library I can spot-check to make sure everything looks as expected. Figured I'd share my code just in case others find it useful:

https://gist.github.com/jcarbo/ef81004e53fc755bbb84a23146fb3a24

The basic idea is:

• load all stories
• load a story that uses getStorybook to get all previously loaded stories and render them all

Hi @jeffcarbs, it seems that your link is not working anymore. I tried to search on google with the cache: option and I even tried to search on the way back machine. I really want to check how you render all the previously loaded stories.

[jeffcarbs]

@vidal7 - just fixed the link in that comment. I had changed my username which is why the other link broke. New link:
https://gist.github.com/jeffcarbs/ef81004e53fc755bbb84a23146fb3a24

[vidal7]

Thank you so much... I see that you are using story.render(). I am not familiar with React but it seems to work when you are using React. The problem is, I am using Vue.js and story.render() is not working. There is surely a way because storybook is doing that in the preview module.

[vidal7]

For those using Vue.js, I found the solution and everything is working fine basing on @jeffcarbs solution but I adapted it for Vue.js with typescript. If you are using javascript, just remove the typings.

const stories: Story = storiesOf('View all', module);

const allStories: StoryObject[] = [];
getStorybook().forEach((storyStore: StoryStore) => {
    allStories.push(...storyStore.stories);
});

if (allStories.length > 1) {
    stories.add('View all', () => ({
        render(h: CreateElement): VNode {
            return h('div', {}, allStories.map((story: StoryObject) => {
                return h('div', {}, [
                    h('h2', {}, story.name),
                    h('p', {}, [h(story.render())])
                ]);
            }));
        }
    }));
}