From d95336a7a0ce4c1c105a78c1c0670eed36027930 Mon Sep 17 00:00:00 2001
From: Robin <robin@robin.town>
Date: Tue, 19 Dec 2023 11:00:33 -0500
Subject: [PATCH] Ensure that all our components have display names

This turns on a lint rule to require display names for all of our components, which makes it a lot easier to find your way around the component tree in React's dev tools.
---
 .eslintrc.cjs                  |  1 +
 src/Tooltip.tsx                |  4 ++++
 src/button/Button.tsx          |  3 +++
 src/form/Form.tsx              |  2 ++
 src/input/AvatarInputField.tsx |  2 ++
 src/input/Input.tsx            |  2 ++
 src/popover/Popover.tsx        |  2 ++
 src/popover/PopoverMenu.tsx    |  2 ++
 src/typography/Typography.tsx  | 15 +++++++++++++++
 src/video-grid/BigGrid.tsx     |  2 ++
 src/video-grid/TileWrapper.tsx | 26 +++++++++++++++-----------
 src/video-grid/VideoTile.tsx   |  2 ++
 12 files changed, 52 insertions(+), 11 deletions(-)

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 64d24ebb2..f6a2e5693 100644
--- a/.eslintrc.cjs
+++ b/.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: {
diff --git a/src/Tooltip.tsx b/src/Tooltip.tsx
index b90c3f861..adaa18b33 100644
--- a/src/Tooltip.tsx
+++ b/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";
diff --git a/src/button/Button.tsx b/src/button/Button.tsx
index e4ad8eb29..3111ac933 100644
--- a/src/button/Button.tsx
+++ b/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>
diff --git a/src/form/Form.tsx b/src/form/Form.tsx
index 1f66ac1ab..2b0400bc9 100644
--- a/src/form/Form.tsx
+++ b/src/form/Form.tsx
@@ -38,3 +38,5 @@ export const Form = forwardRef<HTMLFormElement, FormProps>(
     );
   },
 );
+
+Form.displayName = "Form";
diff --git a/src/input/AvatarInputField.tsx b/src/input/AvatarInputField.tsx
index 639eaf6e6..33c98ad74 100644
--- a/src/input/AvatarInputField.tsx
+++ b/src/input/AvatarInputField.tsx
@@ -122,3 +122,5 @@ export const AvatarInputField = forwardRef<HTMLInputElement, Props>(
     );
   },
 );
+
+AvatarInputField.displayName = "AvatarInputField";
diff --git a/src/input/Input.tsx b/src/input/Input.tsx
index 24bea83fa..0aa5e4d82 100644
--- a/src/input/Input.tsx
+++ b/src/input/Input.tsx
@@ -166,6 +166,8 @@ export const InputField = forwardRef<
   },
 );
 
+InputField.displayName = "InputField";
+
 interface ErrorMessageProps {
   error: Error;
 }
diff --git a/src/popover/Popover.tsx b/src/popover/Popover.tsx
index 36a4ac4ab..65ec27a6d 100644
--- a/src/popover/Popover.tsx
+++ b/src/popover/Popover.tsx
@@ -58,3 +58,5 @@ export const Popover = forwardRef<HTMLDivElement, Props>(
     );
   },
 );
+
+Popover.displayName = "Popover";
diff --git a/src/popover/PopoverMenu.tsx b/src/popover/PopoverMenu.tsx
index dc38c6d01..46913a054 100644
--- a/src/popover/PopoverMenu.tsx
+++ b/src/popover/PopoverMenu.tsx
@@ -94,3 +94,5 @@ export const PopoverMenuTrigger = forwardRef<
     </div>
   );
 });
+
+PopoverMenuTrigger.displayName = "PopoverMenuTrigger";
diff --git a/src/typography/Typography.tsx b/src/typography/Typography.tsx
index ce55fc969..f82a24e13 100644
--- a/src/typography/Typography.tsx
+++ b/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";
diff --git a/src/video-grid/BigGrid.tsx b/src/video-grid/BigGrid.tsx
index 275523fef..bde7eda6d 100644
--- a/src/video-grid/BigGrid.tsx
+++ b/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
diff --git a/src/video-grid/TileWrapper.tsx b/src/video-grid/TileWrapper.tsx
index 2d37a3cd0..5c771e6c9 100644
--- a/src/video-grid/TileWrapper.tsx
+++ b/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;
diff --git a/src/video-grid/VideoTile.tsx b/src/video-grid/VideoTile.tsx
index 1bb67b226..e80bc967a 100644
--- a/src/video-grid/VideoTile.tsx
+++ b/src/video-grid/VideoTile.tsx
@@ -281,3 +281,5 @@ export const VideoTile = forwardRef<HTMLDivElement, Props>(
     );
   },
 );
+
+VideoTile.displayName = "VideoTile";