[CAL-1545] replace heroicons with lucide.dev (#8599)

* fix linting

* [CAL-1545] replace heroicons with lucide.dev

* [CAL-1545] replace heroicons with lucide.dev

* [CAL-1545] replace heroicons with lucide.dev

---------

Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com>
Co-authored-by: Efraín Rochín <roae.85@gmail.com>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>
Co-authored-by: Keith Williams <keithwillcode@gmail.com>
This commit is contained in:
GitStart-Cal.com 2023-05-17 12:47:44 +00:00 committed by GitHub
parent 23b3a6661c
commit cfd1a72c64
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
22 changed files with 67 additions and 76 deletions

View File

@ -29,7 +29,7 @@ import {
TableActions,
TextAreaField,
} from "@calcom/ui";
import { Check, Clock, MapPin, RefreshCcw, Send, Slash, X, CreditCard } from "@calcom/ui/components/icon";
import { Check, Clock, MapPin, RefreshCcw, Send, Ban, X, CreditCard } from "@calcom/ui/components/icon";
import useMeQuery from "@lib/hooks/useMeQuery";
@ -119,7 +119,7 @@ function BookingListItem(booking: BookingItemProps) {
onClick: () => {
setRejectionDialogIsOpen(true);
},
icon: Slash,
icon: Ban,
disabled: mutation.isLoading,
},
// For bookings with payment, only confirm if the booking is paid for

View File

@ -1,9 +1,8 @@
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";
import { ArrowRight } from "@calcom/ui/components/icon";
import { AppConnectionItem } from "../components/AppConnectionItem";
import { ConnectedCalendarItem } from "../components/ConnectedCalendarItem";
@ -85,7 +84,7 @@ const ConnectedCalendars = (props: IConnectCalendarsProps) => {
onClick={() => nextStep()}
disabled={disabledNextButton}>
{firstCalendar ? `${t("continue")}` : `${t("next_step_text")}`}
<ArrowRightIcon className="ml-2 h-4 w-4 self-center" aria-hidden="true" />
<ArrowRight className="ml-2 h-4 w-4 self-center" aria-hidden="true" />
</button>
</>
);

View File

@ -1,9 +1,8 @@
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";
import { ArrowRight } from "@calcom/ui/components/icon";
import { AppConnectionItem } from "../components/AppConnectionItem";
import { StepConnectionLoader } from "../components/StepConnectionLoader";
@ -59,7 +58,7 @@ const ConnectedVideoStep = (props: ConnectedAppStepProps) => {
disabled={!hasAnyInstalledVideoApps}
onClick={() => nextStep()}>
{t("next_step_text")}
<ArrowRightIcon className="ml-2 h-4 w-4 self-center" aria-hidden="true" />
<ArrowRight className="ml-2 h-4 w-4 self-center" aria-hidden="true" />
</button>
</>
);

View File

@ -1,4 +1,3 @@
import { ArrowRightIcon } from "@heroicons/react/solid";
import { useRouter } from "next/router";
import { useForm } from "react-hook-form";
@ -9,6 +8,7 @@ import type { TRPCClientErrorLike } from "@calcom/trpc/react";
import { trpc } from "@calcom/trpc/react";
import type { AppRouter } from "@calcom/trpc/server/routers/_app";
import { Button, Form } from "@calcom/ui";
import { ArrowRight } from "@calcom/ui/components/icon";
interface ISetupAvailabilityProps {
nextStep: () => void;
@ -81,7 +81,7 @@ const SetupAvailability = (props: ISetupAvailabilityProps) => {
type="submit"
className="mt-2 w-full justify-center p-2 text-sm sm:mt-8"
disabled={availabilityForm.formState.isSubmitting}>
{t("next_step_text")} <ArrowRightIcon className="ml-2 h-4 w-4 self-center" />
{t("next_step_text")} <ArrowRight className="ml-2 h-4 w-4 self-center" />
</Button>
</div>
</Form>

View File

@ -1,4 +1,3 @@
import { ArrowRightIcon } from "@heroicons/react/solid";
import { useRouter } from "next/router";
import type { FormEvent } from "react";
import { useRef, useState } from "react";
@ -11,6 +10,7 @@ import turndown from "@calcom/lib/turndownService";
import { trpc } from "@calcom/trpc/react";
import { Button, Editor, ImageUploader, Label, showToast } from "@calcom/ui";
import { Avatar } from "@calcom/ui";
import { ArrowRight } from "@calcom/ui/components/icon";
import type { IOnboardingPageProps } from "../../../pages/getting-started/[[...step]]";
@ -159,7 +159,7 @@ const UserProfile = (props: IUserProfileProps) => {
type="submit"
className="text-inverted mt-8 flex w-full flex-row justify-center rounded-md border border-black bg-black p-2 text-center text-sm">
{t("finish")}
<ArrowRightIcon className="ml-2 h-4 w-4 self-center" aria-hidden="true" />
<ArrowRight className="ml-2 h-4 w-4 self-center" aria-hidden="true" />
</Button>
</form>
);

View File

@ -1,4 +1,3 @@
import { ArrowRightIcon } from "@heroicons/react/outline";
import { zodResolver } from "@hookform/resolvers/zod";
import { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
@ -10,6 +9,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
import { telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
import { trpc } from "@calcom/trpc/react";
import { Button, TimezoneSelect } from "@calcom/ui";
import { ArrowRight } from "@calcom/ui/components/icon";
import { UsernameAvailabilityField } from "@components/ui/UsernameAvailability";
@ -116,7 +116,7 @@ const UserSettings = (props: IUserSettingsProps) => {
className="mt-8 flex w-full flex-row justify-center"
disabled={mutation.isLoading}>
{t("next_step_text")}
<ArrowRightIcon className="ml-2 h-4 w-4 self-center" aria-hidden="true" />
<ArrowRight className="ml-2 h-4 w-4 self-center" aria-hidden="true" />
</Button>
</form>
);

View File

@ -1,4 +1,3 @@
import { StarIcon as StarIconSolid } from "@heroicons/react/solid";
import classNames from "classnames";
import { debounce, noop } from "lodash";
import { useRouter } from "next/router";
@ -15,6 +14,7 @@ import type { RouterOutputs } from "@calcom/trpc/react";
import { trpc } from "@calcom/trpc/react";
import type { AppRouter } from "@calcom/trpc/server/routers/_app";
import { Button, Dialog, DialogClose, DialogContent, Input, Label } from "@calcom/ui";
import { Star as StarSolid } from "@calcom/ui/components/icon";
import { Check, Edit2, ExternalLink } from "@calcom/ui/components/icon";
export enum UsernameChangeStatusEnum {
@ -231,11 +231,15 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
<span
className={classNames(
"mx-2 py-2",
isInputUsernamePremium ? "text-orange-400" : "",
isInputUsernamePremium ? "text-transparent" : "",
usernameIsAvailable ? "" : ""
)}>
{isInputUsernamePremium ? <StarIconSolid className="mt-[2px] h-4 w-4" /> : <></>}
{!isInputUsernamePremium && usernameIsAvailable ? <Check className="mt-2 h-4 w-4" /> : <></>}
{isInputUsernamePremium ? <StarSolid className="mt-[2px] h-4 w-4 fill-orange-400" /> : <></>}
{!isInputUsernamePremium && usernameIsAvailable ? (
<Check className="mt-[2px] h-4 w-4" />
) : (
<></>
)}
</span>
</div>
</div>

View File

@ -111,12 +111,6 @@ const nextConfig = {
transform: "lucide-react/dist/esm/icons/{{ kebabCase member }}",
preventFullImport: true,
},
"@heroicons/react/solid": {
transform: "@heroicons/react/solid/esm/{{ member }}",
},
"@heroicons/react/outline": {
transform: "@heroicons/react/outline/esm/{{ member }}",
},
"@calcom/features/insights/components": {
transform: "@calcom/features/insights/components/{{member}}",
skipDefaultConversion: true,

View File

@ -41,7 +41,6 @@
"@daily-co/daily-js": "^0.37.0",
"@formkit/auto-animate": "^1.0.0-beta.5",
"@glidejs/glide": "^3.5.2",
"@heroicons/react": "^1.0.6",
"@hookform/error-message": "^2.0.0",
"@hookform/resolvers": "^2.9.7",
"@next-auth/prisma-adapter": "^1.0.4",

View File

@ -1,4 +1,3 @@
import { BadgeCheckIcon } from "@heroicons/react/solid";
import classNames from "classnames";
import type { GetServerSidePropsContext } from "next";
import Link from "next/link";
@ -28,7 +27,7 @@ import prisma from "@calcom/prisma";
import { baseEventTypeSelect } from "@calcom/prisma/selects";
import { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
import { Avatar, AvatarGroup, HeadSeo } from "@calcom/ui";
import { ArrowRight } from "@calcom/ui/components/icon";
import { Verified, ArrowRight } from "@calcom/ui/components/icon";
import type { inferSSRProps } from "@lib/types/inferSSRProps";
import type { EmbedProps } from "@lib/withEmbedSsr";
@ -139,7 +138,9 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
<Avatar imageSrc={user.avatar} size="xl" alt={nameOrUsername} />
<h1 className="font-cal text-emphasis mb-1 text-3xl">
{nameOrUsername}
{user.verified && <BadgeCheckIcon className=" mx-1 -mt-1 inline h-6 w-6 text-blue-500" />}
{user.verified && (
<Verified className=" mx-1 -mt-1 inline h-6 w-6 fill-blue-500 text-white dark:text-black" />
)}
</h1>
{!isBioEmpty && (
<>

View File

@ -1,4 +1,3 @@
import { CheckIcon, MailOpenIcon, ExclamationIcon } from "@heroicons/react/outline";
import { signIn } from "next-auth/react";
import Head from "next/head";
import { useRouter } from "next/router";
@ -9,6 +8,7 @@ import z from "zod";
import { APP_NAME, WEBAPP_URL } from "@calcom/lib/constants";
import { trpc } from "@calcom/trpc/react";
import { Button, showToast } from "@calcom/ui";
import { Check, MailOpen, AlertTriangle } from "@calcom/ui/components/icon";
import Loader from "@components/Loader";
import PageWrapper from "@components/PageWrapper";
@ -118,11 +118,11 @@ export default function Verify() {
<div className="m-10 flex max-w-2xl flex-col items-start border border-white p-12 text-left">
<div className="rounded-full border border-white p-3">
{hasPaymentFailed ? (
<ExclamationIcon className="text-inverted h-12 w-12 flex-shrink-0 p-0.5 font-extralight" />
<AlertTriangle className="text-inverted h-12 w-12 flex-shrink-0 p-0.5 font-extralight" />
) : sessionId ? (
<CheckIcon className="text-inverted h-12 w-12 flex-shrink-0 p-0.5 font-extralight" />
<Check className="text-inverted h-12 w-12 flex-shrink-0 p-0.5 font-extralight" />
) : (
<MailOpenIcon className="text-inverted h-12 w-12 flex-shrink-0 p-0.5 font-extralight" />
<MailOpen className="text-inverted h-12 w-12 flex-shrink-0 p-0.5 font-extralight" />
)}
</div>
<h3 className="font-cal my-6 text-3xl font-normal">

View File

@ -97,7 +97,7 @@
"dependencies": {
"city-timezones": "^1.2.1",
"eslint": "^8.34.0",
"lucide-react": "^0.130.0",
"lucide-react": "^0.171.0",
"turbo": "^1.8.3"
},
"resolutions": {

View File

@ -1,10 +1,10 @@
import { LinkIcon, SearchIcon } from "@heroicons/react/outline";
import type { Dispatch, SetStateAction } from "react";
import { useState } from "react";
import classNames from "@calcom/lib/classNames";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Alert, Button, Dialog, DialogClose, DialogContent, DialogFooter, Input } from "@calcom/ui";
import { Link, Search } from "@calcom/ui/components/icon";
interface ISearchDialog {
isOpenDialog: boolean;
@ -118,8 +118,8 @@ export const SearchDialog = (props: ISearchDialog) => {
</h3>
<p className="text-subtle mb-3 text-sm font-light">{t("find_gif_spice_confirmation")}</p>
<div className="border-emphasis flex items-center border-b border-solid">
{renderTab(SearchIcon, t("search_giphy"), MODE_SEARCH)}
{renderTab(LinkIcon, t("add_link_from_giphy"), MODE_URL)}
{renderTab(Search, t("search_giphy"), MODE_SEARCH)}
{renderTab(Link, t("add_link_from_giphy"), MODE_URL)}
</div>
<form
className="flex w-full justify-center space-x-2 space-y-2 rtl:space-x-reverse"

View File

@ -1,8 +1,8 @@
import { PencilAltIcon, PlusIcon, XIcon } from "@heroicons/react/solid";
import { useState } from "react";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Button } from "@calcom/ui";
import { Edit, Plus, X } from "@calcom/ui/components/icon";
import { SearchDialog } from "./SearchDialog";
@ -24,11 +24,11 @@ export default function SelectGifInput(props: ISelectGifInput) {
)}
<div className="flex">
{selectedGif ? (
<Button color="minimal" type="button" StartIcon={PencilAltIcon} onClick={() => setShowDialog(true)}>
<Button color="minimal" type="button" StartIcon={Edit} onClick={() => setShowDialog(true)}>
Change
</Button>
) : (
<Button color="minimal" type="button" StartIcon={PlusIcon} onClick={() => setShowDialog(true)}>
<Button color="minimal" type="button" StartIcon={Plus} onClick={() => setShowDialog(true)}>
Add from Giphy
</Button>
)}
@ -37,7 +37,7 @@ export default function SelectGifInput(props: ISelectGifInput) {
<Button
color="destructive"
type="button"
StartIcon={XIcon}
StartIcon={X}
onClick={() => {
setSelectedGif("");
props.onChange("");

View File

@ -1,4 +1,3 @@
import { ClockIcon } from "@heroicons/react/outline";
import { useMutation } from "@tanstack/react-query";
import type { Dispatch, SetStateAction } from "react";
import { useState } from "react";
@ -8,6 +7,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
import logger from "@calcom/lib/logger";
import { trpc } from "@calcom/trpc/react";
import { Button, Dialog, DialogContent, DialogFooter, DialogHeader, showToast } from "@calcom/ui";
import { Clock } from "@calcom/ui/components/icon";
interface IConfirmDialogWipe {
isOpenDialog: boolean;
@ -82,7 +82,7 @@ export const ConfirmDialog = (props: IConfirmDialogWipe) => {
<DialogContent onOpenAutoFocus={(e) => e.preventDefault()}>
<div className="flex flex-row space-x-3">
<div className="flex h-10 w-10 flex-shrink-0 justify-center rounded-full bg-[#FAFAFA]">
<ClockIcon className="m-auto h-6 w-6" />
<Clock className="m-auto h-5 w-5" />
</div>
<div className="pt-1">
<DialogHeader title="Wipe My Calendar" />

View File

@ -1,5 +1,3 @@
import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/solid";
import type { Dayjs } from "@calcom/dayjs";
import dayjs from "@calcom/dayjs";
import { useEmbedStyles } from "@calcom/embed-core/embed-iframe";
@ -8,6 +6,7 @@ import { daysInMonth, yyyymmdd } from "@calcom/lib/date-fns";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { weekdayNames } from "@calcom/lib/weekday";
import { Button, SkeletonText } from "@calcom/ui";
import { ChevronLeft, ChevronRight } from "@calcom/ui/components/icon";
import { ArrowRight } from "@calcom/ui/components/icon";
export type DatePickerProps = {
@ -223,7 +222,7 @@ const DatePicker = ({
data-testid="decrementMonth"
color="minimal"
variant="icon"
StartIcon={ChevronLeftIcon}
StartIcon={ChevronLeft}
/>
<Button
className="group p-1 opacity-70 hover:opacity-100"
@ -231,7 +230,7 @@ const DatePicker = ({
data-testid="incrementMonth"
color="minimal"
variant="icon"
StartIcon={ChevronRightIcon}
StartIcon={ChevronRight}
/>
</div>
</div>

View File

@ -12,7 +12,7 @@ import {
DropdownItem,
DropdownMenuTrigger,
} from "@calcom/ui";
import { Slash, Check, MoreHorizontal, X } from "@calcom/ui/components/icon";
import { Ban, Check, MoreHorizontal, X } from "@calcom/ui/components/icon";
interface Props {
team: {
@ -92,7 +92,7 @@ export default function TeamInviteListItem(props: Props) {
variant="icon"
color="secondary"
onClick={declineInvite}
StartIcon={Slash}
StartIcon={Ban}
/>
<Button
type="button"

View File

@ -1,9 +1,8 @@
import { CheckCircleIcon, ExclamationIcon, InformationCircleIcon, XCircleIcon } from "@heroicons/react/solid";
import classNames from "classnames";
import type { ReactNode } from "react";
import { forwardRef } from "react";
import { Info } from "../icon";
import { CheckCircle2, Info, XCircle, AlertTriangle } from "@calcom/ui/components/icon";
export interface AlertProps {
title?: ReactNode;
@ -34,25 +33,34 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>((props, ref) => {
<div className="relative flex flex-col md:flex-row">
<div className="flex-shrink-0">
{severity === "error" && (
<XCircleIcon className={classNames("h-5 w-5 text-red-400", iconClassName)} aria-hidden="true" />
<XCircle
className={classNames("h-5 w-5 fill-red-400 text-white", iconClassName)}
aria-hidden="true"
/>
)}
{severity === "warning" && (
<ExclamationIcon
className={classNames("h-5 w-5 text-yellow-400", iconClassName)}
<AlertTriangle
className={classNames("h-5 w-5 fill-yellow-400 text-white", iconClassName)}
aria-hidden="true"
/>
)}
{severity === "info" && (
<InformationCircleIcon
className={classNames("h-5 w-5 text-sky-400", iconClassName)}
<Info
className={classNames("h-5 w-5 fill-sky-400 text-white", iconClassName)}
aria-hidden="true"
/>
)}
{severity === "neutral" && (
<Info className={classNames("text-default h-5 w-5", iconClassName)} aria-hidden="true" />
<Info
className={classNames("text-default h-5 w-5 fill-transparent", iconClassName)}
aria-hidden="true"
/>
)}
{severity === "success" && (
<CheckCircleIcon className={classNames("text-muted h-5 w-5", iconClassName)} aria-hidden="true" />
<CheckCircle2
className={classNames("fill-muted h-5 w-5 text-white", iconClassName)}
aria-hidden="true"
/>
)}
</div>
<div className="ml-3 flex-grow">

View File

@ -1,4 +1,3 @@
import { CheckCircleIcon } from "@heroicons/react/outline";
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
import Link from "next/link";
import type { ComponentProps } from "react";
@ -6,6 +5,7 @@ import { forwardRef } from "react";
import { classNames } from "@calcom/lib";
import type { SVGComponent } from "@calcom/types/SVGComponent";
import { CheckCircle } from "@calcom/ui/components/icon";
import type { ButtonColor } from "../../button/Button";
@ -76,7 +76,7 @@ export const DropdownMenuCheckboxItem = forwardRef<HTMLDivElement, DropdownMenuC
<DropdownMenuPrimitive.CheckboxItem {...props} ref={forwardedRef}>
{children}
<DropdownMenuPrimitive.ItemIndicator>
<CheckCircleIcon />
<CheckCircle />
</DropdownMenuPrimitive.ItemIndicator>
</DropdownMenuPrimitive.CheckboxItem>
);
@ -93,7 +93,7 @@ export const DropdownMenuRadioItem = forwardRef<HTMLDivElement, DropdownMenuRadi
<DropdownMenuPrimitive.RadioItem {...props} ref={forwardedRef}>
{children}
<DropdownMenuPrimitive.ItemIndicator>
<CheckCircleIcon />
<CheckCircle />
</DropdownMenuPrimitive.ItemIndicator>
</DropdownMenuPrimitive.RadioItem>
);

View File

@ -1,9 +1,8 @@
import { XIcon } from "@heroicons/react/solid";
import classNames from "classnames";
import { noop } from "lodash";
import type { ReactNode } from "react";
import { AlertTriangle, Info } from "../icon";
import { X, AlertTriangle, Info } from "@calcom/ui/components/icon";
export type TopBannerProps = {
text: string;
@ -44,7 +43,7 @@ export function TopBanner(props: TopBannerProps) {
type="button"
onClick={noop}
className="hover:bg-gray-20 text-muted flex items-center rounded-lg p-1.5 text-sm">
<XIcon className="text-emphasis h-4 w-4" />
<X className="text-emphasis h-4 w-4" />
</button>
)}
</div>

View File

@ -1,10 +1,10 @@
import { ChevronDownIcon } from "@heroicons/react/solid";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@radix-ui/react-collapsible";
import React from "react";
import type { FieldValues, Path, UseFormReturn } from "react-hook-form";
import classNames from "@calcom/lib/classNames";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { ChevronDown } from "@calcom/ui/components/icon";
import { RadioArea, RadioAreaGroup } from "./RadioAreaGroup";
@ -46,7 +46,7 @@ export const Select = function RadioAreaSelect<TFieldValues extends FieldValues>
disabled && "bg-emphasis cursor-default focus:ring-0 "
)}>
{getLabel(props.value) ?? placeholder}
<ChevronDownIcon className="text-subtle float-right h-5 w-5" />
<ChevronDown className="text-subtle float-right h-5 w-5" />
</CollapsibleTrigger>
<CollapsibleContent>
<RadioAreaGroup className="space-y-2 text-sm" onChange={props.onChange}>

View File

@ -4917,7 +4917,6 @@ __metadata:
"@daily-co/daily-js": ^0.37.0
"@formkit/auto-animate": ^1.0.0-beta.5
"@glidejs/glide": ^3.5.2
"@heroicons/react": ^1.0.6
"@hookform/error-message": ^2.0.0
"@hookform/resolvers": ^2.9.7
"@microsoft/microsoft-graph-types-beta": 0.15.0-preview
@ -5067,7 +5066,6 @@ __metadata:
"@calcom/ui": "*"
"@floating-ui/react-dom": ^1.0.0
"@headlessui/react": ^1.5.0
"@heroicons/react": ^1.0.6
"@hookform/resolvers": ^2.9.7
"@juggle/resize-observer": ^3.4.0
"@next/bundle-analyzer": ^13.1.6
@ -6886,15 +6884,6 @@ __metadata:
languageName: node
linkType: hard
"@heroicons/react@npm:^1.0.6":
version: 1.0.6
resolution: "@heroicons/react@npm:1.0.6"
peerDependencies:
react: ">= 16"
checksum: 372b1eda3ce735ef069777bc96304f70de585ebb71a6d1cedc121bb695f9bca235619112e3ee14e8779e95a03096813cbbe3b755927a54b7580d1ce084fa4096
languageName: node
linkType: hard
"@hookform/error-message@npm:^2.0.0":
version: 2.0.0
resolution: "@hookform/error-message@npm:2.0.0"