v1.8.3

hotfix: bookings and availability pages
commit 36e1c9272fa9b86cbe9e53e03e83799820674f17 Author: zomars <zomars@me.com> Date: Tue Jul 26 18:27:57 2022 -0600 Update [schedule].tsx commit f39535feea22a11a857d179f3506803602a95728 Author: zomars <zomars@me.com> Date: Tue Jul 26 18:07:30 2022 -0600 Update [status].tsx commit c3ac1bcc8c7ff8dc7ebf178d23a6e5c7ea223749 Author: zomars <zomars@me.com> Date: Tue Jul 26 17:53:43 2022 -0600 Update [schedule].tsx commit 39364d8476b3c582d4a7fe3f8d139c5d254e3ecf Author: zomars <zomars@me.com> Date: Tue Jul 26 17:43:13 2022 -0600 Debugging prod commit 4b428d22dec734dab19096b4fe07741f18e5bc5d Author: zomars <zomars@me.com> Date: Tue Jul 26 17:20:44 2022 -0600 Update checkLicense.ts commit 4212e6d61908face52d647bb661d71db959cf864 Author: zomars <zomars@me.com> Date: Tue Jul 26 17:11:37 2022 -0600 Booking fixes attempt commit e3160027ea0ce40d129b445daeb3bb17711ac640 Author: zomars <zomars@me.com> Date: Tue Jul 26 13:52:35 2022 -0600 migration conflict fixes
2022-07-26 18:46:14 -06:00 · 2022-07-26 18:45:10 -06:00 · 2022-07-26 13:03:19 -06:00 · 2022-07-26 18:25:42 +00:00 · 2022-07-26 12:04:20 -06:00 · 2022-07-26 12:02:44 -06:00
1213 changed files with 64180 additions and 46089 deletions
@@ -0,0 +1,90 @@
+# ********** INDEX **********
+#
+# - APP STORE
+#   - DAILY.CO VIDEO
+#   - GOOGLE CALENDAR/MEET/LOGIN
+#   - HUBSPOT
+#   - OFFICE 365
+#   - SLACK
+#   - STRIPE
+#   - TANDEM
+#   - ZOOM
+#   - GIPHY
+#   - VITAL
+
+# - APP STORE **********************************************************************************************
+# ⚠️ ⚠️ ⚠️ THESE WILL BE MIGRATED TO THE DATABASE TO PREVENT AWS's 4KB ENV QUOTA ⚠️ ⚠️ ⚠️
+#   - DAILY.CO VIDEO
+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
+GOOGLE_API_CREDENTIALS=
+
+# To enable Login with Google you need to:
+# 1. Set `GOOGLE_API_CREDENTIALS` above
+# 2. Set `GOOGLE_LOGIN_ENABLED` to `true`
+# When self-hosting please ensure you configure the Google integration as an Internal app so no one else can login to your instance
+# @see https://support.google.com/cloud/answer/6158849#public-and-internal&zippy=%2Cpublic-and-internal-applications
+GOOGLE_LOGIN_ENABLED=false
+
+#   - HUBSPOT
+# Used for the HubSpot integration
+# @see https://github.com/calcom/cal.com/#obtaining-hubspot-client-id-and-secret
+HUBSPOT_CLIENT_ID=""
+HUBSPOT_CLIENT_SECRET=""
+
+#   - OFFICE 365
+# Used for the Office 365 / Outlook.com Calendar / MS Teams integration
+# @see https://github.com/calcom/cal.com/#Obtaining-Microsoft-Graph-Client-ID-and-Secret
+MS_GRAPH_CLIENT_ID=
+MS_GRAPH_CLIENT_SECRET=
+
+#   - SLACK
+# @see https://github.com/calcom/cal.com/#obtaining-slack-client-id-and-secret-and-signing-secret
+SLACK_SIGNING_SECRET=
+SLACK_CLIENT_ID=
+SLACK_CLIENT_SECRET=
+
+#   - STRIPE
+NEXT_PUBLIC_STRIPE_PUBLIC_KEY= # pk_test_...
+STRIPE_PRIVATE_KEY=            # sk_test_...
+STRIPE_WEBHOOK_SECRET=         # whsec_...
+STRIPE_CLIENT_ID=              # ca_...
+PAYMENT_FEE_FIXED=10           # Take 10 additional cents commission
+PAYMENT_FEE_PERCENTAGE=0.005   # Take 0.5% commission
+
+#   - TANDEM
+# Used for the Tandem integration -- contact support@tandem.chat for API access.
+TANDEM_CLIENT_ID=""
+TANDEM_CLIENT_SECRET=""
+TANDEM_BASE_URL="https://tandem.chat"
+
+#   - ZOOM
+# Used for the Zoom integration
+# @see https://github.com/calcom/cal.com/#obtaining-zoom-client-id-and-secret
+ZOOM_CLIENT_ID=
+ZOOM_CLIENT_SECRET=
+
+#   - GIPHY
+# Used for the Giphy integration
+# @see https://support.giphy.com/hc/en-us/articles/360020283431-Request-A-GIPHY-API-Key
+GIPHY_API_KEY=
+
+#   - VITAL
+# Used for the vital integration
+# @see https://github.com/calcom/cal.com/#obtaining-vital-api-keys
+VITAL_API_KEY=
+VITAL_WEBHOOK_SECRET=
+# "sandbox" | "prod" | "production" | "development"
+VITAL_DEVELOPMENT_MODE="sandbox"
+# "us" | "eu"
+VITAL_REGION="us"
+
+#   - ZAPIER
+# Used for the Zapier integration
+# @see https://github.com/calcom/cal.com/blob/main/packages/app-store/zapier/README.md
+ZAPIER_INVITE_LINK=""
+# *********************************************************************************************************
@@ -5,14 +5,6 @@
 # - SHARED
 #   - NEXTAUTH
 # - E-MAIL SETTINGS
-# - APP STORE
-#   - DAILY.CO VIDEO
-#   - GOOGLE CALENDAR/MEET/LOGIN
-#   - OFFICE 365
-#   - SLACK
-#   - STRIPE
-#   - TANDEM
-#   - ZOOM

 # - LICENSE *************************************************************************************************
 # Set this value to 'agree' to accept our license:
@@ -23,6 +15,9 @@
 # - 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.
+# @see https://console.cal.com
+CALCOM_LICENSE_KEY=
 # ***********************************************************************************************************

 # - DATABASE ************************************************************************************************
@@ -33,6 +28,8 @@ NEXT_PUBLIC_LICENSE_CONSENT=''
 NEXT_PUBLIC_WEBAPP_URL='http://localhost:3000'
 # Change to 'http://localhost:3001' if running the website simultaneously
 NEXT_PUBLIC_WEBSITE_URL='http://localhost:3000'
+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
@@ -47,15 +44,18 @@ PGSSLMODE=

 #   - NEXTAUTH
 # @see: https://github.com/calendso/calendso/issues/263
-# Required for Vercel hosting - set NEXTAUTH_URL to equal your BASE_URL
+# @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=
-JWT_SECRET='secret'
+# @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

-# Remove this var if you don't want Cal to collect anonymous usage
-NEXT_PUBLIC_TELEMETRY_KEY=js.2pvs2bbpqq1zxna97wcml.oi2jzirnbj1ev4tc57c5r
+# Set this to '1' if you don't want Cal to collect anonymous usage
+CALCOM_TELEMETRY_DISABLED=

 # ApiKey for cronjobs
 CRON_API_KEY='0cc0e6c35519bba620c9360cfe3e68d0'
@@ -74,15 +74,35 @@ NEXT_PUBLIC_ZENDESK_KEY=
 # Help Scout Config
 NEXT_PUBLIC_HELPSCOUT_KEY=

+# Inbox to send user feedback
+SEND_FEEDBACK_EMAIL=
+
+# Sengrid
+# Used for email reminders in workflows
+SENDGRID_API_KEY=
+SENDGRID_EMAIL=
+
+# Twilio
+# Used to send SMS reminders in workflows
+TWILIO_SID=
+TWILIO_TOKEN=
+TWILIO_MESSAGING_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
 NEXT_PUBLIC_IS_E2E=

 # Used for internal billing system
-NEXT_PUBLIC_STRIPE_PRO_PLAN_PRODUCT=
 NEXT_PUBLIC_STRIPE_PRO_PLAN_PRICE=
 NEXT_PUBLIC_STRIPE_PREMIUM_PLAN_PRICE=
 NEXT_PUBLIC_STRIPE_FREE_PLAN_PRICE=
+STRIPE_WEBHOOK_SECRET=
+STRIPE_PRO_PLAN_PRODUCT_ID=
+STRIPE_PREMIUM_PLAN_PRODUCT_ID=
+STRIPE_FREE_PLAN_PRODUCT_ID=
+
+# Use for internal Public API Keys and optional
+API_KEY_PREFIX=cal_
 # ***********************************************************************************************************

 # - E-MAIL SETTINGS *****************************************************************************************
@@ -108,51 +128,5 @@ EMAIL_SERVER_PASSWORD='<office365_password>'
 # EMAIL_SERVER_PASSWORD='<gmail_app_password>'
 # **********************************************************************************************************

-# - APP STORE **********************************************************************************************
-#   - DAILY.CO VIDEO
-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
-GOOGLE_API_CREDENTIALS='{}'
-# To enable Login with Google you need to:
-# 1. Set `GOOGLE_API_CREDENTIALS` above
-# 2. Set `GOOGLE_LOGIN_ENABLED` to `true`
-# When self-hosting please ensure you configure the Google integration as an Internal app so no one else can login to your instance
-# @see https://support.google.com/cloud/answer/6158849#public-and-internal&zippy=%2Cpublic-and-internal-applications
-GOOGLE_LOGIN_ENABLED=false
-
-#   - OFFICE 365
-# Used for the Office 365 / Outlook.com Calendar / MS Teams integration
-# @see https://github.com/calcom/cal.com/#Obtaining-Microsoft-Graph-Client-ID-and-Secret
-MS_GRAPH_CLIENT_ID=
-MS_GRAPH_CLIENT_SECRET=
-
-#   - SLACK
-# @see https://github.com/calcom/cal.com/#obtaining-slack-client-id-and-secret-and-signing-secret
-SLACK_SIGNING_SECRET=
-SLACK_CLIENT_ID=
-SLACK_CLIENT_SECRET=
-
-#   - STRIPE
-NEXT_PUBLIC_STRIPE_PUBLIC_KEY= # pk_test_...
-STRIPE_PRIVATE_KEY=            # sk_test_...
-STRIPE_WEBHOOK_SECRET=         # whsec_...
-STRIPE_CLIENT_ID=              # ca_...
-PAYMENT_FEE_FIXED=10           # Take 10 additional cents commission
-PAYMENT_FEE_PERCENTAGE=0.005   # Take 0.5% commission
-
-#   - TANDEM
-# Used for the Tandem integration -- contact support@tandem.chat to for API access.
-TANDEM_CLIENT_ID=""
-TANDEM_CLIENT_SECRET=""
-TANDEM_BASE_URL="https://tandem.chat"
-
-#   - ZOOM
-# Used for the Zoom integration
-# @see https://github.com/calcom/cal.com/#obtaining-zoom-client-id-and-secret
-ZOOM_CLIENT_ID=
-ZOOM_CLIENT_SECRET=
-# *********************************************************************************************************
+# Set the following value to true if you wish to enable Team Impersonation
+NEXT_PUBLIC_TEAM_IMPERSONATION=false
@@ -4,6 +4,12 @@

 Fixes # (issue)

+<!-- Please provide a loom video for visual changes to speed up reviews
+ Loom Video: https://www.loom.com/
+-->
+
+**Environment**: Staging(main branch) / Production
+
 ## Type of change

 <!-- Please delete options that are not relevant. -->
