Merge pull request #9437 from backstage/rugvip/report-fixes

core-components,catalog-react: clean up API reports

packages/core-components/src/components/Button/Button.tsx

@@ -31,6 +31,13 @@ import { Link, LinkProps } from '../Link';
 export type ButtonProps = MaterialButtonProps &
   Omit<LinkProps, 'variant' | 'color'>;
 
+/**
+ * This wrapper is here to reset the color of the Link and make typescript happy.
+ */
+const LinkWrapper = React.forwardRef<any, LinkProps>((props, ref) => (
+  <Link ref={ref} {...props} color="initial" />
+));
+
 /**
  * Thin wrapper on top of material-ui's {@link https://v4.mui.com/components/buttons/ | Button} component
  *
@@ -39,23 +46,6 @@ export type ButtonProps = MaterialButtonProps &
  *
  * Makes the Button to utilise react-router
  */
-declare function ButtonType(props: ButtonProps): JSX.Element;
-
-/**
- * This wrapper is here to reset the color of the Link and make typescript happy.
- */
-const LinkWrapper = React.forwardRef<any, LinkProps>((props, ref) => (
-  <Link ref={ref} {...props} color="initial" />
-));
-
-/** @public */
-const ActualButton = React.forwardRef<any, ButtonProps>((props, ref) => (
+export const Button = React.forwardRef<any, ButtonProps>((props, ref) => (
   <MaterialButton ref={ref} component={LinkWrapper} {...props} />
-)) as { (props: ButtonProps): JSX.Element };
-
-// TODO(Rugvip): We use this as a workaround to make the exported type be a
-//               function, which makes our API reference docs much nicer.
-//               The first type to be exported gets priority, but it will
-//               be thrown away when compiling to JS.
-// @ts-ignore
-export { ButtonType as Button, ActualButton as Button };
+)) as (props: ButtonProps) => JSX.Element;

packages/core-components/src/components/Link/Link.tsx

@@ -32,8 +32,6 @@ export type LinkProps = MaterialLinkProps &
     noTrack?: boolean;
   };
 
-declare function LinkType(props: LinkProps): JSX.Element;
-
 /**
  * Given a react node, try to retrieve its text content.
  */
@@ -62,7 +60,7 @@ const getNodeText = (node: React.ReactNode): string => {
  * - Makes the Link use react-router
  * - Captures Link clicks as analytics events.
  */
-const ActualLink = React.forwardRef<any, LinkProps>(
+export const Link = React.forwardRef<any, LinkProps>(
   ({ onClick, noTrack, ...props }, ref) => {
     const analytics = useAnalytics();
     const to = String(props.to);
@@ -96,11 +94,4 @@ const ActualLink = React.forwardRef<any, LinkProps>(
       />
     );
   },
-);
-
-// TODO(Rugvip): We use this as a workaround to make the exported type be a
-//               function, which makes our API reference docs much nicer.
-//               The first type to be exported gets priority, but it will
-//               be thrown away when compiling to JS.
-// @ts-ignore
-export { LinkType as Link, ActualLink as Link };
+) as (props: LinkProps) => JSX.Element;

packages/core-components/src/layout/Sidebar/Items.tsx

@@ -21,13 +21,18 @@ import useMediaQuery from '@material-ui/core/useMediaQuery';
 import Badge from '@material-ui/core/Badge';
 import TextField from '@material-ui/core/TextField';
 import Typography from '@material-ui/core/Typography';
-import { CreateCSSProperties } from '@material-ui/core/styles/withStyles';
+import {
+  CreateCSSProperties,
+  StyledComponentProps,
+} from '@material-ui/core/styles/withStyles';
 import ArrowRightIcon from '@material-ui/icons/ArrowRight';
 import SearchIcon from '@material-ui/icons/Search';
 import ArrowDropUp from '@material-ui/icons/ArrowDropUp';
 import ArrowDropDown from '@material-ui/icons/ArrowDropDown';
 import classnames from 'classnames';
 import React, {
+  ComponentProps,
+  ComponentType,
   forwardRef,
   KeyboardEventHandler,
   ReactNode,
@@ -504,7 +509,7 @@ export const SidebarItem = forwardRef<any, SidebarItemProps>((props, ref) => {
   }
 
   return <SidebarItemBase {...props} ref={ref} />;
-});
+}) as (props: SidebarItemProps) => JSX.Element;
 
 type SidebarSearchFieldProps = {
   onSearch: (input: string) => void;
@@ -580,7 +585,7 @@ export const SidebarSpace = styled('div')(
     flex: 1,
   },
   { name: 'BackstageSidebarSpace' },
-);
+) as ComponentType<ComponentProps<'div'> & StyledComponentProps<'root'>>;
 
 export type SidebarSpacerClassKey = 'root';
 
@@ -589,7 +594,7 @@ export const SidebarSpacer = styled('div')(
     height: 8,
   },
   { name: 'BackstageSidebarSpacer' },
-);
+) as ComponentType<ComponentProps<'div'> & StyledComponentProps<'root'>>;
 
 export type SidebarDividerClassKey = 'root';
 
@@ -602,7 +607,7 @@ export const SidebarDivider = styled('hr')(
     margin: '12px 0px',
   },
   { name: 'BackstageSidebarDivider' },
-);
+) as ComponentType<ComponentProps<'hr'> & StyledComponentProps<'root'>>;
 
 const styledScrollbar = (theme: Theme): CreateCSSProperties => ({
   overflowY: 'auto',
@@ -631,7 +636,7 @@ export const SidebarScrollWrapper = styled('div')(({ theme }) => {
     '@media (hover: none)': scrollbarStyles,
     '&:hover': scrollbarStyles,
   };
-});
+}) as ComponentType<ComponentProps<'div'> & StyledComponentProps<'root'>>;
 
 /**
  * A button which allows you to expand the sidebar when clicked.