Edit apps/web/app/(app)/environments/[environmentId]/settings/lookandfeel/components/UnifiedStyling.tsx

.devcontainer/devcontainer.json

@@ -12,8 +12,8 @@
     // Configure properties specific to VS Code.
     "vscode": {
       // Add the IDs of extensions you want installed when the container is created.
-      "extensions": ["dbaeumer.vscode-eslint"]
-    }
+      "extensions": ["dbaeumer.vscode-eslint"],
+    },
   },
 
   // Use 'forwardPorts' to make a list of ports inside the container available locally.
@@ -25,5 +25,5 @@
   "postAttachCommand": "pnpm dev --filter=web... --filter=demo...",
 
   // Comment out to connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
-  "remoteUser": "node"
+  "remoteUser": "node",
 }

.env.example

@@ -56,14 +56,11 @@ SMTP_PASSWORD=smtpPassword
 
 # Uncomment the variables you would like to use and customize the values.
 
-# Custom local storage path for file uploads
-#UPLOADS_DIR=
-
 ##############
 # S3 STORAGE #
 ##############
 
-# S3 Storage is required for the file upload in serverless environments like Vercel
+# S3 Storage is required for the file uplaod in serverless environments like Vercel
 S3_ACCESS_KEY=
 S3_SECRET_KEY=
 S3_REGION=
@@ -147,10 +144,6 @@ GOOGLE_SHEETS_REDIRECT_URL=
 # Oauth credentials for Airtable integration
 AIRTABLE_CLIENT_ID=
 
-# Oauth credentials for Slack integration
-SLACK_CLIENT_ID=
-SLACK_CLIENT_SECRET=
-
 # Enterprise License Key
 ENTERPRISE_LICENSE_KEY=
 
@@ -169,15 +162,3 @@ ENTERPRISE_LICENSE_KEY=
 
 # Ignore Rate Limiting across the Formbricks app
 # RATE_LIMITING_DISABLED=1
-
-# OpenTelemetry URL for tracing
-# OPENTELEMETRY_LISTENER_URL=http://localhost:4318/v1/traces
-
-# Unsplash API Key
-UNSPLASH_ACCESS_KEY=
-
-# The below is used for Next Caching (uses In-Memory from Next Cache if not provided)
-# REDIS_URL:
-
-# The below is used for Rate Limiting (uses In-Memory LRU Cache if not provided) (You can use a service like Webdis for this)
-# REDIS_HTTP_URL:

.github/PULL_REQUEST_TEMPLATE.md

@@ -32,7 +32,6 @@ Fixes # (issue)
 - [ ] Removed all `console.logs`
 - [ ] Merged the latest changes from main onto my branch with `git pull origin main`
 - [ ] My changes don't cause any responsiveness issues
