feat(storybook): fix the options for the builders (#14279)

nrwl · Jan 12, 2023 · c79d2b2 · c79d2b2 · vercel · Jan 12, 2023
1 parent fb749ae
commit c79d2b2
Show file tree

Hide file tree

Showing 21 changed files with 2,145 additions and 393 deletions.
diff --git a/docs/generated/packages/storybook/executors/build.json b/docs/generated/packages/storybook/executors/build.json
@@ -29,9 +29,9 @@
         "default": "@storybook/react",
         "hidden": true
       },
-      "outputPath": {
+      "outputDir": {
         "type": "string",
-        "description": "The output path of the generated files.",
+        "description": "Directory where to store built files.",
         "x-completion-type": "directory"
       },
       "styles": {
@@ -93,17 +93,39 @@
             "description": "Path to storybook `preview.js` file."
           },
           "srcRoot": { "type": "string", "description": "Project source path." }
-        }
+        },
+        "x-deprecated": "Prefer to use configDir to set the Storybook configuration directory."
       },
       "docsMode": {
         "type": "boolean",
         "description": "Build a documentation-only site using addon-docs.",
         "default": false
       },
+      "staticDir": {
+        "type": "array",
+        "description": "Directory where to load static files from, array of strings.",
+        "items": { "type": "string" },
+        "x-deprecated": "In Storybook 6.4 the `--static-dir` CLI flag has been replaced with the the `staticDirs` field in `.storybook/main.js`. It will be removed completely in Storybook 7.0."
+      },
+      "configDir": {
+        "type": "string",
+        "description": "Directory where to load Storybook configurations from.",
+        "x-completion-type": "directory"
+      },
+      "loglevel": {
+        "type": "string",
+        "description": "Controls level of logging during build. Can be one of: [silly, verbose, info (default), warn, error, silent].",
+        "pattern": "(silly|verbose|info|warn|silent)"
+      },
       "quiet": {
         "type": "boolean",
         "description": "Suppress verbose build output.",
-        "default": true
+        "default": false
+      },
+      "docs": {
+        "type": "boolean",
+        "description": "Starts Storybook in documentation mode. Learn more about it : https://storybook.js.org/docs/react/writing-docs/build-documentation#preview-storybooks-documentation.",
+        "default": false
       }
     },
     "definitions": {
@@ -135,7 +157,8 @@
         ]
       }
     },
