fix(storybook): some storybook doc and other fixes (#10387)

nrwl · May 19, 2022 · 76b8e66 · 76b8e66 · vercel · May 19, 2022
1 parent 7617df8
commit 76b8e66
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 90 deletions.
diff --git a/docs/generated/packages/storybook.json b/docs/generated/packages/storybook.json
@@ -228,18 +228,7 @@
         "presets": [
           {
             "name": "Default minimum setup",
-            "keys": ["uiFramework", "port", "projectBuildConfig", "config"]
-          },
-          {
-            "name": "Angular setup with styles",
-            "keys": [
-              "uiFramework",
-              "port",
-              "projectBuildConfig",
-              "config",
-              "styles",
-              "stylePreprocessorOptions"
-            ]
+            "keys": ["uiFramework", "port", "config"]
           }
         ],
         "properties": {
@@ -254,7 +243,7 @@
               "@storybook/vue3",
               "@storybook/svelte"
             ],
-            "default": "@storybook/angular",
+            "default": "@storybook/react",
             "hidden": true
           },
           "port": {
@@ -291,10 +280,6 @@
             "items": { "type": "string" },
             "x-deprecated": "In Storybook 6.4 the `--static-dir` CLI flag has been replaced with the the `staticDirs` field in `.storybook/main.js`. It will be removed completely in Storybook 7.0."
           },
