Add a Playground for the UI Components (#4301)

* Playground // WIP

* Linting

* Add Examples with code

* CSS Linting

* Linting

* Add Connected Currency Symbol

* 2015-2017

* 2015-2017

* 2015-2017

* 2015-2017

* 2015-2017

* 2015-2017

* 2015-2017

* Added `renderSymbol` tests

* PR grumbles

* Add Eth and Btc QRCode examples

* 2015-2017

* Add tests for playground

* Fixing tests

js/package.json

@@ -171,6 +171,7 @@
     "react-copy-to-clipboard": "4.2.3",
     "react-dom": "15.4.1",
     "react-dropzone": "3.7.3",
+    "react-element-to-jsx-string": "6.0.0",
     "react-intl": "2.1.5",
     "react-portal": "3.0.0",
     "react-redux": "4.4.6",

js/src/playground/index.js

@@ -0,0 +1,17 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './playground';

js/src/playground/playground.css

@@ -0,0 +1,90 @@
+/* Copyright 2015-2017 Parity Technologies (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+$codeBackground: #002b36;
+$codeColor: #93a1a1;
+
+.container {
+  background-color: rgba(0, 0, 0, 0.5);
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  padding: 1em;
+  display: flex;
+  flex-direction: column;
+
+  .examples {
+    flex: 1;
+    overflow: auto;
+  }
+}
+
+.title {
+  font-size: 2.25em;
+  margin-bottom: 1em;
+
+  .select {
+    font-size: 0.85em;
+    font-family: monospace;
+    display: inline-block;
+    height: 1.5em;
+    border: 1px solid #aaa;
+    padding: 0 0.5em;
+    color: #555;
+    appearance: none;
+  }
+}
+
+.exampleContainer {
+  background-color: rgba(0, 0, 0, 0.5);
+  padding: 1em;
+  margin-bottom: 1em;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  p {
+    font-size: 1.25em;
+    margin-top: 0;
+  }
+}
+
+.example {
+  display: flex;
+  flex-direction: row;
+
+  .code {
+    flex: 1;
+    overflow: auto;
+    padding: 0.5em;
+    background-color: #$codeBackground;
+    color: $codeColor;
+    font-size: 0.75em;
+
+    code {
+      white-space: pre;
+    }
+  }
+
+  .component {
+    flex: 3;
+    padding-left: 0.5em;
+  }
+}

js/src/playground/playground.js

@@ -0,0 +1,88 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { observer } from 'mobx-react';
+import React, { Component } from 'react';
+
+import CurrencySymbol from '~/ui/CurrencySymbol/currencySymbol.example';
+import QrCode from '~/ui/QrCode/qrCode.example';
+import SectionList from '~/ui/SectionList/sectionList.example';
+
+import PlaygroundStore from './store';
+import styles from './playground.css';
+
+PlaygroundStore.register(<CurrencySymbol />);
+PlaygroundStore.register(<QrCode />);
+PlaygroundStore.register(<SectionList />);
+
+@observer
+export default class Playground extends Component {
+  state = {
+    selectedIndex: 0
+  };
+
+  store = PlaygroundStore.get();
+
+  render () {
+    return (
+      <div className={ styles.container }>
+        <div className={ styles.title }>
+          <span>Playground > </span>
+          <select
+            className={ styles.select }
+            onChange={ this.handleChange }
+          >
+            { this.renderOptions() }
+          </select>
+        </div>
+
+        <div className={ styles.examples }>
+          { this.renderComponent() }
+        </div>
+      </div>
+    );
+  }
+
+  renderOptions () {
+    const { components } = this.store;
+
+    return components.map((element, index) => {
+      const name = element.type.displayName || element.type.name;
+
+      return (
+        <option
+          key={ `${name}_${index}` }
+          value={ index }
+        >
+          { name }
+        </option>
+      );
+    });
+  }
+
+  renderComponent () {
+    const { components } = this.store;
+    const { selectedIndex } = this.state;
+
+    return components[selectedIndex];
+  }
+
+  handleChange = (event) => {
+    const { value } = event.target;
+
+    this.setState({ selectedIndex: value });
+  }
+}

js/src/playground/playground.spec.js

@@ -0,0 +1,47 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { shallow } from 'enzyme';
+import React from 'react';
+
+import Playground from './playground';
+
+let component;
+let options;
+
+function render (props = {}) {
+  component = shallow(
+    <Playground />
+  );
+
+  options = component.find('option');
+
+  return component;
+}
+
+describe('playground', () => {
+  beforeEach(() => {
+    render();
+  });
+
+  it('renders defaults', () => {
+    expect(component).to.be.ok;
+  });
+
+  it('renders multiple options', () => {
+    expect(options.length).to.be.greaterThan(2);
+  });
+});

js/src/playground/playgroundExample.js

@@ -0,0 +1,55 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import reactElementToJSXString from 'react-element-to-jsx-string';
+
+import styles from './playground.css';
+
+export default class PlaygroundExample extends Component {
+  static propTypes = {
+    children: PropTypes.node,
+    name: PropTypes.string
+  };
+
+  render () {
+    const { children, name } = this.props;
+
+    return (
+      <div className={ styles.exampleContainer }>
+        { this.renderName(name) }
+        <div className={ styles.example }>
+          <div className={ styles.code }>
+            <code>{ reactElementToJSXString(children) }</code>
+          </div>
+          <div className={ styles.component }>
+            { children }
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  renderName (name) {
+    if (!name) {
+      return null;
+    }
+
+    return (
+      <p>{ name }</p>
+    );
+  }
+}

js/src/playground/store.js

@@ -0,0 +1,51 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { action, observable } from 'mobx';
+
+let instance = null;
+
+export default class PlaygroundStore {
+  @observable components = [];
+
+  static get () {
+    if (!instance) {
+      instance = new PlaygroundStore();
+    }
+
+    return instance;
+  }
+
+  static register (component) {
+    PlaygroundStore.get().add(component);
+  }
+
+  @action
+  add (component) {
+    const name = component.type.displayName || component.type.name;
+    const hasComponent = this.components.find((c) => {
+      const cName = c.type.displayName || c.type.name;
+
+      return name && cName && cName === name;
+    });
+
+    if (hasComponent) {
+      return;
+    }
+
+    this.components.push(component);
+  }
+}