initial ts setup. changed pages/*.js to pages/*.tsx (#1792)

Author: billy-le

.eslintrc.js

@@ -9,6 +9,7 @@ module.exports = {
     'plugin:jest/recommended',
     'plugin:cypress/recommended',
     'plugin:storybook/recommended',
+    'plugin:@typescript-eslint/eslint-recommended',
   ],
   env: {
     browser: true,
@@ -27,12 +28,58 @@ module.exports = {
     '@operation_code/custom-rules',
     'import',
     'lodash',
+    '@typescript-eslint',
   ],
   globals: {
     cy: true,
     Cypress: true,
   },
   overrides: [
+    {
+      files: ['./**/*.ts', './**/*.tsx'],
+      parser: '@typescript-eslint/parser',
+      parserOptions: {
+        project: true,
+      },
+      extends: ['plugin:@typescript-eslint/strict', 'plugin:@typescript-eslint/stylistic'],
+      rules: {
+        'react/no-array-index-key': 'off',
+        'react/require-default-props': 'off',
+
+        // Typescript Rules
+        // custom rules for typescript-eslint: https://github.com/OperationCode/front-end/pull/1792#pullrequestreview-1874516174
+        '@typescript-eslint/consistent-type-imports': ['error', { prefer: 'no-type-imports' }],
+        '@typescript-eslint/explicit-module-boundary-types': 'off',
+        '@typescript-eslint/naming-convention': [
+          'error',
+          {
+            selector: 'variable',
+            types: ['boolean'],
+            format: ['PascalCase', 'UPPER_CASE'],
+            prefix: [
+              'is',
+              'was',
+              'should',
+              'has',
+              'can',
+              'did',
+              'will',
+              'IS_',
+              'WAS_',
+              'SHOULD_',
+              'HAS_',
+              'CAN_',
+              'DID_',
+              'WILL_',
+            ],
+          },
+        ],
+        '@typescript-eslint/no-empty-interface': ['error', { allowSingleExtends: true }],
+        '@typescript-eslint/no-explicit-any': 'error',
+        '@typescript-eslint/no-unused-vars': ['error', { vars: 'all', varsIgnorePattern: '_' }],
+        '@typescript-eslint/unbound-method': 'off', // gives false negatives in arrow funcs
+      },
+    },
     {
       files: ['cypress/**/*.js'],
       rules: {
@@ -128,7 +175,7 @@ module.exports = {
     ],
     'react/forbid-prop-types': ['error', { forbid: ['any'] }],
     'react/jsx-curly-brace-presence': ['error', { props: 'never', children: 'never' }],
-    'react/jsx-filename-extension': ['error', { extensions: ['.js'] }],
+    'react/jsx-filename-extension': ['error', { extensions: ['.js', '.tsx'] }],
     'react/jsx-max-props-per-line': ['error', { maximum: 1, when: 'multiline' }],
     'react/jsx-no-target-blank': 'off', // browsers protect against this vulnerability now
     'react/jsx-no-useless-fragment': ['error', { allowExpressions: true }],
@@ -197,4 +244,6 @@ module.exports = {
     ],
     'no-use-before-define': 'off',
   },
+
+  root: true,
 };

components/Cards/Card/Card.js

@@ -13,14 +13,14 @@ Card.defaultProps = {
   hasAnimationOnHover: false,
 };
 
