story2sketch
v1.7.1 (2020-11-16)
스토리 북 스토리를 스케치 기호로 변환하십시오.
놀라운
html-sketchapp사용합니다. 웹 만 지원합니다.
먼저 스케치와 NPM을 받으십시오. 그런 다음 asketch2sketch.sketchplugin 스케치에 설치하십시오.
story2sketch 설치 :
npm i story2sketch -g story2sketch 실행하여 Storybook iframe URL을 향해 지적합니다. '새 탭에서 캔버스 열기'를 클릭하여 스토리 북에서 기존 iframe URL을 찾을 수 있습니다.
더 많은 옵션 또는 많은 이야기가있는 경우 구성을 참조하십시오.
story2sketch --url https://localhost:9001/iframe.html --output stories.asketch.json 스케치 메뉴 바에서 Plugins > From *Almost* Sketch to Sketch 에서 생성 된 파일을 스케치로 가져옵니다.
성공!
StoryBook 3.3 이상 (스토리 북 4 이상이 아닌)을 사용하는 경우, 아직 완료하지 않은 경우 Storybook WebPack.config.js를 완전히 제어 할 수 있습니다.
module . exports = ( storybookBaseConfig , configType ) => {
const newConfig = {
... storybookBaseConfig
} ;
// Add this:
// Export bundles as libraries so we can access them on page scope.
newConfig . output . library = "[name]" ;
return newConfig ;
} ; ./config/storybook/config.js 파일에서 getStorybook 함수를 수동으로 내보내십시오.
import { getStorybook } from "@storybook/react" ;
...
export { getStorybook }Story2Sketch 실행 :
story2sketch --url https://localhost:9001/iframe.html --output stories.asketch.json react-sketchapp 에서 언급했듯이 설계 시스템에서 자산을 관리하는 것이 복잡합니다. 많은 팀이 디자인 시스템 또는 구성 요소 라이브러리를 구축하는 데 디자인을 배포하기위한 스케치 파일을 생성하고 스토리 북을 사용하여 개발 된 구성 요소를 제시합니다. 디자이너가 캐치 업을하면서 최신 구성 요소로 디자인을 최신 상태로 유지하기가 어려워 질 수 있습니다. story2sketch Storybook을 통해 구성 요소에서 스케치 파일을 생성하므로 스케치 디자인은 항상 최신 상태를 유지합니다.
CLI를 통해 API를 사용하여 story2sketch 구성하거나 package.json 을 구성하거나 story2sketch.config.js 파일 추가를 구성 할 수 있습니다.
API의 옵션으로 story2sketch 호출하기 만하면됩니다.
$ story2sketch --stories all --output dist/great-ui.asketch.jsonPackage.json에 다음을 추가하십시오.
{
"story2sketch" : {
"stories" : " all " ,
"output" : " dist/great-ui.asketch.json "
}
} 프로젝트의 루트에서 story2sketch.config.js 라는 파일을 만듭니다.
module . exports = {
output : "dist/great-ui.asketch.json" ,
stories : "all"
} ; | 매개 변수 | 설명 | 입력 유형 | 기본 |
|---|---|---|---|
| 산출 | 생성 된 Asketch.json 파일의 파일 이름 또는 outputby === 'kind'의 폴더에 대한 파일 이름을 지정합니다. | 끈 | "dist/stories.asketch.json" |
| 입력 | 스토리 북의 위치는 iframe.html을 생성했습니다. 성능을 위해 가능한 경우 url 위에 사용하십시오. | 끈 | "dist/iframe.html" |
| URL | 스토리 북 iframe url. iframe.html 로 끝납니다. 가능하면 성능에 대한 input 선호합니다. | 끈 | "http://localhost:9001/iframe.html" |
| 이야기 | Storybook에서 추출 할 이야기. 기본값을 무시해야 할 것입니다. | 객체/문자열 | "all" |
| 동시성 | 병렬로 실행할 헤드리스 크롬 탭 수. 기본체는 컴퓨터에서 사용 가능한 스레드 수로입니다. | 정수 | 동적 |
| Symbolgutter | 스케치의 기호 사이에 배치하는 홈통. | 정수 | 100 |
| 뷰포트 | 뷰포트 구성. 너비에 따라 왼쪽에서 오른쪽으로 배열됩니다. 기호를 식별하는 데 사용되므로 키를 변경하지 마십시오. | 물체 | 모바일 뷰포트 (너비 320px) 및 데스크탑 뷰포트 (1920px 너비). 아래 예제를 참조하십시오. |
| QuerySelector | 쿼리 선택기 각 페이지에서 노드를 선택합니다. document.querySelectorAll 사용합니다. | 끈 | "#root" |
| 말 수가 많은 | 장황한 로깅 출력. | 부울 | false |
| fixpseudo | 의사 요소 대신 실제 요소를 삽입하려고 시도하십시오 | 부울 | false |
| 꼭두각시 | puppeteer.launch 에 직접 전달할 옵션. 사용법은 인형극 문서를 참조하십시오. | 물체 | {} |
| removepreviewmargin | Iframe 본체에서 미리보기 마진을 제거하십시오. | 부울 | true |
| 레이아웃 | "Kind"또는 "Group"키로 스케치 출력의 그룹 기호 | "Kind"| "그룹" | 널 |
| 출력 | "Kind"또는 "Group"키로 여러 스케치 파일 작성 | "Kind"| "그룹" | 널 |
스토리를 자동으로 감지하여 단일 스케치 파일에서 각 스토리에 대해 두 개의 뷰포트를 기호로 출력합니다.
module . exports = {
output : "dist/great-ui.asketch.json" ,
input : "dist/iframe.html" , // Same as default
pageTitle : "great-ui"
} ;스토리를 수동으로 정의하여 어떤 이야기가 출력되는지에 대한 세분화 된 제어를 갖습니다. 일부 이야기는 Story2Sketch를 깨뜨릴 수 있으므로 빈 출력이 발생하면 도움이 될 수 있습니다.
module . exports = {
stories : [
{
kind : "Buttons/Button" ,
stories : [
{
name : "Button"
}
]
} ,
{
kind : "Buttons/ButtonGroup" ,
stories : [
{
name : "Default" ,
displayName : "Horizontal"
} ,
{
name : "Vertical"
}
]
} ,
{
kind : "Table" ,
stories : [
{
name : "Table"
}
]
}
]
} ;사용자 정의 뷰포트를 기반으로 한 출력 기호 :
module . exports = {
viewports : {
narrow : {
width : 320 ,
height : 1200 ,
symbolPrefix : "Mobile/"
} ,
standard : {
width : 1920 ,
height : 1200 ,
symbolPrefix : "Desktop/"
}
}
} ;각 스토리 북 "Kind"에 대해 하나의 파일을 출력합니다. 대형 구성 요소 라이브러리를 관리하는 경우 유용하여 더 작은 파일을 배포 할 수 있습니다.
module . exports = {
output : "dist" , // Define output directory. File names are defined by "kind"
outputBy : "kind" // Also supports "group", see below.
} ;스케치 레이아웃을 친절하게 렌더링하지만 하나의 파일로 유지합니다.
module . exports = {
layoutBy : "kind" // Also supports "group", see below.
} ; 이 예제는 사용자 정의 그룹을 기반으로 두 파일을 출력합니다 : dist/Buttons.asketch.json 및 dist/Data.asketch.json .
module . exports = {
output : "dist" ,
outputBy : "group" ,
stories : [
{
group : "Buttons" ,
kind : "Buttons/Button" ,
stories : [
{
name : "Button"
}
]
} ,
{
group : "Buttons" ,
kind : "Buttons/ButtonGroup" ,
stories : [
{
name : "Default" ,
displayName : "Horizontal"
} ,
{
name : "Vertical"
}
]
} ,
{
group : "Data" ,
kind : "Table" ,
stories : [
{
name : "Table"
}
]
}
]
} ; story2sketch CI 환경에서 실행되기를 원한다면 story2sketch.config.js 의 PUPPETEER에 다음 구성을 추가해야 할 수도 있습니다.
module . exports = {
puppeteerOptions : {
args : [ '--no-sandbox' , '--disable-setuid-sandbox' ]
} ,
...
} ; 물건이 나빠 보인 경우 아직 html-sketchapp 에서 지원하지 않거나 (여기서 지원 참조) Story2Sketch를 구성해야합니다.
html-sketchapp 대신 react-sketchapp 사용하지 않는 이유는 무엇입니까? react-sketchapp React Native 만 지원하거나 React Native 구성 요소 이름 지정 규칙을 사용하도록 강요합니다. html-sketchapp 우수한 ol 'Fasked HTML을 지원하며 어떤 웹 프레임 워크를 사용하고 있는지 신경 쓰지 않습니다.
아직은 아니지만 여러 가지 및 사용자 정의 어댑터에 대한 지원을 추가 할 계획이 있습니다.
