Merge develop

Author: catarak

.eslintrc

@@ -1,5 +1,5 @@
 {
-	"extends": "airbnb",
+	"extends": ["airbnb", "prettier"],
 	"parser": "babel-eslint",
 	"env": {
     "browser": true,
@@ -16,12 +16,12 @@
     "import/no-unresolved": 0,
     "import/no-named-as-default": 2,
     "comma-dangle": 0,  // not sure why airbnb turned this on. gross!
-    "indent": [2, 2, {"SwitchCase": 1}],
+    "indent": 0,
     "no-console": 0,
     "no-alert": 0,
     "no-underscore-dangle": 0,
     "max-len": [1, 120, 2, {"ignoreComments": true, "ignoreTemplateLiterals": true}],
-    "quote-props": [1, "consistent-as-needed"],
+    "quote-props": [1, "as-needed"],
     "no-unused-vars": [1, {"vars": "local", "args": "none"}],
     "consistent-return": ["error", { "treatUndefinedAsUnspecified": true }],
     "no-param-reassign": [2, { "props": false }],
@@ -60,10 +60,13 @@
         },
         "allowChildren": false
       }
+    ],
+    "prettier/prettier": [
+      "error"
     ]
   },
   "plugins": [
-    "react", "jsx-a11y", "import"
+    "react", "jsx-a11y", "import", "prettier"
   ],
   "settings": {
     "import/parser": "babel-eslint",

.prettierrc

@@ -0,0 +1,18 @@
+{
+  "arrowParens": "always",
+  "bracketSpacing": true,
+  "htmlWhitespaceSensitivity": "css",
+  "insertPragma": false,
+  "jsxBracketSameLine": false,
+  "jsxSingleQuote": false,
+  "parser": "babel",
+  "printWidth": 80,
+  "proseWrap": "never",
+  "requirePragma": false,
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "none",
+  "useTabs": false,
+  "quoteProps": "as-needed"
+}

client/common/Button.jsx

@@ -8,7 +8,7 @@ import { remSize, prop } from '../theme';
 const kinds = {
   block: 'block',
   icon: 'icon',
-  inline: 'inline',
+  inline: 'inline'
 };
 
 // The '&&&' will increase the specificity of the
@@ -34,7 +34,7 @@ const StyledButton = styled.button`
     svg * {
       fill: ${prop('Button.default.foreground')};
     }
-    
+
     &:hover:not(:disabled) {
       color: ${prop('Button.hover.foreground')};
       background-color: ${prop('Button.hover.background')};
@@ -115,7 +115,7 @@ const StyledIconButton = styled.button`
     border-radius: 50%;
     padding: ${remSize(8)} ${remSize(25)};
     line-height: 1;
-    
+
     &:hover:not(:disabled) {
       color: ${prop('Button.hover.foreground')};
       background-color: ${prop('Button.hover.background')};
@@ -150,10 +150,24 @@ const StyledIconButton = styled.button`
  * A Button performs an primary action
  */
 const Button = ({
-  children, href, kind, iconBefore, iconAfter, 'aria-label': ariaLabel, to, type, ...props
+  children,
+  href,
+  kind,
+  iconBefore,
+  iconAfter,
+  'aria-label': ariaLabel,
+  to,
+  type,
+  ...props
 }) => {
   const hasChildren = React.Children.count(children) > 0;
-  const content = <>{iconBefore}{hasChildren && <span>{children}</span>}{iconAfter}</>;
+  const content = (
+    <>
+      {iconBefore}
+      {hasChildren && <span>{children}</span>}
+      {iconAfter}
+    </>
+  );
   let StyledComponent = StyledButton;
 
   if (kind === kinds.inline) {
@@ -177,22 +191,36 @@ const Button = ({
   }
 
   if (to) {
-    return <StyledComponent kind={kind} as={Link} aria-label={ariaLabel} to={to} {...props}>{content}</StyledComponent>;
+    return (
+      <StyledComponent
+        kind={kind}
+        as={Link}
+        aria-label={ariaLabel}
+        to={to}
+        {...props}
+      >
+        {content}
+      </StyledComponent>
+    );
   }
 
-  return <StyledComponent kind={kind} aria-label={ariaLabel} type={type} {...props}>{content}</StyledComponent>;
+  return (
+    <StyledComponent kind={kind} aria-label={ariaLabel} type={type} {...props}>
+      {content}
+    </StyledComponent>
+  );
 };
 
 Button.defaultProps = {
-  'children': null,
-  'disabled': false,
-  'iconAfter': null,
-  'iconBefore': null,
-  'kind': kinds.block,
-  'href': null,
+  children: null,
+  disabled: false,
+  iconAfter: null,
+  iconBefore: null,
+  kind: kinds.block,
+  href: null,
   'aria-label': null,
-  'to': null,
-  'type': 'button',
+  to: null,
+  type: 'button'
 };
 
 Button.kinds = kinds;
@@ -202,39 +230,39 @@ Button.propTypes = {
    * The visible part of the button, telling the user what
    * the action is
    */
-  'children': PropTypes.element,
+  children: PropTypes.element,
   /**
     If the button can be activated or not
   */
-  'disabled': PropTypes.bool,
+  disabled: PropTypes.bool,
   /**
    * SVG icon to place after child content
    */
-  'iconAfter': PropTypes.element,
+  iconAfter: PropTypes.element,
   /**
    * SVG icon to place before child content
    */
-  'iconBefore': PropTypes.element,
+  iconBefore: PropTypes.element,
   /**
    * The kind of button - determines how it appears visually
    */
-  'kind': PropTypes.oneOf(Object.values(kinds)),
+  kind: PropTypes.oneOf(Object.values(kinds)),
   /**
    * Specifying an href will use an <a> to link to the URL
    */
-  'href': PropTypes.string,
+  href: PropTypes.string,
   /*
    * An ARIA Label used for accessibility
    */
   'aria-label': PropTypes.string,
   /**
    * Specifying a to URL will use a react-router Link
    */
-  'to': PropTypes.string,
+  to: PropTypes.string,
   /**
    * If using a button, then type is defines the type of button
    */
-  'type': PropTypes.oneOf(['button', 'submit']),
+  type: PropTypes.oneOf(['button', 'submit'])
 };
 
 export default Button;

client/common/Button.stories.jsx

@@ -21,42 +21,45 @@ export const AllFeatures = () => (
 );
 
 export const SubmitButton = () => (
-  <Button type="submit" label="submit">This is a submit button</Button>
+  <Button type="submit" label="submit">
+    This is a submit button
+  </Button>
 );
 
-export const DefaultTypeButton = () => <Button label="login" onClick={action('onClick')}>Log In</Button>;
+export const DefaultTypeButton = () => (
+  <Button label="login" onClick={action('onClick')}>
+    Log In
+  </Button>
+);
 
-export const DisabledButton = () => <Button disabled label="login" onClick={action('onClick')}>Log In</Button>;
+export const DisabledButton = () => (
+  <Button disabled label="login" onClick={action('onClick')}>
+    Log In
+  </Button>
+);
 
 export const AnchorButton = () => (
-  <Button href="http://p5js.org" label="submit">Actually an anchor</Button>
+  <Button href="http://p5js.org" label="submit">
+    Actually an anchor
+  </Button>
 );
 
 export const ReactRouterLink = () => (
-  <Button to="./somewhere" label="submit">Actually a Link</Button>
+  <Button to="./somewhere" label="submit">
+    Actually a Link
+  </Button>
 );
 
 export const ButtonWithIconBefore = () => (
-  <Button
-    iconBefore={<GithubIcon aria-label="Github logo" />}
-  >
-    Create
-  </Button>
+  <Button iconBefore={<GithubIcon aria-label="Github logo" />}>Create</Button>
 );
 
 export const ButtonWithIconAfter = () => (
-  <Button
-    iconAfter={<GithubIcon aria-label="Github logo" />}
-  >
-    Create
-  </Button>
+  <Button iconAfter={<GithubIcon aria-label="Github logo" />}>Create</Button>
 );
 
 export const InlineButtonWithIconAfter = () => (
-  <Button
-    iconAfter={<DropdownArrowIcon />}
-    kind={Button.kinds.inline}
-  >
+  <Button iconAfter={<DropdownArrowIcon />} kind={Button.kinds.inline}>
     File name
   </Button>
 );

client/common/icons.jsx

@@ -23,7 +23,6 @@ import CircleTerminal from '../images/circle-terminal.svg';
 import CircleFolder from '../images/circle-folder.svg';
 import CircleInfo from '../images/circle-info.svg';
 
-
 // HOC that adds the right web accessibility props
 // https://www.scottohara.me/blog/2019/05/22/contextual-images-svgs-and-a11y.html
 
@@ -34,13 +33,17 @@ function withLabel(SvgComponent) {
     const StyledIcon = styled(SvgComponent)`
       &&& {
         color: ${prop('Icon.default')};
-        & g, & path, & polygon {
+        & g,
+        & path,
+        & polygon {
           opacity: 1;
           fill: ${prop('Icon.default')};
         }
         &:hover {
           color: ${prop('Icon.hover')};
-          & g, & path, & polygon {
+          & g,
+          & path,
+          & polygon {
             opacity: 1;
             fill: ${prop('Icon.hover')};
           }
@@ -50,18 +53,16 @@ function withLabel(SvgComponent) {
 
     const { 'aria-label': ariaLabel } = props;
     if (ariaLabel) {
-      return (<StyledIcon
-        {...props}
-        aria-label={ariaLabel}
-        role="img"
-        focusable="false"
-      />);
+      return (
+        <StyledIcon
+          {...props}
+          aria-label={ariaLabel}
+          role="img"
+          focusable="false"
+        />
+      );
     }
-    return (<StyledIcon
-      {...props}
-      aria-hidden
-      focusable="false"
-    />);
+    return <StyledIcon {...props} aria-hidden focusable="false" />;
   };
 
   Icon.propTypes = {

client/common/icons.stories.jsx

@@ -12,7 +12,5 @@ export const AllIcons = () => {
   const names = Object.keys(icons);
 
   const SelectedIcon = icons[select('name', names, names[0])];
-  return (
-    <SelectedIcon />
-  );
+  return <SelectedIcon />;
 };

client/components/AddRemoveButton.jsx

@@ -2,12 +2,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
-
 import AddIcon from '../images/plus.svg';
 import RemoveIcon from '../images/minus.svg';
 
 const AddRemoveButton = ({ type, onClick, t }) => {
-  const alt = type === 'add' ? t('AddRemoveButton.AltAddARIA') : t('AddRemoveButton.AltRemoveARIA');
+  const alt =
+    type === 'add'
+      ? t('AddRemoveButton.AltAddARIA')
+      : t('AddRemoveButton.AltRemoveARIA');
   const Icon = type === 'add' ? AddIcon : RemoveIcon;
 
   return (