feat(storybook): generate storybook with more framework options (nrwl…

…#11914)

docs/generated/packages/storybook.json

@@ -11,7 +11,7 @@
       "name": "Overview Generic",
       "path": "/packages/storybook",
       "file": "shared/guides/storybook/plugin-overview",
-      "content": "![Storybook logo](/shared/storybook-logo.png)\n\nStorybook is a development environment for UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components.\n\nThis guide will briefly walk you through using Storybook within an Nx workspace.\n\n## Setting Up Storybook\n\n### Add the Storybook plugin\n\n```bash\nyarn add --dev @nrwl/storybook\n```\n\n## Using Storybook\n\n### Generating Storybook Configuration\n\nYou can generate Storybook configuration for an individual project with this command:\n\n```bash\nnx g @nrwl/react:storybook-configuration project-name\n```\n\n### Running Storybook\n\nServe Storybook using this command:\n\n```bash\nnx run project-name:storybook\n```\n\n## More Documentation\n\nYou can find dedicated information for React and Angular:\n\n- [Overview Storybook For Angular](/storybook/overview-angular)\n- [Overview Storybook For React](/storybook/overview-react)\n\nFor more on using Storybook, see the [official Storybook documentation](https://storybook.js.org/docs/basics/introduction/).\n\n### Migration Scenarios\n\nHere's more information on common migration scenarios for Storybook with Nx. For Storybook specific migrations that are not automatically handled by Nx please refer to the [official Storybook page](https://storybook.js.org/)\n\n- [Upgrading to Storybook 6](/storybook/upgrade-storybook-v6-react)\n- [Migrate to the Nrwl React Storybook Preset](/storybook/migrate-webpack-final-react)\n"
+      "content": "![Storybook logo](/shared/storybook-logo.png)\n\nStorybook is a development environment for UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components.\n\nThis guide will briefly walk you through using Storybook within an Nx workspace.\n\n## Setting Up Storybook\n\n### Add the Storybook plugin\n\n```bash\nyarn add --dev @nrwl/storybook\n```\n\n## Using Storybook\n\n### Generating Storybook Configuration\n\nYou can generate Storybook configuration for an individual project with this command:\n\n```bash\nnx g @nrwl/storybook:configuration project-name\n```\n\n### Running Storybook\n\nServe Storybook using this command:\n\n```bash\nnx run project-name:storybook\n```\n\n## More Documentation\n\nYou can find dedicated information for React and Angular:\n\n- [Overview Storybook For Angular](/storybook/overview-angular)\n- [Overview Storybook For React](/storybook/overview-react)\n\nFor more on using Storybook, see the [official Storybook documentation](https://storybook.js.org/docs/basics/introduction/).\n\n### Migration Scenarios\n\nHere's more information on common migration scenarios for Storybook with Nx. For Storybook specific migrations that are not automatically handled by Nx please refer to the [official Storybook page](https://storybook.js.org/)\n\n- [Upgrading to Storybook 6](/storybook/upgrade-storybook-v6-react)\n- [Migrate to the Nrwl React Storybook Preset](/storybook/migrate-webpack-final-react)\n"
     },
     {
       "id": "overview-react",
@@ -119,7 +119,16 @@
           "uiFramework": {
             "type": "string",
             "description": "Storybook UI Framework to use.",
-            "enum": ["@storybook/angular", "@storybook/react"],
+            "enum": [
+              "@storybook/angular",
+              "@storybook/react",
+              "@storybook/react-native",
+              "@storybook/html",
+              "@storybook/web-components",
+              "@storybook/vue",
+              "@storybook/vue3",
+              "@storybook/svelte"
+            ],
             "x-prompt": "What UI framework plugin should storybook use?"
           },
           "configureCypress": {

docs/shared/guides/storybook/plugin-overview.md

@@ -19,7 +19,7 @@ yarn add --dev @nrwl/storybook
 You can generate Storybook configuration for an individual project with this command:
 
 ```bash
-nx g @nrwl/react:storybook-configuration project-name
+nx g @nrwl/storybook:configuration project-name
 ```
 
 ### Running Storybook

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

@@ -20,7 +20,16 @@
     "uiFramework": {
       "type": "string",
       "description": "Storybook UI Framework to use.",
-      "enum": ["@storybook/angular", "@storybook/react"],
+      "enum": [
+        "@storybook/angular",
+        "@storybook/react",
+        "@storybook/react-native",
+        "@storybook/html",
+        "@storybook/web-components",
+        "@storybook/vue",
+        "@storybook/vue3",
+        "@storybook/svelte"
+      ],
       "x-prompt": "What UI framework plugin should storybook use?"
     },
     "configureCypress": {

packages/storybook/src/generators/init/init.ts

@@ -12,6 +12,7 @@ import {
   babelCoreVersion,
   babelLoaderVersion,
   babelPresetTypescriptVersion,
+  litHtmlVersion,
   nxVersion,
   reactNativeStorybookLoader,
   storybookReactNativeVersion,
@@ -74,6 +75,7 @@ function checkDependenciesInstalled(host: Tree, schema: Schema) {
 
   if (isFramework('web-components', schema)) {
     devDependencies['@storybook/web-components'] = storybookVersion;
+    devDependencies['lit-html'] = litHtmlVersion;
   }
 
   if (isFramework('svelte', schema)) {

packages/storybook/src/utils/utilities.ts

@@ -1,9 +1,7 @@
 import {
   ExecutorContext,
-  logger,
   readJson,
   readJsonFile,
-  readProjectConfiguration,
   TargetConfiguration,
   Tree,
 } from '@nrwl/devkit';

packages/storybook/src/utils/versions.ts

@@ -10,3 +10,4 @@ export const storybookReactNativeVersion = '^6.0.1-beta.5';
 export const reactNativeStorybookLoader = '^2.0.5';
 export const storybookSwcAddonVersion = '^1.1.7';
 export const storybookNextAddonVersion = '^1.6.6';
+export const litHtmlVersion = '^2.3.1';