ES6 모듈 기반 표준인 CSF(Component Story Format)에 따라 스토리 정의
주요 구성 요소 : 구성 요소를 설명하는 기본 내보내기, 스토리를 설명하는 명명된 내보내기
Template.bind({})
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
함수의 복사본을 만드는 표준 JavaScript 기술
내보낸 각 스토리가 템플릿에 고유 속성을 설정할 수 있도록 템플릿 복사
Docs Pages > Inline stories vs iframe stories
https://storybook.js.org/docs/web-components/writing-docs/docs-page#inline-stories-vs-iframe-stories
iframe
inline
.storybook/preview.js
의 docs.inlineStories : true / false
설정 가능스토리북의 UI와 동작을 확장하는 애드온
스토리북은 기본적으로 초기 사용자 경험에 추가되는 일련의 "필수" 추가 기능
스토리북 코어 팀이 개발한 "공식" 애드온뿐만 아니라 많은 타사 애드온이 있다.
.storybook/main.js
기본 구성 파일
Storybook 서버의 동작을 제어
변경할 때 Storybook 프로세스를 다시 시작해야 함
.storybook/preview.js
스토리 렌더링 되는 방법 제어
전체 스토리에서 로드 필요한 글로벌 코드 적용
decorators - an array of global decorators
parameters - an object of global parameters
globalTypes - definition of globalTypes
.storybook/manager.js
특정 API가 없지만 UI 옵션을 설정하고 스토리북의 테마를 구성하는 곳
Story rendering
https://storybook.js.org/docs/web-components/configure/story-rendering
미리보기/관리자 템플릿(https://storybook.js.org/docs/web-components/addons/writing-presets#previewmanager-templates)으로도 적용 가능
storybook preview iframe(컴포넌트가 렌더링되는 곳) 의 <head>
에 추가할 코드 작성
.storybook/preview-head.html
파일에 삽입할 태그를 추가
storybook preview iframe 의 <body>
에 추가할 코드 작성
.storybook/preview-body.html
파일에 삽입할 태그를 추가
ex. rem 또는 em 사용 시 base font-size 스타일 적용 가능
ahttps://storybook.js.org/docs/react/writing-stories/introduction
https://www.insidenewcity.com/running-javascript-with-templates-in-storybook-for-html/
UI 개발을 위한 도구
storybook web components with lit
: https://piyushsinha.tech/introduction-to-storybook-for-web-components
https://webcomponents.dev/docs/
https://webcomponents.dev/docs/component-story-format
stories는 storybook의 스토리포맷(CSF : Component Story Format)으로 표현
참고
storybook web components with stencil
: https://paulcpederson.com/articles/stencil-storybook/
storybook web components with polymer
https://medium.com/storybookjs/how-to-combine-web-components-with-storybook-a-match-made-in-heaven-9d9939eedc76
component 렌더링되는 iframe 변경 체크
url 체크 정상적인 방법 X (setInterval로는 가능)
-> 우회(클릭이벤트?)
story argstable 연결
https://github.com/storybookjs/storybook/discussions/16549