@@ -0,0 +1,5 @@
+"♻️ autoupdate":
+  - apps/web/public/static/locales/**/*.json
+
+automerge:
+  - apps/web/public/static/locales/**/*.json
@@ -0,0 +1,22 @@
+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
@@ -0,0 +1,58 @@
+# .github/workflows/chromatic.yml
+
+# Workflow name
+name: 'Chromatic'
+
+# Event for the workflow
+on:
+  pull_request_target: # So we can test on forks
+    branches:
+      - main
+    paths:
+      - apps/storybook/**
+      - packages/ui/**
+  workflow_dispatch:
+
+# 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
+        with:
+          ref: ${{ github.event.pull_request.head.sha }} # So we can test on forks
+          fetch-depth: 2
+      - name: Install dependencies
+        run: yarn
+        # 👇 Adds Chromatic as a step in the workflow
+      - name: Publish to Chromatic
+        uses: chromaui/action@v1
+        # Options required to the GitHub Chromatic Action
+        with:
+          # 👇 Chromatic projectToken, refer to the manage page to obtain it.
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
@@ -1,26 +1,24 @@
 name: Check types
 on:
-  pull_request:
+  pull_request_target:
    branches:
      - main
+    paths:
+      - "**.tsx?"
 jobs:
-  types:
-    name: Check types
-    strategy:
-      matrix:
-        node: ["14.x"]
-        os: [ubuntu-latest]
-    runs-on: ${{ matrix.os }}
-
+  check-types:
+    runs-on: ubuntu-latest
    steps:
      - name: Checkout repo
        uses: actions/checkout@v2
        with:
-          fetch-depth: 0
+          ref: ${{ github.event.pull_request.head.sha }}
+          fetch-depth: 2

-      - name: Use Node ${{ matrix.node }}
-        uses: actions/setup-node@v2
+      - name: Use Node 16.x
+        uses: actions/setup-node@v3
        with:
-          node-version: ${{ matrix.node }}
-      - run: yarn
+          node-version: 16.x
+          cache: "yarn"
+      - run: yarn --frozen-lockfile
      - run: yarn type-check
@@ -7,7 +7,7 @@ on:
    # Runs “At minute 0, 15, 30, and 45.” (see https://crontab.guru)
    - cron: "0,15,30,45 * * * *"
 jobs:
-  cron:
+  cron-bookingReminder:
    env:
      APP_URL: ${{ secrets.APP_URL }}
      CRON_API_KEY: ${{ secrets.CRON_API_KEY }}
@@ -7,7 +7,7 @@ on:
    # Runs “At minute 0, 15, 30, and 45.” (see https://crontab.guru)
    - cron: "0,15,30,45 * * * *"
 jobs:
-  cron:
+  cron-downgradeUsers:
    env:
      APP_URL: ${{ secrets.APP_URL }}
      CRON_API_KEY: ${{ secrets.CRON_API_KEY }}
@@ -0,0 +1,23 @@
+name: Cron - scheduleEmailReminders
+
+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 “At minute 0, 15, 30, and 45.” (see https://crontab.guru)
+    - cron: "0,15,30,45 * * * *"
+jobs:
+  cron-scheduleEmailReminders:
+    env:
+      APP_URL: ${{ secrets.APP_URL }}
+      CRON_API_KEY: ${{ secrets.CRON_API_KEY }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: cURL request
+        if: ${{ env.APP_URL && env.CRON_API_KEY }}
+        run: |
+          curl ${{ secrets.APP_URL }}/api/cron/workflows/scheduleEmailReminders \
+            -X POST \
+            -H 'content-type: application/json' \
+            -H 'authorization: ${{ secrets.CRON_API_KEY }}' \
+            --fail
@@ -0,0 +1,23 @@
+name: Cron - scheduleSMSReminders
+
+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 “At minute 0, 15, 30, and 45.” (see https://crontab.guru)
+    - cron: "0,15,30,45 * * * *"
+jobs:
+  cron-scheduleSMSReminders:
+    env:
+      APP_URL: ${{ secrets.APP_URL }}
+      CRON_API_KEY: ${{ secrets.CRON_API_KEY }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: cURL request
+        if: ${{ env.APP_URL && env.CRON_API_KEY }}
+        run: |
+          curl ${{ secrets.APP_URL }}/api/cron/workflows/scheduleSMSReminders \
+            -X POST \
+            -H 'content-type: application/json' \
+            -H 'authorization: ${{ secrets.CRON_API_KEY }}' \
+            --fail
@@ -15,7 +15,7 @@ jobs:
      uses: actions/checkout@v2

    - name: crowdin action
-      uses: crowdin/github-action@1.4.2
+      uses: crowdin/github-action@1.4.9
      with:
        upload_translations: true
        download_translations: true
@@ -0,0 +1,18 @@
+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 }}
@@ -0,0 +1,99 @@
+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/**
+jobs:
+  test:
+    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 }}
+    services:
+      postgres:
+        image: postgres:12.1
+        env:
+          POSTGRES_USER: postgres
+          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
+      - 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
+      - name: Run Tests
+        run: yarn app-e2e-quick
+
+      - name: Upload Test Results
+        if: ${{ always() }}
+        uses: actions/upload-artifact@v2
+        with:
+          name: test-results-core
+          path: packages/app-store/**/playwright/results
@@ -0,0 +1,99 @@
+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/**
+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
+        env:
+          POSTGRES_USER: postgres
+          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
+      - 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
+      - name: Run Tests
+        run: yarn turbo run embed-tests-update-snapshots:ci --scope=@calcom/embed-react --concurrency=1
+
+      - name: Upload embed-core 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
@@ -3,31 +3,33 @@ on:
  pull_request_target: # So we can test on forks
    branches:
      - main
-    paths-ignore:
-      - public/static/locales/**
+    paths:
+      - apps/web/**
+      - packages/**
 jobs:
-  test:
-    timeout-minutes: 15
-    name: Testing ${{ matrix.node }} and ${{ matrix.os }}
-    strategy:
-      matrix:
-        node: ["14.x"]
-        os: [ubuntu-latest]
-    runs-on: ${{ matrix.os }}
+  e2e:
+    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
-      JWT_SECRET: secret
+      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
@@ -43,6 +45,8 @@ jobs:
      # 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
@@ -58,23 +62,13 @@ jobs:
        with:
          ref: ${{ github.event.pull_request.head.sha }} # So we can test on forks
          fetch-depth: 2
-
-      - name: Use Node ${{ matrix.node }}
-        uses: actions/setup-node@v2
+      - run: echo 'NODE_OPTIONS="--max_old_space_size=4096"' >> $GITHUB_ENV
+      - name: Use Node 16.x
+        uses: actions/setup-node@v3
        with:
-          node-version: ${{ matrix.node }}
-          # cache: "yarn"
-          # cache-dependency-path: yarn.lock
+          node-version: 16.x
+          cache: "yarn"

-      - name: Turbo Cache
-        id: turbo-cache
-        uses: actions/cache@v2
-        with:
-          path: .turbo
-          key: turbo-${{ github.job }}-${{ github.event.pull_request.head.ref }}-${{ github.event.pull_request.head.sha }}
-          restore-keys: |
-            turbo-${{ github.job }}-${{ github.event.pull_request.head.ref }}-
-      - run: yarn
      - name: Cache playwright binaries
        uses: actions/cache@v2
        id: playwright-cache
@@ -82,22 +76,18 @@ jobs:
          path: |
            ~/Library/Caches/ms-playwright
            ~/.cache/ms-playwright
-            **/node_modules/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 videos
+      - name: Upload test results
        if: ${{ always() }}
        uses: actions/upload-artifact@v2
        with:
-          name: videos
-          path: |
-            test-results
-            playwright/screenshots
-            playwright/videos
-            playwright/results
-            playwright/reports
+          name: test-results
+          path: test-results
@@ -0,0 +1,17 @@
+name: "Pull Request Labeler"
+on:
+  - pull_request_target
+
+jobs:
+  labeler:
+    permissions:
+      contents: read
+      pull-requests: write
+    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 }}"
@@ -3,13 +3,12 @@ on:
  pull_request_target:
    branches:
      - main
+    paths:
+      - "**.tsx?"
+      - "**.jsx?"
 jobs:
  lint:
-    strategy:
-      matrix:
-        node: ["14.x"]
-        os: [ubuntu-latest]
-    runs-on: ${{ matrix.os }}
+    runs-on: ubuntu-latest

    steps:
      - name: Checkout repo
@@ -18,16 +17,15 @@ jobs:
          ref: ${{ github.event.pull_request.head.sha }}
          fetch-depth: 2

-      - name: Use Node.js 14.x
-        uses: actions/setup-node@v2
+      - name: Use Node 16.x
+        uses: actions/setup-node@v3
        with:
-          node-version: ${{ matrix.node }}
-          # cache: "yarn"
-          # cache-dependency-path: yarn.lock
+          node-version: 16.x
+          cache: "yarn"

      - name: Install deps
        if: steps.yarn-cache.outputs.cache-hit != 'true'
-        run: yarn
+        run: yarn --frozen-lockfile

      - name: Lint
        run: yarn lint:report
@@ -37,10 +35,11 @@ jobs:
        run: jq -s '[.[]]|flatten' lint-results/*.json &> lint-results/eslint_report.json

      - name: Annotate Code Linting Results
-        uses: ataylorme/eslint-annotate-action@1.2.0
+        uses: ataylorme/eslint-annotate-action@v2
        with:
-          repo-token: "${{ secrets.GITHUB_TOKEN }}"
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
          report-json: "lint-results/eslint_report.json"
+          only-pr-files: false

      - name: Upload ESLint report
        if: ${{ always() }}
@@ -0,0 +1,36 @@
+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/**
@@ -3,7 +3,6 @@ on:
  schedule:
    - cron: "15 */4 * * *"
  workflow_dispatch: ~
-
 jobs:
  submodule-sync:
    name: Submodule update
@@ -11,11 +10,11 @@ jobs:
    steps:
      - name: Checkout Code
        uses: actions/checkout@v2
-      - name: run action
-        uses: releasehub-com/github-action-create-pr-parent-submodule@v1
        with:
-          github_token: ${{ secrets.GH_ACCESS_TOKEN }}
-          parent_repository: "calcom/cal.com"
-          checkout_branch: "main"
-          pr_against_branch: "main"
-          owner: "calcom"
+          submodules: recursive
+          token: ${{ secrets.GH_ACCESS_TOKEN }}
+      - name: Commit
+        run: |
+          git config user.email "actions@github.com"
+          git config user.name "github-actions"
+          git commit -am "Auto updated submodule references" && git push || echo "No changes to commit"
@@ -39,6 +39,7 @@ yarn-error.log*
 .env.production.local
 .env.*
 !.env.example
+!.env.appStore.example

 # vercel
 .vercel
@@ -71,3 +72,10 @@ dist

 # Linting
 lint-results
