playroom

---

JSX와 자체 구성 요소 라이브러리로 구동되는 다양한 테마 및 화면 크기에 걸쳐 동시에 설계하십시오.

Playroom을 사용하면 기존 설계 시스템 문서와 함께 배포 할 수있는 독립형 번들에 내장 된 제로 설치 코드 지향 설계 환경을 만들 수 있습니다.

• 최종 매체의 디자인을 반복하십시오.

• 실제 코드로 빠른 모형 및 대화식 프로토 타입을 만듭니다.

• 설계 시스템의 유연성을 운동하고 평가하십시오.

• 단순히 URL을 복사하여 다른 사람과 작업을 공유하십시오.

시민

브레이드 디자인 시스템 (테마)

Bumbag

오버 드라이브

큐브 (테마)

메쉬 디자인 시스템 (테마)

Mística 디자인 시스템 (테마)

Shopify Polaris

농업 설계 시스템

이 목록에 있고 싶다면 PR을 보내주세요!

시작하기

 $ npm 설치-사브 데브 플레이 룸

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 : True,
  PARAMTYPE : '검색', // 기본값은 '해시'입니다.
  examplecode :`<버튼> 안녕하세요 세계!    </button>`,
  Baseurl : '/Playroom/',
  WebPackConfig : () => ({// 사용자 정의 웹 팩 구성이 여기로 이동 ...
  }),
  iframesandbox : '허용 스크립트',
  DefaultVisibleWidths : [// 첫 번째로드에서 표시 할 너비의 서브 세트
  ],,
  defaultvisiblethemes : [// 첫 번째로드에 표시 할 테마의 서브 세트
  ],};

참고 : port 및 openBrowser 옵션은 위의 구성에서 생략 될 때마다 기본적으로 9000 및 true (각각)로 설정됩니다.

components 파일은 단일 객체 또는 일련의 명명 된 내보내기를 내보낼 것으로 예상됩니다. 예를 들어:

 내보내기 {default as text}에서 '../text'; // '../button'에서 기본 ExportExport {button}을 다시 기대합니다. // 지명 된 내보내기 // etc ...

iframeSandbox 옵션을 사용하여 Playroom의 iframe에서 sandbox 속성을 설정할 수 있습니다. 놀이방이 작동하려면 최소한의 allow-scripts 필요합니다.

프로젝트가 구성되었으므로 로컬 개발 서버를 시작할 수 있습니다.

 $ NPM Run Playroom : 시작

생산 자산을 구축하려면 :

 $ NPM Run Playroom : 빌드

짧은 발췌

Playroom을 사용하면 사전 정의 된 코드 스 니펫을 신속하게 삽입하여 목록을 탐색 할 때 테마 및 뷰포트에서 실시간 미리보기를 제공 할 수 있습니다. 이 스 니펫은 다음과 같은 것처럼 보이는 snippets 파일을 통해 구성 할 수 있습니다.

 내보내기 기본값 [
  {그룹 : '버튼', 이름 : 'strong', 코드 :`<button weight = "strong"> 버튼 </button>`,
  },
  // 등...];

사용자 정의 프레임 구성 요소

구성 요소를 사용자 정의 제공 업체 구성 요소 내에 중첩 해야하는 경우 구성 요소를 내보내는 파일의 경로 인 frameComponent 옵션을 통해 사용자 정의 반응 구성 요소 파일을 제공 할 수 있습니다. 예를 들어, 구성 요소 라이브러리에 여러 테마가있는 경우

 'react'; import {themeprovider}에서 'import react'wrom '../path/to/your/theming-system'; export 기본 함수 framecomponent ({테마, children}) {
  <ThemeProvider 테마 = {테마}> {children} </themeprovider>;} return return

사용자 정의 범위

scope 옵션을 통해 JSX 범위 내에서 추가 변수를 제공 할 수 있습니다. 스코프 옵션은 스코프 객체를 반환하는 useScope 후크를 내보내는 파일의 경로입니다. 예를 들어, 컨텍스트 기반 theme 변수를 놀이방 소비자에게 노출하려는 경우 :

 '../path/to/your/theming-system'에서 {usetheme} 가져 오기 {usetheme};
  return {테마 : usetheme (),
  };

테마 지원

구성 요소 라이브러리에 여러 테마가있는 경우 themes 구성 옵션을 통해 모든 테마를 동시에 렌더링하기 위해 Playroom을 사용자 정의 할 수 있습니다.

components 파일과 유사하게 themes 파일은 단일 객체 또는 일련의 이름 지정 내보내기를 내보낼 것으로 예상됩니다. 예를 들어:

 './themea'; export {tembomb}에서 {themea}를 내보내십시오.

타입 스크립트 지원

프로젝트에 tsconfig.json 파일이있는 경우 Playroom 편집기에서 더 나은 자동 완성을 제공하기 위해 React-Docgen-Typescript를 사용하여 정적 소품 유형을 구문 분석합니다.

기본적으로 현재 작업 디렉토리의 모든 .ts 및 .tsx 파일은 node_modules 제외하고 포함됩니다.

이 동작을 사용자 정의 해야하는 경우 playroom.config.js 에서 Globs의 배열 인 typeScriptFiles 옵션을 제공 할 수 있습니다.

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

Parser 옵션을 사용자 정의 해야하는 경우 playroom.config.js 에서 reactDocgenTypescriptConfig 옵션을 제공 할 수 있습니다.

예를 들어:

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

ESM 지원

Playroom은 ESM 구성 파일로드를 지원합니다. 기본적으로 Playroom은 .js , .mjs 또는 .cjs 파일 확장자가있는 Playroom 구성 파일을 찾습니다.

스토리 북 통합

Playroom을 Storybook에 통합하는 데 관심이 있으시면 Storybook-Addon-Playroom을 확인하십시오.

브라우저 지원

Playroom은 모든 주요 브라우저의 최신 안정 버전에서 작동하도록 제작되었습니다. 이전 브라우저에서는 일부 기능이 예상대로 작동하지 않을 수 있습니다.

특허

MIT.