docs(ui-toolkit): Add demos to all toolkit components

fixes #810

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

@@ -5,6 +5,9 @@ import remcalc from 'remcalc';
 
 import View from '../layout/view-container';
 
+/**
+ * @example ./usage.md
+ */
 export default ({ children, ...rest }) => (
   <div {...rest}>
     <View>

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

@@ -5,6 +5,7 @@ import remcalc from 'remcalc';
 
 import typography from '../typography';
 import { H2 } from '../text/headings';
+import Chevron from '../icons/chevron';
 
 const LinkChild = styled(Link)`
   text-decoration: none;
@@ -20,21 +21,15 @@ const Name = H2.extend`
 
   color: ${props => props.theme.primary};
   margin: ${remcalc(20)} 0 ${remcalc(18)} 0;
-  display: inline-block;
 `;
 
-const Arrow = styled.div`
+const Arrow = styled(Chevron)`
-  border: solid ${props => props.theme.text};
+  margin: ${remcalc(7)} ${remcalc(10)} ${remcalc(3)} ${remcalc(10)};
-  border-width: 0 ${remcalc(2)} ${remcalc(2)} 0;
-  display: inline-block;
-  padding: ${remcalc(2)};
-  transform: rotate(-45deg);
-  margin: ${remcalc(3)} ${remcalc(10)} ${remcalc(3)} ${remcalc(10)};
 `;
 
 const Container = styled.div`
-  /* trick prettier */
+  display: inline-flex;
-  display: inline-block;
+  align-items: center;
 `;
 
 export default ({ to, children, ...rest }) => {

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

@@ -1,11 +1,11 @@
 ```
 const Breadcrumb = require('./index.js').default;
-const Item = require('./item.js').default;
+const BreadcrumbItem = require('./item.js').default;
 
 <Breadcrumb>
-  <Item>Home</Item>
+  <BreadcrumbItem>Home</BreadcrumbItem>
-  <Item>Warp Records Blog</Item>
+  <BreadcrumbItem>Warp Records Blog</BreadcrumbItem>
-  <Item>Services</Item>
+  <BreadcrumbItem>Services</BreadcrumbItem>
-  <Item>Nginx</Item>
+  <BreadcrumbItem>Nginx</BreadcrumbItem>
 </Breadcrumb>
 ```

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

@@ -220,17 +220,32 @@ Button.propTypes = {
    */
   children: PropTypes.node,
   /**
-   * When used, it will render an `<a>` with the givern href
+   * When used, it will render an `<a>` with the given href
    */
   href: PropTypes.string,
   /**
-   * When used, it will render a `<Link>` with the givern to
+   * When used, it will render a `<Link>` with the given to
    */
   to: PropTypes.string,
+  /**
+   * Is it primary ?
+   */
   primary: PropTypes.bool,
+  /**
+   * Is it secondary ?
+   */
   secondary: PropTypes.bool,
+  /**
+   * Is it tertiary ?
+   */
   tertiary: PropTypes.bool,
+  /**
+   * When set to true a smaller version of the button will show
+   */
   small: PropTypes.bool,
+  /**
+   * Set to true to show loading animation
+   */
   loading: PropTypes.bool,
   /**
    * When used, will give button an active state (Only for tertiary for now)
@@ -239,7 +254,12 @@ Button.propTypes = {
 };
 
 Button.defaultProps = {
-  primary: true
+  primary: true,
+  secondary: false,
+  tertiary: false,
+  small: false,
+  loading: false,
+  selected: false,
 };
 
 export default Baseline(Button);

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

@@ -1,6 +1,6 @@
 import { Broadcast, Subscriber } from 'joy-react-broadcast';
 import Baseline from '../baseline';
-import paperEffect from '../paper-effect';
+import paperEffect from './paper-effect';
 import { bottomShadow, bottomShadowDarker } from '../boxes';
 import remcalc from 'remcalc';
 import is, { isNot } from 'styled-is';
@@ -122,12 +122,43 @@ const Card = ({
 };
 
 Card.propTypes = {
+  /**
+   * Contents of the Card
+   */
   children: PropTypes.node,
+  /**
+   * Is it collapsed ?
+   */
   collapsed: PropTypes.bool,
+  /**
+   * Does it have a header
+   */
   headed: PropTypes.bool,
+  /**
+   * Setting this to true will remove the box shadow
+   */
   flat: PropTypes.bool,
+  /**
+   * If set to true a paper effect will be added
+   */
   stacked: PropTypes.bool,
-  transparent: PropTypes.bool
+  /**
+   * Transparent will set the card as secondary
+   */
+  transparent: PropTypes.bool,
+  /**
+   * When set to false or using disabled you will see the disabled card
+   */
+  active: PropTypes.bool
+};
+
+Card.defaultProps = {
+  collapsed: false,
+  headed: false,
+  flat: false,
+  stacked: false,
+  transparent: false,
+  active: true
 };
 
 export default Baseline(Card);

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

@@ -20,6 +20,11 @@ const StyledCard = Card.extend`
     background-color: ${props => props.theme.disabled};
     border-color: ${props => props.theme.grey};
   `};
+
+  button {
+    margin-bottom: 0;
+    margin-top: 0;
+  }
 `;
 
 const Header = ({ children, ...rest }) => {

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

@@ -13,14 +13,19 @@ const StyledNav = Nav.extend`
   border-left: ${remcalc(1)} solid ${props => props.theme.grey};
   box-sizing: border-box;
 
-  ${isOr('disabled', 'active')`
+  button {
-    border-left-color: ${props => props.theme.grey};
+    margin-bottom: 0;
-  `};
+    margin-top: 0;
+  }
 
   ${is('fromHeader') &&
     isNot('disabled')`
     border-left-color: ${props => props.theme.primary};
   `};
