diff --git a/code/frameworks/angular/src/builders/build-storybook/index.ts b/code/frameworks/angular/src/builders/build-storybook/index.ts index 4bd35520e9b8..25f7faeb5268 100644 --- a/code/frameworks/angular/src/builders/build-storybook/index.ts +++ b/code/frameworks/angular/src/builders/build-storybook/index.ts @@ -67,10 +67,12 @@ const commandBuilder: BuilderHandlerFn = ( ): BuilderOutputLike => { const builder = from(setup(options, context)).pipe( switchMap(({ tsConfig }) => { + const docTSConfig = findUpSync('tsconfig.doc.json', { cwd: options.configDir }); const runCompodoc$ = options.compodoc - ? runCompodoc({ compodocArgs: options.compodocArgs, tsconfig: tsConfig }, context).pipe( - mapTo({ tsConfig }) - ) + ? runCompodoc( + { compodocArgs: options.compodocArgs, tsconfig: docTSConfig ?? tsConfig }, + context + ).pipe(mapTo({ tsConfig })) : of({}); return runCompodoc$.pipe(mapTo({ tsConfig })); diff --git a/code/frameworks/angular/src/builders/start-storybook/index.ts b/code/frameworks/angular/src/builders/start-storybook/index.ts index ed5504f68c51..2ecbb63c8a0f 100644 --- a/code/frameworks/angular/src/builders/start-storybook/index.ts +++ b/code/frameworks/angular/src/builders/start-storybook/index.ts @@ -67,11 +67,13 @@ export type StorybookBuilderOutput = JsonObject & BuilderOutput & {}; const commandBuilder: BuilderHandlerFn = (options, context) => { const builder = from(setup(options, context)).pipe( switchMap(({ tsConfig }) => { + const docTSConfig = findUpSync('tsconfig.doc.json', { cwd: options.configDir }); + const runCompodoc$ = options.compodoc ? runCompodoc( { compodocArgs: [...options.compodocArgs, ...(options.quiet ? ['--silent'] : [])], - tsconfig: tsConfig, + tsconfig: docTSConfig ?? tsConfig, }, context ).pipe(mapTo({ tsConfig })) diff --git a/code/lib/cli/src/generators/ANGULAR/helpers.ts b/code/lib/cli/src/generators/ANGULAR/helpers.ts index b2394797909c..33b79bb7339c 100644 --- a/code/lib/cli/src/generators/ANGULAR/helpers.ts +++ b/code/lib/cli/src/generators/ANGULAR/helpers.ts @@ -3,6 +3,8 @@ import { join } from 'path'; import prompts from 'prompts'; import dedent from 'ts-dedent'; import { MissingAngularJsonError } from '@storybook/core-events/server-errors'; +import boxen from 'boxen'; +import { logger } from '@storybook/node-logger'; export const ANGULAR_JSON_PATH = 'angular.json'; @@ -13,6 +15,18 @@ export const compoDocPreviewPrefix = dedent` `.trimStart(); export const promptForCompoDocs = async (): Promise => { + logger.plain( + // Create a text which explains the user why compodoc is necessary + boxen( + dedent` + Compodoc is a great tool to generate documentation for your Angular projects. + Storybook can use the documentation generated by Compodoc to extract argument definitions + and JSDOC comments to display them in the Storybook UI. We highly recommend using Compodoc for + your Angular projects to get the best experience out of Storybook. + `, + { title: 'Compodoc', borderStyle: 'round', padding: 1, borderColor: '#F1618C' } + ) + ); const { useCompoDoc } = await prompts({ type: 'confirm', name: 'useCompoDoc', diff --git a/code/lib/cli/templates/angular/application/template-csf/.storybook/tsconfig.doc.json b/code/lib/cli/templates/angular/application/template-csf/.storybook/tsconfig.doc.json new file mode 100644 index 000000000000..22e282bd5db9 --- /dev/null +++ b/code/lib/cli/templates/angular/application/template-csf/.storybook/tsconfig.doc.json @@ -0,0 +1,10 @@ +// This tsconfig is used by Compodoc to generate the documentation for the project. +// If Compodoc is not used, this file can be deleted. +{ + "extends": "./tsconfig.json", + // Exclude all files that are not needed for documentation generation. + "exclude": ["../src/test.ts", "../src/**/*.spec.ts", "../src/**/*.stories.ts"], + // Please make sure to include all files from which Compodoc should generate documentation. + "include": ["../src/**/*"], + "files": ["./typings.d.ts"] +}