v2.4.0

Submodule sync
Upgrades prisma / Syncs packages (#6044 )
2022-12-15 15:59:08 -07:00 · 2022-12-15 15:58:13 -07:00 · 2022-12-15 15:56:48 -07:00 · 2022-12-15 22:47:31 +00:00 · 2022-12-15 15:18:40 -07:00 · 2022-12-15 21:54:40 +00:00
1097 changed files with 32442 additions and 27035 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 ⚠️ ⚠️ ⚠️
@@ -88,7 +92,7 @@ VITAL_REGION="us"
 # @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=""
@@ -100,4 +104,9 @@ LARK_OPEN_VERIFICATION_TOKEN=""
 # @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=""
 # *********************************************************************************************************
@@ -7,14 +7,13 @@
 # - E-MAIL SETTINGS

 # - LICENSE *************************************************************************************************
-# Set this value to 'agree' to accept our license:
-# LICENSE: https://github.com/calendso/calendso/blob/main/LICENSE
+# https://github.com/calendso/calendso/blob/main/LICENSE
 #
 # Summary of terms:
 # - The codebase has to stay open source, whether it was modified or not
 # - You can not repackage or sell the codebase
 # - Acquire a commercial license to remove these terms by visiting: cal.com/sales
-NEXT_PUBLIC_LICENSE_CONSENT=''
+#
 # To enable enterprise-only features, fill your license key in here.
 # @see https://console.cal.com
 CALCOM_LICENSE_KEY=
@@ -77,7 +76,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=

@@ -86,6 +85,9 @@ SENDGRID_EMAIL=
 TWILIO_SID=
 TWILIO_TOKEN=
 TWILIO_MESSAGING_SID=
+TWILIO_PHONE_NUMBER=
+NEXT_PUBLIC_SENDER_ID=
+TWILIO_VERIFY_SID=

 # This is used so we can bypass emails in auth flows for E2E testing
 # Set it to "1" if you need to run E2E tests locally
@@ -96,11 +98,10 @@ NEXT_PUBLIC_STRIPE_PRO_PLAN_PRICE=
 NEXT_PUBLIC_STRIPE_PREMIUM_PLAN_PRICE=
 NEXT_PUBLIC_IS_PREMIUM_NEW_PLAN=0
 NEXT_PUBLIC_STRIPE_PREMIUM_NEW_PLAN_PRICE=
-NEXT_PUBLIC_STRIPE_FREE_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_
@@ -135,5 +136,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,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/9
-          github-token: ${{ secrets.GH_ACCESS_TOKEN }}
-          labeled:  🙋🏻‍♂️help wanted
@@ -5,7 +5,7 @@ name: 'Chromatic'

 # Event for the workflow
 on:
-  pull_request: # So we can test on forks
+  pull_request_target: # So we can test on forks
    branches:
      - main
    paths:
@@ -1,6 +1,6 @@
 name: Check types
 on:
-  pull_request:
+  pull_request_target:
    branches:
      - main
    paths:
@@ -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
@@ -2,7 +2,7 @@ name: E2E App-Store Apps
 on:
  push:
    branches: [fixes/e2e-consolidation] # TODO: Remove this after merged in main
-  pull_request: # So we can test on forks
+  pull_request_target: # So we can test on forks
    branches:
      - main
    paths-ignore:
@@ -1,6 +1,6 @@
 name: E2E Embed tests and booking flow(for non-embed as well)
 on:
-  pull_request: # So we can test on forks
+  pull_request_target: # So we can test on forks
    branches:
      - main
    # Embed e2e - tests verify booking flow which is applicable to non-embed case also. So, don't ignore apps/web changes.
@@ -2,7 +2,7 @@ name: E2E test
 on:
  push:
    branches: [fixes/e2e-consolidation] # TODO: Remove this after merged in main
-  pull_request: # So we can test on forks
+  pull_request_target: # So we can test on forks
    branches:
      - main
    paths:
@@ -1,6 +1,6 @@
 name: "Pull Request Labeler"
 on:
-  - pull_request
+  - pull_request_target
 concurrency:
  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
  cancel-in-progress: true
@@ -1,6 +1,6 @@
 name: Lint
 on:
-  pull_request:
+  pull_request_target:
    branches:
      - main
    paths:
@@ -30,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,8 @@
 name: Unit tests
 on:
  push:
-    branches: [fixes/e2e-consolidation] # TODO: Remove this after merged in main
-  pull_request: # So we can test on forks
+    branches: [ feat/routing-forms/reporting ] # TODO: Remove this after merged in main
+  pull_request_target: # So we can test on forks
    branches:
      - main
    paths:
@@ -21,7 +21,8 @@ jobs:
        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
+      # 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:
@@ -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", "typescript"]
+  "spellright.documentTypes": ["markdown", "typescript"],
+  "tailwindCSS.experimental.classRegex": [["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]]
 }
@@ -292,7 +292,7 @@ You can deploy Cal on [Railway](https://railway.app/) using the button above. Th

 Currently Vercel Pro Plan is required to be able to Deploy this application with Vercel, due to limitations on the number of serverless functions on the free plan.

-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fcalcom%2Fcal.com&env=DATABASE_URL,NEXT_PUBLIC_WEBAPP_URL,NEXTAUTH_URL,NEXTAUTH_SECRET,CRON_API_KEY,CALENDSO_ENCRYPTION_KEY,NEXT_PUBLIC_LICENSE_CONSENT&envDescription=See%20all%20available%20env%20vars&envLink=https%3A%2F%2Fgithub.com%2Fcalcom%2Fcal.com%2Fblob%2Fmain%2F.env.example&project-name=cal&repo-name=cal.com&build-command=cd%20../..%20%26%26%20yarn%20build&root-directory=apps%2Fweb%2F)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fcalcom%2Fcal.com&env=DATABASE_URL,NEXT_PUBLIC_WEBAPP_URL,NEXTAUTH_URL,NEXTAUTH_SECRET,CRON_API_KEY,CALENDSO_ENCRYPTION_KEY&envDescription=See%20all%20available%20env%20vars&envLink=https%3A%2F%2Fgithub.com%2Fcalcom%2Fcal.com%2Fblob%2Fmain%2F.env.example&project-name=cal&repo-name=cal.com&build-command=cd%20../..%20%26%26%20yarn%20build&root-directory=apps%2Fweb%2F)

 <!-- ROADMAP -->

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

@@ -437,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.
@@ -469,14 +419,18 @@ Next make sure you have your app running `yarn dx`. Then in the slack chat type
 2. Click ‘Get a Twilio phone number’
 3. Copy Account SID to your .env file into the TWILIO_SID field
 4. Copy Auth Token to your .env file into the TWILIO_TOKEN field
-5. Create a messaging service (Develop -> Messaging -> Services)
-6. Choose any name for the messaging service
-7. Click 'Add Senders'
-8. Choose phone number as sender type
-9. Add the listed phone number
-10. Leave all other fields as they are
-11. Complete setup and click ‘View my new Messaging Service’
-12. Copy Messaging Service SID to your .env file into the TWILIO_MESSAGING_SID field
+5. Copy your Twilio phone number to your .env file into the TWILIO_PHONE_NUMBER field
+6. Add your own sender id to the .env file into the NEXT_PUBLIC_SENDER_ID field (fallback is Cal)
+7. Create a messaging service (Develop -> Messaging -> Services)
+8. Choose any name for the messaging service
+9. Click 'Add Senders'
+10. Choose phone number as sender type
+11. Add the listed phone number
+12. Leave all other fields as they are
+13. Complete setup and click ‘View my new Messaging Service’
+14. Copy Messaging Service SID to your .env file into the TWILIO_MESSAGING_SID field
+15. Create a verify service
+16. Copy Verify Service SID to your .env file into the TWILIO_VERIFY_SID field

 <!-- LICENSE -->

@@ -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();
@@ -33,11 +33,6 @@
      "generator": "secret",
      "required": "true"
    },
