From fdb7382eb0f641da0b9d27eb167f9248d4e7a67f Mon Sep 17 00:00:00 2001
From: Valentin Palkovic <valentin@chromatic.com>
Date: Mon, 11 Dec 2023 12:32:33 +0100
Subject: [PATCH] Merge pull request #25152 from
 Marklb/marklb/update-ng-cli-templates

Angular: Update Angular cli templates
(cherry picked from commit 986f86be62f935393b32f6ebe4f0fa5b3d5a91b7)
---
 code/e2e-tests/json-files.spec.ts             |  2 +-
 code/frameworks/angular/template/cli/User.ts  |  2 --
 .../angular/template/cli/button.component.ts  |  3 ++-
 .../{Button.stories.ts => button.stories.ts}  | 11 ++++----
 .../angular/template/cli/header.component.ts  | 12 ++++++---
 .../{Header.stories.ts => header.stories.ts}  | 18 +++----------
 .../angular/template/cli/page.component.ts    |  9 +++++--
 .../cli/{Page.stories.ts => page.stories.ts}  | 27 ++++---------------
 code/frameworks/angular/template/cli/user.ts  |  3 +++
 9 files changed, 36 insertions(+), 51 deletions(-)
 delete mode 100644 code/frameworks/angular/template/cli/User.ts
 rename code/frameworks/angular/template/cli/{Button.stories.ts => button.stories.ts} (79%)
 rename code/frameworks/angular/template/cli/{Header.stories.ts => header.stories.ts} (56%)
 rename code/frameworks/angular/template/cli/{Page.stories.ts => page.stories.ts} (61%)
 create mode 100644 code/frameworks/angular/template/cli/user.ts

