refactor: Add prettier-plugin-organize-imports (#204)

* chore(deps): Add `prettier-plugin-organize-imports`

* refactor: Organize imports

* chore(config): Setup `eslint-plugin-tailwindcss`

We also add a rule to organize class names by the
recommended order.

* chore(config): Run more thorough checks pre-commit

More closely emulate CI in the git pre-commit hook.

* refactor: Resolve linter warnings

* chore(ci): adjust codecov threshold

Co-authored-by: Ricardo Lüders <[email protected]>

.eslintrc.js

@@ -5,6 +5,7 @@ module.exports = {
     'plugin:prettier/recommended',
     'plugin:react-hooks/recommended',
     'plugin:storybook/recommended',
+    'plugin:tailwindcss/recommended',
   ],
   ignorePatterns: ['.eslintrc.js', 'config-overrides.js', 'lint-staged.js', 'postcss.config.js', 'tailwind.config.js'],
   parser: '@typescript-eslint/parser',
@@ -14,9 +15,15 @@ module.exports = {
     },
     project: ['tsconfig.json', 'tsconfig.lib.json', 'cypress/tsconfig.json'],
   },
-  plugins: ['@typescript-eslint', 'prettier', 'react-hooks', 'storybook'],
+  plugins: ['@typescript-eslint', 'prettier', 'react-hooks', 'storybook', 'tailwindcss'],
   root: true,
   rules: {
     '@typescript-eslint/consistent-type-imports': 'warn',
+    'tailwindcss/classnames-order': [
+      'warn',
+      {
+        officialSorting: true,
+      },
+    ],
   },
 };

.github/ISSUE_TEMPLATE/bug_report.md

@@ -4,14 +4,14 @@ about: Create a report to help us improve
 title: ''
 labels: ''
 assignees: ''
-
 ---
 
 **Describe the bug**
 A clear and concise description of what the bug is.
 
 **To Reproduce**
 Steps to reproduce the behavior:
+
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'
@@ -24,15 +24,17 @@ A clear and concise description of what you expected to happen.
 If applicable, add screenshots to help explain your problem.
 
 **Desktop (please complete the following information):**
- - OS: [e.g. iOS]
- - Browser [e.g. chrome, safari]
- - Version [e.g. 22]
+
+- OS: [e.g. iOS]
+- Browser [e.g. chrome, safari]
+- Version [e.g. 22]
 
 **Smartphone (please complete the following information):**
- - Device: [e.g. iPhone6]
- - OS: [e.g. iOS8.1]
- - Browser [e.g. stock browser, safari]
- - Version [e.g. 22]
+
+- Device: [e.g. iPhone6]
+- OS: [e.g. iOS8.1]
+- Browser [e.g. stock browser, safari]
+- Version [e.g. 22]
 
 **Additional context**
 Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -4,7 +4,6 @@ about: Suggest an idea for this project
 title: ''
 labels: ''
 assignees: ''
-
 ---
 
 **Is your feature request related to a problem? Please describe.**

.github/workflows/build.yaml

@@ -21,7 +21,7 @@ jobs:
         with:
           node-version: 16
 
-      - name: ⏳ Setup Cache 
+      - name: ⏳ Setup Cache
         uses: actions/cache@v3
         with:
           path: '**/node_modules'
@@ -44,15 +44,15 @@ jobs:
       - name: 🧰 Build code
         run: yarn build
 
-      - name: 📊 Upload coverage to Codecov 
+      - name: 📊 Upload coverage to Codecov
         uses: codecov/codecov-action@v2
         with:
           fail_ci_if_error: false
           files: coverage/coverage-final.json
           token: ${{ secrets.CODECOV_TOKEN }}
           verbose: false
 
-      - name: 📖 Build Storybook 
+      - name: 📖 Build Storybook
         run: yarn build:storybook
 
       - name: 🚀 Deploy the website

.github/workflows/ci.yaml

@@ -21,7 +21,7 @@ jobs:
         with:
           node-version: 16
 
-      - name: ⏳ Setup Cache 
+      - name: ⏳ Setup Cache
         uses: actions/cache@v3
         with:
           path: '**/node_modules'
@@ -41,7 +41,7 @@ jobs:
       - name: 🔬 Run unit tests
         run: yarn test:coverage
 
-      - name: 📊 Upload coverage to Codecov 
+      - name: 📊 Upload coverage to Codecov
         uses: codecov/codecov-action@v2
         with:
           fail_ci_if_error: true
@@ -52,5 +52,5 @@ jobs:
       - name: 🧰 Build code
         run: yarn build
 
-      - name: 📖 Build Storybook 
+      - name: 📖 Build Storybook
         run: yarn build:storybook

.husky/pre-commit

@@ -1,5 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-CI=true yarn test
-yarn run lint:staged
+yarn prettier && yarn lint && yarn test run && yarn build

