Move towards using attributes

Author: darrencoutts118

resources/views/components/grid/column.blade.php

@@ -0,0 +1,3 @@
+<div class="col-span-12 md:col-span-3 2xl:col-span-{{ $width }}">
+    {{ $slot }}
+</div>

resources/views/components/grid/index.blade.php

@@ -0,0 +1,3 @@
+<div class="grid grid-cols-{{ $columns }} gap-{{ $gap }}">
+    {{ $slot }}
+</div>

src/Attributes/Element.php

@@ -0,0 +1,14 @@
+<?php
+
+namespace AppKit\UI\Attributes;
+
+use Attribute;
+
+#[Attribute(Attribute::TARGET_PROPERTY)]
+final class Element
+{
+    public function __construct(public string $elementName)
+    {
+
+    }
+}

src/Attributes/ExposedAsState.php

@@ -0,0 +1,14 @@
+<?php
+
+namespace AppKit\UI\Attributes;
+
+use Attribute;
+
+#[Attribute(Attribute::TARGET_PARAMETER|Attribute::TARGET_METHOD)]
+final class ExposedAsState
+{
+    public function __construct()
+    {
+
+    }
+}

src/Attributes/Inheritable.php

@@ -5,7 +5,7 @@
 use Attribute;
 
 #[Attribute(Attribute::TARGET_PARAMETER)]
