Add icon attribute (#215)

* Update github sponsor link * Add icon to attribute * fix code formatting * Remove debugger * ♻️ Apply Refactoring --------- Co-authored-by: mckenziearts <[email protected]>
shopperlabs · Jul 25, 2023 · a653f7d · a653f7d
1 parent a0997fb
commit a653f7d
Show file tree

Hide file tree

Showing 29 changed files with 448 additions and 57 deletions.
diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
@@ -1,3 +1,2 @@
 # These are supported funding model platforms
-
-open_collective: shopperlabs
+github: mckenziearts
diff --git a/packages/admin/config/admin.php b/packages/admin/config/admin.php
@@ -86,4 +86,25 @@
 
     ],
 
+    /*
+    |--------------------------------------------------------------------------
+    | Caching
+    |--------------------------------------------------------------------------
+    |
+    | This section lets you configure the caching option of the icon picker component.
+    |
+    | Since icon packs are often packed with a lots of icons,
+    | searching through all of them can take quite a lot of time, which is
+    | why the plugin caches each field with it's configuration and search queries.
+    |
+    | This section let's you configure how caching should be done or disable it
+    | if you wish.
+    |
+    */
+
+    'icon-picker' => [
+        'cache' => true,
+        'duration' => '7 days',
+    ],
+
 ];
diff --git a/packages/admin/config/components.php b/packages/admin/config/components.php
@@ -87,16 +87,6 @@
 
     'search' => Components\Search::class,
 
