Skip to content

Commit

Permalink
Merge pull request #16675 from storybookjs/angular/add-builder-styles
Browse files Browse the repository at this point in the history 
Angular: Add styles and stylePreprocessorOptions to angular builder
  • Loading branch information
@shilman
shilman committed Nov 26, 2021
2 parents 1dde26d + 3beb736 commit ba37d22
Show file tree
Hide file tree
Showing 9 changed files with 272 additions and 48 deletions.
45 changes: 33 additions & 12 deletions app/angular/src/builders/build-storybook/index.spec.ts
View file
Expand Up @@ -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(),
Expand Down Expand Up @@ -75,15 +76,13 @@ describe('Build Storybook Builder', () => {
expect(buildStandaloneMock).toHaveBeenCalledWith({
angularBrowserTarget: 'angular-cli:build-2',
angularBuilderContext: expect.any(Object),
angularBuilderOptions: {},
configDir: '.storybook',
docsMode: false,
loglevel: undefined,
quiet: false,
outputDir: 'storybook-static',
mode: 'static',
compodoc: false,
compodocArgs: ['-e', 'json'],
tsConfig: 'src/tsconfig.app.json',
tsConfig: './storybook/tsconfig.ts',
});
});

Expand All @@ -102,14 +101,12 @@ describe('Build Storybook Builder', () => {
expect(buildStandaloneMock).toHaveBeenCalledWith({
angularBrowserTarget: null,
angularBuilderContext: expect.any(Object),
angularBuilderOptions: {},
configDir: '.storybook',
docsMode: false,
loglevel: undefined,
quiet: false,
outputDir: 'storybook-static',
mode: 'static',
compodoc: false,
compodocArgs: ['-e', 'json'],
tsConfig: 'path/to/tsConfig.json',
});
});
Expand Down Expand Up @@ -147,7 +144,7 @@ describe('Build Storybook Builder', () => {
expect(output.success).toBeTruthy();
expect(cpSpawnMock.spawn).toHaveBeenCalledWith('compodoc', [
'-p',
'src/tsconfig.app.json',
'./storybook/tsconfig.ts',
'-d',
'',
'-e',
Expand All @@ -156,15 +153,39 @@ describe('Build Storybook Builder', () => {
expect(buildStandaloneMock).toHaveBeenCalledWith({
angularBrowserTarget: 'angular-cli:build-2',
angularBuilderContext: expect.any(Object),
angularBuilderOptions: {},
configDir: '.storybook',
docsMode: false,
loglevel: undefined,
quiet: false,
outputDir: 'storybook-static',
mode: 'static',
compodoc: true,
compodocArgs: ['-e', 'json'],
tsConfig: 'src/tsconfig.app.json',
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',
});
});
});
35 changes: 31 additions & 4 deletions app/angular/src/builders/build-storybook/index.ts
View file
Expand Up @@ -9,10 +9,15 @@ 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';
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';

Expand All @@ -21,6 +26,8 @@ export type StorybookBuilderOptions = JsonObject & {
tsConfig?: string;
compodoc: boolean;
compodocArgs: string[];
styles?: ExtraEntryPoint[];
stylePreprocessorOptions?: StylePreprocessorOptions;
} & Pick<
// makes sure the option exists
CLIOptions,
Expand All @@ -46,12 +53,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 ? { stylePreprocessorOptions } : {}),
...(styles ? { styles } : {}),
},
tsConfig,
};
return standaloneOptions;
Expand All @@ -76,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,
};
}

Expand Down
61 changes: 54 additions & 7 deletions app/angular/src/builders/build-storybook/schema.json
View file
Expand Up @@ -51,15 +51,62 @@
"items": {
"type": "string"
}
},
"styles": {
"type": "array",
"description": "Global styles to be included in the build.",
"items": {
"$ref": "#/definitions/extraEntryPoint"
},
"default": ""
},
"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,
"default": ""
}
},
"additionalProperties": false,
"oneOf": [
{
"required": ["browserTarget"]
},
{
"required": ["tsConfig"]
"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."
}
]
}
]
}
}
53 changes: 41 additions & 12 deletions app/angular/src/builders/start-storybook/index.spec.ts
View file
Expand Up @@ -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(),
Expand Down Expand Up @@ -76,9 +77,9 @@ describe('Start Storybook Builder', () => {
expect(buildStandaloneMock).toHaveBeenCalledWith({
angularBrowserTarget: 'angular-cli:build-2',
angularBuilderContext: expect.any(Object),
angularBuilderOptions: {},
ci: false,
configDir: '.storybook',
docsMode: false,
host: 'localhost',
https: false,
port: 4400,
Expand All @@ -87,9 +88,7 @@ describe('Start Storybook Builder', () => {
sslCa: undefined,
sslCert: undefined,
sslKey: undefined,
compodoc: false,
compodocArgs: ['-e', 'json'],
tsConfig: 'src/tsconfig.app.json',
tsConfig: './storybook/tsconfig.ts',
});
});

Expand All @@ -109,9 +108,9 @@ describe('Start Storybook Builder', () => {
expect(buildStandaloneMock).toHaveBeenCalledWith({
angularBrowserTarget: null,
angularBuilderContext: expect.any(Object),
angularBuilderOptions: {},
ci: false,
configDir: '.storybook',
docsMode: false,
host: 'localhost',
https: false,
port: 4400,
Expand All @@ -120,8 +119,6 @@ describe('Start Storybook Builder', () => {
sslCa: undefined,
sslCert: undefined,
sslKey: undefined,
compodoc: false,
compodocArgs: ['-e', 'json'],
tsConfig: 'path/to/tsConfig.json',
});
});
Expand Down Expand Up @@ -159,7 +156,7 @@ describe('Start Storybook Builder', () => {
expect(output.success).toBeTruthy();
expect(cpSpawnMock.spawn).toHaveBeenCalledWith('compodoc', [
'-p',
'src/tsconfig.app.json',
'./storybook/tsconfig.ts',
'-d',
'',
'-e',
Expand All @@ -168,9 +165,9 @@ describe('Start Storybook Builder', () => {
expect(buildStandaloneMock).toHaveBeenCalledWith({
angularBrowserTarget: 'angular-cli:build-2',
angularBuilderContext: expect.any(Object),
angularBuilderOptions: {},
ci: false,
configDir: '.storybook',
docsMode: false,
host: 'localhost',
https: false,
port: 9009,
Expand All @@ -179,9 +176,41 @@ describe('Start Storybook Builder', () => {
sslCa: undefined,
sslCert: undefined,
sslKey: undefined,
compodoc: true,
compodocArgs: ['-e', 'json'],
tsConfig: 'src/tsconfig.app.json',
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',
});
});
});

0 comments on commit ba37d22

Please sign in to comment.