From 33485f19b7a1576c00808e2b21352d3013e0e903 Mon Sep 17 00:00:00 2001 From: Thibaud Av Date: Fri, 12 Nov 2021 20:44:09 +0100 Subject: [PATCH 1/6] fix(angular): missing remove `oneOf` in builder schema This `onOf` is no more necessary --- app/angular/src/builders/build-storybook/schema.json | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/app/angular/src/builders/build-storybook/schema.json b/app/angular/src/builders/build-storybook/schema.json index a4e894863922..335114a6eef1 100644 --- a/app/angular/src/builders/build-storybook/schema.json +++ b/app/angular/src/builders/build-storybook/schema.json @@ -53,13 +53,5 @@ } } }, - "additionalProperties": false, - "oneOf": [ - { - "required": ["browserTarget"] - }, - { - "required": ["tsConfig"] - } - ] + "additionalProperties": false } From 903595bae98b3bc61e69abea36c06ae3d4c040ce Mon Sep 17 00:00:00 2001 From: Thibaud Av Date: Fri, 12 Nov 2021 20:48:16 +0100 Subject: [PATCH 2/6] feat(angular): add `styles` and `stylePreprocessorOptions` to add dedicated styles config Allow the angular project to set styles config without using `browserTarget` in order to rely on another builder's config. Very useful in the case of a library where you don't have an application but you want to configure styles in storybook like an app --- .../src/builders/build-storybook/index.ts | 29 +++++++++- .../src/builders/build-storybook/schema.json | 55 ++++++++++++++++++- .../src/builders/start-storybook/index.ts | 41 +++++++++++++- .../src/builders/start-storybook/schema.json | 55 ++++++++++++++++++- .../server/framework-preset-angular-cli.ts | 3 +- app/angular/src/server/options.ts | 8 ++- app/angular/standalone.d.ts | 8 ++- 7 files changed, 185 insertions(+), 14 deletions(-) diff --git a/app/angular/src/builders/build-storybook/index.ts b/app/angular/src/builders/build-storybook/index.ts index 64827de6e809..46bc3b3ee567 100644 --- a/app/angular/src/builders/build-storybook/index.ts +++ b/app/angular/src/builders/build-storybook/index.ts @@ -12,7 +12,11 @@ import { catchError, map, mapTo, switchMap } from 'rxjs/operators'; // eslint-disable-next-line import/no-extraneous-dependencies import buildStandalone, { StandaloneOptions } from '@storybook/angular/standalone'; -import { BrowserBuilderOptions } from '@angular-devkit/build-angular'; +import { + BrowserBuilderOptions, + ExtraEntryPoint, + StylePreprocessorOptions, +} from '@angular-devkit/build-angular'; import { runCompodoc } from '../utils/run-compodoc'; import { buildStandaloneErrorHandler } from '../utils/build-standalone-errors-handler'; @@ -21,6 +25,8 @@ export type StorybookBuilderOptions = JsonObject & { tsConfig?: string; compodoc: boolean; compodocArgs: string[]; + styles?: ExtraEntryPoint[]; + stylePreprocessorOptions?: StylePreprocessorOptions; } & Pick< // makes sure the option exists CLIOptions, @@ -46,12 +52,29 @@ function commandBuilder( return runCompodoc$.pipe(mapTo({ tsConfig })); }), map(({ tsConfig }) => { - const { browserTarget, ...otherOptions } = options; + const { + browserTarget, + stylePreprocessorOptions, + styles, + configDir, + docs, + loglevel, + outputDir, + quiet, + } = options; const standaloneOptions: StandaloneOptions = { - ...otherOptions, + configDir, + docs, + loglevel, + outputDir, + quiet, angularBrowserTarget: browserTarget, angularBuilderContext: context, + angularBuilderOptions: { + stylePreprocessorOptions, + styles, + }, tsConfig, }; return standaloneOptions; diff --git a/app/angular/src/builders/build-storybook/schema.json b/app/angular/src/builders/build-storybook/schema.json index 335114a6eef1..f241c4326197 100644 --- a/app/angular/src/builders/build-storybook/schema.json +++ b/app/angular/src/builders/build-storybook/schema.json @@ -51,7 +51,60 @@ "items": { "type": "string" } + }, + "styles": { + "type": "array", + "description": "Global styles to be included in the build.", + "items": { + "$ref": "#/definitions/extraEntryPoint" + } + }, + "stylePreprocessorOptions": { + "description": "Options to pass to style preprocessors.", + "type": "object", + "properties": { + "includePaths": { + "description": "Paths to include. Paths will be resolved to workspace root.", + "type": "array", + "items": { + "type": "string" + }, + "default": [] + } + }, + "additionalProperties": false } }, - "additionalProperties": false + "additionalProperties": false, + "definitions": { + "extraEntryPoint": { + "oneOf": [ + { + "type": "object", + "properties": { + "input": { + "type": "string", + "description": "The file to include." + }, + "bundleName": { + "type": "string", + "pattern": "^[\\w\\-.]*$", + "description": "The bundle name for this extra entry point." + }, + "inject": { + "type": "boolean", + "description": "If the bundle will be referenced in the HTML file.", + "default": true + } + }, + "additionalProperties": false, + "required": ["input"] + }, + { + "type": "string", + "description": "The file to include." + } + ] + } + } } diff --git a/app/angular/src/builders/start-storybook/index.ts b/app/angular/src/builders/start-storybook/index.ts index eade7127f29f..173828673c22 100644 --- a/app/angular/src/builders/start-storybook/index.ts +++ b/app/angular/src/builders/start-storybook/index.ts @@ -6,7 +6,11 @@ import { Target, } from '@angular-devkit/architect'; import { JsonObject } from '@angular-devkit/core'; -import { BrowserBuilderOptions } from '@angular-devkit/build-angular'; +import { + BrowserBuilderOptions, + ExtraEntryPoint, + StylePreprocessorOptions, +} from '@angular-devkit/build-angular'; import { from, Observable, of } from 'rxjs'; import { CLIOptions } from '@storybook/core-common'; import { map, switchMap, mapTo } from 'rxjs/operators'; @@ -21,6 +25,8 @@ export type StorybookBuilderOptions = JsonObject & { tsConfig?: string; compodoc: boolean; compodocArgs: string[]; + styles?: ExtraEntryPoint[]; + stylePreprocessorOptions?: StylePreprocessorOptions; } & Pick< // makes sure the option exists CLIOptions, @@ -56,12 +62,41 @@ function commandBuilder( return runCompodoc$.pipe(mapTo({ tsConfig })); }), map(({ tsConfig }) => { - const { browserTarget, ...otherOptions } = options; + const { + browserTarget, + stylePreprocessorOptions, + styles, + ci, + configDir, + docs, + host, + https, + port, + quiet, + smokeTest, + sslCa, + sslCert, + sslKey, + } = options; const standaloneOptions: StandaloneOptions = { - ...otherOptions, + ci, + configDir, + docs, + host, + https, + port, + quiet, + smokeTest, + sslCa, + sslCert, + sslKey, angularBrowserTarget: browserTarget, angularBuilderContext: context, + angularBuilderOptions: { + stylePreprocessorOptions, + styles, + }, tsConfig, }; diff --git a/app/angular/src/builders/start-storybook/schema.json b/app/angular/src/builders/start-storybook/schema.json index 6c429fd26850..bea42d8cab09 100644 --- a/app/angular/src/builders/start-storybook/schema.json +++ b/app/angular/src/builders/start-storybook/schema.json @@ -78,7 +78,60 @@ "items": { "type": "string" } + }, + "styles": { + "type": "array", + "description": "Global styles to be included in the build.", + "items": { + "$ref": "#/definitions/extraEntryPoint" + } + }, + "stylePreprocessorOptions": { + "description": "Options to pass to style preprocessors.", + "type": "object", + "properties": { + "includePaths": { + "description": "Paths to include. Paths will be resolved to workspace root.", + "type": "array", + "items": { + "type": "string" + }, + "default": [] + } + }, + "additionalProperties": false } }, - "additionalProperties": false + "additionalProperties": false, + "definitions": { + "extraEntryPoint": { + "oneOf": [ + { + "type": "object", + "properties": { + "input": { + "type": "string", + "description": "The file to include." + }, + "bundleName": { + "type": "string", + "pattern": "^[\\w\\-.]*$", + "description": "The bundle name for this extra entry point." + }, + "inject": { + "type": "boolean", + "description": "If the bundle will be referenced in the HTML file.", + "default": true + } + }, + "additionalProperties": false, + "required": ["input"] + }, + { + "type": "string", + "description": "The file to include." + } + ] + } + } } diff --git a/app/angular/src/server/framework-preset-angular-cli.ts b/app/angular/src/server/framework-preset-angular-cli.ts index b6af4d7d5918..f64fc26b769d 100644 --- a/app/angular/src/server/framework-preset-angular-cli.ts +++ b/app/angular/src/server/framework-preset-angular-cli.ts @@ -115,10 +115,9 @@ async function getBuilderOptions( */ const builderOptions = { ...browserTargetOptions, - ...options.angularBuilderOptions, + ...(options.angularBuilderOptions as JsonObject), tsConfig: options.tsConfig ?? - options.angularBuilderOptions?.tsConfig ?? browserTargetOptions.tsConfig ?? findUpSync('tsconfig.json', { cwd: options.configDir }), }; diff --git a/app/angular/src/server/options.ts b/app/angular/src/server/options.ts index 061841dfb52a..7af8159cc718 100644 --- a/app/angular/src/server/options.ts +++ b/app/angular/src/server/options.ts @@ -2,13 +2,17 @@ import { sync } from 'read-pkg-up'; import { LoadOptions, Options as CoreOptions } from '@storybook/core-common'; import { BuilderContext } from '@angular-devkit/architect'; -import { JsonObject } from '@angular-devkit/core'; +import { ExtraEntryPoint, StylePreprocessorOptions } from '@angular-devkit/build-angular'; +import { JsonValue } from '@angular-devkit/core'; export type PresetOptions = CoreOptions & { /* Allow to get the options of a targeted "browser builder" */ angularBrowserTarget?: string | null; /* Defined set of options. These will take over priority from angularBrowserTarget options */ - angularBuilderOptions?: JsonObject | null; + angularBuilderOptions?: { + styles?: ExtraEntryPoint[]; + stylePreprocessorOptions?: StylePreprocessorOptions; + }; /* Angular context from builder */ angularBuilderContext?: BuilderContext | null; tsConfig?: string; diff --git a/app/angular/standalone.d.ts b/app/angular/standalone.d.ts index 481849593fce..0349246d5392 100644 --- a/app/angular/standalone.d.ts +++ b/app/angular/standalone.d.ts @@ -1,6 +1,7 @@ import { CLIOptions, LoadOptions, BuilderOptions } from '@storybook/core-common'; import { BuilderContext } from '@angular-devkit/architect'; -import { JsonObject } from '@angular-devkit/core'; +import { JsonValue } from '@angular-devkit/core'; +import { JsonSchema } from '@angular-devkit/core/src/json/schema'; export type StandaloneOptions = Partial< CLIOptions & @@ -8,7 +9,10 @@ export type StandaloneOptions = Partial< BuilderOptions & { mode?: 'static' | 'dev'; angularBrowserTarget?: string | null; - angularBuilderOptions?: JsonObject; + angularBuilderOptions?: JsonObject & { + styles?: ExtraEntryPoint[]; + stylePreprocessorOptions?: StylePreprocessorOptions; + }; angularBuilderContext?: BuilderContext | null; tsConfig?: string; } From 4ec202dabfeeecf0713e5c2ce24e55bc5e8aafa3 Mon Sep 17 00:00:00 2001 From: Thibaud Av Date: Fri, 12 Nov 2021 20:48:16 +0100 Subject: [PATCH 3/6] feat(angular): add `styles` and `stylePreprocessorOptions` to add dedicated styles config Allow the angular project to set styles config without using `browserTarget` in order to rely on another builder's config. Very useful in the case of a library where you don't have an application but you want to configure styles in storybook like an app --- .../builders/build-storybook/index.spec.ts | 27 ++++++++++++------- .../builders/start-storybook/index.spec.ts | 27 ++++++++++++------- 2 files changed, 36 insertions(+), 18 deletions(-) diff --git a/app/angular/src/builders/build-storybook/index.spec.ts b/app/angular/src/builders/build-storybook/index.spec.ts index c1c9b784daa1..f9b4d532b8e5 100644 --- a/app/angular/src/builders/build-storybook/index.spec.ts +++ b/app/angular/src/builders/build-storybook/index.spec.ts @@ -75,14 +75,17 @@ describe('Build Storybook Builder', () => { expect(buildStandaloneMock).toHaveBeenCalledWith({ angularBrowserTarget: 'angular-cli:build-2', angularBuilderContext: expect.any(Object), + angularBuilderOptions: { + stylePreprocessorOptions: { + includePaths: [], + }, + styles: [], + }, configDir: '.storybook', - docsMode: false, loglevel: undefined, quiet: false, outputDir: 'storybook-static', mode: 'static', - compodoc: false, - compodocArgs: ['-e', 'json'], tsConfig: 'src/tsconfig.app.json', }); }); @@ -102,14 +105,17 @@ describe('Build Storybook Builder', () => { expect(buildStandaloneMock).toHaveBeenCalledWith({ angularBrowserTarget: null, angularBuilderContext: expect.any(Object), + angularBuilderOptions: { + stylePreprocessorOptions: { + includePaths: [], + }, + styles: [], + }, configDir: '.storybook', - docsMode: false, loglevel: undefined, quiet: false, outputDir: 'storybook-static', mode: 'static', - compodoc: false, - compodocArgs: ['-e', 'json'], tsConfig: 'path/to/tsConfig.json', }); }); @@ -156,14 +162,17 @@ describe('Build Storybook Builder', () => { expect(buildStandaloneMock).toHaveBeenCalledWith({ angularBrowserTarget: 'angular-cli:build-2', angularBuilderContext: expect.any(Object), + angularBuilderOptions: { + stylePreprocessorOptions: { + includePaths: [], + }, + styles: [], + }, configDir: '.storybook', - docsMode: false, loglevel: undefined, quiet: false, outputDir: 'storybook-static', mode: 'static', - compodoc: true, - compodocArgs: ['-e', 'json'], tsConfig: 'src/tsconfig.app.json', }); }); diff --git a/app/angular/src/builders/start-storybook/index.spec.ts b/app/angular/src/builders/start-storybook/index.spec.ts index 57463172af23..b5b5f88e510a 100644 --- a/app/angular/src/builders/start-storybook/index.spec.ts +++ b/app/angular/src/builders/start-storybook/index.spec.ts @@ -76,9 +76,14 @@ describe('Start Storybook Builder', () => { expect(buildStandaloneMock).toHaveBeenCalledWith({ angularBrowserTarget: 'angular-cli:build-2', angularBuilderContext: expect.any(Object), + angularBuilderOptions: { + stylePreprocessorOptions: { + includePaths: [], + }, + styles: [], + }, ci: false, configDir: '.storybook', - docsMode: false, host: 'localhost', https: false, port: 4400, @@ -87,8 +92,6 @@ describe('Start Storybook Builder', () => { sslCa: undefined, sslCert: undefined, sslKey: undefined, - compodoc: false, - compodocArgs: ['-e', 'json'], tsConfig: 'src/tsconfig.app.json', }); }); @@ -109,9 +112,14 @@ describe('Start Storybook Builder', () => { expect(buildStandaloneMock).toHaveBeenCalledWith({ angularBrowserTarget: null, angularBuilderContext: expect.any(Object), + angularBuilderOptions: { + stylePreprocessorOptions: { + includePaths: [], + }, + styles: [], + }, ci: false, configDir: '.storybook', - docsMode: false, host: 'localhost', https: false, port: 4400, @@ -120,8 +128,6 @@ describe('Start Storybook Builder', () => { sslCa: undefined, sslCert: undefined, sslKey: undefined, - compodoc: false, - compodocArgs: ['-e', 'json'], tsConfig: 'path/to/tsConfig.json', }); }); @@ -168,9 +174,14 @@ describe('Start Storybook Builder', () => { expect(buildStandaloneMock).toHaveBeenCalledWith({ angularBrowserTarget: 'angular-cli:build-2', angularBuilderContext: expect.any(Object), + angularBuilderOptions: { + stylePreprocessorOptions: { + includePaths: [], + }, + styles: [], + }, ci: false, configDir: '.storybook', - docsMode: false, host: 'localhost', https: false, port: 9009, @@ -179,8 +190,6 @@ describe('Start Storybook Builder', () => { sslCa: undefined, sslCert: undefined, sslKey: undefined, - compodoc: true, - compodocArgs: ['-e', 'json'], tsConfig: 'src/tsconfig.app.json', }); }); From 57a96accaf1bddd4321255c304d97a699b5498bf Mon Sep 17 00:00:00 2001 From: Thibaud Av Date: Wed, 24 Nov 2021 10:25:32 +0100 Subject: [PATCH 4/6] fix(angular): change the resolution order of the `tsconfig.json` config --- app/angular/src/builders/build-storybook/index.spec.ts | 7 ++++--- app/angular/src/builders/build-storybook/index.ts | 6 +++++- app/angular/src/builders/start-storybook/index.spec.ts | 7 ++++--- app/angular/src/builders/start-storybook/index.ts | 6 +++++- app/angular/src/server/framework-preset-angular-cli.ts | 4 ++-- 5 files changed, 20 insertions(+), 10 deletions(-) diff --git a/app/angular/src/builders/build-storybook/index.spec.ts b/app/angular/src/builders/build-storybook/index.spec.ts index f9b4d532b8e5..5312b4b71a9e 100644 --- a/app/angular/src/builders/build-storybook/index.spec.ts +++ b/app/angular/src/builders/build-storybook/index.spec.ts @@ -5,6 +5,7 @@ import * as path from 'path'; const buildStandaloneMock = jest.fn(); jest.doMock('@storybook/angular/standalone', () => buildStandaloneMock); +jest.doMock('find-up', () => ({ sync: () => './storybook/tsconfig.ts' })); const cpSpawnMock = { spawn: jest.fn(), @@ -86,7 +87,7 @@ describe('Build Storybook Builder', () => { quiet: false, outputDir: 'storybook-static', mode: 'static', - tsConfig: 'src/tsconfig.app.json', + tsConfig: './storybook/tsconfig.ts', }); }); @@ -153,7 +154,7 @@ describe('Build Storybook Builder', () => { expect(output.success).toBeTruthy(); expect(cpSpawnMock.spawn).toHaveBeenCalledWith('compodoc', [ '-p', - 'src/tsconfig.app.json', + './storybook/tsconfig.ts', '-d', '', '-e', @@ -173,7 +174,7 @@ describe('Build Storybook Builder', () => { quiet: false, outputDir: 'storybook-static', mode: 'static', - tsConfig: 'src/tsconfig.app.json', + tsConfig: './storybook/tsconfig.ts', }); }); }); diff --git a/app/angular/src/builders/build-storybook/index.ts b/app/angular/src/builders/build-storybook/index.ts index 46bc3b3ee567..3154616fbc85 100644 --- a/app/angular/src/builders/build-storybook/index.ts +++ b/app/angular/src/builders/build-storybook/index.ts @@ -9,6 +9,7 @@ import { JsonObject } from '@angular-devkit/core'; import { from, Observable, of, throwError } from 'rxjs'; import { CLIOptions } from '@storybook/core-common'; import { catchError, map, mapTo, switchMap } from 'rxjs/operators'; +import { sync as findUpSync } from 'find-up'; // eslint-disable-next-line import/no-extraneous-dependencies import buildStandalone, { StandaloneOptions } from '@storybook/angular/standalone'; @@ -99,7 +100,10 @@ async function setup(options: StorybookBuilderOptions, context: BuilderContext) } return { - tsConfig: options.tsConfig ?? browserOptions.tsConfig ?? undefined, + tsConfig: + options.tsConfig ?? + findUpSync('tsconfig.json', { cwd: options.configDir }) ?? + browserOptions.tsConfig, }; } diff --git a/app/angular/src/builders/start-storybook/index.spec.ts b/app/angular/src/builders/start-storybook/index.spec.ts index b5b5f88e510a..70b572546b31 100644 --- a/app/angular/src/builders/start-storybook/index.spec.ts +++ b/app/angular/src/builders/start-storybook/index.spec.ts @@ -5,6 +5,7 @@ import * as path from 'path'; const buildStandaloneMock = jest.fn(); jest.doMock('@storybook/angular/standalone', () => buildStandaloneMock); +jest.doMock('find-up', () => ({ sync: () => './storybook/tsconfig.ts' })); const cpSpawnMock = { spawn: jest.fn(), @@ -92,7 +93,7 @@ describe('Start Storybook Builder', () => { sslCa: undefined, sslCert: undefined, sslKey: undefined, - tsConfig: 'src/tsconfig.app.json', + tsConfig: './storybook/tsconfig.ts', }); }); @@ -165,7 +166,7 @@ describe('Start Storybook Builder', () => { expect(output.success).toBeTruthy(); expect(cpSpawnMock.spawn).toHaveBeenCalledWith('compodoc', [ '-p', - 'src/tsconfig.app.json', + './storybook/tsconfig.ts', '-d', '', '-e', @@ -190,7 +191,7 @@ describe('Start Storybook Builder', () => { sslCa: undefined, sslCert: undefined, sslKey: undefined, - tsConfig: 'src/tsconfig.app.json', + tsConfig: './storybook/tsconfig.ts', }); }); }); diff --git a/app/angular/src/builders/start-storybook/index.ts b/app/angular/src/builders/start-storybook/index.ts index 173828673c22..1a5d89de2d07 100644 --- a/app/angular/src/builders/start-storybook/index.ts +++ b/app/angular/src/builders/start-storybook/index.ts @@ -14,6 +14,7 @@ import { import { from, Observable, of } from 'rxjs'; import { CLIOptions } from '@storybook/core-common'; import { map, switchMap, mapTo } from 'rxjs/operators'; +import { sync as findUpSync } from 'find-up'; // eslint-disable-next-line import/no-extraneous-dependencies import buildStandalone, { StandaloneOptions } from '@storybook/angular/standalone'; @@ -122,7 +123,10 @@ async function setup(options: StorybookBuilderOptions, context: BuilderContext) } return { - tsConfig: options.tsConfig ?? browserOptions.tsConfig ?? undefined, + tsConfig: + options.tsConfig ?? + findUpSync('tsconfig.json', { cwd: options.configDir }) ?? + browserOptions.tsConfig, }; } function runInstance(options: StandaloneOptions) { diff --git a/app/angular/src/server/framework-preset-angular-cli.ts b/app/angular/src/server/framework-preset-angular-cli.ts index f64fc26b769d..74a14765cf42 100644 --- a/app/angular/src/server/framework-preset-angular-cli.ts +++ b/app/angular/src/server/framework-preset-angular-cli.ts @@ -118,8 +118,8 @@ async function getBuilderOptions( ...(options.angularBuilderOptions as JsonObject), tsConfig: options.tsConfig ?? - browserTargetOptions.tsConfig ?? - findUpSync('tsconfig.json', { cwd: options.configDir }), + findUpSync('tsconfig.json', { cwd: options.configDir }) ?? + browserTargetOptions.tsConfig, }; logger.info(`=> Using angular project with "tsConfig:${builderOptions.tsConfig}"`); From 645c11a923e3b039510fd4406fa1af5e2c35565f Mon Sep 17 00:00:00 2001 From: Thibaud Av Date: Thu, 25 Nov 2021 13:20:40 +0100 Subject: [PATCH 5/6] fix(angular): remove styles and stylePreprocessorOptions if is not defined in builder config --- .../builders/build-storybook/index.spec.ts | 47 ++++++++++------ .../src/builders/build-storybook/index.ts | 4 +- .../src/builders/build-storybook/schema.json | 6 +- .../builders/start-storybook/index.spec.ts | 55 +++++++++++++------ .../src/builders/start-storybook/index.ts | 4 +- .../src/builders/start-storybook/schema.json | 6 +- 6 files changed, 78 insertions(+), 44 deletions(-) diff --git a/app/angular/src/builders/build-storybook/index.spec.ts b/app/angular/src/builders/build-storybook/index.spec.ts index 5312b4b71a9e..3bd4ffc84c08 100644 --- a/app/angular/src/builders/build-storybook/index.spec.ts +++ b/app/angular/src/builders/build-storybook/index.spec.ts @@ -76,12 +76,7 @@ describe('Build Storybook Builder', () => { expect(buildStandaloneMock).toHaveBeenCalledWith({ angularBrowserTarget: 'angular-cli:build-2', angularBuilderContext: expect.any(Object), - angularBuilderOptions: { - stylePreprocessorOptions: { - includePaths: [], - }, - styles: [], - }, + angularBuilderOptions: {}, configDir: '.storybook', loglevel: undefined, quiet: false, @@ -106,12 +101,7 @@ describe('Build Storybook Builder', () => { expect(buildStandaloneMock).toHaveBeenCalledWith({ angularBrowserTarget: null, angularBuilderContext: expect.any(Object), - angularBuilderOptions: { - stylePreprocessorOptions: { - includePaths: [], - }, - styles: [], - }, + angularBuilderOptions: {}, configDir: '.storybook', loglevel: undefined, quiet: false, @@ -163,12 +153,7 @@ describe('Build Storybook Builder', () => { expect(buildStandaloneMock).toHaveBeenCalledWith({ angularBrowserTarget: 'angular-cli:build-2', angularBuilderContext: expect.any(Object), - angularBuilderOptions: { - stylePreprocessorOptions: { - includePaths: [], - }, - styles: [], - }, + angularBuilderOptions: {}, configDir: '.storybook', loglevel: undefined, quiet: false, @@ -177,4 +162,30 @@ describe('Build Storybook Builder', () => { tsConfig: './storybook/tsconfig.ts', }); }); + + it('should start storybook with styles options', async () => { + const run = await architect.scheduleBuilder('@storybook/angular:build-storybook', { + tsConfig: 'path/to/tsConfig.json', + compodoc: false, + styles: ['style.scss'], + }); + + const output = await run.result; + + await run.stop(); + + expect(output.success).toBeTruthy(); + expect(cpSpawnMock.spawn).not.toHaveBeenCalledWith(); + expect(buildStandaloneMock).toHaveBeenCalledWith({ + angularBrowserTarget: null, + angularBuilderContext: expect.any(Object), + angularBuilderOptions: { styles: ['style.scss'] }, + configDir: '.storybook', + loglevel: undefined, + quiet: false, + outputDir: 'storybook-static', + mode: 'static', + tsConfig: 'path/to/tsConfig.json', + }); + }); }); diff --git a/app/angular/src/builders/build-storybook/index.ts b/app/angular/src/builders/build-storybook/index.ts index 3154616fbc85..6108034e9a34 100644 --- a/app/angular/src/builders/build-storybook/index.ts +++ b/app/angular/src/builders/build-storybook/index.ts @@ -73,8 +73,8 @@ function commandBuilder( angularBrowserTarget: browserTarget, angularBuilderContext: context, angularBuilderOptions: { - stylePreprocessorOptions, - styles, + ...(stylePreprocessorOptions ? { stylePreprocessorOptions } : {}), + ...(styles ? { styles } : {}), }, tsConfig, }; diff --git a/app/angular/src/builders/build-storybook/schema.json b/app/angular/src/builders/build-storybook/schema.json index f241c4326197..d20f55765ebf 100644 --- a/app/angular/src/builders/build-storybook/schema.json +++ b/app/angular/src/builders/build-storybook/schema.json @@ -57,7 +57,8 @@ "description": "Global styles to be included in the build.", "items": { "$ref": "#/definitions/extraEntryPoint" - } + }, + "default": "" }, "stylePreprocessorOptions": { "description": "Options to pass to style preprocessors.", @@ -72,7 +73,8 @@ "default": [] } }, - "additionalProperties": false + "additionalProperties": false, + "default": "" } }, "additionalProperties": false, diff --git a/app/angular/src/builders/start-storybook/index.spec.ts b/app/angular/src/builders/start-storybook/index.spec.ts index 70b572546b31..2b4893eda268 100644 --- a/app/angular/src/builders/start-storybook/index.spec.ts +++ b/app/angular/src/builders/start-storybook/index.spec.ts @@ -77,12 +77,7 @@ describe('Start Storybook Builder', () => { expect(buildStandaloneMock).toHaveBeenCalledWith({ angularBrowserTarget: 'angular-cli:build-2', angularBuilderContext: expect.any(Object), - angularBuilderOptions: { - stylePreprocessorOptions: { - includePaths: [], - }, - styles: [], - }, + angularBuilderOptions: {}, ci: false, configDir: '.storybook', host: 'localhost', @@ -113,12 +108,7 @@ describe('Start Storybook Builder', () => { expect(buildStandaloneMock).toHaveBeenCalledWith({ angularBrowserTarget: null, angularBuilderContext: expect.any(Object), - angularBuilderOptions: { - stylePreprocessorOptions: { - includePaths: [], - }, - styles: [], - }, + angularBuilderOptions: {}, ci: false, configDir: '.storybook', host: 'localhost', @@ -175,12 +165,7 @@ describe('Start Storybook Builder', () => { expect(buildStandaloneMock).toHaveBeenCalledWith({ angularBrowserTarget: 'angular-cli:build-2', angularBuilderContext: expect.any(Object), - angularBuilderOptions: { - stylePreprocessorOptions: { - includePaths: [], - }, - styles: [], - }, + angularBuilderOptions: {}, ci: false, configDir: '.storybook', host: 'localhost', @@ -194,4 +179,38 @@ describe('Start Storybook Builder', () => { tsConfig: './storybook/tsconfig.ts', }); }); + + it('should start storybook with styles options', async () => { + const run = await architect.scheduleBuilder('@storybook/angular:start-storybook', { + tsConfig: 'path/to/tsConfig.json', + port: 4400, + compodoc: false, + styles: ['src/styles.css'], + }); + + const output = await run.result; + + await run.stop(); + + expect(output.success).toBeTruthy(); + expect(cpSpawnMock.spawn).not.toHaveBeenCalledWith(); + expect(buildStandaloneMock).toHaveBeenCalledWith({ + angularBrowserTarget: null, + angularBuilderContext: expect.any(Object), + angularBuilderOptions: { + styles: ['src/styles.css'], + }, + ci: false, + configDir: '.storybook', + host: 'localhost', + https: false, + port: 4400, + quiet: false, + smokeTest: false, + sslCa: undefined, + sslCert: undefined, + sslKey: undefined, + tsConfig: 'path/to/tsConfig.json', + }); + }); }); diff --git a/app/angular/src/builders/start-storybook/index.ts b/app/angular/src/builders/start-storybook/index.ts index 1a5d89de2d07..4f80db9866b2 100644 --- a/app/angular/src/builders/start-storybook/index.ts +++ b/app/angular/src/builders/start-storybook/index.ts @@ -95,8 +95,8 @@ function commandBuilder( angularBrowserTarget: browserTarget, angularBuilderContext: context, angularBuilderOptions: { - stylePreprocessorOptions, - styles, + ...(stylePreprocessorOptions ? { stylePreprocessorOptions } : {}), + ...(styles ? { styles } : {}), }, tsConfig, }; diff --git a/app/angular/src/builders/start-storybook/schema.json b/app/angular/src/builders/start-storybook/schema.json index bea42d8cab09..9911fe8e7bed 100644 --- a/app/angular/src/builders/start-storybook/schema.json +++ b/app/angular/src/builders/start-storybook/schema.json @@ -84,7 +84,8 @@ "description": "Global styles to be included in the build.", "items": { "$ref": "#/definitions/extraEntryPoint" - } + }, + "default": "" }, "stylePreprocessorOptions": { "description": "Options to pass to style preprocessors.", @@ -99,7 +100,8 @@ "default": [] } }, - "additionalProperties": false + "additionalProperties": false, + "default": "" } }, "additionalProperties": false, From 3beb736fef28040d9ecf9c75f6646f0a1afbd0ad Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Fri, 26 Nov 2021 10:34:39 +0800 Subject: [PATCH 6/6] Fix deepscan --- app/angular/src/server/options.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/app/angular/src/server/options.ts b/app/angular/src/server/options.ts index 7af8159cc718..252519968710 100644 --- a/app/angular/src/server/options.ts +++ b/app/angular/src/server/options.ts @@ -3,7 +3,6 @@ import { LoadOptions, Options as CoreOptions } from '@storybook/core-common'; import { BuilderContext } from '@angular-devkit/architect'; import { ExtraEntryPoint, StylePreprocessorOptions } from '@angular-devkit/build-angular'; -import { JsonValue } from '@angular-devkit/core'; export type PresetOptions = CoreOptions & { /* Allow to get the options of a targeted "browser builder" */