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;
@@ -29,4 +30,5 @@ declare module '@storybook/angular' {
   export function addDecorator(decorator: any): IApi;
   export function configure(loaders: () => NodeRequire, module: NodeModule): void;
   export function getStorybook(): IStoribookSection[];
+  export function clearDecorators(): void;
 }

app/angular/src/client/index.js

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

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

@@ -0,0 +1,99 @@
+import { moduleMetadata } from './decorators';
+import { addDecorator, storiesOf, clearDecorators, getStorybook } from '@storybook/angular';
+
+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],
+      },
+    });
+  });
+
+  it('should work when added globally', () => {
+    const metadata = {
+      declarations: [MockComponent],
+      providers: [MockService],
+      entryComponents: [MockComponent],
+      imports: [MockModule],
+    };
+
+    addDecorator(moduleMetadata(metadata));
+
+    storiesOf('Test', module).add('Default', () => ({
+      component: MockComponent,
+    }));
+
+    const [storybook] = getStorybook();
+
+    expect(storybook.stories[0].render().moduleMetadata).toEqual({
+      declarations: [MockComponent],
+      providers: [MockService],
+      entryComponents: [MockComponent],
+      imports: [MockModule],
+      schemas: [],
+    });
+
+    clearDecorators();
+  });
+});

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',
+    }
+  }));
+```

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