fix: eslint disable on animated grid pattern ui component

Author: andostronaut

src/components/ui/animated-gradient-text.tsx

@@ -1,19 +1,19 @@
-import { ReactNode } from "react";
+import { ReactNode } from 'react'
 
-import { cn } from "@/lib/utils";
+import { cn } from '@/lib/utils'
 
 export default function AnimatedGradientText({
   children,
-  className,
+  className
 }: {
-  children: ReactNode;
-  className?: string;
+  children: ReactNode
+  className?: string
 }) {
   return (
     <div
       className={cn(
-        "group relative mx-auto flex max-w-fit flex-row items-center justify-center rounded-2xl bg-white/40 px-4 py-1.5 text-sm font-medium shadow-[inset_0_-8px_10px_#8fdfff1f] backdrop-blur-sm transition-shadow duration-500 ease-out [--bg-size:300%] hover:shadow-[inset_0_-5px_10px_#8fdfff3f] dark:bg-black/40",
-        className,
+        'group relative mx-auto flex max-w-fit flex-row items-center justify-center rounded-2xl bg-white/40 px-4 py-1.5 text-sm font-medium shadow-[inset_0_-8px_10px_#8fdfff1f] backdrop-blur-sm transition-shadow duration-500 ease-out [--bg-size:300%] hover:shadow-[inset_0_-5px_10px_#8fdfff3f] dark:bg-black/40',
+        className
       )}
     >
       <div
@@ -22,5 +22,5 @@ export default function AnimatedGradientText({
 
       {children}
     </div>
-  );
+  )
 }

src/components/ui/animated-grid-pattern.tsx

@@ -1,21 +1,24 @@
-"use client";
+/* eslint-disable react-hooks/exhaustive-deps */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+'use client'
 
-import { useEffect, useId, useRef, useState } from "react";
-import { motion } from "framer-motion";
+import { useEffect, useId, useRef, useState } from 'react'
+import { motion } from 'framer-motion'
 
-import { cn } from "@/lib/utils";
+import { cn } from '@/lib/utils'
 
 interface GridPatternProps {
-  width?: number;
-  height?: number;
-  x?: number;
-  y?: number;
-  strokeDasharray?: any;
-  numSquares?: number;
-  className?: string;
-  maxOpacity?: number;
-  duration?: number;
-  repeatDelay?: number;
+  width?: number
+  height?: number
+  x?: number
+  y?: number
+  strokeDasharray?: any
+  numSquares?: number
+  className?: string
+  maxOpacity?: number
+  duration?: number
+  repeatDelay?: number
 }
 
 export function GridPattern({
@@ -31,24 +34,24 @@ export function GridPattern({
   repeatDelay = 0.5,
   ...props
 }: GridPatternProps) {
-  const id = useId();
-  const containerRef = useRef(null);
-  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
-  const [squares, setSquares] = useState(() => generateSquares(numSquares));
+  const id = useId()
+  const containerRef = useRef(null)
+  const [dimensions, setDimensions] = useState({ width: 0, height: 0 })
+  const [squares, setSquares] = useState(() => generateSquares(numSquares))
 
   function getPos() {
     return [
       Math.floor((Math.random() * dimensions.width) / width),
-      Math.floor((Math.random() * dimensions.height) / height),
-    ];
+      Math.floor((Math.random() * dimensions.height) / height)
+    ]
   }
 
   // Adjust the generateSquares function to return objects with an id, x, and y
   function generateSquares(count: number) {
     return Array.from({ length: count }, (_, i) => ({
       id: i,
-      pos: getPos(),
-    }));
+      pos: getPos()
+    }))
   }
 
   // Function to update a single square's position
