Angular storybook cheatsheet

11 Junio 2020 »
angular

Installation

npm install -g @storybook/cli

Go to angular project then execute

sb init
  • Remove angular stories examples

Create a new story.

  ng g component test

Create story file

test.stories.ts It should have stories before ts extension

export default {
title: 'Ideario Components',
component: IdearioComponent,
decorators: [
  moduleMetadata({ // imports
    imports: [CommonModule]
    })
  ]
};

Add module decorator

export const test = () => ({
  component: TestComponent,
  ...,
  moduleMetadata: {
    imports: [],
    declarations: [],
    providers: []
  },
});

Add props (inputs/outputs)

export const buttonWithProps = () => ({
  component: Button,
  props: {
    text: 'save',
    onClick: action('click this button'),
  },
});

Add ng-content

export const withContent = () => ({
  component: Button,
  template: `
  <ideario-button>
    <span>Super text</span>
  </ideario-button>
  `,
  moduleMetadata: {
    declarations: [IdearioButtonComponent]
  },
});

Fixing commons errors

On .storybook folder

100% height

Add to preview-body.html file

<style>
  #root {
    height: 100%;
  }
</style>

On Ionic

Page on blank

https://github.com/storybookjs/storybook/issues/7703

<style>
  html:not(.hydrated) body {
    display: block !important;
  }

</style>

No render components

Add to preview-head.html file

<script nomodule="" src="https://unpkg.com/@ionic/core@latest/dist/ionic/ionic.js"></script>

Post relacionados