add saas demo

.changeset/config.json

@@ -1,11 +1,11 @@
 {
   "$schema": "https://unpkg.com/@changesets/config@2.2.0/schema.json",
-  "access": "public",
-  "baseBranch": "main",
   "changelog": "@changesets/cli/changelog",
   "commit": false,
   "fixed": [],
-  "ignore": ["@formbricks/demo", "@formbricks/web"],
   "linked": [],
-  "updateInternalDependencies": "patch"
+  "access": "public",
+  "baseBranch": "main",
+  "updateInternalDependencies": "patch",
+  "ignore": ["@formbricks/formbricks-com", "@formbricks/demo", "@formbricks/web"]
 }

.devcontainer/Dockerfile

@@ -0,0 +1,16 @@
+# [Choice] Node.js version (use -bullseye variants on local arm64/Apple Silicon): 18, 16, 14, 18-bullseye, 16-bullseye, 14-bullseye, 18-buster, 16-buster, 14-buster
+ARG VARIANT=20
+FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-${VARIANT}
+
+# [Optional] Uncomment this section to install additional OS packages.
+# RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
+#     && apt-get -y install --no-install-recommends <your-package-list-here>
+
+# [Optional] Uncomment if you want to install an additional version of node using nvm
+# ARG EXTRA_NODE_VERSION=10
+# RUN su node -c "source /usr/local/share/nvm/nvm.sh && nvm install ${EXTRA_NODE_VERSION}"
+
+# [Optional] Uncomment if you want to install more global node modules
+# RUN su node -c "npm install -g <your-package-list-here>"
+
+RUN su node -c "npm install -g pnpm"

.devcontainer/devcontainer.json

@@ -1,6 +1,29 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
+// https://github.com/microsoft/vscode-dev-containers/tree/v0.245.2/containers/javascript-node-postgres
+// Update the VARIANT arg in docker-compose.yml to pick a Node.js version
 {
-  "features": {},
-  "image": "mcr.microsoft.com/devcontainers/universal:2",
-  "postAttachCommand": "pnpm go",
-  "postCreateCommand": "cp .env.example .env && sed -i '/^ENCRYPTION_KEY=/c\\ENCRYPTION_KEY='$(openssl rand -hex 32) .env && sed -i '/^NEXTAUTH_SECRET=/c\\NEXTAUTH_SECRET='$(openssl rand -hex 32) .env && sed -i '/^CRON_SECRET=/c\\CRON_SECRET='$(openssl rand -hex 32) .env && pnpm install && pnpm db:migrate:dev"
+  "name": "Node.js & PostgreSQL",
+  "dockerComposeFile": "docker-compose.yml",
+  "service": "app",
+  "workspaceFolder": "/workspace",
+
+  // Configure tool-specific properties.
+  "customizations": {
+    // Configure properties specific to VS Code.
+    "vscode": {
+      // Add the IDs of extensions you want installed when the container is created.
+      "extensions": ["dbaeumer.vscode-eslint"]
+    }
+  },
+
+  // Use 'forwardPorts' to make a list of ports inside the container available locally.
+  // This can be used to network with other containers or with the host.
+  "forwardPorts": [3000, 5432, 8025],
+
+  // Use 'postCreateCommand' to run commands after the container is created.
+  "postCreateCommand": "cp .env.example .env && sed -i '/^ENCRYPTION_KEY=/c\\ENCRYPTION_KEY='$(openssl rand -hex 32) .env && sed -i '/^NEXTAUTH_SECRET=/c\\NEXTAUTH_SECRET='$(openssl rand -hex 32) .env && pnpm install && pnpm db:migrate:dev",
+  "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"
 }

.devcontainer/docker-compose.yml

@@ -0,0 +1,52 @@
+version: '3.8'
+
+services:
+  app:
+    build:
+      context: .
+      dockerfile: Dockerfile
+      args:
+        # Update 'VARIANT' to pick an LTS version of Node.js: 20, 18, 16, 14.
+        # Append -bullseye or -buster to pin to an OS version.
+        # Use -bullseye variants on local arm64/Apple Silicon.
+        VARIANT: "20"
+
+    volumes:
+      - ..:/workspace:cached
+
+    # Overrides default command so things don't shut down after the process ends.
+    command: sleep infinity
+
+    # Runs app on the same network as the database container, allows "forwardPorts" in devcontainer.json function.
+    network_mode: service:db
+    # Uncomment the next line to use a non-root user for all processes.
+    # user: node
+
+    # Use "forwardPorts" in **devcontainer.json** to forward an app port locally. 
+    # (Adding the "ports" property to this file will not forward from a Codespace.)
+
+  db:
+    image: postgres:latest
+    restart: unless-stopped
+    volumes:
+      - postgres-data:/var/lib/postgresql/data
+    environment:
+      POSTGRES_PASSWORD: postgres
+      POSTGRES_USER: postgres
+      POSTGRES_DB: formbricks
+    # Add "forwardPorts": ["5432"] to **devcontainer.json** to forward PostgreSQL locally.
+    # (Adding the "ports" property to this file will not forward from a Codespace.)
+
+  mailhog:
+    image: mailhog/mailhog
+    network_mode: service:app
+    logging:
+      driver: "none" # disable saving logs
+        #    ports:
+      #    - 8025:8025 # web ui
+      # 1025:1025 # smtp server
+
+
+
+volumes:
+  postgres-data: null

.dockerignore

@@ -35,5 +35,3 @@ yarn-error.log*
 .vscode
 .github
 **/.turbo
-
-.env

.env.example

@@ -8,8 +8,8 @@
 
 WEBAPP_URL=http://localhost:3000
 
-# Required for next-auth. Should be the same as WEBAPP_URL
-NEXTAUTH_URL=http://localhost:3000
+# Set this if you want to have a shorter link for surveys
+SHORT_URL_BASE=
 
 # Encryption keys
 # Please set both for now, we will change this in the future
@@ -17,20 +17,24 @@ NEXTAUTH_URL=http://localhost:3000
 # You can use: `openssl rand -hex 32` to generate one
 ENCRYPTION_KEY=
 
-# @see: https://next-auth.js.org/configuration/options#nextauth_secret
-# You can use: `openssl rand -hex 32` to generate a secure one
-NEXTAUTH_SECRET=
-
-# API Secret for running cron jobs. (mandatory)
-# You can use: `openssl rand -hex 32` to generate a secure one
-CRON_SECRET=
-
 ##############
 #  DATABASE  #
 ##############
 
 DATABASE_URL='postgresql://postgres:postgres@localhost:5432/formbricks?schema=public'
 
+###############
+#  NEXT AUTH  #
+###############
+
+# @see: https://next-auth.js.org/configuration/options#nextauth_secret
+# You can use: `openssl rand -hex 32` to generate one
+NEXTAUTH_SECRET=RANDOM_STRING
+
+# Set this to your public-facing URL, e.g., https://example.com
+# You do not need the NEXTAUTH_URL environment variable in Vercel.
+NEXTAUTH_URL=http://localhost:3000
+
 ################
 #  MAIL SETUP  #
 ################
@@ -46,9 +50,6 @@ SMTP_SECURE_ENABLED=0
 SMTP_USER=smtpUser
 SMTP_PASSWORD=smtpPassword
 
-# If set to 0, the server will accept connections without requiring authorization from the list of supplied CAs (default is 1). 
-# SMTP_REJECT_UNAUTHORIZED_TLS=0
-
 ########################################################################
 # ------------------------------ OPTIONAL -----------------------------#
 ########################################################################
@@ -70,8 +71,6 @@ S3_BUCKET_NAME=
 # Configure a third party S3 compatible storage service endpoint like StorJ leave empty if you use Amazon S3
 # e.g., https://gateway.storjshare.io
 S3_ENDPOINT_URL=
-# Force path style for S3 compatible storage (0 for disabled, 1 for enabled)
-S3_FORCE_PATH_STYLE=0
 
 #####################
 # Disable Features  #
@@ -84,13 +83,12 @@ EMAIL_VERIFICATION_DISABLED=1
 PASSWORD_RESET_DISABLED=1
 
 # Signup. Disable the ability for new users to create an account.
-# Note: This variable is only available to the SaaS setup of Formbricks Cloud. Signup is disable by default for self-hosting.
 # SIGNUP_DISABLED=1
 
 # Email login. Disable the ability for users to login with email.
 # EMAIL_AUTH_DISABLED=1
 
-# Organization Invite. Disable the ability for invited users to create an account.
+# Team Invite. Disable the ability for invited users to create an account.
 # INVITE_DISABLED=1
 
 ##########
@@ -122,6 +120,9 @@ AZUREAD_TENANT_ID=
 # OIDC_DISPLAY_NAME=
 # OIDC_SIGNING_ALGORITHM=
 
+# Cron Secret
+CRON_SECRET=
+
 # Configure this when you want to ship JS & CSS files from a complete URL instead of the current domain
 # ASSET_PREFIX_URL=
 
@@ -153,11 +154,14 @@ SLACK_CLIENT_SECRET=
 # Enterprise License Key
 ENTERPRISE_LICENSE_KEY=
 
-# Automatically assign new users to a specific organization and role within that organization
-# Insert an existing organization id or generate a valid CUID for a new one at https://www.getuniqueid.com/cuid (e.g. cjld2cjxh0000qzrmn831i7rn)
+# Automatically assign new users to a specific team and role within that team
+# Insert an existing team id or generate a valid CUID for a new one at https://www.getuniqueid.com/cuid (e.g. cjld2cjxh0000qzrmn831i7rn)
 # (Role Management is an Enterprise feature)
-# DEFAULT_ORGANIZATION_ID=
-# DEFAULT_ORGANIZATION_ROLE=owner
+# DEFAULT_TEAM_ID=
+# DEFAULT_TEAM_ROLE=admin
+
+# set to 1 to skip onboarding for new users
+# ONBOARDING_DISABLED=1
 
 # Send new users to customer.io
 # CUSTOMER_IO_API_KEY=
@@ -173,16 +177,7 @@ ENTERPRISE_LICENSE_KEY=
 UNSPLASH_ACCESS_KEY=
 
 # The below is used for Next Caching (uses In-Memory from Next Cache if not provided)
-# REDIS_URL=redis://localhost:6379
+# 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:
-
-# Disable custom cache handler if necessary (e.g. if deployed on Vercel)
-# CUSTOM_CACHE_DISABLED=1
-
-# Azure AI settings
-# AI_AZURE_RESSOURCE_NAME=
-# AI_AZURE_API_KEY=
-# AI_AZURE_EMBEDDINGS_DEPLOYMENT_ID=
-# AI_AZURE_LLM_DEPLOYMENT_ID=

