How to use the @storybook/angular.moduleMetadata function in @storybook/angular

import { storiesOf, moduleMetadata } from '@storybook/angular';
// import { action } from '@storybook/addon-actions';

import { DotAvatarComponent } from './dot-avatar.component';

storiesOf('DotAvatarComponent', module)
    .addDecorator(
        moduleMetadata({
            declarations: [DotAvatarComponent]
        })
    )
    .add('default', () => {
        return {
            template: ``,
            props: {}
        };
    })
    .add('no url', () => {
        return {
            template: ``,
            props: {}
        };
    });

import { moduleMetadata, storiesOf } from '@storybook/angular';
import { Button } from '@storybook/angular/demo';
import { AppComponent } from '../app/app.component';

storiesOf('Addon|Background', module)
  .addParameters({
    backgrounds: [{ name: 'twitter', value: '#00aced', default: true }, { name: 'facebook', value: '#3b5998' }],
  })
  .add('background component', () => ({
    component: AppComponent,
    props: {},
  }));

storiesOf('Addon|Background', module)
  .addDecorator(
    moduleMetadata({
      declarations: [Button],
    })
  )
  .addParameters({
    backgrounds: [{ name: 'twitter', value: '#00aced', default: true }, { name: 'facebook', value: '#3b5998' }],
  })
  .add('background template', () => ({
    template: ``,
    props: {
      text: 'Hello Button',
      onClick: (event: Event) => {
        console.log('some bindings work');
        console.log(event);
      },
    },
  }));

this.model.data = this.dataset.map(datapoint => 
            [
                new TableItem({ data: datapoint.name}),
                new TableItem({ data: "Lorem ipsum dolor sit amet, consectetur adipiscing elit." })
            ]
        );
    }
    ngOnDestroy() {
        document.querySelector('.sb-show-main').classList.remove('full-page');
    }
}

