add/update/delete servers

2026-01-08 09:32:51 +00:00 · 2017-10-29 12:57:26 -05:00
parent 5db4b138e0
commit 9806b8ebe6
16 changed files with 483 additions and 71 deletions
--- a/README.md
+++ b/README.md
@@ -8,10 +8,8 @@
 - `yarn run dev` - compile javascript
 - `yarn start` - start electron app

-## TODO
- Add modals for server editing
- Remove/edit servers in the list
- App icon
+## Prototype 4 10/29/2017 - Server Edit Modal
+![alt text](https://github.com/mgerb/ps-launcher/blob/master/docs/images/prototype4.png?raw=true "Prototype 4")

 ## Prototype 3 10/25/2017
 ![alt text](https://github.com/mgerb/ps-launcher/blob/master/docs/images/prototype3.png?raw=true "Prototype 3")
--- a/app/app.tsx
+++ b/app/app.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'mobx-react';
 import AppState from './state/AppState';
-import { Wrapper } from './Wrapper/Wrapper';
+import { Wrapper } from './components';
 import 'babel-polyfill';

 // base styling
--- a/app/components/Header/Header.tsx
+++ b/app/components/Header/Header.tsx
@@ -41,7 +41,6 @@ export class Header extends React.Component<Props, any> {
    return (
      <div className="header">
        <div className="header__version">
-          {/* <i className="fa fa-2x fa-github"/> */}
          <img src={headerIcon}/>
          <span style={{ fontSize: '10px' }}>v{VERSION}</span>
        </div>
--- a/app/components/Modal/Modal.scss
+++ b/app/components/Modal/Modal.scss
@@ -0,0 +1,50 @@
+@import '../../scss/variables';
+
+.CustomModal--hidden {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.CustomModal__base {
+  position: fixed;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  top: 0;
+  left: 0;
+  transition: opacity 0.2s ease-in-out;
+}
+
+.CustomModal__content {
+  height: 400px;
+  width: 400px;
+  background: $dark-blue--1;
+  border-radius: 4px;
+  z-index: 200;
+  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.2);
+  display: flex;
+  flex-direction: column;
+}
+
+.CustomModal__overlay {
+  position: fixed;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  left: 0;
+  z-index: 100;
+  background: $dark-blue;
+  opacity: 0.8;
+}
+
+.CustomModal__header {
+  height: 50px;
+  display: flex;
+  align-items: center;
+  padding-left: 20px;
+  background: $dark-blue--2;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+}
--- a/app/components/Modal/Modal.tsx
+++ b/app/components/Modal/Modal.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+
+import './Modal.scss';
+
+interface Props {
+  isOpen: boolean;
+  title: string;
+  onClose?(): any;
+}
+
+export class Modal extends React.Component<Props, any> {
+  constructor(props: Props) {
+    super(props);
+  }
+
+  public render(): any {
+    const { isOpen, onClose, title } = this.props;
+
+    const hiddenClass = !isOpen ? 'CustomModal--hidden' : '';
+
+    return (
+      <div className={'CustomModal__base ' + hiddenClass}>
+        <div className="CustomModal__content">
+          <div className="CustomModal__header">
+            <h3>{title}</h3>
+          </div>
+          {this.props.children}
+        </div>
+        <div className="CustomModal__overlay" onClick={onClose.bind(this)} />
+      </div>
+    );
+  }
+}
--- a/app/components/ServerList/ServerList.scss
+++ b/app/components/ServerList/ServerList.scss
@@ -4,7 +4,7 @@
  display: flex;
  flex-direction: column;
  background: $dark-blue;
-  min-width: 200px;
+  width: 250px;
  border-right: 1px solid $dark-blue--3;

  .server-list-heading {
@@ -12,15 +12,6 @@
    align-items: center;
    justify-content: space-between;
    padding: 10px;
-
-    .fa {
-      cursor: pointer;
-      color: $gray;
-
-      &:hover {
-        color: $gray--1;
-      }
-    }
  }

  .item-container {
@@ -31,20 +22,43 @@
  .list-item {
    cursor: pointer;
    height: 50px;
-    line-height: 50px;
    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
    background: $dark-blue;
    transition: all 0.2s linear;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
+    padding: 0 10px;

-    &:hover, &.selected {
+    .edit-button {
+      opacity: 0;
+    }
+
+    &:hover {
+      .edit-button {
+        opacity: 1;
+      }
+    }
+
+    &:hover,
+    &.selected {
      background: $dark-blue--1;
      color: lighten($white, 10%);
      border-left-color: $blue;
    }
  }

+  .edit-button {
+    cursor: pointer;
+    color: $gray;
+
+    &:hover {
+      color: $gray--1;
+    }
+  }
+
  .start-button-container {
    height: 100px;
    padding: 10px;
@@ -71,4 +85,25 @@
    }
  }

+  .modal-content {
+    display: flex;
+    flex-direction: column;
+    padding: 20px;
+    flex: 1;
+  }
+
+  .button-group {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .delete-button {
+    align-self: center;
+    color: $red;
+    cursor: pointer;
+
+    &:hover {
+      color: lighten($red, 5%);
+    }
+  }
 }
--- a/app/components/ServerList/ServerList.tsx
+++ b/app/components/ServerList/ServerList.tsx
@@ -2,8 +2,9 @@ import React from 'react';
 import fs from 'fs';
 import { exec } from 'child_process';
 import { inject, observer } from 'mobx-react';
-import { AppState } from '../../state/AppState';
+import { AppState, ServerType } from '../../state/AppState';
 import { toast } from '../../util';
+import { Modal } from '../Modal/Modal';

 import './ServerList.scss';

@@ -11,23 +12,34 @@ interface Props {
  AppState?: AppState;
 }

+interface State {
+  showModal: boolean;
+  editModal: boolean;
+  editServerIndex: number;
+  modalTitle: string;
+  modalServerName: string;
+  modalRealmList: string;
+  modalWebsiteURL: string;
+}
+
@inject('AppState')
@observer
-export class ServerList extends React.Component<Props, any> {
+export class ServerList extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props);
+    this.state = this.defaultState;
  }

-  private renderItems(): any {
-    const { AppState } = this.props;
-    return this.props.AppState.selectedExpansion.servers.map((server, index) => {
-      const selected = AppState.selectedExpansion.selectedServerIndex === index ? ' selected' : '';
-      return (
-        <div key={index} className={'list-item' + selected} onClick={() => AppState.setSelectedServerIndex(index)}>
-          {server.name}
-        </div>
-      );
-    });
+  private get defaultState(): State {
+    return {
+      showModal: false,
+      editModal: false,
+      editServerIndex: undefined,
+      modalTitle: '',
+      modalServerName: '',
+      modalRealmList: '',
+      modalWebsiteURL: '',
+    };
  }

  private async play(): Promise<void> {
@@ -72,14 +84,143 @@ export class ServerList extends React.Component<Props, any> {
    });
  }

+  private modalOnCancel(): void {
+    this.setState(this.defaultState);
+  }
+
+  private modalOnDelete(): void {
+    if (confirm('Are you sure you want to delete this server?')) {
+      this.props.AppState.deleteServer(this.state.editServerIndex);
+      this.setState(this.defaultState);
+    }
+  }
+
+  private modalOnSave(): void {
+    const { modalServerName, modalRealmList, modalWebsiteURL } = this.state;
+
+    if (modalServerName === '' || modalRealmList === '' || modalWebsiteURL === '') {
+      toast.error('All fields are required');
+      return;
+    }
+
+    const newServer: ServerType = {
+      name: modalServerName,
+      realmlist: modalRealmList,
+      website: modalWebsiteURL,
+    };
+
+    // edit server
+    if (this.state.editModal) {
+      this.props.AppState.editServer(this.state.editServerIndex, newServer);
+      toast.success('Saved');
+      this.setState(this.defaultState);
+    } else { // else add new server
+      if (!this.props.AppState.addServer(newServer)) {
+        toast.error('Server already exists');
+      } else {
+        toast.success('Saved');
+        this.setState(this.defaultState);
+      }
+    }
+  }
+
+  private addServerClick(): void {
+    this.setState({
+      showModal: true,
+      editModal: false,
+      modalTitle: 'New Server',
+    });
+  }
+
+  private editServerClick(serverIndex: number): void {
+    const server = this.props.AppState.selectedExpansion.servers[serverIndex];
+    this.setState({
+      showModal: true,
+      editModal: true,
+      editServerIndex: serverIndex,
+      modalTitle: server.name,
+      modalServerName: server.name,
+      modalRealmList: server.realmlist,
+      modalWebsiteURL: server.website,
+    });
+  }
+
+  private renderItems(): any {
+    const { AppState } = this.props;
+    return this.props.AppState.selectedExpansion.servers.map((server, index) => {
+      const selected = AppState.selectedExpansion.selectedServerIndex === index ? ' selected' : '';
+      return (
+        <div key={index} className={'list-item' + selected} onClick={() => AppState.setSelectedServerIndex(index, true)}>
+          <div className="ellipsis" title={server.name}>{server.name}</div>
+          <i className="fa fa-pencil-square-o edit-button" title="Edit" onClick={() => this.editServerClick(index)}/>
+        </div>
+      );
+    });
+  }
+
+  private renderModal(): any {
+    const { showModal, editModal, modalTitle, modalServerName, modalRealmList, modalWebsiteURL } = this.state;
+
+    return (
+      <Modal isOpen={showModal} onClose={this.modalOnCancel.bind(this)} title={modalTitle}>
+        <div className="modal-content">
+          <div style={{ flex: 1 }}>
+            <div className="form-group">
+              <label className="form-group__label">Server Name</label>
+              <input
+                className="input"
+                placeholder="Name"
+                value={modalServerName}
+                onChange={e => this.setState({ modalServerName: e.target.value })}
+              />
+            </div>
+            <div className="form-group">
+              <label className="form-group__label">Realm List</label>
+              <input
+                className="input"
+                placeholder="logon.server.com"
+                value={modalRealmList}
+                onChange={e => this.setState({ modalRealmList: e.target.value })}
+              />
+            </div>
+            <div className="form-group">
+              <label className="form-group__label">Website URL</label>
+              <input
+                className="input"
+                placeholder="https://www.server.com"
+                value={modalWebsiteURL}
+                onChange={e => this.setState({ modalWebsiteURL: e.target.value })}
+              />
+            </div>
+          </div>
+
+          <div className="button-group">
+            <div style={{ display: 'flex' }}>
+              {editModal && <i className="fa fa-trash fa-lg delete-button" onClick={() => this.modalOnDelete()}/>}
+            </div>
+            <div>
+              <button className="button" onClick={this.modalOnCancel.bind(this)}>
+                Cancel
+              </button>
+              <button className="button button--success" onClick={this.modalOnSave.bind(this)}>
+                Save
+              </button>
+            </div>
+          </div>
+        </div>
+      </Modal>
+    );
+  }
+
  public render(): any {
    const { selectedServer } = this.props.AppState;

    return (
      <div className="server-list">
+        {this.renderModal()}
        <div className="server-list-heading">
          <div>Servers</div>
-          <i className="fa fa-plus" />
+          <i className="fa fa-plus edit-button" onClick={this.addServerClick.bind(this)} />
        </div>
        <div className="item-container">{this.renderItems()}</div>
        <div className="start-button-container">
--- a/app/components/Wrapper/Wrapper.scss
+++ b/app/components/Wrapper/Wrapper.scss
@@ -1,4 +1,4 @@
-@import '../scss/variables.scss';
+@import '../../scss/variables.scss';

 .wrapper {
  display: flex;
--- a/app/components/Wrapper/Wrapper.tsx
+++ b/app/components/Wrapper/Wrapper.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { inject, observer } from 'mobx-react';
-import { AppState } from '../state/AppState';
-import { Content, Header, ServerList, SubHeader } from '../components';
+import { AppState } from '../../state/AppState';
+import { Content, Header, ServerList, SubHeader } from '../';

 import './Wrapper.scss';

--- a/app/components/index.ts
+++ b/app/components/index.ts
@@ -2,3 +2,4 @@ export * from './Content/Content';
 export * from './Header/Header';
 export * from './ServerList/ServerList';
 export * from './SubHeader/SubHeader';
+export * from './Wrapper/Wrapper';
--- a/app/scss/style.scss
+++ b/app/scss/style.scss
@@ -31,22 +31,82 @@ a {
  }
 }

-::-webkit-scrollbar-track
-{
-	border-radius: 10px;
+.error {
+  color: $red;
+}
+
+.ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.input {
+  padding: 10px;
+  border: 0;
+  border-radius: 4px;
+  background: $dark-blue;
+  width: 100%;
+  color: $white;
+  border: 1px solid darken($dark-blue, 5%);
+
+  &::-webkit-input-placeholder {
+    color: $dark-blue--3;
+  }
+}
+
+.form-group {
+  & + & {
+    margin-top: 20px;
+  }
+}
+
+.form-group__label {
+  font-size: 12px;
+  line-height: 20px;
+  color: $gray;
+  padding-left: 5px;
+}
+
+.button {
+  border: 0;
+  padding: 10px;
+  border-radius: 4px;
+  background: darken($gray, 5%);
+  transition: all 0.2s linear;
+  color: $white;
+  cursor: pointer;
+
+  &:hover {
+    background: $gray;
+  }
+
+  & + & {
+    margin-left: 5px;
+  }
+}
+
+.button--success {
+  background: $blue;
+
+  &:hover {
+    background: $blue--lighter;
+  }
+}
+
+::-webkit-scrollbar-track {
+  border-radius: 10px;
  background-color: none;
 }

-::-webkit-scrollbar
-{
-	width: 5px;
-	height: 5px;
-	background-color: none;
-	border-radius: 10px;
+::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+  background-color: none;
+  border-radius: 10px;
 }

-::-webkit-scrollbar-thumb
-{
-	border-radius: 10px;
-	background-color: darken($dark-blue, 5%);
+::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  background-color: darken($dark-blue, 5%);
 }
--- a/app/state/AppState.ts
+++ b/app/state/AppState.ts
@@ -48,10 +48,18 @@ export class AppState {
    return this.selectedExpansion.servers[index];
  }

+
+  /**
+   * @param {number} index 
+   * @param {boolean} [persist=true] flag whether to persist after setting server index
+   * @memberof AppState
+   */
  @action
-  public setSelectedServerIndex(index: number): void {
+  public setSelectedServerIndex(index: number, persist: boolean = false): void {
    this.selectedExpansion.selectedServerIndex = index;
-    this.persistState();
+    if (persist) {
+      this.persistState();
+    }
  }

  @action
@@ -66,6 +74,50 @@ export class AppState {
    this.persistState();
  }

+  /**
+   * @param {ServerType} server 
+   * @returns {boolean} returns whether or not the server was added to the list
+   * @memberof AppState
+   */
+  @action
+  public addServer(server: ServerType): boolean {
+
+    // check if server already exists
+    if (_.some(this.selectedExpansion.servers, s => s.name === server.name)) {
+      return false;
+    }
+
+    // push server into list
+    const index = this.selectedExpansion.servers.push(server) - 1;
+
+    // setting selected server index persists state
+    this.setSelectedServerIndex(index);
+    this.persistState();
+    return true;
+  }
+
+  @action
+  public deleteServer(serverIndex: number): void {
+    if (this.selectedExpansion.selectedServerIndex === serverIndex) {
+      this.setSelectedServerIndex(0);
+    }
+
+    // remove server from list
+    this.selectedExpansion.servers.splice(serverIndex, 1);
+    this.persistState();
+  }
+
+  /**
+   * edit server info and persist state
+   * @param {number} serverIndex index of server in array
+   * @memberof AppState
+   */
+  @action
+  public editServer(serverIndex: number, newServer: ServerType): void {
+    this.selectedExpansion.servers[serverIndex] = newServer;
+    this.persistState();
+  }
+
  // bootstrap application
  // creates directory and persistent store in appData
  @action
--- a/app/state/persistent-state-seed.ts
+++ b/app/state/persistent-state-seed.ts
@@ -11,7 +11,7 @@ export const persistentStateSeed = (): any => {
        },
        {
          name: 'Elysium',
-          realmlist: '',
+          realmlist: 'logon.elysium-project.org',
          website: 'https://www.elysium-project.org',
        },
        {
--- a/docs/images/prototype4.png
+++ b/docs/images/prototype4.png
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
    "babel-loader": "^7.1.2",
    "babel-plugin-add-module-exports": "^0.2.1",
    "babel-polyfill": "^6.26.0",
+    "babel-preset-env": "^1.6.1",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "babel-preset-stage-0": "^6.16.0",
@@ -56,6 +57,7 @@
    "@types/lodash": "^4.14.77",
    "@types/react": "^16.0.10",
    "@types/react-dom": "^16.0.1",
+    "@types/react-modal": "^2.2.2",
    "@types/react-router-dom": "^4.0.2",
    "@types/toastr": "^2.1.35",
    "autoprefixer": "^7.1.5",
--- a/yarn.lock
+++ b/yarn.lock
@@ -59,6 +59,12 @@
    "@types/node" "*"
    "@types/react" "*"

+"@types/react-modal@^2.2.2":
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/@types/react-modal/-/react-modal-2.2.2.tgz#651157522ba45c1ffd8831a2e7bbd8094390a925"
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-router-dom@^4.0.2":
  version "4.0.8"
  resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-4.0.8.tgz#a9731bf35d053cdd27053baacc19e505d74514f3"
@@ -654,7 +660,7 @@ babel-plugin-transform-async-generator-functions@^6.24.1:
    babel-plugin-syntax-async-generators "^6.5.0"
    babel-runtime "^6.22.0"

-babel-plugin-transform-async-to-generator@^6.24.1:
+babel-plugin-transform-async-to-generator@^6.22.0, babel-plugin-transform-async-to-generator@^6.24.1:
  version "6.24.1"
  resolved "https://registry.yarnpkg.com/babel-plugin-transform-async-to-generator/-/babel-plugin-transform-async-to-generator-6.24.1.tgz#6536e378aff6cb1d5517ac0e40eb3e9fc8d08761"
  dependencies:
@@ -708,7 +714,7 @@ babel-plugin-transform-es2015-block-scoped-functions@^6.22.0:
  dependencies:
    babel-runtime "^6.22.0"

-babel-plugin-transform-es2015-block-scoping@^6.24.1:
+babel-plugin-transform-es2015-block-scoping@^6.23.0, babel-plugin-transform-es2015-block-scoping@^6.24.1:
  version "6.26.0"
  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-block-scoping/-/babel-plugin-transform-es2015-block-scoping-6.26.0.tgz#d70f5299c1308d05c12f463813b0a09e73b1895f"
  dependencies:
@@ -718,7 +724,7 @@ babel-plugin-transform-es2015-block-scoping@^6.24.1:
    babel-types "^6.26.0"
    lodash "^4.17.4"

-babel-plugin-transform-es2015-classes@^6.24.1:
+babel-plugin-transform-es2015-classes@^6.23.0, babel-plugin-transform-es2015-classes@^6.24.1:
  version "6.24.1"
  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-classes/-/babel-plugin-transform-es2015-classes-6.24.1.tgz#5a4c58a50c9c9461e564b4b2a3bfabc97a2584db"
  dependencies:
@@ -732,33 +738,33 @@ babel-plugin-transform-es2015-classes@^6.24.1:
    babel-traverse "^6.24.1"
    babel-types "^6.24.1"

-babel-plugin-transform-es2015-computed-properties@^6.24.1:
+babel-plugin-transform-es2015-computed-properties@^6.22.0, babel-plugin-transform-es2015-computed-properties@^6.24.1:
  version "6.24.1"
  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-computed-properties/-/babel-plugin-transform-es2015-computed-properties-6.24.1.tgz#6fe2a8d16895d5634f4cd999b6d3480a308159b3"
  dependencies:
    babel-runtime "^6.22.0"
    babel-template "^6.24.1"

-babel-plugin-transform-es2015-destructuring@^6.22.0:
+babel-plugin-transform-es2015-destructuring@^6.22.0, babel-plugin-transform-es2015-destructuring@^6.23.0:
  version "6.23.0"
  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-destructuring/-/babel-plugin-transform-es2015-destructuring-6.23.0.tgz#997bb1f1ab967f682d2b0876fe358d60e765c56d"
  dependencies:
    babel-runtime "^6.22.0"

-babel-plugin-transform-es2015-duplicate-keys@^6.24.1:
+babel-plugin-transform-es2015-duplicate-keys@^6.22.0, babel-plugin-transform-es2015-duplicate-keys@^6.24.1:
  version "6.24.1"
  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-duplicate-keys/-/babel-plugin-transform-es2015-duplicate-keys-6.24.1.tgz#73eb3d310ca969e3ef9ec91c53741a6f1576423e"
  dependencies:
    babel-runtime "^6.22.0"
    babel-types "^6.24.1"

-babel-plugin-transform-es2015-for-of@^6.22.0:
+babel-plugin-transform-es2015-for-of@^6.22.0, babel-plugin-transform-es2015-for-of@^6.23.0:
  version "6.23.0"
  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-for-of/-/babel-plugin-transform-es2015-for-of-6.23.0.tgz#f47c95b2b613df1d3ecc2fdb7573623c75248691"
  dependencies:
    babel-runtime "^6.22.0"

-babel-plugin-transform-es2015-function-name@^6.24.1:
+babel-plugin-transform-es2015-function-name@^6.22.0, babel-plugin-transform-es2015-function-name@^6.24.1:
  version "6.24.1"
  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-function-name/-/babel-plugin-transform-es2015-function-name-6.24.1.tgz#834c89853bc36b1af0f3a4c5dbaa94fd8eacaa8b"
  dependencies:
@@ -772,7 +778,7 @@ babel-plugin-transform-es2015-literals@^6.22.0:
  dependencies:
    babel-runtime "^6.22.0"

-babel-plugin-transform-es2015-modules-amd@^6.24.1:
+babel-plugin-transform-es2015-modules-amd@^6.22.0, babel-plugin-transform-es2015-modules-amd@^6.24.1:
  version "6.24.1"
  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-amd/-/babel-plugin-transform-es2015-modules-amd-6.24.1.tgz#3b3e54017239842d6d19c3011c4bd2f00a00d154"
  dependencies:
@@ -780,7 +786,7 @@ babel-plugin-transform-es2015-modules-amd@^6.24.1:
    babel-runtime "^6.22.0"
    babel-template "^6.24.1"

-babel-plugin-transform-es2015-modules-commonjs@^6.24.1:
+babel-plugin-transform-es2015-modules-commonjs@^6.23.0, babel-plugin-transform-es2015-modules-commonjs@^6.24.1:
  version "6.26.0"
  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-commonjs/-/babel-plugin-transform-es2015-modules-commonjs-6.26.0.tgz#0d8394029b7dc6abe1a97ef181e00758dd2e5d8a"
  dependencies:
@@ -789,7 +795,7 @@ babel-plugin-transform-es2015-modules-commonjs@^6.24.1:
    babel-template "^6.26.0"
    babel-types "^6.26.0"

-babel-plugin-transform-es2015-modules-systemjs@^6.24.1:
+babel-plugin-transform-es2015-modules-systemjs@^6.23.0, babel-plugin-transform-es2015-modules-systemjs@^6.24.1:
  version "6.24.1"
  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-systemjs/-/babel-plugin-transform-es2015-modules-systemjs-6.24.1.tgz#ff89a142b9119a906195f5f106ecf305d9407d23"
  dependencies:
@@ -797,7 +803,7 @@ babel-plugin-transform-es2015-modules-systemjs@^6.24.1:
    babel-runtime "^6.22.0"
    babel-template "^6.24.1"

-babel-plugin-transform-es2015-modules-umd@^6.24.1:
+babel-plugin-transform-es2015-modules-umd@^6.23.0, babel-plugin-transform-es2015-modules-umd@^6.24.1:
  version "6.24.1"
  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-umd/-/babel-plugin-transform-es2015-modules-umd-6.24.1.tgz#ac997e6285cd18ed6176adb607d602344ad38468"
  dependencies:
@@ -805,14 +811,14 @@ babel-plugin-transform-es2015-modules-umd@^6.24.1:
    babel-runtime "^6.22.0"
    babel-template "^6.24.1"

-babel-plugin-transform-es2015-object-super@^6.24.1:
+babel-plugin-transform-es2015-object-super@^6.22.0, babel-plugin-transform-es2015-object-super@^6.24.1:
  version "6.24.1"
  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-object-super/-/babel-plugin-transform-es2015-object-super-6.24.1.tgz#24cef69ae21cb83a7f8603dad021f572eb278f8d"
  dependencies:
    babel-helper-replace-supers "^6.24.1"
    babel-runtime "^6.22.0"

-babel-plugin-transform-es2015-parameters@^6.24.1:
+babel-plugin-transform-es2015-parameters@^6.23.0, babel-plugin-transform-es2015-parameters@^6.24.1:
  version "6.24.1"
  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-parameters/-/babel-plugin-transform-es2015-parameters-6.24.1.tgz#57ac351ab49caf14a97cd13b09f66fdf0a625f2b"
  dependencies:
@@ -823,7 +829,7 @@ babel-plugin-transform-es2015-parameters@^6.24.1:
    babel-traverse "^6.24.1"
    babel-types "^6.24.1"

-babel-plugin-transform-es2015-shorthand-properties@^6.24.1:
+babel-plugin-transform-es2015-shorthand-properties@^6.22.0, babel-plugin-transform-es2015-shorthand-properties@^6.24.1:
  version "6.24.1"
  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-shorthand-properties/-/babel-plugin-transform-es2015-shorthand-properties-6.24.1.tgz#24f875d6721c87661bbd99a4622e51f14de38aa0"
  dependencies:
@@ -836,7 +842,7 @@ babel-plugin-transform-es2015-spread@^6.22.0:
  dependencies:
    babel-runtime "^6.22.0"

-babel-plugin-transform-es2015-sticky-regex@^6.24.1:
+babel-plugin-transform-es2015-sticky-regex@^6.22.0, babel-plugin-transform-es2015-sticky-regex@^6.24.1:
  version "6.24.1"
  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-sticky-regex/-/babel-plugin-transform-es2015-sticky-regex-6.24.1.tgz#00c1cdb1aca71112cdf0cf6126c2ed6b457ccdbc"
  dependencies:
@@ -850,13 +856,13 @@ babel-plugin-transform-es2015-template-literals@^6.22.0:
  dependencies:
    babel-runtime "^6.22.0"

-babel-plugin-transform-es2015-typeof-symbol@^6.22.0:
+babel-plugin-transform-es2015-typeof-symbol@^6.22.0, babel-plugin-transform-es2015-typeof-symbol@^6.23.0:
  version "6.23.0"
  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-typeof-symbol/-/babel-plugin-transform-es2015-typeof-symbol-6.23.0.tgz#dec09f1cddff94b52ac73d505c84df59dcceb372"
  dependencies:
    babel-runtime "^6.22.0"

-babel-plugin-transform-es2015-unicode-regex@^6.24.1:
+babel-plugin-transform-es2015-unicode-regex@^6.22.0, babel-plugin-transform-es2015-unicode-regex@^6.24.1:
  version "6.24.1"
  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-unicode-regex/-/babel-plugin-transform-es2015-unicode-regex-6.24.1.tgz#d38b12f42ea7323f729387f18a7c5ae1faeb35e9"
  dependencies:
@@ -864,7 +870,7 @@ babel-plugin-transform-es2015-unicode-regex@^6.24.1:
    babel-runtime "^6.22.0"
    regexpu-core "^2.0.0"

-babel-plugin-transform-exponentiation-operator@^6.24.1:
+babel-plugin-transform-exponentiation-operator@^6.22.0, babel-plugin-transform-exponentiation-operator@^6.24.1:
  version "6.24.1"
  resolved "https://registry.yarnpkg.com/babel-plugin-transform-exponentiation-operator/-/babel-plugin-transform-exponentiation-operator-6.24.1.tgz#2ab0c9c7f3098fa48907772bb813fe41e8de3a0e"
  dependencies:
@@ -928,7 +934,7 @@ babel-plugin-transform-react-jsx@^6.24.1:
    babel-plugin-syntax-jsx "^6.8.0"
    babel-runtime "^6.22.0"

-babel-plugin-transform-regenerator@^6.24.1:
+babel-plugin-transform-regenerator@^6.22.0, babel-plugin-transform-regenerator@^6.24.1:
  version "6.26.0"
  resolved "https://registry.yarnpkg.com/babel-plugin-transform-regenerator/-/babel-plugin-transform-regenerator-6.26.0.tgz#e0703696fbde27f0a3efcacf8b4dca2f7b3a8f2f"
  dependencies:
@@ -949,6 +955,41 @@ babel-polyfill@^6.26.0:
    core-js "^2.5.0"
    regenerator-runtime "^0.10.5"

+babel-preset-env@^1.6.1:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/babel-preset-env/-/babel-preset-env-1.6.1.tgz#a18b564cc9b9afdf4aae57ae3c1b0d99188e6f48"
+  dependencies:
+    babel-plugin-check-es2015-constants "^6.22.0"
+    babel-plugin-syntax-trailing-function-commas "^6.22.0"
+    babel-plugin-transform-async-to-generator "^6.22.0"
+    babel-plugin-transform-es2015-arrow-functions "^6.22.0"
+    babel-plugin-transform-es2015-block-scoped-functions "^6.22.0"
+    babel-plugin-transform-es2015-block-scoping "^6.23.0"
+    babel-plugin-transform-es2015-classes "^6.23.0"
+    babel-plugin-transform-es2015-computed-properties "^6.22.0"
+    babel-plugin-transform-es2015-destructuring "^6.23.0"
+    babel-plugin-transform-es2015-duplicate-keys "^6.22.0"
+    babel-plugin-transform-es2015-for-of "^6.23.0"
+    babel-plugin-transform-es2015-function-name "^6.22.0"
+    babel-plugin-transform-es2015-literals "^6.22.0"
+    babel-plugin-transform-es2015-modules-amd "^6.22.0"
+    babel-plugin-transform-es2015-modules-commonjs "^6.23.0"
+    babel-plugin-transform-es2015-modules-systemjs "^6.23.0"
+    babel-plugin-transform-es2015-modules-umd "^6.23.0"
+    babel-plugin-transform-es2015-object-super "^6.22.0"
+    babel-plugin-transform-es2015-parameters "^6.23.0"
+    babel-plugin-transform-es2015-shorthand-properties "^6.22.0"
+    babel-plugin-transform-es2015-spread "^6.22.0"
+    babel-plugin-transform-es2015-sticky-regex "^6.22.0"
+    babel-plugin-transform-es2015-template-literals "^6.22.0"
+    babel-plugin-transform-es2015-typeof-symbol "^6.23.0"
+    babel-plugin-transform-es2015-unicode-regex "^6.22.0"
+    babel-plugin-transform-exponentiation-operator "^6.22.0"
+    babel-plugin-transform-regenerator "^6.22.0"
+    browserslist "^2.1.2"
+    invariant "^2.2.2"
+    semver "^5.3.0"
+
 babel-preset-es2015@^6.18.0:
  version "6.24.1"
  resolved "https://registry.yarnpkg.com/babel-preset-es2015/-/babel-preset-es2015-6.24.1.tgz#d44050d6bc2c9feea702aaf38d727a0210538939"
@@ -1303,7 +1344,7 @@ browserslist@^1.3.6, browserslist@^1.5.2, browserslist@^1.7.6:
    caniuse-db "^1.0.30000639"
    electron-to-chromium "^1.2.7"

-browserslist@^2.5.0:
+browserslist@^2.1.2, browserslist@^2.5.0:
  version "2.5.1"
  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-2.5.1.tgz#68e4bc536bbcc6086d62843a2ffccea8396821c6"
  dependencies: