Migrates components and libs to packages (#2172)

* Migrates Dialog to ui package

* Migrates Alert to ui

* Migrate Button to ui

* UI and lib migrations

* Add missing imports

* Update Error.tsx

apps/web/components/DestinationCalendarSelector.tsx

@@ -1,11 +1,11 @@
 import React, { useEffect, useState } from "react";
 import Select from "react-select";
 
+import Button from "@calcom/ui/Button";
+
 import { useLocale } from "@lib/hooks/useLocale";
 import { trpc } from "@lib/trpc";
 
-import Button from "@components/ui/Button";
-
 interface Props {
   onChange: (value: { externalId: string; integration: string }) => void;
   isLoading?: boolean;

apps/web/components/ImageUploader.tsx

@@ -1,13 +1,14 @@
 import { FormEvent, useCallback, useEffect, useState } from "react";
 import Cropper from "react-easy-crop";
 
+import Button from "@calcom/ui/Button";
+import { DialogClose, DialogTrigger, Dialog, DialogContent } from "@calcom/ui/Dialog";
+
 import { Area, getCroppedImg } from "@lib/cropImage";
 import { useFileReader } from "@lib/hooks/useFileReader";
 import { useLocale } from "@lib/hooks/useLocale";
 
-import { DialogClose, DialogTrigger, Dialog, DialogContent } from "@components/Dialog";
 import Slider from "@components/Slider";
-import Button from "@components/ui/Button";
 
 type ImageUploaderProps = {
   id: string;

apps/web/components/Shell.tsx

@@ -17,6 +17,7 @@ import { useRouter } from "next/router";
 import React, { ReactNode, useEffect, useState } from "react";
 import { Toaster } from "react-hot-toast";
 
+import Button from "@calcom/ui/Button";
 import Dropdown, {
   DropdownMenuContent,
   DropdownMenuItem,
@@ -42,7 +43,6 @@ import { HeadSeo } from "@components/seo/head-seo";
 import pkg from "../package.json";
 import { useViewerI18n } from "./I18nLanguageHandler";
 import Logo from "./Logo";
-import Button from "./ui/Button";
 
 export function useMeQuery() {
   const meQuery = trpc.useQuery(["viewer.me"], {

apps/web/components/auth/SAMLLogin.tsx

@@ -2,12 +2,12 @@ import { signIn } from "next-auth/react";
 import { Dispatch, SetStateAction } from "react";
 import { useFormContext } from "react-hook-form";
 
+import Button from "@calcom/ui/Button";
+
 import { useLocale } from "@lib/hooks/useLocale";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@lib/telemetry";
 import { trpc } from "@lib/trpc";
 
-import Button from "@components/ui/Button";
-
 interface Props {
   email: string;
   samlTenantID: string;

apps/web/components/auth/TwoFactor.tsx

@@ -2,9 +2,9 @@ import React, { useEffect, useState } from "react";
 import useDigitInput from "react-digit-input";
 import { useFormContext } from "react-hook-form";
 
-import { useLocale } from "@lib/hooks/useLocale";
+import { Input } from "@calcom/ui/form/fields";
 
-import { Input } from "@components/form/fields";
+import { useLocale } from "@lib/hooks/useLocale";
 
 export default function TwoFactor() {
   const [value, onChange] = useState("");

apps/web/components/booking/BookingListItem.tsx

@@ -4,14 +4,15 @@ import dayjs from "dayjs";
 import { useState } from "react";
 import { useMutation } from "react-query";
 
+import Button from "@calcom/ui/Button";
+import { Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/Dialog";
+import { TextArea } from "@calcom/ui/form/fields";
+
 import { HttpError } from "@lib/core/http/error";
 import { useLocale } from "@lib/hooks/useLocale";
 import { inferQueryOutput, trpc } from "@lib/trpc";
 
-import { Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader } from "@components/Dialog";
 import { useMeQuery } from "@components/Shell";
-import { TextArea } from "@components/form/fields";
-import Button from "@components/ui/Button";
 import TableActions, { ActionType } from "@components/ui/TableActions";
 
 type BookingItem = inferQueryOutput<"viewer.bookings">["bookings"][number];

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

@@ -14,6 +14,8 @@ import { useMutation } from "react-query";
 import { v4 as uuidv4 } from "uuid";
 
 import { createPaymentLink } from "@calcom/stripe/client";
+import { Button } from "@calcom/ui/Button";
+import { EmailInput, Form } from "@calcom/ui/form/fields";
 
 import { asStringOrNull } from "@lib/asStringOrNull";
 import { timeZone } from "@lib/clock";
@@ -28,9 +30,7 @@ import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@lib/t
 import { detectBrowserTimeFormat } from "@lib/timeFormat";
 
 import CustomBranding from "@components/CustomBranding";
-import { EmailInput, Form } from "@components/form/fields";
 import AvatarGroup from "@components/ui/AvatarGroup";
-import { Button } from "@components/ui/Button";
 
 import { BookPageProps } from "../../../pages/[user]/book";
 import { TeamBookingPageProps } from "../../../pages/team/[slug]/book";

apps/web/components/dialog/ConfirmationDialogContent.tsx

@@ -3,10 +3,10 @@ import { CheckIcon } from "@heroicons/react/solid";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import React, { PropsWithChildren, ReactNode } from "react";
 
-import { useLocale } from "@lib/hooks/useLocale";
+import { Button } from "@calcom/ui/Button";
+import { DialogClose, DialogContent } from "@calcom/ui/Dialog";
 
-import { DialogClose, DialogContent } from "@components/Dialog";
-import { Button } from "@components/ui/Button";
+import { useLocale } from "@lib/hooks/useLocale";
 
 export type ConfirmationDialogContentProps = {
   confirmBtn?: ReactNode;

apps/web/components/eventtype/CreateEventType.tsx

@@ -2,11 +2,16 @@ import { ChevronDownIcon, PlusIcon } from "@heroicons/react/solid";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { SchedulingType } from "@prisma/client";
 import { useRouter } from "next/router";
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import type { z } from "zod";
 
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import showToast from "@calcom/lib/notification";
 import { createEventTypeInput } from "@calcom/prisma/zod/custom/eventtype";
+import { Alert } from "@calcom/ui/Alert";
+import { Button } from "@calcom/ui/Button";
+import { Dialog, DialogClose, DialogContent } from "@calcom/ui/Dialog";
 import Dropdown, {
   DropdownMenuContent,
   DropdownMenuItem,
@@ -14,18 +19,13 @@ import Dropdown, {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@calcom/ui/Dropdown";
+import { Form, InputLeading, TextAreaField, TextField } from "@calcom/ui/form/fields";
 
 import { HttpError } from "@lib/core/http/error";
-import { useLocale } from "@lib/hooks/useLocale";
-import showToast from "@lib/notification";
 import { slugify } from "@lib/slugify";
 import { trpc } from "@lib/trpc";
 
-import { Dialog, DialogClose, DialogContent } from "@components/Dialog";
-import { Form, InputLeading, TextAreaField, TextField } from "@components/form/fields";
-import { Alert } from "@components/ui/Alert";
 import Avatar from "@components/ui/Avatar";
-import { Button } from "@components/ui/Button";
 import * as RadioArea from "@components/ui/form/radio-area";
 
 // this describes the uniform data needed to create a new event type on Profile or Team

apps/web/components/integrations/CalendarListContainer.tsx

@@ -1,18 +1,18 @@
 import React, { Fragment } from "react";
 import { useMutation } from "react-query";
 
+import showToast from "@calcom/lib/notification";
+import { Alert } from "@calcom/ui/Alert";
+import Button from "@calcom/ui/Button";
 import Switch from "@calcom/ui/Switch";
 
 import { QueryCell } from "@lib/QueryCell";
 import { useLocale } from "@lib/hooks/useLocale";
-import showToast from "@lib/notification";
 import { trpc } from "@lib/trpc";
 
 import DestinationCalendarSelector from "@components/DestinationCalendarSelector";
 import { List } from "@components/List";
 import { ShellSubHeading } from "@components/Shell";
-import { Alert } from "@components/ui/Alert";
-import Button from "@components/ui/Button";
 
 import ConnectIntegration from "./ConnectIntegrations";
 import DisconnectIntegration from "./DisconnectIntegration";

apps/web/components/integrations/ConnectIntegrations.tsx

@@ -2,12 +2,12 @@ import type { IntegrationOAuthCallbackState } from "pages/api/integrations/types
 import { useState } from "react";
 import { useMutation } from "react-query";
 
+import { ButtonBaseProps } from "@calcom/ui/Button";
+
 import { NEXT_PUBLIC_BASE_URL } from "@lib/config/constants";
 import { AddAppleIntegrationModal } from "@lib/integrations/calendar/components/AddAppleIntegration";
 import { AddCalDavIntegrationModal } from "@lib/integrations/calendar/components/AddCalDavIntegration";
 
-import { ButtonBaseProps } from "@components/ui/Button";
-
 export default function ConnectIntegration(props: {
   type: string;
   render: (renderProps: ButtonBaseProps) => JSX.Element;

apps/web/components/integrations/DisconnectIntegration.tsx

@@ -1,9 +1,10 @@
 import { useState } from "react";
 import { useMutation } from "react-query";
 
-import { Dialog } from "@components/Dialog";
+import { ButtonBaseProps } from "@calcom/ui/Button";
+import { Dialog } from "@calcom/ui/Dialog";
+
 import ConfirmationDialogContent from "@components/dialog/ConfirmationDialogContent";
-import { ButtonBaseProps } from "@components/ui/Button";
 
 export default function DisconnectIntegration(props: {
   /** Integration credential id */

apps/web/components/pages/eventtypes/CustomInputTypeForm.tsx

@@ -3,9 +3,9 @@ import React, { FC } from "react";
 import { Controller, SubmitHandler, useForm, useWatch } from "react-hook-form";
 import Select from "react-select";
 
-import { useLocale } from "@lib/hooks/useLocale";
+import Button from "@calcom/ui/Button";
 
-import Button from "@components/ui/Button";
+import { useLocale } from "@lib/hooks/useLocale";
 
 interface OptionTypeBase {
   label: string;

apps/web/components/security/ChangePasswordSection.tsx

@@ -1,10 +1,10 @@
 import React, { SyntheticEvent, useState } from "react";
 
+import showToast from "@calcom/lib/notification";
+import Button from "@calcom/ui/Button";
+
 import { ErrorCode } from "@lib/auth";
 import { useLocale } from "@lib/hooks/useLocale";
-import showToast from "@lib/notification";
-
-import Button from "@components/ui/Button";
 
 const ChangePasswordSection = () => {
   const [oldPassword, setOldPassword] = useState("");

apps/web/components/security/DisableTwoFactorModal.tsx

@@ -1,11 +1,11 @@
 import { SyntheticEvent, useState } from "react";
 
+import Button from "@calcom/ui/Button";
+import { Dialog, DialogContent } from "@calcom/ui/Dialog";
+
 import { ErrorCode } from "@lib/auth";
 import { useLocale } from "@lib/hooks/useLocale";
 
-import { Dialog, DialogContent } from "@components/Dialog";
-import Button from "@components/ui/Button";
-
 import TwoFactorAuthAPI from "./TwoFactorAuthAPI";
 import TwoFactorModalHeader from "./TwoFactorModalHeader";
 

apps/web/components/security/EnableTwoFactorModal.tsx

@@ -1,11 +1,11 @@
 import React, { SyntheticEvent, useState } from "react";
 
+import Button from "@calcom/ui/Button";
+import { Dialog, DialogContent } from "@calcom/ui/Dialog";
+
 import { ErrorCode } from "@lib/auth";
 import { useLocale } from "@lib/hooks/useLocale";
 
-import { Dialog, DialogContent } from "@components/Dialog";
-import Button from "@components/ui/Button";
-
 import TwoFactorAuthAPI from "./TwoFactorAuthAPI";
 import TwoFactorModalHeader from "./TwoFactorModalHeader";
 

apps/web/components/security/TwoFactorAuthSection.tsx

@@ -1,9 +1,10 @@
 import { useState } from "react";
 
+import Button from "@calcom/ui/Button";
+
 import { useLocale } from "@lib/hooks/useLocale";
 
 import Badge from "@components/ui/Badge";
-import Button from "@components/ui/Button";
 
 import DisableTwoFactorModal from "./DisableTwoFactorModal";
 import EnableTwoFactorModal from "./EnableTwoFactorModal";

apps/web/components/team/MemberChangeRoleModal.tsx

@@ -2,10 +2,11 @@ import { MembershipRole } from "@prisma/client";
 import { useState } from "react";
 import React, { SyntheticEvent } from "react";
 
+import Button from "@calcom/ui/Button";
+
 import { useLocale } from "@lib/hooks/useLocale";
 import { trpc } from "@lib/trpc";
 
-import Button from "@components/ui/Button";
 import ModalContainer from "@components/ui/ModalContainer";
 
 export default function MemberChangeRoleModal(props: {

apps/web/components/team/MemberInvitationModal.tsx

@@ -4,13 +4,13 @@ import { MembershipRole } from "@prisma/client";
 import { useState } from "react";
 import React, { SyntheticEvent } from "react";
 
+import Button from "@calcom/ui/Button";
+import { TextField } from "@calcom/ui/form/fields";
+
 import { useLocale } from "@lib/hooks/useLocale";
 import { TeamWithMembers } from "@lib/queries/teams";
 import { trpc } from "@lib/trpc";
 
-import { TextField } from "@components/form/fields";
-import Button from "@components/ui/Button";
-
 export default function MemberInvitationModal(props: { team: TeamWithMembers | null; onExit: () => void }) {
   const [errorMessage, setErrorMessage] = useState("");
   const { t, i18n } = useLocale();

apps/web/components/team/MemberListItem.tsx

@@ -3,6 +3,10 @@ import { ClockIcon, ExternalLinkIcon, DotsHorizontalIcon } from "@heroicons/reac
 import Link from "next/link";
 import React, { useState } from "react";
 
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import showToast from "@calcom/lib/notification";
+import Button from "@calcom/ui/Button";
+import { Dialog, DialogTrigger } from "@calcom/ui/Dialog";
 import Dropdown, {
   DropdownMenuContent,
   DropdownMenuItem,
@@ -12,15 +16,11 @@ import Dropdown, {
 import TeamAvailabilityModal from "@ee/components/team/availability/TeamAvailabilityModal";
 
 import { getPlaceholderAvatar } from "@lib/getPlaceholderAvatar";
-import { useLocale } from "@lib/hooks/useLocale";
-import showToast from "@lib/notification";
 import { trpc, inferQueryOutput } from "@lib/trpc";
 
-import { Dialog, DialogTrigger } from "@components/Dialog";
 import { Tooltip } from "@components/Tooltip";
 import ConfirmationDialogContent from "@components/dialog/ConfirmationDialogContent";
 import Avatar from "@components/ui/Avatar";
-import Button from "@components/ui/Button";
 import ModalContainer from "@components/ui/ModalContainer";
 
 import MemberChangeRoleModal from "./MemberChangeRoleModal";

apps/web/components/team/TeamCreateModal.tsx

@@ -1,11 +1,11 @@
 import { UsersIcon } from "@heroicons/react/outline";
 import { useRef, useState } from "react";
 
+import { Alert } from "@calcom/ui/Alert";
+
 import { useLocale } from "@lib/hooks/useLocale";
 import { trpc } from "@lib/trpc";
 
-import { Alert } from "@components/ui/Alert";
-
 interface Props {
   onClose: () => void;
 }

apps/web/components/team/TeamList.tsx

@@ -1,4 +1,5 @@
-import showToast from "@lib/notification";
+import showToast from "@calcom/lib/notification";
+
 import { trpc, inferQueryOutput } from "@lib/trpc";
 
 import TeamListItem from "./TeamListItem";

apps/web/components/team/TeamListItem.tsx

@@ -2,6 +2,10 @@ import { ExternalLinkIcon, TrashIcon, LogoutIcon, PencilIcon } from "@heroicons/
 import { LinkIcon, DotsHorizontalIcon } from "@heroicons/react/solid";
 import Link from "next/link";
 
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import showToast from "@calcom/lib/notification";
+import Button from "@calcom/ui/Button";
+import { Dialog, DialogTrigger } from "@calcom/ui/Dialog";
 import Dropdown, {
   DropdownMenuContent,
   DropdownMenuItem,
@@ -11,15 +15,11 @@ import Dropdown, {
 
 import classNames from "@lib/classNames";
 import { getPlaceholderAvatar } from "@lib/getPlaceholderAvatar";
-import { useLocale } from "@lib/hooks/useLocale";
-import showToast from "@lib/notification";
 import { trpc, inferQueryOutput } from "@lib/trpc";
 
-import { Dialog, DialogTrigger } from "@components/Dialog";
 import { Tooltip } from "@components/Tooltip";
 import ConfirmationDialogContent from "@components/dialog/ConfirmationDialogContent";
 import Avatar from "@components/ui/Avatar";
-import Button from "@components/ui/Button";
 
 import { TeamRole } from "./TeamPill";
 import { MembershipRole } from ".prisma/client";

apps/web/components/team/TeamSettings.tsx

@@ -1,15 +1,16 @@
 import { HashtagIcon, InformationCircleIcon, LinkIcon, PhotographIcon } from "@heroicons/react/solid";
 import React, { useRef, useState } from "react";
 
+import showToast from "@calcom/lib/notification";
+import { Alert } from "@calcom/ui/Alert";
+import Button from "@calcom/ui/Button";
+import { TextField } from "@calcom/ui/form/fields";
+
 import { useLocale } from "@lib/hooks/useLocale";
-import showToast from "@lib/notification";
 import { TeamWithMembers } from "@lib/queries/teams";
 import { trpc } from "@lib/trpc";
 
 import ImageUploader from "@components/ImageUploader";
-import { TextField } from "@components/form/fields";
-import { Alert } from "@components/ui/Alert";
-import Button from "@components/ui/Button";
 import SettingInputContainer from "@components/ui/SettingInputContainer";
 
 interface Props {

apps/web/components/team/TeamSettingsRightSidebar.tsx

@@ -3,12 +3,13 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import React from "react";
 
+import showToast from "@calcom/lib/notification";
+import { Dialog, DialogTrigger } from "@calcom/ui/Dialog";
+
 import { useLocale } from "@lib/hooks/useLocale";
-import showToast from "@lib/notification";
 import { TeamWithMembers } from "@lib/queries/teams";
 import { trpc } from "@lib/trpc";
 
-import { Dialog, DialogTrigger } from "@components/Dialog";
 import ConfirmationDialogContent from "@components/dialog/ConfirmationDialogContent";
 import CreateEventTypeButton from "@components/eventtype/CreateEventType";
 import LinkIconButton from "@components/ui/LinkIconButton";

apps/web/components/team/UpgradeToFlexibleProModal.tsx

@@ -1,9 +1,8 @@
 import { useState } from "react";
 
-import { useLocale } from "@lib/hooks/useLocale";
-import showToast from "@lib/notification";
-import { trpc } from "@lib/trpc";
-
+import showToast from "@calcom/lib/notification";
+import { Alert } from "@calcom/ui/Alert";
+import Button from "@calcom/ui/Button";
 import {
   Dialog,
   DialogTrigger,
@@ -11,9 +10,10 @@ import {
   DialogClose,
   DialogFooter,
   DialogHeader,
-} from "@components/Dialog";
-import { Alert } from "@components/ui/Alert";
-import Button from "@components/ui/Button";
+} from "@calcom/ui/Dialog";
+
+import { useLocale } from "@lib/hooks/useLocale";
+import { trpc } from "@lib/trpc";
 
 interface Props {
   teamId: number;

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

@@ -5,11 +5,12 @@ import Link from "next/link";
 import { TeamPageProps } from "pages/team/[slug]";
 import React from "react";
 
+import Button from "@calcom/ui/Button";
+
 import { getPlaceholderAvatar } from "@lib/getPlaceholderAvatar";
 import { useLocale } from "@lib/hooks/useLocale";
 
 import Avatar from "@components/ui/Avatar";
-import Button from "@components/ui/Button";
 import Text from "@components/ui/Text";
 
 type TeamType = TeamPageProps["team"];

apps/web/components/ui/Button.tsx

@@ -1,3 +0,0 @@
-// TODO: Remove this file once every Button is imported from `@calcom/ui`
-export * from "@calcom/ui/Button";
-export { default } from "@calcom/ui/Button";

apps/web/components/ui/Scheduler.tsx

@@ -6,9 +6,9 @@ import utc from "dayjs/plugin/utc";
 import React, { useEffect, useState } from "react";
 import TimezoneSelect, { ITimezoneOption } from "react-timezone-select";
 
-import { useLocale } from "@lib/hooks/useLocale";
+import Button from "@calcom/ui/Button";
 
-import Button from "@components/ui/Button";
+import { useLocale } from "@lib/hooks/useLocale";
 
 import { WeekdaySelect } from "./WeekdaySelect";
 import SetTimesModal from "./modal/SetTimesModal";

apps/web/components/ui/TableActions.tsx

@@ -1,13 +1,12 @@
 import { DotsHorizontalIcon } from "@heroicons/react/solid";
 import React, { FC } from "react";
 
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import Button from "@calcom/ui/Button";
 import Dropdown, { DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from "@calcom/ui/Dropdown";
 
-import { useLocale } from "@lib/hooks/useLocale";
 import { SVGComponent } from "@lib/types/SVGComponent";
 
-import Button from "./Button";
-
 export type ActionType = {
   id: string;
   icon: SVGComponent;

apps/web/components/ui/alerts/Error.tsx

@@ -1,4 +1,4 @@
-import { Alert } from "../Alert";
+import { Alert } from "@calcom/ui/Alert";
 
 /**
  * @deprecated use `<Alert severity="error" message="x" />` instead

apps/web/components/ui/form/Schedule.tsx

@@ -5,13 +5,14 @@ import utc from "dayjs/plugin/utc";
 import React, { useCallback, useState } from "react";
 import { Controller, useFieldArray } from "react-hook-form";
 
+import Button from "@calcom/ui/Button";
+
 import { defaultDayRange } from "@lib/availability";
 import { weekdayNames } from "@lib/core/i18n/weekday";
 import { useLocale } from "@lib/hooks/useLocale";
 import { TimeRange } from "@lib/types/schedule";
 
 import { useMeQuery } from "@components/Shell";
-import Button from "@components/ui/Button";
 import Select from "@components/ui/form/Select";
 
 dayjs.extend(utc);

apps/web/components/ui/modal/SetTimesModal.tsx

@@ -3,10 +3,10 @@ import dayjs from "dayjs";
 import customParseFormat from "dayjs/plugin/customParseFormat";
 import { useRef, useState } from "react";
 
-import { useLocale } from "@lib/hooks/useLocale";
-import showToast from "@lib/notification";
+import showToast from "@calcom/lib/notification";
+import Button from "@calcom/ui/Button";
 
-import Button from "@components/ui/Button";
+import { useLocale } from "@lib/hooks/useLocale";
 
 dayjs.extend(customParseFormat);
 

apps/web/components/webhook/WebhookDialogForm.tsx

@@ -1,17 +1,17 @@
 import { useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 
+import showToast from "@calcom/lib/notification";
+import Button from "@calcom/ui/Button";
+import { DialogFooter } from "@calcom/ui/Dialog";
 import Switch from "@calcom/ui/Switch";
+import { FieldsetLegend, Form, InputGroupBox, TextArea, TextField } from "@calcom/ui/form/fields";
 
 import { useLocale } from "@lib/hooks/useLocale";
-import showToast from "@lib/notification";
 import { trpc } from "@lib/trpc";
 import { WEBHOOK_TRIGGER_EVENTS } from "@lib/webhooks/constants";
 import customTemplate, { hasTemplateIntegration } from "@lib/webhooks/integrationTemplate";
 
-import { DialogFooter } from "@components/Dialog";
-import { FieldsetLegend, Form, InputGroupBox, TextArea, TextField } from "@components/form/fields";
-import Button from "@components/ui/Button";
 import { TWebhook } from "@components/webhook/WebhookListItem";
 import WebhookTestDisclosure from "@components/webhook/WebhookTestDisclosure";
 

apps/web/components/webhook/WebhookListContainer.tsx

@@ -2,14 +2,15 @@ import classNames from "classnames";
 import Image from "next/image";
 import { useState } from "react";
 
+import Button from "@calcom/ui/Button";
+import { Dialog, DialogContent } from "@calcom/ui/Dialog";
+
 import { QueryCell } from "@lib/QueryCell";
 import { useLocale } from "@lib/hooks/useLocale";
 import { trpc } from "@lib/trpc";
 
-import { Dialog, DialogContent } from "@components/Dialog";
 import { List, ListItem, ListItemText, ListItemTitle } from "@components/List";
 import { ShellSubHeading } from "@components/Shell";
-import Button from "@components/ui/Button";
 import WebhookDialogForm from "@components/webhook/WebhookDialogForm";
 import WebhookListItem, { TWebhook } from "@components/webhook/WebhookListItem";
 

apps/web/components/webhook/WebhookListItem.tsx

@@ -1,15 +1,15 @@
 import { PencilAltIcon, TrashIcon } from "@heroicons/react/outline";
 
 import classNames from "@calcom/lib/classNames";
+import Button from "@calcom/ui/Button";
+import { Dialog, DialogTrigger } from "@calcom/ui/Dialog";
 
 import { useLocale } from "@lib/hooks/useLocale";
 import { inferQueryOutput, trpc } from "@lib/trpc";
 
-import { Dialog, DialogTrigger } from "@components/Dialog";
 import { ListItem } from "@components/List";
 import { Tooltip } from "@components/Tooltip";
 import ConfirmationDialogContent from "@components/dialog/ConfirmationDialogContent";
-import Button from "@components/ui/Button";
 
 export type TWebhook = inferQueryOutput<"viewer.webhook.list">[number];
 

apps/web/components/webhook/WebhookTestDisclosure.tsx

@@ -4,14 +4,13 @@ import { useState } from "react";
 import { useWatch } from "react-hook-form";
 
 import classNames from "@calcom/lib/classNames";
+import showToast from "@calcom/lib/notification";
+import Button from "@calcom/ui/Button";
+import { InputGroupBox } from "@calcom/ui/form/fields";
 
 import { useLocale } from "@lib/hooks/useLocale";
-import showToast from "@lib/notification";
 import { trpc } from "@lib/trpc";
 
-import { InputGroupBox } from "@components/form/fields";
-import Button from "@components/ui/Button";
-
 export default function WebhookTestDisclosure() {
   const subscriberUrl: string = useWatch({ name: "subscriberUrl" });
   const payloadTemplate = useWatch({ name: "payloadTemplate" }) || null;

apps/web/ee/components/LicenseBanner.tsx

@@ -2,9 +2,10 @@ import { XIcon } from "@heroicons/react/outline";
 import { BadgeCheckIcon } from "@heroicons/react/solid";
 import { Trans } from "react-i18next";
 
+import { Dialog, DialogTrigger } from "@calcom/ui/Dialog";
+
 import { useLocale } from "@lib/hooks/useLocale";
 
-import { Dialog, DialogTrigger } from "@components/Dialog";
 import ConfirmationDialogContent from "@components/dialog/ConfirmationDialogContent";
 
 export default function LicenseBanner() {

apps/web/ee/components/TrialBanner.tsx

@@ -1,10 +1,11 @@
 import dayjs from "dayjs";
 
+import Button from "@calcom/ui/Button";
+
 import { TRIAL_LIMIT_DAYS } from "@lib/config/constants";
 import { useLocale } from "@lib/hooks/useLocale";
 
 import { useMeQuery } from "@components/Shell";
-import Button from "@components/ui/Button";
 
 const TrialBanner = () => {
   const { t } = useLocale();

apps/web/ee/components/saml/Configuration.tsx

@@ -1,16 +1,17 @@
 import React, { useEffect, useState, useRef } from "react";
 
+import showToast from "@calcom/lib/notification";
+import { Alert } from "@calcom/ui/Alert";
+import Button from "@calcom/ui/Button";
+import { Dialog, DialogTrigger } from "@calcom/ui/Dialog";
+import { TextArea } from "@calcom/ui/form/fields";
+
 import { useLocale } from "@lib/hooks/useLocale";
-import showToast from "@lib/notification";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@lib/telemetry";
 import { trpc } from "@lib/trpc";
 
-import { Dialog, DialogTrigger } from "@components/Dialog";
 import ConfirmationDialogContent from "@components/dialog/ConfirmationDialogContent";
-import { TextArea } from "@components/form/fields";
-import { Alert } from "@components/ui/Alert";
 import Badge from "@components/ui/Badge";
-import Button from "@components/ui/Button";
 
 export default function SAMLConfiguration({
   teamsView,

apps/web/ee/components/stripe/Payment.tsx

@@ -5,11 +5,10 @@ import { stringify } from "querystring";
 import React, { SyntheticEvent, useEffect, useState } from "react";
 
 import { PaymentData } from "@calcom/stripe/server";
+import Button from "@calcom/ui/Button";
 
 import { useLocale } from "@lib/hooks/useLocale";
 
-import Button from "@components/ui/Button";
-
 const CARD_OPTIONS: stripejs.StripeCardElementOptions = {
   iconStyle: "solid" as const,
   classes: {

apps/web/ee/components/web3/CryptoSection.tsx

@@ -4,10 +4,10 @@ import React from "react";
 import Web3 from "web3";
 import { AbiItem } from "web3-utils";
 
-import { useLocale } from "@lib/hooks/useLocale";
-import showToast from "@lib/notification";
+import showToast from "@calcom/lib/notification";
+import { Button } from "@calcom/ui/Button";
 
-import { Button } from "@components/ui/Button";
+import { useLocale } from "@lib/hooks/useLocale";
 
 import { useContracts } from "../../../contexts/contractsContext";
 import genericAbi from "../../../web3/abis/abiWithGetBalance.json";

apps/web/ee/lib/stripe/server.ts

@@ -2,12 +2,12 @@ import { PaymentType, Prisma } from "@prisma/client";
 import Stripe from "stripe";
 import { v4 as uuidv4 } from "uuid";
 
+import { getErrorFromUnknown } from "@calcom/lib/errors";
 import prisma from "@calcom/prisma";
 import { createPaymentLink } from "@calcom/stripe/client";
 import stripe, { PaymentData } from "@calcom/stripe/server";
 
 import { sendAwaitingPaymentEmail, sendOrganizerPaymentRefundFailedEmail } from "@lib/emails/email-manager";
-import { getErrorFromUnknown } from "@lib/errors";
 import { CalendarEvent } from "@lib/integrations/calendar/interfaces/Calendar";
 
 export type PaymentInfo = {

apps/web/ee/pages/api/integrations/stripepayment/webhook.ts

@@ -2,11 +2,11 @@ import { buffer } from "micro";
 import type { NextApiRequest, NextApiResponse } from "next";
 import Stripe from "stripe";
 
+import { getErrorFromUnknown } from "@calcom/lib/errors";
 import stripe from "@calcom/stripe/server";
 
 import { IS_PRODUCTION } from "@lib/config/constants";
 import { HttpError as HttpCode } from "@lib/core/http/error";
-import { getErrorFromUnknown } from "@lib/errors";
 import EventManager from "@lib/events/EventManager";
 import { CalendarEvent } from "@lib/integrations/calendar/interfaces/Calendar";
 import prisma from "@lib/prisma";

apps/web/ee/pages/settings/teams/[id]/availability.tsx

@@ -1,6 +1,7 @@
 import { useRouter } from "next/router";
 import { useMemo, useState } from "react";
 
+import { Alert } from "@calcom/ui/Alert";
 import TeamAvailabilityScreen from "@ee/components/team/availability/TeamAvailabilityScreen";
 
 import { getPlaceholderAvatar } from "@lib/getPlaceholderAvatar";
@@ -8,7 +9,6 @@ import { trpc } from "@lib/trpc";
 
 import Loader from "@components/Loader";
 import Shell, { useMeQuery } from "@components/Shell";
-import { Alert } from "@components/ui/Alert";
 import Avatar from "@components/ui/Avatar";
 
 export function TeamAvailabilityPage() {

apps/web/lib/QueryCell.tsx

@@ -7,8 +7,9 @@ import {
   UseQueryResult,
 } from "react-query";
 
+import { Alert } from "@calcom/ui/Alert";
+
 import Loader from "@components/Loader";
-import { Alert } from "@components/ui/Alert";
 
 type ErrorLike = {
   message: string;

apps/web/lib/emails/templates/attendee-scheduled-email.ts

@@ -6,8 +6,9 @@ import utc from "dayjs/plugin/utc";
 import { createEvent, DateArray } from "ics";
 import nodemailer from "nodemailer";
 
+import { getErrorFromUnknown } from "@calcom/lib/errors";
+
 import { getCancelLink, getRichDescription } from "@lib/CalEventParser";
-import { getErrorFromUnknown } from "@lib/errors";
 import { getIntegrationName } from "@lib/integrations";
 import { CalendarEvent, Person } from "@lib/integrations/calendar/interfaces/Calendar";
 import { serverConfig } from "@lib/serverConfig";

apps/web/lib/emails/templates/forgot-password-email.ts

@@ -1,7 +1,8 @@
 import { TFunction } from "next-i18next";
 import nodemailer from "nodemailer";
 
-import { getErrorFromUnknown } from "@lib/errors";
+import { getErrorFromUnknown } from "@calcom/lib/errors";
+
 import { serverConfig } from "@lib/serverConfig";
 
 import { emailHead, linkIcon, emailBodyLogo } from "./common";

apps/web/lib/emails/templates/organizer-scheduled-email.ts

@@ -6,8 +6,9 @@ import utc from "dayjs/plugin/utc";
 import { createEvent, DateArray, Person } from "ics";
 import nodemailer from "nodemailer";
 
+import { getErrorFromUnknown } from "@calcom/lib/errors";
+
 import { getCancelLink, getRichDescription } from "@lib/CalEventParser";
-import { getErrorFromUnknown } from "@lib/errors";
 import { getIntegrationName } from "@lib/integrations";
 import { CalendarEvent } from "@lib/integrations/calendar/interfaces/Calendar";
 import { serverConfig } from "@lib/serverConfig";

apps/web/lib/emails/templates/team-invite-email.ts

@@ -1,7 +1,8 @@
 import { TFunction } from "next-i18next";
 import nodemailer from "nodemailer";
 
-import { getErrorFromUnknown } from "@lib/errors";
+import { getErrorFromUnknown } from "@calcom/lib/errors";
+
 import { serverConfig } from "@lib/serverConfig";
 
 import { emailHead, linkIcon, emailBodyLogo } from "./common";

apps/web/lib/hooks/useLocale.ts

@@ -1,5 +1,6 @@
 import { useTranslation } from "next-i18next";
 
+/** @deprecated use the one from `@calcom/lib/hooks/useLocale` */
 export const useLocale = () => {
   const { i18n, t } = useTranslation("common");
 

apps/web/lib/integrations/Daily/DailyVideoApiAdapter.ts

@@ -1,7 +1,8 @@
 import { Credential } from "@prisma/client";
 
+import { handleErrorsJson } from "@calcom/lib/errors";
+
 import { BASE_URL } from "@lib/config/constants";
-import { handleErrorsJson } from "@lib/errors";
 import { PartialReference } from "@lib/events/EventManager";
 import prisma from "@lib/prisma";
 import { VideoApiAdapter, VideoCallData } from "@lib/videoClient";

apps/web/lib/integrations/Huddle01/Huddle01VideoApiAdapter.ts

@@ -1,6 +1,7 @@
 import { Credential } from "@prisma/client";
 
-import { handleErrorsJson } from "@lib/errors";
+import { handleErrorsJson } from "@calcom/lib/errors";
+
 import { PartialReference } from "@lib/events/EventManager";
 import { randomString } from "@lib/random";
 import { VideoApiAdapter, VideoCallData } from "@lib/videoClient";

apps/web/lib/integrations/Tandem/TandemVideoApiAdapter.ts

@@ -1,6 +1,7 @@
 import { Credential } from "@prisma/client";
 
-import { handleErrorsJson, handleErrorsRaw } from "@lib/errors";
+import { handleErrorsJson, handleErrorsRaw } from "@calcom/lib/errors";
+
 import { PartialReference } from "@lib/events/EventManager";
 import prisma from "@lib/prisma";
 import { VideoApiAdapter, VideoCallData } from "@lib/videoClient";

apps/web/lib/integrations/Zoom/ZoomVideoApiAdapter.ts

@@ -1,6 +1,7 @@
 import { Credential } from "@prisma/client";
 
-import { handleErrorsJson, handleErrorsRaw } from "@lib/errors";
+import { handleErrorsJson, handleErrorsRaw } from "@calcom/lib/errors";
+
 import { PartialReference } from "@lib/events/EventManager";
 import prisma from "@lib/prisma";
 import { VideoApiAdapter, VideoCallData } from "@lib/videoClient";

apps/web/lib/integrations/calendar/CalendarManager.ts

@@ -1,8 +1,9 @@
 import { Credential, SelectedCalendar } from "@prisma/client";
 import _ from "lodash";
 
+import { getErrorFromUnknown } from "@calcom/lib/errors";
+
 import { getUid } from "@lib/CalEventParser";
-import { getErrorFromUnknown } from "@lib/errors";
 import { EventResult } from "@lib/events/EventManager";
 import logger from "@lib/logger";
 import notEmpty from "@lib/notEmpty";

apps/web/lib/integrations/calendar/components/AddAppleIntegration.tsx

@@ -1,6 +1,8 @@
 import React, { useState } from "react";
 import { useForm } from "react-hook-form";
 
+import { Alert } from "@calcom/ui/Alert";
+import Button from "@calcom/ui/Button";
 import {
   Dialog,
   DialogClose,
@@ -8,10 +10,8 @@ import {
   DialogFooter,
   DialogHeader,
   DialogProps,
-} from "@components/Dialog";
-import { Form, TextField } from "@components/form/fields";
-import { Alert } from "@components/ui/Alert";
-import Button from "@components/ui/Button";
+} from "@calcom/ui/Dialog";
+import { Form, TextField } from "@calcom/ui/form/fields";
 
 export const ADD_APPLE_INTEGRATION_FORM_TITLE = "addAppleIntegration";
 

apps/web/lib/integrations/calendar/components/AddCalDavIntegration.tsx

@@ -1,6 +1,8 @@
 import React, { useState } from "react";
 import { useForm } from "react-hook-form";
 
+import { Alert } from "@calcom/ui/Alert";
+import Button from "@calcom/ui/Button";
 import {
   DialogHeader,
   DialogProps,
@@ -8,10 +10,8 @@ import {
   DialogContent,
   DialogClose,
   DialogFooter,
-} from "@components/Dialog";
-import { Form, TextField } from "@components/form/fields";
-import { Alert } from "@components/ui/Alert";
-import Button from "@components/ui/Button";
+} from "@calcom/ui/Dialog";
+import { Form, TextField } from "@calcom/ui/form/fields";
 
 type Props = {
   onSubmit: () => void;

apps/web/lib/integrations/calendar/services/Office365CalendarService.ts

@@ -1,8 +1,9 @@
 import { Calendar as OfficeCalendar } from "@microsoft/microsoft-graph-types-beta";
 import { Credential } from "@prisma/client";
 
+import { handleErrorsJson, handleErrorsRaw } from "@calcom/lib/errors";
+
 import { getLocation, getRichDescription } from "@lib/CalEventParser";
-import { handleErrorsJson, handleErrorsRaw } from "@lib/errors";
 import { CALENDAR_INTEGRATIONS_TYPES } from "@lib/integrations/calendar/constants/generals";
 import logger from "@lib/logger";
 import prisma from "@lib/prisma";

apps/web/pages/500.tsx

@@ -1,6 +1,6 @@
 import Head from "next/head";
 
-import Button from "@components/ui/Button";
+import Button from "@calcom/ui/Button";
 
 export default function Error500() {
   return (

apps/web/pages/[user].tsx

@@ -85,7 +85,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps>) {
                       onClick={async (e) => {
                         // If a token is required for this event type, add a click listener that checks whether the user verified their wallet or not
                         if (type.metadata.smartContractAddress && !evtsToVerify[type.id]) {
-                          const showToast = (await import("@lib/notification")).default;
+                          const showToast = (await import("@calcom/lib/notification")).default;
                           e.preventDefault();
                           showToast(
                             "You must verify a wallet with a token belonging to the specified smart contract first",

apps/web/pages/_error.tsx

@@ -6,8 +6,9 @@ import { NextPage, NextPageContext } from "next";
 import NextError, { ErrorProps } from "next/error";
 import React from "react";
 
+import { getErrorFromUnknown } from "@calcom/lib/errors";
+
 import { HttpError } from "@lib/core/http/error";
-import { getErrorFromUnknown } from "@lib/errors";
 import logger from "@lib/logger";
 
 import { ErrorPage } from "@components/error/error-page";

apps/web/pages/api/book/event.ts

@@ -9,6 +9,7 @@ import type { NextApiRequest, NextApiResponse } from "next";
 import short from "short-uuid";
 import { v5 as uuidv5 } from "uuid";
 
+import { getErrorFromUnknown } from "@calcom/lib/errors";
 import { handlePayment } from "@ee/lib/stripe/server";
 
 import {
@@ -18,7 +19,6 @@ import {
   sendAttendeeRequestEmail,
 } from "@lib/emails/email-manager";
 import { ensureArray } from "@lib/ensureArray";
-import { getErrorFromUnknown } from "@lib/errors";
 import { getEventName } from "@lib/event";
 import EventManager, { EventResult, PartialReference } from "@lib/events/EventManager";
 import { getBusyCalendarTimes } from "@lib/integrations/calendar/CalendarManager";

apps/web/pages/auth/error.tsx

@@ -3,10 +3,11 @@ import { GetServerSidePropsContext } from "next";
 import Link from "next/link";
 import { useRouter } from "next/router";
 
+import Button from "@calcom/ui/Button";
+
 import { useLocale } from "@lib/hooks/useLocale";
 
 import AuthContainer from "@components/ui/AuthContainer";
-import Button from "@components/ui/Button";
 
 import { ssrInit } from "@server/lib/ssr";
 

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

@@ -4,12 +4,13 @@ import { getCsrfToken } from "next-auth/react";
 import Link from "next/link";
 import React, { SyntheticEvent } from "react";
 
+import Button from "@calcom/ui/Button";
+import { EmailField } from "@calcom/ui/form/fields";
+
 import { getSession } from "@lib/auth";
 import { useLocale } from "@lib/hooks/useLocale";
 
-import { EmailField } from "@components/form/fields";
 import AuthContainer from "@components/ui/AuthContainer";
-import Button from "@components/ui/Button";
 
 export default function ForgotPassword({ csrfToken }: { csrfToken: string }) {
   const { t, i18n } = useLocale();

apps/web/pages/auth/login.tsx

@@ -7,6 +7,10 @@ import { useRouter } from "next/router";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
 
+import { Alert } from "@calcom/ui/Alert";
+import Button from "@calcom/ui/Button";
+import { EmailField, PasswordField, Form } from "@calcom/ui/form/fields";
+
 import { ErrorCode, getSession } from "@lib/auth";
 import { WEBSITE_URL } from "@lib/config/constants";
 import { useLocale } from "@lib/hooks/useLocale";
@@ -17,10 +21,7 @@ import { inferSSRProps } from "@lib/types/inferSSRProps";
 import AddToHomescreen from "@components/AddToHomescreen";
 import SAMLLogin from "@components/auth/SAMLLogin";
 import TwoFactor from "@components/auth/TwoFactor";
-import { EmailField, PasswordField, Form } from "@components/form/fields";
-import { Alert } from "@components/ui/Alert";
 import AuthContainer from "@components/ui/AuthContainer";
-import Button from "@components/ui/Button";
 
 import { IS_GOOGLE_LOGIN_ENABLED } from "@server/lib/constants";
 import { ssrInit } from "@server/lib/ssr";

apps/web/pages/auth/logout.tsx

@@ -4,11 +4,12 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 
+import Button from "@calcom/ui/Button";
+
 import { useLocale } from "@lib/hooks/useLocale";
 import { inferSSRProps } from "@lib/types/inferSSRProps";
 
 import AuthContainer from "@components/ui/AuthContainer";
-import Button from "@components/ui/Button";
 
 import { ssrInit } from "@server/lib/ssr";
 

apps/web/pages/auth/signup.tsx

@@ -3,6 +3,10 @@ import { signIn } from "next-auth/react";
 import { useRouter } from "next/router";
 import { FormProvider, SubmitHandler, useForm } from "react-hook-form";
 
+import { Alert } from "@calcom/ui/Alert";
+import Button from "@calcom/ui/Button";
+import { EmailField, PasswordField, TextField } from "@calcom/ui/form/fields";
+
 import { asStringOrNull } from "@lib/asStringOrNull";
 import { NEXT_PUBLIC_BASE_URL } from "@lib/config/constants";
 import { useLocale } from "@lib/hooks/useLocale";
@@ -10,10 +14,7 @@ import prisma from "@lib/prisma";
 import { isSAMLLoginEnabled } from "@lib/saml";
 import { inferSSRProps } from "@lib/types/inferSSRProps";
 
-import { EmailField, PasswordField, TextField } from "@components/form/fields";
 import { HeadSeo } from "@components/seo/head-seo";
-import { Alert } from "@components/ui/Alert";
-import Button from "@components/ui/Button";
 
 import { IS_GOOGLE_LOGIN_ENABLED } from "@server/lib/constants";
 import { ssrInit } from "@server/lib/ssr";

apps/web/pages/availability/index.tsx

@@ -5,17 +5,18 @@ import utc from "dayjs/plugin/utc";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
+import showToast from "@calcom/lib/notification";
+import { Alert } from "@calcom/ui/Alert";
+import Button from "@calcom/ui/Button";
+import { Form } from "@calcom/ui/form/fields";
+
 import { QueryCell } from "@lib/QueryCell";
 import { DEFAULT_SCHEDULE } from "@lib/availability";
 import { useLocale } from "@lib/hooks/useLocale";
-import showToast from "@lib/notification";
 import { inferQueryOutput, trpc } from "@lib/trpc";
 import { Schedule as ScheduleType } from "@lib/types/schedule";
 
 import Shell from "@components/Shell";
-import { Form } from "@components/form/fields";
-import { Alert } from "@components/ui/Alert";
-import Button from "@components/ui/Button";
 import Schedule from "@components/ui/form/Schedule";
 
 dayjs.extend(utc);

apps/web/pages/bookings/[status].tsx

@@ -2,6 +2,9 @@ import { CalendarIcon } from "@heroicons/react/outline";
 import { useRouter } from "next/router";
 import { Fragment } from "react";
 
+import { Alert } from "@calcom/ui/Alert";
+import Button from "@calcom/ui/Button";
+
 import { useInViewObserver } from "@lib/hooks/useInViewObserver";
 import { useLocale } from "@lib/hooks/useLocale";
 import { inferQueryInput, trpc } from "@lib/trpc";
@@ -11,8 +14,6 @@ import EmptyScreen from "@components/EmptyScreen";
 import Loader from "@components/Loader";
 import Shell from "@components/Shell";
 import BookingListItem from "@components/booking/BookingListItem";
-import { Alert } from "@components/ui/Alert";
-import Button from "@components/ui/Button";
 
 type BookingListingStatus = inferQueryInput<"viewer.bookings">["status"];
 

apps/web/pages/cancel/[uid].tsx

@@ -4,6 +4,9 @@ import { GetServerSidePropsContext } from "next";
 import { useRouter } from "next/router";
 import { useState } from "react";
 
+import { Button } from "@calcom/ui/Button";
+import { TextField } from "@calcom/ui/form/fields";
+
 import { asStringOrUndefined } from "@lib/asStringOrNull";
 import { getSession } from "@lib/auth";
 import { useLocale } from "@lib/hooks/useLocale";
@@ -13,9 +16,7 @@ import { detectBrowserTimeFormat } from "@lib/timeFormat";
 import { inferSSRProps } from "@lib/types/inferSSRProps";
 
 import CustomBranding from "@components/CustomBranding";
-import { TextField } from "@components/form/fields";
 import { HeadSeo } from "@components/seo/head-seo";
-import { Button } from "@components/ui/Button";
 
 import { ssrInit } from "@server/lib/ssr";
 

apps/web/pages/cancel/success.tsx

@@ -3,10 +3,11 @@ import { ArrowRightIcon } from "@heroicons/react/solid";
 import { useSession } from "next-auth/react";
 import { useRouter } from "next/router";
 
+import Button from "@calcom/ui/Button";
+
 import { useLocale } from "@lib/hooks/useLocale";
 
 import { HeadSeo } from "@components/seo/head-seo";
-import Button from "@components/ui/Button";
 
 export default function CancelSuccess() {
   const { t } = useLocale();

apps/web/pages/event-types/[type].tsx

@@ -29,8 +29,12 @@ import Select from "react-select";
 import { JSONObject } from "superjson/dist/types";
 import { z } from "zod";
 
+import showToast from "@calcom/lib/notification";
 import { StripeData } from "@calcom/stripe/server";
+import Button from "@calcom/ui/Button";
+import { Dialog, DialogContent, DialogTrigger } from "@calcom/ui/Dialog";
 import Switch from "@calcom/ui/Switch";
+import { Form } from "@calcom/ui/form/fields";
 
 import { asStringOrThrow, asStringOrUndefined } from "@lib/asStringOrNull";
 import { getSession } from "@lib/auth";
@@ -38,7 +42,6 @@ import { HttpError } from "@lib/core/http/error";
 import { useLocale } from "@lib/hooks/useLocale";
 import getIntegrations, { hasIntegration } from "@lib/integrations/getIntegrations";
 import { LocationType } from "@lib/location";
-import showToast from "@lib/notification";
 import prisma from "@lib/prisma";
 import { slugify } from "@lib/slugify";
 import { trpc } from "@lib/trpc";
@@ -46,13 +49,10 @@ import { inferSSRProps } from "@lib/types/inferSSRProps";
 
 import { ClientSuspense } from "@components/ClientSuspense";
 import DestinationCalendarSelector from "@components/DestinationCalendarSelector";
-import { Dialog, DialogContent, DialogTrigger } from "@components/Dialog";
 import Loader from "@components/Loader";
 import Shell from "@components/Shell";
 import ConfirmationDialogContent from "@components/dialog/ConfirmationDialogContent";
-import { Form } from "@components/form/fields";
 import CustomInputTypeForm from "@components/pages/eventtypes/CustomInputTypeForm";
-import Button from "@components/ui/Button";
 import InfoBadge from "@components/ui/InfoBadge";
 import { Scheduler } from "@components/ui/Scheduler";
 import CheckboxField from "@components/ui/form/CheckboxField";

apps/web/pages/event-types/index.tsx

@@ -17,7 +17,11 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import React, { Fragment, useEffect, useState } from "react";
 
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import showToast from "@calcom/lib/notification";
 import { Button } from "@calcom/ui";
+import { Alert } from "@calcom/ui/Alert";
+import { Dialog, DialogTrigger } from "@calcom/ui/Dialog";
 import Dropdown, {
   DropdownMenuTrigger,
   DropdownMenuContent,
@@ -28,17 +32,13 @@ import Dropdown, {
 import { QueryCell } from "@lib/QueryCell";
 import classNames from "@lib/classNames";
 import { HttpError } from "@lib/core/http/error";
-import { useLocale } from "@lib/hooks/useLocale";
-import showToast from "@lib/notification";
 import { inferQueryOutput, trpc } from "@lib/trpc";
 
-import { Dialog, DialogTrigger } from "@components/Dialog";
 import Shell from "@components/Shell";
 import { Tooltip } from "@components/Tooltip";
 import ConfirmationDialogContent from "@components/dialog/ConfirmationDialogContent";
 import CreateEventTypeButton from "@components/eventtype/CreateEventType";
 import EventTypeDescription from "@components/eventtype/EventTypeDescription";
-import { Alert } from "@components/ui/Alert";
 import Avatar from "@components/ui/Avatar";
 import AvatarGroup from "@components/ui/AvatarGroup";
 import Badge from "@components/ui/Badge";

apps/web/pages/getting-started.tsx

@@ -17,6 +17,10 @@ import { useForm } from "react-hook-form";
 import TimezoneSelect from "react-timezone-select";
 import * as z from "zod";
 
+import { Alert } from "@calcom/ui/Alert";
+import Button from "@calcom/ui/Button";
+import { Form } from "@calcom/ui/form/fields";
+
 import { asStringOrNull } from "@lib/asStringOrNull";
 import { getSession } from "@lib/auth";
 import { DEFAULT_SCHEDULE } from "@lib/availability";
@@ -31,10 +35,7 @@ import { Schedule as ScheduleType } from "@lib/types/schedule";
 
 import { ClientSuspense } from "@components/ClientSuspense";
 import Loader from "@components/Loader";
-import { Form } from "@components/form/fields";
 import { CalendarListContainer } from "@components/integrations/CalendarListContainer";
-import { Alert } from "@components/ui/Alert";
-import Button from "@components/ui/Button";
 import Text from "@components/ui/Text";
 import Schedule from "@components/ui/form/Schedule";
 

apps/web/pages/integrations/index.tsx

@@ -3,11 +3,14 @@ import Image from "next/image";
 import React, { useEffect, useState } from "react";
 import { JSONObject } from "superjson/dist/types";
 
+import showToast from "@calcom/lib/notification";
+import { Alert } from "@calcom/ui/Alert";
+import Button from "@calcom/ui/Button";
+
 import { QueryCell } from "@lib/QueryCell";
 import classNames from "@lib/classNames";
 import { HttpError } from "@lib/core/http/error";
 import { useLocale } from "@lib/hooks/useLocale";
-import showToast from "@lib/notification";
 import { trpc } from "@lib/trpc";
 
 import { ClientSuspense } from "@components/ClientSuspense";
@@ -19,8 +22,6 @@ import ConnectIntegration from "@components/integrations/ConnectIntegrations";
 import DisconnectIntegration from "@components/integrations/DisconnectIntegration";
 import IntegrationListItem from "@components/integrations/IntegrationListItem";
 import SubHeadingTitleWithConnections from "@components/integrations/SubHeadingTitleWithConnections";
-import { Alert } from "@components/ui/Alert";
-import Button from "@components/ui/Button";
 import WebhookListContainer from "@components/webhook/WebhookListContainer";
 
 function IframeEmbedContainer() {

apps/web/pages/sandbox/Alert.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { Alert, AlertProps } from "@components/ui/Alert";
+import { Alert, AlertProps } from "@calcom/ui/Alert";
 
 import { sandboxPage } from ".";
 

apps/web/pages/sandbox/Button.tsx

@@ -1,7 +1,7 @@
 import { PlusIcon } from "@heroicons/react/solid";
 import React from "react";
 
-import { Button, ButtonBaseProps } from "@components/ui/Button";
+import { Button, ButtonBaseProps } from "@calcom/ui/Button";
 
 import { sandboxPage } from ".";
 

apps/web/pages/sandbox/List.tsx

@@ -1,7 +1,8 @@
 import React, { useState } from "react";
 
+import Button from "@calcom/ui/Button";
+
 import { List, ListItem } from "@components/List";
-import Button from "@components/ui/Button";
 
 import { sandboxPage } from ".";
 

apps/web/pages/sandbox/form.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { Label, Input, TextField } from "@components/form/fields";
+import { Label, Input, TextField } from "@calcom/ui/form/fields";
 
 import { sandboxPage } from ".";
 

apps/web/pages/settings/billing.tsx

@@ -2,11 +2,12 @@ import { ExternalLinkIcon } from "@heroicons/react/solid";
 import { ReactNode } from "react";
 import { useIntercom } from "react-use-intercom";
 
+import Button from "@calcom/ui/Button";
+
 import { useLocale } from "@lib/hooks/useLocale";
 
 import SettingsShell from "@components/SettingsShell";
 import Shell, { useMeQuery } from "@components/Shell";
-import Button from "@components/ui/Button";
 
 type CardProps = { title: string; description: string; className?: string; children: ReactNode };
 const Card = ({ title, description, className = "", children }: CardProps): JSX.Element => (

apps/web/pages/settings/profile.tsx

@@ -9,27 +9,28 @@ import { ComponentProps, FormEvent, RefObject, useEffect, useMemo, useRef, useSt
 import Select from "react-select";
 import TimezoneSelect, { ITimezone } from "react-timezone-select";
 
+import showToast from "@calcom/lib/notification";
+import { Alert } from "@calcom/ui/Alert";
+import Button from "@calcom/ui/Button";
+import { Dialog, DialogClose, DialogContent, DialogTrigger } from "@calcom/ui/Dialog";
+import { TextField } from "@calcom/ui/form/fields";
+
 import { QueryCell } from "@lib/QueryCell";
 import { asStringOrNull, asStringOrUndefined } from "@lib/asStringOrNull";
 import { getSession } from "@lib/auth";
 import { nameOfDay } from "@lib/core/i18n/weekday";
 import { useLocale } from "@lib/hooks/useLocale";
 import { isBrandingHidden } from "@lib/isBrandingHidden";
-import showToast from "@lib/notification";
 import prisma from "@lib/prisma";
 import { trpc } from "@lib/trpc";
 import { inferSSRProps } from "@lib/types/inferSSRProps";
 
-import { Dialog, DialogClose, DialogContent, DialogTrigger } from "@components/Dialog";
 import ImageUploader from "@components/ImageUploader";
 import SettingsShell from "@components/SettingsShell";
 import Shell from "@components/Shell";
 import ConfirmationDialogContent from "@components/dialog/ConfirmationDialogContent";
-import { TextField } from "@components/form/fields";
-import { Alert } from "@components/ui/Alert";
 import Avatar from "@components/ui/Avatar";
 import Badge from "@components/ui/Badge";
-import Button from "@components/ui/Button";
 import ColorPicker from "@components/ui/colorpicker";
 
 type Props = inferSSRProps<typeof getServerSideProps>;

apps/web/pages/settings/teams/[id]/index.tsx

@@ -3,11 +3,13 @@ import { MembershipRole } from "@prisma/client";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 
+import showToast from "@calcom/lib/notification";
+import { Alert } from "@calcom/ui/Alert";
+import { Button } from "@calcom/ui/Button";
 import SAMLConfiguration from "@ee/components/saml/Configuration";
 
 import { getPlaceholderAvatar } from "@lib/getPlaceholderAvatar";
 import { useLocale } from "@lib/hooks/useLocale";
-import showToast from "@lib/notification";
 import { trpc } from "@lib/trpc";
 
 import Loader from "@components/Loader";
@@ -17,9 +19,7 @@ import MemberList from "@components/team/MemberList";
 import TeamSettings from "@components/team/TeamSettings";
 import TeamSettingsRightSidebar from "@components/team/TeamSettingsRightSidebar";
 import { UpgradeToFlexibleProModal } from "@components/team/UpgradeToFlexibleProModal";
-import { Alert } from "@components/ui/Alert";
 import Avatar from "@components/ui/Avatar";
-import { Button } from "@components/ui/Button";
 
 export function TeamSettingsPage() {
   const { t } = useLocale();

apps/web/pages/settings/teams/index.tsx

@@ -4,6 +4,9 @@ import { useSession } from "next-auth/react";
 import { Trans } from "next-i18next";
 import { useState } from "react";
 
+import { Alert } from "@calcom/ui/Alert";
+import Button from "@calcom/ui/Button";
+
 import { useLocale } from "@lib/hooks/useLocale";
 import { trpc } from "@lib/trpc";
 
@@ -13,8 +16,6 @@ import SettingsShell from "@components/SettingsShell";
 import Shell, { useMeQuery } from "@components/Shell";
 import TeamCreateModal from "@components/team/TeamCreateModal";
 import TeamList from "@components/team/TeamList";
-import { Alert } from "@components/ui/Alert";
-import Button from "@components/ui/Button";
 
 export default function Teams() {
   const { t } = useLocale();

apps/web/pages/success.tsx

@@ -10,6 +10,9 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 
+import Button from "@calcom/ui/Button";
+import { EmailInput } from "@calcom/ui/form/fields";
+
 import { asStringOrThrow, asStringOrNull } from "@lib/asStringOrNull";
 import { getEventName } from "@lib/event";
 import { useLocale } from "@lib/hooks/useLocale";
@@ -20,9 +23,7 @@ import { isBrowserLocale24h } from "@lib/timeFormat";
 import { inferSSRProps } from "@lib/types/inferSSRProps";
 
 import CustomBranding from "@components/CustomBranding";
-import { EmailInput } from "@components/form/fields";
 import { HeadSeo } from "@components/seo/head-seo";
-import Button from "@components/ui/Button";
 
 import { ssrInit } from "@server/lib/ssr";
 

apps/web/pages/team/[slug].tsx

@@ -4,6 +4,8 @@ import { GetServerSidePropsContext } from "next";
 import Link from "next/link";
 import React from "react";
 
+import Button from "@calcom/ui/Button";
+
 import { getPlaceholderAvatar } from "@lib/getPlaceholderAvatar";
 import { useLocale } from "@lib/hooks/useLocale";
 import useTheme from "@lib/hooks/useTheme";
@@ -17,7 +19,6 @@ import { HeadSeo } from "@components/seo/head-seo";
 import Team from "@components/team/screens/Team";
 import Avatar from "@components/ui/Avatar";
 import AvatarGroup from "@components/ui/AvatarGroup";
-import Button from "@components/ui/Button";
 import Text from "@components/ui/Text";
 
 export type TeamPageProps = inferSSRProps<typeof getServerSideProps>;

apps/web/pages/video/meeting-ended/[uid].tsx

@@ -6,12 +6,13 @@ import { getSession } from "next-auth/react";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 
+import Button from "@calcom/ui/Button";
+
 import prisma from "@lib/prisma";
 import { detectBrowserTimeFormat } from "@lib/timeFormat";
 import { inferSSRProps } from "@lib/types/inferSSRProps";
 
 import { HeadSeo } from "@components/seo/head-seo";
-import Button from "@components/ui/Button";
 
 export default function MeetingUnavailable(props: inferSSRProps<typeof getServerSideProps>) {
   const router = useRouter();

apps/web/pages/video/meeting-not-started/[uid].tsx

@@ -6,12 +6,13 @@ import { getSession } from "next-auth/react";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 
+import Button from "@calcom/ui/Button";
+
 import prisma from "@lib/prisma";
 import { detectBrowserTimeFormat } from "@lib/timeFormat";
 import { inferSSRProps } from "@lib/types/inferSSRProps";
 
 import { HeadSeo } from "@components/seo/head-seo";
-import Button from "@components/ui/Button";
 
 export default function MeetingNotStarted(props: inferSSRProps<typeof getServerSideProps>) {
   const router = useRouter();

apps/web/pages/video/no-meeting-found.tsx

@@ -1,10 +1,11 @@
 import { XIcon } from "@heroicons/react/outline";
 import { ArrowRightIcon } from "@heroicons/react/solid";
 
+import Button from "@calcom/ui/Button";
+
 import { useLocale } from "@lib/hooks/useLocale";
 
 import { HeadSeo } from "@components/seo/head-seo";
-import Button from "@components/ui/Button";
 
 export default function NoMeetingFound() {
   const { t } = useLocale();

apps/web/server/routers/viewer/webhook.tsx

@@ -1,7 +1,8 @@
 import { v4 } from "uuid";
 import { z } from "zod";
 
-import { getErrorFromUnknown } from "@lib/errors";
+import { getErrorFromUnknown } from "@calcom/lib/errors";
+
 import { WEBHOOK_TRIGGER_EVENTS } from "@lib/webhooks/constants";
 import sendPayload from "@lib/webhooks/sendPayload";
 

packages/lib/hooks/useLocale.ts

@@ -0,0 +1,10 @@
+import { useTranslation } from "next-i18next";
+
+export const useLocale = () => {
+  const { i18n, t } = useTranslation("common");
+
+  return {
+    i18n,
+    t,
+  };
+};

packages/lib/package.json

@@ -7,7 +7,9 @@
   "dependencies": {
     "bcryptjs": "^2.4.3",
     "dayjs": "^1.10.4",
-    "dayjs-business-time": "^1.0.4"
+    "dayjs-business-time": "^1.0.4",
+    "next-i18next": "^8.9.0",
+    "react-hot-toast": "^2.1.0"
   },
   "devDependencies": {
     "@calcom/tsconfig": "*",

packages/ui/form/fields.tsx

@@ -2,12 +2,12 @@ import { useId } from "@radix-ui/react-id";
 import { forwardRef, ReactElement, ReactNode, Ref } from "react";
 import { FieldValues, FormProvider, SubmitHandler, useFormContext, UseFormReturn } from "react-hook-form";
 
-import classNames from "@lib/classNames";
-import { getErrorFromUnknown } from "@lib/errors";
-import { useLocale } from "@lib/hooks/useLocale";
-import showToast from "@lib/notification";
+import classNames from "@calcom/lib/classNames";
+import { getErrorFromUnknown } from "@calcom/lib/errors";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import showToast from "@calcom/lib/notification";
 
-import { Alert } from "@components/ui/Alert";
+import { Alert } from "../Alert";
 
 type InputProps = Omit<JSX.IntrinsicElements["input"], "name"> & { name: string };
 

packages/ui/package.json

@@ -4,6 +4,10 @@
   "main": "./index.tsx",
   "types": "./index.tsx",
   "license": "MIT",
+  "dependencies": {
+    "@radix-ui/react-dialog": "^0.1.0",
+    "next": "^12.1.0"
+  },
   "devDependencies": {
     "@calcom/config": "*",
     "@calcom/lib": "*",