스토리 북은 가장 인기있는 UI 구성 요소 탐색기입니다! 이것은 https://storybook.js.org/의 웹 사이트입니다.
참고 : 이것은 문서가 아니며 여기에 있습니다.
기부금을 환영합니다! 문법이나 문장 부호와 같은 작은 일이라면 풀 요청을 엽니 다. 더 큰 변화 또는 새로운 기능이라면 토론에 문제를 추가하십시오.
워크 플로
Storybook의 스토리 북에는 모든 UI 구성 요소가 포함되어 있습니다. UI는 구성 요소로 시작하여 화면으로 끝나는 "바닥 위"에서 UI를 구축하는 프로세스 인 구성 요소 중심 개발에 따라 구축되었습니다. 즉, 기고자는 Gatsby 앱과 통합하기 전에 스토리 북에서 UI를 작성해야합니다.
Gatsby는 기본 라우팅 및 정적 사이트 생성에 사용됩니다.
yarn start
yarn start:skip-addons Addon 카탈로그 구축을 건너 뜁니다
yarn start:docs-only
문서 섹션의 내용은 Storybook Monorepo의 docs/ 서브 디렉토리에 있습니다 : https://github.com/storybookjs/storybook/tree/next/docs에 있습니다.
해당 파일을 편집하는 동안이 앱을 실행하려면이 저장소와 Monorepo를 모두 체크 아웃하십시오.
storybook Monorepo 내부 : yarn task 명령을 실행 한 다음 Synchronize documentation (sync-docs) 옵션을 선택하십시오.
frontpage 프로젝트의 경로를 제공하십시오.
이를 통해 폴더 storybook/docs 및 frontpage/src/content/docs 동기화되어 Monorepo의 문서에 대한 변경 사항이 Storybook 웹 사이트 문서에 반영되도록합니다.
frontpage 저장소 내부 :웹 사이트 문서를 실행하려면 다음 명령을 사용하십시오.
yarn start:docs-only
이 프로젝트는 브라우저에서 http://localhost:8000 에서 시각화됩니다.
릴리스 노트는 SRC/Content/Releases 디렉토리에 .md 파일에 저장됩니다. 파일의 이름은 릴리스의 버전 (major.minor)에 해당하며 릴리스 페이지에서 특정 릴리스 링크를 채우는 데 사용됩니다.
릴리스의 .md 파일 내에서 FrontMatter는 페이지 제목을 작성하는 데 사용되며 나머지 콘텐츠는 gatsby-transformer-remark 사용하여 구문 분석하고 src/styles/formatting.js 의 선택기와 스타일링됩니다.
자세한 문서를 참조하십시오
개발 및 현지 생산 구축에서 환경 변수는 여기에 설명 된대로 .env 파일로 구성 할 수 있습니다. 변수는 해당 변수가 클라이언트 측 코드에서 사용할 수 있어야 할 때 GATSBY_ 로 접두사로 표시됩니다.
배포 미리보기 및 생산 배포에서 이러한 변수는 NetLify의 빌드 변수로 설정됩니다.
문서 내 검색은 docsearch에 의해 구동됩니다. 이를 위해서는 환경 변수가 필요합니다.
GATSBY_ALGOLIA_API_KEY
컴퓨터에서 설정하는 방법 :
GATSBY_ALGOLIA_API_KEY=key 추가하십시오사이트는 24 시간마다 크롤링되므로 모든 업데이트는 해당 시간에 반영됩니다.
최신 블로그 게시물은 Ghost에서 가져 왔습니다. 이 작업을 수행하려면 환경 변수가 필요합니다.
GHOST_STORYBOOK_API_KEY
컴퓨터에서 설정하는 방법 :
GHOST_STORYBOOK_API_KEY=key 추가하십시오 이 프로젝트는 이러한 도구를 사용하여 작업을보다 쉽게 만듭니다.
메인 및 지점은 모든 커밋에 의해 NetLify에 의해 자동으로 배포됩니다.
스토리 북의 모든 스토리는 데스크탑 및 모바일에서 각 커밋에서 자동으로 시각적으로 테스트됩니다. 병합하기 전에 모든 기준선이 허용되는지 확인하십시오.
모든 테스트 스위트가 실행됩니다. 병합하기 전에 오류가 없는지 확인하십시오.