build: Eslint prettier conflict

.eslintrc.json

@@ -1,11 +1,8 @@
 {
-  "extends": ["next/core-web-vitals", "prettier", "plugin:storybook/recommended"],
+  "extends": ["next/core-web-vitals", "plugin:prettier/recommended", "plugin:storybook/recommended"],
   "plugins": ["unused-imports"],
   "rules": {
-    "quotes": "error",
     "jsx-quotes": "error",
-    "semi": "error",
-    "indent": ["error", 2],
     "unused-imports/no-unused-imports": "error",
     "import/order": [
       "error",

.husky/.gitignore

@@ -0,0 +1 @@
+_

.husky/pre-commit

@@ -0,0 +1,5 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged
+npx lint-staged

components/atoms/Avatar/avatar.tsx

@@ -33,10 +33,10 @@ const Avatar = (props: AvatarProps): JSX.Element => {
   }
 
   switch (typeof props.size) {
-  case "string":
-    return <DefaultAvatar {...props} avatarURL={imageSource} />;
-  case "number":
-    return <CustomAvatar {...props} avatarURL={imageSource} />;
+    case "string":
+      return <DefaultAvatar {...props} avatarURL={imageSource} />;
+    case "number":
+      return <CustomAvatar {...props} avatarURL={imageSource} />;
   }
 };
 

components/atoms/Card/card.tsx

@@ -1,29 +1,26 @@
 import React from "react";
 
 interface CardProps {
-    className?: string;
-    heading?: JSX.Element | string;
-    children: JSX.Element;
+  className?: string;
+  heading?: JSX.Element | string;
+  children: JSX.Element;
 }
 
 const Card: React.FC<CardProps> = ({ className, children, heading }) => {
   return (
-    <article className={`${className ? className : ""} block ${heading ? "" : "p-3"} bg-white border rounded-lg drop-shadow-md`}>
-      {
-        heading ?
-          <>
-            <div className="px-3 md:px-6 py-3 rounded-t-lg bg-light-slate-3">
-              {heading}
-            </div>
-            <div>
-              {children}
-            </div>
-          </>
-
-          :
-
-          children
-      }
+    <article
+      className={`${className ? className : ""} block ${
+        heading ? "" : "p-3"
+      } bg-white border rounded-lg drop-shadow-md`}
+    >
+      {heading ? (
+        <>
+          <div className="px-3 md:px-6 py-3 rounded-t-lg bg-light-slate-3">{heading}</div>
+          <div>{children}</div>
+        </>
+      ) : (
+        children
+      )}
     </article>
   );
 };

components/atoms/ContextThumbnail/context-thumbnail.tsx

@@ -3,17 +3,21 @@ import Image, { StaticImageData } from "next/image";
 import ContextThumbnailImage from "../../../img/open-sourced-with-bg-icon.png";
 
 interface ContextThumbnailProps {
-    className?: string;
-    ContextThumbnailURL?: string | StaticImageData;
-    alt?: string;
-    size?: string | number;
+  className?: string;
+  ContextThumbnailURL?: string | StaticImageData;
+  alt?: string;
+  size?: string | number;
 }
 
 const ContextThumbnail: React.FC<ContextThumbnailProps> = ({ className, ContextThumbnailURL, alt, size }) => {
   return (
     <Image
       className={`${className ? className : ""} rounded-lg border-1 border-slate-100 object-cover`}
-      alt={alt ? alt : "ContextThumbnail"} width={size as number} height={size as number} src={ContextThumbnailURL ? ContextThumbnailURL : ContextThumbnailImage} />
+      alt={alt ? alt : "ContextThumbnail"}
+      width={size as number}
+      height={size as number}
+      src={ContextThumbnailURL ? ContextThumbnailURL : ContextThumbnailImage}
+    />
   );
 };
 

components/atoms/EChartWrapper/echart-wrapper.tsx

@@ -8,19 +8,13 @@ Docs for ReactECharts: https://github.com/hustcc/echarts-for-react
  */
 
 interface EChartWrapperProps {
-    option: Object;
-    className?: string;
+  option: Object;
+  className?: string;
 }
 
 const EChartWrapper: React.FC<EChartWrapperProps> = ({ option, className }) => {
   return (
-    <ReactECharts
-      option={option}
-      className={className || ""}
-      notMerge={true}
-      lazyUpdate={true}
-      theme={"theme_name"}
-    />
+    <ReactECharts option={option} className={className || ""} notMerge={true} lazyUpdate={true} theme={"theme_name"} />
   );
 };
 

components/atoms/Error/Error.tsx

@@ -9,22 +9,16 @@ interface ErrorProps {
   fullWidth?: boolean;
 }
 
-const Error:React.FC<ErrorProps> = ({
-  errorMessage,
-  fullWidth = false
-}) => {
+const Error: React.FC<ErrorProps> = ({ errorMessage, fullWidth = false }) => {
   const wideStyle = fullWidth ? "flex" : "inline-flex ";
 
   return (
-    <div className={
-      clsx(wideStyle, "rounded-md border border-light-red-6 bg-light-red-4 p-2 gap-x-2 items-center")}>
+    <div className={clsx(wideStyle, "rounded-md border border-light-red-6 bg-light-red-4 p-2 gap-x-2 items-center")}>
       <Icon IconImage={ErrorIcon} />
 
-      <Text className="!text-light-red-10 !text-xs font-semibold">
-        {errorMessage || "Something went wrong!"}
-      </Text>
+      <Text className="!text-light-red-10 !text-xs font-semibold">{errorMessage || "Something went wrong!"}</Text>
     </div>
   );
 };
 
-export default Error;
+export default Error;

components/atoms/FilterCard/filter-card.tsx

@@ -8,48 +8,67 @@ import repoIcon from "../../../img/icons/repo.svg";
 import cancelIcon from "../../../img/x-circle.svg";
 
 interface FilterCardProps {
-    filterName: string;
-    bgColor?: string;
-    isRemovable?: boolean;
-    icon?: "topic" | "repo" | "org" | "contributor";
+  filterName: string;
+  bgColor?: string;
+  isRemovable?: boolean;
+  icon?: "topic" | "repo" | "org" | "contributor";
 }
 
 const icons = {
   topic: {
     src: hashIcon.src,
-    alt: "Topic"
+    alt: "Topic",
   },
   org: {
     src: orgIcon.src,
-    alt: "Organization"
+    alt: "Organization",
   },
   contributor: {
     src: personIcon.src,
-    alt: "Contributor"
+    alt: "Contributor",
   },
   repo: {
     src: repoIcon.src,
-    alt: "Repository"
-  }
+    alt: "Repository",
+  },
 };
 
 const FilterCard: React.FC<FilterCardProps> = ({ filterName, bgColor, icon, isRemovable }) => {
   return (
     <div
-      className={`inline-block py-1 px-2 border border-slate-300 outline-none hover:bg-slate-50 focus:ring-2 ${bgColor && `bg-${bgColor}`} ${isRemovable ? "focus:ring-orange-500" : "bg-slate-100 focus:ring-slate-300" } rounded-lg`}>
+      className={`inline-block py-1 px-2 border border-slate-300 outline-none hover:bg-slate-50 focus:ring-2 ${
+        bgColor && `bg-${bgColor}`
+      } ${isRemovable ? "focus:ring-orange-500" : "bg-slate-100 focus:ring-slate-300"} rounded-lg`}
+    >
       <div className="flex items-center gap-1">
         <Image
-          width={14} height={14}
-          alt={icon === "topic" ? icons.topic.alt : icon === "org" ? icons.org.alt : icon === "contributor" ? icons.contributor.alt : icon === "repo" ? icons.repo.alt : "Icon"}
-          src={icon === "topic" ? icons.topic.src : icon === "org" ? icons.org.src : icon === "contributor" ? icons.contributor.src : icon === "repo" ? icons.repo.src : icons.topic.src} />
-        <Text className="!text-sm font-semibold tracking-tight !text-slate-900">
-          {filterName}
-        </Text>
-        { isRemovable ?
-          <Image alt="Cancel Icon" src={cancelIcon} />
-          :
-          false
-        }
+          width={14}
+          height={14}
+          alt={
+            icon === "topic"
+              ? icons.topic.alt
+              : icon === "org"
+              ? icons.org.alt
+              : icon === "contributor"
+              ? icons.contributor.alt
+              : icon === "repo"
+              ? icons.repo.alt
+              : "Icon"
+          }
+          src={
+            icon === "topic"
+              ? icons.topic.src
+              : icon === "org"
+              ? icons.org.src
+              : icon === "contributor"
+              ? icons.contributor.src
+              : icon === "repo"
+              ? icons.repo.src
+              : icons.topic.src
+          }
+        />
+        <Text className="!text-sm font-semibold tracking-tight !text-slate-900">{filterName}</Text>
+        {isRemovable ? <Image alt="Cancel Icon" src={cancelIcon} /> : false}
       </div>
     </div>
   );

components/atoms/Icon/icon.tsx

@@ -2,11 +2,11 @@ import React from "react";
 import Image, { StaticImageData } from "next/image";
 
 interface IconProps {
-    IconImage: StaticImageData | string;
-    className?: string;
-    alt?: string;
-    size?: number;
-    onClick?: (...args: any) => any;
+  IconImage: StaticImageData | string;
+  className?: string;
+  alt?: string;
+  size?: number;
+  onClick?: (...args: any) => any;
 }
 
 const Icon: React.FC<IconProps> = ({ onClick, className, IconImage, alt, size = 16 }) => {
@@ -21,8 +21,9 @@ const Icon: React.FC<IconProps> = ({ onClick, className, IconImage, alt, size =
         src={IconImage}
         style={{
           maxWidth: "100%",
-          height: "auto"
-        }} />
+          height: "auto",
+        }}
+      />
     </div>
   );
 };

components/atoms/IconButton/icon-button.tsx

@@ -3,17 +3,25 @@ import Image, { StaticImageData } from "next/image";
 import SettingsIcon from "../../../img/settings-icon.svg";
 
 interface IconButtonProps {
-    IconButtonImage?: StaticImageData;
-    className?: string;
-    alt?: string;
+  IconButtonImage?: StaticImageData;
+  className?: string;
+  alt?: string;
 }
 
 const IconButton: React.FC<IconButtonProps> = ({ className, IconButtonImage = SettingsIcon, alt }) => {
   return (
-    <div className={`${className ? className : ""} flex h-6 w-6 rounded border-1 bg-light-slate-3 border-[1px] border-light-slate-6 items-center justify-center`}>
+    <div
+      className={`${
+        className ? className : ""
+      } flex h-6 w-6 rounded border-1 bg-light-slate-3 border-[1px] border-light-slate-6 items-center justify-center`}
+    >
       <Image
         className="items-center justify-center"
-        alt={alt ? alt : "IconButton"} width={16} height={16} src={IconButtonImage} />
+        alt={alt ? alt : "IconButton"}
+        width={16}
+        height={16}
+        src={IconButtonImage}
+      />
     </div>
   );
 };

components/atoms/LanguagePill/LanguagePill.tsx

@@ -1,6 +1,5 @@
 import Image, { StaticImageData } from "next/image";
 
-
 import JavascriptIcon from "img/icons/interests/javascript.svg";
 import ReactIcon from "/img/icons/interests/react.svg";
 import PythonIcon from "/img/icons/interests/python.svg";
@@ -20,7 +19,6 @@ import KubernetesIcon from "img/icons/interests/kubernetes.svg";
 
 import topicNameFormatting from "lib/utils/topic-name-formatting";
 
-
 interface LanguagePillProps {
   topic:
     | "react"
@@ -61,7 +59,7 @@ const LanguagePill = ({ topic, classNames, onClick }: LanguagePillProps) => {
       java: JavaIcon,
       golang: GolangIcon,
       vue: VueIcon,
-      kubernetes: KubernetesIcon
+      kubernetes: KubernetesIcon,
     };
 
     return iconMap[name] || "";

components/atoms/NotificationsCard/notification-card.tsx

@@ -10,10 +10,10 @@ interface NotificationCard {
 
 const getSourceURL = (type: string, id: string) => {
   switch (type) {
-  case "highlight_reaction":
-    return `/feed/${id}`;
-  case "follow":
-    return `/user/${id}`;
+    case "highlight_reaction":
+      return `/feed/${id}`;
+    case "follow":
+      return `/user/${id}`;
   }
 };
 

components/atoms/Pill/pill.tsx

@@ -13,16 +13,16 @@ const Pill: React.FC<PillProps> = ({ className, text, color = "slate", size = "b
     <div
       className={`
         ${
-    color === "green"
-      ? "bg-light-grass-4 "
-      : color === "yellow"
-        ? "bg-amber-200 "
-        : color === "red"
-          ? "bg-light-red-4 "
-          : color === "purple"
+          color === "green"
+            ? "bg-light-grass-4 "
+            : color === "yellow"
+            ? "bg-amber-200 "
+            : color === "red"
+            ? "bg-light-red-4 "
+            : color === "purple"
             ? "bg-purple-200"
             : "bg-light-slate-4 "
-    }
+        }
         ${size === "small" ? "py-1 px-1.5  " : "py-1.5 px-2 "}
         inline-flex items-center rounded-full gap-1 ${className}`}
     >
@@ -31,16 +31,16 @@ const Pill: React.FC<PillProps> = ({ className, text, color = "slate", size = "b
       <div
         className={`
         ${
-    color === "green"
-      ? "text-light-grass-11"
-      : color === "yellow"
-        ? "text-amber-700"
-        : color === "red"
-          ? "text-light-red-11"
-          : color === "purple"
+          color === "green"
+            ? "text-light-grass-11"
+            : color === "yellow"
+            ? "text-amber-700"
+            : color === "red"
+            ? "text-light-red-11"
+            : color === "purple"
             ? "text-purple-600"
             : "text-light-slate-11"
-    }
+        }
             text-sm leading-none`}
       >
         {text}