v2.3.6

fix: add optimistic update for disabling forms (#5547 )
Improve multilingualism and fix search routes (#5334 )
2022-12-07 14:02:24 -07:00 · 2022-12-07 13:55:41 -07:00 · 2022-12-07 13:53:44 -07:00 · 2022-12-07 13:40:37 -07:00 · 2022-12-07 13:15:15 -07:00 · 2022-12-07 13:12:53 -07:00
1484 changed files with 70306 additions and 41658 deletions
@@ -11,6 +11,10 @@
 #   - ZOOM
 #   - GIPHY
 #   - VITAL
+#   - ZAPIER
+#   - LARK
+#   - WEB3
+#   - SALESFORCE

 # - APP STORE **********************************************************************************************
 # ⚠️ ⚠️ ⚠️ THESE WILL BE MIGRATED TO THE DATABASE TO PREVENT AWS's 4KB ENV QUOTA ⚠️ ⚠️ ⚠️
@@ -87,12 +91,22 @@ VITAL_REGION="us"
 # Used for the Zapier integration
 # @see https://github.com/calcom/cal.com/blob/main/packages/app-store/zapier/README.md
 ZAPIER_INVITE_LINK=""
-# *********************************************************************************************************

-# - LARK
+#   - LARK
 # Needed to enable Lark Calendar integration and Login with Lark
 # @see <https://open.larksuite.com/document/ukTMukTMukTM/ukDNz4SO0MjL5QzM/g>
 LARK_OPEN_APP_ID=""
 LARK_OPEN_APP_SECRET=""
 LARK_OPEN_VERIFICATION_TOKEN=""
+
+#   - WEB3
+# Used for the Web3 plugin
+# @see https://github.com/calcom/cal.com/blob/main/packages/app-store/rainbow/README.md
+ALCHEMY_API_KEY=""
+INFURA_API_KEY=""
+
+#   - SALESFORCE
+# Used for the Salesforce (Sales Cloud) app
+SALESFORCE_CONSUMER_KEY=""
+SALESFORCE_CONSUMER_SECRET=""
 # *********************************************************************************************************
@@ -46,8 +46,7 @@ PGSSLMODE=
 # @see: https://github.com/calendso/calendso/issues/263
 # @see: https://next-auth.js.org/configuration/options#nextauth_url
 # Required for Vercel hosting - set NEXTAUTH_URL to equal your NEXT_PUBLIC_WEBAPP_URL
-# NEXTAUTH_URL='http://localhost:3000'
-NEXTAUTH_URL=
+NEXTAUTH_URL='http://localhost:3000'
 # @see: https://next-auth.js.org/configuration/options#nextauth_secret
 # You can use: `openssl rand -base64 32` to generate one
 NEXTAUTH_SECRET=
@@ -78,7 +77,7 @@ NEXT_PUBLIC_HELPSCOUT_KEY=
 SEND_FEEDBACK_EMAIL=

 # Sengrid
-# Used for email reminders in workflows
+# Used for email reminders in workflows and internal sync services
 SENDGRID_API_KEY=
 SENDGRID_EMAIL=

@@ -95,11 +94,12 @@ NEXT_PUBLIC_IS_E2E=
 # Used for internal billing system
 NEXT_PUBLIC_STRIPE_PRO_PLAN_PRICE=
 NEXT_PUBLIC_STRIPE_PREMIUM_PLAN_PRICE=
-NEXT_PUBLIC_STRIPE_FREE_PLAN_PRICE=
+NEXT_PUBLIC_IS_PREMIUM_NEW_PLAN=0
+NEXT_PUBLIC_STRIPE_PREMIUM_NEW_PLAN_PRICE=
+STRIPE_TEAM_MONTHLY_PRICE_ID=
 STRIPE_WEBHOOK_SECRET=
-STRIPE_PRO_PLAN_PRODUCT_ID=
-STRIPE_PREMIUM_PLAN_PRODUCT_ID=
-STRIPE_FREE_PLAN_PRODUCT_ID=
+STRIPE_PRIVATE_KEY=
+STRIPE_CLIENT_ID=

 # Use for internal Public API Keys and optional
 API_KEY_PREFIX=cal_
@@ -134,5 +134,14 @@ NEXT_PUBLIC_TEAM_IMPERSONATION=false
 # Close.com internal CRM
 CLOSECOM_API_KEY=

-# Sendgrid internal email sender
-SENDGRID_API_KEY=
+# Sendgrid internal sync service
+SENDGRID_SYNC_API_KEY=
+
+# Sentry
+NEXT_PUBLIC_SENTRY_DSN=
+SENTRY_IGNORE_API_RESOLUTION_ERROR=
+
+# Change your Brand
+NEXT_PUBLIC_APP_NAME="Cal.com"
+NEXT_PUBLIC_SUPPORT_MAIL_ADDRESS="help@cal.com"
+NEXT_PUBLIC_COMPANY_NAME="Cal.com, Inc."
@@ -1,16 +0,0 @@
-name: Add PRs to project
-
-on:
-  pull_request:
-    types:
-      - opened
-
-jobs:
-  add-PR-to-project:
-    name: Add PR 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 }}
@@ -1,22 +0,0 @@
-name: Add bugs to Bug Hunting
-
-on:
-  issues:
-    types:
-      - opened
-      - labeled
-  pull_request:
-    types:
-      - opened
-      - labeled
-
-jobs:
-  add-to-project:
-    name: Add issue to project
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/add-to-project@v0.1.0
-        with:
-          project-url: https://github.com/orgs/calcom/projects/1
-          github-token: ${{ secrets.GH_ACCESS_TOKEN }}
-          labeled: 🐛 bug, 🎨 needs design, 🙋🏻‍♂️help wanted, 🚨 urgent
@@ -12,6 +12,9 @@ on:
      - apps/storybook/**
      - packages/ui/**
  workflow_dispatch:
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true

 # List of jobs
 jobs:
@@ -5,6 +5,11 @@ on:
      - main
    paths:
      - "**.tsx?"
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+env:
+  NODE_OPTIONS: "--max-old-space-size=8192"
 jobs:
  check-types:
    runs-on: ubuntu-latest
@@ -17,8 +22,13 @@ jobs:

      - name: Use Node 16.x
        uses: actions/setup-node@v3
+        
        with:
          node-version: 16.x
          cache: "yarn"
+      
+      - name: Show info
+        run: node -e "console.log(require('v8').getHeapStatistics())"
+      
      - run: yarn --frozen-lockfile
      - run: yarn type-check
@@ -4,22 +4,24 @@ on:
  push:
    branches:
      - main
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true

 jobs:
  synchronize-with-crowdin:
    runs-on: ubuntu-latest

    steps:
+      - name: Checkout
+        uses: actions/checkout@v2

-    - name: Checkout
-      uses: actions/checkout@v2
-
-    - name: crowdin action
-      uses: crowdin/github-action@1.4.9
-      with:
-        upload_translations: true
-        download_translations: true
-      env:
-        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        CROWDIN_PROJECT_ID: ${{ secrets.CROWDIN_PROJECT_ID }}
-        CROWDIN_PERSONAL_TOKEN: ${{ secrets.CROWDIN_PERSONAL_TOKEN }}
+      - name: crowdin action
+        uses: crowdin/github-action@1.4.9
+        with:
+          upload_translations: true
+          download_translations: true
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          CROWDIN_PROJECT_ID: ${{ secrets.CROWDIN_PROJECT_ID }}
+          CROWDIN_PERSONAL_TOKEN: ${{ secrets.CROWDIN_PERSONAL_TOKEN }}
@@ -0,0 +1,37 @@
+# .github/workflows/preview.yml
+
+name: Preview Environment
+
+env:
+  SNAPLET_ACCESS_TOKEN: ${{ secrets.SNAPLET_ACCESS_TOKEN }}
+  SNAPLET_PROJECT_ID: ${{ secrets.SNAPLET_PROJECT_ID }}
+  VERCEL_ACCESS_TOKEN: ${{ secrets.VERCEL_ACCESS_TOKEN }}
+  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+
+on:
+  pull_request:
+    types: [opened, synchronize, closed]
+    branches:
+      - main
+
+jobs:
+  db-preview-deploy:
+    if: ${{ github.event.action == 'opened' || github.event.action == 'synchronize' }}
+    runs-on: ubuntu-latest
+    steps:
+      - id: snaplet
+        uses: snaplet/action@v1
+      - uses: snaplet/vercel-action@v1
+        with:
+          env: |
+            DATABASE_URL=${{ steps.snaplet.outputs.database-url }}
+  db-preview-delete:
+    if: ${{ github.event.action == 'closed' }}
+    runs-on: ubuntu-latest
+    steps:
+      - uses: snaplet/action@v1
+        with:
+          delete: true
+      - uses: snaplet/vercel-action@v1
+        with:
+          delete: true
@@ -1,7 +1,7 @@
 name: E2E App-Store Apps
 on:
  push:
-    branches: [ feature/event-routing ]
+    branches: [fixes/e2e-consolidation] # TODO: Remove this after merged in main
  pull_request_target: # So we can test on forks
    branches:
      - main
@@ -12,6 +12,9 @@ on:
      - apps/swagger/**
      - apps/website/**
      - apps/web/public/**
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
 jobs:
  test:
    timeout-minutes: 20
@@ -86,14 +89,14 @@ jobs:
          restore-keys: cache-playwright-
      - run: yarn --frozen-lockfile
      - name: Install playwright deps
-        # if: steps.playwright-cache.outputs.cache-hit != 'true'
+        if: steps.playwright-cache.outputs.cache-hit != 'true'
        run: yarn playwright install --with-deps
      - name: Run Tests
-        run: yarn app-e2e-quick
+        run: yarn test-e2e:app-store

      - name: Upload Test Results
        if: ${{ always() }}
        uses: actions/upload-artifact@v2
        with:
-          name: test-results-core
-          path: packages/app-store/**/playwright/results
+          name: test-results
+          path: test-results
@@ -7,6 +7,9 @@ on:
    paths:
      - apps/web/**
      - packages/embeds/**
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
 jobs:
  e2e-embed:
    timeout-minutes: 20
@@ -25,6 +28,8 @@ jobs:
      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 }}
+      NEXT_PUBLIC_STRIPE_PREMIUM_NEW_PLAN_PRICE: ${{ secrets.NEXT_PUBLIC_STRIPE_PREMIUM_NEW_PLAN_PRICE }}
+      NEXT_PUBLIC_IS_PREMIUM_NEW_PLAN: 1
      STRIPE_PRIVATE_KEY: ${{ secrets.CI_STRIPE_PRIVATE_KEY }}
      STRIPE_CLIENT_ID: ${{ secrets.CI_STRIPE_CLIENT_ID }}
      STRIPE_WEBHOOK_SECRET: ${{ secrets.CI_STRIPE_WEBHOOK_SECRET }}
@@ -79,7 +84,7 @@ jobs:
          restore-keys: cache-playwright-
      - run: yarn --frozen-lockfile
      - name: Install playwright deps
-        # if: steps.playwright-cache.outputs.cache-hit != 'true'
+        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
@@ -1,11 +1,16 @@
 name: E2E test
 on:
+  push:
+    branches: [fixes/e2e-consolidation] # TODO: Remove this after merged in main
  pull_request_target: # So we can test on forks
    branches:
      - main
    paths:
      - apps/web/**
      - packages/**
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
 jobs:
  e2e:
    timeout-minutes: 20
@@ -20,10 +25,13 @@ jobs:
      GOOGLE_LOGIN_ENABLED: true
      # CRON_API_KEY: xxx
      CALENDSO_ENCRYPTION_KEY: ${{ secrets.CI_CALENDSO_ENCRYPTION_KEY }}
+      DAILY_API_KEY: ${{ secrets.CI_DAILY_API_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 }}
+      NEXT_PUBLIC_STRIPE_PREMIUM_NEW_PLAN_PRICE: ${{ secrets.NEXT_PUBLIC_STRIPE_PREMIUM_NEW_PLAN_PRICE }}
+      NEXT_PUBLIC_IS_PREMIUM_NEW_PLAN: 1
      STRIPE_PRIVATE_KEY: ${{ secrets.CI_STRIPE_PRIVATE_KEY }}
      STRIPE_CLIENT_ID: ${{ secrets.CI_STRIPE_CLIENT_ID }}
      STRIPE_WEBHOOK_SECRET: ${{ secrets.CI_STRIPE_WEBHOOK_SECRET }}
@@ -1,104 +0,0 @@
-name: E2E Test - Integrations with Third Party
-on:
-  push:
-    branches: [ tests/with-msw ]
-  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 Integration
-    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
-      ZOOM_CLIENT_ID: ZOOM_CLIENT_ID
-      ZOOM_CLIENT_SECRET: ZOOM_CLIENT_SECRET
-      HUBSPOT_CLIENT_ID: HUBSPOT_CLIENT_ID
-      HUBSPOT_CLIENT_SECRET: HUBSPOT_CLIENT_SECRET
-      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
-        # Force bypass cache because new environment variables were added that caused DB to change but build remains cached
-        run: yarn test-e2e-integrations --force
-
-      - name: Upload Test Results
-        if: ${{ always() }}
-        uses: actions/upload-artifact@v2
-        with:
-          name: test-results-core
-          path: apps/web/playwright-integrations/test-results 
@@ -1,7 +1,9 @@
 name: "Pull Request Labeler"
 on:
  - pull_request_target
-
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
 jobs:
  labeler:
    permissions:
@@ -6,6 +6,9 @@ on:
    paths:
      - "**.tsx?"
      - "**.jsx?"
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
 jobs:
  lint:
    runs-on: ubuntu-latest
@@ -27,7 +30,10 @@ jobs:
        if: steps.yarn-cache.outputs.cache-hit != 'true'
        run: yarn --frozen-lockfile

-      - name: Lint
+      - name: Test Code Linting
+        run: yarn lint
+
+      - name: Save Code Linting Reports
        run: yarn lint:report
        continue-on-error: true

@@ -0,0 +1,17 @@
+on:
+  workflow_dispatch:
+  push:
+    # Pattern matched against refs/tags
+    tags:
+      - "*" # Push events to every tag not containing /
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          ref: main # Always checkout main even for tagged releases
+          fetch-depth: 0
+          token: ${{ secrets.GH_ACCESS_TOKEN }}
+      - run: git push origin +main:production
@@ -1,8 +1,13 @@
 name: "Meta Workflow: Require Conditional Status Checks"
 on:
+  push:
+    branches: [fixes/e2e-consolidation] # TODO: Remove this after merged in main
  pull_request:
    branches:
      - main
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
 jobs:
  required-checks:
    runs-on: ubuntu-latest
@@ -34,3 +39,7 @@ jobs:
              paths:
                - /apps/web/**
                - /packages/embeds/**
+            - job: test
+              paths:
+                - /apps/web/**
+                - /packages/**
@@ -0,0 +1,32 @@
+name: Unit tests
+on:
+  push:
+    branches: [ feat/routing-forms/reporting ] # TODO: Remove this after merged in main
+  pull_request_target: # So we can test on forks
+    branches:
+      - main
+    paths:
+      - apps/web/**
+      - packages/**
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+jobs:
+  test:
+    timeout-minutes: 20
+    runs-on: ubuntu-latest
+    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
+      # Should be an 8GB machine as per https://docs.github.com/en/actions/using-github-hosted-runners/about-github-hosted-runners
+      - run: echo 'NODE_OPTIONS="--max_old_space_size=6144"' >> $GITHUB_ENV
+      - name: Use Node 16.x
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16.x
+          cache: "yarn"
+      - run: yarn --frozen-lockfile
+      - run: yarn test
@@ -1,4 +1,4 @@
 {
  "projectId": "cl4u26bwz7962859ply7ibuo43t",
-  "databaseUrl": "postgresql://postgres@localhost:5450/calendso"
+  "targetDatabaseUrl": "postgresql://postgres@localhost:5450/calendso"
 }
@@ -1,3 +1,3 @@
 {
-  "version": "0.3.0"
+  "version": "0.22.3"
 }
@@ -6,5 +6,6 @@
  },
  "typescript.preferences.importModuleSpecifier": "non-relative",
  "spellright.language": ["en"],
-  "spellright.documentTypes": ["markdown"]
+  "spellright.documentTypes": ["markdown", "typescript"],
+  "tailwindCSS.experimental.classRegex": [["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]]
 }
@@ -4,23 +4,6 @@ Contributions are what make the open source community such an amazing place to l

 - Before jumping into a PR be sure to search [existing PRs](https://github.com/calcom/cal.com/pulls) or [issues](https://github.com/calcom/cal.com/issues) for an open or closed item that relates to your submission.

-## Areas of expertise
-
-### 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
@@ -31,13 +31,13 @@
   <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://cal.com/pricing"><img src="https://img.shields.io/badge/Pricing-Free-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://github.com/orgs/calcom/projects/1/views/25"><img src="https://img.shields.io/badge/Help%20Wanted-Contribute-blue"></a>
+   <a href="https://github.com/orgs/calcom/projects/9"><img src="https://img.shields.io/badge/Help%20Wanted-Contribute-blue"></a>
   <a href="https://cal.com/figma"><img src="https://img.shields.io/badge/Figma-Design%20System-blueviolet"></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>
@@ -58,7 +58,7 @@ Calendly and other scheduling tools are awesome. It made our lives massively eas

 That's where Cal.com comes in. Self-hosted or hosted by us. White-label by design. API-driven and ready to be deployed on your own domain. Full control of your events and data.

-## Product of the Month: April
+## Product of the Month: April 2021

 #### Support us on [Product Hunt](https://www.producthunt.com/posts/calendso?utm_source=badge-top-post-badge&utm_medium=badge&utm_souce=badge-calendso)

@@ -115,7 +115,10 @@ Here is what you need to be able to run Cal.
   yarn
   ```

-1. Use `openssl rand -base64 32` to generate a key and add it under `NEXTAUTH_SECRET` in the .env file.
+1. Set up your .env file
+   - Duplicate `.env.example` to `.env`
+   - Use `openssl rand -base64 32` to generate a key and add it under `NEXTAUTH_SECRET` in the .env file.
+   - Use `openssl rand -base64 24` to generate a key and add it under `CALENDSO_ENCRYPTION_KEY` in the .env file.

 #### Quick start with `yarn dx`

@@ -204,7 +207,7 @@ Be sure to set the environment variable `NEXTAUTH_URL` to the correct value. If
 yarn test-e2e

 # To open last HTML report run:
-yarn workspace @calcom/web playwright-report
+yarn playwright show-report test-results/reports/playwright-html-report
 ```

 ### Upgrading from earlier versions
@@ -321,7 +324,7 @@ We have a list of [help wanted](https://github.com/orgs/calcom/projects/1/views/
 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 `<Cal.com URL>/api/integrations/googlecalendar/callback` replacing Cal.com URL with the URI at which your application runs.
+9. Under Authorized redirect URI's, select Add URI and then add the URI `<Cal.com URL>/api/integrations/googlecalendar/callback` and `<Cal.com URL>/api/auth/callback/google` replacing Cal.com 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.

@@ -351,56 +354,6 @@ following
 5. Use **Application (client) ID** as the **MS_GRAPH_CLIENT_ID** attribute value in .env
 6. Click **Certificates & secrets** create a new client secret and use the value as the **MS_GRAPH_CLIENT_SECRET** attribute

-### Obtaining Slack Client ID and Secret and Signing Secret
-
-To test this you will need to create a Slack app for yourself on [their apps website](https://api.slack.com/apps).
-
-Copy and paste the app manifest below into the setting on your slack app. Be sure to replace `YOUR_DOMAIN` with your own domain or your proxy host if you're testing locally.
-
-<details>
-  <summary>App Manifest</summary>
-  
- ```yaml
- display_information:
-  name: Cal.com Slack
-features:
-  bot_user:
-    display_name: Cal.com Slack
-    always_online: false
-  slash_commands:
-    - command: /create-event
-      url: https://YOUR_DOMAIN/api/integrations/slackmessaging/commandHandler
-      description: Create an event within Cal!
-      should_escape: false
-    - command: /today
-      url: https://YOUR_DOMAIN/api/integrations/slackmessaging/commandHandler
-      description: View all your bookings for today
-      should_escape: false
-oauth_config:
-  redirect_urls:
-    - https://YOUR_DOMAIN/api/integrations/slackmessaging/callback
-  scopes:
-    bot:
-      - chat:write
-      - commands
-      - chat:write.public 
-settings:
-  interactivity:
-    is_enabled: true
-    request_url: https://YOUR_DOMAIN/api/integrations/slackmessaging/interactiveHandler
-    message_menu_options_url: https://YOUR_DOMAIN/api/integrations/slackmessaging/interactiveHandler
-  org_deploy_enabled: false
-  socket_mode_enabled: false
-  token_rotation_enabled: false
-```
-
-</details>
-
-Add the integration as normal - slack app - add. Follow the oauth flow to add it to a server.
-
-Next make sure you have your app running `yarn dx`. Then in the slack chat type one of these commands: `/create-event` or `/today`
-
-> NOTE: Next you will need to setup a proxy server like [ngrok](https://ngrok.com/) to allow your local host machine to be hosted on a public https server.

 ### Obtaining Zoom Client ID and Secret

@@ -434,7 +387,7 @@ Next make sure you have your app running `yarn dx`. Then in the slack chat type
 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.
+7. Set the Redirect URL for OAuth `<Cal.com URL>/api/integrations/hubspot/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.
@@ -0,0 +1,34 @@
+/**
+ * This is a Playwright script Checkly generated for you based on your Vercel project.
+ * To learn more about Browser checks and Playwright visit: https://www.checklyhq.com/docs/browser-checks
+ */
+
+// Create a Chromium browser
+const { chromium } = require("playwright");
+
+// Checkly supports top level await, but we wrap your code in an async function so you can run it locally too.
+async function run() {
+  const browser = await chromium.launch();
+  const page = await browser.newPage();
+
+  // If available, we set the target URL to a preview deployment URL provided by the ENVIRONMENT_URL created by Vercel.
+  // Otherwise, we use the Production URL.
+  const targetUrl = process.env.ENVIRONMENT_URL || "https://app.cal.com";
+
+  // We visit the page. This waits for the "load" event by default.
+  const response = await page.goto(targetUrl);
+
+  // If the page doesn't return a successful response code, we fail the check
+  if (response.status() > 399) {
+    throw new Error(`Failed with response code ${response.status()}`);
+  }
+
+  // We snap a screenshot.
+  await page.screenshot({ path: "screenshot.jpg" });
+
+  // We close the page and browser. This is needed for collecting accurate web vitals.
+  await page.close();
+  await browser.close();
+}
+
+run();
@@ -0,0 +1,35 @@
+/**
+ * This is a Playwright script Checkly generated for you based on your Vercel project.
+ * To learn more about Browser checks and Playwright visit: https://www.checklyhq.com/docs/browser-checks
+ */
+
+// Create a Chromium browser
+const { chromium } = require("playwright");
+
+// Checkly supports top level await, but we wrap your code in an async function so you can run it locally too.
+async function run() {
+  const browser = await chromium.launch();
+  const page = await browser.newPage();
+  const targetUrl = process.env.ENVIRONMENT_URL || "https://cal.com";
+  await page.goto(`${targetUrl}/rick/test-location-link`);
+
+  await page.waitForSelector('[data-testid="day"][data-disabled="false"]');
+  await page.click('[data-testid="day"][data-disabled="false"]');
+
+  await page.waitForSelector('[data-testid="time"]');
+  await page.click('[data-testid="time"]');
+
+  await page.waitForSelector("#name");
+  await page.click("#name");
+
+  await page.type("#name", "Calcom");
+
+  await page.type('[name="email"]', "cal@cal.com");
+
+  await page.waitForSelector('[data-testid="confirm-book-button"]');
+  await page.click('[data-testid="confirm-book-button"]');
+
+  await browser.close();
+}
+
+run();
@@ -50,6 +50,10 @@
      "description": "Sendgrid api key. Used for email reminders in workflows",
      "value": ""
    },
