Merge pull request #145 from geeksblabla/refactor/xstate-survey-machine

Refactor survey form to XState state machine architecture

Author: yjose

CLAUDE.md

@@ -6,6 +6,20 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 
 StateOfDev.ma is an annual survey website for software developers in Morocco, created by the GeeksBlaBla Morocco Community. Built with Astro (v4), React, and Firebase, it collects anonymous responses and displays interactive results using charts and visualizations.
 
+## Rules
+
+- In all interactions and commit messages, be extremely concise and sacrifice grammar for the sake of concision.
+
+- At the end of each plan, give me a list of unresolved questions to answer, if any. Make the questions extremely concise. Sacrifice grammar for the sake of concision.
+
+- DO NOT write tests unless explicitly requested
+
+- DO NOT run dev server - assume already running
+
+- Add code comments sparingly - focus on "why", not "what". Only add comments if the code is not self-explanatory.
+
+- Your primary method for interacting with GitHub should be the GitHub CLI.
+
 ## Development Commands
 
 ### Essential Commands

package.json

@@ -33,6 +33,7 @@
     "@types/js-yaml": "^4.0.9",
     "@types/react": "^18.3.4",
     "@types/react-dom": "^18.3.0",
+    "@xstate/react": "^6.0.0",
     "astro": "5.14.5",
     "astro-icon": "^1.1.0",
     "class-variance-authority": "^0.7.0",
@@ -50,7 +51,8 @@
     "tailwind-merge": "^2.5.2",
     "tailwindcss": "^3.4.4",
     "tailwindcss-animate": "^1.0.7",
-    "typescript": "^5.4.5"
+    "typescript": "^5.4.5",
+    "xstate": "^5.24.0"
   },
   "devDependencies": {
     "@rollup/plugin-yaml": "^4.1.2",

pnpm-lock.yaml

@@ -0,0 +1,62 @@
+import { type ChangeEvent } from "react";
+
+type ChoiceProps = {
+  text: string;
+  id: string;
+  index: number;
+  name: string;
+  required: boolean;
+  multiple: boolean;
+  checked: boolean;
+  onChange: (index: number, checked: boolean) => void;
+};
+
+export const Choice = ({
+  text,
+  id,
+  index,
+  name,
+  multiple,
+  checked,
+  onChange
+}: ChoiceProps) => {
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    onChange(index, e.target.checked);
+  };
+
+  return (
+    <div className="relative w-full overflow-hidden flex items-center bg-card p-3 pl-14 mb-2 cursor-pointer transition-all duration-200 hover:translate-x-1">
+      <input
+        className="peer hidden"
+        type={multiple ? "checkbox" : "radio"}
+        id={id}
+        name={name}
+        value={index}
+        checked={checked}
+        onChange={handleChange}
+        data-testid={id}
+      />
+      <label
+        className="absolute inset-0 cursor-pointer
+          peer-checked:border-primary peer-checked:bg-gradient-to-r peer-checked:from-primary/15 peer-checked:to-primary/5
+          peer-checked:ring-2 peer-checked:ring-primary/30 peer-checked:ring-offset-2 peer-checked:ring-offset-background
+          border-2 border-input
+          hover:border-primary/50
+          transition-all duration-200"
+        htmlFor={id}
+      ></label>
+      <div
+        className="absolute pointer-events-none left-4 h-5 w-5 border-2 border-input bg-muted
+        peer-checked:border-primary peer-checked:bg-primary peer-checked:shadow-md peer-checked:shadow-primary/50
+        transition-all duration-200"
+      ></div>
+      <span
+        className="pointer-events-none z-10 text-foreground
+        peer-checked:font-medium
+        transition-all duration-200"
+      >
+        {text}
+      </span>
+    </div>
+  );
+};

src/components/survey/choice.tsx

@@ -10,20 +10,22 @@ import finImage from "@/assets/fin.jpeg";
   aria-labelledby="modalTitle"
   aria-modal="true"
 >
-  <div class="bg-white border-4 border-gray-400 max-w-md w-full text-center">
+  <div
+    class="bg-card border-4 border-border max-w-md w-full text-center relative"
+  >
     <span
       id="closeModal"
