fix(storybook): tsconfig extends mapping

packages/storybook/migrations.json

@@ -14,6 +14,11 @@
       "version": "10.0.12",
       "description": "Add missing storybook config to lint target",
       "factory": "./src/migrations/update-10-0-12/update-10-0-12"
+    },
+    "update-10.2.1": {
+      "version": "10.2.1-beta.1",
+      "description": "Adjusts the tsconfig mapping",
+      "factory": "./src/migrations/update-10-2-1/update-10-2-1"
     }
   },
   "packageJsonUpdates": {

packages/storybook/src/migrations/update-10-2-1/update-10-2-1.spec.ts

@@ -0,0 +1,62 @@
+import { Tree } from '@angular-devkit/schematics';
+import { readWorkspace } from '@nrwl/workspace';
+import { getFileContent } from '@nrwl/workspace/testing';
+
+import { runMigration } from '../../utils/testing';
+
+describe('Update 10-2-1', () => {
+  let tree: Tree;
+
+  beforeEach(async () => {
+    tree = Tree.empty();
+
+    // create workspace
+    tree.create(
+      'workspace.json',
+      JSON.stringify({
+        projects: {
+          ['home-ui-angular']: {
+            projectType: 'library',
+            root: 'libs/home/ui-angular',
+            sourceRoot: 'libs/home/ui-angular/src',
+            prefix: 'app',
+            architect: {
+              storybook: {
+                builder: '@nrwl/storybook:storybook',
+                options: {
+                  uiFramework: '@storybook/angular',
+                  port: 4400,
+                  config: {
+                    configFolder: 'libs/home/ui-angular/.storybook',
+                  },
+                },
+              },
+            },
+          },
+        },
+      })
+    );
+
+    tree.create(
+      'libs/home/ui-angular/.storybook/tsconfig.json',
+      JSON.stringify({
+        extends: '../../../../tsconfig.base.json',
+      })
+    );
+  });
+
+  it(`should properly fix the storybook tsconfig extends property to point to the lib relative tsconfig.json`, async () => {
+    tree = await runMigration('update-10.2.1', {}, tree);
+
+    const config = readWorkspace(tree);
+
+    expect(
+      getFileContent(tree, 'libs/home/ui-angular/.storybook/tsconfig.json')
+    ).toMatchInlineSnapshot(`
+      "{
+        \\"extends\\": \\"../tsconfig.json\\"
+      }
+      "
+    `);
+  });
+});

packages/storybook/src/migrations/update-10-2-1/update-10-2-1.ts

@@ -0,0 +1,83 @@
+import * as path from 'path';
+import {
+  chain,
+  Tree,
+  SchematicContext,
+  Rule,
+} from '@angular-devkit/schematics';
+
+import {
+  formatFiles,
+  updateWorkspaceInTree,
+  serializeJson,
+} from '@nrwl/workspace';
+
+import { getTsConfigContent } from '../../utils/utils';
+
+interface ProjectDefinition {
+  root: string;
+  sourceRoot: string;
+  projectType: 'library' | 'application';
+
+  schematic?: Record<string, any>;
+  architect: Record<
+    string,
+    import('@angular-devkit/core').workspaces.TargetDefinition
+  >;
+}
+
+export default function () {
+  return chain([updateTsConfig, formatFiles()]);
+}
+
+function updateTsConfig(): Rule {
+  return updateWorkspaceInTree((config, context, tree) => {
+    Object.entries<ProjectDefinition>(config.projects).forEach(
+      ([projectName, projectConfig]) => {
+        updateStorybookTsConfigPath(tree, context, {
+          projectName,
+          projectConfig,
+        });
+      }
+    );
+
+    return config;
+  });
+}
+
+function updateStorybookTsConfigPath(
+  tree: Tree,
+  context: SchematicContext,
+  options: {
+    projectName: string;
+    projectConfig: ProjectDefinition;
+  }
+) {
+  const architect = options.projectConfig.architect;
+
+  const paths = {
+    tsConfigStorybook: path.join(
+      options.projectConfig.root,
+      '.storybook/tsconfig.json'
+    ),
+  };
+
+  const hasStorybookConfig =
+    architect.storybook && tree.exists(paths.tsConfigStorybook);
+
+  if (!hasStorybookConfig) {
+    context.logger.info(
+      `${options.projectName}: no storybook configured. skipping migration...`
+    );
+    return;
+  }
+
+  const tsConfig = {
+    storybook: getTsConfigContent(tree, paths.tsConfigStorybook),
+  };
+
+  // update extends prop to point to the lib relative tsconfig rather
+  // than the root tsconfig.base.json
+  tsConfig.storybook.extends = '../tsconfig.json';
+  tree.overwrite(paths.tsConfigStorybook, serializeJson(tsConfig.storybook));
+}

packages/storybook/src/schematics/configuration/lib-files/.storybook/tsconfig.json__tmpl__

@@ -1,5 +1,5 @@
 {
-  "extends": "<%= offsetFromRoot %>../tsconfig.base.json",
+  "extends": "../tsconfig.json",
   "compilerOptions": {
     "emitDecoratorMetadata": true
   },