From 867862d5953f6c0d3127e58180772f26060adf15 Mon Sep 17 00:00:00 2001 From: Darren Coutts Date: Tue, 10 Sep 2024 12:45:19 +0000 Subject: [PATCH] WIP --- composer.json | 2 +- resources/views/components/app.blade.php | 2 +- .../views/components/field-error.blade.php | 2 +- .../views/components/field-group.blade.php | 13 ++--- resources/views/components/fieldset.blade.php | 4 +- resources/views/components/form.blade.php | 9 ++++ .../views/components/help-text.blade.php | 2 +- resources/views/components/label.blade.php | 2 +- .../add-another-button.blade.php | 2 + .../repeating-group/index.blade.php | 10 ++++ .../repeating-group/remove-button.blade.php | 1 + .../repeating-group/reorder-buttons.blade.php | 11 ++++ .../repeating-group/reorder-handle.blade.php | 12 +++++ .../repeating-group/reorder-item.blade.php | 19 +++++++ src/Components/BaseComponent.php | 50 ++++++++++++++++++- src/Components/Button.php | 2 +- .../Concerns/HasComponentBuilder.php | 10 ++-- src/Components/FieldError.php | 1 + src/Components/FieldGroup.php | 11 +++- src/Components/Form.php | 14 ++++++ src/Components/Input.php | 32 ++++++++++++ src/Components/RepeatingGroup.php | 17 +++++++ .../RepeatingGroup/AddAnotherButton.php | 16 ++++++ .../RepeatingGroup/RemoveButton.php | 42 ++++++++++++++++ .../RepeatingGroup/ReorderButtons.php | 42 ++++++++++++++++ .../RepeatingGroup/ReorderHandle.php | 14 ++++++ src/Components/RepeatingGroup/ReorderItem.php | 42 ++++++++++++++++ .../Traits/InteractsWithComponentStack.php | 43 ++++++++++++++++ src/Styles/Tailwind/Components/AppStyler.php | 14 ++++++ .../Tailwind/Components/FieldErrorStyler.php | 17 +++++++ .../Tailwind/Components/FieldGroupStyler.php | 14 ++++++ .../Tailwind/Components/InputStyler.php | 3 -- .../Tailwind/Components/LabelStyler.php | 21 ++++++++ src/Styles/Tailwind/Tailwind.php | 10 ++-- src/UI.php | 10 ++++ 35 files changed, 486 insertions(+), 30 deletions(-) create mode 100644 resources/views/components/form.blade.php create mode 100644 resources/views/components/repeating-group/add-another-button.blade.php create mode 100644 resources/views/components/repeating-group/index.blade.php create mode 100644 resources/views/components/repeating-group/remove-button.blade.php create mode 100644 resources/views/components/repeating-group/reorder-buttons.blade.php create mode 100644 resources/views/components/repeating-group/reorder-handle.blade.php create mode 100644 resources/views/components/repeating-group/reorder-item.blade.php create mode 100644 src/Components/Form.php create mode 100644 src/Components/RepeatingGroup.php create mode 100644 src/Components/RepeatingGroup/AddAnotherButton.php create mode 100644 src/Components/RepeatingGroup/RemoveButton.php create mode 100644 src/Components/RepeatingGroup/ReorderButtons.php create mode 100644 src/Components/RepeatingGroup/ReorderHandle.php create mode 100644 src/Components/RepeatingGroup/ReorderItem.php create mode 100644 src/Components/Traits/InteractsWithComponentStack.php create mode 100644 src/Styles/Tailwind/Components/AppStyler.php create mode 100644 src/Styles/Tailwind/Components/FieldErrorStyler.php create mode 100644 src/Styles/Tailwind/Components/FieldGroupStyler.php create mode 100644 src/Styles/Tailwind/Components/LabelStyler.php diff --git a/composer.json b/composer.json index 6408cba..5a4dce8 100644 --- a/composer.json +++ b/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": { diff --git a/resources/views/components/app.blade.php b/resources/views/components/app.blade.php index 14fe3cd..b7c0e27 100644 --- a/resources/views/components/app.blade.php +++ b/resources/views/components/app.blade.php @@ -1,3 +1,3 @@ -
+
{{ $slot }}
diff --git a/resources/views/components/field-error.blade.php b/resources/views/components/field-error.blade.php index 521ce6c..27b2d8d 100644 --- a/resources/views/components/field-error.blade.php +++ b/resources/views/components/field-error.blade.php @@ -1 +1 @@ -

