Cleaning up storybook files (#5290)

* storybook v2 init

* Merge config into storybook vite build

* Remove path

* Storybook config tweaks

* Added styles and settings for storybook v2, and started working on button documentation and examples.

* Badges + flex wrap on mobile

* Breadcrumbs+button+avatar

* Checkbox

* Input + moving files around

* WIP table

* WIP table grid

* Replaced imports for new components.

* Added first steps for varianttable.

* Small alignment fix.

* Custom Args Table - With scrollbar

* Adding table to components that need it + darkmode

* Add intro

* Fix types

* Remove V1 storybook and replace with V2

* Fix badge type error

* Fixed storybook dependencies

* Added cover image to storybook

* Remove vita from ts config, we dont use vite.

* Fixed button import.

* Explained postcss pseudo plugin.

* Fixed badge import.

* Add Avatar Stories

* ButtonGroup Stories

* Fixed imports

* Add checkbox stories

* Add  exports for differnt types of inputs

* Fix form and text area input

* Fix mass import errors

Co-authored-by: Jeroen Reumkens <hello@jeroenreumkens.nl>
Co-authored-by: Alex van Andel <me@alexvanandel.com>

apps/storybook/.gitignore

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

apps/storybook/.storybook/i18next.js

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

apps/storybook/.storybook/main.js

@@ -1,34 +1,29 @@
 const path = require("path");
 
 module.exports = {
-  stories: ["../stories/**/*.stories.mdx", "../stories/**/*.stories.@(js|jsx|ts|tsx)"],
+  stories: [
+    "../intro.stories.mdx",
+    "../../../packages/ui/components/**/*.stories.mdx",
+    "../../../packages/ui/components/**/*.stories.@(js|jsx|ts|tsx)",
+  ],
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
-    "storybook-addon-designs",
-    "@storybook/addon-a11y",
-    "storybook-addon-next",
+    "storybook-react-i18next",
+    {
+      name: "storybook-addon-next",
+      options: {
+        nextConfigPath: path.resolve(__dirname, "../../web/next.config.js"),
+      },
+    },
   ],
   framework: "@storybook/react",
   core: {
     builder: "webpack5",
   },
-  webpackFinal: async (config) => {
-    /**
-     * Fixes font import with /
-     * @see https://github.com/storybookjs/storybook/issues/12844#issuecomment-867544160
-     */
-    config.resolve.roots = [path.resolve(__dirname, "../public"), "node_modules"];
-    config.resolve.alias = {
-      ...config.resolve.alias,
-      "@/interfaces": path.resolve(__dirname, "../interfaces"),
-    };
-
-    /**
-     * Why webpack5... Just why?
-     * @type {{console: boolean, process: boolean, timers: boolean, os: boolean, querystring: boolean, sys: boolean, fs: boolean, url: boolean, crypto: boolean, path: boolean, zlib: boolean, punycode: boolean, util: boolean, stream: boolean, assert: boolean, string_decoder: boolean, domain: boolean, vm: boolean, tty: boolean, http: boolean, buffer: boolean, constants: boolean, https: boolean, events: boolean}}
-     */
+  staticDirs: ["../public"],
+  webpackFinal: async (config, { configType }) => {
     config.resolve.fallback = {
       fs: false,
       assert: false,
@@ -55,7 +50,6 @@ module.exports = {
       vm: false,
       zlib: false,
     };
-
     return config;
   },
 };

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

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

apps/storybook/.storybook/preview.jsx

@@ -1,14 +1,9 @@
-import { RouterContext } from "next/dist/shared/lib/router-context";
-import * as NextImage from "next/image";
+import { addDecorator } from "@storybook/react";
+import { I18nextProvider } from "react-i18next";
 
 import "../styles/globals.css";
-
-const OriginalNextImage = NextImage.default;
-
-Object.defineProperty(NextImage, "default", {
-  configurable: true,
-  value: (props) => <OriginalNextImage {...props} unoptimized />,
-});
+import "../styles/storybook-styles.css";
+import i18n from "./i18next";
 
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
@@ -18,11 +13,10 @@ export const parameters = {
       date: /Date$/,
     },
   },
-  nextRouter: {
-    Provider: RouterContext.Provider,
-  },
 };
 
+addDecorator((storyFn) => <I18nextProvider i18n={i18n}>{storyFn()}</I18nextProvider>);
+
 window.getEmbedNamespace = () => {
   const url = new URL(document.URL);
   const namespace = url.searchParams.get("embed");

apps/storybook/README.md

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

apps/storybook/components/CustomArgsTable.tsx

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

apps/storybook/components/Examples.tsx

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

apps/storybook/components/Note.tsx

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

apps/storybook/components/Title.tsx

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

apps/storybook/components/VariantsTable.tsx

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

apps/storybook/components/index.ts

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

apps/storybook/intro.stories.mdx

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

apps/storybook/next.config.js

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

apps/storybook/package.json

@@ -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.6.4",
+    "vite": "^3.1.0"
+  }
 }

