From 607cd5d1e0c109556ff9f425bf39c741cd409c75 Mon Sep 17 00:00:00 2001
From: Pablo Lara <larabjj@gmail.com>
Date: Tue, 1 Oct 2024 05:44:24 +0200
Subject: [PATCH] feat: install, configure and run prettier-plugin-tailwindcss

---
 .eslintrc.cjs                                 |  1 +
 .prettierrc.json                              |  3 +-
 .../table/data-table-filter-custom.tsx        |  8 +-
 .../ui/custom/custom-dropdown-filter.tsx      |  8 +-
 package-lock.json                             | 90 ++++++++++++++++++-
 package.json                                  |  2 +
 6 files changed, 99 insertions(+), 13 deletions(-)

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index c9f6d992bf..04f90c81d7 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -10,6 +10,7 @@ module.exports = {
     "plugin:@typescript-eslint/recommended",
     "plugin:security/recommended-legacy",
     "plugin:jsx-a11y/recommended",
+    "eslint-config-prettier",
     "prettier",
   ],
   parserOptions: {
diff --git a/.prettierrc.json b/.prettierrc.json
index 15d19325bb..0cbbafa6cc 100644
--- a/.prettierrc.json
+++ b/.prettierrc.json
@@ -5,5 +5,6 @@
   "tabWidth": 2,
   "useTabs": false,
   "semi": true,
-  "printWidth": 80
+  "printWidth": 80,
+  "plugins": ["prettier-plugin-tailwindcss"]
 }