CODE_OF_CONDUCT.md

@@ -14,21 +14,21 @@ religion, or sexual identity and orientation.
 Examples of behavior that contributes to creating a positive environment
 include:
 
-* Using welcoming and inclusive language
-* Being respectful of differing viewpoints and experiences
-* Gracefully accepting constructive criticism
-* Focusing on what is best for the community
-* Showing empathy towards other community members
+- Using welcoming and inclusive language
+- Being respectful of differing viewpoints and experiences
+- Gracefully accepting constructive criticism
+- Focusing on what is best for the community
+- Showing empathy towards other community members
 
 Examples of unacceptable behavior by participants include:
 
-* The use of sexualized language or imagery and unwelcome sexual attention or
+- The use of sexualized language or imagery and unwelcome sexual attention or
   advances
-* Trolling, insulting/derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or electronic
+- Trolling, insulting/derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or electronic
   address, without explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
+- Other conduct which could reasonably be considered inappropriate in a
   professional setting
 
 ## Our Responsibilities

CONTRIBUTING.md

@@ -39,4 +39,4 @@ Our Code of Conduct means that you are responsible for treating everyone on the
 
 ## Code of conduct
 
-For more information [check this file](CODE_OF_CONDUCT.md).
+For more information [check this file](CODE_OF_CONDUCT.md).

codecov.yml

@@ -0,0 +1,6 @@
+coverage:
+  status:
+    project:
+      default:
+        target: auto
+        threshold: 0.5%

package.json

@@ -33,8 +33,8 @@
     "eject": "react-app-rewired eject",
     "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}",
+    "prettier": "prettier --check --ignore-path .gitignore .",
+    "prettier:fix": "prettier --write --ignore-path .gitignore .",
     "prepare": "husky install",
     "prepublishOnly": "yarn build:lib",
     "release": "standard-version -a",
@@ -95,13 +95,14 @@
     "eslint-plugin-react": "^7.30.0",
     "eslint-plugin-react-hooks": "^4.5.0",
     "eslint-plugin-storybook": "^0.5.12",
+    "eslint-plugin-tailwindcss": "^3.5.0",
     "flowbite": "^1.4.2",
     "husky": "^7.0.4",
     "jsdom": "^19.0.0",
     "lint-staged": "^12.3.8",
     "postcss": "^8.4.12",
     "prettier": "^2.6.2",
-    "prettier-plugin-tailwindcss": "^0.1.8",
+    "prettier-plugin-organize-imports": "^2.3.4",
     "react": "^18.0.0",
     "react-app-rewired": "^2.2.1",
     "react-dom": "^18.0.0",

public/404.html

@@ -1,40 +1,45 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="utf-8">
+  <head>
+    <meta charset="utf-8" />
     <title>Flowbite React Components</title>
     <script type="text/javascript">
-        // Single Page Apps for GitHub Pages
-        // MIT License
-        // https://github.com/rafgraph/spa-github-pages
-        // This script takes the current url and converts the path and query
-        // string into just a query string, and then redirects the browser
-        // to the new url with only a query string and hash fragment,
-        // e.g. https://www.foo.tld/one/two?a=b&c=d#qwe, becomes
-        // https://www.foo.tld/?/one/two&a=b~and~c=d#qwe
-        // Note: this 404.html file must be at least 512 bytes for it to work
-        // with Internet Explorer (it is currently > 512 bytes)
+      // Single Page Apps for GitHub Pages
+      // MIT License
+      // https://github.com/rafgraph/spa-github-pages
+      // This script takes the current url and converts the path and query
+      // string into just a query string, and then redirects the browser
+      // to the new url with only a query string and hash fragment,
+      // e.g. https://www.foo.tld/one/two?a=b&c=d#qwe, becomes
+      // https://www.foo.tld/?/one/two&a=b~and~c=d#qwe
+      // Note: this 404.html file must be at least 512 bytes for it to work
+      // with Internet Explorer (it is currently > 512 bytes)
 