+
+#Storybook
+apps/storybook/build-storybook.log
+
+# Snaplet
+.snaplet/snapshots
+.snaplet/structure.d.ts
@@ -1,3 +1,7 @@
+[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
@@ -2,3 +2,5 @@
 . "$(dirname "$0")/_/husky.sh"

 yarn lint-staged
+
+yarn app-store:build && git add packages/app-store/*.generated.*
@@ -4,5 +4,4 @@ version = 1
 autoupdate_label = "♻️ autoupdate"

 [approve]
-auto_approve_usernames = ["dependabot"]
-
+auto_approve_usernames = ["dependabot", "github-actions"]
@@ -1 +1 @@
-14.17
+v16
@@ -0,0 +1,4 @@
+{
+  "projectId": "cl4u26bwz7962859ply7ibuo43t",
+  "databaseUrl": "postgresql://postgres@localhost:5450/calendso"
+}
@@ -0,0 +1,3 @@
+{
+  "version": "0.3.0"
+}
@@ -0,0 +1,97 @@
+// This transform config was generated by Snaplet.
+// Snaplet found fields that may contain personally identifiable information (PII)
+// and used that to populate this file.
+import { copycat as c } from "@snaplet/copycat";
+
+import type { Transform } from "./structure";
+
+function hasStringProp<T extends string>(x: unknown, key: T): x is { [key in T]: string } {
+  return !!x && typeof x === "object" && key in x;
+}
+
+function replaceKeyIfExists<T extends string>(x: object, key: T) {
+  if (hasStringProp(x, key)) {
+    return { ...x, [key]: c.uuid(x[key]) };
+  }
+  return x;
+}
+
+function generateSlug(x: string) {
+  return c.words(x, { max: 3 }).split(" ").join("-");
+}
+
+function replaceSensitiveKeys(record: object) {
+  return {
+    ...record,
+    ...replaceKeyIfExists(record, "client_id"),
+    ...replaceKeyIfExists(record, "client_secret"),
+    ...replaceKeyIfExists(record, "public_key"),
+    ...replaceKeyIfExists(record, "api_key"),
+    ...replaceKeyIfExists(record, "signing_secret"),
+    ...replaceKeyIfExists(record, "access_token"),
+    ...replaceKeyIfExists(record, "refresh_token"),
+    ...replaceKeyIfExists(record, "stripe_user_id"),
+    ...replaceKeyIfExists(record, "stripe_publishable_key"),
+    ...replaceKeyIfExists(record, "accessToken"),
+    ...replaceKeyIfExists(record, "refreshToken"),
+    ...replaceKeyIfExists(record, "bot_user_id"),
+    ...replaceKeyIfExists(record, "app_id"),
+  };
+}
+
+const generateUsername = (x: string) => `${c.firstName(x)}-${c.lastName(x)}${c.int(x, { min: 2, max: 99 })}`;
+
+const config: Transform = () => ({
+  public: {
+    ApiKey: ({ row }) => ({
+      hashedKey: c.uuid(row.hashedKey),
+    }),
+    App: ({ row }) => ({
+      keys: replaceSensitiveKeys(row.keys),
+    }),
+    Attendee: ({ row }) => ({
+      email: c.email(row.email),
+      name: c.fullName(row.name),
+      timeZone: c.timezone(row.timeZone),
+    }),
+    Credential: ({ row }) => ({
+      key: typeof row.key === "string" ? c.uuid(row.key) : replaceSensitiveKeys(row.key),
+    }),
+    EventType: ({ row }) => ({
+      slug: generateSlug(row.slug),
+      timeZone: c.timezone(row.timeZone),
+      eventName: c.words(row.eventName, { max: 3 }),
+    }),
+    ResetPasswordRequest: ({ row }) => ({
+      email: c.email(row.email),
+    }),
+    Schedule: ({ row }) => ({
+      timeZone: c.timezone(row.timeZone),
+    }),
+    Team: ({ row }) => ({
+      bio: c.sentence(row.bio),
+      name: c.words(row.name, { max: 2 }),
+      slug: generateSlug(row.slug),
+    }),
+    users: ({ row }) =>
+      row.role !== "ADMIN"
+        ? {
+            bio: c.sentence(row.bio),
+            email: c.email(row.email),
+            name: c.fullName(row.name),
+            password: c.password(row.password),
+            timeZone: c.timezone(row.timeZone),
+            username: generateUsername(row.username),
+          }
+        : row,
+    VerificationToken: ({ row }) => ({
+      token: c.uuid(row.token),
+    }),
+    Account: ({ row }) => ({
+      access_token: c.uuid(row.access_token),
+      refresh_token: c.uuid(row.refresh_token),
+    }),
+  },
+});
+
+export default config;
@@ -7,6 +7,7 @@
    "bradlc.vscode-tailwindcss", // hinting / autocompletion for tailwind
    "ban.spellright", // Spell check for docs
    "stripe.vscode-stripe", // stripe VSCode extension
-    "Prisma.prisma" // syntax|format|completion for prisma
+    "Prisma.prisma", // syntax|format|completion for prisma
+    "rebornix.project-snippets" // Share useful snippets between collaborators
  ]
 }
@@ -0,0 +1,74 @@
+{
+  "version": "2.0.0",
+  "presentation": {
+    "echo": false,
+    "reveal": "always",
+    "focus": false,
+    "panel": "dedicated",
+    "showReuseMessage": true
+  },
+  "tasks": [
+    {
+      "label": "Launch Cal.com Development terminals",
+      "dependsOn": [
+        "Web App(3000)",
+        "Website(3001)",
+        "Embed Core(3100)",
+        "Embed React(3101)",
+        "Prisma Studio(5555)",
+        "Maildev(587)"
+      ],
+      // Mark as the default build task so cmd/ctrl+shift+b will create them
+      "group": {
+        "kind": "build",
+        "isDefault": true
+      }
+    },
+    {
+      // The name that shows up in terminal tab
+      "label": "Web App(3000)",
+      // The task will launch a shell
+      "type": "shell",
+      "command": "yarn dev",
+      // Set the shell type
+      // Mark as a background task to avoid the spinner animation on the terminal tab
+      "isBackground": false,
+      "problemMatcher": []
+    },
+    {
+      "label": "Website(3001)",
+      "type": "shell",
+      "command": "cd apps/website && yarn dev",
+      "isBackground": false,
+      "problemMatcher": []
+    },
+    {
+      "label": "Embed Core(3100)",
+      "type": "shell",
+      "command": "cd packages/embeds/embed-core && yarn dev",
+      "isBackground": false,
+      "problemMatcher": []
+    },
+    {
+      "label": "Embed React(3101)",
+      "type": "shell",
+      "command": "cd packages/embeds/embed-react && yarn dev",
+      "isBackground": false,
+      "problemMatcher": []
+    },
+    {
+      "label": "Prisma Studio(5555)",
+      "type": "shell",
+      "command": "yarn db-studio",
+      "isBackground": false,
+      "problemMatcher": []
+    },
+    {
+      "label": "Maildev(587)",
+      "type": "shell",
+      "command": "maildev -s 587",
+      "isBackground": false,
+      "problemMatcher": []
+    }
+  ]
+}
@@ -0,0 +1,128 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+We as members, contributors, and leaders pledge to make participation in our
+community a harassment-free experience for everyone, regardless of age, body
+size, visible or invisible disability, ethnicity, sex characteristics, gender
+identity and expression, level of experience, education, socio-economic status,
+nationality, personal appearance, race, religion, or sexual identity
+and orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming,
+diverse, inclusive, and healthy community.
+
+## Our Standards
+
+Examples of behavior that contributes to a positive environment for our
+community include:
+
+- Demonstrating empathy and kindness toward other people
+- Being respectful of differing opinions, viewpoints, and experiences
+- Giving and gracefully accepting constructive feedback
+- Accepting responsibility and apologizing to those affected by our mistakes,
+  and learning from the experience
+- Focusing on what is best not just for us as individuals, but for the
+  overall community
+
+Examples of unacceptable behavior include:
+
+- The use of sexualized language or imagery, and sexual attention or
+  advances of any kind
+- Trolling, insulting or derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or email
+  address, without their explicit permission
+- Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Enforcement Responsibilities
+
+Community leaders are responsible for clarifying and enforcing our standards of
+acceptable behavior and will take appropriate and fair corrective action in
+response to any behavior that they deem inappropriate, threatening, offensive,
+or harmful.
+
+Community leaders have the right and responsibility to remove, edit, or reject
+comments, commits, code, wiki edits, issues, and other contributions that are
+not aligned to this Code of Conduct, and will communicate reasons for moderation
+decisions when appropriate.
+
+## Scope
+
+This Code of Conduct applies within all community spaces, and also applies when
+an individual is officially representing the community in public spaces.
+Examples of representing our community include using an official e-mail address,
+posting via an official social media account, or acting as an appointed
+representative at an online or offline event.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported to the community leaders responsible for enforcement at
+bailey@cal.com.
+All complaints will be reviewed and investigated promptly and fairly.
+
+All community leaders are obligated to respect the privacy and security of the
+reporter of any incident.
+
+## Enforcement Guidelines
+
+Community leaders will follow these Community Impact Guidelines in determining
+the consequences for any action they deem in violation of this Code of Conduct:
+
+### 1. Correction
+
+**Community Impact**: Use of inappropriate language or other behavior deemed
+unprofessional or unwelcome in the community.
+
+**Consequence**: A private, written warning from community leaders, providing
+clarity around the nature of the violation and an explanation of why the
+behavior was inappropriate. A public apology may be requested.
+
+### 2. Warning
+
+**Community Impact**: A violation through a single incident or series
+of actions.
+
+**Consequence**: A warning with consequences for continued behavior. No
+interaction with the people involved, including unsolicited interaction with
+those enforcing the Code of Conduct, for a specified period of time. This
+includes avoiding interactions in community spaces as well as external channels
+like social media. Violating these terms may lead to a temporary or
+permanent ban.
+
+### 3. Temporary Ban
+
+**Community Impact**: A serious violation of community standards, including
+sustained inappropriate behavior.
+
+**Consequence**: A temporary ban from any sort of interaction or public
+communication with the community for a specified period of time. No public or
+private interaction with the people involved, including unsolicited interaction
+with those enforcing the Code of Conduct, is allowed during this period.
+Violating these terms may lead to a permanent ban.
+
+### 4. Permanent Ban
+
+**Community Impact**: Demonstrating a pattern of violation of community
+standards, including sustained inappropriate behavior, harassment of an
+individual, or aggression toward or disparagement of classes of individuals.
+
+**Consequence**: A permanent ban from any sort of public interaction within
+the community.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage],
+version 2.0, available at
+https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
+
+Community Impact Guidelines were inspired by [Mozilla's code of conduct
+enforcement ladder](https://github.com/mozilla/diversity).
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see the FAQ at
+https://www.contributor-covenant.org/faq. Translations are available at
+https://www.contributor-covenant.org/translations.
@@ -1,9 +1,26 @@
 # Contributing to Cal.com

-Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are **greatly appreciated**.
+Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.

 - 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
+
+### 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>
+
 ## Developing

 The development branch is `main`. This is the branch that all pull
@@ -18,29 +18,33 @@
    <a href="https://cal.com">Website</a>
    ·
    <a href="https://github.com/calcom/cal.com/issues">Issues</a>
+    ·
+    <a href="https://cal.com/roadmap">Roadmap</a>
  </p>
 </p>

 <p align="center">
   <a href="https://cal.com/slack"><img src="https://img.shields.io/badge/Slack-calendso.slack.com-%234A154B" alt="Join Cal.com Slack"></a>
   <a href="https://www.producthunt.com/posts/calendso"><img src="https://img.shields.io/badge/Product%20Hunt-%231%20Product%20of%20the%20Month-%23DA552E" alt="Product Hunt"></a>
-  <a href="https://github.com/calcom/cal.com/stargazers"><img src="https://img.shields.io/github/stars/calcom/cal.com" alt="Github Stars"></a>
-  <a href="https://news.ycombinator.com/item?id=26817795"><img src="https://img.shields.io/badge/Hacker%20News-311-%23FF6600" alt="Hacker News"></a>
-  <a href="https://github.com/calcom/cal.com/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-AGPLv3-purple" alt="License"></a>
-  <a href="https://github.com/calcom/cal.com/pulse"><img src="https://img.shields.io/github/commit-activity/m/calcom/cal.com" alt="Commits-per-month"></a>
-  <a href="https://cal.com/pricing"><img src="https://img.shields.io/badge/Pricing-%2412%2Fmonth-brightgreen" alt="Pricing"></a>
-  <a href="https://jitsu.com?utm_source=github/calcom/cal.com"><img src="https://img.shields.io/badge/Metrics_tracked_by-JITSU-AA00FF?logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACKSURBVHgBrZDRCYAwDEQv6gCOoKO4hOCXI9QVnEZwiY5iF5GaVClaBNtioCSUvCR3tMJaxIfZgW4AGUoEPVwgPZoS0Dmgg3NBVDFNbMIsmYCak3J1jDk9iCQvsKJvkzr71N81Gj6vDT/LU2P6RhY63jcafk3YJEbgeZpiFyc/5HJKv8Ef273NSfABGbQfUZhnOSAAAAAASUVORK5CYII=" alt="Jitsu Tracked"></a>
-    <a href="https://hub.docker.com/r/calendso/calendso"><img src="https://img.shields.io/docker/pulls/calendso/calendso"></a>
-    <a href="https://twitter.com/calcom"><img src="https://img.shields.io/twitter/follow/calcom?style=social"></a>
-    <a href="https://calendso.slack.com/archives/C02BY67GMMW"><img src="https://img.shields.io/badge/translations-contribute-brightgreen" /></a>
-
+   <a href="https://github.com/calcom/cal.com/stargazers"><img src="https://img.shields.io/github/stars/calcom/cal.com" alt="Github Stars"></a>
+   <a href="https://news.ycombinator.com/item?id=26817795"><img src="https://img.shields.io/badge/Hacker%20News-311-%23FF6600" alt="Hacker News"></a>
+   <a href="https://github.com/calcom/cal.com/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-AGPLv3-purple" alt="License"></a>
+   <a href="https://github.com/calcom/cal.com/pulse"><img src="https://img.shields.io/github/commit-activity/m/calcom/cal.com" alt="Commits-per-month"></a>
+   <a href="https://cal.com/pricing"><img src="https://img.shields.io/badge/Pricing-%2412%2Fmonth-brightgreen" alt="Pricing"></a>
+   <a href="https://jitsu.com?utm_source=github/calcom/cal.com"><img src="https://img.shields.io/badge/Metrics_tracked_by-JITSU-AA00FF?logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACKSURBVHgBrZDRCYAwDEQv6gCOoKO4hOCXI9QVnEZwiY5iF5GaVClaBNtioCSUvCR3tMJaxIfZgW4AGUoEPVwgPZoS0Dmgg3NBVDFNbMIsmYCak3J1jDk9iCQvsKJvkzr71N81Gj6vDT/LU2P6RhY63jcafk3YJEbgeZpiFyc/5HJKv8Ef273NSfABGbQfUZhnOSAAAAAASUVORK5CYII=" alt="Jitsu Tracked"></a>
+   <img src="https://api.checklyhq.com/v1/badges/checks/5e048048-1b51-47ba-9209-60607507622e?responseTime=true" alt="Checkly Availability" />
+   <a href="https://hub.docker.com/r/calendso/calendso"><img src="https://img.shields.io/docker/pulls/calendso/calendso"></a>
+   <a href="https://twitter.com/calcom"><img src="https://img.shields.io/twitter/follow/calcom?style=flat"></a>
+   <a href="https://twitch.tv/calcomtv"><img src="https://img.shields.io/twitch/status/calcomtv?style=flat"></a>
+   <a href="https://calendso.slack.com/archives/C02BY67GMMW"><img src="https://img.shields.io/badge/translations-contribute-brightgreen" /></a>
+   <a href="https://www.contributor-covenant.org/version/1/4/code-of-conduct/ "><img src="https://img.shields.io/badge/Contributor%20Covenant-1.4-purple" /></a>
 </p>

 <!-- ABOUT THE PROJECT -->

 ## About The Project

-<img width="100%" alt="booking-screen" src="https://user-images.githubusercontent.com/8019099/134363898-4b29e18f-3e61-42b7-95bc-10891056249d.gif">
+<img width="100%" alt="booking-screen" src="https://user-images.githubusercontent.com/8019099/176390354-f1bc7069-0341-437a-9bb8-eb41092b4016.gif">

 # Scheduling infrastructure for absolutely everyone

@@ -80,7 +84,7 @@ To get a local copy up and running, please follow these simple steps.

 Here is what you need to be able to run Cal.

- Node.js (Version: >=14.x <15)
+- Node.js (Version: >=14.x <17)
 - PostgreSQL
 - Yarn _(recommended)_

@@ -90,7 +94,7 @@ Here is what you need to be able to run Cal.

 ### Setup

-1. Clone the repo into a public GitHub repository (to comply with AGPLv3. To clone in a private repository, [acquire a commercial license](https://cal.com/sales))
+1. Clone the repo into a public GitHub repository (or fork https://github.com/calcom/cal.com/fork). If you plan to distribute the code, keep the source code public to comply with [AGPLv3](https://github.com/calcom/cal.com/blob/main/LICENSE). To clone in a private repository, [acquire a commercial license](https://cal.com/sales))

   ```sh
   git clone https://github.com/calcom/cal.com.git
@@ -102,19 +106,14 @@ Here is what you need to be able to run Cal.
   cd cal.com
   ```

-1. Copy `apps/web/.env.example` to `apps/web/.env`
-
-   ```sh
-   cp apps/web/.env.example apps/web/.env
-   cp packages/prisma/.env.example packages/prisma/.env
-   ```
-
 1. Install packages with yarn

   ```sh
   yarn
   ```

+1. Use `openssl rand -base64 32` to generate a key and add it under `NEXTAUTH_SECRET` in the .env file.
+
 #### Quick start with `yarn dx`

 > - **Requires Docker and Docker Compose to be installed**
@@ -126,15 +125,15 @@ yarn dx

 #### Development tip

-> Add `NEXT_PUBLIC_DEBUG=1` anywhere in your `apps/web/.env` to get logging information for all the queries and mutations driven by **trpc**.
+> Add `NEXT_PUBLIC_DEBUG=1` anywhere in your `.env` to get logging information for all the queries and mutations driven by **trpc**.

 ```sh
-echo 'NEXT_PUBLIC_DEBUG=1' >> apps/web/.env
+echo 'NEXT_PUBLIC_DEBUG=1' >> .env
 ```

 #### Manual setup

-1. Configure environment variables in the .env file. Replace `<user>`, `<pass>`, `<db-host>`, `<db-port>` with their applicable values
+1. Configure environment variables in the `packages/prisma/.env` file. Replace `<user>`, `<pass>`, `<db-host>`, `<db-port>` with their applicable values

   ```
   DATABASE_URL='postgresql://<user>:<pass>@<db-host>:<db-port>'
@@ -168,7 +167,7 @@ echo 'NEXT_PUBLIC_DEBUG=1' >> apps/web/.env
   </details>

 1. Set a 32 character random string in your .env file for the `CALENDSO_ENCRYPTION_KEY` (You can use a command like `openssl rand -base64 24` to generate one).
-1. Set up the database using the Prisma schema (found in `apps/web/prisma/schema.prisma`)
+1. Set up the database using the Prisma schema (found in `packages/prisma/schema.prisma`)

   ```sh
   yarn workspace @calcom/prisma db-deploy
@@ -190,16 +189,16 @@ echo 'NEXT_PUBLIC_DEBUG=1' >> apps/web/.env

 1. Click on the `User` model to add a new user record.
 1. Fill out the fields `email`, `username`, `password`, and set `metadata` to empty `{}` (remembering to encrypt your password with [BCrypt](https://bcrypt-generator.com/)) and click `Save 1 Record` to create your first user.
-   > New users are set on a `TRIAL` plan by default. You might want to adjust this behavior to your needs in the `apps/web/prisma/schema.prisma` file.
+   > New users are set on a `TRIAL` plan by default. You might want to adjust this behavior to your needs in the `packages/prisma/schema.prisma` file.
 1. Open a browser to [http://localhost:3000](http://localhost:3000) and login with your just created, first user.

 ### E2E-Testing

+Be sure to set the environment variable `NEXTAUTH_URL` to the correct value. If you are running locally, as the documentation within `.env.example` mentions, the value should be `http://localhost:3000`.
+
 ```sh
-# In first terminal. Must run on port 3000.
-yarn dx
-# In second terminal
-yarn workspace @calcom/web test-e2e
+# In a terminal just run:
+yarn test-e2e

 # To open last HTML report run:
 yarn workspace @calcom/web playwright-report
@@ -213,7 +212,13 @@ yarn workspace @calcom/web playwright-report
   git pull
   ```

-2. Apply database migrations by running <b>one of</b> the following commands:
+1. Check if dependencies got added/updated/removed
+
+   ```sh
+   yarn
+   ```
+
+1. Apply database migrations by running <b>one of</b> the following commands:

   In a development environment, run:

@@ -229,16 +234,13 @@ yarn workspace @calcom/web playwright-report
   yarn workspace @calcom/prisma db-deploy
   ```

-3. Check the `.env.example` and compare it to your current `.env` file. In case there are any fields not present
-   in your current `.env`, add them there.
+1. Check for `.env` variables changes

-   For the current version, especially check if the variable `BASE_URL` is present and properly set in your environment, for example:
-
-   ```
-   BASE_URL='https://yourdomain.com'
+   ```sh
+   yarn predev
   ```

-4. Start the server. In a development environment, just do:
+1. Start the server. In a development environment, just do:

   ```sh
   yarn dev
@@ -251,7 +253,7 @@ yarn workspace @calcom/web playwright-report
   yarn start
   ```

-5. Enjoy the new version.
+1. Enjoy the new version.
 <!-- DEPLOYMENT -->

 ## Deployment
@@ -276,11 +278,17 @@ The Docker configuration can be found [in our docker repository](https://github.

 You can deploy Cal on [Railway](https://railway.app/) using the button above. The team at Railway also have a [detailed blog post](https://blog.railway.app/p/calendso) on deploying Cal on their platform.

+### Vercel
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fcalcom%2Fcal.com&env=DATABASE_URL,NEXT_PUBLIC_WEBAPP_URL,NEXTAUTH_SECRET,NEXTAUTH_URL,CALENDSO_ENCRYPTION_KEY,NEXT_PUBLIC_LICENSE_CONSENT,CALCOM_LICENSE_KEY&envDescription=See%20all%20available%20env%20vars&envLink=https%3A%2F%2Fgithub.com%2Fcalcom%2Fcal.com%2Fblob%2Fmain%2F.env.example&project-name=cal&repo-name=cal.com)
+
 <!-- ROADMAP -->

 ## Roadmap

-See the [roadmap project](https://github.com/orgs/calcom/projects/1) for a list of proposed features (and known issues). You can change the view to see planned tagged releases.
+<a href="https://cal.com/roadmap"><img src="https://user-images.githubusercontent.com/8019099/176388295-25081ca4-207e-4468-8079-37b195fa8e59.png" alt="Cal.com Roadmap" /></a>
+
+See the [roadmap project](https://cal.com/roadmap) for a list of proposed features (and known issues). You can change the view to see planned tagged releases.

 <!-- CONTRIBUTING -->

@@ -349,6 +357,7 @@ oauth_config:
    bot:
      - chat:write
      - commands
+      - chat:write.public 
 settings:
  interactivity:
    is_enabled: true
@@ -391,6 +400,55 @@ Next make sure you have your app running `yarn dx`. Then in the slack chat type
 4. Now paste the API key to your .env file into the `DAILY_API_KEY` field in your .env file.
 5. If you have the [Daily Scale Plan](https://www.daily.co/pricing) set the `DAILY_SCALE_PLAN` variable to `true` in order to use features like video recording.

+### Obtaining HubSpot Client ID and Secret
+
+1. Open [HubSpot Developer](https://developer.hubspot.com/) and sign into your account, or create a new one.
+2. From within the home of the Developer account page, go to "Manage apps".
+3. Click "Create app" button top right.
+4. Fill in any information you want in the "App info" tab
+5. Go to tab "Auth"
+6. Now copy the Client ID and Client Secret to your .env file into the `HUBSPOT_CLIENT_ID` and `HUBSPOT_CLIENT_SECRET` fields.
+7. Set the Redirect URL for OAuth `<Cal.com URL>/api/integrations/hubspotothercalendar/callback` replacing Cal.com URL with the URI at which your application runs.
+8. In the "Scopes" section at the bottom of the page, make sure you select "Read" and "Write" for scope called `crm.objects.contacts`
+9. Click the "Save" button at the bottom footer.
+10. You're good to go. Now you can see any booking in Cal.com created as a meeting in HubSpot for your contacts.
+
+### Obtaining Vital API Keys
+
+1. Open [Vital](https://tryvital.io/) and click Get API Keys.
+1. Create a team with the team name you desire
+1. Head to the configuration section on the sidebar of the dashboard
+1. Click on API keys and you'll find your sandbox `api_key`.
+1. Copy your `api_key` to `VITAL_API_KEY` in the .env.appStore file.
+1. Open [Vital Webhooks](https://app.tryvital.io/team/{team_id}/webhooks) and add `<CALCOM BASE URL>/api/integrations/vital/webhook` as webhook for connected applications.
+1. Select all events for the webhook you interested, e.g. `sleep_created`
+1. Copy the webhook secret (`sec...`) to `VITAL_WEBHOOK_SECRET` in the .env.appStore file.
+
+## Workflows
+
+### Setting up SendGrid for Email reminders
+
+1. Create a SendGrid account (https://signup.sendgrid.com/)
+2. Go to Settings -> API keys and create an API key
+3. Copy API key to your .env file into the SENDGRID_API_KEY field
+4. Go to Settings -> Sender Authentication and verify a single sender
+5. Copy the verified E-Mail to your .env file into the SENDGRID_EMAIL field
+
+### Setting up Twilio for SMS reminders
+
+1. Create a Twilio account (https://www.twilio.com/try-twilio)
+2. Click ‘Get a Twilio phone number’
+3. Copy Account SID to your .env file into the TWILIO_SID field
+4. Copy Auth Token to your .env file into the TWILIO_TOKEN field
+5. Create a messaging service (Develop -> Messaging -> Services)
+6. Choose any name for the messaging service
+7. Click 'Add Senders'
+8. Choose phone number as sender type
+9. Add the listed phone number
+10. Leave all other fields as they are
+11. Complete setup and click ‘View my new Messaging Service’
+12. Copy Messaging Service SID to your .env file into the TWILIO_MESSAGING_SID field
+
 <!-- LICENSE -->

 ## License
@@ -411,6 +469,6 @@ Special thanks to these amazing projects which help power Cal.com:
 - [Tailwind CSS](https://tailwindcss.com/)
 - [Prisma](https://prisma.io/)

-[<img src="https://jitsu.com/img/powered-by-jitsu.png?gh=true">](https://jitsu.com/?utm_source=cal.com-gihub)
+<a href="https://jitsu.com/?utm_source=cal.com-gihub"><img height="40px" src="https://jitsu.com/img/powered-by-jitsu.png?gh=true" alt="Jitsu.com"></a>

-Cal.com is an [open startup](https://jitsu.com) and [Jitsu](https://github.com/jitsucom/jitsu) (an open-source Segment alternative) helps us to track most of the usage metrics.
+Cal.com is an [open startup](https://cal.com/open) and [Jitsu](https://github.com/jitsucom/jitsu) (an open-source Segment alternative) helps us to track most of the usage metrics.
@@ -0,0 +1,39 @@
+# Security
+
+Contact: security@cal.com
+
+Based on [https://supabase.com/.well-known/security.txt](https://supabase.com/.well-known/security.txt)
+
+At Cal.com, we consider the security of our systems a top priority. But no matter how much effort we put into system security, there can still be vulnerabilities present.
+
+If you discover a vulnerability, we would like to know about it so we can take steps to address it as quickly as possible. We would like to ask you to help us better protect our clients and our systems.
+
+## Out of scope vulnerabilities:
+
+- Clickjacking on pages with no sensitive actions.
+- Unauthenticated/logout/login CSRF.
+- Attacks requiring MITM or physical access to a user's device.
+- Any activity that could lead to the disruption of our service (DoS).
+- Content spoofing and text injection issues without showing an attack vector/without being able to modify HTML/CSS.
+- Email spoofing
+- Missing DNSSEC, CAA, CSP headers
+- Lack of Secure or HTTP only flag on non-sensitive cookies
+- Deadlinks
+
+## Please do the following:
+
+- E-mail your findings to [security@cal.com](mailto:security@cal.com).
+- Do not run automated scanners on our infrastructure or dashboard. If you wish to do this, contact us and we will set up a sandbox for you.
+- Do not take advantage of the vulnerability or problem you have discovered, for example by downloading more data than necessary to demonstrate the vulnerability or deleting or modifying other people's data,
+- Do not reveal the problem to others until it has been resolved,
+- Do not use attacks on physical security, social engineering, distributed denial of service, spam or applications of third parties,
+- Do provide sufficient information to reproduce the problem, so we will be able to resolve it as quickly as possible. Usually, the IP address or the URL of the affected system and a description of the vulnerability will be sufficient, but complex vulnerabilities may require further explanation.
+
+## What we promise:
+
+- We will respond to your report within 3 business days with our evaluation of the report and an expected resolution date,
+- If you have followed the instructions above, we will not take any legal action against you in regard to the report,
+- We will handle your report with strict confidentiality, and not pass on your personal details to third parties without your permission,
+- We will keep you informed of the progress towards resolving the problem,
+- In the public information concerning the problem reported, we will give your name as the discoverer of the problem (unless you desire otherwise), and
+- We strive to resolve all problems as quickly as possible, and we would like to play an active role in the ultimate publication on the problem after it is resolved.
@@ -18,7 +18,11 @@
      "description": "Application Key for symmetric encryption and decryption. Must be 32 bytes for AES256 encryption algorithm.",
      "value": "secret"
    },
-    "JWT_SECRET": "secret"
+    "NEXTAUTH_SECRET": "secret",
+    "NEXTAUTH_URL": {
+      "description": "Replace HEROKU_APP_NAME with the name given to your app",
+      "value": "https://HEROKU_APP_NAME.herokuapp.com"
+    }
  },
  "scripts": {
    "postdeploy": "cd packages/prisma && npx prisma migrate deploy"
@@ -5,7 +5,7 @@
  </a>
  <a href="https://cal.com">Website</a>
  ·
-  <a href="https://github.com/calcom/docs/issues">Community Support</a>
+  <a href="https://github.com/calcom/cal.com/issues">Community Support</a>
 </div>

 # Cal.com Documentation
@@ -0,0 +1,21 @@
+function getAnchor(text) {
+  return text
+    .toLowerCase()
+    .replace(/[^a-z0-9 ]/g, "")
+    .replace(/[ ]/g, "-")
+    .replace(/ /g, "%20");
+}
+
+export default function Anchor({ as, children }) {
+  const anchor = getAnchor(children);
+  const link = `#${anchor}`;
+  const Component = as || "div";
+  return (
+    <Component id={anchor}>
+      <a href={link} className="anchor-link">
+        §
+      </a>
+      {children}
+    </Component>
+  );
+}
@@ -0,0 +1,33 @@
+import { useState, useEffect } from "react";
+
+// Define general type for useWindowSize hook, which includes width and height
+export interface Size {
+  width: number | undefined;
+  height: number | undefined;
+}
+// Hook from: https://usehooks.com/useWindowSize/
+export function useWindowSize(): Size {
+  // Initialize state with undefined width/height so server and client renders match
+  // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
+  const [windowSize, setWindowSize] = useState<Size>({
+    width: undefined,
+    height: undefined,
+  });
+  useEffect(() => {
+    // Handler to call on window resize
+    function handleResize() {
+      // Set window width/height to state
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      });
+    }
+    // Add event listener
+    window.addEventListener("resize", handleResize);
+    // Call handler right away so state gets updated with initial window size
+    handleResize();
+    // Remove event listener on cleanup
+    return () => window.removeEventListener("resize", handleResize);
+  }, []); // Empty array ensures that effect is only run on mount
+  return windowSize;
+}
@@ -1,6 +1,17 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 const withNextra = require("nextra")({
  theme: "nextra-theme-docs",
  themeConfig: "./theme.config.js",
  unstable_staticImage: true,
 });
-module.exports = withNextra();
+module.exports = withNextra({
+  async rewrites() {
+    return [
+      // This redirects requests recieved at /api to /public-api to workaround nextjs default use of /api.
+      {
+        source: "/api",
+        destination: "/public-api",
+      },
+    ];
+  },
+});
@@ -4,25 +4,27 @@
  "description": "",
  "main": "index.js",
  "scripts": {
+    "build": "next build",
    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf .next",
    "dev": "PORT=4000 next",
    "lint": "next lint",
-    "type-check": "tsc --pretty --noEmit",
+    "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",
-    "build": "next build"
+    "type-check": "tsc --pretty --noEmit"
  },
  "author": "Cal.com, Inc.",
  "license": "MIT",
  "dependencies": {
-    "next": "^12.1.0",
+    "iframe-resizer-react": "^1.1.0",
+    "next": "^12.2.0",
    "nextra": "^1.1.0",
    "nextra-theme-docs": "^1.2.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0"
  },
  "devDependencies": {
    "@calcom/config": "*",
-    "eslint": "^8.10.0"
+    "eslint": "^8.15.0"
  }
 }
@@ -12,6 +12,6 @@ This is also the home of our design system documentation and developer docs.

 If you don't already know what Cal.com is about, please head over to [our website](https://cal.com), where you can learn more about the product before venturing into the documentation.

-Want to help make these docs even better? This site is fully open source, and the source code is available on [GitHub](https://github.com/calcom/docs). You can also click the edit button at the bottom of any page to start editing the source code and start a pull request.
+Want to help make these docs even better? This site is fully open source, and the source code is available on [GitHub](https://github.com/calcom/cal.com/tree/main/apps/docs). You can also click the edit button at the bottom of any page to start editing the source code and start a pull request.

 <Bleed>![Telemedicine Example](https://cal.com/telemedicine-example.svg)</Bleed>
@@ -2,17 +2,18 @@
 title: Embed
 ---

+import Anchor from "../../components/Anchor"
+
 # Embed

 The Embed allows your website visitors to book a meeting with you directly from your website.

 ## Install on any website

-TODO: Mention possibility of installation through tag managers as well
+Install the following Vanilla JS Snippet to get embed to work on any website. After that you can <a href="#popular-ways-in-which-you-can-embed-on-your-website">choose any of the ways</a> to show your Cal Link embedded on your website.

- _Step-1._ Install the Vanilla JS Snippet
-
-  ```javascript
+```html
+<script>
  (function (C, A, L) {
    let p = function (a, ar) {
      a.q.push(ar);
@@ -40,14 +41,10 @@ TODO: Mention possibility of installation through tag managers as well
        }
        p(cal, ar);
      };
-  })(window, "https://cal.com/embed.js", "init");
-  ```
-
- _Step-2_. Initialize it
-
-  ```javascript
-  Cal("init)
-  ```
+    })(window, "https://cal.com/embed.js", "init");
+    Cal("init")
+  </script>
+```

 ## Install with a Framework

@@ -63,9 +60,9 @@ yarn add @calcom/embed-react

 You can use Vanilla JS Snippet to install

-## Popular ways in which you can embed on your website
+<Anchor as="H2">Popular ways in which you can embed on your website</Anchor>

-Assuming that you have followed the steps of installing and initializing the snippet, you can add show the embed in following ways:
+Assuming that you have followed the steps of installing and initializing the snippet, you can show the embed in following ways:

 ### Inline

@@ -74,20 +71,29 @@ Show the embed inline inside a container element. It would take the width and he
 <details>
  <summary>_Vanilla JS_</summary>

-```javascript
-Cal("inline", {
-  elementOrSelector: "Your Embed Container Selector Path", // You can also provide an element directly
-  calLink: "jane", // The link that you want to embed. It would open https://cal.com/jane in embed
-  config: {
-    name: "John Doe", // Prefill Name
-    email: "johndoe@gmail.com", // Prefill Email
-    notes: "Test Meeting", // Prefill Notes
-    guests: ["janedoe@gmail.com", "test@gmail.com"], // Prefill Guests
-    theme: "dark", // "dark" or "light" theme
-  },
-});
-```
+```html
+<script>
+  Cal("inline", {
+    elementOrSelector: "Your Embed Container Selector Path", // You can also provide an element directly
+    calLink: "jane", // The link that you want to embed. It would open https://cal.com/jane in embed
+    config: {
+      name: "John Doe", // Prefill Name
+      email: "johndoe@gmail.com", // Prefill Email
+      notes: "Test Meeting", // Prefill Notes
+      guests: ["janedoe@gmail.com", "test@gmail.com"], // Prefill Guests
+      theme: "dark", // "dark" or "light" theme
+    },
+  });
+</script>

+*Sample sandbox*
+```
+<iframe src="https://codesandbox.io/embed/vanilla-js-inline-embed-r27n67?fontsize=14&hidenavigation=1&theme=dark"
+     style={{width:"100%", height:"500px", border:0, borderRadius: "4px", overflow:"hidden"}}
+     title="Cal Component - Embed Inline Demo[React][TypeScript]"
+     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+   ></iframe>
 </details>

 ####
@@ -112,6 +118,14 @@ const MyComponent = () => (
 );
 ```

+*Sample sandbox*
+
+<iframe src="https://codesandbox.io/embed/cal-component-embed-inline-demo-react-typescript-d1zlcn?fontsize=14&hidenavigation=1&theme=dark"
+     style={{width:"100%", height:"500px", border:0, borderRadius: "4px", overflow:"hidden"}}
+     title="Cal Component - Embed Inline Demo[React][TypeScript]"
+     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+   ></iframe>
 </details>

 ### Popup on any existing element
@@ -124,9 +138,16 @@ To show the embed as a popup on clicking an element, add `data-cal-link` attribu

 To show the embed as a popup on clicking an element, simply add `data-cal-link` attribute to the element.

+*Sample sandbox*
+<iframe src="https://codesandbox.io/embed/popup-on-click-of-an-existing-element-y9lcuo?fontsize=14&hidenavigation=1&theme=dark"
+     style={{width:"100%", height:"500px", border:0, borderRadius: "4px", overflow:"hidden"}}
+     title="Cal Component - Embed Inline Demo[React][TypeScript]"
+     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+   ></iframe>
+
  <button data-cal-link="jane" data-cal-config="A valid config JSON"></button>
 </details>
-
 <details>
  <summary>React</summary>
  ```jsx
@@ -135,11 +156,36 @@ To show the embed as a popup on clicking an element, simply add `data-cal-link`
    const MyComponent = ()=> {
      return <button data-cal-link="jane" data-cal-config='A valid config JSON'></button>
    }
+```

-````
+*Sample sandbox*
+<iframe src="https://codesandbox.io/embed/embed-popup-on-click-of-an-existing-element-demo-react-sc967e?fontsize=14&hidenavigation=1&theme=dark"
+     style={{width:"100%", height:"500px", border:0, borderRadius: "4px", overflow:"hidden"}}
+     title="Cal Component - Embed Inline Demo[React][TypeScript]"
+     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+   ></iframe>

 </details>
-### Full Screen
+
+### Floating pop-up button
+
+```html
+<script>
+  Cal("floatingButton", {
+    // The link that you want to embed. It would open https://cal.com/jane in embed
+    calLink: "jane",
+  });
+</script>
+```
+
+*Sample sandbox*
+<iframe src="https://codesandbox.io/embed/embed-floating-button-popup-all-websites-cg7pru?fontsize=14&hidenavigation=1&theme=dark"
+     style={{width:"100%", height:"500px", border:0, borderRadius: "4px", overflow:"hidden"}}
+     title="Cal Component - Embed Inline Demo[React][TypeScript]"
+     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+   ></iframe>

 ## Supported Instructions

@@ -149,8 +195,10 @@ Consider an instruction as a function with that name and that would be called wi

 Appends embed inline as the child of the element.

-```javascript
+```html
+<script>
 Cal("inline", { elementOrSelector, calLink });
+</script>
 ````

 - `elementOrSelector` - Give it either a valid CSS selector or an HTMLElement instance directly
@@ -161,8 +209,10 @@ Cal("inline", { elementOrSelector, calLink });

 Configure UI for embed. Make it look part of your webpage.

-```javascript
+```html
+<script>
 Cal("inline", { styles });
+</script>
 ```

 - `styles` - It supports styling for `body` and `eventTypeListItem`. Right now we support just background on these two.
@@ -173,15 +223,18 @@ Usage:

 If you want to open cal link on some action. Make it pop open instantly by preloading it.

-```javascript
+```html
+<script>
 Cal("preload", { calLink });
+</script>
 ```

 - `calLink` - Cal Link that you want to embed e.g. john. Just give the username. No need to give the full URL [https://cal.com/john]()

 ## Actions
-You can listen to an action that occurs in embedded cal link as follows. You can think of them as DOM events. We are avoiding the term events to not confuse it with Cal Events.
-```javascript
+You can listen to an action that occurs in embedded cal link as follows. You can think of them as DOM events. We are avoiding the term "events" to not confuse it with Cal Events.
+```html
+<script>
 Cal("on", {
  action: "ANY_ACTION_NAME",
  callback: (e)=>{
@@ -191,11 +244,12 @@ Cal("on", {
    const {data, type, namespace} = e.detail;
  }
 })
+</script>
 ```

 Following are the list of supported actions.
 - 
-| action               | description                                                                                                                        | properties                                                                                                                                                                                                                                                                             |
+| Action               | Description                                                                                                                        | Properties                                                                                                                                                                                                                                                                             |
 |----------------------|------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
 | eventTypeSelected    | When user chooses an event-type from the listing.                                                                                  | eventType:object // Event Type that has been selected"                                                                                                                                                                                                                               |
 | bookingSuccessful    | When the booking is successfully done. It might not be confirmed.                                                                  | confirmed: boolean; //Whether confirmation from organizer is pending or not  <br/><br/>eventType: "Object for Event Type that has been booked";  <br/><br/>date: string; // Date of Event  <br/><br/>duration: number; //Duration of booked Event  <br/><br/>organizer: object //Organizer details like name, timezone, email  |
@@ -25,7 +25,7 @@ To remove a product from your account that isn't listed in your Google Account,
 6. In the third page (Test Users), add the Google account(s) you'll using. Make sure the details are correct on the last page of the wizard and your consent screen will be configured.
 7. Now select [Credentials](https://console.cloud.google.com/apis/credentials) from the side pane and then select Create Credentials. Select the OAuth Client ID option.
 8. Select Web Application as the Application Type.
-9. Under Authorized redirect URI's, select Add URI and then add the URI `<CALENDSO URL>/api/integrations/googlecalendar/callback` replacing CALENDSO URL with the URI at which your application runs.
+9. Under Authorized redirect URI's, select Add URI and then add the two URIs `<CALENDSO URL>/api/integrations/googlecalendar/callback` and `<CALENDSO URL>/api/auth/callback/google` replacing CALENDSO URL with the URI at which your application runs.
 10. The key will be created and you will be redirected back to the Credentials page. Select the newly generated client ID under OAuth 2.0 Client IDs.
 11. Select Download JSON. Copy the contents of this file and paste the entire JSON string in the .env file as the value for GOOGLE_API_CREDENTIALS key.

@@ -0,0 +1,21 @@
+---
+Title: Slack
+---
+
+# Slack
+
+## Connecting 
+Connecting the bot is easy - If you are a workspace admin, the install button will add the bot to the workspace and also authorize your account with the bot. If you are a normal user, the install button will connect your Slack account with Cal.com. This will allow you to perform commands in Slack.
+
+## Commands
+`/today` - This command will display all meetings you have in your Cal.com profile for the current day. This will send a hidden message (not visible to anyone other than you) to the channel you issued the command in.
+
+`/create-event` - It will display a modal allowing you to simply create a meeting invite with anyone in Slack. Success/Error information will be displayed in a private direct message from the bot.
+
+`/links` - This command will post all your Cal.com meeting links into the current Slack channel you are in. **Note**: The bot needs to have permission to talk in the channel you are sending the message in. Otherwise, you won't be able to send your links. 
+
+As this is the beggining stage of our Slack integration, we plan on adding more commands in the future that will further improve your Cal.com experience.
+
+## Self-Hosted
+If you are using our self-hosted version, please refer to our documentation in 
+[cal.com/README.md](https://github.com/calcom/cal.com/blob/main/README.md#obtaining-slack-client-id-and-secret-and-signing-secret)
@@ -6,6 +6,7 @@
  "event-types": "Event Types",
  "teams": "Teams",
  "integrations": "Integrations",
+  "public-api": "API",
  "webhooks": "Webhooks",
  "settings": "Settings",
  "import": "Import",
@@ -0,0 +1,20 @@
+import Bleed from 'nextra-theme-docs/bleed'
+import Head from "next/head";
+import IframeResizer from "iframe-resizer-react";
+import {useWindowSize} from "../lib/useWindowSize";
+
+
+<Bleed full>
+  <Head><title>Public API | Cal.com</title></Head>
+  <IframeResizer
+    autoResize
+    src={process.env.NEXT_PUBLIC_SWAGGER_DOCS_URL || "https://developer.cal.com"}
+    frameBorder="0"
+    style={{
+      width: useWindowSize().width > 768 ? "calc(100vw - 16rem)": "100vw",
+      minHeight: useWindowSize().width > 768 ? "100vh" : "200vh",
+      height: "auto",
+      border: 0,
+    }}
+  />
+</Bleed>
@@ -18,7 +18,7 @@ You need a PostgresDB database hosted somewhere. [Heroku](https://www.heroku.com
   git clone https://github.com/<your-fork>/cal.com.git
   ```

-2. Copy the `.env.example` file in `apps/web`, rename it to `.env` and fill it with your settings ([See manual setup](https://github.com/calcom/cal.com#manual) and [Obtaining the Google API Credentials](https://github.com/calcom/cal.com#obtaining-the-google-api-credentials))
+2. Copy the `.env.example` file in `apps/web`, rename it to `.env` and fill it with your settings ([See manual setup](https://github.com/calcom/cal.com#manual-setup) and [Obtaining the Google API Credentials](https://github.com/calcom/cal.com#obtaining-the-google-api-credentials))

 3. Install packages with `yarn`

@@ -1,3 +1,5 @@
+import { SEO_IMG_DEFAULT, DOCS_URL } from "@calcom/lib/constants";
+
 const themeConfig = {
  github: "https://github.com/calcom/cal.com",
  docsRepositoryBase: "https://github.com/calcom/cal.com/blob/main/apps/docs/pages",
@@ -18,11 +20,11 @@ const themeConfig = {
        content="Explore advice and explanations for all of our features, and discover new tips and tricks to get the most out of your subscription."
      />
      <meta name="twitter:card" content="summary_large_image" />
-      <meta name="twitter:image" content="https://cal.com/og-image.png" />
+      <meta name="twitter:image" content={SEO_IMG_DEFAULT} />
      <meta name="twitter:site:domain" content="docs.cal.com" />
-      <meta name="twitter:url" content="https://docs.cal.com" />
+      <meta name="twitter:url" content={DOCS_URL} />
      <meta name="og:title" content="Cal.com Documentation" />
-      <meta name="og:image" content="https://cal.com/og-image.png" />
+      <meta name="og:image" content={SEO_IMG_DEFAULT} />
      <meta name="apple-mobile-web-app-title" content="Cal.com Docs" />

      <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
@@ -0,0 +1,37 @@
+# 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
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+
+storybook-static/
@@ -0,0 +1,57 @@
+const path = require("path");
+
+module.exports = {
+  stories: ["../stories/**/*.stories.mdx", "../stories/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    "storybook-addon-designs",
+    "@storybook/addon-a11y",
+    "storybook-addon-next",
+  ],
+  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}}
+     */
+    config.resolve.fallback = {
+      fs: false,
+      assert: false,
+      buffer: false,
+      console: false,
+      constants: false,
+      crypto: false,
+      domain: false,
+      events: false,
+      http: false,
+      https: false,
+      os: false,
+      path: false,
+      punycode: false,
+      process: false,
+      querystring: false,
+      stream: false,
+      string_decoder: false,
+      sys: false,
+      timers: false,
+      tty: false,
+      url: false,
+      util: false,
+      vm: false,
+      zlib: false,
+    };
+
+    return config;
+  },
+};
@@ -0,0 +1,8 @@
+<script>
+  window.isEmbed = ()=> {
+    return location.search.includes("embed=")
+  }
+</script>
+<style>
+  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap');
+</style>
@@ -0,0 +1,24 @@
+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,
+  },
+};
@@ -0,0 +1,21 @@
+# 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
+```
@@ -0,0 +1,5 @@
+/// <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.
@@ -0,0 +1,7 @@
+const withTM = require("next-transpile-modules")(["@calcom/dayjs", "@calcom/ui"]);
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+};
+
+module.exports = withTM(nextConfig);
@@ -0,0 +1,63 @@
+{
+  "name": "@calcom/storybook",
+  "version": "0.1.0",
+  "private": true,
+  "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"
+  },
+  "dependencies": {
+    "@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"
+  },
+  "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-loader": "^8.2.5",
+    "chromatic": "^6.6.4",
+    "eslint": "^8.15.0",
+    "postcss": "^8.4.13",
+    "postcss-loader": "^7.0.0",
+    "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"
+}
@@ -0,0 +1,9 @@
+import type { AppProps } from "next/app";
+
+import "../styles/globals.css";
+
+function MyApp({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />;
+}
+
+export default MyApp;
@@ -0,0 +1,63 @@
+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;
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
@@ -0,0 +1,26 @@
+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 />
+    </>
+  );
+};
@@ -0,0 +1,60 @@
+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} />
+    </>
+  );
+};
@@ -0,0 +1,58 @@
+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>
+);
@@ -0,0 +1,46 @@
+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")}
+    />
+  );
+};
@@ -0,0 +1,22 @@
+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",
+  },
+};
@@ -0,0 +1,95 @@
+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",
+};
@@ -0,0 +1,31 @@
+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>
+);
@@ -0,0 +1,31 @@
+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 />
+  </>
+);
@@ -0,0 +1,208 @@
+import { useState } from "react";
+
+import ColorPicker from "@calcom/ui/v2/colorpicker";
+
+// eslint-disable-next-line import/no-anonymous-default-export
+export default {
+  title: "Colors",
+  component: ColorPicker,
+};
+const COLORS = {
+  brand: {
+    50: "#f3f3f4",
+    100: "#e7e8e9",
+    200: "#c4c5c9",
+    300: "#a0a3a9",
+    400: "#585d68",
+    500: "#111827", // Brand color
+    600: "#0f1623",
+    700: "#0d121d",
+    800: "#0a0e17",
+    900: "#080c13",
+  },
+  gray: {
+    50: "#F8F8F8",
+    100: "#F5F5F5",
+    200: "#E1E1E1",
+    300: "#CFCFCF",
+    400: "#ACACAC",
+    500: "#888888",
+    600: "#494949",
+    700: "#3E3E3E",
+    800: "#313131",
+    900: "#292929",
+  },
+  neutral: {
+    50: "#F8F8F8",
+    100: "#F5F5F5",
+    200: "#E1E1E1",
+    300: "#CFCFCF",
+    400: "#ACACAC",
+    500: "#888888",
+    600: "#494949",
+    700: "#3E3E3E",
+    800: "#313131",
+    900: "#292929",
+  },
+  primary: {
+    50: "#F4F4F4",
+    100: "#E8E8E8",
+    200: "#C6C6C6",
+    300: "#A3A3A3",
+    400: "#5F5F5F",
+    500: "#1A1A1A",
+    600: "#171717",
+    700: "#141414",
+    800: "#101010",
+    900: "#0D0D0D",
+  },
+  secondary: {
+    50: "#F5F8F7",
+    100: "#EBF0F0",
+    200: "#CDDAD9",
+    300: "#AEC4C2",
+    400: "#729894",
+    500: "#356C66",
+    600: "#30615C",
+    700: "#28514D",
+    800: "#20413D",
+    900: "#223B41",
+  },
+  red: {
+    50: "#FEF2F2",
+    100: "#FEE2E2",
+    200: "#FECACA",
+    300: "#FCA5A5",
+    400: "#F87171",
+    500: "#EF4444",
+    600: "#DC2626",
+    700: "#B91C1C",
+    800: "#991B1B",
+    900: "#7F1D1D",
+  },
+  orange: {
+    50: "#FFF7ED",
+    100: "#FFEDD5",
+    200: "#FED7AA",
+    300: "#FDBA74",
+    400: "#FB923C",
+    500: "#F97316",
+    600: "#EA580C",
+    700: "#C2410C",
+    800: "#9A3412",
+    900: "#7C2D12",
+  },
+  green: {
+    50: "#ECFDF5",
+    100: "#D1FAE5",
+    200: "#A7F3D0",
+    300: "#6EE7B7",
+    400: "#34D399",
+    500: "#10B981",
+    600: "#059669",
+    700: "#047857",
+    800: "#065F46",
+    900: "#064E3B",
+  },
+};
+export const All = () => {
+  return (
+    <div className="w-full">
+      <div>
+        {Object.keys(COLORS.brand).map((color) => (
+          <div className="flex flex-row space-x-2" key={COLORS.brand[color]}>
+            <div className="w-full">Brand</div>
+            <div className="w-full">{color}</div>
+            <div className="w-full">{COLORS.brand[color]}</div>
+            <div
+              style={{
+                backgroundColor: COLORS.brand[color],
+                width: "100%",
+                height: "32px",
+              }}
+            />
+          </div>
+        ))}
+        <hr />
+        {Object.keys(COLORS.gray).map((color) => (
+          <div className="flex flex-row space-x-2" key={COLORS.gray[color]}>
+            <div className="w-full">gray</div>
+            <div className="w-full">{color}</div>
+            <div className="w-full">{COLORS.gray[color]}</div>
+            <div
+              style={{
+                backgroundColor: COLORS.gray[color],
+                width: "100%",
+                height: "32px",
+              }}
+            />
+          </div>
+        ))}
+        <hr />
+        {Object.keys(COLORS.secondary).map((color) => (
+          <div className="flex flex-row space-x-2" key={COLORS.secondary[color]}>
+            <div className="w-full">secondary</div>
+            <div className="w-full">{color}</div>
+            <div className="w-full">{COLORS.secondary[color]}</div>
+            <div
+              style={{
+                backgroundColor: COLORS.secondary[color],
+                width: "100%",
+                height: "32px",
+              }}
+            />
+          </div>
+        ))}
+        <hr />
+        {Object.keys(COLORS.red).map((color) => (
+          <div className="flex flex-row space-x-2" key={COLORS.red[color]}>
+            <div className="w-full">red</div>
+            <div className="w-full">{color}</div>
+            <div className="w-full">{COLORS.red[color]}</div>
+            <div
+              style={{
+                backgroundColor: COLORS.red[color],
+                width: "100%",
+                height: "32px",
+              }}
+            />
+          </div>
+        ))}
+        <hr />
+        {Object.keys(COLORS.orange).map((color) => (
+          <div className="flex flex-row space-x-2" key={COLORS.orange[color]}>
+            <div className="w-full">orange</div>
+            <div className="w-full">{color}</div>
+            <div className="w-full">{COLORS.orange[color]}</div>
+            <div
+              style={{
+                backgroundColor: COLORS.orange[color],
+                width: "100%",
+                height: "32px",
+              }}
+            />
+          </div>
+        ))}
+        <hr />
+        {Object.keys(COLORS.green).map((color) => (
+          <div className="flex flex-row space-x-2" key={COLORS.green[color]}>
+            <div className="w-full">green</div>
+            <div className="w-full">{color}</div>
+            <div className="w-full">{COLORS.green[color]}</div>
+            <div
+              style={{
+                backgroundColor: COLORS.green[color],
+                width: "100%",
+                height: "32px",
+              }}
+            />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+export const ColorPickerComponent = () => {
+  const [color, setColor] = useState("3B82F6");
+  return <ColorPicker defaultValue={color} onChange={(val) => setColor(val)} />;
+};
@@ -0,0 +1,17 @@
+import { useState } from "react";
+
+import DatePicker from "@calcom/ui/v2/booker/DatePicker";
+
+export default {
+  title: "Datepicker",
+  component: DatePicker,
+};
+
+export const Default = () => {
+  const [selected, setSelected] = useState<Date | undefined>(undefined);
+  return (
+    <div style={{ width: "455px" }}>
+      <DatePicker selected={selected} onChange={setSelected} locale="en" />
+    </div>
+  );
+};
@@ -0,0 +1,26 @@
+import { ComponentMeta } from "@storybook/react";
+import { Bell } from "react-feather";
+
+import { EmptyScreen as EmptyScreenPattern } from "@calcom/ui/v2";
+
+export default {
+  title: "pattern/Empty Screen",
+  component: EmptyScreenPattern,
+  decorators: [
+    (Story) => (
+      <div className="flex items-center justify-center">
+        <Story />
+      </div>
+    ),
+  ],
+} as ComponentMeta<typeof EmptyScreenPattern>;
+
+export const EmptyScreenS = () => (
+  <EmptyScreenPattern
+    Icon={Bell}
+    headline="Empty State Header"
+    description="Ullamco dolor nulla sint nulla occaecat aliquip id elit fugiat et excepteur magna. Nisi tempor anim do tempor irure fugiat ad occaecat. Mollit ea eiusmod pariatur sunt deserunt eu eiusmod. Sit reprehenderit cupidatat consequat commodo in aliqua ea et. Et quis sit enim proident dolor mollit consectetur tempor dolore reprehenderit consequat adipisicing reprehenderit officia. Sint eu sunt fugiat laborum Lorem irure aute nulla et. Do non in enim ipsum ea."
+    buttonText="Veniam ut ipsum"
+    buttonOnClick={() => console.log("Button Clicked")}
+  />
+);
@@ -0,0 +1,27 @@
+import { ComponentMeta } from "@storybook/react";
+import { useState } from "react";
+
+import { FormStep } from "@calcom/ui/v2";
+
+export default {
+  title: "Form Step",
+  component: FormStep,
+} as ComponentMeta<typeof FormStep>;
+
+export const Default = () => {
+  const STEPS = 4;
+  const [currentStep, setCurrentStep] = useState(1);
+  return (
+    <div className="flex flex-col items-center justify-center space-y-14 p-20">
+      <div className="w-1/2">
+        <FormStep steps={STEPS} currentStep={currentStep} />
+        <div className="flex space-x-2 pt-4">
+          <button onClick={() => currentStep - 1 > 0 && setCurrentStep((old) => old - 1)}>Previous</button>
+          <button onClick={() => currentStep + 1 < STEPS + 1 && setCurrentStep((old) => old + 1)}>
+            Next
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
@@ -0,0 +1,68 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Copy } from "react-feather";
+
+import DatePicker from "@calcom/ui/v2/form/DatePicker";
+import { TextAreaField, TextField } from "@calcom/ui/v2/form/fields";
+
+export default {
+  title: "Inputs",
+  component: TextField,
+  argTypes: {
+    disabled: {
+      options: [false, true],
+    },
+  },
+} as ComponentMeta<typeof TextField>;
+
+const TextInputTemplate: ComponentStory<typeof TextField> = (args) => <TextField {...args} />;
+// name="demo" label="Demo Label" hint="Hint text"
+export const TextInput = TextInputTemplate.bind({});
+TextInput.args = {
+  name: "demo",
+  label: "Demo Label",
+  hint: "Hint Text",
+  disabled: false,
+};
+
+export const TextInputPrefix = TextInputTemplate.bind({});
+TextInputPrefix.args = {
+  name: "demo",
+  label: "Demo Label",
+  hint: "Hint Text",
+  addOnLeading: "https://",
+  disabled: false,
+};
+
+export const TextInputSuffix = TextInputTemplate.bind({});
+TextInputSuffix.args = {
+  name: "demo",
+  label: "Demo Label",
+  hint: "Hint Text",
+  addOnSuffix: "Minutes",
+  disabled: false,
+};
+
+export const TextInputPrefixIcon = TextInputTemplate.bind({});
+TextInputPrefixIcon.args = {
+  name: "demo",
+  label: "Demo Label",
+  hint: "Hint Text",
+  addOnFilled: false,
+  addOnSuffix: <Copy />,
+  disabled: false,
+};
+export const TextInputSuffixIcon = TextInputTemplate.bind({});
+TextInputSuffixIcon.args = {
+  name: "demo",
+  label: "Demo Label",
+  hint: "Hint Text",
+  addOnFilled: false,
+  addOnLeading: <Copy />,
+  disabled: false,
+};
+
+export const TextAreaInput: ComponentStory<typeof TextAreaField> = () => (
+  <TextAreaField name="Text-area-input" label="Text Area" />
+);
+
+export const DatePickerInput: ComponentStory<typeof DatePicker> = () => <DatePicker date={new Date()} />;
@@ -0,0 +1,52 @@
+import { useState } from "react";
+import { Info } from "react-feather";
+
+import { Button } from "@calcom/ui/v2";
+import { Dialog, DialogContent, DialogTrigger } from "@calcom/ui/v2/Dialog";
+import { TextField } from "@calcom/ui/v2/form/fields";
+
+export default {
+  title: "pattern/Modal",
+  component: Dialog,
+};
+
+export const Creation = () => {
+  const [open, setOpen] = useState(false);
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button onClick={() => setOpen(true)}>Open Modal</Button>
+      </DialogTrigger>
+      <DialogContent
+        title="Header"
+        description="Optional Description"
+        type="creation"
+        actionText="Create"
+        actionOnClick={() => setOpen(false)}>
+        <TextField name="Label" />
+        <TextField name="Label" />
+        <TextField name="Label" />
+        <TextField name="Label" />
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export const Confirmation = () => {
+  const [open, setOpen] = useState(false);
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button>Open Modal</Button>
+      </DialogTrigger>
+      <DialogContent
+        title="Header"
+        description="Optional Description"
+        type="confirmation"
+        actionText="Confirm"
+        Icon={Info}
+        actionOnClick={() => setOpen(false)}
+      />
+    </Dialog>
+  );
+};
@@ -0,0 +1,25 @@
+import { ComponentMeta } from "@storybook/react";
+import { Toaster } from "react-hot-toast";
+
+import { Button } from "@calcom/ui/v2";
+import showToast from "@calcom/ui/v2/notfications";
+
+export default {
+  title: "Notifcations-Toasts",
+  decorators: [
+    (Story) => (
+      <>
+        <Story />
+        <Toaster />
+      </>
+    ),
+  ],
+} as ComponentMeta<typeof All>; // We have to fake this type as the story for this component isn't really a component.
+
+export const All = () => (
+  <div className="flex space-x-2">
+    <Button onClick={() => showToast("This is a Neutral toast", "warning")}>Neutral</Button>
+    <Button onClick={() => showToast("This is a Success toast", "success")}>Success</Button>
+    <Button onClick={() => showToast("This is a Error toast", "error")}>Error</Button>
+  </div>
+);
@@ -0,0 +1,52 @@
+import { ComponentMeta } from "@storybook/react";
+import { Search } from "react-feather";
+
+import { Button, PageHeader } from "@calcom/ui/v2";
+import { TextField } from "@calcom/ui/v2/form";
+
+export default {
+  title: "pattern/Page Header",
+  component: PageHeader,
+  decorators: [
+    (Story) => (
+      <div className="">
+        <Story />
+      </div>
+    ),
+  ],
+} as ComponentMeta<typeof PageHeader>;
+
+export const Default = () => (
+  <PageHeader title="Title" description="Some description about the header above" />
+);
+
+export const ButtonRight = () => (
+  <PageHeader
+    title="Title"
+    description="Some description about the header above"
+    rightAlignedComponent={<Button>Button Text</Button>}
+  />
+);
+export const ComingSoon = () => (
+  <PageHeader
+    title="Title"
+    description="Some description about the header above"
+    badgeText="Coming Soon"
+    badgeVariant="gray"
+  />
+);
+export const SearchInstalledApps = () => (
+  <PageHeader
+    title="Search booking"
+    description="See upcoming and past events booking through your event type link"
+    rightAlignedComponent={
+      <TextField
+        containerClassName="h-9 max-h-9"
+        addOnLeading={<Search />}
+        name="search"
+        labelSrOnly
+        placeholder="WIP"
+      />
+    }
+  />
+);
@@ -0,0 +1,19 @@
+import * as Radio from "@calcom/ui/v2/form/radio-area/Radio";
+import { RadioField } from "@calcom/ui/v2/form/radio-area/Radio";
+
+export default {
+  title: "Radio",
+  component: RadioField,
+};
+
+export const RadioGroupDemo = () => {
+  return (
+    <form>
+      <Radio.Group aria-label="View density" defaultValue="default">
+        <RadioField label="Default" id="r1" value="1" />
+        <RadioField label="Next" id="r2" value="2" />
+        <RadioField label="Disabled" id="r3" disabled value="1" />
+      </Radio.Group>
+    </form>
+  );
+};
@@ -0,0 +1,10 @@
+import { ComponentMeta } from "@storybook/react";
+
+import { Select } from "@calcom/ui/v2";
+
+export default {
+  title: "Form/Select",
+  component: Select,
+} as ComponentMeta<typeof Select>;
+
+export const Single = () => <Select items={[{ value: "Test Test" }]} />;
@@ -0,0 +1,15 @@
+import { ComponentMeta } from "@storybook/react";
+
+import { Switch } from "@calcom/ui/v2";
+
+export default {
+  title: "Switch",
+  component: Switch,
+} as ComponentMeta<typeof Switch>;
+
+export const All = () => (
+  <div className="flex flex-col space-y-2">
+    <p>Checked works in app but storybook doesnt like it</p>
+    <Switch label="Default" />
+  </div>
+);
@@ -0,0 +1,67 @@
+// Disabling until we figure out what is happening with the RouterMock.
+import { ComponentMeta } from "@storybook/react";
+import { Link } from "react-feather";
+
+import { VerticalTabItem } from "@calcom/ui/v2";
+
+export default {
+  title: "VerticalTabItem",
+  component: VerticalTabItem,
+} as ComponentMeta<typeof VerticalTabItem>;
+
+const TabItemProps = {
+  name: "Event Setup",
+  icon: Link,
+  href: "/settings/event",
+  info: "60 mins, Zoom",
+};
+
+// export const Default = () => (
+//   <div className="h-20 w-full bg-gray-100 p-4">
+//     <VerticalTabItem {...TabItemProps}></VerticalTabItem>
+//   </div>
+// );
+// export const Active = () => (
+//   <div className="h-20 w-full bg-gray-100 p-4">
+//     <VerticalTabItem {...TabItemProps}></VerticalTabItem>
+//   </div>
+// );
+
+// Mocking next router to show active state
+// Active.parameters = {
+//   nextRouter: {
+//     path: "/settings/[tab]",
+//     asPath: "/settings/event",
+//   },
+// };
+
+// export const Disabled = () => (
+//   <div className="h-20 w-full bg-gray-100 p-4">
+//     <VerticalTabItem {...TabItemProps} disabled></VerticalTabItem>
+//   </div>
+// );
+
+// export const NoIconNoInfo = () => (
+//   <div className="h-20 w-full bg-gray-100 p-4">
+//     <VerticalTabItem name="Event Setup" href="/settings/event"></VerticalTabItem>
+//   </div>
+// );
+
+// export const IconNoInfo = () => (
+//   <div className="h-20 w-full bg-gray-100 p-4">
+//     <VerticalTabItem name="Event Setup" href="/settings/event" icon={Link}></VerticalTabItem>
+//   </div>
+// );
+
+// export const IconNoInfoActive = () => (
+//   <div className="h-20 w-full bg-gray-100 p-4">
+//     <VerticalTabItem name="Event Setup" href="/settings/events" icon={Link}></VerticalTabItem>
+//   </div>
+// );
+
+// IconNoInfoActive.paramaters = {
+//   nextRouter: {
+//     path: "/settings/[tab]",
+//     asPath: "/settings/events",
+//   },
+// };
@@ -0,0 +1,85 @@
+// Disabling until we figure out what is happening with the RouterMock.
+import { ComponentMeta } from "@storybook/react";
+import { Calendar, Clock, Grid, Link, RefreshCw, User, Users } from "react-feather";
+
+import { VerticalTabs } from "@calcom/ui/v2/navigation/tabs";
+
+export default {
+  title: "Vertical Tabs",
+  component: VerticalTabs,
+} as ComponentMeta<typeof VerticalTabs>;
+
+const VerticalTabsPropsDefault = [
+  {
+    name: "Security",
+    icon: Link,
+    href: "/security",
+  },
+  {
+    name: "Profile",
+    icon: User,
+    href: "/profile",
+  },
+  {
+    name: "Calendar Sync",
+    icon: RefreshCw,
+    href: "/cal-sync",
+  },
+  {
+    name: "Teams",
+    icon: Users,
+    href: "/Teams",
+  },
+];
+
+export const Default = () => (
+  <div className="w-full p-4" style={{ backgroundColor: "#F9FAFB" }}>
+    <VerticalTabs tabs={VerticalTabsPropsDefault} />
+  </div>
+);
+
+Default.parameters = {
+  nextRouter: {
+    path: "/[page]",
+    asPath: "/profile",
+  },
+};
+
+const VerticalTabsPropsInfo = [
+  {
+    name: "Event Setup",
+    icon: Link,
+    href: "/events",
+    info: "60 Mins, Zoom",
+  },
+  {
+    name: "Availability",
+    icon: Calendar,
+    href: "/availability",
+    info: "Working Hours",
+  },
+  {
+    name: "Limits",
+    icon: Clock,
+    href: "/limits",
+    info: "Buffers, Limits & more...",
+  },
+  {
+    name: "Apps",
+    icon: Grid,
+    href: "/apps",
+    info: "3 apps - 0 active",
+  },
+];
+
+export const Info = () => (
+  <div className="w-full p-4" style={{ backgroundColor: "#F9FAFB" }}>
+    <VerticalTabs tabs={VerticalTabsPropsInfo} />
+  </div>
+);
+Info.parameters = {
+  nextRouter: {
+    path: "/[page]",
+    asPath: "/events",
+  },
+};
@@ -0,0 +1,13 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --brand-color: #292929;
+  --brand-text-color: #ffffff;
+  --brand-color-dark-mode: #fafafa;
+  --brand-text-color-dark-mode: #292929;
+  font-family: 'Inter', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
@@ -0,0 +1,167 @@
+module.exports = {
+  content: ["../../packages/ui/**/*.{js,ts,jsx,tsx}", "./stories/**/*.{js,ts,tsx,jsx}"],
+  darkMode: "class",
+  theme: {
+    fontFamily: {
+      cal: ["Cal Sans", "sans-serif"],
+      mono: ["Roboto Mono", "monospace"],
+    },
+    extend: {
+      colors: {
+        /* your primary brand color */
+        brandcontrast: "var(--brand-text-color)",
+        darkmodebrand: "var(--brand-color-dark-mode)",
+        darkmodebrandcontrast: "var(--brand-text-color-dark-mode)",
+        bookinglightest: "var(--booking-lightest-color)",
+        bookinglighter: "var(--booking-lighter-color)",
+        bookinglight: "var(--booking-light-color)",
+        bookingmedian: "var(--booking-median-color)",
+        bookingdark: "var(--booking-dark-color)",
+        bookingdarker: "var(--booking-darker-color)",
+        bookinghighlight: "var(--booking-highlight-color)",
+        black: "#111111",
+        brand: {
+          // Figure out a way to automate this for self hosted users
+          // Goto https://javisperez.github.io/tailwindcolorshades to generate your brand color
+          50: "#d1d5db",
+          100: "#9ca3af",
+          200: "#6b7280",
+          300: "#4b5563",
+          400: "#374151",
+          500: "#111827", // Brand color
+          600: "#0f1623",
+          700: "#0d121d",
+          800: "#0a0e17",
+          900: "#080c13",
+          DEFAULT: "#111827",
+        },
+        gray: {
+          50: "#F9FAFB",
+          100: "#F3F4F6",
+          200: "#E5E7EB",
+          300: "#D1D5DB",
+          400: "#9CA3AF",
+          500: "#6B7280",
+          600: "#4B5563",
+          700: "#374151",
+          800: "#1F2937",
+          900: "#111827",
+        },
+        neutral: {
+          50: "#F8F8F8",
+          100: "#F5F5F5",
+          200: "#E1E1E1",
+          300: "#CFCFCF",
+          400: "#ACACAC",
+          500: "#888888",
+          600: "#494949",
+          700: "#3E3E3E",
+          800: "#313131",
+          900: "#292929",
+        },
+        primary: {
+          50: "#F4F4F4",
+          100: "#E8E8E8",
+          200: "#C6C6C6",
+          300: "#A3A3A3",
+          400: "#5F5F5F",
+          500: "#1A1A1A",
+          600: "#171717",
+          700: "#141414",
+          800: "#101010",
+          900: "#0D0D0D",
+        },
+        secondary: {
+          50: "#F5F8F7",
+          100: "#EBF0F0",
+          200: "#CDDAD9",
+          300: "#AEC4C2",
+          400: "#729894",
+          500: "#356C66",
+          600: "#30615C",
+          700: "#28514D",
+          800: "#20413D",
+          900: "#223B41",
+        },
+        red: {
+          50: "#FFF5F5",
+          100: "#FFE3E2",
+          200: "#FFC9C9",
+          300: "#FEA8A8",
+          400: "#FF8787",
+          500: "#FF6B6B",
+          600: "#FA5352",
+          700: "#F03E3F",
+          800: "#E03130",
+          900: "#C92B2B",
+        },
+        orange: {
+          50: "#FFF4E5",
+          100: "#FFE8CC",
+          200: "#FFD8A8",
+          300: "#FFBF78",
+          400: "#FFA94E",
+          500: "#FF922B",
+          600: "#FD7E14",
+          700: "#F76706",
+          800: "#E8580C",
+          900: "#D94810",
+        },
+        green: {
+          50: "#EBFCEE",
+          100: "#D2F9D9",
+          200: "#B1F2BA",
+          300: "#8CE99A",
+          400: "#69DB7C",
+          500: "#51CF66",
+          600: "#40C057",
+          700: "#36B24D",
+          800: "#2F9E44",
+          900: "#2B8A3E",
+        },
+        blue: {
+          50: "#E7F5FF",
+          100: "#D0EBFF",
+          200: "#A4D8FF",
+          300: "#74C0FC",
+          400: "#4DABF7",
+          500: "#339AF0",
+          600: "#238BE6",
+          700: "#1C7ED7",
+          800: "#1971C2",
+          900: "#1763AB",
+        },
+      },
+      fontFamily: {
+        cal: ["inter", "sans-serif"],
+        mono: ["Roboto Mono", "monospace"],
+      },
+      maxHeight: (theme) => ({
+        0: "0",
+        97: "25rem",
+        ...theme("spacing"),
+        full: "100%",
+        screen: "100vh",
+      }),
+      minHeight: (theme) => ({
+        0: "0",
+        ...theme("spacing"),
+        full: "100%",
+        screen: "100vh",
+      }),
+      minWidth: (theme) => ({
+        0: "0",
+        ...theme("spacing"),
+        full: "100%",
+        screen: "100vw",
+      }),
+      maxWidth: (theme, { breakpoints }) => ({
+        0: "0",
+        ...theme("spacing"),
+        ...breakpoints(theme("screens")),
+        full: "100%",
+        screen: "100vw",
+      }),
+    },
+  },
+};
@@ -0,0 +1,9 @@
+{
+  "extends": "@calcom/tsconfig/nextjs.json",
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"],
+  "compilerOptions": {
+    "noImplicitAny": false,
+    "baseUrl": "."
+  }
+}
@@ -0,0 +1 @@
+NEXT_PUBLIC_SWAGGER_DOCS_URL=http://localhost:3002/api/docs
@@ -0,0 +1,353 @@
+import * as OpenAPISnippet from "openapi-snippet";
+
+export const requestSnippets = {
+  generators: {
+    curl_bash: {
+      title: "cURL (bash)",
+      syntax: "bash",
+    },
+    curl_powershell: {
+      title: "cURL (PowerShell)",
+      syntax: "powershell",
+    },
+    curl_cmd: {
+      title: "cURL (CMD)",
+      syntax: "bash",
+    },
+    node: {
+      title: "Node",
+      syntax: "node",
+    },
+  },
+  defaultExpanded: true,
+  languages: ["node", "curl_bash"],
+};
+// Since swagger-ui-react was not configured to change the request snippets some workarounds required
+// configuration will be added programatically
+// Custom Plugin
+export const SnippedGenerator = {
+  statePlugins: {
+    // extend some internals to gain information about current path, method and spec in the generator function metioned later
+    spec: {
+      wrapSelectors: {
+        requestFor: (ori, system) => (state, path, method) => {
+          return ori(path, method)
+            ?.set("spec", state.get("json", {}))
+            ?.setIn(["oasPathMethod", "path"], path)
+            ?.setIn(["oasPathMethod", "method"], method);
+        },
+        mutatedRequestFor: (ori) => (state, path, method) => {
+          return ori(path, method)
+            ?.set("spec", state.get("json", {}))
+            ?.setIn(["oasPathMethod", "path"], path)
+            ?.setIn(["oasPathMethod", "method"], method);
+        },
+      },
+    },
+    // extend the request snippets core plugin
+    requestSnippets: {
+      wrapSelectors: {
+        // add additional snippet generators here
+        getSnippetGenerators:
+          (ori, system) =>
+          (state, ...args) =>
+            ori(state, ...args)
+              // add node native snippet generator
+              //   .set(
+              //     // key
+              //     "node_native",
+              //     // config and generator function
+              //     system.Im.fromJS({
+              //       title: "NodeJs Native",
+              //       syntax: "javascript",
+              //       hostname: "test",
+              //       fn: (req) => {
+              //         // get extended info about request
+              //         const { spec, oasPathMethod } = req.toJS();
+              //         const { path, method } = oasPathMethod;
+
+              //         // run OpenAPISnippet for target node
+              //         const targets = ["node_native"];
+              //         let snippet;
+              //         try {
+              //           // set request snippet content
+              //           snippet = OpenAPISnippet.getEndpointSnippets(
+              //             spec,
+              //             path,
+              //             method,
+              //             targets
+              //             // Since I don't know why hostname was undefinedundefined, I harcoded it here
+              //           ).snippets[0].content;
+              //         } catch (err) {
+              //           // set to error in case it happens the npm package has some flaws
+              //           snippet = JSON.stringify(snippet);
+              //         }
+              //         // return stringified snipped
+              //         return snippet;
+              //       },
+              //     })
+              //   )
+              .set(
+                // key
+                "node_fetch",
+                // config and generator function
+                system.Im.fromJS({
+                  title: "NodeJS",
+                  syntax: "javascript",
+                  fn: (req) => {
+                    // get extended info about request
+                    const { spec, oasPathMethod } = req.toJS();
+                    const { path, method } = oasPathMethod;
+
+                    // run OpenAPISnippet for target node
+                    const targets = ["node_fetch"];
+                    let snippet;
+                    try {
+                      // set request snippet content
+                      snippet = OpenAPISnippet.getEndpointSnippets(spec, path, method, targets).snippets[0]
+                        .content;
+                    } catch (err) {
+                      // set to error in case it happens the npm package has some flaws
+                      snippet = JSON.stringify(snippet);
+                    }
+                    // return stringified snipped
+                    return snippet;
+                  },
+                })
+              )
+              .set(
+                // key
+                "shell_httpie",
+                // config and generator function
+                system.Im.fromJS({
+                  title: "HTTPie",
+                  syntax: "bash",
+                  fn: (req) => {
+                    // get extended info about request
+                    const { spec, oasPathMethod } = req.toJS();
+                    const { path, method } = oasPathMethod;
+
+                    // run OpenAPISnippet for target node
+                    const targets = ["shell_httpie"];
+                    let snippet;
+                    try {
+                      // set request snippet content
+                      snippet = OpenAPISnippet.getEndpointSnippets(spec, path, method, targets).snippets[0]
+                        .content;
+                    } catch (err) {
+                      // set to error in case it happens the npm package has some flaws
+                      snippet = JSON.stringify(snippet);
+                    }
+                    // return stringified snipped
+                    return snippet;
+                  },
+                })
+              )
+              .set(
+                // key
+                "php_curl",
+                // config and generator function
+                system.Im.fromJS({
+                  title: "PHP",
+                  syntax: "php",
+                  fn: (req) => {
+                    // get extended info about request
+                    const { spec, oasPathMethod } = req.toJS();
+                    const { path, method } = oasPathMethod;
+
+                    // run OpenAPISnippet for target node
+                    const targets = ["php_curl"];
+                    let snippet;
+                    try {
+                      // set request snippet content
+                      snippet = OpenAPISnippet.getEndpointSnippets(spec, path, method, targets).snippets[0]
+                        .content;
+                    } catch (err) {
+                      // set to error in case it happens the npm package has some flaws
+                      snippet = JSON.stringify(snippet);
+                    }
+                    // return stringified snipped
+                    return snippet;
+                  },
+                })
+              )
+              .set(
+                // key
+                "java_okhttp",
+                // config and generator function
+                system.Im.fromJS({
+                  title: "Java",
+                  syntax: "java",
+                  fn: (req) => {
+                    // get extended info about request
+                    const { spec, oasPathMethod } = req.toJS();
+                    const { path, method } = oasPathMethod;
+                    console.log(spec, oasPathMethod, path, method);
+                    // run OpenAPISnippet for target node
+                    const targets = ["java_okhttp"];
+                    let snippet;
+                    try {
+                      // set request snippet content
+                      snippet = OpenAPISnippet.getEndpointSnippets(spec, path, method, targets).snippets[0]
+                        .content;
+                    } catch (err) {
+                      // set to error in case it happens the npm package has some flaws
+                      snippet = JSON.stringify(snippet);
+                    }
+                    // return stringified snipped
+                    return snippet;
+                  },
+                })
+              )
+              //   .set(
+              //     // key
+              //     "java",
+              //     // config and generator function
+              //     system.Im.fromJS({
+              //       title: "Java (Unirest)",
+              //       syntax: "java",
+              //       fn: (req) => {
+              //         // get extended info about request
+              //         const { spec, oasPathMethod } = req.toJS();
+              //         const { path, method } = oasPathMethod;
+
+              //         // run OpenAPISnippet for target node
+              //         const targets = ["java"];
+              //         let snippet;
+              //         try {
+              //           // set request snippet content
+              //           snippet = OpenAPISnippet.getEndpointSnippets(
+              //             spec,
+              //             path,
+              //             method,
+              //             targets
+              //           ).snippets[0].content;
+              //         } catch (err) {
+              //           // set to error in case it happens the npm package has some flaws
+              //           snippet = JSON.stringify(snippet);
+              //         }
+              //         // return stringified snipped
+              //         return snippet;
+              //       },
+              //     })
+              //   )
+              //   .set(
+              //     // key
+              //     "c_libcurl",
+              //     // config and generator function
+              //     system.Im.fromJS({
+              //       title: "C (libcurl)  ",
+              //       syntax: "bash",
+              //       fn: (req) => {
+              //         // get extended info about request
+              //         const { spec, oasPathMethod } = req.toJS();
+              //         const { path, method } = oasPathMethod;
+
+              //         // run OpenAPISnippet for target node
+              //         const targets = ["c_libcurl"];
+              //         let snippet;
+              //         try {
+              //           // set request snippet content
+              //           snippet = OpenAPISnippet.getEndpointSnippets(
+              //             spec,
+              //             path,
+              //             method,
+              //             targets
+              //           ).snippets[0].content;
+              //         } catch (err) {
+              //           // set to error in case it happens the npm package has some flaws
+              //           snippet = JSON.stringify(snippet);
+              //         }
+              //         // return stringified snipped
+              //         return snippet;
+              //       },
+              //     })
+              //   )
+              .set(
+                // key
+                "go_native",
+                // config and generator function
+                system.Im.fromJS({
+                  title: "Go",
+                  syntax: "bash",
+                  fn: (req) => {
+                    // get extended info about request
+                    const { spec, oasPathMethod } = req.toJS();
+                    const { path, method } = oasPathMethod;
+
+                    // run OpenAPISnippet for target node
+                    const targets = ["go_native"];
+                    let snippet;
+                    try {
+                      // set request snippet content
+                      snippet = OpenAPISnippet.getEndpointSnippets(spec, path, method, targets).snippets[0]
+                        .content;
+                    } catch (err) {
+                      // set to error in case it happens the npm package has some flaws
+                      snippet = JSON.stringify(snippet);
+                    }
+                    // return stringified snipped
+                    return snippet;
+                  },
+                })
+              )
+              .set(
+                // key
+                "ruby",
+                // config and generator function
+                system.Im.fromJS({
+                  title: "Ruby",
+                  syntax: "ruby",
+                  fn: (req) => {
+                    // get extended info about request
+                    const { spec, oasPathMethod } = req.toJS();
+                    const { path, method } = oasPathMethod;
+
+                    // run OpenAPISnippet for target node
+                    const targets = ["ruby"];
+                    let snippet;
+                    try {
+                      // set request snippet content
+                      snippet = OpenAPISnippet.getEndpointSnippets(spec, path, method, targets).snippets[0]
+                        .content;
+                    } catch (err) {
+                      // set to error in case it happens the npm package has some flaws
+                      snippet = JSON.stringify(snippet);
+                    }
+                    // return stringified snipped
+                    return snippet;
+                  },
+                })
+              )
+              .set(
+                // key
+                "python",
+                // config and generator function
+                system.Im.fromJS({
+                  title: "Python",
+                  syntax: "python",
+                  fn: (req) => {
+                    // get extended info about request
+                    const { spec, oasPathMethod } = req.toJS();
+                    const { path, method } = oasPathMethod;
+
+                    // run OpenAPISnippet for target node
+                    const targets = ["python"];
+                    let snippet;
+                    try {
+                      // set request snippet content
+                      snippet = OpenAPISnippet.getEndpointSnippets(spec, path, method, targets).snippets[0]
+                        .content;
+                    } catch (err) {
+                      // set to error in case it happens the npm package has some flaws
+                      snippet = JSON.stringify(snippet);
+                    }
+                    // return stringified snipped
+                    return snippet;
+                  },
+                })
+              ),
+      },
+    },
+  },
+};
@@ -3,21 +3,27 @@
  "version": "1.0.0",
  "private": true,
  "scripts": {
-    "dev": "next dev",
    "build": "next build",
-    "start": "next start"
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf .next",
+    "dev": "PORT=4200 next dev",
+    "lint": "next lint",
+    "lint:fix": "eslint . --ext .ts,.js,.tsx,.jsx --fix",
+    "lint:report": "eslint . --format json --output-file ../../lint-results/swagger.json",
+    "start": "PORT=4200 next start"
  },
  "dependencies": {
+    "highlight.js": "^11.5.1",
    "isarray": "2.0.5",
-    "next": "12.1.4",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "swagger-ui-react": "4.8.1"
+    "next": "12.2.0",
+    "openapi-snippet": "^0.13.0",
+    "react": "18.1.0",
+    "react-dom": "18.1.0",
+    "swagger-ui-react": "4.11.1"
  },
  "devDependencies": {
-    "@types/node": "16.11.26",
-    "@types/react": "17.0.43",
-    "@types/react-dom": "17.0.14",
-    "typescript": "4.6.3"
+    "@types/node": "16.9.1",
+    "@types/react": "18.0.9",
+    "@types/react-dom": "18.0.4",
+    "typescript": "4.6.4"
  }
 }
@@ -1,5 +1,7 @@
+import "highlight.js/styles/default.css";
+import "swagger-ui-react/swagger-ui.css";
+
 import "../styles/globals.css";
-import "../styles/swagger-cal.css";

 function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
@@ -1,45 +1,26 @@
-import Head from "next/head";
-import SwaggerUI from "swagger-ui-react";
+import dynamic from "next/dynamic";
+import { SwaggerUI } from "swagger-ui-react";
+
+import { SnippedGenerator, requestSnippets } from "@lib/snippets";
+
+const SwaggerUIDynamic: SwaggerUI & { url: string } = dynamic(() => import("swagger-ui-react"), {
+  ssr: false,
+});

-const requestSnippets = {
-  generators: {
-    curl_bash: {
-      title: "cURL (bash)",
-      syntax: "bash",
-    },
-    curl_powershell: {
-      title: "cURL (PowerShell)",
-      syntax: "powershell",
-    },
-    curl_cmd: {
-      title: "cURL (CMD)",
-      syntax: "bash",
-    },
-    node: {
-      title: "Node",
-      syntax: "node",
-    },
-  },
-  defaultExpanded: true,
-  languages: ["curl_bash"],
-  // e.g. only show curl bash = ["curl_bash"]
-};
 export default function APIDocs() {
  return (
-    <div>
-      <Head>
-        <title>Cal.com - Docs - SwaggerUI</title>
-        <meta name="description" content="Generated by create next app" />
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
-      <SwaggerUI
-        requestSnippets={requestSnippets}
-        requestSnippetsEnabled={true}
-        docExpansion="none"
-        operationsSorter="method"
-        filter={true}
-        url={process.env.NEXT_PUBLIC_SWAGGER_DOCS_URL || "https://api.cal.com/api/docs"}
-      />
-    </div>
+    <SwaggerUIDynamic
+      url={process.env.NEXT_PUBLIC_SWAGGER_DOCS_URL || "https://api.cal.com/docs"}
+      persistAuthorization={true}
+      supportedSubmitMethods={["get", "post", "delete", "put", "options", "patch"]}
+      requestSnippetsEnabled={true}
+      requestSnippets={requestSnippets}
+      plugins={[SnippedGenerator]}
+      tryItOutEnabled={true}
+      syntaxHighlight={true}
+      enableCORS={false} // Doesn't seem to work either
+      docExpansion="list"
+      filter={true}
+    />
  );
 }
@@ -14,3 +14,89 @@ a {
 * {
  box-sizing: border-box;
 }
+
+@media (max-width: 768px) {
+  .swagger-ui .opblock-tag {
+    font-size: 90% !important;
+  }
+  .swagger-ui .opblock .opblock-summary {
+    display: grid;
+  flex-direction: column;
+  }
+  .opblock-summary-path {
+    flex-shrink: 0;
+    max-width: 100% !important;
+    padding: 10px 5px !important;
+  }
+  .opblock-summary-description {
+    font-size: 16px !important;
+    padding: 0px 5px;
+  }
+  .swagger-ui .scheme-container .schemes {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+  }
+  .swagger-ui .info .title {
+    color: #3b4151;
+    font-family: sans-serif;
+    font-size: 22px;
+  }
+  .swagger-ui .scheme-container {
+  padding: 14px 0;
+  }
+  .swagger-ui .info {
+      margin: 10px 0;
+  }
+  .swagger-ui .auth-wrapper {
+    margin: 10px 0;
+  }
+  .swagger-ui .authorization__btn {
+  display: none;
+  }
+  .swagger-ui .opblock {
+    margin: 0 0 5px;
+  }
+  button.opblock-summary-control > svg {
+    display: none;  
+  }
+  .swagger-ui .filter .operation-filter-input {
+    border: 2px solid #d8dde7;
+    margin: 5px 5px;
+    padding: 5px;
+    width: 100vw;
+  }
+  .swagger-ui .wrapper {
+    padding: 0 4px;
+    width: 100%;
+  }
+  .swagger-ui .info .title small {
+    top: 5px;
+  }
+  .swagger-ui a.nostyle, .swagger-ui a.nostyle:visited {
+    width: 100%;
+  }
+  div.request-snippets > div.curl-command > div:nth-child(1) {
+    overscroll-behavior: contain;
+    overflow-x: scroll;
+  }
+  .swagger-ui .opblock-body pre.microlight {  
+    font-size: 9px; 
+  }
+  .swagger-ui table tbody tr td {
+    padding: 0px 0 0;
+    vertical-align: none;
+  }
+  td.response-col_description > div > div > p {
+    font-size: 12px;
+  }
+  div.no-margin > div > div.responses-wrapper > div.responses-inner > div > div > table > tbody > tr {
+        display: flex;
+    width: 100vw;
+    flex-direction: column;
+    font-size: 60%;
+  }
+  div.no-margin > div > div.responses-wrapper > div.responses-inner > div > div > table > thead > tr {
+    display: none;
+  }
+}
@@ -1,20 +1,17 @@
 {
+  "extends": "@calcom/tsconfig/nextjs.json",
  "compilerOptions": {
-    "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": false,
-    "forceConsistentCasingInFileNames": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve",
-    "incremental": true
+    "baseUrl": ".",
+    "paths": {
+      "@lib/*": ["lib/*"]
+    }
  },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": [
+    "next-env.d.ts",
+    "../../packages/types/*.d.ts",
+    "../../packages/types/next-auth.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
  "exclude": ["node_modules"]
 }
@@ -61,3 +61,6 @@ yarn-error.log*

 # Typescript
 tsconfig.tsbuildinfo
+
+# Autogenerated embed content
+public/embed
@@ -0,0 +1,86 @@
+import React from "react";
+import Select from "react-select";
+import { OptionProps } from "react-select";
+
+import { InstallAppButton } from "@calcom/app-store/components";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { trpc } from "@calcom/trpc/react";
+import type { App } from "@calcom/types/App";
+import { Button } from "@calcom/ui";
+
+import { QueryCell } from "@lib/QueryCell";
+
+interface AdditionalCalendarSelectorProps {
+  isLoading?: boolean;
+}
+
+const ImageOption = (optionProps: OptionProps<{ [key: string]: string; type: App["type"] }>) => {
+  const { data } = optionProps;
+  return (
+    <InstallAppButton
+      type={data.type}
+      render={(installProps) => {
+        return (
+          <Button {...installProps} className="w-full" color="minimal">
+            {/* eslint-disable @next/next/no-img-element */}
+            {data.image && (
+              <img className="float-left mr-3 inline h-5 w-5" src={data.image} alt={data.label} />
+            )}
+            <p>{data.label}</p>
+          </Button>
+        );
+      }}
+    />
+  );
+};
+
+const AdditionalCalendarSelector = ({ isLoading }: AdditionalCalendarSelectorProps): JSX.Element | null => {
+  const { t } = useLocale();
+  const query = trpc.useQuery(["viewer.integrations", { variant: "calendar", onlyInstalled: true }]);
+
+  return (
+    <QueryCell
+      query={query}
+      success={({ data }) => {
+        const options = data.items.map((item) => ({
+          label: item.name,
+          slug: item.slug,
+          image: item.imageSrc,
+          type: item.type,
+        }));
+        return (
+          <Select
+            name="additionalCalendar"
+            placeholder={t("connect_additional_calendar")}
+            options={options}
+            styles={{
+              placeholder: (defaultStyles) => {
+                return {
+                  ...defaultStyles,
+                  color: "#3E3E3E",
+                  marginLeft: "3px",
+                };
+              },
+              control: (defaultStyles) => {
+                return {
+                  ...defaultStyles,
+                  borderRadius: "2px",
+                  "@media only screen and (min-width: 640px)": {
+                    ...(defaultStyles["@media only screen and (min-width: 640px)"] as object),
+                    maxWidth: "320px",
+                  },
+                };
+              },
+            }}
+            isSearchable={false}
+            className="mt-1 mb-2 block w-full min-w-0 flex-1 rounded-none rounded-r-sm border-gray-300 font-medium text-gray-700 sm:text-sm"
+            isLoading={isLoading}
+            components={{ Option: ImageOption }}
+          />
+        );
+      }}
+    />
+  );
+};
+
+export default AdditionalCalendarSelector;
--- a/Show More
+++ b/Show More
@@ -1 +1 @@
 .17
 v16
				`@@ -0,0 +1 @@`
				`NEXT_PUBLIC_SWAGGER_DOCS_URL=http://localhost:3002/api/docs`