feature #1937 [Map] Create Map component (Kocal)

This PR was squashed before being merged into the 2.x branch.

Discussion
----------

[Map] Create Map component

| Q             | A
| ------------- | ---
| Bug fix?      | no
| New feature?  | yes <!-- please update src/**/CHANGELOG.md files -->
| Issues        | Fix #38 <!-- prefix each issue number with "Fix #", no need to create an issue if none exist, explain below instead -->
| License       | MIT

Hi :)

This PR is a proposal for #38 a replacement for #39.

Symfony UX Map is a new Symfony UX component that makes it easy to create, customize and use interactive JavaScript maps.

The package ships with:
- a simple and generic way to create a map, with markers and info-windows
- two Bridge, [Leaflet](https://leafletjs.com/index.html) and [Google Maps](https://developers.google.com/maps/documentation/javascript)
- a way to define provider-specific options
- a nice and fluent API
- Flex recipes are also ready: symfony/recipes#1329

# Example

## Bridge configuration

```env
# .env
UX_MAP_DSN=leaflet://default
```

```yaml
# config/packages/ux_map.yaml
ux_map:
    renderer: '%env(UX_MAP_DSN)%'
```

## Map creation

An example to render a map, custom center and zoom, some markers and info windows:
```php
namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Attribute\Route;
use Symfony\UX\Map\InfoWindow;
use Symfony\UX\Map\MapFactoryInterface;
use Symfony\UX\Map\Marker;
use Symfony\UX\Map\Point;

final class ContactController extends AbstractController
{
    #[Route('/contact')]
    public function __invoke(): Response
    {
            // 1. Create a new map instance
            $myMap = (new Map());
                ->center(new Point(46.903354, 1.888334))
                ->zoom(6)
            ;

            // 2. You can add markers, with an optional info window
            $myMap
                ->addMarker(new Marker(
                    position: new Point(48.8566, 2.3522),
                    title: 'Paris'
                ))
                ->addMarker(new Marker(
                    position: new Point(45.7640, 4.8357),
                    title: 'Lyon',
                    // With an info window
                    infoWindow: new InfoWindow(
                        headerContent: '<b>Lyon</b>',
                        content: 'The French town in the historic Rhône-Alpes region, located at the junction of the Rhône and Saône rivers.'
                    )
                ));

            // 3. And inject the map in your template to render it
            return $this->render('contact/index.html.twig', [
                'my_map' => $myMap,
            ]);
    }
}
```

## Map rendering

You must call `render_map(map)` to render the map:

```twig
{{ render_map(map, { style: 'height: 700px; width: 1024px; margin: 10px' }) }}
```

It gives you this interactive Leaflet map:

<img width="1524" alt="image" src="https://github.com/user-attachments/assets/cd0f64f3-5bf2-45c6-8b8d-8ad23c6ce183">

Commits
-------

212e61d [Map] Create Map component

Author: javiereguiluz

.github/build-packages.php

@@ -9,7 +9,7 @@
 use Symfony\Component\Finder\Finder;
 
 $finder = (new Finder())
-    ->in(__DIR__.'/../src/*/')
+    ->in([__DIR__.'/../src/*/', __DIR__.'/../src/*/src/Bridge/*/'])
     ->depth(0)
     ->name('composer.json')
 ;
@@ -44,6 +44,18 @@
         $key = isset($packageData['require']['symfony/stimulus-bundle']) ? 'require' : 'require-dev';
         $packageData[$key]['symfony/stimulus-bundle'] = '@dev';
     }
+    
+    if (isset($packageData['require']['symfony/ux-map'])
+        || isset($packageData['require-dev']['symfony/ux-map'])
+    ) {
+        $repositories[] = [
+            'type' => 'path',
+            'url' => '../../../',
+        ];
+        $key = isset($packageData['require']['symfony/ux-map']) ? 'require' : 'require-dev';
+        $packageData[$key]['symfony/ux-map'] = '@dev';
+    }
+    
     if ($repositories) {
         $packageData['repositories'] = $repositories;
     }

.github/workflows/test.yaml

@@ -71,7 +71,7 @@ jobs:
 
             - id: components
               run: |
-                components=$(tree src -J -d -L 1 | jq -c '.[0].contents | map(.name)')
+                components=$(find src/ -mindepth 2 -type f -name composer.json -not -path "*/vendor/*" -printf '%h\n' | jq -R -s -c 'split("\n")[:-1] | map(. | sub("^src/";"")) | sort')
                 echo "$components"
                 echo "components=$components" >> $GITHUB_OUTPUT
 
