chore(deps): upgrade Typescript to v5 (carbon-design-system#11119)

Closes carbon-design-system#11117

This upgrades Typescript to v5

**New**

- {{new thing}}

**Changed**

- `@carbon/web-components` and `@carbon/ibmdotcom-web-components` upgraded to Typescript 5

**Removed**

- {{removed thing}}

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "test: e2e": Codesandbox examples and e2e integration tests -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->

packages/carbon-web-components/package.json

@@ -203,7 +203,7 @@
     "through2": "^3.0.0",
     "ts-loader": "^6.0.0",
     "tsickle": "~0.46.0",
-    "typescript": "~4.8.0",
+    "typescript": "^5.2.2",
     "use-debounce": "^3.2.0",
     "web-component-analyzer": "1.2.0-next.0",
     "webpack": "^4.46.0",

packages/services-store/package.json

@@ -61,6 +61,6 @@
     "redux-mock-store": "^1.5.0",
     "strip-comments": "^1.0.0",
     "through2": "^3.0.0",
-    "typescript": "~4.8.0"
+    "typescript": "^5.2.2"
   }
 }

packages/web-components/.storybook/react/main.js

@@ -117,6 +117,9 @@ module.exports = {
   ],
   addons,
   framework: '@storybook/react',
+  typescript: {
+    reactDocgen: 'react-docgen-typescript-plugin',
+  },
   managerWebpack,
   webpackFinal(config, mode) {
     const massagedConfig = webpackFinal(config, mode);

packages/web-components/package.json

@@ -220,6 +220,7 @@
     "postcss-loader": "^3.0.0",
     "postcss-selector-parser": "^6.0.0",
     "prop-types": "^15.7.2",
+    "react-docgen-typescript-plugin": "^1.0.5",
     "read-pkg-up": "^7.0.0",
     "replace-ext": "^2.0.0",
     "rollup": "^2.55.1",
@@ -235,12 +236,9 @@
     "temp": "^0.9.0",
     "terser-webpack-plugin": "^4.2.3",
     "through2": "^3.0.0",
-    "typescript": "~4.8.0",
+    "typescript": "^5.2.2",
     "url-loader": "^4.1.1",
     "web-component-analyzer": "1.2.0-next.0",
     "webpack": "^4.46.0"
-  },
-  "peerDependencies": {
-    "typescript": "~4.8.0"
   }
 }

packages/web-components/src/components/callout-quote/__stories__/callout-quote.stories.react.tsx

@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * Copyright IBM Corp. 2020, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -39,16 +39,25 @@ const colorSchemeTypes = {
   [`${COLOR_SCHEME.CYAN}`]: COLOR_SCHEME.CYAN,
 };
 