-          "projectBuildConfig": {
-            "type": "string",
-            "description": "Workspace project where Storybook reads the Webpack config from."
-          },
           "config": {
             "type": "object",
             "description": ".storybook configuration.",
@@ -347,30 +332,22 @@
         "presets": [
           {
             "name": "Default minimum setup",
-            "keys": [
-              "uiFramework",
-              "outputPath",
-              "projectBuildConfig",
-              "config"
-            ]
-          },
-          {
-            "name": "Angular setup with styles",
-            "keys": [
-              "uiFramework",
-              "outputPath",
-              "projectBuildConfig",
-              "config",
-              "styles",
-              "stylePreprocessorOptions"
-            ]
+            "keys": ["uiFramework", "outputPath", "config"]
           }
         ],
         "properties": {
           "uiFramework": {
             "type": "string",
             "description": "Storybook framework npm package.",
-            "default": "@storybook/angular",
+            "enum": [
+              "@storybook/react",
+              "@storybook/html",
+              "@storybook/web-components",
+              "@storybook/vue",
+              "@storybook/vue3",
+              "@storybook/svelte"
+            ],
+            "default": "@storybook/react",
             "hidden": true
           },
           "outputPath": {
@@ -383,7 +360,7 @@
           },
           "styles": {
             "type": "array",
-            "description": "Global styles to be included in the build. This is for Angular projects only. It will be ignored in non-Angular projects.",
+            "description": "Global styles to be included in the build.",
             "items": {
               "oneOf": [
                 {
@@ -417,7 +394,7 @@
             "properties": {
               "includePaths": {
                 "type": "array",
-                "description": "The paths to include. Paths will be resolved to workspace root. This is for Angular projects only. It will be ignored in non-Angular projects.",
+                "description": "The paths to include. Paths will be resolved to workspace root.",
                 "items": { "type": "string" }
               }
             }

diff --git a/packages/storybook/src/executors/build-storybook/schema.json b/packages/storybook/src/executors/build-storybook/schema.json
@@ -6,25 +6,22 @@
   "presets": [
     {
       "name": "Default minimum setup",
-      "keys": ["uiFramework", "outputPath", "projectBuildConfig", "config"]
-    },
-    {
-      "name": "Angular setup with styles",
-      "keys": [
-        "uiFramework",
-        "outputPath",
-        "projectBuildConfig",
-        "config",
-        "styles",
-        "stylePreprocessorOptions"
-      ]
+      "keys": ["uiFramework", "outputPath", "config"]
     }
   ],
   "properties": {
     "uiFramework": {
       "type": "string",
       "description": "Storybook framework npm package.",
-      "default": "@storybook/angular",
+      "enum": [
+        "@storybook/react",
+        "@storybook/html",
+        "@storybook/web-components",
+        "@storybook/vue",
+        "@storybook/vue3",
+        "@storybook/svelte"
+      ],
+      "default": "@storybook/react",
       "hidden": true
     },
     "outputPath": {
@@ -37,7 +34,7 @@
     },
     "styles": {
       "type": "array",
-      "description": "Global styles to be included in the build. This is for Angular projects only. It will be ignored in non-Angular projects.",
+      "description": "Global styles to be included in the build.",
       "items": {
         "$ref": "#/definitions/extraEntryPoint"
       }
@@ -48,7 +45,7 @@
       "properties": {
         "includePaths": {
           "type": "array",
-          "description": "The paths to include. Paths will be resolved to workspace root. This is for Angular projects only. It will be ignored in non-Angular projects.",
+          "description": "The paths to include. Paths will be resolved to workspace root.",
           "items": {
             "type": "string"
           }

diff --git a/packages/storybook/src/executors/storybook/schema.json b/packages/storybook/src/executors/storybook/schema.json
@@ -6,18 +6,7 @@
   "presets": [
     {
       "name": "Default minimum setup",
-      "keys": ["uiFramework", "port", "projectBuildConfig", "config"]
-    },
-    {
-      "name": "Angular setup with styles",
-      "keys": [
-        "uiFramework",
-        "port",
-        "projectBuildConfig",
-        "config",
-        "styles",
-        "stylePreprocessorOptions"
-      ]
+      "keys": ["uiFramework", "port", "config"]
     }
   ],
   "properties": {
@@ -32,7 +21,7 @@
         "@storybook/vue3",
         "@storybook/svelte"
       ],
-      "default": "@storybook/angular",
+      "default": "@storybook/react",
       "hidden": true
     },
     "port": {
@@ -71,10 +60,6 @@
       },
       "x-deprecated": "In Storybook 6.4 the `--static-dir` CLI flag has been replaced with the the `staticDirs` field in `.storybook/main.js`. It will be removed completely in Storybook 7.0."
     },
-    "projectBuildConfig": {
-      "type": "string",
-      "description": "Workspace project where Storybook reads the Webpack config from."
-    },
     "config": {
       "type": "object",
       "description": ".storybook configuration.",

diff --git a/...storybook/src/migrations/update-14-0-0/migrate-defaults-5-to-6/migrate-defaults-5-to-6.ts b/...storybook/src/migrations/update-14-0-0/migrate-defaults-5-to-6/migrate-defaults-5-to-6.ts
@@ -33,20 +33,18 @@ export function migrateAllStorybookInstances(tree: Tree) {
   }[] = [...projects.entries()]
     .filter(
       ([_, projectConfig]) =>
-        projectConfig.targets &&
-        projectConfig.targets.storybook &&
-        projectConfig.targets.storybook.executor !==
+        projectConfig?.targets?.storybook &&
+        projectConfig?.targets?.storybook?.executor !==
           '@nrwl/react-native:storybook'
     )
     .map(([projectName, projectConfig]) => {
-      if (projectConfig.targets && projectConfig.targets.storybook) {
-        return {
-          name: projectName,
-          uiFramework: projectConfig.targets.storybook.options.uiFramework,
-          configFolder:
-            projectConfig.targets.storybook.options.config.configFolder,
-        };
-      }
+      return {
+        name: projectName,
+        uiFramework: projectConfig?.targets?.storybook?.options?.uiFramework,
+        configFolder:
+          projectConfig?.targets?.storybook?.options?.config?.configFolder ??
+          '',
+      };
     });
 
   for (const projectWithStorybook of projectsThatHaveStorybookConfiguration) {
@@ -168,7 +166,7 @@ function migrateProjectLevelStorybookInstance(
   const { root, projectType } = readProjectConfiguration(tree, projectName);
   const projectDirectory = projectType === 'application' ? 'app' : 'lib';
   const old_folder_exists_already = tree.exists(
-    configFolder.replace('.storybook', '.old_storybook')
+    configFolder?.replace('.storybook', '.old_storybook')
   );
   const new_config_exists_already = tree.exists(`${configFolder}/main.js`);
 

diff --git a/...s/storybook/src/migrations/update-14-0-0/migrate-stories-to-6-2/migrate-stories-to-6-2.ts b/...s/storybook/src/migrations/update-14-0-0/migrate-stories-to-6-2/migrate-stories-to-6-2.ts
@@ -69,15 +69,13 @@ export function findAllAngularProjectsWithStorybookConfiguration(tree: Tree): {
         '@storybook/angular'
     )
     ?.map(([projectName, projectConfig]) => {
-      if (projectConfig?.targets?.storybook) {
-        return {
-          name: projectName,
-          configFolder:
-            projectConfig.targets.storybook?.options?.config?.configFolder,
-          projectRoot: projectConfig.root,
-          projectSrc: projectConfig.sourceRoot,
-        };
-      }
+      return {
+        name: projectName,
+        configFolder:
+          projectConfig.targets.storybook?.options?.config?.configFolder,
+        projectRoot: projectConfig.root,
+        projectSrc: projectConfig.sourceRoot,
+      };
     });
   return projectsThatHaveStorybookConfiguration;
 }