@@ -89,6 +89,12 @@ jobs:
                     dependency-version: 'highest'
                 component: ${{ fromJson(needs.tests-php-components.outputs.components )}}
                 exclude:
+                  - component: Map # does not support PHP 8.1
+                    php-version: '8.1'
+                  - component: Map/src/Bridge/Google # does not support PHP 8.1
+                    php-version: '8.1'
+                  - component: Map/src/Bridge/Leaflet # does not support PHP 8.1
+                    php-version: '8.1'
                   - component: Swup  # has no tests
                   - component: Turbo # has its own workflow (test-turbo.yml)
                   - component: Typed  # has no tests

bin/build_javascript.js

@@ -21,6 +21,8 @@ const files = [
     // custom handling for StimulusBundle
     'src/StimulusBundle/assets/src/loader.ts',
     'src/StimulusBundle/assets/src/controllers.ts',
+    // custom handling for Bridge
+    ...glob.sync('src/*/src/Bridge/*/assets/src/*controller.ts'),
     ...glob.sync('src/*/assets/src/*controller.ts'),
 ];
 

biome.json

@@ -1,7 +1,18 @@
 {
     "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
     "files": {
-        "include": ["src/*/assets/src/**", "src/*/assets/test/**", "src/*/*.json", "src/*/*/md", "*.json", "*.md"],
+        "include": [
+            "*.json",
+            "*.md",
+            "src/*/*.json",
+            "src/*/*/md",
+            "src/*/assets/src/**",
+            "src/*/assets/test/**",
+            "src/*/src/Bridge/*.json",
+            "src/*/src/Bridge/*.md",
+            "src/*/src/Bridge/*/assets/src/**",
+            "src/*/src/Bridge/*/assets/test/**"
+        ],
         "ignore": ["**/composer.json", "**/vendor", "**/node_modules"]
     },
     "linter": {

package.json

@@ -1,6 +1,6 @@
 {
     "private": true,
-    "workspaces": ["src/*/assets"],
+    "workspaces": ["src/*/assets", "src/*/src/Bridge/*/assets"],
     "scripts": {
         "build": "node bin/build_javascript.js && node bin/build_styles.js",
         "test": "bin/run-vitest-all.sh",

rollup.config.js

@@ -46,11 +46,15 @@ const wildcardExternalsPlugin = (peerDependencies) => ({
 const moveTypescriptDeclarationsPlugin = (packagePath) => ({
     name: 'move-ts-declarations',
     writeBundle: async () => {
-        const files = glob.sync(path.join(packagePath, 'dist', '*', 'assets', 'src', '**/*.d.ts'));
+        const isBridge = packagePath.includes('src/Bridge');
+        const globPattern = isBridge
+            ? path.join(packagePath, 'dist', packagePath.replace(/^src\//, ''), '**/*.d.ts')
+            : path.join(packagePath, 'dist', '*', 'assets', 'src', '**/*.d.ts')
+        const files = glob.sync(globPattern);
         files.forEach((file) => {
-            // a bit odd, but remove first 7 directories, which will leave
+            // a bit odd, but remove first 7 or 13 directories, which will leave
             // only the relative path to the file
-            const relativePath = file.split('/').slice(7).join('/');
+            const relativePath = file.split('/').slice(isBridge ? 13 : 7).join('/');
 
             const targetFile = path.join(packagePath, 'dist', relativePath);
             if (!fs.existsSync(path.dirname(targetFile))) {

src/Map/.gitattributes

@@ -0,0 +1,8 @@
+/.gitattributes export-ignore
+/.gitignore export-ignore
+/.symfony.bundle.yaml export-ignore
+/phpunit.xml.dist export-ignore
+/assets/src export-ignore
+/assets/test export-ignore
+/assets/vitest.config.js export-ignore
+/tests export-ignore

src/Map/.gitignore

@@ -0,0 +1,3 @@
+vendor
+composer.lock
+.phpunit.result.cache

src/Map/.symfony.bundle.yaml

@@ -0,0 +1,3 @@
+branches: ["2.x"]
+maintained_branches: ["2.x"]
+doc_dir: "doc"

src/Map/CHANGELOG.md

@@ -0,0 +1,5 @@
+# CHANGELOG
+
+## Unreleased
+
+-   Component added