-
-
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.
Setup Storybook in Angular workspace via builders
- Loading branch information
1 parent
23d7e7e
commit 5c7ae17
Showing
30 changed files
with
1,579 additions
and
1,641 deletions.
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
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
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,116 @@ | ||
| import fs from 'fs'; | ||
| import prompts from 'prompts'; | ||
| import dedent from 'ts-dedent'; | ||
|
|
||
| import { commandLog } from '../../helpers'; | ||
|
|
||
| export const ANGULAR_JSON_PATH = 'angular.json'; | ||
|
|
||
| export const compoDocPreviewPrefix = dedent` | ||
| import { setCompodocJson } from "@storybook/addon-docs/angular"; | ||
| import docJson from "../documentation.json"; | ||
| setCompodocJson(docJson); | ||
| `.trimStart(); | ||
|
|
||
| export const promptForCompoDocs = async (): Promise<boolean> => { | ||
| const { useCompoDoc } = await prompts({ | ||
| type: 'confirm', | ||
| name: 'useCompoDoc', | ||
| message: 'Do you want to use Compodoc for documentation?', | ||
| }); | ||
|
|
||
| return useCompoDoc; | ||
| }; | ||
|
|
||
| export class AngularJSON { | ||
| json: { | ||
| projects: Record<string, { root: string; architect: Record<string, any> }>; | ||
| }; | ||
|
|
||
| constructor() { | ||
| if (!fs.existsSync(ANGULAR_JSON_PATH)) { | ||
| commandLog( | ||
| 'An angular.json file was not found in the current directory. Storybook needs it to work properly.' | ||
| ); | ||
|
|
||
| throw new Error('No angular.json file found'); | ||
| } | ||
|
|
||
| const jsonContent = fs.readFileSync(ANGULAR_JSON_PATH, 'utf8'); | ||
| this.json = JSON.parse(jsonContent); | ||
| } | ||
|
|
||
| get projects() { | ||
| return this.json.projects; | ||
| } | ||
|
|
||
| getProjectSettingsByName(projectName: string) { | ||
| return this.projects[projectName]; | ||
| } | ||
|
|
||
| async getProjectName() { | ||
| const projectKeys = Object.keys(this.projects); | ||
|
|
||
| if (projectKeys.length > 1) { | ||
| const { projectName } = await prompts({ | ||
| type: 'select', | ||
| name: 'projectName', | ||
| message: 'For which project do you want to generate Storybook configuration?', | ||
| choices: projectKeys.map((name) => ({ | ||
| title: name, | ||
| value: name, | ||
| })), | ||
| }); | ||
|
|
||
| return projectName; | ||
| } | ||
|
|
||
| return Object.keys(this.projects)[0]; | ||
| } | ||
|
|
||
| addStorybookEntries({ | ||
| angularProjectName, | ||
| storybookFolder, | ||
| useCompodoc, | ||
| root, | ||
| }: { | ||
| angularProjectName: string; | ||
| storybookFolder: string; | ||
| useCompodoc: boolean; | ||
| root: string; | ||
| }) { | ||
| // add an entry to the angular.json file to setup the storybook builders | ||
| const { architect } = this.projects[angularProjectName]; | ||
|
|
||
| const baseOptions = { | ||
| configDir: storybookFolder, | ||
| browserTarget: `${angularProjectName}:build`, | ||
| compodoc: useCompodoc, | ||
| ...(useCompodoc && { compodocArgs: ['-e', 'json', '-d', root || '.'] }), | ||
| }; | ||
|
|
||
| if (!architect.storybook) { | ||
| architect.storybook = { | ||
| builder: '@storybook/angular:start-storybook', | ||
| options: { | ||
| ...baseOptions, | ||
| port: 6006, | ||
| }, | ||
| }; | ||
| } | ||
|
|
||
| if (!architect['build-storybook']) { | ||
| architect['build-storybook'] = { | ||
| builder: '@storybook/angular:build-storybook', | ||
| options: { | ||
| ...baseOptions, | ||
| outputDir: `dist/storybook/${angularProjectName}`, | ||
| }, | ||
| }; | ||
| } | ||
| } | ||
|
|
||
| write() { | ||
| fs.writeFileSync(ANGULAR_JSON_PATH, JSON.stringify(this.json, null, 2)); | ||
| } | ||
| } |
Oops, something went wrong.