From 43eee2324f0b89dcae7b353ebd2566acbbfa4dc5 Mon Sep 17 00:00:00 2001
From: Katerina Skroumpelou <mandarini@users.noreply.github.com>
Date: Fri, 1 Apr 2022 18:29:47 +0300
Subject: [PATCH] feat(storybook): use build-storybook as a build target for
 all libs (#9651)

---
 packages/storybook/src/executors/utils.ts     | 15 +++++--
 .../configuration/configuration.spec.ts       | 40 +++++++++++++++++++
 2 files changed, 51 insertions(+), 4 deletions(-)

diff --git a/packages/storybook/src/executors/utils.ts b/packages/storybook/src/executors/utils.ts
index 10315974b2143..be02946bc3027 100644
--- a/packages/storybook/src/executors/utils.ts
+++ b/packages/storybook/src/executors/utils.ts
@@ -321,10 +321,17 @@ export function findStorybookAndBuildTargets(targets: {
     if (targetConfig.executor === '@nrwl/storybook:build') {
       returnObject.storybookBuildTarget = target;
     }
-    if (
-      targetConfig.executor === '@angular-devkit/build-angular:browser' ||
-      targetConfig.executor === '@nrwl/angular:ng-packagr-lite'
-    ) {
+    /**
+     * Not looking for '@nrwl/angular:ng-packagr-lite', only
+     * looking for '@angular-devkit/build-angular:browser'
+     * because the '@nrwl/angular:ng-packagr-lite' executor
+     * does not support styles and extra options, so the user
+     * will be forced to switch to build-storybook to add extra options.
+     *
+     * So we might as well use the build-storybook by default to
+     * avoid any errors.
+     */
+    if (targetConfig.executor === '@angular-devkit/build-angular:browser') {
       returnObject.buildTarget = target;
     }
   });
diff --git a/packages/storybook/src/generators/configuration/configuration.spec.ts b/packages/storybook/src/generators/configuration/configuration.spec.ts
index 09ca31bd9ef3b..0774285258494 100644
--- a/packages/storybook/src/generators/configuration/configuration.spec.ts
+++ b/packages/storybook/src/generators/configuration/configuration.spec.ts
@@ -225,6 +225,46 @@ describe('@nrwl/storybook:configuration', () => {
     });
   });
 
+  it('should update workspace file for angular buildable libs', async () => {
+    // Setup a new lib
+    await libraryGenerator(tree, {
+      name: 'test-ui-lib-5',
+      standaloneConfig: false,
+      buildable: true,
+    });
+    await configurationGenerator(tree, {
+      name: 'test-ui-lib-5',
+      uiFramework: '@storybook/angular',
+      standaloneConfig: false,
+    });
+    const project = readProjectConfiguration(tree, 'test-ui-lib-5');
+
+    expect(project.targets.storybook).toEqual({
+      executor: '@nrwl/storybook:storybook',
+      configurations: {
+        ci: {
+          quiet: true,
+        },
+      },
+      options: {
+        port: 4400,
+        projectBuildConfig: 'test-ui-lib-5:build-storybook',
+        uiFramework: '@storybook/angular',
+        config: {
+          configFolder: 'libs/test-ui-lib-5/.storybook',
+        },
+      },
+    });
+
+    expect(project.targets.lint).toEqual({
+      executor: '@nrwl/linter:eslint',
+      outputs: ['{options.outputFile}'],
+      options: {
+        lintFilePatterns: ['libs/test-ui-lib-5/**/*.ts'],
+      },
+    });
+  });
+
   it('should update `tsconfig.lib.json` file', async () => {
     await configurationGenerator(tree, {
       name: 'test-ui-lib',