Turn on react eslint

.eslintrc.react.cjs

@@ -0,0 +1,58 @@
+const { settings, parser, parserOptions, rules } = require("./.eslintrc.cjs");
+
+module.exports = {
+  parser,
+  parserOptions,
+  settings,
+  env: {
+    browser: true,
+    node: true,
+    "jest/globals": true,
+  },
+  extends: [
+    "airbnb",
+    "airbnb-typescript",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react/recommended",
+    "prettier",
+    "plugin:jest-dom/recommended",
+    "plugin:testing-library/dom",
+    "plugin:css-modules/recommended",
+  ],
+  plugins: [
+    "@typescript-eslint",
+    "jest",
+    "jest-dom",
+    "testing-library",
+    "react",
+    "react-hooks",
+    "css-modules",
+  ],
+  rules: {
+    ...rules,
+    "css-modules/no-unused-class": "warn",
+    "jsx-a11y/control-has-associated-label": "warn",
+    "jsx-a11y/anchor-is-valid": "off",
+    "react-hooks/exhaustive-deps": "warn",
+    "react-hooks/rules-of-hooks": "error",
+    "react/destructuring-assignment": "off",
+    "react/jsx-curly-brace-presence": [
+      "error",
+      { children: "ignore", props: "never" },
+    ],
+    "react/jsx-filename-extension": "off",
+    "react/jsx-props-no-spreading": "off",
+    "react/state-in-constructor": ["error", "never"],
+    "react/require-default-props": "off",
+    "react/no-unused-prop-types": "error",
+    "react/prop-types": "off",
+  },
+  overrides: [
+    {
+      files: ["*test.ts?(x)"],
+      rules: {
+        "@typescript-eslint/no-var-requires": "off",
+      },
+    },
+  ],
+};

package.json

@@ -39,10 +39,15 @@
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.1.0",
     "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-css-modules": "^2.12.0",
     "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-jest": "^27.9.0",
+    "eslint-plugin-jest-dom": "^5.1.0",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-prettier": "^5.0.1",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-testing-library": "^6.2.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^3.2.4",
     "rimraf": "^5.0.5",

packages/components/.eslintrc.cjs

@@ -1,3 +1,3 @@
 module.exports = {
-  extends: ["../../.eslintrc.cjs", "plugin:storybook/recommended"],
+  extends: ["../../.eslintrc.react.cjs", "plugin:storybook/recommended"],
 };

packages/components/src/Button/index.tsx

