Merge pull request #2014 from robintown/display-name-lints

Ensure that all our components have display names

.eslintrc.cjs

@@ -47,6 +47,7 @@ module.exports = {
           "These components are easy to misuse, please use the 'subscribe' component wrapper instead",
       },
     ],
+    "react/display-name": "error",
   },
   settings: {
     react: {

src/Tooltip.tsx

@@ -59,6 +59,8 @@ const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
   },
 );
 
+Tooltip.displayName = "Tooltip";
+
 interface TooltipTriggerProps {
   children: ReactElement;
   placement?: Placement;
@@ -112,3 +114,5 @@ export const TooltipTrigger = forwardRef<HTMLElement, TooltipTriggerProps>(
     );
   },
 );
+
+TooltipTrigger.displayName = "TooltipTrigger";

src/button/Button.tsx

@@ -80,6 +80,7 @@ interface Props {
   // TODO: add all props for <Button>
   [index: string]: unknown;
 }
+
 export const Button = forwardRef<HTMLButtonElement, Props>(
   (
     {
@@ -135,6 +136,8 @@ export const Button = forwardRef<HTMLButtonElement, Props>(
   },
 );
 
+Button.displayName = "Button";
+
 export const MicButton: FC<{
   muted: boolean;
   // TODO: add all props for <Button>

src/form/Form.tsx

@@ -38,3 +38,5 @@ export const Form = forwardRef<HTMLFormElement, FormProps>(
     );
   },
 );
+
+Form.displayName = "Form";

src/input/AvatarInputField.tsx

@@ -122,3 +122,5 @@ export const AvatarInputField = forwardRef<HTMLInputElement, Props>(
     );
   },
 );
+
+AvatarInputField.displayName = "AvatarInputField";

src/input/Input.tsx

@@ -166,6 +166,8 @@ export const InputField = forwardRef<
   },
 );
 
+InputField.displayName = "InputField";
+
 interface ErrorMessageProps {
   error: Error;
 }

src/popover/Popover.tsx

@@ -58,3 +58,5 @@ export const Popover = forwardRef<HTMLDivElement, Props>(
     );
   },
 );
+
+Popover.displayName = "Popover";

src/popover/PopoverMenu.tsx

@@ -94,3 +94,5 @@ export const PopoverMenuTrigger = forwardRef<
     </div>
   );
 });
+
+PopoverMenuTrigger.displayName = "PopoverMenuTrigger";

src/typography/Typography.tsx

@@ -57,6 +57,8 @@ export const Headline = forwardRef<HTMLHeadingElement, TypographyProps>(
   },
 );
 
+Headline.displayName = "Headline";
+
 export const Title = forwardRef<HTMLHeadingElement, TypographyProps>(
   (
     {
@@ -85,6 +87,8 @@ export const Title = forwardRef<HTMLHeadingElement, TypographyProps>(
   },
 );
 
+Title.displayName = "Title";
+
 export const Subtitle = forwardRef<HTMLParagraphElement, TypographyProps>(
   (
     {
@@ -113,6 +117,8 @@ export const Subtitle = forwardRef<HTMLParagraphElement, TypographyProps>(
   },
 );
 
+Subtitle.displayName = "Subtitle";
+
 export const Body = forwardRef<HTMLParagraphElement, TypographyProps>(
   (
     {
@@ -141,6 +147,8 @@ export const Body = forwardRef<HTMLParagraphElement, TypographyProps>(
   },
 );
 
+Body.displayName = "Body";
+
 export const Caption = forwardRef<HTMLParagraphElement, TypographyProps>(
   (
     {
@@ -170,6 +178,8 @@ export const Caption = forwardRef<HTMLParagraphElement, TypographyProps>(
   },
 );
 
+Caption.displayName = "Caption";
+
 export const Micro = forwardRef<HTMLParagraphElement, TypographyProps>(
   (
     {
@@ -199,11 +209,14 @@ export const Micro = forwardRef<HTMLParagraphElement, TypographyProps>(
   },
 );
 
+Micro.displayName = "Micro";
+
 interface LinkProps extends TypographyProps {
   to?: H.LocationDescriptor<unknown>;
   color?: string;
   href?: string;
 }
+
 export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
   (
     {
@@ -254,3 +267,5 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
     );
   },
 );
+
+Link.displayName = "Link";

src/video-grid/BigGrid.tsx

@@ -1010,6 +1010,8 @@ const Slots: FC<{ s: Grid }> = memo(({ s: g }) => {
   );
 });
 
+Slots.displayName = "Slots";
+
 /**
  * Given a tile and numbers in the range [0, 1) describing a position within the
  * tile, this returns the index of the specific cell in which that position

src/video-grid/TileWrapper.tsx

@@ -43,12 +43,8 @@ interface Props<T> {
   children: (props: ChildrenProperties<T>) => ReactNode;
 }
 
-/**
- * A wrapper around a tile in a video grid. This component exists to decouple
- * child components from the grid.
- */
-export const TileWrapper = memo(
-  ({
+const TileWrapper_ = memo(
+  <T,>({
     id,
     onDragRef,
     targetWidth,
@@ -64,7 +60,7 @@ export const TileWrapper = memo(
     width,
     height,
     children,
-  }) => {
+  }: Props<T>) => {
     const ref = useRef<HTMLElement | null>(null);
 
     useDrag((state) => onDragRef?.current!(id, state), {
@@ -97,7 +93,15 @@ export const TileWrapper = memo(
       </>
     );
   },
-  // We pretend this component is a simple function rather than a
-  // NamedExoticComponent, because that's the only way we can fit in a type
-  // parameter
-) as <T>(props: Props<T>) => JSX.Element;
+);
+
+TileWrapper_.displayName = "TileWrapper";
+
+/**
+ * A wrapper around a tile in a video grid. This component exists to decouple
+ * child components from the grid.
+ */
+// We pretend this component is a simple function rather than a
+// NamedExoticComponent, because that's the only way we can fit in a type
+// parameter
+export const TileWrapper = TileWrapper_ as <T>(props: Props<T>) => JSX.Element;

src/video-grid/VideoTile.tsx

@@ -281,3 +281,5 @@ export const VideoTile = forwardRef<HTMLDivElement, Props>(
     );
   },
 );
+
+VideoTile.displayName = "VideoTile";