refactor!: Implement global state and methods to replace Alpine.js store

BREAKING CHANGE: After a team discussion about Alpine.js implementation, I realized is possible to use global state and methods to achieve the same result as with Alpine.js store --without any warnings in local testing

PS.: I'll preserve previus commit with store implementation: maybe it could be useful in the future

Author: nsandoya

src/components/Accordion.astro

@@ -5,30 +5,17 @@ const { title, description, id, last } = Astro.props;
 <!-- 
 Child component: Alpine.js logic
 
-1. Each child observes the `activeId` state from the `faqs` store by using the reactive `visible` property.
-2. When clicking on a child component, the global `activeId` state in the store is updated:
-   - If accordion is open (in child: `visible` === `true`), it sets `activeId` to `null` and closes.
-   - If accordion is closed (in child: `visible` === `false`), it replaces the `activeId` value with its own `id` value and opens.
-3. When `activeId` changes, the child's classes related to its visibility are automatically updated.
+1. Each accordion receives a unique `id` that identifies it.
+2. When clicking on an accordion:
+   2.1 The `toggle(id)` method defined in the parent component is called.
+   2.2 The global state `activeId` is updated with the new ID.
+3. Each accordion checks if its ID matches `activeId` using the `isVisible` method:
+   - If it matches, the accordion expands (`isVisible` is `true`).
+   - If it doesn't match, it remains collapsed (`isVisible` is `false`).
 
 This way, each child component can respond reactively to the `activeId` global state.
 -->
-<div
-  x-data=`{ 
-    get visible() {
-      return Alpine.store && Alpine.store('faqs')?.isVisible(${id});
-    },
-
-    toggle(id){
-      if ($store.faqs.activeId === id) {
-        $store.faqs.setActiveId(null); 
-      } else {
-        $store.faqs.setActiveId(id);
-      };
-
-    }
-  }`
-  
+<div  
   class:list={[
   	"bg-white py-6 accordion-transition overflow-hidden",
     {"border-b-0": last === id},
@@ -38,15 +25,15 @@ This way, each child component can respond reactively to the `activeId` global s
   <div
     @click=`toggle(${id})`
     class="flex flex-row items-center text-lg font-semibold cursor-pointer"
-    :class="visible && 'text-blue-500'"
+    :class=`isVisible(${id}) && 'text-blue-500'`
     >
     <div class="w-[95%] px-4">
       {title}
     </div>
     <div
       x-transition
       class="w-fit"
-      :class="visible ? 'transform rotate-180 accordion-transition' : 'transform rotate-0 accordion-transition'"
+      :class=`isVisible(${id}) ? 'transform rotate-180 accordion-transition' : 'transform rotate-0 accordion-transition'`
     >
       <Fragment set:html={downIcon} />
     </div>
@@ -55,7 +42,7 @@ This way, each child component can respond reactively to the `activeId` global s
   <div
     x-transition
     class="accordion-transition overflow-hidden"
-    :class="visible ? 'max-h-72 opacity-100' : 'max-h-0 opacity-0'"
+    :class=`isVisible(${id}) ? 'max-h-72 opacity-100' : 'max-h-0 opacity-0'`
   >
     <p class="w-[90%] text-gray-600 text-base mt-2 px-4 overflow-hidden">
       {description}

src/components/Faq.astro

@@ -6,15 +6,37 @@ import Accordion from "./Accordion.astro";
 
 Father component: Alpine.js logic
 
-1. The global store `faqs` manages the `activeId` state, which represents the ID of the last accordion opened by the user.
-2. Each child component observes the `activeId` state using the store's  `isVisible` function.
-3. When the user clicks a child component, the store's `activeId` is updated, and this change automatically propagates to all children.
-4. Every child checks if the new active ID matches its own, and opens or closes accordingly.
+1. `activeId` is a global state that stores the ID of the last accordion opened by the user.
+2. When clicking on a child component (an accordion), the `toggle` method updates the `activeId`:
+   - If the clicked accordion's ID matches the current `activeId`, it collapses (resets to `null`).
+   - If it's different, the new ID is set as `activeId`.
+3. Every accordion checks if its ID matches `activeId` by using the `isVisible` method. This way, accordion opens or closes.
 
-This ensures that only one accordion is open at a time.
+This ensures only one accordion is open at a time.
 
 -->
-<section class="py-16 bg-white">
+<section 
+  x-data="{
+    activeId: null,
+
+    setActiveId(id) {
+      this.activeId = id;
+    },
+
+    isVisible(id) {
+      return this.activeId === id;
+    },
+
+    toggle(id){
+        if (this.activeId === id) {
+          this.setActiveId(null)
+        } else {
+          this.setActiveId(id)
+        };
+      }  
+    }"
+
+  class="py-16 bg-white">
   <div class="container mx-auto px-4">
     <h2 class="text-3xl font-bold text-center mb-12">Preguntas frecuentes</h2>
     <div
@@ -32,29 +54,3 @@ This ensures that only one accordion is open at a time.
     </div>
   </div>
 </section>
-
-<!-- Client side rendering -->
-<script>
-  import Alpine from "alpinejs";
-  
-  interface FaqStore {
-    activeId: number | null;
-    setActiveId(id: number | null): void;
-    isVisible(id:number | null): boolean
-  }
-
-  Alpine.store('faqs', {
-    activeId: null,
-
-    setActiveId(id:number | null) {
-      this.activeId = id;
-    },
-
-    isVisible(id:number) {
-      return this.activeId === id;
-    },
-
-  } as FaqStore)
-
-  Alpine.start()
-</script>