Refactor components to use polymorphic utility types

src/components/Container/Container.tsx

@@ -1,12 +1,12 @@
 import { styled } from "styled-components";
-import {
-  ComponentProps,
-  ComponentPropsWithRef,
-  ElementType,
-  ReactNode,
-  forwardRef,
-} from "react";
+import { ElementType, forwardRef } from "react";
 import { Orientation } from "@/components";
+import {
+  PolymorphicComponent,
+  PolymorphicComponentProps,
+  PolymorphicProps,
+  PolymorphicRef,
+} from "@/utils/polymorphic";
 
 type AlignItemsOptions = "start" | "center" | "end" | "stretch";
 export type GapOptions = "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
@@ -23,9 +23,9 @@ type JustifyContentOptions =
 export type PaddingOptions = "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
 type WrapOptions = "nowrap" | "wrap" | "wrap-reverse";
 
-export interface ContainerProps<T extends ElementType = "div"> {
-  /** Custom component to render as */
-  component?: T;
+export interface ContainerProps<
+  T extends ElementType = "div",
+> extends PolymorphicComponentProps<T> {
   /** Alignment of items along the cross axis */
   alignItems?: AlignItemsOptions;
   /** The content to display inside the container */
@@ -62,10 +62,6 @@ export interface ContainerProps<T extends ElementType = "div"> {
   overflow?: string;
 }
 
-type ContainerPolymorphicComponent = <T extends ElementType = "div">(
-  props: Omit<ComponentProps<T>, keyof T> & ContainerProps<T>
-) => ReactNode;
-
 const _Container = <T extends ElementType = "div">(
   {
     component,
@@ -87,8 +83,8 @@ const _Container = <T extends ElementType = "div">(
     minHeight,
     overflow,
     ...props
-  }: Omit<ComponentProps<T>, keyof T> & ContainerProps<T>,
-  ref: ComponentPropsWithRef<T>["ref"]
+  }: PolymorphicProps<T, ContainerProps<T>>,
+  ref: PolymorphicRef<T>
 ) => {
   return (
     <Wrapper
@@ -170,4 +166,4 @@ const Wrapper = styled.div<{
   }
 `;
 
-export const Container: ContainerPolymorphicComponent = forwardRef(_Container);
+export const Container: PolymorphicComponent<ContainerProps> = forwardRef(_Container);

src/components/EllipsisContent/EllipsisContent.tsx

@@ -1,12 +1,12 @@
-import {
-  ComponentProps,
-  ComponentPropsWithRef,
-  ElementType,
-  ReactNode,
-  forwardRef,
-} from "react";
+import { ElementType, forwardRef } from "react";
 import { mergeRefs } from "@/utils/mergeRefs";
 import { styled } from "styled-components";
+import {
+  PolymorphicComponent,
+  PolymorphicComponentProps,
+  PolymorphicProps,
+  PolymorphicRef,
+} from "@/utils/polymorphic";
 
 const EllipsisContainer = styled.div`
   display: inline-block;
@@ -24,17 +24,13 @@ const EllipsisContainer = styled.div`
     text-overflow: ellipsis;
   }
 `;
-export interface EllipsisContentProps<T extends ElementType = "div"> {
-  component?: T;
-}
-
-type EllipsisPolymorphicComponent = <T extends ElementType = "div">(
-  props: Omit<ComponentProps<T>, keyof T> & EllipsisContentProps<T>
-) => ReactNode;
+export interface EllipsisContentProps<
+  T extends ElementType = "div",
+> extends PolymorphicComponentProps<T> {}
 
 const _EllipsisContent = <T extends ElementType = "div">(
-  { component, ...props }: Omit<ComponentProps<T>, keyof T> & EllipsisContentProps<T>,
-  ref: ComponentPropsWithRef<T>["ref"]
+  { component, ...props }: PolymorphicProps<T, EllipsisContentProps<T>>,
+  ref: PolymorphicRef<T>
 ) => {
   return (
     <EllipsisContainer
@@ -52,4 +48,5 @@ const _EllipsisContent = <T extends ElementType = "div">(
   );
 };
 
-export const EllipsisContent: EllipsisPolymorphicComponent = forwardRef(_EllipsisContent);
+export const EllipsisContent: PolymorphicComponent<EllipsisContentProps> =
+  forwardRef(_EllipsisContent);

src/components/GridContainer/GridContainer.tsx

@@ -1,11 +1,11 @@
 import { styled } from "styled-components";
+import { ElementType, forwardRef } from "react";
 import {
-  ComponentProps,
-  ComponentPropsWithRef,
-  ElementType,
-  forwardRef,
-  ReactNode,
-} from "react";
+  PolymorphicComponent,
+  PolymorphicComponentProps,
+  PolymorphicProps,
+  PolymorphicRef,
+} from "@/utils/polymorphic";
 
 export type FlowOptions = "row" | "column" | "row-dense" | "column-dense";
 type GapOptions = "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "unset";
@@ -21,9 +21,9 @@ type ContentOptions =
   | "left"
   | "right";
 
-export interface GridContainerProps<T extends ElementType = "div"> {
-  /** Custom component to render as */
-  component?: T;
+export interface GridContainerProps<
+  T extends ElementType = "div",
+> extends PolymorphicComponentProps<T> {
   /** Alignment of items along the block axis */
   alignItems?: ItemsOptions;
   /** Alignment of content along the block axis */
@@ -74,10 +74,6 @@ export interface GridContainerProps<T extends ElementType = "div"> {
   overflow?: string;
 }
 
-type GridContainerPolymorphicComponent = <T extends ElementType = "div">(
-  props: Omit<ComponentProps<T>, keyof T> & GridContainerProps<T>
-) => ReactNode;
-
 const _GridContainer = <T extends ElementType = "div">(
   {
     alignItems = "stretch",
@@ -106,8 +102,8 @@ const _GridContainer = <T extends ElementType = "div">(
     overflow,
     component,
     ...props
-  }: Omit<ComponentProps<T>, keyof T> & GridContainerProps<T>,
-  ref: ComponentPropsWithRef<T>["ref"]
+  }: PolymorphicProps<T, GridContainerProps<T>>,
+  ref: PolymorphicRef<T>
 ) => {
   return (
     <Wrapper
@@ -213,5 +209,5 @@ const Wrapper = styled.div<{
   }
 `;
 
-export const GridContainer: GridContainerPolymorphicComponent =
+export const GridContainer: PolymorphicComponent<GridContainerProps> =
   forwardRef(_GridContainer);

src/components/Link/Link.tsx

@@ -1,17 +1,18 @@
-import {
-  ComponentProps,
-  ComponentPropsWithRef,
-  ElementType,
-  ReactEventHandler,
-  ReactNode,
-  forwardRef,
-} from "react";
+import { ElementType, ReactEventHandler, forwardRef } from "react";
 import { Icon, IconName } from "@/components";
 import { styled } from "styled-components";
 import { linkStyles } from "./common";
 import { TextSize, TextWeight } from "../commonTypes";
+import {
+  PolymorphicComponent,
+  PolymorphicComponentProps,
+  PolymorphicProps,
+  PolymorphicRef,
+} from "@/utils/polymorphic";
 
-export interface LinkProps<T extends ElementType = "a"> {
+export interface LinkProps<
+  T extends ElementType = "a",
+> extends PolymorphicComponentProps<T> {
   /** The font size of the link text */
   size?: TextSize;
   /** The font weight of the link text */
@@ -22,8 +23,6 @@ export interface LinkProps<T extends ElementType = "a"> {
   children?: React.ReactNode;
   /** Optional icon to display after the link text */
   icon?: IconName;
-  /** Custom component to render as the link element */
-  component?: T;
 }
 
 const CuiLink = styled.a<{ $size: TextSize; $weight: TextWeight }>`
@@ -43,10 +42,6 @@ const IconWrapper = styled.span<{ $size: TextSize }>`
   }
 `;
 
-type LinkPolymorphicComponent = <T extends ElementType = "a">(
-  props: Omit<ComponentProps<T>, keyof T> & LinkProps<T>
-) => ReactNode;
-
 /** Component for linking to other pages or sections from with body text */
 const _Link = <T extends ElementType = "a">(
   {
@@ -57,8 +52,8 @@ const _Link = <T extends ElementType = "a">(
     children,
     component,
     ...props
-  }: Omit<ComponentProps<T>, keyof T> & LinkProps<T>,
-  ref: ComponentPropsWithRef<T>["ref"]
+  }: PolymorphicProps<T, LinkProps<T>>,
+  ref: PolymorphicRef<T>
 ) => (
   <CuiLink
     ref={ref}
@@ -80,4 +75,4 @@ const _Link = <T extends ElementType = "a">(
     )}
   </CuiLink>
 );
-export const Link: LinkPolymorphicComponent = forwardRef(_Link);
+export const Link: PolymorphicComponent<LinkProps, "a"> = forwardRef(_Link);

src/components/Typography/Text/Text.tsx

@@ -1,17 +1,19 @@
-import {
-  ComponentProps,
-  ComponentPropsWithRef,
-  ElementType,
-  ReactNode,
-  forwardRef,
-} from "react";
+import { ElementType, ReactNode, forwardRef } from "react";
 import { styled } from "styled-components";
 import { TextSize, TextWeight } from "@/components/commonTypes";
+import {
+  PolymorphicComponent,
+  PolymorphicComponentProps,
+  PolymorphicProps,
+  PolymorphicRef,
+} from "@/utils/polymorphic";
 
 export type TextAlignment = "left" | "center" | "right";
 export type TextColor = "default" | "muted" | "danger" | "disabled";
 
-export interface TextProps<T extends ElementType = "p"> {
+export interface TextProps<
+  T extends ElementType = "p",
+> extends PolymorphicComponentProps<T> {
   /** The text content to display */
   children: ReactNode;
   /** The text alignment */
@@ -24,16 +26,10 @@ export interface TextProps<T extends ElementType = "p"> {
   weight?: TextWeight;
   /** Additional CSS class name */
   className?: string;
-  /** Custom component to render as */
-  component?: T;
   /** Whether the text should fill the full width of its container */
   fillWidth?: boolean;
 }
 
-type TextPolymorphicComponent = <T extends ElementType = "p">(
-  props: Omit<ComponentProps<T>, keyof T> & TextProps<T>
-) => ReactNode;
-
 const _Text = <T extends ElementType = "p">(
   {
     align,
@@ -45,8 +41,8 @@ const _Text = <T extends ElementType = "p">(
     component,
     fillWidth,
     ...props
-  }: Omit<ComponentProps<T>, keyof T> & TextProps<T>,
-  ref: ComponentPropsWithRef<T>["ref"]
+  }: PolymorphicProps<T, TextProps<T>>,
+  ref: PolymorphicRef<T>
 ) => (
   <CuiText
     as={component ?? "p"}
@@ -80,5 +76,5 @@ const CuiText = styled.p<{
 
 _Text.displayName = "Text";
 
-const Text: TextPolymorphicComponent = forwardRef(_Text);
+const Text: PolymorphicComponent<TextProps, "p"> = forwardRef(_Text);
 export { Text };