feat(storybook): change angular generator for storybook configuration

nrwl · Mar 16, 2022 · 954c26c · 954c26c
1 parent 615bd73
commit 954c26c
Show file tree

Hide file tree

Showing 34 changed files with 2,036 additions and 620 deletions.
diff --git a/docs/generated/api-angular/generators/change-storybook-targets.md b/docs/generated/api-angular/generators/change-storybook-targets.md
@@ -0,0 +1,28 @@
+---
+title: '@nrwl/angular:change-storybook-targets generator'
+description: 'Change Storybook targets to use native Storybook builders'
+---
+
+# @nrwl/angular:change-storybook-targets
+
+Change Storybook targets to use native Storybook builders
+
+## Usage
+
+```bash
+nx generate change-storybook-targets ...
+```
+
+By default, Nx will search for `change-storybook-targets` in the default collection provisioned in `workspace.json`.
+
+You can specify the collection explicitly as follows:
+
+```bash
+nx g @nrwl/angular:change-storybook-targets ...
+```
+
+Show what will be generated without writing to disk:
+
+```bash
+nx g change-storybook-targets ... --dry-run
+```
diff --git a/docs/generated/api-storybook/executors/storybook.md b/docs/generated/api-storybook/executors/storybook.md
@@ -17,7 +17,7 @@ Default: `@storybook/angular`
 
 Type: `string`
 
-Possible values: `@storybook/angular`, `@storybook/react`, `@storybook/html`, `@storybook/web-components`, `@storybook/vue`, `@storybook/vue3`, `@storybook/svelte`
+Possible values: `@storybook/react`, `@storybook/html`, `@storybook/web-components`, `@storybook/vue`, `@storybook/vue3`, `@storybook/svelte`
 
 Storybook framework npm package
 
@@ -87,18 +87,6 @@ Type: `array`
 
 Directory where to load static files from, array of strings
 
-### stylePreprocessorOptions.includePaths
-
-Type: `array`
-
-Options to pass to style preprocessors. The paths to include. Paths will be resolved to workspace root. This is for Angular projects only, as an option for the Storybook/Angular builder. It will be ignored in non-Angular projects.
-
-### styles
-
-Type: `array`
-
-Global styles to be included in the build. This is for Angular projects only, as an option for the Storybook/Angular builder. It will be ignored in non-Angular projects.
-
 ### watch
 
 Default: `true`

diff --git a/docs/generated/api-storybook/generators/change-storybook-targets.md b/docs/generated/api-storybook/generators/change-storybook-targets.md
@@ -0,0 +1,28 @@
+---
+title: '@nrwl/storybook:change-storybook-targets generator'
+description: 'Change Storybook targets to use native Storybook builders'
+---
+
+# @nrwl/storybook:change-storybook-targets
+
+Change Storybook targets to use native Storybook builders
+
+## Usage
+
+```bash
+nx generate change-storybook-targets ...
+```
+
+By default, Nx will search for `change-storybook-targets` in the default collection provisioned in `workspace.json`.
+
+You can specify the collection explicitly as follows:
+
+```bash
+nx g @nrwl/storybook:change-storybook-targets ...
+```
+
+Show what will be generated without writing to disk:
+
+```bash
+nx g change-storybook-targets ... --dry-run
+```
diff --git a/docs/map.json b/docs/map.json
@@ -744,6 +744,16 @@
             "id": "storybook-migrate-stories-to-6-2",
             "file": "generated/api-angular/generators/storybook-migrate-stories-to-6-2"
           },
+          {
+            "name": "change-storybook-targets generator",
+            "id": "change-storybook-targets",
+            "file": "generated/api-angular/generators/change-storybook-targets"
+          },
+          {
+            "name": "change-storybook-targets generator",
+            "id": "change-storybook-targets",
+            "file": "generated/api-angular/generators/change-storybook-targets"
+          },
           {
             "name": "upgrade-module generator",
             "id": "upgrade-module",
@@ -943,7 +953,16 @@
             "id": "migrate-stories-to-6-2",
             "file": "generated/api-storybook/generators/migrate-stories-to-6-2"
           },
