chore: add eslint buck checks to apps/consent

apps/consent/.eslintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  "extends": ["next/core-web-vitals", "@galoy/eslint-config/base"]
+}

apps/consent/BUCK

@@ -1,4 +1,9 @@
-load("@toolchains//workspace-pnpm:macros.bzl", "build_node_modules", "next_build", "next_build_bin")
+load("@toolchains//workspace-pnpm:macros.bzl",
+"build_node_modules",
+"next_build",
+"next_build_bin",
+"eslint"
+)
 
 export_file(
   name = "package.json",
@@ -33,7 +38,21 @@ next_build_bin(
     name = "consent",
 )
 
+dev_deps_srcs = {
+    "lib/eslint-config": "//lib/eslint-config:src",
+}
+
+eslint(
+    name = "check-lint",
+    srcs = [":src"] + glob([".eslint*"]),
+    extensions = [".ts", ".tsx"],
+    allow_warnings = True,
+    dev_deps_srcs = dev_deps_srcs,
+)
+
 test_suite(
     name = "test",
-    tests = [],
+    tests = [
+        ":check-lint",
+    ],
 )

apps/consent/app/components/button/primary-button-component.tsx

@@ -1,23 +1,25 @@
-"use client";
-import React, { ButtonHTMLAttributes } from "react";
+"use client"
+import React, { ButtonHTMLAttributes } from "react"
+/* eslint @typescript-eslint/ban-ts-comment: "off" */
 // ts-ignore because experimental_useFormStatus is not in the types
-// @ts-ignore
-import { experimental_useFormStatus as useFormStatus } from "react-dom";
-import Loader from "../loader";
+// @ts-ignore-next-line error
+import { experimental_useFormStatus as useFormStatus } from "react-dom"
+
+import Loader from "../loader"
 
 interface PrimaryButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  label?: string;
-  children: React.ReactNode;
-  disabled?: boolean;
+  label?: string
+  children: React.ReactNode
+  disabled?: boolean
 }
 
 const PrimaryButton: React.FC<PrimaryButtonProps> = ({
   children,
   disabled = false,
   ...buttonProps
 }) => {
-  const { pending } = useFormStatus();
-  const loadOrDisable = pending || disabled;
+  const { pending } = useFormStatus()
+  const loadOrDisable = pending || disabled
   return (
     <button
       disabled={loadOrDisable}
@@ -28,7 +30,7 @@ const PrimaryButton: React.FC<PrimaryButtonProps> = ({
     >
       {loadOrDisable ? <Loader size="15px" /> : children}
     </button>
-  );
-};
+  )
+}
 
-export default PrimaryButton;
+export default PrimaryButton

apps/consent/app/components/button/secondary-button-component.tsx

@@ -1,21 +1,22 @@
-"use client";
-import React, { ButtonHTMLAttributes } from "react";
+"use client"
+import React, { ButtonHTMLAttributes } from "react"
 // ts-ignore because experimental_useFormStatus is not in the types
-// @ts-ignore
-import { experimental_useFormStatus as useFormStatus } from "react-dom";
+/* eslint @typescript-eslint/ban-ts-comment: "off" */
+// @ts-ignore-next-line error
+import { experimental_useFormStatus as useFormStatus } from "react-dom"
 
 interface SecondaryButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  label?: string;
-  children: React.ReactNode;
-  disabled?: boolean;
+  label?: string
+  children: React.ReactNode
+  disabled?: boolean
 }
 
 const SecondaryButton: React.FC<SecondaryButtonProps> = ({
   children,
   disabled = false,
   ...buttonProps
 }) => {
-  const { pending } = useFormStatus();
+  const { pending } = useFormStatus()
   return (
     <button
       disabled={pending || disabled}
@@ -24,7 +25,7 @@ const SecondaryButton: React.FC<SecondaryButtonProps> = ({
     >
       {children}
     </button>
-  );
-};
+  )
+}
 
-export default SecondaryButton;
+export default SecondaryButton

