Add HeroUiElement and LinksUiElement

composer.json

@@ -6,7 +6,8 @@
     "license": "MIT",
     "require": {
         "php": "^8.2",
-        "sylius/sylius": ">=1.12 <1.14"
+        "sylius/sylius": ">=1.12 <1.14",
+        "monsieurbiz/sylius-rich-editor-plugin": "^2.8"
     },
     "require-dev": {
         "friendsofphp/php-cs-fixer": "^3.16",
@@ -38,8 +39,8 @@
         "symfony": {
             "docker": false,
             "endpoint": [
-                                "https://api.github.com/repos/monsieurbiz/symfony-recipes/contents/index.json?ref=flex/master",
-                                "flex://defaults"
+                "https://api.github.com/repos/monsieurbiz/symfony-recipes/contents/index.json?ref=flex/master",
+                "flex://defaults"
             ]
         },
         "branch-alias": {

dist/src/Form/Extension/ProductTypeExtension.php

@@ -0,0 +1,36 @@
+<?php
+
+/*
+ * This file is part of Monsieur Biz's SyliusUiElementsPlugin for Sylius.
+ * (c) Monsieur Biz <[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\Extension;
+
+use MonsieurBiz\SyliusRichEditorPlugin\Form\Type\RichEditorType;
+use Sylius\Bundle\ProductBundle\Form\Type\ProductTranslationType;
+use Symfony\Component\Form\AbstractTypeExtension;
+use Symfony\Component\Form\FormBuilderInterface;
+
+class ProductTypeExtension extends AbstractTypeExtension
+{
+    public function buildForm(FormBuilderInterface $builder, array $options): void
+    {
+        $builder->remove('description');
+        $builder->add('description', RichEditorType::class, [
+            'required' => false,
+            'label' => 'sylius.form.product.description',
+            'locale' => $builder->getName(),
+            'tags' => ['-noseeme'],
+        ]);
+    }
+
+    public static function getExtendedTypes(): iterable
+    {
+        return [ProductTranslationType::class];
+    }
+}

src/Form/Type/LinkType.php

@@ -0,0 +1,65 @@
+<?php
+
+/*
+ * This file is part of Monsieur Biz's SyliusUiElementsPlugin for Sylius.
+ * (c) Monsieur Biz <[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 MonsieurBiz\SyliusUiElementsPlugin\Form\Type;
+
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\Extension\Core\Type\ChoiceType;
+use Symfony\Component\Form\Extension\Core\Type\TextType;
+use Symfony\Component\Form\Extension\Core\Type\UrlType;
+use Symfony\Component\Form\FormBuilderInterface;
+use Symfony\Component\Validator\Constraints as Assert;
+
+class LinkType extends AbstractType
+{
+    public const TYPE_INTERNAL = 'internal';
+
+    public const TYPE_EXTERNAL = 'external';
+
+    /**
+     * @SuppressWarnings(PHPMD.UnusedFormalParameter)
+     */
+    public function buildForm(FormBuilderInterface $builder, array $options): void
+    {
+        $builder
+            ->add('link', UrlType::class, [
+                'label' => 'monsieurbiz_ui_elements.common.fields.link',
+                'required' => true,
+                'constraints' => [
+                    new Assert\AtLeastOneOf([
+                        'includeInternalMessages' => false,
+                        'message' => 'monsieurbiz_ui_elements.errors.not_valid_url',
+                        'constraints' => [
+                            new Assert\Url(['protocols' => ['http', 'https'], 'relativeProtocol' => true]),
+                            new Assert\Regex(['pattern' => '`^(#|/[^/])`']),
+                        ],
+                    ]),
+                ],
+            ])
+            ->add('label', TextType::class, [
+                'label' => 'monsieurbiz_ui_elements.common.fields.label',
+                'required' => true,
+            ])
+            ->add('type', ChoiceType::class, [
+                'label' => 'monsieurbiz_ui_elements.common.fields.type',
+                'choices' => [
+                    'app.ui_element.links_ui_element.fields.type.choices.internal' => self::TYPE_INTERNAL,
+                    'app.ui_element.links_ui_element.fields.type.choices.external' => self::TYPE_EXTERNAL,
+                ],
+                'expanded' => true,
+                'multiple' => false,
+                'row_attr' => [
+                    'class' => 'ui segment',
+                ],
+            ])
+        ;
+    }
+}

src/Form/Type/UiElement/HeroUiElementType.php

@@ -0,0 +1,57 @@
+<?php
+
+/*
+ * This file is part of Monsieur Biz's SyliusUiElementsPlugin for Sylius.
+ * (c) Monsieur Biz <[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 MonsieurBiz\SyliusUiElementsPlugin\Form\Type\UiElement;
+
+use MonsieurBiz\SyliusRichEditorPlugin\Attribute\AsUiElement;
+use MonsieurBiz\SyliusRichEditorPlugin\Form\Type\WysiwygType;
+use MonsieurBiz\SyliusRichEditorPlugin\WysiwygEditor\EditorInterface;
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\FormBuilderInterface;
+
+#[AsUiElement(
+    code: 'app.hero_ui_element',
+    icon: 'image outline',
+    tags: [],
+)]
+class HeroUiElementType extends AbstractType
+{
+    /**
+     * @SuppressWarnings(PHPMD.UnusedFormalParameter)
+     */
+    public function buildForm(FormBuilderInterface $builder, array $options): void
+    {
+        $builder
+            ->add('title', WysiwygType::class, [
+                'label' => 'monsieurbiz_ui_elements.common.fields.title',
+                'required' => false,
+                'editor_height' => 120,
+                'editor_toolbar_type' => EditorInterface::TOOLBAR_TYPE_CUSTOM,
+                'editor_toolbar_buttons' => [
+                    ['undo', 'redo'],
+                    ['bold', 'underline', 'italic', 'strike'],
+                    ['fontColor', 'hiliteColor'],
+                    ['removeFormat'],
+                    ['link'],
+                    ['showBlocks', 'codeView'],
+                ],
+            ])
+            ->add('subtitle', null, [
+                'label' => 'monsieurbiz_ui_elements.common.fields.subtitle',
+                'required' => false,
+            ])
+            ->add('description', null, [
+                'label' => 'monsieurbiz_ui_elements.common.fields.description',
+                'required' => false,
+            ])
+        ;
+    }
+}