-
+          {
+            "name": "change-storybook-targets generator",
+            "id": "change-storybook-targets",
+            "file": "generated/api-storybook/generators/change-storybook-targets"
+          },
+          {
+            "name": "change-storybook-targets generator",
+            "id": "change-storybook-targets",
+            "file": "generated/api-storybook/generators/change-storybook-targets"
+          },
           {
             "name": "Executors: Build",
             "id": "executors-build",

diff --git a/packages/angular/generators.json b/packages/angular/generators.json
@@ -150,6 +150,12 @@
       "factory": "./src/generators/web-worker/compat",
       "schema": "./src/generators/web-worker/schema.json",
       "description": "Creates a Web Worker."
+    },
+    "change-storybook-targets": {
+      "factory": "./src/generators/change-storybook-targets/compat",
+      "schema": "./src/generators/change-storybook-targets/schema.json",
+      "description": "Change Storybook targets to use native Storybook builders",
+      "hidden": false
     }
   },
   "generators": {
@@ -300,6 +306,11 @@
       "factory": "./src/generators/web-worker/web-worker",
       "schema": "./src/generators/web-worker/schema.json",
       "description": "Creates a Web Worker."
+    },
+    "change-storybook-targets": {
+      "factory": "./src/generators/change-storybook-targets/change-storybook-targets",
+      "schema": "./src/generators/change-storybook-targets/schema.json",
+      "description": "Change Storybook targets to use native Storybook builders"
     }
   }
 }
diff --git a/packages/angular/generators.ts b/packages/angular/generators.ts
@@ -24,3 +24,4 @@ export * from './src/generators/component-cypress-spec/component-cypress-spec';
 export * from './src/generators/component-story/component-story';
 export * from './src/generators/web-worker/web-worker';
 export * from './src/generators/mfe-remote/mfe-remote';
+export * from './src/generators/change-storybook-targets/change-storybook-targets';
diff --git a/packages/angular/src/generators/change-storybook-targets/change-storybook-targets.ts b/packages/angular/src/generators/change-storybook-targets/change-storybook-targets.ts
@@ -0,0 +1,8 @@
+import type { Tree } from '@nrwl/devkit';
+import { changeStorybookTargetsGenerator } from '@nrwl/storybook';
+
+export async function angularChangeStorybookTargestGenerator(tree: Tree) {
+  await changeStorybookTargetsGenerator(tree);
+}
+
+export default angularChangeStorybookTargestGenerator;
diff --git a/packages/angular/src/generators/change-storybook-targets/compat.ts b/packages/angular/src/generators/change-storybook-targets/compat.ts
@@ -0,0 +1,4 @@
+import { convertNxGenerator } from '@nrwl/devkit';
+import angularChangeStorybookTargestGenerator from './change-storybook-targets';
+
+export default convertNxGenerator(angularChangeStorybookTargestGenerator);
diff --git a/packages/angular/src/generators/change-storybook-targets/schema.json b/packages/angular/src/generators/change-storybook-targets/schema.json
@@ -0,0 +1,9 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "$id": "NxAngularChangeStorybookTargetsGenerator",
+  "type": "object",
+  "cli": "nx",
+  "properties": {},
+  "additionalProperties": false,
+  "required": []
+}
diff --git a/packages/devkit/src/executors/parse-target-string.ts b/packages/devkit/src/executors/parse-target-string.ts
@@ -13,6 +13,7 @@ import type { Target } from 'nx/src/commands/run';
  */
 export function parseTargetString(targetString: string): Target {
   const [project, target, configuration] = targetString.split(':');
+  console.log('KATERINA', project, target, configuration);
   if (!project || !target) {
     throw new Error(`Invalid Target String: ${targetString}`);
   }

diff --git a/packages/storybook/generators.json b/packages/storybook/generators.json
@@ -32,6 +32,12 @@
       "schema": "./src/generators/migrate-stories-to-6-2/schema.json",
       "description": "Migrate stories syntax to 6.2",
       "hidden": false
+    },
+    "change-storybook-targets": {
+      "factory": "./src/generators/change-storybook-targets/change-storybook-targets#changeStorybookTargetsSchematic",
+      "schema": "./src/generators/change-storybook-targets/schema.json",
+      "description": "Change Storybook targets to use native Storybook builders",
+      "hidden": false
     }
   },
   "generators": {
@@ -65,6 +71,12 @@
       "schema": "./src/generators/migrate-stories-to-6-2/schema.json",
       "description": "Generate default Storybook configuration files using Storybook version >=6.x specs, for projects that already have Storybook instances and configurations of versions <6.x.",
       "hidden": false
+    },
+    "change-storybook-targets": {
+      "factory": "./src/generators/change-storybook-targets/change-storybook-targets",
+      "schema": "./src/generators/change-storybook-targets/schema.json",
+      "description": "Change Storybook targets to use native Storybook builders",
+      "hidden": false
     }
   }
 }
