### Install Vue Loader and Watch Assets

Source: https://github.com/symfony/ux/blob/3.x/src/Vue/doc/index.rst

Install the Vue loader via npm and start the asset watch process. This is a required step after installing the bundle.

```bash
npm install -D vue-loader --force
npm run watch
```

--------------------------------

### Install Autocomplete Component

Source: https://github.com/symfony/ux/blob/3.x/src/Autocomplete/doc/index.rst

Install the bundle using Composer. If using WebpackEncore, also install assets and restart Encore.

```bash
composer require symfony/ux-autocomplete
```

```bash
npm install --force
npm run watch
```

--------------------------------

### Install Symfony UX React Bundle

Source: https://github.com/symfony/ux/blob/3.x/src/React/doc/index.rst

Install the bundle using Composer. The Flex recipe handles initial setup, including enabling React presets in webpack.config.js and configuring assets/app.js.

```bash
composer require symfony/ux-react
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/symfony/ux/blob/3.x/apps/demo-native/README.md

Run this command to install the necessary PHP dependencies for the project using Composer.

```bash
composer install
```

--------------------------------

### Install Live Component Bundle

Source: https://github.com/symfony/ux/blob/3.x/src/LiveComponent/doc/index.rst

This command installs the `symfony/ux-live-component` package using Composer.

```bash
$ composer require symfony/ux-live-component
```

--------------------------------

### Install UX Map Bundle

Source: https://github.com/symfony/ux/blob/3.x/src/Map/doc/index.rst

Install the UX Map bundle using Composer and Symfony Flex.

```bash
composer require symfony/ux-map
```

--------------------------------

### Install Symfony UX Calendar Link

Source: https://github.com/symfony/ux/blob/3.x/src/CalendarLink/doc/index.rst

Install the bundle using Composer and Symfony Flex.

```bash
composer require symfony/ux-calendar-link
```

--------------------------------

### Install Flowbite with npm

Source: https://github.com/symfony/ux/blob/3.x/src/Toolkit/kits/flowbite-4/INSTALL.md

Run this command to install the Flowbite package using npm.

```bash
npm install flowbite
```

--------------------------------

### Install Chart.js Zoom Plugin

Source: https://github.com/symfony/ux/blob/3.x/src/Chartjs/doc/index.rst

Install the chartjs-plugin-zoom using npm.

```terminal
$ npm install chartjs-plugin-zoom -D
```

--------------------------------

### Install Symfony UX Notify

Source: https://github.com/symfony/ux/blob/3.x/src/Notify/doc/index.rst

Install the bundle using Composer. If using WebpackEncore, also install and watch npm packages.

```terminal
composer require symfony/ux-notify
```

```terminal
npm install --force
npm run watch
```

--------------------------------

### Install phpdocumentor/reflection-docblock

Source: https://github.com/symfony/ux/blob/3.x/src/LiveComponent/doc/index.rst

Install this library to enable collection type extraction from docblocks.

```bash
$ composer require phpdocumentor/reflection-docblock
```

--------------------------------

### Install Symfony UX Cropper.js

Source: https://github.com/symfony/ux/blob/3.x/src/Cropperjs/doc/index.rst

Install the bundle using Composer. If using WebpackEncore, also install npm assets and restart Encore.

```bash
$ composer require symfony/ux-cropperjs
```

```bash
$ npm install --force
$ npm run watch
```

--------------------------------

### Install Symfony UX Dropzone

Source: https://github.com/symfony/ux/blob/3.x/src/Dropzone/doc/index.rst

Install the bundle using Composer. If using WebpackEncore, also install assets and restart Encore.

```bash
$ composer require symfony/ux-dropzone
```

```bash
$ npm install --force
$ npm run watch
```

--------------------------------

### Install Symfony UX Native

Source: https://github.com/symfony/ux/blob/3.x/src/Native/doc/index.rst

Install the bundle using Composer. If using WebpackEncore, install assets and restart Encore.

```terminal
composer require symfony/ux-native
```

```terminal
npm install --force
npm run watch
```

--------------------------------

### Install Symfony UX Chart.js

Source: https://github.com/symfony/ux/blob/3.x/src/Chartjs/doc/index.rst

Install the bundle using Composer. If using WebpackEncore, also install and watch assets.

```terminal
$ composer require symfony/ux-chartjs
```

```terminal
$ npm install --force
$ npm run watch
```

--------------------------------

### Install Symfony UX Turbo

Source: https://github.com/symfony/ux/blob/3.x/src/Turbo/doc/index.rst

Install the bundle using Composer. If using WebpackEncore, also install and restart Encore.

```terminal
$ composer require symfony/ux-turbo

