From 1f026b47c4b6b31920009221f711084eb941010a Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@chromatic.com>
Date: Wed, 14 Sep 2022 14:02:13 +1000
Subject: [PATCH 01/47] Created angular template to get started

---
 code/lib/cli/src/repro-templates.ts | 27 +++++++++++++++------------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/code/lib/cli/src/repro-templates.ts b/code/lib/cli/src/repro-templates.ts
index 66b9a5835a6..84aee1d0f71 100644
--- a/code/lib/cli/src/repro-templates.ts
+++ b/code/lib/cli/src/repro-templates.ts
@@ -94,21 +94,24 @@ const svelteViteTemplates = {
   // }
 };
 
+const angularCliTemplates = {
+  'angular-cli/default-ts': {
+    name: 'Angular CLI (latest)',
+    script:
+      'npx -p @angular/cli ng new angular-latest --directory . --routing=true --minimal=true --style=scss --skip-install=true --strict --skip-git',
+    cadence: ['ci', 'daily', 'weekly'],
+    expected: {
+      framework: '@storybook/angular',
+      renderer: '@storybook/angular',
+      builder: '@storybook/builder-webpack5',
+    },
+  },
+};
+
 export default {
   ...craTemplates,
   ...reactViteTemplates,
   ...vue3ViteTemplates,
   ...svelteViteTemplates,
-  // FIXME: missing documentation.json
-  // 'angular/latest': {
-  //   name: 'Angular (latest)',
-  //   script:
-  //     'npx -p @angular/cli ng new angular-latest --directory . --routing=true --minimal=true --style=scss --skip-install=true --strict',
-  //   cadence: ['ci', 'daily', 'weekly'],
-  //   expected: {
-  //     framework: '@storybook/angular',
-  //     renderer: '@storybook/angular',
-  //     builder: '@storybook/builder-webpack5',
-  //   },
-  // },
+  ...angularCliTemplates,
 } as const;

From 4c0676cce2689d2f8b89d71b3090bdbe7b3d38fa Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@chromatic.com>
Date: Wed, 14 Sep 2022 20:59:36 +1000
Subject: [PATCH 02/47] Exclude all rules from template-stories

---
 scripts/sandbox.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/scripts/sandbox.ts b/scripts/sandbox.ts