-      class="absolute top-2 right-2 text-gray-500 cursor-pointer"
+      class="absolute top-2 right-2 text-muted-foreground cursor-pointer hover:text-foreground transition-colors"
       aria-label="Close modal">&times;</span
     >
     <Image
       src={finImage}
       alt="Funny meme encouraging survey completion"
-      class="mx-auto border-b-2 border-gray-300"
+      class="mx-auto border-b-2 border-border"
     />
     <button
       id="stayButton"
-      class="bg-emerald-500 text-white font-bold px-4 py-4 w-full border-t-2 border-emerald-600 text-base"
+      class="bg-primary text-primary-foreground font-bold px-4 py-4 w-full border-t-2 border-primary hover:opacity-90 transition-opacity text-base"
     >
       😂 مغادي فين، انا نكمل
     </button>
@@ -35,32 +37,39 @@ import finImage from "@/assets/fin.jpeg";
   let popupShownCount = 0;
   const maxPopupShows = 2;
 
-  if (body) {
-    body.addEventListener("mouseleave", function (e: MouseEvent) {
-      if (popupShownCount < maxPopupShows) {
-        // Show the custom modal
-        const modal = document.getElementById("exitModal") as HTMLDivElement;
-        modal.classList.remove("hidden");
-        popupShownCount++;
+  const modal = document.getElementById("exitModal") as HTMLDivElement;
+  const closeModal = document.getElementById("closeModal") as HTMLSpanElement;
+  const stayButton = document.getElementById("stayButton") as HTMLButtonElement;
 
-        // Close the modal when the user clicks on the close button or stay button
-        const closeModal = document.getElementById(
-          "closeModal"
-        ) as HTMLSpanElement;
-        const stayButton = document.getElementById(
-          "stayButton"
-        ) as HTMLButtonElement;
-        closeModal.onclick = stayButton.onclick = function () {
-          modal.classList.add("hidden");
-        };
+  const closeModalHandler = () => {
+    modal.classList.add("hidden");
+  };
 
-        // Close the modal when the user clicks anywhere outside of the modal
-        window.onclick = function (event: MouseEvent) {
-          if (event.target == modal) {
-            modal.classList.add("hidden");
-          }
-        };
-      }
+  const outsideClickHandler = (event: MouseEvent) => {
+    if (event.target === modal) {
+      modal.classList.add("hidden");
+    }
+  };
+
+  const mouseLeaveHandler = () => {
+    if (popupShownCount < maxPopupShows) {
+      modal.classList.remove("hidden");
+      popupShownCount++;
+    }
+  };
+
+  if (body && modal && closeModal && stayButton) {
+    body.addEventListener("mouseleave", mouseLeaveHandler);
+    closeModal.addEventListener("click", closeModalHandler);
+    stayButton.addEventListener("click", closeModalHandler);
+    window.addEventListener("click", outsideClickHandler);
+
+    // Cleanup on page unload
+    window.addEventListener("beforeunload", () => {
+      body.removeEventListener("mouseleave", mouseLeaveHandler);
+      closeModal.removeEventListener("click", closeModalHandler);
+      stayButton.removeEventListener("click", closeModalHandler);
+      window.removeEventListener("click", outsideClickHandler);
     });
   }
 </script>

src/components/survey/exit-popup.astro

@@ -5,7 +5,7 @@ import workQuestion from "@/survey/3-work.yml";
 import aiQuestion from "@/survey/4-ai.yml";
 import techQuestion from "@/survey/5-tech.yml";
 import communityQuestion from "@/survey/6-community.yml";
-import { SurveyForm } from "./survey-form";
+import { SurveyApp } from "./survey-app";
 import ExitPopup from "./exit-popup.astro";
 
 const questions = [
@@ -19,7 +19,7 @@ const questions = [
 ---
 
 <div id="survey-form" class="min-h-screen min-w-full">
-  <SurveyForm questions={questions} client:only="react" />
+  <SurveyApp questions={questions} client:only="react" />
 </div>
 
 <ExitPopup />