From f7791f81059b3268cae5d82895512c828c4b0770 Mon Sep 17 00:00:00 2001 From: jacobo-dominguez-wgu Date: Tue, 23 Sep 2025 11:32:03 -0600 Subject: [PATCH 1/2] chore: removing unnecessary react imports part 10 --- babel.config.json | 4 +-- src/Spinner/Spinner.test.tsx | 1 - src/Spinner/index.tsx | 9 +++--- src/Stack/Stack.test.jsx | 1 - src/Stack/index.jsx | 2 +- .../StatefulButtontest.test.jsx | 1 - src/StatefulButton/index.jsx | 1 - src/Stepper/Stepper.jsx | 1 - src/Stepper/StepperActionRow.jsx | 4 +-- src/Stepper/StepperContext.jsx | 6 ++-- src/Stepper/StepperHeader.jsx | 32 ++++++++++--------- src/Stepper/StepperHeaderStep.jsx | 2 +- src/Stepper/StepperStep.jsx | 2 +- src/Stepper/tests/Stepper.test.jsx | 1 - src/Sticky/Sticky.test.jsx | 1 - src/Sticky/index.jsx | 8 +++-- src/Tabs/Tab.jsx | 1 - src/Tabs/Tabs.test.jsx | 1 - src/Tabs/index.jsx | 11 ++++--- src/Toast/index.tsx | 5 +-- 20 files changed, 47 insertions(+), 47 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/Spinner/Spinner.test.tsx b/src/Spinner/Spinner.test.tsx index c5ab098bc5..4dc2b40c53 100644 --- a/src/Spinner/Spinner.test.tsx +++ b/src/Spinner/Spinner.test.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import renderer from 'react-test-renderer'; import Spinner from '.'; diff --git a/src/Spinner/index.tsx b/src/Spinner/index.tsx index 0f3638b57b..2e680de394 100644 --- a/src/Spinner/index.tsx +++ b/src/Spinner/index.tsx @@ -1,4 +1,5 @@ -import React from 'react'; +import type { ReactNode, ForwardedRef } from 'react'; +import { forwardRef } from 'react'; import classNames from 'classnames'; import BaseSpinner, { type SpinnerProps as BaseSpinnerProps } from 'react-bootstrap/Spinner'; @@ -6,15 +7,15 @@ interface SpinnerProps extends BaseSpinnerProps { /** Optionally specify additional CSS classes to give this spinner's `
`. */ className?: string; /** Specifies the screen reader content for a11y. */ - screenReaderText?: React.ReactNode; + screenReaderText?: ReactNode; } /** A spinning animation that indicates loading. */ -const Spinner = React.forwardRef(({ +const Spinner = forwardRef(({ className, screenReaderText, ...attrs -}: SpinnerProps, ref: React.ForwardedRef) => { +}: SpinnerProps, ref: ForwardedRef) => { const spinnerProps = { ...attrs, className: classNames('pgn__spinner', className), diff --git a/src/Stack/Stack.test.jsx b/src/Stack/Stack.test.jsx index 7937088da9..10c106413b 100644 --- a/src/Stack/Stack.test.jsx +++ b/src/Stack/Stack.test.jsx @@ -1,4 +1,3 @@ -import React from 'react'; import { render, screen } from '@testing-library/react'; import renderer from 'react-test-renderer'; diff --git a/src/Stack/index.jsx b/src/Stack/index.jsx index d7a531ba39..de705dfe7e 100644 --- a/src/Stack/index.jsx +++ b/src/Stack/index.jsx @@ -1,4 +1,4 @@ -import React, { forwardRef } from 'react'; +import { forwardRef } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; diff --git a/src/StatefulButton/StatefulButtontest.test.jsx b/src/StatefulButton/StatefulButtontest.test.jsx index c8e0dd8b77..95f85ea8ed 100644 --- a/src/StatefulButton/StatefulButtontest.test.jsx +++ b/src/StatefulButton/StatefulButtontest.test.jsx @@ -1,4 +1,3 @@ -import React from 'react'; import renderer from 'react-test-renderer'; import StatefulButton from './index'; diff --git a/src/StatefulButton/index.jsx b/src/StatefulButton/index.jsx index 5d7da83a4f..803adf422c 100644 --- a/src/StatefulButton/index.jsx +++ b/src/StatefulButton/index.jsx @@ -1,4 +1,3 @@ -import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; import { Cancel, CheckCircleOutline, SpinnerSimple } from '../../icons'; diff --git a/src/Stepper/Stepper.jsx b/src/Stepper/Stepper.jsx index 6e300b7097..e2a62a6988 100644 --- a/src/Stepper/Stepper.jsx +++ b/src/Stepper/Stepper.jsx @@ -1,4 +1,3 @@ -import React from 'react'; import PropTypes from 'prop-types'; import StepperStep from './StepperStep'; import StepperHeader from './StepperHeader'; diff --git a/src/Stepper/StepperActionRow.jsx b/src/Stepper/StepperActionRow.jsx index c65a318fc4..5425ae5438 100644 --- a/src/Stepper/StepperActionRow.jsx +++ b/src/Stepper/StepperActionRow.jsx @@ -1,4 +1,4 @@ -import React, { useContext } from 'react'; +import { createElement, useContext } from 'react'; import PropTypes from 'prop-types'; import { StepperContext } from './StepperContext'; import ActionRow from '../ActionRow'; @@ -16,7 +16,7 @@ function StepperActionRow({ return null; } - return React.createElement(as, props, children); + return createElement(as, props, children); } StepperActionRow.propTypes = { diff --git a/src/Stepper/StepperContext.jsx b/src/Stepper/StepperContext.jsx index d28a49799b..0d015295a7 100644 --- a/src/Stepper/StepperContext.jsx +++ b/src/Stepper/StepperContext.jsx @@ -1,9 +1,9 @@ -import React, { - useCallback, useEffect, useReducer, useState, +import { + createContext, useCallback, useEffect, useReducer, useState, } from 'react'; import PropTypes from 'prop-types'; -export const StepperContext = React.createContext({ +export const StepperContext = createContext({ activeKey: '', }); diff --git a/src/Stepper/StepperHeader.jsx b/src/Stepper/StepperHeader.jsx index 433e536b2a..f4586f908a 100644 --- a/src/Stepper/StepperHeader.jsx +++ b/src/Stepper/StepperHeader.jsx @@ -1,4 +1,4 @@ -import React, { useContext } from 'react'; +import { Fragment, useContext } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; import StepperHeaderStep from './StepperHeaderStep'; @@ -12,20 +12,22 @@ function StepListSeparator() { function StepList({ steps, activeKey }) { return ( -
    - {steps.map(({ label, ...stepProps }, index) => ( - - {index !== 0 && } - - {label} - - - ))} -
+ ( +
    + {steps.map(({ label, ...stepProps }, index) => ( + + {index !== 0 && } + + {label} + + + ))} +
+ ) ); } diff --git a/src/Stepper/StepperHeaderStep.jsx b/src/Stepper/StepperHeaderStep.jsx index b8b6b384a6..24a27dfbea 100644 --- a/src/Stepper/StepperHeaderStep.jsx +++ b/src/Stepper/StepperHeaderStep.jsx @@ -1,4 +1,4 @@ -import React, { useContext } from 'react'; +import { useContext } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; diff --git a/src/Stepper/StepperStep.jsx b/src/Stepper/StepperStep.jsx index e3f0064559..e7492f7a29 100644 --- a/src/Stepper/StepperStep.jsx +++ b/src/Stepper/StepperStep.jsx @@ -1,4 +1,4 @@ -import React, { useContext, useEffect } from 'react'; +import { useContext, useEffect } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; import { StepperContext } from './StepperContext'; diff --git a/src/Stepper/tests/Stepper.test.jsx b/src/Stepper/tests/Stepper.test.jsx index 103df484ab..f9a61b16a8 100644 --- a/src/Stepper/tests/Stepper.test.jsx +++ b/src/Stepper/tests/Stepper.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/Sticky/Sticky.test.jsx b/src/Sticky/Sticky.test.jsx index 95fcf35ed4..dbcf2b67b1 100644 --- a/src/Sticky/Sticky.test.jsx +++ b/src/Sticky/Sticky.test.jsx @@ -1,4 +1,3 @@ -import React from 'react'; import { render, screen } from '@testing-library/react'; import renderer from 'react-test-renderer'; diff --git a/src/Sticky/index.jsx b/src/Sticky/index.jsx index f282167b16..eadee95001 100644 --- a/src/Sticky/index.jsx +++ b/src/Sticky/index.jsx @@ -1,4 +1,6 @@ -import React, { useLayoutEffect, useState } from 'react'; +import { + forwardRef, useRef, useLayoutEffect, useState, +} from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; @@ -7,7 +9,7 @@ const POSITION_VARIANTS = [ 'bottom', ]; -const Sticky = React.forwardRef(({ +const Sticky = forwardRef(({ position, children, offset, @@ -15,7 +17,7 @@ const Sticky = React.forwardRef(({ ...rest }, ref) => { const [isSticky, setIsSticky] = useState(false); - const defaultRef = React.useRef(); + const defaultRef = useRef(); const resolvedRef = ref || defaultRef; // eslint-disable-next-line consistent-return diff --git a/src/Tabs/Tab.jsx b/src/Tabs/Tab.jsx index abc43183ca..b9bd8f9afa 100644 --- a/src/Tabs/Tab.jsx +++ b/src/Tabs/Tab.jsx @@ -1,4 +1,3 @@ -import React from 'react'; import PropTypes from 'prop-types'; import BaseTab from 'react-bootstrap/Tab'; diff --git a/src/Tabs/Tabs.test.jsx b/src/Tabs/Tabs.test.jsx index 2e829a5321..03955ab476 100644 --- a/src/Tabs/Tabs.test.jsx +++ b/src/Tabs/Tabs.test.jsx @@ -1,4 +1,3 @@ -import React from 'react'; import { render, waitFor, act } from '@testing-library/react'; import renderer from 'react-test-renderer'; import userEvent from '@testing-library/user-event'; diff --git a/src/Tabs/index.jsx b/src/Tabs/index.jsx index 98255f4dc4..25fb381e08 100644 --- a/src/Tabs/index.jsx +++ b/src/Tabs/index.jsx @@ -1,4 +1,7 @@ -import React, { +import { + Children, + isValidElement, + cloneElement, useEffect, useMemo, useRef, @@ -81,14 +84,14 @@ function Tabs({ handleDropdownTabClick(eventKey); } }; - const childrenList = React.Children.map(children, (child, index) => { + const childrenList = Children.map(children, (child, index) => { if (child?.type?.name !== 'Tab' && process.env.NODE_ENV === 'development') { // eslint-disable-next-line no-console console.error( `Tabs children can only be of type Tab. ${children[index]} was passed instead.`, ); } - if (!React.isValidElement(child)) { + if (!isValidElement(child)) { return child; } const { @@ -114,7 +117,7 @@ function Tabs({ newTitle = title; } const tabClass = index > indexOfLastVisibleChild ? 'pgn__tab_invisible' : ''; - const modifiedTab = React.cloneElement(child, { + const modifiedTab = cloneElement(child, { ...rest, title: newTitle, tabClassName: classNames(tabClass, tabClassName), diff --git a/src/Toast/index.tsx b/src/Toast/index.tsx index 3780f2d0fd..e36d6a6447 100644 --- a/src/Toast/index.tsx +++ b/src/Toast/index.tsx @@ -1,4 +1,5 @@ -import React, { useState } from 'react'; +import type { MouseEvent } from 'react'; +import { useState } from 'react'; import classNames from 'classnames'; import PropTypes from 'prop-types'; import BaseToast from 'react-bootstrap/Toast'; @@ -16,7 +17,7 @@ export const TOAST_DELAY = 5000; interface ToastAction { label: string; href?: string; - onClick?: (event: React.MouseEvent) => void; + onClick?: (event: MouseEvent) => void; } interface ToastProps { From 15e487440ed72d20d89d37d3b1d07274973f36b8 Mon Sep 17 00:00:00 2001 From: jacobo-dominguez-wgu Date: Mon, 6 Oct 2025 12:02:15 -0600 Subject: [PATCH 2/2] fix: restoring react imports needed for build docs process on few components --- src/Stack/index.jsx | 3 ++- src/StatefulButton/index.jsx | 2 ++ src/Sticky/index.jsx | 3 ++- src/Tabs/index.jsx | 3 ++- src/Toast/index.tsx | 3 ++- 5 files changed, 10 insertions(+), 4 deletions(-) diff --git a/src/Stack/index.jsx b/src/Stack/index.jsx index de705dfe7e..fbb582c33c 100644 --- a/src/Stack/index.jsx +++ b/src/Stack/index.jsx @@ -1,4 +1,5 @@ -import { forwardRef } from 'react'; +// React import needed to support build-docs, if removed the build-docs will break +import React, { forwardRef } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; diff --git a/src/StatefulButton/index.jsx b/src/StatefulButton/index.jsx index 803adf422c..43ae36ba77 100644 --- a/src/StatefulButton/index.jsx +++ b/src/StatefulButton/index.jsx @@ -1,3 +1,5 @@ +// React import needed to support build-docs, if removed the build-docs will break +import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; import { Cancel, CheckCircleOutline, SpinnerSimple } from '../../icons'; diff --git a/src/Sticky/index.jsx b/src/Sticky/index.jsx index eadee95001..de9f552e10 100644 --- a/src/Sticky/index.jsx +++ b/src/Sticky/index.jsx @@ -1,4 +1,5 @@ -import { +// React import needed to support build-docs, if removed the build-docs will break +import React, { forwardRef, useRef, useLayoutEffect, useState, } from 'react'; import PropTypes from 'prop-types'; diff --git a/src/Tabs/index.jsx b/src/Tabs/index.jsx index 25fb381e08..9c3ab2684e 100644 --- a/src/Tabs/index.jsx +++ b/src/Tabs/index.jsx @@ -1,4 +1,5 @@ -import { +// React import needed to support build-docs, if removed the build-docs will break +import React, { Children, isValidElement, cloneElement, diff --git a/src/Toast/index.tsx b/src/Toast/index.tsx index 7e827deeaa..b30dade37c 100644 --- a/src/Toast/index.tsx +++ b/src/Toast/index.tsx @@ -1,5 +1,6 @@ import type { MouseEvent } from 'react'; -import { useState } from 'react'; +// React import needed to support build-docs, if removed the build-docs will break +import React, { useState } from 'react'; import classNames from 'classnames'; import BaseToast from 'react-bootstrap/Toast'; import { useIntl } from 'react-intl';