This project is just a simple example to testing Storybook with Angular
Run
yarn storybook
||npm run storybook
for a storybook server. Navigate tohttp://localhost:6006/
.
Run
ng serve
for a dev server. Navigate tohttp://localhost:4200/
.
Run
ng test
to execute the unit tests via Karma.
// 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.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.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.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'
};
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,
});