src/Form/Type/UiElement/LinksUiElementType.php

@@ -0,0 +1,86 @@
+<?php
+
+/*
+ * This file is part of Monsieur Biz's SyliusUiElementsPlugin for Sylius.
+ * (c) Monsieur Biz <[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 MonsieurBiz\SyliusUiElementsPlugin\Form\Type\UiElement;
+
+use MonsieurBiz\SyliusRichEditorPlugin\Attribute\AsUiElement;
+use MonsieurBiz\SyliusRichEditorPlugin\Form\Type\UiElement\TitleType;
+use MonsieurBiz\SyliusUiElementsPlugin\Form\Type\LinkType;
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\Extension\Core\Type\ChoiceType;
+use Symfony\Component\Form\Extension\Core\Type\CollectionType;
+use Symfony\Component\Form\FormBuilderInterface;
+use Symfony\Component\Validator\Constraints as Assert;
+
+#[AsUiElement(
+    code: 'app.links_ui_element',
+    icon: 'linkify',
+    tags: [],
+)]
+class LinksUiElementType extends AbstractType
+{
+    public const BACKGROUND_LIGHT = 'light';
+
+    public const BACKGROUND_DARK = 'dark';
+
+    public const ALIGNMENT_FULL_WIDTH = 'full_width';
+
+    public const ALIGNMENT_RIGHT = 'right';
+
+    /**
+     * @SuppressWarnings(PHPMD.UnusedFormalParameter)
+     */
+    public function buildForm(FormBuilderInterface $builder, array $options): void
+    {
+        $builder
+            ->add('title', TitleType::class, [
+                'label' => 'monsieurbiz_ui_elements.common.fields.title',
+                'required' => false,
+                'attr' => [
+                    'class' => 'ui segment',
+                ],
+            ])
+            ->add('background', ChoiceType::class, [
+                'label' => 'monsieurbiz_ui_elements.common.fields.background',
+                'choices' => [
+                    'app.ui_element.links_ui_element.fields.background.choices.light' => self::BACKGROUND_LIGHT,
+                    'app.ui_element.links_ui_element.fields.background.choices.dark' => self::BACKGROUND_DARK,
+                ],
+                'expanded' => true,
+                'row_attr' => [
+                    'class' => 'ui segment',
+                ],
+            ])
+            ->add('alignment', ChoiceType::class, [
+                'label' => 'monsieurbiz_ui_elements.common.fields.alignment',
+                'choices' => [
+                    'app.ui_element.links_ui_element.fields.alignment.choices.full_width' => self::ALIGNMENT_FULL_WIDTH,
+                    'app.ui_element.links_ui_element.fields.alignment.choices.right' => self::ALIGNMENT_RIGHT,
+                ],
+                'expanded' => true,
+                'multiple' => false,
+                'row_attr' => [
+                    'class' => 'ui segment',
+                ],
+            ])
+            ->add('links', CollectionType::class, [
+                'label' => 'monsieurbiz_ui_elements.common.fields.links',
+                'entry_type' => LinkType::class,
+                'allow_add' => true,
+                'allow_delete' => true,
+                'constraints' => [new Assert\Valid()],
+                'attr' => [
+                    'class' => 'ui segment collection--flex',
+                ],
+            ])
+        ;
+    }
+}