-class Inheritable
+final class Inheritable
 {
     public function __construct(public array|string $fromComponents)
     {

src/Attributes/Slotable.php

@@ -5,7 +5,7 @@
 use Attribute;
 
 #[Attribute(Attribute::TARGET_PARAMETER)]
-class Slotable
+final class Slotable
 {
     public function __construct(public ?string $slotName = null)
     {

src/Components/Alert.php

@@ -2,6 +2,8 @@
 
 namespace AppKit\UI\Components;
 
+use AppKit\UI\Attributes\Element;
+use AppKit\UI\Attributes\ExposedAsState;
 use AppKit\UI\Attributes\Slotable;
 use AppKit\UI\ElementAttributeBag;
 
@@ -12,40 +14,42 @@ class Alert extends BaseComponent
      *
      * @var ElementAttributeBag
      */
-    public ElementAttributeBag $titleAttributes;
+    #[Element('title')]
+    public ?ElementAttributeBag $titleAttributes = null;
 
     /**
      * Attributes to be applied to the error message
      *
      * @var ElementAttributeBag
      */
-    public ElementAttributeBag $contentAttributes;
+    #[Element('content')]
+    public ?ElementAttributeBag $contentAttributes = null;
 
     /**
      * Attributes to be applied to the error message
      *
      * @var ElementAttributeBag
      */
-    public ElementAttributeBag $iconAttributes;
+    #[Element('icon')]
+    public ?ElementAttributeBag $iconAttributes = null;
 
     /**
-     * The name of the view that this component renders
+     * Create an instance of the component
      *
-     * @var string
+     * @param string|null $icon
+     * @param string|null $title
+     * @param string|null $type
      */
-    protected string $viewName = 'components.alert';
-
     public function __construct(
-        #[Slotable]
-        public ?string $title = null,
         #[Slotable]
         public ?string $icon = null,
+
+        #[Slotable]
+        public ?string $title = null,
+
+        #[ExposedAsState]
         public ?string $type = 'success',
     ) {
-        $this->titleAttributes = $this->registerAttributeBuilderElement('title');
-        $this->contentAttributes = $this->registerAttributeBuilderElement('content');
-        $this->iconAttributes = $this->registerAttributeBuilderElement('icon');
-
-        $this->exposePropertyAsState('type');
+        // constructor promotion handles the rest
     }
 }

src/Components/App.php

@@ -5,15 +5,9 @@
 class App extends BaseComponent
 {
     /**
-     * The name of the view that this component renders
-     *
-     * @var string
+     * Create an instance of the component
      */
-    protected string $viewName = 'components.app';
-
-    public function __construct(
-
-    ) {
-
+    public function __construct() {
+        // constructor promotion handles the rest
     }
 }

src/Components/BaseComponent.php

@@ -2,15 +2,20 @@
 
 namespace AppKit\UI\Components;
 
+use AppKit\UI\Attributes\Element;
+use AppKit\UI\Attributes\ExposedAsState;
 use AppKit\UI\Attributes\Inheritable;
 use AppKit\UI\Attributes\Slotable;
 use AppKit\UI\ComponentBuilder;
 use AppKit\UI\Components\Concerns\HasComponentBuilder;
+use AppKit\UI\Components\Concerns\InteractsWithComponentStack;
 use AppKit\UI\ElementAttributeBag;
 use AppKit\UI\Facades\UI;
 use AppKit\UI\Support\Attributes;
 use Attribute;
+use Closure;
 use Illuminate\Support\Collection;
+use Illuminate\Support\Str;
 use Illuminate\View\Component as BladeComponent;
 use Illuminate\View\ComponentAttributeBag;
 use ReflectionClass;
@@ -21,6 +26,7 @@
 abstract class BaseComponent extends BladeComponent
 {
     use HasComponentBuilder;
+    use InteractsWithComponentStack;
 
     /**
      * The name of the view that this component renders
@@ -45,8 +51,44 @@ abstract class BaseComponent extends BladeComponent
      */
     public function withAttributes(array $attributes)
     {
+        // flag to the service provider that we are starting this component
         UI::startComponent($this);
 
+        // if we don't have a view name passed in, we try to generate one based on a convention
+        if (empty($this->viewName)) {
+            $this->viewName = Str::of(static::class)
+                ->remove('AppKit\UI\Components\\')
+                ->replace('\\', '.')
+                ->kebab()
+                ->replace('.-', '.')
+                ->prepend('components.');
+        }
+
+        // find parameters that are being exposed as a state
+        Attributes::find(ExposedAsState::class)
+            ->onConstructorParameters()
+            ->ofClass(static::class)
+            ->get()
+            ->keys()
+            ->each(fn ($parameter) => $this->exposePropertyAsState($parameter));
+
+        Attributes::find(ExposedAsState::class)
+            ->onMethods()
+            ->ofClass(static::class)
+            ->get()
+            ->keys()
+            ->each(fn ($method) => $this->defineState($method, Closure::fromCallable([$this, $method])));
+
+        // find the element attribute bags that we need to register
+        Attributes::find(Element::class)
+            ->onProperties()
+            ->ofClass(static::class)
+            ->get()
+            ->each(function ($attribute, $property) {
+                $this->{$property} = $this->registerElement($attribute->elementName);
+            });
+
+        // create a collection of child components
         $this->childComponents = new Collection();
 
         // ensure that we have an attribute bag assigned to the component
@@ -247,6 +289,7 @@ public function render()
             // if we have inheritable attributes on the component (attributes passed in from another attribute bag)
             if (isset($data['inheritedAttributes'])) {
                 // we merge them in right at the end
+                dd($this->inheritedAttributes);
                 $data['attributes'] = $data['attributes']->merge($this->inheritedAttributes);
             }
 

src/Components/Button.php

@@ -2,23 +2,30 @@
 
 namespace AppKit\UI\Components;
 
+use AppKit\UI\Attributes\ExposedAsState;
+
 class Button extends BaseComponent
 {
     /**
-     * The name of the view that this component renders
+     * Create an instance of the component
      *
-     * @var string
+     * @param string $color
+     * @param string $size
+     * @param string $shape
+     * @param string|null $href
      */
-    protected string $viewName = 'components.button';
-
     public function __construct(
+        #[ExposedAsState]
         public string $color = 'red',
+
+        #[ExposedAsState]
         public string $size = 'md',
+
+        #[ExposedAsState]
         public string $shape = 'rounded',
+
         public ?string $href = null,
     ) {
-        $this->exposePropertyAsState('color');
-        $this->exposePropertyAsState('size');
-        $this->exposePropertyAsState('shape');
+        // constructor promotion handles the rest
     }
 }