feat(storybook): version 7 generators

nrwl · Jan 13, 2023 · 6149419 · 6149419
1 parent d7d1bcf
commit 6149419
Show file tree

Hide file tree

Showing 41 changed files with 5,237 additions and 224 deletions.
diff --git a/docs/generated/packages/angular/generators/storybook-configuration.json b/docs/generated/packages/angular/generators/storybook-configuration.json
@@ -70,6 +70,11 @@
       "configureTestRunner": {
         "type": "boolean",
         "description": "Add a Storybook Test-Runner target."
+      },
+      "storybook7betaConfiguration": {
+        "description": "Configure your workspace to use Storybook 7, even though Storybook v7 is still in beta.",
+        "type": "boolean",
+        "default": false
       }
     },
     "additionalProperties": false,

diff --git a/docs/generated/packages/react/generators/storybook-configuration.json b/docs/generated/packages/react/generators/storybook-configuration.json
@@ -78,6 +78,11 @@
       "bundler": {
         "description": "The Storybook builder to use.",
         "enum": ["vite", "webpack"]
+      },
+      "storybook7betaConfiguration": {
+        "description": "Configure your workspace to use Storybook 7, even though Storybook v7 is still in beta.",
+        "type": "boolean",
+        "default": false
       }
     },
     "required": ["name"],

diff --git a/docs/generated/packages/storybook/generators/configuration.json b/docs/generated/packages/storybook/generators/configuration.json
@@ -71,6 +71,33 @@
         "enum": ["vite", "webpack"],
         "x-prompt": "Which Storybook builder do you want to use?",
         "default": "webpack"
+      },
+      "storybook7betaConfiguration": {
+        "description": "Configure your workspace to use Storybook 7, even though Storybook v7 is still in beta.",
+        "type": "boolean",
+        "default": false
+      },
+      "storybook7UiFramework": {
+        "type": "string",
+        "description": "Storybook UI Framework to use.",
+        "enum": [
+          "@storybook/angular",
+          "@storybook/html-webpack5",
+          "@storybook/nextjs",
+          "@storybook/preact-webpack5",
+          "@storybook/react-webpack5",
+          "@storybook/react-vite",
+          "@storybook/server-webpack5",
+          "@storybook/svelte-webpack5",
+          "@storybook/svelte-vite",
+          "@storybook/sveltekit",
+          "@storybook/vue-webpack5",
+          "@storybook/vue-vite",
+          "@storybook/vue3-webpack5",
+          "@storybook/vue3-vite",
+          "@storybook/web-components-webpack5",
+          "@storybook/web-components-vite"
+        ]
       }
     },
     "required": ["name"],

diff --git a/docs/generated/packages/storybook/generators/init.json b/docs/generated/packages/storybook/generators/init.json
@@ -13,6 +13,21 @@
         "description": "Storybook UI Framework to use.",
         "enum": [
           "@storybook/angular",
+          "@storybook/html-webpack5",
+          "@storybook/nextjs",
+          "@storybook/preact-webpack5",
+          "@storybook/react-webpack5",
+          "@storybook/react-vite",
+          "@storybook/server-webpack5",
+          "@storybook/svelte-webpack5",
+          "@storybook/svelte-vite",
+          "@storybook/sveltekit",
+          "@storybook/vue-webpack5",
+          "@storybook/vue-vite",
+          "@storybook/vue3-webpack5",
+          "@storybook/vue3-vite",
+          "@storybook/web-components-webpack5",
+          "@storybook/web-components-vite",
           "@storybook/react",
           "@storybook/html",
           "@storybook/web-components",
@@ -29,6 +44,11 @@
         "enum": ["vite", "webpack"],
         "x-prompt": "Which bundler do you want to use?",
         "default": "webpack"
+      },
+      "storybook7betaConfiguration": {
+        "description": "Configure your workspace to use Storybook 7, even though Storybook v7 is still in beta.",
+        "type": "boolean",
+        "default": false
       }
     },
     "presets": []

diff --git a/...es/angular/src/generators/storybook-configuration/lib/generate-storybook-configuration.ts b/...es/angular/src/generators/storybook-configuration/lib/generate-storybook-configuration.ts
@@ -16,5 +16,6 @@ export async function generateStorybookConfiguration(
     cypressDirectory: options.cypressDirectory,
     tsConfiguration: options.tsConfiguration,
     configureTestRunner: options.configureTestRunner,
+    storybook7betaConfiguration: options.storybook7betaConfiguration,
   });
 }