diff --git a/packages/storybook/index.ts b/packages/storybook/index.ts
@@ -2,4 +2,5 @@ export { configurationGenerator } from './src/generators/configuration/configura
 export { cypressProjectGenerator } from './src/generators/cypress-project/cypress-project';
 export { migrateDefaultsGenerator } from './src/generators/migrate-defaults-5-to-6/migrate-defaults-5-to-6';
 export { migrateStoriesTo62Generator } from './src/generators/migrate-stories-to-6-2/migrate-stories-to-6-2';
+export { changeStorybookTargetsGenerator } from './src/generators/change-storybook-targets/change-storybook-targets';
 export { storybookVersion } from './src/utils/versions';
diff --git a/packages/storybook/migrations.json b/packages/storybook/migrations.json
@@ -78,6 +78,12 @@
       "cli": "nx",
       "description": "Add projectBuildConfig option to project's Storybook config.",
       "factory": "./src/migrations/update-13-4-6/set-project-build-config"
+    },
+    "update-14.0.0": {
+      "version": "14.0.0",
+      "cli": "nx",
+      "description": "Change Storybook targets to use native Storybook builders",
+      "factory": "./src/migrations/update-14-0-0/change-storybook-targets"
     }
   },
   "packageJsonUpdates": {

diff --git a/packages/storybook/src/executors/build-storybook/build-storybook.impl.spec.ts b/packages/storybook/src/executors/build-storybook/build-storybook.impl.spec.ts
@@ -21,10 +21,10 @@ describe('Build storybook', () => {
     jest.spyOn(fileUtils, 'readPackageJson').mockReturnValue({
       devDependencies: {
         '@storybook/addon-essentials': '~6.2.9',
-        '@storybook/angular': '~6.2.9',
+        '@storybook/react': '~6.2.9',
       },
     });
-    uiFramework = '@storybook/angular';
+    uiFramework = '@storybook/react';
     outputPath = '/root/dist/storybook';
     config = {
       pluginPath: join(
@@ -44,10 +44,6 @@ describe('Build storybook', () => {
       uiFramework,
       outputPath,
       projectBuildConfig: 'proj',
-      stylePreprocessorOptions: {
-        includePaths: ['my-path/my-style-options'],
-      },
-      styles: ['my-other-path/my-other-styles.scss'],
       config,
     };
 
@@ -64,12 +60,22 @@ describe('Build storybook', () => {
             sourceRoot: 'src',
             targets: {
               build: {
-                executor: '@angular-devkit/build-angular:browser',
+                executor: '@nrwl/web:webpack',
                 options: {
-                  main: 'apps/proj/src/main.ts',
-                  outputPath: 'dist/apps/proj',
-                  tsConfig: 'apps/proj/tsconfig.app.json',
-                  index: 'apps/proj/src/index.html',
+                  compiler: 'babel',
+                  outputPath: 'dist/apps/webre',
+                  index: 'apps/webre/src/index.html',
+                  baseHref: '/',
+                  main: 'apps/webre/src/main.tsx',
+                  polyfills: 'apps/webre/src/polyfills.ts',
+                  tsConfig: 'apps/webre/tsconfig.app.json',
+                  assets: [
+                    'apps/webre/src/favicon.ico',
+                    'apps/webre/src/assets',
+                  ],
+                  styles: ['apps/webre/src/styles.css'],
+                  scripts: [],
+                  webpackConfig: '@nrwl/react/plugins/webpack',
                 },
               },
               storybook: {
@@ -79,7 +85,6 @@ describe('Build storybook', () => {
             },
           },
         },
-        defaultProject: 'proj',
         npmScope: 'test',
       },
       isVerbose: false,

diff --git a/packages/storybook/src/executors/build-storybook/build-storybook.impl.ts b/packages/storybook/src/executors/build-storybook/build-storybook.impl.ts
@@ -6,7 +6,6 @@ import { CommonNxStorybookConfig } from '../models';
 import {
   getStorybookFrameworkPath,
   isStorybookLT6,
-  normalizeAngularBuilderStylesOptions,
   resolveCommonStorybookOptionMapper,
   runStorybookSetupCheck,
 } from '../utils';
@@ -26,7 +25,6 @@ export default async function buildStorybookExecutor(
   const frameworkPath = getStorybookFrameworkPath(options.uiFramework);
   const { default: frameworkOptions } = await import(frameworkPath);
 
-  options = normalizeAngularBuilderStylesOptions(options, options.uiFramework);
   const option = storybookOptionMapper(options, frameworkOptions, context);
 
   // print warnings

diff --git a/packages/storybook/src/executors/models.ts b/packages/storybook/src/executors/models.ts
@@ -16,9 +16,5 @@ export interface CommonNxStorybookConfig {
     | '@storybook/svelte'
     | '@storybook/react-native';
   projectBuildConfig?: string;
-  styles?: any[];
-  stylePreprocessorOptions?: {
-    includePaths?: string[];
-  };
   config: StorybookConfig;
 }
diff --git a/packages/storybook/src/executors/storybook/schema.json b/packages/storybook/src/executors/storybook/schema.json
@@ -8,7 +8,6 @@
       "type": "string",
       "description": "Storybook framework npm package",
       "enum": [
-        "@storybook/angular",
         "@storybook/react",
         "@storybook/html",
         "@storybook/web-components",
@@ -59,20 +58,6 @@
       "type": "string",
       "description": "Workspace project where Storybook reads the Webpack config from"
     },
-    "styles": {
-      "type": "array",
-      "description": "Global styles to be included in the build. This is for Angular projects only, as an option for the Storybook/Angular builder. It will be ignored in non-Angular projects.",
-      "items": {
-        "$ref": "#/definitions/extraEntryPoint"
-      }
-    },
-    "stylePreprocessorOptions.includePaths": {
-      "description": "Options to pass to style preprocessors. The paths to include. Paths will be resolved to workspace root. This is for Angular projects only, as an option for the Storybook/Angular builder. It will be ignored in non-Angular projects.",
-      "type": "array",
-      "items": {
-        "type": "string"
-      }
-    },
     "config": {
       "type": "object",
       "description": ".storybook configuration",
@@ -106,36 +91,6 @@
       "default": true
     }
   },
-  "definitions": {
-    "extraEntryPoint": {
-      "oneOf": [
-        {
-          "type": "object",
-          "properties": {
-            "input": {
-              "type": "string",
-              "description": "The file to include."
-            },
-            "bundleName": {
-              "type": "string",
-              "pattern": "^[\\w\\-.]*$",
-              "description": "The bundle name for this extra entry point."
-            },
-            "inject": {
-              "type": "boolean",
-              "description": "If the bundle will be referenced in the HTML file.",
-              "default": true
-            }
-          },
-          "additionalProperties": false,
-          "required": ["input"]
-        },
-        {
-          "type": "string",
-          "description": "The file to include."
-        }
-      ]
-    }
-  },
+  "definitions": {},
   "required": ["uiFramework", "config"]
 }