From 034d9d8c5b82092cb291801af2f946eb6e70fa4d Mon Sep 17 00:00:00 2001 From: Harsh Tandiya Date: Fri, 24 Jul 2026 01:29:51 +0530 Subject: [PATCH] feat!: Migrate dashboard to frappe-ui v1 (and Vite 8) (#272) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * chore(dashboard): upgrade frappe-ui to v1 and drop dev submodule Bump frappe-ui 0.1.257 -> 1.0.0-beta.25 and remove the dashboard/frappe-ui git submodule; the npm package is now the single source. Simplify vite.config.js to a static config that always uses the published plugin, and exclude frappe-ui from esbuild pre-bundling since it ships as source importing ~icons/lucide/* virtuals that only the Vite plugin resolves. Fix four type errors surfaced by v1's stricter types (nullable length guard, Combobox string|null emit, FileUploader error slot prop). Co-Authored-By: Claude Opus 4.8 * refactor(dashboard): adopt frappe-ui v1 Dialog props and lucide icons Convert all Dialog usages from the deprecated `options` blob and `#body-content`/`#body-title`/`#body` slots to flat top-level props and the default/`#title` slots (`#body` -> `bare` prop). Flatten the withdraw dialog's icon to `theme` and rename its lucide icon to `triangle-alert`. Replace remaining feather icon strings with `lucide-` names. * fix(dashboard): restore Zoom button hover color under frappe-ui v1 The v1 ink-blue scale defines shades 1-3 only, so `hover:bg-ink-blue-4` resolved to nothing and the Join Zoom button no longer darkened on hover. Use the raw blue-700 palette shade (one step darker than ink-blue-3) to restore the hover feedback. * refactor(dashboard): drop unused legacy Input global component The Input component is deprecated in frappe-ui v1 and was registered globally but never used in any template. Remove its import and registration; TextInput and FormControl remain. * fix(dashboard): pre-bundle nested feather-icons so the dev app mounts Excluding frappe-ui from esbuild pre-bundling (needed for its ~icons/lucide virtuals) left its bundled CJS feather-icons without ESM interop, so the FeatherIcon default import failed and the app never mounted (blank page). Pre-bundle feather-icons, including frappe-ui's nested copy via the `>` dep path, to restore the default export. * fix(dashboard): migrate to frappe-ui v1 design tokens and fix theming v1 renamed the design tokens (surface-white -> surface-base, expanded the ink accent scales, merged text size+weight into single classes). The old class names resolved to undefined CSS variables under v1, so text and surface colors rendered blank. Run the official tokens-v2 codemod across the dashboard to adopt the new names. Also give the app Layout a theme-aware background (bg-surface-base) and base text color. Previously the root had no background, so with the default dark theme the light ink text sat on an unstyled white page and was invisible. Both light and dark themes now render coherently. * refactor(dashboard): migrate proposal editor to frappe-ui v1 Editor Replace the deprecated TextEditor with the headless Editor from frappe-ui/editor, composed with EditorFixedMenu and EditorContent. The kit runs without the media extensions since proposals have no upload handler wired. Pin the ProseMirror packages via resolutions: the tree carried both a stale hoisted copy and the one tiptap resolves, which bundled the editor stack twice. Co-Authored-By: Claude Opus 4.8 * build(dashboard): upgrade to Vite 8 and drop dead auto-import dep Vite 8 replaces esbuild with rolldown for bundling. @vitejs/plugin-vue 6 is the first release listing Vite 8 in its peer range. vue-tsc moves with it; nothing else is Vite-coupled. Drop unplugin-auto-import: it was never wired into vite.config.js, and pinning it at the root only forced frappe-ui to nest the 19.x its lucideIcons plugin actually imports. frappe-ui stays out of pre-bundling, but for a new reason — rolldown resolves the extensionless `#molecules/*` specifiers esbuild could not, so the note about esbuild no longer applies. Co-Authored-By: Claude Opus 4.8 * chore: change green shade for better visiblity * test(e2e): drive proposal category through the listbox frappe-ui v1 renders a select as a combobox button that opens a listbox instead of a native `select`, so the old locator matched nothing and `selectOption` had nothing to act on. Pick the option by clicking it. Co-Authored-By: Claude Opus 4.8 * fix(dashboard): inline add-on dialog props and drop e2e regex matcher The add-on dialog was the only one still passing its title and size through a `v-bind` object; inline them like the other dialogs, and translate the title while it moves. Building the combobox matcher with `new RegExp(label)` broke on any label containing regex metacharacters. A plain string already matches case-insensitively on a substring. Co-Authored-By: Claude Opus 4.8 * style(dashboard): bump success green to ink-green-6 for readability Co-Authored-By: Claude Opus 4.8 --------- Co-authored-by: Claude Opus 4.8 (cherry picked from commit feafea04d4a0beb13cb1e57d8c57d8fb92375b23) --- .gitmodules | 3 - dashboard/components.d.ts | 8 +- dashboard/frappe-ui | 1 - dashboard/package.json | 16 +- .../src/components/AddOnPreferenceDialog.vue | 51 +- .../src/components/AttendeeFormControl.vue | 8 +- .../src/components/BaseCustomEventForm.vue | 63 +- dashboard/src/components/BillingDetails.vue | 8 +- dashboard/src/components/BookingEventInfo.vue | 10 +- .../components/BookingFinancialSummary.vue | 8 +- dashboard/src/components/BookingForm.vue | 82 +- dashboard/src/components/BookingHeader.vue | 2 +- dashboard/src/components/BookingSummary.vue | 10 +- .../components/CancellationRequestDialog.vue | 316 ++- .../components/CancellationRequestNotice.vue | 6 +- dashboard/src/components/CustomFieldInput.vue | 18 +- .../src/components/CustomFieldsSection.vue | 2 +- .../src/components/EventDetailsHeader.vue | 2 +- dashboard/src/components/EventSelector.vue | 4 +- dashboard/src/components/LoginDialog.vue | 395 ++- dashboard/src/components/LoginRequired.vue | 2 +- .../src/components/OfflinePaymentDialog.vue | 170 +- .../src/components/PaymentGatewayDialog.vue | 50 +- dashboard/src/components/PhoneInput.vue | 4 +- dashboard/src/components/ProfileView.vue | 8 +- .../src/components/ProposalEditDialog.vue | 113 +- .../src/components/QRCodeExpandDialog.vue | 10 +- .../src/components/RestrictionNotices.vue | 6 +- .../components/SponsorshipPaymentDialog.vue | 205 +- dashboard/src/components/SuccessMessage.vue | 6 +- dashboard/src/components/TicketCard.vue | 8 +- .../src/components/TicketDetailsModal.vue | 218 +- .../src/components/TicketTransferDialog.vue | 64 +- dashboard/src/components/TicketsSection.vue | 4 +- .../src/components/TransferTicketDialog.vue | 46 +- dashboard/src/layouts/Layout.vue | 2 +- dashboard/src/main.ts | 2 - dashboard/src/pages/BookTickets.vue | 4 +- dashboard/src/pages/BookingSuccess.vue | 4 +- dashboard/src/pages/CheckInScanner.vue | 6 +- dashboard/src/pages/EventProposalForm.vue | 18 +- dashboard/src/pages/ProposalDetails.vue | 42 +- dashboard/src/pages/RegisterInterest.vue | 18 +- dashboard/src/pages/SponsorshipDetails.vue | 112 +- dashboard/src/pages/TicketDetails.vue | 58 +- dashboard/src/pages/TicketsList.vue | 2 +- dashboard/tailwind.config.js | 1 + dashboard/vite.config.js | 116 +- dashboard/yarn.lock | 2241 +++++++++-------- e2e/pages/event-proposal.page.ts | 14 + e2e/tests/event-proposal.spec.ts | 8 +- 51 files changed, 2339 insertions(+), 2236 deletions(-) delete mode 100644 .gitmodules delete mode 160000 dashboard/frappe-ui diff --git a/.gitmodules b/.gitmodules deleted file mode 100644 index d1d862d5..00000000 --- a/.gitmodules +++ /dev/null @@ -1,3 +0,0 @@ -[submodule "dashboard/frappe-ui"] - path = dashboard/frappe-ui - url = https://github.com/frappe/frappe-ui.git diff --git a/dashboard/components.d.ts b/dashboard/components.d.ts index fb363d7d..09cf9a6c 100644 --- a/dashboard/components.d.ts +++ b/dashboard/components.d.ts @@ -1,8 +1,11 @@ /* eslint-disable */ // @ts-nocheck +// biome-ignore lint: disable +// oxlint-disable +// ------ // Generated by unplugin-vue-components // Read more: https://github.com/vuejs/core/pull/3399 -// biome-ignore lint: disable + export {} /* prettier-ignore */ @@ -29,9 +32,6 @@ declare module 'vue' { LanguageSwitcher: typeof import('./src/components/LanguageSwitcher.vue')['default'] LoginDialog: typeof import('./src/components/LoginDialog.vue')['default'] LoginRequired: typeof import('./src/components/LoginRequired.vue')['default'] - LucideCheckCircle: typeof import('~icons/lucide/check-circle')['default'] - LucideClock: typeof import('~icons/lucide/clock')['default'] - LucideXCircle: typeof import('~icons/lucide/x-circle')['default'] Navbar: typeof import('./src/components/Navbar.vue')['default'] OfflinePaymentDialog: typeof import('./src/components/OfflinePaymentDialog.vue')['default'] PaymentGatewayDialog: typeof import('./src/components/PaymentGatewayDialog.vue')['default'] diff --git a/dashboard/frappe-ui b/dashboard/frappe-ui deleted file mode 160000 index a43be7f1..00000000 --- a/dashboard/frappe-ui +++ /dev/null @@ -1 +0,0 @@ -Subproject commit a43be7f1d99b87c5ec6e95306e5549766cff12cc diff --git a/dashboard/package.json b/dashboard/package.json index 8a15088a..ec8cbc03 100644 --- a/dashboard/package.json +++ b/dashboard/package.json @@ -17,23 +17,29 @@ "@vueuse/router": "^13.6.0", "canvas-confetti": "^1.9.3", "feather-icons": "^4.29.2", - "frappe-ui": "^0.1.257", + "frappe-ui": "1.0.0-beta.25", "socket.io-client": "^4.7.2", "vue": "^3.5.13", "vue-router": "^4.5.0" }, + "resolutions": { + "prosemirror-keymap": "^1.2.3", + "prosemirror-model": "^1.25.11", + "prosemirror-state": "^1.4.4", + "prosemirror-transform": "^1.12.0", + "prosemirror-view": "^1.42.1" + }, "devDependencies": { "@biomejs/biome": "1.9.4", "@types/canvas-confetti": "^1.9.0", "@types/node": "^25.2.0", - "@vitejs/plugin-vue": "^5.1.4", + "@vitejs/plugin-vue": "^6.0.8", "autoprefixer": "^10.4.2", "html5-qrcode": "^2.3.8", "postcss": "^8.4.5", "tailwindcss": "^3.4.15", "typescript": "^5.9.3", - "unplugin-auto-import": "0.18.6", - "vite": "^5.4.10", - "vue-tsc": "^3.2.4" + "vite": "^8.1.5", + "vue-tsc": "^3.3.7" } } diff --git a/dashboard/src/components/AddOnPreferenceDialog.vue b/dashboard/src/components/AddOnPreferenceDialog.vue index 9f42fe85..6425348a 100644 --- a/dashboard/src/components/AddOnPreferenceDialog.vue +++ b/dashboard/src/components/AddOnPreferenceDialog.vue @@ -1,31 +1,29 @@