Deleting sandboxes (codesandbox#11)

* Possible to delete sandboxes

* Int

* Fix lint errors

* Styling tweaks

Author: CompuIves

.eslintrc

@@ -20,7 +20,8 @@
     "react/jsx-filename-extension": 0,
     "react/sort-comp": 0,
     "import/no-extraneous-dependencies": 0,
-    "arrow-parens": 0
+    "arrow-parens": 0,
+    "import/prefer-default-export": 0
   },
   "settings": {
     "import/resolver": {

package.json

@@ -119,7 +119,8 @@
     "build": "NODE_ENV=production node scripts/build.js && gulp",
     "test": "jest --env=jsdom",
     "test:watch": "jest --watch --env=jsdom",
-    "lint": "eslint src"
+    "lint:app": "eslint src/app",
+    "lint:embed": "eslint src/embed"
   },
   "jest": {
     "rootDir": "src",

src/app/components/Logo.js

@@ -1,6 +1,10 @@
 import React from 'react';
 
-export default ({ width = 35, height = 35, className }) => (
+export default ({
+  width = 35,
+  height = 35,
+  className,
+}: { width: number, height: number, className: ?string }) => (
   <svg
     x="0px"
     y="0px"
@@ -12,15 +16,15 @@ export default ({ width = 35, height = 35, className }) => (
     <g id="Layer_1">
       <polyline
         fill="#FFFFFF"
-        points="719.001,851 719.001,639.848 902,533.802 902,745.267 719.001,851 	"
+        points="719.001,851 719.001,639.848 902,533.802 902,745.267 719.001,851"
       />
       <polyline
         fill="#FFFFFF"
-        points="302.082,643.438 122.167,539.135 122.167,747.741 302.082,852.573 302.082,643.438 	"
+        points="302.082,643.438 122.167,539.135 122.167,747.741 302.082,852.573 302.082,643.438"
       />
       <polyline
         fill="#FFFFFF"
-        points="511.982,275.795 694.939,169.633 512.06,63 328.436,169.987 511.982,275.795 	"
+        points="511.982,275.795 694.939,169.633 512.06,63 328.436,169.987 511.982,275.795"
       />
     </g>
     <g id="Layer_2">
@@ -29,7 +33,7 @@ export default ({ width = 35, height = 35, className }) => (
         stroke="#FFFFFF"
         strokeWidth="50"
         strokeMiterlimit="10"
-        points="899,287.833 509,513 509,963 	"
+        points="899,287.833 509,513 509,963"
       />
       <line
         fill="none"
@@ -53,8 +57,7 @@ export default ({ width = 35, height = 35, className }) => (
         stroke="#FFFFFF"
         strokeWidth="50"
         strokeMiterlimit="10"
-        points="121,739.083 510.917,963.042 901,738.333
-		901,288 511,62 121,289 	"
+        points="121,739.083 510.917,963.042 901,738.333 901,288 511,62 121,289"
       />
     </g>
   </svg>

src/app/components/Notification.js

@@ -93,7 +93,7 @@ const CloseIconHandler = styled.div`
 
 type Props = {
   title: string,
-  body: string,
+  body: string, // eslint-disable-line
   type: string,
   buttons: Array<NotificationButton>,
   close: () => void,

src/app/components/Switch.js

@@ -28,14 +28,17 @@ const Container = styled.div`
   }
 `;
 
+const getSize = ({ small }) =>
+  (small ? 'calc(1.5rem + 2px)' : 'calc(2rem + 2px)');
+
 const Dot = styled.div`
   transition: inherit;
   position: absolute;
   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')});
+  transform: translateX(${props => (props.right ? getSize(props) : '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);

src/app/components/Tooltip.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
+// eslint-disable-next-line
 const getDirectionTransforms = ({ offset = 0, left, right, bottom, top }) => {
   if (left) {
     return `
@@ -29,6 +30,7 @@ const getDirectionTransforms = ({ offset = 0, left, right, bottom, top }) => {
   `;
 };
 
+// eslint-disable-next-line
 const getDirectionArrow = ({ theme, left, right, bottom, top }) => {
   if (left) {
     return `
@@ -115,7 +117,7 @@ const Tooltip = styled.div`
 `;
 
 type Props = {
-  className: ?tring,
+  className: ?string,
   offset: ?number,
   children: React.CElement,
   message: string,

src/app/components/buttons/Button.js

@@ -59,7 +59,13 @@ const LinkButton = styled(Link)`${styles}`;
 const AButton = styled.a`${styles}`;
 const Button = styled.button`${styles}`;
 
-export default props => {
+type Props = {
+  [key: any]: any,
+  to: ?string,
+  href: ?string,
+};
+
+export default (props: Props) => {
   // Link
   if (props.to) {
     return <LinkButton {...props} />;

src/app/components/buttons/Button.test.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import testRender from 'app/utils/test/render';
+import { MemoryRouter } from 'react-router-dom';
+import Button from './Button';
+
+describe('Button', () => {
+  it('renders', () => {
+    testRender(<Button>Test</Button>);
+  });
+
+  it('renders onClick', () => {
+    testRender(<Button onClick={() => {}}>Test</Button>);
+  });
+
+  it('renders hrefs', () => {
+    testRender(
+      <MemoryRouter>
+        <Button to="https://ivesvh.com">Test</Button>
+      </MemoryRouter>,
+    );
+  });
+
+  it('renders properties', () => {
+    testRender(<Button small>Test</Button>);
+  });
+
+  it('renders disabled', () => {
+    testRender(<Button disabled>Test</Button>);
+  });
+});

src/app/components/buttons/LinkButton.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+import theme from 'common/theme';
+
+export default styled.button`
+  display: inline-block;
+  background-color: transparent;
+  color: ${() => theme.secondary()};
+  border: none;
+  outline: none;
+  cursor: pointer;
+  text-decoration: underline;
+`;

src/app/components/buttons/LinkButton.test.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import testRender from 'app/utils/test/render';
+import LinkButton from './LinkButton';
+
+describe('LinkButton', () => {
+  it('renders', () => {
+    testRender(<LinkButton>Test</LinkButton>);
+  });
+
+  it('renders onClick', () => {
+    testRender(<LinkButton onClick={() => {}}>Test</LinkButton>);
+  });
+});