feat(storybook): csf3 stories generator (#15192)

packages/angular/src/generators/component-story/__snapshots__/component-story.spec.ts.snap

@@ -1,29 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`componentStory generator should generate the right props 1`] = `
-"import { moduleMetadata, Story, Meta } from '@storybook/angular';
+"import { Meta } from '@storybook/angular';
 import { TestButtonComponent } from './test-button.component';
 
 export default {
   title: 'TestButtonComponent',
-  component: TestButtonComponent,
-  decorators: [
-    moduleMetadata({
-      imports: [],
-    })
-  ],
+  component: TestButtonComponent
 } as Meta<TestButtonComponent>;
 
-const Template: Story<TestButtonComponent> = (args: TestButtonComponent) => ({
-  props: args,
-});
-
-
-export const Primary = Template.bind({});
-Primary.args = {
+export const Primary = {
+  render: (args: TestButtonComponent) => ({
+    props: args,
+  }),
+  args: {
     buttonType:  'button',
     style:  'default',
     age:  0,
     isOn:  false,
-}"
+  },
+};"
 `;

packages/angular/src/generators/component-story/component-story.spec.ts

@@ -29,22 +29,22 @@ describe('componentStory generator', () => {
       `libs/${libName}/src/lib/test-button/test-button.component.ts`,
       `import { Component, Input } from '@angular/core';
 
-export type ButtonStyle = 'default' | 'primary' | 'accent';
+        export type ButtonStyle = 'default' | 'primary' | 'accent';
 
-@Component({
-  selector: 'proj-test-button',
-  templateUrl: './test-button.component.html',
-  styleUrls: ['./test-button.component.css']
-})
-export class TestButtonComponent {
-  @Input('buttonType') type = 'button';
-  @Input() style: ButtonStyle = 'default';
-  @Input() age?: number;
-  @Input() isOn = false;
-  @Input() message: string | undefined;
-  @Input() anotherProp: any;
-  @Input() anotherNeverProp: never;
-}`
+        @Component({
+          selector: 'proj-test-button',
+          templateUrl: './test-button.component.html',
+          styleUrls: ['./test-button.component.css']
+        })
+        export class TestButtonComponent {
+          @Input('buttonType') type = 'button';
+          @Input() style: ButtonStyle = 'default';
+          @Input() age?: number;
+          @Input() isOn = false;
+          @Input() message: string | undefined;
+          @Input() anotherProp: any;
+          @Input() anotherNeverProp: never;
+        }`
     );
   });
 
@@ -84,7 +84,6 @@ export class TestButtonComponent {
       projectPath: `libs/${libName}`,
     });
 
-    const storiesFileContent = tree.read(storyFile).toString();
-    expect(storiesFileContent).toMatchSnapshot();
+    expect(tree.read(storyFile).toString()).toMatchSnapshot();
   });
 });

packages/angular/src/generators/component-story/files/__componentFileName__.stories.ts__tmpl__

@@ -1,22 +1,16 @@
-import { moduleMetadata, Story, Meta } from '@storybook/angular';
+import { Meta } from '@storybook/angular';
 import { <%=componentName%> } from './<%=componentFileName%>';
 
 export default {
   title: '<%=componentName%>',
-  component: <%=componentName%>,
-  decorators: [
-    moduleMetadata({
-      imports: [],
-    })
-  ],
+  component: <%=componentName%>
 } as Meta<<%=componentName%>>;
 
-const Template: Story<<%=componentName%>> = (args: <%=componentName%>) => ({
-  props: args,
-});
-
-
-export const Primary = Template.bind({});
-Primary.args = {<% for (let prop of props) { %>
+export const Primary = {
+  render: (args: <%=componentName%>) => ({
+    props: args,
+  }),
+  args: {<% for (let prop of props) { %>
     <%= prop.name %>:  <%- prop.defaultValue %>,<% } %>
-}
+  },
+};