Merge pull request #208 from Conor-Mack/material-des-builder-testing

All Changes and Bugfixes from Builder Testing
6 years ago · cd6d359df1
19 changed files with 142 additions and 154 deletions
--- a/packages/builder/src/builderStore/generate_css.js
+++ b/packages/builder/src/builderStore/generate_css.js
@ -88,7 +88,7 @@ const css_map = {
 }

 export const generate_rule = ([name, values]) =>
-  `${css_map[name].name}: ${css_map[name].generate(values)};`
+  `${css_map[name].name}: ${css_map[name].generate(values)} !important;`

 const handle_grid = (acc, [name, value]) => {
  let tmp = []
@ -113,7 +113,9 @@ const object_to_css_string = [
 export const generate_css = ({ layout, position }) => {
  let _layout = pipe(layout, object_to_css_string)
  if (_layout.length) {
-    _layout += `\ndisplay: ${_layout.includes("flex") ? "flex" : "grid"};`
+    _layout += `\ndisplay: ${
+      _layout.includes("flex") ? "flex" : "grid"
+    } !important;`
  }

  return {
@ -134,7 +136,6 @@ export const generate_screen_css = component_array => {

    styles += apply_class(_id, "pos", position) + "\n"
    styles += apply_class(_id, "lay", layout) + "\n"
-
    if (_children && _children.length) {
      styles += generate_screen_css(_children) + "\n"
    }
--- a/packages/builder/src/components/userInterface/CurrentItemPreview.svelte
+++ b/packages/builder/src/components/userInterface/CurrentItemPreview.svelte
@ -89,7 +89,7 @@
      ${styles || ''}

      .pos-${selectedComponentId} {
-        border: 2px solid #0055ff;
+        border: 2px solid #0055ff; 
      }

      body, html {
--- a/packages/materialdesign-components/.gitignore
+++ b/packages/materialdesign-components/.gitignore
@ -2,5 +2,5 @@
 node_modules
 yarn.lock
 package-lock.json
-dist/index.js
+dist/*
 public/build
--- a/packages/materialdesign-components/components.json
+++ b/packages/materialdesign-components/components.json
@ -14,9 +14,7 @@
    "name": "Body1",
    "description": "Sets the font properties as Roboto Body 1",
    "props": {
-      "text": "string",
-      "verticalMargin": "number",
-      "horizontalMargin": "number"
+      "text": "string"
    }, 
    "tags": []
  },
@ -58,6 +56,11 @@
        "type": "options",
        "options": ["one-line", "two-line"],
        "default": "one-line"
+      },
+      "inputElement": {
+        "type": "options",
+        "options": ["None", "Radiobutton", "Checkbox"],
+        "default": "None"
      }
    }
  },
@ -69,10 +72,9 @@
      "text": "string",
      "secondaryText": "string",
      "leadingIcon": "string",
-      "trailingIcon": "string",
-      "selected": "bool",
+      "trailingIcon": "string",      
      "disabled": "bool",
-      "divideAfter": "bool"
+      "dividerAfter": "bool"
    }
  },
  "Button": {
@ -117,12 +119,12 @@
    "name": "Card",
    "description": "A Material Card container. Accepts CardHeader, CardBody and CardFooter as possible children",
    "props": {
-      "width": "string",
+      "width": {"type": "string", "default": "350px"},
      "height": "string",
      "variant": {
        "type": "options",
        "options": ["standard", "outlined"],
-        "default": "standard"
+        "default": "outlined"
      }
    }
  },
@ -183,8 +185,7 @@
        "type": "options",
        "options": ["row", "column"],
        "default": "row"
-      },
-      "fullwidth": "bool",
+      },      
      "disabled": "bool",
      "alignEnd": "bool"
    }
@ -276,14 +277,18 @@
    "tags": []
  },
  "IconButton": {
-    "onClick": "event",
-    "disabled": "bool",
-    "href": "string",
-    "icon": "string",
-    "size": {
-      "type":"options",
-      "options": ["small", "medium", "large"],
-      "default": "medium"
+    "name": "IconButton",
+    "description": "An icon button component",
+    "props": {
+      "onClick": "event",
+      "disabled": "bool",
+      "href": "string",
+      "icon": "string",
+      "size": {
+        "type":"options",
+        "options": ["small", "medium", "large"],
+        "default": "medium"
+      }
    },
    "tags": []
  },
@ -291,6 +296,7 @@
    "name": "Label",
    "description": "A simple label component that displays its text in the standard Roboto Material Design font",
    "props": {
+      "text": "string",
      "bold": "bool"
    },
    "tags": []
@ -322,8 +328,7 @@
      "onClick": "event",
      "id": "string",
      "label": "string",      
-      "name": "string",
-      "checked": "bool",
+      "name": "string",      
      "disabled": "bool",
      "alignEnd": "bool"
    },
@ -334,6 +339,7 @@
    "description": "A Material Design Radiobutton group. Supports row and column orientation.",
    "props": {
      "onChange": "event",
+      "label": "string",
      "name": "string",
      "orientation": {
        "type": "options",
@ -394,14 +400,10 @@
      "minLength": "number",
      "maxLength": "number",
      "helperText": "string",
-      "errorText": "string",
      "placeholder": "string",
      "icon": "string",
      "trailingIcon": "bool",
-      "textarea": "bool",
-      "rows": "number",
-      "cols": "number",
-      "validation": "bool",
+      "textarea": "bool",      
      "persistent": "bool"
    },
    "tags": []
--- a/packages/materialdesign-components/rollup.config.js
+++ b/packages/materialdesign-components/rollup.config.js
@ -26,7 +26,7 @@ export default {
      file: "dist/index.js",
      format: "esm",
      name: "budibaseStandardComponents",
-      sourcemap: "inline",
+      sourcemap: true,
    },
  ],
  plugins: [
--- a/packages/materialdesign-components/src/Button/Button.svelte
+++ b/packages/materialdesign-components/src/Button/Button.svelte
@ -55,11 +55,11 @@
    {disabled}
    on:click={clicked}>
    {#if renderLeadingIcon}
-      <Icon context="button" {icon} />
+      <Icon context="button__icon" {icon} />
    {/if}
    <span class={labelClass}>{text}</span>
    {#if renderTrailingIcon}
-      <Icon context="button" {icon} />
+      <Icon context="button__icon" {icon} />
    {/if}
  </button>
 {/if}
--- a/packages/materialdesign-components/src/Card/Card.svelte
+++ b/packages/materialdesign-components/src/Card/Card.svelte
@ -22,13 +22,18 @@
  $: cardClass = cb.build({ props })

  $: safeWidth = width !== "auto" && !/px$/.test(width) ? `${width}px` : width
+
  $: safeHeight =
-    height !== "auto" && !/px$/.test(height) ? `${width}px` : height
+    height !== "auto" && !/px$/.test(height) ? `${height}px` : height

  $: card && _bb.attachChildren(card)
 </script>

-<div
-  bind:this={card}
-  style={`width: ${safeWidth}; height: ${safeHeight}`}
-  class={cardClass} />
+<div bind:this={card} class={`bbmd-card ${cardClass}`} />
+
+<style>
+  .bbmd-card {
+    width: 350px;
+    height: auto;
+  }
+</style>
--- a/packages/materialdesign-components/src/Checkbox/Checkbox.svelte
+++ b/packages/materialdesign-components/src/Checkbox/Checkbox.svelte
@ -94,27 +94,29 @@
 <!-- TODO: Customizing Colour and Density - What level of customization for these things does Budibase need here? -->

 {#if context !== 'list-item'}
-  <Formfield {label} {_bb} {id} alignEnd={isAlignedEnd}>
-    <div bind:this={checkbox} class={blockClass}>
-      <input
-        type="checkbox"
-        class={cb.elem`native-control`}
-        {id}
-        disabled={isDisabled}
-        {isChecked}
-        on:change={changed} />
-      <div class={cb.elem`background`}>
-        <svg class={cb.elem`checkmark`} viewBox="0 0 24 24">
-          <path
-            class={cb.elem`checkmark-path`}
-            fill="none"
-            d="M1.73,12.91 8.1,19.28 22.79,4.59" />
-        </svg>
-        <div class={cb.elem`mixedmark`} />
+  <div class="bbmd-checkbox">
+    <Formfield {label} {_bb} {id} alignEnd={isAlignedEnd}>
+      <div bind:this={checkbox} class={blockClass}>
+        <input
+          type="checkbox"
+          class={cb.elem`native-control`}
+          {id}
+          disabled={isDisabled}
+          checked={isChecked}
+          on:change={changed} />
+        <div class={cb.elem`background`}>
+          <svg class={cb.elem`checkmark`} viewBox="0 0 24 24">
+            <path
+              class={cb.elem`checkmark-path`}
+              fill="none"
+              d="M1.73,12.91 8.1,19.28 22.79,4.59" />
+          </svg>
+          <div class={cb.elem`mixedmark`} />
+        </div>
+        <div class={cb.elem`ripple`} />
      </div>
-      <div class={cb.elem`ripple`} />
-    </div>
-  </Formfield>
+    </Formfield>
+  </div>
 {:else}
  <div bind:this={checkbox} class={blockClass}>
    <input
@ -122,7 +124,7 @@
      class={cb.elem`native-control`}
      {id}
      disabled={isDisabled}
-      {isChecked}
+      checked={isChecked}
      on:change={changed} />
    <div class={cb.elem`background`}>
      <svg class={cb.elem`checkmark`} viewBox="0 0 24 24">
@ -136,3 +138,9 @@
    <div class={cb.elem`ripple`} />
  </div>
 {/if}
+
+<style>
+  .bbmd-checkbox {
+    width: fit-content;
+  }
+</style>
--- a/packages/materialdesign-components/src/Checkbox/CheckboxGroup.svelte
+++ b/packages/materialdesign-components/src/Checkbox/CheckboxGroup.svelte
@ -10,7 +10,6 @@
  export let _bb
  export let label = ""
  export let orientation = "row"
-  export let fullwidth = false
  export let onChange = selectedItems => {}

  export let disabled = false
@ -37,15 +36,14 @@
  <div class="checkbox-group__label">
    <Label text={label} bold />
  </div>
-  <div class={`checkbox-group__boxes ${orientation}`}>
-    <div bind:this={checkItems} class:fullwidth />
-  </div>
+  <div bind:this={checkItems} class={`checkbox-group__boxes ${orientation}`} />
 </div>

 <style>
  .checkbox-group {
    display: flex;
    flex-direction: column;
+    width: fit-content;
  }

  .checkbox-group__boxes.row > div:not(:first-child) {
@ -68,9 +66,4 @@
    flex-flow: column wrap;
    align-items: flex-start;
  }
-
-  .fullwidth {
-    flex: 1;
-    text-align: left;
-  }
 </style>
--- a/packages/materialdesign-components/src/Common/Formfield.svelte
+++ b/packages/materialdesign-components/src/Common/Formfield.svelte
@ -18,7 +18,7 @@
  let formField = null

  $: modifiers = { alignEnd }
-  $: props = { modifiers }
+  $: props = { modifiers, extras: ["bbmd-form-field"] }

  $: blockClasses = cb.build({ props })

@ -34,3 +34,9 @@
  <slot />
  <label for={id}>{label}</label>
 </div>
+
+<style>
+  .bbmd-form-field {
+    width: fit-content;
+  }
+</style>
--- a/packages/materialdesign-components/src/Common/Icon.svelte
+++ b/packages/materialdesign-components/src/Common/Icon.svelte
@ -2,7 +2,7 @@
  export let icon = ""
  export let context = ""

-  let cls = !!context ? `material-icons mdc-${context}__icon` : "material-icons"
+  let cls = !!context ? `material-icons mdc-${context}` : "material-icons"
 </script>

 <i class={cls}>{icon}</i>
--- a/packages/materialdesign-components/src/DatePicker/DatePicker.svelte
+++ b/packages/materialdesign-components/src/DatePicker/DatePicker.svelte
@ -23,6 +23,7 @@

  let daysArr = []
  let navDate = new Date()
+
  const weekdayMap = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]

  export let _bb
@ -50,6 +51,7 @@
    let year = getYear(navDate)
    date = new Date(year, month, dayOfMonth)
    handleSelect(date)
+    openCalendar(false)
  }

  function dateFieldChange(value) {
@ -77,12 +79,13 @@
    instance.open = isOpen === undefined ? !instance.open : isOpen
  }

+  $: safeDate = !!date ? date : new Date()
  $: dateMonthEnds = endOfMonth(navDate).getDate()
  $: dateMonthBegins = startOfMonth(navDate).getDay()
  $: dayStart = dateMonthBegins + 1 //1 = sunday
  $: monthAndYear = format(navDate, "MMMM y")
-  $: selectedDate = format(date, "dd/MM/yyyy")
-  $: dayOfSelectedDate = getDate(date)
+  $: selectedDate = format(safeDate, "dd/MM/yyyy")
+  $: dayOfSelectedDate = getDate(safeDate)
  $: for (let d = 1; d <= dateMonthEnds; d++) {
    if (d === 1) {
      daysArr = [d]
@ -93,7 +96,8 @@
  $: rowRepeater =
    dateMonthBegins > 5 && daysArr[daysArr.length - 1] > 30 ? 6 : 5
  $: sameMonthAndYear =
-    getMonth(date) === getMonth(navDate) && getYear(date) === getYear(navDate)
+    getMonth(safeDate) === getMonth(navDate) &&
+    getYear(safeDate) === getYear(navDate)
 </script>

 <div class="mdc-menu-surface--anchor">
@ -107,10 +111,7 @@
    iconButtonClick={openCalendar}
    icon="calendar_today" />

-  <div
-    bind:this={menu}
-    class="mdc-menu mdc-menu-surface bbmd-menu"
-    style={`margin-top: 70px`}>
+  <div bind:this={menu} class="mdc-menu mdc-menu-surface bbmd-menu">
    <div class="calendar-container">
      <div class="month-picker">
        <div>
@ -155,6 +156,7 @@
    width: 330px;
    height: auto;
    padding: 5px;
+    margin-top: 70px;
  }

  .month-picker {
--- a/packages/materialdesign-components/src/List/ListItem.svelte
+++ b/packages/materialdesign-components/src/List/ListItem.svelte
@ -50,12 +50,13 @@
      role = "menuitem"
    }

-    if (_addItem) {
-      _addItem(itemData())
-    }
+    // TODO: Causing first element to be automatically selected. Commenting for now.
+    // if (_addItem) {
+    //   _addItem(itemData())
+    // }
  })

-  function handleClick() {
+  function handleChange() {
    let item = itemData()
    if (!disabled) {
      if (
@ -79,7 +80,8 @@
  }

  $: isSelected =
-    $selectedItems && selectedItems.getItemIdx($selectedItems, _id) > -1
+    ($selectedItems && selectedItems.getItemIdx($selectedItems, _id) > -1) ||
+    selected

  $: modifiers = {
    selected: isSelected && (!listProps || !listProps.inputElement),
@ -90,14 +92,16 @@

  $: useTwoLine =
    listProps && listProps.variant === "two-line" && !!secondaryText
+
+  $: hasInputElement = listProps && listProps.inputElement !== "None"
 </script>

 <li
  class={listItemClass}
  role="option"
  tabindex="0"
-  on:click={handleClick}
-  data-value={value}
+  on:click={handleChange}
+  data-value={value || text}
  aria-selected={isSelected}>
  {#if leadingIcon}
    <span class="mdc-list-item__graphic material-icons" aria-hidden="true">
@ -111,13 +115,13 @@
    {:else}{text}{/if}
  </span>

-  {#if listProps}
-    {#if listProps.inputElement === 'radiobutton'}
+  {#if hasInputElement}
+    {#if listProps.inputElement === 'Radiobutton'}
      <Radiobutton checked={isSelected} {disabled} {_bb} />
-    {:else if listProps.inputElement === 'checkbox'}
+    {:else if listProps.inputElement === 'Checkbox'}
      <Checkbox checked={isSelected} {disabled} {_bb} />
    {/if}
-  {:else if trailingIcon}
+  {:else if !!trailingIcon}
    <Icon context="list-item__meta" icon={trailingIcon} />
  {/if}
 </li>
--- a/packages/materialdesign-components/src/Radiobutton/Radiobutton.svelte
+++ b/packages/materialdesign-components/src/Radiobutton/Radiobutton.svelte
@ -87,7 +87,7 @@
        class={cb.elem`native-control`}
        type="radio"
        {name}
-        {checked}
+        checked={isChecked}
        disabled={isDisabled}
        on:click={handleOnClick} />
      <div class={cb.elem`background`}>
@ -104,7 +104,7 @@
      class={cb.elem`native-control`}
      type="radio"
      {name}
-      {checked}
+      checked={isChecked}
      disabled={isDisabled}
      on:click={handleOnClick} />
    <div class={cb.elem`background`}>
--- a/packages/materialdesign-components/src/Select/Select.svelte
+++ b/packages/materialdesign-components/src/Select/Select.svelte
@ -17,7 +17,7 @@
  let selectList
  let instance
  let _helperId = ""
-  let listItems = []
+  // let listItems = []

  export let _bb
  export let onSelect = items => {}
@ -34,7 +34,9 @@

  onMount(() => {
    _bb.setContext("BBMD:list:props", { singleSelection: true })
-    _bb.setContext("BBMD:list:addItem", i => (listItems = [...listItems, i]))
+
+    //May not be necessary as state binds from value below. Commenting for now.
+    // _bb.setContext("BBMD:list:addItem", i => (listItems = [...listItems, i]))

    selectedItemsStore = createItemsStore(() => {
      const v =
@ -66,9 +68,9 @@
  $: modifiers = { variant, disabled, required, noLabel: !label }
  $: props = { modifiers }
  $: selectClass = cb.build({ props })
-  $: if (value !== undefined && instance && listItems.length > 0) {
-    instance.selectedIndex = listItems.findIndex(i => i.value === value)
-  }
+  // $: if (value !== undefined && instance && listItems.length > 0) {
+  //   instance.selectedIndex = listItems.findIndex(i => i.value === value)
+  // }
 </script>

 <div bind:this={select} id={_helperId} class={selectClass}>
--- a/packages/materialdesign-components/src/Slider/Slider.svelte
+++ b/packages/materialdesign-components/src/Slider/Slider.svelte
@ -10,7 +10,7 @@

  export let _bb
  export let onChange = value => {}
-  export let variant = "continuous" //or discrete
+  export let variant = "continuous"
  export let showTicks = false
  export let min = 0
  export let max = 100
@ -28,7 +28,7 @@
  }

  onMount(() => {
-    let s = MDCSlider.attachTo(slider)
+    instance = new MDCSlider(slider)
    return () => instance.destroy()
  })

@ -48,17 +48,22 @@

 <div
  bind:this={slider}
-  class="mdc-slider mdc-slider--discrete"
+  class={sliderCls}
  tabindex="0"
  role="slider"
-  aria-valuemin="0"
-  aria-valuemax="100"
-  aria-valuenow="0"
-  aria-label="Select Value"
+  data-step={step}
+  aria-valuemin={min}
+  aria-valuemax={max}
+  aria-valuenow={value}
+  aria-label={label}
+  aria-disabled={disabled}
  on:MDCSlider:input={e => handleChange(e.detail.value)}
  on:MDCSlider:change={e => handleChange(e.detail.value)}>
  <div class="mdc-slider__track-container">
    <div class="mdc-slider__track" />
+    {#if displayMarkers}
+      <div class="mdc-slider__track-marker-container" />
+    {/if}
  </div>
  <div class="mdc-slider__thumb-container">
    <div class="mdc-slider__pin">
--- a/packages/materialdesign-components/src/Textfield/Textfield.svelte
+++ b/packages/materialdesign-components/src/Textfield/Textfield.svelte
@ -45,8 +45,6 @@
  export let useIconButton = false
  export let iconButtonClick = () => {}
  export let textarea = false
-  export let rows = 4
-  export let cols = 40
  export let validation = false
  export let persistent = false
  export let value
@ -88,8 +86,6 @@
  const blockClasses = cb.build({ props })
  const inputClasses = cb.elem("input")

-  let renderMaxLength = !!maxLength ? `0 / ${maxLength}` : "0"
-
  function focus(event) {
    tfInstance.focus()
  }
@ -111,19 +107,21 @@ TODO:Needs error handling - this will depend on how Budibase handles errors
 <div class="textfield-container" class:fullwidth>
  <div bind:this={tf} bind:clientHeight={tfHeight} class={blockClasses}>
    {#if textarea}
-      <CharacterCounter />
+      {#if maxLength}
+        <CharacterCounter />
+      {/if}
      <textarea
        {id}
        class={inputClasses}
        class:fullwidth
        {disabled}
-        {rows}
-        {cols}
+        rows="5"
+        cols="70"
        {required}
        {placeholder}
-        {minLength}
-        maxLength={safeMaxLength}
        {value}
+        {minLength}
+        maxlength={safeMaxLength}
        on:change={changed} />
    {:else}
      {#if renderLeadingIcon}
@ -134,7 +132,7 @@ TODO:Needs error handling - this will depend on how Budibase handles errors
            context="mdc-text-field__icon mdc-text-field__icon--leading"
            onClick={iconButtonClick} />
        {:else}
-          <Icon context="text-field" {icon} />
+          <Icon context="text-field__icon" {icon} />
        {/if}
      {/if}
      <input
@ -143,9 +141,9 @@ TODO:Needs error handling - this will depend on how Budibase handles errors
        class={inputClasses}
        {type}
        {required}
-        placeholder={!!label && fullwidth ? label : placeholder}
        {minLength}
        maxLength={safeMaxLength}
+        placeholder={!!label && fullwidth ? label : placeholder}
        {value}
        aria-label={`Textfield ${variant}`}
        on:focus={focus}
@ -158,7 +156,7 @@ TODO:Needs error handling - this will depend on how Budibase handles errors
            context="mdc-text-field__icon mdc-text-field__icon--trailing"
            onClick={iconButtonClick} />
        {:else}
-          <Icon context="text-field" {icon} />
+          <Icon context="text-field__icon" {icon} />
        {/if}
      {/if}
      {#if variant !== 'outlined'}
--- a/packages/materialdesign-components/src/Typography/Body1.svelte
+++ b/packages/materialdesign-components/src/Typography/Body1.svelte
@ -5,7 +5,7 @@
 </script>

 <span
-  style={`margin: ${verticalMargin}px ${horizontalMargin}px`}
+  style={`margin: ${verticalMargin}px ${horizontalMargin}px;`}
  class="mdc-typography--body1">
  {text}
 </span>
--- a/yarn.lock
+++ b/yarn.lock
@ -1363,7 +1363,7 @@ caseless@~0.12.0:
  resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
  integrity sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=

-chalk@^2.0.0, chalk@^2.1.0, chalk@^2.3.1, chalk@^2.4.1, chalk@^2.4.2:
+chalk@^2.0.0, chalk@^2.1.0, chalk@^2.3.1, chalk@^2.4.2:
  version "2.4.2"
  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
  integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
@ -3394,11 +3394,6 @@ mem@^4.0.0:
    mimic-fn "^2.0.0"
    p-is-promise "^2.0.0"

-memorystream@^0.3.1:
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/memorystream/-/memorystream-0.3.1.tgz#86d7090b30ce455d63fbae12dda51a47ddcaf9b2"
-  integrity sha1-htcJCzDORV1j+64S3aUaR93K+bI=
-
 meow@^3.3.0:
  version "3.7.0"
  resolved "https://registry.yarnpkg.com/meow/-/meow-3.7.0.tgz#72cb668b425228290abbfa856892587308a801fb"
@ -3778,21 +3773,6 @@ npm-registry-fetch@^4.0.0:
    npm-package-arg "^6.1.0"
    safe-buffer "^5.2.0"

-npm-run-all@^4.1.5:
-  version "4.1.5"
-  resolved "https://registry.yarnpkg.com/npm-run-all/-/npm-run-all-4.1.5.tgz#04476202a15ee0e2e214080861bff12a51d98fba"
-  integrity sha512-Oo82gJDAVcaMdi3nuoKFavkIHBRVqQ1qvMb+9LHk/cF4P6B2m8aP04hGf7oL6wZ9BuGwX1onlLhpuoofSyoQDQ==
-  dependencies:
-    ansi-styles "^3.2.1"
-    chalk "^2.4.1"
-    cross-spawn "^6.0.5"
-    memorystream "^0.3.1"
-    minimatch "^3.0.4"
-    pidtree "^0.3.0"
-    read-pkg "^3.0.0"
-    shell-quote "^1.6.1"
-    string.prototype.padend "^3.0.0"
-
 npm-run-path@^2.0.0:
  version "2.0.2"
  resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
@ -4194,11 +4174,6 @@ performance-now@^2.1.0:
  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
  integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=

-pidtree@^0.3.0:
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/pidtree/-/pidtree-0.3.1.tgz#ef09ac2cc0533df1f3250ccf2c4d366b0d12114a"
-  integrity sha512-qQbW94hLHEqCg7nhby4yRC7G2+jYHY4Rguc2bjw7Uug4GIJuu1tvf2uHaZv5Q8zdt+WKJ6qK1FOI6amaWUo5FA==
-
 pify@^2.0.0, pify@^2.3.0:
  version "2.3.0"
  resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
@ -4713,11 +4688,6 @@ shebang-regex@^1.0.0:
  resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3"
  integrity sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=

-shell-quote@^1.6.1:
-  version "1.7.2"
-  resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.7.2.tgz#67a7d02c76c9da24f99d20808fcaded0e0e04be2"
-  integrity sha512-mRz/m/JVscCrkMyPqHc/bczi3OQHkLTqXHEFu0zDhK/qfv3UcOA4SVmRCLmos4bhjr9ekVQubj/R7waKapmiQg==
-
 signal-exit@^3.0.0, signal-exit@^3.0.2:
  version "3.0.2"
  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
@ -4961,14 +4931,6 @@ string-width@^4.1.0:
    is-fullwidth-code-point "^3.0.0"
    strip-ansi "^6.0.0"

-string.prototype.padend@^3.0.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/string.prototype.padend/-/string.prototype.padend-3.1.0.tgz#dc08f57a8010dc5c153550318f67e13adbb72ac3"
-  integrity sha512-3aIv8Ffdp8EZj8iLwREGpQaUZiPyrWrpzMBHvkiSW/bK/EGve9np07Vwy7IJ5waydpGXzQZu/F8Oze2/IWkBaA==
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.17.0-next.1"
-
 string.prototype.trimleft@^2.1.1:
  version "2.1.1"
  resolved "https://registry.yarnpkg.com/string.prototype.trimleft/-/string.prototype.trimleft-2.1.1.tgz#9bdb8ac6abd6d602b17a4ed321870d2f8dcefc74"