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

React feather refactor (#6090) 

Co-authored-by: Peer Richelsen <peeroke@gmail.com>
This commit is contained in:
Mehran Shahbaz 2022-12-18 14:14:44 +03:30 committed by GitHub
parent c4bd2167e1
commit 205f73c4bc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 35 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,7 +2,6 @@ import { TFunction } from "next-i18next";
import { useRouter } from "next/router";
import { EventTypeSetupInfered, FormValues } from "pages/event-types/[type]";
import { useMemo, useState } from "react";
import { Loader } from "react-feather";
import { UseFormReturn } from "react-hook-form";
import { classNames } from "@calcom/lib";
@ -294,7 +293,7 @@ function EventTypeSingleLayout({
</Button>
</div>
}>
<ClientSuspense fallback={<Loader />}>
<ClientSuspense fallback={<Icon.FiLoader />}>
<div className="-mt-2 flex flex-col xl:flex-row xl:space-x-8">
<div className="hidden xl:block">
<VerticalTabs

5
packages/app-store/closecom/pages/setup/index.tsx
View File

@ -1,13 +1,12 @@
import { zodResolver } from "@hookform/resolvers/zod";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import { Check, X } from "react-feather";
import { Controller, useForm } from "react-hook-form";
import { Toaster } from "react-hot-toast";
import z from "zod";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Button, Form, showToast, TextField } from "@calcom/ui";
import { Button, Form, showToast, TextField, Icon } from "@calcom/ui";
const formSchema = z.object({
api_key: z.string(),
@ -107,7 +106,7 @@ export default function CloseComSetup() {
type="submit"
loading={testLoading}
disabled={testPassed === true}
StartIcon={testPassed !== undefined ? (testPassed ? Check : X) : undefined}
StartIcon={testPassed !== undefined ? (testPassed ? Icon.FiCheck : Icon.FiX) : undefined}
className={
testPassed !== undefined
? testPassed

5
packages/features/ee/workflows/components/EmptyScreen.tsx
View File

@ -1,12 +1,11 @@
import React from "react";
import { Icon as FeatherIcon } from "react-feather";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { SVGComponent } from "@calcom/types/SVGComponent";
import { Button, Icon } from "@calcom/ui";
type WorkflowExampleType = {
Icon: FeatherIcon;
Icon: SVGComponent;
text: string;
};
@ -40,7 +39,7 @@ export default function EmptyScreen({
isLoading,
showExampleWorkflows,
}: {
IconHeading: SVGComponent | FeatherIcon;
IconHeading: SVGComponent;
headline: string;
description: string | React.ReactElement;
buttonText?: string;

4
packages/ui/components/avatar/Avatar.tsx
View File

@ -1,9 +1,9 @@
import * as AvatarPrimitive from "@radix-ui/react-avatar";
import * as Tooltip from "@radix-ui/react-tooltip";
import { Check } from "react-feather";
import classNames from "@calcom/lib/classNames";
import { defaultAvatarSrc } from "@calcom/lib/defaultAvatarImage";
import { Icon } from "@calcom/ui";
import { Maybe } from "@trpc/server";
@ -47,7 +47,7 @@ export function Avatar(props: AvatarProps) {
size === "lg" ? "h-5 w-5" : "h-2 w-2"
)}>
<div className="flex h-full items-center justify-center p-[2px]">
{size === "lg" && <Check className="" />}
{size === "lg" && <Icon.FiCheck className="" />}
</div>
</div>
)}

4
packages/ui/components/badge/Badge.tsx
View File

@ -1,7 +1,7 @@
import { Icon } from "react-feather";
import { GoPrimitiveDot } from "react-icons/go";
import classNames from "@calcom/lib/classNames";
import { SVGComponent } from "@calcom/types/SVGComponent";
const badgeClassNameByVariant = {
default: "bg-orange-100 text-orange-800",
@ -23,7 +23,7 @@ const classNameBySize = {
export type BadgeProps = {
variant: keyof typeof badgeClassNameByVariant;
size?: keyof typeof classNameBySize;
StartIcon?: Icon;
StartIcon?: SVGComponent;
bold?: boolean;
withDot?: boolean;
rounded?: boolean;

6
packages/ui/components/button/Button.tsx
View File

@ -1,10 +1,10 @@
import { cva, VariantProps } from "class-variance-authority";
import Link, { LinkProps } from "next/link";
import React, { forwardRef } from "react";
import { Icon } from "react-feather";
import classNames from "@calcom/lib/classNames";
import { applyStyleToMultipleVariants } from "@calcom/lib/cva";
import { SVGComponent } from "@calcom/types/SVGComponent";
import { Tooltip } from "@calcom/ui";
type InferredVariantProps = VariantProps<typeof buttonClasses>;
@ -13,9 +13,9 @@ export type ButtonBaseProps = {
/** Action that happens when the button is clicked */
onClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
/**Left aligned icon*/
StartIcon?: Icon | React.ElementType;
StartIcon?: SVGComponent | React.ElementType;
/**Right aligned icon */
EndIcon?: Icon;
EndIcon?: SVGComponent;
shallow?: boolean;
/**Tool tip used when icon size is set to small */
tooltip?: string;

7
packages/ui/components/form/inputs/HintOrErrors.tsx
View File

@ -1,4 +1,3 @@
import { X, Circle, Check } from "react-feather";
import { FieldValues, useFormContext } from "react-hook-form";
// TODO: Refactor import once V1 migration has happened
@ -50,12 +49,12 @@ export function HintsOrErrors<T extends FieldValues = FieldValues>(props: {
className={error !== undefined ? (submitted ? "text-red-700" : "") : "text-green-600"}>
{error !== undefined ? (
submitted ? (
<X size="12" strokeWidth="3" className="mr-2 -ml-1 inline-block" />
<Icon.FiX size="12" strokeWidth="3" className="mr-2 -ml-1 inline-block" />
) : (
<Circle fill="currentColor" size="5" className="mr-2 inline-block" />
<Icon.FiCircle fill="currentColor" size="5" className="mr-2 inline-block" />
)
) : (
<Check size="12" strokeWidth="3" className="mr-2 -ml-1 inline-block" />
<Icon.FiCheck size="12" strokeWidth="3" className="mr-2 -ml-1 inline-block" />
)}
{t(`${fieldName}_hint_${key}`)}
</li>

5
packages/ui/components/form/inputs/Input.tsx
View File

@ -1,5 +1,4 @@
import React, { forwardRef, ReactElement, ReactNode, Ref, useCallback, useId, useState } from "react";
import { Eye, EyeOff } from "react-feather";
import { FieldValues, FormProvider, SubmitHandler, useFormContext, UseFormReturn } from "react-hook-form";
import classNames from "@calcom/lib/classNames";
@ -211,9 +210,9 @@ export const PasswordField = forwardRef<HTMLInputElement, InputFieldProps>(funct
type="button"
onClick={() => toggleIsPasswordVisible()}>
{isPasswordVisible ? (
<EyeOff className="h-4 stroke-[2.5px]" />
<Icon.FiEyeOff className="h-4 stroke-[2.5px]" />
) : (
<Eye className="h-4 stroke-[2.5px]" />
<Icon.FiEye className="h-4 stroke-[2.5px]" />
)}
<span className="sr-only">{textLabel}</span>
</button>

4
packages/ui/v2/core/Dialog.tsx
View File

@ -1,10 +1,10 @@
import * as DialogPrimitive from "@radix-ui/react-dialog";
import { useRouter } from "next/router";
import React, { ReactNode, useState } from "react";
import { Icon } from "react-feather";
import classNames from "@calcom/lib/classNames";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { SVGComponent } from "@calcom/types/SVGComponent";
import { Button, ButtonProps } from "../../components/button";
@ -58,7 +58,7 @@ type DialogContentProps = React.ComponentProps<typeof DialogPrimitive["Content"]
description?: string | JSX.Element | undefined;
closeText?: string;
actionDisabled?: boolean;
Icon?: Icon;
Icon?: SVGComponent;
};
export const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps>(

6
packages/ui/v2/core/Dropdown.tsx
View File

@ -2,9 +2,9 @@ import { CheckCircleIcon } from "@heroicons/react/outline";
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
import Link from "next/link";
import { ComponentProps, forwardRef } from "react";
import { Icon } from "react-feather";
import { classNames } from "@calcom/lib";
import { SVGComponent } from "@calcom/types/SVGComponent";
export const Dropdown = DropdownMenuPrimitive.Root;
@ -98,8 +98,8 @@ DropdownMenuRadioItem.displayName = "DropdownMenuRadioItem";
type DropdownItemProps = {
children: React.ReactNode;
color?: "destructive";
StartIcon?: Icon;
EndIcon?: Icon;
StartIcon?: SVGComponent;
EndIcon?: SVGComponent;
href?: string;
disabled?: boolean;
} & ButtonOrLinkProps;

3
packages/ui/v2/core/EmptyScreen.tsx
View File

@ -1,5 +1,4 @@
import React, { ReactNode } from "react";
import { Icon } from "react-feather";
import { IconType } from "react-icons";
import { SVGComponent } from "@calcom/types/SVGComponent";
@ -14,7 +13,7 @@ export default function EmptyScreen({
buttonOnClick,
buttonRaw,
}: {
Icon: SVGComponent | Icon | IconType;
Icon: SVGComponent | IconType;
headline: string;
description: string | React.ReactElement;
buttonText?: string;

4
packages/ui/v2/core/apps/Categories.tsx
View File

@ -1,7 +1,7 @@
import Link from "next/link";
import { ArrowRight } from "react-feather";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Icon } from "@calcom/ui";
import { SkeletonText } from "../skeleton";
import Slider from "./Slider";
@ -44,7 +44,7 @@ export default function AppStoreCategories({
)}
<p className="text-sm text-gray-500">
{isLocaleReady ? t("number_apps", { count: category.count }) : <SkeletonText invisible />}{" "}
<ArrowRight className="inline-block h-4 w-4" />
<Icon.FiArrowRight className="inline-block h-4 w-4" />
</p>
</div>
</a>

4
packages/ui/v2/core/banner.tsx
View File

@ -1,7 +1,7 @@
import { MouseEvent, useState } from "react";
import { Icon } from "react-feather";
import classNames from "@calcom/lib/classNames";
import { SVGComponent } from "@calcom/types/SVGComponent";
const stylesByVariant = {
neutral: { background: "bg-gray-100 ", text: "!text-gray-800", hover: "hover:!bg-gray-200" },
@ -14,7 +14,7 @@ export type BannerProps = {
description?: string;
variant: keyof typeof stylesByVariant;
errorMessage?: string;
Icon?: Icon;
Icon?: SVGComponent;
onDismiss: (event: MouseEvent<HTMLElement, globalThis.MouseEvent>) => void;
onAction?: (event: MouseEvent<HTMLElement, globalThis.MouseEvent>) => void;
actionText?: string;

4
packages/ui/v2/core/form/DatePicker.tsx
View File

@ -1,9 +1,9 @@
import "react-calendar/dist/Calendar.css";
import "react-date-picker/dist/DatePicker.css";
import PrimitiveDatePicker from "react-date-picker/dist/entry.nostyle";
import { Calendar } from "react-feather";
import classNames from "@calcom/lib/classNames";
import { Icon } from "@calcom/ui";
type Props = {
date: Date;
@ -22,7 +22,7 @@ const DatePicker = ({ minDate, disabled, date, onDatesChange, className }: Props
)}
calendarClassName="rounded-md"
clearIcon={null}
calendarIcon={<Calendar className="h-5 w-5 rounded-md text-gray-500" />}
calendarIcon={<Icon.FiCalendar className="h-5 w-5 rounded-md text-gray-500" />}
value={date}
minDate={minDate}
disabled={disabled}

11
packages/ui/v2/core/notifications.tsx
View File

@ -1,7 +1,8 @@
import classNames from "classnames";
import { Check, Info } from "react-feather";
import toast from "react-hot-toast";
import { Icon } from "@calcom/ui";
export function showToast(message: string, variant: "success" | "warning" | "error") {
switch (variant) {
case "success":
@ -12,7 +13,7 @@ export function showToast(message: string, variant: "success" | "warning" | "err
"data-testid-toast-success bg-brand-500 mb-2 flex h-9 items-center space-x-2 rounded-md p-3 text-sm font-semibold text-white shadow-md",
t.visible && "animate-fade-in-up"
)}>
<Check className="h-4 w-4" />
<Icon.FiCheck className="h-4 w-4" />
<p>{message}</p>
</div>
),
@ -27,7 +28,7 @@ export function showToast(message: string, variant: "success" | "warning" | "err
"animate-fade-in-up mb-2 flex h-9 items-center space-x-2 rounded-md bg-red-100 p-3 text-sm font-semibold text-red-900 shadow-md",
t.visible && "animate-fade-in-up"
)}>
<Info className="h-4 w-4" />
<Icon.FiInfo className="h-4 w-4" />
<p>{message}</p>
</div>
),
@ -42,7 +43,7 @@ export function showToast(message: string, variant: "success" | "warning" | "err
"animate-fade-in-up bg-brand-500 mb-2 flex h-9 items-center space-x-2 rounded-md p-3 text-sm font-semibold text-white shadow-md",
t.visible && "animate-fade-in-up"
)}>
<Info className="h-4 w-4" />
<Icon.FiInfo className="h-4 w-4" />
<p>{message}</p>
</div>
),
@ -57,7 +58,7 @@ export function showToast(message: string, variant: "success" | "warning" | "err
"animate-fade-in-up bg-brand-500 mb-2 flex h-9 items-center space-x-2 rounded-md p-3 text-sm font-semibold text-white shadow-md",
t.visible && "animate-fade-in-up"
)}>
<Check className="h-4 w-4" />
<Icon.FiCheck className="h-4 w-4" />
<p>{message}</p>
</div>
),