+    "SENDGRID_SYNC_API_KEY": {
+      "description": "Sendgrid internal sync service",
+      "value": ""
+    },
    "SENDGRID_EMAIL": {
      "description": "Sendgrid email. Used for email reminders in workflows",
      "value": ""
@@ -17,7 +17,7 @@
  "license": "MIT",
  "dependencies": {
    "iframe-resizer-react": "^1.1.0",
-    "next": "^12.2.5",
+    "next": "^12.3.1",
    "nextra": "^1.1.0",
    "nextra-theme-docs": "^1.2.2",
    "react": "^18.2.0",
@@ -25,6 +25,6 @@
  },
  "devDependencies": {
    "@calcom/config": "*",
-    "eslint": "^8.20.0"
+    "eslint": "^8.22.0"
  }
 }
@@ -6,7 +6,7 @@ title: Vercel

 ## Requirements

-You need a PostgresDB database hosted somewhere. [Heroku](https://www.heroku.com) and [Supabase](https://supabase.com/) offer great free options.
+You need a PostgresDB database hosted somewhere. [Supabase](https://supabase.com/) offers a great free option.

 ## Getting Started

@@ -1,37 +1,24 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# next.js
-/.next/
-/out/
-
-# production
-/build
-
-# misc
-.DS_Store
-*.pem
-
-# debug
+# Logs
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-.pnpm-debug.log*
+pnpm-debug.log*
+lerna-debug.log*

-# local env files
-.env*.local
+node_modules
+dist
+dist-ssr
+*.local

-# vercel
-.vercel
-
-# typescript
-*.tsbuildinfo
-
-storybook-static/
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
@@ -0,0 +1,9 @@
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+
+i18n.use(initReactI18next).init({
+  resources: [],
+  debug: true,
+});
+
+export default i18n;
@@ -1,34 +1,29 @@
 const path = require("path");

 module.exports = {
-  stories: ["../stories/**/*.stories.mdx", "../stories/**/*.stories.@(js|jsx|ts|tsx)"],
+  stories: [
+    "../intro.stories.mdx",
+    "../../../packages/ui/components/**/*.stories.mdx",
+    "../../../packages/ui/components/**/*.stories.@(js|jsx|ts|tsx)",
+  ],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
-    "storybook-addon-designs",
-    "@storybook/addon-a11y",
-    "storybook-addon-next",
+    "storybook-react-i18next",
+    {
+      name: "storybook-addon-next",
+      options: {
+        nextConfigPath: path.resolve(__dirname, "../../web/next.config.js"),
+      },
+    },
  ],
  framework: "@storybook/react",
  core: {
    builder: "webpack5",
  },
-  webpackFinal: async (config) => {
-    /**
-     * Fixes font import with /
-     * @see https://github.com/storybookjs/storybook/issues/12844#issuecomment-867544160
-     */
-    config.resolve.roots = [path.resolve(__dirname, "../public"), "node_modules"];
-    config.resolve.alias = {
-      ...config.resolve.alias,
-      "@/interfaces": path.resolve(__dirname, "../interfaces"),
-    };
-
-    /**
-     * Why webpack5... Just why?
-     * @type {{console: boolean, process: boolean, timers: boolean, os: boolean, querystring: boolean, sys: boolean, fs: boolean, url: boolean, crypto: boolean, path: boolean, zlib: boolean, punycode: boolean, util: boolean, stream: boolean, assert: boolean, string_decoder: boolean, domain: boolean, vm: boolean, tty: boolean, http: boolean, buffer: boolean, constants: boolean, https: boolean, events: boolean}}
-     */
+  staticDirs: ["../public"],
+  webpackFinal: async (config, { configType }) => {
    config.resolve.fallback = {
      fs: false,
      assert: false,
@@ -55,7 +50,6 @@ module.exports = {
      vm: false,
      zlib: false,
    };
-
    return config;
  },
 };
@@ -1,4 +1,5 @@
 <script>
+  window.global = window;
  window.isEmbed = ()=> {
    return location.search.includes("embed=")
  }
@@ -1,14 +1,9 @@
-import { RouterContext } from "next/dist/shared/lib/router-context";
-import * as NextImage from "next/image";
+import { addDecorator } from "@storybook/react";
+import { I18nextProvider } from "react-i18next";

 import "../styles/globals.css";
-
-const OriginalNextImage = NextImage.default;
-
-Object.defineProperty(NextImage, "default", {
-  configurable: true,
-  value: (props) => <OriginalNextImage {...props} unoptimized />,
-});
+import "../styles/storybook-styles.css";
+import i18n from "./i18next";

 export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
@@ -18,11 +13,10 @@ export const parameters = {
      date: /Date$/,
    },
  },
-  nextRouter: {
-    Provider: RouterContext.Provider,
-  },
 };

+addDecorator((storyFn) => <I18nextProvider i18n={i18n}>{storyFn()}</I18nextProvider>);
+
 window.getEmbedNamespace = () => {
  const url = new URL(document.URL);
  const namespace = url.searchParams.get("embed");
@@ -1,21 +0,0 @@
-# Storybook & UI
-
-Storybook is home to all of our commonly used components. We use this app to visually show all components that we have within the project + automatic type documentation generated for each component.
-
-All changes to storybook/ui must require a visual/code review.
-
- Visual reviews happen on a tool called [Chormatic](http://chromatic.com/) and these reviews will happen by our product team.
-
- Code reviews happen as normal on any changes to storybook/ui designs
-
-## Deployment
-
-To deploy this project run
-
-```bash
-  cd apps/storybook
-```
-
-```bash
-  yarn dev
-```
@@ -0,0 +1,23 @@
+import { ArgsTable } from "@storybook/addon-docs";
+import { SortType } from "@storybook/components";
+import { PropDescriptor } from "@storybook/store";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- ignore storybook addon types component as any so we have to do
+type Component = any;
+type BaseProps = {
+  include?: PropDescriptor;
+  exclude?: PropDescriptor;
+  sort?: SortType;
+};
+
+type OfProps = BaseProps & {
+  of: "." | "^" | Component;
+};
+
+export function CustomArgsTable({ of, sort }: OfProps) {
+  return (
+    <div className="custom-args-wrapper">
+      <ArgsTable of={of} sort={sort} />
+    </div>
+  );
+}
@@ -0,0 +1,32 @@
+import { classNames } from "@calcom/lib";
+
+interface ExampleProps {
+  children: React.ReactNode;
+  title: string;
+  isFullWidth?: boolean;
+}
+export const Example = ({ children, title, isFullWidth = false }: ExampleProps) => {
+  return (
+    <div className={classNames("examples-item", isFullWidth && "w-full")}>
+      <span className={classNames("examples-item-title", isFullWidth && "mb-0 mt-2")}>{title}</span>
+      <div className="examples-item-content">{children}</div>
+    </div>
+  );
+};
+
+interface ExamplesProps {
+  children: React.ReactNode;
+  title: string;
+  footnote?: React.ReactNode;
+  dark?: boolean;
+}
+
+export const Examples = ({ children, title, footnote = null, dark }: ExamplesProps) => {
+  return (
+    <div className={classNames("examples", dark && "dark")}>
+      <h2 className="examples-title">{title}</h2>
+      <div className="examples-content">{children}</div>
+      {!!footnote && <div className="examples-footnote">{footnote}</div>}
+    </div>
+  );
+};
@@ -0,0 +1,5 @@
+export const Note = ({ children }: { children: React.ReactNode }) => (
+  <div className="story-note">
+    <div>{children}</div>
+  </div>
+);
@@ -0,0 +1,21 @@
+export const Title = ({
+  title,
+  suffix,
+  subtitle,
+  offset,
+}: {
+  title: string;
+  suffix?: string;
+  subtitle?: string;
+  offset?: boolean;
+}) => {
+  return (
+    <div className={`story-title ${offset && "offset"}`}>
+      <h1>
+        {title}
+        {suffix && <span>{suffix}</span>}
+      </h1>
+      {subtitle && <p>{subtitle}</p>}
+    </div>
+  );
+};
@@ -0,0 +1,80 @@
+import React, { ReactElement, ReactNode } from "react";
+
+import { classNames } from "@calcom/lib";
+
+export function VariantsTable({
+  children,
+  titles,
+  isDark,
+  columnMinWidth = 150,
+}: {
+  children: ReactElement<RowProps> | ReactElement<RowProps>[];
+  titles: string[];
+  isDark?: boolean;
+  // Mainly useful on mobile, so components don't get squeesed
+  columnMinWidth?: number;
+}) {
+  const columns = React.Children.toArray(children) as ReactElement<RowProps>[];
+  return (
+    <div
+      className={classNames(
+        isDark &&
+          "relative py-8 before:absolute before:left-0 before:top-0 before:block before:h-full before:w-screen before:bg-[#1C1C1C]"
+      )}>
+      <div className="z-1 relative mx-auto w-full max-w-[1200px] overflow-auto pr-8 pt-6">
+        <table>
+          <RowTitles titles={titles} />
+          {columns.map((column) => (
+            <tr className="p-2 pr-6 pb-6" key={column.props.variant}>
+              <th
+                className="p-2 pr-6 pb-6 text-left text-sm font-normal text-[#8F8F8F]"
+                key={column.props.variant}>
+                {column.props.variant}
+              </th>
+              {React.Children.count(column.props.children) &&
+                React.Children.map(column.props.children, (cell) => (
+                  <td className="p-2 pr-6 pb-6" style={{ minWidth: `${columnMinWidth}px` }}>
+                    {cell}
+                  </td>
+                ))}
+            </tr>
+          ))}
+        </table>
+      </div>
+      {!isDark && (
+        <div data-mode="dark">
+          <VariantsTable titles={titles} isDark columnMinWidth={columnMinWidth}>
+            {children}
+          </VariantsTable>
+        </div>
+      )}
+    </div>
+  );
+}
+
+interface RowProps {
+  variant: string;
+  children: ReactNode;
+}
+
+/**
+ * There are two reasons we have this "empty" wrapper component:
+ * 1. In order to have an isolate group per variant, which we iterate through in the table component.
+ * 2. To have a way to pass the variant.
+ */
+export function VariantRow({ children }: RowProps) {
+  return <>{children}</>;
+}
+
+export function RowTitles({ titles }: { titles: string[] }) {
+  return (
+    <tr>
+      <th className="p-2 pr-6 pb-6 text-left text-sm font-normal text-[#8F8F8F]" />
+      {titles.map((title) => (
+        <th className="p-2 pr-6 pb-6 text-left text-sm font-normal text-[#8F8F8F]" key={title}>
+          {title}
+        </th>
+      ))}
+    </tr>
+  );
+}
@@ -0,0 +1,5 @@
+export * from "./Examples";
+export * from "./Note";
+export * from "./VariantsTable";
+export * from "./Title";
+export * from "./CustomArgsTable";
@@ -0,0 +1,11 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Introduction" />
+
+<div className="text-center flex flex-col items-center">
+  <h1 style={{marginBottom: '24px', marginTop: '36px'}}>Welcome to Cal.com UI</h1>
+  <p>This is the beginning of our storybook impovments to match Figma as close as possible. Like our Figma library, we will be adding more components as we go along.</p>
+  <p>Our <a href="https://www.figma.com/file/9MOufQNLtdkpnDucmNX10R/%E2%9D%96-Cal-DS" target="_blank">Figma</a> library is avalible for anyone to view and use. If you have any questions or concerns, please reach out to the design team.</p>
+</div>
+
+<img src="/sb-cover.jpg" />
@@ -1,5 +0,0 @@
-/// <reference types="next" />
-/// <reference types="next/image-types/global" />
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
@@ -1,7 +0,0 @@
-const withTM = require("next-transpile-modules")(["@calcom/dayjs", "@calcom/ui"]);
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-  reactStrictMode: true,
-};
-
-module.exports = withTM(nextConfig);
@@ -1,65 +1,54 @@
 {
  "name": "@calcom/storybook",
-  "version": "0.1.0",
  "private": true,
+  "version": "0.0.0",
  "scripts": {
-    "dev:next": "next dev",
-    "build:next": "next build",
-    "start": "next start",
-    "lint": "eslint . --ignore-path .gitignore",
-    "lint:report": "eslint . --format json --output-file ../../lint-results/storybook.json",
    "dev": "start-storybook -p 6006",
-    "build": "build-storybook",
-    "chromatic": "npx chromatic --project-token=56fadc9ab496"
+    "build": "build-storybook"
  },
  "dependencies": {
+    "@calcom/config": "*",
    "@calcom/dayjs": "*",
    "@calcom/ui": "*",
-    "@radix-ui/react-avatar": "^0.1.4",
-    "@radix-ui/react-collapsible": "^0.1.0",
-    "@radix-ui/react-dialog": "^0.1.0",
-    "@radix-ui/react-dropdown-menu": "^0.1.1",
-    "@radix-ui/react-id": "^0.1.0",
-    "@radix-ui/react-radio-group": "^0.1.1",
-    "@radix-ui/react-slider": "^0.1.1",
-    "@radix-ui/react-switch": "^0.1.1",
+    "@radix-ui/react-avatar": "^1.0.0",
+    "@radix-ui/react-collapsible": "^1.0.0",
+    "@radix-ui/react-dialog": "^1.0.0",
+    "@radix-ui/react-dropdown-menu": "^1.0.0",
+    "@radix-ui/react-id": "^1.0.0",
+    "@radix-ui/react-popover": "^1.0.0",
+    "@radix-ui/react-radio-group": "^1.0.0",
+    "@radix-ui/react-slider": "^1.0.0",
+    "@radix-ui/react-switch": "^1.0.0",
    "@radix-ui/react-tooltip": "^1.0.0",
-    "next": "^12.2.5",
-    "next-transpile-modules": "^9.0.0",
+    "next": "^12.3.1",
    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-feather": "^2.0.10",
-    "react-hot-toast": "^2.3.0"
+    "react-dom": "^18.2.0"
  },
  "devDependencies": {
-    "@babel/core": "^7.18.9",
-    "@calcom/config": "*",
-    "@storybook/addon-a11y": "^6.5.10",
-    "@storybook/addon-actions": "^6.5.10",
-    "@storybook/addon-essentials": "^6.5.10",
-    "@storybook/addon-interactions": "^6.5.10",
-    "@storybook/addon-links": "^6.5.10",
-    "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/builder-vite": "^0.2.2",
-    "@storybook/builder-webpack5": "^6.5.10",
-    "@storybook/manager-webpack5": "^6.5.10",
-    "@storybook/react": "^6.5.10",
-    "@tailwindcss/line-clamp": "^0.4.0",
-    "@types/node": "16.9.1",
-    "@types/react": "^18.0.9",
-    "@types/react-dom": "18.0.4",
-    "autoprefixer": "^10.4.7",
+    "@babel/core": "^7.19.6",
+    "@storybook/addon-actions": "^6.5.13",
+    "@storybook/addon-essentials": "^6.5.13",
+    "@storybook/addon-interactions": "^6.5.13",
+    "@storybook/addon-links": "^6.5.13",
+    "@storybook/builder-vite": "^0.2.4",
+    "@storybook/builder-webpack5": "^6.5.13",
+    "@storybook/manager-webpack5": "^6.5.13",
+    "@storybook/react": "^6.5.13",
+    "@storybook/testing-library": "^0.0.13",
+    "@types/react": "^18.0.17",
+    "@types/react-dom": "^18.0.6",
+    "@vitejs/plugin-react": "^2.1.0",
+    "autoprefixer": "^10.4.12",
    "babel-loader": "^8.2.5",
-    "chromatic": "^6.7.1",
-    "eslint": "^8.20.0",
-    "postcss": "^8.4.13",
-    "postcss-loader": "^7.0.0",
+    "fs": "^0.0.1-security",
+    "postcss": "^8.4.18",
+    "postcss-pseudo-companion-classes": "^0.1.1",
+    "rollup-plugin-polyfill-node": "^0.10.2",
    "storybook-addon-designs": "^6.3.1",
-    "storybook-addon-next": "^1.6.7",
-    "tailwindcss": "^3.1.6",
-    "tsconfig-paths-webpack-plugin": "^3.5.2",
-    "typescript": "^4.7.4"
-  },
-  "readme": "ERROR: No README data found!",
-  "_id": "@calcom/storybook@0.1.0"
+    "storybook-addon-next": "^1.6.9",
+    "storybook-react-i18next": "^1.1.2",
+    "tailwindcss": "^3.2.1",
+    "typescript": "^4.7.4",
+    "vite": "^2.9.15"
+  }
 }
@@ -1,9 +0,0 @@
-import type { AppProps } from "next/app";
-
-import "../styles/globals.css";
-
-function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />;
-}
-
-export default MyApp;
@@ -1,63 +0,0 @@
-import type { NextPage } from "next";
-import Head from "next/head";
-import Image from "next/image";
-
-const Home: NextPage = () => {
-  return (
-    <div className={styles.container}>
-      <Head>
-        <title>Create Next App</title>
-        <meta name="description" content="Generated by create next app" />
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
-
-      <main className={styles.main}>
-        <h1 className={styles.title}>
-          Welcome to <a href="https://nextjs.org">Next.js!</a>
-        </h1>
-
-        <p className={styles.description}>
-          Get started by editing <code className={styles.code}>pages/index.tsx</code>
-        </p>
-
-        <div className={styles.grid}>
-          <a href="https://nextjs.org/docs" className={styles.card}>
-            <h2>Documentation &rarr;</h2>
-            <p>Find in-depth information about Next.js features and API.</p>
-          </a>
-
-          <a href="https://nextjs.org/learn" className={styles.card}>
-            <h2>Learn &rarr;</h2>
-            <p>Learn about Next.js in an interactive course with quizzes!</p>
-          </a>
-
-          <a href="https://github.com/vercel/next.js/tree/canary/examples" className={styles.card}>
-            <h2>Examples &rarr;</h2>
-            <p>Discover and deploy boilerplate example Next.js projects.</p>
-          </a>
-
-          <a
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-            className={styles.card}>
-            <h2>Deploy &rarr;</h2>
-            <p>Instantly deploy your Next.js site to a public URL with Vercel.</p>
-          </a>
-        </div>
-      </main>
-
-      <footer className={styles.footer}>
-        <a
-          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer">
-          Powered by{" "}
-          <span className={styles.logo}>
-            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
-          </span>
-        </a>
-      </footer>
-    </div>
-  );
-};
-
-export default Home;
@@ -2,5 +2,21 @@ module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
+    /**
+     * We use this postcss plugin to create custom css classes for
+     * any pseudo classes (eg hover, focus) mentioned below.
+     * This way you can eg show a hover state in Storybook by adding
+     * this classname .sb-pseudo--hover to the item.
+     *
+     * These styles will only be added in storybook, and will NOT
+     * end up in the final css bundle of apps using the components.
+     */
+    "postcss-pseudo-companion-classes": {
+      prefix: "sb-pseudo--",
+      // We have to keep a restrictTo list here, because otherwise
+      // this library will have issues processing tailwind's \: prefixed classes
+      // and start adding dots everywhere, breaking this functionality.
+      restrictTo: [":hover", ":focus"],
+    },
  },
 };
