feat(storybook): add vue3 support for storybook executer (#6604)

`This PR adds support for 'vue3' so it can be used to run storybook in a NX workspace

Closes #6603

docs/angular/api-storybook/executors/storybook.md

@@ -12,7 +12,7 @@ Default: `@storybook/angular`
 
 Type: `string`
 
-Possible values: `@storybook/angular`, `@storybook/react`, `@storybook/html`, `@storybook/web-components`, `@storybook/vue`
+Possible values: `@storybook/angular`, `@storybook/react`, `@storybook/html`, `@storybook/web-components`, `@storybook/vue`, `@storybook/vue3`
 
 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`, `@storybook/web-components`, `@storybook/vue`
+Possible values: `@storybook/angular`, `@storybook/react`, `@storybook/html`, `@storybook/web-components`, `@storybook/vue`, `@storybook/vue3`
 
 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`, `@storybook/web-components`, `@storybook/vue`
+Possible values: `@storybook/angular`, `@storybook/react`, `@storybook/html`, `@storybook/web-components`, `@storybook/vue`, `@storybook/vue3`
 
 Storybook framework npm package
 

packages/storybook/src/executors/storybook/schema.json

@@ -12,7 +12,8 @@
         "@storybook/react",
         "@storybook/html",
         "@storybook/web-components",
-        "@storybook/vue"
+        "@storybook/vue",
+        "@storybook/vue3"
       ],
       "default": "@storybook/angular",
       "hidden": true

packages/storybook/src/executors/storybook/storybook.impl.ts

@@ -21,7 +21,8 @@ export interface StorybookExecutorOptions {
     | '@storybook/react'
     | '@storybook/html'
     | '@storybook/web-components'
-    | '@storybook/vue';
+    | '@storybook/vue'
+    | '@storybook/vue3';
   projectBuildConfig?: string;
   config: StorybookConfig;
   host?: string;

packages/storybook/src/executors/utils.ts

@@ -13,6 +13,7 @@ export function getStorybookFrameworkPath(uiFramework) {
     '@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/vue3': '@storybook/vue3/dist/cjs/server/options',
     '@storybook/web-components"':
       '@storybook/web-components"/dist/cjs/server/options',
   };

packages/storybook/src/generators/init/init.spec.ts

@@ -165,7 +165,7 @@ describe('@nrwl/storybook:init', () => {
     expect(packageJson.devDependencies['@storybook/vue']).not.toBeDefined();
   });
 
-  it('should add vue related dependencies when using html as uiFramework', async () => {
+  it('should add vue related dependencies when using vue as uiFramework', async () => {
     const existing = 'existing';
     const existingVersion = '1.0.0';
     addDependenciesToPackageJson(
@@ -208,6 +208,52 @@ describe('@nrwl/storybook:init', () => {
     expect(packageJson.devDependencies['@storybook/vue']).toBeDefined();
   });
 
+  it('should add vue3 related dependencies when using vue3 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/vue3',
+    });
+    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 vue specific
+    expect(packageJson.devDependencies['@storybook/vue']).not.toBeDefined();
+
+    // generic web-components specific
+    expect(
+      packageJson.devDependencies['@storybook/web-components']
+    ).not.toBeDefined();
+
+    // generic vue3 specific
+    expect(packageJson.devDependencies['@storybook/vue3']).toBeDefined();
+  });
+
   it('should add build-storybook to cacheable operations', async () => {
     await initGenerator(tree, {
       uiFramework: '@storybook/html',
@@ -237,4 +283,14 @@ describe('@nrwl/storybook:init', () => {
       nxJson.tasksRunnerOptions.default.options.cacheableOperations
     ).toContain('build-storybook');
   });
+
+  it('should add build-storybook to cacheable operations for vue3', async () => {
+    await initGenerator(tree, {
+      uiFramework: '@storybook/vue3',
+    });
+    const nxJson = readJson(tree, 'nx.json');
+    expect(
+      nxJson.tasksRunnerOptions.default.options.cacheableOperations
+    ).toContain('build-storybook');
+  });
 });

packages/storybook/src/generators/init/init.ts

@@ -95,6 +95,10 @@ function checkDependenciesInstalled(host: Tree, schema: Schema) {
     devDependencies['@storybook/vue'] = storybookVersion;
   }
 
+  if (isFramework('vue3', schema)) {
+    devDependencies['@storybook/vue3'] = storybookVersion;
+  }
+
   if (isFramework('web-components', schema)) {
     devDependencies['@storybook/web-components'] = storybookVersion;
   }

packages/storybook/src/generators/init/schema.d.ts

@@ -4,5 +4,6 @@ export interface Schema {
     | '@storybook/react'
     | '@storybook/html'
     | '@storybook/web-components'
-    | '@storybook/vue';
+    | '@storybook/vue'
+    | '@storybook/vue3';
 }

packages/storybook/src/generators/init/schema.json

@@ -12,7 +12,8 @@
         "@storybook/react",
         "@storybook/html",
         "@storybook/web-components",
-        "@storybook/vue"
+        "@storybook/vue",
+        "@storybook/vue3"
       ],
       "x-prompt": "What UI framework plugin should storybook use?"
     }

packages/storybook/src/utils/utilities.ts

@@ -16,6 +16,7 @@ export const Constants = {
     html: '@storybook/html',
     'web-components': '@storybook/web-components',
     vue: '@storybook/vue',
+    vue3: '@storybook/vue3',
   } as const,
 };
 type Constants = typeof Constants;
@@ -49,6 +50,10 @@ export function isFramework(
     return true;
   }
 
+  if (type === 'vue3' && schema.uiFramework === '@storybook/vue3') {
+    return true;
+  }
+
   return false;
 }