Update all frontend dependencies and fix warnings

.github/PULL_REQUEST_TEMPLATE.md

@@ -7,6 +7,7 @@ Thank you for your pull request! 🚀
 <!-- Please replace the empty checkboxes [] below with checked ones [x] accordingly. -->
 
 - [] This pull request is on a [separate branch](https://docs.github.com/en/get-started/quickstart/github-flow) and not the main branch
+- [] I have run the tests for the backend and frontend depending on what's needed for my changes as described in the [testing section of the contributing guide](https://github.com/activist-org/activist/blob/main/CONTRIBUTING.md#testing)
 
 ---
 

.github/workflows/pr_ci_frontend.yaml

@@ -41,5 +41,5 @@ jobs:
         if: always()
         uses: borales/actions-yarn@v4
         with:
-          cmd: eslint . --ext .js,.vue
+          cmd: eslint .
           dir: "frontend"

CONTRIBUTING.md

@@ -326,10 +326,23 @@ exit
 
 ### Frontend
 
-Running frontend tests locally is currently WIP.
+Please check the formatting of your code using Prettier before pull requests with the following command:
+
+```bash
+# Within ./frontend:
+yarn prettier . --check --config ../.prettierrc --ignore-path ../.prettierignore
+```
+
+You can further run the following commands for TypeScript type checks on the frontend:
+
+```bash
+# Within ./frontend:
+yarn run postinstall
+yarn nuxi typecheck
+```
 
 > [!NOTE]
-> When working on the frontend, activist recommends manual typechecking. From within the `frontend` directory run `yarn run postinstall` followed by `yarn nuxi typecheck` to confirm your changes are type-safe. Existing TS errors may be ignored. PRs to fix these are always welcome!
+> Pre-existing TS errors may be ignored. If you need assistance then feel free to open a PR and we'll support!
 
 <a id="linting"></a>
 

frontend/.eslintrc.js

@@ -8,6 +8,7 @@ module.exports = {
     "@nuxt/eslint-config",
     "prettier",
   ],
+  files: ["**/*.js", "**/*.ts", "**/*.vue"],
   rules: {
     "vue/no-multiple-template-root": "off",
     "vue/component-tags-order": [

frontend/assets/css/tailwind.css

@@ -136,19 +136,19 @@
   }
 
   .style-cta {
-    @apply focus-brand border border-light-text bg-light-cta-orange fill-light-text  text-light-text hover:bg-light-cta-orange/80 active:bg-light-cta-orange dark:border-dark-cta-orange dark:bg-dark-cta-orange/10 dark:fill-dark-cta-orange dark:text-dark-cta-orange dark:hover:bg-dark-cta-orange/25 dark:active:bg-dark-cta-orange/10;
+    @apply focus-brand border border-light-text bg-light-cta-orange fill-light-text text-light-text hover:bg-light-cta-orange/80 active:bg-light-cta-orange dark:border-dark-cta-orange dark:bg-dark-cta-orange/10 dark:fill-dark-cta-orange dark:text-dark-cta-orange dark:hover:bg-dark-cta-orange/25 dark:active:bg-dark-cta-orange/10;
   }
 
   .style-cta-disabled {
-    @apply focus-brand cursor-not-allowed border border-light-text/50 bg-light-cta-orange/50  fill-light-text/50 text-light-text/50 shadow-none   dark:border-dark-cta-orange/50 dark:bg-dark-cta-orange/10 dark:fill-dark-cta-orange/50 dark:text-dark-cta-orange/50;
+    @apply focus-brand cursor-not-allowed border border-light-text/50 bg-light-cta-orange/50 fill-light-text/50 text-light-text/50 shadow-none dark:border-dark-cta-orange/50 dark:bg-dark-cta-orange/10 dark:fill-dark-cta-orange/50 dark:text-dark-cta-orange/50;
   }
 
   .style-cta-secondary {
     @apply focus-brand border border-light-text bg-light-layer-2 fill-light-text text-light-text hover:bg-light-highlight-darker active:bg-light-layer-2 dark:border-dark-text dark:bg-dark-layer-2 dark:fill-dark-text dark:text-dark-text dark:hover:bg-dark-highlight-lighter dark:active:bg-dark-layer-2;
   }
 
   .style-cta-secondary-disabled {
-    @apply focus-brand cursor-not-allowed border border-light-text/50 bg-light-layer-2/75 fill-light-text/50 text-light-text/50 shadow-none  dark:border-dark-text/50 dark:bg-dark-layer-2 dark:fill-dark-text/50 dark:text-dark-text/50;
+    @apply focus-brand cursor-not-allowed border border-light-text/50 bg-light-layer-2/75 fill-light-text/50 text-light-text/50 shadow-none dark:border-dark-text/50 dark:bg-dark-layer-2 dark:fill-dark-text/50 dark:text-dark-text/50;
   }
 
   .style-learn {

frontend/components/btn/action/BtnActionDropdown.vue

@@ -40,7 +40,7 @@
             @keypress.enter="dropdownOptionsCallback(o)"
             tabindex="0"
             :class="{
-              'bg-light-cta-orange/80 text-light-text dark:bg-dark-cta-orange/40  dark:text-dark-cta-orange':
+              'bg-light-cta-orange/80 text-light-text dark:bg-dark-cta-orange/40 dark:text-dark-cta-orange':
                 active,
               'text-light-text dark:text-dark-text': !active,
             }"

frontend/components/card/CardConnect.vue

@@ -112,6 +112,7 @@
 
 <script setup lang="ts">
 import { Popover, PopoverButton, PopoverPanel } from "@headlessui/vue";
+import type { Group } from "~/types/entities/group";
 import type { Organization } from "~/types/entities/organization";
 import type { Event } from "~/types/events/event";
 import { IconMap } from "~/types/icon-map";
@@ -128,16 +129,19 @@ const id = typeof paramsID === "string" ? paramsID : undefined;
 const idGroup = typeof paramsIDGroup === "string" ? paramsIDGroup : undefined;
 
 const organizationStore = useOrganizationStore();
-let organization: Organization;
-const group = useGroupStore();
+const groupStore = useGroupStore();
 const eventStore = useEventStore();
+
+let organization: Organization;
+let group: Group;
 let event: Event;
 
 if (props.pageType == "organization") {
   await organizationStore.fetchByID(id);
   organization = organizationStore.organization;
 } else if (props.pageType == "group") {
-  await group.fetchByID(idGroup);
+  await groupStore.fetchByID(idGroup);
+  group = groupStore.group;
 } else if (props.pageType == "event") {
   await eventStore.fetchByID(id);
   event = eventStore.event;

frontend/components/feed/Feed.vue

@@ -14,6 +14,7 @@
 
 <script setup lang="ts">
 import { BreakpointMap } from "~/types/breakpoint-map";
+import type { Group } from "~/types/entities/group";
 
 const idParam = useRoute().params.id;
 const id = typeof idParam === "string" ? idParam : undefined;
@@ -25,7 +26,7 @@ const { organization } = organizationStore;
 
 const feedItemNames = computed<string[]>(() => {
   if (organization && organization.groups) {
-    return organization.groups.map((group) => group.name);
+    return organization.groups.map((group: Group) => group.name);
   } else {
     return [""];
   }
@@ -34,7 +35,8 @@ const feedItemNames = computed<string[]>(() => {
 const feedItemURLs = computed<string[]>(() => {
   if (organization && organization.groups) {
     return organization.groups.map(
-      (group) => `/organizations/${group.organization.id}/groups/${group.id}`
+      (group: Group) =>
+        `/organizations/${group.organization.id}/groups/${group.id}`
     );
   } else {
     return [""];

frontend/components/header/HeaderAppPage.vue

@@ -74,6 +74,7 @@
 </template>
 
 <script setup lang="ts">
+import type { Group } from "~/types/entities/group";
 import type { Organization } from "~/types/entities/organization";
 import type { Event } from "~/types/events/event";
 import { IconMap } from "~/types/icon-map";
@@ -89,16 +90,19 @@ const idParam = useRoute().params.id;
 const id = typeof idParam === "string" ? idParam : undefined;
 
 const organizationStore = useOrganizationStore();
-let organization: Organization;
-const group = useGroupStore();
+const groupStore = useGroupStore();
 const eventStore = useEventStore();
+
+let organization: Organization;
+let group: Group;
 let event: Event;
 
 if (props.pageType === "organization") {
   await organizationStore.fetchByID(id);
   organization = organizationStore.organization;
 } else if (props.pageType === "group") {
-  await group.fetchByID(id);
+  await groupStore.fetchByID(id);
+  group = groupStore.group;
 } else if (props.pageType === "event") {
   await eventStore.fetchByID(id);
   event = eventStore.event;

frontend/components/media/image-carousel/MediaImageCarousel.vue

@@ -69,7 +69,7 @@ const handleCloseModal = () => {
 
 <style>
 swiper-container::part(bullet) {
-  @apply focus-brand  bg-light-cta-orange/80 dark:bg-dark-cta-orange/80;
+  @apply focus-brand bg-light-cta-orange/80 dark:bg-dark-cta-orange/80;
 }
 
 swiper-container::part(bullet-active) {

frontend/components/modal/edit/about/ModalEditAboutGroup.vue

@@ -57,8 +57,10 @@ const props = defineProps<{
 const idParam = useRoute().params.id;
 const id = typeof idParam === "string" ? idParam : undefined;
 
-const group = useGroupStore();
-await group.fetchByID(id);
+const groupStore = useGroupStore();
+await groupStore.fetchByID(id);
+
+const { group } = groupStore;
 
 const formData = ref({
   description: group.description,

frontend/components/page/PageBreadcrumbs.vue

@@ -75,6 +75,7 @@
 
 <script setup lang="ts">
 import { validate as isValidUUID } from "uuid";
+import type { Group } from "~/types/entities/group";
 import type { Organization } from "~/types/entities/organization";
 import type { Event } from "~/types/events/event";
 
@@ -91,9 +92,11 @@ const id = typeof paramsID === "string" ? paramsID : undefined;
 const idGroup = typeof paramsIDGroup === "string" ? paramsIDGroup : undefined;
 
 const organizationStore = useOrganizationStore();
-let organization: Organization;
-const group = useGroupStore();
+const groupStore = useGroupStore();
 const eventStore = useEventStore();
+
+let organization: Organization;
+let group: Group;
 let event: Event;
 
 if (
@@ -107,7 +110,8 @@ if (
   organization = organizationStore.organization;
 } else if (url.includes("/organizations/") && url.includes("/groups/")) {
   pageType = "group";
-  await group.fetchByID(idGroup);
+  await groupStore.fetchByID(idGroup);
+  group = groupStore.group;
 } else if (
   url.includes("/events/") &&
   !url.includes("/organizations/") &&

frontend/composables/useMenuEntriesState.ts

@@ -4,7 +4,7 @@ const createMenuEntry = (label: string, basePath: string, iconURL: string) => {
   const { locale } = useI18n();
   const router = useRouter();
 
-  const { id } = router.currentRoute.value.params;
+  const { id } = router.currentRoute.value.params as { id: string };
   const routeURL = `/${locale.value}/${basePath}/${id}/${label
     .split(".")
     .pop()!

frontend/forms/schemas/organizationSchema.ts

@@ -1,13 +1,13 @@
-import { z } from "zod";
-
-export const organizationSchema = z.object({
-  name: z
-    .string()
-    .min(1, "Name must have at least 1 character")
-    .max(55, "Name must be less than 55 characters"),
-  location: z.string().min(1).max(100),
-  description: z.string().min(1).max(1000),
-  tagline: z.string().max(100).optional(),
-  social_accounts: z.array(z.string()).optional(),
-  topics: z.array(z.string()).min(1).optional(),
-});
+import { z } from "zod";
+
+export const organizationSchema = z.object({
+  name: z
+    .string()
+    .min(1, "Name must have at least 1 character")
+    .max(55, "Name must be less than 55 characters"),
+  location: z.string().min(1).max(100),
+  description: z.string().min(1).max(1000),
+  tagline: z.string().max(100).optional(),
+  social_accounts: z.array(z.string()).optional(),
+  topics: z.array(z.string()).min(1).optional(),
+});

frontend/package.json

@@ -11,68 +11,68 @@
     "test:prod": "cross-env TEST_ENV=prod playwright test"
   },
   "devDependencies": {
-    "@headlessui/vue": "1.7.19",
-    "@nuxt/content": "2.12.1",
-    "@nuxt/devtools": "1.3.9",
-    "@nuxt/eslint-config": "^0.3.2",
-    "@nuxtjs/color-mode": "3.3.3",
-    "@nuxtjs/device": "3.1.0",
-    "@nuxtjs/i18n": "8.5.1",
-    "@nuxtjs/tailwindcss": "6.11.4",
-    "@pinia/nuxt": "0.5.1",
-    "@playwright/test": "1.45.1",
-    "@types/node": "20.12.5",
-    "@types/uuid": "9.0.8",
-    "@types/zxcvbn": "4.4.4",
-    "@vueuse/core": "10.9.0",
-    "@vueuse/nuxt": "10.9.0",
+    "@headlessui/vue": "1.7.23",
+    "@nuxt/content": "2.13.2",
+    "@nuxt/devtools": "1.6.0",
+    "@nuxt/eslint-config": "0.5.7",
+    "@nuxtjs/color-mode": "3.5.1",
+    "@nuxtjs/device": "3.2.4",
+    "@nuxtjs/i18n": "8.5.5",
+    "@nuxtjs/tailwindcss": "6.12.1",
+    "@pinia/nuxt": "0.5.5",
+    "@playwright/test": "1.48.0",
+    "@types/node": "22.7.5",
+    "@types/uuid": "10.0.0",
+    "@types/zxcvbn": "4.4.5",
+    "@vueuse/core": "11.1.0",
+    "@vueuse/nuxt": "11.1.0",
     "cross-env": "7.0.3",
-    "eslint": "^8.0.0",
-    "eslint-plugin-vue": "9.24.1",
-    "eslint-plugin-vuejs-accessibility": "2.2.1",
-    "nuxt": "3.13.0",
+    "eslint": "9.12.0",
+    "eslint-plugin-vue": "9.29.0",
+    "eslint-plugin-vuejs-accessibility": "2.4.1",
+    "nuxt": "3.13.2",
     "nuxt-icon": "0.6.10",
-    "playwright": "1.45.1",
-    "prettier": "3.2.5",
-    "prettier-plugin-tailwindcss": "0.5.13",
-    "rollup": "4.22.4",
-    "typescript": "5.4.4",
-    "vite": "5.2.14",
-    "vue": "3.4.21",
-    "vue-tsc": "2.0.11"
+    "playwright": "1.48.0",
+    "prettier": "3.3.3",
+    "prettier-plugin-tailwindcss": "0.6.8",
+    "rollup": "4.24.0",
+    "typescript": "5.6.3",
+    "vite": "5.4.8",
+    "vue": "3.5.12",
+    "vue-tsc": "2.1.6"
   },
   "dependencies": {
-    "@axe-core/playwright": "4.9.1",
-    "@maplibre/maplibre-gl-directions": "0.7.0",
+    "@axe-core/playwright": "4.10.0",
+    "@maplibre/maplibre-gl-directions": "0.7.1",
     "@nuxtjs/axios": "5.13.6",
-    "@nuxtjs/plausible": "1.0.0",
-    "@opentelemetry/api": ">=1.0.0 <1.9.0",
+    "@nuxtjs/plausible": "1.0.3",
+    "@opentelemetry/api": "1.9.0",
     "@popperjs/core": "2.11.8",
     "@somushq/vue3-friendly-captcha": "1.0.2",
     "@types/geojson": "7946.0.14",
-    "@unocss/reset": ">=0.50.0-0",
-    "axios": "1.7.4",
+    "@unocss/reset": "0.63.4",
+    "axios": "1.7.7",
     "dotenv": "16.4.5",
-    "eslint-config-prettier": "9.0.0",
-    "floating-vue": "2.0.0",
-    "maplibre-gl": "4.0.0",
-    "nuxt-mail": "5.0.1",
-    "pinia": "2.1.6",
-    "postcss": "8.4.31",
-    "postcss-custom-properties": "^14.0.1",
-    "qrcode": "1.5.3",
-    "qrcode.vue": "3.4.1",
+    "eslint-config-prettier": "9.1.0",
+    "floating-vue": "5.2.2",
+    "maplibre-gl": "4.7.1",
+    "nuxt-mail": "5.1.1",
+    "pinia": "2.2.4",
+    "postcss": "8.4.47",
+    "postcss-custom-properties": "14.0.2",
+    "qrcode": "1.5.4",
+    "qrcode.vue": "3.5.0",
     "reduced-motion": "1.0.4",
-    "swiper": "11.1.0",
+    "swiper": "11.1.14",
     "tailwind-scrollbar": "3.1.0",
-    "tailwindcss": "3.4.3",
-    "unocss": ">=0.50.0-0",
-    "uuid": "9.0.1",
+    "tailwindcss": "3.4.13",
+    "unocss": "0.63.4",
+    "uuid": "10.0.0",
     "v-calendar": "3.1.1",
     "vue-socials": "2.0.5",
-    "vue-sonner": "1.1.3",
+    "vue-sonner": "1.2.1",
     "vuedraggable": "4.1.0",
-    "wait-on": "7.2.0",
+    "wait-on": "8.0.1",
     "zod": "3.23.8",
     "zxcvbn": "4.4.2"
   },

frontend/pages/events/[id]/about.vue

@@ -88,6 +88,14 @@
 import { BreakpointMap } from "~/types/breakpoint-map";
 import { IconMap } from "~/types/icon-map";
 
+const idParam = useRoute().params.id;
+const id = typeof idParam === "string" ? idParam : undefined;
+
+const eventStore = useEventStore();
+await eventStore.fetchByID(id);
+
+const { event } = eventStore;
+
 const textExpanded = ref(false);
 const expandReduceText = () => {
   textExpanded.value = !textExpanded.value;