```

```terminal
$ npm install --force
$ npm run watch

```

--------------------------------

### Install Mercure Bundle

Source: https://github.com/symfony/ux/blob/3.x/src/Turbo/doc/index.rst

Install the Mercure Bundle using Composer to enable real-time communication features.

```bash
$ composer require symfony/mercure-bundle
```

--------------------------------

### Vue Controller Component Example

Source: https://github.com/symfony/ux/blob/3.x/src/Vue/doc/index.rst

A basic Vue 3 component using the `<script setup>` syntax. It defines a 'name' prop that can be passed from Twig.

```vue
// assets/vue/controllers/Hello.vue
<template>
    <div>Hello {{ name }}!</div>
</template>

<script setup>
    defineProps({
        name: String
    });
</script>
```

--------------------------------

### Install symfony/ux-google-map PHP and npm packages

Source: https://github.com/symfony/ux/blob/3.x/src/Map/src/Bridge/Google/assets/README.md

Use these commands to install both the PHP and npm packages when decoupling JavaScript dependencies. Ensure the versions match.

```shell
composer require symfony/ux-google-map:2.23.0
npm add @symfony/ux-google-map@2.23.0
```

--------------------------------

### Install Stimulus Bundle

Source: https://github.com/symfony/ux/blob/3.x/src/TwigComponent/doc/index.rst

Command to install the Stimulus bundle, which is required for using the `stimulus_controller()` function.

```terminal
$ composer require symfony/stimulus-bundle
```

--------------------------------

### Install Babel Preset for React

Source: https://github.com/symfony/ux/blob/3.x/src/React/doc/index.rst

Install the necessary Babel preset for React and run the watch command to compile assets. This is required for JSX compilation.

```bash
npm install -D @babel/preset-react --force
npm run watch
```

--------------------------------

### Example Native Configuration JSON Output

Source: https://github.com/symfony/ux/blob/3.x/src/Native/doc/index.rst

The resulting JSON file served by the bundle for a registered configuration. This example shows settings and rules for an iOS configuration.

```json
{
    "settings": {
        "use_local_db": true,
        "cable": {
            "script_url": "https://example.com/cable.js"
        }
    },
    "rules": [
        {
            "patterns": [
                ".*"
            ],
            "properties": {
                "context": "default",
                "pull_to_refresh_enabled": true
            }
        }
    ]
}
```

--------------------------------

### Install Live Component Assets with npm

Source: https://github.com/symfony/ux/blob/3.x/src/LiveComponent/doc/index.rst

These commands install and watch frontend assets for Live Components using npm. This step is not needed if using AssetMapper.

```bash
$ npm install --force
$ npm run watch
```

--------------------------------

### Install Dropzone PHP and NPM Packages

Source: https://github.com/symfony/ux/blob/3.x/src/Dropzone/assets/README.md

Use these commands to install the symfony/ux-dropzone PHP package and the corresponding npm package. Ensure the versions match.

```shell
composer require symfony/ux-dropzone:2.23.0
npm add @symfony/ux-dropzone@2.23.0
```

--------------------------------

### Install symfony/ux-react Package

Source: https://github.com/symfony/ux/blob/3.x/src/React/assets/README.md

Use these commands to install the symfony/ux-react PHP package and its corresponding npm package. Ensure the versions match.

```shell
composer require symfony/ux-react:2.23.0
```

```shell
npm add @symfony/ux-react@2.23.0
```

--------------------------------

### Install symfony/ux-turbo with Composer and npm

Source: https://github.com/symfony/ux/blob/3.x/src/Turbo/assets/README.md

Use these commands to install the symfony/ux-turbo package directly. Ensure the versions match between Composer and npm.

```shell
composer require symfony/ux-turbo:2.23.0
```

```shell
npm add @symfony/ux-turbo@2.23.0
```

--------------------------------

### Install Chartjs Assets and PHP Package

Source: https://github.com/symfony/ux/blob/3.x/src/Chartjs/assets/README.md

Use these commands to install the Chartjs assets and the corresponding PHP package. Ensure the versions match.

```shell
composer require symfony/ux-chartjs:2.23.0
npm add @symfony/ux-chartjs@2.23.0
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/symfony/ux/blob/3.x/CONTRIBUTING.md

Install both root PHP dependencies using Composer and JavaScript dependencies using PNPM. Ensure Corepack is enabled first.

```shell
# Install root PHP dependencies
$ composer install

# Enable PNPM through Corepack, and install JavaScript dependencies
$ corepack enable && pnpm install
```

