introduce prettier, format code using prettier

muriukialex · Feb 15, 2024 · 117ffe9 · 117ffe9
1 parent 0a37def
commit 117ffe9
Show file tree

Hide file tree

Showing 44 changed files with 1,131 additions and 918 deletions.
diff --git a/.github/workflows/preview.yaml b/.github/workflows/preview.yaml
@@ -7,6 +7,18 @@ on:
     branches-ignore:
       - main
 jobs:
+  Code Format:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+       - name: Use Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: 18.12.1
+      - name: Format
+        run: npm run format
+
   Run Tests:
     runs-on: ubuntu-latest
     steps:

diff --git a/.github/workflows/production.yaml b/.github/workflows/production.yaml
@@ -7,6 +7,18 @@ on:
     branches:
       - main
 jobs:
+  Code Format:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+       - name: Use Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: 18.12.1
+      - name: Format
+        run: npm run format
+
   Run Tests:
     runs-on: ubuntu-latest
     steps:

diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,11 @@
+{
+  "plugins": [
+    "prettier-plugin-organize-imports",
+    "prettier-plugin-tailwindcss"
+  ],
+  "trailingComma": "all",
+  "semi": false,
+  "singleQuote": false,
+  "useTabs": false,
+  "tabWidth": 2
+}
diff --git a/app/api/labs/[id]/route.ts b/app/api/labs/[id]/route.ts
@@ -1,6 +1,6 @@
-import { NextResponse } from "next/server"
 import Lab from "@/models/Lab"
 import { LabRequestType } from "@/types/Requests"
