Markhuot patch 2

composer.json

@@ -21,7 +21,7 @@
         }
     ],
     "require-dev": {
-        "markhuot/craft-pest-core": "dev-main",
+        "markhuot/craft-pest-core": "dev-sequence",
         "phpstan/phpstan": "^1.10",
         "laravel/pint": "^1.13",
         "craftcms/craft": "dev-main"

src/actions/CompileTwigComponent.php

@@ -99,6 +99,9 @@ public function enterNode(Node $node)
                 if ($node instanceof Stmt\Property && $node->props[0]->name->name === 'handle') {
                     $node->props[0]->default = new Node\Scalar\String_($this->exports['type'] ?? $this->handle);
                 }
+                if ($node instanceof Stmt\Property && $node->props[0]->name->name === 'category' && ! empty($this->exports['category'])) {
+                    $node->props[0]->default = new Node\Scalar\String_($this->exports['category']);
+                }
                 if ($node instanceof Stmt\Property && $node->props[0]->name->name === 'icon') {
                     if ($this->exports['icon'] ?? false) {
                         $node->props[0]->default = new Node\Scalar\String_($this->exports['icon']);

src/base/ComponentType.php

@@ -14,13 +14,23 @@ abstract class ComponentType
     // https://phosphoricons.com
     protected string $icon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M64,216a8,8,0,0,1-8-8V165.31a28,28,0,1,1,0-50.62V72a8,8,0,0,1,8-8h46.69a28,28,0,1,1,50.61,0H208a8,8,0,0,1,8,8v42.69a28,28,0,1,0,0,50.62V208a8,8,0,0,1-8,8Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/></svg>';
 
+    /**
+     * The category the icon will display under when adding new components
+     */
+    protected string $category = 'General';
+
     public function getName(): string
     {
         $parts = explode('/', $this->handle);
 
         return ucfirst(last($parts));
     }
 
+    public function getCategory(): string
+    {
+        return $this->category;
+    }
+
     public function getHandle(): string
     {
         return $this->handle;

src/controllers/ComponentsController.php

@@ -41,7 +41,7 @@ public function actionAdd()
                 'path' => $path,
                 'slot' => $slot,
                 'parent' => $parent,
-                'types' => (new GetComponentType())->all(),
+                'groups' => (new GetComponentType())->all()->groupBy(fn ($t) => $t->getCategory()),
                 'sortOrder' => $sortOrder,
             ]);
     }

src/resources/keystone.min.css

@@ -703,22 +703,18 @@ video {
   border-width: 1px;
 }
 
-.k-border-2 {
-  border-width: 2px;
-}
-
-.k-border-hairline {
-  border-color: var(--hairline-color);
+.k-border-gray-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(229 231 235 / var(--tw-border-opacity));
 }
 
-.k-border-slate-800 {
+.k-border-gray-400 {
   --tw-border-opacity: 1;
-  border-color: rgb(30 41 59 / var(--tw-border-opacity));
+  border-color: rgb(156 163 175 / var(--tw-border-opacity));
 }
 
-.k-border-gray-200 {
-  --tw-border-opacity: 1;
-  border-color: rgb(229 231 235 / var(--tw-border-opacity));
+.k-border-hairline {
+  border-color: var(--hairline-color);
 }
 
 .k-bg-ui-control {
@@ -737,14 +733,14 @@ video {
   padding: 0.5rem;
 }
 
-.k-p-4 {
-  padding: 1rem;
-}
-
 .k-p-3 {
   padding: 0.75rem;
 }
 
+.k-p-4 {
+  padding: 1rem;
+}
+
 .k-pt-xl {
   padding-top: var(--xl);
 }
@@ -757,6 +753,11 @@ video {
   font-size: 8px;
 }
 
+.k-text-base {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
 .k-text-sm {
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -767,16 +768,6 @@ video {
   line-height: 1rem;
 }
 
-.k-text-lg {
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-}
-
-.k-text-base {
-  font-size: 1rem;
-  line-height: 1.5rem;
-}
-
 .k-font-bold {
   font-weight: 700;
 }
@@ -892,3 +883,31 @@ video {
 .\[\&\:has\(\:disabled\)\]\:k-opacity-25:has(:disabled) {
   opacity: 0.25;
 }
+
+.\[\&\:has\(li\)\]\:k-block:has(li) {
+  display: block;
+}
+
+.\[\&\:has\(li\:not\(\.disabled\)\)\]\:k-block:has(li:not(.disabled)) {
+  display: block;
+}
+
+.\[\&\:has\(li\:not\(\.k-hidden\)\)\]\:k-block:has(li:not(.k-hidden)) {
+  display: block;
+}
+
+.\[\&\:has\(ul\)\]\:k-block:has(ul) {
+  display: block;
+}
+
+.\[\&\:has\(ul\>li\:not\(\.k-hidden\)\)\]\:k-block:has(ul>li:not(.k-hidden)) {
+  display: block;
+}
+
+.\[\&\:has\(ul_li\:not\(\.k-hidden\)\)\]\:k-block:has(ul li:not(.k-hidden)) {
+  display: block;
+}
+
+.\[\&\:has\(ul_ul\>li\:not\(\.k-hidden\)\)\]\:k-block:has(ul ul>li:not(.k-hidden)) {
+  display: block;
+}

src/templates/components/fragment.twig

@@ -1 +1,2 @@
+{% export category = "Containers" %}
 {% slot %}{% endslot %}

src/templates/components/heading.twig

@@ -4,6 +4,7 @@
         {label: '2', value: '2'},
     ])
 } %}
+{% export category = "Text" %}
 {% export icon %}<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path d="M150,56V176a6,6,0,0,1-12,0V122H46v54a6,6,0,0,1-12,0V56a6,6,0,0,1,12,0v54h92V56a6,6,0,0,1,12,0Zm90,146H204L240,154.05A30,30,0,1,0,187.71,126,6,6,0,1,0,199,130a18,18,0,0,1,14.47-11.82,18,18,0,0,1,16.87,28.66L187.2,204.4A6,6,0,0,0,192,214h48a6,6,0,0,0,0-12Z"></path></svg>{% endexport %}
 {% set level = props.level.value|default(1) %}
 {% set fontSize = craft.app.getView().registerCssRule((32 - (level-1)*4) ~ 'px', 'font-size') %}

src/templates/components/section.twig

@@ -1,4 +1,5 @@
+{% export category = "Containers" %}
 {% export icon %}<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path d="M200,42H56A14,14,0,0,0,42,56V200a14,14,0,0,0,14,14H200a14,14,0,0,0,14-14V56A14,14,0,0,0,200,42ZM56,54H200a2,2,0,0,1,2,2v66H54V56A2,2,0,0,1,56,54ZM200,202H56a2,2,0,0,1-2-2V134H202v66A2,2,0,0,1,200,202Z"></path></svg>{% endexport %}
-<div {{ attributes}} data-component="{{ component.id }}">
+<div {{ attributes}}>
     {% slot %}{% endslot %}
 </div>

src/templates/components/text.twig

@@ -3,6 +3,7 @@
 } %}
 {% export summary = props.text|default('')|slice(0,25) %}
 {% export icon %}<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path d="M206,56V88a6,6,0,0,1-12,0V62H134V194h26a6,6,0,0,1,0,12H96a6,6,0,0,1,0-12h26V62H62V88a6,6,0,0,1-12,0V56a6,6,0,0,1,6-6H200A6,6,0,0,1,206,56Z"></path></svg>{% endexport %}
+{% export category = "Text" %}
 
 <div {{ attributes }}>
     {{ props.text }}

src/templates/select.twig

@@ -1,23 +1,30 @@
+{{ hiddenInput('element', element.id) }}
+{{ hiddenInput('field', field.id) }}
+{{ hiddenInput('path', path) }}
+{{ hiddenInput('slot', slot) }}
+{{ hiddenInput('sortOrder', sortOrder) }}
 <div class="k-space-y-8">
     <div>
         <input type="search" class="k-border k-border-gray-200 k-rounded k-w-full k-p-3 k-text-base" placeholder="Search for components..." @keyup="
             document.querySelectorAll('[data-keystone-select-type-container]').forEach(el => el.textContent.toLowerCase().includes($event.target.value.toLowerCase()) ? el.classList.remove('k-hidden') : el.classList.add('k-hidden'));
-            document.querySelector('[data-keystone-select-type-container]:not(.k-hidden) input[type=radio]').checked = true;
+            document.querySelector('li:not(.k-hidden) input[type=radio][name^={{ craft.app.getView().getNamespace }}]').checked = true;
         ">
     </div>
-    <ul class="k-grid k-grid-cols-3 k-gap-8">
-        {{ hiddenInput('element', element.id) }}
-        {{ hiddenInput('field', field.id) }}
-        {{ hiddenInput('path', path) }}
-        {{ hiddenInput('slot', slot) }}
-        {{ hiddenInput('sortOrder', sortOrder) }}
-        {% for type in types %}
-            <li data-keystone-select-type-container>
-                <label data-keystone-select-type class="k-block [&:has(:checked)]:k-bg-blue-500 [&:has(:checked)]:k-text-white [&:has(:checked)]:k-border-blue-900 [&:has(:disabled)]:k-opacity-25 k-border-2 k-border-slate-800 k-rounded-lg k-p-4">
-                    <input type="radio" name="type" value="{{ type.getHandle() }}" class="k-hidden" {{ not (parent.getType().getSlotDefinition(slot).allows(type.getHandle()) ?? true) ? 'disabled' }}>
-                    {{ type.getIcon({class: 'k-w-8 k-text-current k-stroke-current'}) }}
-                    {{ type.getName() }}
-                </label>
+    <ul class="k-space-y-8">
+        {% for category, types in groups %}
+            <li class="k-hidden [&:has(ul_li:not(.k-hidden))]:k-block">
+                <p class="k-font-bold k-text-gray-400">{{ category }}</p>
+                <ul class="k-grid k-grid-cols-3 k-gap-8">
+                    {% for type in types %}
+                        <li data-keystone-select-type-container>
+                            <label data-keystone-select-type class="k-block [&:has(:checked)]:k-bg-blue-500 [&:has(:checked)]:k-text-white [&:has(:checked)]:k-border-blue-900 [&:has(:disabled)]:k-opacity-25 k-border k-border-gray-400 k-rounded-lg k-p-4">
+                                <input type="radio" name="type" value="{{ type.getHandle() }}" class="k-hidden" {{ not (parent.getType().getSlotDefinition(slot).allows(type.getHandle()) ?? true) ? 'disabled' }}>
+                                {{ type.getIcon({class: 'k-w-8 k-text-current k-stroke-current'}) }}
+                                {{ type.getName() }}
+                            </label>
+                        </li>
+                    {% endfor %}
+                </ul>
             </li>
         {% endfor %}
     </ul>