--------------------------------

### Install Live Component PHP and NPM Packages

Source: https://github.com/symfony/ux/blob/3.x/src/LiveComponent/assets/README.md

Use these commands to install the symfony/ux-live-component PHP package and its corresponding npm package. Ensure the versions match exactly.

```shell
composer require symfony/ux-live-component:2.23.0
npm add @symfony/ux-live-component@2.23.0
```

--------------------------------

### Install and Build All JS/TS Packages

Source: https://github.com/symfony/ux/blob/3.x/AGENTS.original.md

Installs project dependencies using pnpm and builds all TypeScript/JavaScript packages within the monorepo. Ensure Node 22 and pnpm v10 are installed.

```bash
pnpm install
pnpm run build            # build all packages (tsdown)
```

--------------------------------

### Install Symfony UX Vue.js

Source: https://github.com/symfony/ux/blob/3.x/src/Vue/doc/index.rst

Install the bundle using Composer. The Flex recipe automates configuration for WebpackEncore and asset loading.

```bash
composer require symfony/ux-vue
```

--------------------------------

### Install Symfony UX Translator

Source: https://github.com/symfony/ux/blob/3.x/src/Translator/doc/index.rst

Install the bundle using Composer. This command adds the necessary package to your project.

```bash
composer require symfony/ux-translator
```

--------------------------------

### Install Symfony HTTP Client

Source: https://github.com/symfony/ux/blob/3.x/src/Icons/doc/index.rst

Install the Symfony HTTP Client package using Composer. This is a prerequisite for using the icons package.

```bash
$ composer require symfony/http-client
```

--------------------------------

### LiveProp with String and Array for Select/Radio

Source: https://github.com/symfony/ux/blob/3.x/src/LiveComponent/doc/index.rst

Example demonstrating a string LiveProp for meal selection and an array LiveProp for food choices, suitable for select and radio inputs.

```php
#[AsLiveComponent]
class EditPost
{
    // ...

    #[LiveProp(writable: true)]
    public string $meal = 'lunch';

    #[LiveProp(writable: true)]
    public array $foods = ['pizza', 'tacos'];
}
```

--------------------------------

### Install symfony/ux-vue with Composer and npm

Source: https://github.com/symfony/ux/blob/3.x/src/Vue/assets/README.md

Use these commands to install the symfony/ux-vue package directly. Ensure the versions match between Composer and npm.

```shell
composer require symfony/ux-vue:2.23.0
npm add @symfony/ux-vue@2.23.0
```

--------------------------------

### Component Mount Method Example

Source: https://github.com/symfony/ux/blob/3.x/src/TwigComponent/doc/index.rst

The `mount()` method is called after instantiation but before props are assigned, useful for complex prop initialization logic.

```php
// src/Twig/Components/Alert.php
// ...

#[AsTwigComponent]
class Alert
{
    public string $message;
    public string $type = 'success';

    public function mount(): void
    {
        // ❌ this won't work: at this point $type still has its default value.
        // Passed values are not yet available in props.
        if ('error' === $this->type) {
            // ...
        }
    }
}
```

--------------------------------

### LiveProp with Boolean and Array

Source: https://github.com/symfony/ux/blob/3.x/src/LiveComponent/doc/index.rst

Example demonstrating a boolean LiveProp for terms acceptance and an array LiveProp for selected foods.

```php
#[AsLiveComponent]
class EditPost
{
    #[LiveProp(writable: true)]
    public bool $agreeToTerms = false;

    #[LiveProp(writable: true)]
    public array $foods = ['pizza', 'tacos'];
}
```

--------------------------------

### Install symfony/ux-native with Composer and npm

Source: https://github.com/symfony/ux/blob/3.x/src/Native/assets/README.md

Use these commands to install the symfony/ux-native package directly. Ensure the versions match between Composer and npm.

```shell
composer require symfony/ux-native:2.33.0
```

```shell
npm add @symfony/ux-native@2.33.0
```

--------------------------------

### Start E2E App Server

Source: https://github.com/symfony/ux/blob/3.x/apps/e2e/README.md

Use this command to start the local development server for the E2E application. The app will be accessible at http://localhost:9876.

```shell
symfony serve
```

--------------------------------

### Install Flowbite with AssetMapper

Source: https://github.com/symfony/ux/blob/3.x/src/Toolkit/kits/flowbite-4/INSTALL.md

Use this command to install Flowbite when using Symfony AssetMapper.

```bash
php bin/console importmap:require flowbite
```

--------------------------------

### Example SVG Icon Output