@@ -1,4 +0,0 @@
-<svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
-    xmlns="http://www.w3.org/2000/svg">
-    <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
-</svg>
@@ -1,26 +0,0 @@
-import { ComponentMeta } from "@storybook/react";
-
-import Avatar from "@calcom/ui/v2/core/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 />
-    </>
-  );
-};
@@ -1,59 +0,0 @@
-import { ComponentMeta } from "@storybook/react";
-
-import AvatarGroup from "@calcom/ui/v2/core/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} />
-    </>
-  );
-};
@@ -1,58 +0,0 @@
-import { ComponentMeta } from "@storybook/react";
-import { Bell } from "react-feather";
-
-import Badge from "@calcom/ui/v2/core/Badge";
-
-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>
-);
@@ -1,46 +0,0 @@
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { Info } from "react-feather";
-
-import Banner from "@calcom/ui/v2/core/banner";
-
-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")}
-    />
-  );
-};
@@ -1,22 +0,0 @@
-import { ComponentMeta } from "@storybook/react";
-
-import Breadcrumb, { BreadcrumbItem } from "@calcom/ui/v2/core/Breadcrumb";
-
-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",
-  },
-};
@@ -1,98 +0,0 @@
-import { TooltipProvider } from "@radix-ui/react-tooltip";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-import { Trash2 } from "react-feather";
-
-import Button from "@calcom/ui/v2/core/Button";
-
-export default {
-  title: "Button",
-  component: Button,
-  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 Button>;
-
-const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
-
-export const All = () => (
-  <div>
-    <TooltipProvider>
-      <h1>Primary</h1>
-      <div className="flex space-x-2">
-        <Button aria-label="Button Text">Button Text</Button>
-        <Button disabled aria-label="Button Text">
-          Button Text
-        </Button>
-      </div>
-      <h1>Secondary</h1>
-      <div className="flex space-x-2">
-        <Button color="secondary" aria-label="Button Text">
-          Button Text
-        </Button>
-        <Button disabled color="secondary" aria-label="Button Text">
-          Button Text
-        </Button>
-        <Button size="icon" color="secondary" StartIcon={Trash2} aria-label="Button Text" />
-      </div>
-      <h1>Minimal</h1>
-      <div className="flex">
-        <Button color="minimal" aria-label="Button Text">
-          Button Text
-        </Button>
-        <Button disabled color="minimal" aria-label="Button Text">
-          Button Text
-        </Button>
-        <Button size="icon" color="minimal" StartIcon={Trash2} aria-label="Button Text" />
-      </div>
-      <h1>Destructive</h1>
-      <Button size="icon" color="destructive" StartIcon={Trash2} aria-label="Button Text" />
-      <h1>Tooltip</h1>
-      <Button
-        tooltip="Deletes EventTypes"
-        size="icon"
-        color="destructive"
-        StartIcon={Trash2}
-        aria-label="Button Text"
-      />
-    </TooltipProvider>
-  </div>
-);
-
-export const Default = Template.bind({});
-Default.args = {
-  color: "primary",
-  children: "Button Text",
-};
-
-export const Disabled = Template.bind({});
-Disabled.args = {
-  ...Default.args,
-  disabled: true,
-};
-
-export const Loading = Template.bind({});
-Loading.args = {
-  ...Default.args,
-  loading: true,
-};
-export const Icon = Template.bind({});
-Icon.args = {
-  color: "secondary",
-  StartIcon: Trash2,
-  size: "icon",
-};
@@ -1,37 +0,0 @@
-import { TooltipProvider } from "@radix-ui/react-tooltip";
-import { ComponentMeta } from "@storybook/react";
-import { ArrowLeft, ArrowRight, Clipboard, Navigation2, Trash2 } from "react-feather";
-
-import Button from "@calcom/ui/v2/core/Button";
-import ButtonGroup from "@calcom/ui/v2/core/ButtonGroup";
-
-export default {
-  title: "Button Group",
-  component: ButtonGroup,
-} as ComponentMeta<typeof ButtonGroup>;
-
-export const Default = () => (
-  <ButtonGroup>
-    <TooltipProvider>
-      <Button StartIcon={Trash2} size="icon" color="secondary" />
-      <Button StartIcon={Navigation2} size="icon" color="secondary" />
-      <Button StartIcon={Clipboard} size="icon" color="secondary" />
-    </TooltipProvider>
-  </ButtonGroup>
-);
-
-export const Combined = () => (
-  <div className="flex flex-col space-y-2">
-    <TooltipProvider>
-      <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>
-    </TooltipProvider>
-  </div>
-);
@@ -1,79 +0,0 @@
-import { ComponentMeta } from "@storybook/react";
-import { useState } from "react";
-
-import Card, { BaseCardProps } from "@calcom/ui/v2/core/Card";
-
-export default {
-  title: "Cards",
-  component: Card,
-} as ComponentMeta<typeof Card>;
-
-const profileProps: BaseCardProps[] = [
-  {
-    variant: "ProfileCard",
-    title: "Alex Fisher",
-    image:
-      "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
-    description: "Co-founder at Attio. Book a meeting to discuss enterprise deals.",
-  },
-  {
-    variant: "ProfileCard",
-    title: "Julian Wan",
-    image:
-      "https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1760&q=80",
-    description: "Co-founder at Attio. Book a meeting to discuss enterprise deals.",
-  },
-];
-
-export const Profile = () => {
-  return (
-    <div className="flex w-full space-x-2 bg-gray-200 p-4">
-      <Card {...profileProps[0]} />
-      <Card {...profileProps[1]} />
-    </div>
-  );
-};
-
-const appStoreProps: BaseCardProps = {
-  variant: "AppStore",
-  title: "Giphy",
-  image: "https://app.cal.com/api/app-store/giphy/icon.svg",
-  description: "Add GIFs to spice up your booking confirmations.",
-  actionButton: {
-    href: "#",
-    child: "View Details",
-  },
-};
-
-export const AppStore = () => {
-  return (
-    <div className="w-full bg-gray-200 p-4">
-      <Card {...appStoreProps} />
-    </div>
-  );
-};
-
-const sidebarCardProps: BaseCardProps = {
-  variant: "SidebarCard",
-  thumbnailUrl: "https://img.youtube.com/vi/60HJt8DOVNo/0.jpg",
-  mediaLink: "https://www.youtube.com/watch?v=60HJt8DOVNo",
-  title: "Dynamic boooking links",
-  description: "Booking link that allows people to quickly schedule meetings.",
-  learnMore: {
-    href: "https://cal.com/blog/cal-v-1-9",
-    text: "Learn more",
-  },
-};
-
-export const SidebarCard = () => {
-  const [visible, setVisible] = useState(true); // save state in localStorage, cookie or db
-  return (
-    <header className="w-full max-w-[225px] bg-gray-100 p-3">
-      {visible && (
-        <div>
-          <Card {...sidebarCardProps} actionButton={{ onClick: () => setVisible(false), child: "Dismiss" }} />
-        </div>
-      )}
-    </header>
-  );
-};
@@ -1,31 +0,0 @@
-import { ComponentMeta } from "@storybook/react";
-
-import Checkbox from "@calcom/ui/v2/core/form/Checkbox";
-
-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 />
-  </>
-);
@@ -1,208 +0,0 @@
-import { useState } from "react";
-
-import ColorPicker from "@calcom/ui/v2/core/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)} />;
-};
@@ -1,17 +0,0 @@
-import { useState } from "react";
-
-import DatePicker from "@calcom/ui/v2/modules/booker/DatePicker";
-
-export default {
-  title: "Datepicker",
-  component: DatePicker,
-};
-
-export const Default = () => {
-  const [selected, setSelected] = useState<Date>(new Date());
-  return (
-    <div style={{ width: "455px" }}>
-      {/* <DatePicker selected={selected} onChange={setSelected} locale="en" /> */}
-    </div>
-  );
-};
@@ -1,26 +0,0 @@
-import { ComponentMeta } from "@storybook/react";
-import { Bell } from "react-feather";
-
-import EmptyScreen from "@calcom/ui/v2/core/EmptyScreen";
-
-export default {
-  title: "pattern/Empty Screen",
-  component: EmptyScreen,
-  decorators: [
-    (Story) => (
-      <div className="flex items-center justify-center">
-        <Story />
-      </div>
-    ),
-  ],
-} as ComponentMeta<typeof EmptyScreen>;
-
-export const Default = () => (
-  <EmptyScreen
-    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 "
-    buttonText="Veniam ut ipsum"
-    buttonOnClick={() => console.log("Button Clicked")}
-  />
-);
@@ -1,27 +0,0 @@
-import { ComponentMeta } from "@storybook/react";
-import { useState } from "react";
-
-import FormStep from "@calcom/ui/v2/core/form/FormStep";
-
-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>
-  );
-};
@@ -1,39 +0,0 @@
-// Disabling until we figure out what is happening with the RouterMock.
-import { ComponentMeta } from "@storybook/react";
-
-import { HorizontalTabItemProps } from "@calcom/ui/v2/core/navigation/tabs/HorizontalTabItem";
-import HorizontalTabs from "@calcom/ui/v2/core/navigation/tabs/HorizontalTabs";
-
-export default {
-  title: "Horizontal Tabs",
-  component: HorizontalTabs,
-} as ComponentMeta<typeof HorizontalTabs>;
-
-const HorizontalTabsPropsDefault: HorizontalTabItemProps[] = [
-  {
-    name: "Tab One",
-    href: "/tab-one",
-  },
-  {
-    name: "Tab Two",
-    href: "/tab-two",
-  },
-  {
-    name: "Tab Disabled",
-    href: "/tab-disabled",
-    disabled: true,
-  },
-];
-
-export const Default = () => (
-  <div className="w-full p-4">
-    <HorizontalTabs tabs={HorizontalTabsPropsDefault} />
-  </div>
-);
-
-Default.parameters = {
-  nextRouter: {
-    path: "/[page]",
-    asPath: "/tab-one",
-  },
-};
@@ -1,68 +0,0 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-import { Copy } from "react-feather";
-
-import { TextAreaField, TextField } from "@calcom/ui/v2/core/form/fields";
-import DatePicker from "@calcom/ui/v2/modules/booker/DatePicker";
-
-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()} />;
@@ -1,50 +0,0 @@
-import { useState } from "react";
-import { Info } from "react-feather";
-
-import { Button, Dialog, DialogContent, DialogTrigger, TextField } from "@calcom/ui/v2";
-
-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>
-  );
-};
@@ -1,24 +0,0 @@
-import { ComponentMeta } from "@storybook/react";
-import { Toaster } from "react-hot-toast";
-
-import { Button, showToast } from "@calcom/ui/v2";
-
-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>
-);
@@ -1,52 +0,0 @@
-import { ComponentMeta } from "@storybook/react";
-import { Search } from "react-feather";
-
-import { Button, TextField } from "@calcom/ui/v2";
-import PageHeader from "@calcom/ui/v2/core/PageHeader";
-
-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"
-      />
-    }
-  />
-);
@@ -1,19 +0,0 @@
-import * as Radio from "@calcom/ui/v2/core/form/radio-area/Radio";
-import { RadioField } from "@calcom/ui/v2/core/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>
-  );
-};
@@ -1,10 +0,0 @@
-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 options={[{ value: "text" }]} />;
@@ -1,15 +0,0 @@
-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>
-);
@@ -1,67 +0,0 @@
-// 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} />
-  </div>
-);
-export const Active = () => (
-  <div className="h-20 w-full bg-gray-100 p-4">
-    <VerticalTabItem {...TabItemProps} />
-  </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 />
-  </div>
-);
-
-export const NoIconNoInfo = () => (
-  <div className="h-20 w-full bg-gray-100 p-4">
-    <VerticalTabItem name="Event Setup" href="/settings/event" />
-  </div>
-);
-
-export const IconNoInfo = () => (
-  <div className="h-20 w-full bg-gray-100 p-4">
-    <VerticalTabItem name="Event Setup" href="/settings/event" icon={Link} />
-  </div>
-);
-
-export const IconNoInfoActive = () => (
-  <div className="h-20 w-full bg-gray-100 p-4">
-    <VerticalTabItem name="Event Setup" href="/settings/events" icon={Link} />
-  </div>
-);
-
-IconNoInfoActive.paramaters = {
-  nextRouter: {
-    path: "/settings/[tab]",
-    asPath: "/settings/events",
-  },
-};
@@ -1,85 +0,0 @@
-// 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";
-
-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",
-  },
-};
@@ -2,10 +2,4 @@
@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;
-}
+@import "../../../packages/ui/styles/shared-globals.css"
@@ -0,0 +1,189 @@
+.sbdocs {
+  font-family: 'Inter var' !important;
+  padding: 0!important;
+}
+
+#docs-root {
+  overflow: hidden;
+}
+
+.sbdocs.sbdocs-h1 {
+  font-family: "Cal Sans", "sans-serif" !important;
+  font-weight: 600;
+  font-size: 36px;
+  margin: 0 0 82px 0;
+}
+
+.sbdocs.sbdocs-h2 {
+  font-size: 20px;
+  font-weight: 500;
+  border: none;
+  border-top: 2px solid rgba(0, 0, 0, 0.12);
+  padding-top: 12px!important;
+  padding-bottom: 12px!important;
+  margin: 82px 0 0 0;
+}
+
+.sbdocs.sbdocs-p {
+  max-width: 560px;
+  margin: 0 0 12px 0;
+}
+
+.sbdocs.sbdocs-content {
+  width: 1200px;
+  max-width: 100%;
+}
+
+/** Docs table **/
+.custom-args-wrapper{
+  max-height: 600px;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  margin-bottom: 1rem;
+}
+
+.docblock-argstable-body {
+  box-shadow: none!important;
+  font-size: 14px;
+}
+
+/* .docblock-argstable-head tr th, */
+.docblock-argstable-body tr td {
+  /* padding-left: 0!important; */
+  padding: 20px !important;
+}
+
+/** Column titles **/
+.docblock-argstable-body tr td > span,
+.docblock-argstable-head tr th > span {
+  color: #525252 !important;
+  font-weight: 500 !important;
+}
+
+.docblock-argstable-body div p,
+.docblock-argstable-body div span {
+  color: #8F8F8F !important;
+}
+
+/** Custom components **/
+.story-title {
+  margin: 0 0 82px 0;
+}
+
+.story-title.offset {
+  margin-top: 100px;
+}
+
+.story-title h1 {
+  font-family: "Cal Sans", "sans-serif" !important;
+  font-weight: 600;
+  font-size: 36px;
+}
+
+.story-title h1 span {
+  color: #9CA3AF;
+  font-family: 'Inter var';
+  font-weight: normal;
+  display: inline-block;
+  margin-left: 8px;
+}
+
+.story-title p {
+  color: #111827;
+  font-size: 16px;
+}
+
+.examples {
+  background-color: #F9FAFB;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 20px;
+}
+
+.examples-content {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  padding: 30px 0;
+}
+
+.examples-title {
+  color: #8F8F8F;
+  font-size: 14px;
+  margin-bottom: 30px;
+}
+
+.examples-item-title {
+  font-size: 12px;
+  color: #8F8F8F;
+  margin-bottom: 12px;
+  display: block;
+}
+
+.examples-item {
+  margin: 0 20px;
+}
+
+.examples-footnote p,
+.examples-footnote ul,
+.examples-footnote li {
+  color: #8F8F8F;
+  font-size: 14px;
+}
+
+.examples-footnote ul {
+  padding-left: 8px;
+}
+
+.examples-footnote li {
+  margin: 0!important;
+}
+
+.story-note {
+  background-color: #F9FAFB;
+  font-size: 14px;
+  padding: 20px;
+  margin-bottom: 12px;
+  border-radius: 8px;
+}
+
+.story-note > div {
+  max-width: 600px;
+}
+
+/** SB Docs Preview **/
+.sbdocs-preview {
+  width: 100vw;
+  left: calc((100vw - 1200px) / -2);
+  box-shadow: none !important;
+  margin: 0 !important;
+  border: none !important;
+  border-radius: none!important;
+}
+
+.docs-story > div:first-child {
+  padding: 0!important;
+  margin: 0!important;
+}
+
+.docs-story .innerZoomElementWrapper > div {
+  border: none !important;
+}
+
+.sb-main-padded {
+  padding: 0!important;
+}
+
+@media screen and (max-width: 1200px) {
+  .sbdocs-preview {
+    left: -24px;
+    width: calc(100vw + 48px);
+    padding-left: 12px;
+    padding-right: 12px;
+  }
+
+  .sbdocs.sbdocs-content {
+    padding: 24px !important;
+  }
+}
@@ -1,167 +1,7 @@
+const base = require("@calcom/config/tailwind-preset");
+/** @type {import('tailwindcss').Config} */
 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",
