Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 0171ccb

Browse files
Kira-PilotKira-Pilot
authored
chore: forbid direct react import (#5658)
1 parent efee03f commit 0171ccb

File tree

49 files changed

+171
-159
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

49 files changed

+171
-159
lines changed

‎site/.eslintrc.yaml

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,15 @@ rules:
122122
react/jsx-uses-react: "off"
123123
react/react-in-jsx-scope: "off"
124124
"unicorn/explicit-length-check": "error"
125+
# https://github.com/jsx-eslint/eslint-plugin-react/issues/2628#issuecomment-984160944
126+
no-restricted-syntax:
127+
[
128+
"error",
129+
{
130+
selector: "ImportDeclaration[source.value='react'][specifiers.0.type='ImportDefaultSpecifier']",
131+
message: "Default React import not allowed",
132+
},
133+
]
125134
settings:
126135
react:
127136
version: detect

‎site/src/components/AppLink/AppLinkSkeleton.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { makeStyles } from "@material-ui/core/styles"
22
import { Skeleton } from "@material-ui/lab"
3-
import React from "react"
3+
import { FC } from "react"
44
import { borderRadiusSm } from "theme/constants"
55

6-
export const AppLinkSkeleton: React.FC<{ width: number }> = ({ width }) => {
6+
export const AppLinkSkeleton: FC<{ width: number }> = ({ width }) => {
77
const styles = useStyles()
88
return (
99
<Skeleton

‎site/src/components/CopyableValue/CopyableValue.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@ import { makeStyles } from "@material-ui/core/styles"
22
import Tooltip from "@material-ui/core/Tooltip"
33
import { useClickable } from "hooks/useClickable"
44
import { useClipboard } from "hooks/useClipboard"
5-
import React, { HTMLProps } from "react"
5+
import { FC, HTMLProps } from "react"
66
import { combineClasses } from "util/combineClasses"
77

88
interface CopyableValueProps extends HTMLProps<HTMLDivElement> {
99
value: string
1010
}
1111

12-
export const CopyableValue: React.FC<CopyableValueProps> = ({
12+
export const CopyableValue: FC<CopyableValueProps> = ({
1313
value,
1414
className,
1515
...props

‎site/src/components/DeploySettingsLayout/Badges.tsx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { makeStyles } from "@material-ui/core/styles"
22
import { Stack } from "components/Stack/Stack"
3-
import React, { PropsWithChildren } from "react"
3+
import { PropsWithChildren, FC } from "react"
44
import { MONOSPACE_FONT_FAMILY } from "theme/constants"
55
import { combineClasses } from "util/combineClasses"
66

7-
export const EnabledBadge: React.FC = () => {
7+
export const EnabledBadge: FC = () => {
88
const styles = useStyles()
99
return (
1010
<span className={combineClasses([styles.badge, styles.enabledBadge])}>
@@ -13,7 +13,7 @@ export const EnabledBadge: React.FC = () => {
1313
)
1414
}
1515

16-
export const EntitledBadge: React.FC = () => {
16+
export const EntitledBadge: FC = () => {
1717
const styles = useStyles()
1818
return (
1919
<span className={combineClasses([styles.badge, styles.enabledBadge])}>
@@ -22,7 +22,7 @@ export const EntitledBadge: React.FC = () => {
2222
)
2323
}
2424

25-
export const DisabledBadge: React.FC = () => {
25+
export const DisabledBadge: FC = () => {
2626
const styles = useStyles()
2727
return (
2828
<span className={combineClasses([styles.badge, styles.disabledBadge])}>
@@ -31,7 +31,7 @@ export const DisabledBadge: React.FC = () => {
3131
)
3232
}
3333

34-
export const EnterpriseBadge: React.FC = () => {
34+
export const EnterpriseBadge: FC = () => {
3535
const styles = useStyles()
3636
return (
3737
<span className={combineClasses([styles.badge, styles.enterpriseBadge])}>
@@ -40,7 +40,7 @@ export const EnterpriseBadge: React.FC = () => {
4040
)
4141
}
4242

43-
export const VersionBadge: React.FC<{
43+
export const VersionBadge: FC<{
4444
version: string
4545
}> = ({ version }) => {
4646
const styles = useStyles()
@@ -51,7 +51,7 @@ export const VersionBadge: React.FC<{
5151
)
5252
}
5353

54-
export const Badges: React.FC<PropsWithChildren> = ({ children }) => {
54+
export const Badges: FC<PropsWithChildren> = ({ children }) => {
5555
const styles = useStyles()
5656
return (
5757
<Stack

‎site/src/components/DeploySettingsLayout/DeploySettingsLayout.tsx

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,13 @@ import { makeStyles } from "@material-ui/core/styles"
22
import { Margins } from "components/Margins/Margins"
33
import { Stack } from "components/Stack/Stack"
44
import { Sidebar } from "./Sidebar"
5-
import React, {
5+
import {
66
createContext,
77
PropsWithChildren,
88
Suspense,
99
useContext,
1010
useEffect,
11+
FC,
1112
} from "react"
1213
import { useActor } from "@xstate/react"
1314
import { XServiceContext } from "xServices/StateContext"
@@ -30,9 +31,7 @@ export const useDeploySettings = (): DeploySettingsContextValue => {
3031
return context
3132
}
3233

33-
export const DeploySettingsLayout: React.FC<PropsWithChildren> = ({
34-
children,
35-
}) => {
34+
export const DeploySettingsLayout: FC<PropsWithChildren> = ({ children }) => {
3635
const xServices = useContext(XServiceContext)
3736
const [state, send] = useActor(xServices.deploymentConfigXService)
3837
const styles = useStyles()

‎site/src/components/DeploySettingsLayout/Fieldset.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import { makeStyles } from "@material-ui/core/styles"
2-
import React from "react"
2+
import { FC, ReactNode, FormEventHandler } from "react"
33
import Button from "@material-ui/core/Button"
44

5-
export const Fieldset: React.FC<{
6-
children: React.ReactNode
5+
export const Fieldset: FC<{
6+
children: ReactNode
77
title: string | JSX.Element
88
validation?: string | JSX.Element | false
99
button?: JSX.Element | false
10-
onSubmit: React.FormEventHandler<HTMLFormElement>
10+
onSubmit: FormEventHandler<HTMLFormElement>
1111
isSubmitting?: boolean
1212
}> = ({ title, children, validation, button, onSubmit, isSubmitting }) => {
1313
const styles = useStyles()

‎site/src/components/DeploySettingsLayout/Header.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ import Button from "@material-ui/core/Button"
22
import { makeStyles } from "@material-ui/core/styles"
33
import LaunchOutlined from "@material-ui/icons/LaunchOutlined"
44
import { Stack } from "components/Stack/Stack"
5-
import React from "react"
5+
import { FC } from "react"
66

7-
export const Header: React.FC<{
7+
export const Header: FC<{
88
title: string | JSX.Element
99
description?: string | JSX.Element
1010
secondary?: boolean

‎site/src/components/DeploySettingsLayout/Option.tsx

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,25 @@
11
import { makeStyles } from "@material-ui/core/styles"
2-
import React, { PropsWithChildren } from "react"
2+
import { PropsWithChildren, FC } from "react"
33
import { MONOSPACE_FONT_FAMILY } from "theme/constants"
44
import { DisabledBadge, EnabledBadge } from "./Badges"
55

6-
export const OptionName: React.FC<PropsWithChildren> = ({ children }) => {
6+
export const OptionName: FC<PropsWithChildren> = ({ children }) => {
77
const styles = useStyles()
88
return <span className={styles.optionName}>{children}</span>
99
}
1010

11-
export const OptionDescription: React.FC<PropsWithChildren> = ({
12-
children,
13-
}) => {
11+
export const OptionDescription: FC<PropsWithChildren> = ({ children }) => {
1412
const styles = useStyles()
1513
return <span className={styles.optionDescription}>{children}</span>
1614
}
1715

18-
const NotSet: React.FC = () => {
16+
const NotSet: FC = () => {
1917
const styles = useStyles()
2018

2119
return <span className={styles.optionValue}>Not set</span>
2220
}
2321

24-
export const OptionValue: React.FC<PropsWithChildren> = ({ children }) => {
22+
export const OptionValue: FC<PropsWithChildren> = ({ children }) => {
2523
const styles = useStyles()
2624

2725
if (typeof children === "boolean") {

‎site/src/components/DeploySettingsLayout/OptionsTable.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,9 @@ import {
1111
OptionName,
1212
OptionValue,
1313
} from "components/DeploySettingsLayout/Option"
14-
import React from "react"
14+
import { FC } from "react"
1515

16-
const OptionsTable: React.FC<{
16+
const OptionsTable: FC<{
1717
options: Record<string, DeploymentConfigField<Flaggable>>
1818
}> = ({ options }) => {
1919
const styles = useStyles()

‎site/src/components/DeploySettingsLayout/Sidebar.tsx

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,11 @@ import Globe from "@material-ui/icons/Public"
66
import VpnKeyOutlined from "@material-ui/icons/VpnKeyOutlined"
77
import { GitIcon } from "components/Icons/GitIcon"
88
import { Stack } from "components/Stack/Stack"
9-
import React, { ElementType, PropsWithChildren, ReactNode } from "react"
9+
import { ElementType, PropsWithChildren, ReactNode, FC } from "react"
1010
import { NavLink } from "react-router-dom"
1111
import { combineClasses } from "util/combineClasses"
1212

13-
const SidebarNavItem: React.FC<
13+
const SidebarNavItem: FC<
1414
PropsWithChildren<{ href: string; icon: ReactNode }>
1515
> = ({ children, href, icon }) => {
1616
const styles = useStyles()
@@ -32,9 +32,7 @@ const SidebarNavItem: React.FC<
3232
)
3333
}
3434

35-
const SidebarNavItemIcon: React.FC<{ icon: ElementType }> = ({
36-
icon: Icon,
37-
}) => {
35+
const SidebarNavItemIcon: FC<{ icon: ElementType }> = ({ icon: Icon }) => {
3836
const styles = useStyles()
3937
return <Icon className={styles.sidebarNavItemIcon} />
4038
}

‎site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.tsx

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import DialogActions from "@material-ui/core/DialogActions"
22
import { alpha, makeStyles } from "@material-ui/core/styles"
33
import Typography from "@material-ui/core/Typography"
4-
import React, { ReactNode } from "react"
4+
import { ReactNode, FC, PropsWithChildren } from "react"
55
import {
66
Dialog,
77
DialogActionButtons,
@@ -37,7 +37,7 @@ export interface ConfirmDialogProps
3737
DialogActionButtonsProps,
3838
"color" | "confirmDialog" | "onCancel"
3939
> {
40-
readonly description?: React.ReactNode
40+
readonly description?: ReactNode
4141
/**
4242
* hideCancel hides the cancel button when set true, and shows the cancel
4343
* button when set to false. When undefined:
@@ -88,9 +88,7 @@ const useStyles = makeStyles((theme) => ({
8888
* Quick-use version of the Dialog component with slightly alternative styles,
8989
* great to use for dialogs that don't have any interaction beyond yes / no.
9090
*/
91-
export const ConfirmDialog: React.FC<
92-
React.PropsWithChildren<ConfirmDialogProps>
93-
> = ({
91+
export const ConfirmDialog: FC<PropsWithChildren<ConfirmDialogProps>> = ({
9492
cancelText,
9593
confirmLoading,
9694
confirmText,

‎site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import TextField from "@material-ui/core/TextField"
44
import Typography from "@material-ui/core/Typography"
55
import { Maybe } from "components/Conditionals/Maybe"
66
import { Stack } from "components/Stack/Stack"
7-
import React, { ChangeEvent, useState } from "react"
7+
import { ChangeEvent, useState, PropsWithChildren, FC } from "react"
88
import { useTranslation } from "react-i18next"
99
import { ConfirmDialog } from "../ConfirmDialog/ConfirmDialog"
1010

@@ -18,9 +18,15 @@ export interface DeleteDialogProps {
1818
confirmLoading?: boolean
1919
}
2020

21-
export const DeleteDialog: React.FC<
22-
React.PropsWithChildren<DeleteDialogProps>
23-
> = ({ isOpen, onCancel, onConfirm, entity, info, name, confirmLoading }) => {
21+
export const DeleteDialog: FC<PropsWithChildren<DeleteDialogProps>> = ({
22+
isOpen,
23+
onCancel,
24+
onConfirm,
25+
entity,
26+
info,
27+
name,
28+
confirmLoading,
29+
}) => {
2430
const styles = useStyles()
2531
const { t } = useTranslation("common")
2632
const [nameValue, setNameValue] = useState("")

‎site/src/components/ErrorBoundary/ErrorBoundary.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import React, { Component, ReactNode } from "react"
1+
import { Component, ReactNode, PropsWithChildren } from "react"
22
import { RuntimeErrorState } from "../RuntimeErrorState/RuntimeErrorState"
33

4-
type ErrorBoundaryProps = React.PropsWithChildren<unknown>
4+
type ErrorBoundaryProps = PropsWithChildren<unknown>
55

66
interface ErrorBoundaryState {
77
error: Error | null

‎site/src/components/FormCloseButton/FormCloseButton.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
import IconButton from "@material-ui/core/IconButton"
22
import { makeStyles } from "@material-ui/core/styles"
33
import Typography from "@material-ui/core/Typography"
4-
import React, { useEffect } from "react"
4+
import { useEffect, FC, PropsWithChildren } from "react"
55
import { CloseIcon } from "../Icons/CloseIcon"
66

77
export interface FormCloseButtonProps {
88
onClose: () => void
99
}
1010

11-
export const FormCloseButton: React.FC<
12-
React.PropsWithChildren<FormCloseButtonProps>
13-
> = ({ onClose }) => {
11+
export const FormCloseButton: FC<PropsWithChildren<FormCloseButtonProps>> = ({
12+
onClose,
13+
}) => {
1414
const styles = useStyles()
1515

1616
useEffect(() => {

‎site/src/components/GlobalSnackbar/GlobalSnackbar.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { makeStyles } from "@material-ui/core/styles"
2-
import React, { useCallback, useState } from "react"
2+
import { useCallback, useState, FC } from "react"
33
import { useCustomEvent } from "../../hooks/events"
44
import { CustomEventListener } from "../../util/events"
55
import { EnterpriseSnackbar } from "../EnterpriseSnackbar/EnterpriseSnackbar"
@@ -25,7 +25,7 @@ const variantFromMsgType = (type: MsgType) => {
2525
}
2626
}
2727

28-
export const GlobalSnackbar: React.FC = () => {
28+
export const GlobalSnackbar: FC = () => {
2929
const styles = useStyles()
3030
const [open, setOpen] = useState<boolean>(false)
3131
const [notification, setNotification] = useState<NotificationMsg>()

‎site/src/components/Markdown/Markdown.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import TableCell from "@material-ui/core/TableCell"
66
import TableContainer from "@material-ui/core/TableContainer"
77
import TableHead from "@material-ui/core/TableHead"
88
import TableRow from "@material-ui/core/TableRow"
9-
import React, { FC } from "react"
9+
import { FC, memo } from "react"
1010
import ReactMarkdown from "react-markdown"
1111
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"
1212
import gfm from "remark-gfm"
@@ -98,7 +98,7 @@ export const Markdown: FC<{ children: string }> = ({ children }) => {
9898
)
9999
}
100100

101-
export const MemoizedMarkdown = React.memo(Markdown)
101+
export const MemoizedMarkdown = memo(Markdown)
102102

103103
const useStyles = makeStyles((theme) => ({
104104
markdown: {

‎site/src/components/Navbar/Navbar.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import { shallowEqual, useActor, useSelector } from "@xstate/react"
22
import { FeatureNames } from "api/types"
3-
import React, { useContext } from "react"
3+
import { useContext, FC } from "react"
44
import { selectFeatureVisibility } from "xServices/entitlements/entitlementsSelectors"
55
import { XServiceContext } from "../../xServices/StateContext"
66
import { NavbarView } from "../NavbarView/NavbarView"
77

8-
export const Navbar: React.FC = () => {
8+
export const Navbar: FC = () => {
99
const xServices = useContext(XServiceContext)
1010
const [appearanceState] = useActor(xServices.appearanceXService)
1111
const [authState, authSend] = useActor(xServices.authXService)

‎site/src/components/PasswordField/PasswordField.tsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,14 @@ import { makeStyles } from "@material-ui/core/styles"
44
import TextField, { TextFieldProps } from "@material-ui/core/TextField"
55
import VisibilityOffOutlined from "@material-ui/icons/VisibilityOffOutlined"
66
import VisibilityOutlined from "@material-ui/icons/VisibilityOutlined"
7-
import React, { useCallback, useState } from "react"
7+
import { useCallback, useState, FC, PropsWithChildren } from "react"
88

99
type PasswordFieldProps = Omit<TextFieldProps, "InputProps" | "type">
1010

11-
export const PasswordField: React.FC<
12-
React.PropsWithChildren<PasswordFieldProps>
13-
> = ({ variant = "outlined", ...rest }) => {
11+
export const PasswordField: FC<PropsWithChildren<PasswordFieldProps>> = ({
12+
variant = "outlined",
13+
...rest
14+
}) => {
1415
const styles = useStyles()
1516
const [showPassword, setShowPassword] = useState<boolean>(false)
1617

0 commit comments

Comments
 (0)