prettier rest

src/atoms/Attachment.js

@@ -3,15 +3,11 @@ import Icon from './Icon'
 import classes from './Attachment.local.scss'
 
 const Attachment = ({ value }) => (
-  <a
-    download={value.name}
-    href={value.url}>
+  <a download={value.name} href={value.url}>
     <span className={classes.icon}>
       <Icon color="var(--color-primary)">paperclip</Icon>
     </span>
-    <span className={classes.filename}>
-      {value.name}
-    </span>
+    <span className={classes.filename}>{value.name}</span>
   </a>
 )
 

src/atoms/Badge.js

@@ -4,7 +4,9 @@ import classes from './Badge.local.scss'
 const Badge = ({ count, label, plural }) => (
   <span className={classes.root}>
     <span className={classes.count}>{count}</span>
-    <span className={classes.label}>{plural && count !== 1 ? plural : label}</span>
+    <span className={classes.label}>
+      {plural && count !== 1 ? plural : label}
+    </span>
   </span>
 )
 

src/atoms/Button.js

@@ -2,16 +2,25 @@ import React from 'react'
 import classnames from 'classnames'
 import classes from './Button.local.scss'
 
-const Button = ({ className, children, type = 'button', disabled, primary, onClick}) => (
+const Button = ({
+  className,
+  children,
+  type = 'button',
+  disabled,
+  primary,
+  onClick,
+}) => (
   <button
     className={classnames(className, classes.root, {
       [classes.disabled]: disabled,
-      [classes.primary]: primary
+      [classes.primary]: primary,
     })}
     type={type}
     disabled={disabled}
-    onClick={onClick}>{children}</button>
+    onClick={onClick}
+  >
+    {children}
+  </button>
 )
 
 export default Button
-

src/atoms/Checkbox.js

@@ -2,10 +2,20 @@ import React from 'react'
 import classnames from 'classnames'
 import classes from './Checkbox.local.scss'
 
-const Checkbox = ({ inline, name, value, label, checked, required, onChange }) => (
-  <label className={classnames(classes.root, {
-    [classes.inline]: inline
-  })}>
+const Checkbox = ({
+  inline,
+  name,
+  value,
+  label,
+  checked,
+  required,
+  onChange,
+}) => (
+  <label
+    className={classnames(classes.root, {
+      [classes.inline]: inline,
+    })}
+  >
     <input
       className={classes.input}
       type="checkbox"
@@ -13,7 +23,8 @@ const Checkbox = ({ inline, name, value, label, checked, required, onChange }) =
       value={value}
       checked={checked || false}
       required={required}
-      onChange={onChange}/>
+      onChange={onChange}
+    />
     <span>{label}</span>
   </label>
 )

src/atoms/File.js

@@ -6,9 +6,7 @@ const extension = ({ name }) => name.replace(/^.+\./, '')
 const File = ({ value }) => (
   <div className={classes.root}>
     <div className={classes.icon}>
-      <div className={classes.extension}>
-        {extension(value)}
-      </div>
+      <div className={classes.extension}>{extension(value)}</div>
     </div>
 
     <div className={classes.name}>

src/atoms/Icon.js

@@ -10,9 +10,7 @@ const Icon = ({ children, color = 'black', size = 24 }) => {
   // select the icon
   const icon = icons[name]
 
-  return (
-    <span className={classes.root}>{icon({ color, size })}</span>
-  )
+  return <span className={classes.root}>{icon({ color, size })}</span>
 }
 
 export default Icon

src/atoms/Menu.js

@@ -6,25 +6,25 @@ import classes from './Menu.local.scss'
 // TODO: use a <select> element instead of divs?
 
 class Menu extends React.Component {
-  constructor (props) {
+  constructor(props) {
     super(props)
 
     this.state = {
       open: false,
-      selected: props.value
+      selected: props.value,
     }
   }
 
   toggleMenu = () => {
     this.setState({
-      open: !this.state.open
+      open: !this.state.open,
     })
   }
 
   handleSelect = selected => {
     this.setState({
       selected,
-      open: false
+      open: false,
     })
 
     this.props.onChange(selected)
@@ -36,24 +36,25 @@ class Menu extends React.Component {
     return options.find(option => option.value === value).label
   }
 
-  render () {
+  render() {
     const { label, options, placeholder = 'Choose in the list' } = this.props
     const { open, selected } = this.state
 
     return (
-      <div className={classnames(classes.root, {
-        [classes.open]: open
-      })}>
-        {label && (
-          <span className={classes.label}>{label}</span>
-        )}
+      <div
+        className={classnames(classes.root, {
+          [classes.open]: open,
+        })}
+      >
+        {label && <span className={classes.label}>{label}</span>}
 
         <div className={classes.main}>
           <div className={classes.openerContainer}>
             <button
               type="button"
               className={classes.opener}
-              onClick={this.toggleMenu}>
+              onClick={this.toggleMenu}
+            >
               {selected ? (
                 <span>{this.optionLabel(selected)}</span>
               ) : (
@@ -70,10 +71,12 @@ class Menu extends React.Component {
                   <div
                     key={option.value}
                     className={classnames(classes.option, {
-                      [classes.active]: option.value === selected
+                      [classes.active]: option.value === selected,
                     })}
                     onClick={() => this.handleSelect(option.value)}
-                  >{option.label || option.value}</div>
+                  >
+                    {option.label || option.value}
+                  </div>
                 ))}
               </div>
             )}

src/atoms/Radio.js

@@ -2,13 +2,33 @@ import React from 'react'
 import classnames from 'classnames'
 import classes from './Radio.local.scss'
 
-const inputGradient = color => `radial-gradient(closest-corner at center, ${color} 0%, ${color} 45%, white 45%, white 100%)`
+const inputGradient = color =>
+  `radial-gradient(closest-corner at center, ${color} 0%, ${
+    color
+  } 45%, white 45%, white 100%)`
 
-const Radio = ({ className, color = 'black', inline, name, value, label, checked, required, onChange }) => (
-  <label className={classnames(classes.root, {
-    [classes.inline]: inline,
-    [classes.checked]: checked
-  }, className)} style={{color}}>
+const Radio = ({
+  className,
+  color = 'black',
+  inline,
+  name,
+  value,
+  label,
+  checked,
+  required,
+  onChange,
+}) => (
+  <label
+    className={classnames(
+      classes.root,
+      {
+        [classes.inline]: inline,
+        [classes.checked]: checked,
+      },
+      className,
+    )}
+    style={{ color }}
+  >
     <input
       className={classes.input}
       type="radio"
@@ -16,10 +36,14 @@ const Radio = ({ className, color = 'black', inline, name, value, label, checked
       value={value}
       checked={checked}
       required={required}
-      onChange={onChange}/>
+      onChange={onChange}
+    />
     <span
       className={classes.pseudoInput}
-      style={{ background: checked ? inputGradient(color) : 'transparent' }}> </span>
+      style={{ background: checked ? inputGradient(color) : 'transparent' }}
+    >
+      {' '}
+    </span>
     <span className={classes.label}>{label}</span>
   </label>
 )

src/atoms/Tags.js

@@ -6,11 +6,11 @@ import './Tags.scss'
 // TODO: allow tags to be edited
 
 class Tags extends React.Component {
-  constructor (props) {
+  constructor(props) {
     super(props)
 
     this.state = {
-      tags: props.value || []
+      tags: props.value || [],
     }
   }
 
@@ -34,7 +34,7 @@ class Tags extends React.Component {
     this.props.onChange(tags)
   }
 
-  render () {
+  render() {
     const { tags } = this.state
     const { name, suggestions, placeholder } = this.props
 
@@ -50,7 +50,8 @@ class Tags extends React.Component {
         // delimiters={[]}
         // delimiterChars={[',', ';']}
         handleDelete={this.handleDelete}
-        handleAddition={this.handleAddition}/>
+        handleAddition={this.handleAddition}
+      />
     )
   }
 }

src/atoms/TextField.js

 import React from 'react'
 import classes from './TextField.local.scss'
 
-const TextField = ({ label, name, placeholder, required, type = 'text', value = '', onBlur, onChange }) => (
+const TextField = ({
+  label,
+  name,
+  placeholder,
+  required,
+  type = 'text',
+  value = '',
+  onBlur,
+  onChange,
+}) => (
   <label className={classes.root}>
     {label && <span className={classes.text}>{label}</span>}
     <input
@@ -12,7 +21,8 @@ const TextField = ({ label, name, placeholder, required, type = 'text', value =
       placeholder={placeholder}
       required={required}
       onBlur={onBlur}
-      onChange={onChange}/>
+      onChange={onChange}
+    />
   </label>
 )
 

src/atoms/UploadingFile.js

@@ -7,22 +7,17 @@ const extension = ({ name }) => name.replace(/^.+\./, '')
 
 const UploadingFile = ({ file, error, progress }) => (
   <div className={classes.root}>
-    {!!error && (
-      <div className={classes.error}>
-        {error}
-      </div>
-    )}
+    {!!error && <div className={classes.error}>{error}</div>}
 
     <div className={classes.icon}>
       {!!progress && (
         <div
           className={classes.progress}
-          style={{ top: (progress * 100) + '%' }}/>
+          style={{ top: progress * 100 + '%' }}
+        />
       )}
 
-      <div className={classes.extension}>
-        {extension(file)}
-      </div>
+      <div className={classes.extension}>{extension(file)}</div>
     </div>
 
     <div className={classes.name}>{file.name}</div>

src/atoms/ValidatedField.js

@@ -10,30 +10,31 @@ const ValidatedFieldComponent = ({ component }) => ({ meta, input }) => (
   <div>
     {component(input)}
 
-    {meta.touched && (meta.error || meta.warning) && (
-      <div className={classes.messages}>
-        {meta.error && (
-          <div className={classnames(classes.message, classes.error)}>
-            {meta.error}
-          </div>
-        )}
+    {meta.touched &&
+      (meta.error || meta.warning) && (
+        <div className={classes.messages}>
+          {meta.error && (
+            <div className={classnames(classes.message, classes.error)}>
+              {meta.error}
+            </div>
+          )}
 
-        {meta.warning && (
-          <div className={classnames(classes.message, classes.warning)}>
-            {meta.warning}
-          </div>
-        )}
-      </div>
-    )}
+          {meta.warning && (
+            <div className={classnames(classes.message, classes.warning)}>
+              {meta.warning}
+            </div>
+          )}
+        </div>
+      )}
   </div>
 )
 
 const ValidatedField = ({ fieldComponent, ...rest }) => (
-  <Field {...rest} component={fieldComponent}/>
+  <Field {...rest} component={fieldComponent} />
 )
 
 export default compose(
   withHandlers({
-    fieldComponent: ValidatedFieldComponent
-  })
+    fieldComponent: ValidatedFieldComponent,
+  }),
 )(ValidatedField)

src/molecules/AppBar.js

@@ -6,8 +6,12 @@ import Icon from '../atoms/Icon'
 
 const AppBar = ({ brandLink, brandName, loginLink, logoutLink, userName }) => (
   <div className={classes.root}>
-    <Link to={brandLink || '/'}
-          className={classnames(classes.link, classes.logo)}>{brandName}</Link>
+    <Link
+      to={brandLink || '/'}
+      className={classnames(classes.link, classes.logo)}
+    >
+      {brandName}
+    </Link>
 
     <div>
       {userName && (
@@ -18,11 +22,16 @@ const AppBar = ({ brandLink, brandName, loginLink, logoutLink, userName }) => (
       )}
 
       {userName ? (
-        <Link to={logoutLink}
-              className={classnames(classes.item, classes.link)}>logout</Link>
+        <Link
+          to={logoutLink}
+          className={classnames(classes.item, classes.link)}
+        >
+          logout
+        </Link>
       ) : (
-        <Link to={loginLink}
-              className={classnames(classes.item, classes.link)}>login</Link>
+        <Link to={loginLink} className={classnames(classes.item, classes.link)}>
+          login
+        </Link>
       )}
     </div>
   </div>

src/molecules/Attachments.js

@@ -15,14 +15,10 @@ const Attachments = props => (
         <span className={classes.icon}>
           <Icon color="var(--color-primary)">paperclip</Icon>
         </span>
-        <span className={classes.filename}>
-          {error ? error : 'Uploading…'}
-        </span>
+        <span className={classes.filename}>{error ? error : 'Uploading…'}</span>
       </div>
     )}
-    uploadedFile={value => (
-      <Attachment key={value.url} value={value}/>
-    )}
+    uploadedFile={value => <Attachment key={value.url} value={value} />}
   />
 )
 

src/molecules/Files.js

@@ -3,12 +3,12 @@ import classes from './Files.local.scss'
 import Upload from './Upload'
 
 class Files extends React.Component {
-  constructor (props) {
+  constructor(props) {
     super(props)
 
     this.state = {
       values: props.value || [],
-      uploads: []
+      uploads: [],
     }
   }
 
@@ -22,7 +22,7 @@ class Files extends React.Component {
     Array.from(event.target.files).forEach(file => {
       uploads.push({
         file,
-        request: this.props.uploadFile(file)
+        request: this.props.uploadFile(file),
       })
     })
 
@@ -32,7 +32,7 @@ class Files extends React.Component {
   handleUploadedFile = ({ file, url }) => {
     const values = this.state.values.concat({
       name: file.name,
-      url
+      url,
     })
 
     const uploads = this.state.uploads.filter(item => {
@@ -44,7 +44,7 @@ class Files extends React.Component {
     this.props.onChange(values)
   }
 
-  render () {
+  render() {
     const { name, buttonText, uploadingFile, uploadedFile } = this.props
     const { values, uploads } = this.state
 
@@ -54,7 +54,8 @@ class Files extends React.Component {
           <button
             type="button"
             className={classes.attach}
-            onClick={() => this.fileInput.click()}>
+            onClick={() => this.fileInput.click()}
+          >
             {buttonText}
           </button>
 
@@ -64,19 +65,21 @@ class Files extends React.Component {
             type="file"
             name={name}
             multiple
-            onChange={this.handleChange}/>
+            onChange={this.handleChange}
+          />
         </div>
 
         <div className={classes.files}>
-          {uploads && uploads.map(upload => (
-            <Upload
-              key={upload.file.name}
-              file={upload.file}
-              request={upload.request}
-              handleUploadedFile={this.handleUploadedFile}
-              render={uploadingFile}
-            />
-          ))}
+          {uploads &&
+            uploads.map(upload => (
+              <Upload
+                key={upload.file.name}
+                file={upload.file}
+                request={upload.request}
+                handleUploadedFile={this.handleUploadedFile}
+                render={uploadingFile}
+              />
+            ))}
 
           {values && values.map(uploadedFile)}
         </div>

src/molecules/PlainButton.js

@@ -3,14 +3,23 @@ import classnames from 'classnames'
 import Button from '../atoms/Button'
 import classes from './PlainButton.local.scss'
 
-const PlainButton = ({ className, children, type, disabled, primary, onClick }) => (
+const PlainButton = ({
+  className,
+  children,
+  type,
+  disabled,
+  primary,
+  onClick,
+}) => (
   <Button
     className={classnames(classes.root, className)}
     type={type}
     primary={primary}
     disabled={disabled}
-    onClick={onClick}>{children}</Button>
+    onClick={onClick}
+  >
+    {children}
+  </Button>
 )
 
 export default PlainButton
-

src/molecules/RadioGroup.js

@@ -2,11 +2,11 @@ import React from 'react'
 import Radio from '../atoms/Radio'
 
 class RadioGroup extends React.Component {
-  constructor (props) {
+  constructor(props) {
     super(props)
 
     this.state = {
-      value: props.value
+      value: props.value,
     }
   }
 
@@ -18,7 +18,7 @@ class RadioGroup extends React.Component {
     this.props.onChange(value)
   }
 
-  render () {
+  render() {
     const { inline, name, options, required } = this.props
     const { value } = this.state
 
@@ -34,7 +34,8 @@ class RadioGroup extends React.Component {
             label={option.label}
             color={option.color}
             checked={option.value === value}
-            onChange={this.handleChange}/>
+            onChange={this.handleChange}
+          />
         ))}
       </div>
     )

src/molecules/Supplementary.js

@@ -12,13 +12,11 @@ const Supplementary = props => (
         key={file.name}
         file={file}
         progress={progress}
-        error={error}/>
+        error={error}
+      />
     )}
-    uploadedFile={value => (
-      <File
-        key={value.url}
-        value={value}/>
-    )}/>
+    uploadedFile={value => <File key={value.url} value={value} />}
+  />
 )
 
 export default Supplementary

src/molecules/Upload.js

@@ -9,7 +9,7 @@ class Upload extends React.Component {
     error: undefined,
   }
 
-  componentDidMount () {
+  componentDidMount() {
     const { request } = this.props
 
     request.addEventListener('progress', this.handleProgress)
@@ -23,40 +23,40 @@ class Upload extends React.Component {
     if (!event.lengthComputable) return
 
     this.setState({
-      progress: event.loaded / event.total
+      progress: event.loaded / event.total,
     })
   }
 
   handleLoad = event => {
     if (this.props.request.status === 200) {
       this.setState({
-        progress: 1
+        progress: 1,
       })
 
       this.props.handleUploadedFile({
         file: this.props.file,
-        url: this.props.request.responseText
+        url: this.props.request.responseText,
       })
     } else {
       this.setState({
-        error: 'There was an error'
+        error: 'There was an error',
       })
     }
   }
 
   handleError = event => {
     this.setState({
-      error: 'There was an error'
+      error: 'There was an error',
     })
   }
 
   handleAbort = event => {
     this.setState({
-      error: 'The upload was cancelled'
+      error: 'The upload was cancelled',
     })
   }
 
-  render () {
+  render() {
     const { file, render } = this.props
     const { progress, error } = this.state
 

src/molecules/YesOrNo.js

@@ -5,12 +5,12 @@ import classes from './YesOrNo.local.scss'
 const options = [
   {
     value: 'yes',
-    label: 'Yes'
+    label: 'Yes',
   },
   {
     value: 'no',
-    label: 'No'
-  }
+    label: 'No',
+  },
 ]
 
 const YesOrNo = ({ name, value, required, onChange }) => (
@@ -21,7 +21,8 @@ const YesOrNo = ({ name, value, required, onChange }) => (
     value={value}
     required={required}
     inline={true}
-    onChange={onChange}/>
+    onChange={onChange}
+  />
 )
 
 export default YesOrNo