Ui 2 depends & fixes (#5590)

* File paths

* Align balance overlays & sizes

* Copy works as expected

* Re-arrange imports

* Icon props

* Move packages to their original dependencies

* Dependencies to packages

* Update test babel overrides

js/package.json

@@ -161,61 +161,33 @@
   "dependencies": {
     "@parity/abi": "file:src/abi",
     "@parity/api": "file:src/api",
+    "@parity/dapps": "file:src/dapps",
     "@parity/jsonrpc": "file:src/jsonrpc",
     "@parity/shared": "file:src/shared",
+    "@parity/shell": "file:src/shell",
     "@parity/ui": "file:src/ui",
+    "@parity/views": "file:src/views",
     "@parity/wordlist": "1.0.1",
-    "base32.js": "0.1.0",
-    "bignumber.js": "3.0.1",
-    "bytes": "2.4.0",
-    "date-difference": "1.0.0",
-    "debounce": "1.0.0",
-    "es6-error": "4.0.0",
     "es6-promise": "4.0.5",
-    "ethereumjs-tx": "1.2.5",
-    "eventemitter3": "2.0.2",
     "flat": "2.0.1",
-    "format-json": "1.0.3",
-    "format-number": "2.0.1",
     "isomorphic-fetch": "2.2.1",
-    "js-sha3": "0.5.5",
     "lodash": "4.17.2",
     "loglevel": "1.4.1",
-    "marked": "0.3.6",
-    "material-ui": "0.16.5",
-    "mobx": "2.6.4",
-    "mobx-react": "4.0.3",
     "moment": "2.17.0",
     "napa": "2.3.0",
-    "phoneformat.js": "1.0.3",
     "promise-worker": "1.1.1",
-    "push.js": "0.0.11",
-    "qs": "6.3.0",
     "react": "15.4.2",
-    "react-addons-css-transition-group": "15.4.2",
     "react-dom": "15.4.2",
-    "react-element-to-jsx-string": "6.0.0",
     "react-intl": "2.1.5",
-    "react-markdown": "2.4.4",
-    "react-redux": "4.4.6",
     "react-router": "3.0.0",
     "react-router-redux": "4.0.7",
     "react-tap-event-plugin": "2.0.1",
     "react-tooltip": "3.2.2",
-    "redux": "3.6.0",
-    "redux-actions": "1.1.0",
-    "redux-thunk": "2.1.0",
-    "rlp": "2.0.0",
-    "scryptsy": "2.0.0",
-    "solc": "ngotchac/solc-js",
     "store": "1.3.20",
     "sw-toolbox": "^3.6.0",
     "u2f-api": "0.0.9",
     "u2f-api-polyfill": "0.4.3",
-    "useragent.js": "0.5.6",
     "utf8": "2.1.2",
-    "valid-url": "1.0.9",
-    "validator": "6.2.0",
     "web3": "0.17.0-beta",
     "whatwg-fetch": "2.0.1",
     "worker-loader": "^0.8.0",

js/src/api/package.json

@@ -30,6 +30,7 @@
     "@parity/jsonrpc": "file:../jsonrpc",
     "bignumber.js": "3.0.1",
     "blockies": "0.0.2",
+    "es6-error": "4.0.0",
     "ethereumjs-tx": "1.2.5",
     "eventemitter3": "2.0.2",
     "js-sha3": "0.5.5",

js/src/dapps/README.md

@@ -0,0 +1 @@
+# Parity builtin dapps

js/src/dapps/package.json

@@ -14,6 +14,9 @@
   "keywords": [],
   "scripts": {},
   "devDependencies": {},
-  "dependencies": {},
+  "dependencies": {
+    "material-ui": "0.16.5",
+    "validator": "6.2.0"
+  },
   "peerDependencies": {}
 }

js/src/dapps/tokenreg/Inputs/validation.js

@@ -14,7 +14,7 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-import isURL from 'validator/lib/isURL';
+import validator from 'validator';
 
 import { api } from '../parity';
 
@@ -211,7 +211,7 @@ const validateHex = (string) => {
 };
 
 const validateURL = (string) => {
-  if (!isURL(string.toString())) {
+  if (!validator.isURL(string.toString())) {
     return {
       error: ERRORS.invalidURL,
       valid: false

js/src/shared/README.md

@@ -0,0 +1 @@
+# Parity shared non-ui components

js/src/shared/package.json

@@ -14,6 +14,17 @@
   "keywords": [],
   "scripts": {},
   "devDependencies": {},
-  "dependencies": {},
+  "dependencies": {
+    "mobx": "2.6.4",
+    "mobx-react": "4.0.3",
+    "push.js": "0.0.11",
+    "react-redux": "4.4.6",
+    "redux": "3.6.0",
+    "redux-actions": "1.1.0",
+    "redux-thunk": "2.1.0",
+    "scryptsy": "2.0.0",
+    "solc": "ngotchac/solc-js",
+    "yargs": "4.7.1"
+  },
   "peerDependencies": {}
 }

js/src/shell/README.md

@@ -0,0 +1 @@
+# Parity shell & dapp launcher

js/src/shell/package.json

@@ -14,6 +14,9 @@
   "keywords": [],
   "scripts": {},
   "devDependencies": {},
-  "dependencies": {},
+  "dependencies": {
+    "qs": "6.3.0",
+    "useragent.js": "0.5.6"
+  },
   "peerDependencies": {}
 }

js/src/ui/Actionbar/Export/export.js

@@ -19,10 +19,10 @@ import { FormattedMessage } from 'react-intl';
 
 import FileSaver from 'file-saver';
 
-import Button from '../../Button';
+import Button from '~/ui/Button';
-import { FileDownloadIcon } from '../../Icons';
+import { FileDownloadIcon } from '~/ui/Icons';
 
-class ActionbarExport extends Component {
+export default class ActionbarExport extends Component {
   static propTypes = {
     content: PropTypes.oneOfType([
       PropTypes.string,
@@ -58,5 +58,3 @@ class ActionbarExport extends Component {
     FileSaver.saveAs(blob, `${filename}.json`);
   }
 }
-
-export default ActionbarExport;

js/src/ui/Actionbar/Import/import.js

@@ -19,10 +19,10 @@ import { FormattedMessage } from 'react-intl';
 
 import { nodeOrStringProptype } from '@parity/shared/util/proptypes';
 
-import Button from '../../Button';
+import Button from '~/ui/Button';
-import FileSelect from '../../Form/FileSelect';
+import FileSelect from '~/ui/Form/FileSelect';
-import { CancelIcon, DoneIcon, FileUploadIcon } from '../../Icons';
+import { CancelIcon, DoneIcon, FileUploadIcon } from '~/ui/Icons';
-import Portal from '../../Portal';
+import Portal from '~/ui/Portal';
 
 import styles from './import.css';
 

js/src/ui/Actionbar/Search/search.js

@@ -17,9 +17,9 @@
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import Button from '../../Button';
+import Button from '~/ui/Button';
-import InputChip from '../../Form/InputChip';
+import InputChip from '~/ui/Form/InputChip';
-import { SearchIcon } from '../../Icons';
+import { SearchIcon } from '~/ui/Icons';
 
 import styles from './search.css';
 

js/src/ui/Actionbar/Sort/sort.js

@@ -21,8 +21,8 @@ import { observer } from 'mobx-react';
 import IconMenu from 'material-ui/IconMenu';
 import MenuItem from 'material-ui/MenuItem';
 
-import Button from '../../Button';
+import Button from '~/ui/Button';
-import { SortIcon } from '../../Icons';
+import { SortIcon } from '~/ui/Icons';
 
 import SortStore from './sortStore';
 import styles from './sort.css';

js/src/ui/Badge/badge.css

@@ -14,12 +14,13 @@
 /* You should have received a copy of the GNU General Public License
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
+
 .bubble {
   border-radius: 50%;
-  padding: 3px 5px;
   color: white;
   font-size: 0.7em;
   line-height: 1em;
+  padding: 3px 5px;
 }
 
 .default {

js/src/ui/Badge/badge.js

@@ -18,9 +18,9 @@ import React, { PropTypes } from 'react';
 
 import styles from './badge.css';
 
-export default function Badge ({ className, color, value }) {
+export default function Badge ({ className, color = 'default', value }) {
   return (
-    <div className={ `${styles.bubble} ${styles[color || 'default']} ${className}` }>
+    <div className={ `${styles.bubble} ${styles[color]} ${className}` }>
       { value }
     </div>
   );

js/src/ui/Balance/balance.css

@@ -25,7 +25,7 @@ $textColor: white;
   vertical-align: top;
 
   &:not(.full) {
-    height: 2.5em;
+    height: 40px;
     overflow: hidden;
   }
 }

js/src/ui/CopyToClipboard/copyToClipboard.css

@@ -15,7 +15,8 @@
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-.wrapper {
+.icon {
+  cursor: pointer;
   display: inline-block;
 }
 

js/src/ui/CopyToClipboard/copyToClipboard.js

@@ -14,7 +14,6 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-import { IconButton } from 'material-ui';
 import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 import Clipboard from 'react-copy-to-clipboard';
@@ -23,13 +22,10 @@ import { bindActionCreators } from 'redux';
 
 import { showSnackbar } from '@parity/shared/redux/providers/snackbarActions';
 
-import { CopyIcon } from '../Icons';
+import { CopyIcon } from '~/ui/Icons';
-import Theme from '../Theme';
 
 import styles from './copyToClipboard.css';
 
-const { textColor, disabledTextColor } = Theme.flatButton;
-
 class CopyToClipboard extends Component {
   static propTypes = {
     showSnackbar: PropTypes.func.isRequired,
@@ -62,7 +58,6 @@ class CopyToClipboard extends Component {
 
   render () {
     const { data, size } = this.props;
-    const { copied } = this.state;
 
     return (
       <Clipboard
@@ -70,29 +65,14 @@ class CopyToClipboard extends Component {
         text={ data }
       >
         <div
-          className={ styles.wrapper }
+          className={ styles.icon }
           onClick={ this.onClick }
+          style={ {
+            height: size,
+            width: size
+          } }
         >
-          <IconButton
+          <CopyIcon />
-            disableTouchRipple
-            iconStyle={ {
-              height: size,
-              width: size
-            } }
-            style={ {
-              height: size,
-              padding: '0',
-              width: size
-            } }
-          >
-            <CopyIcon
-              color={
-                copied
-                  ? disabledTextColor
-                  : textColor
-              }
-            />
-          </IconButton>
         </div>
       </Clipboard>
     );

js/src/ui/Editor/editor.js

@@ -14,14 +14,14 @@
 // 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, { PropTypes, Component } from 'react';
-
 import 'brace';
+import 'brace/theme/solarized_dark';
+import 'brace/mode/json';
+
+import React, { PropTypes, Component } from 'react';
 import AceEditor from 'react-ace';
 import { noop } from 'lodash';
 
-import 'brace/theme/solarized_dark';
-import 'brace/mode/json';
 import './mode-solidity';
 
 export default class Editor extends Component {

js/src/ui/Errors/errors.js

@@ -18,6 +18,7 @@ import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
+
 import { Snackbar } from '~/ui/Snackbar';
 
 import { closeErrors } from './actions';

js/src/ui/Icons/index.js

@@ -17,62 +17,62 @@
 import React from 'react';
 import { Icon } from 'semantic-ui-react';
 
-export const AccountsIcon = () => <Icon name='university' />;
+export const AccountsIcon = (props) => <Icon name='university' { ...props } />;
-export const AddIcon = () => <Icon name='plus' />;
+export const AddIcon = (props) => <Icon name='plus' { ...props } />;
-export const AddressIcon = () => <Icon name='address book outline' />;
+export const AddressIcon = (props) => <Icon name='address book outline' { ...props } />;
-export const AppsIcon = () => <Icon name='sitemap' />;
+export const AppsIcon = (props) => <Icon name='sitemap' { ...props } />;
-export const AttachFileIcon = () => <Icon name='attach' />;
+export const AttachFileIcon = (props) => <Icon name='attach' { ...props } />;
-export const BackgroundIcon = () => <Icon name='image' />;
+export const BackgroundIcon = (props) => <Icon name='image' { ...props } />;
-export const CancelIcon = () => <Icon name='cancel' />;
+export const CancelIcon = (props) => <Icon name='cancel' { ...props } />;
-export const CheckIcon = () => <Icon name='check' />;
+export const CheckIcon = (props) => <Icon name='check' { ...props } />;
-export const CloseIcon = () => <Icon name='close' />;
+export const CloseIcon = (props) => <Icon name='close' { ...props } />;
-export const CompareIcon = () => <Icon name='exchange' />;
+export const CompareIcon = (props) => <Icon name='exchange' { ...props } />;
-export const ComputerIcon = () => <Icon name='desktop' />;
+export const ComputerIcon = (props) => <Icon name='desktop' { ...props } />;
-export const ContractIcon = () => <Icon name='code' />;
+export const ContractIcon = (props) => <Icon name='code' { ...props } />;
-export const CopyIcon = () => <Icon name='copy' />;
+export const CopyIcon = (props) => <Icon name='copy' { ...props } />;
-export const DashboardIcon = () => <Icon name='cubes' />;
+export const DashboardIcon = (props) => <Icon name='cubes' { ...props } />;
 export const DoneIcon = CheckIcon;
-export const DeleteIcon = () => <Icon name='trash' />;
+export const DeleteIcon = (props) => <Icon name='trash' { ...props } />;
-export const DevelopIcon = () => <Icon name='connectdevelop' />;
+export const DevelopIcon = (props) => <Icon name='connectdevelop' { ...props } />;
-export const DialIcon = () => <Icon name='text telephone' />;
+export const DialIcon = (props) => <Icon name='text telephone' { ...props } />;
-export const EditIcon = () => <Icon name='edit' />;
+export const EditIcon = (props) => <Icon name='edit' { ...props } />;
-export const ErrorIcon = () => <Icon name='exclamation circle' />;
+export const ErrorIcon = (props) => <Icon name='exclamation circle' { ...props } />;
-export const EthernetIcon = () => <Icon name='wifi' />;
+export const EthernetIcon = (props) => <Icon name='wifi' { ...props } />;
-export const FileIcon = () => <Icon name='file outline' />;
+export const FileIcon = (props) => <Icon name='file outline' { ...props } />;
-export const FileDownloadIcon = () => <Icon name='download' />;
+export const FileDownloadIcon = (props) => <Icon name='download' { ...props } />;
-export const FileUploadIcon = () => <Icon name='upload' />;
+export const FileUploadIcon = (props) => <Icon name='upload' { ...props } />;
-export const FingerprintIcon = () => <Icon name='target' />;
+export const FingerprintIcon = (props) => <Icon name='target' { ...props } />;
-export const GasIcon = () => <Icon name='settings' />;
+export const GasIcon = (props) => <Icon name='settings' { ...props } />;
-export const GotoIcon = () => <Icon name='arrow circle right' />;
+export const GotoIcon = (props) => <Icon name='arrow circle right' { ...props } />;
-export const InfoIcon = () => <Icon name='info circle' />;
+export const InfoIcon = (props) => <Icon name='info circle' { ...props } />;
-export const KeyIcon = () => <Icon name='key' />;
+export const KeyIcon = (props) => <Icon name='key' { ...props } />;
-export const KeyboardIcon = () => <Icon name='keyboard' />;
+export const KeyboardIcon = (props) => <Icon name='keyboard' { ...props } />;
-export const LinkIcon = () => <Icon name='linkify' />;
+export const LinkIcon = (props) => <Icon name='linkify' { ...props } />;
-export const ListIcon = () => <Icon name='list ul' />;
+export const ListIcon = (props) => <Icon name='list ul' { ...props } />;
-export const LockedIcon = () => <Icon name='unlock alternate' />;
+export const LockedIcon = (props) => <Icon name='unlock alternate' { ...props } />;
-export const MembershipIcon = () => <Icon name='id card outline' />;
+export const MembershipIcon = (props) => <Icon name='id card outline' { ...props } />;
-export const MoveIcon = () => <Icon name='move' />;
+export const MoveIcon = (props) => <Icon name='move' { ...props } />;
-export const NextIcon = () => <Icon name='chevron right' />;
+export const NextIcon = (props) => <Icon name='chevron right' { ...props } />;
-export const PauseIcon = () => <Icon name='pause' />;
+export const PauseIcon = (props) => <Icon name='pause' { ...props } />;
-export const PlayIcon = () => <Icon name='play' />;
+export const PlayIcon = (props) => <Icon name='play' { ...props } />;
-export const PrevIcon = () => <Icon name='chevron left' />;
+export const PrevIcon = (props) => <Icon name='chevron left' { ...props } />;
-export const PrintIcon = () => <Icon name='print' />;
+export const PrintIcon = (props) => <Icon name='print' { ...props } />;
-export const QrIcon = () => <Icon name='qrcode' />;
+export const QrIcon = (props) => <Icon name='qrcode' { ...props } />;
-export const RefreshIcon = () => <Icon name='refresh' />;
+export const RefreshIcon = (props) => <Icon name='refresh' { ...props } />;
-export const RemoveIcon = () => <Icon name='remove' />;
+export const RemoveIcon = (props) => <Icon name='remove' { ...props } />;
-export const ReorderIcon = () => <Icon name='align justify' />;
+export const ReorderIcon = (props) => <Icon name='align justify' { ...props } />;
-export const ReplayIcon = () => <Icon name='retweet' />;
+export const ReplayIcon = (props) => <Icon name='retweet' { ...props } />;
-export const SaveIcon = () => <Icon name='save' />;
+export const SaveIcon = (props) => <Icon name='save' { ...props } />;
-export const SearchIcon = () => <Icon name='search' />;
+export const SearchIcon = (props) => <Icon name='search' { ...props } />;
-export const SendIcon = () => <Icon name='send' />;
+export const SendIcon = (props) => <Icon name='send' { ...props } />;
-export const SettingsIcon = () => <Icon name='settings' />;
+export const SettingsIcon = (props) => <Icon name='settings' { ...props } />;
-export const SnoozeIcon = () => <Icon name='clock' />;
+export const SnoozeIcon = (props) => <Icon name='clock' { ...props } />;
-export const SortIcon = () => <Icon name='filter' />;
+export const SortIcon = (props) => <Icon name='filter' { ...props } />;
-export const StarIcon = () => <Icon name='star' />;
+export const StarIcon = (props) => <Icon name='star' { ...props } />;
-export const StatusIcon = () => <Icon name='signal' />;
+export const StatusIcon = (props) => <Icon name='signal' { ...props } />;
-export const UnlockedIcon = () => <Icon name='unlock' />;
+export const UnlockedIcon = (props) => <Icon name='unlock' { ...props } />;
-export const UpdateIcon = () => <Icon name='cloud download' />;
+export const UpdateIcon = (props) => <Icon name='cloud download' { ...props } />;
-export const UpdateWaitIcon = () => <Icon name='wait' />;
+export const UpdateWaitIcon = (props) => <Icon name='wait' { ...props } />;
-export const VisibleIcon = () => <Icon name='eye' />;
+export const VisibleIcon = (props) => <Icon name='eye' { ...props } />;
-export const VerifyIcon = () => <Icon name='shield' />;
+export const VerifyIcon = (props) => <Icon name='shield' { ...props } />;
-export const VpnIcon = () => <Icon name='world' />;
+export const VpnIcon = (props) => <Icon name='world' { ...props } />;

js/src/ui/IdentityName/identityName.js

@@ -20,7 +20,7 @@ import { connect } from 'react-redux';
 
 import { isNullAddress } from '@parity/shared/util/validation';
 
-import ShortenedHash from '../ShortenedHash';
+import ShortenedHash from '~/ui/ShortenedHash';
 
 const defaultName = (
   <FormattedMessage

js/src/ui/REDAME.md

@@ -0,0 +1 @@
+# Parity UI component library

js/src/ui/package.json

@@ -16,11 +16,11 @@
     "url": "git+https://github.com/paritytech/parity.git"
   },
   "keywords": [],
-  "scripts": {},
   "devDependencies": {},
   "dependencies": {
     "bignumber.js": "3.0.1",
     "brace": "0.9.0",
+    "date-difference": "1.0.0",
     "file-saver": "1.3.3",
     "geopattern": "1.2.3",
     "js-sha3": "0.5.5",

js/src/views/Accounts/Summary/summary.js

@@ -24,8 +24,7 @@ import { FormattedMessage } from 'react-intl';
 
 import { arrayOrObjectProptype, nullableProptype } from '@parity/shared/util/proptypes';
 
-import { Balance, Container, ContainerTitle, CopyToClipboard, IdentityIcon, IdentityName, Tags, VaultTag } from '~/ui';
+import { Balance, Certifications, Container, ContainerTitle, CopyToClipboard, IdentityIcon, IdentityName, Tags, VaultTag } from '~/ui';
-import Certifications from '~/ui/Certifications';
 
 import styles from '../accounts.css';
 

js/src/views/Accounts/accounts.css

@@ -62,7 +62,7 @@
   }
 
   .overlay {
-    margin-top: -3.25em;
+    margin-top: -51px;
   }
 
   .owners {

js/src/views/README.md

@@ -0,0 +1 @@
+# Parity wallet dapps

js/src/views/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@parity/view",
+  "name": "@parity/views",
   "description": "Parity wallet dapps",
   "version": "0.0.0",
   "main": "index.js",
@@ -14,6 +14,14 @@
   "keywords": [],
   "scripts": {},
   "devDependencies": {},
-  "dependencies": {},
+  "dependencies": {
+    "base32.js": "0.1.0",
+    "bytes": "2.4.0",
+    "format-number": "2.0.1",
+    "phoneformat.js": "1.0.3",
+    "react-element-to-jsx-string": "6.0.0",
+    "react-markdown": "2.4.4",
+    "rlp": "2.0.0"
+  },
   "peerDependencies": {}
 }

js/test/babel.js

@@ -15,5 +15,5 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 require('babel-register')({
-  ignore: /node_modules\/(?!@parity\/(abi|api|jsonrpc|shared|ui))/
+  ignore: /node_modules\/(?!@parity\/(abi|api|dapps|jsonrpc|shared|shell|views|ui))/
 });

js/webpack/rules/parity.js

@@ -16,6 +16,6 @@
 
 module.exports = {
   test: /\.js$/,
-  include: /node_modules\/@parity\/(abi|api|jsonrpc|shared|ui|wordlist)/,
+  include: /node_modules\/@parity\/(abi|api|dapps|jsonrpc|shared|shell|ui|views|wordlist)/,
   use: 'babel-loader'
 };