removing unnecessary react imports part 1

.github/workflows/ci.yml

@@ -26,7 +26,7 @@ jobs:
     - name: Check Types
       run: npm run type-check
     - name: Lint
-      run: npm run lint
+      run: make lint
     - name: Test
       run: npm run test
     - name: Verify icon changes
@@ -42,7 +42,7 @@ jobs:
     - name: Build
       run: npm run build
     - name: Build Docs
-      run: npm run build-docs
+      run: make build-docs
     - name: Coverage
       uses: codecov/codecov-action@v4
       with:

Makefile

@@ -32,6 +32,26 @@ test.npm.%: validate-no-uncommitted-package-lock-changes
 requirements:  ## install ci requirements
 	npm ci
 
+# npm swallows errors
+# see https://github.com/openedx/paragon/issues/3329
+# 
+# Instead of having this directly in the build-docs script
+# in the top-level package.json, put it here so we can have
+# a single source of truth and get proper error codes in CI
+.PHONY: build-docs
+build-docs:
+	npm run build --workspace=www
+
+# npm swallows errors
+# see https://github.com/openedx/paragon/issues/3329
+# 
+# Instead of having this directly in the lint script
+# in the top-level package.json, put it here so we can have
+# a single source of truth and get proper error codes in CI
+.PHONY: lint
+lint:
+	npm run stylelint && npm run eslint && npm run lint --workspaces --if-present
+
 i18n.extract:
 	# Pulling display strings from .jsx files into .json files...
 	npm run-script i18n_extract

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"
       ]
     }

package.json