-- [ ] First PR at Formbricks? [Please sign the CLA!](https://cla-assistant.io/formbricks/formbricks) Without it we wont be able to merge it 🙏
 
 ### Appreciated
 

.github/actions/cache-build-web/action.yml

@@ -1,21 +1,11 @@
 name: Build & Cache Web App
 
-on:
-  workflow_dispatch:
-    inputs:
-      e2e_testing_mode:
-        description: "Set E2E Testing Mode"
-        required: false
-        default: "0"
-
 runs:
   using: "composite"
   steps:
     - name: Checkout repo
       uses: actions/checkout@v3
 
-    - uses: ./.github/actions/dangerous-git-checkout
-
     - name: Cache Build
       uses: actions/cache@v3
       id: cache-build
@@ -23,12 +13,13 @@ runs:
         cache-name: prod-build
         key-1: ${{ hashFiles('pnpm-lock.yaml') }}
         key-2: ${{ hashFiles('apps/**/**.[jt]s', 'apps/**/**.[jt]sx', 'packages/**/**.[jt]s', 'packages/**/**.[jt]sx', '!**/node_modules') }}
+        key-3: ${{ github.event.pull_request.number || github.ref }}
       with:
         path: |
           ${{ github.workspace }}/apps/web/.next
           **/.turbo/**
           **/dist/**
-        key: ${{ runner.os }}-${{ env.cache-name }}-${{ env.key-1 }}-${{ env.key-2 }}
+        key: ${{ runner.os }}-${{ env.cache-name }}-${{ env.key-1 }}-${{ env.key-2 }}-${{ env.key-3 }}
 
     - name: Setup Node.js 20.x
       uses: actions/setup-node@v3
@@ -49,16 +40,10 @@ runs:
       run: cp .env.example .env
       shell: bash
 
-    - name: Add E2E Testing Mode
-      run: |
-        echo "E2E_TESTING=${{ inputs.e2e_testing_mode }}" >> $GITHUB_ENV
-      shell: bash
-
     - name: Generate Random ENCRYPTION_KEY
       run: |
         SECRET=$(openssl rand -hex 32)
         echo "ENCRYPTION_KEY=$SECRET" >> $GITHUB_ENV
-        echo "ENTERPRISE_LICENSE_KEY=$SECRET" >> $GITHUB_ENV
       shell: bash
 
     - run: |

.github/workflows/cron-closeOnDate.yml

@@ -1,12 +1,11 @@
-name: Cron - Survey status update
+name: Cron - closeOnDate
 
 on:
-  workflow_dispatch:
   # "Scheduled workflows run on the latest commit on the default or base branch."
   # — https://docs.github.com/en/actions/learn-github-actions/events-that-trigger-workflows#schedule
-  # schedule:
-  # Runs “At 00:00.” (see https://crontab.guru)
-  # - cron: "0 0 * * *"
+  schedule:
+    # Runs “At 00:00.” (see https://crontab.guru)
+    - cron: "0 0 * * *"
 jobs:
   cron-weeklySummary:
     env:
@@ -17,7 +16,7 @@ jobs:
       - name: cURL request
         if: ${{ env.APP_URL && env.CRON_SECRET }}
         run: |
-          curl ${{ env.APP_URL }}/api/cron/survey-status \
+          curl ${{ env.APP_URL }}/api/cron/close_surveys \
             -X POST \
             -H 'content-type: application/json' \
             -H 'x-api-key: ${{ env.CRON_SECRET }}' \

.github/workflows/cron-reportUsageToStripe.yml

@@ -1,12 +1,11 @@
-name: Cron - Report usage to Stripe
+name: Cron - reportUsageToStripe
 
 on:
-  workflow_dispatch:
   # "Scheduled workflows run on the latest commit on the default or base branch."
   # — https://docs.github.com/en/actions/learn-github-actions/events-that-trigger-workflows#schedule
-  # schedule:
-  # This will run the job at 20:00 UTC every day of every month.
-  # - cron: "0 20 * * *"
+  schedule:
+    # This will run the job at 20:00 UTC every day of every month.
+    - cron: "0 20 * * *"
 jobs:
   cron-reportUsageToStripe:
     env:

.github/workflows/cron-weeklySummary.yml

@@ -1,12 +1,11 @@
-name: Cron - Weekly summary
+name: Cron - weeklySummary
 
 on:
-  workflow_dispatch:
   # "Scheduled workflows run on the latest commit on the default or base branch."
   # — https://docs.github.com/en/actions/learn-github-actions/events-that-trigger-workflows#schedule
-  # schedule:
-  # Runs “At 08:00 on Monday.” (see https://crontab.guru)
-  # - cron: "0 8 * * 1"
+  schedule:
+    # Runs “At 08:00 on Monday.” (see https://crontab.guru)
+    - cron: "0 8 * * 1"
 jobs:
   cron-weeklySummary:
     env:
@@ -17,7 +16,7 @@ jobs:
       - name: cURL request
         if: ${{ env.APP_URL && env.CRON_SECRET }}
         run: |
-          curl ${{ env.APP_URL }}/api/cron/weekly-summary \
+          curl ${{ env.APP_URL }}/api/cron/weekly_summary \
             -X POST \
             -H 'content-type: application/json' \
             -H 'x-api-key: ${{ env.CRON_SECRET }}' \

.github/workflows/e2e.yml

@@ -13,8 +13,6 @@ jobs:
 
       - name: Build & Cache Web Binaries
         uses: ./.github/actions/cache-build-web
-        with:
-          e2e_testing_mode: "1"
 
       - name: Install pnpm
         uses: pnpm/action-setup@v2

.github/workflows/ecs-deployment.yml

@@ -0,0 +1,129 @@
+name: ECS
+
+# This workflow uses actions that are not certified by GitHub.
+# They are provided by a third-party and are governed by
+# separate terms of service, privacy policy, and support
+# documentation.
+
+on:
+  push:
+    branches: [main]
+  workflow_dispatch: # Add manual trigger support
+
+env:
+  REGISTRY: ghcr.io
+  IMAGE_NAME: formbricks/formbricks-experimental
+  DATABASE_URL: "postgresql://postgres:postgres@localhost:5432/formbricks?schema=public"
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+      id-token: write  # Only necessary for sigstore/fulcio outside PRs
+
+    steps:
+      - name: Generate Secrets
+        run: |
+          echo "NEXTAUTH_SECRET=$(openssl rand -hex 32)" >> $GITHUB_ENV
+          echo "ENCRYPTION_KEY=$(openssl rand -hex 32)" >> $GITHUB_ENV
+
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Set up Depot CLI
+        uses: depot/setup-action@v1
+
+      # https://github.com/sigstore/cosign-installer
+      - name: Install cosign
+        uses: sigstore/cosign-installer@6e04d228eb30da1757ee4e1dd75a0ec73a653e06 #v3.1.1
+        with:
+          cosign-release: "v2.1.1"
+
+      # https://github.com/docker/login-action
+      - name: Log into registry
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      # Extract metadata (tags, labels) for Docker
+      # https://github.com/docker/metadata-action
+      - name: Extract Docker metadata
+        id: meta
+        uses: docker/metadata-action@v5 # v5.0.0
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+          tags: |
+            type=sha,format=long
+
+      # Build and push Docker image with Buildx
+      # https://github.com/docker/build-push-action
+      - name: Build and push Docker image
+        id: build-and-push
+        uses: depot/build-push-action@v1
+        env:
+          NEXT_PUBLIC_SENTRY_DSN: ${{ secrets.NEXT_PUBLIC_SENTRY_DSN }}
+        with:
+          project: tw0fqmsx3c
+          token: ${{ secrets.DEPOT_PROJECT_TOKEN }}
+          context: .
+          file: ./apps/web/Dockerfile
+          platforms: linux/amd64,linux/arm64
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
+          build-args: |
+            NEXTAUTH_SECRET=${{ env.NEXTAUTH_SECRET }}
+            DATABASE_URL=${{ env.DATABASE_URL }}
+            ENCRYPTION_KEY=${{ env.ENCRYPTION_KEY }}
+            NEXT_PUBLIC_SENTRY_DSN=${{ env.NEXT_PUBLIC_SENTRY_DSN }}
+
+      - name: Sign the images with GitHub OIDC Token
+        env:
+          DIGEST: ${{ steps.build-and-push.outputs.digest }}
+          TAGS: ${{ steps.meta.outputs.tags }}
+        run: |
+          images=""
+          for tag in ${TAGS}; do
+            images+="${tag}@${DIGEST} "
+          done
+          cosign sign --yes ${images}
+    
+    outputs:
+      image_tag_sha: ${{ steps.meta.outputs.tags }}
+  
+  deploy:
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - name: Configure AWS credentials
+        uses: aws-actions/configure-aws-credentials@v1
+        with:
+          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          aws-region: ${{ secrets.AWS_REGION }}
+          
+      - name: Download task definition
+        run: |
+          aws ecs describe-task-definition --task-definition prod-webapp-ecs-service --query taskDefinition > task-definition.json
+
+      - name: Fill in the new image ID in the Amazon ECS task definition
+        id: task-def
+        uses: aws-actions/amazon-ecs-render-task-definition@v1
+        with:
+          task-definition: task-definition.json
+          container-name: prod-webapp-container
+          image: ${{ needs.build.outputs.image_tag_sha }}
+
+      - name: Deploy Amazon ECS task definition
+        uses: aws-actions/amazon-ecs-deploy-task-definition@v1
+        with:
+          task-definition: ${{ steps.task-def.outputs.task-definition }}
+          service: prod-webapp-ecs-service
+          cluster: prod-core-infra-ecs-cluster
+          wait-for-service-stability: true

.github/workflows/kamal-deploy.yml

@@ -1,131 +0,0 @@
-name: Kamal Deploy
-concurrency:
-  group: deploy-to-kamal
-  cancel-in-progress: false
-
-on:
-  workflow_dispatch:
-  push:
-    branches:
-      - main
-
-jobs:
-  Deploy:
-    runs-on: ubuntu-latest
-    environment: production
-    env:
-      DOCKER_BUILDKIT: 1
-      IS_FORMBRICKS_CLOUD: ${{ vars.IS_FORMBRICKS_CLOUD }}
-      WEBAPP_URL: ${{ vars.WEBAPP_URL }}
-      MIGRATE_DATABASE_URL: ${{ secrets.MIGRATE_DATABASE_URL }}
-      NEXTAUTH_URL: ${{ vars.NEXTAUTH_URL }}
-      DATABASE_URL: ${{ secrets.DATABASE_URL }}
-      NEXTAUTH_SECRET: ${{ secrets.NEXTAUTH_SECRET }}
-      ENCRYPTION_KEY: ${{ secrets.ENCRYPTION_KEY }}
-      SHORT_URL_BASE: ${{ vars.SHORT_URL_BASE }}
-      MAIL_FROM: ${{ secrets.MAIL_FROM }}
-      SMTP_HOST: ${{ secrets.SMTP_HOST }}
-      SMTP_PORT: ${{ secrets.SMTP_PORT }}
-      SMTP_USER: ${{ secrets.SMTP_USER }}
-      SMTP_PASSWORD: ${{ secrets.SMTP_PASSWORD }}
-      PRIVACY_URL: ${{ vars.PRIVACY_URL }}
-      TERMS_URL: ${{ vars.TERMS_URL }}
-      IMPRINT_URL: ${{ vars.IMPRINT_URL }}
-      GITHUB_ID: ${{ secrets.FB_GITHUB_ID }}
-      GITHUB_SECRET: ${{ secrets.FB_GITHUB_SECRET }}
-      GOOGLE_CLIENT_ID: ${{ secrets.GOOGLE_CLIENT_ID }}
-      GOOGLE_CLIENT_SECRET: ${{ secrets.GOOGLE_CLIENT_SECRET }}
-      AZUREAD_CLIENT_ID: ${{ secrets.AZUREAD_CLIENT_ID }}
-      AZUREAD_CLIENT_SECRET: ${{ secrets.AZUREAD_CLIENT_SECRET }}
-      AZUREAD_TENANT_ID: ${{ secrets.AZUREAD_TENANT_ID }}
-      OIDC_CLIENT_ID: ${{ secrets.OIDC_CLIENT_ID }}
-      OIDC_CLIENT_SECRET: ${{ secrets.OIDC_CLIENT_SECRET }}
-      OIDC_ISSUER: ${{ secrets.OIDC_ISSUER }}
-      OIDC_DISPLAY_NAME: ${{ secrets.OIDC_DISPLAY_NAME }}
-      OIDC_SIGNING_ALGORITHM: ${{ secrets.OIDC_SIGNING_ALGORITHM }}
-      CRON_SECRET: ${{ secrets.CRON_SECRET }}
-      ASSET_PREFIX_URL: ${{ vars.ASSET_PREFIX_URL }}
-      NOTION_OAUTH_CLIENT_ID: ${{ secrets.NOTION_OAUTH_CLIENT_ID }}
-      NOTION_OAUTH_CLIENT_SECRET: ${{ secrets.NOTION_OAUTH_CLIENT_SECRET }}
-      SLACK_CLIENT_ID: ${{ secrets.SLACK_CLIENT_ID }}
-      SLACK_CLIENT_SECRET: ${{ secrets.SLACK_CLIENT_SECRET }}
-      STRIPE_SECRET_KEY: ${{ secrets.STRIPE_SECRET_KEY }}
-      STRIPE_WEBHOOK_SECRET: ${{ secrets.STRIPE_WEBHOOK_SECRET }}
-      GOOGLE_SHEETS_CLIENT_ID: ${{ secrets.GOOGLE_SHEETS_CLIENT_ID }}
-      GOOGLE_SHEETS_CLIENT_SECRET: ${{ secrets.GOOGLE_SHEETS_CLIENT_SECRET }}
-      GOOGLE_SHEETS_REDIRECT_URL: ${{ secrets.GOOGLE_SHEETS_REDIRECT_URL }}
-      AIRTABLE_CLIENT_ID: ${{ secrets.AIRTABLE_CLIENT_ID }}
-      ENTERPRISE_LICENSE_KEY: ${{ secrets.ENTERPRISE_LICENSE_KEY }}
-      DEFAULT_TEAM_ID: ${{ vars.DEFAULT_TEAM_ID }}
-      ONBOARDING_DISABLED: ${{ vars.ONBOARDING_DISABLED }}
-      CUSTOMER_IO_API_KEY: ${{ secrets.CUSTOMER_IO_API_KEY }}
-      CUSTOMER_IO_SITE_ID: ${{ secrets.CUSTOMER_IO_SITE_ID }}
-      NEXT_PUBLIC_POSTHOG_API_KEY: ${{ vars.NEXT_PUBLIC_POSTHOG_API_KEY }}
-      NEXT_PUBLIC_POSTHOG_API_HOST: ${{ vars.NEXT_PUBLIC_POSTHOG_API_HOST }}
-      NEXT_PUBLIC_FORMBRICKS_API_HOST: ${{ vars.NEXT_PUBLIC_FORMBRICKS_API_HOST }}
-      NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID: ${{ vars.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID }}
-      NEXT_PUBLIC_FORMBRICKS_ONBOARDING_SURVEY_ID: ${{ vars.NEXT_PUBLIC_FORMBRICKS_ONBOARDING_SURVEY_ID }}
-      NEXT_PUBLIC_SENTRY_DSN: ${{ vars.NEXT_PUBLIC_SENTRY_DSN }}
-      SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
-      NODE_ENV: production
-      CLOUDFLARE_EMAIL: ${{ secrets.CLOUDFLARE_EMAIL }}
-      CLOUDFLARE_DNS_API_TOKEN: ${{ secrets.CLOUDFLARE_DNS_API_TOKEN }}
-      S3_ACCESS_KEY: ${{ secrets.S3_ACCESS_KEY }}
-      S3_SECRET_KEY: ${{ secrets.S3_SECRET_KEY }}
-      S3_REGION: ${{ vars.S3_REGION }}
-      S3_BUCKET_NAME: ${{ vars.S3_BUCKET_NAME }}
-      OPENTELEMETRY_LISTENER_URL: ${{ vars.OPENTELEMETRY_LISTENER_URL }}
-      RATE_LIMITING_DISABLED: ${{ vars.RATE_LIMITING_DISABLED }}
-      KAMAL_REGISTRY_PASSWORD: ${{ secrets.KAMAL_REGISTRY_PASSWORD }}
-      DB_HOST: ${{ secrets.DB_HOST }}
-      DB_USER: ${{ secrets.DB_USER }}
-      DB_PASSWORD: ${{ secrets.DB_PASSWORD }}
-      DB_NAME: ${{ secrets.DB_NAME }}
-      REDIS_URL: ${{ secrets.REDIS_URL }}
-
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v3
-
-      - name: Set up Ruby
-        uses: ruby/setup-ruby@v1
-        with:
-          ruby-version: 3.3.0
-          bundler-cache: true
-
-      - name: Install dependencies
-        run: |
-          gem install kamal
-
-      - uses: webfactory/ssh-agent@v0.9.0
-        with:
-          ssh-private-key: ${{ secrets.SSH_PRIVATE_KEY }}
-
-      - name: Set up Docker Buildx
-        id: buildx
-        uses: docker/setup-buildx-action@v2
-
-      - name: Create builder
-        run: docker buildx create --use --name formbricks-gh-actions-builder
-        if: steps.buildx.outputs.should_create_builder == 'true'
-
-      - name: Push env variables to Kamal
-        run: |
-          kamal() { command kamal "$@" -c kamal/deploy.yml; }
-          kamal env push
-
-      - name: Run deploy command
-        run: |
-          kamal() { command kamal "$@" -c kamal/deploy.yml; }
-          set +e
-          DEPLOY_OUTPUT=$(kamal deploy 2>&1)
-          DEPLOY_EXIT_CODE=$?
-          echo "$DEPLOY_OUTPUT"
-          if [[ "$DEPLOY_OUTPUT" == *"container not unhealthy (healthy)"* ]]; then
-            echo "Deployment reported healthy container. Considering as success."
-            kamal lock release
-            exit 0
-          else
-            exit $DEPLOY_EXIT_CODE
-          fi
-        shell: bash

.github/workflows/kamal-setup.yml

@@ -1,128 +0,0 @@
-name: Kamal Setup
-concurrency:
-  group: setup-kamal
-  cancel-in-progress: false
-
-on:
-  workflow_dispatch: # Only to be triggered when accessories are updated
-
-jobs:
-  Setup:
-    runs-on: ubuntu-latest
-    environment: production
-    env:
-      DOCKER_BUILDKIT: 1
-      IS_FORMBRICKS_CLOUD: ${{ vars.IS_FORMBRICKS_CLOUD }}
-      WEBAPP_URL: ${{ vars.WEBAPP_URL }}
-      NEXTAUTH_URL: ${{ vars.NEXTAUTH_URL }}
-      DATABASE_URL: ${{ secrets.DATABASE_URL }}
-      MIGRATE_DATABASE_URL: ${{ secrets.MIGRATE_DATABASE_URL }}
-      NEXTAUTH_SECRET: ${{ secrets.NEXTAUTH_SECRET }}
-      ENCRYPTION_KEY: ${{ secrets.ENCRYPTION_KEY }}
-      SHORT_URL_BASE: ${{ vars.SHORT_URL_BASE }}
-      MAIL_FROM: ${{ secrets.MAIL_FROM }}
-      SMTP_HOST: ${{ secrets.SMTP_HOST }}
-      SMTP_PORT: ${{ secrets.SMTP_PORT }}
-      SMTP_USER: ${{ secrets.SMTP_USER }}
-      SMTP_PASSWORD: ${{ secrets.SMTP_PASSWORD }}
-      PRIVACY_URL: ${{ vars.PRIVACY_URL }}
-      TERMS_URL: ${{ vars.TERMS_URL }}
-      IMPRINT_URL: ${{ vars.IMPRINT_URL }}
-      GITHUB_ID: ${{ secrets.FB_GITHUB_ID }}
-      GITHUB_SECRET: ${{ secrets.FB_GITHUB_SECRET }}
-      GOOGLE_CLIENT_ID: ${{ secrets.GOOGLE_CLIENT_ID }}
-      GOOGLE_CLIENT_SECRET: ${{ secrets.GOOGLE_CLIENT_SECRET }}
-      AZUREAD_CLIENT_ID: ${{ secrets.AZUREAD_CLIENT_ID }}
-      AZUREAD_CLIENT_SECRET: ${{ secrets.AZUREAD_CLIENT_SECRET }}
-      AZUREAD_TENANT_ID: ${{ secrets.AZUREAD_TENANT_ID }}
-      OIDC_CLIENT_ID: ${{ secrets.OIDC_CLIENT_ID }}
-      OIDC_CLIENT_SECRET: ${{ secrets.OIDC_CLIENT_SECRET }}
-      OIDC_ISSUER: ${{ secrets.OIDC_ISSUER }}
-      OIDC_DISPLAY_NAME: ${{ secrets.OIDC_DISPLAY_NAME }}
-      OIDC_SIGNING_ALGORITHM: ${{ secrets.OIDC_SIGNING_ALGORITHM }}
-      CRON_SECRET: ${{ secrets.CRON_SECRET }}
-      ASSET_PREFIX_URL: ${{ vars.ASSET_PREFIX_URL }}
-      NOTION_OAUTH_CLIENT_ID: ${{ secrets.NOTION_OAUTH_CLIENT_ID }}
-      NOTION_OAUTH_CLIENT_SECRET: ${{ secrets.NOTION_OAUTH_CLIENT_SECRET }}
-      SLACK_CLIENT_ID: ${{ secrets.SLACK_CLIENT_ID }}
-      SLACK_CLIENT_SECRET: ${{ secrets.SLACK_CLIENT_SECRET }}
-      STRIPE_SECRET_KEY: ${{ secrets.STRIPE_SECRET_KEY }}
-      STRIPE_WEBHOOK_SECRET: ${{ secrets.STRIPE_WEBHOOK_SECRET }}
-      GOOGLE_SHEETS_CLIENT_ID: ${{ secrets.GOOGLE_SHEETS_CLIENT_ID }}
-      GOOGLE_SHEETS_CLIENT_SECRET: ${{ secrets.GOOGLE_SHEETS_CLIENT_SECRET }}
-      GOOGLE_SHEETS_REDIRECT_URL: ${{ secrets.GOOGLE_SHEETS_REDIRECT_URL }}
-      AIRTABLE_CLIENT_ID: ${{ secrets.AIRTABLE_CLIENT_ID }}
-      ENTERPRISE_LICENSE_KEY: ${{ secrets.ENTERPRISE_LICENSE_KEY }}
-      DEFAULT_TEAM_ID: ${{ vars.DEFAULT_TEAM_ID }}
-      ONBOARDING_DISABLED: ${{ vars.ONBOARDING_DISABLED }}
-      CUSTOMER_IO_API_KEY: ${{ secrets.CUSTOMER_IO_API_KEY }}
-      CUSTOMER_IO_SITE_ID: ${{ secrets.CUSTOMER_IO_SITE_ID }}
-      NEXT_PUBLIC_POSTHOG_API_KEY: ${{ vars.NEXT_PUBLIC_POSTHOG_API_KEY }}
-      NEXT_PUBLIC_POSTHOG_API_HOST: ${{ vars.NEXT_PUBLIC_POSTHOG_API_HOST }}
-      NEXT_PUBLIC_FORMBRICKS_API_HOST: ${{ vars.NEXT_PUBLIC_FORMBRICKS_API_HOST }}
-      NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID: ${{ vars.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID }}
-      NEXT_PUBLIC_FORMBRICKS_ONBOARDING_SURVEY_ID: ${{ vars.NEXT_PUBLIC_FORMBRICKS_ONBOARDING_SURVEY_ID }}
-      NEXT_PUBLIC_SENTRY_DSN: ${{ vars.NEXT_PUBLIC_SENTRY_DSN }}
-      SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
-      NODE_ENV: production
-      CLOUDFLARE_EMAIL: ${{ secrets.CLOUDFLARE_EMAIL }}
-      CLOUDFLARE_DNS_API_TOKEN: ${{ secrets.CLOUDFLARE_DNS_API_TOKEN }}
-      S3_ACCESS_KEY: ${{ secrets.S3_ACCESS_KEY }}
-      S3_SECRET_KEY: ${{ secrets.S3_SECRET_KEY }}
-      S3_REGION: ${{ vars.S3_REGION }}
-      S3_BUCKET_NAME: ${{ vars.S3_BUCKET_NAME }}
-      OPENTELEMETRY_LISTENER_URL: ${{ vars.OPENTELEMETRY_LISTENER_URL }}
-      RATE_LIMITING_DISABLED: ${{ vars.RATE_LIMITING_DISABLED }}
-      KAMAL_REGISTRY_PASSWORD: ${{ secrets.KAMAL_REGISTRY_PASSWORD }}
-      DB_HOST: ${{ secrets.DB_HOST }}
-      DB_USER: ${{ secrets.DB_USER }}
-      DB_PASSWORD: ${{ secrets.DB_PASSWORD }}
-      DB_NAME: ${{ secrets.DB_NAME }}
-      REDIS_URL: ${{ secrets.REDIS_URL }}
-
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v3
-
-      - name: Set up Ruby
-        uses: ruby/setup-ruby@v1
-        with:
-          ruby-version: 3.3.0
-          bundler-cache: true
-
-      - name: Install dependencies
-        run: |
-          gem install kamal
-
-      - uses: webfactory/ssh-agent@v0.9.0
-        with:
-          ssh-private-key: ${{ secrets.SSH_PRIVATE_KEY }}
-
-      - name: Set up Docker Buildx
-        id: buildx
-        uses: docker/setup-buildx-action@v2
-
-      - name: Create builder
-        run: docker buildx create --use --name formbricks-gh-actions-builder
-        if: steps.buildx.outputs.should_create_builder == 'true'
-
-      - name: Push env variables to Kamal
-        run: |
-          kamal() { command kamal "$@" -c kamal/deploy.yml; }
-          kamal env push
-
-      - name: Run setup command
-        run: |
-          kamal() { command kamal "$@" -c kamal/deploy.yml; }
-          set +e
-          DEPLOY_OUTPUT=$(kamal setup 2>&1)
-          DEPLOY_EXIT_CODE=$?
-          echo "$DEPLOY_OUTPUT"
-          if [[ "$DEPLOY_OUTPUT" == *"container not unhealthy (healthy)"* ]]; then
-            echo "Deployment reported healthy container. Considering as success."
-            kamal lock release
-            exit 0
-          else
-            exit $DEPLOY_EXIT_CODE
-          fi
-        shell: bash

.github/workflows/pr.yml

@@ -1,7 +1,7 @@
 name: PR Update
 
 on:
-  pull_request:
+  pull_request_target:
     branches:
       - main
   merge_group:
@@ -30,7 +30,7 @@ jobs:
               - "!(**.md|.github/CODEOWNERS)"
 
   test:
-    name: Run Unit Tests
+    name: Run Tests
     needs: [changes]
     if: ${{ needs.changes.outputs.has-files-requiring-all-checks == 'true' }}
     uses: ./.github/workflows/test.yml
@@ -58,7 +58,6 @@ jobs:
     secrets: inherit
 
   required:
-    name: PR Check Summary
     needs: [lint, test, build, e2e-test]
     if: always()
     runs-on: ubuntu-latest

.github/workflows/release-docker-github-data-migration.yml

@@ -33,7 +33,9 @@ jobs:
 
       - name: Install cosign
         if: github.event_name != 'pull_request'
-        uses: sigstore/cosign-installer@v3.5.0
+        uses: sigstore/cosign-installer@6e04d228eb30da1757ee4e1dd75a0ec73a653e06 #v3.1.1
+        with:
+          cosign-release: "v2.1.1"
 
       - name: Log in to GitHub Container Registry
         uses: docker/login-action@v3

.github/workflows/release-docker-github.yml

@@ -31,6 +31,16 @@ jobs:
       id-token: write
 
     steps:
+      - name: Generate Random NEXTAUTH_SECRET
+        run: |
+          SECRET=$(openssl rand -hex 32)
+          echo "NEXTAUTH_SECRET=$SECRET" >> $GITHUB_ENV
+
+      - name: Generate Random ENCRYPTION_KEY
+        run: |
+          SECRET=$(openssl rand -hex 32)
+          echo "ENCRYPTION_KEY=$SECRET" >> $GITHUB_ENV
+
       - name: Checkout repository
         uses: actions/checkout@v3
 
@@ -41,7 +51,9 @@ jobs:
       # https://github.com/sigstore/cosign-installer
       - name: Install cosign
         if: github.event_name != 'pull_request'
-        uses: sigstore/cosign-installer@v3.5.0
+        uses: sigstore/cosign-installer@6e04d228eb30da1757ee4e1dd75a0ec73a653e06 #v3.1.1
+        with:
+          cosign-release: "v2.1.1"
 
       # Login against a Docker registry except on PR
       # https://github.com/docker/login-action
@@ -77,6 +89,10 @@ jobs:
           labels: ${{ steps.meta.outputs.labels }}
           cache-from: type=gha
           cache-to: type=gha,mode=max
+          build-args: |
+            NEXTAUTH_SECRET=${{ env.NEXTAUTH_SECRET }}
+            DATABASE_URL=${{ env.DATABASE_URL }}
+            ENCRYPTION_KEY=${{ env.ENCRYPTION_KEY }}
 
       # Sign the resulting Docker image digest except on PRs.
       # This will only write to the public Rekor transparency log when the Docker

.github/workflows/release-docker.yml

@@ -14,6 +14,16 @@ jobs:
       TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
       DATABASE_URL: "postgresql://postgres:postgres@localhost:5432/formbricks?schema=public"
     steps:
+      - name: Generate Random NEXTAUTH_SECRET
+        run: |
+          SECRET=$(openssl rand -hex 32)
+          echo "NEXTAUTH_SECRET=$SECRET" >> $GITHUB_ENV
+
+      - name: Generate Random ENCRYPTION_KEY
+        run: |
+          SECRET=$(openssl rand -hex 32)
+          echo "ENCRYPTION_KEY=$SECRET" >> $GITHUB_ENV
+
       - name: Checkout Repo
         uses: actions/checkout@v2
 
@@ -42,3 +52,7 @@ jobs:
           tags: |
             ${{ secrets.DOCKER_USERNAME }}/formbricks:${{ env.RELEASE_TAG }}
             ${{ secrets.DOCKER_USERNAME }}/formbricks:latest
+          build-args: |
+            NEXTAUTH_SECRET=${{ env.NEXTAUTH_SECRET }}
+            DATABASE_URL=${{ env.DATABASE_URL }}
+            ENCRYPTION_KEY=${{ env.ENCRYPTION_KEY }}

.github/workflows/test.yml

@@ -3,7 +3,7 @@ on:
   workflow_call:
 jobs:
   build:
-    name: Unit Tests
+    name: Tests
     runs-on: ubuntu-latest
     timeout-minutes: 15
 

.gitignore

@@ -54,7 +54,3 @@ Zone.Identifier
 
 # uploads
 packages/lib/uploads
-
-# Vite Timestamps
-vite.config.*.timestamp-*
-

.kamal/hooks/post-deploy.sample

@@ -1,14 +0,0 @@
-#!/bin/sh
-
-# A sample post-deploy hook
-#
-# These environment variables are available:
-# KAMAL_RECORDED_AT
-# KAMAL_PERFORMER
-# KAMAL_VERSION
-# KAMAL_HOSTS
-# KAMAL_ROLE (if set)
-# KAMAL_DESTINATION (if set)
-# KAMAL_RUNTIME
-
-echo "$KAMAL_PERFORMER deployed $KAMAL_VERSION to $KAMAL_DESTINATION in $KAMAL_RUNTIME seconds"

.kamal/hooks/post-traefik-reboot.sample

@@ -1,3 +0,0 @@
-#!/bin/sh
-
-echo "Rebooted Traefik on $KAMAL_HOSTS"

.kamal/hooks/pre-build.sample

@@ -1,51 +0,0 @@
-#!/bin/sh
-
-# A sample pre-build hook
-#
-# Checks:
-# 1. We have a clean checkout
-# 2. A remote is configured
-# 3. The branch has been pushed to the remote
-# 4. The version we are deploying matches the remote
-#
-# These environment variables are available:
-# KAMAL_RECORDED_AT
-# KAMAL_PERFORMER
-# KAMAL_VERSION
-# KAMAL_HOSTS
-# KAMAL_ROLE (if set)
-# KAMAL_DESTINATION (if set)
-
-if [ -n "$(git status --porcelain)" ]; then
-  echo "Git checkout is not clean, aborting..." >&2
-  git status --porcelain >&2
-  exit 1
-fi
-
-first_remote=$(git remote)
-
-if [ -z "$first_remote" ]; then
-  echo "No git remote set, aborting..." >&2
-  exit 1
-fi
-
-current_branch=$(git branch --show-current)
-
-if [ -z "$current_branch" ]; then
-  echo "Not on a git branch, aborting..." >&2
-  exit 1
-fi
-
-remote_head=$(git ls-remote $first_remote --tags $current_branch | cut -f1)
-
-if [ -z "$remote_head" ]; then
-  echo "Branch not pushed to remote, aborting..." >&2
-  exit 1
-fi
-
-if [ "$KAMAL_VERSION" != "$remote_head" ]; then
-  echo "Version ($KAMAL_VERSION) does not match remote HEAD ($remote_head), aborting..." >&2
-  exit 1
-fi
-
-exit 0

.kamal/hooks/pre-connect.sample

@@ -1,47 +0,0 @@
-#!/usr/bin/env ruby
-
-# A sample pre-connect check
-#
-# Warms DNS before connecting to hosts in parallel
-#
-# These environment variables are available:
-# KAMAL_RECORDED_AT
-# KAMAL_PERFORMER
-# KAMAL_VERSION
-# KAMAL_HOSTS
-# KAMAL_ROLE (if set)
-# KAMAL_DESTINATION (if set)
-# KAMAL_RUNTIME
-
-hosts = ENV["KAMAL_HOSTS"].split(",")
-results = nil
-max = 3
-
-elapsed = Benchmark.realtime do
-  results = hosts.map do |host|
-    Thread.new do
-      tries = 1
-
-      begin
-        Socket.getaddrinfo(host, 0, Socket::AF_UNSPEC, Socket::SOCK_STREAM, nil, Socket::AI_CANONNAME)
-      rescue SocketError
-        if tries < max
-          puts "Retrying DNS warmup: #{host}"
-          tries += 1
-          sleep rand
-          retry
-        else
-          puts "DNS warmup failed: #{host}"
-          host
-        end
-      end
-
-      tries
-    end
-  end.map(&:value)
-end
-
-retries = results.sum - hosts.size
-nopes = results.count { |r| r == max }
-
-puts "Prewarmed %d DNS lookups in %.2f sec: %d retries, %d failures" % [ hosts.size, elapsed, retries, nopes ]

.kamal/hooks/pre-deploy.sample

@@ -1,109 +0,0 @@
-#!/usr/bin/env ruby
-
-# A sample pre-deploy hook
-#
-# Checks the Github status of the build, waiting for a pending build to complete for up to 720 seconds.
-#
-# Fails unless the combined status is "success"
-#
-# These environment variables are available:
-# KAMAL_RECORDED_AT
-# KAMAL_PERFORMER
-# KAMAL_VERSION
-# KAMAL_HOSTS
-# KAMAL_COMMAND
-# KAMAL_SUBCOMMAND
-# KAMAL_ROLE (if set)
-# KAMAL_DESTINATION (if set)
-
-# Only check the build status for production deployments
-if ENV["KAMAL_COMMAND"] == "rollback" || ENV["KAMAL_DESTINATION"] != "production"
-  exit 0
-end
-
-require "bundler/inline"
-
-# true = install gems so this is fast on repeat invocations
-gemfile(true, quiet: true) do
-  source "https://rubygems.org"
-
-  gem "octokit"
-  gem "faraday-retry"
-end
-
-MAX_ATTEMPTS = 72
-ATTEMPTS_GAP = 10
-
-def exit_with_error(message)
-  $stderr.puts message
-  exit 1
-end
-
-class GithubStatusChecks
-  attr_reader :remote_url, :git_sha, :github_client, :combined_status
-
-  def initialize
-    @remote_url = `git config --get remote.origin.url`.strip.delete_prefix("https://github.com/")
-    @git_sha = `git rev-parse HEAD`.strip
-    @github_client = Octokit::Client.new(access_token: ENV["GITHUB_TOKEN"])
-    refresh!
-  end
-
-  def refresh!
-    @combined_status = github_client.combined_status(remote_url, git_sha)
-  end
-
-  def state
-    combined_status[:state]
-  end
-
-  def first_status_url
-    first_status = combined_status[:statuses].find { |status| status[:state] == state }
-    first_status && first_status[:target_url]
-  end
-
-  def complete_count
-    combined_status[:statuses].count { |status| status[:state] != "pending"}
-  end
-
-  def total_count
-    combined_status[:statuses].count
-  end
-
-  def current_status
-    if total_count > 0
-      "Completed #{complete_count}/#{total_count} checks, see #{first_status_url} ..."
-    else
-      "Build not started..."
-    end
-  end
-end
-
-
-$stdout.sync = true
-
-puts "Checking build status..."
-attempts = 0
-checks = GithubStatusChecks.new
-
-begin
-  loop do
-    case checks.state
-    when "success"
-      puts "Checks passed, see #{checks.first_status_url}"
-      exit 0
-    when "failure"
-      exit_with_error "Checks failed, see #{checks.first_status_url}"
-    when "pending"
-      attempts += 1
-    end
-
-    exit_with_error "Checks are still pending, gave up after #{MAX_ATTEMPTS * ATTEMPTS_GAP} seconds" if attempts == MAX_ATTEMPTS
-
-    puts checks.current_status
-    sleep(ATTEMPTS_GAP)
-    checks.refresh!
-  end
-rescue Octokit::NotFound
-  exit_with_error "Build status could not be found"
-end

.kamal/hooks/pre-traefik-reboot.sample

@@ -1,3 +0,0 @@
-#!/bin/sh
-
-echo "Rebooting Traefik on $KAMAL_HOSTS..."

README.md

@@ -138,12 +138,6 @@ You can deploy Formbricks on [Railway](https://railway.app) using the button bel
 
 [![Deploy on Railway](https://railway.app/button.svg)](https://railway.app/new/template/PPDzCd)
 
-##### RepoCloud
-
-Or you can also deploy Formbricks on [RepoCloud](https://repocloud.io) using the button below.
-
-[![Deploy on RepoCloud](https://d16t0pc4846x52.cloudfront.net/deploy.png)](https://repocloud.io/details/?app_id=254)
-
 <a id="development"></a>
 
 ## 👨‍💻 Development
@@ -224,7 +218,7 @@ Additional to the AGPL licensed Formbricks core, this repository contains code l
 
 ### White-Labeling Formbricks and Other Licensing Needs
 
-We currently do not offer Formbricks white-labeled. Any other needs? [Send us an email](mailto:hola@formbricks.com).
+If you have other licensing requirements such as White-Labeling please [send us an email](mailto:hola@formbricks.com).
 
 ### Why charge for Enterprise Features?
 

apps/demo/components/LayoutApp.tsx

@@ -1,6 +1,6 @@
-import { Sidebar } from "./Sidebar";
+import Sidebar from "./Sidebar";
 
-export const LayoutApp = ({ children }: { children: React.ReactNode }) => {
+export default function LayoutApp({ children }: { children: React.ReactNode }) {
   return (
     <div className="min-h-full">
       {/* Static sidebar for desktop */}
