feat: add support for missing style property in ToEvent()

feat: add support for missing style property in ToEvent()

README.md

@@ -165,6 +165,32 @@ Event::make()
 ->textColor('#ffffff');
 ```
 
+#### Customizing Event Styles
+
+You can add custom styles to your event elements by using the styles method. This method accepts an array where each entry can be a CSS style declaration. The styles will be directly applied to the event element in the view. You can define styles in three ways:
+
+- As a key-value pair where the key is the CSS property and value is the condition under which the style should apply.
+- As a key-value pair where the key is the CSS property and the value is directly the CSS value.
+- As a single string for static styles that always apply.
+
+Here's how you can use it:
+
+```php
+Event::make()->styles([
+    'color: red' => true,            // Applies the style if the condition (true) is met
+    'background-color' => '#ffff00', // Directly applies the background color
+    'font-size: 12px'                // Always applies this font size
+]);
+````
+
+##### Usage Notes:
+
+- The first format ('color: red' => true) is useful for conditional styling based on dynamic conditions. For instance, changing the text color based on an event's type or status.
+
+- The second format ('background-color' => '#ffff00') is straightforward for applying styles where the values do not depend on conditions.
+- The third format ('font-size: 12px') is used when the style does not require any condition and is always applied to the event.
+This flexibility allows you to easily customize the appearance of events based on dynamic conditions or predefined settings.
+
 #### Customizing the display
 By default, events are rendered as `blocks`. This is when the display is set to `auto`, which it is by default. You can also change the event to be rendered as a background event, which then fills the whole date cell. To do so, you can set `display` to `background` on the event:
 

composer.json

@@ -26,7 +26,8 @@
         "nunomaduro/collision": "^7.8|^8.0",
         "nunomaduro/larastan": "^2.0.1",
         "orchestra/testbench": "^8.8|^9.0",
-        "pestphp/pest": "^2.0",
+        "pestphp/pest": "2.36",
+        "pestphp/pest-plugin": "2.1",
         "pestphp/pest-plugin-arch": "^2.0",
         "pestphp/pest-plugin-laravel": "^2.0",
         "phpstan/extension-installer": "^1.1",
@@ -79,4 +80,4 @@
     },
     "minimum-stability": "dev",
     "prefer-stable": true
-}
+}

src/ValueObjects/Event.php

@@ -6,6 +6,7 @@
 use Guava\Calendar\Contracts\Eventable;
 use Illuminate\Contracts\Support\Arrayable;
 use Illuminate\Database\Eloquent\Model;