-
-export const Default = args => {
-  const { copy, quoteMark, sourceHeading, sourceCopy, sourceBottomCopy, colorScheme } = args?.CalloutQuote ?? {};
+export const Default = (args) => {
+  const {
+    copy,
+    quoteMark,
+    sourceHeading,
+    sourceCopy,
+    sourceBottomCopy,
+    colorScheme,
+  } = args?.CalloutQuote ?? {};
   return (
     <C4DCalloutQuote mark-type={quoteMark} color-scheme={colorScheme}>
       {copy}
       <C4DQuoteSourceHeading>{sourceHeading}</C4DQuoteSourceHeading>
       <C4DQuoteSourceCopy>{sourceCopy}</C4DQuoteSourceCopy>
       <C4DQuoteSourceBottomCopy>{sourceBottomCopy}</C4DQuoteSourceBottomCopy>
-      <C4DCalloutLinkWithIcon slot="footer" href="https://example.com" cta-type="local">
+      <C4DCalloutLinkWithIcon
+        slot="footer"
+        href="https://example.com"
+        cta-type="local">
         Link with icon
       </C4DCalloutLinkWithIcon>
     </C4DCalloutQuote>
@@ -59,11 +68,27 @@ Default.story = {
   parameters: {
     knobs: {
       CalloutQuote: () => ({
-        copy: textNullable('Quote (copy):', 'Bringing together the technology and expertise for a new way to create'),
-        quoteMark: select('Quote Mark (markType):', quoteTypes, quoteTypes.doubleCurved),
-        sourceHeading: textNullable('Source heading (source-heading slot)', 'John Doe'),
-        sourceCopy: textNullable('Source copy (source-copy slot)', 'Senior Vice President'),
-        sourceBottomCopy: textNullable('Source bottom copy (source-bottom-copy slot)', 'IBM Cloud'),
+        copy: textNullable(
+          'Quote (copy):',
+          'Bringing together the technology and expertise for a new way to create'
+        ),
+        quoteMark: select(
+          'Quote Mark (markType):',
+          quoteTypes,
+          quoteTypes['double-curved']
+        ),
+        sourceHeading: textNullable(
+          'Source heading (source-heading slot)',
+          'John Doe'
+        ),
+        sourceCopy: textNullable(
+          'Source copy (source-copy slot)',
+          'Senior Vice President'
+        ),
+        sourceBottomCopy: textNullable(
+          'Source bottom copy (source-bottom-copy slot)',
+          'IBM Cloud'
+        ),
         colorScheme: select(
           'Color scheme:',
           colorSchemeTypes,

packages/web-components/src/components/callout-quote/__stories__/callout-quote.stories.ts

@@ -85,7 +85,7 @@ export default {
         quoteMark: select(
           'Quote Mark (markType):',
           quoteTypes,
-          quoteTypes.doubleCurved
+          quoteTypes['double-curved']
         ),
         sourceHeading: textNullable(
           'Source heading (source-heading slot)',

packages/web-components/src/components/quote/__stories__/quote.stories.react.tsx

@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * Copyright IBM Corp. 2020, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -66,7 +66,11 @@ Default.story = {
           'Quote (copy):',
           'Bringing together the technology and expertise for a new way to create'
         ),
-        quoteMark: select('Quote Mark (markType):', types, types.doubleCurved),
+        quoteMark: select(
+          'Quote Mark (markType):',
+          types,
+          types['double-curved']
+        ),
         sourceHeading: textNullable(
           'Source heading (source-heading slot)',
           'John Doe'

packages/web-components/src/components/quote/__stories__/quote.stories.ts

@@ -77,7 +77,11 @@ export default {
           'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus est purus, posuere at est vitae, ' +
             'ornare rhoncus sem. Suspendisse vitae tellus fermentum, hendrerit augue eu, placerat magna.'
         ),
-        quoteMark: select('Quote Mark (markType):', types, types.doubleCurved),
+        quoteMark: select(
+          'Quote Mark (markType):',
+          types,
+          types['double-curved']
+        ),
         sourceHeading: textNullable(
           'Source heading (source-heading slot)',
           'Lorem ipsum dolor sit amet'

yarn.lock

@@ -2694,7 +2694,7 @@ __metadata:
     redux-thunk: "npm:^2.3.0"
     strip-comments: "npm:^1.0.0"
     through2: "npm:^3.0.0"
-    typescript: "npm:~4.8.0"
+    typescript: "npm:^5.2.2"
     window-or-global: "npm:^1.0.1"
   languageName: unknown
   linkType: soft
@@ -2937,6 +2937,7 @@ __metadata:
     postcss-selector-parser: "npm:^6.0.0"
     prop-types: "npm:^15.7.2"
     react: "npm:^16.10.0 || ^17.0.0"
+    react-docgen-typescript-plugin: "npm:^1.0.5"
     react-dom: "npm:^16.10.0 || ^17.0.0"
     react-redux: "npm:^7.2.0"
     read-pkg-up: "npm:^7.0.0"
@@ -2957,14 +2958,12 @@ __metadata:
     temp: "npm:^0.9.0"
     terser-webpack-plugin: "npm:^4.2.3"
     through2: "npm:^3.0.0"
-    typescript: "npm:~4.8.0"
+    typescript: "npm:^5.2.2"
     url-loader: "npm:^4.1.1"
     web-component-analyzer: "npm:1.2.0-next.0"
     webpack: "npm:^4.46.0"
     wicg-inert: "npm:^3.1.2"
     window-or-global: "npm:^1.0.1"
-  peerDependencies:
-    typescript: ~4.8.0
   dependenciesMeta:
     "@carbon/icons-react":
       optional: true
@@ -3373,7 +3372,7 @@ __metadata:
     through2: "npm:^3.0.0"
     ts-loader: "npm:^6.0.0"
     tsickle: "npm:~0.46.0"
-    typescript: "npm:~4.8.0"
+    typescript: "npm:^5.2.2"
     use-debounce: "npm:^3.2.0"
     web-component-analyzer: "npm:1.2.0-next.0"
     webpack: "npm:^4.46.0"
@@ -28129,7 +28128,25 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-docgen-typescript@npm:^2.1.1":
+"react-docgen-typescript-plugin@npm:^1.0.5":
+  version: 1.0.5
+  resolution: "react-docgen-typescript-plugin@npm:1.0.5"
+  dependencies:
+    debug: "npm:^4.1.1"
+    endent: "npm:^2.0.1"
+    find-cache-dir: "npm:^3.3.1"
+    flat-cache: "npm:^3.0.4"
+    micromatch: "npm:^4.0.2"
+    react-docgen-typescript: "npm:^2.2.2"
+    tslib: "npm:^2.0.0"
+  peerDependencies:
+    typescript: ">= 4.x"
+    webpack: ">= 4"
+  checksum: dcba36aca20d88ae58761b762a07796a7bf4feb242f0c2cbd6c30ac49ea4f28abbac8631556b97b805079d36e5b795d73f6fbcf3c470c0b61c8d687a0d9037f8
+  languageName: node
+  linkType: hard
+
+"react-docgen-typescript@npm:^2.1.1, react-docgen-typescript@npm:^2.2.2":
   version: 2.2.2
   resolution: "react-docgen-typescript@npm:2.2.2"
   peerDependencies:
@@ -33018,13 +33035,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript@npm:~4.8.0":
-  version: 4.8.4
-  resolution: "typescript@npm:4.8.4"
+"typescript@npm:^5.2.2":
+  version: 5.2.2
+  resolution: "typescript@npm:5.2.2"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: f985d8dd6ae815753d61cb81e434f3a4a5796ac52e423370fca6ad11bcd188df4013d82e3ba3b88c9746745b9341390ba68f862dc9d30bac6465e0699f2a795b
+  checksum: d65e50eb849bd21ff8677e5b9447f9c6e74777e346afd67754934264dcbf4bd59e7d2473f6062d9a015d66bd573311166357e3eb07fea0b52859cf9bb2b58555
   languageName: node
   linkType: hard
 
@@ -33048,13 +33065,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript@patch:typescript@npm%3A~4.8.0#optional!builtin<compat/typescript>":
-  version: 4.8.4
-  resolution: "typescript@patch:typescript@npm%3A4.8.4#optional!builtin<compat/typescript>::version=4.8.4&hash=1a91c8"
+"typescript@patch:typescript@npm%3A^5.2.2#optional!builtin<compat/typescript>":
+  version: 5.2.2
+  resolution: "typescript@patch:typescript@npm%3A5.2.2#optional!builtin<compat/typescript>::version=5.2.2&hash=f3b441"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: 5d81fd8cf5152091a0c0b84ebc868de8433583072a340c4899e0fc7ad6a80314b880a1466868c9a6a1f640c3d1f2fe7f41f8c541b99d78c8b414263dfa27eba3
+  checksum: f79cc2ba802c94c2b78dbb00d767a10adb67368ae764709737dc277273ec148aa4558033a03ce901406b35fddf4eac46dabc94a1e1d12d2587e2b9cfe5707b4a
   languageName: node
   linkType: hard