Merge pull request #4967 from matuzalemsteles/issue-4655

refactor: Remove typing usage from components with `React.FunctionComponent`
liferay · Jul 5, 2022 · a6e08b9 · a6e08b9
2 parents e8eac1a + 057410c
commit a6e08b9
Show file tree

Hide file tree

Showing 125 changed files with 865 additions and 820 deletions.
diff --git a/jest.config.js b/jest.config.js
@@ -76,7 +76,7 @@ module.exports = {
 		'./packages/clay-drop-down/src/': {
 			branches: 70,
 			functions: 57,
-			lines: 81,
+			lines: 80,
 			statements: 78,
 		},
 		'./packages/clay-empty-state/src/': {
@@ -88,7 +88,7 @@ module.exports = {
 		'./packages/clay-form/src/': {
 			branches: 62,
 			functions: 70,
-			lines: 86,
+			lines: 85,
 			statements: 85,
 		},
 		'./packages/clay-icon/src/': {
@@ -148,8 +148,8 @@ module.exports = {
 		'./packages/clay-nav/src/': {
 			branches: 92,
 			functions: 80,
-			lines: 94,
-			statements: 94,
+			lines: 93,
+			statements: 93,
 		},
 		'./packages/clay-navigation-bar/src/': {
 			branches: 50,
@@ -215,7 +215,7 @@ module.exports = {
 			branches: 84,
 			functions: 66,
 			lines: 94,
-			statements: 91,
+			statements: 90,
 		},
 		'./packages/clay-time-picker/src/': {
 			branches: 85,

diff --git a/packages/clay-alert/src/Footer.tsx b/packages/clay-alert/src/Footer.tsx
@@ -6,9 +6,11 @@
 import classNames from 'classnames';
 import React from 'react';
 
-const ClayAlertFooter: React.FunctionComponent<
-	React.HTMLAttributes<HTMLDivElement>
-> = ({children, className, ...otherProps}) => {
+const ClayAlertFooter = ({
+	children,
+	className,
+	...otherProps
+}: React.HTMLAttributes<HTMLDivElement>) => {
 	return (
 		<div className={classNames(className, 'alert-footer')} {...otherProps}>
 			{children}

diff --git a/packages/clay-alert/src/index.tsx b/packages/clay-alert/src/index.tsx
@@ -111,10 +111,12 @@ const ICON_MAP = {
 
 const VARIANTS = ['inline', 'feedback'];
 
-const ClayAlert: React.FunctionComponent<IClayAlertProps> & {
+function ClayAlert(props: IClayAlertProps): JSX.Element & {
 	Footer: typeof Footer;
 	ToastContainer: typeof ToastContainer;
-} = ({
+};
+
+function ClayAlert({
 	actions,
 	autoClose,
 	children,
@@ -126,13 +128,13 @@ const ClayAlert: React.FunctionComponent<IClayAlertProps> & {
 	title,
 	variant,
 	...otherProps
-}: IClayAlertProps) => {
+}: IClayAlertProps) {
 	const {pauseAutoCloseTimer, startAutoCloseTimer} = useAutoClose(
 		autoClose,
 		onClose
 	);
 
-	const ConditionalContainer: React.FunctionComponent<{}> = ({children}) =>
+	const ConditionalContainer = ({children}: any) =>
 		variant === 'stripe' ? (
 			<div className="container">{children}</div>
 		) : (
@@ -209,7 +211,7 @@ const ClayAlert: React.FunctionComponent<IClayAlertProps> & {
 			</ConditionalContainer>
 		</div>
 	);
-};
+}
 
 ClayAlert.Footer = Footer;
 ClayAlert.ToastContainer = ToastContainer;

diff --git a/packages/clay-autocomplete/src/DropDown.tsx b/packages/clay-autocomplete/src/DropDown.tsx
@@ -37,7 +37,7 @@ export interface IProps extends React.HTMLAttributes<HTMLDivElement> {
 	onSetActive?: (val: boolean) => void;
 }
 
-const ClayAutocompleteDropDown: React.FunctionComponent<IProps> = ({
+const ClayAutocompleteDropDown = ({
 	active = false,
 	alignElementRef,
 	alignmentByViewport,

diff --git a/packages/clay-autocomplete/src/LoadingIndicator.tsx b/packages/clay-autocomplete/src/LoadingIndicator.tsx
@@ -9,9 +9,10 @@ import React from 'react';
 
 import Context from './Context';
 
-const LoadingIndicatorMarkup: React.FunctionComponent<
-	React.HTMLAttributes<HTMLDivElement>
-> = ({children, ...otherProps}) => (
+const LoadingIndicatorMarkup = ({
+	children,
+	...otherProps
+}: React.HTMLAttributes<HTMLDivElement>) => (
 	<ClayInput.GroupInsetItem {...otherProps} after>
 		<span className="inline-item inline-item-middle">{children}</span>
 	</ClayInput.GroupInsetItem>
@@ -24,7 +25,7 @@ export interface IProps extends React.HTMLAttributes<HTMLDivElement> {
 	component?: React.ComponentType<any>;
 }
 
-const ClayAutocompleteLoadingIndicator: React.FunctionComponent<IProps> = ({
+const ClayAutocompleteLoadingIndicator = ({
 	className,
 	component: Component = LoadingIndicatorMarkup,
 	...otherProps

diff --git a/packages/clay-autocomplete/src/__tests__/index.tsx b/packages/clay-autocomplete/src/__tests__/index.tsx
@@ -64,9 +64,9 @@ describe('ClayAutocomplete', () => {
 	});
 
 	it('renders LoadingIndicator with other markup component', () => {
-		const MyMarkup: React.FunctionComponent<
-			React.HTMLAttributes<HTMLSpanElement>
-		> = ({children}) => (
+		const MyMarkup = ({
+			children,
+		}: React.HTMLAttributes<HTMLSpanElement>) => (
 			<span className="autofit-col">
 				<span className="inline-item">{children}</span>
 			</span>

diff --git a/packages/clay-breadcrumb/src/Ellipsis.tsx b/packages/clay-breadcrumb/src/Ellipsis.tsx
@@ -22,11 +22,7 @@ interface IEllipsisProps extends React.HTMLAttributes<HTMLLIElement> {
 	spritemap?: string;
 }
 
-const Ellipsis: React.FunctionComponent<IEllipsisProps> = ({
-	items,
-	spritemap,
-	...otherProps
-}) => (
+const Ellipsis = ({items, spritemap, ...otherProps}: IEllipsisProps) => (
 	<ClayDropDown
 		className="breadcrumb-item"
 		containerElement="li"

diff --git a/packages/clay-breadcrumb/src/index.tsx b/packages/clay-breadcrumb/src/index.tsx
@@ -43,7 +43,7 @@ const findActiveItems = (items: TItems) => {
 	});
 };
 
-const ClayBreadcrumb: React.FunctionComponent<IProps> = ({
+const ClayBreadcrumb = ({
 	className,
 	ellipsisBuffer = 1,
 	ellipsisProps = {},

diff --git a/packages/clay-button/src/Group.tsx b/packages/clay-button/src/Group.tsx
@@ -19,7 +19,7 @@ export interface IButtonGroupProps
 	vertical?: boolean;
 }
 
-const ClayButtonGroup: React.FunctionComponent<IButtonGroupProps> = ({
+const ClayButtonGroup = ({
 	children,
 	className,
 	role = 'group',

diff --git a/packages/clay-card/src/AspectRatio.tsx b/packages/clay-card/src/AspectRatio.tsx
@@ -10,19 +10,28 @@ import Context from './Context';
 
 type ContainerAspectRatioType = '1/1' | '3/2' | '4/3' | '8/5' | '16/9';
 
-interface ICardAspectRatioProps
-	extends React.HTMLAttributes<HTMLDivElement | HTMLSpanElement> {
+type Props = {
+	/**
+	 * AspectRatio content.
+	 */
+	children: React.ReactNode;
+
+	/**
+	 * Defines a CSS class for the element.
+	 */
+	className?: string;
+
 	/**
 	 * Contrains an image for a given Aspect Ratio.
 	 */
 	containerAspectRatio?: ContainerAspectRatioType;
-}
+};
 
-const ClayCardAspectRatio: React.FunctionComponent<ICardAspectRatioProps> = ({
+const ClayCardAspectRatio = ({
 	children,
 	className,
 	containerAspectRatio,
-}: ICardAspectRatioProps) => {
+}: Props) => {
 	const {interactive} = React.useContext(Context);
 
 	const TagName = interactive ? 'span' : 'div';

diff --git a/packages/clay-card/src/Body.tsx b/packages/clay-card/src/Body.tsx
@@ -8,9 +8,11 @@ import React from 'react';
 
 import Context from './Context';
 
-const ClayCardBody: React.FunctionComponent<
-	React.HTMLAttributes<HTMLDivElement>
-> = ({children, className, ...otherProps}) => {
+const ClayCardBody = ({
+	children,
+	className,
+	...otherProps
+}: React.HTMLAttributes<HTMLDivElement>) => {
 	const {interactive} = React.useContext(Context);
 
 	const TagName = interactive ? 'span' : 'div';

diff --git a/packages/clay-card/src/Caption.tsx b/packages/clay-card/src/Caption.tsx
@@ -8,9 +8,11 @@ import React from 'react';
 
 import Context from './Context';
 
-const ClayCardCaption: React.FunctionComponent<
-	React.HTMLAttributes<HTMLDivElement | HTMLSpanElement>
-> = ({children, className, ...otherProps}) => {
+const ClayCardCaption = ({
+	children,
+	className,
+	...otherProps
+}: React.HTMLAttributes<HTMLDivElement | HTMLSpanElement>) => {
 	const {interactive} = React.useContext(Context);
 
 	const TagName = interactive ? 'span' : 'div';

diff --git a/packages/clay-card/src/Card.tsx b/packages/clay-card/src/Card.tsx
@@ -39,14 +39,14 @@ interface IProps
 			HTMLAnchorElement | HTMLSpanElement | HTMLDivElement
 		> {}
 
-const ClayCard: React.FunctionComponent<IProps> = ({
+const ClayCard = ({
 	active,
 	children,
 	className,
 	displayType,
 	selectable = false,
 	...otherProps
-}) => {
+}: IProps) => {
 	const isCardType = {
 		file: displayType === 'file',
 		image: displayType === 'image',
@@ -77,14 +77,21 @@ const ClayCard: React.FunctionComponent<IProps> = ({
 	);
 };
 
-const ClayCardHybrid: React.FunctionComponent<IProps> & {
+function ClayCardHybrid(props: IProps): JSX.Element & {
 	AspectRatio: typeof AspectRatio;
 	Body: typeof Body;
 	Caption: typeof Caption;
 	Description: typeof Description;
 	Group: typeof Group;
 	Row: typeof Row;
-} = ({children, horizontal, interactive, ...otherProps}: IProps) => {
+};
+
+function ClayCardHybrid({
+	children,
+	horizontal,
+	interactive,
+	...otherProps
+}: IProps) {
 	const Container = interactive
 		? ClayCardNavigation
 		: horizontal
@@ -96,7 +103,7 @@ const ClayCardHybrid: React.FunctionComponent<IProps> & {
 			{children}
 		</Container>
 	);
-};
+}
 
 ClayCardHybrid.displayName = 'ClayCard';
 

diff --git a/packages/clay-card/src/CardHorizontal.tsx b/packages/clay-card/src/CardHorizontal.tsx
@@ -20,9 +20,11 @@ interface IProps extends React.BaseHTMLAttributes<HTMLDivElement> {
 	selectable?: boolean;
 }
 
-const ClayCardHorizontalBody: React.FunctionComponent<
-	React.HTMLAttributes<HTMLDivElement>
-> = ({children, className, ...otherProps}) => (
+const ClayCardHorizontalBody = ({
+	children,
+	className,
+	...otherProps
+}: React.HTMLAttributes<HTMLDivElement>) => (
 	<div
 		className={classNames('card card-horizontal', className)}
 		{...otherProps}
@@ -31,26 +33,36 @@ const ClayCardHorizontalBody: React.FunctionComponent<
 	</div>
 );
 
-export const ClayCardHorizontal: React.FunctionComponent<IProps> & {
+export function ClayCardHorizontal(props: IProps): JSX.Element & {
 	Body: typeof ClayCardHorizontalBody;
-} = ({active, children, className, selectable, ...otherProps}) => (
-	<Context.Provider value={{horizontal: true, interactive: false}}>
-		<div
-			className={classNames(
-				className,
-				{
-					active,
-					'card card-horizontal': !selectable,
-					'form-check-card form-check form-check-middle-left':
-						selectable,
-				},
-				'card-type-directory'
-			)}
-			{...otherProps}
-		>
-			{children}
-		</div>
-	</Context.Provider>
-);
+};
+
+export function ClayCardHorizontal({
+	active,
+	children,
+	className,
+	selectable,
+	...otherProps
+}: IProps) {
+	return (
+		<Context.Provider value={{horizontal: true, interactive: false}}>
+			<div
+				className={classNames(
+					className,
+					{
+						active,
+						'card card-horizontal': !selectable,
+						'form-check-card form-check form-check-middle-left':
+							selectable,
+					},
+					'card-type-directory'
+				)}
+				{...otherProps}
+			>
+				{children}
+			</div>
+		</Context.Provider>
+	);
+}
 
 ClayCardHorizontal.Body = ClayCardHorizontalBody;
diff --git a/packages/clay-card/src/CardNavigation.tsx b/packages/clay-card/src/CardNavigation.tsx
@@ -13,14 +13,14 @@ interface IProps
 	extends Omit<IContext, 'interactive'>,
 		React.BaseHTMLAttributes<HTMLAnchorElement | HTMLDivElement> {}
 
-export const ClayCardNavigation: React.FunctionComponent<IProps> = ({
+export const ClayCardNavigation = ({
 	children,
 	className,
 	horizontal,
 	href,
 	onClick,
 	...otherProps
-}) => {
+}: IProps) => {
 	const Container = href ? ClayLink : 'div';
 
 	return (

diff --git a/packages/clay-card/src/CardWithHorizontal.tsx b/packages/clay-card/src/CardWithHorizontal.tsx
@@ -63,7 +63,7 @@ interface IProps extends React.BaseHTMLAttributes<HTMLDivElement> {
 	title: string;
 }
 
-export const ClayCardWithHorizontal: React.FunctionComponent<IProps> = ({
+export const ClayCardWithHorizontal = ({
 	actions,
 	checkboxProps = {},
 	disabled,

diff --git a/packages/clay-card/src/CardWithInfo.tsx b/packages/clay-card/src/CardWithInfo.tsx
@@ -110,7 +110,7 @@ interface IProps extends React.BaseHTMLAttributes<HTMLDivElement> {
 	title: string;
 }
 
-export const ClayCardWithInfo: React.FunctionComponent<IProps> = ({
+export const ClayCardWithInfo = ({
 	actions,
 	checkboxProps = {},
 	description,

diff --git a/packages/clay-card/src/CardWithNavigation.tsx b/packages/clay-card/src/CardWithNavigation.tsx
@@ -59,7 +59,7 @@ interface IProps
 
 const noop = () => {};
 
-export const ClayCardWithNavigation: React.FunctionComponent<IProps> = ({
+export const ClayCardWithNavigation = ({
 	children,
 	description,
 	horizontal = false,