style: lint and format

packages/cloudapi-gql/src/api/machines.js

@@ -4,13 +4,7 @@ const url = require('url');
 
 const request = require('./request');
 
-const {
+const { _path, _getAuthHeaders, account, url: host } = request.client;
-  _path,
-  _getAuthHeaders,
-  account,
-  url: host
-} = request.client;
-
 const client = request.client;
 const getAuthHeaders = awaitify(_getAuthHeaders.bind(client));
 
@@ -36,12 +30,13 @@ const metadata = {
 
     const href = url.format({
       protocol: 'https',
-      host: host.replace(/^https\:\/\//, ''),
+      host: host.replace(/^https:\/\//, ''),
       pathname
     });
 
-    return fetch(href, { method: 'GET', headers })
+    return fetch(href, { method: 'GET', headers }).then(response =>
-      .then((response) => response.json());
+      response.json()
+    );
   },
   get: ctx => {
     return request('getMachineMetadata', ctx);

packages/cloudapi-gql/src/endpoint.js

@@ -1,7 +1,7 @@
 // const argv = require('minimist')(process.argv.slice(2));
 // const { makeExecutableSchema, addMockFunctionsToSchema } = require('graphql-tools');
 
-const { query, mutation } = require('./schema');
+// const { query, mutation } = require('./schema');
 
 // console.log(new GraphQLSchema({
 //   query,

packages/cloudapi-gql/src/schema/types/firewall-rule.js

@@ -49,7 +49,7 @@ module.exports = new GraphQLObjectType({
       }
     },
     rule: {
-      type: GraphQLString, //FirewallRuleSyntaxType,
+      type: GraphQLString, // FirewallRuleSyntaxType,
       description: 'Firewall rule',
       resolve: ({ rule }) => {
         return rule;

packages/joyent-boilerplate/src/components/navigation/not-found.js

@@ -5,6 +5,7 @@ import remcalc from 'remcalc';
 import { H1, P, Button, ViewContainer } from 'joyent-ui-toolkit';
 
 const StyledContainer = styled.div`
+  /* trick prettier */
   margin-top: ${remcalc(60)};
 `;
 

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import forceArray from 'force-array';
 
 import {
   Card,
@@ -9,12 +8,18 @@ import {
   CardView
 } from 'joyent-ui-toolkit';
 
-export default ({ rule = '', global = false, enabled = false, first, last }) => (
+export default ({
+  rule = '',
+  global = false,
+  enabled = false,
+  first,
+  last
+}) => (
   <Card collapsed flat={!last} topMargin={first} bottomless={!last} gapless>
     <CardView>
       <CardMeta>
         <CardTitle>{rule}</CardTitle>
-        <CardLabel icon={global && String.fromCodePoint(0x1F30D)} />
+        <CardLabel icon={global && String.fromCodePoint(0x1f30d)} />
         <CardLabel color={enabled ? 'green' : 'red'} />
       </CardMeta>
     </CardView>

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

@@ -41,17 +41,21 @@ export default ({ name, state, primaryIp, last, first }) => (
         </CardAction>
         <CardTitle to={`/instances/${name}`}>{name}</CardTitle>
         <Small>
-          <CardLabel>
+          <CardLabel>{primaryIp}</CardLabel>
-            {primaryIp}
-          </CardLabel>
         </Small>
         <Small>
-          <CardLabel color={stateColor[state]} title={`The instance is ${state}`}>
+          <CardLabel
+            color={stateColor[state]}
+            title={`The instance is ${state}`}
+          >
             {titleCase(state)}
           </CardLabel>
         </Small>
         <SmallOnly>
-          <CardLabel color={stateColor[state]} title={`The instance is ${state}`} />
+          <CardLabel
+            color={stateColor[state]}
+            title={`The instance is ${state}`}
+          />
         </SmallOnly>
       </CardMeta>
     </CardView>

packages/my-joy-beta/src/components/instances/key-value.js

@@ -14,7 +14,14 @@ import {
 
 const { SmallOnly, Small } = QueryBreakpoints;
 
-const TextareaKeyValue = ({ name, formName, formValue, handleSubmit, onRemove, textarea }) => (
+const TextareaKeyValue = ({
+  name,
+  formName,
+  formValue,
+  handleSubmit,
+  onRemove,
+  textarea
+}) => (
   <form onSubmit={handleSubmit}>
     <Row>
       <Col xs={12} sm={10}>
@@ -23,7 +30,14 @@ const TextareaKeyValue = ({ name, formName, formValue, handleSubmit, onRemove, t
         </FormGroup>
       </Col>
       <Col xs={6} sm={1}>
-        <Button type="button" onClick={() => onRemove(name)} secondary small icon fluid>
+        <Button
+          type="button"
+          onClick={() => onRemove(name)}
+          secondary
+          small
+          icon
+          fluid
+        >
           <BinIcon />
         </Button>
       </Col>
@@ -34,7 +48,7 @@ const TextareaKeyValue = ({ name, formName, formValue, handleSubmit, onRemove, t
       </Col>
       <Col xs={12} sm={12}>
         <FormGroup name={formValue} reduxForm>
-          <Field name={formValue} component={Editor} mode='sh' />
+          <Field name={formValue} component={Editor} mode="sh" />
         </FormGroup>
       </Col>
       <SmallOnly>
@@ -47,7 +61,14 @@ const TextareaKeyValue = ({ name, formName, formValue, handleSubmit, onRemove, t
   </form>
 );
 
-const InputKeyValue = ({ name, formName, formValue, handleSubmit, onRemove, textarea }) => (
+const InputKeyValue = ({
+  name,
+  formName,
+  formValue,
+  handleSubmit,
+  onRemove,
+  textarea
+}) => (
   <form onSubmit={handleSubmit}>
     <Row>
       <Col xs={12} sm={5}>
@@ -61,7 +82,14 @@ const InputKeyValue = ({ name, formName, formValue, handleSubmit, onRemove, text
         </FormGroup>
       </Col>
       <Col xs={6} sm={1}>
-        <Button type="button" onClick={() => onRemove(name)} secondary small icon fluid>
+        <Button
+          type="button"
+          onClick={() => onRemove(name)}
+          secondary
+          small
+          icon
+          fluid
+        >
           <BinIcon />
         </Button>
       </Col>
@@ -77,6 +105,5 @@ const InputKeyValue = ({ name, formName, formValue, handleSubmit, onRemove, text
   </form>
 );
 
-export default ({ textarea, ...rest }) => textarea
+export default ({ textarea, ...rest }) =>
-  ? <TextareaKeyValue {...rest} />
+  textarea ? <TextareaKeyValue {...rest} /> : <InputKeyValue {...rest} />;
-  : <InputKeyValue {...rest} />;

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

@@ -1,10 +1,22 @@
 import React from 'react';
 import forceArray from 'force-array';
 
-import { FormGroup, Input, FormLabel, ViewContainer, StatusLoader } from 'joyent-ui-toolkit';
+import {
+  FormGroup,
+  Input,
+  FormLabel,
+  ViewContainer,
+  StatusLoader
+} from 'joyent-ui-toolkit';
+
 import Item from './item';
 
-export default ({ instances, loading, handleChange = () => null, handleSubmit }) => {
+export default ({
+  instances,
+  loading,
+  handleChange = () => null,
+  handleSubmit
+}) => {
   const _instances = forceArray(instances);
 
   const items = _instances.map((instance, i, all) => (
@@ -16,7 +28,8 @@ export default ({ instances, loading, handleChange = () => null, handleSubmit })
     />
   ));
 
-  const _loading = (!items.length && loading) ? (
+  const _loading =
+    !items.length && loading ? (
       <ViewContainer center>
         <StatusLoader />
       </ViewContainer>

packages/my-joy-beta/src/containers/instances/firewall.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import ReactJson from 'react-json-view';
 import PropTypes from 'prop-types';
 import forceArray from 'force-array';
 import { compose, graphql } from 'react-apollo';
@@ -11,7 +10,6 @@ import { ViewContainer, Title, StatusLoader, Message } from 'joyent-ui-toolkit';
 import GetFirewallRules from '@graphql/list-firewall-rules.gql';
 import { FirewallRule as InstanceFirewallRule } from '@components/instances';
 
-
 const Firewall = ({
   firewallEnabled = false,
   firewallRules = [],
@@ -20,11 +18,11 @@ const Firewall = ({
 }) => {
   const values = forceArray(firewallRules);
   const _title = <Title>Firewall</Title>;
-  const _loading = !(loading && !values.length) ? null : (
+  const _loading = !(loading && !values.length) ? null : <StatusLoader />;
-    <StatusLoader />
-  );
 
-  const _firewall = !_loading && values.map((rule, i, all) => (
+  const _firewall =
+    !_loading &&
+    values.map((rule, i, all) => (
       <InstanceFirewallRule
         key={rule.id}
         {...rule}

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

@@ -7,7 +7,7 @@ import forceArray from 'force-array';
 import get from 'lodash.get';
 import find from 'lodash.find';
 
-import { ViewContainer, Title, StatusLoader, Message } from 'joyent-ui-toolkit';
+import { ViewContainer, Title, Message } from 'joyent-ui-toolkit';
 
 import GetInstances from '@graphql/list-instances.gql';
 import { List as InstanceList } from '@components/instances';
@@ -20,7 +20,7 @@ const InstanceListForm = reduxForm({
 const List = ({ instances = [], loading = false, error }) => {
   const _title = <Title>Instances</Title>;
   const _instances = forceArray(instances);
-  const _loading = (!instances.length && loading);
+  const _loading = !instances.length && loading;
 
   const _error = !error ? null : (
     <Message

packages/my-joy-beta/src/containers/instances/metadata.js

@@ -12,7 +12,8 @@ import { ViewContainer, Title, StatusLoader, Message } from 'joyent-ui-toolkit';
 import GetMetadata from '@graphql/list-metadata.gql';
 import { KeyValue } from '@components/instances';
 
-const MetadataForms = (metadata = []) => metadata.map(({ key, formName, formValue, value, name }) => {
+const MetadataForms = (metadata = []) =>
+  metadata.map(({ key, formName, formValue, value, name }) => {
     const MetadataForm = reduxForm({
       form: `instance-metadata-${key}`,
       initialValues: {
@@ -32,7 +33,7 @@ const MetadataForms = (metadata = []) => metadata.map(({ key, formName, formValu
         textarea
       />
     );
-});
+  });
 
 const Metadata = ({ metadata = [], loading, error }) => {
   const _title = <Title>Metadata</Title>;
@@ -79,7 +80,6 @@ export default compose(
         []
       );
 
-
       const metadata = Object.keys(values).reduce((all, name) => {
         const key = paramCase(name);
 

packages/my-joy-beta/src/containers/instances/networks.js

@@ -10,15 +10,14 @@ import { ViewContainer, Title, StatusLoader, Message } from 'joyent-ui-toolkit';
 import GetNetworks from '@graphql/list-networks.gql';
 import { Network as InstanceNetwork } from '@components/instances';
 
-
 const Networks = ({ networks = [], loading, error }) => {
   const values = forceArray(networks);
   const _title = <Title>Networks</Title>;
-  const _loading = !(loading && !values.length) ? null : (
+  const _loading = !(loading && !values.length) ? null : <StatusLoader />;
-    <StatusLoader />
-  );
 
-  const _networks = !_loading && values.map((network, i, all) => (
+  const _networks =
+    !_loading &&
+    values.map((network, i, all) => (
       <InstanceNetwork
         key={network.id}
         {...network}

packages/my-joy-beta/src/containers/instances/tags.js

@@ -13,7 +13,8 @@ import { KeyValue } from '@components/instances';
 import GetTags from '@graphql/list-tags.gql';
 import PutTags from '@graphql/add-tags.gql';
 
-const TagForms = (tags = []) => tags.map(({ key, formName, formValue, value, name }) => {
+const TagForms = (tags = []) =>
+  tags.map(({ key, formName, formValue, value, name }) => {
     const TagForm = reduxForm({
       form: `instance-tags-${key}`,
       initialValues: {
@@ -32,7 +33,7 @@ const TagForms = (tags = []) => tags.map(({ key, formName, formValue, value, nam
         onRemove={key => console.log('remove', key)}
       />
     );
-});
+  });
 
 const Tags = ({ tags = [], loading, error }) => {
   const _title = <Title>Tags</Title>;
@@ -79,7 +80,6 @@ export default compose(
         []
       );
 
-
       const tags = Object.keys(values).reduce((all, name) => {
         const key = paramCase(name);
 

packages/my-joyent/src/app.js

@@ -1,5 +1,5 @@
-import React, { Component } from 'react';
+import React from 'react';
-import { ThemeProvider, injectGlobal } from 'styled-components';
+import { ThemeProvider } from 'styled-components';
 import { theme, RootContainer } from 'joyent-ui-toolkit';
 import { ApolloProvider } from 'react-apollo';
 

packages/my-joyent/src/router.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { BrowserRouter, Route, Switch } from 'react-router-dom';
-import styled from 'styled-components';
 
 import { PageContainer } from 'joyent-ui-toolkit';
 

packages/ui-toolkit/src/base/global.js

@@ -24,7 +24,9 @@ export default ({ theme }) => css`
     ${unloadedFontFamily};
   }
 
-  html, body, #root {
+  html,
+  body,
+  #root {
     height: 100%;
   }
 
@@ -32,7 +34,8 @@ export default ({ theme }) => css`
     ${loadedFontFamily};
   }
 
-  .CodeMirror, .ReactCodeMirror {
+  .CodeMirror,
+  .ReactCodeMirror {
     height: 100% !important;
   }
 

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

@@ -7,10 +7,9 @@ const sides = ['top', 'right', 'bottom', 'left'];
 const unitProps = (() => {
   const sided = rule => sides.map(side => `${rule}-${side}`);
 
-  const measures = ['margin', 'padding'].reduce(
+  const measures = ['margin', 'padding']
-    (props, rule) => [...props, rule, ...sided(rule)],
+    .reduce((props, rule) => [...props, rule, ...sided(rule)], [])
-    []
+    .concat(['height', 'width']);
-  ).concat(['height', 'width']);
 
   return sides.reduce((acc, side) => [...acc, `border-${side}-width`], [
     'border',

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

@@ -33,6 +33,7 @@ const Arrow = styled.div`
 `;
 
 const Container = styled.div`
+  /* trick prettier */
   display: inline-block;
 `;
 

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

@@ -49,17 +49,21 @@ const breakpoint = label => (...args) => css`
 `;
 
 const toQuery = label => ({ children, ...rest }) => (
-  <MediaQuery query={screens[label]}>
+  <MediaQuery query={screens[label]}>{children}</MediaQuery>
-    {children}
-  </MediaQuery>
 );
 
-export const styled = Object.keys(screens).reduce((sum, label) => ({
+export const styled = Object.keys(screens).reduce(
+  (sum, label) => ({
     ...sum,
     [label]: breakpoint(label)
-}), {});
+  }),
+  {}
+);
 
-export const query = Object.keys(screens).reduce((sum, label) => ({
+export const query = Object.keys(screens).reduce(
+  (sum, label) => ({
     ...sum,
     [pascalCase(label)]: toQuery(label)
-}), {});
+  }),
+  {}
+);

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

@@ -89,7 +89,7 @@ const style = css`
       background-color: ${props => props.theme.whiteActive};
       border-color: ${props => props.theme.grey};
     }
-  `}
+  `};
 
   ${is('tertiary')`
     color: ${props => props.theme.tertiary};
@@ -106,7 +106,7 @@ const style = css`
       background-color: ${props => props.theme.background};
       border-color: ${props => props.theme.grey};
     }
-  `}
+  `};
 
   ${is('tertiary', 'selected')`
       background-color: ${props => props.theme.tertiaryActive};
@@ -145,7 +145,7 @@ const style = css`
       background-color: ${props => props.theme.disabled};
       border-color: ${props => props.theme.disabled};
     }
-  `}
+  `};
 
   ${is('rect')`
     border-radius: 0;

packages/ui-toolkit/src/card/label.js

@@ -2,7 +2,6 @@ import React from 'react';
 import remcalc from 'remcalc';
 import styled from 'styled-components';
 import is, { isNot } from 'styled-is';
-import unitcalc from 'unitcalc';
 
 const Dot = styled.span`
   width: ${remcalc(6)};
@@ -20,6 +19,7 @@ const Dot = styled.span`
 `;
 
 const Icon = styled.span`
+  /* trick prettier */
   background-color: none;
 `;
 

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

@@ -1,5 +1,4 @@
 import is from 'styled-is';
-import typography from '../typography';
 import P from '../text/p';
 
 export default P.extend`

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

@@ -5,7 +5,6 @@ import is from 'styled-is';
 
 import Baseline from '../baseline';
 
-
 const Divider = styled(Row)`
   background-color: ${props => props.theme.grey};
 

packages/ui-toolkit/src/form/base/toggle.js

@@ -2,7 +2,6 @@ import React from 'react';
 import styled from 'styled-components';
 import { Input } from 'normalized-styled-components';
 import { Broadcast, Subscriber } from 'react-broadcast';
-import { border, borderRadius } from '../../boxes';
 import BaseInput from './input';
 import remcalc from 'remcalc';
 import is from 'styled-is';

packages/ui-toolkit/src/form/legend.js

@@ -3,6 +3,7 @@ import Baseline from '../baseline';
 import typography from '../typography';
 
 const StyledLegend = Legend.extend`
+  /* trick prettier */
   ${typography.semibold};
 `;
 

packages/ui-toolkit/src/form/number-input.js

@@ -9,6 +9,7 @@ import unitcalc from 'unitcalc';
 import { PlusIcon, MinusIcon } from '../icons';
 
 const StyledContainer = styled.div`
+  /* trick prettier */
   margin-bottom: ${unitcalc(4)};
 `;
 

packages/ui-toolkit/src/icon-button/index.js

@@ -89,7 +89,8 @@ const style = css`
 `;
 
 const StyledButton = NButton.extend`
-  ${style}
+  /* trick prettier */
+  ${style};
 `;
 
 const StyledAnchor = A.extend`

packages/ui-toolkit/src/layout/view-container.js

@@ -1,4 +1,4 @@
-import is, { isNot } from 'styled-is';
+import is from 'styled-is';
 import { Grid } from 'react-styled-flexboxgrid';
 import remcalc from 'remcalc';
 

packages/ui-toolkit/src/progress-bar/button.js

@@ -54,24 +54,24 @@ const StyledContainer = styled.div`
   ${isOr('active', 'completed')`
     border-top: ${remcalc(1)} solid ${props => props.theme.greenDark};
     border-bottom: ${remcalc(1)} solid ${props => props.theme.greenDark};
-  `}
+  `};
 
   ${is('first')`
     border-left: ${remcalc(1)} solid ${props => props.theme.greenDark};
     padding-left: ${remcalc(13)};
-  `}
+  `};
 
   ${isNot('first', 'completed', 'active')`
     border-right: ${remcalc(1)} solid ${props => props.theme.grey};
-  `}
+  `};
 
   ${isOr('active', 'completed')`
     border-right: ${remcalc(1)} solid ${props => props.theme.greenDark};
-  `}
+  `};
 
   ${isNot('last')`
     border-right: none;
-  `}
+  `};
 `;
 
 const StyledArrow = styled.span`

packages/ui-toolkit/src/progress-bar/indicator.js

@@ -10,11 +10,11 @@ const Tick = styled(TickIcon)`
 
   ${is('active')`
     fill: ${props => props.theme.secondary};
-  `}
+  `};
 
   ${is('completed')`
     fill: ${props => props.theme.white};
-  `}
+  `};
 `;
 
 const StyledIndicator = styled.span`
@@ -30,11 +30,11 @@ const StyledIndicator = styled.span`
 
   ${isOr('completed', 'active')`
     border: ${remcalc(1)} solid ${props => props.theme.greenDark};
-  `}
+  `};
 
   ${is('completed')`
     background: ${props => props.theme.green};
-  `}
+  `};
 `;
 
 const Indicator = ({ first, completed, active, last, ...rest }) => {

packages/ui-toolkit/src/section-list/item.js

@@ -34,13 +34,16 @@ const style = css`
 `;
 
 export const Anchor = Baseline(A.extend`
+  /* trick prettier */
   ${style};
 `);
 
 export const NavLink = Baseline(styled(RRNavLink)`
+  /* trick prettier */
   ${style};
 `);
 
 export const Link = Baseline(styled(RRLink)`
+  /* trick prettier */
   ${style};
 `);

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

@@ -60,7 +60,7 @@ Slider.propTypes = {
   draggableTrack: PropTypes.bool,
   onChangeStart: PropTypes.func,
   children: PropTypes.node,
-  greyed: PropTypes.bool,
+  greyed: PropTypes.bool
 };
 
 Slider.defaultProps = {

packages/ui-toolkit/src/status-loader/widget.js

@@ -32,10 +32,12 @@ const StyledFirstRect = styled.rect`
 `;
 
 const StyledSecondRect = StyledFirstRect.extend`
+  /* trick prettier */
   animation-delay: 0.5s;
 `;
 
 const StyledThirdRect = StyledFirstRect.extend`
+  /* trick prettier */
   animation-delay: 1s;
 `;
 

packages/ui-toolkit/src/styleguide/wrapper.js

@@ -4,6 +4,7 @@ import theme from '../theme';
 import Base, { global } from '../base';
 
 const StyledBase = Base.extend`
+  /* trick prettier */
   background-color: transparent;
 `;
 

packages/ui-toolkit/src/theme/colors.js

@@ -32,6 +32,7 @@ const Preview = styled.div`
 `;
 
 const Paragraph = P.extend`
+  /* trick prettier */
   margin: 0;
 `;
 

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

@@ -1,5 +1,5 @@
 import { css } from 'styled-components';
-import theme from '../theme'
+import theme from '../theme';
 
 const baseFonts = `
   -apple-system,
@@ -18,20 +18,24 @@ export const loadedFontFamily = css`
 `;
 
 export const unloadedFontFamily = css`
+  /* trick prettier */
   font-family: ${baseFonts};
 `;
 
 export const color = theme.text;
 
 export const semibold = css`
+  /* trick prettier */
   font-weight: 600;
 `;
 
 export const medium = css`
+  /* trick prettier */
   font-weight: 500;
 `;
 
 export const normal = css`
+  /* trick prettier */
   font-weight: 400;
 `;