perf: Booker-Bundle Size Improvement - Lazy load react-select, remove lodash and Dom Purify (#10814)

apps/web/components/setup/EnterpriseLicense.tsx

@@ -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";

apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx

@@ -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";

apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx

@@ -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";

apps/web/pages/auth/forgot-password/index.tsx

@@ -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";

apps/web/playwright/lib/testUtils.ts

@@ -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";

apps/web/public/static/locales/en/common.json

@@ -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",

package.json

@@ -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",

packages/app-store-cli/src/build.ts

@@ -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";

packages/app-store/routing-forms/components/react-awesome-query-builder/widgets.tsx

@@ -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

packages/config/eslint-preset.js

@@ -36,6 +36,12 @@ module.exports = {
       },
     ],
     "unused-imports/no-unused-imports": "error",
+    "no-restricted-imports": [
+      "error",
+      {
+        patterns: ["lodash"],
+      },
+    ],
   },
   overrides: [
     {

packages/core/CalendarManager.ts

@@ -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";

packages/core/EventManager.ts

@@ -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";

packages/emails/email-manager.ts

@@ -1,3 +1,4 @@
+// eslint-disable-next-line no-restricted-imports
 import { cloneDeep } from "lodash";
 import type { TFunction } from "next-i18next";
 

packages/emails/templates/attendee-scheduled-email.ts

@@ -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";

packages/emails/templates/organizer-scheduled-email.ts

@@ -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";

packages/features/apps/AdminAppsList.tsx

@@ -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";

packages/features/bookings/lib/handleNewBooking.ts

@@ -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";

packages/features/ee/common/components/LicenseRequired.tsx

@@ -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
+            <Trans i18nKey="enterprise_license_description">
-              dangerouslySetInnerHTML={{
+              To enable this feature, have an administrator go to{" "}
-                __html: DOMPurify.sanitize(
+              <a href={`${WEBAPP_URL}/auth/setup`} className="underline">
-                  t("enterprise_license_description", {
+                /auth/setup
-                    consoleUrl: `<a href="${CONSOLE_URL}" target="_blank" rel="noopener noreferrer" class="underline">
+              </a>
-                ${APP_NAME}
+              to enter a license key. If a license key is already in place, please contact{" "}
-              </a>`,
+              <a href={`mailto:${SUPPORT_MAIL_ADDRESS}`} className="underline">
-                    setupUrl: `<a href="${WEBAPP_URL}/auth/setup" class="underline">/auth/setup</a>`,
+                <Trans>{{ SUPPORT_MAIL_ADDRESS }}</Trans>
-                    supportMail: `<a href="mailto:${SUPPORT_MAIL_ADDRESS}" class="underline">
+              </a>
-                ${SUPPORT_MAIL_ADDRESS}</a>`,
+              for help.
-                  })
+            </Trans>
-                ),
-              }}
-            />
           }
         />
       )}

packages/features/ee/managed-event-types/hooks/useLockedFieldsManager.tsx

@@ -1,3 +1,4 @@
+// eslint-disable-next-line no-restricted-imports
 import { get } from "lodash";
 import React from "react";
 import type z from "zod";

packages/features/ee/support/lib/intercom/useIntercom.ts

@@ -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";

packages/features/ee/users/components/UserForm.tsx

@@ -1,3 +1,4 @@
+// eslint-disable-next-line no-restricted-imports
 import { noop } from "lodash";
 import { Controller, useForm } from "react-hook-form";
 

packages/features/package.json

@@ -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",

packages/prisma/zod-utils.ts

@@ -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

packages/trpc/server/routers/viewer/eventTypes/getByViewer.handler.ts

@@ -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";

packages/trpc/server/routers/viewer/slots/util.ts

@@ -1,3 +1,4 @@
+// eslint-disable-next-line no-restricted-imports
 import { countBy } from "lodash";
 import { v4 as uuid } from "uuid";
 

packages/ui/components/form/index.ts

@@ -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";

packages/ui/components/form/inputs/Form.tsx

@@ -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;

packages/ui/components/form/inputs/Input.tsx

@@ -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 { useFormContext } from "react-hook-form";
-import { FormProvider, 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 { Alert, Input, InputField, Tooltip } from "../../..";
-import { Eye, EyeOff, X, Search } from "../../icon";
+import { Eye, EyeOff, Search } from "../../icon";
-import { HintsOrErrors } from "./HintOrErrors";
 import { Label } from "./Label";
-
+import type { InputFieldProps } from "./types";
-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
-      )}
-    />
-  );
-});
 
 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

packages/ui/components/form/inputs/InputFieldWithSelect.tsx

@@ -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} />}
+    />
+  );
+});

packages/ui/components/form/inputs/TextField.tsx

@@ -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} />;
+});

packages/ui/components/form/inputs/input.test.tsx

@@ -4,15 +4,9 @@ import { render, fireEvent } from "@testing-library/react";
 import { vi } from "vitest";
 
 import type { UnstyledSelect } from "../../../form/Select";
-import {
+import { EmailField, TextAreaField, PasswordField, NumberInput, FilterSearchField } from "./Input";
-  EmailField,
+import { InputFieldWithSelect } from "./InputFieldWithSelect";
-  TextAreaField,
+import { InputField } from "./TextField";
-  InputField,
-  PasswordField,
-  NumberInput,
-  FilterSearchField,
-  InputFieldWithSelect,
-} from "./Input";
 
 const onChangeMock = vi.fn();
 

packages/ui/components/form/inputs/types.d.ts

@@ -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 };

packages/ui/components/form/wizard/WizardForm.tsx

@@ -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";

packages/ui/components/head-seo/HeadSeo.tsx

@@ -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} />;
 };

packages/ui/components/top-banner/TopBanner.tsx

@@ -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";
 

packages/ui/layouts/WizardLayout.tsx

@@ -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";

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"