story2sketch
v1.7.1 (2020-11-16)
Convertissez les histoires du livre de contes en symboles de croquis.
Utilise l'incroyable
html-sketchapp. Prend en charge uniquement le Web.
Premièrement, obtenez Sketch et NPM. Installez ensuite asketch2sketch.sketchplugin dans Sketch:
Installer story2sketch :
npm i story2sketch -g Exécutez story2sketch , pointant vers un livre de contes Iframe URL. Vous pouvez trouver une URL IFRAME existante dans le livre de contes en cliquant sur «Ouvrir la toile dans un nouvel onglet»:
Voir la configuration pour plus d'options ou si vous avez beaucoup d'histoires.
story2sketch --url https://localhost:9001/iframe.html --output stories.asketch.json Importez le fichier généré dans Sketch via Plugins > From *Almost* Sketch to Sketch dans la barre de menu Sketch.
Succès!
Si vous utilisez StoryBook 3.3 ou supérieur (mais pas le livre de contes 4 ou plus), vous voudrez prendre le contrôle total de votre livre de contes webpack.config.js si vous ne l'avez pas déjà fait, ajoutant:
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 ;
} ; Exportez manuellement la fonction getStorybook dans votre fichier ./config/storybook/config.js :
import { getStorybook } from "@storybook/react" ;
...
export { getStorybook }Run Story2Sketch:
story2sketch --url https://localhost:9001/iframe.html --output stories.asketch.json Comme indiqué par react-sketchapp , il est compliqué de gérer les actifs dans un système de conception. De nombreuses équipes construisant des systèmes de conception ou des bibliothèques de composants produisent déjà des fichiers de croquis pour la distribution de conceptions et utilisent un livre de contes pour prototyper et présenter les composants développés. Il peut devenir difficile de garder les dessins à jour avec les derniers composants, avec des concepteurs qui jouent jamais de rattrapage. story2sketch génère un fichier de croquis à partir de vos composants via le livre de contes, donc vos conceptions de croquis restent toujours à jour.
Vous pouvez configurer story2sketch à l'aide de l'API via le CLI, configurer votre package.json ou ajouter un fichier story2sketch.config.js .
Appelez simplement story2sketch avec des options de l'API.
$ story2sketch --stories all --output dist/great-ui.asketch.jsonAjoutez ce qui suit à votre package.json:
{
"story2sketch" : {
"stories" : " all " ,
"output" : " dist/great-ui.asketch.json "
}
} Créez un fichier appelé story2sketch.config.js sur la racine de votre projet:
module . exports = {
output : "dist/great-ui.asketch.json" ,
stories : "all"
} ; | Paramètre | Explication | Type d'entrée | Défaut |
|---|---|---|---|
| sortir | Spécifie le nom de fichier pour le fichier Asketch.json généré ou un dossier lorsque OutputBy === 'KIND'. | chaîne | "dist/stories.asketch.json" |
| saisir | L'emplacement de Iframe généré par Storybook.html. Utilisez-le sur url si possible pour les performances. | chaîne | "dist/iframe.html" |
| URL | URL Iframe du livre de contes. Se terminera par iframe.html . Préférez input pour les performances si possible. | chaîne | "http://localhost:9001/iframe.html" |
| histoires | Histoires à extraire du livre de contes. Vous devriez probablement remplacer la valeur par défaut. | objet / chaîne | "all" |
| concurrence | Nombre d'onglets chromés sans tête à fonctionner en parallèle. Par défaut, le nombre de threads disponibles sur votre machine. | entier | dynamique |
| symbole | Gouttière pour placer entre les symboles en croquis. | entier | 100 |
| fenêtres | Configuration de la fenêtre. Sera organisé de gauche à droite par largeur. Essayez d'éviter de changer la clé, car cela est utilisé pour identifier le symbole. | objet | Version mobile (320px de large) et fenêtre de bureau (1920px de large). Voir l'exemple ci-dessous. |
| querysecteur | Recherchez le sélecteur pour sélectionner votre nœud sur chaque page. Utilise document.querySelectorAll . | chaîne | "#root" |
| verbeux | Sortie de journalisation verbeuse. | booléen | false |
| fixpseudo | Tenter d'insérer de vrais éléments à la place des pseudo-éléments | booléen | false |
| Puppeteerroptions | Options à transmettre directement à puppeteer.launch . Voir les documents de marionnettiste pour une utilisation. | objet | {} |
| Supprimepreviewmargin | Supprimez la marge d'aperçu du corps IFRAME. | booléen | true |
| disposition | Symboles de groupe dans la sortie de l'esquisse par la clé "Kind" ou "Group" | "Kind" | "groupe" | nul |
| sortie | Écrivez plusieurs fichiers de croquis par "Kind" ou la clé "groupe" | "Kind" | "groupe" | nul |
Détectez automatiquement les histoires, en diffusant deux fenêtres pour chaque histoire dans un seul fichier de croquis comme symboles.
module . exports = {
output : "dist/great-ui.asketch.json" ,
input : "dist/iframe.html" , // Same as default
pageTitle : "great-ui"
} ;Définissez manuellement les histoires pour avoir un contrôle granulaire sur les histoires de sortie. Cela pourrait aider si vous obtenez une sortie vide, car certaines histoires peuvent casser 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"
}
]
}
]
} ;Symboles de sortie basés sur des fenêtres personnalisées:
module . exports = {
viewports : {
narrow : {
width : 320 ,
height : 1200 ,
symbolPrefix : "Mobile/"
} ,
standard : {
width : 1920 ,
height : 1200 ,
symbolPrefix : "Desktop/"
}
}
} ;Sorte un fichier pour chaque livre de contes "Kind". Utile si la gestion de grandes bibliothèques de composants, vous permettant de distribuer des fichiers plus petits.
module . exports = {
output : "dist" , // Define output directory. File names are defined by "kind"
outputBy : "kind" // Also supports "group", see below.
} ;Rend la mise en page du croquis par nature, mais les garde dans un seul fichier.
module . exports = {
layoutBy : "kind" // Also supports "group", see below.
} ; Cet exemple sorti de deux fichiers basés sur un regroupement personnalisé: dist/Buttons.asketch.json et 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"
}
]
}
]
} ; Si vous voulez que story2sketch s'exécute dans un environnement CI, vous devrez peut-être ajouter la configuration suivante à Puppeteer dans votre story2sketch.config.js .
module . exports = {
puppeteerOptions : {
args : [ '--no-sandbox' , '--disable-setuid-sandbox' ]
} ,
...
} ; Si vos trucs ont l'air mauvais, soit il n'est pas encore pris en charge par html-sketchapp (voir le support ici), soit vous devez configurer Story2Sketch.
react-sketchapp au lieu de html-sketchapp ? react-sketchapp ne prend en charge que React Native ou vous oblige à utiliser les conventions de dénomination des composants natifs React. html-sketchapp prend en charge le bon HTML à la mode et ne se soucie pas du cadre Web que vous utilisez.
Pas encore, mais nous avons l'intention d'ajouter la prise en charge des adaptateurs multiples et personnalisés.
