feat(storybook): version 7 generators

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

Hide file tree

Showing 20 changed files with 238 additions and 138 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/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/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
@@ -13,7 +13,7 @@ export interface CommonNxStorybookConfig {
 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/schema.d.ts b/packages/storybook/src/generators/configuration/schema.d.ts
@@ -1,16 +1,9 @@
 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';
   linter?: Linter;
@@ -19,4 +12,6 @@ export interface StorybookConfigureSchema {
   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']
         : []),
     ];

diff --git a/packages/storybook/src/generators/init/init.ts b/packages/storybook/src/generators/init/init.ts
@@ -7,7 +7,6 @@ import {
   updateJson,
   updateNxJson,
 } from '@nrwl/devkit';
-import { isFramework } from '../../utils/utilities';
 
 import {
   babelCoreVersion,
@@ -17,6 +16,7 @@ import {
   litHtmlVersion,
   nxVersion,
   reactNativeStorybookLoader,
+  storybook7Version,
   storybookReactNativeVersion,
   storybookVersion,
   svgrVersion,
@@ -36,74 +36,97 @@ function checkDependenciesInstalled(host: Tree, schema: Schema) {
 
   // base deps
   devDependencies['@nrwl/storybook'] = nxVersion;
-  devDependencies['@storybook/core-server'] = storybookVersion;
-  devDependencies['@storybook/addon-essentials'] = storybookVersion;
 
-  if (schema.bundler === 'vite') {
-    devDependencies['@storybook/builder-vite'] = viteBuilderVersion;
-  } else {
-    devDependencies['@storybook/builder-webpack5'] = storybookVersion;
-    devDependencies['@storybook/manager-webpack5'] = storybookVersion;
-  }
-
-  // TODO(katerina): Remove this when Storybook 7.0 is added in Nx
-  devDependencies['html-webpack-plugin'] = htmlWebpackPluginVersion;
+  if (schema.storybook7betaConfiguration) {
+    if (schema.uiFramework === '@storybook/react-native') {
+      devDependencies['@storybook/react-native'] = storybookReactNativeVersion;
+    } else {
+      devDependencies[schema.uiFramework] = storybook7Version;
+    }
+    devDependencies['@storybook/core-server'] = storybook7Version;
+    devDependencies['@storybook/addon-essentials'] = storybook7Version;
+
+    if (schema.uiFramework === '@storybook/angular') {
+      if (
+        !packageJson.dependencies['@angular/forms'] &&
+        !packageJson.devDependencies['@angular/forms']
+      ) {
+        devDependencies['@angular/forms'] = '*';
+      }
+    }
 
-  if (isFramework('angular', schema)) {
-    devDependencies['@storybook/angular'] = storybookVersion;
-    devDependencies['webpack'] = webpack5Version;
+    if (schema.uiFramework === '@storybook/web-components') {
+      devDependencies['lit-html'] = litHtmlVersion;
+    }
 
-    if (
-      !packageJson.dependencies['@angular/forms'] &&
-      !packageJson.devDependencies['@angular/forms']
-    ) {
-      devDependencies['@angular/forms'] = '*';
+    if (schema.uiFramework === '@storybook/react-native') {
+      devDependencies['@storybook/addon-ondevice-actions'] =
+        storybookReactNativeVersion;
+      devDependencies['@storybook/addon-ondevice-backgrounds'] =
+        storybookReactNativeVersion;
+      devDependencies['@storybook/addon-ondevice-controls'] =
+        storybookReactNativeVersion;
+      devDependencies['@storybook/addon-ondevice-notes'] =
+        storybookReactNativeVersion;
+      devDependencies['react-native-storybook-loader'] =
+        reactNativeStorybookLoader;
+    }
+  } else {
+    if (schema.uiFramework === '@storybook/react-native') {
+      devDependencies['@storybook/react-native'] = storybookReactNativeVersion;
+    } else {
+      devDependencies[schema.uiFramework] = storybookVersion;
     }
-  }
 
-  if (isFramework('react', schema)) {
-    devDependencies['@storybook/react'] = storybookVersion;
-    devDependencies['@svgr/webpack'] = svgrVersion;
-    devDependencies['url-loader'] = urlLoaderVersion;
-    devDependencies['babel-loader'] = babelLoaderVersion;
-    devDependencies['@babel/core'] = babelCoreVersion;
-    devDependencies['@babel/preset-typescript'] = babelPresetTypescriptVersion;
-    devDependencies['@storybook/react'] = storybookVersion;
-  }
+    devDependencies[schema.uiFramework] = storybookVersion;
+    devDependencies['@storybook/core-server'] = storybookVersion;
+    devDependencies['@storybook/addon-essentials'] = storybookVersion;
 
-  if (isFramework('html', schema)) {
-    devDependencies['@storybook/html'] = storybookVersion;
-  }
+    if (schema.bundler === 'vite') {
+      devDependencies['@storybook/builder-vite'] = viteBuilderVersion;
+    } else {
+      devDependencies['@storybook/builder-webpack5'] = storybookVersion;
+      devDependencies['@storybook/manager-webpack5'] = storybookVersion;
+    }
 
-  if (isFramework('vue', schema)) {
-    devDependencies['@storybook/vue'] = storybookVersion;
-  }
+    devDependencies['html-webpack-plugin'] = htmlWebpackPluginVersion;
 
-  if (isFramework('vue3', schema)) {
-    devDependencies['@storybook/vue3'] = storybookVersion;
-  }
+    if (schema.uiFramework === '@storybook/angular') {
+      devDependencies['webpack'] = webpack5Version;
 
-  if (isFramework('web-components', schema)) {
-    devDependencies['@storybook/web-components'] = storybookVersion;
-    devDependencies['lit-html'] = litHtmlVersion;
-  }
+      if (
+        !packageJson.dependencies['@angular/forms'] &&
+        !packageJson.devDependencies['@angular/forms']
+      ) {
+        devDependencies['@angular/forms'] = '*';
+      }
+    }
 
-  if (isFramework('svelte', schema)) {
-    devDependencies['@storybook/svelte'] = storybookVersion;
-  }
+    if (schema.uiFramework === '@storybook/react') {
+      devDependencies['@svgr/webpack'] = svgrVersion;
+      devDependencies['url-loader'] = urlLoaderVersion;
+      devDependencies['babel-loader'] = babelLoaderVersion;
+      devDependencies['@babel/core'] = babelCoreVersion;
+      devDependencies['@babel/preset-typescript'] =
+        babelPresetTypescriptVersion;
+    }
 
-  if (isFramework('react-native', schema)) {
-    devDependencies['@storybook/react-native'] = storybookReactNativeVersion;
-    devDependencies['@storybook/addon-ondevice-actions'] =
-      storybookReactNativeVersion;
-    devDependencies['@storybook/addon-ondevice-backgrounds'] =
-      storybookReactNativeVersion;
-    devDependencies['@storybook/addon-ondevice-controls'] =
-      storybookReactNativeVersion;
-    devDependencies['@storybook/addon-ondevice-notes'] =
-      storybookReactNativeVersion;
-    devDependencies['react-native-storybook-loader'] =
-      reactNativeStorybookLoader;
+    if (schema.uiFramework === '@storybook/web-components') {
+      devDependencies['lit-html'] = litHtmlVersion;
+    }
+
+    if (schema.uiFramework === '@storybook/react-native') {
+      devDependencies['@storybook/addon-ondevice-actions'] =
+        storybookReactNativeVersion;
+      devDependencies['@storybook/addon-ondevice-backgrounds'] =
+        storybookReactNativeVersion;
+      devDependencies['@storybook/addon-ondevice-controls'] =
+        storybookReactNativeVersion;
+      devDependencies['@storybook/addon-ondevice-notes'] =
+        storybookReactNativeVersion;
+      devDependencies['react-native-storybook-loader'] =
+        reactNativeStorybookLoader;
+    }
   }
 
   return addDependenciesToPackageJson(host, dependencies, devDependencies);