Angular: Add multi-project setup for ng workspaces

.circleci/config.yml

@@ -599,23 +599,23 @@ workflows:
           requires:
             - build
       - create-sandboxes:
-          parallelism: 16
+          parallelism: 15
           requires:
             - build
       - build-sandboxes:
-          parallelism: 16
+          parallelism: 15
           requires:
             - create-sandboxes
       - test-runner-sandboxes:
-          parallelism: 16
+          parallelism: 15
           requires:
             - build-sandboxes
       - chromatic-sandboxes:
-          parallelism: 16
+          parallelism: 15
           requires:
             - build-sandboxes
       - e2e-sandboxes:
-          parallelism: 16
+          parallelism: 15
           requires:
             - build-sandboxes
   daily:
@@ -624,25 +624,25 @@ workflows:
     jobs:
       - build
       - create-sandboxes:
-          parallelism: 28
+          parallelism: 27
           requires:
             - build
       # - smoke-test-sandboxes: # disabled for now
       #     requires:
       #       - create-sandboxes
       - build-sandboxes:
-          parallelism: 28
+          parallelism: 27
           requires:
             - create-sandboxes
       - test-runner-sandboxes:
-          parallelism: 28
+          parallelism: 27
           requires:
             - build-sandboxes
       - chromatic-sandboxes:
-          parallelism: 28
+          parallelism: 27
           requires:
             - build-sandboxes
       - e2e-sandboxes:
-          parallelism: 28
+          parallelism: 27
           requires:
             - build-sandboxes

MIGRATION.md