diff --git a/packages/angular/src/generators/storybook-configuration/schema.d.ts b/packages/angular/src/generators/storybook-configuration/schema.d.ts
@@ -11,4 +11,5 @@ export interface StorybookConfigurationOptions {
   skipFormat?: boolean;
   ignorePaths?: string[];
   configureTestRunner?: boolean;
+  storybook7betaConfiguration?: boolean;
 }
diff --git a/packages/angular/src/generators/storybook-configuration/schema.json b/packages/angular/src/generators/storybook-configuration/schema.json
@@ -73,6 +73,11 @@
     "configureTestRunner": {
       "type": "boolean",
       "description": "Add a Storybook Test-Runner target."
+    },
+    "storybook7betaConfiguration": {
+      "description": "Configure your workspace to use Storybook 7, even though Storybook v7 is still in beta.",
+      "type": "boolean",
+      "default": false
     }
   },
   "additionalProperties": false,

diff --git a/packages/react/src/generators/storybook-configuration/configuration.ts b/packages/react/src/generators/storybook-configuration/configuration.ts
@@ -101,6 +101,11 @@ export async function storybookConfigurationGenerator(
     tsConfiguration: schema.tsConfiguration,
     configureTestRunner: schema.configureTestRunner,
     bundler,
+    storybook7betaConfiguration: schema.storybook7betaConfiguration,
+    storybook7UiFramework:
+      bundler === 'vite'
+        ? '@storybook/react-vite'
+        : '@storybook/react-webpack5',
   });
 
   if (schema.generateStories) {

diff --git a/packages/react/src/generators/storybook-configuration/schema.d.ts b/packages/react/src/generators/storybook-configuration/schema.d.ts
@@ -13,4 +13,5 @@ export interface StorybookConfigureSchema {
   ignorePaths?: string[];
   bundler?: 'webpack' | 'vite';
   configureTestRunner?: boolean;
+  storybook7betaConfiguration?: boolean;
 }
diff --git a/packages/react/src/generators/storybook-configuration/schema.json b/packages/react/src/generators/storybook-configuration/schema.json
@@ -81,6 +81,11 @@
     "bundler": {
       "description": "The Storybook builder to use.",
       "enum": ["vite", "webpack"]
+    },
+    "storybook7betaConfiguration": {
+      "description": "Configure your workspace to use Storybook 7, even though Storybook v7 is still in beta.",
+      "type": "boolean",
+      "default": false
     }
   },
   "required": ["name"],

