feat(storybook): version 7 generators

nrwl · Jan 12, 2023 · 068a67f · 068a67f
1 parent 9f19e93
commit 068a67f
Show file tree

Hide file tree

Showing 23 changed files with 303 additions and 148 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/src/executors/models.ts b/packages/storybook/src/executors/models.ts
@@ -6,14 +6,13 @@ export interface StorybookConfig {
 }
 
 export interface CommonNxStorybookConfig {
-  uiFramework?: UiFramework;
-  uiFramework7?: UiFramework7;
+  uiFramework?: UiFramework; // TODO(katerina): Remove when Storybook 7
 }
 
 export type UiFramework7 =
   | '@storybook/angular'
   | '@storybook/html-webpack5'
-  | '@storybook/next'
+  | '@storybook/nextjs'
   | '@storybook/preact-webpack5'
   | '@storybook/react-webpack5'
   | '@storybook/react-vite'

diff --git a/packages/storybook/src/generators/configuration/configuration.ts b/packages/storybook/src/generators/configuration/configuration.ts
@@ -49,17 +49,63 @@ export async function configurationGenerator(
   const { nextBuildTarget, compiler, viteBuildTarget } =
     findStorybookAndBuildTargetsAndCompiler(targets);
 
-  if (viteBuildTarget && schema.bundler !== 'vite') {
-    logger.info(
-      `Your project ${schema.name} uses Vite as a bundler. 
-      Nx will configure Storybook for this project to use Vite as well.`
-    );
-    schema.bundler = 'vite';
+  if (viteBuildTarget) {
+    if (schema.bundler !== 'vite') {
+      logger.info(
+        `Your project ${schema.name} uses Vite as a bundler. 
+        Nx will configure Storybook for this project to use Vite as well.`
+      );
+      schema.bundler = 'vite';
+    }
+  }
+
+  if (schema.storybook7betaConfiguration) {
+    if (viteBuildTarget) {
+      if (schema.storybook7UiFramework === '@storybook/react-webpack5') {
+        logger.info(
+          `Your project ${schema.name} uses Vite as a bundler. 
+        Nx will configure Storybook for this project to use Vite as well.`
+        );
+        schema.storybook7UiFramework = '@storybook/react-vite';
+      }
+      if (
+        schema.storybook7UiFramework === '@storybook/web-components-webpack5'
+      ) {
+        logger.info(
+          `Your project ${schema.name} uses Vite as a bundler. 
+        Nx will configure Storybook for this project to use Vite as well.`
+        );
+        schema.storybook7UiFramework = '@storybook/web-components-vite';
+      }
+    }
+
+    if (nextBuildTarget) {
+      schema.storybook7UiFramework = '@storybook/nextjs';
+    }
+
+    if (!schema.storybook7UiFramework) {
+      if (schema.uiFramework === '@storybook/react') {
+        schema.storybook7UiFramework = viteBuildTarget
+          ? '@storybook/react-vite'
+          : '@storybook/react-webpack5';
+      } else if (schema.uiFramework === '@storybook/web-components') {
+        schema.storybook7UiFramework = viteBuildTarget
+          ? '@storybook/web-components-vite'
+          : '@storybook/web-components-webpack5';
+      } else if (schema.uiFramework === '@storybook/angular') {
+        schema.storybook7UiFramework = '@storybook/angular';
+      } else if (schema.uiFramework !== '@storybook/react-native') {
+        schema.storybook7UiFramework = `${schema.uiFramework}-webpack5`;
+      }
+    }
   }
 
-  const initTask = await initGenerator(tree, {
-    uiFramework: schema.uiFramework,
+  const initTask = initGenerator(tree, {
+    uiFramework: schema.storybook7betaConfiguration
+      ? schema.storybook7UiFramework
+      : schema.uiFramework,
     bundler: schema.bundler,
+    storybook7betaConfiguration: schema.storybook7betaConfiguration,
   });
   tasks.push(initTask);
 

diff --git a/packages/storybook/src/generators/configuration/schema.d.ts b/packages/storybook/src/generators/configuration/schema.d.ts
@@ -1,22 +1,17 @@
 import { Linter } from '@nrwl/linter';
+import { UiFramework7, UiFramework } from '../../executors/models';
 
 export interface StorybookConfigureSchema {
   name: string;
-  uiFramework:
-    | '@storybook/angular'
-    | '@storybook/react'
-    | '@storybook/react-native'
-    | '@storybook/html'
-    | '@storybook/web-components'
-    | '@storybook/vue'
-    | '@storybook/vue3'
-    | '@storybook/svelte';
+  uiFramework: UiFramework;
   configureCypress?: boolean;
-  bundler?: 'webpack' | 'vite';
+  bundler?: 'webpack' | 'vite'; // TODO(katerina): Remove when Storybook 7
   linter?: Linter;
   js?: boolean;
   tsConfiguration?: boolean;
   cypressDirectory?: string;
   standaloneConfig?: boolean;
   configureTestRunner?: boolean;
+  storybook7betaConfiguration?: boolean;
+  storybook7UiFramework?: UiFramework7;
 }
diff --git a/packages/storybook/src/generators/configuration/schema.json b/packages/storybook/src/generators/configuration/schema.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/packages/storybook/src/generators/configuration/util-functions.ts b/packages/storybook/src/generators/configuration/util-functions.ts
@@ -21,7 +21,6 @@ import { join, relative } from 'path';
 import {
   dedupe,
   findStorybookAndBuildTargetsAndCompiler,
-  isFramework,
   TsConfig,
 } from '../../utils/utilities';
 import { StorybookConfigureSchema } from './schema';
@@ -168,7 +167,8 @@ export function configureTsProjectConfig(
       ...(tsConfigContent.exclude || []),
       '**/*.stories.ts',
       '**/*.stories.js',
-      ...(isFramework('react', schema) || isFramework('react-native', schema)
+      ...(schema.uiFramework === '@storybook/react' ||
+      schema.uiFramework === '@storybook/react-native'
         ? ['**/*.stories.jsx', '**/*.stories.tsx']
         : []),
     ];