Added Prettier for TailwindCSS.
CI / Docker Lint (push) Successful in 21s

This commit is contained in:
2024-09-03 19:05:45 +02:00
parent dedfc1cdd8
commit f476f4307a
14 changed files with 125 additions and 38 deletions
+2 -1
View File
@@ -1,3 +1,4 @@
{
"endOfLine": "lf"
"endOfLine": "lf",
"plugins": ["prettier-plugin-tailwindcss"]
}
+97 -12
View File
@@ -44,7 +44,8 @@
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.6",
"postcss": "^8.4.38",
"prettier": "3.3.3",
"prettier": "^3.3.3",
"prettier-plugin-tailwindcss": "^0.6.6",
"tailwindcss": "^3.4.3",
"tailwindcss-animate": "^1.0.7",
"typescript": "^5.2.2",
@@ -2397,12 +2398,13 @@
}
},
"node_modules/braces": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
"integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
"dev": true,
"license": "MIT",
"dependencies": {
"fill-range": "^7.0.1"
"fill-range": "^7.1.1"
},
"engines": {
"node": ">=8"
@@ -3068,10 +3070,11 @@
}
},
"node_modules/fill-range": {
"version": "7.0.1",
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
"integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
"version": "7.1.1",
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
"integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
"dev": true,
"license": "MIT",
"dependencies": {
"to-regex-range": "^5.0.1"
},
@@ -3414,6 +3417,7 @@
"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=0.12.0"
}
@@ -3594,12 +3598,13 @@
}
},
"node_modules/micromatch": {
"version": "4.0.5",
"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
"integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
"version": "4.0.8",
"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
"integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
"dev": true,
"license": "MIT",
"dependencies": {
"braces": "^3.0.2",
"braces": "^3.0.3",
"picomatch": "^2.3.1"
},
"engines": {
@@ -4058,6 +4063,85 @@
"url": "https://github.com/prettier/prettier?sponsor=1"
}
},
"node_modules/prettier-plugin-tailwindcss": {
"version": "0.6.6",
"resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.6.6.tgz",
"integrity": "sha512-OPva5S7WAsPLEsOuOWXATi13QrCKACCiIonFgIR6V4lYv4QLp++UXVhZSzRbZxXGimkQtQT86CC6fQqTOybGng==",
"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/punycode": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -4701,6 +4785,7 @@
"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"is-number": "^7.0.0"
},
+2 -1
View File
@@ -47,7 +47,8 @@
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.6",
"postcss": "^8.4.38",
"prettier": "3.3.3",
"prettier": "^3.3.3",
"prettier-plugin-tailwindcss": "^0.6.6",
"tailwindcss": "^3.4.3",
"tailwindcss-animate": "^1.0.7",
"typescript": "^5.2.2",
+4 -4
View File
@@ -97,7 +97,7 @@ function RoomBooking({
const isError = isErrorCategory || isErrorPrices;
if (isLoading) {
return <Skeleton className="w-[600px] h-[150px] mx-auto" />;
return <Skeleton className="mx-auto h-[150px] w-[600px]" />;
}
if (isError) {
@@ -146,7 +146,7 @@ function RoomBooking({
</TableRow>
</TableHeader>
<TableBody>
{isLoadingPrices ? <Skeleton className="w-full h-full" /> : tableRows}
{isLoadingPrices ? <Skeleton className="h-full w-full" /> : tableRows}
</TableBody>
</Table>
);
@@ -166,8 +166,8 @@ function RoomBooking({
return (
<div className="relative sm:grid sm:grid-cols-40/60">
{roomCard}
<Card className="relative w-[95%] sm:w-full sm:h-4/5 self-center mx-auto sm:mx-0 rounded-b-xl rounded-none sm:rounded-e-xl -translate-y-2 sm:-translate-x-2 sm:translate-y-0">
<CardContent className="p-5 w-full h-full flex flex-col justify-center gap-4">
<Card className="relative mx-auto w-[95%] -translate-y-2 self-center rounded-none rounded-b-xl sm:mx-0 sm:h-4/5 sm:w-full sm:-translate-x-2 sm:translate-y-0 sm:rounded-e-xl">
<CardContent className="flex h-full w-full flex-col justify-center gap-4 p-5">
{hasPrices ? (
priceTable
) : (
+4 -4
View File
@@ -43,16 +43,16 @@ export function RoomItemCard({
<Card id={room.id.toString()} className={cn(className, "relative")}>
{/* <CardHeader className="p-0 m-0 mb-5">
</CardHeader> */}
<CardContent className="flex flex-col h-full w-full p-0">
<CardContent className="flex h-full w-full flex-col p-0">
<div className="">
<img
src={mainPhoto?.path ?? roomImg}
className="rounded-t-md w-full aspect-[4/3] object-cover"
className="aspect-[4/3] w-full rounded-t-md object-cover"
></img>
<Separator className="my-0 border-2" />
</div>
<div>
<Typography variant={"h2"} as="h2" className="pt-4 px-4 border-none">
<Typography variant={"h2"} as="h2" className="border-none px-4 pt-4">
{room.name}
</Typography>
</div>
@@ -61,7 +61,7 @@ export function RoomItemCard({
{room.description}
</Typography>
</div>
<div className="pb-4 mt-auto">
<div className="mt-auto pb-4">
<Separator className="my-4" />
<div className="flex justify-around">
<div className="flex flex-row gap-2">
+2 -2
View File
@@ -87,7 +87,7 @@ export function SearchFilterCard({
return (
<Card>
<CardHeader className="p-0 m-0 mb-5">
<CardHeader className="m-0 mb-5 p-0">
<Typography variant={"h2"} as="h1" className="mx-5 py-2">
Reserva ahora
</Typography>
@@ -96,7 +96,7 @@ export function SearchFilterCard({
{datePickerElement}
<Separator className="my-4" />
<Button size={"lg"} onClick={btSearchClick}>
<SearchIcon className="text-primary-foreground me-2" />
<SearchIcon className="me-2 text-primary-foreground" />
<Typography variant={"h3"} className="text-primary-foreground">
Buscar
</Typography>
+1 -1
View File
@@ -1,6 +1,6 @@
function AppFooter() {
return (
<div className="bg-secondary flex-col hidden">
<div className="hidden flex-col bg-secondary">
<div className="">Created with Love by me :)</div>
<div className="">
<p>Más información</p>
+4 -4
View File
@@ -7,15 +7,15 @@ import { BookAIcon, HomeIcon } from "lucide-react";
function AppHeader() {
return (
<Card className="flex items-center mx-10 my-4">
<Card className="mx-10 my-4 flex items-center">
<CardContent className="w-full py-2">
<div className="flex justify-around items-center">
<div className="flex flex-row items-center gap-2 relative">
<div className="flex items-center justify-around">
<div className="relative flex flex-row items-center gap-2">
<img src="public/SR2.svg" className="w-[64px]"></img>
<Typography variant={"largeText"}>Somnia Rooms</Typography>
<a
href="https://duck.com"
className="absolute w-[100%] h-[100%]"
className="absolute h-[100%] w-[100%]"
></a>
</div>
<Button variant="ghost" className="h-15">
+3 -3
View File
@@ -51,7 +51,7 @@ export function BookingDetails({
return (
<Card
key={room.roomCategory.toString() + room.guestNumber.toString()}
className="bg-accent flex flex-row my-3 "
className="my-3 flex flex-row bg-accent"
>
{photo && (
<img
@@ -60,10 +60,10 @@ export function BookingDetails({
/>
)}
<div className="w-full p-3">
<Typography variant={"h3"} as="h3" className="text-center m-2">
<Typography variant={"h3"} as="h3" className="m-2 text-center">
{category?.name}
</Typography>
<div className="flex flex-row w-full justify-around">
<div className="flex w-full flex-row justify-around">
<IconWithTooltip
label={room.guestNumber.toString()}
labelPosition={"right"}
+1 -1
View File
@@ -82,7 +82,7 @@ export function DatePickerWithRange({
}
return (
<div className={cn("grid gap-x-2 grid-cols-2 grid-rows-2", className)}>
<div className={cn("grid grid-cols-2 grid-rows-2 gap-x-2", className)}>
<Typography variant={"largeText"} as="p">
Desde
</Typography>
+1 -1
View File
@@ -10,7 +10,7 @@ function Root() {
<>
<ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
<AppHeader />
<div className="w-full sm:w-[90%] md:w-[80%] mx-auto p-8 text-center bg-background text-foreground">
<div className="mx-auto w-full bg-background p-8 text-center text-foreground sm:w-[90%] md:w-[80%]">
<Outlet />
</div>
<Toaster />
+2 -2
View File
@@ -29,10 +29,10 @@ function Homepage() {
<Separator className="my-10" />
<SearchFilterCard onSearchClick={onBtSearchClick} />
<Separator className="my-10" />
<div className="grid gap-4 homePageRoomGrid">{roomList}</div>
<div className="homePageRoomGrid grid gap-4">{roomList}</div>
{isLoading && (
<>
<Skeleton className="w-full h-[200px] mx-auto flex justify-center items-center flex-col">
<Skeleton className="mx-auto flex h-[200px] w-full flex-col items-center justify-center">
<LoaderIcon />
<Typography variant={"h3"} as="h2">
Loading...
+1 -1
View File
@@ -92,7 +92,7 @@ function SearchPage() {
<Typography variant={"h3"} as="h2">
Loading...
</Typography>
<Skeleton className="w-full h-[200px] mx-auto" />
<Skeleton className="mx-auto h-[200px] w-full" />
</>
) : (
<div className="2xl:grid 2xl:grid-cols-60/40 2xl:gap-6">