Testing using WordPress Components

.gitignore

@@ -12,3 +12,4 @@ release/
 .DS_Store
 dev-app-update.yml
 lib/state/data/test_account.json
+stats.json

Makefile

@@ -50,6 +50,10 @@ PUBLISH ?= onTag
 
 
 # Main targets
+
+.PHONY: stats
+stats:
+	@NODE_ENV=$(NODE_ENV) npx webpack --mode production --config ./webpack.config.js --json > stats.json
 .PHONY: start
 start:
 	@NODE_ENV=$(NODE_ENV) DEV_SERVER=$(DEV_SERVER) npx electron . --inspect
@@ -62,7 +66,7 @@ dev:
 dev-server:
 	@$(MAKE) build NODE_ENV=$(NODE_ENV)
 
-	@NODE_ENV=$(NODE_ENV) npx webpack-dev-server --config ./webpack.config.js --content-base dist --host $(HOST) --port $(PORT) --hot
+	@NODE_ENV=$(NODE_ENV) npx webpack serve --config ./webpack.config.js --content-base dist --host $(HOST) --port $(PORT) --hot
 
 .PHONY: test
 test:
@@ -87,7 +91,7 @@ endif
 # Build utils
 .PHONY: build-app
 build-app:
-	@NODE_ENV=$(NODE_ENV) npx webpack $(if $(IS_PRODUCTION),-p) --config ./webpack.config.js
+	@NODE_ENV=$(NODE_ENV) npx webpack $(if $(IS_PRODUCTION),--mode production) --config ./webpack.config.js
 
 .PHONY: build-if-not-exists
 build-if-not-exists: config.json

babel.config.js

