feat(images): create image

2018-02-13 20:03:57 +00:00 · 2018-02-13 20:03:57 +00:00 · 29fc12d4dd
parent ca1236fb80
commit 29fc12d4dd
30 changed files with 1167 additions and 241 deletions
--- a/packages/images/package.json
+++ b/packages/images/package.json
@ -18,11 +18,26 @@
  "dependencies": {
    "@manaflair/redux-batch": "^0.1.0",
    "apollo": "^0.2.2",
+    "apollo-cache-inmemory": "^1.1.7",
+    "apollo-client": "^2.2.3",
+    "apollo-link-http": "^1.3.3",
+    "apr-intercept": "^3.0.3",
    "date-fns": "^1.29.0",
    "declarative-redux-form": "^2.0.8",
+    "force-array": "^3.1.0",
+    "joyent-logo-assets": "^1.0.0",
+    "joyent-react-styled-flexboxgrid": "^2.2.3",
    "joyent-ui-toolkit": "^5.0.0",
+    "lodash.find": "^4.6.0",
+    "lodash.get": "^4.4.2",
+    "lodash.isfinite": "^3.3.2",
+    "lodash.isfunction": "^3.0.9",
+    "lodash.omit": "^4.5.0",
+    "lodash.uniqby": "^4.7.0",
    "lunr": "^2.1.5",
-    "mz": "^2.7.0",
+    "param-case": "^2.1.1",
+    "prop-types": "^15.6.0",
+    "punycode": "^2.1.0",
    "react": "^16.2.0",
    "react-apollo": "^2.0.4",
    "react-dom": "^16.2.0",
@ -33,8 +48,12 @@
    "redux": "^3.7.2",
    "redux-form": "^7.2.3",
    "remcalc": "^1.0.10",
+    "scroll-to-element": "^2.0.0",
+    "styled-components": "^3.1.6",
    "styled-components-spacing": "^2.1.3",
-    "styled-flex-component": "^2.2.0"
+    "styled-flex-component": "^2.2.0",
+    "styled-is": "^1.1.2",
+    "title-case": "^2.1.1"
  },
  "devDependencies": {
    "babel-preset-joyent-portal": "^6.0.3",
--- a/packages/images/public/index.html
+++ b/packages/images/public/index.html
@ -8,22 +8,7 @@

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-    <title>My Joyent &beta;</title>
-    <script type="text/javascript">
-      window.heap = window.heap || [], heap.load = function (e, t) { window.heap.appid = e, window.heap.config = t = t || {}; var r = t.forceSSL || "https:" === document.location.protocol, a = document.createElement("script"); a.type = "text/javascript", a.async = !0, a.src = (r ? "https:" : "http:") + "//cdn.heapanalytics.com/js/heap-" + e + ".js"; var n = document.getElementsByTagName("script")[0]; n.parentNode.insertBefore(a, n); for (var o = function (e) { return function () { heap.push([e].concat(Array.prototype.slice.call(arguments, 0))) } }, p = ["addEventProperties", "addUserProperties", "clearEventProperties", "identify", "removeEventProperty", "setEventProperties", "track", "unsetEventProperty"], c = 0; c < p.length; c++)heap[p[c]] = o(p[c]) };
-      heap.load("1044364007");
-    </script>
-    <!-- Hotjar Tracking Code for www.makeusproud.com -->
-    <script>
-      (function (h, o, t, j, a, r) {
-        h.hj = h.hj || function () { (h.hj.q = h.hj.q || []).push(arguments) };
-        h._hjSettings = { hjid: 767828, hjsv: 6 };
-        a = o.getElementsByTagName('head')[0];
-        r = o.createElement('script'); r.async = 1;
-        r.src = t + h._hjSettings.hjid + j + h._hjSettings.hjsv;
-        a.appendChild(r);
-      })(window, document, 'https://static.hotjar.com/c/hotjar-','.js?sv=');
-    </script>
+    <title>My Joyent Images &beta;</title>
  </head>
  <body>
    <noscript>
--- a/packages/images/src/components/create-image/details.js
+++ b/packages/images/src/components/create-image/details.js
@ -0,0 +1,75 @@
+import React from 'react';
+import { Field } from 'redux-form';
+import { Margin } from 'styled-components-spacing';
+import Flex, { FlexItem } from 'styled-flex-component';
+import remcalc from 'remcalc';
+import { Row, Col } from 'joyent-react-styled-flexboxgrid';
+
+import {
+  Divider,
+  FormGroup,
+  FormLabel,
+  Input,
+  FormMeta,
+  Button,
+  RandomizeIcon,
+  Textarea
+} from 'joyent-ui-toolkit';
+
+export default ({ placeholderName, randomizing, onRandomize }) => (
+  <form>
+    <Flex wrap>
+      <FlexItem flex>
+        <FormGroup name="name" fluid field={Field}>
+          <FormLabel>Image name</FormLabel>
+          <Margin top={0.5}>
+            <Input placeholder={placeholderName} onBlur={null} required />
+          </Margin>
+          <FormMeta />
+        </FormGroup>
+      </FlexItem>
+      <FlexItem>
+        <Divider height={remcalc(13)} transparent />
+        <Margin left={1}>
+          <Button
+            type="button"
+            marginTop={remcalc(8)}
+            onClick={onRandomize}
+            loading={randomizing}
+            marginless
+            secondary
+            icon
+          >
+            <RandomizeIcon />
+            <span>Randomize</span>
+          </Button>
+        </Margin>
+      </FlexItem>
+    </Flex>
+    <Margin top={3}>
+      <FormGroup name="version" fluid field={Field}>
+        <FormLabel>Version</FormLabel>
+        <Margin top={0.5}>
+          <Input placeholder="Example: v1.0" onBlur={null} required />
+        </Margin>
+        <FormMeta />
+      </FormGroup>
+    </Margin>
+    <Row>
+      <Col xs={12} sm={8}>
+        <Margin top={3}>
+          <FormGroup name="description" fluid field={Field}>
+            <FormLabel>Description</FormLabel>
+            <Margin top={0.5}>
+              <Textarea
+                placeholder="Example: JarJarBinks, Anakin Skywalker, Obi Wan Kenobi, Qui-Gon Jinn, Han Solo, Wookies"
+                fluid
+              />
+            </Margin>
+            <FormMeta />
+          </FormGroup>
+        </Margin>
+      </Col>
+    </Row>
+  </form>
+);
--- a/packages/images/src/components/create-image/title.js
+++ b/packages/images/src/components/create-image/title.js
@ -0,0 +1,30 @@
+import React from 'react';
+import Flex from 'styled-flex-component';
+import { Margin } from 'styled-components-spacing';
+import remcalc from 'remcalc';
+import styled from 'styled-components';
+import is from 'styled-is';
+
+import { Divider, Small } from 'joyent-ui-toolkit';
+
+const Container = styled.div`
+  ${is('onClick')`
+    cursor: pointer;
+  `};
+`;
+
+export default ({ icon, children, collapsed = true, ...rest }) => (
+  <Container {...rest}>
+    <Flex>
+      <Margin right={1}>
+        <Flex alignCenter full>
+          {icon}
+        </Flex>
+      </Margin>
+      <Small noMargin>{children}</Small>
+    </Flex>
+    <Margin top={1} bottom={collapsed ? 7 : 3}>
+      <Divider height={remcalc(1)} />
+    </Margin>
+  </Container>
+);
--- a/packages/images/src/components/description.js
+++ b/packages/images/src/components/description.js
@ -0,0 +1,14 @@
+import React from 'react';
+import { Row, Col } from 'joyent-react-styled-flexboxgrid';
+import { Margin } from 'styled-components-spacing';
+import { P } from 'joyent-ui-toolkit';
+
+export default ({ children }) => (
+  <Row>
+    <Col xs={12} sm={8}>
+      <Margin bottom={3}>
+        <P>{children}</P>
+      </Margin>
+    </Col>
+  </Row>
+);
--- a/packages/images/src/components/footer.js
+++ b/packages/images/src/components/footer.js
@ -0,0 +1,46 @@
+import React from 'react';
+import styled from 'styled-components';
+import remcalc from 'remcalc';
+
+const List = styled.ul`
+  display: flex;
+  list-style: none;
+  padding: ${remcalc(12)} ${remcalc(18)};
+  border-top: ${remcalc(1)} solid ${props => props.theme.grey};
+  width: 100%;
+  justify-content: flex-end;
+  position: absolute;
+  box-sizing: border-box;
+  margin: 0;
+  bottom: 0;
+`;
+
+const ListItem = styled.li`
+  color: ${props => props.theme.greyDark};
+  &:not(:last-child) {
+    padding-right: ${remcalc(24)};
+  }
+`;
+
+const Link = styled.a`
+  color: ${props => props.theme.greyDark};
+  text-decoration: none;
+`;
+
+export default () => (
+  <List>
+    <ListItem>
+      <Link href="https://www.joyent.com/about/policies" target="_blank">
+        Policies
+      </Link>
+    </ListItem>
+    <ListItem>
+      <Link href="https://www.joyent.com/networking-and-security/security-compliance">
+        Compliance
+      </Link>
+    </ListItem>
+    <ListItem>
+      <b>© {new Date().getFullYear()} Joyent, Inc.</b>
+    </ListItem>
+  </List>
+);
--- a/packages/images/src/components/image.js
+++ b/packages/images/src/components/image.js
@ -3,6 +3,9 @@ import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 import remcalc from 'remcalc';
 import { Field } from 'redux-form';
+import Flex, { FlexItem } from 'styled-flex-component';
+import { Padding, Margin } from 'styled-components-spacing';
+
 import {
  Card,
  Anchor,
@ -19,10 +22,7 @@ import {
  FormGroup
 } from 'joyent-ui-toolkit';

-import Flex, { FlexItem } from 'styled-flex-component';
-import { Padding, Margin } from 'styled-components-spacing';
-
-import { ImageType, OS } from '../constants';
+import { ImageType, OS } from '@root/constants';

 const A = styled(Anchor)`
  color: ${props => props.theme.text};
--- a/packages/images/src/components/summary.js
+++ b/packages/images/src/components/summary.js
@ -22,7 +22,7 @@ import {
  DotIcon
 } from 'joyent-ui-toolkit';

-import { ImageType, OS } from '../constants';
+import { ImageType, OS } from '@root/constants';

 const { SmallOnly, Medium } = QueryBreakpoints;

--- a/packages/images/src/constants.js
+++ b/packages/images/src/constants.js
@ -14,6 +14,7 @@ export const ImageType = {
  DOCKER: 'Docker Container',
  OTHER: 'Hardware Virtual Machine'
 };
+
 export const OS = {
  SMARTOS: Smart,
  LINUX: Linux,
@ -22,3 +23,11 @@ export const OS = {
  ILLUMOS: Illumos,
  OTHER: Placeholder
 };
+
+export const Forms = {
+  FORM_TAGS_CREATE: 'CREATE-IMAGE-TAGS-ADD',
+  FORM_TAGS_EDIT: i => `CREATE-IMAGE-TAGS-EDIT-${i}`,
+  FORM_DETAILS: 'CREATE-IMAGE-DETAILS',
+  CREATE_FORM: 'CREATE-IMAGE',
+  CREATE_TAGS: 'CREATE-IMAGE-TAGS'
+};
--- a/packages/images/src/containers/breadcrumb.js
+++ b/packages/images/src/containers/breadcrumb.js
@ -7,6 +7,8 @@ import { Breadcrumb, BreadcrumbItem } from 'joyent-ui-toolkit';

 export default ({ match }) => {
  const image = get(match, 'params.image');
+  const create = get(match, 'params.step');
+  const instance = get(match, 'params.instance');

  const links = [
    {
@ -14,6 +16,18 @@ export default ({ match }) => {
      pathname: '/'
    }
  ]
+    .concat(
+      create && [
+        {
+          name: 'Create Image',
+          pathname: `/~create`
+        },
+        {
+          name: instance,
+          pathname: `/~create/${instance}`
+        }
+      ]
+    )
    .concat(
      image && [
        {
--- a/packages/images/src/containers/create-image/animated.js
+++ b/packages/images/src/containers/create-image/animated.js
@ -0,0 +1,61 @@
+import React, { Component } from 'react';
+import scrollToElement from 'scroll-to-element';
+
+function slideDown(el) {
+  const { style } = el;
+  const INITIAL = 'initial';
+  const HIDDEN = 'hidden';
+
+  // Get element height
+  style.transition = INITIAL;
+  style.visibility = HIDDEN;
+  style.maxHeight = INITIAL;
+  const offsetHeight = el.offsetHeight;
+  const height = offsetHeight + 'px';
+  style.removeProperty('visibility');
+  style.maxHeight = '0';
+  style.overflow = HIDDEN;
+
+  const timing = `${parseInt(height, 10) * 1.9}ms linear`;
+
+  // Begin transition
+  style.transition = `max-height ${timing}, opacity ${timing}`;
+  requestAnimationFrame(() => {
+    style.maxHeight = height;
+    style.opacity = '1';
+  });
+
+  window.setTimeout(() => {
+    style.removeProperty('overflow');
+    style.removeProperty('max-height');
+  }, 300);
+}
+
+const Animated = WrappedComponent =>
+  class Animated extends Component {
+    componentDidUpdate() {
+      const { match, step } = this.props;
+      if (match.params.step === step) {
+        slideDown(this.wrapper);
+        scrollToElement(this.wrapper, {
+          offset: -50
+        });
+      }
+    }
+
+    shouldComponentUpdate = nextProps =>
+      this.props.match.params.step !== nextProps.match.params.step;
+
+    render() {
+      return (
+        <div
+          ref={w => {
+            this.wrapper = w;
+          }}
+        >
+          <WrappedComponent {...this.props} />
+        </div>
+      );
+    }
+  };
+export default Animated;
--- a/packages/images/src/containers/create-image/details.js
+++ b/packages/images/src/containers/create-image/details.js
@ -0,0 +1,191 @@
+import React, { Fragment } from 'react';
+import { compose, graphql } from 'react-apollo';
+import { set } from 'react-redux-values';
+import ReduxForm from 'declarative-redux-form';
+import { Margin } from 'styled-components-spacing';
+import { change } from 'redux-form';
+import { connect } from 'react-redux';
+import intercept from 'apr-intercept';
+import get from 'lodash.get';
+import punycode from 'punycode';
+import { Row, Col } from 'joyent-react-styled-flexboxgrid';
+
+import { NameIcon, H3, Button, H4, P } from 'joyent-ui-toolkit';
+
+import Title from '@components/create-image/title';
+import Animated from '@containers/create-image/animated';
+import Details from '@components/create-image/details';
+import Description from '@components/description';
+import GetRandomName from '@graphql/get-random-name.gql';
+import { client } from '@state/store';
+import { Forms } from '@root/constants';
+
+const NameContainer = ({
+  expanded,
+  proceeded,
+  name,
+  version,
+  description,
+  placeholderName,
+  randomizing,
+  handleAsyncValidation,
+  shouldAsyncValidate,
+  handleNext,
+  handleRandomize,
+  handleEdit,
+  step
+}) => (
+  <Fragment>
+    <Title
+      id={step}
+      onClick={!expanded && !name && handleEdit}
+      collapsed={!expanded && !proceeded}
+      icon={<NameIcon />}
+    >
+      Image name and details
+    </Title>
+    {expanded ? (
+      <Description>
+        Here you can name your custom image, version it, and give it a
+        description so that you can identify it elsewhere in the Triton
+        ecosystem.
+      </Description>
+    ) : null}
+    <ReduxForm
+      form={Forms.FORM_DETAILS}
+      destroyOnUnmount={false}
+      forceUnregisterOnUnmount={true}
+      onSubmit={handleNext}
+      asyncValidate={handleAsyncValidation}
+      shouldAsyncValidate={shouldAsyncValidate}
+    >
+      {props =>
+        expanded ? (
+          <Details
+            {...props}
+            placeholderName={placeholderName}
+            randomizing={randomizing}
+            onRandomize={handleRandomize}
+          />
+        ) : name ? (
+          <Margin top={3}>
+            <H3 bold noMargin>
+              {name}
+            </H3>
+            {version ? (
+              <Margin top={2}>
+                <H4 bold noMargin>
+                  {version}
+                </H4>
+              </Margin>
+            ) : null}
+            {description ? (
+              <Row>
+                <Col xs={12} sm={8}>
+                  <Margin top={1}>
+                    <P>{description}</P>
+                  </Margin>
+                </Col>
+              </Row>
+            ) : null}
+          </Margin>
+        ) : null
+      }
+    </ReduxForm>
+    {expanded ? (
+      <Margin top={4} bottom={7}>
+        <Button type="button" disabled={!name} onClick={handleNext}>
+          Next
+        </Button>
+      </Margin>
+    ) : proceeded ? (
+      <Margin top={4} bottom={7}>
+        <Button type="button" onClick={handleEdit} secondary>
+          Edit
+        </Button>
+      </Margin>
+    ) : null}
+  </Fragment>
+);
+
+export default compose(
+  Animated,
+  graphql(GetRandomName, {
+    fetchPolicy: 'network-only',
+    props: ({ data }) => ({
+      placeholderName: data.rndName || ''
+    })
+  }),
+  connect(
+    ({ form, values }, ownProps) => {
+      const name = get(form, `${Forms.FORM_DETAILS}.values.name`, '');
+      const version = get(form, `${Forms.FORM_DETAILS}.values.version`, '');
+      const description = get(
+        form,
+        `${Forms.FORM_DETAILS}.values.description`,
+        ''
+      );
+
+      const proceeded = get(values, `${Forms.FORM_DETAILS}-proceeded`, false);
+
+      const randomizing = get(values, 'create-image-name-randomizing', false);
+
+      return {
+        ...ownProps,
+        proceeded,
+        randomizing,
+        name,
+        version,
+        description
+      };
+    },
+    (dispatch, { history, match }) => ({
+      shouldAsyncValidate: ({ trigger }) => trigger === 'submit',
+      handleAsyncValidation: async ({ name }) => {
+        const sanitized = punycode.encode(name).replace(/-$/, '');
+
+        if (sanitized !== name) {
+          // eslint-disable-next-line no-throw-literal
+          throw {
+            name: 'Special characters are not accepted'
+          };
+        }
+
+        if (!/^[a-zA-Z0-9][a-zA-Z0-9\\_\\.\\-]*$/.test(name)) {
+          // eslint-disable-next-line no-throw-literal
+          throw {
+            name: 'Invalid name'
+          };
+        }
+      },
+      handleNext: () => {
+        dispatch(set({ name: `${Forms.FORM_DETAILS}-proceeded`, value: true }));
+
+        return history.push(`/~create/${match.params.instance}/tag`);
+      },
+      handleEdit: () => history.push(`/~create/${match.params.instance}/name`),
+      handleRandomize: async () => {
+        dispatch(set({ name: 'create-image-name-randomizing', value: true }));
+
+        const [err, res] = await intercept(
+          client.query({
+            fetchPolicy: 'network-only',
+            query: GetRandomName
+          })
+        );
+
+        dispatch(set({ name: 'create-image-name-randomizing', value: false }));
+
+        if (err) {
+          console.error(err);
+          return;
+        }
+
+        const { data } = res;
+        const { rndName } = data;
+
+        return dispatch(change(Forms.FORM_DETAILS, 'name', rndName));
+      }
+    })
+  )
+)(NameContainer);
--- a/packages/images/src/containers/create-image/tags.js
+++ b/packages/images/src/containers/create-image/tags.js
@ -0,0 +1,213 @@
+import React, { Fragment } from 'react';
+import { set } from 'react-redux-values';
+import { Margin } from 'styled-components-spacing';
+import { compose } from 'react-apollo';
+import { destroy, reset } from 'redux-form';
+import ReduxForm from 'declarative-redux-form';
+import { connect } from 'react-redux';
+import get from 'lodash.get';
+import remcalc from 'remcalc';
+import Flex from 'styled-flex-component';
+
+import {
+  TagsIcon,
+  Button,
+  H3,
+  TagList,
+  Divider,
+  KeyValue
+} from 'joyent-ui-toolkit';
+
+import Title from '@components/create-image/title';
+import Animated from '@containers/create-image/animated';
+import Description from '@components/description';
+import Tag from '@components/tags';
+import { Forms } from '@root/constants';
+
+export const Tags = ({
+  tags = [],
+  expanded,
+  proceeded,
+  addOpen,
+  handleAddTag,
+  handleRemoveTag,
+  handleUpdateTag,
+  handleToggleExpanded,
+  handleCancelEdit,
+  handleChangeAddOpen,
+  handleNext,
+  step,
+  handleEdit,
+  children
+}) => (
+  <Fragment>
+    <Title
+      id={step}
+      onClick={!expanded && !proceeded && handleEdit}
+      collapsed={!expanded && !proceeded}
+      icon={<TagsIcon />}
+    >
+      Tags
+    </Title>
+    {expanded ? (
+      <Description>
+        Tags can be used to identify your images, group multiple images
+        together, define firewall and affinity rules, and more.{' '}
+        <a
+          target="__blank"
+          href="https://docs.joyent.com/public-cloud/tags-metadata/tags"
+          rel="noopener noreferrer"
+        >
+          Read the docs
+        </a>
+      </Description>
+    ) : null}
+    {proceeded || expanded ? (
+      <Fragment>
+        <Margin bottom={4}>
+          <H3>
+            {tags.length} Tag{tags.length === 1 ? '' : 's'}
+          </H3>
+        </Margin>
+        <TagList>
+          {tags.map(({ name, value }, index) => (
+            <Tag
+              key={index}
+              name={name}
+              value={value}
+              onRemoveClick={expanded && (() => handleRemoveTag(index))}
+            />
+          ))}
+        </TagList>
+      </Fragment>
+    ) : null}
+    <ReduxForm
+      form={Forms.FORM_TAGS_CREATE}
+      destroyOnUnmount={false}
+      forceUnregisterOnUnmount={true}
+      onSubmit={handleAddTag}
+    >
+      {props =>
+        expanded && addOpen ? (
+          <Fragment>
+            <KeyValue
+              {...props}
+              method="add"
+              input="input"
+              type="tag"
+              expanded
+              onCancel={() => handleChangeAddOpen(false)}
+            />
+            <Divider height={remcalc(18)} transparent />
+          </Fragment>
+        ) : null
+      }
+    </ReduxForm>
+    <Margin top={1}>
+      <Flex alignCenter>
+        {expanded ? (
+          <Button
+            type="button"
+            onClick={() => handleChangeAddOpen(true)}
+            secondary
+          >
+            Add Tag
+          </Button>
+        ) : null}
+        <Margin left={1}>{children}</Margin>
+      </Flex>
+    </Margin>
+    {proceeded ? (
+      <Margin top={1}>
+        <Button type="button" onClick={handleEdit} secondary>
+          Edit
+        </Button>
+      </Margin>
+    ) : null}
+  </Fragment>
+);
+
+export default compose(
+  Animated,
+  connect(({ values }, ownProps) => ({
+    proceeded: get(values, `${Forms.CREATE_TAGS}-proceeded`, false),
+    addOpen: get(values, `${Forms.CREATE_TAGS}-add-open`, false),
+    tags: get(values, Forms.CREATE_TAGS, [])
+  })),
+  connect(null, (dispatch, { tags = [], history, match }) => ({
+    handleNext: () => {
+      dispatch(set({ name: `${Forms.CREATE_TAGS}-proceeded`, value: true }));
+
+      return history.push(`/~create/${match.params.instance}/create`);
+    },
+    handleEdit: () => {
+      return history.push(`/~create/${match.params.instance}/tag`);
+    },
+    handleAddTag: value => {
+      const toggleToClosed = set({
+        name: `${Forms.CREATE_TAGS}-add-open`,
+        value: false
+      });
+
+      const appendTag = set({
+        name: Forms.CREATE_TAGS,
+        value: tags.concat([{ ...value, expanded: false }])
+      });
+
+      return dispatch([
+        destroy(Forms.FORM_TAGS_CREATE),
+        toggleToClosed,
+        appendTag
+      ]);
+    },
+    handleUpdateTag: (index, newTag) => {
+      tags[index] = {
+        ...newTag,
+        expanded: false
+      };
+
+      return dispatch([
+        destroy(Forms.FORM_TAGS_EDIT(index)),
+        set({ name: Forms.CREATE_TAGS, value: tags.slice() })
+      ]);
+    },
+    handleChangeAddOpen: value => {
+      return dispatch([
+        reset(Forms.FORM_TAGS_CREATE),
+        set({ name: `${Forms.CREATE_TAGS}-add-open`, value })
+      ]);
+    },
+    handleToggleExpanded: index => {
+      tags[index] = {
+        ...tags[index],
+        expanded: !tags[index].expanded
+      };
+
+      return dispatch(
+        set({
+          name: Forms.CREATE_TAGS,
+          value: tags.slice()
+        })
+      );
+    },
+    handleCancelEdit: index => {
+      tags[index] = {
+        ...tags[index],
+        expanded: false
+      };
+
+      return dispatch([
+        reset(Forms.FORM_TAGS_EDIT(index)),
+        set({ name: Forms.CREATE_TAGS, value: tags.slice() })
+      ]);
+    },
+    handleRemoveTag: index => {
+      tags.splice(index, 1);
+
+      return dispatch([
+        destroy(Forms.FORM_TAGS_EDIT(index)),
+        set({ name: Forms.CREATE_TAGS, value: tags.slice() })
+      ]);
+    }
+  }))
+)(Tags);
--- a/packages/images/src/containers/create.js
+++ b/packages/images/src/containers/create.js
@ -1,3 +1,204 @@
-import React from 'react';
+/* eslint-disable camelcase */

-export default () => <p>hello world</p>;
+import React from 'react';
+import { Margin } from 'styled-components-spacing';
+import ReduxForm from 'declarative-redux-form';
+import { destroyAll } from 'react-redux-values';
+import { destroy, stopSubmit } from 'redux-form';
+import { connect } from 'react-redux';
+import { compose, graphql } from 'react-apollo';
+import intercept from 'apr-intercept';
+import get from 'lodash.get';
+import uniqBy from 'lodash.uniqby';
+import omit from 'lodash.omit';
+import find from 'lodash.find';
+
+import {
+  ViewContainer,
+  H2,
+  Button,
+  StatusLoader,
+  Message,
+  MessageTitle,
+  MessageDescription
+} from 'joyent-ui-toolkit';
+
+import CreateImage from '@graphql/create-image.gql';
+import GetInstance from '@graphql/get-instance.gql';
+import Details from '@containers/create-image/details';
+import Tags from '@containers/create-image/tags';
+import { Forms } from '@root/constants';
+import parseError from '@state/parse-error';
+
+const Create = ({
+  step,
+  history,
+  location,
+  match,
+  disabled,
+  loading,
+  loadingError,
+  handleSubmit
+}) => (
+  <ViewContainer>
+    {loading ? (
+      <Margin top={4}>
+        <StatusLoader />
+      </Margin>
+    ) : null}
+    {loadingError ? (
+      <Margin top={4}>
+        <Message error>
+          <MessageTitle>Ooops!</MessageTitle>
+          <MessageDescription>{loadingError}</MessageDescription>
+        </Message>
+      </Margin>
+    ) : null}
+    {!loading && !loadingError ? (
+      <Margin top={4} bottom={4}>
+        <H2>Create Image</H2>
+      </Margin>
+    ) : null}
+    {!loading && !loadingError ? (
+      <Details
+        history={history}
+        match={match}
+        step="name"
+        expanded={step === 'name'}
+      />
+    ) : null}
+    {!loading && !loadingError ? (
+      <Tags
+        history={history}
+        match={match}
+        step="tag"
+        expanded={step === 'tag'}
+      />
+    ) : null}
+    <ReduxForm form={Forms.CREATE_FORM} onSubmit={handleSubmit}>
+      {({ handleSubmit, submitting }) =>
+        !loading && !loadingError ? (
+          <form onSubmit={handleSubmit}>
+            <Margin top={step === 'tag' ? 7 : 4}>
+              <Button disabled={disabled} loading={submitting}>
+                Create Image
+              </Button>
+            </Margin>
+          </form>
+        ) : null
+      }
+    </ReduxForm>
+  </ViewContainer>
+);
+
+export default compose(
+  graphql(CreateImage, { name: 'createImage' }),
+  graphql(GetInstance, {
+    options: ({ match }) => ({
+      variables: {
+        name: get(match, 'params.instance')
+      }
+    }),
+    props: ({ data: { loading, error, variables, ...rest } }) => {
+      const notFoundMsg = `Instance "${variables.name}" not found!`;
+      const inst = find(get(rest, 'machines', []), ['name', variables.name]);
+      const notFound = !loading && !inst ? notFoundMsg : false;
+
+      return {
+        instance: inst,
+        loadingError: error ? parseError(error) : notFound,
+        loading
+      };
+    }
+  }),
+  connect(({ form, values }, { match }) => {
+    const nameFilled = get(form, `${Forms.FORM_DETAILS}.values.name`, '');
+    const step = get(match, 'params.step', 'name');
+
+    const disabled =
+      !get(values, `${Forms.FORM_DETAILS}-proceeded`, false) ||
+      !nameFilled.length;
+
+    if (disabled) {
+      return { disabled, step };
+    }
+
+    const name = get(
+      form,
+      `${Forms.FORM_DETAILS}.values.name`,
+      '<instance-name>'
+    );
+
+    const description = get(
+      form,
+      `${Forms.FORM_DETAILS}.values.description`,
+      '<instance-description>'
+    );
+
+    const version = get(
+      form,
+      `${Forms.FORM_DETAILS}.values.version`,
+      '<instance-version>'
+    );
+
+    const tags = get(values, Forms.CREATE_TAGS, []);
+
+    return {
+      forms: Object.keys(form), // improve this
+      name,
+      description,
+      version,
+      tags,
+      disabled,
+      step
+    };
+  }),
+  connect(null, (dispatch, ownProps) => {
+    const {
+      name,
+      description,
+      version,
+      tags,
+      instance,
+      forms,
+      createImage,
+      history
+    } = ownProps;
+
+    return {
+      handleSubmit: async () => {
+        const _name = name.toLowerCase();
+        const _description = description.toLowerCase();
+        const _version = version.toLowerCase();
+        const _tags = uniqBy(tags, 'name').map(a => omit(a, 'expanded'));
+
+        const [err, res] = await intercept(
+          createImage({
+            variables: {
+              machine: instance.id,
+              name: _name,
+              version: _version,
+              description: _description,
+              tags: _tags
+            }
+          })
+        );
+
+        if (err) {
+          return dispatch(
+            stopSubmit(Forms.CREATE_FORM, {
+              _error: parseError(err)
+            })
+          );
+        }
+
+        dispatch([destroyAll(), forms.map(name => destroy(name))]);
+
+        const { data } = res;
+        const { createImageFromMachine } = data;
+
+        history.push(`/${createImageFromMachine.name}`);
+      }
+    };
+  })
+)(Create);
--- a/packages/images/src/containers/list.js
+++ b/packages/images/src/containers/list.js
@ -20,14 +20,12 @@ import {

 import ToolbarForm from '@components/toolbar';
 import Empty from '@components/empty';
-
-import { ImageType } from '../constants';
+import { ImageType } from '@root/constants';
 import ListImages from '@graphql/list-images.gql';
-
 import { Image, Filters } from '@components/image';

-const TOGGLE_FORM_NAME = 'images-list-toggle';
-const MENU_FORM_NAME = 'images-list-menu';
+const TOGGLE_FORM_DETAILS = 'images-list-toggle';
+const MENU_FORM_DETAILS = 'images-list-menu';

 export const List = ({
  images = [],
@ -38,7 +36,7 @@ export const List = ({
 }) => (
  <ViewContainer main>
    <Divider height={remcalc(30)} transparent />
-    <ReduxForm form={MENU_FORM_NAME}>
+    <ReduxForm form={MENU_FORM_DETAILS}>
      {props => <ToolbarForm {...props} actionable={!loading} />}
    </ReduxForm>
    <Divider height={remcalc(1)} />
@ -54,7 +52,7 @@ export const List = ({
        <Message error>
          <MessageTitle>Ooops!</MessageTitle>
          <MessageDescription>
-            An error occurred while loading your instances
+            An error occurred while loading your images
          </MessageDescription>
        </Message>
      </Margin>
@ -62,7 +60,7 @@ export const List = ({
    <Fragment>
      <Margin bottom={4}>
        <ReduxForm
-          form={TOGGLE_FORM_NAME}
+          form={TOGGLE_FORM_DETAILS}
          initialValues={{ 'image-type': 'all' }}
        >
          {props => (allImages.length ? <Filters {...props} /> : null)}
@ -93,8 +91,12 @@ export default compose(
    }
  }),
  connect(({ form, values }, { index, error, images = [] }) => {
-    const filter = get(form, `${MENU_FORM_NAME}.values.filter`, false);
-    const typeValue = get(form, `${TOGGLE_FORM_NAME}.values.image-type`, 'all');
+    const filter = get(form, `${MENU_FORM_DETAILS}.values.filter`, false);
+    const typeValue = get(
+      form,
+      `${TOGGLE_FORM_DETAILS}.values.image-type`,
+      'all'
+    );

    const virtual = Object.keys(ImageType).filter(
      i => ImageType[i] === 'Hardware Virtual Machine'
--- a/packages/images/src/containers/menu.js
+++ b/packages/images/src/containers/menu.js
@ -10,7 +10,7 @@ const SECTIONS = [

 export default ({ match }) => {
  const imageSlug = get(match, 'params.image');
-  const sections = imageSlug ? SECTIONS : [];
+  const sections = imageSlug !== '~create' ? SECTIONS : [];

  const links = sections.map(({ name, pathname }) => ({
    name,
--- a/packages/images/src/containers/tags.js
+++ b/packages/images/src/containers/tags.js
@ -21,11 +21,11 @@ import Tag from '@components/tags';
 import ToolbarForm from '@components/toolbar';
 import GetTags from '@graphql/get-tags.gql';

-const MENU_FORM_NAME = 'image-tags-list-menu';
+const MENU_FORM_DETAILS = 'image-tags-list-menu';

 export const Tags = ({ tags = [], loading = false, error = null }) => (
  <ViewContainer main>
-    <ReduxForm form={MENU_FORM_NAME}>
+    <ReduxForm form={MENU_FORM_DETAILS}>
      {props => (
        <Margin bottom="4">
          <ToolbarForm
--- a/packages/images/src/graphql/create-image.gql
+++ b/packages/images/src/graphql/create-image.gql
@ -0,0 +1,18 @@
+mutation createImage(
+  $machine: ID!
+  $name: String!
+  $version: String!
+  $description: String
+  $tags: [KeyValueInput]
+) {
+  createImageFromMachine(
+    machine: $machine
+    name: $name
+    version: $version
+    description: $description
+    tags: $tags
+  ) {
+    id
+    name
+  }
+}
--- a/packages/images/src/graphql/get-instance.gql
+++ b/packages/images/src/graphql/get-instance.gql
@ -0,0 +1,6 @@
+query instance($name: String) {
+  machines(name: $name) {
+    id
+    name
+  }
+}
--- a/packages/images/src/graphql/get-random-name.gql
+++ b/packages/images/src/graphql/get-random-name.gql
@ -0,0 +1,3 @@
+query rndImageName {
+  rndName
+}
--- a/packages/images/src/router.js
+++ b/packages/images/src/router.js
@ -9,24 +9,24 @@ import List from '@containers/list';
 import Summary from '@containers/summary';
 import Create from '@containers/create';
 import Tags from '@containers/tags';
+import Footer from '@components/footer';

 export default () => (
  <BrowserRouter>
    <PageContainer>
      {/* Breadcrumb */}
      <Switch>
-        <Route path="/~create" component={Breadcrumb} />
+        <Route path="/~create/:instance/:step?" exact component={Breadcrumb} />
        <Route path="/:image?" component={Breadcrumb} />
      </Switch>
      {/* Menu */}
      <Switch>
-        <Route path="/~create" component={() => null} />
        <Route path="/:image/:section?" component={Menu} />
+        <Route path="/~create/:instance/:step?" component={() => {}} />
      </Switch>
      {/* Images */}
      <Switch>
        <Route path="/" exact component={List} />
-        <Route path="/~create" exact component={Create} />
        <Route path="/:image/summary" exact component={Summary} />
        <Route path="/:image/tags" exact component={Tags} />
        <Route
@ -37,6 +37,18 @@ export default () => (
          )}
        />
      </Switch>
+      {/* Create Image */}
+      <Switch>
+        <Route
+          path="/~create/:instance?"
+          exact
+          component={({ match }) => (
+            <Redirect to={`/~create/${match.params.instance}/name`} />
+          )}
+        />
+        <Route path="/~create/:instance/:step" component={Create} />
+      </Switch>
+      <Footer />
    </PageContainer>
  </BrowserRouter>
 );
--- a/packages/my-joy-beta/public/index.html
+++ b/packages/my-joy-beta/public/index.html
@ -9,26 +9,6 @@
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <title>My Joyent &beta;</title>
-    <script type=“text/javascript”>(function(e,a){if(!a.__SV){var b=window;try{var c,l,i,j=b.location,g=j.hash;c=function(a,b){return(l=a.match(RegExp(b+“=([^&]*)“)))?l[1]:null};g&&c(g,“state”)&&(i=JSON.parse(decodeURIComponent(c(g,“state”))),“mpeditor”===i.action&&(b.sessionStorage.setItem(“_mpcehash”,g),history.replaceState(i.desiredHash||“”,e.title,j.pathname+j.search)))}catch(m){}var k,h;window.mixpanel=a;a._i=[];a.init=function(b,c,f){function e(b,a){var c=a.split(“.”);2==c.length&&(b=b[c[0]],a=c[1]);b[a]=function(){b.push([a].concat(Array.prototype.slice.call(arguments,
-      0)))}}var d=a;“undefined”!==typeof f?d=a[f]=[]:f=“mixpanel”;d.people=d.people||[];d.toString=function(b){var a=“mixpanel”;“mixpanel”!==f&&(a+=“.”+f);b||(a+=” (stub)“);return a};d.people.toString=function(){return d.toString(1)+“.people (stub)“};k=“disable time_event track track_pageview track_links track_forms register register_once alias unregister identify name_tag set_config reset people.set people.set_once people.unset people.increment people.append people.union people.track_charge people.clear_charges people.delete_user”.split(” “);
-      for(h=0;h<k.length;h++)e(d,k[h]);a._i.push([b,c,f])};a.__SV=1.2;b=e.createElement(“script”);b.type=“text/javascript”;b.async=!0;b.src=“undefined”!==typeof MIXPANEL_CUSTOM_LIB_URL?MIXPANEL_CUSTOM_LIB_URL:“file:“===e.location.protocol&&“//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js”.match(/^\/\//)?“https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js“:”//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js”;c=e.getElementsByTagName(“script”)[0];c.parentNode.insertBefore(b,c)}})(document,window.mixpanel||[]);
-      mixpanel.init(“3182a7dadd00ae408e0b9ee9d4903770");
-    </script>
-    <script type="text/javascript">
-      window.heap = window.heap || [], heap.load = function (e, t) { window.heap.appid = e, window.heap.config = t = t || {}; var r = t.forceSSL || "https:" === document.location.protocol, a = document.createElement("script"); a.type = "text/javascript", a.async = !0, a.src = (r ? "https:" : "http:") + "//cdn.heapanalytics.com/js/heap-" + e + ".js"; var n = document.getElementsByTagName("script")[0]; n.parentNode.insertBefore(a, n); for (var o = function (e) { return function () { heap.push([e].concat(Array.prototype.slice.call(arguments, 0))) } }, p = ["addEventProperties", "addUserProperties", "clearEventProperties", "identify", "removeEventProperty", "setEventProperties", "track", "unsetEventProperty"], c = 0; c < p.length; c++)heap[p[c]] = o(p[c]) };
-      heap.load("1044364007");
-    </script>
-    <!-- Hotjar Tracking Code for www.makeusproud.com -->
-    <script>
-      (function (h, o, t, j, a, r) {
-        h.hj = h.hj || function () { (h.hj.q = h.hj.q || []).push(arguments) };
-        h._hjSettings = { hjid: 767828, hjsv: 6 };
-        a = o.getElementsByTagName('head')[0];
-        r = o.createElement('script'); r.async = 1;
-        r.src = t + h._hjSettings.hjid + j + h._hjSettings.hjsv;
-        a.appendChild(r);
-      })(window, document, 'https://static.hotjar.com/c/hotjar-','.js?sv=');
-    </script>
  </head>
  <body>
    <noscript>
--- a/packages/my-joy-beta/src/components/tests/snapshots/key-value.spec.js.snap
+++ b/packages/my-joy-beta/src/components/tests/snapshots/key-value.spec.js.snap
@ -2316,6 +2316,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  width: 100%;
+  max-width: 100%;
 }

 .c23 {
--- a/packages/my-joy-beta/src/components/instances/tests/snapshots/metadata.spec.js.snap
+++ b/packages/my-joy-beta/src/components/instances/tests/snapshots/metadata.spec.js.snap
@ -43,6 +43,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  width: 100%;
+  max-width: 100%;
 }

 .c23 {
@ -1115,6 +1116,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  width: 100%;
+  max-width: 100%;
 }

 .c24 {
--- a/packages/my-joy-beta/src/containers/create-instance/tests/snapshots/metadata.spec.js.snap
+++ b/packages/my-joy-beta/src/containers/create-instance/tests/snapshots/metadata.spec.js.snap
@ -460,6 +460,7 @@ Array [
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  width: 100%;
+  max-width: 100%;
 }

 .c23 {
@ -2406,6 +2407,7 @@ Array [
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  width: 100%;
+  max-width: 100%;
 }

 .c24 {
@ -3522,6 +3524,7 @@ Array [
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  width: 100%;
+  max-width: 100%;
 }

 .c24 {
@ -4909,6 +4912,7 @@ Array [
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  width: 100%;
+  max-width: 100%;
 }

 .c24 {
@ -6044,6 +6048,7 @@ Array [
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  width: 100%;
+  max-width: 100%;
 }

 .c24 {
--- a/packages/my-joy-beta/src/containers/create-instance/tests/snapshots/user-script.spec.js.snap
+++ b/packages/my-joy-beta/src/containers/create-instance/tests/snapshots/user-script.spec.js.snap
@ -184,6 +184,7 @@ Array [
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  width: 100%;
+  max-width: 100%;
 }

 .c22 {
@ -1373,6 +1374,7 @@ Array [
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  width: 100%;
+  max-width: 100%;
 }

 .c22 {
@ -3206,6 +3208,7 @@ Array [
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  width: 100%;
+  max-width: 100%;
 }

 .c22 {
@ -4513,6 +4516,7 @@ Array [
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  width: 100%;
+  max-width: 100%;
 }

 .c23 {
@ -5849,6 +5853,7 @@ Array [
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  width: 100%;
+  max-width: 100%;
 }

 .c23 {
@ -7110,6 +7115,7 @@ Array [
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  width: 100%;
+  max-width: 100%;
 }

 .c22 {
--- a/packages/my-joy-beta/src/containers/instances/tests/snapshots/metadata.spec.js.snap
+++ b/packages/my-joy-beta/src/containers/instances/tests/snapshots/metadata.spec.js.snap
@ -516,6 +516,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  width: 100%;
+  max-width: 100%;
 }

 .c10 {
@ -2960,6 +2961,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  width: 100%;
+  max-width: 100%;
 }

 .c44 {
--- a/packages/my-joy-beta/src/containers/instances/resize.js
+++ b/packages/my-joy-beta/src/containers/instances/resize.js
@ -1,7 +0,0 @@
-import React from 'react';
-
-import { ViewContainer } from 'joyent-ui-toolkit';
-
-export const Resize = () => <ViewContainer main>Resize</ViewContainer>;
-
-export default Resize;
--- a/packages/ui-toolkit/src/form/textarea.js
+++ b/packages/ui-toolkit/src/form/textarea.js
@ -14,6 +14,7 @@ const BaseTextarea = TextareaInput.extend`
  ${is('fluid')`
    flex: 1 1 auto;
    width: 100%;
+    max-width: 100%;
  `};
 `;

--- a/yarn.lock
+++ b/yarn.lock
@ -11,10 +11,10 @@
    js-tokens "^3.0.0"

 "@babel/helper-annotate-as-pure@^7.0.0-beta.37":
-  version "7.0.0-beta.39"
-  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.0.0-beta.39.tgz#cf9506c721c838806ca5eabe15783507ba2edce0"
+  version "7.0.0-beta.40"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.0.0-beta.40.tgz#095dd4c70b231eba17ebf61c3434e6f9d71bd574"
  dependencies:
-    "@babel/types" "7.0.0-beta.39"
+    "@babel/types" "7.0.0-beta.40"

 "@babel/helper-function-name@7.0.0-beta.36":
  version "7.0.0-beta.36"
@ -75,9 +75,9 @@
    lodash "^4.2.0"
    to-fast-properties "^2.0.0"

-"@babel/types@7.0.0-beta.39":
-  version "7.0.0-beta.39"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.0.0-beta.39.tgz#2ea0d97efe4781688751edc68cde640d6559938c"
+"@babel/types@7.0.0-beta.40":
+  version "7.0.0-beta.40"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.0.0-beta.40.tgz#25c3d7aae14126abe05fcb098c65a66b6d6b8c14"
  dependencies:
    esutils "^2.0.2"
    lodash "^4.2.0"
@ -211,25 +211,31 @@ acorn-dynamic-import@^2.0.0:
  dependencies:
    acorn "^4.0.3"

+acorn-dynamic-import@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/acorn-dynamic-import/-/acorn-dynamic-import-3.0.0.tgz#901ceee4c7faaef7e07ad2a47e890675da50a278"
+  dependencies:
+    acorn "^5.0.0"
+
 acorn-globals@^3.1.0:
  version "3.1.0"
  resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-3.1.0.tgz#fd8270f71fbb4996b004fa880ee5d46573a731bf"
  dependencies:
    acorn "^4.0.4"

-acorn-jsx@^3.0.0, acorn-jsx@^3.0.1:
+acorn-jsx@^3.0.0:
  version "3.0.1"
  resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-3.0.1.tgz#afdf9488fb1ecefc8348f6fb22f464e32a58b36b"
  dependencies:
    acorn "^3.0.4"

-acorn-object-spread@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/acorn-object-spread/-/acorn-object-spread-1.0.0.tgz#48ead0f4a8eb16995a17a0db9ffc6acaada4ba68"
+acorn-jsx@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-4.1.1.tgz#e8e41e48ea2fe0c896740610ab6a4ffd8add225e"
  dependencies:
-    acorn "^3.1.0"
+    acorn "^5.0.3"

-acorn@^3.0.4, acorn@^3.1.0, acorn@^3.3.0:
+acorn@^3.0.4:
  version "3.3.0"
  resolved "https://registry.yarnpkg.com/acorn/-/acorn-3.3.0.tgz#45e37fb39e8da3f25baee3ff5369e2bb5f22017a"

@ -237,7 +243,7 @@ acorn@^4.0.3, acorn@^4.0.4:
  version "4.0.13"
  resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.13.tgz#105495ae5361d697bd195c825192e1ad7f253787"

-acorn@^5.0.0, acorn@^5.1.1, acorn@^5.4.0:
+acorn@^5.0.0, acorn@^5.0.3, acorn@^5.1.1, acorn@^5.4.0, acorn@^5.4.1:
  version "5.4.1"
  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.4.1.tgz#fdc58d9d17f4a4e98d102ded826a9b9759125102"

@ -259,6 +265,10 @@ ajv-keywords@^2.0.0, ajv-keywords@^2.1.0:
  version "2.1.1"
  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-2.1.1.tgz#617997fc5f60576894c435f940d819e135b80762"

+ajv-keywords@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.1.0.tgz#ac2b27939c543e95d2c06e7f7f5c27be4aa543be"
+
 ajv@^4.9.1:
  version "4.11.8"
  resolved "https://registry.yarnpkg.com/ajv/-/ajv-4.11.8.tgz#82ffb02b29e662ae53bdc20af15947706739c536"
@ -275,6 +285,14 @@ ajv@^5.0.0, ajv@^5.1.0, ajv@^5.1.5, ajv@^5.2.0, ajv@^5.2.3, ajv@^5.3.0:
    fast-json-stable-stringify "^2.0.0"
    json-schema-traverse "^0.3.0"

+ajv@^6.1.0:
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.1.1.tgz#978d597fbc2b7d0e5a5c3ddeb149a682f2abfa0e"
+  dependencies:
+    fast-deep-equal "^1.0.0"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.3.0"
+
 align-text@^0.1.1, align-text@^0.1.3:
  version "0.1.4"
  resolved "https://registry.yarnpkg.com/align-text/-/align-text-0.1.4.tgz#0cd90a561093f35d0a99256c22b7069433fad117"
@ -348,7 +366,7 @@ anymatch@^2.0.0:
    micromatch "^3.1.4"
    normalize-path "^2.1.1"

-apollo-cache-inmemory@^1.1.5:
+apollo-cache-inmemory@^1.1.5, apollo-cache-inmemory@^1.1.7:
  version "1.1.7"
  resolved "https://registry.yarnpkg.com/apollo-cache-inmemory/-/apollo-cache-inmemory-1.1.7.tgz#15e6200f70431414d29bd5f20e86d81739e26430"
  dependencies:
@ -362,7 +380,7 @@ apollo-cache@^1.1.2:
  dependencies:
    apollo-utilities "^1.0.6"

-apollo-client@^2.2.0:
+apollo-client@^2.2.0, apollo-client@^2.2.3:
  version "2.2.3"
  resolved "https://registry.yarnpkg.com/apollo-client/-/apollo-client-2.2.3.tgz#a8df51c9ff89acb0d98de81b911e56b1ce468ca3"
  dependencies:
@ -382,7 +400,7 @@ apollo-link-dedup@^1.0.0:
  dependencies:
    apollo-link "^1.1.0"

-apollo-link-http@^1.3.2:
+apollo-link-http@^1.3.2, apollo-link-http@^1.3.3:
  version "1.3.3"
  resolved "https://registry.yarnpkg.com/apollo-link-http/-/apollo-link-http-1.3.3.tgz#cb792c73266607e6361c8c1cc4dd42d405ca08f1"
  dependencies:
@ -674,7 +692,7 @@ ast-types-flow@0.0.7:
  version "0.0.7"
  resolved "https://registry.yarnpkg.com/ast-types-flow/-/ast-types-flow-0.0.7.tgz#f70b735c6bca1a5c9c22d982c3e39e7feba3bdad"

-ast-types@0.10.1, ast-types@^0.10.1:
+ast-types@0.10.1:
  version "0.10.1"
  resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.10.1.tgz#f52fca9715579a14f841d67d7f8d25432ab6a3dd"

@ -682,6 +700,10 @@ ast-types@0.9.11:
  version "0.9.11"
  resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.9.11.tgz#371177bb59232ff5ceaa1d09ee5cad705b1a5aa9"

+ast-types@^0.10.1:
+  version "0.10.2"
+  resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.10.2.tgz#aef76a04fde54634976fc94defaad1a67e2eadb0"
+
 ast-types@^0.7.2:
  version "0.7.8"
  resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.7.8.tgz#902d2e0d60d071bdcd46dc115e1809ed11c138a9"
@ -1847,8 +1869,8 @@ boxen@^1.2.1:
    widest-line "^2.0.0"

 brace-expansion@^1.0.0, brace-expansion@^1.1.7:
-  version "1.1.9"
-  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.9.tgz#acdc7dde0e939fb3b32fe933336573e2a7dc2b7c"
+  version "1.1.11"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
  dependencies:
    balanced-match "^1.0.0"
    concat-map "0.0.1"
@ -1987,18 +2009,18 @@ bser@^2.0.0:
  dependencies:
    node-int64 "^0.4.0"

-buble@0.16.0:
-  version "0.16.0"
-  resolved "https://registry.yarnpkg.com/buble/-/buble-0.16.0.tgz#1773e7b5a383f5c722af6b1b16b2ba49cb866a98"
+buble@^0.19.2:
+  version "0.19.3"
+  resolved "https://registry.yarnpkg.com/buble/-/buble-0.19.3.tgz#01e9412062cff1da6f20342b6ecd72e7bf699d02"
  dependencies:
-    acorn "^3.3.0"
-    acorn-jsx "^3.0.1"
-    acorn-object-spread "^1.0.0"
-    chalk "^1.1.3"
-    magic-string "^0.14.0"
+    acorn "^5.4.1"
+    acorn-dynamic-import "^3.0.0"
+    acorn-jsx "^4.1.1"
+    chalk "^2.3.1"
+    magic-string "^0.22.4"
    minimist "^1.2.0"
    os-homedir "^1.0.1"
-    vlq "^0.2.2"
+    vlq "^1.0.0"

 buffer-indexof@^1.0.0:
  version "1.1.1"
@ -2153,12 +2175,12 @@ caniuse-api@^1.5.2:
    lodash.uniq "^4.5.0"

 caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639:
-  version "1.0.30000805"
-  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000805.tgz#8f1ad9264c835989b5055dd9b009513ce6d95338"
+  version "1.0.30000808"
+  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000808.tgz#30dfd83009d5704f02dffb37725068ed12a366bb"

 caniuse-lite@^1.0.30000748, caniuse-lite@^1.0.30000792:
-  version "1.0.30000805"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000805.tgz#83a5f21ead01486e67bccca6fae5dca7cde496de"
+  version "1.0.30000808"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000808.tgz#7d759b5518529ea08b6705a19e70dbf401628ffc"

 capture-stack-trace@^1.0.0:
  version "1.0.0"
@ -2218,13 +2240,13 @@ chalk@2.1.0:
    escape-string-regexp "^1.0.5"
    supports-color "^4.0.0"

-chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.3.0.tgz#b5ea48efc9c1793dccc9b4767c93914d3f2d52ba"
+chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.0, chalk@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.3.1.tgz#523fe2678aec7b04e8041909292fe8b17059b796"
  dependencies:
-    ansi-styles "^3.1.0"
+    ansi-styles "^3.2.0"
    escape-string-regexp "^1.0.5"
-    supports-color "^4.0.0"
+    supports-color "^5.2.0"

 chalk@~0.5.1:
  version "0.5.1"
@ -2521,8 +2543,8 @@ columnify@^1.5.4:
    wcwidth "^1.0.0"

 combined-stream@^1.0.5, combined-stream@~1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.5.tgz#938370a57b4a51dea2c77c15d5c5fdf895164009"
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.6.tgz#723e7df6e801ac5613113a7e445a9b69cb632818"
  dependencies:
    delayed-stream "~1.0.0"

@ -2530,11 +2552,7 @@ command-join@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/command-join/-/command-join-2.0.0.tgz#52e8b984f4872d952ff1bdc8b98397d27c7144cf"

-commander@2.12.x, commander@~2.12.1:
-  version "2.12.2"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.12.2.tgz#0f5946c427ed9ec0d91a46bb9def53e54650e555"
-
-commander@^2.11.0, commander@^2.9.0, commander@~2.14.1:
+commander@2.14.x, commander@^2.11.0, commander@^2.9.0, commander@~2.14.1:
  version "2.14.1"
  resolved "https://registry.yarnpkg.com/commander/-/commander-2.14.1.tgz#2235123e37af8ca3c65df45b026dbd357b01b9aa"

@ -2542,6 +2560,10 @@ commander@~2.1.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/commander/-/commander-2.1.0.tgz#d121bbae860d9992a3d517ba96f56588e47c6781"

+commander@~2.12.1:
+  version "2.12.2"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.12.2.tgz#0f5946c427ed9ec0d91a46bb9def53e54650e555"
+
 common-dir@^1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/common-dir/-/common-dir-1.0.1.tgz#4fd872085ebc5f262d9cc23b0ff34b3e457677f0"
@ -2694,46 +2716,46 @@ content@4.x.x:
  dependencies:
    boom "7.x.x"

-conventional-changelog-angular@^1.3.3, conventional-changelog-angular@^1.6.2:
-  version "1.6.2"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-angular/-/conventional-changelog-angular-1.6.2.tgz#0a811313de46326e5e4e11dac281d61cfe1f00c4"
+conventional-changelog-angular@^1.3.3, conventional-changelog-angular@^1.6.4:
+  version "1.6.4"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-angular/-/conventional-changelog-angular-1.6.4.tgz#47debaf92b75b0bd6b39fcba8f9c70dd97552be6"
  dependencies:
    compare-func "^1.3.1"
    q "^1.4.1"

-conventional-changelog-atom@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-atom/-/conventional-changelog-atom-0.2.0.tgz#72f18e5c74e3d8807411252fe013818ddffa7157"
+conventional-changelog-atom@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-atom/-/conventional-changelog-atom-0.2.2.tgz#2c7326a8f24686f51500a290ed897d47612be4c3"
  dependencies:
    q "^1.4.1"

 conventional-changelog-cli@^1.3.2:
-  version "1.3.9"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-cli/-/conventional-changelog-cli-1.3.9.tgz#926aed3af40c76682f6e192f8a573f46dcd3894f"
+  version "1.3.13"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-cli/-/conventional-changelog-cli-1.3.13.tgz#8cb5855bc3c684aa8f5dc96e848d1fa5a82eee1e"
  dependencies:
    add-stream "^1.0.0"
-    conventional-changelog "^1.1.11"
+    conventional-changelog "^1.1.15"
    lodash "^4.1.0"
    meow "^3.7.0"
    tempfile "^1.1.1"

-conventional-changelog-codemirror@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-codemirror/-/conventional-changelog-codemirror-0.3.0.tgz#4dd8abb9f521a638cab49f683496c26b8a5c6d31"
+conventional-changelog-codemirror@^0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-codemirror/-/conventional-changelog-codemirror-0.3.2.tgz#65ef0ab738c40bdf953951edfdb0cb17302606aa"
  dependencies:
    q "^1.4.1"

-conventional-changelog-core@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-core/-/conventional-changelog-core-2.0.1.tgz#7573de89bde46e0ccf395b4b85a0869aa5388e8d"
+conventional-changelog-core@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-core/-/conventional-changelog-core-2.0.3.tgz#30797b91d5f510188288d5ff54905e5cf4628e3c"
  dependencies:
-    conventional-changelog-writer "^3.0.0"
-    conventional-commits-parser "^2.1.1"
+    conventional-changelog-writer "^3.0.2"
+    conventional-commits-parser "^2.1.3"
    dateformat "^1.0.12"
    get-pkg-repo "^1.0.0"
-    git-raw-commits "^1.3.0"
+    git-raw-commits "^1.3.2"
    git-remote-origin-url "^2.0.0"
-    git-semver-tags "^1.3.0"
+    git-semver-tags "^1.3.2"
    lodash "^4.0.0"
    normalize-package-data "^2.3.5"
    q "^1.4.1"
@ -2741,21 +2763,21 @@ conventional-changelog-core@^2.0.1:
    read-pkg-up "^1.0.1"
    through2 "^2.0.0"

-conventional-changelog-ember@^0.3.2:
+conventional-changelog-ember@^0.3.4:
+  version "0.3.4"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-ember/-/conventional-changelog-ember-0.3.4.tgz#76240e769b2f5298e78e85cb4eda69ef2f1358d2"
+  dependencies:
+    q "^1.4.1"
+
+conventional-changelog-eslint@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-eslint/-/conventional-changelog-eslint-1.0.2.tgz#3f9e6b0b60f98042f6f4dfc85a611a50b5e79cf9"
+  dependencies:
+    q "^1.4.1"
+
+conventional-changelog-express@^0.3.2:
  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-ember/-/conventional-changelog-ember-0.3.2.tgz#d3dd89ffe96832384a5d3b60dc63bf5e0142a944"
-  dependencies:
-    q "^1.4.1"
-
-conventional-changelog-eslint@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-eslint/-/conventional-changelog-eslint-1.0.0.tgz#c63cd9d6f09d4e204530ae7369d7a20a167bc6bc"
-  dependencies:
-    q "^1.4.1"
-
-conventional-changelog-express@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-express/-/conventional-changelog-express-0.3.0.tgz#5ed006f48682d8615ee0ab5f53cacb26fbd3e1c8"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-express/-/conventional-changelog-express-0.3.2.tgz#f5af4770a31f147986db548b49f9952fc55e3eb6"
  dependencies:
    q "^1.4.1"

@ -2771,19 +2793,23 @@ conventional-changelog-jscs@^0.1.0:
  dependencies:
    q "^1.4.1"

-conventional-changelog-jshint@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-jshint/-/conventional-changelog-jshint-0.3.0.tgz#0393fd468113baf73cba911d17c5826423366a28"
+conventional-changelog-jshint@^0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-jshint/-/conventional-changelog-jshint-0.3.2.tgz#4d45d2601c944687abceabbc1789323719234cbe"
  dependencies:
    compare-func "^1.3.1"
    q "^1.4.1"

-conventional-changelog-writer@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-writer/-/conventional-changelog-writer-3.0.0.tgz#e106154ed94341e387d717b61be2181ff53254cc"
+conventional-changelog-preset-loader@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-preset-loader/-/conventional-changelog-preset-loader-1.1.4.tgz#5096165f2742a18dc0e33ff2ab9ee08dc9d77f08"
+
+conventional-changelog-writer@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-writer/-/conventional-changelog-writer-3.0.2.tgz#f3f934028379c0cab90aecfcaf009bf8a187ef14"
  dependencies:
    compare-func "^1.3.1"
-    conventional-commits-filter "^1.1.1"
+    conventional-commits-filter "^1.1.3"
    dateformat "^1.0.11"
    handlebars "^4.0.2"
    json-stringify-safe "^5.0.1"
@ -2793,31 +2819,32 @@ conventional-changelog-writer@^3.0.0:
    split "^1.0.0"
    through2 "^2.0.0"

-conventional-changelog@^1.1.11:
-  version "1.1.11"
-  resolved "https://registry.yarnpkg.com/conventional-changelog/-/conventional-changelog-1.1.11.tgz#3c880f5e5ebf483642a19d9bd5c9562f0d1257b8"
+conventional-changelog@^1.1.15:
+  version "1.1.15"
+  resolved "https://registry.yarnpkg.com/conventional-changelog/-/conventional-changelog-1.1.15.tgz#a5c3d281efb40f61c7d21eeffb19e6f6a8429df0"
  dependencies:
-    conventional-changelog-angular "^1.6.2"
-    conventional-changelog-atom "^0.2.0"
-    conventional-changelog-codemirror "^0.3.0"
-    conventional-changelog-core "^2.0.1"
-    conventional-changelog-ember "^0.3.2"
-    conventional-changelog-eslint "^1.0.0"
-    conventional-changelog-express "^0.3.0"
+    conventional-changelog-angular "^1.6.4"
+    conventional-changelog-atom "^0.2.2"
+    conventional-changelog-codemirror "^0.3.2"
+    conventional-changelog-core "^2.0.3"
+    conventional-changelog-ember "^0.3.4"
+    conventional-changelog-eslint "^1.0.2"
+    conventional-changelog-express "^0.3.2"
    conventional-changelog-jquery "^0.1.0"
    conventional-changelog-jscs "^0.1.0"
-    conventional-changelog-jshint "^0.3.0"
+    conventional-changelog-jshint "^0.3.2"
+    conventional-changelog-preset-loader "^1.1.4"

-conventional-commits-filter@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/conventional-commits-filter/-/conventional-commits-filter-1.1.1.tgz#72172319c0c88328a015b30686b55527b3a5e54a"
+conventional-commits-filter@^1.1.1, conventional-commits-filter@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/conventional-commits-filter/-/conventional-commits-filter-1.1.3.tgz#5bf591bc4882fc8c9bd329e5a83ca1fa8721d9fb"
  dependencies:
    is-subset "^0.1.1"
    modify-values "^1.0.0"

-conventional-commits-parser@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/conventional-commits-parser/-/conventional-commits-parser-2.1.1.tgz#1525a01bdad3349297b4210396e283d8a8ffd044"
+conventional-commits-parser@^2.1.1, conventional-commits-parser@^2.1.3:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/conventional-commits-parser/-/conventional-commits-parser-2.1.3.tgz#fbbfcfe4901ccbae63bb3834f982325e0b7c663f"
  dependencies:
    JSONStream "^1.0.4"
    is-text-path "^1.0.0"
@ -3856,8 +3883,8 @@ eslint-plugin-flowtype@2.39.1:
    lodash "^4.15.0"

 eslint-plugin-flowtype@^2.39.1:
-  version "2.43.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-flowtype/-/eslint-plugin-flowtype-2.43.0.tgz#47cdac5f01cda53f1c3e8477f0c83fee66a1606e"
+  version "2.44.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-flowtype/-/eslint-plugin-flowtype-2.44.0.tgz#c0610d0018801e1fbe1eaec1c2174de1338ab4ee"
  dependencies:
    lodash "^4.15.0"

@ -4743,9 +4770,9 @@ getpass@^0.1.1:
  dependencies:
    assert-plus "^1.0.0"

-git-raw-commits@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/git-raw-commits/-/git-raw-commits-1.3.0.tgz#0bc8596e90d5ffe736f7f5546bd2d12f73abaac6"
+git-raw-commits@^1.3.0, git-raw-commits@^1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/git-raw-commits/-/git-raw-commits-1.3.2.tgz#0766c14d33566ba0094869697e13b0eb06147c07"
  dependencies:
    dargs "^4.0.1"
    lodash.template "^4.0.2"
@ -4760,9 +4787,9 @@ git-remote-origin-url@^2.0.0:
    gitconfiglocal "^1.0.0"
    pify "^2.3.0"

-git-semver-tags@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/git-semver-tags/-/git-semver-tags-1.3.0.tgz#b154833a6ab5c360c0ad3b1aa9b8f12ea06de919"
+git-semver-tags@^1.3.0, git-semver-tags@^1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/git-semver-tags/-/git-semver-tags-1.3.2.tgz#94afa43c9070ae527a3ab86b978e59ae207803cc"
  dependencies:
    meow "^3.3.0"
    semver "^5.0.1"
@ -4907,8 +4934,8 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.3, graceful-fs@^4.1.4,
  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"

 graphi@^5.3.0:
-  version "5.3.0"
-  resolved "https://registry.yarnpkg.com/graphi/-/graphi-5.3.0.tgz#1698c9fce7dec49e771d00d9f3175693ad7461e4"
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/graphi/-/graphi-5.3.1.tgz#83715e0a8c433705fe94ca2d5a98a375a309873f"
  dependencies:
    boom "7.x.x"
    graphql "0.12.x"
@ -4948,12 +4975,13 @@ graphql-tag@^2.6.1:
  resolved "https://registry.yarnpkg.com/graphql-tag/-/graphql-tag-2.7.3.tgz#5040112a1b4623285ef017c252276f0dea37f03f"

 graphql-tools@^2.19.0:
-  version "2.20.2"
-  resolved "https://registry.yarnpkg.com/graphql-tools/-/graphql-tools-2.20.2.tgz#b953ce7d62bbf6a1ca947101883ae725e1f58e02"
+  version "2.21.0"
+  resolved "https://registry.yarnpkg.com/graphql-tools/-/graphql-tools-2.21.0.tgz#c0d0fbda6f40a87c8d267a2989ade2ae8b9a288e"
  dependencies:
-    apollo-link "^1.0.0"
+    apollo-link "^1.1.0"
    apollo-utilities "^1.0.1"
    deprecated-decorator "^0.1.6"
+    iterall "^1.1.3"
    uuid "^3.1.0"

 graphql@0.12.x, graphql@^0.12.3:
@ -5239,12 +5267,12 @@ html-entities@^1.2.0:
  resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.2.1.tgz#0df29351f0721163515dfb9e5543e5f6eed5162f"

 html-minifier@^3.2.3:
-  version "3.5.8"
-  resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.5.8.tgz#5ccdb1f73a0d654e6090147511f6e6b2ee312700"
+  version "3.5.9"
+  resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.5.9.tgz#74424014b872598d4bb0e20ac420926ec61024b6"
  dependencies:
    camel-case "3.0.x"
    clean-css "4.1.x"
-    commander "2.12.x"
+    commander "2.14.x"
    he "1.1.x"
    ncname "1.0.x"
    param-case "2.1.x"
@ -5952,24 +5980,24 @@ isstream@~0.1.2:
  resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"

 istanbul-api@^1.1.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/istanbul-api/-/istanbul-api-1.2.1.tgz#0c60a0515eb11c7d65c6b50bba2c6e999acd8620"
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/istanbul-api/-/istanbul-api-1.2.2.tgz#e17cd519dd5ec4141197f246fdf380b75487f3b1"
  dependencies:
    async "^2.1.4"
    fileset "^2.0.2"
-    istanbul-lib-coverage "^1.1.1"
+    istanbul-lib-coverage "^1.1.2"
    istanbul-lib-hook "^1.1.0"
-    istanbul-lib-instrument "^1.9.1"
-    istanbul-lib-report "^1.1.2"
-    istanbul-lib-source-maps "^1.2.2"
-    istanbul-reports "^1.1.3"
+    istanbul-lib-instrument "^1.9.2"
+    istanbul-lib-report "^1.1.3"
+    istanbul-lib-source-maps "^1.2.3"
+    istanbul-reports "^1.1.4"
    js-yaml "^3.7.0"
    mkdirp "^0.5.1"
    once "^1.4.0"

-istanbul-lib-coverage@^1.0.1, istanbul-lib-coverage@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-1.1.1.tgz#73bfb998885299415c93d38a3e9adf784a77a9da"
+istanbul-lib-coverage@^1.0.1, istanbul-lib-coverage@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-1.1.2.tgz#4113c8ff6b7a40a1ef7350b01016331f63afde14"

 istanbul-lib-hook@^1.1.0:
  version "1.1.0"
@ -5977,40 +6005,40 @@ istanbul-lib-hook@^1.1.0:
  dependencies:
    append-transform "^0.4.0"

-istanbul-lib-instrument@^1.4.2, istanbul-lib-instrument@^1.7.5, istanbul-lib-instrument@^1.9.1:
-  version "1.9.1"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-1.9.1.tgz#250b30b3531e5d3251299fdd64b0b2c9db6b558e"
+istanbul-lib-instrument@^1.4.2, istanbul-lib-instrument@^1.7.5, istanbul-lib-instrument@^1.9.2:
+  version "1.9.2"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-1.9.2.tgz#84905bf47f7e0b401d6b840da7bad67086b4aab6"
  dependencies:
    babel-generator "^6.18.0"
    babel-template "^6.16.0"
    babel-traverse "^6.18.0"
    babel-types "^6.18.0"
    babylon "^6.18.0"
-    istanbul-lib-coverage "^1.1.1"
+    istanbul-lib-coverage "^1.1.2"
    semver "^5.3.0"

-istanbul-lib-report@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-report/-/istanbul-lib-report-1.1.2.tgz#922be27c13b9511b979bd1587359f69798c1d425"
+istanbul-lib-report@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-report/-/istanbul-lib-report-1.1.3.tgz#2df12188c0fa77990c0d2176d2d0ba3394188259"
  dependencies:
-    istanbul-lib-coverage "^1.1.1"
+    istanbul-lib-coverage "^1.1.2"
    mkdirp "^0.5.1"
    path-parse "^1.0.5"
    supports-color "^3.1.2"

-istanbul-lib-source-maps@^1.1.0, istanbul-lib-source-maps@^1.2.2:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-source-maps/-/istanbul-lib-source-maps-1.2.2.tgz#750578602435f28a0c04ee6d7d9e0f2960e62c1c"
+istanbul-lib-source-maps@^1.1.0, istanbul-lib-source-maps@^1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-source-maps/-/istanbul-lib-source-maps-1.2.3.tgz#20fb54b14e14b3fb6edb6aca3571fd2143db44e6"
  dependencies:
    debug "^3.1.0"
-    istanbul-lib-coverage "^1.1.1"
+    istanbul-lib-coverage "^1.1.2"
    mkdirp "^0.5.1"
    rimraf "^2.6.1"
    source-map "^0.5.3"

-istanbul-reports@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-1.1.3.tgz#3b9e1e8defb6d18b1d425da8e8b32c5a163f2d10"
+istanbul-reports@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-1.1.4.tgz#5ccba5e22b7b5a5d91d5e0a830f89be334bf97bd"
  dependencies:
    handlebars "^4.0.3"

@ -6018,6 +6046,10 @@ iterall@1.1.3:
  version "1.1.3"
  resolved "https://registry.yarnpkg.com/iterall/-/iterall-1.1.3.tgz#1cbbff96204056dde6656e2ed2e2226d0e6d72c9"

+iterall@^1.1.3:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/iterall/-/iterall-1.1.4.tgz#0db40d38fdcf53ae14dc8ec674e62ab190d52cfc"
+
 javascript-stringify@^1.6.0:
  version "1.6.0"
  resolved "https://registry.yarnpkg.com/javascript-stringify/-/javascript-stringify-1.6.0.tgz#142d111f3a6e3dae8f4a9afd77d45855b5a9cce3"
@ -6790,7 +6822,7 @@ lodash.isfinite@^3.3.2:
  version "3.3.2"
  resolved "https://registry.yarnpkg.com/lodash.isfinite/-/lodash.isfinite-3.3.2.tgz#fb89b65a9a80281833f0b7478b3a5104f898ebb3"

-lodash.isfunction@^3.0.8:
+lodash.isfunction@^3.0.8, lodash.isfunction@^3.0.9:
  version "3.0.9"
  resolved "https://registry.yarnpkg.com/lodash.isfunction/-/lodash.isfunction-3.0.9.tgz#06de25df4db327ac931981d1bdb067e5af68d051"

@ -6944,9 +6976,9 @@ macaddress@^0.2.8:
  version "0.2.8"
  resolved "https://registry.yarnpkg.com/macaddress/-/macaddress-0.2.8.tgz#5904dc537c39ec6dbefeae902327135fa8511f12"

-magic-string@^0.14.0:
-  version "0.14.0"
-  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.14.0.tgz#57224aef1701caeed273b17a39a956e72b172462"
+magic-string@^0.22.4:
+  version "0.22.4"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.22.4.tgz#31039b4e40366395618c1d6cf8193c53917475ff"
  dependencies:
    vlq "^0.2.1"

@ -8415,9 +8447,9 @@ private@^0.1.6, private@^0.1.7, private@~0.1.5:
  version "0.1.8"
  resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"

-process-nextick-args@~1.0.6:
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-1.0.7.tgz#150e20b756590ad3f91093f25a4f2ad8bff30ba3"
+process-nextick-args@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.0.tgz#a37d732f4271b4ab1ad070d35508e8290788ffaa"

 process@^0.11.10:
  version "0.11.10"
@ -8443,7 +8475,7 @@ promise@^7.1.1:
  dependencies:
    asap "~2.0.3"

-prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.6, prop-types@^15.5.8, prop-types@^15.5.9, prop-types@^15.6.0:
+prop-types@^15.0.0, prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.6, prop-types@^15.5.8, prop-types@^15.5.9, prop-types@^15.6.0:
  version "15.6.0"
  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856"
  dependencies:
@ -8851,11 +8883,12 @@ react-redux@^5.0.6:
    prop-types "^15.5.10"

 react-responsive@^4.0.3:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/react-responsive/-/react-responsive-4.0.3.tgz#1dccb135d21329a5b1e3bdfaa4e96b157647b265"
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/react-responsive/-/react-responsive-4.0.4.tgz#dfeabcbbf180d6e7561562ad9d6d44769e74c43e"
  dependencies:
    hyphenate-style-name "^1.0.0"
    matchmediaquery "^0.2.1"
+    prop-types "^15.0.0"

 react-router-dom@^4.2.2:
  version "4.2.2"
@ -8932,11 +8965,11 @@ react-scripts@^1.1.0:
    fsevents "^1.1.3"

 react-styleguidist@^6.2.0:
-  version "6.2.3"
-  resolved "https://registry.yarnpkg.com/react-styleguidist/-/react-styleguidist-6.2.3.tgz#71b41eee57b9c75fddc6e877bcd30f9928c7d9c8"
+  version "6.2.4"
+  resolved "https://registry.yarnpkg.com/react-styleguidist/-/react-styleguidist-6.2.4.tgz#d864e3acdaf5a33517888529936ccb04f9a5c827"
  dependencies:
    ast-types "^0.10.1"
-    buble "0.16.0"
+    buble "^0.19.2"
    chalk "^2.3.0"
    classnames "^2.2.5"
    clean-webpack-plugin "^0.1.17"
@ -9078,13 +9111,13 @@ read-pkg@^3.0.0:
    path-type "^3.0.0"

 "readable-stream@1 || 2", readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.4, readable-stream@^2.0.6, readable-stream@^2.1.4, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.2.9, readable-stream@^2.3.3:
-  version "2.3.3"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.3.tgz#368f2512d79f9d46fdfc71349ae7878bbc1eb95c"
+  version "2.3.4"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.4.tgz#c946c3f47fa7d8eabc0b6150f4a12f69a4574071"
  dependencies:
    core-util-is "~1.0.0"
    inherits "~2.0.3"
    isarray "~1.0.0"
-    process-nextick-args "~1.0.6"
+    process-nextick-args "~2.0.0"
    safe-buffer "~5.1.1"
    string_decoder "~1.0.3"
    util-deprecate "~1.0.1"
@ -9794,11 +9827,11 @@ schema-utils@^0.3.0:
    ajv "^5.0.0"

 schema-utils@^0.4.2:
-  version "0.4.3"
-  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.4.3.tgz#e2a594d3395834d5e15da22b48be13517859458e"
+  version "0.4.5"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.4.5.tgz#21836f0608aac17b78f9e3e24daff14a5ca13a3e"
  dependencies:
-    ajv "^5.0.0"
-    ajv-keywords "^2.1.0"
+    ajv "^6.1.0"
+    ajv-keywords "^3.1.0"

 scroll-to-element@^2.0.0:
  version "2.0.0"
@ -10425,7 +10458,7 @@ styled-components-spacing@^2.1.3:
    react-create-component-from-tag-prop "^1.2.1"
    styled-components-breakpoint "^1.0.0-preview.3"

-styled-components@3.1.4, styled-components@^3.1.4:
+styled-components@3.1.4, styled-components@^3.1.4, styled-components@^3.1.6:
  version "3.1.4"
  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-3.1.4.tgz#1bdc1409c9bacafee3510c573d23b73039b0d875"
  dependencies:
@ -10468,7 +10501,7 @@ subtext@6.x.x:
    pez "4.x.x"
    wreck "14.x.x"

-supports-color@4.5.0, supports-color@^0.2.0, supports-color@^2.0.0, supports-color@^3.1.2, supports-color@^3.2.3, supports-color@^4.0.0, supports-color@^4.1.0, supports-color@^4.2.1, supports-color@^5.1.0:
+supports-color@4.5.0, supports-color@^0.2.0, supports-color@^2.0.0, supports-color@^3.1.2, supports-color@^3.2.3, supports-color@^4.0.0, supports-color@^4.1.0, supports-color@^4.2.1, supports-color@^5.1.0, supports-color@^5.2.0:
  version "4.5.0"
  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-4.5.0.tgz#be7a0de484dec5c5cddf8b3d59125044912f635b"
  dependencies:
@ -10625,8 +10658,8 @@ term-size@^1.2.0:
    execa "^0.7.0"

 test-exclude@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/test-exclude/-/test-exclude-4.1.1.tgz#4d84964b0966b0087ecc334a2ce002d3d9341e26"
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/test-exclude/-/test-exclude-4.2.0.tgz#07e3613609a362c74516a717515e13322ab45b3c"
  dependencies:
    arrify "^1.0.1"
    micromatch "^2.3.11"
@ -11115,8 +11148,8 @@ upper-case@^1.0.3, upper-case@^1.1.1:
  resolved "https://registry.yarnpkg.com/upper-case/-/upper-case-1.1.3.tgz#f6b4501c2ec4cdd26ba78be7222961de77621598"

 urijs@^1.16.1:
-  version "1.19.0"
-  resolved "https://registry.yarnpkg.com/urijs/-/urijs-1.19.0.tgz#d8aa284d0e7469703a6988ad045c4cbfdf08ada0"
+  version "1.19.1"
+  resolved "https://registry.yarnpkg.com/urijs/-/urijs-1.19.1.tgz#5b0ff530c0cbde8386f6342235ba5ca6e995d25a"

 urix@^0.1.0, urix@~0.1.0:
  version "0.1.0"
@ -11285,10 +11318,14 @@ vise@3.x.x:
  dependencies:
    hoek "5.x.x"

-vlq@^0.2.1, vlq@^0.2.2:
+vlq@^0.2.1:
  version "0.2.3"
  resolved "https://registry.yarnpkg.com/vlq/-/vlq-0.2.3.tgz#8f3e4328cf63b1540c0d67e1b2778386f8975b26"

+vlq@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/vlq/-/vlq-1.0.0.tgz#8101be90843422954c2b13eb27f2f3122bdcc806"
+
 vm-browserify@0.0.4:
  version "0.0.4"
  resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-0.0.4.tgz#5d7ea45bbef9e4a6ff65f95438e0a87c357d5a73"
@ -11498,13 +11535,13 @@ webpack@3.8.1:
    yargs "^8.0.2"

 webpack@^3.1.0, webpack@^3.10.0:
-  version "3.10.0"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-3.10.0.tgz#5291b875078cf2abf42bdd23afe3f8f96c17d725"
+  version "3.11.0"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-3.11.0.tgz#77da451b1d7b4b117adaf41a1a93b5742f24d894"
  dependencies:
    acorn "^5.0.0"
    acorn-dynamic-import "^2.0.0"
-    ajv "^5.1.5"
-    ajv-keywords "^2.0.0"
+    ajv "^6.1.0"
+    ajv-keywords "^3.1.0"
    async "^2.1.2"
    enhanced-resolve "^3.4.0"
    escope "^3.6.0"