Merge pull request #142 from chingu-x/fix/tailwind-eslint

Tailwind eslint
chingu-x · Jun 5, 2024 · 1091c1a · 1091c1a
2 parents 1ef7c3a + c0546e2
commit 1091c1a
Show file tree

Hide file tree

Showing 131 changed files with 535 additions and 439 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -16,6 +16,7 @@
     "plugin:@typescript-eslint/recommended-requiring-type-checking",
     "next/core-web-vitals",
     "prettier",
+    "plugin:tailwindcss/recommended",
     "plugin:storybook/recommended"
   ],
   "settings": {

diff --git a/.prettierrc.json b/.prettierrc.json
@@ -0,0 +1,3 @@
+{
+  "plugins": ["prettier-plugin-tailwindcss"]
+}
diff --git a/package.json b/package.json
@@ -64,11 +64,13 @@
     "eslint-plugin-import": "^2.28.0",
     "eslint-plugin-no-relative-import-paths": "^1.5.2",
     "eslint-plugin-storybook": "^0.6.15",
+    "eslint-plugin-tailwindcss": "^3.17.0",
     "husky": "^8.0.0",
     "jest": "^29.6.2",
     "jest-environment-jsdom": "^29.6.2",
     "postcss": "8.4.27",
     "prettier": "^3.0.1",
+    "prettier-plugin-tailwindcss": "^0.6.1",
     "storybook": "^7.6.4",
     "tailwindcss": "3.3.3",
     "tsconfig-paths-webpack-plugin": "^4.1.0",

diff --git a/src/app/(auth)/components/AuthBannerContainer.tsx b/src/app/(auth)/components/AuthBannerContainer.tsx
@@ -13,10 +13,10 @@ export default function AuthBannerContainer() {
         />
       </div>
 
-      <h3 className="text-primary-focus text-2xl text-center mt-[27px] font-semibold">
+      <h3 className="mt-[27px] text-center text-2xl font-semibold text-primary-focus">
         Ready to dive in?
       </h3>
-      <h2 className="text-primary text-3xl text-center font-semibold">
+      <h2 className="text-center text-3xl font-semibold text-primary">
         Join Chingu today!
       </h2>
     </div>

diff --git a/src/app/(auth)/layout.tsx b/src/app/(auth)/layout.tsx
@@ -8,14 +8,14 @@ interface LayoutProps {
 
 export default function Layout({ children }: LayoutProps) {
   return (
-    <div className="flex flex-col h-screen w-screen">
+    <div className="flex h-screen w-screen flex-col">
       <Navbar>
         <div className="pr-2">
           <ModeToggle />
         </div>
       </Navbar>
-      <main className="flex flex-col items-center w-full p-10 overflow-y-auto h-full">
-        <div className="gap-y-9 h-full xl:flex">
+      <main className="flex h-full w-full flex-col items-center overflow-y-auto p-10">
+        <div className="h-full gap-y-9 xl:flex">
           <div className="flex items-center justify-center">
             <AuthBannerContainer />
             {children}

diff --git a/src/app/(auth)/sign-in/components/EmailCheckContainer.tsx b/src/app/(auth)/sign-in/components/EmailCheckContainer.tsx
@@ -49,8 +49,8 @@ function EmailCheckContainer({
   }
 
   return (
-    <div className="flex flex-col items-center w-[400px] min-h-[652px] bg-base-200 rounded-2xl xl:ml-60 px-6 py-9">
-      <p className="text-base-300 text-2xl text-center mb-[26px] font-medium">
+    <div className="flex min-h-[652px] w-[400px] flex-col items-center rounded-2xl bg-base-200 px-6 py-9 xl:ml-60">
+      <p className="mb-[26px] text-center text-2xl font-medium text-base-300">
         Reset Link Sent
       </p>
       <div>
@@ -63,15 +63,15 @@ function EmailCheckContainer({
         />
       </div>
       <div className="flex flex-col items-center">
-        <p className="text-base-300 text-xl font-medium mt-8 mb-2">
+        <p className="mb-2 mt-8 text-xl font-medium text-base-300">
           Check Your Email Address
         </p>
-        <p className="text-base-300 text-base font-medium">
+        <p className="text-base font-medium text-base-300">
           If that email address exists, we will send an email to it with a link
           to reset your password. Please open it and click on the link in it to
           reset your password.
         </p>
-        <p className="text-base-300 text-base font-medium mt-6 mb-[60px] 3xl:mb-[166px]">
+        <p className="mb-[60px] mt-6 text-base font-medium text-base-300 3xl:mb-[166px]">
           If you have not received an email shortly, then please check your
           spam/trash folders or click the button below to request a new reset
           email.

diff --git a/src/app/(auth)/sign-in/components/ResetPasswordContainer.tsx b/src/app/(auth)/sign-in/components/ResetPasswordContainer.tsx
@@ -75,14 +75,14 @@ function ResetPasswordContainer({
   }
 
   return (
-    <div className="flex flex-col items-center w-[400px] min-h-[377px] bg-base-200 rounded-2xl xl:ml-60 px-6 py-9">
-      <p className="text-base-300 text-2xl text-center mb-8 font-medium">
+    <div className="flex min-h-[377px] w-[400px] flex-col items-center rounded-2xl bg-base-200 px-6 py-9 xl:ml-60">
+      <p className="mb-8 text-center text-2xl font-medium text-base-300">
         Reset Password
       </p>
-      <p className="text-base-300 text-base font-medium mb-8">
+      <p className="mb-8 text-base font-medium text-base-300">
         Enter your email below and we’ll send you a link to reset your password
       </p>
-      <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col w-full">
+      <form onSubmit={handleSubmit(onSubmit)} className="flex w-full flex-col">
         <TextInput
           id="email"
           label="email"
@@ -93,14 +93,14 @@ function ResetPasswordContainer({
         <Button
           type="submit"
           title="submit"
-          className="mt-3 mb-3"
+          className="my-3"
           disabled={!isDirty || !isValid || resetPwdReqEmailLoading}
         >
           {renderButtonContent()}
         </Button>
         <Link
           href={routePaths.signUp()}
-          className="font-semibold text-xs text-neutral-focus ml-1 self-center"
+          className="ml-1 self-center text-xs font-semibold text-neutral-focus"
         >
           Don’t have an account? Sign up for an account now
         </Link>

diff --git a/src/app/(auth)/sign-in/components/SignInBlock.tsx b/src/app/(auth)/sign-in/components/SignInBlock.tsx
@@ -8,16 +8,16 @@ interface SignInBlockProps {
 function SignInBlock({ handleResetPassword }: SignInBlockProps) {
   return (
     <>
-      <div className="w-[400px] min-h-[652px] bg-base-200 rounded-2xl xl:ml-60 p-6">
-        <p className="text-base-300 text-2xl text-center mt-2.5 mb-[26px] font-medium">
+      <div className="min-h-[652px] w-[400px] rounded-2xl bg-base-200 p-6 xl:ml-60">
+        <p className="mb-[26px] mt-2.5 text-center text-2xl font-medium text-base-300">
           Welcome to Chingu
         </p>
         <div className="flex flex-col items-center">
           <SocialLoginButtonsContainer />
-          <div className="flex items-center mt-6 mb-8 w-full">
-            <hr className="flex-grow border-neutral-content w-11/12" />
-            <p className="mx-4 text-base-300 font-medium text-base">Or</p>
-            <hr className="flex-grow border-neutral-content w-11/12" />
+          <div className="mb-8 mt-6 flex w-full items-center">
+            <hr className="w-11/12 grow border-neutral-content" />
+            <p className="mx-4 text-base font-medium text-base-300">Or</p>
+            <hr className="w-11/12 grow border-neutral-content" />
           </div>
         </div>
         <SignInFormContainer handleResetPassword={handleResetPassword} />

diff --git a/src/app/(auth)/sign-in/components/SignInFormContainer.tsx b/src/app/(auth)/sign-in/components/SignInFormContainer.tsx
@@ -83,7 +83,7 @@ function SignInFormContainer({
 
   return (
     <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col">
-      <div className="flex flex-col min-h-[90px]">
+      <div className="flex min-h-[90px] flex-col">
         <div className="flex flex-col gap-y-2">
           <TextInput
             id="email"
@@ -103,7 +103,7 @@ function SignInFormContainer({
           />
           <div
             onClick={handleResetPassword}
-            className="cursor-pointer font-medium text-xs text-base-300 ml-1 mt-2"
+            className="ml-1 mt-2 cursor-pointer text-xs font-medium text-base-300"
           >
             Forgot your password?
           </div>
@@ -119,7 +119,7 @@ function SignInFormContainer({
         </Button>
         <Link
           href={routePaths.signUp()}
-          className="font-semibold text-xs text-neutral-focus ml-1 self-center mb-[10px]"
+          className="mb-[10px] ml-1 self-center text-xs font-semibold text-neutral-focus"
         >
           Don’t have an account? Sign up for an account now
         </Link>

diff --git a/src/app/(auth)/sign-up/components/ConfirmationMailContainer.tsx b/src/app/(auth)/sign-up/components/ConfirmationMailContainer.tsx
@@ -3,8 +3,8 @@ import Banner from "@/components/banner/Banner";
 
 function ConfirmationMailContainer() {
   return (
-    <div className="flex flex-col items-center w-[400px] min-h-[652px] bg-base-200 rounded-2xl xl:ml-60 px-6 py-9">
-      <p className="text-base-300 text-2xl text-center mb-[26px] font-medium">
+    <div className="flex min-h-[652px] w-[400px] flex-col items-center rounded-2xl bg-base-200 px-6 py-9 xl:ml-60">
+      <p className="mb-[26px] text-center text-2xl font-medium text-base-300">
         Welcome to Chingu!
       </p>
       <div>
@@ -17,14 +17,14 @@ function ConfirmationMailContainer() {
         />
       </div>
       <div className="flex flex-col items-center">
-        <p className="text-base-300 text-xl font-medium mt-8">
+        <p className="mt-8 text-xl font-medium text-base-300">
           Verify Your Email Address
         </p>
-        <p className="text-base-300 text-base font-medium">
+        <p className="text-base font-medium text-base-300">
           An email was sent to the address you gave us. To get access to Chingu
           and all of our features, please check your email and verify it.
         </p>
-        <p className="text-base-300 text-base font-medium mt-6 mb-[166px]">
+        <p className="mb-[166px] mt-6 text-base font-medium text-base-300">
           If you have not received an email shortly, then please check your
           spam/trash folders or click the button below to request a new
           verification email.

diff --git a/src/app/(auth)/sign-up/components/SignUpContainer.tsx b/src/app/(auth)/sign-up/components/SignUpContainer.tsx
@@ -18,16 +18,16 @@ function SignUpContainer() {
       {showConfirmationContainer ? (
         <ConfirmationMailContainer />
       ) : (
-        <div className="w-[400px] min-h-[652px] bg-base-200 rounded-2xl xl:ml-60 p-6">
-          <p className="text-base-300 text-2xl text-center mt-2.5 mb-[26px] font-medium">
+        <div className="min-h-[652px] w-[400px] rounded-2xl bg-base-200 p-6 xl:ml-60">
+          <p className="mb-[26px] mt-2.5 text-center text-2xl font-medium text-base-300">
             Create a Chingu Account
           </p>
           <div className="flex flex-col items-center">
             <SocialLoginButtonsContainer />
-            <div className="flex items-center w-full mt-6 mb-8">
-              <hr className="flex-grow w-11/12 border-neutral-content" />
-              <p className="mx-4 font-medium text-base-300 text-base">Or</p>
-              <hr className="flex-grow w-11/12 border-neutral-content" />
+            <div className="mb-8 mt-6 flex w-full items-center">
+              <hr className="w-11/12 grow border-neutral-content" />
+              <p className="mx-4 text-base font-medium text-base-300">Or</p>
+              <hr className="w-11/12 grow border-neutral-content" />
             </div>
           </div>
           <SignUpFormContainer

diff --git a/src/app/(auth)/sign-up/components/SignUpFormContainer.tsx b/src/app/(auth)/sign-up/components/SignUpFormContainer.tsx
@@ -44,7 +44,7 @@ function SignUpFormContainer({
 
   return (
     <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col">
-      <div className="flex flex-col min-h-[90px]">
+      <div className="flex min-h-[90px] flex-col">
         <div className="flex flex-col">
           <TextInput
             id="email"
@@ -70,7 +70,7 @@ function SignUpFormContainer({
         </Button>
         <Link
           href={routePaths.signIn()}
-          className="font-semibold text-xs text-neutral-focus ml-1 self-center mb-[10px]"
+          className="mb-[10px] ml-1 self-center text-xs font-semibold text-neutral-focus"
         >
           Already have an account? Sign in now
         </Link>

diff --git a/src/app/(auth)/users/components/NewPasswordContainer.tsx b/src/app/(auth)/users/components/NewPasswordContainer.tsx
@@ -75,15 +75,15 @@ function NewPasswordContainer({ onClick }: NewPasswordContainerProps) {
   }
 
   return (
-    <div className="w-[400px] min-h-[349px] bg-base-200 rounded-2xl p-8 xl:ml-60">
-      <p className="text-base-300 text-2xl text-center mb-8 font-medium">
+    <div className="min-h-[349px] w-[400px] rounded-2xl bg-base-200 p-8 xl:ml-60">
+      <p className="mb-8 text-center text-2xl font-medium text-base-300">
         Create New Password
       </p>
-      <p className="text-base-300 text-base font-medium pb-8">
+      <p className="pb-8 text-base font-medium text-base-300">
         Enter in a new password below to finish resetting your password.
       </p>
-      <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col ml-0">
-        <div className="flex flex-col min-h-[90px]">
+      <form onSubmit={handleSubmit(onSubmit)} className="ml-0 flex flex-col">
+        <div className="flex min-h-[90px] flex-col">
           <div className="flex flex-col">
             <TextInput
               type="password"

diff --git a/src/app/(auth)/users/components/ResetCompletedContainer.tsx b/src/app/(auth)/users/components/ResetCompletedContainer.tsx
@@ -5,8 +5,8 @@ import Banner from "@/components/banner/Banner";
 
 function ResetCompletedContainer() {
   return (
-    <div className="w-[400px] min-h-[349px] bg-base-200 rounded-2xl p-6 flex flex-col items-center xl:ml-60">
-      <p className="text-base-300 text-2xl text-center mt-2.5 mb-[22px] font-medium">
+    <div className="flex min-h-[349px] w-[400px] flex-col items-center rounded-2xl bg-base-200 p-6 xl:ml-60">
+      <p className="mb-[22px] mt-2.5 text-center text-2xl font-medium text-base-300">
         Password Reset!
       </p>
       <Banner
@@ -16,10 +16,10 @@ function ResetCompletedContainer() {
         width="w-[125px]"
         alt="Reset Password Image"
       />
-      <p className="text-base-300 text-xl font-medium pb-8 text-center">
+      <p className="pb-8 text-center text-xl font-medium text-base-300">
         Password Reset Successfully
       </p>
-      <p className="text-base-300 text-base font-medium pb-8">
+      <p className="pb-8 text-base font-medium text-base-300">
         Your password has been reset, please click the button below to sign in
         to access your Chingu account.
       </p>

diff --git a/src/app/(main)/dashboard/components/Calendar/Calendar.tsx b/src/app/(main)/dashboard/components/Calendar/Calendar.tsx
@@ -54,21 +54,21 @@ export default function Calendar({
   );
 
   return (
-    <div className="flex h-full w-full max-[1200px]:flex-col max-[1200px]:gap-y-4 max-[1200px]:items-center max-[1200px]:relative">
-      <div className="min-w-[400px] max-w-[400px] p-6 h-full min-[1200px]:border-r-2 min-[1200px]:min-w-[600px] min-[1200px]:px-28 min-[1470px]:min-w-[400px] min-[1470px]:px-6 border-base-100 flex flex-col items-center">
+    <div className="flex h-full w-full max-[1200px]:relative max-[1200px]:flex-col max-[1200px]:items-center max-[1200px]:gap-y-4">
+      <div className="flex h-full min-w-[400px] max-w-[400px] flex-col items-center border-base-100 p-6 min-[1200px]:min-w-[600px] min-[1200px]:border-r-2 min-[1200px]:px-28 min-[1470px]:min-w-[400px] min-[1470px]:px-6">
         <div className="flex w-full items-center">
-          <div className="flex gap-10 items-center w-full justify-center min-[1200px]:relative">
+          <div className="flex w-full items-center justify-center gap-10 min-[1200px]:relative">
             <ArrowLeftIcon
-              className="w-5 h-5 cursor-pointer hover:scale-105 transition-all absolute left-[14px] max-[1200px]:left-12"
+              className="absolute left-[14px] h-5 w-5 cursor-pointer transition-all hover:scale-105 max-[1200px]:left-12"
               onClick={() => {
                 onArrowClick(-1);
               }}
             />
-            <h1 className="text-2xl select-none font-semibold">
+            <h1 className="select-none text-2xl font-semibold">
               {currentMonth} {currentYear}
             </h1>
             <ArrowRightIcon
-              className="w-5 h-5 cursor-pointer hover:scale-105 transition-all absolute right-[14px] max-[1200px]:right-12"
+              className="absolute right-[14px] h-5 w-5 cursor-pointer transition-all hover:scale-105 max-[1200px]:right-12"
               onClick={() => {
                 onArrowClick(1);
               }}
@@ -79,14 +79,14 @@ export default function Calendar({
           {days.map((day) => (
             <h1
               key={day}
-              className="text-sm text-center h-14 w-14 grid place-content-center text-base-300 select-none"
+              className="grid h-14 w-14 select-none place-content-center text-center text-sm text-base-300"
             >
               {day}
             </h1>
           ))}
         </div>
 
-        <div className="grid grid-cols-7 border border-base-100 max-w-[352px]">
+        <div className="grid max-w-[352px] grid-cols-7 border border-base-100">
           {generateDate(today.getMonth(), today.getFullYear()).map(
             ({ date, currentMonth, today }) => (
               <div
@@ -120,7 +120,7 @@ export default function Calendar({
                       }}
                     >
                       <RocketLaunchIcon
-                        className={`w-4 h-4 absolute left-0 right-0 top-[1px] m-auto cursor-pointer ${
+                        className={`absolute inset-x-0 top-px m-auto h-4 w-4 cursor-pointer ${
                           "text-" + getCalendarElementColor(date, currentMonth)
                         }`}
                       />
@@ -134,18 +134,18 @@ export default function Calendar({
 
         <Legend />
       </div>
-      <div className="h-full w-full flex flex-col justify-between p-6">
+      <div className="flex h-full w-full flex-col justify-between p-6">
         <div>
-          <h1 className="text-lg font-semibold pb-3">{selectedDate}</h1>
+          <h1 className="pb-3 text-lg font-semibold">{selectedDate}</h1>
           <div className="max-[1500px]:w-[90px] max-[1470px]:w-full">
             {getDayLabel() ? (
-              <p className="rounded-lg bg-primary-content p-3 text-base font-medium w-full">
+              <p className="w-full rounded-lg bg-primary-content p-3 text-base font-medium">
                 {getDayLabel()}
               </p>
             ) : null}
             {selectedDate && selectedSprint ? (
               <p
-                className={`rounded-lg bg-primary-content p-3 text-base font-medium w-full ${
+                className={`w-full rounded-lg bg-primary-content p-3 text-base font-medium ${
                   getDayLabel() ? "mt-4" : ""
                 }`}
               >
@@ -176,7 +176,7 @@ export default function Calendar({
           </div>
         </div>
         <Button
-          className={`self-end p-1 h-[27px] mt-4 rounded text-base font-medium hover:bg-neutral ${
+          className={`mt-4 h-[27px] self-end rounded p-1 text-base font-medium hover:bg-neutral ${
             isSameDay(selectDate, userDate) ? "bg-primary" : "bg-neutral-focus"
           }`}
           onClick={() => {

diff --git a/src/app/(main)/dashboard/components/Calendar/components/Cell.tsx b/src/app/(main)/dashboard/components/Calendar/components/Cell.tsx
@@ -26,7 +26,7 @@ function Cell({
   return (
     <div
       key={getUnixTime(date)}
-      className="text-center h-[52px] grid place-content-center text-sm border border-base-100 relative"
+      className="relative grid h-[52px] place-content-center border border-base-100 text-center text-sm"
     >
       <h1
         className={cn(generateClassString(date, currentMonth, today))}

diff --git a/src/app/(main)/dashboard/components/Calendar/components/Dot.tsx b/src/app/(main)/dashboard/components/Calendar/components/Dot.tsx
@@ -8,9 +8,9 @@ type DotProps = {
 function Dot({ color = "bg-neutral-content", onClick }: DotProps) {
   return (
     <div
-      className={`w-2 h-2 ${
+      className={`h-2 w-2 ${
         "bg-" + color
-      } rounded-full left-0 right-0 bottom-[6px] m-auto absolute cursor-pointer`}
+      } absolute inset-x-0 bottom-[6px] m-auto cursor-pointer rounded-full`}
       onClick={onClick}
     />
   );