apps/storybook/pages/_app.tsx

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

apps/storybook/pages/index.tsx

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

apps/storybook/postcss.config.js

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

apps/storybook/public/vercel.svg

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

apps/storybook/stories/Avatar.stories.tsx

@@ -1,26 +0,0 @@
-import { ComponentMeta } from "@storybook/react";
-
-import Avatar from "@calcom/ui/v2/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 />
-    </>
-  );
-};

apps/storybook/stories/AvatarGroup.stories.tsx

@@ -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>
-  );
-};

apps/storybook/stories/Badge.stories.tsx

@@ -1,58 +0,0 @@
-import { ComponentMeta } from "@storybook/react";
-import { Bell } from "react-feather";
-
-import Badge from "@calcom/ui/v2/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>
-);

apps/storybook/stories/Banner.stories.tsx

@@ -1,46 +0,0 @@
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { Info } from "react-feather";
-
-import Banner from "@calcom/ui/v2/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")}
-    />
-  );
-};

apps/storybook/stories/Breadcrumb.stories.tsx

@@ -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",
-  },
-};

apps/storybook/stories/Button.stories.tsx

@@ -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",
-};

apps/storybook/stories/ButtonGroup.stories.tsx

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

apps/storybook/stories/Cards.stories.tsx

@@ -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>
-  );
-};

apps/storybook/stories/Checkbox.stories.tsx

@@ -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 />
-  </>
-);

apps/storybook/stories/Colors.stories.tsx

@@ -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)} />;
-};

apps/storybook/stories/DatePicker.stories.tsx

@@ -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>
-  );
-};

apps/storybook/stories/DateRangePicker.stories.tsx

@@ -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>
-  );
-};

apps/storybook/stories/EmptyScreen.stories.tsx

@@ -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")}
-  />
-);

apps/storybook/stories/FormStep.stories.tsx

@@ -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>
-  );
-};

apps/storybook/stories/HorizontalTab.stories.tsx

@@ -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",
-  },
-};

apps/storybook/stories/Input.stories.tsx

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

apps/storybook/stories/Modal.stories.tsx

@@ -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>
-  );
-};

apps/storybook/stories/Notifcations.stories.tsx

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

apps/storybook/stories/PageHeader.stories.tsx

@@ -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"
-      />
-    }
-  />
-);

apps/storybook/stories/Radio.stories.tsx

@@ -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>
-  );
-};

apps/storybook/stories/Select.stories.tsx

@@ -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} />;

apps/storybook/stories/Switch.stories.tsx

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

apps/storybook/stories/TabItem.stories.tsx

@@ -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",
-  },
-};

apps/storybook/stories/ToggleGroup.stories.tsx

@@ -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" },
-      ]}
-    />
-  );
-};

apps/storybook/stories/VerticalTab.stories.tsx

@@ -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",
-  },
-};

apps/storybook/styles/globals.css

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

apps/storybook/styles/storybook-styles.css

