Add showcase code

2026-04-30 12:22:50 +01:00
parent 93258abd38
commit 5f1404d77c
4 changed files with 281 additions and 0 deletions
@@ -0,0 +1,17 @@
+<?php
+
+declare(strict_types=1);
+
+use Pcm\BadgeBundle\Dev\Kernel;
+use Symfony\Component\HttpFoundation\Request;
+
+require_once dirname(__DIR__, 2).'/vendor/autoload.php';
+
+$_SERVER['APP_ENV']   = $_SERVER['APP_ENV']   ?? 'dev';
+$_SERVER['APP_DEBUG'] = $_SERVER['APP_DEBUG'] ?? '1';
+
+$kernel   = new Kernel($_SERVER['APP_ENV'], (bool) $_SERVER['APP_DEBUG']);
+$request  = Request::createFromGlobals();
+$response = $kernel->handle($request);
+$response->send();
+$kernel->terminate($request, $response);
@@ -0,0 +1,76 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Pcm\BadgeBundle\Dev\Controller;
+
+use Pcm\BadgeBundle\Enum\BadgeColour;
+use Pcm\BadgeBundle\Interface\BadgeableInterface;
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Routing\Attribute\Route;
+
+final class ShowcaseController extends AbstractController
+{
+    #[Route('/', name: 'showcase')]
+    public function __invoke(): Response
+    {
+        $colours = array_map(fn (BadgeColour $c) => strtolower($c->name), BadgeColour::cases());
+
+        $samples = [
+            new SampleBadgeable('Investigation', BadgeColour::BLUE),
+            new SampleBadgeable('Interrogation', BadgeColour::RED),
+            new SampleBadgeable('Shootout', BadgeColour::BLACK),
+            new SampleBadgeable('Sip Whiskey', BadgeColour::FOREST),
+            new SampleBadgeable('Unknown', BadgeColour::GREY),
+        ];
+
+        $iconSamples = [
+            new SampleIconBadge('Investigation', BadgeColour::BLUE, 'mdi:magnify'),
+            new SampleIconBadge('Interrogation', BadgeColour::RED, 'bi:cassette-fill'),
+            new SampleIconBadge('Shootout', BadgeColour::BLACK, 'mdi:gun'),
+            new SampleIconBadge('Sip Whiskey', BadgeColour::FOREST, 'flowbite:whiskey-glass-outline'),
+            new SampleIconBadge('Unknown', BadgeColour::GREY, 'carbon:unknown'),
+        ];
+
+        return $this->render('showcase.html.twig', [
+            'colours' => $colours,
+            'samples' => $samples,
+            'icon_samples' => $iconSamples
+        ]);
+    }
+}
+
+final readonly class SampleBadgeable implements BadgeableInterface
+{
+    public function __construct(public string $label, private BadgeColour $colour)
+    {
+    }
+
+    public function getBadgeColour(): BadgeColour
+    {
+        return $this->colour;
+    }
+
+    public function getBadgeIcon(): ?string
+    {
+        return null;
+    }
+}
+
+final readonly class SampleIconBadge implements BadgeableInterface
+{
+    public function __construct(public string $label, private BadgeColour $colour, private string $icon)
+    {
+    }
+
+    public function getBadgeColour(): BadgeColour
+    {
+        return $this->colour;
+    }
+
+    public function getBadgeIcon(): ?string
+    {
+        return $this->icon;
+    }
+}
@@ -0,0 +1,84 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Pcm\BadgeBundle\Dev;
+
+use Pcm\BadgeBundle\PcmBadgeBundle;
+use Symfony\Bundle\FrameworkBundle\FrameworkBundle;
+use Symfony\Bundle\FrameworkBundle\Kernel\MicroKernelTrait;
+use Symfony\Bundle\TwigBundle\TwigBundle;
+use Symfony\Component\DependencyInjection\Loader\Configurator\ContainerConfigurator;
+use Symfony\Component\HttpKernel\Kernel as BaseKernel;
+use Symfony\Component\Routing\Loader\Configurator\RoutingConfigurator;
+use Symfony\UX\Icons\UXIconsBundle;
+use Symfony\UX\TwigComponent\TwigComponentBundle;
+
+final class Kernel extends BaseKernel
+{
+    use MicroKernelTrait;
+
+    public function registerBundles(): iterable
+    {
+        return [
+            new FrameworkBundle(),
+            new TwigBundle(),
+            new TwigComponentBundle(),
+            new UXIconsBundle(),
+            new PcmBadgeBundle(),
+        ];
+    }
+
+    public function getProjectDir(): string
+    {
+        return \dirname(__DIR__);
+    }
+
+    public function getCacheDir(): string
+    {
+        return $this->getProjectDir().'/var/cache/'.$this->environment;
+    }
+
+    public function getLogDir(): string
+    {
+        return $this->getProjectDir().'/var/log';
+    }
+
+    private function configureContainer(ContainerConfigurator $container): void
+    {
+        $container->extension('framework', [
+            'secret' => 'dev',
+            'router' => ['utf8' => true],
+            'test' => false,
+            'http_method_override' => false,
+            'handle_all_throwables' => true,
+            'php_errors' => ['log' => true],
+        ]);
+
+        $container->extension('twig', [
+            'default_path' => $this->getProjectDir().'/templates',
+        ]);
+
+        // Default config for the bundle. Tweak to preview different base classes.
+        $container->extension('pcm_badge', []);
+
+        // Fetch icons on-demand from iconify.design so no JS toolchain is needed.
+        $container->extension('ux_icons', [
+            'icon_dir' => '%kernel.project_dir%/var/icons',
+            'iconify' => ['enabled' => true, 'on_demand' => true],
+        ]);
+
+        $container->services()
+            ->defaults()
+                ->autowire()
+                ->autoconfigure()
+            ->load(__NAMESPACE__.'\\Controller\\', __DIR__.'/Controller/')
+                ->public()
+        ;
+    }
+
+    private function configureRoutes(RoutingConfigurator $routes): void
+    {
+        $routes->import(__DIR__.'/Controller/', 'attribute');
+    }
+}
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>PCM Badge Bundle — Dev Preview</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        accent: '#7c3aed',
+                        primary: '#0f172a',
+                    },
+                    fontSize: {
+                        '2xs': ['0.625rem', '0.875rem'],
+                    },
+                },
+            },
+        };
+    </script>
+</head>
+<body class="bg-zinc-50 text-zinc-900 p-8 font-sans">
+    <h1 class="text-2xl font-bold mb-2">PCM Badge Bundle</h1>
+    <p class="text-zinc-600 mb-8">Local dev preview. Edit <code class="bg-zinc-200 px-1 rounded">dev/templates/showcase.html.twig</code> to add new variants.</p>
+
+    <section class="mb-10">
+        <h2 class="text-lg font-semibold mb-3">Solid (all colours)</h2>
+        <div class="flex flex-wrap gap-2">
+            {% for colour in colours %}
+                <twig:Pcm:Badge colour="{{ colour }}">{{ colour }}</twig:Pcm:Badge>
+            {% endfor %}
+        </div>
+    </section>
+
+    <section class="mb-10">
+        <h2 class="text-lg font-semibold mb-3">Outline (all colours)</h2>
+        <div class="flex flex-wrap gap-2">
+            {% for colour in colours %}
+                <twig:Pcm:Badge colour="{{ colour }}" outline>{{ colour }}</twig:Pcm:Badge>
+            {% endfor %}
+        </div>
+    </section>
+
+    <section class="mb-10">
+        <h2 class="text-lg font-semibold mb-3">No icons</h2>
+        <div class="flex flex-wrap gap-2">
+            {% for sample in samples %}
+                <twig:Pcm:Badge :obj="sample">{{ sample.label }}</twig:Pcm:Badge>
+            {% endfor %}
+        </div>
+    </section>
+
+    <section class="mb-10">
+        <h2 class="text-lg font-semibold mb-3">Icons</h2>
+        <div class="flex flex-wrap gap-2">
+            <div class="flex gap-2 flex-col">
+                {% for icon_sample in icon_samples %}
+                    <twig:Pcm:Badge icon :obj="icon_sample" class="text-[8px]">{{ icon_sample.label }}</twig:Pcm:Badge>
+                {% endfor %}
+            </div>
+
+            <div class="flex gap-2 flex-col">
+                {% for icon_sample in icon_samples %}
+                    <twig:Pcm:Badge icon :obj="icon_sample">{{ icon_sample.label }}</twig:Pcm:Badge>
+                {% endfor %}
+            </div>
+
+            <div class="flex gap-2 flex-col">
+                {% for icon_sample in icon_samples %}
+                    <twig:Pcm:Badge icon :obj="icon_sample" class="text-xl">{{ icon_sample.label }}</twig:Pcm:Badge>
+                {% endfor %}
+            </div>
+
+            <div class="flex gap-2 flex-col">
+                {% for icon_sample in icon_samples %}
+                    <twig:Pcm:Badge outline icon :obj="icon_sample" class="text-[8px]">{{ icon_sample.label }}</twig:Pcm:Badge>
+                {% endfor %}
+            </div>
+
+            <div class="flex gap-2 flex-col">
+                {% for icon_sample in icon_samples %}
+                    <twig:Pcm:Badge outline icon :obj="icon_sample">{{ icon_sample.label }}</twig:Pcm:Badge>
+                {% endfor %}
+            </div>
+
+            <div class="flex gap-2 flex-col">
+                {% for icon_sample in icon_samples %}
+                    <twig:Pcm:Badge outline icon :obj="icon_sample" class="text-xl">{{ icon_sample.label }}</twig:Pcm:Badge>
+                {% endfor %}
+            </div>
+        </div>
+    </section>
+
+    <section class="mb-10">
+        <h2 class="text-lg font-semibold mb-3">Custom classes</h2>
+        <div class="flex flex-wrap gap-2 items-center">
+            <twig:Pcm:Badge colour="green" class="rounded-full" label="Sale 20% off" />
+            <twig:Pcm:Badge class="text-xl p-2" colour="maroon" outline>Danger!</twig:Pcm:Badge>
+            <twig:Pcm:Badge icon="material-symbols:add-alert" class="rounded-full text-xl" colour="maroon" outline>Danger!</twig:Pcm:Badge>
+        </div>
+    </section>
+</body>
+</html>