@@ -58,70 +61,60 @@ export function GridPattern({
         sq.id === id
           ? {
               ...sq,
-              pos: getPos(),
+              pos: getPos()
             }
-          : sq,
-      ),
-    );
-  };
+          : sq
+      )
+    )
+  }
 
   // Update squares to animate in
   useEffect(() => {
     if (dimensions.width && dimensions.height) {
-      setSquares(generateSquares(numSquares));
+      setSquares(generateSquares(numSquares))
     }
-  }, [dimensions, numSquares]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [dimensions, numSquares])
 
   // Resize observer to update container dimensions
   useEffect(() => {
     const resizeObserver = new ResizeObserver((entries) => {
-      for (let entry of entries) {
+      for (const entry of entries) {
         setDimensions({
           width: entry.contentRect.width,
-          height: entry.contentRect.height,
-        });
+          height: entry.contentRect.height
+        })
       }
-    });
+    })
 
     if (containerRef.current) {
-      resizeObserver.observe(containerRef.current);
+      resizeObserver.observe(containerRef.current)
     }
 
     return () => {
       if (containerRef.current) {
-        resizeObserver.unobserve(containerRef.current);
+        resizeObserver.unobserve(containerRef.current)
       }
-    };
-  }, [containerRef]);
+    }
+  }, [containerRef])
 
   return (
     <svg
       ref={containerRef}
-      aria-hidden="true"
+      aria-hidden='true'
       className={cn(
-        "pointer-events-none absolute inset-0 h-full w-full fill-gray-400/30 stroke-gray-400/30",
-        className,
+        'pointer-events-none absolute inset-0 h-full w-full fill-gray-400/30 stroke-gray-400/30',
+        className
       )}
       {...props}
     >
       <defs>
-        <pattern
-          id={id}
-          width={width}
-          height={height}
-          patternUnits="userSpaceOnUse"
-          x={x}
-          y={y}
-        >
-          <path
-            d={`M.5 ${height}V.5H${width}`}
-            fill="none"
-            strokeDasharray={strokeDasharray}
-          />
+        <pattern id={id} width={width} height={height} patternUnits='userSpaceOnUse' x={x} y={y}>
+          <path d={`M.5 ${height}V.5H${width}`} fill='none' strokeDasharray={strokeDasharray} />
         </pattern>
       </defs>
-      <rect width="100%" height="100%" fill={`url(#${id})`} />
-      <svg x={x} y={y} className="overflow-visible">
+      <rect width='100%' height='100%' fill={`url(#${id})`} />
+      <svg x={x} y={y} className='overflow-visible'>
         {squares.map(({ pos: [x, y], id }, index) => (
           <motion.rect
             initial={{ opacity: 0 }}
@@ -130,21 +123,21 @@ export function GridPattern({
               duration,
               repeat: 1,
               delay: index * 0.1,
-              repeatType: "reverse",
+              repeatType: 'reverse'
             }}
             onAnimationComplete={() => updateSquarePosition(id)}
             key={`${x}-${y}-${index}`}
             width={width - 1}
             height={height - 1}
             x={x * width + 1}
             y={y * height + 1}
-            fill="currentColor"
-            strokeWidth="0"
+            fill='currentColor'
+            strokeWidth='0'
           />
         ))}
       </svg>
     </svg>
-  );
+  )
 }
 
-export default GridPattern;
+export default GridPattern

src/components/ui/blur-fade.tsx

@@ -1,29 +1,23 @@
-"use client";
+'use client'
 
-import { useRef } from "react";
-import {
-  AnimatePresence,
-  motion,
-  useInView,
-  UseInViewOptions,
-  Variants,
-} from "framer-motion";
+import { useRef } from 'react'
+import { AnimatePresence, motion, useInView, UseInViewOptions, Variants } from 'framer-motion'
 
-type MarginType = UseInViewOptions["margin"];
+type MarginType = UseInViewOptions['margin']
 
 interface BlurFadeProps {
-  children: React.ReactNode;
-  className?: string;
+  children: React.ReactNode
+  className?: string
   variant?: {
-    hidden: { y: number };
-    visible: { y: number };
-  };
-  duration?: number;
-  delay?: number;
-  yOffset?: number;
-  inView?: boolean;
-  inViewMargin?: MarginType;
-  blur?: string;
+    hidden: { y: number }
+    visible: { y: number }
+  }
+  duration?: number
+  delay?: number
+  yOffset?: number
+  inView?: boolean
+  inViewMargin?: MarginType
+  blur?: string
 }
 
 export default function BlurFade({
@@ -34,34 +28,34 @@ export default function BlurFade({
   delay = 0,
   yOffset = 6,
   inView = false,
-  inViewMargin = "-50px",
-  blur = "6px",
+  inViewMargin = '-50px',
+  blur = '6px'
 }: BlurFadeProps) {
-  const ref = useRef(null);
-  const inViewResult = useInView(ref, { once: true, margin: inViewMargin });
-  const isInView = !inView || inViewResult;
+  const ref = useRef(null)
+  const inViewResult = useInView(ref, { once: true, margin: inViewMargin })
+  const isInView = !inView || inViewResult
   const defaultVariants: Variants = {
     hidden: { y: yOffset, opacity: 0, filter: `blur(${blur})` },
-    visible: { y: -yOffset, opacity: 1, filter: `blur(0px)` },
-  };
-  const combinedVariants = variant || defaultVariants;
+    visible: { y: -yOffset, opacity: 1, filter: `blur(0px)` }
+  }
+  const combinedVariants = variant || defaultVariants
   return (
     <AnimatePresence>
       <motion.div
         ref={ref}
-        initial="hidden"
-        animate={isInView ? "visible" : "hidden"}
-        exit="hidden"
+        initial='hidden'
+        animate={isInView ? 'visible' : 'hidden'}
+        exit='hidden'
         variants={combinedVariants}
         transition={{
           delay: 0.04 + delay,
           duration,
-          ease: "easeOut",
+          ease: 'easeOut'
         }}
         className={className}
       >
         {children}
       </motion.div>
     </AnimatePresence>
-  );
+  )
 }

src/pages/docs/_meta.ts

@@ -1,4 +1,5 @@
 const meta = {
+  index: 'Documentations',
   drowser: 'Drowser',
   gelda: 'Gelda'
 }

src/pages/docs/index.mdx

@@ -0,0 +1 @@
+# Index