Merge pull request #421 from reactioncommerce/upgrade-styleguidist-v9

Upgrade styleguidist v9

.snyk

@@ -1,5 +1,5 @@
 # Snyk (https://snyk.io) policy file, patches or ignores known vulnerabilities.
-version: v1.12.0
+version: v1.13.5
 # ignores vulnerabilities until expiry date; change duration by modifying expiry date
 ignore:
   'npm:hoek:20180212':
@@ -77,5 +77,5 @@ ignore:
   'npm:mem:20180117':
     - libnpx > yargs > os-locale > mem:
         reason: No update available
-        expires: '2019-07-14T20:24:25.499Z'
+        expires: '2019-08-15T22:17:20.703Z'
 patch: {}

package.json

@@ -91,6 +91,7 @@
   "dependencies": {
     "@babel/polyfill": "~7.2.5",
     "@reactioncommerce/components-context": "~1.2.0",
+    "lodash": "4.17.14",
     "prop-types": "~15.6.2",
     "react": "~16.4.2",
     "react-container-query": "~0.11.0",
@@ -159,7 +160,7 @@
     "promise": "~8.0.2",
     "raf": "~3.4.1",
     "react-dev-utils": "~7.0.1",
-    "react-styleguidist": "~6.5.3",
+    "react-styleguidist": "9.1.11",
     "react-test-renderer": "~16.7.0",
     "replace-in-files": "~1.1.4",
     "rimraf": "~2.6.3",
@@ -168,7 +169,7 @@
     "style-loader": "~0.19.0",
     "sw-precache-webpack-plugin": "~0.11.4",
     "url-loader": "~0.6.2",
-    "webpack": "~3.8.1",
+    "webpack": "4.35.3",
     "webpack-dev-server": "~2.9.4",
     "webpack-manifest-plugin": "~1.3.2",
     "whatwg-fetch": "~3.0.0",

package/src/components/AddressCapture/v1/AddressCapture.md

@@ -45,6 +45,8 @@ const props = {
 #### Add Address
 A naive example to demonstrate a basic address add UX flow. 
 ```jsx
+import Button from "../../Button/v1/Button";
+import Address from "../../Address/v1/Address";
 initialState = { isProcessing: false, savedAddress: null };
 let _form = null;
 
@@ -75,6 +77,8 @@ state.savedAddress ? <Address address={state.savedAddress} /> : <div>
 #### Edit Address
 A naive example to demonstrate a basic address edit UX flow. 
 ```jsx
+import Button from "../../Button/v1/Button";
+import Address from "../../Address/v1/Address";
 initialState = { 
   isProcessing: false,
   updatedAddress: null,
@@ -122,6 +126,8 @@ A naive example to demonstrate a basic address validation UX flow.
 
 *Address postal codes that start with "1" will pass validation, all others will fail.*
 ```jsx
+import Button from "../../Button/v1/Button";
+import Address from "../../Address/v1/Address";
 initialState = { isProcessing: false, savedAddress: null, submittedAddress: null, validationResults: null };
 let _form = null;
 

package/src/components/AddressForm/v1/AddressForm.md

@@ -252,6 +252,7 @@ Some `fulfillmentMethods` will charge a different shipping rate if shipping to a
 #### Address Form Implementation Example
 Simple `AddressForm` implementation example. Bind to the form element via a `ref` method that can be used by any `Button` to trigger `submit` & `validate` form methods.
 ```jsx
+import Button from "../../Button/v1/Button";
 initState = { isProcessing: false };
 const withLocales = require("../../../../../styleguide/src/components/withLocales").default;
 const AddressFormWithLocales = withLocales(AddressForm);

package/src/components/AddressReview/v1/AddressReview.md

@@ -59,6 +59,7 @@ const props = { addressEntered, addressSuggestion, value: "entered" };
 #### Example implementation
 Simple `AddressReview` example.
 ```jsx
+import Button from "../../Button/v1/Button";
 const addressEntered = {
   address1: "7742 Hwy 25",
   address2: "",

package/src/components/CatalogGrid/v1/CatalogGrid.md

@@ -57,14 +57,20 @@ Specify the `placeholderImageURL` to override:
 
 ```js static
 // Clone products and remove images
-productsWithoutImages = products.slice().map((product) => {
+const productsWithoutImages = products.slice().map((product) => {
   const clonedProduct = Object.assign({}, product);
   clonedProduct.primaryImage = null;
   return clonedProduct;
 });
 ```
 
 ```jsx
+const productsWithoutImages = products.slice().map((product) => {
+  const clonedProduct = Object.assign({}, product);
+  clonedProduct.primaryImage = null;
+  return clonedProduct;
+});
+
 <CatalogGrid
   placeholderImageURL="/images/placeholder.gif"
   products={productsWithoutImages}

package/src/components/CheckoutAction/v1/CheckoutAction.md

@@ -7,6 +7,8 @@ The `CheckoutAction` component wraps the `CheckoutActionComplete` and `CheckoutA
 #### Default: `Active` status
 
 ```jsx
+import CheckoutActionComplete from "../../CheckoutActionComplete/v1/CheckoutActionComplete";
+import CheckoutActionIncomplete from "../../CheckoutActionIncomplete/v1/CheckoutActionIncomplete";
 const ActiveStepComp = () => <span>Active Component</span>;
 const Address = (
   <div>
@@ -38,6 +40,8 @@ const Address = (
 
 #### Default: `Complete` status
 ```jsx
+import CheckoutActionComplete from "../../CheckoutActionComplete/v1/CheckoutActionComplete";
+import CheckoutActionIncomplete from "../../CheckoutActionIncomplete/v1/CheckoutActionIncomplete";
 const ActiveStepComp = () => <span>Active Component</span>;
 const Address = (
   <div>
@@ -69,6 +73,8 @@ const Address = (
 
 #### Default: `Incomplete` status
 ```jsx
+import CheckoutActionComplete from "../../CheckoutActionComplete/v1/CheckoutActionComplete";
+import CheckoutActionIncomplete from "../../CheckoutActionIncomplete/v1/CheckoutActionIncomplete";
 const ActiveStepComp = () => <span>Active Component</span>;
 const Address = (
   <div>
@@ -102,6 +108,8 @@ const Address = (
 Each status can have its own label by using the `activeLabel, completeLabel, incompleteLabel` props.
 
 ```jsx
+import CheckoutActionComplete from "../../CheckoutActionComplete/v1/CheckoutActionComplete";
+import CheckoutActionIncomplete from "../../CheckoutActionIncomplete/v1/CheckoutActionIncomplete";
 const ActiveStepComp = ({label, stepNumber}) => <span>{stepNumber}{label}: Active Component</span>;
 const onClick = () => {};
 const Address = (
@@ -138,6 +146,8 @@ const Address = (
 #### Override default `label` or `stepNumber`
 Passing `label` and `stepNumber` directly to each "status" component.
 ```jsx
+import CheckoutActionComplete from "../../CheckoutActionComplete/v1/CheckoutActionComplete";
+import CheckoutActionIncomplete from "../../CheckoutActionIncomplete/v1/CheckoutActionIncomplete";
 const ActiveStepComp = () => <span>Active Component</span>;
 const onClick = () => {};
 const Address = (

package/src/components/CheckoutActions/v1/CheckoutActions.md

@@ -71,6 +71,12 @@ const actions = [
 *Address postal codes that start with "11" will pass validation, all others will fail.*
 *Address postal codes that start with "10" will fail validation with 0 suggested addresses.*
 ```jsx
+import StripePaymentInput from "../../StripePaymentInput/v1/StripePaymentInput";
+import ExampleIOUPaymentForm from "../../ExampleIOUPaymentForm/v1/ExampleIOUPaymentForm";
+import ShippingAddressCheckoutAction from "../../ShippingAddressCheckoutAction/v1/ShippingAddressCheckoutAction";
+import FulfillmentOptionsCheckoutAction from "../../FulfillmentOptionsCheckoutAction/v1/FulfillmentOptionsCheckoutAction";
+import PaymentsCheckoutAction from "../../PaymentsCheckoutAction/v1/PaymentsCheckoutAction";
+import FinalReviewCheckoutAction from "../../FinalReviewCheckoutAction/v1/FinalReviewCheckoutAction";
 const fulfillmentGroups = [{
   _id: 1,
   type: "shipping",

package/src/components/ErrorsBlock/v1/ErrorsBlock.md

@@ -3,6 +3,8 @@
 The `ErrorsBlock` is used to provide helpful information to the user when a form is invalid. The block takes an array of errors that are displayed with an optional icon.
 
 ```jsx
+import Field from "../../Field/v1/Field";
+import TextInput from "../../TextInput/v1/TextInput";
 const TwoColumnExamples = require("../../../../../styleguide/src/components/TwoColumnExamples").default;
 
 const errors = [{ name: "example", message: "This field is required" }];
@@ -28,6 +30,8 @@ Use `ErrorsBlock` components with form fields and pass in an array of errors to
 Pass `shouldShowIcon` to show an icon before each error message.
 
 ```jsx
+import Field from "../../Field/v1/Field";
+import TextInput from "../../TextInput/v1/TextInput";
 const errors = [{ name: "example", message: "This field is required" }, { name: "example", message: "Another error" }];
 <Field name="example" label="Label" labelFor="exampleInput3" errors={errors}>
  <TextInput id="exampleInput3" name="example" errors={errors} shouldAllowLineBreaks />

package/src/components/ExampleIOUPaymentForm/v1/ExampleIOUPaymentForm.md

@@ -5,6 +5,7 @@ The `ExampleIOUPaymentForm` component is intended to be used as the `InputCompon
 ### Usage
 
 ```jsx
+import Button from "../../Button/v1/Button";
 class Example extends React.Component {
   constructor(props) {
     super(props);

package/src/components/Field/v1/Field.md

@@ -3,6 +3,7 @@
 Fields can be required, with more than one line, and have help text and labels.
 
 ```jsx
+import TextInput from "../../TextInput/v1/TextInput";
 <div>
   <Field name="example" label="Label" helpText="Help text" labelFor="input1">
     <TextInput id="input1" name="example" placeholder="This field has help text" />
@@ -17,6 +18,7 @@ Fields can be required, with more than one line, and have help text and labels.
 
 #### Optional Field
 ```jsx
+import TextInput from "../../TextInput/v1/TextInput";
 <Field name="example" label="Label" labelFor="input3" isOptional>
   <TextInput id="input3" name="example" placeholder="This field has help text" />
 </Field>

package/src/components/FulfillmentOptionsCheckoutAction/v1/FulfillmentOptionsCheckoutAction.md

@@ -11,6 +11,7 @@ Typically you will use this component with the [CheckoutActions](./#!/CheckoutAc
 #### Show fulfillment options
 
 ```jsx
+import Button from "../../Button/v1/Button";
 const fulfillmentGroup = {
   availableFulfillmentOptions: [
     {

package/src/components/PaymentsCheckoutAction/v1/PaymentsCheckoutAction.md

@@ -11,6 +11,8 @@ Note that this component allows collecting information for multiple payments but
 #### Basic Incomplete State
 
 ```jsx
+import StripePaymentInput from "../../StripePaymentInput/v1/StripePaymentInput";
+import ExampleIOUPaymentForm from "../../ExampleIOUPaymentForm/v1/ExampleIOUPaymentForm";
 const paymentMethods = [
   {
     displayName: "Credit Card",
@@ -37,6 +39,8 @@ const paymentMethods = [
 #### Basic Incomplete State While Saving
 
 ```jsx
+import StripePaymentInput from "../../StripePaymentInput/v1/StripePaymentInput";
+import ExampleIOUPaymentForm from "../../ExampleIOUPaymentForm/v1/ExampleIOUPaymentForm";
 const paymentMethods = [
   {
     displayName: "Credit Card",
@@ -64,6 +68,8 @@ const paymentMethods = [
 #### Incomplete State With Alert
 
 ```jsx
+import StripePaymentInput from "../../StripePaymentInput/v1/StripePaymentInput";
+import ExampleIOUPaymentForm from "../../ExampleIOUPaymentForm/v1/ExampleIOUPaymentForm";
 const paymentMethods = [
   {
     displayName: "Credit Card",
@@ -97,6 +103,8 @@ const alert = {
 #### Incomplete State With Addresses
 
 ```jsx
+import StripePaymentInput from "../../StripePaymentInput/v1/StripePaymentInput";
+import ExampleIOUPaymentForm from "../../ExampleIOUPaymentForm/v1/ExampleIOUPaymentForm";
 const paymentMethods = [
   {
     displayName: "Credit Card",
@@ -149,6 +157,8 @@ const addresses = [
 #### Incomplete State With Addresses and Alert
 
 ```jsx
+import StripePaymentInput from "../../StripePaymentInput/v1/StripePaymentInput";
+import ExampleIOUPaymentForm from "../../ExampleIOUPaymentForm/v1/ExampleIOUPaymentForm";
 const paymentMethods = [
   {
     displayName: "Credit Card",
@@ -208,6 +218,8 @@ const alert = {
 #### Incomplete State With Partial Payment
 
 ```jsx
+import StripePaymentInput from "../../StripePaymentInput/v1/StripePaymentInput";
+import ExampleIOUPaymentForm from "../../ExampleIOUPaymentForm/v1/ExampleIOUPaymentForm";
 const paymentMethods = [
   {
     displayName: "Credit Card",

package/src/components/RegionInput/v1/RegionInput.md

@@ -34,6 +34,8 @@ const options = [
 #### Implemented in an AddressForm
 
 ```jsx
+import Button from "../../Button/v1/Button";
+import AddressForm from "../../AddressForm/v1/AddressForm";
 const locales = {
   "NR": {
     "name": "Country Without Regions",
@@ -83,4 +85,4 @@ class AddressExample extends React.Component {
 
 ### Theme
 
-Refer to [Select](./#!/Select), [TextInput](./#!/TextInput) and [AddressForm](./#!/AddressForm) themes.
+Refer to [Select](./#!/Select), [TextInput](./#!/TextInput) and [AddressForm](./#!/AddressForm) themes.

package/src/components/SelectableItem/v1/SelectableItem.md

@@ -51,6 +51,7 @@ Pass any element - text, SVGs, other components, like `Address`,  or any React e
 ##### Element as detail
 
 ```jsx
+import Button from "../../Button/v1/Button";
 const link = (
   <Button title="Default" className="myBtn" isTextOnly isShortHeight>Default Text</Button>
 );
@@ -61,6 +62,7 @@ const link = (
 ##### Address as detail
 
 ```jsx
+import Address from "../../Address/v1/Address";
 const address = {
   _id: "1",
   address1: "7742 Hwy 23",

package/src/components/SelectableList/v1/SelectableList.md

@@ -47,6 +47,7 @@ const options = [{
 A `SelectableList` can optionally have a `listAction` at the end of the list. Pass any node to the  `listAction` to display a button, checkbox, or any other node.
 
 ```jsx
+import Button from "../../Button/v1/Button";
 const readMore = (
     <Button title="Default" className="myBtn" isTextOnly isShortHeight>Add a shipping method</Button>
 );
@@ -190,6 +191,7 @@ const options = [{
 #### Address list
 
 ```jsx
+import Button from "../../Button/v1/Button";
 const link = (
     <Button title="Default" className="myBtn" isTextOnly isShortHeight>Edit</Button>
 );

package/src/components/ShippingAddressCheckoutAction/v1/ShippingAddressCheckoutAction.md

@@ -163,6 +163,7 @@ A naive exmaple to demonstrate a basic shipping address checkout action UX flow.
 
 **Basic set shipping address**
 ```jsx
+import Button from "../../Button/v1/Button";
 initState = {
   isReady: false,
   fulfillmentGroup: {
@@ -214,6 +215,7 @@ A naive example to demonstrate a validation shipping address checkout action UX
 *Address postal codes that start with "11" will pass validation, all others will fail.*
 *Address postal codes that start with "10" will fail validation with 0 suggested addresses.*
 ```jsx
+import Button from "../../Button/v1/Button";
 initState = {
   addressValidationResults: null,
   isReady: false,

package/src/components/StripePaymentInput/v1/StripePaymentInput.md

@@ -5,6 +5,7 @@ The `StripePaymentInput` component is intended to be used as the `InputComponent
 ### Usage
 
 ```jsx
+import Button from "../../Button/v1/Button";
 class Example extends React.Component {
   constructor(props) {
     super(props);