[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
 
 ### Fixes

package.json

@@ -135,13 +135,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": "github:input-output-hk/react-polymorph#develop",
     "react-router": "3.0.3",
     "react-svg-inline": "2.1.0",
     "recharts": "1.0.0-beta.10",

source/renderer/app/About.js

@@ -1,7 +1,7 @@
 // @flow
 import React, { Component } from 'react';
 import { observer } from 'mobx-react';
-import { ThemeProvider } from 'react-css-themr';
+import { ThemeProvider } from 'react-polymorph/lib/components';
 import { IntlProvider } from 'react-intl';
 import AboutPage from './containers/static/AboutPage';
 import { daedalusTheme } from './themes/daedalus';

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';
 import DevTools from 'mobx-react-devtools';
 import { Router } from 'react-router';
 import { IntlProvider } from 'react-intl';

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';
+import { ButtonSkin } from 'react-polymorph/lib/skins/simple';
 import SystemTimeErrorOverlay from './SystemTimeErrorOverlay';
 import LoadingSpinner from '../widgets/LoadingSpinner';
 import daedalusLogo from '../../assets/images/daedalus-logo-loading-grey.inline.svg';
@@ -207,7 +207,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';
+import { ButtonSkin } from 'react-polymorph/lib/skins/simple';
 import attentionIcon from '../../assets/images/attention-big-light.inline.svg';
 import styles from './SystemTimeErrorOverlay.scss';
 
@@ -77,7 +77,7 @@ export default class SystemTimeErrorOverlay extends Component<Props> {
 
         <Button
           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';
+import { ButtonSkin } from 'react-polymorph/lib/skins/simple';
 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,9 @@ 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, TextArea, Checkbox } from 'react-polymorph/lib/components';
+import { InputSkin, TextAreaSkin, SwitchSkin } from 'react-polymorph/lib/skins/simple';
+import { IDENTIFIERS } from 'react-polymorph/lib/themes/API';
 import ReactToolboxMobxForm from '../../../utils/ReactToolboxMobxForm';
 import DialogCloseButton from '../../widgets/DialogCloseButton';
 import Dialog from '../../widgets/Dialog';
@@ -320,7 +317,7 @@ export default class BugReportDialog extends Component<Props, State> {
                 className="email"
                 {...emailField.bind()}
                 error={emailField.error}
-                skin={<SimpleInputSkin />}
+                skin={InputSkin}
               />
             </div>
 
@@ -329,7 +326,7 @@ export default class BugReportDialog extends Component<Props, State> {
                 className="subject"
                 {...subjectField.bind()}
                 error={subjectField.error}
-                skin={<SimpleInputSkin />}
+                skin={InputSkin}
               />
             </div>
 
@@ -340,7 +337,7 @@ export default class BugReportDialog extends Component<Props, State> {
                 rows={3}
                 {...problemField.bind()}
                 error={problemField.error}
-                skin={<SimpleTextAreaSkin />}
+                skin={TextAreaSkin}
               />
             </div>
 
@@ -351,10 +348,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,8 @@
 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, Select } from 'react-polymorph/lib/components';
+import { ButtonSkin, SelectSkin } from 'react-polymorph/lib/skins/simple';
 import { defineMessages, intlShape } from 'react-intl';
 import ReactToolboxMobxForm from '../../../utils/ReactToolboxMobxForm';
 import LocalizableError from '../../../i18n/LocalizableError';
@@ -84,7 +82,7 @@ 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>}
@@ -93,7 +91,7 @@ export default class LanguageSelectionForm extends Component<Props> {
             className={buttonClasses}
             label={intl.formatMessage(messages.submitLabel)}
             onMouseUp={this.submit}
-            skin={<SimpleButtonSkin />}
+            skin={ButtonSkin}
           />
 
         </div>

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

@@ -2,11 +2,9 @@
 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, Checkbox } from 'react-polymorph/lib/components';
+import { ButtonSkin, CheckboxSkin } from 'react-polymorph/lib/skins/simple';
 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 +80,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 +91,7 @@ export default class TermsOfUseForm extends Component<Props, State> {
             label={intl.formatMessage(messages.submitLabel)}
             onMouseUp={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';
+import { SelectSkin } from 'react-polymorph/lib/skins/simple';
 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';
+import { SwitchSkin } from 'react-polymorph/lib/skins/simple';
+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,9 @@
 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, Input } from 'react-polymorph/lib/components';
+import { SwitchSkin, InputSkin } from 'react-polymorph/lib/skins/simple';
+import { IDENTIFIERS } from 'react-polymorph/lib/themes/API';
 import { defineMessages, intlShape } from 'react-intl';
 import ReactToolboxMobxForm from '../../utils/ReactToolboxMobxForm';
 import DialogCloseButton from '../widgets/DialogCloseButton';
@@ -215,7 +214,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}>
@@ -224,10 +223,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>
 
@@ -236,13 +236,13 @@ export default class WalletCreateDialog extends Component<Props, State> {
               className="walletPassword"
               {...walletPasswordField.bind()}
               error={walletPasswordField.error}
-              skin={<SimpleInputSkin />}
+              skin={InputSkin}
             />
             <Input
               className="repeatedPassword"
               {...repeatedPasswordField.bind()}
               error={repeatedPasswordField.error}
-              skin={<SimpleInputSkin />}
+              skin={InputSkin}
             />
             <p className={styles.passwordInstructions}>
               {intl.formatMessage(globalMessages.passwordInstructions)}

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

@@ -6,10 +6,8 @@ import SVGInline from 'react-svg-inline';
 import classnames from 'classnames';
 import CopyToClipboard from 'react-copy-to-clipboard';
 import QRCode from 'qrcode.react';
-import Button from 'react-polymorph/lib/components/Button';
-import SimpleButtonSkin from 'react-polymorph/lib/skins/simple/raw/ButtonSkin';
-import Input from 'react-polymorph/lib/components/Input';
-import SimpleInputSkin from 'react-polymorph/lib/skins/simple/raw/InputSkin';
+import { Button, Input } from 'react-polymorph/lib/components';
+import { ButtonSkin, InputSkin } from 'react-polymorph/lib/skins/simple';
 import ReactToolboxMobxForm from '../../utils/ReactToolboxMobxForm';
 import BorderedBox from '../widgets/BorderedBox';
 import TinySwitch from '../widgets/forms/TinySwitch';
@@ -162,15 +160,15 @@ export default class WalletReceive extends Component<Props, State> {
             className={styles.spendingPassword}
             {...passwordField.bind()}
             error={passwordField.error}
-            skin={<SimpleInputSkin />}
+            skin={InputSkin}
           />
         }
 
         <Button
           className={generateAddressButtonClasses}
           label={intl.formatMessage(messages.generateNewAddressButtonLabel)}
           onMouseUp={this.submit.bind(this)}
-          skin={<SimpleButtonSkin />}
+          skin={ButtonSkin}
         />
       </div>
     );