chore: merge branch 'dev' into feat/styled-avatar

Author: mostafahassan04

.github/workflows/code-quality-workflow.yaml

@@ -5,9 +5,9 @@ on:
     types: [opened, synchronize, reopened]
 
 permissions:
-    contents: read
-    pull-requests: write
-    issues: write
+  contents: read
+  pull-requests: write
+  issues: write
 
 jobs:
   style-quality:
@@ -16,15 +16,21 @@ jobs:
 
     steps:
       - uses: actions/checkout@v4
+      
+      - name: Set up Corepack
+        run: corepack enable
+
+      - name: Set up pnpm
+        run: corepack prepare pnpm@latest --activate
+
       - uses: actions/setup-node@v4
         with:
           node-version: 22
-
-      - run: corepack enable
-      - run: corepack prepare pnpm@latest --activate
+          cache: 'pnpm'
+          cache-dependency-path: '**/pnpm-lock.yaml'
 
       - name: Install dependencies
-        run: pnpm install
+        run: pnpm install --frozen-lockfile
 
       - name: Run Formatter
         run: pnpm run format:check

app/pages/playground/mock-server.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+const { data } = useFetch('/api/user/ravenbot');
+</script>
+
+<template>
+  <div>
+    <h1 class="p-4 text-2xl">
+      {{ $t('testing.welcome') }}
+    </h1>
+    <div v-if="data" class="px-4">
+      <h1 class="text-lg font-semibold">{{ data.name }}</h1>
+      <p class="text-muted-foreground text-sm">{{ '@' + data.username }}</p>
+    </div>
+  </div>
+</template>

app/plugins/msw.client.ts

@@ -0,0 +1,9 @@
+export default defineNuxtPlugin(async () => {
+  if (import.meta.dev) {
+    const { worker } = await import('../../mocks/browser');
+    await worker.start({
+      onUnhandledRequest: 'bypass',
+    });
+    console.warn('Mock Service Worker (client) started');
+  }
+});

mocks/browser.ts

@@ -0,0 +1,4 @@
+import { setupWorker } from 'msw/browser';
+import { handlers } from './handler';
+
+export const worker = setupWorker(...handlers);

mocks/handler.ts

@@ -0,0 +1,7 @@
+import { handlers as userHandlers } from './handlers/user';
+// Import more handlers as needed
+
+export const handlers = [
+  ...userHandlers,
+  // Add More handlers here
+];

mocks/handlers/user.ts

@@ -0,0 +1,23 @@
+import { http, HttpResponse } from 'msw';
+
+const mockUsers = {
+  johndoe: { id: 'abc-123', name: 'John Doe', username: 'johndoe' },
+  janedoe: { id: 'xyz-456', name: 'Jane Doe', username: 'janedoe' },
+  ravenbot: { id: 'bot-001', name: 'Raven Bot', username: 'ravenbot' },
+};
+
+const API_URL = process.env.BACKEND_URL;
+
+export const handlers = [
+  http.get(`${API_URL}/user/:username`, ({ params }) => {
+    const { username } = params;
+
+    const user = mockUsers[username as keyof typeof mockUsers];
+
+    if (!user) {
+      return HttpResponse.json({ message: `User "${username}" not found` }, { status: 404 });
+    }
+
+    return HttpResponse.json(user, { status: 200 });
+  }),
+];

mocks/node.ts

@@ -0,0 +1,4 @@
+import { setupServer } from 'msw/node';
+import { handlers } from './handler';
+
+export const server = setupServer(...handlers);

nuxt.config.ts

@@ -10,8 +10,6 @@ export default defineNuxtConfig({
       enabled: true,
     },
   },
-  imports: { autoImport: false },
-  components: false,
   modules: [
     '@nuxt/eslint',
     '@nuxt/fonts',

package.json

@@ -48,6 +48,7 @@
     "happy-dom": "^19.0.2",
     "husky": "^9.1.7",
     "lint-staged": "^16.2.3",
+    "msw": "^2.11.5",
     "playwright-core": "^1.55.1",
     "prettier": "^3.6.2",
     "prettier-plugin-tailwindcss": "^0.6.14",
@@ -65,5 +66,10 @@
   },
   "engines": {
     "node": ">=22.0.0"
+  },
+  "msw": {
+    "workerDirectory": [
+      "public"
+    ]
   }
 }