Angular: Introduce argsToTemplate for property and event Bindings

[valentinpalkovic]

Closes #22222

What I did

This PR introduces the utility function argsToTemplate designed to assist in the generation of Angular component templates for Storybook stories. The primary goal of this utility is to seamlessly handle both property bindings and event bindings, aligning closely with Angular's practices.

Highlights:

1. Event Binding Recognition: The function identifies if an argument value is a function. If true, it considers this as an Angular event binding, accommodating scenarios like button clicks or other custom component events.

2. Efficient Filtering: Leveraging the Set data structure allows for efficient filtering of included or excluded keys.

3. Descriptive Types: The ArgsToTemplateOptions interface has been introduced to provide a clear understanding of the options passed to the function.

Examples and Motivations:

This utility addresses two key challenges with Angular in the context of Storybook:

• Angular treats undefined values in property bindings as actual values, inhibiting the default values' application. This behavior is often non-intuitive and has been a bug source.
• The earlier setup, while utilizing a default property value, didn't offer users control override capabilities.

The new utility ensures that component templates align better with Angular's expected behaviors and provides robust support for Storybook controls.

Documentation:

In-depth inline comments and JSDoc descriptions have been added to elucidate the function's behavior and the introduced interface. An example has also been provided, showcasing the function in a real-world context.

Request for Review:

Feedback on the utility, especially potential edge cases or areas for further enhancement, would be greatly valued.

Additional work:

• Angular Stories were converted from CSF2 to CSF3
• Updated documentation

---

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

• stories
• unit tests
• integration tests
• end-to-end tests

Manual testing

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

Documentation

• Add or update documentation reflecting your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Checklist for Maintainers

• When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli/src/sandbox-templates.ts

• Make sure this PR contains one of the labels below:

  Available labels

  • bug: Internal changes that fixes incorrect behavior.
  • maintenance: User-facing maintenance tasks.
  • dependencies: Upgrading (sometimes downgrading) dependencies.
  • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
  • cleanup: Minor cleanup style change. Will not show up in release changelog.
  • documentation: Documentation only changes. Will not show up in release changelog.
  • feature request: Introducing a new feature.
  • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
  • other: Changes that don't fit in the above categories.

🦋 Canary release

This pull request has been released as version 0.0.0-pr-24434-sha-0d375607. Install it by pinning all your Storybook dependencies to that version.

More information

Published version	0.0.0-pr-24434-sha-0d375607
Triggered by	@valentinpalkovic
Repository	storybookjs/storybook
Branch	valentin/angular-args-to-template
Commit	0d375607
Datetime	Wed Oct 11 08:59:38 UTC 2023 (1697014778)
Workflow run	6480283607

To request a new release of this pull request, mention the @storybookjs/core team.

core team members can create a new canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=24434

[yannbf]

LGTM!