story2sketch

Story2Sketch?

Convertir historias de libros de cuentos en símbolos de boceto.

Utiliza la increíble html-sketchapp . Solo admite la web.

Inicio rápido

En primer lugar, obtenga boceto y npm. Luego instale asketch2sketch.sketchplugin en boceto:

Instale story2sketch :

npm i story2sketch -g

Ejecute story2sketch , señalando hacia un libro de cuentos Iframe URL. Puede encontrar una URL de iframe existente en el libro de cuentos haciendo clic en 'Abrir lienzo en la nueva pestaña':

Consulte la configuración para obtener más opciones, o si tiene muchas historias.

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

Importe el archivo generado en boceto a través de Plugins > From *Almost* Sketch to Sketch en la barra de menú de boceto.

¡Éxito!

Libro de cuentos 3.x

Si está utilizando el libro de cuentos 3.3 o superior (pero no el libro de cuentos 4 o superior), querrá tomar el control completo de su libro de cuentos webpack.config.js si aún no lo ha hecho, agregando:

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

Exportar manualmente la función getStorybook en su archivo ./config/storybook/config.js :

 import { getStorybook } from "@storybook/react" ;

...

export { getStorybook }

Ejecutar story2sketch:

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

¿Por qué?

Como lo indicó react-sketchapp , es complicado administrar los activos en un sistema de diseño. Muchos equipos que construyen sistemas de diseño o bibliotecas de componentes ya producen archivos de bocetos para distribuir diseños y usar el libro de cuentos para prototipos y presentar los componentes desarrollados. Puede ser difícil mantener los diseños actualizados con los últimos componentes, con diseñadores que se ponen al día. story2sketch genera un archivo de boceto a partir de sus componentes a través del libro de cuentos, por lo que sus diseños de bocetos siempre se mantienen actualizados.

Configuración

Puede configurar story2sketch usando la API a través de la CLI, configurar su package.json o agregar un archivo story2sketch.config.js .

CLI

Simplemente llame story2sketch con opciones de la API.

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

paquete.json

Agregue lo siguiente a su paquete.json:

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

story2sketch.config.js

Cree un archivo llamado story2sketch.config.js en la raíz de su proyecto:

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

API

Parámetro	Explicación	Tipo de entrada	Por defecto
producción	Especifica el nombre de archivo para el archivo asketch.json generado o una carpeta cuando sale === 'Kind'.	cadena	"dist/stories.asketch.json"
aporte	La ubicación de Storybook generó iframe.html. Use esto sobre url si es posible para el rendimiento.	cadena	"dist/iframe.html"
url	Storybook iframe URL. Terminará en iframe.html . Prefiere input para el rendimiento si es posible.	cadena	"http://localhost:9001/iframe.html"
historias	Historias para extraer del libro de cuentos. Probablemente debería anular el valor predeterminado.	objeto/cadena	"all"
concurrencia	Número de pestañas cromadas sin cabeza para funcionar en paralelo. El valor predeterminado es el número de subprocesos disponibles en su máquina.	entero	dinámica
cementerio de símbolos	Canaleta para colocar entre símbolos en boceto.	entero	100
ventas de ventas	Configuración de la vista. Será arreglado de izquierda a derecha por ancho. Intente evitar cambiar la clave, ya que esto se usa para identificar el símbolo.	objeto	Viewport mobile (320px de ancho) y la vista de escritorio (1920px de ancho). Vea el ejemplo a continuación.
queryselector	Selector de consulta para seleccionar su nodo en cada página. Usa document.querySelectorAll .	cadena	"#root"
verboso	Salida de registro detallado.	booleano	false
FIJAPSEUDO	Intente insertar elementos reales en lugar de pseudo-elementos	booleano	false
PuppeteerOptions	Opciones que se pasarán directamente a puppeteer.launch . Vea los documentos de titiriteros para su uso.	objeto	{}
removePreviewMargin	Elimine el margen de vista previa del cuerpo de iframe.	booleano	true
diseño	Símbolos de grupo en la salida del boceto por la tecla "Kind" o "Grupo"	"amable" | "grupo"	nulo
salida	Escriba múltiples archivos de boceto mediante "Kind" o la tecla "Grupo"	"amable" | "grupo"	nulo

Configuraciones de ejemplo

Básico

Detectar automáticamente las historias, generando dos vistas para cada historia en un solo archivo de boceto como símbolos.

 module . exports = {
  output : "dist/great-ui.asketch.json" ,
  input : "dist/iframe.html" , // Same as default
  pageTitle : "great-ui"
} ;

Historias manuales

Definir manualmente las historias para tener control granular sobre qué historias se producen. Esto podría ayudar si está obteniendo una producción vacía, ya que algunas historias pueden romper 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"
        }
      ]
    }
  ]
} ;

Vistas personalizadas

Símbolos de salida basados en vistas personalizadas:

 module . exports = {
  viewports : {
    narrow : {
      width : 320 ,
      height : 1200 ,
      symbolPrefix : "Mobile/"
    } ,
    standard : {
      width : 1920 ,
      height : 1200 ,
      symbolPrefix : "Desktop/"
    }
  }
} ;

Dividir la salida en múltiples archivos basados en el tipo

Emite un archivo para cada libro de cuentos "amable". Útil si se administra bibliotecas de componentes grandes, lo que le permite distribuir archivos más pequeños.

 module . exports = {
  output : "dist" , // Define output directory. File names are defined by "kind"
  outputBy : "kind" // Also supports "group", see below.
} ;

Diseño basado en el tipo

Rendera el diseño del boceto por tipo, pero los mantiene en un archivo.

 module . exports = {
  layoutBy : "kind" // Also supports "group", see below.
} ;

Dividir la salida en múltiples archivos basados en un grupo personalizado

Este ejemplo genera dos archivos basados en una agrupación personalizada: dist/Buttons.asketch.json y 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"
        }
      ]
    }
  ]
} ; 

Integración continua

Si desea que story2sketch se ejecute en un entorno CI, es posible que tenga que agregar la siguiente configuración a Puppeteer en su story2sketch.config.js .

 module . exports = {
  puppeteerOptions : {
    args : [ '--no-sandbox' , '--disable-setuid-sandbox' ]
  } ,
  ...
} ; 

Preguntas

¿Por qué mis cosas se ven mal?

Si sus cosas se ven mal, o no es compatible con html-sketchapp todavía (vea el soporte aquí), o necesita configurar Story2Sketch.

¿Por qué no usas react-sketchapp en lugar de html-sketchapp ?

react-sketchapp solo admite React Native, o te obliga a usar convenciones de nombres de componentes nativos React. html-sketchapp admite un buen HTML de moda, y no le importa qué marco web está utilizando.

¿Puedo usar esto en algo que no sea Storybook?

Todavía no, pero tenemos planes de agregar soporte para adaptadores múltiples y personalizados.