Merge pull request #1 from monsieurbiz/feature/first-set-of-ui-elements

Add HeroUiElement and LinksUiElement
monsieurbiz · Aug 5, 2024 · ef86cda · ef86cda
2 parents c23f6af + 161010d
commit ef86cda
Show file tree

Hide file tree

Showing 13 changed files with 410 additions and 6 deletions.
diff --git a/.php-cs-fixer.dist.php b/.php-cs-fixer.dist.php
@@ -258,8 +258,10 @@
             ],
         ],
         'void_return' => true,
-        'whitespace_after_comma_in_array' => true, // alerady in symfony set
+        'whitespace_after_comma_in_array' => true, // already in symfony set
     ])
+    ->setParallelConfig(PhpCsFixer\Runner\Parallel\ParallelConfigFactory::detect())
+    ->setRiskyAllowed(true)
     ->setFinder($finder)
 ;
 

diff --git a/Makefile b/Makefile
@@ -7,7 +7,7 @@ COMPOSER=symfony composer
 CONSOLE=${SYMFONY} console
 export COMPOSE_PROJECT_NAME=sylius_ui_elements_plugin
 PLUGIN_NAME=sylius-ui-elements-plugin
-COMPOSE=docker-compose
+COMPOSE=docker compose
 YARN=yarn
 DOCTRINE_MIGRATIONS_NAMESPACE=MonsieurBiz\SyliusUiElementsPlugin\Migrations
 
@@ -205,7 +205,7 @@ docker.logs: ## Logs the docker containers
 .PHONY: docker.logs
 
 docker.dc: ARGS=ps
-docker.dc: ## Run docker-compose command. Use ARGS="" to pass parameters to docker-compose.
+docker.dc: ## Run docker compose command. Use ARGS="" to pass parameters to docker-compose.
 	cd ${APP_DIR} && ${COMPOSE} ${ARGS}
 .PHONY: docker.dc
 

diff --git a/composer.json b/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": {

diff --git a/dist/src/Form/Extension/ProductTypeExtension.php b/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\Form\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' => [],
+        ]);
+    }
+
+    public static function getExtendedTypes(): iterable
+    {
+        return [ProductTranslationType::class];
+    }
+}
diff --git a/src/Form/Type/LinkType.php b/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' => [
+                    'monsieurbiz_ui_elements.ui_element.links_ui_element.fields.type.choices.internal' => self::TYPE_INTERNAL,
+                    'monsieurbiz_ui_elements.ui_element.links_ui_element.fields.type.choices.external' => self::TYPE_EXTERNAL,
+                ],
+                'expanded' => true,
+                'multiple' => false,
+                'row_attr' => [
+                    'class' => 'ui segment',
+                ],
+            ])
+        ;
+    }
+}
diff --git a/src/Form/Type/UiElement/HeroUiElementType.php b/src/Form/Type/UiElement/HeroUiElementType.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\UiElement;
+
+use MonsieurBiz\SyliusRichEditorPlugin\Attribute\AsUiElement;
+use MonsieurBiz\SyliusRichEditorPlugin\Attribute\TemplatesUiElement;
+use MonsieurBiz\SyliusRichEditorPlugin\Form\Type\WysiwygType;
+use MonsieurBiz\SyliusRichEditorPlugin\WysiwygEditor\EditorInterface;
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\FormBuilderInterface;
+
+#[AsUiElement(
+    code: 'monsieurbiz_ui_elements.hero_ui_element',
+    icon: 'image outline',
+    title: 'monsieurbiz_ui_elements.ui_element.hero_ui_element.title',
+    description: 'monsieurbiz_ui_elements.ui_element.hero_ui_element.description',
+    templates: new TemplatesUiElement(
+        adminRender: '@MonsieurBizSyliusUiElementsPlugin/Admin/UiElement/hero_ui_element.html.twig',
+        frontRender: '@MonsieurBizSyliusUiElementsPlugin/Front/UiElement/hero_ui_element.html.twig',
+    ),
+    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'],
+                    ['fontSize', 'formatBlock'],
+                    ['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,
+            ])
+        ;
+    }
+}
diff --git a/src/Form/Type/UiElement/LinksUiElementType.php b/src/Form/Type/UiElement/LinksUiElementType.php
@@ -0,0 +1,93 @@
+<?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\Attribute\TemplatesUiElement;
+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: 'monsieurbiz_ui_elements.links_ui_element',
+    icon: 'linkify',
+    title: 'monsieurbiz_ui_elements.ui_element.links_ui_element.title',
+    description: 'monsieurbiz_ui_elements.ui_element.links_ui_element.description',
+    templates: new TemplatesUiElement(
+        adminRender: '@MonsieurBizSyliusUiElementsPlugin/Admin/UiElement/links_ui_element.html.twig',
+        frontRender: '@MonsieurBizSyliusUiElementsPlugin/Front/UiElement/links_ui_element.html.twig',
+    ),
+    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' => [
+                    'monsieurbiz_ui_elements.ui_element.links_ui_element.fields.background.choices.light' => self::BACKGROUND_LIGHT,
+                    'monsieurbiz_ui_elements.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' => [
+                    'monsieurbiz_ui_elements.ui_element.links_ui_element.fields.alignment.choices.full_width' => self::ALIGNMENT_FULL_WIDTH,
+                    'monsieurbiz_ui_elements.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',
+                ],
+            ])
+        ;
+    }
+}
diff --git a/src/Resources/translations/messages.en.yaml b/src/Resources/translations/messages.en.yaml
@@ -0,0 +1,35 @@
+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."
+    ui_element:
+        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"
diff --git a/src/Resources/translations/messages.fr.yaml b/src/Resources/translations/messages.fr.yaml
@@ -0,0 +1,35 @@
+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."
+    ui_element:
+        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"