Add a Playground for the UI Components #4301

ngotchac · 2017-01-25T14:07:41Z

Add a Playground to the UI, accessible via http://localhost:3000/#/playground
It's only available in non-dev environments (won't get included in production build).

Each UI Component can (and should) have a foobar.example.js that lists different uses-cases of the component, which props are passed, etc.

tomusdrw · 2017-01-25T14:09:28Z

Feature request: Generate a test case from the example!

ngotchac · 2017-01-25T14:13:56Z

NB: could use https://github.com/terpiljenya/import-glob to automatically import all ui/**/*.example.js components. Not sure if wanted or not

jacogr · 2017-01-26T07:33:56Z

js/src/playground/playground.css

+  left: 0;
+  padding: 1em;
+  display: flex;
+  flex-direction: column;


Alphabetical order for properties. (Applies to the rest of the file as well)

jacogr · 2017-01-26T07:36:08Z

js/src/playground/playground.css

+    overflow: auto;
+    padding: 0.5em;
+    background-color: #002b36;
+    color: #93a1a1;


Since this is a new file, I would define the colors as variables on top of the file for easier extraction, i.e.

$codeBackground: #002b36; $codeColor: #93a1a1; ... .code { background-color: $codeBackground; color: $codeColor; ... }

jacogr · 2017-01-26T07:37:35Z

js/src/playground/playground.js

+import { observer } from 'mobx-react';
+import React, { Component } from 'react';
+
+import PlaygroundStore from './store';


Move these 2 beneath the ui-wide imports.

external libraries

imports with ~ (ui-wide)

local imports with .

jacogr · 2017-01-26T07:40:32Z

js/src/playground/playground.js

