Angular: Filter non-inputs from controls

[shilman]

Issue: #16865

What I did

Conditionally apply a patch suggested in #16865 which restricts compodoc-inferred argTypes to inputs only.

I implemented this as a feature flag to make it a non-breaking change. I expect this to be the new behavior in v7, but need validation from Angular users/maintainers cc: @storybookjs/angular

In the meantime, setting the following feature flag in .storybook/main.js will get the new behavior:

module.exports = {
  features: {
    angularFilterNonInputControls: true,
  }
};

How to test

See the Example/Button story in example/angular-cli

• With the flag, it will only show the inputs
• Without the flag, it will also show the onClick output, populated by a big hairy object

You can also modify the component source to have extra data

lifecycle methods

  ngOnInit() {
  }

members

pharmacies: any[] = [];

methods

@Input()
apiData?: SearchResultsAPIData | null = null;

initializeBasedOnAPIData() {
   this.pharmacies = this.apiData.pharmacies;
}

[matheo]

LGTM :heavy_check_mark:

[mrlonis]

This would be an excellent feature to have given the litany of Angular Component-related issues affecting Storybook https://github.com/storybookjs/storybook/issues/17004 https://github.com/storybookjs/storybook/issues/18198 https://github.com/storybookjs/storybook/issues/16865

[alfredoperez]

@shilman @yannbf 🙏🏻 It will be fantastic to merge this; we had to modify inputs in multiple components to be initialized in the constructor as a workaround

[Marklb]

@shilman Is this not something that should be handled by the docs addon? The ArgTypes is information that is useful for more than just Controls. One example is that filtering the outputs out of the ArgTypes, the auto-generated information used by Actions is lost.

I could be wrong, but I think the need for this within the Angular framework was from issues primarily caused by the defaultValues, which have been getting removed anyway.

[ndelangen]

@storybookjs/angular is this good to merge?

[sheriffMoose]

@shilman first of all, thanks so much for this, second, sorry for noticing this PR so late, third, can we restructure the features prop to contain framework specific features listed under the framework name and core features on the root level?

i.e.

features: {
     ...coreFeatures,
     angular: {
          filterNonInputControls: true
     }
},

[konstantindenerz]

There is a PR #18549 to control visibility of control groups.

[b12f]

It looks like the CI failures might have not been related to this specific change. What would need to happen to move this PR forward? I'm willing to put in some time, as this is a crucial change to make ArgsTable and Controls useful for Angular components.

[Fydon]

I've been following this as I can't update Storybook due to it having problems with Angular. Could @cdedreuille or someone else please provide a reason for why this was closed? If this was fixed by other code, could a reference please be provided in case it isn't working as expected?

[gvlekke]

Can I do something to get this working? altho I liked the other PR more where you can configure what groups you want to show (or hide) https://github.com/storybookjs/storybook/pull/18549

[ndelangen]

@valentinpalkovic Is this PR still something we plan to bring to a merge?

[valentinpalkovic]

Definitely! Maybe between Christmas and New Year, I will find some time to reevaluate this (the PR is pretty old)

[gvlekke]

Definitely! Maybe between Christmas and New Year, I will find some time to reevaluate this (the PR is pretty old)

If you want some help please let me know.