Responsive

.babelrc

@@ -51,7 +51,16 @@
     "development": {
       "plugins": [
         "babel-plugin-styled-components",
-        "react-hot-loader/babel"
+        "react-refresh/babel"
+      ],
+      "presets": [
+        [
+          "@babel/preset-react",
+          {
+            "development": true,
+            "runtime": "automatic"
+          }
+        ]
       ]
     }
   },

.eslintrc

@@ -15,12 +15,22 @@
     "import/namespace": 0,
     "import/no-unresolved": 0,
     "import/no-named-as-default": 2,
+    "import/no-cycle": 0,
+    "import/no-import-module-exports": 1,
+    "import/no-useless-path-segments": 1,
     "comma-dangle": 0,  // not sure why airbnb turned this on. gross!
+    "default-param-last": 0,
+    "no-else-return": 0,
     "indent": 0,
     "no-console": 0,
     "no-alert": 0,
+    "no-import-assign": 2,
+    "no-promise-executor-return": 1,
+    "no-restricted-exports": 1,
     "no-underscore-dangle": 0,
+    "prefer-object-spread": 0,
     "max-len": [1, 120, 2, {"ignoreComments": true, "ignoreTemplateLiterals": true}],
+    "max-classes-per-file": 0,
     "quote-props": [1, "as-needed"],
     "no-unused-vars": [1, {"vars": "local", "args": "none"}],
     "consistent-return": ["error", { "treatUndefinedAsUnspecified": true }],
@@ -30,11 +40,26 @@
       "html": false
     }],
     "newline-per-chained-call": 0,
+    "lines-between-class-members": 0,
     "react/prefer-stateless-function": [2,
       { "ignorePureComponents": true
     }],
     "class-methods-use-this": 0,
-    "react/jsx-no-bind": [2, {"allowBind": true, "allowArrowFunctions": true}],
+    "react/button-has-type": 0,
+    "react/destructuring-assignment": 0,
+    "react/function-component-definition": 0,
+    "react/jsx-curly-newline": 0,
+    "react/jsx-fragments": 0,
+    "react/jsx-no-bind": 0,
+    "react/jsx-no-useless-fragment": 1,
+    "react/jsx-one-expression-per-line": 0,
+    "react/jsx-props-no-spreading": 0,
+    "react/jsx-wrap-multilines": 0,
+    "react/no-access-state-in-setstate": 1,
+    "react/no-deprecated": 1,
+    "react/no-unused-class-component-methods": 1,
+    "react/sort-comp": 0,
+    "react/static-property-placement": 1,
     "no-return-assign": [2, "except-parens"],
     "jsx-a11y/anchor-is-valid": [
       "error",
@@ -61,6 +86,8 @@
         "allowChildren": false
       }
     ],
+    "jsx-a11y/control-has-associated-label": 1,
+    "jsx-a11y/label-has-associated-control": 1,
     "prettier/prettier": [
       "error"
     ]

.prettierrc

@@ -15,5 +15,5 @@
   "trailingComma": "none",
   "useTabs": false,
   "quoteProps": "as-needed",
-  "endOfLine":"auto"
-}
+  "endOfLine": "auto"
+}

client/common/Button.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { Link } from 'react-router';
+import { Link } from 'react-router-dom';
 
 import { remSize, prop } from '../theme';
 

client/common/ButtonOrLink.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link } from 'react-router';
+import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 
 /**

client/common/FinalFormField.jsx

@@ -0,0 +1,51 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Field } from 'react-final-form';
+import FormField from './FormField';
+
+function FinalFormField({
+  name,
+  validate,
+  validateFields,
+  initialValue,
+  ...rest
+}) {
+  return (
+    <Field
+      name={name}
+      validate={validate}
+      validateFields={validateFields}
+      initialValue={initialValue}
+    >
+      {(field) => (
+        <FormField
+          {...rest}
+          {...field.input}
+          hasError={field.meta.touched && !!field.meta.error}
+          error={field.meta.error}
+        />
+      )}
+    </Field>
+  );
+}
+
+FinalFormField.propTypes = {
+  id: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  ariaLabel: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired,
+  autoComplete: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  validate: PropTypes.func,
+  validateFields: PropTypes.arrayOf(PropTypes.string),
+  initialValue: PropTypes.string
+};
+
+FinalFormField.defaultProps = {
+  autoComplete: undefined,
+  validate: undefined,
+  validateFields: undefined,
+  initialValue: ''
+};
+
+export default FinalFormField;

client/common/FormField.jsx

@@ -0,0 +1,32 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+function FormField({ id, label, ariaLabel, hasError, error, ...rest }) {
+  return (
+    <p className="form__field">
+      <label htmlFor={id} className="form__label">
+        {label}
+      </label>
+      <input className="form__input" aria-label={ariaLabel} id={id} {...rest} />
+      {hasError && <span className="form-error">{error}</span>}
+    </p>
+  );
+}
+
+FormField.propTypes = {
+  id: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  ariaLabel: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired,
+  autoComplete: PropTypes.string,
+  hasError: PropTypes.bool,
+  error: PropTypes.string
+};
+
+FormField.defaultProps = {
+  autoComplete: null,
+  hasError: false,
+  error: null
+};
+
+export default FormField;

client/common/icons.jsx

@@ -13,6 +13,8 @@ import DropdownArrow from '../images/down-filled-triangle.svg';
 import Preferences from '../images/preferences.svg';
 import Play from '../images/triangle-arrow-right.svg';
 import More from '../images/more.svg';
+import Editor from '../images/editor.svg';
+import Account from '../images/account.svg';
 import Code from '../images/code.svg';
 import Save from '../images/save.svg';
 import Terminal from '../images/terminal.svg';
@@ -87,12 +89,12 @@ export const DropdownArrowIcon = withLabel(DropdownArrow);
 export const PreferencesIcon = withLabel(Preferences);
 export const PlayIcon = withLabel(Play);
 export const MoreIcon = withLabel(More);
+export const EditorIcon = withLabel(Editor);
 export const TerminalIcon = withLabel(Terminal);
 export const CodeIcon = withLabel(Code);
 export const SaveIcon = withLabel(Save);
-
 export const FolderIcon = withLabel(Folder);
-
+export const AccountIcon = withLabel(Account);
 export const CircleTerminalIcon = withLabel(CircleTerminal);
 export const CircleFolderIcon = withLabel(CircleFolder);
 export const CircleInfoIcon = withLabel(CircleInfo);