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是为所有主要浏览器的最新稳定版本而制造的。某些功能在较旧的浏览器中可能无法正常工作。

执照

麻省理工学院。