feat: add web-preview component and related test cases, example, and doc (#28)

* feat: add WebPreview component and related subcomponents for enhanced web preview functionality

* refactor: update props definition to use TypeScript interface for improved type safety

* feat: integrate Vitest for testing and add web preview tests

- Added Vitest configuration for testing with Playwright support.
- Implemented test cases for WebPreview
- Enhanced TypeScript configuration for JSX support.

* feat: add web preview example component with navigation and console logs

* feat: add WebPreview documentation and installation instructions

* feat: convert WebPreview component to Vue 3 and update backend route handling

* feat: add GitHub Actions workflow for testing with Node.js

* refactor: enhanced WebPreview loading slot functionality

* feat: add script to generate .code-group.md files for components

* chore: resolved conflicts and move web-preview into vibe-coding folder

* chore: install Playwright 1.56.1 dependencie

* ci: make test github action work

* chore: update Vitest configuration with path aliases for improved module resolution

* chore: update Vitest configuration to use shadcn-vue path aliases

* chore: removed irrelevant script code

* chore: update WebPreviewUrl component Input class

* chore(docs): update code blocks in web-preview.md for clarity

---------

Co-authored-by: Charlie Wang <18888351756@163.com>
Co-authored-by: Emmanuel Raymond <peoray@yahoo.com>

Author: 3 people

.github/workflows/test.yml

@@ -0,0 +1,39 @@
+name: Test
+
+on:
+  pull_request:
+    branches:
+      - main
+  push:
+    branches:
+      - main
+
+jobs:
+  test:
+    name: Run Tests (Node.js ${{ matrix.node-version }})
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [20, 22, 24]
+
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v5
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Setup Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v6
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Install Dependencies
+        run: pnpm i
+
+      - name: Install Playwright Browsers
+        run: pnpm --filter @repo/elements exec playwright install --with-deps chromium
+
+      - name: Run Tests
+        run: pnpm test

.gitignore

@@ -28,3 +28,9 @@ dist-ssr
 .env
 .env.*
 !.env.example
+
+# Testing
+coverage
+**/__screenshots__
+
+.code-group.md