Configure ESLint (#1084)

* Add eslint

* Configure import formatting / linting

* Format and lint code

* Format and lint demo

* Fix tests

Author: tcbegley

.prettierrc

@@ -3,5 +3,8 @@
   "singleQuote": true,
   "bracketSpacing": false,
   "arrowParens": "avoid",
-  "trailingComma": "none"
+  "trailingComma": "none",
+  "importOrder": ["^react$", "<THIRD_PARTY_MODULES>", "^@/.*$", "^[./]"],
+  "importOrderSeparation": true,
+  "plugins": ["@trivago/prettier-plugin-sort-imports"]
 }

demo/Demo.js

@@ -1,4 +1,6 @@
+/* eslint-disable react/prop-types */
 import React, {useState} from 'react';
+
 import {
   Alert,
   Badge,
@@ -37,29 +39,29 @@ import {
   Tooltip
 } from '../src';
 
-const StateWrapper = ({tag: Tag, ...otherProps}) => {
+function StateWrapper({tag: Tag, ...otherProps}) {
   // helper to mimic setProps functionality
   const [state, setState] = useState(otherProps);
   return <Tag setProps={props => setState({...state, ...props})} {...state} />;
-};
+}
 
-const CollapseComponent = ({children}) => {
+function CollapseComponent({children}) {
   const [isOpen, setIsOpen] = useState(false);
 
   return (
     <div>
-      <Button onClick={() => setIsOpen(!isOpen)}>Toggle collapse</Button>
+      <Button setProps={() => setIsOpen(!isOpen)}>Toggle collapse</Button>
       <Collapse is_open={isOpen}>{children}</Collapse>
     </div>
   );
-};
+}
 
 const FadeComponent = ({children}) => {
   const [isIn, setIsIn] = useState(false);
 
   return (
     <div>
-      <Button onClick={() => setIsOpen(!isIn)}>Toggle fade</Button>
+      <Button setProps={() => setIsIn(!isIn)}>Toggle fade</Button>
       <Fade is_in={isIn}>{children}</Fade>
     </div>
   );
@@ -212,7 +214,7 @@ const Demo = () => (
         <Col md={3}>
           <Card>
             <CardBody>
-              <h5 className="card-title">Here's another card</h5>
+              <h5 className="card-title">Here&apos;s another card</h5>
               <p className="card-text">With some text, and a button</p>
               <Button color="success">Click here</Button>
             </CardBody>
@@ -221,7 +223,7 @@ const Demo = () => (
         <Col md={3}>
           <Card>
             <CardBody>
-              <h5 className="card-title">Here's yet another card</h5>
+              <h5 className="card-title">Here&apos;s yet another card</h5>
               <p className="card-text">With some text, and some links</p>
               <CardLink href="https://www.asidatascience.com">
                 External

demo/index.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+
+import {createRoot} from 'react-dom/client';
 
 import Demo from './Demo';
 
-const rootInstance = ReactDOM.render(
-    <Demo />,
-    document.getElementById('react-demo-entry-point')
-);
+const root = createRoot(document.getElementById('react-demo-entry-point'));
+
+root.render(<Demo />);

eslint.config.mjs

@@ -0,0 +1,39 @@
+import pluginJs from '@eslint/js';
+import pluginJest from 'eslint-plugin-jest';
+import pluginReact from 'eslint-plugin-react';
+import unusedImports from 'eslint-plugin-unused-imports';
+import globals from 'globals';
+
+/** @type {import('eslint').Linter.Config[]} */
+export default [
+  {
+    files: ['**/*.{js,mjs,cjs,jsx}'],
+    settings: {react: {version: 'detect'}},
+    plugins: {jest: pluginJest, 'unused-imports': unusedImports},
+    languageOptions: {
+      globals: pluginJest.environments.globals.globals
+    },
+    rules: {
+      'no-unused-vars': 'off',
+      'unused-imports/no-unused-imports': 'error',
+      'unused-imports/no-unused-vars': [
+        'warn',
+        {
+          vars: 'all',
+          varsIgnorePattern: '^_',
+          args: 'after-used',
+          argsIgnorePattern: '^_'
+        }
+      ],
+      'jest/no-disabled-tests': 'warn',
+      'jest/no-focused-tests': 'error',
+      'jest/no-identical-title': 'error',
+      'jest/prefer-to-have-length': 'warn',
+      'jest/valid-expect': 'error'
+    }
+  },
+  {languageOptions: {globals: globals.browser}},
+
+  pluginJs.configs.recommended,
+  pluginReact.configs.flat.recommended
+];