Setup eslint and format classname tailwind

giaphm · Jun 15, 2024 · e4bfa5e · e4bfa5e
1 parent ec2f1e0
commit e4bfa5e
Show file tree

Hide file tree

Showing 19 changed files with 187 additions and 104 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1,2 @@
+node_modules
+dist
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -9,13 +9,15 @@ module.exports = {
   ],
   ignorePatterns: ["dist", ".eslintrc.cjs"],
   parser: "@typescript-eslint/parser",
-  plugins: ["react-refresh", "prettier"],
+  plugins: ["react-refresh", "prettier", "no-loops"],
   rules: {
     "react-refresh/only-export-components": [
       "warn",
       { allowConstantExport: true },
     ],
     "@typescript-eslint/no-explicit-any": ["off"],
     "prettier/prettier": 2, // Means error
+    "no-console": 2, // Remember, this means error!
+    "no-loops/no-loops": 2,
   },
 };
diff --git a/package.json b/package.json
@@ -7,6 +7,7 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "prettier-format": "prettier --config .prettierrc 'src/**/*.ts' --write",
     "preview": "vite preview"
   },
   "dependencies": {
@@ -35,10 +36,13 @@
     "@types/react-dom": "^18.2.22",
     "@types/react-vertical-timeline-component": "^3.3.6",
     "@types/smoothscroll-polyfill": "^0.3.4",
-    "@typescript-eslint/eslint-plugin": "^7.2.0",
+    "@typescript-eslint/eslint-plugin": "^7.11.0",
+    "@typescript-eslint/parser": "^7.13.0",
     "@vitejs/plugin-react-swc": "^3.5.0",
     "autoprefixer": "^10.4.19",
+    "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-no-loops": "^0.4.0",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/aboutMe.tsx b/src/components/aboutMe.tsx
@@ -34,9 +34,9 @@ function AboutMeBody() {
       >
         <div className="flex flex-col gap-y-5 md:flex-row">
           <div className="basis-full md:basis-4/12">
-            <div className="dark:border border-slate-800 mt-[50px] mx-auto md:mx-[35px] lg:mx-auto mb-[30px] px-[15px] py-[30px] text-center w-[230px] shadow-[0_4px_6px_rgba(0,0,0,.3)]">
+            <div className="mx-auto mb-[30px] mt-[50px] w-[230px] border-slate-800 px-[15px] py-[30px] text-center shadow-[0_4px_6px_rgba(0,0,0,.3)] dark:border md:mx-[35px] lg:mx-auto">
               <img src="./avatar.jpg" />
-              <div className="flex flex-row mt-[15px] justify-center gap-x-4">
+              <div className="mt-[15px] flex flex-row justify-center gap-x-4">
                 <Icons.iconify icon="logos:react" width="42" height="42" />
                 <Icons.iconify icon="devicon:nodejs" width="42" height="42" />
                 <Icons.iconify
@@ -48,8 +48,8 @@ function AboutMeBody() {
             </div>
           </div>
           <div className="basis-full md:basis-8/12">
-            <div className="card border mt-2 md:mt-20 mx-5 md:mx-2 flex-col w-auto md:w-[90%]">
-              <div className="cardHeader flex flex-row h-[31px] items-center gap-x-2 pl-[15px] bg-black/[0.03] border-b">
+            <div className="card mx-5 mt-2 w-auto flex-col border md:mx-2 md:mt-20 md:w-[90%]">
+              <div className="cardHeader flex h-[31px] flex-row items-center gap-x-2 border-b bg-black/[0.03] pl-[15px]">
                 <Icons.iconify
                   icon="twemoji:red-circle"
                   width="10"
@@ -66,12 +66,12 @@ function AboutMeBody() {
                   height="10"
                 />
               </div>
-              <div className="cardBody text-left p-5">
-                <p className="text-base md:text-lg font-serif font-light sm:text-xs 2xl:text-lg">
+              <div className="cardBody p-5 text-left">
+                <p className="font-serif text-base font-light sm:text-xs md:text-lg 2xl:text-lg">
                   {t("aboutMe.hi")} :)
                 </p>
                 <br />
-                <p className="text-sm 2xl:text-lg font-light font-serif leading-8">
+                <p className="font-serif text-sm font-light leading-8 2xl:text-lg">
                   {t("aboutMe.description")}
                 </p>
               </div>
@@ -93,7 +93,7 @@ export default function AboutMe() {
   return (
     <section id="aboutMe" className="pb-12 dark:bg-[#1F1F1F]">
       <h2 className="pt-12 text-center font-light">
-        <div className="flex flex-row justify-center items-center gap-x-2 group">
+        <div className="group flex flex-row items-center justify-center gap-x-2">
           <div className="relative">
             <Link
               to={`?${new URLSearchParams({ locale, theme })}#aboutMe`}
@@ -104,7 +104,7 @@ export default function AboutMe() {
             </Link>
             <Link
               to={`?${new URLSearchParams({ locale, theme })}#aboutMe`}
-              className="absolute left-full opacity-0 group-hover:opacity-100 cursor-pointer"
+              className="absolute left-full cursor-pointer opacity-0 group-hover:opacity-100"
               onClick={() => handleScrollAnchor("#aboutMe")}
             >
               <Icons.iconify

diff --git a/src/components/cardProject.tsx b/src/components/cardProject.tsx
@@ -26,44 +26,44 @@ export function CardProject({
       containerClassName="py-5 md:py-20"
       className={cn("inter-var", className)}
     >
-      <CardBody className="bg-gray-50 relative group/card  dark:hover:shadow-2xl dark:hover:shadow-emerald-500/[0.1] dark:bg-black dark:border-white/[0.2] border-black/[0.1] w-auto 2xl:w-[30rem] h-auto rounded-xl p-6 border  ">
+      <CardBody className="group/card relative h-auto w-auto rounded-xl border border-black/[0.1] bg-gray-50 p-6 dark:border-white/[0.2] dark:bg-black dark:hover:shadow-2xl dark:hover:shadow-emerald-500/[0.1] 2xl:w-[30rem]">
         <CardItem
           translateZ="50"
-          className="text-xl font-bold text-neutral-600 dark:text-white tracking-[2.5px]"
+          className="text-xl font-bold tracking-[2.5px] text-neutral-600 dark:text-white"
         >
           {title}
         </CardItem>
         <CardItem
           as="p"
           translateZ="60"
-          className="text-neutral-500 text-sm max-w-sm mt-2 dark:text-neutral-300"
+          className="mt-2 max-w-sm text-sm text-neutral-500 dark:text-neutral-300"
         >
           {description}
         </CardItem>
-        <CardItem translateZ="100" className="w-full mt-4">
+        <CardItem translateZ="100" className="mt-4 w-full">
           <img
             src={thumbnail}
             height="1000"
             width="1000"
-            className="h-60 w-full object-cover rounded-xl group-hover/card:shadow-xl"
+            className="h-60 w-full rounded-xl object-cover group-hover/card:shadow-xl"
             alt="thumbnail"
           />
         </CardItem>
-        <div className="flex flex-col md:flex-row justify-between items-center mt-5 md:mt-20 gap-y-3 md:gap-y-0">
+        <div className="mt-5 flex flex-col items-center justify-between gap-y-3 md:mt-20 md:flex-row md:gap-y-0">
           <CardItem
             translateZ={20}
             as={Link}
             to={repoLink}
             target="__blank"
-            className="px-4 py-2 rounded-xl text-xs font-normal dark:text-white"
+            className="rounded-xl px-4 py-2 text-xs font-normal dark:text-white"
           >
             Repository →
           </CardItem>
           <CardItem
             translateZ={20}
             as="button"
             onClick={onOpenSlide}
-            className="px-4 py-2 rounded-xl bg-black dark:bg-white dark:text-black text-white text-xs font-bold"
+            className="rounded-xl bg-black px-4 py-2 text-xs font-bold text-white dark:bg-white dark:text-black"
           >
             More details
           </CardItem>

diff --git a/src/components/experiences.tsx b/src/components/experiences.tsx
@@ -21,7 +21,7 @@ export function Experiences() {
   return (
     <section id="experiences" className="bg-cyan-400 pb-[5%] dark:bg-slate-800">
       <h2 className="py-[5%] text-center font-light">
-        <div className="flex flex-row justify-center items-center gap-x-2 group">
+        <div className="group flex flex-row items-center justify-center gap-x-2">
           <Link
             to={`?${new URLSearchParams({ locale, theme })}#experiences`}
             className="cursor-pointer font-open-sans 2xl:text-4xl"
@@ -31,7 +31,7 @@ export function Experiences() {
           </Link>
           <Link
             to={`?${new URLSearchParams({ locale, theme })}#experiences`}
-            className="opacity-0 group-hover:opacity-100 cursor-pointer"
+            className="cursor-pointer opacity-0 group-hover:opacity-100"
             onClick={() => handleScrollAnchor("#experiences")}
           >
             <Icons.iconify icon="system-uicons:chain" width="22" height="22" />
@@ -58,7 +58,7 @@ export function Experiences() {
               </h4>
               <div className="space-y-2">
                 {experience.techStacks.map((tech) => (
-                  <Badge key={`${tech}_${idx}`} className="bg-black/10 mr-2">
+                  <Badge key={`${tech}_${idx}`} className="mr-2 bg-black/10">
                     {tech}
                   </Badge>
                 ))}

diff --git a/src/components/footer.tsx b/src/components/footer.tsx
@@ -17,13 +17,13 @@ export function Footer() {
               // height={21}
               icon={link.icon}
               color="white"
-              className="inline-block mr-7 w-[21px] h-[21px] 2xl:w-[27px] 2xl:h-[27px]"
+              className="mr-7 inline-block h-[21px] w-[21px] 2xl:h-[27px] 2xl:w-[27px]"
             />
           </Link>
         ))}
       </div>
-      <div className="pt-3 text-white font-light italic text-xs 2xl:text-base">
-        <p className="font-open-sans inline-block">
+      <div className="pt-3 text-xs font-light italic text-white 2xl:text-base">
+        <p className="inline-block font-open-sans">
           {t("footer.inspiration")}
           <Link
             to="https://github.com/Dorota1997/react-frontend-dev-portfolio"