chore: update to TypeScript v4.9 (#2878)

* chore: update typescript to v4.9 * chore: update prettier * chore: update typescript-eslint * chore: update eslint to v8 * chore: remove unused deps and bump netlify * chore: bump esbuild * fix: set esbuild to v0.15 * chore: add changeset Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
twilio-labs · Dec 14, 2022 · c396134 · c396134
1 parent cd4ddf6
commit c396134
Show file tree

Hide file tree

Showing 26 changed files with 2,922 additions and 1,653 deletions.
diff --git a/.changeset/bright-falcons-know.md b/.changeset/bright-falcons-know.md
@@ -0,0 +1,9 @@
+---
+'@twilio-paste/checkbox': patch
+'@twilio-paste/menu': patch
+'@twilio-paste/grid': patch
+'@twilio-paste/theme': patch
+'@twilio-paste/core': patch
+---
+
+Update to TypeScript v4.9
diff --git a/apps/vs-code-intellisense/package.json b/apps/vs-code-intellisense/package.json
@@ -62,6 +62,6 @@
     "eslint": "^8.18.0",
     "glob": "^8.0.3",
     "mocha": "^10.0.0",
-    "typescript": "^4.6.4"
+    "typescript": "^4.9.4"
   }
 }
diff --git a/package.json b/package.json
@@ -143,7 +143,7 @@
     "@types/browser-sync": "^2.26.1",
     "@types/color": "^3.0.0",
     "@types/jest": "^24.0.18",
-    "@types/node": "^17.0.33",
+    "@types/node": "^18.11.13",
     "@types/react": "^17.0.31",
     "@types/react-color": "^3.0.6",
     "@types/react-github-button": "^0.1.1",
@@ -153,27 +153,25 @@
     "@types/theo": "^8.1.3",
     "@types/webpack": "^4.4.34",
     "@types/webpack-env": "^1.13.9",
-    "@typescript-eslint/eslint-plugin": "^5.17.0",
-    "@typescript-eslint/parser": "^5.17.0",
+    "@typescript-eslint/eslint-plugin": "^5.46.0",
+    "@typescript-eslint/parser": "^5.46.0",
     "axe-playwright": "^1.1.11",
     "babel-loader": "^9.1.0",
     "babel-plugin-macros": "^3.1.0",
     "babel-preset-gatsby": "^2.11.1",
     "browser-sync": "^2.26.9",
-    "chalk": "2.4.2",
+    "chalk": "4.1.2",
     "chromatic": "^5.5.0",
     "chrome-aws-lambda": "^10.0.0",
     "color": "^3.1.2",
     "commander": "^2.20.0",
-    "concurrently": "^4.1.1",
-    "cross-env": "^5.2.0",
+    "concurrently": "^7.6.0",
     "csstype": "3.0.11",
     "cypress": "10.8.0",
     "danger": "^10.6.6",
-    "del": "^5.1.0",
     "dotenv": "^16.0.0",
-    "esbuild": "^0.14.43",
-    "eslint": "^7.32.0",
+    "esbuild": "^0.15.18",
+    "eslint": "^8.29.0",
     "eslint-config-prettier": "8.5.0",
     "eslint-config-twilio-react": "2.0.0",
     "eslint-config-twilio-ts": "2.0.0",
@@ -200,20 +198,18 @@
     "lerna": "^4.0.0",
     "lodash": "4.17.21",
     "lorem-ipsum": "^2.0.3",
-    "netlify-cli": "^6.13.1",
+    "netlify-cli": "^12.2.10",
     "playwright": "^1.28.1",
     "plop": "^2.7.4",
-    "plugin-error": "^1.0.1",
     "precise-commits": "^1.0.2",
-    "prettier": "^2.2.1",
+    "prettier": "^2.8.1",
     "prop-types": "^15.7.2",
     "puppeteer-core": "^10.1.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-ga": "^3.3.0",
     "react-helmet": "^6.1.0",
     "react-router-dom": "6.2.1",
-    "regenerator-runtime": "^0.13.3",
     "search-in-file": "^1.2.2",
     "shelljs": "^0.8.3",
     "start-server-and-test": "^1.11.5",
@@ -224,9 +220,8 @@
     "tslib": "^2.0.3",
     "turbo": "^1.2.16",
     "typedoc": "^0.20.12",
-    "typescript": "^4.6.4",
+    "typescript": "^4.9.4",
     "ui-box": "^5.4.0",