index cf260fd784c..767c38266ef 100644
--- a/scripts/sandbox.ts
+++ b/scripts/sandbox.ts
@@ -222,6 +222,7 @@ function addEsbuildLoaderToStories(mainConfig: ConfigFile) {
     module: {
       ...config.modules,
       rules: [
+        // Ensure esbuild-loader applies to all files in ./template-stories
         {
           test: [/\\/template-stories\\//],
           loader: '${loaderPath}',
@@ -230,7 +231,11 @@ function addEsbuildLoaderToStories(mainConfig: ConfigFile) {
             target: 'es2015',
           },
         },
-        ...config.module.rules,
+        // Ensure no other loaders from the framework apply
+        ...config.module.rules.map(rule => ({
+          ...rule,
+          exclude: [/\\/template-stories\\//].concat(rule.exclude || []),
+        })),
       ],
     },
   })`;

From 4f7a6fe8bc4a07883d4071577a97182bc904ab48 Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@chromatic.com>
Date: Thu, 15 Sep 2022 16:04:44 +1000
Subject: [PATCH 03/47] Fix stories that used the html component wrong

---
 code/addons/a11y/template/stories/parameters.stories.ts | 8 ++++----
 code/addons/a11y/template/stories/tests.stories.ts      | 6 +++---
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/code/addons/a11y/template/stories/parameters.stories.ts b/code/addons/a11y/template/stories/parameters.stories.ts
index 159a6f07fd2..5b692bf9f87 100644
--- a/code/addons/a11y/template/stories/parameters.stories.ts
+++ b/code/addons/a11y/template/stories/parameters.stories.ts
@@ -3,7 +3,7 @@ import globalThis from 'global';
 export default {
   component: globalThis.Components.Html,
   args: {
-    contents: '<button>Click Me!</button>',
+    content: '<button>Click Me!</button>',
   },
   parameters: {
     chromatic: { disable: true },
@@ -12,7 +12,7 @@ export default {
 
 export const Options = {
   args: {
-    contents:
+    content:
       '<button style="color: rgb(255, 255, 255); background-color: rgb(76, 175, 80);">Click me!</button>',
   },
   parameters: {
@@ -29,7 +29,7 @@ export const Options = {
 
 export const Config = {
   args: {
-    contents:
+    content:
       '<button style="color: rgb(255, 255, 255); background-color: rgb(76, 175, 80);">Click me!</button>',
   },
   parameters: {
@@ -45,7 +45,7 @@ export const Config = {
 
 export const Targetted = {
   args: {
-    contents: '<button class="custom-target">Click Me!</button>',
+    content: '<button class="custom-target">Click Me!</button>',
   },
   parameters: {
     a11y: {
diff --git a/code/addons/a11y/template/stories/tests.stories.ts b/code/addons/a11y/template/stories/tests.stories.ts
index 6c729ad66e0..03346296518 100644
--- a/code/addons/a11y/template/stories/tests.stories.ts
+++ b/code/addons/a11y/template/stories/tests.stories.ts
@@ -3,7 +3,7 @@ import globalThis from 'global';
 export default {
   component: globalThis.Components.Html,
   args: {
-    contents: '',
+    content: '',
   },
   parameters: {
     chromatic: { disable: true },
@@ -12,7 +12,7 @@ export default {
 
 export const Violations = {
   args: {
-    contents: `
+    content: `
       <div>
         <p>empty heading</p>
         <h1></h1>
@@ -39,7 +39,7 @@ export const Violations = {
 
 export const Passes = {
   args: {
-    contents: `
+    content: `
       <div>
         <p>heading</p>
         <h1>heading 1</h1>

From 297725c543ed64b6631f27d6929a1d07f4a8acf1 Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@chromatic.com>
Date: Thu, 15 Sep 2022 16:05:00 +1000
Subject: [PATCH 04/47] Implement components for angular

---
 .../template/components/form.component.ts     | 37 +++++++++++++++++++
 .../template/components/html.component.ts     | 24 ++++++++++++
 .../angular/template/components/index.js      |  5 ++-
 .../template/components/pre.component.ts      | 29 +++++++++++++++
 .../template/stories/decorators.stories.ts    | 22 +++++------
 5 files changed, 105 insertions(+), 12 deletions(-)
 create mode 100644 code/frameworks/angular/template/components/form.component.ts
 create mode 100644 code/frameworks/angular/template/components/html.component.ts
 create mode 100644 code/frameworks/angular/template/components/pre.component.ts

diff --git a/code/frameworks/angular/template/components/form.component.ts b/code/frameworks/angular/template/components/form.component.ts
new file mode 100644
index 00000000000..f59d52f6211
--- /dev/null
+++ b/code/frameworks/angular/template/components/form.component.ts
@@ -0,0 +1,37 @@
+import { Component, Output, EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'storybook-form',
+  template: `
+    <form id="interaction-test-form" (submit)="handleSubmit($event)">
+      <label>
+        Enter Value
+        <input type="text" data-testid="value" [value]="value" required />
+      </label>
+      <button type="submit">Submit</button>
+      <p *ngIf="complete">Completed!!</p>
+    </form>
+  `,
+})
+export default class FormComponent {
+  /**
+   * Optional success handler
+   */
+  @Output()
+  onSuccess = new EventEmitter<string>();
+
+  value = '';
+
+  complete = false;
+
+  handleSubmit(event) {
+    event.preventDefault();
+    this.onSuccess.emit(this.value);
+    setTimeout(() => {
+      this.complete = true;
+    }, 500);
+    setTimeout(() => {
+      this.complete = false;
+    }, 1500);
+  }
+}
diff --git a/code/frameworks/angular/template/components/html.component.ts b/code/frameworks/angular/template/components/html.component.ts
new file mode 100644
index 00000000000..207483d365e
--- /dev/null
+++ b/code/frameworks/angular/template/components/html.component.ts
@@ -0,0 +1,24 @@
+import { Component, Input } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+
+@Component({
+  selector: 'storybook-html',
+  template: `<div [innerHTML]="safeContent"></div>`,
+})
+export default class HtmlComponent {
+  /**
+   * The HTML to render
+   *
+   * @required
+   */
+  @Input()
+  content = '';
+
+  constructor(private sanitizer: DomSanitizer) {
+    this.sanitizer = sanitizer;
+  }
+
+  get safeContent() {
+    return this.sanitizer.bypassSecurityTrustHtml(this.content);
+  }
+}
diff --git a/code/frameworks/angular/template/components/index.js b/code/frameworks/angular/template/components/index.js
index 5ae9ef153d8..11d1c72443b 100644
--- a/code/frameworks/angular/template/components/index.js
+++ b/code/frameworks/angular/template/components/index.js
@@ -1,5 +1,8 @@
 import globalThis from 'global';
 
 import Button from './button.component';
+import Html from './html.component';
+import Pre from './pre.component';
+import Form from './form.component';
 
-globalThis.Components = { Button };
+globalThis.Components = { Button, Html, Pre, Form };
diff --git a/code/frameworks/angular/template/components/pre.component.ts b/code/frameworks/angular/template/components/pre.component.ts
new file mode 100644
index 00000000000..7f24e385881
--- /dev/null
+++ b/code/frameworks/angular/template/components/pre.component.ts
@@ -0,0 +1,29 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'storybook-pre',
+  template: `<pre data-testid="pre" [ngStyle]="style">{{ finalText }}</pre>`,
+})
+export default class PreComponent {
+  /**
+   * Styles to apply to the component
+   */
+  @Input()
+  style = {};
+
+  /**
+   * An object to render
+   */
+  @Input()
+  object: Object = null;
+
+  /**
+   * The code to render
+   */
+  @Input()
+  text = '';
+
+  get finalText() {
+    return this.object ? JSON.stringify(this.object, null, 2) : this.text;
+  }
+}
diff --git a/code/frameworks/angular/template/stories/decorators.stories.ts b/code/frameworks/angular/template/stories/decorators.stories.ts
index 1f4b61b9bec..14cd21b924a 100644
--- a/code/frameworks/angular/template/stories/decorators.stories.ts
+++ b/code/frameworks/angular/template/stories/decorators.stories.ts
@@ -1,6 +1,6 @@
 // your-component.stories.ts
 
-import { componentWrapperDecorator, Meta, moduleMetadata } from '@storybook/angular';
+import { Args, componentWrapperDecorator, Meta, moduleMetadata, Story } from '@storybook/angular';
 import ChildComponent from './child.component';
 import ParentComponent from './parent.component';
 
@@ -16,27 +16,27 @@ export default {
   argTypes: { onClickChild: { action: 'onClickChild' } },
 } as Meta;
 
-export const WithTemplate = (args) => ({
+export const WithTemplate = (args: Args) => ({
   template: `Child Template`,
   props: {
     ...args,
   },
 });
 
-export const WithComponent = (args) => ({
+export const WithComponent = (args: Args) => ({
   props: {
     ...args,
   },
 });
 
-export const WithLegacyComponent = (args) => ({
+export const WithLegacyComponent = (args: Args) => ({
   component: ChildComponent,
   props: {
     ...args,
   },
 });
 
-export const WithComponentWrapperDecorator = (args) => ({
+export const WithComponentWrapperDecorator = (args: Args) => ({
   component: ChildComponent,
   props: {
     ...args,
@@ -47,7 +47,7 @@ WithComponentWrapperDecorator.decorators = [
   componentWrapperDecorator(ParentComponent),
 ];
 
-export const WithComponentWrapperDecoratorAndProps = (args) => ({
+export const WithComponentWrapperDecoratorAndProps = (args: Args) => ({
   component: ChildComponent,
   props: {
     ...args,
@@ -63,7 +63,7 @@ WithComponentWrapperDecoratorAndProps.decorators = [
   }),
 ];
 
-export const WithComponentWrapperDecoratorAndArgs = (args) => ({
+export const WithComponentWrapperDecoratorAndArgs = (args: Args) => ({
   component: ChildComponent,
   props: {
     ...args,
@@ -81,7 +81,7 @@ WithComponentWrapperDecoratorAndArgs.decorators = [
   })),
 ];
 
-export const WithCustomDecorator = (args) => ({
+export const WithCustomDecorator = (args: Args) => ({
   template: `Child Template`,
   props: {
     ...args,
@@ -96,9 +96,9 @@ WithCustomDecorator.decorators = [
       template: `Custom Decorator <div style="margin: 3em">${story.template}</div>`,
     };
   },
-];
+] as Story['decorators'];
 
-export const AngularLegacyRendering = (args) => ({
+export const AngularLegacyRendering = (args: Args) => ({
   template: `Child Template`,
   props: {
     ...args,
@@ -114,4 +114,4 @@ AngularLegacyRendering.decorators = [
       template: `Custom Decorator <div style="margin: 3em">${story.template}</div>`,
     };
   },
-];
+] as Story['decorators'];

From a0e0a184b9bd2ff95ed1832066b15c5ebda871ad Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@chromatic.com>
Date: Thu, 15 Sep 2022 16:40:25 +1000
Subject: [PATCH 05/47] Increase parallelism

---
 .circleci/config.yml | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 4b7803af431..c0d16e74c37 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -477,7 +477,7 @@ jobs:
     executor:
       class: medium+
       name: sb_node_14_browsers
-    parallelism: 7
+    parallelism: 8
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
@@ -497,7 +497,7 @@ jobs:
     executor:
       class: medium+
       name: sb_node_14_browsers
-    parallelism: 7
+    parallelism: 8
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
@@ -513,7 +513,7 @@ jobs:
     executor:
       class: medium+
       name: sb_node_14_browsers
-    parallelism: 7
+    parallelism: 8
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
@@ -533,7 +533,7 @@ jobs:
     executor:
       class: medium+
       name: sb_node_14_browsers
-    parallelism: 7
+    parallelism: 8
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
@@ -549,7 +549,7 @@ jobs:
     executor:
       class: medium+
       name: sb_node_14_browsers
-    parallelism: 7
+    parallelism: 8
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
@@ -565,7 +565,7 @@ jobs:
     executor:
       class: medium+
       name: sb_playwright
-    parallelism: 7
+    parallelism: 8
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'

From 3b92e5372e4257d59f9d908c90eef9d2ad4277d4 Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@chromatic.com>
Date: Thu, 15 Sep 2022 17:01:50 +1000
Subject: [PATCH 06/47] Deepscan

---
 .../frameworks/angular/template/components/html.component.ts | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/code/frameworks/angular/template/components/html.component.ts b/code/frameworks/angular/template/components/html.component.ts
index 207483d365e..5735a8dff17 100644
--- a/code/frameworks/angular/template/components/html.component.ts
+++ b/code/frameworks/angular/template/components/html.component.ts
@@ -14,9 +14,8 @@ export default class HtmlComponent {
   @Input()
   content = '';
 
-  constructor(private sanitizer: DomSanitizer) {
-    this.sanitizer = sanitizer;
-  }
+  // eslint-disable-next-line no-useless-constructor
+  constructor(private sanitizer: DomSanitizer) {}
 
   get safeContent() {
     return this.sanitizer.bypassSecurityTrustHtml(this.content);

From 90575bae0a48b0fab92a51b53ae1a6401606d8cc Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@chromatic.com>
Date: Fri, 16 Sep 2022 11:22:48 +1000
Subject: [PATCH 07/47] Fix type problems in angular components

---
 code/frameworks/angular/template/components/form.component.ts | 2 +-
 code/frameworks/angular/template/components/pre.component.ts  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/code/frameworks/angular/template/components/form.component.ts b/code/frameworks/angular/template/components/form.component.ts
index f59d52f6211..2bc4c00298e 100644
--- a/code/frameworks/angular/template/components/form.component.ts
+++ b/code/frameworks/angular/template/components/form.component.ts
@@ -24,7 +24,7 @@ export default class FormComponent {
 
   complete = false;
 
-  handleSubmit(event) {
+  handleSubmit(event: SubmitEvent) {
     event.preventDefault();
     this.onSuccess.emit(this.value);
     setTimeout(() => {
diff --git a/code/frameworks/angular/template/components/pre.component.ts b/code/frameworks/angular/template/components/pre.component.ts
index 7f24e385881..7e3ce42abcf 100644
--- a/code/frameworks/angular/template/components/pre.component.ts
+++ b/code/frameworks/angular/template/components/pre.component.ts
@@ -15,7 +15,7 @@ export default class PreComponent {
    * An object to render
    */
   @Input()
-  object: Object = null;
+  object?: Object;
 
   /**
    * The code to render

From a937b03e09114af63aa387cbc1c124fca6e5a857 Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@chromatic.com>
Date: Fri, 16 Sep 2022 14:24:27 +1000
Subject: [PATCH 08/47] Don't overwrite existing SB scripts in sandbox

---
 scripts/sandbox.ts | 20 +++++---------------
 1 file changed, 5 insertions(+), 15 deletions(-)

diff --git a/scripts/sandbox.ts b/scripts/sandbox.ts
index 767c38266ef..841c71f098c 100644
--- a/scripts/sandbox.ts
+++ b/scripts/sandbox.ts
@@ -180,19 +180,14 @@ async function findFirstPath(paths: string[], { cwd }: { cwd: string }) {
   return null;
 }
 
-async function addPackageScripts({
-  cwd,
-  scripts,
-}: {
-  cwd: string;
-  scripts: Record<string, string>;
-}) {
+async function updatePackageScripts({ cwd, prefix }: { cwd: string; prefix: string }) {
   logger.info(`🔢 Adding package scripts:`);
   const packageJsonPath = path.join(cwd, 'package.json');
   const packageJson = await readJSON(packageJsonPath);
   packageJson.scripts = {
     ...packageJson.scripts,
-    ...scripts,
+    storybook: packageJson.scripts.storybook.replace(/(npx )?sb/, `${prefix} $&`),
+    'build-storybook': packageJson.scripts['build-storybook'].replace(/(npx )?sb/, `${prefix} $&`),
   };
   await writeJSON(packageJsonPath, packageJson, { spaces: 2 });
 }
@@ -507,14 +502,9 @@ export async function sandbox(optionValues: OptionValues<typeof options>) {
     // Some addon stories require extra dependencies
     addExtraDependencies({ cwd, dryRun, debug });
 
-    await addPackageScripts({
+    await updatePackageScripts({
       cwd,
-      scripts: {
-        storybook:
-          'NODE_OPTIONS="--preserve-symlinks --preserve-symlinks-main" storybook dev -p 6006',
-        'build-storybook':
-          'NODE_OPTIONS="--preserve-symlinks --preserve-symlinks-main" storybook build',
-      },
+      prefix: 'NODE_OPTIONS="--preserve-symlinks --preserve-symlinks-main"',
     });
   }
 

From f868d66f038f606cb6605ee5345633cedc3f1282 Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@chromatic.com>
Date: Fri, 16 Sep 2022 14:26:03 +1000
Subject: [PATCH 09/47] Fix previous

---
 scripts/sandbox.ts | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/scripts/sandbox.ts b/scripts/sandbox.ts
index 841c71f098c..a191439a861 100644
--- a/scripts/sandbox.ts
+++ b/scripts/sandbox.ts
@@ -186,8 +186,11 @@ async function updatePackageScripts({ cwd, prefix }: { cwd: string; prefix: stri
   const packageJson = await readJSON(packageJsonPath);
   packageJson.scripts = {
     ...packageJson.scripts,
-    storybook: packageJson.scripts.storybook.replace(/(npx )?sb/, `${prefix} $&`),
-    'build-storybook': packageJson.scripts['build-storybook'].replace(/(npx )?sb/, `${prefix} $&`),
+    storybook: packageJson.scripts.storybook.replace(/(npx )?storybook/, `${prefix} $&`),
+    'build-storybook': packageJson.scripts['build-storybook'].replace(
+      /(npx )?storybook/,
+      `${prefix} $&`
+    ),
   };
   await writeJSON(packageJsonPath, packageJson, { spaces: 2 });
 }

From d9d6b4aed1d6abfed81c272e844aa8f90a180399 Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@chromatic.com>
Date: Fri, 16 Sep 2022 14:29:25 +1000
Subject: [PATCH 10/47] Fix script

---
 scripts/sandbox.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/scripts/sandbox.ts b/scripts/sandbox.ts
index a191439a861..adf92015f9e 100644
--- a/scripts/sandbox.ts
+++ b/scripts/sandbox.ts
@@ -186,10 +186,10 @@ async function updatePackageScripts({ cwd, prefix }: { cwd: string; prefix: stri
   const packageJson = await readJSON(packageJsonPath);
   packageJson.scripts = {
     ...packageJson.scripts,
-    storybook: packageJson.scripts.storybook.replace(/(npx )?storybook/, `${prefix} $&`),
+    storybook: packageJson.scripts.storybook.replace(/(npx )?storybook/, `${prefix} storybook`),
     'build-storybook': packageJson.scripts['build-storybook'].replace(
       /(npx )?storybook/,
-      `${prefix} $&`
+      `${prefix} storybook`
     ),
   };
   await writeJSON(packageJsonPath, packageJson, { spaces: 2 });

From a2d74f964db1b037442ca67fbb33b990f29c94ad Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@chromatic.com>
Date: Fri, 16 Sep 2022 15:24:30 +1000
Subject: [PATCH 11/47] Move over a bunch of angular-cli stories

---
 .../parameters/layout.parameters.stories.ts   |  31 -----
 .../ngrx-store.stories.storyshot              |  21 ----
 .../stories/others/ngrx/ngrx-store.stories.ts |  50 --------
 .../stories/basics/README.stories.mdx         |   0
 .../custom-cva-component.stories.storyshot    |   0
 .../custom-cva-component.stories.ts           |   0
 .../custom-cva.component.ts                   |   0
 ...tiple-selector.component.stories.storyshot |   0
 .../attribute-selector.component.ts           |   0
 .../class-selector.component.ts               |   0
 .../multiple-selector.component.stories.ts    |   0
 .../multiple-selector.component.ts            |   0
 .../enums.component.stories.storyshot         |   0
 .../component-with-enums/enums.component.html |   0
 .../enums.component.stories.ts                |   0
 .../component-with-enums/enums.component.ts   |   0
 .../inheritance.stories.storyshot             |   0
 .../base-button.component.ts                  |   0
 .../icon-button.component.ts                  |   0
 .../inheritance.stories.ts                    |   0
 .../ng-content-about-parent.stories.storyshot |   0
 .../ng-content-simple.stories.storyshot       |   0
 .../ng-content-about-parent.stories.ts        |   0
 .../ng-content-simple.stories.ts              |   0
 .../component-with-on-destroy.stories.ts      |   0
 .../__snapshots__/on-push.stories.storyshot   |   0
 .../on-push-box.component.ts                  |   0
 .../component-with-on-push/on-push.stories.ts |   0
 .../custom-pipes.stories.storyshot            |   0
 .../custom-pipes.stories.ts                   |   0
 .../basics/component-with-pipe/custom.pipe.ts |   0
 .../with-pipe.component.ts                    |   0
 .../di.component.stories.storyshot            |   0
 .../component-with-provider/di.component.html |   0
 .../di.component.stories.ts                   |   0
 .../component-with-provider/di.component.ts   |   0
 .../styled.component.stories.storyshot        |   0
 .../component-with-style/styled.component.css |   0
 .../styled.component.html                     |   0
 .../styled.component.scss                     |   0
 .../styled.component.stories.ts               |   0
 .../component-with-style/styled.component.ts  |   0
 ...ctor-ng-component-outlet.stories.storyshot |   0
 ...ctor-ng-factory-resolver.stories.storyshot |   0
 .../without-selector.stories.storyshot        |   0
 ...ut-selector-ng-component-outlet.stories.ts |   0
 ...ut-selector-ng-factory-resolver.stories.ts |   0
 .../without-selector.component.ts             |   0
 .../without-selector.stories.ts               |   0
 .../import-module-for-root.stories.storyshot  |   0
 .../import-module.stories.storyshot           |   0
 .../ng-module/angular-src/chip-color.token.ts |   0
 .../ng-module/angular-src/chip-text.pipe.ts   |   0
 .../ng-module/angular-src/chip.component.ts   |   0
 .../angular-src/chips-group.component.ts      |   0
 .../ng-module/angular-src/chips.module.ts     |   0
 .../import-module-for-root.stories.ts         |   0
 .../basics/ng-module/import-module.stories.ts |   0
 .../template/stories/button.component.ts      |  26 ++++
 .../template/stories/child.component.ts       |  20 ---
 .../template}/stories/core/README.stories.mdx |   0
 .../decorators.stories.storyshot              |   0
 .../child.component.ts                        |   0
 .../decorators.stories.ts                     |   0
 .../parent.component.ts                       |   0
 .../decorators.stories.storyshot              |   0
 .../theme-decorator/decorators.stories.ts     |   0
 .../in-export-default.stories.storyshot       |   0
 .../in-stories.stories.storyshot              |   0
 .../merge-default-and-story.stories.storyshot |   0
 .../moduleMetadata/angular-src/custom.pipe.ts |   0
 .../angular-src/dummy.service.ts              |   0
 .../angular-src/service.component.ts          |   0
 .../angular-src/token.component.ts            |   0
 .../in-export-default.stories.ts              |   0
 .../core/moduleMetadata/in-stories.stories.ts |   0
 .../merge-default-and-story.stories.ts        |   0
 .../all-parameters.stories.storyshot          |   0
 .../bootstrap-options.stories.storyshot       |   0
 .../layout.parameters.stories.storyshot       |   0
 .../parameters/bootstrap-options.stories.ts   |   0
 .../story-styles.stories.storyshot            |   0
 .../core/styles/story-styles.stories.ts       |   2 +-
 .../template/stories/decorators.stories.ts    | 117 ------------------
 .../stories/legacy/README.stories.mdx         |   0
 .../component-in-story.stories.storyshot      |   0
 .../legacy/component-in-story.stories.ts      |   2 +-
 .../issues/12009-unknown-component.stories.ts |   2 +-
 .../12009-unknown-component.stories.storyshot |   0
 .../others/ngx-translate/README.stories.mdx   |   0
 .../template/stories/parent.component.ts      |  18 ---
 91 files changed, 29 insertions(+), 260 deletions(-)
 delete mode 100644 code/examples/angular-cli/src/stories/core/parameters/layout.parameters.stories.ts
 delete mode 100644 code/examples/angular-cli/src/stories/others/ngrx/__snapshots__/ngrx-store.stories.storyshot
 delete mode 100644 code/examples/angular-cli/src/stories/others/ngrx/ngrx-store.stories.ts
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/README.stories.mdx (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/angular-forms/customControlValueAccessor/__snapshots__/custom-cva-component.stories.storyshot (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/angular-forms/customControlValueAccessor/custom-cva-component.stories.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/angular-forms/customControlValueAccessor/custom-cva.component.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-with-complex-selectors/__snapshots__/multiple-selector.component.stories.storyshot (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-with-complex-selectors/attribute-selector.component.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-with-complex-selectors/class-selector.component.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-with-complex-selectors/multiple-selector.component.stories.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-with-complex-selectors/multiple-selector.component.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-with-enums/__snapshots__/enums.component.stories.storyshot (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-with-enums/enums.component.html (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-with-enums/enums.component.stories.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-with-enums/enums.component.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-with-inheritance/__snapshots__/inheritance.stories.storyshot (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-with-inheritance/base-button.component.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-with-inheritance/icon-button.component.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-with-inheritance/inheritance.stories.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-with-ng-content/__snapshots__/ng-content-about-parent.stories.storyshot (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-with-ng-content/__snapshots__/ng-content-simple.stories.storyshot (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-with-ng-content/ng-content-about-parent.stories.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-with-ng-content/ng-content-simple.stories.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-with-ng-on-destroy/component-with-on-destroy.stories.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-with-on-push/__snapshots__/on-push.stories.storyshot (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-with-on-push/on-push-box.component.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-with-on-push/on-push.stories.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-with-pipe/__snapshots__/custom-pipes.stories.storyshot (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-with-pipe/custom-pipes.stories.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-with-pipe/custom.pipe.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-with-pipe/with-pipe.component.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-with-provider/__snapshots__/di.component.stories.storyshot (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-with-provider/di.component.html (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-with-provider/di.component.stories.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-with-provider/di.component.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-with-style/__snapshots__/styled.component.stories.storyshot (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-with-style/styled.component.css (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-with-style/styled.component.html (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-with-style/styled.component.scss (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-with-style/styled.component.stories.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-with-style/styled.component.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-without-selector/__snapshots__/without-selector-ng-component-outlet.stories.storyshot (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-without-selector/__snapshots__/without-selector-ng-factory-resolver.stories.storyshot (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-without-selector/__snapshots__/without-selector.stories.storyshot (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-without-selector/without-selector-ng-component-outlet.stories.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-without-selector/without-selector-ng-factory-resolver.stories.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-without-selector/without-selector.component.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/component-without-selector/without-selector.stories.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/ng-module/__snapshots__/import-module-for-root.stories.storyshot (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/ng-module/__snapshots__/import-module.stories.storyshot (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/ng-module/angular-src/chip-color.token.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/ng-module/angular-src/chip-text.pipe.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/ng-module/angular-src/chip.component.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/ng-module/angular-src/chips-group.component.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/ng-module/angular-src/chips.module.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/ng-module/import-module-for-root.stories.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/basics/ng-module/import-module.stories.ts (100%)
 create mode 100644 code/frameworks/angular/template/stories/button.component.ts
 delete mode 100644 code/frameworks/angular/template/stories/child.component.ts
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/core/README.stories.mdx (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/core/decorators/componentWrapperDecorator/__snapshots__/decorators.stories.storyshot (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/core/decorators/componentWrapperDecorator/child.component.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/core/decorators/componentWrapperDecorator/decorators.stories.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/core/decorators/componentWrapperDecorator/parent.component.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/core/decorators/theme-decorator/__snapshots__/decorators.stories.storyshot (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/core/decorators/theme-decorator/decorators.stories.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/core/moduleMetadata/__snapshots__/in-export-default.stories.storyshot (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/core/moduleMetadata/__snapshots__/in-stories.stories.storyshot (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/core/moduleMetadata/__snapshots__/merge-default-and-story.stories.storyshot (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/core/moduleMetadata/angular-src/custom.pipe.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/core/moduleMetadata/angular-src/dummy.service.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/core/moduleMetadata/angular-src/service.component.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/core/moduleMetadata/angular-src/token.component.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/core/moduleMetadata/in-export-default.stories.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/core/moduleMetadata/in-stories.stories.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/core/moduleMetadata/merge-default-and-story.stories.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/core/parameters/__snapshots__/all-parameters.stories.storyshot (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/core/parameters/__snapshots__/bootstrap-options.stories.storyshot (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/core/parameters/__snapshots__/layout.parameters.stories.storyshot (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/core/parameters/bootstrap-options.stories.ts (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/core/styles/__snapshots__/story-styles.stories.storyshot (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/core/styles/story-styles.stories.ts (96%)
 delete mode 100644 code/frameworks/angular/template/stories/decorators.stories.ts
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/legacy/README.stories.mdx (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/legacy/__snapshots__/component-in-story.stories.storyshot (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/legacy/component-in-story.stories.ts (85%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/others/issues/12009-unknown-component.stories.ts (87%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/others/issues/__snapshots__/12009-unknown-component.stories.storyshot (100%)
 rename code/{examples/angular-cli/src => frameworks/angular/template}/stories/others/ngx-translate/README.stories.mdx (100%)
 delete mode 100644 code/frameworks/angular/template/stories/parent.component.ts

diff --git a/code/examples/angular-cli/src/stories/core/parameters/layout.parameters.stories.ts b/code/examples/angular-cli/src/stories/core/parameters/layout.parameters.stories.ts
deleted file mode 100644
index 4bdc282a816..00000000000
--- a/code/examples/angular-cli/src/stories/core/parameters/layout.parameters.stories.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import type { Meta, StoryFn } from '@storybook/angular';
-import { Button } from '../../angular-demo';
-
-export default {
-  title: 'Core / Parameters / Layout',
-  component: Button,
-} as Meta;
-
-export const Default: StoryFn = () => ({
-  props: { text: 'Button' },
-});
-
-export const Fullscreen: StoryFn = () => ({
-  template: `<div style="background-color: yellow;"><storybook-button-component text="Button"></storybook-button-component></div>`,
-});
-Fullscreen.parameters = { layout: 'fullscreen' };
-
-export const Centered: StoryFn = () => ({
-  props: { text: 'Button' },
-});
-Centered.parameters = { layout: 'centered' };
-
-export const Padded: StoryFn = () => ({
-  props: { text: 'Button' },
-});
-Padded.parameters = { layout: 'padded' };
-
-export const None: StoryFn = () => ({
-  props: { text: 'Button' },
-});
-None.parameters = { layout: 'none' };
diff --git a/code/examples/angular-cli/src/stories/others/ngrx/__snapshots__/ngrx-store.stories.storyshot b/code/examples/angular-cli/src/stories/others/ngrx/__snapshots__/ngrx-store.stories.storyshot
deleted file mode 100644
index 2d1d3d8fbca..00000000000
--- a/code/examples/angular-cli/src/stories/others/ngrx/__snapshots__/ngrx-store.stories.storyshot
+++ /dev/null
@@ -1,21 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Others / NgRx / Store With Component 1`] = `
-<storybook-wrapper>
-  <storybook-comp-with-store>
-    <div>
-      Store is injected
-    </div>
-  </storybook-comp-with-store>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Others / NgRx / Store With Template 1`] = `
-<storybook-wrapper>
-  <storybook-comp-with-store>
-    <div>
-      Store is injected
-    </div>
-  </storybook-comp-with-store>
-</storybook-wrapper>
-`;
diff --git a/code/examples/angular-cli/src/stories/others/ngrx/ngrx-store.stories.ts b/code/examples/angular-cli/src/stories/others/ngrx/ngrx-store.stories.ts
deleted file mode 100644
index ba24cf01b11..00000000000
--- a/code/examples/angular-cli/src/stories/others/ngrx/ngrx-store.stories.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import { Store, StoreModule } from '@ngrx/store';
-import { Component } from '@angular/core';
-
-import { Meta, moduleMetadata, StoryFn } from '@storybook/angular';
-
-@Component({
-  selector: 'storybook-comp-with-store',
-  template: '<div>{{this.getStoreState()}}</div>',
-})
-class WithStoreComponent {
-  private store: Store<any>;
-
-  constructor(store: Store<any>) {
-    this.store = store;
-  }
-
-  getStoreState() {
-    return this.store === undefined ? 'Store is NOT injected' : 'Store is injected';
-  }
-}
-
-export default {
-  title: 'Others / NgRx / Store',
-  decorators: [
-    moduleMetadata({
-      imports: [
-        StoreModule.forRoot(
-          {},
-          {
-            runtimeChecks: {
-              strictStateImmutability: true,
-              strictActionImmutability: true,
-              strictStateSerializability: true,
-              strictActionSerializability: true,
-            },
-          }
-        ),
-      ],
-      declarations: [WithStoreComponent],
-    }),
-  ],
-} as Meta;
-
-export const WithComponent: StoryFn = () => ({
-  component: WithStoreComponent,
-});
-
-export const WithTemplate: StoryFn = () => ({
-  template: `<storybook-comp-with-store></storybook-comp-with-store>`,
-});
diff --git a/code/examples/angular-cli/src/stories/basics/README.stories.mdx b/code/frameworks/angular/template/stories/basics/README.stories.mdx
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/README.stories.mdx
rename to code/frameworks/angular/template/stories/basics/README.stories.mdx
diff --git a/code/examples/angular-cli/src/stories/basics/angular-forms/customControlValueAccessor/__snapshots__/custom-cva-component.stories.storyshot b/code/frameworks/angular/template/stories/basics/angular-forms/customControlValueAccessor/__snapshots__/custom-cva-component.stories.storyshot
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/angular-forms/customControlValueAccessor/__snapshots__/custom-cva-component.stories.storyshot
rename to code/frameworks/angular/template/stories/basics/angular-forms/customControlValueAccessor/__snapshots__/custom-cva-component.stories.storyshot
diff --git a/code/examples/angular-cli/src/stories/basics/angular-forms/customControlValueAccessor/custom-cva-component.stories.ts b/code/frameworks/angular/template/stories/basics/angular-forms/customControlValueAccessor/custom-cva-component.stories.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/angular-forms/customControlValueAccessor/custom-cva-component.stories.ts
rename to code/frameworks/angular/template/stories/basics/angular-forms/customControlValueAccessor/custom-cva-component.stories.ts
diff --git a/code/examples/angular-cli/src/stories/basics/angular-forms/customControlValueAccessor/custom-cva.component.ts b/code/frameworks/angular/template/stories/basics/angular-forms/customControlValueAccessor/custom-cva.component.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/angular-forms/customControlValueAccessor/custom-cva.component.ts
rename to code/frameworks/angular/template/stories/basics/angular-forms/customControlValueAccessor/custom-cva.component.ts
diff --git a/code/examples/angular-cli/src/stories/basics/component-with-complex-selectors/__snapshots__/multiple-selector.component.stories.storyshot b/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/__snapshots__/multiple-selector.component.stories.storyshot
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-with-complex-selectors/__snapshots__/multiple-selector.component.stories.storyshot
rename to code/frameworks/angular/template/stories/basics/component-with-complex-selectors/__snapshots__/multiple-selector.component.stories.storyshot
diff --git a/code/examples/angular-cli/src/stories/basics/component-with-complex-selectors/attribute-selector.component.ts b/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/attribute-selector.component.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-with-complex-selectors/attribute-selector.component.ts
rename to code/frameworks/angular/template/stories/basics/component-with-complex-selectors/attribute-selector.component.ts
diff --git a/code/examples/angular-cli/src/stories/basics/component-with-complex-selectors/class-selector.component.ts b/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/class-selector.component.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-with-complex-selectors/class-selector.component.ts
rename to code/frameworks/angular/template/stories/basics/component-with-complex-selectors/class-selector.component.ts
diff --git a/code/examples/angular-cli/src/stories/basics/component-with-complex-selectors/multiple-selector.component.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/multiple-selector.component.stories.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-with-complex-selectors/multiple-selector.component.stories.ts
rename to code/frameworks/angular/template/stories/basics/component-with-complex-selectors/multiple-selector.component.stories.ts
diff --git a/code/examples/angular-cli/src/stories/basics/component-with-complex-selectors/multiple-selector.component.ts b/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/multiple-selector.component.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-with-complex-selectors/multiple-selector.component.ts
rename to code/frameworks/angular/template/stories/basics/component-with-complex-selectors/multiple-selector.component.ts
diff --git a/code/examples/angular-cli/src/stories/basics/component-with-enums/__snapshots__/enums.component.stories.storyshot b/code/frameworks/angular/template/stories/basics/component-with-enums/__snapshots__/enums.component.stories.storyshot
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-with-enums/__snapshots__/enums.component.stories.storyshot
rename to code/frameworks/angular/template/stories/basics/component-with-enums/__snapshots__/enums.component.stories.storyshot
diff --git a/code/examples/angular-cli/src/stories/basics/component-with-enums/enums.component.html b/code/frameworks/angular/template/stories/basics/component-with-enums/enums.component.html
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-with-enums/enums.component.html
rename to code/frameworks/angular/template/stories/basics/component-with-enums/enums.component.html
diff --git a/code/examples/angular-cli/src/stories/basics/component-with-enums/enums.component.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-enums/enums.component.stories.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-with-enums/enums.component.stories.ts
rename to code/frameworks/angular/template/stories/basics/component-with-enums/enums.component.stories.ts
diff --git a/code/examples/angular-cli/src/stories/basics/component-with-enums/enums.component.ts b/code/frameworks/angular/template/stories/basics/component-with-enums/enums.component.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-with-enums/enums.component.ts
rename to code/frameworks/angular/template/stories/basics/component-with-enums/enums.component.ts
diff --git a/code/examples/angular-cli/src/stories/basics/component-with-inheritance/__snapshots__/inheritance.stories.storyshot b/code/frameworks/angular/template/stories/basics/component-with-inheritance/__snapshots__/inheritance.stories.storyshot
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-with-inheritance/__snapshots__/inheritance.stories.storyshot
rename to code/frameworks/angular/template/stories/basics/component-with-inheritance/__snapshots__/inheritance.stories.storyshot
diff --git a/code/examples/angular-cli/src/stories/basics/component-with-inheritance/base-button.component.ts b/code/frameworks/angular/template/stories/basics/component-with-inheritance/base-button.component.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-with-inheritance/base-button.component.ts
rename to code/frameworks/angular/template/stories/basics/component-with-inheritance/base-button.component.ts
diff --git a/code/examples/angular-cli/src/stories/basics/component-with-inheritance/icon-button.component.ts b/code/frameworks/angular/template/stories/basics/component-with-inheritance/icon-button.component.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-with-inheritance/icon-button.component.ts
rename to code/frameworks/angular/template/stories/basics/component-with-inheritance/icon-button.component.ts
diff --git a/code/examples/angular-cli/src/stories/basics/component-with-inheritance/inheritance.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-inheritance/inheritance.stories.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-with-inheritance/inheritance.stories.ts
rename to code/frameworks/angular/template/stories/basics/component-with-inheritance/inheritance.stories.ts
diff --git a/code/examples/angular-cli/src/stories/basics/component-with-ng-content/__snapshots__/ng-content-about-parent.stories.storyshot b/code/frameworks/angular/template/stories/basics/component-with-ng-content/__snapshots__/ng-content-about-parent.stories.storyshot
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-with-ng-content/__snapshots__/ng-content-about-parent.stories.storyshot
rename to code/frameworks/angular/template/stories/basics/component-with-ng-content/__snapshots__/ng-content-about-parent.stories.storyshot
diff --git a/code/examples/angular-cli/src/stories/basics/component-with-ng-content/__snapshots__/ng-content-simple.stories.storyshot b/code/frameworks/angular/template/stories/basics/component-with-ng-content/__snapshots__/ng-content-simple.stories.storyshot
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-with-ng-content/__snapshots__/ng-content-simple.stories.storyshot
rename to code/frameworks/angular/template/stories/basics/component-with-ng-content/__snapshots__/ng-content-simple.stories.storyshot
diff --git a/code/examples/angular-cli/src/stories/basics/component-with-ng-content/ng-content-about-parent.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-about-parent.stories.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-with-ng-content/ng-content-about-parent.stories.ts
rename to code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-about-parent.stories.ts
diff --git a/code/examples/angular-cli/src/stories/basics/component-with-ng-content/ng-content-simple.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-simple.stories.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-with-ng-content/ng-content-simple.stories.ts
rename to code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-simple.stories.ts
diff --git a/code/examples/angular-cli/src/stories/basics/component-with-ng-on-destroy/component-with-on-destroy.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-ng-on-destroy/component-with-on-destroy.stories.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-with-ng-on-destroy/component-with-on-destroy.stories.ts
rename to code/frameworks/angular/template/stories/basics/component-with-ng-on-destroy/component-with-on-destroy.stories.ts
diff --git a/code/examples/angular-cli/src/stories/basics/component-with-on-push/__snapshots__/on-push.stories.storyshot b/code/frameworks/angular/template/stories/basics/component-with-on-push/__snapshots__/on-push.stories.storyshot
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-with-on-push/__snapshots__/on-push.stories.storyshot
rename to code/frameworks/angular/template/stories/basics/component-with-on-push/__snapshots__/on-push.stories.storyshot
diff --git a/code/examples/angular-cli/src/stories/basics/component-with-on-push/on-push-box.component.ts b/code/frameworks/angular/template/stories/basics/component-with-on-push/on-push-box.component.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-with-on-push/on-push-box.component.ts
rename to code/frameworks/angular/template/stories/basics/component-with-on-push/on-push-box.component.ts
diff --git a/code/examples/angular-cli/src/stories/basics/component-with-on-push/on-push.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-on-push/on-push.stories.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-with-on-push/on-push.stories.ts
rename to code/frameworks/angular/template/stories/basics/component-with-on-push/on-push.stories.ts
diff --git a/code/examples/angular-cli/src/stories/basics/component-with-pipe/__snapshots__/custom-pipes.stories.storyshot b/code/frameworks/angular/template/stories/basics/component-with-pipe/__snapshots__/custom-pipes.stories.storyshot
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-with-pipe/__snapshots__/custom-pipes.stories.storyshot
rename to code/frameworks/angular/template/stories/basics/component-with-pipe/__snapshots__/custom-pipes.stories.storyshot
diff --git a/code/examples/angular-cli/src/stories/basics/component-with-pipe/custom-pipes.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-pipe/custom-pipes.stories.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-with-pipe/custom-pipes.stories.ts
rename to code/frameworks/angular/template/stories/basics/component-with-pipe/custom-pipes.stories.ts
diff --git a/code/examples/angular-cli/src/stories/basics/component-with-pipe/custom.pipe.ts b/code/frameworks/angular/template/stories/basics/component-with-pipe/custom.pipe.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-with-pipe/custom.pipe.ts
rename to code/frameworks/angular/template/stories/basics/component-with-pipe/custom.pipe.ts
diff --git a/code/examples/angular-cli/src/stories/basics/component-with-pipe/with-pipe.component.ts b/code/frameworks/angular/template/stories/basics/component-with-pipe/with-pipe.component.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-with-pipe/with-pipe.component.ts
rename to code/frameworks/angular/template/stories/basics/component-with-pipe/with-pipe.component.ts
diff --git a/code/examples/angular-cli/src/stories/basics/component-with-provider/__snapshots__/di.component.stories.storyshot b/code/frameworks/angular/template/stories/basics/component-with-provider/__snapshots__/di.component.stories.storyshot
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-with-provider/__snapshots__/di.component.stories.storyshot
rename to code/frameworks/angular/template/stories/basics/component-with-provider/__snapshots__/di.component.stories.storyshot
diff --git a/code/examples/angular-cli/src/stories/basics/component-with-provider/di.component.html b/code/frameworks/angular/template/stories/basics/component-with-provider/di.component.html
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-with-provider/di.component.html
rename to code/frameworks/angular/template/stories/basics/component-with-provider/di.component.html
diff --git a/code/examples/angular-cli/src/stories/basics/component-with-provider/di.component.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-provider/di.component.stories.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-with-provider/di.component.stories.ts
rename to code/frameworks/angular/template/stories/basics/component-with-provider/di.component.stories.ts
diff --git a/code/examples/angular-cli/src/stories/basics/component-with-provider/di.component.ts b/code/frameworks/angular/template/stories/basics/component-with-provider/di.component.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-with-provider/di.component.ts
rename to code/frameworks/angular/template/stories/basics/component-with-provider/di.component.ts
diff --git a/code/examples/angular-cli/src/stories/basics/component-with-style/__snapshots__/styled.component.stories.storyshot b/code/frameworks/angular/template/stories/basics/component-with-style/__snapshots__/styled.component.stories.storyshot
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-with-style/__snapshots__/styled.component.stories.storyshot
rename to code/frameworks/angular/template/stories/basics/component-with-style/__snapshots__/styled.component.stories.storyshot
diff --git a/code/examples/angular-cli/src/stories/basics/component-with-style/styled.component.css b/code/frameworks/angular/template/stories/basics/component-with-style/styled.component.css
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-with-style/styled.component.css
rename to code/frameworks/angular/template/stories/basics/component-with-style/styled.component.css
diff --git a/code/examples/angular-cli/src/stories/basics/component-with-style/styled.component.html b/code/frameworks/angular/template/stories/basics/component-with-style/styled.component.html
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-with-style/styled.component.html
rename to code/frameworks/angular/template/stories/basics/component-with-style/styled.component.html
diff --git a/code/examples/angular-cli/src/stories/basics/component-with-style/styled.component.scss b/code/frameworks/angular/template/stories/basics/component-with-style/styled.component.scss
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-with-style/styled.component.scss
rename to code/frameworks/angular/template/stories/basics/component-with-style/styled.component.scss
diff --git a/code/examples/angular-cli/src/stories/basics/component-with-style/styled.component.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-style/styled.component.stories.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-with-style/styled.component.stories.ts
rename to code/frameworks/angular/template/stories/basics/component-with-style/styled.component.stories.ts
diff --git a/code/examples/angular-cli/src/stories/basics/component-with-style/styled.component.ts b/code/frameworks/angular/template/stories/basics/component-with-style/styled.component.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-with-style/styled.component.ts
rename to code/frameworks/angular/template/stories/basics/component-with-style/styled.component.ts
diff --git a/code/examples/angular-cli/src/stories/basics/component-without-selector/__snapshots__/without-selector-ng-component-outlet.stories.storyshot b/code/frameworks/angular/template/stories/basics/component-without-selector/__snapshots__/without-selector-ng-component-outlet.stories.storyshot
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-without-selector/__snapshots__/without-selector-ng-component-outlet.stories.storyshot
rename to code/frameworks/angular/template/stories/basics/component-without-selector/__snapshots__/without-selector-ng-component-outlet.stories.storyshot
diff --git a/code/examples/angular-cli/src/stories/basics/component-without-selector/__snapshots__/without-selector-ng-factory-resolver.stories.storyshot b/code/frameworks/angular/template/stories/basics/component-without-selector/__snapshots__/without-selector-ng-factory-resolver.stories.storyshot
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-without-selector/__snapshots__/without-selector-ng-factory-resolver.stories.storyshot
rename to code/frameworks/angular/template/stories/basics/component-without-selector/__snapshots__/without-selector-ng-factory-resolver.stories.storyshot
diff --git a/code/examples/angular-cli/src/stories/basics/component-without-selector/__snapshots__/without-selector.stories.storyshot b/code/frameworks/angular/template/stories/basics/component-without-selector/__snapshots__/without-selector.stories.storyshot
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-without-selector/__snapshots__/without-selector.stories.storyshot
rename to code/frameworks/angular/template/stories/basics/component-without-selector/__snapshots__/without-selector.stories.storyshot
diff --git a/code/examples/angular-cli/src/stories/basics/component-without-selector/without-selector-ng-component-outlet.stories.ts b/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector-ng-component-outlet.stories.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-without-selector/without-selector-ng-component-outlet.stories.ts
rename to code/frameworks/angular/template/stories/basics/component-without-selector/without-selector-ng-component-outlet.stories.ts
diff --git a/code/examples/angular-cli/src/stories/basics/component-without-selector/without-selector-ng-factory-resolver.stories.ts b/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector-ng-factory-resolver.stories.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-without-selector/without-selector-ng-factory-resolver.stories.ts
rename to code/frameworks/angular/template/stories/basics/component-without-selector/without-selector-ng-factory-resolver.stories.ts
diff --git a/code/examples/angular-cli/src/stories/basics/component-without-selector/without-selector.component.ts b/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector.component.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-without-selector/without-selector.component.ts
rename to code/frameworks/angular/template/stories/basics/component-without-selector/without-selector.component.ts
diff --git a/code/examples/angular-cli/src/stories/basics/component-without-selector/without-selector.stories.ts b/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector.stories.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/component-without-selector/without-selector.stories.ts
rename to code/frameworks/angular/template/stories/basics/component-without-selector/without-selector.stories.ts
diff --git a/code/examples/angular-cli/src/stories/basics/ng-module/__snapshots__/import-module-for-root.stories.storyshot b/code/frameworks/angular/template/stories/basics/ng-module/__snapshots__/import-module-for-root.stories.storyshot
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/ng-module/__snapshots__/import-module-for-root.stories.storyshot
rename to code/frameworks/angular/template/stories/basics/ng-module/__snapshots__/import-module-for-root.stories.storyshot
diff --git a/code/examples/angular-cli/src/stories/basics/ng-module/__snapshots__/import-module.stories.storyshot b/code/frameworks/angular/template/stories/basics/ng-module/__snapshots__/import-module.stories.storyshot
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/ng-module/__snapshots__/import-module.stories.storyshot
rename to code/frameworks/angular/template/stories/basics/ng-module/__snapshots__/import-module.stories.storyshot
diff --git a/code/examples/angular-cli/src/stories/basics/ng-module/angular-src/chip-color.token.ts b/code/frameworks/angular/template/stories/basics/ng-module/angular-src/chip-color.token.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/ng-module/angular-src/chip-color.token.ts
rename to code/frameworks/angular/template/stories/basics/ng-module/angular-src/chip-color.token.ts
diff --git a/code/examples/angular-cli/src/stories/basics/ng-module/angular-src/chip-text.pipe.ts b/code/frameworks/angular/template/stories/basics/ng-module/angular-src/chip-text.pipe.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/ng-module/angular-src/chip-text.pipe.ts
rename to code/frameworks/angular/template/stories/basics/ng-module/angular-src/chip-text.pipe.ts
diff --git a/code/examples/angular-cli/src/stories/basics/ng-module/angular-src/chip.component.ts b/code/frameworks/angular/template/stories/basics/ng-module/angular-src/chip.component.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/ng-module/angular-src/chip.component.ts
rename to code/frameworks/angular/template/stories/basics/ng-module/angular-src/chip.component.ts
diff --git a/code/examples/angular-cli/src/stories/basics/ng-module/angular-src/chips-group.component.ts b/code/frameworks/angular/template/stories/basics/ng-module/angular-src/chips-group.component.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/ng-module/angular-src/chips-group.component.ts
rename to code/frameworks/angular/template/stories/basics/ng-module/angular-src/chips-group.component.ts
diff --git a/code/examples/angular-cli/src/stories/basics/ng-module/angular-src/chips.module.ts b/code/frameworks/angular/template/stories/basics/ng-module/angular-src/chips.module.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/ng-module/angular-src/chips.module.ts
rename to code/frameworks/angular/template/stories/basics/ng-module/angular-src/chips.module.ts
diff --git a/code/examples/angular-cli/src/stories/basics/ng-module/import-module-for-root.stories.ts b/code/frameworks/angular/template/stories/basics/ng-module/import-module-for-root.stories.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/ng-module/import-module-for-root.stories.ts
rename to code/frameworks/angular/template/stories/basics/ng-module/import-module-for-root.stories.ts
diff --git a/code/examples/angular-cli/src/stories/basics/ng-module/import-module.stories.ts b/code/frameworks/angular/template/stories/basics/ng-module/import-module.stories.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/basics/ng-module/import-module.stories.ts
rename to code/frameworks/angular/template/stories/basics/ng-module/import-module.stories.ts
diff --git a/code/frameworks/angular/template/stories/button.component.ts b/code/frameworks/angular/template/stories/button.component.ts
new file mode 100644
index 00000000000..da804e507b7
--- /dev/null
+++ b/code/frameworks/angular/template/stories/button.component.ts
@@ -0,0 +1,26 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'storybook-button-component',
+  template: ` <button (click)="onClick.emit($event)">{{ text }}</button> `,
+  styles: [
+    `
+      button {
+        border: 1px solid #eee;
+        border-radius: 3px;
+        background-color: #ffffff;
+        cursor: pointer;
+        font-size: 15px;
+        padding: 3px 10px;
+        margin: 10px;
+      }
+    `,
+  ],
+})
+export default class ButtonComponent {
+  @Input()
+  text = '';
+
+  @Output()
+  onClick = new EventEmitter<any>();
+}
diff --git a/code/frameworks/angular/template/stories/child.component.ts b/code/frameworks/angular/template/stories/child.component.ts
deleted file mode 100644
index 4666ec952ad..00000000000
--- a/code/frameworks/angular/template/stories/child.component.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
-
-@Component({
-  selector: 'child-component',
-  template: `
-    Child<br />
-    Input text: {{ childText }} <br />
-    Output : <button (click)="onClickChild.emit($event)">Click here !</button> <br />
-    Private text: {{ childPrivateText }} <br />
-  `,
-})
-export default class ChildComponent {
-  @Input()
-  childText = '';
-
-  childPrivateText = '';
-
-  @Output()
-  onClickChild = new EventEmitter<any>();
-}
diff --git a/code/examples/angular-cli/src/stories/core/README.stories.mdx b/code/frameworks/angular/template/stories/core/README.stories.mdx
similarity index 100%
rename from code/examples/angular-cli/src/stories/core/README.stories.mdx
rename to code/frameworks/angular/template/stories/core/README.stories.mdx
diff --git a/code/examples/angular-cli/src/stories/core/decorators/componentWrapperDecorator/__snapshots__/decorators.stories.storyshot b/code/frameworks/angular/template/stories/core/decorators/componentWrapperDecorator/__snapshots__/decorators.stories.storyshot
similarity index 100%
rename from code/examples/angular-cli/src/stories/core/decorators/componentWrapperDecorator/__snapshots__/decorators.stories.storyshot
rename to code/frameworks/angular/template/stories/core/decorators/componentWrapperDecorator/__snapshots__/decorators.stories.storyshot
diff --git a/code/examples/angular-cli/src/stories/core/decorators/componentWrapperDecorator/child.component.ts b/code/frameworks/angular/template/stories/core/decorators/componentWrapperDecorator/child.component.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/core/decorators/componentWrapperDecorator/child.component.ts
rename to code/frameworks/angular/template/stories/core/decorators/componentWrapperDecorator/child.component.ts
diff --git a/code/examples/angular-cli/src/stories/core/decorators/componentWrapperDecorator/decorators.stories.ts b/code/frameworks/angular/template/stories/core/decorators/componentWrapperDecorator/decorators.stories.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/core/decorators/componentWrapperDecorator/decorators.stories.ts
rename to code/frameworks/angular/template/stories/core/decorators/componentWrapperDecorator/decorators.stories.ts
diff --git a/code/examples/angular-cli/src/stories/core/decorators/componentWrapperDecorator/parent.component.ts b/code/frameworks/angular/template/stories/core/decorators/componentWrapperDecorator/parent.component.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/core/decorators/componentWrapperDecorator/parent.component.ts
rename to code/frameworks/angular/template/stories/core/decorators/componentWrapperDecorator/parent.component.ts
diff --git a/code/examples/angular-cli/src/stories/core/decorators/theme-decorator/__snapshots__/decorators.stories.storyshot b/code/frameworks/angular/template/stories/core/decorators/theme-decorator/__snapshots__/decorators.stories.storyshot
similarity index 100%
rename from code/examples/angular-cli/src/stories/core/decorators/theme-decorator/__snapshots__/decorators.stories.storyshot
rename to code/frameworks/angular/template/stories/core/decorators/theme-decorator/__snapshots__/decorators.stories.storyshot
diff --git a/code/examples/angular-cli/src/stories/core/decorators/theme-decorator/decorators.stories.ts b/code/frameworks/angular/template/stories/core/decorators/theme-decorator/decorators.stories.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/core/decorators/theme-decorator/decorators.stories.ts
rename to code/frameworks/angular/template/stories/core/decorators/theme-decorator/decorators.stories.ts
diff --git a/code/examples/angular-cli/src/stories/core/moduleMetadata/__snapshots__/in-export-default.stories.storyshot b/code/frameworks/angular/template/stories/core/moduleMetadata/__snapshots__/in-export-default.stories.storyshot
similarity index 100%
rename from code/examples/angular-cli/src/stories/core/moduleMetadata/__snapshots__/in-export-default.stories.storyshot
rename to code/frameworks/angular/template/stories/core/moduleMetadata/__snapshots__/in-export-default.stories.storyshot
diff --git a/code/examples/angular-cli/src/stories/core/moduleMetadata/__snapshots__/in-stories.stories.storyshot b/code/frameworks/angular/template/stories/core/moduleMetadata/__snapshots__/in-stories.stories.storyshot
similarity index 100%
rename from code/examples/angular-cli/src/stories/core/moduleMetadata/__snapshots__/in-stories.stories.storyshot
rename to code/frameworks/angular/template/stories/core/moduleMetadata/__snapshots__/in-stories.stories.storyshot
diff --git a/code/examples/angular-cli/src/stories/core/moduleMetadata/__snapshots__/merge-default-and-story.stories.storyshot b/code/frameworks/angular/template/stories/core/moduleMetadata/__snapshots__/merge-default-and-story.stories.storyshot
similarity index 100%
rename from code/examples/angular-cli/src/stories/core/moduleMetadata/__snapshots__/merge-default-and-story.stories.storyshot
rename to code/frameworks/angular/template/stories/core/moduleMetadata/__snapshots__/merge-default-and-story.stories.storyshot
diff --git a/code/examples/angular-cli/src/stories/core/moduleMetadata/angular-src/custom.pipe.ts b/code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/custom.pipe.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/core/moduleMetadata/angular-src/custom.pipe.ts
rename to code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/custom.pipe.ts
diff --git a/code/examples/angular-cli/src/stories/core/moduleMetadata/angular-src/dummy.service.ts b/code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/dummy.service.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/core/moduleMetadata/angular-src/dummy.service.ts
rename to code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/dummy.service.ts
diff --git a/code/examples/angular-cli/src/stories/core/moduleMetadata/angular-src/service.component.ts b/code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/service.component.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/core/moduleMetadata/angular-src/service.component.ts
rename to code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/service.component.ts
diff --git a/code/examples/angular-cli/src/stories/core/moduleMetadata/angular-src/token.component.ts b/code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/token.component.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/core/moduleMetadata/angular-src/token.component.ts
rename to code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/token.component.ts
diff --git a/code/examples/angular-cli/src/stories/core/moduleMetadata/in-export-default.stories.ts b/code/frameworks/angular/template/stories/core/moduleMetadata/in-export-default.stories.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/core/moduleMetadata/in-export-default.stories.ts
rename to code/frameworks/angular/template/stories/core/moduleMetadata/in-export-default.stories.ts
diff --git a/code/examples/angular-cli/src/stories/core/moduleMetadata/in-stories.stories.ts b/code/frameworks/angular/template/stories/core/moduleMetadata/in-stories.stories.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/core/moduleMetadata/in-stories.stories.ts
rename to code/frameworks/angular/template/stories/core/moduleMetadata/in-stories.stories.ts
diff --git a/code/examples/angular-cli/src/stories/core/moduleMetadata/merge-default-and-story.stories.ts b/code/frameworks/angular/template/stories/core/moduleMetadata/merge-default-and-story.stories.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/core/moduleMetadata/merge-default-and-story.stories.ts
rename to code/frameworks/angular/template/stories/core/moduleMetadata/merge-default-and-story.stories.ts
diff --git a/code/examples/angular-cli/src/stories/core/parameters/__snapshots__/all-parameters.stories.storyshot b/code/frameworks/angular/template/stories/core/parameters/__snapshots__/all-parameters.stories.storyshot
similarity index 100%
rename from code/examples/angular-cli/src/stories/core/parameters/__snapshots__/all-parameters.stories.storyshot
rename to code/frameworks/angular/template/stories/core/parameters/__snapshots__/all-parameters.stories.storyshot
diff --git a/code/examples/angular-cli/src/stories/core/parameters/__snapshots__/bootstrap-options.stories.storyshot b/code/frameworks/angular/template/stories/core/parameters/__snapshots__/bootstrap-options.stories.storyshot
similarity index 100%
rename from code/examples/angular-cli/src/stories/core/parameters/__snapshots__/bootstrap-options.stories.storyshot
rename to code/frameworks/angular/template/stories/core/parameters/__snapshots__/bootstrap-options.stories.storyshot
diff --git a/code/examples/angular-cli/src/stories/core/parameters/__snapshots__/layout.parameters.stories.storyshot b/code/frameworks/angular/template/stories/core/parameters/__snapshots__/layout.parameters.stories.storyshot
similarity index 100%
rename from code/examples/angular-cli/src/stories/core/parameters/__snapshots__/layout.parameters.stories.storyshot
rename to code/frameworks/angular/template/stories/core/parameters/__snapshots__/layout.parameters.stories.storyshot
diff --git a/code/examples/angular-cli/src/stories/core/parameters/bootstrap-options.stories.ts b/code/frameworks/angular/template/stories/core/parameters/bootstrap-options.stories.ts
similarity index 100%
rename from code/examples/angular-cli/src/stories/core/parameters/bootstrap-options.stories.ts
rename to code/frameworks/angular/template/stories/core/parameters/bootstrap-options.stories.ts
diff --git a/code/examples/angular-cli/src/stories/core/styles/__snapshots__/story-styles.stories.storyshot b/code/frameworks/angular/template/stories/core/styles/__snapshots__/story-styles.stories.storyshot
similarity index 100%
rename from code/examples/angular-cli/src/stories/core/styles/__snapshots__/story-styles.stories.storyshot
rename to code/frameworks/angular/template/stories/core/styles/__snapshots__/story-styles.stories.storyshot
diff --git a/code/examples/angular-cli/src/stories/core/styles/story-styles.stories.ts b/code/frameworks/angular/template/stories/core/styles/story-styles.stories.ts
similarity index 96%
rename from code/examples/angular-cli/src/stories/core/styles/story-styles.stories.ts
rename to code/frameworks/angular/template/stories/core/styles/story-styles.stories.ts
index a8fb561efc9..b5aa89a9277 100644
--- a/code/examples/angular-cli/src/stories/core/styles/story-styles.stories.ts
+++ b/code/frameworks/angular/template/stories/core/styles/story-styles.stories.ts
@@ -1,5 +1,5 @@
 import { Meta, moduleMetadata, StoryFn } from '@storybook/angular';
