fix(build): Change yarn lint command to actually lint files (#183)

* fix(build): Change `yarn lint` command to actually lint files

Without a default argument, `eslint` does not run
on any files. This changes `eslint` to run on all
files except those found in `.eslintrc.js` or
`.gitignore`.

* chore(deps): Upgrade `eslint` and plugins to latest

* chore(config): Fix `cypress` `tsconfig.json` has no rules

* chore(config): Remove pointless rules from `tsconfig.json`

Removes redundant rules from `tsconfig.json`.

* chore(config): Update `eslint` config for latest version

* chore(lint): Fix `eslint` warnings

* refactor(config): Remove extra rules from `eslint`

Deletes all of the exceptional rules defined in
`eslintrc.js` so the ruleset is standard. The only
significant change is replacing some `any`s.

* refactor: Resolve `no-implicit-any` warnings

* chore(config): Add `consistent-type-imports` to `eslint`

This enforces the use of `import type` where possible
over `import`, possibly completely eliminating unneeded
imports from generated JavaScript (nice!)

* refactor: Replace `import` -> `import type` where possible

.eslintrc.js

@@ -1,32 +1,22 @@
 module.exports = {
   extends: [
-    'plugin:react/recommended',
-    'plugin:@typescript-eslint/eslint-recommended',
+    'eslint:recommended',
     'plugin:@typescript-eslint/recommended',
-    'plugin:react-hooks/recommended',
     'plugin:prettier/recommended',
-    'prettier/prettier',
+    'plugin:react-hooks/recommended',
     'plugin:storybook/recommended',
   ],
-  root: true,
+  ignorePatterns: ['.eslintrc.js', 'config-overrides.js', 'lint-staged.js', 'postcss.config.js', 'tailwind.config.js'],
   parser: '@typescript-eslint/parser',
-  plugins: ['@typescript-eslint/eslint-plugin'],
-  ignorePatterns: ['/node_modules/**', '/build/**'],
-  rules: {
-    '@typescript-eslint/explicit-function-return-type': 'off',
-    '@typescript-eslint/no-non-null-assertion': 'off',
-    '@typescript-eslint/no-inferrable-types': 'off',
-    '@typescript-eslint/no-explicit-any': 'off',
-    '@typescript-eslint/ban-ts-ignore': 'off',
-    '@typescript-eslint/ban-types': 'off',
-    'react/react-in-jsx-scope': 'off',
-    'prettier/prettier': ['error'],
-    'react/display-name': 'off',
-    'react/prop-types': 'off',
-  },
-  settings: {
-    react: {
-      version: 'detect',
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
     },
+    project: ['tsconfig.json', 'tsconfig.lib.json', 'cypress/tsconfig.json'],
+  },
+  plugins: ['@typescript-eslint', 'prettier', 'react-hooks', 'storybook'],
+  root: true,
+  rules: {
+    '@typescript-eslint/consistent-type-imports': 'warn',
   },
 };

cypress/tsconfig.json

@@ -1,4 +1,5 @@
 {
+  "extends": "../tsconfig.json",
   "compilerOptions": {
     "types": ["cypress", "cypress-axe", "node"]
   },

package.json

@@ -31,7 +31,7 @@
     "cypress:open": "cypress open",
     "cypress:run": "cypress run",
     "eject": "react-app-rewired eject",
-    "lint": "eslint --color",
+    "lint": "eslint --color --ignore-path .gitignore .",
     "lint:staged": "lint-staged --config lint-staged.js",
     "prettier": "prettier --check {src,test,.storybook}/**/*.{js,jsx,ts,tsx,json,css,scss}",
     "prettier:fix": "prettier --write {src,test,.storybook}/**/*.{js,jsx,ts,tsx,json,css,scss}",
@@ -81,19 +81,19 @@
     "@types/react": "^18.0.5",
     "@types/react-dom": "^18.0.1",
     "@types/react-syntax-highlighter": "^13.5.2",
-    "@typescript-eslint/eslint-plugin": "^5.10.1",
-    "@typescript-eslint/parser": "^5.10.1",
+    "@typescript-eslint/eslint-plugin": "^5.27.0",
+    "@typescript-eslint/parser": "^5.27.0",
     "autoprefixer": "^10.4.4",
     "axe-core": "^4.4.1",
     "babel-loader": "^8.2.4",
     "cypress": "^9.6.0",
     "cypress-axe": "^0.14.0",
-    "eslint": "^7.32.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-prettier": "^3.4.1",
-    "eslint-plugin-react": "^7.28.0",
-    "eslint-plugin-react-hooks": "^4.3.0",
-    "eslint-plugin-storybook": "^0.5.8",
+    "eslint": "^8.17.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.30.0",
+    "eslint-plugin-react-hooks": "^4.5.0",
+    "eslint-plugin-storybook": "^0.5.12",
     "flowbite": "^1.4.2",
     "husky": "^7.0.4",
     "lint-staged": "^12.3.8",

src/docs/Root.tsx

@@ -1,4 +1,5 @@
-import { FC, Suspense, useRef, useState } from 'react';
+import type { FC } from 'react';
+import { Suspense, useRef, useState } from 'react';
 import { BsGithub } from 'react-icons/bs';
 import { HiMenuAlt1 } from 'react-icons/hi';
 import { SiStorybook } from 'react-icons/si';

src/docs/pages/AccordionPage.tsx

@@ -1,8 +1,9 @@
-import { FC } from 'react';
+import type { FC } from 'react';
 import { HiOutlineArrowCircleDown } from 'react-icons/hi';
 
 import { Accordion } from '../../lib';
-import { CodeExample, DemoPage } from './DemoPage';
+import type { CodeExample } from './DemoPage';
+import { DemoPage } from './DemoPage';
 
 const AccordionPage: FC = () => {
   const examples: CodeExample[] = [

src/docs/pages/AlertsPage.tsx

@@ -1,8 +1,9 @@
-import { FC } from 'react';
+import type { FC } from 'react';
 import { HiEye, HiInformationCircle } from 'react-icons/hi';
 
 import { Alert } from '../../lib';
-import { CodeExample, DemoPage } from './DemoPage';
+import type { CodeExample } from './DemoPage';
+import { DemoPage } from './DemoPage';
 
 const AlertsPage: FC = () => {
   const alertText = (

src/docs/pages/AvatarPage.tsx

@@ -1,7 +1,8 @@
-import { FC } from 'react';
+import type { FC } from 'react';
 
 import { Avatar, Dropdown } from '../../lib';
-import { CodeExample, DemoPage } from './DemoPage';
+import type { CodeExample } from './DemoPage';
+import { DemoPage } from './DemoPage';
 
 const AvatarPage: FC = () => {
   const examples: CodeExample[] = [

src/docs/pages/BadgesPage.tsx

@@ -1,8 +1,9 @@
-import { FC } from 'react';
+import type { FC } from 'react';
 import { HiCheck, HiClock } from 'react-icons/hi';
 
 import { Badge } from '../../lib';
-import { CodeExample, DemoPage } from './DemoPage';
+import type { CodeExample } from './DemoPage';
+import { DemoPage } from './DemoPage';
 
 const BadgesPage: FC = () => {
   const examples: CodeExample[] = [

src/docs/pages/BreadcrumbPage.tsx

@@ -1,8 +1,9 @@
-import { FC } from 'react';
+import type { FC } from 'react';
 import { HiHome } from 'react-icons/hi';
 import { Breadcrumb } from '../../lib';
 
-import { CodeExample, DemoPage } from './DemoPage';
+import type { CodeExample } from './DemoPage';
+import { DemoPage } from './DemoPage';
 
 const BreadcrumbPage: FC = () => {
   const examples: CodeExample[] = [

src/docs/pages/ButtonGroupPage.tsx

@@ -1,7 +1,8 @@
-import { FC } from 'react';
+import type { FC } from 'react';
 import { HiAdjustments, HiCloudDownload, HiUserCircle } from 'react-icons/hi';
 
-import { CodeExample, DemoPage } from './DemoPage';
+import type { CodeExample } from './DemoPage';
+import { DemoPage } from './DemoPage';
 import { Button } from '../../lib';
 
 const ButtonGroupPage: FC = () => {

src/docs/pages/ButtonsPage.tsx

@@ -1,8 +1,9 @@
-import { FC } from 'react';
+import type { FC } from 'react';
 import { HiOutlineArrowRight, HiShoppingCart } from 'react-icons/hi';
 
 import { Button, Spinner } from '../../lib';
-import { CodeExample, DemoPage } from './DemoPage';
+import type { CodeExample } from './DemoPage';
+import { DemoPage } from './DemoPage';
 
 const ButtonsPage: FC = () => {
   const examples: CodeExample[] = [

src/docs/pages/CardPage.tsx

@@ -1,7 +1,8 @@
-import { FC } from 'react';
+import type { FC } from 'react';
 
 import { Card } from '../../lib';
-import { CodeExample, DemoPage } from './DemoPage';
+import type { CodeExample } from './DemoPage';
+import { DemoPage } from './DemoPage';
 
 const CardPage: FC = () => {
   const examples: CodeExample[] = [

src/docs/pages/CarouselPage.tsx

@@ -1,6 +1,7 @@
-import { FC } from 'react';
+import type { FC } from 'react';
 
-import { CodeExample, DemoPage } from './DemoPage';
+import type { CodeExample } from './DemoPage';
+import { DemoPage } from './DemoPage';
 import { Carousel } from '../../lib';
 
 const CarouselPage: FC = () => {

src/docs/pages/DashboardPage.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import type { FC } from 'react';
 import { HiExternalLink } from 'react-icons/hi';
 import { Link } from 'react-router-dom';
 import classNames from 'classnames';

src/docs/pages/DemoPage.tsx

@@ -1,5 +1,6 @@
-import { FC, ReactNode } from 'react';
-import reactElementToJSXString, { Options } from 'react-element-to-jsx-string';
+import type { FC, ReactNode } from 'react';
+import type { Options } from 'react-element-to-jsx-string';
+import reactElementToJSXString from 'react-element-to-jsx-string';
 import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { dracula } from 'react-syntax-highlighter/dist/esm/styles/prism';
 import tsx from 'react-syntax-highlighter/dist/esm/languages/prism/tsx';
@@ -22,8 +23,6 @@ export type DemoPageProps = {
 };
 
 export const DemoPage: FC<DemoPageProps> = ({ examples }) => {
-  const SyntaxHighlighterFix = SyntaxHighlighter as any;
-
   return (
     <div className="mx-auto flex max-w-4xl flex-col gap-8 dark:text-white">
       {examples.map(({ title, content, code, showCode = true, codeClassName, codeStringifierOptions }, index) => (
@@ -33,7 +32,7 @@ export const DemoPage: FC<DemoPageProps> = ({ examples }) => {
           <div className={codeClassName}>
             <Card>
               {showCode && code}
-              <SyntaxHighlighterFix language="tsx" style={dracula}>
+              <SyntaxHighlighter language="tsx" style={dracula}>
                 {reactElementToJSXString(code, {
                   showFunctions: true,
                   functionValue: (fn) => fn.name,
@@ -42,7 +41,7 @@ export const DemoPage: FC<DemoPageProps> = ({ examples }) => {
                   useFragmentShortSyntax: false,
                   ...codeStringifierOptions,
                 })}
-              </SyntaxHighlighterFix>
+              </SyntaxHighlighter>
             </Card>
           </div>
         </div>

src/docs/pages/DropdownPage.tsx

@@ -1,6 +1,7 @@
-import { FC } from 'react';
+import type { FC } from 'react';
 
-import { CodeExample, DemoPage } from './DemoPage';
+import type { CodeExample } from './DemoPage';
+import { DemoPage } from './DemoPage';
 import { Dropdown } from '../../lib';
 
 const DropdownPage: FC = () => {

src/docs/pages/FooterPage.tsx

@@ -1,5 +1,6 @@
-import { FC } from 'react';
-import { CodeExample, DemoPage } from './DemoPage';
+import type { FC } from 'react';
+import type { CodeExample } from './DemoPage';
+import { DemoPage } from './DemoPage';
 import { Footer } from '../../lib/components/Footer';
 import { BsDribbble, BsFacebook, BsGithub, BsInstagram, BsTwitter } from 'react-icons/bs';
 

src/docs/pages/FormsPage.tsx

@@ -1,7 +1,9 @@
-import { FC, useState } from 'react';
+import type { FC } from 'react';
+import { useState } from 'react';
 import { HiMail } from 'react-icons/hi';
 
-import { CodeExample, DemoPage } from './DemoPage';
+import type { CodeExample } from './DemoPage';
+import { DemoPage } from './DemoPage';
 import { Button, Checkbox, FileInput, Label, Radio, Select, Textarea, TextInput, ToggleSwitch } from '../../lib';
 
 const FormsPage: FC = () => {

src/docs/pages/ListGroupPage.tsx

@@ -1,8 +1,9 @@
-import { FC } from 'react';
+import type { FC } from 'react';
 import { HiCloudDownload, HiInbox, HiOutlineAdjustments, HiUserCircle } from 'react-icons/hi';
 
 import { ListGroup } from '../../lib';
-import { CodeExample, DemoPage } from './DemoPage';
+import type { CodeExample } from './DemoPage';
+import { DemoPage } from './DemoPage';
 
 const ListGroupPage: FC = () => {
   const examples: CodeExample[] = [

src/docs/pages/ModalPage.tsx

@@ -1,7 +1,10 @@
-import { FC, useState } from 'react';
+import type { FC } from 'react';
+import { useState } from 'react';
 import { HiOutlineExclamationCircle } from 'react-icons/hi';
 
-import { CodeExample, DemoPage } from './DemoPage';
+import type { CodeExample } from './DemoPage';
+import { DemoPage } from './DemoPage';
+import type { ModalSize, ModalPlacement } from '../../lib';
 import { Button, Checkbox, Label, Modal, Select, TextInput } from '../../lib';
 
 const ModalPage: FC = () => {
@@ -129,7 +132,7 @@ const ModalPage: FC = () => {
             </Select>
             <Button onClick={() => setOpenModal('size')}>Toggle modal</Button>
           </div>
-          <Modal show={openModal === 'size'} size={modalSize as any} onClose={() => setOpenModal(undefined)}>
+          <Modal show={openModal === 'size'} size={modalSize as ModalSize} onClose={() => setOpenModal(undefined)}>
             <Modal.Header>Small modal</Modal.Header>
             <Modal.Body className="space-y-6 p-6">
               <p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
@@ -172,7 +175,7 @@ const ModalPage: FC = () => {
           </div>
           <Modal
             show={openModal === 'placement'}
-            placement={modalPlacement as any}
+            placement={modalPlacement as ModalPlacement}
             onClose={() => setOpenModal(undefined)}
           >
             <Modal.Header>Small modal</Modal.Header>

src/docs/pages/NavbarPage.tsx

@@ -1,5 +1,6 @@
-import { FC } from 'react';
-import { CodeExample, DemoPage } from './DemoPage';
+import type { FC } from 'react';
+import type { CodeExample } from './DemoPage';
+import { DemoPage } from './DemoPage';
 import { Avatar, Button, Dropdown, Navbar } from '../../lib';
 
 const NavbarPage: FC = () => {

src/docs/pages/PaginationPage.tsx

@@ -1,7 +1,9 @@
-import { FC, useState } from 'react';
+import type { FC } from 'react';
+import { useState } from 'react';
 import { Pagination } from '../../lib/components/Pagination';
 
-import { CodeExample, DemoPage } from './DemoPage';
+import type { CodeExample } from './DemoPage';
+import { DemoPage } from './DemoPage';
 
 const PaginationPage: FC = (): JSX.Element => {
   const [currentPage, setCurrentPage] = useState(1);

src/docs/pages/ProgressPage.tsx

@@ -1,7 +1,8 @@
-import { FC } from 'react';
+import type { FC } from 'react';
 
 import { Progress } from '../../lib';
-import { CodeExample, DemoPage } from './DemoPage';
+import type { CodeExample } from './DemoPage';
+import { DemoPage } from './DemoPage';
 
 const ProgressPage: FC = () => {
   const examples: CodeExample[] = [

src/docs/pages/RatingPage.tsx

@@ -1,6 +1,7 @@
-import { FC } from 'react';
+import type { FC } from 'react';
 import { Rating } from '../../lib';
-import { CodeExample, DemoPage } from './DemoPage';
+import type { CodeExample } from './DemoPage';
+import { DemoPage } from './DemoPage';
 
 const RatingPage: FC = () => {
   const examples: CodeExample[] = [

src/docs/pages/SidebarPage.tsx

@@ -1,8 +1,9 @@
-import { FC } from 'react';
+import type { FC } from 'react';
 import { BiBuoy } from 'react-icons/bi';
 import { HiArrowSmRight, HiChartPie, HiInbox, HiShoppingBag, HiTable, HiUser, HiViewBoards } from 'react-icons/hi';
 import { Sidebar, Badge, Button } from '../../lib';
-import { CodeExample, DemoPage } from './DemoPage';
+import type { CodeExample } from './DemoPage';
+import { DemoPage } from './DemoPage';
 
 const SidebarPage: FC = () => {
   const examples: CodeExample[] = [

src/docs/pages/SpinnersPage.tsx

@@ -1,7 +1,8 @@
-import { FC } from 'react';
+import type { FC } from 'react';
 
 import { Button, Spinner } from '../../lib';
-import { CodeExample, DemoPage } from './DemoPage';
+import type { CodeExample } from './DemoPage';
+import { DemoPage } from './DemoPage';
 
 const SpinnersPage: FC = () => {
   const examples: CodeExample[] = [

src/docs/pages/TablePage.tsx

@@ -1,6 +1,7 @@
-import { FC } from 'react';
+import type { FC } from 'react';
 
-import { CodeExample, DemoPage } from './DemoPage';
+import type { CodeExample } from './DemoPage';
+import { DemoPage } from './DemoPage';
 import { Checkbox, Table } from '../../lib';
 
 const TablePage: FC = () => {