feat(angular): add angular builder to build storybook

The builder allows to add a "architect" in angular.json to build storybook
config ex :
```
"build-storybook": {
 "builder": "@storybook/angular:build-storybook",
  "options": {
    "browserTarget": "angular-cli:build"
  }
}
```
cmd : `ng run angular-cli:build-storybook`

With this solution it is possible to have several angular projects using different assets and style

Author: ThibaudAV

app/angular/src/builders/build-storybook/index.spec.ts

@@ -0,0 +1,48 @@
+import { Architect } from '@angular-devkit/architect';
+import { TestingArchitectHost } from '@angular-devkit/architect/testing';
+import { schema } from '@angular-devkit/core';
+import * as path from 'path';
+
+const buildStandaloneMock = jest.fn().mockImplementation((_options: unknown) => Promise.resolve());
+
+jest.mock('@storybook/angular/standalone', () => buildStandaloneMock);
+
+describe('Build Storybook Builder', () => {
+  let architect: Architect;
+  let architectHost: TestingArchitectHost;
+
+  beforeEach(async () => {
+    const registry = new schema.CoreSchemaRegistry();
+    registry.addPostTransform(schema.transforms.addUndefinedDefaults);
+
+    architectHost = new TestingArchitectHost();
+    architect = new Architect(architectHost, registry);
+
+    // This will either take a Node package name, or a path to the directory
+    // for the package.json file.
+    await architectHost.addBuilderFromPackage(path.join(__dirname, '../../..'));
+  });
+
+  it('should work', async () => {
+    const run = await architect.scheduleBuilder('@storybook/angular:build-storybook', {
+      browserTarget: 'angular-cli:build-2',
+    });
+
+    const output = await run.result;
+
+    await run.stop();
+
+    expect(output.success).toBeTruthy();
+    expect(buildStandaloneMock).toHaveBeenCalledWith({
+      angularBrowserTarget: 'angular-cli:build-2',
+      browserTarget: 'angular-cli:build-2',
+      configDir: '.storybook',
+      docs: false,
+      loglevel: undefined,
+      quiet: false,
+      outputDir: 'storybook-static',
+      staticDir: [],
+      mode: 'static',
+    });
+  });
+});

app/angular/src/builders/build-storybook/index.ts

@@ -0,0 +1,40 @@
+import { BuilderContext, BuilderOutput, createBuilder } from '@angular-devkit/architect';
+import { JsonObject } from '@angular-devkit/core';
+import { from, Observable, of } from 'rxjs';
+import { CLIOptions } from '@storybook/core-common';
+import { map, switchMap, tap } from 'rxjs/operators';
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+import buildStandalone, { StandaloneOptions } from '@storybook/angular/standalone';
+
+export type StorybookBuilderOptions = JsonObject & {
+  browserTarget: string;
+} & Pick<
+    // makes sure the option exists
+    CLIOptions,
+    'staticDir' | 'outputDir' | 'configDir' | 'loglevel' | 'quiet' | 'docs'
+  >;
+
+export type StorybookBuilderOutput = JsonObject & BuilderOutput & {};
+
+export default createBuilder(commandBuilder);
+
+function commandBuilder(
+  options: StorybookBuilderOptions,
+  _context: BuilderContext
+): Observable<StorybookBuilderOutput> {
+  return of({}).pipe(
+    map(() => ({
+      ...options,
+      angularBrowserTarget: options.browserTarget,
+    })),
+    switchMap((standaloneOptions) => runInstance({ ...standaloneOptions, mode: 'static' })),
+    map(() => {
+      return { success: true };
+    })
+  );
+}
+
+function runInstance(options: StandaloneOptions) {
+  return from(buildStandalone(options));
+}

app/angular/src/builders/build-storybook/schema.json

@@ -0,0 +1,47 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "title": "Build Storybook",
+  "description": "Serve up storybook in development mode.",
+  "type": "object",
+  "properties": {
+    "browserTarget": {
+      "type": "string",
+      "description": "Build target to be served in project-name:builder:config format. Should generally target on the builder: '@angular-devkit/build-angular:browser'. Useful for Storybook to use options (styles, assets, ...).",
+      "pattern": "^[^:\\s]+:[^:\\s]+(:[^\\s]+)?$"
+    },
+    "staticDir": {
+      "type": "array",
+      "description": "Directory where to load static files from, array of strings.",
+      "items": {
+        "type": "string"
+      }
+    },
+    "outputDir": {
+      "type": "string",
+      "description": "Directory where to store built files.",
+      "default": "storybook-static"
+    },
+    "configDir": {
+      "type": "string",
+      "description": "Directory where to load Storybook configurations from.",
+      "default": ".storybook"
+    },
+    "loglevel": {
+      "type": "string",
+      "description": "Controls level of logging during build. Can be one of: [silly, verbose, info (default), warn, error, silent].",
+      "pattern": "(silly|verbose|info|warn|silent)"
+    },
+    "quiet": {
+      "type": "boolean",
+      "description": "Suppress verbose build output.",
+      "default": false
+    },
+    "docs": {
+      "type": "boolean",
+      "description": "Starts Storybook in documentation mode. Learn more about it : https://storybook.js.org/docs/react/writing-docs/build-documentation#preview-storybooks-documentation.",
+      "default": false
+    }
+  },
+  "additionalProperties": false,
+  "required": ["browserTarget"]
+}

app/angular/src/builders/builders.json

@@ -1,5 +1,10 @@
 {
   "builders": {
+    "build-storybook": {
+      "implementation": "./build-storybook",
+      "schema": "./build-storybook/schema.json",
+      "description": "Build storybook"
+    },
     "start-storybook": {
       "implementation": "./start-storybook",
       "schema": "./start-storybook/schema.json",

app/angular/standalone.d.ts

@@ -4,6 +4,7 @@ export type StandaloneOptions = Partial<
   CLIOptions &
     LoadOptions &
     BuilderOptions & {
+      mode?: 'static' | 'dev';
       angularBrowserTarget: string;
     }
 >;

examples/angular-cli/angular.json

@@ -79,7 +79,15 @@
           "builder": "@storybook/angular:start-storybook",
           "options": {
             "browserTarget": "angular-cli:build",
-            "port": 4400
+            "port": 4400,
+            "staticDir": ["src/assets"]
+          }
+        },
+        "build-storybook": {
+          "builder": "@storybook/angular:build-storybook",
+          "options": {
+            "browserTarget": "angular-cli:build",
+            "staticDir": ["src/assets"]
           }
         }
       }