Nx: Storybook enhancement: Change story templates to include types and @storybook/addon-essentials, alongside addon-knobs

[mandarini]

Description

Update the story templates to include types. Also, update stories to use the @storybook/addon-essentials package and the extra features it offers.

Motivation

Enhance the creation of stories. This is after a chat I had with @yannbf.

Suggested Implementation

The story templates would be updated to include types, and the @storybook/addon-essentials features.

[mandarini]

@yannbf I am creating this feature request to see how we can work on this. We can chat again to coordinate, but feel free to jump in!

[the-ult]

Isn't the addon/knobs deprecated in favor of controls?

So alongside, might be better as option, but not as default.

[yannbf]

Hey @the-ult you are right, however addon controls currently does not support query parameters to set props, and I believe in the basic project that NX sets, it has an E2E test that requires that functionality, which is supported in knobs.

[the-ult]

Aah, thanks, that's good to know.

So, that would probably a different PR? (To fix it in the basic project as well)

[yannbf]

out of curiosity, I have a WIP PR to add support to query parameters so that controls does the same as knobs: https://github.com/storybookjs/storybook/pull/12728

[dobromyslov]

Storybook Controls won't automatically detect component inputs without Storybook Docs.
And Storybook Docs won't work without @twittwer/compodoc NX plugin in case you use Angular.
Have a look at this analysis and how to make them work together: https://github.com/twittwer/nx-tools/issues/19#issuecomment-708852153

And another roadblock concludes in manual run of ng run projectname:compodoc:json command each time you change components. Is there a way to make NX Storybook plugin run this command during ng run projectname:storybook execution in watch mode?

[dobromyslov]

Added separate feature request for Storybook Docs support: https://github.com/nrwl/nx/issues/3918

[the-ult]

@dobromyslov was indeed looking for a solution to 'pre-run' the compodoc when starting a storybook with nx run my-lib:storybook

Would be nice if it was possible to add a pre-task or something to the configuration in angular.json.. (but that's probably more a @angular/cli feature-request)