Stop using React.JSX.Element and explicitly type all components

.eslintrc.cjs

@@ -22,7 +22,7 @@ module.exports = {
   plugins: ["prettier", "react", "@typescript-eslint", "matrix-org"],
   settings: {
     react: {
-      version: "detect",
+      version: "17",
     },
   },
 };

src/components/ActionControl/ActionControl.tsx

@@ -28,14 +28,14 @@ type ActionControlProps = {
   disabled?: boolean;
 } & React.ComponentProps<typeof Control>;
 
-export const ActionControl = ({
+export const ActionControl: React.FC<PropsWithChildren<ActionControlProps>> = ({
   children,
   Icon,
   className,
   actionLabel,
   onActionClick,
   ...props
-}: PropsWithChildren<ActionControlProps>) => {
+}) => {
   const id = useId();
   const classes = classnames(styles.actioncontrol, className);
   return (
@@ -62,9 +62,9 @@ export const ActionControl = ({
   );
 };
 
-export const StandaloneActionControl = (
-  props: PropsWithChildren<ActionControlProps>
-): React.JSX.Element => {
+export const StandaloneActionControl: React.FC<
+  PropsWithChildren<ActionControlProps>
+> = (props) => {
   return (
     <Root>
       <Field name="action">

src/components/Alert/Alert.tsx

@@ -31,14 +31,14 @@ type AlertProps = {
   onClose?: (e: React.MouseEvent) => void;
 };
 
-export const Alert = ({
+export const Alert: React.FC<PropsWithChildren<AlertProps>> = ({
   type,
   title,
   children,
   className,
   onClose,
   ...props
-}: PropsWithChildren<AlertProps>): React.JSX.Element => {
+}: PropsWithChildren<AlertProps>) => {
   const classes = classNames(styles.alert, className);
 
   const renderIcon = useCallback(

src/components/Avatar/Avatar.tsx

@@ -30,14 +30,14 @@ type AvatarProps = {
   size?: CSSStyleDeclaration["height"];
 };
 
-export const Avatar = ({
+export const Avatar: React.FC<AvatarProps> = ({
   src,
   id,
   name = "",
   type = "round",
   className = "",
   size,
-}: AvatarProps): React.JSX.Element => {
+}) => {
   const hash = useIdColorHash(id);
   const style = {
     "--cpd-avatar-size": size,

src/components/Avatar/AvatarStack.tsx

@@ -34,10 +34,9 @@ let AvatarStackUsageCount = 0;
  * The `type` of avatars should always be set to `round`
  * And all the avatars should have the same size.
  */
-export const AvatarStack = ({
-  children,
-  className,
-}: React.PropsWithChildren<AvatarStackProps>): React.JSX.Element => {
+export const AvatarStack: React.FC<
+  React.PropsWithChildren<AvatarStackProps>
+> = ({ children, className }) => {
   /**
    * The `clip-path` property in CSS supports a `path()` function, however
    * that has to use pixel values.

src/components/Badge/Badge.tsx

@@ -24,11 +24,11 @@ type BadgeProps = {
   kind?: "default" | "success" | "critical";
 };
 
-export const Badge = ({
+export const Badge: React.FC<PropsWithChildren<BadgeProps>> = ({
   children,
   kind = "default",
   className,
-}: PropsWithChildren<BadgeProps>) => {
+}) => {
   const classes = classnames(styles.badge, className);
   return (
     <Typography

src/components/Button/Button.tsx

@@ -32,7 +32,7 @@ export const Button = <C extends React.ElementType = "button">({
   children,
   className,
   ...props
-}: PropsWithChildren<ButtonProps<C>>): React.JSX.Element => {
+}: PropsWithChildren<ButtonProps<C>>): React.ReactElement => {
   const Component = as || "button";
   const classes = classNames(styles.button, className);
 

src/components/Checkbox/Checkbox.tsx

@@ -25,12 +25,12 @@ type CheckboxProps = {
   onMouseDown?: (e: React.MouseEvent<HTMLInputElement, MouseEvent>) => void;
 } & React.ComponentPropsWithoutRef<"input">;
 
-export const Checkbox = ({
+export const Checkbox: React.FC<PropsWithChildren<CheckboxProps>> = ({
   kind = "primary",
   className,
   onMouseDown,
   ...props
-}: PropsWithChildren<CheckboxProps>) => {
+}) => {
   const classes = classnames(styles.checkbox, className);
   return (
     <div className={classes} data-kind={kind}>

src/components/Form/Control.tsx

@@ -28,14 +28,14 @@ type ControlProps = {
  * Thin wrapper around Radix UI Control component
  * https://www.radix-ui.com/docs/primitives/components/form#control
  */
-export function Control({
+export const Control: React.FC<PropsWithChildren<ControlProps>> = ({
   children,
   ...props
-}: PropsWithChildren<ControlProps>): React.JSX.Element {
+}) => {
   const classes = classNames(styles.control, props.className);
   return (
     <RadixControl {...props} className={classes}>
       {children}
     </RadixControl>
   );
-}
+};

src/components/Form/Controls/MFA/MFA.test.tsx

@@ -25,28 +25,26 @@ import { Label } from "../../Label";
 import { Control } from "../../Control";
 
 describe("PasswordControl", () => {
-  function getMfa(
-    props: React.ComponentProps<typeof MFAControl> = {}
-  ): JSX.Element {
-    return (
-      <Root>
-        <Field name="mfa">
-          <Label>MFA</Label>
-          <Control asChild>
-            <MFAControl {...props} placeholder="000000" />
-          </Control>
-        </Field>
-      </Root>
-    );
-  }
+  const MFA: React.FC<React.ComponentProps<typeof MFAControl>> = (
+    props = {}
+  ) => (
+    <Root>
+      <Field name="mfa">
+        <Label>MFA</Label>
+        <Control asChild>
+          <MFAControl {...props} placeholder="000000" />
+        </Control>
+      </Field>
+    </Root>
+  );
 
   it("renders", () => {
-    const { asFragment } = render(getMfa());
+    const { asFragment } = render(<MFA />);
     expect(asFragment()).toMatchSnapshot();
   });
 
   it("only allows digits", async () => {
-    const { getByLabelText } = render(getMfa());
+    const { getByLabelText } = render(<MFA />);
 
     const input = getByLabelText("MFA");
     await act(async () => {
@@ -57,7 +55,7 @@ describe("PasswordControl", () => {
   });
 
   it("respects max length", async () => {
-    const { getByLabelText } = render(getMfa({ length: 3 }));
+    const { getByLabelText } = render(<MFA length={3} />);
 
     const input = getByLabelText("MFA");
     await act(async () => {

src/components/Form/Controls/Password/Password.tsx

@@ -39,9 +39,9 @@ const hideState = {
  * Thin wrapper around Radix UI Control component
  * https://www.radix-ui.com/docs/primitives/components/form#control
  */
-export function PasswordControl(
-  props: PropsWithChildren<React.ComponentProps<typeof Control>>
-): React.JSX.Element {
+export const PasswordControl: React.FC<
+  PropsWithChildren<React.ComponentProps<typeof Control>>
+> = (props) => {
   const [{ icon, label, type }, togglePasswordVisibility] = useReducer(
     (state) => (!state.isHidden ? showState : hideState),
     showState
@@ -56,4 +56,4 @@ export function PasswordControl(
       type={type}
     />
   );
-}
+};

src/components/Form/Field.tsx

@@ -28,14 +28,14 @@ type FieldProps = {
  * Thin wrapper around Radix UI Field component
  * https://www.radix-ui.com/docs/primitives/components/form#field
  */
-export function Field({
+export const Field: React.FC<PropsWithChildren<FieldProps>> = ({
   children,
   ...props
-}: PropsWithChildren<FieldProps>): React.JSX.Element {
+}) => {
   const classes = classNames(styles.field, props.className);
   return (
     <RadixField {...props} className={classes}>
       {children}
     </RadixField>
   );
-}
+};

src/components/Form/Label.tsx

@@ -28,14 +28,14 @@ type LabelProps = {
  * Thin wrapper around Radix UI Label component
  * https://www.radix-ui.com/docs/primitives/components/form#label
  */
-export function Label({
+export const Label: React.FC<PropsWithChildren<LabelProps>> = ({
   children,
   ...props
-}: PropsWithChildren<LabelProps>): React.JSX.Element {
+}) => {
   const classes = classNames(styles.label, props.className);
   return (
     <RadixLabel {...props} className={classes}>
       {children}
     </RadixLabel>
   );
-}
+};

src/components/Form/Message.tsx

@@ -28,16 +28,16 @@ type MessageProps = {
  * Thin wrapper around Radix UI Message component
  * https://www.radix-ui.com/docs/primitives/components/form#message
  */
-export function Message({
+export const Message: React.FC<PropsWithChildren<MessageProps>> = ({
   children,
   ...props
-}: PropsWithChildren<MessageProps>): React.JSX.Element {
+}) => {
   const classes = classNames(styles.message, props.className);
   return (
     <RadixMessage {...props} className={classes}>
-      {/* Pending to be replaced by the alert component, see 
+      {/* Pending to be replaced by the alert component, see
           https://github.com/vector-im/compound-web/pull/6 */}
       {children}
     </RadixMessage>
   );
-}
+};

src/components/Form/Root.tsx

@@ -28,14 +28,14 @@ type RootProps = {
  * Thin wrapper around Radix UI Root component
  * https://www.radix-ui.com/docs/primitives/components/form#root
  */
-export function Root({
+export const Root: React.FC<PropsWithChildren<RootProps>> = ({
   children,
   ...props
-}: PropsWithChildren<RootProps>): React.JSX.Element {
+}) => {
   const classes = classNames(styles.root, props.className);
   return (
     <RadixRoot {...props} className={classes}>
       {children}
     </RadixRoot>
   );
-}
+};

src/components/Form/Submit.tsx

@@ -30,11 +30,11 @@ type SubmitProps = {
  * Thin wrapper around Radix UI Submit component
  * https://www.radix-ui.com/docs/primitives/components/form#submit
  */
-export function Submit({
+export const Submit: React.FC<PropsWithChildren<SubmitProps>> = ({
   children,
   size,
   ...props
-}: PropsWithChildren<SubmitProps>): React.JSX.Element {
+}) => {
   const classes = classNames(styles.submit, props.className);
   return (
     <RadixSubmit {...props} asChild>
@@ -43,4 +43,4 @@ export function Submit({
       </Button>
     </RadixSubmit>
   );
-}
+};

src/components/Form/ValidityState.tsx

@@ -21,9 +21,8 @@ import { ValidityState as RadixValidityState } from "@radix-ui/react-form";
  * Thin wrapper around Radix UI ValidityState component
  * https://www.radix-ui.com/docs/primitives/components/form#validitystate
  */
-export function ValidityState({
-  children,
-  ...props
-}: React.ComponentProps<typeof RadixValidityState>): React.JSX.Element {
+export const ValidityState: React.FC<
+  React.ComponentProps<typeof RadixValidityState>
+> = ({ children, ...props }) => {
   return <RadixValidityState {...props}>{children}</RadixValidityState>;
-}
+};

src/components/Link/Link.tsx

@@ -23,12 +23,12 @@ type LinkProps = {
   kind?: "primary" | "critical";
 } & Omit<React.HTMLProps<HTMLAnchorElement>, "rel">;
 
-export const Link = ({
+export const Link: React.FC<PropsWithChildren<LinkProps>> = ({
   children,
   className,
   kind = "primary",
   ...props
-}: PropsWithChildren<LinkProps>) => {
+}) => {
   return (
     <a
       {...props}

src/components/Radio/Radio.tsx

@@ -27,12 +27,12 @@ type RadioProps = {
 /**
  * Radio form control
  */
-export const Radio = ({
+export const Radio: React.FC<PropsWithChildren<RadioProps>> = ({
   kind = "primary",
   className,
   onMouseDown,
   ...props
-}: PropsWithChildren<RadioProps>) => {
+}) => {
   const classes = classnames(styles.radio, className);
   return (
     <div className={classes} data-kind={kind}>

src/components/Toggle/Toggle.tsx

@@ -27,11 +27,11 @@ type ToggleProps = {
  * Standalone toggle component to be used with a Radix form control
  * See https://www.radix-ui.com/docs/primitives/components/form#composing-with-your-own-components
  */
-export const Toggle = ({
+export const Toggle: React.FC<PropsWithChildren<ToggleProps>> = ({
   className,
   onMouseDown,
   ...props
-}: PropsWithChildren<ToggleProps>) => {
+}) => {
   const classes = classnames(styles.toggle, className);
   return (
     <div className={classes}>

src/components/Typography/Body.tsx

@@ -17,11 +17,9 @@ limitations under the License.
 import React from "react";
 import { Typography } from "./Typography";
 
-export const Body = ({
-  as = "p",
-  children,
-  ...props
-}: Omit<React.ComponentProps<typeof Typography>, "type">) => {
+export const Body: React.FC<
+  Omit<React.ComponentProps<typeof Typography>, "type">
+> = ({ as = "p", children, ...props }) => {
   return (
     <Typography as={as} type="body" {...props}>
       {children}