[Site] new facet menu demo WIP

Author: Nayte91

ux.symfony.com/src/Controller/Demo/LiveDemoController.php

@@ -93,6 +93,7 @@ public function invoice(LiveDemoRepository $liveDemoRepository, ?Invoice $invoic
     }
 
     #[Route('/{demo}', name: 'app_demo_live_component_demo')]
+    #[Route('/animalz', name: 'app_demo_live_component_animalz')]
     #[Route('/auto-validating-form', name: 'app_demo_live_component_auto_validating_form')]
     #[Route('/chartjs', name: 'app_demo_live_component_chartjs')]
     #[Route('/dependent-form-fields', name: 'app_demo_live_component_dependent_form_fields')]

ux.symfony.com/src/Enum/AnimalzType.php

@@ -0,0 +1,44 @@
+<?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.
+ */
+
+declare(strict_types=1);
+
+namespace App\Enum;
+
+enum AnimalzType: string
+{
+    case Normal = 'NORMAL';
+    case Water = 'WATER';
+    case Flying = 'FLYING';
+    case Bug = 'BUG';
+    case Fight = 'FIGHT';
+    case Dark = 'DARK';
+    case Poison = 'POISON';
+    case Grass = 'GRASS';
+    case Fairy = 'FAIRY';
+    case Fossil = 'FOSSIL';
+
+    public function getColor(): string
+    {
+        return match ($this) {
+            self::Normal => '#9fa19f',
+            self::Water => '#2980ef',
+            self::Flying => '#81b9ef',
+            self::Bug => '#91a119',
+            self::Fight => '#ff8100',
+            self::Dark => '#4f3f3d',
+            self::Poison => '#9141cb',
+            self::Grass => '#3fa129',
+            self::Fairy => '#ef70ef',
+            self::Fossil => '#5060e1',
+        };
+    }
+}

ux.symfony.com/src/Model/Animalz.php

@@ -0,0 +1,67 @@
+<?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\Model;
+
+use App\Enum\AnimalzType;
+
+final class Animalz
+{
+    /**
+     * @param list<string> $type
+     */
+    public function __construct(
+        private string $name,
+        private array $type,
+        private int $legs,
+        private string $description,
+    ) {
+    }
+
+    public function getName(): string
+    {
+        return $this->name;
+    }
+
+    /**
+     * @return list<string>
+     */
+    public function getType(): array
+    {
+        return $this->type;
+    }
+
+    public function hasType(string $type): bool
+    {
+        return \in_array($type, $this->type, true);
+    }
+
+    public function getLegs(): int
+    {
+        return $this->legs;
+    }
+
+    public function getDescription(): string
+    {
+        return $this->description;
+    }
+
+    /**
+     * @return list<string>
+     */
+    public function getTypeColors(): array
+    {
+        return array_map(
+            static fn (string $type): string => AnimalzType::tryFrom($type)?->getColor() ?? '#6c757d',
+            $this->type,
+        );
+    }
+}

ux.symfony.com/src/Service/AnimalzRepository.php

@@ -0,0 +1,94 @@
+<?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\Service;
+
+use App\Enum\AnimalzType;
+use App\Model\Animalz;
+
+class AnimalzRepository
+{
+    private const string DATA_FILE = __DIR__.'/data/animalz-properties.json';
+
+    /** @var list<Animalz>|null */
+    private ?array $zanimalz = null;
+
+    /**
+     * @return list<Animalz>
+     */
+    public function findAll(): array
+    {
+        return $this->zanimalz ??= $this->loadZanimalz();
+    }
+
+    /**
+     * @return list<Animalz>
+     */
+    public function findByNameAndTypeAndLegs(?string $name, ?AnimalzType $type, ?int $maxLegs): array
+    {
+        $zanimalz = $this->findAll();
+
+        if (null !== $name && '' !== $name) {
+            $zanimalz = array_filter(
+                $zanimalz,
+                fn (Animalz $animalz): bool => str_contains(
+                    strtolower($animalz->getName()),
+                    strtolower($name),
+                ),
+            );
+        }
+
+        if (null !== $type) {
+            $zanimalz = array_filter(
+                $zanimalz,
+                fn (Animalz $animalz): bool => $animalz->hasType($type->value),
+            );
+        }
+
+        if (null !== $maxLegs) {
+            $zanimalz = array_filter(
+                $zanimalz,
+                fn (Animalz $animalz): bool => $animalz->getLegs() <= $maxLegs,
+            );
+        }
+
+        $zanimalz = array_values($zanimalz);
+        usort($zanimalz, fn (Animalz $a, Animalz $b): int => $a->getName() <=> $b->getName());
+
+        return $zanimalz;
+    }
+
+    public function getMaxLegs(): int
+    {
+        $zanimalz = $this->findAll();
+
+        return max(array_map(fn (Animalz $a): int => $a->getLegs(), $zanimalz));
+    }
+
+    /**
+     * @return list<Animalz>
+     */
+    private function loadZanimalz(): array
+    {
+        $content = file_get_contents(self::DATA_FILE);
+
+        if (false === $content) {
+            return [];
+        }
+
+        $data = json_decode($content, true, 512, \JSON_THROW_ON_ERROR);
+
+        return array_map(
+            fn (array $item): Animalz => new Animalz($item['name'], $item['type'], $item['legs'], $item['description']),
+            $data,
+        );
+    }
+}

ux.symfony.com/src/Service/LiveDemoRepository.php

@@ -21,6 +21,19 @@ class LiveDemoRepository
     public function findAll(): array
     {
         return [
+            new LiveDemo(
+                identifier: 'animalz',
+                name: 'Facet Filtering',
+                description: 'Filter results based on a facet menu, with URL parameters.',
+                author: 'Nayte',
+                publishedAt: '2025-12-12',
+                tags: ['facets', 'filter', 'LiveAction'],
+                longDescription: <<<'EOF'
+                    This demo showcases faceted search with two Live Components working together.
+
+                    Filter a list of animals by their **number of legs**, **weight**, or **natural habitat** using a dynamic facet menu that updates the results in real time.
+                    EOF,
+            ),
             new LiveDemo(
                 'infinite-scroll-2',
                 name: 'Infinite Scroll - 2/2',