[Dropzone] Dropzone multiple uploads

.github/workflows/browser-tests.yml

@@ -73,8 +73,6 @@ jobs:
 
             - name: Configure E2E app
               run: |
-                  echo 'APP_ENV=prod' >> .env.local
-                  echo 'APP_DEBUG=0' >> .env.local
                   echo 'APP_SECRET=df4c071596e64cc75a349456f2887ae2419ae650' >> .env.local
               working-directory: apps/e2e
 
@@ -83,11 +81,12 @@ jobs:
               with:
                   working-directory: apps/e2e
                   dependency-versions: highest
-                  composer-options: --no-dev
                   custom-cache-suffix: symfony-${{ matrix.symfony }}
 
             - name: Prepare E2E app
               run: |
+                  echo 'APP_ENV=prod' >> .env.local
+                  echo 'APP_DEBUG=0' >> .env.local
                   symfony composer dump-autoload --classmap-authoritative --no-dev
                   symfony composer dump-env
                   symfony console asset-map:compile

apps/e2e/.env

@@ -23,7 +23,7 @@ APP_SECRET=
 # Format described at https://www.doctrine-project.org/projects/doctrine-dbal/en/latest/reference/configuration.html#connecting-using-a-url
 # IMPORTANT: You MUST configure your server version, either here or in config/packages/doctrine.yaml
 #
-DATABASE_URL="sqlite:///%kernel.project_dir%/var/data_%kernel.environment%.db"
+DATABASE_URL="sqlite:///%kernel.project_dir%/var/data.db"
 # DATABASE_URL="mysql://app:!ChangeMe!@127.0.0.1:3306/app?serverVersion=8.0.32&charset=utf8mb4"
 # DATABASE_URL="mysql://app:!ChangeMe!@127.0.0.1:3306/app?serverVersion=10.11.2-MariaDB&charset=utf8mb4"
 # DATABASE_URL="postgresql://app:!ChangeMe!@127.0.0.1:5432/app?serverVersion=16&charset=utf8"

apps/e2e/.symfony.local.yaml

@@ -1,2 +1,3 @@
 http:
     port: 9876
+    no_tls: true

apps/e2e/README.md

@@ -1,8 +1,8 @@
 # E2E App
 
-This is a Symfony application designed for end-to-end testing. 
+This is a Symfony application designed for end-to-end testing.
 
-It serves for testing UX packages in a real-world scenario, 
+It serves for testing UX packages in a real-world scenario,
 to ensure they work as expected for multiple Symfony versions and various browsers.
 
 ## Requirements
