From d361c33c2757c5735941d1a3c101372df2dd38a4 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/Badge/index.jsx | 4 ++-- src/Breadcrumb/Breadcrumb.test.jsx | 1 - src/Breadcrumb/BreadcrumbLink.jsx | 4 ++-- src/Breadcrumb/index.jsx | 38 ++++++++++++++++-------------- 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 | 26 ++++++++++---------- 20 files changed, 84 insertions(+), 79 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/Badge/index.jsx b/src/Badge/index.jsx index 5bc76469ca..b6a395f160 100644 --- a/src/Badge/index.jsx +++ b/src/Badge/index.jsx @@ -1,8 +1,8 @@ -import React from 'react'; +import { forwardRef } from 'react'; import PropTypes from 'prop-types'; import BaseBadge from 'react-bootstrap/Badge'; -const Badge = React.forwardRef((props, ref) => ); +const Badge = forwardRef((props, ref) => ); const STYLE_VARIANTS = [ 'primary', diff --git a/src/Breadcrumb/Breadcrumb.test.jsx b/src/Breadcrumb/Breadcrumb.test.jsx index 3b402d971e..b50710789c 100644 --- a/src/Breadcrumb/Breadcrumb.test.jsx +++ b/src/Breadcrumb/Breadcrumb.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/Breadcrumb/BreadcrumbLink.jsx b/src/Breadcrumb/BreadcrumbLink.jsx index e5d826a7d8..54db57a33c 100644 --- a/src/Breadcrumb/BreadcrumbLink.jsx +++ b/src/Breadcrumb/BreadcrumbLink.jsx @@ -1,4 +1,4 @@ -import React from 'react'; +import { createElement } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; @@ -24,7 +24,7 @@ export default function BreadcrumbLink({ as, clickHandler, linkProps }) { addtlProps.onClick = clickHandler; } - return React.createElement( + return createElement( as, { ...props, diff --git a/src/Breadcrumb/index.jsx b/src/Breadcrumb/index.jsx index 0e3f0e38c5..058af8c2fd 100644 --- a/src/Breadcrumb/index.jsx +++ b/src/Breadcrumb/index.jsx @@ -1,4 +1,4 @@ -import React from 'react'; +import { Fragment } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; @@ -14,28 +14,30 @@ 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 f043dafde4..e3708db711 100644 --- a/src/asInput/index.jsx +++ b/src/asInput/index.jsx @@ -1,5 +1,5 @@ /* eslint-disable react/no-unused-prop-types */ -import React from 'react'; +import { cloneElement, Component } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; @@ -63,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); @@ -136,15 +136,17 @@ const asInput = (WrappedComponent, inputType = undefined, labelFirst = true) => getLabel() { return ( // eslint-disable-next-line jsx-a11y/label-has-for - + ( + + ) ); } @@ -182,7 +184,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 86bf362f68ebd91f1ca376db12c5db0790ef1a48 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 --- babel.config.json | 4 ++-- src/ActionRow/index.tsx | 11 +++++---- src/Alert/Alert.test.tsx | 6 ++--- src/Alert/index.tsx | 11 +++++---- src/Annotation/Annotation.test.jsx | 1 - src/Annotation/index.tsx | 9 +++---- src/Avatar/Avatar.test.jsx | 1 - src/Avatar/index.tsx | 4 ++-- src/Badge/index.jsx | 4 ++-- src/Breadcrumb/Breadcrumb.test.jsx | 1 - src/Breadcrumb/BreadcrumbLink.jsx | 4 ++-- src/Breadcrumb/index.jsx | 38 ++++++++++++++++-------------- 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 | 26 ++++++++++---------- 20 files changed, 83 insertions(+), 78 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..cb9cfd5bb6 100644 --- a/src/Alert/index.tsx +++ b/src/Alert/index.tsx @@ -1,4 +1,6 @@ /* eslint-disable react/require-default-props */ +import type { ComponentType, ReactElement, ForwardedRef } from 'react'; +// react import needed to support JSX outside functions import React, { useCallback, useEffect, @@ -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/Badge/index.jsx b/src/Badge/index.jsx index 5bc76469ca..041247494d 100644 --- a/src/Badge/index.jsx +++ b/src/Badge/index.jsx @@ -1,8 +1,8 @@ -import React from 'react'; +import React, { forwardRef } from 'react'; import PropTypes from 'prop-types'; import BaseBadge from 'react-bootstrap/Badge'; -const Badge = React.forwardRef((props, ref) => ); +const Badge = forwardRef((props, ref) => ); const STYLE_VARIANTS = [ 'primary', diff --git a/src/Breadcrumb/Breadcrumb.test.jsx b/src/Breadcrumb/Breadcrumb.test.jsx index 3b402d971e..b50710789c 100644 --- a/src/Breadcrumb/Breadcrumb.test.jsx +++ b/src/Breadcrumb/Breadcrumb.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/Breadcrumb/BreadcrumbLink.jsx b/src/Breadcrumb/BreadcrumbLink.jsx index e5d826a7d8..54db57a33c 100644 --- a/src/Breadcrumb/BreadcrumbLink.jsx +++ b/src/Breadcrumb/BreadcrumbLink.jsx @@ -1,4 +1,4 @@ -import React from 'react'; +import { createElement } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; @@ -24,7 +24,7 @@ export default function BreadcrumbLink({ as, clickHandler, linkProps }) { addtlProps.onClick = clickHandler; } - return React.createElement( + return createElement( as, { ...props, diff --git a/src/Breadcrumb/index.jsx b/src/Breadcrumb/index.jsx index 0e3f0e38c5..058af8c2fd 100644 --- a/src/Breadcrumb/index.jsx +++ b/src/Breadcrumb/index.jsx @@ -1,4 +1,4 @@ -import React from 'react'; +import { Fragment } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; @@ -14,28 +14,30 @@ 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 f043dafde4..e3708db711 100644 --- a/src/asInput/index.jsx +++ b/src/asInput/index.jsx @@ -1,5 +1,5 @@ /* eslint-disable react/no-unused-prop-types */ -import React from 'react'; +import { cloneElement, Component } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; @@ -63,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); @@ -136,15 +136,17 @@ const asInput = (WrappedComponent, inputType = undefined, labelFirst = true) => getLabel() { return ( // eslint-disable-next-line jsx-a11y/label-has-for - + ( + + ) ); } @@ -182,7 +184,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 dccbbdfdba2988112ff5a2582c00f6c7e7ff3ec4 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/Badge/index.jsx | 1 + src/Button/index.tsx | 1 + src/asInput/index.jsx | 22 ++++++++++------------ 4 files changed, 13 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/Badge/index.jsx b/src/Badge/index.jsx index 041247494d..4898a04470 100644 --- a/src/Badge/index.jsx +++ b/src/Badge/index.jsx @@ -1,3 +1,4 @@ +// React import needed to support JSX outside functions, if removed build-docs fails import React, { forwardRef } from 'react'; import PropTypes from 'prop-types'; import BaseBadge from 'react-bootstrap/Badge'; diff --git a/src/Button/index.tsx b/src/Button/index.tsx index 7f28ce160c..25ce500eb8 100644 --- a/src/Button/index.tsx +++ b/src/Button/index.tsx @@ -1,6 +1,7 @@ import type { ElementType, ComponentType, ReactNode, ForwardedRef, AriaRole, } from 'react'; +// React import needed to support JSX outside functions, if removed build-docs fails import React, { forwardRef } from 'react'; import classNames from 'classnames'; import BaseButton, { type ButtonProps as BaseButtonProps } from 'react-bootstrap/Button'; diff --git a/src/asInput/index.jsx b/src/asInput/index.jsx index e3708db711..37f88d5f1e 100644 --- a/src/asInput/index.jsx +++ b/src/asInput/index.jsx @@ -135,18 +135,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 75a9397dc6b2dbd4d2306c88099ed4c5d86dfe74 Mon Sep 17 00:00:00 2001 From: jacobo-dominguez-wgu Date: Thu, 2 Oct 2025 14:31:53 -0600 Subject: [PATCH 4/9] chore: adding comments on react imports and removing runtime on babel --- src/Badge/index.jsx | 1 + src/Button/index.tsx | 1 + src/asInput/index.jsx | 22 ++++++++++------------ 3 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/Badge/index.jsx b/src/Badge/index.jsx index 041247494d..4898a04470 100644 --- a/src/Badge/index.jsx +++ b/src/Badge/index.jsx @@ -1,3 +1,4 @@ +// React import needed to support JSX outside functions, if removed build-docs fails import React, { forwardRef } from 'react'; import PropTypes from 'prop-types'; import BaseBadge from 'react-bootstrap/Badge'; diff --git a/src/Button/index.tsx b/src/Button/index.tsx index 7f28ce160c..25ce500eb8 100644 --- a/src/Button/index.tsx +++ b/src/Button/index.tsx @@ -1,6 +1,7 @@ import type { ElementType, ComponentType, ReactNode, ForwardedRef, AriaRole, } from 'react'; +// React import needed to support JSX outside functions, if removed build-docs fails import React, { forwardRef } from 'react'; import classNames from 'classnames'; import BaseButton, { type ButtonProps as BaseButtonProps } from 'react-bootstrap/Button'; diff --git a/src/asInput/index.jsx b/src/asInput/index.jsx index e3708db711..37f88d5f1e 100644 --- a/src/asInput/index.jsx +++ b/src/asInput/index.jsx @@ -135,18 +135,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 fe2e6844e2692c94161f5c96674ff2a4d28b495a Mon Sep 17 00:00:00 2001 From: jacobo-dominguez-wgu Date: Tue, 7 Oct 2025 11:22:13 -0600 Subject: [PATCH 5/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 a47d3a67d3..de5ef5234c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -119,8 +119,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 7c2708fa63..b29e19b52e 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 99007975277dcf4722c263b82631f7bb59d906b1 Mon Sep 17 00:00:00 2001 From: jacobo-dominguez-wgu Date: Thu, 16 Oct 2025 12:53:44 -0600 Subject: [PATCH 6/9] chore: adding config for gatsby and removing react imports and comments --- babel.config.json | 2 +- src/Alert/index.tsx | 4 +--- src/Badge/index.jsx | 3 +-- src/Breadcrumb/index.jsx | 36 +++++++++++++++++------------------- src/Button/index.tsx | 3 +-- src/asInput/index.jsx | 2 +- www/gatsby-node.js | 9 +++++++++ 7 files changed, 31 insertions(+), 28 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 cb9cfd5bb6..478100bcaa 100644 --- a/src/Alert/index.tsx +++ b/src/Alert/index.tsx @@ -1,7 +1,6 @@ /* eslint-disable react/require-default-props */ import type { ComponentType, ReactElement, ForwardedRef } from 'react'; -// react import needed to support JSX outside functions -import React, { +import { useCallback, useEffect, useState, @@ -13,7 +12,6 @@ import React, { RefAttributes, cloneElement, } from 'react'; - import classNames from 'classnames'; import { Alert as BaseAlert, diff --git a/src/Badge/index.jsx b/src/Badge/index.jsx index 4898a04470..b6a395f160 100644 --- a/src/Badge/index.jsx +++ b/src/Badge/index.jsx @@ -1,5 +1,4 @@ -// React import needed to support JSX outside functions, if removed build-docs fails -import React, { forwardRef } from 'react'; +import { forwardRef } from 'react'; import PropTypes from 'prop-types'; import BaseBadge from 'react-bootstrap/Badge'; diff --git a/src/Breadcrumb/index.jsx b/src/Breadcrumb/index.jsx index 058af8c2fd..33968faeb1 100644 --- a/src/Breadcrumb/index.jsx +++ b/src/Breadcrumb/index.jsx @@ -14,30 +14,28 @@ function Breadcrumb({ const displayLinks = isMobile ? [links[linkCount - 1]] : links; return ( - ( - ); } diff --git a/src/Button/index.tsx b/src/Button/index.tsx index 25ce500eb8..745224e987 100644 --- a/src/Button/index.tsx +++ b/src/Button/index.tsx @@ -1,8 +1,7 @@ import type { ElementType, ComponentType, ReactNode, ForwardedRef, AriaRole, } from 'react'; -// React import needed to support JSX outside functions, if removed build-docs fails -import React, { forwardRef } from 'react'; +import { forwardRef } from 'react'; import classNames from 'classnames'; import BaseButton, { type ButtonProps as BaseButtonProps } from 'react-bootstrap/Button'; import BaseButtonGroup, { type ButtonGroupProps as BaseButtonGroupProps } from 'react-bootstrap/ButtonGroup'; diff --git a/src/asInput/index.jsx b/src/asInput/index.jsx index 37f88d5f1e..d30a798d65 100644 --- a/src/asInput/index.jsx +++ b/src/asInput/index.jsx @@ -135,7 +135,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