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: storybookjs/storybook#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: twittwer/nx-tools#19 (comment)

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: #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)

[nayfin]

Example of how to use configure compodoc to run in watch mode can be found here. It's at the very bottom in an expansion labeled How to integrate with @nrwl/storybook?

[Brian-McBride]

If you edit your top level storybook config to look something like this:

// module.exports = {
//   stories: [],
//   addons: ['@storybook/addon-knobs/register'],
// };

module.exports = {
  stories: [],
  addons: [
    {
      name: '@storybook/addon-essentials',
      addons: ['@storybook/addon-controls'],
      options: {
        backgrounds: true,
      },
    },
  ],
};

This will give you the new features of Storybook and should be what the generator produces.

Also, the generator for stories needs to be updated as well.

import React from 'react';
import { Story, Meta } from '@storybook/react/types-6-0';
import { MyComponent, MyComponentProps } from './MyComponent';

export default {
  component: MyComponent,
  title: 'MyComponent',
} as Meta;

const Template: Story<MyComponentProps> = (args) => <MyComponent {...args} />;

export const Example = Template.bind({});
Example.args = {};

[github-actions]

This issue has been automatically marked as stale because it hasn't had any recent activity. It will be closed in 14 days if no further activity occurs.
If we missed this issue please reply to keep it active.
Thanks for being a part of the Nx community! 🙏

[kpaxton]

@mandarini Should this have been automatically closed? I feel like this is still needed? Another ticket added for what @Brian-McBride mentioned about the stories that are generated.

[mandarini]

This fixed it:
#6068

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.