@nx/storybook 16.4.0 → 16.5.0-beta.0

package/migrations.json

@@ -59,9 +59,123 @@
       "version": "16.1.0-beta.0",
       "description": "Ignore @nx/react/plugins/storybook in Storybook eslint rules.",
       "factory": "./src/migrations/update-16-1-0/eslint-ignore-react-plugin"
+    },
+    "update-16-5-0": {
+      "cli": "nx",
+      "version": "16.5.0-beta.0",
+      "description": "Move .storybook/tsconfig.json to tsconfig.storybook.json for non-Angular projects.",
+      "factory": "./src/migrations/update-16-5-0/move-storybook-tsconfig"
     }
   },
   "packageJsonUpdates": {
+    "16.5.0": {
+      "version": "16.5.0-beta.0",
+      "requires": {
+        "@storybook/core-server": ">=7.0.0 <7.0.24"
+      },
+      "packages": {
+        "@storybook/core-server": {
+          "version": "^7.0.24",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/angular": {
+          "version": "^7.0.24",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/react": {
+          "version": "^7.0.24",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/web-components-vite": {
+          "version": "^7.0.24",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/web-components-webpack5": {
+          "version": "^7.0.24",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/builder-vite": {
+          "version": "^7.0.24",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/builder-webpack5": {
+          "version": "^7.0.24",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/addon-a11y": {
+          "version": "^7.0.24",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/addon-actions": {
+          "version": "^7.0.24",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/addon-backgrounds": {
+          "version": "^7.0.24",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/addon-controls": {
+          "version": "^7.0.24",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/addon-docs": {
+          "version": "^7.0.24",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/addon-essentials": {
+          "version": "^7.0.24",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/addon-mdx-gfm": {
+          "version": "^7.0.24",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/addon-highlight": {
+          "version": "^7.0.24",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/addon-interactions": {
+          "version": "^7.0.24",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/addon-jest": {
+          "version": "^7.0.24",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/addon-links": {
+          "version": "^7.0.24",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/addon-measure": {
+          "version": "^7.0.24",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/addon-outline": {
+          "version": "^7.0.24",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/addon-storyshots": {
+          "version": "^7.0.24",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/addon-storyshots-puppeteer": {
+          "version": "^7.0.24",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/addon-storysource": {
+          "version": "^7.0.24",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/addon-toolbars": {
+          "version": "^7.0.24",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/addon-viewport": {
+          "version": "^7.0.24",
+          "alwaysAddToPackageJson": false
+        }
+      }
+    },
     "16.1.3": {
       "version": "16.1.3-beta.0",
       "requires": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/storybook",
-  "version": "16.4.0",
+  "version": "16.5.0-beta.0",
   "private": false,
   "description": "The Nx Plugin for Storybook contains executors and generators for allowing your workspace to use the powerful Storybook integration testing & documenting capabilities.",
   "repository": {
@@ -30,12 +30,12 @@
     "migrations": "./migrations.json"
   },
   "dependencies": {
-    "@nrwl/storybook": "16.4.0",
-    "@nx/cypress": "16.4.0",
-    "@nx/devkit": "16.4.0",
-    "@nx/js": "16.4.0",
-    "@nx/linter": "16.4.0",
-    "@nx/workspace": "16.4.0",
+    "@nrwl/storybook": "16.5.0-beta.0",
+    "@nx/cypress": "16.5.0-beta.0",
+    "@nx/devkit": "16.5.0-beta.0",
+    "@nx/js": "16.5.0-beta.0",
+    "@nx/linter": "16.5.0-beta.0",
+    "@nx/workspace": "16.5.0-beta.0",
     "@phenomnomnominal/tsquery": "~5.0.1",
     "dotenv": "~10.0.0",
     "semver": "7.5.3"
@@ -44,5 +44,5 @@
     "access": "public"
   },
   "types": "./index.d.ts",
-  "gitHead": "ae698a72748d9f33aa5395aeeaa7b7af436a1dc5"
+  "gitHead": "376d656cfc7f6390ff1cd6d9de348baf7bccbf33"
 }

package/src/generators/configuration/configuration.js

@@ -43,7 +43,11 @@ function configurationGenerator(tree, rawSchema) {
             js: schema.js,
         });
         tasks.push(initTask);
