[App/E2E] Add examples listing on homepage, improve example page

apps/e2e/src/Controller/AutocompleteController.php

@@ -12,56 +12,4 @@
 #[Route('/ux-autocomplete')]
 final class AutocompleteController extends AbstractController
 {
-    public function __construct(private readonly LoggerInterface $logger)
-    {
-    }
-
-    #[Route('/without-options')]
-    public function withoutOptions(ChartBuilderInterface $chartBuilder): Response
-    {
-        $this->logger->critical('qsd');
-        $chart = $chartBuilder->createChart(Chart::TYPE_LINE);
-
-        $chart->setData([
-            'labels' => ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-            'datasets' => [
-                [
-                    'label' => 'My First dataset',
-                    'backgroundColor' => 'rgb(255, 99, 132)',
-                    'borderColor' => 'rgb(255, 99, 132)',
-                    'data' => [0, 10, 5, 2, 20, 30, 45],
-                ],
-            ],
-        ]);
-
-        return $this->render('ux_autocomplete/index.html.twig', [
-            'chart' => $chart,
-        ]);
-    }
-
-    #[Route('/with-options')]
-    public function withOptions(ChartBuilderInterface $chartBuilder): Response
-    {
-        $chart = $chartBuilder->createChart(Chart::TYPE_LINE);
-
-        $chart->setData([
-            'labels' => ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-            'datasets' => [
-                [
-                    'label' => 'My First dataset',
-                    'backgroundColor' => 'rgb(255, 99, 132)',
-                    'borderColor' => 'rgb(255, 99, 132)',
-                    'data' => [0, 10, 5, 2, 20, 30, 45],
-                ],
-            ],
-        ]);
-
-        $chart->setOptions([
-            'showLines' => false,
-        ]);
-
-        return $this->render('ux_autocomplete/index.html.twig', [
-            'chart' => $chart,
-        ]);
-    }
 }

apps/e2e/src/Controller/ChartjsController.php

@@ -5,15 +5,57 @@
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
 use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\Routing\Attribute\Route;
+use Symfony\UX\Chartjs\Builder\ChartBuilderInterface;
+use Symfony\UX\Chartjs\Model\Chart;
 
 #[Route('/ux-chartjs')]
 final class ChartjsController extends AbstractController
 {
-    #[Route('/')]
-    public function index(): Response
+    #[Route('/without-options')]
+    public function withoutOptions(ChartBuilderInterface $chartBuilder): Response
     {
+        $chart = $chartBuilder->createChart(Chart::TYPE_LINE);
+
+        $chart->setData([
+            'labels' => ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+            'datasets' => [
+                [
+                    'label' => 'My First dataset',
+                    'backgroundColor' => 'rgb(255, 99, 132)',
+                    'borderColor' => 'rgb(255, 99, 132)',
+                    'data' => [0, 10, 5, 2, 20, 30, 45],
+                ],
+            ],
+        ]);
+
+        return $this->render('ux_chartjs/index.html.twig', [
+            'chart' => $chart,
+        ]);
+    }
+
+    #[Route('/with-options')]
+    public function withOptions(ChartBuilderInterface $chartBuilder): Response
+    {
+        $chart = $chartBuilder->createChart(Chart::TYPE_LINE);
+
+        $chart->setData([
+            'labels' => ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+            'datasets' => [
+                [
+                    'label' => 'My First dataset',
+                    'backgroundColor' => 'rgb(255, 99, 132)',
+                    'borderColor' => 'rgb(255, 99, 132)',
+                    'data' => [0, 10, 5, 2, 20, 30, 45],
+                ],
+            ],
+        ]);
+
+        $chart->setOptions([
+            'showLines' => false,
+        ]);
+
         return $this->render('ux_chartjs/index.html.twig', [
-            'controller_name' => 'ChartjsController',
+            'chart' => $chart,
         ]);
     }
 }

apps/e2e/src/Controller/HomeController.php

@@ -2,15 +2,18 @@
 
 namespace App\Controller;
 
+use App\Repository\ExampleRepository;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
 use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\Routing\Attribute\Route;
 
 final class HomeController extends AbstractController
 {
     #[Route('/', name: 'app_home')]
-    public function index(): Response
+    public function index(ExampleRepository $exampleRepository): Response
     {
-        return $this->render('home.html.twig');
+        return $this->render('home.html.twig', [
+            'examples_by_package' => $exampleRepository->findAllByPackage(),
+        ]);
     }
 }

apps/e2e/src/Controller/MapController.php

@@ -143,7 +143,7 @@ public function withPolygons(#[MapQueryParameter] MapRenderer $renderer): Respon
                         new Point(48.856613, 2.352222), // Paris
                     ],
                 ],
