Woongjae Lee
NHN Dooray - Frontend Team
2woongjae@gmail.com
스토리북 cli 전역 설치
npm i -g @storybook/cli
앵귤러 프로젝트 폴더로 이동
getstorybook 명령어 실행
/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
import { configure } from '@storybook/angular';
function loadStories() {
// put welcome screen at the top of the list so it's the first one displayed
require('../src/stories');
// automatically import all story ts files that end with *.stories.ts
const req = require.context('../src/stories', true, /\.stories\.ts$/)
req.keys().forEach((filename) => req(filename))
}
configure(loadStories, module);
import { storiesOf } from '@storybook/angular';
import { withNotes } from '@storybook/addon-notes';
import { action } from '@storybook/addon-actions';
import { linkTo } from '@storybook/addon-links';
import { Welcome, Button } from '@storybook/angular/demo';
storiesOf('Welcome', module).add('to Storybook', () => ({
component: Welcome,
props: {},
}));
storiesOf('Button', module)
.add('with text', () => ({
component: Button,
props: {
text: 'Hello Button',
},
}))
.add(
'with some emoji',
withNotes({ text: 'My notes on a button with emojis' })(() => ({
component: Button,
props: {
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'),
},
}));
By Woongjae Lee
코드버스킹 Angular 101