@@ -0,0 +1,189 @@
+.sbdocs {
+  font-family: 'Inter var' !important;
+  padding: 0!important;
+}
+
+#docs-root {
+  overflow: hidden;
+}
+
+.sbdocs.sbdocs-h1 {
+  font-family: "Cal Sans", "sans-serif" !important;
+  font-weight: 600;
+  font-size: 36px;
+  margin: 0 0 82px 0;
+}
+
+.sbdocs.sbdocs-h2 {
+  font-size: 20px;
+  font-weight: 500;
+  border: none;
+  border-top: 2px solid rgba(0, 0, 0, 0.12);
+  padding-top: 12px!important;
+  padding-bottom: 12px!important;
+  margin: 82px 0 0 0;
+}
+
+.sbdocs.sbdocs-p {
+  max-width: 560px;
+  margin: 0 0 12px 0;
+}
+
+.sbdocs.sbdocs-content {
+  width: 1200px;
+  max-width: 100%;
+}
+
+/** Docs table **/
+.custom-args-wrapper{
+  max-height: 600px;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  margin-bottom: 1rem;
+}
+
+.docblock-argstable-body {
+  box-shadow: none!important;
+  font-size: 14px;
+}
+
+/* .docblock-argstable-head tr th, */
+.docblock-argstable-body tr td {
+  /* padding-left: 0!important; */
+  padding: 20px !important;
+}
+
+/** Column titles **/
+.docblock-argstable-body tr td > span,
+.docblock-argstable-head tr th > span {
+  color: #525252 !important;
+  font-weight: 500 !important;
+}
+
+.docblock-argstable-body div p,
+.docblock-argstable-body div span {
+  color: #8F8F8F !important;
+}
+
+/** Custom components **/
+.story-title {
+  margin: 0 0 82px 0;
+}
+
+.story-title.offset {
+  margin-top: 100px;
+}
+
+.story-title h1 {
+  font-family: "Cal Sans", "sans-serif" !important;
+  font-weight: 600;
+  font-size: 36px;
+}
+
+.story-title h1 span {
+  color: #9CA3AF;
+  font-family: 'Inter var';
+  font-weight: normal;
+  display: inline-block;
+  margin-left: 8px;
+}
+
+.story-title p {
+  color: #111827;
+  font-size: 16px;
+}
+
+.examples {
+  background-color: #F9FAFB;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 20px;
+}
+
+.examples-content {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  padding: 30px 0;
+}
+
+.examples-title {
+  color: #8F8F8F;
+  font-size: 14px;
+  margin-bottom: 30px;
+}
+
+.examples-item-title {
+  font-size: 12px;
+  color: #8F8F8F;
+  margin-bottom: 12px;
+  display: block;
+}
+
+.examples-item {
+  margin: 0 20px;
+}
+
+.examples-footnote p,
+.examples-footnote ul,
+.examples-footnote li {
+  color: #8F8F8F;
+  font-size: 14px;
+}
+
+.examples-footnote ul {
+  padding-left: 8px;
+}
+
+.examples-footnote li {
+  margin: 0!important;
+}
+
+.story-note {
+  background-color: #F9FAFB;
+  font-size: 14px;
+  padding: 20px;
+  margin-bottom: 12px;
+  border-radius: 8px;
+}
+
+.story-note > div {
+  max-width: 600px;
+}
+
+/** SB Docs Preview **/
+.sbdocs-preview {
+  width: 100vw;
+  left: calc((100vw - 1200px) / -2);
+  box-shadow: none !important;
+  margin: 0 !important;
+  border: none !important;
+  border-radius: none!important;
+}
+
+.docs-story > div:first-child {
+  padding: 0!important;
+  margin: 0!important;
+}
+
+.docs-story .innerZoomElementWrapper > div {
+  border: none !important;
+}
+
+.sb-main-padded {
+  padding: 0!important;
+}
+
+@media screen and (max-width: 1200px) {
+  .sbdocs-preview {
+    left: -24px;
+    width: calc(100vw + 48px);
+    padding-left: 12px;
+    padding-right: 12px;
+  }
+
+  .sbdocs.sbdocs-content {
+    padding: 24px !important;
+  }
+}

apps/storybook/tailwind.config.js

@@ -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}"],
 };

apps/storybook/tsconfig.node.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  }
+}

apps/web/components/App.tsx

@@ -11,7 +11,7 @@ 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 { Badge } from "@calcom/ui/components/badge";
 import showToast from "@calcom/ui/v2/core/notifications";
 
 import DisconnectIntegration from "@components/integrations/DisconnectIntegration";

apps/web/components/Embed.tsx

@@ -6,8 +6,9 @@ import { components, ControlProps } from "react-select";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Icon } from "@calcom/ui/Icon";
+import { Button } from "@calcom/ui/components";
 import { InputLeading, Label, TextArea, TextField } from "@calcom/ui/form/fields";
