Angular: Add type support for Angular's input signals

[valentinpalkovic]

Closes #25784

What I did

Support the new signal-based input function in Angular 17.2 and upwards in Storybook's helper types as StoryObj or StoryFn. I also ensured that TypeScript doesn't complain in Angular versions that don't support this feature.

Please be aware, that controls might not reflect the proper types when Signals are used. For component and property analysis, we are relying on compodoc. There is a PR, which adds signal-based input support, but the change isn't released yet. In the meantime, you would have to manually set the argTypes as described here: https://storybook.js.org/docs/api/arg-types

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

1. Run a latest Angular sandbox (angular-cli/default-ts)
2. Open the story src/stories/frameworks/angular_angular-cli-prerelease/signal/button.stories.ts
3. Make sure that for example the type for the size argument gets properly inferred

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-26413-sha-81812663. Try it out in a new sandbox by running npx [email protected] sandbox or in an existing project with npx [email protected] upgrade.

More information

Published version	0.0.0-pr-26413-sha-81812663
Triggered by	@valentinpalkovic
Repository	storybookjs/storybook
Branch	valentin/add-input-support-for-angular
Commit	81812663
Datetime	Mon Mar 11 14:17:46 UTC 2024 (1710166666)
Workflow run	8234365613

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=26413

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 607e2bf. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

✅ Successfully ran 1 target

• nx run-many --target=prep --all --parallel=8 --max-parallel=3 -- --reset --optimized

---

Sent with 💌 from NxCloud.

[attilacsanyi]

@valentinpalkovic compodoc 1.1.24 has been released 👏 for @vogloblinsky. I just tried "@storybook/addon-docs": "8.1.0-alpha.7", but still not renders properly. What else needed for even render a boolean control?

Angular

disabled = input(false, { transform: booleanAttribute });

Compodoc JSON (v1.1.24)

"propertiesClass": [
{
    "name": "disabled",
    "defaultValue": "input(false, { transform: booleanAttribute })",
    "deprecated": false,
    "deprecationMessage": "",
    "type": "",
    "optional": false,
    "description": "",
    "line": 15
},
...

Storybook

Thank you so much.

[valentinpalkovic]

@attilacsanyi The problem is the implementation of the regex here: https://github.com/compodoc/compodoc/pull/1439/files#diff-cdac1a6464ce522cb3a4015afecb77db52b44710804bea99c09ffd6b69b97fd7R141

It is pretty restrictive and does not take into account an options object. Even strings as default arguments are not working. I propose opening a PR in Compodoc's repo to fix this issue.

[tobiaskau]

@valentinpalkovic When using Angular input signals, it seems that still only string and boolean values are supported with Storybook. For example, in the following story a number signal input is used, although on Storybook still only string input fields are shown. Or does the args object need a special configuration when using signals?

stories.ts
export const TextArea: Story = { args: { placeholder: 'Enter your feedback...', rows: 5 }, };

component.ts
... rows = input<number>(3); ...

[valentinpalkovic]

I guess you are talking about Storybook Controls in the UI. As mentioned above, we rely herefore on Compodoc, which currently has a bug: compodoc/compodoc#1439 (comment)