Add moduleMetdata decorator for supplying common Angular metadata

app/angular/index.d.ts

@@ -1,4 +1,5 @@
 import { NgModuleMetadata, ICollection } from './dist/client/preview/angular/types';
+export { moduleMetadata } from './dist/client/preview/angular/decorators';
 
 export interface IStorybookStory {
   name: string;

app/angular/src/client/index.js

@@ -1 +1,3 @@
 export { storiesOf, setAddon, addDecorator, configure, getStorybook } from './preview';
+
+export { moduleMetadata } from './preview/angular/decorators';

app/angular/src/client/preview/angular/decorators.test.ts

@@ -0,0 +1,71 @@
+import { moduleMetadata } from './decorators';
+
+class MockModule {}
+class MockModuleTwo {}
+class MockService {}
+class MockComponent {}
+
+describe('moduleMetadata', () => {
+  it('should add metadata to a story without it', () => {
+    const result = moduleMetadata({
+      imports: [MockModule],
+      providers: [MockService],
+    })(() => ({
+      component: MockComponent,
+    }));
+
+    expect(result).toEqual({
+      component: MockComponent,
+      moduleMetadata: {
+        declarations: [],
+        entryComponents: [],
+        imports: [MockModule],
+        schemas: [],
+        providers: [MockService],
+      },
+    });
+  });
+
+  it('should combine with individual metadata on a story', () => {
+    const result = moduleMetadata({
+      imports: [MockModule],
+    })(() => ({
+      component: MockComponent,
+      moduleMetadata: {
+        imports: [MockModuleTwo],
+        providers: [MockService],
+      },
+    }));
+
+    expect(result).toEqual({
+      component: MockComponent,
+      moduleMetadata: {
+        declarations: [],
+        entryComponents: [],
+        imports: [MockModule, MockModuleTwo],
+        schemas: [],
+        providers: [MockService],
+      },
+    });
+  });
+
+  it('should return the original metadata if passed null', () => {
+    const result = moduleMetadata(null)(() => ({
+      component: MockComponent,
+      moduleMetadata: {
+        providers: [MockService],
+      },
+    }));
+
+    expect(result).toEqual({
+      component: MockComponent,
+      moduleMetadata: {
+        declarations: [],
+        entryComponents: [],
+        imports: [],
+        schemas: [],
+        providers: [MockService],
+      },
+    });
+  });
+});

app/angular/src/client/preview/angular/decorators.ts

@@ -0,0 +1,21 @@
+import { NgModuleMetadata } from './types';
+
+export const moduleMetadata = (metadata: Partial<NgModuleMetadata>) => (storyFn: () => any) => {
+  const story = storyFn();
+  const storyMetadata = story.moduleMetadata || {};
+  metadata = metadata || {};
+
+  return {
+    ...story,
+    moduleMetadata: {
+      declarations: [...(metadata.declarations || []), ...(storyMetadata.declarations || [])],
+      entryComponents: [
+        ...(metadata.entryComponents || []),
+        ...(storyMetadata.entryComponents || []),
+      ],
+      imports: [...(metadata.imports || []), ...(storyMetadata.imports || [])],
+      schemas: [...(metadata.schemas || []), ...(storyMetadata.schemas || [])],
+      providers: [...(metadata.providers || []), ...(storyMetadata.providers || [])],
+    },
+  };
+};

docs/src/pages/basics/guide-angular/index.md

@@ -113,3 +113,55 @@ npm run storybook
 
 Now you can change components and write stories whenever you need to.
 You'll get those changes into Storybook in a snap with the help of webpack's HMR API.
+
+## Module Metadata
+
+If your component has dependencies on other Angular directives and modules, these can be supplied using the `moduleMetadata` property on an individual story:
+
+```js
+import { CommonModule } from '@angular/common';
+import { storiesOf } from '@storybook/angular';
+import { MyButtonComponent } from '../src/app/my-button/my-button.component';
+import { MyPanelComponent } from '../src/app/my-panel/my-panel.component';
+import { MyDataService } from '../src/app/my-data/my-data.service';
+
+storiesOf('My Panel', module)
+  .add('Default', () => ({
+    component: MyPanelComponent,
+    moduleMetadata: {
+      imports: [CommonModule],
+      schemas: [],
+      declarations: [MyButtonComponent],
+      providers: [MyDataService],
+    }
+  }));
+```
+
+If you have metadata that is common between your stories, this can configured once using the `moduleMetadata()` decorator:
+
+```js
+import { CommonModule } from '@angular/common';
+import { storiesOf, moduleMetadata } from '@storybook/angular';
+import { MyButtonComponent } from '../src/app/my-button/my-button.component';
+import { MyPanelComponent } from '../src/app/my-panel/my-panel.component';
+import { MyDataService } from '../src/app/my-data/my-data.service';
+
+storiesOf('My Panel', module)
+  .addDecorator(
+    moduleMetadata({
+      imports: [CommonModule],
+      schemas: [],
+      declarations: [MyButtonComponent],
+      providers: [MyDataService],
+    })
+  )
+  .add('Default', () => ({
+    component: MyPanelComponent
+  }))
+  .add('with a title', () => ({
+    component: MyPanelComponent,
+    props: {
+      title: 'Foo',
+    }
+  }));
+```

examples/angular-cli/src/stories/__snapshots__/custom-metadata.stories.storyshot

@@ -1,5 +1,107 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Storyshots Common ngModule metadata simple 1`] = `
+<storybook-dynamic-app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
+>
+  <storybook-simple-service-component>
+
+
+    <p>
+      Static name:
+    </p>
+
+
+    <ul>
+
+
+
+
+
+    </ul>
+
+
+  </storybook-simple-service-component>
+</storybook-dynamic-app-root>
+`;
+
+exports[`Storyshots Common ngModule metadata template 1`] = `
+<storybook-dynamic-app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
+>
+  <ng-component>
+    <storybook-simple-service-component
+      ng-reflect-name="Static name"
+    >
+
+
+      <p>
+        Static name:
+      </p>
+
+
+      <ul>
+
+
+
+
+
+      </ul>
+
+
+    </storybook-simple-service-component>
+  </ng-component>
+</storybook-dynamic-app-root>
+`;
+
+exports[`Storyshots Common ngModule metadata with knobs 1`] = `
+<storybook-dynamic-app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
+>
+  <ng-component>
+
+
+    <storybook-name
+      ng-reflect-field="foobar"
+    >
+      <h1>
+        CustomPipe: foobar
+      </h1>
+    </storybook-name>
+
+
+    <storybook-simple-service-component
+      ng-reflect-name="Static name"
+    >
+
+
+      <p>
+        Static name:
+      </p>
+
+
+      <ul>
+
+
+
+
+
+      </ul>
+
+
+    </storybook-simple-service-component>
+
+
+  </ng-component>
+</storybook-dynamic-app-root>
+`;
+
 exports[`Storyshots Custom Pipe Default 1`] = `
 <storybook-dynamic-app-root
   cfr={[Function CodegenComponentFactoryResolver]}

examples/angular-cli/src/stories/custom-metadata.stories.ts

@@ -1,4 +1,4 @@
-import { storiesOf } from '@storybook/angular';
+import { storiesOf, moduleMetadata } from '@storybook/angular';
 import { withKnobs, text } from '@storybook/addon-knobs/angular';
 
 import { NameComponent } from './moduleMetadata/name.component';
@@ -64,3 +64,40 @@ storiesOf('Custom ngModule metadata', module)
       },
     };
   });
