[Interactive form validation] New interactive form validation package

src/InteractiveFormValidation/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/InteractiveFormValidation/assets/dist/controller.d.ts

@@ -0,0 +1,19 @@
+import { Controller } from '@hotwired/stimulus';
+export type AlertStrategy = 'browser_native' | 'emit_event';
+export declare const invalidFormAlertEventName = "interactive-form-validation-invalid-alert";
+export default class extends Controller {
+    readonly msgValue: string;
+    readonly idValue?: string;
+    readonly withAlertValue: boolean;
+    readonly alertStrategyValue: AlertStrategy;
+    static values: {
+        msg: StringConstructor;
+        id: StringConstructor;
+        withAlert: BooleanConstructor;
+        alertStrategy: StringConstructor;
+    };
+    executeBrowserStrategy: () => void;
+    executeEmitStrategy: () => void;
+    connect(): void;
+    resolveStrategy(): (() => void);
+}

src/InteractiveFormValidation/assets/dist/controller.js

@@ -0,0 +1,45 @@
+import { Controller } from '@hotwired/stimulus';
+
+const invalidFormAlertEventName = 'interactive-form-validation-invalid-alert';
+class default_1 extends Controller {
+    constructor() {
+        super(...arguments);
+        this.executeBrowserStrategy = () => {
+            alert(this.msgValue);
+        };
+        this.executeEmitStrategy = () => {
+            document.dispatchEvent(new CustomEvent(invalidFormAlertEventName, { detail: this.msgValue }));
+        };
+    }
+    connect() {
+        super.connect();
+        document.addEventListener(invalidFormAlertEventName, (ev) => {
+            console.log(ev);
+        });
+        if (this.withAlertValue)
+            this.resolveStrategy()();
+        if (this.idValue) {
+            const el = document.getElementById(this.idValue);
+            if (el instanceof HTMLElement) {
+                el.focus({ preventScroll: true });
+                el.scrollIntoView({ block: 'center', behavior: 'smooth' });
+            }
+        }
+    }
+    resolveStrategy() {
+        if (this.alertStrategyValue === 'browser_native') {
+            return this.executeBrowserStrategy;
+        }
+        else {
+            return this.executeEmitStrategy;
+        }
+    }
+}
+default_1.values = {
+    msg: String,
+    id: String,
+    withAlert: Boolean,
+    alertStrategy: String,
+};
+
+export { default_1 as default, invalidFormAlertEventName };

src/InteractiveFormValidation/assets/package.json

@@ -0,0 +1,27 @@
+{
+    "name": "@symfony/ux-interactive-form-validation",
+    "description": "Interactive validation for Symfony Forms. Automatic scroll into and alert.",
+    "license": "MIT",
+    "version": "1.0.0",
+    "main": "dist/controller.js",
+    "types": "dist/controller.d.ts",
+    "symfony": {
+        "controllers": {
+            "interactive-form-validation": {
+                "main": "dist/controller.js",
+                "webpackMode": "eager",
+                "fetch": "eager",
+                "enabled": true
+            }
+        },
+        "importmap": {
+            "@hotwired/stimulus": "^3.0.0"
+        }
+    },
+    "peerDependencies": {
+        "@hotwired/stimulus": "^3.0.0"
+    },
+    "devDependencies": {
+        "@hotwired/stimulus": "^3.0.0"
+    }
+}

src/InteractiveFormValidation/assets/src/controller.ts

