[DDW-245] Integrate react-polymorph render props in Daedalus

CHANGELOG.md

@@ -3,6 +3,10 @@ Changelog
 
 ## vNext
 
+### Chores
+
+- Integrates the latest features from the develop branch of react-polymorph. Features include: render props architecture, theme composition, and a ThemeProvider HOC. [PR 950](https://github.com/input-output-hk/daedalus/pull/950)
+
 ### Features
 
 - Improved the loading UX ([PR 723](https://github.com/input-output-hk/daedalus/pull/723))

features/step_definitions/select-language-steps.js

@@ -23,7 +23,7 @@ When(/^I open language selection dropdown$/, function () {
 });
 
 When(/^I select Japanese language$/, function () {
-  return this.waitAndClick('//li[contains(text(), "Japanese")]');
+  return this.waitAndClick('//*[@class="SimpleOptions_label"][contains(text(), "Japanese")]');
 });
 
 When(/^I submit the language selection form$/, function () {

features/step_definitions/settings-steps.js

@@ -69,7 +69,7 @@ When(/^I open "Transaction assurance security level" selection dropdown$/, funct
 });
 
 When(/^I select "Strict" assurance level$/, function () {
-  return this.waitAndClick('//li[contains(text(), "Strict")]');
+  return this.waitAndClick('//*[@class="SimpleOptions_label"][contains(text(), "Strict")]');
 });
 
 Then(/^I should have wallet with "Strict" assurance level set$/, async function () {

features/step_definitions/wallets-steps.js

@@ -272,7 +272,7 @@ When(/^I see the create wallet recovery phrase entry dialog$/, function () {
 When(/^I click on recovery phrase mnemonics in correct order$/, async function () {
   for (let i = 0; i < this.recoveryPhrase.length; i++) {
     const recoveryPhraseMnemonic = this.recoveryPhrase[i];
-    await this.waitAndClick(`//button[contains(text(), "${recoveryPhraseMnemonic}") and @class="flat MnemonicWord_component MnemonicWord_active SimpleButton_root"]`);
+    await this.waitAndClick(`//button[contains(text(), "${recoveryPhraseMnemonic}") and @class="flat SimpleButton_root MnemonicWord_root"]`);
   }
 });
 

package.json

@@ -140,13 +140,12 @@
     "react": "15.6.2",
     "react-addons-css-transition-group": "15.6.2",
     "react-copy-to-clipboard": "5.0.1",
-    "react-css-themr": "2.1.2",
     "react-dom": "15.6.2",
     "react-dropzone": "4.2.3",
     "react-intl": "2.4.0",
     "react-markdown": "3.1.0",
     "react-number-format": "3.0.3",
-    "react-polymorph": "0.6.5",
+    "react-polymorph": "input-output-hk/react-polymorph#4f17d79608953b2d61d8dea792af0df106fcf3de",
     "react-router": "3.0.3",
     "react-svg-inline": "2.1.0",
     "recharts": "1.0.0-beta.10",

source/renderer/app/App.js

@@ -1,7 +1,7 @@
 // @flow
 import React, { Component } from 'react';
 import { Provider, observer } from 'mobx-react';
-import { ThemeProvider } from 'react-css-themr';
+import { ThemeProvider } from 'react-polymorph/lib/components/ThemeProvider';
 import DevTools from 'mobx-react-devtools';
 import { Router } from 'react-router';
 import { IntlProvider } from 'react-intl';
@@ -26,11 +26,11 @@ export default class App extends Component<{
     const locale = stores.profile.currentLocale;
     const mobxDevTools = environment.MOBX_DEV_TOOLS ? <DevTools /> : null;
     const currentTheme = stores.profile.currentTheme;
-    const theme = require(`./themes/daedalus/${currentTheme}.js`); // eslint-disable-line
+    const themeVars = require(`./themes/daedalus/${currentTheme}.js`); // eslint-disable-line
 
     return (
       <div>
-        <ThemeManager variables={theme} />
+        <ThemeManager variables={themeVars} />
         <Provider stores={stores} actions={actions}>
           <ThemeProvider theme={daedalusTheme}>
             <IntlProvider {...{ locale, key: locale, messages: translations[locale] }}>

source/renderer/app/components/loading/Loading.js

@@ -4,8 +4,8 @@ import SVGInline from 'react-svg-inline';
 import { observer } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
 import classNames from 'classnames';
-import Button from 'react-polymorph/lib/components/Button';
-import SimpleButtonSkin from 'react-polymorph/lib/skins/simple/raw/ButtonSkin';
+import { Button } from 'react-polymorph/lib/components/Button';
+import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
 import SystemTimeErrorOverlay from './SystemTimeErrorOverlay';
 import LoadingSpinner from '../widgets/LoadingSpinner';
 import daedalusLogo from '../../assets/images/daedalus-logo-loading-grey.inline.svg';
@@ -246,7 +246,7 @@ export default class Loading extends Component<Props, State> {
               className={buttonClasses}
               label={intl.formatMessage(messages.reportIssueButtonLabel)}
               onClick={handleReportIssue}
-              skin={<SimpleButtonSkin />}
+              skin={ButtonSkin}
             />
           </div>
         )}

source/renderer/app/components/loading/SystemTimeErrorOverlay.js

@@ -4,8 +4,8 @@ import humanizeDuration from 'humanize-duration';
 import SVGInline from 'react-svg-inline';
 import { observer } from 'mobx-react';
 import { defineMessages, intlShape, FormattedHTMLMessage } from 'react-intl';
-import Button from 'react-polymorph/lib/components/Button';
-import SimpleButtonSkin from 'react-polymorph/lib/skins/simple/raw/ButtonSkin';
+import { Button } from 'react-polymorph/lib/components/Button';
+import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
 import attentionIcon from '../../assets/images/attention-big-light.inline.svg';
 import styles from './SystemTimeErrorOverlay.scss';
 
@@ -78,7 +78,7 @@ export default class SystemTimeErrorOverlay extends Component<Props> {
         <Button
           className="disclaimer"
           label={problemSolutionLink}
-          skin={<SimpleButtonSkin />}
+          skin={ButtonSkin}
           onClick={this.onProblemSolutionClick.bind(this, problemSolutionLink)}
         />
 

source/renderer/app/components/notifications/NodeUpdateNotification.js

@@ -4,8 +4,8 @@ import SVGInline from 'react-svg-inline';
 import { observer } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
 import classnames from 'classnames';
-import Button from 'react-polymorph/lib/components/Button';
-import SimpleButtonSkin from 'react-polymorph/lib/skins/simple/raw/ButtonSkin';
+import { Button } from 'react-polymorph/lib/components/Button';
+import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
 import styles from './NodeUpdateNotification.scss';
 import arrowIcon from '../../assets/images/arrow.inline.svg';
 
@@ -91,14 +91,14 @@ export default class NodeUpdateNotification extends Component<Props> {
               className={styles.acceptButton}
               label={intl.formatMessage(messages.acceptLabel)}
               onClick={onAccept}
-              skin={<SimpleButtonSkin />}
+              skin={ButtonSkin}
             />
 
             <Button
               className={styles.denyButton}
               label={intl.formatMessage(messages.denyLabel)}
               onClick={onPostpone}
-              skin={<SimpleButtonSkin />}
+              skin={ButtonSkin}
             />
 
           </div>

source/renderer/app/components/profile/bug-report/BugReportDialog.js

@@ -5,12 +5,13 @@ import { observer } from 'mobx-react';
 import { isEmail, isEmpty } from 'validator';
 import classnames from 'classnames';
 import { defineMessages, intlShape, FormattedHTMLMessage } from 'react-intl';
-import Input from 'react-polymorph/lib/components/Input';
-import SimpleInputSkin from 'react-polymorph/lib/skins/simple/raw/InputSkin';
-import TextArea from 'react-polymorph/lib/components/TextArea';
-import SimpleTextAreaSkin from 'react-polymorph/lib/skins/simple/raw/TextAreaSkin';
-import Checkbox from 'react-polymorph/lib/components/Checkbox';
-import SimpleSwitchSkin from 'react-polymorph/lib/skins/simple/raw/SwitchSkin';
+import { Input } from 'react-polymorph/lib/components/Input';
+import { TextArea } from 'react-polymorph/lib/components/TextArea';
+import { Checkbox } from 'react-polymorph/lib/components/Checkbox';
+import { InputSkin } from 'react-polymorph/lib/skins/simple/InputSkin';
+import { TextAreaSkin } from 'react-polymorph/lib/skins/simple/TextAreaSkin';
+import { SwitchSkin } from 'react-polymorph/lib/skins/simple/SwitchSkin';
+import { IDENTIFIERS } from 'react-polymorph/lib/themes/API';
 import ReactToolboxMobxForm from '../../../utils/ReactToolboxMobxForm';
 import DialogCloseButton from '../../widgets/DialogCloseButton';
 import Dialog from '../../widgets/Dialog';
@@ -321,7 +322,7 @@ export default class BugReportDialog extends Component<Props, State> {
                 className="email"
                 {...emailField.bind()}
                 error={emailField.error}
-                skin={<SimpleInputSkin />}
+                skin={InputSkin}
                 onKeyPress={submitOnEnter.bind(this, this.submit)}
               />
             </div>
@@ -331,7 +332,7 @@ export default class BugReportDialog extends Component<Props, State> {
                 className="subject"
                 {...subjectField.bind()}
                 error={subjectField.error}
-                skin={<SimpleInputSkin />}
+                skin={InputSkin}
                 onKeyPress={submitOnEnter.bind(this, this.submit)}
               />
             </div>
@@ -343,7 +344,7 @@ export default class BugReportDialog extends Component<Props, State> {
                 rows={3}
                 {...problemField.bind()}
                 error={problemField.error}
-                skin={<SimpleTextAreaSkin />}
+                skin={TextAreaSkin}
               />
             </div>
 
@@ -354,10 +355,11 @@ export default class BugReportDialog extends Component<Props, State> {
                 </div>
 
                 <Checkbox
+                  themeId={IDENTIFIERS.SWITCH}
                   onChange={this.handleLogsSwitchToggle}
                   label={intl.formatMessage(messages.logsSwitchPlaceholder)}
                   checked={showLogs}
-                  skin={<SimpleSwitchSkin />}
+                  skin={SwitchSkin}
                 />
               </div>
 

source/renderer/app/components/profile/language-selection/LanguageSelectionForm.js

@@ -2,10 +2,10 @@
 import React, { Component } from 'react';
 import classnames from 'classnames';
 import { observer } from 'mobx-react';
-import Select from 'react-polymorph/lib/components/Select';
-import Button from 'react-polymorph/lib/components/Button';
-import SimpleButtonSkin from 'react-polymorph/lib/skins/simple/raw/ButtonSkin';
-import SelectSkin from 'react-polymorph/lib/skins/simple/raw/SelectSkin';
+import { Button } from 'react-polymorph/lib/components/Button';
+import { Select } from 'react-polymorph/lib/components/Select';
+import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
+import { SelectSkin } from 'react-polymorph/lib/skins/simple/SelectSkin';
 import { defineMessages, intlShape } from 'react-intl';
 import ReactToolboxMobxForm from '../../../utils/ReactToolboxMobxForm';
 import LocalizableError from '../../../i18n/LocalizableError';
@@ -84,16 +84,16 @@ export default class LanguageSelectionForm extends Component<Props> {
             className={styles.languageSelect}
             options={languageOptions}
             {...languageId.bind()}
-            skin={<SelectSkin />}
+            skin={SelectSkin}
           />
 
           {error && <p className={styles.error}>{intl.formatMessage(error)}</p>}
 
           <Button
             className={buttonClasses}
             label={intl.formatMessage(messages.submitLabel)}
+            skin={ButtonSkin}
             onClick={this.submit}
-            skin={<SimpleButtonSkin />}
           />
 
         </div>

source/renderer/app/components/profile/terms-of-use/TermsOfUseForm.js

@@ -2,11 +2,11 @@
 import React, { Component } from 'react';
 import classnames from 'classnames';
 import { observer } from 'mobx-react';
-import Button from 'react-polymorph/lib/components/Button';
-import SimpleButtonSkin from 'react-polymorph/lib/skins/simple/raw/ButtonSkin';
+import { Button } from 'react-polymorph/lib/components/Button';
+import { Checkbox } from 'react-polymorph/lib/components/Checkbox';
+import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
+import { CheckboxSkin } from 'react-polymorph/lib/skins/simple/CheckboxSkin';
 import { defineMessages, intlShape } from 'react-intl';
-import Checkbox from 'react-polymorph/lib/components/Checkbox';
-import SimpleCheckboxSkin from 'react-polymorph/lib/skins/simple/raw/CheckboxSkin';
 import LocalizableError from '../../../i18n/LocalizableError';
 import TermsOfUseText from './TermsOfUseText';
 import styles from './TermsOfUseForm.scss';
@@ -82,7 +82,7 @@ export default class TermsOfUseForm extends Component<Props, State> {
               label={intl.formatMessage(messages[checkboxLabel])}
               onChange={this.toggleAcceptance.bind(this)}
               checked={areTermsOfUseAccepted}
-              skin={<SimpleCheckboxSkin />}
+              skin={CheckboxSkin}
             />
           </div>
 
@@ -93,7 +93,7 @@ export default class TermsOfUseForm extends Component<Props, State> {
             label={intl.formatMessage(messages.submitLabel)}
             onClick={this.submit}
             disabled={!areTermsOfUseAccepted}
-            skin={<SimpleButtonSkin />}
+            skin={ButtonSkin}
           />
 
         </div>

source/renderer/app/components/settings/categories/GeneralSettings.js

@@ -2,8 +2,8 @@
 import React, { Component } from 'react';
 import { observer } from 'mobx-react';
 import classNames from 'classnames';
-import Select from 'react-polymorph/lib/components/Select';
-import SelectSkin from 'react-polymorph/lib/skins/simple/raw/SelectSkin';
+import { Select } from 'react-polymorph/lib/components/Select';
+import { SelectSkin } from 'react-polymorph/lib/skins/simple/SelectSkin';
 import { defineMessages, intlShape } from 'react-intl';
 import ReactToolboxMobxForm from '../../../utils/ReactToolboxMobxForm';
 import LocalizableError from '../../../i18n/LocalizableError';
@@ -72,7 +72,7 @@ export default class GeneralSettings extends Component<Props> {
           options={languageOptions}
           {...languageId.bind()}
           onChange={this.selectLanguage}
-          skin={<SelectSkin />}
+          skin={SelectSkin}
         />
 
         {error && <p className={styles.error}>{error}</p>}

source/renderer/app/components/staking/StakingSwitch.js

@@ -1,8 +1,9 @@
 // @flow
 import React, { Component } from 'react';
 import { observer } from 'mobx-react';
-import Checkbox from 'react-polymorph/lib/components/Checkbox';
-import SimpleSwitchSkin from 'react-polymorph/lib/skins/simple/raw/SwitchSkin';
+import { Checkbox } from 'react-polymorph/lib/components/Checkbox';
+import { SwitchSkin } from 'react-polymorph/lib/skins/simple/SwitchSkin';
+import { IDENTIFIERS } from 'react-polymorph/lib/themes/API';
 import styles from './StakingSwitch.scss';
 
 type Props = {
@@ -20,9 +21,10 @@ export default class StakingSwitch extends Component<Props> {
       <div className={styles.component}>
         <div className={styles.label}>Staking</div>
         <Checkbox
+          themeId={IDENTIFIERS.SWITCH}
           onChange={this.handleChange}
           checked={active}
-          skin={<SimpleSwitchSkin />}
+          skin={SwitchSkin}
         />
       </div>
     );

source/renderer/app/components/wallet/WalletCreateDialog.js

@@ -2,10 +2,11 @@
 import React, { Component } from 'react';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
-import Input from 'react-polymorph/lib/components/Input';
-import SimpleInputSkin from 'react-polymorph/lib/skins/simple/raw/InputSkin';
-import Checkbox from 'react-polymorph/lib/components/Checkbox';
-import SimpleSwitchSkin from 'react-polymorph/lib/skins/simple/raw/SwitchSkin';
+import { Checkbox } from 'react-polymorph/lib/components/Checkbox';
+import { Input } from 'react-polymorph/lib/components/Input';
+import { SwitchSkin } from 'react-polymorph/lib/skins/simple/SwitchSkin';
+import { InputSkin } from 'react-polymorph/lib/skins/simple/InputSkin';
+import { IDENTIFIERS } from 'react-polymorph/lib/themes/API';
 import { defineMessages, intlShape } from 'react-intl';
 import ReactToolboxMobxForm from '../../utils/ReactToolboxMobxForm';
 import DialogCloseButton from '../widgets/DialogCloseButton';
@@ -87,7 +88,7 @@ export default class WalletCreateDialog extends Component<Props, State> {
   };
 
   componentDidMount() {
-    setTimeout(() => { this.walletNameInput.focus(); });
+    setTimeout(() => { this.walletNameInput.getRef().focus(); });
   }
 
   walletNameInput: Input;
@@ -210,7 +211,7 @@ export default class WalletCreateDialog extends Component<Props, State> {
           ref={(input) => { this.walletNameInput = input; }}
           {...walletNameField.bind()}
           error={walletNameField.error}
-          skin={<SimpleInputSkin />}
+          skin={InputSkin}
         />
 
         <div className={styles.walletPassword}>
@@ -219,10 +220,11 @@ export default class WalletCreateDialog extends Component<Props, State> {
               {intl.formatMessage(messages.passwordSwitchLabel)}
             </div>
             <Checkbox
+              themeId={IDENTIFIERS.SWITCH}
               onChange={this.handlePasswordSwitchToggle}
               label={intl.formatMessage(messages.passwordSwitchPlaceholder)}
               checked={createPassword}
-              skin={<SimpleSwitchSkin />}
+              skin={SwitchSkin}
             />
           </div>
 
@@ -232,14 +234,14 @@ export default class WalletCreateDialog extends Component<Props, State> {
               onKeyPress={submitOnEnter.bind(this, this.submit)}
               {...walletPasswordField.bind()}
               error={walletPasswordField.error}
-              skin={<SimpleInputSkin />}
+              skin={InputSkin}
             />
             <Input
               className="repeatedPassword"
               onKeyPress={submitOnEnter.bind(this, this.submit)}
               {...repeatedPasswordField.bind()}
               error={repeatedPasswordField.error}
-              skin={<SimpleInputSkin />}
+              skin={InputSkin}
             />
             <p className={styles.passwordInstructions}>
               {intl.formatMessage(globalMessages.passwordInstructions)}