Skip to content

Commit

Permalink
fix(storybook): install nx/vite for non-buildable libs (#18778)
Browse files Browse the repository at this point in the history
  • Loading branch information
mandarini authored Aug 22, 2023
1 parent 016c89f commit 57463ed
Show file tree
Hide file tree
Showing 6 changed files with 52 additions and 13 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>(
Expand Down
11 changes: 11 additions & 0 deletions packages/storybook/src/generators/configuration/configuration.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
Original file line number Diff line number Diff line change
@@ -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: [
Expand All @@ -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;
Expand Down
Original file line number Diff line number Diff line change
@@ -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') { %>
Expand All @@ -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;
Expand Down

1 comment on commit 57463ed

@vercel
Copy link

@vercel vercel bot commented on 57463ed Aug 22, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

nx-dev – ./

nx-dev-git-master-nrwl.vercel.app
nx-dev-nrwl.vercel.app
nx-five.vercel.app
nx.dev

Please sign in to comment.