Enable LWC on Storybook.Js

[AllanOricil]

Is your feature request related to a problem? Please describe. It is really boring to create a parent components just to preview the actual component using the local dev tools.

Describe the solution you'd like It would be cool to be able to document components on Storybook Js. It would be great to interact with components using Storybook. And it would serve as a documentation for customers.

Someone started this project 2 years ago but it is abandoned https://github.com/reiniergs/lwc-storybooks-poc/issues Salesforce could take over it.

Describe alternatives you've considered

1 - hardcode default values for each @api prop 2 - create a parent test component to pass @api props values 3 - deploy the component to a sandbox, set it to exposed, open the lightning builder to test props. Most of the time @api variables aren't available because developers don't register them as attributes in the .xml. By the way, why aren't all @api variables added to .xml automatically?

Additional context N/A

[lukethacoder]

Wondering if this repo may be of help with the storybook questions? It would be cool to have storybook baked into the "on platform" offering.

Saying that, there is already a component library of sorts on platform (see docs). No where near as robust and useful as storybook, but its still something. Important part there is the https://<myDomainName>.lightning.force.com/docs/component-library.

RE: why not all @api values auto registered, most likely cause I can see unknowing admins potentially breaking LWCs overriding values they shouldn't be editing.

[AllanOricil]

@lukethacoder thanks for sharing that. I didnt know that existed at all!

[AllanOricil]

@lukethacoder I tried your suggestion and it did not work. The site with the components never loads.

Here is what I see when I click on "link to my org" button:

And this is what I see when I append "/docs/component-library" to my domain

Why isn't it loading?

[AllanOricil]

And it finally loaded after 12 minutes! Can somebody implement Lazy loading with virtual scrolling? I noticed that this site is loading all components in my Org before displaying anything on the screen. And because I'm using Vlocity, it has thousands of components and it takes forever to load.

[AllanOricil]

@lukethacoder Why can't I see this component I created? It works perfectly on the Lightning Builder

[AllanOricil]

@lukethacoder it is not available for LWC. That is why I see this message https://salesforce.stackexchange.com/questions/275825/definition-not-found-for-my-lwc-component-reference

[lukethacoder]

And it finally loaded after 12 minutes! Can somebody implement Lazy loading with virtual scrolling? I noticed that this site is loading all components in my Org before displaying anything on the screen. And because I'm using Vlocity, it has thousands of components and it takes forever to load.

I'd say I'm surprised, but I'm not. Always small quality of life things that seem to be missed across the platform. Ah well, not too much you can you really:

1. Could spool up a scratch org with only your custom components (none of the vlocity stuff) while you work on them and then push them to your main environment when you're ready.

2. Another possible way of attacking this might be running the Local Development Server. Its still in beta, and is still yet to properly support css-variables (still waiting for a fix on that front), but might fit your use case nicely, and sure beats waiting 12mins for that component page to load.

If you go down the local dev server route, I found having a temporary wrapper LWC useful to be able to pass down different @api values to your components as you're building/debugging them.