[Angular] Add moduleMetadata once

[scottkipfer]

Issue details

Feature Request: It can get tedious adding the same moduleMetadata for every story. Could it be possible to add it once at the parent level? I added a code snippet bellow to help clarify my request.

Screenshots / Screencast / Code Snippets (Optional)

Current: AppMoudle must be provided for each story.

import { storiesOf } from '@storybook/angular';
import {AppModule} from "../src/app/app.module";

import {ButtonComponent} from "../src/app/button/button.component";

storiesOf('Buttons', module).add('Button', () => ({
  component: ButtonComponent,
  props: {
    buttonText: 'Button',
    buttonColor: 'primary'
  },
  moduleMetadata: {
    imports: [AppModule]
  }
})).add('Button With Icon',() => ({
  component: ButtonComponent,
  props: {
    buttonText: 'Button',
    buttonIcon: 'account_circle',
    buttonColor: 'warn'
  },
  moduleMetadata: {
    imports: [AppModule]
  }
})).add('Disabled Button', () => ({
  component: ButtonComponent,
  props: {
    buttonText: 'Disabled',
    disabled: true
  },
  moduleMetadata: {
    imports: [AppModule]
  }
}));

Example: AppMoudle is imported before any stories are added.

import { storiesOf } from '@storybook/angular';
import {AppModule} from "../src/app/app.module";

import {ButtonComponent} from "../src/app/button/button.component";

storiesOf('Buttons', module).imports([AppModule]).add('Button', () => ({
  component: ButtonComponent,
  props: {
    buttonText: 'Button',
    buttonColor: 'primary'
  }
})).add('Button With Icon',() => ({
  component: ButtonComponent,
  props: {
    buttonText: 'Button',
    buttonIcon: 'account_circle',
    buttonColor: 'warn'
  }
})).add('Disabled Button', () => ({
  component: ButtonComponent,
  props: {
    buttonText: 'Disabled',
    disabled: true
  }
}));```

  
  

[amcdnl]

I agree with the use case but I think something like:

storiesOf('Buttons', module)
   .addDecorator(moduleMetadata({ inputs: [MyModule] }))
   .add(...)

would be more in line with the API.

[jonrimmer]

We had the same requirement. I created this decorator, which can be used as @amcdnl suggested:

import { NgModuleMetadata } from '@storybook/angular/dist/client/preview/angular/types';

export const moduleMetadata = (metadata: Partial<NgModuleMetadata>) =>
  (context: () => any) => ({
    moduleMetadata: metadata,
    ...context()
  });

Individual stories should be able to override the default metadata with their own. A more robust implementation could try to merge the two.

[amcdnl]

@jonrimmer - Very nice! You should PR this.

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 60 days. Thanks!