Sewing-kit bump

.eslintrc

@@ -55,14 +55,36 @@
     "jsx-a11y/mouse-events-have-key-events": "off",
     "jsx-a11y/click-events-have-key-events": "off",
     "jsx-a11y/no-noninteractive-element-interactions": "off",
-    "jsx-a11y/no-noninteractive-element-to-interactive-role": "off"
+    "jsx-a11y/no-noninteractive-element-to-interactive-role": "off",
+    "@typescript-eslint/camelcase": [
+      "error",
+      {
+        "allow": [
+          "UNSTABLE_Color",
+          "UNSTABLE_colors",
+          "UNSTABLE_cssCustomProperties",
+          "UNSTABLE_telemetry"
+        ]
+      }
+    ]
   },
   "overrides": [
+    {
+      "files": ["src/**/*.{ts,tsx}"],
+      "extends": ["plugin:shopify/typescript-type-checking"],
+      "parserOptions": {
+        "project": "./tsconfig.json"
+      },
+      "rules": {
+        "@typescript-eslint/prefer-readonly": "off",
+        "@typescript-eslint/no-unnecessary-condition": "off",
+        "@typescript-eslint/unbound-method": "off"
+      }
+    },
     {
       "files": ["**/*.test.{ts,tsx}"],
       "rules": {
         "jest/no-truthy-falsy": "off",
-        "shopify/jsx-no-hardcoded-content": "off",
         "shopify/no-ancestor-directory-import": "off"
       }
     },

.vscode/settings.json

@@ -1,12 +1,14 @@
 // Place your settings in this file to overwrite default and user settings.
 {
   "css.validate": false,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,
+  "eslint.autoFixOnSave": true,
   "eslint.validate": [
-    "javascript",
-    "javascriptreact",
-    "typescript",
-    "typescriptreact"
+    {"language": "javascript", "autoFix": true},
+    {"language": "javascriptreact", "autoFix": true},
+    {"language": "typescript", "autoFix": true},
+    {"language": "typescriptreact", "autoFix": true}
   ],
   "files.exclude": {
     "**/.DS_Store": true,
@@ -27,7 +29,6 @@
   },
   "javascript.validate.enable": false,
   "jest.autoEnable": false,
-  "prettier.eslintIntegration": true,
   "prettier.stylelintIntegration": true,
   "scss.validate": false,
   "search.exclude": {

UNRELEASED.md

@@ -17,6 +17,7 @@
 ### Development workflow
 
 - Enabled maintainers running `yarn dev` to hide [`yarn splash`](https://github.com/Shopify/polaris-react/tree/master/scripts/splash) reports from the console by running `DISABLE_SPLASH=1 yarn dev` ([#2372](https://github.com/Shopify/polaris-react/pull/2372))
+- Updated to sewing-kit 0.112.0 and eslint 6 and updated vscode config to use the eslint plugin to format js/ts files ((#2369)[https://github.com/Shopify/polaris-react/pull/2369])
 
 ### Dependency upgrades
 

package.json

@@ -94,7 +94,7 @@
     "@percy/storybook": "^3.2.0",
     "@shopify/jest-dom-mocks": "^2.1.1",
     "@shopify/react-testing": "^1.7.8",
-    "@shopify/sewing-kit": "^0.111.0",
+    "@shopify/sewing-kit": "^0.112.0",
     "@storybook/addon-a11y": "^5.2.4",
     "@storybook/addon-actions": "^5.2.4",
     "@storybook/addon-console": "^1.2.1",
@@ -162,9 +162,6 @@
     "react": "^16.8.6",
     "react-dom": "^16.8.6"
   },
-  "resolutions": {
-    "typescript-eslint-parser": "npm:@typescript-eslint/parser@1.10.2"
-  },
   "files": [
     "esnext",
     "styles",

scripts/pa11y.js

@@ -39,6 +39,7 @@ async function runPa11y() {
   ];
 
   await browsers.forEach(async (instance) => {
+    // eslint-disable-next-line require-atomic-updates
     instance.page = await instance.browser.newPage();
   });
 

scripts/splash/index.tsx

@@ -81,7 +81,7 @@ const Components = ({components, status}) => (
   <React.Fragment>
     {status === 'loading' && (
       <Box marginLeft={4} marginBottom={1}>
-        ⏳{'  '}Please wait during compilation… Beep boop beep 🤖
+        ⏳ Please wait during compilation… Beep boop beep 🤖
       </Box>
     )}
 
@@ -202,8 +202,8 @@ const App = () => {
           <Color dim>
             <Box width={3}>💡</Box>
             <Box>
-              Tip: to disable these reports, run{' '}
-              <Text bold>DISABLE_SPLASH=1 yarn dev</Text>
+              Tip: to disable these reports, run
+              <Text bold> DISABLE_SPLASH=1 yarn dev</Text>
             </Box>
           </Color>
         </Box>

scripts/splash/treebuilder.ts

@@ -3,15 +3,15 @@ import * as ts from 'typescript';
 import glob from 'glob';
 import cmd from 'node-cmd';
 
-type Node = {
+interface Node {
   fileName: string;
   dependsOn: Node[];
   dependedOnBy: Node[];
-};
+}
 
-type GraphType = {
+interface GraphType {
   [name: string]: Node;
-};
+}
 
 const graph: GraphType = {};
 

src/components/AccountConnection/tests/AccountConnection.test.tsx

@@ -28,7 +28,7 @@ describe('<AccountConnection />', () => {
     it('is shown on the card when provided', () => {
       const TermsOfService = () => (
         <p>
-          By clicking <strong>Connect</strong>, you agree to accept Sample App’s{' '}
+          By clicking <strong>Connect</strong>, you agree to accept Sample App’s
           terms and conditions. You’ll pay a commission rate of 15% on sales
           made through Sample App.
         </p>

src/components/AppProvider/AppProvider.tsx

@@ -42,7 +42,6 @@ export interface AppProviderProps extends AppBridgeOptions {
   features?: Features;
   /** Inner content of the application */
   children?: React.ReactNode;
-  // eslint-disable-next-line babel/camelcase
   UNSTABLE_telemetry?: TelemetryObject;
 }
 
@@ -100,7 +99,6 @@ export class AppProvider extends React.Component<AppProviderProps, State> {
     });
   }
 
-  /* eslint-disable babel/camelcase */
   render() {
     const {
       theme = {},
@@ -132,5 +130,4 @@ export class AppProvider extends React.Component<AppProviderProps, State> {
       </FeaturesContext.Provider>
     );
   }
-  /* eslint-enable babel/camelcase */
 }

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

@@ -16,7 +16,7 @@ describe('<AppProvider />', () => {
   });
 
   it('updates context when props change', () => {
-    const Child: React.SFC<{}> = () => {
+    const Child: React.SFC = () => {
       return useContext(LinkContext) ? <div id="child" /> : null;
     };
     const LinkComponent = () => <div />;

src/components/Autocomplete/Autocomplete.tsx

@@ -17,7 +17,7 @@ export interface AutocompleteProps {
   /** The selected options */
   selected: string[];
   /** The text field component attached to the list of options */
-  textField: React.ReactElement<any>;
+  textField: React.ReactElement;
   /** The preferred direction to open the popover */
   preferredPosition?: PreferredPosition;
   /** Title of the list of options */

src/components/Autocomplete/components/ComboBox/ComboBox.tsx

@@ -31,7 +31,7 @@ export interface ComboBoxProps {
   /** The selected options */
   selected: string[];
   /** The text field component attached to the list of options */
-  textField: React.ReactElement<any>;
+  textField: React.ReactElement;
   /** The preferred direction to open the popover */
   preferredPosition?: PreferredPosition;
   /** Title of the list of options */

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

@@ -152,7 +152,7 @@ describe('<Banner />', () => {
 
   describe('context', () => {
     it('passes the within banner context', () => {
-      const Child: React.SFC<{}> = (_props) => {
+      const Child: React.SFC = (_props) => {
         return (
           <BannerContext.Consumer>
             {(BannerContext) => {

src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -10,7 +10,7 @@ import styles from './Breadcrumbs.scss';
 
 export interface BreadcrumbsProps {
   /** Collection of breadcrumbs */
-  breadcrumbs: Array<CallbackAction | LinkAction>;
+  breadcrumbs: (CallbackAction | LinkAction)[];
 }
 
 export class Breadcrumbs extends React.PureComponent<BreadcrumbsProps, never> {

src/components/Choice/Choice.tsx

@@ -12,7 +12,7 @@ export interface ChoiceProps {
   /**	Label for the choice */
   label: React.ReactNode;
   /** Whether the associated form control is disabled */
-  disabled?: Boolean;
+  disabled?: boolean;
   /** Display an error message */
   error?: Error | boolean;
   /** Visually hide the label */

src/components/Choice/tests/Choice.test.tsx

@@ -82,8 +82,8 @@ describe('<Choice />', () => {
       <Choice id="MyChoice" label="Label" />,
     );
     const label = element.find('label');
-    for (let i = 0; i < blockLevelElements.length; i++) {
-      expect(label.find(blockLevelElements[i])).toHaveLength(0);
+    for (const blockLevelElement of blockLevelElements) {
+      expect(label.find(blockLevelElement)).toHaveLength(0);
     }
   });
 });

src/components/ChoiceList/ChoiceList.tsx

@@ -136,7 +136,7 @@ export function ChoiceList({
 function noop() {}
 
 function choiceIsSelected({value}: Choice, selected: string[]) {
-  return selected.indexOf(value) >= 0;
+  return selected.includes(value);
 }
 
 function updateSelectedChoices(

src/components/Connected/tests/Connected.test.tsx

@@ -6,20 +6,18 @@ import {Item, ItemPosition} from '../components';
 
 describe('<Connected />', () => {
   describe('<Item />', () => {
-    it('wraps children in an Item component', async () => {
+    it('wraps children in an Item component', () => {
       const expectedContent = 'foo';
-      const connected = await mountWithApp(
-        <Connected>{expectedContent}</Connected>,
-      );
+      const connected = mountWithApp(<Connected>{expectedContent}</Connected>);
 
       expect(
         connected.find(Item, {position: ItemPosition.Primary}),
       ).toContainReactText(expectedContent);
     });
 
-    it('includes `rightConnected` markup in an Item component', async () => {
+    it('includes `rightConnected` markup in an Item component', () => {
       const rightConnectedContent = 'foo';
-      const connected = await mountWithApp(
+      const connected = mountWithApp(
         <Connected right={rightConnectedContent} />,
       );
 
@@ -28,21 +26,19 @@ describe('<Connected />', () => {
       ).toContainReactText(rightConnectedContent);
     });
 
-    it('includes `leftConnected` markup in an Item component', async () => {
+    it('includes `leftConnected` markup in an Item component', () => {
       const leftConnectedContent = 'foo';
-      const connected = await mountWithApp(
-        <Connected left={leftConnectedContent} />,
-      );
+      const connected = mountWithApp(<Connected left={leftConnectedContent} />);
 
       expect(
         connected.find(Item, {position: ItemPosition.Left}),
       ).toContainReactText(leftConnectedContent);
     });
 
-    it('`leftConnected` and `rightConnected` are not mutually exclusive', async () => {
+    it('`leftConnected` and `rightConnected` are not mutually exclusive', () => {
       const rightConnectedContent = 'rightfoo';
       const leftConnectedContent = 'leftfoo';
-      const connected = await mountWithApp(
+      const connected = mountWithApp(
         <Connected right={rightConnectedContent} left={leftConnectedContent} />,
       );
 

src/components/ContextualSaveBar/ContextualSaveBar.tsx

@@ -7,9 +7,6 @@ import {ContextualSaveBarProps, useFrame} from '../../utilities/frame';
 // crashing if we write `ContextualSaveBar extends React.Component<ContextualSaveBarProps>`
 export interface ContextualSaveBarProps extends ContextualSaveBarProps {}
 
-// 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 ContextualSaveBar = React.memo(function ContextualSaveBar({
   message,
   saveAction,

src/components/DatePicker/components/Month/Month.tsx

@@ -27,7 +27,7 @@ export interface MonthProps {
   year: Year;
   disableDatesBefore?: Date;
   disableDatesAfter?: Date;
-  allowRange?: Boolean;
+  allowRange?: boolean;
   weekStartsOn: Weekdays;
   onChange?(date: Range): void;
   onHover?(hoverEnd: Date): void;
@@ -82,7 +82,7 @@ export function Month({
   ));
 
   function handleDateClick(selectedDate: Date) {
-    onChange(getNewRange(allowRange && selected, selectedDate));
+    onChange(getNewRange(allowRange ? selected : undefined, selectedDate));
   }
 
   function renderWeek(day: Date, dayIndex: number) {

src/components/DropZone/DropZone.tsx

@@ -499,7 +499,7 @@ class DropZone extends React.Component<CombinedProps, State> {
 
     const fileList = getDataTransferFiles(event);
 
-    if (event.target && this.dragTargets.indexOf(event.target) === -1) {
+    if (event.target && !this.dragTargets.includes(event.target)) {
       this.dragTargets.push(event.target);
     }
 

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

@@ -482,7 +482,7 @@ function fireEvent({
   element: ReactWrapper<any, any>;
   eventType?: string;
   spy?: jest.Mock;
-  testFiles?: Array<Object>;
+  testFiles?: object[];
 }) {
   if (spy) {
     spy.mockReset();

src/components/DropZone/utils/index.ts

@@ -36,9 +36,9 @@ function accepts(file: File, acceptedFiles: string | string[] | undefined) {
 
     return acceptedFilesArray.some((type) => {
       const validType = type.trim();
-      if (validType.charAt(0) === '.') {
+      if (validType.startsWith('.')) {
         return fileName.toLowerCase().endsWith(validType.toLowerCase());
-      } else if (/\/\*$/.test(validType)) {
+      } else if (validType.endsWith('/*')) {
         // This is something like a image/* mime type
         return baseMimeType === validType.replace(/\/.*$/, '');
       }

src/components/ExceptionList/ExceptionList.tsx

@@ -9,8 +9,8 @@ import styles from './ExceptionList.scss';
 
 export type Description =
   | string
-  | React.ReactElement<any>
-  | (string | React.ReactElement<any>)[];
+  | React.ReactElement
+  | (string | React.ReactElement)[];
 
 export interface Item {
   /** Set the color of the icon and title for the given item. */

src/components/Filters/components/ConnectedFilterControl/ConnectedFilterControl.tsx

@@ -185,9 +185,7 @@ export class ConnectedFilterControl extends React.Component<
     return actionsToReturn;
   }
 
-  private activatorButtonFrom(
-    action: PopoverableAction,
-  ): React.ReactElement<any> {
+  private activatorButtonFrom(action: PopoverableAction): React.ReactElement {
     return (
       <Button
         onClick={action.onAction}
@@ -200,7 +198,7 @@ export class ConnectedFilterControl extends React.Component<
     );
   }
 
-  private popoverFrom(actions: PopoverableAction[]): React.ReactElement<any>[] {
+  private popoverFrom(actions: PopoverableAction[]): React.ReactElement[] {
     return actions.map((action) => {
       return (
         <Item key={action.key}>

src/components/Frame/components/ToastManager/ToastManager.tsx

@@ -17,9 +17,6 @@ export interface ToastManagerProps {
   toastMessages: (ToastPropsWithID)[];
 }
 
-// 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 ToastManager = memo(function ToastManager({
   toastMessages,
 }: ToastManagerProps) {