Add ESLint back into CI pipeline

app/components/Input.tsx

@@ -151,13 +151,12 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
      `.trim();
 
     // Form field handlers with disabled state handling
-    const { handleChange, handleFocus, handleBlur } = useFormField<
-      HTMLInputElement
-    >(disabled, {
-      onChange,
-      onFocus,
-      onBlur,
-    });
+    const { handleChange, handleFocus, handleBlur } =
+      useFormField<HTMLInputElement>(disabled, {
+        onChange,
+        onFocus,
+        onBlur,
+      });
 
     return (
       <div className={containerClasses}>

app/components/NumberedCard.tsx

@@ -10,25 +10,23 @@ interface NumberedCardProps {
   iconColor?: string;
 }
 
-const NumberedCard = memo<NumberedCardProps>(
-  ({ number, text }) => {
-    return (
-      <div className="bg-[var(--color-surface-inverse-primary)] rounded-[12px] p-5 shadow-lg flex flex-col gap-4 sm:p-8 sm:gap-8 sm:flex-row sm:items-center lg:p-8 lg:gap-0 lg:flex-row lg:items-stretch lg:relative lg:h-[238px]">
-        {/* Section Number - Top right (lg breakpoint) */}
-        <div className="flex justify-end sm:justify-start sm:flex-shrink-0 lg:absolute lg:top-8 lg:right-8">
-          <SectionNumber number={number} />
-        </div>
-
-        {/* Card Content - Bottom left (lg breakpoint) */}
-        <div className="sm:flex-1 lg:absolute lg:bottom-8 lg:left-8 lg:right-16">
-          <p className="font-bricolage-grotesque font-medium text-[24px] leading-[32px] sm:font-normal sm:leading-[24px] sm:text-[24px] lg:text-[24px] lg:leading-[24px] xl:text-[32px] xl:leading-[32px] text-[#141414]">
-            {text}
-          </p>
-        </div>
+const NumberedCard = memo<NumberedCardProps>(({ number, text }) => {
+  return (
+    <div className="bg-[var(--color-surface-inverse-primary)] rounded-[12px] p-5 shadow-lg flex flex-col gap-4 sm:p-8 sm:gap-8 sm:flex-row sm:items-center lg:p-8 lg:gap-0 lg:flex-row lg:items-stretch lg:relative lg:h-[238px]">
+      {/* Section Number - Top right (lg breakpoint) */}
+      <div className="flex justify-end sm:justify-start sm:flex-shrink-0 lg:absolute lg:top-8 lg:right-8">
+        <SectionNumber number={number} />
       </div>
-    );
-  },
-);
+
+      {/* Card Content - Bottom left (lg breakpoint) */}
+      <div className="sm:flex-1 lg:absolute lg:bottom-8 lg:left-8 lg:right-16">
+        <p className="font-bricolage-grotesque font-medium text-[24px] leading-[32px] sm:font-normal sm:leading-[24px] sm:text-[24px] lg:text-[24px] lg:leading-[24px] xl:text-[32px] xl:leading-[32px] text-[#141414]">
+          {text}
+        </p>
+      </div>
+    </div>
+  );
+});
 
 NumberedCard.displayName = "NumberedCard";
 

app/components/RelatedArticles.tsx

@@ -108,7 +108,7 @@ const RelatedArticles = memo<RelatedArticlesProps>(
     }
 
     return (
-      <section 
+      <section
         className="py-[var(--spacing-scale-032)] lg:py-[var(--spacing-scale-064)]"
         data-testid="related-articles"
       >

app/components/TextArea.tsx

@@ -155,13 +155,12 @@ const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
      `.trim();
 
     // Form field handlers with disabled state handling
