fbredius/storybook

import { moduleMetadata } from '@storybook/angular';
import { Story, Meta, ArgsTable } from '@storybook/addon-docs';
import { Welcome, Button } from '@storybook/angular/demo';
import { linkTo } from '@storybook/addon-links';
import { DocButtonComponent } from './doc-button/doc-button.component';

# Storybook Docs for Angular

Storybook supports every major view layer:
React, Vue, Angular, Ember, React Native, etc.

Storybook Docs does too.

<Story id="welcome--to-storybook" height="400px" />

Hallelujah! Angular is working out of the box without modification.
How you like them apples?!

## Component Declaration

Just like in React, we first declare our component.

<Meta title="Addons/Docs" decorators={[moduleMetadata({ declarations: [Button] })]} />

This declaration doesn't show up in the MDX output.

## SB5 "Classic" Angular Stories

Next let's declare some stories.

But first let's review how it's done in SB5 for Angular.

```
storiesOf('Button', module)
  .addDecorator(
    moduleMetadata({
      declarations: [Button],
    })
  )
  .add('with text', () => ({
    template: `<storybook-button-component [text]="text" (onClick)="onClick($event)"></storybook-button-component>`,
    props: {
      text: 'Hello Button',
      onClick: () => {},
    },
  }));
```

## MDX Stories

Similarly, here's how we do it in the Docs MDX format. We've already added the decorator above in the component declaration, so we just need to declare a story.

<Story name="with text">
  {{
    template: `<storybook-button-component [text]="text" (onClick)="onClick($event)"></storybook-button-component>`,
    props: {
      text: 'hello button',
      onClick: () => {},
    },
  }}
</Story>

## Another one

Let's add another one. The UI updates automatically as you'd expect.

<Story name="with some emoji">
  {{
    template: `<storybook-button-component [text]="text" (onClick)="onClick($event)"></storybook-button-component>`,
    props: {
      text: '😀 😎 👍 💯',
      onClick: () => {},
    },
  }}
</Story>

## Props

We can automatically generate props tables from Angular components:

<ArgsTable of={DocButtonComponent} />

## More info

For more info, check out the [Storybook Docs Technical Preview](https://docs.google.com/document/d/1un6YX7xDKEKl5-MVb-egnOYN8dynb5Hf7mq0hipk8JE/edit?usp=sharing).

We want your feedback to help make this more useful.

Follow us on Twitter for more short demos & project updates! ❤️📈🛠