{{ $error }}

+

{{ $error }}

diff --git a/resources/views/components/field-group.blade.php b/resources/views/components/field-group.blade.php index 8905b0a..476cf20 100644 --- a/resources/views/components/field-group.blade.php +++ b/resources/views/components/field-group.blade.php @@ -1,20 +1,17 @@ @php $id = 'smee'; - // $id = $childComponents->first()->id; @endphp -
- +
+ -
+
{{ $slot }}
- @if ($error) - - @endif + @if ($help) - + @endif
diff --git a/resources/views/components/fieldset.blade.php b/resources/views/components/fieldset.blade.php index ea8dd98..1c6bb99 100644 --- a/resources/views/components/fieldset.blade.php +++ b/resources/views/components/fieldset.blade.php @@ -1,5 +1,5 @@ -
- {{ $legend }} +
+ {{ $legend }} {{ $slot }}
diff --git a/resources/views/components/form.blade.php b/resources/views/components/form.blade.php new file mode 100644 index 0000000..2e00a7a --- /dev/null +++ b/resources/views/components/form.blade.php @@ -0,0 +1,9 @@ +
+
+ @if (isset($errors) && $errors->any()) +
{{ config('formulate.form_error_message') }}
+ @endif + + {{ $slot }} +
+
diff --git a/resources/views/components/help-text.blade.php b/resources/views/components/help-text.blade.php index 05d5f23..9e7b6ef 100644 --- a/resources/views/components/help-text.blade.php +++ b/resources/views/components/help-text.blade.php @@ -1 +1 @@ -

{{ $help }}

+

{{ $help }}