-    "required": ["uiFramework", "config"],
+    "additionalProperties": true,
+    "required": ["uiFramework", "configDir"],
     "examplesFile": "`project.json`:\n\n```json\n//...\n\"ui\": {\n    \"targets\": {\n        //...\n        \"build-storybook\": {\n            \"executor\": \"@nrwl/storybook:build\",\n            \"outputs\": [\"{options.outputPath}\"],\n            \"options\": {\n                \"uiFramework\": \"@storybook/react\",\n                \"outputPath\": \"dist/storybook/ui\",\n                \"config\": {\n                    \"configFolder\": \"libs/ui/.storybook\"\n                }\n            },\n            \"configurations\": {\n                \"ci\": {\n                    \"quiet\": true\n                }\n            }\n        }\n}\n```\n\n```bash\nnx run ui:build-storybook\n```\n\n## Examples\n\n### For non-Angular projects\n\n{% tabs %}\n{% tab label=\"Setting the uiFramework\" %}\n\nYou can change the `uiFramework` option, to correspond to the framework you are using for your project. Supported values are: `\"@storybook/react\"`, `\"@storybook/html\"`, `\"@storybook/web-components\"`, `\"@storybook/vue\"`, `\"@storybook/vue3\"` and `\"@storybook/svelte\"`. If you are using Angular, please check out the Angular-specific Storybook executor.\n\n```json\n\"build-storybook\": {\n    \"executor\": \"@nrwl/storybook:build\",\n    \"outputs\": [\"{options.outputPath}\"],\n    \"options\": {\n        \"uiFramework\": \"@storybook/web-components\",\n        \"outputPath\": \"dist/storybook/ui\",\n        \"config\": {\n            \"configFolder\": \"libs/ui/.storybook\"\n        }\n    },\n    \"configurations\": {\n        \"ci\": {\n            \"quiet\": true\n        }\n    }\n}\n```\n\n{% /tab %}\n{% tab label=\"Working in docsMode\" %}\n\nYou can work in docs mode, building a documentation-only site, by setting the `docsMode` option to `true` and using the `@storybook/addon-docs` addon.\n\nRead more on the [Storybook documentation page for `addon-docs`](https://storybook.js.org/addons/@storybook/addon-docs).\n\n```json\n\"storybook\": {\n    \"executor\": \"@nrwl/storybook:build\",\n    \"options\": {\n        \"uiFramework\": \"@storybook/react\",\n        \"port\": 4400,\n        \"config\": {\n            \"configFolder\": \"libs/ui/.storybook\"\n        },\n        \"docsMode\": true\n    },\n    \"configurations\": {\n        \"ci\": {\n            \"quiet\": true\n        }\n    }\n}\n```\n\n{% /tab %}\n\n{% /tabs %}\n\n### For Angular projects\n\n{% tabs %}\n{% tab label=\"Default configuration\" %}\n\nThis is the default configuration for Angular projects using Storybook. You can see that it uses the native `@storybook/angular:build-storybook` executor. You can read more about the configuration options at the relevant [Storybook documentation page](https://storybook.js.org/docs/angular/get-started/install).\n\n```json\n\"build-storybook\": {\n  \"executor\": \"@storybook/angular:build-storybook\",\n  \"outputs\": [\"{options.outputDir}\"],\n  \"options\": {\n    \"outputDir\": \"dist/storybook/ngapp\",\n    \"configDir\": \"libs/ui/.storybook\",\n    \"browserTarget\": \"ui:build\",\n    \"compodoc\": false\n  },\n  \"configurations\": {\n    \"ci\": {\n      \"quiet\": true\n    }\n  }\n}\n```\n\n{% /tab %}\n{% tab label=\"Changing the browserTarget\" %}\n\nYou can set the [`browserTarget`](/packages/storybook/documents/angular-browser-target) to use `build-storybook` as the builder. This is most useful in the cases where your project does not have a `build` target.\n\n```json\n\"build-storybook\": {\n  \"executor\": \"@storybook/angular:build-storybook\",\n  \"outputs\": [\"{options.outputDir}\"],\n  \"options\": {\n    \"outputDir\": \"dist/storybook/ngapp\",\n    \"configDir\": \"libs/ui/.storybook\",\n    \"browserTarget\": \"ui:build-storybook\",\n    \"compodoc\": false\n  },\n  \"configurations\": {\n    \"ci\": {\n      \"quiet\": true\n    }\n  }\n}\n```\n\n{% /tab %}\n\n{% tab label=\"Adding styles\" %}\n\nYou can add paths to stylesheets to be included in the Storybook build by using the `styles` array. You can also add `stylePreprocessorOptions`, much like you would do in the Angular builder. You can read more in our guide about [styles and preprocessor options for Storybook](/packages/storybook/documents/angular-configuring-styles).\n\n```json\n\"build-storybook\": {\n  \"executor\": \"@storybook/angular:build-storybook\",\n  \"outputs\": [\"{options.outputDir}\"],\n  \"options\": {\n    \"outputDir\": \"dist/storybook/ngapp\",\n    \"configDir\": \"libs/ui/.storybook\",\n    \"browserTarget\": \"ui:build-storybook\",\n    \"compodoc\": false,\n    \"styles\": [\"some-styles.css\"],\n    \"stylePreprocessorOptions\": {\n        \"includePaths\": [\"some-style-paths\"]\n }\n  },\n  \"configurations\": {\n    \"ci\": {\n      \"quiet\": true\n    }\n  }\n}\n```\n\n{% /tab %}\n\n{% /tabs %}\n"
   },
   "description": "Build Storybook.",

