chore: add ESLint 9 and some plugins

.github/workflows/pr.yaml

@@ -27,6 +27,9 @@ jobs:
       - name: Patch
         run: yarn patch-package
 
+      - name: Lint
+        run: yarn lint
+
       - name: Test
         run: yarn test:ci
 

.storybook/preview.jsx

@@ -22,12 +22,14 @@ export const parameters = {
   },
   docs: {
     container: (context) => {
+      // eslint-disable-next-line react-hooks/rules-of-hooks
       const [isDark, setDark] = React.useState();
 
+      // eslint-disable-next-line react-hooks/rules-of-hooks
       React.useEffect(() => {
         channel.on(DARK_MODE_EVENT_NAME, setDark);
         return () => channel.removeListener(DARK_MODE_EVENT_NAME, setDark);
-      }, [channel, setDark]);
+      }, [setDark]);
 
       const props = {
         ...context,

components/AccessibleIcon/AccessibleIcon.stories.tsx

@@ -1,9 +1,10 @@
-import React from 'react';
-import { Meta, StoryFn } from '@storybook/react';
-import { AccessibleIcon } from './AccessibleIcon';
 import * as Icons from '@radix-ui/react-icons';
+import { Meta, StoryFn } from '@storybook/react';
+import React from 'react';
+
 import { Flex } from '../Flex';
 import { IconButton } from '../IconButton';
+import { AccessibleIcon } from './AccessibleIcon';
 
 const Component: Meta<typeof AccessibleIcon> = {
   title: 'Components/AccessibleIcon',

components/Accordion/Accordion.stories.tsx

@@ -1,15 +1,16 @@
+import { MagnifyingGlassIcon } from '@radix-ui/react-icons';
 import { Meta, StoryFn } from '@storybook/react';
 import React, { useState } from 'react';
-import { AccordionRoot, AccordionItem, AccordionTrigger, AccordionContent } from '.';
-import { modifyVariantsForStory } from '../../utils/modifyVariantsForStory';
+
 import { VariantProps } from '../../stitches.config';
-import { Dialog, DialogContent, DialogTrigger, DialogOverlay, DialogPortal } from '../Dialog';
+import { modifyVariantsForStory } from '../../utils/modifyVariantsForStory';
 import { Badge } from '../Badge';
-import { Button } from '../Button';
-import { Text } from '../Text';
 import { Box } from '../Box';
+import { Button } from '../Button';
+import { Dialog, DialogContent, DialogOverlay, DialogPortal, DialogTrigger } from '../Dialog';
 import { Flex } from '../Flex';
-import { MagnifyingGlassIcon } from '@radix-ui/react-icons';
+import { Text } from '../Text';
+import { AccordionContent, AccordionItem, AccordionRoot, AccordionTrigger } from '.';
 
 type AccordionVariants = VariantProps<typeof AccordionRoot>;
 
@@ -119,6 +120,7 @@ Complex.argTypes = {
   },
 };
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const Customize: StoryFn<typeof AccordionForStory> = ({ size, ...args }) => (
   <Box css={{ width: 300 }}>
     <AccordionForStory css={{ maxWidth: 250 }} {...args}>

components/Accordion/Accordion.themes.ts

@@ -1,7 +1,8 @@
 import { Property } from '@stitches/react/types/css';
-import { ColorInfo } from '../../utils/getPrimaryColorInfo';
 import tinycolor from 'tinycolor2';
 
+import { ColorInfo } from '../../utils/getPrimaryColorInfo';
+
 export namespace Theme {
   type Colors = {
     accordionBackground: Property.Color;

components/Accordion/Accordion.tsx

@@ -1,9 +1,10 @@
 // @ts-nocheck
-import React from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
-import { keyframes, styled, VariantProps, CSS } from '../../stitches.config';
-import { elevationVariants } from '../Elevation';
 import { ChevronRightIcon } from '@radix-ui/react-icons';
+import React from 'react';
+
+import { CSS, keyframes, styled, VariantProps } from '../../stitches.config';
+import { elevationVariants } from '../Elevation';
 
 const open = keyframes({
   from: { height: 0 },

components/Alert/Alert.stories.tsx

@@ -1,9 +1,10 @@
-import React from 'react';
 import { Meta, StoryFn } from '@storybook/react';
-import { Text } from '../Text';
+import React from 'react';
+
+import { modifyVariantsForStory } from '../../utils/modifyVariantsForStory';
 import { H2 } from '../Heading';
+import { Text } from '../Text';
 import { Alert, AlertProps, AlertVariants } from './Alert';
-import { modifyVariantsForStory } from '../../utils/modifyVariantsForStory';
 
 const BaseAlert = (props: AlertProps): JSX.Element => <Alert {...props} />;
 const AlertForStory = modifyVariantsForStory<AlertVariants, AlertProps>(BaseAlert);
@@ -38,6 +39,7 @@ Variants.argTypes = {
   },
 };
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const Customize: StoryFn<typeof AlertForStory> = (args) => (
   <Alert {...args} css={{ mt: '$1' }}>
     <H2 css={{ mb: '$3' }}>Alert</H2>

components/Alert/Alert.tsx

@@ -37,4 +37,4 @@ export const Alert = styled(Card, {
 });
 
 export type AlertVariants = VariantProps<typeof Alert>;
-export type AlertProps = AlertVariants & {};
+export type AlertProps = AlertVariants & NonNullable<unknown>;

components/AriaTable/AriaTable.stories.tsx

@@ -1,24 +1,25 @@
 import { Meta, StoryFn } from '@storybook/react';
 import React, { useCallback, useState } from 'react';
+
+import { modifyVariantsForStory } from '../../utils/modifyVariantsForStory';
+import { Badge } from '../Badge';
+import { Button } from '../Button';
+import { Flex } from '../Flex';
+import { Image } from '../Image';
+import { UnstyledLink } from '../Link';
+import { Text } from '../Text';
 import {
+  Caption,
   Table,
   TableProps,
   TableVariants,
   Tbody,
   Td,
+  Tfoot,
   Th,
   Thead,
   Tr,
-  Caption,
-  Tfoot,
 } from './AriaTable';
-import { Badge } from '../Badge';
-import { Button } from '../Button';
-import { Flex } from '../Flex';
-import { UnstyledLink } from '../Link';
-import { modifyVariantsForStory } from '../../utils/modifyVariantsForStory';
-import { Image } from '../Image';
-import { Text } from '../Text';
 
 const BaseTable = (props: TableProps): JSX.Element => <Table {...props} />;
 const TableForStory = modifyVariantsForStory<TableVariants, TableProps>(BaseTable);
@@ -281,6 +282,7 @@ export const Links: StoryFn<any> = (args) => (
   </Table>
 );
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const Customize: StoryFn<any> = (args) => (
   <TableForStory
     css={{ c: '$hiContrast' }}
@@ -572,7 +574,7 @@ const FlexIssue = () => (
   </Flex>
 );
 
-export const VerticalAlignment: StoryFn<any> = (args) => (
+export const VerticalAlignment: StoryFn<any> = () => (
   <TableForStory>
     <Thead>
       <Tr>

components/AriaTable/AriaTable.test.tsx

@@ -1,17 +1,7 @@
-import {
-  Table,
-  TableProps,
-  TableVariants,
-  Tbody,
-  Td,
-  Th,
-  Thead,
-  Tr,
-  Caption,
-  Tfoot,
-} from './AriaTable';
-import { axe } from 'jest-axe';
 import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
+import { Table, Tbody, Td, Tfoot, Th, Thead, Tr } from './AriaTable';
 
 describe('AriaTable', () => {
   it('should render table with no a11y issue', async () => {

components/AriaTable/AriaTable.tsx

@@ -1,29 +1,30 @@
+import { ChevronRightIcon } from '@radix-ui/react-icons';
+import { Slot } from '@radix-ui/react-slot';
+import merge from 'lodash.merge';
 import React, {
+  Children,
+  cloneElement,
   ComponentProps,
   ElementRef,
   forwardRef,
-  useMemo,
-  Children,
   isValidElement,
-  useState,
   ReactNode,
-  cloneElement,
+  useMemo,
+  useState,
 } from 'react';
-import { Slot } from '@radix-ui/react-slot';
-import { styled, VariantProps, CSS } from '../../stitches.config';
+
+import { styled, VariantProps } from '../../stitches.config';
+import { Box } from '../Box';
 import {
   Caption as TableCaption,
+  StyledTr as TableTr,
+  Table as TableTable,
   Tbody as TableTbody,
+  Td as TableTd,
   Tfoot as TableTfoot,
-  StyledTr as TableTr,
   Th as TableTh,
-  Td as TableTd,
   Thead as TableThead,
-  Table as TableTable,
 } from '../Table';
-import merge from 'lodash.merge';
-import { Box } from '../Box';
-import { ChevronRightIcon } from '@radix-ui/react-icons';
 
 export const Caption = styled('div', TableCaption, {
   display: 'table-caption',
@@ -130,7 +131,7 @@ export const Tr = forwardRef<ElementRef<typeof StyledTr>, TrProps>(
           ) : (
             <Td key="empty-td" />
           )
-        ) : !!collapsedContent ? (
+        ) : collapsedContent ? (
           <Td key="chevron-td">
             <Box
               onClick={(e) => {
@@ -149,6 +150,7 @@ export const Tr = forwardRef<ElementRef<typeof StyledTr>, TrProps>(
             </Box>
           </Td>
         ) : null,
+      // eslint-disable-next-line react-hooks/exhaustive-deps
       [isCollapsed]
     );
 
@@ -161,7 +163,7 @@ export const Tr = forwardRef<ElementRef<typeof StyledTr>, TrProps>(
             ...children?.props,
           },
           // @ts-ignore: Object is possibly 'null'.
-          [TdEl, ...children?.props?.children]
+          [TdEl, ...(children?.props?.children || [])]
         );
       }
 
@@ -252,7 +254,7 @@ const StyledThead = styled('div', TableThead, {
 });
 export const Thead = forwardRef<
   ElementRef<typeof StyledThead>,
-  ComponentProps<typeof StyledThead> & VariantProps<typeof StyledThead> & {}
+  ComponentProps<typeof StyledThead> & VariantProps<typeof StyledThead> & NonNullable<unknown>
 >((props, ref) => <StyledThead ref={ref} role="rowgroup" {...props} />);
 
 const StyledTable = styled('div', TableTable, {
@@ -272,4 +274,4 @@ export const Table = forwardRef<
 ));
 
 export type TableVariants = VariantProps<typeof Table>;
-export type TableProps = TableVariants & {};
+export type TableProps = TableVariants & NonNullable<unknown>;

components/Avatar/Avatar.stories.tsx

@@ -1,5 +1,6 @@
-import React from 'react';
 import { Meta, StoryFn } from '@storybook/react';
+import React from 'react';
+
 import { Avatar } from './Avatar';
 
 const Component: Meta<typeof Avatar> = {
@@ -90,6 +91,8 @@ Variants.argTypes = {
     options: ['gray', 'red', 'purple', 'blue', 'green', 'orange'],
   },
 };
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const Customize: StoryFn<typeof Avatar> = (args) => <Avatar css={{ c: '$hiContrast' }} {...args} />;
 
 export default Component;

components/Avatar/Avatar.tsx

@@ -1,6 +1,7 @@
-import React from 'react';
-import { styled, VariantProps, CSS } from '../../stitches.config';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import React from 'react';
+
+import { CSS, styled, VariantProps } from '../../stitches.config';
 import { Box } from '../Box';
 
 const StyledAvatar = styled(AvatarPrimitive.Root, {

components/Badge/Badge.stories.tsx

@@ -1,13 +1,14 @@
 import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';
+
 import { VariantProps } from '../../stitches.config';
-import { Badge, COLORS } from './Badge';
-import { Flex } from '../Flex';
 import { modifyVariantsForStory } from '../../utils/modifyVariantsForStory';
+import { Flex } from '../Flex';
 import { UnstyledLink } from '../Link';
+import { Badge, COLORS } from './Badge';
 
 type BadgeVariants = VariantProps<typeof Badge>;
-type BadgeProps = BadgeVariants & {};
+type BadgeProps = BadgeVariants & NonNullable<unknown>;
 
 const BaseBadge = (props: BadgeProps): JSX.Element => <Badge {...props} />;
 const BadgeForStory = modifyVariantsForStory<BadgeVariants, BadgeProps>(BaseBadge);
@@ -82,6 +83,7 @@ Interactive.args = {
   borderless: false,
 };
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const Customize: StoryFn<typeof BadgeForStory> = (args) => (
   <Badge css={{ c: '$hiContrast' }} {...args}>
     Customize

components/Badge/Badge.test.tsx

@@ -1,7 +1,8 @@
-import { Badge } from './Badge';
-import { UnstyledLink } from '../Link';
 import { render } from '@testing-library/react';
 
+import { UnstyledLink } from '../Link';
+import { Badge } from './Badge';
+
 describe('Badge', () => {
   it('should render Badge as link', () => {
     const { getByRole } = render(

components/Badge/Badge.themes.ts

@@ -1,5 +1,6 @@
 import { Property } from '@stitches/react/types/css';
 import tinycolor from 'tinycolor2';
+
 import { ColorInfo } from '../../utils/getPrimaryColorInfo';
 
 export namespace Theme {

components/Badge/Badge.tsx

@@ -1,9 +1,10 @@
+import { Slot } from '@radix-ui/react-slot';
 import React, { ComponentProps, useMemo } from 'react';
+
 import { styled, VariantProps } from '../../stitches.config';
-import { Slot } from '@radix-ui/react-slot';
 
 export const COLORS = ['gray', 'red', 'blue', 'green', 'neon', 'orange', 'purple'] as const;
-type COLOR_VALUES = typeof COLORS[number];
+type COLOR_VALUES = (typeof COLORS)[number];
 
 const getColorBadgeStyles = (color: COLOR_VALUES) => ({
   bc: `$${color}6`,
@@ -146,6 +147,7 @@ export const Badge = React.forwardRef<React.ElementRef<typeof StyledButtonBadge>
         return asChild ? StyledButtonBadgeSlot : StyledButtonBadge;
       }
       return asChild ? StyledSpanBadgeSlot : StyledSpanBadge;
+      // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [asChild]);
 
     return <Component {...props} ref={forwardedRef} />;

components/Box/Box.stories.tsx

@@ -1,13 +1,13 @@
+import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';
-import { StoryFn, Meta } from '@storybook/react';
-import { VariantProps } from '../../stitches.config';
 
+import { VariantProps } from '../../stitches.config';
 import { modifyVariantsForStory } from '../../utils/modifyVariantsForStory';
-import { Box } from './Box';
 import { Text } from '../Text';
+import { Box } from './Box';
 
 type BoxVariants = VariantProps<typeof Box>;
-type BoxProps = BoxVariants & {};
+type BoxProps = BoxVariants & NonNullable<unknown>;
 
 const BaseBox = (props: BoxProps): JSX.Element => <Box {...props} />;
 const BoxForStory = modifyVariantsForStory<BoxVariants, BoxProps & React.HTMLAttributes<any>>(