src/Resources/translations/messages.en.yaml

@@ -0,0 +1,34 @@
+monsieurbiz_ui_elements:
+    common:
+        fields:
+            title: "Title"
+            subtitle: "Subtitle"
+            description: "Description"
+            background: "Background color"
+            alignment: "Alignment"
+            links: "Links"
+            link: "Link"
+            label: "Label"
+            type: "Type"
+            withDot: "With dot ?"
+    errors:
+        not_valid_url: "This value is not a valid URL (absolute or relative) or a valid hashtag."
+    hero_ui_element:
+        title: "Hero"
+        description: "Immersive zone with title and description"
+    links_ui_element:
+        title: "Links"
+        description: "Collection of links"
+        fields:
+            background:
+                choices:
+                    light: "Light"
+                    dark: "Dark"
+            alignment:
+                choices:
+                    full_width: "Full width"
+                    right: "Right"
+            type:
+                choices:
+                    internal: "Internal"
+                    external: "External"

src/Resources/translations/messages.fr.yaml

@@ -0,0 +1,34 @@
+monsieurbiz_ui_elements:
+    common:
+        fields:
+            title: "Titre"
+            subtitle: "Sous-titre"
+            description: "Description"
+            background: "Couleur de fond"
+            alignment: "Alignement"
+            links: "Liens"
+            link: "Lien"
+            label: "Libellé"
+            type: "Type"
+            withDot: "Avec point ?"
+    errors:
+        not_valid_url: "Cette valeur n'est pas une URL valide (absolue ou relative) ou un hashtag valide."
+    hero_ui_element:
+        title: "Hero"
+        description: "Zone immersive avec titre et description"
+    links_ui_element:
+        title: "Liens"
+        description: "Ensemble de liens"
+        fields:
+            background:
+                choices:
+                    light: "Clair"
+                    dark: "Foncé"
+            alignment:
+                choices:
+                    full_width: "Pleine largeur"
+                    right: "À droite"
+            type:
+                choices:
+                    internal: "Interne"
+                    external: "Externe"

src/Resources/views/Admin/UiElement/hero_ui_element.html.twig

@@ -0,0 +1,15 @@
+{#
+UI Element template
+type: hero_ui_element
+element fields:
+    - title
+    - subtitle
+    - description
+#}
+
+{# Temporary style #}
+<div style="padding: 20px; background-color: #07353d; color: #ffefea;">
+    <strong>{{ element.title|raw }}</strong>
+    <strong style="color: #79898c;">{{ element.subtitle }}</strong>
+    <p style="color: #bcc9cb;">{{ element.description }}</p>
+</div>

src/Resources/views/Admin/UiElement/links_ui_element.html.twig

@@ -0,0 +1,6 @@
+{#
+UI Element template
+type: links_ui_element
+element fields:
+    - …
+#}

src/Resources/views/Shop/UiElement/hero_ui_element.html.twig

@@ -0,0 +1,22 @@
+{#
+UI Element template
+type: hero_ui_element
+element fields:
+    - title
+    - subtitle
+    - description
+#}
+
+{# Temporary style #}
+<div style="padding: 20px; background-color: #07353d; color: #ffefea;">
+    {% if element.title is defined and element.title is not null %}
+        <strong>{{ element.title|raw }}</strong>
+    {% endif %}
+    {% if element.subtitle is defined and element.subtitle is not null %}
+        <strong style="color: #79898c;">{{ element.subtitle }}</strong>
+    {% endif %}
+    {% if element.description is defined and element.description is not null %}
+        <p style="color: #bcc9cb;">{{ element.description }}</p>
+    {% endif %}
+</div>
+

src/Resources/views/Shop/UiElement/links_ui_element.html.twig

@@ -0,0 +1,6 @@
+{#
+UI Element template
+type: links_ui_element
+element fields:
+    - …
+#}