-    "NEXT_PUBLIC_LICENSE_CONSENT": {
-      "description": "License consent",
-      "value": "true",
-      "required": "true"
-    },
    "CRON_API_KEY": {
      "description": "ApiKey for cronjobs",
      "value": ""
@@ -50,6 +45,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",
@@ -1,38 +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/
-next-env.d.ts
-
-# 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,30 @@
 const path = require("path");

 module.exports = {
-  stories: ["../stories/**/*.stories.mdx", "../stories/**/*.stories.@(js|jsx|ts|tsx)"],
+  stories: [
+    "../intro.stories.mdx",
+    "../../../packages/ui/components/**/*.stories.mdx",
+    "../../../packages/features/**/*.stories.mdx",
+    "../../../packages/ui/components/**/*.stories.@(js|jsx|ts|tsx)",
+  ],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
-    "storybook-addon-designs",
-    "@storybook/addon-a11y",
-    "storybook-addon-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,
@@ -56,6 +52,20 @@ module.exports = {
      zlib: false,
    };

+    config.module.rules.push({
+      test: /\.css$/,
+      use: [
+        "style-loader",
+        {
+          loader: "css-loader",
+          options: {
+            modules: true, // Enable modules to help you using className
+          },
+        },
+      ],
+      include: path.resolve(__dirname, "../src"),
+    });
+
    return config;
  },
 };
@@ -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,14 @@ export const parameters = {
      date: /Date$/,
    },
  },
-  nextRouter: {
-    Provider: RouterContext.Provider,
-  },
 };

