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,12 +50,6 @@ SMTP_SECURE_ENABLED=0
 SMTP_USER=smtpUser
 SMTP_PASSWORD=smtpPassword
 
-# If set to 0, the server will not require SMTP_USER and SMTP_PASSWORD(default is 1)
-# SMTP_AUTHENTICATED=
-
-# 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 -----------------------------#
 ########################################################################
@@ -73,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  #
@@ -87,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
 
 ##########
@@ -104,11 +99,6 @@ PASSWORD_RESET_DISABLED=1
 PRIVACY_URL=
 TERMS_URL=
 IMPRINT_URL=
-IMPRINT_ADDRESS=
-
-# Configure Turnstile in signup flow
-# NEXT_PUBLIC_TURNSTILE_SITE_KEY=
-# TURNSTILE_SECRET_KEY=
 
 # Configure Github Login
 GITHUB_ID=
@@ -130,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=
 
@@ -161,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=
@@ -181,19 +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=
-
-# NEXT_PUBLIC_INTERCOM_APP_ID=
-# INTERCOM_SECRET_KEY=

.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,31 +1,81 @@
 name: Bug report
 description: "Found a bug? Please fill out the sections below. \U0001F44D"
-type: 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,6 +1,8 @@
 name: Feature request
 description: "Suggest an idea for this project \U0001F680"
-type: feature
+title: "[FEATURE]"
+labels: enhancement
+assignees: []
 body:
   - type: textarea
     id: problem-description
