diff --git a/docs/angular/api-storybook/executors/storybook.md b/docs/angular/api-storybook/executors/storybook.md index de65bdc6b9..37c8d705a8 100644 --- a/docs/angular/api-storybook/executors/storybook.md +++ b/docs/angular/api-storybook/executors/storybook.md @@ -12,7 +12,7 @@ Default: `@storybook/angular` Type: `string` -Possible values: `@storybook/angular`, `@storybook/react`, `@storybook/html` +Possible values: `@storybook/angular`, `@storybook/react`, `@storybook/html`, `@storybook/web-components`, `@storybook/vue` Storybook framework npm package diff --git a/docs/node/api-storybook/executors/storybook.md b/docs/node/api-storybook/executors/storybook.md index 737e8b8a3c..fd3f544f1c 100644 --- a/docs/node/api-storybook/executors/storybook.md +++ b/docs/node/api-storybook/executors/storybook.md @@ -13,7 +13,7 @@ Default: `@storybook/angular` Type: `string` -Possible values: `@storybook/angular`, `@storybook/react`, `@storybook/html` +Possible values: `@storybook/angular`, `@storybook/react`, `@storybook/html`, `@storybook/web-components`, `@storybook/vue` Storybook framework npm package diff --git a/docs/react/api-storybook/executors/storybook.md b/docs/react/api-storybook/executors/storybook.md index 737e8b8a3c..fd3f544f1c 100644 --- a/docs/react/api-storybook/executors/storybook.md +++ b/docs/react/api-storybook/executors/storybook.md @@ -13,7 +13,7 @@ Default: `@storybook/angular` Type: `string` -Possible values: `@storybook/angular`, `@storybook/react`, `@storybook/html` +Possible values: `@storybook/angular`, `@storybook/react`, `@storybook/html`, `@storybook/web-components`, `@storybook/vue` Storybook framework npm package diff --git a/nx-dev/nx-dev/public/documentation/latest/angular/api-storybook/executors/storybook.md b/nx-dev/nx-dev/public/documentation/latest/angular/api-storybook/executors/storybook.md index de65bdc6b9..37c8d705a8 100644 --- a/nx-dev/nx-dev/public/documentation/latest/angular/api-storybook/executors/storybook.md +++ b/nx-dev/nx-dev/public/documentation/latest/angular/api-storybook/executors/storybook.md @@ -12,7 +12,7 @@ Default: `@storybook/angular` Type: `string` -Possible values: `@storybook/angular`, `@storybook/react`, `@storybook/html` +Possible values: `@storybook/angular`, `@storybook/react`, `@storybook/html`, `@storybook/web-components`, `@storybook/vue` Storybook framework npm package diff --git a/nx-dev/nx-dev/public/documentation/latest/node/api-storybook/executors/storybook.md b/nx-dev/nx-dev/public/documentation/latest/node/api-storybook/executors/storybook.md index 6ef6cb9940..f45e32065d 100644 --- a/nx-dev/nx-dev/public/documentation/latest/node/api-storybook/executors/storybook.md +++ b/nx-dev/nx-dev/public/documentation/latest/node/api-storybook/executors/storybook.md @@ -13,7 +13,7 @@ Default: `@storybook/angular` Type: `string` -Possible values: `@storybook/angular`, `@storybook/react`, `@storybook/html` +Possible values: `@storybook/angular`, `@storybook/react`, `@storybook/html`, `@storybook/web-components`, `@storybook/vue` Storybook framework npm package diff --git a/nx-dev/nx-dev/public/documentation/latest/react/api-storybook/executors/storybook.md b/nx-dev/nx-dev/public/documentation/latest/react/api-storybook/executors/storybook.md index 358ddff0d4..5f7e2275f1 100644 --- a/nx-dev/nx-dev/public/documentation/latest/react/api-storybook/executors/storybook.md +++ b/nx-dev/nx-dev/public/documentation/latest/react/api-storybook/executors/storybook.md @@ -13,7 +13,7 @@ Default: `@storybook/angular` Type: `string` -Possible values: `@storybook/angular`, `@storybook/react`, `@storybook/html` +Possible values: `@storybook/angular`, `@storybook/react`, `@storybook/html`, `@storybook/web-components`, `@storybook/vue` Storybook framework npm package diff --git a/packages/storybook/src/executors/storybook/schema.json b/packages/storybook/src/executors/storybook/schema.json index 65c525cfb3..1c0590eba5 100644 --- a/packages/storybook/src/executors/storybook/schema.json +++ b/packages/storybook/src/executors/storybook/schema.json @@ -7,7 +7,13 @@ "uiFramework": { "type": "string", "description": "Storybook framework npm package", - "enum": ["@storybook/angular", "@storybook/react", "@storybook/html"], + "enum": [ + "@storybook/angular", + "@storybook/react", + "@storybook/html", + "@storybook/web-components", + "@storybook/vue" + ], "default": "@storybook/angular", "hidden": true }, diff --git a/packages/storybook/src/executors/storybook/storybook.impl.ts b/packages/storybook/src/executors/storybook/storybook.impl.ts index 7e912b8a44..cdfbe0bacd 100644 --- a/packages/storybook/src/executors/storybook/storybook.impl.ts +++ b/packages/storybook/src/executors/storybook/storybook.impl.ts @@ -15,7 +15,12 @@ export interface StorybookConfig { } export interface StorybookExecutorOptions { - uiFramework: '@storybook/angular' | '@storybook/react' | '@storybook/html'; + uiFramework: + | '@storybook/angular' + | '@storybook/react' + | '@storybook/html' + | '@storybook/web-components' + | '@storybook/vue'; projectBuildConfig?: string; config: StorybookConfig; host?: string; diff --git a/packages/storybook/src/executors/utils.ts b/packages/storybook/src/executors/utils.ts index 981fadbdd9..68fa2ed7b8 100644 --- a/packages/storybook/src/executors/utils.ts +++ b/packages/storybook/src/executors/utils.ts @@ -12,6 +12,9 @@ export function getStorybookFrameworkPath(uiFramework) { '@storybook/angular': '@storybook/angular/dist/ts3.9/server/options', '@storybook/react': '@storybook/react/dist/cjs/server/options', '@storybook/html': '@storybook/html/dist/cjs/server/options', + '@storybook/vue': '@storybook/vue/dist/cjs/server/options', + '@storybook/web-components"': + '@storybook/web-components"/dist/cjs/server/options', }; if (isStorybookV62onwards(uiFramework)) { diff --git a/packages/storybook/src/generators/init/init.spec.ts b/packages/storybook/src/generators/init/init.spec.ts index 4e25f9a617..805a40769d 100644 --- a/packages/storybook/src/generators/init/init.spec.ts +++ b/packages/storybook/src/generators/init/init.spec.ts @@ -122,6 +122,92 @@ describe('@nrwl/storybook:init', () => { expect(packageJson.devDependencies['@storybook/html']).toBeDefined(); }); + it('should add web-components related dependencies when using html as uiFramework', async () => { + const existing = 'existing'; + const existingVersion = '1.0.0'; + addDependenciesToPackageJson( + tree, + { '@nrwl/storybook': storybookVersion, [existing]: existingVersion }, + { [existing]: existingVersion } + ); + await initGenerator(tree, { + uiFramework: '@storybook/web-components', + }); + const packageJson = readJson(tree, 'package.json'); + + // general deps + expect(packageJson.devDependencies['@nrwl/storybook']).toBeDefined(); + expect(packageJson.dependencies['@nrwl/storybook']).toBeUndefined(); + expect(packageJson.dependencies[existing]).toBeDefined(); + expect(packageJson.devDependencies[existing]).toBeDefined(); + expect( + packageJson.devDependencies['@storybook/addon-essentials'] + ).toBeDefined(); + + // react specific + expect(packageJson.devDependencies['@storybook/react']).not.toBeDefined(); + expect(packageJson.devDependencies['@babel/core']).not.toBeDefined(); + expect(packageJson.devDependencies['babel-loader']).not.toBeDefined(); + + // angular specific + expect(packageJson.devDependencies['@storybook/angular']).not.toBeDefined(); + expect(packageJson.devDependencies['@angular/forms']).not.toBeDefined(); + + // generic html specific + expect(packageJson.devDependencies['@storybook/html']).not.toBeDefined(); + + // generic web-components specific + expect( + packageJson.devDependencies['@storybook/web-components'] + ).toBeDefined(); + + // generic vue specific + expect(packageJson.devDependencies['@storybook/vue']).not.toBeDefined(); + }); + + it('should add vue related dependencies when using html as uiFramework', async () => { + const existing = 'existing'; + const existingVersion = '1.0.0'; + addDependenciesToPackageJson( + tree, + { '@nrwl/storybook': storybookVersion, [existing]: existingVersion }, + { [existing]: existingVersion } + ); + await initGenerator(tree, { + uiFramework: '@storybook/vue', + }); + const packageJson = readJson(tree, 'package.json'); + + // general deps + expect(packageJson.devDependencies['@nrwl/storybook']).toBeDefined(); + expect(packageJson.dependencies['@nrwl/storybook']).toBeUndefined(); + expect(packageJson.dependencies[existing]).toBeDefined(); + expect(packageJson.devDependencies[existing]).toBeDefined(); + expect( + packageJson.devDependencies['@storybook/addon-essentials'] + ).toBeDefined(); + + // react specific + expect(packageJson.devDependencies['@storybook/react']).not.toBeDefined(); + expect(packageJson.devDependencies['@babel/core']).not.toBeDefined(); + expect(packageJson.devDependencies['babel-loader']).not.toBeDefined(); + + // angular specific + expect(packageJson.devDependencies['@storybook/angular']).not.toBeDefined(); + expect(packageJson.devDependencies['@angular/forms']).not.toBeDefined(); + + // generic html specific + expect(packageJson.devDependencies['@storybook/html']).not.toBeDefined(); + + // generic web-components specific + expect( + packageJson.devDependencies['@storybook/web-components'] + ).not.toBeDefined(); + + // generic vue specific + expect(packageJson.devDependencies['@storybook/vue']).toBeDefined(); + }); + it('should add build-storybook to cacheable operations', async () => { await initGenerator(tree, { uiFramework: '@storybook/html', @@ -131,4 +217,24 @@ describe('@nrwl/storybook:init', () => { nxJson.tasksRunnerOptions.default.options.cacheableOperations ).toContain('build-storybook'); }); + + it('should add build-storybook to cacheable operations for web-components', async () => { + await initGenerator(tree, { + uiFramework: '@storybook/web-components', + }); + const nxJson = readJson(tree, 'nx.json'); + expect( + nxJson.tasksRunnerOptions.default.options.cacheableOperations + ).toContain('build-storybook'); + }); + + it('should add build-storybook to cacheable operations for vue', async () => { + await initGenerator(tree, { + uiFramework: '@storybook/vue', + }); + const nxJson = readJson(tree, 'nx.json'); + expect( + nxJson.tasksRunnerOptions.default.options.cacheableOperations + ).toContain('build-storybook'); + }); }); diff --git a/packages/storybook/src/generators/init/init.ts b/packages/storybook/src/generators/init/init.ts index c5322ac998..81b1a3fa8e 100644 --- a/packages/storybook/src/generators/init/init.ts +++ b/packages/storybook/src/generators/init/init.ts @@ -91,6 +91,14 @@ function checkDependenciesInstalled(host: Tree, schema: Schema) { devDependencies['@storybook/html'] = storybookVersion; } + if (isFramework('vue', schema)) { + devDependencies['@storybook/vue'] = storybookVersion; + } + + if (isFramework('web-components', schema)) { + devDependencies['@storybook/web-components'] = storybookVersion; + } + return addDependenciesToPackageJson(host, dependencies, devDependencies); } diff --git a/packages/storybook/src/generators/init/schema.d.ts b/packages/storybook/src/generators/init/schema.d.ts index f7a9b73696..8bee81e603 100644 --- a/packages/storybook/src/generators/init/schema.d.ts +++ b/packages/storybook/src/generators/init/schema.d.ts @@ -1,3 +1,8 @@ export interface Schema { - uiFramework: '@storybook/angular' | '@storybook/react' | '@storybook/html'; + uiFramework: + | '@storybook/angular' + | '@storybook/react' + | '@storybook/html' + | '@storybook/web-components' + | '@storybook/vue'; } diff --git a/packages/storybook/src/generators/init/schema.json b/packages/storybook/src/generators/init/schema.json index 2a9e63cb45..194eb8e685 100644 --- a/packages/storybook/src/generators/init/schema.json +++ b/packages/storybook/src/generators/init/schema.json @@ -7,7 +7,13 @@ "uiFramework": { "type": "string", "description": "Storybook UI Framework to use", - "enum": ["@storybook/angular", "@storybook/react", "@storybook/html"], + "enum": [ + "@storybook/angular", + "@storybook/react", + "@storybook/html", + "@storybook/web-components", + "@storybook/vue" + ], "x-prompt": "What UI framework plugin should storybook use?" } } diff --git a/packages/storybook/src/utils/utilities.ts b/packages/storybook/src/utils/utilities.ts index ce4ec92aa8..a95c882ee9 100644 --- a/packages/storybook/src/utils/utilities.ts +++ b/packages/storybook/src/utils/utilities.ts @@ -14,6 +14,8 @@ export const Constants = { angular: '@storybook/angular', react: '@storybook/react', html: '@storybook/html', + 'web-components': '@storybook/web-components', + vue: '@storybook/vue', } as const, }; type Constants = typeof Constants; @@ -36,6 +38,17 @@ export function isFramework( return true; } + if ( + type === 'web-components' && + schema.uiFramework === '@storybook/web-components' + ) { + return true; + } + + if (type === 'vue' && schema.uiFramework === '@storybook/vue') { + return true; + } + return false; }