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

import { withKnobs } from '@storybook/addon-knobs';
import { storiesOf } from '@storybook/angular';

// @ts-ignore
import readme from './readme.md';

storiesOf('Typography|Label', module)
    .addDecorator(withKnobs)
    .addParameters({
        notes: {
            markdown: readme
        }
    })
    .add('Size/Default', () => ({
        template: `
            The quick brown fox jumps over the lazy dog.
        `
    }))
    .add('Size/Small', () => ({
        template: `
            The quick brown fox jumps over the lazy dog.
        `
    }))

import { centered } from '@storybook/addon-centered/angular';
import { withKnobs } from '@storybook/addon-knobs';
import { storiesOf } from '@storybook/angular';

// @ts-ignore
import readme from './readme.md';

storiesOf('Design System|Map/Map HUD', module)
    .addDecorator(withKnobs)
    .addDecorator(centered)
    .addParameters({
        notes: {
            markdown: readme
        }
    })
    .add('Default', () => ({
        template: `
            
        `,
    }));

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
      ],

import { storiesOf } from '@storybook/angular';
import { wrapWithHits } from '../wrap-with-hits';
import meta from '../meta';

storiesOf('HitsPerPage', module)
  .addDecorator(meta)
  .add('default', () => ({
    component: wrapWithHits({
      template: `
      
      
    `,
    }),
  }))
  .add('with default to 5', () => ({

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

import { InformationFilled16Module } from "@carbon/icons-angular/lib/information--filled/16";
import { DialogModule, PlaceholderModule, DocumentationModule } from "../../";

storiesOf("Components|Tooltip", module)
	.addDecorator(
		moduleMetadata({
			imports: [
				DialogModule,
				PlaceholderModule,
				InformationFilled16Module,
				DocumentationModule
			]
		})
	)
	.addDecorator(withKnobs)
	.add("Basic", () => ({
	template: `
			<div>
				
					<p>This is some tooltip text. This box shows the maximum amount of text that should appear inside.</p></div>

scatterTimeSeriesData,
	scatterOptions,
	scatterData
} from "../../core/demo/demo-data/index";
import { addWidthAndHeight } from "./commons";

const template = `


`;

const stories = storiesOf("Scatter", module);
stories.add(scatterOptions.title, () => ({
	template,
	moduleMetadata: {
		imports: [ChartsModule]
	},
	props: {
		data: scatterData,
		options: addWidthAndHeight(scatterOptions)
	}
}));

stories.add(scatterTimeSeriesOptions.title, () => ({
	template,
	moduleMetadata: {
		imports: [ChartsModule]
	},

import { DatePickerInputModule } from "./datepicker-input.module";
import { storiesOf, moduleMetadata } from "@storybook/angular";
import { withKnobs } from "@storybook/addon-knobs/angular";

storiesOf("DatePickerInput", module)
	.addDecorator(
		moduleMetadata({
			imports: [
				DatePickerInputModule
			]
		})
	)
	.addDecorator(withKnobs)
	.add("Simple", () => ({
		template: `
		
		`
	}));

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

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

storiesOf("Components|Input", module).addDecorator(
	moduleMetadata({
		imports: [InputModule, DocumentationModule]
	})
)
	.addDecorator(withKnobs)
	.add("Label", () => ({
		template: `
		
			{{label}}

text: '😀 😎 👍 💯',
      },
    }))
  )
  .add(
    'with some emoji and action',
    withNotes({ text: 'My notes on a button with emojis' })(() => ({
      component: Button,
      props: {
        text: '😀 😎 👍 💯',
        onClick: action('This was clicked OMG'),
      },
    }))
  );

storiesOf('Another Button', module).add('button with link to another story', () => ({
  component: Button,
  props: {
    text: 'Go to Welcome Story',
    onClick: linkTo('Welcome'),
  },
}));

const moduleMetadata = {
    declarations: [
        UniPopupComponent,
        UniPopupContainerComponent,
        UniIconComponent,
        UniSpinnerComponent,
        UniButtonComponent,
        UniButtonPopupComponent,
        UniButtonGroupComponent,
        UniPopupTriggerDirective
    ]
};
const label = 'Click here!'
const lorem = 'Est labore fugiat irure aliquip laborum minim ea eu in irure pariatur nulla.';

storiesOf('Popup', module)
    .add('Basic', () => ({
        moduleMetadata, template: `
        
            <p> ${label} </p>
             ${lorem} 
        
    `}))
    .add('Close button', () =&gt; ({
        moduleMetadata, template: `
        
            <p> ${label} </p>
             ${lorem} 
        
    `}))
    .add('Close if click inside', () =&gt; ({
        moduleMetadata, template: `