[Bug]: Storybook Angular sample components are not marked standalone?

[fireflysemantics]

Describe the bug

I think the markup for the annotation in the Angular components is meant to include standalone:true like this:

@Component({
  standalone:true,
  selector: 'storybook-button',
  imports: [CommonModule],
  template: ` <button
    type="button"
    (click)="onClick.emit($event)"
    [ngClass]="classes"
    [ngStyle]="{ 'background-color': backgroundColor }"
  >
    {{ label }}
  </button>`,
  styleUrls: ['./button.css'],
})

This resolves some linting errors when the project is openend.

Also for the button demo the primary input is documented as:

  /**
   * Is this the principal call to action on the page?
   */
  @Input()
  primary = false;

And I think the intention is to have something like:

  /**
   * Is this a primary button.
   */
  @Input()
  primary = false;

Also the primary property on the button is set like this in the heading story (It's actually set twice):

primary
...
primary="true"

Which creates the linting error:

Type 'string' is not assignable to type 'boolean'.ngtsc(2322)

It should proxy with a `setter as described in this article.

Alternatively the primary property could just have type any and that resolves the linting errors ...

The heading component should be declared like this (Currently missing standalone and imports:

@Component({
  standalone: true,
  imports: [ButtonComponent, CommonModule],
  selector: 'storybook-header',
  template: `<header>

And the User type is missing the name property, and this also creates linting errors. It should be declared like this:

// eslint-disable-next-line @typescript-eslint/no-empty-interface
export interface User {
    name:string,
}

To Reproduce

No response

System

No response

Additional context

No response

[do-diegoortiz]

I believe this is important. I wanted to start using Storybook in my company, but it just adds errors since the basic examples, which is very frustrating.

Even doing the improvements mentioned above, in the page component you need to update to:

import Header from './header.component';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'storybook-page',
  standalone: true,
  imports: [Header, CommonModule],

And for the page.stories.ts file:

decorators: [
    moduleMetadata({
      imports: [CommonModule, Button, Header],
    }),
  ],

[valentinpalkovic]

@do-diegoortiz, @fireflysemantics Would one of you like to work on this? Implementing the changes should be easy. I can assist if needed :)

[webia1]

Greetings to all,

Should you wish to employ standalone components within a shared Nx Mono Repository Library, you may encounter the necessity for manual configurations. I am pleased to present to you a provisional, albeit effective, workaround. In this particular instance, the Login component serves as a standalone entity.

Best of luck and continued success in your endeavors.

import { HttpClient, HttpClientModule } from '@angular/common/http';
import { APP_INITIALIZER } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { CustomFormlyModule } from '@app-shared-libs/formly';
import { CustomMaterialModule } from '@app-shared-libs/material';
import {
  TranslateLoader,
  TranslateModule,
  TranslateService,
} from '@ngx-translate/core';
import { Meta, Story, moduleMetadata } from '@storybook/angular';

import { APP_LANGUAGES } from '../../config';
import { LoginComponent } from './login.component';
import { HttpLoaderFactory, appInitializerFactory } from '../../useFactory';

export default {
  title: 'LoginComponent',
  component: LoginComponent,
  decorators: [
    moduleMetadata({
      imports: [
        CustomFormlyModule,
        CustomMaterialModule,
        ReactiveFormsModule,
        HttpClientModule,
        TranslateModule.forRoot({
          defaultLanguage: APP_LANGUAGES.DE,
          loader: {
            provide: TranslateLoader,
            useFactory: HttpLoaderFactory,
            deps: [HttpClient],
          },
        }),
      ],
      providers: [
        {
          provide: APP_INITIALIZER,
          useFactory: appInitializerFactory,
          deps: [TranslateService],
          multi: true,
        },
      ], 
    }),
  ],
} as Meta;

export const Primary: Story<LoginComponent> = (args: LoginComponent) => ({
  component: LoginComponent,
  props: args,
});

[leopangchan]

I hope this gets more attention. In new projection standalone components are the go-to method for component creation.