-import { Button } from '../../angular-demo';
+import Button from '../../button.component';
 
 export default {
   title: 'Core / Story host styles',
diff --git a/code/frameworks/angular/template/stories/decorators.stories.ts b/code/frameworks/angular/template/stories/decorators.stories.ts
deleted file mode 100644
index 14cd21b924a..00000000000
--- a/code/frameworks/angular/template/stories/decorators.stories.ts
+++ /dev/null
@@ -1,117 +0,0 @@
-// your-component.stories.ts
-
-import { Args, componentWrapperDecorator, Meta, moduleMetadata, Story } from '@storybook/angular';
-import ChildComponent from './child.component';
-import ParentComponent from './parent.component';
-
-export default {
-  title: 'Core / Decorators / ComponentWrapperDecorator',
-  component: ChildComponent,
-  decorators: [
-    componentWrapperDecorator(
-      (story) => `Grandparent<br><div style="margin: 3em; border:solid;">${story}</div>`
-    ),
-  ],
-  args: { childText: 'Child text', childPrivateText: 'Child private text' },
-  argTypes: { onClickChild: { action: 'onClickChild' } },
-} as Meta;
-
-export const WithTemplate = (args: Args) => ({
-  template: `Child Template`,
-  props: {
-    ...args,
-  },
-});
-
-export const WithComponent = (args: Args) => ({
-  props: {
-    ...args,
-  },
-});
-
-export const WithLegacyComponent = (args: Args) => ({
-  component: ChildComponent,
-  props: {
-    ...args,
-  },
-});
-
-export const WithComponentWrapperDecorator = (args: Args) => ({
-  component: ChildComponent,
-  props: {
-    ...args,
-  },
-});
-WithComponentWrapperDecorator.decorators = [
-  moduleMetadata({ declarations: [ParentComponent] }),
-  componentWrapperDecorator(ParentComponent),
-];
-
-export const WithComponentWrapperDecoratorAndProps = (args: Args) => ({
-  component: ChildComponent,
-  props: {
-    ...args,
-  },
-});
-WithComponentWrapperDecoratorAndProps.decorators = [
-  moduleMetadata({ declarations: [ParentComponent] }),
-  componentWrapperDecorator(ParentComponent, {
-    parentText: 'Parent text',
-    onClickParent: () => {
-      console.log('onClickParent');
-    },
-  }),
-];
-
-export const WithComponentWrapperDecoratorAndArgs = (args: Args) => ({
-  component: ChildComponent,
-  props: {
-    ...args,
-  },
-});
-WithComponentWrapperDecoratorAndArgs.argTypes = {
-  parentText: { control: { type: 'text' } },
-  onClickParent: { action: 'onClickParent' },
-};
-WithComponentWrapperDecoratorAndArgs.decorators = [
-  moduleMetadata({ declarations: [ParentComponent] }),
-  componentWrapperDecorator(ParentComponent, ({ args }) => ({
-    parentText: args.parentText,
-    onClickParent: args.onClickParent,
-  })),
-];
-
-export const WithCustomDecorator = (args: Args) => ({
-  template: `Child Template`,
-  props: {
-    ...args,
-  },
-});
-WithCustomDecorator.decorators = [
-  (storyFunc) => {
-    const story = storyFunc();
-
-    return {
-      ...story,
-      template: `Custom Decorator <div style="margin: 3em">${story.template}</div>`,
-    };
-  },
-] as Story['decorators'];
-
-export const AngularLegacyRendering = (args: Args) => ({
-  template: `Child Template`,
-  props: {
-    ...args,
-  },
-});
-AngularLegacyRendering.parameters = { angularLegacyRendering: true };
-AngularLegacyRendering.decorators = [
-  (storyFunc) => {
-    const story = storyFunc();
-
-    return {
-      ...story,
-      template: `Custom Decorator <div style="margin: 3em">${story.template}</div>`,
-    };
-  },
-] as Story['decorators'];
diff --git a/code/examples/angular-cli/src/stories/legacy/README.stories.mdx b/code/frameworks/angular/template/stories/legacy/README.stories.mdx
similarity index 100%
rename from code/examples/angular-cli/src/stories/legacy/README.stories.mdx
rename to code/frameworks/angular/template/stories/legacy/README.stories.mdx
diff --git a/code/examples/angular-cli/src/stories/legacy/__snapshots__/component-in-story.stories.storyshot b/code/frameworks/angular/template/stories/legacy/__snapshots__/component-in-story.stories.storyshot
similarity index 100%
rename from code/examples/angular-cli/src/stories/legacy/__snapshots__/component-in-story.stories.storyshot
rename to code/frameworks/angular/template/stories/legacy/__snapshots__/component-in-story.stories.storyshot
diff --git a/code/examples/angular-cli/src/stories/legacy/component-in-story.stories.ts b/code/frameworks/angular/template/stories/legacy/component-in-story.stories.ts
similarity index 85%
rename from code/examples/angular-cli/src/stories/legacy/component-in-story.stories.ts
rename to code/frameworks/angular/template/stories/legacy/component-in-story.stories.ts
index f42d2fb016c..abea9a80495 100644
--- a/code/examples/angular-cli/src/stories/legacy/component-in-story.stories.ts
+++ b/code/frameworks/angular/template/stories/legacy/component-in-story.stories.ts
@@ -1,5 +1,5 @@
 import type { Meta, StoryFn } from '@storybook/angular';
-import { Button } from '../angular-demo';
+import Button from '../button.component';
 
 export default {
   title: 'Legacy / Component in Story',
diff --git a/code/examples/angular-cli/src/stories/others/issues/12009-unknown-component.stories.ts b/code/frameworks/angular/template/stories/others/issues/12009-unknown-component.stories.ts
similarity index 87%
rename from code/examples/angular-cli/src/stories/others/issues/12009-unknown-component.stories.ts
rename to code/frameworks/angular/template/stories/others/issues/12009-unknown-component.stories.ts
index a084c754fea..cf60b13e18f 100644
--- a/code/examples/angular-cli/src/stories/others/issues/12009-unknown-component.stories.ts
+++ b/code/frameworks/angular/template/stories/others/issues/12009-unknown-component.stories.ts
@@ -1,5 +1,5 @@
 import type { Meta, StoryFn } from '@storybook/angular';
-import { Button } from '../../angular-demo';
+import Button from '../../button.component';
 
 export default {
   title: 'Others / Issues / 12009 unknown component',
diff --git a/code/examples/angular-cli/src/stories/others/issues/__snapshots__/12009-unknown-component.stories.storyshot b/code/frameworks/angular/template/stories/others/issues/__snapshots__/12009-unknown-component.stories.storyshot
similarity index 100%
rename from code/examples/angular-cli/src/stories/others/issues/__snapshots__/12009-unknown-component.stories.storyshot
rename to code/frameworks/angular/template/stories/others/issues/__snapshots__/12009-unknown-component.stories.storyshot
diff --git a/code/examples/angular-cli/src/stories/others/ngx-translate/README.stories.mdx b/code/frameworks/angular/template/stories/others/ngx-translate/README.stories.mdx
similarity index 100%
rename from code/examples/angular-cli/src/stories/others/ngx-translate/README.stories.mdx
rename to code/frameworks/angular/template/stories/others/ngx-translate/README.stories.mdx
diff --git a/code/frameworks/angular/template/stories/parent.component.ts b/code/frameworks/angular/template/stories/parent.component.ts
deleted file mode 100644
index f49ce1bb187..00000000000
--- a/code/frameworks/angular/template/stories/parent.component.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
-
-@Component({
-  selector: 'parent-component',
-  template: `
-    Parent<br />
-    Input text: {{ parentText }} <br />
-    Output : <button (click)="onClickParent.emit($event)">Click here !</button> <br />
-    <div style="margin: 3em; border:solid;"><ng-content></ng-content></div>
-  `,
-})
-export default class ParentComponent {
-  @Input()
-  parentText = '';
-
-  @Output()
-  onClickParent = new EventEmitter<any>();
-}

From 2caa680d057e72ad91de9fee205d6fbca41ba871 Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@chromatic.com>
Date: Fri, 16 Sep 2022 15:46:06 +1000
Subject: [PATCH 12/47] Fix typing issues in angular renderer stories

---
 .../custom-cva.component.ts                   |  2 +-
 .../component-with-enums/enums.component.ts   | 12 +++++-----
 .../base-button.component.ts                  |  2 +-
 .../icon-button.component.ts                  |  2 +-
 .../ng-content-about-parent.stories.ts        |  6 +++--
 .../ng-content-simple.stories.ts              |  3 ++-
 .../component-with-on-destroy.stories.ts      |  2 +-
 .../on-push-box.component.ts                  |  4 ++--
 .../with-pipe.component.ts                    |  2 +-
 .../di.component.stories.ts                   |  3 ++-
 .../component-with-provider/di.component.ts   |  2 +-
 ...ut-selector-ng-component-outlet.stories.ts | 11 +++++-----
 ...ut-selector-ng-factory-resolver.stories.ts |  8 +++----
 .../without-selector.stories.ts               |  3 ++-
 .../ng-module/angular-src/chip.component.ts   |  2 +-
 .../angular-src/chips-group.component.ts      |  2 +-
 .../decorators.stories.ts                     | 22 +++++++++----------
 .../theme-decorator/decorators.stories.ts     |  7 +++---
 .../angular-src/service.component.ts          |  6 ++---
 19 files changed, 54 insertions(+), 47 deletions(-)

diff --git a/code/frameworks/angular/template/stories/basics/angular-forms/customControlValueAccessor/custom-cva.component.ts b/code/frameworks/angular/template/stories/basics/angular-forms/customControlValueAccessor/custom-cva.component.ts
index 3806d30ac5e..ee2209c940f 100644
--- a/code/frameworks/angular/template/stories/basics/angular-forms/customControlValueAccessor/custom-cva.component.ts
+++ b/code/frameworks/angular/template/stories/basics/angular-forms/customControlValueAccessor/custom-cva.component.ts
@@ -18,7 +18,7 @@ const NOOP = () => {};
   ],
 })
 export class CustomCvaComponent implements ControlValueAccessor {
-  disabled: boolean;
+  disabled?: boolean;
 
   protected onChange: (value: any) => void = NOOP;
 
diff --git a/code/frameworks/angular/template/stories/basics/component-with-enums/enums.component.ts b/code/frameworks/angular/template/stories/basics/component-with-enums/enums.component.ts
index 48e78194238..822aeaff17e 100644
--- a/code/frameworks/angular/template/stories/basics/component-with-enums/enums.component.ts
+++ b/code/frameworks/angular/template/stories/basics/component-with-enums/enums.component.ts
@@ -9,22 +9,22 @@ import { Component, Input } from '@angular/core';
 })
 export class EnumsComponent {
   /** Union Type of string literals */
-  @Input() unionType: 'Union A' | 'Union B' | 'Union C';
+  @Input() unionType?: 'Union A' | 'Union B' | 'Union C';
 
   /** Union Type assigned as a Type Alias */
-  @Input() aliasedUnionType: TypeAlias;
+  @Input() aliasedUnionType?: TypeAlias;
 
   /** Base Enum Type with no assigned values */
-  @Input() enumNumeric: EnumNumeric;
+  @Input() enumNumeric?: EnumNumeric;
 
   /** Enum with initial numeric value and auto-incrementing subsequent values */
-  @Input() enumNumericInitial: EnumNumericInitial;
+  @Input() enumNumericInitial?: EnumNumericInitial;
 
   /** Enum with string values */
-  @Input() enumStrings: EnumStringValues;
+  @Input() enumStrings?: EnumStringValues;
 
   /** Type Aliased Enum Type */
-  @Input() enumAlias: EnumAlias;
+  @Input() enumAlias?: EnumAlias;
 }
 
 /**
diff --git a/code/frameworks/angular/template/stories/basics/component-with-inheritance/base-button.component.ts b/code/frameworks/angular/template/stories/basics/component-with-inheritance/base-button.component.ts
index 6afc2f20cce..0cd694506d5 100644
--- a/code/frameworks/angular/template/stories/basics/component-with-inheritance/base-button.component.ts
+++ b/code/frameworks/angular/template/stories/basics/component-with-inheritance/base-button.component.ts
@@ -6,5 +6,5 @@ import { Component, Input } from '@angular/core';
 })
 export class BaseButtonComponent {
   @Input()
-  label: string;
+  label?: string;
 }
diff --git a/code/frameworks/angular/template/stories/basics/component-with-inheritance/icon-button.component.ts b/code/frameworks/angular/template/stories/basics/component-with-inheritance/icon-button.component.ts
index 82ff17cf9e9..3994a3de2a9 100644
--- a/code/frameworks/angular/template/stories/basics/component-with-inheritance/icon-button.component.ts
+++ b/code/frameworks/angular/template/stories/basics/component-with-inheritance/icon-button.component.ts
@@ -7,5 +7,5 @@ import { BaseButtonComponent } from './base-button.component';
 })
 export class IconButtonComponent extends BaseButtonComponent {
   @Input()
-  icon: string;
+  icon?: string;
 }
diff --git a/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-about-parent.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-about-parent.stories.ts
index 6978b39c44d..d11354fdbcd 100644
--- a/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-about-parent.stories.ts
+++ b/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-about-parent.stories.ts
@@ -28,7 +28,8 @@ export default {
     // Wrap all stories with this template
     componentWrapperDecorator(
       (story) => `<sb-button [color]="propsColor">${story}</sb-button>`,
-      ({ args }) => ({ propsColor: args.color })
+      // eslint-disable-next-line dot-notation
+      ({ args }) => ({ propsColor: args['color'] })
     ),
   ],
   argTypes: {
@@ -45,7 +46,8 @@ export const EmptyButton: StoryFn = () => ({
 });
 
 export const WithDynamicContentAndArgs: StoryFn = (args) => ({
-  template: `${args.content}`,
+  // eslint-disable-next-line dot-notation
+  template: `${args['content']}`,
 });
 WithDynamicContentAndArgs.argTypes = {
   content: { control: 'text' },
diff --git a/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-simple.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-simple.stories.ts
index ee684e74c19..71a00a66ce7 100644
--- a/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-simple.stories.ts
+++ b/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-simple.stories.ts
@@ -21,7 +21,8 @@ export const Default: StoryFn = () => ({
 });
 
 export const WithDynamicContentAndArgs: StoryFn = (args) => ({
-  template: `<storybook-with-ng-content><h1>${args.content}</h1></storybook-with-ng-content>`,
+  // eslint-disable-next-line dot-notation
+  template: `<storybook-with-ng-content><h1>${args['content']}</h1></storybook-with-ng-content>`,
 });
 WithDynamicContentAndArgs.argTypes = {
   content: { control: 'text' },
diff --git a/code/frameworks/angular/template/stories/basics/component-with-ng-on-destroy/component-with-on-destroy.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-ng-on-destroy/component-with-on-destroy.stories.ts
index 6e12aae1c44..b3b571af399 100644
--- a/code/frameworks/angular/template/stories/basics/component-with-ng-on-destroy/component-with-on-destroy.stories.ts
+++ b/code/frameworks/angular/template/stories/basics/component-with-ng-on-destroy/component-with-on-destroy.stories.ts
@@ -7,7 +7,7 @@ import type { Meta, StoryFn } from '@storybook/angular';
     📝 The current time in console should no longer display after a change of story`,
 })
 class OnDestroyComponent implements OnInit, OnDestroy {
-  time: string;
+  time?: string;
 
   interval: any;
 
diff --git a/code/frameworks/angular/template/stories/basics/component-with-on-push/on-push-box.component.ts b/code/frameworks/angular/template/stories/basics/component-with-on-push/on-push-box.component.ts
index e35ada4b1c5..b6bf293f1b0 100644
--- a/code/frameworks/angular/template/stories/basics/component-with-on-push/on-push-box.component.ts
+++ b/code/frameworks/angular/template/stories/basics/component-with-on-push/on-push-box.component.ts
@@ -15,7 +15,7 @@ import { Component, Input, ChangeDetectionStrategy, HostBinding } from '@angular
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class OnPushBoxComponent {
-  @Input() word: string;
+  @Input() word?: string;
 
-  @Input() @HostBinding('style.background-color') bgColor: string;
+  @Input() @HostBinding('style.background-color') bgColor?: string;
 }
diff --git a/code/frameworks/angular/template/stories/basics/component-with-pipe/with-pipe.component.ts b/code/frameworks/angular/template/stories/basics/component-with-pipe/with-pipe.component.ts
index 0ea676d121d..4582170ecf7 100644
--- a/code/frameworks/angular/template/stories/basics/component-with-pipe/with-pipe.component.ts
+++ b/code/frameworks/angular/template/stories/basics/component-with-pipe/with-pipe.component.ts
@@ -6,5 +6,5 @@ import { Component, Input } from '@angular/core';
 })
 export class WithPipeComponent {
   @Input()
-  field;
+  field: any;
 }
diff --git a/code/frameworks/angular/template/stories/basics/component-with-provider/di.component.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-provider/di.component.stories.ts
index e0ae1cfb912..1c3bcc2407a 100644
--- a/code/frameworks/angular/template/stories/basics/component-with-provider/di.component.stories.ts
+++ b/code/frameworks/angular/template/stories/basics/component-with-provider/di.component.stories.ts
@@ -1,3 +1,4 @@
+import type { Args } from '@storybook/angular';
 import { DiComponent } from './di.component';
 
 export default {
@@ -13,7 +14,7 @@ export const InputsAndInjectDependencies = () => ({
 
 InputsAndInjectDependencies.storyName = 'inputs and inject dependencies';
 
-export const InputsAndInjectDependenciesWithArgs = (args) => ({
+export const InputsAndInjectDependenciesWithArgs = (args: Args) => ({
   props: args,
 });
 InputsAndInjectDependenciesWithArgs.storyName = 'inputs and inject dependencies with args';
diff --git a/code/frameworks/angular/template/stories/basics/component-with-provider/di.component.ts b/code/frameworks/angular/template/stories/basics/component-with-provider/di.component.ts
index fbca49cbc42..a91b4524000 100644
--- a/code/frameworks/angular/template/stories/basics/component-with-provider/di.component.ts
+++ b/code/frameworks/angular/template/stories/basics/component-with-provider/di.component.ts
@@ -11,7 +11,7 @@ export const TEST_TOKEN = new InjectionToken<string>('test');
 })
 export class DiComponent {
   @Input()
-  title: string;
+  title?: string;
 
   constructor(
     protected injector: Injector,
diff --git a/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector-ng-component-outlet.stories.ts b/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector-ng-component-outlet.stories.ts
index b082edf4f23..acb5c89a24c 100644
--- a/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector-ng-component-outlet.stories.ts
+++ b/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector-ng-component-outlet.stories.ts
@@ -22,15 +22,15 @@ export default {
 })
 class NgComponentOutletWrapperComponent implements OnInit {
   @Input()
-  componentOutlet: Type<unknown>;
+  componentOutlet?: Type<unknown>;
 
   @Input()
-  name: string;
+  name?: string;
 
   @Input()
-  color: string;
+  color?: string;
 
-  componentInjector: Injector;
+  componentInjector?: Injector;
 
   componentContent = [
     [document.createTextNode('Ng-content : Inspired by ')],
@@ -67,7 +67,8 @@ WithCustomNgComponentOutletWrapper.decorators = [
   }),
   componentWrapperDecorator(NgComponentOutletWrapperComponent, (args) => ({
     name: args.name,
-    color: args.color,
+    // eslint-disable-next-line dot-notation
+    color: args['color'],
     componentOutlet: WithoutSelectorComponent,
   })),
 ];
diff --git a/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector-ng-factory-resolver.stories.ts b/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector-ng-factory-resolver.stories.ts
index bea49c9a82d..0573a66fad5 100644
--- a/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector-ng-factory-resolver.stories.ts
+++ b/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector-ng-factory-resolver.stories.ts
@@ -25,10 +25,10 @@ export default {
 
 @Component({ selector: 'component-factory-wrapper', template: '' })
 class ComponentFactoryWrapperComponent implements AfterViewInit {
-  @ViewChild('dynamicInsert', { read: ViewContainerRef }) dynamicInsert;
+  @ViewChild('dynamicInsert', { read: ViewContainerRef }) dynamicInsert: any;
 
   @Input()
-  componentOutlet: Type<unknown>;
+  componentOutlet?: Type<unknown>;
 
   @Input()
   args: any;
@@ -41,12 +41,12 @@ class ComponentFactoryWrapperComponent implements AfterViewInit {
 
   ngAfterViewInit() {
     const componentFactory = this.componentFactoryResolver.resolveComponentFactory(
-      this.componentOutlet
+      this.componentOutlet!
     );
     const containerRef = this.viewContainerRef;
     containerRef.clear();
     const dynamicComponent = containerRef.createComponent(componentFactory);
-    Object.assign(dynamicComponent.instance, this.args);
+    Object.assign(dynamicComponent.instance as any, this.args);
   }
 }
 
diff --git a/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector.stories.ts b/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector.stories.ts
index d0660093f45..6d2f8b490a7 100644
--- a/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector.stories.ts
+++ b/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector.stories.ts
@@ -19,7 +19,8 @@ export const WithInjectionTokenAndArgs: StoryFn = (args) => ({
   props: args,
   moduleMetadata: {
     providers: [
-      { provide: WITHOUT_SELECTOR_DATA, useValue: { color: args.color, name: args.name } },
+      // eslint-disable-next-line dot-notation
+      { provide: WITHOUT_SELECTOR_DATA, useValue: { color: args['color'], name: args['name'] } },
     ],
   },
 });
diff --git a/code/frameworks/angular/template/stories/basics/ng-module/angular-src/chip.component.ts b/code/frameworks/angular/template/stories/basics/ng-module/angular-src/chip.component.ts
index 18ae3440a58..249adb2598e 100644
--- a/code/frameworks/angular/template/stories/basics/ng-module/angular-src/chip.component.ts
+++ b/code/frameworks/angular/template/stories/basics/ng-module/angular-src/chip.component.ts
@@ -48,7 +48,7 @@ import { CHIP_COLOR } from './chip-color.token';
   ],
 })
 export class ChipComponent {
-  @Input() displayText: string;
+  @Input() displayText?: string;
 
   @Output() removeClicked = new EventEmitter();
 
diff --git a/code/frameworks/angular/template/stories/basics/ng-module/angular-src/chips-group.component.ts b/code/frameworks/angular/template/stories/basics/ng-module/angular-src/chips-group.component.ts
index 8969e188e90..787596400fb 100644
--- a/code/frameworks/angular/template/stories/basics/ng-module/angular-src/chips-group.component.ts
+++ b/code/frameworks/angular/template/stories/basics/ng-module/angular-src/chips-group.component.ts
@@ -38,7 +38,7 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
   ],
 })
 export class ChipsGroupComponent {
-  @Input() chips: {
+  @Input() chips?: {
     id: number;
     text: string;
   }[];
diff --git a/code/frameworks/angular/template/stories/core/decorators/componentWrapperDecorator/decorators.stories.ts b/code/frameworks/angular/template/stories/core/decorators/componentWrapperDecorator/decorators.stories.ts
index 1f4b61b9bec..14cd21b924a 100644
--- a/code/frameworks/angular/template/stories/core/decorators/componentWrapperDecorator/decorators.stories.ts
+++ b/code/frameworks/angular/template/stories/core/decorators/componentWrapperDecorator/decorators.stories.ts
@@ -1,6 +1,6 @@
 // your-component.stories.ts
 
-import { componentWrapperDecorator, Meta, moduleMetadata } from '@storybook/angular';
+import { Args, componentWrapperDecorator, Meta, moduleMetadata, Story } from '@storybook/angular';
 import ChildComponent from './child.component';
 import ParentComponent from './parent.component';
 
@@ -16,27 +16,27 @@ export default {
   argTypes: { onClickChild: { action: 'onClickChild' } },
 } as Meta;
 
-export const WithTemplate = (args) => ({
+export const WithTemplate = (args: Args) => ({
   template: `Child Template`,
   props: {
     ...args,
   },
 });
 
-export const WithComponent = (args) => ({
+export const WithComponent = (args: Args) => ({
   props: {
     ...args,
   },
 });
 
-export const WithLegacyComponent = (args) => ({
+export const WithLegacyComponent = (args: Args) => ({
   component: ChildComponent,
   props: {
     ...args,
   },
 });
 
-export const WithComponentWrapperDecorator = (args) => ({
+export const WithComponentWrapperDecorator = (args: Args) => ({
   component: ChildComponent,
   props: {
     ...args,
@@ -47,7 +47,7 @@ WithComponentWrapperDecorator.decorators = [
   componentWrapperDecorator(ParentComponent),
 ];
 
-export const WithComponentWrapperDecoratorAndProps = (args) => ({
+export const WithComponentWrapperDecoratorAndProps = (args: Args) => ({
   component: ChildComponent,
   props: {
     ...args,
@@ -63,7 +63,7 @@ WithComponentWrapperDecoratorAndProps.decorators = [
   }),
 ];
 
-export const WithComponentWrapperDecoratorAndArgs = (args) => ({
+export const WithComponentWrapperDecoratorAndArgs = (args: Args) => ({
   component: ChildComponent,
   props: {
     ...args,
@@ -81,7 +81,7 @@ WithComponentWrapperDecoratorAndArgs.decorators = [
   })),
 ];
 
-export const WithCustomDecorator = (args) => ({
+export const WithCustomDecorator = (args: Args) => ({
   template: `Child Template`,
   props: {
     ...args,
@@ -96,9 +96,9 @@ WithCustomDecorator.decorators = [
       template: `Custom Decorator <div style="margin: 3em">${story.template}</div>`,
     };
   },
-];
+] as Story['decorators'];
 
-export const AngularLegacyRendering = (args) => ({
+export const AngularLegacyRendering = (args: Args) => ({
   template: `Child Template`,
   props: {
     ...args,
@@ -114,4 +114,4 @@ AngularLegacyRendering.decorators = [
       template: `Custom Decorator <div style="margin: 3em">${story.template}</div>`,
     };
   },
-];
+] as Story['decorators'];
diff --git a/code/frameworks/angular/template/stories/core/decorators/theme-decorator/decorators.stories.ts b/code/frameworks/angular/template/stories/core/decorators/theme-decorator/decorators.stories.ts
index c3890ea8709..591bee3a59d 100644
--- a/code/frameworks/angular/template/stories/core/decorators/theme-decorator/decorators.stories.ts
+++ b/code/frameworks/angular/template/stories/core/decorators/theme-decorator/decorators.stories.ts
@@ -1,16 +1,17 @@
-import { componentWrapperDecorator, Meta } from '@storybook/angular';
+import { Args, componentWrapperDecorator, Meta } from '@storybook/angular';
 
 export default {
   title: 'Core / Decorators / Theme Decorators',
   decorators: [
     componentWrapperDecorator(
       (story) => `<div [class]="myTheme">${story}</div>`,
-      ({ globals }) => ({ myTheme: `${globals.theme}-theme` })
+      // eslint-disable-next-line dot-notation
+      ({ globals }) => ({ myTheme: `${globals['theme']}-theme` })
     ),
   ],
 } as Meta;
 
-export const Base = (args) => ({
+export const Base = (args: Args) => ({
   template: 'Change theme with the brush in toolbar',
   props: {
     ...args,
diff --git a/code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/service.component.ts b/code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/service.component.ts
index 2d84bac3962..c0513fd344b 100644
--- a/code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/service.component.ts
+++ b/code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/service.component.ts
@@ -11,15 +11,15 @@ import { DummyService } from './dummy.service';
   `,
 })
 export class ServiceComponent implements OnInit {
-  items: {};
+  items?: {};
 
   @Input()
-  name: any;
+  name?: any;
 
   // eslint-disable-next-line no-useless-constructor
   constructor(private dummy: DummyService) {}
 
   async ngOnInit() {
-    this.items = await this.dummy.getItems();
+    this.items = (await this.dummy.getItems()) as any;
   }
 }

From a8c44cab5eb8aee81fbfea30fabaf4e5d79415c5 Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@chromatic.com>
Date: Fri, 16 Sep 2022 20:13:57 +1000
Subject: [PATCH 13/47] Drop titles and use autotitle where possible

---
 .../stories/basics/README.stories.mdx         |  2 +-
 .../custom-cva-component.stories.ts           |  2 +-
 .../multiple-selector.component.stories.ts    |  3 +-
 .../enums.component.stories.ts                |  2 +-
 .../inheritance.stories.ts                    |  3 +-
 .../ng-content-about-parent.stories.ts        |  2 +-
 .../ng-content-simple.stories.ts              |  2 +-
 .../component-with-on-destroy.stories.ts      |  2 +-
 .../component-with-on-push/on-push.stories.ts |  2 +-
 .../custom-pipes.stories.ts                   |  2 +-
 .../di.component.stories.ts                   |  2 +-
 .../styled.component.stories.ts               |  2 +-
 ...ut-selector-ng-component-outlet.stories.ts |  2 +-
 ...ut-selector-ng-factory-resolver.stories.ts |  2 +-
 .../without-selector.stories.ts               |  2 +-
 .../import-module-for-root.stories.ts         |  2 +-
 .../basics/ng-module/import-module.stories.ts |  3 +-
 .../template/stories/core/README.stories.mdx  |  2 +-
 .../decorators.stories.ts                     |  2 +-
 .../theme-decorator/decorators.stories.ts     | 17 +++++-----
 .../in-export-default.stories.ts              | 33 ++++++++++---------
 .../core/moduleMetadata/in-stories.stories.ts |  9 ++---
 .../merge-default-and-story.stories.ts        | 27 +++++++--------
 .../parameters/bootstrap-options.stories.ts   |  4 +--
 .../core/styles/story-styles.stories.ts       | 19 ++++++-----
 .../stories/legacy/README.stories.mdx         |  2 +-
 .../legacy/component-in-story.stories.ts      |  9 ++---
 .../issues/12009-unknown-component.stories.ts |  2 +-
 .../others/ngx-translate/README.stories.mdx   |  2 +-
 29 files changed, 87 insertions(+), 78 deletions(-)

diff --git a/code/frameworks/angular/template/stories/basics/README.stories.mdx b/code/frameworks/angular/template/stories/basics/README.stories.mdx
index 3b97cc376bc..4af25e032e7 100644
--- a/code/frameworks/angular/template/stories/basics/README.stories.mdx
+++ b/code/frameworks/angular/template/stories/basics/README.stories.mdx
@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/addon-docs';
 
-<Meta title="Basics / Readme" />
+<Meta title="stories / frameworks / angular / basics / README" />
 
 # Examples for Angular features
 
diff --git a/code/frameworks/angular/template/stories/basics/angular-forms/customControlValueAccessor/custom-cva-component.stories.ts b/code/frameworks/angular/template/stories/basics/angular-forms/customControlValueAccessor/custom-cva-component.stories.ts
index c23f4f49f1b..83adcf4def8 100644
--- a/code/frameworks/angular/template/stories/basics/angular-forms/customControlValueAccessor/custom-cva-component.stories.ts
+++ b/code/frameworks/angular/template/stories/basics/angular-forms/customControlValueAccessor/custom-cva-component.stories.ts
@@ -3,7 +3,7 @@ import { moduleMetadata, Meta, StoryFn } from '@storybook/angular';
 import { CustomCvaComponent } from './custom-cva.component';
 
 export default {
-  title: 'Basics / Angular forms / ControlValueAccessor',
+  // title: 'Basics / Angular forms / ControlValueAccessor',
   component: CustomCvaComponent,
   decorators: [
     moduleMetadata({
diff --git a/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/multiple-selector.component.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/multiple-selector.component.stories.ts
index c898a051140..fdab41391c3 100644
--- a/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/multiple-selector.component.stories.ts
+++ b/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/multiple-selector.component.stories.ts
@@ -6,7 +6,8 @@ import { AttributeSelectorComponent } from './attribute-selector.component';
 import { ClassSelectorComponent } from './class-selector.component';
 
 export default {
-  title: 'Basics / Component / With Complex Selectors',
+  // title: 'Basics / Component / With Complex Selectors',
+  component: MultipleClassSelectorComponent,
 };
 
 export const MultipleSelectors = () => ({
diff --git a/code/frameworks/angular/template/stories/basics/component-with-enums/enums.component.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-enums/enums.component.stories.ts
index 0a5774b3a52..2f4696dd65e 100644
--- a/code/frameworks/angular/template/stories/basics/component-with-enums/enums.component.stories.ts
+++ b/code/frameworks/angular/template/stories/basics/component-with-enums/enums.component.stories.ts
@@ -7,7 +7,7 @@ import {
 } from './enums.component';
 
 export default {
-  title: 'Basics / Component / With Enum Types',
+  // title: 'Basics / Component / With Enum Types',
   component: EnumsComponent,
 } as Meta;
 
diff --git a/code/frameworks/angular/template/stories/basics/component-with-inheritance/inheritance.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-inheritance/inheritance.stories.ts
index bf1e6a05082..90e05e73910 100644
--- a/code/frameworks/angular/template/stories/basics/component-with-inheritance/inheritance.stories.ts
+++ b/code/frameworks/angular/template/stories/basics/component-with-inheritance/inheritance.stories.ts
@@ -2,7 +2,8 @@ import { IconButtonComponent } from './icon-button.component';
 import { BaseButtonComponent } from './base-button.component';
 
 export default {
-  title: 'Basics / Component / With Inheritance',
+  // title: 'Basics / Component / With Inheritance',
+  component: IconButtonComponent,
 };
 
 export const IconButton = () => ({
diff --git a/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-about-parent.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-about-parent.stories.ts
index d11354fdbcd..e24e128d7b2 100644
--- a/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-about-parent.stories.ts
+++ b/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-about-parent.stories.ts
@@ -20,7 +20,7 @@ class SbButtonComponent {
 }
 
 export default {
-  title: 'Basics / Component / With ng-content / Button with different contents',
+  // title: 'Basics / Component / With ng-content / Button with different contents',
   // Implicitly declares the component to Angular
   // This will be the component described by the addon docs
   component: SbButtonComponent,
diff --git a/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-simple.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-simple.stories.ts
index 71a00a66ce7..4a6ccdd5d16 100644
--- a/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-simple.stories.ts
+++ b/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-simple.stories.ts
@@ -10,7 +10,7 @@ import type { Meta, StoryFn } from '@storybook/angular/';
 class WithNgContentComponent {}
 
 export default {
-  title: 'Basics / Component / With ng-content / Simple',
+  // title: 'Basics / Component / With ng-content / Simple',
   component: WithNgContentComponent,
 } as Meta;
 
diff --git a/code/frameworks/angular/template/stories/basics/component-with-ng-on-destroy/component-with-on-destroy.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-ng-on-destroy/component-with-on-destroy.stories.ts
index b3b571af399..1e5a1f39ef7 100644
--- a/code/frameworks/angular/template/stories/basics/component-with-ng-on-destroy/component-with-on-destroy.stories.ts
+++ b/code/frameworks/angular/template/stories/basics/component-with-ng-on-destroy/component-with-on-destroy.stories.ts
@@ -28,7 +28,7 @@ class OnDestroyComponent implements OnInit, OnDestroy {
 }
 
 export default {
-  title: 'Basics / Component / with ngOnDestroy',
+  // title: 'Basics / Component / with ngOnDestroy',
   component: OnDestroyComponent,
   parameters: {
     // disabled due to new Date()
diff --git a/code/frameworks/angular/template/stories/basics/component-with-on-push/on-push.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-on-push/on-push.stories.ts
index b39e3adb75c..6ad452797bc 100644
--- a/code/frameworks/angular/template/stories/basics/component-with-on-push/on-push.stories.ts
+++ b/code/frameworks/angular/template/stories/basics/component-with-on-push/on-push.stories.ts
@@ -2,7 +2,7 @@ import { Meta, StoryFn } from '@storybook/angular';
 import { OnPushBoxComponent } from './on-push-box.component';
 
 export default {
-  title: 'Basics / Component / With OnPush strategy',
+  // title: 'Basics / Component / With OnPush strategy',
   component: OnPushBoxComponent,
   argTypes: {
     word: { control: 'text' },
diff --git a/code/frameworks/angular/template/stories/basics/component-with-pipe/custom-pipes.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-pipe/custom-pipes.stories.ts
index 95602e0d780..cb15d4482dc 100644
--- a/code/frameworks/angular/template/stories/basics/component-with-pipe/custom-pipes.stories.ts
+++ b/code/frameworks/angular/template/stories/basics/component-with-pipe/custom-pipes.stories.ts
@@ -4,7 +4,7 @@ import { CustomPipePipe } from './custom.pipe';
 import { WithPipeComponent } from './with-pipe.component';
 
 export default {
-  title: 'Basics / Component / With Pipes',
+  // title: 'Basics / Component / With Pipes',
   component: WithPipeComponent,
   decorators: [
     moduleMetadata({
diff --git a/code/frameworks/angular/template/stories/basics/component-with-provider/di.component.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-provider/di.component.stories.ts
index 1c3bcc2407a..0478c7da583 100644
--- a/code/frameworks/angular/template/stories/basics/component-with-provider/di.component.stories.ts
+++ b/code/frameworks/angular/template/stories/basics/component-with-provider/di.component.stories.ts
@@ -2,7 +2,7 @@ import type { Args } from '@storybook/angular';
 import { DiComponent } from './di.component';
 
 export default {
-  title: 'Basics / Component / With Provider',
+  // title: 'Basics / Component / With Provider',
   component: DiComponent,
 };
 
diff --git a/code/frameworks/angular/template/stories/basics/component-with-style/styled.component.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-style/styled.component.stories.ts
index c986f00bec8..0818ff28cc6 100644
--- a/code/frameworks/angular/template/stories/basics/component-with-style/styled.component.stories.ts
+++ b/code/frameworks/angular/template/stories/basics/component-with-style/styled.component.stories.ts
@@ -1,7 +1,7 @@
 import { StyledComponent } from './styled.component';
 
 export default {
-  title: 'Basics / Component / With StyleUrls',
+  // title: 'Basics / Component / With StyleUrls',
   component: StyledComponent,
 };
 
diff --git a/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector-ng-component-outlet.stories.ts b/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector-ng-component-outlet.stories.ts
index acb5c89a24c..d6c83fd28e1 100644
--- a/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector-ng-component-outlet.stories.ts
+++ b/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector-ng-component-outlet.stories.ts
@@ -3,7 +3,7 @@ import { componentWrapperDecorator, moduleMetadata, StoryFn, Meta } from '@story
 import { WithoutSelectorComponent, WITHOUT_SELECTOR_DATA } from './without-selector.component';
 
 export default {
-  title: 'Basics / Component / without selector / Custom wrapper *NgComponentOutlet',
+  // title: 'Basics / Component / without selector / Custom wrapper *NgComponentOutlet',
   component: WithoutSelectorComponent,
   decorators: [
     moduleMetadata({
diff --git a/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector-ng-factory-resolver.stories.ts b/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector-ng-factory-resolver.stories.ts
index 0573a66fad5..682b4f0254e 100644
--- a/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector-ng-factory-resolver.stories.ts
+++ b/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector-ng-factory-resolver.stories.ts
@@ -12,7 +12,7 @@ import { componentWrapperDecorator, moduleMetadata, StoryFn, Meta } from '@story
 import { WithoutSelectorComponent } from './without-selector.component';
 
 export default {
-  title: 'Basics / Component / without selector / Custom wrapper ComponentFactoryResolver',
+  // title: 'Basics / Component / without selector / Custom wrapper ComponentFactoryResolver',
   component: WithoutSelectorComponent,
   decorators: [
     moduleMetadata({
diff --git a/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector.stories.ts b/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector.stories.ts
index 6d2f8b490a7..e74c76dde1e 100644
--- a/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector.stories.ts
+++ b/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector.stories.ts
@@ -2,7 +2,7 @@ import { moduleMetadata, StoryFn, Meta } from '@storybook/angular';
 import { WithoutSelectorComponent, WITHOUT_SELECTOR_DATA } from './without-selector.component';
 
 export default {
-  title: 'Basics / Component / without selector',
+  // title: 'Basics / Component / without selector',
   component: WithoutSelectorComponent,
   decorators: [
     moduleMetadata({
diff --git a/code/frameworks/angular/template/stories/basics/ng-module/import-module-for-root.stories.ts b/code/frameworks/angular/template/stories/basics/ng-module/import-module-for-root.stories.ts
index 835d295059d..3b8de245912 100644
--- a/code/frameworks/angular/template/stories/basics/ng-module/import-module-for-root.stories.ts
+++ b/code/frameworks/angular/template/stories/basics/ng-module/import-module-for-root.stories.ts
@@ -4,7 +4,7 @@ import { ChipsGroupComponent } from './angular-src/chips-group.component';
 import { CHIP_COLOR } from './angular-src/chip-color.token';
 
 export default {
-  title: 'Basics / NgModule / forRoot() pattern',
+  // title: 'Basics / NgModule / forRoot() pattern',
   component: ChipsGroupComponent,
   decorators: [
     moduleMetadata({
diff --git a/code/frameworks/angular/template/stories/basics/ng-module/import-module.stories.ts b/code/frameworks/angular/template/stories/basics/ng-module/import-module.stories.ts
index 3de0e32eb5b..d183ea4726e 100644
--- a/code/frameworks/angular/template/stories/basics/ng-module/import-module.stories.ts
+++ b/code/frameworks/angular/template/stories/basics/ng-module/import-module.stories.ts
@@ -4,7 +4,8 @@ import { ChipsGroupComponent } from './angular-src/chips-group.component';
 import { ChipComponent } from './angular-src/chip.component';
 
 export default {
-  title: 'Basics / NgModule / Module with multiple component',
+  // title: 'Basics / NgModule / Module with multiple component',
+  component: ChipsGroupComponent,
   decorators: [
     moduleMetadata({
       imports: [ChipsModule],
diff --git a/code/frameworks/angular/template/stories/core/README.stories.mdx b/code/frameworks/angular/template/stories/core/README.stories.mdx
index 8313b10a94f..15dbdc28262 100644
--- a/code/frameworks/angular/template/stories/core/README.stories.mdx
+++ b/code/frameworks/angular/template/stories/core/README.stories.mdx
@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/addon-docs';
 
-<Meta title="Core / Readme" />
+<Meta title="stories / frameworks / angular / core / README" />
 
 # Examples for Storybook native features
 
diff --git a/code/frameworks/angular/template/stories/core/decorators/componentWrapperDecorator/decorators.stories.ts b/code/frameworks/angular/template/stories/core/decorators/componentWrapperDecorator/decorators.stories.ts
index 14cd21b924a..12ae88e9a19 100644
--- a/code/frameworks/angular/template/stories/core/decorators/componentWrapperDecorator/decorators.stories.ts
+++ b/code/frameworks/angular/template/stories/core/decorators/componentWrapperDecorator/decorators.stories.ts
@@ -5,7 +5,7 @@ import ChildComponent from './child.component';
 import ParentComponent from './parent.component';
 
 export default {
-  title: 'Core / Decorators / ComponentWrapperDecorator',
+  // title: 'Core / Decorators / ComponentWrapperDecorator',
   component: ChildComponent,
   decorators: [
     componentWrapperDecorator(
diff --git a/code/frameworks/angular/template/stories/core/decorators/theme-decorator/decorators.stories.ts b/code/frameworks/angular/template/stories/core/decorators/theme-decorator/decorators.stories.ts
index 591bee3a59d..ee8e3ad31d3 100644
--- a/code/frameworks/angular/template/stories/core/decorators/theme-decorator/decorators.stories.ts
+++ b/code/frameworks/angular/template/stories/core/decorators/theme-decorator/decorators.stories.ts
@@ -1,7 +1,15 @@
 import { Args, componentWrapperDecorator, Meta } from '@storybook/angular';
 
+export const Base = (args: Args) => ({
+  template: 'Change theme with the brush in toolbar',
+  props: {
+    ...args,
+  },
+});
+
 export default {
-  title: 'Core / Decorators / Theme Decorators',
+  // title: 'Core / Decorators / Theme Decorators',
+  component: Base,
   decorators: [
     componentWrapperDecorator(
       (story) => `<div [class]="myTheme">${story}</div>`,
@@ -10,10 +18,3 @@ export default {
     ),
   ],
 } as Meta;
-
-export const Base = (args: Args) => ({
-  template: 'Change theme with the brush in toolbar',
-  props: {
-    ...args,
-  },
-});
diff --git a/code/frameworks/angular/template/stories/core/moduleMetadata/in-export-default.stories.ts b/code/frameworks/angular/template/stories/core/moduleMetadata/in-export-default.stories.ts
index ad05fd12f07..8d4d6f174e1 100644
--- a/code/frameworks/angular/template/stories/core/moduleMetadata/in-export-default.stories.ts
+++ b/code/frameworks/angular/template/stories/core/moduleMetadata/in-export-default.stories.ts
@@ -1,8 +1,24 @@
 import { moduleMetadata, StoryFn, Meta } from '@storybook/angular';
 import { TokenComponent, ITEMS, DEFAULT_NAME } from './angular-src/token.component';
 
+export const Story1: StoryFn = () => ({
+  template: `<storybook-simple-token-component [name]="name"></storybook-simple-token-component>`,
+  props: {
+    name: 'Prop Name',
+  },
+});
+
+Story1.storyName = 'Story 1';
+
+export const Story2: StoryFn = () => ({
+  template: `<storybook-simple-token-component></storybook-simple-token-component>`,
+});
+
+Story2.storyName = 'Story 2';
+
 export default {
-  title: 'Core / ModuleMetadata / In export default with decorator',
+  // title: 'Core / ModuleMetadata / In export default with decorator',
+  component: Story1,
   decorators: [
     moduleMetadata({
       imports: [],
@@ -20,18 +36,3 @@ export default {
     }),
   ],
 } as Meta;
-
-export const Story1: StoryFn = () => ({
-  template: `<storybook-simple-token-component [name]="name"></storybook-simple-token-component>`,
-  props: {
-    name: 'Prop Name',
-  },
-});
-
-Story1.storyName = 'Story 1';
-
-export const Story2: StoryFn = () => ({
-  template: `<storybook-simple-token-component></storybook-simple-token-component>`,
-});
-
-Story2.storyName = 'Story 2';
diff --git a/code/frameworks/angular/template/stories/core/moduleMetadata/in-stories.stories.ts b/code/frameworks/angular/template/stories/core/moduleMetadata/in-stories.stories.ts
index 22bb6a8c4ba..53a21feff3c 100644
--- a/code/frameworks/angular/template/stories/core/moduleMetadata/in-stories.stories.ts
+++ b/code/frameworks/angular/template/stories/core/moduleMetadata/in-stories.stories.ts
@@ -1,10 +1,6 @@
 import type { Meta, StoryFn } from '@storybook/angular';
 import { TokenComponent, ITEMS, DEFAULT_NAME } from './angular-src/token.component';
 
-export default {
-  title: 'Core / ModuleMetadata / In stories',
-} as Meta;
-
 export const Individual1: StoryFn = () => ({
   template: `<storybook-simple-token-component [name]="name"></storybook-simple-token-component>`,
   props: {
@@ -43,3 +39,8 @@ export const Individual2: StoryFn = () => ({
 });
 
 Individual2.storyName = 'Individual 2';
+
+export default {
+  // title: 'Core / ModuleMetadata / In stories',
+  component: Individual1,
+} as Meta;
diff --git a/code/frameworks/angular/template/stories/core/moduleMetadata/merge-default-and-story.stories.ts b/code/frameworks/angular/template/stories/core/moduleMetadata/merge-default-and-story.stories.ts
index 81fe1018180..0a1c52eec84 100644
--- a/code/frameworks/angular/template/stories/core/moduleMetadata/merge-default-and-story.stories.ts
+++ b/code/frameworks/angular/template/stories/core/moduleMetadata/merge-default-and-story.stories.ts
@@ -2,8 +2,21 @@ import { moduleMetadata, Meta, StoryFn } from '@storybook/angular';
 import { TokenComponent, ITEMS, DEFAULT_NAME } from './angular-src/token.component';
 import { CustomPipePipe } from './angular-src/custom.pipe';
 
+export const MergeWithDefaultModuleMetadata: StoryFn = () => ({
+  template: `<storybook-simple-token-component [name]="name | customPipe"></storybook-simple-token-component>`,
+  props: {
+    name: 'Prop Name',
+  },
+  moduleMetadata: {
+    declarations: [CustomPipePipe],
+    providers: [],
+  },
+});
+MergeWithDefaultModuleMetadata.storyName = 'Merge with default ModuleMetadata';
+
 export default {
-  title: 'Core / ModuleMetadata / Merge default and story',
+  // title: 'Core / ModuleMetadata / Merge default and story',
+  component: MergeWithDefaultModuleMetadata,
   decorators: [
     moduleMetadata({
       declarations: [TokenComponent],
@@ -20,15 +33,3 @@ export default {
     }),
   ],
 } as Meta;
-
-export const MergeWithDefaultModuleMetadata: StoryFn = () => ({
-  template: `<storybook-simple-token-component [name]="name | customPipe"></storybook-simple-token-component>`,
-  props: {
-    name: 'Prop Name',
-  },
-  moduleMetadata: {
-    declarations: [CustomPipePipe],
-    providers: [],
-  },
-});
-MergeWithDefaultModuleMetadata.storyName = 'Merge with default ModuleMetadata';
diff --git a/code/frameworks/angular/template/stories/core/parameters/bootstrap-options.stories.ts b/code/frameworks/angular/template/stories/core/parameters/bootstrap-options.stories.ts
index dfe3115f995..8a79b7d95eb 100644
--- a/code/frameworks/angular/template/stories/core/parameters/bootstrap-options.stories.ts
+++ b/code/frameworks/angular/template/stories/core/parameters/bootstrap-options.stories.ts
@@ -10,13 +10,13 @@ import { Component } from '@angular/core';
 class ComponentWithWhitespace {}
 
 export default {
-  title: 'Core / Parameters / With Bootstrap Options',
+  // title: 'Core / Parameters / With Bootstrap Options',
+  component: ComponentWithWhitespace,
   parameters: {
     bootstrapOptions: {
       preserveWhitespaces: true,
     },
   },
-  component: ComponentWithWhitespace,
 } as Meta;
 
 export const WithPreserveWhitespaces: StoryFn = (_args) => ({});
diff --git a/code/frameworks/angular/template/stories/core/styles/story-styles.stories.ts b/code/frameworks/angular/template/stories/core/styles/story-styles.stories.ts
index b5aa89a9277..c38a23d6c3a 100644
--- a/code/frameworks/angular/template/stories/core/styles/story-styles.stories.ts
+++ b/code/frameworks/angular/template/stories/core/styles/story-styles.stories.ts
@@ -1,15 +1,6 @@
 import { Meta, moduleMetadata, StoryFn } from '@storybook/angular';
 import Button from '../../button.component';
 
-export default {
-  title: 'Core / Story host styles',
-  decorators: [
-    moduleMetadata({
-      declarations: [Button],
-    }),
-  ],
-} as Meta;
-
 export const TemplateStory: StoryFn = () => ({
   template: `<storybook-button-component [text]="text" (onClick)="onClick($event)"></storybook-button-component>`,
   props: {
@@ -47,3 +38,13 @@ WithArgsStory.argTypes = {
 WithArgsStory.args = {
   text: 'Button with custom styles',
 };
+
+export default {
+  // title: 'Core / Story host styles',
+  component: TemplateStory,
+  decorators: [
+    moduleMetadata({
+      declarations: [Button],
+    }),
+  ],
+} as Meta;
diff --git a/code/frameworks/angular/template/stories/legacy/README.stories.mdx b/code/frameworks/angular/template/stories/legacy/README.stories.mdx
index f1a838261ae..792f95a4a86 100644
--- a/code/frameworks/angular/template/stories/legacy/README.stories.mdx
+++ b/code/frameworks/angular/template/stories/legacy/README.stories.mdx
@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/addon-docs';
 
-<Meta title="Legacy / Readme" />
+<Meta title="stories / frameworks / angular / legacy / README" />
 
 # Legacy examples
 
diff --git a/code/frameworks/angular/template/stories/legacy/component-in-story.stories.ts b/code/frameworks/angular/template/stories/legacy/component-in-story.stories.ts
index abea9a80495..58df68b4618 100644
--- a/code/frameworks/angular/template/stories/legacy/component-in-story.stories.ts
+++ b/code/frameworks/angular/template/stories/legacy/component-in-story.stories.ts
@@ -1,10 +1,6 @@
 import type { Meta, StoryFn } from '@storybook/angular';
 import Button from '../button.component';
 
-export default {
-  title: 'Legacy / Component in Story',
-} as Meta;
-
 export const Basic: StoryFn = (args) => ({
   component: Button,
   props: args,
@@ -12,3 +8,8 @@ export const Basic: StoryFn = (args) => ({
 Basic.args = {
   text: 'Hello Button',
 };
+
+export default {
+  // title: 'Legacy / Component in Story',
+  component: Basic,
+} as Meta;
diff --git a/code/frameworks/angular/template/stories/others/issues/12009-unknown-component.stories.ts b/code/frameworks/angular/template/stories/others/issues/12009-unknown-component.stories.ts
index cf60b13e18f..341107732a9 100644
--- a/code/frameworks/angular/template/stories/others/issues/12009-unknown-component.stories.ts
+++ b/code/frameworks/angular/template/stories/others/issues/12009-unknown-component.stories.ts
@@ -2,7 +2,7 @@ import type { Meta, StoryFn } from '@storybook/angular';
 import Button from '../../button.component';
 
 export default {
-  title: 'Others / Issues / 12009 unknown component',
+  // title: 'Others / Issues / 12009 unknown component',
   component: Button,
 } as Meta;
 
diff --git a/code/frameworks/angular/template/stories/others/ngx-translate/README.stories.mdx b/code/frameworks/angular/template/stories/others/ngx-translate/README.stories.mdx
index 12abda943c4..32d1cfcd3b7 100644
--- a/code/frameworks/angular/template/stories/others/ngx-translate/README.stories.mdx
+++ b/code/frameworks/angular/template/stories/others/ngx-translate/README.stories.mdx
@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/addon-docs';
 
-<Meta title="Others / ngx-translate / Readme" />
+<Meta title="stories / frameworks / angular / others / ngx-translate" />
 
 # [ngx-translate](https://github.com/ngx-translate/core)
 

From 7e66592949889ea64d29e8e2db2edc62719943bf Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@chromatic.com>
Date: Sun, 18 Sep 2022 13:28:09 +1000
Subject: [PATCH 14/47] We don't have to have an argtype for every arg

---
 code/frameworks/angular/src/client/decorateStory.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/frameworks/angular/src/client/decorateStory.ts b/code/frameworks/angular/src/client/decorateStory.ts
index 21f38704b64..39237c2b2fb 100644
--- a/code/frameworks/angular/src/client/decorateStory.ts
+++ b/code/frameworks/angular/src/client/decorateStory.ts
@@ -61,7 +61,7 @@ const cleanArgsDecorator: DecoratorFunction<AngularFramework> = (storyFn, contex
     const argType = context.argTypes[key];
 
     // Only keeps args with a control or an action in argTypes
-    if (argType.action || argType.control) {
+    if (argType?.action || argType?.control) {
       return { ...obj, [key]: arg };
     }
     return obj;

From 1e39b02c1001d2e527d74558f6298267e3d6ec38 Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@chromatic.com>
Date: Thu, 6 Oct 2022 15:22:32 +1100
Subject: [PATCH 15/47] Sort out other sandboxes

---
 code/lib/cli/src/repro-templates.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/code/lib/cli/src/repro-templates.ts b/code/lib/cli/src/repro-templates.ts
index 2cb683f70fa..62967f3afe9 100644
--- a/code/lib/cli/src/repro-templates.ts
+++ b/code/lib/cli/src/repro-templates.ts
@@ -145,6 +145,7 @@ const angularCliTemplates = {
     expected: {
       framework: '@storybook/angular',
       renderer: '@storybook/angular',
+      builder: '@storybook/builder-webpack5',
     },
   },
 };

From 07a0f39cbc28ff16c75b30ebcde2fa35403be069 Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@chromatic.com>
Date: Thu, 6 Oct 2022 16:39:34 +1100
Subject: [PATCH 16/47] Drop fixed test runner version and use index.json

---
 scripts/tasks/test-runner.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/scripts/tasks/test-runner.ts b/scripts/tasks/test-runner.ts
index a2ce46a50f0..416f7141725 100644
--- a/scripts/tasks/test-runner.ts
+++ b/scripts/tasks/test-runner.ts
@@ -14,11 +14,11 @@ export const testRunner: Task = {
 
     // We could split this out into a separate task if it became annoying
     const publishController = await servePackages({});
-    await exec(`yarn add --dev @storybook/test-runner@0.7.1-next.0`, execOptions);
+    await exec(`yarn add --dev @storybook/test-runner`, execOptions);
 
     const storybookController = await serveSandbox(builtSandboxDir, {});
 
-    await exec(`yarn test-storybook --url http://localhost:8001 --junit`, {
+    await exec(`yarn test-storybook --url http://localhost:8001 --junit --index-json`, {
       ...execOptions,
       env: {
         JEST_JUNIT_OUTPUT_FILE: junitFilename,

From 2529fa7ef72fa86f4b0901ee7d07d3568f903cf5 Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@chromatic.com>
Date: Fri, 7 Oct 2022 16:32:43 +1100
Subject: [PATCH 17/47] Move angular docs stories to framework

---
 .../doc-button/doc-button.component.html      |   7 +
 .../doc-button/doc-button.component.scss      |   3 +
 .../doc-button/doc-button.component.ts        | 233 ++++++++++++++++++
 .../argTypes/doc-button/doc-button.stories.ts |  24 ++
 .../doc-directive/doc-directive.directive.ts  |  25 ++
 .../doc-directive/doc-directive.stories.ts    |  14 ++
 .../doc-injectable/doc-injectable.service.ts  |  27 ++
 .../doc-injectable/doc-injectable.stories.ts  |  17 ++
 .../argTypes/doc-pipe/doc-pipe.pipe.ts        |  18 ++
 .../argTypes/doc-pipe/doc-pipe.stories.ts     |  17 ++
 10 files changed, 385 insertions(+)
 create mode 100644 code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.component.html
 create mode 100644 code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.component.scss
 create mode 100644 code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.component.ts
 create mode 100644 code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.stories.ts
 create mode 100644 code/frameworks/angular/template/stories/argTypes/doc-directive/doc-directive.directive.ts
 create mode 100644 code/frameworks/angular/template/stories/argTypes/doc-directive/doc-directive.stories.ts
 create mode 100644 code/frameworks/angular/template/stories/argTypes/doc-injectable/doc-injectable.service.ts
 create mode 100644 code/frameworks/angular/template/stories/argTypes/doc-injectable/doc-injectable.stories.ts
 create mode 100644 code/frameworks/angular/template/stories/argTypes/doc-pipe/doc-pipe.pipe.ts
 create mode 100644 code/frameworks/angular/template/stories/argTypes/doc-pipe/doc-pipe.stories.ts

diff --git a/code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.component.html b/code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.component.html
new file mode 100644
index 00000000000..7af61d6f344
--- /dev/null
+++ b/code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.component.html
@@ -0,0 +1,7 @@
+<button [disabled]="isDisabled" [ngClass]="classes" #buttonRef>
+  <img
+    width="100"
+    src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo="
+  />
+  {{ label }}
+</button>
diff --git a/code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.component.scss b/code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.component.scss
new file mode 100644
index 00000000000..52c3e2bf0e2
--- /dev/null
+++ b/code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.component.scss
@@ -0,0 +1,3 @@
+.btn-primary {
+  background-color: #ff9899;
+}
diff --git a/code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.component.ts b/code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.component.ts
new file mode 100644
index 00000000000..51d8ba0c8d2
--- /dev/null
+++ b/code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.component.ts
@@ -0,0 +1,233 @@
+/* eslint-disable no-console */
+/* eslint-disable no-underscore-dangle */
+import {
+  Component,
+  ElementRef,
+  EventEmitter,
+  HostBinding,
+  HostListener,
+  Input,
+  Output,
+  ViewChild,
+} from '@angular/core';
+
+export const exportedConstant = 'An exported constant';
+
+export type ButtonSize = 'small' | 'medium' | 'large' | 'xlarge';
+
+export interface ISomeInterface {
+  one: string;
+  two: boolean;
+  three: any[];
+}
+
+export enum ButtonAccent {
+  'Normal' = 'Normal',
+  'High' = 'High',
+}
+
+/**
+ * This is a simple button that demonstrates various JSDoc handling in Storybook Docs for Angular.
+ *
+ * It supports [markdown](https://en.wikipedia.org/wiki/Markdown), so you can embed formatted text,
+ * like **bold**, _italic_, and `inline code`.
+ *
+ * > How you like dem apples?! It's never been easier to document all your components.
+ *
+ * @string Hello world
+ * @link [Example](http://example.com)
+ * @code `ThingThing`
+ * @html <span class="badge">aaa</span>
+ */
+@Component({
+  selector: 'my-button',
+  templateUrl: './doc-button.component.html',
+  styleUrls: ['./doc-button.component.scss'],
+})
+export class DocButtonComponent<T> {
+  @ViewChild('buttonRef', { static: false }) buttonRef!: ElementRef;
+
+  /** Test default value. */
+  @Input()
+  public theDefaultValue = 'Default value in component';
+
+  /**
+   * Setting default value here because compodoc won't get the default value for accessors
+   * @default Another default value
+   * */
+  @Input()
+  get anotherDefaultValue() {
+    return this._anotherDefaultValue;
+  }
+
+  set anotherDefaultValue(v: string) {
+    this._anotherDefaultValue = v;
+  }
+
+  _anotherDefaultValue = 'Another default value';
+
+  /** Test null default value. */
+  @Input()
+  public aNullValue = null;
+
+  /** Test null default value. */
+  @Input()
+  // @ts-expect-error intentionally undefined
+  public anUndefinedValue;
+
+  /** Test numeric default value. */
+  @Input()
+  public aNumericValue = 123;
+
+  /** Appearance style of the button. */
+  @Input()
+  public appearance: 'primary' | 'secondary' = 'secondary';
+
+  /** Sets the button to a disabled state. */
+  @Input()
+  public isDisabled = false;
+
+  /** Specify the accent-type of the button */
+  @Input()
+  public accent: ButtonAccent = ButtonAccent.Normal;
+
+  /** Specifies some arbitrary object. This comment is to test certain chars like apostrophes - it's working */
+  @Input() public someDataObject!: ISomeInterface;
+
+  /**
+   * The inner text of the button.
+   *
+   * @required
+   */
+  @Input()
+  public label!: string;
+
+  /** Size of the button. */
+  @Input()
+  public size?: ButtonSize = 'medium';
+
+  /**
+   * Some input you shouldn't use.
+   *
+   * @deprecated
+   */
+  @Input()
+  public somethingYouShouldNotUse = false;
+
+  /**
+   * Handler to be called when the button is clicked by a user.
+   *
+   * Will also block the emission of the event if `isDisabled` is true.
+   */
+  @Output()
+  public onClick = new EventEmitter<Event>();
+
+  /**
+   * This is an internal method that we don't want to document and have added the `ignore` annotation to.
+   *
+   * @ignore
+   */
+  public handleClick(event: Event) {
+    event.stopPropagation();
+
+    if (!this.isDisabled) {
+      this.onClick.emit(event);
+    }
+  }
+
+  private _inputValue = 'some value';
+
+  /** Setter for `inputValue` that is also an `@Input`. */
+  @Input()
+  public set inputValue(value: string) {
+    this._inputValue = value;
+  }
+
+  /** Getter for `inputValue`. */
+  public get inputValue() {
+    return this._inputValue;
+  }
+
+  @HostListener('click', ['$event'])
+  onClickListener(event: Event) {
+    console.log('button', event.target);
+    this.handleClick(event);
+  }
+
+  @HostBinding('class.focused') focus = false;
+
+  /**
+   * Returns all the CSS classes for the button.
+   *
+   * @ignore
+   */
+  public get classes(): string[] {
+    return [this.appearance, this.size]
+      .filter((_class) => !!_class)
+      .map((_class) => `btn-${_class}`);
+  }
+
+  /**
+   * @ignore
+   */
+  public ignoredProperty = 'Ignore me';
+
+  /** Public value. */
+  public internalProperty = 'Public hello';
+
+  /** Private value. */
+  private _value = 'Private hello';
+
+  /** Set the private value. */
+  public set value(value: string | number) {
+    this._value = `${value}`;
+  }
+
+  /** Get the private value. */
+  public get value(): string | number {
+    return this._value;
+  }
+
+  /**
+   * An internal calculation method which adds `x` and `y` together.
+   *
+   * @param x Some number you'd like to use.
+   * @param y Some other number or string you'd like to use, will have `parseInt()` applied before calculation.
+   */
+  public calc(x: number, y: string | number): number {
+    return x + parseInt(`${y}`, 10);
+  }
+
+  /** A public method using an interface. */
+  public publicMethod(things: ISomeInterface) {
+    console.log(things);
+  }
+
+  /**
+   * A protected method.
+   *
+   * @param id Some `id`.
+   */
+  protected protectedMethod(id?: number) {
+    console.log(id);
+  }
+
+  /**
+   * A private method.
+   *
+   * @param password Some `password`.
+   */
+  private privateMethod(password: string) {
+    console.log(password);
+  }
+
+  @Input('showKeyAlias')
+  public showKey!: keyof T;
+
+  @Input()
+  public set item(item: T[]) {
+    this.processedItem = item;
+  }
+
+  public processedItem!: T[];
+}
diff --git a/code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.stories.ts b/code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.stories.ts
new file mode 100644
index 00000000000..d23f3896359
--- /dev/null
+++ b/code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.stories.ts
@@ -0,0 +1,24 @@
+import { Args } from '@storybook/angular';
+import { DocButtonComponent } from './doc-button.component';
+
+export default {
+  component: DocButtonComponent,
+};
+
+export const Basic = (args: Args) => ({
+  props: args,
+});
+Basic.args = { label: 'Args test', isDisabled: false };
+Basic.ArgTypes = {
+  theDefaultValue: {
+    table: {
+      defaultValue: { summary: 'Basic default value' },
+    },
+  },
+};
+
+export const WithTemplate = (args: Args) => ({
+  props: args,
+  template: '<my-button [label]="label" [appearance]="appearance"></my-button>',
+});
+WithTemplate.args = { label: 'Template test', appearance: 'primary' };
diff --git a/code/frameworks/angular/template/stories/argTypes/doc-directive/doc-directive.directive.ts b/code/frameworks/angular/template/stories/argTypes/doc-directive/doc-directive.directive.ts
new file mode 100644
index 00000000000..bcb039c9d9f
--- /dev/null
+++ b/code/frameworks/angular/template/stories/argTypes/doc-directive/doc-directive.directive.ts
@@ -0,0 +1,25 @@
+/* eslint-disable no-useless-constructor */
+import { Directive, ElementRef, AfterViewInit, Input } from '@angular/core';
+
+/**
+ * This is an Angular Directive
+ * example that has a Prop Table.
+ */
+@Directive({
+  selector: '[docDirective]',
+})
+export class DocDirective implements AfterViewInit {
+  constructor(private ref: ElementRef) {}
+
+  /**
+   * Will apply gray background color
+   * if set to true.
+   */
+  @Input() hasGrayBackground = false;
+
+  ngAfterViewInit(): void {
+    if (this.hasGrayBackground) {
+      this.ref.nativeElement.style = 'background-color: lightgray';
+    }
+  }
+}
diff --git a/code/frameworks/angular/template/stories/argTypes/doc-directive/doc-directive.stories.ts b/code/frameworks/angular/template/stories/argTypes/doc-directive/doc-directive.stories.ts
new file mode 100644
index 00000000000..b734b93bf40
--- /dev/null
+++ b/code/frameworks/angular/template/stories/argTypes/doc-directive/doc-directive.stories.ts
@@ -0,0 +1,14 @@
+import { DocDirective } from './doc-directive.directive';
+
+export default {
+  component: DocDirective,
+};
+
+const modules = {
+  declarations: [DocDirective],
+};
+
+export const Basic = () => ({
+  moduleMetadata: modules,
+  template: '<div docDirective [hasGrayBackground]="true"><h1>DocDirective</h1></div>',
+});
diff --git a/code/frameworks/angular/template/stories/argTypes/doc-injectable/doc-injectable.service.ts b/code/frameworks/angular/template/stories/argTypes/doc-injectable/doc-injectable.service.ts
new file mode 100644
index 00000000000..b6ad136fec3
--- /dev/null
+++ b/code/frameworks/angular/template/stories/argTypes/doc-injectable/doc-injectable.service.ts
@@ -0,0 +1,27 @@
+import { Injectable } from '@angular/core';
+import { HttpHeaders } from '@angular/common/http';
+
+/**
+ * This is an Angular Injectable
+ * example that has a Prop Table.
+ */
+@Injectable({
+  providedIn: 'root',
+})
+export class DocInjectableService {
+  /**
+   * Auth headers to use.
+   */
+  auth: any;
+
+  constructor() {
+    this.auth = new HttpHeaders({ 'Content-Type': 'application/json' });
+  }
+
+  /**
+   * Get posts from Backend.
+   */
+  getPosts() {
+    return [];
+  }
+}
diff --git a/code/frameworks/angular/template/stories/argTypes/doc-injectable/doc-injectable.stories.ts b/code/frameworks/angular/template/stories/argTypes/doc-injectable/doc-injectable.stories.ts
new file mode 100644
index 00000000000..d662a3de255
--- /dev/null
+++ b/code/frameworks/angular/template/stories/argTypes/doc-injectable/doc-injectable.stories.ts
@@ -0,0 +1,17 @@
+import { DocInjectableService } from './doc-injectable.service';
+
+export default {
+  component: DocInjectableService,
+  parameters: {
+    controls: { hideNoControlsWarning: true },
+  },
+};
+
+const modules = {
+  provider: [DocInjectableService],
+};
+
+export const Basic = () => ({
+  moduleMetadata: modules,
+  template: '<div><h1>DocInjectable</h1></div>',
+});
diff --git a/code/frameworks/angular/template/stories/argTypes/doc-pipe/doc-pipe.pipe.ts b/code/frameworks/angular/template/stories/argTypes/doc-pipe/doc-pipe.pipe.ts
new file mode 100644
index 00000000000..6b7aca418a3
--- /dev/null
+++ b/code/frameworks/angular/template/stories/argTypes/doc-pipe/doc-pipe.pipe.ts
@@ -0,0 +1,18 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+/**
+ * This is an Angular Pipe
+ * example that has a Prop Table.
+ */
+@Pipe({
+  name: 'docPipe',
+})
+export class DocPipe implements PipeTransform {
+  /**
+   * Transforms a string into uppercase.
+   * @param value string
+   */
+  transform(value: string): string {
+    return value?.toUpperCase();
+  }
+}
diff --git a/code/frameworks/angular/template/stories/argTypes/doc-pipe/doc-pipe.stories.ts b/code/frameworks/angular/template/stories/argTypes/doc-pipe/doc-pipe.stories.ts
new file mode 100644
index 00000000000..ba6f0f282f6
--- /dev/null
+++ b/code/frameworks/angular/template/stories/argTypes/doc-pipe/doc-pipe.stories.ts
@@ -0,0 +1,17 @@
+import { DocPipe } from './doc-pipe.pipe';
+
+export default {
+  component: DocPipe,
+  parameters: {
+    controls: { hideNoControlsWarning: true },
+  },
+};
+
+const modules = {
+  declarations: [DocPipe],
+};
+
+export const Basic = () => ({
+  moduleMetadata: modules,
+  template: `<div><h1>{{ 'DocPipe' | docPipe }}</h1></div>`,
+});