+use Illuminate\Support\Str;
 
 class Event implements Arrayable, Eventable
 {
@@ -33,6 +34,8 @@ class Event implements Arrayable, Eventable
 
     protected array $extendedProps = [];
 
+    protected array $styles = [];
+
     private function __construct(?Model $model = null)
     {
         if ($model) {
@@ -119,6 +122,30 @@ public function getTextColor(): ?string
         return $this->textColor;
     }
 
+    public function styles(array $styles): static
+    {
+        $this->styles = $styles;
+
+        return $this;
+    }
+
+    public function getStyles(): string
+    {
+        $styles = [];
+
+        foreach ($this->styles as $key => $value) {
+            if (is_int($key)) {
+                $styles[] = Str::finish($value, ';');
+            } elseif (! is_bool($value)) {
+                $styles[] = Str::finish("$key: $value", ';');
+            } elseif ($value) {
+                $styles[] = Str::finish($key, ';');
+            }
+        }
+
+        return implode(' ', $styles);
+    }
+
     public function display(string $display): static
     {
         $this->display = $display;
@@ -264,6 +291,7 @@ public function toArray(): array
             'allDay' => $this->getAllDay(),
             'backgroundColor' => $this->getBackgroundColor(),
             'textColor' => $this->getTextColor(),
+            'styles' => $this->getStyles(),
             'resourceIds' => $this->getResourceIds(),
             'extendedProps' => $this->getExtendedProps(),
         ];

tests/Pest.php

@@ -1,5 +1,45 @@
 <?php
 
-use Guava\Calendar\Tests\TestCase;
+/*
+|--------------------------------------------------------------------------
+| Test Case
+|--------------------------------------------------------------------------
+|
+| The closure you provide to your test functions is always bound to a specific PHPUnit test
+| case class. By default, that class is "PHPUnit\Framework\TestCase". Of course, you may
+| need to change it using the "uses()" function to bind a different classes or traits.
+|
+*/
 
-uses(TestCase::class)->in(__DIR__);
+// uses(Tests\TestCase::class)->in('Feature');
+
+/*
+|--------------------------------------------------------------------------
+| Expectations
+|--------------------------------------------------------------------------
+|
+| When you're writing tests, you often need to check that values meet certain conditions. The
+| "expect()" function gives you access to a set of "expectations" methods that you can use
+| to assert different things. Of course, you may extend the Expectation API at any time.
+|
+*/
+
+expect()->extend('toBeOne', function () {
+    return $this->toBe(1);
+});
+
+/*
+|--------------------------------------------------------------------------
+| Functions
+|--------------------------------------------------------------------------
+|
+| While Pest is very powerful out-of-the-box, you may have some testing code specific to your
+| project that you don't want to repeat in every file. Here you can also expose helpers as
+| global functions to help you to reduce the number of lines of code in your test files.
+|
+*/
+
+function something()
+{
+    // ..
+}

tests/TestCase.php

@@ -4,9 +4,9 @@
 
 use Guava\Calendar\CalendarServiceProvider;
 use Illuminate\Database\Eloquent\Factories\Factory;
-use Orchestra\Testbench\TestCase as Orchestra;
+use PHPUnit\Framework\TestCase as BaseTestCase;
 
-class TestCase extends Orchestra
+abstract class TestCase extends BaseTestCase
 {
     protected function setUp(): void
     {

tests/Unit/ValueObjects/EventTest.php

@@ -0,0 +1,120 @@
+<?php
+
+use Carbon\Carbon;
+use Guava\Calendar\ValueObjects\Event;
+
+beforeEach(function () {
+    $this->event = Event::make();
+});
+
+it('should set start and end', function () {
+    $start = Carbon::now();
+    $end = Carbon::now()->addHour();
+
+    $this->event->start($start);
+    $this->event->end($end);
+
+    expect($this->event->getStart())->toBe($start);
+    expect($this->event->getEnd())->toBe($end);
+});
+
+it('should set all day', function () {
+    $this->event->allDay(true);
+
+    expect($this->event->getAllDay())->toBeTrue();
+});
+
+it('should set the title', function () {
+    $title = 'Test Event';
+    $this->event->title($title);
+
+    expect($this->event->getTitle())->toBe($title);
+});
+
+it('should set the background color', function () {
+    $color = '#ff0000';
+    $this->event->backgroundColor($color);
+
+    expect($this->event->getBackgroundColor())->toBe($color);
+});
+
+it('should set the text color', function () {
+    $color = '#00ff00';
+    $this->event->textColor($color);
+
+    expect($this->event->getTextColor())->toBe($color);
+});
+
+it('should set the styles', function () {
+    $styles = [
+        'color: red',
+        'display: flex; flex-direction: row;',
+        'font-size' => '12px',
+        'opacity' => 1,
+        'background-color: blue' => false,
+        'border-color: red' => true,
+    ];
+    $this->event->styles($styles);
+
+    expect($this->event->getStyles())->toBe('color: red; display: flex; flex-direction: row; font-size: 12px; opacity: 1; border-color: red;');
+});
+
+it('should set the display', function () {
+    $display = 'block';
+    $this->event->display($display);
+
+    expect($this->event->getDisplay())->toBe($display);
+});
+
+it('should set the editable features', function () {
+    $this->event->editable(true);
+    expect($this->event->getEditable())->toBeTrue();
+
+    $this->event->startEditable(true);
+    expect($this->event->getStartEditable())->toBeTrue();
+
+    $this->event->durationEditable(true);
+    expect($this->event->getDurationEditable())->toBeTrue();
+});
+
+it('should set resource ids', function () {
+    $resourceIds = [1, 2, 3];
+    $this->event->resourceIds($resourceIds);
+
+    expect($this->event->getResourceIds())->toBe($resourceIds);
+});
+
+it('should set some extended props', function () {
+    $props = ['key' => 'value', 'another_key' => 'another_value'];
+    $this->event->extendedProps($props);
+
+    expect($this->event->getExtendedProps())->toBe($props);
+});
+
+it('should return props to array', function () {
+    $start = Carbon::now();
+    $end = Carbon::now()->addHour();
+    $title = 'Test Event';
+    $backgroundColor = '#ff0000';
+    $textColor = '#00ff00';
+    $styles = ['color' => 'red', 'font-size' => '12px', 'background-color' => false, 'border-color: red' => true];
+    $resourceIds = [1, 2, 3];
+    $extendedProps = ['key' => 'value', 'another_key' => 'another_value'];
+
+    $this->event->start($start)->end($end)->title($title)->backgroundColor($backgroundColor)
+        ->textColor($textColor)->styles($styles)->resourceIds($resourceIds)->extendedProps($extendedProps)
+    ;
+
+    $array = $this->event->toArray();
+
+    expect($array)->toMatchArray([
+        'title' => $title,
+        'start' => $start,
+        'end' => $end,
+        'backgroundColor' => $backgroundColor,
+        'textColor' => $textColor,
+        'styles' => 'color: red; font-size: 12px; border-color: red;',
+        'resourceIds' => $resourceIds,
+        'extendedProps' => $extendedProps,
+    ]);
+});