Unduh story2sketch - story2sketch Sumber Code Unduh

story2sketch

Komponen pihak ketiga

v1.7.1 (2020-11-16)

Unduh

Story2sketch?

Konversi cerita buku cerita menjadi simbol sketsa.

Menggunakan html-sketchapp yang luar biasa. Hanya mendukung web.

QuickStart

Pertama, dapatkan sketsa dan NPM. Kemudian instal asketch2sketch.sketchplugin ke dalam sketsa:

Instal story2sketch :

npm i story2sketch -g

Jalankan story2sketch , menunjuk ke arah buku cerita iframe URL. Anda dapat menemukan URL iframe yang ada di Storybook dengan mengklik 'Buka Kanvas di Tab Baru':

Lihat Konfigurasi untuk lebih banyak opsi, atau jika Anda memiliki banyak cerita.

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

Impor file yang dihasilkan ke sketsa melalui Plugins > From *Almost* Sketch to Sketch di bilah menu sketsa.

Kesuksesan!

Buku cerita 3.x

Jika Anda menggunakan Storybook 3.3 atau di atas (tetapi bukan buku cerita 4 atau lebih), Anda ingin mengambil kendali penuh atas buku web Storybook Anda.config.js jika Anda belum melakukannya, menambahkan:

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

Ekspor secara manual fungsi getStorybook di file Anda ./config/storybook/config.js :

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

...

export { getStorybook }

Jalankan Story2Sketch:

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

Mengapa?

Seperti yang dinyatakan oleh react-sketchapp , rumit untuk mengelola aset dalam sistem desain. Banyak tim membangun sistem desain atau pustaka komponen sudah menghasilkan file sketsa untuk mendistribusikan desain dan menggunakan buku cerita untuk prototipe dan menyajikan komponen yang dikembangkan. Bisa menjadi sulit untuk menjaga desain tetap up to date dengan komponen terbaru, dengan desainer yang pernah bermain mengejar. story2sketch menghasilkan file sketsa dari komponen Anda melalui buku cerita, jadi desain sketsa Anda selalu tetap up to date.

Konfigurasi

Anda dapat mengonfigurasi story2sketch menggunakan API melalui CLI, mengkonfigurasi package.json Anda atau menambahkan file story2sketch.config.js .

Cli

Cukup hubungi story2sketch dengan opsi dari API.

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

package.json

Tambahkan yang berikut ini ke paket Anda.json:

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

Story2sketch.config.js

Buat file yang disebut story2sketch.config.js pada akar proyek Anda:

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

API

Parameter	Penjelasan	Tipe input	Bawaan
keluaran	Menentukan nama file untuk file asketch.json yang dihasilkan atau folder saat outputby === 'jenis'.	rangkaian	`"dist/stories.asketch.json"`
masukan	Lokasi buku cerita yang dihasilkan iframe.html. Gunakan `url` melalui ini jika memungkinkan untuk kinerja.	rangkaian	`"dist/iframe.html"`
url	Buku cerita iframe URL. Akan berakhir di `iframe.html` . Lebih suka `input` untuk kinerja jika memungkinkan.	rangkaian	`"http://localhost:9001/iframe.html"`
cerita	Cerita untuk diekstraksi dari Storybook. Anda mungkin harus mengganti default.	objek/string	`"all"`
konkurensi	Jumlah tab krom tanpa kepala untuk dijalankan secara paralel. Default ke jumlah utas yang tersedia di mesin Anda.	bilangan bulat	dinamis
simbolgutter	Gutter untuk menempatkan di antara simbol dalam sketsa.	bilangan bulat	`100`
viewports	Konfigurasi Viewport. Akan diatur kiri-ke-kanan dengan lebar. Cobalah untuk menghindari mengubah kunci, karena ini digunakan untuk mengidentifikasi simbol.	obyek	Mobile Viewport (lebar 320px) dan desktop viewport (lebar 1920px). Lihat contoh di bawah ini.
QuerySelector	Pemilih kueri untuk memilih simpul Anda di setiap halaman. Menggunakan `document.querySelectorAll` .	rangkaian	`"#root"`
verbose	Output logging verbose.	Boolean	`false`
fixpseudo	Mencoba memasukkan elemen nyata sebagai pengganti elemen semu	Boolean	`false`
Puppeteeroptions	Opsi untuk diteruskan langsung ke `puppeteer.launch` . Lihat Dokumen Puppeteer untuk digunakan.	obyek	`{}`
RemovePreviewMargin	Hapus margin pratinjau dari badan iframe.	Boolean	`true`
tata letak	Simbol grup dalam output sketsa oleh kunci "jenis" atau "grup"	"Baik" \| "kelompok"	batal
outputby	Tulis beberapa file sketsa dengan "Kind" atau kunci "grup"	"Baik" \| "kelompok"	batal

Contoh konfigurasi

Dasar

Secara otomatis mendeteksi cerita, mengeluarkan dua viewport untuk setiap cerita dalam satu file sketsa sebagai simbol.

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

Cerita manual

Definisikan cerita secara manual untuk memiliki kontrol granular atas cerita apa yang dihasilkan. Ini mungkin membantu jika Anda mendapatkan output kosong, karena beberapa cerita mungkin memecahkan 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 khusus

Simbol output berdasarkan viewport kustom:

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

Membagi output menjadi beberapa file berdasarkan jenis

Mengeluarkan satu file untuk setiap buku cerita "Kind". Berguna jika mengelola pustaka komponen besar, memungkinkan Anda untuk mendistribusikan file yang lebih kecil.

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

Tata letak berdasarkan jenis

Merender tata letak sketsa berdasarkan jenis, tetapi menyimpannya dalam satu file.

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

Pisahkan output menjadi beberapa file berdasarkan grup khusus

Contoh ini menghasilkan dua file berdasarkan pengelompokan khusus: dist/Buttons.asketch.json dan 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"
        }
      ]
    }
  ]
} ;

Integrasi berkelanjutan

Jika Anda ingin story2sketch berjalan di lingkungan CI, Anda mungkin harus menambahkan konfigurasi berikut ke dalang di story2sketch.config.js Anda.

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

Pertanyaan

Mengapa barang saya terlihat buruk?

Jika barang Anda terlihat buruk, entah itu belum didukung oleh html-sketchapp (lihat dukungan di sini), atau Anda perlu mengkonfigurasi Story2Sketch.

Mengapa Anda tidak menggunakan `react-sketchapp` alih-alih `html-sketchapp` ?

react-sketchapp hanya mendukung React Native, atau memaksa Anda untuk menggunakan konvensi penamaan komponen asli React. html-sketchapp mendukung HTML yang bagus, dan tidak peduli kerangka kerja web apa yang Anda gunakan.