@@ -32,6 +32,7 @@ module.exports = function (api) {
   };
 
   return {
+    sourceType: 'unambiguous',
     presets,
     plugins,
     env,

lib/auth/index.tsx

@@ -5,7 +5,7 @@ import { get } from 'lodash';
 import getConfig from '../../get-config';
 import MailIcon from '../icons/mail';
 import SimplenoteLogo from '../icons/simplenote';
-import Spinner from '../components/spinner';
+import Spinner from '@wordpress/components';
 import { isElectron, isMac } from '../utils/platform';
 import { viewExternalUrl } from '../utils/url-utils';
 
@@ -216,11 +216,7 @@ export class Auth extends Component<Props> {
             onClick={this.onSubmit}
             type="submit"
           >
-            {this.props.authPending ? (
-              <Spinner isWhite={true} size={20} thickness={5} />
-            ) : (
-              buttonLabel
-            )}
+            {this.props.authPending ? <Spinner /> : buttonLabel}
           </button>
 
           {!isCreatingAccount && (

lib/boot.ts

@@ -1,4 +1,5 @@
 import './utils/ensure-platform-support';
+import 'setimmediate';
 
 import { parse } from 'cookie';
 

lib/components/progress-bar/index.tsx

@@ -1,15 +1,24 @@
 import React from 'react';
-import { LinearProgress } from '@material-ui/core';
 
-const ProgressBar: typeof LinearProgress = (props) => {
+type OwnProps = {
+  value: number;
+};
+
+const ProgressBar = (props: OwnProps) => {
+  const { value } = props;
+  const completedStyle = {
+    width: `${value}%`,
+  };
   return (
-    <LinearProgress
-      classes={{
-        root: 'progress-bar',
-        bar: 'progress-bar__bar',
-      }}
-      {...props}
-    />
+    <div
+      className="progress-bar"
+      role="progressbar"
+      aria-valuenow={value}
+      aria-valuemin={0}
+      aria-valuemax={100}
+    >
+      <div className="completed" style={completedStyle}></div>
+    </div>
   );
 };
 

lib/components/progress-bar/style.scss

@@ -1,4 +1,5 @@
-.progress-bar {
+.progress-bar .completed {
+  height: 4px;
   @at-root .theme-light & {
     background-color: $studio-gray-5;
   }
@@ -7,6 +8,11 @@
   }
 }
 
+.progress-bar {
+  width: 100%;
+  height: 4px;
+}
+
 .progress-bar__bar {
   background-color: $studio-gray-50 !important;
 }

lib/connection-status/index.tsx

@@ -1,6 +1,6 @@
 import React, { FunctionComponent } from 'react';
 import { connect } from 'react-redux';
-import { Tooltip } from '@material-ui/core';
+import { Tooltip } from '@wordpress/components';
 import ConnectionIcon from '../icons/connection';
 import NoConnectionIcon from '../icons/no-connection';
 
@@ -20,9 +20,7 @@ export const ConnectionStatus: FunctionComponent<Props> = ({
 }) => (
   <div className="navigation-bar__footer-item theme-color-fg-dim">
     <Tooltip
-      enterDelay={200}
-      classes={{ tooltip: 'icon-button__tooltip' }}
-      title={
+      text={
         connectionStatus === 'green'
           ? 'Simplenote is communicating with the server.'
           : connectionStatus === 'offline'

lib/icon-button/index.tsx

@@ -1,5 +1,5 @@
 import React, { ElementType } from 'react';
-import { Tooltip } from '@material-ui/core';
+import { Tooltip } from '@wordpress/components';
 
 type OwnProps = {
   disableTooltip: boolean;
@@ -10,11 +10,7 @@ type OwnProps = {
 type Props = OwnProps;
 
 export const IconButton = ({ icon, title, ...props }: Props) => (
-  <Tooltip
-    classes={{ tooltip: 'icon-button__tooltip' }}
-    enterDelay={200}
-    title={title}
-  >
+  <Tooltip position="bottom center" text={title}>
     <button
       aria-label={title}
       className="icon-button"

lib/note-info/index.tsx

@@ -2,12 +2,11 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import onClickOutside from 'react-onclickoutside';
 import { includes, isEmpty } from 'lodash';
-import format from 'date-fns/format';
+import { ToggleControl } from '@wordpress/components';
 
 import ClipboardButton from '../components/clipboard-button';
 import LastSyncTime from '../components/last-sync-time';
 import PanelTitle from '../components/panel-title';
-import ToggleControl from '../controls/toggle';
 import CrossIcon from '../icons/cross';
 import getNoteTitleAndPreview from '../utils/note-utils';
 import References from './references';
@@ -56,6 +55,19 @@ export class NoteInfo extends Component<Props> {
     const publishURL = this.getPublishURL(note.publishURL);
     const noteLink = this.getNoteLink(note, noteId);
 
+    const markdownHelp = (
+      <span>
+        Enable markdown formatting on this note.{' '}
+        <a
+          href="https://simplenote.com/help/#markdown'"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Learn more…
+        </a>
+      </span>
+    );
+
     return (
       <div className="note-info theme-color-bg theme-color-fg theme-color-border">
         <div className="note-info-panel note-info-stats theme-color-border">
@@ -130,46 +142,19 @@ export class NoteInfo extends Component<Props> {
           </p>
         </div>
         <div className="note-info-panel note-info-pin theme-color-border">
-          <label className="note-info-item" htmlFor="note-info-pin-checkbox">
-            <span className="note-info-item-text">
-              <span className="note-info-name">Pin to top</span>
-            </span>
-            <span className="note-info-item-control">
-              <ToggleControl
-                id="note-info-pin-checkbox"
-                checked={isPinned}
-                onChange={this.pinNote}
-              />
-            </span>
-          </label>
+          <ToggleControl
+            label="Pin to top"
+            checked={isPinned}
+            onChange={this.pinNote}
+          />
         </div>
         <div className="note-info-panel note-info-markdown theme-color-border">
-          <label
-            className="note-info-item"
-            htmlFor="note-info-markdown-checkbox"
-          >
-            <span className="note-info-item-text">
-              <span className="note-info-name">Markdown</span>
-              <br />
-              <span className="note-info-detail theme-color-fg-dim">
-                Enable markdown formatting on this note.{' '}
-                <a
-                  target="_blank"
-                  href="http://simplenote.com/help/#markdown"
-                  rel="noopener noreferrer"
-                >
-                  Learn more…
-                </a>
-              </span>
-            </span>
-            <span className="note-info-item-control">
-              <ToggleControl
-                id="note-info-markdown-checkbox"
-                checked={isMarkdown}
-                onChange={this.markdownNote}
-              />
-            </span>
-          </label>
+          <ToggleControl
+            label="Markdown"
+            help={markdownHelp}
+            checked={isMarkdown}
+            onChange={this.markdownNote}
+          />
         </div>
         {isPublished && (
           <div className="note-info-panel note-info-public-link theme-color-border">

lib/note-info/style.scss

@@ -100,6 +100,44 @@
       white-space: nowrap;
     }
   }
+  .components-form-toggle.is-checked .components-form-toggle__thumb {
+    transform: translateX(10px);
+  }
+
+  .components-form-toggle.is-checked .components-form-toggle__track {
+    background-color: #1ed15a;
+  }
+
+  .components-form-toggle__thumb {
+    height: 14px;
+    width: 14px;
+    top: 1px;
+    left: 0;
+    border: 0;
+    background-color: #fff;
+  }
+
+  .components-form-toggle__track {
+    width: 24px;
+    height: 16px !important;
+    border: 0 !important;
+    background-color: #c3c4c7;
+  }
+
+  .components-base-control__field {
+    margin-bottom: 0;
+  }
+
+  .components-form-toggle {
+    order: 2;
+    margin-right: 0 !important;
+    width: 24px;
+    height: 16px;
+  }
+
+  .components-toggle-control__label {
+    flex: 1 0 auto;
+  }
 }
 
 .theme-dark .note-info-detail a {