feat(storybook): generate config for vite (#13381)

docs/generated/packages/angular.json

@@ -2266,8 +2266,7 @@
           },
           "configureTestRunner": {
             "type": "boolean",
-            "description": "Add a Storybook Test-Runner target.",
-            "x-prompt": "Add a Storybook Test-Runner target?"
+            "description": "Add a Storybook Test-Runner target."
           }
         },
         "additionalProperties": false,

docs/generated/packages/react.json

@@ -705,8 +705,13 @@
           },
           "configureTestRunner": {
             "type": "boolean",
-            "description": "Add a Storybook Test-Runner target.",
-            "x-prompt": "Add a Storybook Test-Runner target?"
+            "description": "Add a Storybook Test-Runner target."
+          },
+          "bundler": {
+            "description": "The Storybook builder to use.",
+            "enum": ["vite", "webpack"],
+            "x-prompt": "Which Storybook builder do you want to use?",
+            "default": "webpack"
           }
         },
         "required": ["name"],

docs/generated/packages/storybook.json

@@ -111,6 +111,12 @@
               "@storybook/react-native"
             ],
             "x-prompt": "What UI framework plugin should storybook use?"
+          },
+          "bundler": {
+            "description": "The bundler to use.",
+            "enum": ["vite", "webpack"],
+            "x-prompt": "Which bundler do you want to use?",
+            "default": "webpack"
           }
         },
         "presets": []
@@ -186,8 +192,13 @@
           },
           "configureTestRunner": {
             "type": "boolean",
-            "description": "Add a Storybook Test-Runner target.",
-            "x-prompt": "Add a Storybook Test-Runner target?"
+            "description": "Add a Storybook Test-Runner target."
+          },
+          "bundler": {
+            "description": "The Storybook builder to use.",
+            "enum": ["vite", "webpack"],
+            "x-prompt": "Which Storybook builder do you want to use?",
+            "default": "webpack"
           }
         },
         "required": ["name"],

packages/angular/src/generators/storybook-configuration/__snapshots__/storybook-configuration.spec.ts.snap