+addDecorator((storyFn) => (
+  <I18nextProvider i18n={i18n}>
+    <div style={{ margin: "2rem" }}>{storyFn()}</div>
+  </I18nextProvider>
+));
+
 window.getEmbedNamespace = () => {
  const url = new URL(document.URL);
  const namespace = url.searchParams.get("embed");
@@ -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,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,18 +1,13 @@
 {
  "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": "^1.0.0",
@@ -25,42 +20,35 @@
    "@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.10",
-    "@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",
+    "@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.4",
-    "autoprefixer": "^10.4.8",
+    "@types/react-dom": "^18.0.6",
+    "@vitejs/plugin-react": "^2.1.0",
+    "autoprefixer": "^10.4.12",
    "babel-loader": "^8.2.5",
-    "chromatic": "^6.7.4",
-    "eslint": "^8.22.0",
-    "postcss": "^8.4.16",
-    "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.8",
-    "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,60 +0,0 @@
-import { TooltipProvider } from "@radix-ui/react-tooltip";
-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 (
-    <TooltipProvider>
-      <AvatarGroup size="lg" items={IMAGES} />
-    </TooltipProvider>
-  );
-};
@@ -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,41 +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,
-  decorators: [
-    (Story) => (
-      <TooltipProvider>
-        <Story />
-      </TooltipProvider>
-    ),
-  ],
-} as ComponentMeta<typeof ButtonGroup>;
-
-export const Default = () => (
-  <ButtonGroup>
-    <Button StartIcon={Trash2} size="icon" color="secondary" />
-    <Button StartIcon={Navigation2} size="icon" color="secondary" />
-    <Button StartIcon={Clipboard} size="icon" color="secondary" />
-  </ButtonGroup>
-);
-
-export const Combined = () => (
-  <div className="flex flex-col space-y-2">
-    <ButtonGroup combined>
-      <Button StartIcon={Trash2} size="icon" color="secondary" />
-      <Button StartIcon={Navigation2} size="icon" color="secondary" />
-      <Button StartIcon={Clipboard} size="icon" color="secondary" />
-    </ButtonGroup>
-    <ButtonGroup combined>
-      <Button StartIcon={ArrowLeft} size="icon" color="secondary" />
-      <Button StartIcon={ArrowRight} size="icon" color="secondary" />
-      <Button StartIcon={ArrowRight} href="/" size="icon" color="secondary" />
-    </ButtonGroup>
-  </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,45 +0,0 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-import "@wojtekmaj/react-daterange-picker/dist/DateRangePicker.css";
-import { useState } from "react";
-
-import DateRangePicker from "@calcom/ui/v2/core/form/date-range-picker/DateRangePicker";
-import "@calcom/ui/v2/core/form/date-range-picker/styles.css";
-
-function getISOLocalDate(date) {
-  const year = padStart(date.getFullYear(), 4);
-  const month = padStart(date.getMonth() + 1);
-  const day = padStart(date.getDate());
-
-  return [`${year}-${month}-${day}`];
-}
-
-function padStart(num, val = 2) {
-  const numStr = `${num}`;
-  if (numStr.length >= val) {
-    return num;
-  }
-
-  return `0000${numStr}`.slice(-val);
-}
-
-export default {
-  title: "Date Range Picker",
-  component: DateRangePicker,
-} as ComponentMeta<typeof DateRangePicker>;
-
-export const Default: ComponentStory<typeof DateRangePicker> = () => {
-  const [startDate, setStartDate] = useState<Date>(new Date());
-  const [endDate, setEndDate] = useState<Date>(new Date());
-  return (
-    <div>
-      <DateRangePicker
-        startDate={getISOLocalDate(startDate) as unknown as Date}
-        endDate={getISOLocalDate(endDate) as unknown as Date}
-        onDatesChange={({ startDate, endDate }) => {
-          setStartDate(startDate);
-          setEndDate(endDate);
-        }}
-      />
-    </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,75 +0,0 @@
-import { TooltipProvider } from "@radix-ui/react-tooltip";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-import { Copy } from "react-feather";
-
-import { TextAreaField, TextField, PasswordField } 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()} />;
-
-export const PasswordInput: ComponentStory<typeof PasswordField> = () => (
-  <TooltipProvider>
-    <PasswordField />
-  </TooltipProvider>
-);
@@ -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,33 +0,0 @@
-import { ComponentMeta } from "@storybook/react";
-
-import { Select } from "@calcom/ui/v2";
-import MultiDropdownSelect from "@calcom/ui/v2/modules/event-types/MultiDropdownSelect";
-
-export default {
-  title: "Form/Select",
-  component: Select,
-} as ComponentMeta<typeof Select>;
-
-const singleOptions = [
-  {
-    label: "Select",
-    value: 0,
-  },
-  ...[5, 10, 15, 20, 30, 45, 60, 90, 120].map((minutes) => ({
-    label: minutes + " " + "minutes",
-    value: minutes,
-  })),
-];
-const multiOptions = [
-  {
-    label: "Select",
-    value: 0,
-  },
-  ...[5, 10, 15, 20, 30, 45, 60, 90, 120].map((minutes) => ({
-    label: minutes + " " + "minutes",
-    value: minutes,
-  })),
-];
-
-export const Single = () => <Select options={singleOptions} />;
-export const Multi = () => <MultiDropdownSelect options={multiOptions} />;
@@ -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,20 +0,0 @@
-import { ComponentMeta } from "@storybook/react";
-
-import { ToggleGroup } from "@calcom/ui/v2/core/form/ToggleGroup";
-
-export default {
-  title: "Toggle Group",
-  component: ToggleGroup,
-} as ComponentMeta<typeof ToggleGroup>;
-
-export const Default = () => {
-  return (
-    <ToggleGroup
-      defaultValue="12"
-      options={[
-        { value: "12", label: "12h" },
-        { value: "24", label: "24h" },
-      ]}
-    />
-  );
-};
@@ -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/core/navigation/tabs/VerticalTabs";
-
-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,13 +2,4 @@
@tailwind components;
@tailwind utilities;

-@import "../../../packages/ui/v2/core/form/date-range-picker/styles.css";
-@import "../../../node_modules/@wojtekmaj/react-daterange-picker/dist/DateRangePicker.css";
-
-: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,191 @@
+@import url("../../../packages/features/calendars/weeklyview/styles/styles.css");
+
+.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: 400px;
+  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",
@@ -23,7 +23,7 @@
  "devDependencies": {
    "@types/node": "16.9.1",
    "@types/react": "^18.0.17",
-    "@types/react-dom": "18.0.4",
+    "@types/react-dom": "^18.0.6",
    "typescript": "^4.7.4"
  }
 }
@@ -67,4 +67,6 @@ tsconfig.tsbuildinfo
 public/embed

 # Copied app-store images
-public/app-store
+public/app-store
+# Sentry
+.sentryclirc
@@ -1,15 +0,0 @@
-declare module "@wojtekmaj/react-daterange-picker/dist/entry.nostyle" {
-  import { CalendarProps } from "react-calendar";
-  export type DateRangePickerCalendarProps = Omit<
-    CalendarProps,
-    "calendarClassName" | "onChange" | "value"
-  > & {
-    calendarClassName?: string;
-    onChange: (value: [Date, Date]) => void;
-    value: [Date, Date];
-    clearIcon: JSX.Element | null;
-    calendarIcon: JSX.Element | null;
-    rangeDivider: JSX.Element | null;
-  };
-  export default function DateRangePicker(props: DateRangePickerCalendarProps): JSX.Element;
-}
@@ -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,306 +0,0 @@
-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 LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { trpc } from "@calcom/trpc/react";
-import { App as AppType } from "@calcom/types/App";
-import { Button, SkeletonButton } from "@calcom/ui";
-import { Icon } from "@calcom/ui/Icon";
-import Shell from "@calcom/ui/Shell";
-import Badge from "@calcom/ui/v2/core/Badge";
-import showToast from "@calcom/ui/v2/core/notifications";
-
-import DisconnectIntegration from "@components/integrations/DisconnectIntegration";
-
-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 router = useRouter();
-  const { data: user } = trpc.useQuery(["viewer.me"]);
-
-  const utils = trpc.useContext();
-  const handleOpenChange = () => {
-    utils.invalidateQueries(["viewer.integrations"]);
-    router.replace("/apps/installed");
-  };
-
-  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 [existingCredentials, setExistingCredentials] = useState<number[]>([]);
-  const appCredentials = trpc.useQuery(["viewer.appCredentialsByType", { appType: type }], {
-    onSuccess(data) {
-      setExistingCredentials(data);
-    },
-  });
-
-  const allowedMultipleInstalls = categories.indexOf("calendar") > -1;
-
-  return (
-    <div className="-mx-4 md:-mx-8">
-      <div className="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>
-              </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">
-            {!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("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>
-              ) : existingCredentials.length > 0 ? (
-                <DisconnectIntegration
-                  id={existingCredentials[0]}
-                  render={(btnProps) => (
-                    <Button {...btnProps} color="warn" data-testid={type + "-integration-disconnect-button"}>
-                      {t("disconnect")}
-                    </Button>
-                  )}
-                  onOpenChange={handleOpenChange}
-                />
-              ) : (
-                <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
@@ -4,13 +4,22 @@ 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 { Icon } from "@calcom/ui/Icon";
-import { InputLeading, Label, TextArea, TextField } from "@calcom/ui/form/fields";
-import { Button, HorizontalTabs, showToast, Switch } from "@calcom/ui/v2";
-import { Dialog, DialogClose, DialogContent } from "@calcom/ui/v2/core/Dialog";
-
-import { EMBED_LIB_URL, WEBAPP_URL } from "@lib/config/constants";
+import {
+  Button,
+  Dialog,
+  DialogClose,
+  DialogContent,
+  HorizontalTabs,
+  Icon,
+  InputLeading,
+  Label,
+  showToast,
+  Switch,
+  TextArea,
+  TextField,
+} from "@calcom/ui";

 import ColorPicker from "@components/ui/colorpicker";
 import Select from "@components/ui/form/Select";
@@ -35,6 +44,7 @@ type PreviewState = {
  palette: {
    brandColor: string;
  };
+  hideEventTypeDetails: boolean;
 };
 const queryParamsForDialog = ["embedType", "embedTabName", "embedUrl"];

@@ -56,10 +66,13 @@ const goto = (router: NextRouter, searchParams: Record<string, string>) => {
 };

 const removeQueryParams = (router: NextRouter, queryParams: string[]) => {
+  const params = new URLSearchParams(window.location.search);
+
  queryParams.forEach((param) => {
-    delete router.query[param];
+    params.delete(param);
  });
-  router.push(`${router.asPath.split("?")[0]}?${router.query.toString()}`);
+
+  router.push(`${router.asPath.split("?")[0]}?${params.toString()}`);
 };

 /**
@@ -113,10 +126,12 @@ const getEmbedUIInstructionString = ({
  apiName,
  theme,
  brandColor,
+  hideEventTypeDetails,
 }: {
  apiName: string;
  theme?: string;
  brandColor: string;
+  hideEventTypeDetails: boolean;
 }) => {
  theme = theme !== "auto" ? theme : undefined;
  return getInstructionString({
@@ -129,6 +144,7 @@ const getEmbedUIInstructionString = ({
          brandColor,
        },
      },
+      hideEventTypeDetails: hideEventTypeDetails,
    },
  });
 };
@@ -241,18 +257,21 @@ const getEmbedTypeSpecificString = ({
    apiName: string;
    theme: PreviewState["theme"];
    brandColor: string;
+    hideEventTypeDetails: boolean;
  };
  if (embedFramework === "react") {
    uiInstructionStringArg = {
      apiName: "cal",
      theme: previewState.theme,
      brandColor: previewState.palette.brandColor,
+      hideEventTypeDetails: previewState.hideEventTypeDetails,
    };
  } else {
    uiInstructionStringArg = {
      apiName: "Cal",
      theme: previewState.theme,
      brandColor: previewState.palette.brandColor,
+      hideEventTypeDetails: previewState.hideEventTypeDetails,
    };
  }
  if (!frameworkCodes[embedType]) {
@@ -485,7 +504,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"
@@ -606,13 +627,13 @@ const ChooseEmbedTypesDialogContent = () => {
  const { t } = useLocale();
  const router = useRouter();
  return (
-    <DialogContent type="creation" useOwnActionButtons 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">
@@ -675,6 +696,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
    theme: Theme.auto,
    floatingPopup: {},
    elementClick: {},
+    hideEventTypeDetails: false,
    palette: {
      brandColor: "#000000",
    },
@@ -739,6 +761,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
    name: "ui",
    arg: {
      theme: previewState.theme,
+      hideEventTypeDetails: previewState.hideEventTypeDetails,
      styles: {
        branding: {
          ...previewState.palette,
@@ -784,7 +807,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
  ];

  return (
-    <DialogContent size="xl" className="p-0.5" type="creation" useOwnActionButtons>
+    <DialogContent size="xl" className="p-0.5" type="creation">
      <div className="flex">
        <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">
@@ -797,245 +820,258 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
            {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="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" ? "" : "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,
-                            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-start",
-                    embedType === "floating-popup" ? "space-x-2" : "hidden"
-                  )}>
-                  <Switch
-                    defaultChecked={true}
-                    onCheckedChange={(checked) => {
-                      setPreviewState((previewState) => {
-                        return {
-                          ...previewState,
-                          floatingPopup: {
-                            ...previewState.floatingPopup,
-                            hideButtonIcon: !checked,
-                          },
-                        };
-                      });
-                    }}
-                  />
-                  <div className="text-sm">Display Calendar Icon Button</div>
-                </div>
-                <div
-                  className={classNames(
-                    "mt-4 items-center justify-between",
-                    embedType === "floating-popup" ? "" : "hidden"
-                  )}>
-                  <div className="mb-2">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", embedType === "floating-popup" ? "" : "hidden")}>
-                  <div>Button Color</div>
-                  <div className="w-full">
-                    <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
+                        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" }}
+                        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
+                      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", embedType === "floating-popup" ? "" : "hidden")}>
-                  <div>Text Color</div>
-                  <div className="w-full">
-                    <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="">
-                    <div className="mb-2">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-full"
-                      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="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>
+                  </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">
+                    <div className="mb-4 flex items-center justify-start space-x-2">
+                      <Switch
+                        checked={previewState.hideEventTypeDetails}
+                        onCheckedChange={(checked) => {
+                          setPreviewState((previewState) => {
+                            return {
+                              ...previewState,
+                              hideEventTypeDetails: checked,
+                            };
+                          });
+                        }}
+                      />
+                      <div className="text-sm">{t("hide_eventtype_details")}</div>
+                    </div>
+                    <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="flex w-2/3 flex-col p-8">
@@ -1080,9 +1116,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                      {t("copy_code")}
                    </Button>
                  ) : null}
-                  <DialogClose asChild>
-                    <Button color="secondary">{t("Close")}</Button>
-                  </DialogClose>
+                  <DialogClose />
                </div>
              </div>
            );
@@ -4,7 +4,7 @@ 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.
@@ -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";
@@ -157,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,4 +1,4 @@
 /**
 * @deprecated Use custom Skeletons instead
 **/
-export { default } from "@calcom/ui/Loader";
+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,13 +1,10 @@
-import React from "react";
 import { OptionProps } from "react-select";

 import { InstallAppButton } from "@calcom/app-store/components";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import type { App } from "@calcom/types/App";
-import { Button } from "@calcom/ui";
-import { Icon } from "@calcom/ui/Icon";
-import { Select } from "@calcom/ui/v2";
+import { Button, Icon, Select } from "@calcom/ui";

 import { QueryCell } from "@lib/QueryCell";

@@ -42,7 +39,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
@@ -64,12 +61,10 @@ const AdditionalCalendarSelector = ({ isLoading }: AdditionalCalendarSelectorPro
          <Select
            name="additionalCalendar"
            placeholder={
-              <div className="flex justify-start text-black">
-                <Icon.FiPlus className="-ml-1 h-4 w-4 ltr:mr-2 rtl:ml-2 rtl:-mr-1" />
-                <p>{t("add")}</p>
-              </div>
+              <Button StartIcon={Icon.FiPlus} color="secondary">
+                {t("add")}
+              </Button>
            }
-            className="min-w-44"
            options={options}
            isSearchable={false}
            isLoading={isLoading}
@@ -83,11 +78,16 @@ const AdditionalCalendarSelector = ({ isLoading }: AdditionalCalendarSelectorPro
                width: "max-content",
                right: "0",
              }),
+              indicatorSeparator: (defaultStyles) => ({
+                ...defaultStyles,
+                display: "none",
+              }),
              control: (defaultStyles) => ({
                ...defaultStyles,
                padding: "0",
                border: "0",
-                borderRadius: "inherit",
+                borderRadius: "6px",
+                minHeight: "auto",
              }),
              dropdownIndicator: (defaultStyles) => ({
                ...defaultStyles,
@@ -4,15 +4,14 @@ 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 { Icon } from "@calcom/ui/Icon";
-import { showToast, SkeletonText } from "@calcom/ui/v2";
-import { Button, SkeletonButton, Shell } from "@calcom/ui/v2";
-import DisconnectIntegration from "@calcom/ui/v2/modules/integrations/DisconnectIntegration";
+import { Button, Icon, Shell, showToast, SkeletonButton, SkeletonText } from "@calcom/ui";

 import HeadSeo from "@components/seo/head-seo";

@@ -42,7 +41,8 @@ const Component = ({
  const router = useRouter();

  const mutation = useAddAppMutation(null, {
-    onSuccess: () => {
+    onSuccess: (data) => {
+      if (data?.setupPending) return;
      showToast(t("app_successfully_installed"), "success");
    },
    onError: (error) => {
@@ -57,13 +57,18 @@ const Component = ({
  }).format(price);

  const [existingCredentials, setExistingCredentials] = useState<number[]>([]);
-  const appCredentials = trpc.useQuery(["viewer.appCredentialsByType", { appType: type }], {
-    onSuccess(data) {
-      setExistingCredentials(data);
-    },
-  });
+  const appCredentials = trpc.viewer.appCredentialsByType.useQuery(
+    { appType: type },
+    {
+      onSuccess(data) {
+        setExistingCredentials(data);
+      },
+    }
+  );

-  const allowedMultipleInstalls = categories.indexOf("calendar") > -1;
+  // variant not other allows, an app to be shown in calendar category without requiring an actual calendar connection e.g. vimcal
+  // Such apps, can only be installed once.
+  const allowedMultipleInstalls = categories.indexOf("calendar") > -1 && variant !== "other";

  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">
@@ -118,6 +123,7 @@ const Component = ({
                  render={({ useDefaultComponent, ...props }) => {
                    if (useDefaultComponent) {
                      props = {
+                        ...props,
                        onClick: () => {
                          mutation.mutate({ type, variant, slug });
                        },
@@ -142,6 +148,7 @@ const Component = ({
            </div>
          ) : existingCredentials.length > 0 ? (
            <DisconnectIntegration
+              buttonProps={{ color: "secondary" }}
              label={t("disconnect")}
              credentialId={existingCredentials[0]}
              onSuccess={() => {
@@ -155,6 +162,7 @@ const Component = ({
              render={({ useDefaultComponent, ...props }) => {
                if (useDefaultComponent) {
                  props = {
+                    ...props,
                    onClick: () => {
                      mutation.mutate({ type, variant, slug });
                    },
@@ -189,7 +197,7 @@ const Component = ({
        <h4 className="mt-8 font-semibold text-gray-900 ">{t("pricing")}</h4>
        <span>
          {price === 0 ? (
-            "Free"
+            t("free_to_use_apps")
          ) : (
            <>
              {Intl.NumberFormat("en-US", {
@@ -267,8 +275,10 @@ const Component = ({
          )}
        </ul>
        <hr className="my-8" />
-        <span className="leading-1 block text-xs text-gray-500">{t("every_app_published")}</span>
-        <a className="mt-2 block text-xs text-red-500" href="mailto:help@cal.com">
+        <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>
@@ -3,17 +3,21 @@ import Link from "next/link";
 import { Fragment } from "react";

 import { InstallAppButton } from "@calcom/app-store/components";
+import DisconnectIntegration from "@calcom/features/apps/components/DisconnectIntegration";
 import DestinationCalendarSelector from "@calcom/features/calendars/DestinationCalendarSelector";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Icon } from "@calcom/ui/Icon";
-import SkeletonLoader from "@calcom/ui/apps/SkeletonLoader";
-import { Alert, Button, EmptyScreen } from "@calcom/ui/v2";
-import { List } from "@calcom/ui/v2/core/List";
-import { ShellSubHeading } from "@calcom/ui/v2/core/Shell";
-import Switch from "@calcom/ui/v2/core/Switch";
-import showToast from "@calcom/ui/v2/core/notifications";
-import DisconnectIntegration from "@calcom/ui/v2/modules/integrations/DisconnectIntegration";
+import {
+  Alert,
+  Button,
+  EmptyScreen,
+  Icon,
+  List,
+  ShellSubHeading,
+  showToast,
+  SkeletonLoader,
+  Switch,
+} from "@calcom/ui";

 import { QueryCell } from "@lib/QueryCell";

@@ -76,7 +80,7 @@ function CalendarSwitch(props: {
    },
    {
      async onSettled() {
-        await utils.invalidateQueries(["viewer.integrations"]);
+        await utils.viewer.integrations.invalidate();
      },
      onError() {
        showToast(`Something went wrong when toggling "${props.title}""`, "error");
@@ -106,7 +110,7 @@ function CalendarSwitch(props: {

 function CalendarList(props: Props) {
  const { t } = useLocale();
-  const query = trpc.useQuery(["viewer.integrations", { variant: "calendar", onlyInstalled: false }]);
+  const query = trpc.viewer.integrations.useQuery({ variant: "calendar", onlyInstalled: false });

  return (
    <QueryCell
@@ -143,7 +147,9 @@ function CalendarList(props: Props) {
 // todo: @hariom extract this into packages/apps-store as "GeneralAppSettings"
 function ConnectedCalendarsList(props: Props) {
  const { t } = useLocale();
-  const query = trpc.useQuery(["viewer.connectedCalendars"], { suspense: true });
+  const query = trpc.viewer.connectedCalendars.useQuery(undefined, {
+    suspense: true,
+  });
  const { fromOnboarding } = props;
  return (
    <QueryCell
@@ -234,19 +240,19 @@ export function CalendarListContainer(props: { heading?: boolean; fromOnboarding
  const utils = trpc.useContext();
  const onChanged = () =>
    Promise.allSettled([
-      utils.invalidateQueries(["viewer.integrations", { variant: "calendar", onlyInstalled: true }], {
-        exact: true,
-      }),
-      utils.invalidateQueries(["viewer.connectedCalendars"]),
+      utils.viewer.integrations.invalidate(
+        { variant: "calendar", onlyInstalled: true },
+        {
+          exact: true,
+        }
+      ),
+      utils.viewer.connectedCalendars.invalidate(),
    ]);
-  const query = trpc.useQuery(["viewer.connectedCalendars"]);
-  const installedCalendars = trpc.useQuery([
-    "viewer.integrations",
-    { variant: "calendar", onlyInstalled: true },
-  ]);
-  const mutation = trpc.useMutation("viewer.setDestinationCalendar", {
+  const query = trpc.viewer.connectedCalendars.useQuery();
+  const installedCalendars = trpc.viewer.integrations.useQuery({ variant: "calendar", onlyInstalled: true });
+  const mutation = trpc.viewer.setDestinationCalendar.useMutation({
    onSuccess: () => {
-      utils.invalidateQueries(["viewer.connectedCalendars"]);
+      utils.viewer.connectedCalendars.invalidate();
    },
  });
  return (
@@ -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
@@ -3,8 +3,7 @@ import { useRouter } from "next/router";
 import { ReactNode, useEffect, useState } from "react";

 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Icon } from "@calcom/ui";
-import { ListItem, ListItemText, ListItemTitle } from "@calcom/ui/v2/core/List";
+import { Icon, ListItem, ListItemText, ListItemTitle, showToast } from "@calcom/ui";

 import classNames from "@lib/classNames";

@@ -27,6 +26,13 @@ function IntegrationListItem(props: {
  const [highlight, setHighlight] = useState(hl === props.slug);
  const title = props.name || props.title;

+  // The highlight is to show a newly installed app, coming from the app's
+  // redirection after installation, so we proceed to show the corresponding
+  // message
+  if (highlight) {
+    showToast(t("app_successfully_installed"), "success");
+  }
+
  useEffect(() => {
    const timer = setTimeout(() => setHighlight(false), 3000);
    return () => {
@@ -38,7 +44,7 @@ function IntegrationListItem(props: {
      expanded={!!props.children}
      className={classNames(
        props.separate ? "rounded-md" : "first:rounded-t-md last:rounded-b-md",
-        "my-0 flex-col border transition-colors duration-500 ",
+        "my-0 flex-col border transition-colors duration-500",
        highlight ? "bg-yellow-100" : ""
      )}>
      <div className={classNames("flex w-full flex-1 items-center space-x-2 p-4 rtl:space-x-reverse")}>
@@ -3,7 +3,7 @@ import useDigitInput from "react-digit-input";
 import { useFormContext } from "react-hook-form";

 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Label, Input } from "@calcom/ui/form/fields";
+import { Label, Input } from "@calcom/ui";

 export default function TwoFactor({ center = true }) {
  const [value, onChange] = useState("");
@@ -1,86 +0,0 @@
-import { useRouter } from "next/router";
-import { useForm } from "react-hook-form";
-
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { trpc } from "@calcom/trpc/react";
-import { Button } from "@calcom/ui";
-import { Dialog, DialogClose, DialogContent, DialogTrigger } from "@calcom/ui/Dialog";
-import { Icon } from "@calcom/ui/Icon";
-import { Form } from "@calcom/ui/form/fields";
-import showToast from "@calcom/ui/v2/core/notifications";
-
-import { HttpError } from "@lib/core/http/error";
-
-export function NewScheduleButton({ name = "new-schedule" }: { name?: string }) {
-  const router = useRouter();
-  const { t } = useLocale();
-
-  const form = useForm<{
-    name: string;
-  }>();
-  const { register } = form;
-
-  const createMutation = trpc.useMutation("viewer.availability.schedule.create", {
-    onSuccess: async ({ schedule }) => {
-      await router.push("/availability/" + schedule.id);
-      showToast(t("schedule_created_successfully", { scheduleName: schedule.name }), "success");
-    },
-    onError: (err) => {
-      if (err instanceof HttpError) {
-        const message = `${err.statusCode}: ${err.message}`;
-        showToast(message, "error");
-      }
-
-      if (err.data?.code === "UNAUTHORIZED") {
-        const message = `${err.data.code}: You are not able to create this event`;
-        showToast(message, "error");
-      }
-    },
-  });
-
-  return (
-    <Dialog name={name} clearQueryParamsOnClose={["copy-schedule-id"]}>
-      <DialogTrigger asChild>
-        <Button data-testid={name} StartIcon={Icon.FiPlus}>
-          {t("new_schedule_btn")}
-        </Button>
-      </DialogTrigger>
-      <DialogContent>
-        <div className="mb-8">
-          <h3 className="text-lg font-bold leading-6 text-gray-900" id="modal-title">
-            {t("add_new_schedule")}
-          </h3>
-        </div>
-        <Form
-          form={form}
-          handleSubmit={(values) => {
-            createMutation.mutate(values);
-          }}>
-          <div className="mt-3 space-y-2">
-            <label htmlFor="label" className="block text-sm font-medium text-gray-700">
-              {t("name")}
-            </label>
-            <div className="mt-1">
-              <input
-                type="text"
-                id="name"
-                required
-                className="block w-full rounded-sm border-gray-300 text-sm"
-                placeholder={t("default_schedule_name")}
-                {...register("name")}
-              />
-            </div>
-          </div>
-          <div className="mt-8 flex flex-row-reverse gap-x-2">
-            <Button type="submit" loading={createMutation.isLoading}>
-              {t("continue")}
-            </Button>
-            <DialogClose asChild>
-              <Button color="secondary">{t("cancel")}</Button>
-            </DialogClose>
-          </div>
-        </Form>
-      </DialogContent>
-    </Dialog>
-  );
-}
@@ -1,350 +0,0 @@
-/**
- * @deprecated
- * use Component in  "/packages/features/schedules/components/Schedule";
- **/
-import classNames from "classnames";
-import React, { useCallback, useEffect, useMemo, useState } from "react";
-import { Controller, useFieldArray, useFormContext } from "react-hook-form";
-import { GroupBase, Props } from "react-select";
-
-import dayjs, { Dayjs, ConfigType } from "@calcom/dayjs";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import Button from "@calcom/ui/Button";
-import Dropdown, { DropdownMenuContent, DropdownMenuTrigger } from "@calcom/ui/Dropdown";
-import { Icon } from "@calcom/ui/Icon";
-import { Tooltip } from "@calcom/ui/Tooltip";
-
-import { defaultDayRange } from "@lib/availability";
-import { weekdayNames } from "@lib/core/i18n/weekday";
-import useMeQuery from "@lib/hooks/useMeQuery";
-import { TimeRange } from "@lib/types/schedule";
-
-import Select from "@components/ui/form/Select";
-
-/** Begin Time Increments For Select */
-const increment = 15;
-
-type Option = {
-  readonly label: string;
-  readonly value: number;
-};
-
-/**
- * Creates an array of times on a 15 minute interval from
- * 00:00:00 (Start of day) to
- * 23:45:00 (End of day with enough time for 15 min booking)
- */
-const useOptions = () => {
-  // Get user so we can determine 12/24 hour format preferences
-  const query = useMeQuery();
-  const { timeFormat } = query.data || { timeFormat: null };
-
-  const [filteredOptions, setFilteredOptions] = useState<Option[]>([]);
-
-  const options = useMemo(() => {
-    const end = dayjs().utc().endOf("day");
-    let t: Dayjs = dayjs().utc().startOf("day");
-
-    const options: Option[] = [];
-    while (t.isBefore(end)) {
-      options.push({
-        value: t.toDate().valueOf(),
-        label: dayjs(t)
-          .utc()
-          .format(timeFormat === 12 ? "h:mma" : "HH:mm"),
-      });
-      t = t.add(increment, "minutes");
-    }
-    return options;
-  }, [timeFormat]);
-
-  const filter = useCallback(
-    ({ offset, limit, current }: { offset?: ConfigType; limit?: ConfigType; current?: ConfigType }) => {
-      if (current) {
-        const currentOption = options.find((option) => option.value === dayjs(current).toDate().valueOf());
-        if (currentOption) setFilteredOptions([currentOption]);
-      } else
-        setFilteredOptions(
-          options.filter((option) => {
-            const time = dayjs(option.value);
-            return (!limit || time.isBefore(limit)) && (!offset || time.isAfter(offset));
-          })
-        );
-    },
-    [options]
-  );
-
-  return { options: filteredOptions, filter };
-};
-
-type TimeRangeFieldProps = {
-  name: string;
-  className?: string;
-};
-
-const LazySelect = ({
-  value,
-  min,
-  max,
-  ...props
-}: Omit<Props<Option, false, GroupBase<Option>>, "value"> & {
-  value: ConfigType;
-  min?: ConfigType;
-  max?: ConfigType;
-}) => {
-  // Lazy-loaded options, otherwise adding a field has a noticable redraw delay.
-  const { options, filter } = useOptions();
-
-  useEffect(() => {
-    filter({ current: value });
-  }, [filter, value]);
-
-  return (
-    <Select
-      options={options}
-      onMenuOpen={() => {
-        if (min) filter({ offset: min });
-        if (max) filter({ limit: max });
-      }}
-      value={options.find((option) => option.value === dayjs(value).toDate().valueOf())}
-      onMenuClose={() => filter({ current: value })}
-      {...props}
-    />
-  );
-};
-
-const TimeRangeField = ({ name, className }: TimeRangeFieldProps) => {
-  const { watch } = useFormContext();
-  const minEnd = watch(`${name}.start`);
-  const maxStart = watch(`${name}.end`);
-  return (
-    <div className={classNames("flex flex-grow items-center space-x-3", className)}>
-      <Controller
-        name={`${name}.start`}
-        render={({ field: { onChange, value } }) => {
-          return (
-            <LazySelect
-              className="w-[120px]"
-              value={value}
-              max={maxStart}
-              onChange={(option) => {
-                onChange(new Date(option?.value as number));
-              }}
-            />
-          );
-        }}
-      />
-      <span>-</span>
-      <Controller
-        name={`${name}.end`}
-        render={({ field: { onChange, value } }) => (
-          <LazySelect
-            className="flex-grow sm:w-[120px]"
-            value={value}
-            min={minEnd}
-            onChange={(option) => {
-              onChange(new Date(option?.value as number));
-            }}
-          />
-        )}
-      />
-    </div>
-  );
-};
-
-type ScheduleBlockProps = {
-  day: number;
-  weekday: string;
-  name: string;
-};
-
-const CopyTimes = ({ disabled, onApply }: { disabled: number[]; onApply: (selected: number[]) => void }) => {
-  const [selected, setSelected] = useState<number[]>([]);
-  const { i18n, t } = useLocale();
-  return (
-    <div className="m-4 space-y-2 py-4">
-      <p className="h6 text-xs font-medium uppercase text-neutral-400">Copy times to</p>
-      <ol className="space-y-2">
-        {weekdayNames(i18n.language).map((weekday, num) => (
-          <li key={weekday}>
-            <label className="flex w-full items-center justify-between">
-              <span>{weekday}</span>
-              <input
-                value={num}
-                defaultChecked={disabled.includes(num)}
-                disabled={disabled.includes(num)}
-                onChange={(e) => {
-                  if (e.target.checked && !selected.includes(num)) {
-                    setSelected(selected.concat([num]));
-                  } else if (!e.target.checked && selected.includes(num)) {
-                    setSelected(selected.slice(selected.indexOf(num), 1));
-                  }
-                }}
-                type="checkbox"
-                className="inline-block rounded-sm border-gray-300 text-neutral-900 focus:ring-neutral-500 disabled:text-neutral-400"
-              />
-            </label>
-          </li>
-        ))}
-      </ol>
-      <div className="pt-2">
-        <Button className="w-full justify-center" color="primary" onClick={() => onApply(selected)}>
-          {t("apply")}
-        </Button>
-      </div>
-    </div>
-  );
-};
-
-/**
- * @deprecated
- * use Component in  "/packages/features/schedules/components/Schedule";
- **/
-export const DayRanges = ({
-  name,
-  defaultValue = [defaultDayRange],
-}: {
-  name: string;
-  defaultValue?: TimeRange[];
-}) => {
-  const { setValue, watch } = useFormContext();
-  // XXX: Hack to make copying times work; `fields` is out of date until save.
-  const watcher = watch(name);
-  const { t } = useLocale();
-  const { fields, replace, append, remove } = useFieldArray({
-    name,
-  });
-
-  useEffect(() => {
-    if (defaultValue.length && !fields.length) {
-      replace(defaultValue);
-    }
-  }, [replace, defaultValue, fields.length]);
-
-  const handleAppend = () => {
-    // FIXME: Fix type-inference, can't get this to work. @see https://github.com/react-hook-form/react-hook-form/issues/4499
-    const nextRangeStart = dayjs((fields[fields.length - 1] as unknown as TimeRange).end);
-    const nextRangeEnd = dayjs(nextRangeStart).add(1, "hour");
-
-    if (nextRangeEnd.isBefore(nextRangeStart.endOf("day"))) {
-      return append({
-        start: nextRangeStart.toDate(),
-        end: nextRangeEnd.toDate(),
-      });
-    }
-  };
-
-  return (
-    <div className="space-y-2">
-      {fields.map((field, index) => (
-        <div key={field.id} className="flex items-center rtl:space-x-reverse">
-          <div className="flex flex-grow space-x-1 sm:flex-grow-0">
-            <TimeRangeField name={`${name}.${index}`} />
-            <Button
-              type="button"
-              size="icon"
-              color="minimal"
-              StartIcon={Icon.FiTrash}
-              onClick={() => remove(index)}
-            />
-          </div>
-          {index === 0 && (
-            <div className="absolute top-2 right-0 text-right sm:relative sm:top-0 sm:flex-grow">
-              <Tooltip content={t("add_time_availability") as string}>
-                <Button
-                  className="text-neutral-400"
-                  type="button"
-                  color="minimal"
-                  size="icon"
-                  StartIcon={Icon.FiPlus}
-                  onClick={handleAppend}
-                />
-              </Tooltip>
-              <Dropdown>
-                <Tooltip content={t("duplicate") as string}>
-                  <DropdownMenuTrigger asChild>
-                    <Button
-                      type="button"
-                      color="minimal"
-                      size="icon"
-                      StartIcon={Icon.FiCopy}
-                      onClick={handleAppend}
-                    />
-                  </DropdownMenuTrigger>
-                </Tooltip>
-                <DropdownMenuContent>
-                  <CopyTimes
-                    disabled={[parseInt(name.substring(name.lastIndexOf(".") + 1), 10)]}
-                    onApply={(selected) =>
-                      selected.forEach((day) => {
-                        // TODO: Figure out why this is different?
-                        // console.log(watcher, fields);
-                        setValue(name.substring(0, name.lastIndexOf(".") + 1) + day, watcher);
-                      })
-                    }
-                  />
-                </DropdownMenuContent>
-              </Dropdown>
-            </div>
-          )}
-        </div>
-      ))}
-    </div>
-  );
-};
-
-const ScheduleBlock = ({ name, day, weekday }: ScheduleBlockProps) => {
-  const { t } = useLocale();
-
-  const form = useFormContext();
-  const watchAvailable = form.watch(`${name}.${day}`, []);
-
-  return (
-    <fieldset className="relative flex flex-col justify-between space-y-2 py-5 sm:flex-row sm:space-y-0">
-      <label
-        className={classNames(
-          "flex space-x-2 rtl:space-x-reverse",
-          !watchAvailable.length ? "w-full" : "w-1/3"
-        )}>
-        <div className={classNames(!watchAvailable.length ? "w-1/3" : "w-full")}>
-          <input
-            type="checkbox"
-            checked={watchAvailable.length}
-            onChange={(e) => {
-              form.setValue(`${name}.${day}`, e.target.checked ? [defaultDayRange] : []);
-            }}
-            className="inline-block rounded-sm border-gray-300 text-neutral-900 focus:ring-neutral-500"
-          />
-          <span className="ml-2 inline-block text-sm capitalize">{weekday}</span>
-        </div>
-        {!watchAvailable.length && (
-          <div className="flex-grow text-right text-sm text-gray-500 sm:flex-shrink">
-            {t("no_availability")}
-          </div>
-        )}
-      </label>
-      {!!watchAvailable.length && (
-        <div className="flex-grow">
-          <DayRanges name={`${name}.${day}`} defaultValue={[]} />
-        </div>
-      )}
-    </fieldset>
-  );
-};
-
-/**
- * @deprecated
- * use Component in  "/packages/features/schedules/components/Schedule";
- **/
-const Schedule = ({ name }: { name: string }) => {
-  const { i18n } = useLocale();
-  return (
-    <fieldset className="divide-y divide-gray-200">
-      {weekdayNames(i18n.language).map((weekday, num) => (
-        <ScheduleBlock key={num} name={name} weekday={weekday} day={num} />
-      ))}
-    </fieldset>
-  );
-};
-
-export default Schedule;
@@ -1,83 +0,0 @@
-/**
- * @deprecated modifications to this file should be v2 only
- * Use `/packages/features/schedules/components/ScheduleListItem.tsx` instead
- */
-import Link from "next/link";
-import { Fragment } from "react";
-
-import { availabilityAsString } from "@calcom/lib/availability";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Availability } from "@calcom/prisma/client";
-import { inferQueryOutput } from "@calcom/trpc/react";
-import { Button } from "@calcom/ui";
-import Dropdown, { DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@calcom/ui/Dropdown";
-import { Icon } from "@calcom/ui/Icon";
-
-/**
- * @deprecated modifications to this file should be v2 only
- * Use `/packages/features/schedules/components/ScheduleListItem.tsx` instead
- */
-export function ScheduleListItem({
-  schedule,
-  deleteFunction,
-  isDeleting = false,
-}: {
-  schedule: inferQueryOutput<"viewer.availability.list">["schedules"][number];
-  deleteFunction: ({ scheduleId }: { scheduleId: number }) => void;
-  isDeleting: boolean;
-}) {
-  const { t, i18n } = useLocale();
-
-  return (
-    <li key={schedule.id}>
-      <div className="flex items-center justify-between py-5 hover:bg-neutral-50 ltr:pl-4 rtl:pr-4 sm:ltr:pl-0 sm:rtl:pr-0">
-        <div className="group flex w-full items-center justify-between hover:bg-neutral-50 sm:px-6">
-          <Link href={"/availability/" + schedule.id}>
-            <a className="flex-grow truncate text-sm" title={schedule.name}>
-              <div>
-                <span className="truncate font-medium text-neutral-900">{schedule.name}</span>
-                {schedule.isDefault && (
-                  <span className="ml-2 inline items-center rounded-sm bg-yellow-100 px-1.5 py-0.5 text-xs font-medium text-yellow-800">
-                    {t("default")}
-                  </span>
-                )}
-              </div>
-              <p className="mt-1 text-xs text-neutral-500">
-                {schedule.availability.map((availability: Availability) => (
-                  <Fragment key={availability.id}>
-                    {availabilityAsString(availability, { locale: i18n.language })}
-                    <br />
-                  </Fragment>
-                ))}
-              </p>
-            </a>
-          </Link>
-        </div>
-
-        <Dropdown>
-          <DropdownMenuTrigger className="group mr-5 h-10 w-10 border border-transparent p-0 text-neutral-500 hover:border-gray-200">
-            <Icon.FiMoreHorizontal className="h-5 w-5 group-hover:text-gray-800" />
-          </DropdownMenuTrigger>
-          <DropdownMenuContent>
-            <DropdownMenuItem>
-              <Button
-                disabled={isDeleting}
-                onClick={() => {
-                  deleteFunction({
-                    scheduleId: schedule.id,
-                  });
-                }}
-                type="button"
-                color="warn"
-                className="w-full font-normal"
-                StartIcon={isDeleting ? undefined : Icon.FiTrash}
-                loading={isDeleting}>
-                {isDeleting ? t("deleting") : t("delete_schedule")}
-              </Button>
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </Dropdown>
-      </div>
-    </li>
-  );
-}
@@ -2,7 +2,8 @@ import React from "react";

 import { SkeletonText } from "@calcom/ui";

-/** @deprecated Use `apps/web/components/v2/availability/SkeletonLoader.tsx` */
+import classNames from "@lib/classNames";
+
 function SkeletonLoader() {
  return (
    <ul className="animate-pulse divide-y divide-neutral-200 rounded-md border border-gray-200 bg-white sm:mx-0 sm:overflow-hidden">
@@ -20,26 +21,30 @@ function SkeletonItem() {
    <li className="group flex w-full items-center justify-between px-2 py-[23px] sm:px-6">
      <div className="flex-grow truncate text-sm">
        <div className="flex flex-col space-y-2">
-          <SkeletonText width="32" height="4" />
-          <SkeletonText width="32" height="2" />
+          <SkeletonText className="h-4 w-32" />
+          <SkeletonText className="h-2 w-32" />
        </div>
      </div>
      <div className="mt-4 hidden flex-shrink-0 sm:mt-0 sm:ml-5 lg:flex">
        <div className="flex justify-between space-x-2 rtl:space-x-reverse">
-          <SkeletonText width="12" height="6" />
+          <SkeletonText className="h-6 w-12" />
        </div>
      </div>
    </li>
  );
 }

-export const AvailabilitySelectSkeletonLoader = () => {
+export const SelectSkeletonLoader = ({ className }: { className?: string }) => {
  return (
-    <li className="group flex w-full items-center justify-between rounded-sm border border-gray-200 px-[10px] py-3">
+    <li
+      className={classNames(
+        "group flex w-full items-center justify-between rounded-sm border border-gray-200 px-[10px] py-3",
+        className
+      )}>
      <div className="flex-grow truncate text-sm">
        <div className="flex justify-between">
-          <SkeletonText width="32" height="4" />
-          <SkeletonText width="4" height="4" />
+          <SkeletonText className="h-4 w-32" />
+          <SkeletonText className="h-4 w-4" />
        </div>
      </div>
    </li>
--- a/Show More
+++ b/Show More