Merge pull request #143 from cakephp/refactor-with-daisyui-and-htmx

Refactor UI with DaisyUI v5 and htmx

Author: LordSimal

.ddev/addon-metadata/phpmyadmin/manifest.yaml

@@ -0,0 +1,10 @@
+name: phpmyadmin
+repository: ddev/ddev-phpmyadmin
+version: v1.0.2
+install_date: "2026-04-04T16:48:16+02:00"
+project_files:
+    - docker-compose.phpmyadmin.yaml
+    - docker-compose.phpmyadmin_norouter.yaml
+    - commands/host/phpmyadmin
+global_files: []
+removal_actions: []

.ddev/commands/host/phpmyadmin

@@ -0,0 +1,19 @@
+#!/usr/bin/env bash
+
+## #ddev-generated: If you want to edit and own this file, remove this line.
+## Description: Launch a browser with PhpMyAdmin
+## Usage: phpmyadmin
+## Example: "ddev phpmyadmin"
+
+DDEV_PHPMYADMIN_PORT=8036
+DDEV_PHPMYADMIN_HTTPS_PORT=8037
+if [ ${DDEV_PRIMARY_URL%://*} = "http" ] || [ -n "${GITPOD_WORKSPACE_ID:-}" ] || [ "${CODESPACES:-}" = "true" ]; then
+    # Gitpod: "gp preview" opens a blank page for PhpMyAdmin, use "xdg-open" instead
+    if [ "${OSTYPE:-}" = "linux-gnu" ] && [ -n "${GITPOD_WORKSPACE_ID:-}" ] && [ -z "${DDEV_DEBUG:-}" ]; then
+        xdg-open "$(DDEV_DEBUG=true ddev launch :$DDEV_PHPMYADMIN_PORT | grep "FULLURL" | awk '{print $2}')"
+    else
+        ddev launch :$DDEV_PHPMYADMIN_PORT
+    fi
+else
+    ddev launch :$DDEV_PHPMYADMIN_HTTPS_PORT
+fi

.ddev/config.yaml

@@ -3,7 +3,7 @@ type: cakephp
 docroot: webroot
 php_version: "8.4"
 webserver_type: nginx-fpm
-xdebug_enabled: true
+xdebug_enabled: false
 additional_hostnames: []
 additional_fqdns: []
 database:

.ddev/docker-compose.phpmyadmin.yaml

@@ -0,0 +1,31 @@
+#ddev-generated
+services:
+  phpmyadmin:
+    container_name: ddev-${DDEV_SITENAME}-phpmyadmin
+    image: ${PHPMYADMIN_DOCKER_IMAGE:-phpmyadmin:5}
+    working_dir: "/root"
+    restart: "no"
+    labels:
+      com.ddev.site-name: ${DDEV_SITENAME}
+      com.ddev.approot: ${DDEV_APPROOT}
+    volumes:
+      - ".:/mnt/ddev_config"
+      - "ddev-global-cache:/mnt/ddev-global-cache"
+    expose:
+      - "80"
+    environment:
+      - PMA_USER=root
+      - PMA_PASSWORD=root
+      - PMA_HOST=db
+      - PMA_PORT=3306
+      - VIRTUAL_HOST=$DDEV_HOSTNAME
+      - UPLOAD_LIMIT=4000M
+      - HTTP_EXPOSE=8036:80
+      - HTTPS_EXPOSE=8037:80
+    healthcheck:
+      test: ["CMD-SHELL", "true"]
+      interval: 120s
+      timeout: 2s
+      retries: 1
+    depends_on:
+      - db

.ddev/docker-compose.phpmyadmin_norouter.yaml

@@ -0,0 +1,4 @@
+#ddev-generated
+# If omit_containers[ddev-router] then this file will be replaced
+# with another with a `ports` statement to directly expose port 80 to 8036
+services: {}

composer.json

@@ -41,7 +41,8 @@
     "config": {
         "allow-plugins": {
             "cakephp/plugin-installer": true,
-            "dealerdirect/phpcodesniffer-composer-installer": true
+            "dealerdirect/phpcodesniffer-composer-installer": true,
+            "php-http/discovery": true
         },
         "platform-check": true,
         "sort-packages": true

config/form-templates.php

@@ -5,7 +5,7 @@
  * Custom templates for pagination elements.
  */
 return [
-    'button' => '<button class="bg-cake-red hover:cursor-pointer p-2 text-white rounded-sm"{{attrs}}>{{text}}</button>',
+    'button' => '<button class="btn btn-soft btn-primary"{{attrs}}>{{text}}</button>',
     'checkbox' => '<input class="justify-self-start" type="checkbox" name="{{name}}" value="{{value}}"{{attrs}}>',
     'checkboxWrapper' => '<div class="col-span-2 col-start-2 flex gap-2">{{label}}</div>',
     'error' => '<div class="col-start-2 col-end-4 text-cake-red" id="{{id}}">{{content}}</div>',

package-lock.json

@@ -2,6 +2,7 @@
     "type": "module",
     "devDependencies": {
         "@tailwindcss/vite": "^4.1.4",
+        "daisyui": "^5.5.19",
         "tailwindcss": "^4.0.0",
         "vite": "^8.0.0"
     },
@@ -10,6 +11,8 @@
         "build": "vite build"
     },
     "dependencies": {
+        "htmx.org": "^2.0.8",
+        "slim-select": "^3.4.3",
         "swiper": "^12.1.3"
     }
 }

package.json

@@ -2,6 +2,48 @@
 @import "./fonts.css";
 @import "swiper/css";
 @import "swiper/css/navigation";
+@import "swiper/css/pagination";
+@import "slim-select/styles";
+@plugin "daisyui" {
+    themes: cakephp --default;
+}
+
+@plugin "daisyui/theme" {
+    name: "cakephp";
+    default: true;
+    prefersdark: false;
+    color-scheme: light;
+
+    --color-base-100: hsl(0 0% 100%);
+    --color-base-200: hsl(210 20% 98%);
+    --color-base-300: hsl(210 20% 94%);
+    --color-base-content: hsl(220 13% 18%);
+
+    --color-primary: hsl(214 84% 46%);
+    --color-primary-content: hsl(0 0% 100%);
+    --color-secondary: hsl(262 80% 50%);
+    --color-secondary-content: hsl(0 0% 100%);
+    --color-accent: hsl(199 89% 48%);
+    --color-accent-content: hsl(0 0% 100%);
+    --color-neutral: hsl(220 13% 18%);
+    --color-neutral-content: hsl(0 0% 100%);
+
+    --color-info: hsl(198 93% 60%);
+    --color-info-content: hsl(198 100% 12%);
+    --color-success: hsl(158 64% 52%);
+    --color-success-content: hsl(158 100% 10%);
+    --color-warning: hsl(43 96% 56%);
+    --color-warning-content: hsl(43 100% 11%);
+    --color-error: hsl(0 72% 46%);
+    --color-error-content: hsl(0 0% 100%);
+
+    --radius-box: 1.5rem;
+    --radius-field: 1rem;
+    --radius-selector: 1rem;
+    --border: 1px;
+    --depth: 1;
+    --noise: 0;
+}
 
 @theme {
     --font-raleway: "Raleway", sans-serif;
@@ -40,9 +82,46 @@
     --ss-primary-color: var(--color-blue-500);
 }
 
+.htmx-indicator {
+    opacity: 1;
+    transition: opacity 0.2s ease;
+}
+
+.htmx-request .htmx-indicator,
+.htmx-request.htmx-indicator {
+    opacity: 1;
+}
+
+.main-loading-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 80;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: hsl(210 40% 98% / 0.72);
+    backdrop-filter: blur(2px);
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    transition: opacity 0.2s ease;
+}
+
+body.is-htmx-loading .main-loading-overlay,
+.main-loading-overlay.htmx-request {
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+}
+
+.main-loading-indicator-card {
+    opacity: 1;
+    z-index: 90;
+}
+
 @layer components {
     .featured-packages-slider-shell {
-        @apply -mx-3 px-3 pb-4;
+        @apply pb-4;
     }
 
     .featured-packages-slider {
@@ -53,21 +132,13 @@
         @apply h-auto py-2;
     }
 
-    .featured-packages-slider-button {
-        @apply inline-flex h-11 w-11 items-center justify-center rounded-full border border-slate-200 bg-white text-lg text-slate-700 shadow-sm transition hover:border-cake-red hover:text-cake-red disabled:cursor-not-allowed disabled:opacity-40;
-    }
-
-    .featured-packages-slider-button::after {
-        content: none;
-    }
-
     .packages-section-divider {
-        @apply flex items-center gap-4 text-xs font-semibold uppercase tracking-[0.24em] text-slate-400;
+        @apply flex items-center gap-4 text-xs font-semibold uppercase tracking-[0.24em] opacity-40;
     }
 
     .packages-section-divider::before,
     .packages-section-divider::after {
         content: "";
-        @apply h-px flex-1 bg-slate-200;
+        @apply h-px flex-1 bg-base-300;
     }
 }