playroom

---

JSXと独自のコンポーネントライブラリを搭載した、さまざまなテーマと画面サイズに同時に設計されています。

Playroomを使用すると、既存の設計システムドキュメントと一緒に展開できるスタンドアロンバンドルに組み込まれたゼロインストールコード指向の設計環境を作成できます。

• 最終的な媒体のデザインを反復します。

• 実際のコードを使用して、クイックモックアップとインタラクティブなプロトタイプを作成します。

• 設計システムの柔軟性を行使して評価します。

• URLをコピーするだけで、他の人と作業を共有してください。

デモ

ブレードデザインシステム（テーマ）

バンバグ

オーバードライブ

キューブ（テーマ）

メッシュデザインシステム（テーマ）

Místicaデザインシステム（テーマ）

Shopify Polaris

農業設計システム

このリストに載ってみたい場合は、PRを送ってください！

はじめる

$ npmインストール-Save-Dev Playroom

次のスクリプトをpackage.jsonに追加します。

 {"Scripts"：{"playroom：start"： "playroom start"、 "playroom：build"： "playroom build"
  }
}

playroom.config.jsファイルをプロジェクトのルートに追加します。

 module.exports = {
  コンポーネント： './src/components'、
  outputpath： './dist/playroom'、

  //オプション：
  タイトル：「私の素晴らしいライブラリ」、
  テーマ： './src/themes'、
  スニペット： './playroom/snippets.js'、
  framecomponent： './playroom/framecompenton.js'、
  スコープ： './playroom/usescope.js'、
  幅：[320、768、1024]、
  ポート：9000、
  OpenBrowser：本当、
  paramtype：「検索」、//デフォルトは「ハッシュ」です
  ExampleCode： `<button> hello world！    </button> `、
  baseurl： '/playroom/'、
  webpackconfig：（）=>（{//カスタムWebpack設定がここにあります...
  }）、
  iframesAndbox： 'AllowScripts'、
  defaultVisibleWidths：[//幅のサブセットが最初の負荷に表示されます
  ]、、
  DefaultVisiblethemes：[//最初の負荷に表示するテーマのサブセット
  ]、};

注： portとopenBrowserオプションは、上記の構成から省略された場合は、デフォルトでは（それぞれ） 9000に設定されます（ true ）。

componentsファイルは、単一のオブジェクトまたは一連の名前付きエクスポートをエクスポートする予定です。例えば：

 '../text'からのexport {デフォルト}; // '../button'からデフォルトのexportexport {button}を再輸出する; //名前付きエクスポートの再輸出//など...

iframeSandboxオプションを使用して、Playroomのiframeにsandbox属性を設定できます。プレイルームが機能するには、最低限のallow-scriptsが必要です。

プロジェクトが構成されたので、ローカル開発サーバーを開始できます。

 $ npm Run Playroom：開始

生産のために資産を構築するには：

 $ npm Run Playroom：ビルド

スニペット

Playroomを使用すると、コードの事前定義されたスニペットをすばやく挿入し、リストをナビゲートする際にテーマとビューポート間でライブプレビューを提供できます。これらのスニペットは、次のようなsnippetsファイルを介して構成できます。

デフォルトのエクスポート[
  {グループ： 'button'、name： 'strong'、code： `<button weight =" strong "> button </button>`、
  }、
  //など...];

カスタムフレームコンポーネント

コンポーネントをカスタムプロバイダーコンポーネント内にネストする必要がある場合は、コンポーネントをエクスポートするファイルへのパスであるframeComponentオプションを介してカスタムReactコンポーネントファイルを提供できます。たとえば、コンポーネントライブラリに複数のテーマがある場合：

 'ruce'; import {themeprovider}からの 'from' ../path/to/your/theming-system';exportデフォルト関数framecomponent（{theme、children}）{
  return <themeprovider theme = {theme}> {children} </themeprovider>;}

カスタムスコープ

ScopeオブジェクトをエクスポートするファイルへのパスでuseScope scopeを介して、JSXのスコープ内で追加の変数を提供できます。たとえば、コンテキストベースのtheme変数をプレイルームの消費者に公開したい場合：

 '../path/to/your/theming-system';export default function usescope（）'から{usetheme}をインポート
  return {テーマ：usetheme（）、
  };

テーマサポート

コンポーネントライブラリに複数のテーマがある場合、プレイルームをカスタマイズして、 themes構成オプションを介してすべてのテーマを同時にレンダリングできます。

componentsファイルと同様に、 themesファイルは単一のオブジェクトまたは一連の名前付きエクスポートをエクスポートすることが期待されます。例えば：

 './themea';Export {themeb} from' ./themeb'; etc ...からexport {themea}

タイプスクリプトサポート

tsconfig.jsonファイルがプロジェクトに存在する場合、静的プロップタイプはReact-Docgen-Typescriptを使用して解析され、プレイルームエディターでより良いオートコンプリーションを提供します。

デフォルトでは、 node_modulesを除く、現在の作業ディレクトリ内のすべての.tsおよび.tsxファイルが含まれています。

この動作をカスタマイズする必要がある場合は、globsの配列であるplayroom.config.jsでtypeScriptFilesオプションを提供できます。

 module.exports = {
  // ...
  TypeScriptFiles：['src/components/**/*。{ts、tsx}'、 '！**/node_modules']、};

パーサーオプションをカスタマイズする必要がある場合は、 playroom.config.jsでreactDocgenTypescriptConfigオプションを提供できます。

例えば：

 module.exports = {
  // ...
  ReactDocgentypescriptConfig：{propfilter ：（ prop、component）=> {// ...}、
  }、};

ESMサポート

Playroomは、ESM構成ファイルの読み込みをサポートしています。デフォルトでは、Playroomは、 .js 、 .mjs 、または.cjsファイル拡張子のいずれかを備えたPlayroom構成ファイルを探します。

ストーリーブックの統合

Playroomをストーリーブックに統合することに興味がある場合は、Storybook-Addon-Playroomをご覧ください。

ブラウザのサポート

Playroomは、すべての主要なブラウザの最新の安定したバージョンで動作するように構築されています。一部の機能は、古いブラウザでは予想どおりに機能しない場合があります。

ライセンス

mit。