Mastering Symfony UX 3.0.0 with a Modern Real Estate Platform

# Core components and the new required HTML extra package for CVA
composer require symfony/ux-twig-component:^3.0 symfony/ux-live-component:^3.0
composer require twig/html-extra:^3.12

# Form enhancements
composer require symfony/ux-autocomplete:^3.0
composer require symfony/ux-cropperjs:^3.0

# Ensure AssetMapper is ready (no Node.js required!)
composer require symfony/asset-mapper:^7.4

php bin/console debug:twig-component

twig_component:
    anonymous_template_directory: 'components/'
    defaults:
        # We namespace our components under 'App\Twig\Components\'
        App\Twig\Components\: 'components/'

namespace App\Twig\Components;

use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;

#[AsTwigComponent('PropertyCard')]
final class PropertyCard
{
    public function __construct(
        public string $title = '',
        public int $price = 0,
        public string $status = 'active',
        public ?string $imageUrl = null,
        public ?int $id = null,
    ) {
    }
}

{# We use html_cva from twig/html-extra:^3.12 #}
{% set card_classes = html_cva({
    base: 'rounded-xl shadow-lg overflow-hidden transition-transform hover:scale-105',
    variants: {
        status: {
            active: 'bg-white border-2 border-green-500',
            sold: 'bg-gray-100 border-2 border-gray-400 opacity-75',
            pending: 'bg-yellow-50 border-2 border-yellow-500'
        }
    }
}) %}

<div {{ attributes.defaults({ class: card_classes.apply({ status: this.status }) }) }}>
    {% if this.imageUrl %}
        <img src="{{ this.imageUrl }}" alt="{{ this.title }}" loading="lazy" class="w-full h-48 object-cover">
    {% endif %}

    <div class="p-6">
        <h3 class="text-xl font-bold text-gray-900">{{ this.title }}</h3>
        <p class="mt-2 text-2xl font-extrabold text-blue-600">${{ this.price|number_format }}</p>

        {% if this.id %}
            <div class="mt-4 flex justify-between items-center border-t pt-4">
                <div class="space-x-4">
                    <a href="{{ path('app_property_edit', {id: this.id}) }}" class="text-blue-600 hover:text-blue-800 font-medium text-sm">✏️ Edit</a>
                    {% if this.imageUrl %}
                        <a href="{{ path('app_property_crop', {id: this.id}) }}" class="text-green-600 hover:text-green-800 font-medium text-sm">✂️ Crop</a>
                    {% endif %}
                </div>
                <form method="post" action="{{ path('app_property_delete', {id: this.id}) }}" onsubmit="return confirm('Are you sure you want to delete this property?');">
                    <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ this.id) }}">
                    <button type="submit" class="text-red-600 hover:text-red-800 font-medium text-sm">🗑️ Delete</button>
                </form>
            </div>
        {% endif %}
    </div>
</div>

namespace App\Form;

use App\Entity\Amenity;
use Symfony\Component\Form\AbstractType;
use Symfony\Component\OptionsResolver\OptionsResolver;
use Symfony\UX\Autocomplete\Form\AsEntityAutocompleteField;
use Symfony\UX\Autocomplete\Form\BaseEntityAutocompleteType;

#[AsEntityAutocompleteField]
class AmenityAutocompleteField extends AbstractType
{
    public function configureOptions(OptionsResolver $resolver): void
    {
        $resolver->setDefaults([
            'class' => Amenity::class,
            'placeholder' => 'Search for amenities...',
            'choice_label' => 'name',
            'multiple' => true,
        ]);
    }

    public function getParent(): string
    {
        return BaseEntityAutocompleteType::class;
    }
}

namespace App\Form;

use App\Entity\Property;
use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\Extension\Core\Type\FileType;
use Symfony\Component\Form\Extension\Core\Type\MoneyType;
use Symfony\Component\Form\Extension\Core\Type\TextType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolver;

final class PropertyType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options): void
    {
        $builder
            ->add('title', TextType::class)
            ->add('price', MoneyType::class, [
                'currency' => 'USD',
                'divisor' => 1,
            ])
            ->add('photo', FileType::class, [
                'mapped' => false,
                'required' => false,
                'attr' => [
                    'accept' => 'image/*',
                    'class' => 'hidden',
                    'data-dropzone-target' => 'input',
                    'data-action' => 'change->dropzone#handleFiles'
                ]
            ])
            ->add('amenities', AmenityAutocompleteField::class);
    }

    public function configureOptions(OptionsResolver $resolver): void
    {
        $resolver->setDefaults([
            'data_class' => Property::class,
        ]);
    }
}

namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Attribute\Route;
use Symfony\UX\Cropperjs\Factory\CropperInterface;
use Symfony\UX\Cropperjs\Form\CropperType;
use App\Form\PropertyType;
use Doctrine\ORM\EntityManagerInterface;
use App\Entity\Property;
use App\Service\FileUploader;
use Symfony\UX\Cropperjs\Model\Crop;

final class PropertyController extends AbstractController
{
    public function __construct(
        private readonly CropperInterface $cropper,
        private readonly EntityManagerInterface $entityManager,
    ) {
    }

    ...

    #[Route('/property/{id}/crop', name: 'app_property_crop')]
    public function crop(Request $request, Property $property): Response
    {
        if (!$property->getImageUrl()) {
            return $this->redirectToRoute('app_property_index');
        }

        $projectDir = $this->getParameter('kernel.project_dir');
        $imagePath = $projectDir . '/public' . $property->getImageUrl();

        $crop = $this->cropper->createCrop($imagePath);
        $crop->setCroppedMaxSize(1920, 1080);

        $form = $this->createFormBuilder(['photo' => $crop])
            ->add('photo', CropperType::class, [
                'public_url' => $property->getImageUrl(),
                'cropper_options' => [
                    'aspectRatio' => 16 / 9,
                ],
            ])
            ->getForm();

        $form->handleRequest($request);

        if ($form->isSubmitted() && $form->isValid()) {
            /** @var Crop $cropData */
            $cropData = $form->get('photo')->getData();

            // Apply the crop and overwrite the original file
            $croppedImageContent = $cropData->getCroppedImage();
            file_put_contents($imagePath, $croppedImageContent);

            $this->addFlash('success', 'Photo cropped beautifully!');
            return $this->redirectToRoute('app_property_index');
        }

        return $this->render('property/crop.html.twig', [
            'property' => $property,
            'form' => $form->createView(),
        ]);
    }

php bin/console importmap:require typed.js

import { Controller } from '@hotwired/stimulus';
import Typed from 'typed.js';

export default class extends Controller {
    static values = {
        strings: Array,
        speed: { type: Number, default: 50 }
    }

    connect() {
        this.typed = new Typed(this.element, {
            strings: this.stringsValue,
            typeSpeed: this.speedValue,
            loop: true,
        });
    }

    disconnect() {
        if (this.typed) {
            this.typed.destroy();
        }
    }
}

{% extends 'base.html.twig' %}

{% block title %}Create New Listing{% endblock %}

{% block body %}
    <div class="max-w-3xl mx-auto bg-white p-8 rounded-xl shadow-lg">
        <h1 class="text-4xl font-bold mb-8">
            List your next 
            <span 
                data-controller="typing" 
                data-typing-strings-value='["Mansion", "Cozy Condo", "Downtown Loft", "Beachfront Villa"]'
                data-typing-speed-value="75"
                class="text-blue-600"
            ></span>
        </h1>

        {{ include('property/_form.html.twig', {'button_label': 'Publish Listing'}) }}
    </div>
{% endblock %}