diff --git a/docs/generated/packages/angular/generators/storybook-configuration.json b/docs/generated/packages/angular/generators/storybook-configuration.json index d8bed5a5bb2a6c..1db44044d38db7 100644 --- a/docs/generated/packages/angular/generators/storybook-configuration.json +++ b/docs/generated/packages/angular/generators/storybook-configuration.json @@ -70,6 +70,11 @@ "configureTestRunner": { "type": "boolean", "description": "Add a Storybook Test-Runner target." + }, + "storybook7betaConfiguration": { + "description": "Configure your workspace to use Storybook 7, even though Storybook v7 is still in beta.", + "type": "boolean", + "default": false } }, "additionalProperties": false, diff --git a/docs/generated/packages/react/generators/storybook-configuration.json b/docs/generated/packages/react/generators/storybook-configuration.json index 7f2c45a67b03b5..a914f0e513ea1e 100644 --- a/docs/generated/packages/react/generators/storybook-configuration.json +++ b/docs/generated/packages/react/generators/storybook-configuration.json @@ -78,6 +78,11 @@ "bundler": { "description": "The Storybook builder to use.", "enum": ["vite", "webpack"] + }, + "storybook7betaConfiguration": { + "description": "Configure your workspace to use Storybook 7, even though Storybook v7 is still in beta.", + "type": "boolean", + "default": false } }, "required": ["name"], diff --git a/docs/generated/packages/storybook/generators/configuration.json b/docs/generated/packages/storybook/generators/configuration.json index 71ed3736384faf..ef78add334a13c 100644 --- a/docs/generated/packages/storybook/generators/configuration.json +++ b/docs/generated/packages/storybook/generators/configuration.json @@ -71,6 +71,33 @@ "enum": ["vite", "webpack"], "x-prompt": "Which Storybook builder do you want to use?", "default": "webpack" + }, + "storybook7betaConfiguration": { + "description": "Configure your workspace to use Storybook 7, even though Storybook v7 is still in beta.", + "type": "boolean", + "default": false + }, + "storybook7UiFramework": { + "type": "string", + "description": "Storybook UI Framework to use.", + "enum": [ + "@storybook/angular", + "@storybook/html-webpack5", + "@storybook/nextjs", + "@storybook/preact-webpack5", + "@storybook/react-webpack5", + "@storybook/react-vite", + "@storybook/server-webpack5", + "@storybook/svelte-webpack5", + "@storybook/svelte-vite", + "@storybook/sveltekit", + "@storybook/vue-webpack5", + "@storybook/vue-vite", + "@storybook/vue3-webpack5", + "@storybook/vue3-vite", + "@storybook/web-components-webpack5", + "@storybook/web-components-vite" + ] } }, "required": ["name"], diff --git a/docs/generated/packages/storybook/generators/init.json b/docs/generated/packages/storybook/generators/init.json index e3428c0a675c81..d2ecf6c03f6d8b 100644 --- a/docs/generated/packages/storybook/generators/init.json +++ b/docs/generated/packages/storybook/generators/init.json @@ -13,6 +13,21 @@ "description": "Storybook UI Framework to use.", "enum": [ "@storybook/angular", + "@storybook/html-webpack5", + "@storybook/nextjs", + "@storybook/preact-webpack5", + "@storybook/react-webpack5", + "@storybook/react-vite", + "@storybook/server-webpack5", + "@storybook/svelte-webpack5", + "@storybook/svelte-vite", + "@storybook/sveltekit", + "@storybook/vue-webpack5", + "@storybook/vue-vite", + "@storybook/vue3-webpack5", + "@storybook/vue3-vite", + "@storybook/web-components-webpack5", + "@storybook/web-components-vite", "@storybook/react", "@storybook/html", "@storybook/web-components", @@ -29,6 +44,11 @@ "enum": ["vite", "webpack"], "x-prompt": "Which bundler do you want to use?", "default": "webpack" + }, + "storybook7betaConfiguration": { + "description": "Configure your workspace to use Storybook 7, even though Storybook v7 is still in beta.", + "type": "boolean", + "default": false } }, "presets": [] diff --git a/packages/angular/src/generators/storybook-configuration/lib/generate-storybook-configuration.ts b/packages/angular/src/generators/storybook-configuration/lib/generate-storybook-configuration.ts index 7035eb61a3c63d..c5b79d95a52be6 100644 --- a/packages/angular/src/generators/storybook-configuration/lib/generate-storybook-configuration.ts +++ b/packages/angular/src/generators/storybook-configuration/lib/generate-storybook-configuration.ts @@ -16,5 +16,6 @@ export async function generateStorybookConfiguration( cypressDirectory: options.cypressDirectory, tsConfiguration: options.tsConfiguration, configureTestRunner: options.configureTestRunner, + storybook7betaConfiguration: options.storybook7betaConfiguration, }); } diff --git a/packages/angular/src/generators/storybook-configuration/schema.d.ts b/packages/angular/src/generators/storybook-configuration/schema.d.ts index a0d3e99507dc7b..4a3cbae53621fa 100644 --- a/packages/angular/src/generators/storybook-configuration/schema.d.ts +++ b/packages/angular/src/generators/storybook-configuration/schema.d.ts @@ -11,4 +11,5 @@ export interface StorybookConfigurationOptions { skipFormat?: boolean; ignorePaths?: string[]; configureTestRunner?: boolean; + storybook7betaConfiguration?: boolean; } diff --git a/packages/angular/src/generators/storybook-configuration/schema.json b/packages/angular/src/generators/storybook-configuration/schema.json index cebda72ce91ca7..f4b59a74f470f4 100644 --- a/packages/angular/src/generators/storybook-configuration/schema.json +++ b/packages/angular/src/generators/storybook-configuration/schema.json @@ -73,6 +73,11 @@ "configureTestRunner": { "type": "boolean", "description": "Add a Storybook Test-Runner target." + }, + "storybook7betaConfiguration": { + "description": "Configure your workspace to use Storybook 7, even though Storybook v7 is still in beta.", + "type": "boolean", + "default": false } }, "additionalProperties": false, diff --git a/packages/react/src/generators/storybook-configuration/configuration.ts b/packages/react/src/generators/storybook-configuration/configuration.ts index 2b155914188d7e..8c5551b4135f7a 100644 --- a/packages/react/src/generators/storybook-configuration/configuration.ts +++ b/packages/react/src/generators/storybook-configuration/configuration.ts @@ -101,6 +101,11 @@ export async function storybookConfigurationGenerator( tsConfiguration: schema.tsConfiguration, configureTestRunner: schema.configureTestRunner, bundler, + storybook7betaConfiguration: schema.storybook7betaConfiguration, + storybook7UiFramework: + bundler === 'vite' + ? '@storybook/react-vite' + : '@storybook/react-webpack5', }); if (schema.generateStories) { diff --git a/packages/react/src/generators/storybook-configuration/schema.d.ts b/packages/react/src/generators/storybook-configuration/schema.d.ts index cb39f7707b91bd..724066ec691929 100644 --- a/packages/react/src/generators/storybook-configuration/schema.d.ts +++ b/packages/react/src/generators/storybook-configuration/schema.d.ts @@ -13,4 +13,5 @@ export interface StorybookConfigureSchema { ignorePaths?: string[]; bundler?: 'webpack' | 'vite'; configureTestRunner?: boolean; + storybook7betaConfiguration?: boolean; } diff --git a/packages/react/src/generators/storybook-configuration/schema.json b/packages/react/src/generators/storybook-configuration/schema.json index a99a03b88e899c..1184db174b87e4 100644 --- a/packages/react/src/generators/storybook-configuration/schema.json +++ b/packages/react/src/generators/storybook-configuration/schema.json @@ -81,6 +81,11 @@ "bundler": { "description": "The Storybook builder to use.", "enum": ["vite", "webpack"] + }, + "storybook7betaConfiguration": { + "description": "Configure your workspace to use Storybook 7, even though Storybook v7 is still in beta.", + "type": "boolean", + "default": false } }, "required": ["name"], diff --git a/packages/storybook/src/executors/models.ts b/packages/storybook/src/executors/models.ts index 720adf992fc365..ba4180d7d601de 100644 --- a/packages/storybook/src/executors/models.ts +++ b/packages/storybook/src/executors/models.ts @@ -6,14 +6,13 @@ export interface StorybookConfig { } export interface CommonNxStorybookConfig { - uiFramework?: UiFramework; - uiFramework7?: UiFramework7; + uiFramework?: UiFramework; // TODO(katerina): Remove when Storybook 7 } export type UiFramework7 = | '@storybook/angular' | '@storybook/html-webpack5' - | '@storybook/next' + | '@storybook/nextjs' | '@storybook/preact-webpack5' | '@storybook/react-webpack5' | '@storybook/react-vite' diff --git a/packages/storybook/src/generators/configuration/configuration.ts b/packages/storybook/src/generators/configuration/configuration.ts index 3c290777b8047a..f30fba67bb686e 100644 --- a/packages/storybook/src/generators/configuration/configuration.ts +++ b/packages/storybook/src/generators/configuration/configuration.ts @@ -49,17 +49,63 @@ export async function configurationGenerator( const { nextBuildTarget, compiler, viteBuildTarget } = findStorybookAndBuildTargetsAndCompiler(targets); - if (viteBuildTarget && schema.bundler !== 'vite') { - logger.info( - `Your project ${schema.name} uses Vite as a bundler. - Nx will configure Storybook for this project to use Vite as well.` - ); - schema.bundler = 'vite'; + if (viteBuildTarget) { + if (schema.bundler !== 'vite') { + logger.info( + `Your project ${schema.name} uses Vite as a bundler. + Nx will configure Storybook for this project to use Vite as well.` + ); + schema.bundler = 'vite'; + } + } + + if (schema.storybook7betaConfiguration) { + if (viteBuildTarget) { + if (schema.storybook7UiFramework === '@storybook/react-webpack5') { + logger.info( + `Your project ${schema.name} uses Vite as a bundler. + Nx will configure Storybook for this project to use Vite as well.` + ); + schema.storybook7UiFramework = '@storybook/react-vite'; + } + if ( + schema.storybook7UiFramework === '@storybook/web-components-webpack5' + ) { + logger.info( + `Your project ${schema.name} uses Vite as a bundler. + Nx will configure Storybook for this project to use Vite as well.` + ); + schema.storybook7UiFramework = '@storybook/web-components-vite'; + } + } + + if (nextBuildTarget) { + schema.storybook7UiFramework = '@storybook/nextjs'; + } + + if (!schema.storybook7UiFramework) { + if (schema.uiFramework === '@storybook/react') { + schema.storybook7UiFramework = viteBuildTarget + ? '@storybook/react-vite' + : '@storybook/react-webpack5'; + } else if (schema.uiFramework === '@storybook/web-components') { + schema.storybook7UiFramework = viteBuildTarget + ? '@storybook/web-components-vite' + : '@storybook/web-components-webpack5'; + } else if (schema.uiFramework === '@storybook/angular') { + schema.storybook7UiFramework = '@storybook/angular'; + } else if (schema.uiFramework !== '@storybook/react-native') { + schema.storybook7UiFramework = `${schema.uiFramework}-webpack5`; + } + } } - const initTask = await initGenerator(tree, { - uiFramework: schema.uiFramework, + const initTask = initGenerator(tree, { + uiFramework: schema.storybook7betaConfiguration + ? schema.storybook7UiFramework + : schema.uiFramework, bundler: schema.bundler, + storybook7betaConfiguration: schema.storybook7betaConfiguration, }); tasks.push(initTask); diff --git a/packages/storybook/src/generators/configuration/schema.d.ts b/packages/storybook/src/generators/configuration/schema.d.ts index 2a90e7f0379f0c..c29b83f3221edb 100644 --- a/packages/storybook/src/generators/configuration/schema.d.ts +++ b/packages/storybook/src/generators/configuration/schema.d.ts @@ -1,22 +1,17 @@ import { Linter } from '@nrwl/linter'; +import { UiFramework7, UiFramework } from '../../executors/models'; export interface StorybookConfigureSchema { name: string; - uiFramework: - | '@storybook/angular' - | '@storybook/react' - | '@storybook/react-native' - | '@storybook/html' - | '@storybook/web-components' - | '@storybook/vue' - | '@storybook/vue3' - | '@storybook/svelte'; + uiFramework: UiFramework; configureCypress?: boolean; - bundler?: 'webpack' | 'vite'; + bundler?: 'webpack' | 'vite'; // TODO(katerina): Remove when Storybook 7 linter?: Linter; js?: boolean; tsConfiguration?: boolean; cypressDirectory?: string; standaloneConfig?: boolean; configureTestRunner?: boolean; + storybook7betaConfiguration?: boolean; + storybook7UiFramework?: UiFramework7; } diff --git a/packages/storybook/src/generators/configuration/schema.json b/packages/storybook/src/generators/configuration/schema.json index 1665670e869737..ca066d57bcda03 100644 --- a/packages/storybook/src/generators/configuration/schema.json +++ b/packages/storybook/src/generators/configuration/schema.json @@ -71,6 +71,33 @@ "enum": ["vite", "webpack"], "x-prompt": "Which Storybook builder do you want to use?", "default": "webpack" + }, + "storybook7betaConfiguration": { + "description": "Configure your workspace to use Storybook 7, even though Storybook v7 is still in beta.", + "type": "boolean", + "default": false + }, + "storybook7UiFramework": { + "type": "string", + "description": "Storybook UI Framework to use.", + "enum": [ + "@storybook/angular", + "@storybook/html-webpack5", + "@storybook/nextjs", + "@storybook/preact-webpack5", + "@storybook/react-webpack5", + "@storybook/react-vite", + "@storybook/server-webpack5", + "@storybook/svelte-webpack5", + "@storybook/svelte-vite", + "@storybook/sveltekit", + "@storybook/vue-webpack5", + "@storybook/vue-vite", + "@storybook/vue3-webpack5", + "@storybook/vue3-vite", + "@storybook/web-components-webpack5", + "@storybook/web-components-vite" + ] } }, "required": ["name"], diff --git a/packages/storybook/src/generators/configuration/util-functions.ts b/packages/storybook/src/generators/configuration/util-functions.ts index bbb17f8ed203a0..bbb50f75af8d8b 100644 --- a/packages/storybook/src/generators/configuration/util-functions.ts +++ b/packages/storybook/src/generators/configuration/util-functions.ts @@ -21,7 +21,6 @@ import { join, relative } from 'path'; import { dedupe, findStorybookAndBuildTargetsAndCompiler, - isFramework, TsConfig, } from '../../utils/utilities'; import { StorybookConfigureSchema } from './schema'; @@ -168,7 +167,8 @@ export function configureTsProjectConfig( ...(tsConfigContent.exclude || []), '**/*.stories.ts', '**/*.stories.js', - ...(isFramework('react', schema) || isFramework('react-native', schema) + ...(schema.uiFramework === '@storybook/react' || + schema.uiFramework === '@storybook/react-native' ? ['**/*.stories.jsx', '**/*.stories.tsx'] : []), ]; diff --git a/packages/storybook/src/generators/init/init.ts b/packages/storybook/src/generators/init/init.ts index 95f616be0bf1ec..5da8a16fa12495 100644 --- a/packages/storybook/src/generators/init/init.ts +++ b/packages/storybook/src/generators/init/init.ts @@ -7,7 +7,6 @@ import { updateJson, updateNxJson, } from '@nrwl/devkit'; -import { isFramework } from '../../utils/utilities'; import { babelCoreVersion, @@ -17,6 +16,7 @@ import { litHtmlVersion, nxVersion, reactNativeStorybookLoader, + storybook7Version, storybookReactNativeVersion, storybookVersion, svgrVersion, @@ -36,74 +36,101 @@ function checkDependenciesInstalled(host: Tree, schema: Schema) { // base deps devDependencies['@nrwl/storybook'] = nxVersion; - devDependencies['@storybook/core-server'] = storybookVersion; - devDependencies['@storybook/addon-essentials'] = storybookVersion; - if (schema.bundler === 'vite') { - devDependencies['@storybook/builder-vite'] = viteBuilderVersion; - } else { - devDependencies['@storybook/builder-webpack5'] = storybookVersion; - devDependencies['@storybook/manager-webpack5'] = storybookVersion; - } - - // TODO(katerina): Remove this when Storybook 7.0 is added in Nx - devDependencies['html-webpack-plugin'] = htmlWebpackPluginVersion; - - if (isFramework('angular', schema)) { - devDependencies['@storybook/angular'] = storybookVersion; - devDependencies['webpack'] = webpack5Version; + if (schema.storybook7betaConfiguration) { + if (schema.uiFramework === '@storybook/react-native') { + devDependencies['@storybook/react-native'] = storybookReactNativeVersion; + } else { + devDependencies[schema.uiFramework] = storybook7Version; + } + devDependencies['@storybook/core-server'] = storybook7Version; + devDependencies['@storybook/addon-essentials'] = storybook7Version; + + if (schema.uiFramework === '@storybook/angular') { + if ( + !packageJson.dependencies['@angular/forms'] && + !packageJson.devDependencies['@angular/forms'] + ) { + devDependencies['@angular/forms'] = '*'; + } + } if ( - !packageJson.dependencies['@angular/forms'] && - !packageJson.devDependencies['@angular/forms'] + schema.uiFramework === '@storybook/web-components-vite' || + schema.uiFramework === '@storybook/web-components-webpack5' ) { - devDependencies['@angular/forms'] = '*'; + devDependencies['lit-html'] = litHtmlVersion; } - } - if (isFramework('react', schema)) { - devDependencies['@storybook/react'] = storybookVersion; - devDependencies['@svgr/webpack'] = svgrVersion; - devDependencies['url-loader'] = urlLoaderVersion; - devDependencies['babel-loader'] = babelLoaderVersion; - devDependencies['@babel/core'] = babelCoreVersion; - devDependencies['@babel/preset-typescript'] = babelPresetTypescriptVersion; - devDependencies['@storybook/react'] = storybookVersion; - } + if (schema.uiFramework === '@storybook/react-native') { + devDependencies['@storybook/addon-ondevice-actions'] = + storybookReactNativeVersion; + devDependencies['@storybook/addon-ondevice-backgrounds'] = + storybookReactNativeVersion; + devDependencies['@storybook/addon-ondevice-controls'] = + storybookReactNativeVersion; + devDependencies['@storybook/addon-ondevice-notes'] = + storybookReactNativeVersion; + devDependencies['react-native-storybook-loader'] = + reactNativeStorybookLoader; + } + } else { + // TODO(katerina): Remove when Storybook v7 + if (schema.uiFramework === '@storybook/react-native') { + devDependencies['@storybook/react-native'] = storybookReactNativeVersion; + } else { + devDependencies[schema.uiFramework] = storybookVersion; + } - if (isFramework('html', schema)) { - devDependencies['@storybook/html'] = storybookVersion; - } + devDependencies[schema.uiFramework] = storybookVersion; + devDependencies['@storybook/core-server'] = storybookVersion; + devDependencies['@storybook/addon-essentials'] = storybookVersion; - if (isFramework('vue', schema)) { - devDependencies['@storybook/vue'] = storybookVersion; - } + if (schema.bundler === 'vite') { + devDependencies['@storybook/builder-vite'] = viteBuilderVersion; + } else { + devDependencies['@storybook/builder-webpack5'] = storybookVersion; + devDependencies['@storybook/manager-webpack5'] = storybookVersion; + } - if (isFramework('vue3', schema)) { - devDependencies['@storybook/vue3'] = storybookVersion; - } + devDependencies['html-webpack-plugin'] = htmlWebpackPluginVersion; - if (isFramework('web-components', schema)) { - devDependencies['@storybook/web-components'] = storybookVersion; - devDependencies['lit-html'] = litHtmlVersion; - } + if (schema.uiFramework === '@storybook/angular') { + devDependencies['webpack'] = webpack5Version; - if (isFramework('svelte', schema)) { - devDependencies['@storybook/svelte'] = storybookVersion; - } + if ( + !packageJson.dependencies['@angular/forms'] && + !packageJson.devDependencies['@angular/forms'] + ) { + devDependencies['@angular/forms'] = '*'; + } + } + + if (schema.uiFramework === '@storybook/react') { + devDependencies['@svgr/webpack'] = svgrVersion; + devDependencies['url-loader'] = urlLoaderVersion; + devDependencies['babel-loader'] = babelLoaderVersion; + devDependencies['@babel/core'] = babelCoreVersion; + devDependencies['@babel/preset-typescript'] = + babelPresetTypescriptVersion; + } - if (isFramework('react-native', schema)) { - devDependencies['@storybook/react-native'] = storybookReactNativeVersion; - devDependencies['@storybook/addon-ondevice-actions'] = - storybookReactNativeVersion; - devDependencies['@storybook/addon-ondevice-backgrounds'] = - storybookReactNativeVersion; - devDependencies['@storybook/addon-ondevice-controls'] = - storybookReactNativeVersion; - devDependencies['@storybook/addon-ondevice-notes'] = - storybookReactNativeVersion; - devDependencies['react-native-storybook-loader'] = - reactNativeStorybookLoader; + if (schema.uiFramework === '@storybook/web-components') { + devDependencies['lit-html'] = litHtmlVersion; + } + + if (schema.uiFramework === '@storybook/react-native') { + devDependencies['@storybook/addon-ondevice-actions'] = + storybookReactNativeVersion; + devDependencies['@storybook/addon-ondevice-backgrounds'] = + storybookReactNativeVersion; + devDependencies['@storybook/addon-ondevice-controls'] = + storybookReactNativeVersion; + devDependencies['@storybook/addon-ondevice-notes'] = + storybookReactNativeVersion; + devDependencies['react-native-storybook-loader'] = + reactNativeStorybookLoader; + } } return addDependenciesToPackageJson(host, dependencies, devDependencies); diff --git a/packages/storybook/src/generators/init/schema.d.ts b/packages/storybook/src/generators/init/schema.d.ts index 5d7f4f1c62d1fe..2a3f38c2c9d82c 100644 --- a/packages/storybook/src/generators/init/schema.d.ts +++ b/packages/storybook/src/generators/init/schema.d.ts @@ -1,12 +1,7 @@ +import { UiFramework, UiFramework7 } from '../../executors/models'; + export interface Schema { - uiFramework: - | '@storybook/angular' - | '@storybook/react' - | '@storybook/html' - | '@storybook/web-components' - | '@storybook/vue' - | '@storybook/vue3' - | '@storybook/svelte' - | '@storybook/react-native'; - bundler?: 'webpack' | 'vite'; + uiFramework: UiFramework | UiFramework7; + bundler?: 'webpack' | 'vite'; // TODO(katerina): Remove when Storybook 7 + storybook7betaConfiguration?: boolean; } diff --git a/packages/storybook/src/generators/init/schema.json b/packages/storybook/src/generators/init/schema.json index aa4492d2b529f6..c2f2149e1d0e2b 100644 --- a/packages/storybook/src/generators/init/schema.json +++ b/packages/storybook/src/generators/init/schema.json @@ -10,6 +10,21 @@ "description": "Storybook UI Framework to use.", "enum": [ "@storybook/angular", + "@storybook/html-webpack5", + "@storybook/nextjs", + "@storybook/preact-webpack5", + "@storybook/react-webpack5", + "@storybook/react-vite", + "@storybook/server-webpack5", + "@storybook/svelte-webpack5", + "@storybook/svelte-vite", + "@storybook/sveltekit", + "@storybook/vue-webpack5", + "@storybook/vue-vite", + "@storybook/vue3-webpack5", + "@storybook/vue3-vite", + "@storybook/web-components-webpack5", + "@storybook/web-components-vite", "@storybook/react", "@storybook/html", "@storybook/web-components", @@ -26,6 +41,11 @@ "enum": ["vite", "webpack"], "x-prompt": "Which bundler do you want to use?", "default": "webpack" + }, + "storybook7betaConfiguration": { + "description": "Configure your workspace to use Storybook 7, even though Storybook v7 is still in beta.", + "type": "boolean", + "default": false } } } diff --git a/packages/storybook/src/migrations/update-12-1-0/fix-storybook-tsconfig.ts b/packages/storybook/src/migrations/update-12-1-0/fix-storybook-tsconfig.ts index 90dd905878852b..a35a983824e8e0 100644 --- a/packages/storybook/src/migrations/update-12-1-0/fix-storybook-tsconfig.ts +++ b/packages/storybook/src/migrations/update-12-1-0/fix-storybook-tsconfig.ts @@ -7,7 +7,7 @@ import { writeJson, formatFiles, } from '@nrwl/devkit'; -import { isFramework, TsConfig } from '../../utils/utilities'; +import { TsConfig } from '../../utils/utilities'; export default async function updateStorybookTsconfig(tree: Tree) { let changesMade = false; @@ -37,10 +37,8 @@ export default async function updateStorybookTsconfig(tree: Tree) { return; } - const isReactProject = isFramework('react', { - uiFramework: targets[storybookExecutor]?.options - ?.uiFramework as Parameters[1]['uiFramework'], - }); + const isReactProject = + targets[storybookExecutor]?.options?.uiFramework === '@storybook/react'; if (isReactProject) { const tsConfig = { diff --git a/packages/storybook/src/migrations/update-12-5-9/update-storybook-react-typings.ts b/packages/storybook/src/migrations/update-12-5-9/update-storybook-react-typings.ts index f51dd2853f9e3c..8970ba62b96d51 100644 --- a/packages/storybook/src/migrations/update-12-5-9/update-storybook-react-typings.ts +++ b/packages/storybook/src/migrations/update-12-5-9/update-storybook-react-typings.ts @@ -9,7 +9,7 @@ import { writeJson, } from '@nrwl/devkit'; import * as path from 'path'; -import { isFramework, TsConfig } from '../../utils/utilities'; +import { TsConfig } from '../../utils/utilities'; export default async function addReactTypings(tree: Tree) { let changesMade = false; @@ -40,10 +40,8 @@ export default async function addReactTypings(tree: Tree) { return; } - const isReactProject = isFramework('react', { - uiFramework: targets[storybookExecutor].options - ?.uiFramework as Parameters[1]['uiFramework'], - }); + const isReactProject = + targets[storybookExecutor].options?.uiFramework === '@storybook/react'; if (isReactProject) { const tsConfig = { diff --git a/packages/storybook/src/migrations/update-12-8-0/update-storybook-styled-jsx-typings.ts b/packages/storybook/src/migrations/update-12-8-0/update-storybook-styled-jsx-typings.ts index 96b045a9296f1b..548ac7ab6f1ca3 100644 --- a/packages/storybook/src/migrations/update-12-8-0/update-storybook-styled-jsx-typings.ts +++ b/packages/storybook/src/migrations/update-12-8-0/update-storybook-styled-jsx-typings.ts @@ -9,7 +9,7 @@ import { writeJson, } from '@nrwl/devkit'; import * as path from 'path'; -import { isFramework, TsConfig } from '../../utils/utilities'; +import { TsConfig } from '../../utils/utilities'; export default async function addStyledJsxTypings(tree: Tree) { let changesMade = false; @@ -42,10 +42,8 @@ export default async function addStyledJsxTypings(tree: Tree) { return; } - const isReactProject = isFramework('react', { - uiFramework: targets[storybookExecutor].options - ?.uiFramework as Parameters[1]['uiFramework'], - }); + const isReactProject = + targets[storybookExecutor].options?.uiFramework === '@storybook/react'; if (isReactProject) { const tsConfig = { diff --git a/packages/storybook/src/utils/utilities.ts b/packages/storybook/src/utils/utilities.ts index 20cef97bef4ccb..21c1465b02b058 100644 --- a/packages/storybook/src/utils/utilities.ts +++ b/packages/storybook/src/utils/utilities.ts @@ -6,7 +6,6 @@ import { } from '@nrwl/devkit'; import { CompilerOptions } from 'typescript'; import { storybookVersion } from './versions'; -import { StorybookConfig } from '../executors/models'; import { statSync } from 'fs'; import { findNodes } from 'nx/src/utils/typescript'; import ts = require('typescript'); @@ -29,6 +28,24 @@ export const Constants = { svelte: '@storybook/svelte', 'react-native': '@storybook/react-native', } as const, + uiFrameworks7: [ + '@storybook/angular', + '@storybook/html-webpack5', + '@storybook/nextjs', + '@storybook/preact-webpack5', + '@storybook/react-webpack5', + '@storybook/react-vite', + '@storybook/server-webpack5', + '@storybook/svelte-webpack5', + '@storybook/svelte-vite', + '@storybook/sveltekit', + '@storybook/vue-webpack5', + '@storybook/vue-vite', + '@storybook/vue3-webpack5', + '@storybook/vue3-vite', + '@storybook/web-components-webpack5', + '@storybook/web-components-vite', + ], }; type Constants = typeof Constants; @@ -36,48 +53,6 @@ type Framework = { type: keyof Constants['uiFrameworks']; uiFramework: Constants['uiFrameworks'][keyof Constants['uiFrameworks']]; }; -export function isFramework( - type: Framework['type'], - schema: Pick -) { - if (type === 'angular' && schema.uiFramework === '@storybook/angular') { - return true; - } - if (type === 'react' && schema.uiFramework === '@storybook/react') { - return true; - } - if (type === 'html' && schema.uiFramework === '@storybook/html') { - return true; - } - - if ( - type === 'web-components' && - schema.uiFramework === '@storybook/web-components' - ) { - return true; - } - - if (type === 'vue' && schema.uiFramework === '@storybook/vue') { - return true; - } - - if (type === 'vue3' && schema.uiFramework === '@storybook/vue3') { - return true; - } - - if (type === 'svelte' && schema.uiFramework === '@storybook/svelte') { - return true; - } - - if ( - type === 'react-native' && - schema.uiFramework === '@storybook/react-native' - ) { - return true; - } - - return false; -} export function safeFileDelete(tree: Tree, path: string): boolean { if (tree.exists(path)) { diff --git a/packages/storybook/src/utils/versions.ts b/packages/storybook/src/utils/versions.ts index 0fbeabea0d2687..54743675e06bdd 100644 --- a/packages/storybook/src/utils/versions.ts +++ b/packages/storybook/src/utils/versions.ts @@ -14,3 +14,5 @@ export const storybookNextAddonVersion = '^1.6.6'; export const storybookTestRunnerVersion = '^0.7.2'; export const litHtmlVersion = '^2.3.1'; export const htmlWebpackPluginVersion = '^5.5.0'; + +export const storybook7Version = '^7.0.0-beta.25';