fix: import in react components

Talend · Oct 25, 2023 · fbafc1d · fbafc1d
1 parent ffb0c35
commit fbafc1d
Show file tree

Hide file tree

Showing 19 changed files with 37 additions and 1,377 deletions.
diff --git a/packages/components/src/Actions/ActionButton/ActionButton.component.js b/packages/components/src/Actions/ActionButton/ActionButton.component.js
@@ -3,16 +3,19 @@ import classNames from 'classnames';
 import { Button } from '@talend/react-bootstrap';
 import { withTranslation } from 'react-i18next';
 
-import TooltipTrigger from '../../TooltipTrigger';
 import CircularProgress from '../../CircularProgress';
 import Skeleton from '../../Skeleton';
-import Icon from '../../Icon';
 import getPropsFrom from '../../utils/getPropsFrom';
 import theme from './ActionButton.module.scss';
 import I18N_DOMAIN_COMPONENTS from '../../constants';
 import getDefaultT from '../../translate';
-import OverlayTrigger from '../../OverlayTrigger';
-import { SizedIcon } from '@talend/design-system';
+import {
+	Icon,
+	SizedIcon,
+	SkeletonButtonIcon,
+	SkeletonParagraph,
+	Tooltip,
+} from '@talend/design-system';
 
 const LEFT = 'left';
 const RIGHT = 'right';
