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
This commit is contained in:
Nicolas Gotchac 2017-01-26 16:15:49 +01:00 committed by Jaco Greeff
parent 2ac7655355
commit e19c28bb8e
15 changed files with 695 additions and 61 deletions

View File

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

View File

@ -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';

View File

@ -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;
}
}

View File

@ -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 });
}
}

View File

@ -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);
});
});

View File

@ -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>
);
}
}

View File

@ -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);
}
}

View File

@ -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);
});
});

View File

@ -78,12 +78,10 @@ const routes = [
{ path: '/', onEnter: redirectTo('/accounts') }, { path: '/', onEnter: redirectTo('/accounts') },
{ path: '/auth', 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', path: 'accounts',
indexRoute: { component: Accounts }, indexRoute: { component: Accounts },
@ -115,8 +113,22 @@ const routes = [
{ path: 'web', component: Web }, { path: 'web', component: Web },
{ path: 'web/:url', component: Web }, { path: 'web/:url', component: Web },
{ path: 'signer', component: Signer } { 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; export default routes;

View File

@ -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>
);
}
}

View File

@ -21,43 +21,41 @@ const SYMBOL_ETC = 'ETC';
const SYMBOL_ETH = 'ETH'; const SYMBOL_ETH = 'ETH';
const SYMBOL_EXP = 'EXP'; const SYMBOL_EXP = 'EXP';
class CurrencySymbol extends Component { export class CurrencySymbol extends Component {
static propTypes = { static propTypes = {
className: PropTypes.string, className: PropTypes.string,
netChain: PropTypes.string.isRequired, netChain: PropTypes.string.isRequired
netSymbol: PropTypes.string.isRequired
} }
render () { render () {
const { className, netSymbol } = this.props; const { className } = this.props;
return ( 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) { function mapStateToProps (state) {
const { netChain } = state.nodeStatus; 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 { return {
netChain, netChain
netSymbol
}; };
} }

View File

@ -78,4 +78,22 @@ describe('ui/CurrencySymbol', () => {
expect(render('somethingElse').text()).equal('ETH'); 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');
});
});
}); });

View File

@ -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>
);
}
}

View File

@ -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 });
}
}

View File

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