-import { Button, HorizontalTabs, showToast, Switch } from "@calcom/ui/v2";
+import { 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";

apps/web/components/apps/App.tsx

@@ -10,8 +10,9 @@ 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 { Button } from "@calcom/ui/components";
 import { showToast, SkeletonText } from "@calcom/ui/v2";
-import { Button, SkeletonButton, Shell } from "@calcom/ui/v2";
+import { SkeletonButton, Shell } from "@calcom/ui/v2";
 import DisconnectIntegration from "@calcom/ui/v2/modules/integrations/DisconnectIntegration";
 
 import HeadSeo from "@components/seo/head-seo";

apps/web/components/apps/CalendarListContainer.tsx

@@ -8,7 +8,8 @@ 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 { Button } from "@calcom/ui/components";
+import { Alert, 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";

apps/web/components/apps/OmniInstallAppButton.tsx

@@ -5,8 +5,8 @@ import useApp from "@calcom/lib/hooks/useApp";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { Icon } from "@calcom/ui/Icon";
+import { Button } from "@calcom/ui/components/button";
 import { showToast } from "@calcom/ui/v2";
-import Button from "@calcom/ui/v2/core/Button";
 
 /**
  * Use this component to allow installing an app from anywhere on the app.

apps/web/components/booking/BookingListItem.tsx

@@ -11,9 +11,9 @@ import { getEveryFreqFor } from "@calcom/lib/recurringStrings";
 import { inferQueryInput, inferQueryOutput, trpc } from "@calcom/trpc/react";
 import { Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/Dialog";
 import { Icon } from "@calcom/ui/Icon";
+import { Badge } from "@calcom/ui/components/badge";
+import { Button } from "@calcom/ui/components/button";
 import { TextArea } from "@calcom/ui/form/fields";
-import Badge from "@calcom/ui/v2/core/Badge";
-import Button from "@calcom/ui/v2/core/Button";
 import MeetingTimeInTimezones from "@calcom/ui/v2/core/MeetingTimeInTimezones";
 import Tooltip from "@calcom/ui/v2/core/Tooltip";
 import showToast from "@calcom/ui/v2/core/notifications";

apps/web/components/booking/pages/BookingPage.tsx

@@ -40,9 +40,9 @@ import { getEveryFreqFor } from "@calcom/lib/recurringStrings";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import { Icon } from "@calcom/ui/Icon";
 import { Tooltip } from "@calcom/ui/Tooltip";
+import { Button } from "@calcom/ui/components";
 import PhoneInput from "@calcom/ui/form/PhoneInputLazy";
 import { EmailInput, Form } from "@calcom/ui/form/fields";
-import { Button } from "@calcom/ui/v2";
 
 import { asStringOrNull } from "@lib/asStringOrNull";
 import { timeZone } from "@lib/clock";

apps/web/components/dialog/RescheduleDialog.tsx

@@ -4,8 +4,8 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/Dialog";
 import { Icon } from "@calcom/ui/Icon";
+import { Button } from "@calcom/ui/components/button";
 import { TextArea } from "@calcom/ui/form/fields";
-import Button from "@calcom/ui/v2/core/Button";
 import showToast from "@calcom/ui/v2/core/notifications";
 
 interface IRescheduleDialog {

apps/web/components/getting-started/components/CalendarItem.tsx

@@ -1,7 +1,7 @@
 import { InstallAppButtonWithoutPlanCheck } from "@calcom/app-store/components";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { App } from "@calcom/types/App";
-import Button from "@calcom/ui/v2/core/Button";
+import { Button } from "@calcom/ui/components/button";
 
 interface ICalendarItem {
   title: string;

apps/web/components/getting-started/components/ConnectedCalendarItem.tsx

@@ -1,7 +1,4 @@
-import { DotsHorizontalIcon } from "@heroicons/react/solid";
-
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button } from "@calcom/ui/v2";
 
 import { CalendarSwitch } from "./CalendarSwitch";
 

apps/web/components/getting-started/steps-views/SetupAvailability.tsx

@@ -7,8 +7,8 @@ import { DEFAULT_SCHEDULE } from "@calcom/lib/availability";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc, TRPCClientErrorLike } from "@calcom/trpc/react";
 import { AppRouter } from "@calcom/trpc/server/routers/_app";
+import { Button } from "@calcom/ui/components/button";
 import { Form } from "@calcom/ui/form/fields";
-import { Button } from "@calcom/ui/v2";
 
 interface ISetupAvailabilityProps {
   nextStep: () => void;

apps/web/components/getting-started/steps-views/UserProfile.tsx

@@ -6,7 +6,9 @@ import { useForm } from "react-hook-form";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { User } from "@calcom/prisma/client";
 import { trpc } from "@calcom/trpc/react";
-import { Button, showToast, TextArea } from "@calcom/ui/v2";
+import { Button } from "@calcom/ui/components";
+import { TextArea } from "@calcom/ui/components/form";
+import { showToast } from "@calcom/ui/v2";
 import ImageUploader from "@calcom/ui/v2/core/ImageUploader";
 
 import { AvatarSSR } from "@components/ui/AvatarSSR";

apps/web/components/getting-started/steps-views/UserSettings.tsx

@@ -6,8 +6,8 @@ import dayjs from "@calcom/dayjs";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { User } from "@calcom/prisma/client";
 import { trpc } from "@calcom/trpc/react";
+import { Button } from "@calcom/ui/components/button";
 import TimezoneSelect from "@calcom/ui/form/TimezoneSelect";
-import { Button } from "@calcom/ui/v2";
 
 import { UsernameAvailability } from "@components/ui/UsernameAvailability";
 

apps/web/components/integrations/SubHeadingTitleWithConnections.tsx

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
 
-import Badge from "@calcom/ui/Badge";
+import { Badge } from "@calcom/ui/components/badge";
 
 function pluralize(opts: { num: number; plural: string; singular: string }) {
   if (opts.num === 0) {

apps/web/components/security/DisableTwoFactorModal.tsx

@@ -5,8 +5,8 @@ import { ErrorCode } from "@calcom/lib/auth";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import Button from "@calcom/ui/Button";
 import { Dialog, DialogContent } from "@calcom/ui/Dialog";
+import { PasswordField } from "@calcom/ui/components/form";
 import { Form, Label } from "@calcom/ui/form/fields";
-import { PasswordField } from "@calcom/ui/v2/core/form/fields";
 
 import TwoFactor from "@components/auth/TwoFactor";
 

apps/web/components/security/DisableUserImpersonation.tsx

@@ -1,7 +1,7 @@
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import Badge from "@calcom/ui/Badge";
 import Button from "@calcom/ui/Button";
+import { Badge } from "@calcom/ui/components/badge";
 import showToast from "@calcom/ui/v2/core/notifications";
 
 const DisableUserImpersonation = ({ disableImpersonation }: { disableImpersonation: boolean }) => {

apps/web/components/security/EnableTwoFactorModal.tsx

@@ -5,7 +5,7 @@ import { ErrorCode } from "@calcom/lib/auth";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import Button from "@calcom/ui/Button";
 import { Dialog, DialogContent } from "@calcom/ui/Dialog";
-import { Form } from "@calcom/ui/v2/core/form/fields";
+import { Form } from "@calcom/ui/components/form";
 
 import TwoFactor from "@components/auth/TwoFactor";
 

apps/web/components/security/TwoFactorAuthSection.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 
-import Badge from "@calcom/ui/Badge";
 import Button from "@calcom/ui/Button";
+import { Badge } from "@calcom/ui/components/badge";
 
 import { useLocale } from "@lib/hooks/useLocale";
 

apps/web/components/settings/CalendarSwitch.tsx

@@ -3,7 +3,7 @@ import { useMutation } from "@tanstack/react-query";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { Icon } from "@calcom/ui";
-import Badge from "@calcom/ui/v2/core/Badge";
+import { Badge } from "@calcom/ui/components/badge";
 import Switch from "@calcom/ui/v2/core/Switch";
 import showToast from "@calcom/ui/v2/core/notifications";
 

apps/web/components/settings/DisableTwoFactorModal.tsx

@@ -3,10 +3,10 @@ import { useForm } from "react-hook-form";
 
 import { ErrorCode } from "@calcom/lib/auth";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import Button from "@calcom/ui/v2/core/Button";
+import { Button } from "@calcom/ui/components/button";
+import { Form, Label } from "@calcom/ui/components/form";
+import { PasswordField } from "@calcom/ui/components/form";
 import { Dialog, DialogContent } from "@calcom/ui/v2/core/Dialog";
-import { Form, Label } from "@calcom/ui/v2/core/form/fields";
-import { PasswordField } from "@calcom/ui/v2/core/form/fields";
 
 import TwoFactor from "@components/auth/TwoFactor";
 

apps/web/components/settings/EnableTwoFactorModal.tsx

@@ -3,9 +3,9 @@ import { useForm } from "react-hook-form";
 
 import { ErrorCode } from "@calcom/lib/auth";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import Button from "@calcom/ui/v2/core/Button";
+import { Button } from "@calcom/ui/components/button";
+import { Form, TextField } from "@calcom/ui/components/form";
 import { Dialog, DialogContent } from "@calcom/ui/v2/core/Dialog";
-import { Form, TextField } from "@calcom/ui/v2/core/form/fields";
 
 import TwoFactor from "@components/auth/TwoFactor";
 

apps/web/components/team/DisableTeamImpersonation.tsx

@@ -1,7 +1,7 @@
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import Badge from "@calcom/ui/Badge";
 import Button from "@calcom/ui/Button";
+import { Badge } from "@calcom/ui/components/badge";
 import showToast from "@calcom/ui/v2/core/notifications";
 
 /** @deprecated Use `packages/features/ee/teams/components/DisableTeamImpersonation.tsx` */

apps/web/components/team/TeamListItem.tsx

@@ -6,8 +6,8 @@ import { getPlaceholderAvatar } from "@calcom/lib/getPlaceholderAvatar";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { inferQueryOutput, trpc } from "@calcom/trpc/react";
 import { Icon } from "@calcom/ui/Icon";
-import Button from "@calcom/ui/v2/core/Button";
-import ButtonGroup from "@calcom/ui/v2/core/ButtonGroup";
+import { Button } from "@calcom/ui/components/button";
+import { ButtonGroup } from "@calcom/ui/components/buttonGroup";
 import ConfirmationDialogContent from "@calcom/ui/v2/core/ConfirmationDialogContent";
 import { Dialog, DialogTrigger } from "@calcom/ui/v2/core/Dialog";
 import Dropdown, {

apps/web/components/team/screens/Team.tsx

@@ -2,7 +2,7 @@ import Link from "next/link";
 import { TeamPageProps } from "pages/team/[slug]";
 
 import { WEBAPP_URL } from "@calcom/lib/constants";
-import { Avatar } from "@calcom/ui/v2";
+import { Avatar } from "@calcom/ui/components";
 
 import { useLocale } from "@lib/hooks/useLocale";
 

apps/web/components/ui/TableActions.tsx

@@ -7,7 +7,7 @@ import Dropdown, {
   DropdownMenuPortal,
 } from "@calcom/ui/Dropdown";
 import { Icon } from "@calcom/ui/Icon";
-import Button from "@calcom/ui/v2/core/Button";
+import { Button } from "@calcom/ui/components/button";
 
 import { SVGComponent } from "@lib/types/SVGComponent";
 

apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx

@@ -13,8 +13,8 @@ import { inferQueryOutput, trpc } from "@calcom/trpc/react";
 import type { AppRouter } from "@calcom/trpc/server/routers/_app";
 import { Dialog, DialogClose, DialogContent, DialogHeader } from "@calcom/ui/Dialog";
 import { Icon, StarIconSolid } from "@calcom/ui/Icon";
-import { Button } from "@calcom/ui/v2";
-import { Input, Label } from "@calcom/ui/v2";
+import { Button } from "@calcom/ui/components/button";
+import { Input, Label } from "@calcom/ui/components/form";
 
 export enum UsernameChangeStatusEnum {
   NORMAL = "NORMAL",

apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx

@@ -9,7 +9,7 @@ import { trpc } from "@calcom/trpc/react";
 import { AppRouter } from "@calcom/trpc/server/routers/_app";
 import { Dialog, DialogClose, DialogContent, DialogHeader } from "@calcom/ui/Dialog";
 import { Icon } from "@calcom/ui/Icon";
-import { Input, Label, Button } from "@calcom/ui/v2";
+import { Button, Input, Label } from "@calcom/ui/components";
 
 interface ICustomUsernameProps {
   currentUsername: string | undefined;

apps/web/components/v2/eventtype/AvailabilityTab.tsx

@@ -9,8 +9,9 @@ import { weekdayNames } from "@calcom/lib/weekday";
 import { trpc } from "@calcom/trpc/react";
 import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
 import { Icon } from "@calcom/ui";
-import { Badge, SettingsToggle } from "@calcom/ui/v2";
-import Button from "@calcom/ui/v2/core/Button";
+import { Badge } from "@calcom/ui/components/badge";
+import { Button } from "@calcom/ui/components/button";
+import { SettingsToggle } from "@calcom/ui/v2";
 import Select from "@calcom/ui/v2/core/form/select";
 import { SkeletonText } from "@calcom/ui/v2/core/skeleton";
 

apps/web/components/v2/eventtype/CustomInputTypeForm.tsx

@@ -2,7 +2,9 @@ import { EventTypeCustomInput, EventTypeCustomInputType } from "@prisma/client";
 import React, { FC } from "react";
 import { Controller, SubmitHandler, useForm, useWatch } from "react-hook-form";
 
-import { Button, Select, TextArea, TextField } from "@calcom/ui/v2";
+import { Button } from "@calcom/ui/components";
+import { TextField } from "@calcom/ui/components/form";
+import { Select } from "@calcom/ui/v2";
 
 import { useLocale } from "@lib/hooks/useLocale";
 

apps/web/components/v2/eventtype/EditLocationDialog.tsx

@@ -17,10 +17,10 @@ import {
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { inferQueryOutput, trpc } from "@calcom/trpc/react";
 import { Icon } from "@calcom/ui/Icon";
+import { Button } from "@calcom/ui/components";
+import { Label, Form } from "@calcom/ui/components/form";
 import PhoneInput from "@calcom/ui/form/PhoneInputLazy";
 import { Dialog, DialogContent } from "@calcom/ui/v2";
-import { Button, Label } from "@calcom/ui/v2";
-import { Form } from "@calcom/ui/v2";
 import { Select } from "@calcom/ui/v2/";
 
 import { QueryCell } from "@lib/QueryCell";

apps/web/components/v2/eventtype/EventAdvancedTab.tsx

@@ -1,4 +1,3 @@
-import { useAutoAnimate } from "@formkit/auto-animate/react";
 import { EventTypeCustomInput } from "@prisma/client/";
 import Link from "next/link";
 import { EventTypeSetupInfered, FormValues } from "pages/event-types/[type]";
@@ -12,20 +11,8 @@ import { CAL_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { Icon } from "@calcom/ui";
-import {
-  Button,
-  CustomInputItem,
-  Dialog,
-  DialogContent,
-  Label,
-  SettingsToggle,
-  showToast,
-  Skeleton,
-  Switch,
-  TextField,
-  Tooltip,
-} from "@calcom/ui/v2";
-import CheckboxField from "@calcom/ui/v2/core/form/Checkbox";
+import { Checkbox, Button, TextField, Label } from "@calcom/ui/components";
+import { CustomInputItem, Dialog, DialogContent, SettingsToggle, showToast, Tooltip } from "@calcom/ui/v2";
 
 import CustomInputTypeForm from "@components/v2/eventtype/CustomInputTypeForm";
 
@@ -335,7 +322,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
                     }}
                   />
                   <div className="mt-2">
-                    <CheckboxField
+                    <Checkbox
                       description={t("show_attendees")}
                       onChange={(e) => formMethods.setValue("seatsShowAttendees", e.target.checked)}
                       defaultChecked={!!eventType.seatsShowAttendees}

apps/web/components/v2/eventtype/EventAppsTab.tsx

@@ -10,7 +10,8 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { inferQueryOutput, trpc } from "@calcom/trpc/react";
 import { Icon } from "@calcom/ui";
 import ErrorBoundary from "@calcom/ui/ErrorBoundary";
-import { Button, EmptyScreen } from "@calcom/ui/v2";
+import { Button } from "@calcom/ui/components";
+import { EmptyScreen } from "@calcom/ui/v2";
 
 type EventType = Pick<EventTypeSetupInfered, "eventType">["eventType"] &
   EventTypeAppCardComponentProps["eventType"];

apps/web/components/v2/eventtype/EventLimitsTab.tsx

@@ -9,7 +9,9 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { PeriodType } from "@calcom/prisma/client";
 import type { BookingLimit } from "@calcom/types/Calendar";
 import { Icon } from "@calcom/ui";
-import { Select, Switch, Label, Input, MinutesField, Button, SettingsToggle } from "@calcom/ui/v2";
+import { Button } from "@calcom/ui/components";
+import { Label, Input, MinutesField } from "@calcom/ui/components/form";
+import { Select, SettingsToggle } from "@calcom/ui/v2";
 import DateRangePicker from "@calcom/ui/v2/core/form/date-range-picker/DateRangePicker";
 
 export const EventLimitsTab = (props: Pick<EventTypeSetupInfered, "eventType">) => {

apps/web/components/v2/eventtype/EventSetupTab.tsx

@@ -10,7 +10,9 @@ import { getEventLocationType, EventLocationType } from "@calcom/app-store/locat
 import { CAL_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Icon } from "@calcom/ui/Icon";
-import { Select, Label, TextField, Button, Skeleton } from "@calcom/ui/v2";
+import { Button } from "@calcom/ui/components";
+import { Label, TextField } from "@calcom/ui/components/form";
+import { Select, Skeleton } from "@calcom/ui/v2";
 
 import { slugify } from "@lib/slugify";
 

apps/web/components/v2/eventtype/EventTeamTab.tsx

@@ -6,7 +6,9 @@ import { Controller, useFormContext } from "react-hook-form";
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Icon } from "@calcom/ui";
-import { Avatar, Button, Label, Select, CheckedTeamSelect } from "@calcom/ui/v2";
+import { Button, Avatar } from "@calcom/ui/components";
+import { Label } from "@calcom/ui/components/form";
+import { Select, CheckedTeamSelect } from "@calcom/ui/v2";
 
 interface IMemberToValue {
   id: number | null;

apps/web/components/v2/eventtype/EventTypeSingleLayout.tsx

@@ -11,16 +11,8 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { HttpError } from "@calcom/lib/http-error";
 import { trpc, TRPCClientError } from "@calcom/trpc/react";
 import { Icon } from "@calcom/ui/Icon";
-import {
-  Button,
-  ButtonGroup,
-  HorizontalTabs,
-  Label,
-  showToast,
-  Switch,
-  Tooltip,
-  VerticalTabs,
-} from "@calcom/ui/v2";
+import { Button, ButtonGroup, Label } from "@calcom/ui/components";
+import { HorizontalTabs, showToast, Switch, Tooltip, VerticalTabs } from "@calcom/ui/v2";
 import ConfirmationDialogContent from "@calcom/ui/v2/core/ConfirmationDialogContent";
 import { Dialog } from "@calcom/ui/v2/core/Dialog";
 import Divider from "@calcom/ui/v2/core/Divider";

apps/web/components/v2/eventtype/RecurringEventController.tsx

@@ -6,7 +6,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Frequency } from "@calcom/prisma/zod-utils";
 import type { RecurringEvent } from "@calcom/types/Calendar";
 import { Alert } from "@calcom/ui/Alert";
-import { Label, Select, Switch, SettingsToggle } from "@calcom/ui/v2";
+import { Select, SettingsToggle } from "@calcom/ui/v2";
 
 type RecurringEventControllerProps = {
   recurringEvent: RecurringEvent | null;

apps/web/pages/apps/installed/[category].tsx

@@ -9,8 +9,8 @@ import { inferQueryOutput, trpc } from "@calcom/trpc/react";
 import { App } from "@calcom/types/App";
 import { AppGetServerSidePropsContext } from "@calcom/types/AppGetServerSideProps";
 import { Icon } from "@calcom/ui/Icon";
+import { Button } from "@calcom/ui/components/button";
 import { Alert } from "@calcom/ui/v2/core/Alert";
-import Button from "@calcom/ui/v2/core/Button";
 import EmptyScreen from "@calcom/ui/v2/core/EmptyScreen";
 import { List } from "@calcom/ui/v2/core/List";
 import { ShellSubHeading } from "@calcom/ui/v2/core/Shell";

apps/web/pages/auth/forgot-password/[id].tsx

@@ -7,11 +7,10 @@ import React, { useMemo } from "react";
 
 import dayjs from "@calcom/dayjs";
 import prisma from "@calcom/prisma";
-import { Button, Input, TextField } from "@calcom/ui/v2";
+import { Button, TextField } from "@calcom/ui/components";
 
 import { useLocale } from "@lib/hooks/useLocale";
 
-import { HeadSeo } from "@components/seo/head-seo";
 import AuthContainer from "@components/ui/AuthContainer";
 
 type Props = {

apps/web/pages/auth/forgot-password/index.tsx

@@ -5,7 +5,7 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import React, { SyntheticEvent } from "react";
 
-import { EmailField, Button } from "@calcom/ui/v2";
+import { Button, EmailField } from "@calcom/ui/components";
 
 import { getSession } from "@lib/auth";
 import { useLocale } from "@lib/hooks/useLocale";

apps/web/pages/auth/login.tsx

@@ -14,7 +14,8 @@ import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calco
 import prisma from "@calcom/prisma";
 import { Icon } from "@calcom/ui";
 import { Alert } from "@calcom/ui/Alert";
-import { Button, EmailField, PasswordField } from "@calcom/ui/v2";
+import { Button } from "@calcom/ui/components";
+import { EmailField, PasswordField } from "@calcom/ui/components/form";
 import SAMLLogin from "@calcom/ui/v2/modules/auth/SAMLLogin";
 
 import { ErrorCode, getSession } from "@lib/auth";

apps/web/pages/auth/logout.tsx

@@ -6,7 +6,7 @@ import { useEffect } from "react";
 import { WEBSITE_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Icon } from "@calcom/ui/Icon";
-import Button from "@calcom/ui/v2/core/Button";
+import { Button } from "@calcom/ui/components/button";
 
 import { inferSSRProps } from "@lib/types/inferSSRProps";
 

apps/web/pages/auth/setup.tsx

@@ -10,7 +10,7 @@ import { isPasswordValid } from "@calcom/lib/auth";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import prisma from "@calcom/prisma";
 import { inferSSRProps } from "@calcom/types/inferSSRProps";
-import { TextField, EmailField, PasswordField, Label } from "@calcom/ui/v2";
+import { TextField, EmailField, PasswordField, Label } from "@calcom/ui/components/form";
 import WizardForm from "@calcom/ui/v2/core/WizardForm";
 
 const StepDone = () => {

apps/web/pages/auth/signin.tsx

@@ -1,7 +1,7 @@
 import { GetServerSidePropsContext } from "next";
 import { getProviders, signIn, getSession, getCsrfToken } from "next-auth/react";
 
-import { Button } from "@calcom/ui/v2";
+import { Button } from "@calcom/ui/components/button";
 
 type Provider = {
   name: string;

apps/web/pages/auth/verify.tsx

@@ -8,7 +8,7 @@ import z from "zod";
 
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { trpc } from "@calcom/trpc/react";
-import { Button } from "@calcom/ui/v2/";
+import { Button } from "@calcom/ui/components";
 import showToast from "@calcom/ui/v2/core/notifications";
 
 import Loader from "@components/Loader";