remove all of our forward refs to using just the ref prop :)

resend · May 21, 2024 · 3489eb2 · 3489eb2
1 parent 4ceadf8
commit 3489eb2
Show file tree

Hide file tree

Showing 17 changed files with 230 additions and 274 deletions.
diff --git a/packages/react-email/src/components/button.tsx b/packages/react-email/src/components/button.tsx
@@ -3,8 +3,7 @@ import * as React from 'react';
 import { unreachable } from '../utils/unreachable';
 import { cn } from '../utils/cn';
 
-type ButtonElement = React.ElementRef<'button'>;
-type RootProps = React.ComponentPropsWithoutRef<'button'>;
+type RootProps = React.ComponentPropsWithRef<'button'>;
 
 type Appearance = 'white' | 'gradient';
 type Size = '1' | '2' | '3' | '4';
@@ -15,41 +14,32 @@ interface ButtonProps extends RootProps {
   size?: Size;
 }
 
-export const Button = React.forwardRef<ButtonElement, Readonly<ButtonProps>>(
-  (
-    {
-      asChild,
-      appearance = 'white',
-      className,
-      children,
-      size = '2',
-      ...props
-    },
-    forwardedRef,
-  ) => {
-    const classNames = cn(
-      getSize(size),
-      getAppearance(appearance),
-      'inline-flex items-center justify-center border font-medium',
-      className,
-    );
+export const Button = ({
+  asChild,
+  appearance = 'white',
+  className,
+  children,
+  size = '2',
+  ref,
+  ...props
+}: ButtonProps) => {
+  const classNames = cn(
+    getSize(size),
+    getAppearance(appearance),
+    'inline-flex items-center justify-center border font-medium',
+    className,
+  );
 
-    return asChild ? (
-      <SlotPrimitive.Slot ref={forwardedRef} {...props} className={classNames}>
-        <SlotPrimitive.Slottable>{children}</SlotPrimitive.Slottable>
-      </SlotPrimitive.Slot>
-    ) : (
-      <button
-        className={classNames}
-        ref={forwardedRef}
-        type="button"
-        {...props}
-      >
-        {children}
-      </button>
-    );
-  },
-);
+  return asChild ? (
+    <SlotPrimitive.Slot ref={ref} {...props} className={classNames}>
+      <SlotPrimitive.Slottable>{children}</SlotPrimitive.Slottable>
+    </SlotPrimitive.Slot>
+  ) : (
+    <button className={classNames} ref={ref} type="button" {...props}>
+      {children}
+    </button>
+  );
+};
 
 Button.displayName = 'Button';
 

