fix: restoring react imports needed for buid docs process

Author: jacobo-dominguez-wgu

src/Dropdown/index.jsx

@@ -1,4 +1,5 @@
-import { forwardRef, useState } from 'react';
+// React import needed to support build-docs, if removed the build-docs will break
+import React, { forwardRef, useState } from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import BaseDropdown from 'react-bootstrap/Dropdown';

src/Form/FormCheckbox.jsx

@@ -1,4 +1,5 @@
-import {
+// React import needed to support build-docs, if removed the build-docs will break
+import React, {
   forwardRef, useRef, useEffect, createElement,
 } from 'react';
 import PropTypes from 'prop-types';

src/Form/FormControl.jsx

@@ -1,4 +1,5 @@
-import {
+// React import needed to support build-docs, if removed the build-docs will break
+import React, {
   forwardRef, useRef, useCallback, useEffect,
 } from 'react';
 import PropTypes from 'prop-types';

src/Form/FormControlDecoratorGroup.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 { useFormGroupContext } from './FormGroupContext';

src/Form/FormGroup.tsx

@@ -1,5 +1,6 @@
 import type { ElementType, ReactNode, ComponentPropsWithoutRef } from 'react';
-import { createElement } from 'react';
+// React import needed to support build-docs, if removed the build-docs will break
+import React, { createElement } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { FormGroupContextProvider } from './FormGroupContext';

src/Form/FormGroupContext.tsx

@@ -1,5 +1,6 @@
 import type { ComponentPropsWithoutRef, ReactNode } from 'react';
-import {
+// React import needed to support build-docs, if removed the build-docs will break
+import React, {
   createContext, useContext, useState, useEffect, useMemo, useCallback,
 } from 'react';
 import classNames from 'classnames';

src/Form/FormRadio.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';
 import { useRadioSetContext } from './FormRadioSetContext';

src/Form/FormRadioSet.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 { useFormGroupContext } from './FormGroupContext';
 import { FormRadioSetContextProvider } from './FormRadioSetContext';

src/Form/FormRadioSetContext.jsx

@@ -1,4 +1,5 @@
-import { createContext, useContext } from 'react';
+// React import needed to support build-docs, if removed the build-docs will break
+import React, { createContext, useContext } from 'react';
 import PropTypes from 'prop-types';
 import { callAllHandlers } from './fieldUtils';
 

src/Form/tests/FormControl.test.jsx

@@ -10,6 +10,14 @@ const ref = {
 
 let unmaskedInputValue;
 
+jest.mock('react', () => {
+  const actualReact = jest.requireActual('react');
+  return {
+    ...actualReact,
+    useRef: jest.fn(() => ref),
+  };
+});
+
 // eslint-disable-next-line react/prop-types
 function Component({ isClearValue }) {
   const [inputValue, setInputValue] = useState('');
@@ -30,7 +38,7 @@ function Component({ isClearValue }) {
 describe('FormControl', () => {
   it('textarea changes its height with autoResize prop', async () => {
     const user = userEvent.setup();
-    const useReferenceSpy = jest.spyOn(React, 'useRef').mockReturnValue(ref);
+    const useReferenceSpy = React.useRef;
     const onChangeFunc = jest.fn();
     const inputText = 'new text';
     render(