✨ Allow creation of custom components

Sikessem · Jul 19, 2023 · 7822089 · 7822089
1 parent 199494f
commit 7822089
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 6 deletions.
diff --git 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
@@ -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 → config/ui.php b/config/sikessem-ui.php → 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
@@ -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
@@ -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
@@ -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")');
+});