Source: https://github.com/symfony/ux/blob/3.x/src/Icons/README.md

This is an example of the raw SVG output for an icon, including its `viewBox`, `fill`, and CSS classes.

```html
{# Render the "check" icon from "mdi" pack with class #}
<svg viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4">
    <path d="M21 7L9 19l-5.5-5.5l1.41-1.41L9 16.17L19.59 5.59z"/>
</svg>
```

--------------------------------

### Install JavaScript Assets with npm

Source: https://github.com/symfony/ux/blob/3.x/src/Map/src/Bridge/Google/README.md

If using WebpackEncore, install JavaScript assets and restart Encore. This step is not needed if using AssetMapper.

```shell
npm install --force
npm run watch
```

--------------------------------

### Install E2E App Dependencies

Source: https://github.com/symfony/ux/blob/3.x/apps/e2e/README.md

Run these commands to set up the E2E testing environment. Ensure Docker is running and then update Composer dependencies for specific Symfony versions.

```shell
docker compose up -d
symfony php ../../.github/build-packages.php

SYMFONY_REQUIRE=6.4.* symfony composer update
# or...
SYMFONY_REQUIRE=7.3.* symfony composer update
```

--------------------------------

### Install StimulusBundle via Composer

Source: https://github.com/symfony/ux/blob/3.x/src/StimulusBundle/doc/index.rst

Install the StimulusBundle using Composer. This is the primary method for adding the bundle to a Symfony project.

```bash
composer require symfony/stimulus-bundle
```

--------------------------------

### Create a New Map Instance

Source: https://github.com/symfony/ux/blob/3.x/src/Map/doc/index.rst

Create a new map instance by calling ``new Map()``. This is the starting point for configuring your map.

```php
use Symfony\UX\Map\Map;

// Create a new map instance
$map = new Map();
```

--------------------------------

### Basic Stimulus Controller Example

Source: https://github.com/symfony/ux/blob/3.x/src/StimulusBundle/doc/index.rst

A simple Stimulus controller demonstrating the connect method. This controller is typically placed in the assets/controllers directory.

```javascript
import { Controller } from '@hotwired/stimulus';

export default class extends Controller {
    connect() {
        this.element.textContent = 'Hello Stimulus! Edit me in assets/controllers/hello_controller.js';
    }
}
```

--------------------------------

### Install and Watch Assets with WebpackEncore

Source: https://github.com/symfony/ux/blob/3.x/src/Translator/doc/index.rst

If using WebpackEncore, install the JavaScript assets and restart Encore. This ensures the translator assets are available. This step is not needed if using AssetMapper.

```bash
npm install --force
npm run watch
```

--------------------------------

### Install Symfony UX Translator

Source: https://github.com/symfony/ux/blob/3.x/src/Translator/assets/README.md

Use these commands to install the symfony/ux-translator PHP package and its corresponding npm asset. Ensure the versions match exactly.

```shell
composer require symfony/ux-translator:2.23.0
```

```shell
npm add @symfony/ux-translator@2.23.0
```

--------------------------------

### Install Symfony UX Cropperjs Package

Source: https://github.com/symfony/ux/blob/3.x/src/Cropperjs/assets/README.md

Use these commands to install the symfony/ux-cropperjs PHP package and its corresponding npm package. Ensure the versions match.

```shell
composer require symfony/ux-cropperjs:2.23.0
```

```shell
npm add @symfony/ux-cropperjs@2.23.0
```

--------------------------------

### Install Shadcn UI and Tailwind CSS with npm

Source: https://github.com/symfony/ux/blob/3.x/src/Toolkit/kits/shadcn/INSTALL.md

Use npm to install the necessary packages for Shadcn UI and tw-animate-css. This is the first step in integrating Shadcn UI into your project.

```bash
npm install shadcn tw-animate-css
```

--------------------------------

### Install symfony/ux-notify with Composer and npm

Source: https://github.com/symfony/ux/blob/3.x/src/Notify/assets/README.md

Use these commands to install the symfony/ux-notify package, ensuring the versions match between Composer and npm. This is recommended for advanced users decoupling JavaScript dependencies.

```shell
composer require symfony/ux-notify:2.23.0
npm add @symfony/ux-notify@2.23.0
```

--------------------------------

### Install PHP Dependencies Per Package

Source: https://github.com/symfony/ux/blob/3.x/AGENTS.original.md

Installs Composer dependencies for a specific PHP package. Navigate to the package's directory first.

```bash
cd src/Autocomplete && composer install
```

--------------------------------

### Install Google Maps Bridge with Composer