-      }),
-    },
-  },
+  ...base,
+  darkMode: ["class", '[data-mode="dark"]'],
+  content: [...base.content, "../../packages/ui/**/*.{js,ts,jsx,tsx,mdx}", "./stories/**/*.{js,ts,tsx,jsx}"],
 };
@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  }
+}
@@ -14,7 +14,7 @@
  "dependencies": {
    "highlight.js": "^11.6.0",
    "isarray": "2.0.5",
-    "next": "^12.2.5",
+    "next": "^12.3.1",
    "openapi-snippet": "^0.13.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
@@ -22,8 +22,8 @@
  },
  "devDependencies": {
    "@types/node": "16.9.1",
-    "@types/react": "^18.0.9",
-    "@types/react-dom": "18.0.4",
+    "@types/react": "^18.0.17",
+    "@types/react-dom": "^18.0.6",
    "typescript": "^4.7.4"
  }
 }
@@ -21,6 +21,7 @@ playwright/reports/*
 # next.js
 /.next/
 /out/
+next-env.d.ts

 # production
 /build
@@ -66,4 +67,6 @@ tsconfig.tsbuildinfo
 public/embed

 # Copied app-store images
-public/app-store
+public/app-store
+# Sentry
+.sentryclirc
@@ -426,7 +426,7 @@ paths:
                        - installed: true
                          type: caldav_calendar
                          credential: null
-                          title: CalDav Server
+                          title: CalDav (Beta)
                          imageSrc: integrations/caldav.svg
                          description: For personal and business calendars
                    __N_SSP: true
@@ -598,60 +598,6 @@ paths:
      summary: Gets and stores the OAuth token
      tags:
        - Integrations
-  /api/user/profile:
-    patch:
-      description: Updates a user's profile.
-      summary: Updates a user's profile
-      tags:
-        - User
-      requestBody:
-        content:
-          application/json:
-            schema:
-              type: object
-              properties:
-                name:
-                  type: string
-                description:
-                  type: string
-                avatar:
-                  type: string
-                timeZone:
-                  type: string
-                weekStart:
-                  type: string
-                hideBranding:
-                  type: string
-                theme:
-                  type: string
-      responses:
-        "200":
-          description: OK
-          content:
-            application/json:
-              schema:
-                type: object
-                properties:
-                  message:
-                    type: string
-        "401":
-          description: Unauthorized
-          content:
-            application/json:
-              schema:
-                type: object
-                properties:
-                  message:
-                    type: string
-        "500":
-          description: Internal Server Error
-          content:
-            application/json:
-              schema:
-                type: object
-                properties:
-                  message:
-                    type: string
  /api/me:
    get:
      description: Gets current user's profile.
@@ -686,71 +632,6 @@ paths:
                properties:
                  message:
                    type: string
-  /api/user/membership:
-    get:
-      description: Get a list of the teams the user has joined.
-      summary: Get the teams a user is joined to
-      tags:
-        - User
-      requestBody:
-        content:
-          application/json:
-            schema:
-              type: object
-      responses:
-        "200":
-          description: OK
-          content:
-            application/json:
-              schema:
-                type: object
-                properties:
-                  message:
-                    type: string
-        "401":
-          description: Unauthorized
-          content:
-            application/json:
-              schema:
-                type: object
-                properties:
-                  message:
-                    type: string
-        "500":
-          description: Internal Server Error
-          content:
-            application/json:
-              schema:
-                type: object
-                properties:
-                  message:
-                    type: string
-    patch:
-      description: Accept team invitation
-      summary: Accept team invitation.
-      tags:
-        - User
-      requestBody:
-        content:
-          application/json:
-            schema:
-              type: object
-              properties:
-                teamId:
-                  type: string
-    delete:
-      description: Leave team or decline membership invite of current user
-      summary: Leave team or decline team invite.
-      tags:
-        - User
-      requestBody:
-        content:
-          application/json:
-            schema:
-              type: object
-              properties:
-                teamId:
-                  type: string
  "/api/{team}":
    delete:
      description: Deletes a team
@@ -1,7 +1,7 @@
 import { useState } from "react";

 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Icon } from "@calcom/ui/Icon";
+import { Icon } from "@calcom/ui";

 export default function AddToHomescreen() {
  const { t } = useLocale();
@@ -36,7 +36,7 @@ const ImageOption = (optionProps: OptionProps<{ [key: string]: string; type: App

 const AdditionalCalendarSelector = ({ isLoading }: AdditionalCalendarSelectorProps): JSX.Element | null => {
  const { t } = useLocale();
-  const query = trpc.useQuery(["viewer.integrations", { variant: "calendar", onlyInstalled: true }]);
+  const query = trpc.viewer.integrations.useQuery({ variant: "calendar", onlyInstalled: true });

  return (
    <QueryCell
@@ -1,314 +0,0 @@
-import Link from "next/link";
-import React, { useEffect, useState } from "react";
-
-import useAddAppMutation from "@calcom/app-store/_utils/useAddAppMutation";
-import { InstallAppButton } from "@calcom/app-store/components";
-import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import showToast from "@calcom/lib/notification";
-import { trpc } from "@calcom/trpc/react";
-import { App as AppType } from "@calcom/types/App";
-import { Button, SkeletonButton } from "@calcom/ui";
-import Badge from "@calcom/ui/Badge";
-import { Icon } from "@calcom/ui/Icon";
-import Shell from "@calcom/ui/Shell";
-
-const Component = ({
-  name,
-  type,
-  logo,
-  body,
-  categories,
-  author,
-  price = 0,
-  commission,
-  isGlobal = false,
-  feeType,
-  docs,
-  website,
-  email,
-  tos,
-  privacy,
-  isProOnly,
-}: Parameters<typeof App>[0]) => {
-  const { t } = useLocale();
-  const { data: user } = trpc.useQuery(["viewer.me"]);
-
-  const mutation = useAddAppMutation(null, {
-    onSuccess: () => {
-      showToast("App successfully installed", "success");
-    },
-    onError: (error) => {
-      if (error instanceof Error) showToast(error.message || "App could not be installed", "error");
-    },
-  });
-
-  const priceInDollar = Intl.NumberFormat("en-US", {
-    style: "currency",
-    currency: "USD",
-    useGrouping: false,
-  }).format(price);
-  const [installedAppCount, setInstalledAppCount] = useState(0);
-  const [isLoading, setIsLoading] = useState(true);
-  useEffect(() => {
-    async function getInstalledApp(appCredentialType: string) {
-      const queryParam = new URLSearchParams();
-      queryParam.set("app-credential-type", appCredentialType);
-      try {
-        const result = await fetch(`/api/app-store/installed?${queryParam.toString()}`, {
-          method: "GET",
-          headers: {
-            "Content-Type": "application/json",
-          },
-        }).then((data) => {
-          setIsLoading(false);
-          return data;
-        });
-        if (result.status === 200) {
-          const res = await result.json();
-          setInstalledAppCount(res.count);
-        }
-      } catch (error) {
-        if (error instanceof Error) {
-          console.log(error.message);
-        }
-      }
-    }
-    getInstalledApp(type);
-  }, [type]);
-  const allowedMultipleInstalls = categories.indexOf("calendar") > -1;
-
-  return (
-    <div className="-mx-4 md:-mx-8">
-      <div className="bg-gray-50 px-8">
-        <Link href="/apps">
-          <a className="mt-2 inline-flex px-1 py-2 text-sm text-gray-500 hover:bg-gray-100 hover:text-gray-800">
-            <Icon.FiChevronLeft className="h-5 w-5" /> {t("browse_apps")}
-          </a>
-        </Link>
-        <div className="items-center justify-between py-4 sm:flex sm:py-8">
-          <div className="flex">
-            <img className="h-16 w-16 rounded-sm" src={logo} alt={name} />
-            <header className="px-4 py-2">
-              <div className="flex items-center">
-                <h1 className="font-cal text-xl text-gray-900">{name}</h1>
-                {isProOnly && user?.plan === "FREE" ? (
-                  <Badge className="ml-2" variant="default">
-                    PRO
-                  </Badge>
-                ) : null}
-              </div>
-              <h2 className="text-sm text-gray-500">
-                <span className="capitalize">{categories[0]}</span> • {t("published_by", { author })}
-              </h2>
-            </header>
-          </div>
-
-          <div className="mt-4 sm:mt-0 sm:text-right">
-            {!isLoading ? (
-              isGlobal || (installedAppCount > 0 && allowedMultipleInstalls) ? (
-                <div className="flex space-x-3">
-                  <Button StartIcon={Icon.FiCheck} color="secondary" disabled>
-                    {installedAppCount > 0
-                      ? t("active_install", { count: installedAppCount })
-                      : t("globally_install")}
-                  </Button>
-                  {!isGlobal && (
-                    <InstallAppButton
-                      type={type}
-                      isProOnly={isProOnly}
-                      render={({ useDefaultComponent, ...props }) => {
-                        if (useDefaultComponent) {
-                          props = {
-                            onClick: () => {
-                              mutation.mutate({ type });
-                            },
-                            loading: mutation.isLoading,
-                          };
-                        }
-                        return (
-                          <Button StartIcon={Icon.FiPlus} {...props} data-testid="install-app-button">
-                            {t("add_another")}
-                          </Button>
-                        );
-                      }}
-                    />
-                  )}
-                </div>
-              ) : installedAppCount > 0 ? (
-                <Button color="secondary" disabled title="App already installed">
-                  {t("installed")}
-                </Button>
-              ) : (
-                <InstallAppButton
-                  type={type}
-                  isProOnly={isProOnly}
-                  render={({ useDefaultComponent, ...props }) => {
-                    if (useDefaultComponent) {
-                      props = {
-                        onClick: () => {
-                          mutation.mutate({ type });
-                        },
-                        loading: mutation.isLoading,
-                      };
-                    }
-                    return (
-                      <Button data-testid="install-app-button" {...props}>
-                        {t("install_app")}
-                      </Button>
-                    );
-                  }}
-                />
-              )
-            ) : (
-              <SkeletonButton width="24" height="10" />
-            )}
-            {price !== 0 && (
-              <small className="block text-right">
-                {feeType === "usage-based" ? commission + "% + " + priceInDollar + "/booking" : priceInDollar}
-                {feeType === "monthly" && "/" + t("month")}
-              </small>
-            )}
-          </div>
-        </div>
-      </div>
-
-      <div className="justify-between px-8 py-10 md:flex">
-        <div className="prose-sm prose mb-6">{body}</div>
-        <div className="md:max-w-80 flex-1 md:ml-8">
-          <h4 className="font-medium text-gray-900 ">{t("categories")}</h4>
-          <div className="space-x-2">
-            {categories.map((category) => (
-              <Link href={"/apps/categories/" + category} key={category}>
-                <a>
-                  <Badge variant="success">{category}</Badge>
-                </a>
-              </Link>
-            ))}
-          </div>
-          <h4 className="mt-8 font-medium text-gray-900 ">{t("pricing")}</h4>
-          <small>
-            {price === 0 ? (
-              "Free"
-            ) : (
-              <>
-                {Intl.NumberFormat("en-US", {
-                  style: "currency",
-                  currency: "USD",
-                  useGrouping: false,
-                }).format(price)}
-                {feeType === "monthly" && "/" + t("month")}
-              </>
-            )}
-          </small>
-          <h4 className="mt-8 mb-2 font-medium text-gray-900 ">{t("learn_more")}</h4>
-          <ul className="prose -ml-1 -mr-1 text-xs leading-5">
-            {docs && (
-              <li>
-                <a
-                  target="_blank"
-                  rel="noreferrer"
-                  className="text-blue-500 no-underline hover:underline"
-                  href={docs}>
-                  <Icon.FiBookOpen className="mr-1 -mt-1 inline h-4 w-4" />
-                  {t("documentation")}
-                </a>
-              </li>
-            )}
-            {website && (
-              <li>
-                <a
-                  target="_blank"
-                  rel="noreferrer"
-                  className="text-blue-500 no-underline hover:underline"
-                  href={website}>
-                  <Icon.FiExternalLink className="mr-1 -mt-px inline h-4 w-4" />
-                  {website.replace("https://", "")}
-                </a>
-              </li>
-            )}
-            {email && (
-              <li>
-                <a
-                  target="_blank"
-                  rel="noreferrer"
-                  className="text-blue-500 no-underline hover:underline"
-                  href={"mailto:" + email}>
-                  <Icon.FiMail className="mr-1 -mt-px inline h-4 w-4" />
-
-                  {email}
-                </a>
-              </li>
-            )}
-            {tos && (
-              <li>
-                <a
-                  target="_blank"
-                  rel="noreferrer"
-                  className="text-blue-500 no-underline hover:underline"
-                  href={tos}>
-                  <Icon.FiFile className="mr-1 -mt-px inline h-4 w-4" />
-                  {t("terms_of_service")}
-                </a>
-              </li>
-            )}
-            {privacy && (
-              <li>
-                <a
-                  target="_blank"
-                  rel="noreferrer"
-                  className="text-blue-500 no-underline hover:underline"
-                  href={privacy}>
-                  <Icon.FiShield className="mr-1 -mt-px inline h-4 w-4" />
-                  {t("privacy_policy")}
-                </a>
-              </li>
-            )}
-          </ul>
-          <hr className="my-6" />
-          <small className="leading-1 block text-gray-500">
-            Every app published on the Cal.com App Store is open source and thoroughly tested via peer
-            reviews. Nevertheless, Cal.com, Inc. does not endorse or certify these apps unless they are
-            published by Cal.com. If you encounter inappropriate content or behaviour please report it.
-          </small>
-          <a className="mt-2 block text-xs text-red-500" href="mailto:help@cal.com">
-            <Icon.FiFlag className="inline h-3 w-3" /> Report App
-          </a>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default function App(props: {
-  name: string;
-  type: AppType["type"];
-  isGlobal?: AppType["isGlobal"];
-  logo: string;
-  body: React.ReactNode;
-  categories: string[];
-  author: string;
-  pro?: boolean;
-  price?: number;
-  commission?: number;
-  feeType?: AppType["feeType"];
-  docs?: string;
-  website?: string;
-  email: string; // required
-  tos?: string;
-  privacy?: string;
-  licenseRequired: AppType["licenseRequired"];
-  isProOnly: AppType["isProOnly"];
-}) {
-  return (
-    <Shell large isPublic>
-      {props.licenseRequired ? (
-        <LicenseRequired>
-          <Component {...props} />
-        </LicenseRequired>
-      ) : (
-        <Component {...props} />
-      )}
-    </Shell>
-  );
-}
@@ -23,7 +23,7 @@ const DestinationCalendarSelector = ({
  destinationCalendar,
 }: Props): JSX.Element | null => {
  const { t } = useLocale();
-  const query = trpc.useQuery(["viewer.connectedCalendars"]);
+  const query = trpc.viewer.connectedCalendars.useQuery();
  const [selectedOption, setSelectedOption] = useState<{ value: string; label: string } | null>(null);

  // Extra styles to show prefixed text in react-select
@@ -107,9 +107,10 @@ const DestinationCalendarSelector = ({
          control: (defaultStyles) => {
            return {
              ...defaultStyles,
-              borderRadius: "2px",
+              borderRadius: "6px",
              "@media only screen and (min-width: 640px)": {
                ...(defaultStyles["@media only screen and (min-width: 640px)"] as object),
+                width: "100%",
              },
            };
          },
@@ -135,6 +136,9 @@ const DestinationCalendarSelector = ({
        }}
        isLoading={isLoading}
        value={selectedOption}
+        components={{
+          IndicatorSeparator: () => null,
+        }}
      />
    </div>
  );
@@ -1,19 +1,26 @@
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@radix-ui/react-collapsible";
 import classNames from "classnames";
-import { useRouter } from "next/router";
+import { NextRouter, useRouter } from "next/router";
 import { createRef, forwardRef, MutableRefObject, RefObject, useRef, useState } from "react";
 import { components, ControlProps } from "react-select";

+import { APP_NAME, EMBED_LIB_URL, WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import showToast from "@calcom/lib/notification";
-import { Button, Switch } from "@calcom/ui";
-import { Dialog, DialogClose, DialogContent } from "@calcom/ui/Dialog";
-import { Icon } from "@calcom/ui/Icon";
-import { InputLeading, Label, TextArea, TextField } from "@calcom/ui/form/fields";
+import {
+  Button,
+  Dialog,
+  DialogClose,
+  DialogContent,
+  HorizontalTabs,
+  Icon,
+  InputLeading,
+  Label,
+  showToast,
+  Switch,
+  TextArea,
+  TextField,
+} from "@calcom/ui";

-import { EMBED_LIB_URL, WEBAPP_URL } from "@lib/config/constants";
-
-import NavTabs from "@components/NavTabs";
 import ColorPicker from "@components/ui/colorpicker";
 import Select from "@components/ui/form/Select";

@@ -38,7 +45,7 @@ type PreviewState = {
    brandColor: string;
  };
 };
-const queryParamsForDialog = ["embedType", "tabName", "embedUrl"];
+const queryParamsForDialog = ["embedType", "embedTabName", "embedUrl"];

 const getDimension = (dimension: string) => {
  if (dimension.match(/^\d+$/)) {
@@ -47,6 +54,26 @@ const getDimension = (dimension: string) => {
  return dimension;
 };

+const goto = (router: NextRouter, searchParams: Record<string, string>) => {
+  const newQuery = new URLSearchParams(router.asPath.split("?")[1]);
+  Object.keys(searchParams).forEach((key) => {
+    newQuery.set(key, searchParams[key]);
+  });
+  router.push(`${router.asPath.split("?")[0]}?${newQuery.toString()}`, undefined, {
+    shallow: true,
+  });
+};
+
+const removeQueryParams = (router: NextRouter, queryParams: string[]) => {
+  const params = new URLSearchParams(window.location.search);
+
+  queryParams.forEach((param) => {
+    params.delete(param);
+  });
+
+  router.push(`${router.asPath.split("?")[0]}?${params.toString()}`);
+};
+
 /**
 * It allows us to show code with certain reusable blocks indented according to the block variable placement
 * So, if you add a variable ${abc} with indentation of 4 spaces, it will automatically indent all newlines in `abc` with the same indent before constructing the final string
@@ -453,7 +480,7 @@ const embeds: {
 const tabs = [
  {
    name: "HTML",
-    tabName: "embed-code",
+    href: "embedTabName=embed-code",
    icon: Icon.FiCode,
    type: "code",
    Component: forwardRef<
@@ -470,7 +497,9 @@ const tabs = [
      return (
        <>
          <div>
-            <small className="flex py-4 text-neutral-500">{t("place_where_cal_widget_appear")}</small>
+            <small className="flex py-4 text-neutral-500">
+              {t("place_where_cal_widget_appear", { appName: APP_NAME })}
+            </small>
          </div>
          <TextArea
            data-testid="embed-code"
@@ -504,7 +533,7 @@ ${getEmbedTypeSpecificString({ embedFramework: "HTML", embedType, calLink, previ
  },
  {
    name: "React",
-    tabName: "embed-react",
+    href: "embedTabName=embed-react",
    icon: Icon.FiCode,
    type: "code",
    Component: forwardRef<
@@ -544,8 +573,8 @@ ${getEmbedTypeSpecificString({ embedFramework: "react", embedType, calLink, prev
  },
  {
    name: "Preview",
-    tabName: "embed-preview",
-    icon: Icon.FiEye,
+    href: "embedTabName=embed-preview",
+    icon: Icon.FiTrello,
    type: "iframe",
    Component: forwardRef<
      HTMLIFrameElement | HTMLTextAreaElement | null,
@@ -561,7 +590,7 @@ ${getEmbedTypeSpecificString({ embedFramework: "react", embedType, calLink, prev
        <iframe
          ref={ref as typeof ref & MutableRefObject<HTMLIFrameElement>}
          data-testid="embed-preview"
-          className="border-1 h-[75vh] border"
+          className="border-1 h-[100vh] border"
          width="100%"
          height="100%"
          src={`${WEBAPP_URL}/embed/preview.html?embedType=${embedType}&calLink=${calLink}`}
@@ -591,13 +620,13 @@ const ChooseEmbedTypesDialogContent = () => {
  const { t } = useLocale();
  const router = useRouter();
  return (
-    <DialogContent size="lg">
+    <DialogContent type="creation" size="lg">
      <div className="mb-4">
        <h3 className="text-lg font-bold leading-6 text-gray-900" id="modal-title">
-          {t("how_you_want_add_cal_site")}
+          {t("how_you_want_add_cal_site", { appName: APP_NAME })}
        </h3>
        <div>
-          <p className="text-sm text-gray-500">{t("choose_ways_put_cal_site")}</p>
+          <p className="text-sm text-gray-500">{t("choose_ways_put_cal_site", { appName: APP_NAME })}</p>
        </div>
      </div>
      <div className="flex items-start">
@@ -607,11 +636,8 @@ const ChooseEmbedTypesDialogContent = () => {
            key={index}
            data-testid={embed.type}
            onClick={() => {
-              router.push({
-                query: {
-                  ...router.query,
-                  embedType: embed.type,
-                },
+              goto(router, {
+                embedType: embed.type,
              });
            }}>
            <div className="order-none box-border flex-none rounded-sm border border-solid bg-white">
@@ -636,6 +662,13 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
  const { t } = useLocale();
  const router = useRouter();
  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const s = (href: string) => {
+    const searchParams = new URLSearchParams(router.asPath.split("?")[1] || "");
+    const [a, b] = href.split("=");
+    searchParams.set(a, b);
+    return `${router.asPath.split("?")[0]}?${searchParams.toString()}`;
+  };
+  const parsedTabs = tabs.map((t) => ({ ...t, href: s(t.href) }));
  const embedCodeRefs: Record<typeof tabs[0]["name"], RefObject<HTMLTextAreaElement>> = {};
  tabs
    .filter((tab) => tab.type === "code")
@@ -662,28 +695,13 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
  });

  const close = () => {
-    const noPopupQuery = {
-      ...router.query,
-    };
-
-    delete noPopupQuery.dialog;
-
-    queryParamsForDialog.forEach((queryParam) => {
-      delete noPopupQuery[queryParam];
-    });
-
-    router.push({
-      query: noPopupQuery,
-    });
+    removeQueryParams(router, ["dialog", ...queryParamsForDialog]);
  };

  // Use embed-code as default tab
-  if (!router.query.tabName) {
-    router.query.tabName = "embed-code";
-    router.push({
-      query: {
-        ...router.query,
-      },
+  if (!router.query.embedTabName) {
+    goto(router, {
+      embedTabName: "embed-code",
    });
  }

@@ -780,302 +798,289 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
  ];

  return (
-    <DialogContent size="xl">
+    <DialogContent size="xl" className="p-0.5" type="creation">
      <div className="flex">
-        <div className="flex w-1/3 flex-col bg-white p-6">
+        <div className="flex w-1/3 flex-col bg-gray-50 p-8">
          <h3 className="mb-2 flex text-xl font-bold leading-6 text-gray-900" id="modal-title">
            <button
              onClick={() => {
-                const newQuery = { ...router.query };
-                delete newQuery.embedType;
-                delete newQuery.tabName;
-                router.push({
-                  query: {
-                    ...newQuery,
-                  },
-                });
+                removeQueryParams(router, ["embedType", "embedTabName"]);
              }}>
              <Icon.FiArrowLeft className="mr-4 w-4" />
            </button>
            {embed.title}
          </h3>
          <hr className={classNames("mt-4", embedType === "element-click" ? "hidden" : "")} />
-          <div className={classNames("mt-4 font-medium", embedType === "element-click" ? "hidden" : "")}>
-            <Collapsible
-              open={isEmbedCustomizationOpen}
-              onOpenChange={() => setIsEmbedCustomizationOpen((val) => !val)}>
-              <CollapsibleTrigger
-                type="button"
-                className="flex w-full items-center text-base font-medium text-neutral-900">
-                <div>
-                  {embedType === "inline"
-                    ? "Inline Embed Customization"
-                    : embedType === "floating-popup"
-                    ? "Floating Popup Customization"
-                    : "Element Click Customization"}
-                </div>
-                <Icon.FiChevronRight
-                  className={`${
-                    isEmbedCustomizationOpen ? "rotate-90 transform" : ""
-                  } ml-auto h-5 w-5 text-neutral-500`}
-                />
-              </CollapsibleTrigger>
-              <CollapsibleContent className="text-sm">
-                <div className={classNames("mt-6", embedType === "inline" ? "block" : "hidden")}>
-                  {/*TODO: Add Auto/Fixed toggle from Figma */}
-                  <div className="text-sm">Embed Window Sizing</div>
-                  <div className="justify-left flex items-center">
-                    <TextField
-                      name="width"
-                      labelProps={{ className: "hidden" }}
-                      required
-                      value={previewState.inline.width}
-                      onChange={(e) => {
-                        setPreviewState((previewState) => {
-                          const width = e.target.value || "100%";
-
-                          return {
-                            ...previewState,
-                            inline: {
-                              ...previewState.inline,
-                              width,
-                            },
-                          };
-                        });
-                      }}
-                      addOnLeading={<InputLeading>W</InputLeading>}
-                    />
-                    <span className="p-2">×</span>
-                    <TextField
-                      labelProps={{ className: "hidden" }}
-                      name="height"
-                      value={previewState.inline.height}
-                      required
-                      onChange={(e) => {
-                        const height = e.target.value || "100%";
-
-                        setPreviewState((previewState) => {
-                          return {
-                            ...previewState,
-                            inline: {
-                              ...previewState.inline,
-                              height,
-                            },
-                          };
-                        });
-                      }}
-                      addOnLeading={<InputLeading>H</InputLeading>}
-                    />
+          <div className="max-h-97 flex flex-col overflow-y-auto">
+            <div className={classNames("mt-4 font-medium", embedType === "element-click" ? "hidden" : "")}>
+              <Collapsible
+                open={isEmbedCustomizationOpen}
+                onOpenChange={() => setIsEmbedCustomizationOpen((val) => !val)}>
+                <CollapsibleTrigger
+                  type="button"
+                  className="flex w-full items-center text-base font-medium text-neutral-900">
+                  <div>
+                    {embedType === "inline"
+                      ? "Inline Embed Customization"
+                      : embedType === "floating-popup"
+                      ? "Floating Popup Customization"
+                      : "Element Click Customization"}
                  </div>