+
+storiesOf('Common ngModule metadata', module)
+  .addDecorator(
+    moduleMetadata({
+      imports: [],
+      schemas: [],
+      declarations: [ServiceComponent],
+      providers: [DummyService],
+    })
+  )
+  .add('simple', () => ({
+    component: ServiceComponent,
+    props: {
+      name: 'Static name',
+    },
+  }))
+  .add('template', () => ({
+    template:
+      '<storybook-simple-service-component [name]="name"></storybook-simple-service-component>',
+    props: {
+      name: 'Static name',
+    },
+  }))
+  .addDecorator(withKnobs)
+  .add('with knobs', () => ({
+    template: `
+      <storybook-name [field]="field"></storybook-name>
+      <storybook-simple-service-component [name]="name"></storybook-simple-service-component>
+    `,
+    props: {
+      field: text('field', 'foobar'),
+      name: 'Static name',
+    },
+    moduleMetadata: {
+      declarations: [NameComponent, CustomPipePipe],
+    },
+  }));

scripts/test.js

@@ -43,7 +43,7 @@ const createOption = ({ defaultValue, option, name, extraParam }) => ({
 
 const tasks = {
   core: createProject({
-    name: `Core & React & Vue & Polymer ${chalk.gray('(core)')}`,
+    name: `Core & React & Vue & Polymer & Angular ${chalk.gray('(core)')}`,
     defaultValue: true,
     option: '--core',
     projectLocation: path.join(__dirname, '..'),