feat: Ajout de React pour le front, début de refonte du front

Makefile

@@ -17,7 +17,7 @@ SF_MEMORY = $(PHP) -d memory_limit=256M bin/console
 
 # Misc
 .DEFAULT_GOAL = help
-.PHONY        : help build start install down stop logs sh composer vendor sf cc test phpmd phpcs quality fix-permissions controller entity migration migration-diff migration-migrate form crud fixtures command auth subscriber state-processor state-provider npm-install npm-run npm-watch
+.PHONY        : help build start install down stop logs sh composer vendor sf cc test phpmd phpcs quality fix-permissions controller entity migration migration-diff migration-migrate form crud fixtures command auth subscriber state-processor state-provider npm-install npm-run npm-watch openapi
 
 ## —— 🎵 🐳 The Symfony Docker Makefile 🐳 🎵 ——————————————————————————————————
 help: ## Outputs this help screen
@@ -147,6 +147,9 @@ consume-schedule: ## Consume schedule messages
 message: ## Create a new message and handler
 	@$(SYMFONY) make:message
 
+openapi: ## Exporter la documentation OpenAPI en JSON
+	@$(SYMFONY) api:openapi:export --output=public/api-docs.json
+
 ## —— Webpack Encore —————————————————————————————————————————————————————————————
 npm-install: ## Install npm dependencies
 	@$(DOCKER_COMP) exec node npm install --force

assets/app.js

@@ -1,3 +1,4 @@
+import { registerReactControllerComponents } from '@symfony/ux-react';
 import './bootstrap.js';
 
 import '@fortawesome/fontawesome-free/js/all.js';
@@ -13,3 +14,5 @@ import './styles/app.scss';
 
 // start the Stimulus application
 import './bootstrap';
+
+//registerReactControllerComponents(require.context('./react/controllers', true, /\.(j|t)sx?$/));

assets/controllers.json

@@ -9,6 +9,12 @@
                 }
             }
         },
+        "@symfony/ux-react": {
+            "react": {
+                "enabled": true,
+                "fetch": "eager"
+            }
+        },
         "@symfony/ux-turbo": {
             "turbo-core": {
                 "enabled": true,

assets/react/app/App.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
+import { HomePage } from './presentation/pages/HomePage.jsx';
+import { MangaDetailPage } from './presentation/pages/MangaDetailPage.jsx';
+import { AddMangaPage } from './presentation/pages/AddMangaPage.jsx';
+
+function App() {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<HomePage />} />
+        <Route path="/manga/:slug" element={<MangaDetailPage />} />
+        <Route path="/add" element={<AddMangaPage />} />
+        <Route path="*" element={<Navigate to="/" replace />} />
+      </Routes>
+    </BrowserRouter>
+  );
+}
+
+export default App;

assets/react/app/application/useCases/getMangaCollection.js

@@ -0,0 +1,9 @@
+export class GetMangaCollection {
+  constructor(mangaRepository) {
+    this.mangaRepository = mangaRepository;
+  }
+
+  async execute(page = 1) {
+    return await this.mangaRepository.getMangaCollection(page);
+  }
+}

assets/react/app/application/useCases/getMangaDetail.js

@@ -0,0 +1,9 @@
+export class GetMangaDetail {
+  constructor(mangaRepository) {
+    this.mangaRepository = mangaRepository;
+  }
+
+  async execute(slug) {
+    return await this.mangaRepository.getMangaBySlug(slug);
+  }
+}

assets/react/app/application/useCases/searchMangas.js

@@ -0,0 +1,9 @@
+export class SearchMangas {
+  constructor(mangaRepository) {
+    this.mangaRepository = mangaRepository;
+  }
+
+  async execute(query) {
+    return await this.mangaRepository.searchMangas(query);
+  }
+}

assets/react/app/assets/react.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

assets/react/app/domain/chapter.js

@@ -0,0 +1,10 @@
+export class Chapter {
+  constructor(id, number, title, volume, isVisible, createdAt) {
+    this.id = id;
+    this.number = number;
+    this.title = title;
+    this.volume = volume;
+    this.isVisible = isVisible;
+    this.createdAt = createdAt;
+  }
+}

assets/react/app/domain/manga.js

@@ -0,0 +1,75 @@
+import { Chapter } from './chapter.js';
+
+export class Manga {
+  constructor(
+    id,
+    title,
+    slug,
+    imageUrl,
+    author,
+    publicationYear,
+    genres,
+    status,
+    rating,
+    description = ''
+  ) {
+    this.id = id;
+    this.title = title;
+    this.slug = slug;
+    this.imageUrl = imageUrl;
+    this.author = author;
+    this.publicationYear = publicationYear;
+    this.genres = genres;
+    this.status = status;
+    this.rating = rating;
+    this.description = description;
+  }
+}
+
+export class MangaCollection {
+  constructor(items, total, page, limit, hasNextPage, hasPreviousPage) {
+    this.items = items;
+    this.total = total;
+    this.page = page;
+    this.limit = limit;
+    this.hasNextPage = hasNextPage;
+    this.hasPreviousPage = hasPreviousPage;
+  }
+}
+
+export class MangaDetail extends Manga {
+  constructor(manga, chapters = []) {
+    super(
+      manga.id,
+      manga.title,
+      manga.slug,
+      manga.imageUrl,
+      manga.author,
+      manga.publicationYear,
+      manga.genres,
+      manga.status,
+      manga.rating,
+      manga.description
+    );
+    this.chapters = this.organizeChaptersByVolume(chapters);
+  }
+
+  organizeChaptersByVolume(chapters) {
+    const volumeMap = new Map();
+    
+    chapters.forEach(chapter => {
+      const volume = chapter.volume || 0;
+      if (!volumeMap.has(volume)) {
+        volumeMap.set(volume, []);
+      }
+      volumeMap.get(volume).push(chapter);
+    });
+
+    // Sort chapters within each volume
+    volumeMap.forEach(chapters => {
+      chapters.sort((a, b) => b.number - a.number);
+    });
+
+    return new Map([...volumeMap.entries()].sort((a, b) => b[0] - a[0]));
+  }
+}

