playroom

---

同時設計由JSX和您自己的組件庫提供支持的各種主題和屏幕尺寸。

Playroom允許您創建一個零安裝的面向代碼的設計環境，該環境內置在獨立捆綁包中，可以與現有的設計系統文檔一起部署。

• 在最終媒介中迭代您的設計。

• 使用真實代碼創建快速模型和交互式原型。

• 鍛煉並評估設計系統的靈活性。

• 通過簡單地複制URL，與他人分享您的工作。

演示

編織設計系統（主題）

Bumbag

超速驅動

立方體（主題）

網格設計系統（主題）

Mística設計系統（主題）

Shopify Polaris

農業設計系統

如果您想在此列表中，請給我們發送公關！

入門

$ npm安裝-Save-dev遊戲室

將以下腳本添加到您的package.json ：

 {“腳本”：{“ playroom：start”：“ Playroom Start”，“ Playroom：build”：“ Playroom Build”
  }
}

將playroom.config.js文件添加到項目的根源：

 Module.exports = {
  組件：'./src/components'，
  輸出路徑：'./dist/playroom'，

  // 選修的：
  標題：“我的真棒圖書館”，
  主題：'./src/themes'，
  摘要：'./playroom/snippets.js'，
  framecomponent：'./playroom/framecomponent.js'，
  範圍：'./playroom/usescope.js'，
  寬度：[320，768，1024]，
  港口：9000，
  OpenBrowser：是的，
  paramtype：'search'，//默認值為'hash'
  exampode：`<button>你好世界！    </button>`，
  baseurl：'/playroom/'，
  WebPackConfig：（）=>（{//自定義WebPack Config Gook there ...
  }），
  iframesandbox：“允許scripts”，
  DefaultVisibleWidths：[//首次加載上顯示的寬度子集
  ]，，
  defaultvisiblethemes：[//在第一次加載上顯示的主題子集
  ]，};

注意： port和openBrowser選項將在上面的配置中省略時，將設置為9000和true （分別為TRUE）。

您的components文件有望導出一個對像或一系列命名的導出。例如：

從'../ text'導出{默認為text}; //從'../button'重新輸入默認的exportExport {button};; //重新出口指定的導出//等...

iframeSandbox選項可用於在遊戲室的iFrame上設置sandbox屬性。遊戲室工作至少需要allow-scripts 。

現在，您的項目已配置，您可以啟動本地開發服務器：

 $ npm跑步室：開始

建立生產資產：

 $ npm跑步室：建造

摘要

遊戲室使您可以快速插入預定義的代碼片段，並在瀏覽列表時在主題和視口上提供實時預覽。這些摘要可以通過看起來像這樣的snippets文件進行配置：

導出默認[
  {group：'button'，name：'strong'，代碼：<button重量=“ strong”> button </button>`，
  }，，
  // ETC...];

自定義框架組件

如果您的組件需要嵌套在自定義提供商組件中，則可以通過frameComponent選項提供自定義React組件文件，這是通往導出組件的文件的途徑。例如，如果您的組件庫有多個主題：

從'react'導入react; import {theaseprovider}從'../path/to/your/theming-system'; export默認函數frameComponent（{theme，children}）{
  返回<themeprovider them = {theme}> {children} </theameprovider>;}

自定義範圍

您可以通過scope選項在JSX的範圍內提供額外的變量，該範圍是導出返回範圍對象的useScope掛鉤的文件的路徑。例如，如果您想向遊戲室的消費者公開一個基於上下文的theme變量：

從'../ path/to/your/theming-system'; export默認函數uspecope（）{
  返回{主題：usetheme（），
  };

主題支持

如果您的組件庫有多個主題，則可以自定義遊戲室以通過themes配置選項同時渲染每個主題。

與您的components文件類似，您的themes文件有望導出一個對像或一系列命名的導出。例如：

來自'./themea'; export {themeb}的導出{themea}來自'./themeb';///等...

打字稿支持

如果您的項目中存在tsconfig.json文件，則使用React-Docgen-typecript解析靜態道具類型，以在遊戲室編輯器中提供更好的自動完成。

默認情況下，包括node_modules不包括當前工作目錄中的所有.ts和.tsx文件。

如果您需要自定義此行為，則可以在playroom.config.js中提供一個typeScriptFiles選項，該選項是Globs的數組。

 Module.exports = {
  // ...
  TypescriptFiles：['SRC/COMPONENTS/**/*。{TS，TSX}'，'！**/node_modules']，};

如果您需要自定義解析器選項，則可以在playroom.config.js中提供reactDocgenTypescriptConfig 。

例如：

 Module.exports = {
  // ...
  ReactDoctyPescriptConfig：{propfilter ：（ prop，component）=> {// ...}，
  }，};

ESM支持

遊戲室支持加載ESM配置文件。默認情況下，Playroom將尋找具有.js ， .mjs或.cjs文件擴展名的遊戲室配置文件。

故事書整合

如果您有興趣將Playroom集成到Storybook中，請查看Storybook-Addon-Playroom。

瀏覽器支持

Playroom是為所有主要瀏覽器的最新穩定版本而製造的。某些功能在較舊的瀏覽器中可能無法正常工作。

執照

麻省理工學院。