diff --git a/docs/generated/packages/storybook/executors/storybook.json b/docs/generated/packages/storybook/executors/storybook.json
@@ -34,34 +34,51 @@
         "description": "Port to listen on.",
         "default": 9009
       },
+      "previewUrl": { "type": "string", "description": "Preview URL." },
       "host": {
         "type": "string",
         "description": "Host to listen on.",
         "default": "localhost"
       },
+      "staticDir": {
+        "type": "array",
+        "description": "Directory where to load static files from, array of strings.",
+        "items": { "type": "string" },
+        "x-deprecated": "In Storybook 6.4 the `--static-dir` CLI flag has been replaced with the the `staticDirs` field in `.storybook/main.js`. It will be removed completely in Storybook 7.0."
+      },
+      "configDir": {
+        "type": "string",
+        "description": "Directory where to load Storybook configurations from.",
+        "x-completion-type": "directory"
+      },
       "https": {
         "type": "boolean",
-        "description": "Serve using HTTPS.",
+        "description": "Serve Storybook over HTTPS. Note: You must provide your own certificate information.",
         "default": false
       },
-      "sslKey": {
-        "type": "string",
-        "description": "SSL key to use for serving HTTPS."
+      "open": {
+        "type": "boolean",
+        "description": "Open browser window automatically."
       },
-      "sslCert": {
+      "ci": {
+        "type": "boolean",
+        "description": "CI mode (skip interactive prompts, don't open browser).",
+        "default": false
+      },
+      "loglevel": {
         "type": "string",
-        "description": "SSL certificate to use for serving HTTPS."
+        "description": "Controls level of logging during build. Can be one of: [silly, verbose, info (default), warn, error, silent].",
+        "pattern": "(silly|verbose|info|warn|silent)"
       },
-      "watch": {
+      "quiet": {
         "type": "boolean",
-        "description": "Watches for changes and rebuilds application.",
-        "default": true
+        "description": "Suppress verbose build output.",
+        "default": false
       },
-      "staticDir": {
-        "type": "array",
-        "description": "Directory where to load static files from, array of strings.",
-        "items": { "type": "string" },
-        "x-deprecated": "In Storybook 6.4 the `--static-dir` CLI flag has been replaced with the the `staticDirs` field in `.storybook/main.js`. It will be removed completely in Storybook 7.0."
+      "docs": {
+        "type": "boolean",
+        "description": "Starts Storybook in documentation mode. Learn more about it : https://storybook.js.org/docs/react/writing-docs/build-documentation#preview-storybooks-documentation.",
+        "default": false
       },
       "config": {
         "type": "object",
@@ -84,21 +101,18 @@
             "description": "Path to storybook .babelrc file."
           },
           "srcRoot": { "type": "string", "description": "Project source path." }
-        }
+        },
+        "x-deprecated": "Prefer to use configDir to set the Storybook configuration directory."
       },
       "docsMode": {
         "type": "boolean",
-        "description": "Build a documentation-only site using addon-docs.",
+        "description": "Starts Storybook in documentation mode. Learn more about it : https://storybook.js.org/docs/react/writing-docs/build-documentation#preview-storybooks-documentation.",
         "default": false
-      },
-      "quiet": {
-        "type": "boolean",
-        "description": "Suppress verbose build output.",
-        "default": true
       }
     },
+    "additionalProperties": true,
     "definitions": {},
