Storybook에 기여하기
Backstage Storybook은 재사용 가능한 Backstage 사용자 인터페이스 요소와 그것들을 Backstage 코어와 플러그인 개발에 어떻게 사용하는지 탐색할 방법을 제공해요. 이런 UI 요소들은 흔히 "컴포넌트"라고 불리며, 버튼, 표, 특정 형식의 특수 위젯 등을 포함해요.
출처: 문서
본문
Backstage Storybook은 재사용 가능한 Backstage 사용자 인터페이스 요소와 그것들을 Backstage 코어와 플러그인 개발에 어떻게 사용하는지 탐색할 방법을 제공해요. 이런 UI 요소들은 흔히 "컴포넌트"라고 불리며, 버튼, 표, 특정 형식의 특수 위젯 등을 포함해요.
우리 storybook은 http://backstage.io/storybook 에서 찾을 수 있어요.
디자인 소개에서 언급했듯이 Backstage의 디자인은 Material UI를 기반으로 해요. 많은 UI 요소는 직접 Material UI를 사용하고, 우리는 특정 기능을 제공하기 위해 확장하고 사용자 지정 요소를 작성하기도 해요.
Storybook "Stories"는 특정 컴포넌트를 사용하는 방법에 대한 예시를 제공하며, 시각적으로 그리고 복사할 수 있는 샘플 코드로 모두 표시돼요.
사용자 지정 Backstage 컴포넌트가 만들어지면 @backstage/core-components 패키지에 배치되고 Storybook에 추가돼요.
기존 Material UI 컴포넌트(@material-ui/core의)가 충분해서 래핑하거나 복제할 필요가 없는 경우가 있을 수 있어요. 하지만 우리는 Backstage 안에서 그 컴포넌트를 사용하는 독단적인(opinionated) 방식이 필요할 수 있어요. 그런 경우 기존 컴포넌트 사용 방법을 보여주는 stories도 우리 storybook에 넣을 거예요.
Material UI를 사용하는 story 예시가 더 복잡해져서 특정 색상 집합, 변형, 매개변수 등이 필요해지면, 완전한 Backstage 코어 컴포넌트로 리팩토링될 후보가 될 수 있어요.
새 Story 만들기
Story는 기본적으로 컴포넌트의 단일 시각적 상태를 나타내요.
새 story를 만들려면 Storybook에서 문서화하려는 컴포넌트 옆에 새 파일을 만드세요.
구조의 예시는 아래를 참고하세요.
core
└── src
└── components
└── Progress
├── Progress.tsx
└── Progress.stories.tsx
참고
컴포넌트 story 파일이 componentName.stories.tsx 형식인지 확인하세요.
로컬에서 실행하기
storybook으로 이동해 yarn install을 실행하고 의존성을 설치한 다음, 커맨드라인에서 yarn storybook을 실행하세요.
위 이미지 같은 로그가 보여야 해요.
모든 것이 잘 작동했다면 서버가 포트 6006에서 실행되며, 브라우저로 http://localhost:6006/으로 이동하세요. Storybook 페이지를 탐색하고 볼 수 있어야 해요.