@@ -5,11 +5,10 @@ exports[`StorybookConfiguration generator should configure storybook to use webp
 
 
 
+
 module.exports = {
   ...rootMain,
-  
   core: { ...rootMain.core, builder: 'webpack5' },
-  
   stories: [
     ...rootMain.stories,
     '../**/*.stories.mdx',

packages/angular/src/generators/storybook-configuration/schema.json

@@ -72,8 +72,7 @@
     },
     "configureTestRunner": {
       "type": "boolean",
-      "description": "Add a Storybook Test-Runner target.",
-      "x-prompt": "Add a Storybook Test-Runner target?"
+      "description": "Add a Storybook Test-Runner target."
     }
   },
   "additionalProperties": false,

packages/react/src/generators/storybook-configuration/configuration.ts

@@ -2,18 +2,18 @@ import { StorybookConfigureSchema } from './schema';
 import storiesGenerator from '../stories/stories';
 import {
   convertNxGenerator,
+  logger,
   readProjectConfiguration,
   Tree,
 } from '@nrwl/devkit';
 import { configurationGenerator } from '@nrwl/storybook';
 import { getE2eProjectName } from '@nrwl/cypress/src/utils/project-name';
 
 async function generateStories(host: Tree, schema: StorybookConfigureSchema) {
-  const libConfig = readProjectConfiguration(host, schema.name);
-  const libRoot = libConfig.root;
+  const projectConfig = readProjectConfiguration(host, schema.name);
   const cypressProject = getE2eProjectName(
     schema.name,
-    libRoot,
+    projectConfig.root,
     schema.cypressDirectory
   );
   await storiesGenerator(host, {
@@ -30,6 +30,22 @@ export async function storybookConfigurationGenerator(
   host: Tree,
   schema: StorybookConfigureSchema
 ) {
+  let bundler = schema.bundler;
+  const projectConfig = readProjectConfiguration(host, schema.name);
+
+  if (
+    projectConfig.projectType === 'application' &&
+    projectConfig.targets['build']?.executor === '@nrwl/vite:build'
+  ) {
+    bundler = 'vite';
+    if (schema.bundler !== 'vite') {
+      logger.info(
+        `The project ${schema.name} is set up to use Vite. So
+      Storybook will be configured to use Vite as well.`
+      );
+    }
+  }
+
   const installTask = await configurationGenerator(host, {
     name: schema.name,
     uiFramework: '@storybook/react',
@@ -39,6 +55,7 @@ export async function storybookConfigurationGenerator(
     cypressDirectory: schema.cypressDirectory,
     standaloneConfig: schema.standaloneConfig,
     tsConfiguration: schema.tsConfiguration,
+    bundler,
   });
 
   if (schema.generateStories) {

packages/react/src/generators/storybook-configuration/schema.d.ts

@@ -11,5 +11,6 @@ export interface StorybookConfigureSchema {
   cypressDirectory?: string;
   standaloneConfig?: boolean;
   ignorePaths?: string[];
+  bundler?: 'webpack' | 'vite';
   configureTestRunner?: boolean;
 }

packages/react/src/generators/storybook-configuration/schema.json

@@ -76,8 +76,13 @@
     },
     "configureTestRunner": {
       "type": "boolean",
-      "description": "Add a Storybook Test-Runner target.",
-      "x-prompt": "Add a Storybook Test-Runner target?"
+      "description": "Add a Storybook Test-Runner target."
+    },
+    "bundler": {
+      "description": "The Storybook builder to use.",
+      "enum": ["vite", "webpack"],
+      "x-prompt": "Which Storybook builder do you want to use?",
+      "default": "webpack"
     }
   },
   "required": ["name"],

packages/storybook/src/generators/configuration/__snapshots__/configuration-nested.spec.ts.snap

@@ -0,0 +1,139 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`@nrwl/storybook:configuration for workspaces with Root project basic functionalities should generate Storybook files for nested first - then for root 1`] = `
+"
+import { rootMain } from './main.root';
+import type { StorybookConfig, Options } from '@storybook/core-common';
+
+
+const config: StorybookConfig = {
+  ...rootMain,
+  core: { ...rootMain.core, builder: '@storybook/builder-vite' },
+  stories: [
+    ...rootMain.stories,
+    '../src/app/**/*.stories.mdx',
+    '../src/app/**/*.stories.@(js|jsx|ts|tsx)'
+  ],
+  addons: [...(rootMain.addons || []) , '@nrwl/react/plugins/storybook' 
+    
+    
+  ],
+  webpackFinal: async (config, { configType }: Options) => {
+    // apply any global webpack configs that might have been specified in .storybook/main.ts
+    if (rootMain.webpackFinal) {
+      config = await rootMain.webpackFinal(config, { configType } as Options);
+    }
+
+    // add your own webpack tweaks if needed
+
+    return config;
+  },
+};
+
+module.exports = config;
+"
+`;
+
+exports[`@nrwl/storybook:configuration for workspaces with Root project basic functionalities should generate Storybook files for nested first - then for root 2`] = `
+"{
+  \\"extends\\": \\"../tsconfig.json\\",
+  \\"compilerOptions\\": {
+    \\"emitDecoratorMetadata\\": true
+    , \\"outDir\\": \\"\\" 
+  },
+  \\"files\\": [
+    \\"../node_modules/@nrwl/react/typings/styled-jsx.d.ts\\",
+    \\"../node_modules/@nrwl/react/typings/cssmodule.d.ts\\",
+    \\"../node_modules/@nrwl/react/typings/image.d.ts\\"
+  ],
+  \\"exclude\\": [\\"../**/*.spec.ts\\" , \\"../**/*.spec.js\\", \\"../**/*.spec.tsx\\", \\"../**/*.spec.jsx\\"],
+  \\"include\\": [
+    \\"../src/**/*.stories.ts\\",
+    \\"../src/**/*.stories.js\\",
+    \\"../src/**/*.stories.jsx\\",
+    \\"../src/**/*.stories.tsx\\",
+    \\"../src/**/*.stories.mdx\\",
+    \\"*.ts\\",
+    \\"*.js\\"]
+}
+"
+`;
+
+exports[`@nrwl/storybook:configuration for workspaces with Root project basic functionalities should generate Storybook files for nested first - then for root 3`] = `""`;
+
+exports[`@nrwl/storybook:configuration for workspaces with Root project basic functionalities should generate Storybook files for nested first - then for root 4`] = `
+"import type { StorybookConfig } from '@storybook/core-common';
+
+export const rootMain: StorybookConfig = {
+  stories: [],
+  addons: ['@storybook/addon-essentials'],
+  // webpackFinal: async (config, { configType }) => {
+  //   // Make whatever fine-grained changes you need that should apply to all storybook configs
+
+  //   // Return the altered config
+  //   return config;
+  // },
+};
+"
+`;
+
+exports[`@nrwl/storybook:configuration for workspaces with Root project basic functionalities should generate Storybook files for nested first - then for root 5`] = `
+"import { rootMain } from '../../../.storybook/main.root';
+
+import type { StorybookConfig, Options } from '@storybook/core-common';
+
+
+const config: StorybookConfig = {
+  ...rootMain,
+  core: { ...rootMain.core, builder: 'webpack5' },
+  stories: [
+    ...rootMain.stories,
+    '../src/app/**/*.stories.mdx',
+    '../src/app/**/*.stories.@(js|jsx|ts|tsx)'
+  ],
+  addons: [...(rootMain.addons || []) , '@nrwl/react/plugins/storybook' 
+    
+    
+  ],
+  webpackFinal: async (config, { configType }: Options) => {
+    // apply any global webpack configs that might have been specified in .storybook/main.ts
+    if (rootMain.webpackFinal) {
+      config = await rootMain.webpackFinal(config, { configType } as Options);
+    }
+
+    // add your own webpack tweaks if needed
+
+    return config;
+  },
+};
+
+module.exports = config;
+"
+`;
+
+exports[`@nrwl/storybook:configuration for workspaces with Root project basic functionalities should generate Storybook files for nested first - then for root 6`] = `
+"{
+  \\"extends\\": \\"../tsconfig.json\\",
+  \\"compilerOptions\\": {
+    \\"emitDecoratorMetadata\\": true
+    , \\"outDir\\": \\"\\" 
+  },
+  \\"files\\": [
+    \\"../../../node_modules/@nrwl/react/typings/styled-jsx.d.ts\\",
+    \\"../../../node_modules/@nrwl/react/typings/cssmodule.d.ts\\",
+    \\"../../../node_modules/@nrwl/react/typings/image.d.ts\\"
+  ],
+  \\"exclude\\": [\\"../**/*.spec.ts\\" , \\"../**/*.spec.js\\", \\"../**/*.spec.tsx\\", \\"../**/*.spec.jsx\\"],
+  \\"include\\": [
+    \\"../src/**/*.stories.ts\\",
+    \\"../src/**/*.stories.js\\",
+    \\"../src/**/*.stories.jsx\\",
+    \\"../src/**/*.stories.tsx\\",
+    \\"../src/**/*.stories.mdx\\",
+    \\"*.ts\\",
+    \\"*.js\\"]
+}
+"
+`;
+
+exports[`@nrwl/storybook:configuration for workspaces with Root project basic functionalities should generate Storybook files for nested first - then for root 7`] = `""`;