@@ -40,6 +40,9 @@
     - [Stories glob matches MDX files](#stories-glob-matches-mdx-files)
     - [Add strict mode](#add-strict-mode)
     - [Removed DLL flags](#removed-dll-flags)
+    - [Angular: Drop support for Angular \< 14](#angular-drop-support-for-angular--14)
+    - [Angular: Drop support for calling Storybook directly](#angular-drop-support-for-calling-storybook-directly)
+    - [Angular: Removed legacy renderer](#angular-removed-legacy-renderer)
   - [Docs Changes](#docs-changes)
     - [Standalone docs files](#standalone-docs-files)
     - [Referencing stories in docs files](#referencing-stories-in-docs-files)
@@ -765,6 +768,18 @@ If user code in `.storybook/preview.js` or stories relies on "sloppy" mode behav
 
 Earlier versions of Storybook used Webpack DLLs as a performance crutch. In 6.1, we've removed Storybook's built-in DLLs and have deprecated the command-line parameters `--no-dll` and `--ui-dll`. In 7.0 those options are removed.
 
+#### Angular: Drop support for Angular < 14
+
+Starting in 7.0, we drop support for Angular < 14
+
+#### Angular: Drop support for calling Storybook directly
+
+In Storybook 6.4 we have deprecated calling Storybook directly (`npm run storybook`)  for Angular. In Storybook 7.0, we've removed it entirely. Instead you have to set up the Storybook builder in your `angular.json` and execute `ng run <your-project>:storybook` to start Storybook. Please visit https://github.com/storybookjs/storybook/tree/next/code/frameworks/angular to set up Storybook for Angular correctly.
+
+#### Angular: Removed legacy renderer
+
+The `parameters.angularLegacyRendering` option is removed. You cannot use the old legacy renderer anymore.
+
 ### Docs Changes
 
 The information hierarchy of docs in Storybook has changed in 7.0. The main difference is that each docs is listed in the sidebar as a separate entry, rather than attached to individual stories.

code/addons/docs/angular/README.md

@@ -13,6 +13,8 @@ To learn more about Storybook Docs, read the [general documentation](../README.m
 - [Installation](#installation)
 - [DocsPage](#docspage)
 - [Props tables](#props-tables)
+  - [Automatic Compodoc setup](#automatic-compodoc-setup)
+- [Manual Compodoc setup](#manual-compodoc-setup)
 - [MDX](#mdx)
 - [IFrame height](#iframe-height)
 - [Inline Stories](#inline-stories)
@@ -42,35 +44,63 @@ When you [install docs](#installation) you should get basic [DocsPage](../docs/d
 
 Getting [Props tables](../docs/props-tables.md) for your components requires a few more steps. Docs for Angular relies on [Compodoc](https://compodoc.app/), the excellent API documentation tool. It supports `inputs`, `outputs`, `properties`, `methods`, `view/content child/children` as first class prop types.
 
-To get this, you'll first need to install Compodoc:
+### Automatic Compodoc setup
+
+During `sb init`, you will be asked, whether you want to setup Compodoc for your project. Just answer the question with Yes. Compodoc is then ready to use!
+
+## Manual Compodoc setup
+
+You'll need to register Compodoc's `documentation.json` file in `.storybook/preview.ts`:
+
+```js
+import { setCompodocJson } from '@storybook/addon-docs/angular';
+import docJson from '../documentation.json';
+
+setCompodocJson(docJson);
+```
+
+Finally, to set up compodoc, you'll first need to install Compodoc:
 
 ```sh
 yarn add -D @compodoc/compodoc
 ```
 
-Then you'll need to configure Compodoc to generate a `documentation.json` file. Adding the following snippet to your `package.json` creates a metadata file `./documentation.json` each time you run storybook:
+Then you'll need to configure Compodoc to generate a `documentation.json` file. Adding the following snippet to your `projects.<project>.architect.<storybook|build-storybook>` in the `angular.json` creates a metadata file `./documentation.json` each time you run storybook:
 
-```json
+```jsonc
+// angular.json
 {
-  ...
-  "scripts": {
-    "docs:json": "compodoc -p ./tsconfig.json -e json -d .",
-    "storybook": "npm run docs:json && start-storybook -p 6006 -s src/assets",
-    ...
-  },
+  "projects": {
+    "your-project": {
+      "architect": {
+        "storybook": {
+          ...,
+          "compodoc": true,
+          "compodocArgs": [
+            "-e",
+            "json",
+            "-d",
+            "." // the root folder of your project
+          ],
+        },
+        "build-storybook": {
+          ...,
+          "compodoc": true,
+          "compodocArgs": [
+            "-e",
+            "json",
+            "-d",
+            "." // the root folder of your project
+          ],
+        }
+      }
+    }
+  }
 }
 ```
 
 Unfortunately, it's not currently possible to update this dynamically as you edit your components, but [there's an open issue](https://github.com/storybookjs/storybook/issues/8672) to support this with improvements to Compodoc.
 
-Next, add the following to `.storybook/preview.ts` to load the Compodoc-generated file:
-
-```js
-import { setCompodocJson } from '@storybook/addon-docs/angular';
-import docJson from '../documentation.json';
-setCompodocJson(docJson);
-```
-
 Finally, be sure to fill in the `component` field in your story metadata:
 
 ```ts

code/addons/storyshots-core/package.json

@@ -67,7 +67,7 @@
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.5",
     "enzyme-to-json": "^3.6.1",
-    "jest-preset-angular": "^8.3.2",
+    "jest-preset-angular": "^12.2.3",
     "jest-vue-preprocessor": "^1.7.1",
     "react-test-renderer": "^16",
     "rimraf": "^3.0.2",
@@ -82,7 +82,7 @@
     "@storybook/vue": "*",
     "@storybook/vue3": "*",
     "jest": "*",
-    "jest-preset-angular": "*",
+    "jest-preset-angular": " >= 12.2.3",
     "jest-vue-preprocessor": "*",
     "preact": "^10.5.13",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",

code/addons/storyshots-core/src/frameworks/angular/loader.ts

@@ -17,11 +17,7 @@ function setupAngularJestPreset() {
   // is running inside jest -  one of the things that `jest-preset-angular/build/setupJest` does is
   // extending the `window.Reflect` with all the needed metadata functions, that are required
   // for emission of the TS decorations like 'design:paramtypes'
-  try {
-    jest.requireActual('jest-preset-angular/build/setupJest');
-  } catch (e) {
-    jest.requireActual('jest-preset-angular/build/setup-jest');
-  }
+  jest.requireActual('jest-preset-angular/setup-jest');
 }
 
 function test(options: StoryshotsOptions): boolean {

code/addons/storyshots-core/src/frameworks/angular/renderTree.ts

@@ -1,9 +1,8 @@
-import AngularSnapshotSerializer from 'jest-preset-angular/build/AngularSnapshotSerializer';
-import HTMLCommentSerializer from 'jest-preset-angular/build/HTMLCommentSerializer';
+import AngularSnapshotSerializer from 'jest-preset-angular/build/serializers/ng-snapshot';
+import HTMLCommentSerializer from 'jest-preset-angular/build/serializers/html-comment';
 import { TestBed } from '@angular/core/testing';
-import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/testing';
 import { addSerializer } from 'jest-specific-snapshot';
-import { getStorybookModuleMetadata } from '@storybook/angular/renderer';
+import { getApplication, storyPropsProvider } from '@storybook/angular/renderer';
 import { BehaviorSubject } from 'rxjs';
 
 addSerializer(HTMLCommentSerializer);
@@ -12,31 +11,20 @@ addSerializer(AngularSnapshotSerializer);
 function getRenderedTree(story: any) {
   const currentStory = story.render();
 
-  const moduleMeta = getStorybookModuleMetadata(
-    {
-      storyFnAngular: currentStory,
-      component: story.component,
-      // TODO : To change with the story Id in v7. Currently keep with static id to avoid changes in snapshots
-      targetSelector: 'storybook-wrapper',
-    },
-    new BehaviorSubject(currentStory.props)
-  );
-
-  TestBed.configureTestingModule({
-    imports: [...moduleMeta.imports],
-    declarations: [...moduleMeta.declarations],
-    providers: [...moduleMeta.providers],
-    schemas: [...moduleMeta.schemas],
+  const application = getApplication({
+    storyFnAngular: currentStory,
+    component: story.component,
+    // TODO : To change with the story Id in v7. Currently keep with static id to avoid changes in snapshots
+    targetSelector: 'storybook-wrapper',
   });
 
-  TestBed.overrideModule(BrowserDynamicTestingModule, {
-    set: {
-      entryComponents: [...moduleMeta.entryComponents],
-    },
+  TestBed.configureTestingModule({
+    imports: [application],
+    providers: [storyPropsProvider(new BehaviorSubject(currentStory.props))],
   });
 
   return TestBed.compileComponents().then(() => {
-    const tree = TestBed.createComponent(moduleMeta.bootstrap[0] as any);
+    const tree = TestBed.createComponent(application);
     tree.detectChanges();
 
     // Empty componentInstance remove attributes of the internal main component (<storybook-wrapper>) in snapshot

code/frameworks/angular/README.md

@@ -1,5 +1,11 @@
 # Storybook for Angular
 
+- [Storybook for Angular](#storybook-for-angular)
+  - [Getting Started](#getting-started)
+    - [Setup Compodoc](#setup-compodoc)
+  - [Support for multi-project workspace](#support-for-multi-project-workspace)
+  - [Run Storybook](#run-storybook)
+
 Storybook for Angular is a UI development environment for your Angular components.
 With it, you can visualize different states of your UI components and develop them interactively.
 
@@ -15,6 +21,66 @@ cd my-angular-app
 npx storybook init
 ```
 
+### Setup Compodoc
+
+When installing, you will be given the option to set up Compodoc, which is a tool for creating documentation for Angular projects.
+
+You can include JSDoc comments above components, directives, and other parts of your Angular code to include documentation for those elements. Compodoc uses these comments to generate documentation for your application. In Storybook, it is useful to add explanatory comments above @Inputs and @Outputs, since these are the main elements that Storybook displays in its user interface. The @Inputs and @Outputs are the elements that you can interact with in Storybook, such as controls.
+
+## Support for multi-project workspace
+
+Storybook supports Angular multi-project workspace. You can setup Storybook for each project in the workspace. When running `npx storybook init` you will be asked for which project Storybook should be set up. Essentially, during initialization, the `angular.json` will be edited to add the Storybook configuration for the selected project. The configuration looks approximately like this:
+
+```json
+// angular.json
+{
+  ...
+  "projects": {
+    ...
+    "your-project": {
+      ...
+      "architect": {
+        ...
+        "storybook": {
+          "builder": "@storybook/angular:start-storybook",
+          "options": {
+            "configDir": ".storybook",
+            "browserTarget": "your-project:build",
+            "compodoc": false,
+            "port": 6006
+          }
+        },
+        "build-storybook": {
+          "builder": "@storybook/angular:build-storybook",
+          "options": {
+            "configDir": ".storybook",
+            "browserTarget": "your-project:build",
+            "compodoc": false,
+            "outputDir": "dist/storybook/your-project"
+          }
+        }
+      }
+    }
+  }
+}
+```
+
+## Run Storybook
+
+To run Storybook for a particular project, please run:
+
+```sh
+ng run your-project:storybook
+```
+
+To build Storybook, run:
+
+```sh
+ng run your-project:build-storybook
+```
+
+You will find the output in `dist/storybook/your-project`.
+
 For more information visit: [storybook.js.org](https://storybook.js.org)
 
 ---