diff --git a/components/providers/table/data-table-filter-custom.tsx b/components/providers/table/data-table-filter-custom.tsx
index b43b55f3f4..5dc2f94dc2 100644
--- a/components/providers/table/data-table-filter-custom.tsx
+++ b/components/providers/table/data-table-filter-custom.tsx
@@ -36,7 +36,7 @@ export const DataTableFilterCustom = ({
   );
 
   return (
-    <div className="flex flex-col md:flex-row md:items-start gap-4">
+    <div className="flex flex-col gap-4 md:flex-row md:items-start">
       <CustomButton
         ariaLabel={showFilters ? "Hide Filters" : "Show Filters"}
         variant="flat"
@@ -53,11 +53,11 @@ export const DataTableFilterCustom = ({
       <div
         className={`transition-all duration-700 ease-in-out ${
           showFilters
-            ? "opacity-100 translate-x-0 w-full md:max-w-80 max-h-96 overflow-visible"
-            : "opacity-0 -translate-x-full max-h-0 overflow-hidden"
+            ? "max-h-96 w-full translate-x-0 overflow-visible opacity-100 md:max-w-80"
+            : "max-h-0 -translate-x-full overflow-hidden opacity-0"
         }`}
       >
-        <div className="flex flex-col md:flex-row gap-4">
+        <div className="flex flex-col gap-4 md:flex-row">
           {filters.map((filter) => (
             <CustomDropdownFilter
               key={filter.key}
diff --git a/components/ui/custom/custom-dropdown-filter.tsx b/components/ui/custom/custom-dropdown-filter.tsx
index 95fba95b34..d333545f49 100644
--- a/components/ui/custom/custom-dropdown-filter.tsx
+++ b/components/ui/custom/custom-dropdown-filter.tsx
@@ -93,11 +93,11 @@ export const CustomDropdownFilter: React.FC<CustomDropdownFilterProps> = ({
     }
   }, [groupSelected, allFilterKeys]);
   return (
-    <div className="flex flex-col w-full gap-2">
+    <div className="flex w-full flex-col gap-2">
       <Popover backdrop="transparent" placement="bottom-start">
         <PopoverTrigger>
           <Button
-            className="inline-flex items-center justify-center whitespace-nowrap font-medium transition-colors focus-visible:outline-none disabled:opacity-50 border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground rounded-md px-3 text-xs h-8 border-dashed"
+            className="border-input hover:bg-accent hover:text-accent-foreground inline-flex h-8 items-center justify-center whitespace-nowrap rounded-md border border-dashed bg-background px-3 text-xs font-medium shadow-sm transition-colors focus-visible:outline-none disabled:opacity-50"
             startContent={<PlusCircleIcon size={16} />}
             size="sm"
           >
@@ -107,7 +107,7 @@ export const CustomDropdownFilter: React.FC<CustomDropdownFilterProps> = ({
               <>
                 <Divider orientation="vertical" className="mx-2 h-4" />
 
-                <div className="hidden space-x-1 lg:flex max-w-24 overflow-x-auto no-scrollbar">
+                <div className="no-scrollbar hidden max-w-24 space-x-1 overflow-x-auto lg:flex">
                   {groupSelected.size > 3 ? (
                     <span
                       className={filterSelectedClass}
@@ -145,7 +145,7 @@ export const CustomDropdownFilter: React.FC<CustomDropdownFilterProps> = ({
               <Divider orientation="horizontal" className="mt-2" />
               <ScrollShadow
                 hideScrollBar
-                className="flex flex-col gap-y-2 py-2 max-w-56 max-h-96"
+                className="flex max-h-96 max-w-56 flex-col gap-y-2 py-2"
               >
                 {allFilterKeys.map((value) => (
                   <Checkbox className="font-normal" key={value} value={value}>
diff --git a/package-lock.json b/package-lock.json
index a9c0840142..9d3fc5073c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -73,6 +73,8 @@
         "husky": "^9.0.11",
         "lint-staged": "^15.2.7",
         "postcss": "8.4.38",
+        "prettier": "^3.3.3",
+        "prettier-plugin-tailwindcss": "^0.6.8",
         "tailwind-variants": "0.1.20",
         "tailwindcss": "3.4.3",
         "typescript": "^5.5.4",
@@ -7627,6 +7629,7 @@
       "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-9.1.0.tgz",
       "integrity": "sha512-NSWl5BFQWEPi1j4TjVNItzYV7dZXZ+wP6I6ZhrBGpChQhZRUaElihE9uRRkcbRnNb76UMKDF3r+WTmNcGPKsqw==",
       "dev": true,
+      "license": "MIT",
       "bin": {
         "eslint-config-prettier": "bin/cli.js"
       },
@@ -10880,11 +10883,11 @@
       }
     },
     "node_modules/prettier": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.2.tgz",
-      "integrity": "sha512-rAVeHYMcv8ATV5d508CFdn+8/pHPpXeIid1DdrPwXnaAdH7cqjVbpJaT5eq4yRAFU/lsbwYwSF/n5iNrdJHPQA==",
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz",
+      "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==",
       "dev": true,
-      "peer": true,
+      "license": "MIT",
       "bin": {
         "prettier": "bin/prettier.cjs"
       },
@@ -10907,6 +10910,85 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/prettier-plugin-tailwindcss": {
+      "version": "0.6.8",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.6.8.tgz",
+      "integrity": "sha512-dGu3kdm7SXPkiW4nzeWKCl3uoImdd5CTZEJGxyypEPL37Wj0HT2pLqjrvSei1nTeuQfO4PUfjeW5cTUNRLZ4sA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.21.3"
+      },
+      "peerDependencies": {
+        "@ianvs/prettier-plugin-sort-imports": "*",
+        "@prettier/plugin-pug": "*",
+        "@shopify/prettier-plugin-liquid": "*",
+        "@trivago/prettier-plugin-sort-imports": "*",
+        "@zackad/prettier-plugin-twig-melody": "*",
+        "prettier": "^3.0",
+        "prettier-plugin-astro": "*",
+        "prettier-plugin-css-order": "*",
+        "prettier-plugin-import-sort": "*",
+        "prettier-plugin-jsdoc": "*",
+        "prettier-plugin-marko": "*",
+        "prettier-plugin-multiline-arrays": "*",
+        "prettier-plugin-organize-attributes": "*",
+        "prettier-plugin-organize-imports": "*",
+        "prettier-plugin-sort-imports": "*",
+        "prettier-plugin-style-order": "*",
+        "prettier-plugin-svelte": "*"
+      },
+      "peerDependenciesMeta": {
+        "@ianvs/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "@prettier/plugin-pug": {
+          "optional": true
+        },
+        "@shopify/prettier-plugin-liquid": {
+          "optional": true
+        },
+        "@trivago/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "@zackad/prettier-plugin-twig-melody": {
+          "optional": true
+        },
+        "prettier-plugin-astro": {
+          "optional": true
+        },
+        "prettier-plugin-css-order": {
+          "optional": true
+        },
+        "prettier-plugin-import-sort": {
+          "optional": true
+        },
+        "prettier-plugin-jsdoc": {
+          "optional": true
+        },
+        "prettier-plugin-marko": {
+          "optional": true
+        },
+        "prettier-plugin-multiline-arrays": {
+          "optional": true
+        },
+        "prettier-plugin-organize-attributes": {
+          "optional": true
+        },
+        "prettier-plugin-organize-imports": {
+          "optional": true
+        },
+        "prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "prettier-plugin-style-order": {
+          "optional": true
+        },
+        "prettier-plugin-svelte": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/pretty-format": {
       "version": "3.8.0",
       "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-3.8.0.tgz",
diff --git a/package.json b/package.json
index 5e68426395..468ce86d58 100644
--- a/package.json
+++ b/package.json
@@ -65,6 +65,8 @@
     "husky": "^9.0.11",
     "lint-staged": "^15.2.7",
     "postcss": "8.4.38",
+    "prettier": "^3.3.3",
+    "prettier-plugin-tailwindcss": "^0.6.8",
     "tailwind-variants": "0.1.20",
     "tailwindcss": "3.4.3",
     "typescript": "^5.5.4",