replacing intercom with helpscout (#7865)

Co-authored-by: nafees nazik <nafeesnazik21@gmail.com>

.devcontainer/devcontainer.json

@@ -0,0 +1,42 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the
+// README at: https://github.com/devcontainers/templates/tree/main/src/docker-outside-of-docker
+{
+  "name": "Docker outside of Docker",
+  // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
+  "image": "mcr.microsoft.com/devcontainers/base:bullseye",
+
+  "features": {
+    "ghcr.io/devcontainers/features/docker-from-docker:1": {
+      "version": "latest",
+      "enableNonRootDocker": "true",
+      "moby": "true"
+    },
+    "ghcr.io/devcontainers/features/node:1": {},
+    "ghcr.io/devcontainers-contrib/features/npm-package:1": {},
+    "ghcr.io/devcontainers-contrib/features/jest:2": {},
+    "ghcr.io/devcontainers-contrib/features/prisma:2": {},
+    "ghcr.io/guiyomh/features/vim:0": {}
+  },
+
+  // Use this environment variable if you need to bind mount your local source code into a new container.
+  "remoteEnv": {
+    "LOCAL_WORKSPACE_FOLDER": "${localWorkspaceFolder}"
+  },
+
+  "hostRequirements": {
+    "cpus": 4,
+    "memory": "8gb"
+  },
+
+  // Use 'postCreateCommand' to run commands after the container is created.
+  "postCreateCommand": "./deploy/install.sh"
+
+  // Use 'forwardPorts' to make a list of ports inside the container available locally.
+  // "forwardPorts": [],
+
+  // Configure tool-specific properties.
+  // "customizations": {},
+
+  // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
+  // "remoteUser": "root"
+}

.env.appStore.example

@@ -11,16 +11,26 @@
 #   - ZOOM
 #   - GIPHY
 #   - VITAL
+#   - ZAPIER
+#   - LARK
+#   - WEB3
+#   - SALESFORCE
+#   - ZOHOCRM
 
 # - APP STORE **********************************************************************************************
 # ⚠️ ⚠️ ⚠️ THESE WILL BE MIGRATED TO THE DATABASE TO PREVENT AWS's 4KB ENV QUOTA ⚠️ ⚠️ ⚠️
 #   - DAILY.CO VIDEO
+# Enables Cal Video. to get your key 
+# 1. Visit our [Daily.co Partnership Form](https://go.cal.com/daily) and enter your information
+# 2. From within your dashboard, go to the [developers](https://dashboard.daily.co/developers) tab.
+# @see https://github.com/calcom/cal.com#obtaining-daily-api-credentials
+
 DAILY_API_KEY=
 DAILY_SCALE_PLAN=''
 
 #   - GOOGLE CALENDAR/MEET/LOGIN
 # Needed to enable Google Calendar integration and Login with Google
-# @see https://github.com/calendso/calendso#obtaining-the-google-api-credentials
+# @see https://github.com/calcom/cal.com#obtaining-the-google-api-credentials
 GOOGLE_API_CREDENTIALS=
 
 # To enable Login with Google you need to:
@@ -87,4 +97,28 @@ VITAL_REGION="us"
 # Used for the Zapier integration
 # @see https://github.com/calcom/cal.com/blob/main/packages/app-store/zapier/README.md
 ZAPIER_INVITE_LINK=""
+
+#   - LARK
+# Needed to enable Lark Calendar integration and Login with Lark
+# @see <https://open.larksuite.com/document/ukTMukTMukTM/ukDNz4SO0MjL5QzM/g>
+LARK_OPEN_APP_ID=""
+LARK_OPEN_APP_SECRET=""
+LARK_OPEN_VERIFICATION_TOKEN=""
+
+#   - WEB3
+# Used for the Web3 plugin
+# @see https://github.com/calcom/cal.com/blob/main/packages/app-store/rainbow/README.md
+ALCHEMY_API_KEY=""
+INFURA_API_KEY=""
+
+#   - SALESFORCE
+# Used for the Salesforce (Sales Cloud) app
+SALESFORCE_CONSUMER_KEY=""
+SALESFORCE_CONSUMER_SECRET=""
+
+#   - ZOHOCRM
+# Used for the Zoho CRM integration
+ZOHOCRM_CLIENT_ID=""
+ZOHOCRM_CLIENT_SECRET=""
+
 # *********************************************************************************************************

.env.example

@@ -1,27 +1,34 @@
 # ********** INDEX **********
 #
-# - LICENSE
+# - LICENSE (DEPRECATED)
 # - DATABASE
 # - SHARED
 #   - NEXTAUTH
 # - E-MAIL SETTINGS
 
-# - LICENSE *************************************************************************************************
-# Set this value to 'agree' to accept our license:
-# LICENSE: https://github.com/calendso/calendso/blob/main/LICENSE
+# - LICENSE (DEPRECATED) ************************************************************************************
+# https://github.com/calcom/cal.com/blob/main/LICENSE
 #
 # Summary of terms:
 # - The codebase has to stay open source, whether it was modified or not
 # - You can not repackage or sell the codebase
 # - Acquire a commercial license to remove these terms by visiting: cal.com/sales
-NEXT_PUBLIC_LICENSE_CONSENT=''
-# To enable enterprise-only features, fill your license key in here.
+#
+# To enable enterprise-only features, as an admin, go to /auth/setup to select your license and follow
+# instructions. This environment variable is deprecated although still supported for backward compatibility.
 # @see https://console.cal.com
 CALCOM_LICENSE_KEY=
 # ***********************************************************************************************************
 
 # - DATABASE ************************************************************************************************
-# ⚠️ ⚠️ ⚠️ DATABASE_URL got moved to `packages/prisma/.env.example` ⚠️ ⚠️ ⚠️
+DATABASE_URL="postgresql://postgres:@localhost:5450/calendso"
+
+# Uncomment to enable a dedicated connection pool for Prisma using Prisma Data Proxy
+# Cold boots will be faster and you'll be able to scale your DB independently of your app.
+# @see https://www.prisma.io/docs/data-platform/data-proxy/use-data-proxy
+# PRISMA_GENERATE_DATAPROXY=true
+PRISMA_GENERATE_DATAPROXY=
+
 # ***********************************************************************************************************
 
 # - SHARED **************************************************************************************************
@@ -32,11 +39,16 @@ NEXT_PUBLIC_CONSOLE_URL='http://localhost:3004'
 NEXT_PUBLIC_EMBED_LIB_URL='http://localhost:3000/embed/embed.js'
 
 # To enable SAML login, set both these variables
-# @see https://github.com/calcom/cal.com/tree/main/packages/ee#setting-up-saml-login
+# @see https://github.com/calcom/cal.com/tree/main/packages/features/ee#setting-up-saml-login
 # SAML_DATABASE_URL="postgresql://postgres:@localhost:5450/cal-saml"
 SAML_DATABASE_URL=
 # SAML_ADMINS='pro@example.com'
 SAML_ADMINS=
+# NEXT_PUBLIC_HOSTED_CAL_FEATURES=1
+NEXT_PUBLIC_HOSTED_CAL_FEATURES=
+# For additional security set to a random secret and use that value as the client_secret during the OAuth 2.0 flow.
+SAML_CLIENT_SECRET_VERIFIER=
+
 # If you use Heroku to deploy Postgres (or use self-signed certs for Postgres) then uncomment the follow line.
 # @see https://devcenter.heroku.com/articles/connecting-heroku-postgres#connecting-in-node-js
 # PGSSLMODE='no-verify'
@@ -46,13 +58,12 @@ PGSSLMODE=
 # @see: https://github.com/calendso/calendso/issues/263
 # @see: https://next-auth.js.org/configuration/options#nextauth_url
 # Required for Vercel hosting - set NEXTAUTH_URL to equal your NEXT_PUBLIC_WEBAPP_URL
-# NEXTAUTH_URL='http://localhost:3000'
-NEXTAUTH_URL=
+NEXTAUTH_URL='http://localhost:3000'
 # @see: https://next-auth.js.org/configuration/options#nextauth_secret
 # You can use: `openssl rand -base64 32` to generate one
 NEXTAUTH_SECRET=
 # Used for cross-domain cookie authentication
-NEXTAUTH_COOKIE_DOMAIN=.example.com
+NEXTAUTH_COOKIE_DOMAIN=
 
 # Set this to '1' if you don't want Cal to collect anonymous usage
 CALCOM_TELEMETRY_DISABLED=
@@ -74,19 +85,28 @@ NEXT_PUBLIC_ZENDESK_KEY=
 # Help Scout Config
 NEXT_PUBLIC_HELPSCOUT_KEY=
 
+# Fresh Chat Config
+NEXT_PUBLIC_FRESHCHAT_TOKEN=
+NEXT_PUBLIC_FRESHCHAT_HOST=
+
 # Inbox to send user feedback
 SEND_FEEDBACK_EMAIL=
 
 # Sengrid
-# Used for email reminders in workflows
+# Used for email reminders in workflows and internal sync services
 SENDGRID_API_KEY=
 SENDGRID_EMAIL=
+NEXT_PUBLIC_SENDGRID_SENDER_NAME=
 
 # Twilio
 # Used to send SMS reminders in workflows
 TWILIO_SID=
 TWILIO_TOKEN=
 TWILIO_MESSAGING_SID=
+TWILIO_PHONE_NUMBER=
+# For NEXT_PUBLIC_SENDER_ID only letters, numbers and spaces are allowed (max. 11 characters)
+NEXT_PUBLIC_SENDER_ID=
+TWILIO_VERIFY_SID=
 
 # This is used so we can bypass emails in auth flows for E2E testing
 # Set it to "1" if you need to run E2E tests locally
@@ -95,11 +115,14 @@ NEXT_PUBLIC_IS_E2E=
 # Used for internal billing system
 NEXT_PUBLIC_STRIPE_PRO_PLAN_PRICE=
 NEXT_PUBLIC_STRIPE_PREMIUM_PLAN_PRICE=
-NEXT_PUBLIC_STRIPE_FREE_PLAN_PRICE=
+NEXT_PUBLIC_IS_PREMIUM_NEW_PLAN=0
+NEXT_PUBLIC_STRIPE_PREMIUM_NEW_PLAN_PRICE=
+STRIPE_TEAM_MONTHLY_PRICE_ID=
 STRIPE_WEBHOOK_SECRET=
-STRIPE_PRO_PLAN_PRODUCT_ID=
-STRIPE_PREMIUM_PLAN_PRODUCT_ID=
-STRIPE_FREE_PLAN_PRODUCT_ID=
+STRIPE_PRIVATE_KEY=
+STRIPE_CLIENT_ID=
+PAYMENT_FEE_FIXED=
+PAYMENT_FEE_PERCENTAGE=
 
 # Use for internal Public API Keys and optional
 API_KEY_PREFIX=cal_
@@ -130,3 +153,27 @@ EMAIL_SERVER_PASSWORD='<office365_password>'
 
 # Set the following value to true if you wish to enable Team Impersonation
 NEXT_PUBLIC_TEAM_IMPERSONATION=false
+
+# Close.com internal CRM
+CLOSECOM_API_KEY=
+
+# Sendgrid internal sync service
+SENDGRID_SYNC_API_KEY=
+
+# Sentry
+NEXT_PUBLIC_SENTRY_DSN=
+SENTRY_IGNORE_API_RESOLUTION_ERROR=
+
+# Change your Brand
+NEXT_PUBLIC_APP_NAME="Cal.com"
+NEXT_PUBLIC_SUPPORT_MAIL_ADDRESS="help@cal.com"
+NEXT_PUBLIC_COMPANY_NAME="Cal.com, Inc."
+# Set this to true in to disable new signups
+# NEXT_PUBLIC_DISABLE_SIGNUP=true
+NEXT_PUBLIC_DISABLE_SIGNUP=
+
+# Content Security Policy
+CSP_POLICY=
+
+# Vercel Edge Config
+EDGE_CONFIG=

.eslintignore

@@ -0,0 +1,6 @@
+node_modules
+**/**/node_modules
+**/**/.next
+**/**/public
+packages/prisma/zod
+apps/web/public/embed

.github/CODEOWNERS

@@ -0,0 +1,33 @@
+# This is a comment.
+# Each line is a file pattern followed by one or more owners.
+
+# These owners will be the default owners for everything in
+# the repo. Unless a later match takes precedence,
+# @global-owner1 and @global-owner2 will be requested for
+# review when someone opens a pull request.
+*           @calcom/reviewers
+
+.github/    @calcom/core
+.husky/     @calcom/core
+.vcode/     @calcom/core
+.snaplet/   @calcom/core
+deploy/     @calcom/core
+scripts/    @calcom/core
+
+apps/docs       @calcom/docs
+apps/swagger    @calcom/docs
+
+packages/app-store-cli                @hariombalhara @calcom/core
+packages/dayjs                        @zomars @calcom/core
+packages/emails                       @zomars @calcom/core
+packages/embeds                       @hariombalhara @calcom/core
+packages/eslint-plugin                @zomars @calcom/core
+packages/features                     @zomars @calcom/core
+packages/features/kbar                @alishaz-polymath @calcom/core
+packages/features/ee/impersonation    @sean-brydon @calcom/core
+packages/features/ee/payments         @alannnc @calcom/core
+packages/features/ee/workflows        @CarinaWolli @calcom/core
+packages/features/tips                @PeerRich @calcom/core
+packages/ui                           @calcom/ui
+packages/config                       @calcom/core
+packages/app-store/routing-forms   @hariombalhara @calcom/core

.github/PULL_REQUEST_TEMPLATE.md

@@ -15,6 +15,7 @@ Fixes # (issue)
 <!-- Please delete options that are not relevant. -->
 
 - [ ] Bug fix (non-breaking change which fixes an issue)
+- [ ] Chore (refactoring code, technical debt, workflow improvements)
 - [ ] New feature (non-breaking change which adds functionality)
 - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
 - [ ] This change requires a documentation update

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

@@ -0,0 +1,29 @@
+name: Cache production build binaries
+description: "Cache or restore if necessary"
+inputs:
+  node_version:
+    required: false
+    default: v18.x
+runs:
+  using: "composite"
+  steps:
+    - name: Cache production build
+      uses: actions/cache@v3
+      id: cache-build
+      env:
+        cache-name: prod-build
+        key-1: ${{ inputs.node_version }}-${{ hashFiles('yarn.lock') }}
+        key-2: ${{ hashFiles('apps/**/**.[jt]s', 'apps/**/**.[jt]sx', 'packages/**/**.[jt]s', 'packages/**/**.[jt]sx', '!**/node_modules') }}
+        key-3: ${{ github.event.pull_request.number || github.ref }}
+        # Ensures production-build.yml will always be fresh
+        key-4: ${{ github.sha }}
+      with:
+        path: |
+          ${{ github.workspace }}/apps/web/.next
+          ${{ github.workspace }}/apps/web/public/embed
+          **/.turbo/**
+          **/dist/**
+        key: ${{ runner.os }}-${{ env.cache-name }}-${{ env.key-1 }}-${{ env.key-2 }}-${{ env.key-3 }}-${{ env.key-4 }}
+    - run: yarn build
+      if: steps.cache-build.outputs.cache-hit != 'true'
+      shell: bash

.github/actions/cache-db/action.yml

@@ -0,0 +1,38 @@
+name: Cache database between jobs
+description: "Cache or restore if necessary"
+inputs:
+  DATABASE_URL:
+    required: false
+    default: "postgresql://postgres:@localhost:5432/calendso"
+  path:
+    required: false
+    default: "backups/backup.sql"
+runs:
+  using: "composite"
+  steps:
+    - name: Cache database
+      id: cache-db
+      uses: actions/cache@v3
+      env:
+        cache-name: cache-db
+        key-1: ${{ hashFiles('packages/prisma/schema.prisma', 'packages/prisma/migrations/**/**.sql', 'packages/prisma/*.ts') }}
+        key-2: ${{ github.event.pull_request.number || github.ref }}
+      with:
+        path: ${{ inputs.path }}
+        key: ${{ runner.os }}-${{ env.cache-name }}-${{ inputs.path }}-${{ env.key-1 }}-${{ env.key-2 }}
+    - run: yarn db-seed
+      if: steps.cache-db.outputs.cache-hit != 'true'
+      shell: bash
+    - name: Postgres Dump Backup
+      if: steps.cache-db.outputs.cache-hit != 'true'
+      uses: tj-actions/pg-dump@v2.3
+      with:
+        database_url: ${{ inputs.DATABASE_URL }}
+        path: ${{ inputs.path }}
+        options: "-O"
+    - name: Postgres Backup Restore
+      if: steps.cache-db.outputs.cache-hit == 'true'
+      uses: tj-actions/pg-restore@v4.5
+      with:
+        database_url: ${{ inputs.DATABASE_URL }}
+        backup_file: ${{ inputs.path }}

.github/actions/dangerous-git-checkout/action.yml

@@ -0,0 +1,10 @@
+name: Dangerous git Checkout
+description: "Git Checkout from PR code so we can run checks from forks"
+runs:
+  using: "composite"
+  steps:
+    - name: Checkout repo
+      uses: actions/checkout@v3
+      with:
+        ref: ${{ github.event.pull_request.head.sha }}
+        fetch-depth: 2

.github/actions/env-read-file/action.yml

@@ -0,0 +1,16 @@
+name: "Set environment variables"
+description: "Configures environment variables for a workflow"
+runs:
+  using: "composite"
+  steps:
+    - name: Create env file
+      uses: actions/cache@v3
+      id: env-cache
+      with:
+        path: gh.env
+        key: env-cache-${{ hashFiles('gh.env') }}
+        restore-keys: env-cache-
+    - name: Set Environment Variables
+      uses: tw3lveparsecs/github-actions-setvars@latest
+      with:
+        envFilePath: gh.env

.github/actions/yarn-install/action.yml

@@ -0,0 +1,62 @@
+########################################################################################
+# "yarn install" composite action for yarn 2/3/4+ and "nodeLinker: node-modules"       #
+#--------------------------------------------------------------------------------------#
+# Cache:                                                                               #
+#   - Downloaded zip archive (multi-arch, preserved across yarn.lock changes)          #
+#   - Yarn install state (discarded on yarn.lock changes)                              #
+# References:                                                                          #
+#   - bench: https://gist.github.com/belgattitude/0ecd26155b47e7be1be6163ecfbb0f0b     #
+#   - vs @setup/node: https://github.com/actions/setup-node/issues/325                 #
+########################################################################################
+
+name: "Yarn install"
+description: "Run yarn install with node_modules linker and cache enabled"
+inputs:
+  node_version:
+    required: false
+    default: v18.x
+
+runs:
+  using: "composite"
+  steps:
+    - name: Use Node ${{ inputs.node_version }}
+      uses: actions/setup-node@v3
+      with:
+        node-version: ${{ inputs.node_version }}
+    - name: Expose yarn config as "$GITHUB_OUTPUT"
+      id: yarn-config
+      shell: bash
+      run: |
+        echo "CACHE_FOLDER=$(yarn config get cacheFolder)" >> $GITHUB_OUTPUT
+
+    # Yarn rotates the downloaded cache archives, @see https://github.com/actions/setup-node/issues/325
+    # Yarn cache is also reusable between arch and os.
+    - name: Restore yarn cache
+      uses: actions/cache@v3
+      id: yarn-download-cache
+      with:
+        path: ${{ steps.yarn-config.outputs.CACHE_FOLDER }}
+        key: yarn-download-cache-${{ hashFiles('yarn.lock') }}
+        restore-keys: |
+          yarn-download-cache-
+
+    # Invalidated on yarn.lock changes
+    - name: Restore yarn install state
+      id: yarn-install-state-cache
+      uses: actions/cache@v3
+      with:
+        path: .yarn/ci-cache/
+        key: ${{ runner.os }}-yarn-install-state-cache-${{ hashFiles('yarn.lock', '.yarnrc.yml') }}
+
+    - name: Install dependencies
+      shell: bash
+      run: |
+        yarn install --inline-builds
+        yarn prisma generate
+      env:
+        # CI optimizations. Overrides yarnrc.yml options (or their defaults) in the CI action.
+        YARN_ENABLE_IMMUTABLE_INSTALLS: "false" # So it doesn't try to remove our private submodule deps
+        YARN_ENABLE_GLOBAL_CACHE: "false" # Use local cache folder to keep downloaded archives
+        YARN_INSTALL_STATE_PATH: .yarn/ci-cache/install-state.gz # Very small speedup when lock does not change
+        # Other environment variables
+        HUSKY: "0" # By default do not run HUSKY install

.github/actions/yarn-playwright-install/action.yml

@@ -0,0 +1,19 @@
+name: Install playwright binaries
+description: "Install playwright, cache and restore if necessary"
+runs:
+  using: "composite"
+  steps:
+    - name: Cache playwright binaries
+      id: playwright-cache
+      uses: actions/cache@v2
+      with:
+        path: |
+          ~/Library/Caches/ms-playwright
+          ~/.cache/ms-playwright
+          ${{ github.workspace }}/node_modules/playwright
+        key: cache-playwright-${{ hashFiles('**/yarn.lock') }}
+        restore-keys: cache-playwright-
+    - name: Yarn playwright install
+      shell: bash
+      if: steps.playwright-cache.outputs.cache-hit != 'true'
+      run: yarn playwright install

.github/labeler.yml

@@ -1,5 +1,6 @@
-"♻️ autoupdate":
-  - apps/web/public/static/locales/**/*.json
+"❗️ migrations":
+  - packages/prisma/migrations/**/migration.sql
 
-automerge:
-  - apps/web/public/static/locales/**/*.json
+"❗️ .env changes":
+  - .env.example
+  - .env.appStore.example

.github/workflows/add-to-project.yml

@@ -1,22 +0,0 @@
-name: Add bugs to Bug Hunting
-
-on:
-  issues:
-    types:
-      - opened
-      - labeled
-  pull_request:
-    types:
-      - opened
-      - labeled
-
-jobs:
-  add-to-project:
-    name: Add issue to project
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/add-to-project@v0.1.0
-        with:
-          project-url: https://github.com/orgs/calcom/projects/1
-          github-token: ${{ secrets.GH_ACCESS_TOKEN }}
-          labeled: 🐛 bug, 🎨 needs design, 🙋🏻‍♂️help wanted, 🚨 urgent

.github/workflows/cache-clean.yml

@@ -0,0 +1,33 @@
+name: cleanup caches by a branch
+on:
+  pull_request:
+    types:
+      - closed
+
+jobs:
+  cleanup:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out code
+        uses: actions/checkout@v3
+
+      - name: Cleanup
+        run: |
+          gh extension install actions/gh-actions-cache
+
+          REPO=${{ github.repository }}
+          BRANCH="refs/pull/${{ github.event.pull_request.number }}/merge"
+
+          echo "Fetching list of cache key"
+          cacheKeysForPR=$(gh actions-cache list -R $REPO -B $BRANCH | cut -f 1 )
+
+          ## Setting this to not fail the workflow while deleting cache keys. 
+          set +e
+          echo "Deleting caches..."
+          for cacheKey in $cacheKeysForPR
+          do
+              gh actions-cache delete $cacheKey -R $REPO -B $BRANCH --confirm
+          done
+          echo "Done"
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/check-if-ui-has-changed.yml

@@ -12,41 +12,20 @@ on:
       - apps/storybook/**
       - packages/ui/**
   workflow_dispatch:
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
 
 # List of jobs
 jobs:
-  check-if-ui-has-changed:
-    runs-on: ubuntu-latest
-    # Declare outputs for next jobs
-    outputs:
-      docs_changed: ${{ steps.check_file_changed.outputs.docs_changed }}
-    steps:
-    - uses: actions/checkout@v2
-      with:
-        # Checkout as many commits as needed for the diff
-        fetch-depth: 2
-    - shell: pwsh
-      id: check_file_changed
-      run: |
-        # Diff HEAD with the previous commit
-        $diff = git diff --name-only HEAD^ HEAD
-
-        # Check if a file under /packages/ui or apps/storybook has been modified since the previous commit
-        $SourceDiff = $diff | Where-Object { $_ -match '^packages/ui/' -or $_ -match '^apps/storybook/' }
-        $HasDiff = $SourceDiff.Length -gt 0
-
-        # Set the output named "hasUiChanges"
-        Write-Host "::set-output name=hasUiChanges::$HasDiff"
   chromatic-deployment:
     runs-on: ubuntu-latest
-    needs: [ check-if-ui-has-changed ]
-    if: needs.checkIfUiHasChanged.outputs.hasUiChanges== 'True'
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
         with:
           ref: ${{ github.event.pull_request.head.sha }} # So we can test on forks
-          fetch-depth: 2
+          fetch-depth: 0
       - name: Install dependencies
         run: yarn
         # 👇 Adds Chromatic as a step in the workflow
@@ -56,3 +35,5 @@ jobs:
         with:
           # 👇 Chromatic projectToken, refer to the manage page to obtain it.
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          workingDir: "apps/storybook"
+          buildScriptName: "build"

.github/workflows/check-types.yml

@@ -1,24 +1,17 @@
 name: Check types
 on:
-  pull_request_target:
-    branches:
-      - main
-    paths:
-      - "**.tsx?"
+  workflow_call:
+env:
+  NODE_OPTIONS: "--max-old-space-size=8192"
 jobs:
   check-types:
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout repo
-        uses: actions/checkout@v2
-        with:
-          ref: ${{ github.event.pull_request.head.sha }}
-          fetch-depth: 2
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/dangerous-git-checkout
+      - uses: ./.github/actions/yarn-install
+
+      - name: Show info
+        run: node -e "console.log(require('v8').getHeapStatistics())"
 
-      - name: Use Node 16.x
-        uses: actions/setup-node@v3
-        with:
-          node-version: 16.x
-          cache: "yarn"
-      - run: yarn --frozen-lockfile
       - run: yarn type-check

.github/workflows/cron-stale-issue.yml

@@ -0,0 +1,20 @@
+name: Cron - mark stale for inactive issues
+
+permissions:
+  issues: write
+
+on:
+  # "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 every day (see https://crontab.guru)
+    - cron: "0 0 * * *"
+jobs:
+  stale:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/stale@v7
+        with:
+          days-before-stale: 60
+          include-only-assigned: true
+          days-before-close: -1

.github/workflows/crowdin.yml

@@ -4,22 +4,28 @@ on:
   push:
     branches:
       - main
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
 
 jobs:
   synchronize-with-crowdin:
     runs-on: ubuntu-latest
 
     steps:
+      - name: Checkout
+        uses: actions/checkout@v3
 
-    - name: Checkout
-      uses: actions/checkout@v2
-
-    - name: crowdin action
-      uses: crowdin/github-action@1.4.9
-      with:
-        upload_translations: true
-        download_translations: true
-      env:
-        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        CROWDIN_PROJECT_ID: ${{ secrets.CROWDIN_PROJECT_ID }}
-        CROWDIN_PERSONAL_TOKEN: ${{ secrets.CROWDIN_PERSONAL_TOKEN }}
+      - name: crowdin action
+        uses: crowdin/github-action@1.5.1
+        with:
+          upload_sources: true
+          download_translations: true
+          push_translations: true
+          commit_message: "New Crowdin translations by Github Action"
+          localization_branch_name: main
+          create_pull_request: false
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          CROWDIN_PROJECT_ID: ${{ secrets.CROWDIN_PROJECT_ID }}
+          CROWDIN_PERSONAL_TOKEN: ${{ secrets.CROWDIN_PERSONAL_TOKEN }}

.github/workflows/db-staging-snapshot.yml

@@ -1,18 +0,0 @@
-name: Staging DB Snapshot
-on:
-  schedule:
-    - cron: "0 4 * * 1-5" # At 04:00 on every day-of-week from Monday through Friday.
-  workflow_dispatch:
-jobs:
-  db-staging-snapshot:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - name: Install Snaplet CLI
-        run: curl -sL https://app.snaplet.dev/get-cli/ | bash
-      - name: Restore Snapshot
-        run: snaplet snapshot restore -y
-        env:
-          SNAPLET_DATABASE_URL: ${{ secrets.SNAPLET_DATA_TARGET_DB_URL }}
-          SNAPLET_ACCESS_TOKEN: ${{ secrets.SNAPLET_ACCESS_TOKEN }}
-          SNAPLET_DATABASE_ID: ${{ secrets.SNAPLET_DATABASE_ID }}

.github/workflows/e2e-app-store.yml

@@ -1,57 +1,12 @@
 name: E2E App-Store Apps
 on:
-  push:
-    branches: [ feature/event-routing ]
-  pull_request_target: # So we can test on forks
-    branches:
-      - main
-    paths-ignore:
-      - apps/api/**
-      - apps/console/**
-      - apps/docs/**
-      - apps/swagger/**
-      - apps/website/**
-      - apps/web/public/**
+  workflow_call:
+
 jobs:
-  test:
+  e2e-app-store:
     timeout-minutes: 20
     name: E2E App-Store Apps
-    strategy:
-      matrix:
-        node: ["16.x"]
-        os: [ubuntu-latest]
-    runs-on: ${{ matrix.os }}
-
-    env:
-      DATABASE_URL: postgresql://postgres:@localhost:5432/calendso
-      NEXT_PUBLIC_WEBAPP_URL: http://localhost:3000
-      NEXT_PUBLIC_WEBSITE_URL: http://localhost:3000
-      NEXTAUTH_SECRET: secret
-      GOOGLE_API_CREDENTIALS: ${{ secrets.CI_GOOGLE_API_CREDENTIALS }}
-      GOOGLE_LOGIN_ENABLED: true
-      # CRON_API_KEY: xxx
-      CALENDSO_ENCRYPTION_KEY: ${{ secrets.CI_CALENDSO_ENCRYPTION_KEY }}
-      NEXT_PUBLIC_STRIPE_PUBLIC_KEY: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_PUBLIC_KEY }}
-      STRIPE_PRIVATE_KEY: ${{ secrets.CI_STRIPE_PRIVATE_KEY }}
-      STRIPE_CLIENT_ID: ${{ secrets.CI_STRIPE_CLIENT_ID }}
-      STRIPE_WEBHOOK_SECRET: ${{ secrets.CI_STRIPE_WEBHOOK_SECRET }}
-      PAYMENT_FEE_PERCENTAGE: 0.005
-      PAYMENT_FEE_FIXED: 10
-      SAML_DATABASE_URL: postgresql://postgres:@localhost:5432/calendso
-      SAML_ADMINS: pro@example.com
-      NEXTAUTH_URL: http://localhost:3000/api/auth
-      NEXT_PUBLIC_IS_E2E: 1
-      # EMAIL_FROM: e2e@cal.com
-      # EMAIL_SERVER_HOST: ${{ secrets.CI_EMAIL_SERVER_HOST }}
-      # EMAIL_SERVER_PORT: ${{ secrets.CI_EMAIL_SERVER_PORT }}
-      # EMAIL_SERVER_USER: ${{ secrets.CI_EMAIL_SERVER_USER }}
-      # EMAIL_SERVER_PASSWORD: ${{ secrets.CI_EMAIL_SERVER_PASSWORD }}
-      # MS_GRAPH_CLIENT_ID: xxx
-      # MS_GRAPH_CLIENT_SECRET: xxx
-      # ZOOM_CLIENT_ID: xxx
-      # ZOOM_CLIENT_SECRET: xxx
-      TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
-      TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
+    runs-on: ubuntu-latest
     services:
       postgres:
         image: postgres:12.1
@@ -62,38 +17,21 @@ jobs:
           - 5432:5432
 
     steps:
-      - name: Checkout repo
-        uses: actions/checkout@v2
-        with:
-          ref: ${{ github.event.pull_request.head.sha }} # So we can test on forks
-          fetch-depth: 2
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/dangerous-git-checkout
       - run: echo 'NODE_OPTIONS="--max_old_space_size=4096"' >> $GITHUB_ENV
-      - name: Use Node ${{ matrix.node }}
-        uses: actions/setup-node@v3
-        with:
-          node-version: ${{ matrix.node }}
-          cache: "yarn"
-
-      - name: Cache playwright binaries
-        uses: actions/cache@v2
-        id: playwright-cache
-        with:
-          path: |
-            ~/Library/Caches/ms-playwright
-            ~/.cache/ms-playwright
-            ${{ github.workspace }}/node_modules/playwright
-          key: cache-playwright-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: cache-playwright-
-      - run: yarn --frozen-lockfile
-      - name: Install playwright deps
-        # if: steps.playwright-cache.outputs.cache-hit != 'true'
-        run: yarn playwright install --with-deps
+      - uses: ./.github/actions/yarn-install
+      - uses: ./.github/actions/yarn-playwright-install
+      - uses: ./.github/actions/env-read-file
+      - uses: ./.github/actions/cache-db
+      - uses: ./.github/actions/cache-build
       - name: Run Tests
-        run: yarn app-e2e-quick
-
+        run: yarn test-e2e:app-store
+        env:
+          DEPLOYSENTINEL_API_KEY: ${{ secrets.DEPLOYSENTINEL_API_KEY }}
       - name: Upload Test Results
         if: ${{ always() }}
         uses: actions/upload-artifact@v2
         with:
-          name: test-results-core
-          path: packages/app-store/**/playwright/results
+          name: test-results
+          path: test-results

.github/workflows/e2e-embed-react.yml

@@ -0,0 +1,36 @@
+name: E2E Embed tests and booking flow(for non-embed as well)
+on:
+  workflow_call:
+
+jobs:
+  e2e-embed:
+    timeout-minutes: 20
+    runs-on: ubuntu-latest
+    services:
+      postgres:
+        image: postgres:12.1
+        env:
+          POSTGRES_USER: postgres
+          POSTGRES_DB: calendso
+        ports:
+          - 5432:5432
+
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/dangerous-git-checkout
+      - run: echo 'NODE_OPTIONS="--max_old_space_size=4096"' >> $GITHUB_ENV
+      - uses: ./.github/actions/yarn-install
+      - uses: ./.github/actions/yarn-playwright-install
+      - uses: ./.github/actions/env-read-file
+      - uses: ./.github/actions/cache-db
+      - uses: ./.github/actions/cache-build
+      - name: Run Tests
+        run: yarn test-e2e:embed-react
+        env:
+          DEPLOYSENTINEL_API_KEY: ${{ secrets.DEPLOYSENTINEL_API_KEY }}
+      - name: Upload Test Results
+        if: ${{ always() }}
+        uses: actions/upload-artifact@v2
+        with:
+          name: test-results
+          path: test-results

.github/workflows/e2e-embed.yml

@@ -1,50 +1,11 @@
 name: E2E Embed tests and booking flow(for non-embed as well)
 on:
-  pull_request_target: # So we can test on forks
-    branches:
-      - main
-    # Embed e2e - tests verify booking flow which is applicable to non-embed case also. So, don't ignore apps/web changes.
-    paths:
-      - apps/web/**
-      - packages/embeds/**
+  workflow_call:
+
 jobs:
   e2e-embed:
     timeout-minutes: 20
     runs-on: ubuntu-latest
-
-    env:
-      DATABASE_URL: postgresql://postgres:@localhost:5432/calendso
-      NEXT_PUBLIC_WEBAPP_URL: http://localhost:3000
-      NEXT_PUBLIC_WEBSITE_URL: http://localhost:3000
-      NEXTAUTH_SECRET: secret
-      GOOGLE_API_CREDENTIALS: ${{ secrets.CI_GOOGLE_API_CREDENTIALS }}
-      GOOGLE_LOGIN_ENABLED: true
-      # CRON_API_KEY: xxx
-      CALENDSO_ENCRYPTION_KEY: ${{ secrets.CI_CALENDSO_ENCRYPTION_KEY }}
-      NEXT_PUBLIC_STRIPE_PUBLIC_KEY: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_PUBLIC_KEY }}
-      NEXT_PUBLIC_STRIPE_FREE_PLAN_PRICE: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_FREE_PLAN_PRICE }}
-      NEXT_PUBLIC_STRIPE_PRO_PLAN_PRICE: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_PRO_PLAN_PRICE }}
-      NEXT_PUBLIC_STRIPE_PREMIUM_PLAN_PRICE: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_PREMIUM_PLAN_PRICE }}
-      STRIPE_PRIVATE_KEY: ${{ secrets.CI_STRIPE_PRIVATE_KEY }}
-      STRIPE_CLIENT_ID: ${{ secrets.CI_STRIPE_CLIENT_ID }}
-      STRIPE_WEBHOOK_SECRET: ${{ secrets.CI_STRIPE_WEBHOOK_SECRET }}
-      PAYMENT_FEE_PERCENTAGE: 0.005
-      PAYMENT_FEE_FIXED: 10
-      SAML_DATABASE_URL: postgresql://postgres:@localhost:5432/calendso
-      SAML_ADMINS: pro@example.com
-      NEXTAUTH_URL: http://localhost:3000/api/auth
-      NEXT_PUBLIC_IS_E2E: 1
-      # EMAIL_FROM: e2e@cal.com
-      # EMAIL_SERVER_HOST: ${{ secrets.CI_EMAIL_SERVER_HOST }}
-      # EMAIL_SERVER_PORT: ${{ secrets.CI_EMAIL_SERVER_PORT }}
-      # EMAIL_SERVER_USER: ${{ secrets.CI_EMAIL_SERVER_USER }}
-      # EMAIL_SERVER_PASSWORD: ${{ secrets.CI_EMAIL_SERVER_PASSWORD }}
-      # MS_GRAPH_CLIENT_ID: xxx
-      # MS_GRAPH_CLIENT_SECRET: xxx
-      # ZOOM_CLIENT_ID: xxx
-      # ZOOM_CLIENT_SECRET: xxx
-      TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
-      TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
     services:
       postgres:
         image: postgres:12.1
@@ -55,45 +16,21 @@ jobs:
           - 5432:5432
 
     steps:
-      - name: Checkout repo
-        uses: actions/checkout@v2
-        with:
-          ref: ${{ github.event.pull_request.head.sha }} # So we can test on forks
-          fetch-depth: 2
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/dangerous-git-checkout
       - run: echo 'NODE_OPTIONS="--max_old_space_size=4096"' >> $GITHUB_ENV
-      - name: Use Node 16.x
-        uses: actions/setup-node@v3
-        with:
-          node-version: 16.x
-          cache: "yarn"
-
-      - name: Cache playwright binaries
-        uses: actions/cache@v2
-        id: playwright-cache
-        with:
-          path: |
-            ~/Library/Caches/ms-playwright
-            ~/.cache/ms-playwright
-            ${{ github.workspace }}/node_modules/playwright
-          key: cache-playwright-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: cache-playwright-
-      - run: yarn --frozen-lockfile
-      - name: Install playwright deps
-        # if: steps.playwright-cache.outputs.cache-hit != 'true'
-        run: yarn playwright install --with-deps
+      - uses: ./.github/actions/yarn-install
+      - uses: ./.github/actions/yarn-playwright-install
+      - uses: ./.github/actions/env-read-file
+      - uses: ./.github/actions/cache-db
+      - uses: ./.github/actions/cache-build
       - name: Run Tests
-        run: yarn turbo run embed-tests-update-snapshots:ci --scope=@calcom/embed-react --concurrency=1
-
-      - name: Upload embed-core results
+        run: yarn test-e2e:embed
+        env:
+          DEPLOYSENTINEL_API_KEY: ${{ secrets.DEPLOYSENTINEL_API_KEY }}
+      - name: Upload Test Results
         if: ${{ always() }}
         uses: actions/upload-artifact@v2
         with:
-          name: test-results-core
-          path: packages/embeds/embed-core/playwright/results
-
-      - name: Upload embed-react results
-        if: ${{ always() }}
-        uses: actions/upload-artifact@v2
-        with:
-          name: test-results-react
-          path: packages/embeds/embed-react/playwright/results
+          name: test-results
+          path: test-results

.github/workflows/e2e.yml

@@ -1,52 +1,11 @@
 name: E2E test
 on:
-  pull_request_target: # So we can test on forks
-    branches:
-      - main
-    paths:
-      - apps/web/**
-      - packages/**
+  workflow_call:
 jobs:
   e2e:
     timeout-minutes: 20
+    name: E2E tests
     runs-on: ubuntu-latest
-
-    env:
-      DATABASE_URL: postgresql://postgres:@localhost:5432/calendso
-      NEXT_PUBLIC_WEBAPP_URL: http://localhost:3000
-      NEXT_PUBLIC_WEBSITE_URL: http://localhost:3000
-      NEXTAUTH_SECRET: secret
-      GOOGLE_API_CREDENTIALS: ${{ secrets.CI_GOOGLE_API_CREDENTIALS }}
-      GOOGLE_LOGIN_ENABLED: true
-      # CRON_API_KEY: xxx
-      CALENDSO_ENCRYPTION_KEY: ${{ secrets.CI_CALENDSO_ENCRYPTION_KEY }}
-      NEXT_PUBLIC_STRIPE_PUBLIC_KEY: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_PUBLIC_KEY }}
-      NEXT_PUBLIC_STRIPE_FREE_PLAN_PRICE: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_FREE_PLAN_PRICE }}
-      NEXT_PUBLIC_STRIPE_PRO_PLAN_PRICE: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_PRO_PLAN_PRICE }}
-      NEXT_PUBLIC_STRIPE_PREMIUM_PLAN_PRICE: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_PREMIUM_PLAN_PRICE }}
-      STRIPE_PRIVATE_KEY: ${{ secrets.CI_STRIPE_PRIVATE_KEY }}
-      STRIPE_CLIENT_ID: ${{ secrets.CI_STRIPE_CLIENT_ID }}
-      STRIPE_WEBHOOK_SECRET: ${{ secrets.CI_STRIPE_WEBHOOK_SECRET }}
-      STRIPE_PRO_PLAN_PRODUCT_ID: ${{ secrets.CI_STRIPE_PRO_PLAN_PRODUCT_ID }}
-      STRIPE_PREMIUM_PLAN_PRODUCT_ID: ${{ secrets.CI_STRIPE_PREMIUM_PLAN_PRODUCT_ID }}
-      STRIPE_FREE_PLAN_PRODUCT_ID: ${{ secrets.CI_STRIPE_FREE_PLAN_PRODUCT_ID }}
-      PAYMENT_FEE_PERCENTAGE: 0.005
-      PAYMENT_FEE_FIXED: 10
-      SAML_DATABASE_URL: postgresql://postgres:@localhost:5432/calendso
-      SAML_ADMINS: pro@example.com
-      NEXTAUTH_URL: http://localhost:3000/api/auth
-      NEXT_PUBLIC_IS_E2E: 1
-      # EMAIL_FROM: e2e@cal.com
-      # EMAIL_SERVER_HOST: ${{ secrets.CI_EMAIL_SERVER_HOST }}
-      # EMAIL_SERVER_PORT: ${{ secrets.CI_EMAIL_SERVER_PORT }}
-      # EMAIL_SERVER_USER: ${{ secrets.CI_EMAIL_SERVER_USER }}
-      # EMAIL_SERVER_PASSWORD: ${{ secrets.CI_EMAIL_SERVER_PASSWORD }}
-      # MS_GRAPH_CLIENT_ID: xxx
-      # MS_GRAPH_CLIENT_SECRET: xxx
-      # ZOOM_CLIENT_ID: xxx
-      # ZOOM_CLIENT_SECRET: xxx
-      TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
-      TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
     services:
       postgres:
         image: postgres:12.1
@@ -55,37 +14,20 @@ jobs:
           POSTGRES_DB: calendso
         ports:
           - 5432:5432
-
     steps:
-      - name: Checkout repo
-        uses: actions/checkout@v2
-        with:
-          ref: ${{ github.event.pull_request.head.sha }} # So we can test on forks
-          fetch-depth: 2
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/dangerous-git-checkout
       - run: echo 'NODE_OPTIONS="--max_old_space_size=4096"' >> $GITHUB_ENV
-      - name: Use Node 16.x
-        uses: actions/setup-node@v3
-        with:
-          node-version: 16.x
-          cache: "yarn"
-
-      - name: Cache playwright binaries
-        uses: actions/cache@v2
-        id: playwright-cache
-        with:
-          path: |
-            ~/Library/Caches/ms-playwright
-            ~/.cache/ms-playwright
-            ${{ github.workspace }}/node_modules/playwright
-          key: cache-playwright-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: cache-playwright-
-      - run: yarn --frozen-lockfile
-      - name: Install playwright deps
-        if: steps.playwright-cache.outputs.cache-hit != 'true'
-        run: yarn playwright install --with-deps
-      - run: yarn test-e2e
-
-      - name: Upload test results
+      - uses: ./.github/actions/yarn-install
+      - uses: ./.github/actions/yarn-playwright-install
+      - uses: ./.github/actions/env-read-file
+      - uses: ./.github/actions/cache-db
+      - uses: ./.github/actions/cache-build
+      - name: Run Tests
+        run: yarn test-e2e
+        env:
+          DEPLOYSENTINEL_API_KEY: ${{ secrets.DEPLOYSENTINEL_API_KEY }}
+      - name: Upload Test Results
         if: ${{ always() }}
         uses: actions/upload-artifact@v2
         with:

.github/workflows/env-create-file.yml

@@ -0,0 +1,50 @@
+name: Create .env file
+
+on:
+  workflow_call:
+
+env:
+  INPUT_ENV_DATABASE_URL: postgresql://postgres:@localhost:5432/calendso
+  INPUT_ENV_NEXT_PUBLIC_WEBAPP_URL: http://localhost:3000
+  INPUT_ENV_NEXT_PUBLIC_WEBSITE_URL: http://localhost:3000
+  INPUT_ENV_NEXTAUTH_SECRET: secret
+  INPUT_ENV_GOOGLE_API_CREDENTIALS: ${{ secrets.CI_GOOGLE_API_CREDENTIALS }}
+  INPUT_ENV_GOOGLE_LOGIN_ENABLED: true
+  # INPUT_ENV_CRON_API_KEY: xxx
+  INPUT_ENV_CALENDSO_ENCRYPTION_KEY: ${{ secrets.CI_CALENDSO_ENCRYPTION_KEY }}
+  INPUT_ENV_NEXT_PUBLIC_STRIPE_PUBLIC_KEY: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_PUBLIC_KEY }}
+  INPUT_ENV_STRIPE_PRIVATE_KEY: ${{ secrets.CI_STRIPE_PRIVATE_KEY }}
+  INPUT_ENV_STRIPE_CLIENT_ID: ${{ secrets.CI_STRIPE_CLIENT_ID }}
+  INPUT_ENV_STRIPE_WEBHOOK_SECRET: ${{ secrets.CI_STRIPE_WEBHOOK_SECRET }}
+  INPUT_ENV_PAYMENT_FEE_PERCENTAGE: 0.005
+  INPUT_ENV_PAYMENT_FEE_FIXED: 10
+  INPUT_ENV_SAML_DATABASE_URL: postgresql://postgres:@localhost:5432/calendso
+  INPUT_ENV_SAML_ADMINS: pro@example.com
+  INPUT_ENV_NEXTAUTH_URL: http://127.0.0.1:3000/api/auth
+  INPUT_ENV_NEXT_PUBLIC_IS_E2E: 1
+  # INPUT_ENV_EMAIL_FROM: e2e@cal.com
+  # INPUT_ENV_EMAIL_SERVER_HOST: ${{ secrets.CI_EMAIL_SERVER_HOST }}
+  # INPUT_ENV_EMAIL_SERVER_PORT: ${{ secrets.CI_EMAIL_SERVER_PORT }}
+  # INPUT_ENV_EMAIL_SERVER_USER: ${{ secrets.CI_EMAIL_SERVER_USER }}
+  # INPUT_ENV_EMAIL_SERVER_PASSWORD: ${{ secrets.CI_EMAIL_SERVER_PASSWORD }}
+  # INPUT_ENV_MS_GRAPH_CLIENT_ID: xxx
+  # INPUT_ENV_MS_GRAPH_CLIENT_SECRET: xxx
+  # INPUT_ENV_ZOOM_CLIENT_ID: xxx
+  # INPUT_ENV_ZOOM_CLIENT_SECRET: xxx
+  INPUT_ENV_TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+  INPUT_ENV_TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
+
+jobs:
+  create_env_file:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/dangerous-git-checkout
+      - uses: ozaytsev86/create-env-file@v1
+        with:
+          file-name: ${{ github.workspace }}/gh.env
+      - uses: actions/cache@v3
+        id: env-cache
+        with:
+          path: gh.env
+          key: env-cache-${{ hashFiles('gh.env') }}

.github/workflows/labeler.yml

@@ -1,7 +1,9 @@
 name: "Pull Request Labeler"
 on:
   - pull_request_target
-
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
 jobs:
   labeler:
     permissions:
@@ -10,8 +12,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/labeler@v4
-        # Checking the actor will prevent your Action run failing on non-Dependabot
-        # PRs but also ensures that it only does work for Dependabot PRs.
-        if: ${{ github.actor == 'github-actions[bot]' }}
         with:
           repo-token: "${{ secrets.GITHUB_TOKEN }}"
+          # https://github.com/actions/labeler/issues/442#issuecomment-1297359481
+          sync-labels: ""

.github/workflows/lint.yml

@@ -1,33 +1,15 @@
 name: Lint
 on:
-  pull_request_target:
-    branches:
-      - main
-    paths:
-      - "**.tsx?"
-      - "**.jsx?"
+  workflow_call:
 jobs:
   lint:
     runs-on: ubuntu-latest
 
     steps:
-      - name: Checkout repo
-        uses: actions/checkout@v2
-        with:
-          ref: ${{ github.event.pull_request.head.sha }}
-          fetch-depth: 2
-
-      - name: Use Node 16.x
-        uses: actions/setup-node@v3
-        with:
-          node-version: 16.x
-          cache: "yarn"
-
-      - name: Install deps
-        if: steps.yarn-cache.outputs.cache-hit != 'true'
-        run: yarn --frozen-lockfile
-
-      - name: Lint
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/dangerous-git-checkout
+      - uses: ./.github/actions/yarn-install
+      - name: Save Code Linting Reports
         run: yarn lint:report
         continue-on-error: true
 

.github/workflows/nextjs-bundle-analysis.yml

@@ -0,0 +1,95 @@
+name: "Next.js Bundle Analysis"
+
+on:
+  workflow_call:
+  push:
+    branches:
+      - main
+
+jobs:
+  build:
+    name: Production build
+    if: ${{ github.event_name == 'push' }}
+    uses: ./.github/workflows/production-build.yml
+    secrets: inherit
+  analyze:
+    needs: build
+    if: always()
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/dangerous-git-checkout
+      - uses: ./.github/actions/yarn-install
+      - uses: ./.github/actions/cache-build
+      - name: Analyze bundle
+        run: |
+          cd apps/web
+          npx -p nextjs-bundle-analysis report
+
+      - name: Upload bundle
+        uses: actions/upload-artifact@v2
+        with:
+          name: bundle
+          path: apps/web/.next/analyze/__bundle_analysis.json
+
+      - name: Download base branch bundle stats
+        uses: dawidd6/action-download-artifact@v2
+        if: success() && github.event.number
+        with:
+          workflow: nextjs-bundle-analysis.yml
+          branch: ${{ github.event.pull_request.base.ref }}
+          path: apps/web/.next/analyze/base
+
+      # And here's the second place - this runs after we have both the current and
+      # base branch bundle stats, and will compare them to determine what changed.
+      # There are two configurable arguments that come from package.json:
+      #
+      # - budget: optional, set a budget (bytes) against which size changes are measured
+      #           it's set to 350kb here by default, as informed by the following piece:
+      #           https://infrequently.org/2021/03/the-performance-inequality-gap/
+      #
+      # - red-status-percentage: sets the percent size increase where you get a red
+      #                          status indicator, defaults to 20%
+      #
+      # Either of these arguments can be changed or removed by editing the `nextBundleAnalysis`
+      # entry in your package.json file.
+      - name: Compare with base branch bundle
+        if: success() && github.event.number
+        run: |
+          cd apps/web
+          ls -laR .next/analyze/base && npx -p nextjs-bundle-analysis compare
+
+      - name: Get comment body
+        id: get-comment-body
+        if: success() && github.event.number
+        run: |
+          cd apps/web
+          body=$(cat .next/analyze/__bundle_analysis_comment.txt)
+          body="${body//'%'/'%25'}"
+          body="${body//$'\n'/'%0A'}"
+          body="${body//$'\r'/'%0D'}"
+          echo ::set-output name=body::$body
+
+      - name: Find Comment
+        uses: peter-evans/find-comment@v1
+        if: success() && github.event.number
+        id: fc
+        with:
+          issue-number: ${{ github.event.number }}
+          body-includes: "<!-- __NEXTJS_BUNDLE -->"
+
+      - name: Create Comment
+        uses: peter-evans/create-or-update-comment@v1.4.4
+        if: success() && github.event.number && steps.fc.outputs.comment-id == 0
+        with:
+          issue-number: ${{ github.event.number }}
+          body: ${{ steps.get-comment-body.outputs.body }}
+
+      - name: Update Comment
+        uses: peter-evans/create-or-update-comment@v1.4.4
+        if: success() && github.event.number && steps.fc.outputs.comment-id != 0
+        with:
+          issue-number: ${{ github.event.number }}
+          body: ${{ steps.get-comment-body.outputs.body }}
+          comment-id: ${{ steps.fc.outputs.comment-id }}
+          edit-mode: replace

.github/workflows/pr.yml

@@ -0,0 +1,107 @@
+name: PR Update
+
+on:
+  pull_request_target:
+    branches:
+      - main
+    paths-ignore:
+      - "**.md"
+      - ".github/CODEOWNERS"
+  workflow_dispatch:
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  changes:
+    runs-on: ubuntu-latest
+    permissions:
+      pull-requests: read
+    outputs:
+      app-store: ${{ steps.filter.outputs.app-store }}
+      embed: ${{ steps.filter.outputs.embed }}
+      embed-react: ${{ steps.filter.outputs.embed-react }}
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/dangerous-git-checkout
+      - uses: dorny/paths-filter@v2
+        id: filter
+        with:
+          filters: |
+            app-store:
+              - 'apps/web/**'
+              - 'packages/app-store/**'
+            embed:
+              - 'apps/web/**'
+              - 'packages/embeds/**'
+            embed-react:
+              - 'apps/web/**'
+              - 'packages/embeds/**'
+
+  env:
+    name: Create env file
+    uses: ./.github/workflows/env-create-file.yml
+    secrets: inherit
+
+  type-check:
+    name: Type check
+    uses: ./.github/workflows/check-types.yml
+    secrets: inherit
+
+  test:
+    name: Unit tests
+    uses: ./.github/workflows/test.yml
+    secrets: inherit
+
+  lint:
+    name: Linters
+    uses: ./.github/workflows/lint.yml
+    secrets: inherit
+
+  build:
+    name: Production build
+    needs: env
+    uses: ./.github/workflows/production-build.yml
+    secrets: inherit
+
+  e2e:
+    name: E2E tests
+    needs: [changes, lint, build]
+    uses: ./.github/workflows/e2e.yml
+    secrets: inherit
+
+  e2e-app-store:
+    name: E2E App Store tests
+    if: ${{ needs.changes.outputs.app-store == 'true' }}
+    needs: [changes, lint, build]
+    uses: ./.github/workflows/e2e-app-store.yml
+    secrets: inherit
+
+  e2e-embed:
+    name: E2E embeds tests
+    if: ${{ needs.changes.outputs.embed == 'true' }}
+    needs: [changes, lint, build]
+    uses: ./.github/workflows/e2e-embed.yml
+    secrets: inherit
+
+  e2e-embed-react:
+    name: E2E React embeds tests
+    if: ${{ needs.changes.outputs.embed-react == 'true' }}
+    needs: [changes, lint, build]
+    uses: ./.github/workflows/e2e-embed-react.yml
+    secrets: inherit
+
+  analyze:
+    needs: build
+    uses: ./.github/workflows/nextjs-bundle-analysis.yml
+    secrets: inherit
+
+  required:
+    needs: [lint, type-check, test, build, e2e]
+    if: always()
+    runs-on: ubuntu-latest
+    steps:
+      - name: fail if conditional jobs failed
+        if: contains(needs.*.result, 'failure') || contains(needs.*.result, 'skipped') || contains(needs.*.result, 'cancelled')
+        run: exit 1

.github/workflows/production-build.yml

@@ -0,0 +1,25 @@
+name: Production Build
+
+on:
+  workflow_call:
+
+jobs:
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+    timeout-minutes: 30
+    services:
+      postgres:
+        image: postgres:12.1
+        env:
+          POSTGRES_USER: postgres
+          POSTGRES_DB: calendso
+        ports:
+          - 5432:5432
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/dangerous-git-checkout
+      - uses: ./.github/actions/yarn-install
+      - uses: ./.github/actions/env-read-file
+      - uses: ./.github/actions/cache-db
+      - uses: ./.github/actions/cache-build

.github/workflows/release.yml

@@ -0,0 +1,17 @@
+on:
+  workflow_dispatch:
+  push:
+    # Pattern matched against refs/tags
+    tags:
+      - "*" # Push events to every tag not containing /
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          ref: main # Always checkout main even for tagged releases
+          fetch-depth: 0
+          token: ${{ secrets.GH_ACCESS_TOKEN }}
+      - run: git push origin +main:production

.github/workflows/required-checks.yml

@@ -1,36 +0,0 @@
-name: "Meta Workflow: Require Conditional Status Checks"
-on:
-  pull_request:
-    branches:
-      - main
-jobs:
-  required-checks:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Ensure All Conditional Checks Have Passed
-        uses: blend/require-conditional-status-checks@2022.02.04
-        with:
-          timeout: 15m
-          github-token: ${{ github.token }}
-          interval: 20s
-          # Question marks aren't working
-          # @see https://github.com/blend/require-conditional-status-checks/pull/11
-          checks-yaml: |
-            - job: lint
-              paths:
-                - /**/*.jsx
-                - /**/*.js
-                - /**/*.tsx
-                - /**/*.ts
-            - job: check-types
-              paths:
-                - /**/*.tsx
-                - /**/*.ts
-            - job: e2e
-              paths:
-                - /apps/web/**
-                - /packages/**
-            - job: e2e-embed
-              paths:
-                - /apps/web/**
-                - /packages/embeds/**

.github/workflows/submodule-sync.yml

@@ -9,7 +9,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout Code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
         with:
           submodules: recursive
           token: ${{ secrets.GH_ACCESS_TOKEN }}

.github/workflows/test.yml

@@ -0,0 +1,17 @@
+name: Unit tests
+on:
+  workflow_call:
+  workflow_run:
+    workflows: [Crowdin Action]
+    types: [completed]
+jobs:
+  test:
+    timeout-minutes: 20
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/dangerous-git-checkout
+      - run: echo 'NODE_OPTIONS="--max_old_space_size=6144"' >> $GITHUB_ENV
+      - uses: ./.github/actions/yarn-install
+      # Should be an 8GB machine as per https://docs.github.com/en/actions/using-github-hosted-runners/about-github-hosted-runners
+      - run: yarn test

.github/workflows/todo-to-issue.yml

@@ -0,0 +1,28 @@
+name: TODO to Issue
+on:
+  push:
+    branches:
+      - main
+  workflow_dispatch:
+    inputs:
+      MANUAL_COMMIT_REF:
+        description: "The SHA of the commit to get the diff for"
+        required: true
+      MANUAL_BASE_REF:
+        description: "By default, the commit entered above is compared to the one directly before it; to go back further, enter an earlier SHA here"
+        required: false
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+jobs:
+  todos:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: "Add TODOs to issues"
+        uses: "alstr/todo-to-issue-action@v4"
+        env:
+          MANUAL_COMMIT_REF: ${{ inputs.MANUAL_COMMIT_REF }}
+          MANUAL_BASE_REF: ${{ inputs.MANUAL_BASE_REF }}
+        with:
+          IDENTIFIERS: '[{"name": "TODO", "labels": ["🙋🏻‍♂️help wanted"]}, {"name": "FIXME", "labels": ["🐛 bug"]}]'

.github/workflows/yarn-install.yml

@@ -0,0 +1,14 @@
+name: Yarn install
+
+on:
+  workflow_call:
+
+jobs:
+  setup:
+    name: Yarn install & cache
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/dangerous-git-checkout
+      - uses: ./.github/actions/yarn-install

.gitignore

@@ -2,6 +2,7 @@
 
 # .env file
 .env
+!packages/prisma/.env
 
 # dependencies
 node_modules
@@ -79,3 +80,19 @@ apps/storybook/build-storybook.log
 # Snaplet
 .snaplet/snapshots
 .snaplet/structure.d.ts
+
+# Submodules
+.gitmodules
+apps/api
+apps/website
+apps/console
+apps/auth
+
+# Yarn Modern
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

.gitmodules

@@ -1,12 +0,0 @@
-[submodule "apps/console"]
-	path = apps/console
-	url = https://github.com/calcom/console.git
-	branch = main
-[submodule "apps/api"]
-	path = apps/api
-	url = https://github.com/calcom/api.git
-	branch = main
-[submodule "apps/website"]
-	path = apps/website
-	url = https://github.com/calcom/website.git
-	branch = main

.infisical.json

@@ -0,0 +1,8 @@
+{
+  "workspaceId": "63ea8121b6e2b0543ba79616",
+  "defaultEnvironment": "dev",
+  "gitBranchToEnvironmentMapping": {
+    "main": "staging",
+    "production": "prod"
+  }
+}

.nvmrc

@@ -1 +1 @@
-v16
+v18

.prettierignore

@@ -14,3 +14,4 @@ public
 .DS_Store
 .eslintignore
 packages/prisma/zod
+apps/web/public/embed

.snaplet/config.json

@@ -1,4 +1,4 @@
 {
   "projectId": "cl4u26bwz7962859ply7ibuo43t",
-  "databaseUrl": "postgresql://postgres@localhost:5450/calendso"
+  "targetDatabaseUrl": "postgresql://postgres@localhost:5450/calendso"
 }

.snaplet/manifest.json

@@ -1,3 +1,3 @@
 {
-  "version": "0.3.0"
+  "version": "0.22.3"
 }

.vscode/launch.json

@@ -2,38 +2,20 @@
   "version": "0.2.0",
   "configurations": [
     {
-      "name": "Next.js: Server",
-      "type": "node-terminal",
+      "type": "node",
       "request": "launch",
-      "command": "npm run dev",
-      "skipFiles": ["<node_internals>/**"],
-      "outFiles": [
-        "${workspaceFolder}/**/*.js",
-        "!**/node_modules/**"
-      ],
-      "sourceMaps": true,
-      "resolveSourceMapLocations": [
-        "${workspaceFolder}/**",
-        "!**/node_modules/**"
-      ]
-    },
-    {
-      "name": "Next.js: Client",
-      "type": "pwa-chrome",
-      "request": "launch",
-      "url": "http://localhost:3000"
-    },
-    {
-      "name": "Next.js: Full Stack",
-      "type": "node-terminal",
-      "request": "launch",
-      "command": "npm run dev",
+      "name": "Next.js Node Debug",
+      "runtimeExecutable": "${workspaceFolder}/node_modules/next/dist/bin/next",
+      "env": {
+        "NODE_OPTIONS": "--inspect"
+      },
+      "cwd": "${workspaceFolder}/apps/web",
       "console": "integratedTerminal",
-      "serverReadyAction": {
-        "pattern": "started server on .+, url: (https?://.+)",
-        "uriFormat": "%s",
-        "action": "debugWithChrome"
+      "sourceMapPathOverrides": {
+        "meteor://💻app/*": "${workspaceFolder}/*",
+        "webpack:///./~/*": "${workspaceFolder}/node_modules/*",
+        "webpack://?:*/*": "${workspaceFolder}/*"
       }
     }
   ]