-    "weak-napi": "^2.0.2",
     "webpack": "^5.70.0"
   },
   "resolutions": {

diff --git a/packages/paste-codemods/package.json b/packages/paste-codemods/package.json
@@ -13,7 +13,7 @@
     "build": "ts-node ./tools/create-package-mappings.ts"
   },
   "dependencies": {
-    "chalk": "2.4.2",
+    "chalk": "4.1.2",
     "execa": "3.2.0",
     "globby": "10.0.1",
     "inquirer": "7.0.0",

diff --git a/packages/paste-core/components/button/package.json b/packages/paste-core/components/button/package.json
@@ -60,6 +60,6 @@
     "prop-types": "^15.7.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "typescript": "^4.6.4"
+    "typescript": "^4.9.4"
   }
 }
diff --git a/packages/paste-core/components/button/stories/index.stories.tsx b/packages/paste-core/components/button/stories/index.stories.tsx
@@ -73,34 +73,38 @@ const AllSizeOptions: React.FC<{variant: ButtonVariants}> = ({variant}) => {
             </Button>
           </Stack>
         </Box>
-        {size !== 'icon' && size !== 'icon_small' && size !== 'reset' && size !== 'circle' && size !== 'circle_small' && (
-          <Box key={`variant-${variant}-${size}`} marginBottom="space40" padding="space30">
-            <Stack orientation="vertical" spacing="space40">
-              <Button variant={variant as ButtonVariants} size={size as ButtonSizes} fullWidth>
-                {children}
-              </Button>
-              <Button variant={variant as ButtonVariants} size={size as ButtonSizes} fullWidth>
-                <PlusIcon title="Add item to cart" decorative={false} />
-                {children}
-              </Button>
-              <Button variant={variant as ButtonVariants} size={size as ButtonSizes} fullWidth>
-                {children}
-                <PlusIcon title="Add item to cart" decorative={false} />
-              </Button>
-              <Button
-                variant={variant as ButtonVariants}
-                size={size as ButtonSizes}
-                fullWidth
-                loading={!isRenderingOnServer}
-              >
-                {children}
-              </Button>
-              <Button variant={variant as ButtonVariants} size={size as ButtonSizes} fullWidth disabled>
-                {children}
-              </Button>
-            </Stack>
-          </Box>
-        )}
+        {size !== 'icon' &&
+          size !== 'icon_small' &&
+          size !== 'reset' &&
+          size !== 'circle' &&
+          size !== 'circle_small' && (
+            <Box key={`variant-${variant}-${size}`} marginBottom="space40" padding="space30">
+              <Stack orientation="vertical" spacing="space40">
+                <Button variant={variant as ButtonVariants} size={size as ButtonSizes} fullWidth>
+                  {children}
+                </Button>
+                <Button variant={variant as ButtonVariants} size={size as ButtonSizes} fullWidth>
+                  <PlusIcon title="Add item to cart" decorative={false} />
+                  {children}
+                </Button>
+                <Button variant={variant as ButtonVariants} size={size as ButtonSizes} fullWidth>
+                  {children}
+                  <PlusIcon title="Add item to cart" decorative={false} />
+                </Button>
+                <Button
+                  variant={variant as ButtonVariants}
+                  size={size as ButtonSizes}
+                  fullWidth
+                  loading={!isRenderingOnServer}
+                >
+                  {children}
+                </Button>
+                <Button variant={variant as ButtonVariants} size={size as ButtonSizes} fullWidth disabled>
+                  {children}
+                </Button>
+              </Stack>
+            </Box>
+          )}
       </>
     );
   });

diff --git a/packages/paste-core/components/chat-composer/package.json b/packages/paste-core/components/chat-composer/package.json
@@ -54,6 +54,6 @@
     "prop-types": "^15.7.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "typescript": "^4.6.4"
+    "typescript": "^4.9.4"
   }
 }
diff --git a/packages/paste-core/components/checkbox/src/CheckboxGroup.tsx b/packages/paste-core/components/checkbox/src/CheckboxGroup.tsx
@@ -3,6 +3,7 @@ import * as PropTypes from 'prop-types';
 import {InlineControlGroup} from '@twilio-paste/inline-control-group';
 import type {InlineControlGroupProps} from '@twilio-paste/inline-control-group';
 
