Mise à jour V.1.8

 Changes to be committed:
	new file:   .eslintrc.cjs
	modified:   .gitignore
	modified:   README.md
	modified:   components/Calendar.jsx
	modified:   components/CalendarBody.jsx
	deleted:    components/CalendarFooter.jsx
	modified:   components/CalendarHeader.jsx
	modified:   components/DateTimeFormat.jsx
	deleted:    components/MonthList.jsx
	modified:   hooks/UseCalendar.js
	modified:   hooks/useDateTime.js
	modified:   src/index.css

.eslintrc.cjs

@@ -0,0 +1,21 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  settings: { react: { version: '18.2' } },
+  plugins: ['react-refresh'],
+  rules: {
+    'react/jsx-no-target-blank': 'off',
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

.gitignore

@@ -21,4 +21,3 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
-.eslintrc.cjs

README.md

@@ -15,7 +15,7 @@
 <div id="auteur-contact"></div>
 <a href="#top" style="float: right;">Retour en haut 🡅</a>
 
-### Auteurs et contact   
+### Auteur et contact   
 
 Pour toute information supplémentaire, vous pouvez me contacter.   
 **Bubhux:** [email protected]   

components/Calendar.jsx

@@ -6,6 +6,13 @@ import DateTimeFormat from './DateTimeFormat.jsx';
 import useCalendar from '../hooks/UseCalendar.js';
 
 
+/**
+ * Composant principal du calendrier.
+ * Affiche l'en-tête du calendrier, le corps du calendrier avec les jours, 
+ * le format de la date et de l'heure, et la liste des mois.
+ * 
+ * @component
+ */
 const Calendar = () => {
     const {
         currentMonth,
@@ -16,32 +23,35 @@ const Calendar = () => {
         handleMonthSelect,
         monthNames,
         setCurrentYear
-    } = useCalendar();
+    } = useCalendar()
 
-    const [dateTimeFormatClass, setDateTimeFormatClass] = useState('showtime');
-    const [dayTextFormatClass, setDayTextFormatClass] = useState('showtime');
-    const [timeFormatClass, setTimeFormatClass] = useState('showtime');
-    const [dateFormatClass, setDateFormatClass] = useState('showtime');
+    const [dateTimeFormatClass, setDateTimeFormatClass] = useState('showtime')
+    const [dayTextFormatClass, setDayTextFormatClass] = useState('showtime')
+    const [timeFormatClass, setTimeFormatClass] = useState('showtime')
+    const [dateFormatClass, setDateFormatClass] = useState('showtime')
 
-    const days = generateCalendarDays(currentMonth, currentYear);
+    // Génère les jours du calendrier pour le mois et l'année courants
+    const days = generateCalendarDays(currentMonth, currentYear)
 
+    // Gère le clic sur le sélecteur de mois
     const handleMonthPickerClick = () => {
-        toggleMonthList();
-    };
+        toggleMonthList()
+    }
 
+    // Effet pour gérer l'affichage et le masquage de la liste des mois
     useEffect(() => {
         if (showMonthList) {
-            setDateTimeFormatClass('hideTime');
-            setDayTextFormatClass('hideTime');
-            setTimeFormatClass('hideTime');
-            setDateFormatClass('hideTime');
+            setDateTimeFormatClass('hideTime')
+            setDayTextFormatClass('hideTime')
+            setTimeFormatClass('hideTime')
+            setDateFormatClass('hideTime')
         } else {
-            setDateTimeFormatClass('showtime');
-            setDayTextFormatClass('showtime');
-            setTimeFormatClass('showtime');
-            setDateFormatClass('showtime');
+            setDateTimeFormatClass('showtime')
+            setDayTextFormatClass('showtime')
+            setTimeFormatClass('showtime')
+            setDateFormatClass('showtime')
         }
-    }, [showMonthList]);
+    }, [showMonthList])
 
     return (
         <div className="calendar">
@@ -61,13 +71,17 @@ const Calendar = () => {
             />
             <div className={`month-list ${showMonthList ? 'show' : 'hide'}`}>
                 {monthNames.map((month, index) => (
-                    <div key={index} onClick={() => handleMonthSelect(index)}>
+                    <div
+                        key={index}
+                        className={index === currentMonth ? 'active' : ''}
+                        onClick={() => handleMonthSelect(index)}
+                    >
                         {month}
                     </div>
                 ))}
             </div>
         </div>
-    );
-};
+    )
+}
 
 export default Calendar;

components/CalendarBody.jsx

@@ -2,17 +2,28 @@
 import React from 'react';
 
 
