feat(storybook): allow users to init storybook with more frameworks (#6491)

ISSUES CLOSED: #5985

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
 

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
 

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
 

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
 

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
 

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
 

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
     },

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;

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)) {

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');
+  });
 });

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);
 }
 

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';
 }

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?"
     }
   }

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;
 }