story2sketch
v1.7.1 (2020-11-16)
ストーリーブックのストーリーをスケッチシンボルに変換します。
驚くべき
html-sketchappを使用します。 Webのみをサポートします。
まず、スケッチと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.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 、ストーリーブックを介してコンポーネントからスケッチファイルを生成するため、スケッチデザインは常に最新の状態に保たれます。
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"
} ; | パラメーター | 説明 | 入力タイプ | デフォルト |
|---|---|---|---|
| 出力 | outputby === 'deck'の場合、生成されたasketch.jsonファイルまたはフォルダーのファイル名を指定します。 | 弦 | "dist/stories.asketch.json" |
| 入力 | ストーリーブックの生成されたiframe.htmlの場所。可能であれば、これをurlで使用してください。 | 弦 | "dist/iframe.html" |
| URL | ストーリーブックiframe url。 iframe.htmlで終了します。可能であれば、パフォーマンスのinputを好みます。 | 弦 | "http://localhost:9001/iframe.html" |
| 物語 | ストーリーブックから抽出するストーリー。おそらくデフォルトをオーバーライドする必要があります。 | オブジェクト/文字列 | "all" |
| 並行性 | 並行して実行するヘッドレスクロムタブの数。デフォルトは、マシンで利用可能なスレッドの数になります。 | 整数 | 動的 |
| SymbolGutter | スケッチのシンボルの間に配置する溝。 | 整数 | 100 |
| ビューポート | ビューポート設定。幅で左に配置されます。これはシンボルを識別するために使用されるため、キーを変更しないようにしてください。 | 物体 | モバイルビューポート（幅320倍）およびデスクトップビューポート（幅1920x）。以下の例を参照してください。 |
| QuerySelector | 各ページでノードを選択するクエリセレクター。 document.querySelectorAllを使用します。 | 弦 | "#root" |
| 冗長 | 冗長ロギング出力。 | ブール | false |
| fixpseudo | 擬似要素の代わりに実際の要素を挿入しようとします | ブール | false |
| 操り人形様式 | puppeteer.launchに直接渡されるオプション。使用については、操り人形師のドキュメントを参照してください。 | 物体 | {} |
| removepreviewmargin | iframeボディからプレビューマージンを削除します。 | ブール | true |
| レイアウトビー | 「種類」または「グループ」キーによるスケッチ出力のグループ記号 | 「親切」| "グループ" | ヌル |
| outputby | 「種類」または「グループ」キーで複数のスケッチファイルを書き込む | 「親切」| "グループ" | ヌル |
ストーリーを自動的に検出し、各ストーリーの2つのビューポートをシンボルとして単一のスケッチファイルに出力します。
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/"
}
}
} ;各ストーリーブック「種類」に1つのファイルを出力します。大規模なコンポーネントライブラリを管理し、小さなファイルを配布できる場合に便利です。
module . exports = {
output : "dist" , // Define output directory. File names are defined by "kind"
outputBy : "kind" // Also supports "group", see below.
} ;スケッチレイアウトを種類でレンダリングしますが、1つのファイルに保持します。
module . exports = {
layoutBy : "kind" // Also supports "group", see below.
} ;この例は、カスタムグループ化に基づいて2つのファイルを出力します： 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のPuppetererに次の構成を追加する必要がある場合があります。
module . exports = {
puppeteerOptions : {
args : [ '--no-sandbox' , '--disable-setuid-sandbox' ]
} ,
...
} ; あなたのものが悪く見える場合は、それがまだhtml-sketchappでサポートされていないか（こちらのサポートを参照）、またはStory2Sketchを構成する必要があります。
html-sketchappの代わりにreact-sketchappを使用してみませんか？ react-sketchapp 、Reactネイティブのみをサポートするか、Reactネイティブコンポーネントの命名規則を使用することを強制します。 html-sketchapp 、古き良きFASSIONED HTMLをサポートしており、使用しているWebフレームワークを気にしません。
まだありませんが、複数のカスタムアダプターのサポートを追加する計画があります。
