chore: refactor extract props function

Signed-off-by: Vanessa Tran <vanessa.m.tran@gov.ab.ca>

Author: vanessatran-ddi

libs/common/src/lib/common.ts

@@ -1073,6 +1073,10 @@ export type TShirtSpacing =
 
 export type Spacing = NumericSpacing | TShirtSpacing | null;
 
+export interface DataGridProps {
+  [key: `data-grid${string}`]: string | boolean | undefined;
+}
+
 export interface Margins {
   mt?: Spacing;
   mr?: Spacing;

libs/react-components/src/lib/accordion/accordion.tsx

@@ -3,12 +3,11 @@ import { ReactNode, useEffect, useRef, type JSX } from "react";
 import type {
   GoabAccordionHeadingSize,
   GoabAccordionIconPosition,
-  Margins,
+  Margins, DataGridProps,
 } from "@abgov/ui-components-common";
-import { DataGridProps, useDataGridProps } from "../common/data-props";
+import { extractProps } from "../common/extract-props";
 
 interface WCProps extends Margins {
-  ref: React.RefObject<HTMLElement | null>;
   open?: string;
   headingsize?: GoabAccordionHeadingSize;
   heading: string;
@@ -23,7 +22,10 @@ declare module "react" {
   // eslint-disable-next-line @typescript-eslint/no-namespace
   namespace JSX {
     interface IntrinsicElements {
-      "goa-accordion": WCProps & React.HTMLAttributes<HTMLElement>;
+      "goa-accordion": WCProps &
+        React.HTMLAttributes<HTMLElement> & {
+          ref: React.RefObject<HTMLElement | null>;
+        };
     }
   }
 }
@@ -43,53 +45,34 @@ export interface GoabAccordionProps extends Margins, DataGridProps {
 
 export function GoabAccordion(props: GoabAccordionProps): JSX.Element {
   const ref = useRef<HTMLElement>(null);
-  const [dataGridProps, {
-    open,
-    heading,
-    headingSize,
-    secondaryText,
-    headingContent,
-    iconPosition,
-    maxWidth,
-    testId,
-    onChange,
-    children,
-    mt,
-    mr,
-    mb,
-    ml}] = useDataGridProps(props);
+
+  const _props = extractProps<WCProps>(props, {
+    exclude: ["open", "onChange", "headingContent"],
+    attributeMapping: "lowercase"
+  });
 
   useEffect(() => {
     const element = ref.current;
-    if (element && onChange) {
+    if (element && props.onChange) {
       const handler = (event: Event) => {
         const customEvent = event as CustomEvent;
-        onChange(customEvent.detail.open);
+        props.onChange?.(customEvent.detail.open);
       };
       element.addEventListener("_change", handler);
       return () => {
         element.removeEventListener("_change", handler);
       };
     }
-  }, [onChange]);
+  }, [props.onChange]);
+
   return (
     <goa-accordion
       ref={ref}
-      open={open ? "true" : undefined}
-      headingsize={headingSize}
-      heading={heading}
-      secondarytext={secondaryText}
-      iconposition={iconPosition}
-      maxwidth={maxWidth}
-      testid={testId}
-      mt={mt}
-      mr={mr}
-      mb={mb}
-      ml={ml}
-      {...dataGridProps}
+      open={props.open ? "true" : undefined}
+      {..._props}
     >
-      {headingContent && <div slot="headingcontent">{headingContent}</div>}
-      {children}
+      {props.headingContent && <div slot="headingcontent">{props.headingContent}</div>}
+      {props.children}
     </goa-accordion>
   );
 }

libs/react-components/src/lib/app-header-menu/app-header-menu.tsx

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
-import { GoabIconType } from "@abgov/ui-components-common";
-import { DataGridProps, useDataGridProps } from "../common/data-props";
+import { DataGridProps, GoabIconType } from "@abgov/ui-components-common";
+import { extractProps } from "../common/extract-props";
 
 interface WCProps {
   heading: string;
@@ -26,15 +26,13 @@ declare module "react" {
 }
 
 export function GoabAppHeaderMenu(props: GoabAppHeaderMenuProps) {
-  const [dataGridProps, { heading, leadingIcon, testId, children }] = useDataGridProps(props);
+  const _props = extractProps<WCProps>(props, {
+    attributeMapping: "lowercase",
+  });
+
   return (
-    <goa-app-header-menu
-      heading={heading}
-      leadingicon={leadingIcon}
-      testid={testId}
-      {...dataGridProps}
-    >
-      {children}
+    <goa-app-header-menu {..._props}>
+      {props.children}
     </goa-app-header-menu>
   );
 }

libs/react-components/src/lib/app-header/app-header.tsx

@@ -1,21 +1,23 @@
 import { useEffect, useRef, type JSX } from "react";
-import { DataGridProps, useDataGridProps } from "../common/data-props";
+import { DataGridProps } from "@abgov/ui-components-common";
+import { extractProps } from "../common/extract-props";
 
 interface WCProps {
   heading?: string;
   url?: string;
   maxcontentwidth?: string;
   fullmenubreakpoint?: number;
   hasmenuclickhandler?: string;
-  ref: React.RefObject<HTMLElement | null>;
   testid?: string;
 }
 
 declare module "react" {
   // eslint-disable-next-line @typescript-eslint/no-namespace
   namespace JSX {
     interface IntrinsicElements {
-      "goa-app-header": WCProps & React.HTMLAttributes<HTMLElement>;
+      "goa-app-header": WCProps & React.HTMLAttributes<HTMLElement> & {
+        ref: React.RefObject<HTMLElement | null>;
+      };
     }
   }
 }
@@ -32,45 +34,36 @@ export interface GoabAppHeaderProps extends DataGridProps {
 
 export function GoabAppHeader(props: GoabAppHeaderProps): JSX.Element {
   const el = useRef<HTMLElement>(null);
-  const [dataGridProps, {
-    heading,
-    url,
-    maxContentWidth,
-    fullMenuBreakpoint,
-    testId,
-    children,
-    onMenuClick
-  }] = useDataGridProps(props);
+
+  const _props = extractProps<WCProps>(props, {
+    exclude: ["onMenuClick"],
+    attributeMapping: "lowercase",
+  });
 
   useEffect(() => {
     if (!el.current) {
       return;
     }
-    if (!onMenuClick) {
+    if (!props.onMenuClick) {
       return;
     }
     const current = el.current;
     const listener = () => {
-      onMenuClick();
+      props.onMenuClick?.();
     };
     current.addEventListener("_menuClick", listener);
     return () => {
       current.removeEventListener("_menuClick", listener);
     };
-  }, [el, onMenuClick]);
+  }, [el, props.onMenuClick]);
 
   return (
     <goa-app-header
       ref={el}
-      heading={heading}
-      url={url}
-      fullmenubreakpoint={fullMenuBreakpoint}
-      maxcontentwidth={maxContentWidth}
-      testid={testId}
-      hasmenuclickhandler={onMenuClick ? "true" : "false"}
-      {...dataGridProps}
+      hasmenuclickhandler={props.onMenuClick ? "true" : "false"}
+      {..._props}
     >
-      {children}
+      {props.children}
     </goa-app-header>
   );
 }

libs/react-components/src/lib/badge/badge.tsx

@@ -1,6 +1,6 @@
-import { GoabBadgeType, Margins, GoabIconType } from "@abgov/ui-components-common";
+import { DataGridProps, GoabBadgeType, GoabIconType, Margins } from "@abgov/ui-components-common";
 import type { JSX } from "react";
-import { DataGridProps, useDataGridProps } from "../common/data-props";
+import { extractProps } from "../common/extract-props";
 
 interface WCProps extends Margins {
   type: GoabBadgeType;
@@ -48,33 +48,16 @@ function getIconValue(icon?: boolean, iconType?: GoabIconType): "true" | "false"
 }
 
 export function GoabBadge(props: GoabBadgeProps): JSX.Element {
-  const [dataGridProps, {
-    type,
-    content,
-    icon,
-    testId,
-    mt,
-    mr,
-    mb,
-    ml,
-    ariaLabel,
-    iconType,
-  }] = useDataGridProps(props);
+  const _props = extractProps<WCProps>(props, {
+    exclude: ["icon"],
+    attributeMapping: "lowercase",
+  });
 
   return (
     <goa-badge
-      type={type}
-      content={content}
       // Handle icon display priority: explicit icon prop takes precedence over iconType
-      icon={getIconValue(icon, iconType)}
-      testid={testId}
-      arialabel={ariaLabel}
-      icontype={iconType}
-      mt={mt}
-      mr={mr}
-      mb={mb}
-      ml={ml}
-      {...dataGridProps}
+      icon={getIconValue(props.icon, props.iconType)}
+      {..._props}
     />
   );
 }

libs/react-components/src/lib/block/block.tsx

@@ -1,11 +1,11 @@
 import {
   GoabBlockAlignment,
   GoabBlockDirection,
-  Margins,
+  Margins, DataGridProps,
   Spacing,
 } from "@abgov/ui-components-common";
 import { ReactNode } from "react";
-import { DataGridProps, useDataGridProps } from "../common/data-props";
+import { extractProps } from "../common/extract-props";
 
 export interface WCProps extends Margins {
   gap?: Spacing;
@@ -33,21 +33,13 @@ export interface GoabBlockProps extends Margins, DataGridProps {
 }
 
 export function GoabBlock(props: GoabBlockProps) {
-  const [dataGridProps, { gap, direction, alignment, mt, mr, mb, ml, testId, children}] = useDataGridProps(props);
+  const _props = extractProps<WCProps>(props, {
+    attributeMapping: "lowercase",
+  });
 
   return (
-    <goa-block
-      gap={gap}
-      direction={direction}
-      alignment={alignment}
-      mt={mt}
-      mr={mr}
-      mb={mb}
-      ml={ml}
-      testid={testId}
-      {...dataGridProps}
-    >
-      {children}
+    <goa-block {..._props}>
+      {props.children}
     </goa-block>
   );
 }

libs/react-components/src/lib/button-group/button-group.tsx

@@ -1,11 +1,11 @@
 import {
   GoabButtonGroupAlignment,
   GoabButtonGroupGap,
-  Margins,
+  Margins, DataGridProps,
 } from "@abgov/ui-components-common";
 
 import type { JSX } from "react";
-import { DataGridProps, useDataGridProps } from "../common/data-props";
+import { extractProps } from "../common/extract-props";
 
 interface WCProps extends Margins {
   alignment: GoabButtonGroupAlignment;
@@ -30,29 +30,13 @@ export interface GoabButtonGroupProps extends Margins, DataGridProps {
 }
 
 export function GoabButtonGroup(props: GoabButtonGroupProps): JSX.Element {
-  const [dataGridProps, {
-    alignment,
-    gap,
-    testId,
-    children,
-    mt,
-    mr,
-    mb,
-    ml
-  }] = useDataGridProps(props);
+  const _props = extractProps<WCProps>(props, {
+    attributeMapping: "lowercase",
+  });
 
   return (
-    <goa-button-group
-      alignment={alignment}
-      gap={gap}
-      mt={mt}
-      mr={mr}
-      mb={mb}
-      ml={ml}
-      testid={testId}
-      {...dataGridProps}
-    >
-      {children}
+    <goa-button-group {..._props}>
+      {props.children}
     </goa-button-group>
   );
 }