story2sketch

story2sketch?

Converta histórias de livros de histórias em símbolos de esboço.

Usa o incrível html-sketchapp . Somente suporta web.

Investir rápido

Em primeiro lugar, obtenha esboço e npm. Em seguida, instale asketch2sketch.sketchplugin no esboço:

Instale story2sketch :

npm i story2sketch -g

Run story2sketch , apontando para um URL do livro de histórias. Você pode encontrar um URL do iframe existente no Storybook clicando em 'Open Canvas in New Tab':

Consulte a configuração para obter mais opções ou se você tiver muitas histórias.

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

Importe o arquivo gerado para o esboço via Plugins > From *Almost* Sketch to Sketch na barra de menus de esboço.

Sucesso!

Storybook 3.x

Se você estiver usando o Storybook 3.3 ou superior (mas não o StoryBook 4 ou acima), você deve assumir o controle total do seu storybook webpack.config.js, se ainda não o fez, acrescentando:

 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 a função getStorybook em seu arquivo ./config/storybook/config.js :

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

...

export { getStorybook }

Run Story2Sketch:

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

Por que?

Conforme declarado pelo react-sketchapp , é complicado gerenciar ativos em um sistema de design. Muitas equipes construem sistemas de design ou bibliotecas de componentes já produzem arquivos de esboço para distribuir designs e usar o Storybook para protótipo e apresentar os componentes desenvolvidos. Pode se tornar difícil manter os designs atualizados com os componentes mais recentes, com os designers já jogando apanhação. story2sketch gera um arquivo de esboço de seus componentes via livro de histórias, para que seus designs de esboço sempre fiquem atualizados.

Configuração

Você pode configurar story2sketch usando a API via CLI, configurando seu package.json ou adicionando um arquivo story2sketch.config.js .

CLI

Basta chamar story2sketch com opções da API.

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

package.json

Adicione o seguinte ao seu package.json:

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

story2sketch.config.js

Crie um arquivo chamado story2sketch.config.js na raiz do seu projeto:

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

API

Parâmetro	Explicação	Tipo de entrada	Padrão
saída	Especifica o nome do arquivo para o arquivo Gerado Asketch.json ou uma pasta quando outputby === 'Kind'.	corda	"dist/stories.asketch.json"
entrada	A localização do Iframe.html gerado pelo livro de histórias. Use isso no url , se possível, para desempenho.	corda	"dist/iframe.html"
url	Livro de histórias iframe url. Terminará em iframe.html . Prefira input para o desempenho, se possível.	corda	"http://localhost:9001/iframe.html"
histórias	Histórias para extrair do livro de histórias. Você provavelmente deve substituir o padrão.	objeto/string	"all"
simultaneidade	Número de guias Chrome sem cabeça para executar em paralelo. Padrões para o número de threads disponíveis em sua máquina.	Inteiro	dinâmico
Symbolgutter	Calha para colocar entre símbolos no esboço.	Inteiro	100
viewports	Configuração da viewport. Será organizado da esquerda para a direita por largura. Tente evitar alterar a chave, pois isso é usado para identificar o símbolo.	objeto	Viewport móvel (320px de largura) e viewport de desktop (1920px de largura). Veja o exemplo abaixo.
QuerySelector	Seletor de consulta para selecionar seu nó em cada página. Usa document.querySelectorAll .	corda	"#root"
detalhado	Saída de log verbosa.	booleano	false
FixPseudo	Tente inserir elementos reais no lugar de pseudo-elementos	booleano	false
Pupleoptions	Opções a serem passadas diretamente para puppeteer.launch . Consulte Docs de marionetistas para uso.	objeto	{}
RemoverPreviewMargin	Remova a margem de visualização do corpo do iframe.	booleano	true
layoutby	Símbolos de grupo na saída do esboço pela chave "tipo" ou "grupo"	"Kind" | "grupo"	nulo
outputby	Escreva vários arquivos de esboço por "Kind" ou a tecla "Grupo"	"Kind" | "grupo"	nulo

Exemplo de configurações

Básico

Detecte automaticamente as histórias, produzindo duas viewports para cada história em um único arquivo de esboço como símbolos.

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

Histórias manuais

Defina manualmente histórias para ter controle granular sobre quais histórias são produzidas. Isso pode ajudar se você estiver obtendo saída vazia, pois algumas histórias podem quebrar o 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"
        }
      ]
    }
  ]
} ;

Viewports personalizados

Símbolos de saída com base em viewports personalizadas:

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

Divisão de saída em vários arquivos com base em tipo

Produz um arquivo para cada livro de histórias "Kind". Útil se gerenciar bibliotecas de grandes componentes, permitindo que você distribua arquivos menores.

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

Layout baseado em tipo

Renderiza o layout do esboço por tipo, mas os mantém em um arquivo.

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

Saída dividida em vários arquivos com base em grupo personalizado

Este exemplo gera dois arquivos com base em um agrupamento personalizado: dist/Buttons.asketch.json e 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"
        }
      ]
    }
  ]
} ; 

Integração contínua

Se você deseja que story2sketch seja executado em um ambiente de IC, talvez seja necessário adicionar a seguinte configuração ao boneco em seu story2sketch.config.js .

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

Questões

Por que minhas coisas parecem ruins?

Se as suas coisas parecerem ruins, ainda não é suportado pelo html-sketchapp (veja o suporte aqui) ou você precisa configurar o Story2Sketch.

Por que você não usa react-sketchapp em vez do html-sketchapp ?

react-sketchapp suporta apenas o React Native, ou obriga você a usar convenções de nomeação de componentes nativos do React. html-sketchapp suporta o bom e velho html e não se importa com qual estrutura da web que você está usando.

Posso usar isso em algo além do livro de histórias?

Ainda não, mas temos planos de adicionar suporte para adaptadores múltiplos e personalizados.