@@ -16,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:
@@ -24,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)
-        - Anything unclear? [Ask in Github Discussions](https://github.com/formbricks/formbricks/discussions)
+        - 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/ISSUE_TEMPLATE/task.yml

@@ -1,11 +0,0 @@
-name: Task (internal)
-description: "Template for creating a task. Used by the Formbricks Team only \U0001f4e5"
-type: task
-body:
-  - type: textarea
-    id: task-summary
-    attributes:
-      label: Task description
-      description: A clear detailed-rich description of the task.
-    validations:
-      required: true

.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,19 +1,15 @@
-name: Build Docs
+name: Build formbricks-com
 on:
   workflow_call:
-
-permissions:
-  contents: read
-  
 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
@@ -21,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,10 +1,6 @@
-name: Build Web
+name: Build web
 on:
   workflow_call:
-
-permissions:
-  contents: read
-  
 jobs:
   build:
     name: Build Formbricks-web
@@ -15,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/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,13 +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 * * *"
-
-permissions:
-  contents: read
-
+  # schedule:
+  # Runs “At 00:00.” (see https://crontab.guru)
+  # - cron: "0 0 * * *"
 jobs:
   cron-weeklySummary:
     env:

.github/workflows/cron-weeklySummary.yml

@@ -4,13 +4,11 @@ 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:
-    permissions:
-      contents: read    
     env:
       APP_URL: ${{ secrets.APP_URL }}
       CRON_SECRET: ${{ secrets.CRON_SECRET }}

.github/workflows/draft-release.yml

@@ -1,55 +0,0 @@
-name: Draft release
-run-name: Draft release ${{ inputs.next_version }}
-
-on:
-  workflow_dispatch:
-    inputs:
-      next_version:
-        required: true
-        type: string
-        description: "Version name"
-
-permissions:
-  contents: write
-
-jobs:
-  draft_release:
-    runs-on: ubuntu-latest
-
-    steps:
-      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683
-
-      - uses: ./.github/actions/dangerous-git-checkout
-
-      - name: Configure git
-        run: |
-          git config --local user.email "github-actions@github.com"
-          git config --local user.name "GitHub Actions"
-
-      - name: Setup Node.js 20.x
-        uses: actions/setup-node@39370e3970a6d050c480ffad4ff0ed4d3fdee5af
-        with:
-          node-version: 20.x
-
-      - name: Install pnpm
-        uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2
-
-      - name: Install dependencies
-        run: pnpm install --config.platform=linux --config.architecture=x64
-
-      - name: Bump version
-        run: |
-          cd apps/web
-          pnpm version ${{ inputs.next_version }} --no-workspaces-update
-
-      - name: Commit changes
-        run: |
-          git add .
-          git commit -m "chore: release v${{ inputs.next_version }}"
-          git push
-
-      - name: Draft release
-        run: gh release create v${{ inputs.next_version }} --generate-notes --draft
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          VERSION: ${{ inputs.next_version }}

.github/workflows/e2e.yml

@@ -1,136 +1,75 @@
 name: E2E Tests
-
 on:
   workflow_call:
-    secrets:
-      AZURE_CLIENT_ID:
-        required: false
-      AZURE_TENANT_ID:
-        required: false
-      AZURE_SUBSCRIPTION_ID:
-        required: false
-      PLAYWRIGHT_SERVICE_URL:
-        required: false
-      # Add other secrets if necessary
   workflow_dispatch:
-
-env:
-  TELEMETRY_DISABLED: 1
-
-permissions:
-  id-token: write
-  contents: read
-  actions: read
-  checks: write
-
 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
-        run: |
-          pnpm build --filter=@formbricks/web...
-
-      - name: Apply Prisma Migrations
-        run: |
-          # pnpm prisma migrate deploy
+          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: |
+          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: Set Azure Secret Variables
-        run: |
-          if [[ -n "${{ secrets.AZURE_CLIENT_ID }}" && -n "${{ secrets.AZURE_TENANT_ID }}" && -n "${{ secrets.AZURE_SUBSCRIPTION_ID }}" ]]; then
-            echo "AZURE_ENABLED=true" >> $GITHUB_ENV
-          else
-            echo "AZURE_ENABLED=false" >> $GITHUB_ENV
-          fi
-
-      - name: Azure login
-        if: env.AZURE_ENABLED == 'true'
-        uses: azure/login@v2
-        with:
-          client-id: ${{ secrets.AZURE_CLIENT_ID }}
-          tenant-id: ${{ secrets.AZURE_TENANT_ID }}
-          subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
-
-      - name: Run E2E Tests (Azure)
-        if: env.AZURE_ENABLED == 'true'
-        env:
-          PLAYWRIGHT_SERVICE_URL: ${{ secrets.PLAYWRIGHT_SERVICE_URL }}
-        run: |
-          pnpm test-e2e:azure
-
-      - name: Run E2E Tests (Local)
-        if: env.AZURE_ENABLED == 'false'
+      - name: Run E2E Tests
         run: |
           pnpm test:e2e
 
-      - uses: actions/upload-artifact@v4
+      - uses: actions/upload-artifact@v3
         if: always()
         with:
           name: playwright-report

.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

@@ -1,10 +1,6 @@
 name: Lint
 on:
   workflow_call:
-
-permissions:
-  contents: read
-
 jobs:
   build:
     name: Linters
@@ -12,16 +8,16 @@ jobs:
     timeout-minutes: 15
 
     steps:
-      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683
+      - uses: actions/checkout@v3
       - uses: ./.github/actions/dangerous-git-checkout
 
-      - name: Setup Node.js 20.x
-        uses: actions/setup-node@39370e3970a6d050c480ffad4ff0ed4d3fdee5af
+      - 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@fe02b34f77f8bc703788d5817da081398fad5dd2
+        uses: pnpm/action-setup@v2
 
       - name: Install dependencies
         run: pnpm install --config.platform=linux --config.architecture=x64
@@ -29,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

@@ -1,13 +1,5 @@
 name: PR Update
 
-# Update permissions to include all necessary ones
-permissions:
-  contents: read
-  pull-requests: read
-  actions: read
-  checks: write
-  id-token: write
-
 on:
   pull_request:
     branches:
@@ -20,40 +12,56 @@ concurrency:
   cancel-in-progress: true
 
 jobs:
+  changes:
+    name: Detect changes
+    runs-on: ubuntu-latest
+    permissions:
+      pull-requests: read
+    outputs:
+      has-files-requiring-all-checks: ${{ steps.filter.outputs.has-files-requiring-all-checks }}
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/dangerous-git-checkout
+      - uses: dorny/paths-filter@v2
+        id: filter
+        with:
+          filters: |
+            has-files-requiring-all-checks:
+              - "!(**.md|.github/CODEOWNERS)"
+
   test:
     name: Run Unit Tests
+    needs: [changes]
+    if: ${{ needs.changes.outputs.has-files-requiring-all-checks == 'true' }}
     uses: ./.github/workflows/test.yml
     secrets: inherit
 
   lint:
     name: Run Linters
+    needs: [changes]
+    if: ${{ needs.changes.outputs.has-files-requiring-all-checks == 'true' }}
     uses: ./.github/workflows/lint.yml
     secrets: inherit
 
   build:
     name: Build Formbricks-web
+    needs: [changes]
+    if: ${{ needs.changes.outputs.has-files-requiring-all-checks == 'true' }}
     uses: ./.github/workflows/build-web.yml
     secrets: inherit
 
-  docs:
-    name: Build Docs
-    uses: ./.github/workflows/build-docs.yml
-    secrets: inherit
-
   e2e-test:
     name: Run E2E Tests
+    needs: [changes]
+    if: ${{ needs.changes.outputs.has-files-requiring-all-checks == 'true' }}
     uses: ./.github/workflows/e2e.yml
     secrets: inherit
 
   required:
     name: PR Check Summary
-    needs: [lint, test, build, e2e-test, docs]
+    needs: [lint, test, build, e2e-test]
     if: always()
     runs-on: ubuntu-latest
-    permissions:
-      contents: read
-      checks: write
-      statuses: write
     steps:
       - name: fail if conditional jobs failed
         if: contains(needs.*.result, 'failure') || contains(needs.*.result, 'skipped') || contains(needs.*.result, 'cancelled')

.github/workflows/release-changesets.yml

@@ -1,15 +1,9 @@
 name: Release Changesets
 
 on:
-  workflow_dispatch:
-  #push:
-  #  branches:
-  #    - main
-
-permissions:
-  contents: write
-  pull-requests: write
-  packages: write
+  push:
+    branches:
+      - main
 
 concurrency: ${{ github.workflow }}-${{ github.ref }}
 

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

@@ -0,0 +1,68 @@
+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:
+    tags:
+      - "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"
+
+jobs:
+  build-and-push:
+    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: Install cosign
+        if: github.event_name != 'pull_request'
+        uses: sigstore/cosign-installer@v3.5.0
+
+      - name: Log in to GitHub Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Extract Docker metadata
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+          tags: |
+            type=ref,event=tag
+            type=raw,value=${{ github.ref_name }}
+
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v3
+        with:
+          context: .
+          file: ./packages/database/Dockerfile
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          build-args: |
+            DATABASE_URL=${{ env.DATABASE_URL }}
+
+      - name: Sign the published Docker image
+        if: ${{ github.event_name != 'pull_request' }}
+        run: |
+          cosign sign --yes ghcr.io/${{ env.IMAGE_NAME }}:${{ github.ref_name }}

.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/release-docker.yml

@@ -8,8 +8,6 @@ on:
 jobs:
   release-image-on-dockerhub:
     name: Release on Dockerhub
-    permissions:
-      contents: read
     runs-on: ubuntu-latest
     env:
       TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}