@@ -0,0 +1,61 @@
+/*
+ * This file is part of the Symfony package.
+ *
+ * (c) Fabien Potencier <fabien@symfony.com>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+'use strict'
+
+import { Controller } from '@hotwired/stimulus'
+
+export type AlertStrategy = 'browser_native' | 'emit_event'
+export const invalidFormAlertEventName = 'interactive-form-validation-invalid-alert'
+
+/**
+ * @author Mateusz Anders <anders_mateusz@outlook.com>
+ */
+export default class extends Controller {
+    declare readonly msgValue: string
+    declare readonly idValue?: string
+    declare readonly withAlertValue: boolean
+    declare readonly alertStrategyValue: AlertStrategy
+    static values = {
+        msg: String,
+        id: String,
+        withAlert: Boolean,
+        alertStrategy: String,
+    }
+
+    executeBrowserStrategy = () => {
+        alert(this.msgValue)
+    }
+
+    executeEmitStrategy = () => {
+        document.dispatchEvent(new CustomEvent(invalidFormAlertEventName, { detail: this.msgValue }))
+    }
+
+    connect() {
+        super.connect()
+
+        if (this.withAlertValue) this.resolveStrategy()()
+
+        if (this.idValue) {
+            const el = document.getElementById(this.idValue)
+            if (el instanceof HTMLElement) {
+                el.focus({ preventScroll: true })
+                el.scrollIntoView({ block: 'center', behavior: 'smooth' })
+            }
+        }
+    }
+
+    resolveStrategy(): (() => void) {
+        if (this.alertStrategyValue === 'browser_native') {
+            return this.executeBrowserStrategy
+        } else {
+            return this.executeEmitStrategy
+        }
+    }
+}

src/InteractiveFormValidation/composer.json

@@ -0,0 +1,48 @@
+{
+  "name": "symfony/ux-interactive-form-validation",
+  "type": "symfony-bundle",
+  "description": "Interactive validation for Symfony Forms. Automatic scroll into and alert.",
+  "keywords": [
+    "symfony-ux"
+  ],
+  "homepage": "https://symfony.com",
+  "license": "MIT",
+  "authors": [
+    {
+      "name": "Mateusz Anders",
+      "email": "anders_mateusz@outlook.com"
+    },
+    {
+      "name": "Symfony Community",
+      "homepage": "https://symfony.com/contributors"
+    }
+  ],
+  "autoload": {
+    "psr-4": {
+      "Symfony\\UX\\InteractiveFormValidation\\": "src/"
+    }
+  },
+  "require": {
+    "php": ">=8.1",
+    "symfony/config": "^5.4|^6.0",
+    "symfony/dependency-injection": "^5.4|^6.0",
+    "symfony/form": "^5.4|^6.0",
+    "symfony/http-kernel": "^5.4|^6.0",
+    "symfony/options-resolver": "^5.4|^6.0"
+  },
+  "require-dev": {
+    "intervention/image": "^2.5",
+    "kornrunner/blurhash": "^1.1",
+    "symfony/framework-bundle": "^5.4|^6.0",
+    "symfony/phpunit-bridge": "^5.2|^6.0",
+    "symfony/twig-bundle": "^5.4|^6.0",
+    "symfony/var-dumper": "^5.4|^6.0"
+  },
+  "extra": {
+    "thanks": {
+      "name": "symfony/ux",
+      "url": "https://github.com/symfony/ux"
+    }
+  },
+  "minimum-stability": "dev"
+}

src/InteractiveFormValidation/src/Alert/Strategy.php

@@ -0,0 +1,23 @@
+<?php
+
+/*
+ * This file is part of the Symfony package.
+ *
+ * (c) Fabien Potencier <fabien@symfony.com>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+declare(strict_types=1);
+
+namespace Symfony\UX\InteractiveFormValidation\Alert;
+
+/**
+ * @author Mateusz Anders <anders_mateusz@outlook.com>
+ */
+enum Strategy: string
+{
+    case BROWSER_NATIVE = 'browser_native';
+    case EMIT_EVENT = 'emit_event';
+}

src/InteractiveFormValidation/src/DependencyInjection/Configuration.php

