Add support for Typescript to carbon/react (#12222)

* refactor: add build support for TS

* refactor: convert Checkbox and Text to typescript

* refactor: add ts extensions to jest

* refactor: add ts extensions to jsTransform.js

* refactor: add type exports to barrels

* refactor: do not convert TextDirectionContext to TS

* chore: add comment

* refactor: update Text with context

* refactor: use @type jsdoc assertion

* refactor: fix build and turn off explicit any rule

* chore: yarn dedup

* chore: run install withh yarn 3.2.4

config/eslint-config-carbon/plugins/react.js

@@ -44,6 +44,25 @@ module.exports = {
     ],
   },
   overrides: [
+    {
+      files: ['*.ts', '*.tsx'],
+      plugins: ['@typescript-eslint'],
+      extends: ['plugin:@typescript-eslint/recommended'],
+      parser: '@typescript-eslint/parser',
+      rules: {
+        'no-unused-vars': 'off', // Disabled in favor of @typescript-eslint/no-unused-vars
+        '@typescript-eslint/no-unused-vars': [
+          'error',
+          {
+            args: 'after-used',
+            argsIgnorePattern: '^_',
+            varsIgnorePattern: '^_',
+          },
+        ],
+        '@typescript-eslint/no-empty-function': 'off', // Disabled to support default empty functions used in PropTypes
+        '@typescript-eslint/no-explicit-any': 'off', // TODO: Enable once stricter typings of internal utilities are supported
+      },
+    },
     // Sometimes we'll want to define a quick component in a story to use as a
     // wrapper for a component we're documenting. For example:
     //

config/jest-config-carbon/index.js

@@ -8,7 +8,7 @@
 'use strict';
 
 module.exports = {
-  moduleFileExtensions: ['js', 'json', 'node'],
+  moduleFileExtensions: ['tsx', 'ts', 'js', 'json', 'node'],
   moduleNameMapper: {
     // This mapping is the result of updating to Jest 28. We currently require
     // this as the version of uuid that gets resolved is ESM but we would like
@@ -27,9 +27,11 @@ module.exports = {
     '<rootDir>/**/*-(spec|test).js?(x)',
   ],
   transform: {
-    '^.+\\.(mjs|cjs|js|jsx)$': require.resolve('./transform/jsTransform.js'),
+    '^.+\\.(mjs|cjs|js|jsx|ts|tsx)$': require.resolve(
+      './transform/jsTransform.js'
+    ),
     '^.+\\.s?css$': require.resolve('./transform/cssTransform.js'),
-    '^(?!.*\\.(js|jsx|css|json)$)': require.resolve(
+    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': require.resolve(
       './transform/fileTransform.js'
     ),
   },

config/jest-config-carbon/transform/jsTransform.js

@@ -21,6 +21,7 @@ const babelOptions = {
       },
     ],
     '@babel/preset-react',
+    '@babel/preset-typescript',
   ],
   plugins: [
     '@babel/plugin-proposal-class-properties',

package.json

@@ -29,6 +29,8 @@
     "postinstall": "husky install"
   },
   "resolutions": {
+    "@types/react": "~17.0.2",
+    "@types/prop-types": "15.7.4",
     "ast-types": "^0.14.0",
     "node-sass": "^6.0.0",
     "react": "~17.0.2",

packages/react/.gitignore

@@ -6,4 +6,7 @@ react-docgen.json
 
 # Cypress artifacts
 cypress/videos
-cypress/screenshots
+cypress/screenshots
+
+# Typescript
+tsconfig.tsbuildinfo

packages/react/.storybook/.babelrc.js

@@ -8,5 +8,5 @@
 'use strict';
 
 module.exports = {
-  presets: ['babel-preset-carbon'],
+  presets: ['babel-preset-carbon', '@babel/preset-typescript'],
 };

packages/react/.storybook/main.js

@@ -92,6 +92,9 @@ module.exports = {
   },
   framework: '@storybook/react',
   stories,
+  typescript: {
+    reactDocgen: 'react-docgen', // Favor docgen from prop-types instead of TS interfaces
+  },
   webpack(config) {
     const babelLoader = config.module.rules.find((rule) => {
       return rule.use.some(({ loader }) => {

packages/react/package.json

@@ -77,6 +77,7 @@
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^21.0.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
+    "@rollup/plugin-typescript": "^8.5.0",
     "@storybook/addon-a11y": "^6.5.6",
     "@storybook/addon-actions": "^6.5.6",
     "@storybook/addon-docs": "^6.5.6",
@@ -88,6 +89,8 @@
     "@storybook/manager-webpack5": "^6.5.6",
     "@storybook/react": "^6.5.6",
     "@storybook/theming": "^6.5.6",
+    "@typescript-eslint/eslint-plugin": "^5.38.1",
+    "@typescript-eslint/parser": "^5.38.1",
     "autoprefixer": "^10.4.0",
     "babel-loader": "^8.2.3",
     "babel-plugin-dev-expression": "^0.2.3",
@@ -117,6 +120,7 @@
     "storybook-readme": "^5.0.9",
     "stream-browserify": "^3.0.0",
     "style-loader": "^3.3.1",
+    "typescript": "^4.8.4",
     "webpack": "^5.65.0",
     "webpack-dev-server": "^4.7.4"
   },

packages/react/src/components/Checkbox/Checkbox.Skeleton.js → packages/react/src/components/Checkbox/Checkbox.Skeleton.tsx

@@ -6,11 +6,14 @@
  */
 
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { HTMLAttributes } from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix';
 
-const CheckboxSkeleton = ({ className, ...rest }) => {
+const CheckboxSkeleton = ({
+  className,
+  ...rest
+}: HTMLAttributes<HTMLDivElement>) => {
   const prefix = usePrefix();
   return (
     <div