config/main: forms creation; applying options to qrcode generation

app/Livewire/QrCodeBuilder.php

@@ -2,17 +2,21 @@
 
 namespace App\Livewire;
 
-use App\Factories\QrCodeFactory;
 use App\Enum\FormatEnum;
+use App\Livewire\Traits\ColorsTrait;
+use App\Livewire\Traits\LabelTrait;
+use App\Livewire\Traits\LogoTrait;
+use App\Livewire\Traits\MarginTrait;
 use App\Livewire\Traits\OptionsTrait;
-use Da\QrCode\QrCode;
-use Da\QrCode\Writer\JpgWriter;
 use Illuminate\Support\Collection;
-use Illuminate\Support\Facades\Storage;
 use Livewire\Component;
 
 class QrCodeBuilder extends Component
 {
+    use ColorsTrait;
+    use LabelTrait;
+    use MarginTrait;
+    use LogoTrait;
     use OptionsTrait;
 
     public Collection $formats;

app/Livewire/QrCodeComponent.php

@@ -4,10 +4,10 @@
 
 use App\Enum\FormatEnum;
 use App\Factories\QrCodeFactory;
+use Da\QrCode\Label;
 use Da\QrCode\QrCode;
 use Da\QrCode\Writer\JpgWriter;
 use Illuminate\Support\Facades\Storage;
-use Livewire\Attributes\Modelable;
 use Livewire\Attributes\On;
 use Livewire\Component;
 
@@ -16,9 +16,12 @@ class QrCodeComponent extends Component
     protected QrCode $qrCode;
     public int $format;
     public array $options;
-    public ?array $colors = null;
-    public ?array $margins = null;
-    public ?string $label = null;
+    public array $colors = [
+        'background' => null,
+        'foreground' => null,
+    ];
+    public ?int $margins = null;
+    public ?array $label = null;
     public ?string $logoPath = null;
 
     public function mount()
@@ -32,17 +35,84 @@ public function mount()
     }
 
     #[On('create-qr-code')]
-    public function create(int $format, array $options, ?array $colors = null)
+    public function create(int $format, array $options)
     {
         $this->format = $format;
         $this->options = $options;
 
         $this->build();
     }
 
+    #[On('apply-colors')]
+    public function applyColors(array $foreground, array $background)
+    {
+        $this->colors = [
+            'background' => $background,
+            'foreground' => $foreground,
+        ];
+
+        $this->build();
+    }
+
+    #[On('apply-label')]
+    public function applyLabel(string $label, int $size, string $alignment)
+    {
+        $this->label = [
+            'label' => $label,
+            'size' => $size,
+            'align' => $alignment,
+        ];
+
+        $this->build();
+    }
+
+    #[On('apply-margin')]
+    public function applyMargin(int $margins)
+    {
+        $this->margins = $margins;
+
+        $this->build();
+    }
+
+    #[On('apply-logo')]
+    public function applyLogo(string $path)
+    {
+        $this->logoPath = $path;
+
+        $this->build();
+    }
+
     public function build()
     {
-        $this->qrCode = QrCodeFactory::build($this->format, $this->options);
+        /** @var QrCode $qrCode */
+        $qrCode = QrCodeFactory::build($this->format, $this->options);
+
+        if ($bgColors = $this->colors['background']) {
+            $qrCode->setBackgroundColor($bgColors['r'], $bgColors['g'], $bgColors['b']);
+        }
+
+        if ($fgColors = $this->colors['foreground']) {
+            $qrCode->setForegroundColor($fgColors['r'], $fgColors['g'], $fgColors['b']);
+        }
+
+        if ($label = $this->label) {
+            $qrCode->setLabel(new Label(
+                text: $label['label'],
+                fontSize: $label['size'],
+                align: $label['align'],
+            ));
+        }
+
+        if ($margins = $this->margins) {
+            $qrCode->setMargin($margins);
+        }
+
+        if (! is_null($this->logoPath)) {
+            $qrCode->setLogo($this->logoPath)
+                ->setLogoWidth(((int) $qrCode->getSize() * 0.16));
+        }
+
+        $this->qrCode = $qrCode;
     }
 
     public function getUri()

app/Livewire/Traits/ColorsTrait.php

@@ -2,23 +2,56 @@
 
 namespace App\Livewire\Traits;
 
