Storybook Angular

This project is just a simple example to testing Storybook with Angular

Testing

Run Storybook

Run yarn storybook || npm run storybook for a storybook server. Navigate to http://localhost:6006/.

Run app

Run ng serve for a dev server. Navigate to http://localhost:4200/.

Run unit tests

Run ng test to execute the unit tests via Karma.

Stories

Title - Component

// title.component.ts

@Component({
  selector: 'app-title',
  templateUrl: './title.component.html',
  styleUrls: ['./title.component.scss']
})
export class TitleComponent {

  @Input() public size: Size = Size.normal;
  @Input() public title: string = '';
  
  constructor() { }
}

Title - Stories

// title.stories.ts

export default {
    title: 'Group 1/Title',
    component: TitleComponent,
} as Meta;

const Template: Story = (args) => ({
  props: args,
});

export const Sample = Template.bind({});

Sample.args = {
  title: 'Hello World',
  size: Size.small
};

Button - Component

// button.component.ts

@Component({
  selector: 'app-button',
  templateUrl: './button.component.html',
  styleUrls: ['./button.component.scss']
})
export class ButtonComponent {

  @Input() public text: string = '';
  @Input() public color: ButtonColor = 'primary';
  
  @Output() public onClick: EventEmitter<boolean> = new EventEmitter(); 

  constructor() { }

  public handleClick = () => {
    this.onClick.emit();
  }
}

Button - Stories

// button.stories.ts
export default {
    title: 'Group 1/Button',
    component: ButtonComponent,
} as Meta;

const Template: Story = (args) => ({
  props: args,
});

export const Primary = Template.bind({});
Primary.args = {
  text: 'Primary',
  color: 'primary'
};

export const Secondary = Template.bind({});
Secondary.args = {
  text: 'Secondary',
  color: 'secondary'
};

Theming

Add dependencies

Run yarn add --dev @storybook/addons @storybook/theming. Reference: Storybook/Theming.

Create a manager.js file inside .storybook folder

// manager.js

import { addons } from '@storybook/addons';
import { themes } from '@storybook/theming';

addons.setConfig({
  theme: themes.dark,
});