Proposed update to add()

[jeef3]

This PR is more for discussion than immediate merge as it proposes a change to the main API. This was born out of discussion on #112.

Instead of rendering the component by just executing the render function of the story, we can wrap it in a React.createElement and everything should still work as it currently does:

// Before
return ReactDOM.render(story(), rootEl);

// After
return ReactDOM.render(React.createElement(story), rootEl);

This allows you to pass just a component to the add() function:

// Before:
stories.add('default view', () => <MyComponent />);

// After:
stories.add('default view', MyComponent);

Of course, now we are without props. The API change in this PR adds a third optional argument to the add method, props. These get passed to the createElement allowing you to:

stories.add('default view', MyComponent, { label: 'Component label' });

This paves the way for a matching `addAll`` style API:

stories.addAll(MyComponent, {
  'default view': { label: 'Component label' },
  'another view': { label: 'Another label' }
});

---

Anyway, as I mentioned, this is more for discussion than immediate merge.

[arunoda]

I don't this is a replacement API for add in anyway. Which gives us freedom to do anything inside the function pass to add.

I know this makes the API a bit simpler for many cases. I believe in APIs with providing only one way to do things. (No idea, that's a thing yet)

stories.add('default view', () => <MyComponent />);

Above example will work for most of the case. With arrow functions, I don't think it's not ugly too.

---

Anyway, I think the proposed API are good too in some cases. So, why don't we create a new NPM module with these.

[jeef3]

Anyway, I think the proposed API are good too in some cases. So, why don't we create a new NPM module with these.

Good idea. Fits nicely with the addition of #115 as well. I can see a series of storybook-* plugins coming 😄

[arunoda]

@jeef3 sweet.

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 15dfcc6.

Command	Status	Duration	Result
nx run-many -t build --parallel=3	✅ Succeeded	1m 4s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-01-06 22:06:20 UTC