diff --git a/resources/views/components/label.blade.php b/resources/views/components/label.blade.php index 890539b..be29418 100644 --- a/resources/views/components/label.blade.php +++ b/resources/views/components/label.blade.php @@ -1 +1 @@ - + diff --git a/resources/views/components/repeating-group/add-another-button.blade.php b/resources/views/components/repeating-group/add-another-button.blade.php new file mode 100644 index 0000000..2175bc6 --- /dev/null +++ b/resources/views/components/repeating-group/add-another-button.blade.php @@ -0,0 +1,2 @@ +{{-- class="mb-4" --}} +Add Another diff --git a/resources/views/components/repeating-group/index.blade.php b/resources/views/components/repeating-group/index.blade.php new file mode 100644 index 0000000..2208751 --- /dev/null +++ b/resources/views/components/repeating-group/index.blade.php @@ -0,0 +1,10 @@ +{{-- class="space-y-3 w-full" --}} +
+ +
+ +@if ($addAnother) + +@endif diff --git a/resources/views/components/repeating-group/remove-button.blade.php b/resources/views/components/repeating-group/remove-button.blade.php new file mode 100644 index 0000000..94741d2 --- /dev/null +++ b/resources/views/components/repeating-group/remove-button.blade.php @@ -0,0 +1 @@ +Remove diff --git a/resources/views/components/repeating-group/reorder-buttons.blade.php b/resources/views/components/repeating-group/reorder-buttons.blade.php new file mode 100644 index 0000000..1bd5bdf --- /dev/null +++ b/resources/views/components/repeating-group/reorder-buttons.blade.php @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/resources/views/components/repeating-group/reorder-handle.blade.php b/resources/views/components/repeating-group/reorder-handle.blade.php new file mode 100644 index 0000000..d1e1539 --- /dev/null +++ b/resources/views/components/repeating-group/reorder-handle.blade.php @@ -0,0 +1,12 @@ +{{-- class="w-9 flex items-center cursor-move" --}} +
+ + + +
diff --git a/resources/views/components/repeating-group/reorder-item.blade.php b/resources/views/components/repeating-group/reorder-item.blade.php new file mode 100644 index 0000000..4e47482 --- /dev/null +++ b/resources/views/components/repeating-group/reorder-item.blade.php @@ -0,0 +1,19 @@ +
+ {{ $slot }} + +
+
+
diff --git a/src/Components/BaseComponent.php b/src/Components/BaseComponent.php index dc94495..267e99e 100644 --- a/src/Components/BaseComponent.php +++ b/src/Components/BaseComponent.php @@ -9,6 +9,8 @@ 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; @@ -16,6 +18,11 @@ 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(); }; diff --git a/src/Components/Button.php b/src/Components/Button.php index 1245ac6..34b7f7f 100644 --- a/src/Components/Button.php +++ b/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', ) { diff --git a/src/Components/Concerns/HasComponentBuilder.php b/src/Components/Concerns/HasComponentBuilder.php index edc2e01..2097e4e 100644 --- a/src/Components/Concerns/HasComponentBuilder.php +++ b/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()); diff --git a/src/Components/FieldError.php b/src/Components/FieldError.php index 1711dab..aacbc9c 100644 --- a/src/Components/FieldError.php +++ b/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, ) { diff --git a/src/Components/FieldGroup.php b/src/Components/FieldGroup.php index c7c8d69..5bbd97c 100644 --- a/src/Components/FieldGroup.php +++ b/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'); } } diff --git a/src/Components/Form.php b/src/Components/Form.php new file mode 100644 index 0000000..b9313c6 --- /dev/null +++ b/src/Components/Form.php @@ -0,0 +1,14 @@ +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(); + }; + }*/ } diff --git a/src/Components/RepeatingGroup.php b/src/Components/RepeatingGroup.php new file mode 100644 index 0000000..e19cbf9 --- /dev/null +++ b/src/Components/RepeatingGroup.php @@ -0,0 +1,17 @@ +source)) { + // find the closes Repeating Group component + $repeatingGroup = $this->closest(RepeatingGroup::class, true); + + // use the parent as the source + $this->source = $repeatingGroup->source; + } + } +} diff --git a/src/Components/RepeatingGroup/ReorderButtons.php b/src/Components/RepeatingGroup/ReorderButtons.php new file mode 100644 index 0000000..b3cd90d --- /dev/null +++ b/src/Components/RepeatingGroup/ReorderButtons.php @@ -0,0 +1,42 @@ +source)) { + // find the closes Repeating Group component + $repeatingGroup = $this->closest(RepeatingGroup::class, true); + + // use the parent as the source + $this->source = $repeatingGroup->source; + } + } +} diff --git a/src/Components/RepeatingGroup/ReorderHandle.php b/src/Components/RepeatingGroup/ReorderHandle.php new file mode 100644 index 0000000..11328d5 --- /dev/null +++ b/src/Components/RepeatingGroup/ReorderHandle.php @@ -0,0 +1,14 @@ +source)) { + // find the closes Repeating Group component + $repeatingGroup = $this->closest(RepeatingGroup::class, true); + + // use the parent as the source + $this->source = $repeatingGroup->source; + } + } +} diff --git a/src/Components/Traits/InteractsWithComponentStack.php b/src/Components/Traits/InteractsWithComponentStack.php new file mode 100644 index 0000000..4a58ba1 --- /dev/null +++ b/src/Components/Traits/InteractsWithComponentStack.php @@ -0,0 +1,43 @@ +parentComponent; + + // set up a flag to keep track if we have found a suitable candidate + $found = false; + + // iterate up the tree whilst we still have a parent, and haven't found what we are looking for + while (!is_null($ancestor) && !$found) { + if (in_array(get_class($ancestor), $components)) { + $found = true; + } else { + $ancestor = $ancestor->parentComponent; + } + } + + // if we get to the top of the tree, and haven't found what we are looking for, maybe throw an exception + if (!$found && $throw) { + throw new Exception(self::class . ' components expects to be a descendant of a ' . implode(' or ', $components) . ' component'); + } + + // return the suitable candidate + return $ancestor; + } +} diff --git a/src/Styles/Tailwind/Components/AppStyler.php b/src/Styles/Tailwind/Components/AppStyler.php new file mode 100644 index 0000000..9c76c5e --- /dev/null +++ b/src/Styles/Tailwind/Components/AppStyler.php @@ -0,0 +1,14 @@ +addClass('[&_[x-cloak]]:hidden'); + } +} diff --git a/src/Styles/Tailwind/Components/FieldErrorStyler.php b/src/Styles/Tailwind/Components/FieldErrorStyler.php new file mode 100644 index 0000000..1890d19 --- /dev/null +++ b/src/Styles/Tailwind/Components/FieldErrorStyler.php @@ -0,0 +1,17 @@ +addClass(['text-red-600', 'dark:text-red-400']); + // $componentBuilder->setAttribute('x-text', 'form.errors.' . $instance->name); + } +} diff --git a/src/Styles/Tailwind/Components/FieldGroupStyler.php b/src/Styles/Tailwind/Components/FieldGroupStyler.php new file mode 100644 index 0000000..541abfb --- /dev/null +++ b/src/Styles/Tailwind/Components/FieldGroupStyler.php @@ -0,0 +1,14 @@ +addClass('space-y-2'); + } +} diff --git a/src/Styles/Tailwind/Components/InputStyler.php b/src/Styles/Tailwind/Components/InputStyler.php index 93cc810..ea5fefb 100644 --- a/src/Styles/Tailwind/Components/InputStyler.php +++ b/src/Styles/Tailwind/Components/InputStyler.php @@ -11,9 +11,6 @@ class InputStyler extends BaseStyler { public function __invoke(ComponentBuilder $componentBuilder, BaseComponent $instance): void { - $componentBuilder->setAttribute('x-model', 'form.' . $instance->name); - $componentBuilder->setAttribute('@change', 'form.validate(\'' . $instance->name . '\')'); - // if we aren't a checkbox, we add the normal styling $componentBuilder->whenNot('isCheckable', function (ComponentBuilder $componentBuilder) { // add the default field styling diff --git a/src/Styles/Tailwind/Components/LabelStyler.php b/src/Styles/Tailwind/Components/LabelStyler.php new file mode 100644 index 0000000..79979d2 --- /dev/null +++ b/src/Styles/Tailwind/Components/LabelStyler.php @@ -0,0 +1,21 @@ +addClass([ + 'font-medium', + 'text-gray-900', + 'leading-6', + 'dark:text-white', + ]); + } +} diff --git a/src/Styles/Tailwind/Tailwind.php b/src/Styles/Tailwind/Tailwind.php index c80f165..0834ed9 100644 --- a/src/Styles/Tailwind/Tailwind.php +++ b/src/Styles/Tailwind/Tailwind.php @@ -32,7 +32,7 @@ public function locateStylerForComponent(string $component): ?string * @return string[] * @throws RuntimeException */ - public function getColorClasses(string $color, int $scale = 600, string $property = 'bg', $include = []) + public function getColorClasses(string $color, int $scale = 600, string $property = 'bg', $include = []): array { // the array of classes that we need to add $classes = []; @@ -109,7 +109,7 @@ public function getColorClasses(string $color, int $scale = 600, string $propert * @param string $prefix * @return string */ - private function generateColorClass($color, $scale, $property, $prefix = '') + private function generateColorClass($color, $scale, $property, $prefix = ''): string { // the parts of the class $parts = [$property, $color, $scale]; @@ -131,7 +131,7 @@ private function generateColorClass($color, $scale, $property, $prefix = '') * @param int $scale * @return string */ - public function getTextOnColorScale(string $color, int $scale) + public function getTextOnColorScale(string $color, int $scale): string { return $scale < 500 ? 'black' : 'white'; } @@ -143,7 +143,7 @@ public function getTextOnColorScale(string $color, int $scale) * @param int $scale * @return int */ - public function getHoverColorScale(string $color, int $scale) + public function getHoverColorScale(string $color, int $scale): int { return $scale > 100 ? ($scale - 100) : ($scale + 100); } @@ -155,7 +155,7 @@ public function getHoverColorScale(string $color, int $scale) * @param int $scale * @return int */ - public function getDarkModeColorScale(string $color, int $scale) + public function getDarkModeColorScale(string $color, int $scale): int { return 900 - $scale; } diff --git a/src/UI.php b/src/UI.php index 25c12c4..e1ea6aa 100644 --- a/src/UI.php +++ b/src/UI.php @@ -5,6 +5,7 @@ use AppKit\UI\Components\BaseComponent; use AppKit\UI\Contracts\StyleFramework; use AppKit\UI\Styles\Tailwind\Tailwind; +use Illuminate\Support\Facades\Log; use Illuminate\Support\Js; use Illuminate\View\Component; @@ -64,6 +65,13 @@ public function loadCustomizationsForComponent(string $component) } } + public function customiseComponents($customisers) + { + foreach ($customisers as $component => $customiser) { + $component::customise($customiser); + } + } + /** * Start rendering a component * @@ -94,6 +102,8 @@ public function startComponent(BaseComponent $component) $nested = true; } + $component->build(); + $this->renderStack[] = $component; }