feature: add prettier config (#452)

* chore: fix dashboard readme

* feat: add prettier config

* chore: update Node version requirement to 18.17.0

* Remove extra space

* Update @tailwind/forms

* Testing

---------

Co-authored-by: mohamed.elzanaty3 <mohamed.elzanaty3@vodafone.com>
Co-authored-by: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com>
Co-authored-by: Delba de Oliveira <delbabrown@gmail.com>

dashboard/final-example/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">
           {/* y-axis */}
           <div
             className="mb-6 hidden flex-col justify-between text-sm text-gray-400 sm:flex"

dashboard/final-example/app/ui/skeletons.tsx

@@ -34,7 +34,7 @@ export function RevenueChartSkeleton() {
     <div className={`${shimmer} relative w-full overflow-hidden md:col-span-4`}>
       <div className="mb-4 h-8 w-36 rounded-md bg-gray-100" />
       <div className="rounded-xl bg-gray-100 p-4">
-        <div className="sm:grid-cols-13 mt-0 grid h-[410px] grid-cols-12 items-end gap-2 rounded-md  bg-white p-4 md:gap-4" />
+        <div className="mt-0 grid h-[410px] grid-cols-12 items-end gap-2 rounded-md bg-white p-4 sm:grid-cols-13 md:gap-4" />
         <div className="flex items-center pb-2 pt-6">
           <div className="h-5 w-5 rounded-full bg-gray-200" />
           <div className="ml-2 h-4 w-20 rounded-md bg-gray-200" />

dashboard/final-example/package.json

@@ -4,12 +4,14 @@
     "build": "next build",
     "dev": "next dev",
     "lint": "next lint",
+    "prettier": "prettier --write --ignore-unknown .",
+    "prettier:check": "prettier --check --ignore-unknown .",
     "seed": "node -r dotenv/config ./scripts/seed.js",
     "start": "next start"
   },
   "dependencies": {
     "@heroicons/react": "^2.0.18",
-    "@tailwindcss/forms": "^0.5.6",
+    "@tailwindcss/forms": "^0.5.7",
     "@types/node": "20.5.7",
     "@vercel/postgres": "^0.5.0",
     "autoprefixer": "10.4.15",
@@ -29,10 +31,13 @@
     "@types/bcrypt": "^5.0.1",
     "@types/react": "18.2.21",
     "@types/react-dom": "18.2.14",
+    "@vercel/style-guide": "^5.0.1",
     "dotenv": "^16.3.1",
     "eslint": "^8.52.0",
     "eslint-config-next": "^14.0.0",
-    "prettier": "^3.0.3"
+    "eslint-config-prettier": "9.0.0",
+    "prettier": "^3.0.3",
+    "prettier-plugin-tailwindcss": "0.5.4"
   },
   "engines": {
     "node": ">=18.17.0"

dashboard/final-example/prettier.config.js

@@ -0,0 +1,6 @@
+const styleguide = require('@vercel/style-guide/prettier');
+
+module.exports = {
+  ...styleguide,
+  plugins: [...styleguide.plugins, 'prettier-plugin-tailwindcss'],
+};

dashboard/final-example/tailwind.config.ts

@@ -27,7 +27,6 @@ const config: Config = {
       },
     },
   },
-
   plugins: [require('@tailwindcss/forms')],
 };
 export default config;

dashboard/starter-example/app/ui/skeletons.tsx

@@ -34,7 +34,7 @@ export function RevenueChartSkeleton() {
     <div className={`${shimmer} relative w-full overflow-hidden md:col-span-4`}>
       <div className="mb-4 h-8 w-36 rounded-md bg-gray-100" />
       <div className="rounded-xl bg-gray-100 p-4">
-        <div className="sm:grid-cols-13 mt-0 grid h-[410px] grid-cols-12 items-end gap-2 rounded-md  bg-white p-4 md:gap-4" />
+        <div className="mt-0 grid h-[410px] grid-cols-12 items-end gap-2 rounded-md bg-white p-4 sm:grid-cols-13 md:gap-4" />
         <div className="flex items-center pb-2 pt-6">
           <div className="h-5 w-5 rounded-full bg-gray-200" />
           <div className="ml-2 h-4 w-20 rounded-md bg-gray-200" />

dashboard/starter-example/package.json

@@ -3,11 +3,13 @@
   "scripts": {
     "build": "next build",
     "dev": "next dev",
+    "prettier": "prettier --write --ignore-unknown .",
+    "prettier:check": "prettier --check --ignore-unknown .",
     "start": "next start"
   },
   "dependencies": {
     "@heroicons/react": "^2.0.18",
-    "@tailwindcss/forms": "^0.5.6",
+    "@tailwindcss/forms": "^0.5.7",
     "@types/node": "20.5.7",
     "@vercel/postgres": "^0.5.0",
     "autoprefixer": "10.4.15",
@@ -25,10 +27,13 @@
     "@types/bcrypt": "^5.0.1",
     "@types/react": "18.2.21",
     "@types/react-dom": "18.2.14",
+    "@vercel/style-guide": "^5.0.1",
     "dotenv": "^16.3.1",
     "eslint": "^8.52.0",
     "eslint-config-next": "^14.0.0",
-    "prettier": "^3.0.3"
+    "eslint-config-prettier": "9.0.0",
+    "prettier": "^3.0.3",
+    "prettier-plugin-tailwindcss": "0.5.4"
   },
   "engines": {
     "node": ">=18.17.0"

dashboard/starter-example/prettier.config.js

@@ -0,0 +1,6 @@
+const styleguide = require('@vercel/style-guide/prettier');
+
+module.exports = {
+  ...styleguide,
+  plugins: [...styleguide.plugins, 'prettier-plugin-tailwindcss'],
+};

dashboard/starter-example/tailwind.config.ts

@@ -27,7 +27,6 @@ const config: Config = {
       },
     },
   },
-
   plugins: [require('@tailwindcss/forms')],
 };
 export default config;