ref(ts): Prefer component return types to be inferred (#7355)

JSX.Element isn't always quite the right return type for components. We
can simplify this and just let typescript infer the return type for
components (which is inline with what we do in sentry)

Author: evanpurkhiser

src/components/alert.tsx

@@ -8,13 +8,7 @@ type Props = {
   title?: string;
 };
 
-export function Alert({
-  title,
-  children,
-  level,
-  deepLink,
-  dismiss = false,
-}: Props): JSX.Element {
+export function Alert({title, children, level, deepLink, dismiss = false}: Props) {
   let className = 'alert';
   if (level) {
     className += ` alert-${level}`;

src/components/basePage.tsx

@@ -56,7 +56,7 @@ export function BasePage({
   sidebar,
   children,
   prependToc,
-}: Props): JSX.Element {
+}: Props) {
   const tx = getCurrentTransaction();
   if (tx) {
     tx.setStatus('ok');

src/components/cliChecksumTable.tsx

@@ -22,7 +22,7 @@ const ChecksumValue = styled.code`
   white-space: nowrap;
 `;
 
-export function CliChecksumTable(): JSX.Element {
+export function CliChecksumTable() {
   const {
     app: {files, version},
   } = useStaticQuery(query);

src/components/codeBlock.tsx

@@ -317,7 +317,7 @@ const ItemButton = styled('button')<{isActive: boolean}>`
   `}
 `;
 
-function CodeWrapper(props): JSX.Element {
+function CodeWrapper(props) {
   const {children, class: className, ...rest} = props;
 
   return (
@@ -327,7 +327,7 @@ function CodeWrapper(props): JSX.Element {
   );
 }
 
-function SpanWrapper(props): JSX.Element {
+function SpanWrapper(props) {
   const {children, class: className, ...rest} = props;
   return (
     <span className={className} {...rest}>
@@ -343,7 +343,7 @@ type Props = {
   title?: string;
 };
 
-export function CodeBlock({filename, language, children}: Props): JSX.Element {
+export function CodeBlock({filename, language, children}: Props) {
   const [showCopied, setShowCopied] = useState(false);
   const codeRef = useRef(null);
 

src/components/codeTabs.tsx

@@ -24,7 +24,7 @@ type Props = {
   children: JSX.Element | JSX.Element[];
 };
 
-export function CodeTabs({children}: Props): JSX.Element {
+export function CodeTabs({children}: Props) {
   if (!Array.isArray(children)) {
     children = [children];
   } else {

src/components/configKey.tsx

@@ -17,7 +17,7 @@ export function ConfigKey({
   notSupported = [],
   children,
   platform,
-}: Props): JSX.Element {
+}: Props) {
   // This is a literal copypaste of the HTML Gatsby outputs for regular
   // Markdown headings because we can't figure out how to make Gatsby
   // render component content like regular markdown/MDX content. We tried

src/components/content.tsx

@@ -20,7 +20,7 @@ function RawHtml({html}) {
   return <div dangerouslySetInnerHTML={{__html: html}} />;
 }
 
-export function Content({file}: Props): JSX.Element | null {
+export function Content({file}: Props) {
   if (!file) {
     return null;
   }

src/components/definitionList.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
 
-export function DefinitionList({children}: {children: React.ReactNode}): JSX.Element {
+export function DefinitionList({children}: {children: React.ReactNode}) {
   return <div className="large-definition-list">{children}</div>;
 }

src/components/dynamicNav.tsx

@@ -84,11 +84,7 @@ type ChildrenProps = {
   showDepth?: number;
 };
 
-export function Children({
-  tree,
-  exclude = [],
-  showDepth = 0,
-}: ChildrenProps): JSX.Element {
+export function Children({tree, exclude = [], showDepth = 0}: ChildrenProps) {
   return <React.Fragment>{renderChildren(tree, exclude, showDepth)}</React.Fragment>;
 }
 
@@ -114,7 +110,7 @@ export function DynamicNav({
   prependLinks = [],
   suppressMissing = false,
   noHeadingLink = false,
-}: Props): JSX.Element | null {
+}: Props) {
   const location = useLocation();
 
   if (root.startsWith('/')) {

src/components/expandable.tsx

@@ -22,7 +22,7 @@ const ExpandableBody = styled.div<ExpandedProps>`
   display: ${props => (props.isExpanded ? 'block' : 'none')};
 `;
 
-export function Expandable({title, children}: Props): JSX.Element {
+export function Expandable({title, children}: Props) {
   const [isExpanded, setIsExpanded] = useState(false);
   return (
     <div className="note">