Dependency updates (#2326)

* Update sewing-kit to latest

Fix linting issues raised by update to new version of
eslint-plugin-shopify

* Update Storybook

.eslintrc

@@ -9,14 +9,15 @@
   ],
   "settings": {
     "react": {
-      "version": "16.3"
+      "version": "16.8"
     }
   },
   "rules": {
     "func-style": "off",
     "no-process-env": "off",
     "no-warning-comments": "off",
     "no-negated-condition": "off",
+    "no-console": "error",
     "consistent-return": "off",
     "match-default-export-name": "off",
     "jsx-use-translation-function": "off",

UNRELEASED.md

@@ -30,6 +30,8 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 
 ### Dependency upgrades
 
+- Updated sewing-kit to v0.111.0 and storybook to v5.2.4 ([#2326](https://github.com/Shopify/polaris-react/pull/2326))
+
 ### Code quality
 
 ### Deprecations

package.json

@@ -94,15 +94,15 @@
     "@percy/storybook": "^3.2.0",
     "@shopify/jest-dom-mocks": "^2.1.1",
     "@shopify/react-testing": "^1.7.8",
-    "@shopify/sewing-kit": "^0.92.3",
-    "@storybook/addon-a11y": "^5.2.1",
-    "@storybook/addon-actions": "^5.2.1",
+    "@shopify/sewing-kit": "^0.111.0",
+    "@storybook/addon-a11y": "^5.2.4",
+    "@storybook/addon-actions": "^5.2.4",
     "@storybook/addon-console": "^1.2.1",
-    "@storybook/addon-contexts": "^5.2.1",
-    "@storybook/addon-notes": "^5.2.1",
-    "@storybook/addon-viewport": "^5.2.1",
-    "@storybook/react": "^5.2.1",
-    "@storybook/theming": "^5.2.1",
+    "@storybook/addon-contexts": "^5.2.4",
+    "@storybook/addon-notes": "^5.2.4",
+    "@storybook/addon-viewport": "^5.2.4",
+    "@storybook/react": "^5.2.4",
+    "@storybook/theming": "^5.2.4",
     "@types/enzyme": "^3.10.3",
     "@types/enzyme-adapter-react-16": "^1.0.5",
     "@types/lodash": "^4.14.138",

scripts/new-version-pr-generator.js

@@ -113,6 +113,9 @@ The automatic branch creation for ${repository} failed. This can be due to many
 mkdir(sandbox);
 
 const jobs = repositories.map((repository) => {
+  // TODO work out how to keep eslint happy
+  // SEE https://eslint.org/docs/rules/no-async-promise-executor
+  // eslint-disable-next-line no-async-promise-executor
   return new Promise(async (resolve, reject) => {
     try {
       const repositoryDirectory = path.resolve(sandbox, repository);

scripts/utilities/retry.js

@@ -3,6 +3,9 @@ function sleep(ms) {
 }
 
 function retry(functionToTry, maxAttempts = 3, delay = 1000) {
+  // TODO work out how to keep eslint happy
+  // SEE https://eslint.org/docs/rules/no-async-promise-executor
+  // eslint-disable-next-line no-async-promise-executor
   return new Promise(async (resolve, reject) => {
     let remainingAttempts = maxAttempts;
     while (remainingAttempts > 0) {

sewing-kit.config.ts

@@ -19,9 +19,6 @@ export default function sewingKitConfig(
       plugins.jest((config: InitialOptions) => {
         config.roots = [join(__dirname, 'src'), join(__dirname, 'tests')];
 
-        config.setupFiles.push(join(tests, 'setup.ts'));
-        config.setupFilesAfterEnv = [join(tests, 'each-test.ts')];
-
         // Code coverage
         config.collectCoverageFrom = [
           'src/**/*.{ts,tsx}',

src/components/AppProvider/tests/AppProvider.test.tsx

@@ -17,7 +17,6 @@ describe('<AppProvider />', () => {
 
   it('updates context when props change', () => {
     const Child: React.SFC<{}> = () => {
-      // eslint-disable-next-line shopify/jest/no-if
       return useContext(LinkContext) ? <div id="child" /> : null;
     };
     const LinkComponent = () => <div />;

src/components/Autocomplete/tests/Autocomplete.test.tsx

@@ -3,8 +3,8 @@ import {CirclePlusMinor} from '@shopify/polaris-icons';
 import {mountWithAppProvider, trigger} from 'test-utilities/legacy';
 import {Spinner} from 'components';
 import {Key} from '../../../types';
-import {Autocomplete} from '..';
 import {ComboBox} from '../components';
+import {Autocomplete} from '..';
 
 describe('<Autocomplete/>', () => {
   const options = [

src/components/Banner/tests/Banner.test.tsx

@@ -11,8 +11,8 @@ import {ReactWrapper} from 'enzyme';
 import {mountWithAppProvider} from 'test-utilities/legacy';
 import {BannerContext} from 'utilities/banner-context';
 import {Button, Icon, UnstyledLink, Heading} from 'components';
-import {Banner} from '..';
 import {WithinContentContext} from '../../../utilities/within-content-context';
+import {Banner} from '..';
 
 describe('<Banner />', () => {
   it('renders a title', () => {
@@ -156,7 +156,6 @@ describe('<Banner />', () => {
         return (
           <BannerContext.Consumer>
             {(BannerContext) => {
-              // eslint-disable-next-line shopify/jest/no-if
               return BannerContext ? <div /> : null;
             }}
           </BannerContext.Consumer>

src/components/DropZone/tests/DropZone.test.tsx

@@ -360,7 +360,6 @@ describe('<DropZone />', () => {
           <DropZone type="image">
             <DropZoneContext.Consumer>
               {(ctx) => {
-                // eslint-disable-next-line shopify/jest/no-if
                 return type === ctx.type ? <div /> : null;
               }}
             </DropZoneContext.Consumer>

src/components/DropZone/utils/index.ts

@@ -55,5 +55,5 @@ function isDragEvent(event: DropZoneEvent): event is DragEvent {
 function isChangeEvent(
   event: DropZoneEvent,
 ): event is React.ChangeEvent<HTMLInputElement> {
-  return event.hasOwnProperty('target');
+  return Object.prototype.hasOwnProperty.call(event, 'target');
 }

src/components/MediaQueryProvider/tests/MediaQueryProvider.test.tsx

@@ -25,7 +25,6 @@ describe('MediaQueryProvider', () => {
   it('passes isNavigationCollapsed to MediaQueryContext.Provider', () => {
     function Component() {
       const mediaQuery = useMediaQuery();
-      // eslint-disable-next-line shopify/jest/no-if
       return mediaQuery !== undefined ? <div /> : null;
     }
 
@@ -40,7 +39,6 @@ describe('MediaQueryProvider', () => {
   it('sets isNavigationCollapsed when resize occurs', () => {
     function Component() {
       const {isNavigationCollapsed} = useMediaQuery();
-      // eslint-disable-next-line shopify/jest/no-if
       return isNavigationCollapsed ? <div>content</div> : null;
     }
     const mediaQueryProvider = mountWithApp(

src/components/Navigation/tests/Navigation.test.tsx

@@ -16,7 +16,6 @@ describe('<Navigation />', () => {
         return (
           <NavigationContext.Consumer>
             {({location}) => {
-              // eslint-disable-next-line shopify/jest/no-if
               return location ? <div /> : null;
             }}
           </NavigationContext.Consumer>
@@ -44,7 +43,6 @@ describe('<Navigation />', () => {
         return (
           <WithinContentContext.Consumer>
             {(withinContentContainer) => {
-              // eslint-disable-next-line shopify/jest/no-if
               return withinContentContainer ? <div /> : null;
             }}
           </WithinContentContext.Consumer>

src/components/OptionList/OptionList.tsx

@@ -183,7 +183,10 @@ function createNormalizedOptions(
 }
 
 function isSection(arr: Descriptor[]): arr is SectionDescriptor[] {
-  return typeof arr[0] === 'object' && arr[0].hasOwnProperty('options');
+  return (
+    typeof arr[0] === 'object' &&
+    Object.prototype.hasOwnProperty.call(arr[0], 'options')
+  );
 }
 
 function optionArraysAreEqual(

src/components/PageActions/tests/PageActions.test.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
-import {PageActions} from '..';
 import {ButtonGroup} from '../../ButtonGroup';
 import {Stack} from '../../Stack';
 import {buttonsFrom} from '../../Button';
+import {PageActions} from '..';
 
 jest.mock('../../Button', () => ({
   ...require.requireActual('../../Button'),

src/components/PolarisTestProvider/tests/PolarisTestProvider.test.tsx

@@ -40,7 +40,6 @@ describe('PolarisTestProvider', () => {
     it('allows isNavigationCollapsed to be overwritten', () => {
       function Component() {
         const {isNavigationCollapsed} = useMediaQuery();
-        // eslint-disable-next-line shopify/jest/no-if
         return isNavigationCollapsed ? <div /> : null;
       }
 

src/components/ResourceList/ResourceList.tsx

@@ -801,7 +801,9 @@ function getAllItemsOnPage(
 }
 
 function defaultIdForItem(item: any, index: number) {
-  return item.hasOwnProperty('id') ? item.id : index.toString();
+  return Object.prototype.hasOwnProperty.call(item, 'id')
+    ? item.id
+    : index.toString();
 }
 
 function isSmallScreen() {

src/components/ResourceList/components/BulkActions/tests/BulkActions.test.tsx

@@ -6,7 +6,7 @@ import {CheckableButton} from '../../CheckableButton';
 import {BulkActionButton} from '../components';
 import BulkActions, {BulkAction} from '../BulkActions';
 
-export interface Props {
+interface Props {
   bulkActions: BulkAction[];
   promotedActions: BulkAction[];
   paginatedSelectAllText: string;
@@ -16,7 +16,7 @@ export interface Props {
   disabled: boolean;
 }
 
-export type TestValue = BulkAction[] | string | boolean;
+type TestValue = BulkAction[] | string | boolean;
 
 const bulkActionProps: Props = {
   bulkActions: [

src/components/ScrollLock/tests/ScrollLock.test.tsx

@@ -20,7 +20,6 @@ describe('ScrollLock', () => {
 
       const setScollLockFalse = useCallback(() => setScrollLock(false), []);
 
-      // eslint-disable-next-line shopify/jest/no-if
       const scrollLockMarkup = showScrollLock ? <ScrollLock /> : null;
 
       return (

src/components/Scrollable/tests/Scrollable.test.tsx

@@ -33,7 +33,6 @@ describe('<Scrollable />', () => {
     const Child: React.SFC<{}> = (_) => (
       <ScrollableContext.Consumer>
         {(scrollToPosition) => {
-          // eslint-disable-next-line shopify/jest/no-if
           return scrollToPosition ? <div /> : null;
         }}
       </ScrollableContext.Consumer>

src/components/ThemeProvider/tests/ThemeProvider.test.tsx

@@ -18,7 +18,6 @@ describe('<ThemeProvider />', () => {
       return (
         <ThemeContext.Consumer>
           {(polarisTheme) => {
-            // eslint-disable-next-line shopify/jest/no-if
             return polarisTheme && polarisTheme.logo ? <div /> : null;
           }}
         </ThemeContext.Consumer>

src/components/UnstyledLink/UnstyledLink.tsx

@@ -7,9 +7,10 @@ import {useLink, LinkLikeComponentProps} from '../../utilities/link';
 // but the props explorer isn't smart enough to work that out
 export interface UnstyledLinkProps extends LinkLikeComponentProps {}
 
+// This does have a display name, but the linting has a bug in it
+// https://github.com/yannickcr/eslint-plugin-react/issues/2324
+// eslint-disable-next-line react/display-name
 export const UnstyledLink = React.memo(
-  // This does have a display name, but the linting has a bug in it
-  // https://github.com/yannickcr/eslint-plugin-react/issues/2324
   // eslint-disable-next-line react/display-name
   React.forwardRef<unknown, UnstyledLinkProps>(function UnstyledLink(
     props,

src/utilities/color-transformers.ts

@@ -13,7 +13,7 @@ import {compose} from './compose';
 export function rgbString(color: RGBColor | RGBAColor) {
   const {red, green, blue} = color;
 
-  if (color.hasOwnProperty('alpha')) {
+  if (Object.prototype.hasOwnProperty.call(color, 'alpha')) {
     return `rgba(${red}, ${green}, ${blue}, ${(color as RGBAColor).alpha})`;
   } else {
     return `rgb(${red}, ${green}, ${blue})`;

src/utilities/i18n/I18n.ts

@@ -55,7 +55,7 @@ export function translate(
     return text.replace(REPLACE_REGEX, (match: string) => {
       const replacement: string = match.substring(1, match.length - 1);
 
-      if (!replacements.hasOwnProperty(replacement)) {
+      if (!Object.prototype.hasOwnProperty.call(replacements, replacement)) {
         throw new Error(
           `No replacement found for key '${replacement}'. The following replacements were passed: ${Object.keys(
             replacements,

src/utilities/merge.ts

@@ -40,7 +40,7 @@ export function merge<TSource1, TSource2, TSource3, TSource4, TSource5>(
 
 function mergeRecursively(objA: GeneralObject, objB: GeneralObject) {
   for (const key in objB) {
-    if (!objB.hasOwnProperty(key)) {
+    if (!Object.prototype.hasOwnProperty.call(objB, key)) {
       continue;
     } else if (isMergeableValue(objB[key]) && isMergeableValue(objA[key])) {
       objA[key] = mergeRecursively(objA[key], objB[key]);

src/utilities/pick.ts

@@ -4,7 +4,7 @@ function pickValueAndLength(obj: GeneralObject, key: string) {
   const keyPaths = key.split('.');
   let value = obj;
   for (const key of keyPaths) {
-    if (!value.hasOwnProperty(key)) {
+    if (!Object.prototype.hasOwnProperty.call(value, key)) {
       return null;
     }
 
@@ -21,7 +21,10 @@ export function pick(
   const flattenedKeypaths = ([] as string[]).concat(...keyPaths);
   if (obj == null || flattenedKeypaths.length === 0) return {};
   return flattenedKeypaths.reduce((acc, key) => {
-    if (typeof key !== TypeOf.String || obj.hasOwnProperty(key)) {
+    if (
+      typeof key !== TypeOf.String ||
+      Object.prototype.hasOwnProperty.call(obj, key)
+    ) {
       return {...acc, [key]: obj[key]};
     }
 

src/utilities/tests/use-is-after-initial-mount.test.tsx

@@ -7,7 +7,6 @@ describe('useIsAfterInitialMount', () => {
     let isAfterInitialMountValue: boolean | undefined;
     function Component() {
       const isAfterInitialMount = useIsAfterInitialMount();
-      // eslint-disable-next-line shopify/jest/no-if
       if (isAfterInitialMountValue === undefined)
         isAfterInitialMountValue = !isAfterInitialMount;
       return null;

src/utilities/unique-id/tests/hooks.test.tsx

@@ -145,7 +145,6 @@ describe('useUniqueId', () => {
         [],
       );
 
-      // eslint-disable-next-line shopify/jest/no-if
       const override = count % 2 === 0 ? `Override${count}` : undefined;
 
       return (