Merge branch 'features/typescript' into 'dev'

Features/typescript

See merge request sae-but2/2025-26/gestion-benevoles-association/Frontend!74

global.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+declare module "*.module.css" {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+// permet à TS de reconnaître les fichiers modules.css 

package-lock.json

@@ -30,8 +30,9 @@
         "@storybook/addon-docs": "^10.0.6",
         "@storybook/addon-vitest": "^10.0.6",
         "@storybook/react-vite": "^10.0.6",
-        "@types/react": "^19.1.16",
-        "@types/react-dom": "^19.1.9",
+        "@types/node": "^25.0.10",
+        "@types/react": "^19.2.10",
+        "@types/react-dom": "^19.2.3",
         "@vitejs/plugin-react": "^5.0.4",
         "@vitest/browser-playwright": "^4.0.8",
         "@vitest/coverage-v8": "^4.0.8",
@@ -44,6 +45,7 @@
         "playwright": "^1.56.1",
         "prop-types": "^15.8.1",
         "storybook": "^10.0.6",
+        "typescript": "^5.9.3",
         "vite": "^7.1.7",
         "vitest": "^4.0.8"
       }
@@ -1743,6 +1745,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/node": {
+      "version": "25.0.10",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-25.0.10.tgz",
+      "integrity": "sha512-zWW5KPngR/yvakJgGOmZ5vTBemDoSqF3AcV/LrO5u5wTWyEAVVh+IT39G4gtyAkh3CtTZs8aX/yRM82OfzHJRg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~7.16.0"
+      }
+    },
     "node_modules/@types/parse-json": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
@@ -1756,18 +1768,18 @@
       "license": "MIT"
     },
     "node_modules/@types/react": {
-      "version": "19.2.2",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.2.tgz",
-      "integrity": "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==",
+      "version": "19.2.10",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.10.tgz",
+      "integrity": "sha512-WPigyYuGhgZ/cTPRXB2EwUw+XvsRA3GqHlsP4qteqrnnjDrApbS7MxcGr/hke5iUoeB7E/gQtrs9I37zAJ0Vjw==",
       "license": "MIT",
       "dependencies": {
-        "csstype": "^3.0.2"
+        "csstype": "^3.2.2"
       }
     },
     "node_modules/@types/react-dom": {
-      "version": "19.2.2",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.2.tgz",
-      "integrity": "sha512-9KQPoO6mZCi7jcIStSnlOWn2nEF3mNmyr3rIAsGnAbQKYbRLyqmeSc39EVgtxXVia+LMT8j3knZLAZAh+xLmrw==",
+      "version": "19.2.3",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz",
+      "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
       "dev": true,
       "license": "MIT",
       "peerDependencies": {
@@ -2718,9 +2730,9 @@
       "license": "MIT"
     },
     "node_modules/csstype": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
       "license": "MIT"
     },
     "node_modules/debug": {
@@ -5335,7 +5347,6 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -5359,6 +5370,13 @@
         "react": ">=15.0.0"
       }
     },
+    "node_modules/undici-types": {
+      "version": "7.16.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz",
+      "integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/universalify": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",

package.json

@@ -35,8 +35,9 @@
     "@storybook/addon-docs": "^10.0.6",
     "@storybook/addon-vitest": "^10.0.6",
     "@storybook/react-vite": "^10.0.6",
-    "@types/react": "^19.1.16",
-    "@types/react-dom": "^19.1.9",
+    "@types/node": "^25.0.10",
+    "@types/react": "^19.2.10",
+    "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.0.4",
     "@vitest/browser-playwright": "^4.0.8",
     "@vitest/coverage-v8": "^4.0.8",
@@ -49,6 +50,7 @@
     "playwright": "^1.56.1",
     "prop-types": "^15.8.1",
     "storybook": "^10.0.6",
+    "typescript": "^5.9.3",
     "vite": "^7.1.7",
     "vitest": "^4.0.8"
   }

src/contexts/auth/AuthContext.js

@@ -1,3 +0,0 @@
-import { createContext } from "react";
-
-export const AuthContext = createContext(null);

src/contexts/auth/AuthContext.ts

@@ -0,0 +1,27 @@
+import { createContext } from "react";
+
+
+export interface Task {
+  id: number;
+  title?: string;
+  completed?: boolean;
+  [key: string]: unknown;
+}
+
+export interface User {
+  name: string;
+  lastname: string;
+  role: string;
+  email: string;
+  phone: string | null;
+  created_at: string;
+  tasks: Task[];
+}
+
+export interface AuthContextType {
+  user: User | null;
+  update: () => void;
+}
+
+export const AuthContext = createContext<AuthContextType | null>(null);
+

