story2sketch
v1.7.1 (2020-11-16)
Konvertieren Sie Geschichten von Storybook -Geschichten in Skizzensymbole.
Verwendet die erstaunliche
html-sketchapp. Unterstützt nur Web.
Holen Sie sich zunächst Sketch und NPM. Installieren Sie dann asketch2sketch.sketchplugin in Sketch:
Installieren Sie story2sketch :
npm i story2sketch -g Führen Sie story2sketch aus und zeigen auf ein Storybook Iframe -URL. Sie finden eine vorhandene Iframe -URL in Storybook, indem Sie auf "Öffnen Sie Leinwand in neuer Registerkarte" öffnen:
Weitere Optionen finden Sie in der Konfiguration oder wenn Sie viele Geschichten haben.
story2sketch --url https://localhost:9001/iframe.html --output stories.asketch.json Importieren Sie die generierte Datei in Skizze über Plugins > From *Almost* Sketch to Sketch in Sketch -Menüleiste.
Erfolg!
Wenn Sie das Storybook 3.3 oder höher (jedoch nicht das Storybook 4 oder höher) verwenden, möchten Sie die vollständige Kontrolle über Ihr Storybook WebPack.config.js übernehmen, wenn Sie dies noch nicht getan haben, und fügen Sie hinzu:
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 ;
} ; Exportieren Sie manuell die Funktion getStorybook in Ihrer Datei ./config/storybook/config.js :
import { getStorybook } from "@storybook/react" ;
...
export { getStorybook }Run Story2Sketch:
story2sketch --url https://localhost:9001/iframe.html --output stories.asketch.json Wie von react-sketchapp angegeben, ist es kompliziert, Vermögenswerte in einem Designsystem zu verwalten. Viele Teams erstellen Designsysteme oder Komponentenbibliotheken bereits für Skizzendateien zum Vertrieb von Designs und verwenden das Storybook, um Prototypen und präsentieren die entwickelten Komponenten. Es kann schwierig werden, die Designs mit den neuesten Komponenten auf dem neuesten Stand zu halten, wobei Designer jemals einholt werden. story2sketch generiert eine Skizzendatei von Ihren Komponenten über ein Storybook, sodass Ihre Sketch -Designs immer auf dem neuesten Stand sind.
Sie können story2sketch mithilfe der API über die CLI konfigurieren, Ihr package.json konfigurieren oder eine story2sketch.config.js -Datei hinzufügen.
Rufen Sie einfach story2sketch mit Optionen aus der API an.
$ story2sketch --stories all --output dist/great-ui.asketch.jsonFügen Sie Ihrem Paket Folgendes hinzu. Json:
{
"story2sketch" : {
"stories" : " all " ,
"output" : " dist/great-ui.asketch.json "
}
} Erstellen Sie eine Datei namens story2sketch.config.js auf der Stammin Ihres Projekts:
module . exports = {
output : "dist/great-ui.asketch.json" ,
stories : "all"
} ; | Parameter | Erläuterung | Eingabetyp | Standard |
|---|---|---|---|
| Ausgabe | Gibt den Dateinamen für die generierte Asketch.json -Datei oder einen Ordner an, wenn Ausgabe von === 'Art'. | Saite | "dist/stories.asketch.json" |
| Eingang | Der Ort des erzeugten Iframe.html von Storybook. Verwenden Sie dies, wenn möglich über url für die Leistung. | Saite | "dist/iframe.html" |
| URL | Storybook Iframe URL. Endet in iframe.html . Bevorzugen Sie nach Möglichkeit input für Leistung. | Saite | "http://localhost:9001/iframe.html" |
| Geschichten | Geschichten aus dem Storybook zu extrahieren. Sie sollten wahrscheinlich den Standardschreiber überschreiben. | Objekt/Zeichenfolge | "all" |
| Parallelität | Anzahl der kopflosen Chrom -Registerkarten, die parallel ausgeführt werden sollen. Standardmäßig auf die Anzahl der auf Ihrem Computer verfügbaren Threads. | ganze Zahl | dynamisch |
| Symbolgutter | Dachrinne zwischen Symbolen in die Skizze zu platzieren. | ganze Zahl | 100 |
| Ansichtsfenster | Ansichtsfensterkonfiguration. Wird von der Breite von links nach rechts angeordnet. Versuchen Sie, den Schlüssel zu ändern, da dies verwendet wird, um das Symbol zu identifizieren. | Objekt | Mobile Ansichtsfenster (320px breit) und Desktop -Ansichtsfenster (1920px breit). Siehe Beispiel unten. |
| QuerySelector | Abfragenauswahl, um Ihren Knoten auf jeder Seite auszuwählen. Verwendet document.querySelectorAll . | Saite | "#root" |
| ausführlich | Ausführliche Protokollierungsausgabe. | boolean | false |
| Fixpseudo | Versuchen Sie, echte Elemente anstelle von Pseudoelementen einzufügen | boolean | false |
| Puppenspieler | Optionen, die direkt an puppeteer.launch übergeben werden sollen. Siehe Puppenspieler -Dokumente für die Verwendung. | Objekt | {} |
| removePreviewmargin | Entfernen Sie den Vorschau -Rand aus dem Iframe -Körper. | boolean | true |
| Layoutby | Gruppensymbole in der Skizzenausgabe von der Schlüssel- oder Gruppenschlüssel "Art" oder "Gruppen" | "Art" | "Gruppe" | NULL |
| outputby | Schreiben Sie mehrere Skizzendateien mit "Art" oder "Gruppen" -Taste | "Art" | "Gruppe" | NULL |
Erkennen Sie die Geschichten automatisch und geben Sie zwei Ansichtsfenster für jede Geschichte in einer einzelnen Skizzendatei als Symbole aus.
module . exports = {
output : "dist/great-ui.asketch.json" ,
input : "dist/iframe.html" , // Same as default
pageTitle : "great-ui"
} ;Definieren Sie die Geschichten manuell, um eine körnige Kontrolle darüber zu haben, welche Geschichten ausgeben. Dies kann helfen, wenn Sie leere Ausgaben erhalten, da einige Geschichten Story2Sketch brechen können.
module . exports = {
stories : [
{
kind : "Buttons/Button" ,
stories : [
{
name : "Button"
}
]
} ,
{
kind : "Buttons/ButtonGroup" ,
stories : [
{
name : "Default" ,
displayName : "Horizontal"
} ,
{
name : "Vertical"
}
]
} ,
{
kind : "Table" ,
stories : [
{
name : "Table"
}
]
}
]
} ;Ausgabesymbole basierend auf benutzerdefinierten Ansichtsfenster:
module . exports = {
viewports : {
narrow : {
width : 320 ,
height : 1200 ,
symbolPrefix : "Mobile/"
} ,
standard : {
width : 1920 ,
height : 1200 ,
symbolPrefix : "Desktop/"
}
}
} ;Gibt eine Datei für jedes Storybook "Art" aus. Nützlich, wenn Sie große Komponentenbibliotheken verwalten, sodass Sie kleinere Dateien verteilen können.
module . exports = {
output : "dist" , // Define output directory. File names are defined by "kind"
outputBy : "kind" // Also supports "group", see below.
} ;Rendert das Skizzenlayout für Art, hält sie aber in einer Datei.
module . exports = {
layoutBy : "kind" // Also supports "group", see below.
} ; In diesem Beispiel wird zwei Dateien basierend auf einer benutzerdefinierten Gruppierung ausgegeben: dist/Buttons.asketch.json und 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"
}
]
}
]
} ; Wenn Sie möchten, dass story2sketch in einer CI -Umgebung ausgeführt wird, müssen Sie möglicherweise die folgende Konfiguration zu Puppeteer in Ihrem story2sketch.config.js hinzufügen.
module . exports = {
puppeteerOptions : {
args : [ '--no-sandbox' , '--disable-setuid-sandbox' ]
} ,
...
} ; Wenn Ihr Zeug schlecht aussieht, wird es entweder nicht von html-sketchapp unterstützt (siehe Unterstützung hier) oder Sie müssen Story2Sketch konfigurieren.
react-sketchapp nicht anstelle von html-sketchapp ? react-sketchapp unterstützt nur React Native oder zwingt Sie, Konventionen mit React Native-Komponenten zu verwenden. html-sketchapp unterstützt gute alte HTML und ist es egal, welches Web-Framework Sie verwenden.
Noch nicht, aber wir haben Pläne, Unterstützung für mehrere und benutzerdefinierte Adapter hinzuzufügen.