-        (0, util_functions_1.createProjectStorybookDir)(tree, schema.name, schema.uiFramework, schema.js, schema.tsConfiguration, root, projectType, (0, util_functions_1.projectIsRootProjectInStandaloneWorkspace)(root), !!nextBuildTarget, compiler === 'swc', !!viteBuildTarget || schema.uiFramework.endsWith('-vite'), viteConfigFilePath);
+        const mainDir = !!nextBuildTarget && projectType === 'application' ? 'components' : 'src';
+        (0, util_functions_1.createProjectStorybookDir)(tree, schema.name, schema.uiFramework, schema.js, schema.tsConfiguration, root, projectType, (0, util_functions_1.projectIsRootProjectInStandaloneWorkspace)(root), mainDir, !!nextBuildTarget, compiler === 'swc', !!viteBuildTarget || schema.uiFramework.endsWith('-vite'), viteConfigFilePath);
+        if (schema.uiFramework !== '@storybook/angular') {
+            (0, util_functions_1.createStorybookTsconfigFile)(tree, root, schema.uiFramework, (0, util_functions_1.projectIsRootProjectInStandaloneWorkspace)(root), mainDir);
+        }
         (0, util_functions_1.configureTsProjectConfig)(tree, schema);
         (0, util_functions_1.configureTsSolutionConfig)(tree, schema);
         (0, util_functions_1.updateLintConfig)(tree, schema);

package/src/generators/configuration/lib/util-functions.d.ts

@@ -4,6 +4,7 @@ import { UiFramework7 } from '../../../utils/models';
 export declare function addStorybookTask(tree: Tree, projectName: string, uiFramework: string, configureTestRunner: boolean): void;
 export declare function addAngularStorybookTask(tree: Tree, projectName: string, configureTestRunner: boolean): void;
 export declare function addStaticTarget(tree: Tree, opts: StorybookConfigureSchema): void;
