Skip to content

Commit 4eb94a4

Browse files
jacobo-dominguez-wgujacobo-dominguez-wgu
committed
chore: react imports cleanup 3
1 parent 7427044 commit 4eb94a4

17 files changed

+96
-87
lines changed

‎babel.config.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
{
22
"presets": [
33
["@babel/preset-env", { "modules": false } ],
4-
["@babel/preset-react", { "useSpread": true } ],
4+
["@babel/preset-react", { "useSpread": true, "runtime": "automatic" } ],
55
"@babel/preset-typescript"
66
],
77
"env": {
88
"test": {
99
"presets": [
1010
["@babel/preset-env", {}],
11-
["@babel/preset-react", { "useSpread": true } ],
11+
["@babel/preset-react", { "useSpread": true, "runtime": "automatic" } ],
1212
"@babel/preset-typescript"
1313
]
1414
}

‎src/Carousel/index.jsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import React from 'react';
1+
// React import needed to support JSX outside functions, if removed build-docs will fail
2+
import React, { forwardRef } from 'react';
23
import PropTypes from 'prop-types';
34
import BaseCarousel from 'react-bootstrap/Carousel';
45
import BaseCarouselItem from 'react-bootstrap/CarouselItem';
@@ -7,11 +8,11 @@ import BaseCarouselCaption from 'react-bootstrap/CarouselCaption';
78
export const CAROUSEL_NEXT_LABEL_TEXT = 'Next';
89
export const CAROUSEL_PREV_LABEL_TEXT = 'Previous';
910

10-
const Carousel = React.forwardRef((props, ref) => <BaseCarousel {...props} ref={ref} />);
11+
const Carousel = forwardRef((props, ref) => <BaseCarousel {...props} ref={ref} />);
1112

12-
const CarouselItem = React.forwardRef((props, ref) => <BaseCarouselItem {...props} ref={ref} />);
13+
const CarouselItem = forwardRef((props, ref) => <BaseCarouselItem {...props} ref={ref} />);
1314

14-
const CarouselCaption = React.forwardRef((props, ref) => <BaseCarouselCaption {...props} ref={ref} />);
15+
const CarouselCaption = forwardRef((props, ref) => <BaseCarouselCaption {...props} ref={ref} />);
1516

1617
Carousel.propTypes = {
1718
/** Specifies element type for this component. */

‎src/Chip/Chip.test.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react';
1+
import type { ComponentProps } from 'react';
22
import renderer from 'react-test-renderer';
33
import { render, screen } from '@testing-library/react';
44
import userEvent from '@testing-library/user-event';
@@ -7,7 +7,7 @@ import { Close } from '../../icons';
77
import { STYLE_VARIANTS } from './constants';
88
import Chip from '.';
99

10-
function TestChip(props: Omit<React.ComponentProps<typeof Chip>, 'children'>) {
10+
function TestChip(props: Omit<ComponentProps<typeof Chip>, 'children'>) {
1111
return (
1212
<Chip {...props}>
1313
Test

‎src/Chip/ChipIcon.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
1-
import React, { KeyboardEventHandler, MouseEventHandler } from 'react';
1+
import type { ComponentType } from 'react';
2+
import { KeyboardEventHandler, MouseEventHandler } from 'react';
23
import PropTypes from 'prop-types';
34
import Icon from '../Icon';
45
import IconButton from '../IconButton';
56
import { STYLE_VARIANTS } from './constants';
67

78
export type ChipIconProps = {
89
className: string,
9-
src: React.ComponentType,
10+
src: ComponentType,
1011
variant: typeof STYLE_VARIANTS[keyof typeof STYLE_VARIANTS],
1112
disabled?: boolean,
1213
} & (

‎src/Chip/index.tsx‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
1-
import React, { ForwardedRef, KeyboardEventHandler, MouseEventHandler } from 'react';
1+
import type { ReactNode, ComponentType } from 'react';
2+
import {
3+
forwardRef, ForwardedRef, KeyboardEventHandler, MouseEventHandler,
4+
} from 'react';
25
import classNames from 'classnames';
36
import ChipIcon from './ChipIcon';
47
import { STYLE_VARIANTS } from './constants';
@@ -7,7 +10,7 @@ export const CHIP_PGN_CLASS = 'pgn__chip';
710

811
export interface IChip {
912
/** Specifies the content of the `Chip`. */
10-
children: React.ReactNode,
13+
children: ReactNode,
1114
/** Click handler for the whole `Chip`, has effect only when Chip does not have any interactive icons. */
1215
onClick?: KeyboardEventHandler & MouseEventHandler,
1316
/** Specifies an additional `className` to add to the base element. */
@@ -20,7 +23,7 @@ export interface IChip {
2023
*
2124
* `import { Check } from '@openedx/paragon/icons';`
2225
*/
23-
iconBefore?: React.ComponentType,
26+
iconBefore?: ComponentType,
2427
/** Specifies icon alt text. */
2528
iconBeforeAlt?: string,
2629
/**
@@ -29,7 +32,7 @@ export interface IChip {
2932
*
3033
* `import { Check } from '@openedx/paragon/icons';`
3134
*/
32-
iconAfter?: React.ComponentType,
35+
iconAfter?: ComponentType,
3336
/** Specifies icon alt text. */
3437
iconAfterAlt?: string,
3538
/** A click handler for the `Chip` icon before. */
@@ -42,7 +45,7 @@ export interface IChip {
4245
isSelected?: boolean,
4346
}
4447

45-
const Chip = React.forwardRef(({
48+
const Chip = forwardRef(({
4649
children,
4750
className,
4851
variant = 'light',

‎src/ChipCarousel/ChipCarousel.test.jsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
/* eslint-disable jsx-a11y/click-events-have-key-events */
22
/* eslint-disable jsx-a11y/no-static-element-interactions */
3-
import React from 'react';
43
import { render, screen } from '@testing-library/react';
54
import userEvent from '@testing-library/user-event';
65
import { IntlProvider } from 'react-intl';

‎src/ChipCarousel/index.tsx‎

Lines changed: 50 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import React, { ForwardedRef } from 'react';
1+
import type { ReactElement } from 'react';
2+
import { forwardRef, createElement, ForwardedRef } from 'react';
23
import PropTypes from 'prop-types';
34
import { useIntl } from 'react-intl';
45
import classNames from 'classnames';
@@ -22,7 +23,7 @@ export interface OverflowScrollContextProps {
2223

2324
export interface ChipCarouselProps {
2425
className?: string;
25-
items: Array<React.ReactElement>;
26+
items: Array<ReactElement>;
2627
ariaLabel: string;
2728
disableOpacityMasks?: boolean;
2829
onScrollPrevious?: () => void;
@@ -33,7 +34,7 @@ export interface ChipCarouselProps {
3334
gap?: number;
3435
}
3536

36-
const ChipCarousel = React.forwardRef(({
37+
const ChipCarousel = forwardRef(({
3738
className,
3839
items,
3940
ariaLabel,
@@ -49,32 +50,33 @@ const ChipCarousel = React.forwardRef(({
4950
const intl = useIntl();
5051

5152
return (
52-
<div
53-
className={classNames('pgn__chip-carousel', className, gap ? `pgn__chip-carousel-gap__${gap}` : '')}
54-
{...props}
55-
ref={ref}
56-
>
57-
<OverflowScroll
58-
ariaLabel={ariaLabel}
59-
hasInteractiveChildren
60-
disableScroll={!canScrollHorizontal}
61-
disableOpacityMasks={disableOpacityMasks}
62-
onScrollPrevious={onScrollPrevious}
63-
onScrollNext={onScrollNext}
64-
offset={offset}
65-
offsetType={offsetType}
53+
(
54+
<div
55+
className={classNames('pgn__chip-carousel', className, gap ? `pgn__chip-carousel-gap__${gap}` : '')}
56+
{...props}
57+
ref={ref}
6658
>
67-
<OverflowScrollContext.Consumer>
68-
{({
69-
setOverflowRef,
70-
isScrolledToStart,
71-
isScrolledToEnd,
72-
scrollToPrevious,
73-
scrollToNext,
74-
}: OverflowScrollContextProps) => (
75-
<>
59+
<OverflowScroll
60+
ariaLabel={ariaLabel}
61+
hasInteractiveChildren
62+
disableScroll={!canScrollHorizontal}
63+
disableOpacityMasks={disableOpacityMasks}
64+
onScrollPrevious={onScrollPrevious}
65+
onScrollNext={onScrollNext}
66+
offset={offset}
67+
offsetType={offsetType}
68+
>
69+
<OverflowScrollContext.Consumer>
70+
{({
71+
setOverflowRef,
72+
isScrolledToStart,
73+
isScrolledToEnd,
74+
scrollToPrevious,
75+
scrollToNext,
76+
}: OverflowScrollContextProps) => (
7677
<>
77-
{!isScrolledToStart && (
78+
<>
79+
{!isScrolledToStart && (
7880
<IconButton
7981
size="sm"
8082
className="pgn__chip-carousel__left-control"
@@ -83,8 +85,8 @@ const ChipCarousel = React.forwardRef(({
8385
alt={intl.formatMessage(messages.scrollToPrevious)}
8486
onClick={scrollToPrevious}
8587
/>
86-
)}
87-
{!isScrolledToEnd && (
88+
)}
89+
{!isScrolledToEnd && (
8890
<IconButton
8991
size="sm"
9092
className="pgn__chip-carousel__right-control"
@@ -93,25 +95,26 @@ const ChipCarousel = React.forwardRef(({
9395
alt={intl.formatMessage(messages.scrollToNext)}
9496
onClick={scrollToNext}
9597
/>
96-
)}
98+
)}
99+
</>
100+
<div ref={setOverflowRef} className="d-flex">
101+
<OverflowScroll.Items>
102+
{items?.map((item, id) => {
103+
const { children } = item?.props || {};
104+
if (!children) {
105+
return null;
106+
}
107+
// eslint-disable-next-line react/no-array-index-key
108+
return createElement(Chip, { ...item.props, key: id });
109+
})}
110+
</OverflowScroll.Items>
111+
</div>
97112
</>
98-
<div ref={setOverflowRef} className="d-flex">
99-
<OverflowScroll.Items>
100-
{items?.map((item, id) => {
101-
const { children } = item?.props || {};
102-
if (!children) {
103-
return null;
104-
}
105-
// eslint-disable-next-line react/no-array-index-key
106-
return React.createElement(Chip, { ...item.props, key: id });
107-
})}
108-
</OverflowScroll.Items>
109-
</div>
110-
</>
111-
)}
112-
</OverflowScrollContext.Consumer>
113-
</OverflowScroll>
114-
</div>
113+
)}
114+
</OverflowScrollContext.Consumer>
115+
</OverflowScroll>
116+
</div>
117+
)
115118
);
116119
});
117120

‎src/Collapsible/Collapsible.test.jsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react';
1+
import { createRef } from 'react';
22
import { render, screen, waitFor } from '@testing-library/react';
33
import renderer from 'react-test-renderer';
44
import userEvent from '@testing-library/user-event';
@@ -69,7 +69,7 @@ describe('<Collapsible />', () => {
6969
});
7070

7171
describe('Imperative Methods', () => {
72-
const ref = React.createRef();
72+
const ref = createRef();
7373
beforeEach(() => {
7474
render(
7575
<Collapsible.Advanced ref={ref}>{collapsibleContent}</Collapsible.Advanced>,
@@ -117,7 +117,7 @@ describe('<Collapsible />', () => {
117117

118118
describe('Mouse Interactions', () => {
119119
let collapsible;
120-
const ref = React.createRef();
120+
const ref = createRef();
121121
beforeEach(() => {
122122
render(
123123
<Collapsible.Advanced ref={ref}>{collapsibleContent}</Collapsible.Advanced>,
@@ -167,7 +167,7 @@ describe('<Collapsible />', () => {
167167

168168
describe('Keyboard Interactions', () => {
169169
let collapsible;
170-
const ref = React.createRef();
170+
const ref = createRef();
171171
beforeEach(() => {
172172
render(
173173
<Collapsible.Advanced ref={ref}>{collapsibleContent}</Collapsible.Advanced>,

‎src/Collapsible/CollapsibleAdvanced.jsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1-
import React from 'react';
1+
// React import needed to support JSX outside functions, if removed build-docs will fail
2+
import React, { createContext, Component } from 'react';
23
import classNames from 'classnames';
34
import PropTypes from 'prop-types';
45

5-
export const CollapsibleContext = React.createContext();
6+
export const CollapsibleContext = createContext();
67

7-
class CollapsibleAdvanced extends React.Component {
8+
class CollapsibleAdvanced extends Component {
89
static getDerivedStateFromProps(props) {
910
if (props.open !== undefined) {
1011
return {

‎src/Collapsible/CollapsibleBody.jsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import React, { useContext } from 'react';
1+
// React import needed to support JSX outside functions, if removed build-docs will fail
2+
import React, { createElement, cloneElement, useContext } from 'react';
23
import PropTypes from 'prop-types';
34

45
import Collapse from '../Collapse';
@@ -13,11 +14,11 @@ function CollapsibleBody({
1314
// Keys are added to these elements so that TransitionReplace
1415
// will recognize them as unique components and perform the
1516
// transition properly.
16-
const content = React.createElement(tag, { key: 'body', ...props }, children);
17+
const content = createElement(tag, { key: 'body', ...props }, children);
1718
const transitionBody = isOpen ? content : <div key="empty" />;
1819

1920
if (transitionWrapper) {
20-
return React.cloneElement(transitionWrapper, {}, transitionBody);
21+
return cloneElement(transitionWrapper, {}, transitionBody);
2122
}
2223
/* istanbul ignore next */
2324
return unmountOnExit

0 commit comments

Comments
 (0)