assets/react/app/domain/ports/mangaRepository.js

@@ -0,0 +1,6 @@
+// Port (interface) for manga data access
+export class MangaRepository {
+  async getMangaCollection(page = 1) {
+    throw new Error('Not implemented');
+  }
+}

assets/react/app/index.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App.jsx'
+import '../../styles/app.scss'
+
+createRoot(document.getElementById('react-app')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

assets/react/app/infrastructure/api/apiMangaRepository.js

@@ -0,0 +1,41 @@
+import axios from 'axios';
+import { Manga, MangaCollection } from '../../domain/manga';
+
+export class ApiMangaRepository {
+  constructor() {
+    this.api = axios.create({
+      baseURL: '/api'
+    });
+  }
+
+  async getMangaCollection(page = 1) {
+    try {
+      const response = await this.api.get(`/mangas?page=${page}`);
+      const data = response.data;
+      
+      const mangas = data.items.map(item => new Manga(
+        item.id,
+        item.title,
+        item.slug,
+        item.imageUrl,
+        item.author,
+        item.publicationYear,
+        item.genres,
+        item.status,
+        item.rating
+      ));
+
+      return new MangaCollection(
+        mangas,
+        data.total,
+        data.page,
+        data.limit,
+        data.hasNextPage,
+        data.hasPreviousPage
+      );
+    } catch (error) {
+      console.error('Error fetching manga collection:', error);
+      throw error;
+    }
+  }
+}

assets/react/app/infrastructure/api/mockMangaRepository.js

@@ -0,0 +1,109 @@
+import { Manga, MangaCollection, MangaDetail } from '../../domain/manga.js';
+import { Chapter } from '../../domain/chapter.js';
+
+export class MockMangaRepository {
+  constructor() {
+    this.mangas = {
+      'one-piece': {
+        id: '1',
+        title: 'One Piece',
+        slug: 'one-piece',
+        imageUrl: 'https://images.unsplash.com/photo-1607604276583-eef5d076aa5f?auto=format&fit=crop&w=800&q=80',
+        author: 'Eiichiro Oda',
+        publicationYear: 1997,
+        genres: ['Action', 'Adventure', 'Comedy'],
+        status: 'ongoing',
+        rating: 4.9,
+        description: 'Monkey D. Luffy refuses to let anyone or anything stand in the way of his quest to become king of all pirates.'
+      },
+      'naruto': {
+        id: '2',
+        title: 'Naruto',
+        slug: 'naruto',
+        imageUrl: 'https://images.unsplash.com/photo-1618519764620-7403abdbdfe9?auto=format&fit=crop&w=800&q=80',
+        author: 'Masashi Kishimoto',
+        publicationYear: 1999,
+        genres: ['Action', 'Adventure', 'Fantasy'],
+        status: 'completed',
+        rating: 4.8,
+        description: 'Twelve years ago the Village Hidden in the Leaves was attacked by a fearsome threat.'
+      },
+      'berserk': {
+        id: '3',
+        title: 'Berserk',
+        slug: 'berserk',
+        imageUrl: 'https://images.unsplash.com/photo-1607604276583-eef5d076aa5f?auto=format&fit=crop&w=800&q=80',
+        author: 'Kentaro Miura',
+        publicationYear: 1989,
+        genres: ['Action', 'Dark Fantasy', 'Horror', 'Psychological'],
+        status: 'ongoing',
+        rating: 4.9,
+        description: 'Guts, known as the Black Swordsman, seeks sanctuary from the demonic forces.'
+      }
+    };
+  }
+
+  async searchMangas(query) {
+    if (!query) return [];
+    
+    const normalizedQuery = query.toLowerCase();
+    return Object.values(this.mangas)
+      .filter(manga => 
+        manga.title.toLowerCase().includes(normalizedQuery) ||
+        manga.author.toLowerCase().includes(normalizedQuery)
+      )
+      .map(manga => new Manga(
+        manga.id,
+        manga.title,
+        manga.slug,
+        manga.imageUrl,
+        manga.author,
+        manga.publicationYear,
+        manga.genres,
+        manga.status,
+        manga.rating
+      ));
+  }
+
+  async getMangaCollection(page = 1) {
+    const mangas = Object.values(this.mangas).map(manga => new Manga(
+      manga.id,
+      manga.title,
+      manga.slug,
+      manga.imageUrl,
+      manga.author,
+      manga.publicationYear,
+      manga.genres,
+      manga.status,
+      manga.rating
+    ));
+
+    return new MangaCollection(
+      mangas,
+      mangas.length,
+      page,
+      10,
+      false,
+      false
+    );
+  }
+
+  async getMangaBySlug(slug) {
+    const manga = this.mangas[slug];
+    
+    if (!manga) {
+      throw new Error(`Manga with slug "${slug}" not found`);
+    }
+
+    const chapters = [
+      new Chapter('1', 378, 'Un assassin invité', 42, true, '2024-02-15'),
+      new Chapter('2', 377, 'Snake In One\'s Bosom', 42, true, '2024-02-01'),
+      new Chapter('3', 376, 'La mer tremble, la guerre se profile', 42, true, '2024-01-15'),
+      new Chapter('4', 375, 'L\'aube suivant la nuit brumeuse', 41, true, '2024-01-01'),
+      new Chapter('5', 374, 'Le monstre noir va-t-il se laisser faire ?', 41, true, '2023-12-15'),
+      new Chapter('6', 373, 'Confrontation', 41, true, '2023-12-01'),
+    ];
+
+    return new MangaDetail(manga, chapters);
+  }
+}

assets/react/app/presentation/components/Header.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faBars } from '@fortawesome/free-solid-svg-icons';
+import { SearchBar } from './SearchBar/SearchBar.jsx';
+
+export function Header({ onMenuClick, onMangaClick, onAddMangaClick }) {
+  return (
+    <header className="bg-green-600 h-16 flex items-center fixed w-full z-50">
+      <button 
+        onClick={onMenuClick}
+        className="ml-4 text-white p-2 md:hidden"
+      >
+        <FontAwesomeIcon icon={faBars} />
+      </button>
+      <div className="flex items-center flex-1">
+        <a href="/" className="text-white text-2xl font-bold ml-4">
+          Mangarr
+        </a>
+        <SearchBar 
+          onMangaClick={onMangaClick}
+          onAddMangaClick={onAddMangaClick}
+        />
+      </div>
+    </header>
+  );
+}

