Enhance UI components and testing framework

.github/workflows/actions/cache-deps/action.yml

@@ -0,0 +1,42 @@
+name: 'Setup Node and pnpm and cache dependencies'
+description: 'an action to setup node, pnpm and cache dependencies for workflows'
+inputs:
+    caching:
+        description: "Whether to cache dependencies"
+        required: false
+        default: "true"
+outputs:
+    used-cache:
+        description: "Whether the cache was used"
+        value: ${{steps.install-deps.outputs.cache}}
+runs:
+  using: 'composite'
+  steps:
+
+    - name: Set up Node.js
+      uses: actions/setup-node@v6
+      with:
+        node-version: '20'
+
+    - name: Cache Dependencies
+      if: ${{inputs.caching == 'true'}}
+      id: cache
+      uses: actions/cache@v4
+      with:
+        path: ~/.pnpm-store
+        key: ${{ runner.os }}-pnpm-${{ hashFiles('**/pnpm-lock.yaml') }}
+        restore-keys: |
+          ${{ runner.os }}-pnpm-
+
+    - name: Install pnpm
+      uses: pnpm/action-setup@v4
+      with:
+        version: 10.7.1
+
+    - name: Install dependencies
+      id: install-deps
+      if: ${{steps.cache.outputs.cache-hit != 'true'}} || ${{inputs.caching == 'false'}}
+      run: |
+        pnpm install
+        echo "cache=${{inputs.caching}}" >> $GITHUB_OUTPUT
+      shell: bash

.github/workflows/main.yml

@@ -0,0 +1,65 @@
+name: "CI Pipeline"
+on:
+  push:
+    branches:
+        [main]
+  pull_request:
+    branches:
+        [main] 
+
+jobs:
+    tests:
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout code
+              uses: actions/checkout@v6
+            - name: Load & Cache Dependencies
+              id: load-cache-deps
+              uses: ./.github/workflows/actions/cache-deps
+              with:
+                caching: "true"
+            - name: Output Cache Status
+              run: echo "Used cache ${{steps.load-cache-deps.outputs.used-cache}}"
+            - name: Run Unit Tests
+              run: pnpm test
+            - name: Upload Coverage Report
+              uses: actions/upload-artifact@v4
+              with:
+                name: coverage-report
+                path: coverage/
+                retention-days: 30
+              if: always()
+    lint:
+        needs: tests
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout code
+              uses: actions/checkout@v6
+            - name: Load & Cache Dependencies
+              id: load-cache-deps
+              uses: ./.github/workflows/actions/cache-deps
+              with:
+                caching: "true"
+            - name: Output Cache Status
+              run: echo "Used cache ${{steps.load-cache-deps.outputs.used-cache}}"
+            - name: Run Linter
+              run: pnpm lint
+            - name: Lint Status
+              run: echo "Linting completed successfully"
+    build:
+        needs: [tests, lint]
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout code
+              uses: actions/checkout@v6
+            - name: Load & Cache Dependencies
+              id: load-cache-deps
+              uses: ./.github/workflows/actions/cache-deps
+              with:
+                caching: "true"
+            - name: Output Cache Status
+              run: echo "Used cache ${{steps.load-cache-deps.outputs.used-cache}}"
+            - name: Build Project
+              run: pnpm build
+            - name: Build Status
+              run: echo "Build completed successfully"

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+    "cSpell.words": [
+        "gsap",
+        "oklch"
+    ]
+}

components.json

@@ -18,5 +18,7 @@
     "lib": "@/lib",
     "hooks": "@/hooks"
   },
-  "registries": {}
+  "registries": {
+    "@react-bits": "https://reactbits.dev/r/{name}.json"
+  }
 }

eslint.config.mjs

@@ -11,13 +11,22 @@ const compat = new FlatCompat({
 
 const eslintConfig = [
   ...compat.extends("next/core-web-vitals", "next/typescript"),
+ {
+    rules: {
+      "@typescript-eslint/ban-ts-comment": ["error", {
+        "ts-nocheck": false,
+      }],
+      " @typescript-eslint/no-unused-expressions": "off",
+    },
+  },
   {
     ignores: [
       "node_modules/**",
       ".next/**",
       "out/**",
       "build/**",
       "next-env.d.ts",
+      "coverage/**",
     ],
   },
 ];

package.json

@@ -7,6 +7,8 @@
     "build": "next build",
     "start": "next start",
     "lint": "eslint",
+    "test": "vitest",
+    "coverage": "vitest run --coverage",
     "db:generate": "drizzle-kit generate --schema ./src/db/schema.ts --out=./src/db/migrations --dialect postgresql",
     "db:push": "drizzle-kit push",
     "db:migrate": "drizzle-kit migrate",
@@ -41,9 +43,11 @@
     "cypress-plugin-xhr-toggle": "^1.2.1",
     "date-fns": "^4.1.0",
     "drizzle-orm": "^0.44.6",
+    "gsap": "^3.14.2",
     "lucide-react": "^0.544.0",
-    "motion": "^12.23.22",
+    "motion": "^12.23.12",
     "next": "15.5.4",
+    "next-router-mock": "^1.0.4",
     "next-themes": "^0.4.6",
     "nextjs-toploader": "^3.9.17",
     "react": "19.1.0",
@@ -60,20 +64,30 @@
     "@eslint/eslintrc": "^3",
     "@faker-js/faker": "^10.1.0",
     "@tailwindcss/postcss": "^4",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.1",
+    "@testing-library/user-event": "^14.6.1",
     "@types/cypress-dotenv": "^3.0.0",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
+    "@types/testing-library__jest-dom": "^6.0.0",
+    "@vitejs/plugin-react": "^5.1.2",
+    "@vitest/coverage-v8": "4.0.16",
     "cypress": "^15.5.0",
     "cypress-dotenv": "^3.0.1",
     "dotenv": "^17.2.3",
     "drizzle-kit": "^0.31.5",
     "eslint": "^9",
     "eslint-config-next": "15.5.4",
+    "jsdom": "^27.3.0",
     "shadcn": "^3.3.1",
     "tailwindcss": "^4",
     "tsx": "^4.20.6",
     "tw-animate-css": "^1.4.0",
-    "typescript": "^5"
+    "typescript": "^5",
+    "vite-tsconfig-paths": "^6.0.1",
+    "vitest": "^4.0.16"
   }
 }