Source: https://github.com/symfony/ux/blob/3.x/src/Map/src/Bridge/Google/README.md

Install the UX Google Maps bridge using Composer. This command is for PHP integration.

```shell
composer require symfony/ux-google-map
```

--------------------------------

### Install symfony/ux-icons Package

Source: https://github.com/symfony/ux/blob/3.x/src/Icons/doc/index.rst

Use Composer to add the symfony/ux-icons package to your project.

```bash
composer require symfony/ux-icons
```

--------------------------------

### Install Symfony UX Autocomplete Package

Source: https://github.com/symfony/ux/blob/3.x/src/Autocomplete/assets/README.md

Use these commands to install the @symfony/ux-autocomplete npm package and the symfony/ux-autocomplete PHP package, ensuring their versions match. This is for advanced users decoupling JavaScript dependencies.

```shell
composer require symfony/ux-autocomplete:2.23.0
npm add @symfony/ux-autocomplete@2.23.0
```

--------------------------------

### Install Leaflet Map PHP and NPM Packages

Source: https://github.com/symfony/ux/blob/3.x/src/Map/src/Bridge/Leaflet/assets/README.md

Use these commands to install the Leaflet Map PHP package and its corresponding NPM package. Ensure the versions match.

```shell
composer require symfony/ux-leaflet-map:2.23.0
```

```shell
npm add @symfony/ux-leaflet-map@2.23.0
```

--------------------------------

### Create Reminder Before Event

Source: https://github.com/symfony/ux/blob/3.x/src/CalendarLink/doc/index.rst

Example of creating a reminder that triggers a specified time before the event.

```php
CalendarReminder::before(minutes: 15);
```

--------------------------------

### Example Bridge Controller Implementation

Source: https://github.com/symfony/ux/blob/3.x/src/Native/doc/index.rst

This is an example of a JavaScript file generated for a Bridge controller. It extends BridgeComponent and defines static component name, connect, and disconnect methods for communication handling.

```javascript
// assets/controllers/contact_form_controller.js
import { BridgeComponent } from "@hotwired/hotwire-native-bridge"

export default class extends BridgeComponent {
    static component = "contact_form"

    connect() {
        super.connect()
        // The bridge is now ready and will handle communication
        // between your web app and the native application
    }

    disconnect() {
        super.disconnect()
        // Clean up any resources or event listeners here
    }
}
```

--------------------------------

### Link Local UX Packages and Run Web Server

Source: https://github.com/symfony/ux/blob/3.x/src/Toolkit/CONTRIBUTING.md

Navigate to the `ux.symfony.com/` directory and execute these commands to link local UX packages and start the local web server for previewing kits.

```shell
# Link local UX packages
php ../link
```

```shell
# Run the local web server
symfony serve -d
```

--------------------------------

### Create and Customize a Live Component Instance

Source: https://github.com/symfony/ux/blob/3.x/src/LiveComponent/doc/index.rst

Demonstrates how to create a Live Component instance within a test environment, customize its route locale, and use a test client for interactions.

```php
$testComponent->setRouteLocale('fr');

$client = self::getContainer()->get('test.client');

// do some stuff with the client (ie login user via form)

$testComponent = $this->createLiveComponent(
    name: 'MyComponent',
    data: ['foo' => 'bar'],
    client: $client,
);
```

--------------------------------

### Create Daily Recurrence

Source: https://github.com/symfony/ux/blob/3.x/src/CalendarLink/doc/index.rst

Example of creating a daily recurrence rule with an interval of 2.

```php
CalendarRecurrence::daily(interval: 2);
```

--------------------------------

### Google Maps DSN Configuration

Source: https://github.com/symfony/ux/blob/3.x/src/Map/src/Bridge/Google/README.md

Configure the UX_MAP_DSN environment variable for Google Maps integration. Examples show basic setup and options for version, language, region, and libraries.

```dotenv
UX_MAP_DSN=google://GOOGLE_MAPS_API_KEY@default

# With
UX_MAP_DSN=google://GOOGLE_MAPS_API_KEY@default?v=weekly
UX_MAP_DSN=google://GOOGLE_MAPS_API_KEY@default?language=fr&region=FR
UX_MAP_DSN=google://GOOGLE_MAPS_API_KEY@default?libraries[]=geometry&libraries[]=places
```

--------------------------------

### List All Twig Components

Source: https://github.com/symfony/ux/blob/3.x/src/TwigComponent/doc/index.rst

Use this command to get a list of all components in your application. It shows the component name, its associated class, template path, and type.

```bash
php bin/console debug:twig-component
```

--------------------------------

### Run Symfony Development Server

