UX FormCollection

src/FormCollection/.gitattributes

@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto

src/FormCollection/DependencyInjection/FormCollectionExtension.php

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

src/FormCollection/Form/CollectionType.php

@@ -0,0 +1,57 @@
+<?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\Form;
+
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\Extension\Core\Type\CollectionType as BaseCollectionType;
+use Symfony\Component\Form\FormInterface;
+use Symfony\Component\Form\FormView;
+use Symfony\Component\OptionsResolver\OptionsResolver;
+
+/**
+ * @final
+ * @experimental
+ */
+class CollectionType extends AbstractType
+{
+    public function getParent()
+    {
+        return BaseCollectionType::class;
+    }
+
+    public function configureOptions(OptionsResolver $resolver)
+    {
+        $resolver->setDefaults([
+            'button_add' => [
+                'text' => 'Add',
+                'attr' => ['class' => 'btn btn-outline-primary'],
+            ],
+            'button_delete' => [
+                'text' => 'Remove',
+                'attr' => ['class' => 'btn btn-outline-secondary'],
+            ],
+        ]);
+    }
+
+    public function finishView(FormView $view, FormInterface $form, array $options)
+    {
+        parent::finishView($view, $form, $options);
+
+        $view->vars['button_add'] = $options['button_add'];
+        $view->vars['button_delete'] = $options['button_delete'];
+    }
+
+    public function getBlockPrefix()
+    {
+        return 'form_collection';
+    }
+}

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,141 @@
+# UX Form Collection
+
+Symfony UX Form collection is a Symfony bundle providing light UX for collection
+in Symfony Forms.
+
+## Installation
+
+UX Form Collection requires PHP 7.2+ and Symfony 4.4+.
+
+Install this bundle using Composer and Symfony Flex:
+
+```sh
+composer require symfony/ux-form-collection
+
+# Don't forget to install the JavaScript dependencies as well and compile
+yarn install --force
+yarn encore dev
+```
+
+Also make sure you have at least version 2.0 of [@symfony/stimulus-bridge](https://github.com/symfony/stimulus-bridge)
+in your `package.json` file.
+
+You need to select the right theme from the one you are using :
+```yaml
+# config/packages/twig.yaml
+twig:
+  # For bootstrap for example
+  form_themes: ['@FormCollection/form_theme_div.html.twig']
+```
+You have 2 different themes :
+- `@FormCollection/form_theme_div.html.twig`
+- `@FormCollection/form_theme_table.html.twig`
+
+[Check the Symfony doc](https://symfony.com/doc/4.4/form/form_themes.html) for the different ways to set themes in Symfony.
+
+## Usage
+
+The most common usage of Form Collection is to use it as a replacement of
+the native CollectionType class:
+
+```php
+// ...
+use Symfony\UX\FormCollection\Form\CollectionType;
+
+class BlogFormType extends AbstractType
+{
+    public function buildForm(FormBuilderInterface $builder, array $options)
+    {
+        $builder
+            // ...
+            ->add('comments', CollectionType::class, [
+                // ...
+                'button_add' => [
+                     // Default text for the add button
+                    'text' => 'Add',    
+                    // Default attr class for the add button
+                    'attr' => ['class' => 'btn btn-outline-primary'] 
+                ],
+                'button_delete' => [
+                    // Default text for the delete button
+                    'text' => 'Remove',    
+                    // Default class for the delete button
+                    'attr' => ['class' => 'btn btn-outline-secondary']    
+                ],
+            ])
+            // ...
+        ;
+    }
+
+    // ...
+}
+```
+
+### Extend the default behavior
+
+Symfony UX Form Collection allows you to extend its default behavior using a custom Stimulus controller:
+
+```js
+// mycollection_controller.js
+
+import { Controller } from 'stimulus';
+
+export default class extends Controller {
+    connect() {
+        this.element.addEventListener('collection:pre-connect', this._onPreConnect);
+        this.element.addEventListener('collection:connect', this._onConnect);
+        this.element.addEventListener('collection:pre-add', this._onPreAdd);
+        this.element.addEventListener('collection:add', this._onAdd);
+        this.element.addEventListener('collection:pre-delete', this._onPreDelete);
+        this.element.addEventListener('collection:delete', this._onDelete);
+    }
+
+    disconnect() {
+        // You should always remove listeners when the controller is disconnected to avoid side effects
+        this.element.removeEventListener('collection:pre-connect', this._onPreConnect);
+        this.element.removeEventListener('collection:connect', this._onConnect);
+    }
+
+    _onPreConnect(event) {
+        // The collection is not yet connected
+        console.log(event.detail.allowAdd);    // Access to the allow_add option of the form 
+        console.log(event.detail.allowDelete); // Access to the allow_delete option of the form
+    }
+
+    _onConnect(event) {
+        // Same as collection:pre-connect event
+    }
+
+    _onPreAdd(event) {
+        console.log(event.detail.index);   // Access to the curent index will be added 
+        console.log(event.detail.element); // Access to the element will be added
+    }
+
+    _onAdd(event) {
+        // Same as collection:pre-add event
+    }
+
+    _onPreDelete(event) {
+        console.log(event.detail.index);   // Access to the index will be removed 
+        console.log(event.detail.element); // Access to the elemnt will be removed
+    }
+
+    _onDelete(event) {
+        // Same as collection:pre-delete event
+    }
+}
+```
+
+Then in your render call, add your controller as an HTML attribute:
+
+```php
+        $builder
+            // ...
+            ->add('comments', UXCollectionType::class, [
+                // ...
+                'attr' => [
+                    // Change the controller name 
+                    'data-controller' => 'mycollection' 
+                ]
+            ]);
+```

src/FormCollection/Resources/assets/.babelrc

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

src/FormCollection/Resources/assets/.gitignore

@@ -0,0 +1 @@
+/node_modules/