diff --git a/packages/react-email/src/components/heading.tsx b/packages/react-email/src/components/heading.tsx
@@ -24,35 +24,28 @@ interface HeadingOwnProps {
 
 type HeadingProps = As<'h1', 'h2', 'h3', 'h4', 'h5', 'h6'> & HeadingOwnProps;
 
-export const Heading = React.forwardRef<
-  HTMLHeadingElement,
-  Readonly<HeadingProps>
->(
-  (
-    {
-      as: Tag = 'h1',
-      size = '3',
+export const Heading = ({
+  as: Tag = 'h1',
+  size = '3',
+  className,
+  color = 'white',
+  children,
+  weight = 'bold',
+  ref,
+  ...props
+}: HeadingProps) => (
+  <SlotPrimitive.Slot
+    className={cn(
       className,
-      color = 'white',
-      children,
-      weight = 'bold',
-      ...props
-    },
-    forwardedRef,
-  ) => (
-    <SlotPrimitive.Slot
-      className={cn(
-        className,
-        getSizesClassNames(size),
-        getColorClassNames(color),
-        getWeightClassNames(weight),
-      )}
-      ref={forwardedRef}
-      {...props}
-    >
-      <Tag>{children}</Tag>
-    </SlotPrimitive.Slot>
-  ),
+      getSizesClassNames(size),
+      getColorClassNames(color),
+      getWeightClassNames(weight),
+    )}
+    ref={ref}
+    {...props}
+  >
+    <Tag>{children}</Tag>
+  </SlotPrimitive.Slot>
 );
 
 const getSizesClassNames = (size: HeadingSize | undefined) => {

diff --git a/packages/react-email/src/components/icons/icon-arrow-down.tsx b/packages/react-email/src/components/icons/icon-arrow-down.tsx
@@ -1,16 +1,14 @@
 import * as React from 'react';
-import type { IconElement, IconProps } from './icon-base';
+import type { IconProps } from './icon-base';
 import { IconBase } from './icon-base';
 
-export const IconArrowDown = React.forwardRef<IconElement, Readonly<IconProps>>(
-  ({ ...props }, forwardedRef) => (
-    <IconBase ref={forwardedRef} {...props}>
-      <path
-        d="M12 16L6 9.85966L6.84 9L12 14.2808L17.16 9L18 9.85966L12 16Z"
-        fill="currentColor"
-      />
-    </IconBase>
-  ),
+export const IconArrowDown = ({ ref, ...props }: IconProps) => (
+  <IconBase ref={ref} {...props}>
+    <path
+      d="M12 16L6 9.85966L6.84 9L12 14.2808L17.16 9L18 9.85966L12 16Z"
+      fill="currentColor"
+    />
+  </IconBase>
 );
 
 IconArrowDown.displayName = 'IconArrowDown';
diff --git a/packages/react-email/src/components/icons/icon-base.tsx b/packages/react-email/src/components/icons/icon-base.tsx
@@ -1,24 +1,22 @@
 import * as React from 'react';
 
 export type IconElement = React.ElementRef<'svg'>;
-export type RootProps = React.ComponentPropsWithoutRef<'svg'>;
+export type RootProps = React.ComponentPropsWithRef<'svg'>;
 
 export interface IconProps extends RootProps {
   size?: number;
 }
 
-export const IconBase = React.forwardRef<IconElement, Readonly<IconProps>>(
-  ({ size = 20, ...props }, forwardedRef) => (
-    <svg
-      fill="none"
-      height={size}
-      ref={forwardedRef}
-      viewBox="0 0 24 24"
-      width={size}
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    />
-  ),
+export const IconBase = ({ ref, size = 20, ...props }: IconProps) => (
+  <svg
+    fill="none"
+    height={size}
+    ref={ref}
+    viewBox="0 0 24 24"
+    width={size}
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  />
 );
 
 IconBase.displayName = 'IconBase';
diff --git a/packages/react-email/src/components/icons/icon-button.tsx b/packages/react-email/src/components/icons/icon-button.tsx
@@ -1,23 +1,25 @@
 import * as React from 'react';
 import { cn } from '../../utils';
 
-export type IconButtonProps = React.ComponentPropsWithoutRef<'button'>;
+export type IconButtonProps = React.ComponentPropsWithRef<'button'>;
 
-export const IconButton = React.forwardRef<
-  HTMLButtonElement,
-  Readonly<IconButtonProps>
->(({ children, className, ...props }, forwardedRef) => (
+export const IconButton = ({
+  children,
+  ref,
+  className,
+  ...props
+}: IconButtonProps) => (
   <button
     type="button"
     {...props}
     className={cn(
       'rounded text-slate-11 focus:text-slate-12 ease-in-out transition duration-200 focus:outline-none focus:ring-2 focus:ring-gray-8 hover:text-slate-12',
       className,
     )}
-    ref={forwardedRef}
+    ref={ref}
   >
     {children}
   </button>
-));
+);
 
 IconButton.displayName = 'IconButton';
diff --git a/packages/react-email/src/components/icons/icon-check.tsx b/packages/react-email/src/components/icons/icon-check.tsx
@@ -1,19 +1,17 @@
 import * as React from 'react';
-import type { IconElement, IconProps } from './icon-base';
+import type { IconProps } from './icon-base';
 import { IconBase } from './icon-base';
 
-export const IconCheck = React.forwardRef<IconElement, Readonly<IconProps>>(
-  ({ ...props }, forwardedRef) => (
-    <IconBase ref={forwardedRef} {...props}>
-      <path
-        d="M16.25 8.75L10.406 15.25L7.75 12.75"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="1.5"
-      />
-    </IconBase>
-  ),
+export const IconCheck = ({ ref, ...props }: IconProps) => (
+  <IconBase ref={ref} {...props}>
+    <path
+      d="M16.25 8.75L10.406 15.25L7.75 12.75"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="1.5"
+    />
+  </IconBase>
 );
 
 IconCheck.displayName = 'IconCheck';
diff --git a/packages/react-email/src/components/icons/icon-clipboard.tsx b/packages/react-email/src/components/icons/icon-clipboard.tsx
@@ -1,40 +1,38 @@
 import * as React from 'react';
-import type { IconElement, IconProps } from './icon-base';
+import type { IconProps } from './icon-base';
 import { IconBase } from './icon-base';
 
-export const IconClipboard = React.forwardRef<IconElement, Readonly<IconProps>>(
-  ({ ...props }, forwardedRef) => (
-    <IconBase ref={forwardedRef} {...props}>
-      <path
-        d="M9 6.75H7.75C6.64543 6.75 5.75 7.64543 5.75 8.75V17.25C5.75 18.3546 6.64543 19.25 7.75 19.25H16.25C17.3546 19.25 18.25 18.3546 18.25 17.25V8.75C18.25 7.64543 17.3546 6.75 16.25 6.75H15"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="1.5"
-      />
-      <path
-        d="M14 8.25H10C9.44772 8.25 9 7.80228 9 7.25V5.75C9 5.19772 9.44772 4.75 10 4.75H14C14.5523 4.75 15 5.19772 15 5.75V7.25C15 7.80228 14.5523 8.25 14 8.25Z"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="1.5"
-      />
-      <path
-        d="M9.75 12.25H14.25"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="1.5"
-      />
-      <path
-        d="M9.75 15.25H14.25"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="1.5"
-      />
-    </IconBase>
-  ),
+export const IconClipboard = ({ ref, ...props }: IconProps) => (
+  <IconBase ref={ref} {...props}>
+    <path
+      d="M9 6.75H7.75C6.64543 6.75 5.75 7.64543 5.75 8.75V17.25C5.75 18.3546 6.64543 19.25 7.75 19.25H16.25C17.3546 19.25 18.25 18.3546 18.25 17.25V8.75C18.25 7.64543 17.3546 6.75 16.25 6.75H15"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="1.5"
+    />
+    <path
+      d="M14 8.25H10C9.44772 8.25 9 7.80228 9 7.25V5.75C9 5.19772 9.44772 4.75 10 4.75H14C14.5523 4.75 15 5.19772 15 5.75V7.25C15 7.80228 14.5523 8.25 14 8.25Z"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="1.5"
+    />
+    <path
+      d="M9.75 12.25H14.25"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="1.5"
+    />
+    <path
+      d="M9.75 15.25H14.25"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="1.5"
+    />
+  </IconBase>
 );
 
 IconClipboard.displayName = 'IconClipboard';
diff --git a/packages/react-email/src/components/icons/icon-download.tsx b/packages/react-email/src/components/icons/icon-download.tsx
@@ -1,19 +1,17 @@
 import * as React from 'react';
-import type { IconElement, IconProps } from './icon-base';
+import type { IconProps } from './icon-base';
 import { IconBase } from './icon-base';
 
-export const IconDownload = React.forwardRef<IconElement, Readonly<IconProps>>(
-  ({ ...props }, forwardedRef) => (
-    <IconBase ref={forwardedRef} {...props}>
-      <path
-        d="M4.75 14.75v1.5a3 3 0 0 0 3 3h8.5a3 3 0 0 0 3-3v-1.5M12 14.25v-9.5M8.75 10.75l3.25 3.5 3.25-3.5"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth={1.5}
-      />
-    </IconBase>
-  ),
+export const IconDownload = ({ ref, ...props }: IconProps) => (
+  <IconBase ref={ref} {...props}>
+    <path
+      d="M4.75 14.75v1.5a3 3 0 0 0 3 3h8.5a3 3 0 0 0 3-3v-1.5M12 14.25v-9.5M8.75 10.75l3.25 3.5 3.25-3.5"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+    />
+  </IconBase>
 );
 
 IconDownload.displayName = 'IconDownload';
diff --git a/packages/react-email/src/components/icons/icon-file.tsx b/packages/react-email/src/components/icons/icon-file.tsx
@@ -1,19 +1,17 @@
 import * as React from 'react';
-import type { IconElement, IconProps } from './icon-base';
+import type { IconProps } from './icon-base';
 import { IconBase } from './icon-base';
 
-export const IconFile = React.forwardRef<IconElement, Readonly<IconProps>>(
-  ({ ...props }, forwardedRef) => (
-    <IconBase ref={forwardedRef} {...props}>
-      <path
-        clipRule="evenodd"
-        d="M7.75 4C6.23122 4 5 5.23122 5 6.75V17.25C5 18.7688 6.23122 20 7.75 20H16.25C17.7688 20 19 18.7688 19 17.25V9C19 8.80109 18.921 8.61032 18.7803 8.46967L14.5303 4.21967C14.3897 4.07902 14.1989 4 14 4H7.75ZM6.5 6.75C6.5 6.05964 7.05964 5.5 7.75 5.5H13V9.25C13 9.66421 13.3358 10 13.75 10H17.5V17.25C17.5 17.9404 16.9404 18.5 16.25 18.5H7.75C7.05964 18.5 6.5 17.9404 6.5 17.25V6.75ZM16.6893 8.5L14.5 6.31066V8.5H16.6893Z"
-        fill="currentColor"
-        fillOpacity="0.927"
-        fillRule="evenodd"
-      />
-    </IconBase>
-  ),
+export const IconFile = ({ ref, ...props }: IconProps) => (
+  <IconBase ref={ref} {...props}>
+    <path
+      clipRule="evenodd"
+      d="M7.75 4C6.23122 4 5 5.23122 5 6.75V17.25C5 18.7688 6.23122 20 7.75 20H16.25C17.7688 20 19 18.7688 19 17.25V9C19 8.80109 18.921 8.61032 18.7803 8.46967L14.5303 4.21967C14.3897 4.07902 14.1989 4 14 4H7.75ZM6.5 6.75C6.5 6.05964 7.05964 5.5 7.75 5.5H13V9.25C13 9.66421 13.3358 10 13.75 10H17.5V17.25C17.5 17.9404 16.9404 18.5 16.25 18.5H7.75C7.05964 18.5 6.5 17.9404 6.5 17.25V6.75ZM16.6893 8.5L14.5 6.31066V8.5H16.6893Z"
+      fill="currentColor"
+      fillOpacity="0.927"
+      fillRule="evenodd"
+    />
+  </IconBase>
 );
 
 IconFile.displayName = 'IconFile';