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/actions/e2e-tests/action.yml

@@ -0,0 +1,64 @@
+name: 'E2E Tests'
+description: 'Run end-to-end tests with Cypress'
+
+inputs:
+  database-url:
+    description: 'Database connection URL'
+    required: true
+  better-auth-secret:
+    description: 'Better Auth secret key'
+    required: true
+  better-auth-url:
+    description: 'Better Auth URL'
+    required: false
+    default: 'http://localhost:3000'
+  better-auth-trusted-origins:
+    description: 'Better Auth trusted origins'
+    required: false
+    default: 'http://localhost:3000,http://127.0.0.1:3000'
+  resend-api-key:
+    description: 'Resend API key'
+    required: true
+  base-url:
+    description: 'Base URL for the application'
+    required: false
+    default: 'http://localhost:3000'
+  prod-base-url:
+    description: 'Production base URL'
+    required: true
+  test-email:
+    description: 'Test user email'
+    required: true
+  test-password:
+    description: 'Test user password'
+    required: true
+
+runs:
+  using: 'composite'
+  steps:
+    - name: Install Cypress
+      shell: bash
+      run: pnpm add cypress --save-dev && pnpm cypress install
+
+    - name: Run E2E Tests
+      shell: bash
+      env:
+        DATABASE_URL: ${{ inputs.database-url }}
+        BETTER_AUTH_SECRET: ${{ inputs.better-auth-secret }}
+        BETTER_AUTH_URL: ${{ inputs.better-auth-url }}
+        BETTER_AUTH_TRUSTED_ORIGINS: ${{ inputs.better-auth-trusted-origins }}
+        RESEND_API_KEY: ${{ inputs.resend-api-key }}
+        BASE_URL: ${{ inputs.base-url }}
+        PROD_BASE_URL: ${{ inputs.prod-base-url }}
+        TEST_EMAIL: ${{ inputs.test-email }}
+        TEST_PASSWORD: ${{ inputs.test-password }}
+      run: pnpm dlx start-server-and-test "pnpm dev" http://localhost:3000 "pnpm cypress run --browser chrome"
+
+    - name: Upload Cypress Videos and Screenshots on Failure
+      if: failure()
+      uses: actions/upload-artifact@v4
+      with:
+        name: cypress-artifacts
+        path: |
+          cypress/videos
+          cypress/screenshots

.github/workflows/main.yml

@@ -0,0 +1,101 @@
+name: "CI Pipeline"
+on:
+  push:
+    branches:
+        [main]
+  pull_request:
+    branches:
+        [main] 
+
+jobs:
+    tests:
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout code
+              uses: actions/checkout@v4
+            - 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
+              env:
+                DATABASE_URL: ${{ secrets.DATABASE_URL }}
+                BETTER_AUTH_SECRET: ${{ secrets.BETTER_AUTH_SECRET }}
+                BETTER_AUTH_URL: http://localhost:3000
+                BETTER_AUTH_TRUSTED_ORIGINS: "http://localhost:3000,http://127.0.0.1:3000"
+                RESEND_API_KEY: ${{ secrets.RESEND_API_KEY }}
+                BASE_URL: http://localhost:3000
+                PROD_BASE_URL: ${{ secrets.PROD_BASE_URL }}
+              run: pnpm test
+    e2e-tests:
+        needs: tests
+        runs-on: ubuntu-latest
+        timeout-minutes: 25
+        container:
+          image: cypress/browsers:latest
+        steps:
+            - name: Checkout code
+              uses: actions/checkout@v4
+            - 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 E2E Tests
+              uses: ./.github/workflows/actions/e2e-tests
+              with:
+                database-url: ${{ secrets.DATABASE_URL }}
+                better-auth-secret: ${{ secrets.BETTER_AUTH_SECRET }}
+                resend-api-key: ${{ secrets.RESEND_API_KEY }}
+                prod-base-url: ${{ secrets.PROD_BASE_URL }}
+                test-email: ${{ secrets.TEST_EMAIL }}
+                test-password: ${{ secrets.TEST_PASSWORD }}
+
+    lint:
+        needs: [tests, e2e-tests]
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout code
+              uses: actions/checkout@v4
+            - 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, e2e-tests]
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout code
+              uses: actions/checkout@v4
+            - 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
+              env:
+                DATABASE_URL: ${{ secrets.DATABASE_URL }}
+                BETTER_AUTH_SECRET: ${{ secrets.BETTER_AUTH_SECRET }}
+                BETTER_AUTH_URL: http://localhost:3000
+                BETTER_AUTH_TRUSTED_ORIGINS: "http://localhost:3000,http://127.0.0.1:3000"
+                RESEND_API_KEY: ${{ secrets.RESEND_API_KEY }}
+                BASE_URL: http://localhost:3000
+                PROD_BASE_URL: ${{ secrets.PROD_BASE_URL }}
+              run: pnpm build
+            - name: Build Status
+              run: echo "Build completed successfully"
+

.gitignore

@@ -39,3 +39,4 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+cypress/downloads

.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"
+  }
 }