What are some tips for leveraging Angular input signals in Storybook?

Question

What are some tips for leveraging Angular input signals in Storybook?

I am currently working on setting up Storybook 8.0.8 with Angular 17.3. I have been using the Angular input() signal in my components, but I've encountered an interesting issue where the args for the storybook stories also need the argument type to be a signal. Trying to access the injection context in the story doesn't seem like the ideal solution to me.

I am looking for a cleaner way to provide my args as literal values, as it used to be. Has anyone faced this problem before and discovered a good workaround?

Below is a basic angular component and storybook story that demonstrates the issue:

const meta: Meta<NoteComponent> = {
  title: 'Shared/Note',
  component: NoteComponent,
  tags: ['autodocs'],
  args: {
    maxChars: 200 // Error: Type 'number' is not assignable to type 'InputSignal<number>'.
  }
};

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

export const Primary: Story = {
};

@Component({
  selector: 'app-note',
  template: 'A note with {{maxChars()}} maximum characters',
  standalone: true,
})
export class NoteComponent {
  maxChars = input<number>(300);
}

Just a reminder, when using any signal() creation function, make sure there is an injection context available. Using signal() without an injection context will result in

NG0203: inputFunction() can only be used within an injection context such as a constructor, a factory function, a field initializer, or a function used with runInInjectionContext

angular typescript storybook angular-signals

Answer 1

Answer №1

I have come up with a solution to the issue I was facing. It seems that Storybook only relies on the component's class definition as the expected type for the story args, without directly binding the values to the component instance. By finding a workaround within TypeScript's type system, I was able to make it compile and render the component in Storybook correctly.

const meta: Meta<NoteComponent> = {
  title: 'Shared/Note',
  component: NoteComponent,
  tags: ['autodocs'],
  args: {
    maxChars: 200 as unknown as InputSignal<number>
  }
};

Although it may not be ideal, this solution does get the job done.

Answer 2

I have come up with a solution to the issue I was facing. It seems that Storybook only relies on the component's class definition as the expected type for the story args, without directly binding the values to the component instance. By finding a workaround within TypeScript's type system, I was able to make it compile and render the component in Storybook correctly.

const meta: Meta<NoteComponent> = {
  title: 'Shared/Note',
  component: NoteComponent,
  tags: ['autodocs'],
  args: {
    maxChars: 200 as unknown as InputSignal<number>
  }
};

Although it may not be ideal, this solution does get the job done.

Answer 3

Answer №2

In version 8.0.8 of Storybook, there is an issue where non-signal properties can be used as arguments, but Storybook expects signal properties to be provided. Internally, Storybook utilizes TransformEventType to convert any EventEmitter into a callback. This means that we can provide a callback for an EventEmitter property. However, Storybook does not internally transform the type of signal inputs into the actual value of the signal.

To address this, I created a temporary helper:

storybook.helper.ts

export function toArgs<Component>(
    args: Partial<TransformSignalInputType<TransformEventType<Component>>>
): TransformEventType<Component> {
    return args as unknown as TransformEventType<Component>;
}

/** Convert event emitter to callback for storybook */
type TransformEventType<T> = {
    [K in keyof T]: T[K] extends EventEmitter<infer E> ? (e: E) => void : T[K];
};

/** Convert any input signal into the held type of the signal */
type TransformSignalInputType<T> = {
    [K in keyof T]: TransformInputType<T[K]>;
};

import { InputSignalWithTransform, InputSignal } from '@angular/core';

// Type to extract the type from InputSignal or InputSignalWithTransform
type TransformInputType<T> =
    T extends InputSignalWithTransform<infer U, any>
        ? U
        : T extends InputSignal<infer U>
          ? U
          : T;

You can then use it like this:

const meta: Meta<NoteComponent> = {
  title: 'Shared/Note',
  component: NoteComponent,
  tags: ['autodocs'],
  args: toArgs<NoteComponent>({
    maxChars: 200
  })
};

Answer 4

In version 8.0.8 of Storybook, there is an issue where non-signal properties can be used as arguments, but Storybook expects signal properties to be provided. Internally, Storybook utilizes TransformEventType to convert any EventEmitter into a callback. This means that we can provide a callback for an EventEmitter property. However, Storybook does not internally transform the type of signal inputs into the actual value of the signal.

To address this, I created a temporary helper:

storybook.helper.ts

export function toArgs<Component>(
    args: Partial<TransformSignalInputType<TransformEventType<Component>>>
): TransformEventType<Component> {
    return args as unknown as TransformEventType<Component>;
}

/** Convert event emitter to callback for storybook */
type TransformEventType<T> = {
    [K in keyof T]: T[K] extends EventEmitter<infer E> ? (e: E) => void : T[K];
};

/** Convert any input signal into the held type of the signal */
type TransformSignalInputType<T> = {
    [K in keyof T]: TransformInputType<T[K]>;
};

import { InputSignalWithTransform, InputSignal } from '@angular/core';

// Type to extract the type from InputSignal or InputSignalWithTransform
type TransformInputType<T> =
    T extends InputSignalWithTransform<infer U, any>
        ? U
        : T extends InputSignal<infer U>
          ? U
          : T;

You can then use it like this:

const meta: Meta<NoteComponent> = {
  title: 'Shared/Note',
  component: NoteComponent,
  tags: ['autodocs'],
  args: toArgs<NoteComponent>({
    maxChars: 200
  })
};

What are some tips for leveraging Angular input signals in Storybook?

Answer №1

Answer №2

Similar questions

There was an issue with the program: "ERROR TypeError: When trying to call a method from the

Choose the appropriate NPM module platform for Angular development

Differences Between Angular Event Emitter and Click Listener

Utilizing a powerful combination of Angular 5, PrimeNG charts, Spring Boot, and JHipster

When the application initializes, the Child Component is activated

I want my Angular 2 application to redirect to the appropriate page when a user who is logged out attempts to access a page that requires them to be logged in

Unable to generate or compose a text document within my Ionic application

Is it possible to modify the host header within an Angular app?

Angular mat-table experiencing issues with matToolTip functionality

Scrolling horizontally in Ionic framework

"Dealing with Angular 9's mat-table and the pesky ExpressionChangedAfterItHasBeenChecked

Troubleshooting Appium error management is ineffective

Utilizing the <slot> feature in Angular 5 for increased functionality

Best practices for implementing dual ngFor directives within a single tr element?

Detecting changes in an ondrop event triggered by a modification in object property

Angular Boilerplate is experiencing difficulties in properly reading ABP

Strategies for effectively choosing this specific entity from the repository

What is the reason behind the ineffectiveness of injection in abstraction?

Utilizing Directives to Embed Attributes

What exactly does the use of type assertion as any in Typescript entail?