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 storybook@0.0.0-pr-26413-sha-81812663 sandbox or in an existing project with npx storybook@0.0.0-pr-26413-sha-81812663 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.