@@ -23,17 +26,7 @@ function getIcon({ icon, iconName, iconTransform, inProgress, loading }) {
 	}
 
 	if (loading) {
-		return (
-			<Skeleton
-				key="icon-skeleton"
-				size="small"
-				type="circle"
-				className={classNames(
-					theme['tc-action-button-skeleton-circle'],
-					'tc-action-button-skeleton-circle',
-				)}
-			/>
-		);
+		return <SkeletonButtonIcon />;
 	}
 
 	if (iconName) {
@@ -57,9 +50,9 @@ function getLabel({ hideLabel, label, loading }) {
 		return null;
 	}
 	if (loading) {
-		return <Skeleton key="label-skeleton" type="text" size="medium" />;
+		return <SkeletonParagraph />;
 	}
-	return <span key="label">{label}</span>;
+	return <span>{label}</span>;
 }
 
 getLabel.propTypes = {
@@ -216,15 +209,7 @@ function ActionButton(props) {
 	// warning: when `tooltip` is set to false, then no tooltip even if `hideLabel` is set
 	const shouldDisplayTooltip = (hideLabel || tooltip || tooltipLabel) && tooltip !== false;
 	if (ariaLabel && shouldDisplayTooltip) {
-		btn = (
-			<TooltipTrigger
-				label={ariaLabel}
-				tooltipPlacement={tooltipPlacement}
-				className={tooltipClassName}
-			>
-				{btn}
-			</TooltipTrigger>
-		);
+		btn = <Tooltip label={ariaLabel}>{btn}</Tooltip>;
 	}
 	return btn;
 }
@@ -247,7 +232,6 @@ ActionButton.propTypes = {
 	name: PropTypes.string,
 	onClick: PropTypes.func,
 	iconName: PropTypes.string,
-	tooltipPlacement: OverlayTrigger.propTypes.placement,
 	t: PropTypes.func,
 	tooltip: PropTypes.bool,
 	tooltipLabel: PropTypes.string,

diff --git a/packages/components/src/Actions/ActionDropdown/ActionDropdown.component.js b/packages/components/src/Actions/ActionDropdown/ActionDropdown.component.js
@@ -11,14 +11,12 @@ import omit from 'lodash/omit';
 import Inject from '../../Inject';
 import OverlayTrigger from '../../OverlayTrigger';
 import theme from './ActionDropdown.module.scss';
-import Tag from '../../Tag';
-import TooltipTrigger from '../../TooltipTrigger';
-import Icon from '../../Icon';
 import wrapOnClick from '../wrapOnClick';
 import CircularProgress from '../../CircularProgress/CircularProgress.component';
 import I18N_DOMAIN_COMPONENTS from '../../constants';
 import getDefaultT from '../../translate';
 import getTabBarBadgeLabel from '../../utils/getTabBarBadgeLabel';
+import { Icon, Tag, Tooltip } from '@talend/design-system';
 
 export const DROPDOWN_CONTAINER_CN = 'tc-dropdown-container';
 
@@ -86,7 +84,7 @@ function renderMutableMenuItem(item, index, getComponent) {
 			{item.badge && (
 				<Tag
 					className={classNames(theme['tc-dropdown-item-badge'], 'tc-dropdown-item-badge')}
-					bsStyle={item.badge.bsStyle || 'default'}
+					variant={item.badge.bsStyle || 'default'}
 				>
 					{getTabBarBadgeLabel(item.badge.label)}
 				</Tag>
@@ -293,11 +291,7 @@ class ActionDropdown extends Component {
 		);
 
 		if (hideLabel || tooltipLabel || ellipsis) {
-			return (
-				<TooltipTrigger label={tooltipLabel || label} tooltipPlacement={tooltipPlacement}>
-					{dropdown}
-				</TooltipTrigger>
-			);
+			return <Tooltip label={tooltipLabel || label}>{dropdown}</Tooltip>;
 		}
 		return dropdown;
 	}

diff --git a/packages/components/src/Actions/ActionFile/ActionFile.component.js b/packages/components/src/Actions/ActionFile/ActionFile.component.js
@@ -3,11 +3,9 @@ import { Component } from 'react';
 import classNames from 'classnames';
 import { randomUUID } from '@talend/utils';
 
-import TooltipTrigger from '../../TooltipTrigger';
 import CircularProgress from '../../CircularProgress';
-import OverlayTrigger from '../../OverlayTrigger';
-import Icon from '../../Icon';
 import theme from './ActionFile.module.scss';
+import { Icon, Tooltip } from '@talend/design-system';
 
 const LEFT = 'left';
 const RIGHT = 'right';
@@ -39,7 +37,6 @@ class ActionFile extends Component {
 		label: PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.element.isRequired]),
 		name: PropTypes.string,
 		onChange: PropTypes.func.isRequired,
-		tooltipPlacement: OverlayTrigger.propTypes.placement,
 		tooltip: PropTypes.bool,
 		tooltipLabel: PropTypes.string,
 		'data-feature': PropTypes.string,
@@ -85,7 +82,6 @@ class ActionFile extends Component {
 			name,
 			tooltip,
 			tooltipLabel,
-			tooltipPlacement,
 		} = this.props;
 		if (!available) {
 			return null;
@@ -121,11 +117,7 @@ class ActionFile extends Component {
 			</span>
 		);
 		if (hideLabel || tooltip || tooltipLabel) {
-			return (
-				<TooltipTrigger label={tooltipLabel || label} tooltipPlacement={tooltipPlacement}>
-					{btn}
-				</TooltipTrigger>
-			);
+			return <Tooltip label={tooltipLabel || label}>{btn}</Tooltip>;
 		}
 		return btn;
 	}

diff --git a/packages/components/src/Actions/ActionIconToggle/ActionIconToggle.component.js b/packages/components/src/Actions/ActionIconToggle/ActionIconToggle.component.js
@@ -2,26 +2,13 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { Button } from '@talend/react-bootstrap';
 
-import Icon from '../../Icon';
-import TooltipTrigger from '../../TooltipTrigger';
 import getPropsFrom from '../../utils/getPropsFrom';
-import OverlayTrigger from '../../OverlayTrigger';
 
 import theme from './ActionIconToggle.module.scss';
+import { Icon, Tooltip } from '@talend/design-system';
 
 function ActionIconToggle(props) {
-	const {
-		active,
-		tick,
-		className,
-		icon,
-		iconTransform,
-		id,
-		label,
-		tooltipPlacement,
-		buttonRef,
-		...rest
-	} = props;
+	const { active, tick, className, icon, iconTransform, id, label, buttonRef, ...rest } = props;
 
 	const cn = classNames(className, 'tc-icon-toggle', theme['tc-icon-toggle'], {
 		[theme.active]: active,
@@ -31,7 +18,7 @@ function ActionIconToggle(props) {
 	});
 
 	return (
-		<TooltipTrigger label={label} tooltipPlacement={tooltipPlacement}>
+		<Tooltip label={label} tooltipPlacement={tooltipPlacement}>
 			<Button
 				{...getPropsFrom(Button, rest)}
 				id={id}
@@ -43,7 +30,7 @@ function ActionIconToggle(props) {
 			>
 				<Icon name={icon} transform={iconTransform} />
 			</Button>
-		</TooltipTrigger>
+		</Tooltip>
 	);
 }
 
@@ -56,7 +43,6 @@ ActionIconToggle.propTypes = {
 	id: PropTypes.string,
 	label: PropTypes.string.isRequired,
 	onClick: PropTypes.func,
-	tooltipPlacement: OverlayTrigger.propTypes.placement,
 	buttonRef: PropTypes.func,
 };
 

diff --git a/packages/components/src/Actions/ActionSplitDropdown/ActionSplitDropdown.component.js b/packages/components/src/Actions/ActionSplitDropdown/ActionSplitDropdown.component.js
@@ -3,10 +3,10 @@ import classNames from 'classnames';
 import { SplitButton, MenuItem } from '@talend/react-bootstrap';
 import { randomUUID } from '@talend/utils';
 import { useTranslation } from 'react-i18next';
-import Icon from '../../Icon';
 import theme from './ActionSplitDropdown.module.scss';
 import wrapOnClick from '../wrapOnClick';
 import I18N_DOMAIN_COMPONENTS from '../../constants';
+import { Icon } from '@talend/design-system';
 
 /**
  * @param {object} props react props

diff --git a/packages/components/src/Actions/Actions.component.js b/packages/components/src/Actions/Actions.component.js
@@ -2,7 +2,6 @@ import PropTypes from 'prop-types';
 import { ButtonGroup } from '@talend/react-bootstrap';
 import classNames from 'classnames';
 import Action from './Action';
-import OverlayTrigger from '../OverlayTrigger';
 import Inject from '../Inject';
 
 function getButtonGroupProps(props) {
@@ -92,7 +91,6 @@ Actions.propTypes = {
 	actions: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.shape(Action.propTypes)])),
 	className: PropTypes.string,
 	hideLabel: PropTypes.bool,
-	tooltipPlacement: OverlayTrigger.propTypes.placement,
 	link: PropTypes.bool,
 	...ButtonGroup.propTypes,
 };

diff --git a/packages/components/src/AppGuidedTour/AppGuidedTour.component.js b/packages/components/src/AppGuidedTour/AppGuidedTour.component.js
@@ -3,13 +3,14 @@ import PropTypes from 'prop-types';
 import useLocalStorage from 'react-use/lib/useLocalStorage';
 import { useTranslation } from 'react-i18next';
 import GuidedTour from '../GuidedTour';
-import Toggle from '../Toggle';
 import Stepper from '../Stepper';
 import I18N_DOMAIN_COMPONENTS from '../constants';
 import DemoContentStep from './DemoContentStep.component';
+import { Form } from '@talend/design-system';
 
 const DEMO_CONTENT_STEP_ID = 1;
 export const DEFAULT_LOCAL_STORAGE_KEY = 'app-guided-tour-viewed';
+const ToggleSwitch = Form.ToggleSwitch;
 
 function AppGuidedTour({
 	isOpen,
@@ -91,7 +92,7 @@ function AppGuidedTour({
 										})}
 										{demoContentSteps && (
 											<form>
-												<Toggle
+												<ToggleSwitch
 													id="app-guided-tour__import-demo-content-toggle"
 													label={t('GUIDED_TOUR_IMPORT_DEMO_CONTENT', {
 														defaultValue: 'Import demo content',

diff --git a/packages/components/src/Badge/BadgeComposition/BadgeCategory/BadgeCategory.component.js b/packages/components/src/Badge/BadgeComposition/BadgeCategory/BadgeCategory.component.js
@@ -1,16 +1,16 @@
 import PropTypes from 'prop-types';
-import TooltipTrigger from '../../../TooltipTrigger';
 import badgeCssModule from '../../Badge.module.scss';
 import { getTheme } from '../../../theme';
+import { Tooltip } from '@talend/design-system';
 
 const theme = getTheme(badgeCssModule);
 
 const BadgeCategory = ({ label }) => (
-	<TooltipTrigger label={label} tooltipPlacement="top">
-		<span key="category" aria-label={label} className={theme('tc-badge-category')}>
+	<Tooltip label={label}>
+		<span aria-label={label} className={theme('tc-badge-category')}>
 			{label}
 		</span>
-	</TooltipTrigger>
+	</Tooltip>
 );
 
 BadgeCategory.propTypes = {

diff --git a/packages/components/src/Badge/BadgeComposition/BadgeIcon/BadgeIcon.component.js b/packages/components/src/Badge/BadgeComposition/BadgeIcon/BadgeIcon.component.js
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import Icon from '../../../Icon';
+import { Icon } from '@talend/design-system';
 import badgeCssModule from '../../Badge.module.scss';
 import { getTheme } from '../../../theme';
 

diff --git a/packages/components/src/Badge/BadgeComposition/BadgeLabel/BadgeLabel.component.js b/packages/components/src/Badge/BadgeComposition/BadgeLabel/BadgeLabel.component.js
@@ -1,22 +1,10 @@
 import PropTypes from 'prop-types';
-import TooltipTrigger from '../../../TooltipTrigger';
-import badgeCssModule from '../../Badge.module.scss';
-import { getTheme } from '../../../theme';
-
-const theme = getTheme(badgeCssModule);
+import { Badge } from '@talend/design-system';
 
 const BadgeLabel = ({ aslink, category, label, children }) => {
-	const labelTextClasses = theme({
-		'tc-badge-label-text': !(!aslink && category),
-		'tc-badge-label-text-with-categ': !aslink && category,
-	});
 	return (
 		<div className={theme('tc-badge-label')}>
-			<TooltipTrigger label={label} tooltipPlacement="top">
-				<span key="label" className={labelTextClasses}>
-					{label}
-				</span>
-			</TooltipTrigger>
+			<Badge label={label} value={category} />
 			{children}
 		</div>
 	);

diff --git a/packages/components/src/Breadcrumbs/Breadcrumbs.component.js b/packages/components/src/Breadcrumbs/Breadcrumbs.component.js
@@ -2,10 +2,10 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { withTranslation } from 'react-i18next';
 import { randomUUID } from '@talend/utils';
+import { SkeletonButtonIcon, SkeletonParagraph } from '@talend/design-system';
 
 import theme from './Breadcrumbs.module.scss';
 import { Action, ActionDropdown } from '../Actions';
-import Skeleton from '../Skeleton/Skeleton.component';
 import I18N_DOMAIN_COMPONENTS from '../constants';
 import getDefaultT from '../translate';
 
@@ -47,9 +47,9 @@ export function BreadcrumbsComponent({ loading, id, items, maxItems, t }) {
 					'tc-breadcrumb--loading',
 				)}
 			>
-				{BREADCRUMB_SKELETON.map(({ size, type }, index) => (
-					<Skeleton key={index} size={size} type={type} />
-				))}
+				<SkeletonParagraph />
+				<SkeletonButtonIcon />
+				<SkeletonParagraph />
 			</div>
 		);
 	}