@@ -16,7 +16,7 @@ to ensure they work as expected for multiple Symfony versions and various browse
 
 ```shell
 docker compose up -d
-symfony php ../.github/build-packages.php
+symfony php ../../.github/build-packages.php
 
 SYMFONY_REQUIRE=6.4.* symfony composer update
 # or...

apps/e2e/assets/app.js

@@ -2,6 +2,8 @@ import { registerVueControllerComponents } from '@symfony/ux-vue';
 import { registerSvelteControllerComponents } from '@symfony/ux-svelte';
 import { registerReactControllerComponents } from '@symfony/ux-react';
 import './bootstrap.js';
+import { trans } from "./translator.js";
+
 /*
  * Welcome to your app's main JavaScript file!
  *
@@ -16,3 +18,5 @@ console.log('This log comes from assets/app.js - welcome to AssetMapper! 🎉');
 registerReactControllerComponents();
 registerSvelteControllerComponents();
 registerVueControllerComponents();
+
+export { trans };

apps/e2e/assets/controllers/movie-autocomplete_controller.js

@@ -0,0 +1,35 @@
+import { Controller } from '@hotwired/stimulus';
+import { getComponent } from '@symfony/ux-live-component';
+
+export default class extends Controller {
+    async connect() {
+        this.component = await getComponent(this.element.closest('[data-controller*="live"]'));
+
+        this.element.addEventListener('autocomplete:pre-connect', this._onPreConnect.bind(this));
+        this.element.addEventListener('autocomplete:connect', this._onConnect.bind(this));
+    }
+
+    disconnect() {
+        this.element.removeEventListener('autocomplete:pre-connect', this._onPreConnect.bind(this));
+        this.element.removeEventListener('autocomplete:connect', this._onConnect.bind(this));
+    }
+
+    _onPreConnect(event) {
+        const options = event.detail.options;
+        options.render = {
+            ...options.render,
+            option: (item) => {
+                return `<div data-test-id="autocomplete-option" data-title="${item.title || item.text}">${item.text}</div>`;
+            },
+        };
+    }
+
+    _onConnect(event) {
+        const tomSelect = event.detail.tomSelect;
+
+        tomSelect.on('item_add', (value, item) => {
+            const title = item.getAttribute('data-title') || item.textContent;
+            this.component.emit('movie-selected', { title });
+        });
+    }
+}

apps/e2e/assets/controllers/videogame-autocomplete_controller.js

@@ -0,0 +1,35 @@
+import { Controller } from '@hotwired/stimulus';
+import { getComponent } from '@symfony/ux-live-component';
+
+export default class extends Controller {
+    async connect() {
+        this.component = await getComponent(this.element.closest('[data-controller*="live"]'));
+
+        this.element.addEventListener('autocomplete:pre-connect', this._onPreConnect.bind(this));
+        this.element.addEventListener('autocomplete:connect', this._onConnect.bind(this));
+    }
+
+    disconnect() {
+        this.element.removeEventListener('autocomplete:pre-connect', this._onPreConnect.bind(this));
+        this.element.removeEventListener('autocomplete:connect', this._onConnect.bind(this));
+    }
+
+    _onPreConnect(event) {
+        const options = event.detail.options;
+        options.render = {
+            ...options.render,
+            option: (item) => {
+                return `<div data-test-id="autocomplete-option" data-title="${item.title || item.text}">${item.text}</div>`;
+            },
+        };
+    }
+
+    _onConnect(event) {
+        const tomSelect = event.detail.tomSelect;
+
+        tomSelect.on('item_add', (value, item) => {
+            const title = item.getAttribute('data-title') || item.textContent;
+            this.component.emit('videogame-selected', { title });
+        });
+    }
+}

apps/e2e/assets/translator.js

@@ -1,5 +1,6 @@
-import { localeFallbacks } from '@app/translations/configuration';
-import { trans, getLocale, setLocale, setLocaleFallbacks } from '@symfony/ux-translator';
+import { createTranslator } from "@symfony/ux-translator";
+import { messages, localeFallbacks } from "../var/translations/index.js";
+
 /*
  * This file is part of the Symfony UX Translator package.
  *
@@ -9,8 +10,9 @@ import { trans, getLocale, setLocale, setLocaleFallbacks } from '@symfony/ux-tra
  * If you use TypeScript, you can rename this file to "translator.ts" to take advantage of types checking.
  */
 
-setLocaleFallbacks(localeFallbacks);
-
-export { trans };
+export const translator = createTranslator({
+    messages,
+    localeFallbacks,
+});
 
-export * from '@app/translations';
+export const { trans, setLocale } = translator;

apps/e2e/composer.json

@@ -7,7 +7,8 @@
         "auto-scripts": {
             "cache:clear": "symfony-cmd",
             "assets:install %PUBLIC_DIR%": "symfony-cmd",
-            "importmap:install": "symfony-cmd"
+            "importmap:install": "symfony-cmd",
+            "foundry:load-fixtures": "symfony-cmd"
         },
         "post-install-cmd": [
             "@auto-scripts"
@@ -37,7 +38,10 @@
         "symfony/http-client": "6.4.*|7.3.*",
         "symfony/intl": "6.4.*|7.3.*",
         "symfony/monolog-bundle": "^3.10",
+        "symfony/property-access": "6.4.*|7.3.*",
+        "symfony/property-info": "6.4.*|7.3.*",
         "symfony/runtime": "6.4.*|7.3.*",
+        "symfony/serializer": "6.4.*|7.3.*",
         "symfony/stimulus-bundle": "^2.29.1",
         "symfony/twig-bundle": "6.4.*|7.3.*",
         "symfony/ux-autocomplete": "^2.29.1",
@@ -61,14 +65,16 @@
         "symfony/ux-typed": "^2.29.1",
         "symfony/ux-vue": "^2.29.1",
         "symfony/yaml": "6.4.*|7.3.*",
+        "symfonycasts/dynamic-forms": "^0.2",
         "twig/extra-bundle": "^3.21",
         "twig/twig": "^3.21.1"
     },
     "require-dev": {
         "symfony/debug-bundle": "6.4.*|7.3.*",
         "symfony/maker-bundle": "^1.64",
         "symfony/stopwatch": "6.4.*|7.3.*",
-        "symfony/web-profiler-bundle": "6.4.*|7.3.*"
+        "symfony/web-profiler-bundle": "6.4.*|7.3.*",
+        "zenstruck/foundry": "^2.8"
     },
     "config": {
         "platform": {

apps/e2e/config/bundles.php

@@ -30,4 +30,5 @@
     Symfony\UX\Translator\UxTranslatorBundle::class => ['all' => true],
     Symfony\UX\Typed\TypedBundle::class => ['all' => true],
     Symfony\UX\Vue\VueBundle::class => ['all' => true],
+    Zenstruck\Foundry\ZenstruckFoundryBundle::class => ['dev' => true, 'test' => true],
 ];

apps/e2e/config/packages/zenstruck_foundry.yaml

@@ -0,0 +1,16 @@
+when@dev: &dev
+    # See full configuration: https://symfony.com/bundles/ZenstruckFoundryBundle/current/index.html#full-default-bundle-configuration
+    zenstruck_foundry:
+        persistence:
+            # Flush only once per call of `PersistentObjectFactory::create()`
+            flush_once: true
+
+    # If you use the `make:factory --test` command, you may need to uncomment the following.
+    # See https://symfony.com/bundles/ZenstruckFoundryBundle/current/index.html#generate
+    #services:
+    #    App\Tests\Factory\:
+    #        resource: '%kernel.project_dir%/tests/Factory/'
+    #        autowire: true
+    #        autoconfigure: true
+
+when@test: *dev

apps/e2e/importmap.php

@@ -139,12 +139,6 @@
     '@symfony/ux-translator' => [
         'path' => './vendor/symfony/ux-translator/assets/dist/translator_controller.js',
     ],
-    '@app/translations' => [
-        'path' => './var/translations/index.js',
-    ],
-    '@app/translations/configuration' => [
-        'path' => './var/translations/configuration.js',
-    ],
     'typed.js' => [
         'version' => '2.1.0',
     ],

apps/e2e/src/Controller/AutocompleteController.php

@@ -2,14 +2,67 @@
 
 namespace App\Controller;
 
-use Psr\Log\LoggerInterface;
+use App\Form\FruitAutocompleteField;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\Form\Extension\Core\Type\ChoiceType;
 use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\Routing\Attribute\Route;
-use Symfony\UX\Chartjs\Builder\ChartBuilderInterface;
-use Symfony\UX\Chartjs\Model\Chart;
 
-#[Route('/ux-autocomplete')]
+#[Route('/ux-autocomplete', name: 'app_ux_autocomplete_')]
 final class AutocompleteController extends AbstractController
 {
+    #[Route('/without-ajax', name: 'without_ajax')]
+    public function withoutAjax(): Response
+    {
+        $formBuilder = $this->createFormBuilder();
+        $formBuilder->add('favorite_fruit', ChoiceType::class, [
+            'autocomplete' => true,
+            'label' => 'Your favorite fruit:',
+            'choices' => [
+                'Apple' => 'apple',
+                'Banana' => 'banana',
+                'Cherry' => 'cherry',
+                'Coconut' => 'coconut',
+                'Grape' => 'grape',
+                'Kiwi' => 'kiwi',
+                'Lemon' => 'lemon',
+                'Mango' => 'mango',
+                'Orange' => 'orange',
+                'Papaya' => 'papaya',
+                'Peach' => 'peach',
+                'Pineapple' => 'pineapple',
+                'Pear' => 'pear',
+                'Pomegranate' => 'pomegranate',
+                'Pomelo' => 'pomelo',
+                'Raspberry' => 'raspberry',
+                'Strawberry' => 'strawberry',
+                'Watermelon' => 'watermelon',
+            ],
+        ]);
+
+        $form = $formBuilder->getForm();
+
+        return $this->render('ux_autocomplete/without_ajax.html.twig', [
+            'form' => $form->createView()
+        ]);
+    }
+
+    #[Route('/with-ajax', name: 'with_ajax')]
+    public function withAjax(): Response
+    {
+        $formBuilder = $this->createFormBuilder();
+        $formBuilder->add('favorite_fruit', FruitAutocompleteField::class);
+
+        $form = $formBuilder->getForm();
+
+        return $this->render('ux_autocomplete/with_ajax.html.twig', [
+            'form' => $form->createView()
+        ]);
+    }
+
+    #[Route('/custom-controller', name: 'custom_controller')]
+    public function customController(): Response
+    {
+        return $this->render('ux_autocomplete/custom_controller.html.twig');
+    }
 }