playroom

---

Одновременно разрабатывать различные темы и размеры экрана, питаемые от JSX и вашей собственной библиотеки компонентов.

Игровая комната позволяет создавать среду дизайна, ориентированную на код с нулевым установлением, встроенную в автономный пакет, который можно развернуть наряду с существующей документацией системы проектирования.

• Итерация на ваших дизайнах в конечной среде.

• Создайте быстрые макеты и интерактивные прототипы с реальным кодом.

• Упражнения и оценить гибкость вашей системы проектирования.

• Поделитесь своей работой с другими, просто копировав 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/framecomponent.js',
  Сфера применения: './Playroom/useScope.js'
  Ширина: [320, 768, 1024],
  Порт: 9000,
  OpenBrowser: Правда,
  Paramtype: 'search', // по умолчанию есть «хэш»
  Примечание: `<Кнопка> Привет, мир!    </Button> `,
  baseurl: '/playroom/',
  WebPackConfig: () => ({// Custom Config webpack идет здесь ...
  }),
  iframesandbox: 'Allow-Scripts',
  DefaultVisibleWidths: [// подмножество ширины для отображения при первой нагрузке
  ],
  DefaultVisibleThemes: [// подмножество тем для отображения при первой нагрузке
  ],};

ПРИМЕЧАНИЕ. Параметры port и openBrowser будут установлены на 9000 и true (соответственно) по умолчанию, когда они будут опущены из конфигурации выше.

Ожидается, что ваш файл components будет экспортировать один объект или серию именованных экспортов. Например:

 Экспорт {по умолчанию как текст} от '../text'; // реэкспортировать по умолчанию exportexport {кнопка} от '../button'; // реэкспортировать именованный экспорт // и т. Д.

Опция iframeSandbox может использоваться для установки атрибута sandbox в Iframe's Iframe. Для работы в игровой комнате требуется минимум allow-scripts .

Теперь, когда ваш проект настроен, вы можете запустить локальный сервер разработки:

 $ npm Run Playroom: Start

Чтобы создать свои активы для производства:

 $ npm run playrroom: build

Фрагменты

Игровая комната позволяет быстро вставить предопределенные фрагменты кода, предоставляя живые превью по темам и видоуровне при перемещении по списку. Эти фрагменты можно настроить через файл snippets , который выглядит так:

 Экспорт по умолчанию [
  {Group: 'Button', name: 'strong', code: `<button Wewse =" strong "> Button </button>`,
  },
  // и т. д...];

Пользовательский кадр компонент

Если ваши компоненты должны быть вложены в компоненты пользовательских поставщиков, вы можете предоставить пользовательский файл компонентов React через опцию frameComponent , который является пути к файлу, который экспортирует компонент. Например, если в вашей библиотеке компонентов есть несколько тем:

 Импорт реагирует из 'React'; import {themeprovider} от '../path/to/your/theming-system'; export Функция по умолчанию framecomponent ({тема, дети}) {
  return <themeprovider theme = {theme}> {дети} </themeprovider>;}

Пользовательская область

Вы можете предоставить дополнительные переменные в рамках вашего JSX с помощью опции scope , который является пути к файлу, который экспортирует крюк useScope , который возвращает объект Scope. Например, если вы хотите разоблачить переменную theme на основе контекста потребителям вашей игровой комнаты:

 Import {usetheme} от '../path/to/your/theming-system'; export функция по умолчанию USESCOPE () {
  return {theme: usetheme (),
  };

Поддержка темы

Если в вашей библиотеке компонентов есть несколько тем, вы можете настроить игровую комнату, чтобы отобразить каждую тему одновременно с помощью опции конфигурации themes .

Подобно вашему файлу components , ожидается, что ваш файл themes будет экспортировать один объект или серию именованных экспортов. Например:

 Экспорт {Themea} от './themea'; export {themeb} от' ./themeb' ;// etc ...

Поддержка TypeScript

Если в вашем проекте присутствует файл tsconfig.json , статические типы проповедников проанализируются с использованием типа React-Docgen для обеспечения лучшего автозаполнения в редакторе игровой комнаты.

По умолчанию все файлы .ts и .tsx в текущем рабочем каталоге включены, за исключением node_modules .

Если вам нужно настроить это поведение, вы можете предоставить опцию typeScriptFiles в playroom.config.js , которая представляет собой массив глобусов.

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

Если вам нужно настроить параметры анализатора, вы можете предоставить опцию reactDocgenTypescriptConfig в playroom.config.js .

Например:

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

Поддержка ESM

Playroom поддерживает загрузку файлов конфигурации ESM. По умолчанию Playroom будет искать файл конфигурации игровой комнаты с помощью расширения файла .js , .mjs или .cjs .

Интеграция сборника рассказов

Если вы заинтересованы в интеграции игровой комнаты в сборник рассказов, ознакомьтесь с рассказом-Аддон-игрой.

Поддержка браузера

Игровая комната построена для работы над последними стабильными версиями всех основных браузеров. Некоторые функции могут не работать, как и ожидалось, в более старых браузерах.

Лицензия

Грань