Add ux collection type component

src/FormCollection/.gitattributes

@@ -0,0 +1,3 @@
+/.gitattributes export-ignore
+/.gitignore export-ignore
+/Resources/assets/test export-ignore

src/FormCollection/DependencyInjection/FormCollectionExtension.php

@@ -0,0 +1,32 @@
+<?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 Symfony\UX\FormCollection\DependencyInjection;
+
+use Symfony\Component\DependencyInjection\ContainerBuilder;
+use Symfony\Component\DependencyInjection\Definition;
+use Symfony\Component\HttpKernel\DependencyInjection\Extension;
+use Symfony\UX\FormCollection\Form\UXCollectionType;
+
+/**
+ * @internal
+ */
+class FormCollectionExtension extends Extension
+{
+    public function load(array $configs, ContainerBuilder $container)
+    {
+        $container
+            ->setDefinition('form.ux_collection', new Definition(UXCollectionType::class))
+            ->addTag('form.type')
+            ->setPublic(false)
+        ;
+    }
+}

src/FormCollection/Form/UXCollectionEntryToolbarType.php

@@ -0,0 +1,35 @@
+<?php
+
+namespace Symfony\UX\FormCollection\Form;
+
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\Extension\Core\Type\ButtonType;
+use Symfony\Component\Form\FormBuilderInterface;
+use Symfony\Component\OptionsResolver\OptionsResolver;
+
+/**
+ * @final
+ * @experimental
+ */
+class UXCollectionEntryToolbarType extends AbstractType
+{
+    public function buildForm(FormBuilderInterface $builder, array $options): void
+    {
+        if ($options['allow_delete']) {
+            $builder->add(
+                'uxCollectionEntryDeleteButton',
+                ButtonType::class,
+                $options['delete_options'],
+            );
+        }
+    }
+
+    public function configureOptions(OptionsResolver $resolver): void
+    {
+        $resolver->setDefaults([
+            'label' => false,
+            'allow_delete' => false,
+            'delete_options' => [],
+        ]);
+    }
+}

src/FormCollection/Form/UXCollectionEntryType.php

@@ -0,0 +1,58 @@
+<?php
+
+namespace Symfony\UX\FormCollection\Form;
+
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\Extension\Core\Type\TextType;
+use Symfony\Component\Form\FormBuilderInterface;
+use Symfony\Component\Form\FormInterface;
+use Symfony\Component\Form\FormView;
+use Symfony\Component\OptionsResolver\OptionsResolver;
+
+/**
+ * @final
+ * @experimental
+ *
+ * @internal only for internal usage to add the toolbar to every entry of a collection
+ */
+class UXCollectionEntryType extends AbstractType
+{
+    public function buildForm(FormBuilderInterface $builder, array $options): void
+    {
+        $builder->add(
+            'entry',
+            $options['entry_type'],
+            $options['entry_options'],
+        );
+    }
+
+    public function buildView(FormView $view, FormInterface $form, array $options): void
+    {
+        $form->add('toolbar', UXCollectionEntryToolbarType::class, [
+            'allow_delete' => $options['allow_delete'],
+            'delete_options' => $options['delete_options'],
+        ]);
+    }
+
+    public function configureOptions(OptionsResolver $resolver): void
+    {
+        $resolver->setDefaults([
+            'entry_type' => TextType::class,
+            'entry_options' => [],
+            'label' => false,
+            'allow_delete' => false,
+            'delete_options' => [],
+            'row_attr' => [
+                'data-collection-target' => 'entry',
+            ],
+        ]);
+
+        $entryOptionsNormalizer = function (OptionsResolver $options, $value) {
+            $value['inherit_data'] = true;
+
+            return $value;
+        };
+
+        $resolver->addNormalizer('entry_options', $entryOptionsNormalizer);
+    }
+}

src/FormCollection/Form/UXCollectionToolbarType.php

