story2sketch

Story2sketch？

將故事書的故事轉換為草圖符號。

使用驚人的html-sketchapp 。僅支持Web。

Quickstart

首先，獲取草圖和NPM。然後將asketch2sketch.sketchplugin安裝到草圖中：

安裝story2sketch ：

npm i story2sketch -g

運行story2sketch ，指向故事書iframe url。您可以通過單擊“新標籤中的打開畫布”中的故事書中的現有iframe URL：

有關更多選項，或者您有很多故事，請參見配置。

story2sketch --url https://localhost:9001/iframe.html --output stories.asketch.json

通過Plugins > From *Almost* Sketch to Sketch 。

成功！

故事書3.x

如果您正在使用Storybook 3.3或更高版本（但不使用Storybook 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 }

Run Story2sketch：

story2sketch --url https://localhost:9001/iframe.html --output stories.asketch.json

為什麼？

正如react-sketchapp所述，管理設計系統中的資產很複雜。許多團隊構建設計系統或組件庫已經生成用於分發設計的草圖文件，並使用故事書來原型並呈現開發的組件。與最新組件保持最新設計可能會變得困難，而設計師曾經玩過。 story2sketch通過Storybook從您的組件中生成草圖文件，因此您的草圖設計始終保持最新狀態。

配置

您可以通過CLI使用API配置story2sketch ，配置package.json或添加story2sketch.config.js文件。

CLI

只需將API選項調用story2sketch即可。

$ story2sketch --stories all --output dist/great-ui.asketch.json

package.json

將以下內容添加到您的軟件包。 JSON：

{
  "story2sketch" : {
    "stories" : " all " ,
    "output" : " dist/great-ui.asketch.json "
  }
}

story2sketch.config.js

在項目的根部創建一個名為story2sketch.config.js的文件：

 module . exports = {
  output : "dist/great-ui.asketch.json" ,
  stories : "all"
} ; 

API

範圍	解釋	輸入類型	預設
輸出	在輸出==='KIND'時指定生成的Asketch.json文件或文件夾的文件名。	細繩	"dist/stories.asketch.json"
輸入	故事書生成的iframe.html的位置。如果可能的話，請在url上使用它。	細繩	"dist/iframe.html"
URL	故事書iframe URL。將以iframe.html結尾。如果可能的話，更喜歡input 。	細繩	"http://localhost:9001/iframe.html"
故事	從故事書中提取的故事。您可能應該覆蓋默認值。	對象/字符串	"all"
並行	無頭的鍍鉻選項卡數量並聯運行。默認為計算機上可用的線程數。	整數	動態的
符號爐	排水溝放在素描中的符號之間。	整數	100
視口	視口配置。將通過寬度從左到右安排。盡量避免更改鍵，因為這用於識別符號。	目的	移動視口（320px寬）和桌面視口（1920px寬）。請參閱下面的示例。
QuerySelector	查詢選擇器在每個頁面上選擇您的節點。使用document.querySelectorAll 。	細繩	"#root"
冗長	冗長的記錄輸出。	布爾	false
fixpseudo	嘗試插入真實元素代替偽元素	布爾	false
PuppeteRoptions	可以直接傳遞給puppeteer.launch選項。請參閱uppeteer文檔以獲取用法。	目的	{}
REMOVE PREVIEWMARGIN	從iframe主體中刪除預覽保證金。	布爾	true
佈局	草圖輸出中的組符號由“類型”或“組”鍵	“親戚” | “團體”	無效的
輸出	通過“ ank”或“組”密鑰編寫多個草圖文件	“親戚” | “團體”	無效的

示例配置

基本的

自動檢測故事，在單個草圖文件中以符號為每個故事輸出兩個視口。

 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/"
    }
  }
} ;

根據類型將輸出分為多個文件

為每個故事書輸出一個文件“類型”。如果管理大型組件庫，則可以分發較小的文件。

 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 and 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。

您為什麼不使用react-sketchapp代替html-sketchapp ？

react-sketchapp僅支持React Antial，或者迫使您使用React Native組件命名約定。 html-sketchapp支持良好的時裝html，並且不在乎您使用的是哪種網絡框架。

我可以在故事書以外的任何東西上使用它嗎？

還沒有，但是我們計劃增加對多個和自定義適配器的支持。