@@ -0,0 +1,49 @@
+<?php
+
+/*
+ * This file is part of the Symfony package.
+ *
+ * (c) Fabien Potencier <fabien@symfony.com>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+declare(strict_types=1);
+
+namespace Symfony\UX\InteractiveFormValidation\DependencyInjection;
+
+use Symfony\Component\Config\Definition\Builder\TreeBuilder;
+use Symfony\Component\Config\Definition\ConfigurationInterface;
+use Symfony\UX\InteractiveFormValidation\Alert\Strategy as AlertStrategy;
+
+/**
+ * @author Mateusz Anders <anders_mateusz@outlook.com>
+ */
+final class Configuration implements ConfigurationInterface
+{
+
+    public function getConfigTreeBuilder(): TreeBuilder
+    {
+        $treeBuilder = new TreeBuilder('interactive_form_validation');
+        $treeBuilder
+            ->getRootNode()
+            ->children()
+                ->enumNode('alert_strategy')
+                    ->values(AlertStrategy::cases())
+                    ->info('A strategy to use when notifying an user that a form is invalid')
+                    ->defaultValue(AlertStrategy::BROWSER_NATIVE)
+                ->end()
+                ->booleanNode('with_alert')
+                    ->info('Whether the form invalid alert should be shown to an user')
+                    ->defaultTrue()
+                ->end()
+                ->booleanNode('enabled')
+                    ->info('Whether the feature should be enabled for all forms globally')
+                    ->defaultTrue()
+                ->end()
+            ->end()
+            ;
+        return $treeBuilder;
+    }
+}

src/InteractiveFormValidation/src/DependencyInjection/InteractiveFormValidationExtension.php

@@ -0,0 +1,76 @@
+<?php
+
+/*
+ * This file is part of the Symfony package.
+ *
+ * (c) Fabien Potencier <fabien@symfony.com>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+declare(strict_types=1);
+
+namespace Symfony\UX\InteractiveFormValidation\DependencyInjection;
+
+use Symfony\Component\DependencyInjection\Reference;
+use Symfony\Component\AssetMapper\AssetMapperInterface;
+use Symfony\Component\DependencyInjection\ContainerBuilder;
+use Symfony\Component\DependencyInjection\Extension\PrependExtensionInterface;
+use Symfony\Component\HttpKernel\DependencyInjection\Extension;
+use Symfony\UX\InteractiveFormValidation\Form\Extension\InteractiveFormValidationExtension as FormExtension;
+
+/**
+ * @author Mateusz Anders <anders_mateusz@outlook.com>
+ *
+ * @internal
+ */
+class InteractiveFormValidationExtension extends Extension implements PrependExtensionInterface
+{
+
+    public function load(array $configs, ContainerBuilder $container): void
+    {
+        $configuration = new Configuration();
+
+        $config = $this->processConfiguration($configuration, $configs);
+
+        $container->register('ux.interactive_form_validation.form_extension', FormExtension::class)
+            ->setArguments([
+                new Reference('request_stack'),
+                new Reference('twig.form.renderer'),
+                $config,
+            ])
+            ->addTag('form.type_extension')
+        ;
+    }
+
+    public function prepend(ContainerBuilder $container)
+    {
+        if (!$this->isAssetMapperAvailable($container)) {
+            return;
+        }
+
+        $container->prependExtensionConfig('framework', [
+            'asset_mapper' => [
+                'paths' => [
+                    __DIR__.'/../../assets/dist' => '@symfony/ux-interactive-form-validation',
+                ],
+            ],
+        ]);
+    }
+
+    private function isAssetMapperAvailable(ContainerBuilder $container): bool
+    {
+        if (!interface_exists(AssetMapperInterface::class)) {
+            return false;
+        }
+
+        // check that FrameworkBundle 6.3 or higher is installed
+        $bundlesMetadata = $container->getParameter('kernel.bundles_metadata');
+        if (!isset($bundlesMetadata['FrameworkBundle'])) {
+            return false;
+        }
+
+        return is_file($bundlesMetadata['FrameworkBundle']['path'].'/Resources/config/asset_mapper.php');
+    }
+}