codemod-com · alexbit-codemod · May 17, 2024
diff --git a/apps/web/components/eventtype/EventLimitsTab.tsx b/apps/web/components/eventtype/EventLimitsTab.tsx
@@ -19,10 +19,14 @@ import type { PeriodType } from "@calcom/prisma/enums";
 import type { IntervalLimit } from "@calcom/types/Calendar";
 import { Button, DateRangePicker, InputField, Label, Select, SettingsToggle, TextField } from "@calcom/ui";
 
-const MinimumBookingNoticeInput = React.forwardRef<
-  HTMLInputElement,
-  Omit<UseFormRegisterReturn<"minimumBookingNotice">, "ref">
->(function MinimumBookingNoticeInput({ ...passThroughProps }, ref) {
+const MinimumBookingNoticeInput = function MinimumBookingNoticeInput(
+  {
+    ref,
+    ...passThroughProps
+  }: Omit<UseFormRegisterReturn<"minimumBookingNotice">, "ref"> & {
+    ref: React.RefObject<HTMLInputElement>;
+  }
+) {
   const { t } = useLocale();
   const { setValue, getValues } = useFormContext<FormValues>();
   const durationTypeOptions: {
@@ -107,7 +111,7 @@ const MinimumBookingNoticeInput = React.forwardRef<
       />
     </div>
   );
-});
+};
 
 export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventType">) => {
   const { t, i18n } = useLocale();

diff --git a/apps/web/components/ui/form/CheckboxField.tsx b/apps/web/components/ui/form/CheckboxField.tsx
@@ -1,5 +1,5 @@
 import type { InputHTMLAttributes } from "react";
-import React, { forwardRef } from "react";
+import React from "react";
 
 import classNames from "@calcom/lib/classNames";
 import { InfoBadge } from "@calcom/ui";
@@ -11,56 +11,64 @@ type Props = InputHTMLAttributes<HTMLInputElement> & {
   informationIconText?: string;
 };
 
-const CheckboxField = forwardRef<HTMLInputElement, Props>(
-  ({ label, description, informationIconText, ...rest }, ref) => {
-    const descriptionAsLabel = !label || rest.descriptionAsLabel;
-    return (
-      <div className="block items-center sm:flex">
-        {label && (
-          <div className="min-w-48 mb-4 sm:mb-0">
-            {React.createElement(
-              descriptionAsLabel ? "div" : "label",
-              {
-                className: "flex text-sm font-medium text-default",
-                ...(!descriptionAsLabel
-                  ? {
-                      htmlFor: rest.id,
-                    }
-                  : {}),
-              },
-              label
-            )}
-          </div>
-        )}
-        <div className="w-full">
-          <div className="relative flex items-start">
-            {React.createElement(
-              descriptionAsLabel ? "label" : "div",
-              {
-                className: classNames(
-                  "relative flex items-start",
-                  descriptionAsLabel ? "text-default" : "text-emphasis"
-                ),
-              },
-              <>
-                <div className="flex h-5 items-center">
-                  <input
-                    {...rest}
-                    ref={ref}
-                    type="checkbox"
-                    className="text-emphasis focus:ring-emphasis dark:text-muted border-default bg-default h-4 w-4 rounded"
-                  />
-                </div>
-                <span className="ms-2 text-sm">{description}</span>
-              </>
-            )}
-            {informationIconText && <InfoBadge content={informationIconText} />}
-          </div>
+const CheckboxField = (
+  {
+    ref,
+    label,
+    description,
+    informationIconText,
+    ...rest
+  }: Props & {
+    ref: React.RefObject<HTMLInputElement>;
+  }
+) => {
+  const descriptionAsLabel = !label || rest.descriptionAsLabel;
+  return (
+    <div className="block items-center sm:flex">
+      {label && (
+        <div className="min-w-48 mb-4 sm:mb-0">
+          {React.createElement(
+            descriptionAsLabel ? "div" : "label",
+            {
+              className: "flex text-sm font-medium text-default",
+              ...(!descriptionAsLabel
+                ? {
+                    htmlFor: rest.id,
+                  }
+                : {}),
+            },
+            label
+          )}
+        </div>
+      )}
+      <div className="w-full">
+        <div className="relative flex items-start">
+          {React.createElement(
+            descriptionAsLabel ? "label" : "div",
+            {
+              className: classNames(
+                "relative flex items-start",
+                descriptionAsLabel ? "text-default" : "text-emphasis"
+              ),
+            },
+            <>
+              <div className="flex h-5 items-center">
+                <input
+                  {...rest}
+                  ref={ref}
+                  type="checkbox"
+                  className="text-emphasis focus:ring-emphasis dark:text-muted border-default bg-default h-4 w-4 rounded"
+                />
+              </div>
+              <span className="ms-2 text-sm">{description}</span>
+            </>
+          )}
+          {informationIconText && <InfoBadge content={informationIconText} />}
         </div>
       </div>
-    );
-  }
-);
+    </div>
+  );
+};
 
 CheckboxField.displayName = "CheckboxField";
 

