feat(storybook): fix the options for the builders

nrwl · Jan 11, 2023 · d8653cc · d8653cc
1 parent 5dbc264
commit d8653cc
Show file tree

Hide file tree

Showing 9 changed files with 370 additions and 266 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,64 @@
             "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
       },
+      "ignorePreview": { "type": "boolean", "description": "Ignore preview." },
+      "forceBuildPreview": {
+        "type": "boolean",
+        "description": "Force build preview."
+      },
+      "disableTelemetry": {
+        "type": "boolean",
+        "description": "Disable telemetry."
+      },
+      "enableCrashReports": {
+        "type": "boolean",
+        "description": "Enable crash reports."
+      },
+      "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"
+      },
+      "managerCache": { "type": "boolean", "description": "Smoke tests." },
+      "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
+      },
+      "versionUpdates": {
+        "type": "boolean",
+        "description": "Version updates."
+      },
+      "releaseNotes": { "type": "boolean", "description": "Release notes." },
+      "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
+      },
+      "debugWebpack": { "type": "boolean", "description": "Debug webpack." },
+      "webpackStatsJson": {
+        "type": ["boolean", "string"],
+        "description": "Write Webpack Stats JSON to disk",
+        "default": false
       }
     },
     "definitions": {

diff --git a/docs/generated/packages/storybook/executors/storybook.json b/docs/generated/packages/storybook/executors/storybook.json
@@ -34,34 +34,103 @@
         "description": "Port to listen on.",
         "default": 9009
       },
+      "ignorePreview": { "type": "boolean", "description": "Ignore preview." },
+      "previewUrl": { "type": "string", "description": "Preview URL." },
+      "forceBuildPreview": {
+        "type": "boolean",
+        "description": "Force build preview."
+      },
+      "disableTelemetry": {
+        "type": "boolean",
+        "description": "Disable telemetry."
+      },
+      "enableCrashReports": {
+        "type": "boolean",
+        "description": "Enable crash reports."
+      },
       "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
       },
+      "sslCa": {
+        "type": "array",
+        "description": "Provide an SSL certificate authority. (Optional with --https, required if using a self-signed certificate).",
+        "items": { "type": "string" }
+      },
+      "sslCert": {
+        "type": "string",
+        "description": "Provide an SSL certificate. (Required with --https)."
+      },
       "sslKey": {
         "type": "string",
         "description": "SSL key to use for serving HTTPS."
       },
-      "sslCert": {
+      "smokeTest": {
+        "type": "boolean",
+        "description": "Exit after successful start.",
+        "default": false
+      },
+      "managerCache": { "type": "boolean", "description": "Smoke tests." },
+      "open": {
+        "type": "boolean",
+        "description": "Open browser window automatically."
+      },
+      "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."
+      "versionUpdates": {
+        "type": "boolean",
+        "description": "Version updates."
+      },
+      "releaseNotes": { "type": "boolean", "description": "Release notes." },
+      "dll": { "type": "boolean", "description": "Load or not the dll file." },
+      "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
+      },
+      "docsDll": {
+        "type": "boolean",
+        "description": "Load or not the docs dll file."
+      },
+      "uiDll": {
+        "type": "boolean",
+        "description": "Load or not the UI dll file."
+      },
+      "debugWebpack": { "type": "boolean", "description": "Debug webpack." },
+      "webpackStatsJson": {
+        "type": ["boolean", "string"],
+        "description": "Write Webpack Stats JSON to disk",
+        "default": false
       },
       "config": {
         "type": "object",
@@ -84,17 +153,13 @@
             "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
       }
     },
     "definitions": {},

diff --git a/packages/storybook/src/executors/build-storybook/build-storybook.impl.ts b/packages/storybook/src/executors/build-storybook/build-storybook.impl.ts
@@ -1,19 +1,8 @@
-import {
-  ExecutorContext,
-  logger,
-  readJsonFile,
-  workspaceRoot,
-} from '@nrwl/devkit';
+import { ExecutorContext, logger } from '@nrwl/devkit';
 import * as build from '@storybook/core-server';
-import {
-  CLIOptions,
-  LoadOptions,
-  BuilderOptions,
-  PackageJson,
-} from '@storybook/types'; // TODO (katerina): Remove when Storybook 7
+import { CLIOptions, LoadOptions, BuilderOptions } from '@storybook/types'; // TODO (katerina): Remove when Storybook 7
 import 'dotenv/config';
