Enable Typescript 3.8 and update Sewing-kit to latest

.storybook/main.js

@@ -89,9 +89,10 @@ module.exports = {
             loader: 'css-loader',
             query: {
               sourceMap: false,
-              modules: true,
               importLoaders: 1,
-              localIdentName: '[name]-[local]_[hash:base64:5]',
+              modules: {
+                localIdentName: '[name]-[local]_[hash:base64:5]',
+              },
             },
           },
           {

babel.config.js

@@ -1,4 +1,4 @@
-module.exports = function(api) {
+module.exports = function (api) {
   // When building (using rollup) or running storybook (using babel-loader) we
   // want to compile for the web otherwise compile for node usage (within jest)
   const isWeb = api.caller((caller = {}) => {

config/rollup/namespaced-classname.js

@@ -1,4 +1,5 @@
 const {basename} = require('path');
+
 const {camelCase} = require('change-case');
 
 const cache = {

config/rollup/plugins/image.js

@@ -1,5 +1,6 @@
 const {readFileSync} = require('fs');
 const {extname} = require('path');
+
 const {createFilter} = require('rollup-pluginutils');
 
 const MIME_TYPES = {

config/rollup/plugins/styles.js

@@ -1,12 +1,12 @@
 const util = require('util');
 const path = require('path');
+
 const postcss = require('postcss');
 const {ensureDir, outputFile, readFileSync, writeFile} = require('fs-extra');
 const glob = require('glob');
 const nodeSass = require('node-sass');
 const {createFilter} = require('rollup-pluginutils');
 const cssnano = require('cssnano');
-
 const cssModulesExtractImports = require('postcss-modules-extract-imports');
 const cssModulesLocalByDefault = require('postcss-modules-local-by-default');
 const cssModulesScope = require('postcss-modules-scope');

config/typescript/react-transition-group.d.ts

@@ -1,4 +1,6 @@
 declare module '@material-ui/react-transition-group' {
+  // Import order rule doesn't like doing asignment with require
+  // eslint-disable-next-line import/order
   import {Component} from 'react';
 
   import CSSTransitionNameSpace = require('react-transition-group/CSSTransition');

package.json

@@ -101,8 +101,8 @@
     "@octokit/rest": "^16.36.0",
     "@percy/storybook": "^3.2.0",
     "@shopify/jest-dom-mocks": "^2.1.1",
-    "@shopify/react-testing": "^1.8.0",
-    "@shopify/sewing-kit": "^0.112.0",
+    "@shopify/react-testing": "^2.0.0",
+    "@shopify/sewing-kit": "^0.120.0",
     "@shopify/shrink-ray": "^2.3.1",
     "@shopify/splash": "^0.0.8",
     "@storybook/addon-a11y": "^5.3.2",
@@ -162,14 +162,15 @@
     "rollup-plugin-json": "^4.0.0",
     "rollup-plugin-node-resolve": "^4.2.3",
     "rollup-pluginutils": "^2.8.2",
+    "sass-loader": "^8.0.0",
     "scss-parser": "^1.0.3",
     "semver": "^6.3.0",
     "serve": "^11.1.0",
     "shelljs": "^0.8.3",
     "shx": "^0.3.2",
     "storybook-chromatic": "^3.4.1",
     "svgo": "^1.3.0",
-    "typescript": "~3.7.2"
+    "typescript": "~3.8.3"
   },
   "peerDependencies": {
     "react": "^16.8.6",
@@ -193,7 +194,7 @@
     "@shopify/app-bridge": "^1.3.0",
     "@shopify/javascript-utilities": "^2.4.1",
     "@shopify/polaris-icons": "^3.10.0",
-    "@shopify/polaris-tokens": "^2.12.0",
+    "@shopify/polaris-tokens": "^2.12.2",
     "@shopify/useful-types": "^1.2.4",
     "@types/hoist-non-react-statics": "^3.3.1",
     "@types/react": "^16.8.15",
@@ -202,5 +203,8 @@
     "hoist-non-react-statics": "^3.3.0",
     "lodash": "^4.17.4",
     "tslib": "^1.9.3"
+  },
+  "resolutions": {
+    "prettier": "2.0.2"
   }
 }

playground/DetailsPage.tsx

@@ -12,6 +12,7 @@ import {
   DuplicateMinor,
   ViewMinor,
 } from '@shopify/polaris-icons';
+
 import {
   ActionList,
   Card,

playground/Playground.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import {Page} from '../src';
 
 export function Playground() {

scripts/analyze-custom-properties/analyze-custom-properties.ts

@@ -1,4 +1,5 @@
 import {readFileSync} from 'fs';
+
 import glob from 'glob';
 import {parse, InputStreamPosition} from 'scss-parser';
 import chalk from 'chalk';
@@ -103,7 +104,7 @@ export function analyzeCustomProperties({
       totalCustomProperties: 0,
     };
 
-    glob(pattern, {}, function(err, files) {
+    glob(pattern, {}, function (err, files) {
       if (err) reject(err);
 
       for (const file of files) {

scripts/analyze-custom-properties/cli.ts

@@ -1,5 +1,7 @@
 import {readFileSync, writeFileSync} from 'fs';
+
 import program from 'commander';
+
 import {analyzeCustomProperties} from './analyze-custom-properties';
 
 type LogLevel = 'verbose' | 'info' | 'error' | 'never';

scripts/analyze-custom-properties/tests/analyze-custom-properties.test.ts

@@ -1,9 +1,11 @@
 import glob from 'glob';
+
 import {analyzeCustomProperties} from '../analyze-custom-properties';
 
 jest.mock('glob', () => ({
   __esModule: true,
   default: jest.fn((_a, _b, cb) =>
+    // eslint-disable-next-line node/no-callback-literal
     cb(false, ['scripts/analyze-custom-properties/tests/fixtures.scss']),
   ),
 }));
@@ -38,6 +40,7 @@ describe('analyzeCustomProperties', () => {
   });
 
   it(`catches errors rather than throwing`, async () => {
+    // eslint-disable-next-line node/no-callback-literal
     globSpy.mockImplementationOnce((_a, _b, cb) => cb(true, []));
     let error = false;
     await analyzeCustomProperties({}).catch((err) => {

scripts/analyze-custom-properties/tests/handle-message.test.ts

@@ -1,4 +1,5 @@
 import {handleMessage} from '../analyze-custom-properties';
+
 import {mockCustomProperties, mockCustomPropertyErrors} from './fixtures';
 
 describe('handleMessage', () => {

scripts/analyze-custom-properties/tests/is-custom-property-declaration.test.ts

@@ -1,4 +1,5 @@
 import {isCustomPropertyDeclaration} from '../analyze-custom-properties';
+
 import {
   mockVarNode,
   mockPunctuation,

scripts/analyze-custom-properties/tests/is-var-function.test.ts

@@ -1,4 +1,5 @@
 import {isVarFunction} from '../analyze-custom-properties';
+
 import {mockVarNode, mockPunctuation, mockArguments} from './fixtures';
 
 describe('isVarFunction', () => {

scripts/analyze-custom-properties/tests/visit-all.test.ts

@@ -1,4 +1,5 @@
 import {visitAll} from '../analyze-custom-properties';
+
 import {mockVarNode, mockPunctuation, mockStringSingle} from './fixtures';
 
 describe('visitAll', () => {

scripts/build-consumer.js

@@ -1,6 +1,7 @@
 /* eslint-disable no-console */
 
 const {resolve} = require('path');
+
 const {config, cp, mkdir, rm} = require('shelljs');
 
 const packageJSON = require('../package.json');

scripts/build-shrink-ray.js

@@ -1,5 +1,6 @@
 const {resolve} = require('path');
 const {execSync} = require('child_process');
+
 const {readFileSync} = require('fs-extra');
 const {Logger, Build, ShrinkRayAPI, Check} = require('@shopify/shrink-ray');
 

scripts/build.js

@@ -2,6 +2,7 @@
 
 const {execSync} = require('child_process');
 const {join, resolve: resolvePath} = require('path');
+
 const {ensureDirSync, writeFileSync, readFileSync} = require('fs-extra');
 const {rollup} = require('rollup');
 const {cp, mv, rm} = require('shelljs');

scripts/color-system-docs.js

@@ -1,10 +1,12 @@
 const {resolve: resolvePath} = require('path');
+
 const {writeFileSync} = require('fs-extra');
 const {
   config: roleVariants,
 } = require('@shopify/polaris-tokens/dist-modern/configs/base');
 const theme = require('@shopify/polaris-tokens/dist-modern/theme/base.json');
 const {colorFactory} = require('@shopify/polaris-tokens/dist-modern');
+
 const {
   rgbToHex,
   UNSTABLE_toCssCustomPropertySyntax: cssify,

scripts/new-version-pr-generator.js

@@ -2,12 +2,14 @@
 const {execSync} = require('child_process');
 const {readFileSync} = require('fs');
 const path = require('path');
+
 const {mkdir} = require('shelljs');
 const yaml = require('js-yaml');
 const semver = require('semver');
 
 const {version: PACKAGE_VERSION} = require('../package.json');
 const secrets = require('../secrets.json');
+
 const retry = require('./utilities/retry');
 
 const repositories = ['polaris-styleguide', 'web'];

scripts/readme-update-version.js

@@ -2,8 +2,11 @@
 
 const {resolve} = require('path');
 const {execSync} = require('child_process');
+
 const {writeFileSync, readFileSync} = require('fs-extra');
+
 const {version: newVersion} = require('../package.json');
+
 const {semverRegExp, readmes} = require('./utilities');
 
 const root = resolve(__dirname, '..');

scripts/splash/index.tsx

@@ -1,4 +1,5 @@
 import path from 'path';
+
 import React, {useState, useEffect} from 'react';
 import {Box, Text, Color, render} from 'ink';
 import sortBy from 'lodash/sortBy';

scripts/updateQuartiles.js

@@ -1,5 +1,6 @@
 /* eslint-disable no-console, babel/camelcase */
 const fs = require('fs');
+
 const Octokit = require('@octokit/rest');
 
 const LATEST_PR = new Date('2020-01-17T16:30:44Z');

sewing-kit.config.ts

@@ -1,4 +1,5 @@
 import {join} from 'path';
+
 import {ConfigurationCallback, Env, Plugins} from '@shopify/sewing-kit';
 
 const tests = join(__dirname, 'tests');

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

@@ -2,6 +2,7 @@ import React from 'react';
 // eslint-disable-next-line no-restricted-imports
 import {mountWithAppProvider} from 'test-utilities/legacy';
 import {Avatar, buttonFrom} from 'components';
+
 import {AccountConnection} from '../AccountConnection';
 
 describe('<AccountConnection />', () => {

src/components/ActionList/ActionList.scss

@@ -173,6 +173,7 @@ $item-vertical-padding: ($item-min-height - line-height(body)) / 2;
     color: color('ink', 'lightest');
     pointer-events: none;
 
+    // stylelint-disable-next-line selector-max-class
     .Image {
       @include recolor-icon(color('ink', 'lightest'), color('white'));
     }

src/components/ActionList/ActionList.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
+
 import {ActionListItemDescriptor, ActionListSection} from '../../types';
 import {useFeatures} from '../../utilities/features';
 import {classNames} from '../../utilities/css';
-import {Section} from './components';
 
+import {Section} from './components';
 import styles from './ActionList.scss';
 
 export interface ActionListProps {

src/components/ActionList/components/Item/Item.tsx

@@ -8,7 +8,6 @@ import {Icon} from '../../../Icon';
 import {UnstyledLink} from '../../../UnstyledLink';
 import {Badge} from '../../../Badge';
 import {TextStyle} from '../../../TextStyle';
-
 import styles from '../../ActionList.scss';
 
 export type ItemProps = ActionListItemDescriptor;

src/components/ActionList/components/Item/tests/Item.test.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
 import {mountWithApp} from 'test-utilities';
 import {UnstyledLink} from 'components';
+
 import {Item} from '../Item';
 import {TextStyle} from '../../../../TextStyle';
 

src/components/ActionList/components/Section/Section.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
+
 import {Item} from '../Item';
 import {ActionListItemDescriptor, ActionListSection} from '../../../../types';
-
 import styles from '../../ActionList.scss';
 
 export interface SectionProps {

src/components/ActionList/components/Section/tests/Section.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 // eslint-disable-next-line no-restricted-imports
 import {mountWithAppProvider} from 'test-utilities/legacy';
+
 import {Item} from '../../Item';
 import {Section} from '../Section';
 
@@ -68,12 +69,7 @@ describe('<Section />', () => {
       />,
     );
 
-    expect(
-      section
-        .find(Item)
-        .first()
-        .prop('content'),
-    ).toBe('Import file');
+    expect(section.find(Item).first().prop('content')).toBe('Import file');
   });
 
   it('passes helpText to Item', () => {
@@ -89,12 +85,7 @@ describe('<Section />', () => {
       />,
     );
 
-    expect(
-      section
-        .find(Item)
-        .first()
-        .prop('helpText'),
-    ).toBe('Foo');
+    expect(section.find(Item).first().prop('helpText')).toBe('Foo');
   });
 
   it('passes the onActionAnyItem callback to Item', () => {
@@ -112,10 +103,7 @@ describe('<Section />', () => {
       />,
     );
 
-    section
-      .find('Item button')
-      .first()
-      .simulate('click');
+    section.find('Item button').first().simulate('click');
 
     expect(spy).toHaveBeenCalledTimes(1);
   });

src/components/ActionList/tests/ActionList.test.tsx

@@ -3,6 +3,7 @@ import {ImportMinor, ExportMinor} from '@shopify/polaris-icons';
 // eslint-disable-next-line no-restricted-imports
 import {mountWithAppProvider} from 'test-utilities/legacy';
 import {mountWithApp} from 'test-utilities';
+
 import {ActionList} from '../ActionList';
 import {Badge} from '../../Badge';
 import {Item, Section} from '../components';
@@ -72,7 +73,7 @@ describe('<ActionList />', () => {
     });
   });
 
-  it('it passes actionRole to Section', () => {
+  it('passes actionRole to Section', () => {
     const actionList = mountWithAppProvider(
       <ActionList
         items={[{content: 'Add discount'}]}
@@ -125,7 +126,7 @@ describe('<ActionList />', () => {
     expect(actionList.find(Section).text()).toContain('File option');
   });
 
-  it('it renders an item with a badge', () => {
+  it('renders an item with a badge', () => {
     const actionList = mountWithAppProvider(
       <ActionList
         items={[