+
+  ${isOr('disabled', 'active')`
+    border-left-color: ${props => props.theme.grey};
+  `};
 `;
 
 const StyledButton = Button.extend`

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

@@ -126,73 +126,6 @@ const { InstancesIconLight, HealthyIcon } = require('../icons');
 </Card>;
 ```
 
-#### Card > Metrics
-
-```jsx
-const {
-  CardDescription,
-  CardHeader,
-  CardMeta,
-  CardOptions,
-  CardOutlet,
-  CardSubTitle,
-  CardTitle,
-  CardView,
-  CardInfo,
-  CardInfoLabel,
-  CardInfoIconContainer
-} = require('./');
-
-const { MetricGraph, GraphContainer, GraphTitle } = require('../metrics');
-const { Row } = require('react-styled-flexboxgrid');
-const metrics = require('./metrics.json');
-const { InstancesIconLight, HealthyIcon } = require('../icons');
-
-<Card headed>
-  <CardHeader>
-    <CardMeta>
-      <CardTitle>Nginx</CardTitle>
-      <CardDescription>
-        <CardInfo>
-          <CardInfoIconContainer>
-            <InstancesIconLight />
-          </CardInfoIconContainer>
-          <CardInfoLabel left light>4 of 4 instances</CardInfoLabel>
-        </CardInfo>
-      </CardDescription>
-    </CardMeta>
-    <CardOptions />
-  </CardHeader>
-  <CardView>
-    <CardDescription>
-      <span>Scaling from 1 to 4: finished</span>
-      <CardInfo>
-        <CardInfoIconContainer>
-          <HealthyIcon />
-        </CardInfoIconContainer>
-        <CardInfoLabel left>Healthy</CardInfoLabel>
-      </CardInfo>
-    </CardDescription>
-    <CardDescription>
-      <Row>
-        <GraphContainer xs={4}>
-          <GraphTitle>Memory usage</GraphTitle>
-          <MetricGraph metricsData={metrics} graphDurationSeconds={90} />
-        </GraphContainer>
-        <GraphContainer xs={4}>
-          <GraphTitle>CPU usage</GraphTitle>
-          <MetricGraph metricsData={metrics} graphDurationSeconds={90} />
-        </GraphContainer>
-        <GraphContainer xs={4}>
-          <GraphTitle>CPU wait time</GraphTitle>
-          <MetricGraph metricsData={metrics} graphDurationSeconds={90} />
-        </GraphContainer>
-      </Row>
-    </CardDescription>
-  </CardView>
-</Card>;
-```
-
 #### Card > Provisioning
 
 ```jsx
@@ -241,7 +174,6 @@ const {
   CardInfoIconContainer
 } = require('./');
 
-const { MetricGraph, GraphContainer, GraphTitle } = require('../metrics');
 const StatusLoader = require('../status-loader').default;
 const { InstancesIconLight, HealthyIcon } = require('../icons');
 
@@ -262,7 +194,7 @@ const { InstancesIconLight, HealthyIcon } = require('../icons');
   </CardHeader>
   <CardView>
     <CardDescription>
-      <StatusLoader row msg="Provisioning 3 instances" />
+      <StatusLoader  inline row msg="Provisioning 3 instances" />
       <br />
       <br />
       <br />
@@ -333,9 +265,7 @@ const {
   CardInfoIconContainer
 } = require('./');
 
-const { MetricGraph, GraphContainer, GraphTitle } = require('../metrics');
 const { Row } = require('react-styled-flexboxgrid');
-const metrics = require('./metrics.json');
 const { InstancesIconLight, HealthyIcon } = require('../icons');
 
 <Card>
@@ -366,7 +296,6 @@ const {
   CardInfoIconContainer
 } = require('./');
 
-const { MetricGraph, GraphContainer, GraphTitle } = require('../metrics');
 const { Row } = require('react-styled-flexboxgrid');
 const { InstancesIconLight, HealthyIcon } = require('../icons');
 
@@ -399,7 +328,6 @@ const {
   CardInfoIconContainer
 } = require('./');
 
-const { MetricGraph, GraphContainer, GraphTitle } = require('../metrics');
 const { Row } = require('react-styled-flexboxgrid');
 const { InstancesIconLight, HealthyIcon } = require('../icons');
 

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

@@ -1,5 +1,6 @@
 import styled from 'styled-components';
 import React from 'react';
+import PropTypes from 'prop-types';
 
 import typography from '../typography';
 import BaseInput from './base/input';