Source: https://github.com/symfony/ux/blob/3.x/apps/demo-native/README.md

Starts the Symfony development server, configured to allow connections from all IP addresses. This is necessary for native apps on physical devices to connect.

```bash
symfony serve --allow-all-ip
```

--------------------------------

### Install Leaflet Bridge with Composer

Source: https://github.com/symfony/ux/blob/3.x/src/Map/src/Bridge/Leaflet/README.md

Install the Leaflet bridge package using Composer. This is the standard method for PHP projects.

```shell
composer require symfony/ux-leaflet-map
```

--------------------------------

### Using mount() with Non-Existent Public Properties

Source: https://github.com/symfony/ux/blob/3.x/src/TwigComponent/doc/index.rst

The mount() method can accept props even if no matching public property exists. Use these props to initialize other properties.

```html+twig
<twig:Alert isError="{{ true }}" message="..."/>
```

```php
#[AsTwigComponent]
class Alert
{
    public string $message;
    public string $type = 'success';

    public function mount(bool $isError = false): void
    {
        if ($isError) {
            $this->type = 'danger';
        }
    }

    // ...
}
```

--------------------------------

### PHP LiveComponent with Emit and LiveAction

Source: https://github.com/symfony/ux/blob/3.x/src/LiveComponent/doc/index.rst

Example of a LiveComponent that saves data and emits an event upon creation of a new item. It demonstrates the use of LiveProp, PostMount, and LiveAction attributes.

```php
// src/Twig/InvoiceLineItemForm.php
// ...

#[AsLiveComponent]
final class InvoiceLineItemForm
{
    // ...

    #[LiveProp]
    #[Valid]
    public ?InvoiceLineItem $lineItem = null;

    #[PostMount]
    public function postMount(): void
    {
        if (!$this->lineItem) {
            $this->lineItem = new InvoiceLineItem();
        }
    }

    #[LiveAction]
    public function save(EntityManagerInterface $entityManager)
    {
        $isNew = null === $this->lineItem->getId();

        $entityManager->persist($this->lineItem);
        $entityManager->flush();

        if ($isNew) {
            $this->emit('lineItem:created');
        }
    }
}
```

--------------------------------

### Install CSS Packages with AssetMapper

Source: https://github.com/symfony/ux/blob/3.x/src/Toolkit/kits/shadcn/INSTALL.md

Use this command to install the required CSS packages for Shadcn UI and tw-animate-css when using Symfony AssetMapper.

```shell
php bin/console importmap:require shadcn/dist/tailwind.css tw-animate-css/dist/tw-animate.css
```

--------------------------------

### Dump Icon Configuration Reference

Source: https://github.com/symfony/ux/blob/3.x/src/Icons/doc/index.rst

Display the default configuration values for the UX Icons component.

```bash
# Displays the default config values
$ php bin/console config:dump-reference ux_icons
```

--------------------------------

### Install Twig Component Package

Source: https://github.com/symfony/ux/blob/3.x/src/Icons/doc/index.rst

Install the Symfony UX Twig Component package using Composer. This is required for using the HTML-based icon syntax.

```bash
$ composer require symfony/ux-twig-component
```

--------------------------------

### Initiate File Download via RedirectResponse

Source: https://github.com/symfony/ux/blob/3.x/src/LiveComponent/doc/index.rst

Implement file downloads by redirecting to a dedicated download route. This LiveAction generates the URL and returns a RedirectResponse. Ensure data-turbo="false" is set on the component to prevent Turbo prefetching.

```php
    #[LiveAction]
    public function initiateDownload(UrlGeneratorInterface $urlGenerator): RedirectResponse
    {
        $url = $urlGenerator->generate('app_file_download');
        return new RedirectResponse($url);
    }
```

--------------------------------

### Run Tests and Update Snapshots

Source: https://github.com/symfony/ux/blob/3.x/src/Toolkit/CONTRIBUTING.md

Execute these commands from the `src/Toolkit/` directory to remove existing snapshots, run tests, and update them. Remember to add the updated snapshots to git.

```shell
# Remove existing snapshots (may be useful if some Twig code examples were removed)
rm -fr tests/Functional/__snapshots__
```

```shell
# Run tests and update snapshots
php vendor/bin/simple-phpunit -d --update-snapshots
```

```shell
# Add the updated snapshots to git
git add tests/Functional/__snapshots__
```

--------------------------------

### Instantiate Map in a Live Component

Source: https://github.com/symfony/ux/blob/3.x/src/Map/doc/index.rst

Implement instantiateMap to return a Map instance for use within a Live Component. Includes center, fitBounds, and markers.