apps/consent/app/components/captcha-challenge/index.tsx

@@ -1,41 +1,44 @@
-"use client";
-import { sendPhoneCode } from "@/app/login/phone/server-actions";
-import { memo, useCallback, useEffect } from "react";
-import { toast } from "react-toastify";
+"use client"
+import { memo, useCallback, useEffect } from "react"
+import { toast } from "react-toastify"
+
+import { sendPhoneCode } from "@/app/login/phone/server-actions"
 
 const CaptchaChallengeComponent: React.FC<{
-  id: string;
-  challenge: string;
+  id: string
+  challenge: string
   formData: {
-    login_challenge: string;
-    phone: string;
-    remember: string;
-  };
+    login_challenge: string
+    phone: string
+    remember: string
+  }
 }> = ({ id, challenge, formData }) => {
   const captchaHandler = useCallback(
+    /* eslint @typescript-eslint/ban-ts-comment: "off" */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     (captchaObj: any) => {
       const onSuccess = async () => {
-        const result = captchaObj.getValidate();
-        const res = await sendPhoneCode(result, formData);
+        const result = captchaObj.getValidate()
+        const res = await sendPhoneCode(result, formData)
         if (res?.error) {
-          toast.error(res.message);
+          toast.error(res.message)
         }
-      };
-      captchaObj.appendTo("#captcha");
+      }
+      captchaObj.appendTo("#captcha")
       captchaObj
         .onReady(() => {
-          captchaObj.verify();
+          captchaObj.verify()
         })
         .onSuccess(onSuccess)
         .onError((err: unknown) => {
-          console.debug("[Captcha error]:", err);
-        });
+          console.debug("[Captcha error]:", err)
+        })
     },
-    [formData]
-  );
+    [formData],
+  )
 
   useEffect(() => {
-    // @ts-ignore
+    // @ts-ignore-next-line error
     window.initGeetest(
       {
         gt: id,
@@ -45,10 +48,10 @@ const CaptchaChallengeComponent: React.FC<{
         product: "bind",
         lang: "en",
       },
-      captchaHandler
-    );
-  }, [captchaHandler, id, challenge]);
+      captchaHandler,
+    )
+  }, [captchaHandler, id, challenge])
 
-  return <div data-testid="captcha_container" id="captcha"></div>;
-};
-export const CaptchaChallenge = memo(CaptchaChallengeComponent);
+  return <div data-testid="captcha_container" id="captcha"></div>
+}
+export const CaptchaChallenge = memo(CaptchaChallengeComponent)

apps/consent/app/components/card/index.tsx

@@ -1,4 +1,5 @@
 import React, { ReactNode } from "react"
+
 import styles from "./card.module.css"
 
 interface CardProps {

apps/consent/app/components/form-component.tsx

@@ -1,18 +1,17 @@
-import React, { FormEvent, ReactNode } from "react";
+import React from "react"
 
 type FromProps = {
-  action?: (formData: FormData) => void;
-  onSubmit?: (e: React.FormEvent<HTMLFormElement>) => void;
-  children?: React.ReactNode;
-};
+  action?: (formData: FormData) => void
+  onSubmit?: (e: React.FormEvent<HTMLFormElement>) => void
+  children?: React.ReactNode
+}
 
-function FormComponent({ action, children, onSubmit } : FromProps) {
+function FormComponent({ action, children, onSubmit }: FromProps) {
   return (
     <form action={action} className="flex flex-col" onSubmit={onSubmit}>
       {children}
     </form>
-  );
-};
-
-export default FormComponent;
+  )
+}
 
+export default FormComponent

apps/consent/app/components/heading.tsx

@@ -1,11 +1,11 @@
-import React, { Children } from "react";
+import React from "react"
 
 interface headingProps {
-  children: React.ReactNode;
+  children: React.ReactNode
 }
 
 function Heading({ children }: headingProps) {
-  return <h1 className="text-center mb-4 text-xl font-semibold">{children}</h1>;
+  return <h1 className="text-center mb-4 text-xl font-semibold">{children}</h1>
 }
 