+
+  store = PlaygroundStore.get();
+
+  render () {


I would add at least a smoketest for any new components (i.e. it does render). While this is not meant for production, good habit to form and even the basic test does pick up some issues.

jacogr · 2017-01-26T07:42:24Z

js/src/playground/store.js

+
+let instance = null;
+
+export default class PlaygroundStore {


As per the component comment, I would add tests for the store - for the most part they are being tested (the older ones are in the process of acquiring tests where we have not been vigilant in the past)

jacogr · 2017-01-26T07:43:59Z

js/src/routes.js

 ];

+if (process.env.NODE_ENV !== 'production') {
+  const Playground = require('./playground').default;


Just add a TODO here - when Babel finally supports non-top-level imports, should probably be replaced.

jacogr · 2017-01-26T07:45:39Z

js/src/ui/CurrencySymbol/currencySymbol.example.js

+        </PlaygroundExample>
+
+        <PlaygroundExample name='Simple Currency Symbol'>
+          <CurrencySymbol


I know it is an example, in this case however the example adds nothing the component test hasn't already done. (Keep it though, it sets the tone - in this case the component is just that simple and we must guard against overkill... for the time being, probably not needed, who knows where it ends up at.)

Well the whole purpose of having example is to be able to see what it looks like in addition than testing that it works correctly. So for this one it's a bit obvious, but still has another purpose than the tests

100% agreed on the final purpose - this one is funny since it is just a span. However, think the example could add value going forward, although maybe not quite initially. (Which is the function of the actual component implementation, not the intent of the example)

Yep, I just picked this one because it's one component that isn't used in the UI

jacogr · 2017-01-26T07:47:32Z

js/src/ui/CurrencySymbol/currencySymbol.js

-function mapStateToProps (state) {
-  const { netChain } = state.nodeStatus;
-  let netSymbol;
+  renderSymbol () {


Since the method was added, the test needs to be updated to cater for this.

jacogr · 2017-01-26T07:50:23Z

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

+        <PlaygroundExample name='Simple QRCode with margin'>
+          <QrCode
+            margin={ 10 }
+            value='this is a test'


Would make real values in here - so it can be compared to both ETH & BTC addresses. (It is more important to see that the output matches what is available elsewhere)

jacogr · 2017-01-26T08:14:13Z

js/src/playground/index.js

@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Parity Technologies (UK) Ltd.


2015-2017 (as per updates)

jacogr · 2017-01-26T08:14:20Z

js/src/playground/playground.css

@@ -0,0 +1,87 @@
+/* Copyright 2015, 2016 Parity Technologies (UK) Ltd.


2015-2017 (as per updates)

jacogr · 2017-01-26T08:14:27Z

js/src/playground/playground.js

@@ -0,0 +1,88 @@
+// Copyright 2015, 2016 Parity Technologies (UK) Ltd.


2015-2017 (as per updates)

jacogr · 2017-01-26T08:14:36Z

js/src/playground/playgroundExample.js

@@ -0,0 +1,55 @@
+// Copyright 2015, 2016 Parity Technologies (UK) Ltd.


2015-2017 (as per updates)

jacogr · 2017-01-26T08:14:42Z

js/src/playground/store.js

@@ -0,0 +1,51 @@
+// Copyright 2015, 2016 Parity Technologies (UK) Ltd.


2015-2017 (as per updates)

jacogr · 2017-01-26T08:14:53Z

js/src/ui/CurrencySymbol/currencySymbol.example.js

@@ -0,0 +1,51 @@
+// Copyright 2015, 2016 Parity Technologies (UK) Ltd.


2015-2017 (as per updates)

jacogr · 2017-01-26T08:15:02Z

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

@@ -0,0 +1,49 @@
+// Copyright 2015, 2016 Parity Technologies (UK) Ltd.


2015-2017 (as per updates)

jacogr · 2017-01-26T08:15:08Z

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

@@ -0,0 +1,94 @@
+// Copyright 2015, 2016 Parity Technologies (UK) Ltd.


2015-2017 (as per updates, I've done the remainder - this left here as a reminder)

jacogr · 2017-01-26T14:21:16Z

Still some unsorted properties remaining, but can fix that if I touch this component as part of other work and it is non-critical.

* 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

* s/Delete Contract/Forget Contract/ (#4237) * Adjust the location of the signer snippet (#4155) * Additional building-block UI components (#4239) * Currency WIP * Expand tests * Pass className * Add QrCode * Export new components in ~/ui * s/this.props.netSymbol/netSymbol/ * Fix import case * ui/SectionList component (#4292) * array chunking utility * add SectionList component * Add TODOs to indicate possible future work * Add missing overlay style (as used in dapps at present) * 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 * Split Dapp icon into ui/DappIcon (#4308) * Add QrCode & Copy to ShapeShift (#4322) * Extract CopyIcon to ~/ui/Icons * Add copy & QrCode address * Default size 4 * Add bitcoin: link * use protocol links applicable to coin exchanged * Remove .only * Display QrCode for accounts, addresses & contracts (#4329) * Allow Portal to be used as top-level modal (#4338) * Portal * Allow Portal to be used in as both top-level and popover * modal/popover variable naming * export Portal in ~/ui * Properly handle optional onKeyDown * Add simple Playground Example * Add proper event listener to Portal (#4359) * Display AccountCard name via IdentityName (#4235) * Fix signing (#4363) * Dapp Account Selection & Defaults (#4355) * Add parity_defaultAccount RPC (with subscription) (#4383) * Default Account selector in Signer overlay (#4375) * Typo, fixes #4271 (#4391) * Fix ParityBar account selection overflows (#4405) * Available Dapp selection alignment with Permissions (Portal) (#4374) * registry dapp: make lookup use lower case (#4409) * Dapps use defaultAccount instead of own selectors (#4386) * Poll for defaultAccount to update dapp & overlay subscriptions (#4417) * Poll for defaultAccount (Fixes #4413) * Fix nextTimeout on catch * Store timers * Re-enable default updates on change detection * Add block & timestamp conditions to Signer (#4411) * Extension installation overlay (#4423) * Extension installation overlay * Pr gumbles * Spelling * Update Chrome URL * Fix for non-included jsonrpc * Extend Portal component (as per Modal) #4392

ngotchac added 6 commits January 25, 2017 12:32

Playground // WIP

e898b52

Linting

c504ca8

Add Examples with code

ddf11a9

CSS Linting

de0a780

Linting

e5c5bd6

Add Connected Currency Symbol

3771f52

ngotchac added A0-pleasereview 🤓 Pull request needs code review. M7-ui labels Jan 25, 2017

jacogr reviewed Jan 26, 2017

View reviewed changes

jacogr added A5-grumble 🔥 Pull request has minor issues that must be addressed before merging. and removed A0-pleasereview 🤓 Pull request needs code review. labels Jan 26, 2017

jacogr reviewed Jan 26, 2017

View reviewed changes

js/src/playground/index.js

@@ -0,0 +1,17 @@

// Copyright 2015, 2016 Parity Technologies (UK) Ltd.

Copy link

Contributor

jacogr Jan 26, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

2015-2017 (as per updates)

jacogr reviewed Jan 26, 2017

View reviewed changes

js/src/playground/store.js

@@ -0,0 +1,51 @@

// Copyright 2015, 2016 Parity Technologies (UK) Ltd.

Copy link

Contributor

jacogr Jan 26, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

2015-2017 (as per updates)

jacogr reviewed Jan 26, 2017

View reviewed changes

2015-2017

5b153f9

jacogr added 5 commits January 26, 2017 12:37

2015-2017

0c330a9

2015-2017

34c6a14

2015-2017

86de6d1

2015-2017

7e811c6

2015-2017

20a0d4f

ngotchac added A3-inprogress ⏳ Pull request is in progress. No review needed at this stage. and removed A5-grumble 🔥 Pull request has minor issues that must be addressed before merging. labels Jan 26, 2017

ngotchac added 6 commits January 26, 2017 13:39

Merge branch 'master' into ng-playground

6feb044

Added renderSymbol tests

23aec8f

PR grumbles

c1c406a

Add Eth and Btc QRCode examples

4b8124b

2015-2017

f493ca5

Add tests for playground

ac2f15e

ngotchac added A0-pleasereview 🤓 Pull request needs code review. and removed A3-inprogress ⏳ Pull request is in progress. No review needed at this stage. labels Jan 26, 2017

jacogr added A7-looksgoodtestsfail 🤖 Pull request is reviewed well, but cannot be merged due to tests failing. and removed A6-mustntgrumble 💦 Pull request has areas for improvement. The author need not address them before merging. labels Jan 26, 2017

Fixing tests

37352f7

ngotchac added A8-looksgood 🦄 Pull request is reviewed well. and removed A7-looksgoodtestsfail 🤖 Pull request is reviewed well, but cannot be merged due to tests failing. labels Jan 26, 2017

jacogr merged commit e19c28b into master Jan 26, 2017

jacogr deleted the ng-playground branch January 26, 2017 15:15

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add a Playground for the UI Components #4301

Add a Playground for the UI Components #4301

ngotchac commented Jan 25, 2017

tomusdrw commented Jan 25, 2017

ngotchac commented Jan 25, 2017

jacogr Jan 26, 2017

jacogr Jan 26, 2017 •

edited

Loading

jacogr Jan 26, 2017

jacogr Jan 26, 2017

jacogr Jan 26, 2017

jacogr Jan 26, 2017

jacogr Jan 26, 2017 •

edited

Loading

ngotchac Jan 26, 2017

jacogr Jan 26, 2017

ngotchac Jan 26, 2017

jacogr Jan 26, 2017

jacogr Jan 26, 2017 •

edited

Loading

jacogr Jan 26, 2017

jacogr Jan 26, 2017

jacogr Jan 26, 2017

jacogr Jan 26, 2017

jacogr Jan 26, 2017

jacogr Jan 26, 2017

jacogr Jan 26, 2017

jacogr Jan 26, 2017 •

edited

Loading

jacogr commented Jan 26, 2017 •

edited

Loading

		@@ -0,0 +1,17 @@
		// Copyright 2015, 2016 Parity Technologies (UK) Ltd.

		@@ -0,0 +1,87 @@
		/* Copyright 2015, 2016 Parity Technologies (UK) Ltd.

		@@ -0,0 +1,88 @@
		// Copyright 2015, 2016 Parity Technologies (UK) Ltd.

		@@ -0,0 +1,55 @@
		// Copyright 2015, 2016 Parity Technologies (UK) Ltd.

		@@ -0,0 +1,51 @@
		// Copyright 2015, 2016 Parity Technologies (UK) Ltd.

		@@ -0,0 +1,49 @@
		// Copyright 2015, 2016 Parity Technologies (UK) Ltd.

		@@ -0,0 +1,94 @@
		// Copyright 2015, 2016 Parity Technologies (UK) Ltd.

Add a Playground for the UI Components #4301

Add a Playground for the UI Components #4301

Conversation

ngotchac commented Jan 25, 2017

tomusdrw commented Jan 25, 2017

ngotchac commented Jan 25, 2017

Choose a reason for hiding this comment

jacogr Jan 26, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jacogr Jan 26, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jacogr Jan 26, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jacogr Jan 26, 2017 • edited Loading

Choose a reason for hiding this comment

jacogr commented Jan 26, 2017 • edited Loading

jacogr Jan 26, 2017 •

edited

Loading

jacogr Jan 26, 2017 •

edited

Loading

jacogr Jan 26, 2017 •

edited

Loading

jacogr Jan 26, 2017 •

edited

Loading

jacogr commented Jan 26, 2017 •

edited

Loading