From fc63d3b18e00d75d9fbe924c2a5d8b193acfabde Mon Sep 17 00:00:00 2001 From: jacobo-dominguez-wgu Date: Thu, 2 Oct 2025 10:58:47 -0600 Subject: [PATCH 1/9] chore: react imports cleanup --- babel.config.json | 4 ++-- src/ActionRow/index.tsx | 11 ++++----- src/Alert/Alert.test.tsx | 6 ++--- src/Alert/index.tsx | 13 ++++++----- src/Annotation/Annotation.test.jsx | 1 - src/Annotation/index.tsx | 9 ++++---- src/Avatar/Avatar.test.jsx | 1 - src/Avatar/index.tsx | 4 ++-- src/Breadcrumb/Breadcrumb.test.tsx | 1 - src/Breadcrumb/BreadcrumbLink.tsx | 4 ++-- src/Breadcrumb/index.tsx | 36 ++++++++++++++++-------------- src/Bubble/Bubble.test.tsx | 1 - src/Bubble/index.tsx | 9 ++++---- src/Button/Button.test.tsx | 1 - src/Button/ButtonGroup.test.tsx | 1 - src/Button/ButtonToolbar.test.tsx | 1 - src/Button/index.tsx | 27 ++++++++++++---------- src/asInput/asInput.test.jsx | 1 - src/asInput/index.jsx | 28 +++++++++++++---------- 19 files changed, 83 insertions(+), 76 deletions(-) diff --git a/babel.config.json b/babel.config.json index 6815ebd872..f2421ecf77 100644 --- a/babel.config.json +++ b/babel.config.json @@ -1,14 +1,14 @@ { "presets": [ ["@babel/preset-env", { "modules": false } ], - ["@babel/preset-react", { "useSpread": true } ], + ["@babel/preset-react", { "useSpread": true, "runtime": "automatic" } ], "@babel/preset-typescript" ], "env": { "test": { "presets": [ ["@babel/preset-env", {}], - ["@babel/preset-react", { "useSpread": true } ], + ["@babel/preset-react", { "useSpread": true, "runtime": "automatic" } ], "@babel/preset-typescript" ] } diff --git a/src/ActionRow/index.tsx b/src/ActionRow/index.tsx index 5a698762f2..f1a867077d 100644 --- a/src/ActionRow/index.tsx +++ b/src/ActionRow/index.tsx @@ -1,11 +1,12 @@ -import React from 'react'; +import type { HTMLAttributes, ElementType, ReactNode } from 'react'; +import { createElement } from 'react'; import classNames from 'classnames'; -interface ActionRowProps extends React.HTMLAttributes { +interface ActionRowProps extends HTMLAttributes { /** Specifies the base element */ - as?: React.ElementType; + as?: ElementType; /** Specifies the contents of the row */ - children: React.ReactNode; + children: ReactNode; /** Specifies class name to append to the base element */ className?: string; /** Specifies whether row should be displayed horizontally */ @@ -18,7 +19,7 @@ function ActionRow({ children, ...props }: ActionRowProps) { - return React.createElement( + return createElement( as, { ...props, diff --git a/src/Alert/Alert.test.tsx b/src/Alert/Alert.test.tsx index 60929101b3..bff737a13c 100644 --- a/src/Alert/Alert.test.tsx +++ b/src/Alert/Alert.test.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import type { ReactNode } from 'react'; import { IntlProvider } from 'react-intl'; import renderer, { act } from 'react-test-renderer'; import { render, screen, within } from '@testing-library/react'; @@ -11,9 +11,9 @@ import Alert, { AlertProps } from '.'; /** A compile time check. Whatever React elements this wraps won't run at runtime. */ // eslint-disable-next-line @typescript-eslint/no-unused-vars -function CompileCheck(_props: { children: React.ReactNode }) { return null; } +function CompileCheck(_props: { children: ReactNode }) { return null; } -function AlertWrapper({ children, ...props }: AlertProps & { children: React.ReactNode }) { +function AlertWrapper({ children, ...props }: AlertProps & { children: ReactNode }) { return ( diff --git a/src/Alert/index.tsx b/src/Alert/index.tsx index bbdb22b497..d54ea8f95a 100644 --- a/src/Alert/index.tsx +++ b/src/Alert/index.tsx @@ -1,5 +1,7 @@ /* eslint-disable react/require-default-props */ -import React, { +import type { ComponentType, ReactElement, ForwardedRef } from 'react'; + +import { useCallback, useEffect, useState, @@ -11,6 +13,7 @@ import React, { RefAttributes, cloneElement, } from 'react'; + import classNames from 'classnames'; import { Alert as BaseAlert, @@ -46,7 +49,7 @@ export interface AlertProps extends BaseProps { transition?: boolean | TransitionComponent; children?: ReactNode; /** Icon that will be shown in the alert */ - icon?: React.ComponentType; + icon?: ComponentType; /** Whether the alert is shown. */ show?: boolean; /** Whether the alert is dismissible. Defaults to false. */ @@ -54,7 +57,7 @@ export interface AlertProps extends BaseProps { /** Optional callback function for when the alert it dismissed. */ onClose?: () => void; /** Optional list of action elements. May include, at most, 2 actions, or 1 if dismissible is true. */ - actions?: React.ReactElement[]; + actions?: ReactElement[]; /** Position of the dismiss and call-to-action buttons. Defaults to `false`. */ stacked?: boolean; /** Sets the text for alert close button, defaults to 'Dismiss'. */ @@ -96,7 +99,7 @@ const Alert = forwardRef(({ stacked = false, show = true, ...props -}: AlertProps, ref: React.ForwardedRef) => { +}: AlertProps, ref: ForwardedRef) => { const [isStacked, setIsStacked] = useState(stacked); const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth }); const actionButtonSize = 'sm'; @@ -110,7 +113,7 @@ const Alert = forwardRef(({ }, [isExtraSmall, stacked]); const cloneActionElement = useCallback( - (Action: React.ReactElement) => { + (Action: ReactElement) => { const addtlActionProps = { size: actionButtonSize, key: Action.props.children }; return cloneElement(Action, addtlActionProps); }, diff --git a/src/Annotation/Annotation.test.jsx b/src/Annotation/Annotation.test.jsx index 9d0bd229b7..4492d66406 100644 --- a/src/Annotation/Annotation.test.jsx +++ b/src/Annotation/Annotation.test.jsx @@ -1,4 +1,3 @@ -import React from 'react'; import renderer from 'react-test-renderer'; import { render, screen } from '@testing-library/react'; import Annotation from '.'; diff --git a/src/Annotation/index.tsx b/src/Annotation/index.tsx index b4ae89f8c8..095e4b8d01 100644 --- a/src/Annotation/index.tsx +++ b/src/Annotation/index.tsx @@ -1,9 +1,10 @@ -import React, { ForwardedRef } from 'react'; +import type { HTMLAttributes, ReactNode } from 'react'; +import { forwardRef, ForwardedRef } from 'react'; import classNames from 'classnames'; -interface AnnotationProps extends React.HTMLAttributes { +interface AnnotationProps extends HTMLAttributes { /** Specifies contents of the component. */ - children: React.ReactNode; + children: ReactNode; /** Specifies class name to append to the base element. */ className?: string; /** Specifies variant to use. */ @@ -12,7 +13,7 @@ interface AnnotationProps extends React.HTMLAttributes { arrowPlacement?: 'top' | 'right' | 'bottom' | 'left'; } -const Annotation = React.forwardRef(({ +const Annotation = forwardRef(({ className, variant = 'success', children, diff --git a/src/Avatar/Avatar.test.jsx b/src/Avatar/Avatar.test.jsx index 6a0065edfc..caaad284f6 100644 --- a/src/Avatar/Avatar.test.jsx +++ b/src/Avatar/Avatar.test.jsx @@ -1,4 +1,3 @@ -import React from 'react'; import renderer from 'react-test-renderer'; import Avatar from './index'; diff --git a/src/Avatar/index.tsx b/src/Avatar/index.tsx index f354caf686..057b917eaa 100644 --- a/src/Avatar/index.tsx +++ b/src/Avatar/index.tsx @@ -1,9 +1,9 @@ -import React from 'react'; +import type { ImgHTMLAttributes } from 'react'; import classNames from 'classnames'; // @ts-ignore import defaultAvatar from './default-avatar.svg'; -export interface AvatarProps extends React.ImgHTMLAttributes { +export interface AvatarProps extends ImgHTMLAttributes { /** Alt text. Usually the user's name */ alt?: string; /** Size of the avatar */ diff --git a/src/Breadcrumb/Breadcrumb.test.tsx b/src/Breadcrumb/Breadcrumb.test.tsx index 4f11c5afbb..109f9439f9 100644 --- a/src/Breadcrumb/Breadcrumb.test.tsx +++ b/src/Breadcrumb/Breadcrumb.test.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; diff --git a/src/Breadcrumb/BreadcrumbLink.tsx b/src/Breadcrumb/BreadcrumbLink.tsx index a9869ed0d8..cf2eee8dcb 100644 --- a/src/Breadcrumb/BreadcrumbLink.tsx +++ b/src/Breadcrumb/BreadcrumbLink.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import { createElement } from 'react'; import classNames from 'classnames'; interface BreadcrumbLinkProps { @@ -39,7 +39,7 @@ export default function BreadcrumbLink({ as, clickHandler = undefined, linkProps addtlProps.onClick = clickHandler; } - return React.createElement( + return createElement( as, { ...props, diff --git a/src/Breadcrumb/index.tsx b/src/Breadcrumb/index.tsx index 343c922f09..de1a9a518c 100644 --- a/src/Breadcrumb/index.tsx +++ b/src/Breadcrumb/index.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { Fragment } from 'react'; import classNames from 'classnames'; import BreadcrumbLink from './BreadcrumbLink'; @@ -40,27 +40,29 @@ function Breadcrumb({ const displayLinks = isMobile ? [links[linkCount - 1]] : links; return ( - + ) ); } diff --git a/src/Bubble/Bubble.test.tsx b/src/Bubble/Bubble.test.tsx index d732aa504e..8ec8f18a3d 100644 --- a/src/Bubble/Bubble.test.tsx +++ b/src/Bubble/Bubble.test.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import renderer from 'react-test-renderer'; import { render, screen } from '@testing-library/react'; import Bubble from '.'; diff --git a/src/Bubble/index.tsx b/src/Bubble/index.tsx index a30e71e957..576e58edf1 100644 --- a/src/Bubble/index.tsx +++ b/src/Bubble/index.tsx @@ -1,11 +1,12 @@ -import React from 'react'; +import type { ReactNode, ForwardedRef } from 'react'; +import { forwardRef } from 'react'; import classNames from 'classnames'; export type BubbleVariant = 'primary' | 'success' | 'error' | 'warning'; export interface BubbleProps { /** Specifies contents of the component. */ - children: React.ReactNode; + children: ReactNode; /** The `Bubble` style variant to use. */ variant?: BubbleVariant; /** Activates disabled variant. */ @@ -16,14 +17,14 @@ export interface BubbleProps { expandable?: boolean; } -const Bubble = React.forwardRef(({ +const Bubble = forwardRef(({ variant = 'primary', className, children = null, disabled = false, expandable = false, ...props -}: BubbleProps, ref: React.ForwardedRef) => ( +}: BubbleProps, ref: ForwardedRef) => (
{ /** Set a custom element for this component (default: `button`, with `type="button"`). */ - as?: React.ElementType; + as?: ElementType; size?: 'sm' | 'md' | 'lg' | 'inline'; /** * An icon component to render. Example: @@ -38,7 +41,7 @@ export interface ButtonProps extends Omit { * * ``` */ - iconBefore?: React.ComponentType; + iconBefore?: ComponentType; /** * An icon component to render. Example: * ``` @@ -46,7 +49,7 @@ export interface ButtonProps extends Omit { * * ``` */ - iconAfter?: React.ComponentType; + iconAfter?: ComponentType; // The following are the same as in BaseButtonProps, but we re-define them to add documentation. // The upstream type defintions do not have any comments/docs. @@ -56,7 +59,7 @@ export interface ButtonProps extends Omit { /** Optional: Specify additional class name(s) to apply to the button */ className?: string; /** Specifies the text that is displayed within the button. */ - children: React.ReactNode; + children: ReactNode; /** Specifies variant to use. * Can be one of the base variants: `primary`, `secondary`, `tertiary`, `brand`, `success`, `danger`, `warning`, * `info`, `dark`, `light`, `link`, @@ -66,13 +69,13 @@ export interface ButtonProps extends Omit { variant?: BaseVariant | `inverse-${BaseVariant}` | `outline-${BaseVariant}` | `inverse-outline-${BaseVariant}` | OtherDeprecatedValue; } -const Button: ComponentWithAsProp<'button', ButtonProps> = React.forwardRef(({ +const Button: ComponentWithAsProp<'button', ButtonProps> = forwardRef(({ children, iconAfter, iconBefore, size, ...props -}: ButtonProps, ref: React.ForwardedRef) => ( +}: ButtonProps, ref: ForwardedRef) => ( types do not allow 'md' or 'inline', but we do. {...props} @@ -91,9 +94,9 @@ const Button: ComponentWithAsProp<'button', ButtonProps> = React.forwardRef(({ interface ButtonGroupProps extends Omit { /** Specifies element type for this component. */ - as?: React.ElementType; + as?: ElementType; /** An ARIA role describing the button group (default: `group`). */ - role?: React.AriaRole; + role?: AriaRole; /** Specifies the size for all Buttons in the group (default: `md`). */ size?: 'sm' | 'md' | 'lg' | 'inline'; /** Display as a button toggle group (default: `false`). */ @@ -105,7 +108,7 @@ interface ButtonGroupProps extends Omit { } const ButtonGroup: ComponentWithAsProp<'div', ButtonGroupProps> = ( - React.forwardRef(({ size = 'md', ...props }: ButtonGroupProps, ref: React.ForwardedRef) => ( + forwardRef(({ size = 'md', ...props }: ButtonGroupProps, ref: ForwardedRef) => ( )) ); @@ -115,13 +118,13 @@ const ButtonGroup: ComponentWithAsProp<'div', ButtonGroupProps> = ( interface ButtonToolbarProps extends BaseButtonToolbarProps { /** An ARIA role describing the button group (default: `toolbar`). */ - role?: React.AriaRole; + role?: AriaRole; /** Overrides underlying component base CSS class name (default: `btn-toolbar`) */ bsPrefix?: string; } const ButtonToolbar: ComponentWithAsProp<'div', ButtonToolbarProps> = ( - React.forwardRef((props: ButtonToolbarProps, ref: React.ForwardedRef) => ( + forwardRef((props: ButtonToolbarProps, ref: ForwardedRef) => ( )) ); diff --git a/src/asInput/asInput.test.jsx b/src/asInput/asInput.test.jsx index 3951272f1b..1763b5c672 100644 --- a/src/asInput/asInput.test.jsx +++ b/src/asInput/asInput.test.jsx @@ -1,4 +1,3 @@ -import React from 'react'; import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; diff --git a/src/asInput/index.jsx b/src/asInput/index.jsx index 93175d1fe8..6df8cb05b5 100644 --- a/src/asInput/index.jsx +++ b/src/asInput/index.jsx @@ -1,4 +1,5 @@ -import React from 'react'; +/* eslint-disable react/no-unused-prop-types */ +import { cloneElement, Component } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; @@ -62,7 +63,7 @@ export const defaultProps = { }; const asInput = (WrappedComponent, inputType = undefined, labelFirst = true) => { - class NewComponent extends React.Component { + class NewComponent extends Component { constructor(props) { super(props); this.handleChange = this.handleChange.bind(this); @@ -133,15 +134,18 @@ const asInput = (WrappedComponent, inputType = undefined, labelFirst = true) => getLabel() { return ( - + // eslint-disable-next-line jsx-a11y/label-has-for + ( + + ) ); } @@ -179,7 +183,7 @@ const asInput = (WrappedComponent, inputType = undefined, labelFirst = true) => getAddons({ addonElements, type }) { if (Array.isArray(addonElements)) { - return addonElements.map((addon, index) => React.cloneElement( + return addonElements.map((addon, index) => cloneElement( addon, { key: this.generateInputGroupAddonKey({ prefix: type, index }) }, )); From c7ebd8533bc1aa733e388a78c39a1f2bdd6684d6 Mon Sep 17 00:00:00 2001 From: jacobo-dominguez-wgu Date: Thu, 2 Oct 2025 10:58:47 -0600 Subject: [PATCH 2/9] chore: react imports cleanup --- src/Alert/index.tsx | 1 + src/Breadcrumb/index.tsx | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/Alert/index.tsx b/src/Alert/index.tsx index d54ea8f95a..6b176323f4 100644 --- a/src/Alert/index.tsx +++ b/src/Alert/index.tsx @@ -1,6 +1,7 @@ /* eslint-disable react/require-default-props */ import type { ComponentType, ReactElement, ForwardedRef } from 'react'; +// react import needed to support JSX outside functions import { useCallback, useEffect, diff --git a/src/Breadcrumb/index.tsx b/src/Breadcrumb/index.tsx index de1a9a518c..eff7b51daf 100644 --- a/src/Breadcrumb/index.tsx +++ b/src/Breadcrumb/index.tsx @@ -1,4 +1,4 @@ -import React, { Fragment } from 'react'; +import { Fragment } from 'react'; import classNames from 'classnames'; import BreadcrumbLink from './BreadcrumbLink'; From 4957ade5d333848b1d164bdefe94699f4ef91872 Mon Sep 17 00:00:00 2001 From: jacobo-dominguez-wgu Date: Thu, 2 Oct 2025 14:31:53 -0600 Subject: [PATCH 3/9] chore: adding comments on react imports and removing runtime on babel --- babel.config.json | 2 +- src/asInput/index.jsx | 22 ++++++++++------------ 2 files changed, 11 insertions(+), 13 deletions(-) diff --git a/babel.config.json b/babel.config.json index f2421ecf77..dfa5122e26 100644 --- a/babel.config.json +++ b/babel.config.json @@ -1,7 +1,7 @@ { "presets": [ ["@babel/preset-env", { "modules": false } ], - ["@babel/preset-react", { "useSpread": true, "runtime": "automatic" } ], + ["@babel/preset-react", { "useSpread": true} ], "@babel/preset-typescript" ], "env": { diff --git a/src/asInput/index.jsx b/src/asInput/index.jsx index 6df8cb05b5..63c8db0136 100644 --- a/src/asInput/index.jsx +++ b/src/asInput/index.jsx @@ -134,18 +134,16 @@ const asInput = (WrappedComponent, inputType = undefined, labelFirst = true) => getLabel() { return ( - // eslint-disable-next-line jsx-a11y/label-has-for - ( - - ) + // eslint-disable-next-line jsx-a11y/label-has-for + ); } From d34f20ebd257603d71160983c00d07a6a9e16ad3 Mon Sep 17 00:00:00 2001 From: jacobo-dominguez-wgu Date: Tue, 7 Oct 2025 11:22:13 -0600 Subject: [PATCH 4/9] chore: bumping react peer dependecy to 16.14 --- package-lock.json | 4 ++-- package.json | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index 6af3d6865c..d5dd81f1c4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -118,8 +118,8 @@ "typescript": "^4.7.4" }, "peerDependencies": { - "react": "^16.8.6 || ^17 || ^18", - "react-dom": "^16.8.6 || ^17 || ^18", + "react": "^16.14 || ^17 || ^18", + "react-dom": "^16.14 || ^17 || ^18", "react-intl": "^5.25.1 || ^6.4.0" } }, diff --git a/package.json b/package.json index c55666da16..4c72a4e30c 100644 --- a/package.json +++ b/package.json @@ -107,8 +107,8 @@ "uuid": "^9.0.0" }, "peerDependencies": { - "react": "^16.8.6 || ^17 || ^18", - "react-dom": "^16.8.6 || ^17 || ^18", + "react": "^16.14 || ^17 || ^18", + "react-dom": "^16.14 || ^17 || ^18", "react-intl": "^5.25.1 || ^6.4.0" }, "devDependencies": { From 2493a44ccbd588b9c114deeeb566b3be3c067e2e Mon Sep 17 00:00:00 2001 From: jacobo-dominguez-wgu Date: Thu, 16 Oct 2025 12:53:44 -0600 Subject: [PATCH 5/9] chore: adding config for gatsby and removing react imports and comments --- babel.config.json | 2 +- src/Alert/index.tsx | 3 --- src/Breadcrumb/index.tsx | 11 +++++------ src/asInput/index.jsx | 2 +- www/gatsby-node.js | 9 +++++++++ 5 files changed, 16 insertions(+), 11 deletions(-) diff --git a/babel.config.json b/babel.config.json index dfa5122e26..f2421ecf77 100644 --- a/babel.config.json +++ b/babel.config.json @@ -1,7 +1,7 @@ { "presets": [ ["@babel/preset-env", { "modules": false } ], - ["@babel/preset-react", { "useSpread": true} ], + ["@babel/preset-react", { "useSpread": true, "runtime": "automatic" } ], "@babel/preset-typescript" ], "env": { diff --git a/src/Alert/index.tsx b/src/Alert/index.tsx index 6b176323f4..478100bcaa 100644 --- a/src/Alert/index.tsx +++ b/src/Alert/index.tsx @@ -1,7 +1,5 @@ /* eslint-disable react/require-default-props */ import type { ComponentType, ReactElement, ForwardedRef } from 'react'; - -// react import needed to support JSX outside functions import { useCallback, useEffect, @@ -14,7 +12,6 @@ import { RefAttributes, cloneElement, } from 'react'; - import classNames from 'classnames'; import { Alert as BaseAlert, diff --git a/src/Breadcrumb/index.tsx b/src/Breadcrumb/index.tsx index eff7b51daf..f29efe5bb3 100644 --- a/src/Breadcrumb/index.tsx +++ b/src/Breadcrumb/index.tsx @@ -57,12 +57,11 @@ function Breadcrumb({ {spacer || } )} - - ))} - {!isMobile && activeLabel &&
  • {activeLabel}
    • } - - - ) + + ))} + {!isMobile && activeLabel &&
  • {activeLabel}
    • } + + ); } diff --git a/src/asInput/index.jsx b/src/asInput/index.jsx index 63c8db0136..82494ea430 100644 --- a/src/asInput/index.jsx +++ b/src/asInput/index.jsx @@ -134,7 +134,7 @@ const asInput = (WrappedComponent, inputType = undefined, labelFirst = true) => getLabel() { return ( - // eslint-disable-next-line jsx-a11y/label-has-for + // eslint-disable-next-line jsx-a11y/label-has-for