.eslintignore

@@ -1,2 +0,0 @@
-node_modules/
-packages/config-eslint/

.eslintrc.js

@@ -0,0 +1,10 @@
+module.exports = {
+  root: true,
+  // This tells ESLint to load the config from the package `eslint-config-formbricks`
+  extends: ["formbricks"],
+  settings: {
+    next: {
+      rootDir: ["apps/*/"],
+    },
+  },
+};

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -1,32 +1,81 @@
 name: Bug report
 description: "Found a bug? Please fill out the sections below. \U0001F44D"
-labels:
-  - bug
+title: "[BUG]"
+labels: bug
+assignees: []
 body:
-  - type: textarea
-    id: issue-summary
-    attributes:
-      label: Issue Summary
-      description: A summary of the issue. This needs to be a clear detailed-rich summary.
-    validations:
-      required: true
-  - type: textarea
-    id: issue-expected-behavior
-    attributes:
-      label: Expected Behavior
-      description: A clear and concise description of what you expected to happen.
-    validations:
-      required: false
-  - type: textarea
-    id: other-information
-    attributes:
-      label: Other information (incl. screenshots, Formbricks version, steps to reproduce,...)
-    validations:
-      required: false
-  - type: dropdown
-    id: environment
-    attributes:
-      label: Your Environment
-      options:
-        - Formbricks Cloud (app.formbricks.com)
-        - Self-hosted Formbricks
+- type: textarea
+  id: issue-summary
+  attributes:
+    label: Issue Summary
+    description: A summary of the issue. This needs to be a clear detailed-rich summary.
+  validations:
+    required: true
+- type: textarea
+  id: steps-to-reproduce
+  attributes:
+    label: Steps to Reproduce
+    value: |
+      1. (for example) Went to ...
+      2. Clicked on...
+      3. ...
+  validations:
+    required: true
+- type: textarea
+  id: expected-behavior
+  attributes:
+    label: Expected behavior
+    description: A clear and concise description of what you expected to happen.
+  validations:
+    required: true
+- type: textarea
+  id: other-information
+  attributes:
+    label: Other information
+  validations:
+    required: false
+- type: textarea
+  id: screenshots
+  attributes:
+    label: Screenshots
+    description: If applicable, add screenshots to help explain your problem.
+  validations:
+    required: false
+- type: checkboxes
+  id: environment
+  attributes:
+    label: Environment
+    options:
+      - label: Formbricks Cloud (app.formbricks.com)
+      - label: Self-hosted Formbricks
+- type: textarea
+  id: desktop-version
+  attributes:
+    label: Desktop (please complete the following information)
+    description: | 
+      examples: 
+      - **OS**: [e.g. iOS]
+      - **Browser**: [e.g. chrome, safari]
+      - **Version**: [e.g. 22]
+    value: |
+      - OS:
+      - Node:
+      - npm: 
+    render: markdown
+  validations:
+    required: true
+- type: markdown
+  id: nodejs-version
+  attributes:
+    value: | 
+      #### Node.JS version
+      
+      [e.g. v18.15.0] 
+- type: markdown
+  id: anything-else
+  attributes:
+    value: |
+      #### Anything else?
+      
+      - Screen recording, console logs, network requests: You can make a recording with [Loom](https://www.loom.com).
+      - Anything else that you think could be an issue?

.github/ISSUE_TEMPLATE/config.yml

@@ -1,5 +1,5 @@
 blank_issues_enabled: false
 contact_links:
   - name: Questions
-    url: https://github.com/formbricks/formbricks/discussions
-    about: Need help selfhosting or ask a general question about the project? Open a discussion
+    url: https://formbricks.com/discord
+    about: Ask a general question about the project on our Discord server

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -1,7 +1,8 @@
 name: Feature request
 description: "Suggest an idea for this project \U0001F680"
-labels:
-  - enhancement
+title: "[FEATURE]"
+labels: enhancement
+assignees: []
 body:
   - type: textarea
     id: problem-description
@@ -17,6 +18,13 @@ body:
       description: A clear and concise description of what you want to happen.
     validations:
       required: true
+  - type: textarea
+    id: alternate-solution-description
+    attributes:
+      label: Describe alternatives you've considered
+      description: A clear and concise description of any alternative solutions or features you've considered.
+    validations:
+      required: false
   - type: textarea
     id: additional-context
     attributes:
@@ -25,9 +33,15 @@ body:
     validations:
       required: false
   - type: markdown
+    id: formbricks-info
     attributes:
       value: |
-        ### Additional resources 🤓
+        ### How we code at Formbricks 🤓
 
-        - Check out our [Contributor Docs](https://formbricks.com/docs/developer-docs/contributing/get-started)
+        - Follow Best Practices lined out in our [Contributor Docs](https://formbricks.com/docs/contributing/how-we-code)
+        - First time: Please read our [introductory blog post](https://formbricks.com/blog/join-the-formtribe)
+        - All UI components are in the package `formbricks/ui`
+        - Run `pnpm go` to find a demo app to test in-app surveys at `localhost:3002`
+        - Everything is type-safe.
+        - We use **chatGPT** to help refactor code.
         - Anything unclear? [Ask in Discord](https://formbricks.com/discord)

.github/PULL_REQUEST_TEMPLATE.md

@@ -4,7 +4,7 @@
 
 <!-- Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change. -->
 
-Fixes #(issue)
+Fixes # (issue)
 
 <!-- Please provide a screenshots or a loom video for visual changes to speed up reviews
  Loom Video: https://www.loom.com/

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

@@ -30,10 +30,6 @@ runs:
           **/dist/**
         key: ${{ runner.os }}-${{ env.cache-name }}-${{ env.key-1 }}-${{ env.key-2 }}
 
-    - name: Set Cache Hit Status
-      run: echo "cache-hit=${{ steps.cache-build.outputs.cache-hit }}" >> "$GITHUB_OUTPUT"
-      shell: bash
-
     - name: Setup Node.js 20.x
       uses: actions/setup-node@v3
       with:
@@ -41,7 +37,7 @@ runs:
       if: steps.cache-build.outputs.cache-hit != 'true'
 
     - name: Install pnpm
-      uses: pnpm/action-setup@v4
+      uses: pnpm/action-setup@v2
       if: steps.cache-build.outputs.cache-hit != 'true'
 
     - name: Install dependencies
@@ -53,18 +49,20 @@ runs:
       run: cp .env.example .env
       shell: bash
 
-    - name: Fill ENCRYPTION_KEY, ENTERPRISE_LICENSE_KEY and E2E_TESTING in .env
+    - name: Add E2E Testing Mode
       run: |
-        RANDOM_KEY=$(openssl rand -hex 32)
-        sed -i "s/ENCRYPTION_KEY=.*/ENCRYPTION_KEY=${RANDOM_KEY}/" .env
-        sed -i "s/CRON_SECRET=.*/CRON_SECRET=${RANDOM_KEY}/" .env
-        sed -i "s/NEXTAUTH_SECRET=.*/NEXTAUTH_SECRET=${RANDOM_KEY}/" .env
-        sed -i "s/ENTERPRISE_LICENSE_KEY=.*/ENTERPRISE_LICENSE_KEY=${RANDOM_KEY}/" .env
-        echo "E2E_TESTING=${{ inputs.e2e_testing_mode }}" >> .env
+        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: |
-        pnpm build --filter=@formbricks/web...
+        pnpm build --filter=web...
 
       if: steps.cache-build.outputs.cache-hit != 'true'
       shell: bash

.github/workflows/build-formbricks-com.yml

@@ -1,15 +1,15 @@
-name: Build Docs
+name: Build formbricks-com
 on:
   workflow_call:
 jobs:
   build:
-    name: Build Docs
+    name: Build Formbricks-com
     runs-on: ubuntu-latest
     timeout-minutes: 30
 
     steps:
-      - uses: actions/checkout@v3
-      - uses: ./.github/actions/dangerous-git-checkout
+      - name: Checkout repo
+        uses: actions/checkout@v3
 
       - name: Setup Node.js 20.x
         uses: actions/setup-node@v3
@@ -17,12 +17,10 @@ jobs:
           node-version: 20.x
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v4
+        uses: pnpm/action-setup@v2
 
       - name: Install dependencies
         run: pnpm install --config.platform=linux --config.architecture=x64
-        shell: bash
 
-      - run: |
-          pnpm build --filter=@formbricks/docs...
-        shell: bash
+      - name: Build Formbricks-com
+        run: pnpm build --filter=formbricks-com...

.github/workflows/build-web.yml

@@ -1,4 +1,4 @@
-name: Build Web
+name: Build web
 on:
   workflow_call:
 jobs:
@@ -11,8 +11,24 @@ jobs:
       - uses: actions/checkout@v3
       - uses: ./.github/actions/dangerous-git-checkout
 
-      - name: Build & Cache Web Binaries
-        uses: ./.github/actions/cache-build-web
-        id: cache-build-web
+      - name: Setup Node.js 20.x
+        uses: actions/setup-node@v3
         with:
-          e2e_testing_mode: "0"
+          node-version: 20.x
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+
+      - name: Install dependencies
+        run: pnpm install --config.platform=linux --config.architecture=x64
+
+      - name: create .env
+        run: cp .env.example .env
+
+      - name: Generate Random ENCRYPTION_KEY
+        run: |
+          SECRET=$(openssl rand -hex 32)
+          echo "ENCRYPTION_KEY=$SECRET" >> $GITHUB_ENV
+
+      - name: Build Formbricks-web
+        run: pnpm build --filter=web...

.github/workflows/chromatic.yml

@@ -1,30 +0,0 @@
-name: "Chromatic"
-
-on:
-  push:
-    branches:
-      - main
-  workflow_dispatch:
-
-jobs:
-  chromatic:
-    name: Run Chromatic
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-      - uses: actions/setup-node@v4
-        with:
-          node-version: 20
-      - name: Install pnpm
-        uses: pnpm/action-setup@v4
-      - name: Install dependencies
-        run: pnpm install --config.platform=linux --config.architecture=x64
-      - name: Run Chromatic
-        uses: chromaui/action@latest
-        with:
-          # ⚠️ Make sure to configure a `CHROMATIC_PROJECT_TOKEN` repository secret
-          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
-          workingDir: apps/storybook

.github/workflows/codeql.yml

@@ -1,92 +0,0 @@
-# For most projects, this workflow file will not need changing; you simply need
-# to commit it to your repository.
-#
-# You may wish to alter this file to override the set of languages analyzed,
-# or to provide custom queries or build logic.
-#
-# ******** NOTE ********
-# We have attempted to detect the languages in your repository. Please check
-# the `language` matrix defined below to confirm you have the correct set of
-# supported CodeQL languages.
-#
-name: "CodeQL Advanced"
-
-on:
-  push:
-    branches: [ "main" ]
-  pull_request:
-    branches: [ "main" ]
-  schedule:
-    - cron: '17 1 * * 1'
-
-jobs:
-  analyze:
-    name: Analyze (${{ matrix.language }})
-    # Runner size impacts CodeQL analysis time. To learn more, please see:
-    #   - https://gh.io/recommended-hardware-resources-for-running-codeql
-    #   - https://gh.io/supported-runners-and-hardware-resources
-    #   - https://gh.io/using-larger-runners (GitHub.com only)
-    # Consider using larger runners or machines with greater resources for possible analysis time improvements.
-    runs-on: ${{ (matrix.language == 'swift' && 'macos-latest') || 'ubuntu-latest' }}
-    permissions:
-      # required for all workflows
-      security-events: write
-
-      # required to fetch internal or private CodeQL packs
-      packages: read
-
-      # only required for workflows in private repositories
-      actions: read
-      contents: read
-
-    strategy:
-      fail-fast: false
-      matrix:
-        include:
-        - language: javascript-typescript
-          build-mode: none
-        # CodeQL supports the following values keywords for 'language': 'c-cpp', 'csharp', 'go', 'java-kotlin', 'javascript-typescript', 'python', 'ruby', 'swift'
-        # Use `c-cpp` to analyze code written in C, C++ or both
-        # Use 'java-kotlin' to analyze code written in Java, Kotlin or both
-        # Use 'javascript-typescript' to analyze code written in JavaScript, TypeScript or both
-        # To learn more about changing the languages that are analyzed or customizing the build mode for your analysis,
-        # see https://docs.github.com/en/code-security/code-scanning/creating-an-advanced-setup-for-code-scanning/customizing-your-advanced-setup-for-code-scanning.
-        # If you are analyzing a compiled language, you can modify the 'build-mode' for that language to customize how
-        # your codebase is analyzed, see https://docs.github.com/en/code-security/code-scanning/creating-an-advanced-setup-for-code-scanning/codeql-code-scanning-for-compiled-languages
-    steps:
-    - name: Checkout repository
-      uses: actions/checkout@v4
-
-    # Initializes the CodeQL tools for scanning.
-    - name: Initialize CodeQL
-      uses: github/codeql-action/init@v3
-      with:
-        languages: ${{ matrix.language }}
-        build-mode: ${{ matrix.build-mode }}
-        # If you wish to specify custom queries, you can do so here or in a config file.
-        # By default, queries listed here will override any specified in a config file.
-        # Prefix the list here with "+" to use these queries and those in the config file.
-
-        # For more details on CodeQL's query packs, refer to: https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
-        # queries: security-extended,security-and-quality
-
-    # If the analyze step fails for one of the languages you are analyzing with
-    # "We were unable to automatically build your code", modify the matrix above
-    # to set the build mode to "manual" for that language. Then modify this step
-    # to build your code.
-    # ℹ️ Command-line programs to run using the OS shell.
-    # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
-    - if: matrix.build-mode == 'manual'
-      shell: bash
-      run: |
-        echo 'If you are using a "manual" build mode for one or more of the' \
-          'languages you are analyzing, replace this with the commands to build' \
-          'your code, for example:'
-        echo '  make bootstrap'
-        echo '  make release'
-        exit 1
-
-    - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v3
-      with:
-        category: "/language:${{matrix.language}}"

.github/workflows/cron-reportUsageToStripe.yml

@@ -0,0 +1,24 @@
+name: Cron - Report usage to Stripe
+
+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 * * *"
+jobs:
+  cron-reportUsageToStripe:
+    env:
+      APP_URL: ${{ secrets.APP_URL }}
+      CRON_SECRET: ${{ secrets.CRON_SECRET }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: cURL request
+        if: ${{ env.APP_URL && env.CRON_SECRET }}
+        run: |
+          curl ${{ env.APP_URL }}/api/cron/report-usage \
+            -X POST \
+            -H 'x-api-key: ${{ env.CRON_SECRET }}' \
+            -H 'Cache-Control: no-cache' \
+            --fail

.github/workflows/cron-surveyStatusUpdate.yml

@@ -4,9 +4,9 @@ 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:

.github/workflows/cron-weeklySummary.yml

@@ -4,9 +4,9 @@ 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:

.github/workflows/e2e.yml

@@ -2,84 +2,67 @@ name: E2E Tests
 on:
   workflow_call:
   workflow_dispatch:
-env:
-  TELEMETRY_DISABLED: 1
 jobs:
   build:
     name: Run E2E Tests
     runs-on: ubuntu-latest
     timeout-minutes: 60
-    services:
-      postgres:
-        image: pgvector/pgvector:pg17
-        env:
-          POSTGRES_DB: postgres
-          POSTGRES_USER: postgres
-          POSTGRES_PASSWORD: postgres
-        ports:
-          - 5432:5432
-        options: >-
-          --health-cmd="pg_isready -U testuser"
-          --health-interval=10s
-          --health-timeout=5s
-          --health-retries=5
     steps:
       - uses: actions/checkout@v3
       - uses: ./.github/actions/dangerous-git-checkout
 
-      - name: Setup Node.js 20.x
-        uses: actions/setup-node@v3
+      - name: Build & Cache Web Binaries
+        uses: ./.github/actions/cache-build-web
         with:
-          node-version: 20.x
+          e2e_testing_mode: "1"
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v4
+        uses: pnpm/action-setup@v2
 
       - name: Install dependencies
-        run: pnpm install --config.platform=linux --config.architecture=x64
-        shell: bash
+        run: pnpm install
 
-      - name: create .env
-        run: cp .env.example .env
-        shell: bash
-
-      - name: Fill ENCRYPTION_KEY, ENTERPRISE_LICENSE_KEY and E2E_TESTING in .env
+      - name: Start PostgreSQL
         run: |
-          RANDOM_KEY=$(openssl rand -hex 32)
-          sed -i "s/ENCRYPTION_KEY=.*/ENCRYPTION_KEY=${RANDOM_KEY}/" .env
-          sed -i "s/CRON_SECRET=.*/CRON_SECRET=${RANDOM_KEY}/" .env
-          sed -i "s/NEXTAUTH_SECRET=.*/NEXTAUTH_SECRET=${RANDOM_KEY}/" .env
-          sed -i "s/ENTERPRISE_LICENSE_KEY=.*/ENTERPRISE_LICENSE_KEY=${RANDOM_KEY}/" .env
-          echo "" >> .env
-          echo "E2E_TESTING=1" >> .env
-        shell: bash
-
-      - name: Build App
+          cd packages/database && pnpm db:up &
+          for attempt in {1..20}; do
+            if nc -zv localhost 5432; then
+              echo "Ready"
+              break
+            fi
+            echo "Waiting..."
+            sleep 5
+          done
+          pnpm db:migrate:dev
+      - name: Serve packages for lazy loading
         run: |
-          pnpm build --filter=@formbricks/web...
-
-      - name: Apply Prisma Migrations
-        run: |
-          pnpm prisma migrate deploy
+          cd packages/surveys && pnpm serve &
 
       - name: Run App
         run: |
-          NODE_ENV=test pnpm start --filter=@formbricks/web &
-          sleep 10  # Optional: gives some buffer for the app to start
-          for attempt in {1..10}; do
+          NODE_ENV=test pnpm start --filter=web &
+          for attempt in {1..20}; do
             if [ $(curl -o /dev/null -s -w "%{http_code}" http://localhost:3000/health) -eq 200 ]; then
-              echo "Application is ready."
+              echo "Ready"
               break
             fi
-            if [ $attempt -eq 10 ]; then
-              echo "Application failed to start in time."
-              exit 1
-            fi
-            echo "Still waiting for the application to be ready..."
+            echo "Waiting..."
             sleep 10
           done
 
+      - name: Test Serve endpoints
+        run: |
+          curl -s http://localhost:3003
+
+      - name: Cache Playwright
+        uses: actions/cache@v3
+        id: playwright-cache
+        with:
+          path: ~/.cache/ms-playwright
+          key: ${{ runner.os }}-playwright-${{ hashFiles('pnpm-lock.yaml') }}
+
       - name: Install Playwright
+        if: steps.playwright-cache.outputs.cache-hit != 'true'
         run: pnpm exec playwright install --with-deps
 
       - name: Run E2E Tests

.github/workflows/kamal-deploy.yml

@@ -0,0 +1,131 @@
+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

@@ -0,0 +1,128 @@
+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/lint.yml

@@ -11,13 +11,13 @@ jobs:
       - uses: actions/checkout@v3
       - uses: ./.github/actions/dangerous-git-checkout
 
-      - name: Setup Node.js 20.x
+      - name: Setup Node.js 18.x
         uses: actions/setup-node@v3
         with:
-          node-version: 20.x
+          node-version: 18.x
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v4
+        uses: pnpm/action-setup@v2
 
       - name: Install dependencies
         run: pnpm install --config.platform=linux --config.architecture=x64
@@ -25,12 +25,10 @@ jobs:
       - name: create .env
         run: cp .env.example .env
 
-      - name: Generate Random ENCRYPTION_KEY, CRON_SECRET & NEXTAUTH_SECRET and fill in .env
+      - name: Generate Random ENCRYPTION_KEY
         run: |
-          RANDOM_KEY=$(openssl rand -hex 32)
-          sed -i "s/ENCRYPTION_KEY=.*/ENCRYPTION_KEY=${RANDOM_KEY}/" .env
-          sed -i "s/CRON_SECRET=.*/CRON_SECRET=${RANDOM_KEY}/" .env
-          sed -i "s/NEXTAUTH_SECRET=.*/NEXTAUTH_SECRET=${RANDOM_KEY}/" .env
+          SECRET=$(openssl rand -hex 32)
+          echo "ENCRYPTION_KEY=$SECRET" >> $GITHUB_ENV
 
       - name: Lint
         run: pnpm lint

.github/workflows/pr.yml

@@ -50,13 +50,6 @@ jobs:
     uses: ./.github/workflows/build-web.yml
     secrets: inherit
 
-  docs:
-    name: Build Docs
-    needs: [changes]
-    if: ${{ needs.changes.outputs.has-files-requiring-all-checks == 'true' }}
-    uses: ./.github/workflows/build-docs.yml
-    secrets: inherit
-
   e2e-test:
     name: Run E2E Tests
     needs: [changes]
@@ -66,7 +59,7 @@ jobs:
 
   required:
     name: PR Check Summary
-    needs: [lint, test, build, e2e-test, docs]
+    needs: [lint, test, build, e2e-test]
     if: always()
     runs-on: ubuntu-latest
     steps:

.github/workflows/release-changesets.yml

@@ -1,10 +1,9 @@
 name: Release Changesets
 
 on:
-  workflow_dispatch:
-  #push:
-  #  branches:
-  #    - main
+  push:
+    branches:
+      - main
 
 concurrency: ${{ github.workflow }}-${{ github.ref }}
 

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

@@ -1,5 +1,10 @@
 name: Docker for Data Migrations
 
+# 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:
   workflow_dispatch:
   push:
@@ -7,6 +12,7 @@ on:
       - "v*"
 
 env:
+  # Use docker.io for Docker Hub if empty
   REGISTRY: ghcr.io
   IMAGE_NAME: formbricks/data-migrations
   DATABASE_URL: "postgresql://postgres:postgres@postgres:5432/formbricks?schema=public"
@@ -17,6 +23,8 @@ jobs:
     permissions:
       contents: read
       packages: write
+      # This is used to complete the identity challenge
+      # with sigstore/fulcio when running outside of PRs.
       id-token: write
 
     steps:
@@ -42,7 +50,6 @@ jobs:
           tags: |
             type=ref,event=tag
             type=raw,value=${{ github.ref_name }}
-            type=raw,value=latest
 
       - name: Build and push Docker image
         uses: docker/build-push-action@v3
@@ -59,4 +66,3 @@ jobs:
         if: ${{ github.event_name != 'pull_request' }}
         run: |
           cosign sign --yes ghcr.io/${{ env.IMAGE_NAME }}:${{ github.ref_name }}
-          cosign sign --yes ghcr.io/${{ env.IMAGE_NAME }}:latest

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

@@ -1,91 +0,0 @@
-name: Docker Release to Github Experimental
-
-# 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:
-  workflow_dispatch:
-
-env:
-  # Use docker.io for Docker Hub if empty
-  REGISTRY: ghcr.io
-  # github.repository as <account>/<repo>
-  IMAGE_NAME: ${{ github.repository }}-experimental
-  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
-  TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
-  DATABASE_URL: "postgresql://postgres:postgres@localhost:5432/formbricks?schema=public"
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    permissions:
-      contents: read
-      packages: write
-      # This is used to complete the identity challenge
-      # with sigstore/fulcio when running outside of PRs.
-      id-token: write
-
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v3
-
-      - name: Set up Depot CLI
-        uses: depot/setup-action@v1
-
-      # Install the cosign tool except on PR
-      # https://github.com/sigstore/cosign-installer
-      - name: Install cosign
-        if: github.event_name != 'pull_request'
-        uses: sigstore/cosign-installer@v3.5.0
-
-      # Login against a Docker registry except on PR
-      # https://github.com/docker/login-action
-      - name: Log into registry ${{ env.REGISTRY }}
-        if: github.event_name != 'pull_request'
-        uses: docker/login-action@v3 # v3.0.0
-        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 }}
-
-      # Build and push Docker image with Buildx (don't push on PR)
-      # https://github.com/docker/build-push-action
-      - name: Build and push Docker image
-        id: build-and-push
-        uses: depot/build-push-action@v1
-        with:
-          project: tw0fqmsx3c
-          token: ${{ secrets.DEPOT_PROJECT_TOKEN }}
-          context: .
-          file: ./apps/web/Dockerfile
-          platforms: linux/amd64,linux/arm64
-          push: ${{ github.event_name != 'pull_request' }}
-          tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
-          cache-from: type=gha
-          cache-to: type=gha,mode=max
-
-      # Sign the resulting Docker image digest except on PRs.
-      # This will only write to the public Rekor transparency log when the Docker
-      # repository is public to avoid leaking data.  If you would like to publish
-      # transparency data even for private images, pass --force to cosign below.
-      # https://github.com/sigstore/cosign
-      - name: Sign the published Docker image
-        if: ${{ github.event_name != 'pull_request' }}
-        env:
-          # https://docs.github.com/en/actions/security-guides/security-hardening-for-github-actions#using-an-intermediate-environment-variable
-          TAGS: ${{ steps.meta.outputs.tags }}
-          DIGEST: ${{ steps.build-and-push.outputs.digest }}
-        # This step uses the identity token to provision an ephemeral certificate
-        # against the sigstore community Fulcio instance.
-        run: echo "${TAGS}" | xargs -I {} cosign sign --yes {}@${DIGEST}

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

@@ -1,4 +1,4 @@
-name: Docker Release to Github
+name: Docker
 
 # This workflow uses actions that are not certified by GitHub.
 # They are provided by a third-party and are governed by

.github/workflows/semantic-pull-requests.yml

@@ -20,20 +20,6 @@ jobs:
         id: lint_pr_title
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        with:
-          types: |
-            fix
-            feat
-            chore
-            docs
-            style
-            refactor
-            perf
-            test
-            build
-            ci
-            revert
-            ossgg
 
       - uses: marocchino/sticky-pull-request-comment@v2
         # When the previous steps fails, the workflow would stop. By adding this

.github/workflows/test.yml

@@ -17,7 +17,7 @@ jobs:
           node-version: 20.x
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v4
+        uses: pnpm/action-setup@v2
 
       - name: Install dependencies
         run: pnpm install --config.platform=linux --config.architecture=x64
@@ -25,12 +25,10 @@ jobs:
       - name: create .env
         run: cp .env.example .env
 
-      - name: Generate Random ENCRYPTION_KEY, CRON_SECRET & NEXTAUTH_SECRET and fill in .env
+      - name: Generate Random ENCRYPTION_KEY
         run: |
-          RANDOM_KEY=$(openssl rand -hex 32)
-          sed -i "s/ENCRYPTION_KEY=.*/ENCRYPTION_KEY=${RANDOM_KEY}/" .env
-          sed -i "s/CRON_SECRET=.*/CRON_SECRET=${RANDOM_KEY}/" .env
-          sed -i "s/NEXTAUTH_SECRET=.*/NEXTAUTH_SECRET=${RANDOM_KEY}/" .env
+          SECRET=$(openssl rand -hex 32)
+          echo "ENCRYPTION_KEY=$SECRET" >> $GITHUB_ENV
 
       - name: Test
         run: pnpm test

.gitignore

@@ -56,7 +56,5 @@ Zone.Identifier
 packages/lib/uploads
 
 # Vite Timestamps
-*vite.config.*.timestamp-*
+vite.config.*.timestamp-*
 
-# js compiled assets
-apps/web/public/js

.gitpod.Dockerfile

@@ -0,0 +1,6 @@
+FROM gitpod/workspace-full
+
+# Install custom tools, runtime, etc.
+RUN brew install yq 
+
+RUN pnpm install turbo --global

.gitpod.yml

@@ -0,0 +1,78 @@
+tasks:
+  - name: demo
+    init: |
+      gp sync-await init-install && 
+      bash .gitpod/setup-demo.bash
+    command: |
+      cd apps/demo && 
+      cp .env.example .env &&
+      sed -i -r "s#^(NEXT_PUBLIC_FORMBRICKS_API_HOST=).*#\1 $(gp url 3000)#" .env &&
+      gp sync-await init && 
+      turbo --filter "@formbricks/demo" go
+
+  - name: website
+    command: gp sync-await init && turbo --filter "@formbricks/formbricks-com" dev
+
+  - name: Init Formbricks
+    init: |
+      cp .env.example .env &&
+      bash .gitpod/init.bash && 
+      turbo --filter "@formbricks/js" build && 
+      gp sync-done init-install
+    command: |
+      gp sync-done init && 
+      gp tasks list &&
+      gp ports await 3002 && gp ports await 3000 && gp open apps/demo/.env && gp preview $(gp url 3002) --external
+
+  - name: web
+    init: |
+      gp sync-await init-install && 
+      bash .gitpod/setup-web.bash &&
+      turbo --filter "@formbricks/database" db:down
+    command: |
+      gp sync-await init &&
+      cp .env.example .env &&
+      sed -i -r "s#^(WEBAPP_URL=).*#\1 $(gp url 3000)#" .env &&
+      sed -i -r "s#^(NEXTAUTH_URL=).*#\1 $(gp url 3000)#" .env &&
+      RANDOM_ENCRYPTION_KEY=$(openssl rand -hex 32)
+      sed -i 's/^ENCRYPTION_KEY=.*/ENCRYPTION_KEY='"$RANDOM_ENCRYPTION_KEY"'/' .env
+      turbo --filter "@formbricks/web" go
+
+image:
+  file: .gitpod.Dockerfile
+
+ports:
+  - port: 3000
+    visibility: public
+    onOpen: open-browser
+  - port: 3001
+    visibility: public
+    onOpen: ignore
+  - port: 3002
+    visibility: public
+    onOpen: ignore
+  - port: 5432
+    visibility: public
+    onOpen: ignore
+  - port: 1025
+    visibility: public
+    onOpen: ignore
+  - port: 8025
+    visibility: public
+    onOpen: open-browser
+
+github:
+  prebuilds:
+    master: true
+    pullRequests: true
+    addComment: true
+
+vscode:
+  extensions:
+    - "ban.spellright"
+    - "bradlc.vscode-tailwindcss"
+    - "DavidAnson.vscode-markdownlint"
+    - "dbaeumer.vscode-eslint"
+    - "esbenp.prettier-vscode"
+    - "Prisma.prisma"
+    - "yzhang.markdown-all-in-one"

.husky/pre-commit

@@ -1 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
 pnpm lint-staged

.kamal/hooks/post-deploy.sample

@@ -0,0 +1,14 @@
+#!/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

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

.kamal/hooks/pre-build.sample

@@ -0,0 +1,51 @@
+#!/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

@@ -0,0 +1,47 @@
+#!/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

@@ -0,0 +1,109 @@
+#!/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

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

.npmrc

@@ -5,5 +5,4 @@ shared-workspace-shrinkwrap = true
 access = public
 enable-pre-post-scripts = true
 legacy-peer-deps=true
-node-linker=hoisted
-save-exact=true
+node-linker=hoisted

.nvmrc

@@ -1 +0,0 @@
-20.18.0

.prettierrc.js

@@ -1,11 +1,6 @@
-const baseConfig = require("./packages/config-prettier/prettier-preset");
+const baseConfig = require("./packages/prettier-config/prettier-preset");
 
 module.exports = {
   ...baseConfig,
-  plugins: [
-    "@trivago/prettier-plugin-sort-imports",
-    "prettier-plugin-tailwindcss",
-    "prettier-plugin-sort-json",
-  ],
-  jsonRecursiveSort: true,
+  plugins: ["@trivago/prettier-plugin-sort-imports", "prettier-plugin-tailwindcss"],
 };

.vscode/launch.json

@@ -1,21 +1,21 @@
 {
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
   "configurations": [
     {
       "name": "Launch localhost:3002",
-      "reAttach": true,
-      "request": "launch",
       "type": "firefox",
+      "request": "launch",
+      "reAttach": true,
       "url": "http://localhost:3002/",
       "webRoot": "${workspaceFolder}"
     },
     {
       "name": "Attach",
-      "request": "attach",
-      "type": "firefox"
+      "type": "firefox",
+      "request": "attach"
     }
-  ],
-  // Use IntelliSense to learn about possible attributes.
-  // Hover to view descriptions of existing attributes.
-  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-  "version": "0.2.0"
+  ]
 }

.vscode/settings.json

@@ -1,4 +1,4 @@
 {
-  "typescript.preferences.importModuleSpecifier": "non-relative",
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.preferences.importModuleSpecifier": "non-relative"
 }

CONTRIBUTING.md

@@ -16,9 +16,9 @@ Are you brimming with brilliant ideas? For new features that can elevate Formbri
 
 Ready to dive into the code and make a real impact? Here's your path:
 
-1. **Read our Best Practices**: [It takes 5 minutes](https://formbricks.com/docs/developer-docs/contributing/get-started) but will help you save hours 🤓
+1. **Read our Best Practices**: [It takes 5 minutes](https://formbricks.com/docs/contributing/how-we-code) but will help you save hours 🤓
 
-1. **Fork the Repository:** Fork our repository or use [Gitpod](https://gitpod.io) or use [Github Codespaces](https://github.com/features/codespaces) to get started instantly.
+1. **Fork the Repository:** Fork our repository or use [Gitpod](https://formbricks.com/docs/contributing/gitpod)
 
 1. **Tweak and Transform:** Work your coding magic and apply your changes.
 

LICENSE

@@ -1,9 +1,9 @@
-Copyright (c) 2024 Formbricks GmbH
+Copyright (c) 2023 Formbricks GmbH
 
 Portions of this software are licensed as follows:
 
-- All content that resides under the "packages/ee/", "apps/web/modules/ee" & "apps/web/app/(ee)" directories of this repository, if these directories exist, is licensed under the license defined in "packages/ee/LICENSE".
-- All content that resides under the "packages/js/", "packages/react-native/" and "packages/api/" directories of this repository, if that directories exist, is licensed under the "MIT" license as defined in the "LICENSE" files of these packages.
+- All content that resides under the "packages/ee/" directory of this repository, if that directory exists, is licensed under the license defined in "packages/ee/LICENSE".
+- All content that resides under the "packages/js/", "packages/errors/" and "packages/api/" directories of this repository, if that directories exist, is licensed under the "MIT" license as defined in the "LICENSE" files of these packages.
 - All third party components incorporated into the Formbricks Software are licensed under the original license provided by the owner of the applicable component.
 - Content outside of the above mentioned directories or restrictions above is available under the "AGPLv3" license as defined below.
 

README.md

@@ -1,7 +1,5 @@
 <div id="top"></div>
 
-<p align="center">Help us grow and star us on Github! ⭐️</p>
-
 <p align="center">
 
 <a href="https://formbricks.com">
@@ -84,7 +82,7 @@ Formbricks is both a free and open source survey platform - and a privacy-first
 
 - 🔗 Create shareable **link surveys**.
 
-- 👨‍👩‍👦 Invite your organization members to **collaborate** on your surveys.
+- 👨‍👩‍👦 Invite your team members to **collaborate** on your surveys.
 
 - 🔌 Integrate Formbricks with **Slack, Notion, Zapier, n8n and more**.
 
@@ -146,12 +144,6 @@ Or you can also deploy Formbricks on [RepoCloud](https://repocloud.io) using the
 
 [![Deploy on RepoCloud](https://d16t0pc4846x52.cloudfront.net/deploy.png)](https://repocloud.io/details/?app_id=254)
 
-##### Zeabur
-
-Or you can also deploy Formbricks on [Zeabur](https://zeabur.com) using the button below.
-
-[![Deploy to Zeabur](https://zeabur.com/button.svg)](https://zeabur.com/templates/G4TUJL)
-
 <a id="development"></a>
 
 ## 👨‍💻 Development
@@ -168,7 +160,7 @@ Here is what you need to be able to run Formbricks:
 
 ### Local Setup
 
-To get started locally, we've got a [guide to help you](https://formbricks.com/docs/developer-docs/contributing/get-started#local-machine-setup).
+To get started locally, we've got a [guide to help you](https://formbricks.com/docs/contributing/setup).
 
 ### Gitpod Setup
 
@@ -192,7 +184,7 @@ Here are a few options:
 
 - Upvote issues with 👍 reaction so we know what the demand for a particular issue is to prioritize it within the roadmap.
 
-Please check out [our contribution guide](https://formbricks.com/docs/developer-docs/contributing/get-started) and our [list of open issues](https://github.com/formbricks/formbricks/issues) for more information.
+Please check out [our contribution guide](https://formbricks.com/docs/contributing/introduction) and our [list of open issues](https://github.com/formbricks/formbricks/issues) for more information.
 
 ## All Thanks To Our Contributors
 

SECURITY.md

@@ -51,13 +51,13 @@ In the interest of responsibly managing vulnerabilities, please adhere to the fo
 > Do not reveal the problem to others until it has been resolved.
 
 1. **Send a Detailed Report**:
-   - Raise a security report on [Github](https://github.com/formbricks/formbricks/issues/new/choose) or send an email to [security@formbricks.com](mailto:security@formbricks.com).
+   - Address emails to [security@formbricks.com](mailto:security@formbricks.com).
    - Include:
      - Problem description.
      - Detailed, reproducible steps, with screenshots where possible.
      - Affected version(s).
      - Known possible mitigations.
-     - Your preferred contact method.
+     - Your Discord username or preferred contact method.
 2. **Acknowledgement of Receipt**:
    - Our security team will acknowledge receipt and provide an initial response within 48 hours.
    - Following verification of the vulnerability and the fix, a release plan will be formulated, with the fix deployed between 7 to 28 days, depending on the severity and complexity.

apps/demo-react-native/.env.example

@@ -1,2 +0,0 @@
-EXPO_PUBLIC_API_HOST=http://192.168.178.20:3000
-EXPO_PUBLIC_FORMBRICKS_ENVIRONMENT_ID=clzr04nkd000bcdl110j0ijyq

apps/demo-react-native/.eslintrc.js

@@ -1,7 +0,0 @@
-module.exports = {
-  extends: ["@formbricks/eslint-config/react.js"],
-  parserOptions: {
-    project: "tsconfig.json",
-    tsconfigRootDir: __dirname,
-  },
-};

apps/demo-react-native/.gitignore

@@ -1,35 +0,0 @@
-# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
-
-# dependencies
-node_modules/
-
-# Expo
-.expo/
-dist/
-web-build/
-
-# Native
-*.orig.*
-*.jks
-*.p8
-*.p12
-*.key
-*.mobileprovision
-
-# Metro
-.metro-health-check*
-
-# debug
-npm-debug.*
-yarn-debug.*
-yarn-error.*
-
-# macOS
-.DS_Store
-*.pem
-
-# local env files
-.env*.local
-
-# typescript
-*.tsbuildinfo

apps/demo-react-native/app.json

@@ -1,34 +0,0 @@
-{
-  "expo": {
-    "android": {
-      "adaptiveIcon": {
-        "backgroundColor": "#ffffff",
-        "foregroundImage": "./assets/adaptive-icon.png"
-      }
-    },
-    "assetBundlePatterns": ["**/*"],
-    "icon": "./assets/icon.png",
-    "ios": {
-      "infoPlist": {
-        "NSCameraUsageDescription": "Take pictures for certain activities.",
-        "NSMicrophoneUsageDescription": "Need microphone access for recording videos.",
-        "NSPhotoLibraryUsageDescription": "Select pictures for certain activities."
-      },
-      "supportsTablet": true
-    },
-    "jsEngine": "hermes",
-    "name": "react-native-demo",
-    "orientation": "portrait",
-    "slug": "react-native-demo",
-    "splash": {
-      "backgroundColor": "#ffffff",
-      "image": "./assets/splash.png",
-      "resizeMode": "contain"
-    },
-    "userInterfaceStyle": "light",
-    "version": "1.0.0",
-    "web": {
-      "favicon": "./assets/favicon.png"
-    }
-  }
-}

apps/demo-react-native/babel.config.js

@@ -1,6 +0,0 @@
-module.exports = function babel(api) {
-  api.cache(true);
-  return {
-    presets: ["babel-preset-expo"],
-  };
-};

apps/demo-react-native/index.js

@@ -1,7 +0,0 @@
-import { registerRootComponent } from "expo";
-import { LogBox } from "react-native";
-import App from "./src/app";
-
-registerRootComponent(App);
-
-LogBox.ignoreAllLogs();

apps/demo-react-native/metro.config.js

@@ -1,21 +0,0 @@
-// Learn more https://docs.expo.io/guides/customizing-metro
-const path = require("node:path");
-const { getDefaultConfig } = require("expo/metro-config");
-
-// Find the workspace root, this can be replaced with `find-yarn-workspace-root`
-const workspaceRoot = path.resolve(__dirname, "../..");
-const projectRoot = __dirname;
-
-const config = getDefaultConfig(projectRoot);
-
-// 1. Watch all files within the monorepo
-config.watchFolders = [workspaceRoot];
-// 2. Let Metro know where to resolve packages, and in what order
-config.resolver.nodeModulesPaths = [
-  path.resolve(projectRoot, "node_modules"),
-  path.resolve(workspaceRoot, "node_modules"),
-];
-// 3. Force Metro to resolve (sub)dependencies only from the `nodeModulesPaths`
-config.resolver.disableHierarchicalLookup = true;
-
-module.exports = config;

apps/demo-react-native/package.json

@@ -1,28 +0,0 @@
-{
-  "name": "@formbricks/demo-react-native",
-  "version": "1.0.0",
-  "main": "./index.js",
-  "scripts": {
-    "dev": "expo start",
-    "android": "expo start --android",
-    "ios": "expo start --ios",
-    "web": "expo start --web",
-    "eject": "expo eject",
-    "clean": "rimraf .turbo node_modules .expo"
-  },
-  "dependencies": {
-    "@formbricks/js": "workspace:*",
-    "@formbricks/react-native": "workspace:*",
-    "expo": "51.0.26",
-    "expo-status-bar": "1.12.1",
-    "react": "18.3.1",
-    "react-native": "0.74.4",
-    "react-native-webview": "13.8.6"
-  },
-  "devDependencies": {
-    "@babel/core": "7.25.2",
-    "@types/react": "18.3.11",
-    "typescript": "5.3.3"
-  },
-  "private": true
-}

apps/demo-react-native/src/app.tsx

@@ -1,52 +0,0 @@
-import { StatusBar } from "expo-status-bar";
-import { Button, LogBox, StyleSheet, Text, View } from "react-native";
-import Formbricks, { track } from "@formbricks/react-native";
-
-LogBox.ignoreAllLogs();
-
-export default function App(): JSX.Element {
-  if (!process.env.EXPO_PUBLIC_FORMBRICKS_ENVIRONMENT_ID) {
-    throw new Error("EXPO_PUBLIC_FORMBRICKS_ENVIRONMENT_ID is required");
-  }
-
-  if (!process.env.EXPO_PUBLIC_API_HOST) {
-    throw new Error("EXPO_PUBLIC_API_HOST is required");
-  }
-
-  const config = {
-    environmentId: process.env.EXPO_PUBLIC_FORMBRICKS_ENVIRONMENT_ID,
-    apiHost: process.env.EXPO_PUBLIC_API_HOST,
-    userId: "random-user-id",
-    attributes: {
-      language: "en",
-      testAttr: "attr-test",
-    },
-  };
-
-  return (
-    <View style={styles.container}>
-      <Text>Formbricks React Native SDK Demo</Text>
-
-      <Button
-        title="Trigger Code Action"
-        onPress={() => {
-          track("code").catch((error: unknown) => {
-            // eslint-disable-next-line no-console -- logging is allowed in demo apps
-            console.error("Error tracking event:", error);
-          });
-        }}
-      />
-      <StatusBar style="auto" />
-      <Formbricks initConfig={config} />
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: "#fff",
-    alignItems: "center",
-    justifyContent: "center",
-  },
-});

apps/demo-react-native/tsconfig.json

@@ -1,6 +0,0 @@
-{
-  "compilerOptions": {
-    "strict": true
-  },
-  "extends": "expo/tsconfig.base"
-}

apps/demo/.eslintrc.js

@@ -1,3 +1,4 @@
 module.exports = {
-  extends: ["@formbricks/eslint-config/legacy-next.js"],
+  root: true,
+  extends: ["formbricks"],
 };

apps/demo/components/Sidebar.tsx

@@ -9,6 +9,7 @@ import {
   ShieldCheckIcon,
   UsersIcon,
 } from "lucide-react";
+
 import { classNames } from "../lib/utils";
 
 const navigation = [

apps/demo/components/SurveySwitch.tsx

@@ -0,0 +1,29 @@
+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

@@ -0,0 +1,31 @@
+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,7 +1,8 @@
 import { Slot } from "@radix-ui/react-slot";
 import { ChevronRight, MoreHorizontal } from "lucide-react";
 import * as React from "react";
-import { cn } from "../../lib/utils";
+
+import { classNames } from "../../lib/utils";
 
 const Breadcrumb = React.forwardRef<
   HTMLElement,
@@ -15,8 +16,8 @@ const BreadcrumbList = React.forwardRef<HTMLOListElement, React.ComponentPropsWi
   ({ className, ...props }, ref) => (
     <ol
       ref={ref}
-      className={cn(
-        "flex flex-wrap items-center gap-1.5 break-words text-sm text-slate-500 sm:gap-2.5 dark:text-slate-400",
+      className={classNames(
+        "text-muted-foreground flex flex-wrap items-center gap-1.5 break-words text-sm sm:gap-2.5",
         className
       )}
       {...props}
@@ -27,7 +28,7 @@ BreadcrumbList.displayName = "BreadcrumbList";
 
 const BreadcrumbItem = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<"li">>(
   ({ className, ...props }, ref) => (
-    <li ref={ref} className={cn("inline-flex items-center gap-1.5", className)} {...props} />
+    <li ref={ref} className={classNames("inline-flex items-center gap-1.5", className)} {...props} />
   )
 );
 BreadcrumbItem.displayName = "BreadcrumbItem";
@@ -41,11 +42,7 @@ const BreadcrumbLink = React.forwardRef<
   const Comp = asChild ? Slot : "a";
 
   return (
-    <Comp
-      ref={ref}
-      className={cn("transition-colors hover:text-slate-950 dark:hover:text-slate-50", className)}
-      {...props}
-    />
+    <Comp ref={ref} className={classNames("hover:text-foreground transition-colors", className)} {...props} />
   );
 });
 BreadcrumbLink.displayName = "BreadcrumbLink";
@@ -57,7 +54,7 @@ const BreadcrumbPage = React.forwardRef<HTMLSpanElement, React.ComponentPropsWit
       role="link"
       aria-disabled="true"
       aria-current="page"
-      className={cn("font-normal text-slate-950 dark:text-slate-50", className)}
+      className={classNames("text-foreground font-normal", className)}
       {...props}
     />
   )
@@ -65,11 +62,7 @@ const BreadcrumbPage = React.forwardRef<HTMLSpanElement, React.ComponentPropsWit
 BreadcrumbPage.displayName = "BreadcrumbPage";
 
 const BreadcrumbSeparator = ({ children, className, ...props }: React.ComponentProps<"li">) => (
-  <li
-    role="presentation"
-    aria-hidden="true"
-    className={cn("[&>svg]:h-3.5 [&>svg]:w-3.5", className)}
-    {...props}>
+  <li role="presentation" aria-hidden="true" className={classNames("[&>svg]:size-3.5", className)} {...props}>
     {children ?? <ChevronRight />}
   </li>
 );
@@ -79,7 +72,7 @@ const BreadcrumbEllipsis = ({ className, ...props }: React.ComponentProps<"span"
   <span
     role="presentation"
     aria-hidden="true"
-    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    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>
@@ -89,10 +82,10 @@ BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
 
 export {
   Breadcrumb,
-  BreadcrumbList,
+  BreadcrumbEllipsis,
   BreadcrumbItem,
   BreadcrumbLink,
+  BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-  BreadcrumbEllipsis,
 };

apps/demo/components/ui/button.tsx

@@ -0,0 +1,47 @@
+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,11 +1,12 @@
 import * as React from "react";
-import { cn } from "@formbricks/lib/cn";
+
+import { classNames } from "../../lib/utils";
 
 const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (
     <div
       ref={ref}
-      className={cn("text-card-foreground rounded-xl border border-slate-200 bg-white shadow-sm", className)}
+      className={classNames("bg-card text-card-foreground rounded-lg border shadow-sm", className)}
       {...props}
     />
   )
@@ -14,7 +15,7 @@ Card.displayName = "Card";
 
 const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
+    <div ref={ref} className={classNames("flex flex-col space-y-1.5 p-6", className)} {...props} />
   )
 );
 CardHeader.displayName = "CardHeader";
@@ -23,7 +24,7 @@ const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HT
   ({ className, ...props }, ref) => (
     <h3
       ref={ref}
-      className={cn("text-2xl font-semibold leading-none tracking-tight", className)}
+      className={classNames("text-2xl font-semibold leading-none tracking-tight", className)}
       {...props}
     />
   )
@@ -32,19 +33,19 @@ CardTitle.displayName = "CardTitle";
 
 const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
   ({ className, ...props }, ref) => (
-    <p ref={ref} className={cn("text-muted-foreground text-sm", className)} {...props} />
+    <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={cn("p-6 pt-0", className)} {...props} />
+  ({ 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={cn("flex items-center p-6 pt-0", className)} {...props} />
+    <div ref={ref} className={classNames("flex items-center p-6 pt-0", className)} {...props} />
   )
 );
 CardFooter.displayName = "CardFooter";

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

@@ -0,0 +1,182 @@
+"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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,89 @@
+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

@@ -0,0 +1,24 @@
+"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

@@ -2,7 +2,8 @@
 
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
 import * as React from "react";
-import { cn } from "../../lib/utils";
+
+import { classNames } from "../../lib/utils";
 
 const Separator = React.forwardRef<
   React.ElementRef<typeof SeparatorPrimitive.Root>,
@@ -12,8 +13,8 @@ const Separator = React.forwardRef<
     ref={ref}
     decorative={decorative}
     orientation={orientation}
-    className={cn(
-      "shrink-0 bg-slate-200 dark:bg-slate-800",
+    className={classNames(
+      "bg-border shrink-0",
       orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
       className
     )}

apps/demo/components/ui/sheet.tsx

@@ -4,7 +4,8 @@ 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 { cn } from "@formbricks/lib/cn";
+
+import { classNames } from "../../lib/utils";
 
 const Sheet = SheetPrimitive.Root;
 
@@ -19,8 +20,8 @@ const SheetOverlay = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Overlay
-    className={cn(
-      "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={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}
@@ -37,9 +38,9 @@ const sheetVariants = cva(
         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-md",
+        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-md",
+          "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: {
@@ -56,7 +57,7 @@ const SheetContent = React.forwardRef<React.ElementRef<typeof SheetPrimitive.Con
   ({ side = "right", className, children, ...props }, ref) => (
     <SheetPortal>
       <SheetOverlay />
-      <SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>
+      <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" />
@@ -69,13 +70,13 @@ const SheetContent = React.forwardRef<React.ElementRef<typeof SheetPrimitive.Con
 SheetContent.displayName = SheetPrimitive.Content.displayName;
 
 const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...props} />
+  <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={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+    className={classNames("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
     {...props}
   />
 );
@@ -87,7 +88,7 @@ const SheetTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Title
     ref={ref}
-    className={cn("text-foreground flex items-center text-lg font-semibold", className)}
+    className={classNames("text-foreground text-lg font-semibold", className)}
     {...props}
   />
 ));
@@ -99,7 +100,7 @@ const SheetDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Description
     ref={ref}
-    className={cn("text-muted-foreground text-sm", className)}
+    className={classNames("text-muted-foreground text-sm", className)}
     {...props}
   />
 ));

apps/demo/components/ui/table.tsx

@@ -1,10 +1,11 @@
 import * as React from "react";
-import { cn } from "@formbricks/lib/cn";
+
+import { classNames } from "../../lib/utils";
 
 const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
   ({ className, ...props }, ref) => (
-    <div className="relative overflow-auto">
-      <table ref={ref} className={cn("w-full caption-bottom text-sm", className)} {...props} />
+    <div className="relative w-full overflow-auto">
+      <table ref={ref} className={classNames("w-full caption-bottom text-sm", className)} {...props} />
     </div>
   )
 );
@@ -12,25 +13,25 @@ Table.displayName = "Table";
 
 const TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
   ({ className, ...props }, ref) => (
-    <thead
-      ref={ref}
-      className={cn("pointer-events-none text-slate-800 [&_tr]:border-b", className)}
-      {...props}
-    />
+    <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={cn("[&_tr:last-child]:border-0", className)} {...props} />
+    <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={cn("border-t [&>tr]:last:border-b-0", className)} {...props} />
+    <tfoot
+      ref={ref}
+      className={classNames("bg-muted/50 border-t font-medium [&>tr]:last:border-b-0", className)}
+      {...props}
+    />
   )
 );
 TableFooter.displayName = "TableFooter";
@@ -39,8 +40,8 @@ const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTML
   ({ className, ...props }, ref) => (
     <tr
       ref={ref}
-      className={cn(
-        "border-b bg-white transition-colors hover:bg-slate-100 data-[state=selected]:bg-slate-100",
+      className={classNames(
+        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
         className
       )}
       {...props}
@@ -53,7 +54,10 @@ const TableHead = React.forwardRef<HTMLTableCellElement, React.ThHTMLAttributes<
   ({ className, ...props }, ref) => (
     <th
       ref={ref}
-      className={cn("h-12 px-4 text-left align-middle [&:has([role=checkbox])]:pr-0", className)}
+      className={classNames(
+        "text-muted-foreground h-12 px-4 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0",
+        className
+      )}
       {...props}
     />
   )
@@ -62,13 +66,19 @@ TableHead.displayName = "TableHead";
 
 const TableCell = React.forwardRef<HTMLTableCellElement, React.TdHTMLAttributes<HTMLTableCellElement>>(
   ({ className, ...props }, ref) => (
-    <td ref={ref} className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)} {...props} />
+    <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={cn("mt-4 text-sm", className)} {...props} />
+  ({ className, ...props }, ref) => (
+    <caption ref={ref} className={classNames("text-muted-foreground mt-4 text-sm", className)} {...props} />
+  )
 );
 TableCaption.displayName = "TableCaption";
 

apps/demo/components/ui/tabs.tsx

@@ -2,7 +2,8 @@
 
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 import * as React from "react";
-import { cn } from "@formbricks/lib/cn";
+
+import { classNames } from "../../lib/utils";
 
 const Tabs = TabsPrimitive.Root;
 
@@ -12,8 +13,8 @@ const TabsList = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <TabsPrimitive.List
     ref={ref}
-    className={cn(
-      "inline-flex h-10 items-center justify-center rounded-lg bg-slate-100 p-1 text-slate-500 dark:bg-slate-800 dark:text-slate-400",
+    className={classNames(
+      "bg-muted text-muted-foreground inline-flex h-10 items-center justify-center rounded-md p-1",
       className
     )}
     {...props}
@@ -27,8 +28,8 @@ const TabsTrigger = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <TabsPrimitive.Trigger
     ref={ref}
-    className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-lg px-3 py-1.5 text-sm font-medium ring-offset-white transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white data-[state=active]:text-slate-950 data-[state=active]:shadow-sm dark:ring-offset-slate-950 dark:focus-visible:ring-slate-300 dark:data-[state=active]:bg-slate-950 dark:data-[state=active]:text-slate-50",
+    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}
@@ -42,8 +43,8 @@ const TabsContent = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <TabsPrimitive.Content
     ref={ref}
-    className={cn(
-      "mt-2 ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 dark:ring-offset-slate-950 dark:focus-visible:ring-slate-300",
+    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}

apps/demo/components/ui/tooltip.tsx

@@ -0,0 +1,30 @@
+"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/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/basic-features/typescript for more information.

apps/demo/next.config.js

@@ -1,5 +1,16 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  reactStrictMode: true,
+  transpilePackages: ["@formbricks/ui"],
+  async redirects() {
+    return [
+      {
+        source: "/",
+        destination: "/app",
+        permanent: false,
+      },
+    ];
+  },
   images: {
     remotePatterns: [
       {
@@ -14,4 +25,4 @@ const nextConfig = {
   },
 };
 
-export default nextConfig;
+module.exports = nextConfig;

apps/demo/package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "clean": "rimraf .turbo node_modules .next",
     "dev": "next dev -p 3002 --turbo",
-    "go": "next dev -p 3002 --turbo",
+    "go": "next dev -p 3002",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
@@ -13,13 +13,21 @@
   "dependencies": {
     "@formbricks/js": "workspace:*",
     "@formbricks/ui": "workspace:*",
-    "lucide-react": "0.452.0",
-    "next": "14.2.16",
+    "@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"
   },
   "devDependencies": {
-    "@formbricks/eslint-config": "workspace:*",
-    "@formbricks/config-typescript": "workspace:*"
+    "@formbricks/tsconfig": "workspace:*",
+    "eslint-config-formbricks": "workspace:*"
   }
 }

apps/demo/pages/_app.tsx

@@ -1,6 +1,7 @@
 import type { AppProps } from "next/app";
 import Head from "next/head";
-import "@formbricks/ui/globals.css";
+
+import "../styles/globals.css";
 
 const App = ({ Component, pageProps }: AppProps) => {
   return (

apps/demo/pages/app/index.tsx

@@ -1,8 +1,11 @@
 import Image from "next/image";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
-import formbricks from "@formbricks/js";
-import fbsetup from "../public/fb-setup.png";
+
+import formbricks from "@formbricks/js/app";
+
+import { SurveySwitch } from "../../components/SurveySwitch";
+import fbsetup from "../../public/fb-setup.png";
 
 declare const window: any;
 
@@ -56,12 +59,13 @@ const AppPage = ({}) => {
         router.events.off("routeChangeComplete", handleRouteChange);
       };
     }
-  }, []);
+  });
 
   return (
-    <div className="min-h-screen bg-white px-12 py-6 dark:bg-slate-800">
+    <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 flex-col items-center gap-2 sm: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
@@ -115,7 +119,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-900">
+          <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>
@@ -138,7 +142,7 @@ const AppPage = ({}) => {
 
           <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">
+              <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">
                 No-Code Action
               </button>
             </div>
@@ -167,7 +171,7 @@ const AppPage = ({}) => {
                 onClick={() => {
                   formbricks.setAttribute("Plan", "Free");
                 }}
-                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">
+                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">
                 Set Plan to &apos;Free&apos;
               </button>
             </div>
@@ -190,7 +194,7 @@ const AppPage = ({}) => {
                 onClick={() => {
                   formbricks.setAttribute("Plan", "Paid");
                 }}
-                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">
+                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">
                 Set Plan to &apos;Paid&apos;
               </button>
             </div>
@@ -213,7 +217,7 @@ const AppPage = ({}) => {
                 onClick={() => {
                   formbricks.setEmail("test@web.com");
                 }}
-                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">
+                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">
                 Set Email
               </button>
             </div>

apps/demo/pages/saas/index.tsx

@@ -0,0 +1,663 @@
+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

@@ -0,0 +1,144 @@
+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/postcss.config.js

@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-};
+}

apps/demo/styles/globals.css

@@ -0,0 +1,26 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Example on overriding packages/js colors */
+.dark {
+  --fb-brand-color: red;
+  --fb-brand-text-color: white;
+  --fb-border-color: green;
+  --fb-border-color-highlight: var(--slate-500);
+  --fb-focus-color: red;
+  --fb-heading-color: yellow;
+  --fb-subheading-color: green;
+  --fb-info-text-color: orange;
+  --fb-signature-text-color: blue;
+  --fb-survey-background-color: black;
+  --fb-accent-background-color: rgb(13, 13, 12);
+  --fb-accent-background-color-selected: red;
+  --fb-placeholder-color: white;
+  --fb-shadow-color: yellow;
+  --fb-rating-fill: var(--yellow-300);
+  --fb-rating-hover: var(--yellow-500);
+  --fb-back-btn-border: currentColor;
+  --fb-submit-btn-border: transparent;
+  --fb-rating-selected: black;
+}

apps/demo/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "exclude": ["node_modules"],
-  "extends": "@formbricks/config-typescript/nextjs.json",
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
+  "extends": "@formbricks/tsconfig/nextjs.json",
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
 }

apps/docs/.eslintrc.js

@@ -1,3 +1,4 @@
 module.exports = {
-  extends: ["@formbricks/eslint-config/legacy-next.js"],
+  root: true,
+  extends: ["formbricks"],
 };

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

@@ -4,18 +4,25 @@ import I1 from "./images/I1.webp";
 import I2 from "./images/I2.webp";
 
 export const metadata = {
-  title: "Using Actions in Formbricks",
+  title: "Using Actions in Formbricks | Fine-tuning User Moments",
   description:
-    "Dive deep into how actions in Formbricks help products and organizations 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.",
+    "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.",
 };
 
-# Actions
+#### App Surveys
 
-Actions are predefined events within your app that prompt Formbricks to display a survey when triggered. These are detected by the Formbricks widget, which then presents the appropriate survey based on your predefined settings.
+# 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 for that survey. This capability ensures that surveys are triggered at the right time. You can set up these actions through a user-friendly No-Code interface within the Formbricks dashboard.
+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?**
 
@@ -23,7 +30,8 @@ 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 Targeting**: Precise targeting based on user attributes ensures that surveys are shown only to users who meet certain criteria, enhancing the relevance and effectiveness of each survey.
+- **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**
 
@@ -49,35 +57,12 @@ To add a No-Code Action:
   className="max-w-full rounded-lg sm:max-w-3xl"
 />
 
-Here are four types of No-Code actions you can set up:
+Here are three types of No-Code actions you can set up:
 
-### **1. Click Action**
-
-Click Action is triggered when a user clicks on a specific element within your application. You can define the element's inner text or CSS selector to trigger the survey.
-
-- **Inner Text**: 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.
-
-- **CSS Selector**: 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.
-
-### **2. Page view Action**
-
-This action is triggered when a user visits a page within your application.
-
-### **3. Exit Intent Action**
-
-This action is triggered when a user is about to leave your application. It helps capture user feedback before they exit, providing valuable insights into user experiences and potential improvements.
-
-### **4. 50% Scroll Action**
-
-This action is triggered when a user scrolls through 50% of a page within your application. It helps capture user feedback at a specific point in their journey, enabling you to gather insights based on user interactions.
+### **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:
 
-<Note>
-You can combine the url filters with any of the no-code actions to trigger the survey based on the URL match conditions.
-
-### **URL Match Conditions**
-
 - **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.
@@ -85,7 +70,15 @@ You can combine the url filters with any of the no-code actions to trigger the s
 - **notMatch**: Triggers when the URL does not match the specified condition.
 - **notContains**: Activates when the URL does not contain the specified substring.
 
-</Note>
+### **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**
 
@@ -119,3 +112,5 @@ 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,16 +1,34 @@
+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 for App Surveys | Formbricks",
+  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, metadata, and other segments. This helps you get more relevant feedback and make data-driven decisions.",
+    "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, device type, 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.
+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.
 
-# How to setup Advanced Targeting
+<ResponsiveVideo title="Formbricks Multi-language Surveys"
+ src="https://www.youtube-nocookie.com/embed/0BQp6N4cXzU?si=KeBM7G7Ch1xtrsOm&amp;controls=0" />
 
-<Note>Advanced Targeting is only available on the Pro plan!</Note>
+
+## 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.
 
@@ -18,7 +36,7 @@ Advanced Targeting allows you to show surveys to the right group of people. You
 
 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 user attributes, other segments, devices, and more.
+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**.
 
@@ -27,3 +45,50 @@ Advanced Targeting allows you to show surveys to the right group of people. You
 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/framework-guides/components/Libraries.tsx

@@ -31,18 +31,12 @@ const libraries = [
     description: "Simply add us to your router change and sit back!",
     logo: logoVueJs,
   },
-  {
-    href: "#react-native",
-    name: "React Native",
-    description: "Easily integrate our SDK with your React Native app for seamless survey support!",
-    logo: logoReactJs,
-  },
 ];
 
 export const Libraries = () => {
   return (
     <div className="my-16 xl:max-w-none">
-      <div className="not-prose mt-4 grid grid-cols-1 gap-x-6 gap-y-10 border-slate-900/5 xl:max-w-none xl:grid-cols-2 2xl:grid-cols-3 dark:border-white/5">
+      <div className="not-prose mt-4 grid grid-cols-1 gap-x-6 gap-y-10 border-slate-900/5 sm:grid-cols-2 xl:max-w-none xl:grid-cols-3 dark:border-white/5">
         {libraries.map((library) => (
           <a
             key={library.name}

apps/docs/app/app-surveys/framework-guides/page.mdx

@@ -42,8 +42,8 @@ All you need to do is copy a `<script>` tag to your HTML head, and that’s abou
 !function(){
     var apiHost = "https://app.formbricks.com";
     var environmentId = "<your-environment-id>";
-    var userId = "<your-user-id>"; //optional
-    var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src=apiHost+"/js/formbricks.umd.cjs";var e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e),setTimeout(function(){window.formbricks.init({environmentId: environmentId, apiHost: apiHost, userId: userId})},500)}();
+    var userId = "<your-user-id>";
+    var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src=apiHost+"/api/packages/app";var e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e),setTimeout(function(){window.formbricks.init({environmentId: environmentId, apiHost: apiHost, userId: userId})},500)}();
 </script>
 <!-- END Formbricks Surveys -->
 ```
@@ -58,26 +58,29 @@ All you need to do is copy a `<script>` tag to your HTML head, and that’s abou
   <Property name="api-host" type="string">
     URL of the hosted Formbricks instance.
   </Property>
+  <Property name="userId" type="string">
+    User ID of the user who has active session.
+  </Property>
 </Properties>
 
-Now visit the [Validate your Setup](#validate-your-setup) section to verify your setup!
+Refer to our [Example HTML project](https://github.com/formbricks/examples/tree/main/html) for more help! Now visit the [Validate your Setup](#validate-your-setup) section to verify your setup!
 
 ---
 
 ## ReactJS
 
-Install the Formbricks SDK using one of the package managers ie `npm`,`pnpm`,`yarn`. Note that zod is required as a peer dependency must also be installed in your project.
+Install the Formbricks SDK using one of the package managers ie `npm`,`pnpm`,`yarn`.
 
 <Col>
 <CodeGroup title="Install Formbricks JS library">
 ```shell {{ title: 'npm' }}
-npm install @formbricks/js zod
+npm install @formbricks/js
 ```
 ```shell {{ title: 'pnpm' }}
-pnpm add @formbricks/js zod
+pnpm add @formbricks/js
 ```
 ```shell {{ title: 'yarn' }}
-yarn add @formbricks/js zod
+yarn add @formbricks/js
 ```
 
 </CodeGroup>
@@ -88,13 +91,13 @@ Now, update your App.js/ts file to initialise Formbricks.
 
 ```js
 // other imports
-import formbricks from "@formbricks/js";
+import formbricks from "@formbricks/js/app";
 
 if (typeof window !== "undefined") {
   formbricks.init({
     environmentId: "<environment-id>",
     apiHost: "<api-host>",
-    userId: "<user-id>", //optional
+    userId: "<user-id>",
   });
 }
 
@@ -116,9 +119,12 @@ export default App;
   <Property name="api-host" type="string">
     URL of the hosted Formbricks instance.
   </Property>
+  <Property name="userId" type="string">
+    User ID of the user who has active session.
+  </Property>
 </Properties>
 
-Now visit the [Validate your Setup](#validate-your-setup) section to verify your setup!
+Refer to our [Example ReactJs project](https://github.com/formbricks/examples/tree/main/reactjs) for more help! Now visit the [Validate your Setup](#validate-your-setup) section to verify your setup!
 
 ---
 
@@ -136,13 +142,13 @@ Code snippets for the integration for both conventions are provided to further a
 <Col>
 <CodeGroup title="Install Formbricks JS library">
 ```shell {{ title: 'npm' }}
-npm install @formbricks/js zod
+npm install @formbricks/js
 ```
 ```shell {{ title: 'pnpm' }}
-pnpm add @formbricks/js zod
+pnpm add @formbricks/js
 ```
 ```shell {{ title: 'yarn' }}
-yarn add @formbricks/js zod
+yarn add @formbricks/js
 ```
 
 </CodeGroup>
@@ -158,7 +164,8 @@ yarn add @formbricks/js zod
 
 import { usePathname, useSearchParams } from "next/navigation";
 import { useEffect } from "react";
-import formbricks from "@formbricks/js";
+
+import formbricks from "@formbricks/js/app";
 
 export default function FormbricksProvider() {
   const pathname = usePathname();
@@ -168,7 +175,7 @@ export default function FormbricksProvider() {
     formbricks.init({
       environmentId: "<environment-id>",
       apiHost: "<api-host>",
-      userId: "<user-id>", //optional
+      userId: "<user-id>",
     });
   }, []);
 
@@ -200,6 +207,8 @@ export default function RootLayout({ children }: { children: React.ReactNode })
 </CodeGroup>
 </Col>
 
+Refer to our [Example NextJS App Directory project](https://github.com/formbricks/examples/tree/main/nextjs-app) for more help!
+
 ### Pages Directory
 
 <Col>
@@ -209,13 +218,14 @@ export default function RootLayout({ children }: { children: React.ReactNode })
 // other import
 import { useRouter } from "next/router";
 import { useEffect } from "react";
-import formbricks from "@formbricks/js";
+
+import formbricks from "@formbricks/js/app";
 
 if (typeof window !== "undefined") {
   formbricks.init({
     environmentId: "<environment-id>",
     apiHost: "<api-host>",
-    userId: "<user-id>", //optional
+    userId: "<user-id>",
   });
 }
 
@@ -237,6 +247,7 @@ export default function App({ Component, pageProps }: AppProps) {
 
 </CodeGroup>
 </Col>
+Refer to our [Example NextJS Pages Directory project](https://github.com/formbricks/examples/tree/main/nextjs-pages) for more help!
 
 ### Required customizations to be made
 
@@ -247,6 +258,9 @@ export default function App({ Component, pageProps }: AppProps) {
   <Property name="api-host" type="string">
     URL of the hosted Formbricks instance.
   </Property>
+  <Property name="userId" type="string">
+    User ID of the user who has active session.
+  </Property>
 </Properties>
 
 First we initialize the Formbricks SDK, ensuring that it only runs on the client side.
@@ -280,13 +294,13 @@ yarn add @formbricks/js
 <CodeGroup title="src/formbricks.js">
 
 ```js
-import formbricks from "@formbricks/js";
+import formbricks from "@formbricks/js/app";
 
 if (typeof window !== "undefined") {
   formbricks.init({
     environmentId: "<environment-id>",
     apiHost: "<api-host>",
-    userId: "<user-id>", //optional
+    userId: "<user-id>",
   });
 }
 
@@ -327,66 +341,12 @@ router.afterEach((to, from) => {
   <Property name="api-host" type="string">
     URL of the hosted Formbricks instance.
   </Property>
-</Properties>
-
-Now visit the [Validate your Setup](#validate-your-setup) section to verify your setup!
-
-## React Native
-
-Install the Formbricks React Native SDK using one of the package managers, i.e., npm, pnpm, or yarn.
-
-<Col>
-<CodeGroup title="Install Formbricks JS library">
-```shell {{ title: 'npm' }}
-npm install @formbricks/react-native
-```
-```shell {{ title: 'pnpm' }}
-pnpm add @formbricks/react-native
-```
-```shell {{ title: 'yarn' }}
-yarn add @formbricks/react-native
-```
-
-</CodeGroup>
-</Col>
-Now, update your App.js/App.tsx file to initialize Formbricks:
-<Col>
-<CodeGroup title="src/App.js">
-
-```js
-// other imports
-import Formbricks from "@formbricks/react-native";
-
-const config = {
-  environmentId: "<environment-id>",
-  apiHost: "<api-host>",
-  userId: "<user-id>",
-};
-
-export default function App() {
-  return (
-    <>
-      {/* Your app content */}
-      <Formbricks initConfig={config} />
-    </>
-  );
-}
-```
-
-</CodeGroup>
-</Col>
-### Required customizations to be made
-
-<Properties>
-  <Property name="environment-id" type="string">
-    Formbricks Environment ID.
-  </Property>
-  <Property name="api-host" type="string">
-    URL of the hosted Formbricks instance.
+  <Property name="userId" type="string">
+    User ID of the user who has active session.
   </Property>
 </Properties>
 
----
+Refer to our [Example VueJs project](https://github.com/formbricks/examples/tree/main/vuejs) for more help! Now visit the [Validate your Setup](#validate-your-setup) section to verify your setup!
 
 ## Validate your setup