diff --git a/packages/core/src/components/CopyTextButton/CopyTextButton.stories.tsx b/packages/core/src/components/CopyTextButton/CopyTextButton.stories.tsx index 7fd78f8057..e8e1317e4e 100644 --- a/packages/core/src/components/CopyTextButton/CopyTextButton.stories.tsx +++ b/packages/core/src/components/CopyTextButton/CopyTextButton.stories.tsx @@ -16,13 +16,13 @@ import React from 'react'; import CopyTextButton from '.'; -import { ApiProvider, errorApiRef, ApiRegistry } from 'api'; +import { ApiProvider, errorApiRef, ApiRegistry, ErrorApi } from 'api'; export default { title: 'CopyTextButton', component: CopyTextButton, decorators: [ - storyFn => { + (storyFn: () => JSX.Element) => { // TODO: move this to common storybook config, requires core package to be separate from components const registry = ApiRegistry.from([ [ @@ -32,7 +32,7 @@ export default { // eslint-disable-next-line no-alert window.alert(`Component posted error, ${error}`); }, - }, + } as ErrorApi, ], ]); return ; diff --git a/packages/core/src/components/CopyTextButton/CopyTextButton.test.tsx b/packages/core/src/components/CopyTextButton/CopyTextButton.test.tsx index 2abf9d0622..28aaf2f0c0 100644 --- a/packages/core/src/components/CopyTextButton/CopyTextButton.test.tsx +++ b/packages/core/src/components/CopyTextButton/CopyTextButton.test.tsx @@ -18,7 +18,7 @@ import React from 'react'; import { render } from '@testing-library/react'; import { wrapInThemedTestApp } from '@backstage/test-utils'; import CopyTextButton from './CopyTextButton'; -import { ApiRegistry, errorApiRef, ApiProvider } from 'api'; +import { ApiRegistry, errorApiRef, ApiProvider, ErrorApi } from 'api'; jest.mock('popper.js', () => { const PopperJS = jest.requireActual('popper.js'); @@ -44,7 +44,7 @@ const apiRegistry = ApiRegistry.from([ post(error) { throw error; }, - }, + } as ErrorApi, ], ]); diff --git a/packages/core/src/components/CopyTextButton/CopyTextButton.tsx b/packages/core/src/components/CopyTextButton/CopyTextButton.tsx index 86c3778d26..62295eb0ce 100644 --- a/packages/core/src/components/CopyTextButton/CopyTextButton.tsx +++ b/packages/core/src/components/CopyTextButton/CopyTextButton.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { FC, useRef, useState } from 'react'; +import React, { FC, useRef, useState, MouseEventHandler } from 'react'; import { IconButton, makeStyles, Tooltip } from '@material-ui/core'; import PropTypes from 'prop-types'; import CopyIcon from '@material-ui/icons/FileCopy'; @@ -66,7 +66,7 @@ const CopyTextButton: FC = props => { const inputRef = useRef(null); const [open, setOpen] = useState(false); - const handleCopyClick = e => { + const handleCopyClick: MouseEventHandler = e => { e.stopPropagation(); setOpen(true); diff --git a/packages/core/src/components/ProgressBars/CircleProgress.tsx b/packages/core/src/components/ProgressBars/CircleProgress.tsx index b1f857d0ac..b2da573de3 100644 --- a/packages/core/src/components/ProgressBars/CircleProgress.tsx +++ b/packages/core/src/components/ProgressBars/CircleProgress.tsx @@ -55,7 +55,12 @@ const defaultProps = { max: 100, }; -export function getProgressColor(palette, value, inverse, max) { +export function getProgressColor( + palette: BackstageTheme['palette'], + value: number, + inverse?: boolean, + max?: number, +) { if (isNaN(value)) { return '#ddd'; } @@ -74,7 +79,7 @@ export function getProgressColor(palette, value, inverse, max) { const CircleProgress: FC = props => { const classes = useStyles(props); - const theme = useTheme(); + const theme = useTheme(); const { value, fractional, inverse, unit, max } = { ...defaultProps, ...props, diff --git a/packages/core/src/components/SortableTable/SortableTable.stories.tsx b/packages/core/src/components/SortableTable/SortableTable.stories.tsx index 3938916156..2a903e1df7 100644 --- a/packages/core/src/components/SortableTable/SortableTable.stories.tsx +++ b/packages/core/src/components/SortableTable/SortableTable.stories.tsx @@ -33,7 +33,11 @@ const data = [ const columns = [ { id: 'id', label: 'ID' }, { id: 'amount', disablePadding: false, numeric: true, label: 'AMOUNT' }, - { id: 'status', label: 'STATUS', sortValue: row => row.statusValue }, + { + id: 'status', + label: 'STATUS', + sortValue: (row: typeof data[0]) => row.statusValue, + }, ]; const footerData = [ { id: 'total', amount: 4, statusValue: 2, status: }, diff --git a/packages/core/src/components/StructuredMetadataTable/StructuredMetadataTable.stories.tsx b/packages/core/src/components/StructuredMetadataTable/StructuredMetadataTable.stories.tsx index 5a04520dd1..334219c881 100644 --- a/packages/core/src/components/StructuredMetadataTable/StructuredMetadataTable.stories.tsx +++ b/packages/core/src/components/StructuredMetadataTable/StructuredMetadataTable.stories.tsx @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React from 'react'; +import React, { FC } from 'react'; import InfoCard from '../../layout/InfoCard'; import { Grid } from '@material-ui/core'; import StructuredMetadataTable from '.'; @@ -41,7 +41,7 @@ export default { component: StructuredMetadataTable, }; -const Wrapper = ({ children }) => ( +const Wrapper: FC<{}> = ({ children }) => ( {children} diff --git a/packages/core/src/components/SupportButton/SupportButton.tsx b/packages/core/src/components/SupportButton/SupportButton.tsx index 076ec2d3c9..c884086bfa 100644 --- a/packages/core/src/components/SupportButton/SupportButton.tsx +++ b/packages/core/src/components/SupportButton/SupportButton.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, { FC, Fragment, useState } from 'react'; +import React, { FC, Fragment, useState, MouseEventHandler } from 'react'; import { Button, Link, @@ -58,10 +58,10 @@ const SupportButton: FC = ({ // TODO: get plugin manifest with hook const [popoverOpen, setPopoverOpen] = useState(false); - const [anchorEl, setAnchorEl] = useState(null); + const [anchorEl, setAnchorEl] = useState(null); const classes = useStyles(); - const onClickHandler = event => { + const onClickHandler: MouseEventHandler = event => { setAnchorEl(event.currentTarget); setPopoverOpen(true); }; diff --git a/packages/core/src/components/WarningPanel/WarningPanel.tsx b/packages/core/src/components/WarningPanel/WarningPanel.tsx index 1d3b3e03db..a3e6ed6c78 100644 --- a/packages/core/src/components/WarningPanel/WarningPanel.tsx +++ b/packages/core/src/components/WarningPanel/WarningPanel.tsx @@ -15,17 +15,20 @@ */ import React, { FC } from 'react'; -import { Typography, withStyles, makeStyles } from '@material-ui/core'; +import { Typography, makeStyles } from '@material-ui/core'; import { BackstageTheme } from '@backstage/theme'; import ErrorOutline from '@material-ui/icons/ErrorOutline'; -const errorOutlineStyles = theme => ({ +const useErrorOutlineStyles = makeStyles(theme => ({ root: { marginRight: theme.spacing(1), fill: theme.palette.warningText, }, -}); -const ErrorOutlineStyled = withStyles(errorOutlineStyles)(ErrorOutline); +})); +const ErrorOutlineStyled = () => { + const classes = useErrorOutlineStyles(); + return ; +}; const useStyles = makeStyles(theme => ({ message: { diff --git a/packages/core/src/layout/TabbedCard/TabbedCard.tsx b/packages/core/src/layout/TabbedCard/TabbedCard.tsx index bd7443e924..4dd1399fb0 100644 --- a/packages/core/src/layout/TabbedCard/TabbedCard.tsx +++ b/packages/core/src/layout/TabbedCard/TabbedCard.tsx @@ -68,7 +68,7 @@ const TabbedCard: FC = ({ const handleChange = onChange ? onChange - : (_ev, newSelectedIndex: number) => selectIndex(newSelectedIndex); + : (_ev: unknown, newSelectedIndex: number) => selectIndex(newSelectedIndex); let selectedTabContent: ReactNode; if (!value) {