🐶 added husky, powered up prettier with plugins, added lint-staged

.husky/pre-commit

@@ -0,0 +1 @@
+pnpm lint-staged

.lintstagedrc.js

@@ -0,0 +1,15 @@
+const path = require('path');
+
+const buildEslintCommand = (filenames) =>
+  `next lint --fix --file ${filenames
+    .map((f) => path.relative(process.cwd(), f))
+    .join(' --file ')}`;
+
+const buildPrettierCommand = (filenames) =>
+  `prettier --write ${filenames
+    .map((f) => path.relative(process.cwd(), f))
+    .join(' ')}`;
+
+module.exports = {
+  '*.{js,jsx,ts,tsx}': [buildEslintCommand, buildPrettierCommand],
+};

.prettierignore

@@ -0,0 +1 @@
+.husky

app/page.tsx

@@ -12,7 +12,7 @@ export default function Page() {
       </div>
       <div className="mt-4 flex grow flex-col gap-4 md:flex-row">
         <div className="flex flex-col justify-center gap-6 rounded-lg bg-gray-50 px-6 py-10 md:w-3/5 md:px-20">
-          <div className="relative w-0 h-0 border-l-[15px] border-r-[15px] border-b-[26px] border-l-transparent border-r-transparent border-b-black" />
+          <div className="relative h-0 w-0 border-b-[26px] border-l-[15px] border-r-[15px] border-b-black border-l-transparent border-r-transparent" />
           <p
             className={`text-xl text-gray-800 md:text-3xl md:leading-normal ${lusitana.className} antialiased`}
           >

app/ui/dashboard/cards.tsx

@@ -54,8 +54,7 @@ export function Card({
         <h3 className="ml-2 text-sm font-medium">{title}</h3>
       </div>
       <p
-        className={`${lusitana.className}
-          truncate rounded-xl bg-white px-4 py-8 text-center text-2xl`}
+        className={`${lusitana.className} truncate rounded-xl bg-white px-4 py-8 text-center text-2xl`}
       >
         {value}
       </p>

app/ui/dashboard/latest-invoices.tsx

@@ -53,7 +53,7 @@ export default async function LatestInvoices() {
         </div>
         <div className="flex items-center pb-2 pt-6">
           <ArrowPathIcon className="h-5 w-5 text-gray-500" />
-          <h3 className="ml-2 text-sm text-gray-500 ">Updated just now</h3>
+          <h3 className="ml-2 text-sm text-gray-500">Updated just now</h3>
         </div>
       </div>
     </div>

app/ui/dashboard/revenue-chart.tsx

@@ -25,7 +25,7 @@ export default async function RevenueChart() {
         Recent Revenue
       </h2>
       <div className="rounded-xl bg-gray-50 p-4">
-        <div className="sm:grid-cols-13 mt-0 grid grid-cols-12 items-end gap-2 rounded-md bg-white p-4 md:gap-4">
+        <div className="mt-0 grid grid-cols-12 items-end gap-2 rounded-md bg-white p-4 sm:grid-cols-13 md:gap-4">
           <div
             className="mb-6 hidden flex-col justify-between text-sm text-gray-400 sm:flex"
             style={{ height: `${chartHeight}px` }}
@@ -51,7 +51,7 @@ export default async function RevenueChart() {
         </div>
         <div className="flex items-center pb-2 pt-6">
           <CalendarIcon className="h-5 w-5 text-gray-500" />
-          <h3 className="ml-2 text-sm text-gray-500 ">Last 12 months</h3>
+          <h3 className="ml-2 text-sm text-gray-500">Last 12 months</h3>
         </div>
       </div>
     </div>

app/ui/notification.tsx

@@ -9,7 +9,7 @@ export default function Notification() {
   if (!message) return null;
 
   return (
-    <div className="notification fixed bottom-0 left-1/2 transform -translate-x-1/2 m-4 p-4 bg-gray-800 text-white rounded-lg shadow-lg">
+    <div className="notification fixed bottom-0 left-1/2 m-4 -translate-x-1/2 transform rounded-lg bg-gray-800 p-4 text-white shadow-lg">
       {message}
       <button
         className="ml-2"

package.json

@@ -6,7 +6,10 @@
     "start": "next start",
     "lint": "next lint",
     "pre-test": "next build && next start",
-    "test": "npx playwright test"
+    "test": "npx playwright test",
+    "prepare": "husky",
+    "format": "prettier --write \"app/**/*.{ts,tsx,js,jsx,md,mdx,css,yaml,yml}\"",
+    "check": "prettier --check \"app/**/*.{ts,tsx,js,jsx,md,mdx,css,yaml,yml}\""
   },
   "dependencies": {
     "@heroicons/react": "^2.1.4",
@@ -34,10 +37,14 @@
     "@types/react-dom": "18.3.0",
     "@typescript-eslint/eslint-plugin": "^7.16.1",
     "@typescript-eslint/parser": "^7.16.1",
+    "@vercel/style-guide": "^6.0.0",
     "dotenv": "^16.4.5",
     "eslint-config-next": "^14.2.5",
     "eslint-config-prettier": "^9.1.0",
-    "prettier": "^3.3.3"
+    "husky": "^9.1.1",
+    "lint-staged": "^15.2.7",
+    "prettier": "^3.3.3",
+    "prettier-plugin-tailwindcss": "^0.6.5"
   },
   "engines": {
     "node": ">=20.12.0"