diff --git a/code/e2e-tests/json-files.spec.ts b/code/e2e-tests/json-files.spec.ts
index d2026a7872b2..f205de3299ed 100644
--- a/code/e2e-tests/json-files.spec.ts
+++ b/code/e2e-tests/json-files.spec.ts
@@ -23,7 +23,7 @@ test.describe('JSON files', () => {
       entries: expect.objectContaining({
         'example-button--primary': expect.objectContaining({
           id: 'example-button--primary',
-          importPath: expect.stringContaining('Button.stories'),
+          importPath: expect.stringMatching(/button\.stories/i),
           name: 'Primary',
           title: 'Example/Button',
           type: 'story',
diff --git a/code/frameworks/angular/template/cli/User.ts b/code/frameworks/angular/template/cli/User.ts
deleted file mode 100644
index 2f7fcecb5d74..000000000000
--- a/code/frameworks/angular/template/cli/User.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface User {}
diff --git a/code/frameworks/angular/template/cli/button.component.ts b/code/frameworks/angular/template/cli/button.component.ts
index 28dcc97e5526..badc6bad7f19 100644
--- a/code/frameworks/angular/template/cli/button.component.ts
+++ b/code/frameworks/angular/template/cli/button.component.ts
@@ -3,6 +3,7 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
 
 @Component({
   selector: 'storybook-button',
+  standalone: true,
   imports: [CommonModule],
   template: ` <button
     type="button"
@@ -14,7 +15,7 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
   </button>`,
   styleUrls: ['./button.css'],
 })
-export default class ButtonComponent {
+export class ButtonComponent {
   /**
    * Is this the principal call to action on the page?
    */
diff --git a/code/frameworks/angular/template/cli/Button.stories.ts b/code/frameworks/angular/template/cli/button.stories.ts
similarity index 79%
rename from code/frameworks/angular/template/cli/Button.stories.ts
rename to code/frameworks/angular/template/cli/button.stories.ts
index 3809c0e3dd19..19661b149fdb 100644
--- a/code/frameworks/angular/template/cli/Button.stories.ts
+++ b/code/frameworks/angular/template/cli/button.stories.ts
@@ -1,12 +1,13 @@
 import type { Meta, StoryObj } from '@storybook/angular';
-import Button from './button.component';
+
+import { ButtonComponent } from './button.component';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-const meta: Meta<Button> = {
+const meta: Meta<ButtonComponent> = {
   title: 'Example/Button',
-  component: Button,
+  component: ButtonComponent,
   tags: ['autodocs'],
-  render: (args: Button) => ({
+  render: (args: ButtonComponent) => ({
     props: {
       backgroundColor: null,
       ...args,
@@ -20,7 +21,7 @@ const meta: Meta<Button> = {
 };
 
 export default meta;
-type Story = StoryObj<Button>;
+type Story = StoryObj<ButtonComponent>;
 
 // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
 export const Primary: Story = {
diff --git a/code/frameworks/angular/template/cli/header.component.ts b/code/frameworks/angular/template/cli/header.component.ts
index 2980d3b3202e..1c3544fffcfa 100644
--- a/code/frameworks/angular/template/cli/header.component.ts
+++ b/code/frameworks/angular/template/cli/header.component.ts
@@ -1,8 +1,13 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core';
-import type { User } from './User';
+import { CommonModule } from '@angular/common';
+
+import { ButtonComponent } from './button.component';
+import type { User } from './user';
 
 @Component({
   selector: 'storybook-header',
+  standalone: true,
+  imports: [CommonModule, ButtonComponent],
   template: `<header>
     <div class="storybook-header">
       <div>
@@ -47,9 +52,8 @@ import type { User } from './User';
           ></storybook-button>
           <storybook-button
             *ngIf="!user"
-            primary
             size="small"
-            primary="true"
+            [primary]="true"
             class="margin-left"
             (onClick)="onCreateAccount.emit($event)"
             label="Sign up"
@@ -60,7 +64,7 @@ import type { User } from './User';
   </header>`,
   styleUrls: ['./header.css'],
 })
-export default class HeaderComponent {
+export class HeaderComponent {
   @Input()
   user: User | null = null;
 
diff --git a/code/frameworks/angular/template/cli/Header.stories.ts b/code/frameworks/angular/template/cli/header.stories.ts
similarity index 56%
rename from code/frameworks/angular/template/cli/Header.stories.ts
rename to code/frameworks/angular/template/cli/header.stories.ts
index e6b99c02a089..3222518ace44 100644
--- a/code/frameworks/angular/template/cli/Header.stories.ts
+++ b/code/frameworks/angular/template/cli/header.stories.ts
@@ -1,22 +1,12 @@
-import { moduleMetadata } from '@storybook/angular';
 import type { Meta, StoryObj } from '@storybook/angular';
-import { CommonModule } from '@angular/common';
 
-import Button from './button.component';
-import Header from './header.component';
+import { HeaderComponent } from './header.component';
 
-const meta: Meta<Header> = {
+const meta: Meta<HeaderComponent> = {
   title: 'Example/Header',
-  component: Header,
+  component: HeaderComponent,
   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ['autodocs'],
-  render: (args) => ({ props: args }),
-  decorators: [
-    moduleMetadata({
-      declarations: [Button],
-      imports: [CommonModule],
-    }),
-  ],
   parameters: {
     // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
     layout: 'fullscreen',
@@ -24,7 +14,7 @@ const meta: Meta<Header> = {
 };
 
 export default meta;
-type Story = StoryObj<Header>;
+type Story = StoryObj<HeaderComponent>;
 
 export const LoggedIn: Story = {
   args: {
diff --git a/code/frameworks/angular/template/cli/page.component.ts b/code/frameworks/angular/template/cli/page.component.ts
index f3ae4868549e..08cc9cafe1f2 100644
--- a/code/frameworks/angular/template/cli/page.component.ts
+++ b/code/frameworks/angular/template/cli/page.component.ts
@@ -1,8 +1,13 @@
 import { Component } from '@angular/core';
-import type { User } from './User';
+import { CommonModule } from '@angular/common';
+
+import { HeaderComponent } from './header.component';
+import type { User } from './user';
 
 @Component({
   selector: 'storybook-page',
+  standalone: true,
+  imports: [CommonModule, HeaderComponent],
   template: `<article>
     <storybook-header
       [user]="user"
@@ -60,7 +65,7 @@ import type { User } from './User';
   </article>`,
   styleUrls: ['./page.css'],
 })
-export default class PageComponent {
+export class PageComponent {
   user: User | null = null;
 
   doLogout() {
diff --git a/code/frameworks/angular/template/cli/Page.stories.ts b/code/frameworks/angular/template/cli/page.stories.ts
similarity index 61%
rename from code/frameworks/angular/template/cli/Page.stories.ts
rename to code/frameworks/angular/template/cli/page.stories.ts
index 35e69e7775ba..5a64cdbc2ef9 100644
--- a/code/frameworks/angular/template/cli/Page.stories.ts
+++ b/code/frameworks/angular/template/cli/page.stories.ts
@@ -1,41 +1,24 @@
 import type { Meta, StoryObj } from '@storybook/angular';
-import { moduleMetadata } from '@storybook/angular';
-import { CommonModule } from '@angular/common';
 import { within, userEvent, expect } from '@storybook/test';
 
-import Button from './button.component';
-import Header from './header.component';
-import Page from './page.component';
+import { PageComponent } from './page.component';
 
-const meta: Meta<Page> = {
+const meta: Meta<PageComponent> = {
   title: 'Example/Page',
-  component: Page,
+  component: PageComponent,
   parameters: {
     // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
     layout: 'fullscreen',
   },
-  decorators: [
-    moduleMetadata({
-      declarations: [Button, Header],
-      imports: [CommonModule],
-    }),
-  ],
 };
 
 export default meta;
-type Story = StoryObj<Page>;
+type Story = StoryObj<PageComponent>;
 
-export const LoggedOut: Story = {
-  render: (args: Page) => ({
-    props: args,
-  }),
-};
+export const LoggedOut: Story = {};
 
 // More on interaction testing: https://storybook.js.org/docs/writing-tests/interaction-testing
 export const LoggedIn: Story = {
-  render: (args: Page) => ({
-    props: args,
-  }),
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     const loginButton = canvas.getByRole('button', { name: /Log in/i });
diff --git a/code/frameworks/angular/template/cli/user.ts b/code/frameworks/angular/template/cli/user.ts
new file mode 100644
index 000000000000..c66461927e2a
--- /dev/null
+++ b/code/frameworks/angular/template/cli/user.ts
@@ -0,0 +1,3 @@
+export interface User {
+  name: string;
+}