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

@@ -174,6 +174,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);
+  }
+}

js/src/playground/store.spec.js

@@ -0,0 +1,41 @@
+// 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 from 'react';
+
+import QrCode from '~/ui/QrCode/qrCode.example';
+
+import PlaygroundStore from './store';
+
+describe('playground/store', () => {
+  let store = PlaygroundStore.get();
+
+  it('is available', () => {
+    expect(PlaygroundStore.get()).to.be.ok;
+  });
+
+  it('adds new Components', () => {
+    PlaygroundStore.register(<QrCode />);
+    expect(store.components.length).greaterThan(0);
+  });
+
+  it('adds new Components only once', () => {
+    PlaygroundStore.register(<QrCode />);
+    PlaygroundStore.register(<QrCode />);
+
+    expect(store.components.filter((c) => /QrCode/i.test(c.type.name)).length).equal(1);
+  });
+});

js/src/routes.js

@@ -78,12 +78,10 @@ const routes = [
 
   { path: '/', onEnter: redirectTo('/accounts') },
   { path: '/auth', onEnter: redirectTo('/accounts') },
-  { path: '/settings', onEnter: redirectTo('/settings/views') },
+  { path: '/settings', onEnter: redirectTo('/settings/views') }
+];
 
-  {
+const appRoutes = [
-    path: '/',
-    component: Application,
-    childRoutes: [
   {
     path: 'accounts',
     indexRoute: { component: Accounts },
@@ -115,8 +113,22 @@ const routes = [
   { path: 'web', component: Web },
   { path: 'web/:url', component: Web },
   { path: 'signer', component: Signer }
-    ]
-  }
 ];
 
+// TODO : use ES6 imports when supported
+if (process.env.NODE_ENV !== 'production') {
+  const Playground = require('./playground').default;
+
+  appRoutes.push({
+    path: 'playground',
+    component: Playground
+  });
+}
+
+routes.push({
+  path: '/',
+  component: Application,
+  childRoutes: appRoutes
+});
+
 export default routes;

js/src/ui/CurrencySymbol/currencySymbol.example.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 React, { Component } from 'react';
+
+import PlaygroundExample from '~/playground/playgroundExample';
+
+import ConnectedCurrencySymbol, { CurrencySymbol } from './currencySymbol';
+
+export default class CurrencySymbolExample extends Component {
+  render () {
+    return (
+      <div>
+        <PlaygroundExample name='Connected Currency Symbol'>
+          <ConnectedCurrencySymbol />
+        </PlaygroundExample>
+
+        <PlaygroundExample name='Simple Currency Symbol'>
+          <CurrencySymbol
+            netChain='testnet'
+          />
+        </PlaygroundExample>
+
+        <PlaygroundExample name='ETC Currency Symbol'>
+          <CurrencySymbol
+            netChain='classic'
+          />
+        </PlaygroundExample>
+
+        <PlaygroundExample name='EXP Currency Symbol'>
+          <CurrencySymbol
+            netChain='expanse'
+          />
+        </PlaygroundExample>
+      </div>
+    );
+  }
+}

js/src/ui/CurrencySymbol/currencySymbol.js

@@ -21,43 +21,41 @@ const SYMBOL_ETC = 'ETC';
 const SYMBOL_ETH = 'ETH';
 const SYMBOL_EXP = 'EXP';
 
-class CurrencySymbol extends Component {
+export class CurrencySymbol extends Component {
   static propTypes = {
     className: PropTypes.string,
-    netChain: PropTypes.string.isRequired,
+    netChain: PropTypes.string.isRequired
-    netSymbol: PropTypes.string.isRequired
   }
 
   render () {
-    const { className, netSymbol } = this.props;
+    const { className } = this.props;
 
     return (
-      <span className={ className }>{ netSymbol }</span>
+      <span className={ className }>{ this.renderSymbol() }</span>
     );
   }
+
+  renderSymbol () {
+    const { netChain } = this.props;
+
+    switch (netChain) {
+      case 'classic':
+        return SYMBOL_ETC;
+
+      case 'expanse':
+        return SYMBOL_EXP;
+
+      default:
+        return SYMBOL_ETH;
+    }
+  }
 }
 
 function mapStateToProps (state) {
   const { netChain } = state.nodeStatus;
-  let netSymbol;
-
-  switch (netChain) {
-    case 'classic':
-      netSymbol = SYMBOL_ETC;
-      break;
-
-    case 'expanse':
-      netSymbol = SYMBOL_EXP;
-      break;
-
-    default:
-      netSymbol = SYMBOL_ETH;
-      break;
-  }
 
   return {
-    netChain,
+    netChain
-    netSymbol
   };
 }
 

js/src/ui/CurrencySymbol/currencySymbol.spec.js

@@ -78,4 +78,22 @@ describe('ui/CurrencySymbol', () => {
       expect(render('somethingElse').text()).equal('ETH');
     });
   });
+
+  describe('renderSymbol', () => {
+    it('render defaults', () => {
+      expect(render().instance().renderSymbol()).to.be.ok;
+    });
+
+    it('render ETH as default', () => {
+      expect(render().instance().renderSymbol()).equal('ETH');
+    });
+
+    it('render ETC', () => {
+      expect(render('classic').instance().renderSymbol()).equal('ETC');
+    });
+
+    it('render EXP', () => {
+      expect(render('expanse').instance().renderSymbol()).equal('EXP');
+    });
+  });
 });

