Fix all the typescript errors

Author: nbudin

app/javascript/AppRoot.tsx

@@ -17,7 +17,7 @@ import { initErrorReporting } from 'ErrorReporting';
 
 export function buildAppRootContextValue(
   data: AppRootQueryData,
-  navigationBarRef: RefObject<HTMLElement>,
+  navigationBarRef: RefObject<HTMLElement | null>,
 ): AppRootContextValue {
   return {
     assumedIdentityFromProfile: data.assumedIdentityFromProfile,
@@ -51,7 +51,7 @@ export function buildAppRootContextValue(
   };
 }
 
-function AppRoot(): JSX.Element {
+function AppRoot(): React.JSX.Element {
   const location = useLocation();
   const navigate = useNavigate();
   const data = useLoaderData() as AppRootQueryData;

app/javascript/AppRootContext.tsx

@@ -19,7 +19,7 @@ export type AppRootContextValue = {
   hasOAuthApplications: boolean;
   language: string;
   myProfile?: NonNullable<AppRootQueryData['convention']>['my_profile'];
-  navigationBarRef: RefObject<HTMLElement>;
+  navigationBarRef: RefObject<HTMLElement | null>;
   rootSiteName?: string | null;
   signupMode?: SignupMode;
   signupAutomationMode?: SignupAutomationMode;

app/javascript/AppWrapper.tsx

@@ -123,7 +123,7 @@ export type AppWrapperProps = {
   stripePublishableKey: string;
 };
 
-function AppWrapper<P extends JSX.IntrinsicAttributes>(
+function AppWrapper<P extends React.JSX.IntrinsicAttributes>(
   WrappedComponent: React.ComponentType<P>,
 ): React.ComponentType<P> {
   function Wrapper(props: P & AppWrapperProps) {

app/javascript/Authentication/AccountFormContent.tsx

@@ -3,7 +3,7 @@ import { AccountFormContentQueryDocument } from './queries.generated';
 import BlockPartial from 'UIComponents/BlockPartial';
 import { CmsPartialBlockName } from 'graphqlTypes.generated';
 
-function AccountFormContent(): JSX.Element {
+function AccountFormContent(): React.JSX.Element {
   const { data, loading, error } = useQuery(AccountFormContentQueryDocument);
 
   if (error || loading || !data) {

app/javascript/Authentication/AuthenticationModal.tsx

@@ -8,7 +8,7 @@ const ForgotPasswordForm = lazyWithAppEntrypointHeadersCheck(() => import('./For
 const SignInForm = lazyWithAppEntrypointHeadersCheck(() => import('./SignInForm'));
 const SignUpForm = lazyWithAppEntrypointHeadersCheck(() => import('./SignUpForm'));
 
-function AuthenticationModal(): JSX.Element {
+function AuthenticationModal(): React.JSX.Element {
   const { visible, currentView } = useContext(AuthenticationModalContext);
 
   const renderView = () => {

app/javascript/Authentication/ForgotPasswordForm.tsx

@@ -41,7 +41,7 @@ async function resetPassword(authenticityToken: string, email: string) {
   return responseJson;
 }
 
-function ForgotPasswordForm(): JSX.Element {
+function ForgotPasswordForm(): React.JSX.Element {
   const { t } = useTranslation();
   const { close: closeModal, setCurrentView } = useContext(AuthenticationModalContext);
   const authenticityToken = AuthenticityTokensManager.instance.tokens.resetPassword;

app/javascript/Authentication/PasswordConfirmationInput.tsx

@@ -10,7 +10,7 @@ export type PasswordConfirmationInputProps = {
   password: string;
 };
 
-function PasswordConfirmationInput({ value, onChange, password }: PasswordConfirmationInputProps): JSX.Element {
+function PasswordConfirmationInput({ value, onChange, password }: PasswordConfirmationInputProps): React.JSX.Element {
   const { t } = useTranslation();
   const [interactedWithConfirmation, setInteractedWithConfirmation] = useState(false);
 

app/javascript/Authentication/PasswordInputWithStrengthCheck.tsx

@@ -60,7 +60,11 @@ export type PasswordInputWithStrengthCheckProps = {
   onChange: React.Dispatch<string>;
 };
 
-function PasswordInputWithStrengthCheck({ id, value, onChange }: PasswordInputWithStrengthCheckProps): JSX.Element {
+function PasswordInputWithStrengthCheck({
+  id,
+  value,
+  onChange,
+}: PasswordInputWithStrengthCheckProps): React.JSX.Element {
   const { t } = useTranslation();
   const passwordStrengthResult = useMemo(() => zxcvbn(value), [value]);
   const hasFeedback = useMemo(

app/javascript/Authentication/ResetPassword.tsx

@@ -35,7 +35,7 @@ async function changePassword(
   }
 }
 
-function ResetPassword(): JSX.Element {
+function ResetPassword(): React.JSX.Element {
   const { t } = useTranslation();
   const location = useLocation();
   const resetPasswordToken = useMemo(

app/javascript/Authentication/SignInButton.tsx

@@ -10,7 +10,7 @@ export type SignInButtonProps = {
   afterSignInPath?: string;
 };
 
-function SignInButton({ className, caption, initiallyOpen, afterSignInPath }: SignInButtonProps): JSX.Element {
+function SignInButton({ className, caption, initiallyOpen, afterSignInPath }: SignInButtonProps): React.JSX.Element {
   const { open, setAfterSignInPath } = useContext(AuthenticationModalContext);
   const openModal = useCallback(() => {
     open({ currentView: 'signIn' });