From 6343f99da87564302562ed4a9e26c5208702693b Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@chromatic.com>
Date: Fri, 7 Oct 2022 16:32:53 +1100
Subject: [PATCH 18/47] Remove snapshots

---
 .../custom-cva-component.stories.storyshot    |  15 --
 ...tiple-selector.component.stories.storyshot |  57 -----
 .../enums.component.stories.storyshot         |  35 ---
 .../inheritance.stories.storyshot             |  26 ---
 .../ng-content-about-parent.stories.storyshot |  74 ------
 .../ng-content-simple.stories.storyshot       |  42 ----
 .../__snapshots__/on-push.stories.storyshot   |  13 --
 .../custom-pipes.stories.storyshot            |  25 --
 .../di.component.stories.storyshot            |  59 -----
 .../styled.component.stories.storyshot        |  25 --
 ...ctor-ng-component-outlet.stories.storyshot |  23 --
 ...ctor-ng-factory-resolver.stories.storyshot |  17 --
 .../without-selector.stories.storyshot        |  27 ---
 .../import-module-for-root.stories.storyshot  | 113 ----------
 .../import-module.stories.storyshot           |  81 -------
 .../decorators.stories.storyshot              | 213 ------------------
 .../decorators.stories.storyshot              |  11 -
 .../in-export-default.stories.storyshot       |  47 ----
 .../in-stories.stories.storyshot              |  47 ----
 .../merge-default-and-story.stories.storyshot |  25 --
 .../all-parameters.stories.storyshot          |  34 ---
 .../bootstrap-options.stories.storyshot       |  13 --
 .../layout.parameters.stories.storyshot       |  67 ------
 .../story-styles.stories.storyshot            |  27 ---
 .../component-in-story.stories.storyshot      |  13 --
 .../12009-unknown-component.stories.storyshot |  13 --
 26 files changed, 1142 deletions(-)
 delete mode 100644 code/frameworks/angular/template/stories/basics/angular-forms/customControlValueAccessor/__snapshots__/custom-cva-component.stories.storyshot
 delete mode 100644 code/frameworks/angular/template/stories/basics/component-with-complex-selectors/__snapshots__/multiple-selector.component.stories.storyshot
 delete mode 100644 code/frameworks/angular/template/stories/basics/component-with-enums/__snapshots__/enums.component.stories.storyshot
 delete mode 100644 code/frameworks/angular/template/stories/basics/component-with-inheritance/__snapshots__/inheritance.stories.storyshot
 delete mode 100644 code/frameworks/angular/template/stories/basics/component-with-ng-content/__snapshots__/ng-content-about-parent.stories.storyshot
 delete mode 100644 code/frameworks/angular/template/stories/basics/component-with-ng-content/__snapshots__/ng-content-simple.stories.storyshot
 delete mode 100644 code/frameworks/angular/template/stories/basics/component-with-on-push/__snapshots__/on-push.stories.storyshot
 delete mode 100644 code/frameworks/angular/template/stories/basics/component-with-pipe/__snapshots__/custom-pipes.stories.storyshot
 delete mode 100644 code/frameworks/angular/template/stories/basics/component-with-provider/__snapshots__/di.component.stories.storyshot
 delete mode 100644 code/frameworks/angular/template/stories/basics/component-with-style/__snapshots__/styled.component.stories.storyshot
 delete mode 100644 code/frameworks/angular/template/stories/basics/component-without-selector/__snapshots__/without-selector-ng-component-outlet.stories.storyshot
 delete mode 100644 code/frameworks/angular/template/stories/basics/component-without-selector/__snapshots__/without-selector-ng-factory-resolver.stories.storyshot
 delete mode 100644 code/frameworks/angular/template/stories/basics/component-without-selector/__snapshots__/without-selector.stories.storyshot
 delete mode 100644 code/frameworks/angular/template/stories/basics/ng-module/__snapshots__/import-module-for-root.stories.storyshot
 delete mode 100644 code/frameworks/angular/template/stories/basics/ng-module/__snapshots__/import-module.stories.storyshot
 delete mode 100644 code/frameworks/angular/template/stories/core/decorators/componentWrapperDecorator/__snapshots__/decorators.stories.storyshot
 delete mode 100644 code/frameworks/angular/template/stories/core/decorators/theme-decorator/__snapshots__/decorators.stories.storyshot
 delete mode 100644 code/frameworks/angular/template/stories/core/moduleMetadata/__snapshots__/in-export-default.stories.storyshot
 delete mode 100644 code/frameworks/angular/template/stories/core/moduleMetadata/__snapshots__/in-stories.stories.storyshot
 delete mode 100644 code/frameworks/angular/template/stories/core/moduleMetadata/__snapshots__/merge-default-and-story.stories.storyshot
 delete mode 100644 code/frameworks/angular/template/stories/core/parameters/__snapshots__/all-parameters.stories.storyshot
 delete mode 100644 code/frameworks/angular/template/stories/core/parameters/__snapshots__/bootstrap-options.stories.storyshot
 delete mode 100644 code/frameworks/angular/template/stories/core/parameters/__snapshots__/layout.parameters.stories.storyshot
 delete mode 100644 code/frameworks/angular/template/stories/core/styles/__snapshots__/story-styles.stories.storyshot
 delete mode 100644 code/frameworks/angular/template/stories/legacy/__snapshots__/component-in-story.stories.storyshot
 delete mode 100644 code/frameworks/angular/template/stories/others/issues/__snapshots__/12009-unknown-component.stories.storyshot

