maronato/cal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

🧹 One `calcom/ui` import to rule them all (#5561) 

* Removed emptyscreen component v1 version, migrated pages that still used it to v2, and removed v1 of workflow pages and components.

* updated workflow pages imports to remove v2 from path.

* Deleted v1 switch component, deleted v1 api-keys components, deleted old web integrations components that were unused.

* Removed v1 list component.

* Fixed event workflows tab path.

* Fixed import path for button in sandbox page.

* Cleanup and type fixes

* Making explicit indexes

* UI import migrations

* More import fixes

* More import fixes

* Submodule sync

* Type fixes

* Build fixes

Co-authored-by: zomars <zomars@me.com>
This commit is contained in:
Jeroen Reumkens 2022-11-23 03:55:25 +01:00 committed by GitHub
parent a36b46bd81
commit ccc2bdd25e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
325 changed files with 2152 additions and 5271 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.vscode/settings.json vendored
View File

@ -7,7 +7,5 @@
"typescript.preferences.importModuleSpecifier": "non-relative",
"spellright.language": ["en"],
"spellright.documentTypes": ["markdown", "typescript"],
"tailwindCSS.experimental.classRegex": [
["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
]
"tailwindCSS.experimental.classRegex": [["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]]
}

2
apps/console

@ -1 +1 @@
Subproject commit 7d53a77c07ab2b2f0fd0567b4d8ee4905d448442
Subproject commit 6aa7cb2bbdd4586533269a1a45cae42ba4be57c1

2
apps/web/components/AddToHomescreen.tsx
View File

@ -1,7 +1,7 @@
import { useState } from "react";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Icon } from "@calcom/ui/Icon";
import { Icon } from "@calcom/ui";
export default function AddToHomescreen() {
const { t } = useLocale();

19
apps/web/components/Embed.tsx
View File

@ -5,11 +5,20 @@ import { createRef, forwardRef, MutableRefObject, RefObject, useRef, useState }
import { components, ControlProps } from "react-select";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Icon } from "@calcom/ui/Icon";
import { Button } from "@calcom/ui/components";
import { InputLeading, Label, TextArea, TextField } from "@calcom/ui/form/fields";
import { HorizontalTabs, showToast, Switch } from "@calcom/ui/v2";
import { Dialog, DialogClose, DialogContent } from "@calcom/ui/v2/core/Dialog";
import {
Button,
Dialog,
DialogClose,
DialogContent,
HorizontalTabs,
Icon,
InputLeading,
Label,
showToast,
Switch,
TextArea,
TextField,
} from "@calcom/ui";
import { EMBED_LIB_URL, WEBAPP_URL } from "@lib/config/constants";

3
apps/web/components/ImageUploader.tsx
View File

@ -1,8 +1,7 @@
import { FormEvent, useCallback, useEffect, useState } from "react";
import Cropper from "react-easy-crop";
import Button from "@calcom/ui/Button";
import { Dialog, DialogClose, DialogContent, DialogTrigger } from "@calcom/ui/Dialog";
import { Button, Dialog, DialogClose, DialogContent, DialogTrigger } from "@calcom/ui";
import { Area, getCroppedImg } from "@lib/cropImage";
import { useFileReader } from "@lib/hooks/useFileReader";

2
apps/web/components/Loader.tsx
View File

@ -1,4 +1,4 @@
/**
* @deprecated Use custom Skeletons instead
**/
export { default } from "@calcom/ui/Loader";
export { Loader as default } from "@calcom/ui";

4
apps/web/components/SettingsShell.tsx
View File

@ -1,8 +1,6 @@
import React, { ComponentProps } from "react";
import ErrorBoundary from "@calcom/ui/ErrorBoundary";
import { Icon } from "@calcom/ui/Icon";
import Shell from "@calcom/ui/Shell";
import { ErrorBoundary, Icon, Shell } from "@calcom/ui";
import NavTabs from "./NavTabs";

5
apps/web/components/apps/AdditionalCalendarSelector.tsx
View File

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

16
apps/web/components/apps/App.tsx
View File

@ -9,11 +9,15 @@ import classNames from "@calcom/lib/classNames";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
import { App as AppType } from "@calcom/types/App";
import { Icon } from "@calcom/ui/Icon";
import { Button } from "@calcom/ui/components";
import { showToast, SkeletonText } from "@calcom/ui/v2";
import { SkeletonButton, Shell } from "@calcom/ui/v2";
import DisconnectIntegration from "@calcom/ui/v2/modules/integrations/DisconnectIntegration";
import {
Button,
DisconnectIntegration,
Icon,
Shell,
showToast,
SkeletonButton,
SkeletonText,
} from "@calcom/ui";
import HeadSeo from "@components/seo/head-seo";
@ -123,6 +127,7 @@ const Component = ({
render={({ useDefaultComponent, ...props }) => {
if (useDefaultComponent) {
props = {
...props,
onClick: () => {
mutation.mutate({ type, variant, slug });
},
@ -161,6 +166,7 @@ const Component = ({
render={({ useDefaultComponent, ...props }) => {
if (useDefaultComponent) {
props = {
...props,
onClick: () => {
mutation.mutate({ type, variant, slug });
},

21
apps/web/components/apps/CalendarListContainer.tsx
View File

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

4
apps/web/components/apps/IntegrationListItem.tsx
View File

@ -3,9 +3,7 @@ import { useRouter } from "next/router";
import { ReactNode, useEffect, useState } from "react";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Icon } from "@calcom/ui";
import { showToast } from "@calcom/ui/v2";
import { ListItem, ListItemText, ListItemTitle } from "@calcom/ui/v2/core/List";
import { Icon, ListItem, ListItemText, ListItemTitle, showToast } from "@calcom/ui";
import classNames from "@lib/classNames";

5
apps/web/components/apps/OmniInstallAppButton.tsx
View File

@ -4,9 +4,7 @@ import { classNames } from "@calcom/lib";
import useApp from "@calcom/lib/hooks/useApp";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
import { Icon } from "@calcom/ui/Icon";
import { Button } from "@calcom/ui/components/button";
import { showToast } from "@calcom/ui/v2";
import { Button, Icon, showToast } from "@calcom/ui";
/**
* Use this component to allow installing an app from anywhere on the app.
@ -42,6 +40,7 @@ export default function OmniInstallAppButton({ appId, className }: { appId: stri
render={({ useDefaultComponent, ...props }) => {
if (useDefaultComponent) {
props = {
...props,
onClick: () => {
mutation.mutate({ type: app.type, variant: app.variant, slug: app.slug, isOmniInstall: true });
},

2
apps/web/components/auth/TwoFactor.tsx
View File

@ -3,7 +3,7 @@ import useDigitInput from "react-digit-input";
import { useFormContext } from "react-hook-form";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Label, Input } from "@calcom/ui/form/fields";
import { Label, Input } from "@calcom/ui";
export default function TwoFactor({ center = true }) {
const [value, onChange] = useState("");

2
apps/web/components/availability/SkeletonLoader.tsx
View File

@ -1,6 +1,6 @@
import React from "react";
import { SkeletonText } from "@calcom/ui/v2";
import { SkeletonText } from "@calcom/ui";
import classNames from "@lib/classNames";

3
apps/web/components/booking/AvailableEventLocations.tsx
View File

@ -1,7 +1,6 @@
import { getEventLocationType, locationKeyToString } from "@calcom/app-store/locations";
import { classNames } from "@calcom/lib";
import { Icon } from "@calcom/ui";
import Tooltip from "@calcom/ui/v2/core/Tooltip";
import { Icon, Tooltip } from "@calcom/ui";
import { Props } from "./pages/AvailabilityPage";

3
apps/web/components/booking/AvailableTimes.tsx
View File

@ -7,8 +7,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
import { TimeFormat } from "@calcom/lib/timeFormat";
import { nameOfDay } from "@calcom/lib/weekday";
import type { Slot } from "@calcom/trpc/server/routers/viewer/slots";
import { SkeletonContainer, SkeletonText } from "@calcom/ui/v2";
import { ToggleGroup } from "@calcom/ui/v2/core/form/ToggleGroup";
import { SkeletonContainer, SkeletonText, ToggleGroup } from "@calcom/ui";
import classNames from "@lib/classNames";
import { timeZone } from "@lib/clock";

2
apps/web/components/booking/BookingDescription.tsx
View File

@ -3,7 +3,7 @@ import { FC, ReactNode } from "react";
import { classNames } from "@calcom/lib";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Icon } from "@calcom/ui/Icon";
import { Icon } from "@calcom/ui";
import { UserAvatars } from "@components/booking/UserAvatars";
import EventTypeDescriptionSafeHTML from "@components/eventtype/EventTypeDescriptionSafeHTML";

24
apps/web/components/booking/BookingListItem.tsx
View File

@ -1,6 +1,6 @@
import { BookingStatus } from "@prisma/client";
import { useRouter } from "next/router";
import { useState, useMemo } from "react";
import { useState } from "react";
import { EventLocationType, getEventLocationType } from "@calcom/app-store/locations";
import dayjs from "@calcom/dayjs";
@ -9,14 +9,20 @@ import { formatTime } from "@calcom/lib/date-fns";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { getEveryFreqFor } from "@calcom/lib/recurringStrings";
import { RouterInputs, RouterOutputs, trpc } from "@calcom/trpc/react";
import { Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/Dialog";
import { Icon } from "@calcom/ui/Icon";
import { Badge } from "@calcom/ui/components/badge";
import { Button } from "@calcom/ui/components/button";
import { TextArea } from "@calcom/ui/form/fields";
import MeetingTimeInTimezones from "@calcom/ui/v2/core/MeetingTimeInTimezones";
import Tooltip from "@calcom/ui/v2/core/Tooltip";
import showToast from "@calcom/ui/v2/core/notifications";
import {
Badge,
Button,
Dialog,
DialogClose,
DialogContent,
DialogFooter,
DialogHeader,
Icon,
MeetingTimeInTimezones,
showToast,
TextArea,
Tooltip,
} from "@calcom/ui";
import useMeQuery from "@lib/hooks/useMeQuery";

3
apps/web/components/booking/CancelBooking.tsx
View File

@ -5,8 +5,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
import useTheme from "@calcom/lib/hooks/useTheme";
import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
import type { RecurringEvent } from "@calcom/types/Calendar";
import { Icon } from "@calcom/ui/Icon";
import { Button, TextArea } from "@calcom/ui/components";
import { Button, Icon, TextArea } from "@calcom/ui";
type Props = {
booking: {

2
apps/web/components/booking/SkeletonLoader.tsx
View File

@ -1,6 +1,6 @@
import React from "react";
import { SkeletonText } from "@calcom/ui/v2";
import { SkeletonText } from "@calcom/ui";
function SkeletonLoader() {
return (

2
apps/web/components/booking/TimeOptions.tsx
View File

@ -1,7 +1,7 @@
import { FC, useEffect, useState } from "react";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import TimezoneSelect, { ITimezoneOption } from "@calcom/ui/v2/core/TimezoneSelect";
import { ITimezoneOption, TimezoneSelect } from "@calcom/ui";
import { timeZone } from "../../lib/clock";

3
apps/web/components/booking/pages/AvailabilityPage.tsx
View File

@ -28,8 +28,7 @@ import { getRecurringFreq } from "@calcom/lib/recurringStrings";
import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
import { detectBrowserTimeFormat, setIs24hClockInLocalStorage, TimeFormat } from "@calcom/lib/timeFormat";
import { trpc } from "@calcom/trpc/react";
import { Icon } from "@calcom/ui/Icon";
import DatePicker from "@calcom/ui/v2/modules/booker/DatePicker";
import { Icon, DatePicker } from "@calcom/ui";
import { timeZone as localStorageTimeZone } from "@lib/clock";
// import { timeZone } from "@lib/clock";

15
apps/web/components/booking/pages/BookingPage.tsx
View File

@ -5,7 +5,7 @@ import { isValidPhoneNumber } from "libphonenumber-js";
import { useSession } from "next-auth/react";
import Head from "next/head";
import { useRouter } from "next/router";
import { useEffect, useMemo, useState, useReducer } from "react";
import { useEffect, useMemo, useReducer, useState } from "react";
import { Controller, useForm, useWatch } from "react-hook-form";
import { FormattedNumber, IntlProvider } from "react-intl";
import { ReactMultiEmail } from "react-multi-email";
@ -14,11 +14,11 @@ import { z } from "zod";
import BookingPageTagManager from "@calcom/app-store/BookingPageTagManager";
import {
locationKeyToString,
getEventLocationValue,
getEventLocationType,
EventLocationType,
getEventLocationType,
getEventLocationValue,
getHumanReadableLocationValue,
locationKeyToString,
} from "@calcom/app-store/locations";
import { createPaymentLink } from "@calcom/app-store/stripepayment/lib/client";
import { getEventTypeAppData } from "@calcom/app-store/utils";
@ -37,12 +37,7 @@ import useTheme from "@calcom/lib/hooks/useTheme";
import { HttpError } from "@calcom/lib/http-error";
import { getEveryFreqFor } from "@calcom/lib/recurringStrings";
import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
import { Icon } from "@calcom/ui/Icon";
import { Tooltip } from "@calcom/ui/Tooltip";
import { Button } from "@calcom/ui/components";
import AddressInput from "@calcom/ui/form/AddressInputLazy";
import PhoneInput from "@calcom/ui/form/PhoneInputLazy";
import { EmailInput, Form } from "@calcom/ui/form/fields";
import { AddressInput, Button, EmailInput, Form, Icon, PhoneInput, Tooltip } from "@calcom/ui";
import { asStringOrNull } from "@lib/asStringOrNull";
import { timeZone } from "@lib/clock";

74
apps/web/components/dialog/DeleteStripeDialogContent.tsx
View File

@ -1,74 +0,0 @@
import * as DialogPrimitive from "@radix-ui/react-dialog";
import React, { PropsWithChildren } from "react";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Button } from "@calcom/ui/Button";
import { DialogClose, DialogContent } from "@calcom/ui/Dialog";
import { Icon } from "@calcom/ui/Icon";
export type DeleteStripeDialogContentProps = {
cancelAllBookingsBtnText?: string;
removeBtnText?: string;
cancelBtnText?: string;
onConfirm?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
onRemove?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
title: string;
variety?: "danger" | "warning" | "success";
};
export default function DeleteStripeDialogContent(props: PropsWithChildren<DeleteStripeDialogContentProps>) {
const { t } = useLocale();
const {
title,
variety,
cancelAllBookingsBtnText,
removeBtnText,
cancelBtnText = t("cancel"),
onConfirm,
onRemove,
children,
} = props;
return (
<DialogContent>
<div className="flex">
{variety && (
<div className="mt-0.5 ltr:mr-3">
{variety === "danger" && (
<div className="mx-auto rounded-full bg-red-100 p-2 text-center">
<Icon.FiAlertTriangle className="h-5 w-5 text-red-600" />
</div>
)}
{variety === "warning" && (
<div className="mx-auto rounded-full bg-orange-100 p-2 text-center">
<Icon.FiAlertTriangle className="h-5 w-5 text-orange-600" />
</div>
)}
{variety === "success" && (
<div className="mx-auto rounded-full bg-green-100 p-2 text-center">
<Icon.FiCheck className="h-5 w-5 text-green-600" />
</div>
)}
</div>
)}
<div>
<DialogPrimitive.Title className="font-cal text-xl text-gray-900">{title}</DialogPrimitive.Title>
<DialogPrimitive.Description className="text-sm text-neutral-500">
{children}
</DialogPrimitive.Description>
</div>
</div>
<div className="mt-5 flex flex-row-reverse gap-x-2 sm:mt-8">
<DialogClose onClick={onConfirm} asChild>
<Button color="alert">{cancelAllBookingsBtnText}</Button>
</DialogClose>
<DialogClose onClick={onRemove} asChild>
<Button color="alert2">{removeBtnText}</Button>
</DialogClose>
<DialogClose asChild>
<Button color="secondary">{cancelBtnText}</Button>
</DialogClose>
</div>
</DialogContent>
);
}

14
apps/web/components/dialog/EditLocationDialog.tsx
View File

@ -6,20 +6,16 @@ import { Controller, useForm, useWatch } from "react-hook-form";
import { z } from "zod";
import {
LocationType,
getEventLocationType,
EventLocationType,
getEventLocationType,
getHumanReadableLocationValue,
getMessageForOrganizer,
LocationObject,
LocationType,
} from "@calcom/app-store/locations";
import { getMessageForOrganizer } from "@calcom/app-store/locations";
import { getHumanReadableLocationValue } from "@calcom/app-store/locations";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { RouterOutputs, trpc } from "@calcom/trpc/react";
import { Button } from "@calcom/ui";
import { Dialog, DialogContent } from "@calcom/ui/Dialog";
import { Icon } from "@calcom/ui/Icon";
import PhoneInput from "@calcom/ui/form/PhoneInputLazy";
import { Form } from "@calcom/ui/form/fields";
import { Button, Dialog, DialogContent, Form, Icon, PhoneInput } from "@calcom/ui";
import { QueryCell } from "@lib/QueryCell";

18
apps/web/components/dialog/RescheduleDialog.tsx
View File

@ -1,12 +1,18 @@
import React, { useState, Dispatch, SetStateAction } from "react";
import { Dispatch, SetStateAction, useState } from "react";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
import { Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/Dialog";
import { Icon } from "@calcom/ui/Icon";
import { Button } from "@calcom/ui/components/button";
import { TextArea } from "@calcom/ui/form/fields";
import showToast from "@calcom/ui/v2/core/notifications";
import {
Button,
Dialog,
DialogClose,
DialogContent,
DialogFooter,
DialogHeader,
Icon,
showToast,
TextArea,
} from "@calcom/ui";
interface IRescheduleDialog {
isOpenDialog: boolean;

9
apps/web/components/eventtype/AvailabilityTab.tsx
View File

@ -1,6 +1,6 @@
import { FormValues } from "pages/event-types/[type]";
import { Controller, useFormContext } from "react-hook-form";
import { SingleValueProps, OptionProps, components } from "react-select";
import { components, OptionProps, SingleValueProps } from "react-select";
import dayjs from "@calcom/dayjs";
import classNames from "@calcom/lib/classNames";
@ -8,12 +8,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
import { weekdayNames } from "@calcom/lib/weekday";
import { trpc } from "@calcom/trpc/react";
import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
import { Icon } from "@calcom/ui";
import { Badge } from "@calcom/ui/components/badge";
import { Button } from "@calcom/ui/components/button";
import { SettingsToggle } from "@calcom/ui/v2";
import Select from "@calcom/ui/v2/core/form/select";
import { SkeletonText } from "@calcom/ui/v2/core/skeleton";
import { Badge, Button, Icon, Select, SettingsToggle, SkeletonText } from "@calcom/ui";
import { SelectSkeletonLoader } from "@components/availability/SkeletonLoader";

22
apps/web/components/eventtype/CreateEventType.tsx
View File

@ -11,19 +11,25 @@ import { WEBAPP_URL } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { createEventTypeInput } from "@calcom/prisma/zod/custom/eventtype";
import { trpc } from "@calcom/trpc/react";
import { Alert } from "@calcom/ui/Alert";
import { Button } from "@calcom/ui/Button";
import { Dialog, DialogClose, DialogContent } from "@calcom/ui/Dialog";
import Dropdown, {
import {
Alert,
Button,
Dialog,
DialogClose,
DialogContent,
Dropdown,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@calcom/ui/Dropdown";
import { Icon } from "@calcom/ui/Icon";
import { Form, InputLeading, TextAreaField, TextField } from "@calcom/ui/form/fields";
import showToast from "@calcom/ui/v2/core/notifications";
Form,
Icon,
InputLeading,
showToast,
TextAreaField,
TextField,
} from "@calcom/ui";
import { HttpError } from "@lib/core/http/error";
import { slugify } from "@lib/slugify";

6
apps/web/components/eventtype/CustomInputTypeForm.tsx
View File

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

11
apps/web/components/eventtype/EditLocationDialog.tsx
View File

@ -7,21 +7,16 @@ import { Controller, useForm, useWatch } from "react-hook-form";
import { z } from "zod";
import {
LocationType,
getEventLocationType,
EventLocationType,
getEventLocationType,
getHumanReadableLocationValue,
getMessageForOrganizer,
LocationObject,
LocationType,
} from "@calcom/app-store/locations";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { RouterOutputs, trpc } from "@calcom/trpc/react";
import { Icon } from "@calcom/ui/Icon";
import { Button } from "@calcom/ui/components";
import { Label, Form } from "@calcom/ui/components/form";
import PhoneInput from "@calcom/ui/form/PhoneInputLazy";
import { Dialog, DialogContent } from "@calcom/ui/v2";
import { Select } from "@calcom/ui/v2/";
import { Button, Dialog, DialogContent, Form, Icon, Label, PhoneInput, Select } from "@calcom/ui";
import { QueryCell } from "@lib/QueryCell";

16
apps/web/components/eventtype/EventAdvancedTab.tsx
View File

@ -10,9 +10,19 @@ import DestinationCalendarSelector from "@calcom/features/calendars/DestinationC
import { CAL_URL } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
import { Icon } from "@calcom/ui";
import { Checkbox, Button, TextField, Label } from "@calcom/ui/components";
import { CustomInputItem, Dialog, DialogContent, SettingsToggle, showToast, Tooltip } from "@calcom/ui/v2";
import {
Button,
Checkbox,
CustomInputItem,
Dialog,
DialogContent,
Icon,
Label,
SettingsToggle,
showToast,
TextField,
Tooltip,
} from "@calcom/ui";
import CustomInputTypeForm from "@components/eventtype/CustomInputTypeForm";

6
apps/web/components/eventtype/EventAppsTab.tsx
View File

@ -1,5 +1,4 @@
import { EventTypeSetupInfered, FormValues } from "pages/event-types/[type]";
import React from "react";
import { useFormContext } from "react-hook-form";
import EventTypeAppContext, { GetAppData, SetAppData } from "@calcom/app-store/EventTypeAppContext";
@ -8,10 +7,7 @@ import { EventTypeAppCardComponentProps } from "@calcom/app-store/types";
import { EventTypeAppsList } from "@calcom/app-store/utils";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { RouterOutputs, trpc } from "@calcom/trpc/react";
import { Icon } from "@calcom/ui";
import ErrorBoundary from "@calcom/ui/ErrorBoundary";
import { Button } from "@calcom/ui/components";
import { EmptyScreen } from "@calcom/ui/v2";
import { Button, EmptyScreen, ErrorBoundary, Icon } from "@calcom/ui";
type EventType = Pick<EventTypeSetupInfered, "eventType">["eventType"] &
EventTypeAppCardComponentProps["eventType"];

6
apps/web/components/eventtype/EventLimitsTab.tsx
View File

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

7
apps/web/components/eventtype/EventSetupTab.tsx
View File

@ -6,13 +6,10 @@ import { useState } from "react";
import { Controller, useForm, useFormContext } from "react-hook-form";
import { z } from "zod";
import { getEventLocationType, EventLocationType } from "@calcom/app-store/locations";
import { EventLocationType, getEventLocationType } from "@calcom/app-store/locations";
import { CAL_URL } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Icon } from "@calcom/ui/Icon";
import { Button } from "@calcom/ui/components";
import { Label, TextField } from "@calcom/ui/components/form";
import { Select, Skeleton } from "@calcom/ui/v2";
import { Button, Icon, Label, Select, Skeleton, TextField } from "@calcom/ui";
import { slugify } from "@lib/slugify";

5
apps/web/components/eventtype/EventTeamTab.tsx
View File

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

29
apps/web/components/eventtype/EventTypeSingleLayout.tsx
View File

@ -10,20 +10,27 @@ import { CAL_URL } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { HttpError } from "@calcom/lib/http-error";
import { trpc, TRPCClientError } from "@calcom/trpc/react";
import { Icon } from "@calcom/ui/Icon";
import { Button, ButtonGroup, Label } from "@calcom/ui/components";
import { HorizontalTabs, showToast, Switch, Tooltip, VerticalTabs } from "@calcom/ui/v2";
import ConfirmationDialogContent from "@calcom/ui/v2/core/ConfirmationDialogContent";
import { Dialog } from "@calcom/ui/v2/core/Dialog";
import Divider from "@calcom/ui/v2/core/Divider";
import Dropdown, {
import {
Button,
ButtonGroup,
ConfirmationDialogContent,
Dialog,
Divider,
Dropdown,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@calcom/ui/v2/core/Dropdown";
import Shell from "@calcom/ui/v2/core/Shell";
import VerticalDivider from "@calcom/ui/v2/core/VerticalDivider";
import { Skeleton } from "@calcom/ui/v2/core/skeleton";
HorizontalTabs,
Icon,
Label,
Shell,
showToast,
Skeleton,
Switch,
Tooltip,
VerticalDivider,
VerticalTabs,
} from "@calcom/ui";
import { ClientSuspense } from "@components/ClientSuspense";
import { EmbedButton, EmbedDialog } from "@components/Embed";

2
apps/web/components/eventtype/EventWorkfowsTab.tsx
View File

@ -1 +1 @@
export { default } from "@calcom/features/ee/workflows/components/v2/EventWorkflowsTab";
export { default } from "@calcom/features/ee/workflows/components/EventWorkflowsTab";

3
apps/web/components/eventtype/RecurringEventController.tsx
View File

@ -5,8 +5,7 @@ import { useFormContext } from "react-hook-form";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Frequency } from "@calcom/prisma/zod-utils";
import type { RecurringEvent } from "@calcom/types/Calendar";
import { Alert } from "@calcom/ui/Alert";
import { Select, SettingsToggle } from "@calcom/ui/v2";
import { Alert, Select, SettingsToggle } from "@calcom/ui";
type RecurringEventControllerProps = {
recurringEvent: RecurringEvent | null;

3
apps/web/components/eventtype/SkeletonLoader.tsx
View File

@ -1,5 +1,4 @@
import { Icon } from "@calcom/ui/Icon";
import { SkeletonAvatar, SkeletonContainer, SkeletonText } from "@calcom/ui/v2";
import { Icon, SkeletonAvatar, SkeletonContainer, SkeletonText } from "@calcom/ui";
function SkeletonLoader() {
return (

2
apps/web/components/getting-started/components/CalendarItem.tsx
View File

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

3
apps/web/components/getting-started/components/CalendarSwitch.tsx
View File

@ -1,8 +1,7 @@
import { useMutation } from "@tanstack/react-query";
import { trpc } from "@calcom/trpc/react";
import { Switch } from "@calcom/ui/v2";
import showToast from "@calcom/ui/v2/core/notifications";
import { showToast, Switch } from "@calcom/ui";
import classNames from "@lib/classNames";

3
apps/web/components/getting-started/steps-views/ConnectCalendars.tsx
View File

@ -3,8 +3,7 @@ import { ArrowRightIcon } from "@heroicons/react/solid";
import classNames from "@calcom/lib/classNames";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
import { List } from "@calcom/ui/List";
import { SkeletonAvatar, SkeletonText, SkeletonButton } from "@calcom/ui/v2";
import { SkeletonAvatar, SkeletonText, SkeletonButton, List } from "@calcom/ui";
import { CalendarItem } from "../components/CalendarItem";
import { ConnectedCalendarItem } from "../components/ConnectedCalendarItem";

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

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

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

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

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

@ -1,13 +1,12 @@
import { ArrowRightIcon } from "@heroicons/react/outline";
import { useRef, useState } from "react";
import { useState } from "react";
import { Controller, useForm } from "react-hook-form";
import dayjs from "@calcom/dayjs";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { User } from "@calcom/prisma/client";
import { trpc } from "@calcom/trpc/react";
import { Button } from "@calcom/ui/components/button";
import TimezoneSelect from "@calcom/ui/form/TimezoneSelect";
import { Button, TimezoneSelect } from "@calcom/ui";
import { UsernameAvailability } from "@components/ui/UsernameAvailability";

293
apps/web/components/integrations/CalendarListContainer.tsx
View File

@ -1,293 +0,0 @@
import { useMutation } from "@tanstack/react-query";
import { Fragment } from "react";
import { InstallAppButton } from "@calcom/app-store/components";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { RouterOutputs, trpc } from "@calcom/trpc/react";
import { Alert } from "@calcom/ui/Alert";
import { List } from "@calcom/ui/List";
import { ShellSubHeading } from "@calcom/ui/Shell";
import Switch from "@calcom/ui/Switch";
import SkeletonLoader from "@calcom/ui/apps/SkeletonLoader";
import { Button } from "@calcom/ui/components/button";
import showToast from "@calcom/ui/v2/core/notifications";
import { QueryCell } from "@lib/QueryCell";
import AdditionalCalendarSelector from "@components/AdditionalCalendarSelector";
import DestinationCalendarSelector from "@components/DestinationCalendarSelector";
import DisconnectIntegration from "./DisconnectIntegration";
import IntegrationListItem from "./IntegrationListItem";
import SubHeadingTitleWithConnections from "./SubHeadingTitleWithConnections";
type Props = {
onChanged: () => unknown | Promise<unknown>;
fromOnboarding?: boolean;
};
function CalendarSwitch(props: {
type: string;
externalId: string;
title: string;
defaultSelected: boolean;
}) {
const utils = trpc.useContext();
const mutation = useMutation<
unknown,
unknown,
{
isOn: boolean;
}
>(
async ({ isOn }) => {
const body = {
integration: props.type,
externalId: props.externalId,
};
if (isOn) {
const res = await fetch("/api/availability/calendar", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(body),
});
if (!res.ok) {
throw new Error("Something went wrong");
}
} else {
const res = await fetch("/api/availability/calendar", {
method: "DELETE",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(body),
});
if (!res.ok) {
throw new Error("Something went wrong");
}
}
},
{
async onSettled() {
await utils.viewer.integrations.invalidate();
},
onError() {
showToast(`Something went wrong when toggling "${props.title}""`, "error");
},
}
);
return (
<div className="py-1">
<Switch
key={props.externalId}
name="enabled"
label={props.title}
defaultChecked={props.defaultSelected}
onCheckedChange={(isOn: boolean) => {
mutation.mutate({ isOn });
}}
/>
</div>
);
}
function CalendarList(props: Props) {
const { t } = useLocale();
const query = trpc.viewer.integrations.useQuery({ variant: "calendar", onlyInstalled: false });
return (
<QueryCell
query={query}
success={({ data }) => (
<List>
{data.items.map((item) => (
<IntegrationListItem
name={item.name}
slug={item.slug}
key={item.title}
title={item.title}
logo={item.logo}
description={item.description}
actions={
<InstallAppButton
type={item.type}
render={(buttonProps) => (
<Button color="secondary" {...buttonProps}>
{t("connect")}
</Button>
)}
onChanged={() => props.onChanged()}
/>
}
/>
))}
</List>
)}
/>
);
}
function ConnectedCalendarsList(props: Props) {
const { t } = useLocale();
const query = trpc.viewer.connectedCalendars.useQuery(undefined, {
suspense: true,
trpc: {},
});
const { fromOnboarding } = props;
return (
<QueryCell
query={query}
empty={() => null}
success={({ data }) => {
if (!data.connectedCalendars.length) {
return null;
}
return (
<List>
{data.connectedCalendars.map((item) => (
<Fragment key={item.credentialId}>
{item.calendars ? (
<IntegrationListItem
slug={item.integration.slug}
title={item.integration.title}
logo={item.integration.logo}
description={item.primary?.externalId || "No external Id"}
actions={
<DisconnectIntegration
id={item.credentialId}
externalId={item.primary?.externalId}
render={(btnProps) => (
<Button {...btnProps} color="secondary" data-testid="integration-connection-button">
{t("disconnect")}
</Button>
)}
onOpenChange={props.onChanged}
/>
}>
{!fromOnboarding && (
<>
<p className="px-4 pt-4 text-sm text-neutral-500">{t("toggle_calendars_conflict")}</p>
<ul className="space-y-2 p-4">
{item.calendars.map((cal) => (
<CalendarSwitch
key={cal.externalId}
externalId={cal.externalId}
title={cal.name || "Nameless calendar"}
type={item.integration.type}
defaultSelected={cal.isSelected}
/>
))}
</ul>
</>
)}
</IntegrationListItem>
) : (
<Alert
severity="warning"
title={t("something_went_wrong")}
message={t("calendar_error")}
actions={
<DisconnectIntegration
id={item.credentialId}
render={(btnProps) => (
<Button {...btnProps} color="secondary" data-testid="integration-connection-button">
Disconnect
</Button>
)}
onOpenChange={() => props.onChanged()}
/>
}
/>
)}
</Fragment>
))}
</List>
);
}}
/>
);
}
export function CalendarListContainer(props: {
heading?: boolean;
items?: RouterOutputs["viewer"]["integrations"]["items"];
fromOnboarding?: boolean;
}) {
const { t } = useLocale();
const { heading = true, fromOnboarding } = props;
const utils = trpc.useContext();
const onChanged = () =>
Promise.allSettled([
utils.viewer.integrations.invalidate(
{ variant: "calendar", onlyInstalled: true },
{
exact: true,
}
),
utils.viewer.connectedCalendars.invalidate(),
]);
const query = trpc.viewer.connectedCalendars.useQuery();
const installedCalendars = trpc.viewer.integrations.useQuery({ variant: "calendar", onlyInstalled: true });
const mutation = trpc.viewer.setDestinationCalendar.useMutation();
return (
<QueryCell
query={query}
customLoader={<SkeletonLoader className="mt-10" />}
success={({ data }) => {
return (
<>
{(!!data.connectedCalendars.length || !!installedCalendars.data?.items.length) && (
<>
{heading && (
<ShellSubHeading
className="mt-10 mb-0"
title={
<SubHeadingTitleWithConnections
title="Calendars"
numConnections={data.connectedCalendars.length}
/>
}
subtitle={t("configure_how_your_event_types_interact")}
actions={
<div className="flex flex-col xl:flex-row xl:space-x-5">
<div className="sm:min-w-80 block max-w-full">
<DestinationCalendarSelector
onChange={mutation.mutate}
isLoading={mutation.isLoading}
value={data.destinationCalendar?.externalId}
/>
</div>
{!!data.connectedCalendars.length && (
<div className="sm:min-w-80 inline max-w-full">
<AdditionalCalendarSelector isLoading={mutation.isLoading} />
</div>
)}
</div>
}
/>
)}
<ConnectedCalendarsList onChanged={onChanged} fromOnboarding={fromOnboarding} />
</>
)}
{fromOnboarding && (
<>
{!!query.data?.connectedCalendars.length && (
<ShellSubHeading
className="mt-4"
title={<SubHeadingTitleWithConnections title={t("connect_additional_calendar")} />}
/>
)}
<CalendarList onChanged={onChanged} />
</>
)}
</>
);
}}
/>
);
}

57
apps/web/components/integrations/DisconnectIntegration.tsx
View File

@ -1,57 +0,0 @@
import { useState } from "react";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
import ConfirmationDialogContent from "@calcom/ui/ConfirmationDialogContent";
import { Dialog } from "@calcom/ui/Dialog";
import { ButtonProps } from "@calcom/ui/components/button";
import showToast from "@calcom/ui/v2/core/notifications";
export default function DisconnectIntegration(props: {
/** Integration credential id */
id: number;
externalId?: string;
render: (renderProps: ButtonProps) => JSX.Element;
onOpenChange: (isOpen: boolean) => unknown | Promise<unknown>;
}) {
const { id, externalId = "" } = props;
const { t } = useLocale();
const [modalOpen, setModalOpen] = useState(false);
const mutation = trpc.viewer.deleteCredential.useMutation({
onSettled: async () => {
await props.onOpenChange(modalOpen);
},
onSuccess: () => {
showToast("Integration deleted successfully", "success");
setModalOpen(false);
},
onError: () => {
throw new Error("Something went wrong");
},
});
return (
<>
<Dialog open={modalOpen} onOpenChange={setModalOpen}>
<ConfirmationDialogContent
variety="danger"
title={t("remove_app")}
confirmBtnText={t("yes_remove_app")}
cancelBtnText="Cancel"
onConfirm={() => {
mutation.mutate({ id, externalId });
}}>
{t("are_you_sure_you_want_to_remove_this_app")}
</ConfirmationDialogContent>
</Dialog>
{props.render({
onClick() {
setModalOpen(true);
},
disabled: modalOpen,
loading: mutation.isLoading,
})}
</>
);
}

39
apps/web/components/integrations/IntegrationListItem.tsx
View File

@ -1,39 +0,0 @@
import Link from "next/link";
import { ReactNode } from "react";
import { ListItem, ListItemText, ListItemTitle } from "@calcom/ui/List";
import classNames from "@lib/classNames";
function IntegrationListItem(props: {
imageSrc?: string;
slug: string;
name?: string;
title?: string;
description: string;
actions?: ReactNode;
children?: ReactNode;
logo: string;
}): JSX.Element {
const title = props.name || props.title;
return (
<ListItem expanded={!!props.children} className={classNames("flex-col")}>
<div className={classNames("flex w-full flex-1 items-center space-x-2 p-3 rtl:space-x-reverse")}>
{
// eslint-disable-next-line @next/next/no-img-element
props.logo && <img className="h-10 w-10" src={props.logo} alt={title} />
}
<div className="flex-grow truncate pl-2">
<ListItemTitle component="h3">
<Link href={"/apps/" + props.slug}>{props.name || title}</Link>
</ListItemTitle>
<ListItemText component="p">{props.description}</ListItemText>
</div>
<div>{props.actions}</div>
</div>
{props.children && <div className="w-full border-t border-gray-200">{props.children}</div>}
</ListItem>
);
}
export default IntegrationListItem;

2
apps/web/components/integrations/SubHeadingTitleWithConnections.tsx
View File

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

2
apps/web/components/pages/eventtypes/CustomInputTypeForm.tsx
View File

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

5
apps/web/components/security/ChangePasswordSection.tsx
View File

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

5
apps/web/components/security/DisableTwoFactorModal.tsx
View File

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

4
apps/web/components/security/DisableUserImpersonation.tsx
View File

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

4
apps/web/components/security/EnableTwoFactorModal.tsx
View File

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

3
apps/web/components/security/TwoFactorAuthSection.tsx
View File

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

4
apps/web/components/security/TwoFactorModalHeader.tsx
View File

@ -1,6 +1,4 @@
import React from "react";
import { ShieldCheckIcon } from "@calcom/ui/Icon";
import { ShieldCheckIcon } from "@calcom/ui";
const TwoFactorModalHeader = ({ title, description }: { title: string; description: string }) => {
return (

5
apps/web/components/settings/CalendarSwitch.tsx
View File

@ -2,10 +2,7 @@ import { useMutation } from "@tanstack/react-query";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
import { Icon } from "@calcom/ui";
import { Badge } from "@calcom/ui/components/badge";
import Switch from "@calcom/ui/v2/core/Switch";
import showToast from "@calcom/ui/v2/core/notifications";
import { Badge, Icon, showToast, Switch } from "@calcom/ui";
export function CalendarSwitch(props: {
type: string;

5
apps/web/components/settings/DisableTwoFactorModal.tsx
View File

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

4
apps/web/components/settings/EnableTwoFactorModal.tsx
View File

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

6
apps/web/components/team/TeamSettings.tsx
View File

@ -4,11 +4,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
import { objectKeys } from "@calcom/lib/objectKeys";
import { TeamWithMembers } from "@calcom/lib/server/queries/teams";
import { trpc } from "@calcom/trpc/react";
import { Alert } from "@calcom/ui/Alert";
import Button from "@calcom/ui/Button";
import { Icon } from "@calcom/ui/Icon";
import { TextField } from "@calcom/ui/form/fields";
import showToast from "@calcom/ui/v2/core/notifications";
import { Alert, Button, Icon, showToast, TextField } from "@calcom/ui";
import ImageUploader from "@components/ImageUploader";
import SettingInputContainer from "@components/ui/SettingInputContainer";

6
apps/web/components/team/TeamSettingsRightSidebar.tsx
View File

@ -1,14 +1,10 @@
import { MembershipRole } from "@prisma/client";
import Link from "next/link";
import { useRouter } from "next/router";
import React from "react";
import { TeamWithMembers } from "@calcom/lib/server/queries/teams";
import { trpc } from "@calcom/trpc/react";
import ConfirmationDialogContent from "@calcom/ui/ConfirmationDialogContent";
import { Dialog, DialogTrigger } from "@calcom/ui/Dialog";
import { Icon } from "@calcom/ui/Icon";
import showToast from "@calcom/ui/v2/core/notifications";
import { ConfirmationDialogContent, Dialog, DialogTrigger, Icon, showToast } from "@calcom/ui";
import { useLocale } from "@lib/hooks/useLocale";

2
apps/web/components/team/screens/Team.tsx
View File

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

2
apps/web/components/ui/EditableHeading.tsx
View File

@ -2,7 +2,7 @@ import classNames from "classnames";
import React, { useState } from "react";
import { ControllerRenderProps } from "react-hook-form";
import { Icon } from "@calcom/ui/Icon";
import { Icon } from "@calcom/ui";
const EditableHeading = function EditableHeading({
value,

3
apps/web/components/ui/InfoBadge.tsx
View File

@ -1,5 +1,4 @@
import { Icon } from "@calcom/ui/Icon";
import { Tooltip } from "@calcom/ui/Tooltip";
import { Icon, Tooltip } from "@calcom/ui";
export default function InfoBadge({ content }: { content: string }) {
return (

2
apps/web/components/ui/ModalContainer.tsx
View File

@ -1,7 +1,7 @@
import classNames from "classnames";
import React, { PropsWithChildren } from "react";
import { Dialog, DialogContent } from "@calcom/ui/Dialog";
import { Dialog, DialogContent } from "@calcom/ui";
export default function ModalContainer(
props: PropsWithChildren<{

41
apps/web/components/ui/NoCalendarConnectedAlert/__tests__/NoCalendarConnectedAlert.test.tsx
View File

@ -1,41 +0,0 @@
import { cleanup, screen, render } from "@testing-library/react";
import { trpc } from "@calcom/trpc/react";
import NoCalendarConnectedAlert from "..";
// TODO: useQuery mock is not working
describe.skip("Testing NoCalendarConnectedAlert", () => {
describe("Render test", () => {
it("should render without crashing", () => {
// Disabled as its asking for full trpc useQuery response
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
jest.spyOn(trpc, "useQuery").mockReturnValue({
isSuccess: true,
isFetched: true,
data: { connectedCalendars: [], destinationCalendar: undefined },
});
render(<NoCalendarConnectedAlert />);
const testProp = screen.getByText("missing_connected_calendar");
expect(testProp).toBeTruthy();
});
it("should not render", () => {
// Disabled as its asking for full trpc useQuery response
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
jest.spyOn(trpc, "useQuery").mockReturnValue({
isSuccess: true,
isFetched: true,
data: { connectedCalendars: [1, 2], destinationCalendar: { a: "test" } },
});
render(<NoCalendarConnectedAlert />);
expect(screen.queryByText("missing_connected_calendar")).toBeNull();
});
afterEach(cleanup);
});
});

44
apps/web/components/ui/NoCalendarConnectedAlert/index.tsx
View File

@ -1,44 +0,0 @@
import { useTranslation } from "next-i18next";
import { Trans } from "next-i18next";
import { trpc } from "@calcom/trpc/react";
// @TODO: alert v2
import { Alert } from "@calcom/ui/Alert";
import { LinkText } from "../LinkText";
const NoCalendarConnectedAlert = () => {
const { t } = useTranslation();
const query = trpc.viewer.connectedCalendars.useQuery();
// We are not gonna show this alert till we fetch data from DB
let defaultCalendarConnected = true;
if (query.isSuccess && query.isFetched && query.data) {
defaultCalendarConnected =
query.data.connectedCalendars.length > 0 && query.data.destinationCalendar !== undefined;
}
return (
<>
{!defaultCalendarConnected && (
<Alert
severity="warning"
className="mb-4"
title={<>{t("missing_connected_calendar") as string}</>}
message={
<Trans i18nKey="connect_your_calendar_and_link">
You can connect your calendar from
<LinkText
data-testid="no-calendar-connected-alert"
href="/apps/categories/calendar"
classNameChildren="underline">
here
</LinkText>
.
</Trans>
}
/>
)}
</>
);
};
export default NoCalendarConnectedAlert;

11
apps/web/components/ui/TableActions.tsx
View File

@ -1,13 +1,14 @@
import React, { FC } from "react";
import Dropdown, {
import {
Button,
Dropdown,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
DropdownMenuPortal,
} from "@calcom/ui/Dropdown";
import { Icon } from "@calcom/ui/Icon";
import { Button } from "@calcom/ui/components/button";
DropdownMenuTrigger,
Icon,
} from "@calcom/ui";
import { SVGComponent } from "@lib/types/SVGComponent";

17
apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx
View File

@ -1,7 +1,7 @@
import classNames from "classnames";
import { debounce, noop } from "lodash";
import { useRouter } from "next/router";
import { RefCallback, useMemo, useEffect, useState } from "react";
import { RefCallback, useEffect, useMemo, useState } from "react";
import { getPremiumPlanMode, getPremiumPlanPriceValue } from "@calcom/app-store/stripepayment/lib/utils";
import { fetchUsername } from "@calcom/lib/fetchUsername";
@ -11,10 +11,17 @@ import { User } from "@calcom/prisma/client";
import { TRPCClientErrorLike } from "@calcom/trpc/client";
import { RouterOutputs, trpc } from "@calcom/trpc/react";
import type { AppRouter } from "@calcom/trpc/server/routers/_app";
import { Dialog, DialogClose, DialogContent, DialogHeader } from "@calcom/ui/Dialog";
import { Icon, StarIconSolid } from "@calcom/ui/Icon";
import { Button } from "@calcom/ui/components/button";
import { Input, Label } from "@calcom/ui/components/form";
import {
Button,
Dialog,
DialogClose,
DialogContent,
DialogHeader,
Icon,
Input,
Label,
StarIconSolid,
} from "@calcom/ui";
export enum UsernameChangeStatusEnum {
NORMAL = "NORMAL",

4
apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx
View File

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

2
apps/web/components/ui/colorpicker.tsx
View File

@ -3,7 +3,7 @@ import { useEffect } from "react";
import { HexColorInput, HexColorPicker } from "react-colorful";
import { isValidHexCode, fallBackHex } from "@calcom/lib/CustomBranding";
import { Swatch } from "@calcom/ui/v2";
import { Swatch } from "@calcom/ui";
type Handler = (event: MouseEvent | Event) => void;
function useEventListener<

2
apps/web/components/ui/form/CheckedSelect.tsx
View File

@ -2,7 +2,7 @@ import React from "react";
import { Props } from "react-select";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Icon } from "@calcom/ui/Icon";
import { Icon } from "@calcom/ui";
import Avatar from "@components/ui/Avatar";
import Select from "@components/ui/form/Select";

2
apps/web/components/ui/form/DatePicker.tsx
View File

@ -3,7 +3,7 @@ import "react-calendar/dist/Calendar.css";
import "react-date-picker/dist/DatePicker.css";
import PrimitiveDatePicker from "react-date-picker/dist/entry.nostyle";
import { Icon } from "@calcom/ui/Icon";
import { Icon } from "@calcom/ui";
import classNames from "@lib/classNames";

2
apps/web/components/ui/form/DateRangePicker.tsx
View File

@ -4,7 +4,7 @@ import PrimitiveDateRangePicker from "@wojtekmaj/react-daterange-picker/dist/ent
import React from "react";
import "react-calendar/dist/Calendar.css";
import { Icon } from "@calcom/ui/Icon";
import { Icon } from "@calcom/ui";
type Props = {
startDate: Date;

2
apps/web/components/ui/form/radio-area/Select.tsx
View File

@ -1,7 +1,7 @@
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@radix-ui/react-collapsible";
import React from "react";
import { Icon } from "@calcom/ui/Icon";
import { Icon } from "@calcom/ui";
import classNames from "@lib/classNames";
import { useLocale } from "@lib/hooks/useLocale";

3
apps/web/lib/QueryCell.tsx
View File

@ -12,8 +12,7 @@ import type { TRPCClientErrorLike } from "@calcom/trpc/client";
import type { DecorateProcedure } from "@calcom/trpc/react/shared";
import type { AnyQueryProcedure, inferProcedureInput, inferProcedureOutput } from "@calcom/trpc/server";
import type { AppRouter } from "@calcom/trpc/server/routers/_app";
import { Alert } from "@calcom/ui/Alert";
import Loader from "@calcom/ui/Loader";
import { Alert, Loader } from "@calcom/ui";
import type { UseTRPCQueryOptions } from "@trpc/react-query/shared";

2
apps/web/lib/app-providers.tsx
View File

@ -10,7 +10,7 @@ import { ComponentProps, ReactNode } from "react";
import DynamicHelpscoutProvider from "@calcom/features/ee/support/lib/helpscout/providerDynamic";
import DynamicIntercomProvider from "@calcom/features/ee/support/lib/intercom/providerDynamic";
import { trpc } from "@calcom/trpc/react";
import { MetaProvider } from "@calcom/ui/v2/core/Meta";
import { MetaProvider } from "@calcom/ui";
import usePublicPage from "@lib/hooks/usePublicPage";

2
apps/web/pages/404.tsx
View File

@ -4,7 +4,7 @@ import { useRouter } from "next/router";
import React, { useEffect, useState } from "react";
import { DEVELOPER_DOCS, DOCS_URL, JOIN_SLACK, WEBSITE_URL } from "@calcom/lib/constants";
import { Icon } from "@calcom/ui/Icon";
import { Icon } from "@calcom/ui";
import { useLocale } from "@lib/hooks/useLocale";

2
apps/web/pages/500.tsx
View File

@ -1,7 +1,7 @@
import Head from "next/head";
import { WEBSITE_URL } from "@calcom/lib/constants";
import Button from "@calcom/ui/Button";
import { Button } from "@calcom/ui";
export default function Error500() {
return (

4
apps/web/pages/[user].tsx
View File

@ -1,4 +1,3 @@
import { UserPlan } from "@prisma/client";
import classNames from "classnames";
import { GetServerSidePropsContext } from "next";
import dynamic from "next/dynamic";
@ -27,7 +26,7 @@ import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calco
import prisma from "@calcom/prisma";
import { baseEventTypeSelect } from "@calcom/prisma/selects";
import { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
import { BadgeCheckIcon, Icon } from "@calcom/ui/Icon";
import { BadgeCheckIcon, EventTypeDescriptionLazy as EventTypeDescription, Icon } from "@calcom/ui";
import { useExposePlanGlobally } from "@lib/hooks/useExposePlanGlobally";
import { inferSSRProps } from "@lib/types/inferSSRProps";
@ -38,7 +37,6 @@ import { AvatarSSR } from "@components/ui/AvatarSSR";
import { ssrInit } from "@server/lib/ssr";
const EventTypeDescription = dynamic(() => import("@calcom/ui/v2/modules/event-types/EventTypeDescription"));
const HeadSeo = dynamic(() => import("@components/seo/head-seo"));
export default function User(props: inferSSRProps<typeof getServerSideProps> & EmbedProps) {
const { users, profile, eventTypes, isDynamicGroup, dynamicNames, dynamicUsernames, isSingleUser } = props;

4
apps/web/pages/apps/categories/[category].tsx
View File

@ -6,9 +6,7 @@ import { useRouter } from "next/router";
import { getAppRegistry } from "@calcom/app-store/_appRegistry";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import prisma from "@calcom/prisma";
import { SkeletonText } from "@calcom/ui/v2";
import Shell from "@calcom/ui/v2/core/Shell";
import AppCard from "@calcom/ui/v2/core/apps/AppCard";
import { AppCard, Shell, SkeletonText } from "@calcom/ui";
export default function Apps({ apps }: InferGetStaticPropsType<typeof getStaticProps>) {
const { t, isLocaleReady } = useLocale();

4
apps/web/pages/apps/categories/index.tsx
View File

@ -3,9 +3,7 @@ import Link from "next/link";
import { getAppRegistry } from "@calcom/app-store/_appRegistry";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Icon } from "@calcom/ui/Icon";
import Shell from "@calcom/ui/Shell";
import { SkeletonText } from "@calcom/ui/v2";
import { Icon, Shell, SkeletonText } from "@calcom/ui";
export default function Apps({ categories }: InferGetStaticPropsType<typeof getStaticProps>) {
const { t, isLocaleReady } = useLocale();

5
apps/web/pages/apps/index.tsx
View File

@ -4,10 +4,7 @@ import { getAppRegistry, getAppRegistryWithCredentials } from "@calcom/app-store
import { getSession } from "@calcom/lib/auth";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import type { AppCategories } from "@calcom/prisma/client";
import AllApps from "@calcom/ui/v2/core/apps/AllApps";
import AppStoreCategories from "@calcom/ui/v2/core/apps/Categories";
import TrendingAppsSlider from "@calcom/ui/v2/core/apps/TrendingAppsSlider";
import AppsLayout from "@calcom/ui/v2/core/layouts/AppsLayout";
import { AllApps, AppsLayout, AppStoreCategories, TrendingAppsSlider } from "@calcom/ui";
import { ssgInit } from "@server/lib/ssg";

20
apps/web/pages/apps/installed/[category].tsx
View File

@ -8,20 +8,22 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
import { RouterOutputs, trpc } from "@calcom/trpc/react";
import { App } from "@calcom/types/App";
import { AppGetServerSidePropsContext } from "@calcom/types/AppGetServerSideProps";
import { Icon } from "@calcom/ui/Icon";
import { Button } from "@calcom/ui/components/button";
import { Alert } from "@calcom/ui/v2/core/Alert";
import EmptyScreen from "@calcom/ui/v2/core/EmptyScreen";
import { List } from "@calcom/ui/v2/core/List";
import { ShellSubHeading } from "@calcom/ui/v2/core/Shell";
import InstalledAppsLayout from "@calcom/ui/v2/core/layouts/InstalledAppsLayout";
import DisconnectIntegration from "@calcom/ui/v2/modules/integrations/DisconnectIntegration";
import {
Alert,
Button,
DisconnectIntegration,
EmptyScreen,
Icon,
InstalledAppsLayout,
List,
ShellSubHeading,
SkeletonLoader,
} from "@calcom/ui";
import { QueryCell } from "@lib/QueryCell";
import { CalendarListContainer } from "@components/apps/CalendarListContainer";
import IntegrationListItem from "@components/apps/IntegrationListItem";
import SkeletonLoader from "@components/availability/SkeletonLoader";
function ConnectOrDisconnectIntegrationButton(props: {
credentialIds: number[];

4
apps/web/pages/auth/error.tsx
View File

@ -4,9 +4,7 @@ import { useRouter } from "next/router";
import z from "zod";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import Button from "@calcom/ui/Button";
import { Icon } from "@calcom/ui/Icon";
import { SkeletonText } from "@calcom/ui/v2";
import { Button, Icon, SkeletonText } from "@calcom/ui";
import AuthContainer from "@components/ui/AuthContainer";

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

@ -7,7 +7,7 @@ import React, { useMemo } from "react";
import dayjs from "@calcom/dayjs";
import prisma from "@calcom/prisma";
import { Button, TextField } from "@calcom/ui/components";
import { Button, TextField } from "@calcom/ui";
import { useLocale } from "@lib/hooks/useLocale";

2
apps/web/pages/auth/forgot-password/index.tsx
View File

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

8
apps/web/pages/auth/login.tsx
View File

@ -4,7 +4,7 @@ import { getCsrfToken, signIn } from "next-auth/react";
import Link from "next/link";
import { useRouter } from "next/router";
import { useState } from "react";
import { useForm, FormProvider } from "react-hook-form";
import { FormProvider, useForm } from "react-hook-form";
import { FaGoogle } from "react-icons/fa";
import { isSAMLLoginEnabled, samlProductID, samlTenantID } from "@calcom/features/ee/sso/lib/saml";
@ -12,11 +12,7 @@ import { getSafeRedirectUrl } from "@calcom/lib/getSafeRedirectUrl";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
import prisma from "@calcom/prisma";
import { Icon } from "@calcom/ui";
import { Alert } from "@calcom/ui/Alert";
import { Button } from "@calcom/ui/components";
import { EmailField, PasswordField } from "@calcom/ui/components/form";
import SAMLLogin from "@calcom/ui/v2/modules/auth/SAMLLogin";
import { Alert, Button, EmailField, Icon, PasswordField, SAMLLogin } from "@calcom/ui";
import { ErrorCode, getSession } from "@lib/auth";
import { WEBAPP_URL, WEBSITE_URL } from "@lib/config/constants";

3
apps/web/pages/auth/logout.tsx
View File

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

3
apps/web/pages/auth/setup.tsx
View File

@ -11,8 +11,7 @@ import { isPasswordValid } from "@calcom/lib/auth";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import prisma from "@calcom/prisma";
import { inferSSRProps } from "@calcom/types/inferSSRProps";
import { TextField, EmailField, PasswordField, Label } from "@calcom/ui/components/form";
import WizardForm from "@calcom/ui/v2/core/WizardForm";
import { EmailField, Label, PasswordField, TextField, WizardForm } from "@calcom/ui";
import { ssrInit } from "@server/lib/ssr";

2
apps/web/pages/auth/signin.tsx
View File

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

3
apps/web/pages/auth/verify.tsx
View File

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

22
apps/web/pages/availability/[schedule].tsx
View File

@ -10,15 +10,19 @@ import { stringOrNumber } from "@calcom/prisma/zod-utils";
import { trpc } from "@calcom/trpc/react";
import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
import type { Schedule as ScheduleType } from "@calcom/types/schedule";
import { Icon } from "@calcom/ui";
import { Button } from "@calcom/ui/components/button";
import { Form, Label } from "@calcom/ui/components/form";
import Shell from "@calcom/ui/v2/core/Shell";
import Switch from "@calcom/ui/v2/core/Switch";
import TimezoneSelect from "@calcom/ui/v2/core/TimezoneSelect";
import VerticalDivider from "@calcom/ui/v2/core/VerticalDivider";
import showToast from "@calcom/ui/v2/core/notifications";
import { Skeleton, SkeletonText } from "@calcom/ui/v2/core/skeleton";
import {
Button,
Form,
Icon,
Label,
Shell,
showToast,
Skeleton,
SkeletonText,
Switch,
TimezoneSelect,
VerticalDivider,
} from "@calcom/ui";
import { HttpError } from "@lib/core/http/error";

4
apps/web/pages/availability/index.tsx
View File

@ -3,9 +3,7 @@ import { useAutoAnimate } from "@formkit/auto-animate/react";
import { NewScheduleButton, ScheduleListItem } from "@calcom/features/schedules";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { RouterOutputs, trpc } from "@calcom/trpc/react";
import { Icon } from "@calcom/ui/Icon";
import Shell from "@calcom/ui/Shell";
import { EmptyScreen, showToast } from "@calcom/ui/v2";
import { EmptyScreen, Icon, Shell, showToast } from "@calcom/ui";
import { withQuery } from "@lib/QueryCell";
import { HttpError } from "@lib/core/http/error";

3
apps/web/pages/availability/troubleshoot.tsx
View File

@ -3,8 +3,7 @@ import { useState } from "react";
import dayjs from "@calcom/dayjs";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { RouterOutputs, trpc } from "@calcom/trpc/react";
import Shell from "@calcom/ui/Shell";
import { SkeletonText } from "@calcom/ui/v2/core/skeleton";
import { Shell, SkeletonText } from "@calcom/ui";
type User = RouterOutputs["viewer"]["me"];

6
apps/web/pages/bookings/[status].tsx
View File

@ -7,11 +7,7 @@ import { z } from "zod";
import { WipeMyCalActionButton } from "@calcom/app-store/wipemycalother/components";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { RouterInputs, RouterOutputs, trpc } from "@calcom/trpc/react";
import { Alert } from "@calcom/ui/Alert";
import { Icon } from "@calcom/ui/Icon";
import { Button } from "@calcom/ui/components";
import { EmptyScreen } from "@calcom/ui/v2";
import BookingLayout from "@calcom/ui/v2/core/layouts/BookingLayout";
import { Alert, BookingLayout, Button, EmptyScreen, Icon } from "@calcom/ui";
import { useInViewObserver } from "@lib/hooks/useInViewObserver";

3
apps/web/pages/cancel/success.tsx
View File

@ -3,8 +3,7 @@ import { useRouter } from "next/router";
import { z } from "zod";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Icon } from "@calcom/ui/Icon";
import { Button } from "@calcom/ui/components/button";
import { Button, Icon } from "@calcom/ui";
import { HeadSeo } from "@components/seo/head-seo";

7
apps/web/pages/event-types/[type]/index.tsx
View File

@ -9,8 +9,8 @@ import { z } from "zod";
import { StripeData } from "@calcom/app-store/stripepayment/lib/server";
import getApps, { getEventTypeAppData, getLocationOptions } from "@calcom/app-store/utils";
import { LocationObject, EventLocationType } from "@calcom/core/location";
import { parseRecurringEvent, parseBookingLimit, validateBookingLimitOrder } from "@calcom/lib";
import { EventLocationType, LocationObject } from "@calcom/core/location";
import { parseBookingLimit, parseRecurringEvent, validateBookingLimitOrder } from "@calcom/lib";
import { CAL_URL } from "@calcom/lib/constants";
import convertToNewDurationType from "@calcom/lib/convertToNewDurationType";
import findDurationType from "@calcom/lib/findDurationType";
@ -20,8 +20,7 @@ import prisma from "@calcom/prisma";
import { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
import { trpc } from "@calcom/trpc/react";
import type { BookingLimit, RecurringEvent } from "@calcom/types/Calendar";
import { Form } from "@calcom/ui/form/fields";
import { showToast } from "@calcom/ui/v2";
import { Form, showToast } from "@calcom/ui";
import { asStringOrThrow } from "@lib/asStringOrNull";
import { getSession } from "@lib/auth";

30
apps/web/pages/event-types/index.tsx
View File

@ -6,23 +6,29 @@ import React, { Fragment, useEffect, useState } from "react";
import { CAL_URL, WEBAPP_URL } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { RouterOutputs, trpc } from "@calcom/trpc/react";
import { TRPCClientError } from "@calcom/trpc/react";
import { Icon } from "@calcom/ui";
import { Button, ButtonGroup, Badge } from "@calcom/ui/components";
import { Dialog, EmptyScreen, showToast, Switch, Tooltip } from "@calcom/ui/v2";
import ConfirmationDialogContent from "@calcom/ui/v2/core/ConfirmationDialogContent";
import Dropdown, {
import { RouterOutputs, trpc, TRPCClientError } from "@calcom/trpc/react";
import {
Badge,
Button,
ButtonGroup,
ConfirmationDialogContent,
CreateEventTypeButton,
Dialog,
Dropdown,
DropdownItem,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuPortal,
DropdownMenuSeparator,
DropdownMenuTrigger,
DropdownMenuPortal,
} from "@calcom/ui/v2/core/Dropdown";
import Shell from "@calcom/ui/v2/core/Shell";
import CreateEventTypeButton from "@calcom/ui/v2/modules/event-types/CreateEventType";
import EventTypeDescription from "@calcom/ui/v2/modules/event-types/EventTypeDescription";
EmptyScreen,
EventTypeDescription,
Icon,
Shell,
showToast,
Switch,
Tooltip,
} from "@calcom/ui";
import { withQuery } from "@lib/QueryCell";
import { HttpError } from "@lib/core/http/error";

4
apps/web/pages/getting-started/[[...step]].tsx
View File

@ -7,9 +7,7 @@ import { z } from "zod";
import { getSession } from "@calcom/lib/auth";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { User } from "@calcom/prisma/client";
import { Button } from "@calcom/ui/components/button";
import { StepCard } from "@calcom/ui/v2/core/StepCard";
import { Steps } from "@calcom/ui/v2/core/Steps";
import { Button, StepCard, Steps } from "@calcom/ui";
import prisma from "@lib/prisma";

Some files were not shown because too many files have changed in this diff Show More