chore: refactor all exports...

packages/design-system/package.json

@@ -43,8 +43,7 @@
     "react-use": "^17.4.0",
     "react-transition-group": "^2.2.9",
     "typeface-inconsolata": "^1.1.13",
-    "typeface-source-sans-pro": "^1.1.13",
-    "uncontrollable": "^8.0.2"
+    "typeface-source-sans-pro": "^1.1.13"
   },
   "devDependencies": {
     "@babel/core": "^7.22.20",

packages/design-system/src/components/Accordion/Primitive/CollapsiblePanelHeader.tsx

@@ -5,7 +5,7 @@ import tokens from '@talend/design-tokens';
 
 import { ButtonIcon } from '../../ButtonIcon';
 import { SizedIcon } from '../../Icon';
-import Divider from '../../Divider';
+import { Divider } from '../../Divider';
 import { StackHorizontal } from '../../Stack';
 import { Status } from '../../Status';
 import { variants } from '../../Status/Primitive/StatusPrimitive';

packages/design-system/src/components/Badge/primitive/BadgePrimitive.tsx

@@ -1,6 +1,6 @@
 import { Children, PropsWithChildren, Ref } from 'react';
 
-import Divider from '../../Divider';
+import { Divider } from '../../Divider';
 
 import classnames from 'classnames';
 import styles from './BadgePrimitive.module.scss';

packages/design-system/src/components/Badge/variants/BadgeDropdown.tsx

@@ -2,8 +2,7 @@ import { forwardRef, Ref } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { I18N_DOMAIN_DESIGN_SYSTEM } from '../../constants';
-import Dropdown from '../../Dropdown';
-import { DropdownItemType } from '../../Dropdown/Dropdown';
+import { Dropdown, DropdownItemType } from '../../Dropdown';
 import { SizedIcon } from '../../Icon';
 import { StackHorizontal } from '../../Stack';
 

packages/design-system/src/components/Badge/variants/BadgePopover.tsx

@@ -1,6 +1,6 @@
 import { Fragment, forwardRef, Ref } from 'react';
 
-import Divider from '../../Divider';
+import { Divider } from '../../Divider';
 import { StackHorizontal } from '../../Stack';
 import BadgeButton from '../button/BadgeButton';
 import BadgePrimitive, { BadgePopoverItem, BadgePrimitiveProps } from '../primitive/BadgePrimitive';

packages/design-system/src/components/Badge/variants/BadgeValue.tsx

@@ -4,7 +4,7 @@ import BadgePrimitive, { BadgePrimitiveProps } from '../primitive/BadgePrimitive
 import classnames from 'classnames';
 import styles from './BadgeValue.module.scss';
 import { StackHorizontal } from '../../Stack';
-import Divider from '../../Divider';
+import { Divider } from '../../Divider';
 
 export type BadgeValueProps = BadgePrimitiveProps & {
 	/**

packages/design-system/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -3,12 +3,12 @@ import { useTranslation } from 'react-i18next';
 import classnames from 'classnames';
 
 import styles from './Breadcrumbs.module.scss';
-import Link from '../Link';
-import Dropdown from '../Dropdown/Dropdown';
+import { Link } from '../Link';
+import { Dropdown } from '../Dropdown/Dropdown';
 import { ButtonTertiary } from '../Button';
 import { StackHorizontal } from '../Stack';
-import Divider from '../Divider';
-import VisuallyHidden from '../VisuallyHidden';
+import { Divider } from '../Divider';
+import { VisuallyHidden } from '../VisuallyHidden';
 import { I18N_DOMAIN_DESIGN_SYSTEM } from '../constants';
 
 type BreadcrumbsLink = {

packages/design-system/src/components/Button/Button.cy.tsx

@@ -5,7 +5,7 @@ import { useState } from 'react';
 
 import ButtonPrimitive from './Primitive/ButtonPrimitive';
 import { ButtonPrimary } from './';
-import Tooltip from '../../components/Tooltip';
+import { Tooltip } from '../../components/Tooltip';
 
 const Loading = ({ 'data-testid': dataTestId }: { 'data-testid': string }) => {
 	// eslint-disable-next-line react-hooks/rules-of-hooks

packages/design-system/src/components/Button/Primitive/ButtonPrimitive.tsx

@@ -6,7 +6,7 @@ import { ClickableProps } from '../../Clickable';
 
 import { DataAttributes, DeprecatedIconNames } from '../../../types';
 import { StackHorizontal } from '../../Stack';
-import Loading from '../../Loading';
+import { Loading } from '../../Loading';
 import { getIconWithDeprecatedSupport } from '../../Icon/DeprecatedIconHelper';
 
 import styles from './ButtonStyles.module.scss';

packages/design-system/src/components/ButtonIcon/Primitive/ButtonIconPrimitive.tsx

@@ -10,8 +10,8 @@ import { mergeRefs } from '../../../mergeRef';
 import { DeprecatedIconNames } from '../../../types';
 import Button from '../../Clickable';
 import { getIconWithDeprecatedSupport } from '../../Icon/DeprecatedIconHelper';
-import Loading from '../../Loading';
-import Tooltip, { TooltipPlacement } from '../../Tooltip';
+import { Loading } from '../../Loading';
+import { Tooltip, TooltipPlacement } from '../../Tooltip';
 
 import styles from './ButtonIcon.module.scss';
 

packages/design-system/src/components/ButtonIcon/index.ts

@@ -1,4 +1,4 @@
-import ButtonIcon from './variations/ButtonIcon';
+import { ButtonIcon } from './variations/ButtonIcon';
 import ButtonIconToggle from './variations/ButtonIconToggle';
 import ButtonIconFloating from './variations/ButtonIconFloating';
 

packages/design-system/src/components/ButtonIcon/variations/ButtonIcon.tsx

@@ -10,8 +10,6 @@ function Button<S extends AvailableSizes>(props: ButtonIconType<S>, ref: Ref<HTM
 	return <ButtonIconPrimitive {...props} variant="default" ref={ref} />;
 }
 
-const ButtonIcon = forwardRef(Button) as <S extends AvailableSizes>(
+export const ButtonIcon = forwardRef(Button) as <S extends AvailableSizes>(
 	props: ButtonIconType<S> & { ref?: Ref<HTMLButtonElement> },
 ) => ReturnType<typeof Button>;
-
-export default ButtonIcon;

packages/design-system/src/components/Card/Card.tsx

@@ -4,12 +4,12 @@ import { StackVertical } from '../Stack';
 
 import theme from './Card.module.scss';
 
-interface CardPropsType {
+export type CardPropsType = {
 	header?: ReactNode;
 	children: ReactNode;
-}
+};
 
-function Card({ header, children }: CardPropsType) {
+export function Card({ header, children }: CardPropsType) {
 	return (
 		<div className={theme.card}>
 			<StackVertical gap="L" alignContent="center">
@@ -19,5 +19,3 @@ function Card({ header, children }: CardPropsType) {
 		</div>
 	);
 }
-
-export default Card;

packages/design-system/src/components/Card/index.ts

@@ -1 +1 @@
-export { default } from './Card';
+export * from './Card';

packages/design-system/src/components/Divider/Divider.tsx

@@ -13,11 +13,10 @@ export type DividerHTMLProps = HTMLAttributes<HTMLHRElement> & RefAttributes<HTM
 
 export type DividerProps = DividerOptions & DividerHTMLProps;
 
-const Divider = forwardRef((props: DividerProps, ref: Ref<HTMLHRElement>) => {
+export const Divider = forwardRef((props: DividerProps, ref: Ref<HTMLHRElement>) => {
 	const ruleOrientation = props.orientation || 'horizontal';
 
 	return <hr {...props} aria-orientation={ruleOrientation} ref={ref} className={style.divider} />;
 });
 
 Divider.displayName = 'Divider';
-export default Divider;

packages/design-system/src/components/Divider/index.ts

@@ -1,3 +1 @@
-import Divider from './Divider';
-
-export default Divider;
+export * from './Divider';

packages/design-system/src/components/Dropdown/Dropdown.tsx

@@ -52,7 +52,7 @@ export type DropdownPropsType = {
 	'aria-label': string;
 } & Partial<DataAttributes>;
 
-const Dropdown = ({
+export const Dropdown = ({
 	children,
 	'data-test': dataTest,
 	'data-testid': dataTestId,
@@ -176,5 +176,3 @@ const Dropdown = ({
 };
 
 Dropdown.displayName = 'Dropdown';
-
-export default Dropdown;

packages/design-system/src/components/Dropdown/index.ts

@@ -1,3 +1 @@
-import Dropdown from './Dropdown';
-
-export default Dropdown;
+export * from './Dropdown';

packages/design-system/src/components/EmptyState/EmptyState.tsx

@@ -15,7 +15,7 @@ type Small = VariantType<'S', EmptyStateSmallProps>;
 
 export type EmptyStateProps = Large | Medium | Small;
 
-const EmptyState = forwardRef((props: EmptyStateProps, ref: Ref<HTMLElement>) => {
+export const EmptyState = forwardRef((props: EmptyStateProps, ref: Ref<HTMLElement>) => {
 	switch (props.variant) {
 		case 'L': {
 			const { variant, ...rest } = props;
@@ -39,5 +39,3 @@ const EmptyState = forwardRef((props: EmptyStateProps, ref: Ref<HTMLElement>) =>
 });
 
 EmptyState.displayName = 'EmptyState';
-
-export default EmptyState;

packages/design-system/src/components/EmptyState/index.ts

@@ -1,7 +1,6 @@
-import EmptyState from './EmptyState';
+export * from './EmptyState';
 import EmptyStateLarge from './variants/EmptyStateLarge';
 import EmptyStateMedium from './variants/EmptyStateMedium';
 import EmptyStateSmall from './variants/EmptyStateSmall';
 
-export default EmptyState;
 export { EmptyStateLarge, EmptyStateMedium, EmptyStateSmall };

packages/design-system/src/components/EmptyState/primitive/EmptyStatePrimitive.tsx

@@ -2,7 +2,7 @@ import { forwardRef, HTMLAttributes, ReactElement, Ref } from 'react';
 import { useTranslation } from 'react-i18next';
 import { StackVertical } from '../../Stack';
 
-import Link from '../../Link';
+import { Link } from '../../Link';
 import { ButtonPrimary } from '../../Button';
 import { ButtonPrimaryAsLink } from '../../ButtonAsLink';
 import { ButtonPrimaryPropsType } from '../../Button/variations/ButtonPrimary';

packages/design-system/src/components/EmptyState/variants/EmptyStateLarge.tsx

@@ -1,5 +1,5 @@
 import { forwardRef, Ref } from 'react';
-import Illustration from '../../illustrations';
+import { Illustration } from '../../illustrations';
 import EmptyStatePrimitive, { EmptyStatePrimitiveProps } from '../primitive/EmptyStatePrimitive';
 
 export type EmptyStateLargeProps = Omit<EmptyStatePrimitiveProps, 'illustration'> & {

packages/design-system/src/components/EmptyState/variants/EmptyStateMedium.tsx

@@ -1,6 +1,6 @@
 import EmptyStatePrimitive, { EmptyStatePrimitiveProps } from '../primitive/EmptyStatePrimitive';
 import { forwardRef, Ref } from 'react';
-import Illustration from '../../illustrations';
+import { Illustration } from '../../illustrations';
 
 export type EmptyStateMediumIcon =
 	| 'ACTIVITY'

packages/design-system/src/components/ErrorState/ErrorState.tsx

@@ -2,22 +2,22 @@ import { ReactElement, isValidElement } from 'react';
 
 import { ButtonPrimary } from '../Button';
 import { ButtonPrimaryPropsType } from '../Button/variations/ButtonPrimary';
-import Link from '../Link';
+import { Link } from '../Link';
 import { LinkProps } from '../Link/Link';
 import { StackVertical } from '../Stack';
 
 import ErrorIllustration from './illutstrations/ErrorIllustration';
 
 import styles from './ErrorState.module.scss';
 
-type ErrorStatePropTypes = {
+export type ErrorStatePropTypes = {
 	title: string;
 	description: string;
 	action?: Omit<ButtonPrimaryPropsType<'M'>, 'size'>;
 	link?: ReactElement | LinkProps;
 };
 
-function ErrorState({ title, description, action, link }: ErrorStatePropTypes) {
+export function ErrorState({ title, description, action, link }: ErrorStatePropTypes) {
 	return (
 		<article className={styles['error-state']}>
 			<StackVertical gap="M" justify="center" align="center">
@@ -35,5 +35,3 @@ function ErrorState({ title, description, action, link }: ErrorStatePropTypes) {
 		</article>
 	);
 }
-
-export default ErrorState;

packages/design-system/src/components/ErrorState/index.ts

@@ -1 +1 @@
-export { default } from './ErrorState';
+export * from './ErrorState';

packages/design-system/src/components/Form/Affix/variations/AffixButton.tsx

@@ -5,15 +5,14 @@ import classnames from 'classnames';
 import { IconNameWithSize } from '@talend/icons/dist/typeUtils';
 
 import { DeprecatedIconNames } from '../../../../types';
-import Tooltip from '../../../Tooltip';
+import { Tooltip, TooltipChildrenFnProps, TooltipChildrenFnRef } from '../../../Tooltip';
 import { StackHorizontal } from '../../../Stack';
 import Clickable, { ClickableProps } from '../../../Clickable';
 import { getIconWithDeprecatedSupport } from '../../../Icon/DeprecatedIconHelper';
 import { SizedIcon } from '../../../Icon';
 
 import styles from '../AffixStyles.module.scss';
 import { mergeRefs } from '../../../../mergeRef';
-import { TooltipChildrenFnProps, TooltipChildrenFnRef } from '../../../Tooltip/Tooltip';
 
 type CommonAffixButtonPropsType = {
 	children: string;

packages/design-system/src/components/Form/Affix/variations/AffixReadOnly.tsx

@@ -4,7 +4,7 @@ import { IconNameWithSize } from '@talend/icons';
 
 import { DeprecatedIconNames } from '../../../../types';
 import { StackHorizontal } from '../../../Stack';
-import VisuallyHidden from '../../../VisuallyHidden';
+import { VisuallyHidden } from '../../../VisuallyHidden';
 import { getIconWithDeprecatedSupport } from '../../../Icon/DeprecatedIconHelper';
 
 import styles from '../AffixStyles.module.scss';

packages/design-system/src/components/Form/Field/Input/Input.File.tsx

@@ -5,7 +5,7 @@ import classnames from 'classnames';
 import { I18N_DOMAIN_DESIGN_SYSTEM } from '../../../constants';
 import { ButtonIcon } from '../../../ButtonIcon';
 import { SizedIcon } from '../../../Icon';
-import VisuallyHidden from '../../../VisuallyHidden';
+import { VisuallyHidden } from '../../../VisuallyHidden';
 import {
 	FieldPrimitive,
 	FieldPropsPrimitive,

packages/design-system/src/components/Form/Field/Input/hooks/useRevealPassword.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 
 import { I18N_DOMAIN_DESIGN_SYSTEM } from '../../../../constants';
 import Clickable from '../../../../Clickable';
-import Tooltip from '../../../../Tooltip';
+import { Tooltip } from '../../../../Tooltip';
 import { SizedIcon } from '../../../../Icon';
 import styles from './passwordButton.module.scss';
 import { TooltipChildrenFnProps, TooltipChildrenFnRef } from '../../../../Tooltip/Tooltip';

packages/design-system/src/components/Form/Form.tsx

@@ -5,12 +5,12 @@ import { isElement } from 'react-is';
 
 import styles from './Form.module.scss';
 
-type FormProps = FormHTMLAttributes<HTMLFormElement> & {
+export type FormProps = FormHTMLAttributes<HTMLFormElement> & {
 	disabled?: boolean;
 	readOnly?: boolean;
 };
 
-const Form = forwardRef(
+export const Form = forwardRef(
 	({ disabled, readOnly, children, ...rest }: FormProps, ref: Ref<HTMLFormElement>) => {
 		const childrenProps: { disabled?: boolean; readOnly?: boolean } = {};
 		if (disabled) childrenProps.disabled = true;
@@ -27,5 +27,3 @@ const Form = forwardRef(
 );
 
 Form.displayName = 'Form';
-
-export default Form;

packages/design-system/src/components/Form/Primitives/Field/Field.tsx

@@ -4,7 +4,7 @@ import Link, { LinkProps } from '../../../Link/Link';
 import { StackVertical } from '../../../Stack';
 import Label, { LabelPrimitiveProps } from '../Label/Label';
 import { InlineMessageDestructive, InlineMessageInformation } from '../../../InlineMessage';
-import VisuallyHidden from '../../../VisuallyHidden';
+import { VisuallyHidden } from '../../../VisuallyHidden';
 import { useId } from '../../../../useId';
 
 export type FieldStatusProps =