diff --git a/apps/web/components/DestinationCalendarSelector.tsx b/apps/web/components/DestinationCalendarSelector.tsx index e7d020ab45..f2462dd9d0 100644 --- a/apps/web/components/DestinationCalendarSelector.tsx +++ b/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; diff --git a/apps/web/components/ImageUploader.tsx b/apps/web/components/ImageUploader.tsx index 65c3cec0e1..26aae80621 100644 --- a/apps/web/components/ImageUploader.tsx +++ b/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; diff --git a/apps/web/components/Shell.tsx b/apps/web/components/Shell.tsx index 913b58e045..47e7e023e1 100644 --- a/apps/web/components/Shell.tsx +++ b/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"], { diff --git a/apps/web/components/auth/SAMLLogin.tsx b/apps/web/components/auth/SAMLLogin.tsx index 1deea12796..148065488f 100644 --- a/apps/web/components/auth/SAMLLogin.tsx +++ b/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; diff --git a/apps/web/components/auth/TwoFactor.tsx b/apps/web/components/auth/TwoFactor.tsx index a54a5d3dd8..dab5357928 100644 --- a/apps/web/components/auth/TwoFactor.tsx +++ b/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(""); diff --git a/apps/web/components/booking/BookingListItem.tsx b/apps/web/components/booking/BookingListItem.tsx index 699476af66..8036bb4bce 100644 --- a/apps/web/components/booking/BookingListItem.tsx +++ b/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]; diff --git a/apps/web/components/booking/pages/BookingPage.tsx b/apps/web/components/booking/pages/BookingPage.tsx index 5bda74300c..e6b6ab7b86 100644 --- a/apps/web/components/booking/pages/BookingPage.tsx +++ b/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"; diff --git a/apps/web/components/dialog/ConfirmationDialogContent.tsx b/apps/web/components/dialog/ConfirmationDialogContent.tsx index cf41920067..9487bf885a 100644 --- a/apps/web/components/dialog/ConfirmationDialogContent.tsx +++ b/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; diff --git a/apps/web/components/eventtype/CreateEventType.tsx b/apps/web/components/eventtype/CreateEventType.tsx index 272d02861a..8811cec13b 100644 --- a/apps/web/components/eventtype/CreateEventType.tsx +++ b/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 diff --git a/apps/web/components/integrations/CalendarListContainer.tsx b/apps/web/components/integrations/CalendarListContainer.tsx index 558969e072..80f8eee924 100644 --- a/apps/web/components/integrations/CalendarListContainer.tsx +++ b/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"; diff --git a/apps/web/components/integrations/ConnectIntegrations.tsx b/apps/web/components/integrations/ConnectIntegrations.tsx index bbf50dd5ea..0ce01fe501 100644 --- a/apps/web/components/integrations/ConnectIntegrations.tsx +++ b/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; diff --git a/apps/web/components/integrations/DisconnectIntegration.tsx b/apps/web/components/integrations/DisconnectIntegration.tsx index 9b3e3db25b..a760955092 100644 --- a/apps/web/components/integrations/DisconnectIntegration.tsx +++ b/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 */ diff --git a/apps/web/components/pages/eventtypes/CustomInputTypeForm.tsx b/apps/web/components/pages/eventtypes/CustomInputTypeForm.tsx index 4620e816f4..ff5ff519d5 100644 --- a/apps/web/components/pages/eventtypes/CustomInputTypeForm.tsx +++ b/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; diff --git a/apps/web/components/security/ChangePasswordSection.tsx b/apps/web/components/security/ChangePasswordSection.tsx index 9186554955..fdfa153153 100644 --- a/apps/web/components/security/ChangePasswordSection.tsx +++ b/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(""); diff --git a/apps/web/components/security/DisableTwoFactorModal.tsx b/apps/web/components/security/DisableTwoFactorModal.tsx index 2b4d2bffbf..d86f8df315 100644 --- a/apps/web/components/security/DisableTwoFactorModal.tsx +++ b/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"; diff --git a/apps/web/components/security/EnableTwoFactorModal.tsx b/apps/web/components/security/EnableTwoFactorModal.tsx index 58ee34cdff..280f36009c 100644 --- a/apps/web/components/security/EnableTwoFactorModal.tsx +++ b/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"; diff --git a/apps/web/components/security/TwoFactorAuthSection.tsx b/apps/web/components/security/TwoFactorAuthSection.tsx index d3970a03cd..00fd4adf0a 100644 --- a/apps/web/components/security/TwoFactorAuthSection.tsx +++ b/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"; diff --git a/apps/web/components/team/MemberChangeRoleModal.tsx b/apps/web/components/team/MemberChangeRoleModal.tsx index 3eeb535e55..e862155a52 100644 --- a/apps/web/components/team/MemberChangeRoleModal.tsx +++ b/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: { diff --git a/apps/web/components/team/MemberInvitationModal.tsx b/apps/web/components/team/MemberInvitationModal.tsx index e245e587c3..63c6bf4ae9 100644 --- a/apps/web/components/team/MemberInvitationModal.tsx +++ b/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(); diff --git a/apps/web/components/team/MemberListItem.tsx b/apps/web/components/team/MemberListItem.tsx index d9a388d4d9..19d1a79141 100644 --- a/apps/web/components/team/MemberListItem.tsx +++ b/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"; diff --git a/apps/web/components/team/TeamCreateModal.tsx b/apps/web/components/team/TeamCreateModal.tsx index 1fadb06918..23b8a5d228 100644 --- a/apps/web/components/team/TeamCreateModal.tsx +++ b/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; } diff --git a/apps/web/components/team/TeamList.tsx b/apps/web/components/team/TeamList.tsx index df4e750b01..8c7bc027a9 100644 --- a/apps/web/components/team/TeamList.tsx +++ b/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"; diff --git a/apps/web/components/team/TeamListItem.tsx b/apps/web/components/team/TeamListItem.tsx index 9fbe89fc9d..13d7209315 100644 --- a/apps/web/components/team/TeamListItem.tsx +++ b/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"; diff --git a/apps/web/components/team/TeamSettings.tsx b/apps/web/components/team/TeamSettings.tsx index b3de5bb96e..819d750799 100644 --- a/apps/web/components/team/TeamSettings.tsx +++ b/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 { diff --git a/apps/web/components/team/TeamSettingsRightSidebar.tsx b/apps/web/components/team/TeamSettingsRightSidebar.tsx index 87e7c8f51b..513ac2b875 100644 --- a/apps/web/components/team/TeamSettingsRightSidebar.tsx +++ b/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"; diff --git a/apps/web/components/team/UpgradeToFlexibleProModal.tsx b/apps/web/components/team/UpgradeToFlexibleProModal.tsx index 589b8c27cd..f963274fc5 100644 --- a/apps/web/components/team/UpgradeToFlexibleProModal.tsx +++ b/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; diff --git a/apps/web/components/team/screens/Team.tsx b/apps/web/components/team/screens/Team.tsx index 8bd13cf60a..2817cdab03 100644 --- a/apps/web/components/team/screens/Team.tsx +++ b/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"]; diff --git a/apps/web/components/ui/Button.tsx b/apps/web/components/ui/Button.tsx deleted file mode 100644 index 979b55b369..0000000000 --- a/apps/web/components/ui/Button.tsx +++ /dev/null @@ -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"; diff --git a/apps/web/components/ui/Scheduler.tsx b/apps/web/components/ui/Scheduler.tsx index 66ed11dafc..19ef56dd99 100644 --- a/apps/web/components/ui/Scheduler.tsx +++ b/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"; diff --git a/apps/web/components/ui/TableActions.tsx b/apps/web/components/ui/TableActions.tsx index fa6e486705..94ebe93d21 100644 --- a/apps/web/components/ui/TableActions.tsx +++ b/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; diff --git a/apps/web/components/ui/alerts/Error.tsx b/apps/web/components/ui/alerts/Error.tsx index 5548a510f0..8e3e54b57f 100644 --- a/apps/web/components/ui/alerts/Error.tsx +++ b/apps/web/components/ui/alerts/Error.tsx @@ -1,4 +1,4 @@ -import { Alert } from "../Alert"; +import { Alert } from "@calcom/ui/Alert"; /** * @deprecated use `` instead diff --git a/apps/web/components/ui/form/Schedule.tsx b/apps/web/components/ui/form/Schedule.tsx index 69628d66d8..f194c7243b 100644 --- a/apps/web/components/ui/form/Schedule.tsx +++ b/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); diff --git a/apps/web/components/ui/modal/SetTimesModal.tsx b/apps/web/components/ui/modal/SetTimesModal.tsx index b314d8542b..504b249759 100644 --- a/apps/web/components/ui/modal/SetTimesModal.tsx +++ b/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); diff --git a/apps/web/components/webhook/WebhookDialogForm.tsx b/apps/web/components/webhook/WebhookDialogForm.tsx index 8f7e3b8764..87f24d13f2 100644 --- a/apps/web/components/webhook/WebhookDialogForm.tsx +++ b/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"; diff --git a/apps/web/components/webhook/WebhookListContainer.tsx b/apps/web/components/webhook/WebhookListContainer.tsx index 2603366d31..31fbbaa037 100644 --- a/apps/web/components/webhook/WebhookListContainer.tsx +++ b/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"; diff --git a/apps/web/components/webhook/WebhookListItem.tsx b/apps/web/components/webhook/WebhookListItem.tsx index 6fb8081549..970b1917ae 100644 --- a/apps/web/components/webhook/WebhookListItem.tsx +++ b/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]; diff --git a/apps/web/components/webhook/WebhookTestDisclosure.tsx b/apps/web/components/webhook/WebhookTestDisclosure.tsx index 685f967c9d..7499f7575a 100644 --- a/apps/web/components/webhook/WebhookTestDisclosure.tsx +++ b/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; diff --git a/apps/web/ee/components/LicenseBanner.tsx b/apps/web/ee/components/LicenseBanner.tsx index 481f7f9afd..16f2232c74 100644 --- a/apps/web/ee/components/LicenseBanner.tsx +++ b/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() { diff --git a/apps/web/ee/components/TrialBanner.tsx b/apps/web/ee/components/TrialBanner.tsx index ed83d826a8..eed8e19e64 100644 --- a/apps/web/ee/components/TrialBanner.tsx +++ b/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(); diff --git a/apps/web/ee/components/saml/Configuration.tsx b/apps/web/ee/components/saml/Configuration.tsx index 15c4a0ba12..4b32f7ab51 100644 --- a/apps/web/ee/components/saml/Configuration.tsx +++ b/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, diff --git a/apps/web/ee/components/stripe/Payment.tsx b/apps/web/ee/components/stripe/Payment.tsx index ccbe3db8dd..e1ae9dd2bb 100644 --- a/apps/web/ee/components/stripe/Payment.tsx +++ b/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: { diff --git a/apps/web/ee/components/web3/CryptoSection.tsx b/apps/web/ee/components/web3/CryptoSection.tsx index 957cabecb1..f81a112e0e 100644 --- a/apps/web/ee/components/web3/CryptoSection.tsx +++ b/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"; diff --git a/apps/web/ee/lib/stripe/server.ts b/apps/web/ee/lib/stripe/server.ts index 04747ed066..64f2808bd9 100644 --- a/apps/web/ee/lib/stripe/server.ts +++ b/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 = { diff --git a/apps/web/ee/pages/api/integrations/stripepayment/webhook.ts b/apps/web/ee/pages/api/integrations/stripepayment/webhook.ts index 190ac67bb6..cc5c6064ee 100644 --- a/apps/web/ee/pages/api/integrations/stripepayment/webhook.ts +++ b/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"; diff --git a/apps/web/ee/pages/settings/teams/[id]/availability.tsx b/apps/web/ee/pages/settings/teams/[id]/availability.tsx index c96c457da5..3e22e8d86f 100644 --- a/apps/web/ee/pages/settings/teams/[id]/availability.tsx +++ b/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() { diff --git a/apps/web/lib/QueryCell.tsx b/apps/web/lib/QueryCell.tsx index af805a05d7..f3dce5a960 100644 --- a/apps/web/lib/QueryCell.tsx +++ b/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; diff --git a/apps/web/lib/emails/templates/attendee-scheduled-email.ts b/apps/web/lib/emails/templates/attendee-scheduled-email.ts index 674a32ffdf..447bc84ed2 100644 --- a/apps/web/lib/emails/templates/attendee-scheduled-email.ts +++ b/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"; diff --git a/apps/web/lib/emails/templates/forgot-password-email.ts b/apps/web/lib/emails/templates/forgot-password-email.ts index 7bd0e02497..f7ba982f18 100644 --- a/apps/web/lib/emails/templates/forgot-password-email.ts +++ b/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"; diff --git a/apps/web/lib/emails/templates/organizer-scheduled-email.ts b/apps/web/lib/emails/templates/organizer-scheduled-email.ts index 0307318c6f..a6ac4ba956 100644 --- a/apps/web/lib/emails/templates/organizer-scheduled-email.ts +++ b/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"; diff --git a/apps/web/lib/emails/templates/team-invite-email.ts b/apps/web/lib/emails/templates/team-invite-email.ts index 90763d8a62..bf08e27749 100644 --- a/apps/web/lib/emails/templates/team-invite-email.ts +++ b/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"; diff --git a/apps/web/lib/hooks/useLocale.ts b/apps/web/lib/hooks/useLocale.ts index 2fae0c7b8d..9e8ca501fd 100644 --- a/apps/web/lib/hooks/useLocale.ts +++ b/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"); diff --git a/apps/web/lib/integrations/Daily/DailyVideoApiAdapter.ts b/apps/web/lib/integrations/Daily/DailyVideoApiAdapter.ts index 03e340552b..f3f574111a 100644 --- a/apps/web/lib/integrations/Daily/DailyVideoApiAdapter.ts +++ b/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"; diff --git a/apps/web/lib/integrations/Huddle01/Huddle01VideoApiAdapter.ts b/apps/web/lib/integrations/Huddle01/Huddle01VideoApiAdapter.ts index 7f7893f307..f8eb84d39d 100644 --- a/apps/web/lib/integrations/Huddle01/Huddle01VideoApiAdapter.ts +++ b/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"; diff --git a/apps/web/lib/integrations/Tandem/TandemVideoApiAdapter.ts b/apps/web/lib/integrations/Tandem/TandemVideoApiAdapter.ts index f85d5c733b..cfd38a42b4 100644 --- a/apps/web/lib/integrations/Tandem/TandemVideoApiAdapter.ts +++ b/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"; diff --git a/apps/web/lib/integrations/Zoom/ZoomVideoApiAdapter.ts b/apps/web/lib/integrations/Zoom/ZoomVideoApiAdapter.ts index ed5146120a..33f9961d95 100644 --- a/apps/web/lib/integrations/Zoom/ZoomVideoApiAdapter.ts +++ b/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"; diff --git a/apps/web/lib/integrations/calendar/CalendarManager.ts b/apps/web/lib/integrations/calendar/CalendarManager.ts index 7f24ae8dca..1c1a0fb8a3 100644 --- a/apps/web/lib/integrations/calendar/CalendarManager.ts +++ b/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"; diff --git a/apps/web/lib/integrations/calendar/components/AddAppleIntegration.tsx b/apps/web/lib/integrations/calendar/components/AddAppleIntegration.tsx index 8cdcbd78d1..264682d861 100644 --- a/apps/web/lib/integrations/calendar/components/AddAppleIntegration.tsx +++ b/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"; diff --git a/apps/web/lib/integrations/calendar/components/AddCalDavIntegration.tsx b/apps/web/lib/integrations/calendar/components/AddCalDavIntegration.tsx index 04618a2272..3b98be3636 100644 --- a/apps/web/lib/integrations/calendar/components/AddCalDavIntegration.tsx +++ b/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; diff --git a/apps/web/lib/integrations/calendar/services/Office365CalendarService.ts b/apps/web/lib/integrations/calendar/services/Office365CalendarService.ts index a8480a6e22..c7eeb0b333 100644 --- a/apps/web/lib/integrations/calendar/services/Office365CalendarService.ts +++ b/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"; diff --git a/apps/web/pages/500.tsx b/apps/web/pages/500.tsx index 6926ab2501..3ebc6b875a 100644 --- a/apps/web/pages/500.tsx +++ b/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 ( diff --git a/apps/web/pages/[user].tsx b/apps/web/pages/[user].tsx index 8ae3905034..4b58f572d0 100644 --- a/apps/web/pages/[user].tsx +++ b/apps/web/pages/[user].tsx @@ -85,7 +85,7 @@ export default function User(props: inferSSRProps) { 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", diff --git a/apps/web/pages/_error.tsx b/apps/web/pages/_error.tsx index 3016275dcf..b7edbec8cb 100644 --- a/apps/web/pages/_error.tsx +++ b/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"; diff --git a/apps/web/pages/api/book/event.ts b/apps/web/pages/api/book/event.ts index 68f6eb13ad..8f1363e9a0 100644 --- a/apps/web/pages/api/book/event.ts +++ b/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"; diff --git a/apps/web/pages/auth/error.tsx b/apps/web/pages/auth/error.tsx index 4db8ac6ae3..c9febbca5a 100644 --- a/apps/web/pages/auth/error.tsx +++ b/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"; diff --git a/apps/web/pages/auth/forgot-password/index.tsx b/apps/web/pages/auth/forgot-password/index.tsx index ff19a74671..3b32aa30b4 100644 --- a/apps/web/pages/auth/forgot-password/index.tsx +++ b/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(); diff --git a/apps/web/pages/auth/login.tsx b/apps/web/pages/auth/login.tsx index f9212ed469..0fba7fb9fe 100644 --- a/apps/web/pages/auth/login.tsx +++ b/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"; diff --git a/apps/web/pages/auth/logout.tsx b/apps/web/pages/auth/logout.tsx index 2f017266ec..eb7b326a7c 100644 --- a/apps/web/pages/auth/logout.tsx +++ b/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"; diff --git a/apps/web/pages/auth/signup.tsx b/apps/web/pages/auth/signup.tsx index b4e5536ac8..0285b3959e 100644 --- a/apps/web/pages/auth/signup.tsx +++ b/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"; diff --git a/apps/web/pages/availability/index.tsx b/apps/web/pages/availability/index.tsx index ba8bcc12b7..0ee1457096 100644 --- a/apps/web/pages/availability/index.tsx +++ b/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); diff --git a/apps/web/pages/bookings/[status].tsx b/apps/web/pages/bookings/[status].tsx index f89b0d66b2..717d9164ee 100644 --- a/apps/web/pages/bookings/[status].tsx +++ b/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"]; diff --git a/apps/web/pages/cancel/[uid].tsx b/apps/web/pages/cancel/[uid].tsx index 90aba1ac15..3f64966e18 100644 --- a/apps/web/pages/cancel/[uid].tsx +++ b/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"; diff --git a/apps/web/pages/cancel/success.tsx b/apps/web/pages/cancel/success.tsx index 03e3dc821d..f50bf12b78 100644 --- a/apps/web/pages/cancel/success.tsx +++ b/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(); diff --git a/apps/web/pages/event-types/[type].tsx b/apps/web/pages/event-types/[type].tsx index 4d3414aaad..4f2c7d2504 100644 --- a/apps/web/pages/event-types/[type].tsx +++ b/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"; diff --git a/apps/web/pages/event-types/index.tsx b/apps/web/pages/event-types/index.tsx index 5d0c1f0b0c..1547811c8f 100644 --- a/apps/web/pages/event-types/index.tsx +++ b/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"; diff --git a/apps/web/pages/getting-started.tsx b/apps/web/pages/getting-started.tsx index 93a60eca28..fb912f7b4c 100644 --- a/apps/web/pages/getting-started.tsx +++ b/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"; diff --git a/apps/web/pages/integrations/index.tsx b/apps/web/pages/integrations/index.tsx index 94fd380d65..aeddc900a7 100644 --- a/apps/web/pages/integrations/index.tsx +++ b/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() { diff --git a/apps/web/pages/sandbox/Alert.tsx b/apps/web/pages/sandbox/Alert.tsx index ca085e1fea..a056435148 100644 --- a/apps/web/pages/sandbox/Alert.tsx +++ b/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 "."; diff --git a/apps/web/pages/sandbox/Button.tsx b/apps/web/pages/sandbox/Button.tsx index dce3f6d889..3e548f9607 100644 --- a/apps/web/pages/sandbox/Button.tsx +++ b/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 "."; diff --git a/apps/web/pages/sandbox/List.tsx b/apps/web/pages/sandbox/List.tsx index 38b7b35995..4bae6b7119 100644 --- a/apps/web/pages/sandbox/List.tsx +++ b/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 "."; diff --git a/apps/web/pages/sandbox/form.tsx b/apps/web/pages/sandbox/form.tsx index 181d70f4ea..5b4fc55e32 100644 --- a/apps/web/pages/sandbox/form.tsx +++ b/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 "."; diff --git a/apps/web/pages/settings/billing.tsx b/apps/web/pages/settings/billing.tsx index 79802faf44..de79b1b34d 100644 --- a/apps/web/pages/settings/billing.tsx +++ b/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 => ( diff --git a/apps/web/pages/settings/profile.tsx b/apps/web/pages/settings/profile.tsx index 2121ec6144..42dde13e1b 100644 --- a/apps/web/pages/settings/profile.tsx +++ b/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; diff --git a/apps/web/pages/settings/teams/[id]/index.tsx b/apps/web/pages/settings/teams/[id]/index.tsx index 4fd74ce647..d15be6600b 100644 --- a/apps/web/pages/settings/teams/[id]/index.tsx +++ b/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(); diff --git a/apps/web/pages/settings/teams/index.tsx b/apps/web/pages/settings/teams/index.tsx index 00a1b8ed0b..a034670772 100644 --- a/apps/web/pages/settings/teams/index.tsx +++ b/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(); diff --git a/apps/web/pages/success.tsx b/apps/web/pages/success.tsx index ac8f70fa75..5810bdeef8 100644 --- a/apps/web/pages/success.tsx +++ b/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"; diff --git a/apps/web/pages/team/[slug].tsx b/apps/web/pages/team/[slug].tsx index b568c9c441..47266e75e0 100644 --- a/apps/web/pages/team/[slug].tsx +++ b/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; diff --git a/apps/web/pages/video/meeting-ended/[uid].tsx b/apps/web/pages/video/meeting-ended/[uid].tsx index 19daaaf4ca..0484b97974 100644 --- a/apps/web/pages/video/meeting-ended/[uid].tsx +++ b/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) { const router = useRouter(); diff --git a/apps/web/pages/video/meeting-not-started/[uid].tsx b/apps/web/pages/video/meeting-not-started/[uid].tsx index 7e5268ffa7..c3ad568652 100644 --- a/apps/web/pages/video/meeting-not-started/[uid].tsx +++ b/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) { const router = useRouter(); diff --git a/apps/web/pages/video/no-meeting-found.tsx b/apps/web/pages/video/no-meeting-found.tsx index c5a799f8d6..c7685cecef 100644 --- a/apps/web/pages/video/no-meeting-found.tsx +++ b/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(); diff --git a/apps/web/server/routers/viewer/webhook.tsx b/apps/web/server/routers/viewer/webhook.tsx index e69fee1a72..8386d8540a 100644 --- a/apps/web/server/routers/viewer/webhook.tsx +++ b/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"; diff --git a/apps/web/lib/errors.ts b/packages/lib/errors.ts similarity index 100% rename from apps/web/lib/errors.ts rename to packages/lib/errors.ts diff --git a/packages/lib/hooks/useLocale.ts b/packages/lib/hooks/useLocale.ts new file mode 100644 index 0000000000..2fae0c7b8d --- /dev/null +++ b/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, + }; +}; diff --git a/apps/web/lib/notification.ts b/packages/lib/notification.ts similarity index 100% rename from apps/web/lib/notification.ts rename to packages/lib/notification.ts diff --git a/packages/lib/package.json b/packages/lib/package.json index 8842647906..4df17b6af8 100644 --- a/packages/lib/package.json +++ b/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": "*", diff --git a/apps/web/components/ui/Alert.tsx b/packages/ui/Alert.tsx similarity index 100% rename from apps/web/components/ui/Alert.tsx rename to packages/ui/Alert.tsx diff --git a/apps/web/components/Dialog.tsx b/packages/ui/Dialog.tsx similarity index 100% rename from apps/web/components/Dialog.tsx rename to packages/ui/Dialog.tsx diff --git a/apps/web/components/form/fields.tsx b/packages/ui/form/fields.tsx similarity index 96% rename from apps/web/components/form/fields.tsx rename to packages/ui/form/fields.tsx index 2992ba5a33..44dcb7dd32 100644 --- a/apps/web/components/form/fields.tsx +++ b/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 & { name: string }; diff --git a/packages/ui/package.json b/packages/ui/package.json index a0f2ab17c8..e0ada51b68 100644 --- a/packages/ui/package.json +++ b/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": "*",