@@ -0,0 +1,35 @@
+<?php
+
+namespace Symfony\UX\FormCollection\Form;
+
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\Extension\Core\Type\ButtonType;
+use Symfony\Component\Form\FormBuilderInterface;
+use Symfony\Component\OptionsResolver\OptionsResolver;
+
+/**
+ * @final
+ * @experimental
+ */
+class UXCollectionToolbarType extends AbstractType
+{
+    public function buildForm(FormBuilderInterface $builder, array $options): void
+    {
+        if ($options['allow_add']) {
+            $builder->add(
+                'uxCollectionAddButton',
+                ButtonType::class,
+                $options['add_options'],
+            );
+        }
+    }
+
+    public function configureOptions(OptionsResolver $resolver): void
+    {
+        $resolver->setDefaults([
+            'label' => false,
+            'allow_add' => false,
+            'add_options' => [],
+        ]);
+    }
+}

src/FormCollection/Form/UXCollectionType.php

@@ -0,0 +1,93 @@
+<?php
+
+namespace Symfony\UX\FormCollection\Form;
+
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\Extension\Core\Type\CollectionType;
+use Symfony\Component\Form\Extension\Core\Type\TextType;
+use Symfony\Component\Form\FormInterface;
+use Symfony\Component\Form\FormView;
+use Symfony\Component\OptionsResolver\Options;
+use Symfony\Component\OptionsResolver\OptionsResolver;
+
+/**
+ * @final
+ * @experimental
+ */
+class UXCollectionType extends AbstractType
+{
+    public function getParent(): string
+    {
+        return CollectionType::class;
+    }
+
+    public function buildView(FormView $view, FormInterface $form, array $options): void
+    {
+        $form->add('toolbar', UXCollectionToolbarType::class, [
+            'allow_add' => $options['allow_add'],
+            'add_options' => $options['add_options'],
+        ]);
+    }
+
+    public function configureOptions(OptionsResolver $resolver): void
+    {
+        $addOptionsNormalizer = function (Options $options, $value) {
+            $value['block_name'] = 'add_button';
+            $value['attr'] = \array_merge([
+                'data-' . $options['attr']['data-controller'] . '-target' => 'addButton',
+                'data-action' => $options['attr']['data-controller'] . '#add',
+            ], $value['attr'] ?? []);
+
+            return $value;
+        };
+
+        $deleteOptionsNormalizer = function (Options $options, $value) {
+            $value['block_name'] = 'delete_button';
+            $value['attr'] = \array_merge([
+                'data-' . $options['attr']['data-controller'] . '-target' => 'deleteButton',
+                'data-action' => $options['attr']['data-controller'] . '#delete',
+            ], $value['attr'] ?? []);
+
+            return $value;
+        };
+
+        $attrNormalizer = function (Options $options, $value) {
+            if (!isset($value['data-controller'])) {
+                $value['data-controller'] = 'collection';
+            }
+            $value['data-' . $value['data-controller'] . '-prototype-name-value'] = $options['prototype_name'];
+
+            return $value;
+        };
+
+        $entryTypeNormalizer = function (OptionsResolver $options, $value) {
+            return UXCollectionEntryType::class;
+        };
+
+        $entryOptionsNormalizer = function (OptionsResolver $options, $value) {
+            return [
+                'row_attr' => [
+                    'data-' . $options['attr']['data-controller'] . '-target' => 'entry',
+                ],
+                'label' => false,
+                'allow_delete' => $options['allow_delete'],
+                'delete_options' => $options['delete_options'],
+                'entry_type' => $options['ux_entry_type'] ?? null,
+                'entry_options' => $value,
+            ];
+        };
+
+        $resolver->setDefaults([
+            'ux_entry_type' => TextType::class,
+            'add_options' => [],
+            'delete_options' => [],
+            'original_entry_type' => [],
+        ]);
+
+        $resolver->setNormalizer('add_options', $addOptionsNormalizer);
+        $resolver->setNormalizer('delete_options', $deleteOptionsNormalizer);
+        $resolver->setNormalizer('attr', $attrNormalizer);
+        $resolver->addNormalizer('entry_type', $entryTypeNormalizer);
+        $resolver->addNormalizer('entry_options', $entryOptionsNormalizer);
+    }
+}

src/FormCollection/FormCollectionBundle.php

