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,42 @@
+import { moduleMetadata } from './decorators';
+
+class MockModule {}
+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: {
+        imports: [MockModule],
+        providers: [MockService],
+      },
+    });
+  });
+
+  it('should not override individual metadata on a story', () => {
+    const result = moduleMetadata({
+      imports: [MockModule],
+    })(() => ({
+      component: MockComponent,
+      moduleMetadata: {
+        providers: MockService,
+      },
+    }));
+
+    expect(result).toEqual({
+      component: MockComponent,
+      moduleMetadata: {
+        providers: MockService,
+      },
+    });
+  });
+});

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

@@ -0,0 +1,6 @@
+import { NgModuleMetadata } from './types';
+
+export const moduleMetadata = (metadata: Partial<NgModuleMetadata>) => (context: () => any) => ({
+  moduleMetadata: metadata,
+  ...context(),
+});

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/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';
@@ -35,16 +35,18 @@ storiesOf('Custom Pipe/With Knobs', module)
   }));
 
 storiesOf('Custom ngModule metadata', module)
-  .add('simple', () => ({
-    component: ServiceComponent,
-    props: {
-      name: 'Static name',
-    },
-    moduleMetadata: {
+  .addDecorator(
+    moduleMetadata({
       imports: [],
       schemas: [],
       declarations: [],
       providers: [DummyService],
+    })
+  )
+  .add('simple', () => ({
+    component: ServiceComponent,
+    props: {
+      name: 'Static name',
     },
   }))
   .addDecorator(withKnobs)
@@ -56,11 +58,5 @@ storiesOf('Custom ngModule metadata', module)
       props: {
         name,
       },
-      moduleMetadata: {
-        imports: [],
-        schemas: [],
-        declarations: [],
-        providers: [DummyService],
-      },
     };
   });

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, '..'),