@@ -27,11 +27,12 @@
   "sideEffects": false,
   "scripts": {
     "build": "make build",
-    "build-docs": "npm run build --workspace=www",
+    "build-docs": "make build-docs",
     "commit": "commit",
     "debug-test": "node --inspect-brk node_modules/.bin/jest --runInBand --coverage",
     "stylelint": "stylelint \"src/**/*.scss\" \"scss/**/*.scss\" \"www/src/**/*.scss\" --config .stylelintrc.json",
-    "lint": "npm run stylelint && eslint --ext .js --ext .jsx --ext .ts --ext .tsx --ext .json . && npm run lint --workspaces --if-present",
+    "eslint": "eslint --ext .js --ext .jsx --ext .ts --ext .tsx --ext .json .",
+    "lint": "make lint",
     "lint:fix": "npm run stylelint && eslint --fix --ext .js --ext .jsx --ext .ts --ext .tsx --ext .json . && npm run lint --workspaces --if-present",
     "prepublishOnly": "npm run build",
     "semantic-release": "semantic-release",

src/ActionRow/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { createElement } from 'react';
 import classNames from 'classnames';
 
 interface ActionRowProps extends React.HTMLAttributes<HTMLElement> {
@@ -18,7 +18,7 @@ function ActionRow({
   children,
   ...props
 }: ActionRowProps) {
-  return React.createElement(
+  return createElement(
     as,
     {
       ...props,

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 (
     <IntlProvider locale="en" messages={{}}>
       <Alert {...props}>

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,15 +49,15 @@ export interface AlertProps extends BaseProps {
   transition?: boolean | TransitionComponent;
   children?: ReactNode;
   /** Icon that will be shown in the alert */
-  icon?: React.ComponentType<IconProps>;
+  icon?: ComponentType<IconProps>;
   /** Whether the alert is shown. */
   show?: boolean;
   /** Whether the alert is dismissible. Defaults to false. */
   dismissible?: boolean;
   /** 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<HTMLDivElement>) => {
+}: AlertProps, ref: ForwardedRef<HTMLDivElement>) => {
   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);
     },

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 '.';

src/Annotation/index.tsx

@@ -1,4 +1,4 @@
-import React, { ForwardedRef } from 'react';
+import { forwardRef, ForwardedRef } from 'react';
 import classNames from 'classnames';
 
 interface AnnotationProps extends React.HTMLAttributes<HTMLSpanElement> {
@@ -12,7 +12,7 @@ interface AnnotationProps extends React.HTMLAttributes<HTMLSpanElement> {
   arrowPlacement?: 'top' | 'right' | 'bottom' | 'left';
 }
 
-const Annotation = React.forwardRef(({
+const Annotation = forwardRef(({
   className,
   variant = 'success',
   children,

src/Avatar/Avatar.test.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import renderer from 'react-test-renderer';
 import Avatar from './index';
 

src/Avatar/index.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
+import { ImgHTMLAttributes } from 'react';
 import classNames from 'classnames';
 // @ts-ignore
 import defaultAvatar from './default-avatar.svg';
 
-export interface AvatarProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+export interface AvatarProps extends ImgHTMLAttributes<HTMLImageElement> {
   /** Alt text. Usually the user's name */
   alt?: string;
   /** Size of the avatar */

src/AvatarButton/AvatarButton.test.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import renderer from 'react-test-renderer';
 import AvatarButton from '.';
 

src/AvatarButton/index.tsx

@@ -1,4 +1,4 @@
-import React, { ForwardedRef } from 'react';
+import { forwardRef, ButtonHTMLAttributes, ForwardedRef } from 'react';
 import classNames from 'classnames';
 import Button from '../Button';
 import Avatar, { AvatarProps } from '../Avatar';
@@ -9,7 +9,7 @@ const buttonSizesToAvatarSize = {
   lg: 'md',
 };
 
-interface AvatarButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+interface AvatarButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   /** The button text */
   children?: string;
   /** A class name to append to the button */
@@ -24,7 +24,7 @@ interface AvatarButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement
   variant?: string;
 }
 
-const AvatarButton = React.forwardRef(({
+const AvatarButton = forwardRef(({
   children,
   className,
   showLabel = true,

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) => <BaseBadge {...props} ref={ref} />);
+const Badge = forwardRef((props, ref) => <BaseBadge {...props} ref={ref} />);
 
 const STYLE_VARIANTS = [
   'primary',

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';
 

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,

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 (
-    <nav
-      aria-label={ariaLabel}
-      className={classNames('pgn__breadcrumb', `pgn__breadcrumb-${variant}`)}
-      {...props}
-    >
-      <ol className={classNames('list-inline', { 'is-mobile': isMobile })}>
-        {displayLinks.map((link, i) => (
-          <React.Fragment key={link.label}>
-            <li className={classNames('list-inline-item')}>
-              <BreadcrumbLink as={linkAs} clickHandler={clickHandler} linkProps={link} />
-            </li>
-            {(activeLabel || ((i + 1) < linkCount))
+    (
+      <nav
+        aria-label={ariaLabel}
+        className={classNames('pgn__breadcrumb', `pgn__breadcrumb-${variant}`)}
+        {...props}
+      >
+        <ol className={classNames('list-inline', { 'is-mobile': isMobile })}>
+          {displayLinks.map((link, i) => (
+            <Fragment key={link.label}>
+              <li className={classNames('list-inline-item')}>
+                <BreadcrumbLink as={linkAs} clickHandler={clickHandler} linkProps={link} />
+              </li>
+              {(activeLabel || ((i + 1) < linkCount))
               && (
               <li className="list-inline-item" role="presentation">
                 {spacer || <Icon src={ChevronRight} id={`spacer-${i}`} />}
               </li>
               )}
-          </React.Fragment>
-        ))}
-        {!isMobile && activeLabel && <li className="list-inline-item active" key="active" aria-current="page">{activeLabel}</li>}
-      </ol>
-    </nav>
+            </Fragment>
+          ))}
+          {!isMobile && activeLabel && <li className="list-inline-item active" key="active" aria-current="page">{activeLabel}</li>}
+        </ol>
+      </nav>
+    )
   );
 }
 

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 '.';

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<HTMLDivElement>) => (
+}: BubbleProps, ref: ForwardedRef<HTMLDivElement>) => (
   <div
     ref={ref}
     className={classNames(

src/Button/Button.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { IntlProvider } from 'react-intl';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';

src/Button/ButtonGroup.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import renderer from 'react-test-renderer';
 
 import Button, { ButtonGroup } from './index';

src/Button/ButtonToolbar.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import renderer from 'react-test-renderer';
 
 import { ButtonToolbar } from './index';