feat(storybook): version 7 generators

docs/generated/packages/angular/generators/storybook-configuration.json

@@ -75,6 +75,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,

docs/generated/packages/react/generators/storybook-configuration.json

@@ -83,6 +83,12 @@
         "description": "The Storybook builder to use.",
         "enum": ["vite", "webpack"],
         "x-priority": "important"
+      },
+      "storybook7betaConfiguration": {
+        "description": "Configure your workspace to use Storybook 7, even though Storybook v7 is still in beta.",
+        "type": "boolean",
+        "default": false,
+        "x-priority": "important"
       }
     },
     "required": ["name"],

docs/generated/packages/storybook/generators/configuration.json

@@ -76,10 +76,38 @@
         "x-prompt": "Which Storybook builder do you want to use?",
         "default": "webpack",
         "x-priority": "important"
+      },
+      "storybook7betaConfiguration": {
+        "description": "Configure your workspace to use Storybook 7, even though Storybook v7 is still in beta.",
+        "type": "boolean",
+        "default": false,
+        "x-priority": "important"
+      },
+      "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"],
-    "examplesFile": "This is a framework-agnostic generator for setting up Storybook configuration for a project.\n\n```bash\nnx g @nrwl/storybook:configuration\n```\n\nWhen running this generator, you will be prompted to provide the following:\n\n- The `name` of the project you want to generate the configuration for.\n- The `uiFramework` you want to use. Supported values are: `\"@storybook/angular\"`, `\"@storybook/react\"`, `\"@storybook/react-native\"`, `\"@storybook/html\"`, `\"@storybook/web-components\"`, `\"@storybook/vue\"`, `\"@storybook/vue3\"` and `\"@storybook/svelte\"`.\n- Whether you want to `configureCypress`. If you choose `yes`, a Cypress e2e app will be created (or configured) to run against the project's Storybook instance.\n- Whether you want to `configureTestRunner`. If you choose `yes`, a `test-storybook` target will be generated in your project's `project.json`, with a command to invoke the [Storybook `test-runner`](https://storybook.js.org/docs/react/writing-tests/test-runner).\n\nYou must provide a `name` and a `uiFramework` for the generator to work.\n\nYou can read more about how this generator works, in the [Storybook package overview page](https://nx.dev/packages/storybook#generating-storybook-configuration).\n\nIf you are using Angular, React, React Native or Next.js in your project, it's best to use the framework specific generator:\n\n- [React Storybook Configuration Generator](/packages/react/generators/storybook-configuration) (React and Next.js projects)\n\n- [Angular Storybook Configuration Generator](/packages/angular/generators/storybook-configuration)\n\n- [React Native Storybook Configuration Generator](/packages/react-native/generators/storybook-configuration)\n\n## Examples\n\n### Generate Storybook configuration using TypeScript\n\n```bash\nnx g @nrwl/storybook:configuration ui --uiFramework=@storybook/web-components --tsConfiguration=true\n```\n\nThis will generate a Storybook configuration for the `ui` project using TypeScript for the Storybook configuration files (the files inside the `.storybook` directory).\n",
+    "examplesFile": "This is a framework-agnostic generator for setting up Storybook configuration for a project.\n\n```bash\nnx g @nrwl/storybook:configuration\n```\n\nWhen running this generator, you will be prompted to provide the following:\n\n- The `name` of the project you want to generate the configuration for.\n- The `uiFramework` you want to use. Supported values are: `\"@storybook/angular\"`, `\"@storybook/react\"`, `\"@storybook/react-native\"`, `\"@storybook/html\"`, `\"@storybook/web-components\"`, `\"@storybook/vue\"`, `\"@storybook/vue3\"` and `\"@storybook/svelte\"`.\n- Whether you want to `configureCypress`. If you choose `yes`, a Cypress e2e app will be created (or configured) to run against the project's Storybook instance.\n- Whether you want to `configureTestRunner`. If you choose `yes`, a `test-storybook` target will be generated in your project's `project.json`, with a command to invoke the [Storybook `test-runner`](https://storybook.js.org/docs/react/writing-tests/test-runner).\n\nYou must provide a `name` and a `uiFramework` for the generator to work.\n\nYou can read more about how this generator works, in the [Storybook package overview page](https://nx.dev/packages/storybook#generating-storybook-configuration).\n\nIf you are using Angular, React, React Native or Next.js in your project, it's best to use the framework specific generator:\n\n- [React Storybook Configuration Generator](/packages/react/generators/storybook-configuration) (React and Next.js projects)\n\n- [Angular Storybook Configuration Generator](/packages/angular/generators/storybook-configuration)\n\n- [React Native Storybook Configuration Generator](/packages/react-native/generators/storybook-configuration)\n\n## Examples\n\n### Generate Storybook configuration using TypeScript\n\n```bash\nnx g @nrwl/storybook:configuration ui --uiFramework=@storybook/web-components --tsConfiguration=true\n```\n\nThis will generate a Storybook configuration for the `ui` project using TypeScript for the Storybook configuration files (the files inside the `.storybook` directory).\n\n### Generate Storybook configuration for Storybook version 7\n\n```bash\nnx g @nrwl/storybook:configuration ui --uiFramework=@storybook/react --storybook7betaConfiguration=true\n```\n\nOR\n\n```bash\nnx g @nrwl/storybook:configuration ui --storybook7UiFramework=@storybook/react-vite --storybook7betaConfiguration=true\n```\n\nThis will generate a Storybook configuration for the `ui` project using Storybook version 7. It will install the Storybook version 7 dependencies and configure the Storybook configuration files (the files inside the `.storybook` directory) to use Storybook version 7.\n",
     "presets": []
   },
   "description": "Add Storybook configuration to a UI library or an application.",

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",
@@ -31,6 +46,11 @@
         "x-prompt": "Which bundler do you want to use?",
         "default": "webpack",
         "x-priority": "important"