-    /*
-    |--------------------------------------------------------------------------
-    | Forms Livewire Components
-    |--------------------------------------------------------------------------
-    */
-
-    'forms.trix' => Components\Forms\Trix::class,
-    'forms.uploads.multiple' => Components\Forms\Uploads\Multiple::class,
-    'forms.uploads.single' => Components\Forms\Uploads\Single::class,
-
     /*
     |--------------------------------------------------------------------------
     | Modals Livewire Components

diff --git a/packages/admin/public/css/shopper.css b/packages/admin/public/css/shopper.css
@@ -4375,9 +4375,6 @@ html {
 .mr-2{
   margin-right: 0.5rem;
 }
-.mr-2\.5{
-  margin-right: 0.625rem;
-}
 .mr-3{
   margin-right: 0.75rem;
 }
@@ -4743,6 +4740,9 @@ html {
 .shrink-0{
   flex-shrink: 0;
 }
+.flex-grow{
+  flex-grow: 1;
+}
 .grow{
   flex-grow: 1;
 }
@@ -4839,6 +4839,23 @@ html {
 .transform-gpu{
   transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+@keyframes progress{
+
+  0%{
+    background-position: -150% 0,-150% 0;
+  }
+
+  66%{
+    background-position: 250% 0,-150% 0;
+  }
+
+  100%{
+    background-position: 250% 0, 250% 0;
+  }
+}
+.animate-progress{
+  animation: progress 2s ease-in-out infinite;
+}
 @keyframes pulse{
 
   50%{
@@ -5061,6 +5078,10 @@ html {
   -moz-column-gap: 0.25rem;
        column-gap: 0.25rem;
 }
+.gap-x-1\.5{
+  -moz-column-gap: 0.375rem;
+       column-gap: 0.375rem;
+}
 .gap-x-2{
   -moz-column-gap: 0.5rem;
        column-gap: 0.5rem;
@@ -5079,6 +5100,9 @@ html {
 .gap-y-2{
   row-gap: 0.5rem;
 }
+.gap-y-4{
+  row-gap: 1rem;
+}
 .gap-y-5{
   row-gap: 1.25rem;
 }
@@ -5280,6 +5304,10 @@ html {
   border-bottom-right-radius: 0.75rem;
   border-bottom-left-radius: 0.75rem;
 }
+.rounded-l-lg{
+  border-top-left-radius: 0.5rem;
+  border-bottom-left-radius: 0.5rem;
+}
 .rounded-l-md{
   border-top-left-radius: 0.375rem;
   border-bottom-left-radius: 0.375rem;
@@ -5288,6 +5316,10 @@ html {
   border-top-left-radius: 0px;
   border-bottom-left-radius: 0px;
 }
+.rounded-r-lg{
+  border-top-right-radius: 0.5rem;
+  border-bottom-right-radius: 0.5rem;
+}
 .rounded-r-md{
   border-top-right-radius: 0.375rem;
   border-bottom-right-radius: 0.375rem;
@@ -5308,14 +5340,6 @@ html {
   border-top-left-radius: 0px;
   border-top-right-radius: 0px;
 }
-.rounded-l-lg{
-  border-top-left-radius: 0.5rem;
-  border-bottom-left-radius: 0.5rem;
-}
-.rounded-r-lg{
-  border-top-right-radius: 0.5rem;
-  border-bottom-right-radius: 0.5rem;
-}
 .rounded-bl{
   border-bottom-left-radius: 0.25rem;
 }
@@ -5870,6 +5894,9 @@ html {
 .bg-secondary-50\/50{
   background-color: rgb(248 250 252 / 0.5);
 }
+.bg-secondary-50\/70{
+  background-color: rgb(248 250 252 / 0.7);
+}
 .bg-secondary-500{
   --tw-bg-opacity: 1;
   background-color: rgb(100 116 139 / var(--tw-bg-opacity));
@@ -6053,6 +6080,11 @@ html {
   --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
+.from-primary-500{
+  --tw-gradient-from: #3b82f6 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
 .to-primary-100{
   --tw-gradient-to: #dbeafe var(--tw-gradient-to-position);
 }
@@ -6068,6 +6100,9 @@ html {
 .bg-center{
   background-position: center;
 }
+.bg-no-repeat{
+  background-repeat: no-repeat;
+}
 .fill-secondary-50{
   fill: #f8fafc;
 }
@@ -7138,6 +7173,9 @@ html {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(71 85 105 / var(--tw-ring-opacity));
 }
+.ring-secondary-900\/10{
+  --tw-ring-color: rgb(15 23 42 / 0.1);
+}
 .ring-sky-500{
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(14 165 233 / var(--tw-ring-opacity));
@@ -9245,6 +9283,10 @@ html {
   background-color: rgb(51 65 85 / 0.6);
 }
 
+:is(.dark .dark\:bg-secondary-700\/70){
+  background-color: rgb(51 65 85 / 0.7);
+}
+
 :is(.dark .dark\:bg-secondary-800){
   --tw-bg-opacity: 1;
   background-color: rgb(30 41 59 / var(--tw-bg-opacity));
@@ -9560,6 +9602,10 @@ html {
   --tw-ring-color: rgb(180 83 9 / var(--tw-ring-opacity));
 }
 
+:is(.dark .dark\:ring-black\/10){
+  --tw-ring-color: rgb(0 0 0 / 0.1);
+}
+
 :is(.dark .dark\:ring-blue-700){
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(29 78 216 / var(--tw-ring-opacity));
@@ -9684,6 +9730,11 @@ html {
   --tw-ring-color: rgb(30 41 59 / var(--tw-ring-opacity));
 }
 
+:is(.dark .dark\:ring-secondary-900){
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(15 23 42 / var(--tw-ring-opacity));
+}
+
 :is(.dark .dark\:ring-sky-700){
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(3 105 161 / var(--tw-ring-opacity));

diff --git a/packages/admin/public/mix-manifest.json b/packages/admin/public/mix-manifest.json
@@ -1,4 +1,4 @@
 {
     "/js/shopper.js": "/js/shopper.js?id=d1ea52e06df0561b2c642b3e813e53a0",
-    "/css/shopper.css": "/css/shopper.css?id=337058200bc2544cbf2d40ac751a7745"
+    "/css/shopper.css": "/css/shopper.css?id=986bc9f401859a6e7f00c9ef3df0579b"
 }
diff --git a/packages/admin/resources/lang/en/layout.php b/packages/admin/resources/lang/en/layout.php
@@ -121,6 +121,14 @@
             'ga_json' => 'Json Account Credentials',
             'gtag' => 'Your Google Tag Manager account ID',
             'pixel_id' => 'Your Facebook Pixel account ID',
+            'icon' => 'Icon',
+            'text_field' => 'Text field :type',
+            'richtext' => 'Rich text',
+            'select' => 'Select',
+            'checkbox' => 'Checkbox',
+            'radio' => 'Radio',
+            'colorpicker' => 'Color picker',
+            'datepicker' => 'Date picker',
         ],
 
         'placeholder' => [
@@ -136,6 +144,8 @@
             'search_by' => 'Search by :label',
             'leave_comment' => 'Leave notes for this customer',
             'search_payment' => 'Search payment by provider name',
+            'icon_placeholder' => 'Search for an icon',
+            'no_icon' => 'No icon selected',
         ],
 
         'actions' => [

diff --git a/packages/admin/resources/lang/fr/layout.php b/packages/admin/resources/lang/fr/layout.php
@@ -121,6 +121,14 @@
             'ga_json' => 'Références du compte en Json',
             'gtag' => 'ID de compte Google Tag Manager',
             'pixel_id' => 'ID du compte Facebook Pixel',
+            'icon' => 'Icône',
+            'text_field' => 'Champ de texte :type',
+            'richtext' => 'Rich Text',
+            'select' => 'Select',
+            'checkbox' => 'Checkbox',
+            'radio' => 'Radio',
+            'colorpicker' => 'Choix de couleurs',
+            'datepicker' => 'Date',
         ],
 
         'placeholder' => [
@@ -136,6 +144,8 @@
             'search_by' => 'Rechercher par :label',
             'leave_comment' => 'Laisser des notes pour ce client',
             'search_payment' => 'Recherche de paiement par nom de fournisseur',
+            'icon_placeholder' => 'Rechercher une icône',
+            'no_icon' => 'Pas d\'icône sélectionnée',
         ],
 
         'actions' => [

diff --git a/packages/admin/resources/views/components/dropdown.blade.php b/packages/admin/resources/views/components/dropdown.blade.php
@@ -42,7 +42,7 @@
          x-transition:leave="transition ease-in duration-75"
             x-transition:leave-start="transform opacity-100 scale-100"
             x-transition:leave-end="transform opacity-0 scale-95"
-         class="absolute z-50 mt-2 {{ $width }} rounded-md shadow-lg {{ $alignmentClasses }}"
+         class="absolute z-50 mt-2 {{ $width }} rounded-lg shadow-lg {{ $alignmentClasses }}"
          style="display: none;"
          role="menu"
          @click="open = false">

diff --git a/packages/admin/resources/views/components/forms/input.blade.php b/packages/admin/resources/views/components/forms/input.blade.php
@@ -1 +1 @@
-<input {!! $attributes->merge(['class' => 'block w-full dark:bg-secondary-700 dark:text-white placeholder-secondary-500 dark:placeholder-secondary-400 rounded-md shadow-sm border-secondary-300 dark:border-secondary-700 focus:ring-primary-500 focus:border-primary-500 sm:text-sm']) !!} />
+<input {{ $attributes->merge(['class' => 'block w-full dark:bg-secondary-700 text-secondary-900 dark:text-white placeholder-secondary-500 dark:placeholder-secondary-400 rounded-md shadow-sm border-secondary-300 dark:border-secondary-700 focus:ring-primary-500 focus:border-primary-500 sm:text-sm']) }} />
diff --git a/packages/admin/resources/views/components/icons/contrast.blade.php b/packages/admin/resources/views/components/icons/contrast.blade.php
@@ -0,0 +1,4 @@
+<svg {{ $attributes }} fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12 5.09V18.92A6.92 6.92 0 0 0 18.919 12c0-3.816-3.103-6.91-6.919-6.91Z" />
+    <path d="M12 .938C5.888.938.937 5.888.937 12c0 6.113 4.95 11.063 11.063 11.063S23.063 18.113 23.063 12C23.063 5.888 18.113.937 12 .937Zm0 19.359A8.294 8.294 0 0 1 3.703 12 8.294 8.294 0 0 1 12 3.703 8.294 8.294 0 0 1 20.297 12 8.294 8.294 0 0 1 12 20.297Z" />
+</svg>
diff --git a/packages/admin/resources/views/livewire/components/attributes/_form.blade.php b/packages/admin/resources/views/livewire/components/attributes/_form.blade.php
@@ -2,10 +2,10 @@
     <div class="sm:col-span-4">
         <x-shopper::card class="p-4 sm:p-5 grid gap-4 sm:grid-cols-2 sm:gap-6">
             <x-shopper::forms.group :label="__('shopper::layout.forms.label.name')" for="name" class="sm:col-span-1" :error="$errors->first('name')" isRequired>
-                <x-shopper::forms.input wire:model="name" id="name" type="text" autocomplete="off" />
+                <x-shopper::forms.input wire:model.lazy="name" id="name" type="text" autocomplete="off" />
             </x-shopper::forms.group>
             <x-shopper::forms.group for="type" :label="__('shopper::layout.forms.label.type')" class="sm:col-span-1">
-                <x-shopper::forms.select wire:model="type" id="type">
+                <x-shopper::forms.select wire:model.defer="type" id="type">
                     @foreach($fields as $key => $field)
                         <option value="{{ $key }}">{{ $field }}</option>
                     @endforeach
@@ -25,7 +25,7 @@
             <div class="sm:col-span-2 flex items-center space-x-4">
                 <div class="relative flex items-start">
                     <div class="flex items-center h-5">
-                        <x-shopper::forms.checkbox wire:model="isSearchable" id="is_searchable" />
+                        <x-shopper::forms.checkbox wire:model.defer="isSearchable" id="is_searchable" />
                     </div>
                     <div class="ml-3 text-sm leading-5">
                         <x-shopper::label for="is_searchable" :value="__('shopper::layout.forms.label.is_searchable')" />
@@ -36,7 +36,7 @@
                 </div>
                 <div class="relative flex items-start">
                     <div class="flex items-center h-5">
-                        <x-shopper::forms.checkbox wire:model="isFilterable" id="is_filterable" />
+                        <x-shopper::forms.checkbox wire:model.defer="isFilterable" id="is_filterable" />
                     </div>
                     <div class="ml-3 text-sm leading-5">
                         <x-shopper::label for="is_filterable" :value="__('shopper::layout.forms.label.is_filterable')" />
@@ -50,10 +50,13 @@
     </div>
     <div class="sm:col-span-2">
         <aside class="sticky top-6 space-y-5">
-            <x-shopper::card class="overflow-hidden divide-y divide-secondary-200 dark:divide-secondary-700">
-                <x-shopper::forms.group :label="__('shopper::layout.forms.label.slug')" for="slug" class="p-4 sm:p-5" :error="$errors->first('slug')" isRequired>
-                    <x-shopper::forms.input wire:model="slug" id="slug" type="text" autocomplete="off" />
-                </x-shopper::forms.group>
+            <x-shopper::card class="divide-y divide-secondary-200 dark:divide-secondary-700">
+                <div class="p-4 sm:p-5 space-y-5">
+                    <x-shopper::forms.group :label="__('shopper::layout.forms.label.slug')" for="slug" :error="$errors->first('slug')" isRequired>
+                        <x-shopper::forms.input wire:model.defer="slug" id="slug" type="text" autocomplete="off" />
+                    </x-shopper::forms.group>
+                    <livewire:shopper-forms.icon-picker :value="$icon" />
+                </div>
                 <div class="p-4 sm:p-5">
                     <div class="relative flex items-start">
                         <div class="flex items-center h-5">

diff --git a/packages/admin/resources/views/livewire/components/attributes/values.blade.php b/packages/admin/resources/views/livewire/components/attributes/values.blade.php
@@ -58,9 +58,13 @@
                                         </td>
                                         <td class="px-6 py-4 flex items-center space-x-3 whitespace-no-wrap text-sm leading-5 text-secondary-500 dark:text-secondary-400">
                                             @if($v->attribute->type === 'colorpicker')
-                                                <div class="shrink-0 w-2.5 h-2.5 rounded-full" style="background-color: {{ $v->key }}" aria-hidden="true"></div>
+                                                <span class="inline-flex items-center gap-x-2 rounded-full px-2 py-1 text-xs font-medium text-secondary-700 ring-1 ring-inset ring-secondary-200 dark:text-secondary-300 dark:ring-secondary-700">
+                                                    <x-shopper::icons.contrast class="h-5 w-5" style="color: {{ $v->key }}" />
+                                                    <kb>{{ $v->key }}</kb>
+                                                </span>
+                                            @else
+                                                <span>{{ $v->key }}</span>
                                             @endif
-                                            <span>{{ $v->key }}</span>
                                         </td>
                                         <td class="px-6 py-4 whitespace-no-wrap text-right text-sm leading-5 font-medium">
                                             <div class="flex-1 flex justify-end items-center space-x-4">
@@ -86,8 +90,8 @@ class="text-secondary-500 hover:text-secondary-600 dark:text-secondary-400 dark:
                                                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
                                                 </svg>
                                                 <span class="text-xl font-medium text-secondary-500 dark:text-secondary-400">
-                                                            {{ __('shopper::words.no_values') }}
-                                                        </span>
+                                                    {{ __('shopper::words.no_values') }}
+                                                </span>
                                             </div>
                                         </td>
                                     </tr>