-                infoWindow: new InfoWindow(content: 'A weird shape on the France'),
+                infoWindow: new InfoWindow(content: 'A weird shape on France'),
             ))
 
             ->addPolygon(new Polygon(

apps/e2e/src/EventListener/ResolveExampleForUrlListener.php

@@ -0,0 +1,36 @@
+<?php
+
+/*
+ * This file is part of the Symfony package.
+ *
+ * (c) Fabien Potencier <[email protected]>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+namespace App\EventListener;
+
+use App\Repository\ExampleRepository;
+use Symfony\Component\EventDispatcher\Attribute\AsEventListener;
+use Symfony\Component\HttpKernel\Event\RequestEvent;
+
+#[AsEventListener]
+class ResolveExampleForUrlListener
+{
+    public function __construct(
+        private ExampleRepository $exampleRepository
+    )
+    {
+    }
+
+    public function __invoke(RequestEvent $event): void
+    {
+        if (!$event->isMainRequest()) {
+            return;
+        }
+
+        $example = $this->exampleRepository->findOneByUrl($event->getRequest()->getRequestUri());
+        $event->getRequest()->attributes->set('_example', $example);
+    }
+}

apps/e2e/src/Example.php

@@ -0,0 +1,23 @@
+<?php
+
+/*
+ * This file is part of the Symfony package.
+ *
+ * (c) Fabien Potencier <[email protected]>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+namespace App;
+
+final readonly class Example
+{
+    public function __construct(
+        public UxPackage $uxPackage,
+        public string $name,
+        public string $description,
+        public string $url
+    ) {
+    }
+}

apps/e2e/src/Repository/ExampleRepository.php

@@ -0,0 +1,79 @@
+<?php
+
+/*
+ * This file is part of the Symfony package.
+ *
+ * (c) Fabien Potencier <[email protected]>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+namespace App\Repository;
+
+use App\Example;
+use App\UxPackage;
+
+class ExampleRepository
+{
+    /**
+     * @var list<Example>
+     */
+    private array $examples;
+
+    public function __construct() {
+        $this->examples = [
+            new Example(UxPackage::Map, 'Basic map (Leaflet)', 'A basic map centered on Paris with zoom level 12', '/ux-map/basic?renderer=leaflet'),
+            new Example(UxPackage::Map, 'Basic map (Google)', 'A basic map centered on Paris with zoom level 12', '/ux-map/basic?renderer=google'),
+            new Example(UxPackage::Map, 'With markers, fit bounds (Leaflet)', 'A map with 2 markers, and the bounds are automatically adjusted to fit both markers', '/ux-map/with-markers-and-fit-bounds-to-markers?renderer=leaflet'),
+            new Example(UxPackage::Map, 'With markers, fit bounds (Google)', 'A map with 2 markers, and the bounds are automatically adjusted to fit both markers', '/ux-map/with-markers-and-fit-bounds-to-markers?renderer=google'),
+            new Example(UxPackage::Map, 'With markers, zoomed on Paris (Leaflet)', 'A map with 2 markers (Paris and Lyon), zoomed on Paris', '/ux-map/with-markers-and-zoomed-on-paris?renderer=leaflet'),
+            new Example(UxPackage::Map, 'With markers, zoomed on Paris (Google)', 'A map with 2 markers (Paris and Lyon), zoomed on Paris', '/ux-map/with-markers-and-zoomed-on-paris?renderer=google'),
+            new Example(UxPackage::Map, 'With markers and info windows (Leaflet)', 'A map with 2 markers (Paris and Lyon), each with an info window', '/ux-map/with-markers-and-info-windows?renderer=leaflet'),
+            new Example(UxPackage::Map, 'With markers and info windows (Google)', 'A map with 2 markers (Paris and Lyon), each with an info window', '/ux-map/with-markers-and-info-windows?renderer=google'),
+            new Example(UxPackage::Map, 'With custom icon markers (Leaflet)', 'A map with 3 markers (Paris, Lyon, Bordeaux), each with a custom icon', '/ux-map/with-markers-and-custom-icons?renderer=leaflet'),
+            new Example(UxPackage::Map, 'With custom icon markers (Google)', 'A map with 3 markers (Paris, Lyon, Bordeaux), each with a custom icon', '/ux-map/with-markers-and-custom-icons?renderer=google'),
+            new Example(UxPackage::Map, 'With polygons (Leaflet)', 'A map with two polygons, one that covers main cities in Italy, and one weird shape on France', '/ux-map/with-polygons?renderer=leaflet'),
+            new Example(UxPackage::Map, 'With polygons (Google)', 'A map with two polygons, one that covers main cities in Italy, and one weird shape on France', '/ux-map/with-polygons?renderer=google'),
+            new Example(UxPackage::Map, 'With polylines (Leaflet)', 'A map with two polylines: one through Paris/Lyon/Marseille/Bordeaux, and the other one through Rennes/Nantes/Tours', '/ux-map/with-polylines?renderer=leaflet'),
+            new Example(UxPackage::Map, 'With polylines (Google)', 'A map with two polylines: one through Paris/Lyon/Marseille/Bordeaux, and the other one through Rennes/Nantes/Tours', '/ux-map/with-polylines?renderer=google'),
+            new Example(UxPackage::Map, 'With circles (Leaflet)', 'A map with two circles: one centered on Paris, the other on Lyon', '/ux-map/with-circles?renderer=leaflet'),
+            new Example(UxPackage::Map, 'With circles (Google)', 'A map with two circles: one centered on Paris, the other on Lyon', '/ux-map/with-circles?renderer=google'),
+            new Example(UxPackage::Map, 'With rectangles (Leaflet)', 'A map with two rectangles: one from Paris to Lille, the other from Lyon to Bordeaux', '/ux-map/with-rectangles?renderer=leaflet'),
+            new Example(UxPackage::Map, 'With rectangles (Google)', 'A map with two rectangles: one from Paris to Lille, the other from Lyon to Bordeaux', '/ux-map/with-rectangles?renderer=google'),
+            new Example(UxPackage::React, 'Basic React Component', 'A basic React component that displays a welcoming message', '/ux-react/'),
+            new Example(UxPackage::Svelte, 'Basic Svelte Component', 'A basic Svelte component that displays a welcoming message', '/ux-svelte/'),
+            new Example(UxPackage::Vue, 'Basic Vue Component', 'A basic Vue component that displays a welcoming message', '/ux-vue/'),
+        ];
+    }
+
+    /**
+     * @return list<Example>
+     */
+    public function findAll(): array
+    {
+        return $this->examples;
+    }
+
+    public function findAllByPackage(): array
+    {
+        $grouped = [];
+
+        foreach ($this->examples as $example) {
+            $grouped[$example->uxPackage->value][] = $example;
+        }
+
+        return $grouped;
+    }
+
+    public function findOneByUrl(string $url): ?Example
+    {
+        foreach ($this->examples as $example) {
+            if ($example->url === $url) {
+                return $example;
+            }
+        }
+
+        return null;
+    }
+}

apps/e2e/src/UxPackage.php

@@ -0,0 +1,53 @@
+<?php
+
+/*
+ * This file is part of the Symfony package.
+ *
+ * (c) Fabien Potencier <[email protected]>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+namespace App;
+
+enum UxPackage: string
+{
+    case Autocomplete = 'UX Autocomplete';
+    case ChartJs = 'UX Chart';
+    case Cropperjs = 'UX Cropperjs';
+    case Icons = 'UX Icons';
+    //case LazyImage = 'UX LazyImage'; // deprecated/removed
+    case Map = 'UX Map';
+    case Notify = 'UX Notify';
+    case React = 'UX React';
+    case StimulusBundle = 'UX StimulusBundle';
+    case Svelte = 'UX Svelte';
+    // case Swup; // deprecated/removed
+    // case TogglePassword; // deprecated/removed
+    // case Toolkit; // not subject to E2E
+    case Translator = 'UX Translator';
+    case Turbo = 'UX Turbo';
+    case TwigComponent = 'UX TwigComponent';
+    // case Typed; // deprecated
+    case Vue = 'UX Vue';
+
+    public function getDocumentationUrl(): string
+    {
+        return match($this) {
+            self::Autocomplete => 'https://ux.symfony.com/autocomplete',
+            self::ChartJs => 'https://ux.symfony.com/chartjs',
+            self::Cropperjs => 'https://ux.symfony.com/cropperjs',
+            self::Icons => 'https://ux.symfony.com/icons',
+            self::Map => 'https://ux.symfony.com/map',
+            self::Notify => 'https://ux.symfony.com/notify',
+            self::React => 'https://ux.symfony.com/react',
+            self::StimulusBundle => 'https://ux.symfony.com/stimulus',
+            self::Svelte => 'https://ux.symfony.com/svelte',
+            self::Translator => 'https://ux.symfony.com/translator',
+            self::Turbo => 'https://ux.symfony.com/turbo',
+            self::TwigComponent => 'https://ux.symfony.com/twig-component',
+            self::Vue => 'https://ux.symfony.com/vue',
+        };
+    }
+}

apps/e2e/templates/base.html.twig

@@ -16,6 +16,7 @@
             <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
                 <div class="container">
                     <a class="navbar-brand" href="{{ path('app_home') }}">E2E App</a>
+                    {% block navbar_brand_after %}{% endblock %}
                 </div>
             </nav>
 

apps/e2e/templates/example.html.twig

@@ -0,0 +1,22 @@
+{% extends 'base.html.twig' %}
+
+{% set example = app.request.attributes.get('_example') %}
+
+{% block title %}
+    {{ example.uxPackage.value }}: {{ example.name }}
+{% endblock %}
+
+{% block navbar_brand_after %}
+   <div class="navbar-collapse">
+       <span class="navbar-text">{{ example.uxPackage.value }}</span>
+   </div>
+{% endblock %}
+
+{% block main %}
+    <div class="container mt-4">
+        <h1>{{ example.name }}</h1>
+        <p>{{ example.description }}</p>
+
+        {% block example %}{% endblock %}
+    </div>
+{% endblock %}