-    "required": ["uiFramework", "config"],
+    "required": ["uiFramework", "configDir"],
     "examplesFile": "`project.json`:\n\n```json\n//...\n\"ui\": {\n    \"targets\": {\n        //...\n        \"storybook\": {\n            \"executor\": \"@nrwl/storybook:storybook\",\n            \"options\": {\n                \"uiFramework\": \"@storybook/react\",\n                \"port\": 4400,\n                \"config\": {\n                    \"configFolder\": \"libs/ui/.storybook\"\n                }\n            },\n            \"configurations\": {\n                \"ci\": {\n                    \"quiet\": true\n                }\n            }\n        },\n    }\n}\n```\n\n```bash\nnx run ui:storybook\n```\n\n## Examples\n\n### For non-Angular projects\n\n{% tabs %}\n{% tab label=\"Setting the uiFramework\" %}\n\nYou can change the `uiFramework` option, to correspond to the framework you are using for your project. Supported values are: `\"@storybook/react\"`, `\"@storybook/html\"`, `\"@storybook/web-components\"`, `\"@storybook/vue\"`, `\"@storybook/vue3\"` and `\"@storybook/svelte\"`. If you are using Angular, please check out the Angular-specific Storybook executor.\n\n```json\n\"storybook\": {\n    \"executor\": \"@nrwl/storybook:storybook\",\n    \"options\": {\n        \"uiFramework\": \"@storybook/web-components\",\n        \"port\": 4400,\n        \"config\": {\n            \"configFolder\": \"libs/ui/.storybook\"\n        }\n    },\n    \"configurations\": {\n        \"ci\": {\n            \"quiet\": true\n        }\n    }\n}\n```\n\n{% /tab %}\n{% tab label=\"Working in docsMode\" %}\n\nYou can work in docs mode, building a documentation-only site, by setting the `docsMode` option to `true` and using the `@storybook/addon-docs` addon.\n\nRead more on the [Storybook documentation page for `addon-docs`](https://storybook.js.org/addons/@storybook/addon-docs).\n\n```json\n\"storybook\": {\n    \"executor\": \"@nrwl/storybook:storybook\",\n    \"options\": {\n        \"uiFramework\": \"@storybook/react\",\n        \"port\": 4400,\n        \"config\": {\n            \"configFolder\": \"libs/ui/.storybook\"\n        },\n        \"docsMode\": true\n    },\n    \"configurations\": {\n        \"ci\": {\n            \"quiet\": true\n        }\n    }\n}\n```\n\n{% /tab %}\n\n{% /tabs %}\n\n### For Angular projects\n\n{% tabs %}\n{% tab label=\"Default configuration\" %}\n\nThis is the default configuration for Angular projects using Storybook. You can see that it uses the native `@storybook/angular:start-storybook` executor. You can read more about the configuration options at the relevant [Storybook documentation page](https://storybook.js.org/docs/angular/get-started/install).\n\n```json\n\"storybook\": {\n  \"executor\": \"@storybook/angular:start-storybook\",\n  \"options\": {\n    \"port\": 4400,\n    \"configDir\": \"libs/ui/.storybook\",\n    \"browserTarget\": \"ui:build\",\n    \"compodoc\": false\n  },\n  \"configurations\": {\n    \"ci\": {\n      \"quiet\": true\n    }\n  }\n},\n```\n\n{% /tab %}\n{% tab label=\"Changing the browserTarget\" %}\n\nYou can set the [`browserTarget`](/packages/storybook/documents/angular-browser-target) to use `build-storybook` as the builder. This is most useful in the cases where your project does not have a `build` target.\n\n```json\n\"storybook\": {\n  \"executor\": \"@storybook/angular:start-storybook\",\n  \"options\": {\n    \"port\": 4400,\n    \"configDir\": \"libs/ui/.storybook\",\n    \"browserTarget\": \"ui:build-storybook\",\n    \"compodoc\": false\n  },\n  \"configurations\": {\n    \"ci\": {\n      \"quiet\": true\n    }\n  }\n},\n```\n\n{% /tab %}\n\n{% tab label=\"Adding styles\" %}\n\nYou can add paths to stylesheets to be included in the Storybook build by using the `styles` array. You can also add `stylePreprocessorOptions`, much like you would do in the Angular builder. You can read more in our guide about [styles and preprocessor options for Storybook](/packages/storybook/documents/angular-configuring-styles).\n\n```json\n\"storybook\": {\n  \"executor\": \"@storybook/angular:start-storybook\",\n  \"options\": {\n    \"port\": 4400,\n    \"configDir\": \"libs/ui/.storybook\",\n    \"browserTarget\": \"ui:build\",\n    \"compodoc\": false,\n    \"styles\": [\"some-styles.css\"],\n    \"stylePreprocessorOptions\": {\n          \"includePaths\": [\"some-style-paths\"]\n    }\n  },\n  \"configurations\": {\n    \"ci\": {\n      \"quiet\": true\n    }\n  }\n},\n```\n\n{% /tab %}\n\n{% /tabs %}\n"
   },
   "description": "Serve Storybook.",

