Skip to content

Commit c422e42

Browse files
vanessatran-ddivanessatran-ddi
committed
chore: refactor extract props function
1 parent a81c2e2 commit c422e42

File tree

55 files changed

+965
-1363
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

55 files changed

+965
-1363
lines changed

‎apps/prs/react/src/routes/features/feat2609.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -248,7 +248,8 @@ export function Feat2609Route() {
248248
onChange={() => toggleSelection(user.idNumber)}
249249
/>
250250

251-
<GoabBlock direction="column" gap="s" alignment="start" style={{ flex: 1 }}>
251+
<div style={{ flex: 1 }}>
252+
<GoabBlock direction="column" gap="s" alignment="start">
252253
<GoabBlock direction="row" gap="s" alignment="center">
253254
<strong data-grid="cell-1">{user.nameOfChild}</strong>
254255
<GoabBlock data-grid="cell-2">
@@ -298,6 +299,7 @@ export function Feat2609Route() {
298299
</GoabBlock>
299300
</GoabBlock>
300301
</GoabBlock>
302+
</div>
301303

302304
<GoabButton type="tertiary" data-grid="cell-3" onClick={() => onOpen(user.idNumber)}>
303305
Open

‎libs/common/src/lib/common.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1073,6 +1073,10 @@ export type TShirtSpacing =
10731073

10741074
export type Spacing = NumericSpacing | TShirtSpacing | null;
10751075

1076+
export interface DataGridProps {
1077+
[key: `data-grid${string}`]: string | boolean | undefined;
1078+
}
1079+
10761080
export interface Margins {
10771081
mt?: Spacing;
10781082
mr?: Spacing;

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

Lines changed: 19 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,11 @@ import { ReactNode, useEffect, useRef, type JSX } from "react";
33
import type {
44
GoabAccordionHeadingSize,
55
GoabAccordionIconPosition,
6-
Margins,
6+
Margins, DataGridProps,
77
} from "@abgov/ui-components-common";
8-
import { DataGridProps, useDataGridProps } from "../common/data-props";
8+
import { extractProps } from "../common/extract-props";
99

1010
interface WCProps extends Margins {
11-
ref: React.RefObject<HTMLElement | null>;
1211
open?: string;
1312
headingsize?: GoabAccordionHeadingSize;
1413
heading: string;
@@ -23,7 +22,10 @@ declare module "react" {
2322
// eslint-disable-next-line @typescript-eslint/no-namespace
2423
namespace JSX {
2524
interface IntrinsicElements {
26-
"goa-accordion": WCProps & React.HTMLAttributes<HTMLElement>;
25+
"goa-accordion": WCProps &
26+
React.HTMLAttributes<HTMLElement> & {
27+
ref: React.RefObject<HTMLElement | null>;
28+
};
2729
}
2830
}
2931
}
@@ -43,53 +45,34 @@ export interface GoabAccordionProps extends Margins, DataGridProps {
4345

4446
export function GoabAccordion(props: GoabAccordionProps): JSX.Element {
4547
const ref = useRef<HTMLElement>(null);
46-
const [dataGridProps, {
47-
open,
48-
heading,
49-
headingSize,
50-
secondaryText,
51-
headingContent,
52-
iconPosition,
53-
maxWidth,
54-
testId,
55-
onChange,
56-
children,
57-
mt,
58-
mr,
59-
mb,
60-
ml}] = useDataGridProps(props);
48+
49+
const _props = extractProps<WCProps>(props, {
50+
exclude: ["open", "onChange", "headingContent"],
51+
attributeMapping: "lowercase"
52+
});
6153

6254
useEffect(() => {
6355
const element = ref.current;
64-
if (element && onChange) {
56+
if (element && props.onChange) {
6557
const handler = (event: Event) => {
6658
const customEvent = event as CustomEvent;
67-
onChange(customEvent.detail.open);
59+
props.onChange?.(customEvent.detail.open);
6860
};
6961
element.addEventListener("_change", handler);
7062
return () => {
7163
element.removeEventListener("_change", handler);
7264
};
7365
}
74-
}, [onChange]);
66+
}, [props.onChange]);
67+
7568
return (
7669
<goa-accordion
7770
ref={ref}
78-
open={open ? "true" : undefined}
79-
headingsize={headingSize}
80-
heading={heading}
81-
secondarytext={secondaryText}
82-
iconposition={iconPosition}
83-
maxwidth={maxWidth}
84-
testid={testId}
85-
mt={mt}
86-
mr={mr}
87-
mb={mb}
88-
ml={ml}
89-
{...dataGridProps}
71+
open={props.open ? "true" : undefined}
72+
{..._props}
9073
>
91-
{headingContent && <div slot="headingcontent">{headingContent}</div>}
92-
{children}
74+
{props.headingContent && <div slot="headingcontent">{props.headingContent}</div>}
75+
{props.children}
9376
</goa-accordion>
9477
);
9578
}

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

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { ReactNode } from "react";
2-
import { GoabIconType } from "@abgov/ui-components-common";
3-
import { DataGridProps, useDataGridProps } from "../common/data-props";
2+
import { DataGridProps, GoabIconType } from "@abgov/ui-components-common";
3+
import { extractProps } from "../common/extract-props";
44

55
interface WCProps {
66
heading: string;
@@ -26,15 +26,13 @@ declare module "react" {
2626
}
2727

2828
export function GoabAppHeaderMenu(props: GoabAppHeaderMenuProps) {
29-
const [dataGridProps, { heading, leadingIcon, testId, children }] = useDataGridProps(props);
29+
const _props = extractProps<WCProps>(props, {
30+
attributeMapping: "lowercase",
31+
});
32+
3033
return (
31-
<goa-app-header-menu
32-
heading={heading}
33-
leadingicon={leadingIcon}
34-
testid={testId}
35-
{...dataGridProps}
36-
>
37-
{children}
34+
<goa-app-header-menu {..._props}>
35+
{props.children}
3836
</goa-app-header-menu>
3937
);
4038
}

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

Lines changed: 16 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,23 @@
11
import { useEffect, useRef, type JSX } from "react";
2-
import { DataGridProps, useDataGridProps } from "../common/data-props";
2+
import { DataGridProps } from "@abgov/ui-components-common";
3+
import { extractProps } from "../common/extract-props";
34

45
interface WCProps {
56
heading?: string;
67
url?: string;
78
maxcontentwidth?: string;
89
fullmenubreakpoint?: number;
910
hasmenuclickhandler?: string;
10-
ref: React.RefObject<HTMLElement | null>;
1111
testid?: string;
1212
}
1313

1414
declare module "react" {
1515
// eslint-disable-next-line @typescript-eslint/no-namespace
1616
namespace JSX {
1717
interface IntrinsicElements {
18-
"goa-app-header": WCProps & React.HTMLAttributes<HTMLElement>;
18+
"goa-app-header": WCProps & React.HTMLAttributes<HTMLElement> & {
19+
ref: React.RefObject<HTMLElement | null>;
20+
};
1921
}
2022
}
2123
}
@@ -32,45 +34,36 @@ export interface GoabAppHeaderProps extends DataGridProps {
3234

3335
export function GoabAppHeader(props: GoabAppHeaderProps): JSX.Element {
3436
const el = useRef<HTMLElement>(null);
35-
const [dataGridProps, {
36-
heading,
37-
url,
38-
maxContentWidth,
39-
fullMenuBreakpoint,
40-
testId,
41-
children,
42-
onMenuClick
43-
}] = useDataGridProps(props);
37+
38+
const _props = extractProps<WCProps>(props, {
39+
exclude: ["onMenuClick"],
40+
attributeMapping: "lowercase",
41+
});
4442

4543
useEffect(() => {
4644
if (!el.current) {
4745
return;
4846
}
49-
if (!onMenuClick) {
47+
if (!props.onMenuClick) {
5048
return;
5149
}
5250
const current = el.current;
5351
const listener = () => {
54-
onMenuClick();
52+
props.onMenuClick?.();
5553
};
5654
current.addEventListener("_menuClick", listener);
5755
return () => {
5856
current.removeEventListener("_menuClick", listener);
5957
};
60-
}, [el, onMenuClick]);
58+
}, [el, props.onMenuClick]);
6159

6260
return (
6361
<goa-app-header
6462
ref={el}
65-
heading={heading}
66-
url={url}
67-
fullmenubreakpoint={fullMenuBreakpoint}
68-
maxcontentwidth={maxContentWidth}
69-
testid={testId}
70-
hasmenuclickhandler={onMenuClick ? "true" : "false"}
71-
{...dataGridProps}
63+
hasmenuclickhandler={props.onMenuClick ? "true" : "false"}
64+
{..._props}
7265
>
73-
{children}
66+
{props.children}
7467
</goa-app-header>
7568
);
7669
}

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

Lines changed: 8 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import { GoabBadgeType, Margins, GoabIconType } from "@abgov/ui-components-common";
1+
import { DataGridProps, GoabBadgeType, GoabIconType, Margins } from "@abgov/ui-components-common";
22
import type { JSX } from "react";
3-
import { DataGridProps, useDataGridProps } from "../common/data-props";
3+
import { extractProps } from "../common/extract-props";
44

55
interface WCProps extends Margins {
66
type: GoabBadgeType;
@@ -48,33 +48,16 @@ function getIconValue(icon?: boolean, iconType?: GoabIconType): "true" | "false"
4848
}
4949

5050
export function GoabBadge(props: GoabBadgeProps): JSX.Element {
51-
const [dataGridProps, {
52-
type,
53-
content,
54-
icon,
55-
testId,
56-
mt,
57-
mr,
58-
mb,
59-
ml,
60-
ariaLabel,
61-
iconType,
62-
}] = useDataGridProps(props);
51+
const _props = extractProps<WCProps>(props, {
52+
exclude: ["icon"],
53+
attributeMapping: "lowercase",
54+
});
6355

6456
return (
6557
<goa-badge
66-
type={type}
67-
content={content}
6858
// Handle icon display priority: explicit icon prop takes precedence over iconType
69-
icon={getIconValue(icon, iconType)}
70-
testid={testId}
71-
arialabel={ariaLabel}
72-
icontype={iconType}
73-
mt={mt}
74-
mr={mr}
75-
mb={mb}
76-
ml={ml}
77-
{...dataGridProps}
59+
icon={getIconValue(props.icon, props.iconType)}
60+
{..._props}
7861
/>
7962
);
8063
}

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

Lines changed: 7 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import {
22
GoabBlockAlignment,
33
GoabBlockDirection,
4-
Margins,
4+
Margins, DataGridProps,
55
Spacing,
66
} from "@abgov/ui-components-common";
77
import { ReactNode } from "react";
8-
import { DataGridProps, useDataGridProps } from "../common/data-props";
8+
import { extractProps } from "../common/extract-props";
99

1010
export interface WCProps extends Margins {
1111
gap?: Spacing;
@@ -33,21 +33,13 @@ export interface GoabBlockProps extends Margins, DataGridProps {
3333
}
3434

3535
export function GoabBlock(props: GoabBlockProps) {
36-
const [dataGridProps, { gap, direction, alignment, mt, mr, mb, ml, testId, children}] = useDataGridProps(props);
36+
const _props = extractProps<WCProps>(props, {
37+
attributeMapping: "lowercase",
38+
});
3739

3840
return (
39-
<goa-block
40-
gap={gap}
41-
direction={direction}
42-
alignment={alignment}
43-
mt={mt}
44-
mr={mr}
45-
mb={mb}
46-
ml={ml}
47-
testid={testId}
48-
{...dataGridProps}
49-
>
50-
{children}
41+
<goa-block {..._props}>
42+
{props.children}
5143
</goa-block>
5244
);
5345
}

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

Lines changed: 7 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import {
22
GoabButtonGroupAlignment,
33
GoabButtonGroupGap,
4-
Margins,
4+
Margins, DataGridProps,
55
} from "@abgov/ui-components-common";
66

77
import type { JSX } from "react";
8-
import { DataGridProps, useDataGridProps } from "../common/data-props";
8+
import { extractProps } from "../common/extract-props";
99

1010
interface WCProps extends Margins {
1111
alignment: GoabButtonGroupAlignment;
@@ -30,29 +30,13 @@ export interface GoabButtonGroupProps extends Margins, DataGridProps {
3030
}
3131

3232
export function GoabButtonGroup(props: GoabButtonGroupProps): JSX.Element {
33-
const [dataGridProps, {
34-
alignment,
35-
gap,
36-
testId,
37-
children,
38-
mt,
39-
mr,
40-
mb,
41-
ml
42-
}] = useDataGridProps(props);
33+
const _props = extractProps<WCProps>(props, {
34+
attributeMapping: "lowercase",
35+
});
4336

4437
return (
45-
<goa-button-group
46-
alignment={alignment}
47-
gap={gap}
48-
mt={mt}
49-
mr={mr}
50-
mb={mb}
51-
ml={ml}
52-
testid={testId}
53-
{...dataGridProps}
54-
>
55-
{children}
38+
<goa-button-group {..._props}>
39+
{props.children}
5640
</goa-button-group>
5741
);
5842
}

0 commit comments

Comments
 (0)