```php
protected function instantiateMap(): Map
{
    return (new Map())
        ->center(new Point(48.8566, 2.3522))
        ->fitBoundsToMarkers()
        ->addMarker(new Marker(position: new Point(48.8566, 2.3522), title: 'Paris', infoWindow: new InfoWindow('Paris')))
        ->addMarker(new Marker(position: new Point(45.75, 4.85), title: 'Lyon', infoWindow: new InfoWindow('Lyon')))
    ;
}
```

--------------------------------

### Dump Native Configurations for Production

Source: https://github.com/symfony/ux/blob/3.x/src/Native/doc/index.rst

Run this command in production to dump configuration files to disk. These files can then be served statically by your web server, bypassing the Symfony kernel.

```terminal
$ php bin/console ux:native:build-configs
```

--------------------------------

### Full Embedded Component Example: EditPost

Source: https://github.com/symfony/ux/blob/3.x/src/LiveComponent/doc/index.rst

An example demonstrating a parent component `EditPost` embedding a child component `MarkdownTextarea`. It showcases form handling, data binding, and actions.

```php
namespace App\Twig\Components;

use App\Entity\Post;
use Doctrine\ORM\EntityManagerInterface;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
use Symfony\UX\LiveComponent\Attribute\LiveAction;
use Symfony\UX\LiveComponent\Attribute\LiveProp;

#[AsLiveComponent]
final class EditPost extends AbstractController
{
    #[LiveProp(writable: ['title', 'content'])]
    public Post $post;

    #[LiveAction]
    public function save(EntityManagerInterface $entityManager)
    {
        $entityManager->flush();

        return $this->redirectToRoute('some_route');
    }
}
```

```php
namespace App\Twig\Components;

use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
use Symfony\UX\LiveComponent\Attribute\LiveProp;

#[AsLiveComponent]
final class MarkdownTextarea
{
    #[LiveProp]
    public string $label;

    #[LiveProp]
    public string $name;

    #[LiveProp(writable: true)]
    public string $value = '';
}
```

--------------------------------

### Nesting Twig Components with Loops

Source: https://github.com/symfony/ux/blob/3.x/src/TwigComponent/doc/index.rst

Demonstrates how to include components within another component, using a loop to render multiple instances of a nested component. This example shows basic nesting with Twig syntax.

```html+twig
<twig:SomeComponent>
    {% for i in 1..10 %}
        <twig:AnotherComponent>
            {{ i }}
        </twig:AnotherComponent>
    {% endfor %}
</twig:SomeComponent>
```

--------------------------------

### PHP Hook Priority Example

Source: https://github.com/symfony/ux/blob/3.x/src/LiveComponent/doc/index.rst

Illustrates how to control the execution order of hooks within the same lifecycle stage using the 'priority' argument. Higher priority values run first.

```php
    #[PostHydrate(priority: 10)]
    public function highPriorityHook(): void
    {
        // Runs first
    }

    #[PostHydrate(priority: 1)]
    public function lowPriorityHook(): void
    {
        // Runs last
    }
```

--------------------------------

### Create Monthly Recurrence

Source: https://github.com/symfony/ux/blob/3.x/src/CalendarLink/doc/index.rst

Example of creating a monthly recurrence rule for a specific count.

```php
CalendarRecurrence::monthly(count: 6);
```

--------------------------------

### Define Native Configuration with PHP Attributes

Source: https://github.com/symfony/ux/blob/3.x/src/Native/doc/index.rst

Register native configurations using #[AsNativeConfigurationProvider] and #[AsNativeConfiguration] attributes. This example defines iOS v1 configuration with settings and rules.

```php
// src/Native/AppNativeConfiguration.php
namespace App\Native;

use Symfony\UX\Native\Attribute\AsNativeConfiguration;
use Symfony\UX\Native\Attribute\AsNativeConfigurationProvider;
use Symfony\UX\Native\Configuration\Configuration;
use Symfony\UX\Native\Configuration\Rule;

#[AsNativeConfigurationProvider]
final class AppNativeConfiguration
{
    #[AsNativeConfiguration('/config/ios_v1.json')]
    public function iosV1(): Configuration
    {
        return new Configuration(
            settings: [
                'use_local_db' => true,
                'cable' => [
                    'script_url' => 'https://example.com/cable.js',
                ],
            ],
            rules: [
                new Rule(
                    patterns: ['.*'],
                    properties: [
                        'context' => 'default',
                        'pull_to_refresh_enabled' => true,
                    ],
                ),
            ],
        );
    }
}
```

--------------------------------