+use App\Livewire\QrCodeComponent;
+use Psy\Util\Str;
+
 trait ColorsTrait
 {
+    public string $strBackground;
+    public string $strForeground;
+
     public array $background;
     public array $foreground;
 
     public function initializeColorsTrait()
     {
-        $this->foreground = [
-            'r' => 0,
-            'g' => 0,
-            'b' => 0,
-        ];
+        if (! isset ($this->background, $this->foreground)) {
+            $this->foreground = [
+                'r' => 0,
+                'g' => 0,
+                'b' => 0,
+            ];
+
+            $this->background = [
+                'r' => 255,
+                'g' => 255,
+                'b' => 255,
+            ];
 
-        $this->background = [
-            'r' => 255,
-            'g' => 255,
-            'b' => 255,
+            $this->strForeground = "#[{$this->foreground['r']},{$this->foreground['g']},{$this->foreground['b']}]";
+            $this->strBackground = "#[{$this->background['r']},{$this->background['g']},{$this->background['b']}]";
+        }
+    }
+
+    public function applyColors()
+    {
+        $this->validate($this->getColorsRules());
+        $this->background = $this->extractColors($this->strBackground);
+        $this->foreground = $this->extractColors($this->strForeground);
+
+        $this->dispatch('apply-colors', $this->foreground, $this->background)
+            ->to(QrCodeComponent::class);
+    }
+
+    public function extractColors(string $color)
+    {
+        $color = preg_replace('/[\#\[\]]/', null, $color);
+        $color = explode(',', $color);
+
+        return [
+            'r' => $color[0],
+            'g' => $color[1],
+            'b' => $color[2],
         ];
     }
 
@@ -28,10 +61,8 @@ public function initializeColorsTrait()
     public function getColorsRules(): array
     {
         return [
-            'background' => 'required|array',
-            'background.*' => 'required|int',
-            'foreground' => 'required|array',
-            'foreground.*' => 'required|int',
+            'strForeground' => 'string|required|regex:/^\#\[\d+\,\d+\,\d+\]$/',
+            'strBackground' => 'string|required|regex:/^\#\[\d+\,\d+\,\d+\]$/'
         ];
     }
 }

app/Livewire/Traits/LabelTrait.php

@@ -0,0 +1,30 @@
+<?php
+
+namespace App\Livewire\Traits;
+
+use App\Livewire\QrCodeComponent;
+use Da\QrCode\Contracts\LabelInterface;
+
+trait LabelTrait
+{
+    public string $label = '';
+    public int $size = 16;
+    public string $align;
+
+    public function applyLabel()
+    {
+        $this->validate($this->getLabelRules());
+
+        $this->dispatch('apply-label', $this->label, $this->size, $this->align)
+            ->to(QrCodeComponent::class);
+    }
+
+    public function getLabelRules(): array
+    {
+        return [
+            'label' => 'string|required',
+            'align' => 'string|required',
+            'size' => 'int|required|min:1'
+        ];
+    }
+}

app/Livewire/Traits/LogoTrait.php

@@ -2,14 +2,33 @@
 
 namespace App\Livewire\Traits;
 
+use App\Livewire\QrCodeComponent;
+use Illuminate\Support\Facades\Storage;
+use Livewire\Features\SupportFileUploads\TemporaryUploadedFile;
+use Livewire\WithFileUploads;
+
 trait LogoTrait
 {
-    public string $path = '';
+    use WithFileUploads;
+
+    public $file;
+
+    public function applyLogo()
+    {
+        $this->validate($this->getLogoRules());
+        /** @var TemporaryUploadedFile $filename */
+        $filename = uniqid() . '.' . $this->file->getClientOriginalExtension();
+        #$filename->storePubliclyAs('public/qrcode', $filename);
+        $this->file->storePubliclyAs('public/qrcode', $filename);
+
+        $this->dispatch('apply-logo', '../storage/app/public/qrcode/' . $filename, 'local')
+            ->to(QrCodeComponent::class);
+    }
 
     public function getLogoRules()
     {
         return [
-            'path' => 'string|nullable|regex:(https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*))"'
+            'file' => 'image|required|max:1024',
         ];
     }
 }

app/Livewire/Traits/MarginTrait.php

@@ -0,0 +1,25 @@
+<?php
+
+namespace App\Livewire\Traits;
+
+use App\Livewire\QrCodeComponent;
+
+trait MarginTrait
+{
+    public int $margins = 15;
+
+    public function applyMargin()
+    {
+        $this->validate($this->getMarginRules());
+
+        $this->dispatch('apply-margin', $this->margins)
+            ->to(QrCodeComponent::class);
+    }
+
+    public function getMarginRules(): array
+    {
+        return [
+            'margins' => 'int|required|min:0',
+        ];
+    }
+}

package.json

@@ -13,5 +13,9 @@
         "postcss": "^8.4.28",
         "tailwindcss": "^3.3.3",
         "vite": "^4.0.0"
+    },
+    "dependencies": {
+        "cash-dom": "^8.1.5",
+        "flatpickr": "^4.6.13"
     }
 }