playroom

---

Desain secara bersamaan di berbagai tema dan ukuran layar, ditenagai oleh JSX dan perpustakaan komponen Anda sendiri.

Ruang bermain memungkinkan Anda untuk membuat lingkungan desain yang berorientasi kode nol-instal, dibangun menjadi bundel mandiri yang dapat digunakan di samping dokumentasi sistem desain Anda yang ada.

• Iterasi pada desain Anda di media terakhir.

• Buat mock-up cepat dan prototipe interaktif dengan kode nyata.

• Latihan dan evaluasi fleksibilitas sistem desain Anda.

• Bagikan pekerjaan Anda dengan orang lain dengan hanya menyalin URL.

Demo

Sistem Desain Braid (bertema)

Bumbag

Alat penambah kecepatan

Kubus (bertema)

Sistem desain jala (bertema)

Sistem Desain Mística (bertema)

Shopify Polaris

Sistem Desain Pertanian

Kirimkan PR kami jika Anda ingin berada di daftar ini!

Memulai

 $ NPM Instal-ruang bermain dev-dev

Tambahkan skrip berikut ke package.json Anda.json:

 {"Scripts": {"ruang bermain: start": "ruang bermain start", "ruang bermain: build": "ruang bermain build"
  }
}

Tambahkan file playroom.config.js ke akar proyek Anda:

 module.exports = {
  Komponen: './src/Components',
  outputpath: './dist/playroom',

  // Opsional:
  Judul: 'My Awesome Library',
  Tema: './src/themes',
  Cuplikan: './playroom/snippets.js',
  Framecomponent: './playroom/framecomponent.js',
  Lingkup: './playroom/usescope.js',
  Lebar: [320, 768, 1024],
  Port: 9000,
  OpenBrowser: Benar,
  ParamType: 'Search', // default adalah 'hash'
  ExampleCode: `<button> halo dunia!    </button> `,
  Baseurl: '/ruang bermain/',
  WebPackConfig: () => ({// konfigurasi webpack khusus ada di sini ...
  }),
  IFRAMESANDBOX: 'Izin-scripts',
  DefaultVisibleWidths: [// Subset lebar untuk ditampilkan pada beban pertama
  ],
  DefaultVisibethemes: [// Subset tema untuk ditampilkan pada beban pertama
  ],};

Catatan: Opsi port dan openBrowser akan diatur ke 9000 dan true (masing -masing) secara default setiap kali mereka dihilangkan dari konfigurasi di atas.

File components Anda diharapkan untuk mengekspor satu objek atau serangkaian ekspor bernama. Misalnya:

 ekspor {default sebagai teks} dari '../text'; // mengekspor kembali ekspor default {tombol} dari '../button'; // mengekspor kembali ekspor bernama // dll ...

Opsi iframeSandbox dapat digunakan untuk mengatur atribut sandbox di iframe ruang bermain. Diperlukan minimal allow-scripts agar ruang bermain berfungsi.

Sekarang proyek Anda dikonfigurasi, Anda dapat memulai server pengembangan lokal:

 $ NPM Run Playroom: Mulai

Untuk membangun aset Anda untuk produksi:

 $ npm run playroom: build

Cuplikan

Ruang bermain memungkinkan Anda untuk dengan cepat memasukkan cuplikan kode yang telah ditentukan, memberikan pratinjau langsung di seluruh tema dan viewport saat Anda menavigasi daftar. Cuplikan ini dapat dikonfigurasi melalui file snippets yang terlihat seperti ini:

 ekspor default [
  {group: 'tombol', nama: 'kuat', kode: `<tombol bobot =" kuat "> tombol </aton>`,
  },
  // dll...];

Komponen bingkai khusus

Jika komponen Anda perlu bersarang di dalam komponen penyedia khusus, Anda dapat memberikan file komponen reaksi khusus melalui opsi frameComponent , yang merupakan jalur ke file yang mengekspor komponen. Misalnya, jika pustaka komponen Anda memiliki banyak tema:

 impor bereaksi dari 'react'; import {themeProvider} dari '../path/to/your/theming-system'; export fungsi default frameComponent ({tema, anak-anak}) {
  return <themeProvider tema = {tema}> {anak -anak} </themeprovider>;}

Ruang lingkup khusus

Anda dapat memberikan variabel tambahan dalam ruang lingkup JSX Anda melalui opsi scope , yang merupakan jalur ke file yang mengekspor kait useScope yang mengembalikan objek lingkup. Misalnya, jika Anda ingin mengekspos variabel theme berbasis konteks kepada konsumen ruang bermain Anda:

 Impor {usetheme} dari '../path/to/your/theming-system'; export fungsi default usescope () {
  return {tema: useTheme (),
  };

Dukungan tema

Jika perpustakaan komponen Anda memiliki banyak tema, Anda dapat menyesuaikan ruang bermain untuk membuat setiap tema secara bersamaan melalui opsi konfigurasi themes .

Mirip dengan file components Anda, file themes Anda diharapkan untuk mengekspor satu objek atau serangkaian ekspor bernama. Misalnya:

 Ekspor {Themea} dari './themea';Export {haph} dari' ./themeb';// dll ...

Dukungan naskah

Jika file tsconfig.json hadir dalam proyek Anda, tipe prop statis diuraikan menggunakan react-docgen-typescript untuk memberikan pelengkapan autokel yang lebih baik di editor ruang bermain.

Secara default, semua file .ts dan .tsx di direktori kerja saat ini disertakan, tidak termasuk node_modules .

Jika Anda perlu menyesuaikan perilaku ini, Anda dapat memberikan opsi typeScriptFiles di playroom.config.js , yang merupakan array Globs.

 module.exports = {
  // ...
  TypeScripSFiles: ['src/komponen/**/*. {ts, tsx}', '! **/node_modules'],};

Jika Anda perlu menyesuaikan opsi parser, Anda dapat memberikan opsi reactDocgenTypescriptConfig di playroom.config.js .

Misalnya:

 module.exports = {
  // ...
  ReactDocgentypescriptConfig: {propfilter: (prop, component) => {// ...},
  },};

Dukungan ESM

Playroom mendukung memuat file konfigurasi ESM. Secara default, ruang bermain akan mencari file konfigurasi ruang bermain dengan ekstensi file .js , .mjs atau .cjs .

Integrasi buku cerita

Jika Anda tertarik untuk mengintegrasikan ruang bermain ke dalam buku cerita, lihat Storybook-Addon-Playroom.

Dukungan Browser

Ruang bermain dibangun untuk mengerjakan versi stabil terbaru dari semua browser utama. Beberapa fitur mungkin tidak berfungsi seperti yang diharapkan di browser yang lebih tua.

Lisensi

Mit.