@@ -14,7 +14,7 @@ type VariantProps = {
 type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;
 type Props = ButtonProps & VariantProps;
 
-const Button = ({
+function Button({
   children,
   className,
   red = false,
@@ -24,77 +24,83 @@ const Button = ({
   white = false,
   gradient = false,
   ...props
-}: Props) => (
-  <button
-    className={cx(
-      css.button,
-      {
-        [css.red]: red,
-        [css.green]: green,
-        [css.dark]: dark,
-        [css.pill]: pill,
-        [css.white]: white,
-        [css.gradient]: gradient,
-      },
-      className,
-    )}
-    type="button"
-    // These props need to come last
-    {...props}
-  >
-    {children}
-  </button>
-);
+}: Props) {
+  return (
+    <button
+      className={cx(
+        css.button,
+        {
+          [css.red]: red,
+          [css.green]: green,
+          [css.dark]: dark,
+          [css.pill]: pill,
+          [css.white]: white,
+          [css.gradient]: gradient,
+        },
+        className,
+      )}
+      type="button"
+      // These props need to come last
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}
 
-const Outlined = ({
+function Outlined({
   children,
   className,
   pill = false,
   ...props
-}: ButtonProps & { pill?: boolean }) => (
-  <button
-    className={cx(css.outlined, { [css.pill]: pill }, className)}
-    type="button"
-    // These props need to come last
-    {...props}
-  >
-    {children}
-  </button>
-);
+}: ButtonProps & { pill?: boolean }) {
+  return (
+    <button
+      className={cx(css.outlined, { [css.pill]: pill }, className)}
+      type="button"
+      // These props need to come last
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}
 
 Button.Outlined = Outlined;
 
 type LinkProps = Props & {
   underlined?: boolean;
 };
 
-const Link = ({
+function Link({
   children,
   className,
   red = false,
   green = false,
   dark = false,
   underlined = false,
   ...props
-}: LinkProps) => (
-  <button
-    className={cx(
-      css.link,
-      {
-        [css.redText]: red,
-        [css.greenText]: green,
-        [css.darkText]: dark,
-        [css.underlined]: underlined,
-      },
-      className,
-    )}
-    type="button"
-    // These props need to come last
-    {...props}
-  >
-    {children}
-  </button>
-);
+}: LinkProps) {
+  return (
+    <button
+      className={cx(
+        css.link,
+        {
+          [css.redText]: red,
+          [css.greenText]: green,
+          [css.darkText]: dark,
+          [css.underlined]: underlined,
+        },
+        className,
+      )}
+      type="button"
+      // These props need to come last
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}
 
 Button.Link = Link;
 
@@ -103,11 +109,13 @@ type GroupProps = {
   className?: string;
 };
 
-const Group = ({ children, className }: GroupProps) => (
-  <div className={cx(css.group, className)} aria-label="button-group">
-    {children}
-  </div>
-);
+function Group({ children, className }: GroupProps) {
+  return (
+    <div className={cx(css.group, className)} aria-label="button-group">
+      {children}
+    </div>
+  );
+}
 
 Button.Group = Group;
 

packages/components/src/ButtonWithPopup/index.tsx

@@ -37,36 +37,52 @@ export default function ButtonWithPopup({
       offsetX={triggerText ? 32 : 0}
       contentStyle={{ width: "10rem" }}
       closeOnDocumentClick
-      trigger={open => (
-        <button
-          type="button"
-          className={cx(
-            css.triggerButton,
-            { [css.withoutText]: !triggerText },
-            props.buttonClassName,
-          )}
-          data-cy={props["data-cy"]}
-        >
-          {triggerText}
-          {open ? (
-            <FaCaretUp
-              className={cx(css.caret, {
-                [css.caretWithoutText]: !triggerText,
-              })}
-            />
-          ) : (
-            <FaCaretDown
-              className={cx(css.caret, {
-                [css.caretWithoutText]: !triggerText,
-              })}
-            />
-          )}
-        </button>
-      )}
+      trigger={open =>
+        getTriggerButton(
+          open,
+          triggerText,
+          props.buttonClassName,
+          props["data-cy"],
+        )
+      }
       // props must come last to override default props above
       {...props}
     >
       {children}
     </Popup>
   );
 }
+
+function getTriggerButton(
+  open: boolean,
+  triggerText?: string,
+  buttonClassName?: string,
+  dataCy?: string,
+): JSX.Element {
+  return (
+    <button
+      type="button"
+      className={cx(
+        css.triggerButton,
+        { [css.withoutText]: !triggerText },
+        buttonClassName,
+      )}
+      data-cy={dataCy}
+    >
+      {triggerText}
+      {open ? (
+        <FaCaretUp
+          className={cx(css.caret, {
+            [css.caretWithoutText]: !triggerText,
+          })}
+        />
+      ) : (
+        <FaCaretDown
+          className={cx(css.caret, {
+            [css.caretWithoutText]: !triggerText,
+          })}
+        />
+      )}
+    </button>
+  );
+}

packages/components/src/CellDropdown/index.tsx

@@ -26,6 +26,7 @@ export default function CellDropdown({
   return (
     <div ref={dropdownRef} className={css.cellDropdown}>
       <button
+        aria-label="cell dropdown"
         type="button"
         onClick={toggle}
         className={cx(

packages/components/src/CodeBlock/index.tsx

@@ -12,11 +12,13 @@ type Props = {
   disabled?: boolean;
 };
 
-const CodeBlock = ({ children, className, disabled = false }: Props) => (
-  <div className={cx(css.code, { [css.disabled]: disabled }, className)}>
-    {children}
-  </div>
-);
+function CodeBlock({ children, className, disabled = false }: Props) {
+  return (
+    <div className={cx(css.code, { [css.disabled]: disabled }, className)}>
+      {children}
+    </div>
+  );
+}
 
 type CopyProps = {
   textToCopy: string;
@@ -27,7 +29,7 @@ type CopyProps = {
   small?: boolean;
 };
 
-const WithCopyButton = (props: CopyProps) => {
+function WithCopyButton(props: CopyProps) {
   const copySuccess = useDelay();
   return (
     <CodeBlock
@@ -56,7 +58,7 @@ const WithCopyButton = (props: CopyProps) => {
       </div>
     </CodeBlock>
   );
-};
+}
 
 CodeBlock.WithCopyButton = WithCopyButton;