feat: install, configure and run prettier-plugin-tailwindcss

This commit is contained in:
Pablo Lara
2024-10-01 05:44:24 +02:00
parent 4e5bb81906
commit 607cd5d1e0
6 changed files with 99 additions and 13 deletions
+1
View File
@@ -10,6 +10,7 @@ module.exports = {
"plugin:@typescript-eslint/recommended",
"plugin:security/recommended-legacy",
"plugin:jsx-a11y/recommended",
"eslint-config-prettier",
"prettier",
],
parserOptions: {
+2 -1
View File
@@ -5,5 +5,6 @@
"tabWidth": 2,
"useTabs": false,
"semi": true,
"printWidth": 80
"printWidth": 80,
"plugins": ["prettier-plugin-tailwindcss"]
}
@@ -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}
@@ -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}>
+86 -4
View File
@@ -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",
+2
View File
@@ -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",