@@ -25,7 +26,7 @@ const Ul = styled.ul`
 
 const CheckboxItem = BaseInput(({ children }) => <Li>{children}</Li>);
 
-const Checkbox = Baseline(
+const CheckboxStyled = Baseline(
   BaseInput(
     BaseToggle({
       container: CheckboxItem,
@@ -37,8 +38,26 @@ const Checkbox = Baseline(
 /**
  * @example ./usage-checkbox.md
  */
-export default ({ children, ...rest }) => (
+const Checkbox = ({ children, ...rest }) => (
-  <Checkbox {...rest}>{children}</Checkbox>
+  <CheckboxStyled {...rest}>{children}</CheckboxStyled>
 );
 
 export const CheckboxList = Baseline(Ul);
+
+export default Checkbox;
+
+Checkbox.propTypes = {
+  /**
+   * Is the checkbox checked ?
+   */
+  checked: PropTypes.bool,
+  /**
+   * Is the checkbox disabled ?
+   */
+  disabled: PropTypes.bool
+};
+
+Checkbox.defaultProps = {
+  checked: false,
+  disabled: false
+};

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

@@ -1,11 +1,35 @@
 import React from 'react';
-
+import PropTypes from 'prop-types';
 import BaseInput, { Stylable } from './base/input';
 import Baseline from '../baseline';
 
-const Input = Baseline(BaseInput(Stylable('input')));
+const InputStyled = Baseline(BaseInput(Stylable('input')));
 
 /**
  * @example ./usage-input.md
  */
-export default ({ children, ...rest }) => <Input {...rest}>{children}</Input>;
+const Input = ({ children, ...rest }) => (
+  <InputStyled {...rest}>{children}</InputStyled>
+);
+
+export default Input;
+
+Input.propTypes = {
+  /**
+   * Input type
+   */
+  type: PropTypes.string,
+  /**
+   * Is the checkbox disabled ?
+   */
+  disabled: PropTypes.bool,
+  /**
+   * Placeholder text for the Input
+   */
+  placeholder: PropTypes.string
+};
+
+Input.defaultProps = {
+  type: 'text',
+  disabled: false
+};

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

@@ -1,6 +1,7 @@
 import styled from 'styled-components';
 import React from 'react';
 import remcalc from 'remcalc';
+import PropTypes from 'prop-types';
 
 import BaseToggle from './base/toggle';
 import Baseline from '../baseline';
@@ -33,7 +34,7 @@ const RadioItem = BaseInput(({ children, id, ...rest }) => (
   <Li {...rest}>{children}</Li>
 ));
 
-const Radio = Baseline(
+const RadioStyled = Baseline(
   BaseToggle({
     container: RadioItem,
     type: 'radio'
@@ -43,6 +44,23 @@ const Radio = Baseline(
 /**
  * @example ./usage-radio.md
  */
-export default ({ children, ...rest }) => <Radio {...rest}>{children}</Radio>;
+const Radio = ({ children, ...rest }) => <RadioStyled {...rest}>{children}</RadioStyled>;
 
 export const RadioList = Baseline(Ul);
+export default Radio;
+
+Radio.propTypes = {
+  /**
+   * Is the Radio checked ?
+   */
+  checked: PropTypes.bool,
+  /**
+   * Is the Radio disabled ?
+   */
+  disabled: PropTypes.bool
+};
+
+Radio.defaultProps = {
+  checked: false,
+  disabled: false
+};

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

@@ -2,6 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 import is, { isNot } from 'styled-is';
 import remcalc from 'remcalc';
+import PropTypes from 'prop-types';
 
 import Baseline from '../baseline';
 import BaseInput, { Stylable } from './base/input';
@@ -12,13 +13,10 @@ const chevron =
 const chevronDisabled =
   'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI2IiB2aWV3Qm94PSIwIDAgOSA2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjx0aXRsZT5hcnJvdzogcmlnaHQ8L3RpdGxlPjxwYXRoIGQ9Ik05IDEuMzg2TDcuNjQ4IDAgNC41IDMuMjI4IDEuMzUyIDAgMCAxLjM4NiA0LjUgNnoiIGZpbGw9IiNEOEQ4RDgiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==';
 
-const Select = Baseline(BaseInput(Stylable('select')));
-
 const SelectWrapper = styled.div`
   position: relative;
   display: inline-flex;
-  width: 100%;
+  
-
   ${isNot('fluid')`
     min-width: ${remcalc(200)};
   `};
@@ -42,7 +40,9 @@ const SelectWrapper = styled.div`
   `};
 `;
 
-const StyledSelect = Select.extend`
+const select = Baseline(BaseInput(Stylable('select')));
+const StyledSelect = select.extend`
+  position: relative;
   ${is('disabled')`
     border-color:  ${props => props.theme.grey};
     color:  ${props => props.theme.grey};
@@ -52,10 +52,23 @@ const StyledSelect = Select.extend`
 /**
  * @example ./usage-select.md
  */
-export default ({ children, fluid, ...rest }) => (
+const Select = ({ children, fluid, ...rest }) => (
   <SelectWrapper fluid={fluid}>
     <StyledSelect {...rest} fluid={fluid}>
       {children}
     </StyledSelect>
   </SelectWrapper>
 );
+
+export default Select;
+
+Select.propTypes = {
+  /**
+   * Is the Select disabled ?
+   */
+  disabled: PropTypes.bool
+};
+
+Select.defaultProps = {
+  disabled: false
+};

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

@@ -154,6 +154,6 @@ const Toggle = ({ children, ...rest }) => (
   <BaseToggle {...rest}>{children}</BaseToggle>
 );
 
-export default Baseline(Toggle);
+export default Toggle;
 
 export const ToggleList = Baseline(Ul);

packages/ui-toolkit/src/form/usage-checkbox.md

@@ -2,7 +2,7 @@
 const FormGroup = require('./group').default;
 const Label = require('./label').default;
 
-<FormGroup>
+<FormGroup name="test">
   <Checkbox checked>
       <Label>Detailed explanations</Label>
   </Checkbox>

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

@@ -1,10 +1,10 @@
 ```