-function Card({ children, className, hasAnimationOnHover, ...props }) {
+function Card({ children, className, ...props }) {
   const customDataAttributes = getDataAttributes(props);
 
   return (
     <article
       className={twMerge(
         'items-center bg-white [&_svg]:fill-themeSecondary text-themeSecondary flex flex-col flex-nowrap justify-around m-4 min-h-[100px] min-w-[100px] p-6 shadow-md focus-visible:outline-none',
-        hasAnimationOnHover &&
+        props.hasAnimationOnHover &&
           'shadow-sm transition-shadow duration-200 ease-linear hover:shadow-lg focus-visible:shadow-lg',
         className,
       )}

components/Container/Container.js

@@ -21,15 +21,8 @@ Container.defaultProps = {
   theme: 'secondary',
 };
 
-function Container({
-  backgroundImageSource,
-  children,
-  className,
-  id,
-  isFullViewportHeight,
-  theme,
-  ...props
-}) {
+function Container(props) {
+  const { backgroundImageSource, children, className, id, isFullViewportHeight, theme } = props;
   // See https://css-tricks.com/tinted-images-multiple-backgrounds/ for explanation
   const darkOverlay = 'linear-gradient(rgba(33, 48, 69, 0.65),rgba(33, 48, 69, 0.65))';
   const dynamicBackgroundImage = backgroundImageSource

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

next.config.js

@@ -1,3 +1,4 @@
+// @ts-check
 const hasBundleAnalyzer = process.env.ANALYZE === 'true';
 const { withSentryConfig } = require('@sentry/nextjs');
 const withBundleAnalyzer = require('@next/bundle-analyzer')({ enabled: hasBundleAnalyzer });
@@ -127,10 +128,14 @@ const nextConfig = {
  * The name of the function type is `normalizeConfig` in `next/dist/server/config-shared`,
  * but JSDoc type imports can't read it.
  *
- * @type {(phase: string, config: import('next').NextConfig) => Promise<import('next').NextConfig>)}
+ * @type {(phase: string, config: import('next').NextConfig) => Promise<import('next').NextConfig>}
  */
-module.exports = (phase, defaultConfig) => {
+module.exports = async (phase, defaultConfig) => {
   const plugins = [
+    /**
+     *
+     * @type {(config: import('next').NextConfig) => any}
+     */
     config => withSentryConfig(config, sentryWebpackPluginOptions),
     withBundleAnalyzer,
   ];

package.json

@@ -100,6 +100,17 @@
     "@testing-library/cypress": "^8.0.3",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.1.5",
+    "@types/fingerprintjs2": "2",
+    "@types/fontfaceobserver": "^2.1.3",
+    "@types/lodash": "^4.14.202",
+    "@types/logrocket-react": "^3.0.3",
+    "@types/object-hash": "^3.0.0",
+    "@types/prop-types": "^15.7.11",
+    "@types/react": "^18.2.55",
+    "@types/react-dom": "^18.2.19",
+    "@types/react-select": "^4.0.18",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
     "autoprefixer": "^10.4.15",
     "axios-mock-adapter": "^1.21.1",
     "babel-jest": "^28.1.3",
@@ -114,7 +125,7 @@
     "css-loader": "^6.7.1",
     "cypress": "^10.3.1",
     "cypress-image-snapshot": "^4.0.1",
-    "eslint": "^8.24.0",
+    "eslint": "^8.56.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-cypress": "^2.12.1",
@@ -154,6 +165,7 @@
     "stylelint-config-standard": "^26.0.0",
     "stylelint-prettier": "^2.0.0",
     "tailwindcss": "^3.3.3",
+    "typescript": "^5.3.3",
     "url-loader": "^4.1.1",
     "webpack": "^5.73.0"
   },

pages/404.js renamed to pages/404.tsx

@@ -1,11 +1,8 @@
-/* eslint-disable max-classes-per-file */
-
 // Polyfills
 import 'intersection-observer';
 
-import { useEffect } from 'react';
+import { useEffect, PropsWithChildren } from 'react';
 import * as Sentry from '@sentry/nextjs';
-import { node } from 'prop-types';
 import Router from 'next/router';
 import Fingerprint2 from 'fingerprintjs2';
 import FontFaceObserver from 'fontfaceobserver';
@@ -18,6 +15,8 @@ import { gtag } from 'common/utils/thirdParty/gtag';
 import Nav from 'components/Nav/Nav';
 import Footer from 'components/Footer/Footer';
 import 'common/styles/globals.css';
+import { AppProps } from 'next/app';
+import NextErrorComponent from 'next/error';
 
 const isProduction = process.env.NODE_ENV === 'production';
 
@@ -34,11 +33,7 @@ const fonts = [
   },
 ];
 
-Layout.propTypes = {
-  children: node.isRequired,
-};
-
-function Layout({ children }) {
+function Layout({ children }: PropsWithChildren<unknown>) {
   return (
     <div>
       <Nav />
@@ -65,16 +60,15 @@ if (!isProduction) {
   Router.events.on('routeChangeComplete', () => {
     const path = '/_next/static/chunks/styles.chunk.module.css';
     const chunksSelector = `link[href*="${path}"]:not([rel=preload])`;
-    const chunksNodes = document.querySelectorAll(chunksSelector);
+    const chunksNodes: NodeListOf<HTMLAnchorElement> = document.querySelectorAll(chunksSelector);
     if (chunksNodes.length) {
       const timestamp = new Date().valueOf();
       chunksNodes[0].href = `${path}?ts=${timestamp}`;
     }
   });
 }
 
-// eslint-disable-next-line react/prop-types
-const App = ({ Component, pageProps, err }) => {
+const App = ({ Component, pageProps, err }: AppProps & { err: NextErrorComponent }) => {
   useEffect(() => {
     /* Analytics */
     // TODO: Leverage prod-build-time-only env vars instead of window check
@@ -91,7 +85,7 @@ const App = ({ Component, pageProps, err }) => {
       setupLogRocketReact(LogRocket);
 
       // Per library docs, Fingerprint2 should not run immediately
-      if (window.requestIdleCallback) {
+      if ('requestIdleCallback' in window) {
         requestIdleCallback(setLogRocketFingerprint);
       } else {
         setTimeout(setLogRocketFingerprint, 500);
@@ -103,7 +97,7 @@ const App = ({ Component, pageProps, err }) => {
       if (font.url) {
         const link = document.createElement('link');
         link.href = font.url;
-        link.rel = 'stylesheet'; // eslint-disable-line unicorn/prevent-abbreviations
+        link.rel = 'stylesheet';
         document.head.append(link);
       }
 

pages/_app.js renamed to pages/_app.tsx

@@ -1,8 +1,8 @@
-import Document, { Html, Head, Main, NextScript } from 'next/document';
+import Document, { Html, Head, Main, NextScript, DocumentContext } from 'next/document';
 import { clientTokens } from 'common/config/environment';
 
 export default class MyDocument extends Document {
-  static async getInitialProps(ctx) {
+  static async getInitialProps(ctx: DocumentContext) {
     const initialProps = await Document.getInitialProps(ctx);
 
     return initialProps;
@@ -32,7 +32,6 @@ export default class MyDocument extends Document {
           )}
           {process.env.VERCEL_ENV === 'production' && (
             <script
-              // eslint-disable-next-line react/no-danger
               dangerouslySetInnerHTML={{
                 __html: `
             window.dataLayer = window.dataLayer || [];

pages/_document.js renamed to pages/_document.tsx

@@ -1,9 +1,14 @@
-import NextErrorComponent from 'next/error';
+import NextErrorComponent, { ErrorProps } from 'next/error';
 import * as Sentry from '@sentry/nextjs';
 import ErrorDisplay from 'components/ErrorDisplay/ErrorDisplay';
+import { NextPageContext } from 'next';
 
-// eslint-disable-next-line react/prop-types
-const CustomError = ({ statusCode, hasGetInitialPropsRun, err }) => {
+interface CustomErrorProps extends ErrorProps {
+  hasGetInitialPropsRun?: boolean;
+  err?: NextPageContext['err'];
+}
+
+const CustomError = ({ statusCode, hasGetInitialPropsRun, err }: CustomErrorProps) => {
   if (!hasGetInitialPropsRun && err) {
     // getInitialProps is not called in case of
     // https://github.com/vercel/next.js/issues/8592. As a workaround, we pass
@@ -15,8 +20,9 @@ const CustomError = ({ statusCode, hasGetInitialPropsRun, err }) => {
   return <ErrorDisplay statusCode={statusCode} />;
 };
 
-CustomError.getInitialProps = async ({ res, err, asPath }) => {
-  const errorInitialProps = await NextErrorComponent.getInitialProps({
+CustomError.getInitialProps = async ({ res, err, asPath, ...props }: NextPageContext) => {
+  const errorInitialProps: CustomErrorProps = await NextErrorComponent.getInitialProps({
+    ...props,
     res,
     err,
   });

pages/_error.js renamed to pages/_error.tsx

@@ -1,16 +1,12 @@
+import { NextPageContext } from 'next';
 import Link from 'next/link';
-import { bool } from 'prop-types';
 import { confirmEmail } from 'common/constants/api';
 import Head from 'components/head';
 import HeroBanner from 'components/HeroBanner/HeroBanner';
 import Content from 'components/Content/Content';
 import Alert from '../components/Alert/Alert';
 
-ConfirmEmail.propTypes = {
-  isVerified: bool.isRequired,
-};
-
-ConfirmEmail.getInitialProps = async ({ query: { key } }) => {
+ConfirmEmail.getInitialProps = async ({ query: { key } }: NextPageContext) => {
   try {
     const data = await confirmEmail({ key });
 
@@ -20,7 +16,7 @@ ConfirmEmail.getInitialProps = async ({ query: { key } }) => {
   }
 };
 
-function ConfirmEmail({ isVerified }) {
+function ConfirmEmail({ isVerified }: { isVerified: boolean }) {
   return (
     <>
       <Head title="Email Verification" />

pages/about.js renamed to pages/about.tsx

@@ -314,7 +314,6 @@ function FAQ() {
 
       <HeroBanner title="Frequently Asked Questions" />
 
-      {/* eslint-disable react/no-array-index-key */}
       <Content
         title="General Questions"
         hasTitleUnderline
@@ -362,7 +361,6 @@ function FAQ() {
           />
         ))}
       />
-      {/* eslint-enable react/no-array-index-key */}
     </div>
   );
 }