@@ -10,4 +10,4 @@ export const LayoutApp = ({ children }: { children: React.ReactNode }) => {
       <div className="flex flex-1 flex-col lg:pl-64">{children}</div>
     </div>
   );
-};
+}

apps/demo/components/Sidebar.tsx

@@ -1,32 +1,31 @@
+import { classNames } from "@/lib/utils";
 import {
   ClockIcon,
   CogIcon,
   CreditCardIcon,
-  FileBarChartIcon,
-  HelpCircleIcon,
+  DocumentChartBarIcon,
   HomeIcon,
+  QuestionMarkCircleIcon,
   ScaleIcon,
   ShieldCheckIcon,
-  UsersIcon,
-} from "lucide-react";
-
-import { classNames } from "../lib/utils";
+  UserGroupIcon,
+} from "@heroicons/react/24/outline";
 
 const navigation = [
   { name: "Home", href: "#", icon: HomeIcon, current: true },
   { name: "History", href: "#", icon: ClockIcon, current: false },
   { name: "Balances", href: "#", icon: ScaleIcon, current: false },
   { name: "Cards", href: "#", icon: CreditCardIcon, current: false },
-  { name: "Recipients", href: "#", icon: UsersIcon, current: false },
-  { name: "Reports", href: "#", icon: FileBarChartIcon, current: false },
+  { name: "Recipients", href: "#", icon: UserGroupIcon, current: false },
+  { name: "Reports", href: "#", icon: DocumentChartBarIcon, current: false },
 ];
 const secondaryNavigation = [
   { name: "Settings", href: "#", icon: CogIcon },
-  { name: "Help", href: "#", icon: HelpCircleIcon },
+  { name: "Help", href: "#", icon: QuestionMarkCircleIcon },
   { name: "Privacy", href: "#", icon: ShieldCheckIcon },
 ];
 
-export const Sidebar = () => {
+export default function Sidebar({}) {
   return (
     <div className="flex flex-grow flex-col overflow-y-auto bg-cyan-700 pb-4 pt-5">
       <nav
@@ -63,4 +62,4 @@ export const Sidebar = () => {
       </nav>
     </div>
   );
-};
+}

apps/demo/components/SurveySwitch.tsx

@@ -1,29 +0,0 @@
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@formbricks/ui/Select";
-
-interface SurveySwitchProps {
-  value: "website" | "app";
-  formbricks: any;
-}
-
-export const SurveySwitch = ({ value, formbricks }: SurveySwitchProps) => {
-  return (
-    <Select
-      value={value}
-      onValueChange={(v) => {
-        formbricks.logout();
-        window.location.href = `/${v}`;
-      }}>
-      <SelectTrigger className="w-[180px] px-4">
-        <SelectValue placeholder="Theme" />
-      </SelectTrigger>
-      <SelectContent>
-        <SelectItem value="website" className="h-10 px-4 hover:bg-slate-100">
-          Website Surveys
-        </SelectItem>
-        <SelectItem value="app" className="hover:bg-slate-10 h-10 px-4">
-          App Surveys
-        </SelectItem>
-      </SelectContent>
-    </Select>
-  );
-};

apps/demo/components/ui/badge.tsx

@@ -1,31 +0,0 @@
-import { type VariantProps, cva } from "class-variance-authority";
-import * as React from "react";
-
-import { classNames } from "../../lib/utils";
-
-const badgeVariants = cva(
-  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-  {
-    variants: {
-      variant: {
-        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
-        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
-        outline: "text-foreground",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-);
-
-export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof badgeVariants> {}
-
-function Badge({ className, variant, ...props }: BadgeProps) {
-  return <div className={classNames(badgeVariants({ variant }), className)} {...props} />;
-}
-
-export { Badge, badgeVariants };

apps/demo/components/ui/breadcrumb.tsx

@@ -1,91 +0,0 @@
-import { Slot } from "@radix-ui/react-slot";
-import { ChevronRight, MoreHorizontal } from "lucide-react";
-import * as React from "react";
-
-import { classNames } from "../../lib/utils";
-
-const Breadcrumb = React.forwardRef<
-  HTMLElement,
-  React.ComponentPropsWithoutRef<"nav"> & {
-    separator?: React.ReactNode;
-  }
->(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />);
-Breadcrumb.displayName = "Breadcrumb";
-
-const BreadcrumbList = React.forwardRef<HTMLOListElement, React.ComponentPropsWithoutRef<"ol">>(
-  ({ className, ...props }, ref) => (
-    <ol
-      ref={ref}
-      className={classNames(
-        "text-muted-foreground flex flex-wrap items-center gap-1.5 break-words text-sm sm:gap-2.5",
-        className
-      )}
-      {...props}
-    />
-  )
-);
-BreadcrumbList.displayName = "BreadcrumbList";
-
-const BreadcrumbItem = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<"li">>(
-  ({ className, ...props }, ref) => (
-    <li ref={ref} className={classNames("inline-flex items-center gap-1.5", className)} {...props} />
-  )
-);
-BreadcrumbItem.displayName = "BreadcrumbItem";
-
-const BreadcrumbLink = React.forwardRef<
-  HTMLAnchorElement,
-  React.ComponentPropsWithoutRef<"a"> & {
-    asChild?: boolean;
-  }
->(({ asChild, className, ...props }, ref) => {
-  const Comp = asChild ? Slot : "a";
-
-  return (
-    <Comp ref={ref} className={classNames("hover:text-foreground transition-colors", className)} {...props} />
-  );
-});
-BreadcrumbLink.displayName = "BreadcrumbLink";
-
-const BreadcrumbPage = React.forwardRef<HTMLSpanElement, React.ComponentPropsWithoutRef<"span">>(
-  ({ className, ...props }, ref) => (
-    <span
-      ref={ref}
-      role="link"
-      aria-disabled="true"
-      aria-current="page"
-      className={classNames("text-foreground font-normal", className)}
-      {...props}
-    />
-  )
-);
-BreadcrumbPage.displayName = "BreadcrumbPage";
-
-const BreadcrumbSeparator = ({ children, className, ...props }: React.ComponentProps<"li">) => (
-  <li role="presentation" aria-hidden="true" className={classNames("[&>svg]:size-3.5", className)} {...props}>
-    {children ?? <ChevronRight />}
-  </li>
-);
-BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
-
-const BreadcrumbEllipsis = ({ className, ...props }: React.ComponentProps<"span">) => (
-  <span
-    role="presentation"
-    aria-hidden="true"
-    className={classNames("flex h-9 w-9 items-center justify-center", className)}
-    {...props}>
-    <MoreHorizontal className="h-4 w-4" />
-    <span className="sr-only">More</span>
-  </span>
-);
-BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
-
-export {
-  Breadcrumb,
-  BreadcrumbEllipsis,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-};

apps/demo/components/ui/button.tsx

@@ -1,47 +0,0 @@
-import { Slot } from "@radix-ui/react-slot";
-import { type VariantProps, cva } from "class-variance-authority";
-import * as React from "react";
-
-import { classNames } from "../../lib/utils";
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-10 px-4 py-2",
-        sm: "h-9 rounded-md px-3",
-        lg: "h-11 rounded-md px-8",
-        icon: "h-10 w-10",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-);
-
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean;
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button";
-    return <Comp className={classNames(buttonVariants({ variant, size, className }))} ref={ref} {...props} />;
-  }
-);
-Button.displayName = "Button";
-
-export { Button, buttonVariants };

apps/demo/components/ui/card.tsx

@@ -1,53 +0,0 @@
-import * as React from "react";
-
-import { classNames } from "../../lib/utils";
-
-const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={classNames("bg-card text-card-foreground rounded-lg border shadow-sm", className)}
-      {...props}
-    />
-  )
-);
-Card.displayName = "Card";
-
-const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} className={classNames("flex flex-col space-y-1.5 p-6", className)} {...props} />
-  )
-);
-CardHeader.displayName = "CardHeader";
-
-const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
-  ({ className, ...props }, ref) => (
-    <h3
-      ref={ref}
-      className={classNames("text-2xl font-semibold leading-none tracking-tight", className)}
-      {...props}
-    />
-  )
-);
-CardTitle.displayName = "CardTitle";
-
-const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
-  ({ className, ...props }, ref) => (
-    <p ref={ref} className={classNames("text-muted-foreground text-sm", className)} {...props} />
-  )
-);
-CardDescription.displayName = "CardDescription";
-
-const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => <div ref={ref} className={classNames("p-6 pt-0", className)} {...props} />
-);
-CardContent.displayName = "CardContent";
-
-const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} className={classNames("flex items-center p-6 pt-0", className)} {...props} />
-  )
-);
-CardFooter.displayName = "CardFooter";
-
-export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };

apps/demo/components/ui/dropdown-menu.tsx

@@ -1,182 +0,0 @@
-"use client";
-
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { Check, ChevronRight, Circle } from "lucide-react";
-import * as React from "react";
-
-import { classNames } from "../../lib/utils";
-
-const DropdownMenu = DropdownMenuPrimitive.Root;
-
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
-
-const DropdownMenuGroup = DropdownMenuPrimitive.Group;
-
-const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
-
-const DropdownMenuSub = DropdownMenuPrimitive.Sub;
-
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
-
-const DropdownMenuSubTrigger = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-    inset?: boolean;
-  }
->(({ className, inset, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubTrigger
-    ref={ref}
-    className={classNames(
-      "focus:bg-accent data-[state=open]:bg-accent flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
-      inset && "pl-8",
-      className
-    )}
-    {...props}>
-    {children}
-    <ChevronRight className="ml-auto h-4 w-4" />
-  </DropdownMenuPrimitive.SubTrigger>
-));
-DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-
-const DropdownMenuSubContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
->(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubContent
-    ref={ref}
-    className={classNames(
-      "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg",
-      className
-    )}
-    {...props}
-  />
-));
-DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-
-const DropdownMenuContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <DropdownMenuPrimitive.Portal>
-    <DropdownMenuPrimitive.Content
-      ref={ref}
-      sideOffset={sideOffset}
-      className={classNames(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md",
-        className
-      )}
-      {...props}
-    />
-  </DropdownMenuPrimitive.Portal>
-));
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-
-const DropdownMenuItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean;
-  }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Item
-    ref={ref}
-    className={classNames(
-      "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  />
-));
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-
-const DropdownMenuCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
->(({ className, children, checked, ...props }, ref) => (
-  <DropdownMenuPrimitive.CheckboxItem
-    ref={ref}
-    className={classNames(
-      "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    )}
-    checked={checked}
-    {...props}>
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.CheckboxItem>
-));
-DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-
-const DropdownMenuRadioItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
->(({ className, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.RadioItem
-    ref={ref}
-    className={classNames(
-      "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    )}
-    {...props}>
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <Circle className="h-2 w-2 fill-current" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.RadioItem>
-));
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-
-const DropdownMenuLabel = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean;
-  }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Label
-    ref={ref}
-    className={classNames("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
-    {...props}
-  />
-));
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-
-const DropdownMenuSeparator = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.Separator
-    ref={ref}
-    className={classNames("bg-muted -mx-1 my-1 h-px", className)}
-    {...props}
-  />
-));
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
-
-const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
-  return <span className={classNames("ml-auto text-xs tracking-widest opacity-60", className)} {...props} />;
-};
-DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
-
-export {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuPortal,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-};

apps/demo/components/ui/input.tsx

@@ -1,22 +0,0 @@
-import * as React from "react";
-
-import { classNames } from "../../lib/utils";
-
-export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
-
-const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, type, ...props }, ref) => {
-  return (
-    <input
-      type={type}
-      className={classNames(
-        "border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      )}
-      ref={ref}
-      {...props}
-    />
-  );
-});
-Input.displayName = "Input";
-
-export { Input };

apps/demo/components/ui/pagination.tsx

@@ -1,89 +0,0 @@
-import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
-import * as React from "react";
-
-import { classNames } from "../../lib/utils";
-import { ButtonProps, buttonVariants } from "./button";
-
-const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
-  <nav
-    role="navigation"
-    aria-label="pagination"
-    className={classNames("mx-auto flex w-full justify-center", className)}
-    {...props}
-  />
-);
-Pagination.displayName = "Pagination";
-
-const PaginationContent = React.forwardRef<HTMLUListElement, React.ComponentProps<"ul">>(
-  ({ className, ...props }, ref) => (
-    <ul ref={ref} className={classNames("flex flex-row items-center gap-1", className)} {...props} />
-  )
-);
-PaginationContent.displayName = "PaginationContent";
-
-const PaginationItem = React.forwardRef<HTMLLIElement, React.ComponentProps<"li">>(
-  ({ className, ...props }, ref) => <li ref={ref} className={classNames("", className)} {...props} />
-);
-PaginationItem.displayName = "PaginationItem";
-
-type PaginationLinkProps = {
-  isActive?: boolean;
-} & Pick<ButtonProps, "size"> &
-  React.ComponentProps<"a">;
-
-const PaginationLink = ({ className, isActive, size = "icon", ...props }: PaginationLinkProps) => (
-  <a
-    aria-current={isActive ? "page" : undefined}
-    className={classNames(
-      buttonVariants({
-        variant: isActive ? "outline" : "ghost",
-        size,
-      }),
-      className
-    )}
-    {...props}
-  />
-);
-PaginationLink.displayName = "PaginationLink";
-
-const PaginationPrevious = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => (
-  <PaginationLink
-    aria-label="Go to previous page"
-    size="default"
-    className={classNames("gap-1 pl-2.5", className)}
-    {...props}>
-    <ChevronLeft className="h-4 w-4" />
-    <span>Previous</span>
-  </PaginationLink>
-);
-PaginationPrevious.displayName = "PaginationPrevious";
-
-const PaginationNext = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => (
-  <PaginationLink
-    aria-label="Go to next page"
-    size="default"
-    className={classNames("gap-1 pr-2.5", className)}
-    {...props}>
-    <span>Next</span>
-    <ChevronRight className="h-4 w-4" />
-  </PaginationLink>
-);
-PaginationNext.displayName = "PaginationNext";
-
-const PaginationEllipsis = ({ className, ...props }: React.ComponentProps<"span">) => (
-  <span aria-hidden className={classNames("flex h-9 w-9 items-center justify-center", className)} {...props}>
-    <MoreHorizontal className="h-4 w-4" />
-    <span className="sr-only">More pages</span>
-  </span>
-);
-PaginationEllipsis.displayName = "PaginationEllipsis";
-
-export {
-  Pagination,
-  PaginationContent,
-  PaginationEllipsis,
-  PaginationItem,
-  PaginationLink,
-  PaginationNext,
-  PaginationPrevious,
-};

apps/demo/components/ui/progress.tsx

@@ -1,24 +0,0 @@
-"use client";
-
-import * as ProgressPrimitive from "@radix-ui/react-progress";
-import * as React from "react";
-
-import { classNames } from "../../lib/utils";
-
-const Progress = React.forwardRef<
-  React.ElementRef<typeof ProgressPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
->(({ className, value, ...props }, ref) => (
-  <ProgressPrimitive.Root
-    ref={ref}
-    className={classNames("bg-secondary relative h-4 w-full overflow-hidden rounded-full", className)}
-    {...props}>
-    <ProgressPrimitive.Indicator
-      className="bg-primary h-full w-full flex-1 transition-all"
-      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
-    />
-  </ProgressPrimitive.Root>
-));
-Progress.displayName = ProgressPrimitive.Root.displayName;
-
-export { Progress };

apps/demo/components/ui/separator.tsx

@@ -1,26 +0,0 @@
-"use client";
-
-import * as SeparatorPrimitive from "@radix-ui/react-separator";
-import * as React from "react";
-
-import { classNames } from "../../lib/utils";
-
-const Separator = React.forwardRef<
-  React.ElementRef<typeof SeparatorPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
->(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (
-  <SeparatorPrimitive.Root
-    ref={ref}
-    decorative={decorative}
-    orientation={orientation}
-    className={classNames(
-      "bg-border shrink-0",
-      orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
-      className
-    )}
-    {...props}
-  />
-));
-Separator.displayName = SeparatorPrimitive.Root.displayName;
-
-export { Separator };

apps/demo/components/ui/sheet.tsx

@@ -1,120 +0,0 @@
-"use client";
-
-import * as SheetPrimitive from "@radix-ui/react-dialog";
-import { type VariantProps, cva } from "class-variance-authority";
-import { X } from "lucide-react";
-import * as React from "react";
-
-import { classNames } from "../../lib/utils";
-
-const Sheet = SheetPrimitive.Root;
-
-const SheetTrigger = SheetPrimitive.Trigger;
-
-const SheetClose = SheetPrimitive.Close;
-
-const SheetPortal = SheetPrimitive.Portal;
-
-const SheetOverlay = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <SheetPrimitive.Overlay
-    className={classNames(
-      "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  fixed inset-0 z-50 bg-black/80",
-      className
-    )}
-    {...props}
-    ref={ref}
-  />
-));
-SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
-
-const sheetVariants = cva(
-  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
-  {
-    variants: {
-      side: {
-        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
-        bottom:
-          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
-        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
-        right:
-          "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
-      },
-    },
-    defaultVariants: {
-      side: "right",
-    },
-  }
-);
-
-interface SheetContentProps
-  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
-    VariantProps<typeof sheetVariants> {}
-
-const SheetContent = React.forwardRef<React.ElementRef<typeof SheetPrimitive.Content>, SheetContentProps>(
-  ({ side = "right", className, children, ...props }, ref) => (
-    <SheetPortal>
-      <SheetOverlay />
-      <SheetPrimitive.Content ref={ref} className={classNames(sheetVariants({ side }), className)} {...props}>
-        {children}
-        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
-          <X className="h-4 w-4" />
-          <span className="sr-only">Close</span>
-        </SheetPrimitive.Close>
-      </SheetPrimitive.Content>
-    </SheetPortal>
-  )
-);
-SheetContent.displayName = SheetPrimitive.Content.displayName;
-
-const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={classNames("flex flex-col space-y-2 text-center sm:text-left", className)} {...props} />
-);
-SheetHeader.displayName = "SheetHeader";
-
-const SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={classNames("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
-    {...props}
-  />
-);
-SheetFooter.displayName = "SheetFooter";
-
-const SheetTitle = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <SheetPrimitive.Title
-    ref={ref}
-    className={classNames("text-foreground text-lg font-semibold", className)}
-    {...props}
-  />
-));
-SheetTitle.displayName = SheetPrimitive.Title.displayName;
-
-const SheetDescription = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <SheetPrimitive.Description
-    ref={ref}
-    className={classNames("text-muted-foreground text-sm", className)}
-    {...props}
-  />
-));
-SheetDescription.displayName = SheetPrimitive.Description.displayName;
-
-export {
-  Sheet,
-  SheetClose,
-  SheetContent,
-  SheetDescription,
-  SheetFooter,
-  SheetHeader,
-  SheetOverlay,
-  SheetPortal,
-  SheetTitle,
-  SheetTrigger,
-};

apps/demo/components/ui/table.tsx

@@ -1,85 +0,0 @@
-import * as React from "react";
-
-import { classNames } from "../../lib/utils";
-
-const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
-  ({ className, ...props }, ref) => (
-    <div className="relative w-full overflow-auto">
-      <table ref={ref} className={classNames("w-full caption-bottom text-sm", className)} {...props} />
-    </div>
-  )
-);
-Table.displayName = "Table";
-
-const TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
-  ({ className, ...props }, ref) => (
-    <thead ref={ref} className={classNames("[&_tr]:border-b", className)} {...props} />
-  )
-);
-TableHeader.displayName = "TableHeader";
-
-const TableBody = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
-  ({ className, ...props }, ref) => (
-    <tbody ref={ref} className={classNames("[&_tr:last-child]:border-0", className)} {...props} />
-  )
-);
-TableBody.displayName = "TableBody";
-
-const TableFooter = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
-  ({ className, ...props }, ref) => (
-    <tfoot
-      ref={ref}
-      className={classNames("bg-muted/50 border-t font-medium [&>tr]:last:border-b-0", className)}
-      {...props}
-    />
-  )
-);
-TableFooter.displayName = "TableFooter";
-
-const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
-  ({ className, ...props }, ref) => (
-    <tr
-      ref={ref}
-      className={classNames(
-        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
-        className
-      )}
-      {...props}
-    />
-  )
-);
-TableRow.displayName = "TableRow";
-
-const TableHead = React.forwardRef<HTMLTableCellElement, React.ThHTMLAttributes<HTMLTableCellElement>>(
-  ({ className, ...props }, ref) => (
-    <th
-      ref={ref}
-      className={classNames(
-        "text-muted-foreground h-12 px-4 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0",
-        className
-      )}
-      {...props}
-    />
-  )
-);
-TableHead.displayName = "TableHead";
-
-const TableCell = React.forwardRef<HTMLTableCellElement, React.TdHTMLAttributes<HTMLTableCellElement>>(
-  ({ className, ...props }, ref) => (
-    <td
-      ref={ref}
-      className={classNames("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
-      {...props}
-    />
-  )
-);
-TableCell.displayName = "TableCell";
-
-const TableCaption = React.forwardRef<HTMLTableCaptionElement, React.HTMLAttributes<HTMLTableCaptionElement>>(
-  ({ className, ...props }, ref) => (
-    <caption ref={ref} className={classNames("text-muted-foreground mt-4 text-sm", className)} {...props} />
-  )
-);
-TableCaption.displayName = "TableCaption";
-
-export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };

apps/demo/components/ui/tabs.tsx

@@ -1,55 +0,0 @@
-"use client";
-
-import * as TabsPrimitive from "@radix-ui/react-tabs";
-import * as React from "react";
-
-import { classNames } from "../../lib/utils";
-
-const Tabs = TabsPrimitive.Root;
-
-const TabsList = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.List
-    ref={ref}
-    className={classNames(
-      "bg-muted text-muted-foreground inline-flex h-10 items-center justify-center rounded-md p-1",
-      className
-    )}
-    {...props}
-  />
-));
-TabsList.displayName = TabsPrimitive.List.displayName;
-
-const TabsTrigger = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Trigger
-    ref={ref}
-    className={classNames(
-      "ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm",
-      className
-    )}
-    {...props}
-  />
-));
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-
-const TabsContent = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Content
-    ref={ref}
-    className={classNames(
-      "ring-offset-background focus-visible:ring-ring mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
-      className
-    )}
-    {...props}
-  />
-));
-TabsContent.displayName = TabsPrimitive.Content.displayName;
-
-export { Tabs, TabsContent, TabsList, TabsTrigger };

