Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: Support of default Angular's inputs #29488

Open
kvart714 opened this issue Oct 30, 2024 · 0 comments
Open

[Bug]: Support of default Angular's inputs #29488

kvart714 opened this issue Oct 30, 2024 · 0 comments

Comments

@kvart714
Copy link

kvart714 commented Oct 30, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants