Prettier 1.0

Author: Ives van Hoorne

src/app/components/Portal.js

@@ -4,7 +4,7 @@ import ReactDOM from 'react-dom';
 
 type Props = {
   children: React.Element<*>,
-}
+};
 
 export default class Portal extends React.Component {
   props: Props;

src/app/components/ReactIcon.js

@@ -6,20 +6,32 @@ export default () => (
     <g>
       <circle fill="currentColor" cx="299.529" cy="299.628" r="50.167" />
       <path
-        fill="none" stroke="currentColor" strokeWidth="20" strokeMiterlimit="10" d="M299.529,197.628
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="20"
+        strokeMiterlimit="10"
+        d="M299.529,197.628
         c67.356,0,129.928,9.665,177.107,25.907c56.844,19.569,91.794,49.233,91.794,76.093c0,27.991-37.041,59.503-98.083,79.728
         c-46.151,15.291-106.879,23.272-170.818,23.272c-65.554,0-127.63-7.492-174.29-23.441c-59.046-20.182-94.611-52.103-94.611-79.559
         c0-26.642,33.37-56.076,89.415-75.616C167.398,207.503,231.515,197.628,299.529,197.628z"
       />
       <path
-        fill="none" stroke="currentColor" strokeWidth="20" strokeMiterlimit="10" d="M210.736,248.922
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="20"
+        strokeMiterlimit="10"
+        d="M210.736,248.922
         c33.649-58.348,73.281-107.724,110.92-140.48c45.35-39.466,88.507-54.923,111.775-41.505
         c24.248,13.983,33.042,61.814,20.067,124.796c-9.81,47.618-33.234,104.212-65.176,159.601
         c-32.749,56.788-70.25,106.819-107.377,139.272c-46.981,41.068-92.4,55.929-116.185,42.213
         c-23.079-13.31-31.906-56.921-20.834-115.233C153.281,368.316,176.758,307.841,210.736,248.922z"
       />
       <path
-        fill="none" stroke="currentColor" strokeWidth="20" strokeMiterlimit="10" d="M210.821,351.482
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="20"
+        strokeMiterlimit="10"
+        d="M210.821,351.482
         c-33.746-58.292-56.731-117.287-66.312-166.255c-11.544-58.999-3.382-104.109,19.864-117.566
         c24.224-14.024,70.055,2.244,118.14,44.94c36.356,32.28,73.688,80.837,105.723,136.173c32.844,56.733,57.461,114.209,67.036,162.582
         c12.117,61.213,2.309,107.984-21.453,121.74c-23.057,13.348-65.249-0.784-110.239-39.499

src/app/components/Switch.js

@@ -11,11 +11,11 @@ const Container = styled.div`
   transition: 0.3s ease all;
   position: relative;
   background-color: ${getColor};
-  width: ${({ small }) => small ? 3 : 3.5}rem;
+  width: ${({ small }) => (small ? 3 : 3.5)}rem;
   color: rgba(0,0,0,0.5);
   border: 1px solid rgba(0,0,0,.1);
   padding: 0.5rem;
-  height: ${props => props.small ? 20 : 26}px;
+  height: ${props => (props.small ? 20 : 26)}px;
   box-sizing: border-box;
   cursor: pointer;
   border-radius: 4px;
@@ -31,13 +31,12 @@ const Container = styled.div`
 const Dot = styled.div`
   transition: inherit;
   position: absolute;
-  height: ${props => props.small ? 14 : 20}px;
+  height: ${props => (props.small ? 14 : 20)}px;
   width: 1rem;
   left: 0.1rem;
   border-radius: 4px;
-  transform: translateX(${props =>
-  props.right ? props.small ? 'calc(1.5rem + 2px)' : 'calc(2rem + 2px)' : '0'});
-  top: ${({ small }) => small ? `calc(0.1rem + 1px)` : `calc(0.1rem)`};
+  transform: translateX(${props => (props.right ? props.small ? 'calc(1.5rem + 2px)' : 'calc(2rem + 2px)' : '0')});
+  top: ${({ small }) => (small ? `calc(0.1rem + 1px)` : `calc(0.1rem)`)};
   background-color: white;
   box-shadow: 0 0 4px rgba(0,0,0,0.2);
 `;
@@ -50,9 +49,13 @@ type Props = {
   secondary: ?boolean,
 };
 
-export default (
-  { right, onClick, secondary = false, offMode = false, small = false }: Props
-) => (
+export default ({
+  right,
+  onClick,
+  secondary = false,
+  offMode = false,
+  small = false,
+}: Props) => (
   <Container
     small={small}
     secondary={secondary}

src/app/components/Tooltip.js

@@ -125,9 +125,16 @@ type Props = {
   bottom: ?boolean,
 };
 
-export default (
-  { className, offset = 0, children, message, left, right, bottom, top }: Props
-) => (
+export default ({
+  className,
+  offset = 0,
+  children,
+  message,
+  left,
+  right,
+  bottom,
+  top,
+}: Props) => (
   <Tooltip
     className={className}
     bottom={bottom}

src/app/components/buttons/Button.js

@@ -21,7 +21,8 @@ const getColor = ({ transparent, disabled, theme }) => {
   return 'white';
 };
 
-const styles = props => `
+const styles = props =>
+  `
   transition: 0.3s ease all;
   text-transform: uppercase;
   text-decoration: none;
@@ -32,14 +33,14 @@ const styles = props => `
   color: ${getColor(props)};
   border-radius: 2px;
   ${(() => {
-  if (props.small) {
-    return `
+    if (props.small) {
+      return `
         padding: 0.5rem 0.75rem;
         font-size: 0.875rem;
       `;
-  }
-  return 'padding: 0.75rem 1rem;';
-})()}
+    }
+    return 'padding: 0.75rem 1rem;';
+  })()}
   outline: none;
   width: ${props.block ? '100%' : 'inherit'};
 

src/app/components/sandbox/ModeIcons.js

@@ -31,7 +31,7 @@ const ViewIcon = styled.div`
     position: absolute;
     left: 0; right: 0; bottom: 0; top: 0;
     background-color: rgba(0,0,0,0.6);
-    opacity: ${props => props.active ? 0 : 1};
+    opacity: ${props => (props.active ? 0 : 1)};
     border-radius: 2px;
     overflow: hidden;
   }
@@ -63,15 +63,13 @@ type Props = {
   setMixedView: () => void,
 };
 
-export default function AllIcons(
-  {
-    showEditor,
-    showPreview,
-    setEditorView,
-    setMixedView,
-    setPreviewView,
-  }: Props
-) {
+export default function AllIcons({
+  showEditor,
+  showPreview,
+  setEditorView,
+  setMixedView,
+  setPreviewView,
+}: Props) {
   return (
     <Tooltips>
       <Tooltip message="Editor view">

src/app/components/sandbox/Preview/Editor.js

@@ -17,10 +17,10 @@ const Container = styled.div`
     font-size: 15px;
   }
   .cm-s-oceanic div.CodeMirror-selected {
-    background: ${props => props.readOnly ? 'inherit' : 'rgba(255, 255, 255, 0.1)'};
+    background: ${props => (props.readOnly ? 'inherit' : 'rgba(255, 255, 255, 0.1)')};
   }
   .cm-s-oceanic .CodeMirror-activeline-background {
-    background: ${props => props.readOnly ? 'inherit' : 'rgba(255, 255, 255, 0.1)'};
+    background: ${props => (props.readOnly ? 'inherit' : 'rgba(255, 255, 255, 0.1)')};
   }
 `;
 
@@ -37,7 +37,7 @@ export default class Editor extends React.PureComponent {
     const { name, readOnly } = this.props;
     const doc = new CodeMirror.Doc(
       `ReactDOM.render(<${name || 'Component'} />, document.body);`,
-      'jsx'
+      'jsx',
     );
     this.codemirror = getCodeMirror(el, doc);
     this.codemirror.setOption('lineNumbers', false);

src/app/components/sandbox/Preview/Navigator.js

@@ -28,8 +28,7 @@ const Icons = styled.div`
 
 const Icon = styled.div`
   display: inline-block;
-  color: ${props =>
-  props.disabled ? props.theme.gray : props.theme.gray.darken(0.3)};
+  color: ${props => (props.disabled ? props.theme.gray : props.theme.gray.darken(0.3))};
   font-size: 1.5rem;
   line-height: 0.5;
   margin: 0 0.1rem;
@@ -64,18 +63,16 @@ type Props = {
   toggleProjectView: () => void,
 };
 
-export default (
-  {
-    url,
-    onChange,
-    onConfirm,
-    onBack,
-    onForward,
-    onRefresh,
-    isProjectView,
-    toggleProjectView,
-  }: Props
-) => (
+export default ({
+  url,
+  onChange,
+  onConfirm,
+  onBack,
+  onForward,
+  onRefresh,
+  isProjectView,
+  toggleProjectView,
+}: Props) => (
   <Container>
     <Icons>
       <Icon disabled={!onBack} onClick={onBack}><LeftIcon /></Icon>

src/app/components/sandbox/Preview/index.js

@@ -277,11 +277,7 @@ export default class Preview extends React.PureComponent {
       isInProjectView,
       setProjectView,
     } = this.props;
-    const {
-      historyPosition,
-      history,
-      urlInAddressBar,
-    } = this.state;
+    const { historyPosition, history, urlInAddressBar } = this.state;
 
     const renderedModule = this.getRenderedModule();
 

src/app/containers/ContextMenu.js

@@ -43,10 +43,9 @@ const Item = styled.div`
   }
 
   &:hover {
-    color: ${props => props.color ? props.color : theme.secondary()};
+    color: ${props => (props.color ? props.color : theme.secondary())};
     background-color: ${() => theme.background2.lighten(0.3)()};
-    border-left-color: ${props =>
-  props.color ? props.color : theme.secondary()};
+    border-left-color: ${props => (props.color ? props.color : theme.secondary())};
   }
 `;