diff --git a/packages/react/src/generators/storybook-configuration/configuration.ts b/packages/react/src/generators/storybook-configuration/configuration.ts index 56dd7c2ea8c62..2902f68f3a8f0 100644 --- a/packages/react/src/generators/storybook-configuration/configuration.ts +++ b/packages/react/src/generators/storybook-configuration/configuration.ts @@ -1,14 +1,17 @@ import { StorybookConfigureSchema } from './schema'; import storiesGenerator from '../stories/stories'; import { + addDependenciesToPackageJson, ensurePackage, formatFiles, + type GeneratorCallback, joinPathFragments, readNxJson, readProjectConfiguration, + runTasksInSerial, Tree, } from '@nx/devkit'; -import { nxVersion } from '../../utils/versions'; +import { nxVersion, reactViteVersion } from '../../utils/versions'; async function generateStories(host: Tree, schema: StorybookConfigureSchema) { // TODO(katerina): Nx 19 -> remove Cypress @@ -48,6 +51,7 @@ export async function storybookConfigurationGeneratorInternal( host: Tree, schema: StorybookConfigureSchema ) { + const tasks: GeneratorCallback[] = []; const nxJson = readNxJson(host); const addPluginDefault = process.env.NX_ADD_PLUGINS !== 'false' && @@ -69,6 +73,16 @@ export async function storybookConfigurationGeneratorInternal( uiFramework = '@storybook/react-webpack5'; } + if (uiFramework === '@storybook/react-vite') { + tasks.push( + addDependenciesToPackageJson( + host, + {}, + { '@vitejs/plugin-react': reactViteVersion } + ) + ); + } + const installTask = await configurationGenerator(host, { project: schema.project, configureCypress: schema.configureCypress, @@ -83,13 +97,15 @@ export async function storybookConfigurationGeneratorInternal( addPlugin: schema.addPlugin, }); + tasks.push(installTask); + if (schema.generateStories) { await generateStories(host, schema); } await formatFiles(host); - return installTask; + return runTasksInSerial(...tasks); } export default storybookConfigurationGenerator; diff --git a/packages/react/src/utils/versions.ts b/packages/react/src/utils/versions.ts index 7cbca40bb4a83..779ea2690f035 100755 --- a/packages/react/src/utils/versions.ts +++ b/packages/react/src/utils/versions.ts @@ -11,6 +11,7 @@ export const babelLoaderVersion = '^9.1.2'; export const typesReactVersion = '18.3.1'; export const typesReactDomVersion = '18.3.0'; export const typesReactIsVersion = '18.3.0'; +export const reactViteVersion = '^4.2.0'; export const typesNodeVersion = '18.16.9';