perf: Booker-Bundle Size Improvement - Lazy load react-select, remove lodash and Dom Purify (#10814)
This commit is contained in:
parent
67bb2ed798
commit
59e2f6e4a7
|
@ -1,4 +1,5 @@
|
|||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
// eslint-disable-next-line no-restricted-imports
|
||||
import { noop } from "lodash";
|
||||
import { useCallback, useState } from "react";
|
||||
import { Controller, FormProvider, useForm, useFormState } from "react-hook-form";
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import classNames from "classnames";
|
||||
// eslint-disable-next-line no-restricted-imports
|
||||
import { debounce, noop } from "lodash";
|
||||
import { useSession } from "next-auth/react";
|
||||
import { usePathname, useRouter, useSearchParams } from "next/navigation";
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import classNames from "classnames";
|
||||
// eslint-disable-next-line no-restricted-imports
|
||||
import { debounce, noop } from "lodash";
|
||||
import { useSession } from "next-auth/react";
|
||||
import type { RefCallback } from "react";
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
// eslint-disable-next-line no-restricted-imports
|
||||
import { debounce } from "lodash";
|
||||
import type { GetServerSidePropsContext } from "next";
|
||||
import { getCsrfToken } from "next-auth/react";
|
||||
|
|
|
@ -2,6 +2,7 @@ import type { Page } from "@playwright/test";
|
|||
import { expect } from "@playwright/test";
|
||||
import type { IncomingMessage, ServerResponse } from "http";
|
||||
import { createServer } from "http";
|
||||
// eslint-disable-next-line no-restricted-imports
|
||||
import { noop } from "lodash";
|
||||
|
||||
import { test } from "./fixtures";
|
||||
|
|
|
@ -929,7 +929,7 @@
|
|||
"verify_wallet": "Verify Wallet",
|
||||
"create_events_on": "Create events on",
|
||||
"enterprise_license": "This is an enterprise feature",
|
||||
"enterprise_license_description": "To enable this feature, have an administrator go to {{setupUrl}} to enter a license key. If a license key is already in place, please contact {{supportMail}} for help.",
|
||||
"enterprise_license_description": "To enable this feature, have an administrator go to <2>/auth/setup</2> to enter a license key. If a license key is already in place, please contact <5>{{SUPPORT_MAIL_ADDRESS}}</5> for help.",
|
||||
"enterprise_license_development": "You can test this feature on development mode. For production usage please have an administrator go to <2>/auth/setup</2> to enter a license key.",
|
||||
"missing_license": "Missing License",
|
||||
"signup_requires": "Commercial license required",
|
||||
|
|
|
@ -77,7 +77,6 @@
|
|||
"@playwright/test": "^1.31.2",
|
||||
"@snaplet/copycat": "^0.3.0",
|
||||
"@testing-library/jest-dom": "^5.16.5",
|
||||
"@types/dompurify": "^2.4.0",
|
||||
"c8": "^7.13.0",
|
||||
"dotenv-checker": "^1.1.5",
|
||||
"husky": "^8.0.0",
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
import chokidar from "chokidar";
|
||||
import fs from "fs";
|
||||
// eslint-disable-next-line no-restricted-imports
|
||||
import { debounce } from "lodash";
|
||||
import path from "path";
|
||||
import prettier from "prettier";
|
||||
|
@ -7,7 +8,7 @@ import prettier from "prettier";
|
|||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
//@ts-ignore
|
||||
import prettierConfig from "@calcom/config/prettier-preset";
|
||||
import { AppMeta } from "@calcom/types/App";
|
||||
import type { AppMeta } from "@calcom/types/App";
|
||||
|
||||
import { APP_STORE_PATH } from "./constants";
|
||||
import { getAppName } from "./utils/getAppName";
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
import dynamic from "next/dynamic";
|
||||
import type { ChangeEvent } from "react";
|
||||
import type {
|
||||
ButtonGroupProps,
|
||||
|
@ -7,9 +8,13 @@ import type {
|
|||
ProviderProps,
|
||||
} from "react-awesome-query-builder";
|
||||
|
||||
import { Button as CalButton, SelectWithValidation as Select, TextField, TextArea } from "@calcom/ui";
|
||||
import { Button as CalButton, TextField, TextArea } from "@calcom/ui";
|
||||
import { Trash, Plus } from "@calcom/ui/components/icon";
|
||||
|
||||
const Select = dynamic(
|
||||
async () => (await import("@calcom/ui")).SelectWithValidation
|
||||
) as unknown as typeof import("@calcom/ui").SelectWithValidation;
|
||||
|
||||
export type CommonProps<
|
||||
TVal extends
|
||||
| string
|
||||
|
|
|
@ -36,6 +36,12 @@ module.exports = {
|
|||
},
|
||||
],
|
||||
"unused-imports/no-unused-imports": "error",
|
||||
"no-restricted-imports": [
|
||||
"error",
|
||||
{
|
||||
patterns: ["lodash"],
|
||||
},
|
||||
],
|
||||
},
|
||||
overrides: [
|
||||
{
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import type { SelectedCalendar } from "@prisma/client";
|
||||
// eslint-disable-next-line no-restricted-imports
|
||||
import { sortBy } from "lodash";
|
||||
|
||||
import { getCalendar } from "@calcom/app-store/_utils/getCalendar";
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import type { DestinationCalendar, Booking } from "@prisma/client";
|
||||
// eslint-disable-next-line no-restricted-imports
|
||||
import { cloneDeep, merge } from "lodash";
|
||||
import { v5 as uuidv5 } from "uuid";
|
||||
import type { z } from "zod";
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
// eslint-disable-next-line no-restricted-imports
|
||||
import { cloneDeep } from "lodash";
|
||||
import type { TFunction } from "next-i18next";
|
||||
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
import type { DateArray, ParticipationStatus, ParticipationRole } from "ics";
|
||||
import { createEvent } from "ics";
|
||||
// eslint-disable-next-line no-restricted-imports
|
||||
import { cloneDeep } from "lodash";
|
||||
import type { TFunction } from "next-i18next";
|
||||
import { RRule } from "rrule";
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
import type { DateArray } from "ics";
|
||||
import { createEvent } from "ics";
|
||||
// eslint-disable-next-line no-restricted-imports
|
||||
import { cloneDeep } from "lodash";
|
||||
import type { TFunction } from "next-i18next";
|
||||
import { RRule } from "rrule";
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
// eslint-disable-next-line no-restricted-imports
|
||||
import { noop } from "lodash";
|
||||
import { useSearchParams } from "next/navigation";
|
||||
import type { FC } from "react";
|
||||
|
|
|
@ -2,6 +2,7 @@ import type { App, Attendee, Credential, EventTypeCustomInput } from "@prisma/cl
|
|||
import { Prisma } from "@prisma/client";
|
||||
import async from "async";
|
||||
import { isValidPhoneNumber } from "libphonenumber-js";
|
||||
// eslint-disable-next-line no-restricted-imports
|
||||
import { cloneDeep } from "lodash";
|
||||
import type { NextApiRequest } from "next";
|
||||
import short, { uuid } from "short-uuid";
|
||||
|
|
|
@ -1,10 +1,9 @@
|
|||
import DOMPurify from "dompurify";
|
||||
import { useSession } from "next-auth/react";
|
||||
import { Trans } from "next-i18next";
|
||||
import type { AriaRole, ComponentType } from "react";
|
||||
import React, { Fragment, useEffect } from "react";
|
||||
|
||||
import { APP_NAME, CONSOLE_URL, SUPPORT_MAIL_ADDRESS, WEBAPP_URL } from "@calcom/lib/constants";
|
||||
import { SUPPORT_MAIL_ADDRESS, WEBAPP_URL } from "@calcom/lib/constants";
|
||||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||
import { EmptyScreen, TopBanner } from "@calcom/ui";
|
||||
import { AlertTriangle } from "@calcom/ui/components/icon";
|
||||
|
@ -62,20 +61,17 @@ const LicenseRequired = ({ children, as = "", ...rest }: LicenseRequiredProps) =
|
|||
Icon={AlertTriangle}
|
||||
headline={t("enterprise_license")}
|
||||
description={
|
||||
<div
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: DOMPurify.sanitize(
|
||||
t("enterprise_license_description", {
|
||||
consoleUrl: `<a href="${CONSOLE_URL}" target="_blank" rel="noopener noreferrer" class="underline">
|
||||
${APP_NAME}
|
||||
</a>`,
|
||||
setupUrl: `<a href="${WEBAPP_URL}/auth/setup" class="underline">/auth/setup</a>`,
|
||||
supportMail: `<a href="mailto:${SUPPORT_MAIL_ADDRESS}" class="underline">
|
||||
${SUPPORT_MAIL_ADDRESS}</a>`,
|
||||
})
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<Trans i18nKey="enterprise_license_description">
|
||||
To enable this feature, have an administrator go to{" "}
|
||||
<a href={`${WEBAPP_URL}/auth/setup`} className="underline">
|
||||
/auth/setup
|
||||
</a>
|
||||
to enter a license key. If a license key is already in place, please contact{" "}
|
||||
<a href={`mailto:${SUPPORT_MAIL_ADDRESS}`} className="underline">
|
||||
<Trans>{{ SUPPORT_MAIL_ADDRESS }}</Trans>
|
||||
</a>
|
||||
for help.
|
||||
</Trans>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
// eslint-disable-next-line no-restricted-imports
|
||||
import { get } from "lodash";
|
||||
import React from "react";
|
||||
import type z from "zod";
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
// eslint-disable-next-line no-restricted-imports
|
||||
import { noop } from "lodash";
|
||||
import { useIntercom as useIntercomLib } from "react-use-intercom";
|
||||
import { z } from "zod";
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
// eslint-disable-next-line no-restricted-imports
|
||||
import { noop } from "lodash";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
|
||||
|
|
|
@ -13,7 +13,6 @@
|
|||
"@calcom/ui": "*",
|
||||
"@lexical/react": "^0.9.0",
|
||||
"@tanstack/react-table": "^8.9.3",
|
||||
"dompurify": "^2.4.1",
|
||||
"framer-motion": "^10.12.8",
|
||||
"lexical": "^0.9.0",
|
||||
"react-select": "^5.7.0",
|
||||
|
|
|
@ -1,6 +1,5 @@
|
|||
import type { Prisma } from "@prisma/client";
|
||||
import type { UnitTypeLongPlural } from "dayjs";
|
||||
import { pick } from "lodash";
|
||||
import z, { ZodNullable, ZodObject, ZodOptional } from "zod";
|
||||
|
||||
/* eslint-disable no-underscore-dangle */
|
||||
|
@ -589,7 +588,9 @@ export const allManagedEventTypeProps: { [k in keyof Omit<Prisma.EventTypeSelect
|
|||
// All properties that are defined as unlocked based on all managed props
|
||||
// Eventually this is going to be just a default and the user can change the config through the UI
|
||||
export const unlockedManagedEventTypeProps = {
|
||||
...pick(allManagedEventTypeProps, ["locations", "scheduleId", "destinationCalendar"]),
|
||||
locations: allManagedEventTypeProps.locations,
|
||||
scheduleId: allManagedEventTypeProps.scheduleId,
|
||||
destinationCalendar: allManagedEventTypeProps.destinationCalendar,
|
||||
};
|
||||
|
||||
// The PR at https://github.com/colinhacks/zod/pull/2157 addresses this issue and improves email validation
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import { type PrismaClient, Prisma } from "@prisma/client";
|
||||
// eslint-disable-next-line no-restricted-imports
|
||||
import { orderBy } from "lodash";
|
||||
|
||||
import { hasFilter } from "@calcom/features/filters/lib/hasFilter";
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
// eslint-disable-next-line no-restricted-imports
|
||||
import { countBy } from "lodash";
|
||||
import { v4 as uuid } from "uuid";
|
||||
|
||||
|
|
|
@ -5,19 +5,19 @@ export {
|
|||
EmailField,
|
||||
EmailInput,
|
||||
FieldsetLegend,
|
||||
Form,
|
||||
Input,
|
||||
InputField,
|
||||
InputGroupBox,
|
||||
InputLeading,
|
||||
PasswordField,
|
||||
TextArea,
|
||||
TextAreaField,
|
||||
TextField,
|
||||
InputFieldWithSelect,
|
||||
NumberInput,
|
||||
FilterSearchField,
|
||||
} from "./inputs/Input";
|
||||
|
||||
export { InputFieldWithSelect } from "./inputs/InputFieldWithSelect";
|
||||
|
||||
export { InputField, Input, TextField } from "./inputs/TextField";
|
||||
export { Form } from "./inputs/Form";
|
||||
export { Label } from "./inputs/Label";
|
||||
export { Select, SelectField, SelectWithValidation, getReactSelectProps } from "./select";
|
||||
export { TimezoneSelect } from "./timezone-select";
|
||||
|
|
|
@ -0,0 +1,42 @@
|
|||
import type { ReactElement, Ref } from "react";
|
||||
import React, { forwardRef } from "react";
|
||||
import type { FieldValues, SubmitHandler, UseFormReturn } from "react-hook-form";
|
||||
import { FormProvider } from "react-hook-form";
|
||||
|
||||
import { getErrorFromUnknown } from "@calcom/lib/errors";
|
||||
|
||||
import { showToast } from "../../..";
|
||||
|
||||
type FormProps<T extends object> = { form: UseFormReturn<T>; handleSubmit: SubmitHandler<T> } & Omit<
|
||||
JSX.IntrinsicElements["form"],
|
||||
"onSubmit"
|
||||
>;
|
||||
|
||||
const PlainForm = <T extends FieldValues>(props: FormProps<T>, ref: Ref<HTMLFormElement>) => {
|
||||
const { form, handleSubmit, ...passThrough } = props;
|
||||
|
||||
return (
|
||||
<FormProvider {...form}>
|
||||
<form
|
||||
ref={ref}
|
||||
onSubmit={(event) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
form
|
||||
.handleSubmit(handleSubmit)(event)
|
||||
.catch((err) => {
|
||||
// FIXME: Booking Pages don't have toast, so this error is never shown
|
||||
showToast(`${getErrorFromUnknown(err).message}`, "error");
|
||||
});
|
||||
}}
|
||||
{...passThrough}>
|
||||
{props.children}
|
||||
</form>
|
||||
</FormProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export const Form = forwardRef(PlainForm) as <T extends FieldValues>(
|
||||
p: FormProps<T> & { ref?: Ref<HTMLFormElement> }
|
||||
) => ReactElement;
|
|
@ -1,35 +1,14 @@
|
|||
import type { ReactElement, ReactNode, Ref } from "react";
|
||||
import type { ReactNode } from "react";
|
||||
import React, { forwardRef, useCallback, useId, useState } from "react";
|
||||
import type { FieldValues, SubmitHandler, UseFormReturn } from "react-hook-form";
|
||||
import { FormProvider, useFormContext } from "react-hook-form";
|
||||
import { useFormContext } from "react-hook-form";
|
||||
|
||||
import classNames from "@calcom/lib/classNames";
|
||||
import { getErrorFromUnknown } from "@calcom/lib/errors";
|
||||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||
|
||||
import { Alert, showToast, Skeleton, Tooltip, UnstyledSelect } from "../../..";
|
||||
import { Eye, EyeOff, X, Search } from "../../icon";
|
||||
import { HintsOrErrors } from "./HintOrErrors";
|
||||
import { Alert, Input, InputField, Tooltip } from "../../..";
|
||||
import { Eye, EyeOff, Search } from "../../icon";
|
||||
import { Label } from "./Label";
|
||||
|
||||
type InputProps = JSX.IntrinsicElements["input"] & { isFullWidth?: boolean };
|
||||
|
||||
export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
|
||||
{ isFullWidth = true, ...props },
|
||||
ref
|
||||
) {
|
||||
return (
|
||||
<input
|
||||
{...props}
|
||||
ref={ref}
|
||||
className={classNames(
|
||||
"hover:border-emphasis dark:focus:border-emphasis border-default bg-default placeholder:text-muted text-emphasis disabled:hover:border-default disabled:bg-subtle focus:ring-brand-default mb-2 block h-9 rounded-md border px-3 py-2 text-sm leading-4 focus:border-neutral-300 focus:outline-none focus:ring-2 disabled:cursor-not-allowed",
|
||||
isFullWidth && "w-full",
|
||||
props.className
|
||||
)}
|
||||
/>
|
||||
);
|
||||
});
|
||||
import type { InputFieldProps } from "./types";
|
||||
|
||||
export function InputLeading(props: JSX.IntrinsicElements["div"]) {
|
||||
return (
|
||||
|
@ -39,174 +18,6 @@ export function InputLeading(props: JSX.IntrinsicElements["div"]) {
|
|||
);
|
||||
}
|
||||
|
||||
type InputFieldProps = {
|
||||
label?: ReactNode;
|
||||
LockedIcon?: React.ReactNode;
|
||||
hint?: ReactNode;
|
||||
hintErrors?: string[];
|
||||
addOnLeading?: ReactNode;
|
||||
addOnSuffix?: ReactNode;
|
||||
inputIsFullWidth?: boolean;
|
||||
addOnFilled?: boolean;
|
||||
addOnClassname?: string;
|
||||
error?: string;
|
||||
labelSrOnly?: boolean;
|
||||
containerClassName?: string;
|
||||
showAsteriskIndicator?: boolean;
|
||||
t?: (key: string) => string;
|
||||
} & React.ComponentProps<typeof Input> & {
|
||||
labelProps?: React.ComponentProps<typeof Label>;
|
||||
labelClassName?: string;
|
||||
};
|
||||
|
||||
type AddonProps = {
|
||||
children: React.ReactNode;
|
||||
isFilled?: boolean;
|
||||
className?: string;
|
||||
error?: boolean;
|
||||
};
|
||||
|
||||
const Addon = ({ isFilled, children, className, error }: AddonProps) => (
|
||||
<div
|
||||
className={classNames(
|
||||
"addon-wrapper border-default [input:hover_+_&]:border-emphasis [input:hover_+_&]:border-l-default [&:has(+_input:hover)]:border-emphasis [&:has(+_input:hover)]:border-r-default h-9 border px-3",
|
||||
isFilled && "bg-subtle",
|
||||
className
|
||||
)}>
|
||||
<div
|
||||
className={classNames(
|
||||
"min-h-9 flex flex-col justify-center text-sm leading-7",
|
||||
error ? "text-error" : "text-default"
|
||||
)}>
|
||||
<span className="flex whitespace-nowrap">{children}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
export const InputField = forwardRef<HTMLInputElement, InputFieldProps>(function InputField(props, ref) {
|
||||
const id = useId();
|
||||
const { t: _t, isLocaleReady, i18n } = useLocale();
|
||||
const t = props.t || _t;
|
||||
const name = props.name || "";
|
||||
const {
|
||||
label = t(name),
|
||||
labelProps,
|
||||
labelClassName,
|
||||
disabled,
|
||||
LockedIcon,
|
||||
placeholder = isLocaleReady && i18n.exists(name + "_placeholder") ? t(name + "_placeholder") : "",
|
||||
className,
|
||||
addOnLeading,
|
||||
addOnSuffix,
|
||||
addOnFilled = true,
|
||||
addOnClassname,
|
||||
inputIsFullWidth,
|
||||
hint,
|
||||
type,
|
||||
hintErrors,
|
||||
labelSrOnly,
|
||||
containerClassName,
|
||||
readOnly,
|
||||
showAsteriskIndicator,
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
t: __t,
|
||||
...passThrough
|
||||
} = props;
|
||||
|
||||
const [inputValue, setInputValue] = useState<string>("");
|
||||
|
||||
return (
|
||||
<div className={classNames(containerClassName)}>
|
||||
{!!name && (
|
||||
<Skeleton
|
||||
as={Label}
|
||||
htmlFor={id}
|
||||
loadingClassName="w-16"
|
||||
{...labelProps}
|
||||
className={classNames(labelClassName, labelSrOnly && "sr-only", props.error && "text-error")}>
|
||||
{label}
|
||||
{showAsteriskIndicator && !readOnly && passThrough.required ? (
|
||||
<span className="text-default ml-1 font-medium">*</span>
|
||||
) : null}
|
||||
{LockedIcon}
|
||||
</Skeleton>
|
||||
)}
|
||||
{addOnLeading || addOnSuffix ? (
|
||||
<div
|
||||
dir="ltr"
|
||||
className="focus-within:ring-brand-default group relative mb-1 flex items-center rounded-md focus-within:outline-none focus-within:ring-2">
|
||||
{addOnLeading && (
|
||||
<Addon isFilled={addOnFilled} className={classNames("rounded-l-md border-r-0", addOnClassname)}>
|
||||
{addOnLeading}
|
||||
</Addon>
|
||||
)}
|
||||
<Input
|
||||
id={id}
|
||||
type={type}
|
||||
placeholder={placeholder}
|
||||
isFullWidth={inputIsFullWidth}
|
||||
className={classNames(
|
||||
className,
|
||||
"disabled:bg-subtle disabled:hover:border-subtle disabled:cursor-not-allowed",
|
||||
addOnLeading && "rounded-l-none border-l-0",
|
||||
addOnSuffix && "rounded-r-none border-r-0",
|
||||
type === "search" && "pr-8",
|
||||
"!my-0 !ring-0"
|
||||
)}
|
||||
{...passThrough}
|
||||
{...(type == "search" && {
|
||||
onChange: (e) => {
|
||||
setInputValue(e.target.value);
|
||||
props.onChange && props.onChange(e);
|
||||
},
|
||||
value: inputValue,
|
||||
})}
|
||||
disabled={readOnly || disabled}
|
||||
ref={ref}
|
||||
/>
|
||||
{addOnSuffix && (
|
||||
<Addon
|
||||
isFilled={addOnFilled}
|
||||
className={classNames("ltr:rounded-r-md rtl:rounded-l-md", addOnClassname)}>
|
||||
{addOnSuffix}
|
||||
</Addon>
|
||||
)}
|
||||
{type === "search" && inputValue?.toString().length > 0 && (
|
||||
<X
|
||||
className="text-subtle absolute top-2.5 h-4 w-4 cursor-pointer ltr:right-2 rtl:left-2"
|
||||
onClick={(e) => {
|
||||
setInputValue("");
|
||||
props.onChange && props.onChange(e as unknown as React.ChangeEvent<HTMLInputElement>);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<Input
|
||||
id={id}
|
||||
type={type}
|
||||
placeholder={placeholder}
|
||||
className={classNames(
|
||||
className,
|
||||
"disabled:bg-subtle disabled:hover:border-subtle disabled:cursor-not-allowed"
|
||||
)}
|
||||
{...passThrough}
|
||||
readOnly={readOnly}
|
||||
ref={ref}
|
||||
isFullWidth={inputIsFullWidth}
|
||||
disabled={readOnly || disabled}
|
||||
/>
|
||||
)}
|
||||
<HintsOrErrors hintErrors={hintErrors} fieldName={name} t={t} />
|
||||
{hint && <div className="text-default mt-2 flex items-center text-sm">{hint}</div>}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
export const TextField = forwardRef<HTMLInputElement, InputFieldProps>(function TextField(props, ref) {
|
||||
return <InputField ref={ref} {...props} />;
|
||||
});
|
||||
|
||||
export const PasswordField = forwardRef<HTMLInputElement, InputFieldProps>(function PasswordField(
|
||||
props,
|
||||
ref
|
||||
|
@ -335,40 +146,6 @@ export const TextAreaField = forwardRef<HTMLTextAreaElement, TextAreaFieldProps>
|
|||
);
|
||||
});
|
||||
|
||||
type FormProps<T extends object> = { form: UseFormReturn<T>; handleSubmit: SubmitHandler<T> } & Omit<
|
||||
JSX.IntrinsicElements["form"],
|
||||
"onSubmit"
|
||||
>;
|
||||
|
||||
const PlainForm = <T extends FieldValues>(props: FormProps<T>, ref: Ref<HTMLFormElement>) => {
|
||||
const { form, handleSubmit, ...passThrough } = props;
|
||||
|
||||
return (
|
||||
<FormProvider {...form}>
|
||||
<form
|
||||
ref={ref}
|
||||
onSubmit={(event) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
form
|
||||
.handleSubmit(handleSubmit)(event)
|
||||
.catch((err) => {
|
||||
// FIXME: Booking Pages don't have toast, so this error is never shown
|
||||
showToast(`${getErrorFromUnknown(err).message}`, "error");
|
||||
});
|
||||
}}
|
||||
{...passThrough}>
|
||||
{props.children}
|
||||
</form>
|
||||
</FormProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export const Form = forwardRef(PlainForm) as <T extends FieldValues>(
|
||||
p: FormProps<T> & { ref?: Ref<HTMLFormElement> }
|
||||
) => ReactElement;
|
||||
|
||||
export function FieldsetLegend(props: JSX.IntrinsicElements["legend"]) {
|
||||
return (
|
||||
<legend {...props} className={classNames("text-default text-sm font-medium leading-4", props.className)}>
|
||||
|
@ -387,21 +164,6 @@ export function InputGroupBox(props: JSX.IntrinsicElements["div"]) {
|
|||
);
|
||||
}
|
||||
|
||||
export const InputFieldWithSelect = forwardRef<
|
||||
HTMLInputElement,
|
||||
InputFieldProps & { selectProps: typeof UnstyledSelect }
|
||||
>(function EmailField(props, ref) {
|
||||
return (
|
||||
<InputField
|
||||
ref={ref}
|
||||
{...props}
|
||||
inputIsFullWidth={false}
|
||||
addOnClassname="!px-0"
|
||||
addOnSuffix={<UnstyledSelect {...props.selectProps} />}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
export const NumberInput = forwardRef<HTMLInputElement, InputFieldProps>(function NumberInput(props, ref) {
|
||||
return (
|
||||
<Input
|
||||
|
|
|
@ -0,0 +1,19 @@
|
|||
import React, { forwardRef } from "react";
|
||||
|
||||
import { InputField, UnstyledSelect } from "../../..";
|
||||
import type { InputFieldProps } from "./types";
|
||||
|
||||
export const InputFieldWithSelect = forwardRef<
|
||||
HTMLInputElement,
|
||||
InputFieldProps & { selectProps: typeof UnstyledSelect }
|
||||
>(function EmailField(props, ref) {
|
||||
return (
|
||||
<InputField
|
||||
ref={ref}
|
||||
{...props}
|
||||
inputIsFullWidth={false}
|
||||
addOnClassname="!px-0"
|
||||
addOnSuffix={<UnstyledSelect {...props.selectProps} />}
|
||||
/>
|
||||
);
|
||||
});
|
|
@ -0,0 +1,175 @@
|
|||
import React, { forwardRef, useId, useState } from "react";
|
||||
|
||||
import classNames from "@calcom/lib/classNames";
|
||||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||
|
||||
import { Skeleton } from "../../..";
|
||||
import { X } from "../../icon";
|
||||
import { HintsOrErrors } from "./HintOrErrors";
|
||||
import { Label } from "./Label";
|
||||
import type { InputFieldProps, InputProps } from "./types";
|
||||
|
||||
export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
|
||||
{ isFullWidth = true, ...props },
|
||||
ref
|
||||
) {
|
||||
return (
|
||||
<input
|
||||
{...props}
|
||||
ref={ref}
|
||||
className={classNames(
|
||||
"hover:border-emphasis dark:focus:border-emphasis border-default bg-default placeholder:text-muted text-emphasis disabled:hover:border-default disabled:bg-subtle focus:ring-brand-default mb-2 block h-9 rounded-md border px-3 py-2 text-sm leading-4 focus:border-neutral-300 focus:outline-none focus:ring-2 disabled:cursor-not-allowed",
|
||||
isFullWidth && "w-full",
|
||||
props.className
|
||||
)}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
type AddonProps = {
|
||||
children: React.ReactNode;
|
||||
isFilled?: boolean;
|
||||
className?: string;
|
||||
error?: boolean;
|
||||
};
|
||||
|
||||
const Addon = ({ isFilled, children, className, error }: AddonProps) => (
|
||||
<div
|
||||
className={classNames(
|
||||
"addon-wrapper border-default [input:hover_+_&]:border-emphasis [input:hover_+_&]:border-l-default [&:has(+_input:hover)]:border-emphasis [&:has(+_input:hover)]:border-r-default h-9 border px-3",
|
||||
isFilled && "bg-subtle",
|
||||
className
|
||||
)}>
|
||||
<div
|
||||
className={classNames(
|
||||
"min-h-9 flex flex-col justify-center text-sm leading-7",
|
||||
error ? "text-error" : "text-default"
|
||||
)}>
|
||||
<span className="flex whitespace-nowrap">{children}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
export const InputField = forwardRef<HTMLInputElement, InputFieldProps>(function InputField(props, ref) {
|
||||
const id = useId();
|
||||
const { t: _t, isLocaleReady, i18n } = useLocale();
|
||||
const t = props.t || _t;
|
||||
const name = props.name || "";
|
||||
const {
|
||||
label = t(name),
|
||||
labelProps,
|
||||
labelClassName,
|
||||
disabled,
|
||||
LockedIcon,
|
||||
placeholder = isLocaleReady && i18n.exists(name + "_placeholder") ? t(name + "_placeholder") : "",
|
||||
className,
|
||||
addOnLeading,
|
||||
addOnSuffix,
|
||||
addOnFilled = true,
|
||||
addOnClassname,
|
||||
inputIsFullWidth,
|
||||
hint,
|
||||
type,
|
||||
hintErrors,
|
||||
labelSrOnly,
|
||||
containerClassName,
|
||||
readOnly,
|
||||
showAsteriskIndicator,
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
t: __t,
|
||||
...passThrough
|
||||
} = props;
|
||||
|
||||
const [inputValue, setInputValue] = useState<string>("");
|
||||
|
||||
return (
|
||||
<div className={classNames(containerClassName)}>
|
||||
{!!name && (
|
||||
<Skeleton
|
||||
as={Label}
|
||||
htmlFor={id}
|
||||
loadingClassName="w-16"
|
||||
{...labelProps}
|
||||
className={classNames(labelClassName, labelSrOnly && "sr-only", props.error && "text-error")}>
|
||||
{label}
|
||||
{showAsteriskIndicator && !readOnly && passThrough.required ? (
|
||||
<span className="text-default ml-1 font-medium">*</span>
|
||||
) : null}
|
||||
{LockedIcon}
|
||||
</Skeleton>
|
||||
)}
|
||||
{addOnLeading || addOnSuffix ? (
|
||||
<div
|
||||
dir="ltr"
|
||||
className="focus-within:ring-brand-default group relative mb-1 flex items-center rounded-md focus-within:outline-none focus-within:ring-2">
|
||||
{addOnLeading && (
|
||||
<Addon isFilled={addOnFilled} className={classNames("rounded-l-md border-r-0", addOnClassname)}>
|
||||
{addOnLeading}
|
||||
</Addon>
|
||||
)}
|
||||
<Input
|
||||
id={id}
|
||||
type={type}
|
||||
placeholder={placeholder}
|
||||
isFullWidth={inputIsFullWidth}
|
||||
className={classNames(
|
||||
className,
|
||||
"disabled:bg-subtle disabled:hover:border-subtle disabled:cursor-not-allowed",
|
||||
addOnLeading && "rounded-l-none border-l-0",
|
||||
addOnSuffix && "rounded-r-none border-r-0",
|
||||
type === "search" && "pr-8",
|
||||
"!my-0 !ring-0"
|
||||
)}
|
||||
{...passThrough}
|
||||
{...(type == "search" && {
|
||||
onChange: (e) => {
|
||||
setInputValue(e.target.value);
|
||||
props.onChange && props.onChange(e);
|
||||
},
|
||||
value: inputValue,
|
||||
})}
|
||||
disabled={readOnly || disabled}
|
||||
ref={ref}
|
||||
/>
|
||||
{addOnSuffix && (
|
||||
<Addon
|
||||
isFilled={addOnFilled}
|
||||
className={classNames("ltr:rounded-r-md rtl:rounded-l-md", addOnClassname)}>
|
||||
{addOnSuffix}
|
||||
</Addon>
|
||||
)}
|
||||
{type === "search" && inputValue?.toString().length > 0 && (
|
||||
<X
|
||||
className="text-subtle absolute top-2.5 h-4 w-4 cursor-pointer ltr:right-2 rtl:left-2"
|
||||
onClick={(e) => {
|
||||
setInputValue("");
|
||||
props.onChange && props.onChange(e as unknown as React.ChangeEvent<HTMLInputElement>);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<Input
|
||||
id={id}
|
||||
type={type}
|
||||
placeholder={placeholder}
|
||||
className={classNames(
|
||||
className,
|
||||
"disabled:bg-subtle disabled:hover:border-subtle disabled:cursor-not-allowed"
|
||||
)}
|
||||
{...passThrough}
|
||||
readOnly={readOnly}
|
||||
ref={ref}
|
||||
isFullWidth={inputIsFullWidth}
|
||||
disabled={readOnly || disabled}
|
||||
/>
|
||||
)}
|
||||
<HintsOrErrors hintErrors={hintErrors} fieldName={name} t={t} />
|
||||
{hint && <div className="text-default mt-2 flex items-center text-sm">{hint}</div>}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
export const TextField = forwardRef<HTMLInputElement, InputFieldProps>(function TextField(props, ref) {
|
||||
return <InputField ref={ref} {...props} />;
|
||||
});
|
|
@ -4,15 +4,9 @@ import { render, fireEvent } from "@testing-library/react";
|
|||
import { vi } from "vitest";
|
||||
|
||||
import type { UnstyledSelect } from "../../../form/Select";
|
||||
import {
|
||||
EmailField,
|
||||
TextAreaField,
|
||||
InputField,
|
||||
PasswordField,
|
||||
NumberInput,
|
||||
FilterSearchField,
|
||||
InputFieldWithSelect,
|
||||
} from "./Input";
|
||||
import { EmailField, TextAreaField, PasswordField, NumberInput, FilterSearchField } from "./Input";
|
||||
import { InputFieldWithSelect } from "./InputFieldWithSelect";
|
||||
import { InputField } from "./TextField";
|
||||
|
||||
const onChangeMock = vi.fn();
|
||||
|
||||
|
|
|
@ -0,0 +1,25 @@
|
|||
import type { ReactNode } from "react";
|
||||
|
||||
import type { Input } from "./TextField";
|
||||
|
||||
export type InputFieldProps = {
|
||||
label?: ReactNode;
|
||||
LockedIcon?: React.ReactNode;
|
||||
hint?: ReactNode;
|
||||
hintErrors?: string[];
|
||||
addOnLeading?: ReactNode;
|
||||
addOnSuffix?: ReactNode;
|
||||
inputIsFullWidth?: boolean;
|
||||
addOnFilled?: boolean;
|
||||
addOnClassname?: string;
|
||||
error?: string;
|
||||
labelSrOnly?: boolean;
|
||||
containerClassName?: string;
|
||||
showAsteriskIndicator?: boolean;
|
||||
t?: (key: string) => string;
|
||||
} & React.ComponentProps<typeof Input> & {
|
||||
labelProps?: React.ComponentProps<typeof Label>;
|
||||
labelClassName?: string;
|
||||
};
|
||||
|
||||
export type InputProps = JSX.IntrinsicElements["input"] & { isFullWidth?: boolean };
|
|
@ -1,3 +1,4 @@
|
|||
// eslint-disable-next-line no-restricted-imports
|
||||
import { noop } from "lodash";
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
import type { Dispatch, SetStateAction } from "react";
|
||||
|
|
|
@ -1,4 +1,3 @@
|
|||
import { merge } from "lodash";
|
||||
import type { NextSeoProps } from "next-seo";
|
||||
import { NextSeo } from "next-seo";
|
||||
import { usePathname } from "next/navigation";
|
||||
|
@ -31,7 +30,7 @@ const buildSeoMeta = (pageProps: {
|
|||
siteName?: string;
|
||||
url?: string;
|
||||
canonical?: string;
|
||||
}): NextSeoProps => {
|
||||
}) => {
|
||||
const { title, description, image, canonical, siteName = seoConfig.headSeo.siteName } = pageProps;
|
||||
return {
|
||||
title: title,
|
||||
|
@ -123,7 +122,18 @@ export const HeadSeo = (props: HeadSeoProps): JSX.Element => {
|
|||
});
|
||||
}
|
||||
|
||||
const seoProps: NextSeoProps = merge(nextSeoProps, seoObject);
|
||||
// Instead of doing a blackbox deep merge which can be tricky implementation wise and need a good implementation, we should generate the object manually as we know the properties
|
||||
// Goal is to avoid big dependency
|
||||
const seoProps: NextSeoProps = {
|
||||
...nextSeoProps,
|
||||
...seoObject,
|
||||
openGraph: {
|
||||
...nextSeoProps.openGraph,
|
||||
...seoObject.openGraph,
|
||||
images: [...(nextSeoProps.openGraph?.images || []), ...seoObject.openGraph.images],
|
||||
},
|
||||
additionalMetaTags: [...(nextSeoProps.additionalMetaTags || [])],
|
||||
};
|
||||
|
||||
return <NextSeo {...seoProps} />;
|
||||
};
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import classNames from "classnames";
|
||||
// eslint-disable-next-line no-restricted-imports
|
||||
import { noop } from "lodash";
|
||||
import type { ComponentType, ReactNode } from "react";
|
||||
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
// eslint-disable-next-line no-restricted-imports
|
||||
import { noop } from "lodash";
|
||||
import { usePathname } from "next/navigation";
|
||||
import React, { useEffect, useState } from "react";
|
||||
|
|
72
yarn.lock
72
yarn.lock
|
@ -4255,7 +4255,6 @@ __metadata:
|
|||
"@lexical/react": ^0.9.0
|
||||
"@tanstack/react-table": ^8.9.3
|
||||
"@testing-library/react-hooks": ^8.0.1
|
||||
dompurify: ^2.4.1
|
||||
framer-motion: ^10.12.8
|
||||
lexical: ^0.9.0
|
||||
react-select: ^5.7.0
|
||||
|
@ -4608,6 +4607,7 @@ __metadata:
|
|||
rollup-plugin-polyfill-node: ^0.10.2
|
||||
storybook-addon-designs: ^6.3.1
|
||||
storybook-addon-next: ^1.6.9
|
||||
storybook-addon-next-router: ^4.0.2
|
||||
storybook-addon-rtl-direction: ^0.0.19
|
||||
storybook-react-i18next: ^1.1.2
|
||||
tailwindcss: ^3.3.1
|
||||
|
@ -5012,6 +5012,7 @@ __metadata:
|
|||
next-collect: ^0.2.1
|
||||
next-i18next: ^13.2.2
|
||||
next-seo: ^6.0.0
|
||||
playwright: ^1.31.2
|
||||
postcss: ^8.4.18
|
||||
prism-react-renderer: ^1.3.5
|
||||
react: ^18.2.0
|
||||
|
@ -12033,15 +12034,6 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@types/dompurify@npm:^2.4.0":
|
||||
version: 2.4.0
|
||||
resolution: "@types/dompurify@npm:2.4.0"
|
||||
dependencies:
|
||||
"@types/trusted-types": "*"
|
||||
checksum: b48cd81e997794ebc390c7c5bef1a67ec14a6f2f0521973e07e06af186c7583abe114d94d24868c0632b9573f5bd77131a4b76f3fffdf089ba99a4e53dd46c39
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@types/eslint-scope@npm:^3.7.3":
|
||||
version: 3.7.4
|
||||
resolution: "@types/eslint-scope@npm:3.7.4"
|
||||
|
@ -12723,7 +12715,7 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@types/trusted-types@npm:*, @types/trusted-types@npm:^2.0.2":
|
||||
"@types/trusted-types@npm:^2.0.2":
|
||||
version: 2.0.2
|
||||
resolution: "@types/trusted-types@npm:2.0.2"
|
||||
checksum: 3371eef5f1c50e1c3c07a127c1207b262ba65b83dd167a1c460fc1b135a3fb0c97b9f508efebd383f239cc5dd5b7169093686a692a501fde9c3f7208657d9b0d
|
||||
|
@ -15747,7 +15739,6 @@ __metadata:
|
|||
"@playwright/test": ^1.31.2
|
||||
"@snaplet/copycat": ^0.3.0
|
||||
"@testing-library/jest-dom": ^5.16.5
|
||||
"@types/dompurify": ^2.4.0
|
||||
c8: ^7.13.0
|
||||
city-timezones: ^1.2.1
|
||||
dotenv-checker: ^1.1.5
|
||||
|
@ -18281,13 +18272,6 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"dompurify@npm:^2.4.1":
|
||||
version: 2.4.1
|
||||
resolution: "dompurify@npm:2.4.1"
|
||||
checksum: 1169177465b3cbb25a44322937fba549f6c4e1a91b83245d144471be26619c835cccf0f8e20aa78c25ac11a06efd17cc1b9db9cacadceb78a4c08a1029eafee5
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"domutils@npm:^2.0.0, domutils@npm:^2.5.2, domutils@npm:^2.8.0":
|
||||
version: 2.8.0
|
||||
resolution: "domutils@npm:2.8.0"
|
||||
|
@ -28929,6 +28913,26 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"playwright-core@npm:1.37.1":
|
||||
version: 1.37.1
|
||||
resolution: "playwright-core@npm:1.37.1"
|
||||
bin:
|
||||
playwright-core: cli.js
|
||||
checksum: 69f818da2230057584140d5b3af7778a4f4a822b5b18d133abfc5d259128becb943c343a2ddf6b0635277a69f28983e83e2bc3fce23595ececb1e410475b6368
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"playwright@npm:^1.31.2":
|
||||
version: 1.37.1
|
||||
resolution: "playwright@npm:1.37.1"
|
||||
dependencies:
|
||||
playwright-core: 1.37.1
|
||||
bin:
|
||||
playwright: cli.js
|
||||
checksum: 99406ef3e15b83a659cb23ef1d92d9935789aad430580d1e0371087dfdf266891483c6f97cfa06bf5f49f081eacd44245d05d20714f98531edef4cc317044d6b
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"pngjs@npm:^3.0.0, pngjs@npm:^3.3.3":
|
||||
version: 3.4.0
|
||||
resolution: "pngjs@npm:3.4.0"
|
||||
|
@ -33188,6 +33192,22 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"storybook-addon-next-router@npm:^4.0.2":
|
||||
version: 4.0.2
|
||||
resolution: "storybook-addon-next-router@npm:4.0.2"
|
||||
dependencies:
|
||||
tslib: 2.4.0
|
||||
peerDependencies:
|
||||
"@storybook/addon-actions": ^6.0.0
|
||||
"@storybook/addons": ^6.0.0
|
||||
"@storybook/client-api": ^6.0.0
|
||||
next: ^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0
|
||||
react: ^16.8.0 || ^17.0.0 || ^18.0.0
|
||||
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
|
||||
checksum: 5e3d1b2510700c21d175e10d56bcad970a8b390715bbd8e9767528e60165c4bc651ef94a7a854f042185454c51c57d884b03c625c0ee28000d3916e11a6d865f
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"storybook-addon-next@npm:^1.6.9":
|
||||
version: 1.6.9
|
||||
resolution: "storybook-addon-next@npm:1.6.9"
|
||||
|
@ -34929,6 +34949,13 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"tslib@npm:2.4.0, tslib@npm:^2.0.1, tslib@npm:^2.0.3":
|
||||
version: 2.4.0
|
||||
resolution: "tslib@npm:2.4.0"
|
||||
checksum: 8c4aa6a3c5a754bf76aefc38026134180c053b7bd2f81338cb5e5ebf96fefa0f417bff221592bf801077f5bf990562f6264fecbc42cd3309b33872cb6fc3b113
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"tslib@npm:^1.0.0, tslib@npm:^1.11.1, tslib@npm:^1.8.1, tslib@npm:^1.9.3":
|
||||
version: 1.14.1
|
||||
resolution: "tslib@npm:1.14.1"
|
||||
|
@ -34936,13 +34963,6 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"tslib@npm:^2.0.1, tslib@npm:^2.0.3":
|
||||
version: 2.4.0
|
||||
resolution: "tslib@npm:2.4.0"
|
||||
checksum: 8c4aa6a3c5a754bf76aefc38026134180c053b7bd2f81338cb5e5ebf96fefa0f417bff221592bf801077f5bf990562f6264fecbc42cd3309b33872cb6fc3b113
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"tslib@npm:^2.2.0":
|
||||
version: 2.4.1
|
||||
resolution: "tslib@npm:2.4.1"
|
||||
|
|
Loading…
Reference in New Issue
Block a user