-const Brand = require('./brand.js').default;
+const HeaderBrand = require('./brand.js').default;
-const Item = require('./item.js').default;
+const HeaderItem = require('./item.js').default;
 
 <Header>
-  <Brand>Triton</Brand>
+  <HeaderBrand>Triton</HeaderBrand>
-  <Item>eu-east-1</Item>
+  <HeaderItem>eu-east-1</HeaderItem>
-  <Item>Nicola</Item>
+  <HeaderItem>Nicola</HeaderItem>
 </Header>
 ```

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

@@ -59,10 +59,29 @@ export const Title = ({ children }) => <H4>{children}</H4>;
 export const Description = ({ children }) => <P>{children}</P>;
 
 Message.propTypes = {
+  /**
+   * Function to call when the close button is clicked
+   */
   onCloseClick: PropTypes.func,
+  /**
+   * Is it an error message ?
+   */
   error: PropTypes.bool,
+  /**
+   * Is it an warning message ?
+   */
   warning: PropTypes.bool,
+  /**
+   * Is it an success message ?
+   */
   success: PropTypes.bool
 };
 
+Message.defaultProps = {
+  onCloseClick: () => {},
+  error: false,
+  warning: false,
+  success: true
+};
+
 export default Message;

packages/ui-toolkit/src/metrics/container.js

@@ -1,9 +0,0 @@
-import { Col } from 'react-styled-flexboxgrid';
-import styled from 'styled-components';
-import remcalc from 'remcalc';
-
-export default styled(Col)`
-  position: relative;
-  border-left: ${remcalc(1)} solid #d8d8d8;
-  padding-top: ${remcalc(20)};
-`;

packages/ui-toolkit/src/metrics/graph.js

@@ -1,137 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import Chart from 'chart.js';
-import moment from 'moment';
-
-// colours to come from theme
-// AJ to supply friendly colours - these were nicked from chartjs utils
-const chartColors = [
-  'rgb(255, 99, 132)',
-  'rgb(255, 159, 64)',
-  'rgb(255, 205, 86)',
-  'rgb(75, 192, 192)',
-  'rgb(54, 162, 235)',
-  'rgb(153, 102, 255)',
-  'rgb(201, 203, 207)'
-];
-
-// TODO DISPLAY TIMES SHOULD NOT BE UTC
-class MetricGraph extends Component {
-  componentDidMount() {
-    const { xMin, xMax, datasets } = this.processProps(this.props);
-    const { displayX = false, displayY = false } = this.props;
-
-    const config = {
-      type: 'line',
-      data: { datasets },
-      options: {
-        responsive: true, // this needs to be played with
-        legend: {
-          display: false
-        },
-        tooltip: {
-          display: false // this config doesn't seem to work???
-        },
-        scales: {
-          xAxes: [
-            {
-              display: displayX, // config for mini should be false
-              type: 'time',
-              distribution: 'linear',
-              time: {
-                unit: 'minute', // this also needs to be played with
-                min: xMin,
-                max: xMax
-              }
-            }
-          ],
-          yAxes: [
-            {
-              display: displayY // needs min / max and measurement
-            }
-          ]
-        }
-      }
-    };
-
-    const ctx = this._refs.chart.getContext('2d');
-    this._chart = new Chart(ctx, config);
-  }
-
-  processProps(props) {
-    const { metricsData, graphDurationSeconds } = props;
-
-    const xMax = metricsData[0].end;
-    const xMin = moment
-      .utc(xMax)
-      .subtract(graphDurationSeconds, 'seconds')
-      .utc()
-      .format();
-
-    const datasets = metricsData.map((data, i) => ({
-      fill: false,
-      borderColor: chartColors[i],
-      data: this.truncateAndConvertMetrics(data.metrics, xMin, xMax)
-    }));
-
-    return {
-      xMax,
-      xMin,
-      datasets
-    };
-  }
-
-  truncateAndConvertMetrics(metrics, xMin, xMax) {
-    const xMinMoment = moment.utc(xMin);
-
-    return metrics.reduce((metrics, metric) => {
-      const diff = moment.utc(metric.time).diff(xMinMoment);
-      if (diff > -10000) {
-        // diff comparison is less than zero - otherwise no data for beginning of chart - bug or charjs weirdness?
-        metrics.push({
-          x: metric.time,
-          y: metric.value // value should be converted here to a readable format
-        });
-      }
-      return metrics;
-    }, []);
-  }
-
-  componentWillReceiveProps(nextProps) {
-    const { xMin, xMax, datasets } = this.processProps(nextProps);
-
-    this._chart.data.datasets = datasets;
-    // these need to be set, but don't seem to truncate the data that's displayed
-    this._chart.options.scales.xAxes[0].time.max = xMax;
-    this._chart.options.scales.xAxes[0].time.min = xMin;
-    this._chart.update(0);
-  }
-
-  // should not rerender ever, we update only the canvas via chartjs
-  shouldComponentUpdate() {
-    return false;
-  }
-
-  ref(name) {
-    this._refs = this._refs || {};
-
-    return el => {
-      this._refs[name] = el;
-    };
-  }
-
-  render() {
-    const { width, height } = this.props;
-
-    return <canvas ref={this.ref('chart')} width={width} height={height} />;
-  }
-}
-
-MetricGraph.propTypes = {
-  metricsData: PropTypes.object.isRequired,
-  width: PropTypes.number.isRequired,
-  height: PropTypes.number.isRequired,
-  graphDurationSeconds: PropTypes.number.isRequired // 'width' of graph, i.e. total duration of time it'll display and truncate data to
-};
-
-export default MetricGraph;

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

@@ -1,3 +0,0 @@
-export { default as MetricGraph } from './graph';
-export { default as GraphContainer } from './container';
-export { default as GraphTitle } from './title';

packages/ui-toolkit/src/metrics/title.js

@@ -1,16 +0,0 @@
-import remcalc from 'remcalc';
-import Small from '../text/small';
-
-export default Small.extend`
-  z-index: 99;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: ${remcalc(20)};
-  border-bottom: ${remcalc(1)} solid #d8d8d8;
-
-  font-size: ${remcalc(13)};
-  text-align: center;
-  color: #494949;
-`;

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

@@ -17,6 +17,7 @@ const StyledButton = styled(Button)`
   border: none;
   box-shadow: none;
   line-height: 1.6;
