WIP

storybookjs · Jan 10, 2023 · a10a7a5 · a10a7a5
1 parent 922380a
commit a10a7a5
Show file tree

Hide file tree

Showing 60 changed files with 1,692 additions and 2,127 deletions.
diff --git a/.circleci/config.yml b/.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
diff --git a/MIGRATION.md b/MIGRATION.md
@@ -38,6 +38,8 @@
     - [Addon-a11y: Removed deprecated withA11y decorator](#addon-a11y-removed-deprecated-witha11y-decorator)
     - [Stories glob matches MDX files](#stories-glob-matches-mdx-files)
     - [Add strict mode](#add-strict-mode)
+    - [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)
   - [Docs Changes](#docs-changes)
     - [Standalone docs files](#standalone-docs-files)
     - [Referencing stories in docs files](#referencing-stories-in-docs-files)
@@ -306,8 +308,8 @@ To opt-out of the old behavior you can set the `storyStoreV7` feature flag to `f
 module.exports = {
   features: {
     storyStoreV7: false,
-  }
-}
+  },
+};
 ```
 
 #### Removed global client APIs
@@ -740,6 +742,15 @@ Starting in 7.0, Storybook's build tools add [`"use strict"`](https://developer.
 
 If user code in `.storybook/preview.js` or stories relies on "sloppy" mode behavior, it will need to be updated. As a workaround, it is sometimes possible to move the sloppy mode code inside a script tag in `.storybook/preview-head.html`.
 
+#### 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`) and removed support for it in Storybook 7.0 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.
+
 ### 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.
@@ -3812,4 +3823,3 @@ If you **are** using these addons, it takes two steps to migrate:
   ```
 
   <!-- markdown-link-check-enable -->
-
diff --git a/code/addons/interactions/src/preview.ts b/code/addons/interactions/src/preview.ts
@@ -58,7 +58,10 @@ const addActionsFromArgTypes: ArgsEnhancer<Renderer> = ({ id, initialArgs }) =>
 export const argsEnhancers = [addActionsFromArgTypes];
 
 export const { step: runStep } = instrument(
-  { step: (label: StepLabel, play: PlayFunction, context: PlayFunctionContext) => play(context) },
+  {
+    step: (label: StepLabel, play: PlayFunction, context: PlayFunctionContext<any>) =>
+      play(context),
+  },
   { intercept: true }
 );
 

diff --git a/code/frameworks/angular/README.md b/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)
 
 ---

diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json
@@ -37,6 +37,7 @@
   },
   "dependencies": {
     "@storybook/builder-webpack5": "7.0.0-beta.21",
+    "@storybook/cli": "7.0.0-beta.21",
     "@storybook/client-logger": "7.0.0-beta.21",
     "@storybook/core-client": "7.0.0-beta.21",
     "@storybook/core-common": "7.0.0-beta.21",
@@ -65,18 +66,17 @@
     "webpack": "5"
   },
   "devDependencies": {
-    "@angular-devkit/architect": "^0.1303.5",
-    "@angular-devkit/build-angular": "^13.3.5",
-    "@angular-devkit/core": "^13.3.5",
-    "@angular/cli": "^13.3.5",
-    "@angular/common": "^13.3.6",
-    "@angular/compiler": "^13.3.6",
-    "@angular/compiler-cli": "^13.3.6",
-    "@angular/core": "^13.3.6",
-    "@angular/forms": "^13.3.6",
-    "@angular/platform-browser": "^13.3.6",
-    "@angular/platform-browser-dynamic": "^13.3.6",
-    "@nrwl/workspace": "14.6.1",
+    "@angular-devkit/architect": "^0.1500.4",
+    "@angular-devkit/build-angular": "^15.0.4",
+    "@angular-devkit/core": "^15.0.4",
+    "@angular/cli": "^15.0.4",
+    "@angular/common": "^15.0.4",
+    "@angular/compiler": "^15.0.4",
+    "@angular/compiler-cli": "^15.0.4",
+    "@angular/core": "^15.0.4",
+    "@angular/forms": "^15.0.4",
+    "@angular/platform-browser": "^15.0.4",
+    "@angular/platform-browser-dynamic": "^15.0.4",
     "@types/rimraf": "^3.0.2",
     "@types/tmp": "^0.2.3",
     "cross-spawn": "^7.0.3",
@@ -90,19 +90,18 @@
     "zone.js": "^0.12.0"
   },
   "peerDependencies": {
-    "@angular-devkit/architect": ">=0.1300.0",
-    "@angular-devkit/build-angular": ">=13.0.0",
-    "@angular-devkit/core": ">=13.0.0",
-    "@angular/cli": ">=13.0.0",
-    "@angular/common": ">=13.0.0",
-    "@angular/compiler": ">=13.0.0",
-    "@angular/compiler-cli": ">=13.0.0",
-    "@angular/core": ">=13.0.0",
-    "@angular/forms": ">=13.0.0",
-    "@angular/platform-browser": ">=13.0.0",
-    "@angular/platform-browser-dynamic": ">=13.0.0",
+    "@angular-devkit/architect": ">=0.1400.0",
+    "@angular-devkit/build-angular": ">=14.0.0",
+    "@angular-devkit/core": ">=14.0.0",
+    "@angular/cli": ">=14.0.0",
+    "@angular/common": ">=14.0.0",
+    "@angular/compiler": ">=14.0.0",
+    "@angular/compiler-cli": ">=14.0.0",
+    "@angular/core": ">=14.0.0",
+    "@angular/forms": ">=14.0.0",
+    "@angular/platform-browser": ">=14.0.0",
+    "@angular/platform-browser-dynamic": ">=14.0.0",
     "@babel/core": "*",
-    "@nrwl/workspace": "14.6.1",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "rxjs": "^6.0.0 || ^7.4.0",
@@ -112,9 +111,6 @@
   "peerDependenciesMeta": {
     "@angular/cli": {
       "optional": true
-    },
-    "@nrwl/workspace": {
-      "optional": true
     }
   },
   "engines": {

diff --git a/code/frameworks/angular/src/builders/build-storybook/index.ts b/code/frameworks/angular/src/builders/build-storybook/index.ts
@@ -11,13 +11,10 @@ import { CLIOptions } from '@storybook/types';
 import { catchError, map, mapTo, switchMap } from 'rxjs/operators';
 import { sync as findUpSync } from 'find-up';
 import { sync as readUpSync } from 'read-pkg-up';
-import {
-  BrowserBuilderOptions,
-  ExtraEntryPoint,
-  StylePreprocessorOptions,
-} from '@angular-devkit/build-angular';
+import { BrowserBuilderOptions, StylePreprocessorOptions } from '@angular-devkit/build-angular';
 
 import { buildStaticStandalone } from '@storybook/core-server';
+import { StyleElement } from '@angular-devkit/build-angular/src/builders/browser/schema';
 import { StandaloneOptions } from '../utils/standalone-options';
 import { runCompodoc } from '../utils/run-compodoc';
 import { buildStandaloneErrorHandler } from '../utils/build-standalone-errors-handler';
@@ -27,7 +24,7 @@ export type StorybookBuilderOptions = JsonObject & {
   tsConfig?: string;
   compodoc: boolean;
   compodocArgs: string[];
-  styles?: ExtraEntryPoint[];
+  styles?: StyleElement[];
   stylePreprocessorOptions?: StylePreprocessorOptions;
 } & Pick<
     // makes sure the option exists

diff --git a/code/frameworks/angular/src/builders/build-storybook/schema.json b/code/frameworks/angular/src/builders/build-storybook/schema.json
@@ -61,7 +61,7 @@
       "type": "array",
       "description": "Global styles to be included in the build.",
       "items": {
-        "$ref": "#/definitions/extraEntryPoint"
+        "$ref": "#/definitions/styleElement"
       },
       "default": ""
     },
@@ -83,7 +83,7 @@
   },
   "additionalProperties": false,
   "definitions": {
-    "extraEntryPoint": {
+    "styleElement": {
       "oneOf": [
         {
           "type": "object",

diff --git a/code/frameworks/angular/src/builders/start-storybook/index.ts b/code/frameworks/angular/src/builders/start-storybook/index.ts
@@ -6,18 +6,15 @@ import {
   targetFromTargetString,
 } from '@angular-devkit/architect';
 import { JsonObject } from '@angular-devkit/core';
-import {
-  BrowserBuilderOptions,
-  ExtraEntryPoint,
-  StylePreprocessorOptions,
-} from '@angular-devkit/build-angular';
+import { BrowserBuilderOptions, StylePreprocessorOptions } from '@angular-devkit/build-angular';
 import { from, Observable, of } from 'rxjs';
 import { CLIOptions } from '@storybook/types';
 import { map, switchMap, mapTo } from 'rxjs/operators';
 import { sync as findUpSync } from 'find-up';
 import { sync as readUpSync } from 'read-pkg-up';
 
 import { buildDevStandalone } from '@storybook/core-server';
+import { StyleElement } from '@angular-devkit/build-angular/src/builders/browser/schema';
 import { StandaloneOptions } from '../utils/standalone-options';
 import { runCompodoc } from '../utils/run-compodoc';
 import { buildStandaloneErrorHandler } from '../utils/build-standalone-errors-handler';
@@ -27,7 +24,7 @@ export type StorybookBuilderOptions = JsonObject & {
   tsConfig?: string;
   compodoc: boolean;
   compodocArgs: string[];
-  styles?: ExtraEntryPoint[];
+  styles?: StyleElement[];
   stylePreprocessorOptions?: StylePreprocessorOptions;
 } & Pick<
     // makes sure the option exists
@@ -106,8 +103,8 @@ function commandBuilder(
       return standaloneOptions;
     }),
     switchMap((standaloneOptions) => runInstance(standaloneOptions)),
-    map(() => {
-      return { success: true };
+    map(({ port }) => {
+      return { success: true, info: { port } };
     })
   );
 }
@@ -132,10 +129,10 @@ async function setup(options: StorybookBuilderOptions, context: BuilderContext)
   };
 }
 function runInstance(options: StandaloneOptions) {
-  return new Observable<void>((observer) => {
+  return new Observable<{ port: number }>((observer) => {
     // This Observable intentionally never complete, leaving the process running ;)
     buildDevStandalone(options as any).then(
-      () => observer.next(),
+      ({ port }) => observer.next({ port }),
       (error) => observer.error(buildStandaloneErrorHandler(error))
     );
   });

diff --git a/code/frameworks/angular/src/builders/start-storybook/schema.json b/code/frameworks/angular/src/builders/start-storybook/schema.json
@@ -83,7 +83,7 @@
       "type": "array",
       "description": "Global styles to be included in the build.",
       "items": {
-        "$ref": "#/definitions/extraEntryPoint"
+        "$ref": "#/definitions/styleElement"
       },
       "default": ""
     },
@@ -105,7 +105,7 @@
   },
   "additionalProperties": false,
   "definitions": {
-    "extraEntryPoint": {
+    "styleElement": {
       "oneOf": [
         {
           "type": "object",