diff --git a/code/frameworks/angular/template/stories/basics/angular-forms/customControlValueAccessor/__snapshots__/custom-cva-component.stories.storyshot b/code/frameworks/angular/template/stories/basics/angular-forms/customControlValueAccessor/__snapshots__/custom-cva-component.stories.storyshot
deleted file mode 100644
index 5f4b1dfb13a..00000000000
--- a/code/frameworks/angular/template/stories/basics/angular-forms/customControlValueAccessor/__snapshots__/custom-cva-component.stories.storyshot
+++ /dev/null
@@ -1,15 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Basics / Angular forms / ControlValueAccessor Simple input 1`] = `
-<storybook-wrapper>
-  <storybook-custom-cva-component>
-    <div>
-      
-    </div>
-    <input
-      class="ng-untouched ng-pristine ng-valid"
-      type="text"
-    />
-  </storybook-custom-cva-component>
-</storybook-wrapper>
-`;
diff --git a/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/__snapshots__/multiple-selector.component.stories.storyshot b/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/__snapshots__/multiple-selector.component.stories.storyshot
deleted file mode 100644
index 460e52d629c..00000000000
--- a/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/__snapshots__/multiple-selector.component.stories.storyshot
+++ /dev/null
@@ -1,57 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Basics / Component / With Complex Selectors attribute selectors 1`] = `
-<storybook-wrapper>
-  <storybook-attribute-selector
-    foo="bar"
-  >
-    <h3>
-      Attribute selector
-    </h3>
-     Selector: storybook-attribute-selector[foo="bar"] 
-    <br />
-     Generated template: &lt;storybook-attribute-selector foo="bar"&gt;&lt;/storybook-attribute-selector&gt;
-  </storybook-attribute-selector>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Basics / Component / With Complex Selectors class selectors 1`] = `
-<storybook-wrapper>
-  <storybook-class-selector
-    class="foo"
-  >
-    <h3>
-      Class selector
-    </h3>
-     Selector: storybook-class-selector.foo,storybook-class-selector.bar 
-    <br />
-     Generated template: &lt;storybook-class-selector class="foo"&gt;&lt;/storybook-class-selector&gt;
-  </storybook-class-selector>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Basics / Component / With Complex Selectors multiple class selectors 1`] = `
-<storybook-wrapper>
-  <storybook-button>
-    <h3>
-      Multiple selector
-    </h3>
-     Selector: storybook-button,button[foo],[foo].button,button[baz] 
-    <br />
-     Generated template: &lt;storybook-button&gt;&lt;/storybook-button&gt;
-  </storybook-button>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Basics / Component / With Complex Selectors multiple selectors 1`] = `
-<storybook-wrapper>
-  <storybook-multiple-selector>
-    <h3>
-      Multiple selector
-    </h3>
-     Selector: storybook-button,button[foo],[foo].button,button[baz] 
-    <br />
-     Generated template: &lt;storybook-multiple-selector&gt;&lt;/storybook-multiple-selector&gt;
-  </storybook-multiple-selector>
-</storybook-wrapper>
-`;
diff --git a/code/frameworks/angular/template/stories/basics/component-with-enums/__snapshots__/enums.component.stories.storyshot b/code/frameworks/angular/template/stories/basics/component-with-enums/__snapshots__/enums.component.stories.storyshot
deleted file mode 100644
index aaf435fc730..00000000000
--- a/code/frameworks/angular/template/stories/basics/component-with-enums/__snapshots__/enums.component.stories.storyshot
+++ /dev/null
@@ -1,35 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Basics / Component / With Enum Types Basic 1`] = `
-<storybook-wrapper>
-  <app-enums
-    ng-reflect-aliased-union-type="Type Alias 1"
-    ng-reflect-enum-alias="0"
-    ng-reflect-enum-numeric="0"
-    ng-reflect-enum-numeric-initial="1"
-    ng-reflect-enum-strings="PRIMARY"
-    ng-reflect-union-type="union a"
-  >
-    <div>
-      <div>
-        unionType: union a
-      </div>
-      <div>
-        aliasedUnionType: Type Alias 1
-      </div>
-      <div>
-        enumNumeric: 0
-      </div>
-      <div>
-        enumNumericInitial: 1
-      </div>
-      <div>
-        enumStrings: PRIMARY
-      </div>
-      <div>
-        enumAlias: 0
-      </div>
-    </div>
-  </app-enums>
-</storybook-wrapper>
-`;
diff --git a/code/frameworks/angular/template/stories/basics/component-with-inheritance/__snapshots__/inheritance.stories.storyshot b/code/frameworks/angular/template/stories/basics/component-with-inheritance/__snapshots__/inheritance.stories.storyshot
deleted file mode 100644
index 599db9b491d..00000000000
--- a/code/frameworks/angular/template/stories/basics/component-with-inheritance/__snapshots__/inheritance.stories.storyshot
+++ /dev/null
@@ -1,26 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Basics / Component / With Inheritance base button 1`] = `
-<storybook-wrapper>
-  <storybook-base-button
-    ng-reflect-label="this is label"
-  >
-    <button>
-      this is label
-    </button>
-  </storybook-base-button>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Basics / Component / With Inheritance icon button 1`] = `
-<storybook-wrapper>
-  <storybook-icon-button
-    ng-reflect-icon="this is icon"
-    ng-reflect-label="this is label"
-  >
-    <button>
-      this is label - this is icon
-    </button>
-  </storybook-icon-button>
-</storybook-wrapper>
-`;
diff --git a/code/frameworks/angular/template/stories/basics/component-with-ng-content/__snapshots__/ng-content-about-parent.stories.storyshot b/code/frameworks/angular/template/stories/basics/component-with-ng-content/__snapshots__/ng-content-about-parent.stories.storyshot
deleted file mode 100644
index a8422882a1a..00000000000
--- a/code/frameworks/angular/template/stories/basics/component-with-ng-content/__snapshots__/ng-content-about-parent.stories.storyshot
+++ /dev/null
@@ -1,74 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Basics / Component / With ng-content / Button with different contents Always Define Template Or Component 1`] = `
-<storybook-wrapper>
-  <sb-button>
-    <button>
-      <sb-button>
-        <button
-          style="background-color: rgb(94, 173, 245);"
-        />
-      </sb-button>
-      
-    </button>
-  </sb-button>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Basics / Component / With ng-content / Button with different contents Empty Button 1`] = `
-<storybook-wrapper>
-  <sb-button>
-    <button />
-  </sb-button>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Basics / Component / With ng-content / Button with different contents In <h1> 1`] = `
-<storybook-wrapper>
-  <sb-button>
-    <button>
-      <h1>
-        My button in h1
-      </h1>
-    </button>
-  </sb-button>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Basics / Component / With ng-content / Button with different contents With Component 1`] = `
-<storybook-wrapper>
-  <sb-button>
-    <button>
-      <sb-emoji>
-        👾
-      </sb-emoji>
-      
-    </button>
-  </sb-button>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Basics / Component / With ng-content / Button with different contents With Component And Args 1`] = `
-<storybook-wrapper>
-  <sb-button>
-    <button>
-      <sb-emoji
-        ng-reflect-emoji="🌵"
-      >
-        🌵
-      </sb-emoji>
-      
-    </button>
-  </sb-button>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Basics / Component / With ng-content / Button with different contents With Dynamic Content And Args 1`] = `
-<storybook-wrapper>
-  <sb-button>
-    <button>
-      My button text
-    </button>
-  </sb-button>
-</storybook-wrapper>
-`;
diff --git a/code/frameworks/angular/template/stories/basics/component-with-ng-content/__snapshots__/ng-content-simple.stories.storyshot b/code/frameworks/angular/template/stories/basics/component-with-ng-content/__snapshots__/ng-content-simple.stories.storyshot
deleted file mode 100644
index 9ff0be60731..00000000000
--- a/code/frameworks/angular/template/stories/basics/component-with-ng-content/__snapshots__/ng-content-simple.stories.storyshot
+++ /dev/null
@@ -1,42 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Basics / Component / With ng-content / Simple Default 1`] = `
-<storybook-wrapper>
-  <storybook-with-ng-content>
-    Content value: 
-    <div
-      style="color: #1e88e5;"
-    >
-      <h1>
-        This is rendered in ng-content
-      </h1>
-    </div>
-  </storybook-with-ng-content>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Basics / Component / With ng-content / Simple Only Component 1`] = `
-<storybook-wrapper>
-  <storybook-with-ng-content>
-    Content value: 
-    <div
-      style="color: #1e88e5;"
-    />
-  </storybook-with-ng-content>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Basics / Component / With ng-content / Simple With Dynamic Content And Args 1`] = `
-<storybook-wrapper>
-  <storybook-with-ng-content>
-    Content value: 
-    <div
-      style="color: #1e88e5;"
-    >
-      <h1>
-        Default content
-      </h1>
-    </div>
-  </storybook-with-ng-content>
-</storybook-wrapper>
-`;
diff --git a/code/frameworks/angular/template/stories/basics/component-with-on-push/__snapshots__/on-push.stories.storyshot b/code/frameworks/angular/template/stories/basics/component-with-on-push/__snapshots__/on-push.stories.storyshot
deleted file mode 100644
index f33448f92bb..00000000000
--- a/code/frameworks/angular/template/stories/basics/component-with-on-push/__snapshots__/on-push.stories.storyshot
+++ /dev/null
@@ -1,13 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Basics / Component / With OnPush strategy Class-specified component with OnPush and Args 1`] = `
-<storybook-wrapper>
-  <storybook-on-push-box
-    ng-reflect-bg-color="#FFF000"
-    ng-reflect-word="The text"
-    style="background-color: rgb(255, 240, 0);"
-  >
-     Word of the day: The text 
-  </storybook-on-push-box>
-</storybook-wrapper>
-`;
diff --git a/code/frameworks/angular/template/stories/basics/component-with-pipe/__snapshots__/custom-pipes.stories.storyshot b/code/frameworks/angular/template/stories/basics/component-with-pipe/__snapshots__/custom-pipes.stories.storyshot
deleted file mode 100644
index 086157037ec..00000000000
--- a/code/frameworks/angular/template/stories/basics/component-with-pipe/__snapshots__/custom-pipes.stories.storyshot
+++ /dev/null
@@ -1,25 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Basics / Component / With Pipes Simple 1`] = `
-<storybook-wrapper>
-  <storybook-with-pipe
-    ng-reflect-field="foobar"
-  >
-    <h1>
-      CustomPipe: foobar
-    </h1>
-  </storybook-with-pipe>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Basics / Component / With Pipes With args 1`] = `
-<storybook-wrapper>
-  <storybook-with-pipe
-    ng-reflect-field="Foo Bar"
-  >
-    <h1>
-      CustomPipe: Foo Bar
-    </h1>
-  </storybook-with-pipe>
-</storybook-wrapper>
-`;
diff --git a/code/frameworks/angular/template/stories/basics/component-with-provider/__snapshots__/di.component.stories.storyshot b/code/frameworks/angular/template/stories/basics/component-with-provider/__snapshots__/di.component.stories.storyshot
deleted file mode 100644
index d9fb54b3c1b..00000000000
--- a/code/frameworks/angular/template/stories/basics/component-with-provider/__snapshots__/di.component.stories.storyshot
+++ /dev/null
@@ -1,59 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Basics / Component / With Provider inputs and inject dependencies 1`] = `
-<storybook-wrapper>
-  <storybook-di-component
-    ng-reflect-title="Component dependencies"
-  >
-    <div>
-      <div>
-        All dependencies are defined: true
-      </div>
-      <div>
-        Title: Component dependencies
-      </div>
-      <div>
-        Injector: function NodeInjector(_tNode, _lView) {
-              this._tNode = _tNode;
-              this._lView = _lView;
-          }
-      </div>
-      <div>
-        ElementRef: {"nativeElement":{"__ngContext__":"[Array(33)]","_constructor-name_":"HTMLElement"}}
-      </div>
-      <div>
-        TestToken: 123
-      </div>
-    </div>
-  </storybook-di-component>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Basics / Component / With Provider inputs and inject dependencies with args 1`] = `
-<storybook-wrapper>
-  <storybook-di-component
-    ng-reflect-title="Component dependencies"
-  >
-    <div>
-      <div>
-        All dependencies are defined: true
-      </div>
-      <div>
-        Title: Component dependencies
-      </div>
-      <div>
-        Injector: function NodeInjector(_tNode, _lView) {
-              this._tNode = _tNode;
-              this._lView = _lView;
-          }
-      </div>
-      <div>
-        ElementRef: {"nativeElement":{"__ngContext__":"[Array(33)]","_constructor-name_":"HTMLElement"}}
-      </div>
-      <div>
-        TestToken: 123
-      </div>
-    </div>
-  </storybook-di-component>
-</storybook-wrapper>
-`;
diff --git a/code/frameworks/angular/template/stories/basics/component-with-style/__snapshots__/styled.component.stories.storyshot b/code/frameworks/angular/template/stories/basics/component-with-style/__snapshots__/styled.component.stories.storyshot
deleted file mode 100644
index 67afa3fec1e..00000000000
--- a/code/frameworks/angular/template/stories/basics/component-with-style/__snapshots__/styled.component.stories.storyshot
+++ /dev/null
@@ -1,25 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Basics / Component / With StyleUrls Component with styles 1`] = `
-<storybook-wrapper>
-  <storybook-styled-component>
-    <div>
-      <p
-        class="red-color"
-      >
-        Styled with scoped CSS
-      </p>
-      <p
-        class="blue-color"
-      >
-        Styled with scoped SCSS
-      </p>
-      <p
-        class="green-color"
-      >
-        Styled with global CSS
-      </p>
-    </div>
-  </storybook-styled-component>
-</storybook-wrapper>
-`;
diff --git a/code/frameworks/angular/template/stories/basics/component-without-selector/__snapshots__/without-selector-ng-component-outlet.stories.storyshot b/code/frameworks/angular/template/stories/basics/component-without-selector/__snapshots__/without-selector-ng-component-outlet.stories.storyshot
deleted file mode 100644
index 0d6bcc53275..00000000000
--- a/code/frameworks/angular/template/stories/basics/component-without-selector/__snapshots__/without-selector-ng-component-outlet.stories.storyshot
+++ /dev/null
@@ -1,23 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Basics / Component / without selector / Custom wrapper *NgComponentOutlet Custom wrapper *NgComponentOutlet 1`] = `
-<storybook-wrapper>
-  <ng-component-outlet-wrapper
-    ng-reflect-color="green"
-    ng-reflect-component-outlet="function WithoutSelectorCompon"
-    ng-reflect-name="Dixie Normous"
-  >
-    <ng-component>
-      My name in color : 
-      <div
-        style="color: green;"
-      >
-        Dixie Normous
-      </div>
-      Ng-content : Inspired by 
-      https://angular.io/api/common/NgComponentOutlet
-    </ng-component>
-    
-  </ng-component-outlet-wrapper>
-</storybook-wrapper>
-`;
diff --git a/code/frameworks/angular/template/stories/basics/component-without-selector/__snapshots__/without-selector-ng-factory-resolver.stories.storyshot b/code/frameworks/angular/template/stories/basics/component-without-selector/__snapshots__/without-selector-ng-factory-resolver.stories.storyshot
deleted file mode 100644
index 9bd911768d2..00000000000
--- a/code/frameworks/angular/template/stories/basics/component-without-selector/__snapshots__/without-selector-ng-factory-resolver.stories.storyshot
+++ /dev/null
@@ -1,17 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Basics / Component / without selector / Custom wrapper ComponentFactoryResolver Custom wrapper ComponentFactoryResolver 1`] = `
-<storybook-wrapper>
-  <component-factory-wrapper
-    ng-reflect-args="[object Object]"
-    ng-reflect-component-outlet="function WithoutSelectorCompon"
-  /><ng-component>
-    My name in color : 
-    <div
-      style="color: chartreuse;"
-    >
-      Dixie Normous
-    </div>
-  </ng-component>
-</storybook-wrapper>
-`;
diff --git a/code/frameworks/angular/template/stories/basics/component-without-selector/__snapshots__/without-selector.stories.storyshot b/code/frameworks/angular/template/stories/basics/component-without-selector/__snapshots__/without-selector.stories.storyshot
deleted file mode 100644
index cc9d114e837..00000000000
--- a/code/frameworks/angular/template/stories/basics/component-without-selector/__snapshots__/without-selector.stories.storyshot
+++ /dev/null
@@ -1,27 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Basics / Component / without selector Simple Component 1`] = `
-<storybook-wrapper>
-  <ng-component>
-    My name in color : 
-    <div
-      style="color: rgb(30, 136, 229);"
-    >
-      Joe Bar
-    </div>
-  </ng-component>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Basics / Component / without selector With Injection Token And Args 1`] = `
-<storybook-wrapper>
-  <ng-component>
-    My name in color : 
-    <div
-      style="color: red;"
-    >
-      Dixie Normous
-    </div>
-  </ng-component>
-</storybook-wrapper>
-`;
diff --git a/code/frameworks/angular/template/stories/basics/ng-module/__snapshots__/import-module-for-root.stories.storyshot b/code/frameworks/angular/template/stories/basics/ng-module/__snapshots__/import-module-for-root.stories.storyshot
deleted file mode 100644
index f5c1fe6d1c7..00000000000
--- a/code/frameworks/angular/template/stories/basics/ng-module/__snapshots__/import-module-for-root.stories.storyshot
+++ /dev/null
@@ -1,113 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Basics / NgModule / forRoot() pattern Chips group 1`] = `
-<storybook-wrapper>
-  <storybook-chips-group
-    ng-reflect-chips="[object Object],[object Object"
-  >
-    <storybook-chip
-      class="chip"
-      ng-reflect-display-text="Chip 1"
-      style="background-color: rgb(255, 84, 84);"
-    >
-      <span
-        class="text"
-      >
-        Chíp 1
-      </span>
-      <div
-        class="remove"
-      >
-        <span
-          class="x"
-        >
-          ✕
-        </span>
-      </div>
-    </storybook-chip>
-    <storybook-chip
-      class="chip"
-      ng-reflect-display-text="Chip 2"
-      style="background-color: rgb(255, 84, 84);"
-    >
-      <span
-        class="text"
-      >
-        Chíp 2
-      </span>
-      <div
-        class="remove"
-      >
-        <span
-          class="x"
-        >
-          ✕
-        </span>
-      </div>
-    </storybook-chip>
-    
-    <div
-      class="remove-all"
-    >
-       Remove All 
-    </div>
-    
-  </storybook-chips-group>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Basics / NgModule / forRoot() pattern Chips group with overridden provider 1`] = `
-<storybook-wrapper>
-  <storybook-chips-group
-    ng-reflect-chips="[object Object],[object Object"
-  >
-    <storybook-chip
-      class="chip"
-      ng-reflect-display-text="Chip 1"
-      style="background-color: yellow;"
-    >
-      <span
-        class="text"
-      >
-        Chíp 1
-      </span>
-      <div
-        class="remove"
-      >
-        <span
-          class="x"
-        >
-          ✕
-        </span>
-      </div>
-    </storybook-chip>
-    <storybook-chip
-      class="chip"
-      ng-reflect-display-text="Chip 2"
-      style="background-color: yellow;"
-    >
-      <span
-        class="text"
-      >
-        Chíp 2
-      </span>
-      <div
-        class="remove"
-      >
-        <span
-          class="x"
-        >
-          ✕
-        </span>
-      </div>
-    </storybook-chip>
-    
-    <div
-      class="remove-all"
-    >
-       Remove All 
-    </div>
-    
-  </storybook-chips-group>
-</storybook-wrapper>
-`;
diff --git a/code/frameworks/angular/template/stories/basics/ng-module/__snapshots__/import-module.stories.storyshot b/code/frameworks/angular/template/stories/basics/ng-module/__snapshots__/import-module.stories.storyshot
deleted file mode 100644
index b6daa0d1f2e..00000000000
--- a/code/frameworks/angular/template/stories/basics/ng-module/__snapshots__/import-module.stories.storyshot
+++ /dev/null
@@ -1,81 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Basics / NgModule / Module with multiple component Chip 1`] = `
-<storybook-wrapper>
-  <storybook-chip
-    ng-reflect-display-text="Chip"
-    style="background-color: rgb(238, 238, 238);"
-  >
-    <span
-      class="text"
-    >
-      Chíp
-    </span>
-    <div
-      class="remove"
-    >
-      <span
-        class="x"
-      >
-        ✕
-      </span>
-    </div>
-  </storybook-chip>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Basics / NgModule / Module with multiple component Chips Group 1`] = `
-<storybook-wrapper>
-  <storybook-chips-group
-    ng-reflect-chips="[object Object],[object Object"
-  >
-    <storybook-chip
-      class="chip"
-      ng-reflect-display-text="Chip 1"
-      style="background-color: rgb(238, 238, 238);"
-    >
-      <span
-        class="text"
-      >
-        Chíp 1
-      </span>
-      <div
-        class="remove"
-      >
-        <span
-          class="x"
-        >
-          ✕
-        </span>
-      </div>
-    </storybook-chip>
-    <storybook-chip
-      class="chip"
-      ng-reflect-display-text="Chip 2"
-      style="background-color: rgb(238, 238, 238);"
-    >
-      <span
-        class="text"
-      >
-        Chíp 2
-      </span>
-      <div
-        class="remove"
-      >
-        <span
-          class="x"
-        >
-          ✕
-        </span>
-      </div>
-    </storybook-chip>
-    
-    <div
-      class="remove-all"
-    >
-       Remove All 
-    </div>
-    
-  </storybook-chips-group>
-</storybook-wrapper>
-`;
diff --git a/code/frameworks/angular/template/stories/core/decorators/componentWrapperDecorator/__snapshots__/decorators.stories.storyshot b/code/frameworks/angular/template/stories/core/decorators/componentWrapperDecorator/__snapshots__/decorators.stories.storyshot
deleted file mode 100644
index bdee6db3222..00000000000
--- a/code/frameworks/angular/template/stories/core/decorators/componentWrapperDecorator/__snapshots__/decorators.stories.storyshot
+++ /dev/null
@@ -1,213 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Core / Decorators / ComponentWrapperDecorator Angular Legacy Rendering 1`] = `
-<storybook-wrapper>
-  Grandparent<br /><div
-    style="margin: 3em; border: solid;"
-  >
-    Custom Decorator 
-    <div
-      style="margin: 3em;"
-    >
-      Child Template
-    </div>
-  </div>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Core / Decorators / ComponentWrapperDecorator With Component 1`] = `
-<storybook-wrapper>
-  Grandparent<br /><div
-    style="margin: 3em; border: solid;"
-  >
-    <child-component
-      ng-reflect-child-text="Child text"
-    >
-       Child
-      <br />
-       Input text: Child text 
-      <br />
-       Output : 
-      <button>
-        Click here !
-      </button>
-      <br />
-       Private text: Child private text 
-      <br />
-    </child-component>
-    
-  </div>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Core / Decorators / ComponentWrapperDecorator With Component Wrapper Decorator 1`] = `
-<storybook-wrapper>
-  Grandparent<br /><div
-    style="margin: 3em; border: solid;"
-  >
-    <parent-component>
-       Parent
-      <br />
-       Input text:  
-      <br />
-       Output : 
-      <button>
-        Click here !
-      </button>
-      <br />
-      <div
-        style="margin: 3em; border: solid;"
-      >
-        <child-component
-          ng-reflect-child-text="Child text"
-        >
-           Child
-          <br />
-           Input text: Child text 
-          <br />
-           Output : 
-          <button>
-            Click here !
-          </button>
-          <br />
-           Private text: Child private text 
-          <br />
-        </child-component>
-        
-      </div>
-    </parent-component>
-  </div>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Core / Decorators / ComponentWrapperDecorator With Component Wrapper Decorator And Args 1`] = `
-<storybook-wrapper>
-  Grandparent<br /><div
-    style="margin: 3em; border: solid;"
-  >
-    <parent-component>
-       Parent
-      <br />
-       Input text:  
-      <br />
-       Output : 
-      <button>
-        Click here !
-      </button>
-      <br />
-      <div
-        style="margin: 3em; border: solid;"
-      >
-        <child-component
-          ng-reflect-child-text="Child text"
-        >
-           Child
-          <br />
-           Input text: Child text 
-          <br />
-           Output : 
-          <button>
-            Click here !
-          </button>
-          <br />
-           Private text: Child private text 
-          <br />
-        </child-component>
-        
-      </div>
-    </parent-component>
-  </div>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Core / Decorators / ComponentWrapperDecorator With Component Wrapper Decorator And Props 1`] = `
-<storybook-wrapper>
-  Grandparent<br /><div
-    style="margin: 3em; border: solid;"
-  >
-    <parent-component
-      ng-reflect-parent-text="Parent text"
-    >
-       Parent
-      <br />
-       Input text: Parent text 
-      <br />
-       Output : 
-      <button>
-        Click here !
-      </button>
-      <br />
-      <div
-        style="margin: 3em; border: solid;"
-      >
-        <child-component
-          ng-reflect-child-text="Child text"
-        >
-           Child
-          <br />
-           Input text: Child text 
-          <br />
-           Output : 
-          <button>
-            Click here !
-          </button>
-          <br />
-           Private text: Child private text 
-          <br />
-        </child-component>
-        
-      </div>
-    </parent-component>
-  </div>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Core / Decorators / ComponentWrapperDecorator With Custom Decorator 1`] = `
-<storybook-wrapper>
-  Grandparent<br /><div
-    style="margin: 3em; border: solid;"
-  >
-    Custom Decorator 
-    <div
-      style="margin: 3em;"
-    >
-      Child Template
-    </div>
-  </div>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Core / Decorators / ComponentWrapperDecorator With Legacy Component 1`] = `
-<storybook-wrapper>
-  Grandparent<br /><div
-    style="margin: 3em; border: solid;"
-  >
-    <child-component
-      ng-reflect-child-text="Child text"
-    >
-       Child
-      <br />
-       Input text: Child text 
-      <br />
-       Output : 
-      <button>
-        Click here !
-      </button>
-      <br />
-       Private text: Child private text 
-      <br />
-    </child-component>
-    
-  </div>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Core / Decorators / ComponentWrapperDecorator With Template 1`] = `
-<storybook-wrapper>
-  Grandparent<br /><div
-    style="margin: 3em; border: solid;"
-  >
-    Child Template
-  </div>
-</storybook-wrapper>
-`;
diff --git a/code/frameworks/angular/template/stories/core/decorators/theme-decorator/__snapshots__/decorators.stories.storyshot b/code/frameworks/angular/template/stories/core/decorators/theme-decorator/__snapshots__/decorators.stories.storyshot
deleted file mode 100644
index 26b6592642c..00000000000
--- a/code/frameworks/angular/template/stories/core/decorators/theme-decorator/__snapshots__/decorators.stories.storyshot
+++ /dev/null
@@ -1,11 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Core / Decorators / Theme Decorators Base 1`] = `
-<storybook-wrapper>
-  <div
-    class="light-theme"
-  >
-    Change theme with the brush in toolbar
-  </div>
-</storybook-wrapper>
-`;
diff --git a/code/frameworks/angular/template/stories/core/moduleMetadata/__snapshots__/in-export-default.stories.storyshot b/code/frameworks/angular/template/stories/core/moduleMetadata/__snapshots__/in-export-default.stories.storyshot
deleted file mode 100644
index bbc4164fcb9..00000000000
--- a/code/frameworks/angular/template/stories/core/moduleMetadata/__snapshots__/in-export-default.stories.storyshot
+++ /dev/null
@@ -1,47 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Core / ModuleMetadata / In export default with decorator Story 1 1`] = `
-<storybook-wrapper>
-  <storybook-simple-token-component
-    ng-reflect-name="Prop Name"
-  >
-    <h3>
-      Prop Name
-    </h3>
-    <p>
-      Items:
-    </p>
-    <ul>
-      <li>
-        Joe
-      </li>
-      <li>
-        Jane
-      </li>
-      
-    </ul>
-  </storybook-simple-token-component>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Core / ModuleMetadata / In export default with decorator Story 2 1`] = `
-<storybook-wrapper>
-  <storybook-simple-token-component>
-    <h3>
-      Provider Name
-    </h3>
-    <p>
-      Items:
-    </p>
-    <ul>
-      <li>
-        Joe
-      </li>
-      <li>
-        Jane
-      </li>
-      
-    </ul>
-  </storybook-simple-token-component>
-</storybook-wrapper>
-`;
diff --git a/code/frameworks/angular/template/stories/core/moduleMetadata/__snapshots__/in-stories.stories.storyshot b/code/frameworks/angular/template/stories/core/moduleMetadata/__snapshots__/in-stories.stories.storyshot
deleted file mode 100644
index dd3a8cbb870..00000000000
--- a/code/frameworks/angular/template/stories/core/moduleMetadata/__snapshots__/in-stories.stories.storyshot
+++ /dev/null
@@ -1,47 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Core / ModuleMetadata / In stories Individual 1 1`] = `
-<storybook-wrapper>
-  <storybook-simple-token-component
-    ng-reflect-name="Prop Name"
-  >
-    <h3>
-      Prop Name
-    </h3>
-    <p>
-      Items:
-    </p>
-    <ul>
-      <li>
-        Joe
-      </li>
-      <li>
-        Jane
-      </li>
-      
-    </ul>
-  </storybook-simple-token-component>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Core / ModuleMetadata / In stories Individual 2 1`] = `
-<storybook-wrapper>
-  <storybook-simple-token-component>
-    <h3>
-      Provider Name
-    </h3>
-    <p>
-      Items:
-    </p>
-    <ul>
-      <li>
-        Jim
-      </li>
-      <li>
-        Jill
-      </li>
-      
-    </ul>
-  </storybook-simple-token-component>
-</storybook-wrapper>
-`;
diff --git a/code/frameworks/angular/template/stories/core/moduleMetadata/__snapshots__/merge-default-and-story.stories.storyshot b/code/frameworks/angular/template/stories/core/moduleMetadata/__snapshots__/merge-default-and-story.stories.storyshot
deleted file mode 100644
index 7c2c8fb716c..00000000000
--- a/code/frameworks/angular/template/stories/core/moduleMetadata/__snapshots__/merge-default-and-story.stories.storyshot
+++ /dev/null
@@ -1,25 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Core / ModuleMetadata / Merge default and story Merge with default ModuleMetadata 1`] = `
-<storybook-wrapper>
-  <storybook-simple-token-component
-    ng-reflect-name="CustomPipe: Prop Name"
-  >
-    <h3>
-      CustomPipe: Prop Name
-    </h3>
-    <p>
-      Items:
-    </p>
-    <ul>
-      <li>
-        Joe
-      </li>
-      <li>
-        Jane
-      </li>
-      
-    </ul>
-  </storybook-simple-token-component>
-</storybook-wrapper>
-`;
diff --git a/code/frameworks/angular/template/stories/core/parameters/__snapshots__/all-parameters.stories.storyshot b/code/frameworks/angular/template/stories/core/parameters/__snapshots__/all-parameters.stories.storyshot
deleted file mode 100644
index 9798cec4852..00000000000
--- a/code/frameworks/angular/template/stories/core/parameters/__snapshots__/all-parameters.stories.storyshot
+++ /dev/null
@@ -1,34 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Core / Parameters / All parameters All parameters passed to story 1`] = `
-<storybook-wrapper>
-  <storybook-button-component
-    ng-reflect-text="Parameters are {
-    \\"docs\\": {
-   "
-  >
-    <button>
-      Parameters are {
-    "docs": {
-      "inlineStories": true
-    },
-    "options": {
-      "storySort": {
-        "order": [
-          "Welcome",
-          "Core ",
-          "Addons ",
-          "Basics "
-        ]
-      }
-    },
-    "framework": "angular",
-    "globalParameter": "globalParameter",
-    "chapterParameter": "chapterParameter",
-    "storyParameter": "storyParameter",
-    "__isArgsStory": true
-  }
-    </button>
-  </storybook-button-component>
-</storybook-wrapper>
-`;
diff --git a/code/frameworks/angular/template/stories/core/parameters/__snapshots__/bootstrap-options.stories.storyshot b/code/frameworks/angular/template/stories/core/parameters/__snapshots__/bootstrap-options.stories.storyshot
deleted file mode 100644
index 0930ead62cd..00000000000
--- a/code/frameworks/angular/template/stories/core/parameters/__snapshots__/bootstrap-options.stories.storyshot
+++ /dev/null
@@ -1,13 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Core / Parameters / With Bootstrap Options With Preserve Whitespaces 1`] = `
-<storybook-wrapper>
-  <component-with-whitespace>
-    <div>
-      <p>
-        Some content
-      </p>
-    </div>
-  </component-with-whitespace>
-</storybook-wrapper>
-`;
diff --git a/code/frameworks/angular/template/stories/core/parameters/__snapshots__/layout.parameters.stories.storyshot b/code/frameworks/angular/template/stories/core/parameters/__snapshots__/layout.parameters.stories.storyshot
deleted file mode 100644
index dff97a49d79..00000000000
--- a/code/frameworks/angular/template/stories/core/parameters/__snapshots__/layout.parameters.stories.storyshot
+++ /dev/null
@@ -1,67 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Core / Parameters / Layout Centered 1`] = `
-<storybook-wrapper>
-  <storybook-button-component
-    ng-reflect-text="Button"
-  >
-    <button>
-      Button
-    </button>
-  </storybook-button-component>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Core / Parameters / Layout Default 1`] = `
-<storybook-wrapper>
-  <storybook-button-component
-    ng-reflect-text="Button"
-  >
-    <button>
-      Button
-    </button>
-  </storybook-button-component>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Core / Parameters / Layout Fullscreen 1`] = `
-<storybook-wrapper>
-  <div
-    style="background-color: yellow;"
-  >
-    <storybook-button-component
-      ng-reflect-text="Button"
-      text="Button"
-    >
-      <button>
-        Button
-      </button>
-    </storybook-button-component>
-
-  </div>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Core / Parameters / Layout None 1`] = `
-<storybook-wrapper>
-  <storybook-button-component
-    ng-reflect-text="Button"
-  >
-    <button>
-      Button
-    </button>
-  </storybook-button-component>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Core / Parameters / Layout Padded 1`] = `
-<storybook-wrapper>
-  <storybook-button-component
-    ng-reflect-text="Button"
-  >
-    <button>
-      Button
-    </button>
-  </storybook-button-component>
-</storybook-wrapper>
-`;
diff --git a/code/frameworks/angular/template/stories/core/styles/__snapshots__/story-styles.stories.storyshot b/code/frameworks/angular/template/stories/core/styles/__snapshots__/story-styles.stories.storyshot
deleted file mode 100644
index ca04c343df5..00000000000
--- a/code/frameworks/angular/template/stories/core/styles/__snapshots__/story-styles.stories.storyshot
+++ /dev/null
@@ -1,27 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Core / Story host styles With Args 1`] = `
-<storybook-wrapper>
-  <storybook-button-component
-    _ngcontent-a-c160=""
-    ng-reflect-text="Button with custom styles"
-  >
-    <button>
-      Button with custom styles
-    </button>
-  </storybook-button-component>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Core / Story host styles With story template 1`] = `
-<storybook-wrapper>
-  <storybook-button-component
-    _ngcontent-a-c159=""
-    ng-reflect-text="Button with custom styles"
-  >
-    <button>
-      Button with custom styles
-    </button>
-  </storybook-button-component>
-</storybook-wrapper>
-`;
diff --git a/code/frameworks/angular/template/stories/legacy/__snapshots__/component-in-story.stories.storyshot b/code/frameworks/angular/template/stories/legacy/__snapshots__/component-in-story.stories.storyshot
deleted file mode 100644
index e04f37811e1..00000000000
--- a/code/frameworks/angular/template/stories/legacy/__snapshots__/component-in-story.stories.storyshot
+++ /dev/null
@@ -1,13 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Legacy / Component in Story Basic 1`] = `
-<storybook-wrapper>
-  <storybook-button-component
-    ng-reflect-text="Hello Button"
-  >
-    <button>
-      Hello Button
-    </button>
-  </storybook-button-component>
-</storybook-wrapper>
-`;
diff --git a/code/frameworks/angular/template/stories/others/issues/__snapshots__/12009-unknown-component.stories.storyshot b/code/frameworks/angular/template/stories/others/issues/__snapshots__/12009-unknown-component.stories.storyshot
deleted file mode 100644
index 71e6830d78c..00000000000
--- a/code/frameworks/angular/template/stories/others/issues/__snapshots__/12009-unknown-component.stories.storyshot
+++ /dev/null
@@ -1,13 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Others / Issues / 12009 unknown component Basic 1`] = `
-<storybook-wrapper>
-  <storybook-button-component
-    ng-reflect-text="Unknown component"
-  >
-    <button>
-      Unknown component
-    </button>
-  </storybook-button-component>
-</storybook-wrapper>
-`;

