fix(storybook): install nx/vite for non-buildable libs (#18778)

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

@@ -3,17 +3,21 @@
 exports[`react:storybook-configuration should configure everything and install correct dependencies 1`] = `
 "import type { StorybookConfig } from '@storybook/react-vite';
 
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+import { mergeConfig } from 'vite';
+
 const config: StorybookConfig = {
   stories: ['../src/lib/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
   addons: ['@storybook/addon-essentials', '@storybook/addon-interactions'],
   framework: {
     name: '@storybook/react-vite',
-    options: {
-      builder: {
-        viteConfigPath: '',
-      },
-    },
+    options: {},
   },
+
+  viteFinal: async (config) =>
+    mergeConfig(config, {
+      plugins: [nxViteTsPaths()],
+    }),
 };
 
 export default config;

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

@@ -3,17 +3,21 @@
 exports[`@nx/storybook:configuration for workspaces with Root project basic functionalities should generate Storybook files for nested project only 1`] = `
 "import type { StorybookConfig } from '@storybook/react-vite';
 
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+import { mergeConfig } from 'vite';
+
 const config: StorybookConfig = {
   stories: ['../src/app/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
   addons: ['@storybook/addon-essentials', '@storybook/addon-interactions'],
   framework: {
     name: '@storybook/react-vite',
-    options: {
-      builder: {
-        viteConfigPath: '',
-      },
-    },
+    options: {},
   },
+
+  viteFinal: async (config) =>
+    mergeConfig(config, {
+      plugins: [nxViteTsPaths()],
+    }),
 };
 
 export default config;

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

@@ -98,7 +98,6 @@ describe('@nx/storybook:configuration for Storybook v7', () => {
       await configurationGenerator(tree, {
         name: 'test-ui-lib',
         standaloneConfig: false,
-
         uiFramework: '@storybook/react-webpack5',
       });
       const tsconfigJson = readJson<TsConfig>(

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

@@ -198,6 +198,17 @@ export async function configurationGenerator(
     devDeps['core-js'] = coreJsVersion;
   }
 
+  if (
+    schema.uiFramework.endsWith('-vite') &&
+    (!viteBuildTarget || !viteConfigFilePath)
+  ) {
+    // This means that the user has selected a Vite framework
+    // but the project does not have Vite configuration.
+    // We need to install the @nx/vite plugin in order to be able to use
+    // the nxViteTsPaths plugin to register the tsconfig paths in Vite.
+    devDeps['@nx/vite'] = nxVersion;
+  }
+
   tasks.push(addDependenciesToPackageJson(tree, {}, devDeps));
 
   if (!schema.skipFormat) {

packages/storybook/src/generators/configuration/project-files-ts/.storybook/main.ts__tmpl__

@@ -1,4 +1,8 @@
 import type { StorybookConfig } from '<%= uiFramework %>';
+<% if (usesVite && !viteConfigFilePath) { %>
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+import { mergeConfig } from 'vite';
+<% } %>
 
 const config: StorybookConfig = {
   stories: [
@@ -10,13 +14,19 @@ const config: StorybookConfig = {
   framework: {
     name: '<%= uiFramework %>',
     options: {
-      <% if (usesVite) { %>
+      <% if (usesVite && viteConfigFilePath) { %>
       builder: {
         viteConfigPath: '<%= viteConfigFilePath %>',
       },
       <% } %>
     },
   },
+  <% if (usesVite && !viteConfigFilePath) { %>
+  viteFinal: async (config) =>
+    mergeConfig(config, {
+      plugins: [nxViteTsPaths()],
+    }),
+  <% } %>
 };
 
 export default config;

packages/storybook/src/generators/configuration/project-files/.storybook/main.js__tmpl__

@@ -1,3 +1,8 @@
+<% if (usesVite && !viteConfigFilePath) { %>
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+import { mergeConfig } from 'vite';
+<% } %>
+
 const config = {
   stories: [
     <% if(uiFramework === '@storybook/angular' && projectType === 'library') { %>
@@ -8,13 +13,19 @@ const config = {
   framework: {
     name: '<%= uiFramework %>',
     options: {
-      <% if (usesVite) { %>
+      <% if (usesVite && viteConfigFilePath) { %>
       builder: {
         viteConfigPath: '<%= viteConfigFilePath %>',
       },
       <% } %>
     },
   },
+  <% if (usesVite && !viteConfigFilePath) { %>
+  viteFinal: async (config) =>
+    mergeConfig(config, {
+      plugins: [nxViteTsPaths()],
+    }),
+  <% } %>
 };
 
 export default config;