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
* 3.x:
Add the notion of a Twig callable
Drop support for 8.0
Add more tests to the Lexer
Add a note about how to escape a string interpolation in a string
Bump version to 3.12
Implement the enum_cases function
Remove deprecation arg
Fix integration tests when a test has more than on data/expect section and deprecations
Bump version
Prepare the 3.11.0 release
Update CHANGELOG
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
Fabien Potencier
Matheo Daninos
Christophe Coevoet
seb-jean
Katharina Luthe
Thomas Landauer
Kévin Dunglas
Maurício Meneghini Fauth
Oskar Stark
Pierre Grimaud
fancyweb