Merge pull request #10 from dansysanalyst/dev

Click to copy, Text Highlight & other improvements

Author: ph7jack

README.md

@@ -1,10 +1,8 @@
 # WireUI - Docs
 
-Page for [WireUI](https://github.com/wireui/wireui) documentation.
+Page for [WireUI](https://github.com/wireui/wireui) documentation. 
 
-🌐 Live at: [https://livewire-wireui.com/](https://livewire-wireui.com/)
-
-Made with [Laravel](https://laravel.com) & [Livewire](https://laravel-livewire.com).
+Visit at: [https://livewire-wireui.com/](https://livewire-wireui.com/)
 
 <br/>
 
@@ -14,45 +12,129 @@ Thank you for your interest in contributing! 😊
 
 Please follow the steps below to run this project locally:
 
-### Requirements
+### Get started 🚀 
+
+#### Requirements
 
 -   PHP 7.4+
 -   [Composer](https://getcomposer.org)
 -   [Yarn](https://yarnpkg.com)
 -   A valid [Torchlight](https://torchlight.dev) token (free for non-profit open-source projects).
 
-</br>
 
-### Get started
+#### Setup
 
-STEP 1: Fork this repository (Click on "Fork").
+**STEP 1:**
+
+Fork this repository, click on "Fork" in this page.
 
 <br/>
 
-STEP 2: Clone your forked repository:
+**STEP 2:**
+
+Clone your forked repository, run the command:
 
 ```bash
-git clone https://github.com/:::USERNAME:::/docs wireui-docs && cd wireui-docs
+git clone https://github.com/YOUR-USERNAME/docs wireui-docs && cd wireui-docs
 ```
 
-📝 **NOTE:** Replace _:::USERNAME:::_ with your GitHub username.
-
 <br/>
 
-STEP 3: Register and create your Torchlight token at [https://torchlight.dev](https://torchlight.dev).
+**STEP 3:**
 
-You should have received a token similar to this:
+WireUI Doc uses Torchlight to provide code highlighting.
 
-```bash
-torch_EFhVTgSra9HioAxtsK3ljnsj45BHmf
-```
+Before continuing, you must register at [https://torchlight.dev](https://torchlight.dev) and get your access token.
 
-Store it safely for the next step.
+The token will be required in the next step, and it should look like similar to:
+
+ ```bash
+ torch_EFhVTgSra9HioAxtsK3ljnsj45BHmf
+ ```
 
 <br/>
 
-STEP 4: Execute the `run` script:
+**STEP 4:** In your project folder, execute the `run.sh` script:
 
 ```bash
 ./run.sh
 ```
+
+This script automate the process of installing dependencies and set up the `.env` file.
+
+<br>
+
+---
+
+### Doc syntax 📝
+
+The WireUI Doc provides some components to facilitate the writing experience.
+
+You are welcome to explore the code in `resources/views/livewire/` folder to view real usage examples.
+
+<br/>
+
+#### Code snippets
+
+Code snippets should always be included using the `<x-code>` tag.
+
+The mandatory attributes are `language`, for the code language and the `code`, for the code itself.
+
+For example:
+
+```php
+//...
+<x-code language="bash" :code="<<<EOT
+php artisan vendor:publish --tag='wireui.config'
+php artisan vendor:publish --tag='wireui.resources'
+php artisan vendor:publish --tag='wireui.lang'
+EOT" />
+```
+
+A copy button is loaded by default, to suppress the button, add the attribute: `copy="false"`.
+
+Likewise, line numbers are displayed by default. To remove the numbers, add the attribute: `line-number="false`.
+
+```php
+<x-code copy="false" line-numbers="false" language="shell" :code="Command exit with error error code xyz...." />
+```
+
+<br/>
+
+#### Text mark
+
+When giving instructions or using technical words, highlight important information with the `<x-mark>` tag.
+
+For example, when using:
+
+```php
+Run <x-mark>npm install<x-mark> to install all to install all dependencies.
+```
+
+The outcome is similar to:
+
+Run `npm install` to install all to install all dependencies.
+
+<br/>
+
+#### Boxes
+
+Sometimes it's crucial to highlight information such as a mandatory step or a compatibility issue. In these situations, situations, you should use the `<x-box attention>` tag, which will produce a yellow "attention" box.
+
+For example:
+
+```php
+<x-box attention>If you are using FooJS 1.0, you must configure bar=null before update.</x-box>
+```
+
+In addition, if you need to provide a friendly message, a tip, or extra information, you should use of the `<x-box info>` tag, which produces a blue info box.
+
+```php
+<x-box info>Read more about supported formats <a href="#formats">here</a>.</x-box>
+```
+
+<br/>
+
+---
+
+WireUI Doc runs on  [Laravel](https://laravel.com) & [Livewire](https://laravel-livewire.com).

app/Console/Kernel.php

@@ -25,7 +25,7 @@ protected function schedule(Schedule $schedule)
      */
     protected function commands()
     {
-        $this->load(__DIR__.'/Commands');
+        $this->load(__DIR__ . '/Commands');
 
         require base_path('routes/console.php');
     }

app/Http/Livewire/Documentation/DatetimePicker.php

@@ -57,8 +57,8 @@ class DatetimePicker extends Component
         label="Appointment Date"
         placeholder="Appointment Date"
         wire:model="model"
-        :min="now()->subDays(7)->hours(12)->minutes(12)"
-        :max="now()->addDays(7)->hours(12)->minutes(12)"
+        :min="now()->subDays(7)->hours(12)->minutes(30)"
+        :max="now()->addDays(7)->hours(12)->minutes(30)"
     />
     HTML;
 

app/Http/Livewire/Documentation/Inputs.php

@@ -7,6 +7,10 @@
 
 class Inputs extends Component
 {
+    public string $wireModelExample = <<<HTML
+    <x-input wire:model="firstName" label="Name" placeholder="User's first name" />
+    HTML;
+
     public string $simpleInputExample = <<<HTML
     <x-input label="Name" placeholder="your name" />
     HTML;
@@ -32,7 +36,7 @@ class Inputs extends Component
     HTML;
 
     public string $prefixInputExample = <<<HTML
-    <x-input label="Name" placeholder="your name" prefix="$" />
+    <x-input class="!pl-[6.5rem]" label="Website" placeholder="your-website.com" prefix="https://www." />
     HTML;
 
     public string $suffixInputExample = <<<HTML
@@ -44,7 +48,7 @@ class Inputs extends Component
         <x-slot name="prepend">
             <div class="absolute inset-y-0 left-0 flex items-center p-0.5">
                 <x-button
-                    class="rounded-l-md h-full"
+                    class="h-full rounded-l-md"
                     icon="sort-ascending"
                     primary
                     flat
@@ -60,7 +64,7 @@ class="rounded-l-md h-full"
         <x-slot name="append">
             <div class="absolute inset-y-0 right-0 flex items-center p-0.5">
                 <x-button
-                    class="rounded-r-md h-full"
+                    class="h-full rounded-r-md"
                     icon="sort-ascending"
                     primary
                     flat

app/Http/Livewire/Documentation/LivewireUsage.php

@@ -0,0 +1,14 @@
+<?php
+
+namespace App\Http\Livewire\Documentation;
+
+use App\View\Components\Layouts\Documentation;
+use Livewire\Component;
+
+class LivewireUsage extends Component
+{
+    public function render()
+    {
+        return view('livewire.documentation.usage')->layout(Documentation::class);
+    }
+}

app/Http/Livewire/Documentation/Textarea.php

@@ -7,6 +7,10 @@
 
 class Textarea extends Component
 {
+    public string $wireModelExample = <<<HTML
+    <x-textarea wire:model="comment" label="Comment" placeholder="Your comment" />
+    HTML;
+
     public string $simpleExample = <<<HTML
     <x-textarea label="Annotations" placeholder="write your annotations" />
     HTML;

app/Http/Livewire/Documentation/Troubleshooting.php

@@ -0,0 +1,31 @@
+<?php
+
+namespace App\Http\Livewire\Documentation;
+
+use App\View\Components\Layouts\Documentation;
+use Livewire\Component;
+
+class Troubleshooting extends Component
+{
+    public string $tailwindFormsError = <<<SHELL
+    ERROR in ./resources/css/app.css
+    Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
+    ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
+    TypeError: require(...) is not a function
+    ...
+    1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
+    webpack compiled with 2 errors
+    SHELL;
+
+    public string $tailwindFormsUpdate = <<<JS
+      "devDependencies": {
+        "@tailwindcss/forms": "^0.3.0",
+        //..
+      }
+    JS;
+
+    public function render()
+    {
+        return view('livewire.documentation.troubleshooting')->layout(Documentation::class);
+    }
+}

app/Http/Middleware/Authenticate.php

@@ -14,7 +14,7 @@ class Authenticate extends Middleware
      */
     protected function redirectTo($request)
     {
-        if (! $request->expectsJson()) {
+        if (!$request->expectsJson()) {
             return route('login');
         }
     }

app/Http/Middleware/TrustProxies.php

@@ -19,10 +19,5 @@ class TrustProxies extends Middleware
      *
      * @var int
      */
-    protected $headers =
-        Request::HEADER_X_FORWARDED_FOR |
-        Request::HEADER_X_FORWARDED_HOST |
-        Request::HEADER_X_FORWARDED_PORT |
-        Request::HEADER_X_FORWARDED_PROTO |
-        Request::HEADER_X_FORWARDED_AWS_ELB;
+    protected $headers = Request::HEADER_X_FORWARDED_FOR | Request::HEADER_X_FORWARDED_HOST | Request::HEADER_X_FORWARDED_PORT | Request::HEADER_X_FORWARDED_PROTO | Request::HEADER_X_FORWARDED_AWS_ELB;
 }

app/Models/User.php

@@ -2,7 +2,6 @@
 
 namespace App\Models;
 
-use Illuminate\Contracts\Auth\MustVerifyEmail;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Foundation\Auth\User as Authenticatable;
 use Illuminate\Notifications\Notifiable;

app/Providers/AuthServiceProvider.php

@@ -3,7 +3,6 @@
 namespace App\Providers;
 
 use Illuminate\Foundation\Support\Providers\AuthServiceProvider as ServiceProvider;
-use Illuminate\Support\Facades\Gate;
 
 class AuthServiceProvider extends ServiceProvider
 {