diff --git a/apps/web/components/ui/form/MinutesField.tsx b/apps/web/components/ui/form/MinutesField.tsx
@@ -1,12 +1,20 @@
 import classNames from "classnames";
 import type { InputHTMLAttributes, ReactNode } from "react";
-import React, { forwardRef } from "react";
+import React from "react";
 
 type Props = InputHTMLAttributes<HTMLInputElement> & {
   label?: ReactNode;
 };
 
-const MinutesField = forwardRef<HTMLInputElement, Props>(({ label, ...rest }, ref) => {
+const MinutesField = (
+  {
+    ref,
+    label,
+    ...rest
+  }: Props & {
+    ref: React.RefObject<HTMLInputElement>;
+  }
+) => {
   return (
     <div className="block sm:flex">
       {!!label && (
@@ -36,7 +44,7 @@ const MinutesField = forwardRef<HTMLInputElement, Props>(({ label, ...rest }, re
       </div>
     </div>
   );
-});
+};
 
 MinutesField.displayName = "MinutesField";
 

diff --git a/packages/app-store/routing-forms/components/FormActions.tsx b/packages/app-store/routing-forms/components/FormActions.tsx
@@ -1,6 +1,6 @@
 import type { App_RoutingForms_Form } from "@prisma/client";
 import { usePathname, useRouter } from "next/navigation";
-import { createContext, forwardRef, useContext, useState } from "react";
+import { createContext, useContext, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { v4 as uuidv4 } from "uuid";
 import { z } from "zod";
@@ -386,9 +386,13 @@ type FormActionProps<T> = {
   extraClassNames?: string;
 } & ButtonProps;
 
-export const FormAction = forwardRef(function FormAction<T extends typeof Button>(
-  props: FormActionProps<T>,
-  forwardedRef: React.ForwardedRef<HTMLAnchorElement | HTMLButtonElement>
+export const FormAction = function FormAction<T extends typeof Button>(
+  {
+    ref: forwardedRef,
+    ...props
+  }: FormActionProps<T> & {
+    ref: React.RefObject<unknown>;
+  }
 ) {
   const {
     action: actionName,
@@ -517,4 +521,4 @@ export const FormAction = forwardRef(function FormAction<T extends typeof Button
       </Component>
     </DropdownMenuItem>
   );
-});
+};
diff --git a/packages/features/bookings/Booker/components/Section.tsx b/packages/features/bookings/Booker/components/Section.tsx
@@ -1,6 +1,5 @@
 import type { MotionProps } from "framer-motion";
 import { m } from "framer-motion";
-import { forwardRef } from "react";
 
 import { classNames } from "@calcom/lib";
 
@@ -40,9 +39,17 @@ const gridAreaClassNameMap: { [key in BookerAreas]: string } = {
 /**
  * Small helper compnent that renders a booker section in a specific grid area.
  */
-export const BookerSection = forwardRef<HTMLDivElement, BookerSectionProps>(function BookerSection(
-  { children, area, visible, className, ...props },
-  ref
+export const BookerSection = function BookerSection(
+  {
+    ref,
+    children,
+    area,
+    visible,
+    className,
+    ...props
+  }: BookerSectionProps & {
+    ref: React.RefObject<HTMLDivElement>;
+  }
 ) {
   const layout = useBookerStore((state) => state.layout);
   let gridClassName: string;
@@ -60,4 +67,4 @@ export const BookerSection = forwardRef<HTMLDivElement, BookerSectionProps>(func
       {children}
     </m.div>
   );
-});
+};
diff --git a/packages/features/calendars/weeklyview/components/grid/index.tsx b/packages/features/calendars/weeklyview/components/grid/index.tsx
@@ -7,9 +7,16 @@ type Props = {
   zIndex?: number;
 };
 
-export const SchedulerColumns = React.forwardRef<HTMLOListElement, Props>(function SchedulerColumns(
-  { offsetHeight, gridStopsPerDay, children, zIndex },
-  ref
+export const SchedulerColumns = function SchedulerColumns(
+  {
+    ref,
+    offsetHeight,
+    gridStopsPerDay,
+    children,
+    zIndex
+  }: Props & {
+    ref: React.RefObject<HTMLOListElement>;
+  }
 ) {
   return (
     <ol
@@ -20,4 +27,4 @@ export const SchedulerColumns = React.forwardRef<HTMLOListElement, Props>(functi
       {children}
     </ol>
   );
-});
+};
diff --git a/packages/features/embed/lib/EmbedTabs.tsx b/packages/features/embed/lib/EmbedTabs.tsx
@@ -1,5 +1,4 @@
 import type { MutableRefObject } from "react";
-import { forwardRef } from "react";
 
 import type { BookerLayout } from "@calcom/features/bookings/Booker/types";
 import { APP_NAME } from "@calcom/lib/constants";
@@ -20,10 +19,15 @@ export const tabs = [
     href: "embedTabName=embed-code",
     icon: "code" as const,
     type: "code",
-    Component: forwardRef<
-      HTMLTextAreaElement | HTMLIFrameElement | null,
-      { embedType: EmbedType; calLink: string; previewState: PreviewState; namespace: string }
-    >(function EmbedHtml({ embedType, calLink, previewState, namespace }, ref) {
+    Component: function EmbedHtml(
+      {
+        ref,
+        embedType,
+        calLink,
+        previewState,
+        namespace
+      }
+    ) {
       const { t } = useLocale();
       const embedSnippetString = useGetEmbedSnippetString(namespace);
       const embedCalOrigin = useEmbedCalOrigin();
@@ -69,17 +73,22 @@ export const tabs = [
           <p className="text-subtle hidden text-sm">{t("need_help_embedding")}</p>
         </>
       );
-    }),
+    },
   },
   {
     name: "React",
     href: "embedTabName=embed-react",
     icon: "code" as const,
     type: "code",
-    Component: forwardRef<
-      HTMLTextAreaElement | HTMLIFrameElement | null,
-      { embedType: EmbedType; calLink: string; previewState: PreviewState; namespace: string }
-    >(function EmbedReact({ embedType, calLink, previewState, namespace }, ref) {
+    Component: function EmbedReact(
+      {
+        ref,
+        embedType,
+        calLink,
+        previewState,
+        namespace
+      }
+    ) {
       const { t } = useLocale();
       const embedCalOrigin = useEmbedCalOrigin();
 
@@ -118,17 +127,20 @@ export const tabs = [
           />
         </>
       );
-    }),
+    },
   },
   {
     name: "Preview",
     href: "embedTabName=embed-preview",
     icon: "trello" as const,
     type: "iframe",
-    Component: forwardRef<
-      HTMLIFrameElement | HTMLTextAreaElement | null,
-      { calLink: string; embedType: EmbedType; previewState: PreviewState; namespace: string }
-    >(function Preview({ calLink, embedType }, ref) {
+    Component: function Preview(
+      {
+        ref,
+        calLink,
+        embedType
+      }
+    ) {
       const bookerUrl = useBookerUrl();
       const iframeSrc = `${EMBED_PREVIEW_HTML_URL}?embedType=${embedType}&calLink=${calLink}&embedLibUrl=${embedLibUrl}&bookerUrl=${bookerUrl}`;
       if (ref instanceof Function || !ref) {
@@ -148,7 +160,7 @@ export const tabs = [
           key={iframeSrc}
         />
       );
-    }),
+    },
   },
 ];
 

diff --git a/packages/features/filters/components/TeamsFilter.tsx b/packages/features/filters/components/TeamsFilter.tsx
@@ -1,6 +1,5 @@
 import { useSession } from "next-auth/react";
 import type { InputHTMLAttributes, ReactNode } from "react";
-import { forwardRef } from "react";
 
 import { classNames } from "@calcom/lib";
 import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage";
@@ -147,7 +146,16 @@ type Props = InputHTMLAttributes<HTMLInputElement> & {
   icon?: ReactNode;
 };
 
-export const FilterCheckboxField = forwardRef<HTMLInputElement, Props>(({ label, icon, ...rest }, ref) => {
+export const FilterCheckboxField = (
+  {
+    ref,
+    label,
+    icon,
+    ...rest
+  }: Props & {
+    ref: React.RefObject<HTMLInputElement>;
+  }
+) => {
   return (
     <div className="hover:bg-muted flex items-center py-2 pl-3 pr-2.5 hover:cursor-pointer">
       <label className="flex w-full max-w-full items-center justify-between hover:cursor-pointer">
@@ -176,6 +184,6 @@ export const FilterCheckboxField = forwardRef<HTMLInputElement, Props>(({ label,
       </label>
     </div>
   );
-});
+};
 
 FilterCheckboxField.displayName = "FilterCheckboxField";