.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/sonarqube.yml

@@ -1,23 +0,0 @@
-name: SonarQube
-on:
-  workflow_dispatch:
-#  push:
-#    branches:
-#      - main
-#  pull_request:
-#    types: [opened, synchronize, reopened]
-permissions:
-  contents: read
-jobs:
-  sonarqube:
-    name: SonarQube
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-        with:
-          fetch-depth: 0 # Shallow clones should be disabled for a better relevancy of analysis
-      - name: SonarQube Scan
-        uses: SonarSource/sonarqube-scan-action@bfd4e558cda28cda6b5defafb9232d191be8c203
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} # Needed to get PR information, if any
-          SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}

.github/workflows/test.yml

@@ -6,8 +6,6 @@ jobs:
     name: Unit Tests
     runs-on: ubuntu-latest
     timeout-minutes: 15
-    permissions:
-      contents: read
 
     steps:
       - uses: actions/checkout@v3
@@ -19,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
@@ -27,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

.github/workflows/welcome-new-contributors.yml

@@ -22,6 +22,6 @@ jobs:
           repo-token: ${{ secrets.GITHUB_TOKEN }}
           pr-message: |-
             Thank you so much for making your first Pull Request and taking the time to improve Formbricks! 🚀🙏❤️
-            Feel free to join the conversation on [Github Discussions](https://github.com/formbricks/formbricks/discussions) if you need any help or have any questions. 😊
+            Feel free to join the conversation at [Discord](https://formbricks.com/discord)
           issue-message: |
             Thank you for opening your first issue! 🙏❤️ One of our team members will review it and get back to you as soon as it possible. 😊

.gitignore

@@ -35,6 +35,9 @@ yarn-error.log*
 !packages/database/.env
 !apps/web/.env
 
+# Prisma generated files
+packages/database/zod
+
 # turbo
 .turbo
 
@@ -53,9 +56,5 @@ Zone.Identifier
 packages/lib/uploads
 
 # Vite Timestamps
-*vite.config.*.timestamp-*
+vite.config.*.timestamp-*
 
-# js compiled assets
-apps/web/public/js
-
-packages/database/migrations

.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 @@
-22.1.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,15 +16,15 @@ 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.
 
 1. **Pull Request Act:** If you're ready to go, craft a new pull request closely following our PR template 🙏
 
-Would you prefer a chat before you dive into a lot of work? [Github Discussions](https://github.com/formbricks/formbricks/discussions) is your harbor. Share your thoughts, and we'll meet you there with open arms. We're responsive and friendly, promise!
+Would you prefer a chat before you dive into a lot of work? Our [Discord server](https://formbricks.com/discord) is your harbor. Share your thoughts, and we'll meet you there with open arms. We're responsive and friendly, promise!
 
 ## 🚀 Aspiring Features
 

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 "apps/web/modules/ee" directory of this repository, if these directories exist, is licensed under the license defined in "apps/web/modules/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">
@@ -15,12 +13,12 @@
 <p align="center">
 Harvest user-insights, build irresistible experiences.
 <br />
-<a href="https://formbricks.com/">Website</a>
+<a href="https://formbricks.com/">Website</a> | <a href="https://formbricks.com/discord">Join Discord community</a>
 </p>
 </p>
 
 <p align="center">
-<a href="https://github.com/formbricks/formbricks/blob/main/LICENSE"><img src="https://img.shields.io/badge/License-AGPL-purple" alt="License"></a> <a href="https://github.com/formbricks/formbricks/stargazers"><img src="https://img.shields.io/github/stars/formbricks/formbricks?logo=github" alt="Github Stars"></a>
+<a href="https://github.com/formbricks/formbricks/blob/main/LICENSE"><img src="https://img.shields.io/badge/License-AGPL-purple" alt="License"></a> <a href="https://formbricks.com/discord"><img src="https://img.shields.io/discord/979077669410979880?label=Discord&logo=discord&logoColor=%23fff" alt="Join Formbricks Discord"></a> <a href="https://github.com/formbricks/formbricks/stargazers"><img src="https://img.shields.io/github/stars/formbricks/formbricks?logo=github" alt="Github Stars"></a>
 <a href="https://news.ycombinator.com/item?id=32303986"><img src="https://img.shields.io/badge/Hacker%20News-122-%23FF6600" alt="Hacker News"></a>
 <a href="[https://www.producthunt.com/products/formbricks](https://www.producthunt.com/posts/formbricks)"><img src="https://img.shields.io/badge/Product%20Hunt-455-orange?logo=producthunt&logoColor=%23fff" alt="Product Hunt"></a>
 <a href="https://github.blog/2023-04-12-github-accelerator-our-first-cohort-and-whats-next/"><img src="https://img.shields.io/badge/2023-blue?logo=github&label=Github%20Accelerator" alt="Github Accelerator"></a>
@@ -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
 
@@ -228,14 +220,14 @@ The Formbricks core application is licensed under the [AGPLv3 Open Source Licens
 
 ### The Enterprise Edition
 
-Additional to the AGPL licensed Formbricks core, this repository contains code licensed under an Enterprise license. The [code](https://github.com/formbricks/formbricks/tree/main/apps/web/modules/ee) and [license](https://github.com/formbricks/formbricks/blob/main/apps/web/modules/ee/LICENSE) for the enterprise functionality can be found in the `/apps/web/modules/ee` folder of this repository. This additional functionality is not part of the AGPLv3 licensed Formbricks core and is designed to meet the needs of larger teams and enterprises. This advanced functionality is already included in the Docker images, but you need an [Enterprise License Key](https://formbricks.com/docs/self-hosting/enterprise) to unlock it.
+Additional to the AGPL licensed Formbricks core, this repository contains code licensed under an Enterprise license. The [code](https://github.com/formbricks/formbricks/tree/main/packages/ee) and [license](https://github.com/formbricks/formbricks/blob/main/packages/ee/LICENSE) for the enterprise functionality can be found in the `/packages/ee` folder of this repository. This additional functionality is not part of the AGPLv3 licensed Formbricks core and is designed to meet the needs of larger teams and enterprises. This advanced functionality is already included in the Docker images, but you need an [Enterprise License Key](https://formbricks.com/docs/self-hosting/enterprise) to unlock it.
 
 ### White-Labeling Formbricks and Other Licensing Needs
 
-We currently do not offer Formbricks white-labeled. That means that we don't sell a license which let's other companies resell Formbricks to third parties under their name nor take parts (like the survey editor) out of Formbricks to add to their own software products. Any other needs? [Send us an email](mailto:hola@formbricks.com).
+We currently do not offer Formbricks white-labeled. Any other needs? [Send us an email](mailto:hola@formbricks.com).
 
 ### Why charge for Enterprise Features?
 
-The Enterprise Edition allows us to fund the development of Formbricks sustainably. It guarantees that the free and open-source surveying infrastructure we're building will be around for decades to come.
+The Enterprise Edition and White-Label Licenses allow us to fund the development of Formbricks sustainably. It guarantees that the open-source surveying infrastructure we're building will be around for decades to come.
 
 <p align="right"><a href="#top">🔼 Back to top</a></p>

SECURITY.md

@@ -1,7 +1,7 @@
 # Security Policy of Formbricks
 
 This is Formbrick's security policy. Please reach out to us
-on Github or, if privately, via <security@formbricks.com>
+on our Discord or, if privately, via <security@formbricks.com>
 
 ## Introduction
 
@@ -40,7 +40,7 @@ We invite you to report if:
 
 Avoid reporting if:
 
-- Assistance is needed to optimize Formbricks for security – please engage on Github Discussions for this.
+- Assistance is needed to optimize Formbricks for security – please engage on our Discord for this.
 - Help is required for applying security-related updates.
 - The concern is not related to security.
 
@@ -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,29 +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": "52.0.18",
-    "expo-status-bar": "2.0.0",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "react-native": "0.76.5",
-    "react-native-webview": "13.12.5"
-  },
-  "devDependencies": {
-    "@babel/core": "7.26.0",
-    "@types/react": "19.0.1",
-    "typescript": "5.7.2"
-  },
-  "private": true
-}

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

@@ -1,53 +0,0 @@
-import { StatusBar } from "expo-status-bar";
-import React, { type JSX } from "react";
-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 as string,
-    apiHost: process.env.EXPO_PUBLIC_API_HOST as string,
-    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,7 +1,4 @@
 module.exports = {
-  extends: ["@formbricks/eslint-config/next.js"],
-  parserOptions: {
-    project: "tsconfig.json",
-    tsconfigRootDir: __dirname,
-  },
+  root: true,
+  extends: ["formbricks"],
 };

apps/demo/components/LayoutApp.tsx

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

apps/demo/components/Sidebar.tsx

@@ -9,6 +9,7 @@ import {
   ShieldCheckIcon,
   UsersIcon,
 } from "lucide-react";
+
 import { classNames } from "../lib/utils";
 
 const navigation = [
@@ -25,7 +26,7 @@ const secondaryNavigation = [
   { name: "Privacy", href: "#", icon: ShieldCheckIcon },
 ];
 
-export function Sidebar(): React.JSX.Element {
+export const Sidebar = () => {
   return (
     <div className="flex flex-grow flex-col overflow-y-auto bg-cyan-700 pb-4 pt-5">
       <nav
@@ -62,4 +63,4 @@ export function Sidebar(): React.JSX.Element {
       </nav>
     </div>
   );
-}
+};

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

@@ -1,6 +1,7 @@
 import { type VariantProps, cva } from "class-variance-authority";
 import * as React from "react";
-import { cn } from "@formbricks/lib/cn";
+
+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",
@@ -24,7 +25,7 @@ export interface BadgeProps
     VariantProps<typeof badgeVariants> {}
 
 function Badge({ className, variant, ...props }: BadgeProps) {
-  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
+  return <div className={classNames(badgeVariants({ variant }), className)} {...props} />;
 }
 
 export { Badge, badgeVariants };

apps/demo/components/ui/breadcrumb.tsx

@@ -1,8 +1,9 @@
-import { cn } from "@/modules/ui/lib/utils";
 import { Slot } from "@radix-ui/react-slot";
 import { ChevronRight, MoreHorizontal } from "lucide-react";
 import * as React from "react";
 
+import { classNames } from "../../lib/utils";
+
 const Breadcrumb = React.forwardRef<
   HTMLElement,
   React.ComponentPropsWithoutRef<"nav"> & {
@@ -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

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

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

@@ -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

@@ -1,9 +1,10 @@
 "use client";
 
-import { cn } from "@/modules/ui/lib/utils";
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
 import * as React from "react";
 
+import { classNames } from "../../lib/utils";
+
 const Separator = React.forwardRef<
   React.ElementRef<typeof SeparatorPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
@@ -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/lib/utils.ts

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

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/api-reference/config/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

@@ -4,21 +4,30 @@
   "private": true,
   "scripts": {
     "clean": "rimraf .turbo node_modules .next",
-    "dev": "next dev -p 3002 --turbopack",
-    "go": "next dev -p 3002 --turbopack",
+    "dev": "next dev -p 3002 --turbo",
+    "go": "next dev -p 3002",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
   },
   "dependencies": {
     "@formbricks/js": "workspace:*",
-    "lucide-react": "0.468.0",
-    "next": "15.1.2",
-    "react": "19.0.0",
-    "react-dom": "19.0.0"
+    "@formbricks/ui": "workspace:*",
+    "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-progress": "^1.0.3",
+    "@radix-ui/react-separator": "^1.0.3",
+    "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-tabs": "^1.0.4",
+    "@radix-ui/react-tooltip": "^1.0.7",
+    "classnames": "^2.5.1",
+    "lucide-react": "^0.378.0",
+    "next": "14.2.3",
+    "react": "18.3.1",
+    "react-dom": "18.3.1"
   },
   "devDependencies": {
-    "@formbricks/config-typescript": "workspace:*",
-    "@formbricks/eslint-config": "workspace:*"
+    "@formbricks/tsconfig": "workspace:*",
+    "eslint-config-formbricks": "workspace:*"
   }
 }

apps/demo/pages/_app.tsx

@@ -1,8 +1,9 @@
 import type { AppProps } from "next/app";
 import Head from "next/head";
-import "../globals.css";
 
-export default function App({ Component, pageProps }: AppProps): React.JSX.Element {
+import "../styles/globals.css";
+
+const App = ({ Component, pageProps }: AppProps) => {
   return (
     <>
       <Head>
@@ -17,4 +18,6 @@ export default function App({ Component, pageProps }: AppProps): React.JSX.Eleme
       <Component {...pageProps} />
     </>
   );
-}
+};
+
+export default App;

apps/demo/pages/_document.tsx

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

apps/demo/pages/app/index.tsx

@@ -1,12 +1,15 @@
 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";
 
-declare const window: Window;
+import formbricks from "@formbricks/js/app";
 
-export default function AppPage(): React.JSX.Element {
+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();
 
@@ -19,58 +22,50 @@ export default function AppPage(): React.JSX.Element {
   }, [darkMode]);
 
   useEffect(() => {
-    const initFormbricks = () => {
-      // enable Formbricks debug mode by adding formbricksDebug=true GET parameter
-      const addFormbricksDebugParam = (): void => {
-        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",
-        };
-
-        void 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", () => {
-          void handleRouteChange();
-        });
-
-        return () => {
-          router.events.off("routeChangeComplete", () => {
-            void handleRouteChange();
-          });
-        };
+    // 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);
       }
     };
 
-    initFormbricks();
-  }, [router.events]);
+    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="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
@@ -83,11 +78,8 @@ export default function AppPage(): React.JSX.Element {
         </div>
 
         <button
-          type="button"
           className="mt-2 rounded-lg bg-slate-200 px-6 py-1 dark:bg-slate-700 dark:text-slate-100"
-          onClick={() => {
-            setDarkMode(!darkMode);
-          }}>
+          onClick={() => setDarkMode(!darkMode)}>
           {darkMode ? "Toggle Light Mode" : "Toggle Dark Mode"}
         </button>
       </div>
@@ -108,8 +100,8 @@ export default function AppPage(): React.JSX.Element {
                   {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 className="relative inline-flex h-3 w-3 rounded-full bg-green-500" />
+                  <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>
@@ -120,11 +112,14 @@ export default function AppPage(): React.JSX.Element {
               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-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>
@@ -134,9 +129,8 @@ export default function AppPage(): React.JSX.Element {
             </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"
-              type="button"
               onClick={() => {
-                void formbricks.reset();
+                formbricks.reset();
               }}>
               Reset
             </button>
@@ -148,9 +142,7 @@ export default function AppPage(): React.JSX.Element {
 
           <div className="p-6">
             <div>
-              <button
-                type="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>
@@ -159,7 +151,6 @@ export default function AppPage(): React.JSX.Element {
                 This button sends a{" "}
                 <a
                   href="https://formbricks.com/docs/actions/no-code"
-                  rel="noopener noreferrer"
                   className="underline dark:text-blue-500"
                   target="_blank">
                   No Code Action
@@ -167,7 +158,6 @@ export default function AppPage(): React.JSX.Element {
                 as long as you created it beforehand in the Formbricks App.{" "}
                 <a
                   href="https://formbricks.com/docs/actions/no-code"
-                  rel="noopener noreferrer"
                   target="_blank"
                   className="underline dark:text-blue-500">
                   Here are instructions on how to do it.
@@ -178,11 +168,10 @@ export default function AppPage(): React.JSX.Element {
           <div className="p-6">
             <div>
               <button
-                type="button"
                 onClick={() => {
-                  void formbricks.setAttribute("Plan", "Free");
+                  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>
@@ -192,7 +181,6 @@ export default function AppPage(): React.JSX.Element {
                 <a
                   href="https://formbricks.com/docs/attributes/custom-attributes"
                   target="_blank"
-                  rel="noopener noreferrer"
                   className="underline dark:text-blue-500">
                   attribute
                 </a>{" "}
@@ -203,11 +191,10 @@ export default function AppPage(): React.JSX.Element {
           <div className="p-6">
             <div>
               <button
-                type="button"
                 onClick={() => {
-                  void formbricks.setAttribute("Plan", "Paid");
+                  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>
@@ -217,7 +204,6 @@ export default function AppPage(): React.JSX.Element {
                 <a
                   href="https://formbricks.com/docs/attributes/custom-attributes"
                   target="_blank"
-                  rel="noopener noreferrer"
                   className="underline dark:text-blue-500">
                   attribute
                 </a>{" "}
@@ -228,11 +214,10 @@ export default function AppPage(): React.JSX.Element {
           <div className="p-6">
             <div>
               <button
-                type="button"
                 onClick={() => {
-                  void formbricks.setEmail("test@web.com");
+                  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>
@@ -242,7 +227,6 @@ export default function AppPage(): React.JSX.Element {
                 <a
                   href="https://formbricks.com/docs/attributes/identify-users"
                   target="_blank"
-                  rel="noopener noreferrer"
                   className="underline dark:text-blue-500">
                   user email
                 </a>{" "}
@@ -254,4 +238,6 @@ export default function AppPage(): React.JSX.Element {
       </div>
     </div>
   );
-}
+};
+
+export default AppPage;

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"]
 }