config/adding docker machine

2amigos · Sep 5, 2023 · 4157d11 · 4157d11
1 parent 9f5e3b1
commit 4157d11
Show file tree

Hide file tree

Showing 25 changed files with 215 additions and 150 deletions.
diff --git a/README.md b/README.md
@@ -13,3 +13,27 @@ $ php artisan serve
 ```
 
 published to http://127.0.0.1:8000
+
+### RUN using docker
+On the first time we're running the project, we must install the dependencies.
+
+To install the dependencies, run on project folder:
+```bash
+$ docker run --rm \
+    -u "$(id -u):$(id -g)" \
+    -v "$(pwd):/var/www/html" \
+    -w /var/www/html \
+    laravelsail/php82-composer:latest \
+    composer install --ignore-platform-reqs
+```
+
+To run the docker machine, run:
+```bash
+$ ./vendor/bin/sail up -d
+$ ./vendor/bin/sail npm run build
+```
+
+tp stop the docker machine:
+```bash
+$ ./vendor/bin/sail stop
+```
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -0,0 +1,26 @@
+services:
+    laravel.test:
+        build:
+            context: ./vendor/laravel/sail/runtimes/8.2
+            dockerfile: Dockerfile
+            args:
+                WWWGROUP: '${WWWGROUP}'
+        image: sail-8.2/app
+        extra_hosts:
+            - 'host.docker.internal:host-gateway'
+        ports:
+            - '${APP_PORT:-80}:80'
+            - '${VITE_PORT:-5173}:${VITE_PORT:-5173}'
+        environment:
+            WWWUSER: '${WWWUSER}'
+            LARAVEL_SAIL: 1
+            XDEBUG_MODE: '${SAIL_XDEBUG_MODE:-off}'
+            XDEBUG_CONFIG: '${SAIL_XDEBUG_CONFIG:-client_host=host.docker.internal}'
+            IGNITION_LOCAL_SITES_PATH: '${PWD}'
+        volumes:
+            - '.:/var/www/html'
+        networks:
+            - sail
+networks:
+    sail:
+        driver: bridge
diff --git a/package-lock.json b/package-lock.json
diff --git a/phpunit.xml b/phpunit.xml
@@ -29,8 +29,7 @@
         <env name="APP_ENV" value="testing"/>
         <env name="BCRYPT_ROUNDS" value="4"/>
         <env name="CACHE_DRIVER" value="array"/>
-        <!-- <env name="DB_CONNECTION" value="sqlite"/> -->
-        <!-- <env name="DB_DATABASE" value=":memory:"/> -->
+        <env name="DB_DATABASE" value="testing"/>
         <env name="MAIL_MAILER" value="array"/>
         <env name="QUEUE_CONNECTION" value="sync"/>
         <env name="SESSION_DRIVER" value="array"/>

diff --git a/resources/css/app.css b/resources/css/app.css
@@ -13,3 +13,7 @@ h1, h2, h3, h5, h6, span {
 h4 {
     color: #1c74f8;
 }
+
+span, p {
+    font-size: 14px;
+}
diff --git a/resources/views/components/box.blade.php b/resources/views/components/box.blade.php
@@ -1,3 +1,3 @@
-<div {!! $attributes->merge(['class' => 'rounded-sm shadow-md shadow-black-900 p-5']) !!}>
+<div {!! $attributes->merge(['class' => 'bg-tbg-100 border border-tbg-50 rounded-md p-5']) !!}>
     {{ $slot }}
 </div>
diff --git a/resources/views/components/icons/set.blade.php b/resources/views/components/icons/set.blade.php
@@ -1,7 +1,7 @@
 <div style="max-width: 32px;">
     @if($icon == \App\Enum\FormatEnum::Text->value)
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
-            <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 5.25h16.5m-16.5 4.5h16.5m-16.5 4.5h16.5m-16.5 4.5h16.5" />
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
         </svg>
     @endif
     @if($icon == \App\Enum\FormatEnum::BookMark->value)
@@ -39,10 +39,10 @@
         </svg>
     @endif
     @if($icon == \App\Enum\FormatEnum::Mms->value)
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
-            <path strokeLinecap="round" strokeLinejoin="round" d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z" />
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 01-2.555-.337A5.972 5.972 0 015.41 20.97a5.969 5.969 0 01-.474-.065 4.48 4.48 0 00.978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25z" />
         </svg>
-    @endif
+        @endif
     @if($icon == \App\Enum\FormatEnum::Phone->value)
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
             <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 01-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z" />

diff --git a/resources/views/components/inputs/color-picker.blade.php b/resources/views/components/inputs/color-picker.blade.php
@@ -42,10 +42,10 @@
         })"
 >
     <div class="my-2 flex flex-row w-full">
-        <div class="basis-11/12 bg-white text-black rounded-l-sm p-3 flex items-center">
+        <div class="h-8 font-sm lowercase basis-11/12 bg-white text-black rounded rounded-r-none p-3 flex items-center">
             {{ $this->{$model} }}
         </div>
-        <div class="p-2 bg-gray-100 rounded-r-sm border-r-gray-400">
+        <div class="bg-gray-100 rounded rounded-l-none border-r-gray-400 h-8 p-1">
             <div wire:ignore>
                 <button class="color-picker border-black">
                     Pick a Color
@@ -54,3 +54,9 @@
         </div>
     </div>
 </div>
+<style>
+    .pcr-button {
+        width: 8px;
+        height: 8px;
+    }
+</style>
diff --git a/resources/views/components/inputs/date-time.blade.php b/resources/views/components/inputs/date-time.blade.php
@@ -17,9 +17,10 @@
                 class="rounded-r-none"
             />
         </div>
-        <div class="flex items-center">
-            <a class="h-11 w-10 input-button cursor-pointer rounded-r-md bg-gray-100 border-gray-300 border-t border-b border-r" title="clear" data-clear>
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 mt-2 ml-1" viewBox="0 0 20 20" fill="#c53030">
+        <div class="flex mt-2">
+            <a class="h-8 w-8 input-button cursor-pointer rounded-r-md bg-gray-100 border-gray-300 border-t border-b border-r p-2"
+                title="clear" data-clear>
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="#c53030">
                     <path fill-rule="evenodd"
                           d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                           clip-rule="evenodd"/>

diff --git a/resources/views/components/inputs/secondary-button.blade.php b/resources/views/components/inputs/secondary-button.blade.php
@@ -1,3 +1,4 @@
-<button {!! $attributes->merge(['class' => 'border border-white border-4 text-white active:bg-gray-200 hover:bg-white hover:text-black font-bold uppercase text-sm px-6 py-3 rounded-sm shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150']) !!} type="button">
+<button {!! $attributes->merge(['class' => 'text-white text-center p-2 w-full my-3 border-2 border-rose-600 rounded hover:text-black hover:bg-white transition-1.5'
+            ]) !!} type="button">
     {{ $slot }}
 </button>
diff --git a/resources/views/components/inputs/success-button.blade.php b/resources/views/components/inputs/success-button.blade.php
@@ -1,3 +1,11 @@
-<button {!! $attributes->merge(['class' => 'bg-red-500 text-white active:bg-red-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg hover:bg-red-700 outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150']) !!} type="button">
+<button {!! $attributes->merge([
+                'class' => 'bg-tred rounded text-white active:bg-red-600
+                font-bold text-sm px-6 py-3 hover:shadow-2xl
+                hover:shadow-tred hover:shadow-inner mr-1
+                mb-1 ease-linear transition-all duration-150
+                h-8 w-full border-2 border-white'
+            ]) !!}
+        type="button"
+>
     {{ $slot }}
 </button>
diff --git a/resources/views/components/inputs/text.blade.php b/resources/views/components/inputs/text.blade.php
@@ -1,3 +1,8 @@
-<div class="mb-2 mt-2 pt-0">
-    <input type="text" placeholder="" {!! $attributes->merge(['class' => 'px-3 py-3 placeholder-slate-300 text-slate-600 relative bg-white bg-white rounded text-sm border-0 shadow outline-none focus:outline-none focus:ring w-full']) !!}/>
+<div class="mb-2 mt-2 mb-3 pt-0">
+    <input type="text" placeholder="" {!! $attributes->merge([
+            'class' => 'px-3 py-3 placeholder-slate-300 text-slate-600
+            relative bg-white bg-white rounded text-sm border-0 shadow
+            outline-none focus:outline-none focus:ring w-full h-8'
+        ])
+        !!}/>
 </div>
diff --git a/resources/views/components/inputs/upload.blade.php b/resources/views/components/inputs/upload.blade.php
@@ -1,3 +1,7 @@
 <div class="mb-2 mt-2 pt-0">
-    <input type="file" placeholder="" {!! $attributes->merge(['class' => 'px-3 py-3 placeholder-slate-300 text-slate-600 relative bg-white bg-white rounded text-sm border-0 shadow outline-none focus:outline-none focus:ring w-full']) !!}/>
+    <input type="file" placeholder="" {!! $attributes->merge([
+            'class' => 'px-3 py-2 placeholder-slate-300 text-slate-600 relative
+            bg-white bg-white rounded text-sm border-0 shadow outline-none
+            focus:outline-none focus:ring w-full h-10'
+        ]) !!}/>
 </div>
diff --git a/resources/views/components/layout.blade.php b/resources/views/components/layout.blade.php
@@ -237,13 +237,15 @@ function gtag() {
         </header>
         <!-- main -->
         <main>
+            <div class="landing">
             {{$slot}}
             <!--<div class="page-not-found">
                 <section class="hero-default " style="background-image:url(/images/404.svg)">
                     <h2>404</h2>
                     <a class="btn btn--default btn--red" href="/">Go to Homepage</a>
                 </section>
             </div>-->
+            </div>
         </main>
         <footer class="footer">
             <div class="logo-placeholder">

diff --git a/resources/views/components/menu-item.blade.php b/resources/views/components/menu-item.blade.php
@@ -1,3 +1,3 @@
-<div {{ $attributes->merge(['class' => 'flex flex-row items-center content-center cursor-pointer bg-gray-700 border border-black text-white p-2 hover:text-yellow-300 hover:bg-gray-800 active:text-yellow-400']) }}>
+<div {{ $attributes->merge(['class' => 'flex flex-row justify-center items-center p-2 cursor-pointer bg-transparent text-white hover:text-yellow-500 active:text-yellow-400']) }}>
     {{ $slot }}
 </div>
diff --git a/resources/views/components/option-items.blade.php b/resources/views/components/option-items.blade.php
@@ -0,0 +1,35 @@
+<div>
+<!--<div class="grid grid-cols-2 mt-5">-->
+    <!--<x-menu-item wire:click="toggleOption({{\App\Enum\OptionsEnum::Colors->value}})" class="flex flex-row {{$activeOption == \App\Enum\OptionsEnum::Colors->value ? 'text-yellow-300 bg-gray-800' : ''}}">
+        <x-icons.colors />
+        <div class="ml-1">
+            Colors
+        </div>
+    </x-menu-item>
+    <x-menu-item wire:click="toggleOption({{\App\Enum\OptionsEnum::Margin->value}})" class="{{$activeOption == \App\Enum\OptionsEnum::Margin->value ? 'text-yellow-300 bg-gray-800' : ''}}">
+        <x-icons.screen />
+        <div class="ml-1">
+            Margin
+        </div>
+    </x-menu-item>
+    <x-menu-item wire:click="toggleOption({{\App\Enum\OptionsEnum::Label->value}})" class="flex flex-row {{$activeOption == \App\Enum\OptionsEnum::Label->value ? 'text-yellow-300 bg-gray-800' : ''}}">
+        <x-icons.label />
+        <div class="ml-1">
+            Label
+        </div>
+    </x-menu-item>
+    <x-menu-item wire:click="toggleOption({{\App\Enum\OptionsEnum::Logo->value}})" class="flex flex-row {{$activeOption == \App\Enum\OptionsEnum::Logo->value ? 'text-yellow-300 bg-gray-800' : ''}}">
+        <x-icons.image />
+        <div class="ml-1">
+            Logo
+        </div>
+    </x-menu-item>-->
+        <select wire:model.lazy="activeOption" class="px-3 placeholder-slate-300 text-slate-600
+                        relative bg-white bg-white rounded text-sm border-0 shadow
+                        outline-none focus:outline-none focus:ring w-full h-8 mt-2">
+            <option value="{{null}}"> Select </option>
+            @foreach(\App\Enum\OptionsEnum::cases() as $option)
+                <option value="{{$option->value}}"> {{$option->name}} </option>
+            @endforeach
+        </select>
+</div>
diff --git a/resources/views/components/options.blade.php b/resources/views/components/options.blade.php
@@ -4,7 +4,7 @@
     @elseif($this->activeOption == \App\Enum\OptionsEnum::Margin->value)
         <x-options.margin/>
     @elseif($this->activeOption == \App\Enum\OptionsEnum::Label->value)
-        <x-options.Label/>
+        <x-options.label/>
     @elseif($this->activeOption == \App\Enum\OptionsEnum::Logo->value)
         <x-options.logo/>
     @endif

diff --git a/resources/views/components/options/label.blade.php b/resources/views/components/options/label.blade.php
@@ -11,7 +11,9 @@
         </div>
         <div>
             Alignment
-            <select wire:model="align" class="px-3 py-3 placeholder-slate-300 text-slate-600 relative bg-white bg-white rounded text-sm border-0 shadow outline-none focus:outline-none focus:ring w-full my-3">
+            <select wire:model="align" class="px-3 placeholder-slate-300 text-slate-600
+            relative bg-white bg-white rounded text-sm border-0 shadow
+            outline-none focus:outline-none focus:ring w-full h-8 mt-2">
                 <option value="{{\Da\QrCode\Contracts\LabelInterface::ALIGN_CENTER}}"> Center </option>
                 <option value="{{\Da\QrCode\Contracts\LabelInterface::ALIGN_LEFT}}"> Left </option>
                 <option value="{{\Da\QrCode\Contracts\LabelInterface::ALIGN_RIGHT}}"> Right </option>

diff --git a/resources/views/forms/book_mark.blade.php b/resources/views/forms/book_mark.blade.php
@@ -9,7 +9,7 @@
     <x-inputs.text wire:model="form.url"/>
     <x-error :for="'form.url'"/>
 
-    <x-inputs.success-button wire:click="create" class="mt-2">
+    <x-inputs.success-button wire:click="create" class="mt-3">
         Create QR Code
     </x-inputs.success-button>
 </div>
diff --git a/resources/views/forms/text.blade.php b/resources/views/forms/text.blade.php
@@ -1,11 +1,11 @@
 <div>
-    <h6 class="text-xl mb-5 font-bold"> Text Format </h6>
+    <h6 class="text-xl pb-5 mt-0 pt-0 font-bold"> Text Format </h6>
 
     <span> Text </span>
     <x-inputs.text wire:model="form.text"/>
     <x-error :for="'form.text'"/>
 
-    <x-inputs.success-button wire:click="create" class="mt-2">
+    <x-inputs.success-button wire:click="create" class="mt-3">
         Create QR Code
     </x-inputs.success-button>
 </div>
diff --git a/resources/views/forms/wifi.blade.php b/resources/views/forms/wifi.blade.php
@@ -2,7 +2,9 @@
     <h6 class="text-xl mb-5 font-bold"> Wifi Format </h6>
     <div>
         <span> Authentication </span>
-        <select wire:model="form.authentication" class="px-3 py-3 placeholder-slate-300 text-slate-600 relative bg-white bg-white rounded text-sm border-0 shadow outline-none focus:outline-none focus:ring w-full my-3">
+        <select wire:model="form.authentication" class="px-3 placeholder-slate-300 text-slate-600
+            relative bg-white bg-white rounded text-sm border-0 shadow
+            outline-none focus:outline-none focus:ring w-full h-8 mt-2">
             <option value="">Select</option>
             <option value="web">WEP</option>
             <option value="wpa2">WPA2</option>