From 55d0559faf0eb6a506c4f4b66e92d06bb1449bc1 Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@chromatic.com>
Date: Mon, 10 Oct 2022 15:10:50 +1100
Subject: [PATCH 19/47] Create `combine-compodoc` script

---
 scripts/combine-compodoc.ts | 70 +++++++++++++++++++++++++++++++++++++
 1 file changed, 70 insertions(+)
 create mode 100755 scripts/combine-compodoc.ts

diff --git a/scripts/combine-compodoc.ts b/scripts/combine-compodoc.ts
new file mode 100755
index 00000000000..c03ec9f0aad
--- /dev/null
+++ b/scripts/combine-compodoc.ts
@@ -0,0 +1,70 @@
+import { join, resolve } from 'path';
+import { tmpdir } from 'os';
+import execa from 'execa';
+import { realpath, readFile, writeFile, lstat } from 'fs-extra';
+import glob from 'glob';
+
+const logger = console;
+
+// Find all symlinks in a directory. There may be more efficient ways to do this, but this works.
+async function findSymlinks(dir: string) {
+  const potentialDirs = await glob.sync(`${dir}/**/*/`);
+
+  return (
+    await Promise.all(
+      potentialDirs.map(
+        async (p) => [p, (await lstat(p.replace(/\/$/, ''))).isSymbolicLink()] as [string, boolean]
+      )
+    )
+  )
+    .filter(([, s]) => s)
+    .map(([p]) => p);
+}
+
+async function run(cwd: string) {
+  const dirs = [
+    cwd,
+    ...(await findSymlinks(resolve(cwd, './src'))),
+    ...(await findSymlinks(resolve(cwd, './stories'))),
+    ...(await findSymlinks(resolve(cwd, './template-stories'))),
+  ];
+
+  const docsArray: Record<string, any>[] = await Promise.all(
+    dirs.map(async (dir) => {
+      const outputDir = tmpdir();
+      const resolvedDir = await realpath(dir);
+      await execa.command(
+        `yarn compodoc ${resolvedDir} -p ./tsconfig.json -e json -d ${outputDir}`,
+        {
+          cwd,
+        }
+      );
+      const contents = await readFile(join(outputDir, 'documentation.json'), 'utf8');
+      return JSON.parse(contents);
+    })
+  );
+
+  // Compose together any array entries, discard anything else
+  const documentation = docsArray.slice(1).reduce((acc, entry) => {
+    return Object.fromEntries(
+      Object.entries(acc).map(([key, accValue]) => {
+        if (Array.isArray(accValue)) {
+          return [key, [...accValue, ...entry[key]]];
+        }
+        return [key, accValue];
+      })
+    );
+  }, docsArray[0]);
+
+  await writeFile(join(cwd, 'documentation.json'), JSON.stringify(documentation));
+}
+
+if (require.main === module) {
+  run(resolve(process.argv[2]))
+    .then(() => process.exit(0))
+    .catch((err) => {
+      logger.error();
+      logger.error(err);
+      process.exit(1);
+    });
+}

From ba8003ed8eec349cf23ee52272b53e12fcbf489f Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@chromatic.com>
Date: Mon, 10 Oct 2022 15:24:50 +1100
Subject: [PATCH 20/47] Wired up combine-compodoc

---
 scripts/combine-compodoc.ts | 18 ++++++++++++++----
 scripts/sandbox.ts          |  5 +++++
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/scripts/combine-compodoc.ts b/scripts/combine-compodoc.ts
index c03ec9f0aad..ba52049ef6e 100755
--- a/scripts/combine-compodoc.ts
+++ b/scripts/combine-compodoc.ts
@@ -1,8 +1,12 @@
+// Compodoc does not follow symlinks (it ignores them and their contents entirely)
+// So, we need to run a separate compodoc process on every symlink inside the project,
+// then combine the results into one large documentation.json
+
 import { join, resolve } from 'path';
-import { tmpdir } from 'os';
 import execa from 'execa';
 import { realpath, readFile, writeFile, lstat } from 'fs-extra';
 import glob from 'glob';
+import { directory } from 'tempy';
 
 const logger = console;
 