@@ -0,0 +1,22 @@
+<?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 Symfony\UX\FormCollection;
+
+use Symfony\Component\HttpKernel\Bundle\Bundle;
+
+/**
+ * @final
+ * @experimental
+ */
+class FormCollectionBundle extends Bundle
+{
+}

src/FormCollection/LICENSE

@@ -0,0 +1,19 @@
+Copyright (c) 2020-2021 Fabien Potencier
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is furnished
+to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

src/FormCollection/README.md

@@ -0,0 +1,14 @@
+# Symfony UX Form Collection
+
+Symfony UX Form collection is a Symfony bundle provides a Stimulus integration
+for add and remove of for [Symfony Form Collection Type](https://symfony.com/doc/current/form/collection.html).
+
+**This repository is a READ-ONLY sub-tree split**. See
+https://github.com/symfony/ux to create issues or submit pull requests.
+
+## Resources
+
+-   [Documentation](https://symfony.com/bundles/ux-form-collection/current/index.html)
+-   [Report issues](https://github.com/symfony/ux/issues) and
+    [send Pull Requests](https://github.com/symfony/ux/pulls)
+    in the [main Symfony UX repository](https://github.com/symfony/ux)

src/FormCollection/Resources/assets/.babelrc

@@ -0,0 +1,4 @@
+{
+    "presets": ["@babel/env"],
+    "plugins": ["@babel/plugin-proposal-class-properties"]
+}

src/FormCollection/Resources/assets/dist/controller.js

@@ -0,0 +1,68 @@
+import { Controller } from '@hotwired/stimulus';
+
+class default_1 extends Controller {
+    constructor() {
+        super(...arguments);
+        this.index = 0;
+        this.controllerName = 'collection';
+        this.entries = [];
+    }
+    connect() {
+        this.controllerName = this.context.scope.identifier;
+        this._dispatchEvent('form-collection:pre-connect');
+        this.entries = [];
+        this.element.querySelectorAll(':scope > [data-' + this.controllerName + '-target="entry"]').forEach(entry => {
+            this.entries.push(entry);
+        });
+        this._dispatchEvent('form-collection:connect');
+    }
+    add() {
+        const prototypeHTML = this.element.dataset.prototype;
+        if (!prototypeHTML) {
+            throw new Error('A "data-prototype" attribute was expected on data-controller="' + this.controllerName + '" element.');
+        }
+        const newEntry = this._textToNode(prototypeHTML.replace(new RegExp('/' + this.prototypeNameValue + '/', 'g'), this.index.toString()));
+        this._dispatchEvent('form-collection:pre-add', {
+            entry: newEntry,
+            index: this.index,
+        });
+        if (this.entries.length > 0) {
+            this.entries[this.entries.length - 1].after(newEntry);
+        }
+        else {
+            this.element.prepend(newEntry);
+        }
+        this.entries.push(newEntry);
+        this._dispatchEvent('form-collection:add', {
+            entry: newEntry,
+            index: this.index,
+        });
+        this.index++;
+    }
+    delete(event) {
+        const clickTarget = event.target;
+        const entry = clickTarget.closest('[data-' + this.controllerName + '-target="entry"]');
+        this._dispatchEvent('form-collection:pre-delete', {
+            entry: entry,
+        });
+        entry.remove();
+        this.entries = this.entries.filter(currentEntry => currentEntry !== entry);
+        this._dispatchEvent('form-collection:delete', {
+            entry: entry,
+        });
+    }
+    _textToNode(text) {
+        const template = document.createElement('template');
+        text = text.trim();
+        template.innerHTML = text;
+        return template.content.firstChild;
+    }
+    _dispatchEvent(name, payload = {}) {
+        this.element.dispatchEvent(new CustomEvent(name, { detail: payload, bubbles: true }));
+    }
+}
+default_1.values = {
+    prototypeName: String,
+};
+
+export { default_1 as default };

src/FormCollection/Resources/assets/jest.config.js

@@ -0,0 +1,5 @@
+const config = require('../../../../jest.config.js');
+
+config.setupFilesAfterEnv.push('./test/setup.js');
+
+module.exports = config;