style: lint and format

packages/cloudapi-gql/package.json

@@ -6,7 +6,8 @@
   "main": "src/schema/index.js",
   "scripts": {
     "lint": "eslint . --fix --ext .js --ext .graphql",
-    "fmt": "prettier --write --single-quote src/**/*.js src/*.js src/**/*.graphql",
+    "fmt":
+      "prettier --write --single-quote src/**/*.js src/*.js src/**/*.graphql",
     "test": "echo 0",
     "test-ci": "echo 0",
     "start": "PORT=4000 node src/server.js",
@@ -50,8 +51,6 @@
     "prettier": "^1.7.4"
   },
   "nodemonConfig": {
-    "ignore": [
+    "ignore": ["doc/*"]
-      "doc/*"
-    ]
   }
 }

packages/cloudapi-gql/src/schema/resolvers.js

@@ -60,8 +60,10 @@ const resolvers = {
     package: (root, { id, name }) => api.packages.get({ id, name }),
 
     machines: (root, { id, brand, state, tags, ...rest }, _, ctx) =>
-      id ? api.machines.get({ id }).then(machine => [machine])
+      id
-        : api.machines.list(
+        ? api.machines.get({ id }).then(machine => [machine])
+        : api.machines
+            .list(
               Object.assign(rest, {
                 brand: brand ? brand.toLowerCase() : brand,
                 state: state ? state.toLowerCase() : state,

packages/my-joy-beta/src/components/instances/firewall-rule.js

@@ -1,15 +1,17 @@
 import React from 'react';
-import forceArray from 'force-array';
 
-import {
+import { TableTr, TableTd } from 'joyent-ui-toolkit';
-  TableTr,
-  TableTd
-} from 'joyent-ui-toolkit';
 
 export default ({ rule = '', global = false, enabled = false }) => (
   <TableTr>
-    <TableTd><code>{rule}</code></TableTd>
+    <TableTd>
-    <TableTd center middle><code>{JSON.stringify(global)}</code></TableTd>
+      <code>{rule}</code>
-    <TableTd center middle><code>{JSON.stringify(enabled)}</code></TableTd>
+    </TableTd>
+    <TableTd center middle>
+      <code>{JSON.stringify(global)}</code>
+    </TableTd>
+    <TableTd center middle>
+      <code>{JSON.stringify(enabled)}</code>
+    </TableTd>
   </TableTr>
 );

packages/my-joy-beta/src/components/instances/list.js

@@ -2,7 +2,6 @@ import React from 'react';
 import { Row, Col } from 'react-styled-flexboxgrid';
 import forceArray from 'force-array';
 import find from 'lodash.find';
-import remcalc from 'remcalc';
 import titleCase from 'title-case';
 
 import {
@@ -35,7 +34,7 @@ import {
   Anchor
 } from 'joyent-ui-toolkit';
 
-const { SmallOnly, Small, Medium } = QueryBreakpoints;
+const { SmallOnly, Medium } = QueryBreakpoints;
 
 const stateColor = {
   PROVISIONING: 'primary',
@@ -156,7 +155,7 @@ export default ({
 
   const items = forceArray(instances).map(instance => {
     // eslint-disable-next-line camelcase
-    const { id, name, state, firewall_enabled, snapshots, brand } = instance;
+    const { id, state, firewall_enabled, snapshots, brand } = instance;
     const isSelected = Boolean(find(selected, ['id', id]));
     const isSubmitting = isSelected && submitting;
 
@@ -221,7 +220,9 @@ export default ({
           <TableTh xs="48" />
         </TableTr>
       </TableThead>
-      <TableTbody>{items.map(instance => <Item key={instance.id} {...instance} />)}</TableTbody>
+      <TableTbody>
+        {items.map(instance => <Item key={instance.id} {...instance} />)}
+      </TableTbody>
     </Table>
   );
 

packages/my-joy-beta/src/components/instances/network.js

@@ -1,10 +1,7 @@
 import React from 'react';
 import forceArray from 'force-array';
 
-import {
+import { TableTr, TableTd } from 'joyent-ui-toolkit';
-  TableTr,
-  TableTd
-} from 'joyent-ui-toolkit';
 
 export default ({ name, gateway, subnet, resolvers = [] }) => (
   <TableTr>

packages/my-joy-beta/src/components/instances/snapshots.js

@@ -109,7 +109,9 @@ export default ({
           </TableTh>
         </TableTr>
       </TableThead>
-      <TableTbody>{items.map(snapshot => <Item key={snapshot.name} {...snapshot} />)}</TableTbody>
+      <TableTbody>
+        {items.map(snapshot => <Item key={snapshot.name} {...snapshot} />)}
+      </TableTbody>
     </Table>
   );
 

packages/my-joy-beta/src/graphql/get-instance.gql

@@ -1,6 +1,6 @@
 query instance($name: String) {
   machines(name: $name) {
-    id,
+    id
     dns_names
   }
 }

packages/my-joy-beta/src/graphql/list-dns.gql

@@ -1,7 +1,7 @@
 query instance($name: String!) {
   machines(name: $name) {
-    id,
+    id
-    name,
+    name
     dns_names
   }
 }

packages/ui-toolkit/src/card/demo.md

@@ -22,10 +22,7 @@ const { default: Card, Header, HeaderBox, HeaderMeta } = require('.');
 const { Row, Col } = require('react-styled-flexboxgrid');
 const { H4, P } = require('../text');
 
-const {
+const { InstancesIconLight, IconActionsLight } = require('../icons');
-  InstancesIconLight,
-  IconActionsLight
-} = require('../icons');
 
 <Card shadow collapsed>
   <Header>
@@ -108,10 +105,7 @@ const { default: Card, Header, HeaderBox, HeaderMeta, Outlet } = require('.');
 const { Row, Col } = require('react-styled-flexboxgrid');
 const { H4, P, Small } = require('../text');
 
-const {
+const { InstancesIconLight, IconActionsLight } = require('../icons');
-  InstancesIconLight,
-  IconActionsLight
-} = require('../icons');
 
 <Card shadow>
   <Header>

packages/ui-toolkit/src/header/index.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
 import remcalc from 'remcalc';
-import is from 'styled-is';
 
 const Header = styled.div`
   display: flex;

packages/ui-toolkit/src/header/item.js

@@ -3,7 +3,6 @@ import styled from 'styled-components';
 import remcalc from 'remcalc';
 
 import P from '../text/p';
-import typography from '../typography';
 
 const Text = P.extend`
   text-align: center;

packages/ui-toolkit/src/header/nav.js

@@ -1,11 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
-import is from 'styled-components';
 import remcalc from 'remcalc';
 
-import P from '../text/p';
-import typography from '../typography';
-
 const UL = styled.ul`
   padding: 0;
   margin: 0;

packages/ui-toolkit/src/header/usage.md

@@ -4,7 +4,7 @@ const { default: HeaderBrand } = require('./brand.js');
 const { default: HeaderItem } = require('./item.js');
 
 <Header>
-<HeaderWrapper>
+  <HeaderWrapper>
     <HeaderBrand beta><TritonBetaIcon/></HeaderBrand>
     <HeaderNav>
       <li><a href="#">Compute</a></li>

packages/ui-toolkit/src/icons/index.js

@@ -18,7 +18,7 @@ export { default as DataCenterIconLight } from './data-center-light';
 export { default as DotIcon } from './dot';
 export { default as ChevronIcon } from './chevron';
 export { default as TritonIcon } from './triton';
-export { default as TritonBetaIcon } from './triton-beta'
+export { default as TritonBetaIcon } from './triton-beta';
 export { default as CompletedIcon } from './completed';
 export { default as PartCompletedIcon } from './part-complete';
 export { default as IncompleteIcon } from './incomplete';

packages/ui-toolkit/src/icons/triton-beta.js

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import TritonBetaIcon from './svg/triton_beta.svg';
 
 export default TritonBetaIcon;

packages/ui-toolkit/src/message/Readme.md

@@ -11,7 +11,7 @@ const { Message, MessageTitle, MessageDescription } = require('.');
     sure that you choose the data center that suits your requirements. Learn
     more
   </MessageDescription>
-</Message>
+</Message>;
 ```
 
 #### Error
@@ -23,7 +23,7 @@ const { Message, MessageTitle, MessageDescription } = require('.');
 <Message error>
   <MessageTitle>Choosing deployment data center</MessageTitle>
   <MessageDescription>Oh no</MessageDescription>
-</Message>
+</Message>;
 ```
 
 #### Warning
@@ -35,5 +35,5 @@ const { Message, MessageTitle, MessageDescription } = require('.');
 <Message warning>
   <MessageTitle>Choosing deployment data center</MessageTitle>
   <MessageDescription>There were some issues</MessageDescription>
-</Message>
+</Message>;
 ```

packages/ui-toolkit/src/table/usage.md

@@ -1,7 +1,7 @@
 ```jsx
 const React = require('react');
 const { default: Table, Thead, Tr, Th, Tbody, Td } = require('./');
-const { H4, P } = require('../text');
+const { H4 } = require('../text');
 
 <Table>
   <Thead>
@@ -15,8 +15,12 @@ const { H4, P } = require('../text');
   </Thead>
   <Tbody>
     <Tr actionable>
-      <Td border="right" middle center>HB</Td>
+      <Td border="right" middle center>
-      <Td><H4>percona_high-ram-32_1</H4></Td>
+        HB
+      </Td>
+      <Td>
+        <H4>percona_high-ram-32_1</H4>
+      </Td>
       <Td>Provisioning</Td>
       <Td>2252839a</Td>
       <Td>HB</Td>
@@ -36,5 +40,5 @@ const { H4, P } = require('../text');
       <Td>HB</Td>
     </Tr>
   </Tbody>
-</Table>
+</Table>;
 ```

packages/ui-toolkit/src/tooltip/Readme.md

@@ -1,4 +1,5 @@
 ```jsx
+const React = require('react');
 const { default: Tooltip, Container, Target } = require('./');
 const { Row, Col } = require('react-styled-flexboxgrid');
 
@@ -41,6 +42,7 @@ const { Row, Col } = require('react-styled-flexboxgrid');
 #### Tooltip > hover
 
 ```jsx
+const React = require('react');
 const { default: Tooltip, Container, Target } = require('./');
 const { Row, Col } = require('react-styled-flexboxgrid');
 
@@ -59,6 +61,7 @@ const { Row, Col } = require('react-styled-flexboxgrid');
 #### Tooltip > click
 
 ```jsx
+const React = require('react');
 const { default: Tooltip, Container, Target } = require('./');
 const { Row, Col } = require('react-styled-flexboxgrid');