apps/demo/components/ui/tooltip.tsx

@@ -1,30 +0,0 @@
-"use client";
-
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import * as React from "react";
-
-import { classNames } from "../../lib/utils";
-
-const TooltipProvider = TooltipPrimitive.Provider;
-
-const Tooltip = TooltipPrimitive.Root;
-
-const TooltipTrigger = TooltipPrimitive.Trigger;
-
-const TooltipContent = React.forwardRef<
-  React.ElementRef<typeof TooltipPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <TooltipPrimitive.Content
-    ref={ref}
-    sideOffset={sideOffset}
-    className={classNames(
-      "bg-popover text-popover-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded-md border px-3 py-1.5 text-sm shadow-md",
-      className
-    )}
-    {...props}
-  />
-));
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
-
-export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

apps/demo/lib/utils.ts

@@ -1,3 +1,3 @@
-export const classNames = (...classes: any) => {
+export function classNames(...classes: any) {
   return classes.filter(Boolean).join(" ");
-};
+}

apps/demo/next.config.js

@@ -1,7 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
-  transpilePackages: ["@formbricks/ui"],
   async redirects() {
     return [
       {

apps/demo/package.json

@@ -12,22 +12,12 @@
   },
   "dependencies": {
     "@formbricks/js": "workspace:*",
-    "@formbricks/ui": "workspace:*",
-    "@radix-ui/react-dialog": "^1.0.5",
-    "@radix-ui/react-dropdown-menu": "^2.0.6",
-    "@radix-ui/react-progress": "^1.0.3",
-    "@radix-ui/react-separator": "^1.0.3",
-    "@radix-ui/react-slot": "^1.0.2",
-    "@radix-ui/react-tabs": "^1.0.4",
-    "@radix-ui/react-tooltip": "^1.0.7",
-    "classnames": "^2.5.1",
-    "lucide-react": "^0.378.0",
-    "next": "14.2.3",
-    "react": "18.3.1",
-    "react-dom": "18.3.1"
+    "@heroicons/react": "^2.1.1",
+    "next": "14.1.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "@formbricks/tsconfig": "workspace:*",
     "eslint-config-formbricks": "workspace:*"
   }
 }

apps/demo/pages/_app.tsx

@@ -3,7 +3,7 @@ import Head from "next/head";
 
 import "../styles/globals.css";
 
-const App = ({ Component, pageProps }: AppProps) => {
+export default function App({ Component, pageProps }: AppProps) {
   return (
     <>
       <Head>
@@ -18,6 +18,4 @@ const App = ({ Component, pageProps }: AppProps) => {
       <Component {...pageProps} />
     </>
   );
-};
-
-export default App;
+}

apps/demo/pages/_document.tsx

@@ -1,6 +1,6 @@
 import { Head, Html, Main, NextScript } from "next/document";
 
-const Document = () => {
+export default function Document() {
   return (
     <Html lang="en" className="h-full bg-slate-50">
       <Head />
@@ -10,6 +10,4 @@ const Document = () => {
       </body>
     </Html>
   );
-};
-
-export default Document;
+}

apps/demo/pages/app/index.tsx

@@ -2,14 +2,13 @@ import Image from "next/image";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 
-import formbricks from "@formbricks/js/app";
+import formbricks from "@formbricks/js";
 
-import { SurveySwitch } from "../../components/SurveySwitch";
 import fbsetup from "../../public/fb-setup.png";
 
 declare const window: any;
 
-const AppPage = ({}) => {
+export default function AppPage({}) {
   const [darkMode, setDarkMode] = useState(false);
   const router = useRouter();
 
@@ -22,32 +21,17 @@ const AppPage = ({}) => {
   }, [darkMode]);
 
   useEffect(() => {
-    // enable Formbricks debug mode by adding formbricksDebug=true GET parameter
-    const addFormbricksDebugParam = () => {
-      const urlParams = new URLSearchParams(window.location.search);
-      if (!urlParams.has("formbricksDebug")) {
-        urlParams.set("formbricksDebug", "true");
-        const newUrl = `${window.location.pathname}?${urlParams.toString()}`;
-        window.history.replaceState({}, "", newUrl);
-      }
-    };
-
-    addFormbricksDebugParam();
-
     if (process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID && process.env.NEXT_PUBLIC_FORMBRICKS_API_HOST) {
-      const userId = "THIS-IS-A-VERY-LONG-USER-ID-FOR-TESTING";
-      const userInitAttributes = {
-        language: "de",
-        "Init Attribute 1": "eight",
-        "Init Attribute 2": "two",
-      };
-
+      const isUserId = window.location.href.includes("userId=true");
+      const attributes = isUserId ? { "Init Attribute 1": "eight", "Init Attribute 2": "two" } : undefined;
+      const userId = isUserId ? "THIS-IS-A-VERY-LONG-USER-ID-FOR-TESTING" : undefined;
       formbricks.init({
         environmentId: process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID,
         apiHost: process.env.NEXT_PUBLIC_FORMBRICKS_API_HOST,
         userId,
-        attributes: userInitAttributes,
+        attributes,
       });
+      window.formbricks = formbricks;
     }
 
     // Connect next.js router to Formbricks
@@ -64,19 +48,15 @@ const AppPage = ({}) => {
   return (
     <div className="h-screen bg-white px-12 py-6 dark:bg-slate-800">
       <div className="flex flex-col justify-between md:flex-row">
-        <div className="flex items-center gap-2">
-          <SurveySwitch value="app" formbricks={formbricks} />
-          <div>
-            <h1 className="text-2xl font-bold text-slate-900 dark:text-white">
-              Formbricks In-product Survey Demo App
-            </h1>
-            <p className="text-slate-700 dark:text-slate-300">
-              This app helps you test your app surveys. You can create and test user actions, create and
-              update user attributes, etc.
-            </p>
-          </div>
+        <div>
+          <h1 className="text-2xl font-bold text-slate-900 dark:text-white">
+            Formbricks In-product Survey Demo App
+          </h1>
+          <p className="text-slate-700 dark:text-slate-300">
+            This app helps you test your in-app surveys. You can create and test user actions, create and
+            update user attributes, etc.
+          </p>
         </div>
-
         <button
           className="mt-2 rounded-lg bg-slate-200 px-6 py-1 dark:bg-slate-700 dark:text-slate-100"
           onClick={() => setDarkMode(!darkMode)}>
@@ -89,7 +69,7 @@ const AppPage = ({}) => {
           <div className="rounded-lg border border-slate-300 bg-slate-100 p-6 dark:border-slate-600 dark:bg-slate-900">
             <h3 className="text-lg font-semibold text-slate-900 dark:text-white">1. Setup .env</h3>
             <p className="text-slate-700 dark:text-slate-300">
-              Copy the environment ID of your Formbricks app to the env variable in /apps/demo/.env
+              Copy the environment ID of your Formbricks app to the env variable in demo/.env
             </p>
             <Image src={fbsetup} alt="fb setup" className="mt-4 rounded" priority />
 
@@ -100,7 +80,7 @@ const AppPage = ({}) => {
                   {process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID}
                 </strong>
                 <span className="relative ml-2 flex h-3 w-3">
-                  <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-500 opacity-75"></span>
+                  <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-400 opacity-75"></span>
                   <span className="relative inline-flex h-3 w-3 rounded-full bg-green-500"></span>
                 </span>
               </div>
@@ -119,7 +99,7 @@ const AppPage = ({}) => {
         </div>
 
         <div className="md:grid md:grid-cols-3">
-          <div className="col-span-3 self-start rounded-lg border border-slate-300 bg-slate-100 p-6 dark:border-slate-600 dark:bg-slate-800">
+          <div className="col-span-3 rounded-lg border border-slate-300 bg-slate-100 p-6 dark:border-slate-600 dark:bg-slate-800">
             <h3 className="text-lg font-semibold dark:text-white">
               Reset person / pull data from Formbricks app
             </h3>
@@ -140,6 +120,26 @@ const AppPage = ({}) => {
             </p>
           </div>
 
+          <div className="p-6">
+            <div>
+              <button
+                className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700 dark:bg-slate-700 dark:hover:bg-slate-600"
+                onClick={() => {
+                  formbricks.track("Code Action");
+                }}>
+                Code Action
+              </button>
+            </div>
+            <div>
+              <p className="text-xs text-slate-700 dark:text-slate-300">
+                This button sends a{" "}
+                <a href="https://formbricks.com/docs/actions/code" className="underline" target="_blank">
+                  Code Action
+                </a>{" "}
+                to the Formbricks API called &apos;Code Action&apos;. You will find it in the Actions Tab.
+              </p>
+            </div>
+          </div>
           <div className="p-6">
             <div>
               <button className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700  dark:bg-slate-700 dark:hover:bg-slate-600">
@@ -234,10 +234,43 @@ const AppPage = ({}) => {
               </p>
             </div>
           </div>
+          <div className="p-6">
+            {router.query.userId === "true" ? (
+              <div>
+                <button
+                  onClick={() => {
+                    window.location.href = "/app";
+                  }}
+                  className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700  dark:bg-slate-700 dark:hover:bg-slate-600">
+                  Deactivate User Identification
+                </button>
+              </div>
+            ) : (
+              <div>
+                <button
+                  onClick={() => {
+                    window.location.href = "/app?userId=true";
+                  }}
+                  className="mb-4 rounded-lg bg-slate-800 px-6 py-3 text-white hover:bg-slate-700  dark:bg-slate-700 dark:hover:bg-slate-600">
+                  Activate User Identification
+                </button>
+              </div>
+            )}
+            <div>
+              <p className="text-xs text-slate-700 dark:text-slate-300">
+                This button activates/deactivates{" "}
+                <a
+                  href="https://formbricks.com/docs/attributes/identify-users"
+                  target="_blank"
+                  className="underline dark:text-blue-500">
+                  user identification
+                </a>{" "}
+                with the userId &apos;THIS-IS-A-VERY-LONG-USER-ID-FOR-TESTING&apos;
+              </p>
+            </div>
+          </div>
         </div>
       </div>
     </div>
   );
-};
-
-export default AppPage;
+}

apps/demo/pages/saas/index.tsx

@@ -1,663 +0,0 @@
-import {
-  ChevronLeft,
-  ChevronRight,
-  Copy,
-  CreditCard,
-  File,
-  Home,
-  LineChart,
-  ListFilter,
-  MoreVertical,
-  Package,
-  Package2,
-  PanelLeft,
-  Search,
-  Settings,
-  ShoppingCart,
-  Truck,
-  Users2,
-} from "lucide-react";
-import Image from "next/image";
-import Link from "next/link";
-import { useRouter } from "next/router";
-import { useEffect } from "react";
-
-import formbricks from "@formbricks/js/app";
-
-import { Badge } from "../../components/ui/badge";
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "../../components/ui/breadcrumb";
-import { Button } from "../../components/ui/button";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "../../components/ui/card";
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "../../components/ui/dropdown-menu";
-import { Input } from "../../components/ui/input";
-import { Pagination, PaginationContent, PaginationItem } from "../../components/ui/pagination";
-import { Progress } from "../../components/ui/progress";
-import { Separator } from "../../components/ui/separator";
-import { Sheet, SheetContent, SheetTrigger } from "../../components/ui/sheet";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../components/ui/table";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../components/ui/tabs";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../../components/ui/tooltip";
-
-declare const window: any;
-
-const SaaSPage = ({}) => {
-  const router = useRouter();
-
-  useEffect(() => {
-    // enable Formbricks debug mode by adding formbricksDebug=true GET parameter
-    const addFormbricksDebugParam = () => {
-      const urlParams = new URLSearchParams(window.location.search);
-      if (!urlParams.has("formbricksDebug")) {
-        urlParams.set("formbricksDebug", "true");
-        const newUrl = `${window.location.pathname}?${urlParams.toString()}`;
-        window.history.replaceState({}, "", newUrl);
-      }
-    };
-
-    addFormbricksDebugParam();
-
-    if (process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID && process.env.NEXT_PUBLIC_FORMBRICKS_API_HOST) {
-      const userId = "THIS-IS-A-VERY-LONG-USER-ID-FOR-TESTING";
-      const userInitAttributes = {
-        language: "de",
-        "Init Attribute 1": "eight",
-        "Init Attribute 2": "two",
-      };
-
-      formbricks.init({
-        environmentId: process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID,
-        apiHost: process.env.NEXT_PUBLIC_FORMBRICKS_API_HOST,
-        userId,
-        attributes: userInitAttributes,
-      });
-    }
-
-    // Connect next.js router to Formbricks
-    if (process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID && process.env.NEXT_PUBLIC_FORMBRICKS_API_HOST) {
-      const handleRouteChange = formbricks?.registerRouteChange;
-      router.events.on("routeChangeComplete", handleRouteChange);
-
-      return () => {
-        router.events.off("routeChangeComplete", handleRouteChange);
-      };
-    }
-  });
-
-  return (
-    <div className="bg-muted/40 flex min-h-screen w-full flex-col">
-      <TooltipProvider delayDuration={10}>
-        <aside className="bg-background fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r sm:flex">
-          <nav className="flex flex-col items-center gap-4 px-2 sm:py-5">
-            <Link
-              href="#"
-              className="bg-primary text-primary-foreground group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full text-lg font-semibold md:h-8 md:w-8 md:text-base">
-              <Package2 className="h-4 w-4 transition-all group-hover:scale-110" />
-              <span className="sr-only">Acme Inc</span>
-            </Link>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Link
-                  href="#"
-                  className="text-muted-foreground hover:text-foreground flex h-9 w-9 items-center justify-center rounded-lg transition-colors md:h-8 md:w-8">
-                  <Home className="h-5 w-5" />
-                  <span className="sr-only">Dashboard</span>
-                </Link>
-              </TooltipTrigger>
-              <TooltipContent side="right">Dashboard</TooltipContent>
-            </Tooltip>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Link
-                  href="#"
-                  className="bg-accent text-accent-foreground hover:text-foreground flex h-9 w-9 items-center justify-center rounded-lg transition-colors md:h-8 md:w-8">
-                  <ShoppingCart className="h-5 w-5" />
-                  <span className="sr-only">Orders</span>
-                </Link>
-              </TooltipTrigger>
-              <TooltipContent side="right">Orders</TooltipContent>
-            </Tooltip>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Link
-                  href="#"
-                  className="text-muted-foreground hover:text-foreground flex h-9 w-9 items-center justify-center rounded-lg transition-colors md:h-8 md:w-8">
-                  <Package className="h-5 w-5" />
-                  <span className="sr-only">Products</span>
-                </Link>
-              </TooltipTrigger>
-              <TooltipContent side="right">Products</TooltipContent>
-            </Tooltip>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Link
-                  href="#"
-                  className="text-muted-foreground hover:text-foreground flex h-9 w-9 items-center justify-center rounded-lg transition-colors md:h-8 md:w-8">
-                  <Users2 className="h-5 w-5" />
-                  <span className="sr-only">Customers</span>
-                </Link>
-              </TooltipTrigger>
-              <TooltipContent side="right">Customers</TooltipContent>
-            </Tooltip>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Link
-                  href="#"
-                  className="text-muted-foreground hover:text-foreground flex h-9 w-9 items-center justify-center rounded-lg transition-colors md:h-8 md:w-8">
-                  <LineChart className="h-5 w-5" />
-                  <span className="sr-only">Analytics</span>
-                </Link>
-              </TooltipTrigger>
-              <TooltipContent side="right">Analytics</TooltipContent>
-            </Tooltip>
-          </nav>
-          <nav className="mt-auto flex flex-col items-center gap-4 px-2 sm:py-5">
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Link
-                  href="#"
-                  className="text-muted-foreground hover:text-foreground flex h-9 w-9 items-center justify-center rounded-lg transition-colors md:h-8 md:w-8">
-                  <Settings className="h-5 w-5" />
-                  <span className="sr-only">Settings</span>
-                </Link>
-              </TooltipTrigger>
-              <TooltipContent side="right">Settings</TooltipContent>
-            </Tooltip>
-          </nav>
-        </aside>
-        <div className="flex flex-col sm:gap-4 sm:py-4 sm:pl-14">
-          <header className="bg-background sticky top-0 z-30 flex h-14 items-center gap-4 border-b px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6">
-            <Sheet>
-              <SheetTrigger asChild>
-                <Button size="icon" variant="outline" className="sm:hidden">
-                  <PanelLeft className="h-5 w-5" />
-                  <span className="sr-only">Toggle Menu</span>
-                </Button>
-              </SheetTrigger>
-              <SheetContent side="left" className="sm:max-w-xs">
-                <nav className="grid gap-6 text-lg font-medium">
-                  <Link
-                    href="#"
-                    className="bg-primary text-primary-foreground group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full text-lg font-semibold md:text-base">
-                    <Package2 className="h-5 w-5 transition-all group-hover:scale-110" />
-                    <span className="sr-only">Acme Inc</span>
-                  </Link>
-                  <Link
-                    href="#"
-                    className="text-muted-foreground hover:text-foreground flex items-center gap-4 px-2.5">
-                    <Home className="h-5 w-5" />
-                    Dashboard
-                  </Link>
-                  <Link href="#" className="text-foreground flex items-center gap-4 px-2.5">
-                    <ShoppingCart className="h-5 w-5" />
-                    Orders
-                  </Link>
-                  <Link
-                    href="#"
-                    className="text-muted-foreground hover:text-foreground flex items-center gap-4 px-2.5">
-                    <Package className="h-5 w-5" />
-                    Products
-                  </Link>
-                  <Link
-                    href="#"
-                    className="text-muted-foreground hover:text-foreground flex items-center gap-4 px-2.5">
-                    <Users2 className="h-5 w-5" />
-                    Customers
-                  </Link>
-                  <Link
-                    href="#"
-                    className="text-muted-foreground hover:text-foreground flex items-center gap-4 px-2.5">
-                    <LineChart className="h-5 w-5" />
-                    Settings
-                  </Link>
-                </nav>
-              </SheetContent>
-            </Sheet>
-            <Breadcrumb className="hidden md:flex">
-              <BreadcrumbList>
-                <BreadcrumbItem>
-                  <BreadcrumbLink asChild>
-                    <Link href="#">Dashboard</Link>
-                  </BreadcrumbLink>
-                </BreadcrumbItem>
-                <BreadcrumbSeparator />
-                <BreadcrumbItem>
-                  <BreadcrumbLink asChild>
-                    <Link href="#">Orders</Link>
-                  </BreadcrumbLink>
-                </BreadcrumbItem>
-                <BreadcrumbSeparator />
-                <BreadcrumbItem>
-                  <BreadcrumbPage>Recent Orders</BreadcrumbPage>
-                </BreadcrumbItem>
-              </BreadcrumbList>
-            </Breadcrumb>
-            <div className="relative ml-auto flex-1 md:grow-0">
-              <Search className="text-muted-foreground absolute left-2.5 top-2.5 h-4 w-4" />
-              <Input
-                type="search"
-                placeholder="Search..."
-                className="bg-background w-full rounded-lg pl-8 md:w-[200px] lg:w-[336px]"
-              />
-            </div>
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button variant="outline" size="icon" className="overflow-hidden rounded-full">
-                  <Image
-                    src="/user-avatar.png"
-                    width={36}
-                    height={36}
-                    alt="Avatar"
-                    className="overflow-hidden rounded-full"
-                  />
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="end">
-                <DropdownMenuLabel>My Account</DropdownMenuLabel>
-                <DropdownMenuSeparator />
-                <DropdownMenuItem>Settings</DropdownMenuItem>
-                <DropdownMenuItem>Support</DropdownMenuItem>
-                <DropdownMenuSeparator />
-                <DropdownMenuItem>Logout</DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </header>
-          <main className="grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8 lg:grid-cols-3 xl:grid-cols-3">
-            <div className="grid auto-rows-max items-start gap-4 md:gap-8 lg:col-span-2">
-              <div className="grid gap-4 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-2 xl:grid-cols-4">
-                <Card className="sm:col-span-2" x-chunk="dashboard-05-chunk-0">
-                  <CardHeader className="pb-3">
-                    <CardTitle>Your Orders</CardTitle>
-                    <CardDescription className="max-w-lg text-balance leading-relaxed">
-                      Introducing Our Dynamic Orders Dashboard for Seamless Management and Insightful
-                      Analysis.
-                    </CardDescription>
-                  </CardHeader>
-                  <CardFooter>
-                    <Button>Create New Order</Button>
-                  </CardFooter>
-                </Card>
-                <Card x-chunk="dashboard-05-chunk-1">
-                  <CardHeader className="pb-2">
-                    <CardDescription>This Week</CardDescription>
-                    <CardTitle className="text-4xl">$1,329</CardTitle>
-                  </CardHeader>
-                  <CardContent>
-                    <div className="text-muted-foreground text-xs">+25% from last week</div>
-                  </CardContent>
-                  <CardFooter>
-                    <Progress value={25} aria-label="25% increase" />
-                  </CardFooter>
-                </Card>
-                <Card x-chunk="dashboard-05-chunk-2">
-                  <CardHeader className="pb-2">
-                    <CardDescription>This Month</CardDescription>
-                    <CardTitle className="text-4xl">$5,329</CardTitle>
-                  </CardHeader>
-                  <CardContent>
-                    <div className="text-muted-foreground text-xs">+10% from last month</div>
-                  </CardContent>
-                  <CardFooter>
-                    <Progress value={12} aria-label="12% increase" />
-                  </CardFooter>
-                </Card>
-              </div>
-              <Tabs defaultValue="week">
-                <div className="flex items-center">
-                  <TabsList>
-                    <TabsTrigger value="week">Week</TabsTrigger>
-                    <TabsTrigger value="month">Month</TabsTrigger>
-                    <TabsTrigger value="year">Year</TabsTrigger>
-                  </TabsList>
-                  <div className="ml-auto flex items-center gap-2">
-                    <DropdownMenu>
-                      <DropdownMenuTrigger asChild>
-                        <Button variant="outline" size="sm" className="h-7 gap-1 text-sm">
-                          <ListFilter className="h-3.5 w-3.5" />
-                          <span className="sr-only sm:not-sr-only">Filter</span>
-                        </Button>
-                      </DropdownMenuTrigger>
-                      <DropdownMenuContent align="end">
-                        <DropdownMenuLabel>Filter by</DropdownMenuLabel>
-                        <DropdownMenuSeparator />
-                        <DropdownMenuCheckboxItem checked>Fulfilled</DropdownMenuCheckboxItem>
-                        <DropdownMenuCheckboxItem>Declined</DropdownMenuCheckboxItem>
-                        <DropdownMenuCheckboxItem>Refunded</DropdownMenuCheckboxItem>
-                      </DropdownMenuContent>
-                    </DropdownMenu>
-                    <Button size="sm" variant="outline" className="h-7 gap-1 text-sm">
-                      <File className="h-3.5 w-3.5" />
-                      <span className="sr-only sm:not-sr-only">Export</span>
-                    </Button>
-                  </div>
-                </div>
-                <TabsContent value="week">
-                  <Card x-chunk="dashboard-05-chunk-3">
-                    <CardHeader className="px-7">
-                      <CardTitle>Orders</CardTitle>
-                      <CardDescription>Recent orders from your store.</CardDescription>
-                    </CardHeader>
-                    <CardContent>
-                      <Table>
-                        <TableHeader>
-                          <TableRow>
-                            <TableHead>Customer</TableHead>
-                            <TableHead className="hidden sm:table-cell">Type</TableHead>
-                            <TableHead className="hidden sm:table-cell">Status</TableHead>
-                            <TableHead className="hidden md:table-cell">Date</TableHead>
-                            <TableHead className="text-right">Amount</TableHead>
-                          </TableRow>
-                        </TableHeader>
-                        <TableBody>
-                          <TableRow className="bg-accent">
-                            <TableCell>
-                              <div className="font-medium">Liam Johnson</div>
-                              <div className="text-muted-foreground hidden text-sm md:inline">
-                                liam@example.com
-                              </div>
-                            </TableCell>
-                            <TableCell className="hidden sm:table-cell">Sale</TableCell>
-                            <TableCell className="hidden sm:table-cell">
-                              <Badge className="text-xs" variant="secondary">
-                                Fulfilled
-                              </Badge>
-                            </TableCell>
-                            <TableCell className="hidden md:table-cell">2023-06-23</TableCell>
-                            <TableCell className="text-right">$250.00</TableCell>
-                          </TableRow>
-                          <TableRow>
-                            <TableCell>
-                              <div className="font-medium">Olivia Smith</div>
-                              <div className="text-muted-foreground hidden text-sm md:inline">
-                                olivia@example.com
-                              </div>
-                            </TableCell>
-                            <TableCell className="hidden sm:table-cell">Refund</TableCell>
-                            <TableCell className="hidden sm:table-cell">
-                              <Badge className="text-xs" variant="outline">
-                                Declined
-                              </Badge>
-                            </TableCell>
-                            <TableCell className="hidden md:table-cell">2023-06-24</TableCell>
-                            <TableCell className="text-right">$150.00</TableCell>
-                          </TableRow>
-                          <TableRow>
-                            <TableCell>
-                              <div className="font-medium">Noah Williams</div>
-                              <div className="text-muted-foreground hidden text-sm md:inline">
-                                noah@example.com
-                              </div>
-                            </TableCell>
-                            <TableCell className="hidden sm:table-cell">Subscription</TableCell>
-                            <TableCell className="hidden sm:table-cell">
-                              <Badge className="text-xs" variant="secondary">
-                                Fulfilled
-                              </Badge>
-                            </TableCell>
-                            <TableCell className="hidden md:table-cell">2023-06-25</TableCell>
-                            <TableCell className="text-right">$350.00</TableCell>
-                          </TableRow>
-                          <TableRow>
-                            <TableCell>
-                              <div className="font-medium">Emma Brown</div>
-                              <div className="text-muted-foreground hidden text-sm md:inline">
-                                emma@example.com
-                              </div>
-                            </TableCell>
-                            <TableCell className="hidden sm:table-cell">Sale</TableCell>
-                            <TableCell className="hidden sm:table-cell">
-                              <Badge className="text-xs" variant="secondary">
-                                Fulfilled
-                              </Badge>
-                            </TableCell>
-                            <TableCell className="hidden md:table-cell">2023-06-26</TableCell>
-                            <TableCell className="text-right">$450.00</TableCell>
-                          </TableRow>
-                          <TableRow>
-                            <TableCell>
-                              <div className="font-medium">Liam Johnson</div>
-                              <div className="text-muted-foreground hidden text-sm md:inline">
-                                liam@example.com
-                              </div>
-                            </TableCell>
-                            <TableCell className="hidden sm:table-cell">Sale</TableCell>
-                            <TableCell className="hidden sm:table-cell">
-                              <Badge className="text-xs" variant="secondary">
-                                Fulfilled
-                              </Badge>
-                            </TableCell>
-                            <TableCell className="hidden md:table-cell">2023-06-23</TableCell>
-                            <TableCell className="text-right">$250.00</TableCell>
-                          </TableRow>
-                          <TableRow>
-                            <TableCell>
-                              <div className="font-medium">Liam Johnson</div>
-                              <div className="text-muted-foreground hidden text-sm md:inline">
-                                liam@example.com
-                              </div>
-                            </TableCell>
-                            <TableCell className="hidden sm:table-cell">Sale</TableCell>
-                            <TableCell className="hidden sm:table-cell">
-                              <Badge className="text-xs" variant="secondary">
-                                Fulfilled
-                              </Badge>
-                            </TableCell>
-                            <TableCell className="hidden md:table-cell">2023-06-23</TableCell>
-                            <TableCell className="text-right">$250.00</TableCell>
-                          </TableRow>
-                          <TableRow>
-                            <TableCell>
-                              <div className="font-medium">Olivia Smith</div>
-                              <div className="text-muted-foreground hidden text-sm md:inline">
-                                olivia@example.com
-                              </div>
-                            </TableCell>
-                            <TableCell className="hidden sm:table-cell">Refund</TableCell>
-                            <TableCell className="hidden sm:table-cell">
-                              <Badge className="text-xs" variant="outline">
-                                Declined
-                              </Badge>
-                            </TableCell>
-                            <TableCell className="hidden md:table-cell">2023-06-24</TableCell>
-                            <TableCell className="text-right">$150.00</TableCell>
-                          </TableRow>
-                          <TableRow>
-                            <TableCell>
-                              <div className="font-medium">Emma Brown</div>
-                              <div className="text-muted-foreground hidden text-sm md:inline">
-                                emma@example.com
-                              </div>
-                            </TableCell>
-                            <TableCell className="hidden sm:table-cell">Sale</TableCell>
-                            <TableCell className="hidden sm:table-cell">
-                              <Badge className="text-xs" variant="secondary">
-                                Fulfilled
-                              </Badge>
-                            </TableCell>
-                            <TableCell className="hidden md:table-cell">2023-06-26</TableCell>
-                            <TableCell className="text-right">$450.00</TableCell>
-                          </TableRow>
-                        </TableBody>
-                      </Table>
-                    </CardContent>
-                  </Card>
-                </TabsContent>
-              </Tabs>
-            </div>
-            <div>
-              <Card className="overflow-hidden" x-chunk="dashboard-05-chunk-4">
-                <CardHeader className="bg-muted/50 flex flex-row items-start">
-                  <div className="grid gap-0.5">
-                    <CardTitle className="group flex items-center gap-2 text-lg">
-                      Order Oe31b70H
-                      <Button
-                        size="icon"
-                        variant="outline"
-                        className="h-6 w-6 opacity-0 transition-opacity group-hover:opacity-100">
-                        <Copy className="h-3 w-3" />
-                        <span className="sr-only">Copy Order ID</span>
-                      </Button>
-                    </CardTitle>
-                    <CardDescription>Date: November 23, 2023</CardDescription>
-                  </div>
-                  <div className="ml-auto flex items-center gap-1">
-                    <Button size="sm" variant="outline" className="h-8 gap-1">
-                      <Truck className="h-3.5 w-3.5" />
-                      <span className="lg:sr-only xl:not-sr-only xl:whitespace-nowrap">Track Order</span>
-                    </Button>
-                    <DropdownMenu>
-                      <DropdownMenuTrigger asChild>
-                        <Button size="icon" variant="outline" className="h-8 w-8">
-                          <MoreVertical className="h-3.5 w-3.5" />
-                          <span className="sr-only">More</span>
-                        </Button>
-                      </DropdownMenuTrigger>
-                      <DropdownMenuContent align="end">
-                        <DropdownMenuItem>Edit</DropdownMenuItem>
-                        <DropdownMenuItem>Export</DropdownMenuItem>
-                        <DropdownMenuSeparator />
-                        <DropdownMenuItem>Trash</DropdownMenuItem>
-                      </DropdownMenuContent>
-                    </DropdownMenu>
-                  </div>
-                </CardHeader>
-                <CardContent className="p-6 text-sm">
-                  <div className="grid gap-3">
-                    <div className="font-semibold">Order Details</div>
-                    <ul className="grid gap-3">
-                      <li className="flex items-center justify-between">
-                        <span className="text-muted-foreground">
-                          Glimmer Lamps x <span>2</span>
-                        </span>
-                        <span>$250.00</span>
-                      </li>
-                      <li className="flex items-center justify-between">
-                        <span className="text-muted-foreground">
-                          Aqua Filters x <span>1</span>
-                        </span>
-                        <span>$49.00</span>
-                      </li>
-                    </ul>
-                    <Separator className="my-2" />
-                    <ul className="grid gap-3">
-                      <li className="flex items-center justify-between">
-                        <span className="text-muted-foreground">Subtotal</span>
-                        <span>$299.00</span>
-                      </li>
-                      <li className="flex items-center justify-between">
-                        <span className="text-muted-foreground">Shipping</span>
-                        <span>$5.00</span>
-                      </li>
-                      <li className="flex items-center justify-between">
-                        <span className="text-muted-foreground">Tax</span>
-                        <span>$25.00</span>
-                      </li>
-                      <li className="flex items-center justify-between font-semibold">
-                        <span className="text-muted-foreground">Total</span>
-                        <span>$329.00</span>
-                      </li>
-                    </ul>
-                  </div>
-                  <Separator className="my-4" />
-                  <div className="grid grid-cols-2 gap-4">
-                    <div className="grid gap-3">
-                      <div className="font-semibold">Shipping Information</div>
-                      <address className="text-muted-foreground grid gap-0.5 not-italic">
-                        <span>Liam Johnson</span>
-                        <span>1234 Main St.</span>
-                        <span>Anytown, CA 12345</span>
-                      </address>
-                    </div>
-                    <div className="grid auto-rows-max gap-3">
-                      <div className="font-semibold">Billing Information</div>
-                      <div className="text-muted-foreground">Same as shipping address</div>
-                    </div>
-                  </div>
-                  <Separator className="my-4" />
-                  <div className="grid gap-3">
-                    <div className="font-semibold">Customer Information</div>
-                    <dl className="grid gap-3">
-                      <div className="flex items-center justify-between">
-                        <dt className="text-muted-foreground">Customer</dt>
-                        <dd>Liam Johnson</dd>
-                      </div>
-                      <div className="flex items-center justify-between">
-                        <dt className="text-muted-foreground">Email</dt>
-                        <dd>
-                          <a href="mailto:">liam@acme.com</a>
-                        </dd>
-                      </div>
-                      <div className="flex items-center justify-between">
-                        <dt className="text-muted-foreground">Phone</dt>
-                        <dd>
-                          <a href="tel:">+1 234 567 890</a>
-                        </dd>
-                      </div>
-                    </dl>
-                  </div>
-                  <Separator className="my-4" />
-                  <div className="grid gap-3">
-                    <div className="font-semibold">Payment Information</div>
-                    <dl className="grid gap-3">
-                      <div className="flex items-center justify-between">
-                        <dt className="text-muted-foreground flex items-center gap-1">
-                          <CreditCard className="h-4 w-4" />
-                          Visa
-                        </dt>
-                        <dd>**** **** **** 4532</dd>
-                      </div>
-                    </dl>
-                  </div>
-                </CardContent>
-                <CardFooter className="bg-muted/50 flex flex-row items-center border-t px-6 py-3">
-                  <div className="text-muted-foreground text-xs">
-                    Updated <time dateTime="2023-11-23">November 23, 2023</time>
-                  </div>
-                  <Pagination className="ml-auto mr-0 w-auto">
-                    <PaginationContent>
-                      <PaginationItem>
-                        <Button size="icon" variant="outline" className="h-6 w-6">
-                          <ChevronLeft className="h-3.5 w-3.5" />
-                          <span className="sr-only">Previous Order</span>
-                        </Button>
-                      </PaginationItem>
-                      <PaginationItem>
-                        <Button size="icon" variant="outline" className="h-6 w-6">
-                          <ChevronRight className="h-3.5 w-3.5" />
-                          <span className="sr-only">Next Order</span>
-                        </Button>
-                      </PaginationItem>
-                    </PaginationContent>
-                  </Pagination>
-                </CardFooter>
-              </Card>
-            </div>
-          </main>
-        </div>
-      </TooltipProvider>
-    </div>
-  );
-};
-
-export default SaaSPage;

apps/demo/pages/website/index.tsx

@@ -1,144 +0,0 @@
-import Image from "next/image";
-import { useRouter } from "next/router";
-import { useEffect, useState } from "react";
-
-import formbricks from "@formbricks/js/website";
-
-import { SurveySwitch } from "../../components/SurveySwitch";
-import fbsetup from "../../public/fb-setup.png";
-
-declare const window: any;
-
-const AppPage = ({}) => {
-  const [darkMode, setDarkMode] = useState(false);
-  const router = useRouter();
-
-  useEffect(() => {
-    if (darkMode) {
-      document.body.classList.add("dark");
-    } else {
-      document.body.classList.remove("dark");
-    }
-  }, [darkMode]);
-
-  useEffect(() => {
-    // enable Formbricks debug mode by adding formbricksDebug=true GET parameter
-    const addFormbricksDebugParam = () => {
-      const urlParams = new URLSearchParams(window.location.search);
-      if (!urlParams.has("formbricksDebug")) {
-        urlParams.set("formbricksDebug", "true");
-        const newUrl = `${window.location.pathname}?${urlParams.toString()}`;
-        window.history.replaceState({}, "", newUrl);
-      }
-    };
-
-    addFormbricksDebugParam();
-
-    if (process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID && process.env.NEXT_PUBLIC_FORMBRICKS_API_HOST) {
-      const defaultAttributes = {
-        language: "de",
-      };
-
-      formbricks.init({
-        environmentId: process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID,
-        apiHost: process.env.NEXT_PUBLIC_FORMBRICKS_API_HOST,
-        attributes: defaultAttributes,
-      });
-    }
-
-    // Connect next.js router to Formbricks
-    if (process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID && process.env.NEXT_PUBLIC_FORMBRICKS_API_HOST) {
-      const handleRouteChange = formbricks?.registerRouteChange;
-      router.events.on("routeChangeComplete", handleRouteChange);
-
-      return () => {
-        router.events.off("routeChangeComplete", handleRouteChange);
-      };
-    }
-  });
-
-  return (
-    <div className="h-screen bg-white px-12 py-6 dark:bg-slate-800">
-      <div className="flex flex-col items-center justify-between md:flex-row">
-        <div className="flex items-center gap-2">
-          <SurveySwitch value="website" formbricks={formbricks} />
-          <div>
-            <h1 className="text-2xl font-bold text-slate-900 dark:text-white">
-              Formbricks Website Survey Demo App
-            </h1>
-            <p className="text-slate-700 dark:text-slate-300">
-              This app helps you test your app surveys. You can create and test user actions, create and
-              update user attributes, etc.
-            </p>
-          </div>
-        </div>
-
-        <button
-          className="mt-2 rounded-lg bg-slate-200 px-6 py-1 dark:bg-slate-700 dark:text-slate-100"
-          onClick={() => setDarkMode(!darkMode)}>
-          {darkMode ? "Toggle Light Mode" : "Toggle Dark Mode"}
-        </button>
-      </div>
-
-      <div className="my-4 grid grid-cols-1 gap-6 md:grid-cols-2">
-        <div>
-          <div className="rounded-lg border border-slate-300 bg-slate-100 p-6 dark:border-slate-600 dark:bg-slate-900">
-            <h3 className="text-lg font-semibold text-slate-900 dark:text-white">1. Setup .env</h3>
-            <p className="text-slate-700 dark:text-slate-300">
-              Copy the environment ID of your Formbricks app to the env variable in /apps/demo/.env
-            </p>
-            <Image src={fbsetup} alt="fb setup" className="mt-4 rounded" priority />
-
-            <div className="mt-4 flex-col items-start text-sm text-slate-700 sm:flex sm:items-center sm:text-base dark:text-slate-300">
-              <p className="mb-1 sm:mb-0 sm:mr-2">You&apos;re connected with env:</p>
-              <div className="flex items-center">
-                <strong className="w-32 truncate sm:w-auto">
-                  {process.env.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID}
-                </strong>
-                <span className="relative ml-2 flex h-3 w-3">
-                  <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-500 opacity-75"></span>
-                  <span className="relative inline-flex h-3 w-3 rounded-full bg-green-500"></span>
-                </span>
-              </div>
-            </div>
-          </div>
-          <div className="mt-4 rounded-lg border border-slate-300 bg-slate-100 p-6 dark:border-slate-600 dark:bg-slate-900">
-            <h3 className="text-lg font-semibold text-slate-900 dark:text-white">2. Widget Logs</h3>
-            <p className="text-slate-700 dark:text-slate-300">
-              Look at the logs to understand how the widget works.{" "}
-              <strong className="dark:text-white">Open your browser console</strong> to see the logs.
-            </p>
-            {/* <div className="max-h-[40vh] overflow-y-auto py-4">
-              <LogsContainer />
-            </div> */}
-          </div>
-        </div>
-
-        <div className="md:grid md:grid-cols-3">
-          <div className="col-span-3 self-start rounded-lg border border-slate-300 bg-slate-100 p-6 dark:border-slate-600 dark:bg-slate-800">
-            <h3 className="text-lg font-semibold dark:text-white">
-              Reset person / pull data from Formbricks app
-            </h3>
-            <p className="text-slate-700 dark:text-slate-300">
-              On formbricks.reset() the local state will <strong>be deleted</strong> and formbricks gets{" "}
-              <strong>reinitialized</strong>.
-            </p>
-            <button
-              className="my-4 rounded-lg bg-slate-500 px-6 py-3 text-white hover:bg-slate-700 dark:bg-slate-700 dark:hover:bg-slate-600"
-              onClick={() => {
-                formbricks.reset();
-              }}>
-              Reset
-            </button>
-            <p className="text-xs text-slate-700 dark:text-slate-300">
-              If you made a change in Formbricks app and it does not seem to work, hit &apos;Reset&apos; and
-              try again.
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default AppPage;

apps/demo/tsconfig.json

@@ -1,5 +1,23 @@
 {
-  "extends": "@formbricks/tsconfig/nextjs.json",
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules"]
 }

apps/docs/app/app-surveys/actions/page.mdx

@@ -1,116 +0,0 @@
-import { MdxImage } from "@/components/MdxImage";
-
-import I1 from "./images/I1.webp";
-import I2 from "./images/I2.webp";
-
-export const metadata = {
-  title: "Using Actions in Formbricks | Fine-tuning User Moments",
-  description:
-    "Dive deep into how actions in Formbricks help products and teams to engage users at precise moments in their journey. Discover the power of actions, from coding to no-code setups, to refine user targeting and generate richer, more detailed user insights.",
-};
-
-#### App Surveys
-
-# Actions & Targeting
-
-Understanding user thoughts and feelings at critical moments in their journey is pivotal. To achieve this, Formbricks uses user-centric actions that trigger surveys at precisely the right time. Actions are essentially notifications sent from your application to Formbricks when predefined user activities occur, making it possible to gather insights during key interactions.
-
-<Note>
-  Ensure that you’ve **initialized Formbricks with a userId** to fully utilize this feature along with other
-  app survey capabilities.
-</Note>
-
-## **How Do Actions Work?**
-
-Actions in Formbricks App Surveys are deeply integrated with user activities within your app. When a user performs a specified action, the Formbricks widget detects this activity and can present a survey to that specific user if the trigger conditions match of that survey, while also recording the event. This capability ensures that surveys are not only triggered at the right time but are also tailored to the user’s recent interactions within the app. You can set up these actions through a user-friendly No-Code interface within the Formbricks dashboard.
-
-## **Why Are Actions Useful?**
-
-Actions are invaluable for enhancing survey relevance and effectiveness:
-
-- **Personalized Engagement**: Surveys triggered by user actions ensure content is highly relevant and engaging, matching each user’s current context.
-- **User Attributes**: By tying surveys to specific user attributes, such as activity levels or feature usage, you can customize the survey experience to reflect individual user profiles.
-- **User Segments**: Analyze action data to create detailed user segments, targeting specific groups with surveys that are pertinent to their behaviors or interactions within the app.
-- **User Targeting**: Precise targeting based on user actions and attributes ensures that surveys are shown only to users who meet certain criteria, enhancing the relevance and effectiveness of each survey.
-
-## **Setting Up No-Code Actions**
-
-Formbricks offers an intuitive No-Code interface that allows you to configure actions without needing to write any code.
-
-To add a No-Code Action:
-
-1. Visit the Formbricks Dashboard & switch to the Actions tab:
-
-<MdxImage
-  src={I1}
-  alt="setup checklist ui of survey popup for app surveys"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl"
-/>
-
-2. Now click on “Add Action”
-
-<MdxImage
-  src={I2}
-  alt="setup checklist ui of survey popup for app surveys"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl"
-/>
-
-Here are three types of No-Code actions you can set up:
-
-### **1. Page URL Action**
-
-This action is triggered when a user visits a specific page within your application. You can define the URL match conditions as follows:
-
-- **exactMatch**: Triggers the action when the URL exactly matches the specified string.
-- **contains**: Activates when the URL contains the specified substring.
-- **startsWith**: Fires when the URL starts with the specified string.
-- **endsWith**: Executes when the URL ends with the specified string.
-- **notMatch**: Triggers when the URL does not match the specified condition.
-- **notContains**: Activates when the URL does not contain the specified substring.
-
-### **2. innerText Action**
-
-Checks if the innerText of a clicked HTML element, like a button label, matches a specific text. This action allows you to display a survey based on text interactions within your application.
-
-### **3. CSS Selector Action**
-
-This action verifies if a clicked HTML element matches a provided CSS selector, such as a class, ID, or any other CSS selector used in your website. It enables survey triggers based on element interactions.
-
-<Note>You can have an action use combination of the 3 types as you wish</Note>
-
-## **Setting Up Code Actions**
-
-For more granular control, you can implement actions directly in your codebase:
-
-1. **Configure the Action**: First, add the action via the Formbricks web interface to make it available for survey configuration.
-   After that you can fire an action using `formbricks.track()`
-
-2. **Track an Action**: Use formbricks.track() to send an action event to Formbricks.
-
-<Col>
-<CodeGroup title="Track an action">
-
-```javascript
-formbricks.track("Action Name");
-```
-
-</CodeGroup>
-</Col>
-Here is an example of how to fire an action when a user clicks a button:
-<Col>
-<CodeGroup title="Track Button Click">
-
-```javascript
-const handleClick = () => {
-  formbricks.track("Button Clicked");
-};
-
-return <button onClick={handleClick}>Click Me</button>;
-```
-
-</CodeGroup>
-</Col>
-
-This documentation frames actions around user interactions, emphasizing the connection between the user's activities and the survey experience. By leveraging user-centric actions, you can create highly targeted and timely surveys that resonate with users and yield valuable insights.

apps/docs/app/app-surveys/advanced-targeting/page.mdx

@@ -1,94 +0,0 @@
-import { MdxImage } from "@/components/MdxImage";
-import { ResponsiveVideo } from "@/components/ResponsiveVideo";
-
-import GermansGpt from "./germans-gpt.webp";
-import Hni from "./hni.webp";
-import PowerUsers from "./power-users.webp";
-import RideHailing from "./ride-hailing.webp";
-import UpsellMiro from "./upsell-miro.webp";
-
-export const metadata = {
-  title: "Advanced Targeting in Surveys | Formbricks",
-  description:
-    "Advanced Targeting allows you to show surveys to just the right group of people. You can target surveys based on user attributes, user events, metadata , literally anything! This helps you get more relevant feedback and make data-driven decisions. All of this without writing a single line of code.",
-};
-
-#### App Surveys
-
-# Advanced Targeting
-
-Advanced Targeting allows you to show surveys to the right group of people. You can target surveys based on user attributes, user events, and more instead of spraying and praying. This helps you get more relevant feedback and make data-driven decisions. All of this without writing a single line of code.
-
-<ResponsiveVideo title="Formbricks Multi-language Surveys"
- src="https://www.youtube-nocookie.com/embed/0BQp6N4cXzU?si=KeBM7G7Ch1xtrsOm&amp;controls=0" />
-
-
-## How to setup Advanced Targeting
-
-<Note>
-  Advanced Targeting is available on the Pro plan! Don't worry, you just need to enter your credit card
-  details to start the freemium plan.
-</Note>
-
-1. On the Formbricks dashboard, click on **People** tab from the top navigation bar.
-
-2. Switch to the **Segments** tab & click on **Create Segment**.
-
-3. Give your segment a title & a description to help you remember what this segment is about.
-
-4. Now click on the **Add Filter** button to add a filter. You can filter based on actions, user attributes, other segments, devices, and more.
-
-5. To group a set of filters together, click on the Three Dots icon on the right side of the filter and click on **Create Group**.
-
-6. Try playing around with different filters & conditions that we have provided to see how the segment size changes.
-
-7. Once you are happy with the segment, click on **Save Segment**.
-
-8. Now, when you create a survey, you can select this segment to target your survey to.
-
-## Examples:
-
-1. Let's say you want to upsell to: Miro, Loom, Figma, Slack and Asana.
-
-   <MdxImage
-     src={UpsellMiro}
-     alt="Upselling Opportunity"
-     quality="100"
-     className="max-w-full rounded-lg sm:max-w-3xl"
-   />
-
-2. Post-experience surveying for a ride hailing app where users who have taken more than 1 ride are shown a survey.
-
-   <MdxImage
-     src={RideHailing}
-     alt="Ride Hailing Targeting"
-     quality="100"
-     className="max-w-full rounded-lg sm:max-w-3xl"
-   />
-
-3. Target High Value users who have $100k+ in their bank account, own 20+ stocks, and have are an active user.
-
-   <MdxImage
-     src={Hni}
-     alt="Target Active High Net Worth Individuals"
-     quality="100"
-     className="max-w-full rounded-lg sm:max-w-3xl"
-   />
-
-4. Target Germans on mobile phones who have regenerated chatGPT answers frequently in the last quarter and did so today.
-
-   <MdxImage
-     src={GermansGpt}
-     alt="Target Germans on Mobile Phones who have regenerated chatGPT answers frequently in the last quarter and did so today"
-     quality="100"
-     className="max-w-full rounded-lg sm:max-w-3xl"
-   />
-
-5. Sneak Peak: How we at Formbricks automate inviting power users to chat with us
-
-   <MdxImage
-     src={PowerUsers}
-     alt="Automate inviting power users to chat with us at Formbricks"
-     quality="100"
-     className="max-w-full rounded-lg sm:max-w-3xl"
-   />

apps/docs/app/app-surveys/quickstart/page.mdx

@@ -1,117 +0,0 @@
-import { MdxImage } from "@/components/MdxImage";
-
-import I1 from "./images/I1.webp";
-import I2 from "./images/I2.webp";
-import I3 from "./images/I3.webp";
-import I4 from "./images/I4.webp";
-import I5 from "./images/I5.webp";
-import I6 from "./images/I6.webp";
-import I7 from "./images/I7.webp";
-import I8 from "./images/I8.webp";
-
-export const metadata = {
-  title: "Formbricks Quickstart Guide: App Surveys Made Easier & Faster",
-  description:
-    "Formbricks is the easiest way to create and manage app surveys. This quickstart guide will show you how to create your first app survey in under 5 minutes.",
-};
-
-#### App Surveys
-
-# Quickstart
-
-App surveys have 6-10x better conversion rates than emailed out surveys. This tutorial explains how to run an app survey in your web app in 10 to 15 minutes. Let’s go!
-
-<Note>
-  App Surveys are ideal for websites that **have a user authentication** system. If you are looking to run
-  surveys on your public facing website, head over to the [Website Surveys Quickstart
-  Guide](/website-surveys/quickstart).
-</Note>
-
-1. **Create a free Formbricks Cloud account**: While you can [self-host](/self-hosting/deployment) Formbricks, but the quickest and easiest way to get started is with the free Cloud plan. Just [sign up here](https://app.formbricks.com/auth/signup) and you'll be guided to our onboarding like below:
-
-<Note>
-  Website & App Surveys have the same integration process. The difference will come when we setup our survey.
-</Note>
-
-<MdxImage
-  src={I1}
-  alt="Choose website survey from survey type"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl "
-/>
-
-2. **Connect your App/Website**: Once you get through a couple of onboarding steps, you’ll be asked to connect your app or website. This is where you’ll find the code snippet for both HTML as well as the npm package which you need to embed in your app:
-
-<MdxImage
-  src={I2}
-  alt="Code snippet for connecting app with Formbricks"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl"
-/>
-
-Paste the code snippet in your app and reload the page. You should now see the Formbricks widget in the lower right corner of your app! The integration is now complete.
-
-<MdxImage
-  src={I3}
-  alt="App connected with Formbricks"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl"
-/>
-
-Onboarding is complete! Now let’s create our first survey as you should see templates to choose from after clicking on **Next**:
-
-<MdxImage
-  src={I4}
-  alt="Choose a survey template"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl"
-/>
-
-3. **Create your first survey**: To be able to see a survey in your app, you need to create one. We’ll choose one of the templates and head over to the survey settings:
-
-Pick the Survey Type as **App Survey**.
-
-<MdxImage
-  src={I5}
-  alt="Survey settings for app survey"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl"
-/>
-
-4. **Set Trigger for the Survey**: Scroll down to Survey Trigger and click on **+ Add action**, choose **New Session**. This will cause this survey to appear when the Formbricks Widget tracks a new user session:
-
-<MdxImage
-  src={I6}
-  alt="Survey trigger settings for app survey"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl"
-/>
-
-5. **Set Recontact Options for debugging**: In Recontact Options we choose the following settings, so that we can play around with the survey more easily. By default, each survey will be shown only once to each user to prevent survey fatigue:
-
-<Note>
-  Please change this setting later on after testing your survey to prevent survey fatigue for your users.
-</Note>
-
-<MdxImage
-  src={I7}
-  alt="Recontact options for app survey"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl"
-/>
-
-6. **Publish your survey**: Now hit **Publish** and you’ll be forwarded to the Summary Page. This is where you’ll find the responses to this survey.
-
-<MdxImage
-  src={I8}
-  alt="Survey published successfully"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl"
-/>
-
----
-
-- We offer framework guides for various frontend tech, head over to the the [App Survey Framework Guides](/app-survey/framework-guides) to get started with your app survey.
-- Head over to our App Survey SDK documentation to get started with the [App Survey JS SDK](/developer-docs/app-survey-sdk).
-
-Still struggling or something not working as expected? [Join our Discord!](https://formbricks.com/discord) and we'd be glad to assist you!

apps/docs/app/app-surveys/recontact/page.mdx

@@ -1,107 +0,0 @@
-import { MdxImage } from "@/components/MdxImage";
-
-import AppSurvey from "./app-survey.webp";
-import GlobalWaitTime from "./global-wait-time.webp";
-import IgnoreWaitTime from "./ignore-wait-time.webp";
-import SurveyRecontact from "./survey-recontact.webp";
-
-export const metadata = {
-  title: "Recontact Options in Formbricks: When to show a survey again to a user",
-  description:
-    "Explore how to configure Recontact options in Formbricks to control the frequency of survey exposure to users, ensuring effective feedback collection without compromising user experience.",
-};
-
-#### App Surveys
-
-# Recontact Options
-
-Recontact options in Formbricks enable you to manage how often and under what conditions a survey is shown to a user. This feature is crucial for balancing effective feedback collection with a positive user experience by preventing survey fatigue.
-
-## When do Recontact Options come into play?
-
-Recontact options are the last layer of the logic that determines if a survey is shown to the current user. The logic goes as follows:
-
-1. Targeting: Does the current user targeted to fill out this survey? If yes...
-2. Trigger: Is the survey triggered? If yes...
-3. **Recontact Options:** Should the survey be shown (again) to this user? That's dependent on:
-
-- Did the user see any survey recently (meaning, has Global Waiting Time passed)?
-- Did the user see this specific survey already?
-- How many times did the user see this specific survey already?
-- Has the user already responded to this survey?
-
-As you can see, there are a lot of different cases to cover. Let's have a closer look 👇
-
-## Recontact Options
-
-<Note>By default, a survey is shown to each user only once.</Note>
-
-You can adjust the default behavior by modifying the Recontact Options for each survey in the settings:
-
-1. Open the Survey Editor for the survey you want to see & modify the Recontact Options for.
-2. Select the Settings Tab.
-3. Ensure your Survey type is set to **App Survey**.
-
-<MdxImage
-  src={AppSurvey}
-  alt="Choose Survey Type as App Survey"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl"
-/>
-
-4. Scroll down to the Recontact Options section.
-
-Available Recontact Options include:
-
-- **Show only once**: (default) Displays the survey a single time, regardless of whether it was completed.
-- **Until they Submit a Response**: If tareting matches and trigger fires, Formbricks keeps showing the survey until the user submits a response.
-- **Keep Showing while Conditions Match**: Always shows the survey while specific conditions are met. Useful for continuous feedback collection, such as in [Docs Feedback Survey](/best-practices/docs-feedback) or the [Feedback Box](/best-practices/feedback-box).
-
-<MdxImage
-  src={SurveyRecontact}
-  alt="Choose Recontanct Options for the Survey"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl"
-/>
-
-## Product-wide Global Waiting Time
-
-The Global Waiting Time is a universal blocker to make sure that no user sees too many surveys. This is particularly helpful when several teams of large organisations use Formbricks at the same time.
-
-<Note>The default Global Waiting Time is set to 7 days.</Note>
-
-To adjust the Global Waiting Time:
-
-1. Visit Formbricks Settings
-2. Go to Product Settings
-3. Find the **Recontact Waiting Time** section
-4. Modify the interval (in days) as needed.
-
-<MdxImage
-  src={GlobalWaitTime}
-  alt="Formbricks Product-Wide Wait Time"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl"
-/>
-
-## Overriding Global Waiting Time for a Specific Survey
-
-For specific surveys, you may need to override the default waiting time. Below is how you can do that:
-
-1. In the Survey Editor, access the Settings Tab.
-2. Find the Ignore Waiting Time between Surveys toggle under Recontact Options.
-3. Enable this toggle to bypass the global setting.
-4. Set a custom recontact period:
-   - **Always Show Survey**: Displays the survey whenever triggered, ignoring the waiting time.
-   - **Wait `X` days before showing this survey again**: Sets a specific interval before the survey can be shown again.
-
-<MdxImage
-  src={IgnoreWaitTime}
-  alt="Ignore Global Waiting Time for a Specific Survey"
-  quality="100"
-  className="max-w-full rounded-lg sm:max-w-3xl"
-/>
-
----
-
-Still struggling or something not working as expected? [Join our Discord!](https://formbricks.com/discord) and we'd be glad to assist you!

apps/docs/app/developer-docs/api-sdk/page.mdx

@@ -1,269 +0,0 @@
-import { MdxImage } from "@/components/MdxImage";
-
-export const metadata = {
-  title: "Formbricks API SDK",
-  description:
-    "An overview of all available methods & how to integrate Formbricks API for backend developers in web applications. Learn the key methods, configuration settings, and best practices.",
-};
-
-#### Developer Docs
-
-# SDK: Formbricks API
-
-### Overview
-
-The Formbricks Client API Wrapper is a lightweight package designed to simplify the integration of Formbricks API endpoints into your JavaScript (JS) or TypeScript (TS) projects. With this wrapper, you can easily interact with Formbricks API endpoints without the need for complex setup or manual HTTP requests.
-
-### Install
-
-<Col>
-<CodeGroup title="npm">
-
-```js {{ title: 'npm' }}
-npm install @formbricks/api
-```
-
-```js {{ title: 'yarn' }}
-yarn add @formbricks/api
-```
-
-```js {{ title: 'pnpm' }}
-pnpm add @formbricks/api
-```
-
-</CodeGroup>
-</Col>
-
-## Methods
-
-### Initialize Formbricks
-
-Initialize the Formbricks API Client for backend developers to interact with Formbricks API endpoints:
-
-<Col>
-<CodeGroup title="Initialize Formbricks API">
-
-```javascript
-import { FormbricksAPI } from "@formbricks/api";
-
-const api = new FormbricksAPI({
-  apiHost: `https://app.formbricks.com`, // If you have self-hosted Formbricks, change this to your self hosted instance's URL
-  environmentId: "<environment-id>", // Replace this with your Formbricks environment ID
-});
-```
-
-</CodeGroup>
-</Col>
-
-The API client is now ready to be used across your project. It can be used to interact with the following models:
-
-## Displays
-
-- Create Display
-
-<Col>
-<CodeGroup title="Crate Display">
-
-```javascript {{ title: 'Create Display Method Call'}}
-await api.client.display.create({
-  surveyId: "<your-survey-id>", // required
-  userId: "<your-user-id>", // optional
-  responseId: "<your-response-id>", // optional
-});
-```
-
-```javascript {{ title: 'Create Display Method Return Type' }}
-Promise<{ id: string }, NetworkError | Error>
-```
-
-</CodeGroup>
-</Col>
-
-- Update Display
-
-<Col>
-<CodeGroup title="Update Display">
-
-```javascript {{ title: 'Update Display Method Call'}}
-await api.client.display.update(
-  displayId: "<your-display-id>",
-  {
-    userId: "<your-user-id>", // optional
-    responseId: "<your-response-id>", // optional
-  },
-);
-```
-
-```javascript {{ title: 'Update Display Method Return Type' }}
-Promise<{ }, NetworkError | Error]>
-```
-
-</CodeGroup>
-</Col>
-
-## Responses
-
-- Create Response
-
-<Col>
-<CodeGroup title="Create Response">
-
-```javascript {{ title: 'Create Response Method Call'}}
-await api.client.response.create({
-  surveyId: "<your-survey-id>", // required
-  finished: boolean, // required
-  data: {
-    // required
-    questionId: "<answer-to-this-question-in-string>",
-    anotherQuestionId: 123, // answer to this question in number
-    yetAnotherQuestionId: ["option1", "option2"], // answer to this question in array,
-  },
-
-  userId: "<your-user-id>",
-  singleUseId: "<your-single-use-id>",
-  ttc: {
-    questionId: 123,
-  },
-  meta: {
-    source: "<your-source>",
-    url: "<your-url>",
-    userAgent: {
-      browser: "<your-browser>",
-      device: "<your-device>",
-      os: "<your-os>",
-    },
-    country: "<your-country>",
-  },
-});
-```
-
-```javascript {{ title: 'Create Response Method Return Type' }}
-Promise<{ id: string }, NetworkError | Error>
-```
-
-</CodeGroup>
-</Col>
-
-- Update Response
-
-<Col>
-<CodeGroup title="Update Response">
-
-```javascript {{ title: 'Update Response Method Call'}}
-await api.client.response.update({
-  responseId: "<your-response-id>", // required
-  finished: boolean, // required
-  data: {
-    // required
-    questionId: "<answer-to-this-question-in-string>",
-    anotherQuestionId: 123, // answer to this question in number
-    yetAnotherQuestionId: ["option1", "option2"], // answer to this question in array,
-  },
-  ttc: {
-    // required
-    questionId: 123,
-  },
-});
-```
-
-```javascript {{ title: 'Update Response Method Return Type' }}
-Promise<{ }, NetworkError | Error]>
-```
-
-</CodeGroup>
-</Col>
-
-## Action
-
-- Create Action:
-
-<Note> An environment cannot have 2 actions with the same name. </Note>
-
-<Col>
-<CodeGroup title="Create Action">
-
-```javascript {{ title: 'Create Action Method Call'}}
-await api.client.action.create({
-  name: "<your-action-name>", // required
-  userId: "<your-user-id>", // required
-});
-```
-
-```javascript {{ title: 'Create Action Method Return Type' }}
-Promise<{ }, NetworkError | Error]>
-```
-
-</CodeGroup>
-</Col>
-
-## Attribute
-
-- Update Attribute
-
-<Col>
-<CodeGroup title="Update Attribute">
-
-```javascript {{ title: 'Update Attribute Method Call'}}
-await api.client.attribute.update({
-  userId: "<your-user-id>", // required
-  attributes: {
-    key1: "value1",
-    key2: "value2",
-  }, // required
-});
-```
-
-```javascript {{ title: 'Update Attribute Method Return Type' }}
-Promise<{ changed: boolean, message: string }, NetworkError | Error>
-```
-
-</CodeGroup>
-</Col>
-
-## People
-
-- Create Person
-
-<Col>
-<CodeGroup title="Create Person">
-
-```javascript {{ title: 'Create Person Method Call'}}
-await api.client.people.create({
-  userId: "<your-user-id>", // required
-});
-```
-
-```javascript {{ title: 'Create Person Method Return Type' }}
-Promise<{ }, NetworkError | Error]>
-```
-
-</CodeGroup>
-</Col>
-
-## Storage
-
-- Upload File:
-
-<Col>
-<CodeGroup title="Upload File">
-
-```javascript {{ title: 'Upload Method Call'}}
-await api.client.storage.uploadFile(
-  file: File, // required (of interface File of the browser's File API)
-  {
-    allowedFileTypes: ["file-type-allowed", "for-example", "image/jpeg"],
-    surveyId: "<your-survey-id>",
-  }
-);
-```
-
-```javascript {{ title: 'Upload Method Return Type' }}
-Promise<fileUrl>
-```
-
-</CodeGroup>
-</Col>
-
----
-
-If you have any questions or need help, feel free to reach out to us on our **[Discord](https://formbricks.com/discord)**