-        // If you're creating a Project Pages site and NOT using a custom domain,
-        // then set pathSegmentsToKeep to 1 (enterprise users may need to set it to > 1).
-        // This way the code will only replace the route part of the path, and not
-        // the real directory in which the app resides, for example:
-        // https://username.github.io/repo-name/one/two?a=b&c=d#qwe becomes
-        // https://username.github.io/repo-name/?/one/two&a=b~and~c=d#qwe
-        // Otherwise, leave pathSegmentsToKeep as 0.
-        var pathSegmentsToKeep = 0;
-
-        var l = window.location;
-        l.replace(
-            l.protocol + '//' + l.hostname + (l.port ? ':' + l.port : '') +
-            l.pathname.split('/').slice(0, 1 + pathSegmentsToKeep).join('/') + '/?/' +
-            l.pathname.slice(1).split('/').slice(pathSegmentsToKeep).join('/').replace(/&/g, '~and~') +
-            (l.search ? '&' + l.search.slice(1).replace(/&/g, '~and~') : '') +
-            l.hash
-        );
+      // If you're creating a Project Pages site and NOT using a custom domain,
+      // then set pathSegmentsToKeep to 1 (enterprise users may need to set it to > 1).
+      // This way the code will only replace the route part of the path, and not
+      // the real directory in which the app resides, for example:
+      // https://username.github.io/repo-name/one/two?a=b&c=d#qwe becomes
+      // https://username.github.io/repo-name/?/one/two&a=b~and~c=d#qwe
+      // Otherwise, leave pathSegmentsToKeep as 0.
+      var pathSegmentsToKeep = 0;
 
+      var l = window.location;
+      l.replace(
+        l.protocol +
+          '//' +
+          l.hostname +
+          (l.port ? ':' + l.port : '') +
+          l.pathname
+            .split('/')
+            .slice(0, 1 + pathSegmentsToKeep)
+            .join('/') +
+          '/?/' +
+          l.pathname.slice(1).split('/').slice(pathSegmentsToKeep).join('/').replace(/&/g, '~and~') +
+          (l.search ? '&' + l.search.slice(1).replace(/&/g, '~and~') : '') +
+          l.hash,
+      );
     </script>
-</head>
-<body>
-</body>
-</html>
+  </head>
+  <body></body>
+</html>

public/index.html

@@ -47,14 +47,18 @@
       // When the single page app is loaded further down in this file,
       // the correct url will be waiting in the browser's history for
       // the single page app to route accordingly.
-      (function(l) {
-        if (l.search[1] === '/' ) {
-          var decoded = l.search.slice(1).split('&').map(function(s) {
-            return s.replace(/~and~/g, '&')
-          }).join('?');
+      (function (l) {
+        if (l.search[1] === '/') {
+          var decoded = l.search
+            .slice(1)
+            .split('&')
+            .map(function (s) {
+              return s.replace(/~and~/g, '&');
+            })
+            .join('?');
           window.history.replaceState(null, null, l.pathname.slice(0, -1) + decoded + l.hash);
         }
-      }(window.location))
+      })(window.location);
     </script>
     <!-- End Single Page Apps for GitHub Pages -->
   </head>

src/docs/Root.tsx

@@ -4,7 +4,6 @@ import { BsGithub } from 'react-icons/bs';
 import { HiMenuAlt1 } from 'react-icons/hi';
 import { SiStorybook } from 'react-icons/si';
 import { Link, Route, Routes, useLocation } from 'react-router-dom';
-
 import { DarkThemeToggle, Navbar, Sidebar, Spinner } from '../lib';
 import { routes } from './routes';
 

src/docs/pages/AccordionPage.tsx

@@ -1,6 +1,5 @@
 import type { FC } from 'react';
 import { HiOutlineArrowCircleDown } from 'react-icons/hi';
-
 import { Accordion } from '../../lib';
 import type { CodeExample } from './DemoPage';
 import { DemoPage } from './DemoPage';

src/docs/pages/AlertsPage.tsx

@@ -1,6 +1,5 @@
 import type { FC } from 'react';
 import { HiEye, HiInformationCircle } from 'react-icons/hi';
-
 import { Alert } from '../../lib';
 import type { CodeExample } from './DemoPage';
 import { DemoPage } from './DemoPage';

src/docs/pages/AvatarPage.tsx

@@ -1,5 +1,4 @@
 import type { FC } from 'react';
-
 import { Avatar, Dropdown } from '../../lib';
 import type { CodeExample } from './DemoPage';
 import { DemoPage } from './DemoPage';

src/docs/pages/BadgesPage.tsx

@@ -1,6 +1,5 @@
 import type { FC } from 'react';
 import { HiCheck, HiClock } from 'react-icons/hi';
-
 import { Badge } from '../../lib';
 import type { CodeExample } from './DemoPage';
 import { DemoPage } from './DemoPage';

src/docs/pages/BreadcrumbPage.tsx

@@ -1,7 +1,6 @@
 import type { FC } from 'react';
 import { HiHome } from 'react-icons/hi';
 import { Breadcrumb } from '../../lib';
-
 import type { CodeExample } from './DemoPage';
 import { DemoPage } from './DemoPage';
 

src/docs/pages/ButtonGroupPage.tsx

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

src/docs/pages/ButtonsPage.tsx

@@ -1,6 +1,5 @@
 import type { FC } from 'react';
 import { HiOutlineArrowRight, HiShoppingCart } from 'react-icons/hi';
-
 import { Button, Spinner } from '../../lib';
 import type { CodeExample } from './DemoPage';
 import { DemoPage } from './DemoPage';