-}
+}

.vscode/settings.json

@@ -6,5 +6,6 @@
   },
   "typescript.preferences.importModuleSpecifier": "non-relative",
   "spellright.language": ["en"],
-  "spellright.documentTypes": ["markdown"]
+  "spellright.documentTypes": ["markdown", "typescript"],
+  "tailwindCSS.experimental.classRegex": [["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]]
 }

.yarnrc.yml

@@ -0,0 +1,7 @@
+nodeLinker: node-modules
+
+plugins:
+  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
+    spec: "@yarnpkg/plugin-interactive-tools"
+
+yarnPath: .yarn/releases/yarn-3.4.1.cjs

CONTRIBUTING.md

@@ -4,22 +4,58 @@ Contributions are what make the open source community such an amazing place to l
 
 - Before jumping into a PR be sure to search [existing PRs](https://github.com/calcom/cal.com/pulls) or [issues](https://github.com/calcom/cal.com/issues) for an open or closed item that relates to your submission.
 
-## Areas of expertise
+## Priorities
 
-### Legend
-
-✅ = has knowledge
-
-🥇 = is their main priority
-
-⚠️ = is the only one with knowledge
-
-👀 = has no knowledge but wants to be onboarded
-
-<picture>
-  <source media="(prefers-color-scheme: dark)" srcset="https://dynamic-svgs.vercel.app/image.svg?dark">
-  <img alt="Areas of expertise table" src="https://dynamic-svgs.vercel.app/image.svg">
-</picture>
+<table>
+  <tr>
+    <td>
+      Type of Issue
+    </td>
+    <td>
+      Priority
+    </td>
+  </tr>
+  <tr>
+    <td>
+      Minor improvements, non-core feature requests
+    </td>
+    <td>
+      <a href="https://github.com/calcom/cal.com/issues?q=is:issue+is:open+sort:updated-desc+label:%22Low+priority%22">
+        <img src="https://img.shields.io/badge/-Low%20Priority-green">
+      </a>
+    </td>
+  </tr>
+   <tr>
+    <td>
+      Confusing UX (... but working)
+    </td>
+    <td>
+      <a href="https://github.com/calcom/cal.com/issues?q=is:issue+is:open+sort:updated-desc+label:%22Medium+priority%22">
+        <img src="https://img.shields.io/badge/-Medium%20Priority-yellow">
+      </a>
+    </td>
+  </tr>
+  <tr>
+    <td>
+      Core Features (Booking page, availabilty, timezone calculation)
+    </td>
+    <td>
+      <a href="https://github.com/calcom/cal.com/issues?q=is:issue+is:open+sort:updated-desc+label:%22High+priority%22">
+        <img src="https://img.shields.io/badge/-High%20Priority-orange">
+      </a>
+    </td>
+  </tr>
+  <tr>
+    <td>
+      Core Bugs (Login, Booking page, Emails are not working)
+    </td>
+    <td>
+      <a href="https://github.com/calcom/cal.com/issues?q=is:issue+is:open+sort:updated-desc+label:Urgent">
+        <img src="https://img.shields.io/badge/-Urgent-red">
+      </a>
+    </td>
+  </tr>
+</table>
 
 ## Developing
 
@@ -91,6 +127,6 @@ If you get errors, be sure to fix them before committing.
 ## Making a Pull Request
 
 - Be sure to [check the "Allow edits from maintainers" option](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/allowing-changes-to-a-pull-request-branch-created-from-a-fork) while creating you PR.
-- If your PR refers to or fixes an issue, be sure to add `refs #XXX` or `fixes #XXX` to the PR description. Replacing `XXX` with the respective issue number. Se more about [Linking a pull request to an issue
+- If your PR refers to or fixes an issue, be sure to add `refs #XXX` or `fixes #XXX` to the PR description. Replacing `XXX` with the respective issue number. See more about [Linking a pull request to an issue
   ](https://docs.github.com/en/issues/tracking-your-work-with-issues/linking-a-pull-request-to-an-issue).
 - Be sure to fill the PR Template accordingly.

LICENSE

@@ -2,7 +2,7 @@ Copyright (c) 2020-present Cal.com, Inc.
 
 Portions of this software are licensed as follows:
 
-* All content that resides under "apps/web/ee/" (https://github.com/calcom/cal.com/tree/main/apps/web/ee) directory of this repository (Enterprise Edition) is licensed under the license defined in "ee/LICENSE".
+* All content that resides under https://github.com/calcom/cal.com/tree/main/packages/features/ee directory of this repository (Enterprise Edition) is licensed under the license defined in "ee/LICENSE".
 * All third party components incorporated into the Cal.com 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.
 

__checks__/calcom-dashboard.check.js

@@ -0,0 +1,34 @@
+/**
+ * This is a Playwright script Checkly generated for you based on your Vercel project.
+ * To learn more about Browser checks and Playwright visit: https://www.checklyhq.com/docs/browser-checks
+ */
+
+// Create a Chromium browser
+const { chromium } = require("playwright");
+
+// Checkly supports top level await, but we wrap your code in an async function so you can run it locally too.
+async function run() {
+  const browser = await chromium.launch();
+  const page = await browser.newPage();
+
+  // If available, we set the target URL to a preview deployment URL provided by the ENVIRONMENT_URL created by Vercel.
+  // Otherwise, we use the Production URL.
+  const targetUrl = process.env.ENVIRONMENT_URL || "https://app.cal.com";
+
+  // We visit the page. This waits for the "load" event by default.
+  const response = await page.goto(targetUrl);
+
+  // If the page doesn't return a successful response code, we fail the check
+  if (response.status() > 399) {
+    throw new Error(`Failed with response code ${response.status()}`);
+  }
+
+  // We snap a screenshot.
+  await page.screenshot({ path: "screenshot.jpg" });
+
+  // We close the page and browser. This is needed for collecting accurate web vitals.
+  await page.close();
+  await browser.close();
+}
+
+run();

__checks__/location-link.check.js

@@ -0,0 +1,35 @@
+/**
+ * This is a Playwright script Checkly generated for you based on your Vercel project.
+ * To learn more about Browser checks and Playwright visit: https://www.checklyhq.com/docs/browser-checks
+ */
+
+// Create a Chromium browser
+const { chromium } = require("playwright");
+
+// Checkly supports top level await, but we wrap your code in an async function so you can run it locally too.
+async function run() {
+  const browser = await chromium.launch();
+  const page = await browser.newPage();
+  const targetUrl = process.env.ENVIRONMENT_URL || "https://cal.com";
+  await page.goto(`${targetUrl}/rick/test-location-link`);
+
+  await page.waitForSelector('[data-testid="day"][data-disabled="false"]');
+  await page.click('[data-testid="day"][data-disabled="false"]');
+
+  await page.waitForSelector('[data-testid="time"]');
+  await page.click('[data-testid="time"]');
+
+  await page.waitForSelector("#name");
+  await page.click("#name");
+
+  await page.type("#name", "Calcom");
+
+  await page.type('[name="email"]', "cal@cal.com");
+
+  await page.waitForSelector('[data-testid="confirm-book-button"]');
+  await page.click('[data-testid="confirm-book-button"]');
+
+  await browser.close();
+}
+
+run();

app.json

@@ -6,22 +6,79 @@
   "keywords": ["react", "typescript", "node", "nextjs", "prisma", "postgres", "trpc"],
   "addons": [
     {
-      "plan": "heroku-postgresql:hobby-dev"
+      "plan": "heroku-postgresql:mini"
     }
   ],
   "env": {
-    "BASE_URL": {
+    "PGSSLMODE": {
+      "description": "If you use Heroku to deploy Postgres (or use self-signed certs for Postgres) then put 'no-verify' here.",
+      "value": "no-verify"
+    },
+    "NEXT_PUBLIC_WEBAPP_URL": {
       "description": "Replace HEROKU_APP_NAME with the name given to your app",
-      "value": "https://HEROKU_APP_NAME.herokuapp.com"
+      "value": "https://HEROKU_APP_NAME.herokuapp.com",
+      "required": "true"
     },
     "CALENDSO_ENCRYPTION_KEY": {
       "description": "Application Key for symmetric encryption and decryption. Must be 32 bytes for AES256 encryption algorithm.",
-      "value": "secret"
+      "value": "secret",
+      "required": "true"
     },
-    "NEXTAUTH_SECRET": "secret",
     "NEXTAUTH_URL": {
       "description": "Replace HEROKU_APP_NAME with the name given to your app",
       "value": "https://HEROKU_APP_NAME.herokuapp.com"
+    },
+    "NEXTAUTH_SECRET": {
+      "description": "Cookie encryption key",
+      "generator": "secret",
+      "required": "true"
+    },
+    "CRON_API_KEY": {
+      "description": "ApiKey for cronjobs",
+      "value": ""
+    },
+    "SEND_FEEDBACK_EMAIL": {
+      "description": "Send feedback email",
+      "value": ""
+    },
+    "SENDGRID_API_KEY": {
+      "description": "Sendgrid api key. Used for email reminders in workflows",
+      "value": "",
+      "required": false
+    },
+    "SENDGRID_SYNC_API_KEY": {
+      "description": "Sendgrid internal sync service",
+      "value": "",
+      "required": false
+    },
+    "SENDGRID_EMAIL": {
+      "description": "Sendgrid email. Used for email reminders in workflows",
+      "value": "",
+      "required": false
+    },
+    "EMAIL_FROM": {
+      "description": "Configures the global From: header whilst sending emails",
+      "value": ""
+    },
+    "EMAIL_SERVER_HOST": {
+      "description": "Configures the global SMTP server host",
+      "value": "smtp.gmail.com"
+    },
+    "EMAIL_SERVER_PORT": {
+      "description": "Configures the global SMTP server port",
+      "value": "465"
+    },
+    "EMAIL_SERVER_USER": {
+      "description": "Configures the global SMTP server user",
+      "value": "<gmail_emailAddress>"
+    },
+    "EMAIL_SERVER_PASSWORD": {
+      "description": "Configures the global SMTP server password",
+      "value": "<gmail_app_password>"
+    },
+    "NEXT_PUBLIC_TEAM_IMPERSONATION": {
+      "description": "Set the following value to true if you wish to enable Team Impersonation",
+      "value": "false"
     }
   },
   "scripts": {

apps/docs/.nvmrc

@@ -1 +1 @@
-14.17
+v18

apps/docs/README.md

@@ -1,81 +0,0 @@
-<!-- PROJECT LOGO -->
-<div align="right">
-  <a href="https://github.com/calcom/cal.com">
-    <img src="https://user-images.githubusercontent.com/8019099/133430653-24422d2a-3c8d-4052-9ad6-0580597151ee.png" alt="Logo">
-  </a>
-  <a href="https://cal.com">Website</a>
-  ·
-  <a href="https://github.com/calcom/cal.com/issues">Community Support</a>
-</div>
-
-# Cal.com Documentation
-
-The official product, support and developer documentation, containing information and guides about using the product as well as support for self-hosted installations. This documentation site runs on [Nextra](https://nextra.vercel.app), so you may refer to their documentation should you need information on anything that isn't covered here.
-
-## Prerequisites
-
-- Git
-- Node.js & npm
-- Yarn
-
-## Installation
-
-Firstly, clone the repository using Git:
-
-```console
-git clone https://github.com/calcom/docs.git
-```
-
-Now, you can install the dependencies with yarn:
-
-```console
-yarn install
-```
-
-## Editing
-
-To create, edit and delete documentation pages, you can simply create markdown (.mdx) files in the `pages/` folder. You can edit Markdown with any text editor, but VS Code and WebStorm have side-by-side previews so you can see your formatted content whilst writing markdown.
-
-You will also need to add it as an entry to the `meta.json` file found in whichever directory that the .mdx file is in.
-
-## Local Development
-
-```console
-yarn dev
-```
-
-This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
-
-## Build
-
-```console
-yarn build
-```
-
-This command generates static content into the `build` directory and can be served using any static content hosting service.
-
-## How to easily contribute
-
-## Existing Page
-
-1. From the documentation's GitHub repository, head to the folder called 'pages' and open it.
-2. From here you can view all current pages on the documentation site. Select the page you would like to contribute to.
-3. You should now be able to view the page you have selected. Located at the top right of the page will be a pencil icon. Pressing this will bring you up an editor to edit and make changes. You can add formatting using the buttons at the top, which will automatically insert the relevant markdown content needed to style the text.
-4. From here make the changes you wish to make.
-5. At the bottom of the screen will be a 'Propose Changes' box, fill in all the relevant details such as title and description then press the green 'Propose Changes' button.
-6. Your changes have been saved, to submit them for review, located on your screen, press the green 'Create Pull Request' button.
-7. Fill in all the relevant details such as title and description and after finalize the submission.
-
-You have now successfully edited and submitted changes to our documentation site.
-
-## Creating a New Page
-
-1. From the documentation's GitHub repository, head to the folder called 'pages' and open it.
-2. From here you can view all current pages on the documentation site. At the top of your screen press the 'New file' button.
-3. You should now be able to view the page you have created. Remember when renaming the document to put .mdx at the end of the file name.
-4. From here make the changes you wish to make. Such as creating a title, sub-title and body text.
-5. At the bottom of the screen will be a 'Propose Changes' box, fill in all the relevant details such as title and description then press the green 'Propose Changes' button.
-6. Your changes have been saved, to submit them for review, located on your screen, press the greem 'Create Pull Request' button.
-7. Fill in all the relevant details such as title and description and after finalize the submission.
-
-You have now successfully created and submitted changes to our documentation site.

apps/docs/package.json

@@ -7,7 +7,7 @@
     "build": "next build",
     "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf .next",
     "dev": "PORT=4000 next",
-    "lint": "next lint",
+    "lint": "eslint . --ignore-path .gitignore",
     "lint:fix": "eslint . --ext .ts,.js,.tsx,.jsx --fix",
     "lint:report": "eslint . --format json --output-file ../../lint-results/docs.json",
     "start": "PORT=4000 next start",
@@ -17,14 +17,13 @@
   "license": "MIT",
   "dependencies": {
     "iframe-resizer-react": "^1.1.0",
-    "next": "^12.2.0",
+    "next": "^13.2.1",
     "nextra": "^1.1.0",
     "nextra-theme-docs": "^1.2.2",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@calcom/config": "*",
-    "eslint": "^8.15.0"
+    "@calcom/config": "*"
   }
 }

apps/docs/pages/_app.tsx

@@ -1,4 +1,4 @@
-import { AppProps } from "next/app";
+import type { AppProps } from "next/app";
 import "nextra-theme-docs/style.css";
 
 import "./style.css";

apps/docs/pages/developer/adding-css.mdx

@@ -14,14 +14,13 @@ Cal.com uses [TailwindCSS](https://tailwindcss.com) as a replacement for traditi
 
 CSS files should be stored in the `styles` directory within the codebase.
 
-Within the `styles` directory, you will find two CSS files, `fonts.css` and `global.css`. We suggest not to add to these files, and instead create new CSS files and import them into the application. This helps reduce conflicts when pulling in changes that we've made to either of the existing CSS files.
+Within the `styles` directory, you will find a single CSS file, `global.css`. We suggest not to add to this file, and instead create new CSS files and import them into the application. This helps reduce conflicts when pulling in changes that we've made to either of the existing CSS files.
 
 ## Adding new stylesheets
 Firstly, create the CSS file inside the `styles` directory.
 
 Then, open the `pages/_app.tsx` file, and you will see the following two lines:
 ```javascript
-import "../styles/fonts.css";
 import "../styles/globals.css";
 ```
 

apps/docs/pages/developer/app-store.mdx

@@ -31,7 +31,7 @@ All apps can be found under `packages/app-store`. In this folder is `_example` w
 |   ├──index.ts
 |   ├──package.json
 |   ├──.env.example
-|	├──README.mdx
+|	├──DESCRIPTION.md
 ```
 
 ## Getting Started
@@ -48,9 +48,9 @@ Under the `/components` folder, this is where the install button for your app sh
 
 The `/lib` folder is where the functions of your app live. For example, when creating a booking with a MS Teams link the function to make the call to grab the link lives in the `/lib` folder. Export your endpoints in an `index.ts` file under `/lib` folder and import them in your main `index.ts` file.
 
-On the app store page you can customize your apps description by adding a markdown file called `README.mdx`. If you do not add one then the description from you `package.json` will be used instead.
+On the app store page you can customize your apps description by adding a markdown file called `DESCRIPTION.md`. If you do not add one then the description from you `package.json` will be used instead.
 
-The `/static` folder is where you can store your app icon and any images that your `README.mdx` may use.
+The `/static` folder is where you can store your app icon and any images that your `DESCRIPTION.md` may use.
 
 ## Adding Your App to the App Store
 To render your app on the app store page, go to `packages/app-store/index.ts`. Import your app into the file and add it to the `appStore` object.

apps/docs/pages/developer/code-styling.mdx

@@ -10,10 +10,10 @@ We use a number of style guides written by other amazing companies, simply becau
 We don't expect you to study every single rule of each style guide, but these are great reference points as to how your code should be styled. We may reject a pull request if your code style significantly differs from these style guides however.
 
 ## ESLint & Prettier
-Calendso uses the ESLint and Prettier formatting tools, and the repository comes with defined rules for each tool. We recommend setting up both tools and using these to help automatically style your code to our guidelines.
+Cal.com uses the ESLint and Prettier formatting tools, and the repository comes with defined rules for each tool. We recommend setting up both tools and using these to help automatically style your code to our guidelines.
 
 ## JavaScript/TypeScript
-We use the [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript) for all JavaScript and Typescript code.
+We use the [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript) for all JavaScript and TypeScript code.
 
 ## HTML & CSS
 We use the [Google HTML/CSS Style Guide](https://google.github.io/styleguide/htmlcssguide.html) for any HTML and CSS markup. However, exceptions to the HTML guide apply where JSX differentiates from standard HTML.

apps/docs/pages/self-hosting/install.mdx

@@ -34,7 +34,6 @@ Here is what you need to be able to run Cal.
 
    ```sh
    cp apps/web/.env.example apps/web/.env
-   cp packages/prisma/.env.example packages/prisma/.env
    ```
 
 1. Install packages with yarn
@@ -54,7 +53,7 @@ yarn dx
 
 ### Manual setup
 
-1.  Configure database in the `packages/prisma/.env` file. Replace `<user>`, `<pass>`, `<db-host>`, `<db-port>` with their applicable values
+1.  Configure database in the `.env` file. Replace `<user>`, `<pass>`, `<db-host>`, `<db-port>` with their applicable values
 
         ```text
         DATABASE_URL='postgresql://<user>:<pass>@<db-host>:<db-port>'

apps/docs/pages/self-hosting/vercel.mdx

@@ -6,7 +6,7 @@ title: Vercel
 
 ## Requirements
 
-You need a PostgresDB database hosted somewhere. [Heroku](https://www.heroku.com) and [Supabase](https://supabase.com/) offer great free options.
+You need a PostgresDB database hosted somewhere. [Supabase](https://supabase.com/) offers a great free option.
 
 ## Getting Started
 

apps/storybook/.gitignore

@@ -1,37 +1,25 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# next.js
-/.next/
-/out/
-
-# production
-/build
-
-# misc
-.DS_Store
-*.pem
-
-# debug
+# Logs
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-.pnpm-debug.log*
+pnpm-debug.log*
+lerna-debug.log*
 
-# local env files
-.env*.local
+node_modules
+storybook-static
+dist
+dist-ssr
+*.local
 
-# vercel
-.vercel
-
-# typescript
-*.tsbuildinfo
-
-storybook-static/
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

apps/storybook/.storybook/YourTheme.js

@@ -0,0 +1,12 @@
+import { create } from "@storybook/theming";
+
+export default create({
+  base: "light",
+  colorPrimary: "#111827",
+  colorSecondary: "#111827",
+  appContentBg: "#F9FAFC",
+  brandTitle: "Cal.com UI",
+  brandUrl: "https://cal.com",
+  brandImage: "https://cal.com/logo.svg",
+  brandTarget: "_self",
+});

apps/storybook/.storybook/i18next.js

@@ -0,0 +1,9 @@
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+
+i18n.use(initReactI18next).init({
+  resources: [],
+  debug: true,
+});
+
+export default i18n;

apps/storybook/.storybook/main.js

@@ -1,30 +1,32 @@
 const path = require("path");
 
 module.exports = {
-  stories: ["../stories/**/*.stories.mdx", "../stories/**/*.stories.@(js|jsx|ts|tsx)"],
+  stories: [
+    "../intro.stories.mdx",
+    "../../../packages/ui/components/**/*.stories.mdx",
+    "../../../packages/features/**/*.stories.mdx",
+    "../../../packages/ui/components/**/*.stories.@(js|jsx|ts|tsx)",
+  ],
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
-    "storybook-addon-designs",
-    "@storybook/addon-a11y",
+    "storybook-addon-rtl-direction",
+    "storybook-react-i18next",
     "storybook-addon-next",
+    /*{
+      name: "storybook-addon-next",
+      options: {
+        nextConfigPath: path.resolve(__dirname, "../../web/next.config.js"),
+      },
+    },*/
   ],
   framework: "@storybook/react",
   core: {
     builder: "webpack5",
   },
-  webpackFinal: async (config) => {
-    /**
-     * Fixes font import with /
-     * @see https://github.com/storybookjs/storybook/issues/12844#issuecomment-867544160
-     */
-    config.resolve.roots = [path.resolve(__dirname, "../public"), "node_modules"];
-
-    /**
-     * Why webpack5... Just why?
-     * @type {{console: boolean, process: boolean, timers: boolean, os: boolean, querystring: boolean, sys: boolean, fs: boolean, url: boolean, crypto: boolean, path: boolean, zlib: boolean, punycode: boolean, util: boolean, stream: boolean, assert: boolean, string_decoder: boolean, domain: boolean, vm: boolean, tty: boolean, http: boolean, buffer: boolean, constants: boolean, https: boolean, events: boolean}}
-     */
+  staticDirs: ["../public"],
+  webpackFinal: async (config, { configType }) => {
     config.resolve.fallback = {
       fs: false,
       assert: false,
@@ -52,6 +54,20 @@ module.exports = {
       zlib: false,
     };
 
+    config.module.rules.push({
+      test: /\.css$/,
+      use: [
+        "style-loader",
+        {
+          loader: "css-loader",
+          options: {
+            modules: true, // Enable modules to help you using className
+          },
+        },
+      ],
+      include: path.resolve(__dirname, "../src"),
+    });
+
     return config;
   },
 };

apps/storybook/.storybook/manager.js

@@ -0,0 +1,7 @@
+import { addons } from "@storybook/addons";
+
+import yourTheme from "./YourTheme";
+
+addons.setConfig({
+  theme: yourTheme,
+});

apps/storybook/.storybook/preview-head.html

@@ -1,4 +1,5 @@
 <script>
+  window.global = window;
   window.isEmbed = ()=> {
     return location.search.includes("embed=")
   }

apps/storybook/.storybook/preview.js

@@ -1,24 +0,0 @@
-import { RouterContext } from "next/dist/shared/lib/router-context";
-import * as NextImage from "next/image";
-
-import "../styles/globals.css";
-
-const OriginalNextImage = NextImage.default;
-
-Object.defineProperty(NextImage, "default", {
-  configurable: true,
-  value: (props) => <OriginalNextImage {...props} unoptimized />,
-});
-
-export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
-  },
-  nextRouter: {
-    Provider: RouterContext.Provider,
-  },
-};

apps/storybook/.storybook/preview.jsx

@@ -0,0 +1,32 @@
+import { addDecorator } from "@storybook/react";
+import { I18nextProvider } from "react-i18next";
+
+import "../styles/globals.css";
+import "../styles/storybook-styles.css";
+import i18n from "./i18next";
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};
+
+addDecorator((storyFn) => (
+  <I18nextProvider i18n={i18n}>
+    <div style={{ margin: "2rem" }}>{storyFn()}</div>
+  </I18nextProvider>
+));
+
+window.getEmbedNamespace = () => {
+  const url = new URL(document.URL);
+  const namespace = url.searchParams.get("embed");
+  return namespace;
+};
+
+window.getEmbedTheme = () => {
+  return "auto";
+};

apps/storybook/README.md

@@ -1,21 +0,0 @@
-# Storybook & UI
-
-Storybook is home to all of our commonly used components. We use this app to visually show all components that we have within the project + automatic type documentation generated for each component.
-
-All changes to storybook/ui must require a visual/code review.
-
-- Visual reviews happen on a tool called [Chormatic](http://chromatic.com/) and these reviews will happen by our product team.
-
-- Code reviews happen as normal on any changes to storybook/ui designs
-
-## Deployment
-
-To deploy this project run
-
-```bash
-  cd apps/storybook
-```
-
-```bash
-  yarn dev
-```

apps/storybook/components/CustomArgsTable.tsx

@@ -0,0 +1,23 @@
+import { ArgsTable } from "@storybook/addon-docs";
+import { SortType } from "@storybook/components";
+import { PropDescriptor } from "@storybook/store";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- ignore storybook addon types component as any so we have to do
+type Component = any;
+type BaseProps = {
+  include?: PropDescriptor;
+  exclude?: PropDescriptor;
+  sort?: SortType;
+};
+
+type OfProps = BaseProps & {
+  of: "." | "^" | Component;
+};
+
+export function CustomArgsTable({ of, sort }: OfProps) {
+  return (
+    <div className="custom-args-wrapper">
+      <ArgsTable of={of} sort={sort} />
+    </div>
+  );
+}

apps/storybook/components/Examples.tsx

@@ -0,0 +1,32 @@
+import { classNames } from "@calcom/lib";
+
+interface ExampleProps {
+  children: React.ReactNode;
+  title: string;
+  isFullWidth?: boolean;
+}
+export const Example = ({ children, title, isFullWidth = false }: ExampleProps) => {
+  return (
+    <div className={classNames("examples-item", isFullWidth && "w-full")}>
+      <span className={classNames("examples-item-title", isFullWidth && "mb-0 mt-2")}>{title}</span>
+      <div className="examples-item-content">{children}</div>
+    </div>
+  );
+};
+
+interface ExamplesProps {
+  children: React.ReactNode;
+  title: string;
+  footnote?: React.ReactNode;
+  dark?: boolean;
+}
+
+export const Examples = ({ children, title, footnote = null, dark }: ExamplesProps) => {
+  return (
+    <div className={classNames("examples", dark && "dark")}>
+      <h2 className="examples-title">{title}</h2>
+      <div className="examples-content">{children}</div>
+      {!!footnote && <div className="examples-footnote">{footnote}</div>}
+    </div>
+  );
+};

apps/storybook/components/Note.tsx

@@ -0,0 +1,5 @@
+export const Note = ({ children }: { children: React.ReactNode }) => (
+  <div className="story-note">
+    <div>{children}</div>
+  </div>
+);

apps/storybook/components/Title.tsx

@@ -0,0 +1,21 @@
+export const Title = ({
+  title,
+  suffix,
+  subtitle,
+  offset,
+}: {
+  title: string;
+  suffix?: string;
+  subtitle?: string;
+  offset?: boolean;
+}) => {
+  return (
+    <div className={`story-title ${offset && "offset"}`}>
+      <h1>
+        {title}
+        {suffix && <span>{suffix}</span>}
+      </h1>
+      {subtitle && <p>{subtitle}</p>}
+    </div>
+  );
+};

apps/storybook/components/VariantsTable.tsx

@@ -0,0 +1,80 @@
+import React, { ReactElement, ReactNode } from "react";
+
+import { classNames } from "@calcom/lib";
+
+export function VariantsTable({
+  children,
+  titles,
+  isDark,
+  columnMinWidth = 150,
+}: {
+  children: ReactElement<RowProps> | ReactElement<RowProps>[];
+  titles: string[];
+  isDark?: boolean;
+  // Mainly useful on mobile, so components don't get squeesed
+  columnMinWidth?: number;
+}) {
+  const columns = React.Children.toArray(children) as ReactElement<RowProps>[];
+  return (
+    <div
+      className={classNames(
+        isDark &&
+          "relative py-8 before:absolute before:left-0 before:top-0 before:block before:h-full before:w-screen before:bg-[#1C1C1C]"
+      )}>
+      <div className="z-1 relative mx-auto w-full max-w-[1200px] overflow-auto pr-8 pt-6">
+        <table>
+          <RowTitles titles={titles} />
+          {columns.map((column) => (
+            <tr className="p-2 pr-6 pb-6" key={column.props.variant}>
+              <th
+                className="p-2 pr-6 pb-6 text-left text-sm font-normal text-[#8F8F8F]"
+                key={column.props.variant}>
+                {column.props.variant}
+              </th>
+              {React.Children.count(column.props.children) &&
+                React.Children.map(column.props.children, (cell) => (
+                  <td className="p-2 pr-6 pb-6" style={{ minWidth: `${columnMinWidth}px` }}>
+                    {cell}
+                  </td>
+                ))}
+            </tr>
+          ))}
+        </table>
+      </div>
+      {!isDark && (
+        <div data-mode="dark">
+          <VariantsTable titles={titles} isDark columnMinWidth={columnMinWidth}>
+            {children}
+          </VariantsTable>
+        </div>
+      )}
+    </div>
+  );
+}
+
+interface RowProps {
+  variant: string;
+  children: ReactNode;
+}
+
+/**
+ * There are two reasons we have this "empty" wrapper component:
+ * 1. In order to have an isolate group per variant, which we iterate through in the table component.
+ * 2. To have a way to pass the variant.
+ */
+export function VariantRow({ children }: RowProps) {
+  return <>{children}</>;
+}
+
+export function RowTitles({ titles }: { titles: string[] }) {
+  return (
+    <tr>
+      <th className="p-2 pr-6 pb-6 text-left text-sm font-normal text-[#8F8F8F]" />
+      {titles.map((title) => (
+        <th className="p-2 pr-6 pb-6 text-left text-sm font-normal text-[#8F8F8F]" key={title}>
+          {title}
+        </th>
+      ))}
+    </tr>
+  );
+}

apps/storybook/components/index.ts

@@ -0,0 +1,5 @@
+export * from "./Examples";
+export * from "./Note";
+export * from "./VariantsTable";
+export * from "./Title";
+export * from "./CustomArgsTable";

apps/storybook/intro.stories.mdx

@@ -0,0 +1,11 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Introduction" />
+
+<div className="text-center flex flex-col items-center">
+  <h1 style={{marginBottom: '24px', marginTop: '36px'}}>Welcome to Cal.com UI</h1>
+  <p>This is the beginning of our storybook impovments to match Figma as close as possible. Like our Figma library, we will be adding more components as we go along.</p>
+  <p>Our <a href="https://www.figma.com/file/9MOufQNLtdkpnDucmNX10R/%E2%9D%96-Cal-DS" target="_blank">Figma</a> library is avalible for anyone to view and use. If you have any questions or concerns, please reach out to the design team.</p>
+</div>
+
+<img src="/sb-cover.jpg" />

apps/storybook/next-env.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="next" />
-/// <reference types="next/image-types/global" />
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.

apps/storybook/next.config.js

@@ -1,7 +1,42 @@
-const withTM = require("next-transpile-modules")(["@calcom/dayjs", "@calcom/ui"]);
-/** @type {import('next').NextConfig} */
+const withBundleAnalyzer = require("@next/bundle-analyzer");
+
+const plugins = [];
+plugins.push(withBundleAnalyzer({ enabled: process.env.ANALYZE === "true" }));
+
+/** @type {import("next").NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
+  images: {
+    domains: ["www.datocms-assets.com"],
+    formats: ["image/avif", "image/webp"],
+  },
+  typescript: {
+    ignoreBuildErrors: true,
+  },
+  transpilePackages: [
+    "@calcom/app-store",
+    "@calcom/dayjs",
+    "@calcom/emails",
+    "@calcom/trpc",
+    "@calcom/embed-core",
+    "@calcom/embed-react",
+    "@calcom/features",
+    "@calcom/lib",
+    "@calcom/prisma",
+    "@calcom/ui",
+  ],
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+  webpack: (config, { isServer }) => {
+    if (!isServer) {
+      // don't resolve 'fs' module on the client to prevent this error on build --> Error: Can't resolve 'fs'
+      config.resolve.fallback = {
+        fs: false,
+      };
+    }
+    return config;
+  },
 };
 
-module.exports = withTM(nextConfig);
+module.exports = () => plugins.reduce((acc, next) => next(acc), nextConfig);

apps/storybook/package.json

@@ -1,63 +1,55 @@
 {
   "name": "@calcom/storybook",
-  "version": "0.1.0",
   "private": true,
+  "version": "0.0.0",
   "scripts": {
-    "dev:next": "next dev",
-    "build:next": "next build",
-    "start": "next start",
-    "lint": "next lint",
-    "lint:report": "eslint . --format json --output-file ../../lint-results/storybook.json",
     "dev": "start-storybook -p 6006",
-    "build": "build-storybook",
-    "chromatic": "npx chromatic --project-token=56fadc9ab496"
+    "build": "build-storybook"
   },
   "dependencies": {
+    "@calcom/config": "*",
     "@calcom/dayjs": "*",
     "@calcom/ui": "*",
-    "@radix-ui/react-avatar": "^0.1.4",
-    "@radix-ui/react-collapsible": "^0.1.0",
-    "@radix-ui/react-dialog": "^0.1.0",
-    "@radix-ui/react-dropdown-menu": "^0.1.1",
-    "@radix-ui/react-id": "^0.1.0",
-    "@radix-ui/react-radio-group": "^0.1.1",
-    "@radix-ui/react-slider": "^0.1.1",
-    "@radix-ui/react-switch": "^0.1.1",
-    "@radix-ui/react-tooltip": "^0.1.0",
-    "next": "^12.2.0",
-    "next-transpile-modules": "^9.0.0",
-    "react": "18.1.0",
-    "react-dom": "18.1.0",
-    "react-feather": "^2.0.9",
-    "react-hot-toast": "^2.2.0"
+    "@radix-ui/react-avatar": "^1.0.0",
+    "@radix-ui/react-collapsible": "^1.0.0",
+    "@radix-ui/react-dialog": "^1.0.0",
+    "@radix-ui/react-dropdown-menu": "^1.0.0",
+    "@radix-ui/react-id": "^1.0.0",
+    "@radix-ui/react-popover": "^1.0.2",
+    "@radix-ui/react-radio-group": "^1.0.0",
+    "@radix-ui/react-slider": "^1.0.0",
+    "@radix-ui/react-switch": "^1.0.0",
+    "@radix-ui/react-tooltip": "^1.0.0",
+    "next": "^13.2.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "storybook-addon-rtl-direction": "^0.0.19"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.6",
-    "@calcom/config": "*",
-    "@storybook/addon-a11y": "^6.5.9",
-    "@storybook/addon-actions": "^6.5.9",
-    "@storybook/addon-essentials": "^6.5.9",
-    "@storybook/addon-interactions": "^6.5.9",
-    "@storybook/addon-links": "^6.5.9",
-    "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/builder-webpack5": "^6.5.9",
-    "@storybook/manager-webpack5": "^6.5.9",
-    "@storybook/react": "^6.5.9",
-    "@types/node": "16.9.1",
-    "@types/react": "18.0.9",
-    "@types/react-dom": "18.0.4",
-    "autoprefixer": "^10.4.7",
+    "@babel/core": "^7.19.6",
+    "@storybook/addon-actions": "^6.5.13",
+    "@storybook/addon-essentials": "^6.5.13",
+    "@storybook/addon-interactions": "^6.5.13",
+    "@storybook/addon-links": "^6.5.13",
+    "@storybook/builder-vite": "^0.2.4",
+    "@storybook/builder-webpack5": "^6.5.13",
+    "@storybook/manager-webpack5": "^6.5.13",
+    "@storybook/react": "^6.5.13",
+    "@storybook/testing-library": "^0.0.13",
+    "@types/react": "18.0.26",
+    "@types/react-dom": "18.0.9",
+    "@vitejs/plugin-react": "^2.1.0",
+    "autoprefixer": "^10.4.12",
     "babel-loader": "^8.2.5",
-    "chromatic": "^6.6.4",
-    "eslint": "^8.15.0",
-    "postcss": "^8.4.13",
-    "postcss-loader": "^7.0.0",
+    "fs": "^0.0.1-security",
+    "postcss": "^8.4.18",
+    "postcss-pseudo-companion-classes": "^0.1.1",
+    "rollup-plugin-polyfill-node": "^0.10.2",
     "storybook-addon-designs": "^6.3.1",
-    "storybook-addon-next": "^1.6.7",
-    "tailwindcss": "^3.1.3",
-    "tsconfig-paths-webpack-plugin": "^3.5.2",
-    "typescript": "^4.6.4"
-  },
-  "readme": "ERROR: No README data found!",
-  "_id": "@calcom/storybook@0.1.0"
+    "storybook-addon-next": "^1.6.9",
+    "storybook-react-i18next": "^1.1.2",
+    "tailwindcss": "^3.2.1",
+    "typescript": "^4.9.4",
+    "vite": "^2.9.15"
+  }
 }

apps/storybook/pages/_app.tsx

@@ -1,9 +0,0 @@
-import type { AppProps } from "next/app";
-
-import "../styles/globals.css";
-
-function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />;
-}
-
-export default MyApp;

apps/storybook/pages/index.tsx

@@ -1,63 +0,0 @@
-import type { NextPage } from "next";
-import Head from "next/head";
-import Image from "next/image";
-
-const Home: NextPage = () => {
-  return (
-    <div className={styles.container}>
-      <Head>
-        <title>Create Next App</title>
-        <meta name="description" content="Generated by create next app" />
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
-
-      <main className={styles.main}>
-        <h1 className={styles.title}>
-          Welcome to <a href="https://nextjs.org">Next.js!</a>
-        </h1>
-
-        <p className={styles.description}>
-          Get started by editing <code className={styles.code}>pages/index.tsx</code>
-        </p>
-
-        <div className={styles.grid}>
-          <a href="https://nextjs.org/docs" className={styles.card}>
-            <h2>Documentation &rarr;</h2>
-            <p>Find in-depth information about Next.js features and API.</p>
-          </a>
-
-          <a href="https://nextjs.org/learn" className={styles.card}>
-            <h2>Learn &rarr;</h2>
-            <p>Learn about Next.js in an interactive course with quizzes!</p>
-          </a>
-
-          <a href="https://github.com/vercel/next.js/tree/canary/examples" className={styles.card}>
-            <h2>Examples &rarr;</h2>
-            <p>Discover and deploy boilerplate example Next.js projects.</p>
-          </a>
-
-          <a
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-            className={styles.card}>
-            <h2>Deploy &rarr;</h2>
-            <p>Instantly deploy your Next.js site to a public URL with Vercel.</p>
-          </a>
-        </div>
-      </main>
-
-      <footer className={styles.footer}>
-        <a
-          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer">
-          Powered by{" "}
-          <span className={styles.logo}>
-            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
-          </span>
-        </a>
-      </footer>
-    </div>
-  );
-};
-
-export default Home;

apps/storybook/postcss.config.js

@@ -2,5 +2,21 @@ module.exports = {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},
+    /**
+     * We use this postcss plugin to create custom css classes for
+     * any pseudo classes (eg hover, focus) mentioned below.
+     * This way you can eg show a hover state in Storybook by adding
+     * this classname .sb-pseudo--hover to the item.
+     *
+     * These styles will only be added in storybook, and will NOT
+     * end up in the final css bundle of apps using the components.
+     */
+    "postcss-pseudo-companion-classes": {
+      prefix: "sb-pseudo--",
+      // We have to keep a restrictTo list here, because otherwise
+      // this library will have issues processing tailwind's \: prefixed classes
+      // and start adding dots everywhere, breaking this functionality.
+      restrictTo: [":hover", ":focus"],
+    },
   },
 };

apps/storybook/public/vercel.svg

@@ -1,4 +0,0 @@
-<svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
-    xmlns="http://www.w3.org/2000/svg">
-    <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
-</svg>

apps/storybook/stories/Avatar.stories.tsx

@@ -1,26 +0,0 @@
-import { ComponentMeta } from "@storybook/react";
-
-import Avatar from "@calcom/ui/v2/Avatar";
-
-export default {
-  title: "Avatar",
-  component: Avatar,
-} as ComponentMeta<typeof Avatar>;
-
-export const Default = () => {
-  return (
-    <>
-      <Avatar size="sm" alt="Avatar Story" gravatarFallbackMd5="Ui@CAL.com" />
-      <Avatar size="lg" alt="Avatar Story" gravatarFallbackMd5="Ui@CAL.com" />
-    </>
-  );
-};
-
-export const Accepted = () => {
-  return (
-    <>
-      <Avatar size="sm" alt="Avatar Story" gravatarFallbackMd5="Ui@CAL.com" accepted />
-      <Avatar size="lg" alt="Avatar Story" gravatarFallbackMd5="Ui@CAL.com" accepted />
-    </>
-  );
-};

apps/storybook/stories/AvatarGroup.stories.tsx

@@ -1,60 +0,0 @@
-import { ComponentMeta } from "@storybook/react";
-
-import Avatar from "@calcom/ui/v2/Avatar";
-import AvatarGroup from "@calcom/ui/v2/AvatarGroup";
-
-export default {
-  title: "Avatar/Group",
-  component: AvatarGroup,
-} as ComponentMeta<typeof AvatarGroup>;
-
-const IMAGES = [
-  {
-    image: "https://cal.com/stakeholder/peer.jpg",
-    alt: "Peer",
-    title: "Peer Richelsen",
-  },
-  {
-    image: "https://cal.com/stakeholder/bailey.jpg",
-    alt: "Bailey",
-    title: "Bailey Pumfleet",
-  },
-  {
-    image: "https://cal.com/stakeholder/alex-van-andel.jpg",
-    alt: "Alex",
-    title: "Alex Van Andel",
-  },
-  {
-    image: "https://cal.com/stakeholder/ciaran.jpg",
-    alt: "Ciarán",
-    title: "Ciarán Hanrahan",
-  },
-  {
-    image: "https://cal.com/stakeholder/peer.jpg",
-    alt: "Peer",
-    title: "Peer Richelsen",
-  },
-  {
-    image: "https://cal.com/stakeholder/bailey.jpg",
-    alt: "Bailey",
-    title: "Bailey Pumfleet",
-  },
-  {
-    image: "https://cal.com/stakeholder/alex-van-andel.jpg",
-    alt: "Alex",
-    title: "Alex Van Andel",
-  },
-  {
-    image: "https://cal.com/stakeholder/ciaran.jpg",
-    alt: "Ciarán",
-    title: "Ciarán Hanrahan",
-  },
-];
-
-export const Default = () => {
-  return (
-    <>
-      <AvatarGroup size="lg" items={IMAGES} />
-    </>
-  );
-};

apps/storybook/stories/Badge.stories.tsx

@@ -1,58 +0,0 @@
-import { ComponentMeta } from "@storybook/react";
-import { Bell } from "react-feather";
-
-import { Badge } from "@calcom/ui/v2";
-
-export default {
-  title: "Badge",
-  component: Badge,
-} as ComponentMeta<typeof Badge>;
-
-export const All = () => (
-  <div className="">
-    <h1>Default</h1>
-    <div className="mb-4 flex space-x-2">
-      <Badge variant="gray">Badge</Badge>
-      <Badge variant="red">Badge</Badge>
-      <Badge variant="green">Badge</Badge>
-      <Badge variant="orange">Badge</Badge>
-      <Badge variant="blue">Badge</Badge>
-    </div>
-    <h1>Icons</h1>
-    <div className="mb-4 flex space-x-2">
-      <Badge variant="gray" StartIcon={Bell}>
-        Badge
-      </Badge>
-      <Badge variant="red" StartIcon={Bell}>
-        Badge
-      </Badge>
-      <Badge variant="green" StartIcon={Bell}>
-        Badge
-      </Badge>
-      <Badge variant="orange" StartIcon={Bell}>
-        Badge
-      </Badge>
-      <Badge variant="blue" StartIcon={Bell}>
-        Badge
-      </Badge>
-    </div>
-    <h1>Large</h1>
-    <div className="flex space-x-2">
-      <Badge variant="gray" size="lg">
-        Badge
-      </Badge>
-      <Badge variant="red" size="lg">
-        Badge
-      </Badge>
-      <Badge variant="green" size="lg">
-        Badge
-      </Badge>
-      <Badge variant="orange" size="lg">
-        Badge
-      </Badge>
-      <Badge variant="blue" size="lg">
-        Badge
-      </Badge>
-    </div>
-  </div>
-);

apps/storybook/stories/Banner.stories.tsx

@@ -1,46 +0,0 @@
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { Info } from "react-feather";
-
-import { Banner } from "@calcom/ui/v2";
-
-export default {
-  title: "Banner",
-  component: Banner,
-} as ComponentMeta<typeof Banner>;
-
-export const Default = () => {
-  return (
-    <Banner
-      variant="neutral"
-      title="Summarise what happened"
-      description="Describe what can be done about it here."
-      Icon={Info}
-      onDismiss={() => console.log("dismissed")}
-    />
-  );
-};
-
-export const Warning = () => {
-  return (
-    <Banner
-      variant="warning"
-      title="Summarise what happened"
-      description="Describe what can be done about it here."
-      Icon={Info}
-      onDismiss={() => console.log("dismissed")}
-    />
-  );
-};
-
-export const Error = () => {
-  return (
-    <Banner
-      variant="error"
-      title="Summarise what happened"
-      description="Describe what can be done about it here."
-      errorMessage="Event creation failed"
-      Icon={Info}
-      onDismiss={() => console.log("dismissed")}
-    />
-  );
-};

apps/storybook/stories/Breadcrumb.stories.tsx

@@ -1,22 +0,0 @@
-import { ComponentMeta } from "@storybook/react";
-
-import { Breadcrumb, BreadcrumbItem } from "@calcom/ui/v2";
-
-export default {
-  title: "Breadcrumbs",
-  component: Breadcrumb,
-} as ComponentMeta<typeof Breadcrumb>;
-
-export const Default = () => (
-  <Breadcrumb>
-    <BreadcrumbItem href="/">Home</BreadcrumbItem>
-    <BreadcrumbItem href="/">Test</BreadcrumbItem>
-  </Breadcrumb>
-);
-
-Default.parameters = {
-  nextRouter: {
-    path: "/test",
-    asPath: "/test",
-  },
-};

apps/storybook/stories/Button.stories.tsx

@@ -1,95 +0,0 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-import { Trash2 } from "react-feather";
-
-import { Button as ButtonComponent } from "@calcom/ui/v2";
-
-export default {
-  title: "Button",
-  component: ButtonComponent,
-  argTypes: {
-    color: {
-      options: ["primary", "secondary", "minimal", "destructive"],
-      control: { type: "select" },
-    },
-    disabled: {
-      options: [true, false],
-      control: { type: "boolean" },
-    },
-    loading: {
-      options: [true, false],
-      control: { type: "boolean" },
-    },
-    size: {
-      options: ["base", "lg", "icon"],
-      control: { type: "radio" },
-    },
-  },
-} as ComponentMeta<typeof ButtonComponent>;
-
-const Template: ComponentStory<typeof ButtonComponent> = (args) => <ButtonComponent {...args} />;
-
-export const All = () => (
-  <div>
-    <h1>Primary</h1>
-    <div className="flex space-x-2">
-      <ButtonComponent aria-label="Button Text">Button Text</ButtonComponent>
-      <ButtonComponent disabled aria-label="Button Text">
-        Button Text
-      </ButtonComponent>
-    </div>
-    <h1>Secondary</h1>
-    <div className="flex space-x-2">
-      <ButtonComponent color="secondary" aria-label="Button Text">
-        Button Text
-      </ButtonComponent>
-      <ButtonComponent disabled color="secondary" aria-label="Button Text">
-        Button Text
-      </ButtonComponent>
-      <ButtonComponent size="icon" color="secondary" StartIcon={Trash2} aria-label="Button Text" />
-    </div>
-    <h1>Minimal</h1>
-    <div className="flex">
-      <ButtonComponent color="minimal" aria-label="Button Text">
-        Button Text
-      </ButtonComponent>
-      <ButtonComponent disabled color="minimal" aria-label="Button Text">
-        Button Text
-      </ButtonComponent>
-      <ButtonComponent size="icon" color="minimal" StartIcon={Trash2} aria-label="Button Text" />
-    </div>
-    <h1>Destructive</h1>
-    <ButtonComponent size="icon" color="destructive" StartIcon={Trash2} aria-label="Button Text" />
-    <h1>Tooltip</h1>
-    <ButtonComponent
-      tooltip="Deletes EventTypes"
-      size="icon"
-      color="destructive"
-      StartIcon={Trash2}
-      aria-label="Button Text"
-    />
-  </div>
-);
-
-export const Button = Template.bind({});
-Button.args = {
-  color: "primary",
-  children: "Button Text",
-};
-
-export const Disabled = Template.bind({});
-Disabled.args = {
-  ...Button.args,
-  disabled: true,
-};
-
-export const Loading = Template.bind({});
-Loading.args = {
-  ...Button.args,
-  loading: true,
-};
-export const Icon = Template.bind({});
-Icon.args = {
-  color: "secondary",
-  StartIcon: Trash2,
-  size: "icon",
-};

apps/storybook/stories/ButtonGroup.stories.tsx

@@ -1,31 +0,0 @@
-import { ComponentMeta } from "@storybook/react";
-import { ArrowLeft, ArrowRight, Clipboard, Navigation2, Trash2 } from "react-feather";
-
-import { Button, ButtonGroup } from "@calcom/ui/v2";
-
-export default {
-  title: "Button Group",
-  component: ButtonGroup,
-} as ComponentMeta<typeof ButtonGroup>;
-
-export const Default = () => (
-  <ButtonGroup>
-    <Button StartIcon={Trash2} size="icon" color="secondary" />
-    <Button StartIcon={Navigation2} size="icon" color="secondary" />
-    <Button StartIcon={Clipboard} size="icon" color="secondary" />
-  </ButtonGroup>
-);
-
-export const Combined = () => (
-  <div className="flex flex-col space-y-2">
-    <ButtonGroup combined>
-      <Button StartIcon={Trash2} size="icon" color="secondary" combined />
-      <Button StartIcon={Navigation2} size="icon" color="secondary" combined />
-      <Button StartIcon={Clipboard} size="icon" color="secondary" combined />
-    </ButtonGroup>
-    <ButtonGroup combined>
-      <Button StartIcon={ArrowLeft} size="icon" color="secondary" combined />
-      <Button StartIcon={ArrowRight} size="icon" color="secondary" combined />
-    </ButtonGroup>
-  </div>
-);

apps/storybook/stories/Checkbox.stories.tsx

@@ -1,31 +0,0 @@
-import { ComponentMeta } from "@storybook/react";
-
-import { Checkbox } from "@calcom/ui/v2";
-
-export default {
-  title: "Checkbox",
-  component: Checkbox,
-} as ComponentMeta<typeof Checkbox>;
-
-export const All = () => (
-  <div className="flex flex-col space-y-2">
-    <Checkbox label="Default" description="Toggle on and off something" />
-    <Checkbox label="Error" description="Toggle on and off something" error />
-    <Checkbox label="Disabled" description="Toggle on and off something" disabled />
-    <Checkbox label="Disabled Checked" description="Toggle on and off something" checked disabled />
-    <hr />
-    <Checkbox description="Default" descriptionAsLabel />
-    <Checkbox description="Error" descriptionAsLabel error />
-    <Checkbox description="Disabled" descriptionAsLabel disabled />
-    <Checkbox description="Disabled" descriptionAsLabel disabled checked />
-  </div>
-);
-
-export const CheckboxField = () => <Checkbox description="Default" descriptionAsLabel />;
-export const CheckboxError = () => <Checkbox description="Error" descriptionAsLabel />;
-export const CheckboxDisabled = () => (
-  <>
-    <Checkbox description="Disabled" descriptionAsLabel disabled />
-    <Checkbox description="Disabled" descriptionAsLabel disabled checked />
-  </>
-);