-    const { handleChange, handleFocus, handleBlur } = useFormField<
-      HTMLTextAreaElement
-    >(disabled, {
-      onChange,
-      onFocus,
-      onBlur,
-    });
+    const { handleChange, handleFocus, handleBlur } =
+      useFormField<HTMLTextAreaElement>(disabled, {
+        onChange,
+        onFocus,
+        onBlur,
+      });
 
     return (
       <div className={containerClasses}>

app/hooks/index.ts

@@ -1,6 +1,6 @@
 /**
  * Custom hooks for reusable component logic
- * 
+ *
  * This module exports all custom hooks used throughout the application.
  * Hooks encapsulate complex logic and state management that can be reused
  * across multiple components.
@@ -12,7 +12,12 @@ export { useComponentId } from "./useComponentId";
 export { useFormField } from "./useFormField";
 export { useComponentStyles } from "./useComponentStyles";
 export { useSchemaData } from "./useSchemaData";
-export { useMediaQuery, useIsMobile, useIsDesktop, BREAKPOINTS } from "./useMediaQuery";
+export {
+  useMediaQuery,
+  useIsMobile,
+  useIsDesktop,
+  BREAKPOINTS,
+} from "./useMediaQuery";
 export { useFormValidation, validationRules } from "./useFormValidation";
 export type {
   SizeStyleConfig,

app/hooks/useComponentStyles.ts

@@ -61,9 +61,7 @@ export interface UseComponentStylesOptions {
  * });
  * ```
  */
-export function useComponentStyles(
-  options: UseComponentStylesOptions,
-): {
+export function useComponentStyles(options: UseComponentStylesOptions): {
   sizeClasses: Record<string, string>;
   stateClasses: Record<string, string>;
 } {

app/hooks/useFormValidation.ts

@@ -22,24 +22,30 @@ export const validationRules = {
     return emailRegex.test(value) ? null : "Please enter a valid email address";
   },
 
-  minLength: (min: number) => (value: string): string | null => {
-    if (!value) return null;
-    return value.length >= min
-      ? null
-      : `Must be at least ${min} characters long`;
-  },
+  minLength:
+    (min: number) =>
+    (value: string): string | null => {
+      if (!value) return null;
+      return value.length >= min
+        ? null
+        : `Must be at least ${min} characters long`;
+    },
 
-  maxLength: (max: number) => (value: string): string | null => {
-    if (!value) return null;
-    return value.length <= max
-      ? null
-      : `Must be no more than ${max} characters long`;
-  },
+  maxLength:
+    (max: number) =>
+    (value: string): string | null => {
+      if (!value) return null;
+      return value.length <= max
+        ? null
+        : `Must be no more than ${max} characters long`;
+    },
 
-  pattern: (regex: RegExp, message: string) => (value: string): string | null => {
-    if (!value) return null;
-    return regex.test(value) ? null : message;
-  },
+  pattern:
+    (regex: RegExp, message: string) =>
+    (value: string): string | null => {
+      if (!value) return null;
+      return regex.test(value) ? null : message;
+    },
 };
 
 /**
@@ -182,13 +188,16 @@ export function useFormValidation(options: UseFormValidationOptions) {
   }, [initialValues]);
 
   // Set field value programmatically
-  const setValue = useCallback((name: string, value: string) => {
-    setValues((prev) => ({ ...prev, [name]: value }));
-    if (validateOnChange) {
-      const error = validateField(name, value);
-      setErrors((prev) => ({ ...prev, [name]: error }));
-    }
-  }, [validateOnChange, validateField]);
+  const setValue = useCallback(
+    (name: string, value: string) => {
+      setValues((prev) => ({ ...prev, [name]: value }));
+      if (validateOnChange) {
+        const error = validateField(name, value);
+        setErrors((prev) => ({ ...prev, [name]: error }));
+      }
+    },
+    [validateOnChange, validateField],
+  );
 
   return {
     values,

app/hooks/useSchemaData.ts

@@ -144,7 +144,12 @@ export function useSchemaData(
         type: "BreadcrumbList";
         items: Array<{ name: string; url: string }>;
       },
-): SchemaOrganization | SchemaWebSite | SchemaHowTo | SchemaArticle | SchemaBreadcrumbList {
+):
+  | SchemaOrganization
+  | SchemaWebSite
+  | SchemaHowTo
+  | SchemaArticle
+  | SchemaBreadcrumbList {
   return useMemo(() => {
     switch (config.type) {
       case "Organization":
@@ -216,7 +221,9 @@ export function useSchemaData(
               "@id": config.mainEntityOfPage,
             },
           }),
-          ...(config.articleSection && { articleSection: config.articleSection }),
+          ...(config.articleSection && {
+            articleSection: config.articleSection,
+          }),
           ...(config.keywords && { keywords: config.keywords }),
         } as SchemaArticle;