+import type {CheckboxProps} from './Checkbox';
 import {CheckboxContext} from './CheckboxContext';
 
 export interface CheckboxGroupProps extends InlineControlGroupProps {
@@ -60,7 +61,7 @@ const CheckboxGroup = React.forwardRef<HTMLFieldSetElement, CheckboxGroupProps>(
         >
           {React.Children.map(children, (child, index) => {
             return React.isValidElement(child)
-              ? React.cloneElement(child, {
+              ? React.cloneElement(child as React.ReactElement<CheckboxProps>, {
                   isSelectAll: isSelectAll && index === 0,
                   isSelectAllChild: isSelectAll && orientation === 'vertical' && index !== 0,
                 })

diff --git a/packages/paste-core/components/code-block/package.json b/packages/paste-core/components/code-block/package.json
@@ -65,6 +65,6 @@
     "prop-types": "^15.7.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "typescript": "^4.6.4"
+    "typescript": "^4.9.4"
   }
 }
diff --git a/packages/paste-core/components/combobox/package.json b/packages/paste-core/components/combobox/package.json
@@ -83,6 +83,6 @@
     "prop-types": "^15.7.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "typescript": "^4.6.4"
+    "typescript": "^4.9.4"
   }
 }
diff --git a/packages/paste-core/components/display-heading/package.json b/packages/paste-core/components/display-heading/package.json
@@ -51,6 +51,6 @@
     "prop-types": "^15.7.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "typescript": "^4.6.4"
+    "typescript": "^4.9.4"
   }
 }
diff --git a/packages/paste-core/components/in-page-navigation/package.json b/packages/paste-core/components/in-page-navigation/package.json
@@ -55,6 +55,6 @@
     "prop-types": "^15.7.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "typescript": "^4.6.4"
+    "typescript": "^4.9.4"
   }
 }
diff --git a/packages/paste-core/components/menu/src/MenuGroup.tsx b/packages/paste-core/components/menu/src/MenuGroup.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import {safelySpreadBoxProps, Box} from '@twilio-paste/box';
+import type {GenericIconProps} from '@twilio-paste/icons/src/types';
 import {Text} from '@twilio-paste/text';
 
 import {MenuItemVariants} from './constants';
@@ -22,7 +23,7 @@ const MenuGroup = React.forwardRef<HTMLDivElement, MenuGroupProps>(
           <Box display="flex" alignItems="center" paddingX="space70" paddingY="space30" cursor="default">
             {React.isValidElement(icon) ? (
               <Box flexShrink={0} size="sizeIcon30">
-                {React.cloneElement(icon, {color: 'colorTextIcon'})}
+                {React.cloneElement(icon as React.ReactElement<GenericIconProps>, {color: 'colorTextIcon'})}
               </Box>
             ) : null}
             <Text

diff --git a/packages/paste-core/layout/grid/src/Grid.tsx b/packages/paste-core/layout/grid/src/Grid.tsx
@@ -4,7 +4,7 @@ import type {MarginProps, Space} from '@twilio-paste/style-props';
 import {ResponsiveProp} from '@twilio-paste/style-props';
 import {Box, safelySpreadBoxProps} from '@twilio-paste/box';
 
-import type {GridProps} from './types';
+import type {ColumnProps, GridProps} from './types';
 import {getOuterGutterPull, getSpacing, getResponsiveSpacing} from './utils';
 
 export const getGutterStyles = (
@@ -48,7 +48,7 @@ const Grid = React.forwardRef<HTMLDivElement, GridProps>(
       () =>
         React.Children.map(children, (child) =>
           React.isValidElement(child)
-            ? React.cloneElement(child, {
+            ? React.cloneElement(child as React.ReactElement<ColumnProps>, {
                 count: React.Children.count(children),
                 gutter,
                 vertical,

diff --git a/packages/paste-core/primitives/box/package.json b/packages/paste-core/primitives/box/package.json
@@ -50,6 +50,6 @@
     "prop-types": "^15.7.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "typescript": "^4.6.4"
+    "typescript": "^4.9.4"
   }
 }
diff --git a/packages/paste-nextjs-template/package.json b/packages/paste-nextjs-template/package.json
@@ -18,9 +18,9 @@
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
-    "@types/node": "^17.0.33",
-    "eslint": "^7.32.0",
-    "typescript": "^4.6.4"
+    "@types/node": "^18.11.13",
+    "eslint": "^8.29.0",
+    "typescript": "^4.9.4"
   },
   "resolutions": {
     "@types/react": "^17.0.31"

diff --git a/packages/paste-theme-designer/package.json b/packages/paste-theme-designer/package.json
@@ -20,6 +20,6 @@
     "react-color": "^2.19.3"
   },
   "devDependencies": {
-    "netlify-cli": "^6.13.1"
+    "netlify-cli": "^12.2.10"
   }
 }
diff --git a/packages/paste-theme/package.json b/packages/paste-theme/package.json
@@ -40,6 +40,6 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-helmet": "^6.1.0",
-    "typescript": "^4.6.4"
+    "typescript": "^4.9.4"
   }
 }