fix: sonarqube detected issues (#54)

fernandotonacoder · web-flow · commit 0f56d4e9938e · 2026-01-02T01:17:15.000Z
fix: sonarqube detected issues
diff --git a/eslint.config.js b/eslint.config.js
@@ -5,7 +5,7 @@ import reactRefresh from "eslint-plugin-react-refresh";
 import { defineConfig, globalIgnores } from "eslint/config";
 
 export default defineConfig([
-  globalIgnores(["dist"]),
+  globalIgnores(["dist", "coverage"]),
   {
     files: ["**/*.{js,jsx}"],
     extends: [
diff --git a/src/components/SEO.jsx b/src/components/SEO.jsx
@@ -60,4 +60,5 @@ SEO.propTypes = {
   ogType: PropTypes.string,
 };
 
+export { SEO };
 export default SEO;
diff --git a/src/components/layout/Navbar.jsx b/src/components/layout/Navbar.jsx
@@ -112,7 +112,7 @@ export const Navbar = React.forwardRef(
         ref={combinedRef}
         style={{ colorScheme: "only light" }}
         className={cn(
-          "sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur @supports-[backdrop-filter]:bg-background/60 px-4 md:px-6 [&_*]:no-underline",
+          "sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur @supports-[backdrop-filter]:bg-background/60 px-4 md:px-6 **:no-underline",
           className
         )}
         {...props}
@@ -138,8 +138,11 @@ export const Navbar = React.forwardRef(
                   <PopoverContent align="start" className="w-48 p-2">
                     <NavigationMenu className="max-w-none">
                       <NavigationMenuList className="flex-col items-start gap-1">
-                        {navigationLinks.map((link, index) => (
-                          <NavigationMenuItem key={index} className="w-full">
+                        {navigationLinks.map((link) => (
+                          <NavigationMenuItem
+                            key={link.href}
+                            className="w-full"
+                          >
                             <Link
                               to={link.href}
                               className={cn(
@@ -160,8 +163,8 @@ export const Navbar = React.forwardRef(
               ) : (
                 <NavigationMenu className="flex">
                   <NavigationMenuList className="gap-1">
-                    {navigationLinks.map((link, index) => (
-                      <NavigationMenuItem key={index}>
+                    {navigationLinks.map((link) => (
+                      <NavigationMenuItem key={link.href}>
                         <Link
                           to={link.href}
                           className={cn(
diff --git a/src/components/ui/Carousel.jsx b/src/components/ui/Carousel.jsx
@@ -80,30 +80,42 @@ function Carousel({
     };
   }, [api, onSelect]);
 
+  const contextValue = React.useMemo(
+    () => ({
+      carouselRef,
+      api: api,
+      opts,
+      orientation:
+        orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+      scrollPrev,
+      scrollNext,
+      canScrollPrev,
+      canScrollNext,
+    }),
+    [
+      carouselRef,
+      api,
+      opts,
+      orientation,
+      scrollPrev,
+      scrollNext,
+      canScrollPrev,
+      canScrollNext,
+    ]
+  );
+
   return (
-    <CarouselContext.Provider
-      value={{
-        carouselRef,
-        api: api,
-        opts,
-        orientation:
-          orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
-        scrollPrev,
-        scrollNext,
-        canScrollPrev,
-        canScrollNext,
-      }}
-    >
-      <div
+    <CarouselContext.Provider value={contextValue}>
+      <section
         onKeyDownCapture={handleKeyDown}
         className={cn("relative", className)}
-        role="region"
         aria-roledescription="carousel"
+        aria-label="Carousel"
         data-slot="carousel"
         {...props}
       >
         {children}
-      </div>
+      </section>
     </CarouselContext.Provider>
   );
 }
@@ -134,7 +146,6 @@ function CarouselItem({ className, ...props }) {
 
   return (
     <div
-      role="group"
       aria-roledescription="slide"
       data-slot="carousel-item"
       className={cn(
diff --git a/src/components/ui/Form.jsx b/src/components/ui/Form.jsx
@@ -17,8 +17,13 @@ const Form = FormProvider;
 const FormFieldContext = React.createContext({});
 
 const FormField = ({ ...props }) => {
+  const contextValue = React.useMemo(
+    () => ({ name: props.name }),
+    [props.name]
+  );
+
   return (
-    <FormFieldContext.Provider value={{ name: props.name }}>
+    <FormFieldContext.Provider value={contextValue}>
       <Controller {...props} />
     </FormFieldContext.Provider>
   );
@@ -51,9 +56,10 @@ const FormItemContext = React.createContext({});
 
 function FormItem({ className, ...props }) {
   const id = React.useId();
+  const contextValue = React.useMemo(() => ({ id }), [id]);
 
   return (
-    <FormItemContext.Provider value={{ id }}>
+    <FormItemContext.Provider value={contextValue}>
       <div
         data-slot="form-item"
         className={cn("grid gap-2", className)}
@@ -86,9 +92,7 @@ function FormControl({ ...props }) {
       data-slot="form-control"
       id={formItemId}
       aria-describedby={
-        !error
-          ? `${formDescriptionId}`
-          : `${formDescriptionId} ${formMessageId}`
+        error ? `${formDescriptionId} ${formMessageId}` : `${formDescriptionId}`
       }
       aria-invalid={!!error}
       {...props}
diff --git a/src/main.jsx b/src/main.jsx
@@ -4,15 +4,15 @@ import { BrowserRouter } from "react-router-dom";
 import "./App.css";
 import App from "./App.jsx";
 
-// Use "/chrisert" for GitHub Pages, "/" for Netlify
+// BASE_URL comes from vite.config base: use "/chrisert" for GitHub Pages, "/" for Netlify
 const basename = import.meta.env.BASE_URL.replace(/\/$/, "") || "/";
 
 // Handle GitHub Pages SPA redirect
 const redirect = sessionStorage.getItem("redirect");
 if (redirect) {
   sessionStorage.removeItem("redirect");
   // Redirect to the original path the user requested
-  window.history.replaceState(null, "", redirect);
+  globalThis.history.replaceState(null, "", redirect);
 }
 
 createRoot(document.getElementById("root")).render(
diff --git a/src/pages/ContactPage.jsx b/src/pages/ContactPage.jsx
@@ -6,7 +6,7 @@ import { Button } from "@/components/ui/Button";
 import { Input } from "@/components/ui/Input";
 import { Textarea } from "@/components/ui/Textarea";
 import ContactErrorDialog from "@/components/contact/ContactErrorDialog";
-import SEO from "@/components/SEO";
+import { SEO } from "@/components/SEO";
 import {
   Form,
   FormControl,
@@ -21,9 +21,7 @@ const contactFormSchema = z.object({
   nome: z.string().min(2, {
     message: "O nome deve ter pelo menos 2 caracteres.",
   }),
-  email: z.string().email({
-    message: "Por favor, insira um email válido.",
-  }),
+  email: z.email("Por favor, insira um email válido."),
   telefone: z
     .string()
     .min(9, {
diff --git a/src/pages/FAQPage.jsx b/src/pages/FAQPage.jsx
@@ -5,7 +5,7 @@ import {
   AccordionItem,
   AccordionTrigger,
 } from "@/components/ui/accordion";
-import SEO from "@/components/SEO";
+import { SEO } from "@/components/SEO";
 import { faqCategories, mythsAndFacts } from "@/data/faqData";
 
 const FAQPage = () => {
@@ -44,10 +44,10 @@ const FAQPage = () => {
                   collapsible
                   className="border rounded-lg px-4"
                 >
-                  {category.questions.map((item, index) => (
+                  {category.questions.map((item) => (
                     <AccordionItem
-                      key={index}
-                      value={`${category.id}-${index}`}
+                      key={item.question}
+                      value={`${category.id}-${item.question}`}
                     >
                       <AccordionTrigger className="text-base">
                         {item.question}
@@ -78,9 +78,9 @@ const FAQPage = () => {
           </div>
 
           <div className="space-y-4">
-            {mythsAndFacts.map((item, index) => (
+            {mythsAndFacts.map((item) => (
               <div
-                key={index}
+                key={item.myth}
                 className="bg-background rounded-lg border overflow-hidden"
               >
                 <div className="grid md:grid-cols-2">
diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
@@ -2,7 +2,7 @@ import { Link } from "react-router-dom";
 import { Button } from "@/components/ui/Button";
 import { Badge } from "@/components/ui/Badge";
 import { CTASection } from "@/components/ui/CTASection";
-import SEO from "@/components/SEO";
+import { SEO } from "@/components/SEO";
 import { Award, Users, ThermometerSun } from "lucide-react";
 
 const heroImage = new URL("/hero-work.jpg", import.meta.url).href;
diff --git a/src/pages/NotFoundPage.jsx b/src/pages/NotFoundPage.jsx
@@ -1,7 +1,7 @@
 import { Link } from "react-router-dom";
 import { Button } from "@/components/ui/Button";
 import { BarsScaleFadeIcon } from "@/components/ui/icons/BarsScaleFadeIcon";
-import SEO from "@/components/SEO";
+import { SEO } from "@/components/SEO";
 import { useEffect, useState } from "react";
 
 const NotFoundPage = () => {
@@ -10,7 +10,7 @@ const NotFoundPage = () => {
 
   useEffect(() => {
     if (count <= 0) {
-      window.location.replace(basename);
+      globalThis.location.replace(basename);
       return;
     }
 
diff --git a/src/pages/PortfolioPage.jsx b/src/pages/PortfolioPage.jsx
@@ -9,7 +9,7 @@ import {
 import { CTASection } from "@/components/ui/CTASection";
 import Lightbox from "@/components/portfolio/Lightbox";
 import SocialLinks from "@/components/portfolio/SocialLinks";
-import SEO from "@/components/SEO";
+import { SEO } from "@/components/SEO";
 import { portfolioImages } from "@/data/portfolioImages";
 
 const PortfolioPage = () => {
@@ -86,9 +86,9 @@ const PortfolioPage = () => {
 
           {/* Dot indicators */}
           <div className="flex justify-center gap-2 mt-4">
-            {portfolioImages.map((_, index) => (
+            {portfolioImages.map((project, index) => (
               <button
-                key={index}
+                key={project.id}
                 onClick={() => api?.scrollTo(index)}
                 className={`h-2 rounded-full transition-all ${
                   index === current
diff --git a/src/pages/ServicesPage.jsx b/src/pages/ServicesPage.jsx
@@ -1,5 +1,5 @@
 import { CTASection } from "@/components/ui/CTASection";
-import SEO from "@/components/SEO";
+import { SEO } from "@/components/SEO";
 import { services, eticsBenefits, processSteps } from "@/data/servicesData";
 
 const ServicesPage = () => {
@@ -28,11 +28,11 @@ const ServicesPage = () => {
       <section className="py-16 px-4">
         <div className="container mx-auto">
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-            {services.map((service, index) => {
+            {services.map((service) => {
               const IconComponent = service.icon;
               return (
                 <div
-                  key={index}
+                  key={service.title}
                   className="p-6 border rounded-lg bg-background hover:shadow-lg transition-shadow"
                 >
                   <div className="mb-4">
@@ -48,9 +48,9 @@ const ServicesPage = () => {
                     {service.description}
                   </p>
                   <ul className="space-y-2">
-                    {service.features.map((feature, idx) => (
+                    {service.features.map((feature) => (
                       <li
-                        key={idx}
+                        key={feature}
                         className="flex items-center gap-2 text-sm text-muted-foreground"
                       >
                         <span className="text-primary">✓</span>
@@ -79,11 +79,11 @@ const ServicesPage = () => {
           </div>
 
           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
-            {eticsBenefits.map((benefit, index) => {
+            {eticsBenefits.map((benefit) => {
               const IconComponent = benefit.icon;
               return (
                 <div
-                  key={index}
+                  key={benefit.title}
                   className="text-center p-6 bg-background rounded-lg border"
                 >
                   <div className="flex justify-center mb-3">
@@ -118,8 +118,8 @@ const ServicesPage = () => {
           </div>
 
           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
-            {processSteps.map((item, index) => (
-              <div key={index} className="text-center">
+            {processSteps.map((item) => (
+              <div key={item.step} className="text-center">
                 <div className="text-4xl font-bold text-primary/20 mb-2">
                   {item.step}
                 </div>

Original file line number	Diff line number	Diff line change
`@@ -5,7 +5,7 @@ import reactRefresh from "eslint-plugin-react-refresh";`
`5`	`5`	`import { defineConfig, globalIgnores } from "eslint/config";`
`6`	`6`
`7`	`7`	`export default defineConfig([`
`8`		`- globalIgnores(["dist"]),`
	`8`	`+ globalIgnores(["dist", "coverage"]),`
`9`	`9`	`{`
`10`	`10`	`files: ["*/.{js,jsx}"],`
`11`	`11`	`extends: [`