diff --git a/packages/angular/src/migrations/update-12-3-0/update-storybook.ts b/packages/angular/src/migrations/update-12-3-0/update-storybook.ts
@@ -8,7 +8,6 @@ import {
 import { lt } from 'semver';
 import { join } from 'path';
 import { forEachExecutorOptions } from '@nrwl/workspace/src/utilities/executor-options-utils';
-import type { StorybookExecutorOptions } from '@nrwl/storybook/src/executors/storybook/storybook.impl';
 
 export default async function (tree: Tree) {
   let storybookVersion;
@@ -33,40 +32,36 @@ export default async function (tree: Tree) {
   }
 
   let updated;
-  forEachExecutorOptions<StorybookExecutorOptions>(
-    tree,
-    '@nrwl/storybook:storybook',
-    (options) => {
-      if (options.uiFramework !== '@storybook/angular') {
-        return;
-      }
+  forEachExecutorOptions(tree, '@nrwl/storybook:storybook', (options) => {
+    if (options['uiFramework'] !== '@storybook/angular') {
+      return;
+    }
 
-      const configFolder = options?.config?.configFolder;
+    const configFolder = options?.['config']?.configFolder;
 
-      if (!configFolder) {
-        return;
-      }
+    if (!configFolder) {
+      return;
+    }
 
-      const configPath = join(configFolder, 'main.js');
+    const configPath = join(configFolder, 'main.js');
 
-      if (!tree.exists(configPath)) {
-        logger.warn(
-          `Could not migrate ${configPath} to use webpack 5. The config.core.builder should be set to "webpack5". See https://gist.github.com/shilman/8856ea1786dcd247139b47b270912324#upgrade`
-        );
-        return;
-      }
-
-      updated = true;
-      const originalContents = tree.read(configPath).toString();
-      const configureWebpack5 = `module.exports.core = { ...module.exports.core, builder: 'webpack5' };`;
-      try {
-        const config = require(join(tree.root, configPath));
-        if (config?.core?.builder !== 'webpack5') {
-          tree.write(configPath, originalContents + '\n' + configureWebpack5);
-        }
-      } catch {}
+    if (!tree.exists(configPath)) {
+      logger.warn(
+        `Could not migrate ${configPath} to use webpack 5. The config.core.builder should be set to "webpack5". See https://gist.github.com/shilman/8856ea1786dcd247139b47b270912324#upgrade`
+      );
+      return;
     }
-  );
+
+    updated = true;
+    const originalContents = tree.read(configPath).toString();
+    const configureWebpack5 = `module.exports.core = { ...module.exports.core, builder: 'webpack5' };`;
+    try {
+      const config = require(join(tree.root, configPath));
+      if (config?.core?.builder !== 'webpack5') {
+        tree.write(configPath, originalContents + '\n' + configureWebpack5);
+      }
+    } catch {}
+  });
 
   const installTask = updated
     ? addDependenciesToPackageJson(

diff --git a/packages/storybook/migrations.json b/packages/storybook/migrations.json
@@ -53,6 +53,12 @@
       "version": "15.0.0-beta.0",
       "description": "Stop hashing storybook config files and story files for build targets and dependent tasks",
       "factory": "./src/migrations/update-15-0-0/add-storybook-inputs"
+    },
+    "update-15.5.0": {
+      "cli": "nx",
+      "version": "15.5.0-beta.0",
+      "description": "Refactor the Storybook target options",
+      "factory": "./src/migrations/update-15-5-0/refactor-executor-options"
     }
   },
   "packageJsonUpdates": {