diff --git a/src/pages/Register/RegisterPage.module.css b/src/pages/Register/RegisterPage.module.css
index 7a379ee..7c221bb 100644
--- a/src/pages/Register/RegisterPage.module.css
+++ b/src/pages/Register/RegisterPage.module.css
@@ -2,6 +2,7 @@
position: relative;
z-index: 2;
display: flex;
+ flex-direction: column;
width: 30%;
justify-content: center;
align-items: center;
@@ -9,6 +10,15 @@
border-radius:12px;
}
+.title {
+ font-size: 36px;
+ color: white;
+ text-align: center;
+ margin-bottom: 20px;
+ text-shadow: 0 2px 8px rgba(0,0,0,0.3);
+}
+
+
:global(.glassCard) {
--glass-bg: #ffffff9f;
}
@@ -26,4 +36,8 @@
h1 {
overflow: visible;
text-align: center;
+}
+
+.inputContainer {
+ padding: 15px;
}
\ No newline at end of file
diff --git a/src/pages/Stat/StatPage.jsx b/src/pages/Stat/StatPage.jsx
new file mode 100644
index 0000000..cd75918
--- /dev/null
+++ b/src/pages/Stat/StatPage.jsx
@@ -0,0 +1,148 @@
+import React, { useState } from "react";
+import { Doughnut } from "react-chartjs-2";
+import { Chart, ArcElement } from "chart.js";
+import styles from "./StatPage.module.css";
+import Button from "./../../components/ui/button/button";
+
+// Enregistrer les éléments nécessaires
+Chart.register(ArcElement);
+
+function StatPage() {
+ const [months, setMonths] = useState(3);
+
+ const [participationRate, setParticipationRate] = useState(89);
+
+ const incompleteEvents = [
+ { title: "Événement A", tasks: "Préparation des flyers" },
+ { title: "Événement B", tasks: "Réservation de la salle" },
+ { title: "Événement C", tasks: "Communication sur les réseaux" },
+ ];
+
+ const pendingMembers = [
+ { name: "Antoine Ordonneau" },
+ { name: "Giovanni Josserand" },
+ { name: "Quentin T'Jampens" },
+ ];
+
+ const handleValidate = (name) => {
+ console.log(`Valider ${name}`);
+ };
+
+ const handleReject = (name) => {
+ console.log(`Refuser ${name}`);
+ };
+
+ const chartData = {
+ labels: ["Progress", "Background"],
+ datasets: [
+ {
+ data: [participationRate, 100 - participationRate],
+ backgroundColor: ["#1e60f9ff", "#ffffffff"],
+ borderWidth: 0,
+ weight:10,
+ cutout: "90%",
+ circumference: 360,
+ rotation: -90,
+ },
+ ],
+ };
+
+ const chartOptions = {
+ responsive: true,
+ plugins: {
+ legend: {
+ display: false,
+ },
+ tooltip: {
+ enabled: false,
+ },
+ },
+ animation: {
+ animateScale: true,
+ animateRotate: true,
+ },
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {participationRate}%
+
+
+
+
+
+
+
Événements incomplets
+
+ {incompleteEvents.map((event, index) => (
+
+
{event.title}
+
{event.tasks}
+
+ ))}
+
+
+
+
Membres en attente de validation
+
+ {pendingMembers.map((member, index) => (
+
+
{member.name}
+
+
+
+
+
+ ))}
+
+
+
+
+ );
+}
+
+export default StatPage;
diff --git a/src/pages/Stat/StatPage.module.css b/src/pages/Stat/StatPage.module.css
new file mode 100644
index 0000000..666a610
--- /dev/null
+++ b/src/pages/Stat/StatPage.module.css
@@ -0,0 +1,194 @@
+.container {
+ display: flex;
+ flex-direction: row;
+ width: 100%;
+ padding: 20px;
+ box-sizing: border-box;
+ gap: 20px;
+}
+/* style a montrer a giovanni prcq il est + bo */
+/*.glassCard {
+ background: rgba(255, 255, 255, 0.2);
+ backdrop-filter: blur(10px);
+ border-radius: 10px;
+ padding: 15px;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ border: 1px solid rgba(255, 255, 255, 0.3);
+}*/
+
+.block {
+ border-radius: 10px;
+ padding: 15px;
+ box-sizing: border-box;
+}
+
+.leftBlock {
+ width: 40%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ height:fit-content;
+}
+
+.participationHeader {
+ display: flex;
+ align-items: center;
+ margin-bottom: 20px;
+ width: 100%;
+}
+.partiText{
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+}
+.participationHeader label{
+ font-size:20px;
+ text-align: center;
+}
+
+.monthsDropdown {
+ width:25%;
+ border-radius: 5px;
+ opacity: 1;
+ background-color: transparent;
+ border:none;
+}
+
+
+.chartContainer {
+
+ max-width: 80%;
+ margin: 0 auto;
+ position: relative;
+}
+
+
+.circularProgress {
+ width: 100%;
+ height: 100%;
+}
+
+.progressBackground {
+ opacity: 0.3;
+}
+
+.progressBar {
+ transition: stroke-dasharray 0.5s ease;
+ stroke-linecap: round;
+}
+
+.progressText {
+ font-weight: bold;
+ font-family: Arial, sans-serif;
+}
+
+
+.rightSection {
+ width: 60%;
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+}
+
+.rightBlock {
+ width: 100%;
+}
+.rightBlock>h2{
+ font-size:29px;
+}
+
+.eventsContainer {
+ display: flex;
+ flex-direction: row;
+ gap: 10px;
+ margin-top: 15px;
+}
+
+
+.eventCard {
+ flex: 1;
+ padding: 10px;
+ text-align: center;
+ padding-bottom:200px;
+}
+.eventCard>h3{
+ font-size: 24px;
+}
+.membersContainer {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ margin-top: 15px;
+}
+
+.memberCard {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 10px;
+}
+.memberCard p{
+ font-weight: bold;
+ font-size: 20px;
+}
+
+
+.buttonGroup {
+ display: flex;
+ gap: 10px;
+ justify-content: right;
+}
+
+
+
+
+@media screen and (max-width: 760px) {
+ .container {
+ flex-direction: column;
+ padding: 10px;
+ }
+
+ .leftBlock {
+ width: 100%;
+ margin-bottom: 20px;
+ height:fit-content;
+ }
+
+ .rightSection {
+ width: 100%;
+ }
+
+ .eventsContainer {
+ flex-direction: column;
+ }
+
+ .eventCard {
+ width: 100%;
+ }
+
+ .donutChart {
+ width: 120px;
+ height: 120px;
+ }
+
+ .memberCard {
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 10px;
+
+ }
+
+ .buttonGroup {
+ width: 100%;
+ justify-content: space-between;
+ }
+
+ .validateButton,
+ .rejectButton {
+ flex: 1;
+ text-align: center;
+ padding: 8px;
+ }
+}
+
+
diff --git a/src/pages/Volunteers/VolunteerCard.jsx b/src/pages/Volunteers/VolunteerCard.jsx
new file mode 100644
index 0000000..a2a3f84
--- /dev/null
+++ b/src/pages/Volunteers/VolunteerCard.jsx
@@ -0,0 +1,83 @@
+import React, {useEffect, useState} from "react";
+import styles from "./VolunteersPage.module.css";
+import getUserById from "../../utils/users/getUserById.js";
+import formatDate from "../../utils/date/formatDate.js";
+import { useNavigate } from "react-router";
+import Button from "../../components/ui/button/button.jsx";
+
+export default function VolunteerCard({ id }) {
+
+ const [isExpanded, setIsExpanded] = useState(false);
+ const [user, setUser] = useState({});
+
+ const toggleExpand = () => {
+ setIsExpanded(!isExpanded);
+ };
+
+ useEffect(() => {
+ (async () => {
+ const data = await getUserById(id);
+ setUser(data);
+ }) ()
+ }, []);
+
+ const navigate = useNavigate();
+
+ return (
+
+
+
+
{user?.name}
+
+
+
+
+ {!isExpanded ? (
+
+
Rôle : {user?.role}
+
Membre depuis : {user?.created_at && formatDate(user.created_at)}
+
+ ) : (
+
+
+
![profile]({"/react.svg"})
+
+
+
+
+
Rôle : {user?.role}
+
Membre depuis : {user?.created_at && formatDate(user.created_at)}
+
+
+
+
Email : {user?.email}
+ {user?.phone &&
Téléphone : {user.phone}
}
+
+
+
+ )}
+
+
+ {isExpanded && (
+
+
+
+ )}
+
+
+ );
+
+
+
+}
\ No newline at end of file
diff --git a/src/pages/Volunteers/VolunteersPage.jsx b/src/pages/Volunteers/VolunteersPage.jsx
index 782f2a3..0fa3d2c 100644
--- a/src/pages/Volunteers/VolunteersPage.jsx
+++ b/src/pages/Volunteers/VolunteersPage.jsx
@@ -1,106 +1,23 @@
-
-import React, { useState } from "react";
+import { useState, useEffect } from "react";
import styles from "./VolunteersPage.module.css";
+import VolunteerCard from "./VolunteerCard.jsx";
+import getAllUser from "../../utils/users/getAllUsers.js";
-function Volunteer({ name, role, since, email, phone, photo }) {
- const [isExpanded, setIsExpanded] = useState(false);
-
- const toggleExpand = () => {
- setIsExpanded(!isExpanded);
- };
-
- return (
-
-
- {!isExpanded ? (
-
-
{name}
-
Rôle : {role}
-
Membre depuis : {since}
-
- ) : (
-
-
-
-
-
-
-
{name}
-
Rôle : {role}
-
Membre depuis : {since}
-
-
-
Email : {email}
-
Téléphone : {phone}
-
-
-
- )}
-
- {isExpanded && (
-
- )}
-
-
- );
-}
function VolunteerPage() {
- const volunteers = [
- {
- name: "LEBLOND Malo",
- role: "Président",
- since: "2019",
- email: "malo.leblond@example.com",
- phone: "08 67 87 32 21",
- photo: "../src/assets/react.svg",
- },
- {
- name: "DUPONT Jean",
- role: "Bénévole",
- since: "2020",
- email: "jean.dupont@example.com",
- phone: "06 12 34 56 78",
- photo: "../src/assets/react.svg",
- },
- {
- name: "MARTIN Sophie",
- role: "Bénévole",
- since: "2021",
- email: "sophie.martin@example.com",
- phone: "06 87 65 43 21",
- photo: "../src/assets/react.svg",
- },
- {
- name: "MARTIN Sophie",
- role: "Bénévole",
- since: "2021",
- email: "sophie.martin@example.com",
- phone: "06 87 65 43 21",
- photo: "../src/assets/react.svg",
- },
- ];
+
+ const [users, setUsers] = useState([]);
+
+ useEffect(() => {
+ (async () => {
+ const data = await getAllUser();
+ setUsers(data);
+ }) ()
+ }, [])
return (
- {volunteers.map((volunteer, index) => (
-
- ))}
+ {users.map((user, index) => )}
);
}
diff --git a/src/pages/Volunteers/VolunteersPage.module.css b/src/pages/Volunteers/VolunteersPage.module.css
index 01bb808..c18433e 100644
--- a/src/pages/Volunteers/VolunteersPage.module.css
+++ b/src/pages/Volunteers/VolunteersPage.module.css
@@ -1,125 +1,117 @@
.container {
- width: 100%;
- padding: 10px;
- box-sizing: border-box;
- margin-top: 50px;
+ width: 100%;
+ padding: 10px;
+ margin-top: 50px;
+ box-sizing: border-box;
}
.profileboard {
- width: 100%;
- padding: 15px;
- border-radius: 10px;
- box-sizing: border-box;
- margin-top: 3%;
- position: relative;
+ width: 100%;
+ padding: 15px;
+ margin-top: 3%;
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ box-sizing: border-box;
}
+.header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 10px;
+}
+
+.header h2 {
+ margin: 0;
+}
+
+
.mainContent {
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- align-items: flex-start;
- width: 100%;
+ display: flex;
+ flex-direction: row;
+ width: 100%;
+ flex: 1;
}
.basicInfo {
- flex: 1;
+ flex: 1;
}
.expandedContent {
- display: flex;
- flex-direction: row;
- align-items: flex-start;
- width: 100%;
-}
-
-.profilePictureContainer {
- width: 120px;
- height: 120px;
- margin-right: 20px;
-}
-
-.profilePicture {
- width: 100%;
- height: 100%;
- border-radius: 50%;
- object-fit: cover;
+ display: flex;
+ flex-direction: row;
+ width: 100%;
}
.textInfo {
- display: flex;
- flex-direction: column;
- flex: 1;
+ display: flex;
+ flex-direction: column;
+ flex: 1;
}
.contactInfo {
- margin-top: 10px;
+ margin-top: 10px;
}
.contactInfo p {
- margin: 5px 0;
+ margin: 5px 0;
+}
+
+.bottomBar {
+ display: flex;
+ justify-content: flex-end;
+}
+
+.profilePictureContainer {
+ width: 120px;
+ height: 120px;
+ margin-right: 20px;
+}
+
+.profilePicture {
+ width: 100%;
+ height: 100%;
+ border-radius: 50%;
+ object-fit: cover;
}
.expandButton {
- width: 30px;
- height: 30px;
- display: flex;
- align-items: center;
- justify-content: center;
- cursor: pointer;
- background: transparent;
- border: none;
- font-size: 16px;
- margin-left: 10px;
- position: absolute;
- top: 10px;
- right: 10px;
+ width: 30px;
+ height: 30px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ background: transparent;
+ border: none;
+ font-size: 16px;
}
-.voirPlus {
- position: absolute;
- bottom: 10px;
- right: 10px;
- color: #007bff;
- text-decoration: none;
- font-weight: bold;
- cursor: pointer;
-}
-
-.voirPlus:hover {
- text-decoration: underline;
+.moreButtonClicked {
+ rotate: 90deg;
}
@media screen and (min-width: 768px) {
- .profilePictureContainer {
- width: 150px;
- height: 150px;
- }
- .voirPlus{
- text-align: right;
- }
+ .profilePictureContainer {
+ width: 150px;
+ height: 150px;
+ }
}
@media screen and (min-width: 1024px) {
- .container {
- max-width: 1200px;
- margin: 0 auto;
- padding: 20px;
- margin-top:50px;
- margin-bottom: 50px;
- }
+ .container {
+ max-width: 1200px;
+ margin: 50px auto;
+ padding: 20px;
+ }
- .profileboard {
- padding: 25px;
- }
+ .profileboard {
+ padding: 25px;
+ }
- .profilePictureContainer {
- width: 200px;
- height: auto;
- }
+ .profilePictureContainer {
+ width: 200px;
+ height: auto;
+ }
}
-
-
-
-
-
diff --git a/src/router.js b/src/router.js
index 49775e1..bd0c986 100644
--- a/src/router.js
+++ b/src/router.js
@@ -2,6 +2,7 @@ import { createBrowserRouter } from "react-router";
import Layout from "./layout.jsx";
import HomePage from "./pages/Home/HomePage";
import LoginPage from "./pages/Login/LoginPage";
+import StatPage from "./pages/Stat/StatPage";
import RegisterPage from "./pages/Register/RegisterPage.jsx";
import VolunteersPage from "./pages/Volunteers/VolunteersPage";
import ProfilePage from "./pages/Profile/ProfilePage";
@@ -25,8 +26,8 @@ const router = createBrowserRouter([
Component: HomePage,
},
{
- path: "/login",
- Component: LoginPage,
+ path: "/stat",
+ Component:StatPage,
},
{
path:"/profile",
diff --git a/src/stories/Modal.stories.jsx b/src/stories/Modal.stories.jsx
new file mode 100644
index 0000000..1ece2ae
--- /dev/null
+++ b/src/stories/Modal.stories.jsx
@@ -0,0 +1,49 @@
+import Modal from "../components/ui/modal/modal.jsx";
+import Button from "../components/ui/button/button.jsx";
+import { useState } from "react";
+
+export default {
+ title: 'UI/Modal',
+ component: Modal,
+ parameters: {
+ layout: 'centered',
+ },
+ tags: ['autodocs'],
+ argTypes: {
+ open: {
+ control: 'boolean',
+ description: 'Variable qui gère si la modal est ouverte ou fermée.',
+ },
+ children: {
+ control: Object,
+ description: 'Contenu de la modal.',
+ },
+ title: {
+ control: 'text',
+ description: 'Titre de la modal',
+ },
+ onClose: {
+ action: 'changed',
+ description: 'Fonction appelée pour fermer la modal.',
+ },
+ },
+};
+
+const Template = (args) => {
+ const [isOpen, setIsOpen] = useState(false);
+
+ return (
+
+
+ setIsOpen(false)}>
+ {args.children}
+
+
+ );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+ title: "Hello",
+ children:
Lorem Ipsum...
,
+};
diff --git a/src/utils/auth/logout.js b/src/utils/auth/logout.js
new file mode 100644
index 0000000..fa34b2f
--- /dev/null
+++ b/src/utils/auth/logout.js
@@ -0,0 +1,28 @@
+import getXSRFToken from "../getXSRF.js";
+
+export default async function logout() {
+
+ const csrfToken = await getXSRFToken();
+
+ try {
+ const response = await fetch(`http://${import.meta.env.VITE_API_URL}/api/users/logout`, {
+ method: 'POST',
+ credentials: 'include',
+ headers: {
+ 'Content-Type': 'application/json',
+ 'Accept': 'application/json',
+ 'X-XSRF-TOKEN': csrfToken
+ },
+ });
+
+ console.log('Code HTTP :', response.status);
+
+ if (!response.ok) {
+ throw new Error(`Erreur HTTP ${response.status}`);
+ }
+
+ return { status: response.status };
+ } catch (error) {
+ return error;
+ }
+}
diff --git a/src/utils/date/formatDate.js b/src/utils/date/formatDate.js
new file mode 100644
index 0000000..3fd1371
--- /dev/null
+++ b/src/utils/date/formatDate.js
@@ -0,0 +1,9 @@
+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}`;
+}
\ No newline at end of file
diff --git a/src/utils/date/formatDate.test.js b/src/utils/date/formatDate.test.js
new file mode 100644
index 0000000..97179dc
--- /dev/null
+++ b/src/utils/date/formatDate.test.js
@@ -0,0 +1,9 @@
+import { expect, test } from 'vitest';
+import formatDate from './formatDate';
+
+const date = "2025-11-28T11:26:45.000000Z"
+const res = "28/11/2025"
+
+test("Format Date", () => {
+ expect(formatDate(date)).toBe(res);
+})
\ No newline at end of file
diff --git a/src/utils/event/getAllEvents.js b/src/utils/event/getAllEvents.js
new file mode 100644
index 0000000..f5e37c5
--- /dev/null
+++ b/src/utils/event/getAllEvents.js
@@ -0,0 +1,23 @@
+export default async function getAllEvents() {
+
+ try {
+ const res = await fetch(`http://${import.meta.env.VITE_API_URL}/api/events/`, {
+ method: 'GET',
+ credentials: 'include',
+ headers: {
+ 'Accept': 'application/json'
+ }
+ });
+
+ if (!res.ok) {
+ throw new Error(`Erreur serveur : ${res.status}`);
+ }
+
+ const data = await res.json();
+ return data;
+ } catch (err) {
+ console.error('Erreur :', err);
+ return null;
+ }
+
+}
\ No newline at end of file
diff --git a/src/utils/event/getEventById.js b/src/utils/event/getEventById.js
new file mode 100644
index 0000000..8d09b78
--- /dev/null
+++ b/src/utils/event/getEventById.js
@@ -0,0 +1,23 @@
+export default async function GetEventById(id) {
+
+ try {
+ const res = await fetch(`http://${import.meta.env.VITE_API_URL}/api/events/${id}`, {
+ method: 'GET',
+ credentials: 'include',
+ headers: {
+ 'Accept': 'application/json'
+ }
+ });
+
+ if (!res.ok) {
+ throw new Error(`Erreur serveur : ${res.status}`);
+ }
+
+ const data = await res.json();
+ return data;
+ } catch (err) {
+ console.error('Erreur :', err);
+ return null;
+ }
+
+}
\ No newline at end of file
diff --git a/src/utils/getUser.js b/src/utils/getUser.js
index b5c817d..24297ca 100644
--- a/src/utils/getUser.js
+++ b/src/utils/getUser.js
@@ -1,6 +1,6 @@
export default async function getUser() {
try {
- const res = await fetch('http://localhost:80/api/users/me', {
+ const res = await fetch(`http://${import.meta.env.VITE_API_URL}/api/users/me`, {
method: 'GET',
credentials: 'include',
headers: {
diff --git a/src/utils/getXSRF.js b/src/utils/getXSRF.js
index 46a9415..0c78e40 100644
--- a/src/utils/getXSRF.js
+++ b/src/utils/getXSRF.js
@@ -1,5 +1,5 @@
export default async function getXSRFToken() {
- const response = await fetch('http://localhost:80/sanctum/csrf-cookie', {
+ const response = await fetch(`http://${import.meta.env.VITE_API_URL}/sanctum/csrf-cookie`, {
method: 'GET',
credentials: 'include'
});
diff --git a/src/utils/login.js b/src/utils/login.js
index 6107185..161268c 100644
--- a/src/utils/login.js
+++ b/src/utils/login.js
@@ -4,7 +4,7 @@ export default async function login(email, password) {
const csrfToken = await getXSRFToken();
try {
- const response = await fetch('http://localhost:80/api/users/login', {
+ const response = await fetch(`http://${import.meta.env.VITE_API_URL}/api/users/login`, {
method: 'POST',
credentials: 'include',
headers: {
diff --git a/src/utils/register.js b/src/utils/register.js
index 2cdacf6..313df77 100644
--- a/src/utils/register.js
+++ b/src/utils/register.js
@@ -4,7 +4,7 @@ export default async function register(email, password, name, lastname) {
const csrfToken = await getXSRFToken();
try {
- const response = await fetch('http://localhost:80/api/users/register', {
+ const response = await fetch(`http://${import.meta.env.VITE_API_URL}/api/users/register`, {
method: 'POST',
credentials: 'include',
headers: {
diff --git a/src/utils/users/getAllUsers.js b/src/utils/users/getAllUsers.js
new file mode 100644
index 0000000..c9c383e
--- /dev/null
+++ b/src/utils/users/getAllUsers.js
@@ -0,0 +1,21 @@
+export default async function getAllUser() {
+ try {
+ const res = await fetch(`http://${import.meta.env.VITE_API_URL}/api/users`, {
+ method: 'GET',
+ credentials: 'include',
+ headers: {
+ 'Accept': 'application/json'
+ }
+ });
+
+ if (!res.ok) {
+ throw new Error(`Erreur serveur : ${res.status}`);
+ }
+
+ const data = await res.json();
+ return data;
+ } catch (err) {
+ console.error('Erreur :', err);
+ return null;
+ }
+}
diff --git a/src/utils/users/getUserById.js b/src/utils/users/getUserById.js
new file mode 100644
index 0000000..59af94a
--- /dev/null
+++ b/src/utils/users/getUserById.js
@@ -0,0 +1,20 @@
+export default async function getUserById (id) {
+ try {
+ const res = await fetch(`http://${import.meta.env.VITE_API_URL}/api/users/${id}`, {
+ method: 'GET',
+ credentials: 'include',
+ headers: {
+ 'Accept': 'application/json'
+ }
+ });
+
+ if (!res.ok) {
+ throw new Error(`Erreur serveur : ${res.status}`);
+ }
+
+ return await res.json();
+ } catch (err) {
+ console.error('Erreur :', err);
+ return null;
+ }
+}
\ No newline at end of file
diff --git a/vite.config.js b/vite.config.js
index 59b0166..3277a15 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,39 +1,48 @@
+// vite.config.js
///
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { storybookTest } from '@storybook/addon-vitest/vitest-plugin'
+import { playwright } from '@vitest/browser-playwright'
-// https://vite.dev/config/
-import path from 'node:path';
-import { fileURLToPath } from 'node:url';
-import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
-import { playwright } from '@vitest/browser-playwright';
const dirname = typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
-// More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
export default defineConfig({
plugins: [react()],
base: '/',
test: {
- projects: [{
- extends: true,
- plugins: [
- // The plugin will run tests for the stories defined in your Storybook config
- // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
- storybookTest({
- configDir: path.join(dirname, '.storybook')
- })],
- test: {
- name: 'storybook',
- browser: {
- enabled: true,
- headless: true,
- provider: playwright({}),
- instances: [{
- browser: 'chromium'
- }]
+ projects: [
+ {
+ extends: true,
+ plugins: [
+ storybookTest({
+ configDir: path.join(dirname, '.storybook'),
+ }),
+ ],
+ test: {
+ name: 'storybook',
+ browser: {
+ enabled: true,
+ headless: true,
+ provider: playwright({}),
+ instances: [{ browser: 'chromium' }],
+ },
+ setupFiles: ['.storybook/vitest.setup.js'],
},
- setupFiles: ['.storybook/vitest.setup.js']
- }
- }]
- }
-});
\ No newline at end of file
+ },
+ {
+ test: {
+ name: 'unit',
+ include: [
+ 'src/**/*.test.js',
+ 'src/**/*.test.ts',
+ 'utils/**/*.test.js',
+ ],
+ environment: 'node',
+ },
+ },
+ ],
+ },
+})
+ 
) : (
