chore: remove react imports (#1867)

reolves #1856

site/.eslintrc.yaml

@@ -114,6 +114,9 @@ rules:
   react/jsx-curly-brace-presence:
     - error
     - children: ignore
+  # https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#eslint
+  react/jsx-uses-react: "off"
+  react/react-in-jsx-scope: "off"
 settings:
   react:
     version: detect

site/src/AppRouter.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import { FC, lazy, Suspense } from "react"
 import { Route, Routes } from "react-router-dom"
 import { AuthAndFrame } from "./components/AuthAndFrame/AuthAndFrame"
 import { RequireAuth } from "./components/RequireAuth/RequireAuth"
@@ -19,12 +19,12 @@ import { WorkspaceBuildPage } from "./pages/WorkspaceBuildPage/WorkspaceBuildPag
 import { WorkspacePage } from "./pages/WorkspacePage/WorkspacePage"
 import { WorkspaceSchedulePage } from "./pages/WorkspaceSchedulePage/WorkspaceSchedulePage"
 
-const TerminalPage = React.lazy(() => import("./pages/TerminalPage/TerminalPage"))
+const TerminalPage = lazy(() => import("./pages/TerminalPage/TerminalPage"))
-const WorkspacesPage = React.lazy(() => import("./pages/WorkspacesPage/WorkspacesPage"))
+const WorkspacesPage = lazy(() => import("./pages/WorkspacesPage/WorkspacesPage"))
-const CreateWorkspacePage = React.lazy(() => import("./pages/CreateWorkspacePage/CreateWorkspacePage"))
+const CreateWorkspacePage = lazy(() => import("./pages/CreateWorkspacePage/CreateWorkspacePage"))
 
-export const AppRouter: React.FC = () => (
+export const AppRouter: FC = () => (
-  <React.Suspense fallback={<></>}>
+  <Suspense fallback={<></>}>
     <Routes>
       <Route path="/">
         <Route
@@ -159,5 +159,5 @@ export const AppRouter: React.FC = () => (
         <Route path="*" element={<NotFoundPage />} />
       </Route>
     </Routes>
-  </React.Suspense>
+  </Suspense>
 )

site/src/Main.tsx

@@ -1,5 +1,4 @@
 import { inspect } from "@xstate/inspect"
-import React from "react"
 import ReactDOM from "react-dom"
 import { Interpreter } from "xstate"
 import { App } from "./app"

site/src/__mocks__/react-markdown.tsx

@@ -1,6 +1,6 @@
-import React from "react"
+import { FC } from "react"
 
-const ReactMarkdown: React.FC = ({ children }) => {
+const ReactMarkdown: FC = ({ children }) => {
   return <div data-testid="markdown">{children}</div>
 }
 

site/src/app.tsx

@@ -1,6 +1,6 @@
 import CssBaseline from "@material-ui/core/CssBaseline"
 import ThemeProvider from "@material-ui/styles/ThemeProvider"
-import React from "react"
+import { FC } from "react"
 import { BrowserRouter as Router } from "react-router-dom"
 import { SWRConfig } from "swr"
 import { AppRouter } from "./AppRouter"
@@ -10,7 +10,7 @@ import { dark } from "./theme"
 import "./theme/globalFonts"
 import { XServiceProvider } from "./xServices/StateContext"
 
-export const App: React.FC = () => {
+export const App: FC = () => {
   return (
     <Router>
       <SWRConfig

site/src/components/AuthAndFrame/AuthAndFrame.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import { FC } from "react"
 import { Footer } from "../Footer/Footer"
 import { Navbar } from "../Navbar/Navbar"
 import { RequireAuth } from "../RequireAuth/RequireAuth"
@@ -10,7 +10,7 @@ interface AuthAndFrameProps {
 /**
  * Wraps page in RequireAuth and renders it between Navbar and Footer
  */
-export const AuthAndFrame: React.FC<AuthAndFrameProps> = ({ children }) => (
+export const AuthAndFrame: FC<AuthAndFrameProps> = ({ children }) => (
   <RequireAuth>
     <>
       <Navbar />

site/src/components/AvatarData/AvatarData.stories.tsx

@@ -1,5 +1,4 @@
 import { Story } from "@storybook/react"
-import React from "react"
 import { AvatarData, AvatarDataProps } from "./AvatarData"
 
 export default {

site/src/components/AvatarData/AvatarData.tsx

@@ -1,7 +1,7 @@
 import Avatar from "@material-ui/core/Avatar"
 import Link from "@material-ui/core/Link"
 import { makeStyles } from "@material-ui/core/styles"
-import React from "react"
+import { FC } from "react"
 import { Link as RouterLink } from "react-router-dom"
 import { combineClasses } from "../../util/combineClasses"
 import { firstLetter } from "../../util/firstLetter"
@@ -12,7 +12,7 @@ export interface AvatarDataProps {
   link?: string
 }
 
-export const AvatarData: React.FC<AvatarDataProps> = ({ title, subtitle, link }) => {
+export const AvatarData: FC<AvatarDataProps> = ({ title, subtitle, link }) => {
   const styles = useStyles()
 
   return (

site/src/components/BorderedMenu/BorderedMenu.stories.tsx

@@ -1,5 +1,4 @@
 import { Story } from "@storybook/react"
-import React from "react"
 import { BorderedMenuRow } from "../BorderedMenuRow/BorderedMenuRow"
 import { BuildingIcon } from "../Icons/BuildingIcon"
 import { UsersOutlinedIcon } from "../Icons/UsersOutlinedIcon"

site/src/components/BorderedMenu/BorderedMenu.tsx

@@ -1,6 +1,6 @@
 import Popover, { PopoverProps } from "@material-ui/core/Popover"
 import { fade, makeStyles } from "@material-ui/core/styles"
-import React from "react"
+import { FC } from "react"
 
 type BorderedMenuVariant = "admin-dropdown" | "user-dropdown"
 
@@ -8,7 +8,7 @@ export type BorderedMenuProps = Omit<PopoverProps, "variant"> & {
   variant?: BorderedMenuVariant
 }
 
-export const BorderedMenu: React.FC<BorderedMenuProps> = ({ children, variant, ...rest }) => {
+export const BorderedMenu: FC<BorderedMenuProps> = ({ children, variant, ...rest }) => {
   const styles = useStyles()
 
   return (

site/src/components/BorderedMenuRow/BorderedMenuRow.tsx

@@ -2,7 +2,7 @@ import ListItem from "@material-ui/core/ListItem"
 import { makeStyles } from "@material-ui/core/styles"
 import SvgIcon from "@material-ui/core/SvgIcon"
 import CheckIcon from "@material-ui/icons/Check"
-import React from "react"
+import { FC } from "react"
 import { NavLink } from "react-router-dom"
 import { ellipsizeText } from "../../util/ellipsizeText"
 import { Typography } from "../Typography/Typography"
@@ -26,7 +26,7 @@ interface BorderedMenuRowProps {
   onClick?: () => void
 }
 
-export const BorderedMenuRow: React.FC<BorderedMenuRowProps> = ({
+export const BorderedMenuRow: FC<BorderedMenuRowProps> = ({
   active,
   description,
   Icon,

site/src/components/BuildsTable/BuildsTable.stories.tsx

@@ -1,5 +1,4 @@
 import { ComponentMeta, Story } from "@storybook/react"
-import React from "react"
 import { MockBuilds } from "../../testHelpers/entities"
 import { BuildsTable, BuildsTableProps } from "./BuildsTable"
 

site/src/components/BuildsTable/BuildsTable.tsx

@@ -6,7 +6,7 @@ import TableCell from "@material-ui/core/TableCell"
 import TableHead from "@material-ui/core/TableHead"
 import TableRow from "@material-ui/core/TableRow"
 import useTheme from "@material-ui/styles/useTheme"
-import React from "react"
+import { FC } from "react"
 import { useNavigate } from "react-router-dom"
 import * as TypesGen from "../../api/typesGenerated"
 import { displayWorkspaceBuildDuration, getDisplayStatus } from "../../util/workspace"
@@ -27,7 +27,7 @@ export interface BuildsTableProps {
   className?: string
 }
 
-export const BuildsTable: React.FC<BuildsTableProps> = ({ builds, className }) => {
+export const BuildsTable: FC<BuildsTableProps> = ({ builds, className }) => {
   const isLoading = !builds
   const theme: Theme = useTheme()
   const navigate = useNavigate()

site/src/components/CliAuthToken/CliAuthToken.stories.tsx

@@ -1,5 +1,4 @@
 import { Story } from "@storybook/react"
-import React from "react"
 import { CliAuthToken, CliAuthTokenProps } from "./CliAuthToken"
 
 export default {

site/src/components/CliAuthToken/CliAuthToken.test.tsx

@@ -1,5 +1,4 @@
 import { screen } from "@testing-library/react"
-import React from "react"
 import { render } from "../../testHelpers/renderHelpers"
 import { CliAuthToken } from "./CliAuthToken"
 

site/src/components/CliAuthToken/CliAuthToken.tsx

@@ -1,14 +1,14 @@
 import Paper from "@material-ui/core/Paper"
 import { makeStyles } from "@material-ui/core/styles"
 import Typography from "@material-ui/core/Typography"
-import React from "react"
+import { FC } from "react"
 import { CodeExample } from "../CodeExample/CodeExample"
 
 export interface CliAuthTokenProps {
   sessionToken: string
 }
 
-export const CliAuthToken: React.FC<CliAuthTokenProps> = ({ sessionToken }) => {
+export const CliAuthToken: FC<CliAuthTokenProps> = ({ sessionToken }) => {
   const styles = useStyles()
   return (
     <Paper className={styles.container}>

site/src/components/CodeBlock/CodeBlock.stories.tsx

@@ -1,5 +1,4 @@
 import { Story } from "@storybook/react"
-import React from "react"
 import { CodeBlock, CodeBlockProps } from "./CodeBlock"
 
 const sampleLines = `Successfully assigned coder/image-jcws7 to cluster-1

site/src/components/CodeBlock/CodeBlock.test.tsx

@@ -1,5 +1,4 @@
 import { screen } from "@testing-library/react"
-import React from "react"
 import { render } from "../../testHelpers/renderHelpers"
 import { CodeBlock } from "./CodeBlock"
 

site/src/components/CodeBlock/CodeBlock.tsx

@@ -1,15 +1,15 @@
 import { makeStyles } from "@material-ui/core/styles"
-import React from "react"
+import { FC, Fragment, ReactElement } from "react"
 import { MONOSPACE_FONT_FAMILY } from "../../theme/constants"
 import { combineClasses } from "../../util/combineClasses"
 
 export interface CodeBlockProps {
   lines: string[]
-  ctas?: React.ReactElement[]
+  ctas?: ReactElement[]
   className?: string
 }
 
-export const CodeBlock: React.FC<CodeBlockProps> = ({ lines, ctas, className = "" }) => {
+export const CodeBlock: FC<CodeBlockProps> = ({ lines, ctas, className = "" }) => {
   const styles = useStyles()
 
   return (
@@ -24,7 +24,7 @@ export const CodeBlock: React.FC<CodeBlockProps> = ({ lines, ctas, className = "
       {ctas && ctas.length && (
         <div className={styles.ctaBar}>
           {ctas.map((cta, i) => {
-            return <React.Fragment key={i}>{cta}</React.Fragment>
+            return <Fragment key={i}>{cta}</Fragment>
           })}
         </div>
       )}

site/src/components/CodeExample/CodeExample.stories.tsx

@@ -1,5 +1,4 @@
 import { Story } from "@storybook/react"
-import React from "react"
 import { CodeExample, CodeExampleProps } from "./CodeExample"
 
 const sampleCode = `echo "Hello, world"`

site/src/components/CodeExample/CodeExample.test.tsx

@@ -1,5 +1,4 @@
 import { screen } from "@testing-library/react"
-import React from "react"
 import { render } from "../../testHelpers/renderHelpers"
 import { CodeExample } from "./CodeExample"
 

site/src/components/CodeExample/CodeExample.tsx

@@ -1,5 +1,5 @@
 import { makeStyles } from "@material-ui/core/styles"
-import React from "react"
+import { FC } from "react"
 import { MONOSPACE_FONT_FAMILY } from "../../theme/constants"
 import { CopyButton } from "../CopyButton/CopyButton"
 
@@ -10,7 +10,7 @@ export interface CodeExampleProps {
 /**
  * Component to show single-line code examples, with a copy button
  */
-export const CodeExample: React.FC<CodeExampleProps> = ({ code }) => {
+export const CodeExample: FC<CodeExampleProps> = ({ code }) => {
   const styles = useStyles()
 
   return (

site/src/components/ConfirmDialog/ConfirmDialog.stories.tsx

@@ -1,5 +1,4 @@
 import { ComponentMeta, Story } from "@storybook/react"
-import React from "react"
 import { ConfirmDialog, ConfirmDialogProps } from "./ConfirmDialog"
 
 export default {

site/src/components/ConfirmDialog/ConfirmDialog.test.tsx

@@ -1,11 +1,11 @@
 import { fireEvent, render } from "@testing-library/react"
-import React from "react"
+import { FC } from "react"
 import { act } from "react-dom/test-utils"
 import { WrapperComponent } from "../../testHelpers/renderHelpers"
 import { ConfirmDialog, ConfirmDialogProps } from "./ConfirmDialog"
 
 namespace Helpers {
-  export const Component: React.FC<ConfirmDialogProps> = (props: ConfirmDialogProps) => {
+  export const Component: FC<ConfirmDialogProps> = (props: ConfirmDialogProps) => {
     return (
       <WrapperComponent>
         <ConfirmDialog {...props} />

site/src/components/CreateUserForm/CreateUserForm.stories.tsx

@@ -1,6 +1,5 @@
 import { action } from "@storybook/addon-actions"
 import { Story } from "@storybook/react"
-import React from "react"
 import { CreateUserForm, CreateUserFormProps } from "./CreateUserForm"
 
 export default {

site/src/components/CreateUserForm/CreateUserForm.tsx

@@ -1,7 +1,7 @@
 import FormHelperText from "@material-ui/core/FormHelperText"
 import TextField from "@material-ui/core/TextField"
 import { FormikContextType, FormikErrors, useFormik } from "formik"
-import React from "react"
+import { FC } from "react"
 import * as Yup from "yup"
 import * as TypesGen from "../../api/typesGenerated"
 import { getFormHelpers, nameValidator, onChangeTrimmed } from "../../util/formUtils"
@@ -34,7 +34,7 @@ const validationSchema = Yup.object({
   username: nameValidator(Language.usernameLabel),
 })
 
-export const CreateUserForm: React.FC<CreateUserFormProps> = ({
+export const CreateUserForm: FC<CreateUserFormProps> = ({
   onSubmit,
   onCancel,
   formErrors,

site/src/components/DropdownArrows/DropdownArrows.tsx

@@ -1,7 +1,7 @@
 import { fade, makeStyles, Theme } from "@material-ui/core/styles"
 import KeyboardArrowDown from "@material-ui/icons/KeyboardArrowDown"
 import KeyboardArrowUp from "@material-ui/icons/KeyboardArrowUp"
-import React from "react"
+import { FC } from "react"
 
 const useStyles = makeStyles((theme: Theme) => ({
   arrowIcon: {
@@ -15,12 +15,12 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
 }))
 
-export const OpenDropdown: React.FC = () => {
+export const OpenDropdown: FC = () => {
   const styles = useStyles()
   return <KeyboardArrowDown className={styles.arrowIcon} />
 }
 
-export const CloseDropdown: React.FC = () => {
+export const CloseDropdown: FC = () => {
   const styles = useStyles()
   return <KeyboardArrowUp className={`${styles.arrowIcon} ${styles.arrowIconUp}`} />
 }

site/src/components/EmptyState/EmptyState.test.tsx

@@ -1,5 +1,4 @@
 import { screen } from "@testing-library/react"
-import React from "react"
 import { render } from "../../testHelpers/renderHelpers"
 import { EmptyState } from "./EmptyState"
 

site/src/components/EmptyState/EmptyState.tsx

@@ -1,14 +1,14 @@
 import Box from "@material-ui/core/Box"
 import { makeStyles } from "@material-ui/core/styles"
 import Typography from "@material-ui/core/Typography"
-import React from "react"
+import { FC, ReactNode } from "react"
 
 export interface EmptyStateProps {
   /** Text Message to display, placed inside Typography component */
   message: string
   /** Longer optional description to display below the message */
   description?: string
-  cta?: React.ReactNode
+  cta?: ReactNode
 }
 
 /**
@@ -19,7 +19,7 @@ export interface EmptyStateProps {
  * EmptyState's props extend the [Material UI Box component](https://material-ui.com/components/box/)
  * that you can directly pass props through to to customize the shape and layout of it.
  */
-export const EmptyState: React.FC<EmptyStateProps> = (props) => {
+export const EmptyState: FC<EmptyStateProps> = (props) => {
   const { message, description, cta, ...boxProps } = props
   const styles = useStyles()
 

site/src/components/EnterpriseSnackbar/EnterpriseSnackbar.stories.tsx

@@ -1,5 +1,4 @@
 import { Story } from "@storybook/react"
-import React from "react"
 import { EnterpriseSnackbar, EnterpriseSnackbarProps } from "./EnterpriseSnackbar"
 
 export default {

site/src/components/EnterpriseSnackbar/EnterpriseSnackbar.tsx

@@ -2,7 +2,7 @@ import IconButton from "@material-ui/core/IconButton"
 import Snackbar, { SnackbarProps as MuiSnackbarProps } from "@material-ui/core/Snackbar"
 import { makeStyles } from "@material-ui/core/styles"
 import CloseIcon from "@material-ui/icons/Close"
-import React from "react"
+import { FC } from "react"
 import { combineClasses } from "../../util/combineClasses"
 
 type EnterpriseSnackbarVariant = "error" | "info"
@@ -25,7 +25,7 @@ export interface EnterpriseSnackbarProps extends MuiSnackbarProps {
  *
  * See original component's Material UI documentation here: https://material-ui.com/components/snackbars/
  */
-export const EnterpriseSnackbar: React.FC<EnterpriseSnackbarProps> = ({
+export const EnterpriseSnackbar: FC<EnterpriseSnackbarProps> = ({
   onClose,
   variant = "info",
   ContentProps = {},

site/src/components/ErrorBoundary/ErrorBoundary.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import { Component, ReactNode } from "react"
 import { RuntimeErrorState } from "../RuntimeErrorState/RuntimeErrorState"
 
 type ErrorBoundaryProps = Record<string, unknown>
@@ -11,7 +11,7 @@ interface ErrorBoundaryState {
  * Our app's Error Boundary
  * Read more about React Error Boundaries: https://reactjs.org/docs/error-boundaries.html
  */
-export class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
   constructor(props: ErrorBoundaryProps) {
     super(props)
     this.state = { error: null }
@@ -21,7 +21,7 @@ export class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoun
     return { error }
   }
 
-  render(): React.ReactNode {
+  render(): ReactNode {
     if (this.state.error) {
       return <RuntimeErrorState error={this.state.error} />
     }

site/src/components/ErrorSummary/ErrorSummary.stories.tsx

@@ -1,6 +1,5 @@
 import { action } from "@storybook/addon-actions"
 import { ComponentMeta, Story } from "@storybook/react"
-import React from "react"
 import { ErrorSummary, ErrorSummaryProps } from "./ErrorSummary"
 
 export default {

site/src/components/ErrorSummary/ErrorSummary.test.tsx

@@ -1,5 +1,4 @@
 import { render, screen } from "@testing-library/react"
-import React from "react"
 import { ErrorSummary } from "./ErrorSummary"
 
 describe("ErrorSummary", () => {

site/src/components/ErrorSummary/ErrorSummary.tsx

@@ -1,6 +1,6 @@
 import Button from "@material-ui/core/Button"
 import RefreshIcon from "@material-ui/icons/Refresh"
-import React from "react"
+import { FC } from "react"
 import { Stack } from "../Stack/Stack"
 
 const Language = {
@@ -13,7 +13,7 @@ export interface ErrorSummaryProps {
   retry?: () => void
 }
 
-export const ErrorSummary: React.FC<ErrorSummaryProps> = ({ error, retry }) => (
+export const ErrorSummary: FC<ErrorSummaryProps> = ({ error, retry }) => (
   <Stack>
     {!(error instanceof Error) ? <div>{Language.unknownErrorMessage}</div> : <div>{error.toString()}</div>}
 

site/src/components/Footer/Footer.test.tsx

@@ -1,5 +1,4 @@
 import { screen } from "@testing-library/react"
-import React from "react"
 import { MockBuildInfo, render } from "../../testHelpers/renderHelpers"
 import { Footer, Language } from "./Footer"
 

site/src/components/FormCloseButton/FormCloseButton.stories.tsx

@@ -1,5 +1,4 @@
 import { Story } from "@storybook/react"
-import React from "react"
 import { FormCloseButton, FormCloseButtonProps } from "./FormCloseButton"
 
 export default {

site/src/components/FormCloseButton/FormCloseButton.test.tsx

@@ -1,5 +1,4 @@
 import { fireEvent, render, screen } from "@testing-library/react"
-import React from "react"
 import { FormCloseButton } from "./FormCloseButton"
 
 describe("FormCloseButton", () => {

site/src/components/FormDropdownField/FormDropdownField.tsx

@@ -2,7 +2,7 @@ import Box from "@material-ui/core/Box"
 import MenuItem from "@material-ui/core/MenuItem"
 import { makeStyles } from "@material-ui/core/styles"
 import Typography from "@material-ui/core/Typography"
-import React from "react"
+import { ReactElement } from "react"
 import { FormTextField, FormTextFieldProps } from "../FormTextField/FormTextField"
 
 export interface FormDropdownItem {
@@ -15,7 +15,7 @@ export interface FormDropdownFieldProps<T> extends FormTextFieldProps<T> {
   items: FormDropdownItem[]
 }
 
-export const FormDropdownField = <T,>({ items, ...props }: FormDropdownFieldProps<T>): React.ReactElement => {
+export const FormDropdownField = <T,>({ items, ...props }: FormDropdownFieldProps<T>): ReactElement => {
   const styles = useStyles()
   return (
     <FormTextField select {...props}>

site/src/components/FormFooter/FormFooter.stories.tsx

@@ -1,5 +1,4 @@
 import { ComponentMeta, Story } from "@storybook/react"
-import React from "react"
 import { FormFooter, FormFooterProps } from "./FormFooter"
 
 export default {

site/src/components/FormFooter/FormFooter.tsx

@@ -1,6 +1,6 @@
 import Button from "@material-ui/core/Button"
 import { makeStyles } from "@material-ui/core/styles"
-import React from "react"
+import { FC } from "react"
 import { LoadingButton } from "../LoadingButton/LoadingButton"
 
 export const Language = {
@@ -27,11 +27,7 @@ const useStyles = makeStyles(() => ({
   },
 }))
 
-export const FormFooter: React.FC<FormFooterProps> = ({
+export const FormFooter: FC<FormFooterProps> = ({ onCancel, isLoading, submitLabel = Language.defaultSubmitLabel }) => {
-  onCancel,
-  isLoading,
-  submitLabel = Language.defaultSubmitLabel,
-}) => {
   const styles = useStyles()
   return (
     <div className={styles.footer}>

site/src/components/FormSection/FormSection.tsx

@@ -1,6 +1,6 @@
 import { makeStyles } from "@material-ui/core/styles"
 import Typography from "@material-ui/core/Typography"
-import React from "react"
+import { FC } from "react"
 
 export interface FormSectionProps {
   title: string
@@ -39,7 +39,7 @@ export const useStyles = makeStyles((theme) => ({
   },
 }))
 
-export const FormSection: React.FC<FormSectionProps> = ({ title, description, children }) => {
+export const FormSection: FC<FormSectionProps> = ({ title, description, children }) => {
   const styles = useStyles()
 
   return (

site/src/components/FormTextField/FormTextField.test.tsx

@@ -1,6 +1,6 @@
 import { act, fireEvent, render, screen } from "@testing-library/react"
 import { useFormik } from "formik"
-import React from "react"
+import { FC } from "react"
 import * as yup from "yup"
 import { FormTextField, FormTextFieldProps } from "./FormTextField"
 
@@ -11,7 +11,7 @@ namespace Helpers {
 
   export const requiredValidationMsg = "required"
 
-  export const Component: React.FC<Omit<FormTextFieldProps<FormValues>, "form" | "formFieldName">> = (props) => {
+  export const Component: FC<Omit<FormTextFieldProps<FormValues>, "form" | "formFieldName">> = (props) => {
     const form = useFormik<FormValues>({
       initialValues: {
         name: "",

site/src/components/FormTextField/FormTextField.tsx

@@ -1,6 +1,6 @@
 import TextField, { TextFieldProps } from "@material-ui/core/TextField"
 import { FormikContextType } from "formik"
-import React from "react"
+import { ReactElement } from "react"
 import { PasswordField } from "../PasswordField/PasswordField"
 
 /**
@@ -118,7 +118,7 @@ export const FormTextField = <T,>({
   type,
   variant = "outlined",
   ...rest
-}: FormTextFieldProps<T>): React.ReactElement => {
+}: FormTextFieldProps<T>): ReactElement => {
   const isError = form.touched[formFieldName] && Boolean(form.errors[formFieldName])
 
   // Conversion to a string primitive is necessary as formFieldName is an in

site/src/components/FormTitle/FormTitle.tsx

@@ -1,10 +1,10 @@
 import { makeStyles } from "@material-ui/core/styles"
 import Typography from "@material-ui/core/Typography"
-import React from "react"
+import { FC, ReactNode } from "react"
 
 export interface FormTitleProps {
   title: string
-  detail?: React.ReactNode
+  detail?: ReactNode
 }
 
 const useStyles = makeStyles((theme) => ({
@@ -19,7 +19,7 @@ const useStyles = makeStyles((theme) => ({
   },
 }))
 
-export const FormTitle: React.FC<FormTitleProps> = ({ title, detail }) => {
+export const FormTitle: FC<FormTitleProps> = ({ title, detail }) => {
   const styles = useStyles()
 
   return (

site/src/components/FullPageForm/FullPageForm.stories.tsx

@@ -1,7 +1,6 @@
 import TextField from "@material-ui/core/TextField"
 import { action } from "@storybook/addon-actions"
 import { ComponentMeta, Story } from "@storybook/react"
-import React from "react"
 import { FormFooter } from "../FormFooter/FormFooter"
 import { Stack } from "../Stack/Stack"
 import { FullPageForm, FullPageFormProps } from "./FullPageForm"

site/src/components/FullPageForm/FullPageForm.tsx

@@ -1,12 +1,12 @@
 import { makeStyles } from "@material-ui/core/styles"
-import React from "react"
+import { FC, ReactNode } from "react"
 import { FormCloseButton } from "../FormCloseButton/FormCloseButton"
 import { FormTitle } from "../FormTitle/FormTitle"
 import { Margins } from "../Margins/Margins"
 
 export interface FullPageFormProps {
   title: string
-  detail?: React.ReactNode
+  detail?: ReactNode
   onCancel: () => void
 }
 
@@ -19,7 +19,7 @@ const useStyles = makeStyles(() => ({
   },
 }))
 
-export const FullPageForm: React.FC<FullPageFormProps> = ({ title, detail, onCancel, children }) => {
+export const FullPageForm: FC<FullPageFormProps> = ({ title, detail, onCancel, children }) => {
   const styles = useStyles()
   return (
     <main className={styles.root}>

site/src/components/Icons/BuildingIcon.stories.tsx

@@ -1,5 +1,4 @@
 import { Story } from "@storybook/react"
-import React from "react"
 import { BuildingIcon } from "./BuildingIcon"
 
 export default {

site/src/components/Icons/BuildingIcon.tsx

@@ -1,5 +1,4 @@
 import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon"
-import React from "react"
 
 export const BuildingIcon = (props: SvgIconProps): JSX.Element => (
   <SvgIcon {...props} viewBox="0 0 24 24">

site/src/components/Icons/CloseIcon.stories.tsx

@@ -1,5 +1,4 @@
 import { Story } from "@storybook/react"
-import React from "react"
 import { CloseIcon } from "./CloseIcon"
 
 export default {

site/src/components/Icons/CloseIcon.tsx

@@ -1,5 +1,4 @@
 import SvgIcon from "@material-ui/core/SvgIcon"
-import React from "react"
 
 export const CloseIcon: typeof SvgIcon = (props) => (
   <SvgIcon {...props} viewBox="0 0 31 31">

site/src/components/Icons/CoderIcon.stories.tsx

@@ -1,5 +1,4 @@
 import { Story } from "@storybook/react"
-import React from "react"
 import { CoderIcon } from "./CoderIcon"
 
 export default {

site/src/components/Icons/CoderIcon.tsx

@@ -1,5 +1,4 @@
 import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon"
-import React from "react"
 
 /**
  * CoderIcon represents the cloud with brackets Coder brand icon. It does not

site/src/components/Icons/DocsIcon.stories.tsx

@@ -1,5 +1,4 @@
 import { Story } from "@storybook/react"
-import React from "react"
 import { DocsIcon } from "./DocsIcon"
 
 export default {

site/src/components/Icons/DocsIcon.tsx

@@ -1,5 +1,4 @@
 import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon"
-import React from "react"
 
 export const DocsIcon = (props: SvgIconProps): JSX.Element => (
   <SvgIcon {...props} viewBox="0 0 24 24">

site/src/components/Icons/ErrorIcon.stories.tsx

@@ -1,5 +1,4 @@
 import { Story } from "@storybook/react"
-import React from "react"
 import { ErrorIcon } from "./ErrorIcon"
 
 export default {

site/src/components/Icons/ErrorIcon.tsx

@@ -1,5 +1,4 @@
 import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon"
-import React from "react"
 
 export const ErrorIcon = (props: SvgIconProps): JSX.Element => (
   <SvgIcon {...props} viewBox="0 0 24 24">

site/src/components/Icons/FileCopyIcon.stories.tsx

@@ -1,5 +1,4 @@
 import { Story } from "@storybook/react"
-import React from "react"
 import { FileCopyIcon } from "./FileCopyIcon"
 
 export default {

site/src/components/Icons/FileCopyIcon.tsx

@@ -1,5 +1,4 @@
 import SvgIcon from "@material-ui/core/SvgIcon"
-import React from "react"
 
 export const FileCopyIcon: typeof SvgIcon = (props) => (
   <SvgIcon {...props} viewBox="0 0 20 20">

site/src/components/Icons/Logo.stories.tsx

@@ -1,5 +1,4 @@
 import { Story } from "@storybook/react"
-import React from "react"
 import { Logo } from "./Logo"
 
 export default {

site/src/components/Icons/LogoutIcon.stories.tsx

@@ -1,5 +1,4 @@
 import { Story } from "@storybook/react"
-import React from "react"
 import { LogoutIcon } from "./LogoutIcon"
 
 export default {

site/src/components/Icons/LogoutIcon.tsx

@@ -1,5 +1,4 @@
 import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon"
-import React from "react"
 
 export const LogoutIcon = (props: SvgIconProps): JSX.Element => (
   <SvgIcon {...props} viewBox="0 0 20 20">

site/src/components/Icons/SearchIcon.tsx

@@ -1,5 +1,4 @@
 import SvgIcon from "@material-ui/core/SvgIcon"
-import React from "react"
 
 export const SearchIcon: typeof SvgIcon = (props) => (
   <SvgIcon {...props} viewBox="0 0 16 16">

site/src/components/Icons/UsersOutlinedIcon.stories.tsx

@@ -1,5 +1,4 @@
 import { Story } from "@storybook/react"
-import React from "react"
 import { UsersOutlinedIcon } from "./UsersOutlinedIcon"
 
 export default {

site/src/components/Icons/UsersOutlinedIcon.tsx

@@ -1,5 +1,4 @@
 import SvgIcon from "@material-ui/core/SvgIcon"
-import React from "react"
 
 export const UsersOutlinedIcon: typeof SvgIcon = (props) => (
   <SvgIcon {...props} viewBox="0 0 20 20">

site/src/components/Icons/WorkspacesIcon.stories.tsx

@@ -1,5 +1,4 @@
 import { Story } from "@storybook/react"
-import React from "react"
 import { WorkspacesIcon } from "./WorkspacesIcon"
 
 export default {

site/src/components/Icons/WorkspacesIcon.tsx

@@ -1,5 +1,4 @@
 import SvgIcon from "@material-ui/core/SvgIcon"
-import React from "react"
 
 export const WorkspacesIcon: typeof SvgIcon = (props) => (
   <SvgIcon {...props} viewBox="0 0 16 16">

site/src/components/Loader/FullScreenLoader.test.tsx

@@ -1,5 +1,4 @@
 import { render, screen } from "@testing-library/react"
-import React from "react"
 import { FullScreenLoader } from "./FullScreenLoader"
 
 describe("FullScreenLoader", () => {

site/src/components/Loader/FullScreenLoader.tsx

@@ -1,6 +1,6 @@
 import CircularProgress from "@material-ui/core/CircularProgress"
 import { makeStyles } from "@material-ui/core/styles"
-import React from "react"
+import { FC } from "react"
 
 export const useStyles = makeStyles((theme) => ({
   root: {
@@ -16,7 +16,7 @@ export const useStyles = makeStyles((theme) => ({
   },
 }))
 
-export const FullScreenLoader: React.FC = () => {
+export const FullScreenLoader: FC = () => {
   const styles = useStyles()
 
   return (

site/src/components/Loader/Loader.tsx

@@ -1,8 +1,8 @@
 import Box from "@material-ui/core/Box"
 import CircularProgress from "@material-ui/core/CircularProgress"
-import React from "react"
+import { FC } from "react"
 
-export const Loader: React.FC<{ size?: number }> = ({ size = 26 }) => {
+export const Loader: FC<{ size?: number }> = ({ size = 26 }) => {
   return (
     <Box p={4} width="100%" display="flex" alignItems="center" justifyContent="center">
       <CircularProgress size={size} />

site/src/components/LoadingButton/LoadingButton.stories.tsx

@@ -1,5 +1,4 @@
 import { Story } from "@storybook/react"
-import React from "react"
 import { LoadingButton, LoadingButtonProps } from "./LoadingButton"
 
 export default {

site/src/components/LoadingButton/LoadingButton.test.tsx

@@ -1,5 +1,4 @@
 import { render, screen } from "@testing-library/react"
-import React from "react"
 import { LoadingButton } from "./LoadingButton"
 
 describe("LoadingButton", () => {

site/src/components/Logs/Logs.stories.tsx

@@ -1,5 +1,4 @@
 import { ComponentMeta, Story } from "@storybook/react"
-import React from "react"
 import { MockWorkspaceBuildLogs } from "../../testHelpers/entities"
 import { Logs, LogsProps } from "./Logs"
 

site/src/components/Logs/Logs.tsx

@@ -1,6 +1,6 @@
 import { makeStyles } from "@material-ui/core/styles"
 import dayjs from "dayjs"
-import React from "react"
+import { FC } from "react"
 import { MONOSPACE_FONT_FAMILY } from "../../theme/constants"
 import { combineClasses } from "../../util/combineClasses"
 
@@ -14,7 +14,7 @@ export interface LogsProps {
   className?: string
 }
 
-export const Logs: React.FC<LogsProps> = ({ lines, className = "" }) => {
+export const Logs: FC<LogsProps> = ({ lines, className = "" }) => {
   const styles = useStyles()
 
   return (

site/src/components/Margins/Margins.stories.tsx

@@ -1,5 +1,4 @@
 import { ComponentMeta, Story } from "@storybook/react"
-import React from "react"
 import { Margins } from "./Margins"
 
 export default {

site/src/components/Margins/Margins.tsx

@@ -1,5 +1,5 @@
 import { makeStyles } from "@material-ui/core/styles"
-import React from "react"
+import { FC } from "react"
 import { maxWidth, sidePadding } from "../../theme/constants"
 
 const useStyles = makeStyles(() => ({
@@ -12,7 +12,7 @@ const useStyles = makeStyles(() => ({
   },
 }))
 
-export const Margins: React.FC = ({ children }) => {
+export const Margins: FC = ({ children }) => {
   const styles = useStyles()
   return <div className={styles.margins}>{children}</div>
 }

site/src/components/NavbarView/NavbarView.stories.tsx

@@ -1,5 +1,4 @@
 import { Story } from "@storybook/react"
-import React from "react"
 import { MockUser, MockUser2 } from "../../testHelpers/entities"
 import { NavbarView, NavbarViewProps } from "./NavbarView"
 

site/src/components/NavbarView/NavbarView.test.tsx

@@ -1,5 +1,4 @@
 import { screen } from "@testing-library/react"
-import React from "react"
 import { MockUser } from "../../testHelpers/entities"
 import { render } from "../../testHelpers/renderHelpers"
 import { Language as navLanguage, NavbarView } from "./NavbarView"

site/src/components/NavbarView/NavbarView.tsx

@@ -1,7 +1,6 @@
 import List from "@material-ui/core/List"
 import ListItem from "@material-ui/core/ListItem"
 import { fade, makeStyles } from "@material-ui/core/styles"
-import React from "react"
 import { NavLink } from "react-router-dom"
 import * as TypesGen from "../../api/typesGenerated"
 import { navHeight } from "../../theme/constants"

site/src/components/ParameterInput/ParameterInput.stories.tsx

@@ -1,5 +1,4 @@
 import { Story } from "@storybook/react"
-import React from "react"
 import { ParameterSchema } from "../../api/typesGenerated"
 import { ParameterInput, ParameterInputProps } from "./ParameterInput"
 

site/src/components/ParameterInput/ParameterInput.tsx

@@ -4,7 +4,7 @@ import Radio from "@material-ui/core/Radio"
 import RadioGroup from "@material-ui/core/RadioGroup"
 import { lighten, makeStyles } from "@material-ui/core/styles"
 import TextField from "@material-ui/core/TextField"
-import React from "react"
+import { FC } from "react"
 import { ParameterSchema } from "../../api/typesGenerated"
 import { MONOSPACE_FONT_FAMILY } from "../../theme/constants"
 
@@ -14,7 +14,7 @@ export interface ParameterInputProps {
   onChange: (value: string) => void
 }
 
-export const ParameterInput: React.FC<ParameterInputProps> = ({ disabled, onChange, schema }) => {
+export const ParameterInput: FC<ParameterInputProps> = ({ disabled, onChange, schema }) => {
   const styles = useStyles()
   return (
     <Paper className={styles.paper}>

site/src/components/PasswordField/PasswordField.test.tsx

@@ -1,5 +1,4 @@
 import { render, screen } from "@testing-library/react"
-import React from "react"
 import { PasswordField } from "./PasswordField"
 
 describe("PasswordField", () => {

site/src/components/ResetPasswordDialog/ResetPasswordDialog.stories.tsx

@@ -1,5 +1,4 @@
 import { Story } from "@storybook/react"
-import React from "react"
 import { MockUser } from "../../testHelpers/renderHelpers"
 import { ResetPasswordDialog, ResetPasswordDialogProps } from "./ResetPasswordDialog"
 

site/src/components/ResetPasswordDialog/ResetPasswordDialog.tsx

@@ -2,7 +2,7 @@ import DialogActions from "@material-ui/core/DialogActions"
 import DialogContent from "@material-ui/core/DialogContent"
 import DialogContentText from "@material-ui/core/DialogContentText"
 import { makeStyles } from "@material-ui/core/styles"
-import React from "react"
+import { FC } from "react"
 import * as TypesGen from "../../api/typesGenerated"
 import { CodeBlock } from "../CodeBlock/CodeBlock"
 import { Dialog, DialogActionButtons, DialogTitle } from "../Dialog/Dialog"
@@ -26,7 +26,7 @@ export const Language = {
   confirmText: "Reset password",
 }
 
-export const ResetPasswordDialog: React.FC<ResetPasswordDialogProps> = ({
+export const ResetPasswordDialog: FC<ResetPasswordDialogProps> = ({
   open,
   onClose,
   onConfirm,

site/src/components/Resources/Resources.tsx

@@ -5,7 +5,7 @@ import TableCell from "@material-ui/core/TableCell"
 import TableHead from "@material-ui/core/TableHead"
 import TableRow from "@material-ui/core/TableRow"
 import useTheme from "@material-ui/styles/useTheme"
-import React from "react"
+import { FC } from "react"
 import { Workspace, WorkspaceResource } from "../../api/typesGenerated"
 import { getDisplayAgentStatus } from "../../util/workspace"
 import { TableHeaderRow } from "../TableHeaders/TableHeaders"
@@ -27,7 +27,7 @@ interface ResourcesProps {
   workspace: Workspace
 }
 
-export const Resources: React.FC<ResourcesProps> = ({ resources, getResourcesError, workspace }) => {
+export const Resources: FC<ResourcesProps> = ({ resources, getResourcesError, workspace }) => {
   const styles = useStyles()
   const theme: Theme = useTheme()
 

site/src/components/RoleSelect/RoleSelect.stories.tsx

@@ -1,5 +1,4 @@
 import { ComponentMeta, Story } from "@storybook/react"
-import React from "react"
 import { MockAdminRole, MockMemberRole, MockSiteRoles } from "../../testHelpers/renderHelpers"
 import { RoleSelect, RoleSelectProps } from "./RoleSelect"
 

site/src/components/RoleSelect/RoleSelect.tsx

@@ -2,7 +2,7 @@ import Checkbox from "@material-ui/core/Checkbox"
 import MenuItem from "@material-ui/core/MenuItem"
 import Select from "@material-ui/core/Select"
 import { makeStyles, Theme } from "@material-ui/core/styles"
-import React from "react"
+import { FC } from "react"
 import { Role } from "../../api/typesGenerated"
 
 export const Language = {
@@ -16,7 +16,7 @@ export interface RoleSelectProps {
   open?: boolean
 }
 
-export const RoleSelect: React.FC<RoleSelectProps> = ({ roles, selectedRoles, loading, onChange, open }) => {
+export const RoleSelect: FC<RoleSelectProps> = ({ roles, selectedRoles, loading, onChange, open }) => {
   const styles = useStyles()
   const value = selectedRoles.map((r) => r.name)
   const renderValue = () => selectedRoles.map((r) => r.display_name).join(", ")

site/src/components/RuntimeErrorState/RuntimeErrorReport.tsx

@@ -1,5 +1,5 @@
 import { makeStyles } from "@material-ui/core/styles"
-import React from "react"
+import { ReactElement } from "react"
 import { CodeBlock } from "../CodeBlock/CodeBlock"
 import { createCtas } from "./createCtas"
 
@@ -63,7 +63,7 @@ export const createFormattedStackTrace = (error: Error, mappedStack: string[] |
 /**
  * A code block component that contains the error stack resulting from an error boundary trigger
  */
-export const RuntimeErrorReport = ({ error, mappedStack }: ReportState): React.ReactElement => {
+export const RuntimeErrorReport = ({ error, mappedStack }: ReportState): ReactElement => {
   const styles = useStyles()
 
   if (!mappedStack) {

site/src/components/RuntimeErrorState/RuntimeErrorState.stories.tsx

@@ -1,5 +1,4 @@
 import { ComponentMeta, Story } from "@storybook/react"
-import React from "react"
 import { RuntimeErrorState, RuntimeErrorStateProps } from "./RuntimeErrorState"
 
 const error = new Error("An error occurred")

site/src/components/RuntimeErrorState/RuntimeErrorState.test.tsx

@@ -1,5 +1,4 @@
 import { screen } from "@testing-library/react"
-import React from "react"
 import { render } from "../../testHelpers/renderHelpers"
 import { Language as ButtonLanguage } from "./createCtas"
 import { Language as RuntimeErrorStateLanguage, RuntimeErrorState } from "./RuntimeErrorState"

site/src/components/RuntimeErrorState/createCtas.tsx

@@ -1,7 +1,7 @@
 import Button from "@material-ui/core/Button"
 import { makeStyles } from "@material-ui/core/styles"
 import RefreshIcon from "@material-ui/icons/Refresh"
-import React from "react"
+import { ReactElement } from "react"
 import { CopyButton } from "../CopyButton/CopyButton"
 
 export const Language = {
@@ -12,7 +12,7 @@ export const Language = {
 /**
  * A wrapper component for a full-width copy button
  */
-const CopyStackButton = ({ text }: { text: string }): React.ReactElement => {
+const CopyStackButton = ({ text }: { text: string }): ReactElement => {
   const styles = useStyles()
 
   return (
@@ -28,7 +28,7 @@ const CopyStackButton = ({ text }: { text: string }): React.ReactElement => {
 /**
  * A button that reloads our application
  */
-const ReloadAppButton = (): React.ReactElement => {
+const ReloadAppButton = (): ReactElement => {
   const styles = useStyles()
 
   return (
@@ -47,7 +47,7 @@ const ReloadAppButton = (): React.ReactElement => {
 /**
  * createCtas generates an array of buttons to be used with our error boundary UI
  */
-export const createCtas = (codeBlock: string[]): React.ReactElement[] => {
+export const createCtas = (codeBlock: string[]): ReactElement[] => {
   // REMARK: we don't have to worry about key order changing
   // eslint-disable-next-line react/jsx-key
   return [<CopyStackButton text={codeBlock.join("\r\n")} />, <ReloadAppButton />]

site/src/components/Section/Section.stories.tsx

@@ -1,7 +1,6 @@
 import Button from "@material-ui/core/Button"
 import TextField from "@material-ui/core/TextField"
 import { Story } from "@storybook/react"
-import React from "react"
 import { Section, SectionProps } from "./Section"
 
 export default {

site/src/components/Section/Section.tsx

@@ -1,7 +1,7 @@
 import { makeStyles } from "@material-ui/core/styles"
 import { fade } from "@material-ui/core/styles/colorManipulator"
 import Typography from "@material-ui/core/Typography"
-import React from "react"
+import { FC } from "react"
 import { combineClasses } from "../../util/combineClasses"
 import { SectionAction } from "../SectionAction/SectionAction"
 
@@ -17,7 +17,7 @@ export interface SectionProps {
   children?: React.ReactNode
 }
 
-type SectionFC = React.FC<SectionProps> & { Action: typeof SectionAction }
+type SectionFC = FC<SectionProps> & { Action: typeof SectionAction }
 
 export const Section: SectionFC = ({
   title,

site/src/components/SectionAction/SectionAction.tsx

@@ -1,5 +1,5 @@
 import { makeStyles } from "@material-ui/core/styles"
-import React from "react"
+import { FC } from "react"
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -11,7 +11,7 @@ const useStyles = makeStyles((theme) => ({
  * SectionAction is a content box that call to actions should be placed
  * within
  */
-export const SectionAction: React.FC = ({ children }) => {
+export const SectionAction: FC = ({ children }) => {
   const styles = useStyles()
   return <div className={styles.root}>{children}</div>
 }

site/src/components/SettingsAccountForm/SettingsAccountForm.tsx

@@ -1,7 +1,7 @@
 import FormHelperText from "@material-ui/core/FormHelperText"
 import TextField from "@material-ui/core/TextField"
 import { FormikContextType, FormikErrors, useFormik } from "formik"
-import React from "react"
+import { FC } from "react"
 import * as Yup from "yup"
 import { getFormHelpers, nameValidator, onChangeTrimmed } from "../../util/formUtils"
 import { LoadingButton } from "../LoadingButton/LoadingButton"
@@ -32,7 +32,7 @@ export interface AccountFormProps {
   error?: string
 }
 
-export const AccountForm: React.FC<AccountFormProps> = ({
+export const AccountForm: FC<AccountFormProps> = ({
   email,
   isLoading,
   onSubmit,

site/src/components/SettingsLayout/SettingsLayout.tsx

@@ -1,5 +1,5 @@
 import Box from "@material-ui/core/Box"
-import React from "react"
+import { FC } from "react"
 import { Outlet } from "react-router-dom"
 import { AuthAndFrame } from "../AuthAndFrame/AuthAndFrame"
 import { Margins } from "../Margins/Margins"
@@ -18,7 +18,7 @@ const menuItems = [
   { label: Language.sshKeysLabel, path: "/settings/ssh-keys" },
 ]
 
-export const SettingsLayout: React.FC = () => {
+export const SettingsLayout: FC = () => {
   return (
     <AuthAndFrame>
       <Box display="flex" flexDirection="column">

site/src/components/SignInForm/SignInForm.stories.tsx

@@ -1,5 +1,4 @@
 import { Story } from "@storybook/react"
-import React from "react"
 import { SignInForm, SignInFormProps } from "./SignInForm"
 
 export default {

site/src/components/SignInForm/SignInForm.tsx

@@ -4,7 +4,7 @@ import Link from "@material-ui/core/Link"
 import { makeStyles } from "@material-ui/core/styles"
 import TextField from "@material-ui/core/TextField"
 import { FormikContextType, useFormik } from "formik"
-import React from "react"
+import { FC } from "react"
 import * as Yup from "yup"
 import { AuthMethods } from "../../api/typesGenerated"
 import { getFormHelpers, onChangeTrimmed } from "../../util/formUtils"
@@ -60,7 +60,7 @@ export interface SignInFormProps {
   onSubmit: ({ email, password }: { email: string; password: string }) => Promise<void>
 }
 
-export const SignInForm: React.FC<SignInFormProps> = ({
+export const SignInForm: FC<SignInFormProps> = ({
   authMethods,
   redirectTo,
   isLoading,

site/src/components/SplitButton/SplitButton.test.tsx

@@ -1,5 +1,4 @@
 import { fireEvent, render, screen } from "@testing-library/react"
-import React from "react"
 import { SplitButton, SplitButtonProps } from "./SplitButton"
 
 namespace Helpers {

site/src/components/Stack/Stack.stories.tsx

@@ -1,6 +1,5 @@
 import TextField from "@material-ui/core/TextField"
 import { Story } from "@storybook/react"
-import React from "react"
 import { Stack, StackProps } from "./Stack"
 
 export default {