This PR was squashed before being merged into the 3.x branch.
Discussion
----------
Introduce CVA to html-extra
Hey! This PR introduces CVA to Twig. All of this has already been merged into SymfonyUX (https://github.com/symfony/ux/pull/1416), but `@kbond` suggested that this repo can be a better place for this feature.
Here is a description from the PR merged in to SymfonyUX:
------------------------------
This PR introduces a new concept CVA (Class Variance Authority), by adding a1 twig function, to help you manage your class in your component.
Let's take an example an Alert component. In your app, an alert can have a lot of different styles one for success, one for alert, one for warning, and different sizes, with icons or not... You need something that lets you completely change the style of your component without creating a new component, and without creating too much complexity in your template.
Here is the reason came CVA.
Your Alert component can now look like this:
```twig
{% props color = 'blue', size = 'md' %}
{% set alert = html_cva(
'alert rounded-lg',
{
color: {
blue: 'text-blue-800 bg-blue-50 dark:bg-gray-800 dark:text-blue-400',
red: 'text-red-800 bg-red-50 dark:bg-gray-800 dark:text-red-400',
green: 'text-green-800 bg-green-50 dark:bg-gray-800 dark:text-green-400',
yellow: 'text-yellow-800 bg-yellow-50 dark:bg-gray-800 dark:text-yellow-400',
},
size: {
sm: 'px-4 py-3 text-sm',
md: 'px-6 py-4 text-base',
lg: 'px-8 py-5 text-lg',
}
},
[{
color: ['red'],
size: ['lg'],
class: 'font-semibold'
}],
{
rounded: 'md'
}
}) %}
<div class="{{ cva.apply({color, size}, attribute.render('class'), 'flex p-4') }}">
...
</div>
```
So here you have a `cva` function that lets you define different variants of your component.
You can now use your component like this:
```twig
<twig:Alert color="red" size="md"/>
<twig:Alert color="green" size="sm"/>
<twig:Alert color="yellow" size="lg"/>
<twig:Alert color="red" size="md" class="dark:bg-gray-800"/>
```
And then you get the following result:
<img width="1269" alt="Capture d’écran 2024-01-24 à 00 52 33" src="https://github.com/symfony/ux/assets/32077734/6a5e25be-5b81-4ae7-8385-0fa5422d0396">
If you want to know more about the concept I implement here you can look at:
- CVA (js version): https://cva.style/docs
- tailwind merge: https://github.com/gehrisandro/tailwind-merge-php, https://github.com/dcastil/tailwind-merge
- this implementation by using tailwind-merge and cva is inspired a lot by: https://ui.shadcn.com/ (shadcn is the most starred library on github in 2023)
- a really good article that explains the philosophy behind https://manupa.dev/blog/anatomy-of-shadcn-ui
- this PR works great in a LASTstack: https://symfonycasts.com/screencast/last-stack/last-stack
Tell me what you think about it! Thanks for your time! Cheers 🧡
------------
Commits
-------
e3ac14e1 Introduce CVA to html-extra
The implementation contains an optimized implementation of the function
for the common case of using a string literal as the argument. It will
validate the enum existence during compilation and compile the code to
use `MyEnum::cases()` directly.
* 2.x:
Fix small typo
Fix: Typo
Enhancement: Use GithubActions instead of Travis for tests
Fix: DOCtor-RST build
Enhancement: Use no_explicit_use_of_code_block_php rule
Fix: Highlighting
Enhancement: Introduce DOCtor-RST config + Sphinx build + GithubActions
Enhancement: Use GithubActions instead of Travis for tests
Fix `odd` not working for negative numbers
Bump version to 2.14.2-DEV
Prepare the 2.14.1 release
Update CHANGELOG
Bump version to 1.44.2-DEV
Prepare the 1.44.1 release
* 1.x:
Enhancement: Introduce DOCtor-RST config + Sphinx build + GithubActions
Enhancement: Use GithubActions instead of Travis for tests
Fix `odd` not working for negative numbers
Bump version to 1.44.2-DEV
Prepare the 1.44.1 release
* 2.x:
fixed the "empty" test on Traversable instances
avoid confusion between .. and ..
fixed phpdocs
fixed CHANGELOG
moved css_class function to html_classes filter
Added support for `css_class` function
added missing docs
fixed wrong registration
added the data_uri filter
bumped version
Update CoreExtension.php
Fabien Potencier
Matheo Daninos
Christophe Coevoet
seb-jean
Katharina Luthe
Thomas Landauer
Kévin Dunglas
Maurício Meneghini Fauth
Oskar Stark
Pierre Grimaud
fancyweb
Grégoire Pineau