+import { NextResponse } from "next/server"
 
 export async function PUT(
   req: Request,

diff --git a/app/globals.css b/app/globals.css
@@ -33,9 +33,9 @@ body {
 }
 
 h1 {
-  @apply text-2xl sm:text-4xl font-bold mt-4 mb-4 dark:text-white text-gray-500;
+  @apply mb-4 mt-4 text-2xl font-bold text-gray-500 sm:text-4xl dark:text-white;
 }
 
 h2 {
-  @apply sm:text-xl text-lg mt-2 mb-2;
+  @apply mb-2 mt-2 text-lg sm:text-xl;
 }
diff --git a/app/home/page.tsx b/app/home/page.tsx
@@ -1,10 +1,10 @@
 "use client"
 
+import { UserLabs } from "@/components"
+import { useUserLabsData } from "@/hooks"
+import { ButtonStatusType } from "@/types/Common"
 import { signOut, useSession } from "next-auth/react"
 import { useState } from "react"
-import { ButtonStatusType } from "@/types/Common"
-import { useUserLabsData } from "@/hooks"
-import { UserLabs } from "@/components"
 
 const HomePage = () => {
   const { data: userData } = useSession()
@@ -32,15 +32,15 @@ const HomePage = () => {
   }
 
   return (
-    <div className="sm:w-[500px] m-auto mt-8 p-4">
+    <div className="m-auto mt-8 p-4 sm:w-[500px]">
       <div className="flex items-center justify-between">
         <div>
           <h1>AWS r/Start Labs</h1>
         </div>
         <div>
           <button
             data-test="sign-out"
-            className="p-1 px-4 rounded hover:bg-gray-700 disabled:cursor-not-allowed disabled:opacity-50"
+            className="rounded p-1 px-4 hover:bg-gray-700 disabled:cursor-not-allowed disabled:opacity-50"
             disabled={buttonStatus.status === "submitting"}
             onClick={() => handleSignOut()}
           >

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,7 +1,7 @@
+import { metaDataOptions } from "@/lib/metadata-options"
 import type { Metadata } from "next"
 import { Inter } from "next/font/google"
 import "./globals.css"
-import { metaDataOptions } from "@/lib/metadata-options"
 
 import { Analytics } from "@vercel/analytics/react"
 

diff --git a/app/page.tsx b/app/page.tsx
@@ -1,9 +1,9 @@
 "use client"
 
+import { GoogleIcon } from "@/components"
+import { ButtonStatusType } from "@/types/Common"
 import { signIn } from "next-auth/react"
 import { useState } from "react"
-import { ButtonStatusType } from "@/types/Common"
-import { GoogleIcon } from "@/components"
 
 const LoginPage = () => {
   const [buttonStatus, setButtonStatus] = useState<ButtonStatusType>({
@@ -35,7 +35,7 @@ const LoginPage = () => {
             data-test="sign-in-with-google"
             onClick={() => handleSignIn()}
             disabled={buttonStatus.status === "submitting"}
-            className="w-full rounded-md border bg-white dark:bg-black dark:text-white p-4 text-center text-sm text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-900 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+            className="w-full rounded-md border bg-white p-4 text-center text-sm text-gray-500 hover:bg-gray-100 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:bg-black dark:text-white dark:hover:bg-gray-900"
           >
             <GoogleIcon className="mr-2 inline size-5" />
             {buttonStatus.status === "submitting"

diff --git a/components/UI/Divider.tsx b/components/UI/Divider.tsx
@@ -1,5 +1,5 @@
 const Divider = () => {
-  return <hr className="dark:bg-gray-500 bg-white" />
+  return <hr className="bg-white dark:bg-gray-500" />
 }
 
 export default Divider
diff --git a/components/UI/Lab.tsx b/components/UI/Lab.tsx
@@ -1,10 +1,10 @@
 import type { LabType } from "@/lib/labs"
-import toast from "react-hot-toast"
-import { CheckMark } from ".."
-import { useState, useEffect, ChangeEvent } from "react"
-import { ErrorResponse, LabResponseType } from "@/types/Responses"
 import { saveLab, updateLab } from "@/service/requests"
 import { LabRequestType } from "@/types/Requests"
+import { ErrorResponse, LabResponseType } from "@/types/Responses"
+import { ChangeEvent, useEffect, useState } from "react"
+import toast from "react-hot-toast"
+import { CheckMark } from ".."
 
 interface LabProps {
   email?: string | null
@@ -92,23 +92,23 @@ const Lab = ({ email, lab, data, mutate }: LabProps) => {
   return (
     <div className="flex items-center">
       <label
-        className="relative flex items-center p-3 rounded-full cursor-pointer"
+        className="relative flex cursor-pointer items-center rounded-full p-3"
         htmlFor={lab.name}
       >
         <input
           data-test={`lab-checkbox-${lab.labId}`}
           type="checkbox"
-          className="before:content[''] peer relative h-5 w-5 cursor-pointer appearance-none rounded-md border border-blue-gray-200 transition-all before:absolute before:top-2/4 before:left-2/4 before:block before:h-12 before:w-12 before:-translate-y-2/4 before:-translate-x-2/4 before:rounded-full before:bg-blue-gray-500 before:opacity-0 before:transition-opacity checked:border-gray-900 checked:bg-blue-700 checked:before:bg-gray-900 dark:checked:border-gray-200 dark:checked:before:bg-gray-200 hover:before:opacity-10"
+          className="before:content[''] border-blue-gray-200 before:bg-blue-gray-500 peer relative h-5 w-5 cursor-pointer appearance-none rounded-md border transition-all before:absolute before:left-2/4 before:top-2/4 before:block before:h-12 before:w-12 before:-translate-x-2/4 before:-translate-y-2/4 before:rounded-full before:opacity-0 before:transition-opacity checked:border-gray-900 checked:bg-blue-700 checked:before:bg-gray-900 hover:before:opacity-10 dark:checked:border-gray-200 dark:checked:before:bg-gray-200"
           id={lab.name}
           onChange={(e) => handleTrackLab({ event: e, lab })}
           checked={completed}
         />
-        <span className="absolute text-white transition-opacity opacity-0 pointer-events-none top-2/4 left-2/4 -translate-y-2/4 -translate-x-2/4 peer-checked:opacity-100">
+        <span className="pointer-events-none absolute left-2/4 top-2/4 -translate-x-2/4 -translate-y-2/4 text-white opacity-0 transition-opacity peer-checked:opacity-100">
           <CheckMark />
         </span>
       </label>
       <label
-        className="mt-px font-light text-gray-200 cursor-pointer select-none"
+        className="mt-px cursor-pointer select-none font-light text-gray-200"
         htmlFor={lab.name}
       >
         {lab.name}

diff --git a/components/UI/UserLabs.tsx b/components/UI/UserLabs.tsx
@@ -1,8 +1,20 @@
+import {
+  weekEight,
+  weekEleven,
+  weekFive,
+  weekFour,
+  weekNine,
+  weekOne,
+  weekSeven,
+  weekSix,
+  weekTen,
+  weekThree,
+  weekTwo,
+} from "@/lib/labs"
 import { LoadingState } from "@/types/Common"
 import { ErrorResponse, LabResponseType } from "@/types/Responses"
-import Divider from "./Divider"
-import { weekOne, weekTwo, weekThree, weekFour, weekFive, weekSix, weekSeven, weekEight, weekNine, weekTen, weekEleven } from "@/lib/labs"
 import { Session } from "next-auth"
+import Divider from "./Divider"
 import Lab from "./Lab"
 
 interface UserLabsProps {
@@ -30,7 +42,7 @@ const UserLabs = ({
       <div>
         <button
           onClick={() => mutate()}
-          className="p-1 px-4 rounded hover:bg-gray-700 disabled:cursor-not-allowed disabled:opacity-50"
+          className="rounded p-1 px-4 hover:bg-gray-700 disabled:cursor-not-allowed disabled:opacity-50"
         >
           Refresh your labs
         </button>
@@ -41,7 +53,7 @@ const UserLabs = ({
   return (
     <div>
       <Divider />
-      <div className="mt-4 mb-4">
+      <div className="mb-4 mt-4">
         <h2>Week 1</h2>
         {weekOne.map((lab) => (
           <Lab
@@ -55,7 +67,7 @@ const UserLabs = ({
       </div>
 
       <Divider />
-      <div className="mt-4 mb-4">
+      <div className="mb-4 mt-4">
         <h2>Week 2</h2>
         {weekTwo.map((lab) => (
           <Lab
@@ -69,7 +81,7 @@ const UserLabs = ({
       </div>
 
       <Divider />
-      <div className="mt-4 mb-4">
+      <div className="mb-4 mt-4">
         <h2>Week 3</h2>
         {weekThree.map((lab) => (
           <Lab
@@ -83,7 +95,7 @@ const UserLabs = ({
       </div>
 
       <Divider />
-      <div className="mt-4 mb-4">
+      <div className="mb-4 mt-4">
         <h2>Week 4</h2>
         {weekFour.map((lab) => (
           <Lab
@@ -97,7 +109,7 @@ const UserLabs = ({
       </div>
 
       <Divider />
-      <div className="mt-4 mb-4">
+      <div className="mb-4 mt-4">
         <h2>Week 5</h2>
         {weekFive.map((lab) => (
           <Lab
@@ -111,7 +123,7 @@ const UserLabs = ({
       </div>
 
       <Divider />
-      <div className="mt-4 mb-4">
+      <div className="mb-4 mt-4">
         <h2>Week 6</h2>
         {weekSix.map((lab) => (
           <Lab
@@ -125,7 +137,7 @@ const UserLabs = ({
       </div>
 
       <Divider />
-      <div className="mt-4 mb-4">
+      <div className="mb-4 mt-4">
         <h2>Week 7</h2>
         {weekSeven.map((lab) => (
           <Lab
@@ -139,7 +151,7 @@ const UserLabs = ({
       </div>
 
       <Divider />
-      <div className="mt-4 mb-4">
+      <div className="mb-4 mt-4">
         <h2>Week 8</h2>
         {weekEight.map((lab) => (
           <Lab
@@ -153,7 +165,7 @@ const UserLabs = ({
       </div>
 
       <Divider />
-      <div className="mt-4 mb-4">
+      <div className="mb-4 mt-4">
         <h2>Week 9</h2>
         {weekNine.map((lab) => (
           <Lab
@@ -167,7 +179,7 @@ const UserLabs = ({
       </div>
 
       <Divider />
-      <div className="mt-4 mb-4">
+      <div className="mb-4 mt-4">
         <h2>Week 10</h2>
         {weekTen.map((lab) => (
           <Lab
@@ -181,7 +193,7 @@ const UserLabs = ({
       </div>
 
       <Divider />
-      <div className="mt-4 mb-4">
+      <div className="mb-4 mt-4">
         <h2>Week 11</h2>
         {weekEleven.map((lab) => (
           <Lab
@@ -193,7 +205,6 @@ const UserLabs = ({
           />
         ))}
       </div>
-
     </div>
   )
 }

diff --git a/components/index.ts b/components/index.ts
@@ -1,4 +1,4 @@
-import { GoogleIcon, CheckMark } from "./Icons"
+import { CheckMark, GoogleIcon } from "./Icons"
 import { Divider, UserLabs } from "./UI"
 
-export { GoogleIcon, Divider, CheckMark, UserLabs }
+export { CheckMark, Divider, GoogleIcon, UserLabs }