diff --git a/packages/storybook/project.json b/packages/storybook/project.json
@@ -11,43 +11,48 @@
         "assets": [
           {
             "input": "packages/storybook",
-            "glob": "**/project-files/.storybook/**",
+            "glob": "**/files/**",
             "output": "/"
           },
           {
             "input": "packages/storybook",
-            "glob": "**/files/**",
+            "glob": "**/project-files/.storybook/**",
             "output": "/"
           },
           {
             "input": "packages/storybook",
-            "glob": "**/root-files/.storybook/**",
+            "glob": "**/project-files-7/.storybook/**",
             "output": "/"
           },
           {
             "input": "packages/storybook",
-            "glob": "**/project-files-ts/.storybook/**",
+            "glob": "**/root-files/.storybook/**",
             "output": "/"
           },
           {
             "input": "packages/storybook",
-            "glob": "**/root-files-ts/.storybook/**",
+            "glob": "**/project-files-ts/.storybook/**",
             "output": "/"
           },
           {
             "input": "packages/storybook",
-            "glob": "**/root-files-nested/.storybook/**",
+            "glob": "**/project-files-7-ts/.storybook/**",
             "output": "/"
           },
           {
             "input": "packages/storybook",
-            "glob": "**/root-files-nested-ts/.storybook/**",
+            "glob": "**/root-files-ts/.storybook/**",
             "output": "/"
           },
           {
             "input": "packages/storybook",
             "glob": "**/*.json",
-            "ignore": ["**/tsconfig*.json", "project.json", ".eslintrc.json"],
+            "ignore": [
+              "**/tsconfig*.json",
+              "project.json",
+              ".eslintrc.json",
+              "**/test-configs/**"
+            ],
             "output": "/"
           },
           {

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
@@ -14,9 +14,9 @@ jest.mock('@storybook/core-server', () => {
 });
 import * as build from '@storybook/core-server';
 import { CLIOptions } from '@storybook/types';
-import { CommonNxStorybookConfig } from '../models';
+import { CommonNxStorybookConfig } from '../../utils/models';
 
-// TODO (katerina): Update when Storybook 7
+// TODO(katerina): Update when Storybook 7
 describe('Build storybook', () => {
   let context: ExecutorContext;
   let options: CLIOptions & CommonNxStorybookConfig;

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,9 +1,9 @@
 import { ExecutorContext, logger } from '@nrwl/devkit';
 import * as build from '@storybook/core-server';
-import { CLIOptions } from '@storybook/types'; // TODO (katerina): Remove when Storybook 7
+import { CLIOptions } from '@storybook/types'; // TODO(katerina): Remove when Storybook 7
 import 'dotenv/config';
 import { storybookConfigExistsCheck } from '../../utils/utilities';
-import { CommonNxStorybookConfig } from '../models';
+import { CommonNxStorybookConfig } from '../../utils/models';
 import {
   getStorybookFrameworkPath,
   isStorybookV7,
@@ -24,7 +24,7 @@ export default async function buildStorybookExecutor(
     logger.info(`NX Storybook files available in ${buildOptions.outputDir}`);
     return { success: true };
   } else {
-    // TODO (katerina): Remove when Storybook 7
+    // TODO(katerina): Remove when Storybook 7
     // print warnings
     runStorybookSetupCheck(options);
 
@@ -55,11 +55,11 @@ function runInstance(options: CLIOptions, storybook7: boolean): Promise<void> {
     return build['build']({
       ...options,
       mode: 'static',
-    } as any); // TODO (katerina): Change to actual types when Storybook 7
+    } as any); // TODO(katerina): Change to actual types when Storybook 7
   } else {
     return build.buildStaticStandalone({
       ...options,
       ci: true,
-    } as any); // TODO (katerina): Remove when Storybook 7
+    } as any); // TODO(katerina): Remove when Storybook 7
   }
 }
diff --git a/packages/storybook/src/executors/storybook/storybook.impl.spec.ts b/packages/storybook/src/executors/storybook/storybook.impl.spec.ts
@@ -13,9 +13,9 @@ import storybookExecutor from './storybook.impl';
 import { join } from 'path';
 import { readFileSync } from 'fs-extra';
 import { CLIOptions } from '@storybook/types';
-import { CommonNxStorybookConfig } from '../models';
+import { CommonNxStorybookConfig } from '../../utils/models';
 
-// TODO (katerina): Update when Storybook 7
+// TODO(katerina): Update when Storybook 7
 
 describe('@nrwl/storybook:storybook', () => {
   let context: ExecutorContext;

diff --git a/packages/storybook/src/executors/storybook/storybook.impl.ts b/packages/storybook/src/executors/storybook/storybook.impl.ts
@@ -7,8 +7,8 @@ import {
   runStorybookSetupCheck,
   isStorybookV7,
 } from '../utils';
-import { CLIOptions } from '@storybook/types'; // TODO (katerina): Remove when Storybook 7
-import { CommonNxStorybookConfig } from '../models';
+import { CLIOptions } from '@storybook/types'; // TODO(katerina): Remove when Storybook 7
+import { CommonNxStorybookConfig } from '../../utils/models';
 
 export default async function* storybookExecutor(
   options: CLIOptions & CommonNxStorybookConfig,
@@ -28,15 +28,15 @@ export default async function* storybookExecutor(
     yield {
       success: true,
       info: {
-        port: result.port,
+        port: result?.port,
         baseUrl: `${options.https ? 'https' : 'http'}://${
           options.host ?? 'localhost'
-        }:${result.port}`,
+        }:${result?.port}`,
       },
     };
     await new Promise<{ success: boolean }>(() => {});
   } else {
-    // TODO (katerina): Remove when Storybook 7
+    // TODO(katerina): Remove when Storybook 7
     // print warnings
     runStorybookSetupCheck(options);
 
@@ -62,9 +62,9 @@ function runInstance(options: CLIOptions, storybook7: boolean) {
     return build['build']({
       ...options,
       mode: 'dev',
-    } as any); // TODO (katerina): Change to actual types when Storybook 7
+    } as any); // TODO(katerina): Change to actual types when Storybook 7
   } else {
-    // TODO (katerina): Remove when Storybook 7
+    // TODO(katerina): Remove when Storybook 7
     return build.buildDev({
       ...options,
       configType: env.toUpperCase(),

diff --git a/packages/storybook/src/executors/utils.ts b/packages/storybook/src/executors/utils.ts
@@ -1,20 +1,19 @@
-import { ExecutorContext, joinPathFragments, logger } from '@nrwl/devkit';
+import { joinPathFragments, logger } from '@nrwl/devkit';
 import { findNodes } from 'nx/src/utils/typescript';
 import 'dotenv/config';
 import { existsSync, readFileSync } from 'fs';
 import { join } from 'path';
 import { gte } from 'semver';
 import ts = require('typescript');
-import { CommonNxStorybookConfig, UiFramework } from './models';
-import { storybookConfigExistsCheck } from '../utils/utilities';
+import { CommonNxStorybookConfig, UiFramework } from '../utils/models';
 import { CLIOptions } from '@storybook/types';
 
 export interface NodePackage {
   name: string;
   version: string;
 }
 
-// TODO (katerina): Remove when Storybook 7
+// TODO(katerina): Remove when Storybook 7
 export function getStorybookFrameworkPath(uiFramework: UiFramework) {
   const serverOptionsPaths = {
     '@storybook/react': '@storybook/react/dist/cjs/server/options',
@@ -33,7 +32,7 @@ export function getStorybookFrameworkPath(uiFramework: UiFramework) {
   }
 }
 
-// TODO (katerina): Remove when Storybook 7
+// TODO(katerina): Remove when Storybook 7
 function isStorybookV62onwards(uiFramework: string) {
   const storybookPackageVersion = require(join(
     uiFramework,
@@ -51,15 +50,15 @@ export function isStorybookV7() {
   return gte(storybookPackageVersion, '7.0.0-alpha.0');
 }
 
-// TODO (katerina): Remove when Storybook 7
+// TODO(katerina): Remove when Storybook 7
 export function runStorybookSetupCheck(
   options: CLIOptions & CommonNxStorybookConfig
 ) {
   webpackFinalPropertyCheck(options);
   reactWebpack5Check(options);
 }
 
-// TODO (katerina): Remove when Storybook 7
+// TODO(katerina): Remove when Storybook 7
 function reactWebpack5Check(options: CLIOptions & CommonNxStorybookConfig) {
   if (options.uiFramework === '@storybook/react') {
     const source = mainJsTsFileContent(options.configDir);
@@ -81,7 +80,7 @@ function reactWebpack5Check(options: CLIOptions & CommonNxStorybookConfig) {
   }
 }
 
-// TODO (katerina): Remove when Storybook 7
+// TODO(katerina): Remove when Storybook 7
 function mainJsTsFileContent(configFolder: string): ts.SourceFile {
   let storybookConfigFilePath = joinPathFragments(configFolder, 'main.js');
 
@@ -106,7 +105,7 @@ function mainJsTsFileContent(configFolder: string): ts.SourceFile {
   );
 }
 
-// TODO (katerina): Remove when Storybook 7
+// TODO(katerina): Remove when Storybook 7
 function webpackFinalPropertyCheck(
   options: CLIOptions & CommonNxStorybookConfig
 ) {
@@ -147,7 +146,7 @@ function webpackFinalPropertyCheck(
   }
 }
 
-// TODO (katerina): Remove when Storybook 7
+// TODO(katerina): Remove when Storybook 7
 export function builderIsWebpackButNotWebpack5(
   storybookConfig: ts.SourceFile
 ): boolean {

diff --git a/...es/storybook/src/generators/configuration/__snapshots__/configuration-nested.spec.ts.snap b/...es/storybook/src/generators/configuration/__snapshots__/configuration-nested.spec.ts.snap
@@ -67,13 +67,7 @@ exports[`@nrwl/storybook:configuration for workspaces with Root project basic fu
 
 export const rootMain: StorybookConfig = {
   stories: [],
-  addons: ['@storybook/addon-essentials'],
-  // webpackFinal: async (config, { configType }) => {
-  //   // Make whatever fine-grained changes you need that should apply to all storybook configs
-
-  //   // Return the altered config
-  //   return config;
-  // },
+  addons: ['@storybook/addon-essentials']
 };
 "
 `;