[Bug]: Storybook issue with Angular Signals input

[tobiaskau]

Describe the bug

Storybook does not properly support Angular Signal inputs. When creating a story with a component that uses the new Signal input as an input property, in the control tab of the story the type is not displayed properly (instead, only "Set string" input field is shown.)

In this screenshot you can see the difference how Storybook properly handles an @ Input() property but is unable to properly show the type of a Signal input (e.g. `testSignalsInput = input<'a' | 'b' | 'c' | undefined>(undefined);). In this scenario, both controls should actually be displayed in the same way (providing radio buttons with 'a', 'b' and 'c').

The test component in this scenario looks like this: `import { Component, Input, input } from '@angular/core';

@Component({ selector: 'app-test', standalone: true, imports: [], template: `

test works!

`, styles: ``, }) export class TestComponent { testSignalsInput = input<'a' | 'b' | 'c' | undefined>(undefined);

@Input() testInput?: 'a' | 'b' | 'c' = undefined; } `

Overall, this seems to be an issue with the compodoc dependency. In this PR (https://github.com/storybookjs/storybook/pull/26413) the issue was already mentioned. This is the related compodoc conversation. *Not sure if this is purely a compodoc issue or also related to Storybook, but it's worth mentioning that Storybook is currently almost unusable with apps using Angular Signals (which is the new Angular standard for inputs).

Reproduction link

https://stackblitz.com/edit/github-fbjw2b?file=src%2Fapp%2Ftest%2Ftest.component.ts

Reproduction steps

1. Go to above link
2. After Storybook is built, go to the /Test/Signals Test story.
3. Go to the Controls tab
4. Check the testInput input property - there are 3 radio buttons with values 'a', 'b' and 'c' (as intended)
5. Check the testSignalsInput input property - you can only set a string here as an input, although the 3 predefined values should be shown

This is the issue - when using Angular Signals, the user cannot select between predefined values anymore (like previously possible when using @ Input()), as shown in the Stackblitz example. The testInput and testSignalsInput properties should be shown to the user in the same way, but currently when using the new Angular input syntax (e.g. `testSignalsInput = input<'a' | 'b' | 'c' | undefined>(undefined);) only a string input will be shown in the Storybook control tab.

System

Storybook Environment Info:

  System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm <----- active
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    @storybook/addon-docs: ^8.2.0-alpha.10 => 8.2.0-alpha.10 
    @storybook/addon-essentials: ^8.2.0-alpha.10 => 8.2.0-alpha.10 
    @storybook/addon-interactions: ^8.2.0-alpha.10 => 8.2.0-alpha.10 
    @storybook/addon-links: ^8.2.0-alpha.10 => 8.2.0-alpha.10 
    @storybook/addon-onboarding: ^8.2.0-alpha.10 => 8.2.0-alpha.10 
    @storybook/angular: ^8.2.0-alpha.10 => 8.2.0-alpha.10 
    @storybook/blocks: ^8.2.0-alpha.10 => 8.2.0-alpha.10 
    @storybook/test: ^8.2.0-alpha.10 => 8.2.0-alpha.10 
    storybook: ^8.2.0-alpha.10 => 8.2.0-alpha.10

Additional context

No response

[valentinpalkovic]

I don’t think we at Storybook can do much about it. Let’s upvote https://github.com/compodoc/compodoc/pull/1491 which hopefully fixes the issue in compodoc!

[tobiaskau]

So the compodoc bug was merged (https://github.com/compodoc/compodoc/pull/1491#issuecomment-2229188689), I think Storybook now needs a dependency update as soon as its released?

[valentinpalkovic]

Sure! Hopefully compodoc is releasing soon-ish a new version.

[erikwski]

I'm waiting for the releasing of the new version too