js/src/ui/QrCode/qrCode.example.js

@@ -0,0 +1,63 @@
+// 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 } from 'react';
+
+import PlaygroundExample from '~/playground/playgroundExample';
+
+import QrCode from './';
+
+export default class QrCodeExample extends Component {
+  render () {
+    return (
+      <div>
+        <PlaygroundExample name='Simple QRCode'>
+          <QrCode
+            value='this is a test'
+          />
+        </PlaygroundExample>
+
+        <PlaygroundExample name='Simple QRCode with margin'>
+          <QrCode
+            margin={ 10 }
+            value='this is a test'
+          />
+        </PlaygroundExample>
+
+        <PlaygroundExample name='Ethereum Address QRCode'>
+          <QrCode
+            margin={ 10 }
+            value='0x8c30393085C8C3fb4C1fB16165d9fBac5D86E1D9'
+          />
+        </PlaygroundExample>
+
+        <PlaygroundExample name='Bitcoin Address QRCode'>
+          <QrCode
+            margin={ 10 }
+            value='3J98t1WpEZ73CNmQviecrnyiWrnqRhWNLy'
+          />
+        </PlaygroundExample>
+
+        <PlaygroundExample name='Big QRCode'>
+          <QrCode
+            size={ 10 }
+            value='this is a test'
+          />
+        </PlaygroundExample>
+      </div>
+    );
+  }
+}

js/src/ui/SectionList/sectionList.example.js

@@ -0,0 +1,94 @@
+// 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 } from 'react';
+
+import PlaygroundExample from '~/playground/playgroundExample';
+import SectionList from './';
+
+const ITEM_STYLE = {
+  backgroundColor: 'rgba(0, 0, 0, 0.75)',
+  padding: '1em'
+};
+
+const items = [
+  { name: 'Jack', desc: 'Item number 1' },
+  { name: 'Paul', desc: 'Item number 2' },
+  { name: 'Matt', desc: 'Item number 3' },
+  { name: 'Titi', desc: 'Item number 4' }
+];
+
+export default class SectionListExample extends Component {
+  state = {
+    showOverlay: true
+  };
+
+  render () {
+    return (
+      <div>
+        <PlaygroundExample name='Simple Usage'>
+          { this.renderSimple() }
+        </PlaygroundExample>
+
+        <PlaygroundExample name='With Overlay'>
+          { this.renderWithOverlay() }
+        </PlaygroundExample>
+      </div>
+    );
+  }
+
+  renderSimple () {
+    return (
+      <SectionList
+        items={ items }
+        renderItem={ this.renderItem }
+      />
+    );
+  }
+
+  renderWithOverlay () {
+    const { showOverlay } = this.state;
+    const overlay = (
+      <div>
+        <p>Overlay</p>
+        <button onClick={ this.hideOverlay }>hide</button>
+      </div>
+    );
+
+    return (
+      <SectionList
+        items={ items }
+        overlay={ showOverlay ? overlay : null }
+        renderItem={ this.renderItem }
+      />
+    );
+  }
+
+  renderItem (item, index) {
+    const { desc, name } = item;
+
+    return (
+      <div style={ ITEM_STYLE }>
+        <h3>{ name }</h3>
+        <h3 data-hover='show'>{ desc }</h3>
+      </div>
+    );
+  }
+
+  hideOverlay = () => {
+    this.setState({ showOverlay: false });
+  }
+}

js/src/views/Application/application.js

@@ -57,6 +57,14 @@ class Application extends Component {
     const [root] = (window.location.hash || '').replace('#/', '').split('/');
     const isMinimized = root === 'app' || root === 'web';
 
+    if (process.env.NODE_ENV !== 'production' && root === 'playground') {
+      return (
+        <div>
+          { this.props.children }
+        </div>
+      );
+    }
+
     if (inFrame) {
       return (
         <FrameError />