+  margin: 0;
   cursor: default;
 
   &:focus {

packages/ui-toolkit/styleguide.config.js

@@ -14,10 +14,6 @@ module.exports = {
         'rsg-components/Wrapper': path.join(__dirname, 'src/styleguide/wrapper')
       })
     }),
-    plugins:[
-      new UglifyJSPlugin(),
-      new LodashModuleReplacementPlugin()
-    ],
     module: Object.assign(webpackConfig.module, {
       rules: [
         {

yarn.lock

@@ -1624,6 +1624,10 @@ babel-plugin-transform-react-jsx@6.24.1, babel-plugin-transform-react-jsx@^6.24.
     babel-plugin-syntax-jsx "^6.8.0"
     babel-runtime "^6.22.0"
 
+babel-plugin-transform-react-remove-prop-types@^0.4.10:
+  version "0.4.10"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.10.tgz#3c7f3a03ad8aa6bb8c00e93fd13a433910444545"
+
 babel-plugin-transform-regenerator@6.24.1:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-regenerator/-/babel-plugin-transform-regenerator-6.24.1.tgz#b8da305ad43c3c99b4848e4fe4037b770d23c418"
@@ -1766,7 +1770,7 @@ babel-preset-jest@^21.2.0:
     babel-plugin-jest-hoist "^21.2.0"
     babel-plugin-syntax-object-rest-spread "^6.13.0"
 
-babel-preset-joyent-portal@^3.3.3:
+babel-preset-joyent-portal@^3.1.0, babel-preset-joyent-portal@^3.3.3:
   version "3.3.3"
   resolved "https://registry.yarnpkg.com/babel-preset-joyent-portal/-/babel-preset-joyent-portal-3.3.3.tgz#4f2f55499fff42822d0d1ad4c77ab4884a5039f6"
   dependencies:
@@ -2833,14 +2837,14 @@ 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, commander@2.11.x, commander@^2.11.0, commander@^2.9.0, commander@~2.11.0:
+  version "2.11.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.11.0.tgz#157152fd1e7a6c8d98a5b715cf376df928004563"
+
 commander@2.1.x, commander@~2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.1.0.tgz#d121bbae860d9992a3d517ba96f56588e47c6781"
 
-commander@2.11.x, commander@^2.11.0, commander@^2.9.0, commander@~2.11.0:
-  version "2.11.0"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.11.0.tgz#157152fd1e7a6c8d98a5b715cf376df928004563"
-
 commitizen@^2.9.6:
   version "2.9.6"
   resolved "https://registry.yarnpkg.com/commitizen/-/commitizen-2.9.6.tgz#c0d00535ef264da7f63737edfda4228983fa2291"
@@ -3410,6 +3414,10 @@ css-to-react-native@^2.0.3:
     fbjs "^0.8.5"
     postcss-value-parser "^3.3.0"
 
+css-unit-converter@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/css-unit-converter/-/css-unit-converter-1.1.1.tgz#d9b9281adcfd8ced935bdbaba83786897f64e996"
+
 css-what@2.1:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.0.tgz#9467d032c38cfaefb9f2d79501253062f87fa1bd"
@@ -3514,6 +3522,222 @@ cz-conventional-changelog@1.2.0:
     right-pad "^1.0.1"
     word-wrap "^1.0.3"
 
+d3-array@1, d3-array@1.2.1, d3-array@^1.2.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-1.2.1.tgz#d1ca33de2f6ac31efadb8e050a021d7e2396d5dc"
+
+d3-axis@1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/d3-axis/-/d3-axis-1.0.8.tgz#31a705a0b535e65759de14173a31933137f18efa"
+
+d3-brush@1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/d3-brush/-/d3-brush-1.0.4.tgz#00c2f238019f24f6c0a194a26d41a1530ffe7bc4"
+  dependencies:
+    d3-dispatch "1"
+    d3-drag "1"
+    d3-interpolate "1"
+    d3-selection "1"
+    d3-transition "1"
+
+d3-chord@1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/d3-chord/-/d3-chord-1.0.4.tgz#7dec4f0ba886f713fe111c45f763414f6f74ca2c"
+  dependencies:
+    d3-array "1"
+    d3-path "1"
+
+d3-collection@1, d3-collection@1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/d3-collection/-/d3-collection-1.0.4.tgz#342dfd12837c90974f33f1cc0a785aea570dcdc2"
+
+d3-color@1, d3-color@1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-1.0.3.tgz#bc7643fca8e53a8347e2fbdaffa236796b58509b"
+
+d3-dispatch@1, d3-dispatch@1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/d3-dispatch/-/d3-dispatch-1.0.3.tgz#46e1491eaa9b58c358fce5be4e8bed626e7871f8"
+
+d3-drag@1, d3-drag@1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/d3-drag/-/d3-drag-1.2.1.tgz#df8dd4c502fb490fc7462046a8ad98a5c479282d"
+  dependencies:
+    d3-dispatch "1"
+    d3-selection "1"
+
+d3-dsv@1, d3-dsv@1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/d3-dsv/-/d3-dsv-1.0.7.tgz#137076663f398428fc3d031ae65370522492b78f"
+  dependencies:
+    commander "2"
+    iconv-lite "0.4"
+    rw "1"
+
+d3-ease@1, d3-ease@1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/d3-ease/-/d3-ease-1.0.3.tgz#68bfbc349338a380c44d8acc4fbc3304aa2d8c0e"
+
+d3-force@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/d3-force/-/d3-force-1.1.0.tgz#cebf3c694f1078fcc3d4daf8e567b2fbd70d4ea3"
+  dependencies:
+    d3-collection "1"
+    d3-dispatch "1"
+    d3-quadtree "1"
+    d3-timer "1"
+
+d3-format@1, d3-format@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-1.2.0.tgz#6b480baa886885d4651dc248a8f4ac9da16db07a"
+
+d3-geo@1.8.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/d3-geo/-/d3-geo-1.8.1.tgz#50615c33454487e350db71059f84f71cda2dd983"
+  dependencies:
+    d3-array "1"
+
+d3-hierarchy@1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/d3-hierarchy/-/d3-hierarchy-1.1.5.tgz#a1c845c42f84a206bcf1c01c01098ea4ddaa7a26"
+
+d3-interpolate@1, d3-interpolate@1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-1.1.5.tgz#69e099ff39214716e563c9aec3ea9d1ea4b8a79f"
+  dependencies:
+    d3-color "1"
+
+d3-path@1, d3-path@1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-1.0.5.tgz#241eb1849bd9e9e8021c0d0a799f8a0e8e441764"
+
+d3-polygon@1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/d3-polygon/-/d3-polygon-1.0.3.tgz#16888e9026460933f2b179652ad378224d382c62"
+
+d3-quadtree@1, d3-quadtree@1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/d3-quadtree/-/d3-quadtree-1.0.3.tgz#ac7987e3e23fe805a990f28e1b50d38fcb822438"
+
+d3-queue@3.0.7:
+  version "3.0.7"
+  resolved "https://registry.yarnpkg.com/d3-queue/-/d3-queue-3.0.7.tgz#c93a2e54b417c0959129d7d73f6cf7d4292e7618"
+
+d3-random@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/d3-random/-/d3-random-1.1.0.tgz#6642e506c6fa3a648595d2b2469788a8d12529d3"
+
+d3-request@1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/d3-request/-/d3-request-1.0.6.tgz#a1044a9ef4ec28c824171c9379fae6d79474b19f"
+  dependencies:
+    d3-collection "1"
+    d3-dispatch "1"
+    d3-dsv "1"
+    xmlhttprequest "1"
+
+d3-scale@1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/d3-scale/-/d3-scale-1.0.6.tgz#bce19da80d3a0cf422c9543ae3322086220b34ed"
+  dependencies:
+    d3-array "^1.2.0"
+    d3-collection "1"
+    d3-color "1"
+    d3-format "1"
+    d3-interpolate "1"
+    d3-time "1"
+    d3-time-format "2"
+
+d3-selection@1, d3-selection@1.1.0, d3-selection@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/d3-selection/-/d3-selection-1.1.0.tgz#1998684896488f839ca0372123da34f1d318809c"
+
+d3-shape@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-1.2.0.tgz#45d01538f064bafd05ea3d6d2cb748fd8c41f777"
+  dependencies:
+    d3-path "1"
+
+d3-time-format@2:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/d3-time-format/-/d3-time-format-2.1.0.tgz#a1d9540a1dc498817d44066b121b19a4a83e3531"
+  dependencies:
+    d3-time "1"
+
+d3-time-format@2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/d3-time-format/-/d3-time-format-2.0.5.tgz#9d7780204f7c9119c9170b1a56db4de9a8af972e"
+  dependencies:
+    d3-time "1"
+
+d3-time@1, d3-time@1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-1.0.7.tgz#94caf6edbb7879bb809d0d1f7572bc48482f7270"
+
+d3-timer@1, d3-timer@1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/d3-timer/-/d3-timer-1.0.7.tgz#df9650ca587f6c96607ff4e60cc38229e8dd8531"
+
+d3-transition@1, d3-transition@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/d3-transition/-/d3-transition-1.1.0.tgz#cfc85c74e5239324290546623572990560c3966f"
+  dependencies:
+    d3-color "1"
+    d3-dispatch "1"
+    d3-ease "1"
+    d3-interpolate "1"
+    d3-selection "^1.1.0"
+    d3-timer "1"
+
+d3-voronoi@1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/d3-voronoi/-/d3-voronoi-1.1.2.tgz#1687667e8f13a2d158c80c1480c5a29cb0d8973c"
+
+d3-zoom@1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/d3-zoom/-/d3-zoom-1.6.0.tgz#eb645b07fd0c37acc8b36b88476b781ed277b40e"
+  dependencies:
+    d3-dispatch "1"
+    d3-drag "1"
+    d3-interpolate "1"
+    d3-selection "1"
+    d3-transition "1"
+
+d3@^4.11.0:
+  version "4.11.0"
+  resolved "https://registry.yarnpkg.com/d3/-/d3-4.11.0.tgz#15ce99ec33e6941718cfd8fb826071b4fb7c48cb"
+  dependencies:
+    d3-array "1.2.1"
+    d3-axis "1.0.8"
+    d3-brush "1.0.4"
+    d3-chord "1.0.4"
+    d3-collection "1.0.4"
+    d3-color "1.0.3"
+    d3-dispatch "1.0.3"
+    d3-drag "1.2.1"
+    d3-dsv "1.0.7"
+    d3-ease "1.0.3"
+    d3-force "1.1.0"
+    d3-format "1.2.0"
+    d3-geo "1.8.1"
+    d3-hierarchy "1.1.5"
+    d3-interpolate "1.1.5"
+    d3-path "1.0.5"
+    d3-polygon "1.0.3"
+    d3-quadtree "1.0.3"
+    d3-queue "3.0.7"
+    d3-random "1.1.0"
+    d3-request "1.0.6"
+    d3-scale "1.0.6"
+    d3-selection "1.1.0"
+    d3-shape "1.2.0"
+    d3-time "1.0.7"
+    d3-time-format "2.0.5"
+    d3-timer "1.0.7"
+    d3-transition "1.1.0"
+    d3-voronoi "1.1.2"
+    d3-zoom "1.6.0"
+
 d@1:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/d/-/d-1.0.0.tgz#754bb5bfe55451da69a58b94d45f4c5b0462d58f"
@@ -3554,6 +3778,10 @@ dashdash@1.10.1:
   dependencies:
     assert-plus "^1.0.0"
 
+date-fns@^1.29.0:
+  version "1.29.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.29.0.tgz#12e609cdcb935127311d04d33334e2960a2a54e6"
+
 date-now@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"
@@ -5060,6 +5288,10 @@ fs.realpath@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
 
+fs@^0.0.1-security:
+  version "0.0.1-security"
+  resolved "https://registry.yarnpkg.com/fs/-/fs-0.0.1-security.tgz#8a7bd37186b6dddf3813f23858b57ecaaf5e41d4"
+
 fsevents@1.1.2, fsevents@^1.0.0, fsevents@^1.1.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.1.2.tgz#3282b713fb3ad80ede0e9fcf4611b5aa6fc033f4"
@@ -6025,14 +6257,14 @@ hyphenate-style-name@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.2.tgz#31160a36930adaf1fc04c6074f7eb41465d4ec4b"
 
+iconv-lite@0.4, iconv-lite@0.4.19, iconv-lite@^0.4.17, iconv-lite@^0.4.8, iconv-lite@~0.4.13:
+  version "0.4.19"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.19.tgz#f7468f60135f5e5dad3399c0a81be9a1603a082b"
+
 iconv-lite@0.4.13:
   version "0.4.13"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.13.tgz#1f88aba4ab0b1508e8312acc39345f36e992e2f2"
 
-iconv-lite@0.4.19, iconv-lite@^0.4.17, iconv-lite@^0.4.8, iconv-lite@~0.4.13:
-  version "0.4.19"
-  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.19.tgz#f7468f60135f5e5dad3399c0a81be9a1603a082b"
-
 icss-replace-symbols@1.1.0, icss-replace-symbols@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz#06ea6f83679a7749e386cfe1fe812ae5db223ded"
@@ -7262,6 +7494,50 @@ joyent-react-scripts@^2.2.1, joyent-react-scripts@^2.3.0:
     mz "^2.7.0"
     react-scripts "^1.0.14"
 
+joyent-ui-toolkit@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/joyent-ui-toolkit/-/joyent-ui-toolkit-2.1.0.tgz#9ab87c95054c5b8dfcd95eb79703d8c7da784744"
+  dependencies:
+    babel-cli "^6.26.0"
+    babel-generator "^6.26.0"
+    babel-helpers "^6.24.1"
+    babel-loader "^7.1.2"
+    babel-plugin-inline-react-svg "^0.4.0"
+    babel-plugin-styled-components "^1.2.1"
+    babel-preset-joyent-portal "^3.1.0"
+    babel-template "^6.26.0"
+    camel-case "^3.0.0"
+    cross-env "^5.0.5"
+    d3 "^4.11.0"
+    disable-scroll "^0.3.0"
+    file-loader "^1.1.5"
+    fontfaceobserver "^2.0.13"
+    joy-react-broadcast "^0.6.9"
+    joyent-manifest-editor "^1.4.0"
+    lodash.difference "^4.5.0"
+    lodash.differenceby "^4.8.0"
+    lodash.isequal "^4.5.0"
+    lodash.isequalwith "^4.4.0"
+    lodash.isstring "^4.0.1"
+    moment "^2.19.0"
+    normalized-styled-components "^1.0.17"
+    pascal-case "^2.0.1"
+    polished "^1.8.0"
+    prop-types "^15.6.0"
+    react-bundle "^1.0.4"
+    react-input-range "^1.2.1"
+    react-responsive "^2.0.0"
+    react-styled-flexboxgrid "^2.0.3"
+    redrun "^5.9.18"
+    reduce-css-calc "^2.1.0"
+    remcalc "^1.0.9"
+    rnd-id "^1.1.1"
+    styled-components "^2.2.1"
+    styled-is "^1.1.0"
+    svg-inline-loader "^0.8.0"
+    unitcalc "^1.1.1"
+    url-loader "^0.6.2"
+
 jpeg-js@0.1.2, jpeg-js@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/jpeg-js/-/jpeg-js-0.1.2.tgz#135b992c0575c985cfa0f494a3227ed238583ece"
@@ -7752,6 +8028,10 @@ lodash.difference@^4.4.0, lodash.difference@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.difference/-/lodash.difference-4.5.0.tgz#9ccb4e505d486b91651345772885a2df27fd017c"
 
+lodash.differenceby@^4.8.0:
+  version "4.8.0"
+  resolved "https://registry.yarnpkg.com/lodash.differenceby/-/lodash.differenceby-4.8.0.tgz#cfd59e94353af5de51da5d302ca4ebff33faac57"
+
 lodash.find@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/lodash.find/-/lodash.find-4.6.0.tgz#cb0704d47ab71789ffa0de8b97dd926fb88b13b1"
@@ -7788,6 +8068,10 @@ lodash.isequal@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
 
+lodash.isequalwith@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/lodash.isequalwith/-/lodash.isequalwith-4.4.0.tgz#266726ddd528f854f21f4ea98a065606e0fbc6b0"
+
 lodash.isfinite@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/lodash.isfinite/-/lodash.isfinite-3.3.2.tgz#fb89b65a9a80281833f0b7478b3a5104f898ebb3"
@@ -8100,6 +8384,36 @@ methods@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
 
+metrics-yall@0.1.3:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/metrics-yall/-/metrics-yall-0.1.3.tgz#7b46b2e06b58fe97e00b4697967f4ce77d811134"
+  dependencies:
+    babel-plugin-transform-react-remove-prop-types "^0.4.10"
+    chart.js "^2.7.0"
+    d3 "^4.11.0"
+    date-fns "^1.29.0"
+    force-array "^3.1.0"
+    fs "^0.0.1-security"
+    joyent-ui-toolkit "^2.1.0"
+    lodash.difference "^4.5.0"
+    lodash.differenceby "^4.8.0"
+    normalized-styled-components "^1.0.17"
+    polished "^1.8.1"
+    prop-types "^15.5.10"
+    react "^16.0.0"
+    react-dom "^16.0.0"
+    react-redux "^5.0.6"
+    react-router-dom "^4.2.2"
+    react-scripts "^1.0.14"
+    react-styled-flexboxgrid "^2.1.0"
+    reduce-css-calc "^2.1.1"
+    redux "^3.7.2"
+    redux-form "^7.1.1"
+    remcalc "^1.0.9"
+    styled-components "^2.2.1"
+    styled-is "^1.1.0"
+    uglifyjs-webpack-plugin "^1.0.0-beta.3"
+
 micro-compress@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/micro-compress/-/micro-compress-1.0.0.tgz#53f5a80b4ad0320ca165a559b6e3df145d4f704f"
@@ -9101,6 +9415,10 @@ podium@^1.3.0:
     items "2.x.x"
     joi "10.x.x"
 
+polished@^1.8.0, polished@^1.8.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/polished/-/polished-1.8.1.tgz#e50b9f789d37d98da64912f1be2bf759d8bfae6c"
+
 portfinder@^1.0.13, portfinder@^1.0.9:
   version "1.0.13"
   resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.13.tgz#bb32ecd87c27104ae6ee44b5a3ccbf0ebb1aede9"
@@ -9995,6 +10313,14 @@ react-redux@^5.0.5, react-redux@^5.0.6:
     loose-envify "^1.1.0"
     prop-types "^15.5.10"
 
+react-responsive@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/react-responsive/-/react-responsive-2.0.0.tgz#4019fd493b6619c12cf0b06911ed543c2d94e504"
+  dependencies:
+    hyphenate-style-name "^1.0.0"
+    matchmediaquery "^0.2.1"
+    prop-types "^15.5.7"
+
 react-responsive@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/react-responsive/-/react-responsive-3.0.0.tgz#26e895dbdf748d4473c76cf46d29cb9d824e02ec"
@@ -10395,6 +10721,13 @@ reduce-css-calc@^1.2.6:
     math-expression-evaluator "^1.2.14"
     reduce-function-call "^1.0.1"
 
+reduce-css-calc@^2.1.0, reduce-css-calc@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-2.1.1.tgz#f4ecd7a00ec3e5683773f208067ad7da117b9db0"
+  dependencies:
+    css-unit-converter "^1.1.1"
+    postcss-value-parser "^3.3.0"
+
 reduce-function-call@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/reduce-function-call/-/reduce-function-call-1.0.2.tgz#5a200bf92e0e37751752fe45b0ab330fd4b6be99"
@@ -11007,6 +11340,10 @@ run-queue@^1.0.0, run-queue@^1.0.3:
   dependencies:
     aproba "^1.1.1"
 
+rw@1:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/rw/-/rw-1.3.3.tgz#3f862dfa91ab766b14885ef4d01124bfda074fb4"
+
 rx-lite-aggregates@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/rx-lite-aggregates/-/rx-lite-aggregates-4.0.8.tgz#753b87a89a11c95467c4ac1626c4efc4e05c67be"
@@ -13344,6 +13681,10 @@ xml@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/xml/-/xml-1.0.1.tgz#78ba72020029c5bc87b8a81a3cfcd74b4a2fc1e5"
 
+xmlhttprequest@1:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/xmlhttprequest/-/xmlhttprequest-1.8.0.tgz#67fe075c5c24fef39f9d65f5f7b7fe75171968fc"
+
 xtend@^4.0.0, xtend@^4.0.1, xtend@~4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.1.tgz#a5c6d532be656e23db820efb943a1f04998d63af"