From 57463ed25a0f49ea7eaba65cac57c4f5a1b1b05c Mon Sep 17 00:00:00 2001
From: Katerina Skroumpelou <mandarini@users.noreply.github.com>
Date: Tue, 22 Aug 2023 19:46:50 +0300
Subject: [PATCH] fix(storybook): install nx/vite for non-buildable libs
 (#18778)

---
 .../__snapshots__/configuration.spec.ts.snap       | 14 +++++++++-----
 .../configuration-nested.spec.ts.snap              | 14 +++++++++-----
 .../generators/configuration/configuration.spec.ts |  1 -
 .../src/generators/configuration/configuration.ts  | 11 +++++++++++
 .../project-files-ts/.storybook/main.ts__tmpl__    | 12 +++++++++++-
 .../project-files/.storybook/main.js__tmpl__       | 13 ++++++++++++-
 6 files changed, 52 insertions(+), 13 deletions(-)

diff --git a/packages/react/src/generators/storybook-configuration/__snapshots__/configuration.spec.ts.snap b/packages/react/src/generators/storybook-configuration/__snapshots__/configuration.spec.ts.snap
index bd8771f3a18af..2fb26975d9a46 100644
--- a/packages/react/src/generators/storybook-configuration/__snapshots__/configuration.spec.ts.snap
+++ b/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;
diff --git a/packages/storybook/src/generators/configuration/__snapshots__/configuration-nested.spec.ts.snap b/packages/storybook/src/generators/configuration/__snapshots__/configuration-nested.spec.ts.snap
index 9f8fbaed90900..98f67064fa318 100644
--- a/packages/storybook/src/generators/configuration/__snapshots__/configuration-nested.spec.ts.snap
+++ b/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;
diff --git a/packages/storybook/src/generators/configuration/configuration.spec.ts b/packages/storybook/src/generators/configuration/configuration.spec.ts
index 2d24fe5b970c1..ca8322157fd2f 100644
--- a/packages/storybook/src/generators/configuration/configuration.spec.ts
+++ b/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>(
diff --git a/packages/storybook/src/generators/configuration/configuration.ts b/packages/storybook/src/generators/configuration/configuration.ts
index d6d172f791684..8b0f5d10e8ebd 100644
--- a/packages/storybook/src/generators/configuration/configuration.ts
+++ b/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) {
diff --git a/packages/storybook/src/generators/configuration/project-files-ts/.storybook/main.ts__tmpl__ b/packages/storybook/src/generators/configuration/project-files-ts/.storybook/main.ts__tmpl__
index fbded88511182..8fda41fc040a0 100644
--- a/packages/storybook/src/generators/configuration/project-files-ts/.storybook/main.ts__tmpl__
+++ b/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;
diff --git a/packages/storybook/src/generators/configuration/project-files/.storybook/main.js__tmpl__ b/packages/storybook/src/generators/configuration/project-files/.storybook/main.js__tmpl__
index 7a5b06cff8423..d48266fd3109d 100644
--- a/packages/storybook/src/generators/configuration/project-files/.storybook/main.js__tmpl__
+++ b/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;