assets/react/app/presentation/components/Layout/Layout.jsx

@@ -0,0 +1,26 @@
+import React, { useState } from 'react';
+import { Header } from '../Header';
+import { Sidebar } from '../Sidebar';
+
+export function Layout({ children, onMangaClick, onAddMangaClick }) {
+  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <Header 
+        onMenuClick={() => setIsSidebarOpen(!isSidebarOpen)} 
+        onMangaClick={onMangaClick}
+        onAddMangaClick={onAddMangaClick}
+      />
+      <Sidebar 
+        isOpen={isSidebarOpen} 
+        onClose={() => setIsSidebarOpen(false)}
+        onAddMangaClick={onAddMangaClick}
+      />
+      
+      <main className="pt-16 md:ml-60">
+        {children}
+      </main>
+    </div>
+  );
+}

assets/react/app/presentation/components/MangaCard.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faStar } from '@fortawesome/free-solid-svg-icons';
+
+export function MangaCard({ manga, onClick }) {
+  return (
+    <div 
+      className="bg-white rounded-lg shadow-md overflow-hidden cursor-pointer transition-transform hover:scale-105"
+      onClick={() => onClick?.(manga.slug)}
+    >
+      <div className="relative h-64">
+        <img
+          src={manga.imageUrl || 'https://via.placeholder.com/300x400'}
+          alt={manga.title}
+          className="w-full h-full object-cover"
+        />
+      </div>
+      <div className="p-4">
+        <h3 className="text-lg font-semibold text-gray-800 mb-2">{manga.title}</h3>
+        <p className="text-sm text-gray-600 mb-2">By {manga.author}</p>
+        <div className="flex items-center justify-between">
+          <span className="text-sm text-gray-500">{manga.publicationYear}</span>
+          {manga.rating && (
+            <span className="flex items-center text-yellow-500">
+              <FontAwesomeIcon icon={faStar} className="mr-1" />
+              {manga.rating}
+            </span>
+          )}
+        </div>
+        <div className="mt-2 flex flex-wrap gap-1">
+          {manga.genres.map((genre, index) => (
+            <span
+              key={index}
+              className="px-2 py-1 text-xs bg-green-100 text-green-800 rounded-full"
+            >
+              {genre}
+            </span>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

assets/react/app/presentation/components/MangaGrid.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { MangaCard } from './MangaCard.jsx';
+
+export function MangaGrid({ mangas, onMangaClick }) {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 p-6">
+      {mangas.map((manga) => (
+        <MangaCard 
+          key={manga.id} 
+          manga={manga} 
+          onClick={onMangaClick}
+        />
+      ))}
+    </div>
+  );
+}

assets/react/app/presentation/components/SearchBar/SearchBar.jsx

@@ -0,0 +1,125 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faSearch, faPlus } from '@fortawesome/free-solid-svg-icons';
+import { MockMangaRepository } from '../../../infrastructure/api/mockMangaRepository.js';
+import { SearchMangas } from '../../../application/useCases/searchMangas.js';
+
+const mangaRepository = new MockMangaRepository();
+const searchMangas = new SearchMangas(mangaRepository);
+
+export function SearchBar({ onMangaClick, onAddMangaClick }) {
+  const [query, setQuery] = useState('');
+  const [results, setResults] = useState([]);
+  const [isOpen, setIsOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [hasSearched, setHasSearched] = useState(false);
+  const searchRef = useRef(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (searchRef.current && !searchRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  useEffect(() => {
+    const searchManga = async () => {
+      if (!query.trim()) {
+        setResults([]);
+        setHasSearched(false);
+        return;
+      }
+
+      setLoading(true);
+      try {
+        const searchResults = await searchMangas.execute(query);
+        setResults(searchResults);
+        setHasSearched(true);
+      } catch (error) {
+        console.error('Search error:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    const timeoutId = setTimeout(searchManga, 300);
+    return () => clearTimeout(timeoutId);
+  }, [query]);
+
+  return (
+    <div ref={searchRef} className="relative flex-1 max-w-xl mx-4">
+      <div className="flex items-center py-1">
+        <FontAwesomeIcon 
+          icon={faSearch} 
+          className="text-white"
+        />
+        <input
+          type="text"
+          value={query}
+          onChange={(e) => {
+            setQuery(e.target.value);
+            setIsOpen(true);
+          }}
+          onFocus={() => setIsOpen(true)}
+          placeholder="Rechercher"
+          className="appearance-none outline-none ml-2 pl-0 bg-transparent border-b border-white w-full placeholder:text-white text-white py-1 px-2 leading-tight transition-all duration-500 ease-in-out focus:placeholder:text-opacity-0 focus:border-opacity-0"
+        />
+      </div>
+
+      {isOpen && query.trim() && (
+        <div className="absolute w-full mt-2 bg-gray-800/95 backdrop-blur-sm rounded-lg shadow-lg border border-gray-700 max-h-96 overflow-y-auto z-50">
+          {loading ? (
+            <div className="p-4 text-center text-gray-400">Chargement...</div>
+          ) : results.length > 0 ? (
+            <div className="py-2">
+              <h3 className="px-4 py-2 text-sm font-semibold text-gray-400">
+                Mangas existants
+              </h3>
+              {results.map((manga) => (
+                <button
+                  key={manga.id}
+                  onClick={() => {
+                    onMangaClick(manga.slug);
+                    setIsOpen(false);
+                    setQuery('');
+                    setHasSearched(false);
+                  }}
+                  className="w-full px-4 py-2 flex items-center gap-3 hover:bg-gray-700/50 text-white"
+                >
+                  <img
+                    src={manga.imageUrl}
+                    alt={manga.title}
+                    className="w-10 h-14 object-cover rounded"
+                  />
+                  <div className="text-left">
+                    <div className="font-medium">{manga.title}</div>
+                    <div className="text-sm text-gray-400">{manga.author} ({manga.publicationYear})</div>
+                  </div>
+                </button>
+              ))}
+            </div>
+          ) : hasSearched && (
+            <div className="py-2">
+              <button
+                onClick={() => {
+                  onAddMangaClick(query);
+                  setIsOpen(false);
+                  setQuery('');
+                  setHasSearched(false);
+                }}
+                className="w-full px-4 py-2 flex items-center gap-2 text-green-400 hover:bg-gray-700/50"
+              >
+                <FontAwesomeIcon icon={faPlus} />
+                <span>Ajouter "{query}"</span>
+              </button>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

assets/react/app/presentation/components/Sidebar.jsx

@@ -0,0 +1,164 @@
+import React, { useState } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { 
+  faBook,
+  faPlus, 
+  faFileImport, 
+  faCompass, 
+  faExchangeAlt,
+  faCalendar,
+  faClockRotateLeft,
+  faCog,
+  faDesktop,
+  faChevronDown,
+  faChevronUp
+} from '@fortawesome/free-solid-svg-icons';
+
+export function Sidebar({ isOpen, onClose, onAddMangaClick }) {
+  const [expandedMenus, setExpandedMenus] = useState({
+    mangas: true, // Par défaut, le menu Mangas est ouvert
+    settings: false,
+    system: false
+  });
+
+  const menuItems = [
+    {
+      icon: faBook,
+      text: 'Mangas',
+      id: 'mangas',
+      subItems: [
+        { icon: faPlus, text: 'Ajouter un nouveau', onClick: () => onAddMangaClick() },
+        { icon: faFileImport, text: 'Import bibliothèque', href: '#' },
+        { icon: faCompass, text: 'Découvrir', href: '#' },
+      ]
+    },
+    {
+      icon: faExchangeAlt,
+      text: 'Convertir CBR en CBZ',
+      href: '#'
+    },
+    {
+      icon: faCalendar,
+      text: 'Calendrier',
+      href: '#'
+    },
+    {
+      icon: faClockRotateLeft,
+      text: 'Activité',
+      href: '#',
+      badge: '3'
+    },
+    {
+      icon: faCog,
+      text: 'Paramètres',
+      id: 'settings',
+      subItems: [
+        { text: 'Général', href: '#' },
+        { text: 'Dossiers', href: '#' },
+        { text: 'Scrappers', href: '#' },
+        { text: 'UI', href: '#' }
+      ]
+    },
+    {
+      icon: faDesktop,
+      text: 'Système',
+      id: 'system',
+      subItems: [
+        { text: 'Status', href: '#' },
+        { text: 'Backup', href: '#' },
+        { text: 'Logs', href: '#' },
+        { text: 'Updates', href: '#' }
+      ]
+    },
+  ];
+
+  const toggleMenu = (menuId) => {
+    setExpandedMenus(prev => ({
+      ...prev,
+      [menuId]: !prev[menuId]
+    }));
+  };
+
+  const MenuItem = ({ item }) => {
+    const hasSubItems = item.subItems && item.subItems.length > 0;
+    const isExpanded = item.id && expandedMenus[item.id];
+    const isActive = false; // À implémenter avec un vrai système de routing
+    
+    return (
+      <div className={`border-l-4 ${isActive ? 'border-green-600' : 'border-transparent'}`}>
+        <button
+          onClick={() => {
+            if (hasSubItems) {
+              toggleMenu(item.id);
+            } else if (item.onClick) {
+              item.onClick();
+            } else if (item.href) {
+              window.location.href = item.href;
+            }
+          }}
+          className={`
+            w-full text-left pl-4 py-2 flex items-center justify-between
+            ${isActive ? 'text-green-600 bg-gray-800' : 'text-white hover:bg-gray-700'}
+            transition-colors duration-150
+          `}
+        >
+          <div className="flex items-center space-x-3">
+            <FontAwesomeIcon icon={item.icon} className="w-5 h-5" />
+            <span>{item.text}</span>
+          </div>
+          {hasSubItems ? (
+            <FontAwesomeIcon 
+              icon={isExpanded ? faChevronUp : faChevronDown} 
+              className="w-4 h-4 mr-4"
+            />
+          ) : item.badge ? (
+            <span className="bg-green-600 text-white text-xs px-2 py-1 rounded mr-4">
+              {item.badge}
+            </span>
+          ) : null}
+        </button>
+        
+        {hasSubItems && isExpanded && (
+          <div className="ml-8 mt-2 space-y-2">
+            {item.subItems.map((subItem, index) => (
+              <a
+                key={index}
+                href={subItem.href}
+                onClick={(e) => {
+                  e.preventDefault();
+                  if (subItem.onClick) {
+                    subItem.onClick();
+                  } else if (subItem.href !== '#') {
+                    window.location.href = subItem.href;
+                  }
+                }}
+                className="block py-2 text-gray-300 hover:text-green-600 transition-colors duration-150"
+              >
+                {subItem.icon && (
+                  <FontAwesomeIcon icon={subItem.icon} className="w-4 h-4 mr-2" />
+                )}
+                {subItem.text}
+              </a>
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <nav className={`
+      w-60 bg-gray-600 h-full overflow-y-auto fixed left-0 top-16 transform transition-transform duration-200 ease-in-out z-40
+      ${isOpen ? 'translate-x-0' : '-translate-x-full'}
+      md:translate-x-0
+    `}>
+      <div className="py-4">
+        <div className="space-y-1">
+          {menuItems.map((item, index) => (
+            <MenuItem key={index} item={item} />
+          ))}
+        </div>
+      </div>
+    </nav>
+  );
+}

assets/react/app/presentation/components/Toolbar/Toolbar.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { ToolbarButton } from './ToolbarButton';
+
+export function Toolbar({ 
+  leftSection = [], 
+  centerSection = [], 
+  rightSection = [],
+  className = ''
+}) {
+  const renderSection = (items) => (
+    <div className="flex items-center gap-2">
+      {items.map((item, index) => (
+        <ToolbarButton key={index} {...item} />
+      ))}
+    </div>
+  );
+
+  return (
+    <div className={`bg-gray-800 shadow-sm border-b border-gray-700 ${className}`}>
+      <div className="container mx-auto px-4">
+        <div className="h-14 flex items-center justify-between">
+          {renderSection(leftSection)}
+          {renderSection(centerSection)}
+          {renderSection(rightSection)}
+        </div>
+      </div>
+    </div>
+  );
+}

assets/react/app/presentation/components/Toolbar/ToolbarButton.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+export function ToolbarButton({ icon, label, onClick, active = false }) {
+  return (
+    <button
+      onClick={onClick}
+      className={`
+        flex items-center gap-2 px-4 py-2 rounded-lg transition-colors
+        ${active 
+          ? 'bg-green-600 text-white' 
+          : 'text-gray-300 hover:text-green-600'
+        }
+      `}
+    >
+      <FontAwesomeIcon icon={icon} />
+      {label && <span>{label}</span>}
+    </button>
+  );
+}

assets/react/app/presentation/pages/AddMangaPage.jsx

@@ -0,0 +1,185 @@
+import React, { useState, useEffect } from 'react';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import { Layout } from '../components/Layout/Layout';
+import { Toolbar } from '../components/Toolbar/Toolbar';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faArrowLeft, faSearch, faStar } from '@fortawesome/free-solid-svg-icons';
+import { MockMangaRepository } from '../../infrastructure/api/mockMangaRepository';
+import { SearchMangas } from '../../application/useCases/searchMangas';
+
+const mangaRepository = new MockMangaRepository();
+const searchMangas = new SearchMangas(mangaRepository);
+
+export function AddMangaPage() {
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const initialQuery = searchParams.get('q') || '';
+
+  const [query, setQuery] = useState(initialQuery);
+  const [results, setResults] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [selectedManga, setSelectedManga] = useState(null);
+
+  useEffect(() => {
+    if (initialQuery) {
+      handleSearch(initialQuery);
+    }
+  }, [initialQuery]);
+
+  const handleSearch = async (searchQuery) => {
+    if (!searchQuery.trim()) {
+      setResults([]);
+      return;
+    }
+
+    setLoading(true);
+    try {
+      const searchResults = await searchMangas.execute(searchQuery);
+      setResults(searchResults);
+    } catch (error) {
+      console.error('Search error:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleMangaClick = (slug) => {
+    navigate(`/manga/${slug}`);
+  };
+
+  const handleAddMangaClick = (query = '') => {
+    navigate(`/add${query ? `?q=${encodeURIComponent(query)}` : ''}`);
+  };
+
+  const toolbarConfig = {
+    leftSection: [
+      { icon: faArrowLeft, onClick: () => navigate(-1) }
+    ]
+  };
+
+  return (
+    <Layout onMangaClick={handleMangaClick} onAddMangaClick={handleAddMangaClick}>
+      <Toolbar {...toolbarConfig} className="sticky top-16 z-10" />
+      
+      <div className="container mx-auto px-4 py-6">
+        <h1 className="text-2xl font-bold mb-6">Ajouter un manga</h1>
+        
+        <div className="bg-white rounded-lg shadow-sm p-6">
+          <div className="max-w-3xl mx-auto">
+            <div className="relative">
+              <input
+                type="text"
+                value={query}
+                onChange={(e) => {
+                  setQuery(e.target.value);
+                  handleSearch(e.target.value);
+                }}
+                placeholder="Rechercher un manga..."
+                className="w-full px-4 py-2 pl-10 border-b border-gray-300 focus:border-green-600 outline-none transition-colors"
+              />
+              <FontAwesomeIcon 
+                icon={faSearch} 
+                className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"
+              />
+            </div>
+
+            {loading ? (
+              <div className="text-center py-8">
+                <div className="animate-spin rounded-full h-8 w-8 border-2 border-green-600 border-t-transparent mx-auto"></div>
+              </div>
+            ) : results.length > 0 ? (
+              <div className="space-y-4 mt-6">
+                {results.map((manga) => (
+                  <div
+                    key={manga.id}
+                    onClick={() => setSelectedManga(manga)}
+                    className="flex gap-4 p-4 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors cursor-pointer"
+                  >
+                    <img
+                      src={manga.imageUrl}
+                      alt={manga.title}
+                      className="w-24 h-36 object-cover rounded-lg shadow-sm"
+                    />
+                    <div className="flex-1">
+                      <div className="flex items-start justify-between">
+                        <div>
+                          <h3 className="text-lg font-semibold text-gray-900">{manga.title}</h3>
+                          <p className="text-gray-600">{manga.author}</p>
+                        </div>
+                        <div className="flex items-center text-yellow-500">
+                          <FontAwesomeIcon icon={faStar} className="mr-1" />
+                          <span>{manga.rating}</span>
+                        </div>
+                      </div>
+                      <div className="mt-2">
+                        <span className="text-sm text-gray-500">
+                          {manga.publicationYear} • {manga.status}
+                        </span>
+                      </div>
+                      <div className="mt-2 flex flex-wrap gap-2">
+                        {manga.genres.map((genre, index) => (
+                          <span
+                            key={index}
+                            className="px-2 py-1 text-xs bg-green-100 text-green-800 rounded-full"
+                          >
+                            {genre}
+                          </span>
+                        ))}
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            ) : query && !loading && (
+              <div className="text-center py-8 text-gray-500">
+                Aucun résultat trouvé pour "{query}"
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Modal de confirmation */}
+      {selectedManga && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+          <div className="bg-white rounded-lg shadow-xl max-w-lg w-full mx-4">
+            <div className="p-6">
+              <h2 className="text-xl font-semibold mb-4">Ajouter à la bibliothèque</h2>
+              <div className="flex gap-4 mb-4">
+                <img
+                  src={selectedManga.imageUrl}
+                  alt={selectedManga.title}
+                  className="w-24 h-36 object-cover rounded"
+                />
+                <div>
+                  <h3 className="font-semibold">{selectedManga.title}</h3>
+                  <p className="text-gray-600">{selectedManga.author}</p>
+                  <p className="text-sm text-gray-500 mt-2">
+                    {selectedManga.genres.join(', ')}
+                  </p>
+                </div>
+              </div>
+              <div className="flex justify-end gap-3">
+                <button
+                  onClick={() => setSelectedManga(null)}
+                  className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
+                >
+                  Annuler
+                </button>
+                <button
+                  onClick={() => {
+                    handleMangaClick(selectedManga.slug);
+                    setSelectedManga(null);
+                  }}
+                  className="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors"
+                >
+                  Ajouter
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </Layout>
+  );
+}

assets/react/app/presentation/pages/HomePage.jsx

@@ -0,0 +1,80 @@
+import React, { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { MangaGrid } from '../components/MangaGrid.jsx';
+import { Layout } from '../components/Layout/Layout.jsx';
+import { Toolbar } from '../components/Toolbar/Toolbar.jsx';
+import { MockMangaRepository } from '../../infrastructure/api/mockMangaRepository.js';
+import { GetMangaCollection } from '../../application/useCases/getMangaCollection.js';
+import { 
+  faRefresh, 
+  faSearch,
+  faGear,
+  faEye,
+  faSort,
+  faFilter
+} from '@fortawesome/free-solid-svg-icons';
+
+const mangaRepository = new MockMangaRepository();
+const getMangaCollection = new GetMangaCollection(mangaRepository);
+
+export function HomePage() {
+  const navigate = useNavigate();
+  const [mangaCollection, setMangaCollection] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  const handleRefresh = async () => {
+    setLoading(true);
+    try {
+      const collection = await getMangaCollection.execute(1);
+      setMangaCollection(collection);
+    } catch (err) {
+      setError('Failed to load mangas');
+      console.error(err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    handleRefresh();
+  }, []);
+
+  const handleMangaClick = (slug) => {
+    navigate(`/manga/${slug}`);
+  };
+
+  const handleAddMangaClick = (query = '') => {
+    navigate(`/add${query ? `?q=${encodeURIComponent(query)}` : ''}`);
+  };
+
+  const toolbarConfig = {
+    leftSection: [
+      { icon: faRefresh, label: 'Refresh', onClick: handleRefresh },
+      { icon: faSearch, label: 'Search', onClick: () => {} }
+    ],
+    rightSection: [
+      { icon: faGear, onClick: () => {} },
+      { icon: faEye, onClick: () => {} },
+      { icon: faSort, onClick: () => {} },
+      { icon: faFilter, onClick: () => {} }
+    ]
+  };
+
+  if (loading) {
+    return <div className="flex justify-center items-center h-screen">Loading...</div>;
+  }
+
+  if (error) {
+    return <div className="text-red-500 text-center p-4">{error}</div>;
+  }
+
+  return (
+    <Layout onMangaClick={handleMangaClick} onAddMangaClick={handleAddMangaClick}>
+      <Toolbar {...toolbarConfig} className="sticky top-16 z-10" />
+      <div className="container mx-auto px-4">
+        <MangaGrid mangas={mangaCollection.items} onMangaClick={handleMangaClick} />
+      </div>
+    </Layout>
+  );
+}

assets/react/app/presentation/pages/MangaDetailPage.jsx

@@ -0,0 +1,183 @@
+import React, { useEffect, useState } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { MockMangaRepository } from '../../infrastructure/api/mockMangaRepository.js';
+import { GetMangaDetail } from '../../application/useCases/getMangaDetail.js';
+import { Layout } from '../components/Layout/Layout.jsx';
+import { Toolbar } from '../components/Toolbar/Toolbar.jsx';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { 
+  faStar, 
+  faDownload, 
+  faEye, 
+  faArrowLeft,
+  faRefresh,
+  faBookmark,
+  faShare
+} from '@fortawesome/free-solid-svg-icons';
+
+const mangaRepository = new MockMangaRepository();
+const getMangaDetail = new GetMangaDetail(mangaRepository);
+
+export function MangaDetailPage() {
+  const { slug } = useParams();
+  const navigate = useNavigate();
+  const [manga, setManga] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  const handleRefresh = async () => {
+    setLoading(true);
+    try {
+      const mangaDetail = await getMangaDetail.execute(slug);
+      setManga(mangaDetail);
+    } catch (err) {
+      setError('Failed to load manga details');
+      console.error(err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    handleRefresh();
+  }, [slug]);
+
+  const handleMangaClick = (mangaSlug) => {
+    navigate(`/manga/${mangaSlug}`);
+  };
+
+  const handleAddMangaClick = (query = '') => {
+    navigate(`/add${query ? `?q=${encodeURIComponent(query)}` : ''}`);
+  };
+
+  const toolbarConfig = {
+    leftSection: [
+      { icon: faArrowLeft, onClick: () => navigate(-1) },
+      { icon: faRefresh, onClick: handleRefresh }
+    ],
+    rightSection: [
+      { icon: faBookmark, onClick: () => {} },
+      { icon: faShare, onClick: () => {} },
+      { icon: faDownload, onClick: () => {} }
+    ]
+  };
+
+  if (loading) {
+    return <div className="flex justify-center items-center h-screen">Loading...</div>;
+  }
+
+  if (error) {
+    return <div className="text-red-500 text-center p-4">{error}</div>;
+  }
+
+  return (
+    <Layout onMangaClick={handleMangaClick} onAddMangaClick={handleAddMangaClick}>
+      <Toolbar {...toolbarConfig} className="sticky top-16 z-10" />
+
+      {/* Hero section with manga info */}
+      <div className="relative h-[400px]">
+        <div className="absolute inset-0">
+          <img 
+            src={manga.imageUrl} 
+            alt={manga.title}
+            className="w-full h-full object-cover"
+          />
+          <div className="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent" />
+        </div>
+        
+        <div className="relative h-full container mx-auto px-4 flex items-end pb-8">
+          <div className="text-white">
+            <div className="flex items-center gap-4 mb-2">
+              <h1 className="text-4xl font-bold">{manga.title}</h1>
+              <span className="px-2 py-1 bg-green-500 rounded-full text-sm">
+                {manga.status}
+              </span>
+            </div>
+            
+            <div className="flex items-center gap-6 mb-4">
+              <div className="flex items-center">
+                <FontAwesomeIcon icon={faStar} className="text-yellow-400 mr-2" />
+                <span>{manga.rating}</span>
+              </div>
+              <span>{manga.publicationYear}</span>
+              <span>{manga.author}</span>
+            </div>
+            
+            <div className="flex flex-wrap gap-2 mb-4">
+              {manga.genres.map((genre, index) => (
+                <span 
+                  key={index}
+                  className="px-3 py-1 bg-gray-700/50 rounded-full text-sm"
+                >
+                  {genre}
+                </span>
+              ))}
+            </div>
+            
+            <p className="max-w-3xl text-gray-200">
+              {manga.description}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Chapters section */}
+      <div className="container mx-auto px-4 py-8">
+        {Array.from(manga.chapters.entries()).map(([volume, chapters]) => (
+          <div key={volume} className="mb-8">
+            <h2 className="text-xl font-semibold mb-4">
+              Volume {volume || 'Unknown'}
+              <span className="text-sm text-gray-500 ml-2">
+                ({chapters.length} chapters)
+              </span>
+            </h2>
+            
+            <div className="bg-white rounded-lg shadow overflow-hidden">
+              <table className="w-full">
+                <thead className="bg-gray-50">
+                  <tr>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                      #
+                    </th>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                      Title
+                    </th>
+                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                      Added
+                    </th>
+                    <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
+                      Actions
+                    </th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-gray-200">
+                  {chapters.map((chapter) => (
+                    <tr key={chapter.id} className="hover:bg-gray-50">
+                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
+                        {chapter.number}
+                      </td>
+                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
+                        {chapter.title}
+                      </td>
+                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                        {new Date(chapter.createdAt).toLocaleDateString()}
+                      </td>
+                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 text-right">
+                        <button className="text-gray-400 hover:text-gray-600 mx-2">
+                          <FontAwesomeIcon icon={faDownload} />
+                        </button>
+                        <button className="text-gray-400 hover:text-gray-600 mx-2">
+                          <FontAwesomeIcon icon={faEye} />
+                        </button>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        ))}
+      </div>
+    </Layout>
+  );
+}

composer.json

@@ -47,6 +47,7 @@
         "symfony/stimulus-bundle": "^2.17",
         "symfony/twig-bundle": "7.0.*",
         "symfony/ux-live-component": "^2.17",
+        "symfony/ux-react": "^2.23",
         "symfony/ux-turbo": "^2.18",
         "symfony/validator": "7.0.*",
         "symfony/webpack-encore-bundle": "^2.1",

composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "e84863f24aa342f98beebd3cd364f698",
+    "content-hash": "e2253575e3f4a0344fe2ff59ac54aad0",
     "packages": [
         {
             "name": "api-platform/core",
@@ -8233,6 +8233,82 @@
             ],
             "time": "2024-04-22T18:53:03+00:00"
         },
+        {
+            "name": "symfony/ux-react",
+            "version": "v2.23.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/ux-react.git",
+                "reference": "9ca27a52c536994f48005ee70e2208d0769b2ae8"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/ux-react/zipball/9ca27a52c536994f48005ee70e2208d0769b2ae8",
+                "reference": "9ca27a52c536994f48005ee70e2208d0769b2ae8",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.1",
+                "symfony/stimulus-bundle": "^2.9.1"
+            },
+            "require-dev": {
+                "symfony/asset-mapper": "^6.3|^7.0",
+                "symfony/finder": "^5.4|^6.0|^7.0",
+                "symfony/framework-bundle": "^5.4|^6.0|^7.0",
+                "symfony/phpunit-bridge": "^5.4|^6.0|^7.0",
+                "symfony/twig-bundle": "^5.4|^6.0|^7.0",
+                "symfony/var-dumper": "^5.4|^6.0|^7.0"
+            },
+            "type": "symfony-bundle",
+            "extra": {
+                "thanks": {
+                    "url": "https://github.com/symfony/ux",
+                    "name": "symfony/ux"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Symfony\\UX\\React\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Titouan Galopin",
+                    "email": "galopintitouan@gmail.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Integration of React in Symfony",
+            "homepage": "https://symfony.com",
+            "keywords": [
+                "symfony-ux"
+            ],
+            "support": {
+                "source": "https://github.com/symfony/ux-react/tree/v2.23.0"
+            },
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2024-12-05T14:25:02+00:00"
+        },
         {
             "name": "symfony/ux-turbo",
             "version": "v2.18.0",

config/bundles.php

@@ -21,4 +21,5 @@ return [
     Symfony\Bundle\MercureBundle\MercureBundle::class => ['all' => true],
     Symfony\UX\Turbo\TurboBundle::class => ['all' => true],
     DAMA\DoctrineTestBundle\DAMADoctrineTestBundle::class => ['test' => true],
+    Symfony\UX\React\ReactBundle::class => ['all' => true],
 ];

config/routes.yaml

@@ -3,3 +3,9 @@ controllers:
         path: ../src/Controller/
         namespace: App\Controller
     type: attribute
+
+react_app:
+    path: /react
+    controller: Symfony\Bundle\FrameworkBundle\Controller\TemplateController
+    defaults:
+        template: 'react/index.html.twig'

package.json

@@ -2,14 +2,18 @@
     "devDependencies": {
         "@babel/core": "^7.17.0",
         "@babel/preset-env": "^7.16.0",
+        "@babel/preset-react": "^7.26.3",
         "@hotwired/stimulus": "^3.0.0",
         "@hotwired/turbo": "^7.1.1 || ^8.0",
         "@symfony/stimulus-bridge": "^3.2.0",
         "@symfony/ux-live-component": "file:vendor/symfony/ux-live-component/assets",
+        "@symfony/ux-react": "file:vendor/symfony/ux-react/assets",
         "@symfony/ux-turbo": "file:vendor/symfony/ux-turbo/assets",
         "@symfony/webpack-encore": "^4.0.0",
         "core-js": "^3.23.0",
         "daisyui": "^4.4.2",
+        "react": "^18.0",
+        "react-dom": "^18.0",
         "regenerator-runtime": "^0.13.9",
         "sass": "^1.59.3",
         "sass-loader": "^13.2.0",
@@ -28,11 +32,15 @@
     },
     "dependencies": {
         "@fortawesome/fontawesome-free": "^6.5.2",
+        "@fortawesome/fontawesome-svg-core": "^6.7.2",
+        "@fortawesome/free-solid-svg-icons": "^6.7.2",
+        "@fortawesome/react-fontawesome": "^0.2.2",
         "alpinejs": "^3.13.3",
         "autoprefixer": "^10.4.14",
         "bootstrap": "^5.3.3",
         "postcss-loader": "^7.1.0",
         "puppeteer": "^22.10.0",
+        "react-router-dom": "^7.1.5",
         "sortablejs": "^1.15.2",
         "tailwindcss": "^3.2.7"
     }

symfony.lock

@@ -279,6 +279,18 @@
             "config/routes/ux_live_component.yaml"
         ]
     },
+    "symfony/ux-react": {
+        "version": "2.23",
+        "recipe": {
+            "repo": "github.com/symfony/recipes",
+            "branch": "main",
+            "version": "2.9",
+            "ref": "e970076b31d602ae6e2106cf91a82c7e1f7ddff2"
+        },
+        "files": [
+            "assets/react/controllers/Hello.jsx"
+        ]
+    },
     "symfony/ux-turbo": {
         "version": "v2.18.0"
     },

tailwind.config.js

@@ -1,7 +1,9 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-      './templates/**/*.html.twig'
+      './templates/**/*.html.twig',
+      './assets/react/**/*.{js,jsx}',
+      './assets/**/*.{js,jsx}'
   ],
   theme: {
     extend: {},

templates/react/index.html.twig

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>React App</title>
+        {{ encore_entry_link_tags('react-app') }}
+    </head>
+    <body>
+        <div id="react-app"></div>
+        {{ encore_entry_script_tags('react-app') }}
+    </body>
+</html>

webpack.config.js

@@ -21,6 +21,7 @@ Encore
      * and one CSS file (e.g. app.css) if your JavaScript imports CSS.
      */
     .addEntry('app', './assets/app.js')
+    .addEntry('react-app', './assets/react/app/index.jsx')
     // .addEntry('alpine', 'alpinejs')
 
     // enables the Symfony UX Stimulus bridge (used in assets/bootstrap.js)
@@ -29,6 +30,8 @@ Encore
     // When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
     .splitEntryChunks()
 
+    .enableReactPreset()
+
     // will require an extra script tag for runtime.js
     // but, you probably want this, unless you're building a single-page app
     .enableSingleRuntimeChunk()