-export default Heading;
+export default Heading

apps/consent/app/components/loader/index.tsx

@@ -1,8 +1,9 @@
-import React from "react";
-import styles from "./loader.module.css";
+import React from "react"
+
+import styles from "./loader.module.css"
 
 interface loaderProps {
-  size?: string;
+  size?: string
 }
 
 export default function loader({ size = "38px" }: loaderProps) {
@@ -14,5 +15,5 @@ export default function loader({ size = "38px" }: loaderProps) {
       }}
       className={styles.loader}
     ></span>
-  );
+  )
 }

apps/consent/app/components/logo/index.tsx

@@ -1,12 +1,12 @@
-import React from "react";
-import Image from "next/image";
+import React from "react"
+import Image from "next/image"
 
 const Logo: React.FC = () => {
   return (
     <div className="flex justify-center mb-4">
       <Image src="/blink_logo.svg" alt="Galoy" width={120} height={120} />
     </div>
-  );
-};
+  )
+}
 
-export default Logo;
+export default Logo

apps/consent/app/components/scope-item/scope-item.tsx

@@ -1,4 +1,5 @@
 import React from "react"
+
 import styles from "./scope-item.module.css"
 
 interface ScopeItemProps {

apps/consent/app/components/separator.tsx

@@ -1,7 +1,7 @@
-import React, { ReactNode } from "react";
+import React, { ReactNode } from "react"
 
 interface SeparatorProps {
-  children: ReactNode;
+  children: ReactNode
 }
 
 const Separator: React.FC<SeparatorProps> = ({ children }) => {
@@ -17,7 +17,7 @@ const Separator: React.FC<SeparatorProps> = ({ children }) => {
         <div className="h-px bg-gray-300 w-full"></div>
       </div>
     </div>
-  );
-};
+  )
+}
 
-export default Separator;
+export default Separator

apps/consent/app/components/sub-heading.tsx

@@ -1,14 +1,14 @@
-import React from "react";
+import React from "react"
 
 interface SubheadingProps {
-  children: React.ReactNode;
+  children: React.ReactNode
 }
 function SubHeading({ children }: SubheadingProps) {
   return (
     <div className="flex justify-center mb-4">
       <div className="text-center text-sm w-60">{children}</div>
     </div>
-  );
+  )
 }
 
-export default SubHeading;
+export default SubHeading

apps/consent/app/components/varification-components/two-fa-verification-code-form.tsx

@@ -1,11 +1,14 @@
-import React from "react";
-import InputComponent from "@/app/components/input-component";
-import PrimaryButtonComponent from "@/app/components/button/primary-button-component";
+import React from "react"
+
+import InputComponent from "@/app/components/input-component"
+import PrimaryButtonComponent from "@/app/components/button/primary-button-component"
 
 interface TwoFaVerificationFormProps {
-  formActionTwoFA: any;
-  login_challenge: string;
-  authToken: string;
+  /* eslint @typescript-eslint/ban-ts-comment: "off" */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  formActionTwoFA: any
+  login_challenge: string
+  authToken: string
 }
 
 const TwoFaVerificationForm: React.FC<TwoFaVerificationFormProps> = ({
@@ -14,10 +17,7 @@ const TwoFaVerificationForm: React.FC<TwoFaVerificationFormProps> = ({
   authToken,
 }) => (
   <>
-    <h1
-      id="verification-title"
-      className="text-center mb-4 text-xl font-semibold"
-    >
+    <h1 id="verification-title" className="text-center mb-4 text-xl font-semibold">
       Please Enter Authenticator Code
     </h1>
     <form action={formActionTwoFA} className="flex flex-col">
@@ -32,6 +32,6 @@ const TwoFaVerificationForm: React.FC<TwoFaVerificationFormProps> = ({
       <PrimaryButtonComponent type="submit">Submit</PrimaryButtonComponent>
     </form>
   </>
-);
+)
 
-export default TwoFaVerificationForm;
+export default TwoFaVerificationForm