• Stars
    star
    4,321
  • Rank 9,964 (Top 0.2 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created about 6 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Design with JSX, powered by your own component library.

Playroom

Playroom

npm Build Status


Playroom Demo

Simultaneously design across a variety of themes and screen sizes, powered by JSX and your own component library.

Playroom allows you to create a zero-install code-oriented design environment, built into a standalone bundle that can be deployed alongside your existing design system documentation.

  • Iterate on your designs in the final medium.
  • Create quick mock-ups and interactive prototypes with real code.
  • Exercise and evaluate the flexibility of your design system.
  • Share your work with others by simply copying the URL.

Demos

Braid Design System (Themed)

Bumbag

Overdrive

Cubes (Themed)

Mesh Design System (Themed)

MΓ­stica Design System (Themed)

Shopify Polaris

Agriculture Design System

Send us a PR if you'd like to be in this list!

Getting Started

$ npm install --save-dev playroom

Add the following scripts to your package.json:

{
  "scripts": {
    "playroom:start": "playroom start",
    "playroom:build": "playroom build"
  }
}

Add a playroom.config.js file to the root of your project:

module.exports = {
  components: './src/components',
  outputPath: './dist/playroom',

  // Optional:
  title: 'My Awesome Library',
  themes: './src/themes',
  snippets: './playroom/snippets.js',
  frameComponent: './playroom/FrameComponent.js',
  scope: './playroom/useScope.js',
  widths: [320, 768, 1024],
  port: 9000,
  openBrowser: true,
  paramType: 'search', // default is 'hash'
  exampleCode: `
    <Button>
      Hello World!
    </Button>
  `,
  baseUrl: '/playroom/',
  webpackConfig: () => ({
    // Custom webpack config goes here...
  }),
  iframeSandbox: 'allow-scripts',
};

Note: port and openBrowser options will be set to 9000 and true (respectively) by default whenever they are omitted from the config above.

Your components file is expected to export a single object or a series of named exports. For example:

export { default as Text } from '../Text'; // Re-exporting a default export
export { Button } from '../Button'; // Re-exporting a named export
// etc...

The iframeSandbox option can be used to set the sandbox attribute on Playroom's iframe. A minimum of allow-scripts is required for Playroom to work.

Now that your project is configured, you can start a local development server:

$ npm run playroom:start

To build your assets for production:

$ npm run playroom:build

Snippets

Playroom allows you to quickly insert predefined snippets of code, providing live previews across themes and viewports as you navigate the list. These snippets can be configured via a snippets file that looks like this:

export default [
  {
    group: 'Button',
    name: 'Strong',
    code: `
      <Button weight="strong">
        Button
      </Button>
    `,
  },
  // etc...
];

Custom Frame Component

If your components need to be nested within custom provider components, you can provide a custom React component file via the frameComponent option, which is a path to a file that exports a component. For example, if your component library has multiple themes:

import React from 'react';
import { ThemeProvider } from '../path/to/your/theming-system';

export default function FrameComponent({ theme, children }) {
  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
}

Custom Scope

You can provide extra variables within the scope of your JSX via the scope option, which is a path to a file that exports a useScope Hook that returns a scope object. For example, if you wanted to expose a context-based theme variable to consumers of your Playroom:

import { useTheme } from '../path/to/your/theming-system';

export default function useScope() {
  return {
    theme: useTheme(),
  };

Theme Support

If your component library has multiple themes, you can customise Playroom to render every theme simultaneously via the themes configuration option.

Similar to your components file, your themes file is expected to export a single object or a series of named exports. For example:

export { themeA } from './themeA';
export { themeB } from './themeB';
// etc...

TypeScript Support

If a tsconfig.json file is present in your project, static prop types are parsed using react-docgen-typescript to provide better autocompletion in the Playroom editor.

By default, all .ts and .tsx files in the current working directory are included, excluding node_modules.

If you need to customise this behaviour, you can provide a typeScriptFiles option in playroom.config.js, which is an array of globs.

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

If you need to customise the parser options, you can provide a reactDocgenTypescriptConfig option in playroom.config.js.

For example:

module.exports = {
  // ...
  reactDocgenTypescriptConfig: {
    propFilter: (prop, component) => {
      // ...
    },
  },
};

Storybook Integration

If you are interested in integrating Playroom into Storybook, check out storybook-addon-playroom.

License

MIT.

More Repositories

1

vanilla-extract

Zero-runtime Stylesheets-in-TypeScript
TypeScript
5,738
star
2

capsize

Flipping how we define typography in CSS.
TypeScript
1,492
star
3

braid-design-system

Themeable design system for the SEEK Group
TypeScript
1,487
star
4

treat

🍬 Themeable, statically extracted CSS‑in‑JS with near‑zero runtime.
TypeScript
1,152
star
5

html-sketchapp-cli

Quickly generate Sketch libraries from HTML documents and living style guides, powered by html-sketchapp
JavaScript
633
star
6

sku

Front-end development toolkit
JavaScript
472
star
7

seek-style-guide

Living style guide for SEEK, powered by React, webpack, CSS Modules and Less.
JavaScript
309
star
8

serverless-haskell

Deploying Haskell applications to AWS Lambda with Serverless
Haskell
213
star
9

css-modules-typescript-loader

Webpack loader to create TypeScript declarations for CSS Modules
JavaScript
193
star
10

vocab

Vocab is a strongly typed internationalization framework for React
TypeScript
125
star
11

csp-server

CSP (Content Security Policy) reports server which forwards reports to Elasticsearch.
JavaScript
57
star
12

docker-ecr-cache-buildkite-plugin

Zero config plugin for caching Docker images in Amazon ECR or Google Container Registry
Shell
51
star
13

skuba

🀿 SEEK development toolkit for backend applications and packages
TypeScript
48
star
14

aws-sm-buildkite-plugin

Buildkite plugin for working with AWS Secrets Manager
Shell
42
star
15

listo

Listo. Use questionnaires and checklists to make it easy to do the right thing, regarding the software you build.
TypeScript
27
star
16

crackle

A build tool for apps and packages, static and server-rendered sites
TypeScript
25
star
17

github-merged-pr-buildkite-plugin

BuildKite plugin to work with GitHub PRs
Shell
25
star
18

changesets-snapshot

A GitHub Action for publishing snapshot releases when using changesets
TypeScript
18
star
19

fsharp-workshop

Exercises for an F# workshop.
F#
15
star
20

lightgbm4j

A JVM interface 🌯 for LightGBM, written in Scala, for inference in production.
Scala
14
star
21

is-pwned

is-pwned β€”Β Utility to safely check the HaveIBeenPwned "Pwned Passwords" database in the browser.
TypeScript
12
star
22

docker-ecr-publish-buildkite-plugin

Build, tag, and push Docker images to Amazon ECR
Shell
11
star
23

seek-style-guide-webpack

Webpack decorators for integrating with the SEEK Style Guide.
JavaScript
11
star
24

react-scrollmonitor

React wrapper for scrollMonitor
JavaScript
11
star
25

gradle-aws-plugin

AWS Plugin for Gradle
Scala
10
star
26

evaporate

Evaporate is a convention-based, simple CloudFormation Stack deployment tool.
Haskell
9
star
27

browserslist-config-seek

Shareable Browserslist config for SEEK
JavaScript
9
star
28

seek.automation.phantom

A Pact based service simulator.
C#
9
star
29

toolbox

Standard build tools
Shell
8
star
30

aec

AWS EC2 CLI - easily work with ec2 instances via the cli 🐢
Python
8
star
31

create-ecr-buildkite-plugin

Create and manage an Amazon ECR repository
Shell
7
star
32

seek.automation.stub

A Pact based stubbing library for .NET.
C#
7
star
33

dynamotools

Tools to manage DynamoDB tables.
Go
7
star
34

snyk-buildkite-plugin

Buildkite plugin for running Snyk scans
Python
7
star
35

renovate-config-seek

Shareable Renovate config for SEEK
JavaScript
7
star
36

eslint-config-seek

Shareable ESLint configuration used by SEEK
JavaScript
7
star
37

private-npm-buildkite-plugin

A Buildkite plugin to simplify the use of an NPM token to install private modules
Shell
6
star
38

seek-stackable

iOS framework for laying out nested views vertically and horizontally.
Swift
5
star
39

datadog-event-buildkite-plugin

BuildKite plugin to send a deployment event to datadog
Shell
5
star
40

ensure-gitignore

Ensure the presence of patterns within a project's gitignore
JavaScript
5
star
41

https-proxy-server

HTTP proxy server in Node.js allowing modification of user responses.
JavaScript
4
star
42

style-guide-resources-for-sketch

A template containing SEEK UI components, for designers using Sketch.
4
star
43

scoobie

🧢 Component library for SEEK documentation sites
TypeScript
4
star
44

ssm-buildkite-plugin

Secure Store Parameters for Buildkite
Shell
4
star
45

wingman

πŸ›© Reference implementation of a SEEK-integrated recruitment system
TypeScript
4
star
46

koala

🐨 Koa add-ons for SEEK-standard tracing, logging and metrics
TypeScript
4
star
47

nodejs-consumer-pact-interceptor

A Node.js consumer Pact tool.
JavaScript
3
star
48

aws-lambda-scala

Example of an AWS Lambda function written in Scala with deployment tools
Scala
3
star
49

rynovate

🦏 dangerouslySetRenovatePreset
3
star
50

commitlint-config-seek

Shareable commitlint config for SEEK
JavaScript
3
star
51

kpt-functions

A library of Kpt functions for extending Kpt's functionality
Go
3
star
52

ad-posting-api-client

SEEK's Job Ad Posting API .NET client and sample consumer code.
C#
2
star
53

IdentityServer4.Contrib.DynamoDB

A persistence layer using DynamoDB for operational data for Identity Server 4
C#
2
star
54

serverless-plugin-inspect

Serverless plugin - Get AWS stack info in JSON.
JavaScript
2
star
55

datadog-custom-metrics

🐢 Common interface for sending Datadog custom metrics from Node.js runtime environments
TypeScript
1
star
56

text1

A NonEmpty version of Data.Text
Haskell
1
star
57

skuba-dive

🌊 Minimal runtime for skuba
TypeScript
1
star
58

logger

TypeScript
1
star
59

fake-hr

Node.js package of HR data sets for mocking and testing
TypeScript
1
star
60

tslint-config-seek

TSLint configuration used by SEEK
JavaScript
1
star
61

action-project-manager

A github action which labels and adds isses and PRs to github projects
JavaScript
1
star
62

babel-plugin-seek-style-guide

Optimise your bundle by automatically rewriting import statements from seek-style-guide
JavaScript
1
star
63

splunk-logger

Generates Splunk consumable logs in Node JS 4.3.2 AWS Lambda functions.
JavaScript
1
star
64

redux-batched-subscribe

FORK: https://github.com/tappleby/redux-batched-subscribe
JavaScript
1
star
65

spark-dist

Spark with hadoop-aws 3.1 for modern S3 access
Makefile
1
star