+export declare function createStorybookTsconfigFile(tree: Tree, projectRoot: string, uiFramework: UiFramework7, isRootProject: boolean, mainDir: 'components' | 'src'): void;
 export declare function configureTsProjectConfig(tree: Tree, schema: StorybookConfigureSchema): void;
 export declare function configureTsSolutionConfig(tree: Tree, schema: StorybookConfigureSchema): void;
 /**
@@ -17,7 +18,7 @@ export declare function configureTsSolutionConfig(tree: Tree, schema: StorybookC
 export declare function updateLintConfig(tree: Tree, schema: StorybookConfigureSchema): void;
 export declare function normalizeSchema(schema: StorybookConfigureSchema): StorybookConfigureSchema;
 export declare function addStorybookToNamedInputs(tree: Tree): void;
-export declare function createProjectStorybookDir(tree: Tree, projectName: string, uiFramework: UiFramework7, js: boolean, tsConfiguration: boolean, root: string, projectType: string, projectIsRootProjectInStandaloneWorkspace: boolean, isNextJs?: boolean, usesSwc?: boolean, usesVite?: boolean, viteConfigFilePath?: string): void;
+export declare function createProjectStorybookDir(tree: Tree, projectName: string, uiFramework: UiFramework7, js: boolean, tsConfiguration: boolean, root: string, projectType: string, projectIsRootProjectInStandaloneWorkspace: boolean, mainDir?: string, isNextJs?: boolean, usesSwc?: boolean, usesVite?: boolean, viteConfigFilePath?: string): void;
 export declare function getTsConfigPath(tree: Tree, projectName: string, path?: string): string;
 export declare function addBuildStorybookToCacheableOperations(tree: Tree): void;
 export declare function projectIsRootProjectInStandaloneWorkspace(projectRoot: string): boolean;
@@ -25,3 +26,4 @@ export declare function workspaceHasRootProject(tree: Tree): boolean;
 export declare function rootFileIsTs(tree: Tree, rootFileName: string, tsConfiguration: boolean): boolean;
 export declare function getE2EProjectName(tree: Tree, mainProject: string): Promise<string | undefined>;
 export declare function getViteConfigFilePath(tree: Tree, projectRoot: string, configFile?: string): string | undefined;
+export declare function renameAndMoveOldTsConfig(projectRoot: string, pathToStorybookConfigFile: string, tree: Tree): void;

package/src/generators/configuration/lib/util-functions.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getViteConfigFilePath = exports.getE2EProjectName = exports.rootFileIsTs = exports.workspaceHasRootProject = exports.projectIsRootProjectInStandaloneWorkspace = exports.addBuildStorybookToCacheableOperations = exports.getTsConfigPath = exports.createProjectStorybookDir = exports.addStorybookToNamedInputs = exports.normalizeSchema = exports.updateLintConfig = exports.configureTsSolutionConfig = exports.configureTsProjectConfig = exports.addStaticTarget = exports.addAngularStorybookTask = exports.addStorybookTask = void 0;
+exports.renameAndMoveOldTsConfig = exports.getViteConfigFilePath = exports.getE2EProjectName = exports.rootFileIsTs = exports.workspaceHasRootProject = exports.projectIsRootProjectInStandaloneWorkspace = exports.addBuildStorybookToCacheableOperations = exports.getTsConfigPath = exports.createProjectStorybookDir = exports.addStorybookToNamedInputs = exports.normalizeSchema = exports.updateLintConfig = exports.configureTsSolutionConfig = exports.configureTsProjectConfig = exports.createStorybookTsconfigFile = exports.addStaticTarget = exports.addAngularStorybookTask = exports.addStorybookTask = void 0;
 const tslib_1 = require("tslib");
 const devkit_1 = require("@nx/devkit");
 const executor_options_utils_1 = require("@nx/devkit/src/generators/executor-options-utils");
@@ -109,6 +109,67 @@ function addStaticTarget(tree, opts) {
     (0, devkit_1.updateProjectConfiguration)(tree, opts.name, projectConfig);
 }
 exports.addStaticTarget = addStaticTarget;
+function createStorybookTsconfigFile(tree, projectRoot, uiFramework, isRootProject, mainDir) {
+    // First let's check if old configuration file exists
+    // If it exists, let's rename it and move it to the new location
+    const oldStorybookTsConfigPath = (0, devkit_1.joinPathFragments)(projectRoot, '.storybook/tsconfig.json');
+    if (tree.exists(oldStorybookTsConfigPath)) {
+        devkit_1.logger.warn(`.storybook/tsconfig.json already exists for this project`);
+        devkit_1.logger.warn(`It will be renamed and moved to tsconfig.storybook.json. 
+      Please make sure all settings look correct after this change.
+      Also, please make sure to use "nx migrate" to move from one version of Nx to another.
+      `);
+        renameAndMoveOldTsConfig(projectRoot, oldStorybookTsConfigPath, tree);
+        return;
+    }
+    const storybookTsConfigPath = (0, devkit_1.joinPathFragments)(projectRoot, 'tsconfig.storybook.json');
+    if (tree.exists(storybookTsConfigPath)) {
+        devkit_1.logger.info(`tsconfig.storybook.json already exists for this project`);
+        return;
+    }
+    const exclude = [`${mainDir}/**/*.spec.ts`, `${mainDir}/**/*.test.ts`];
+    if (uiFramework === '@storybook/react-webpack5' ||
+        uiFramework === '@storybook/react-vite') {
+        exclude.push(`${mainDir}/**/*.spec.js`, `${mainDir}/**/*.test.js`, `${mainDir}/**/*.spec.tsx`, `${mainDir}/**/*.test.tsx`, `${mainDir}/**/*.spec.jsx`, `${mainDir}/**/*.test.js`);
+    }
+    let files;
+    if (uiFramework === '@storybook/react-webpack5' ||
+        uiFramework === '@storybook/react-vite') {
+        const offset = (0, devkit_1.offsetFromRoot)(projectRoot);
+        files = [
+            `${!isRootProject ? offset : ''}node_modules/@nx/react/typings/styled-jsx.d.ts`,
+            `${!isRootProject ? offset : ''}node_modules/@nx/react/typings/cssmodule.d.ts`,
+            `${!isRootProject ? offset : ''}node_modules/@nx/react/typings/image.d.ts`,
+        ];
+    }
+    const include = [
+        `${mainDir}/**/*.stories.ts`,
+        `${mainDir}/**/*.stories.js`,
+        `${mainDir}/**/*.stories.jsx`,
+        `${mainDir}/**/*.stories.tsx`,
+        `${mainDir}/**/*.stories.mdx`,
+        '.storybook/*.js',
+        '.storybook/*.ts',
+    ];
+    if (uiFramework === '@storybook/react-native') {
+        include.push('*.ts', '*.tsx');
+    }
+    const storybookTsConfig = {
+        extends: './tsconfig.json',
+        compilerOptions: {
+            emitDecoratorMetadata: true,
+            outDir: uiFramework === '@storybook/react-webpack5' ||
+                uiFramework === '@storybook/react-vite'
+                ? ''
+                : undefined,
+        },
+        files,
+        exclude,
+        include,
+    };
+    (0, devkit_1.writeJson)(tree, storybookTsConfigPath, storybookTsConfig);
+}
+exports.createStorybookTsconfigFile = createStorybookTsconfigFile;
 function configureTsProjectConfig(tree, schema) {
     var _a, _b, _c;
     const { name: projectName } = schema;
@@ -143,18 +204,30 @@ function configureTsProjectConfig(tree, schema) {
 }
 exports.configureTsProjectConfig = configureTsProjectConfig;
 function configureTsSolutionConfig(tree, schema) {
-    var _a, _b;
+    var _a, _b, _c, _d;
     const { name: projectName } = schema;
     const { root } = (0, devkit_1.readProjectConfiguration)(tree, projectName);
     const tsConfigPath = (0, path_1.join)(root, 'tsconfig.json');
     const tsConfigContent = (0, devkit_1.readJson)(tree, tsConfigPath);
-    if (!((_b = (_a = tsConfigContent.references) === null || _a === void 0 ? void 0 : _a.map((reference) => reference.path)) === null || _b === void 0 ? void 0 : _b.includes('./.storybook/tsconfig.json'))) {
-        tsConfigContent.references = [
-            ...(tsConfigContent.references || []),
-            {
-                path: './.storybook/tsconfig.json',
-            },
-        ];
+    if (schema.uiFramework === '@storybook/angular') {
+        if (!((_b = (_a = tsConfigContent.references) === null || _a === void 0 ? void 0 : _a.map((reference) => reference.path)) === null || _b === void 0 ? void 0 : _b.includes('./.storybook/tsconfig.json'))) {
+            tsConfigContent.references = [
+                ...(tsConfigContent.references || []),
+                {
+                    path: './.storybook/tsconfig.json',
+                },
+            ];
+        }
+    }
+    else {
+        if (!((_d = (_c = tsConfigContent.references) === null || _c === void 0 ? void 0 : _c.map((reference) => reference.path)) === null || _d === void 0 ? void 0 : _d.includes('./tsconfig.storybook.json'))) {
+            tsConfigContent.references = [
+                ...(tsConfigContent.references || []),
+                {
+                    path: './tsconfig.storybook.json',
+                },
+            ];
+        }
     }
     (0, devkit_1.writeJson)(tree, tsConfigPath, tsConfigContent);
 }
@@ -186,7 +259,9 @@ function updateLintConfig(tree, schema) {
             if (Array.isArray((_b = json.parserOptions) === null || _b === void 0 ? void 0 : _b.project)) {
                 json.parserOptions.project = (0, utilities_1.dedupe)([
                     ...json.parserOptions.project,
-                    (0, path_1.join)(root, '.storybook/tsconfig.json'),
+                    schema.uiFramework === '@storybook/angular'
+                        ? (0, path_1.join)(root, '.storybook/tsconfig.json')
+                        : (0, path_1.join)(root, 'tsconfig.storybook.json'),
                 ]);
             }
             const overrides = json.overrides || [];
@@ -197,7 +272,9 @@ function updateLintConfig(tree, schema) {
                 if (Array.isArray((_d = o.parserOptions) === null || _d === void 0 ? void 0 : _d.project)) {
                     o.parserOptions.project = (0, utilities_1.dedupe)([
                         ...o.parserOptions.project,
-                        (0, path_1.join)(root, '.storybook/tsconfig.json'),
+                        schema.uiFramework === '@storybook/angular'
+                            ? (0, path_1.join)(root, '.storybook/tsconfig.json')
+                            : (0, path_1.join)(root, 'tsconfig.storybook.json'),
                     ]);
                 }
             }
@@ -228,6 +305,9 @@ function addStorybookToNamedInputs(tree) {
             if (!nxJson.namedInputs.production.includes('!{projectRoot}/.storybook/**/*')) {
                 nxJson.namedInputs.production.push('!{projectRoot}/.storybook/**/*');
             }
+            if (!nxJson.namedInputs.production.includes('!{projectRoot}/tsconfig.storybook.json')) {
+                nxJson.namedInputs.production.push('!{projectRoot}/tsconfig.storybook.json');
+            }
         }
         (_b = nxJson.targetDefaults) !== null && _b !== void 0 ? _b : (nxJson.targetDefaults = {});
         (_c = (_e = nxJson.targetDefaults)['build-storybook']) !== null && _c !== void 0 ? _c : (_e['build-storybook'] = {});
@@ -235,14 +315,23 @@ function addStorybookToNamedInputs(tree) {
             'default',
             hasProductionFileset ? '^production' : '^default',
         ]);
-        if (!nxJson.targetDefaults['build-storybook'].inputs.includes('!{projectRoot}/.storybook/**/*')) {
-            nxJson.targetDefaults['build-storybook'].inputs.push('!{projectRoot}/.storybook/**/*');
+        if (!nxJson.targetDefaults['build-storybook'].inputs.includes('{projectRoot}/.storybook/**/*')) {
+            nxJson.targetDefaults['build-storybook'].inputs.push('{projectRoot}/.storybook/**/*');
+        }
+        // Delete the !{projectRoot}/.storybook/**/* glob from build-storybook
+        // because we want to rebuild Storybook if the .storybook folder changes
+        const index = nxJson.targetDefaults['build-storybook'].inputs.indexOf('!{projectRoot}/.storybook/**/*');
+        if (index !== -1) {
+            nxJson.targetDefaults['build-storybook'].inputs.splice(index, 1);
+        }
+        if (!nxJson.targetDefaults['build-storybook'].inputs.includes('{projectRoot}/tsconfig.storybook.json')) {
+            nxJson.targetDefaults['build-storybook'].inputs.push('{projectRoot}/tsconfig.storybook.json');
         }
         (0, devkit_1.updateNxJson)(tree, nxJson);
     }
 }
 exports.addStorybookToNamedInputs = addStorybookToNamedInputs;
-function createProjectStorybookDir(tree, projectName, uiFramework, js, tsConfiguration, root, projectType, projectIsRootProjectInStandaloneWorkspace, isNextJs, usesSwc, usesVite, viteConfigFilePath) {
+function createProjectStorybookDir(tree, projectName, uiFramework, js, tsConfiguration, root, projectType, projectIsRootProjectInStandaloneWorkspace, mainDir, isNextJs, usesSwc, usesVite, viteConfigFilePath) {
     const projectDirectory = projectType === 'application'
         ? isNextJs
             ? 'components'
@@ -256,7 +345,6 @@ function createProjectStorybookDir(tree, projectName, uiFramework, js, tsConfigu
         devkit_1.logger.warn(`Storybook configuration files already exist for ${projectName}!`);
         return;
     }
-    devkit_1.logger.debug(`adding .storybook folder to your ${projectType}`);
     const templatePath = (0, path_1.join)(__dirname, `../project-files${tsConfiguration ? '-ts' : ''}`);
     (0, devkit_1.generateFiles)(tree, templatePath, root, {
         tmpl: '',
@@ -264,7 +352,7 @@ function createProjectStorybookDir(tree, projectName, uiFramework, js, tsConfigu
         offsetFromRoot: (0, devkit_1.offsetFromRoot)(root),
         projectDirectory,
         projectType,
-        mainDir: isNextJs && projectType === 'application' ? 'components' : 'src',
+        mainDir,
         isNextJs: isNextJs && projectType === 'application',
         usesSwc,
         usesVite,
@@ -274,6 +362,15 @@ function createProjectStorybookDir(tree, projectName, uiFramework, js, tsConfigu
     if (js) {
         (0, devkit_1.toJS)(tree);
     }
+    if (uiFramework !== '@storybook/angular') {
+        // This file is only used for Angular
+        // For non-Angular projects, we generate a file
+        // called tsconfig.storybook.json at the root of the project
+        // using the createStorybookTsconfigFile function
+        // since Storybook is only taking into account .storybook/tsconfig.json
+        // for Angular projects
+        tree.delete((0, path_1.join)(root, '.storybook/tsconfig.json'));
+    }
 }
 exports.createProjectStorybookDir = createProjectStorybookDir;
 function getTsConfigPath(tree, projectName, path) {
@@ -351,3 +448,49 @@ function getViteConfigFilePath(tree, projectRoot, configFile) {
                 : undefined;
 }
 exports.getViteConfigFilePath = getViteConfigFilePath;
+function renameAndMoveOldTsConfig(projectRoot, pathToStorybookConfigFile, tree) {
+    if (pathToStorybookConfigFile) {
+        (0, devkit_1.updateJson)(tree, pathToStorybookConfigFile, (json) => {
+            var _a;
+            if ((_a = json.extends) === null || _a === void 0 ? void 0 : _a.startsWith('../')) {
+                // drop one level of nesting
+                json.extends = json.extends.replace('../', './');
+            }
+            for (let i = 0; i < json.files.length; i++) {
+                // drop one level of nesting
+                if (json.files[i].startsWith('../../../')) {
+                    json.files[i] = json.files[i].replace('../../../', '../../');
+                }
+            }
+            for (let i = 0; i < json.include.length; i++) {
+                if (json.include[i].startsWith('../')) {
+                    json.include[i] = json.include[i].replace('../', '');
+                }
+                if (json.include[i] === '*.js') {
+                    json.include[i] = '.storybook/*.js';
+                }
+                if (json.include[i] === '*.ts') {
+                    json.include[i] = '.storybook/*.ts';
+                }
+            }
+            for (let i = 0; i < json.exclude.length; i++) {
+                if (json.exclude[i].startsWith('../')) {
+                    json.exclude[i] = json.exclude[i].replace('../', 'src/');
+                }
+            }
+            return json;
+        });
+        tree.rename(pathToStorybookConfigFile, (0, devkit_1.joinPathFragments)(projectRoot, `tsconfig.storybook.json`));
+    }
+    const projectTsConfig = (0, devkit_1.joinPathFragments)(projectRoot, 'tsconfig.json');
+    (0, devkit_1.updateJson)(tree, projectTsConfig, (json) => {
+        for (let i = 0; i < json.references.length; i++) {
+            if (json.references[i].path === './.storybook/tsconfig.json') {
+                json.references[i].path = './tsconfig.storybook.json';
+                break;
+            }
+        }
+        return json;
+    });
+}
+exports.renameAndMoveOldTsConfig = renameAndMoveOldTsConfig;

package/src/generators/configuration/project-files/.storybook/tsconfig.json__tmpl__

@@ -2,25 +2,14 @@
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "emitDecoratorMetadata": true
-    <% if(uiFramework === '@storybook/react-webpack5' || uiFramework === '@storybook/react-vite') { %>, "outDir": "" <% } %>
   },
-  <% if(uiFramework === '@storybook/react-webpack5' || uiFramework === '@storybook/react-vite') { %>"files": [
-    "<% if(!isRootProject) { %><%= offsetFromRoot %><% } %>../node_modules/@nx/react/typings/styled-jsx.d.ts",
-    "<% if(!isRootProject) { %><%= offsetFromRoot %><% } %>../node_modules/@nx/react/typings/cssmodule.d.ts",
-    "<% if(!isRootProject) { %><%= offsetFromRoot %><% } %>../node_modules/@nx/react/typings/image.d.ts"
-  ],<% } %>
-  "exclude": ["../**/*.spec.ts" <% if(uiFramework === '@storybook/react-webpack5' || uiFramework === '@storybook/react-vite') { %>, "../**/*.spec.js", "../**/*.spec.tsx", "../**/*.spec.jsx"<% } %>],
-  "include": [<% if(uiFramework === '@storybook/angular' && projectType === 'library') { %>
+  "exclude": ["../**/*.spec.ts"],
+  "include": [
     "../src/**/*.stories.ts",
     "../src/**/*.stories.js",
     "../src/**/*.stories.jsx",
     "../src/**/*.stories.tsx",
     "../src/**/*.stories.mdx",
-    "*.js"<% } else { %>
-    "../<%= mainDir %>/**/*.stories.ts",
-    "../<%= mainDir %>/**/*.stories.js",
-    "../<%= mainDir %>/**/*.stories.jsx",
-    "../<%= mainDir %>/**/*.stories.tsx",
-    "../<%= mainDir %>/**/*.stories.mdx",
-    "*.js"<% if(uiFramework === '@storybook/react-native') { %>, "*.ts", "*.tsx"<% } %><% } %>]
+    "*.js"
+    ]
 }

package/src/generators/configuration/project-files-ts/.storybook/tsconfig.json__tmpl__

@@ -2,27 +2,15 @@
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "emitDecoratorMetadata": true
-    <% if(uiFramework === '@storybook/react-webpack5' || uiFramework === '@storybook/react-vite') { %>, "outDir": "" <% } %>
   },
-  <% if(uiFramework === '@storybook/react-webpack5' || uiFramework === '@storybook/react-vite') { %>"files": [
-    "<% if(!isRootProject) { %><%= offsetFromRoot %><% } %>../node_modules/@nx/react/typings/styled-jsx.d.ts",
-    "<% if(!isRootProject) { %><%= offsetFromRoot %><% } %>../node_modules/@nx/react/typings/cssmodule.d.ts",
-    "<% if(!isRootProject) { %><%= offsetFromRoot %><% } %>../node_modules/@nx/react/typings/image.d.ts"
-  ],<% } %>
-  "exclude": ["../**/*.spec.ts" <% if(uiFramework === '@storybook/react-webpack5' || uiFramework === '@storybook/react-vite') { %>, "../**/*.spec.js", "../**/*.spec.tsx", "../**/*.spec.jsx"<% } %>],
-  "include": [<% if(uiFramework === '@storybook/angular' && projectType === 'library') { %>
+  "exclude": ["../**/*.spec.ts"],
+  "include": [
     "../src/**/*.stories.ts",
     "../src/**/*.stories.js",
     "../src/**/*.stories.jsx",
     "../src/**/*.stories.tsx",
     "../src/**/*.stories.mdx",
-    "*.ts",
-    "*.js"<% } else { %>
-    "../<%= mainDir %>/**/*.stories.ts",
-    "../<%= mainDir %>/**/*.stories.js",
-    "../<%= mainDir %>/**/*.stories.jsx",
-    "../<%= mainDir %>/**/*.stories.tsx",
-    "../<%= mainDir %>/**/*.stories.mdx",
-    "*.ts",
-    "*.js"<% if(uiFramework === '@storybook/react-native') { %>, "*.tsx"<% } %><% } %>]
+    "*.js", 
+    "*.ts"
+    ]
 }

package/src/migrations/update-14-0-0/migrate-defaults-5-to-6/migrate-defaults-5-to-6.js

@@ -109,7 +109,8 @@ function migrateProjectLevelStorybookInstance(tree, projectName, uiFramework, co
     }
     const { projectType, targets, root } = (0, devkit_1.readProjectConfiguration)(tree, projectName);
     const { nextBuildTarget, compiler } = (0, utilities_1.findStorybookAndBuildTargetsAndCompiler)(targets);
-    (0, util_functions_1.createProjectStorybookDir)(tree, projectName, uiFramework, false, false, root, projectType, false, !!nextBuildTarget, compiler === 'swc');
+    const mainDir = !!nextBuildTarget && projectType === 'application' ? 'components' : 'src';
+    (0, util_functions_1.createProjectStorybookDir)(tree, projectName, uiFramework, false, false, root, projectType, false, mainDir, !!nextBuildTarget, compiler === 'swc');
 }
 function moveDirectory(tree, from, to) {
     (0, devkit_1.visitNotIgnoredFiles)(tree, from, (file) => {

package/src/migrations/update-16-5-0/move-storybook-tsconfig.d.ts

@@ -0,0 +1,2 @@
+import { Tree } from '@nx/devkit';
+export default function (tree: Tree): Promise<void>;

package/src/migrations/update-16-5-0/move-storybook-tsconfig.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const devkit_1 = require("@nx/devkit");
+const executor_options_utils_1 = require("@nx/devkit/src/generators/executor-options-utils");
+const util_functions_1 = require("../../generators/configuration/lib/util-functions");
+function default_1(tree) {
+    return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        (0, executor_options_utils_1.forEachExecutorOptions)(tree, '@nx/storybook:storybook', (options, projectName) => {
+            const projectConfiguration = (0, devkit_1.getProjects)(tree).get(projectName);
+            const projectRoot = projectConfiguration.root;
+            if ((options === null || options === void 0 ? void 0 : options['configDir']) === undefined) {
+                return;
+            }
+            const pathToStorybookConfigFile = (0, devkit_1.joinPathFragments)(options === null || options === void 0 ? void 0 : options['configDir'], 'tsconfig.json');
+            (0, util_functions_1.renameAndMoveOldTsConfig)(projectRoot, pathToStorybookConfigFile, tree);
+        });
+        (0, util_functions_1.addStorybookToNamedInputs)(tree);
+        yield (0, devkit_1.formatFiles)(tree);
+    });
+}
+exports.default = default_1;

package/src/utils/versions.d.ts

@@ -4,6 +4,6 @@ export declare const reactNativeStorybookLoader = "^2.0.5";
 export declare const storybookTestRunnerVersion = "^0.7.2";
 export declare const litVersion = "^2.6.1";
 export declare const tsNodeVersion = "10.9.1";
-export declare const storybookVersion = "^7.0.9";
+export declare const storybookVersion = "^7.0.24";
 export declare const reactVersion = "^18.2.0";
 export declare const viteVersion = "^4.3.4";

package/src/utils/versions.js

@@ -7,6 +7,6 @@ exports.reactNativeStorybookLoader = '^2.0.5';
 exports.storybookTestRunnerVersion = '^0.7.2';
 exports.litVersion = '^2.6.1';
 exports.tsNodeVersion = '10.9.1';
-exports.storybookVersion = '^7.0.9';
+exports.storybookVersion = '^7.0.24';
 exports.reactVersion = '^18.2.0';
 exports.viteVersion = '^4.3.4';