chore(frontend)/prettier tooling

frontend/.eslintrc.json

@@ -1,5 +1,11 @@
 {
-  "extends": ["next/core-web-vitals", "next/typescript"],
+  "extends": [
+    "next/core-web-vitals",
+    "prettier",
+    "next/typescript",
+    "plugin:prettier/recommended"
+  ],
+  "plugins": ["prettier"],
   "rules": {
     "max-len": [
       "warn",

frontend/.lintstagedrc.json

@@ -1,5 +1,6 @@
 {
   "*/**/*.{js,jsx,ts,tsx}": [
+    "prettier --write",
     "eslint --fix"
   ]
 }

frontend/.prettierignore

@@ -0,0 +1,8 @@
+.next
+.cache
+package-lock.json
+public
+node_modules
+next-env.d.ts
+next.config.ts
+yarn.lock

frontend/.prettierrc

@@ -0,0 +1,7 @@
+{
+  "bracketSpacing": true,
+  "printWidth": 80,
+  "semi": true,
+  "tabWidth": 2,
+  "plugins": ["prettier-plugin-tailwindcss"]
+}

frontend/package.json

@@ -26,8 +26,12 @@
     "@types/react-dom": "^18",
     "eslint": "^8",
     "eslint-config-next": "^15.0.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.2.1",
     "lint-staged": "^15.3.0",
     "postcss": "^8",
+    "prettier": "^3.4.2",
+    "prettier-plugin-tailwindcss": "^0.6.9",
     "tailwindcss": "^3.4.1",
     "typescript": "^5"
   }

frontend/src/components/Button.tsx

@@ -8,22 +8,21 @@ const primaryStyle = clsx(
   baseStyle,
   "bg-primary-blue",
   "hover:bg-primary-blue/90",
-  "disabled:bg-stroke"
+  "disabled:bg-stroke",
 );
 
 const secondaryStyle = clsx(
   baseStyle,
   "bg-transparent border-2 border-white",
-  "hover:bg-primary-blue hover:border-primary-blue hover:text-background-2"
+  "hover:bg-primary-blue hover:border-primary-blue hover:text-background-2",
 );
 
 const tertiaryStyle = clsx(
   baseStyle,
   "bg-transparent border-2 border-white",
-  "hover:bg-white/10"
+  "hover:bg-white/10",
 );
 
-
 interface IButton extends React.ComponentProps<"button"> {
   children: React.ReactNode;
   onClick?: () => void;
@@ -43,7 +42,7 @@ const Button: React.FC<IButton> = ({
       variant === "primary" && primaryStyle,
       variant === "secondary" && secondaryStyle,
       variant === "tertiary" && tertiaryStyle,
-      className
+      className,
     )}
     {...{ onClick, ...props }}
   >

frontend/src/components/Community/CommunitiesSection.tsx

@@ -12,11 +12,11 @@ const CommunitiesSection: React.FC<ICommunitiesSection> = ({ communities }) => {
   const rowOneCommunities = communities.slice(0, 2);
   const restCommunities = communities.slice(2);
   return (
-    <div className="bg-background-2 w-full px-6 lg:px-32">
+    <div className="w-full bg-background-2 px-6 lg:px-32">
       <div
         className={clsx(
           "-translate-y-40 lg:-translate-y-44",
-          "grid grid-cols-1 lg:grid-cols-3 gap-6"
+          "grid grid-cols-1 gap-6 lg:grid-cols-3",
         )}
       >
         {rowOneCommunities.map((community) => (
@@ -26,8 +26,8 @@ const CommunitiesSection: React.FC<ICommunitiesSection> = ({ communities }) => {
       <div
         className={clsx(
           "-translate-y-40 lg:-translate-y-44",
-          "grid grid-cols-1 lg:grid-cols-3 gap-6",
-          "mt-6"
+          "grid grid-cols-1 gap-6 lg:grid-cols-3",
+          "mt-6",
         )}
       >
         {restCommunities.map((community) => (

frontend/src/components/Community/CommunityCard.tsx

@@ -6,15 +6,15 @@ import { Community } from "@/queries/community/hero";
 const CommunityCard: React.FC<Community> = ({ title, subtitle, icon, url }) => {
   return (
     <Link href={url} target="_blank" rel="noreferrer noopener">
-      <div className="bg-background-2 min-h-[326px] flex flex-col items-center justify-center border border-stroke rounded-2xl hover:scale-[1.01]">
+      <div className="flex min-h-[326px] flex-col items-center justify-center rounded-2xl border border-stroke bg-background-2 hover:scale-[1.01]">
         <Image
           src={icon.url}
           alt={icon.name}
           width={76}
           height={76}
           className="object-contain"
         />
-        <h2 className="text-xl text-primary-text font-medium text-center mb-4 mt-2">
+        <h2 className="mb-4 mt-2 text-center text-xl font-medium text-primary-text">
           {title}
         </h2>
         <label className="text-base text-secondary-text">{subtitle}</label>
@@ -23,4 +23,4 @@ const CommunityCard: React.FC<Community> = ({ title, subtitle, icon, url }) => {
   );
 };
 
-export default CommunityCard;
+export default CommunityCard;

frontend/src/components/Community/hero.tsx

@@ -11,16 +11,15 @@ interface IHero {
 }
 
 const Hero: React.FC<IHero> = ({ heroData }) => {
-  const { header, subtitle, communityButtons, background } =
-    heroData;
+  const { header, subtitle, communityButtons, background } = heroData;
   return (
-    <div className="relative pt-44 pb-[277px] lg:pb-[331px] px-6 lg:px-32">
+    <div className="relative px-6 pb-[277px] pt-44 lg:px-32 lg:pb-[331px]">
       <div className="space-y-8">
-        <h1 className="text-3xl lg:text-4xl font-medium pt-1 lg:pt-3">
+        <h1 className="pt-1 text-3xl font-medium lg:pt-3 lg:text-4xl">
           {header}
         </h1>
         <p className="text-lg">{subtitle}</p>
-        <div className="flex flex-wrap gap-6 items-center">
+        <div className="flex flex-wrap items-center gap-6">
           {communityButtons.map((button) => (
             <Link
               key={button.text}
@@ -39,7 +38,7 @@ const Hero: React.FC<IHero> = ({ heroData }) => {
         src={background.url}
         alt="Hero Image Background"
         fill
-        className="absolute top-0 left-0 h-full z-[-1] object-cover"
+        className="absolute left-0 top-0 z-[-1] h-full object-cover"
       />
     </div>
   );

frontend/src/components/Cooperative/MemberSection/LearnMore.tsx

@@ -12,10 +12,12 @@ const LearnMore: React.FC<CooperativeLearnMoreSection> = ({
   background,
 }) => {
   return (
-    <div className={
-      "relative w-full flex flex-col items-center justify-center mt-16 p-8"
-    }>
-      <h2 className="text-primary-text text-xl mb-8 z-[1]">{title}</h2>
+    <div
+      className={
+        "relative mt-16 flex w-full flex-col items-center justify-center p-8"
+      }
+    >
+      <h2 className="z-[1] mb-8 text-xl text-primary-text">{title}</h2>
       <Link
         href={button.link.url}
         target="_blank"
@@ -30,7 +32,7 @@ const LearnMore: React.FC<CooperativeLearnMoreSection> = ({
         src={background.url}
         alt="Learn more Image Background"
         fill
-        className="object-cover rounded-2xl"
+        className="rounded-2xl object-cover"
       />
     </div>
   );

frontend/src/components/Cooperative/MemberSection/index.tsx

@@ -9,13 +9,13 @@ interface IMemberSection {
 
 const MemberSection: React.FC<IMemberSection> = ({ memberData }) => {
   return (
-    <div className="bg-background-1 py-12 lg:py-24 px-6 lg:px-32">
-      <h1 className="text-2xl lg:text-3xl text-primary-text font-medium mb-8">
+    <div className="bg-background-1 px-6 py-12 lg:px-32 lg:py-24">
+      <h1 className="mb-8 text-2xl font-medium text-primary-text lg:text-3xl">
         {memberData.header}
       </h1>
-      <p className="text-lg text-secondary-text mb-16">{memberData.subtitle}</p>
+      <p className="mb-16 text-lg text-secondary-text">{memberData.subtitle}</p>
       <LearnMore {...memberData.learnMoreSection} />
-      <h1 className="text-2xl lg:text-3xl text-primary-text font-medium mb-8 mt-16">
+      <h1 className="mb-8 mt-16 text-2xl font-medium text-primary-text lg:text-3xl">
         {memberData.secondaryHeader}
       </h1>
       <ExternalLink

frontend/src/components/Cooperative/ReportSection/DropdownContainer.tsx

@@ -30,7 +30,7 @@ const DropdownContainer: React.FC<IDropdownContainer> = ({
         }
         return acc;
       }, {}),
-    [reports]
+    [reports],
   );
 
   const years = useMemo(
@@ -42,7 +42,7 @@ const DropdownContainer: React.FC<IDropdownContainer> = ({
           key: year,
           value: year,
         })),
-    [processedReports]
+    [processedReports],
   );
 
   const firstYear = years[0].value;
@@ -57,7 +57,7 @@ const DropdownContainer: React.FC<IDropdownContainer> = ({
           key: month,
           value: month,
         })),
-    [year, processedReports]
+    [year, processedReports],
   );
 
   const [month, setMonth] = useState<string>();
@@ -71,16 +71,16 @@ const DropdownContainer: React.FC<IDropdownContainer> = ({
   useEffect(() => {
     const selectedReport = reports.find(
       (report) =>
-        (isMonthInfo ? report.month === month : true) && report.year === year
+        (isMonthInfo ? report.month === month : true) && report.year === year,
     );
     setReportUrl(selectedReport?.url);
   }, [isMonthInfo, month, year, reports, setReportUrl]);
 
   return (
-    <div className={
-      "flex flex-col md:flex-row gap-8 items-start md:items-center"
-    }>
-      <div className="flex gap-4 items-center">
+    <div
+      className={"flex flex-col items-start gap-8 md:flex-row md:items-center"}
+    >
+      <div className="flex items-center gap-4">
         <label className="text-lg text-secondary-text">
           {yearDropdownLabel}
         </label>
@@ -91,7 +91,7 @@ const DropdownContainer: React.FC<IDropdownContainer> = ({
         />
       </div>
       {isMonthInfo ? (
-        <div className="flex gap-4 items-center">
+        <div className="flex items-center gap-4">
           <label className="text-lg text-secondary-text">
             {monthDropdownLabel}
           </label>

frontend/src/components/Cooperative/ReportSection/ReportCard.tsx

@@ -30,12 +30,14 @@ const ReportCard: React.FC<IReportCard> = ({
   const [reportUrl, setReportUrl] = useState<string>();
 
   return (
-    <div className={clsx(
-      "bg-background-2 md:pb-7",
-      "flex flex-col md:flex-row gap-16 justify-between"
-    )}>
-      <div className="flex flex-col gap-8 items-start">
-        <h2 className="text-2xl md:text-3xl font-medium text-primary-text">
+    <div
+      className={clsx(
+        "bg-background-2 md:pb-7",
+        "flex flex-col justify-between gap-16 md:flex-row",
+      )}
+    >
+      <div className="flex flex-col items-start gap-8">
+        <h2 className="text-2xl font-medium text-primary-text md:text-3xl">
           {title}
         </h2>
         <p className="text-lg text-secondary-text">{subtitle}</p>
@@ -60,9 +62,11 @@ const ReportCard: React.FC<IReportCard> = ({
         </Link>
       </div>
 
-      <div className={
-        "relative w-32 h-32 md:w-56 md:h-56 flex-shrink-0 hidden md:block"
-      }>
+      <div
+        className={
+          "relative hidden h-32 w-32 flex-shrink-0 md:block md:h-56 md:w-56"
+        }
+      >
         <Image src={icon.url} alt={icon.name} fill className="object-contain" />
       </div>
     </div>

frontend/src/components/Cooperative/ReportSection/index.tsx

@@ -14,22 +14,27 @@ interface IReportSection {
 }
 
 const ReportSection: React.FC<IReportSection> = ({ reportsData }) => {
-  const getReports = useCallback((reportType: ReportType) => {
-    switch (reportType) {
-      case "annual":
-        return reportsData.annualReports;
-      case "risk":
-        return reportsData.riskReports;
-      default:
-        return reportsData.treasuryReports;
-    }
-  }, [reportsData]);
+  const getReports = useCallback(
+    (reportType: ReportType) => {
+      switch (reportType) {
+        case "annual":
+          return reportsData.annualReports;
+        case "risk":
+          return reportsData.riskReports;
+        default:
+          return reportsData.treasuryReports;
+      }
+    },
+    [reportsData],
+  );
 
   return (
-    <div className={clsx(
-      "bg-background-2 py-12 lg:py-24 px-6 lg:px-32",
-      "flex flex-col gap-12 md:gap-24"
-    )}>
+    <div
+      className={clsx(
+        "bg-background-2 px-6 py-12 lg:px-32 lg:py-24",
+        "flex flex-col gap-12 md:gap-24",
+      )}
+    >
       {reportsData.cooperativePageReportSection.reports.map((report, i) => (
         <ReportCard
           key={i}

frontend/src/components/Cooperative/hero.tsx

@@ -14,13 +14,13 @@ interface IHero {
 const Hero: React.FC<IHero> = ({ heroData }) => {
   const { header, subtitle, buttons, arrowLink, background } = heroData;
   return (
-    <div className="relative pt-44 lg:pt-52 pb-52 lg:pb-56 px-6 lg:px-32">
+    <div className="relative px-6 pb-52 pt-44 lg:px-32 lg:pb-56 lg:pt-52">
       <div className="space-y-8">
-        <h1 className="text-3xl lg:text-4xl font-medium pt-1 lg:pt-3">
+        <h1 className="pt-1 text-3xl font-medium lg:pt-3 lg:text-4xl">
           {header}
         </h1>
-        <p className="text-lg max-w-[685px]">{subtitle}</p>
-        <div className="flex flex-wrap gap-6 items-center">
+        <p className="max-w-[685px] text-lg">{subtitle}</p>
+        <div className="flex flex-wrap items-center gap-6">
           {buttons.map((button) => (
             <Link
               key={button.text}
@@ -37,14 +37,14 @@ const Hero: React.FC<IHero> = ({ heroData }) => {
         <ExternalLink
           url={arrowLink.link.url}
           text={arrowLink.text}
-          className="[&>span]:text-primary-text [&>span]:text-base lg:pb-6"
+          className="lg:pb-6 [&>span]:text-base [&>span]:text-primary-text"
         />
       </div>
       <Image
         src={background.url}
         alt="Hero Image Background"
         fill
-        className="absolute top-0 left-0 h-full z-[-1] object-cover"
+        className="absolute left-0 top-0 z-[-1] h-full object-cover"
       />
     </div>
   );