+      },
+      "storybook7betaConfiguration": {
+        "description": "Configure your workspace to use Storybook 7, even though Storybook v7 is still in beta.",
+        "type": "boolean",
+        "default": false
       }
     },
     "presets": []

packages/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,
   });
 }

packages/angular/src/generators/storybook-configuration/schema.d.ts

@@ -11,4 +11,5 @@ export interface StorybookConfigurationOptions {
   skipFormat?: boolean;
   ignorePaths?: string[];
   configureTestRunner?: boolean;
+  storybook7betaConfiguration?: boolean;
 }

packages/angular/src/generators/storybook-configuration/schema.json

@@ -78,6 +78,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,

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) {

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;
 }

packages/react/src/generators/storybook-configuration/schema.json

@@ -86,6 +86,12 @@
       "description": "The Storybook builder to use.",
       "enum": ["vite", "webpack"],
       "x-priority": "important"
+    },
+    "storybook7betaConfiguration": {
+      "description": "Configure your workspace to use Storybook 7, even though Storybook v7 is still in beta.",
+      "type": "boolean",
+      "default": false,
+      "x-priority": "important"
     }
   },
   "required": ["name"],

packages/storybook/docs/configuration-generator-examples.md

@@ -32,3 +32,17 @@ nx g @nrwl/storybook:configuration ui --uiFramework=@storybook/web-components --
 ```
 
 This will generate a Storybook configuration for the `ui` project using TypeScript for the Storybook configuration files (the files inside the `.storybook` directory).
+
+### Generate Storybook configuration for Storybook version 7
+
+```bash
+nx g @nrwl/storybook:configuration ui --uiFramework=@storybook/react --storybook7betaConfiguration=true
+```
+
+OR
+
+```bash
+nx g @nrwl/storybook:configuration ui --storybook7UiFramework=@storybook/react-vite --storybook7betaConfiguration=true
+```
+
+This will generate a Storybook configuration for the `ui` project using Storybook version 7. It will install the Storybook version 7 dependencies and configure the Storybook configuration files (the files inside the `.storybook` directory) to use Storybook version 7.

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": "/"
           },
           {

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;

packages/storybook/src/executors/build-storybook/build-storybook.impl.ts

@@ -1,14 +1,13 @@
 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 {
-  getStorybookFrameworkPath,
   isStorybookV7,
-  runStorybookSetupCheck,
-} from '../utils';
+  storybookConfigExistsCheck,
+} from '../../utils/utilities';
+import { CommonNxStorybookConfig } from '../../utils/models';
+import { getStorybookFrameworkPath, runStorybookSetupCheck } from '../utils';
 
 export default async function buildStorybookExecutor(
   options: CLIOptions & CommonNxStorybookConfig,
@@ -24,7 +23,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 +54,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
   }
 }

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;

packages/storybook/src/executors/storybook/storybook.impl.ts

@@ -1,14 +1,13 @@
 import { ExecutorContext } from '@nrwl/devkit';
 import * as build from '@storybook/core-server';
 import 'dotenv/config';
-import { storybookConfigExistsCheck } from '../../utils/utilities';
 import {
-  getStorybookFrameworkPath,
-  runStorybookSetupCheck,
   isStorybookV7,
-} from '../utils';
-import { CLIOptions } from '@storybook/types'; // TODO (katerina): Remove when Storybook 7
-import { CommonNxStorybookConfig } from '../models';
+  storybookConfigExistsCheck,
+} from '../../utils/utilities';
+import { getStorybookFrameworkPath, runStorybookSetupCheck } from '../utils';
+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 +27,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 +61,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(),