Skip to content

Commit

Permalink
defaultVariables and use an array to configure a cva
Browse files Browse the repository at this point in the history
  • Loading branch information
@WebMamba
WebMamba committed Feb 28, 2024
1 parent 511e135 commit c02b7e2
Show file tree
Hide file tree
Showing 5 changed files with 159 additions and 23 deletions.
9 changes: 9 additions & 0 deletions src/TwigComponent/src/CVA.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ public function __construct(
private ?string $base = null,
private ?array $variants = null,
private ?array $compoundVariants = null,
private ?array $defaultVariants = null
) {
}

Expand Down Expand Up @@ -83,6 +84,14 @@ public function resolve(array $recipes): string
}
}

if (null !== $this->defaultVariants) {
foreach ($this->defaultVariants as $defaultVariantName => $defaultVariantValue) {
if (!isset($recipes[$defaultVariantName])) {
$classes .= ' '.$this->variants[$defaultVariantName][$defaultVariantValue];
}
}
}

return trim($classes);
}
}
23 changes: 18 additions & 5 deletions src/TwigComponent/src/Twig/ComponentExtension.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,13 +87,26 @@ public function finishEmbeddedComponentRender(): void
}

/**
* @param string $base some base class you want to have in every matching recipes
* @param array $variants your recipes class
* @param array|null $compoundVariants compounds allow you to add extra class when multiple variation are matching in the same time
* @param array{
* base: string,
* variants: array<string, array<string, string>>,
* compoundVariants: array<array<string, string>>,
* defaultVariants: array<string, string>
* } $cva
*
* base some base class you want to have in every matching recipes
* variants your recipes class
* compoundVariants compounds allow you to add extra class when multiple variation are matching in the same time
* defaultVariants allow you to add a default class when no recipe is matching
*/
public function cva(string $base, array $variants, ?array $compoundVariants = []): CVA
public function cva(array $cva): CVA
{
return new CVA($base, $variants, $compoundVariants);
return new CVA(
$cva['base'] ?? [],
$cva['variants'] ?? [],
$cva['compoundVariants'] ?? [],
$cva['defaultVariants'] ?? []
);
}

private function throwRuntimeError(string $name, \Throwable $e): void
Expand Down
41 changes: 25 additions & 16 deletions src/TwigComponent/tests/Fixtures/templates/components/Alert.html.twig
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,35 @@
{% props color = 'blue', size = 'md' %}

{% set alert = cva('alert', {
color: {
blue: 'alert-blue',
red: 'alert-red',
green: 'alert-green',
yellow: 'alert-yellow',
{% set alert = cva({
base: 'alert',
variants: {
color: {
blue: 'alert-blue',
red: 'alert-red',
green: 'alert-green',
yellow: 'alert-yellow',
},
size: {
sm: 'alert-sm',
md: 'alert-md',
lg: 'alert-lg',
},
rounded: {
sm: 'rounded-sm',
md: 'rounded-md',
lg: 'rounded-lg',
}
},
size: {
sm: 'alert-sm',
md: 'alert-md',
lg: 'alert-lg',
}
}, [
{
compoundVariants: [{
color: ['red'],
size: ['lg'],
class: 'font-semibold'
}],
defaultVariants: {
rounded: 'md'
}
]
) %}
}) %}

<div class="{{ alert.apply({color, size}, attributes.render('class'), 'rounded') }}">
<div class="{{ alert.apply({color, size}, attributes.render('class'), 'flex p-4') }}">
...
</div>
2 changes: 1 addition & 1 deletion src/TwigComponent/tests/Integration/ComponentExtensionTest.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -260,7 +260,7 @@ public function testComponentWithClassMerge(): void
{
$output = self::getContainer()->get(Environment::class)->render('class_merge.html.twig');

$this->assertStringContainsString('class="alert alert-red alert-lg font-semibold dark:bg-gray-600"', $output);
$this->assertStringContainsString('class="alert alert-red alert-lg font-semibold rounded-md dark:bg-gray-600 flex p-4"', $output);
}

private function renderComponent(string $name, array $data = []): string
Expand Down
107 changes: 106 additions & 1 deletion src/TwigComponent/tests/Unit/CVATest.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ class CVATest extends TestCase
*/
public function testRecipes(array $recipe, array $recipes, string $expected): void
{
$recipeClass = new CVA($recipe['base'] ?? '', $recipe['variants'] ?? [], $recipe['compounds'] ?? []);
$recipeClass = new CVA($recipe['base'] ?? '', $recipe['variants'] ?? [], $recipe['compounds'] ?? [], $recipe['defaultVariants'] ?? []);

$this->assertEquals($expected, $recipeClass->resolve($recipes));
}
Expand Down Expand Up @@ -230,5 +230,110 @@ public static function recipeProvider(): iterable
['colors' => 'primary', 'sizes' => 'sm'],
'font-semibold border rounded text-primary text-sm',
];
yield 'default variables' => [
[
'base' => 'font-semibold border rounded',
'variants' => [
'colors' => [
'primary' => 'text-primary',
'secondary' => 'text-secondary',
],
'sizes' => [
'sm' => 'text-sm',
'md' => 'text-md',
'lg' => 'text-lg',
],
'rounded' => [
'sm' => 'rounded-sm',
'md' => 'rounded-md',
'lg' => 'rounded-lg',
],
],
'compounds' => [
[
'colors' => ['danger', 'secondary'],
'sizes' => ['sm'],
'class' => 'text-red-500',
],
],
'defaultVariants' => [
'colors' => 'primary',
'sizes' => 'sm',
'rounded' => 'md',
],
],
['colors' => 'primary', 'sizes' => 'sm'],
'font-semibold border rounded text-primary text-sm rounded-md',
];
yield 'default variables all overwrite' => [
[
'base' => 'font-semibold border rounded',
'variants' => [
'colors' => [
'primary' => 'text-primary',
'secondary' => 'text-secondary',
],
'sizes' => [
'sm' => 'text-sm',
'md' => 'text-md',
'lg' => 'text-lg',
],
'rounded' => [
'sm' => 'rounded-sm',
'md' => 'rounded-md',
'lg' => 'rounded-lg',
],
],
'compounds' => [
[
'colors' => ['danger', 'secondary'],
'sizes' => ['sm'],
'class' => 'text-red-500',
],
],
'defaultVariants' => [
'colors' => 'primary',
'sizes' => 'sm',
'rounded' => 'md',
],
],
['colors' => 'primary', 'sizes' => 'sm', 'rounded' => 'lg'],
'font-semibold border rounded text-primary text-sm rounded-lg',
];
yield 'default variables without matching variants' => [
[
'base' => 'font-semibold border rounded',
'variants' => [
'colors' => [
'primary' => 'text-primary',
'secondary' => 'text-secondary',
],
'sizes' => [
'sm' => 'text-sm',
'md' => 'text-md',
'lg' => 'text-lg',
],
'rounded' => [
'sm' => 'rounded-sm',
'md' => 'rounded-md',
'lg' => 'rounded-lg',
],
],
'compounds' => [
[
'colors' => ['danger', 'secondary'],
'sizes' => ['sm'],
'class' => 'text-red-500',
],
],
'defaultVariants' => [
'colors' => 'primary',
'sizes' => 'sm',
'rounded' => 'md',
],
],
[],
'font-semibold border rounded text-primary text-sm rounded-md',
];
}
}

0 comments on commit c02b7e2

Please sign in to comment.