-                </div>
-                <div
-                  className={classNames(
-                    "mt-4 items-center justify-between",
-                    embedType === "floating-popup" ? "flex" : "hidden"
-                  )}>
-                  <div className="text-sm">Button Text</div>
-                  {/* Default Values should come from preview iframe */}
-                  <TextField
-                    name="buttonText"
-                    labelProps={{ className: "hidden" }}
-                    onChange={(e) => {
-                      setPreviewState((previewState) => {
-                        return {
-                          ...previewState,
-                          floatingPopup: {
-                            ...previewState.floatingPopup,
-                            buttonText: e.target.value,
-                          },
-                        };
-                      });
-                    }}
-                    defaultValue="Book my Cal"
-                    required
+                  <Icon.FiChevronRight
+                    className={`${
+                      isEmbedCustomizationOpen ? "rotate-90 transform" : ""
+                    } ml-auto h-5 w-5 text-neutral-500`}
                  />
-                </div>
-                <div
-                  className={classNames(
-                    "mt-4 flex items-center justify-between",
-                    embedType === "floating-popup" ? "flex" : "hidden"
-                  )}>
-                  <div className="text-sm">Display Calendar Icon Button</div>
-                  <Switch
-                    defaultChecked={true}
-                    onCheckedChange={(checked) => {
-                      setPreviewState((previewState) => {
-                        return {
-                          ...previewState,
-                          floatingPopup: {
-                            ...previewState.floatingPopup,
-                            hideButtonIcon: !checked,
-                          },
-                        };
-                      });
-                    }}
-                  />
-                </div>
-                <div
-                  className={classNames(
-                    "mt-4 flex items-center justify-between",
-                    embedType === "floating-popup" ? "flex" : "hidden"
-                  )}>
-                  <div>Position of Button</div>
-                  <Select
-                    onChange={(position) => {
-                      setPreviewState((previewState) => {
-                        return {
-                          ...previewState,
-                          floatingPopup: {
-                            ...previewState.floatingPopup,
-                            buttonPosition: position?.value,
-                          },
-                        };
-                      });
-                    }}
-                    defaultValue={FloatingPopupPositionOptions[0]}
-                    options={FloatingPopupPositionOptions}
-                  />
-                </div>
-                <div
-                  className={classNames(
-                    "mt-4 flex items-center justify-between",
-                    embedType === "floating-popup" ? "flex" : "hidden"
-                  )}>
-                  <div>Button Color</div>
-                  <div className="w-36">
-                    <ColorPicker
-                      defaultValue="#000000"
-                      onChange={(color) => {
+                </CollapsibleTrigger>
+                <CollapsibleContent className="text-sm">
+                  <div className={classNames("mt-6", embedType === "inline" ? "block" : "hidden")}>
+                    {/*TODO: Add Auto/Fixed toggle from Figma */}
+                    <div className="text-sm">Embed Window Sizing</div>
+                    <div className="justify-left flex items-center">
+                      <TextField
+                        name="width"
+                        labelProps={{ className: "hidden" }}
+                        required
+                        value={previewState.inline.width}
+                        onChange={(e) => {
+                          setPreviewState((previewState) => {
+                            const width = e.target.value || "100%";
+
+                            return {
+                              ...previewState,
+                              inline: {
+                                ...previewState.inline,
+                                width,
+                              },
+                            };
+                          });
+                        }}
+                        addOnLeading={<InputLeading>W</InputLeading>}
+                      />
+                      <span className="p-2">×</span>
+                      <TextField
+                        labelProps={{ className: "hidden" }}
+                        name="height"
+                        value={previewState.inline.height}
+                        required
+                        onChange={(e) => {
+                          const height = e.target.value || "100%";
+
+                          setPreviewState((previewState) => {
+                            return {
+                              ...previewState,
+                              inline: {
+                                ...previewState.inline,
+                                height,
+                              },
+                            };
+                          });
+                        }}
+                        addOnLeading={<InputLeading>H</InputLeading>}
+                      />
+                    </div>
+                  </div>
+                  <div
+                    className={classNames(
+                      "mt-4 items-center justify-between",
+                      embedType === "floating-popup" ? "" : "hidden"
+                    )}>
+                    <div className="mb-2 text-sm">Button Text</div>
+                    {/* Default Values should come from preview iframe */}
+                    <TextField
+                      name="buttonText"
+                      labelProps={{ className: "hidden" }}
+                      onChange={(e) => {
                        setPreviewState((previewState) => {
                          return {
                            ...previewState,
                            floatingPopup: {
                              ...previewState.floatingPopup,
-                              buttonColor: color,
+                              buttonText: e.target.value,
                            },
                          };
                        });
                      }}
+                      defaultValue="Book my Cal"
+                      required
                    />
                  </div>
-                </div>
-                <div
-                  className={classNames(
-                    "mt-4 flex items-center justify-between",
-                    embedType === "floating-popup" ? "flex" : "hidden"
-                  )}>
-                  <div>Text Color</div>
-                  <div className="w-36">
-                    <ColorPicker
-                      defaultValue="#000000"
-                      onChange={(color) => {
+                  <div
+                    className={classNames(
+                      "mt-4 flex items-center justify-start",
+                      embedType === "floating-popup" ? "space-x-2" : "hidden"
+                    )}>
+                    <Switch
+                      defaultChecked={true}
+                      onCheckedChange={(checked) => {
                        setPreviewState((previewState) => {
                          return {
                            ...previewState,
                            floatingPopup: {
                              ...previewState.floatingPopup,
-                              buttonTextColor: color,
+                              hideButtonIcon: !checked,
                            },
                          };
                        });
                      }}
                    />
+                    <div className="text-sm">Display Calendar Icon Button</div>
                  </div>
-                </div>
-              </CollapsibleContent>
-            </Collapsible>
-          </div>
-          <hr className="mt-4" />
-          <div className="mt-4 font-medium">
-            <Collapsible
-              open={isBookingCustomizationOpen}
-              onOpenChange={() => setIsBookingCustomizationOpen((val) => !val)}>
-              <CollapsibleTrigger className="flex w-full" type="button">
-                <div className="text-base  font-medium text-neutral-900">Cal Booking Customization</div>
-                <Icon.FiChevronRight
-                  className={`${
-                    isBookingCustomizationOpen ? "rotate-90 transform" : ""
-                  } ml-auto h-5 w-5 text-neutral-500`}
-                />
-              </CollapsibleTrigger>
-              <CollapsibleContent>
-                <div className="mt-6 text-sm">
-                  <Label className="flex items-center justify-between">
-                    <div>Theme</div>
+                  <div
+                    className={classNames(
+                      "mt-4 items-center justify-between",
+                      embedType === "floating-popup" ? "" : "hidden"
+                    )}>
+                    <div className="mb-2">Position of Button</div>
                    <Select
-                      className="w-36"
-                      defaultValue={ThemeOptions[0]}
-                      components={{
-                        Control: ThemeSelectControl,
-                      }}
-                      onChange={(option) => {
-                        if (!option) {
-                          return;
-                        }
+                      onChange={(position) => {
                        setPreviewState((previewState) => {
                          return {
                            ...previewState,
-                            theme: option.value,
+                            floatingPopup: {
+                              ...previewState.floatingPopup,
+                              buttonPosition: position?.value,
+                            },
                          };
                        });
                      }}
-                      options={ThemeOptions}
+                      defaultValue={FloatingPopupPositionOptions[0]}
+                      options={FloatingPopupPositionOptions}
                    />
-                  </Label>
-                  {[
-                    { name: "brandColor", title: "Brand Color" },
-                    // { name: "lightColor", title: "Light Color" },
-                    // { name: "lighterColor", title: "Lighter Color" },
-                    // { name: "lightestColor", title: "Lightest Color" },
-                    // { name: "highlightColor", title: "Highlight Color" },
-                    // { name: "medianColor", title: "Median Color" },
-                  ].map((palette) => (
-                    <Label key={palette.name} className="flex items-center justify-between">
-                      <div>{palette.title}</div>
-                      <div className="w-36">
-                        <ColorPicker
-                          defaultValue="#000000"
-                          onChange={(color) => {
-                            addToPalette({
-                              [palette.name as keyof typeof previewState["palette"]]: color,
-                            });
-                          }}
-                        />
-                      </div>
+                  </div>
+                  <div className={classNames("mt-4", embedType === "floating-popup" ? "" : "hidden")}>
+                    <div>Button Color</div>
+                    <div className="w-full">
+                      <ColorPicker
+                        defaultValue="#000000"
+                        onChange={(color) => {
+                          setPreviewState((previewState) => {
+                            return {
+                              ...previewState,
+                              floatingPopup: {
+                                ...previewState.floatingPopup,
+                                buttonColor: color,
+                              },
+                            };
+                          });
+                        }}
+                      />
+                    </div>
+                  </div>
+                  <div className={classNames("mt-4", embedType === "floating-popup" ? "" : "hidden")}>
+                    <div>Text Color</div>
+                    <div className="w-full">
+                      <ColorPicker
+                        defaultValue="#000000"
+                        onChange={(color) => {
+                          setPreviewState((previewState) => {
+                            return {
+                              ...previewState,
+                              floatingPopup: {
+                                ...previewState.floatingPopup,
+                                buttonTextColor: color,
+                              },
+                            };
+                          });
+                        }}
+                      />
+                    </div>
+                  </div>
+                </CollapsibleContent>
+              </Collapsible>
+            </div>
+            <hr className="mt-4" />
+            <div className="mt-4 font-medium">
+              <Collapsible
+                open={isBookingCustomizationOpen}
+                onOpenChange={() => setIsBookingCustomizationOpen((val) => !val)}>
+                <CollapsibleTrigger className="flex w-full" type="button">
+                  <div className="text-base  font-medium text-neutral-900">Cal Booking Customization</div>
+                  <Icon.FiChevronRight
+                    className={`${
+                      isBookingCustomizationOpen ? "rotate-90 transform" : ""
+                    } ml-auto h-5 w-5 text-neutral-500`}
+                  />
+                </CollapsibleTrigger>
+                <CollapsibleContent>
+                  <div className="mt-6 text-sm">
+                    <Label className="">
+                      <div className="mb-2">Theme</div>
+                      <Select
+                        className="w-full"
+                        defaultValue={ThemeOptions[0]}
+                        components={{
+                          Control: ThemeSelectControl,
+                        }}
+                        onChange={(option) => {
+                          if (!option) {
+                            return;
+                          }
+                          setPreviewState((previewState) => {
+                            return {
+                              ...previewState,
+                              theme: option.value,
+                            };
+                          });
+                        }}
+                        options={ThemeOptions}
+                      />
                    </Label>
-                  ))}
-                </div>
-              </CollapsibleContent>
-            </Collapsible>
+                    {[
+                      { name: "brandColor", title: "Brand Color" },
+                      // { name: "lightColor", title: "Light Color" },
+                      // { name: "lighterColor", title: "Lighter Color" },
+                      // { name: "lightestColor", title: "Lightest Color" },
+                      // { name: "highlightColor", title: "Highlight Color" },
+                      // { name: "medianColor", title: "Median Color" },
+                    ].map((palette) => (
+                      <Label key={palette.name} className="pb-4">
+                        <div className="mb-2 pt-2">{palette.title}</div>
+                        <div className="w-full">
+                          <ColorPicker
+                            defaultValue="#000000"
+                            onChange={(color) => {
+                              addToPalette({
+                                [palette.name as keyof typeof previewState["palette"]]: color,
+                              });
+                            }}
+                          />
+                        </div>
+                      </Label>
+                    ))}
+                  </div>
+                </CollapsibleContent>
+              </Collapsible>
+            </div>
          </div>
        </div>
-        <div className="w-2/3 bg-gray-50 p-6">
-          <NavTabs data-testid="embed-tabs" tabs={tabs} linkProps={{ shallow: true }} />
+        <div className="flex w-2/3 flex-col p-8">
+          <HorizontalTabs data-testid="embed-tabs" tabs={parsedTabs} linkProps={{ shallow: true }} />
          {tabs.map((tab) => {
            return (
              <div
-                key={tab.tabName}
-                className={classNames(router.query.tabName === tab.tabName ? "block" : "hidden")}>
-                <div>
-                  <div className={classNames(tab.type === "code" ? "h-[75vh]" : "")}>
-                    {tab.type === "code" ? (
-                      <tab.Component
-                        embedType={embedType}
-                        calLink={calLink}
-                        previewState={previewState}
-                        ref={refOfEmbedCodesRefs.current[tab.name]}
-                      />
-                    ) : (
-                      <tab.Component
-                        embedType={embedType}
-                        calLink={calLink}
-                        previewState={previewState}
-                        ref={iframeRef}
-                      />
-                    )}
-                  </div>
-                  <div className={router.query.tabName == "embed-preview" ? "block" : "hidden"} />
+                key={tab.href}
+                className={classNames(
+                  router.query.embedTabName === tab.href.split("=")[1] ? "flex flex-grow flex-col" : "hidden"
+                )}>
+                <div className="flex h-[55vh] flex-grow flex-col">
+                  {tab.type === "code" ? (
+                    <tab.Component
+                      embedType={embedType}
+                      calLink={calLink}
+                      previewState={previewState}
+                      ref={refOfEmbedCodesRefs.current[tab.name]}
+                    />
+                  ) : (
+                    <tab.Component
+                      embedType={embedType}
+                      calLink={calLink}
+                      previewState={previewState}
+                      ref={iframeRef}
+                    />
+                  )}
                </div>
+                <div className={router.query.embedTabName == "embed-preview" ? "block" : "hidden"} />
                <div className="mt-8 flex flex-row-reverse gap-x-2">
                  {tab.type === "code" ? (
                    <Button
@@ -1091,9 +1096,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                      {t("copy_code")}
                    </Button>
                  ) : null}
-                  <DialogClose asChild>
-                    <Button color="secondary">{t("Close")}</Button>
-                  </DialogClose>
+                  <DialogClose />
                </div>
              </div>
            );
@@ -1128,7 +1131,7 @@ export const EmbedDialog = () => {
 type EmbedButtonProps<T> = {
  embedUrl: string;
  children?: React.ReactNode;
-  className: string;
+  className?: string;
  as?: T;
 };

@@ -1140,21 +1143,12 @@ export const EmbedButton = <T extends React.ElementType>({
  ...props
 }: EmbedButtonProps<T> & React.ComponentPropsWithoutRef<T>) => {
  const router = useRouter();
-  className = classNames(className, "hidden lg:flex");
+  className = classNames(className, "hidden lg:inline-flex");
  const openEmbedModal = () => {
-    const query = {
-      ...router.query,
+    goto(router, {
      dialog: "embed",
      embedUrl,
-    };
-    router.push(
-      {
-        pathname: router.pathname,
-        query,
-      },
-      undefined,
-      { shallow: true }
-    );
+    });
  };
  const Component = as ?? Button;

@@ -1164,7 +1158,10 @@ export const EmbedButton = <T extends React.ElementType>({
      className={className}
      data-test-embed-url={embedUrl}
      data-testid="embed"
-      onClick={() => openEmbedModal()}>
+      type="button"
+      onClick={() => {
+        openEmbedModal();
+      }}>
      {children}
    </Component>
  );
@@ -0,0 +1,50 @@
+import dynamic from "next/dynamic";
+import { Dispatch, useState, useEffect } from "react";
+import { JSONObject } from "superjson/dist/types";
+
+export type Gate = undefined | "rainbow"; // Add more like ` | "geolocation" | "payment"`
+
+export type GateState = {
+  rainbowToken?: string;
+};
+
+type GateProps = {
+  children: React.ReactNode;
+  gates: Gate[];
+  appData: JSONObject;
+  dispatch: Dispatch<Partial<GateState>>;
+};
+
+const RainbowGate = dynamic(() => import("@calcom/app-store/rainbow/components/RainbowKit"));
+
+// To add a new Gate just add the gate logic to the switch statement
+const Gates: React.FC<GateProps> = ({ children, gates, appData, dispatch }) => {
+  const [rainbowToken, setRainbowToken] = useState<string>();
+
+  useEffect(() => {
+    dispatch({ rainbowToken });
+  }, [rainbowToken, dispatch]);
+
+  let gateWrappers = <>{children}</>;
+
+  // Recursively wraps the `gateWrappers` with new gates allowing for multiple gates
+  for (const gate of gates) {
+    switch (gate) {
+      case "rainbow":
+        if (appData.blockchainId && appData.smartContractAddress && !rainbowToken) {
+          gateWrappers = (
+            <RainbowGate
+              setToken={setRainbowToken}
+              chainId={appData.blockchainId as number}
+              tokenAddress={appData.smartContractAddress as string}>
+              {gateWrappers}
+            </RainbowGate>
+          );
+        }
+    }
+  }
+
+  return gateWrappers;
+};
+
+export default Gates;
@@ -4,13 +4,15 @@ import { useEffect } from "react";
 import { trpc } from "@calcom/trpc/react";

 export function useViewerI18n() {
-  return trpc.useQuery(["viewer.public.i18n"], {
+  return trpc.viewer.public.i18n.useQuery(undefined, {
    staleTime: Infinity,
    /**
     * i18n should never be clubbed with other queries, so that it's caching can be managed independently.
     * We intend to not cache i18n query
     **/
-    context: { skipBatch: true },
+    trpc: {
+      context: { skipBatch: true },
+    },
  });
 }

@@ -1,8 +1,7 @@
 import { FormEvent, useCallback, useEffect, useState } from "react";
 import Cropper from "react-easy-crop";

-import Button from "@calcom/ui/Button";
-import { Dialog, DialogClose, DialogContent, DialogTrigger } from "@calcom/ui/Dialog";
+import { Button, Dialog, DialogClose, DialogContent, DialogTrigger } from "@calcom/ui";

 import { Area, getCroppedImg } from "@lib/cropImage";
 import { useFileReader } from "@lib/hooks/useFileReader";
@@ -63,6 +62,7 @@ function CropContainer({
  );
 }

+/** @deprecated Use `packages/ui/v2/core/ImageUploader.tsx` */
 export default function ImageUploader({
  target,
  id,
@@ -156,12 +156,8 @@ export default function ImageUploader({
          </div>
        </div>
        <div className="mt-5 gap-x-2 sm:mt-4 sm:flex sm:flex-row-reverse">
-          <DialogClose asChild>
-            <Button onClick={() => showCroppedImage(croppedAreaPixels)}>{t("save")}</Button>
-          </DialogClose>
-          <DialogClose asChild>
-            <Button color="secondary">{t("cancel")}</Button>
-          </DialogClose>
+          <DialogClose onClick={() => showCroppedImage(croppedAreaPixels)}>{t("save")}</DialogClose>
+          <DialogClose color="secondary">{t("cancel")}</DialogClose>
        </div>
      </DialogContent>
    </Dialog>
@@ -1 +1,4 @@
-export { default } from "@calcom/ui/Loader";
+/**
+ * @deprecated Use custom Skeletons instead
+ **/
+export { Loader as default } from "@calcom/ui";
@@ -1,8 +1,6 @@
 import React, { ComponentProps } from "react";

-import ErrorBoundary from "@calcom/ui/ErrorBoundary";
-import { Icon } from "@calcom/ui/Icon";
-import Shell from "@calcom/ui/Shell";
+import { ErrorBoundary, Icon, Shell } from "@calcom/ui";

 import NavTabs from "./NavTabs";

@@ -1,53 +0,0 @@
-import { Trans } from "next-i18next";
-
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import Button from "@calcom/ui/Button";
-import { Dialog, DialogClose, DialogContent } from "@calcom/ui/Dialog";
-import { Icon } from "@calcom/ui/Icon";
-
-export function UpgradeToProDialog({
-  modalOpen,
-  setModalOpen,
-  children,
-}: {
-  modalOpen: boolean;
-  setModalOpen: (open: boolean) => void;
-  children: React.ReactNode;
-}) {
-  const { t } = useLocale();
-  return (
-    <Dialog open={modalOpen}>
-      <DialogContent>
-        <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-yellow-100">
-          <Icon.FiAlertTriangle className="h-6 w-6 text-yellow-400" aria-hidden="true" />
-        </div>
-        <div className="mb-4 sm:flex sm:items-start">
-          <div className="mt-3 sm:mt-0 sm:text-left">
-            <h3 className="font-cal text-lg font-bold leading-6 text-gray-900" id="modal-title">
-              {t("only_available_on_pro_plan")}
-            </h3>
-          </div>
-        </div>
-        <div className="flex flex-col space-y-3">
-          <p>{children}</p>
-          <p>
-            <Trans i18nKey="plan_upgrade_instructions">
-              You can
-              <a href="/api/upgrade" className="underline">
-                upgrade here
-              </a>
-              .
-            </Trans>
-          </p>
-        </div>
-        <div className="mt-5 gap-x-2 sm:mt-4 sm:flex sm:flex-row-reverse">
-          <DialogClose asChild>
-            <Button className="table-cell w-full text-center" onClick={() => setModalOpen(false)}>
-              {t("dismiss")}
-            </Button>
-          </DialogClose>
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-}
@@ -0,0 +1,112 @@
+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, Icon, Select } from "@calcom/ui";
+
+import { QueryCell } from "@lib/QueryCell";
+
+interface AdditionalCalendarSelectorProps {
+  isLoading?: boolean;
+}
+
+const ImageOption = (optionProps: OptionProps<{ [key: string]: string; type: App["type"] }>) => {
+  const { t } = useLocale();
+  const { data } = optionProps;
+  return data.slug !== "add-new" ? (
+    <InstallAppButton
+      type={data.type}
+      render={(installProps) => {
+        return (
+          <Button {...installProps} className="flex w-full align-top" color="minimal">
+            {data.image && (
+              <img className="float-left mr-3 inline h-5 w-5" src={data.image} alt={data.label} />
+            )}
+            <p className="text-left">{`${t("add")} ${data.label}`}</p>
+          </Button>
+        );
+      }}
+    />
+  ) : (
+    <Button className="w-full" color="minimal" href="/apps/categories/calendar">
+      <Icon.FiPlus className="text-color mr-3 ml-1 h-4 w-4" />
+      <p>{t("install_new_calendar_app")}</p>
+    </Button>
+  );
+};
+
+const AdditionalCalendarSelector = ({ isLoading }: AdditionalCalendarSelectorProps): JSX.Element | null => {
+  const { t } = useLocale();
+  const query = trpc.viewer.integrations.useQuery({ variant: "calendar", onlyInstalled: true });
+
+  return (
+    <QueryCell
+      query={query}
+      success={({ data }) => {
+        const options = data.items.map((item) => ({
+          label: item.name,
+          slug: item.slug,
+          image: item.logo,
+          type: item.type,
+        }));
+        options.push({
+          label: "Add new calendars",
+          slug: "add-new",
+          image: "",
+          type: "new_other",
+        });
+        return (
+          <Select
+            name="additionalCalendar"
+            placeholder={
+              <Button StartIcon={Icon.FiPlus} color="secondary">
+                {t("add")}
+              </Button>
+            }
+            options={options}
+            isSearchable={false}
+            isLoading={isLoading}
+            components={{ Option: ImageOption }}
+            styles={{
+              menu: (defaultStyles) => ({
+                ...defaultStyles,
+                "@media only screen and (max-width: 640px)": {
+                  left: "0",
+                },
+                width: "max-content",
+                right: "0",
+              }),
+              indicatorSeparator: (defaultStyles) => ({
+                ...defaultStyles,
+                display: "none",
+              }),
+              control: (defaultStyles) => ({
+                ...defaultStyles,
+                padding: "0",
+                border: "0",
+                borderRadius: "6px",
+                minHeight: "auto",
+              }),
+              dropdownIndicator: (defaultStyles) => ({
+                ...defaultStyles,
+                display: "none",
+              }),
+              valueContainer: (defaultStyles) => ({
+                ...defaultStyles,
+                padding: "0",
+              }),
+              placeholder: (defaultStyles) => ({
+                ...defaultStyles,
+                margin: "0",
+              }),
+            }}
+          />
+        );
+      }}
+    />
+  );
+};
+
+export default AdditionalCalendarSelector;
@@ -1,28 +0,0 @@
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import type { App } from "@calcom/types/App";
-
-import AppCard from "./AppCard";
-
-export default function AllApps({ apps }: { apps: App[] }) {
-  const { t } = useLocale();
-
-  return (
-    <div className="mb-16">
-      <h2 className="mb-2 text-lg font-semibold text-gray-900">{t("all_apps")}</h2>
-      <div className="grid-col-1 grid grid-cols-1 gap-3 md:grid-cols-3">
-        {apps.map((app) => (
-          <AppCard
-            key={app.name}
-            name={app.name}
-            slug={app.slug}
-            description={app.description}
-            logo={app.logo}
-            rating={app.rating}
-            reviews={app.reviews}
-            isProOnly={app.isProOnly}
-          />
-        ))}
-      </div>
-    </div>
-  );
-}
@@ -0,0 +1,333 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import React, { useState } from "react";
+
+import useAddAppMutation from "@calcom/app-store/_utils/useAddAppMutation";
+import { InstallAppButton } from "@calcom/app-store/components";
+import DisconnectIntegration from "@calcom/features/apps/components/DisconnectIntegration";
+import LicenseRequired from "@calcom/features/ee/common/components/v2/LicenseRequired";
+import classNames from "@calcom/lib/classNames";
+import { APP_NAME, COMPANY_NAME, SUPPORT_MAIL_ADDRESS } from "@calcom/lib/constants";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { trpc } from "@calcom/trpc/react";
+import { App as AppType } from "@calcom/types/App";
+import { Button, Icon, Shell, showToast, SkeletonButton, SkeletonText } from "@calcom/ui";
+
+import HeadSeo from "@components/seo/head-seo";
+
+const Component = ({
+  name,
+  type,
+  logo,
+  slug,
+  variant,
+  body,
+  categories,
+  author,
+  price = 0,
+  commission,
+  isGlobal = false,
+  feeType,
+  docs,
+  website,
+  email,
+  tos,
+  privacy,
+  isProOnly,
+  images,
+}: Parameters<typeof App>[0]) => {
+  const { t } = useLocale();
+  const hasImages = images && images.length > 0;
+  const router = useRouter();
+
+  const mutation = useAddAppMutation(null, {
+    onSuccess: (data) => {
+      if (data?.setupPending) return;
+      showToast(t("app_successfully_installed"), "success");
+    },
+    onError: (error) => {
+      if (error instanceof Error) showToast(error.message || t("app_could_not_be_installed"), "error");
+    },
+  });
+
+  const priceInDollar = Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+    useGrouping: false,
+  }).format(price);
+
+  const [existingCredentials, setExistingCredentials] = useState<number[]>([]);
+  const appCredentials = trpc.viewer.appCredentialsByType.useQuery(
+    { appType: type },
+    {
+      onSuccess(data) {
+        setExistingCredentials(data);
+      },
+    }
+  );
+
+  const allowedMultipleInstalls = categories.indexOf("calendar") > -1;
+
+  return (
+    <div className="relative flex-1 flex-col items-start justify-start px-4 md:flex md:px-8 lg:flex-row lg:px-0">
+      {hasImages && (
+        <div className="align-center mb-4 -ml-4 -mr-4 flex min-h-[450px] w-auto basis-3/5 snap-x snap-mandatory flex-row overflow-auto whitespace-nowrap bg-gray-100 p-4  md:mb-8 md:-ml-8 md:-mr-8 md:p-8 lg:mx-0 lg:mb-0 lg:max-w-2xl lg:flex-col lg:justify-center lg:rounded-md">
+          {images ? (
+            images.map((img) => (
+              <img
+                key={img}
+                src={img}
+                alt={`Screenshot of app ${name}`}
+                className="mr-4 h-auto max-h-80 max-w-[90%] snap-center rounded-md object-contain last:mb-0 md:max-h-min lg:mb-4 lg:mr-0  lg:max-w-full"
+              />
+            ))
+          ) : (
+            <SkeletonText />
+          )}
+        </div>
+      )}
+      <div
+        className={classNames(
+          "sticky top-0 -mt-4 max-w-xl basis-2/5 pb-12 text-sm lg:pb-0",
+          hasImages && "lg:ml-8"
+        )}>
+        <div className="mb-8 flex pt-4">
+          <header>
+            <div className="mb-4 flex items-center">
+              <img className="min-h-16 min-w-16 h-16 w-16" src={logo} alt={name} />
+              <h1 className="font-cal ml-4 text-3xl text-gray-900">{name}</h1>
+            </div>
+            <h2 className="text-sm font-medium text-gray-600">
+              <Link href={`categories/${categories[0]}`}>
+                <a className="rounded-md bg-gray-100 p-1 text-xs capitalize text-gray-800">{categories[0]}</a>
+              </Link>{" "}
+              • {t("published_by", { author })}
+            </h2>
+          </header>
+        </div>
+        {!appCredentials.isLoading ? (
+          isGlobal ||
+          (existingCredentials.length > 0 && allowedMultipleInstalls ? (
+            <div className="flex space-x-3">
+              <Button StartIcon={Icon.FiCheck} color="secondary" disabled>
+                {existingCredentials.length > 0
+                  ? t("active_install", { count: existingCredentials.length })
+                  : t("default")}
+              </Button>
+              {!isGlobal && (
+                <InstallAppButton
+                  type={type}
+                  isProOnly={isProOnly}
+                  render={({ useDefaultComponent, ...props }) => {
+                    if (useDefaultComponent) {
+                      props = {
+                        ...props,
+                        onClick: () => {
+                          mutation.mutate({ type, variant, slug });
+                        },
+                        loading: mutation.isLoading,
+                      };
+                    }
+                    return (
+                      <Button
+                        StartIcon={Icon.FiPlus}
+                        {...props}
+                        // @TODO: Overriding color and size prevent us from
+                        // having to duplicate InstallAppButton for now.
+                        color="primary"
+                        size="base"
+                        data-testid="install-app-button">
+                        {t("install_another")}
+                      </Button>
+                    );
+                  }}
+                />
+              )}
+            </div>
+          ) : existingCredentials.length > 0 ? (
+            <DisconnectIntegration
+              buttonProps={{ color: "secondary" }}
+              label={t("disconnect")}
+              credentialId={existingCredentials[0]}
+              onSuccess={() => {
+                router.replace("/apps/installed");
+              }}
+            />
+          ) : (
+            <InstallAppButton
+              type={type}
+              isProOnly={isProOnly}
+              render={({ useDefaultComponent, ...props }) => {
+                if (useDefaultComponent) {
+                  props = {
+                    ...props,
+                    onClick: () => {
+                      mutation.mutate({ type, variant, slug });
+                    },
+                    loading: mutation.isLoading,
+                  };
+                }
+                return (
+                  <Button
+                    data-testid="install-app-button"
+                    {...props}
+                    // @TODO: Overriding color and size prevent us from
+                    // having to duplicate InstallAppButton for now.
+                    color="primary"
+                    size="base">
+                    {t("install_app")}
+                  </Button>
+                );
+              }}
+            />
+          ))
+        ) : (
+          <SkeletonButton className="h-10 w-24" />
+        )}
+        {price !== 0 && (
+          <span className="block text-right">
+            {feeType === "usage-based" ? commission + "% + " + priceInDollar + "/booking" : priceInDollar}
+            {feeType === "monthly" && "/" + t("month")}
+          </span>
+        )}
+
+        <div className="prose prose-sm mt-8">{body}</div>
+        <h4 className="mt-8 font-semibold text-gray-900 ">{t("pricing")}</h4>
+        <span>
+          {price === 0 ? (
+            t("free_to_use_apps")
+          ) : (
+            <>
+              {Intl.NumberFormat("en-US", {
+                style: "currency",
+                currency: "USD",
+                useGrouping: false,
+              }).format(price)}
+              {feeType === "monthly" && "/" + t("month")}
+            </>
+          )}
+        </span>
+
+        <h4 className="mt-8 mb-2 font-semibold text-gray-900 ">{t("learn_more")}</h4>
+        <ul className="prose-sm -ml-1 -mr-1 leading-5">
+          {docs && (
+            <li>
+              <a
+                target="_blank"
+                rel="noreferrer"
+                className="text-sm font-normal text-black no-underline hover:underline"
+                href={docs}>
+                <Icon.FiBookOpen className="mr-1 -mt-1 inline h-4 w-4 text-gray-500" />
+                {t("documentation")}
+              </a>
+            </li>
+          )}
+          {website && (
+            <li>
+              <a
+                target="_blank"
+                rel="noreferrer"
+                className="font-normal text-black no-underline hover:underline"
+                href={website}>
+                <Icon.FiExternalLink className="mr-1 -mt-px inline h-4 w-4 text-gray-500" />
+                {website.replace("https://", "")}
+              </a>
+            </li>
+          )}
+          {email && (
+            <li>
+              <a
+                target="_blank"
+                rel="noreferrer"
+                className="font-normal text-black no-underline hover:underline"
+                href={"mailto:" + email}>
+                <Icon.FiMail className="mr-1 -mt-px inline h-4 w-4 text-gray-500" />
+
+                {email}
+              </a>
+            </li>
+          )}
+          {tos && (
+            <li>
+              <a
+                target="_blank"
+                rel="noreferrer"
+                className="font-normal text-black no-underline hover:underline"
+                href={tos}>
+                <Icon.FiFile className="mr-1 -mt-px inline h-4 w-4 text-gray-500" />
+                {t("terms_of_service")}
+              </a>
+            </li>
+          )}
+          {privacy && (
+            <li>
+              <a
+                target="_blank"
+                rel="noreferrer"
+                className="font-normal text-black no-underline hover:underline"
+                href={privacy}>
+                <Icon.FiShield className="mr-1 -mt-px inline h-4 w-4 text-gray-500" />
+                {t("privacy_policy")}
+              </a>
+            </li>
+          )}
+        </ul>
+        <hr className="my-8" />
+        <span className="leading-1 block text-xs text-gray-500">
+          {t("every_app_published", { appName: APP_NAME, companyName: COMPANY_NAME })}
+        </span>
+        <a className="mt-2 block text-xs text-red-500" href={`mailto:${SUPPORT_MAIL_ADDRESS}`}>
+          <Icon.FiFlag className="inline h-3 w-3" /> {t("report_app")}
+        </a>
+      </div>
+    </div>
+  );
+};
+
+export default function App(props: {
+  name: string;
+  description: AppType["description"];
+  type: AppType["type"];
+  isGlobal?: AppType["isGlobal"];
+  logo: string;
+  slug: string;
+  variant: string;
+  body: React.ReactNode;
+  categories: string[];
+  author: string;
+  pro?: boolean;
+  price?: number;
+  commission?: number;
+  feeType?: AppType["feeType"];
+  docs?: string;
+  website?: string;
+  email: string; // required
+  tos?: string;
+  privacy?: string;
+  licenseRequired: AppType["licenseRequired"];
+  isProOnly: AppType["isProOnly"];
+  images?: string[];
+}) {
+  const { t } = useLocale();
+
+  return (
+    <Shell large isPublic heading={t("app_store")} backPath="/apps" withoutSeo>
+      <HeadSeo
+        title={props.name}
+        description={props.description}
+        app={{ slug: props.logo, name: props.name, description: props.description }}
+        nextSeoProps={{
+          nofollow: true,
+          noindex: true,
+        }}
+      />
+      {props.licenseRequired ? (
+        <LicenseRequired>
+          <Component {...props} />
+        </LicenseRequired>
+      ) : (
+        <Component {...props} />
+      )}
+    </Shell>
+  );
+}
--- a/Show More
+++ b/Show More