+/**
+ * Composant pour afficher le corps du calendrier.
+ * 
+ * @param {Object[]} days - Liste des jours à afficher dans le calendrier.
+ * @param {number} days[].day - Le numéro du jour du mois.
+ * @param {boolean} days[].isCurrentDate - Indique si le jour est la date courante.
+ * 
+ * @returns {JSX.Element} - Le composant affichant le corps du calendrier.
+ */
 const CalendarBody = ({ days }) => (
     <div className="calendar-body">
+        {/* Affichage des jours de la semaine */}
         <div className="calendar-week-days">
-            <div>Sun</div>
-            <div>Mon</div>
-            <div>Tue</div>
-            <div>Wed</div>
-            <div>Thu</div>
-            <div>Fri</div>
-            <div>Sat</div>
+            <div>Dim</div> {/* Dimanche */}
+            <div>Lu</div> {/* Lundi */}
+            <div>Ma</div> {/* Mardi */}
+            <div>Me</div> {/* Mercredi */}
+            <div>Je</div> {/* Jeudi */}
+            <div>Ve</div> {/* Vendredi */}
+            <div>Sa</div> {/* Samedi */}
         </div>
+        {/* Affichage des jours du mois */}
         <div className="calendar-days">
             {days.map((dayObj, index) => (
                 <div

components/CalendarHeader.jsx

@@ -2,6 +2,18 @@
 import React from 'react';
 
 
+/**
+ * Composant d'en-tête de calendrier qui affiche le mois et l'année actuels.
+ * Permet également de changer l'année et de basculer l'affichage de la liste des mois.
+ * 
+ * @param {Object} props - Les propriétés du composant.
+ * @param {function} props.onMonthPickerClick - Fonction appelée lors du clic sur le sélecteur de mois.
+ * @param {number} props.currentMonth - Le mois actuellement sélectionné (0-11).
+ * @param {number} props.currentYear - L'année actuellement sélectionnée.
+ * @param {Array<string>} props.monthNames - Tableau contenant les noms des mois.
+ * @param {function} props.setCurrentYear - Fonction pour définir l'année actuelle.
+ * @returns {JSX.Element} Le composant JSX de l'en-tête du calendrier.
+ */
 const CalendarHeader = ({ onMonthPickerClick, currentMonth, currentYear, monthNames, setCurrentYear }) => {
     return (
         <div className="calendar-header">
@@ -10,11 +22,15 @@ const CalendarHeader = ({ onMonthPickerClick, currentMonth, currentYear, monthNa
                 id="month-picker"
                 onClick={onMonthPickerClick}
             >
+                {/* Affiche le nom du mois actuel */}
                 {monthNames[currentMonth]}
             </span>
             <div className="year-picker" id="year-picker">
+                {/* Permet de diminuer l'année actuelle */}
                 <span className="year-change" id="pre-year" onClick={() => setCurrentYear(prev => prev - 1)}>&lt;</span>
+                {/* Affiche l'année actuelle */}
                 <span id="year">{currentYear}</span>
+                {/* Permet d'augmenter l'année actuelle */}
                 <span className="year-change" id="next-year" onClick={() => setCurrentYear(prev => prev + 1)}>&gt;</span>
             </div>
         </div>

components/DateTimeFormat.jsx

@@ -3,14 +3,32 @@ import React from 'react';
 import useDateTime from '../hooks/useDateTime.js';
 
 
+/**
+ * Composant DateTimeFormat
+ * 
+ * Affiche la date et l'heure actuelles avec des styles dynamiques en fonction des classes CSS
+ * passées en props. Utilise le hook `useDateTime` pour obtenir la date et l'heure formatées.
+ * 
+ * @param {Object} props - Les propriétés du composant.
+ * @param {string} props.dateTimeFormatClass - Classe CSS pour le format de la date et de l'heure.
+ * @param {string} props.timeFormatClass - Classe CSS pour le format de l'heure.
+ * @param {string} props.dateFormatClass - Classe CSS pour le format de la date.
+ * @param {string} props.dayTextFormatClass - Classe CSS pour le format du texte du jour.
+ * 
+ * @returns {JSX.Element} Le composant DateTimeFormat.
+ */
 const DateTimeFormat = ({ dateTimeFormatClass, timeFormatClass, dateFormatClass, dayTextFormatClass }) => {
+    // Utilise le hook `useDateTime` pour obtenir la date et l'heure formatées.
     const { currentDateFormatted, timeFormatted } = useDateTime();
 
     return (
         <div className={`date-time-formate ${dateTimeFormatClass}`}>
+            {/* Affiche le texte du jour avec le style approprié. */}
             <div className={`day-text-formate ${dayTextFormatClass}`}>Today</div>
             <div className={`date-time-value ${dateTimeFormatClass}`}>
+                {/* Affiche l'heure formatée avec le style approprié. */}
                 <div className={`time-formate ${timeFormatClass}`}>{timeFormatted}</div>
+                {/* Affiche la date formatée avec le style approprié. */}
                 <div className={`date-formate ${dateFormatClass}`}>{currentDateFormatted}</div>
             </div>
         </div>

hooks/UseCalendar.js

@@ -2,41 +2,77 @@
 import { useState, useEffect } from 'react';
 
 
+/**
+ * Vérifie si une année est bissextile.
+ * 
+ * @param {number} year - L'année à vérifier.
+ * @returns {boolean} - `true` si l'année est bissextile, sinon `false`.
+ */
 const isLeapYear = (year) => {
-    return (year % 4 === 0 && (year % 100 !== 0 || year % 400 === 0));
-};
+    return (year % 4 === 0 && (year % 100 !== 0 || year % 400 === 0))
+}
 
+/**
+ * Obtient le nombre de jours en février pour une année donnée.
+ * 
+ * @param {number} year - L'année pour laquelle obtenir le nombre de jours de février.
+ * @returns {number} - Le nombre de jours en février pour l'année donnée.
+ */
 const getFebDays = (year) => {
-    return isLeapYear(year) ? 29 : 28;
-};
+    return isLeapYear(year) ? 29 : 28
+}
 
+/**
+ * Hook personnalisé pour gérer les données du calendrier.
+ * 
+ * @returns {object} - Un objet contenant les propriétés et fonctions du calendrier.
+ */
 const useCalendar = () => {
-    const [currentMonth, setCurrentMonth] = useState(new Date().getMonth());
-    const [currentYear, setCurrentYear] = useState(new Date().getFullYear());
-    const [showMonthList, setShowMonthList] = useState(false);
+    // État pour le mois courant
+    const [currentMonth, setCurrentMonth] = useState(new Date().getMonth())
+    // État pour l'année courante
+    const [currentYear, setCurrentYear] = useState(new Date().getFullYear())
+    // État pour afficher ou masquer la liste des mois
+    const [showMonthList, setShowMonthList] = useState(false)
 
+    // Noms des mois en anglais
     const monthNames = [
         'January', 'February', 'March', 'April', 'May', 'June',
         'July', 'August', 'September', 'October', 'November', 'December'
-    ];
+    ]
 
+    /**
+     * Alterne la visibilité de la liste des mois.
+     */
     const toggleMonthList = () => {
-        setShowMonthList(prevState => !prevState);
-    };
+        setShowMonthList(prevState => !prevState)
+    }
 
+    /**
+     * Gère la sélection d'un mois dans la liste.
+     * 
+     * @param {number} month - L'indice du mois sélectionné.
+     */
     const handleMonthSelect = (month) => {
-        setCurrentMonth(month);
-        setShowMonthList(false); // Ferme la liste des mois après la sélection
-    };
+        setCurrentMonth(month)
+        setShowMonthList(false) // Ferme la liste des mois après la sélection
+    }
 
+    /**
+     * Génère les jours du calendrier pour un mois et une année donnés.
+     * 
+     * @param {number} month - Le mois pour lequel générer les jours.
+     * @param {number} year - L'année pour laquelle générer les jours.
+     * @returns {Array<object>} - Un tableau d'objets représentant les jours du mois.
+     */
     const generateCalendarDays = (month, year) => {
         const daysOfMonth = [
             31, getFebDays(year), 31, 30, 31, 30,
             31, 31, 30, 31, 30, 31
-        ];
+        ]
 
         const firstDay = new Date(year, month).getDay();
-        const days = [];
+        const days = []
 
         for (let i = 0; i < daysOfMonth[month] + firstDay; i++) {
             if (i >= firstDay) {
@@ -48,14 +84,14 @@ const useCalendar = () => {
                         year === new Date().getFullYear() &&
                         month === new Date().getMonth()
                     )
-                });
+                })
             } else {
-                days.push({ day: null, isCurrentDate: false });
+                days.push({ day: null, isCurrentDate: false })
             }
         }
 
-        return days;
-    };
+        return days
+    }
 
     return {
         currentMonth,
@@ -66,7 +102,7 @@ const useCalendar = () => {
         toggleMonthList,
         handleMonthSelect,
         setCurrentYear
-    };
-};
+    }
+}
 
 export default useCalendar;