storiesOf("Patterns|Filtering", module)
	.addDecorator(
		moduleMetadata({
			declarations: [ SampleMultiCategories ],
			imports: [
				TableModule,
				DropdownModule,
				GridModule,
				StructuredListModule,
				RadioModule,
				CheckboxModule,
				ButtonModule,
				TagModule,
				UIShellModule
			]
		})
	)
	.addDecorator(withKnobs)
	.add("Multiple Categories", () => ({

import {CommonModule} from '@angular/common';
import {RouterModule} from '@angular/router';
import {moduleMetadata, storiesOf} from '@storybook/angular';
import {centered} from '@storybook/addon-centered/angular';
import {boolean, object, text, withKnobs} from '@storybook/addon-knobs';
import {action} from '@storybook/addon-actions';
import {TooltipModule} from 'ngx-bootstrap';
import {StoryCardComponent} from '../../../utils';
import {MapUiComponent, ThemeModule} from "../..";
import {FocusElementDirective} from '../../../directives/focus-element/focus-element.directive';
import {ListFilterPipe} from '../ui/listfilter.pipe';

storiesOf('Components|Mappings', module)
  .addDecorator(withKnobs)
  .addDecorator(
    moduleMetadata({
      imports: [
        CommonModule,
        ThemeModule,
        RouterModule.forRoot([], { useHash: true }),
        TooltipModule.forRoot()
      ],
      schemas: [],
      declarations: [
        MapUiComponent,
        FocusElementDirective,
        ListFilterPipe,
        StoryCardComponent
      ],
      entryComponents: [],
      providers: []
    })

import {CommonModule} from '@angular/common';
import {moduleMetadata, storiesOf} from '@storybook/angular';
import {centered} from '@storybook/addon-centered/angular';
import {boolean, object, text, withKnobs} from '@storybook/addon-knobs';
import {action} from '@storybook/addon-actions';
import {StoryCardComponent} from '../../../utils';
import {MlErrorComponent, ThemeModule, TraceViewerUiComponent} from "../../index";
import {CodemirrorComponent} from '../../codemirror';

storiesOf('Components|Trace Viewer', module)
  .addDecorator(withKnobs)
  .addDecorator(
    moduleMetadata({
      imports: [CommonModule, ThemeModule],
      schemas: [],
      declarations: [
        TraceViewerUiComponent,
        MlErrorComponent,
        CodemirrorComponent,
        StoryCardComponent
      ],
      entryComponents: [],
      providers: []
    })
  )
  .addDecorator(centered)
  .add('Trace Viewer Component', () => ({
    template: `

import {moduleMetadata, storiesOf} from '@storybook/angular';

import {DatePipePipe} from '../../../pipes/date-pipe/date-pipe.pipe';
import {ObjectToArrayPipe} from '../../../object-to-array.pipe';
import {TruncateCharactersPipe} from '../../../pipes/truncate';
import {PaginationComponent} from '../../pagination';
import {SelectComponent, ThemeModule} from '../..';
import {TracesUiComponent} from '../ui';
import {StoryCardComponent} from '../../../utils';
import {FacetsComponent} from '../../facets/facets.component';

storiesOf('Components|Traces', module)
  .addDecorator(withKnobs)
  .addDecorator(centered)
  .addDecorator(
    moduleMetadata({
      imports: [
        ThemeModule
      ],
      declarations: [
        ObjectToArrayPipe,
        FacetsComponent,
        PaginationComponent,
        SelectComponent,
        StoryCardComponent,
        TracesUiComponent,
        TruncateCharactersPipe,
        DatePipePipe
      ]
    })
  )
  .add('Traces Component', () => ({

text,
  boolean,
  withKnobs
} from '@storybook/addon-knobs';
import {action} from '@storybook/addon-actions';
import { TooltipModule } from 'ngx-bootstrap';
import {StoryCardComponent} from '../../utils';
import {ThemeModule} from "../../../components";
import {MapUiComponent} from "../../../components";
import {FocusElementDirective} from '../../../directives/focus-element/focus-element.directive';
import {ListFilterPipe} from '../../../components/mappings/listfilter.pipe';

storiesOf('Components|Mappings', module)
  .addDecorator(withKnobs)
  .addDecorator(
    moduleMetadata({
      imports: [
        CommonModule,
        ThemeModule,
        RouterModule.forRoot([], { useHash: true }),
        TooltipModule.forRoot()
      ],
      schemas: [],
      declarations: [
        MapUiComponent,
        FocusElementDirective,
        ListFilterPipe,
        StoryCardComponent
      ],
      entryComponents: [],
      providers: []
    })

import { storiesOf, moduleMetadata } from "@storybook/angular";
import { action } from "@storybook/addon-actions";
import { withKnobs, boolean, object } from "@storybook/addon-knobs/angular";

import { AccordionModule, DocumentationModule } from "../";

storiesOf("Components|Accordion", module)
	.addDecorator(
		moduleMetadata({
			imports: [
				AccordionModule,
				DocumentationModule
			]
		})
	)
	.addDecorator(withKnobs)
	.add("Basic", () => ({
		template: `
			
				Lorem ipsum dolor sit amet, \
				consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore \
				et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation \
				ullamco laboris nisi ut aliquip ex ea commodo consequat.
				Lorem ipsum dolor sit amet, \
				consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore \

const getProps = (more = {}) => {
	return Object.assign({}, {
		model: simpleModel,
		size: select("size", { Small: "sm", Short: "sh", Normal: "md", Large: "lg" }, "md"),
		title: text("Title", "Table title"),
		description: text("Description", ""),
		showSelectionColumn: boolean("showSelectionColumn", true),
		striped: boolean("striped", false),
		sortable: boolean("sortable", true),
		isDataGrid: boolean("Data grid keyboard interactions", true)
	}, more);
};

storiesOf("Table", module).addDecorator(
		moduleMetadata({
			imports: [
				NFormsModule,
				TableModule,
				DialogModule,
				PaginationModule,
				SearchModule,
				ButtonModule,
				Settings16Module,
				Delete16Module,
				Save16Module,
				Download16Module,
				Add20Module,
				DocumentationModule
			],
			declarations: [
				TableStory,

*     AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 *     LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 *     OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 *     SOFTWARE.
 * /
 */

import { moduleMetadata, storiesOf } from '@storybook/angular';
import { CoreModule } from '../../../projects/truly-ui/src/components/core';
import { CalendarModule } from '../../../projects/truly-ui/src/components/calendar';
import { boolean } from '@storybook/addon-knobs';


const Story = storiesOf('Data Display|Calendar', module)
  .addDecorator(
    moduleMetadata({
      imports: [
        CalendarModule,
        CoreModule.forRoot({
          theme: 'default',
        }),
      ],
    })
  );


Story.add('Overview', () => {

  const showTodayButton = boolean('Show Today Button', false);

  return {
    template: ``,