-import path = require('path');
-import { storybookConfigExists } from '../../utils/utilities';
+import { storybookConfigExistsCheck } from '../../utils/utilities';
 import { CommonNxStorybookConfig } from '../models';
 import {
   getStorybookFrameworkPath,
@@ -22,43 +11,25 @@ import {
   runStorybookSetupCheck,
 } from '../utils';
 
-export interface StorybookBuilderOptions extends CommonNxStorybookConfig {
-  quiet?: boolean;
-  outputPath?: string;
-  docsMode?: boolean;
-}
 export default async function buildStorybookExecutor(
-  options: StorybookBuilderOptions,
+  options: CLIOptions & CommonNxStorybookConfig,
   context: ExecutorContext
 ) {
+  storybookConfigExistsCheck(options.configDir, context.projectName);
   const storybook7 = isStorybookV7();
   if (storybook7) {
-    storybookConfigExists(options.config, context.projectName);
-    const packageJson = readJsonFile(
-      path.join(workspaceRoot, 'package.json')
-    ) as PackageJson;
-    const buildOptions = {
+    const buildOptions: CLIOptions & {
+      mode: 'static' | 'dev';
+    } = {
       ...options,
-      workspaceRoot: context.root,
-      configDir: options.config.configFolder,
-      packageJson,
-      watch: false,
       mode: options?.['mode'] ?? 'static',
-      outputDir:
-        (options?.['outputDir'] || options?.['output-dir']) ??
-        options.outputPath,
-      ignorePreview: options['ignorePreview'] ?? false,
-      cache: options['cache'] ?? false,
-    } as CLIOptions &
-      LoadOptions &
-      BuilderOptions & {
-        outputDir: string;
-      };
+      outputDir: options?.['outputDir'] ?? options?.['output-dir'],
+    };
 
     logger.info(`NX Storybook builder starting ...`);
-    await runInstance(buildOptions);
+    await runInstance7(buildOptions);
     logger.info(`NX Storybook builder finished ...`);
-    logger.info(`NX Storybook files available in ${options.outputPath}`);
+    logger.info(`NX Storybook files available in ${buildOptions.outputDir}`);
     return { success: true };
   } else {
     // TODO (katerina): Remove when Storybook 7
@@ -79,7 +50,7 @@ export default async function buildStorybookExecutor(
     logger.info(`NX Storybook builder starting ...`);
     await runInstance(buildOptions);
     logger.info(`NX Storybook builder finished ...`);
-    logger.info(`NX Storybook files available in ${options.outputPath}`);
+    logger.info(`NX Storybook files available in ${buildOptions.outputDir}`);
     return { success: true };
   }
 }
@@ -100,16 +71,27 @@ function runInstance(
   } as any); // TODO (katerina): Change to actual types when Storybook 7
 }
 
+function runInstance7(
+  options: CLIOptions & {
+    outputDir: string;
+    mode: 'static' | 'dev';
+  }
+): Promise<void> {
+  const env = process.env.NODE_ENV ?? 'production';
+  process.env.NODE_ENV = env;
+
+  return build['build']({
+    ...options,
+    ci: true,
+  } as any); // TODO (katerina): Change to actual types when Storybook 7
+}
+
 // TODO (katerina): Remove when Storybook 7
 function storybookOptionMapper(
-  builderOptions: StorybookBuilderOptions,
+  builderOptions: CLIOptions & CommonNxStorybookConfig,
   frameworkOptions: any,
   context: ExecutorContext
-): CLIOptions &
-  LoadOptions &
-  BuilderOptions & {
-    outputDir: string;
-  } {
+): CLIOptions & CommonNxStorybookConfig {
   const storybookOptions = {
     ...builderOptions,
     ...resolveCommonStorybookOptionMapper(
@@ -118,9 +100,7 @@ function storybookOptionMapper(
       context
     ),
     mode: builderOptions?.['mode'] ?? 'static',
-    outputDir:
-      (builderOptions?.['outputDir'] || builderOptions?.['output-dir']) ??
-      builderOptions.outputPath,
+    outputDir: builderOptions?.['outputDir'] ?? builderOptions?.['output-dir'],
   };
 
   return storybookOptions;