feat: html (#9)

README.md

@@ -5,19 +5,9 @@
 [![GitHub Code Style Action Status](https://img.shields.io/github/actions/workflow/status/foxws/wireuse/fix-php-code-style-issues.yml?branch=3.x&label=code%20style&style=flat-square)](https://github.com/foxws/wireuse/actions?query=workflow%3A"Fix+PHP+code+style+issues"+branch%3A3.x)
 [![Total Downloads](https://img.shields.io/packagist/dt/foxws/wireuse.svg?style=flat-square)](https://packagist.org/packages/foxws/wireuse)
 
-This packages offers a collection of useful [Livewire](https://livewire.laravel.com/) utilities and components. :)
+This packages offers a collection of useful [Livewire](https://livewire.laravel.com/) utilities and components.
 
-It is made to assemble your Livewire and Blade components yourself, rather than extending from an existing framework or baseset.
-
-It shares the same idea as [VueUse](https://vueuse.org/), but for Laravel Livewire.
-
-If you have a suggestion, idea or feedback, please feel free to send a PR or create a discussion. :)
-
-## Documentation
-
-You will find full documentation on the dedicated [documentation](https://foxws.nl/projects/wireuse) site.
-
-> NOTE: The documentation is far from complete, see [discussion](https://github.com/foxws/wireuse/discussions/3) for progress and ideas.
+The full documentation and more information about WireUse, is on our dedicated [documentation](https://foxws.nl/projects/wireuse) website.
 
 ## Installation
 
@@ -27,17 +17,24 @@ You can install the package via composer:
 composer require foxws/wireuse
 ```
 
-You can publish the config file with:
+Optionally, you can publish the config file with:
 
 ```bash
 php artisan vendor:publish --tag="wireuse-config"
 ```
 
-Optionally, you can publish the views using:
+## Usage
 
-```bash
-php artisan vendor:publish --tag="wireuse-views"
-```
+This is a selection of the available features:
+
+- [Property Synthesizers](https://foxws.nl/posts/wireuse/property-synthesizers) - Force usage of model route-keys, instead of model ids.
+- [Components](https://foxws.nl/posts/wireuse/components) - Components like `Page` and useful traits.
+- [HTML](https://foxws.nl/posts/wireuse/laravel-html) - Extends Spatie's [laravel-html](https://spatie.be/docs/laravel-html/v3/introduction) to generate HTML using a clean, simple and easy to read API.
+- [State Objects](https://foxws.nl/posts/wireuse/state-objects) - State objects are based on states that you find, for example, in a VueJS Store.
+- [Forms](https://foxws.nl/posts/wireuse/forms) - Traits and extensions for [Livewire Forms](https://livewire.laravel.com/docs/forms).
+- [Structure Scout](https://foxws.nl/posts/wireuse/structure-scout) - Supported by [spatie/php-structure-discoverer](https://github.com/spatie/php-structure-discoverer) package, it provides a scout to discover and register components, which also offers benefits such as caching.
+
+Please checkout our [documentation](https://foxws.nl/projects/wireuse) for more information.
 
 ## Testing
 

composer.json

@@ -18,14 +18,16 @@
     ],
     "require": {
         "php": "^8.2",
-        "artesaos/seotools": "^1.3",
         "illuminate/contracts": "^10.0|^11.0",
         "illuminate/support": "^10.0|^11.0",
         "illuminate/view": "^10.0|^11.0",
         "laravel/scout": "^10.0|^11.0",
         "livewire/livewire": "^3.4",
         "spatie/laravel-package-tools": "^1.16.3",
-        "spatie/php-structure-discoverer": "^2.1"
+        "spatie/php-structure-discoverer": "^2.1",
+        "spatie/laravel-html": "^3.10",
+        "artesaos/seotools": "^1.3",
+        "blade-ui-kit/blade-icons": "^1.6.0"
     },
     "require-dev": {
         "larastan/larastan": "^2.9",

config/wireuse.php

@@ -1,36 +1,33 @@
 <?php
 
-return [
-    /*
-    |--------------------------------------------------------------------------
-    | Directives
-    |--------------------------------------------------------------------------
-    |
-    | This controls components registration.
-    |
-    */
+use Foxws\WireUse\Support\Html\Mixins\BaseElementMixin;
+use Foxws\WireUse\Support\Html\Mixins\HtmlExtendedMixin;
+use Foxws\WireUse\Support\Html\Mixins\ImgElementMixin;
+use Foxws\WireUse\Support\Html\Mixins\LinkElementMixin;
+use Spatie\Html\BaseElement;
+use Spatie\Html\Elements;
+use Spatie\Html\Html;
 
-    'register_macros' => true,
+return [
 
     /*
     |--------------------------------------------------------------------------
-    | Components
+    | Laravel HTML
     |--------------------------------------------------------------------------
     |
-    | This controls components registration.
+    | This extends Laravel HTML.
     |
-    */
-
-    'register_components' => true,
-
-    /*
-    |--------------------------------------------------------------------------
-    | Views
-    |--------------------------------------------------------------------------
-    |
-    | This controls views registration.
+    | @doc https://spatie.be/docs/laravel-html/v3
     |
     */
 
-    'view_prefix' => 'wireuse',
+    'html' => [
+        'mixins' => [
+            Html::class => HtmlExtendedMixin::class,
+            BaseElement::class => BaseElementMixin::class,
+            Elements\A::class => LinkElementMixin::class,
+            Elements\Img::class => ImgElementMixin::class,
+        ],
+    ],
+
 ];

phpstan.neon.dist

@@ -10,7 +10,6 @@ parameters:
     tmpDir: build/phpstan
     checkOctaneCompatibility: true
     checkModelProperties: true
-    checkMissingIterableValueType: false
     ignoreErrors:
         - '#Unsafe usage of new static#'
-        - '#^Access to an undefined property Foxws\\WireUse\\Actions\\Support\\Action\:\:\$\w+\.$#'
+        - '#Call to an undefined method [a-zA-Z0-9\\_]+::wireModel\(\)#'

resources/css/presets/tailwind.config.preset.js

@@ -4,17 +4,23 @@ import typography from '@tailwindcss/typography';
 
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: ['./resources/**/*.blade.php', './app/View/**/*.php', './src/**/*.php', './vendor/foxws/wireuse/**/*.php', './vendor/foxws/wireuse/**/*.blade.php'],
+  content: ['./resources/**/*.blade.php', './src/**/*.php'],
   plugins: [forms, typography],
   theme: {
     extend: {
       colors: {
-        primary: colors.slate,
+        base: colors.white,
+        primary: colors.pink,
+        secondary: colors.gray,
+        error: colors.red,
       },
       container: {
         center: true,
         padding: '2rem',
-      }
+      },
+      safelist: [
+        'text-error-500',
+      ],
     }
   }
 };