From 3ca5afd49f6a45fe59e4d8c359e56fc3d675fe87 Mon Sep 17 00:00:00 2001 From: Mauricio Siu <47042324+Siumauricio@users.noreply.github.com> Date: Tue, 30 Jun 2026 15:45:23 -0600 Subject: [PATCH] Feat/tailwind v4 shadcn update (#4706) * feat: update dependencies and enhance UI components in Dokploy - Updated various package versions in pnpm-lock.yaml to improve compatibility and performance, including React and Tailwind CSS. - Modified components.json to change the styling to "radix-nova" and added new properties for icon library and menu color. - Refactored multiple components to use updated class names for better styling consistency and responsiveness. - Removed unused Radix UI components from package.json to streamline dependencies. - Adjusted layout and styling in several dashboard components for improved user experience and visual appeal. - Enhanced tooltip and form item components for better accessibility and usability. * refactor: enhance UI components in HandleCertificate and SidebarLogo - Updated the HandleCertificate component to improve dialog content height and textarea styling for better usability. - Adjusted the SidebarLogo component layout to enhance alignment and spacing, ensuring a more consistent appearance across the sidebar. - Implemented responsive design adjustments to textarea elements, preventing overflow and improving user experience. * refactor: improve UI consistency and styling across dashboard components - Updated Card components in ShowDeployments, ShowSchedules, and ShowVolumeBackups to remove unnecessary border styles for a cleaner look. - Enhanced TabsList components in ShowProviderForm and ShowProviderFormCompose by adding a variant for improved visual distinction. - Adjusted spacing in AdvancedEnvironmentSelector for better layout and readability. - Removed redundant border classes in Service component for a more streamlined design. * [autofix.ci] apply automated fixes * chore: update package dependencies and refactor email rendering - Upgraded React and React DOM to version 19.2.7 across multiple packages for improved performance and compatibility. - Updated TSX to version 4.22.4 in various package.json files. - Refactored email rendering from `renderAsync` to `render` in notification utilities and email templates for consistency. - Adjusted Tailwind configuration usage in email templates to utilize a centralized configuration file. These changes enhance the overall stability and maintainability of the codebase. * refactor: update badge variants across dashboard components - Changed badge variant from "outline-solid" to "outline" in multiple components including columns, show-domains, and various deployment tables for consistency in styling. - Updated button variants in billing and project templates to align with the new badge styling. - Enhanced input components to support password generation and error messaging, improving user experience. These changes streamline the UI and ensure a cohesive design across the application. * refactor: clean up calendar component imports and structure - Removed redundant imports of icons from lucide-react and streamlined the import statements for better readability. - Adjusted the placement of type imports to enhance code organization. These changes improve the maintainability and clarity of the calendar component. * [autofix.ci] apply automated fixes --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> --- apps/api/package.json | 10 +- apps/dokploy/components.json | 13 +- .../cluster/modify-swarm-settings.tsx | 2 +- .../advanced/import/show-import.tsx | 2 +- .../advanced/redirects/handle-redirect.tsx | 2 +- .../advanced/traefik/show-traefik-config.tsx | 2 +- .../traefik/update-traefik-config.tsx | 2 +- .../advanced/volumes/add-volumes.tsx | 8 +- .../advanced/volumes/show-volumes.tsx | 2 +- .../advanced/volumes/update-volume.tsx | 2 +- .../deployments/show-deployment.tsx | 2 +- .../deployments/show-deployments.tsx | 5 +- .../application/domains/handle-domain.tsx | 19 +- .../application/environment/show.tsx | 2 +- .../generic/save-bitbucket-provider.tsx | 6 +- .../general/generic/save-git-provider.tsx | 2 +- .../general/generic/save-gitea-provider.tsx | 6 +- .../general/generic/save-github-provider.tsx | 6 +- .../general/generic/save-gitlab-provider.tsx | 6 +- .../application/general/generic/show.tsx | 5 +- .../dashboard/application/general/show.tsx | 12 +- .../add-preview-domain.tsx | 4 +- .../show-preview-deployments.tsx | 8 +- .../show-preview-settings.tsx | 4 +- .../schedules/handle-schedules.tsx | 11 +- .../application/schedules/show-schedules.tsx | 10 +- .../volume-backups/handle-volume-backups.tsx | 9 +- .../volume-backups/restore-volume-backups.tsx | 4 +- .../volume-backups/show-volume-backups.tsx | 2 +- .../compose/advanced/add-isolation.tsx | 2 +- .../dashboard/compose/general/actions.tsx | 10 +- .../compose/general/compose-file-editor.tsx | 2 +- .../save-bitbucket-provider-compose.tsx | 6 +- .../generic/save-git-provider-compose.tsx | 2 +- .../generic/save-gitea-provider-compose.tsx | 6 +- .../generic/save-github-provider-compose.tsx | 6 +- .../generic/save-gitlab-provider-compose.tsx | 6 +- .../compose/general/generic/show.tsx | 5 +- .../compose/general/randomize-compose.tsx | 2 +- .../general/show-converted-compose.tsx | 6 +- .../database/backups/handle-backup.tsx | 8 +- .../database/backups/restore-backup.tsx | 8 +- .../docker/config/show-container-config.tsx | 2 +- .../dashboard/docker/logs/analyze-logs.tsx | 2 +- .../docker/logs/line-count-filter.tsx | 4 +- .../dashboard/docker/logs/terminal-line.tsx | 23 +- .../docker/remove/remove-container.tsx | 2 +- .../file-system/show-traefik-file.tsx | 6 +- .../file-system/show-traefik-system.tsx | 2 +- .../impersonation/impersonation-bar.tsx | 4 +- .../libsql/general/show-general-libsql.tsx | 12 +- .../show-internal-libsql-credentials.tsx | 2 +- .../mariadb/general/show-general-mariadb.tsx | 12 +- .../mongo/general/show-general-mongo.tsx | 12 +- .../free/container/docker-block-chart.tsx | 2 +- .../free/container/docker-cpu-chart.tsx | 2 +- .../free/container/docker-disk-chart.tsx | 2 +- .../container/docker-disk-usage-chart.tsx | 2 +- .../free/container/docker-memory-chart.tsx | 2 +- .../free/container/docker-network-chart.tsx | 2 +- .../show-free-container-monitoring.tsx | 6 +- .../paid/container/container-block-chart.tsx | 2 +- .../paid/container/container-cpu-chart.tsx | 2 +- .../paid/container/container-memory-chart.tsx | 2 +- .../container/container-network-chart.tsx | 2 +- .../monitoring/paid/servers/cpu-chart.tsx | 2 +- .../monitoring/paid/servers/memory-chart.tsx | 2 +- .../monitoring/paid/servers/network-chart.tsx | 2 +- .../paid/servers/show-paid-monitoring.tsx | 10 +- .../mysql/general/show-general-mysql.tsx | 12 +- .../general/show-general-postgres.tsx | 12 +- .../dashboard/project/add-application.tsx | 2 +- .../dashboard/project/add-compose.tsx | 2 +- .../dashboard/project/add-database.tsx | 4 +- .../dashboard/project/add-import.tsx | 4 +- .../dashboard/project/add-template.tsx | 12 +- .../project/advanced-environment-selector.tsx | 4 +- .../dashboard/project/ai/step-three.tsx | 2 +- .../dashboard/project/ai/step-two.tsx | 2 +- .../project/ai/template-generator.tsx | 2 +- .../project/environment-variables.tsx | 2 +- .../projects/project-environment.tsx | 2 +- .../components/dashboard/projects/show.tsx | 2 +- .../redis/general/show-general-redis.tsx | 12 +- .../dashboard/requests/requests-table.tsx | 4 +- .../dashboard/requests/show-requests.tsx | 2 +- .../components/dashboard/search-command.tsx | 2 +- .../settings/billing/show-billing.tsx | 26 +- .../certificates/handle-certificate.tsx | 8 +- .../settings/cluster/nodes/show-node-data.tsx | 4 +- .../destination/handle-destinations.tsx | 4 +- .../notifications/handle-notifications.tsx | 26 +- .../dashboard/settings/profile/enable-2fa.tsx | 21 +- .../settings/profile/profile-form.tsx | 10 +- .../settings/servers/edit-script.tsx | 2 +- .../settings/servers/setup-server.tsx | 10 +- .../settings/servers/show-servers.tsx | 4 +- .../welcome-stripe/welcome-subscription.tsx | 4 +- .../settings/users/add-permissions.tsx | 22 +- .../dashboard/settings/users/show-users.tsx | 4 +- .../dashboard/settings/web-domain.tsx | 2 +- .../settings/web-server/edit-traefik-env.tsx | 4 +- .../settings/web-server/update-server-ip.tsx | 2 +- .../settings/web-server/update-server.tsx | 4 +- .../dashboard/swarm/applications/columns.tsx | 4 +- .../swarm/applications/data-table.tsx | 2 +- .../swarm/details/show-node-config.tsx | 4 +- apps/dokploy/components/layouts/side.tsx | 22 +- .../components/layouts/update-server.tsx | 2 +- apps/dokploy/components/layouts/user-nav.tsx | 2 +- .../proprietary/audit-logs/data-table.tsx | 4 +- .../proprietary/auth/sign-in-with-github.tsx | 2 +- .../proprietary/license-keys/license-key.tsx | 7 +- .../components/shared/advance-breadcrumb.tsx | 4 +- .../dokploy/components/shared/alert-block.tsx | 4 +- .../components/shared/breadcrumb-sidebar.tsx | 4 +- .../dokploy/components/shared/code-editor.tsx | 2 +- .../components/shared/tag-selector.tsx | 2 +- apps/dokploy/components/ui/accordion.tsx | 121 +- apps/dokploy/components/ui/alert-dialog.tsx | 284 +- apps/dokploy/components/ui/alert.tsx | 95 +- apps/dokploy/components/ui/avatar.tsx | 161 +- apps/dokploy/components/ui/badge.tsx | 35 +- apps/dokploy/components/ui/breadcrumb.tsx | 169 +- apps/dokploy/components/ui/button.tsx | 108 +- apps/dokploy/components/ui/calendar.tsx | 246 +- apps/dokploy/components/ui/card.tsx | 150 +- apps/dokploy/components/ui/chart.tsx | 308 +- apps/dokploy/components/ui/checkbox.tsx | 46 +- apps/dokploy/components/ui/collapsible.tsx | 30 +- apps/dokploy/components/ui/command.tsx | 281 +- apps/dokploy/components/ui/context-menu.tsx | 401 +- apps/dokploy/components/ui/dialog.tsx | 327 +- apps/dokploy/components/ui/dropdown-menu.tsx | 401 +- apps/dokploy/components/ui/file-tree.tsx | 8 +- apps/dokploy/components/ui/form.tsx | 11 +- apps/dokploy/components/ui/input-group.tsx | 156 + apps/dokploy/components/ui/input-otp.tsx | 149 +- apps/dokploy/components/ui/input.tsx | 260 +- apps/dokploy/components/ui/label.tsx | 34 +- apps/dokploy/components/ui/popover.tsx | 100 +- apps/dokploy/components/ui/progress.tsx | 43 +- apps/dokploy/components/ui/radio-group.tsx | 42 +- apps/dokploy/components/ui/scroll-area.tsx | 88 +- apps/dokploy/components/ui/select.tsx | 297 +- apps/dokploy/components/ui/separator.tsx | 27 +- apps/dokploy/components/ui/sheet.tsx | 230 +- apps/dokploy/components/ui/sidebar.tsx | 941 ++- apps/dokploy/components/ui/skeleton.tsx | 6 +- apps/dokploy/components/ui/sonner.tsx | 37 +- apps/dokploy/components/ui/switch.tsx | 44 +- apps/dokploy/components/ui/table.tsx | 187 +- apps/dokploy/components/ui/tabs.tsx | 126 +- apps/dokploy/components/ui/textarea.tsx | 30 +- apps/dokploy/components/ui/toggle.tsx | 46 +- apps/dokploy/components/ui/tooltip.tsx | 89 +- apps/dokploy/hooks/use-mobile.ts | 21 + apps/dokploy/lib/utils.ts | 2 +- apps/dokploy/package.json | 49 +- apps/dokploy/pages/_app.tsx | 29 +- apps/dokploy/pages/_error.tsx | 6 +- apps/dokploy/pages/dashboard/deployments.tsx | 4 +- apps/dokploy/pages/dashboard/monitoring.tsx | 5 +- .../services/application/[applicationId].tsx | 6 +- .../services/compose/[composeId].tsx | 2 +- .../services/libsql/[libsqlId].tsx | 2 +- .../services/mariadb/[mariadbId].tsx | 2 +- .../services/mongo/[mongoId].tsx | 2 +- .../services/mysql/[mysqlId].tsx | 2 +- .../services/postgres/[postgresId].tsx | 2 +- .../services/redis/[redisId].tsx | 2 +- apps/dokploy/pages/dashboard/settings/sso.tsx | 22 +- apps/dokploy/pages/index.tsx | 22 +- apps/dokploy/postcss.config.cjs | 3 +- .../server/utils/stripe-notifications.ts | 6 +- apps/dokploy/styles/globals.css | 411 +- apps/dokploy/tailwind.config.ts | 124 - apps/schedules/package.json | 10 +- package.json | 2 +- packages/server/package.json | 12 +- .../server/src/emails/emails/build-failed.tsx | 13 +- .../src/emails/emails/build-success.tsx | 13 +- .../src/emails/emails/database-backup.tsx | 13 +- .../src/emails/emails/docker-cleanup.tsx | 13 +- .../src/emails/emails/dokploy-backup.tsx | 13 +- .../src/emails/emails/dokploy-restart.tsx | 13 +- .../server/src/emails/emails/invitation.tsx | 13 +- .../emails/emails/invoice-notification.tsx | 13 +- .../src/emails/emails/payment-failed.tsx | 13 +- .../server/src/emails/emails/verify-email.tsx | 13 +- .../src/emails/emails/volume-backup.tsx | 13 +- packages/server/src/emails/package.json | 11 +- packages/server/src/emails/tailwind-config.ts | 14 + .../src/utils/notifications/build-error.ts | 4 +- .../src/utils/notifications/build-success.ts | 4 +- .../utils/notifications/database-backup.ts | 4 +- .../src/utils/notifications/docker-cleanup.ts | 4 +- .../src/utils/notifications/dokploy-backup.ts | 4 +- .../utils/notifications/dokploy-restart.ts | 4 +- .../src/utils/notifications/volume-backup.ts | 4 +- .../verification/send-verification-email.tsx | 6 +- pnpm-lock.yaml | 5872 ++++++++++------- 202 files changed, 7857 insertions(+), 5747 deletions(-) create mode 100644 apps/dokploy/components/ui/input-group.tsx create mode 100644 apps/dokploy/hooks/use-mobile.ts delete mode 100644 apps/dokploy/tailwind.config.ts create mode 100644 packages/server/src/emails/tailwind-config.ts diff --git a/apps/api/package.json b/apps/api/package.json index c7e76afc7..70df73ce4 100644 --- a/apps/api/package.json +++ b/apps/api/package.json @@ -17,17 +17,17 @@ "hono": "^4.11.7", "pino": "9.4.0", "pino-pretty": "11.2.2", - "react": "18.2.0", - "react-dom": "18.2.0", + "react": "19.2.7", + "react-dom": "19.2.7", "redis": "4.7.0", "zod": "^4.3.6" }, "devDependencies": { "@types/node": "^24.4.0", - "@types/react": "^18.2.37", - "@types/react-dom": "^18.2.15", + "@types/react": "^19.2.0", + "@types/react-dom": "^19.2.0", "rimraf": "6.1.3", - "tsx": "^4.16.2", + "tsx": "^4.22.4", "typescript": "^5.8.3" }, "packageManager": "pnpm@10.22.0", diff --git a/apps/dokploy/components.json b/apps/dokploy/components.json index 81104c1e9..26f5eb141 100644 --- a/apps/dokploy/components.json +++ b/apps/dokploy/components.json @@ -1,17 +1,22 @@ { "$schema": "https://ui.shadcn.com/schema.json", - "style": "default", + "style": "radix-nova", "rsc": false, "tsx": true, "tailwind": { - "config": "tailwind.config.ts", + "config": "", "css": "styles/globals.css", - "baseColor": "zinc", + "baseColor": "neutral", "cssVariables": true, "prefix": "" }, "aliases": { "components": "@/components", "utils": "@/lib/utils" - } + }, + "iconLibrary": "lucide", + "rtl": false, + "menuColor": "default", + "menuAccent": "subtle", + "registries": {} } diff --git a/apps/dokploy/components/dashboard/application/advanced/cluster/modify-swarm-settings.tsx b/apps/dokploy/components/dashboard/application/advanced/cluster/modify-swarm-settings.tsx index 7d214716e..a2d4c4ac9 100644 --- a/apps/dokploy/components/dashboard/application/advanced/cluster/modify-swarm-settings.tsx +++ b/apps/dokploy/components/dashboard/application/advanced/cluster/modify-swarm-settings.tsx @@ -156,7 +156,7 @@ export const AddSwarmSettings = ({ id, type }: Props) => {
{/* Left Column - Menu */} -
+