src/pages/Profile/ProfilePage.jsx

@@ -1,61 +0,0 @@
-import React, { useContext, useEffect } from "react";
-import styles from "./ProfilePage.module.css";
-import { AuthContext } from "../../contexts/auth/AuthContext.js";
-import formatDate from "../../utils/date/formatDate.js";
-import Task from "../../components/Task/Task";
-import SettingsModal from "./components/SettingsModal/SettingsModal.jsx";
-
-function ProfilePage() {
-
-    const { user, update } = useContext(AuthContext);
-
-    useEffect(() => {
-      update();
-    }, [])
-
-  return (
-    <div className={styles.container}>
-      <div className={`${styles.profileboard} glassCard`}>
-        <div className={styles.contentWrapper}>
-          <div className={styles.profilePictureContainer}>
-            <img
-              src="/react.svg"
-              alt="Photo de profil"
-              className={styles.profilePicture}
-            />
-          </div>
-          <div className={styles.description}>
-            <div className={styles.headerProfile}>
-                <h2> {user?.name} {user?.lastname} </h2>
-            </div>
-            <div className={styles.topDescription}>
-              <div className={`${styles.infoBlock} glassBorder`}>
-                <p><strong>Role :</strong> {user?.role}</p>
-                <p><strong>Membre depuis :</strong> {user && formatDate(user.created_at)}</p>
-              </div>
-              <div className={`${styles.infoBlock} glassBorder`}>
-                <p><strong>Mail :</strong> {user?.email} </p>
-                <p><strong>Téléphone :</strong> {user?.phone === null ? "Pas de numéro enregistré" : user?.phone}</p>
-              </div>
-              <div className={styles.settingImage}>
-                <SettingsModal />
-              </div>
-            </div>
-
-            <h2>Tâches :</h2>
-              {user && user.tasks.length > 0 ? (
-                  user.tasks.map((task, index) => (
-                      <Task key={index} task={task} />
-                  ))
-              ) : (
-                  <p>Aucune tâche pour le moment.</p>
-              )}
-
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default ProfilePage;

src/pages/Profile/ProfilePage.tsx

@@ -0,0 +1,165 @@
+import { useContext, useEffect } from "react";
+import styles from "./ProfilePage.module.css";
+
+import { AuthContext } from "../../contexts/auth/AuthContext";
+import formatDate from "../../utils/date/formatDate";
+
+//import Task from "../../components/Task/Task";
+//import SettingsModal from "./components/SettingsModal/SettingsModal";
+
+interface TaskType {
+  id: number;
+  title?: string;
+  completed?: boolean;
+  [key: string]: unknown;
+}
+
+interface User {
+  name: string;
+  lastname: string;
+  role: string;
+  email: string;
+  phone: string | null;
+  created_at: string;
+  tasks: TaskType[];
+}
+
+interface AuthContextType {
+  user: User | null;
+  update: () => void;
+}
+
+
+
+function ProfilePage(){
+  const { user, update } = useContext(AuthContext) as AuthContextType;
+
+  useEffect(() => {
+    update();
+  }, [update]);
+
+  return (
+    <div className={styles.container}>
+      <div className={`${styles.profileboard} glassCard`}>
+        <div className={styles.contentWrapper}>
+          <div className={styles.profilePictureContainer}>
+            <img
+              src="/react.svg"
+              alt="Photo de profil"
+              className={styles.profilePicture}
+            />
+          </div>
+
+          <div className={styles.description}>
+            <div className={styles.headerProfile}>
+              <h2>
+                {user?.name} {user?.lastname}
+              </h2>
+            </div>
+
+            <div className={styles.topDescription}>
+              <div className={`${styles.infoBlock} glassBorder`}>
+                <p>
+                  <strong>Role :</strong> {user?.role}
+                </p>
+                <p>
+                  <strong>Membre depuis :</strong>{" "}
+                  {user && formatDate(user.created_at)}
+                </p>
+              </div>
+
+              <div className={`${styles.infoBlock} glassBorder`}>
+                <p>
+                  <strong>Mail :</strong> {user?.email}
+                </p>
+                <p>
+                  <strong>Téléphone :</strong>{" "}
+                  {user?.phone ?? "Pas de numéro enregistré"}
+                </p>
+              </div>
+
+              <div className={styles.settingImage}>
+               {/* <SettingsModal />*/}
+              </div>
+            </div>
+
+            <h2>Tâches :</h2>
+
+           {/* {user && user.tasks.length > 0 ? (
+              user.tasks.map((task) => (
+                <Task key={task.id} task={task} />
+              ))
+            ) : (
+              <p>Aucune tâche pour le moment.</p>
+            )}*/}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default ProfilePage;
+
+
+/*import React, { useContext, useEffect } from "react";
+import styles from "./ProfilePage.module.css";
+import { AuthContext } from "../../contexts/auth/AuthContext.js";
+import formatDate from "../../utils/date/formatDate.js";
+import Task from "../../components/Task/Task";
+import SettingsModal from "./components/SettingsModal/SettingsModal.jsx";
+
+function ProfilePage() {
+
+    const { user, update } = useContext(AuthContext);
+
+    useEffect(() => {
+      update();
+    }, [])
+
+  return (
+    <div className={styles.container}>
+      <div className={`${styles.profileboard} glassCard`}>
+        <div className={styles.contentWrapper}>
+          <div className={styles.profilePictureContainer}>
+            <img
+              src="/react.svg"
+              alt="Photo de profil"
+              className={styles.profilePicture}
+            />
+          </div>
+          <div className={styles.description}>
+            <div className={styles.headerProfile}>
+                <h2> {user?.name} {user?.lastname} </h2>
+            </div>
+            <div className={styles.topDescription}>
+              <div className={`${styles.infoBlock} glassBorder`}>
+                <p><strong>Role :</strong> {user?.role}</p>
+                <p><strong>Membre depuis :</strong> {user && formatDate(user.created_at)}</p>
+              </div>
+              <div className={`${styles.infoBlock} glassBorder`}>
+                <p><strong>Mail :</strong> {user?.email} </p>
+                <p><strong>Téléphone :</strong> {user?.phone === null ? "Pas de numéro enregistré" : user?.phone}</p>
+              </div>
+              <div className={styles.settingImage}>
+                <SettingsModal />
+              </div>
+            </div>
+
+            <h2>Tâches :</h2>
+              {user && user.tasks.length > 0 ? (
+                  user.tasks.map((task, index) => (
+                      <Task key={index} task={task} />
+                  ))
+              ) : (
+                  <p>Aucune tâche pour le moment.</p>
+              )}
+
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default ProfilePage;*/

src/utils/date/formatDate.js

@@ -1,9 +0,0 @@
-export default function formatDate(d) {
-    const date = new Date(d);
-
-    const jj = String(date.getUTCDate()).padStart(2, '0');
-    const mm = String(date.getUTCMonth() + 1).padStart(2, '0');
-    const aaaa = date.getUTCFullYear();
-
-    return `${jj}/${mm}/${aaaa}`;
-}

src/utils/date/formatDate.ts

@@ -0,0 +1,9 @@
+export default function formatDate(d: string | Date): string {
+  const date = d instanceof Date ? d : new Date(d);
+
+  const jj = String(date.getUTCDate()).padStart(2, "0");
+  const mm = String(date.getUTCMonth() + 1).padStart(2, "0");
+  const aaaa = date.getUTCFullYear();
+
+  return `${jj}/${mm}/${aaaa}`;
+}

src/utils/date/formatDateLetter.js

@@ -1,32 +0,0 @@
-
-
-export function formatDateLetter(d) {
-    if (!d) return "Date inconnue";
-
-    const dateObj = new Date(d);
-    if (isNaN(dateObj.getTime())) return "Date invalide";
-
-    const monthNames = [
-        "Janvier", "Février", "Mars", "Avril", "Mai", "Juin",
-        "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"
-    ];
-
-    const day = dateObj.getDate().toString().padStart(2, "0");
-    const month = monthNames[dateObj.getMonth()];
-    const year = dateObj.getFullYear();
-    const hours = dateObj.getHours().toString().padStart(2, "0");
-    const minutes = dateObj.getMinutes().toString().padStart(2, "0");
-
-    return `${day} ${month} ${year} à ${hours}:${minutes}`;
-}
-
-
-export function formatDateLetterJS(d) {
-    const monthNames = [
-        "Janvier", "Février", "Mars", "Avril", "Mai", "Juin",
-        "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"
-    ];
-    const [year, month, day] = d.split('-');
-    return `${day} ${monthNames[parseInt(month) - 1]} ${year}`;
-}
-

src/utils/date/formatDateLetter.ts

@@ -0,0 +1,65 @@
+
+
+/*export function formatDateLetter(d) {
+    if (!d) return "Date inconnue";
+
+    const dateObj = new Date(d);
+    if (isNaN(dateObj.getTime())) return "Date invalide";
+
+    const monthNames = [
+        "Janvier", "Février", "Mars", "Avril", "Mai", "Juin",
+        "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"
+    ];
+
+    const day = dateObj.getDate().toString().padStart(2, "0");
+    const month = monthNames[dateObj.getMonth()];
+    const year = dateObj.getFullYear();
+    const hours = dateObj.getHours().toString().padStart(2, "0");
+    const minutes = dateObj.getMinutes().toString().padStart(2, "0");
+
+    return `${day} ${month} ${year} à ${hours}:${minutes}`;
+}
+
+
+export function formatDateLetterJS(d) {
+    const monthNames = [
+        "Janvier", "Février", "Mars", "Avril", "Mai", "Juin",
+        "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"
+    ];
+    const [year, month, day] = d.split('-');
+    return `${day} ${monthNames[parseInt(month) - 1]} ${year}`;
+}*/
+
+export function formatDateLetter(d: string | Date | null | undefined): string {
+  if (!d) return "Date inconnue";
+
+  const dateObj = d instanceof Date ? d : new Date(d);
+  if (isNaN(dateObj.getTime())) return "Date invalide";
+
+  const monthNames = [
+    "Janvier", "Février", "Mars", "Avril", "Mai", "Juin",
+    "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"
+  ];
+
+  const day = dateObj.getDate().toString().padStart(2, "0");
+  const month = monthNames[dateObj.getMonth()];
+  const year = dateObj.getFullYear();
+  const hours = dateObj.getHours().toString().padStart(2, "0");
+  const minutes = dateObj.getMinutes().toString().padStart(2, "0");
+
+  return `${day} ${month} ${year} à ${hours}:${minutes}`;
+}
+
+
+export function formatDateLetterJS(d: string): string {
+  const monthNames = [
+    "Janvier", "Février", "Mars", "Avril", "Mai", "Juin",
+    "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"
+  ];
+
+  const [year, month, day] = d.split("-");
+  if (!year || !month || !day) return "Date invalide";
+
+  return `${day} ${monthNames[parseInt(month, 10) - 1]} ${year}`;
+}
+

src/utils/date/formatTime.js

@@ -1,8 +0,0 @@
-export default function formatTime(d) {
-    const date = new Date(d);
-
-    const hh = String(date.getUTCHours()).padStart(2, '0');
-    const min = String(date.getUTCMinutes()).padStart(2, '0');
-
-    return `${hh}:${min}`;
-}

src/utils/date/formatTime.ts

@@ -0,0 +1,12 @@
+
+export default function formatTime(d: string | Date | null | undefined): string {
+  if (!d) return "Heure inconnue";
+
+  const date = d instanceof Date ? d : new Date(d);
+  if (isNaN(date.getTime())) return "Heure invalide";
+
+  const hh = String(date.getUTCHours()).padStart(2, "0");
+  const min = String(date.getUTCMinutes()).padStart(2, "0");
+
+  return `${hh}:${min}`;
+}

src/utils/events/createEvent.js

@@ -11,3 +11,4 @@ export default async function createEvent(name, description, start, end) {
         {"X-XSRF-TOKEN": csrfToken}
     );
 }
+

tsconfig.json

@@ -0,0 +1,62 @@
+{
+  // Visit https://aka.ms/tsconfig to read more about this file
+  /*"compilerOptions": {*/
+    // File Layout
+    // "rootDir": "./src",
+    // "outDir": "./dist",
+
+    // Environment Settings
+    // See also https://aka.ms/tsconfig/module
+    /*"module": "nodenext",
+    "target": "esnext",
+    "types": [],*/
+    // For nodejs:
+    // "lib": ["esnext"],
+    // "types": ["node"],
+    // and npm install -D @types/node
+
+    // Other Outputs
+    /*"sourceMap": true,
+    "declaration": true,
+    "declarationMap": true,*/
+
+    // Stricter Typechecking Options
+    /*"noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true,*/
+
+    // Style Options
+    // "noImplicitReturns": true,
+    // "noImplicitOverride": true,
+    // "noUnusedLocals": true,
+    // "noUnusedParameters": true,
+    // "noFallthroughCasesInSwitch": true,
+    // "noPropertyAccessFromIndexSignature": true,
+
+    // Recommended Options
+   /* "strict": true,
+    "jsx": "react-jsx",
+    "verbatimModuleSyntax": true,
+    "isolatedModules": true,
+    "noUncheckedSideEffectImports": true,
+    "moduleDetection": "force",
+    "skipLibCheck": true,
+  }
+}
+
+{*/
+  "compilerOptions": {
+    "target": "ESNext",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "isolatedModules": true,
+
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true,
+
+    "resolveJsonModule": true,
+    "skipLibCheck": true
+  }
+}