storybookjs/storybook

[Bug]: Support of default Angular's inputs

Open

#29,488 opened on Oct 30, 2024

View on GitHub
 (2 comments) (0 reactions) (0 assignees)TypeScript (10,058 forks)batch import
angularbughelp wanted

Repository metrics

Stars
 (89,909 stars)
PR merge metrics
 (Avg merge 7d 22h) (184 merged PRs in 30d)

Description

Describe the bug

I just updated to the latest Angular (18.2.9) and Storybook (8.3.6) and was surprised to find that it doesn't support signals

I found a lot of discussions, but they all talk about input and output signals. I'm talking about a simple signal(...)

I found this and this. And I even see that you supported model(). But I don't understand why regular singal(...) is not supported?

Storybook has always allowed you to work with component fields without requiring you to make them inputs. this makes sense because public fields are what html uses. But inputs are a contract with the outside world.

Reproduction link

https://stackblitz.com/edit/github-mbwd5e-mebzvr?file=src%2Fapp%2Fsignal-ex%2Fsignal-ex.stories.ts

Reproduction steps

example: https://stackblitz.com/edit/github-mbwd5e-mebzvr?file=src%2Fapp%2Fsignal-ex%2Fsignal-ex.stories.ts

let's say I have a component with a field. this field can be updated asynchronously. Previously I had to use BehaviorSubject for this and I could override the value from Storybook. now I want to use signal(). Storybook does not work with signal, but it works with model

@Component({
  selector: 'signal-ex',
  standalone: true,
  imports: [CommonModule],
  template: `Field: {{ field }} <br> Signal: {{ signalField() }} <br> Model: {{ modelField() }}`,
  styleUrls: [],
})
export class SignalExComponent {
  field = false;     // <- we can't use fields with ChangeDetection.OnPush
  field$ = new BehaviorSubject<boolean>(false);
  fieldSignal = signal(false);
  fieldModel = model(false);

  toggle() {
    this.field = true;
    this.field$.next(true);
    this.fieldSignal.set(true);
    this.fieldModel.set(true);
  }
}


story:

const meta: Meta<SignalExComponent> = {
  component: SignalExComponent,
  tags: ['autodocs'],
};

export default meta;
type Story = StoryObj<SignalExComponent>;

export const Primary: Story = {
  args: {
    field: true,
    field$: new BehaviorSubject<boolean>(true),
    fieldSignal: true as any,    // <- doesn't work
    fieldModel: true,
  },
};


System

Storybook Environment Info:

System: OS: Windows 11 10.0.22631 CPU: (20) x64 13th Gen Intel(R) Core(TM) i7-13700H Binaries: Node: 20.11.1 - C:\Program Files\nodejs\node.EXE npm: 10.2.4 - C:\Program Files\nodejs\npm.CMD <----- active Browsers: Edge: Chromium (129.0.2792.79) npmPackages: @storybook/addon-a11y: ^8.3.5 => 8.3.6 @storybook/addon-actions: ^8.3.5 => 8.3.6 @storybook/addon-essentials: ^8.3.5 => 8.3.6 @storybook/addon-interactions: ^8.3.5 => 8.3.6 @storybook/addon-links: ^8.3.5 => 8.3.6 @storybook/addons: ^7.6.17 => 7.6.17 @storybook/angular: ^8.3.5 => 8.3.6 @storybook/core-server: 8.3.5 => 8.3.5 @storybook/testing-library: 0.2.2 => 0.2.2 chromatic: ^11.12.5 => 11.16.1 msw-storybook-addon: 2.0.3 => 2.0.3 storybook: 8.3.6 => 8.3.6 storybook-addon-pseudo-states: ^4.0.2 => 4.0.2

Additional context

No response

Contributor guide