-
-
Notifications
You must be signed in to change notification settings - Fork 9.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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
- Loading branch information
Showing
6 changed files
with
150 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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', | ||
}); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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)); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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"] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters