Prepare a PoC of Twig Components for the Sylius UI

src/Sylius/Bundle/UiBundle/Resources/config/services/twig.xml

@@ -58,5 +58,14 @@
         <service id="Sylius\Bundle\UiBundle\Storage\FilterStorage" public="false">
             <argument type="service" id="request_stack" />
         </service>
+
+        <service
+            id="sylius_ui.twig.ux.component_template_finder"
+            class="Sylius\Bundle\UiBundle\Twig\Ux\ComponentTemplateFinder"
+            decorates="ux.twig_component.component_template_finder"
+        >
+            <argument type="service" id=".inner" />
+            <argument type="service" id="twig.loader.native_filesystem" />
+        </service>
     </services>
 </container>

src/Sylius/Bundle/UiBundle/Resources/views/component/button.html.twig

@@ -0,0 +1,57 @@
+{% from '@SyliusAdmin/shared/helper/icon.html.twig' import icon as i %}
+
+{% props
+    text = '',
+    style = null,
+    class = '',
+    dropdown = false,
+    disabled = false,
+    size = null,
+    icon = null,
+    iconOnly = false,
+    href = null,
+    hookableMetadata = null,
+    testAttribute = null,
+%}
+
+{% set button_class = 'btn' ~
+    (class ? ' ' ~ class : '') ~
+    (style ? ' btn-' ~ style : '') ~
+    (dropdown ? ' dropdown-toggle' : '') ~
+    (iconOnly ? ' btn-icon' : '') ~
+    (size == 'large' ? ' btn-lg' : '') ~
+    (size == 'small' ? ' btn-sm' : '') %}
+
+{% set content %}
+    {% if text is not empty %}
+        {{ text }}
+    {% else %}
+        {{ block('content') }}
+    {% endif %}
+{% endset %}
+
+{% if href is not null %}
+    <a {{ attributes }}
+        class='{{ button_class|trim }} {{ class|trim }}'
+        href='{{ href }}'
+        {% if disabled %}aria-disabled='true'{% endif %}
+        {% if dropdown %}data-bs-toggle='dropdown'{% endif %}
+        {% if testAttribute %}{{ sylius_test_html_attribute(testAttribute) }}{% endif %}
+    >
+        {{ icon ? i({ icon }) }}
+        {% if iconOnly == false %}
+            {{ content }}
+        {% endif %}
+    </a>
+{% else %}
+    <button {{ attributes }}
+        class='{{ button_class|trim }} {{ class|trim }}'
+        {% if disabled %}disabled{% endif %}
+        {% if dropdown %}data-bs-toggle='dropdown'{% endif %}
+    >
+        {{ icon ? i({ icon }) }}
+        {% if iconOnly == false %}
+            {{ content }}
+        {% endif %}
+    </button>
+{% endif %}

src/Sylius/Bundle/UiBundle/Resources/views/component/button/delete.html.twig

@@ -0,0 +1,16 @@
+{% extends '@SyliusUi/component/button/submit.html.twig' %}
+
+{% props
+    text = '',
+    style = 'danger',
+    class = '',
+    dropdown = false,
+    disabled = false,
+    size = null,
+    icon = null,
+    iconOnly = false,
+    href = null,
+    hookableMetadata = null,
+%}
+
+{% set attributes = attributes.defaults({ type: 'submit' }) %}

src/Sylius/Bundle/UiBundle/Resources/views/component/button/submit.html.twig

@@ -0,0 +1,16 @@
+{% extends '@SyliusUi/component/button.html.twig' %}
+
+{% props
+    text = '',
+    style = 'primary',
+    class = '',
+    dropdown = false,
+    disabled = false,
+    size = null,
+    icon = null,
+    iconOnly = false,
+    href = null,
+    hookableMetadata = null,
+%}
+
+{% set attributes = attributes.defaults({ type: 'submit' }) %}

src/Sylius/Bundle/UiBundle/Twig/Ux/ComponentTemplateFinder.php

@@ -0,0 +1,50 @@
+<?php
+
+/*
+ * This file is part of the Sylius package.
+ *
+ * (c) Sylius Sp. z o.o.
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+declare(strict_types=1);
+
+namespace Sylius\Bundle\UiBundle\Twig\Ux;
+
+use Symfony\UX\TwigComponent\ComponentTemplateFinderInterface;
+use Twig\Environment;
+use Twig\Loader\LoaderInterface;
+
+final readonly class ComponentTemplateFinder implements ComponentTemplateFinderInterface
+{
+    public function __construct(
+        private ComponentTemplateFinderInterface $decorated,
+        private Environment|LoaderInterface $loader,
+    ) {
+    }
+
+    public function findAnonymousComponentTemplate(string $name): ?string
+    {
+        if (!str_starts_with($name, 'sylius_ui')) {
+            return $this->decorated->findAnonymousComponentTemplate($name);
+        }
+
+        $template = $this->guessTemplatePath($name);
+
+        if ($this->loader->exists($template)) {
+            return $template;
+        }
+
+        return null;
+    }
+
+    private function guessTemplatePath(string $name): string
+    {
+        $normalizedName = str_replace('sylius_ui:', '', $name);
+        $normalizedName = str_replace(':', '/', $normalizedName);
+
+        return sprintf('@SyliusUi/component/%s.html.twig', $normalizedName);
+    }
+}