WIP

composer.json

@@ -18,7 +18,7 @@
     ],
     "require": {
         "php": "^8.0",
-        "illuminate/support": "^8.38.0|^9.0|^10.0",
+        "illuminate/support": "^8.38.0|^9.0|^10.0|^11.0",
         "yieldstudio/tailwind-merge-php": "^0.0.3"
     },
     "require-dev": {

resources/views/components/app.blade.php

@@ -1,3 +1,3 @@
-<div x-data="{{ UI::getJsRuntime() }}" class="[&_[x-cloak]]:hidden">
+<div x-data="{{ UI::getJsRuntime() }}" {{ $attributes }}>
     {{ $slot }}
 </div>

resources/views/components/field-error.blade.php

@@ -1 +1 @@
-<p class="text-red-600 dark:text-red-400">{{ $error }}</p>
+<p {{ $attributes }}>{{ $error }}</p>

resources/views/components/field-group.blade.php

@@ -1,20 +1,17 @@
 @php
     $id = 'smee';
-    // $id = $childComponents->first()->id;
 @endphp
 
-<div class="space-y-2">
-    <x-appkit::label for="{{ $id }}" :$label />
+<div {{ $attributes }}>
+    <x-appkit::label for="{{ $id }}" :$label {{ $labelElement }} />
 
-    <div>
+    <div {{ $inputWrapperElement }}>
         {{ $slot }}
     </div>
 
-    @if ($error)
-    <x-appkit::field-error :$error />
-    @endif
+    <x-appkit::field-error :$name :$error {{ $errorElement }} />
 
     @if ($help)
-    <x-appkit::help-text :$help />
+    <x-appkit::help-text :$help {{ $helpElement }} />
     @endif
 </div>

resources/views/components/fieldset.blade.php

@@ -1,5 +1,5 @@
-<fieldset>
-    <legend class="text-sm font-semibold leading-6 text-white">{{ $legend }}</legend>
+<fieldset {{ $attributes }}>
+    <legend class="font-medium text-gray-900 leading-6 dark:text-white">{{ $legend }}</legend>
 
     {{ $slot }}
 </fieldset>

resources/views/components/form.blade.php

@@ -0,0 +1,9 @@
+<form {!! $attributes !!}>
+    <div class="space-y-6">
+        @if (isset($errors) && $errors->any())
+        <div class="{{ config('formulate.classes.form_error') }}">{{ config('formulate.form_error_message') }}</div>
+        @endif
+
+        {{ $slot }}
+    </div>
+</form>

resources/views/components/help-text.blade.php

@@ -1 +1 @@
-<p class="text-gray-500 dark:text-gray-400">{{ $help }}</p>
+<p class="text-gray-500 dark:text-gray-400" {{ $attributes }}>{{ $help }}</p>

resources/views/components/label.blade.php

@@ -1 +1 @@
-<label for="{{ $for }}" class="font-medium text-gray-900 leading-6 dark:text-white" {{ $attributes }}>{{ $label }}</label>
+<label for="{{ $for }}" {{ $attributes }}>{{ $label }}</label>

resources/views/components/repeating-group/add-another-button.blade.php

@@ -0,0 +1,2 @@
+{{-- class="mb-4" --}}
+<x-appkit::button type="button" @click="{{ $source }}.push('');" {{ $attributes }}>Add Another</x-appkit::button>

resources/views/components/repeating-group/index.blade.php

@@ -0,0 +1,10 @@
+{{-- class="space-y-3 w-full" --}}
+<div {{ $attributes }}>
+    <template x-for="(_, {{ $indexName }}) in {{ $source }}" :key='{{ $indexName }}'>
+        {{ $slot }}
+    </template>
+</div>
+
+@if ($addAnother)
+    <x-appkit::repeating-group.add-another-button :$source />
+@endif

resources/views/components/repeating-group/remove-button.blade.php

@@ -0,0 +1 @@
+<x-appkit::button @click.prevent="{{ $source }}.length > 1 && {{ $source }}.splice(index, 1);">Remove</x-appkit::button>

resources/views/components/repeating-group/reorder-buttons.blade.php

@@ -0,0 +1,11 @@
+<x-appkit::button @click.prevent="{{ $source }}.splice(index - 1, 0, {{ $source }}.splice(index, 1)[0]);" ::disabled="index == 0">
+    <svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='w-4 h-4'>
+        <path stroke-linecap='round' stroke-linejoin='round' d='M8.25 6.75L12 3m0 0l3.75 3.75M12 3v18' />
+    </svg>
+</x-appkit::button>
+
+<x-appkit::button @click.prevent="{{ $source }}.splice(index + 1, 0, {{ $source }}.splice(index, 1)[0]);" ::disabled="index == {{ $source }}.length - 1">
+    <svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='w-4 h-4'>
+        <path stroke-linecap='round' stroke-linejoin='round' d='M19.5 13.5L12 21m0 0l-7.5-7.5M12 21V3' />
+    </svg>
+</x-appkit::button>

resources/views/components/repeating-group/reorder-handle.blade.php

@@ -0,0 +1,12 @@
+{{-- class="w-9 flex items-center cursor-move" --}}
+<div
+    @mousedown="draggable = true"
+    @touchstart="draggable = true"
+    @mouseup="draggable = false"
+    @touchend="draggable = false"
+    {{ $attributes }}
+>
+    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-3 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16" />
+    </svg>
+</div>

resources/views/components/repeating-group/reorder-item.blade.php

@@ -0,0 +1,19 @@
+<div
+    :draggable="draggable"
+    @dragstart="draggingIndex = index; $event.dataTransfer.setData('text/plain', index);"
+    @dragend="draggingIndex = null; droppingIndex = null;"
+    :class="{'opacity-50': draggingIndex === index, 'pt-10 bg-indigo-500': droppingIndex == index && draggingIndex > index, 'pb-10 bg-blue-500': droppingIndex == index && draggingIndex < index}"
+    class="relative transition-spacing duration-300 ease-in-out"
+>
+    {{ $slot }}
+
+    <div
+        class="absolute inset-0 opacity-60 cursor-move transition-spacing duration-300 ease-in-out z-10"
+        x-show.transition="draggingIndex !== null"
+        @dragenter.prevent="droppingIndex = index"
+        @dragleave="if (index === droppingIndex) { droppingIndex = null; }"
+        @drop.prevent="{{ $source }}.splice(droppingIndex, 0, {{ $source }}.splice(draggingIndex, 1)[0]); draggable = false; $nextTick(() => { form.validate(); });"
+        @dragover.prevent="$event.dataTransfer.dropEffect = 'move'"
+    >
+    </div>
+</div>

src/Components/BaseComponent.php

@@ -9,13 +9,20 @@
 use Illuminate\Console\View\Components\Component;
 use Illuminate\Support\Collection;
 use Illuminate\View\Component as BladeComponent;
+use ReflectionClass;
+use ReflectionProperty;
 use YieldStudio\TailwindMerge\TailwindMerge;
 use YieldStudio\TailwindMerge\TailwindMergeConfig;
 
 abstract class BaseComponent extends BladeComponent
 {
     use HasComponentBuilder;
 
+    /**
+     * The name of the view that this component renders
+     *
+     * @var string
+     */
     protected $viewName = null;
 
     public $elements = [];
@@ -82,6 +89,9 @@ public function withAttributes(array $attributes)
         // pull out the "new" attributes
         $this->attributes = $this->attributes->setAttributes($newAttributes);
 
+
+
+
         // loop through each piece of data that we have
         foreach ($this->data() as $dataName => $dataElement) {
             // check if it it's an instance of an element attribute bag
@@ -106,6 +116,11 @@ public function parentSet()
 
     }
 
+    public function build()
+    {
+
+    }
+
     /**
      * Render the component
      *
@@ -116,8 +131,39 @@ public function render()
         return function ($data) {
             UI::renderingComponent($this);
 
-            $data['childComponents'] = $this->childComponents;
-            $data['siblingIndex'] = $this->siblingIndex;
+            $this->build();
+
+            $class = get_class($this);
+
+            // dump($class);
+
+            $reflection = new ReflectionClass($this);
+
+            $properties = collect($reflection->getProperties(ReflectionProperty::IS_PUBLIC))
+                ->reject(function (ReflectionProperty $property) {
+                    return $property->isStatic();
+                })
+                ->reject(function (ReflectionProperty $property) {
+                    return $this->shouldIgnore($property->getName());
+                })
+                ->reject(function (ReflectionProperty $property) {
+                    $name = $property->getName();
+
+                    return $name == 'attributes' || $name == 'elements';
+                })
+                ->reject(function (ReflectionProperty $property) use ($data) {
+                    return is_a($data[$property->getName()], ElementAttributeBagWrapper::class);
+                })
+                ->map(function (ReflectionProperty $property) {
+                    return $property->getName();
+                })->all();
+
+            foreach ($properties as $property) {
+                if ($data[$property] != $this->{$property}) {
+
+                    $data[$property] = $this->{$property};
+                }
+            }
 
             return view($this->viewName, $data)->render();
         };

src/Components/Button.php

@@ -7,7 +7,7 @@ class Button extends BaseComponent
     protected $viewName = 'appkit-ui::components.button';
 
     public function __construct(
-        public string $color = 'red',
+        public string $color = 'blue',
         public string $size = 'md',
         public string $shape = 'rounded',
     ) {

src/Components/Concerns/HasComponentBuilder.php

@@ -35,8 +35,12 @@ trait HasComponentBuilder
      * @param int $weight
      * @return void
      */
-    public static function registerAttributeBuilderParser(callable $closure, $weight = 10)
+    public static function registerAttributeBuilderParser(callable|string $closure, $weight = 10)
     {
+        if (is_string($closure) && class_exists($closure) && method_exists($closure, '__invoke')) {
+            $closure = new $closure();
+        }
+
         // if this is the first time that we are seeing the weight
         if (!array_key_exists(static::class, static::$componentBuilderParsers)) {
             // set up an array to store all of the closures of this weight
@@ -56,7 +60,7 @@ public static function registerAttributeBuilderParser(callable $closure, $weight
     /**
      * @see registerAttributeBuilderParser
      */
-    public static function customize(callable $closure, $weight = 10)
+    public static function customize(callable|string $closure, $weight = 10)
     {
         // this is just an alias to registerAttributeBuilderParser
         static::registerAttributeBuilderParser(...func_get_args());
@@ -65,7 +69,7 @@ public static function customize(callable $closure, $weight = 10)
     /**
      * @see registerAttributeBuilderParser
      */
-    public static function customise(callable $closure, $weight = 10)
+    public static function customise(callable|string $closure, $weight = 10)
     {
         // this is just an alias to registerAttributeBuilderParser
         static::registerAttributeBuilderParser(...func_get_args());

src/Components/FieldError.php

@@ -7,6 +7,7 @@ class FieldError extends BaseComponent
     protected $viewName = 'appkit-ui::components.field-error';
 
     public function __construct(
+        public ?string $name,
         public string $error,
     ) {
 

src/Components/FieldGroup.php

@@ -6,11 +6,20 @@ class FieldGroup extends BaseComponent
 {
     protected $viewName = 'appkit-ui::components.field-group';
 
+    public $labelElement;
+    public $inputWrapperElement;
+    public $errorElement;
+    public $helpElement;
+
     public function __construct(
+        public ?string $name = '',
         public ?string $label = '',
         public ?string $help = '',
         public ?string $error = '',
     ) {
-
+        $this->labelElement = $this->registerAttributeBuilderElement('label');
+        $this->inputWrapperElement = $this->registerAttributeBuilderElement('wrapper');
+        $this->errorElement = $this->registerAttributeBuilderElement('error');
+        $this->helpElement = $this->registerAttributeBuilderElement('help');
     }
 }

src/Components/Form.php

@@ -0,0 +1,14 @@
+<?php
+namespace AppKit\UI\Components;
+
+class Form extends BaseComponent
+{
+    protected $viewName = 'appkit-ui::components.form';
+
+    public function __construct(
+        // public $action = '',
+        // public $method = '',
+    ) {
+
+    }
+}

src/Components/Input.php

@@ -2,6 +2,9 @@
 
 namespace AppKit\UI\Components;
 
+use AppKit\UI\Facades\UI;
+use Illuminate\Support\Str;
+
 class Input extends BaseComponent
 {
     protected $viewName = 'appkit-ui::components.input';
@@ -10,12 +13,14 @@ class Input extends BaseComponent
 
     public function __construct(
         public string $name,
+        public string $label = '',
         public string $postfix = '',
         public string $prefix = '',
         public string $type = 'text',
         public string $width = 'md',
         public string $id = '',
         public bool $hasError = false,
+        public bool $multiple = false,
     ) {
         $this->exposePropertyAsState('width');
 
@@ -50,6 +55,10 @@ public function __construct(
         if (!$this->id) {
             $this->id = $this->name;
         }
+
+        if ($this->multiple && !Str::of($this->name)->endsWith('[]')) {
+            $this->name .= '[]';
+        }
     }
 
     public function parentSet()
@@ -58,4 +67,27 @@ public function parentSet()
             $this->hasError = true;
         }
     }
+
+    /**
+     * Render the component
+     *
+     * @return Closure
+     */
+    /*public function render()
+    {
+        dump($this);
+
+        return function ($data) {
+            UI::renderingComponent($this);
+
+            dump(['$data' => $data]);
+            dump(['$this->data()' => $this->data()]);
+            dd(['merge' => array_merge($data, $this->extractPublicProperties())]);
+
+            $data['childComponents'] = $this->childComponents;
+            $data['siblingIndex'] = $this->siblingIndex;
+
+            return view($this->viewName, $data)->render();
+        };
+    }*/
 }

src/Components/RepeatingGroup.php

@@ -0,0 +1,17 @@
+<?php
+
+namespace AppKit\UI\Components;
+
+class RepeatingGroup extends BaseComponent
+{
+    protected $viewName = 'appkit-ui::components.repeating-group.index';
+
+    public function __construct(
+        public string $source,
+        public string $indexName = 'index',
+        public bool $orderable = false,
+        public bool $addAnother = false,
+    ) {
+
+    }
+}

src/Components/RepeatingGroup/AddAnotherButton.php

@@ -0,0 +1,16 @@
+<?php
+
+namespace AppKit\UI\Components\RepeatingGroup;
+
+use AppKit\UI\Components\BaseComponent;
+
+class AddAnotherButton extends BaseComponent
+{
+    protected $viewName = 'appkit-ui::components.repeating-group.add-another-button';
+
+    public function __construct(
+        public string $source,
+    ) {
+
+    }
+}