From 782208937aab2307388a013cad5c0e83ecb8e2fb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?SIGUI=20Kess=C3=A9=20Emmanuel?= <emmanuel@kesse.sigui.ci>
Date: Wed, 19 Jul 2023 20:16:45 +0100
Subject: [PATCH] :sparkles: Allow creation of custom components

---
 CHANGELOG.md                       |  1 +
 README.md                          | 20 ++++++++++++++++++++
 config/{sikessem-ui.php => ui.php} |  9 +++++++++
 src/Core/Manager.php               | 13 ++++++++++---
 src/Core/ServiceProvider.php       |  6 +++---
 tests/Feat/CustomComponentTest.php |  7 +++++++
 6 files changed, 50 insertions(+), 6 deletions(-)
 rename config/{sikessem-ui.php => ui.php} (56%)
 create mode 100644 tests/Feat/CustomComponentTest.php

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f08a712..67eb94b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,7 @@ All notable changes to [Sikessem's UI kit](https://github.com/sikessem/ui) will
 
 **Full Changelog:** [v0.0.0...v0.1.0](https://github.com/sikessem/ui/compare/v0.0.0...v0.1.0)
 
+- [0.x] Allow [**custom** components](https://github.com/sikessem/ui#-custom-components)
 - [0.x] Add [**flashes** component](https://github.com/sikessem/ui#flashes-component)
 - [0.x] Add [**flash** component](https://github.com/sikessem/ui#flash-component)
 - [0.x] Add [**label** component](https://github.com/sikessem/ui#label-component)
diff --git a/README.md b/README.md
index ddd82da..8c9326c 100644
--- a/README.md
+++ b/README.md
@@ -88,6 +88,7 @@
         - [Label component](#label-component)
         - [Flash component](#flash-component)
         - [Flashes component](#flashes-component)
+      - [🎨 Custom components](#-custom-components)
     - [🧪 Testing and debugging](#-testing-and-debugging)
       - [🧹 Keep a modern codebase](#-keep-a-modern-codebase)
       - [⚗️ Run static analysis](#️-run-static-analysis)
@@ -387,6 +388,25 @@ Otherwise, the output will be:
 </ul>
 ```
 
+#### 🎨 Custom components
+
+Create custom components from `config/ui.php` file.
+
+```blade
+@ui('custom', ['class' => 'element', 'id' => 'myElement'], '')
+  My custom component
+@endui
+```
+
+Output:
+
+```html
+<custom-element class="my custom element" id="myElement">
+  My custom component
+</custom-element>
+
+```
+
 ### 🧪 Testing and debugging
 
 #### 🧹 Keep a modern codebase
diff --git a/config/sikessem-ui.php b/config/ui.php
similarity index 56%
rename from config/sikessem-ui.php
rename to config/ui.php
index 31cae45..ddd29a3 100644
--- a/config/sikessem-ui.php
+++ b/config/ui.php
@@ -13,4 +13,13 @@
             'attributes' => [],
         ],
     ],
+
+    /*
+     * Define custom component
+     */
+    'custom' => [
+        'element' => 'custom-element',
+        'attributes' => ['id' => 'myCustom', 'class' => 'my custom'],
+        'slot' => 'My Content',
+    ],
 ];
diff --git a/src/Core/Manager.php b/src/Core/Manager.php
index 3800740..c0fe2ec 100644
--- a/src/Core/Manager.php
+++ b/src/Core/Manager.php
@@ -81,20 +81,27 @@ public function make(string $name = null, array|ComponentAttributes $attributes
             return $this->end();
         }
 
-        if ($attributes instanceof ComponentAttributes) {
-            $attributes = $attributes->getAttributes();
+        if (! $attributes instanceof ComponentAttributes) {
+            $attributes = new ComponentAttributes($attributes);
         }
+        $attributes = $attributes->merge((array) config("ui.$name.attributes", []));
 
+        /** @var string|ComponentSlot */
+        $defaultSlot = config("ui.$name.slot", '');
+        $slot ??= $defaultSlot;
         if ($slot instanceof ComponentSlot) {
             $slot = $slot->toHtml();
         }
 
-        $slot = new ComponentSlot($slot ?: '', $attributes);
+        $slot = new ComponentSlot($slot, $attributes->getAttributes());
 
         if ($render = $this->build($name, $slot)) {
             return $render;
         }
 
+        /** @var string */
+        $name = config("ui.$name.element", $name);
+
         array_push($this->tags, $name);
 
         $render = "<{$name} {$slot->attributes->toHtml()}>";
diff --git a/src/Core/ServiceProvider.php b/src/Core/ServiceProvider.php
index 4601f2a..3f8e649 100644
--- a/src/Core/ServiceProvider.php
+++ b/src/Core/ServiceProvider.php
@@ -47,7 +47,7 @@ protected function registerServices(): void
 
     protected function registerConfig(): void
     {
-        $this->mergeConfigFrom(sikessem_ui_path('config/sikessem-ui.php'), 'ui');
+        $this->mergeConfigFrom(sikessem_ui_path('config/ui.php'), 'ui');
     }
 
     protected function registerTranslations(): void
@@ -105,11 +105,11 @@ protected function registerComponents(): void
     protected function registerPublishables(): void
     {
         $this->publishesToGroups([
-            sikessem_ui_path('config/sikessem-ui.php') => config_path('sikessem-ui.php'),
+            sikessem_ui_path('config/ui.php') => config_path('ui.php'),
         ], ['sikessem', 'ui:config']);
 
         $this->publishesToGroups([
-            sikessem_ui_path('res/langs') => lang_path(),
+            sikessem_ui_path('res/langs') => lang_path('ui'),
         ], ['sikessem', 'ui:langs']);
 
         $this->publishesToGroups([
diff --git a/tests/Feat/CustomComponentTest.php b/tests/Feat/CustomComponentTest.php
new file mode 100644
index 0000000..8f1fb34
--- /dev/null
+++ b/tests/Feat/CustomComponentTest.php
@@ -0,0 +1,7 @@
+<?php
+
+namespace Tests\Unit;
+
+it('should render HTML element', function () {
+    expect('<custom-element id="myElement" class="my custom element">Custom Element</custom-element>')->toBeRenderOf('@ui("custom", ["class" => "element", "id" => "myElement"], "Custom Element")');
+});