feat(theme): add theme={} attribute to components that need it (#611)

* feat(theme): adding theme prop to components

* feat(/theme/default): finish migrating components to use a `root` theme

Follow up to #500

BREAKING CHANGE: Like in #500, this version permanently changes the `FlowbiteTheme` for numerous
components.

The philosophy is that themes will more clearly reflect the component's structure.

For example, an `<Accordion>` can contain any number of `<Accordion.Title>` or `<Accordion.Content>`
sections. The theme used to look like:

```js
accordion: {
  base: "..",
  content: "..",
  flush: "..",
  title: "..",
}
```

And now, the theme for an `<Accordion>` looks like:

```
js
accordion: {
  root: {
    base: "..",
    flush: "..",
  },
  content: "..",
  title: "..",
}
```

So now the options in the theme which apply to the `<Accordion>` itself will always be found under
`root`. Likewise, `<Accordion.Content>` can be themed via the `content` subsection.

This ultimately will apply to all components.

* ci(eslint): remove `prettier` plugins for `eslint`

Instead, use `prettier-plugin-tailwindcss`, which is sufficient.

* refactor(/lib/*): use `yarn prettier` with `prettier-plugin-tailwindcss`

* fix(/lib/components/*.spec): resolve test errors caused by migrating theme

* feat(/lib/components/*): add `theme={}` attribute to components that need it

See notes in #566

* fix(/lib/components/accordion): fix `<Accordion theme={}` types wrong interface

* docs(/pages/theme): update `/theme` documentation to include new theme strategies

We have more powerful options to customize themes now, and they deserve proper documentation.

* ci(eslint): fix `eslint` configured to ignore `src/lib/`

Well this sucks! We've not been linting the vast majority of the actual code of the library due to a
misconfigured `.eslintignore`. Mass-fix coming.

* ci(eslint): resolve outstanding `eslint` issues

* fix(/lib/components/footer/footertitle): allow `<Footer.Title as="..">` to not use `<h2>`

You can cast the component to a component of your own, or a generic HTML element, e.g.,
`<Footer.Title as="h3">`.

resolve #594

* fix(/lib/components/modal): fix `Modal` expects `document` to exist

So, I originally fixed this issue across every component in #124, but the bug was reintroduced by

resolve #609

* ci(.github/workflows/build): upgrade `codecov-action` -> `v3`

---------

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

Author: tulup-conner

.eslintignore

@@ -45,11 +45,10 @@ jobs:
         run: yarn build
 
       - name: 📊 Upload coverage to Codecov
-        uses: codecov/codecov-action@v2
+        uses: codecov/codecov-action@v3
         with:
           fail_ci_if_error: false
           files: coverage/coverage-final.json
-          token: ${{ secrets.CODECOV_TOKEN }}
           verbose: false
 
       - name: 📖 Build Storybook

.eslintrc.js

@@ -103,19 +103,17 @@
     "cypress-axe": "^1.0.0",
     "cz-conventional-changelog": "3.3.0",
     "eslint": "^8.21.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.30.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-storybook": "^0.6.4",
-    "eslint-plugin-tailwindcss": "^3.6.0",
     "flowbite": "^1.5.4",
     "husky": "^8.0.1",
     "jsdom": "^20.0.1",
     "lint-staged": "^13.0.3",
     "postcss": "^8.4.18",
     "prettier": "^2.7.1",
     "prettier-plugin-organize-imports": "^3.0.3",
+    "prettier-plugin-tailwindcss": "^0.2.2",
     "react": "^18.2.0",
     "react-app-rewired": "^2.2.1",
     "react-dom": "^18.2.0",
@@ -165,5 +163,42 @@
       "react": "^18.2.0",
       "react-dom": "^18.2.0"
     }
+  },
+  "eslintConfig": {
+    "extends": [
+      "eslint:recommended",
+      "plugin:@typescript-eslint/recommended",
+      "plugin:react-hooks/recommended",
+      "plugin:storybook/recommended"
+    ],
+    "ignorePatterns": [
+      "/build",
+      "/docs",
+      "/lib",
+      "commitlint.config.js",
+      "config-overrides.js",
+      "lint-staged.js",
+      "postcss.config.js",
+      "tailwind.config.js"
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+      "ecmaFeatures": {
+        "jsx": true
+      },
+      "project": [
+        "tsconfig.json",
+        "cypress/tsconfig.json"
+      ]
+    },
+    "plugins": [
+      "@typescript-eslint",
+      "react-hooks",
+      "storybook"
+    ],
+    "root": true,
+    "rules": {
+      "@typescript-eslint/consistent-type-imports": "warn"
+    }
   }
 }

.github/workflows/build.yaml

@@ -36,7 +36,7 @@ const AlertsPage: FC = () => {
     {
       title: 'Rounded',
       code: (
-        <Alert color="warning" rounded={false}>
+        <Alert color="warning" rounded>
           {alertText}
         </Alert>
       ),

package.json

@@ -35,7 +35,7 @@ const DropdownPage: FC = () => {
         <Dropdown label="Dropdown button">
           <Dropdown.Header>
             <span className="block text-sm">Bonnie Green</span>
-            <span className="block text-sm font-medium truncate">[email protected]</span>
+            <span className="block truncate text-sm font-medium">[email protected]</span>
           </Dropdown.Header>
           <Dropdown.Item>Dashboard</Dropdown.Item>
           <Dropdown.Item>Settings</Dropdown.Item>
@@ -62,7 +62,7 @@ const DropdownPage: FC = () => {
         <Dropdown label="Dropdown">
           <Dropdown.Header>
             <span className="block text-sm">Bonnie Green</span>
-            <span className="block text-sm font-medium truncate">[email protected]</span>
+            <span className="block truncate text-sm font-medium">[email protected]</span>
           </Dropdown.Header>
           <Dropdown.Item icon={HiViewGrid}>Dashboard</Dropdown.Item>
           <Dropdown.Item icon={HiCog}>Settings</Dropdown.Item>
@@ -86,7 +86,7 @@ const DropdownPage: FC = () => {
     {
       title: 'Sizing',
       code: (
-        <div className="flex gap-4 items-center">
+        <div className="flex items-center gap-4">
           <Dropdown label="Small dropdown" size="sm">
             <Dropdown.Item>Dashboard</Dropdown.Item>
             <Dropdown.Item>Settings</Dropdown.Item>
@@ -106,7 +106,7 @@ const DropdownPage: FC = () => {
       title: 'Placement',
       code: (
         <div className="flex flex-col gap-4">
-          <div className="flex gap-4 items-center">
+          <div className="flex items-center gap-4">
             <Dropdown label="Dropdown top" placement="top">
               <Dropdown.Item>Dashboard</Dropdown.Item>
               <Dropdown.Item>Settings</Dropdown.Item>
@@ -132,7 +132,7 @@ const DropdownPage: FC = () => {
               <Dropdown.Item>Sign out</Dropdown.Item>
             </Dropdown>
           </div>
-          <div className="flex gap-4 items-center">
+          <div className="flex items-center gap-4">
             <Dropdown label="Dropdown left start" placement="left-start">
               <Dropdown.Item>Dashboard</Dropdown.Item>
               <Dropdown.Item>Settings</Dropdown.Item>

src/docs/pages/AlertsPage.tsx

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

src/docs/pages/DropdownPage.tsx

@@ -1,7 +1,9 @@
-import { FC, useRef, useState } from 'react';
+import type { FC } from 'react';
+import { useRef, useState } from 'react';
 import { HiAdjustments, HiClipboardList, HiUserCircle } from 'react-icons/hi';
 import { MdDashboard } from 'react-icons/md';
-import { Button, Tabs, TabsRef } from '../../lib';
+import type { TabsRef } from '../../lib';
+import { Button, Tabs } from '../../lib';
 import type { CodeExample } from './DemoPage';
 import { DemoPage } from './DemoPage';