From d4e28e6f3bdf748cf9e73efdcaaf9d31143edd9b Mon Sep 17 00:00:00 2001 From: Tonya Date: Thu, 4 Sep 2025 09:00:25 +0100 Subject: [PATCH] Upgrade frontend deps, including nuxt (#982) * feat: begin upgrading deps, still very buggy * feat: progress * feat: sort all type issues * fix: sort type issues * fix: import sonner styles * fix: nuxt is the enemy * fix: try sorting issue with workflows * fix: update vitest config for dynamic import of path and defineConfig * fix: add missing import * fix: add time out to try and fix issues * fix: add ui:ci:preview task for frontend build in CI mode * fix: i was silly * feat: add go:ci:with-frontend task for CI mode and remove ui:ci:preview from e2e workflow * fix: update baseURL in Playwright config for local testing to use port 7745 * fix: update E2E_BASE_URL and remove wait for timeout in login test for smoother execution --- .vscode/settings.json | 3 +- Taskfile.yml | 15 +- frontend/.eslintrc.js | 55 - frontend/app.vue | 2 +- frontend/components/App/CreateModal.vue | 3 +- frontend/components/App/ImportDialog.vue | 8 +- frontend/components/App/OutdatedModal.vue | 6 +- frontend/components/App/QuickMenuModal.vue | 4 +- frontend/components/App/ScannerModal.vue | 18 +- frontend/components/App/ThemePicker.vue | 6 +- frontend/components/Base/Card.vue | 6 +- frontend/components/DetailAction.vue | 8 +- frontend/components/Form/ColorSelector.vue | 6 +- frontend/components/Form/DatePicker.vue | 1 - frontend/components/Form/Password.vue | 6 +- frontend/components/Form/TextArea.vue | 4 +- frontend/components/Form/TextField.vue | 4 +- frontend/components/Item/AttachmentsList.vue | 2 +- frontend/components/Item/BarcodeModal.vue | 5 + frontend/components/Item/Card.vue | 4 +- frontend/components/Item/CreateModal.vue | 20 +- frontend/components/Item/ImageDialog.vue | 2 +- frontend/components/Item/Selector.vue | 9 +- frontend/components/Item/View/Selectable.vue | 3 + frontend/components/Item/View/Table.types.ts | 1 + frontend/components/Item/View/Table.vue | 12 +- frontend/components/Label/CreateModal.vue | 5 +- frontend/components/Label/Selector.vue | 1 + frontend/components/Location/Card.vue | 4 +- frontend/components/Location/CreateModal.vue | 5 +- frontend/components/Location/Tree/Node.vue | 3 +- frontend/components/Location/Tree/Root.vue | 1 + frontend/components/Maintenance/EditModal.vue | 3 + frontend/components/Maintenance/ListView.vue | 12 +- frontend/components/ModalConfirm.vue | 10 + frontend/components/Search/Filter.vue | 4 +- frontend/components/global/CopyText.vue | 1 + frontend/components/global/Currency.vue | 6 +- .../global/DetailsSection/DetailsSection.vue | 6 +- frontend/components/global/LabelMaker.vue | 4 +- frontend/components/global/Markdown.vue | 4 +- frontend/components/global/Spacer.vue | 2 +- .../components/global/StatCard/StatCard.vue | 1 + frontend/components/global/Table.types.ts | 1 + .../components/ui/dialog-provider/utils.ts | 114 +- frontend/components/ui/dialog/Dialog.vue | 4 +- frontend/components/ui/sonner/Sonner.vue | 16 +- frontend/components/ui/sonner/index.ts | 4 +- frontend/composables/use-api.ts | 1 + frontend/composables/use-auth-context.ts | 3 +- frontend/composables/use-confirm.ts | 3 +- frontend/composables/use-css-var.ts | 1 - frontend/composables/use-defer.ts | 1 + frontend/composables/use-location-helpers.ts | 2 +- frontend/composables/use-route-params.ts | 1 + frontend/composables/use-server-events.ts | 2 +- frontend/composables/use-theme.ts | 2 +- frontend/composables/utils.ts | 4 +- frontend/eslint.config.mjs | 72 + frontend/global.d.ts | 2 +- frontend/layouts/default.vue | 37 +- frontend/layouts/empty.vue | 4 +- frontend/lib/api/__test__/factories/index.ts | 4 +- frontend/lib/api/__test__/public.test.ts | 2 +- frontend/lib/api/__test__/user/group.test.ts | 2 +- frontend/lib/api/__test__/user/items.test.ts | 22 +- frontend/lib/api/__test__/user/stats.test.ts | 2 +- frontend/lib/api/base/base-api.ts | 7 +- frontend/lib/api/classes/locations.ts | 2 +- frontend/lib/api/classes/maintenance.ts | 2 +- frontend/lib/datelib/datelib.test.ts | 4 +- frontend/lib/datelib/datelib.ts | 4 +- frontend/lib/passwords/index.test.ts | 2 +- frontend/lib/passwords/index.ts | 4 +- frontend/lib/requests/requests.ts | 2 +- frontend/lib/utils.ts | 2 +- frontend/nuxt.config.ts | 9 + frontend/package.json | 89 +- frontend/pages/assets/[id].vue | 5 +- frontend/pages/home/index.vue | 8 + frontend/pages/home/statistics.ts | 14 +- frontend/pages/home/table.ts | 22 +- frontend/pages/index.vue | 9 +- frontend/pages/item/[id]/index.vue | 15 +- frontend/pages/item/[id]/index/edit.vue | 23 +- .../pages/item/[id]/index/maintenance.vue | 4 +- frontend/pages/items.vue | 20 +- frontend/pages/label/[id].vue | 8 + frontend/pages/location/[id].vue | 15 +- frontend/pages/locations.vue | 6 +- frontend/pages/maintenance.vue | 5 +- frontend/pages/profile.vue | 14 +- frontend/pages/reports/label-generator.vue | 12 +- frontend/pages/tools.vue | 15 +- frontend/plugins/i18n.ts | 7 +- frontend/pnpm-lock.yaml | 10387 ++++++++-------- frontend/public/set-theme.js | 12 +- frontend/tailwind.config.js | 2 +- frontend/test/e2e/login.browser.spec.ts | 2 +- frontend/test/playwright.teardown.ts | 4 +- frontend/test/vitest.config.ts | 29 +- package.json | 5 +- pnpm-lock.yaml | 7827 +++++++++++- 103 files changed, 13314 insertions(+), 5874 deletions(-) delete mode 100644 frontend/.eslintrc.js create mode 100644 frontend/eslint.config.mjs diff --git a/.vscode/settings.json b/.vscode/settings.json index 632384f7..96522090 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -4,7 +4,7 @@ }, "explorer.fileNesting.enabled": true, "explorer.fileNesting.patterns": { - "package.json": "package-lock.json, yarn.lock, .eslintrc.js, tsconfig.json, .prettierrc, .editorconfig, pnpm-lock.yaml, postcss.config.js, tailwind.config.js", + "package.json": "package-lock.json, yarn.lock, eslint.config.mjs, tsconfig.json, .prettierrc, .editorconfig, pnpm-lock.yaml, postcss.config.js, tailwind.config.js", "docker-compose.yml": "Dockerfile, .dockerignore, docker-compose.dev.yml, docker-compose.yml", "README.md": "LICENSE, SECURITY.md" }, @@ -22,6 +22,7 @@ "editor.defaultFormatter": "dbaeumer.vscode-eslint" }, "eslint.format.enable": true, + "eslint.useFlatConfig": true, "css.validate": false, "tailwindCSS.includeLanguages": { "vue": "html", diff --git a/Taskfile.yml b/Taskfile.yml index f6c8fc5d..e2da964d 100644 --- a/Taskfile.yml +++ b/Taskfile.yml @@ -93,6 +93,16 @@ tasks: - go run ./app/api/ {{ .CLI_ARGS }} & silent: true + go:ci:with-frontend: + desc: Run backend with frontend in CI mode + dir: frontend + cmds: + - pnpm install + - pnpm run build + - cp -r ./.output/public ../backend/app/api/static/ + - task: go:ci + silent: true + go:test: desc: Runs all go tests using gotestsum - supports passing gotestsum args dir: backend @@ -201,12 +211,11 @@ tasks: desc: Runs end-to-end test on a live server dir: frontend cmds: - - task: go:ci - - task: ui:ci + - task: go:ci:with-frontend - pnpm exec playwright install-deps - pnpm exec playwright install - sleep 30 - - TEST_SHUTDOWN_API_SERVER=true pnpm exec playwright test -c ./test/playwright.config.ts {{ .CLI_ARGS }} + - TEST_SHUTDOWN_API_SERVER=true E2E_BASE_URL=http://localhost:7745 pnpm exec playwright test -c ./test/playwright.config.ts {{ .CLI_ARGS }} pr: desc: Runs all tasks required for a PR diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.js deleted file mode 100644 index e2bc53c5..00000000 --- a/frontend/.eslintrc.js +++ /dev/null @@ -1,55 +0,0 @@ -module.exports = { - env: { - browser: true, - es2021: true, - node: true, - }, - extends: [ - "eslint:recommended", - "plugin:vue/essential", - "plugin:@typescript-eslint/recommended", - "@nuxtjs/eslint-config-typescript", - "plugin:vue/vue3-recommended", - "plugin:prettier/recommended", - "plugin:tailwindcss/recommended", - ], - parserOptions: { - ecmaVersion: "latest", - parser: "@typescript-eslint/parser", - sourceType: "module", - }, - plugins: ["vue", "@typescript-eslint"], - rules: { - "no-console": 0, - "no-unused-vars": "off", - "vue/multi-word-component-names": "off", - "vue/no-setup-props-destructure": 0, - "vue/no-multiple-template-root": 0, - "vue/no-v-model-argument": 0, - "vue/no-v-html": 0, - "@typescript-eslint/consistent-type-imports": "error", - "@typescript-eslint/ban-ts-comment": 0, - "tailwindcss/no-custom-classname": "warn", - "@typescript-eslint/no-unused-vars": [ - "error", - { - ignoreRestSiblings: true, - destructuredArrayIgnorePattern: "_", - caughtErrors: "none", - }, - ], - "prettier/prettier": [ - "warn", - { - arrowParens: "avoid", - semi: true, - tabWidth: 2, - useTabs: false, - vueIndentScriptAndStyle: true, - singleQuote: false, - trailingComma: "es5", - printWidth: 120, - }, - ], - }, -}; diff --git a/frontend/app.vue b/frontend/app.vue index ba159df7..71428a16 100644 --- a/frontend/app.vue +++ b/frontend/app.vue @@ -6,7 +6,7 @@ - + diff --git a/frontend/components/App/CreateModal.vue b/frontend/components/App/CreateModal.vue index a2efe690..5720a972 100644 --- a/frontend/components/App/CreateModal.vue +++ b/frontend/components/App/CreateModal.vue @@ -47,7 +47,8 @@ import { useMediaQuery } from "@vueuse/core"; import type { DialogID } from "@/components/ui/dialog-provider/utils"; import { Drawer, DrawerContent, DrawerHeader, DrawerTitle } from "@/components/ui/drawer"; - import { Dialog, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"; + import { Dialog, DialogFooter, DialogHeader, DialogScrollContent, DialogTitle } from "@/components/ui/dialog"; + import { Shortcut } from "@/components/ui/shortcut"; const isDesktop = useMediaQuery("(min-width: 768px)"); diff --git a/frontend/components/App/ImportDialog.vue b/frontend/components/App/ImportDialog.vue index eaf1048d..d85c6418 100644 --- a/frontend/components/App/ImportDialog.vue +++ b/frontend/components/App/ImportDialog.vue @@ -51,7 +51,7 @@ import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; type Props = { - modelValue: boolean; + modelValue?: boolean; }; const { t } = useI18n(); @@ -66,13 +66,13 @@ const api = useUserApi(); - const importCsv = ref(null); + const importCsv = ref(undefined); const importLoading = ref(false); const importRef = ref(); whenever( () => !dialog.value, () => { - importCsv.value = null; + importCsv.value = undefined; } ); @@ -102,7 +102,7 @@ // Reset dialog.value = false; importLoading.value = false; - importCsv.value = null; + importCsv.value = undefined; if (importRef.value) { importRef.value.value = ""; diff --git a/frontend/components/App/OutdatedModal.vue b/frontend/components/App/OutdatedModal.vue index a2d51c13..4d990737 100644 --- a/frontend/components/App/OutdatedModal.vue +++ b/frontend/components/App/OutdatedModal.vue @@ -29,12 +29,12 @@ import { lt } from "semver"; import { AlertDialog, + AlertDialogAction, AlertDialogContent, - AlertDialogHeader, - AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, - AlertDialogAction, + AlertDialogHeader, + AlertDialogTitle, } from "@/components/ui/alert-dialog"; import { useDialog } from "@/components/ui/dialog-provider"; diff --git a/frontend/components/App/QuickMenuModal.vue b/frontend/components/App/QuickMenuModal.vue index 4d443033..12875a65 100644 --- a/frontend/components/App/QuickMenuModal.vue +++ b/frontend/components/App/QuickMenuModal.vue @@ -3,11 +3,11 @@ import { DialogID, type NoParamDialogIDs, type OptionalDialogIDs } from "@/components/ui/dialog-provider/utils"; import { CommandDialog, - CommandInput, - CommandList, CommandEmpty, CommandGroup, + CommandInput, CommandItem, + CommandList, CommandSeparator, } from "~/components/ui/command"; import { Shortcut } from "~/components/ui/shortcut"; diff --git a/frontend/components/App/ScannerModal.vue b/frontend/components/App/ScannerModal.vue index e13cb266..546e86b9 100644 --- a/frontend/components/App/ScannerModal.vue +++ b/frontend/components/App/ScannerModal.vue @@ -33,7 +33,7 @@ - +