build(deps-dev): Bump typescript from 4.2.4 to 4.4.3 (#1548)

* build(deps-dev): Bump typescript from 4.2.4 to 4.4.3 Bumps [typescript](https://github.com/Microsoft/TypeScript) from 4.2.4 to 4.4.3. - [Release notes](https://github.com/Microsoft/TypeScript/releases) - [Commits](microsoft/TypeScript@v4.2.4...v4.4.3) --- updated-dependencies: - dependency-name: typescript dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <[email protected]> * build(deps-dev): Bump typescript from 4.2.4 to 4.4.3 Bumps [typescript](https://github.com/Microsoft/TypeScript) from 4.2.4 to 4.4.3. - [Release notes](https://github.com/Microsoft/TypeScript/releases) - [Commits](microsoft/TypeScript@v4.2.4...v4.4.3) --- updated-dependencies: - dependency-name: typescript dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <[email protected]> * Replace awesome ts loader * update yarn.lock Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Suzanne Rozier <[email protected]> Co-authored-by: Isaac Garfinkle <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
trussworks · Apr 20, 2022 · 23d9f96 · 23d9f96
1 parent 9919b7a
commit 23d9f96
Show file tree

Hide file tree

Showing 11 changed files with 90 additions and 64 deletions.
diff --git a/babel.config.js b/babel.config.js
@@ -1,6 +1,7 @@
 module.exports = {
   presets: [
-    ['@babel/preset-env', { targets: { node: 'current' } }, ],
-    '@babel/preset-react'
+    ['@babel/preset-env', { targets: { node: 'current' } }],
+    '@babel/preset-typescript',
+    '@babel/preset-react',
   ],
-}
+}
diff --git a/package.json b/package.json
@@ -68,6 +68,7 @@
   "devDependencies": {
     "@babel/core": "^7.10.5",
     "@babel/preset-react": "^7.10.4",
+    "@babel/preset-typescript": "^7.15.0",
     "@storybook/addon-a11y": "^6.4.20",
     "@storybook/addon-essentials": "^6.4.19",
     "@storybook/builder-webpack5": "^6.4.19",
@@ -88,7 +89,6 @@
     "@typescript-eslint/eslint-plugin": "^4.22.1",
     "@typescript-eslint/parser": "^4.22.1",
     "all-contributors-cli": "^6.20.0",
-    "awesome-typescript-loader": "^5.2.1",
     "babel-eslint": "^10.0.3",
     "babel-jest": "^27.0.2",
     "babel-loader": "^8.0.6",
@@ -106,6 +106,7 @@
     "eslint-plugin-react-hooks": "^4.0.0",
     "eslint-plugin-security": "^1.4.0",
     "focus-trap-react": "^8.8.1",
+    "fork-ts-checker-webpack-plugin": "^6.3.3",
     "happo-plugin-storybook": "^2.7.0",
     "happo.io": "^7.1.0",
     "husky": "^4.3.8",

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -92,7 +92,8 @@ export const Button = ({
       className={classes}
       onClick={onClick}
       data-testid="button"
-      {...defaultProps}>
+      {...defaultProps}
+    >
       {children}
     </button>
   )

diff --git a/src/components/Modal/Modal.stories.tsx b/src/components/Modal/Modal.stories.tsx
@@ -57,7 +57,8 @@ export const defaultModal = (): React.ReactElement => {
           ref={modalRef}
           id="example-modal-1"
           aria-labelledby="modal-1-heading"
-          aria-describedby="modal-1-description">
+          aria-describedby="modal-1-description"
+        >
           <ModalHeading id="modal-1-heading">
             Are you sure you want to continue?
           </ModalHeading>
@@ -75,7 +76,8 @@ export const defaultModal = (): React.ReactElement => {
                 modalRef={modalRef}
                 closer
                 unstyled
-                className="padding-105 text-center">
+                className="padding-105 text-center"
+              >
                 Go back
               </ModalToggleButton>
             </ButtonGroup>
@@ -99,7 +101,8 @@ export const largeModal = (): React.ReactElement => {
         isLarge
         aria-labelledby="modal-2-heading"
         aria-describedby="modal-2-description"
-        id="example-modal-2">
+        id="example-modal-2"
+      >
         <ModalHeading id="modal-2-heading">
           Are you sure you want to continue?
         </ModalHeading>
@@ -117,7 +120,8 @@ export const largeModal = (): React.ReactElement => {
               modalRef={modalRef}
               closer
               unstyled
-              className="padding-105 text-center">
+              className="padding-105 text-center"
+            >
               Go back
             </ModalToggleButton>
           </ButtonGroup>
@@ -140,7 +144,8 @@ export const forceActionModal = (): React.ReactElement => {
         forceAction
         aria-labelledby="modal-3-heading"
         aria-describedby="modal-3-description"
-        id="example-modal-3">
+        id="example-modal-3"
+      >
         <ModalHeading id="modal-3-heading">
           Your session will end soon.
         </ModalHeading>
@@ -160,7 +165,8 @@ export const forceActionModal = (): React.ReactElement => {
               modalRef={modalRef}
               closer
               unstyled
-              className="padding-105 text-center">
+              className="padding-105 text-center"
+            >
               Sign out
             </ModalToggleButton>
           </ButtonGroup>
@@ -182,7 +188,8 @@ export const customFocusElementModal = (): React.ReactElement => {
         ref={modalRef}
         id="example-modal-1"
         aria-labelledby="modal-1-heading"
-        aria-describedby="modal-1-description">
+        aria-describedby="modal-1-description"
+      >
         <ModalHeading id="modal-1-heading">
           Are you sure you want to continue?
         </ModalHeading>
@@ -204,7 +211,8 @@ export const customFocusElementModal = (): React.ReactElement => {
               modalRef={modalRef}
               closer
               unstyled
-              className="padding-105 text-center">
+              className="padding-105 text-center"
+            >
               Go back
             </ModalToggleButton>
           </ButtonGroup>

diff --git a/src/components/Modal/ModalToggleButton.tsx b/src/components/Modal/ModalToggleButton.tsx
@@ -53,7 +53,8 @@ export const ModalToggleButton = ({
       {...dataProps}
       type="button"
       aria-controls={modalRef?.current?.modalId}
-      onClick={handleClick}>
+      onClick={handleClick}
+    >
       {children}
     </Button>
   )

diff --git a/src/components/Modal/ModalWrapper/ModalWrapper.test.tsx b/src/components/Modal/ModalWrapper/ModalWrapper.test.tsx
@@ -10,7 +10,8 @@ describe('ModalWrapper component', () => {
         id="testModal"
         isVisible={false}
         forceAction={false}
-        handleClose={jest.fn()}>
+        handleClose={jest.fn()}
+      >
         children
       </ModalWrapper>
     )

diff --git a/src/components/Modal/OpenModal.stories.tsx b/src/components/Modal/OpenModal.stories.tsx
@@ -44,11 +44,13 @@ export const defaultModal = (
       handleClose={argTypes.handleClose}
       forceAction={false}
       aria-labelledby="modal-1-heading"
-      aria-describedby="modal-1-description">
+      aria-describedby="modal-1-description"
+    >
       <ModalWindow
         modalId="example-modal-1"
         tabIndex={-1}
-        handleClose={argTypes.handleClose}>
+        handleClose={argTypes.handleClose}
+      >
         <ModalHeading id="modal-1-heading">
           Are you sure you want to continue?
         </ModalHeading>
@@ -66,7 +68,8 @@ export const defaultModal = (
               type="button"
               onClick={argTypes.handleClose}
               unstyled
-              className="padding-105 text-center">
+              className="padding-105 text-center"
+            >
               Go back
             </Button>
           </ButtonGroup>
@@ -87,12 +90,14 @@ export const largeModal = (
       handleClose={argTypes.handleClose}
       forceAction={false}
       aria-labelledby="modal-2-heading"
-      aria-describedby="modal-2-description">
+      aria-describedby="modal-2-description"
+    >
       <ModalWindow
         isLarge
         modalId="example-modal-2"
         tabIndex={-1}
-        handleClose={argTypes.handleClose}>
+        handleClose={argTypes.handleClose}
+      >
         <ModalHeading id="modal-2-heading">
           Are you sure you want to continue?
         </ModalHeading>
@@ -110,7 +115,8 @@ export const largeModal = (
               type="button"
               onClick={argTypes.handleClose}
               unstyled
-              className="padding-105 text-center">
+              className="padding-105 text-center"
+            >
               Go back
             </Button>
           </ButtonGroup>
@@ -131,12 +137,14 @@ export const forceActionModal = (
       handleClose={argTypes.handleClose}
       forceAction={true}
       aria-labelledby="modal-3-heading"
-      aria-describedby="modal-3-description">
+      aria-describedby="modal-3-description"
+    >
       <ModalWindow
         forceAction
         modalId="example-modal-3"
         tabIndex={-1}
-        handleClose={argTypes.handleClose}>
+        handleClose={argTypes.handleClose}
+      >
         <ModalHeading id="modal-3-heading">
           Your session will end soon.
         </ModalHeading>
@@ -156,7 +164,8 @@ export const forceActionModal = (
               type="button"
               onClick={argTypes.handleClose}
               unstyled
-              className="padding-105 text-center">
+              className="padding-105 text-center"
+            >
               Sign out
             </Button>
           </ButtonGroup>

diff --git a/src/components/forms/Validation/Validation.stories.tsx b/src/components/forms/Validation/Validation.stories.tsx
@@ -61,7 +61,8 @@ export const Default = (): React.ReactElement => {
     <Form
       onSubmit={(): void => {
         console.log('submit')
-      }}>
+      }}
+    >
       <Fieldset legend="Enter a code" legendStyle="large">
         <Alert type="info" validation heading="Code Requirements">
           <ValidationChecklist id="validate-code">

diff --git a/src/stories/templates/documentation.stories.tsx b/src/stories/templates/documentation.stories.tsx
@@ -163,31 +163,36 @@ export const DocumentationPage = (): React.ReactElement => {
               <a
                 key="facebook"
                 className="usa-social-link usa-social-link--facebook"
-                href="javascript:void(0);">
+                href="javascript:void(0);"
+              >
                 <span>Facebook</span>
               </a>,
               <a
                 key="twitter"
                 className="usa-social-link usa-social-link--twitter"
-                href="javascript:void(0);">
+                href="javascript:void(0);"
+              >
                 <span>Twitter</span>
               </a>,
               <a
                 key="youtube"
                 className="usa-social-link usa-social-link--youtube"
-                href="javascript:void(0);">
+                href="javascript:void(0);"
+              >
                 <span>YouTube</span>
               </a>,
               <a
                 key="instagram"
                 className="usa-social-link usa-social-link--instagram"
-                href="#">
+                href="#"
+              >
                 <span>Instagram</span>
               </a>,
               <a
                 key="rss"
                 className="usa-social-link usa-social-link--rss"
-                href="javascript:void(0);">
+                href="javascript:void(0);"
+              >
                 <span>RSS</span>
               </a>,
             ]}
@@ -234,7 +239,8 @@ export const DocumentationPage = (): React.ReactElement => {
             aria-label="Primary navigation"
             items={primaryNavItems}
             onToggleMobileNav={toggleMobileNav}
-            mobileExpanded={mobileNavOpen}>
+            mobileExpanded={mobileNavOpen}
+          >
             <Search size="small" onSubmit={handleSearch} />
           </PrimaryNav>
         </div>
@@ -250,7 +256,8 @@ export const DocumentationPage = (): React.ReactElement => {
             </Grid>
             <main
               className="usa-layout-docs__main desktop:grid-col-9 usa-prose usa-layout-docs"
-              id="main-content">
+              id="main-content"
+            >
               <h1>Page heading (h1)</h1>
 
               <p className="usa-intro">

diff --git a/webpack.config.js b/webpack.config.js
@@ -1,5 +1,6 @@
 const path = require('path')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
 
 module.exports = {
   mode: 'production',
@@ -32,6 +33,7 @@ module.exports = {
       filename: '[name].css',
       chunkFilename: '[name].[id].css',
     }),
+    new ForkTsCheckerWebpackPlugin(),
   ],
   resolve: {
     extensions: ['.tsx', '.ts', '.jsx', '.js'],
@@ -42,18 +44,7 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.tsx?$/,
-        include: path.resolve(__dirname, 'src'),
-        use: {
-          loader: 'awesome-typescript-loader',
-          options: {
-            useBabel: true,
-            babelCore: '@babel/core',
-          },
-        },
-      },
-      {
-        test: /\.jsx?$/,
+        test: /\.(ts|js)x?$/,
         include: path.resolve(__dirname, 'src'),
         use: {
           loader: 'babel-loader',