feat(storybook): generate stories for angular standalone components (#…

…10728)

package.json

@@ -77,12 +77,12 @@
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.0.4",
     "@schematics/angular": "~14.0.0",
-    "@storybook/addon-essentials": "~6.5.4",
+    "@storybook/addon-essentials": "~6.5.9",
     "@storybook/addon-knobs": "~6.3.0",
-    "@storybook/angular": "~6.5.4",
-    "@storybook/core": "~6.5.4",
-    "@storybook/core-server": "~6.5.4",
-    "@storybook/react": "~6.5.4",
+    "@storybook/angular": "~6.5.9",
+    "@storybook/core": "~6.5.9",
+    "@storybook/core-server": "~6.5.9",
+    "@storybook/react": "~6.5.9",
     "@svgr/webpack": "^6.1.2",
     "@swc-node/register": "^1.4.2",
     "@swc/core": "^1.2.173",

packages/angular/src/generators/stories/__snapshots__/stories-lib.spec.ts.snap

@@ -9,6 +9,30 @@ exports[`angularStories generator: libraries Stories for non-empty Angular libra
 });"
 `;
 
+exports[`angularStories generator: libraries Stories for non-empty Angular library should generate stories file for standalone component 1`] = `
+"import { moduleMetadata, Story, Meta } from '@storybook/angular';
+import { StandaloneComponent } from './standalone.component';
+
+export default {
+  title: 'StandaloneComponent',
+  component: StandaloneComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [],
+    })
+  ],
+} as Meta<StandaloneComponent>;
+
+const Template: Story<StandaloneComponent> = (args: StandaloneComponent) => ({
+  props: args,
+});
+
+
+export const Primary = Template.bind({});
+Primary.args = {
+}"
+`;
+
 exports[`angularStories generator: libraries Stories for non-empty Angular library should generate stories.ts files 1`] = `
 "import { moduleMetadata, Story, Meta } from '@storybook/angular';
 import { TestButtonComponent } from './test-button.component';

packages/angular/src/generators/stories/stories-lib.spec.ts

@@ -2,6 +2,7 @@ import type { Tree } from '@nrwl/devkit';
 import { createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing';
 import { Linter } from '@nrwl/linter';
 import { cypressProjectGenerator } from '@nrwl/storybook';
+import { componentGenerator } from '../component/component';
 import { libraryGenerator } from '../library/library';
 import { scamGenerator } from '../scam/scam';
 import { createStorybookTestWorkspaceForLib } from '../utils/testing';
@@ -259,5 +260,27 @@ describe('angularStories generator: libraries', () => {
         )
       ).toBeTruthy();
     });
+
+    it('should generate stories file for standalone component', async () => {
+      await componentGenerator(tree, {
+        name: 'standalone',
+        project: libName,
+        standalone: true,
+      });
+
+      angularStoriesGenerator(tree, { name: libName });
+
+      expect(
+        tree.exists(
+          `libs/${libName}/src/lib/standalone/standalone.component.stories.ts`
+        )
+      ).toBeTruthy();
+      expect(
+        tree.read(
+          `libs/${libName}/src/lib/standalone/standalone.component.stories.ts`,
+          'utf-8'
+        )
+      ).toMatchSnapshot();
+    });
   });
 });

packages/angular/src/generators/stories/stories.ts

@@ -21,8 +21,7 @@ export function angularStoriesGenerator(
   const moduleFilePaths = getModuleFilePaths(tree, projectPath);
   const componentsInfo = [
     ...getComponentsInfo(tree, moduleFilePaths, options.name),
-    // TODO(leo): uncomment once Storybook supports standalone components https://github.com/storybookjs/storybook/pull/18272
-    // ...getStandaloneComponentsInfo(tree, projectPath),
+    ...getStandaloneComponentsInfo(tree, projectPath),
   ];
 
   if (options.generateCypressSpecs && !e2eProject) {

packages/storybook/migrations.json

@@ -82,6 +82,39 @@
     }
   },
   "packageJsonUpdates": {
+    "14.3.2": {
+      "version": "14.3.2-beta.1",
+      "packages": {
+        "@storybook/core-server": {
+          "version": "~6.5.9",
+          "alwaysAddToPackageJson": true
+        },
+        "@storybook/angular": {
+          "version": "~6.5.9",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/react": {
+          "version": "~6.5.9",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/web": {
+          "version": "~6.5.9",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/addon-essentials": {
+          "version": "~6.5.9",
+          "alwaysAddToPackageJson": false
+        },
+        "@storybook/builder-webpack5": {
+          "version": "~6.5.9",
+          "alwaysAddToPackageJson": true
+        },
+        "@storybook/manager-webpack5": {
+          "version": "~6.5.9",
+          "alwaysAddToPackageJson": true
+        }
+      }
+    },
     "14.2.0": {
       "version": "14.2.0-beta.6",
       "packages": {

packages/storybook/src/generators/init/__snapshots__/init.spec.ts.snap

@@ -7,12 +7,12 @@ Object {
   },
   "devDependencies": Object {
     "@angular/forms": "*",
-    "@nrwl/storybook": "~6.5.4",
-    "@storybook/addon-essentials": "~6.5.4",
-    "@storybook/angular": "~6.5.4",
-    "@storybook/builder-webpack5": "~6.5.4",
-    "@storybook/core-server": "~6.5.4",
-    "@storybook/manager-webpack5": "~6.5.4",
+    "@nrwl/storybook": "~6.5.9",
+    "@storybook/addon-essentials": "~6.5.9",
+    "@storybook/angular": "~6.5.9",
+    "@storybook/builder-webpack5": "~6.5.9",
+    "@storybook/core-server": "~6.5.9",
+    "@storybook/manager-webpack5": "~6.5.9",
     "existing": "1.0.0",
     "webpack": "^5.64.0",
   },

packages/storybook/src/utils/versions.ts

@@ -1,5 +1,5 @@
 export const nxVersion = require('../../package.json').version;
-export const storybookVersion = '~6.5.4';
+export const storybookVersion = '~6.5.9';
 export const babelCoreVersion = '7.12.13';
 export const babelLoaderVersion = '8.1.0';
 export const babelPresetTypescriptVersion = '7.12.13';