feat: add react/display-name ESLint rule (#1925)

.changeset/olive-wolves-invite.md

@@ -0,0 +1,21 @@
+---
+'@twilio-paste/badge': patch
+'@twilio-paste/checkbox': patch
+'@twilio-paste/combobox': patch
+'@twilio-paste/disclosure': patch
+'@twilio-paste/display-pill-group': patch
+'@twilio-paste/form-pill-group': patch
+'@twilio-paste/input': patch
+'@twilio-paste/menu': patch
+'@twilio-paste/modal': patch
+'@twilio-paste/popover': patch
+'@twilio-paste/radio-group': patch
+'@twilio-paste/select': patch
+'@twilio-paste/spinner': patch
+'@twilio-paste/tooltip': patch
+'@twilio-paste/menu-primitive': patch
+'@twilio-paste/theme': patch
+'@twilio-paste/core': patch
+---
+
+Add displayNames to all components

.eslintrc.js

@@ -7,7 +7,7 @@ module.exports = {
   parserOptions: {
     project: './tsconfig.json',
   },
-  plugins: ['@typescript-eslint', 'eslint-comments', 'jest', 'promise', 'unicorn', 'emotion'],
+  plugins: ['@typescript-eslint', 'eslint-comments', 'jest', 'promise', 'unicorn', 'emotion', 'import'],
   extends: [
     'airbnb-typescript',
     'plugin:@typescript-eslint/recommended',
@@ -87,6 +87,7 @@ module.exports = {
     ],
     'react/jsx-curly-brace-presence': 0,
     'react/jsx-props-no-spreading': 0,
+    'react/display-name': 2,
     'no-useless-constructor': 'off',
     eqeqeq: ['error', 'smart'],
     'no-plusplus': 'off',

packages/paste-core/components/alert-dialog/__tests__/customization.spec.tsx

@@ -35,6 +35,7 @@ jest.mock('@twilio-paste/modal-dialog-primitive', () => {
 describe('Alert Dialog `element` prop', () => {
   it('should set the default element prop on Alert Dialog', () => {
     const {container} = render(<CustomizedAlertDialog />, {
+      // eslint-disable-next-line react/display-name
       wrapper: ({children}) => <div id="test-container-wrapper">{children}</div>,
     });
     expect(screen.getByTestId('alert_dialog').getAttribute('data-paste-element')).toEqual('ALERT_DIALOG');

packages/paste-core/components/badge/src/hooks.tsx

@@ -39,6 +39,7 @@ export const useFocusableVariants = (
     const buttonProps = safelySpreadProps(redactedProps, BUTTON_DENY_LIST);
     return {
       styleProps: {...FOCUSABLE_STYLES} as FocusableStyleProps,
+      // eslint-disable-next-line react/display-name
       wrapper: ({children}) => (
         <Button variant="reset" size="reset" type="button" {...buttonProps}>
           {children}
@@ -51,6 +52,7 @@ export const useFocusableVariants = (
     const anchorProps = safelySpreadProps(redactedProps, ANCHOR_DENY_LIST);
     return {
       styleProps: {...FOCUSABLE_STYLES} as FocusableStyleProps,
+      // eslint-disable-next-line react/display-name
       wrapper: ({children}) => (
         <Button variant="reset" size="reset" type="button" as="a" {...anchorProps}>
           {children}
@@ -62,6 +64,7 @@ export const useFocusableVariants = (
 
   return {
     styleProps: {},
+    // eslint-disable-next-line react/display-name
     wrapper: ({children}) => <>{children}</>,
     spanProps: redactedProps,
   };

packages/paste-core/components/checkbox/src/Checkbox.tsx

@@ -51,6 +51,8 @@ const HiddenCheckbox = React.forwardRef<HTMLInputElement, HiddenCheckboxProps>((
   />
 ));
 
+HiddenCheckbox.displayName = 'HiddenCheckbox';
+
 const CheckboxIcon: React.FC<{
   indeterminate: boolean | undefined;
   disabled: boolean | undefined;

packages/paste-core/components/combobox/__tests__/customization.spec.tsx

@@ -22,6 +22,7 @@ const getStyles = (element = 'COMBOBOX'): {[key: string]: PasteCustomCSS} => ({
   [`${element}_SUFFIX`]: {backgroundColor: 'colorBackgroundSubaccount', borderRadius: 'borderRadiusCircle'},
 });
 
+// eslint-disable-next-line react/display-name
 const initCustomizationWrapper = (elementName?: string | undefined): RenderOptions['wrapper'] => ({children}) => (
   <CustomizationProvider
     // @ts-expect-error global test variable

packages/paste-core/components/combobox/src/styles/ComboboxInputSelect.tsx

@@ -6,4 +6,6 @@ const ComboboxInputSelect = React.forwardRef<HTMLInputElement, ComboboxProps>(({
   return <InputElement paddingRight={!props.autocomplete ? 'space100' : null} type="text" ref={ref} {...props} />;
 });
 
+ComboboxInputSelect.displayName = 'ComboboxInputSelect';
+
 export {ComboboxInputSelect};

packages/paste-core/components/disclosure/src/DisclosureHeading.tsx

@@ -79,6 +79,8 @@ const StyledDisclosureHeading = React.forwardRef<HTMLDivElement, StyledDisclosur
   }
 );
 
+StyledDisclosureHeading.displayName = 'StyledDisclosureHeading';
+
 const DisclosureHeading: React.FC<DisclosureHeadingProps> = ({
   children,
   as,

packages/paste-core/components/display-pill-group/src/DisplayPill.tsx

@@ -60,3 +60,5 @@ export const DisplayPill = React.forwardRef<HTMLAnchorElement, DisplayPillProps>
     );
   }
 );
+
+DisplayPill.displayName = 'DisplayPill';

packages/paste-core/components/display-pill-group/src/DisplayPillGroup.tsx

@@ -34,3 +34,5 @@ export const DisplayPillGroup = React.forwardRef<HTMLUListElement, DisplayPillGr
     );
   }
 );
+
+DisplayPillGroup.displayName = 'DisplayPillGroup';

packages/paste-core/components/form-pill-group/src/FormPill.tsx

@@ -69,6 +69,8 @@ const FormPillStyles = React.forwardRef<HTMLElement, FormPillStylesProps>(
   )
 );
 
+FormPillStyles.displayName = 'StyledFormPill';
+
 interface FormPillProps extends CompositeStateReturn, Pick<BoxProps, 'element'> {
   selected?: boolean;
   children: React.ReactNode;
@@ -135,3 +137,5 @@ export const FormPill = React.forwardRef<HTMLElement, FormPillProps>(
     );
   }
 );
+
+FormPill.displayName = 'FormPill';

packages/paste-core/components/form-pill-group/src/FormPillGroup.tsx

@@ -27,6 +27,8 @@ const FormPillGroupStyles = React.forwardRef<HTMLUListElement, FormPillGroupProp
   )
 );
 
+FormPillGroupStyles.displayName = 'StyledFormPillGroup';
+
 /**
  * FormPillGroup should be used to wrap a collection of FormPills. It should be used in conjunction with
  * useFormPillGroupState hook
@@ -44,3 +46,5 @@ export const FormPillGroup = React.forwardRef<HTMLUListElement, FormPillGroupPro
     </Composite>
   );
 });
+
+FormPillGroup.displayName = 'FormPillGroup';

packages/paste-core/components/input/src/Input.tsx

@@ -88,6 +88,8 @@ export const InputElement = React.forwardRef<HTMLInputElement, InputProps>(({ele
   );
 });
 
+InputElement.displayName = 'InputElement';
+
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
   (
     {

packages/paste-core/components/menu/__tests__/customization.spec.tsx

@@ -8,6 +8,7 @@ import {initStyles, BaseMenu} from '../stories/customization.stories';
 
 const PASTE_ELEMENT = 'data-paste-element';
 
+// eslint-disable-next-line react/display-name
 const initWrapper = (element: string): RenderOptions['wrapper'] => ({children}) => (
   <CustomizationProvider
     // @ts-expect-error global test variable

packages/paste-core/components/menu/src/Menu.tsx

@@ -25,6 +25,8 @@ const StyledMenu = React.forwardRef<HTMLDivElement, BoxElementProps>(({style, ..
   );
 });
 
+StyledMenu.displayName = 'StyledMenu';
+
 const Menu = React.forwardRef<HTMLDivElement, MenuProps>(({element = 'MENU', ...props}, ref) => {
   return <MenuPrimitive {...props} element={element} as={StyledMenu} ref={ref} />;
 });

packages/paste-core/components/menu/src/MenuItem.tsx

@@ -45,6 +45,8 @@ export const StyledMenuItem = React.forwardRef<HTMLDivElement | HTMLAnchorElemen
   }
 );
 
+StyledMenuItem.displayName = 'StyledMenuItem';
+
 const MenuItem = React.forwardRef<HTMLDivElement, MenuItemProps>(
   ({as = StyledMenuItem, variant: _variant, element = 'MENU_ITEM', ...props}, ref) => {
     const variant = _variant || React.useContext(MenuGroupContext);

packages/paste-core/components/menu/src/MenuSeparator.tsx

@@ -8,6 +8,8 @@ const StyledMenuSeparator = React.forwardRef<HTMLHRElement, SeparatorProps>((pro
   return <Separator {...props} orientation="horizontal" verticalSpacing="space40" ref={ref} />;
 });
 
+StyledMenuSeparator.displayName = 'StyledMenuSeparator';
+
 const MenuSeparator = React.forwardRef<HTMLHRElement, MenuSeparatorProps>(
   ({element = 'MENU_SEPARATOR', ...props}, ref) => {
     // as prop from reakit for some reason only accepts a string of `hr` but accepts components. any prevent type errors

packages/paste-core/components/menu/stories/index.stories.tsx

@@ -76,6 +76,8 @@ const PreferencesMenu = React.forwardRef<HTMLButtonElement>((props, ref) => {
   );
 });
 
+PreferencesMenu.displayName = 'PreferencesMenu';
+
 const SubMenu: React.FC = () => {
   const menu = useMenuState();
   return (

packages/paste-core/components/modal/__tests__/customization.spec.tsx

@@ -97,6 +97,7 @@ describe('Modal Customization', () => {
   describe('Custom styles', () => {
     it('Should apply correct style rules to normal size variant', () => {
       render(<BaseModal size="default" />, {
+        // eslint-disable-next-line react/display-name
         wrapper: ({children}) => (
           <CustomizationProvider
             // @ts-expect-error global test variable
@@ -143,6 +144,7 @@ describe('Modal Customization', () => {
 
     it('Should apply correct style rules to wide size variant', () => {
       render(<BaseModal size="wide" />, {
+        // eslint-disable-next-line react/display-name
         wrapper: ({children}) => (
           <CustomizationProvider
             // @ts-expect-error global test variable

packages/paste-core/components/popover/src/Popover.tsx

@@ -28,6 +28,8 @@ const StyledPopover = React.forwardRef<HTMLDivElement, BoxProps>(({style, ...pro
   );
 });
 
+StyledPopover.displayName = 'StyledPopover';
+
 export interface PopoverProps extends Pick<BoxProps, 'element'> {
   'aria-label': string;
   children: React.ReactNode;

packages/paste-core/components/popover/src/PopoverContainer.tsx

@@ -27,6 +27,8 @@ const BasePopoverContainer = React.forwardRef<HTMLDivElement, PopoverContainerPr
   }
 );
 
+BasePopoverContainer.displayName = 'BasePopoverContainer';
+
 const PopoverContainer = React.memo(BasePopoverContainer);
 
 PopoverContainer.displayName = 'PopoverContainer';

packages/paste-core/components/radio-group/src/Radio.tsx

@@ -45,6 +45,8 @@ const HiddenRadio = React.forwardRef<HTMLInputElement, HiddenRadioProps>((props,
   />
 ));
 
+HiddenRadio.displayName = 'HiddenRadio';
+
 const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
   ({id, name, element = 'RADIO', value, checked, disabled, hasError, onChange, children, helpText, ...props}, ref) => {
     const helpTextId = useUID();

packages/paste-core/components/select/src/Select.tsx

@@ -60,6 +60,8 @@ export const SelectElement = React.forwardRef<HTMLSelectElement, SelectProps>(
   }
 );
 
+SelectElement.displayName = 'SelectElement';
+
 const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
   (
     {disabled, element = 'SELECT', hasError, insertBefore, insertAfter, children, size, multiple, variant, ...props},

packages/paste-core/components/spinner/__tests__/index.test.tsx

@@ -9,6 +9,7 @@ import {Spinner} from '../src';
 // @ts-ignore typescript doesn't like js imports
 import axe from '../../../../../.jest/axe-helper';
 
+// eslint-disable-next-line react/display-name
 const TestWrapper = (elements?: Record<string, any>): RenderOptions['wrapper'] => ({children}) => (
   <CustomizationProvider
     // @ts-expect-error global test variable
@@ -106,6 +107,7 @@ describe('Spinner', () => {
   describe('Accessibility', () => {
     it('Should have no accessibility violations', async () => {
       const {container} = render(<Spinner title="Loading" decorative />, {
+        // eslint-disable-next-line react/display-name
         wrapper: ({children}) => <Theme.Provider theme="default">{children}</Theme.Provider>,
       });
       const results = await axe(container);

packages/paste-core/components/spinner/src/index.tsx

@@ -53,6 +53,8 @@ const Spinner = React.forwardRef<HTMLDivElement, SpinnerProps>(
   }
 );
 
+Spinner.displayName = 'Spinner';
+
 Spinner.propTypes = {
   title: PropTypes.string.isRequired,
   delay: PropTypes.number,

packages/paste-core/components/tooltip/src/index.tsx

@@ -32,6 +32,8 @@ const StyledTooltip = React.forwardRef<HTMLDivElement, BoxProps>(({style, elemen
   );
 });
 
+StyledTooltip.displayName = 'StyledTooltip';
+
 export interface TooltipStateReturn extends TooltipPrimitiveStateReturn {
   [key: string]: any;
 }

packages/paste-core/primitives/menu/stories/index.stories.tsx

@@ -4,9 +4,9 @@ import {
   MenuPrimitive,
   MenuPrimitiveItem,
   MenuPrimitiveButton,
-  MenuPrimitiveButtonProps,
   MenuPrimitiveSeparator,
 } from '../src';
+import type {MenuPrimitiveButtonProps} from '../src';
 
 const PreferencesMenu = React.forwardRef<HTMLButtonElement, MenuPrimitiveButtonProps>((props, ref) => {
   const menu = useMenuPrimitiveState();
@@ -27,6 +27,8 @@ const PreferencesMenu = React.forwardRef<HTMLButtonElement, MenuPrimitiveButtonP
   );
 });
 
+PreferencesMenu.displayName = 'PreferencesMenu';
+
 // eslint-disable-next-line import/no-default-export
 export default {
   title: 'Primitives/Menu',

packages/paste-theme-designer/.eslintrc.json

@@ -3,6 +3,7 @@
   "rules": {
     "import/prefer-default-export": "off",
     "import/no-default-export": "off",
-    "react/react-in-jsx-scope": "off"
+    "react/react-in-jsx-scope": "off",
+    "react/display-name": 0
   }
 }

packages/paste-theme/__tests__/useThemeContrastCheck.spec.tsx

@@ -6,6 +6,7 @@ import {useThemeContrastCheck} from '../src/useThemeContrastCheck';
 describe('useThemeContrastCheck', () => {
   test('should return the results of the contrast check when inside a theme', () => {
     const {result} = renderHook(() => useThemeContrastCheck(), {
+      // eslint-disable-next-line react/display-name
       wrapper: (props) => (
         <ThemeProvider
           theme={{

packages/paste-website/.eslintrc

@@ -1,6 +1,7 @@
 {
   "extends": "../../.eslintrc.js",
   "rules": {
-    "import/no-default-export": "off"
+    "import/no-default-export": "off",
+    "react/display-name": 0
   }
 }