### Controller Route Definition

Source: https://github.com/symfony/ux/blob/3.x/src/LiveComponent/doc/index.rst

Example of a controller route definition that captures a parameter which can be mapped to a LiveProp.

```php
// src/Controller/SearchController.php
// ...

#[Route('/search/{query}')]
public function __invoke(string $query): Response
{
    // ... render template that uses SearchModule component ...
}
```

--------------------------------

### Stimulus bootstrap with AssetMapper

Source: https://github.com/symfony/ux/blob/3.x/src/StimulusBundle/doc/index.rst

The assets/stimulus_bootstrap.js file content when using AssetMapper. It starts the Stimulus application.

```javascript
// assets/stimulus_bootstrap.js
import { startStimulusApp } from '@symfony/stimulus-bundle';

const app = startStimulusApp();
```

--------------------------------

### Add Markers and Polygons to Map

Source: https://github.com/symfony/ux/blob/3.x/src/Map/doc/index.rst

Demonstrates how to add markers and polygons to a map instance. Use `fitBoundsToMarkers(false)` to prevent automatic bounds adjustment.

```php
$this->getMap()->fitBoundsToMarkers(false);

            // Add a new marker
            $this->getMap()->addMarker(new Marker(position: new Point(43.2965, 5.3698), title: 'Marseille', infoWindow: new InfoWindow('Marseille')));

            // Add a new polygon
            $this->getMap()->addPolygon(new Polygon(points: [
                new Point(48.8566, 2.3522),
                new Point(45.7640, 4.8357),
                new Point(43.2965, 5.3698),
                new Point(44.8378, -0.5792),
            ], infoWindow: new InfoWindow('Paris, Lyon, Marseille, Bordeaux')));
```

--------------------------------

### Configure Autocomplete Field Options

Source: https://github.com/symfony/ux/blob/3.x/src/Autocomplete/doc/index.rst

Example of configuring specific plugins and disabling others for an Autocomplete field.

```php
// Enable Dropdown Header plugin, with custom configuration
'dropdown_header' => [
    'title' => 'Select an ingredient',
],

// Force natively-enabled plugins (by UX Autocomplete) to be disabled
'clear_button' => false,
'remove_button' => false,
```

--------------------------------

### Controllers.json entry for a Stimulus controller

Source: https://github.com/symfony/ux/blob/3.x/src/StimulusBundle/doc/index.rst

Example of a controllers.json entry that enables and configures a Stimulus controller, such as for Chart.js.

```json
{
    "controllers": {
        "@symfony/ux-chartjs": {
            "chart": {
                "enabled": true,
                "fetch": "eager"
            }
        }
    },
    "entrypoints": []
}
```

--------------------------------

### Create Yearly Recurrence Until Date

Source: https://github.com/symfony/ux/blob/3.x/src/CalendarLink/doc/index.rst

Example of creating a yearly recurrence rule that continues until a specific date.

```php
CalendarRecurrence::yearly(until: new \DateTimeImmutable('2030-01-01'));
```

--------------------------------

### Twig Template for UX Map

Source: https://github.com/symfony/ux/blob/3.x/src/Map/doc/index.rst

Example of how to include a map in a Twig template using the ux_map function.

```twig
{{ ux_map(my_map, { 'data-controller': 'mymap', style: 'height: 300px' }) }}
```

--------------------------------

### HTML Icon Component

Source: https://github.com/symfony/ux/blob/3.x/src/Icons/doc/index.rst

Example of using the `<twig:ux:icon>` component. Embedded content is ignored.

```html+twig
{# The 🧸 will be ignored in the HTML output #}
<twig:ux:icon name="user-profile" class="w-4 h-4">🧸</twig:ux:icon>

{# Renders "user-profile.svg" #}
<svg viewBox="0 0 24 24" class="w-4 h-4">
    <path fill="currentColor" d="M21 7L9 19l-5.5-5.5l1.41-1.41L9 16.17L19.59 5.59z"/>
</svg>
```

--------------------------------

### Configure Fetch Credentials for LiveComponent

Source: https://github.com/symfony/ux/blob/3.x/src/LiveComponent/doc/index.rst

Set the 'fetchCredentials' option in the AsLiveComponent attribute to 'include' to always send credentials (cookies, HTTP auth) for cross-origin requests. Defaults to 'same-origin'.

```php
// src/Twig/Components/RandomNumber.php
use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
use Symfony\UX\LiveComponent\DefaultActionTrait;

#[AsLiveComponent(fetchCredentials: 'include')]
class RandomNumber
{
    use DefaultActionTrait;
}
```