@@ -31,7 +35,7 @@ async function run(cwd: string) {
 
   const docsArray: Record<string, any>[] = await Promise.all(
     dirs.map(async (dir) => {
-      const outputDir = tmpdir();
+      const outputDir = directory();
       const resolvedDir = await realpath(dir);
       await execa.command(
         `yarn compodoc ${resolvedDir} -p ./tsconfig.json -e json -d ${outputDir}`,
@@ -40,11 +44,17 @@ async function run(cwd: string) {
         }
       );
       const contents = await readFile(join(outputDir, 'documentation.json'), 'utf8');
-      return JSON.parse(contents);
+      try {
+        return JSON.parse(contents);
+      } catch (err) {
+        logger.error(`Error parsing JSON at ${outputDir}\n\n`);
+        logger.error(contents);
+        throw err;
+      }
     })
   );
 
-  // Compose together any array entries, discard anything else
+  // Compose together any array entries, discard anything else (we happen to only read the array fields)
   const documentation = docsArray.slice(1).reduce((acc, entry) => {
     return Object.fromEntries(
       Object.entries(acc).map(([key, accValue]) => {
diff --git a/scripts/sandbox.ts b/scripts/sandbox.ts
index ee20f11f659..972bea153bc 100644
--- a/scripts/sandbox.ts
+++ b/scripts/sandbox.ts
@@ -190,6 +190,11 @@ async function updatePackageScripts({ cwd, prefix }: { cwd: string; prefix: stri
       /(npx )?storybook/,
       `${prefix} storybook`
     ),
+
+    // See comment in combine-compodoc as to why this is necessary
+    ...(packageJson.scripts['docs:json'] && {
+      'docs:json': 'DIR=$PWD; cd ../../scripts; yarn ts-node combine-compodoc $DIR',
+    }),
   };
   await writeJSON(packageJsonPath, packageJson, { spaces: 2 });
 }

From 09addc3f1164ebb93dd4407f9a86e84f044696b1 Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@chromatic.com>
Date: Mon, 10 Oct 2022 15:51:50 +1100
Subject: [PATCH 21/47] Small improvement

---
 scripts/combine-compodoc.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/scripts/combine-compodoc.ts b/scripts/combine-compodoc.ts
index ba52049ef6e..79a02dc0c34 100755
--- a/scripts/combine-compodoc.ts
+++ b/scripts/combine-compodoc.ts
@@ -39,9 +39,7 @@ async function run(cwd: string) {
       const resolvedDir = await realpath(dir);
       await execa.command(
         `yarn compodoc ${resolvedDir} -p ./tsconfig.json -e json -d ${outputDir}`,
-        {
-          cwd,
-        }
+        { cwd }
       );
       const contents = await readFile(join(outputDir, 'documentation.json'), 'utf8');
       try {

From f8e3232367c5a21c0ddb67e78e17f0f87259b947 Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@chromatic.com>
Date: Mon, 10 Oct 2022 17:00:08 +1100
Subject: [PATCH 22/47] Allow style/text to be unset

---
 code/frameworks/angular/template/components/pre.component.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/code/frameworks/angular/template/components/pre.component.ts b/code/frameworks/angular/template/components/pre.component.ts
index 7e3ce42abcf..299d5cb3188 100644
--- a/code/frameworks/angular/template/components/pre.component.ts
+++ b/code/frameworks/angular/template/components/pre.component.ts
@@ -9,7 +9,7 @@ export default class PreComponent {
    * Styles to apply to the component
    */
   @Input()
-  style = {};
+  style?;
 
   /**
    * An object to render
@@ -21,7 +21,7 @@ export default class PreComponent {
    * The code to render
    */
   @Input()
-  text = '';
+  text?;
 
   get finalText() {
     return this.object ? JSON.stringify(this.object, null, 2) : this.text;

From 904353b3fd777ba12d477a54e949fd1c6cd2b266 Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@chromatic.com>
Date: Mon, 10 Oct 2022 17:02:48 +1100
Subject: [PATCH 23/47] Add types

---
 code/frameworks/angular/template/components/pre.component.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/code/frameworks/angular/template/components/pre.component.ts b/code/frameworks/angular/template/components/pre.component.ts
index 299d5cb3188..76669d31081 100644
--- a/code/frameworks/angular/template/components/pre.component.ts
+++ b/code/frameworks/angular/template/components/pre.component.ts
@@ -9,7 +9,7 @@ export default class PreComponent {
    * Styles to apply to the component
    */
   @Input()
-  style?;
+  style?: Object;
 
   /**
    * An object to render
@@ -21,7 +21,7 @@ export default class PreComponent {
    * The code to render
    */
   @Input()
-  text?;
+  text?: string;
 
   get finalText() {
     return this.object ? JSON.stringify(this.object, null, 2) : this.text;

From 2ed71af9461c5555160f76addbeddeb3e3bd174e Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@chromatic.com>
Date: Mon, 10 Oct 2022 17:14:20 +1100
Subject: [PATCH 24/47] Distinguish button components

---
 .../angular/template/components/button.component.ts    | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/code/frameworks/angular/template/components/button.component.ts b/code/frameworks/angular/template/components/button.component.ts
index 3d0efd6af2f..cf111b4255a 100644
--- a/code/frameworks/angular/template/components/button.component.ts
+++ b/code/frameworks/angular/template/components/button.component.ts
@@ -1,18 +1,20 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core';
 
 @Component({
-  selector: 'storybook-button',
+  // Needs to be a different name to the CLI template button as they have a
+  // subtly different interface [label vs children] (for compodoc)
+  selector: 'storybook-framework-button',
   template: ` <button
     type="button"
     (click)="onClick.emit($event)"
     [ngClass]="classes"
     [ngStyle]="{ 'background-color': backgroundColor }"
   >
-    {{ label }}
+    {{ children }}
   </button>`,
   styleUrls: ['./button.css'],
 })
-export default class ButtonComponent {
+export default class FrameworkButtonComponent {
   /**
    * Is this the principal call to action on the page?
    */
@@ -37,7 +39,7 @@ export default class ButtonComponent {
    * @required
    */
   @Input()
-  label = 'Button';
+  children = 'Button';
 
   /**
    * Optional click handler

From 48cc2cebacc7aca85c271cbfc8baf131d1024fe4 Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@chromatic.com>
Date: Mon, 10 Oct 2022 17:16:42 +1100
Subject: [PATCH 25/47] One less example (?)

---
 .circleci/config.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 9f1c7bd973e..3367843365d 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -136,7 +136,7 @@ jobs:
     executor:
       class: medium+
       name: sb_node_14_browsers
-    parallelism: 13
+    parallelism: 12
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'

From b62fbc2f23d7e6328f1a45a1bbee5a3511059150 Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@chromatic.com>
Date: Tue, 11 Oct 2022 09:20:05 +1100
Subject: [PATCH 26/47] Fix missing export

---
 scripts/utils/package-json.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/utils/package-json.ts b/scripts/utils/package-json.ts
index d91c075a48f..6b5822e3522 100644
--- a/scripts/utils/package-json.ts
+++ b/scripts/utils/package-json.ts
@@ -3,7 +3,7 @@ import { join } from 'path';
 
 const logger = console;
 
-async function updatePackageScripts({ cwd, prefix }: { cwd: string; prefix: string }) {
+export async function updatePackageScripts({ cwd, prefix }: { cwd: string; prefix: string }) {
   logger.info(`🔢 Adding package scripts:`);
   const packageJsonPath = join(cwd, 'package.json');
   const packageJson = await readJSON(packageJsonPath);

From 157c2058bc9c2ddf784c3f73d7948d55d7447e1d Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@chromatic.com>
Date: Tue, 11 Oct 2022 09:51:04 +1100
Subject: [PATCH 27/47] remove docgen components (already under argTypes)

---
 .../doc-button.stories.storyshot              |  43 ----
 .../doc-button/doc-button.component.html      |   7 -
 .../doc-button/doc-button.component.scss      |   3 -
 .../doc-button/doc-button.component.ts        | 232 ------------------
 .../doc-button/doc-button.stories.mdx         |  10 -
 .../doc-button/doc-button.stories.ts          |  24 --
 .../doc-directive.stories.storyshot           |  15 --
 .../doc-directive/doc-directive.directive.ts  |  25 --
 .../doc-directive/doc-directive.stories.ts    |  15 --
 .../doc-injectable.stories.storyshot          |  11 -
 .../doc-injectable/doc-injectable.service.ts  |  27 --
 .../doc-injectable/doc-injectable.stories.ts  |  18 --
 .../__snapshots__/doc-pipe.stories.storyshot  |  11 -
 .../doc-pipe/doc-pipe.pipe.ts                 |  18 --
 .../doc-pipe/doc-pipe.stories.ts              |  18 --
 15 files changed, 477 deletions(-)
 delete mode 100644 code/frameworks/angular/template/stories/docgen-components/doc-button/__snapshots__/doc-button.stories.storyshot
 delete mode 100644 code/frameworks/angular/template/stories/docgen-components/doc-button/doc-button.component.html
 delete mode 100644 code/frameworks/angular/template/stories/docgen-components/doc-button/doc-button.component.scss
 delete mode 100644 code/frameworks/angular/template/stories/docgen-components/doc-button/doc-button.component.ts
 delete mode 100644 code/frameworks/angular/template/stories/docgen-components/doc-button/doc-button.stories.mdx
 delete mode 100644 code/frameworks/angular/template/stories/docgen-components/doc-button/doc-button.stories.ts
 delete mode 100644 code/frameworks/angular/template/stories/docgen-components/doc-directive/__snapshots__/doc-directive.stories.storyshot
 delete mode 100644 code/frameworks/angular/template/stories/docgen-components/doc-directive/doc-directive.directive.ts
 delete mode 100644 code/frameworks/angular/template/stories/docgen-components/doc-directive/doc-directive.stories.ts
 delete mode 100644 code/frameworks/angular/template/stories/docgen-components/doc-injectable/__snapshots__/doc-injectable.stories.storyshot
 delete mode 100644 code/frameworks/angular/template/stories/docgen-components/doc-injectable/doc-injectable.service.ts
 delete mode 100644 code/frameworks/angular/template/stories/docgen-components/doc-injectable/doc-injectable.stories.ts
 delete mode 100644 code/frameworks/angular/template/stories/docgen-components/doc-pipe/__snapshots__/doc-pipe.stories.storyshot
 delete mode 100644 code/frameworks/angular/template/stories/docgen-components/doc-pipe/doc-pipe.pipe.ts
 delete mode 100644 code/frameworks/angular/template/stories/docgen-components/doc-pipe/doc-pipe.stories.ts

diff --git a/code/frameworks/angular/template/stories/docgen-components/doc-button/__snapshots__/doc-button.stories.storyshot b/code/frameworks/angular/template/stories/docgen-components/doc-button/__snapshots__/doc-button.stories.storyshot
deleted file mode 100644
index 8140c987aa7..00000000000
--- a/code/frameworks/angular/template/stories/docgen-components/doc-button/__snapshots__/doc-button.stories.storyshot
+++ /dev/null
@@ -1,43 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addons/Docs/DocButton Basic 1`] = `
-<storybook-wrapper>
-  <my-button
-    ng-reflect-is-disabled="false"
-    ng-reflect-label="Args test"
-  >
-    <button
-      class="btn-secondary btn-medium"
-      ng-reflect-ng-class="btn-secondary,btn-medium"
-    >
-      <img
-        src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo="
-        width="100"
-      />
-       Args test
-  
-    </button>
-  </my-button>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Addons/Docs/DocButton With Template 1`] = `
-<storybook-wrapper>
-  <my-button
-    ng-reflect-appearance="primary"
-    ng-reflect-label="Template test"
-  >
-    <button
-      class="btn-primary btn-medium"
-      ng-reflect-ng-class="btn-primary,btn-medium"
-    >
-      <img
-        src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo="
-        width="100"
-      />
-       Template test
-  
-    </button>
-  </my-button>
-</storybook-wrapper>
-`;
diff --git a/code/frameworks/angular/template/stories/docgen-components/doc-button/doc-button.component.html b/code/frameworks/angular/template/stories/docgen-components/doc-button/doc-button.component.html
deleted file mode 100644
index 7af61d6f344..00000000000
--- a/code/frameworks/angular/template/stories/docgen-components/doc-button/doc-button.component.html
+++ /dev/null
@@ -1,7 +0,0 @@
-<button [disabled]="isDisabled" [ngClass]="classes" #buttonRef>
-  <img
-    width="100"
-    src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo="
-  />
-  {{ label }}
-</button>
diff --git a/code/frameworks/angular/template/stories/docgen-components/doc-button/doc-button.component.scss b/code/frameworks/angular/template/stories/docgen-components/doc-button/doc-button.component.scss
deleted file mode 100644
index 52c3e2bf0e2..00000000000
--- a/code/frameworks/angular/template/stories/docgen-components/doc-button/doc-button.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.btn-primary {
-  background-color: #ff9899;
-}
diff --git a/code/frameworks/angular/template/stories/docgen-components/doc-button/doc-button.component.ts b/code/frameworks/angular/template/stories/docgen-components/doc-button/doc-button.component.ts
deleted file mode 100644
index 5c9a7461a28..00000000000
--- a/code/frameworks/angular/template/stories/docgen-components/doc-button/doc-button.component.ts
+++ /dev/null
@@ -1,232 +0,0 @@
-/* eslint-disable no-console */
-/* eslint-disable no-underscore-dangle */
-import {
-  Component,
-  ElementRef,
-  EventEmitter,
-  HostBinding,
-  HostListener,
-  Input,
-  Output,
-  ViewChild,
-} from '@angular/core';
-
-export const exportedConstant = 'An exported constant';
-
-export type ButtonSize = 'small' | 'medium' | 'large' | 'xlarge';
-
-export interface ISomeInterface {
-  one: string;
-  two: boolean;
-  three: any[];
-}
-
-export enum ButtonAccent {
-  'Normal' = 'Normal',
-  'High' = 'High',
-}
-
-/**
- * This is a simple button that demonstrates various JSDoc handling in Storybook Docs for Angular.
- *
- * It supports [markdown](https://en.wikipedia.org/wiki/Markdown), so you can embed formatted text,
- * like **bold**, _italic_, and `inline code`.
- *
- * > How you like dem apples?! It's never been easier to document all your components.
- *
- * @string Hello world
- * @link [Example](http://example.com)
- * @code `ThingThing`
- * @html <span class="badge">aaa</span>
- */
-@Component({
-  selector: 'my-button',
-  templateUrl: './doc-button.component.html',
-  styleUrls: ['./doc-button.component.scss'],
-})
-export class DocButtonComponent<T> {
-  @ViewChild('buttonRef', { static: false }) buttonRef: ElementRef;
-
-  /** Test default value. */
-  @Input()
-  public theDefaultValue = 'Default value in component';
-
-  /**
-   * Setting default value here because compodoc won't get the default value for accessors
-   * @default Another default value
-   * */
-  @Input()
-  get anotherDefaultValue() {
-    return this._anotherDefaultValue;
-  }
-
-  set anotherDefaultValue(v: string) {
-    this._anotherDefaultValue = v;
-  }
-
-  _anotherDefaultValue = 'Another default value';
-
-  /** Test null default value. */
-  @Input()
-  public aNullValue = null;
-
-  /** Test null default value. */
-  @Input()
-  public anUndefinedValue;
-
-  /** Test numeric default value. */
-  @Input()
-  public aNumericValue = 123;
-
-  /** Appearance style of the button. */
-  @Input()
-  public appearance: 'primary' | 'secondary' = 'secondary';
-
-  /** Sets the button to a disabled state. */
-  @Input()
-  public isDisabled = false;
-
-  /** Specify the accent-type of the button */
-  @Input()
-  public accent: ButtonAccent = ButtonAccent.Normal;
-
-  /** Specifies some arbitrary object. This comment is to test certain chars like apostrophes - it's working */
-  @Input() public someDataObject: ISomeInterface;
-
-  /**
-   * The inner text of the button.
-   *
-   * @required
-   */
-  @Input()
-  public label: string;
-
-  /** Size of the button. */
-  @Input()
-  public size?: ButtonSize = 'medium';
-
-  /**
-   * Some input you shouldn't use.
-   *
-   * @deprecated
-   */
-  @Input()
-  public somethingYouShouldNotUse = false;
-
-  /**
-   * Handler to be called when the button is clicked by a user.
-   *
-   * Will also block the emission of the event if `isDisabled` is true.
-   */
-  @Output()
-  public onClick = new EventEmitter<Event>();
-
-  /**
-   * This is an internal method that we don't want to document and have added the `ignore` annotation to.
-   *
-   * @ignore
-   */
-  public handleClick(event: Event) {
-    event.stopPropagation();
-
-    if (!this.isDisabled) {
-      this.onClick.emit(event);
-    }
-  }
-
-  private _inputValue = 'some value';
-
-  /** Setter for `inputValue` that is also an `@Input`. */
-  @Input()
-  public set inputValue(value: string) {
-    this._inputValue = value;
-  }
-
-  /** Getter for `inputValue`. */
-  public get inputValue() {
-    return this._inputValue;
-  }
-
-  @HostListener('click', ['$event'])
-  onClickListener(event) {
-    console.log('button', event.target);
-    this.handleClick(event);
-  }
-
-  @HostBinding('class.focused') focus = false;
-
-  /**
-   * Returns all the CSS classes for the button.
-   *
-   * @ignore
-   */
-  public get classes(): string[] {
-    return [this.appearance, this.size]
-      .filter((_class) => !!_class)
-      .map((_class) => `btn-${_class}`);
-  }
-
-  /**
-   * @ignore
-   */
-  public ignoredProperty = 'Ignore me';
-
-  /** Public value. */
-  public internalProperty = 'Public hello';
-
-  /** Private value. */
-  private _value = 'Private hello';
-
-  /** Set the private value. */
-  public set value(value: string | number) {
-    this._value = `${value}`;
-  }
-
-  /** Get the private value. */
-  public get value(): string | number {
-    return this._value;
-  }
-
-  /**
-   * An internal calculation method which adds `x` and `y` together.
-   *
-   * @param x Some number you'd like to use.
-   * @param y Some other number or string you'd like to use, will have `parseInt()` applied before calculation.
-   */
-  public calc(x: number, y: string | number): number {
-    return x + parseInt(`${y}`, 10);
-  }
-
-  /** A public method using an interface. */
-  public publicMethod(things: ISomeInterface) {
-    console.log(things);
-  }
-
-  /**
-   * A protected method.
-   *
-   * @param id Some `id`.
-   */
-  protected protectedMethod(id?: number) {
-    console.log(id);
-  }
-
-  /**
-   * A private method.
-   *
-   * @param password Some `password`.
-   */
-  private privateMethod(password: string) {
-    console.log(password);
-  }
-
-  @Input('showKeyAlias')
-  public showKey: keyof T;
-
-  @Input()
-  public set item(item: T[]) {
-    this.processedItem = item;
-  }
-
-  public processedItem: T[];
-}
diff --git a/code/frameworks/angular/template/stories/docgen-components/doc-button/doc-button.stories.mdx b/code/frameworks/angular/template/stories/docgen-components/doc-button/doc-button.stories.mdx
deleted file mode 100644
index 517fac05b04..00000000000
--- a/code/frameworks/angular/template/stories/docgen-components/doc-button/doc-button.stories.mdx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
-import { DocButtonComponent } from './doc-button.component';
-
-<Meta title='Addons/Docs/DocButtonDefaultValue' />
-
-# ArgsTable in MDX with default values
-
-`theDefaultValue` should show the default value from the component comments
-
-<ArgsTable of={DocButtonComponent}/>
diff --git a/code/frameworks/angular/template/stories/docgen-components/doc-button/doc-button.stories.ts b/code/frameworks/angular/template/stories/docgen-components/doc-button/doc-button.stories.ts
deleted file mode 100644
index c411acf4636..00000000000
--- a/code/frameworks/angular/template/stories/docgen-components/doc-button/doc-button.stories.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { DocButtonComponent } from './doc-button.component';
-
-export default {
-  title: 'Addons/Docs/DocButton',
-  component: DocButtonComponent,
-};
-
-export const Basic = (args) => ({
-  props: args,
-});
-Basic.args = { label: 'Args test', isDisabled: false };
-Basic.ArgTypes = {
-  theDefaultValue: {
-    table: {
-      defaultValue: { summary: 'Basic default value' },
-    },
-  },
-};
-
-export const WithTemplate = (args) => ({
-  props: args,
-  template: '<my-button [label]="label" [appearance]="appearance"></my-button>',
-});
-WithTemplate.args = { label: 'Template test', appearance: 'primary' };
diff --git a/code/frameworks/angular/template/stories/docgen-components/doc-directive/__snapshots__/doc-directive.stories.storyshot b/code/frameworks/angular/template/stories/docgen-components/doc-directive/__snapshots__/doc-directive.stories.storyshot
deleted file mode 100644
index dcd5223c795..00000000000
--- a/code/frameworks/angular/template/stories/docgen-components/doc-directive/__snapshots__/doc-directive.stories.storyshot
+++ /dev/null
@@ -1,15 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addons/Docs/DocDirective Basic 1`] = `
-<storybook-wrapper>
-  <div
-    docdirective=""
-    ng-reflect-has-gray-background="true"
-    style="background-color: lightgray;"
-  >
-    <h1>
-      DocDirective
-    </h1>
-  </div>
-</storybook-wrapper>
-`;
diff --git a/code/frameworks/angular/template/stories/docgen-components/doc-directive/doc-directive.directive.ts b/code/frameworks/angular/template/stories/docgen-components/doc-directive/doc-directive.directive.ts
deleted file mode 100644
index bcb039c9d9f..00000000000
--- a/code/frameworks/angular/template/stories/docgen-components/doc-directive/doc-directive.directive.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-/* eslint-disable no-useless-constructor */
-import { Directive, ElementRef, AfterViewInit, Input } from '@angular/core';
-
-/**
- * This is an Angular Directive
- * example that has a Prop Table.
- */
-@Directive({
-  selector: '[docDirective]',
-})
-export class DocDirective implements AfterViewInit {
-  constructor(private ref: ElementRef) {}
-
-  /**
-   * Will apply gray background color
-   * if set to true.
-   */
-  @Input() hasGrayBackground = false;
-
-  ngAfterViewInit(): void {
-    if (this.hasGrayBackground) {
-      this.ref.nativeElement.style = 'background-color: lightgray';
-    }
-  }
-}
diff --git a/code/frameworks/angular/template/stories/docgen-components/doc-directive/doc-directive.stories.ts b/code/frameworks/angular/template/stories/docgen-components/doc-directive/doc-directive.stories.ts
deleted file mode 100644
index fe5d8d97b23..00000000000
--- a/code/frameworks/angular/template/stories/docgen-components/doc-directive/doc-directive.stories.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { DocDirective } from './doc-directive.directive';
-
-export default {
-  title: 'Addons/Docs/DocDirective',
-  component: DocDirective,
-};
-
-const modules = {
-  declarations: [DocDirective],
-};
-
-export const Basic = () => ({
-  moduleMetadata: modules,
-  template: '<div docDirective [hasGrayBackground]="true"><h1>DocDirective</h1></div>',
-});
diff --git a/code/frameworks/angular/template/stories/docgen-components/doc-injectable/__snapshots__/doc-injectable.stories.storyshot b/code/frameworks/angular/template/stories/docgen-components/doc-injectable/__snapshots__/doc-injectable.stories.storyshot
deleted file mode 100644
index 04582c4cdaf..00000000000
--- a/code/frameworks/angular/template/stories/docgen-components/doc-injectable/__snapshots__/doc-injectable.stories.storyshot
+++ /dev/null
@@ -1,11 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addons/Docs/DocInjectable Basic 1`] = `
-<storybook-wrapper>
-  <div>
-    <h1>
-      DocInjectable
-    </h1>
-  </div>
-</storybook-wrapper>
-`;
diff --git a/code/frameworks/angular/template/stories/docgen-components/doc-injectable/doc-injectable.service.ts b/code/frameworks/angular/template/stories/docgen-components/doc-injectable/doc-injectable.service.ts
deleted file mode 100644
index b6ad136fec3..00000000000
--- a/code/frameworks/angular/template/stories/docgen-components/doc-injectable/doc-injectable.service.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { Injectable } from '@angular/core';
-import { HttpHeaders } from '@angular/common/http';
-
-/**
- * This is an Angular Injectable
- * example that has a Prop Table.
- */
-@Injectable({
-  providedIn: 'root',
-})
-export class DocInjectableService {
-  /**
-   * Auth headers to use.
-   */
-  auth: any;
-
-  constructor() {
-    this.auth = new HttpHeaders({ 'Content-Type': 'application/json' });
-  }
-
-  /**
-   * Get posts from Backend.
-   */
-  getPosts() {
-    return [];
-  }
-}
diff --git a/code/frameworks/angular/template/stories/docgen-components/doc-injectable/doc-injectable.stories.ts b/code/frameworks/angular/template/stories/docgen-components/doc-injectable/doc-injectable.stories.ts
deleted file mode 100644
index b329ffc8936..00000000000
--- a/code/frameworks/angular/template/stories/docgen-components/doc-injectable/doc-injectable.stories.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { DocInjectableService } from './doc-injectable.service';
-
-export default {
-  title: 'Addons/Docs/DocInjectable',
-  component: DocInjectableService,
-  parameters: {
-    controls: { hideNoControlsWarning: true },
-  },
-};
-
-const modules = {
-  provider: [DocInjectableService],
-};
-
-export const Basic = () => ({
-  moduleMetadata: modules,
-  template: '<div><h1>DocInjectable</h1></div>',
-});
diff --git a/code/frameworks/angular/template/stories/docgen-components/doc-pipe/__snapshots__/doc-pipe.stories.storyshot b/code/frameworks/angular/template/stories/docgen-components/doc-pipe/__snapshots__/doc-pipe.stories.storyshot
deleted file mode 100644
index 50e37db418e..00000000000
--- a/code/frameworks/angular/template/stories/docgen-components/doc-pipe/__snapshots__/doc-pipe.stories.storyshot
+++ /dev/null
@@ -1,11 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addons/Docs/DocPipe Basic 1`] = `
-<storybook-wrapper>
-  <div>
-    <h1>
-      DOCPIPE
-    </h1>
-  </div>
-</storybook-wrapper>
-`;
diff --git a/code/frameworks/angular/template/stories/docgen-components/doc-pipe/doc-pipe.pipe.ts b/code/frameworks/angular/template/stories/docgen-components/doc-pipe/doc-pipe.pipe.ts
deleted file mode 100644
index 6b7aca418a3..00000000000
--- a/code/frameworks/angular/template/stories/docgen-components/doc-pipe/doc-pipe.pipe.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core';
-
-/**
- * This is an Angular Pipe
- * example that has a Prop Table.
- */
-@Pipe({
-  name: 'docPipe',
-})
-export class DocPipe implements PipeTransform {
-  /**
-   * Transforms a string into uppercase.
-   * @param value string
-   */
-  transform(value: string): string {
-    return value?.toUpperCase();
-  }
-}
diff --git a/code/frameworks/angular/template/stories/docgen-components/doc-pipe/doc-pipe.stories.ts b/code/frameworks/angular/template/stories/docgen-components/doc-pipe/doc-pipe.stories.ts
deleted file mode 100644
index 07c8660958e..00000000000
--- a/code/frameworks/angular/template/stories/docgen-components/doc-pipe/doc-pipe.stories.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { DocPipe } from './doc-pipe.pipe';
-
-export default {
-  title: 'Addons/Docs/DocPipe',
-  component: DocPipe,
-  parameters: {
-    controls: { hideNoControlsWarning: true },
-  },
-};
-
-const modules = {
-  declarations: [DocPipe],
-};
-
-export const Basic = () => ({
-  moduleMetadata: modules,
-  template: `<div><h1>{{ 'DocPipe' | docPipe }}</h1></div>`,
-});

From 1cfaba4b8cf6946f1bba20fe7a1bfb287ccfe29c Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@chromatic.com>
Date: Tue, 11 Oct 2022 10:36:38 +1100
Subject: [PATCH 28/47] Put `--index-json` back

---
 scripts/tasks/test-runner.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/tasks/test-runner.ts b/scripts/tasks/test-runner.ts
index ac545b54e38..2909a9fc15f 100644
--- a/scripts/tasks/test-runner.ts
+++ b/scripts/tasks/test-runner.ts
@@ -15,7 +15,7 @@ export const testRunner: Task = {
     await exec(`yarn add --dev @storybook/test-runner`, execOptions);
 
     await exec(
-      `yarn test-storybook --url http://localhost:${PORT} --junit`,
+      `yarn test-storybook --url http://localhost:${PORT} --junit --index-json`,
       {
         ...execOptions,
         env: {

From e40b9eea6ede0c773073d42631bc5015befd5803 Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@chromatic.com>
Date: Tue, 11 Oct 2022 12:43:56 +1100
Subject: [PATCH 29/47] Skip more sandbox tasks for now

---
 code/lib/cli/src/repro-templates.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/code/lib/cli/src/repro-templates.ts b/code/lib/cli/src/repro-templates.ts
index 55299bef7da..af61f36f637 100644
--- a/code/lib/cli/src/repro-templates.ts
+++ b/code/lib/cli/src/repro-templates.ts
@@ -124,6 +124,8 @@ const svelteViteTemplates = {
     name: 'Svelte Vite (TS)',
     script: 'yarn create vite . --template svelte-ts',
     cadence: ['ci', 'daily', 'weekly'],
+    // Re-enable once https://github.com/storybookjs/storybook/issues/19351 is fixed.
+    skipTasks: ['smoke-test'],
     expected: {
       framework: '@storybook/svelte-vite',
       renderer: '@storybook/svelte',
@@ -151,6 +153,8 @@ const litViteTemplates = {
     name: 'Lit Vite (JS)',
     script: 'yarn create vite . --template lit',
     cadence: ['ci', 'daily', 'weekly'] as any,
+    // Re-enable once https://github.com/storybookjs/storybook/issues/19351 is fixed.
+    skipTasks: ['smoke-test'],
     expected: {
       framework: '@storybook/web-components-vite',
       renderer: '@storybook/web-components',
@@ -161,6 +165,8 @@ const litViteTemplates = {
     name: 'Lit Vite (TS)',
     script: 'yarn create vite . --template lit-ts',
     cadence: ['ci', 'daily', 'weekly'] as any,
+    // Re-enable once https://github.com/storybookjs/storybook/issues/19351 is fixed.
+    skipTasks: ['smoke-test'],
     expected: {
       framework: '@storybook/web-components-vite',
       renderer: '@storybook/web-components',

From c7ca0f4e24c2a873998afd7de3a46ba81d11ad3e Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@chromatic.com>
Date: Tue, 11 Oct 2022 12:52:45 +1100
Subject: [PATCH 30/47] Reduce smoke test parallelism

---
 .circleci/config.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index aa0fc5a4eb9..3e9d1c1ec61 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -324,7 +324,7 @@ jobs:
     executor:
       class: medium+
       name: sb_node_14_browsers
-    parallelism: 15
+    parallelism: 12
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'

From 2234f4bfcd14e7bc47fc8e3453d9f59d6fa70ea3 Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@chromatic.com>
Date: Tue, 11 Oct 2022 13:32:20 +1100
Subject: [PATCH 31/47] Disable `smoke-tests` for more frameworks

---
 .circleci/config.yml                | 2 +-
 code/lib/cli/src/repro-templates.ts | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 3e9d1c1ec61..0e45f2a0e6b 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -324,7 +324,7 @@ jobs:
     executor:
       class: medium+
       name: sb_node_14_browsers
-    parallelism: 12
+    parallelism: 10
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
diff --git a/code/lib/cli/src/repro-templates.ts b/code/lib/cli/src/repro-templates.ts
index af61f36f637..1b27f635b48 100644
--- a/code/lib/cli/src/repro-templates.ts
+++ b/code/lib/cli/src/repro-templates.ts
@@ -101,6 +101,8 @@ const vue2ViteTemplates = {
     script:
       'yarn create vite . --template vanilla && yarn add --dev @vitejs/plugin-vue2 vue-template-compiler vue@2 && echo "import vue2 from \'@vitejs/plugin-vue2\';\n\nexport default {\n\tplugins: [vue2()]\n};" > vite.config.js',
     cadence: ['ci', 'daily', 'weekly'],
+    // Re-enable once https://github.com/storybookjs/storybook/issues/19351 is fixed.
+    skipTasks: ['smoke-test'],
     expected: {
       framework: '@storybook/vue2-vite',
       renderer: '@storybook/vue',
@@ -140,6 +142,8 @@ const angularCliTemplates = {
     script:
       'npx -p @angular/cli ng new angular-latest --directory . --routing=true --minimal=true --style=scss --skip-install=true --strict --skip-git',
     cadence: ['ci', 'daily', 'weekly'],
+    // Re-enable once https://github.com/storybookjs/storybook/issues/19351 is fixed.
+    skipTasks: ['smoke-test'],
     expected: {
       framework: '@storybook/angular',
       renderer: '@storybook/angular',

From 9c6d06c7d5cf76b144b1e9a4aad3a1f4a61dc0ce Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@chromatic.com>
Date: Tue, 11 Oct 2022 13:37:33 +1100
Subject: [PATCH 32/47] Actually wait for init promise in right place

---
 code/lib/preview-web/src/PreviewWeb.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/code/lib/preview-web/src/PreviewWeb.tsx b/code/lib/preview-web/src/PreviewWeb.tsx
index c5bbd7722ff..2141466a108 100644
--- a/code/lib/preview-web/src/PreviewWeb.tsx
+++ b/code/lib/preview-web/src/PreviewWeb.tsx
@@ -217,7 +217,9 @@ export class PreviewWeb<TFramework extends AnyFramework> extends Preview<TFramew
     }
   }
 
-  onSetCurrentStory(selection: { storyId: StoryId; viewMode?: ViewMode }) {
+  async onSetCurrentStory(selection: { storyId: StoryId; viewMode?: ViewMode }) {
+    await this.storyStore.initializationPromise;
+
     this.urlStore.setSelection({ viewMode: 'story', ...selection });
     this.channel.emit(CURRENT_STORY_WAS_SET, this.urlStore.selection);
     this.renderSelection();

From 2ddf91cff5c07168e106348bbfcf26bd2210fc9a Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@chromatic.com>
Date: Tue, 11 Oct 2022 14:36:15 +1100
Subject: [PATCH 33/47] Use a canary version of the test runner

To resolve `core-js` problems
---
 scripts/tasks/test-runner.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/scripts/tasks/test-runner.ts b/scripts/tasks/test-runner.ts
index 2909a9fc15f..55c683d15dc 100644
--- a/scripts/tasks/test-runner.ts
+++ b/scripts/tasks/test-runner.ts
@@ -12,7 +12,8 @@ export const testRunner: Task = {
   async run({ sandboxDir, junitFilename }, { dryRun, debug }) {
     const execOptions = { cwd: sandboxDir };
 
-    await exec(`yarn add --dev @storybook/test-runner`, execOptions);
+    // Using a fixed version to work around core-js problems
+    await exec(`yarn add --dev @storybook/test-runner@0.8.1--canary.202.99d82aa.0`, execOptions);
 
     await exec(
       `yarn test-storybook --url http://localhost:${PORT} --junit --index-json`,

From 12ac82526bd976075269f9584765704ebfbc3c2d Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@chromatic.com>
Date: Tue, 11 Oct 2022 15:15:43 +1100
Subject: [PATCH 34/47] Update test-runner.ts

---
 scripts/tasks/test-runner.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/scripts/tasks/test-runner.ts b/scripts/tasks/test-runner.ts
index 55c683d15dc..fe73bbe422c 100644
--- a/scripts/tasks/test-runner.ts
+++ b/scripts/tasks/test-runner.ts
@@ -15,6 +15,8 @@ export const testRunner: Task = {
     // Using a fixed version to work around core-js problems
     await exec(`yarn add --dev @storybook/test-runner@0.8.1--canary.202.99d82aa.0`, execOptions);
 
+    console.log(await exact(`yarn why core-js`));
+    
     await exec(
       `yarn test-storybook --url http://localhost:${PORT} --junit --index-json`,
       {

From 8855e67fe39eaeb4c23fcaa98d5c566d64699557 Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@chromatic.com>
Date: Tue, 11 Oct 2022 16:52:46 +1100
Subject: [PATCH 35/47] Fix typo

---
 scripts/tasks/test-runner.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/scripts/tasks/test-runner.ts b/scripts/tasks/test-runner.ts
index fe73bbe422c..25a9fd0d96f 100644
--- a/scripts/tasks/test-runner.ts
+++ b/scripts/tasks/test-runner.ts
@@ -15,8 +15,8 @@ export const testRunner: Task = {
     // Using a fixed version to work around core-js problems
     await exec(`yarn add --dev @storybook/test-runner@0.8.1--canary.202.99d82aa.0`, execOptions);
 
-    console.log(await exact(`yarn why core-js`));
-    
+    console.log(await exec(`yarn why core-js`));
+
     await exec(
       `yarn test-storybook --url http://localhost:${PORT} --junit --index-json`,
       {

From bcbe558a236a4a74f24269bdc0c6bcc9870f4296 Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@chromatic.com>
Date: Tue, 11 Oct 2022 17:03:45 +1100
Subject: [PATCH 36/47] Debug yarn why

---
 scripts/tasks/test-runner.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/tasks/test-runner.ts b/scripts/tasks/test-runner.ts
index 25a9fd0d96f..942027b7267 100644
--- a/scripts/tasks/test-runner.ts
+++ b/scripts/tasks/test-runner.ts
@@ -15,7 +15,7 @@ export const testRunner: Task = {
     // Using a fixed version to work around core-js problems
     await exec(`yarn add --dev @storybook/test-runner@0.8.1--canary.202.99d82aa.0`, execOptions);
 
-    console.log(await exec(`yarn why core-js`));
+    await exec(`yarn why core-js`, {}, { debug: true });
 
     await exec(
       `yarn test-storybook --url http://localhost:${PORT} --junit --index-json`,

From b204293b6a4c07bcf0e96211dbeefe55f0f559f2 Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@chromatic.com>
Date: Wed, 12 Oct 2022 11:46:31 +1100
Subject: [PATCH 37/47] Reduce the number of workers to the test runner

---
 scripts/tasks/test-runner.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/tasks/test-runner.ts b/scripts/tasks/test-runner.ts
index 942027b7267..750c848cf11 100644
--- a/scripts/tasks/test-runner.ts
+++ b/scripts/tasks/test-runner.ts
@@ -18,7 +18,7 @@ export const testRunner: Task = {
     await exec(`yarn why core-js`, {}, { debug: true });
 
     await exec(
-      `yarn test-storybook --url http://localhost:${PORT} --junit --index-json`,
+      `yarn test-storybook --url http://localhost:${PORT} --junit --index-json --maxWorkers=2`,
       {
         ...execOptions,
         env: {

From 41fa8500af00459fc863c3dcc2b53da25ba65919 Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@chromatic.com>
Date: Wed, 12 Oct 2022 15:01:43 +1100
Subject: [PATCH 38/47] Disable test runner for vue-cli

---
 code/lib/cli/src/repro-templates.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/code/lib/cli/src/repro-templates.ts b/code/lib/cli/src/repro-templates.ts
index 1b27f635b48..a87f22fee64 100644
--- a/code/lib/cli/src/repro-templates.ts
+++ b/code/lib/cli/src/repro-templates.ts
@@ -184,6 +184,8 @@ const vueCliTemplates = {
     name: 'Vue-CLI (Default JS)',
     script: 'npx -p @vue/cli vue create . --default --packageManager=yarn --force --merge',
     cadence: ['ci', 'daily', 'weekly'],
+    // Re-enable once https://github.com/storybookjs/storybook/issues/19453 is fixed.
+    skipTasks: ['test-runner'],
     expected: {
       framework: '@storybook/vue3-webpack5',
       renderer: '@storybook/vue3',
@@ -195,6 +197,8 @@ const vueCliTemplates = {
     script:
       'npx -p @vue/cli vue create . --default --packageManager=yarn --force --merge --preset=Default\\ (Vue\\ 2)',
     cadence: ['ci', 'daily', 'weekly'],
+    // Re-enable once https://github.com/storybookjs/storybook/issues/19453 is fixed.
+    skipTasks: ['test-runner'],
     expected: {
       framework: '@storybook/vue-webpack5',
       renderer: '@storybook/vue',

From 515ac28f3465b9c9283d5d230fe227e7cd2ab8f8 Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@chromatic.com>
Date: Wed, 12 Oct 2022 15:16:17 +1100
Subject: [PATCH 39/47] Decrement test runner tasks

---
 .circleci/config.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 0e45f2a0e6b..48abff2aa30 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -358,7 +358,7 @@ jobs:
     executor:
       class: medium+
       name: sb_node_14_browsers
-    parallelism: 16
+    parallelism: 14
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'

From dee025d4eaca7bb4a0784c7b9a33189e6f5a8172 Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@chromatic.com>
Date: Wed, 12 Oct 2022 15:33:45 +1100
Subject: [PATCH 40/47] Fix parallelism

---
 .circleci/config.yml | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 57b917ce717..da4c735d1f3 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -305,7 +305,7 @@ jobs:
     executor:
       class: medium+
       name: sb_node_14_browsers
-    parallelism: 16
+    parallelism: 17
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
@@ -324,7 +324,7 @@ jobs:
     executor:
       class: medium+
       name: sb_node_14_browsers
-    parallelism: 10
+    parallelism: 11
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
@@ -339,7 +339,7 @@ jobs:
     executor:
       class: medium+
       name: sb_node_14_browsers
-    parallelism: 16
+    parallelism: 17
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
@@ -358,7 +358,7 @@ jobs:
     executor:
       class: medium+
       name: sb_node_14_browsers
-    parallelism: 14
+    parallelism: 15
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
@@ -373,7 +373,7 @@ jobs:
     executor:
       class: medium+
       name: sb_node_14_browsers
-    parallelism: 16
+    parallelism: 17
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
@@ -388,7 +388,7 @@ jobs:
     executor:
       class: medium+
       name: sb_playwright
-    parallelism: 16
+    parallelism: 17
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'

From 564a4f00a9e8d0e0f5881ffe4d5f451df088a59b Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@chromatic.com>
Date: Wed, 12 Oct 2022 15:54:31 +1100
Subject: [PATCH 41/47] Fix types in shortcut(s)

---
 code/lib/api/src/lib/shortcut.ts      | 12 +++++++++---
 code/lib/api/src/modules/shortcuts.ts | 26 ++++++++------------------
 2 files changed, 17 insertions(+), 21 deletions(-)

diff --git a/code/lib/api/src/lib/shortcut.ts b/code/lib/api/src/lib/shortcut.ts
index 2a16a9ddfa4..8a3416caca4 100644
--- a/code/lib/api/src/lib/shortcut.ts
+++ b/code/lib/api/src/lib/shortcut.ts
@@ -1,7 +1,7 @@
 import global from 'global';
 
 // The shortcut is our JSON-ifiable representation of a shortcut combination
-import type { KeyCollection, Event } from '../modules/shortcuts';
+import type { KeyCollection } from '../modules/shortcuts';
 
 const { navigator } = global;
 
@@ -14,9 +14,15 @@ export const optionOrAltSymbol = () => (isMacLike() ? '⌥' : 'alt');
 export const isShortcutTaken = (arr1: string[], arr2: string[]): boolean =>
   JSON.stringify(arr1) === JSON.stringify(arr2);
 
+// A subset of `KeyboardEvent` that's serialized over the channel, see `PreviewWeb.tsx`
+export type KeyboardEventLike = Pick<
+  KeyboardEvent,
+  'altKey' | 'ctrlKey' | 'metaKey' | 'shiftKey' | 'key' | 'code' | 'keyCode' | 'preventDefault'
+>;
+
 // Map a keyboard event to a keyboard shortcut
 // NOTE: if we change the fields on the event that we need, we'll need to update the serialization in core/preview/start.js
-export const eventToShortcut = (e: KeyboardEvent): KeyCollection | null => {
+export const eventToShortcut = (e: KeyboardEventLike): KeyCollection | null => {
   // Meta key only doesn't map to a shortcut
   if (['Meta', 'Alt', 'Control', 'Shift'].includes(e.key)) {
     return null;
@@ -72,7 +78,7 @@ export const shortcutMatchesShortcut = (
 };
 
 // Should this keyboard event trigger this keyboard shortcut?
-export const eventMatchesShortcut = (e: Event, shortcut: KeyCollection): boolean => {
+export const eventMatchesShortcut = (e: KeyboardEventLike, shortcut: KeyCollection): boolean => {
   return shortcutMatchesShortcut(eventToShortcut(e), shortcut);
 };
 
diff --git a/code/lib/api/src/modules/shortcuts.ts b/code/lib/api/src/modules/shortcuts.ts
index 626dede58ce..6e891e428f7 100644
--- a/code/lib/api/src/modules/shortcuts.ts
+++ b/code/lib/api/src/modules/shortcuts.ts
@@ -1,9 +1,10 @@
 import global from 'global';
 import { PREVIEW_KEYDOWN } from '@storybook/core-events';
 
+import { DOMElement } from 'react';
 import type { ModuleFn } from '../index';
 
-import { shortcutMatchesShortcut, eventToShortcut } from '../lib/shortcut';
+import { shortcutMatchesShortcut, eventToShortcut, KeyboardEventLike } from '../lib/shortcut';
 import { focusableUIElements } from './layout';
 
 const { navigator, document } = global;
@@ -31,7 +32,7 @@ export interface SubAPI {
   setAddonShortcut(addon: string, shortcut: AddonShortcut): Promise<AddonShortcut>;
   restoreAllDefaultShortcuts(): Promise<Shortcuts>;
   restoreDefaultShortcut(action: Action): Promise<KeyCollection>;
-  handleKeydownEvent(event: Event): void;
+  handleKeydownEvent(event: KeyboardEventLike): void;
   handleShortcutFeature(feature: Action): void;
 }
 export type KeyCollection = string[];
@@ -92,21 +93,10 @@ export const defaultShortcuts: Shortcuts = Object.freeze({
 });
 
 const addonsShortcuts: AddonShortcuts = {};
-export interface Event extends KeyboardEvent {
-  target: {
-    tagName: string;
-    addEventListener(): void;
-    removeEventListener(): boolean;
-    dispatchEvent(event: Event): boolean;
-    getAttribute(attr: string): string | null;
-  };
-}
 
-function focusInInput(event: Event) {
-  return (
-    /input|textarea/i.test(event.target.tagName) ||
-    event.target.getAttribute('contenteditable') !== null
-  );
+function focusInInput(event: KeyboardEvent) {
+  const target = event.target as Element;
+  return /input|textarea/i.test(target.tagName) || target.getAttribute('contenteditable') !== null;
 }
 
 export const init: ModuleFn = ({ store, fullAPI }) => {
@@ -347,14 +337,14 @@ export const init: ModuleFn = ({ store, fullAPI }) => {
 
   const initModule = () => {
     // Listen for keydown events in the manager
-    document.addEventListener('keydown', (event: Event) => {
+    document.addEventListener('keydown', (event: KeyboardEvent) => {
       if (!focusInInput(event)) {
         fullAPI.handleKeydownEvent(event);
       }
     });
 
     // Also listen to keydown events sent over the channel
-    fullAPI.on(PREVIEW_KEYDOWN, (data: { event: Event }) => {
+    fullAPI.on(PREVIEW_KEYDOWN, (data: { event: KeyboardEventLike }) => {
       fullAPI.handleKeydownEvent(data.event);
     });
   };

From 3492b4c423b6e42ac495da6779c4a21e5dfe58c7 Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@chromatic.com>
Date: Thu, 13 Oct 2022 13:29:49 +1100
Subject: [PATCH 42/47] Update button component to use label

---
 .../angular/template/components/button.component.ts        | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/code/frameworks/angular/template/components/button.component.ts b/code/frameworks/angular/template/components/button.component.ts
index cf111b4255a..cc28c096578 100644
--- a/code/frameworks/angular/template/components/button.component.ts
+++ b/code/frameworks/angular/template/components/button.component.ts
@@ -1,8 +1,7 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core';
 
 @Component({
-  // Needs to be a different name to the CLI template button as they have a
-  // subtly different interface [label vs children] (for compodoc)
+  // Needs to be a different name to the CLI template button
   selector: 'storybook-framework-button',
   template: ` <button
     type="button"
@@ -10,7 +9,7 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
     [ngClass]="classes"
     [ngStyle]="{ 'background-color': backgroundColor }"
   >
-    {{ children }}
+    {{ label }}
   </button>`,
   styleUrls: ['./button.css'],
 })
@@ -39,7 +38,7 @@ export default class FrameworkButtonComponent {
    * @required
    */
   @Input()
-  children = 'Button';
+  label = 'Button';
 
   /**
    * Optional click handler

From ee7c109464481b9d6bb30724a8c9f8aeec1d4082 Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@chromatic.com>
Date: Thu, 13 Oct 2022 14:18:04 +1100
Subject: [PATCH 43/47] Parallelism was wrong

---
 .circleci/config.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index da4c735d1f3..224ed237e48 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -324,7 +324,7 @@ jobs:
     executor:
       class: medium+
       name: sb_node_14_browsers
-    parallelism: 11
+    parallelism: 9
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'

From e0ebbe42b447a1babece78113e0adae09d65b5b9 Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@chromatic.com>
Date: Thu, 13 Oct 2022 14:18:40 +1100
Subject: [PATCH 44/47] Remove unused import

---
 code/lib/api/src/modules/shortcuts.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/code/lib/api/src/modules/shortcuts.ts b/code/lib/api/src/modules/shortcuts.ts
index 6e891e428f7..980d808cc62 100644
--- a/code/lib/api/src/modules/shortcuts.ts
+++ b/code/lib/api/src/modules/shortcuts.ts
@@ -1,7 +1,6 @@
 import global from 'global';
 import { PREVIEW_KEYDOWN } from '@storybook/core-events';
 
-import { DOMElement } from 'react';
 import type { ModuleFn } from '../index';
 
 import { shortcutMatchesShortcut, eventToShortcut, KeyboardEventLike } from '../lib/shortcut';

From 92b7404a19622c68661604ac5816379423e28961 Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@chromatic.com>
Date: Thu, 13 Oct 2022 15:47:32 +1100
Subject: [PATCH 45/47] Fix angular MDX story

---
 .../angular/template/stories/angular-mdx.stories.mdx          | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/code/frameworks/angular/template/stories/angular-mdx.stories.mdx b/code/frameworks/angular/template/stories/angular-mdx.stories.mdx
index 29b008efd4b..025f8c0663f 100644
--- a/code/frameworks/angular/template/stories/angular-mdx.stories.mdx
+++ b/code/frameworks/angular/template/stories/angular-mdx.stories.mdx
@@ -15,9 +15,9 @@ export const Button = globalThis.Components.Button;
 <Canvas>
   <Story name="Angular Story">
     {{
-      template: `<storybook-button-component [label]="text" (onClick)="onClick($event)"></storybook-button-component>`,
+      template: `<storybook-framework-button [label]="text" (onClick)="onClick($event)"></storybook-framework-button>`,
       props: {
-        label: 'hello button',
+        text: 'hello button',
         onClick: () => {},
       },
     }}

From eaf6cef6f1a4dffd33c990776d9968ebeb5dbe91 Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@chromatic.com>
Date: Thu, 13 Oct 2022 17:13:57 +1100
Subject: [PATCH 46/47] Refactor stories that used `component: `, which is no
 longer supported

---
 .../attribute-selectors.component.stories.ts  |  8 ++++
 .../class-selector.component.stories.ts       |  8 ++++
 ...ltiple-class-selector.component.stories.ts |  8 ++++
 .../multiple-selector.component.stories.ts    | 29 ++----------
 .../base-button.stories.ts                    | 12 +++++
 .../icon-button.stories.ts                    | 13 ++++++
 .../inheritance.stories.ts                    | 26 -----------
 .../ng-content-about-parent.stories.ts        | 45 +------------------
 .../stories/legacy/README.stories.mdx         |  7 ---
 .../legacy/component-in-story.stories.ts      | 15 -------
 10 files changed, 53 insertions(+), 118 deletions(-)
 create mode 100644 code/frameworks/angular/template/stories/basics/component-with-complex-selectors/attribute-selectors.component.stories.ts
 create mode 100644 code/frameworks/angular/template/stories/basics/component-with-complex-selectors/class-selector.component.stories.ts
 create mode 100644 code/frameworks/angular/template/stories/basics/component-with-complex-selectors/multiple-class-selector.component.stories.ts
 create mode 100644 code/frameworks/angular/template/stories/basics/component-with-inheritance/base-button.stories.ts
 create mode 100644 code/frameworks/angular/template/stories/basics/component-with-inheritance/icon-button.stories.ts
 delete mode 100644 code/frameworks/angular/template/stories/basics/component-with-inheritance/inheritance.stories.ts
 delete mode 100644 code/frameworks/angular/template/stories/legacy/README.stories.mdx
 delete mode 100644 code/frameworks/angular/template/stories/legacy/component-in-story.stories.ts

diff --git a/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/attribute-selectors.component.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/attribute-selectors.component.stories.ts
new file mode 100644
index 00000000000..d935de5215d
--- /dev/null
+++ b/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/attribute-selectors.component.stories.ts
@@ -0,0 +1,8 @@
+import { AttributeSelectorComponent } from './attribute-selector.component';
+
+export default {
+  // title: 'Basics / Component / With Complex Selectors',
+  component: AttributeSelectorComponent,
+};
+
+export const AttributeSelectors = {};
diff --git a/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/class-selector.component.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/class-selector.component.stories.ts
new file mode 100644
index 00000000000..c8da5e41e2c
--- /dev/null
+++ b/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/class-selector.component.stories.ts
@@ -0,0 +1,8 @@
+import { ClassSelectorComponent } from './class-selector.component';
+
+export default {
+  // title: 'Basics / Component / With Complex Selectors',
+  component: ClassSelectorComponent,
+};
+
+export const ClassSelectors = {};
diff --git a/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/multiple-class-selector.component.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/multiple-class-selector.component.stories.ts
new file mode 100644
index 00000000000..0ed46ecfdbc
--- /dev/null
+++ b/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/multiple-class-selector.component.stories.ts
@@ -0,0 +1,8 @@
+import { MultipleClassSelectorComponent } from './multiple-selector.component';
+
+export default {
+  // title: 'Basics / Component / With Complex Selectors',
+  component: MultipleClassSelectorComponent,
+};
+
+export const MultipleClassSelectors = {};
diff --git a/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/multiple-selector.component.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/multiple-selector.component.stories.ts
index fdab41391c3..3dac394c440 100644
--- a/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/multiple-selector.component.stories.ts
+++ b/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/multiple-selector.component.stories.ts
@@ -1,31 +1,8 @@
-import {
-  MultipleClassSelectorComponent,
-  MultipleSelectorComponent,
-} from './multiple-selector.component';
-import { AttributeSelectorComponent } from './attribute-selector.component';
-import { ClassSelectorComponent } from './class-selector.component';
+import { MultipleSelectorComponent } from './multiple-selector.component';
 
 export default {
   // title: 'Basics / Component / With Complex Selectors',
-  component: MultipleClassSelectorComponent,
+  component: MultipleSelectorComponent,
 };
 
-export const MultipleSelectors = () => ({
-  component: MultipleSelectorComponent,
-});
-MultipleSelectors.storyName = 'multiple selectors';
-
-export const AttributeSelectors = () => ({
-  component: AttributeSelectorComponent,
-});
-AttributeSelectors.storyName = 'attribute selectors';
-
-export const ClassSelectors = () => ({
-  component: ClassSelectorComponent,
-});
-ClassSelectors.storyName = 'class selectors';
-
-export const MultipleClassSelectors = () => ({
-  component: MultipleClassSelectorComponent,
-});
-MultipleClassSelectors.storyName = 'multiple class selectors';
+export const MultipleSelectors = {};
diff --git a/code/frameworks/angular/template/stories/basics/component-with-inheritance/base-button.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-inheritance/base-button.stories.ts
new file mode 100644
index 00000000000..a206115f5de
--- /dev/null
+++ b/code/frameworks/angular/template/stories/basics/component-with-inheritance/base-button.stories.ts
@@ -0,0 +1,12 @@
+import { BaseButtonComponent } from './base-button.component';
+
+export default {
+  // title: 'Basics / Component / With Inheritance',
+  component: BaseButtonComponent,
+};
+
+export const BaseButton = () => ({
+  props: {
+    label: 'this is label',
+  },
+});
diff --git a/code/frameworks/angular/template/stories/basics/component-with-inheritance/icon-button.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-inheritance/icon-button.stories.ts
new file mode 100644
index 00000000000..baefe65c4f5
--- /dev/null
+++ b/code/frameworks/angular/template/stories/basics/component-with-inheritance/icon-button.stories.ts
@@ -0,0 +1,13 @@
+import { IconButtonComponent } from './icon-button.component';
+
+export default {
+  // title: 'Basics / Component / With Inheritance',
+  component: IconButtonComponent,
+};
+
+export const IconButton = () => ({
+  props: {
+    icon: 'this is icon',
+    label: 'this is label',
+  },
+});
diff --git a/code/frameworks/angular/template/stories/basics/component-with-inheritance/inheritance.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-inheritance/inheritance.stories.ts
deleted file mode 100644
index 90e05e73910..00000000000
--- a/code/frameworks/angular/template/stories/basics/component-with-inheritance/inheritance.stories.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { IconButtonComponent } from './icon-button.component';
-import { BaseButtonComponent } from './base-button.component';
-
-export default {
-  // title: 'Basics / Component / With Inheritance',
-  component: IconButtonComponent,
-};
-
-export const IconButton = () => ({
-  component: IconButtonComponent,
-  props: {
-    icon: 'this is icon',
-    label: 'this is label',
-  },
-});
-
-IconButton.storyName = 'icon button';
-
-export const BaseButton = () => ({
-  component: BaseButtonComponent,
-  props: {
-    label: 'this is label',
-  },
-});
-
-BaseButton.storyName = 'base button';
diff --git a/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-about-parent.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-about-parent.stories.ts
index e24e128d7b2..4da69ec1eac 100644
--- a/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-about-parent.stories.ts
+++ b/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-about-parent.stories.ts
@@ -1,5 +1,5 @@
 import { Component, Input } from '@angular/core';
-import { componentWrapperDecorator, moduleMetadata } from '@storybook/angular';
+import { componentWrapperDecorator } from '@storybook/angular';
 
 import type { Meta, StoryFn } from '@storybook/angular';
 
@@ -59,46 +59,3 @@ export const InH1: StoryFn = () => ({
 });
 InH1.decorators = [componentWrapperDecorator((story) => `<h1>${story}</h1>`)];
 InH1.storyName = 'In <h1>';
-
-@Component({
-  selector: 'sb-emoji',
-  template: `{{ emoji }}`,
-  styles: [
-    `
-      :host {
-        padding-right: 4px;
-      }
-    `,
-  ],
-})
-class SbEmojiComponent {
-  @Input()
-  emoji = '👾';
-}
-
-export const WithComponent: StoryFn = () => ({
-  // Override the default component
-  // It is therefore necessary to manually declare the parent component with moduleMetadata
-  component: SbEmojiComponent,
-});
-WithComponent.decorators = [
-  moduleMetadata({
-    declarations: [SbButtonComponent],
-  }),
-];
-
-export const WithComponentAndArgs: StoryFn = (args) => {
-  return {
-    props: args,
-    component: SbEmojiComponent,
-  };
-};
-WithComponentAndArgs.decorators = [
-  moduleMetadata({
-    declarations: [SbButtonComponent],
-  }),
-];
-WithComponentAndArgs.argTypes = {
-  emoji: { control: 'text' },
-};
-WithComponentAndArgs.args = { emoji: '🌵' };
diff --git a/code/frameworks/angular/template/stories/legacy/README.stories.mdx b/code/frameworks/angular/template/stories/legacy/README.stories.mdx
deleted file mode 100644
index 792f95a4a86..00000000000
--- a/code/frameworks/angular/template/stories/legacy/README.stories.mdx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-
-<Meta title="stories / frameworks / angular / legacy / README" />
-
-# Legacy examples
-
-Example of story still supported by storybook but no longer recommended or deprecated
diff --git a/code/frameworks/angular/template/stories/legacy/component-in-story.stories.ts b/code/frameworks/angular/template/stories/legacy/component-in-story.stories.ts
deleted file mode 100644
index 58df68b4618..00000000000
--- a/code/frameworks/angular/template/stories/legacy/component-in-story.stories.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import type { Meta, StoryFn } from '@storybook/angular';
-import Button from '../button.component';
-
-export const Basic: StoryFn = (args) => ({
-  component: Button,
-  props: args,
-});
-Basic.args = {
-  text: 'Hello Button',
-};
-
-export default {
-  // title: 'Legacy / Component in Story',
-  component: Basic,
-} as Meta;

From 6f9452db68006eda751346f7711d9df1f90eb707 Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@chromatic.com>
Date: Thu, 13 Oct 2022 17:48:32 +1100
Subject: [PATCH 47/47] Fix null valued props

---
 .../attribute-selector.component.ts                       | 4 ++--
 .../class-selector.component.ts                           | 4 ++--
 .../multiple-selector.component.ts                        | 8 ++++----
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/attribute-selector.component.ts b/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/attribute-selector.component.ts
index fca8a0711fc..aa7aa62298c 100644
--- a/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/attribute-selector.component.ts
+++ b/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/attribute-selector.component.ts
@@ -7,9 +7,9 @@ import { Component, ComponentFactoryResolver, ElementRef } from '@angular/core';
     Generated template: {{ generatedTemplate }}`,
 })
 export class AttributeSelectorComponent {
-  generatedTemplate = '';
+  generatedTemplate!: string;
 
-  selectors = '';
+  selectors!: string;
 
   constructor(public el: ElementRef, private resolver: ComponentFactoryResolver) {
     const factory = this.resolver.resolveComponentFactory(AttributeSelectorComponent);
diff --git a/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/class-selector.component.ts b/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/class-selector.component.ts
index 7d62a37ef39..cc58394ecff 100644
--- a/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/class-selector.component.ts
+++ b/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/class-selector.component.ts
@@ -7,9 +7,9 @@ import { Component, ComponentFactoryResolver, ElementRef } from '@angular/core';
     Generated template: {{ generatedTemplate }}`,
 })
 export class ClassSelectorComponent {
-  generatedTemplate = '';
+  generatedTemplate!: string;
 
-  selectors = '';
+  selectors!: string;
 
   constructor(public el: ElementRef, private resolver: ComponentFactoryResolver) {
     const factory = this.resolver.resolveComponentFactory(ClassSelectorComponent);
diff --git a/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/multiple-selector.component.ts b/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/multiple-selector.component.ts
index bc50cfe83c4..d930e6b26a7 100644
--- a/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/multiple-selector.component.ts
+++ b/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/multiple-selector.component.ts
@@ -7,9 +7,9 @@ import { Component, ComponentFactoryResolver, ElementRef } from '@angular/core';
     Generated template: {{ generatedTemplate }}`,
 })
 export class MultipleSelectorComponent {
-  generatedTemplate = '';
+  generatedTemplate!: string;
 
-  selectors = '';
+  selectors!: string;
 
   constructor(public el: ElementRef, private resolver: ComponentFactoryResolver) {
     const factory = this.resolver.resolveComponentFactory(MultipleClassSelectorComponent);
@@ -25,9 +25,9 @@ export class MultipleSelectorComponent {
     Generated template: {{ generatedTemplate }}`,
 })
 export class MultipleClassSelectorComponent {
-  generatedTemplate = '';
+  generatedTemplate!: string;
 
-  selectors = '';
+  selectors!: string;
 
   constructor(public el: ElementRef, private resolver: ComponentFactoryResolver) {
     const factory = this.resolver.resolveComponentFactory(MultipleClassSelectorComponent);